/* ============================================================
   MULLET MYSTERY: AGENTS. The visual system.
   Since 2026-08-18 (docs/16) the whole game runs on the store's
   paper system, the 2026-08-10 handoff verbatim: pink-wash ground,
   white cards, 2px/3px solid ink borders, zero-blur offset
   shadows, pink pill verbs, Passion One 700 display. Ink is a
   BAND for the loud beats (reveal, votes, Channel 988), never an
   atmosphere. No scanlines, grain, glows, gradients, or blur
   shadows anywhere; diegetic objects (hair, flame, a dead phone)
   are the only exceptions. Ramp names still read teal-*; the
   VALUES are ink. Mobile first: every rule reads at 380px.
   ============================================================ */

@font-face {
  font-family: "Passion One";
  src: url("../fonts/PassionOne-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Passion One";
  src: url("../fonts/PassionOne-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-italic-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 75% 100%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* Brand primitives. Each scale holds hue steady and changes lightness
     first, then chroma. The numbered anchor is the approved brand swatch. */
  --teal-50: oklch(0.96 0.014 296);
  --teal-100: oklch(0.90 0.026 296);
  --teal-200: oklch(0.80 0.040 296);
  --teal-300: oklch(0.68 0.055 296);
  --teal-400: oklch(0.56 0.062 296);
  --teal-500: oklch(0.46 0.064 296);
  --teal-600: oklch(0.39 0.062 296);
  --teal-700: oklch(0.34 0.060 296);
  --teal-800: oklch(0.29 0.057 296);
  --teal-900: oklch(0.262 0.052 296);
  --teal-950: oklch(0.235 0.049 296);
  --teal-975: oklch(0.20 0.042 296);

  --pink-50: oklch(0.97 0.020 355);
  --pink-100: oklch(0.92 0.050 353);
  --pink-200: oklch(0.85 0.085 352);
  --pink-300: oklch(0.79 0.115 350);
  --pink-400: oklch(0.73 0.175 354);
  --pink-500: oklch(0.66 0.235 356.5);
  --pink-600: oklch(0.585 0.215 358.5);
  --pink-700: oklch(0.545 0.205 0.5);
  --pink-800: oklch(0.44 0.160 0);
  --pink-900: oklch(0.34 0.110 0);
  --pink-950: oklch(0.25 0.070 0);

  --mint-50: oklch(0.97 0.020 169.13);
  --mint-100: oklch(0.92 0.045 169.13);
  --mint-200: oklch(0.86 0.080 169.13);
  --mint-300: oklch(0.82 0.115 169.13);
  --mint-400: oklch(0.795 0.135 169.13);
  --mint-500: oklch(0.80 0.155 163.5);
  --mint-600: oklch(0.68 0.135 169.13);
  --mint-700: oklch(0.57 0.110 169.13);
  --mint-800: oklch(0.46 0.085 169.13);
  --mint-900: oklch(0.36 0.062 169.13);
  --mint-950: oklch(0.27 0.045 169.13);

  --gray-50: oklch(0.96604 0.0053 106.5);
  --gray-100: oklch(0.92 0.005 100);
  --gray-200: oklch(0.84 0.005 100);
  --gray-300: oklch(0.74 0.006 100);
  --gray-400: oklch(0.64 0.006 100);
  --gray-500: oklch(0.55 0.006 98);
  --gray-600: oklch(0.48155 0.00642 95.19);
  --gray-700: oklch(0.39 0.005 95);
  --gray-800: oklch(0.31 0.004 95);
  --gray-900: oklch(0.255 0.002 95);
  --gray-950: oklch(0.21779 0 0);
  --gray-1000: oklch(0.18 0 0);

  /* Semantic layer, re-aimed at paper (docs/16). The values are the store's
     tokens (mp-tokens.css), not approximations. */
  --surface-recessed: #F4F1FF;   /* wells, boards: violet wash */
  --surface-ground: #FFF5F9;     /* the page: pink wash */
  --surface-base: #FFFFFF;
  --surface-raised: #FFFFFF;     /* cards: white stock */
  --surface-overlay: #FFFFFF;
  --surface-control: #FFFFFF;
  --surface-control-strong: #FFE3F0;
  --surface-paper: #FFFFFF;
  --band-ink: #17102B;           /* the loud beats: ink as a band, not air */
  --band-panel: #221741;         /* solid panel on an ink band */
  --band-text: #FFFFFF;
  --band-accent: #FF9AC4;        /* pink light lives only on ink bands */
  --action-primary: #FF3D8A;
  --action-hover: #FF63A2;
  --action-pressed: #D6216B;
  --signal-live: #0E8A5F;        /* mint deep: legible on paper */
  --signal-live-bright: #22E5A2; /* mint fills only, never text on white */
  --text-primary: #17102B;
  --text-secondary: #4A4458;
  --text-muted: #4A4458;
  --text-quiet: #6E6880;
  --text-inverse: #FFFFFF;
  --text-on-action: #FFFFFF;
  --text-accent: #D6216B;        /* pink deep: AA on white */
  --border-subtle: rgba(23, 16, 43, 0.2);
  --border-strong: #17102B;
  --border-live: #0E8A5F;
  --shadow-1: 3px 3px 0 #17102B;
  --shadow-2: 5px 5px 0 #17102B;
  --shadow-3: 8px 8px 0 #17102B;
  --shadow-inset: 0 0 0 rgba(0, 0, 0, 0);

  /* Compatibility aliases. New component work should use semantic names.
     On paper, "pink-light" and "mint" resolve to their AA-safe deeps; the
     bright originals live on ink bands via the band scopes below. */
  --teal-deep: var(--surface-raised);
  --teal-deeper: var(--surface-ground);
  --pink-hot: var(--action-primary);
  --pink-deep: var(--action-pressed);
  --pink-light: var(--text-accent);
  --mint: var(--signal-live);
  --paper: var(--surface-paper);
  --ink: #17102B;
  --line: var(--border-subtle);
  --muted: var(--text-muted);
  --display: "Passion One", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --type-hero: clamp(4.25rem, 22vw, 7.5rem);
  --type-verdict: clamp(3.15rem, 15.5vw, 5.6rem);
  --type-count: clamp(4.75rem, 25vw, 8.5rem);
  --type-stamp: clamp(2.25rem, 11vw, 4rem);
  --glow-pink: 0 0 0 rgba(0, 0, 0, 0); /* glow is dead; kept list-safe for stragglers */
  --mp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  --mp-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)' opacity='.22'/%3E%3C/svg%3E");
  --pad-top: env(safe-area-inset-top, 0px);
  --pad-bottom: env(safe-area-inset-bottom, 0px);
}

/* The old OKLCH night remap is gone on purpose: the hex semantics above are
   the single truth for the paper system. The ramps stay for direct refs. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface-ground);
  color: var(--text-primary);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.5;
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* The old atmosphere (glows, vignette, scanlines, grain) is gone: the page
   is flat paper. The #grain element stays in the DOM, inert. */
#grain { display: none; }

#flash {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: rgba(255, 61, 138, 0.5);
}

#app {
  position: relative; z-index: 1;
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(var(--pad-top) + 10px) 14px calc(var(--pad-bottom) + 10px);
  max-width: 520px; margin: 0 auto;
}

/* ---------------- chrome ---------------- */

#chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary);
  min-height: 52px; padding: 6px 8px 6px 12px;
  background: #fff;
  border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
#chrome .brand { color: var(--ink); font-weight: 700; white-space: nowrap; }
#chrome .case { white-space: nowrap; letter-spacing: 0.14em; }
@media (max-width: 430px) {
  #chrome .case { display: none; }
}

#soundBtn, #musicBtn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  min-height: 40px; padding: 0 13px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#soundBtn:active, #musicBtn:active { transform: translate(2px, 2px); box-shadow: none; }
#soundBtn:focus-visible, #musicBtn:focus-visible, #alert:focus-visible {
  outline: 3px solid var(--pink-hot); outline-offset: 3px;
}
#soundBtn[data-muted="true"], #musicBtn[data-muted="true"] { color: var(--text-secondary); text-decoration: line-through; }

#chaosWrap { padding: 10px 2px 8px; }
#chaosWrap .row {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px;
}
#chaosWrap .row .val { color: var(--pink-deep); }
#chaosBar {
  height: 10px; border-radius: 999px; background: #fff;
  border: 2px solid var(--ink);
  overflow: hidden; position: relative;
}
#chaosFill {
  height: 100%; width: 0%;
  background: var(--pink-hot);
}

/* ---------------- screen ---------------- */

#screen { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
/* auto margins center short panes but let tall panes scroll from the top;
   justify-content center would clip the top unreachably in the scroller */
.pane { flex: none; display: flex; flex-direction: column; margin: auto 0; width: 100%; }
.pane--top { margin-top: 0; margin-bottom: auto; }
.screen-composition { min-height: 100%; }

.case-spine {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--pink-deep);
  border-bottom: 2px dashed rgba(23, 16, 43, 0.3); padding-bottom: 8px;
}
.title-scene {
  position: relative; padding: 14px 14px 20px;
  background: #fff;
  border: 3px solid var(--ink); border-radius: 4px 16px 16px 16px;
  box-shadow: 8px 8px 0 var(--ink);
}
.title-scene::before {
  content: "CASE FILE"; position: absolute; left: -3px; top: -30px;
  padding: 7px 16px 8px; border-radius: 10px 10px 0 0;
  background: var(--pink-hot); color: #fff;
  border: 3px solid var(--ink); border-bottom: none;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
}
.title-scene .display { position: relative; z-index: 2; margin-top: 18px; }
.title-photo:empty { display: none; }
.title-scene .world-shot { margin-bottom: 2px; }
.home-screen { padding-top: 24px; }

.action-dock {
  display: grid; gap: 10px; margin-top: auto; padding: 16px 0 2px;
  position: relative; z-index: 5;
}
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action-grid .btn { min-width: 0; padding-inline: 10px; }
.sidecase {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px;
  min-height: 58px; padding: 10px 12px; color: var(--text-primary); text-decoration: none;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ink);
}
.sidecase-k {
  grid-row: 1 / 3; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--mint); text-transform: uppercase;
}
.sidecase b { font-family: var(--display); font-size: 20px; line-height: 0.95; text-transform: uppercase; }
.sidecase small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.sidecase:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--pink-deep); text-align: center;
}
.display {
  font-family: var(--display); font-weight: 700;
  font-size: var(--type-hero); line-height: 0.82;
  text-transform: uppercase; letter-spacing: -0.015em;
  text-align: center; margin: 14px 0 6px;
  text-wrap: balance; overflow-wrap: anywhere;
}
.display .hot { color: var(--pink-hot); }
.display--masthead { font-size: clamp(4.8rem, 25vw, 8.5rem); }
.display--masthead .hot { display: inline-block; margin-left: 0.11em; }
.display--question { font-size: clamp(4.25rem, 22vw, 7.4rem); }
.display--verdict { font-size: var(--type-verdict); line-height: 0.82; }
.type-line { display: block; }
/* kineticWords() wraps each headline word in one of these so it can rise and
   settle on its own. inline-block keeps a word intact (never breaks mid word)
   while still letting the line wrap between words at 380px. will-change hints
   the compositor for the brief one shot; clearProps drops the transform after. */
.kin-word { display: inline-block; will-change: transform, opacity; }
.type-outline {
  color: var(--ink);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .type-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--ink);
  }
}

.lede {
  color: var(--text-secondary); font-size: 15px; line-height: 1.55;
  text-align: center; max-width: 36ch; margin: 14px auto 0;
}
.fine {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-secondary); text-align: center; margin-top: 18px;
}

/* ---------------- buttons ---------------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 16px 20px;
  border: 2px solid var(--ink); border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-weight: 800; font-size: 16px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--action-primary);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: none; background: var(--action-pressed); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--mpx-blue, #2B6BFF); outline-offset: 3px; }
.btn--ghost {
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 700;
}
.btn--ghost:active { background: var(--surface-control-strong); color: var(--ink); }
.btnrow { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* Lobby: the room code is the object, the roster is the evidence wall. */
.lobby-screen { gap: 16px; }
.lobby-codefile {
  text-align: center; padding: 14px 14px 18px;
  background: #fff; border: 3px solid var(--ink); border-radius: 5px 16px 16px;
  box-shadow: 8px 8px 0 var(--ink);
}
.lobby-codefile .roomcode { margin-top: 24px; }
.roster-board {
  position: relative; padding: 24px 10px 12px; min-height: 112px;
  border: 2px solid var(--ink); border-radius: 12px;
  background: var(--surface-recessed);
}
.roster-board::before {
  content: attr(data-label); position: absolute; top: 8px; left: 12px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; color: var(--pink-deep);
}
.roster-board .roster { margin: 5px 0 0; }
.lobby-actions { padding-top: 20px; }

/* ---------------- dossier card ---------------- */

.dossier {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 4px 16px 16px 16px;
  padding: 20px 18px 18px;
  box-shadow: 8px 8px 0 var(--ink);
  margin-top: 26px;
}
.dossier::before {
  /* the folder tab */
  content: attr(data-tab);
  position: absolute; top: -30px; left: 14px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: #fff;
  background: var(--pink-hot);
  border: 3px solid var(--ink); border-bottom: none;
  padding: 6px 14px 7px; border-radius: 10px 10px 0 0;
}

.classified {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--pink-deep);
  border-bottom: 2px dashed rgba(23, 16, 43, 0.3); padding-bottom: 10px; margin-bottom: 14px;
}
.classified .no { color: var(--text-secondary); }

.target {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-recessed); border: 2px solid var(--ink);
  border-radius: 12px; padding: 12px; margin-bottom: 14px;
}
.target .k {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--signal-live); display: block; margin-bottom: 3px;
}
.target .name {
  font-family: var(--display); font-size: 21px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.02em;
}

.swatch {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--ink);
  position: relative; overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
}

.mission-text {
  font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--ink);
}

.redactions { display: flex; gap: 6px; margin-top: 16px; opacity: 0.5; }
.redactions i {
  height: 10px; background: var(--ink); border-radius: 2px; flex: none;
}

/* ---------------- alert card ---------------- */

#alert {
  position: fixed; z-index: 70;
  left: 12px; right: 12px; top: calc(var(--pad-top) + 12px);
  max-width: 496px; margin: 0 auto;
  background: #fff;
  border: 3px solid var(--ink); border-left: 8px solid var(--pink-hot);
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer; visibility: hidden;
}
#alert .approw {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px;
}
#alert .appicon {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--pink-hot); border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 11px; color: #fff; letter-spacing: 0;
}
#alert .headline {
  font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1;
  text-transform: uppercase; color: var(--ink);
}
#alert .headline .hot { color: var(--pink-hot); }
#alert .sub { color: var(--text-secondary); font-size: 13.5px; margin-top: 5px; }
#alert .openhint {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--signal-live); margin-top: 10px; text-align: right;
}

/* ---------------- identity ---------------- */

.medallion {
  width: 138px; height: 138px; border-radius: 50%;
  margin: 0 auto; position: relative;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
}
.wigname {
  font-family: var(--display); font-weight: 700; font-size: clamp(34px, 11vw, 48px);
  line-height: 0.95; text-transform: uppercase; text-align: center;
  margin: 18px 0 4px;
}
.agentline {
  text-align: center; font-size: 15px; color: var(--text-secondary);
}
.agentline b { color: var(--pink-deep); font-weight: 800; }
.lane {
  margin: 16px auto 0; max-width: 36ch;
  border-left: 3px solid var(--signal-live); padding: 2px 0 2px 12px;
  font-size: 14.5px; color: var(--text-secondary); font-style: italic; text-align: left;
}
.lane .k {
  display: block; font-family: var(--mono); font-style: normal; font-weight: 700;
  font-size: 10px; letter-spacing: 0.3em; color: var(--signal-live); margin-bottom: 3px;
}

/* the slot reel during the draw */
.reel {
  height: 64px; overflow: hidden; margin: 22px 0 6px;
  display: grid; place-items: center;
}
.reel .word {
  font-family: var(--display); font-weight: 700; font-size: clamp(30px, 9.5vw, 44px);
  text-transform: uppercase; line-height: 1; text-align: center;
  color: var(--pink-hot);
}

/* ---------------- standby ---------------- */

.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal-live-bright); border: 2px solid var(--ink);
  display: inline-block; margin-right: 10px; vertical-align: 2px;
}
.standby-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 15vw, 5.2rem);
  text-transform: uppercase; text-align: center; line-height: 0.84;
  letter-spacing: -0.01em; text-wrap: balance;
}
.statusline {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-secondary); text-align: center; margin-top: 16px; min-height: 3em;
  padding: 0 10px;
}

/* ---------------- polaroid + stamp ---------------- */

.develop-wrap { display: grid; place-items: center; margin: 10px 0; position: relative; }
.polaroid {
  background: #fff; border-radius: 2px;
  border: 2px solid var(--ink);
  padding: 10px 10px 36px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg);
  width: min(74vw, 320px);
  position: relative;
}
.polaroid img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--surface-control-strong); border-radius: 0;
}
.polaroid .cap {
  position: absolute; left: 12px; bottom: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary);
}

/* Optional world art. Every warm scene enters as a handled evidence photo.
   A missing asset removes the complete figure, leaving the current layout. */
.world-shot {
  width: min(88vw, 420px); margin: 14px auto 18px; padding: 6px 6px 12px;
  position: relative; background: #fff; transform: rotate(-1.2deg);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); border-radius: 2px;
}
.world-shot img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0; background: var(--surface-control-strong); image-rendering: auto;
}
.world-shot figcaption {
  margin: 7px 4px 1px;
  color: var(--text-secondary); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; line-height: 1.35; text-transform: uppercase;
}
.world-shot::after {
  content: attr(data-stamp); position: absolute; right: 6px; top: 10px;
  padding: 3px 7px; border: 2px double var(--signal-live); color: var(--signal-live);
  background: #fff; font-family: var(--mono); font-size: 8px;
  font-weight: 700; letter-spacing: 0.12em; transform: rotate(-8deg);
}
.world-shot--home { width: min(78vw, 320px); margin-top: 10px; }
.world-shot--reveal { width: min(82vw, 350px); margin-top: 18px; }
.world-shot--exit { width: min(58vw, 220px); margin: 10px auto 6px; padding-bottom: 10px; transform: rotate(1.4deg); }
.world-shot--exit img { aspect-ratio: 16 / 7; }
.scanline {
  position: absolute; left: 10px; right: 10px; height: 3px;
  background: var(--pink-hot);
  opacity: 0; top: 10px; pointer-events: none;
}

.stamp {
  position: absolute; z-index: 5;
  top: 14%; right: -4%;
  font-family: var(--display); font-weight: 700; font-size: var(--type-stamp); letter-spacing: 0.055em;
  line-height: 0.88; text-align: center; text-wrap: balance;
  text-transform: uppercase; color: var(--pink-hot);
  border: 4px double var(--pink-hot); border-radius: 8px;
  padding: 4px 14px; transform: rotate(-11deg);
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
}

.reaction {
  font-size: 16.5px; font-weight: 650; line-height: 1.5;
  text-align: center; max-width: 34ch; margin: 14px auto 0;
}
.lanenote {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--signal-live); text-align: center; max-width: 40ch; margin: 12px auto 0;
}

/* ---------------- evidence tray ---------------- */

#tray {
  display: flex; gap: 10px; align-items: flex-end;
  min-height: 0; height: 0; overflow: hidden;
  transition: height 0.3s ease;
}
#tray.has { height: 74px; padding-top: 10px; overflow-x: auto; overflow-y: hidden; }
#tray .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-secondary);
  writing-mode: vertical-rl; transform: rotate(180deg);
  flex: none; padding-bottom: 4px;
}
#tray .thumb {
  flex: none; width: 46px; height: 56px;
  background: #fff; border: 2px solid var(--ink); border-radius: 2px; padding: 3px 3px 8px;
  box-shadow: 2px 2px 0 var(--ink);
}
#tray .thumb:nth-child(odd) { transform: rotate(3deg); }
#tray .thumb:nth-child(even) { transform: rotate(-3deg); }
#tray .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px;
}

/* ---------------- misc ---------------- */

.stamp-inline {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--signal-live);
  border: 3px double var(--signal-live); border-radius: 6px;
  padding: 3px 10px; transform: rotate(-4deg);
  margin: 10px auto 0;
}
.center { text-align: center; }
.hidden { display: none !important; }
input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------------- the full night ---------------- */

#screen { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
#screen::-webkit-scrollbar, #sheet .sheet-inner::-webkit-scrollbar { display: none; }

.fld {
  width: 100%; min-height: 54px; padding: 14px 16px;
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px;
  font-family: var(--body); font-size: 16px; font-weight: 600;
}
.fld::placeholder { color: rgba(74, 68, 88, 0.6); }
.fld:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }
.fld.code {
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.4em;
  text-transform: uppercase; text-align: center; flex: 1;
}
.joinrow { display: flex; gap: 10px; }
.joinrow .btn { width: auto; padding-left: 26px; padding-right: 26px; }
.btn--small { min-height: 46px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
.btn--mintline {
  background: #fff; color: var(--signal-live);
  border: 2px solid var(--signal-live); box-shadow: 3px 3px 0 var(--signal-live); margin-top: 14px;
}
.btn:disabled { opacity: 0.35; pointer-events: none; }

.roomcode {
  font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 26vw, 9rem);
  line-height: 0.78; letter-spacing: 0.035em; color: var(--pink-hot);
  margin: 10px 0 4px;
}

.roster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 999px; padding: 7px 13px; color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-control-strong); border: 1px solid var(--ink); }
.chip.ready .dot { background: var(--signal-live-bright); }
.chip.me { border-color: var(--pink-hot); box-shadow: 2px 2px 0 var(--pink-hot); }

/* quiz */
.quizmeta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quizmeta .step {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--pink-deep); white-space: nowrap;
}
.qbar { flex: 1; height: 10px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--pink-hot); }
.prompt { font-size: clamp(21px, 5.8vw, 26px); line-height: 1.2; font-weight: 800; margin-bottom: 16px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.answer {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 13px; padding: 14px; min-height: 52px;
  color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 550; line-height: 1.4;
  cursor: pointer; transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
  box-shadow: 3px 3px 0 var(--ink);
}
.answer:active { transform: translate(3px, 3px); box-shadow: none; background: var(--surface-control-strong); }
.answer:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }
.answer .ltr {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-control-strong); border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--pink-deep);
}

/* labels + host strip */
.klabel {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px;
}
.facit {
  margin-top: 24px; border-top: 2px dashed rgba(23, 16, 43, 0.3); padding-top: 16px;
}
.facit .facp { color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; }
.tallyrow {
  display: flex; justify-content: space-between; padding: 9px 2px;
  border-bottom: 1px solid rgba(23, 16, 43, 0.15); font-size: 15px; font-weight: 650;
}
.tallyrow .tn {
  font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem);
  line-height: 0.72; color: var(--pink-deep); font-variant-numeric: tabular-nums;
}

/* the character card */
.cardart { position: relative; width: 168px; height: 168px; margin: 4px auto 0; }
.cardart.small { width: 120px; height: 120px; }
.cardart.tiny {
  width: 36px; height: 40px; flex: 0 0 36px; margin: 0 1px 0 0;
  background: #fff; border: 1.5px solid var(--ink); padding: 2px 2px 5px; transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
}
.cardart .medallion { width: 100%; height: 100%; }
.cardart.tiny .medallion {
  border: 0; border-radius: 1px; box-shadow: none;
}
.cardart .artimg {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  object-fit: contain; opacity: 0; transition: opacity 0.4s ease;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.55));
}
.cardart.tiny .artimg {
  inset: -7% -9% 2%; width: 118%; height: 105%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.cardart .artimg.on { opacity: 1; }
.cardart .artimg.on + .medallion, .cardart:has(.artimg.on) .medallion { opacity: 0.25; }
.role-screen { padding-top: 4px; }
/* The character reveal is an ink band: the store's dark section, not the old
   night air. Paper cutout art pops against it. */
.role-stage {
  position: relative; min-height: 244px; overflow: hidden;
  background: var(--band-ink); border: 3px solid var(--ink); border-radius: 4px 16px 16px;
  box-shadow: 8px 8px 0 var(--pink-hot);
}
.role-kicker {
  position: absolute; top: 10px; left: 12px; z-index: 4;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.28em; color: var(--band-accent); text-transform: uppercase;
}
.role-art { position: absolute; left: -4px; bottom: -7px; width: 58%; z-index: 1; }
.role-art::before {
  content: ""; position: absolute; inset: 24px 12px 8px 5px;
  background: #fff; transform: rotate(-2deg); border-radius: 2px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.role-art .cardart { width: 188px; height: 210px; margin: 0; overflow: visible; }
.role-art .medallion { margin-top: 34px; width: 164px; height: 164px; }
.role-art .artimg { inset: 0 -18% -8% -12%; width: 128%; height: 112%; object-position: center bottom; }
.role-nameplate {
  position: absolute; right: 12px; bottom: 20px; z-index: 3; width: 59%; text-align: right;
}
.role-nameplate .wigname {
  margin: 0; text-align: right; font-size: clamp(2.65rem, 13vw, 4.7rem); line-height: 0.78;
  color: var(--band-text); text-shadow: 3px 3px 0 var(--pink-deep);
}
.role-nameplate .agentline { text-align: right; color: var(--band-accent); margin-top: 8px; }
.role-nameplate .stamp-inline { margin-top: 10px; font-size: 8px; letter-spacing: 0.16em; color: var(--signal-live-bright); border-color: var(--signal-live-bright); }

.dialogue-file {
  display: grid; grid-template-columns: 48px 1fr; align-items: end; gap: 8px;
  position: relative; margin-top: 14px; color: var(--ink);
}
.dialogue-portrait { position: relative; z-index: 2; transform: translate(4px, -8px); }
.dialogue-portrait .cardart.tiny { width: 48px; height: 56px; flex-basis: 48px; }
.dialogue-copy {
  position: relative; min-height: 76px; padding: 10px 12px 11px 16px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 3px; transform: rotate(-0.45deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.dialogue-copy::before {
  content: ""; position: absolute; left: -10px; bottom: 14px;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 12px solid var(--ink);
}
.dialogue-meta {
  display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; margin-bottom: 6px;
  border-bottom: 1px dashed rgba(23, 16, 43, 0.3);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #17102B;
}
.dialogue-meta b { color: var(--action-pressed); }
.dialogue-copy p { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: #221741; }
.peek-identity { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 10px; }
.peek-identity .cardart { margin: 0; }
.peek-identity .wigname { margin: 8px 0 0; text-align: left; font-size: 34px; }
.peek-identity .eyebrow { text-align: left; }

.break-screen { padding-top: 4px; }
.break-brief {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  border-bottom: 3px solid var(--ink); padding-bottom: 12px;
}
.break-number {
  font-family: var(--display); font-weight: 700; font-size: clamp(5.5rem, 27vw, 9rem); line-height: 0.62;
  color: var(--pink-hot); font-variant-numeric: tabular-nums;
}
.break-copy .eyebrow, .break-copy .lede { text-align: left; margin-left: 0; }
.break-title { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); line-height: 0.86; text-transform: uppercase; }
.break-copy .lede { margin-top: 7px; font-size: 13px; }
.break-board { display: grid; gap: 12px; }
.break-board .wiredump { margin-top: 24px; }
.break-side > :first-child { margin-top: 16px; }

.vote-screen { gap: 14px; }
/* The ballot is Channel 988: an ink band with the yellow chip. */
.vote-poster {
  padding: 12px 12px 14px; text-align: center;
  border: 3px solid var(--ink); border-radius: 4px 16px 16px;
  background: var(--band-ink); color: var(--band-text);
  box-shadow: 8px 8px 0 var(--pink-hot);
}
.vote-poster .lede { color: rgba(255, 255, 255, 0.8); }
.vote-poster .eyebrow { color: var(--band-accent); }
.vote-poster .display { margin-block: 12px 5px; }
.vote-screen .answer { align-items: center; padding-block: 8px; min-height: 58px; }
.vote-screen .answer .cardart.tiny { margin-right: 4px; }
.vote-name { font-weight: 800; text-transform: uppercase; }
.vote-mark { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--pink-light); }
.tally-person { display: flex; align-items: center; gap: 8px; }
.tally-person .cardart.tiny { display: inline-block; }

.reveal-screen { gap: 14px; }
/* The verdict is the loudest band of the night. */
.verdict-stage {
  position: relative; padding: 14px 12px 16px; text-align: center;
  border: 3px solid var(--ink); border-radius: 4px 16px 16px;
  background: var(--band-ink); color: var(--band-text);
  box-shadow: 8px 8px 0 var(--pink-hot);
}
.verdict-stage .eyebrow { color: var(--band-accent); }
.verdict-stage .lede { color: rgba(255, 255, 255, 0.8); }
.verdict-stage > *:not(.verdict-mark) { position: relative; z-index: 2; }
.verdict-mark {
  position: absolute; z-index: 1; right: 7px; top: 8px;
  width: clamp(46px, 14vw, 62px); height: auto; color: var(--band-accent); opacity: 0.4;
  transform: rotate(8deg);
}
.verdict-stage .world-shot { margin-bottom: 12px; }
.verdict-copy {
  display: grid; gap: 7px; padding: 12px 13px; text-align: left;
  background: var(--band-panel); border: 2px solid rgba(255, 255, 255, 0.25); border-left: 4px solid var(--signal-live-bright);
  border-radius: 8px;
}
.verdict-copy p { font-size: 13.5px; line-height: 1.48; color: rgba(255, 255, 255, 0.88); }
.zerowrap .dialogue-file { max-width: 390px; margin-inline: auto; }

@media (min-width: 480px) {
  .break-board { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; }
}

@media (max-width: 390px) {
  .display--masthead { font-size: clamp(4.4rem, 24vw, 6rem); }
  .title-scene { padding-inline: 10px; }
  .role-art { left: -18px; }
  .role-nameplate { right: 9px; width: 62%; }
  .role-nameplate .wigname { font-size: clamp(2.4rem, 12.7vw, 3.7rem); }
  .dialogue-file { grid-template-columns: 42px 1fr; }
  .dialogue-portrait .cardart.tiny { width: 42px; height: 50px; flex-basis: 42px; }
  .dialogue-copy { padding-left: 13px; }
}
.mintname { color: var(--mint); }
.dossier .blk { margin-bottom: 14px; }
.dossier .blk:last-child { margin-bottom: 0; }
.dossier .blk .k {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--pink-deep); margin-bottom: 5px;
}
.dossier .blk p { font-size: 15px; line-height: 1.55; font-weight: 550; }

/* the night */
.nighttimer {
  font-family: var(--display); font-weight: 700; font-size: var(--type-count);
  line-height: 0.72; margin: 8px 0 2px; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.coverstrip {
  display: block; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 12px; padding: 12px 14px; margin-top: 16px;
  color: var(--ink); font: inherit; font-size: 14.5px; cursor: pointer;
  min-height: 52px;
  box-shadow: 3px 3px 0 var(--ink);
}
.coverstrip .k {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--signal-live); margin-bottom: 3px;
}
.coverstrip b { color: var(--pink-deep); font-weight: 800; }
.coverstrip .peek {
  float: right; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-secondary); margin-top: 2px;
}
.coverstrip:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }
.keithcall {
  margin-top: 18px; border: 2px solid var(--signal-live); border-radius: 14px;
  padding: 16px; background: var(--mint-wash, #DFFBF0);
  box-shadow: 3px 3px 0 var(--signal-live);
}
.keithcall .k {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--signal-live); margin-bottom: 8px;
}
.keithcall p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }

.cluefeed { margin-top: 22px; }
.clue {
  background: #fff; border: 2px solid var(--ink);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.clue--beat { border-color: var(--pink-hot); box-shadow: 3px 3px 0 var(--pink-hot); background: var(--surface-control-strong); }
.clue .cn {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pink-deep); margin-bottom: 5px;
}
.clue--beat .cn { color: var(--pink-deep); }
.clue .ct { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* alert accents */
#alert .headline .mint { color: var(--signal-live); }
#alert .openhint.mint { color: var(--signal-live); }

/* sheet */
#sheet {
  position: fixed; inset: 0; z-index: 55; display: none;
  background: var(--surface-ground);
}
#sheet.open { display: block; }
#sheet .sheet-inner {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  max-width: 520px; margin: 0 auto;
  padding: calc(var(--pad-top) + 40px) 16px calc(var(--pad-bottom) + 26px);
}
.swatch--unknown {
  background: var(--surface-recessed);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 24px;
}

.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 80;
  background: var(--band-ink); border: 2px solid var(--ink);
  border-radius: 12px; padding: 12px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  color: #fff; text-align: center; max-width: 496px;
  margin: 0 auto; pointer-events: none; opacity: 0;
}

/* the note + the finale */
.note { margin-top: 18px; }
.note p, .notep {
  font-family: var(--mono); font-size: 14.5px; line-height: 1.72;
  color: var(--ink); margin-bottom: 14px;
}
.noteanswer {
  font-family: var(--mono); font-size: 15px; line-height: 1.7;
  color: var(--pink-deep); margin: 18px 0; text-align: center;
}
.finalcard {
  background: #fff; border: 3px solid var(--ink);
  border-radius: 16px; padding: 22px 18px; margin-top: 10px;
  box-shadow: 8px 8px 0 var(--ink);
}
.final-mark {
  display: flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--signal-live);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
}
.final-hq-mark { width: 27px; height: 21px; }
.finalcard .fh {
  font-family: var(--display); font-weight: 700; font-size: clamp(3.25rem, 16vw, 6rem);
  line-height: 0.82; letter-spacing: -0.015em; text-transform: uppercase; margin-bottom: 16px;
  text-wrap: balance;
}
.finalcard .fb { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 16px; }
.finalcard .crisis {
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #fff;
  background: var(--band-ink); border-radius: 10px; padding: 12px 14px;
}

/* ---------------- the wire dump (paper on the dark table) ---------------- */

.wiredump {
  position: relative;
  background: #fff;
  color: #17102B;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 16px 16px 14px;
  margin-top: 24px;
  transform: rotate(-0.8deg);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
}
.wd-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: #17102B;
  border-bottom: 2px dashed rgba(23, 16, 43, 0.3);
  padding-bottom: 8px; margin-bottom: 12px;
}
.wd-rows { position: relative; }
.wd-row {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em; color: #221741;
  padding: 7px 0;
}
.wd-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-dots { flex: 1; border-bottom: 2px dotted rgba(23, 16, 43, 0.35); transform: translateY(-3px); }
.wd-count { font-weight: 700; color: var(--pink-deep); }
.wd-noted {
  font-size: 9px; letter-spacing: 0.18em; color: var(--pink-deep);
  border: 1.5px solid var(--pink-deep); border-radius: 3px;
  padding: 1px 6px; transform: rotate(-2deg); flex: none;
}
.wd-sus {
  position: absolute; right: 34px; top: 0;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.1em;
  color: var(--action-pressed); border: 2px double var(--action-pressed); border-radius: 4px;
  padding: 1px 8px; transform: rotate(-6deg);
  background: #fff;
  opacity: 0;
}
.wd-line {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: #221741; padding: 8px 0 2px;
}
.wd-line .wd-k {
  display: block; font-size: 10px; letter-spacing: 0.24em; font-weight: 700;
  text-transform: uppercase; color: var(--signal-live); margin-bottom: 2px;
}
.wd-empty { font-style: italic; }
.wd-total {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: #17102B;
  border-top: 2px dashed rgba(23, 16, 43, 0.3);
  margin-top: 12px; padding-top: 12px;
}
.wd-totaln {
  font-family: var(--display); font-weight: 700; font-size: var(--type-count); line-height: 0.68;
  letter-spacing: -0.03em; color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .wd-totaln { color: transparent; -webkit-text-stroke: 2px var(--pink-deep); }
}
.wd-redact { display: flex; gap: 6px; margin-top: 12px; opacity: 0.85; }
.wd-redact i { height: 9px; background: #221741; border-radius: 2px; flex: none; }
.wd-foot {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-quiet); margin-top: 10px;
}
.wd-stamp {
  position: absolute; top: 2px; right: -8px; z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: var(--type-stamp); letter-spacing: 0.06em;
  line-height: 0.86; text-align: center;
  text-transform: uppercase; color: var(--pink-hot);
  border: 4px double var(--pink-hot); border-radius: 8px;
  padding: 3px 16px; transform: rotate(-9deg);
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
}

/* the montage */
.montage {
  position: relative; min-height: 46vh; margin-top: 18px;
  display: grid; place-items: center;
}
.mpolaroid {
  position: absolute; width: min(62vw, 270px);
  opacity: 0;
}
.mpolaroid img { aspect-ratio: 4 / 5; }
.zerowrap { margin-top: 10px; }

@media (min-width: 700px) {
  #app { padding-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  #grain { opacity: 0.04; mix-blend-mode: normal; }
}

/* ================= aimed powers (phase 3) ================= */
/* the landing: your power on THEIR phone, full takeover inside the sheet */
/* A power landing is a served document: white card, ink border, loud type. */
.landing {
  text-align: center; padding: 18px 14px 20px; margin-top: 6px;
  background: #fff; border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 8px 8px 0 var(--pink-hot);
}
.landing .lnd-eyebrow {
  font-family: var(--mono, "Space Mono", monospace); font-size: 12px; font-weight: 700; letter-spacing: 3px;
  color: var(--pink-deep); text-transform: uppercase;
}
.landing .lnd-title {
  font-family: "Passion One", sans-serif; font-weight: 700; font-size: clamp(3.25rem, 16vw, 5.75rem);
  letter-spacing: -0.01em; line-height: 0.85; margin: 12px 0 10px; text-transform: uppercase;
  text-wrap: balance; color: var(--ink);
}
.landing .lnd-sub { font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 34ch; margin: 0 auto; }
.landing .lnd-timer {
  font-family: var(--mono, "Space Mono", monospace); font-size: 44px; font-weight: 700;
  margin: 14px 0 4px; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* MIC'D: the red light is on */
.miclive {
  display: inline-flex; align-items: center; gap: 10px; margin: 16px auto 6px;
  border: 2px solid var(--pink-deep); border-radius: 8px; padding: 10px 16px;
  font-family: var(--mono, "Space Mono", monospace); font-weight: 700; font-size: 16px;
  letter-spacing: 3px; color: var(--pink-deep); background: #fff;
  box-shadow: 3px 3px 0 var(--pink-deep);
}
.miclive .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--action-primary); animation: recblink 1s steps(1) infinite; }
@keyframes recblink { 50% { opacity: 0.15; } }

/* the lighter: their phone becomes the flame */
.flamewrap { position: relative; height: 220px; display: flex; align-items: flex-end; justify-content: center; margin: 10px 0 4px; }
.flame {
  position: relative; width: 56px; height: 120px;
  background: radial-gradient(50% 60% at 50% 78%, #F4F4F0 0%, #FF9AC4 34%, #FF3D8A 62%, rgba(255, 61, 138, 0) 100%);
  border-radius: 50% 50% 46% 54% / 62% 62% 38% 38%;
  filter: blur(1.5px) drop-shadow(0 0 26px rgba(255, 61, 138, 0.75));
  transform-origin: 50% 95%;
  animation: flick 0.24s ease-in-out infinite alternate;
}
.flame::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; width: 22px; height: 52px;
  margin-left: -11px; border-radius: 50% 50% 42% 58% / 66% 66% 34% 34%;
  background: radial-gradient(50% 60% at 50% 80%, #fff 0%, #22E5A2 70%, rgba(34, 229, 162, 0) 100%);
  opacity: 0.85; filter: blur(1px);
}
@keyframes flick {
  from { transform: scaleY(1) rotate(-2.2deg); }
  to { transform: scaleY(1.08) rotate(2.4deg); }
}
.swayer { animation: sway 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
  .flame, .swayer { animation: none; }
  /* the REC dot stops blinking and rests solid, still legibly "rolling" */
  .miclive .dot { animation: none; opacity: 1; }
}

/* smuggle line + ballad prompts ride the paper slip */
.slip {
  background: #fff; color: #221741; border-radius: 4px;
  border: 2px solid var(--ink);
  padding: 14px 14px 12px; margin: 14px auto 0; max-width: 340px;
  font-family: var(--mono, "Space Mono", monospace); font-size: 14px; line-height: 1.55;
  text-align: left; transform: rotate(-0.8deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.slip .k {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 2px; color: #17102B;
  border-bottom: 1px dashed rgba(23, 16, 43, 0.35); padding-bottom: 5px; margin-bottom: 8px;
  text-transform: uppercase;
}
.slip b { color: #D6216B; }

/* the tapes: interview evidence, this phone only */
.tapes { margin-top: 16px; }
.taperow {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid rgba(23, 16, 43, 0.15);
  font-family: var(--mono, "Space Mono", monospace); font-size: 12px; letter-spacing: 1px;
}
.taperow .tplay {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  border: 2px solid var(--signal-live); color: var(--signal-live); background: #fff;
  border-radius: 8px; padding: 8px 12px; font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  box-shadow: 2px 2px 0 var(--signal-live);
}
.taperow .tplay:active { transform: translate(2px, 2px); box-shadow: none; }

/* the duel, inside the night: the phone screen is an ink band */
.duelstage {
  position: relative; margin: 12px auto; width: min(62vw, 240px); aspect-ratio: 100 / 160;
  background: var(--band-ink); border: 3px solid var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 6px 6px 0 var(--pink-hot);
}
.duelstage svg.zones { position: absolute; inset: 0; width: 100%; height: 100%; }
.duelstage .sweepv { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #FF3D8A; display: none; z-index: 4; }
.duelstage .sweeph { position: absolute; left: 0; right: 0; height: 3px; margin-top: -1px; background: #FF3D8A; display: none; z-index: 4; }
.duelclock {
  font-family: var(--mono, "Space Mono", monospace); font-size: 30px; font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
}
.dl-pace { font-family: "Passion One", sans-serif; font-weight: 700; font-size: 96px; text-align: center; line-height: 1; }

/* the corpse phone: ten seconds of glass and honor. A dead phone is BLACK;
   this is the one diegetic dark surface that survives the paper system. */
#corpse {
  position: fixed; inset: 0; z-index: 90; background: #0A0716; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; color: #fff;
}
#corpse.on { display: flex; }
#corpse svg.cracks { position: absolute; inset: 0; width: 100%; height: 100%; }
#corpse .crack { stroke: rgba(244, 244, 240, 0.7); stroke-width: 1.5; fill: none; stroke-dasharray: 260; stroke-dashoffset: 260; }
#corpse.on .crack { animation: crackdraw 0.55s ease-out forwards; }
#corpse.on .crack:nth-of-type(2) { animation-delay: 0.12s; }
#corpse.on .crack:nth-of-type(3) { animation-delay: 0.22s; }
#corpse.on .crack:nth-of-type(4) { animation-delay: 0.3s; }
#corpse.on .crack:nth-of-type(5) { animation-delay: 0.38s; }
@keyframes crackdraw { to { stroke-dashoffset: 0; } }
#corpse .toetag {
  background: #fff; color: var(--ink); border-radius: 4px; padding: 14px 16px;
  border: 2px solid var(--ink);
  font-family: var(--mono, "Space Mono", monospace); font-size: 13px; line-height: 1.7;
  transform: rotate(-3deg); max-width: 300px; position: relative; z-index: 2;
  box-shadow: 4px 4px 0 rgba(255, 61, 138, 0.7);
}
#corpse .ctitle {
  font-family: "Passion One", sans-serif; font-weight: 700;
  font-size: clamp(3.25rem, 17vw, 6rem); line-height: 0.8; letter-spacing: 0;
  text-align: center; text-transform: uppercase; text-wrap: balance;
  position: relative; z-index: 2;
}
#corpse .csub, #corpse .creboot {
  font-family: var(--mono, "Space Mono", monospace); font-size: 12px; letter-spacing: 1px;
  color: #FF9AC4; text-align: center; position: relative; z-index: 2; max-width: 34ch; line-height: 1.6;
}
#corpse .creboot { color: #22E5A2; font-size: 14px; }

/* ---------------- the field kit (tabbed night dashboard) ----------------
   The night screen is a case folder: a compact clock header, four folder
   tabs, and one body that swaps in place. No long scrolls; the folder
   holds everything. */
.fieldkit { margin-top: 4px; }
.fk-top { text-align: center; margin-bottom: 14px; }
.fk-clock.nighttimer { margin-top: 2px; }
.fk-cover {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  min-height: 48px; padding: 4px 14px 4px 6px; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.fk-cover .k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.26em; color: var(--signal-live); }
.fk-cover b { color: var(--pink-deep); font-weight: 800; }
.fk-cover .peek { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-secondary); }
.fk-cover:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }

.fk-tabs { display: flex; gap: 5px; align-items: flex-end; padding: 0 4px; position: relative; z-index: 2; }
.fk-tab {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 2px 9px; cursor: pointer;
  background: #fff; color: var(--text-secondary); font: inherit;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  border: 2px solid var(--ink); border-bottom: none; border-radius: 10px 10px 0 0;
  position: relative; transition: background 0.15s, color 0.15s;
}
.fk-tab.on {
  background: var(--pink-hot); color: #fff; font-weight: 700;
  min-height: 50px;
}
.fk-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--pink-hot);
}
.fk-tab:focus-visible { outline: 3px solid var(--mpx-blue, #2B6BFF); outline-offset: -3px; }
.fk-tab .bdg {
  position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; font-style: normal;
  line-height: 16px; padding: 0 4px;
}
.fk-tab.on .bdg { background: #fff; color: var(--pink-deep); }
.fk-body {
  background: #fff; border: 3px solid var(--ink); border-radius: 0 12px 12px 12px;
  padding: 14px 14px 16px; min-height: 200px; position: relative; z-index: 1;
  box-shadow: 5px 5px 0 var(--ink);
}
.fk-body .coverstrip { background: var(--surface-recessed); }
.fk-body .coverstrip:first-child, .fk-body .cluefeed:first-child { margin-top: 0; }
.fk-empty { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; padding: 6px 2px; }

/* exhibits: the photo wall inside the folder */
.exgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.expol {
  background: #fff; border-radius: 2px; padding: 4px 4px 14px; cursor: pointer;
  border: 2px solid var(--ink);
  transform: rotate(var(--tilt, -2deg)); position: relative;
  box-shadow: 3px 3px 0 var(--ink);
}
.expol:nth-child(even) { --tilt: 2deg; }
.expol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.expol .tag {
  position: absolute; left: 4px; right: 4px; bottom: 1px; color: var(--ink);
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.08em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.expol:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }

/* suspects: the roster, each row a private read you keep */
.fk-read { font-size: 12.5px; line-height: 1.5; color: var(--pink-deep); margin: 8px 2px 2px; }
.sus-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--ink); border-radius: 12px;
  padding: 10px 12px; margin-top: 8px; color: var(--ink);
  min-height: 56px; transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 3px 3px 0 var(--ink);
}
.sus-row:first-of-type { margin-top: 10px; }
.sus-row .dot { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 2px solid var(--ink); }
.sus-row .dial {
  appearance: none; -webkit-appearance: none; padding: 0; cursor: pointer; position: relative;
  transition: box-shadow 0.18s, border-color 0.18s;
}
/* the ring stays 34px to match the roster medallions; a transparent pad lifts
   the tap target to the 44px minimum without growing the visible dial */
.sus-row .dial::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.sus-row .dial:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }
/* your read, worn as a ring: mint means cleared, pink means heat */
.sus-row[data-heat="clear"] .dial { border-color: var(--signal-live); box-shadow: 0 0 0 2px var(--mint-wash, #DFFBF0); }
.sus-row[data-heat="side"]  .dial { border-color: var(--pink-hot); box-shadow: 0 0 0 2px var(--surface-control-strong); }
.sus-row[data-heat="them"]  .dial { border-color: var(--pink-hot); box-shadow: 0 0 0 3px var(--pink-hot); }
.sus-row[data-heat="clear"] { border-color: var(--signal-live); box-shadow: 3px 3px 0 var(--signal-live); }
.sus-row[data-heat="them"]  { border-color: var(--pink-hot); box-shadow: 3px 3px 0 var(--pink-hot); }
.sus-row[data-heat="clear"] .who b { opacity: 0.62; }
/* a burner note on file: a small dot on the dial */
.sus-row[data-note="1"] .dial::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--signal-live-bright); border: 1.5px solid var(--ink);
}
.sus-row .who {
  appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0;
  min-width: 0; flex: 1; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.sus-row .who:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 3px; border-radius: 4px; }
.sus-row .who b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sus-row .who span { display: block; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sus-row .met { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--signal-live); flex: none; letter-spacing: 0.08em; }
.sus-row .yo { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--signal-live); border: 1px solid var(--signal-live); border-radius: 4px; padding: 2px 5px; flex: none; }

/* the read editor inside the dossier sheet */
.readblk { border-top: 2px dashed rgba(23, 16, 43, 0.3); padding-top: 12px; margin-top: 4px; }
.heatset { display: flex; gap: 6px; margin: 8px 0 10px; }
.hset {
  flex: 1; min-height: 44px; padding: 6px 4px; cursor: pointer;
  background: #fff; color: var(--text-secondary); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.09em; border: 2px solid var(--ink); border-radius: 8px;
  appearance: none; -webkit-appearance: none; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 2px 2px 0 var(--ink);
}
.hset:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 2px; }
.hset.on.h-side  { color: var(--ink); background: var(--surface-control-strong); font-weight: 700; }
.hset.on.h-them  { color: #fff; background: var(--action-primary); font-weight: 700; }
.hset.on.h-clear { color: var(--ink); background: var(--signal-live-bright); font-weight: 700; }
.burner {
  width: 100%; box-sizing: border-box; resize: none; background: #fff;
  border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); font: inherit;
  font-size: 13.5px; line-height: 1.45; padding: 10px 12px;
}
.burner::placeholder { color: var(--text-quiet); }
.burner:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 1px; }

/* ---------------- Mullet vector language ----------------
   One hooked line, one dossier corner, one currentColor system. */
.mp-icon, .mp-mark, .mp-spot { display: block; flex: none; color: inherit; }
.mp-icon { width: 1.2em; height: 1.2em; }
.mp-mark { width: 2.5em; height: 2em; }
.mp-spot { width: 100%; height: auto; }

#chrome .brand,
.classified-icon,
.icon-label {
  display: inline-flex; align-items: center; gap: 7px;
}
.chrome-mark { width: 25px; height: 20px; color: var(--pink-hot); }
.title-mark {
  position: absolute; z-index: 1; right: 8px; top: 30px;
  width: clamp(48px, 15vw, 68px); height: auto; color: var(--pink-hot); opacity: 0.9;
  transform: rotate(7deg);
}
.sidecase { grid-template-columns: 25px auto 1fr; }
.sidecase-icon { grid-row: 1 / 3; width: 23px; height: 23px; color: var(--pink-light); }
.sidecase-k { grid-row: 1 / 3; }
.unknown-icon { width: 31px; height: 31px; color: var(--mint); }
.host-icon { display: inline-block; width: 15px; height: 15px; margin-left: 4px; color: var(--mint); vertical-align: -3px; }
#alert .appicon .alert-mark { width: 20px; height: 17px; color: var(--paper); }

.world-fallback {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9;
  color: var(--pink-deep); background: var(--surface-control-strong); overflow: hidden;
}
.world-spot { width: 94%; height: 94%; opacity: 0.88; }
.world-shot img {
  position: absolute; z-index: 1; left: 5px; top: 5px; width: calc(100% - 10px);
}
.world-shot.has-art .world-fallback { visibility: hidden; }
.world-shot--exit .world-fallback { aspect-ratio: 16 / 7; }

.vector-empty {
  display: grid; justify-items: center; gap: 6px; padding: 14px 10px;
  color: var(--mint); text-align: center;
}
.vector-empty .empty-spot { width: min(132px, 48vw); opacity: 0.72; }
.vector-empty p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; }
.wire-empty-spot { width: 112px; margin: 0 auto 6px; color: var(--pink-deep); opacity: 0.78; }
.wd-empty { text-align: center; }

.coverstrip {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; column-gap: 9px;
}
.coverstrip .strip-icon { grid-column: 1; grid-row: 1 / 3; color: var(--mint); }
.coverstrip .strip-icon .mp-icon { width: 28px; height: 28px; }
.coverstrip .k, .coverstrip > b { grid-column: 2; }
.coverstrip .peek { grid-column: 3; grid-row: 1 / 3; float: none; margin: 0; }
.classified-icon .mp-icon { width: 16px; height: 16px; color: var(--pink-deep); }
.icon-label .mp-icon { width: 17px; height: 17px; color: var(--mint); }

.fk-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding-top: 5px; padding-bottom: 6px; font-size: 10px;
}
.fk-tab .tab-icon { width: 18px; height: 18px; color: var(--muted); }
.fk-tab.on .tab-icon { color: var(--pink-light); }
.mp-duel-target { color: var(--pink-light); opacity: 0.82; }

/* the wire tab: pair rows on the dark, dotted leaders like the dump */
.fk-wire { margin-top: 10px; }
.fkw-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed rgba(23, 16, 43, 0.25); }
.fkw-row .names { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkw-row .lead { flex: 1; border-bottom: 1px dotted rgba(23, 16, 43, 0.35); transform: translateY(-3px); min-width: 12px; }
.fkw-row .n { font-family: var(--mono); font-size: 12px; color: var(--pink-deep); font-weight: 700; }
.fkw-row .sus { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; color: #fff; background: var(--action-primary); border: 1px solid var(--ink); border-radius: 3px; padding: 2px 5px; transform: rotate(-2deg); }
.fkw-row .noted { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--signal-live); border: 1px solid var(--signal-live); border-radius: 3px; padding: 2px 5px; }

/* ---------------- the agent card (docs/13) ---------------- */
.cred-dock { text-align: left; }
.cred-dock .facp { margin: 6px 0 12px; }
.cred-dock .btn { width: 100%; margin-top: 8px; }
.cred-dock .btnrow .btn { width: auto; margin-top: 0; }
.cred-stage { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.cred-stage .btn { width: auto; margin-top: 0; flex: 0 0 auto; }
.cred-photo {
  width: 96px; height: 128px; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--teal-800); flex: 0 0 auto; display: block;
}
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cn-chip {
  border: 2px solid var(--teal-800); border-radius: 999px; background: transparent;
  color: var(--teal-800); font: 700 12px/1 "Space Mono", monospace;
  letter-spacing: 0.04em; padding: 10px 12px; min-height: 44px; cursor: pointer;
}
.cn-chip.on { background: var(--hot, #FF3D8A); border-color: var(--hot, #FF3D8A); color: #fff; }
.pers-strip { display: flex; align-items: center; gap: 14px; }
.pers-strip--peek { margin-bottom: 16px; }
.cred-name { font-family: "Passion One", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.02em; margin-top: 6px; }
.pers-photo {
  width: 56px; height: 74px; object-fit: cover; border-radius: 8px;
  border: 2px solid var(--teal-800); flex: 0 0 auto; display: block;
}
.pers-photo--empty {
  display: grid; place-items: center; background:
    repeating-linear-gradient(45deg, rgba(23, 16, 43, 0.1) 0 6px, rgba(23, 16, 43, 0.02) 6px 12px);
  color: var(--teal-800); font: 700 26px/1 "Passion One", sans-serif;
}
span.cred-photo.pers-photo--empty { width: 96px; height: 128px; font-size: 44px; }

/* the wallet rows in SUSPECTS */
.sus-row .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sus-row .who-lines { min-width: 0; }
.sus-row .who-lines b, .sus-row .who-lines span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wface {
  width: 34px; height: 44px; border-radius: 6px; flex: 0 0 auto;
  border: 2px solid var(--teal-800); object-fit: cover; display: block;
}
.wface--empty { display: grid; place-items: center; font: 700 16px/1 "Passion One", sans-serif; color: var(--teal-800);
  background: repeating-linear-gradient(45deg, rgba(23, 16, 43, 0.1) 0 5px, rgba(23, 16, 43, 0.02) 5px 10px); }
.wface--x {
  background: repeating-linear-gradient(-45deg, rgba(23, 16, 43, 0.22) 0 5px, transparent 5px 10px);
  opacity: 0.75;
}

/* the debrief flip */
.debrief { text-align: center; margin-top: 26px; }
.flipwrap { perspective: 1200px; width: min(300px, 80vw); margin: 14px auto 4px; }
.flipcard {
  position: relative; width: 100%; aspect-ratio: 3 / 4.3;
  transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
}
.flipcard.flipped { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .flipcard { transition: none; } }
.flipcard .face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; border: 3px solid var(--teal-800); background: var(--teal-50);
  color: var(--teal-800); padding: 16px 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; overflow: hidden;
}
.flipcard .face--back { transform: rotateY(180deg); }
.df-spine { font: 700 10px/1 "Space Mono", monospace; letter-spacing: 0.14em; opacity: 0.7; margin-bottom: 10px; }
.df-photo { width: 130px; height: 172px; object-fit: cover; border-radius: 10px; border: 2px solid var(--teal-800); margin: 4px auto 10px; }
span.df-photo.pers-photo--empty { display: grid; font-size: 60px; }
.df-agent { font-family: "Passion One", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.02em; }
.df-cover { font: 700 11px/1.4 "Space Mono", monospace; opacity: 0.75; margin-top: 4px; }
.df-issued { margin-top: auto; }
.df-row {
  width: 100%; display: flex; justify-content: space-between; gap: 8px;
  font: 700 11px/1.5 "Space Mono", monospace; text-align: left;
  border-bottom: 1px solid rgba(23, 16, 43, 0.2); padding: 6px 0;
}
.df-verdict { font: 700 12px/1.5 "Space Mono", monospace; margin-top: 10px; text-align: left; }
.df-stamp {
  margin-top: auto; align-self: center; transform: rotate(-5deg);
  border: 3px solid var(--hot, #FF3D8A); color: var(--hot, #FF3D8A);
  font-family: "Passion One", sans-serif; font-size: 20px; padding: 6px 12px; letter-spacing: 0.04em;
}
.exportview img { display: block; max-width: min(320px, 82vw); margin: 12px auto; border-radius: 12px; border: 2px solid var(--teal-800); }

/* ---------------- the six powers (phase 4b) ---------------- */
/* the roast's five word slots */
.fw-slots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.fw-slot {
  width: 48px; height: 56px; border-radius: 10px;
  border: 2px dashed var(--border-strong); background: transparent;
  color: var(--text-secondary); font: 400 22px/1 "Passion One", sans-serif;
  cursor: pointer;
}
.fw-slot.said {
  border-style: solid; border-color: var(--action-primary);
  background: var(--action-primary); color: var(--text-on-action);
}
.fw-stamp {
  margin: 14px auto 0; width: max-content; transform: rotate(-4deg);
  border: 3px solid var(--action-primary); color: var(--action-primary);
  font-family: "Passion One", sans-serif; font-size: 22px; letter-spacing: 0.04em;
  padding: 6px 14px;
}

/* the will: four point font and the scrawl */
.will-doc {
  background: var(--surface-paper); color: #17102B;
  font-family: "Space Mono", monospace; font-size: 4px; line-height: 1.7;
  border-radius: 10px; border: 2px solid var(--border-strong);
  padding: 14px; margin-top: 14px; letter-spacing: 0.02em;
  transition: font-size 0.15s ease;
}
#sigPad {
  display: block; width: 100%; max-width: 320px; height: 140px;
  margin: 8px auto 0; background: var(--surface-paper);
  border-radius: 10px; border: 2px solid var(--border-strong);
  touch-action: none;
}

/* the tab: line items that toast or strike */
.tab-doc {
  background: var(--surface-paper); border-radius: 10px;
  border: 2px solid var(--border-strong); margin-top: 14px; overflow: hidden;
}
.tab-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; min-height: 44px; background: transparent; border: 0;
  border-bottom: 1px dashed rgba(23, 16, 43, 0.25); cursor: pointer;
  color: #17102B; font: 700 11px/1.4 "Space Mono", monospace; text-align: left;
}
.tab-row:last-child { border-bottom: 0; }
.tab-row .tr-mark {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(23, 16, 43, 0.4);
}
.tab-row[data-state="t"] .tr-mark { background: var(--signal-live); border-color: var(--signal-live); }
.tab-row[data-state="d"] .tr-mark { background: var(--action-pressed); border-color: var(--action-pressed); }
.tab-row[data-state="d"] .tr-text { text-decoration: line-through; text-decoration-color: var(--action-pressed); text-decoration-thickness: 2px; }

/* the slow exit: quiet landing, silver hardware */
.landing--quiet { box-shadow: none; border-color: rgba(23, 16, 43, 0.35); }
.lnd-stripe, #lylaStripe {
  background: linear-gradient(100deg, transparent 12%, rgba(110, 104, 128, 0.55) 38%, rgba(74, 68, 88, 0.85) 50%, rgba(110, 104, 128, 0.55) 62%, transparent 88%);
}
.lnd-stripe { height: 6px; border-radius: 3px; margin: 10px auto; width: 78%; }
#lylaStripe {
  position: fixed; top: calc(var(--pad-top) + 2px); left: 0; right: 0; height: 4px;
  z-index: 220; pointer-events: none; opacity: 0.8;
}