/* =========================================================================
   style.css  —  "Escape from Scratch"  ·  v1.0 noir interrogation-room reskin
   -------------------------------------------------------------------------
   Deep purple-black, glowing-violet Scratch, a monospace interface that reads
   like a typed interrogation transcript + terminal. Serif wordmark only.
   Purely visual / layout — the game engine is untouched.

   Fonts (Google):
     Cinzel        -> the ESCAPE FROM SCRATCH wordmark (engraved, case-file)
     JetBrains Mono-> the whole interface (chat, counters, code, mood, buttons)
   ========================================================================= */

:root {
  --ink:      #0A0910;   /* deep purple-black background            */
  --ink-2:    #07060c;   /* darkest, for vignette floor             */
  --panel:    #16121F;   /* lifted panel, subtle purple tint        */
  --panel-2:  #1d1828;   /* slightly lifted (bubbles, inputs)       */
  --scratch:  #B98CFF;   /* Scratch glow / primary accent           */
  --neon:     #C24DFF;   /* neon magenta, used sparingly            */
  --tungsten: #EFA63C;   /* warm bulb light, hairlines/highlights   */
  --paper:    #E9E2D2;   /* warm off-white text                     */
  --muted:    #8B8398;   /* secondary text                          */

  --good:     #5fd6a3;
  --bad:      #ff6b7d;

  --line:     rgba(185,140,255,.16);  /* purple hairline            */
  --line-warm:rgba(239,166,60,.18);   /* tungsten hairline          */

  --radius:   12px;
  --shadow:   0 18px 50px rgba(0,0,0,.6);

  --f-display: "Cinzel", Georgia, serif;
  --f-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --rail-w:   340px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

/* The document's own background is the darkest theme color so NOTHING white
   can ever show — not behind the iOS keyboard, not behind the autofill bar,
   not anywhere. (html is the layer that peeks out when the keyboard pushes
   the layout, so it must be dark too.) */
html { background-color: var(--ink-2); }

body {
  font-family: var(--f-mono);
  color: var(--paper);
  background-color: var(--ink);   /* solid dark fallback under the gradient */
  background-image:
    radial-gradient(820px 480px at 22% -6%, rgba(185,140,255,.14) 0%, transparent 60%),
    radial-gradient(680px 520px at 92% 6%,  rgba(239,166,60,.10) 0%, transparent 58%),
    linear-gradient(180deg, #0d0b15 0%, var(--ink) 52%, var(--ink-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---- atmosphere overlays (fixed, never block clicks) ------------------- */
.vignette {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(ellipse 88% 78% at 50% 42%, transparent 46%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.85) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 41; pointer-events: none; opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   APP SHELL — fills the screen, two columns on desktop
   ========================================================================= */
.app {
  position: relative; z-index: 2;
  height: 100vh;          /* fallback for older browsers */
  height: 100dvh;         /* dynamic viewport: accounts for the mobile keyboard */
  width: 100%; max-width: 1360px; margin: 0 auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  background-color: var(--ink);
}
/* on a wide monitor the game sits as a centered console; the dark room
   atmosphere fills the space around it instead of stretching thin */
@media (min-width: 1361px) {
  .app {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    box-shadow: 0 0 80px rgba(0,0,0,.6);
  }
}

/* ---- top bar ----------------------------------------------------------- */
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,16,30,.6), transparent);
}
.wordmark {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  letter-spacing: clamp(2px, .7vw, 6px);
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 0 18px rgba(185,140,255,.18), 0 2px 0 rgba(0,0,0,.6);
  line-height: 1;
}
.wordmark .accent {
  color: var(--scratch);
  text-shadow: 0 0 22px rgba(185,140,255,.6), 0 2px 0 rgba(0,0,0,.6);
}
/* left cluster: wordmark + the small master clock sitting right after it */
.topbar-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

/* ---- MASTER CLOCK: small + quiet. This is the SCORE, never a threat. ----
   (Room 2's giant blitz timer is a different element entirely.) */
.master-clock {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--f-mono);
  color: var(--muted);
  opacity: .8;
  user-select: none;
}
.master-clock .mc-label { font-size: .56rem; letter-spacing: 2px; }
.master-clock .mc-time {
  font-size: .82rem; letter-spacing: 1px; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.master-clock.stopped .mc-time { color: var(--good); }
.master-clock .mc-time.penalty { animation: mc-bump .5s ease; color: var(--bad); }
@keyframes mc-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); color: var(--bad); }
  100% { transform: scale(1); }
}

/* ---- AUDIO MENU (governs ALL sound) ------------------------------------ */
.audio-menu { display: flex; align-items: center; gap: 10px; }
.audio-btn {
  font-family: var(--f-mono); font-size: 1rem; line-height: 1;
  width: 34px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--scratch);
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer;
}
.audio-btn:hover { filter: brightness(1.2); }
.audio-btn.muted { color: var(--muted); }
.volume {
  -webkit-appearance: none; appearance: none;
  width: 88px; height: 4px; border-radius: 999px;
  background: rgba(185,140,255,.25); outline: none; cursor: pointer;
}
.volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--scratch); box-shadow: 0 0 8px rgba(185,140,255,.6);
  cursor: pointer;
}
.volume::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%;
  background: var(--scratch); box-shadow: 0 0 8px rgba(185,140,255,.6); cursor: pointer;
}

/* ---- SCREENS: one room visible at a time, master clock runs underneath -- */
.screens {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; flex-direction: column;
}
.screen { flex: 1 1 auto; min-height: 0; }
/* hide every screen that isn't active — !important so it beats .layout's
   own display:grid (same specificity, later in the file) */
.screen:not(.is-active) { display: none !important; }
.screen.is-active { display: flex; flex-direction: column; }
/* Room 1 keeps its two-column grid when active (id beats the flex rule) */
#screen-room1.is-active { display: grid; }

.status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.counter, .mood {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: 1.5px;
  color: var(--muted);
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 6px; white-space: nowrap;
}
.counter.low { color: var(--tungsten); border-color: var(--line-warm); }
.mood { color: var(--scratch); }

/* ---- main layout grid -------------------------------------------------- */
.layout {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: 0;
}

/* =========================================================================
   LEFT RAIL — portrait, grip, door code
   ========================================================================= */
.rail {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px clamp(14px, 1.4vw, 20px) 22px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22,18,31,.55), rgba(10,9,16,.2));
}

/* Scratch portrait — framed like a case-file photo, soft outer glow */
.portrait {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.5),
              0 0 34px rgba(185,140,255,.18);
  transition: box-shadow .5s ease;
}
.portrait img { display: block; width: 100%; height: auto; }
.subject-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: .58rem; letter-spacing: 2px; color: var(--paper);
  background: rgba(0,0,0,.6); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 4px;
}
/* glow shifts with Scratch's vibe (engine toggles these classes) */
.portrait.vibe-smug      { box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 34px rgba(185,140,255,.22); }
.portrait.vibe-warm      { box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 40px rgba(239,166,60,.30); }
.portrait.vibe-defensive { box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 40px rgba(255,107,125,.30); }
/* gentle breathing glow on the suspect */
@media (prefers-reduced-motion: no-preference) {
  .portrait::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 50px rgba(185,140,255,.12);
    animation: breathe 4.5s ease-in-out infinite;
  }
}
@keyframes breathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.quote {
  margin: 0; font-size: .82rem; line-height: 1.5;
  color: var(--muted); font-style: italic;
  border-left: 2px solid var(--line-warm); padding-left: 10px;
}

/* grip (confidence) meter */
.grip { display: flex; flex-direction: column; gap: 6px; }
.grip-label { font-size: .64rem; letter-spacing: 2px; color: var(--muted); }
.grip-track {
  height: 8px; border-radius: 999px;
  background: rgba(0,0,0,.5); border: 1px solid var(--line); overflow: hidden;
}
.grip-fill {
  height: 100%; width: 70%;
  background: linear-gradient(90deg, var(--neon), var(--scratch));
  box-shadow: 0 0 10px rgba(185,140,255,.5);
  transition: width .5s ease;
}

/* ---- DOOR CODE: four recessed, back-lit digit windows ------------------ */
.doorcode { margin-top: 4px; }
.doorcode-label {
  font-size: .68rem; letter-spacing: 3px; color: var(--muted);
  margin-bottom: 10px; text-align: center;
}
.keypad { display: flex; justify-content: center; gap: 10px; }
.slot {
  flex: 1 1 0; max-width: 70px; aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2rem);
  color: #4a4356; border-radius: 9px;
  background: radial-gradient(circle at 50% 35%, #15121b 0%, #0a080e 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.03);
  transition: color .25s ease, box-shadow .35s ease, border-color .35s ease;
}
/* a digit "lights up" violet when it leaks — the signature moment */
.slot.filled {
  color: var(--scratch);
  border-color: rgba(185,140,255,.55);
  text-shadow: 0 0 16px rgba(185,140,255,.7), 0 0 5px rgba(194,77,255,.6);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.8),
    inset 0 0 16px rgba(185,140,255,.28),
    0 0 20px rgba(185,140,255,.3);
}
.slot.snap { animation: snap .42s cubic-bezier(.2,1.4,.4,1); }
@keyframes snap {
  0%   { transform: scale(.55) translateY(-12px) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.16); }
  100% { transform: scale(1); opacity: 1; }
}

/* =========================================================================
   MAIN COLUMN — room, transcript, input dock
   ========================================================================= */
.main-col {
  min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px clamp(14px, 2vw, 26px) 0;
}

/* hero room scene + invisible hidden-object spots overlaid on top.
   overflow stays visible so reveal captions/emoji aren't clipped — the
   framing lives on the image itself. */
.room { position: relative; flex: 0 0 auto; }
.room-img {
  display: block; width: 100%; height: clamp(160px, 34vh, 400px);
  object-fit: cover; object-position: center 38%;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.5); background: #000;
}
/* three rows of four evidence tiles down the rail. Hover (PC) / press &
   hold (phone) a tile to reveal what's inside — most are empty, a few hold
   an object you can use as leverage. */
.spot-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.spot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; cursor: default;
  background: none; border: none;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.spot.lit { cursor: pointer; }
.spot .obj-emoji {
  font-size: 1.7rem; opacity: 0; transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
  filter: drop-shadow(0 0 8px rgba(239,166,60,.5));
}
.spot.revealing .obj-emoji { opacity: 1; transform: scale(1.15); }
/* reveal caption — a small evidence tag */
.spot .caption {
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .5px;
  background: #120f1a; color: var(--tungsten);
  border: 1px solid var(--line-warm);
  padding: 4px 9px; border-radius: 5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 6; box-shadow: 0 6px 16px rgba(0,0,0,.6);
}
.spot.revealing .caption { opacity: 1; transform: translateX(-50%) translateY(0); }
.sparkle {
  position: absolute; top: 0; right: 4px;
  color: var(--tungsten); font-size: 1rem;
  animation: pop .7s ease forwards; pointer-events: none;
}
@keyframes pop {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  40%  { transform: scale(1.4) rotate(40deg); opacity: 1; }
  100% { transform: scale(.6) rotate(90deg) translateY(-10px); opacity: 0; }
}

/* ---- chat transcript --------------------------------------------------- */
.chat-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 2px;
}
.bubble {
  max-width: 86%; padding: 9px 13px; border-radius: 12px;
  line-height: 1.5; font-size: .9rem; animation: rise .25s ease;
}
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }
.bubble p { margin: 0; }
.from-scratch {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid rgba(185,140,255,.24);
  border-bottom-left-radius: 4px;
}
.from-player {
  align-self: flex-end;
  background: rgba(239,166,60,.10);
  border: 1px solid var(--line-warm);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.speaker {
  display: block; font-size: .64rem; letter-spacing: 1.5px;
  color: var(--scratch); margin-bottom: 3px; text-transform: uppercase;
}
.typing .dot {
  display: inline-block; width: 7px; height: 7px; margin: 0 2px;
  background: var(--muted); border-radius: 50%;
  animation: blink 1.2s infinite both;
}
.typing .dot:nth-child(2) { animation-delay: .2s; }
.typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.2;} 40%{opacity:1;} }

/* ---- starter buttons (first turn only) --------------------------------- */
.starters {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px;
  transition: opacity .25s ease, max-height .3s ease;
  overflow: hidden; max-height: 120px;
}
.starters.gone { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
.starters button {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .5px;
  background: rgba(0,0,0,.3); color: var(--paper);
  border: 1px solid rgba(185,140,255,.3);
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
}
.starters button:hover { background: rgba(185,140,255,.16); }

/* ---- input dock: pinned to the bottom of the column -------------------- */
.dock {
  flex: 0 0 auto;
  padding: 12px 0 16px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(10,9,16,.5));
}
.composer { display: flex; gap: 8px; }
#chat-input {
  flex: 1; padding: 12px 13px; border-radius: 10px; font-size: 1rem;
  font-family: var(--f-mono);
  background: rgba(0,0,0,.42); color: var(--paper);
  border: 1px solid var(--line);
}
#chat-input::placeholder { color: var(--muted); }
#chat-input:focus { outline: none; border-color: var(--scratch); }

.btn {
  font-family: var(--f-mono); letter-spacing: 1px; font-weight: 500;
  border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--paper);
  padding: 12px 16px; border-radius: 10px; cursor: pointer; font-size: .82rem;
  text-transform: uppercase;
}
.btn:hover { filter: brightness(1.18); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(135deg, var(--neon), var(--scratch));
  border-color: transparent; color: #150f22; font-weight: 700;
  box-shadow: 0 0 16px rgba(185,140,255,.35);
}

.guess-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.guess-label { font-size: .68rem; letter-spacing: 2px; color: var(--muted); }
#guess-input {
  width: 100px; text-align: center; letter-spacing: 6px;
  padding: 10px; border-radius: 9px; font-size: 1.1rem; font-weight: 700;
  font-family: var(--f-mono);
  background: rgba(0,0,0,.45); color: var(--scratch); border: 1px solid var(--line);
}
#guess-input::placeholder { color: #3a3346; letter-spacing: 4px; }
#guess-input:focus { outline: none; border-color: var(--scratch); }
.shake { animation: shake .4s ease; border-color: var(--bad) !important; }
@keyframes shake {
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);}
}

/* ---- visible keyboard focus (quality floor) ---------------------------- */
#chat-input:focus-visible, #guess-input:focus-visible,
.btn:focus-visible, .starters button:focus-visible, .spot:focus-visible {
  outline: 2px solid var(--scratch); outline-offset: 2px;
}

/* =========================================================================
   ATLAS HANDOFF SCREEN (between Room 1 and Room 2)
   Atlas is the heavy, orange-eyed robot — so his accents lean tungsten/amber.
   ========================================================================= */
.handoff-screen.is-active {
  align-items: center; justify-content: center;
  padding: clamp(20px, 5vh, 60px) 20px;
  overflow-y: auto;
}
.handoff-inner {
  max-width: 540px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  animation: rise .4s ease;
}
/* the Atlas art is one big clickable START button (START is drawn into it) */
.atlas-start-btn {
  position: relative; margin: 0; padding: 0; cursor: pointer;
  width: clamp(280px, 86vw, 580px); aspect-ratio: 3 / 2;
  border: 1px solid var(--line-warm); border-radius: var(--radius);
  overflow: hidden; background: #0b0a10;
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 50px rgba(239,166,60,.28);
  transition: transform .12s ease, box-shadow .3s ease, filter .15s ease;
}
.atlas-start-btn:hover { transform: translateY(-3px) scale(1.01); filter: brightness(1.08); box-shadow: 0 22px 54px rgba(0,0,0,.6), 0 0 70px rgba(120,230,120,.35); }
.atlas-start-btn:active { transform: scale(.99); }
.atlas-start-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-start-btn .atlas-fallback {
  display: none; flex-direction: column; gap: 12px;
  position: absolute; inset: 0; align-items: center; justify-content: center;
  font-size: 4rem; color: var(--tungsten); filter: drop-shadow(0 0 24px rgba(239,166,60,.6));
}
.atlas-start-btn .atlas-fallback b { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: 6px; color: #7CFF7C; }
.atlas-start-btn.no-img .atlas-fallback { display: flex; }
/* a soft pulse to say "press me" */
@media (prefers-reduced-motion: no-preference) {
  .atlas-start-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius);
    box-shadow: inset 0 0 60px rgba(120,230,120,.16);
    animation: breathe 2.4s ease-in-out infinite;
  }
}
.atlas-line {
  margin: 0; min-height: 2.6em;
  font-family: var(--f-mono); font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  line-height: 1.5; color: var(--paper);
  text-shadow: 0 0 18px rgba(239,166,60,.25);
}
.handoff-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.handoff-hint { margin: 0; font-size: .76rem; color: var(--muted); letter-spacing: .5px; }

/* =========================================================================
   ROOM 2 — THE TIMER ROOM (CRT mechanical terminal)
   Same purple-on-black palette as Room 1; the dread here is the timer, so the
   room is character-free. The giant blitz timer is the THREAT; the small top-
   bar master clock is the SCORE. They must look clearly different.
   ========================================================================= */
.room2-screen.is-active {
  overflow-y: auto;
  /* Atlas watches while the countdown runs (dimmed so the UI stays readable) */
  background: linear-gradient(rgba(8,7,14,.84), rgba(8,7,14,.90)),
    url("../pics/atlas-countdown.png") center top / cover no-repeat;
}
.room2-wrap {
  position: relative;
  max-width: 720px; width: 100%; margin: 0 auto;
  padding: clamp(14px, 3vh, 30px) clamp(14px, 3vw, 26px) 40px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 24px);
  transition: filter .4s ease, background .6s ease;
}
/* permanent damage #3 — a ceiling light dies for good: the room dims */
.room2-wrap.dmg-dark { filter: brightness(.74) saturate(.85); }

/* full-screen red flash on a wrong answer (blocks input ~300ms via JS) */
.room2-flash {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,40,70,.0), rgba(255,30,60,.0));
  opacity: 0; transition: opacity .12s ease;
}
.room2-flash.on { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,50,80,.28), rgba(180,0,30,.5)); }

/* ---- the steel door: deadbolts + the 5-digit code + damage ------------- */
.room2-door {
  position: relative; width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px 22px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #1a1622 0%, #0c0a12 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 14px 34px rgba(0,0,0,.5);
  overflow: hidden;
}
.room2-door.shudder { animation: r2-shudder .3s ease; }
@keyframes r2-shudder { 0%,100%{transform:translateX(0);} 30%{transform:translateX(-3px);} 60%{transform:translateX(3px);} }
.room2-door.open { border-color: rgba(95,214,163,.5); box-shadow: inset 0 0 60px rgba(95,214,163,.18), 0 0 50px rgba(95,214,163,.25); }

/* five deadbolts in a row */
.room2-bolts { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 18px); margin-bottom: 16px; }
.r2-bolt {
  width: clamp(34px, 9vw, 52px); height: clamp(20px, 5vw, 28px);
  border-radius: 6px; position: relative;
  background: linear-gradient(180deg, #3a3346, #18141f);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.6);
  transition: background .3s ease, box-shadow .4s ease;
}
.r2-bolt-knob {
  position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
  width: 60%; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #6b6480, #423b52);
  transition: left .35s cubic-bezier(.2,1.3,.4,1), background .3s ease;
}
.r2-bolt.open { background: linear-gradient(180deg, #2a2440, #161023); box-shadow: inset 0 0 12px rgba(185,140,255,.35), 0 0 14px rgba(185,140,255,.3); }
.r2-bolt.open .r2-bolt-knob { left: 34%; background: linear-gradient(90deg, var(--scratch), var(--neon)); box-shadow: 0 0 10px rgba(185,140,255,.7); }

/* the 5-digit code building up (echoes Room 1's keypad) */
.room2-code { display: flex; justify-content: center; gap: 8px; }
.r2-slot {
  width: clamp(30px, 8vw, 46px); aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: #4a4356; border-radius: 8px; border: 1px solid #000;
  background: radial-gradient(circle at 50% 35%, #15121b, #0a080e);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9);
  transition: color .25s ease, box-shadow .35s ease, border-color .35s ease;
}
.r2-slot.filled {
  color: var(--scratch); border-color: rgba(185,140,255,.55);
  text-shadow: 0 0 16px rgba(185,140,255,.7);
  box-shadow: inset 0 0 16px rgba(185,140,255,.28), 0 0 18px rgba(185,140,255,.3);
}
.r2-slot.snap { animation: snap .42s cubic-bezier(.2,1.4,.4,1); }

/* damage overlays inside the door */
.r2-damage { position: absolute; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.r2-crack {
  top: 0; left: 18%; width: 60%; height: 70px;
  background:
    linear-gradient(115deg, transparent 48%, rgba(0,0,0,.7) 49% 50%, transparent 51%),
    linear-gradient(75deg, transparent 60%, rgba(0,0,0,.6) 61% 62%, transparent 63%);
}
.room2-wrap.dmg-crack .r2-crack { opacity: 1; }
.r2-drip { top: 0; right: 16%; width: 4px; height: 100%; }
.r2-drip span {
  position: absolute; top: 0; left: 0; width: 4px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(140,170,255,.7), rgba(140,170,255,0));
  animation: r2-drip 1.8s linear infinite;
}
.room2-wrap.dmg-drip .r2-drip { opacity: 1; }
@keyframes r2-drip { 0% { top: -12px; } 100% { top: 100%; } }
.r2-deadlight {
  position: absolute; top: 8px; right: 10px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tungsten); box-shadow: 0 0 12px var(--tungsten); opacity: .8;
}
.room2-wrap.dmg-dark .r2-deadlight { background: #2a2630; box-shadow: none; opacity: .5; }
.r2-camera {
  position: absolute; top: 8px; left: 10px; color: var(--muted); font-size: 1rem; opacity: .5;
  transition: color .2s ease, transform .2s ease;
}
.r2-camera.look { color: var(--bad); transform: scale(1.3); animation: r2-cam .6s ease; }
@keyframes r2-cam { 0%{transform:rotate(-20deg) scale(1);} 50%{transform:rotate(8deg) scale(1.35);} 100%{transform:rotate(0) scale(1.1);} }

/* ---- the GIANT blitz timer (the threat) ------------------------------- */
.blitz {
  text-align: center; line-height: 1; user-select: none;
  opacity: .55; transition: opacity .4s ease, transform .3s ease;
}
.blitz.live { opacity: 1; }
.blitz.slam { animation: r2-slam .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes r2-slam { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1); opacity:1;} }
.blitz-time {
  font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(4.5rem, 17vw, 9rem);    /* ~10x the small master clock */
  color: var(--scratch);
  text-shadow: 0 0 30px rgba(185,140,255,.4);
  font-variant-numeric: tabular-nums;
}
.blitz-time.low { color: var(--bad); text-shadow: 0 0 34px rgba(255,80,110,.6); }
.blitz-time.hit { animation: r2-hit .3s ease; }
@keyframes r2-hit { 0%{transform:scale(1);} 40%{transform:scale(1.18); color:var(--bad);} 100%{transform:scale(1);} }
.blitz.panic .blitz-time { animation: r2-pulse 1s ease-in-out infinite; }
@keyframes r2-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }
.blitz-sub { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.blitz-hint { font-family: var(--f-mono); font-size: .8rem; letter-spacing: 2px; color: var(--muted); }
.blitz-progress { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 3px; color: var(--tungsten); }

/* ---- the terminal: category picker OR a question ---------------------- */
.room2-terminal {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, rgba(185,140,255,.03) 0 2px, transparent 2px 4px),
    rgba(10,9,16,.55);
  padding: 18px 16px; min-height: 150px;
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.r2-pick-label, .r2-question {
  font-family: var(--f-mono); text-align: center; color: var(--paper);
}
.r2-pick-label { font-size: .92rem; letter-spacing: 1px; color: var(--muted); }
.r2-question {
  font-size: clamp(1rem, 3vw, 1.25rem); line-height: 1.4; min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r2-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.r2-cat-btn {
  font-family: var(--f-mono); font-size: 1rem; letter-spacing: .5px;
  padding: 22px 14px; border-radius: 10px; cursor: pointer; color: var(--paper);
  background: linear-gradient(180deg, rgba(185,140,255,.10), rgba(0,0,0,.3));
  border: 1px solid rgba(185,140,255,.3);
  transition: filter .15s ease, transform .1s ease;
}
.r2-cat-btn:hover { filter: brightness(1.25); }
.r2-cat-btn:active { transform: scale(.97); }
.r2-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r2-options.three { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; width: 100%; }
.r2-opt {
  font-family: var(--f-mono); font-size: .92rem;
  padding: 14px 12px; border-radius: 9px; cursor: pointer; color: var(--paper);
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
  transition: filter .15s ease, transform .1s ease, border-color .15s ease;
}
.r2-opt:hover { filter: brightness(1.25); border-color: var(--scratch); }
.r2-opt:active { transform: scale(.97); }
.r2-opt.wrong { border-color: var(--bad); background: rgba(255,60,90,.18); }

/* cold judgment line — never "Incorrect" */
.room2-judge { min-height: 1.4em; margin: 0; font-family: var(--f-mono); color: var(--muted); letter-spacing: 1px; font-size: .9rem; opacity: 0; }
.room2-judge.show { opacity: 1; animation: r2-judge .4s ease; }
@keyframes r2-judge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* timeout + done panels */
.r2-timeout, .r2-done { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.r2-timeout-head { font-family: var(--f-display); font-size: 2rem; letter-spacing: 4px; color: var(--bad); }
.r2-timeout p { margin: 0; color: var(--muted); }
.r2-done-head { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: 3px; color: var(--good); }

@media (prefers-reduced-motion: reduce) {
  .blitz.slam, .blitz-time.hit, .blitz.panic .blitz-time, .room2-door.shudder, .r2-camera.look { animation: none; }
}

/* =========================================================================
   ROOM 3 — VANGUARD (the finale)
   Same noir palette; Vanguard is the cold blue-visored antagonist, so his
   accents lean cold blue against the purple room.
   ========================================================================= */
.room3-screen { --vblue: #6aa8ff; }
.room3-screen.is-active {
  overflow-y: auto;
  /* Vanguard's interrogation room behind the evidence UI (dimmed for reading) */
  background: linear-gradient(rgba(7,8,16,.86), rgba(7,8,16,.92)),
    url("../pics/vanguard.png") center top / cover no-repeat;
}
.r3-wrap {
  position: relative;
  max-width: 860px; width: 100%; margin: 0 auto;
  padding: clamp(12px, 2.4vh, 24px) clamp(12px, 2.6vw, 24px) 40px;
  display: flex; flex-direction: column; gap: clamp(12px, 2vh, 18px);
  transition: background .8s ease, filter .4s ease;
}
/* first wrong answer corrupts the room: slate -> dim bruised red, for good */
.r3-wrap.corrupted {
  background: radial-gradient(120% 80% at 50% 0%, rgba(80,10,25,.35), transparent 60%);
}
.r3-wrap.jolt { animation: r3-jolt .4s ease; }
@keyframes r3-jolt { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-4px,2px);} 50%{transform:translate(3px,-2px);} 75%{transform:translate(-2px,1px);} }
.r3-wrap.flicker { animation: r3-flick .45s steps(2) 2; }
@keyframes r3-flick { 0%,100%{filter:none;} 50%{filter:brightness(.6);} }

/* brownout: slow uneasy power flicker; evidence stays readable. Dim-and-
   recover only (never a sharp strobe) — photosensitivity safe. */
.r3-brownout { position: absolute; inset: 0; pointer-events: none; background: #000; opacity: 0; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .r3-wrap:not(.reduced) .r3-brownout { animation: r3-brown 7s ease-in-out infinite; }
}
@keyframes r3-brown { 0%,93%,100%{opacity:0;} 95%{opacity:.18;} 96%{opacity:.05;} 97%{opacity:.16;} 98%{opacity:0;} }

/* ---- Vanguard panel --------------------------------------------------- */
.r3-vanguard { display: flex; gap: 14px; align-items: center; }
.r3-portrait {
  position: relative; margin: 0; flex: 0 0 auto;
  width: clamp(64px, 16vw, 96px); aspect-ratio: 1/1;
  border: 1px solid rgba(106,168,255,.4); border-radius: 10px; overflow: hidden;
  background: #0a0c14; box-shadow: 0 0 26px rgba(106,168,255,.28);
}
.r3-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r3-portrait .r3-fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 2.6rem; filter: drop-shadow(0 0 14px rgba(106,168,255,.7)); }
.r3-portrait.no-img .r3-fallback { display: flex; }
.r3-vpanel { flex: 1 1 auto; min-width: 0; }
.r3-vname { font-family: var(--f-display); letter-spacing: 4px; color: var(--vblue); font-size: 1rem; }
.r3-status { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.r3-status li { font-family: var(--f-mono); font-size: .64rem; letter-spacing: 1px; color: var(--muted); transition: opacity .5s ease; }
.r3-status li.gone { opacity: .18; text-decoration: line-through; color: var(--bad); }

/* Vanguard's live line */
.r3-speech {
  margin: 0; min-height: 2.6em;
  font-family: var(--f-mono); font-size: clamp(.95rem, 2.6vw, 1.15rem); line-height: 1.5;
  color: var(--paper); border-left: 2px solid var(--vblue); padding-left: 12px;
  text-shadow: 0 0 16px rgba(106,168,255,.18);
  white-space: pre-line;   /* lets the opening monologue show as multiple lines */
}

/* ---- the board: keypad behind, a 6-panel cover, the evidence on top ---- */
.r3-board { position: relative; display: flex; flex-direction: column; }
.r3-keypad { display: flex; justify-content: center; gap: clamp(6px, 1.6vw, 12px); height: 84px; align-items: center; }
.r3-kslot {
  width: clamp(34px, 9vw, 52px); aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.2rem, 4.5vw, 1.8rem);
  color: #3f4a63; border-radius: 8px; border: 1px solid #000;
  background: radial-gradient(circle at 50% 35%, #121622, #08090e);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9);
}
.r3-kslot.filled { color: var(--vblue); border-color: rgba(106,168,255,.6); text-shadow: 0 0 16px rgba(106,168,255,.7); box-shadow: inset 0 0 16px rgba(106,168,255,.3), 0 0 18px rgba(106,168,255,.3); }
.r3-kslot.snap { animation: snap .42s cubic-bezier(.2,1.4,.4,1); }

/* the cover: 6 steel panels sitting OVER the keypad; each falls on a solve */
.r3-cover { position: absolute; top: 0; left: 0; right: 0; height: 84px; display: flex; gap: clamp(6px,1.6vw,12px); justify-content: center; z-index: 2; }
.r3-panel {
  width: clamp(34px, 9vw, 52px); border-radius: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #221c2e, #100c19);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 8px rgba(0,0,0,.6);
  transition: transform .6s cubic-bezier(.4,1.4,.5,1), opacity .6s ease;
}
.r3-panel.fallen { transform: translateY(160%) rotate(12deg); opacity: 0; }
.r3-board.collapsed .r3-panel { transform: translateY(200%) rotate(20deg); opacity: 0; }
.r3-board.collapsed .r3-pieces { opacity: .12; pointer-events: none; }

/* the evidence pieces (the conspiracy wall) */
.r3-pieces {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  transition: opacity .6s ease;
}
.r3-piece {
  position: relative; overflow: hidden;
  width: clamp(120px, 30%, 180px); min-height: 78px;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 12px; cursor: pointer;
  background: linear-gradient(180deg, #1a1626, #120e1c);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
  transition: transform .12s ease, border-color .2s ease, box-shadow .3s ease;
}
.r3-piece:hover { transform: translateY(-2px); border-color: var(--vblue); }
.r3-piece.rule { border-color: var(--line-warm); background: linear-gradient(180deg, #1d1722, #141019); }
.r3-piece-kind { font-family: var(--f-mono); font-size: .56rem; letter-spacing: 2px; color: var(--muted); }
.r3-piece.rule .r3-piece-kind { color: var(--tungsten); }
.r3-piece-label { font-family: var(--f-mono); font-size: .82rem; color: var(--paper); line-height: 1.3; }
/* a tiny spotlight when Vanguard references the piece */
.r3-piece.spoken { border-color: var(--vblue); box-shadow: 0 0 0 1px var(--vblue), 0 0 26px rgba(106,168,255,.5); }
/* scanner sweep when you inspect a piece */
.r3-sweep { position: absolute; left: 0; right: 0; top: -20%; height: 30%; background: linear-gradient(180deg, transparent, rgba(239,166,60,.35), transparent); animation: r3-sweep .65s ease forwards; pointer-events: none; }
@keyframes r3-sweep { from { top: -30%; } to { top: 120%; } }
/* wrongly accused piece: cold stamp, disabled */
.r3-piece.verified-true { opacity: .55; cursor: default; }
.r3-piece.verified-true::after {
  content: "VERIFIED TRUE"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: 2px; color: var(--good);
  background: rgba(8,12,8,.55); border: 2px solid rgba(95,214,163,.5); transform: rotate(-8deg); border-radius: 6px;
}
.r3-string-snap { position: absolute; top: 30%; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--bad), transparent); animation: r3-snap .55s ease forwards; pointer-events: none; }
@keyframes r3-snap { 0%{transform:scaleX(1);opacity:1;} 60%{transform:scaleX(1.04) translateY(6px) rotate(1deg);} 100%{transform:scaleX(.2) translateY(40px);opacity:0;} }

/* ---- suspects (greyed until Type C) ----------------------------------- */
.r3-suspect-wrap { display: flex; flex-direction: column; gap: 8px; }
.r3-suspect-label { font-family: var(--f-mono); font-size: .66rem; letter-spacing: 2px; color: var(--muted); text-align: center; }
.r3-suspect-label.live { color: var(--vblue); }
.r3-suspects { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.r3-suspect {
  font-family: var(--f-mono); font-size: .86rem; color: var(--paper);
  padding: 12px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.3); border: 1px solid rgba(106,168,255,.35);
  transition: filter .15s ease, transform .1s ease, opacity .4s ease;
}
.r3-suspect:hover:not(:disabled) { filter: brightness(1.3); }
.r3-suspect:disabled { opacity: .32; cursor: not-allowed; border-color: var(--line); }
.r3-suspect.vanished { opacity: 0; transform: scale(.8); }
.r3-suspect.cleared { opacity: .3; text-decoration: line-through; }

/* ---- HUD -------------------------------------------------------------- */
.r3-hud { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.r3-strikes { display: flex; gap: 6px; }
.r3-pip { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.4); }
.r3-pip.hit { background: var(--bad); border-color: var(--bad); box-shadow: 0 0 10px rgba(255,107,125,.6); }
.r3-progress { font-family: var(--f-mono); font-size: .72rem; letter-spacing: 2px; color: var(--vblue); }
.r3-motion {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: 1px; color: var(--muted);
  background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer;
}

/* ---- the clipboard overlay -------------------------------------------- */
.r3-overlay {
  position: fixed; inset: 0; z-index: 55; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5,6,12,.78);
}
.r3-overlay.show { display: flex; animation: fade .2s ease; }
.r3-clip {
  position: relative; max-width: 460px; width: 100%;
  background: linear-gradient(180deg, #f4efe2, #e7dfcc);
  color: #20242e; border-radius: 12px; padding: 26px 24px 22px;
  box-shadow: var(--shadow); animation: rise .25s ease;
  border-top: 14px solid #3a3346;
}
.r3-clip-kind { font-family: var(--f-mono); font-size: .62rem; letter-spacing: 3px; color: #6b6478; }
.r3-clip-title { font-family: var(--f-mono); font-size: 1rem; letter-spacing: 1px; margin: 6px 0 12px; color: #16131f; }
.r3-clip-body { font-family: var(--f-mono); font-size: 1.05rem; line-height: 1.6; margin: 0 0 16px; color: #20242e; }
.r3-clip-note { font-family: var(--f-mono); font-size: .82rem; color: #6b6478; font-style: italic; margin: 0 0 12px; }
.r3-clip-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.r3-accuse.flash { animation: r3-accuse-flash 1s ease 2; }
@keyframes r3-accuse-flash { 0%,100%{box-shadow:0 0 16px rgba(185,140,255,.35);} 50%{box-shadow:0 0 26px rgba(185,140,255,.9);} }
.r3-verified { font-family: var(--f-mono); color: var(--good); border: 2px solid rgba(95,214,163,.5); display: inline-block; padding: 4px 10px; border-radius: 6px; transform: rotate(-4deg); margin-bottom: 12px; letter-spacing: 2px; }

@media (prefers-reduced-motion: reduce) {
  .r3-wrap .r3-brownout, .r3-wrap.jolt, .r3-wrap.flicker, .r3-piece.spoken, .r3-sweep, .r3-string-snap { animation: none !important; }
}
/* mobile: the wall becomes a tidy horizontal thumbnail strip */
@media (max-width: 560px) {
  .r3-pieces { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .r3-piece { flex: 0 0 60%; width: 60%; }
}

/* =========================================================================
   END SCREEN — a case-file dossier
   ========================================================================= */
.endscreen {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6,5,9,.82);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.endscreen.show { display: flex; animation: fade .25s ease; }
@keyframes fade { from {opacity:0;} to {opacity:1;} }
.end-card {
  position: relative;
  background: linear-gradient(180deg, #1a1626 0%, #110d18 100%);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 34px 26px 26px;
  max-width: 460px; width: 100%; text-align: center;
  box-shadow: var(--shadow); animation: rise .3s ease;
}
.end-card::before {
  content: "CASE FILE · NO. 0447";
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: 3px;
  color: var(--muted); border: 1px solid var(--line);
  padding: 3px 12px; border-radius: 4px; background: rgba(0,0,0,.3);
}
.end-card.win  { border-color: rgba(95,214,163,.4); }
.end-card.win::before  { content: "CASE FILE · CLOSED"; color: var(--good); border-color: rgba(95,214,163,.4); }
.end-card.lose { border-color: rgba(255,107,125,.35); }
.end-card.lose::before { content: "CASE FILE · UNSOLVED"; color: var(--bad); border-color: rgba(255,107,125,.35); }

.end-emoji { font-size: 3rem; margin-top: 16px; }
.end-card h2 {
  font-family: var(--f-display); font-weight: 700;
  margin: 6px 0 2px; letter-spacing: 1px; color: var(--paper);
}
.run-title { font-family: var(--f-mono); color: var(--scratch); margin: 6px 0 14px; font-size: .9rem; }
.end-line { color: var(--muted); font-size: .88rem; margin: 8px 0; line-height: 1.5; }
.code-reveal { margin: 12px 0; font-size: 1rem; color: var(--paper); }
.code-reveal b { font-family: var(--f-mono); color: var(--good); letter-spacing: 5px; font-size: 1.4rem; }
.end-actions { display: flex; gap: 10px; justify-content: center; margin: 18px 0 6px; flex-wrap: wrap; }
.taco {
  display: inline-block; margin-top: 10px; font-family: var(--f-mono); font-size: .82rem;
  color: var(--tungsten); text-decoration: none;
  border: 1px solid var(--line-warm); padding: 9px 14px; border-radius: 999px;
}
.taco:hover { background: rgba(239,166,60,.12); }
.cta { margin-top: 16px; font-size: .76rem; color: var(--muted); }
.cta a { color: var(--scratch); }

/* ---- leaderboard on the end card -------------------------------------- */
.lb {
  margin: 18px 0 6px; text-align: left;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.lb-title {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: 3px;
  color: var(--tungsten); text-align: center; margin-bottom: 10px;
}
.lb-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.lb-empty, .lb-note { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); text-align: center; margin: 8px 0 0; }
.lb-row {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .84rem;
  padding: 6px 10px; border-radius: 7px; background: rgba(0,0,0,.25);
}
.lb-row.me { background: rgba(185,140,255,.16); border: 1px solid rgba(185,140,255,.5); }
.lb-rank { color: var(--muted); text-align: right; }
.lb-name { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-time { color: var(--good); font-weight: 700; letter-spacing: 1px; }
.lb-submit { display: flex; gap: 8px; margin-top: 12px; }
#lb-name {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 9px; font-size: .95rem;
  font-family: var(--f-mono); background: rgba(0,0,0,.42); color: var(--paper); border: 1px solid var(--line);
}
#lb-name:focus { outline: none; border-color: var(--scratch); }
.lb-submit .btn { white-space: nowrap; }

/* ---- toast ------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  font-family: var(--f-mono);
  background: #1b1626; color: var(--paper);
  border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 999px;
  opacity: 0; transition: all .25s ease; z-index: 70; font-size: .82rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
   RESPONSIVE — one system, three breakpoints
   ========================================================================= */

/* TABLET & PHONE: single column, natural page scroll, sticky input dock */
@media (max-width: 1023px) {
  .app { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .layout { grid-template-columns: 1fr; }

  /* rail stacks vertically: photo · tiles · grip · tiles · door code · tiles */
  .rail {
    overflow: visible;
    border-right: none; border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px;
  }
  .portrait { max-width: 240px; align-self: center; }
  .doorcode { margin-top: 0; }

  .main-col { padding-bottom: 0; }
  .chat-log { min-height: 38vh; }

  /* keep the input reachable and on-screen while typing */
  .dock {
    position: sticky; bottom: 0; z-index: 30;
    padding: 12px clamp(14px, 2vw, 26px) calc(14px + env(safe-area-inset-bottom));
    margin: 0 calc(-1 * clamp(14px, 2vw, 26px));
    background: linear-gradient(180deg, rgba(10,9,16,.4), var(--ink) 40%);
    backdrop-filter: blur(6px);
  }
}

/* PHONE: tighter, portrait shrinks, room becomes a short banner */
@media (max-width: 560px) {
  .topbar { padding: 12px 14px; gap: 8px; }
  .status { gap: 6px; }
  .counter, .mood { font-size: .66rem; padding: 5px 9px; }
  .rail { gap: 10px; padding: 14px; }
  .portrait { max-width: 200px; }
  .quote { font-size: .74rem; }
  .room-img { height: clamp(120px, 20vh, 170px); }
  .slot { max-width: 58px; }
}