/* 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;
}

/* Fluid canvas: fills the player's viewport up to a 1400px wide / 1000px
   tall cap. M-M chrome bar (30px) + game header (36px) + content (1fr).
   Manila/ink themed. Splash overlays sit ON TOP of the canvas, scoped to it. */
body {
  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;
  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 base look (color, background, font) comes from
   theme/detective-sneaky-theme.css. Case-game chrome is more compact than the
   other DS surfaces, so the only thing we override here is the sizing. */
#mm-chrome .mm-premium-badge {
  padding: 2px 6px 1px;
  font-size: 0.58rem;
}
/* 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-game-rail,
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;
}
.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).
   7-column grid, each card slightly tilted per :nth-child for hand-pinned feel. */
.case-file-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
/* 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; }

/* ── 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;
}
.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 ── */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
  width: 100%;
}
.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;
  /* Long investigate-action lists overflow the 380px image + meta inside the
     92% max-height. Let the card scroll its own content rather than hiding
     the buttons under the card edge. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 68, 58, 0.55) transparent;
}
.location-focus-card::-webkit-scrollbar { width: 8px; }
.location-focus-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a7b5a 0%, #6a5d44 100%);
  border-radius: 4px;
}
.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: 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;
}
.location-focus-card .focus-close:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* 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: default;
}
.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: default;
  opacity: 0.9;
}
.records-row.done:hover { padding-left: 6px; background: transparent; color: #8a8170; }
.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 {
  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;
}
/* Locations uses the same whiteboard backdrop but DOES NOT get overflow:auto.
   Explicit height: 100% so the inner .locations-grid (flex:1 + height:100%)
   has a definite parent height — without it the flex→grid chain collapses to
   intrinsic and cards shrink to their text-only height. */
#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: hidden;
  height: 100%;
  min-height: 0;
}
/* And force app-main to claim its full grid track height so the chain has a
   definite root. Without this, when body height is min(100vh, …), some
   browsers resolve the 1fr row as indefinite for child %-height purposes.
   position: relative makes it the positioning context for overlays
   (location/suspect/evidence focus) so inset:0 covers just app-main, not
   the chrome + nav header above it. */
#app-main { height: 100%; position: relative; }
#view-case-file.active::-webkit-scrollbar,
#view-interviews.active::-webkit-scrollbar,
#view-records-lab.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 {
  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 {
  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 {
  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 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 4px solid #fff8e7;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}
.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;
}
.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 — Eleanor's polaroid. DECEASED stamp instead of a status. */
.cork-board-suspect.victim .cork-board-suspect-thumb {
  filter: grayscale(0.2) contrast(1.05);
}
.cork-board-suspect.victim::after {
  content: "DECEASED";
  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: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. */
#view-report.active:has(.endscene) {
  justify-content: center;
}

/* 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). */
/* Scope the document-scroll override to ONLY when the report view (the one
   that actually renders the end-scene) is active. Without this scope, the
   body shrinks to content on every view — case-file, interviews, etc. lose
   their full-height fill and show empty dark space below. */
body.case-closed:not(.splash-active):has(#view-report.active) {
  height: auto;
  min-height: 750px;
  overflow: visible;
  grid-template-rows: 30px 36px auto;
}
body.case-closed:not(.splash-active):has(#view-report.active) #app-main {
  overflow: visible;
  height: auto;
}
body.case-closed:not(.splash-active):has(#view-report.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: 14px; 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));
}
.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-ghost:hover {
  background: var(--c-ink);
  color: var(--c-paper);
}
.endscene-cta-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.endscene-cta-line-quiet {
  opacity: 0.7;
  font-size: 0.88em;
  margin-top: 4px;
}
.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); }

/* ── 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; }

/* Side rails. Sit in the warm-noire room outside the 1400px-capped body on
   wide displays. Always-on during gameplay (not just end-scene like case 002),
   hidden during splash + on narrow viewports + when slot ids aren't set. */
.ds-game-rail {
  position: fixed;
  top: 90px;
  width: 160px;
  height: 600px;
  display: none;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}
.ds-game-rail[hidden] { display: none !important; }
.ds-game-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);
}
.ds-game-rail-left  { left:  max(8px, calc(50vw - 870px)); }
.ds-game-rail-right { right: max(8px, calc(50vw - 870px)); }
/* Show only when viewport is wide enough that body (max 1400px) + 160px rail
   on each side + 16px gutter still fits. 1400 + 320 + 16 = 1736 minimum. */
@media (min-width: 1736px) {
  body:not(.splash-active) .ds-game-rail:not([hidden]) { display: flex; }
}
/* On the end-scene the document becomes scrollable, so a position:fixed bottom
   anchor would land mid-page covering content. Use the inline endscene-ad-slot
   for monetization on the case-closed screen 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; }
}
/* 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 {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  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 {
  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-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: 0.9rem;
  line-height: 1;
  opacity: 0.55;
  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 {
  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: 4px 12px;
  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;
  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);
}

/* ── Ask Sneaky chat overlay ── */
.sneaky-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, 0.82);
  backdrop-filter: blur(3px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: sneaky-chat-fade-in 0.18s ease;
}
@keyframes sneaky-chat-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sneaky-chat-modal {
  max-width: 560px;
  width: 100%;
  animation: sneaky-chat-pop-in 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes sneaky-chat-pop-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.sneaky-chat-modal .im-thread {
  min-height: 140px;
  max-height: 50vh;
}
/* Sneaky's message body uses the display serif (Crimson Pro), to read warmer
   and more conversational than the precinct-issue typewriter font Jenkins uses. */
.sneaky-chat-modal .im-msg-body {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
}
.sneaky-chat-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: rgba(10, 8, 6, 0.55);
  border-top: 1px solid rgba(237, 225, 200, 0.15);
}
.sneaky-chat-close {
  background: var(--c-ds-red, #8a2424);
  color: #fff;
  border: none;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.sneaky-chat-close:hover {
  background: #a83030;
}

/* ── 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;
}

/* End-scene podcast CTA — appears after case-closed, between (hidden) ad slot
   and the next-case mailing list. Links to /podcast.php for this case. */
.endscene-podcast {
  background: rgba(28, 26, 23, 0.06);
  border: 1px solid rgba(28, 26, 23, 0.18);
  border-left: 3px solid var(--c-accent);
  padding: 20px 24px;
  margin: 14px auto 18px;
  text-align: left;
  max-width: 540px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.endscene-podcast-stamp {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--c-stamp);
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.endscene-podcast-head {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--c-ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.endscene-podcast-blurb {
  color: var(--c-ink);
  margin: 0 0 14px;
  line-height: 1.55;
  font-size: 0.95rem;
}
.endscene-podcast-blurb em {
  color: var(--c-stamp);
  font-style: italic;
  font-weight: 600;
}
.endscene-podcast-btn {
  display: inline-block;
  padding: 9px 18px;
  background: var(--c-stamp);
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-stamp);
  transition: background 0.15s, border-color 0.15s;
}
.endscene-podcast-btn:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-paper);
}