@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono.woff2) format('woff2'); }

:root {
  --ui: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --pixel: 'VT323', ui-monospace, 'Courier New', monospace;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --panel: #1e1e1e;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }

.room {
  position: fixed; inset: 0; isolation: isolate; overflow: hidden;
  background: #000; color: #ccc; font: 400 14px/1.15 var(--ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none;
}
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn { all: unset; box-sizing: border-box; cursor: pointer; }
.btn:focus-visible { outline: 1px solid #9a9a9a; outline-offset: 5px; border-radius: 2px; }
.btn:disabled { cursor: default; }
.link { position: relative; }
.link::after { content: ''; position: absolute; left: 0; bottom: -1px; translate: 0 100%; width: 100%; height: 1px; background: #bbb; }

.stage { position: absolute; inset: 0; transition: opacity 0.7s ease-out; }
.room[data-stage='loading'] .stage { opacity: 0; }
.vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 10vw 0 #000; }

/* crosshair and tooltip */
.crosshair {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: rgba(230, 230, 230, 0.75); box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  opacity: 0; transition: opacity 0.4s, transform 0.25s var(--ease-out); pointer-events: none;
}
.crosshair[data-on='true'] { opacity: 1; }
.crosshair[data-hot='true'] { transform: scale(2.2); background: #fff; }
.tip {
  position: absolute; left: 50%; top: calc(50% + 22px); z-index: 3; translate: -50% 0;
  padding: 3px 8px 3px 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); color: #ccc;
  font: 400 19px/1 var(--pixel); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.tip[data-on='true'] { opacity: 1; }
.tip kbd { font: inherit; color: #fff; margin-right: 6px; padding: 0 4px; border: 1px solid #777; border-radius: 2px; }

/* identity badge */
.badge {
  position: absolute; top: 24px; left: 28px; z-index: 4; display: flex; gap: 10px; align-items: baseline;
  font: 400 20px/1 var(--pixel); letter-spacing: 0.1em; color: #bbb; text-shadow: 0 0 3px rgba(255, 255, 255, 0.35);
  opacity: 0; translate: -10px 0; transition: opacity 1.2s var(--ease-out), translate 1.2s var(--ease-out); pointer-events: none;
}
.badge[data-on='true'] { opacity: 0.75; translate: 0 0; }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #5dff8a; box-shadow: 0 0 6px #5dff8a; align-self: center; animation: blink 2.4s infinite; }
.badge-num { color: #7d7d7d; }
@keyframes blink { 0%, 70% { opacity: 1; } 85% { opacity: 0.25; } 100% { opacity: 1; } }

/* sound toggle, same as the lofopad room */
.sound {
  position: absolute; top: 25px; right: 30px; z-index: 4; width: 125px; height: 20px; color: #ccc; font-size: 13px;
  border-radius: 5px; background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden; translate: 15px 0;
  transition: opacity 1.5s var(--ease-out), translate 1.5s var(--ease-out), visibility 0s 1.5s;
}
.sound[data-on='true'] { opacity: 0.7; visibility: visible; translate: 0 0; transition: opacity 1.5s var(--ease-out), translate 1.5s var(--ease-out), visibility 0s; }
@media (any-hover: hover) { .sound[data-on='true']:hover { opacity: 1; transition: opacity 0.2s; } }
.sound-row { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 6px; translate: -50% -50%; scale: 0.95; opacity: 0; transition: 0.5s; text-shadow: 0 0 3px rgba(255, 255, 255, 0.55); }
.sound-row[data-on='true'] { opacity: 1; scale: 1; }
.sound-icon { flex: none; width: 0.62em; height: 0.62em; fill: #bbb; translate: 1px 0; }
.sound-text { width: 100px; text-align: center; font: 400 18px/1 var(--pixel); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* controls hint */
.hint {
  position: absolute; left: 50%; bottom: 28px; z-index: 4; translate: -50% 10px; display: flex; gap: 22px;
  font: 400 18px/1 var(--pixel); letter-spacing: 0.1em; text-transform: uppercase; color: #9a9a9a; white-space: nowrap;
  opacity: 0; transition: opacity 1.2s var(--ease-out), translate 1.2s var(--ease-out); pointer-events: none;
}
.hint[data-on='true'] { opacity: 0.85; translate: -50% 0; }
.hint b { color: #ddd; font-weight: 400; }

/* sound modal */
.modal { position: absolute; top: 50%; left: 50%; z-index: 6; padding: 50px 60px 55px; scale: 0.95; opacity: 0; visibility: hidden; translate: -50% -40%; will-change: transform; }
.modal > * { position: relative; }
.modal::before { content: ''; position: absolute; inset: 0; background: var(--panel); border-radius: 10px; filter: blur(3px); }
.modal[data-state='open'] { opacity: 1; scale: 1; visibility: visible; translate: -50% -50%; transition: opacity 1.5s 0.5s var(--ease-out), scale 1.5s 0.5s var(--ease-out), translate 1.5s 0.5s var(--ease-out); }
.modal[data-state='closing'] { opacity: 0; scale: 0.98; visibility: hidden; translate: -50% -70%; pointer-events: none; transition: opacity 1.5s var(--ease-in-out), scale 1.5s var(--ease-in-out), translate 1.5s var(--ease-in-out), visibility 0s 1.5s; }
.question { margin: 0; font-size: 20px; letter-spacing: -0.3px; text-align: center; white-space: nowrap; color: #eee; }
.choices { position: relative; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 20px; letter-spacing: -0.3px; color: #ccc; }
.loading { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 130%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--panel); transition: 0.4s ease-out; }
.choices[data-ready='true'] .loading { opacity: 0; scale: 0.95; visibility: hidden; }
.loader::after, .loading::after { content: ''; display: block; width: 1.2em; aspect-ratio: 1; border-radius: 50%; animation: spin 1s linear infinite; background-image: conic-gradient(var(--spin-from, #1e1e1e) 0deg, #5e5e5e 1turn); }
@keyframes spin { to { rotate: 1turn; } }
.loader { --spin-from: #000; position: absolute; top: 50%; left: 50%; z-index: 5; translate: -50% -50%; display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -0.2px; color: #aaa; opacity: 0; visibility: hidden; transition: opacity 0.6s ease-out, visibility 0s 0.6s; pointer-events: none; }
.loader[data-on='true'] { opacity: 1; visibility: visible; transition: opacity 0.6s ease-out 0.6s; }
.loader-bar { position: absolute; left: 0; right: 0; bottom: -14px; height: 1px; background: #2a2a2a; }
.loader-bar i { display: block; height: 100%; width: 0; background: #888; transition: width 0.4s ease-out; }

/* spawn card */
.spawn { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: #000; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 1.2s ease-out, visibility 0s 1.2s; }
.spawn[data-on='true'] { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out; }
.spawn-card { text-align: center; font-family: var(--pixel); color: #cfcfcf; text-shadow: 0 0 6px rgba(214, 222, 232, 0.45); }
.spawn-small { font-size: 20px; letter-spacing: 0.14em; color: #8a8a8a; min-height: 1em; }
.spawn-role { margin-top: 18px; font-size: clamp(44px, 9vw, 96px); letter-spacing: 0.08em; line-height: 0.9; min-height: 0.9em; }
.spawn-num { margin-top: 8px; font-size: 24px; letter-spacing: 0.2em; color: #9a9a9a; min-height: 1em; }
.spawn-line { margin: 22px auto 0; max-width: 30ch; font: 400 15px/1.4 var(--ui); color: #8d8d8d; text-shadow: none; opacity: 0; transition: opacity 0.8s; }
.spawn-line[data-on='true'] { opacity: 1; }
.spawn-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; pointer-events: none; }

/* pause */
.pause { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.pause[data-on='true'] { opacity: 1; visibility: visible; transition: opacity 0.35s; }
.pause-box { text-align: center; }
.pause-go { font: 400 34px/1 var(--pixel); letter-spacing: 0.14em; color: #e6e6e6; text-shadow: 0 0 8px rgba(214, 222, 232, 0.5); }
.pause-keys { margin-top: 22px; display: grid; grid-template-columns: auto auto; gap: 8px 22px; justify-content: center; font: 400 18px/1 var(--pixel); letter-spacing: 0.08em; color: #9a9a9a; text-transform: uppercase; text-align: left; }
.pause-keys b { color: #ddd; font-weight: 400; text-align: right; }
.pause-links { margin-top: 30px; display: flex; gap: 22px; justify-content: center; font-size: 16px; color: #bbb; }
.pause-links a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* monitor menu overlay (hit areas over the 3D screen, or a flat CRT on narrow screens) */
.menu { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.menu[data-on='true'] { pointer-events: auto; }
.menu-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; visibility: hidden; background: #0a0a0b; transform-origin: 50% 50%; transition: opacity 0.25s ease-out, visibility 0s 0.25s; }
.menu[data-on='true'][data-flat='true'] .menu-art { opacity: 1; visibility: visible; transition: opacity 0.42s ease-out; }
.menu-hit { position: absolute; display: block; min-width: 24px; min-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-hit:disabled { cursor: default; }
.menu-row:focus-visible { outline: none; }
a.menu-hit:focus-visible { outline: 1px solid #9a9a9a; outline-offset: 3px; border-radius: 2px; }
.menu-black { position: absolute; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; }

.cover { position: fixed; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; }
.cover[data-state='soft'] { opacity: 1; pointer-events: auto; transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.cover[data-state='cut'] { opacity: 1; pointer-events: auto; transition: opacity 0.12s linear; }
.cover[data-state='in'] { opacity: 1; }

.fallback { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; gap: 15px; background: #000; font-size: 20px; letter-spacing: -0.3px; color: #ccc; }
.room[data-stage='fallback'] .fallback { display: flex; }
.fallback a { color: inherit; }
.slash { color: #777; }

/* touch stick */
.stick { position: absolute; z-index: 4; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.stick[data-on='true'] { opacity: 1; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(230, 230, 230, 0.35); }
.use-btn { position: absolute; right: 22px; bottom: 26px; z-index: 4; width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.35); color: #ddd; font: 400 22px/1 var(--pixel); letter-spacing: 0.1em; display: none; }
.room[data-touch='true'][data-mode='fp'] .use-btn[data-on='true'] { display: grid; place-items: center; }

.room:not([data-view='room']) .sound, .room:not([data-view='room']) .badge, .room:not([data-view='room']) .hint { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out, visibility 0s 0.5s; }

@media screen and (max-width: 768px) {
  .sound { top: 15px; right: 10px; width: 115px; font-size: 12px; }
  .sound-text { font-size: 17px; }
  .sound-row { gap: 3px; }
  .badge { top: 17px; left: 14px; font-size: 17px; }
  .modal { padding: 30px 30px 35px; }
  .question { font-size: 15px; letter-spacing: -0.2px; }
  .choices, .fallback { font-size: 16px; letter-spacing: -0.2px; }
  .fallback { flex-direction: column; gap: 22px; }
  .slash { display: none; }
  .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .badge, .hint, .modal { transition: opacity 0.3s; }
}

/* nothing of the bunker shows before you step in */
.room[data-mode='waiting-sound'] .stage, .room[data-mode='waiting'] .stage { opacity: 0; }
.hint .look-drag { display: none; }
.room[data-free='true'] .hint .look-drag { display: inline; }
.room[data-free='true'] .hint .look-lock { display: none; }
.room[data-free='true'] .stage { cursor: grab; }
.room[data-free='true'] .stage:active { cursor: grabbing; }