/* ReIN Bot — modernised retro desktop.
 *
 * Reference: a 90s Mac. Chunky window chrome with pinstripe title bars and a close box,
 * hard black outlines, solid offset shadows with no blur, saturated flat colour, a
 * bitmap face for chrome and a Sad Mac when things break.
 *
 * The "modernised" half is deliberate and does the heavy lifting: bitmap type is used
 * for labels, chrome and numbers ONLY — anything you actually have to read is set in a
 * clean grotesque at a comfortable size, the layout is fluid rather than 640x480, and
 * the motion is smooth rather than stepped. Pure period-accuracy would be a worse game.
 */

/* ═════════════════════════ tokens ═════════════════════════ */
:root {
  --ink:      #14121a;
  --ink-2:    #4d4857;
  --ink-3:    #857e93;

  --paper:    #ffffff;
  --desk:     #e9e4d8;   /* warm platinum desktop */
  --desk-2:   #d8d2c2;
  --chrome:   #eceae4;   /* window title bar */

  --hot:      #ff1f5a;   /* the magenta of the reference screen */
  --bondi:    #17b6c9;   /* iMac teal */
  --lime:     #d9f441;
  --grape:    #7b4fe8;
  --amber:    #ffb020;

  --good:     #12a150;
  --bad:      #d62246;

  --line:     #14121a;
  --bw:       3px;                       /* border weight */
  --shadow:   5px 5px 0 var(--line);
  --shadow-lg:8px 8px 0 var(--line);

  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --pixel:   "Silkscreen", "Courier New", ui-monospace, monospace;
  --body:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2, .9, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

/* scroll-behavior on the ROOT, which is the scrolling element here. */
html {
  scroll-behavior: smooth;
  /* Always reserve the scrollbar track. Without it a tall screen (landing, 1258px)
     shows a scrollbar and a short one (create, 730px) does not, so clientWidth swings
     1521 <-> 1536 and every centred layout jumps 7.5px sideways on navigation.
     Measured, not guessed.

     scrollbar-gutter alone is NOT enough: it applies only to scroll containers, and
     with overflow-y computing to `visible` the root is not one, so it silently does
     nothing. overflow-y: scroll is what actually reserves the track; the gutter
     property is kept because it is better-behaved wherever it does apply.

     AND THE ROOT MUST NOT ALSO SET overflow-x. `overflow-x: clip` with
     `overflow-y: scroll` is not a legal pair: the browser keeps `clip` and DISCARDS
     the `scroll`, computing ["clip","visible"] — so the declaration reads correctly in
     the file and does nothing at all. Measured three ways in the live page:
       clip + scroll             -> computed ["clip","visible"],  shift 15px
       overflow-y: scroll alone  -> computed ["auto","scroll"],   shift 0
     Horizontal overflow is suppressed on `body` instead, which is where it was needed
     anyway. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* The marquee re-lays-out continuously; scroll anchoring tries to compensate and
     fights the user. */
  overflow-anchor: none;
}

/* ═════════════════════════ desktop ═════════════════════════ */
/* The classic Mac desktop was a 50% stipple. This is that, at 2px, plus faint CRT
   scanlines over the whole page to tie the flat UI to the tube motif. */
.desktop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(var(--desk-2) 1px, transparent 1px),
    radial-gradient(var(--desk-2) 1px, transparent 1px);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  opacity: .85;
}
.crt-lines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(20,18,26,.035) 0 1px, transparent 1px 3px);
}
#app { position: relative; z-index: 1; }

/* ═════════════════════════ screens ═════════════════════════ */
.screen { display: none; }
/* Deliberately NO `both` fill mode. With it, the element takes the keyframe's `from`
   state -- opacity 0 -- whenever the animation is not actively running, so anything
   that pauses or disables animations renders the whole app invisible while the DOM
   insists it is fine. Found exactly that way: a debugging stylesheet that paused
   animations turned every screen blank, and the geometry still measured correct.
   Without `both`, the element's normal (visible) styles apply outside the animation,
   so motion is purely additive. */
.screen.active { display: block; animation: snap .18s var(--ease); }
@keyframes snap { from { opacity: 0; transform: translateY(6px); } }
.hidden { display: none !important; }

.stack { min-height: 100svh; display: grid; place-items: center; padding: 2rem 1rem; }
.stack > * { width: 100%; max-width: 30rem; }
.stack.wide > * { max-width: 62rem; }

/* ═════════════════════════ windows ═════════════════════════ */
.win {
  background: var(--paper);
  box-shadow: var(--shadow);
  border: var(--bw) solid var(--line);
  border-radius: 10px;
}
.w-sm { max-width: 22rem; }
.w-md { max-width: 30rem; }

.win-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .6rem;
  background: var(--chrome);
  border-bottom: var(--bw) solid var(--line);
  border-radius: 6px 6px 0 0;
  /* The pinstripes that made a Mac title bar a title bar. */
  background-image: repeating-linear-gradient(
    to bottom, rgba(20,18,26,.14) 0 1px, transparent 1px 3px);
  background-clip: padding-box;
}
.win-bar.hi { background-color: var(--lime); }
.win-bar.alert { background-color: var(--hot); }
.win-bar.alert .win-title { color: #fff; }

.box {
  width: 13px; height: 13px; flex: none;
  border: 2px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
}
.win-title {
  font-family: var(--pixel);
  font-size: .74rem;
  letter-spacing: .02em;
  text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-badge, .win-clock {
  margin-left: auto;
  font-family: var(--pixel); font-size: .74rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 0 .35rem;
}
.win-clock b { font-family: var(--pixel); }
.win-body { padding: 1.1rem; }
.win-body.center { text-align: center; }

/* The "inside the tube" treatment, for anything showing a picture. */
.tube {
  background: #14121a;
  border-radius: 0 0 6px 6px;
  position: relative;
}
.tube::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  border-radius: inherit;
}


/* ═════════════════════════ type ═════════════════════════ */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5rem; }
.h1 { font-size: clamp(1.6rem, 4.6vw, 2.3rem); }
.h2 { font-size: clamp(1.3rem, 3.6vw, 1.7rem); }
.h3 { font-size: 1.15rem; }

.mono-sm { font-family: var(--pixel); font-size: .72rem; letter-spacing: .02em; }
.dim { color: var(--ink-3); }
.hint { display: block; font-size: .82rem; color: var(--ink-3); margin-top: .4rem; }
.prose { color: var(--ink-2); font-size: .93rem; }
.prose ol { padding-left: 1.15rem; margin: .5rem 0; }
.prose li { margin: .35rem 0; }
.prose code { font-family: var(--pixel); font-size: .8em; background: var(--desk); padding: .1rem .3rem; border: 2px solid var(--line); border-radius: 3px; }
a { color: var(--grape); font-weight: 500; }

.badge {
  display: inline-block;
  box-shadow: 3px 3px 0 var(--line);
  font-family: var(--pixel); font-size: .7rem;
  background: var(--lime);
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  padding: .28rem .8rem;
  margin: 0 0 1.4rem;
}

/* ═════════════════════════ menubar ═════════════════════════ */
.menubar {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .3rem 1rem;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--line);
  font-family: var(--pixel); font-size: .72rem;
  position: sticky; top: 0; z-index: 5;
}
.mb-logo { color: var(--hot); }
.mb-right { margin-left: auto; color: var(--ink-3); }
@media (max-width: 34rem) { .menubar span:nth-child(n+3):not(.mb-right) { display: none; } }

/* ═════════════════════════ hero ═════════════════════════ */
.hero {
  display: grid; gap: 2.5rem;
  align-items: center;
  max-width: 74rem; margin: 0 auto;
  padding: 3rem 1.1rem 2rem;
}
@media (min-width: 60rem) { .hero { grid-template-columns: 1.05fr .95fr; padding-top: 4rem; } }
.hero-inner { text-align: center; }
@media (min-width: 60rem) { .hero-inner { text-align: left; } }

.wordmark { position: relative; margin: 0; line-height: .85; }
.wordmark span {
  display: block;
  font-family: var(--display);
  font-size: clamp(3rem, 11vw, 6rem);
  letter-spacing: -.045em;
}
.wordmark i { font-style: normal; color: var(--hot); }
.wm-shadow { position: absolute; inset: 0; color: var(--line); transform: translate(6px, 6px); }
.wm-shadow i { color: var(--line); }
.wm-face { position: relative; color: var(--paper); -webkit-text-stroke: 3px var(--line); paint-order: stroke fill; }

.wm-sub {
  font-family: var(--pixel); font-size: .72rem; letter-spacing: .18em;
  color: var(--ink-3); margin: 1rem 0 1.2rem;
}
.hero-tag { font-size: clamp(1rem, 2.3vw, 1.2rem); color: var(--ink-2); margin: 0 0 1.6rem; }
.hero-tag b { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-bottom: 1rem; }
@media (min-width: 60rem) { .hero-cta { justify-content: flex-start; } }

/* ═════════════════════════ the CRT ═════════════════════════ */
.crt-wrap { display: grid; justify-items: center; }
.crt {
  width: min(100%, 22rem);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(#f6f4ee, #ded8ca);
  border: var(--bw) solid var(--line);
  border-radius: 20px 20px 12px 12px;
  padding: 1rem 1rem .5rem;
  animation: hover 6s ease-in-out infinite;
}
@keyframes hover { 50% { transform: translateY(-7px); } }
.crt-screen {
  background: var(--hot);
  border: var(--bw) solid var(--line);
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  padding: .8rem;
  display: grid; align-content: start; gap: .6rem;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(20,18,26,.35);
}
.crt-screen::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
.crt-title { font-family: var(--pixel); font-size: .72rem; color: #fff; }
.crt-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.crt-frames i {
  aspect-ratio: 16/9; border: 2px solid rgba(255,255,255,.85); border-radius: 3px;
  background: rgba(255,255,255,.18);
  animation: flick 3s steps(1) infinite;
}
.crt-frames i:nth-child(2) { animation-delay: 1s; }
.crt-frames i:nth-child(3) { animation-delay: 2s; }
@keyframes flick { 0%, 32% { background: rgba(255,255,255,.5); } 33%, 100% { background: rgba(255,255,255,.14); } }
.crt-caret { font-family: var(--pixel); font-size: .8rem; color: #fff; margin-top: auto; }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.crt-chin { display: flex; align-items: center; gap: .5rem; font-family: var(--pixel); font-size: .66rem; color: var(--ink-3); padding: .5rem .2rem .1rem; }
.crt-led { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); border: 1.5px solid var(--line); }
.crt-stand { width: 7rem; height: .9rem; background: var(--desk-2); border: var(--bw) solid var(--line); border-top: none; border-radius: 0 0 10px 10px; }

/* ═════════════════════════ ticker ═════════════════════════ */
.ticker-rail {
  overflow: hidden; margin-top: 1.5rem;
  background: var(--line); color: var(--desk);
  border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line);
  padding: .45rem 0;
}
.ticker { display: flex; gap: 1.6rem; width: max-content; font-family: var(--pixel); font-size: .72rem; animation: slide 32s linear infinite; }
.ticker span:nth-child(even) { color: var(--hot); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ═════════════════════════ how / facts / footer ═════════════════════════ */
.how { max-width: 68rem; margin: 0 auto; padding: 4rem 1.1rem 0; text-align: center; }
.steps { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); text-align: left; }
.steps h3 { font-family: var(--display); font-size: 1rem; margin: 0 0 .4rem; font-weight: 400; }
.steps p { color: var(--ink-2); font-size: .89rem; margin: 0; }

.facts { max-width: 68rem; margin: 3rem auto 0; padding: 0 1.1rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); text-align: center; }
.fact b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  color: var(--paper); -webkit-text-stroke: 2.5px var(--line); paint-order: stroke fill;
}
.fact span { font-family: var(--pixel); font-size: .64rem; color: var(--ink-3); }

.foot { max-width: 44rem; margin: 4rem auto 0; padding: 2rem 1.1rem 3rem; text-align: center; color: var(--ink-3); font-size: .84rem; border-top: var(--bw) solid var(--line); }

/* ═════════════════════════ buttons ═════════════════════════ */
.btn {
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  box-shadow: 4px 4px 0 var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem 1.1rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: 8px;
  cursor: pointer; text-decoration: none;
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), background .14s;
}
.btn:not(:disabled):hover { background: var(--desk); }
/* Physical press: the button moves onto its own shadow. */
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 2px 2px 0 var(--line); }
.btn.primary { background: var(--hot); color: #fff; }
.btn.primary:not(:disabled):hover { background: #ff3d70; }
.btn.lg { padding: .82rem 1.4rem; font-size: 1rem; }
.btn.full { width: 100%; margin-top: .6rem; }

.back { background: none; border: none; font: inherit; font-family: var(--pixel); font-size: .72rem; color: var(--ink-3); cursor: pointer; padding: 0 0 .9rem; display: block; }
.back:hover { color: var(--hot); }

/* ═════════════════════════ forms ═════════════════════════ */
.field { display: block; margin-bottom: 1.1rem; }
.lbl { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--pixel); font-size: .7rem; color: var(--ink-2); margin-bottom: .4rem; }
.lbl b { color: var(--hot); }

input[type=text] {
  width: 100%; padding: .72rem .8rem;
  box-shadow: inset 2px 2px 0 rgba(20,18,26,.07);
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: 8px;
  outline: none;
}
input[type=text]::placeholder { color: var(--ink-3); }
input[type=text]:focus { border-color: var(--hot); box-shadow: inset 2px 2px 0 rgba(255,31,90,.12); }
input[type=text]:disabled { background: var(--desk); opacity: .7; }

.code-in { font-family: var(--pixel); font-size: 1.9rem; text-align: center; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; padding: .55rem .4rem; }

input[type=range] { width: 100%; accent-color: var(--hot); cursor: pointer; }
.range-stack { display: grid; gap: .35rem; }

.toggle { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1.2rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .tick {
  flex: none; width: 24px; height: 24px; margin-top: .1rem;
  box-shadow: 3px 3px 0 var(--line);
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: 5px;
  position: relative;
}
.toggle input:checked + .tick { background: var(--lime); }
.toggle input:checked + .tick::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 700; color: var(--line);
}
.toggle input:focus-visible + .tick { outline: 3px solid var(--grape); outline-offset: 2px; }
.toggle-text b { display: block; font-size: .93rem; }
.toggle-text em { font-style: normal; font-size: .8rem; color: var(--ink-3); }

/* ═════════════════════════ banners / toasts ═════════════════════════ */
.banner {
  margin-top: .85rem; padding: .65rem .8rem;
  background: #ffe1e7;
  border: var(--bw) solid var(--bad);
  border-radius: 8px;
  color: #7a0f24; font-size: .88rem; line-height: 1.45;
}
#toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; display: grid; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); }
.toast {
  background: var(--paper);
  box-shadow: var(--shadow);
  border: var(--bw) solid var(--line);
  border-radius: 8px;
  padding: .6rem .85rem; font-size: .87rem; text-align: center;
  animation: snap .2s var(--ease);
}
.toast.bad { background: #ffe1e7; border-color: var(--bad); }
.toast.good { background: #dcfce7; border-color: var(--good); }

/* ═════════════════════════ sad mac ═════════════════════════ */
.sadmac { display: grid; place-items: center; margin: .2rem 0 1rem; }
.sadmac-screen {
  width: 92px; height: 74px;
  box-shadow: var(--shadow);
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: 8px;
  display: grid; place-content: center; gap: .35rem;
  font-family: var(--pixel); font-size: .95rem;
}
.sadmac-screen .mouth { display: block; width: 30px; height: 10px; margin: 0 auto; border: 3px solid var(--line); border-top: none; border-radius: 0 0 30px 30px; transform: rotate(180deg); }

/* ═════════════════════════ lobby ═════════════════════════ */
.lobby-grid { display: grid; gap: 1.1rem; }
@media (min-width: 46rem) { .lobby-grid { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.roomcode {
  font-family: var(--pixel);
  font-size: clamp(2.6rem, 12vw, 4rem);
  letter-spacing: .1em; text-indent: .1em;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--line);
  paint-order: stroke fill;
  margin: .2rem 0 .9rem;
}
.playerlist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.playerlist li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  background: var(--desk);
  border: 2px solid var(--line);
  border-radius: 8px;
  animation: snap .2s var(--ease);
}
.avatar {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: .7rem; color: var(--line);
}
.playerlist .you { font-weight: 700; color: var(--hot); }
.playerlist .tag { margin-left: auto; font-family: var(--pixel); font-size: .6rem; background: var(--amber); border: 2px solid var(--line); border-radius: 4px; padding: 0 .3rem; }

/* ═════════════════════════ play ═════════════════════════ */
.stage { min-height: 100svh; max-width: 78rem; margin: 0 auto; padding: 1.2rem 1rem 1.6rem; display: grid; gap: 1.1rem; align-content: center; }
@media (min-width: 58rem) { .stage { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .85fr); } .stage-side { position: sticky; top: 1rem; display: grid; gap: 1.1rem; align-content: start; } }
@media (max-width: 58rem) { .stage-side { display: grid; gap: 1.1rem; } }

.clock { font-family: var(--pixel); font-variant-numeric: tabular-nums; }
.win-clock { background: var(--lime); }
.clock.low { color: var(--bad); }
.win-clock:has(.low) { background: var(--hot); }
.win-clock:has(.low) .clock { color: #fff; animation: thump .8s ease-in-out infinite; }
@keyframes thump { 50% { transform: scale(1.18); } }

.timerbar { height: 8px; background: var(--desk-2); border-bottom: var(--bw) solid var(--line); overflow: hidden; }
#play-bar { height: 100%; width: 100%; background: repeating-linear-gradient(45deg, var(--hot) 0 6px, #ff5c85 6px 12px); transition: width .25s linear; }

.stills { display: grid; gap: .5rem; padding: .5rem; }
@media (min-width: 58rem) { .stills[data-n="3"] { grid-template-columns: 1fr 1fr; } .stills[data-n="3"] img:first-child { grid-column: 1 / -1; } }
.stills img {
  display: block; width: 100%;
  max-height: 30svh; aspect-ratio: 16/9; object-fit: cover;
  border: 2px solid rgba(255,255,255,.28); border-radius: 4px;
  animation: pop .3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.stills .ghost-frame { aspect-ratio: 16/9; max-height: 30svh; border: 2px dashed rgba(255,255,255,.3); border-radius: 4px; display: grid; place-items: center; font-family: var(--pixel); font-size: .74rem; color: rgba(255,255,255,.6); }

#frm-guess { display: flex; gap: .5rem; }
#frm-guess input { flex: 1; min-width: 0; }
#frm-guess .btn { padding: .7rem .9rem; font-family: var(--pixel); font-size: .8rem; }

.feedback { min-height: 1.3rem; font-size: .88rem; font-weight: 700; margin-bottom: .45rem; }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.feedback.warn { color: #b06a00; }

.chips { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.chips li { font-family: var(--pixel); font-size: .64rem; padding: .18rem .45rem; background: var(--desk); border: 2px solid var(--line); border-radius: 4px; }
.chips li.good { background: #dcfce7; border-color: var(--good); }

/* ═════════════════════════ scores ═════════════════════════ */
.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.scores li { display: flex; align-items: center; gap: .5rem; padding: .38rem .55rem; border: 2px solid var(--line); border-radius: 7px; background: var(--paper); font-size: .9rem; }
.scores .rank { font-family: var(--pixel); font-size: .68rem; width: 1.1rem; color: var(--ink-3); }
.scores .pts { margin-left: auto; font-family: var(--pixel); font-size: .82rem; }
.scores .you { font-weight: 700; color: var(--hot); }
.scores.big li { font-size: 1.02rem; padding: .6rem .7rem; }
.scores.big li:first-child { background: var(--lime); box-shadow: 3px 3px 0 var(--line); }

/* ═════════════════════════ reveal ═════════════════════════ */
.reveal-grid { display: grid; gap: 1.1rem; }
@media (min-width: 52rem) { .reveal-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.poster { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; border-bottom: var(--bw) solid var(--line); animation: pop .35s var(--ease); }
.reveal-strip { display: grid; grid-auto-flow: column; gap: .4rem; padding: .4rem; }
.reveal-strip img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; border: 2px solid rgba(255,255,255,.3); border-radius: 3px; opacity: .8; }

.winner { margin: .7rem 0; padding: .7rem .8rem; background: var(--desk); border: 2px solid var(--line); border-radius: 8px; font-size: .92rem; }
.winner.hit { background: var(--lime); }
.winner b { color: var(--ink); }
.winner.none { color: var(--ink-3); }

.nextwrap { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; padding-top: .9rem; border-top: 2px dashed var(--desk-2); }
.ring { position: relative; width: 44px; height: 44px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--desk-2); }
.ring-fg { stroke: var(--hot); stroke-linecap: butt; stroke-dasharray: 119.4; transition: stroke-dashoffset .25s linear; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: .95rem; }
.nextwrap .hint { margin: 0; }

/* ═════════════════════════ loader ═════════════════════════ */
/* The original ring from the first client (commit d244b62), brought back on request
   and dressed for this theme: the ring is the same 3px black stroke as every border,
   with one magenta arc turning through it. */
.spinner {
  width: 28px; height: 28px;
  margin: .5rem auto 1rem;
  border: var(--bw) solid var(--line);
  border-top-color: var(--hot);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═════════════════════════ motion / a11y ═════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }

/* ═════════════════════════ boot / POST ═════════════════════════ */
/* Once per browser session. Not on every load: charming the first time, an obstacle
   the fifth. Removed from the DOM afterwards rather than hidden, so it can never
   intercept a click or a focus ring. */
.boot {
  position: fixed; inset: 0; z-index: 100;
  background: #05060a;
  color: #b8ffb8;                       /* P1 phosphor */
  font-family: var(--pixel);
  font-size: .8rem; line-height: 1.75;
  padding: clamp(1rem, 5vw, 3rem);
  overflow: hidden;
}
.boot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%);
}
.boot-text { margin: 0; white-space: pre-wrap; text-shadow: 0 0 8px rgba(120,255,120,.45); }
.boot-skip {
  position: absolute; bottom: 1.2rem; right: 1.4rem;
  font-size: .68rem; color: #3f7a3f; margin: 0;
}
.boot.done { animation: crt-off .32s steps(6) forwards; }
/* The classic tube collapse: squash to a line, then a dot, then nothing. */
@keyframes crt-off {
  40%  { transform: scaleY(.06); filter: brightness(3); }
  70%  { transform: scaleY(.06) scaleX(.35); filter: brightness(4); }
  100% { transform: scaleY(.01) scaleX(0);  filter: brightness(6); opacity: 0; }
}

/* ═════════════════════════ desktop icons ═════════════════════════ */
.icons {
  position: absolute; top: 3.2rem; left: 1rem; z-index: 4;
  display: grid; gap: 1.1rem; justify-items: center;
}
@media (max-width: 74rem) { .icons { display: none; } }   /* the CTAs already cover this */
.icon {
  width: 5rem; padding: .35rem;
  background: none; border: 2px solid transparent; border-radius: 6px;
  display: grid; gap: .3rem; justify-items: center;
  cursor: pointer; text-decoration: none; color: inherit;
}
.icon:hover, .icon:focus-visible { border-color: var(--line); background: rgba(255,255,255,.45); }
.icon-label { font-family: var(--pixel); font-size: .6rem; text-align: center; line-height: 1.35; }
.icon-art { width: 38px; height: 38px; border: 2px solid var(--line); border-radius: 3px; position: relative; }
/* Three 1-bit-ish icons drawn in pure CSS — no image requests. */
.floppy { background: var(--bondi); }
.floppy::before { content: ""; position: absolute; top: 3px; left: 9px; width: 16px; height: 12px; background: var(--paper); border: 2px solid var(--line); }
.floppy::after  { content: ""; position: absolute; bottom: 2px; left: 6px; width: 22px; height: 12px; background: var(--paper); border: 2px solid var(--line); border-radius: 1px; }
.net { background: var(--grape); }
.net::before { content: ""; position: absolute; inset: 7px; border: 2px solid var(--paper); border-radius: 50%; }
.net::after  { content: ""; position: absolute; top: 16px; left: 3px; right: 3px; height: 2px; background: var(--paper); }
.folder { background: var(--amber); border-top-width: 8px; }
.folder::before { content: ""; position: absolute; top: -8px; left: 2px; width: 14px; height: 4px; background: var(--line); border-radius: 2px 2px 0 0; }

/* ═════════════════════════ CRT curvature ═════════════════════════ */
/* Corner darkening plus a soft top-left sheen, so the "tube" areas read as glass with
   a curve rather than a flat black rectangle. */
.tube::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 130% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%),
    linear-gradient(150deg, rgba(255,255,255,.10) 0%, transparent 32%);
}
.crt-screen { border-radius: 14px / 18px; }   /* very slightly barrelled */

/* ═════════════════════════ pointer ═════════════════════════ */
/* The 1-bit arrow, as an inline SVG data URI so it costs no request. Hotspot at 0,0.
   A pointer cursor still wins on anything clickable — retro should not cost usability. */
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 12 12'%3E%3Cpath d='M1 0v9l2.2-2.2L5 10.8l1.8-.8-1.8-3.6H8z' fill='%23fff' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 0 0, default;
}
button, a, input[type=range], .icon, label.toggle { cursor: pointer; }
input[type=text] { cursor: text; }