/* game.css — Time-if-[Y.]: full-screen chronal-drift time-travel game.
   8-bit skin: pixel fonts (Press Start 2P for titles, Pixelify Sans for every
   other word — the long text through 'Pixelify Body', the same face drawn at
   85 % — all kept LARGE for readability), chunky
   pixel frames, a segmented decision timer, the Workbench requester turned
   into an 8-bit dialog. WebGL dome fills the stage; a CRT veil sits over
   everything. Intro layer + CRT power-off live here too. */

/* the long text is Pixelify Sans too — one pixel face for every word. The same
   files the Google sheet in index.html serves (latin, latin-ext), drawn at
   85 %: at one size Pixelify runs ~24 % wider and ~12 % taller than VT323, so a
   line keeps about the room it had. VT323 stays behind it for a glyph it lacks. */
@font-face {
  font-family: 'Pixelify Body';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 85%;
  src: url(https://fonts.gstatic.com/s/pixelifysans/v3/CHylV-3HFUT7aC4iv1TxGDR9JnMEi1lR.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pixelify Body';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 85%;
  src: url(https://fonts.gstatic.com/s/pixelifysans/v3/CHylV-3HFUT7aC4iv1TxGDR9Jn0Eiw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --px-title: 'Press Start 2P', 'Pixelify Sans', 'VT323', monospace;
  --px-ui: 'Pixelify Sans', 'VT323', 'JetBrains Mono', monospace;
  --px-body: 'Pixelify Body', 'VT323', 'Pixelify Sans', 'JetBrains Mono', monospace;
  --px-green: #3cffa0;
  --px-green-dim: #62d88f;
  --px-amber: #ffb257;
  --px-red: #ff4b3a;
  --px-blue: #4fd6ff;
  --px-ink: #04070b;
}

#game-screen {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: #04070b;
  display: none;
  font-family: var(--px-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  touch-action: none;
  overscroll-behavior: none;     /* a swipe never becomes the browser's back gesture */
}
#game-screen.on { display: block; }

#game-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #020408;
  touch-action: none;
  cursor: crosshair;
}
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* no-WebGL fallback: flat cover image */
#game-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  filter: saturate(0.85) brightness(0.9);
  image-rendering: pixelated;
}
#game-img.on { display: block; }

/* CRT veil over the whole interface — scanlines drift, a brighter band rolls */
#game-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 30;
  background:
    radial-gradient(ellipse at center, transparent 62%, rgba(2, 6, 10, 0.42) 100%),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.34) 0 2px,
      rgba(255, 255, 255, 0.055) 2px 3px,
      transparent 3px 5px),
    linear-gradient(180deg, transparent 0%, rgba(120, 255, 180, 0.10) 50%, transparent 100%);
  background-size: 100% 100%, 100% 100%, 100% 300px;
  animation: veil-scan 6s linear infinite;
}
@keyframes veil-scan {
  from { background-position: 0 0, 0 0, 0 -300px; }
  to   { background-position: 0 0, 0 200px, 0 calc(100vh + 300px); }
}

/* ---------- pixel frame mixin: dark border, light ring, dark ring ---------- */
.pxf, #game-clock, #game-loader, #game-toast, #game-sub, .gb, #game-exit, .ghk, #game-modal-card, #gl-confirm, #game-end-card, .ge-btn, #game-end-fmt {
  border: 4px solid var(--px-ink);
  box-shadow: 0 0 0 3px var(--px-green-dim), 0 0 0 6px var(--px-ink);
}

/* ---------- decision timer: 40 pixel segments across the top ---------- */
#game-timer {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 22;
  display: none;
  padding: 10px 14px 0;
  pointer-events: none;
}
#game-timer.on { display: block; }
#game-timer .gt-bar {
  display: flex;
  gap: 3px;
  height: 20px;
  padding: 3px;
  background: var(--px-ink);
  box-shadow: 0 0 0 3px #123321;
}
#game-timer .gt-seg {
  flex: 1 1 0;
  background: #0c2418;
}
#game-timer .gt-seg.lit { background: var(--px-green); box-shadow: 0 0 6px rgba(60, 255, 160, 0.55); }
#game-timer.late .gt-seg.lit { background: var(--px-amber); box-shadow: 0 0 6px rgba(255, 178, 87, 0.55); }
#game-timer.over .gt-seg.lit { background: var(--px-red); box-shadow: 0 0 8px rgba(255, 75, 58, 0.7); animation: gt-blink 0.5s steps(2) infinite; }
#game-timer.slow .gt-seg.lit { background: var(--px-blue); box-shadow: 0 0 8px rgba(79, 214, 255, 0.6); animation: none; }
@keyframes gt-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
#game-timer .gt-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-family: var(--px-ui);
  font-size: 17px;
  color: var(--px-green-dim);
  text-shadow: 2px 2px 0 #000;
}
#game-timer .gt-num { font-family: var(--px-title); font-size: 26px; color: #eafff5; }
#game-timer.late .gt-num { color: var(--px-amber); }
#game-timer.over .gt-num { color: var(--px-red); }
#game-timer.urgent .gt-num { font-size: 34px; color: var(--px-red); animation: gt-blink 0.5s steps(2) infinite; }
#game-timer.urgent .gt-seg.lit { background: var(--px-red); box-shadow: 0 0 8px rgba(255, 75, 58, 0.7); animation: gt-blink 0.5s steps(2) infinite; }
#game-timer.late .gt-label { color: var(--px-amber); }
#game-timer.urgent .gt-label { color: var(--px-red); }
#game-timer.slow .gt-num { color: var(--px-blue); }
#game-timer.paused .gt-seg.lit { background: #6f8a7d; box-shadow: none; animation: none; }
#game-timer.paused .gt-num { color: #b4c7bd; animation: none; }
#game-timer.paused .gt-rate { color: #b4c7bd; }
/* the last ten seconds: the whole frame pulses red */
#game-screen.urgent::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 31;
  pointer-events: none;
  box-shadow: inset 0 0 22vmin rgba(255, 60, 40, 0.75);
  animation: gt-pulse 0.9s ease-in-out infinite;
}
@keyframes gt-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
#game-timer .gt-rate { font-family: var(--px-title); font-size: 13px; color: var(--px-blue); min-width: 2.2em; text-align: right; white-space: nowrap; }

#game-clock {
  position: absolute;
  top: 58px; right: 20px;
  z-index: 20;
  padding: 8px 12px;
  background: rgba(3, 8, 6, 0.8);
  color: var(--px-green-dim);
  font-family: var(--px-ui);
  font-size: 18px;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
}
#game-clock .gc-s { display: none; }
/* two square keys under the clock: the scene's own link (a click copies it,
   a phone shares it) and the user key (the account and the settings; the
   minute waits while its window is up) */
.ghk {
  position: absolute;
  top: 116px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 40px;
  padding: 0;
  background: rgba(3, 14, 9, 0.85);
  color: var(--px-green-dim);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s steps(1);
}
.ghk svg { width: 20px; height: 20px; fill: currentColor; shape-rendering: crispEdges; filter: drop-shadow(2px 2px 0 #000); }
.ghk:hover { color: var(--px-green); background: rgba(8, 40, 24, 0.95); }
.ghk:active { transform: translate(2px, 2px); }
#game-user { right: 20px; }
#game-link { right: 82px; display: none; }
#game-link.on { display: flex; }
/* the goal in reach under the two keys (the quest beyond it on hover): the story's compass */
#game-goal {
  position: absolute;
  top: 164px; right: 20px;
  z-index: 20;
  display: none;
  max-width: min(340px, 40vw);
  padding: 6px 10px;
  background: rgba(3, 8, 6, 0.8);
  color: var(--px-green);
  font-family: var(--px-ui);
  font-size: 15px;
  line-height: 1.25;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
}
#game-goal.on { display: block; }
#game-goal b { display: block; font-weight: 400; font-size: 11px; letter-spacing: 0.08em; color: var(--px-green-dim); }
#game-goal i { display: block; margin-top: 5px; font-style: normal; font-size: 11px; line-height: 1.3; color: var(--px-green-dim); opacity: 0.8; }
#game-goal i:empty { display: none; }
#game-goal.done, #game-goal.done b { color: var(--px-amber); }
#game-goal.done { animation: gg-flash 0.5s steps(2) 6; }
@keyframes gg-flash { 50% { background: rgba(60, 40, 6, 0.9); } }
#game-link.ok { color: var(--px-amber); box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink); }
body.n7-nosubs #game-sub { display: none !important; }

/* the direct entrance (/timeif): one card, one question */
#game-gate {
  position: fixed; inset: 0; z-index: 9000;
  background: #020403;
  color: var(--px-green-dim);
  font-family: var(--px-ui);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  transition: opacity 0.3s;
}
#game-gate.gone { opacity: 0; pointer-events: none; }
#game-gate-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: blur(0.45px) contrast(0.95);
}
#game-gate .gg-card {
  position: relative;
  max-width: 860px; width: 100%;
  padding: 34px 28px 30px;
  background: rgba(2, 5, 4, 0.62);
  box-shadow: 0 0 0 2px rgba(60, 255, 160, 0.18), 0 0 80px 30px rgba(2, 5, 4, 0.55);
  backdrop-filter: blur(2px);
}
#game-gate .gg-kicker { font-family: var(--px-body); font-size: 22px; letter-spacing: 0.08em; opacity: 0.75; margin-bottom: 18px; }
#game-gate .gg-title {
  font-family: var(--px-title);
  font-size: clamp(22px, 4.5vw, 44px);
  color: var(--px-green);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(60, 255, 160, 0.35);
  margin-bottom: 30px;
  line-height: 1.3;
}
#game-gate .gg-meta { font-family: var(--px-body); font-size: 24px; color: var(--px-green-dim); margin-bottom: 14px; }
#game-gate .gg-lost { color: var(--px-red); }
#game-gate .gg-q { font-family: var(--px-body); font-size: clamp(22px, 3vw, 32px); color: var(--px-amber); margin-bottom: 20px; line-height: 1.3; }
#game-gate .gg-two { display: flex; gap: 14px; justify-content: center; width: min(560px, 92%); margin: 0 auto; }
#game-gate .gg-btn {
  flex: 1 1 0; min-width: 0;
  background: rgba(3, 8, 6, 0.92);
  border: 3px solid var(--px-green-dim);
  color: var(--px-green);
  font-family: var(--px-body);
  font-size: 30px;
  line-height: 1.2;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#game-gate .gg-btn b { font-family: var(--px-title); font-size: 13px; font-weight: 400; color: var(--px-amber); margin-left: 8px; vertical-align: middle; }
#game-gate .gg-btn:hover, #game-gate .gg-btn:focus-visible { outline: none; border-color: var(--px-green); background: rgba(10, 40, 24, 0.88); color: #fff; box-shadow: 0 0 0 3px rgba(60, 255, 160, 0.18); }
#game-gate .gg-btn:active { transform: translateY(1px); }
#game-gate .gg-hint { margin-top: 18px; font-family: var(--px-body); font-size: 24px; opacity: 0.75; }
#game-gate .gg-hint b { color: var(--px-green); }

/* the tilde: the console over the film (time paused); a sibling of the stage,
   so it stays clickable above the translucent console */
#game-exit {
  position: fixed;
  top: 58px; left: 20px;
  z-index: 8800;
  display: none;
  width: 44px; height: 40px;
  background: rgba(3, 14, 9, 0.85);
  color: var(--px-green);
  cursor: pointer;
  font-family: var(--px-title);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--px-green-dim), 0 0 0 6px var(--px-ink);
}
#game-screen.on ~ #game-exit { display: block; }
#game-exit:hover { background: rgba(8, 40, 24, 0.95); }
#game-exit.on { background: rgba(10, 52, 30, 0.95); color: #eafff5; box-shadow: 0 0 0 3px var(--px-green), 0 0 0 6px var(--px-ink), 0 0 18px rgba(60, 255, 160, 0.5); }

/* the console over the film: the logged-in terminal, translucent, on top */
body.term-over #terminal-screen {
  z-index: 8700 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(2, 6, 4, 0.74);
  backdrop-filter: blur(1.5px);
}
body.term-over #terminal-screen #terminal { background: transparent; }
/* the phone's keyboard: the screen is fitted to the visual viewport by Game.keys */
body.term-over #terminal-screen { overscroll-behavior: contain; }
@media (pointer: coarse) {
  body.term-over #terminal-screen #terminal { padding-top: 100px; padding-bottom: 18px; }
}
body.term-over #game-controls, body.term-over #game-sub, body.term-over #game-cursor { visibility: hidden; }

/* ---------- the sphere's HUD: the arrow to the frame, the tunnel back, the portrait nag ---------- */
#game-aim {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  z-index: 24;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--px-ui);
  font-size: 15px;
  color: var(--px-green);
  text-shadow: 2px 2px 0 #000;
  --turn: 0deg; --x: 50%; --y: 50%;
}
#game-aim.on { display: flex; }
/* a big chevron with a stem, turned toward the frame, breathing */
#game-aim i {
  position: relative;
  display: block;
  width: clamp(44px, 12vw, 76px); height: clamp(44px, 12vw, 76px);
  transform: rotate(var(--turn));
  animation: aim-pulse 0.7s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(60, 255, 160, 0.85));
}
#game-aim i::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 56%; height: 56%;
  border-top: 7px solid var(--px-green);
  border-right: 7px solid var(--px-green);
  transform: translate(-50%, -30%) rotate(-45deg);
}
#game-aim i::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 72%;
  background: var(--px-green);
  transform: translate(-50%, -30%);
}
#game-aim b { font-size: clamp(16px, 4.4vw, 24px); font-weight: 700; letter-spacing: 1px; line-height: 1; }
#game-aim span { max-width: 46vw; text-align: center; opacity: 0.85; font-size: clamp(12px, 3.2vw, 15px); }
#game-aim.far i::before { border-color: var(--px-amber); }
#game-aim.far i::after { background: var(--px-amber); }
#game-aim.far { color: var(--px-amber); }
#game-aim.far i { filter: drop-shadow(0 0 10px rgba(255, 190, 60, 0.85)); }
@keyframes aim-pulse { 0%, 100% { opacity: 0.55; transform: rotate(var(--turn)) scale(0.94); } 50% { opacity: 1; transform: rotate(var(--turn)) scale(1.06); } }
#game-end-trailer { color: var(--px-green); }
#game-end-trailer:disabled { opacity: 0.45; cursor: default; }
#game-back {
  position: absolute; inset: 0;
  z-index: 21;
  display: none;
  cursor: pointer;
  pointer-events: none;          /* the stage under it takes the tap and the swipe */
}
#game-back .gb-hint {
  position: absolute;
  left: 50%; top: calc(50% + clamp(28px, 6vw, 52px));
  transform: translateX(-50%);
  font-family: var(--px-ui);
  font-size: clamp(12px, 2.6vw, 16px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-amber);
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  opacity: 0.9;
}
#game-back.rew .gb-hint { display: none; }
#game-back.on { display: block; }
#game-back canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#game-back .gb-txt {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--px-title);
  font-size: clamp(22px, 5vw, 44px);
  color: var(--px-green);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(60, 255, 160, 0.6);
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: gt-blink 0.9s steps(2) infinite;
}
#game-back.rew .gb-txt { color: var(--px-amber); animation: none; font-size: clamp(18px, 4vw, 34px); }
#game-rotate {
  position: fixed; inset: 0;
  z-index: 8900;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  background: #020504;
  color: var(--px-green);
  font-family: var(--px-ui);
  font-size: 20px;
  text-align: center;
  padding: 24px;
}
#game-rotate i {
  display: block;
  width: 34px; height: 60px;
  border: 4px solid var(--px-green);
  box-shadow: 0 0 0 3px var(--px-ink);
  animation: rotate-nag 1.6s ease-in-out infinite;
}
@keyframes rotate-nag { 0%, 20% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (pointer: coarse) and (orientation: landscape) { body.game-on #game-rotate { display: flex; } }

/* karaoke subtitles — one sentence at the bottom, words lit in sync with the lector */
#game-sub {
  position: absolute;
  left: 50%;
  bottom: 168px;
  transform: translateX(-50%);
  width: min(900px, 92vw);
  z-index: 16;
  display: none;
  text-align: center;
  padding: 10px 18px;
  background: rgba(2, 6, 4, 0.8);
  font-family: var(--px-body);
  font-size: 30px;
  line-height: 1.25;
  color: rgba(234, 255, 245, 0.35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
#game-sub.on { display: block; }
#game-sub .w { transition: color 0.08s linear, text-shadow 0.08s linear; }
#game-sub .w.lit {
  color: #eafff5;
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(60, 255, 160, 0.6);
}

/* error / notice toast */
#game-toast {
  position: absolute;
  left: 50%;
  bottom: 168px;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  z-index: 17;
  display: none;
  text-align: center;
  padding: 10px 14px;
  background: rgba(16, 3, 3, 0.88);
  color: #ff9a8e;
  font-family: var(--px-body);
  font-size: 24px;
  line-height: 1.25;
  box-shadow: 0 0 0 3px #c0392b, 0 0 0 6px var(--px-ink);
  pointer-events: none;
}
#game-toast.on { display: block; }

/* loader — alive during long renders */
#game-loader {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 18;
  display: none;
  width: min(520px, 88vw);
  padding: 14px 18px 12px;
  background: rgba(3, 8, 6, 0.86);
  font-family: var(--px-ui);
  font-size: 18px;
  text-align: center;
  color: var(--px-green-dim);
  text-shadow: 2px 2px 0 #000;
}
#game-loader.on { display: block; }
#game-loader .gl-hex { color: var(--px-amber); font-family: var(--px-title); font-size: 12px; }
#game-loader .gl-spin { animation: gl-blink 0.9s steps(2) infinite; }
@keyframes gl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
#game-loader .gl-bar {
  margin: 12px 0 8px;
  height: 10px;
  padding: 2px;
  background: var(--px-ink);
  box-shadow: 0 0 0 2px #123321;
  overflow: hidden;
}
#game-loader .gl-bar i {
  display: block;
  height: 100%;
  width: 30%;
  background: repeating-linear-gradient(90deg, var(--px-green) 0 6px, #1f8d59 6px 8px);
  animation: gl-sweep 1.4s steps(18) infinite;
}
@keyframes gl-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(340%); }
}
#game-loader .gl-meta { font-family: var(--px-body); font-size: 20px; color: #5aa38a; }

#game-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
#game-branches {
  display: none;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
}
#game-branches.on { display: flex; }
.gb {
  flex: 1 1 0;
  max-width: 420px;
  min-height: 64px;
  padding: 10px 12px;
  background: rgba(14, 9, 3, 0.86);
  color: var(--px-amber);
  font-family: var(--px-ui);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55);
  transition: transform 0.05s steps(1);
}
.gb b {
  font-family: var(--px-title);
  font-size: 18px;
  color: #ffd39a;
  text-shadow: 2px 2px 0 #000;
  flex: 0 0 auto;
}
.gb span {
  font-family: var(--px-body);
  font-size: 23px;
  line-height: 1.1;
  color: #ffe4c2;
  text-shadow: 1px 1px 0 #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gb:hover { background: rgba(52, 34, 8, 0.9); }
.gb:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
/* a fresh key steps up out of the floor, one after the other */
@keyframes gb-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.gb.gb-in {
  animation: gb-in 240ms steps(3) backwards;   /* backwards only: the key settles into its own transform, :active still sinks */
  animation-delay: calc(var(--gb-i, 0) * 60ms);
}
/* the operator asked for less motion: the keys are whole without the step */
@media (prefers-reduced-motion: reduce) {
  .gb.gb-in { animation: none; }
}
.gb.armed {
  background: #ff8800;
  color: #140800;
  animation: gb-pulse 0.9s steps(2) infinite;
}
.gb.armed b, .gb.armed span { color: #140800; text-shadow: none; }
@keyframes gb-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #ffd39a, 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
  50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 136, 0, 0.8); }
}
.gb-tag {
  display: block;
  margin-top: 4px;
  font-family: var(--px-ui);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #bfae8c;
  text-shadow: 1px 1px 0 #000;
}
.gb.ready { box-shadow: 0 0 0 3px var(--px-green), 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
.gb.ready b { color: var(--px-green); }
.gb.ready .gb-tag { color: var(--px-green); }
.gb.armed .gb-tag { color: #140800; text-shadow: none; }
.gb-more .gb-tag { color: #9a9aa8; }

/* the operator's pointer: a pixel reticle; the native arrow hides on the stage */
#game-screen, #game-screen * { cursor: none; }
#game-screen textarea, #game-screen input { cursor: text; }
#game-cursor {
  position: fixed; left: 0; top: 0;
  width: 0; height: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  will-change: transform;
}
#game-cursor.on { opacity: 1; }
#game-cursor.text { opacity: 0; }
#game-cursor::before {
  content: '';
  position: absolute; left: -12px; top: -12px;
  width: 24px; height: 24px;
  border: 3px solid var(--px-green);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.75);
  transition: transform 0.12s steps(3), border-color 0.12s;
}
#game-cursor::after {
  content: '';
  position: absolute; left: -2px; top: -2px;
  width: 4px; height: 4px;
  background: var(--px-green);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75);
}
#game-cursor.hot::before { transform: scale(1.4); border-color: var(--px-amber); }
#game-cursor.hot::after { background: var(--px-amber); }
#game-cursor.down::before { transform: scale(0.75); }

.gb-more { max-width: 200px; box-shadow: 0 0 0 3px #9a9aa8, 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
.gb-more b { color: #d9d9e4; }
.gb-more span { color: #c9c9d4; }
.gb-more:hover { background: rgba(40, 40, 48, 0.9); }
/* a bridge in the row: a jump across the tree to a slice already on tape —
   its rim dashed amber, like its arc on the tree map */
.gb.gb-bridge { outline: 2px dashed var(--px-amber); outline-offset: 1px; }
.gb.gb-bridge .gb-tag { color: var(--px-amber); }
/* the bridge key: the whole tree opens over the scene */
.gb-bridge-key { box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
.gb-bridge-key:hover { background: rgba(52, 34, 8, 0.9); }
.gb-bridge-key:active { box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
.gb-bridge-key b { display: inline-flex; color: var(--px-amber); }
.gb-bridge-key b svg { width: 22px; height: 22px; fill: currentColor; shape-rendering: crispEdges; }
.gb-bridge-key span { color: #ffe4c2; }
.gb-bridge-key .gb-tag { color: #ffd39a; }
/* the tree map over the scene: the HUD's exit key and the fullscreen key step aside (its own ✕ closes it) */
html.tm-lock #game-exit, html.tm-lock #fs-btn { visibility: hidden; }

/* more paths than a row shows whole (T.pathsRow): the row runs sideways
   between two edge keys that count the paths past each end; centred while
   it fits, it runs from its first key once it does not */
.gbs { display: none; }
#game-controls.many { flex-direction: row; align-items: center; gap: 12px; }
#game-controls.many .gbs { display: flex; }
#game-controls.many.fits .gbs { visibility: hidden; }
#game-controls.many #game-branches {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  touch-action: pan-x;
  scrollbar-width: none;
  margin: -8px 0 -14px;
  padding: 8px 12px 14px;        /* the keys' rims and shadows stay whole; the row itself does not move */
}
#game-controls.many #game-branches::-webkit-scrollbar { display: none; }
#game-controls.many #game-branches.dragging, #game-controls.many #game-branches.gliding { scroll-snap-type: none; }
#game-controls.many .gb { flex: 0 0 clamp(220px, 21vw, 360px); scroll-snap-align: start; }
#game-controls.many .gb-more { flex-basis: 150px; }
#game-controls.many .gb:first-child { margin-left: auto; }
#game-controls.many .gb:last-child { margin-right: auto; }
.gbs {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  min-height: 64px;
  padding: 0;
  border: 0;
  background: rgba(14, 9, 3, 0.86);
  color: #ffd39a;
  font-family: var(--px-title);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55);
  transition: transform 0.05s steps(1);
}
.gbs b { font-size: 14px; text-shadow: 2px 2px 0 #000; }
.gbs i { font-style: normal; font-family: var(--px-ui); font-size: 14px; line-height: 1; min-height: 14px; color: #bfae8c; text-shadow: 1px 1px 0 #000; }
.gbs:not(:disabled):hover { background: rgba(52, 34, 8, 0.9); }
.gbs:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
.gbs:disabled { opacity: 0.3; }

/* ---------- custom-path requester: an 8-bit dialog ---------- */
#game-modal {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 5, 8, 0.8);
}
#game-modal.on { display: flex; }
#game-modal-card {
  width: min(680px, 92vw);
  padding: 14px;
  background: #0c1030;
  box-shadow: 0 0 0 3px #4fd6ff, 0 0 0 6px var(--px-ink), 0 0 0 9px #1d2a6b, 12px 12px 0 9px rgba(0, 0, 0, 0.6);
  font-family: var(--px-ui);
}
.gm-title {
  font-family: var(--px-title);
  font-size: 13px;
  color: #eafff5;
  background: #1d2a6b;
  padding: 10px 12px;
  margin: -14px -14px 14px;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.02em;
}
#game-modal-ta {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: 4px solid var(--px-ink);
  box-shadow: inset 0 0 0 2px #1d2a6b;
  background: #05060f;
  font-family: var(--px-body);
  font-size: 26px;
  line-height: 1.15;
  padding: 10px 12px;
  outline: none;
  color: #eafff5;
  caret-color: var(--px-green);
}
#game-modal-ta::placeholder { color: #5a6aa8; }
#game-modal-ta.bad { box-shadow: inset 0 0 0 2px var(--px-red); background: #1a0508; }
.gm-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}
#game-modal-count { margin-right: auto; font-family: var(--px-body); font-size: 22px; color: #8fa0e0; }
.gm-row button {
  padding: 10px 20px;
  border: 4px solid var(--px-ink);
  background: #2a3a8a;
  color: #eafff5;
  box-shadow: 0 0 0 2px #4fd6ff, 4px 4px 0 2px rgba(0, 0, 0, 0.6);
  font-family: var(--px-title);
  font-size: 12px;
  cursor: pointer;
  text-shadow: 2px 2px 0 #000;
}
.gm-row button:hover { background: #3a4ea8; }
.gm-row button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #4fd6ff, 2px 2px 0 2px rgba(0, 0, 0, 0.6); }
#game-modal-go { background: #ff8800; color: #140800; text-shadow: none; box-shadow: 0 0 0 2px #ffd39a, 4px 4px 0 2px rgba(0, 0, 0, 0.6); }
#game-modal-go:hover { background: #ffa033; }

/* ---------- map picker (refused geolocation) ---------- */
#game-locate {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #04070b;
  display: flex;
  flex-direction: column;
  font-family: var(--px-ui);
}
#game-locate .gl-hint {
  padding: 16px 18px;
  color: var(--px-amber);
  font-family: var(--px-body);
  font-size: 24px;
  text-shadow: 1px 1px 0 #000;
}
#gl-map { flex: 1; filter: invert(1) hue-rotate(190deg) brightness(0.85) saturate(0.55); }
#gl-confirm {
  margin: 16px auto calc(18px + env(safe-area-inset-bottom, 0px));
  padding: 12px 30px;
  background: rgba(4, 12, 8, 0.85);
  color: #4f8f7f;
  font-family: var(--px-title);
  font-size: 13px;
  cursor: not-allowed;
  opacity: 0.55;
}
#gl-confirm.ready {
  color: var(--px-green);
  opacity: 1;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--px-green), 0 0 0 6px var(--px-ink), 0 0 22px rgba(60, 255, 160, 0.35);
}

/* =====================================================================
   INTRO layer (over the terminal): LOADING · caption · title card
   ===================================================================== */
#game-intro {
  position: fixed;
  inset: 0;
  z-index: 7950;
  background: rgba(4, 7, 11, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--px-ui);
  color: var(--px-green);
  outline: none;
  overflow: hidden;
}
#game-intro .gi-center {
  text-align: center;
  width: min(760px, 92vw);
  transition: opacity 0.25s steps(3), transform 0.25s steps(3);
}
#game-intro .gi-center.gone { opacity: 0; transform: scale(0.96); }
#game-intro .gi-loading {
  font-family: var(--px-title);
  font-size: clamp(22px, 4.6vw, 40px);
  line-height: 1.4;
  color: #eafff5;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(60, 255, 160, 0.65);
  white-space: nowrap;
}
#game-intro .gi-word i {
  display: inline-block;
  font-style: normal;
  animation: gi-jit 1.1s steps(2) infinite;
}
@keyframes gi-jit {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  25%      { transform: translate(-2px, 1px); opacity: 0.85; }
  50%      { transform: translate(2px, -2px); opacity: 1; text-shadow: 4px 0 0 #ff3860, -4px 0 0 #38b6ff, 3px 3px 0 #000; }
  75%      { transform: translate(0, 2px); }
}
#game-intro .gi-dots { display: inline-block; width: 1.6em; text-align: left; color: var(--px-green); }
#game-intro .gi-bar {
  margin: 22px auto 14px;
  width: min(520px, 80vw);
  height: 14px;
  padding: 3px;
  background: var(--px-ink);
  box-shadow: 0 0 0 3px var(--px-green-dim), 0 0 0 6px var(--px-ink);
  overflow: hidden;
}
#game-intro .gi-bar i {
  display: block;
  height: 100%;
  width: 26%;
  background: repeating-linear-gradient(90deg, var(--px-green) 0 8px, #1f8d59 8px 10px);
  animation: gl-sweep 1.3s steps(20) infinite;
}
#game-intro .gi-status {
  font-family: var(--px-body);
  font-size: 24px;
  line-height: 1.2;
  color: var(--px-amber);
  text-shadow: 1px 1px 0 #000;
  min-height: 1.3em;
}
#game-intro .gi-hex { font-family: var(--px-title); font-size: 11px; color: #5aa38a; }
#game-intro .gi-sec { color: #5aa38a; }

/* the caption: typed, then switched OFF like a tube */
#game-intro .gi-caption {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  font-family: var(--px-body);
  font-size: clamp(30px, 5vw, 52px);
  color: #eafff5;
  text-shadow: 3px 3px 0 #000, 0 0 16px rgba(60, 255, 160, 0.5);
  white-space: nowrap;
  transform-origin: 50% 50%;
}
#game-intro .gi-caption.on { display: block; }
#game-intro .gi-caption.off { animation: gi-off 0.5s cubic-bezier(0.3, 0.8, 0.3, 1) forwards; }
@keyframes gi-off {
  0%   { transform: translate(-50%, -50%) scale(1, 1); filter: brightness(1); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.04, 0.06); filter: brightness(3); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(0.1, 0.02); filter: brightness(5); }
  100% { transform: translate(-50%, -50%) scale(0, 0); opacity: 0; }
}

/* the title card */
#game-intro .gi-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  text-align: center;
  width: 96vw;
}
#game-intro .gi-title.on { display: block; }
#game-intro .gi-title > div { opacity: 0; }
#game-intro .gi-title > div.on { animation: gi-on 0.38s steps(4) forwards; }
@keyframes gi-on {
  0%   { opacity: 0; filter: brightness(4); transform: scale(1.08); }
  100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}
#game-intro .gi-l1 {
  font-family: var(--px-ui);
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--px-green-dim);
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 26px;
}
#game-intro .gi-l2 {
  font-family: var(--px-title);
  font-size: clamp(26px, 6vw, 64px);
  line-height: 1.25;
  color: #eafff5;
  text-shadow: 4px 4px 0 #000, 0 0 24px rgba(60, 255, 160, 0.55);
  min-height: 1.3em;
  white-space: nowrap;
  overflow: visible;
}
#game-intro .gi-l2.answer { color: var(--px-amber); text-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 178, 87, 0.5); }
#game-intro .gi-l2.hot { color: #fff; text-shadow: 5px 0 0 #ff3860, -5px 0 0 #38b6ff, 4px 4px 0 #000; }
#game-intro .gi-l2.locked { color: #eafff5; text-shadow: 4px 4px 0 #000, 0 0 34px rgba(60, 255, 160, 0.95), 0 0 70px rgba(60, 255, 160, 0.5); animation: gi-lock 0.5s steps(3) 1; }
@keyframes gi-lock {
  0%   { transform: scale(1.12); filter: brightness(5); }
  100% { transform: scale(1); filter: brightness(1); }
}
#game-intro .gi-l3 {
  font-family: var(--px-body);
  font-size: clamp(22px, 3.2vw, 34px);
  color: var(--px-amber);
  text-shadow: 2px 2px 0 #000;
  margin-top: 26px;
}

/* the CRT power-off: the picture collapses to a line, to a dot, gone */
@keyframes crt-off {
  0%   { transform: scale(1, 1); filter: brightness(1); opacity: 1; }
  32%  { transform: scale(1, 0.012); filter: brightness(3.2); opacity: 1; }
  56%  { transform: scale(0.35, 0.006); filter: brightness(4); }
  76%  { transform: scale(0.004, 0.004); filter: brightness(6); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}
#terminal-screen.crt-off, #game-intro.crt-off {
  animation: crt-off 0.76s cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
  transform-origin: 50% 50%;
}
#terminal-screen.crt-off { z-index: 3; }

/* =====================================================================
   background flashes on the terminal (half a second, from the game)
   ===================================================================== */

/* mobile */
/* ---------- the phone: a minimal HUD ----------
   the paths are numbers only (the lector has read them), the subtitles sit
   above the row of numbers and never under it, the clock and the link chip
   are gone, the timer is a thin bar */
@media (max-width: 760px), ((pointer: coarse) and (max-height: 560px)) {
  #game-timer { padding: 6px 10px 0; }
  #game-timer .gt-bar { height: 14px; }
  #game-timer .gt-text { font-size: 12px; margin-top: 5px; }
  #game-timer .gt-num { font-size: 22px; }
  #game-timer.urgent .gt-num { font-size: 26px; }
  #game-timer .gt-label { display: none; }
  /* the date and the time in the middle of the top, over the sphere */
  #game-clock {
    top: 24px; left: 50%; right: auto;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(98, 216, 143, 0.45);
    background: rgba(3, 8, 6, 0.6);
    font-size: 12px;
    line-height: 1.15;
    pointer-events: none;
  }
  #game-clock .gc-l { display: none; }
  #game-clock .gc-s { display: flex; flex-direction: column; align-items: center; }
  #game-clock .gc-s b { font-weight: 400; }
  #game-clock .gc-s i { font-style: normal; font-size: 13px; color: var(--px-green); }
  .ghk { top: 58px; width: 34px; height: 30px; border-width: 3px; }
  .ghk svg { width: 16px; height: 16px; }
  #game-user { right: 12px; }
  #game-link { right: 64px; }
  #game-goal { top: 96px; right: auto; left: 50%; transform: translateX(-50%); max-width: 78vw; padding: 3px 8px; font-size: 11px; text-align: center; }
  #game-goal.on { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #game-goal b { display: inline; font-size: 10px; margin-right: 6px; }
  #game-goal i { display: none; }
  #game-exit { top: 58px; left: 10px; width: 36px; height: 32px; font-size: 12px; }   /* one row with the two keys, clear of the timer's number */
  #game-controls { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  #game-branches { flex-direction: row; gap: 10px; justify-content: center; align-items: center; }
  .gb { flex: 0 0 auto; width: 58px; min-height: 58px; max-width: none; padding: 0; justify-content: center; gap: 0; }
  .gb span { display: none; }
  .gb b { font-size: 22px; }
  .gb-more { max-width: none; width: 58px; }
  /* the phone's row of numbers runs under the thumb; the edge keys are slim */
  #game-controls.many { gap: 8px; }
  #game-controls.many .gb, #game-controls.many .gb-more { flex: 0 0 58px; }
  #game-controls.many #game-branches { padding: 8px 8px 14px; scroll-padding-inline: 8px; }
  .gbs { width: 30px; min-height: 58px; }
  .gbs b { font-size: 11px; }
  .gbs i { font-size: 12px; min-height: 12px; }
  /* REAL holds two keys and both must read: they take the row between them,
     stacked, and they keep their words — a glyph alone is no way back */
  .gb.gb-real, .gb.gb-gen {
    flex: 1 1 0; width: auto; min-width: 0; max-width: none;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 3px; padding: 8px;
  }
  .gb.gb-real b, .gb.gb-gen b { font-size: clamp(12px, 3.6vw, 20px); white-space: nowrap; }
  .gb.gb-real span, .gb.gb-gen span { display: -webkit-box; font-size: clamp(10px, 2.8vw, 13px); }
  .gb.gb-real .gb-tag, .gb.gb-gen .gb-tag { font-size: clamp(9px, 2.4vw, 12px); margin-top: 2px; }
  #game-sub {
    bottom: calc(98px + env(safe-area-inset-bottom, 0px));
    width: 94vw;
    z-index: 25;
    font-size: 19px;
    line-height: 1.3;
    padding: 6px 10px;
    max-height: 34vh;
    overflow: hidden;
  }
  #game-toast { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); font-size: 17px; padding: 6px 10px; }
  #game-loader { width: 88vw; font-size: 14px; padding: 10px 12px 8px; }
  #game-modal-card { width: 94vw; }
  #game-modal-ta { font-size: 19px; }
  #game-intro .gi-l2 { white-space: normal; }
  #game-gate .gg-card { padding: 22px 14px 20px; }
  #game-gate .gg-two { gap: 10px; }
  #game-gate .gg-btn { font-size: 26px; padding: 12px 6px; }
}
@media (max-height: 480px) {
  #game-sub, #game-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); font-size: 17px; }
  #game-controls { padding-top: 4px; gap: 4px; }
  .gb, .gb-more { width: 46px; min-height: 46px; }
  #game-controls.many .gb, #game-controls.many .gb-more { flex-basis: 46px; }
  .gbs { min-height: 46px; }
  .gb b { font-size: 18px; }
}
/* the console's legal link steps aside while the film runs */
body.game-on #legal-link { display: none !important; }

/* a touch screen has no pointer to draw */
@media (pointer: coarse) {
  #game-cursor { display: none; }
  #game-screen, #game-screen * { cursor: auto; }
}

/* ---------- the end of the minute: the film, or the beginning ---------- */
#game-end {
  position: fixed;
  inset: 0;
  z-index: 8600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 5, 8, 0.55);
}
#game-end.on { display: flex; }
#game-end-card {
  width: min(720px, 94vw);
  padding: 16px 18px 18px;
  background: #0a0d1c;
  box-shadow: 0 0 0 3px var(--px-red), 0 0 0 6px var(--px-ink), 0 0 0 9px #4a1216, 12px 12px 0 9px rgba(0, 0, 0, 0.6);
  font-family: var(--px-ui);
  text-align: center;
  animation: ge-in 0.35s steps(4) both;
}
@keyframes ge-in { from { transform: translateY(18px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.ge-kicker {
  font-family: var(--px-title);
  font-size: 12px;
  color: var(--px-green-dim);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.ge-title {
  font-family: var(--px-title);
  font-size: clamp(22px, 4.6vw, 40px);
  color: var(--px-red);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 75, 58, 0.55);
  min-height: 1.3em;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.ge-sub {
  font-family: var(--px-body);
  font-size: 26px;
  color: #eafff5;
  margin-bottom: 16px;
}
.ge-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 8px 0;
}
#game-end-fmt, .ge-btn, #game-end button {
  font-family: var(--px-title);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 14px;
  background: #0c1030;
  color: #eafff5;
  cursor: pointer;
  border: 4px solid var(--px-ink);
  box-shadow: 0 0 0 3px var(--px-green-dim), 0 0 0 6px var(--px-ink);
  text-shadow: 2px 2px 0 #000;
}
#game-end-fmt { color: var(--px-blue); appearance: none; -webkit-appearance: none; min-width: 9em; }
#game-end button:hover, #game-end button:focus { background: #1d2a6b; outline: none; box-shadow: 0 0 0 3px var(--px-green), 0 0 0 6px var(--px-ink); }
#game-end-dl { color: var(--px-green); }
#game-end-dl:disabled { opacity: 0.45; cursor: default; }
#game-end-restart { color: var(--px-amber); }
.ge-row2 { margin-top: 14px; }
.ge-status {
  font-family: var(--px-body);
  font-size: 24px;
  min-height: 1.4em;
  color: var(--px-green-dim);
  margin: 6px 0 2px;
}
.ge-status.busy { animation: gt-blink 1.1s steps(2) infinite; }
.ge-status.bad { color: var(--px-red); }
.ge-link {
  display: inline-block;
  font-family: var(--px-title);
  font-size: 14px;
  color: var(--px-ink);
  background: var(--px-green);
  padding: 12px 18px;
  text-decoration: none;
  border: 4px solid var(--px-ink);
  box-shadow: 0 0 0 3px var(--px-green-dim), 0 0 0 6px var(--px-ink), 0 0 24px rgba(60, 255, 160, 0.5);
  animation: gt-blink 0.6s steps(2) 3;
}
.ge-link:hover { background: #eafff5; }
@media (max-width: 640px) {
  #game-end-card { padding: 12px; }
  .ge-sub { font-size: 21px; }
  .ge-status { font-size: 20px; }
  #game-end-fmt, #game-end button { font-size: 10px; padding: 9px 10px; }
}

/* ---------- REAL: the operator's own camera ---------- */
#game-modal .gm-hint { margin: 8px 0 2px; font-family: var(--px-body); font-size: 18px; color: var(--px-amber); }
#game-modal .gm-hint:empty { display: none; }
/* the Workbench gadget: a bevelled box, a knob that slides orange when REAL is on */
.gm-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin-right: 4px;
  background: #0a0f2c;
  border: 3px solid var(--px-ink);
  box-shadow: 0 0 0 2px #4fd6ff, 3px 3px 0 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  flex: 0 0 auto;
}
.gm-switch:hover { background: #131a44; }
.gm-switch:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #4fd6ff, 1px 1px 0 2px rgba(0, 0, 0, 0.6); }
.gm-switch .gs-box {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  background: #05060f;
  border: 2px solid #1d2a6b;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.75);
}
.gm-switch .gs-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: 18px;
  height: 16px;
  background: #5a6aa8;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.45), inset 2px 2px 0 rgba(255, 255, 255, 0.28);
  transition: left 0.08s steps(2), background 0.08s;
}
.gm-switch.on .gs-box { border-color: #ffd39a; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.75), 0 0 10px rgba(255, 136, 0, 0.5); }
.gm-switch.on .gs-knob { left: 21px; background: #ff8800; }
.gm-switch .gs-lab { display: flex; flex-direction: column; gap: 3px; text-align: left; line-height: 1; }
.gm-switch .gs-lab b { font-family: var(--px-title); font-size: 11px; color: #8fa0e0; text-shadow: 2px 2px 0 #000; }
.gm-switch.on .gs-lab b { color: #ff8800; }
.gm-switch .gs-lab em { font-family: var(--px-body); font-style: normal; font-size: 16px; color: #5a6aa8; }
.gm-switch.on .gs-lab em { color: #ffd39a; }
#game-modal.real.drafted #game-modal-ta { display: block; }
#game-modal.real:not(.drafted) #game-modal-count { display: none; }
#game-modal.real:not(.drafted) #game-modal-ta { opacity: 0.45; }
.gb.gb-real span { color: var(--px-amber); }
.gb.gb-real b { letter-spacing: 0.04em; }
/* the way back on the row: the drift's own blue beside the camera's amber */
.gb.gb-gen { box-shadow: 0 0 0 3px #4fd6ff, 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
.gb.gb-gen:active { box-shadow: 0 0 0 3px #4fd6ff, 0 0 0 6px var(--px-ink), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
.gb.gb-gen b { color: #9fd8ff; letter-spacing: 0.04em; }
.gb.gb-gen span { color: #cfe9ff; }
.gb.gb-gen .gb-tag { color: #6f9fc0; }
body.real-mode #game-timer { display: none !important; }
/* the close-up readout: a small figure under the clock while the picture is closer than the reel */
#game-zoom {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  font-family: var(--px-title); font-size: 13px; letter-spacing: 0.08em;
  color: #ffd39a; text-shadow: 2px 2px 0 #000;
  padding: 4px 8px; background: rgba(14, 9, 3, 0.7); box-shadow: 0 0 0 2px var(--px-amber), 0 0 0 4px var(--px-ink);
  opacity: 0; pointer-events: none; transition: opacity 0.2s steps(3); z-index: 5;
}
#game-zoom.on { opacity: 1; }
body.real-mode #game-zoom { display: none !important; }
/* UI-On-Demand: the hand rests, the interface steps aside; a stir brings it back at once */
#game-controls, #game-aim, #game-link, #game-user, #game-zoom, #game-exit, #game-timer { transition: opacity 0.15s steps(2); }
body.ui-quiet #game-controls, body.ui-quiet #game-aim, body.ui-quiet #game-link, body.ui-quiet #game-user, body.ui-quiet #game-zoom, body.ui-quiet #game-exit { opacity: 0.16; transition: opacity 0.9s steps(4); }
body.ui-quiet #game-timer { opacity: 0.45; transition: opacity 0.9s steps(4); }
body.ui-quiet #game-goal { opacity: 0.35; transition: opacity 0.9s steps(4); }
/* the edge turn: a pointer resting at the left or right edge turns the view; the chevrons wake there */
#game-spin { position: absolute; inset: 0; pointer-events: none; z-index: 23; }
#game-spin i {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--px-title); font-style: normal; font-size: 22px; letter-spacing: -0.1em;
  color: #ffd39a; text-shadow: 2px 2px 0 #000, 0 0 14px rgba(255, 136, 0, 0.55);
  opacity: 0; transition: opacity 0.2s steps(3);
}
#game-spin .gs-l { left: 14px; } #game-spin .gs-r { right: 14px; }
#game-spin.on.left .gs-l, #game-spin.on.right .gs-r { opacity: calc(0.35 + 0.65 * var(--k, 1)); animation: gs-pulse 0.6s steps(2) infinite; }
@keyframes gs-pulse { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(var(--gs-dx, 0px)); } }
#game-spin .gs-l { --gs-dx: -3px; } #game-spin .gs-r { --gs-dx: 3px; }
@media (prefers-reduced-motion: reduce) { #game-spin i { animation: none !important; } }
body.ui-quiet #game-controls:hover, body.ui-quiet #game-exit:hover { opacity: 1; }
@media (max-width: 560px) {
  .gm-row { flex-wrap: wrap; gap: 8px; }
  .gm-switch { order: -1; width: 100%; margin-right: 0; }
  .gm-row button { padding: 10px 12px; }
  #game-modal-count { margin-right: auto; font-size: 18px; }
}
#real-intro { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; background: rgba(2, 5, 4, 0.9); padding: 18px; }
#real-intro .ri-card { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; border: 3px solid var(--px-green); background: #06110b; padding: 22px 24px; font-family: var(--px-body); font-size: 20px; line-height: 1.35; color: #eafff5; box-shadow: 0 0 0 3px var(--px-ink); }
#real-intro .ri-kicker { font-family: var(--px-title); color: var(--px-amber); font-size: 18px; letter-spacing: 0.1em; margin-bottom: 10px; }
#real-intro .ri-text + .ri-text { margin-top: 12px; }
#real-intro .ri-perm { color: var(--px-amber); }
#real-intro .ri-row { display: flex; gap: 12px; margin-top: 18px; }
#real-intro button { font-family: var(--px-title); font-size: 20px; padding: 12px 22px; border: 3px solid var(--px-green); background: #0a2416; color: var(--px-green); cursor: pointer; }
#real-intro button.ri-no { border-color: #7a3a3a; color: #ff8a8a; background: #1a0808; }
#real-intro button:disabled { opacity: 0.5; }
#real-intro ol.ri-steps { margin: 6px 0 0 22px; padding: 0; }
#real-intro ol.ri-steps li + li { margin-top: 8px; }
#real-intro ol.ri-steps li:first-child { color: var(--px-amber); }
/* the warning a marked path carries: the REAL card's frame, in amber; NO (safe) holds the focus */
#patho-warn { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; background: rgba(8, 4, 2, 0.93); padding: 18px; }
#patho-warn .ri-card { width: min(560px, 100%); border: 3px solid var(--px-amber); background: #140c04; padding: 22px 24px; font-family: var(--px-body); font-size: 20px; line-height: 1.35; color: #fff3e0; box-shadow: 0 0 0 3px var(--px-ink); }
#patho-warn .ri-kicker { font-family: var(--px-title); color: var(--px-amber); font-size: 18px; letter-spacing: 0.1em; margin-bottom: 10px; }
#patho-warn .ri-text + .ri-text { margin-top: 12px; }
#patho-warn .ri-perm { color: var(--px-amber); }
#patho-warn .ri-row { display: flex; gap: 12px; margin-top: 18px; }
#patho-warn button { font-family: var(--px-title); font-size: 20px; padding: 12px 22px; border: 3px solid var(--px-amber); background: #2a1a06; color: #ffd39a; cursor: pointer; }
#patho-warn button.ri-no { border-color: var(--px-green); color: var(--px-green); background: #0a2416; }
#patho-warn button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gb .gb-tag.gb-warn { color: #ffb04a; }

/* the recorder: the drift's own screen — a square that fills the height and
   is cropped at the sides (the file keeps the whole square), a bar that runs
   with the hold, two buttons and nothing above them */
#real-rec {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--px-ink);
  color: #eafff5;
  font-family: var(--px-body);
  padding: max(8px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#real-rec .rr-view {
  position: relative;
  width: 100%;
  max-width: 720px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 3px var(--px-green-dim), 0 0 0 6px var(--px-ink);
}
#real-rec video, #real-rec .rr-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  display: block;
  background: #000;
}
#real-rec .rr-ghost { opacity: 0; pointer-events: none; background: none; }
#real-rec .rr-ghost.on { opacity: 0.2; }
#real-rec .rr-cam { position: absolute; right: 8px; bottom: 6px; font-family: var(--px-ui); font-size: 13px; color: rgba(143, 160, 224, 0.75); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 1px 1px 0 #000; pointer-events: none; }
#real-rec .rr-warn { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: rgba(120, 10, 10, 0.85); color: #fff; font-family: var(--px-title); font-size: 14px; text-align: center; display: none; }
#real-rec.dark .rr-warn, #real-rec.short .rr-warn { display: block; }
#real-rec .rr-dot { position: absolute; left: 10px; top: 8px; font-family: var(--px-title); color: #ff5a5a; font-size: 16px; display: none; text-shadow: 2px 2px 0 #000; }
#real-rec.rec .rr-dot { display: block; animation: gt-blink 0.8s steps(2) infinite; }
#real-rec .rr-meter { position: relative; width: 100%; max-width: 720px; height: 14px; margin-top: 10px; background: #0a1a10; border: 2px solid var(--px-green-dim); }
#real-rec .rr-fill { height: 100%; width: 0; background: var(--px-green); }
#real-rec.rec .rr-fill { background: #ff5a5a; }
#real-rec .rr-marks i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--px-ink); }
#real-rec .rr-count { margin-top: 6px; font-family: var(--px-title); font-size: clamp(10px, 3vw, 18px); white-space: nowrap; color: var(--px-amber); text-shadow: 2px 2px 0 #000; }
#real-rec .rr-row { display: flex; gap: 12px; align-items: stretch; width: 100%; max-width: 720px; margin-top: 10px; }
#real-rec .rr-row button {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--px-title);
  font-size: clamp(11px, 3.4vw, 18px);
  line-height: 1;
  padding: 18px 4px;
  color: var(--px-amber);
  background: rgba(14, 9, 3, 0.92);
  border: 0;
  box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55);
  text-shadow: 2px 2px 0 #000;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#real-rec .rr-row button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--px-amber), 0 0 0 6px var(--px-ink), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
#real-rec .rr-rec { color: #ff8a8a; box-shadow: 0 0 0 3px #ff5a5a, 0 0 0 6px var(--px-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
#real-rec.rec .rr-rec { background: #ff5a5a; color: #140800; text-shadow: none; }
#real-rec.dark .rr-rec { opacity: 0.35; }