/* Detective Sneaky, case file aesthetic
   Palette: manila + ink + manila tape + corkboard
   Theme tokens (--c-*, --font-*, --shadow-*) live in /detective-sneaky/theme/detective-sneaky-theme.css
*/

@import url("../../theme/detective-sneaky-theme.css?v=2");

* { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  /* Warm-noire ambient room. Same scene as the hub/discuss pages,
     so the 1200x750 canvas sits centered on a lamp-lit desk. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(177, 130, 70, 0.18), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(91, 51, 22, 0.10), transparent 60%),
    #1f1c17;
  background-attachment: fixed;
  min-height: 100%;
}
html, body {
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fixed canvas: 1200x750. M-M chrome bar (30px) + game header (36px) + content (684px).
   Manila/ink themed. Splash overlays sit ON TOP of the canvas, scoped to it. */
body {
  /* Fluid canvas: fills the player's viewport up to a 1400px wide / 1000px
     tall cap. Splash, game, and end-scene all share these dimensions. */
  width: min(100vw, 1400px);
  margin: 0 auto;
  height: min(100vh, 1000px);
  min-height: 620px;
  overflow: hidden;
  background: var(--c-bg);
  display: grid;
  grid-template-rows: 30px 36px 1fr;
  /* minmax(0, ...) lets grid cells shrink below their min-content width so the
     game can render at viewports narrower than the original 1200px canvas
     without clipping the chrome bar or suspect grid. */
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "chrome chrome"
    "header header"
    "main   sneaky";
  position: relative;
  user-select: text;
  -webkit-user-select: text;
  margin: 0 auto;
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.7);
}

/* UI chrome stays unselectable so accidental drags / double-clicks
   don't grab button labels or nav text. Text inside content cards
   (evidence, transcripts, notes, etc.) is selectable. */
#mm-chrome, #app-header, #app-nav,
button, .cork-tab, .cork-btn, .cork-btn-mini, .stuck-btn, .header-audio-btn,
.splash-controls, .splash-overlay button,
.cork-board-suspect, .cork-board-suspect *,
.suspect-card .suspect-portrait, .suspect-portrait,
.location-card .location-thumb, .victim-portrait,
.brand, .brand-title, .brand-case {
  user-select: none;
  -webkit-user-select: none;
}

/* ── M-M chrome bar (top of canvas) ── */
#mm-chrome {
  grid-area: chrome;
  background: #0e0c08;
  color: #8a8170;
  border-bottom: 1px solid #2a2620;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Clip content rather than forcing the body wider on narrow viewports. */
  overflow: hidden;
  min-width: 0;
}
#mm-chrome .mm-link {
  color: #b8ad95;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
}
#mm-chrome .mm-link:hover { color: #ede1c8; }
#mm-chrome .mm-home { color: #d4c39c; }
#mm-chrome .mm-sep { color: #3a342c; user-select: none; }
#mm-chrome .mm-spacer { flex: 1; }
#mm-chrome .mm-ghost { opacity: 0.65; }
#mm-chrome .mm-ghost:hover { opacity: 1; }
/* Premium badge in the chrome bar. Subtle gold pill next to the detective's
   name. Only shown for logged-in players whose me.php response has
   isPremium:true. The .ds-premium body class also hides ad surfaces (see
   the .endscene-rail rule below). */
#mm-chrome .mm-premium-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px 1px;
  background: var(--c-accent);
  color: #1c1814;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: middle;
}
/* Premium users get an ad-free experience site-wide. Hide every ad surface
   immediately on the .ds-premium body class — server already returns
   enabled:false for them, but this kills the surfaces before the ad-config
   round-trip even completes. */
body.ds-premium .endscene-rail,
body.ds-premium .ds-game-bottom-ad,
body.ds-premium .ds-ad-slot {
  display: none !important;
}

/* Current-case identifier. Sits in the chrome bar (replaced the in-header
   brand tag) so the case context is always visible without eating header
   width. Styled in the manila-tape accent so it reads as the current page,
   not as another nav link. */
#mm-chrome .mm-case-tag {
  color: var(--c-accent);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
#mm-chrome .mm-sep.mm-case-tag { color: #6a5d4a; padding: 0 2px; }

/* During active play AND end-scene, hide the website-context chrome links
   (M-M home, franchise hub, Discuss, Terms). The Briefing replay button and
   user-state chip stay visible — they're gameplay-relevant. End-scene has
   its own CTA buttons (discuss/leaderboard/share) so the chrome links are
   redundant there. Only the splash shows the full website nav. */
body:not(.splash-active) #mm-chrome .mm-website { display: none; }

#app-header {
  grid-area: header;
  background: #14110d;
  color: #d4c39c;
  border-bottom: 1px solid #2a2620;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  overflow: hidden;
  min-width: 0;
}
.header-zone-center,
.header-zone-right {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.header-zone-center { flex: 1 1 auto; gap: 2px; justify-content: center; }
.header-zone-right  { flex: 0 0 auto; gap: 10px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  white-space: nowrap;
}
.brand-case {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: #8a8170;
  margin-left: 4px;
  border-left: 1px solid #3a342c;
  padding-left: 8px;
  white-space: nowrap;
}


#app-nav { display: flex; gap: 2px; }
#app-nav button {
  background: transparent;
  color: #e1d4ad;
  border: 1px solid transparent;
  padding: 5px 9px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
#app-nav button:hover {
  color: #fff8e7;
  border-color: #6a5d4a;
  background: rgba(255, 248, 231, 0.06);
}
#app-nav button.active {
  color: #fff8e7;
  border-color: var(--c-accent);
  background: #3a1f1c;
  box-shadow: inset 0 -3px 0 var(--c-accent), 0 0 0 1px rgba(177, 58, 46, 0.4);
}

#app-main {
  grid-area: main;
  padding: 0;
  overflow: hidden;
  /* Grid 1fr row fills the body's remaining height after chrome+header (66px),
     so the main view auto-resizes with the viewport. */
  min-height: 0;
  /* position: relative so the four view-level focus overlays (suspect,
     evidence, image-lightbox, transcript) scope to the main area instead
     of the body — that lets them use `inset: 0` cleanly without offsetting
     past the chrome+header. height:100% pins the area to the grid row. */
  height: 100%;
  position: relative;
}
.view { display: none; height: 100%; }
.view.active { display: block; }
#view-report.active, #view-corkboard.active, #view-locations.active { display: flex; flex-direction: column; }
#view-report > .report-form, #view-corkboard > .corkboard-inner, #view-corkboard > .corkboard-empty { flex: 1; min-height: 0; }
#view-locations > .locations-grid { flex: 1; min-height: 0; }

/* Sneaky's sidebar is shown only on views where his commentary matters
   (File Report + corkboard fullboard already hides it differently).
   Default: hidden, main spans full width.
   Visible: when body has .sneaky-visible (currently only File Report). */
body:not(.sneaky-visible) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "chrome"
    "header"
    "main";
}
body:not(.sneaky-visible) #sneaky-panel { display: none; }

/* Full-canvas corkboard keeps its existing rules; nothing else to do. */
body.fullboard {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "chrome" "header" "main";
}
body.fullboard #sneaky-panel { display: none; }

/* ── Case file view ── */
/* Case File: orderly lineup (the "official suspects" view).
   5-column grid (Case 002's cast size), each card slightly tilted per
   :nth-child for hand-pinned feel. Capped + centered so cards don't grow
   unbounded on ultra-wide displays. */
.case-file-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
/* Pull Case File cards down so they sit centered on the remaining whiteboard
   space below the victim panel, not pinned to its bottom edge.
   Scoped with :not(.interview-grid) so the scattered Interviews view isn't shifted. */
.case-file-grid:not(.interview-grid) {
  margin-top: 80px;
}

.suspect-card {
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-paper-edge);
  box-shadow: var(--shadow-paper);
  padding: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  --tilt: 0deg;
  --bump: 0px;
  transform: translateY(var(--bump)) rotate(var(--tilt));
}
/* Per-position stagger so the lineup reads as hand-pinned, not grid-rendered. */
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+1) { --tilt: -2.2deg; --bump: 6px; }
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+2) { --tilt:  1.5deg; --bump: -4px; }
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+3) { --tilt: -1.0deg; --bump: 10px; }
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+4) { --tilt:  2.4deg; --bump: 2px; }
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+5) { --tilt: -1.8deg; --bump: -6px; }
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+6) { --tilt:  1.2deg; --bump: 8px; }
.case-file-grid:not(.interview-grid) .suspect-card:nth-child(7n+7) { --tilt: -2.6deg; --bump: -2px; }

/* Interviews: scattered board (the "detective's working theory" view).
   Cards absolutely positioned on the whiteboard. */
.interview-grid {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 580px;
}
.interview-grid .suspect-card {
  position: absolute;
  width: 170px;
  transform: rotate(var(--tilt));
}

/* ── Locked Interviews scatter positions (per-suspect) ──
   Tuned in edit mode 2026-05-11. Change with another edit-mode pass.
   Only applies to .interview-grid; Case File stays as a grid lineup. */
.interview-grid .suspect-card[data-suspect="S1"] { left:  0.0%; top: 19.6%; --tilt: -2.2deg; }
.interview-grid .suspect-card[data-suspect="S2"] { left: 20.3%; top:  0.0%; --tilt:  1.5deg; }
.interview-grid .suspect-card[data-suspect="S3"] { left: 39.8%; top: 16.3%; --tilt: -1.0deg; }
.interview-grid .suspect-card[data-suspect="S4"] { left: 61.7%; top:  0.0%; --tilt:  2.4deg; }
.interview-grid .suspect-card[data-suspect="S5"] { left: 82.0%; top: 24.5%; --tilt: -1.8deg; }
.interview-grid .suspect-card[data-suspect="S6"] { left: 19.9%; top: 53.4%; --tilt:  1.2deg; }
.interview-grid .suspect-card[data-suspect="S7"] { left: 59.4%; top: 52.0%; --tilt: -2.6deg; }

/* ── Scatter-edit mode ── */
body.scatter-edit .suspect-card {
  cursor: grab;
  outline: 2px dashed rgba(177, 58, 46, 0.6);
  transition: none !important; /* no rubber-banding while dragging */
}
body.scatter-edit .suspect-card:hover {
  /* Disable the lift/recolor hover behavior in edit mode — we want raw drag */
  transform: rotate(var(--tilt)) !important;
  background: var(--c-paper) !important;
  box-shadow: var(--shadow-paper) !important;
  z-index: auto;
}
body.scatter-edit .suspect-card:hover .suspect-name { color: var(--c-ink); }
body.scatter-edit .suspect-card.dragging {
  cursor: grabbing;
  outline-color: var(--c-accent);
  z-index: 10;
  opacity: 0.92;
}
#scatter-edit-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 2px solid var(--c-accent);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}
#scatter-edit-panel .sep-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
#scatter-edit-panel button {
  background: var(--c-paper);
  color: var(--c-ink);
  border: none;
  border-radius: 3px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
}
#scatter-edit-panel button:hover { background: var(--c-accent); color: #fff; }
#scatter-edit-panel .sep-hint {
  font-size: 0.62rem;
  opacity: 0.7;
  line-height: 1.4;
}
.suspect-card::before {
  /* manila tape strip */
  content: "";
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  width: 60px; height: 16px;
  background: var(--c-tape);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.suspect-card.unknown { filter: grayscale(0.85) brightness(0.8); }
.suspect-card:hover {
  filter: none !important;
  /* Lift while preserving the per-card tilt — straighten slightly on hover
     so the focused card pops forward, then re-tilts when you leave. */
  transform: translateY(calc(var(--bump) - 6px)) rotate(calc(var(--tilt) * 0.4));
  box-shadow: 0 10px 22px rgba(0,0,0,0.6), 0 0 0 2px var(--c-accent);
  background: #f7eed4;
  z-index: 2;
}
.suspect-card:hover .suspect-name { color: var(--c-accent); }

/* ── Focus modal: bigger card view ── */
.suspect-focus-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.78);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.suspect-focus-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 16px 50px rgba(0,0,0,0.7);
  padding: 18px 22px;
  width: 580px;
  max-width: 95%;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  position: relative;
}
.suspect-focus-card .focus-portrait {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  border: 1px solid var(--c-ink-soft);
  background-color: #2a2620;
}
.suspect-focus-card .focus-meta {
  display: flex;
  flex-direction: column;
}
.suspect-focus-card h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--c-accent);
}
.suspect-focus-card .focus-role {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.suspect-focus-card .focus-tone {
  font-size: 0.72rem;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}
.suspect-focus-card .focus-tagline {
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.suspect-focus-card .focus-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
}
.suspect-focus-card .focus-btn {
  background: var(--c-accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.suspect-focus-card .focus-btn:hover { background: var(--c-stamp); }
.suspect-focus-card .focus-btn.ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink-soft);
}
.suspect-focus-card .focus-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--c-ink-soft);
  line-height: 1;
}
.suspect-focus-card .focus-close:hover { color: var(--c-accent); }

/* ── Evidence focus modal ── */
.evidence-focus-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.78);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.evidence-focus-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 16px 50px rgba(0,0,0,0.7);
  padding: 18px 22px;
  width: 580px;
  max-width: 95%;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  position: relative;
}
.evidence-focus-stamp {
  position: absolute;
  top: 8px; left: 14px;
  border: 2px solid var(--c-stamp);
  color: var(--c-stamp);
  background: rgba(237, 225, 200, 0.95);
  font-weight: bold;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  padding: 6px 8px 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.92;
  z-index: 6;
}
.evidence-focus-card .focus-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--c-ink-soft);
  line-height: 1;
}
.evidence-focus-card .focus-close:hover { color: var(--c-accent); }
.evidence-focus-image {
  aspect-ratio: 3/4;
  background: repeating-linear-gradient(45deg, #2a2620 0 6px, #1f1c17 6px 12px);
  border: 1px solid var(--c-ink-soft);
  display: grid;
  place-items: center;
  color: #6b6357;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.evidence-image-placeholder {
  background: rgba(0,0,0,0.55);
  padding: 4px 8px;
  border: 1px dashed #6b6357;
}
.evidence-focus-meta { display: flex; flex-direction: column; }
.evidence-focus-meta h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 4px;
  color: var(--c-accent);
  padding-right: 32px;
  line-height: 1.2;
}
.evidence-focus-location {
  font-size: 0.62rem;
  color: var(--c-ink-soft);
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.evidence-focus-summary {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}

.suspect-portrait {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  background-color: #2a2620;
  border: 1px solid var(--c-ink-soft);
  margin-bottom: 6px;
}

.suspect-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: bold;
  margin: 0 0 1px;
  line-height: 1.15;
}
.suspect-role { font-size: 0.78rem; color: var(--c-ink-soft); margin-bottom: 4px; line-height: 1.25; }
.suspect-tag {
  display: inline-block;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-stamp);
  color: #fff;
  padding: 1px 5px;
  margin-right: 3px;
}
.suspect-tag.cleared { background: #3a5a2e; }
.suspect-tag.unknown { background: #4a443a; }
.suspect-tag.lawyered-up { background: #6a4a3a; }

/* Lawyered-up suspect: card is non-interactive and dimmed, with a stamp
   overlay diagonally across the polaroid. Player has to wait until the
   next day for the suspect to be available again. */
.interview-card.is-lawyered {
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.interview-card.is-lawyered:hover {
  /* Cancel out any hover animation defined on the base card. */
  transform: var(--tilt-transform, none);
}
.suspect-lawyer-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 3px solid #6a4a3a;
  color: #6a4a3a;
  background: rgba(237, 225, 200, 0.92);
  padding: 6px 14px 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.suspect-lawyer-overlay small {
  display: block;
  margin-top: 3px;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  opacity: 0.75;
}

/* ── Victim section ── */
.victim-section {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: var(--shadow-paper);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 110px auto auto 1fr;
  gap: 18px;
  align-items: start;
  position: relative;
}
.victim-stamp {
  position: absolute;
  top: 8px; right: 14px;
  border: 2px solid var(--c-stamp);
  color: var(--c-stamp);
  font-weight: bold;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  padding: 7px 8px 3px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
  opacity: 0.85;
  z-index: 2;
  transition: color 0.25s ease, border-color 0.25s ease;
}
/* Status-tinted variants. The data-status attribute is set from the case
   renderer based on what evidence the player has discovered. */
.victim-stamp[data-status="deceased"] {
  color: #2a2620;
  border-color: #2a2620;
}
.victim-stamp[data-status="fugitive"] {
  color: #b8862d;
  border-color: #b8862d;
}
.victim-portrait {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: #2a2620;
  border: 1px solid var(--c-ink-soft);
}
.victim-bio { padding-top: 2px; }
.victim-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 2px;
}
.victim-meta { color: var(--c-ink-soft); font-size: 0.74rem; margin-bottom: 8px; }
.victim-section p { margin: 0; font-size: 0.86rem; line-height: 1.5; }
.victim-facts {
  margin: 22px 0 0;
  padding: 10px 0 0 16px;
  border-left: 1px dashed var(--c-paper-edge);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: baseline;
  align-self: stretch;
}
.victim-facts dt {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}
.victim-facts dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--c-ink);
  line-height: 1.35;
  white-space: nowrap;
}

/* ── Locations view ── */
/* 5 locations laid out as 3-on-top / 2-centered-below. Six-column scaffolding
   so each card spans 2 columns and we can shift the bottom row inward by one
   column for visual balance — no awkward empty cell on the bottom right. */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 100%;
}
.locations-grid .location-card { grid-column: span 2; }
.locations-grid .location-card:nth-child(4) { grid-column: 2 / span 2; }
.locations-grid .location-card:nth-child(5) { grid-column: 4 / span 2; }
.location-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: var(--shadow-paper);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.location-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.55), 0 0 0 2px var(--c-accent);
}
.location-thumb {
  width: 100%;
  height: calc(100% - 26px);
  background-size: cover;
  background-position: center;
  background-color: #2a2620;
  border-bottom: 1px solid var(--c-ink-soft);
}
.location-name {
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--c-ink);
  text-align: center;
  background: var(--c-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-card:hover .location-name { color: var(--c-accent); }

/* Location focus modal */
.location-focus-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.78);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.location-focus-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 16px 50px rgba(0,0,0,0.7);
  padding: 14px;
  width: 720px;
  max-width: 96%;
  max-height: 92%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.location-focus-image {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  background-color: #2a2620;
  border: 1px solid var(--c-ink-soft);
  margin-bottom: 10px;
}
.location-focus-meta h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 4px;
  color: var(--c-accent);
}
.location-focus-meta p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--c-ink);
}
.location-focus-card .focus-close {
  position: absolute;
  top: -14px; right: -14px;
  background: var(--c-ink);
  border: 2px solid var(--c-paper);
  width: 36px; height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--c-paper);
  line-height: 1;
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.location-focus-card .focus-close:hover {
  background: var(--c-accent);
  color: var(--c-paper);
}

/* Locations toolbar */
.locations-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Action badges on location cards */
.loc-badge {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0;
}
.loc-badge.done {
  background: #3a5a2e;
}
.loc-badge.inline {
  margin-left: 6px;
  font-size: 0.65rem;
}

/* Action buttons inside location focus modal */
.loc-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.loc-actions-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--c-ink-soft);
  margin-bottom: 4px;
}
.loc-actions-empty {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  margin-top: 12px;
}
.loc-action-btn {
  background: #faf2dc;
  color: var(--c-ink);
  border: 1px solid var(--c-ink-soft);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.1s;
}
.loc-action-btn:hover:not(:disabled) {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.loc-action-btn.done {
  background: #e6e0cc;
  color: #6b6357;
  cursor: pointer;
}
.loc-action-btn.done:hover {
  background: #d4cdb3;
  color: var(--c-ink);
}
.loc-action-btn.locked {
  background: #d6d0bc;
  color: #8a8170;
  cursor: not-allowed;
  font-style: italic;
}

/* Global actions modal */
.global-actions { width: 720px; max-width: 96%; }
.global-meta { padding: 6px 0; }
.loc-actions-global {
  max-height: 460px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

/* ── Sticky notes ── */
.sticky-notes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.sticky-note {
  position: absolute;
  width: 168px;
  min-height: 132px;
  padding: 18px 12px 12px;
  font-family: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #2a2620;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.18);
  transform: rotate(-2deg);
  pointer-events: auto;
  user-select: none;
}
.sticky-note:nth-of-type(even) { transform: rotate(1.5deg); }
.sticky-note:nth-of-type(3n) { transform: rotate(-3deg); }
.sticky-note.dragging { transform: rotate(0deg) scale(1.04); cursor: grabbing; box-shadow: 0 12px 24px rgba(0,0,0,0.45); z-index: 50; }
.sticky-note.color-yellow { background: linear-gradient(180deg, #fff7a3 0%, #f5e872 100%); }
.sticky-note.color-pink   { background: linear-gradient(180deg, #ffc7d8 0%, #f5a3bd 100%); }
.sticky-note.color-blue   { background: linear-gradient(180deg, #bfe1ff 0%, #94c7f0 100%); }
.sticky-note.color-green  { background: linear-gradient(180deg, #c7ebb4 0%, #9fd382 100%); }
.sticky-note-grip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  cursor: grab;
  background: rgba(0,0,0,0.05);
  border-bottom: 1px dashed rgba(0,0,0,0.15);
}
.sticky-note-grip:active { cursor: grabbing; }
.sticky-note-colors {
  position: absolute;
  top: 18px; left: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.sticky-note:hover .sticky-note-colors,
.sticky-note:focus-within .sticky-note-colors { opacity: 1; }
.sticky-note-colors button {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.3);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.sticky-note-colors button[data-color="yellow"] { background: #f5e872; }
.sticky-note-colors button[data-color="pink"]   { background: #f5a3bd; }
.sticky-note-colors button[data-color="blue"]   { background: #94c7f0; }
.sticky-note-colors button[data-color="green"]  { background: #9fd382; }
.sticky-note-colors button.active { transform: scale(1.3); border-color: #2a2620; }
.sticky-note-delete {
  position: absolute;
  top: 18px; right: 6px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.1);
  border: none;
  border-radius: 50%;
  color: #2a2620;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.1s;
}
.sticky-note:hover .sticky-note-delete { opacity: 1; }
.sticky-note-delete:hover { background: rgba(177, 58, 46, 0.8); color: #fff; }
.sticky-note-body {
  margin-top: 18px;
  outline: none;
  cursor: text;
  min-height: 80px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.sticky-note-body:empty::before {
  content: attr(data-placeholder);
  color: rgba(42, 38, 32, 0.4);
  font-style: italic;
}
.sticky-note-body:focus { background: rgba(255,255,255,0.2); }

/* + Note button */
.cork-btn-add-note {
  background: linear-gradient(180deg, #fff7a3 0%, #f5e872 100%);
  color: #2a2620;
  border: 1px solid #c4b85a;
  font-family: var(--font-body);
  font-size: 0.72rem;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: transform 0.1s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.cork-btn-add-note:hover { transform: translateY(-1px); }

/* Help button on corkboard toolbar */
.cork-help-btn {
  background: transparent;
  color: #d4c39c;
  border: 1px solid rgba(212, 195, 156, 0.4);
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.cork-help-btn:hover { color: #ede1c8; border-color: var(--c-accent); }

/* ── Corkboard tutorial overlay ── */
.cork-tutorial-card { width: 720px; max-width: 95%; }
.cork-tutorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
.cork-tutorial-pane {
  background: #faf2dc;
  border: 1px solid var(--c-paper-edge);
  padding: 12px 14px;
}
.cork-tutorial-mock {
  height: 140px;
  background: url("../img/textures/corkboard.jpg") repeat;
  background-size: 256px 256px;
  border: 3px solid #3d2a18;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.4);
  padding: 8px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.cork-tutorial-mock-discovery {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #faf2dc;
  border: 1px solid #d4c39c;
  box-shadow: none;
}
.cork-tutorial-mock-label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
}
.cork-tutorial-mock-row {
  display: flex;
  gap: 6px;
}
.cork-tutorial-mock-discovery .cork-tutorial-mock-pin {
  width: 36px; height: 22px;
  background: #fff;
  border: 1px solid #c4b890;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cork-tutorial-mock-pinned .cork-tutorial-mock-pin {
  position: absolute;
  width: 30px; height: 22px;
  background: #fff;
  border: 1px solid #444;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.cork-tutorial-mock-pinned .cork-tutorial-mock-pin::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}
.cork-tutorial-mock-pinned .pos-1 { top: 18%; left: 12%; }
.cork-tutorial-mock-pinned .pos-2 { top: 60%; left: 55%; }
.cork-tutorial-mock-pinned .pos-3 { top: 22%; right: 12%; }
.cork-tutorial-mock-pinned .pos-4 { top: 70%; left: 22%; }
.cork-tutorial-mock-yarn {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.cork-tutorial-mock-yarn line {
  stroke: var(--c-accent);
  stroke-width: 1.5;
}
.cork-tutorial-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--c-accent);
}
.cork-tutorial-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0;
}
.cork-tutorial-foot {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--c-ink-soft);
}

/* Records & Lab — manila folder treatment.
   Typed list of pending requests; FILED stamp on completed rows. */
.records-folder {
  background: var(--c-paper);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(120, 100, 70, 0.05) 0, transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(120, 100, 70, 0.04) 0, transparent 32%);
  border: 1px solid var(--c-paper-edge);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 0 80px rgba(160, 130, 80, 0.08);
  position: relative;
}
/* In-page view variant — fills the view area, no modal sizing/positioning. */
.records-folder-view {
  max-width: 880px;
  margin: 32px auto 0;
}
.records-folder-tab {
  position: absolute;
  top: -20px;
  left: 32px;
  background: linear-gradient(180deg, #e6d4a8 0%, #d9c89c 100%);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  padding: 6px 22px 6px 18px;
  border: 1px solid var(--c-paper-edge);
  border-bottom: none;
  border-radius: 3px 14px 0 0;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.18);
  white-space: nowrap;
}
.records-folder .focus-close {
  top: 10px;
  right: 12px;
}
.records-body {
  padding: 26px 30px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 68, 58, 0.5) transparent;
}
.records-body::-webkit-scrollbar { width: 10px; }
.records-body::-webkit-scrollbar-track {
  background: rgba(74, 68, 58, 0.08);
  border-left: 1px dashed rgba(74, 68, 58, 0.25);
}
.records-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a7b5a 0%, #6a5d44 100%);
  border: 2px solid var(--c-paper);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.records-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-accent) 0%, #7a2820 100%);
}
.records-subtitle {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink-soft);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--c-paper-edge);
}
.records-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.records-list li { margin: 0; }
.records-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(74, 68, 58, 0.25);
  padding: 9px 6px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, padding-left 0.12s;
}
.records-row:hover:not(:disabled) {
  background: rgba(177, 58, 46, 0.07);
  color: var(--c-accent);
  padding-left: 12px;
}
.records-row:hover:not(:disabled) .records-check {
  color: var(--c-accent);
}
.records-check {
  flex-shrink: 0;
  width: 18px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--c-ink-soft);
  text-align: center;
}
.records-label {
  flex: 1;
}
.records-row.done {
  color: #8a8170;
  cursor: pointer;
  opacity: 0.9;
}
.records-row.done:hover { padding-left: 6px; background: rgba(0,0,0,0.04); color: var(--c-ink); }
.records-row.done .records-label {
  text-decoration: line-through;
  text-decoration-color: rgba(138, 129, 112, 0.45);
}
.records-row.done .records-check {
  color: #3a5a2e;
}
.records-stamp {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--c-accent);
  border: 1.5px solid var(--c-accent);
  padding: 5px 7px 2px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transform: rotate(-5deg);
  opacity: 0.78;
  text-transform: uppercase;
}
.records-empty {
  list-style: none;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--c-ink-soft);
  padding: 14px 6px;
}
.records-folder .discovery-reveal {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--c-paper-edge);
}
.records-folder .location-modal-narration {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-paper-edge);
}

/* Settings modal — reuses records-folder shell. */
.settings-folder { width: 520px; }
.settings-row { margin-top: 16px; }
.settings-row:first-of-type { margin-top: 4px; }
.settings-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 8px;
}
.settings-value {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.settings-segmented {
  display: flex;
  border: 1px solid var(--c-paper-edge);
  background: rgba(255, 255, 255, 0.3);
}
.settings-segmented button {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid var(--c-paper-edge);
  padding: 8px 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--c-ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.settings-segmented button:last-child { border-right: none; }
.settings-segmented button:hover { background: rgba(177, 58, 46, 0.08); color: var(--c-accent); }
.settings-segmented button.active {
  background: var(--c-accent);
  color: #fff;
}
.settings-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(180deg, rgba(74, 68, 58, 0.18), rgba(74, 68, 58, 0.28));
  border: 1px solid var(--c-paper-edge);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(180deg, var(--c-accent) 0%, #7a2820 100%);
  border: 1.5px solid #5a1810;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.settings-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(180deg, var(--c-accent) 0%, #7a2820 100%);
  border: 1.5px solid #5a1810;
  border-radius: 50%;
  cursor: pointer;
}
.settings-row-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-row-toggle .settings-label { margin-bottom: 0; }
.settings-toggle {
  position: relative;
  width: 48px;
  height: 24px;
  background: rgba(74, 68, 58, 0.3);
  border: 1px solid var(--c-paper-edge);
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.settings-toggle.on { background: var(--c-accent); }
.settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #faf2dc;
  border-radius: 50%;
  transition: transform 0.18s ease-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.settings-toggle.on .settings-toggle-thumb { transform: translateX(24px); }

/* High contrast text override — darkens ink + soft ink, sharpens text against manila. */
body.high-contrast {
  --c-ink: #000;
  --c-ink-soft: #1c1a17;
}

/* ── Corkboard view ── */
#view-corkboard {
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.08), transparent 70%),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.25), transparent 60%),
    url("../img/textures/corkboard.jpg") repeat;
  background-size: auto, auto, 256px 256px;
  height: 100%;
  border: 6px solid #3d2a18;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.45);
  padding: 12px;
  position: relative;
}

/* Whiteboard backdrop for the people-views. Polaroids sit on the board
   instead of floating in void. Subtle frame + inner vignette anchor the
   composition without competing with the photos. */
#view-case-file.active,
#view-interviews.active,
#view-records-lab.active,
#view-locations.active {
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.12) 100%),
    url("../img/textures/whiteboard.jpg") repeat;
  background-size: auto, 384px 384px;
  border: 4px solid #2a2620;
  border-radius: 3px;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  padding: 16px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 68, 58, 0.55) transparent;
}
#view-case-file.active::-webkit-scrollbar,
#view-interviews.active::-webkit-scrollbar,
#view-records-lab.active::-webkit-scrollbar,
#view-locations.active::-webkit-scrollbar { width: 10px; }
#view-case-file.active::-webkit-scrollbar-track,
#view-interviews.active::-webkit-scrollbar-track,
#view-records-lab.active::-webkit-scrollbar-track,
#view-locations.active::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-left: 1px solid #2a2620;
}
#view-case-file.active::-webkit-scrollbar-thumb,
#view-interviews.active::-webkit-scrollbar-thumb,
#view-records-lab.active::-webkit-scrollbar-thumb,
#view-locations.active::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a7b5a 0%, #6a5d44 100%);
  border: 2px solid #2a2620;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#view-case-file.active::-webkit-scrollbar-thumb:hover,
#view-interviews.active::-webkit-scrollbar-thumb:hover,
#view-records-lab.active::-webkit-scrollbar-thumb:hover,
#view-locations.active::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-accent) 0%, #7a2820 100%);
}
.corkboard-empty {
  color: #0a0604;
  font-weight: 700;
  text-align: center;
  font-style: italic;
  margin-top: 60px;
  font-size: 0.95rem;
  text-shadow: 0 1px 0 rgba(255, 235, 200, 0.4);
}

.corkboard-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-content: flex-start;
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}
.corkboard-inner::-webkit-scrollbar { width: 6px; }
.corkboard-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.4); }

/* Toolbar atop the corkboard */
.cork-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cork-toolbar-left { display: flex; gap: 4px; }
.cork-toolbar-right { display: flex; gap: 6px; align-items: center; }
.cork-zoom-label {
  color: #0a0604;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-width: 52px;
  text-align: right;
  padding: 2px 8px;
  white-space: nowrap;
  background: rgba(237, 225, 200, 0.85);
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cork-btn-mini {
  background: rgba(0,0,0,0.5);
  color: #d4c39c;
  border: 1px solid #3d2a18;
  width: 24px; height: 24px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.cork-btn-mini:hover { color: #ede1c8; border-color: var(--c-accent); }
.cork-tab {
  background: rgba(0,0,0,0.5);
  color: #d4c39c;
  border: 1px solid #3d2a18;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.cork-tab:hover { color: #ede1c8; }
.cork-tab.active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.cork-count {
  background: rgba(255,255,255,0.18);
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 8px;
  font-size: 0.65rem;
}
.cork-btn {
  background: rgba(0,0,0,0.5);
  color: #d4c39c;
  border: 1px solid #3d2a18;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.cork-btn:hover { color: #ede1c8; }
.cork-btn.active {
  background: #2e7a4e;
  color: #fff;
  border-color: #2e7a4e;
}
.cork-btn-zoom-reset {
  font-size: 0.62rem;
  padding: 4px 9px;
}

/* Yarn-icon variant of the Connect button. Icon sits left of the label,
   slightly oversized so the texture reads at small sizes. Spins gently
   while in active "connecting" mode for visual feedback. */
.cork-btn-yarn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 6px;
}
.cork-btn-yarn-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.cork-btn-yarn.active .cork-btn-yarn-icon {
  animation: cork-yarn-spin 4s linear infinite;
}
@keyframes cork-yarn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hint banner */
.cork-hint {
  background: rgba(255, 247, 219, 0.95);
  color: var(--c-ink);
  border-left: 3px solid var(--c-accent);
  padding: 6px 30px 6px 12px;
  font-size: 0.72rem;
  margin-bottom: 6px;
  position: relative;
  flex-shrink: 0;
}
.cork-hint-close {
  position: absolute;
  top: 2px; right: 6px;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--c-ink-soft);
  line-height: 1;
}
.cork-hint-close:hover { color: var(--c-accent); }

/* Empty board state */
.cork-board-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0604;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  padding: 20px;
  text-shadow: 0 1px 0 rgba(255, 235, 200, 0.4);
  font-size: 0.95rem;
}

/* The conspiracy board itself */
.cork-board {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  cursor: grab;
  touch-action: none;
}
.cork-board.panning {
  cursor: grabbing;
}
.cork-board-stage {
  position: absolute;
  inset: auto;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  transform-origin: center center;
  transition: transform 0.08s ease-out;
}

/* ── Image lightbox + magnifier button ── */
.image-magnifier-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 12, 6, 0.7);
  color: #fff8e7;
  border: 2px solid rgba(255, 248, 231, 0.85);
  font-size: 1.05rem;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 0;
  line-height: 1;
  transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.image-magnifier-btn:hover {
  background: var(--c-accent);
  border-color: #fff8e7;
  transform: scale(1.08);
}
.image-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: image-lightbox-fade 0.14s ease-out;
  padding: 20px;
}
@keyframes image-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.image-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 4px solid #fff8e7;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}
/* Wraps the image + hotspot overlays + reveal toast so percent-positioned
   hotspots align to the rendered image bounds, not the whole lightbox.
   min-width/min-height: 0 is required so the stage (a flex item) can shrink
   below its content size — otherwise the default `min-*: auto` keeps the
   stage at the image's intrinsic dimensions and the image overflows. */
.image-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  cursor: default;
}
.image-lightbox-stage .image-lightbox-img {
  /* The image is the flex item inside the stage. Letting it shrink in both
     axes plus object-fit:contain means the stage matches the rendered image
     bounds — important so percent-positioned hotspots line up. */
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Image hotspots (Case 002). Invisible by default — discovery should feel
   like noticing something, not following a marker. Subtle pulse on hover
   reveals "there's something here." Dev mode shows outlines for authoring. */
.image-hotspot {
  position: absolute;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.image-hotspot:hover {
  background: rgba(255, 248, 231, 0.10);
  border-color: rgba(255, 248, 231, 0.45);
  box-shadow: 0 0 0 6px rgba(255, 248, 231, 0.05);
}
.image-hotspot:focus-visible {
  outline: 2px solid var(--c-accent, #d6a64a);
  outline-offset: 2px;
}
/* QA / authoring: ?qa_2026=on reveals every hotspot's outline so you can
   verify coordinates without playing through. Add the class to <body>
   via window.__ds.showHotspots() (see state.js dev helpers). */
body.ds-show-hotspots .image-hotspot {
  background: rgba(214, 166, 74, 0.20);
  border-color: rgba(214, 166, 74, 0.80);
}

/* QA placement tool: rectangles drawn by Shift+drag in the lightbox.
   Magenta to distinguish from authored hotspots' QA-yellow. */
.hotspot-author-rect {
  position: absolute;
  border: 2px solid #ff39ff;
  background: rgba(255, 57, 255, 0.20);
  z-index: 10;
  pointer-events: none;
}
.hotspot-author-rect.drawing {
  border-style: dashed;
}
.hotspot-author-rect:not(.drawing) {
  pointer-events: auto;
  cursor: pointer;
}
.hotspot-author-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 16, 12, 0.92);
  border: 1px solid #ff39ff;
  color: #ffb0ff;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  z-index: 11;
  pointer-events: none;
}

.image-lightbox-reveal {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  min-width: 260px;
  max-width: 80%;
  background: rgba(20, 16, 12, 0.92);
  border: 1px solid var(--c-accent, #d6a64a);
  color: var(--c-paper, #ede1c8);
  padding: 14px 22px;
  font-family: var(--font-body);
  text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.image-lightbox-reveal[hidden] { display: none; }
.hotspot-reveal-stamp {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--c-accent, #d6a64a);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hotspot-reveal-hint {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.35;
  margin-bottom: 6px;
}
.hotspot-reveal-evidence {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.image-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: #fff8e7;
  font-size: 2.6rem;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  /* Sits above the stage. Without this the stage (a later-in-DOM flex item)
     paints over the close button wherever the rendered image extends to the
     top-right corner, blocking clicks even though the X is visible. */
  z-index: 2;
}
.image-lightbox-close:hover {
  color: var(--c-accent);
}

/* The focus-image / portrait surfaces are background-image divs — make them
   the positioning context so the magnifier sits over the bottom-right corner. */
.evidence-focus-image,
.location-focus-image,
.focus-portrait,
.transcript-portrait {
  position: relative;
}

/* Image quality pass. Source art is high-res ComfyUI output (~1024px) being
   downscaled to small thumbs / polaroids / portraits. Default bilinear can
   look crunchy on photographic detail; image-rendering: high-quality opts
   into a better algorithm in Chromium/Safari (falls back to auto elsewhere). */
.cork-board-thumb,
.cork-board-suspect-thumb,
.discovery-card-thumb,
.suspect-portrait,
.victim-portrait,
.focus-portrait,
.transcript-portrait,
.evidence-focus-image,
.location-focus-image,
.image-lightbox-img,
.endscene-portrait,
.suspect-card .suspect-portrait {
  image-rendering: auto;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}
.cork-board.panning .cork-board-stage {
  transition: none;
}
.cork-yarn-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.cork-yarn {
  stroke: #b8302a;
  stroke-width: 3.5;
  stroke-linecap: round;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
  transition: stroke 0.15s, stroke-width 0.15s;
}
.cork-yarn:hover { stroke: #e44a3a; stroke-width: 4.5; }

.cork-board-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--c-paper);
  color: var(--c-ink);
  width: 150px;
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 5px 14px rgba(0,0,0,0.55);
  cursor: grab;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: box-shadow 0.1s;
}
.cork-board-pin, .cork-board-pin *,
.discovery-card, .discovery-card * {
  user-select: none;
  -webkit-user-select: none;
}
.cork-board-pin > * {
  pointer-events: none;
  -webkit-user-drag: none;
}
.cork-board-pin::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 10px; height: 10px;
  background: radial-gradient(circle at 30% 30%, #c84a3a, #6a1d12 70%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
  transform: translateX(-50%);
  z-index: 3;
}
.cork-board-pin:hover {
  transform: translate(-50%, -52%);
  box-shadow: 0 8px 14px rgba(0,0,0,0.65), 0 0 0 2px var(--c-accent);
  z-index: 4;
}
.cork-board-pin.dragging {
  cursor: grabbing;
  z-index: 10;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 22px rgba(0,0,0,0.7), 0 0 0 2px var(--c-accent);
}
.cork-board-pin.first-pick {
  box-shadow: 0 4px 10px rgba(0,0,0,0.55), 0 0 0 2px #2e7a4e;
}
.cork-board-thumb {
  width: 100%;
  height: 92px;
  background-size: cover;
  background-position: center;
  background-color: #2a2620;
  border-bottom: 1px solid var(--c-ink-soft);
  /* Promote to its own layer so the browser doesn't repaint it on every
     surrounding-DOM change. Cuts the flicker on board re-renders. */
  transform: translateZ(0);
  will-change: transform;
}
.cork-board-name {
  padding: 5px 7px 3px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.cork-board-blurb {
  padding: 0 7px 6px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: center;
  color: var(--c-ink-soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
/* When the user is selecting text on a pin, don't show grab cursor on hover */
.cork-board-pin:has(.cork-board-name:hover),
.cork-board-pin:has(.cork-board-blurb:hover) { cursor: text; }

.cork-board-empty-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 60%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #f1e2c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  background: rgba(20, 14, 8, 0.65);
  padding: 14px 20px;
  border: 1px dashed rgba(241, 226, 192, 0.45);
  pointer-events: none;
  z-index: 3;
}

/* Suspect polaroids on the Pinned Board. Smaller than evidence pins, white
   polaroid frame, drag to organize the working theory. No yarn participation —
   they're spatial anchors for the player, not scoreable connections. */
.cork-board-suspect {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--sus-tilt, -2deg));
  background: #f5efe0;
  width: 78px;
  padding: 4px 4px 0;
  border: 1px solid #c4b890;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  cursor: grab;
  user-select: none;
  z-index: 4;
}
.cork-board-suspect::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 28px; height: 9px;
  background: rgba(245, 235, 200, 0.85);
  border: 1px solid rgba(180, 165, 130, 0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cork-board-suspect:nth-child(7n+1) { --sus-tilt: -2.2deg; }
.cork-board-suspect:nth-child(7n+2) { --sus-tilt:  1.8deg; }
.cork-board-suspect:nth-child(7n+3) { --sus-tilt: -1.0deg; }
.cork-board-suspect:nth-child(7n+4) { --sus-tilt:  2.4deg; }
.cork-board-suspect:nth-child(7n+5) { --sus-tilt: -1.8deg; }
.cork-board-suspect:nth-child(7n+6) { --sus-tilt:  1.4deg; }
.cork-board-suspect:nth-child(7n+7) { --sus-tilt: -2.6deg; }
.cork-board-suspect:hover {
  z-index: 8;
  transform: translate(-50%, -50%) rotate(var(--sus-tilt, -2deg)) scale(1.05);
}
.cork-board-suspect.dragging {
  cursor: grabbing;
  z-index: 12;
  transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.7), 0 0 0 2px var(--c-accent);
}
.cork-board-suspect.first-pick {
  box-shadow: 0 4px 10px rgba(0,0,0,0.55), 0 0 0 2px #2e7a4e;
  z-index: 8;
}
.cork-board-suspect-thumb {
  width: 100%;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  background-color: #2a2620;
  filter: grayscale(0.55) contrast(1.05);
}
.cork-board-suspect-name {
  padding: 4px 2px 5px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cork-board-suspect.cleared { opacity: 0.7; }
.cork-board-suspect.cleared::after {
  content: "CLEARED";
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: #3a5a2e;
  border: 1.5px solid #3a5a2e;
  padding: 1px 5px;
  background: rgba(245, 239, 224, 0.6);
  pointer-events: none;
}
.cork-board-suspect.interviewed .cork-board-suspect-thumb {
  filter: grayscale(0) contrast(1.05);
}
/* Victim variant — Damon's polaroid. MISSING stamp (Case 002: no body at open). */
.cork-board-suspect.victim .cork-board-suspect-thumb {
  filter: grayscale(0.2) contrast(1.05);
}
.cork-board-suspect.victim::after {
  content: "MISSING";
  position: absolute;
  top: -6px; right: -10px;
  transform: rotate(8deg);
  font-family: var(--font-body);
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  color: var(--c-stamp);
  border: 1.5px solid var(--c-stamp);
  padding: 4px 5px 1px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 239, 224, 0.92);
  pointer-events: none;
  z-index: 2;
}
.cork-bucket {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 100%;
}
.cork-bucket-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f1e2c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-bottom: 6px;
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
}
.cork-pins {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cork-pin {
  background: var(--c-paper);
  color: var(--c-ink);
  padding: 6px 10px;
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  font-size: 0.7rem;
  cursor: pointer;
  transform: rotate(-0.5deg);
  position: relative;
  max-width: 220px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.cork-pin:nth-child(even) { transform: rotate(0.7deg); }
.cork-pin:hover {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 8px 14px rgba(0,0,0,0.55);
  z-index: 5;
}
.cork-pin::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 10px; height: 10px;
  background: radial-gradient(circle at 30% 30%, #c84a3a, #6a1d12 70%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
  transform: translateX(-50%);
}
.cork-pin.pinned {
  background: #f7eed4;
  box-shadow: 0 6px 12px rgba(0,0,0,0.55), 0 0 0 1px var(--c-accent);
}
.cork-pin-name {
  font-weight: bold;
  margin-bottom: 2px;
}
.cork-pin-summary {
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--c-ink-soft);
}

/* ── Interviews view ── */
/* Interview grid reuses the case-file polaroid look. Done-state cards stay
   clickable (replay the initial transcript). Follow-up unlocks get an accent
   stamp so the player notices without us spoiling what evidence opened it. */
.interview-grid .interview-card.is-done {
  cursor: pointer;
  opacity: 0.92;
}
.interview-grid .interview-card.is-done:hover {
  filter: none;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.55), 0 0 0 2px var(--c-ink-soft);
}
.suspect-tag.followup {
  background: var(--c-accent);
  color: #fff;
}

/* Transcript modal */
.transcript-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.78);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.transcript-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 16px 50px rgba(0,0,0,0.7);
  padding: 14px 18px;
  width: 680px;
  max-width: 96%;
  height: 88%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.transcript-card .focus-close {
  position: absolute;
  top: 6px; right: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--c-ink-soft);
  width: 26px; height: 26px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--c-ink);
  line-height: 1;
  border-radius: 50%;
  z-index: 5;
}
.transcript-header {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--c-paper-edge);
  padding-bottom: 10px;
  margin-bottom: 8px;
}
.transcript-portrait {
  width: 50px; height: 50px;
  background-size: cover;
  background-position: center top;
  background-color: #2a2620;
  border: 1px solid var(--c-ink-soft);
}
.transcript-suspect {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--c-accent);
  line-height: 1.1;
}
.transcript-kind {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--c-ink-soft);
  margin-top: 2px;
}
.transcript-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 4px 0;
  scroll-behavior: smooth;
}
.transcript-body::-webkit-scrollbar { width: 6px; }
.transcript-body::-webkit-scrollbar-thumb { background: var(--c-ink-soft); }
.transcript-turn {
  margin-bottom: 10px;
  padding-left: 12px;
}
.transcript-turn.sneaky { border-left: 2px solid var(--c-accent); }
.transcript-turn.suspect { border-left: 2px solid var(--c-ink-soft); }
.transcript-speaker {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  margin-bottom: 2px;
}
.transcript-turn.sneaky .transcript-speaker { color: var(--c-accent); }
.transcript-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-ink);
}

/* Animated turn-by-turn reveal. Pending = display:none so the modal grows
   smoothly as each turn reveals, rather than reserving its full height up
   front. Layout updates are limited to the new turn's height. */
.transcript-turn.pending {
  display: none;
}
.transcript-turn {
  opacity: 0;
  animation: turn-fade-in 0.4s ease forwards;
}
@keyframes turn-fade-in {
  to { opacity: 1; }
}
/* Typing dots removed entirely. They were causing layout churn between
   turns. Character-paced delay is enough rhythm. */
.transcript-typing { display: none !important; }
.transcript-typing.sneaky { border-left-color: var(--c-accent); }
.transcript-typing span {
  width: 6px;
  height: 6px;
  background: var(--c-ink-soft);
  border-radius: 50%;
  display: inline-block;
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.transcript-typing.sneaky span { background: var(--c-accent); }
.transcript-typing span:nth-child(2) { animation-delay: 0.18s; }
.transcript-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}
.transcript-hint {
  margin-left: auto;
  margin-right: 40px;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  opacity: 0.6;
  align-self: flex-start;
  white-space: nowrap;
}
.transcript-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.transcript-done-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 2px solid var(--c-ink);
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 #000;
  transition: transform 0.12s, box-shadow 0.12s;
}
.transcript-done-btn.ghost {
  background: transparent;
  color: var(--c-ink);
  box-shadow: none;
  opacity: 0.7;
}
.transcript-done-btn.ghost:hover { opacity: 1; }

/* Interactive interviews (Option B, Case 002+). Picker is Sneaky's
   question options for the current turn; locked options are visible but
   disabled so the player can see what's been missed (evidence-gating). */
.transcript-setup {
  font-style: italic;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-left: 2px solid var(--c-ink-soft);
  background: rgba(0,0,0,0.03);
}
.transcript-picker {
  margin: 12px 0 4px;
  padding: 10px 0 0;
  border-top: 1px dashed var(--c-ink-soft);
}
.transcript-picker-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 8px;
}
.transcript-picker-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.transcript-picker-opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-ink-soft);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.transcript-picker-opt:hover {
  background: rgba(214, 166, 74, 0.12);
  border-color: var(--c-accent);
}
.transcript-picker-opt:active { transform: translateY(1px); }
.transcript-picker-opt.locked {
  cursor: not-allowed;
  opacity: 0.45;
  background: rgba(0,0,0,0.02);
  font-style: italic;
}
.transcript-picker-opt.locked:hover {
  background: rgba(0,0,0,0.02);
  border-color: var(--c-ink-soft);
}
.transcript-picker-lock {
  font-size: 0.75rem;
  opacity: 0.6;
}
.transcript-picker-opt-text { flex: 1; }

.transcript-cooloff,
.transcript-done-note {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px dashed var(--c-ink-soft);
  background: rgba(106, 74, 58, 0.06);
  font-style: italic;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
}
.transcript-cooloff {
  border-color: #6a4a3a;
  color: #6a4a3a;
}
.transcript-card-interactive .transcript-body {
  /* Slight extra breathing room since the picker can grow tall. */
  padding-bottom: 12px;
}
.transcript-done-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #000;
}
.transcript-done-btn[hidden] { display: none; }

/* ── Report view ── */
.report-form {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: var(--shadow-paper);
  padding: 14px 22px 16px;
  max-width: 760px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.report-form .report-submit { margin-top: auto; }
.report-form h2 {
  font-family: var(--font-display);
  margin-top: 0;
  border-bottom: 2px solid var(--c-ink);
  padding-bottom: 8px;
}
.report-field { margin-bottom: 12px; }
.report-row + .report-field { margin-top: 0; }
.report-form h2 { font-size: 1.1rem; padding-bottom: 6px; margin-bottom: 8px; }
.report-field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 4px;
}
.report-field select, .report-field textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #faf2dc;
  border: 1px solid var(--c-ink-soft);
  color: var(--c-ink);
}
.report-field select:disabled { opacity: 0.4; }
.report-submit {
  background: var(--c-accent);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-family: var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 12px;
}
.report-submit:hover { background: var(--c-stamp); }
.report-note {
  font-size: 0.7rem;
  color: var(--c-ink-soft);
  font-style: italic;
  margin: -8px 0 14px;
}
.report-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.chain-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  background: #faf2dc;
  border: 1px solid var(--c-ink-soft);
  padding: 8px;
}
.chain-picker::-webkit-scrollbar { width: 6px; }
.chain-picker::-webkit-scrollbar-thumb { background: #b8a980; }
.report-form .report-field:has(.chain-picker) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chain-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  padding: 3px 8px;
  border: 1px solid var(--c-ink-soft);
  background: #ede1c8;
  cursor: pointer;
  border-radius: 2px;
  user-select: none;
}
.chain-pill input { display: none; }
.chain-pill:hover { border-color: var(--c-accent); }
.chain-pill.selected {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.chain-empty { color: var(--c-ink-soft); font-style: italic; font-size: 0.72rem; padding: 6px; }

/* ── End scene ── */
/* Sits inside the 684px canvas. Tuned to fill the space with the case-closed
   card without scrolling. */
/* End-scene breaks out of the fixed 1200x750 game canvas — the case-closed
   state is a long-form page (portrait, stats, CTA, mail signup, ads), not a
   game view. Let the body grow to fit content + use natural document scroll
   instead of locking everything inside a viewport-sized box. */
/* End-scene only — don't apply during splash overlay (which uses the fixed
   1200x750 canvas dimensions for its layout). */
body.case-closed:not(.splash-active) {
  height: auto;
  min-height: 750px;
  overflow: visible;
}
body.case-closed:not(.splash-active) #app-main {
  overflow: visible;
  height: auto;
}
body.case-closed:not(.splash-active) .view.active { height: auto; }
body.case-closed:not(.splash-active) #view-report.active:has(.endscene) {
  justify-content: flex-start;
  align-items: center;
  overflow: visible;
  padding: 24px 0;
  height: auto;
}
.endscene {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: var(--shadow-paper);
  padding: 18px 28px 22px;
  text-align: center;
  position: relative;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}
.endscene-stamp {
  position: absolute;
  top: 56px; right: 18px;
  border: 3px solid var(--c-stamp);
  color: var(--c-stamp);
  font-weight: bold;
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  padding: 8px 14px 3px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
  opacity: 0.9;
}
.endscene-portrait {
  width: 180px;
  aspect-ratio: 3/4;
  margin: 4px auto 10px;
  background-size: cover;
  background-position: center top;
  background-color: #2a2620;
  border: 1px solid var(--c-ink-soft);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}

/* Cinematic landscape variant for the Case 002 fugitive win (the bad guy got
   away — we don't want a mugshot frame, we want a movie still).
   Kept compact so the CTA stays above the fold on standard laptop viewports. */
.endscene-portrait-fugitive {
  width: min(420px, 72vw);
  aspect-ratio: 16/9;
  margin: 4px auto 10px;
  background-size: cover;
  background-position: center center;
  background-color: #2a2620;
  border: 1px solid var(--c-ink-soft);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}

/* Cold-close end-scene (Case 002 submission cap). Different chrome to
   signal "case unsolved" without making it feel like a failure screen. */
.endscene-cold .endscene-stamp {
  border-color: #6a4a3a;
  color: #6a4a3a;
}
.endscene-portrait-cold {
  width: 180px;
  aspect-ratio: 3/4;
  margin: 4px auto 10px;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 6px, transparent 6px 12px),
    #2a2620;
  border: 1px dashed var(--c-ink-soft);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  position: relative;
}
.endscene-portrait-cold::after {
  content: "COLD FILE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(237, 225, 200, 0.35);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.endscene-cta-cold {
  background: rgba(106, 74, 58, 0.08);
  border-left: 3px solid #6a4a3a;
}
/* Inconclusive variant of the cold-close: player elected to file Inconclusive
   rather than running out of filings. Same chrome palette, different overlay
   text ("FILE OPEN" vs "COLD FILE") to reflect that the case is parked, not lost. */
.endscene-inconclusive .endscene-portrait-cold::after {
  content: "FILE OPEN";
}
.endscene-cta-line-quiet {
  opacity: 0.7;
  font-size: 0.88em;
  margin-top: 4px;
}
.endscene h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--c-accent);
}
.endscene-closing {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-ink);
  font-style: italic;
  border-left: 2px solid var(--c-accent);
  text-align: left;
  padding: 0 0 0 12px;
  max-width: 580px;
  margin: 0 auto 14px;
}
.endscene-stats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.endscene-stats .stat-grade .stat-num {
  font-size: 1.7rem;
  color: var(--c-stamp);
}
.endscene-stats .stat {
  background: #faf2dc;
  border: 1px solid var(--c-paper-edge);
  padding: 7px 4px;
}
.endscene-stats .stat-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--c-accent);
  line-height: 1;
}
.endscene-stats .stat-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: 4px;
}

/* ── End-scene CTA (post-submit, leaderboard / sign-in prompt) ── */
.endscene-cta {
  margin: 0 0 8px;
  padding: 6px 12px;
  background: #faf2dc;
  border-left: 3px solid var(--c-accent);
  text-align: center;
}
.endscene-cta-line {
  margin: 0 0 5px;
  font-size: 0.75rem;
  color: var(--c-ink);
}
.endscene-cta-btn {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-stamp);
  color: var(--c-paper);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--c-stamp);
  transition: background 0.15s, color 0.15s;
}
.endscene-cta-btn:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.endscene-cta-btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
  margin-left: 8px;
}
.endscene-cta-btn-primary {
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.endscene-cta-signin {
  margin: 10px 0 0;
  font-size: 0.78rem;
  opacity: 0.7;
  text-align: center;
}
.endscene-cta-signin a,
.endscene-cta-signin-link {
  color: var(--c-ink);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.endscene-cta-signin-link:hover { color: var(--c-accent); }
.endscene-cta-btn-ghost:hover {
  background: var(--c-ink);
  color: var(--c-paper);
}
.endscene-cta-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ── Bottom ad in the warm-noire room (under the canvas) ── */
/* Canvas (body) is fixed 1200×750 with overflow:hidden, so the ad mount
   has to escape into the html viewport via position:fixed. Pin it to the
   top of the page, just below the 750px canvas. */
.ds-game-bottom-ad {
  position: fixed;
  top: 762px;          /* canvas (750px) + 12px breathing */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 0;
  z-index: 5;
}
.ds-game-bottom-ad[hidden] { display: none; }
.ds-game-bottom-ad-label {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(212, 195, 156, 0.4);
  margin-bottom: 6px;
  font-family: var(--font-body);
}
body.splash-active .ds-game-bottom-ad { display: none !important; }
/* End-scene is a long-form page that grows past the fixed canvas; the bottom
   anchor would land mid-page covering content. Use the inline endscene-ad-slot
   instead. */
body.case-closed .ds-game-bottom-ad { display: none !important; }
/* Hide on viewports too narrow for a 728px banner. Falls back to no ad rather than chopped */
@media (max-width: 768px) {
  .ds-game-bottom-ad { display: none !important; }
}

/* End-scene side rails for wide displays. The 1200px game canvas leaves
   gutter space on either side at >=1520px — skyscraper ads slot in there
   without fighting content. Hidden by default; the ad hydration script
   removes [hidden] when a real slot id comes back from ad-config.php.
   Premium users + pre-approval mode never get the slot id, so the rails
   stay hidden for them. */
.endscene-rail {
  position: fixed;
  top: 90px;
  width: 160px;
  height: 600px;
  display: none;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}
.endscene-rail[hidden] { display: none !important; }
.endscene-rail-label {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(212, 195, 156, 0.45);
  margin-bottom: 6px;
  font-family: var(--font-body);
}
.endscene-rail-left  { left:  max(8px, calc(50vw - 770px)); }
.endscene-rail-right { right: max(8px, calc(50vw - 770px)); }
/* Only show on the end-scene + wide viewport + when hydrated (no [hidden]). */
@media (min-width: 1520px) {
  body.case-closed:not(.splash-active) .endscene-rail:not([hidden]) { display: flex; }
}
/* Hide if viewport is shorter than canvas + ad. Better no-ad than overlap */
@media (max-height: 870px) {
  .ds-game-bottom-ad { display: none !important; }
}

/* End-scene strategic ad slot, the prime placement */
.endscene-ad-slot[hidden] { display: none !important; }
.endscene-ad-slot {
  margin: 8px auto 8px;
  padding: 6px;
  background: rgba(28, 26, 23, 0.05);
  border: 1px solid rgba(28, 26, 23, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}
.endscene-ad-label {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(28, 26, 23, 0.5);
  margin-bottom: 4px;
  font-family: var(--font-body);
}
/* Restart button on the end-scene is tighter than the report submit. */
.endscene .report-submit {
  padding: 8px 22px;
  margin-top: 4px;
  font-size: 0.85rem;
}
.endscene-mail {
  background: transparent;
  border: 1px dashed var(--c-accent);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 24px auto 18px auto;
  max-width: 460px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(177, 58, 46, 0.08);
}
.endscene-mail-head {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--c-ink);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.endscene-mail-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(43, 35, 28, 0.78);
  font-style: italic;
  margin-bottom: 16px;
}
.endscene-mail-form {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.endscene-mail-form input[type="email"] {
  flex: 1;
  max-width: 280px;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 3px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.endscene-mail-form input[type="email"]:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.endscene-mail-btn {
  background: var(--c-accent);
  color: var(--c-paper);
  border: 1px solid var(--c-accent);
  border-radius: 3px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.endscene-mail-btn:hover { filter: brightness(1.1); }
.endscene-mail-msg {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
}
.endscene-mail-msg-error { color: #d97560; }
.endscene-mail-success { padding: 4px 0; }

.endscene-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.endscene-share {
  background: transparent !important;
  color: var(--c-accent) !important;
  border: 1px solid var(--c-accent) !important;
  transition: background 0.15s, color 0.15s;
}
.endscene-share:hover:not(:disabled) {
  background: var(--c-accent) !important;
  color: #fff !important;
}
.endscene-share:disabled {
  opacity: 0.85;
  cursor: default;
}

/* ── Sneaky panel ── */
#sneaky-panel {
  grid-area: sneaky;
  background: #14110d;
  color: #d4c39c;
  border-left: 1px solid #2a2620;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  height: 624px;
  overflow: hidden;
}
.sneaky-body { overflow-y: auto; flex: 1; min-height: 0; }
.sneaky-body::-webkit-scrollbar { width: 4px; }
.sneaky-body::-webkit-scrollbar-thumb { background: #3a342c; }
.sneaky-head {
  color: var(--c-accent);
  font-weight: bold;
  letter-spacing: 0.25em;
  font-size: 0.62rem;
  margin-bottom: 8px;
}
.sneaky-body {
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  border-left: 2px solid var(--c-accent);
  padding-left: 10px;
}

/* ── Mobile block ── */
#mobile-block[hidden] { display: none !important; }
#mobile-block {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: #1a1814;
  color: var(--c-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-body);
}
.mobile-block-card {
  max-width: 460px;
  background: var(--c-paper);
  color: var(--c-ink);
  padding: 28px 24px;
  border: 2px solid var(--c-ink);
  box-shadow: var(--shadow-paper);
  text-align: left;
}
.mobile-block-card h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}
.mobile-block-card .mb-case {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  margin: 0 0 18px;
}
.mobile-block-card p {
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.mobile-block-card .mb-cta {
  font-weight: bold;
  border-left: 3px solid var(--c-accent);
  padding-left: 10px;
}
.mobile-block-card .mb-fineprint {
  font-size: 0.7rem;
  color: var(--c-ink-soft);
  margin-top: 18px;
}

/* ── Discovery reveal (newly-found evidence inside location modal) ── */
.discovery-reveal {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--c-paper-edge);
  background: rgba(255, 250, 230, 0.65);
}
.discovery-reveal-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--c-stamp);
  font-weight: bold;
  margin-bottom: 8px;
}
.discovery-reveal-empty {
  font-size: 0.78rem;
  color: var(--c-ink-soft);
  font-style: italic;
}
.discovery-reveal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.discovery-card {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 6px;
  background: var(--c-paper);
  border: 1px solid var(--c-ink-soft);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.discovery-card:hover {
  transform: translateY(-1px);
  border-color: var(--c-accent);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.discovery-card-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-paper-edge);
}
.discovery-card-thumb.placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--c-paper-edge),
    var(--c-paper-edge) 4px,
    var(--c-paper) 4px,
    var(--c-paper) 8px
  );
}
.discovery-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.discovery-card-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--c-ink);
  margin-bottom: 2px;
}
.discovery-card-summary {
  font-size: 0.7rem;
  color: var(--c-ink-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Inline Sneaky narration (inside location/global-action modals) ── */
.location-modal-narration {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--c-accent);
  background: rgba(177, 58, 46, 0.06);
  color: var(--c-ink);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Splash gate: hides everything in the game until splash dismissed ── */
body.splash-active #app-header,
body.splash-active #app-main,
body.splash-active #sneaky-panel { visibility: hidden; }

/* ── Splash overlays (studio bumper + title screen + briefing) ──
   absolute (not fixed) so they're scoped to the 1200x750 canvas, not the viewport. */
.splash-overlay[hidden] { display: none !important; }
.splash-overlay {
  position: absolute;
  inset: 0;
  z-index: 9000;
  background: #0a0907;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.splash-overlay.splash-visible { pointer-events: auto; }
.splash-overlay.splash-visible { opacity: 1; }
.splash-overlay img {
  /* Fill the splash overlay end-to-end (matches the post-Resume game width).
     `cover` crops slightly rather than leaving dark gutters on the sides. */
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.splash-controls {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
}
#splash-begin {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 2px solid var(--c-ink);
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: var(--shadow-paper);
  transition: transform 0.12s ease, background 0.12s ease;
}
#splash-begin:hover {
  background: #f7ecd1;
  transform: translateY(-1px);
}
#splash-begin:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
#splash-audio-toggle {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--c-paper);
  border: 1px solid rgba(237, 225, 200, 0.4);
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
#splash-audio-toggle:hover { border-color: var(--c-paper); }
.splash-resume-note {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--c-paper);
  opacity: 0.78;
  font-style: italic;
}
.splash-restart {
  margin-top: 14px;
  background: transparent;
  border: none;
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s ease;
}
.splash-restart:hover { opacity: 0.95; }

.briefing-disclaimer {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;
  width: 92%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--c-paper);
  opacity: 0.38;
  text-align: center;
  padding: 0 16px;
  pointer-events: none;
}

/* ── Briefing screen ── */
.briefing-overlay {
  background:
    radial-gradient(ellipse at center, #2a2218 0%, #0e0a06 70%, #050402 100%);
}
.briefing-stage {
  width: 760px;
  max-width: 92%;
  background: var(--c-paper);
  color: var(--c-ink);
  padding: 38px 48px 42px;
  border: 1px solid #1c1a17;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  position: relative;
  font-family: var(--font-body);
  transform: rotate(-0.4deg);
}
.briefing-stage::before {
  content: "";
  position: absolute;
  top: -8px; left: 28px;
  width: 60px; height: 18px;
  background: var(--c-tape);
  transform: rotate(-2deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.briefing-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px 3px;
  line-height: 1;
  border: 2px solid var(--c-stamp);
  color: var(--c-stamp);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  font-weight: bold;
  transform: rotate(-2deg);
  margin-bottom: 18px;
}
.briefing-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  letter-spacing: 0.08em;
  margin: 0 0 22px;
  color: var(--c-ink);
  text-transform: uppercase;
  border-bottom: 2px solid var(--c-ink);
  padding-bottom: 12px;
}
.briefing-body { min-height: 180px; }
.briefing-line {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.briefing-line.visible {
  opacity: 1;
  transform: translateY(0);
}
.briefing-line-3 strong {
  color: var(--c-stamp);
  font-weight: bold;
  letter-spacing: 0.04em;
}
.briefing-line-4 {
  color: var(--c-ink-soft);
  font-style: italic;
}
.briefing-open {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 26px auto 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--c-ink);
  color: var(--c-paper);
  border: 2px solid var(--c-ink);
  padding: 14px 28px 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 #000;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  opacity: 0;
  animation: briefing-cta-fade 0.6s 0.3s ease forwards;
}
.briefing-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #000;
}
@keyframes briefing-cta-fade {
  to { opacity: 1; }
}
.briefing-skip {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: 1px solid rgba(237, 225, 200, 0.25);
  color: rgba(237, 225, 200, 0.55);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  z-index: 1;
  transition: color 0.15s, border-color 0.15s;
}
.briefing-skip:hover {
  color: var(--c-paper);
  border-color: var(--c-paper);
}

/* ── Onboarding overlay (first-time only) ── */
.onboarding-overlay {
  /* Full-viewport so nothing from the case canvas leaks at the edges on wide
     displays or when body.case-closed has grown the body for an end-scene. */
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, #2a2218 0%, #0e0a06 70%, #050402 100%);
}
.onboarding-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  padding: 26px 32px 28px;
  width: 720px;
  max-width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
.onboarding-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-stamp);
  color: var(--c-stamp);
  font-weight: bold;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  padding: 7px 12px 3px;
  line-height: 1;
  transform: rotate(-2deg);
  margin-bottom: 14px;
  font-family: var(--font-body);
  background: rgba(177, 58, 46, 0.06);
}
.onboarding-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 10px;
  color: var(--c-accent);
  letter-spacing: 0.02em;
}
.onboarding-intro {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 16px;
}
.onboarding-tabs {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.onboarding-tabs li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid rgba(28, 26, 23, 0.12);
}
.onboarding-tabs li:last-child {
  border-bottom: 1px solid rgba(28, 26, 23, 0.12);
}
.onboarding-tab-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--c-accent);
}
.onboarding-tab-body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.onboarding-foot {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  font-style: italic;
  margin: 12px 0 0;
  text-align: center;
}
.onboarding-save {
  font-size: 0.88rem;
  color: var(--c-ink);
  margin: 14px auto 6px;
  padding: 10px 16px;
  text-align: center;
  background: rgba(177, 58, 46, 0.08);
  border: 1px solid rgba(177, 58, 46, 0.22);
  border-radius: 3px;
  max-width: 560px;
  line-height: 1.45;
}
.onboarding-card .briefing-open {
  margin-top: 18px;
}

/* ── Header audio toggle ── */
.header-audio-btn {
  background: transparent;
  border: 1px solid rgba(237, 225, 200, 0.3);
  color: var(--c-paper);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Unicode glyphs ♪ and ⚙ are top-heavy in their em-box, so flex-centering
     puts the LINE-BOX in the middle but the visible glyph sits high. The
     asymmetric padding nudges the glyph down to the visual centre. */
  padding: 3px 0 0;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}
.header-audio-btn:hover { opacity: 1; border-color: var(--c-paper); }
.header-audio-btn.audio-active {
  opacity: 1;
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* ── Custom right-click credits menu ── */
.ds-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  box-shadow: var(--shadow-paper);
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 0;
  min-width: 260px;
}
.ds-context-menu a {
  display: block;
  padding: 10px 14px;
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.ds-context-menu a:hover {
  background: var(--c-accent);
  color: var(--c-paper);
}

/* ========================================================================
   ── WBPD MESSENGER (Lt. Jenkins IM, File Report view) ──────────────
   Styled as a fictional precinct messaging tool, built ~2008 and never
   replaced. Drab, functional, official. NOT a slick chat app.
   ======================================================================== */
.im-window {
  /* Modern UI font stack for the WBPD Messenger. This is a 1990s-style chat
     client, not a typewritten page, so we locally override --font-body and
     --font-display. Everything inside the IM that uses these vars (which is
     most of it) picks up the system font automatically. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 3px),
    var(--c-paper);
  border: 1px solid #1c2333;
  font-family: var(--font-body);
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px #fff7e2, 0 6px 22px rgba(0,0,0,0.45);
}
.im-titlebar {
  background: linear-gradient(180deg, #2b3955 0%, #1a233a 100%);
  color: #cfd6e6;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid #0c1322;
}
.im-app-name { font-weight: bold; color: #e8edf6; }
.im-user-status { font-family: var(--font-body); color: #8da6dc; }

.im-recipient-bar {
  background: #f0e4c2;
  border-bottom: 1px solid #b09a6a;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a3f2a;
}
.im-recipient-label { color: #7a6a48; }
.im-recipient-name { color: #1a1a1a; font-weight: bold; flex: 1; }
.im-recipient-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2d5b2d;
}
.im-status-dot {
  width: 8px; height: 8px;
  background: #2d8f2d;
  border-radius: 50%;
  box-shadow: 0 0 4px #5fc25f;
}

/* Thread (the message log) */
.im-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  background:
    linear-gradient(180deg, rgba(255,250,235,0.4), rgba(255,250,235,0.7)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 28px);
  scroll-behavior: smooth;
}
.im-thread::-webkit-scrollbar { width: 8px; }
.im-thread::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.im-thread::-webkit-scrollbar-thumb { background: var(--c-ink-soft); }

/* Messages */
.im-message {
  max-width: 80%;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: #fffaea;
  border-left: 3px solid #aaa;
  font-size: 0.82rem;
  line-height: 1.5;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.im-message.from-sneaky {
  margin-left: auto;
  border-left: none;
  border-right: 3px solid var(--c-accent);
  text-align: left;
  background: #fff5e0;
}
.im-message.from-npc {
  margin-right: auto;
  border-left: 3px solid #2b3955;
  background: #fffaea;
}
.im-msg-meta {
  display: flex;
  gap: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a6a48;
  margin-bottom: 4px;
}
.from-sneaky .im-msg-meta { justify-content: flex-end; }
.im-msg-name { font-weight: bold; color: var(--c-ink); }
.from-npc .im-msg-name { color: #2b3955; }
.from-sneaky .im-msg-name { color: var(--c-accent); }
.im-msg-time { color: #9b8c66; font-family: var(--font-body); }
.im-msg-body { color: var(--c-ink); }

/* Sneaky's structured report renders as a stack of labeled lines */
.im-report {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.im-msg-line {
  display: block;
  font-size: 0.8rem;
}
.im-msg-line-key {
  display: inline-block;
  min-width: 110px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6a48;
  font-weight: bold;
}

/* Attachments under a message */
.im-attachments {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #b09a6a;
}
.im-attachment {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f4ead0;
  border: 1px solid #b09a6a;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.im-attachment:hover {
  background: #fff5d8;
  border-color: var(--c-accent);
}
.im-attachment-clip { color: #7a6a48; }
.im-attachment-name { color: var(--c-ink); }

/* System lines: centered, all caps, "official log" feel */
.im-system {
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9b8c66;
  margin: 12px 0;
  font-family: var(--font-body);
}

/* Typing indicator: flat, no bouncing dots */
.im-typing {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a6a48;
  margin: 6px 0 14px;
  padding: 4px 8px;
}
.im-typing-name { color: #2b3955; font-weight: bold; }
.im-caret {
  display: inline-block;
  color: var(--c-accent);
  animation: im-caret-blink 1s step-end infinite;
  font-weight: bold;
}
@keyframes im-caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Composer. Paper tone to match the thread, dark accents only where helpful */
.im-composer {
  background: #ece0bd;
  border-top: 2px solid #b09a6a;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.im-compose-preview {
  background: #fffaea;
  border: 1px solid #b09a6a;
  color: var(--c-ink);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.6;
  min-height: 44px;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: inset 0 1px 0 #fff7e2;
}
.im-compose-placeholder {
  color: #8a7d5a;
  font-style: italic;
}
.im-compose-field {
  display: block;
}
.im-compose-field.editable {
  background: #fffaea;
  border: 1px dashed transparent;
  color: var(--c-ink);
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 3px 6px;
  margin: 1px 0;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
}
.im-compose-field.editable:hover {
  background: #fff5d8;
  border-color: #b09a6a;
}
.im-compose-field.editable.active {
  background: #fff0c2;
  border-color: var(--c-accent);
  border-style: solid;
}
.im-compose-pencil {
  float: right;
  color: #8a7d5a;
  font-size: 0.82rem;
  opacity: 0.5;
  margin-left: 6px;
}
.im-compose-field.editable:hover .im-compose-pencil,
.im-compose-field.editable.active .im-compose-pencil {
  opacity: 1;
  color: var(--c-accent);
}
.im-compose-key {
  display: inline-block;
  min-width: 110px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-stamp);
  font-weight: bold;
}
.im-compose-cursor {
  display: block;
  opacity: 0.9;
  padding: 3px 6px;
}
.im-picker-help {
  font-size: 0.78rem;
  color: var(--c-ink);
  line-height: 1.45;
  margin: -2px 0 10px;
  padding: 8px 10px;
  background: #fff5d8;
  border-left: 3px solid var(--c-accent);
}
.im-picker-help strong {
  color: var(--c-stamp);
  white-space: nowrap;
}

/* Pickers */
.im-picker, .im-chain-picker {
  background: #fffaea;
  border: 1px solid #b09a6a;
  padding: 10px 12px;
  color: var(--c-ink);
  box-shadow: inset 0 1px 0 #fff7e2;
}
.im-picker-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-stamp);
  font-weight: bold;
  margin-bottom: 8px;
}
.im-picker-empty {
  font-size: 0.78rem;
  color: #8a7d5a;
  font-style: italic;
}
.im-picker-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.im-picker-opt {
  background: #f4ead0;
  color: var(--c-ink);
  border: 1px solid #b09a6a;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.12s;
}
.im-picker-opt:hover {
  background: #fff5d8;
  border-color: var(--c-accent);
}
.im-picker-opt.selected {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* Chain picker */
.im-chain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.im-chain-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f4ead0;
  color: var(--c-ink);
  border: 1px solid #b09a6a;
  font-family: var(--font-body);
  font-size: 0.74rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
}
.im-chain-pill:hover {
  background: #fff5d8;
  border-color: var(--c-accent);
}
.im-chain-pill.attached {
  background: #fbe6c4;
  border-color: var(--c-accent);
  color: var(--c-ink);
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.im-chain-pill.attached .im-chain-clip { color: var(--c-accent); }
.im-chain-pill.from-pinboard {
  /* a faint redaction-red border tint to mark "you pinned this on the corkboard" */
  border-color: #c98d83;
}
.im-chain-pill.from-pinboard.attached {
  border-color: var(--c-accent);
}
.im-chain-clip { color: #7a6a48; flex-shrink: 0; }
.im-chain-badge {
  margin-left: auto;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-stamp);
  font-weight: bold;
  padding: 2px 5px;
  border: 1px solid var(--c-stamp);
  border-radius: 2px;
  flex-shrink: 0;
}
.im-chain-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* Action buttons */
.im-compose-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.im-action-btn {
  background: var(--c-accent);
  color: #fff;
  border: 1px solid #6e2118;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 0 #4a1a13;
  transition: transform 0.1s, box-shadow 0.1s;
}
.im-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #4a1a13;
}
.im-action-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 #4a1a13;
}
.im-action-btn:disabled {
  opacity: 0.4;
  cursor: wait;
}
.im-action-btn.ghost {
  background: transparent;
  color: #b8ad95;
  border-color: #4a443a;
  box-shadow: none;
}
.im-action-btn.ghost:hover:not(:disabled) {
  color: #fff;
  border-color: var(--c-accent);
  transform: none;
  box-shadow: none;
}

/* ── Stuck? button (sits in the header, next to the music toggle) ── */
.stuck-btn {
  background: transparent;
  border: 1px solid rgba(237, 225, 200, 0.3);
  color: var(--c-paper);
  padding: 9px 12px 1px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.55;
  line-height: 1;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.stuck-btn[hidden] { display: none !important; }
.stuck-btn:hover {
  opacity: 1;
  color: var(--c-paper);
  border-color: var(--c-paper);
}

/* ── Day pill (Case 002 day-advance) ── */
.day-pill {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  border: 1px solid rgba(237, 225, 200, 0.35);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(237, 225, 200, 0.05);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
body.splash-active .day-pill,
body.case-closed .day-pill { display: none; }
.day-pill-label,
.day-pill-num {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: var(--c-paper);
  /* Cap-only text in line-height:1 sits in the top portion of its line-box.
     Nudge content down 5px to bring the optical baseline to the centre of
     the pill, matching how ♪/⚙ are nudged in their circular buttons. */
  padding-top: 5px;
  padding-bottom: 0;
}
.day-pill-label { opacity: 0.55; padding-right: 4px; }
.day-pill-num {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-left: 4px;
  padding-right: 10px;
  border-right: 1px solid rgba(237, 225, 200, 0.25);
}
.end-day-btn {
  background: transparent;
  border: 0;
  color: var(--c-paper);
  padding: 5px 12px 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.12em;
  text-transform: inherit;
  cursor: pointer;
  opacity: 0.6;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.end-day-btn:hover {
  opacity: 1;
  background: rgba(237, 225, 200, 0.08);
}
.end-day-btn:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* "Day advanced" toast — brief flash when endDay() fires. */
.day-advance-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--c-paper);
  color: var(--c-ink);
  padding: 10px 22px;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--c-ink);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.day-advance-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Themed confirm modal (replaces window.confirm) ── */
.ds-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.78);
  backdrop-filter: blur(2px);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ds-confirm-card {
  background: var(--c-paper);
  border: 1px solid var(--c-paper-edge);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  padding: 22px 26px 20px;
  width: 460px;
  max-width: 95%;
  position: relative;
}
.ds-confirm-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: var(--c-accent);
}
.ds-confirm-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 18px;
}
.ds-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.ds-confirm-btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ds-confirm-btn:hover {
  background: var(--c-ink);
  color: var(--c-paper);
}
.ds-confirm-ok {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.ds-confirm-ok:hover {
  background: var(--c-stamp);
  border-color: var(--c-stamp);
  color: #fff;
}
.ds-confirm-ok.is-destructive {
  background: var(--c-stamp);
  border-color: var(--c-stamp);
}
.ds-confirm-ok.is-destructive:hover {
  background: #8a2820;
  border-color: #8a2820;
}

/* ============================================================
   Compact + scale-to-fit case layout — LOCKED IN 2026-06-09 (mirrors Case 1).
   1100x800 design (#game-scale) scaled as one unit to fit the viewport minus a
   bottom gutter for the Mediavine sticky video; body is the full-viewport room;
   ads inject outside #game-scale so they don't scale. --gs set by the resize
   script in index.html. See Case 1 main.css for full rationale.
   ============================================================ */
body {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  display: block;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
#game-scale {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1100px;
  height: 800px;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--gs, 1));
  background: var(--c-bg);
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: grid;
  grid-template-rows: 26px 32px 1fr;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "chrome chrome"
    "header header"
    "main   sneaky";
}
body:not(.sneaky-visible) #game-scale,
body.fullboard #game-scale {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "chrome"
    "header"
    "main";
}
#mm-chrome { font-size: 0.6rem; padding: 0 11px; gap: 8px; }
#mm-chrome .mm-link { font-size: 0.6rem; padding: 3px 5px; }
#mm-chrome .mm-case-tag,
#mm-chrome .mm-sep.mm-case-tag { font-size: 0.6rem; }
#mm-chrome .mm-premium-badge { font-size: 0.52rem; }
#app-header { height: 32px; padding: 0 11px; gap: 12px; }
#app-nav button { font-size: 0.68rem; padding: 4px 8px; }
.splash-overlay { box-sizing: border-box; padding-bottom: 88px; }
.splash-overlay img { max-height: min(60vh, 540px); }
.briefing-disclaimer { bottom: 100px; }