:root {
  --bg: #0e0f13;
  --surface: #171922;
  --surface-2: #1f2230;
  --border: #2b2f3f;
  --text: #ebe8e1;
  --muted: #9a9caa;
  --accent: #d4a24c;
  --accent-ink: #1a1408;
  --danger: #e5766b;
  --success: #6fbf73;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1 { margin: 0 0 1rem; line-height: 1.2; }
.muted { color: var(--muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}
.brand {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
/* Dashboard header: brand left, username + points centered, language/settings/sign out right.
   (Mobile collapses all of it behind the Options toggle -- see the max-width block below.) */
.dashboard-header { display: grid; grid-template-columns: 1fr auto 1fr; }
.dashboard-header .brand { grid-column: 1; }
.dashboard-header .user-id { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.dashboard-header .user-bar { grid-column: 3; justify-self: end; }
.user-name { font-weight: 600; }
.user-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
/* Language switcher: a single compact dropdown rather than two buttons -- sits inline with
   Dashboard/Sign out as one tidy row instead of stacking. */
.lang-switcher { display: flex; align-items: center; gap: 0.5rem; }
.lang-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lang-select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
/* Header controls (language dropdown, Dashboard/Settings/Sign out) share one height and text size,
   so they line up as a row instead of the buttons towering over the dropdown. */
.site-header .btn:not(.btn-small), .site-header .lang-select {
  box-sizing: border-box;
  height: 2.25rem;
  padding-block: 0;
  font-size: 0.9rem;
  line-height: 1;
}
/* Explicit centering: `a.btn { display: inline-block }` further down would otherwise win for the
   Dashboard link and leave its text stuck at the top of the fixed-height box (real <button>s
   centre their text on their own, links don't). */
.site-header .btn:not(.btn-small) { display: inline-flex; align-items: center; justify-content: center; padding-inline: 1rem; }
.site-header .lang-select { padding-inline: 0.6rem; }
.points {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.invite {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1100;
  width: min(92vw, 26rem); padding: 0.9rem 1rem; border-radius: 10px;
  background: var(--surface, #1c1c22); border: 1px solid var(--accent); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.invite[hidden] { display: none; }
.invite p { margin: 0 0 0.7rem; font-weight: 600; }
.invite-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { border-color: var(--text); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-link {
  padding: 0.25rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--text); }

/* Landing */
.hero {
  flex: 1;
  display: grid;
  place-content: center;
  padding: 4rem 1rem;
  text-align: center;
}
.hero h1 { font-size: clamp(2.25rem, 7vw, 4rem); }
.tagline { max-width: 32rem; margin: 0 auto; color: var(--muted); font-size: 1.125rem; }

/* Login */
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-size: 0.9rem; color: var(--muted); }
.field input {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.form-error { min-height: 1.5em; margin: 0 0 0.75rem; color: var(--danger); font-size: 0.9rem; }
.auth-extras { margin-top: 1.25rem; text-align: center; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: var(--muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-switch { margin: 1rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* Dashboard */
.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem); flex: 1; }
.dashboard-container { max-width: 1300px; }
/* One game per row, full width: text on the left, buttons on the right (stacked on mobile). */
.games-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.game-card { padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.game-card h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.game-card p { margin: 0; color: var(--muted); }
.game-card .game-solved { color: var(--accent); font-size: 0.85rem; }
.game-card .game-stat { color: var(--muted); font-size: 0.85rem; margin: 0; }
.empty-state { padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); text-align: center; }

/* Games toolbar: search + owned/buy filter */
.games-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.games-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Ownership badges (also used inside the story dialog) */
/* Compound selectors (not just .badge-owned) so these beat the plain .badge rule below
   regardless of source order -- both classes are always applied together. */
.badge.badge-owned { border-color: var(--accent); color: var(--accent); }
.badge.badge-buy { border-color: var(--muted); color: var(--muted); }
.badge.badge-hidden { border-color: var(--danger); color: var(--danger); }

/* Dashboard additions */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.page-head h1 { margin: 0; }
.section-title { margin: 2rem 0 1rem; font-size: 1.15rem; }
.game-card { display: flex; flex-direction: column; gap: 0.75rem; }
.game-card h2, .game-card p { margin: 0; }
.game-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.game-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.games-grid .game-card { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1.5rem; row-gap: 0.5rem; }
.games-grid .game-card > :not(.game-card-actions) { grid-column: 1; }
.games-grid .game-card > .game-card-actions { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-content: flex-end; }
.games-grid .game-card-head { justify-content: flex-start; align-items: center; flex-wrap: wrap; }

/* Settings dialog */
.settings-dialog { width: min(460px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow-y: auto; }
.settings-dialog h3 { margin: 1.25rem 0 0.75rem; font-size: 1rem; }
.settings-dialog form + form { margin-top: 1.5rem; padding-top: 0.25rem; border-top: 1px solid var(--border); }
.settings-dialog .field input { text-transform: none; letter-spacing: normal; }
.settings-close { margin-top: 1.5rem; }
.form-msg { min-height: 1.5em; margin: 0 0 0.75rem; color: var(--danger); font-size: 0.9rem; }
.form-msg.ok { color: var(--accent); }

.btn-small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--bg); }

/* Join dialog */
.dialog { width: min(420px, calc(100vw - 2rem)); padding: 1.75rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog h2 { margin: 0 0 0.5rem; }
.dialog p.muted { margin: 0 0 1.25rem; font-size: 0.9rem; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; }
.dialog .field input { text-transform: uppercase; letter-spacing: 0.1em; }

/* Story dialog */
.story-dialog { width: min(600px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow-y: auto; }
.story-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.story-head h2 { margin: 0; }
.story-section { margin-bottom: 1.25rem; }
.story-section h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.story-section p { margin: 0; white-space: pre-wrap; }
.story-video-wrap { margin-bottom: 1.25rem; }
.story-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; }
.story-video-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}
.story-actions { display: flex; gap: 0.5rem; }

/* Suspect interrogation chat: replaces the Suspects tab's own content in place (see
   suspects-list/interrogate-view hidden toggling in game.js) -- not a <dialog>, so it never
   dims or blocks the rest of the screen. .interrogate-view stacks the (optional) rich header
   above .interrogate-body, which holds the actual chat-left/portrait-right row. */
/* --interrogate-portrait-height is the one source of truth for how tall the portrait is --
   .interrogate-messages matches it exactly (see below) so the chat box is never taller than the
   photo next to it, instead of the two drifting out of sync as separate magic numbers. */
.interrogate-view { display: flex; flex-direction: column; gap: 1rem; --interrogate-portrait-height: min(55vh, 520px); }
.interrogate-body { display: flex; gap: 1.5rem; align-items: flex-start; }
.interrogate-chat { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
/* height is capped independently via a fixed/viewport-relative height + object-fit: cover, NOT
   aspect-ratio (which ties height directly to width -- on a wide .game-container, a true
   50%-width photo would also be enormous in height). Stacks on mobile (see the @media block
   near the bottom of this file). */
/* The portrait is a true 4:3 box exactly --interrogate-portrait-height tall (width = height * 4/3), so a 4:3
   photo shows whole and the chat box beside it is the same height. The chat column takes the rest. */
.interrogate-portrait { flex: 0 1 calc(var(--interrogate-portrait-height) * 4 / 3); min-width: 0; position: sticky; top: 1rem; }
.interrogate-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: 12px; }
.interrogate-photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 4rem;
  font-weight: 600;
}
.interrogate-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.75rem; margin-bottom: 1rem; }
.interrogate-head h3 { margin: 0; font-size: 1.1rem; width: 100%; }
.interrogate-subtitle { margin: -0.3rem 0 0; font-size: 0.85rem; }
.interrogate-head .btn { margin-left: auto; }

/* Rich header: counters + press meter + status line, structured suspects only (suspect.
   structured_interrogation -- see CLAUDE.md "Suspect interrogation"). Hidden entirely, via the
   [hidden] attribute in game.js, for suspects still on the plain chat pipeline. */
.interrogate-rich-header {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.interrogate-counters { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.counter-stat { display: flex; flex-direction: column; }
.counter-stat .counter-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.counter-stat .counter-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.counter-stat.counter-warning .counter-value { color: var(--danger); }
.counter-stat.counter-reveal .counter-value { color: var(--success); }

.interrogate-status-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.press-meter { display: flex; align-items: center; gap: 0.5rem; }
/* Under the portrait, not up in the header row next to the lawyer line -- centered under the
   image rather than pinned to the row's right edge. */
.press-meter-under-photo { justify-content: center; margin-top: 0.75rem; }
.press-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.press-bars { display: inline-flex; gap: 0.2rem; }
.press-bar { width: 1.1rem; height: 0.5rem; border-radius: 3px; background: var(--border); }
.press-bar.press-bar-active { background: var(--accent); }
/* Breaks (level 3): the meter itself turns red instead of accent-gold -- a calmer color at
   the point the character is actually crying/confessing would undersell it. */
.press-bars.press-breaking .press-bar.press-bar-active { background: var(--danger); }
.press-state { font-size: 0.8rem; font-weight: 600; }
.interrogate-status-line { margin: 0; font-size: 0.85rem; font-style: italic; }

.cooldown-banner {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: rgba(229, 118, 107, 0.12);
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Fixed height, not min/max -- so the box is the same size from the very first message and never
   grows as the conversation goes on (it only scrolls internally). A min/max pair here would make
   it start small and visibly grow taller with every reply until it finally hit the cap, which is
   the "chat keeps stretching the screen" the owner was flagging. Matches the portrait's own
   height (--interrogate-portrait-height, set on .interrogate-view) instead of its own separate
   value -- the two were drifting apart (50vh vs the portrait's min(55vh, 520px)), which is what
   made the chat column look taller than the photo next to it with the rich header on top. */
.interrogate-messages {
  height: var(--interrogate-portrait-height);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.interrogate-message {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  max-width: 85%;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.interrogate-message-player { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
/* Default (role=suspect, no reveal this turn): plain white/text-colored, per the owner's
   "normal question white" -- color modifiers below override this for the lawyer and for a
   suspect reply that was tagged a real reveal (see game.js' messageBubble()). */
.interrogate-message-suspect { align-self: flex-start; background: var(--surface-2); color: var(--text); }
.interrogate-message-advokat {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--danger);
  border-left: 3px solid var(--danger);
}
.interrogate-message-category-reveal { color: var(--success); }
.interrogate-message-speaker { display: block; margin-bottom: 0.2rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.interrogate-message-handling { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; font-style: italic; color: var(--muted); }
.interrogate-form { display: flex; gap: 0.5rem; }
.interrogate-form input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* Game window */
.game-container { max-width: 2000px; }
.game-header { display: grid; grid-template-columns: 1fr auto 1fr; }
/* Explicit columns so the layout holds when the host-only middle block is hidden (guests). */
.game-header .brand { grid-column: 1; }
.join-info { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
/* Language switcher + Dashboard as one row, right-aligned. */
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.join-field { display: flex; align-items: center; gap: 0.5rem; }
.join-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.join-value { color: var(--accent); font: 600 1.25rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.15em; }

/* Mobile-only "Options" panel (see the @media block below for its actual layout): bundles
   Dashboard/language/Game ID/password behind one toggle instead of fitting them in the header
   row. display:contents makes the wrapper invisible to layout by default, so .join-info and
   .header-actions act as direct grid items of .game-header exactly as they did before this
   wrapper existed -- desktop is untouched. */
.header-controls { display: contents; }
/* Beats the global [hidden]{display:none!important} reset (higher specificity, same
   !important) so the closed-by-default state below doesn't also hide this on desktop, where it
   must always show. The mobile media query re-overrides this back to a real display:none. */
.header-controls[hidden] { display: contents !important; }
.options-toggle { display: none; }

.panel { padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.panel h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.case-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.player-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.player { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.player-tags { display: inline-flex; gap: 0.35rem; margin-right: auto; margin-left: 0.5rem; }
.badge { padding: 0.05rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.75rem; }
.panel-actions { margin-top: 1rem; display: grid; gap: 0.75rem; }
.panel-actions p { margin: 0; font-size: 0.9rem; }

/* Players: a compact button in the header's navigation (left of Language); its list opens as a
   dropdown under it. On a phone it sits inside the Options panel instead (see the @media block). */
.players-dock { position: relative; }
.players-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.players-toggle:hover { border-color: var(--muted); }
.players-chevron { color: var(--muted); transition: transform 0.15s ease; }
.players-toggle[aria-expanded="true"] .players-chevron { transform: rotate(90deg); }
.players-body {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 40;
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Case panel content (Briefing / Scene / Evidence / Suspects). Extra bottom padding on the
   page reserves room for the fixed .tab-dock below so it never overlaps the last tab's content. */
.case-panel { margin-top: 1.5rem; }
#game-content { padding-bottom: 6rem; }

/* The tab switcher itself: a floating dock (like macOS/GNOME Dash-to-Dock), centered at the
   bottom of the SCREEN (not the panel) and sized to fit only its own items -- width: fit-content
   is what keeps it from stretching to fill the row; margin-inline: auto centers a fit-content
   box that isn't itself positioned. */
.tab-dock {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  gap: 0.3rem;
  padding: 0.4rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tab {
  flex: none;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
/* Phone-only section arrows (see the @media block); hidden on desktop where the full dock fits. */
.tab-arrow, .tab-current { display: none; }
.tab:hover { color: var(--text); background: var(--surface-2); transform: translateY(-2px); }
.tab.active { color: var(--accent-ink); background: var(--accent); font-weight: 600; }

.briefing-section { margin-bottom: 1.5rem; }
.briefing-section:last-child { margin-bottom: 0; }
.briefing-section h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.transcript { padding: 0.85rem 1rem; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 8px 8px 0; font-size: 0.95rem; }
.transcript-meta { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85em; }
.transcript-meta:last-of-type { margin-bottom: 1.1rem; }
.transcript-line { margin: 0 0 1rem; line-height: 1.6; }
.transcript-line:last-child { margin-bottom: 0; }
.transcript-time { margin-right: 0.6em; color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.transcript-speaker { margin-right: 0.4em; font-weight: 700; }
/* Colors cycle by order of first appearance, so this stays generic across any game's transcript
   (not tied to specific character names) -- reuses the site's existing --danger/--accent tokens
   rather than inventing new colors. */
.transcript-speaker.speaker-1 { color: var(--danger); }
.transcript-speaker.speaker-2 { color: var(--accent); }
.transcript-speaker.speaker-3 { color: var(--text); }

/* Scene category of the Case files list: floor plans / reference images (see sceneCardContent in game.js). */
/* Content images use the shared .app-image wrapper (game.js appImage, ImagesInstructions.md): wrapper
   = width:100% + max-width + aspect-ratio (set inline); the img fills it. Centered in its card. */
.app-image { width: 100%; margin: 0 auto; }
.app-image img { display: block; width: 100%; height: 100%; border-radius: 8px; }
.scene-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Evidence tab */
/* Paper documents (evidence.document_data, drawn by game.js documentSheet()). Deliberately a light
   sheet on the dark UI -- it should read as a physical piece of paper laid on the table. */
.paper-stack { display: grid; gap: 1rem; }
.paper p { margin: 0 0 0.9rem; }
.paper {
  background: #fbfaf5;
  color: #1c2127;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: clamp(1.1rem, 4vw, 2.4rem);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid #3a4452; margin-bottom: 1.2rem; }
.paper-letterhead { display: flex; flex-direction: column; gap: 0.15rem; }
.paper-letterhead strong { font-size: 1.02rem; letter-spacing: 0.01em; }
.paper-letterhead span { font-size: 0.75rem; font-weight: 700; }
.paper-page-label { font-size: 0.8rem; color: #555d68; white-space: nowrap; }
.paper-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1.6rem; margin: 0 0 1.3rem; font-size: 0.88rem; }
.paper-meta dt { color: #555d68; }
.paper-meta dd { margin: 0; }
.paper-title { margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.3; letter-spacing: 0.01em; }
.paper-h { margin: 1.1rem 0 0.3rem; font-size: 1rem; }
.paper-signature { margin-top: 1.3rem; font-size: 0.92rem; }

/* Suspects tab */
.suspects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.suspect-card { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; background: var(--bg); display: flex; flex-direction: column; gap: 0.6rem; }
.suspect-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.suspect-head h4 { margin: 0; font-size: 1rem; }
.suspect-card p { margin: 0; font-size: 0.9rem; }
/* Suspects tab: a card grid on desktop; the arrows and counter exist only in the phone carousel (see the
   @media block below, which also hides all cards but the current one). */
.sc-arrow, .sc-counter { display: none; }
.sc-stage { display: block; }
.suspect-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: 8px; }
.suspect-photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 2rem;
  font-weight: 600;
}
.suspect-card .btn { margin-top: auto; align-self: flex-start; }

/* Verdict tab */
.verdict-section .btn-primary { margin-top: 0.5rem; }
.verdict-questions { display: grid; gap: 1rem; margin-bottom: 1rem; }
.verdict-field label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 600; }
.verdict-input {
  display: block;
  width: 100%;
  min-height: 4.5em;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.verdict-select { min-height: 0; }
.verdict-input:disabled { opacity: 0.6; cursor: not-allowed; }
.verdict-result { min-height: 1.4em; margin: 0.75rem 0 0; font-size: 0.9rem; }
.verdict-result-wrong { color: var(--danger, #c0392b); }

@media (max-width: 720px) {
  /* Interrogation chat: 50/50 side-by-side is too cramped on a phone -- stack everything in one
     column instead. .interrogate-chat/.interrogate-head collapse via display:contents so their
     children (name, subtitle, messages, error, form) become direct flex items of
     .interrogate-body alongside the portrait, letting `order` lay them out as: name, subtitle,
     photo, stop button, messages, form. align-items: stretch makes each of those full width,
     including the photo (was previously a width:240px box with a viewport-height-based height --
     small width, huge height) and the stop button (was squeezed onto the same row as the name,
     wrapping both). The rich header (counters/press meter) sits above .interrogate-body and needs
     no special mobile handling -- it's already a plain full-width block. */
  .interrogate-body { flex-direction: column; align-items: stretch; gap: 1rem; }
  .interrogate-chat, .interrogate-head { display: contents; }
  #interrogate-name { order: 1; }
  #interrogate-subtitle { order: 2; margin-top: 0; }
  /* The portrait box also dissolves, so its press meter ("Composed") can sit right above the question field. */
  .interrogate-portrait { display: contents; }
  .interrogate-photo, .interrogate-photo-placeholder { order: 3; }
  #interrogate-press-meter { order: 7; margin-top: 0; justify-content: center; }
  #interrogate-stop { order: 4; width: 100%; margin-left: 0; }
  #interrogate-messages { order: 5; }
  #interrogate-error { order: 6; }
  #interrogate-form { order: 8; }
  .interrogate-photo, .interrogate-photo-placeholder { height: auto; aspect-ratio: 4 / 3; }

  /* Header: just the brand + an Options toggle on one row. Game ID/password, the language
     switcher and Dashboard don't fit in that row on a phone, so they move into a collapsible
     panel below instead (same open/close pattern as .players-toggle, for consistency). */
  .game-header { grid-template-columns: 1fr auto; align-items: start; }

  /* Dashboard header: same brand + Options toggle pattern -- username/points/language/sign out
     collapse into #header-controls (generic rules below) instead of wrapping messily. */
  .dashboard-header { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .dashboard-header .user-id { justify-content: flex-start; }
  .games-grid .game-card { grid-template-columns: 1fr; }
  .games-grid .game-card > .game-card-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .dashboard-header .brand { grid-column: 1; grid-row: 1; }
  .dashboard-header .user-bar { flex-direction: column; align-items: flex-start; gap: 0.85rem; }

  .options-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    grid-column: 2;
    grid-row: 1;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .options-toggle:hover { border-color: var(--muted); }
  .options-chevron { color: var(--muted); transition: transform 0.15s ease; }
  .options-toggle[aria-expanded="true"] .options-chevron { transform: rotate(90deg); }

  .header-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }
  /* Same specificity + !important as the desktop override above, but later in the file, so this
     wins once the media query matches -- restores real hiding on mobile. */
  .header-controls[hidden] { display: none !important; }
  .header-controls .join-info { justify-content: flex-start; }
  .header-controls .header-actions { flex-direction: column; align-items: flex-start; gap: 0.85rem; }

  /* Inside the Options panel: full width, and the list opens inline instead of as a dropdown. */
  .players-dock { width: 100%; }
  .players-toggle { width: 100%; justify-content: space-between; }
  .players-body { position: static; width: auto; max-height: 50vh; margin-top: 0.5rem; box-shadow: none; }

  /* Tab bar: a full-width bottom bar showing ONE section at a time, "<  Suspects  >". Five buttons
     were too small and tight on a phone; big arrow buttons step to the previous/next section. The
     real .tab buttons stay in the DOM (hidden) because the arrows click them. */
  .tab-dock {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
    overflow-x: visible;
  }
  .tab-dock .tab { display: none; }
  .tab-dock .tab-arrow {
    display: block;
    flex: none;
    width: 3.25rem;
    height: 3rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
  }
  .tab-dock .tab-current {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
  }

  /* A little extra clearance for the taller (wrapped-label) mobile tab bar, safe-area included. */
  #game-content { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Summary page (summary.html): shown to every member once the host's verdict is correct. */
.summary-page { max-width: 760px; }
.summary-kicker { margin: 0 0 0.25rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.summary-page h1 { margin: 0 0 0.5rem; }
.summary-culprit { margin: 0 0 1.5rem; color: var(--muted); }
.summary-culprit strong { color: var(--text); }
.stats-grid { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.stat-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.stat-label { color: var(--muted); }
/* tabular-nums: digits keep a fixed width, so the number doesn't jitter while it counts up. */
.stat-value { font-size: 1.4rem; font-variant-numeric: tabular-nums; text-align: right; }
.points-note { margin: -0.9rem 0 1.5rem; font-size: 0.85rem; }
.summary-answers { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.summary-answer { padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.summary-answer h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.summary-answer p { margin: 0; white-space: pre-wrap; }
a.btn { text-decoration: none; display: inline-block; }

/* ---- Overlay carousel (overlay-carousel.js) --------------------------------------------------
   Fixed sizes/colours here are deliberate (a white card on a dark backdrop, per the design brief),
   so they don't use the page's theme variables. Inter is used if installed; the page's CSP
   (font-src 'self') means it isn't downloaded, so system-ui is what most people will see. */
html.oc-lock { overflow: hidden; }
/* The game window's tab dock stays clickable above the evidence overlay (z-index 1000). */
html.oc-lock .tab-dock { z-index: 1100; }
.oc-overlay {
  position: fixed; inset: 0; z-index: 1000; box-sizing: border-box;
  /* room at the bottom for the tab dock, so the card and its nav never sit behind it */
  padding-bottom: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Desktop: the visible window is the card + (16px gap + 120px of the neighbour) on each side. */
/* --oc-card-w: wide enough for documents on desktop; shrinks on smaller desktops so neighbours still peek */
.oc-overlay { --oc-card-w: clamp(420px, calc(100vw - 340px), 760px); }
.oc-stage { width: min(100vw, calc(var(--oc-card-w) + 32px)); overflow: hidden; }
.oc-track { display: flex; gap: 16px; transition: transform 300ms ease-out; touch-action: pan-y; cursor: grab; }
.oc-track.is-dragging { cursor: grabbing; }
.oc-card {
  position: relative; box-sizing: border-box; flex: 0 0 var(--oc-card-w); width: var(--oc-card-w); max-height: 75vh;
  display: flex; flex-direction: column;
  padding: 24px; background: #fff; border-radius: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  color: #2e3440; text-align: left; opacity: 0.5; transition: opacity 300ms ease-out; outline: none;
}
.oc-card.is-active { opacity: 1; }
/* One item at a time (desktop and phone): the neighbours are invisible and can't be clicked or tabbed to. */
.oc-card:not(.is-active) { opacity: 0; pointer-events: none; }
.oc-close {
  position: absolute; top: 16px; right: 16px; z-index: 1; width: 20px; height: 20px; padding: 0;
  border: 0; background: none; color: #1b2a4a; cursor: pointer; line-height: 0;
}
.oc-close:focus-visible, .oc-link:focus-visible { outline: 2px solid #1b2a4a; outline-offset: 3px; }
.oc-head { flex: none; }
.oc-image { display: block; width: 96px; height: 96px; margin: 0 0 16px; border-radius: 50%; object-fit: cover; }
.oc-title { margin: 0; padding-right: 32px; font-size: 20px; font-weight: 700; line-height: 1.3; color: #1b2a4a; }
.oc-subtitle { margin: 4px 0 0; font-size: 15px; font-weight: 400; color: #8a8f98; }
.oc-divider { margin: 16px 0; border: 0; border-top: 1px solid #c9ccd1; }
.oc-body { color-scheme: light; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; font-size: 15px; font-weight: 400; line-height: 1.6; color: #2e3440; }
.oc-text { margin: 0; white-space: pre-wrap; }
.oc-photo { display: block; width: 100%; height: auto; max-height: 55vh; object-fit: contain; border-radius: 6px; margin: 0 0 12px; }
.oc-link { display: inline-block; margin-top: 16px; color: #1b2a4a; font-weight: 600; }
/* a paper document inside the white card: keep it as a sheet, but flat, and sized for 420px */
.oc-body .paper { min-width: 0; padding: 18px; font-size: 14px; overflow-wrap: break-word; box-shadow: none; border: 1px solid #dfe1e5; }
.oc-body .paper-head { flex-wrap: wrap; row-gap: 0.4rem; }
.oc-body .paper-letterhead strong { font-size: 0.92rem; }
.oc-body .paper-title { font-size: 1.05rem; }
.oc-body .paper-stack { min-width: 0; }
/* Arrow | item | arrow: the arrows sit just outside the card, vertically centred on it (the nav
   wrapper disappears via display: contents so the arrows position against the overlay); the counter
   goes underneath. On a phone the arrows hug the screen edges instead (see the max-width block). */
.oc-nav { display: contents; color: #fff; }
.oc-arrow {
  position: absolute; top: calc(50% - 36px); transform: translateY(-50%);
  width: 2.5rem; height: 3.5rem; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center; color: var(--accent, #d4a24c);
}
.oc-arrow:first-child { left: calc(50% - var(--oc-card-w) / 2 - 3.25rem); }
.oc-arrow:last-child { right: calc(50% - var(--oc-card-w) / 2 - 3.25rem); }
.oc-arrow:disabled { opacity: 0.3; cursor: default; }
.oc-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.oc-counter { margin-top: 16px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; white-space: nowrap; }
@media (min-width: 768px) {
  .oc-body .paper { padding: 28px 34px; font-size: 15px; }
  .oc-body .paper-letterhead strong { font-size: 1rem; }
  .oc-body .paper-title { font-size: 1.2rem; }
}
@media (max-width: 767px) {
  /* Phone: the card takes the whole width between arrows hugging the screen edges. */
  .oc-overlay { --oc-card-w: calc(100vw - 4rem); }
  .oc-stage { width: 100vw; }
  .oc-card { padding: 18px; }
  .oc-body .paper { padding: 14px; }
  .oc-arrow { width: 1.75rem; }
  .oc-arrow:first-child { left: 0; }
  .oc-arrow:last-child { right: 0; }
}
}

/* ---- More paper-document pieces: labelled fields, indented lines, printed photos ---------------- */
.paper-field { margin: 0 0 0.45rem; }
.paper-lines { margin: 0 0 0.9rem 1.1rem; }
.paper-lines > div { margin-bottom: 0.2rem; }
.paper-figure { margin: 0 0 1.1rem; }
.paper-figure img { display: block; width: 100%; height: auto; margin: 0 auto; }

/* ---- Phone screens (call log, text thread). A dark bezel around an iOS-like light screen. --------- */
.phone {
  box-sizing: border-box; width: min(100%, 340px); margin: 0 auto; padding: 0 0 8px;
  border: 7px solid #15171c; border-radius: 34px; background: #fff; color: #000; overflow: hidden;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; font-size: 14px;
}
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 6px; font-weight: 600; font-size: 13px; }
.phone-battery { padding: 0 5px; border-radius: 4px; background: #d8dadf; font-size: 11px; font-weight: 700; }
.phone-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 0; }
.phone-edit { color: #007aff; font-size: 14px; }
.phone-filter { display: flex; padding: 2px; border-radius: 9px; background: #eeeef0; font-size: 13px; font-weight: 600; }
.phone-filter span { padding: 4px 14px; border-radius: 7px; }
.phone-filter-on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.phone-title { margin: 14px 16px 6px; font-size: 26px; font-weight: 700; }
.phone-calls { margin: 0; padding: 0; list-style: none; }
.phone-call { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 14px; border-bottom: 1px solid #e6e6e9; }
.phone-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #c9cacf; }
.phone-call-main { flex: 1; min-width: 0; }
.phone-call-main strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.phone-call-sub { color: #8e8e93; font-size: 13px; }
.phone-dir { font-size: 12px; }
.phone-call-time { flex: none; color: #8e8e93; font-size: 13px; }
.phone-info { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #007aff; border-radius: 50%; color: #007aff; font-size: 12px; font-style: italic; font-family: Georgia, serif; }
.phone-bar { display: flex; justify-content: space-between; padding: 14px 10px 6px; color: #8e8e93; font-size: 10px; }
.phone-bar-on { color: #007aff; font-weight: 600; }
.phone-msg-head { display: grid; justify-items: center; gap: 2px; padding: 4px 10px 8px; border-bottom: 1px solid #e6e6e9; background: #f7f7f8; }
.phone-back { justify-self: start; color: #007aff; font-size: 28px; line-height: 1; }
.phone-contact { font-size: 12px; margin-top: -10px; }
.phone-thread { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 18px; min-height: 260px; }
.phone-stamp { align-self: center; text-align: center; color: #8e8e93; font-size: 11px; }
.phone-stamp-strong { font-weight: 600; }
.phone-bubble { max-width: 78%; padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.phone-bubble-in { align-self: flex-start; background: #e9e9eb; border-bottom-left-radius: 5px; }
.phone-bubble-out { align-self: flex-end; background: #a7e48c; border-bottom-right-radius: 5px; }
.phone-input { display: flex; align-items: center; gap: 8px; padding: 6px 10px 2px; }
.phone-plus { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e9e9eb; color: #555; font-size: 18px; }
.phone-field { flex: 1; padding: 5px 12px; border: 1px solid #d1d1d6; border-radius: 16px; color: #b0b0b6; font-size: 13px; }

/* ---- Full-screen video player (App.playFullscreenVideo): the intro of a new game, the ending of a solved one ---- */
.video-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: #000; }
.video-overlay video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-skip { position: absolute; right: 1.25rem; bottom: 1.25rem; padding: 0.55rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; }
.video-skip:hover, .video-skip:focus-visible { background: rgba(255, 255, 255, 0.2); border-color: #fff; outline: none; }

.feedback { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.feedback h2 { margin: 0; font-size: 1.05rem; }
.feedback textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; color: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; }
.feedback .feedback-count { margin: 0; text-align: right; font-size: 0.8rem; }
.feedback-contact { display: flex; gap: 0.5rem; align-items: center; }
.feedback .btn { justify-self: start; }
.stars { display: flex; gap: 0.25rem; }
.difficulty { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.difficulty-option.on { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }
.star { background: none; border: 0; padding: 0 0.1rem; font-size: 2rem; line-height: 1; cursor: pointer; color: #666; }
.star.on { color: #f5b301; }

/* Phone: the Suspects tab is a carousel. Three columns -- arrow | the person | arrow -- with the arrows
   tight against the screen edges and the card flattened (no border, no padding) so the middle gets
   all the room. */
@media (max-width: 720px) {
  .suspect-carousel { gap: 0.5rem; align-items: stretch; }
  .sc-stage { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem; align-items: center; column-gap: 0.25rem; margin-inline: -0.5rem; }
  .sc-arrow {
    display: block; width: 1.75rem; height: 3.5rem; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--accent); font: inherit; font-size: 2.2rem; line-height: 1; cursor: pointer;
  }
  .sc-counter { display: block; margin: 0; text-align: center; font-size: 0.85rem; }
  .sc-cards { display: block; }
  .sc-cards .suspect-card { display: none; }
  .sc-cards .suspect-card.sc-current { display: flex; border: 0; padding: 0; background: none; }
  .sc-cards .suspect-photo, .sc-cards .suspect-photo-placeholder { aspect-ratio: 4 / 3; }
  .sc-cards .suspect-card .btn { align-self: center; margin-top: 0.5rem; }
  .sc-counter { margin-top: 1.25rem; }
}

/* Evidence categories: one button per category, stacked in a column (opens the carousel for that category) */
.ev-categories { display: flex; flex-direction: column; gap: 0.75rem; width: min(100%, 30rem); margin: 1.5rem auto; }
.ev-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; font: inherit; font-size: 1.05rem; text-align: left;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.ev-cat:hover { border-color: var(--accent); }
.ev-cat-count { color: var(--muted); font-size: 0.9rem; }
/* The notice board button above the categories (the app's usual primary yellow) */
.ev-board { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 1.25rem; font-size: 1.05rem; }
.ev-board-note { margin: -0.25rem 0 0; text-align: center; }

/* Emergency call screen (emergency-call.js): the audio plays and each line appears as it is said. */
.call-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.92); }
.call-card { width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.call-card.ringing { border-color: var(--accent); animation: call-ring 1.2s ease-in-out infinite; }
.call-kicker { margin: 0; color: var(--accent); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.call-card h2 { margin: 0; }
.call-dots span { animation: call-dot 1.2s steps(1, end) infinite; }
.call-dots span:nth-child(2) { animation-name: call-dot-2; }
.call-dots span:nth-child(3) { animation-name: call-dot-3; }
@keyframes call-dot-2 { 0% { visibility: hidden; } 33.3% { visibility: visible; } }
@keyframes call-dot-3 { 0% { visibility: hidden; } 66.6% { visibility: visible; } }
.call-lines { overflow-y: auto; min-height: 6rem; }
.call-line { opacity: 0.55; }
.call-line.now { opacity: 1; }
.call-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
@keyframes call-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 162, 76, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(212, 162, 76, 0); } }
@media (prefers-reduced-motion: reduce) { .call-card.ringing { animation: none; } .call-dots span { animation: none; visibility: visible; } }

/* Early-access banner at the very top of the page (login page). */
.early-note {
  margin: 0;
  padding: 0.65rem clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background: #1d6fe0;
}
.early-note a { color: #fff; font-weight: 700; text-decoration: underline; }