@font-face { font-family: "DotGothic16"; src: url("/static/fonts/DotGothic16-Regular.latin.woff2") format("woff2"); font-display: swap; }
/* The Floor page (docs/14): a full-screen canvas with a few chips and panels over it.
   Warm "Office, 1999" chips; the CRT panels in green phosphor (docs/13 §8). */
.fl-page, .fl-page body { height: 100%; margin: 0; background: #15110F; overflow: hidden; }
.fl-page body > :not(#floor) { display: none !important; }
#floor.fl-on { --chip: #2A211D; --edge: #5B4232; --paper: #EFE6CF; --dim: #B8AA8A; --amber: #FFB547; --green: #7CF08A;
  --brass: #9C7754; --brass-hi: #C49A6C; position: fixed; inset: 0; z-index: 10; background: #15110F; color: var(--paper);
  font: 15px/1.4 "DotGothic16", Menlo, "DejaVu Sans Mono", monospace; font-synthesis: none; color-scheme: dark; }
#floor.fl-on.fl-embed { position: absolute; inset: 0; z-index: auto; }
#floor *, #floor *::before, #floor *::after { box-sizing: border-box; }
#floor [hidden] { display: none !important; }
.fl-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.fl-canvas { display: block; image-rendering: pixelated; }
.fl-hits { position: absolute; inset: 0; pointer-events: none; }
.fl-hit { position: absolute; background: transparent; border: 0; padding: 0; margin: 0; pointer-events: none; }
.fl-hit:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; box-shadow: 0 0 0 2px #15110F inset; }
.fl-hud { z-index: 2; position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); pointer-events: none; }
.fl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-chip { background: var(--chip); border: 2px solid var(--edge); padding: 2px 10px; box-shadow: 2px 2px 0 #000; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--paper); text-decoration: none; pointer-events: auto; }
.fl-home, .fl-twin { display: inline-flex; align-items: center; min-height: 44px; }
.fl-amber { color: var(--amber); }
.fl-line { z-index: 2; position: absolute; left: 50%; top: calc(56px + env(safe-area-inset-top)); transform: translateX(-50%); margin: 0;
  background: #15110F; border: 2px solid #E0533F; color: var(--paper); padding: 4px 12px; box-shadow: 2px 2px 0 #000; max-width: calc(100% - 24px); }
.fl-bar { z-index: 2; position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  padding: 0 max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); pointer-events: none; }
.fl-bar > * { pointer-events: auto; }
#floor button { font: inherit; color: var(--paper); cursor: pointer; }
#floor button:focus-visible, #floor a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fl-liftbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px; background: #B4B5AE;
  color: #15110F !important; border: 2px solid #3D2F28; box-shadow: 2px 2px 0 #000; }
.fl-ind { background: #15110F; color: var(--amber); padding: 0 6px; min-width: 2.6em; text-align: center; }
.fl-lift, .fl-card { z-index: 3; position: absolute; bottom: calc(66px + env(safe-area-inset-bottom)); width: min(360px, calc(100% - 20px));
  max-height: calc(100% - 140px); overflow: auto; box-shadow: 4px 4px 0 #000; padding: 10px; }
.fl-lift { left: max(10px, env(safe-area-inset-left)); background: #3D2F28; border: 3px solid var(--brass); }
.fl-lift-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 48px 6px 0; color: var(--brass-hi); }
.fl-lift h2 { margin: 0; font: inherit; font-size: 16px; color: var(--brass-hi); }
.fl-floors { display: grid; gap: 6px; }
.fl-fl { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; text-align: left; width: 100%; min-height: 52px;
  background: #2A211D; border: 2px solid #5B4232; padding: 4px 8px; }
.fl-fl:hover { border-color: var(--brass-hi); }
.fl-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #D2C5A5; color: #15110F; border: 2px solid #15110F; }
.fl-fl[aria-current="true"] .fl-num { background: var(--amber); }
.fl-nm { display: grid; }
.fl-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.fl-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; background: #5E605C; }
.fl-d-w { background: var(--green); } .fl-d-a { background: var(--amber); } .fl-d-b { background: #8A8C86; } .fl-d-n { background: #5E605C; }
.fl-card { right: max(10px, env(safe-area-inset-right)); background: #0D130F; border: 3px solid #3E9A55; color: var(--green);
  background-image: repeating-linear-gradient(0deg, rgba(124,240,138,.05) 0 1px, transparent 1px 3px); }
.fl-card h2 { margin: 0 48px 0 0; font: inherit; font-size: 20px; }
.fl-card p { margin: 4px 0 0; }
.fl-card a { color: var(--green); }
.fl-sub, .fl-dim { color: #8FD39A; font-size: 14px; }
.fl-state { color: var(--green); }
.fl-state.fl-amber { color: var(--amber); }
.fl-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; background: transparent; border: 2px solid currentColor;
  color: inherit !important; font-size: 20px; line-height: 1; }
.fl-lift .fl-x { color: var(--brass-hi) !important; }
.fl-lift, .fl-card { position: absolute; }
.fl-doors { z-index: 4; position: absolute; inset: 0; display: flex; pointer-events: none; }
.fl-door { flex: 1; background: repeating-linear-gradient(90deg, #9A9C96 0 3px, #8A8C86 3px 7px); border: 2px solid #5E605C; transition: transform .35s steps(7); }
.fl-door.fl-l { transform: translateX(-101%); } .fl-door.fl-r { transform: translateX(101%); }
.fl-doors.fl-shut .fl-door { transform: none; }
.fl-dlabel { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); background: #15110F; color: var(--amber);
  padding: 6px 14px; border: 2px solid #5B4232; opacity: 0; white-space: nowrap; }
.fl-doors.fl-shut .fl-dlabel { opacity: 1; }
.fl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
@media (max-width: 599px) {
  .fl-lift, .fl-card { left: 0; right: 0; bottom: 0; width: 100%; max-height: 70%; border-left: 0; border-right: 0; border-bottom: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 0 #000; }
  .fl-opt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fl-door, .fl-dlabel { transition: none; } }
@media (hover: hover) { .fl-stage:active { cursor: grabbing; } }