/* === parley screens — RESPONSIVE (2026-06-09) ===
   Reworked from the fixed 393x852 scale-to-fit canvas to a true responsive layout. The stage now
   IS the viewport (capped + centred), text is sized in fluid clamp() tokens that never shrink below
   a legibility floor and that the user can scale app-wide via the Text-size control, and each screen
   flows/distributes over the real viewport instead of being uniformly downscaled. The interview
   screen is still fluid full-bleed and lives in styles.css. DDR: design/ddr-mobile-responsive-sizing.md */

/* ---- Fluid type scale. One source of truth. Every token is multiplied by --read-scale (the
   Text-size control), so S/M/L resizes ALL screen text. Floors keep nothing below ~11px. ---- */
:root {
  --read-scale: 1;
  --ts-mega:  calc(clamp(48px, 16vw, 76px) * var(--read-scale));  /* PARLEY title */
  --ts-h1:    calc(clamp(28px, 8.4vw, 38px) * var(--read-scale)); /* screen titles */
  --ts-h2:    calc(clamp(22px, 6.4vw, 28px) * var(--read-scale)); /* warrant name, board title */
  --ts-lede:  calc(clamp(15.5px, 4.4vw, 18px) * var(--read-scale));/* italic scene/hook lines */
  --ts-body:  calc(clamp(14px, 3.9vw, 16px) * var(--read-scale));  /* report values, epilogue, dialogue */
  --ts-label: calc(clamp(12px, 3.3vw, 13.5px) * var(--read-scale));/* field keys, role captions */
  --ts-meta:  calc(clamp(11px, 3vw, 12.5px) * var(--read-scale));  /* kickers, footers, fine print */
  --ts-stamp: calc(clamp(12px, 3.4vw, 14px) * var(--read-scale));  /* rubber-stamp text */
}

/* ---- Stage: fills the real viewport (capped + centred on big screens), no transform downscale. ---- */
.pscreen { position: fixed; inset: 0; z-index: 5; background: #0d0b07; overflow: hidden; display: grid; place-items: center; }
.pstage { position: relative; width: min(100vw, 460px); height: 100vh; height: 100svh; flex: none; overflow: hidden; background: #0d0b07; }

/* Home button — escape to the main menu from any screen (case auto-persists). */
.home-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,0.4); cursor: pointer; padding: 0; }
.home-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--brass-dim); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-btn:hover { border-color: var(--brass); }
.home-btn:hover svg { stroke: var(--brass); }
.home-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.rs-home { position: absolute; right: 14px; top: 10px; z-index: 3; }
.ax-home { position: absolute; right: 14px; top: 12px; z-index: 3; }
.iv-hud .home-btn { width: 40px; height: 40px; flex-shrink: 0; background: rgba(0,0,0,0.35); }

/* Shared atmosphere layers. */
.ps-fill { position: absolute; inset: 0; pointer-events: none; }
.ps-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  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"); }

/* ============================ MAIN MENU ============================ */
#menu-view .pstage { background: #0d0b07; }
.menu-hero { position: absolute; inset: 0; background: url("/images/menu-hero.webp") center/cover no-repeat; }
.menu-top-scrim { position: absolute; left: 0; top: 0; right: 0; height: 18%; background: linear-gradient(180deg, #0d0b07cc, #0d0b0700); pointer-events: none; }
.menu-bot-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; background: linear-gradient(180deg, #0d0b0700 0%, #0d0b0773 28%, #0d0b07e6 56%, #0d0b07ff 84%); pointer-events: none; }
.menu-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 98% at 50% 40%, #00000000 45%, #000000c4 100%); }
.menu-kicker { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; margin: 0 0 3px; }
.menu-content { position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 52px); padding: 0 clamp(20px, 6vw, 28px); display: flex; flex-direction: column; gap: clamp(16px, 3.4vh, 24px); }
.menu-info { display: flex; flex-direction: column; gap: 8px; }
.menu-caseline { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: var(--brass); }
.menu-title { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-mega); letter-spacing: 0.03em; line-height: 0.95; color: var(--ink); margin: 0; }
.menu-tagline { font-family: var(--font-read); font-style: normal; font-size: var(--ts-lede); line-height: 1.4; color: var(--ink-soft); margin: 0; }
.menu-nav { display: flex; flex-direction: column; gap: 11px; }
.menu-begin { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 14px 0; border-radius: 8px; border: none; background: var(--brass); cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-body); letter-spacing: 0.1em; color: #1a1306; }
.menu-begin:hover { filter: brightness(1.08); }
.menu-continue { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 0; border-radius: 8px; border: 1px solid #8a6f2e; background: transparent; cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-label); letter-spacing: 0.08em; color: var(--ink-soft); }
.menu-continue:hover { border-color: var(--brass); color: var(--ink); }
.menu-subnav { display: flex; justify-content: space-between; gap: 8px; margin-top: clamp(5px, 1.4vh, 12px); }
.menu-subnav button { flex: 1; min-height: 44px; background: none; border: 1px solid transparent; cursor: pointer; font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.12em; color: #9a8f78; padding: 6px 2px; border-radius: 6px; }
.menu-subnav button:hover { color: var(--ink); border-color: var(--border); }
.menu-footer { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.06em; color: #6a6149; }

/* ============================ ROSTER — corkboard (responsive flow) ============================ */
.rs-lamp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 60% at 50% 14%, #42351c66, #42351c00 70%); }
.rs-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 96% at 50% 44%, #00000000 42%, #000000c4 100%); }
.rs-head { position: absolute; left: 0; right: 0; top: 0; padding: clamp(38px, 5.5vh, 52px) clamp(18px, 5vw, 22px) 0; }
.rs-kicker { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: var(--brass); margin: 0; }
.rs-title { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h1); letter-spacing: 0.03em; color: var(--ink); margin: 2px 0 0; }
.rs-tagline { width: min(232px, 62%); font-family: var(--font-jbmono); font-size: var(--ts-meta); line-height: 1.5; color: var(--ink-soft); margin: 6px 0 0; }
.rs-stamp-case { position: absolute; right: clamp(16px, 5vw, 22px); top: clamp(40px, 5.5vh, 54px); display: flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 9px 6px; border: 2px solid #8a6f2e; border-radius: 3px; transform: rotate(-7deg); opacity: 0.9; }
.rs-stamp-case .cw { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.14em; color: #8a6f2e; }
.rs-stamp-case .cn { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-stamp); letter-spacing: 0.08em; color: #8a6f2e; }
.rs-qlabel { font-family: var(--font-jbmono); font-size: var(--ts-label); letter-spacing: 0.16em; color: var(--ink-soft); margin: 10px 0 0; }
/* Cards area — flows the tilted polaroids, fills the middle, scrolls only if a short viewport forces it. */
#roster-view #cards { position: absolute; left: 0; right: 0; top: clamp(150px, 21vh, 184px); bottom: clamp(62px, 9vh, 80px); display: flex; flex-wrap: wrap; align-content: safe center; justify-content: center; gap: clamp(10px, 3vw, 18px); padding: 6px clamp(14px, 5vw, 22px); overflow-y: auto; }
/* Polaroid (a witness card) — uniform size, hand-tilted, real portrait webp. Pin + stamp live inside it. */
.rs-pol { position: relative; flex: 0 0 auto; width: clamp(120px, 39%, 152px); display: flex; flex-direction: column; gap: 9px; padding: 7px 7px 10px; background: #e6ddca; border: none; border-radius: 2px; cursor: pointer; box-shadow: 0 5px 14px #000000bb; transform: rotate(var(--rot, 0deg)); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease; }
.rs-pol::before { content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8d2c4, #2b2620); border: 1px solid #4a4338; box-shadow: 0 2px 3px #00000099; }
.rs-pol-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 1px; object-fit: cover; object-position: 50% 12%; background: #20190f; display: block; }
.rs-pol-cap { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.rs-pol-name { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-label); letter-spacing: 0.02em; color: #241c0f; margin: 0; }
.rs-pol-role { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.06em; color: #6b5d3f; margin: 0; }
/* Rollover: the card straightens, lifts, and gilds — a clear "pick me" (2026-07-11). */
.rs-pol:hover, .rs-pol:focus-visible { transform: rotate(0deg) translateY(-8px) scale(1.04); box-shadow: 0 14px 30px #000000dd, 0 0 0 2px var(--brass); z-index: 2; }
.rs-pol:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
/* Select: the chosen card lunges toward you as you step into the room (pairs with the interview lamp-swing). */
html:not([data-reduce="1"]) .rs-pol-picked { animation: rs-pick 0.4s cubic-bezier(0.3, 0.9, 0.4, 1) forwards; z-index: 3; }
@keyframes rs-pick {
  0% { transform: rotate(var(--rot, 0deg)); }
  35% { transform: rotate(0deg) translateY(-10px) scale(1.06); }
  100% { transform: rotate(0deg) translateY(-2px) scale(1.14); opacity: 0.55; }
}
/* Momentum rubber-stamp — sits over the lower edge of the photo, own tilt, colour-coded. */
.rs-stamp { position: absolute; right: -4px; top: calc(6px + 48%); padding: 4px 9px; border-radius: 3px; background: #120d08e6; transform: rotate(-8deg); opacity: 0.96; pointer-events: none; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-meta); letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid #7d7460; color: #7d7460; }
.rs-stamp[data-state="Stable"] { border-color: #7fc995; color: #7fc995; }
.rs-stamp[data-state="Guarded"] { border-color: #9fb6d2; color: #9fb6d2; }
.rs-stamp[data-state="Pressured"] { border-color: #e6b84e; color: #e6b84e; }
.rs-stamp[data-state="Cracking"] { border-color: #f0897c; color: #f0897c; }
/* Accuse bar — the quiet, irreversible boundary, anchored to the bottom. */
.rs-accuse { position: absolute; left: clamp(16px, 5vw, 22px); right: clamp(16px, 5vw, 22px); bottom: clamp(14px, 2.4vh, 20px); min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; background: #16120b; border: 1px solid #3a3326; border-radius: 9px; cursor: pointer; }
.rs-accuse:hover { border-color: #8a6f2e; }
.rs-accuse .al { font-family: var(--font-jbmono); font-size: var(--ts-label); color: #b6ab93; }
.rs-accuse .aa { font-family: var(--font-jbmono); font-size: var(--ts-body); color: var(--brass); }

/* ============================ COLD-OPEN — case file ============================ */
#prelude-view { max-width: none; margin: 0; padding: 0; animation: none; }
.co-lamp { position: absolute; left: 0; top: 0; right: 0; height: 40%; pointer-events: none; background: radial-gradient(110% 72% at 50% 0%, #42351c4d, #42351c00 70%); }
.co-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 100% at 50% 42%, #00000000 42%, #000000cc 100%); }
.co-tab { position: absolute; left: clamp(28px, 9vw, 40px); top: clamp(20px, 3vh, 32px); padding: 5px 14px 7px; background: #2a2418; border-radius: 5px 5px 0 0; font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.12em; color: var(--brass); z-index: 1; }
.co-folder { position: absolute; left: clamp(12px, 3.5vw, 16px); right: clamp(12px, 3.5vw, 16px); top: clamp(46px, 6vh, 58px); bottom: clamp(14px, 2.4vh, 22px); padding: clamp(14px, 3.6vw, 20px); display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(9px, 1.7vh, 14px); background: #1c1810; border: 1px solid #3a3326; border-radius: 4px; box-shadow: 0 8px 26px #000000bb; overflow-y: auto; }
.co-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.co-dept { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.12em; color: #8a6f2e; }
.co-disp { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #7d7460; }
.co-title { font-family: var(--font-oswald); font-weight: 700; font-size: calc(clamp(24px, 6.8vw, 31px) * var(--read-scale)); letter-spacing: 0.02em; line-height: 1; color: var(--ink); margin: 0; }
.co-div { height: 1px; background: #3a3326; }
/* Scene band stacks vertically: a wide paperclipped crime-scene photo over a FULL-WIDTH report.
   The old side-by-side (polaroid + ~150px report column) squeezed values into ragged 1-2-word
   lines and truncated them at 360px — see DDR CO-1. */
.co-band { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 14px); }
.co-scene { position: relative; align-self: center; width: min(100%, 318px); padding: 7px 7px 9px; background: #e6ddca; border-radius: 2px; transform: rotate(-1.2deg); box-shadow: 0 5px 16px #000000aa; }
.co-scene-photo { width: 100%; height: clamp(112px, 18vh, 152px); border-radius: 1px; object-fit: cover; object-position: 50% 34%; display: block; background: #20190f; }
.co-scene-cap { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #2a2012; margin: 6px 2px 0; }
.co-clip { position: absolute; left: 50%; top: -13px; margin-left: -7px; width: 14px; height: 34px; border-radius: 6px; border: 2px solid #b3a784; transform: rotate(-4deg); }
.co-report { display: flex; flex-direction: column; gap: clamp(7px, 1.5vh, 11px); }
.co-row { display: flex; gap: 12px; align-items: baseline; }
.co-k { flex: none; width: clamp(46px, 14vw, 56px); font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.06em; color: var(--brass); }
.co-v { flex: 1; min-width: 0; font-family: var(--font-jbmono); font-size: var(--ts-body); line-height: 1.5; color: var(--ink); margin: 0; }
.co-hook { font-family: var(--font-read); font-style: normal; font-size: var(--ts-lede); line-height: 1.45; color: var(--ink); margin: 0; }
.co-kh { display: flex; flex-direction: column; gap: 8px; }
.co-kh-label { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: #7d7460; }
.co-avatars { display: flex; justify-content: space-between; gap: 6px; }
.co-av { width: clamp(40px, 11.5vw, 50px); height: clamp(40px, 11.5vw, 50px); border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 1px solid #3a3326; background: #20190f; }
.co-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-sl { display: flex; gap: 7px; align-items: center; }
.co-sk { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #8a6f2e; }
.co-sv { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #f0897c; }
.co-assigned { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #7d7460; }
/* BEGIN pins to the folder's bottom edge (margin-top:auto) when content is short, and scrolls into
   view at the end on very short phones — no gradient overlay so the key-holders row is never hidden. */
.co-cta { display: flex; justify-content: center; padding-top: clamp(6px, 1.4vh, 12px); margin-top: auto; }
.co-begin { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 14px 34px; border-radius: 8px; background: var(--brass); border: none; cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-body); letter-spacing: 0.1em; color: #1a1306; }
.co-begin:hover { filter: brightness(1.08); }

/* ============================ ACCUSATION ============================ */
.ax-lamp { position: absolute; left: 0; top: 0; right: 0; height: 38%; pointer-events: none; background: radial-gradient(100% 70% at 50% 0%, #42351c4d, #42351c00 70%); }
.ax-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 100% at 50% 40%, #00000000 42%, #000000c8 100%); }
.ax-col { position: absolute; inset: 0; padding: clamp(44px, 6vh, 56px) clamp(16px, 5vw, 22px) clamp(16px, 2.6vh, 24px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 2.2vh, 18px); overflow-y: auto; }
.ax-head { display: flex; flex-direction: column; gap: 6px; }
.ax-back2 { align-self: flex-start; min-height: 40px; background: none; border: none; cursor: pointer; padding: 4px 0; font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.12em; color: var(--ink-soft); }
.ax-back2:hover { color: var(--ink); }
.ax-kicker { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: var(--brass); }
.ax-title2 { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h1); letter-spacing: 0.03em; color: var(--ink); margin: 0; }
.ax-rule { width: 56px; height: 2px; background: var(--brass); }
.ax-pick { display: flex; flex-direction: column; gap: 13px; }
.ax-picklabel, .ax-evlabel { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: #7d7460; }
.ax-lineup { display: flex; justify-content: space-between; gap: 6px; }
.ax-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 19%; min-width: 56px; background: none; border: none; cursor: pointer; padding: 0; opacity: 0.45; transition: opacity 0.15s; }
.ax-chip[aria-pressed="true"] { opacity: 1; }
.ax-chip-photo { width: 100%; aspect-ratio: 5 / 6; border-radius: 2px; object-fit: cover; object-position: 50% 12%; border: 1px solid #3a3326; background: #20190f; }
.ax-chip[aria-pressed="true"] .ax-chip-photo { border: 2px solid var(--brass); }
.ax-chip-nm { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-meta); letter-spacing: 0.03em; color: #7d7460; text-align: center; }
.ax-chip[aria-pressed="true"] .ax-chip-nm { color: var(--brass); }
.ax-warrant { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #16120b; border: 1px solid #3a3326; border-radius: 3px; }
.ax-warrant.empty { justify-content: center; min-height: 88px; }
.ax-warrant-empty { font-family: var(--font-jbmono); font-size: var(--ts-label); color: #9a8f78; text-align: center; }
.ax-accused-photo { flex: none; width: clamp(78px, 24vw, 96px); display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 8px; background: #e6ddca; border-radius: 2px; transform: rotate(-2deg); box-shadow: 0 4px 12px #000000aa; }
.ax-accused-photo img { width: 100%; aspect-ratio: 9 / 10; object-fit: cover; object-position: 50% 12%; border-radius: 1px; background: #20190f; }
.ax-accused-cap { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #2a2012; margin: 0; }
.ax-wtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ax-wlabel { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: #7d7460; }
.ax-wname { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h2); letter-spacing: 0.02em; line-height: 1; color: var(--ink); margin: 0; }
.ax-wrole { font-family: var(--font-read); font-style: normal; font-size: var(--ts-label); line-height: 1.35; color: var(--ink-soft); margin: 0; }
.ax-proof-block { display: flex; flex-direction: column; gap: 13px; }
.ax-evrow { display: flex; flex-wrap: wrap; gap: clamp(12px, 4vw, 16px); justify-content: center; }
.ax-evrow .ev-empty { font-family: var(--font-jbmono); font-size: var(--ts-label); line-height: 1.5; color: #9a8f78; font-style: italic; text-align: center; }
.ax-ev { width: clamp(96px, 30%, 112px); display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 7px; background: #e6ddca; border: 2px solid transparent; border-radius: 2px; box-shadow: 0 4px 10px #000000aa; cursor: pointer; }
.ax-ev[aria-pressed="true"] { border-color: var(--brass); }
.ax-ev:nth-child(3n+1) { transform: rotate(-3deg); }
.ax-ev:nth-child(3n+2) { transform: rotate(2deg); }
.ax-ev:nth-child(3n) { transform: rotate(-2deg); }
.ax-ev-thumb { position: relative; aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; background: #20190f; border-radius: 1px; overflow: hidden; }
.ax-ev-thumb svg { width: 32px; height: 32px; color: #8a6f2e; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ax-ev-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #8a6f2e; }
.ax-ev-dot.crack { background: #7fc995; }
.ax-ev-dot.contradiction { background: #f0897c; }
.ax-ev-cap { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.04em; color: #2a2012; text-align: center; margin: 0; }
.ax-footer { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ax-warn { max-width: 345px; font-family: var(--font-jbmono); font-size: var(--ts-label); line-height: 1.5; color: #9a8f78; text-align: center; margin: 0; }
.ax-accuse-btn { min-height: 50px; padding: 14px 30px; border-radius: 8px; background: var(--brass); border: none; cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-body); letter-spacing: 0.1em; color: #1a1306; }
.ax-accuse-btn:hover { filter: brightness(1.08); }
.ax-accuse-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.ax-unsolved { min-height: 44px; background: none; border: none; cursor: pointer; font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.04em; color: #9a8f78; text-decoration: underline; }
.ax-unsolved:hover { color: var(--ink-soft); }

/* ============================ ENDING ============================ */
#ending-view { max-width: none; margin: 0; padding: 0; }
.en-lamp { position: absolute; left: 0; top: 0; right: 0; height: 35%; pointer-events: none; background: radial-gradient(100% 70% at 50% 0%, #2e3a2459, #2e3a2400 70%); }
.en-lamp[data-ending="wrong_arrest"] { background: radial-gradient(100% 70% at 50% 0%, #3a2424a6, #3a242400 70%); }
.en-lamp[data-ending="unsolved"] { background: radial-gradient(100% 70% at 50% 0%, #2a261c80, #2a261c00 70%); }
.en-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 100% at 50% 42%, #00000000 42%, #000000c8 100%); }
.en-stamp { position: absolute; right: clamp(16px, 6vw, 28px); top: clamp(44px, 6vh, 56px); display: flex; flex-direction: column; align-items: center; padding: 5px 9px 6px; border: 2px solid #7fc995; border-radius: 3px; transform: rotate(-8deg); opacity: 0.9; z-index: 1; }
.en-stamp .s1, .en-stamp .s2 { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-stamp); letter-spacing: 0.14em; color: #7fc995; }
.en-stamp .s2 { letter-spacing: 0.08em; }
.en-col { position: absolute; inset: 0; padding: clamp(42px, 5.5vh, 52px) clamp(18px, 5vw, 22px) clamp(18px, 2.6vh, 26px); display: flex; flex-direction: column; overflow-y: auto; }
.en-kicker { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: var(--brass); margin: 0; }
.en-title { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h1); letter-spacing: 0.03em; color: var(--ink); margin: 6px 0 0; }
.en-rule { width: 56px; height: 2px; background: var(--brass); margin: 14px 0 0; }
.en-epilogue { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; }
.en-epilogue p { font-family: var(--font-read); font-style: normal; font-size: var(--ts-body); line-height: 1.5; color: var(--ink-soft); margin: 0; }
.en-epilogue p.lede { font-size: var(--ts-lede); color: var(--ink); }
.en-vlabel { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h2); letter-spacing: 0.06em; color: var(--ink); margin: 26px 0 0; }
.en-vsub { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.04em; line-height: 1.4; color: #9a8f78; margin: 8px 0 0; }
.en-vgrid { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; align-self: center; }
.en-vrow { display: flex; gap: 4px; align-items: center; }
.en-vcorner { flex: none; width: 36px; height: 30px; }
.en-vcolav, .en-vrowav { flex: none; display: flex; align-items: center; justify-content: center; }
.en-vcolav { width: 58px; height: 30px; }
.en-vrowav { width: 36px; height: 44px; }
.en-vav { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; border: 1px solid #3a3326; background: #20190f; }
.en-vcell { flex: none; width: 58px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 2px; border: 1px solid #2a241855; font-family: var(--font-jbmono); font-size: var(--ts-body); }
.en-vcell.self { background: #0e0b07; }
.en-vcell.positive { background: #1b3324; color: #7fc995; }
.en-vcell.negative { background: #33201c; color: #f0897c; }
.en-vcell.complex { background: #22303d; color: #9fb6d2; }
.en-vcell.neutral { background: #1a160f; color: #7d7460; }
.en-vcell.cascade { border: 2px solid var(--brass); color: var(--brass); }

/* Verdict stamp-slam (Pulp) + valence cascade reveal (Pulp) — 2026-07-11. Motion-on default,
   reduce-gated via html[data-reduce="1"]. Only transform/opacity/filter animate. */
@keyframes en-stamp-slam {
  0% { transform: rotate(-22deg) scale(2.4); opacity: 0; }
  45% { opacity: 1; }
  60% { transform: rotate(-4deg) scale(0.86); }
  100% { transform: rotate(-8deg) scale(1); opacity: 0.9; }
}
html:not([data-reduce="1"]) .en-stamp.slam { animation: en-stamp-slam 0.34s cubic-bezier(0.34, 1.3, 0.5, 1) both; }
@keyframes en-lampflash { 0%, 100% { opacity: 1; } 30% { opacity: 1.6; } }
html:not([data-reduce="1"]) .en-lamp.flash { animation: en-lampflash 0.4s ease both; }

@keyframes en-cell-in { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes en-cell-zap {
  0%, 55% { box-shadow: 0 0 0 0 rgba(205, 163, 73, 0); filter: brightness(1); }
  68% { box-shadow: 0 0 14px 3px var(--brass); filter: brightness(1.9); }
  100% { box-shadow: 0 0 5px 0 rgba(205, 163, 73, 0.35); filter: brightness(1); }
}
html:not([data-reduce="1"]) #en-grid.reveal .en-vcell { animation: en-cell-in 0.34s cubic-bezier(0.34, 1.5, 0.5, 1) both; }
html:not([data-reduce="1"]) #en-grid.reveal .en-vcell.cascade { animation: en-cell-in 0.34s cubic-bezier(0.34, 1.5, 0.5, 1) both, en-cell-zap 0.7s ease forwards; }
.en-legend { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.en-lg { display: flex; align-items: center; gap: 5px; }
.en-lg .sym { font-family: var(--font-jbmono); font-size: var(--ts-label); }
.en-lg .lab { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.04em; color: #9a8f78; }
.en-newwrap { display: flex; justify-content: center; margin: auto 0 0; padding-top: 18px; }
.en-new { min-height: 48px; padding: 12px 26px; border-radius: 8px; background: transparent; border: 1px solid var(--brass); cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-label); letter-spacing: 0.1em; color: var(--brass); }
.en-new:hover { background: rgba(205,163,73,0.1); }

/* ============================ BOARD overlay reskin ============================ */
.board-sheet { border-top: 3px solid var(--brass-dim); }
.bd-head { align-items: flex-start; }
.bd-kicker { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: var(--brass); margin: 0 0 4px; }
.bd-title { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h2); letter-spacing: 0.06em; color: var(--ink); margin: 0; }
.bd-tip { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.02em; line-height: 1.45; color: #9a8f78; margin: 0 0 12px; }
#board-overlay .corkboard {
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(66,53,28,0.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.16) 0 2px, rgba(0,0,0,0.10) 2px 4px),
    #100d09;
  border-color: #2a2418; }
#board-overlay .board-card { background: #e6ddca; border: none; border-top: none; border-radius: 2px; padding: 8px 10px 10px; box-shadow: 0 4px 12px #000000aa; }
#board-overlay .board-card::before { background: radial-gradient(circle at 35% 30%, #d8d2c4, #2b2620); width: 12px; height: 12px; margin-left: -6px; border: 1px solid #4a4338; box-shadow: 0 2px 3px #00000099; }
#board-overlay .bc-tag { font-size: var(--ts-meta); letter-spacing: 0.12em; color: #8a6f2e; }
#board-overlay .bc-tag-crack { color: #1f7a42; }
#board-overlay .bc-tag-contradiction { color: #b5483a; }
#board-overlay .bc-tag-sticky { color: #8a6f2e; }
#board-overlay .bc-body { color: #241c0f; font-size: var(--ts-label); line-height: 1.45; }
#board-overlay .kind-crack, #board-overlay .kind-contradiction, #board-overlay .kind-note { border-top: none; }
#board-overlay .kind-sticky { background: #d8c987; border-top: none; }
#board-overlay .kind-sticky .bc-sticky-text { font-family: "Caveat", cursive; font-size: var(--ts-body); line-height: 1.1; color: #3a2f12; background: rgba(0,0,0,0.05); border-color: #b3a784; }
#board-overlay .bc-connect { color: #4a3f24; border-color: #b3a784; background: rgba(0,0,0,0.04); }
#board-overlay .bc-connect[aria-pressed="true"] { color: #8a6f2e; border-color: #8a6f2e; }
#board-overlay .bc-del { color: #7a5a30; border-color: #c4a06a; }
#board-overlay .board-card.connecting { box-shadow: 0 0 0 2px var(--brass), 0 4px 12px #000000aa; }
.bd-footer { margin-top: 12px; padding: 13px 16px 14px; background: #16120be6; border: 1px solid #3a3326; border-radius: 3px; }
.bd-fhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.bd-flabel { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.12em; color: #9a8f78; }
.bd-addnote { min-height: 40px; padding: 8px 14px; border-radius: 6px; background: transparent; border: 1px solid var(--brass); cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-label); letter-spacing: 0.08em; color: var(--brass); }
.bd-addnote:hover { background: rgba(205,163,73,0.1); }
#board-overlay .connection-list { gap: 6px; }
#board-overlay .nb-conn { font-size: var(--ts-label); color: var(--ink-soft); }
#board-overlay .nb-conn span::before { content: "✦ "; color: var(--brass); }

/* ============================ SETTINGS ============================ */
.set-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 105% at 50% 32%, #00000000 50%, #000000b8 100%); }
.set-lamp { position: absolute; left: 0; top: 0; right: 0; height: 28%; pointer-events: none; background: radial-gradient(90% 60% at 50% 0%, #42351c40, #42351c00 70%); }
.set-head { position: absolute; left: 0; right: 0; top: 0; padding: clamp(40px, 5.5vh, 52px) clamp(16px, 5vw, 22px) 0; }
.set-back { min-height: 40px; background: none; border: none; cursor: pointer; padding: 4px 0; font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.12em; color: var(--ink-soft); }
.set-back:hover { color: var(--ink); }
.set-kicker { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.24em; color: var(--brass); margin: 6px 0 0; }
.set-title { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h1); letter-spacing: 0.03em; color: var(--ink); margin: 2px 0 0; }
.set-rule { width: 56px; height: 2px; background: var(--brass); margin: 12px 0 0; }
.set-col { position: absolute; left: clamp(16px, 5vw, 22px); right: clamp(16px, 5vw, 22px); top: clamp(150px, 21vh, 178px); bottom: clamp(12px, 2.2vh, 18px); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-right: 4px; }
.set-col::-webkit-scrollbar { width: 4px; }
.set-col::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 2px; }
.set-group { display: flex; flex-direction: column; gap: 4px; }
.set-glabel { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.18em; color: #8a6f2e; margin: 0 0 2px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; min-height: 48px; width: 100%; background: none; border: none; text-align: left; font: inherit; }
button.set-row { cursor: pointer; }
.set-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-nm { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-body); letter-spacing: 0.02em; color: var(--ink); margin: 0; }
.set-sub { font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.02em; color: #9a8f78; margin: 0; }
.set-div { height: 1px; background: #262017; }
.set-toggle { flex: none; width: 50px; height: 28px; border-radius: 14px; padding: 0 3px; display: flex; align-items: center; justify-content: flex-start; background: #2a2418; border: 1px solid #3a3326; cursor: pointer; }
.set-toggle[aria-checked="true"] { justify-content: flex-end; background: var(--brass); border-color: transparent; }
.set-toggle .knob { width: 22px; height: 22px; border-radius: 50%; background: #7d7460; }
.set-toggle[aria-checked="true"] .knob { background: #1a1306; }
.set-seg { flex: none; display: flex; border: 1px solid #3a3326; border-radius: 7px; overflow: hidden; }
.set-seg button { min-height: 40px; padding: 8px 14px; background: transparent; border: none; cursor: pointer; font-family: var(--font-jbmono); font-size: var(--ts-label); letter-spacing: 0.04em; color: var(--ink-soft); }
.set-seg button[aria-pressed="true"] { background: var(--brass); color: #1a1306; }
/* Volume sliders (Music / Effects): a native range styled in the noir control language (brass thumb
   on a dark track). Keyboard + aria come for free. Greyed + inert when its channel toggle is off. */
.set-slider { flex: none; width: 130px; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.set-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2a2418; border: 1px solid #3a3326; }
.set-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #2a2418; border: 1px solid #3a3326; }
.set-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--brass); border: none; }
.set-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brass); border: none; }
.set-slider:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.set-slider:disabled { opacity: 0.4; cursor: default; }
.set-badge { flex: none; padding: 5px 9px; border: 1px solid #3a3326; border-radius: 5px; font-family: var(--font-jbmono); font-size: var(--ts-meta); letter-spacing: 0.08em; color: #9a8f78; }
.set-chev { flex: none; font-family: var(--font-jbmono); font-size: var(--ts-h2); color: #9a8f78; }
.set-chev.danger { color: #f0897c; }

/* === Preference application (driven by settings) === */
html[data-reduce="1"] *, html[data-reduce="1"] *::before, html[data-reduce="1"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html[data-contrast="1"] { --ink: #fdf6e6; --ink-soft: #ddd3bb; --ink-mute: #a89d84; --border: #5a5040; --border-soft: #443b2c; }
html[data-textsize="S"] { --read-scale: 0.92; }
html[data-textsize="M"] { --read-scale: 1; }
html[data-textsize="L"] { --read-scale: 1.25; }
/* Interview/record dialogue keep their own base sizes, now scaled by the same control. */
.iv-answer { font-size: calc(20px * var(--read-scale, 1)); }
.rec-sheet #history .turn-text { font-size: calc(14px * var(--read-scale, 1)); }
.iv-inputbar #input { font-size: calc(14px * var(--read-scale, 1)); }
.iv-send { font-size: calc(13px * var(--read-scale, 1)); }
.turn-label { font-size: calc(9.5px * var(--read-scale, 1)); }

/* ============================ Clue lightbox (tap evidence to enlarge) ============================ */
/* Reuses .modal-scrim (styles.css) for the fixed/centred backdrop; overrides only z-index + tone. */
.lb-scrim { z-index: 70; padding: clamp(18px, 6vw, 36px); background: rgba(6,4,2,0.86); }
.lb-box { width: min(92vw, 460px); max-height: 90svh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; background: var(--bg-raised); border: 1px solid var(--brass-dim); border-radius: 12px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lb-title { font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-h2); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); margin: 0; }
.lb-close { flex: none; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; }
.lb-close:hover { border-color: var(--brass); color: var(--ink); }
.lb-close:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lb-img { width: 100%; border-radius: 4px; background: #20190f; box-shadow: 0 8px 26px rgba(0,0,0,0.6); display: block; }
.lb-copy { font-family: var(--font-read); font-style: normal; font-size: var(--ts-body); line-height: 1.5; color: var(--ink-soft); margin: 0; }
.lb-present { min-height: 48px; padding: 12px 18px; border-radius: 8px; border: 1px solid var(--brass); background: transparent; cursor: pointer; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }
.lb-present:hover { background: rgba(205,163,73,0.12); }
.lb-present[aria-pressed="true"] { background: var(--brass); color: #1a1306; }
.lb-present:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lb-box { animation: lb-in 0.2s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
html[data-reduce="1"] .lb-box { animation: none; }

/* ============================ Noir action controls ============================ */
#evidence-overlay .ev-lead { gap: 11px; min-height: 54px; padding: 9px 11px; background: #16120b; border: 1px dashed var(--brass-dim); border-radius: 3px; }
#evidence-overlay .ev-lead-title { font-size: var(--ts-label); color: var(--ink); }
.ev-obtain { min-height: 40px; padding: 8px 13px; background: transparent; border: 1px solid var(--brass-dim); border-radius: 2px; color: var(--brass); font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-meta); letter-spacing: 0.1em; text-transform: uppercase; }
.ev-obtain:hover { background: rgba(205,163,73,0.12); border-color: var(--brass); filter: none; }
.ev-obtain.ev-pending { opacity: 0.7; }
.ev-obtain.ev-obtain-failed { border-color: #6e2a22; color: #f0897c; }
.ev-lead-note { font-family: var(--font-jbmono); font-size: var(--ts-meta); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); }
#board-overlay .bc-actions { gap: 7px; }
#board-overlay .bc-connect, #board-overlay .bc-del { min-height: 36px; padding: 6px 11px; border-radius: 2px; background: transparent; font-family: var(--font-oswald); font-weight: 700; font-size: var(--ts-meta); letter-spacing: 0.09em; text-transform: uppercase; }
#board-overlay .bc-connect { border: 1px solid #b3a784; color: #6b5836; }
#board-overlay .bc-connect:hover { border-color: #8a6f2e; color: #4a3c1e; }
#board-overlay .bc-connect[aria-pressed="true"] { border-color: #8a6f2e; color: #8a6f2e; background: rgba(138,111,46,0.14); }
#board-overlay .bc-del { border: 1px solid #c8a988; color: #9a5638; }
#board-overlay .bc-del:hover { border-color: #b5483a; color: #b5483a; }
.bd-addnote { border-radius: 2px; }
/* Evidence in-hand tiles read as case photos. The tile opens the clue lightbox; a corner ✓ marks "on the table". */
.ev-tile { border-top: none; border: 1px solid var(--border); border-radius: 2px; padding: 6px 6px 8px; gap: 7px; position: relative; }
.ev-tile[data-presented="1"] { border-color: var(--brass); }
.ev-tile-zoom { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid rgba(230,221,202,0.5); background: rgba(13,11,7,0.62); color: #e6ddca; pointer-events: none; }
.ev-tile-zoom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Illustrated clue photos. */
.iv-pol-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-tile-img { width: 100%; height: 54px; object-fit: cover; border-radius: 1px; background: #20190f; }
.ev-lead-img { width: 44px; height: 36px; flex-shrink: 0; object-fit: cover; border-radius: 2px; background: #20190f; filter: grayscale(0.45) brightness(0.82); }
.iv-pol-thumb { overflow: hidden; padding: 0; }
.ax-ev-thumb img { width: 100%; height: 100%; object-fit: cover; }