/* CONMICS — Evidence Room (prototype)
 *
 * No external fonts, no CDN, no url() off this folder: the real site runs under a strict CSP
 * and a prototype that ignores that is a prototype that lies about what will ship.
 *
 * THE ROOM IS DRAWN, NOT PAINTED. There is no evidence-room art yet, so every surface here is
 * a gradient or a border. That is on purpose: each piece is a named layer a painted asset can
 * replace one at a time, and no layout depends on a bitmap nobody has drawn.
 */

:root {
  --room:      #0a0a0c;
  --wall:      #16151b;
  --wall-2:    #1d1c23;

  --metal:     #454b52;
  --metal-dk:  #2b2f35;
  --metal-lt:  #626a74;
  --metal-in:  #101114;   /* the dark inside a locker */

  --brass:     #c9a227;
  --tape:      #e3c04c;
  --red:       #b0392f;
  --warm:      #ffd88f;

  --money:     #85bb65;   /* US banknote green */
  --money-dim: #5c8248;

  --fg:        #e9e7e2;
  --fg-2:      #9b9aa1;
  --fg-3:      #6a6971;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--room);
  color: var(--fg);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tape); color: #111; padding: 10px 14px; z-index: 99;
}
.skip:focus { left: 8px; top: 8px; }

/* ══ THE PAINTED EVIDENCE ROOM ══════════════════════════════════════════════════════════════
   The room is artwork, not shapes. The one job of this stylesheet is to put the painting on
   screen at its own proportions and let everything else ride on top of it in percentages. */

body.in-room {
  margin: 0;
  background: #0a0908;
  min-height: 100vh;
  overflow: hidden;          /* the room is the whole page; nothing scrolls behind it */
}

/* Fills the window. The art is never cropped by it — see .stage-wrap::before. */
.stage-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ⚠️ THE BLEED IS WHY THE PAGE IS FULL WITHOUT ANYTHING BEING CUT OFF.
   Scaling the room to COVER the window fills it, but it also crops the sides — and on a
   near-square window that meant 324px off each edge, which is exactly where both rats live. They
   were simply gone. Scaling it to FIT keeps every sprite on screen but leaves bars.
   So the room is fitted, whole, and a second copy of the same art is blown up behind it, blurred
   and darkened, to fill whatever is left. The page is full, nothing is cropped, and the bars
   read as the room going out of focus rather than as empty space. */
.stage-wrap::before {
  content: "";
  position: absolute;
  inset: -6%;                       /* overscan, so the blur has no soft edge at the border */
  background: #0a0908 url("/room/background.webp") center / cover no-repeat;
  filter: blur(46px) brightness(.42) saturate(.8);
  transform: scale(1.06);
  pointer-events: none;
}

/* ⚠️ THE STAGE OWNS THE ASPECT RATIO, AND EVERYTHING INSIDE IS A PERCENTAGE OF IT.
   The art is 3840x2160. Fixing that ratio on one element means a sprite at "8.83% across" lands
   on the same shelf at 400px wide and at 4000px wide, with nothing to re-tune and no media
   queries. Break this and every sprite drifts off its own shadow. */
/* ⚠️ THE STAGE KEEPS THE ART'S RATIO AND IS GROWN UNTIL IT COVERS — IT IS NEVER STRETCHED.
   Everything on it is placed as a percentage of the 3840x2160 artboard, so the instant the box
   stops being 16:9 every sprite slides off its own shelf. Instead the stage is widened to
   whichever is larger, the window's width or the width that makes it as tall as the window, and
   centred; the overflow is cropped by .stage-wrap. The room fills the page and the rat stays on
   its plank. */
/* ⚠️ FULL WIDTH ALWAYS, AND THE CROP CAN ONLY COME OFF THE TOP. The blinking rat's right edge
   sits at 100.00% of the artboard and its foot at 98.29% — it touches two edges. So ANY
   horizontal crop clips it, and so does almost any crop from the bottom. That rules out
   centring the art and letting it overflow evenly, and it rules out fitting it inside the
   window, which is what left the strips down both sides.
   Pinned to full width and to the bottom, the only thing a wide window can cut is the top of
   the shelving, which is just more shelving. A window TALLER than 16:9 leaves space above the
   room instead, and the blurred bleed behind fills it. */
.stage {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  aspect-ratio: 3840 / 2160;
  background: #16120e;
}

.stage-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* The sprites were cut out of the background, so they are opaque and simply sit back in the
   hole they came from. No transparency, no fringing, no blend mode. */
.sprite {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── THE EVIDENCE ─────────────────────────────────────────────────────────────────────── */

.evidence {
  position: absolute;
  display: block;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  /* nothing is drawn over the carton at rest — the painting already shows one */
  outline: 0;
  transition: filter .18s ease, transform .18s ease;
}
.evidence:hover,
.evidence:focus-visible {
  /* a torch found it: the carton warms and lifts a hair out of the shelf */
  filter: drop-shadow(0 0 22px rgba(255, 214, 130, .55)) brightness(1.14);
  transform: translateY(-0.6%);
}
.evidence:focus-visible { box-shadow: 0 0 0 3px var(--tape); }
.evidence:active { transform: translateY(0); }

/* The writing on the carton's blank label. Sized in cqw so the lettering grows with the room
   rather than staying a fixed number of pixels while the box around it doubles. */
.evidence-tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12em;
  text-align: center;
  text-transform: uppercase;
  /* marker on old card, not white text on a screen */
  color: #3a3128;
  transform: rotate(-1.2deg);
  pointer-events: none;
  overflow: hidden;
}
/* sized in cqw so the writing grows with the room instead of staying a fixed pixel size while
   the carton around it doubles */
.evidence-word { font: 800 1.05cqw/1 var(--mono); letter-spacing: .1em; }
.evidence-no   { font: 800 2.3cqw/1 var(--mono); letter-spacing: .02em; }

.stage { container-type: inline-size; }

/* ── THE CAPTION UNDER THE ROOM ───────────────────────────────────────────────────────── */

/* The caption sits ON the room now that the room is the whole page, with just enough shadow
   under it to stay readable against the shelves. */
.room-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 18px;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(6, 5, 4, .82) 62%);
  pointer-events: none;
}
/* Money green — the colour of a dollar bill, which is the only green these three care about. */
.room-foot .dept {
  margin: 0 0 6px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--money-dim);
}
.room-foot .hint {
  margin: 0;
  font: 12px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--money);
  /* the shelves behind are busy and mid-toned; a little shadow keeps the line legible without
     having to shout it in a brighter green than a banknote ever was */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

@media (prefers-reduced-motion: reduce) {
  .evidence { transition: none; }
}

/* ── THE ROOM'S SOUND TOGGLE ───────────────────────────────────────────────────────────────
   Top right, over the painting. Fixed rather than in the flow, because the room fills the
   window and there is no header to sit in. */
.sound-toggle.room-sound {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 5;
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--money);
  background: rgba(8, 7, 5, .55);
  border: 1px solid rgba(133, 187, 101, .38);
  border-radius: 3px;
  padding: 8px 12px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.sound-toggle.room-sound:hover { border-color: var(--money); background: rgba(8, 7, 5, .75); }
.sound-toggle.room-sound[data-on="false"] { color: var(--fg-3); border-color: var(--line-2); }
.sound-toggle.room-sound:focus-visible { outline: 2px solid var(--money); outline-offset: 2px; }