/* INQUEST — a frontier-town murder mystery.
   Warm paper and ink, rust stamps, brass fittings, lamplight. Light by default (a dry, sunlit
   paper ground) and a lamplit dark mode that follows the system setting; a high-contrast theme
   on top (src/ui/theme.js). Every colour below is a token: components only use var(--…).
   Naming is historical: --night-* are the page and panel grounds and --moon the text on them,
   whatever the mode; --paper / --ink are the document cards; --seal is rust, --ochre brass.
   Textures are CSS-only (inline SVG data URIs). */

/* ------------------------------------------------------------------ tokens */
:root {
  /* light: sunlit paper */
  --night-0: #e9dfcb;
  --night-1: #efe6d4;
  --night-2: #f5eee0;
  --night-3: #e4d8bf;
  --night-4: #d5c6a6;
  --night-line: rgba(74, 52, 28, 0.16);
  --night-line-2: rgba(74, 52, 28, 0.32);
  --moon: #2b2117;
  --moon-dim: #5a4a37;
  --mist: #716150;
  --wash: #3a2a18;

  --paper: #f8f2e4;
  --paper-2: #efe4cc;
  --paper-3: #e2d3b1;
  --paper-edge: #b89c6c;
  --paper-hi: #fbf6ea;
  --paper-lo: #efe3c8;
  --ink: #221a12;
  --ink-2: #4a3c2c;
  --ink-3: #6b5a44;
  --ink-line: rgba(74, 52, 28, 0.2);

  --seal: #a8432a;
  --seal-bright: #c0532f;
  --seal-deep: #7d2e1a;
  --seal-ink: #fbf1e0;
  --ochre: #a8802f;
  --ochre-dim: #7f5f22;
  --jade: #5a7d68;
  --violet: #7a5d8c;
  --focus: #9a6510;
  --seal-text: #a63a22;
  --ochre-text: #7a5a1e;
  --slate: #4b4552;
  --wax: #efe3c4;

  --tone-calm: #4f7d68;
  --tone-nervous: #a2741c;
  --tone-angry: #b8472c;
  --tone-broken: #8c3352;
  --tone-grieving: #4d6f96;

  --glow-a: rgba(255, 246, 222, 0.7);
  --glow-b: rgba(168, 67, 42, 0.08);
  --sky-top: #d9c7a3;
  --sky-bottom: #ead9b6;
  --ridge-far: #c7ad84;
  --ridge-mid: #a98a62;
  --ridge-near: #7d6146;
  --moon-disc: #fff7e3;

  /* map art — drawn on paper, which stays light in every theme */
  --kind-home: #c9a35f;
  --kind-work: #9b5c3c;
  --kind-public: #6f9584;
  --kind-wild: #5f7547;
  --art-ink: #2a2219;
  --art-line: rgba(60, 40, 15, 0.5);
  --art-wall: #efe2c2;
  --art-white: #f7f2e6;
  --art-wood: #c49a68;
  --art-wood-dark: #96704a;
  --art-log: #a9794a;
  --art-plank: #d9bf92;
  --art-red: #a5432f;
  --art-violet: #8c7398;
  --art-brick: #8e4a35;
  --art-stone: #a79d8a;
  --art-roof: #5b4636;
  --art-sign: #3b3530;
  --art-dark: #2e241b;
  --art-door: #4a3a28;
  --art-window: #f2c46b;
  --art-glass: #c9d6d3;
  --art-glow: #e68a3c;
  --art-brass: #c9a240;
  --art-iron: #4b4743;
  --art-awning: #a8432a;
  --art-post: #3b2a1a;
  --art-rope: #7a6142;
  --art-smoke: rgba(80, 70, 60, 0.45);
  --art-leaf: #74844a;
  --art-leaf-lit: #8d9a5a;
  --art-hill: #c8b384;
  --art-mesa: #c98a5c;
  --art-strata: rgba(110, 50, 25, 0.5);
  --art-crop: rgba(205, 170, 80, 0.55);
  --art-row: rgba(120, 85, 30, 0.6);
  --art-water: rgba(86, 130, 150, 0.3);
  --art-water-edge: rgba(60, 100, 120, 0.5);
  --art-wave: #406a80;
  --art-ground: rgba(70, 80, 40, 0.6);
  --art-pine: #4f6a3b;
  --art-pine-far: #6f845a;

  /* portraits — every resident's own cloth, skin and hair arrive as --pt-cloth / --pt-skin / --pt-hair */
  --pt-ink: #1f1a14;
  --pt-shirt: #f3eddc;
  --pt-brass: #c49a43;
  --pt-felt: #6b5038;
  --pt-felt-band: #2e2219;
  --pt-derby: #2a2522;
  --pt-derby-edge: #0c0b0d;
  --pt-bandana: #9b2f27;
  --pt-bandana-dk: #862822;
  --pt-bandana-dot: rgba(255, 240, 220, 0.45);
  --pt-bonnet: #e8dfc8;
  --pt-bonnet-line: #b9ab8b;
  --pt-bonnet-tie: #cdbf9c;
  --pt-leather: #7a5636;
  --pt-leather-dk: #5a3d24;
  --pt-wood: #6b4a2b;
  --pt-pipe: #2a2018;
  --pt-smoke: rgba(120, 112, 100, 0.55);
  --pt-basket: #b48a46;
  --pt-basket-dk: #7d5c2a;
  --pt-basket-lt: #c9a15a;
  --pt-blush: #d98e74;
  --pt-lip: #8e3a30;
  --pt-tear: #7fa6c4;
  --pt-ribbon: #9b2f27;
  --pt-apron: #ece4cf;
  --pt-apron-line: #cfc2a3;
  --pt-suspender: #3b2a1e;
  --pt-garter: #9b2f27;
  --pt-cravat: #2b2420;
  --pt-shawl: #4d3a56;
  --pt-shawl-fringe: #2f2236;
  --pt-belt: #3a2c20;
  --pt-sheen: rgba(255, 255, 255, 0.18);
  --pt-halo: #fffaf0;
  --pt-mourning: #111111;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 28px -14px rgba(60, 40, 15, 0.35), 0 2px 6px rgba(60, 40, 15, 0.12);
  --shadow-soft: 0 8px 22px -12px rgba(60, 40, 15, 0.3);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-voice: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .23 0 0 0 0 .14 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .11' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 .75 0 0 0 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* dark: lamplight. Follows the system unless the page is pinned to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --night-0: #14100c;
    --night-1: #1b1611;
    --night-2: #231c16;
    --night-3: #2e251c;
    --night-4: #3b3024;
    --night-line: rgba(232, 214, 178, 0.14);
    --night-line-2: rgba(232, 214, 178, 0.26);
    --moon: #efe4cf;
    --moon-dim: #bcae95;
    --mist: #9a8c76;
    --wash: #fff6e4;

    --paper: #e8dbbd;
    --paper-2: #dfd0ad;
    --paper-3: #d0be95;
    --paper-edge: #b09768;
    --paper-hi: #ecdfc3;
    --paper-lo: #dccaa4;

    --seal: #b34a2c;
    --seal-bright: #cd5b36;
    --ochre: #c09a4c;
    --ochre-dim: #8e6c33;
    --jade: #6f9a86;
    --focus: #f0b84f;
    --seal-text: #ef9a7f;
    --ochre-text: #e0bd78;

    --tone-calm: #6f9a86;
    --tone-nervous: #c99a3f;
    --tone-angry: #cf5a3c;
    --tone-broken: #b0496b;
    --tone-grieving: #6e8fb5;

    --glow-a: rgba(226, 160, 80, 0.12);
    --glow-b: rgba(168, 67, 42, 0.1);
    --sky-top: #0f0c10;
    --sky-bottom: #2a1d17;
    --ridge-far: #2a1f1a;
    --ridge-mid: #1d1612;
    --ridge-near: #0f0b09;
    --moon-disc: #f4e7c6;

    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 40px -12px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 8px 22px -10px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-variant-numeric: lining-nums;
  min-height: 100dvh;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--moon);
  background-color: var(--night-0);
  background-image:
    var(--tex-night),
    radial-gradient(1200px 700px at 82% -12%, var(--glow-a), transparent 62%),
    radial-gradient(900px 600px at 8% 112%, var(--glow-b), transparent 60%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 60%);
  background-attachment: fixed;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4 { font-family: var(--font-display); font-variant-numeric: lining-nums; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.005em; }
p, li, blockquote { max-width: 68ch; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus { outline: none; }
/* No border-radius here: the outline follows each control's own corners (a pill chip stays a pill). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Headings and containers that receive focus from script (screen changes, skip link) are not
   controls: never draw a focus box on them. Keyboard focus on real controls stays visible. */
.focus-target:focus, .focus-target:focus-visible,
:is(h1, h2, h3, main, section, article, [role='tabpanel'])[tabindex='-1']:focus-visible { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px;
  background: var(--paper); color: var(--ink); border-radius: var(--radius); text-decoration: none;
}
.skip-link:focus { top: 12px; }
.muted { color: var(--moon-dim); }
.paper .muted { color: var(--ink-3); }
.noscript { padding: 40px; text-align: center; }

#app { min-height: 100dvh; }
#app:focus { outline: none; }
.screen-in > .screen { animation: screen-in 0.55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ paper */
.paper {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    var(--tex-fiber),
    var(--tex-grain),
    radial-gradient(130% 90% at 50% 40%, rgba(255, 250, 235, 0.55), rgba(255, 250, 235, 0) 60%),
    linear-gradient(180deg, var(--paper-hi), var(--paper-lo));
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(120, 90, 40, 0.2), inset 0 0 60px rgba(140, 100, 40, 0.18);
  border-radius: var(--radius);
  /* paper stays light in every theme: native checkboxes, radios and scrollbars on it must too */
  color-scheme: light;
}
.paper :focus-visible { outline-color: var(--seal-deep); }

/* ------------------------------------------------------------------ controls */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 40px; padding: 0.5em 1.05em;
  border: 1px solid transparent; border-radius: 4px;
  background: var(--btn-bg);
  font-family: var(--font-body); font-weight: 700; font-size: 14.5px; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s, transform .12s, box-shadow .18s, opacity .18s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; }
.btn .cost {
  font-family: var(--font-body); font-weight: 500; font-size: 0.8em; letter-spacing: 0;
  padding: 0.05em 0.5em; border-radius: 99px; background: rgba(0, 0, 0, 0.18);
}
.btn-seal {
  --btn-bg: var(--seal);
  color: var(--seal-ink);
  border-color: rgba(255, 220, 190, 0.25);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px -8px rgba(184, 52, 42, 0.8);
  background-image: var(--tex-grain);
}
.btn-seal:hover:not(:disabled) { --btn-bg: var(--seal-bright); }
.btn-ghost { color: var(--moon); border-color: var(--night-line-2); background: color-mix(in srgb, var(--wash) 2%, transparent); }
.btn-ghost:hover:not(:disabled) { border-color: color-mix(in srgb, var(--moon) 50%, transparent); background: color-mix(in srgb, var(--wash) 7%, transparent); }
.btn-paper { color: var(--ink); border-color: rgba(70, 52, 28, 0.38); background: rgba(255, 252, 240, 0.28); }
.btn-paper:hover:not(:disabled) { background: rgba(255, 252, 240, 0.6); border-color: var(--ink-2); }
.btn-paper .cost { background: rgba(70, 52, 28, 0.12); }
.btn-ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-ink:hover:not(:disabled) { background: var(--ink-2); }
.btn-ink .cost { background: rgba(255, 255, 255, 0.14); }
.btn-small { min-height: 32px; padding: 0.3em 0.75em; font-size: 13px; }
.btn-large { min-height: 50px; padding: 0.65em 1.6em; font-size: 17px; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.08em; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ink-line); background: transparent; font-size: 24px; line-height: 1; color: var(--ink-2);
}
.icon-btn:hover { background: rgba(70, 52, 28, 0.08); }
.link-btn { background: none; border: 0; padding: 0; color: var(--moon-dim); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.link-btn.is-seal { color: var(--seal-text); }

.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 0.45em 0.7em;
  border-radius: 4px; border: 1px solid var(--night-line-2);
  background: color-mix(in srgb, var(--night-2) 70%, transparent); color: var(--moon);
}
.select { appearance: none; padding-right: 2em; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option, .select optgroup { background: var(--night-2); color: var(--moon); }
.textarea { resize: vertical; min-height: 64px; font-family: var(--font-voice); font-size: 15.5px; line-height: 1.6; }
.paper .input, .paper .select, .paper .textarea { background-color: rgba(255, 252, 240, 0.55); color: var(--ink); border-color: rgba(70, 52, 28, 0.35); }
.paper .select option, .paper .select optgroup { background: var(--paper); color: var(--ink); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.select-small { min-height: 32px; width: auto; font-size: 13px; }

.check { display: inline-flex; align-items: center; gap: 0.45em; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--seal); }
.check-music { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.check-note { font-size: 12px; color: var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.05em 0.6em; border-radius: 99px; font-size: 12px; line-height: 1.7;
  border: 1px solid var(--night-line-2); color: var(--moon-dim); white-space: nowrap;
}
.paper .chip { border-color: rgba(70, 52, 28, 0.25); color: var(--ink-2); background: rgba(255, 252, 240, 0.35); }
.chip-loc::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--loc, var(--ochre)); }
.chip-time { font-variant-numeric: lining-nums tabular-nums; }
.chip-kind { font-weight: 700; }
.chip-kind.kind-confession { color: var(--seal-text); border-color: var(--seal); background: rgba(184, 52, 42, 0.35); }
.paper .chip-kind.kind-confession { color: var(--seal-ink); background: var(--seal); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.badge {
  display: inline-flex; align-items: center; padding: 0 0.55em; border-radius: 3px;
  font-size: 11.5px; font-weight: 700; line-height: 1.75; letter-spacing: 0.02em;
}
.badge-seal { background: var(--seal); color: var(--seal-ink); }
.badge-ochre { background: rgba(185, 141, 62, 0.22); color: #8b6526; border: 1px solid rgba(185, 141, 62, 0.5); }
.badge-new { background: var(--focus); color: var(--ink); }
.badge-muted { background: color-mix(in srgb, var(--wash) 8%, transparent); color: var(--moon-dim); }

.seg-control { display: inline-flex; padding: 3px; border-radius: 6px; background: color-mix(in srgb, var(--wash) 8%, transparent); border: 1px solid var(--night-line); gap: 2px; }
.seg {
  border: 0; background: transparent; color: var(--moon-dim); min-height: 32px; padding: 0.35em 0.9em; border-radius: 4px;
  font-weight: 700; font-size: 13.5px; display: inline-flex; gap: 0.5em; align-items: center;
}
.seg .cost { font-weight: 500; font-size: 11px; opacity: 0.75; }
.seg:hover:not(.is-on):not(:disabled) { color: var(--moon); background: color-mix(in srgb, var(--wash) 6%, transparent); }
.paper .seg:hover:not(.is-on):not(:disabled) { color: var(--ink); background: rgba(70, 52, 28, 0.08); }
.seg.is-on { background: var(--moon); color: var(--night-0); }
.paper .seg-control { background: rgba(70, 52, 28, 0.08); border-color: var(--ink-line); }
.paper .seg { color: var(--ink-3); }
.paper .seg.is-on { background: var(--ink); color: var(--paper); }

.mood-badge {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.05em 0.65em; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; color: var(--tone, var(--moon-dim)); border: 1px solid currentColor;
  background: color-mix(in srgb, var(--tone, transparent) 14%, transparent);
}
.mood-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mood-small { font-size: 11px; padding: 0 0.55em; }
.tone-calm { --tone: var(--tone-calm); }
.tone-nervous { --tone: var(--tone-nervous); }
.tone-angry { --tone: var(--tone-angry); }
.tone-broken { --tone: var(--tone-broken); }
.tone-grieving { --tone: var(--tone-grieving); }
.tone-none { --tone: var(--mist); }
.tone-dead { --tone: #9a958a; }

/* ------------------------------------------------------------------ seal */
.seal {
  --seal-size: 56px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--seal-size); height: var(--seal-size);
  color: var(--seal-ink); font-family: var(--font-display); font-weight: 700;
  line-height: 1; user-select: none;
}
.seal-inner {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--seal); border-radius: 9%;
  box-shadow: inset 0 0 0 calc(var(--seal-size) * 0.06) var(--seal), inset 0 0 0 calc(var(--seal-size) * 0.085) var(--seal-ink), inset 0 0 calc(var(--seal-size) * 0.2) rgba(80, 10, 5, 0.35);
  filter: url(#seal-ink);
  font-size: calc(var(--seal-size) * 0.5);
}
.seal-single .seal-inner { font-family: var(--font-body); font-weight: 800; }
/* a word is a rubber stamp: rust capitals in a ruled double box, no fill, a little askew */
.seal-word { width: auto; height: auto; }
.seal-word .seal-inner {
  position: relative; inset: auto; display: inline-block; padding: 0.28em 0.6em 0.22em;
  font-family: var(--font-body); font-weight: 800; letter-spacing: 0.14em; text-indent: 0.14em; white-space: nowrap;
  font-size: calc(var(--seal-size) * 0.26); line-height: 1;
  color: var(--seal-text); background: transparent; border-radius: 4px;
  border: calc(var(--seal-size) * 0.05 + 2px) double currentColor; box-shadow: none;
}
.paper .seal-word .seal-inner { background: transparent; color: var(--seal); }
.seal-round .seal-inner { border-radius: 50%; }
.seal-grade .seal-inner {
  border-radius: 50%; font-size: calc(var(--seal-size) * 0.56); font-family: var(--font-display);
  box-shadow: inset 0 0 0 calc(var(--seal-size) * 0.045) var(--seal), inset 0 0 0 calc(var(--seal-size) * 0.07) var(--seal-ink), inset 0 0 0 calc(var(--seal-size) * 0.11) var(--seal), inset 0 0 0 calc(var(--seal-size) * 0.125) var(--seal-ink);
}
.paper .seal { mix-blend-mode: multiply; }
.paper .seal:not(.seal-word) .seal-inner { background: var(--seal); }

.stamp { position: absolute; z-index: 5; pointer-events: none; transform: rotate(-8deg); }
.stamp.stamping { animation: stamp-in 0.62s cubic-bezier(.3, 1.6, .5, 1) both; }
.stamp.stamped { opacity: 0.92; }
@keyframes stamp-in {
  0% { opacity: 0; transform: scale(2.8) rotate(-22deg); filter: blur(3px); }
  55% { opacity: 1; transform: scale(0.9) rotate(-6deg); filter: blur(0); }
  75% { transform: scale(1.04) rotate(-9deg); }
  100% { opacity: 0.92; transform: scale(1) rotate(-8deg); }
}
.is-stamped { animation: thud 0.38s ease-out; }
@keyframes thud { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, 3px); } 50% { transform: translate(-2px, -1px); } 100% { transform: none; } }

/* ------------------------------------------------------------------ toast & tooltip */
.toast-host {
  position: fixed; inset: auto 0 18px 0; margin: 0 auto; width: min(560px, calc(100vw - 24px));
  padding: 0; border: 0; background: transparent; overflow: visible;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 100;
}
.toast-host.is-open { display: flex; }
.toast-host:popover-open { display: flex; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 14px; border-radius: 6px;
  background: color-mix(in srgb, var(--night-2) 97%, transparent); color: var(--moon);
  border: 1px solid var(--night-line-2); border-left: 4px solid var(--mist);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.7);
  animation: toast-in 0.3s cubic-bezier(.2, .8, .2, 1) both;
}
.toast.is-leaving { animation: toast-out 0.22s ease-in both; }
.toast-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.toast-title { font-family: var(--font-display); font-size: 15px; }
.toast-msg { font-size: 13.5px; color: var(--moon-dim); }
.toast-good { border-left-color: var(--jade); }
.toast-warn { border-left-color: var(--ochre); }
.toast-error { border-left-color: var(--seal-bright); }
.toast-seal { border-left-color: var(--seal); background: linear-gradient(90deg, color-mix(in srgb, var(--seal) 35%, transparent), color-mix(in srgb, var(--night-2) 97%, transparent) 55%); }
.toast-x { border: 0; background: transparent; color: var(--moon-dim); font-size: 20px; width: 30px; height: 30px; border-radius: 50%; }
.toast-x:hover { background: color-mix(in srgb, var(--wash) 8%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

.tooltip {
  position: fixed; inset: auto; margin: 0; z-index: 120;
  max-width: min(380px, calc(100vw - 16px)); padding: 9px 12px;
  border: 1px solid var(--night-line-2); border-radius: 5px;
  background: color-mix(in srgb, var(--night-2) 98%, transparent); color: var(--moon);
  font-size: 13px; line-height: 1.55; pointer-events: none;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  display: none;
}
.tooltip.is-open { display: grid; gap: 4px; }
.tooltip:popover-open { display: grid; gap: 4px; }
.tooltip-title { font-family: var(--font-display); font-size: 14px; color: var(--moon); font-weight: 700; }
.tooltip-line { color: var(--moon-dim); }

/* ------------------------------------------------------------------ title */
.title-screen {
  position: relative; min-height: 100dvh; display: grid; place-items: center;
  padding: clamp(24px, 6vh, 64px) 16px 48px; overflow: hidden; isolation: isolate;
}
.title-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.moon {
  position: absolute; right: clamp(4%, 12vw, 18%); top: clamp(5%, 9vh, 12%);
  width: clamp(90px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, var(--moon-disc), color-mix(in srgb, var(--moon-disc) 82%, var(--ochre)) 100%);
  box-shadow: 0 0 60px 18px color-mix(in srgb, var(--moon-disc) 18%, transparent), 0 0 160px 60px var(--glow-a);
  opacity: 0.9;
}
.moon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 60% 62%, rgba(150, 130, 90, 0.25) 0 9%, transparent 10%), radial-gradient(circle at 35% 66%, rgba(150, 130, 90, 0.2) 0 6%, transparent 7%), radial-gradient(circle at 56% 30%, rgba(150, 130, 90, 0.18) 0 5%, transparent 6%);
}
.ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46vh; }
.title-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 70%); opacity: 0.55; }
.ridge-far { fill: var(--ridge-far); }
.ridge-mid { fill: var(--ridge-mid); }
.ridge-near { fill: var(--ridge-near); }
.village-lights circle { fill: #f2b65e; filter: drop-shadow(0 0 4px #f2a14a); animation: flicker 3.4s ease-in-out infinite; }
.village-lights circle:nth-child(2n) { animation-delay: -1.3s; }
.mist { position: absolute; left: -20%; right: -20%; height: 18vh; filter: blur(18px); opacity: 0.4; }
.mist-1 { bottom: 26vh; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--moon-disc) 20%, transparent), transparent 70%); animation: drift 38s linear infinite alternate; }
.mist-2 { bottom: 2vh; background: linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--moon-disc) 16%, transparent), transparent); animation: drift 52s linear infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes flicker { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.55; } 60% { opacity: 1; } }

.title-content { width: min(560px, 100%); display: grid; gap: 22px; justify-items: center; text-align: center; }
.wordmark { position: relative; display: grid; justify-items: center; }
.wordmark-text {
  font-size: clamp(52px, 14vw, 128px); font-weight: 800; line-height: 1; letter-spacing: 0.08em;
  color: var(--moon); text-shadow: 0 2px 0 color-mix(in srgb, var(--night-0) 60%, transparent), 0 0 50px var(--glow-a);
  padding-left: 0.08em;
}
.wordmark-seal { position: absolute; right: 0; bottom: -10px; transform: rotate(-7deg); }
.wordmark-roman { font-family: var(--font-body); letter-spacing: 0.4em; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--mist); margin-top: 16px; padding-left: 0.4em; }
.tagline { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 3.6vw, 22px); color: var(--moon); letter-spacing: 0.01em; }
.tagline::before, .tagline::after { content: ''; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--moon-dim)); }
.tagline::after { transform: scaleX(-1); }
.title-sub { max-width: 36ch; margin-top: -8px; font-family: var(--font-voice); font-size: 15px; line-height: 1.6; color: var(--moon-dim); }
.title-card { width: 100%; padding: 22px 24px 20px; display: grid; gap: 14px; text-align: left; transform: rotate(-0.4deg); }
.field { display: grid; gap: 6px; }
.field > label { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink-2); }
.field-help { font-size: 12.5px; color: var(--ink-3); }
.seed-row { display: flex; gap: 8px; }
.input-seed { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.12em; font-variant-numeric: lining-nums tabular-nums; }
.btn-dice { min-width: 46px; padding: 0 10px; }
.btn-dice.is-rolling svg { animation: roll 0.5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes roll { from { transform: rotate(-200deg) scale(.7); } to { transform: none; } }
.btn-start { width: 100%; margin-top: 4px; }
.mode-note { font-size: 12.5px; color: var(--ochre); text-align: center; }
.title-privacy { font-size: 12px; line-height: 1.6; color: var(--moon-dim); text-align: center; }
.title-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.title-privacy a:hover { color: var(--ink); }
.title-privacy a:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; border-radius: 4px; }
.paper .mode-note { color: var(--ochre-dim); }
.title-howto { list-style: none; display: grid; gap: 10px; text-align: left; font-family: var(--font-voice); font-size: 15px; color: var(--moon-dim); }
.title-howto li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: baseline; }
.howto-num { font-family: var(--font-display); color: var(--seal-bright); font-weight: 800; font-size: 17px; text-align: center; }

/* ------------------------------------------------------------------ loading / error */
.loading-screen { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.loading-incense { position: relative; width: 40px; height: 140px; }
.li-bowl { position: absolute; bottom: 0; left: 0; right: 0; height: 12px; border-radius: 3px 3px 20px 20px; background: linear-gradient(#c9a250, #6f5220); }
.li-stick { position: absolute; bottom: 10px; left: 14px; width: 12px; height: 70px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--wax), #d9c9a0); }
.li-stick::after { content: ''; position: absolute; top: -14px; left: 3px; width: 6px; height: 12px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 70%, #fff3c4, #ffae4a 55%, #e0602a); box-shadow: 0 0 12px 4px rgba(255, 150, 60, 0.5); animation: ember 1.6s ease-in-out infinite; }
.li-smoke { position: absolute; left: 14px; bottom: 94px; width: 12px; height: 60px; border-radius: 50%; border-left: 2px solid color-mix(in srgb, var(--mist) 45%, transparent); filter: blur(1px); animation: smoke 3s ease-in-out infinite; }
.li-smoke-2 { animation-delay: -1.5s; left: 18px; }
@keyframes smoke { 0% { opacity: 0; transform: translateY(14px) scaleY(.6); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-24px) translateX(6px) scaleY(1.2) rotate(8deg); } }
.loading-title { font-size: 28px; color: var(--moon); }
.loading-line { font-family: var(--font-voice); color: var(--moon-dim); }

.error-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.error-card { position: relative; width: min(620px, 100%); padding: 32px 28px 26px; display: grid; gap: 14px; }
.error-card h1 { font-size: 26px; padding-right: 140px; }
.error-seal { position: absolute; top: 22px; right: 22px; transform: rotate(6deg); }
.error-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.error-detail summary { cursor: pointer; color: var(--ink-3); font-size: 13px; }
.error-detail pre { max-height: 240px; overflow: auto; font-size: 12px; background: rgba(70, 52, 28, 0.08); padding: 10px; border-radius: 4px; white-space: pre-wrap; }

/* ------------------------------------------------------------------ briefing */
.briefing-screen { min-height: 100dvh; display: grid; place-items: center; padding: clamp(16px, 4vh, 48px) 16px; }
.brief-doc { width: min(900px, 100%); padding: clamp(20px, 4vw, 40px); display: grid; gap: 24px; position: relative; }
.brief-doc::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(120, 90, 40, 0.28); border-radius: 3px; pointer-events: none; }
.brief-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.doc-kicker { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--seal-deep); font-weight: 700; }
.brief-title { font-size: clamp(30px, 5.4vw, 46px); margin-top: 6px; }
.brief-village { color: var(--ink-3); margin-top: 4px; }
.brief-seal { transform: rotate(8deg); margin-top: 6px; }
.brief-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.victim-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: rgba(255, 252, 240, 0.32); }
.victim-frame { position: relative; }
.victim-frame .portrait { border-radius: 4px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); }
.card-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.victim-name { font-size: 26px; }
.victim-meta { color: var(--ink-3); font-size: 14px; }
.victim-bio { font-family: var(--font-voice); margin-top: 8px; font-size: 15px; line-height: 1.6; }
.brief-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.brief-facts dt { color: var(--ink-3); font-weight: 700; }
.brief-facts dd { margin: 0; }
.brief-person { display: flex; align-items: center; gap: 8px; }
.brief-person .portrait { border-radius: 4px; }
.brief-intro { border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); padding: 18px 0; }
.intro { display: grid; gap: 12px; font-family: var(--font-voice); font-size: clamp(16px, 2.2vw, 18px); line-height: 1.7; cursor: pointer; min-height: 7em; }
.intro-line { color: var(--ink); }
.intro-line .tw-rest { color: transparent; }
.intro-line.is-typing .tw-shown::after { content: ''; display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.15em; margin-left: 2px; background: var(--seal); animation: caret 0.8s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.brief-costs { display: flex; flex-wrap: wrap; gap: 8px; }
.cost-chip { padding: 0.15em 0.8em; border: 1px solid var(--ink-line); border-radius: 99px; font-size: 13px; color: var(--ink-2); background: rgba(255, 252, 240, 0.35); }
.cost-chip.is-free { border-color: rgba(184, 52, 42, 0.45); color: var(--seal-deep); }
.brief-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.paper .btn-ghost { color: var(--ink-2); border-color: var(--ink-line); }

/* ------------------------------------------------------------------ investigation layout */
.inv-screen { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.inv-screen.is-busy { cursor: progress; }
.topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid var(--night-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--night-2) 94%, transparent), color-mix(in srgb, var(--night-1) 88%, transparent));
  backdrop-filter: blur(6px);
  position: relative; z-index: 3;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-seal { transform: rotate(-6deg); }
.brand-text { min-width: 0; }
.brand-village { font-size: 20px; color: var(--moon); }
.brand-case { font-size: 12.5px; color: var(--moon-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-mock .brand-case::after { content: ' · mock'; color: var(--ochre-text); }
.top-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.top-btn { position: relative; }
.top-toggles { display: contents; }
.top-contrast[aria-pressed='true'], .top-music[aria-pressed='true'] { background: var(--moon); color: var(--night-0); border-color: var(--moon); }
/* One-row top bar between 961 and 1480px: split evenly, the five buttons (music, contrast, notebook,
   contradictions, accuse) would wrap to two lines and push the panels down. The button column
   takes its own width and the name column gets the rest (the case name ellipsizes). */
@media (min-width: 961px) and (max-width: 1480px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .top-actions { flex-wrap: nowrap; }
}
/* …and at its narrow end a shorter candle leaves the town's name room for one line */
@media (min-width: 961px) and (max-width: 1120px) {
  .topbar .incense { width: 112px; }
}
@media (min-width: 961px) and (max-width: 1000px) {
  .topbar .incense { width: 80px; }
}
/* two-row top bar (960px and under): more buttons would squeeze the village name, so the two
   switches (music, contrast) sit side by side at the end of the clock row */
@media (max-width: 960px) {
  .top-toggles { display: flex; gap: 8px; position: absolute; right: 18px; bottom: 8px; }
  .topbar .clock { margin-right: 200px; }
}
@media (max-width: 640px) {
  .top-toggles { gap: 4px; right: 12px; }
  .topbar .clock { margin-right: 152px; }
}
.top-count:not(:empty) { min-width: 20px; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--wash) 14%, transparent); font-size: 12px; line-height: 20px; }
.top-contra .top-count:not(:empty) { background: var(--seal); color: var(--seal-ink); }
.top-contra .top-count.top-soft:not(:empty) { background: color-mix(in srgb, var(--ochre) 28%, transparent); color: var(--ochre-text); font-size: 11px; font-weight: 500; margin-left: -4px; }
.top-contra.has-new { border-color: var(--seal); box-shadow: 0 0 0 0 rgba(208, 69, 50, 0.6); animation: beckon 1.8s ease-out infinite; }
@keyframes beckon { 0% { box-shadow: 0 0 0 0 rgba(208, 69, 50, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(208, 69, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(208, 69, 50, 0); } }

.inv-main {
  display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); gap: 16px;
  padding: 16px; min-height: 0;
}
.inv-left { overflow-y: auto; min-height: 0; padding: 14px 16px 18px; display: grid; gap: 14px; align-content: start; }
.inv-right { min-height: 0; display: grid; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel-head h2 { font-size: 20px; }
.panel-sub { font-size: 12.5px; color: var(--moon-dim); }
.panel-head-paper h2 { color: var(--ink); }

/* ------------------------------------------------------------------ clock (a candle; classes keep the old incense names) */
.clock { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; gap: 14px; justify-self: center; }
.incense { position: relative; width: clamp(150px, 18vw, 230px); height: 30px; }
.incense-holder {
  position: absolute; left: 0; top: 9px; width: 18px; height: 16px; border-radius: 3px 3px 9px 9px;
  background: linear-gradient(180deg, #a9843e, #5a4119); box-shadow: inset 0 2px 0 rgba(255, 230, 160, 0.4);
}
.incense-holder::before { content: ''; position: absolute; left: 2px; right: 2px; top: -2px; height: 4px; border-radius: 50%; background: #8a6a33; }
.incense-track { position: absolute; left: 12px; right: 8px; top: 11px; height: 8px; }
.incense-stick {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, #fbf3dc, var(--wax) 45%, #cdbb8f); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(110, 85, 40, 0.35);
  transition: width 1.1s cubic-bezier(.3, .7, .3, 1);
}
.incense-ember {
  position: absolute; right: -9px; top: -1px; width: 10px; height: 10px;
  border-radius: 50% 50% 50% 50% / 30% 70% 70% 30%;
  background: radial-gradient(circle at 30% 50%, #fff3c4, #ffae4a 50%, #e0602a 85%);
  box-shadow: 0 0 8px 2px rgba(255, 140, 50, 0.6), 0 0 18px 6px rgba(255, 110, 40, 0.2);
  animation: ember 1.9s ease-in-out infinite;
}
@keyframes ember { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.35); transform: scale(1.12); } }
.incense-smoke { position: absolute; left: -6px; bottom: 6px; width: 20px; height: 50px; overflow: visible; pointer-events: none; }
.incense-smoke path { fill: none; stroke: color-mix(in srgb, var(--mist) 40%, transparent); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 80; animation: smoke-path 4.6s linear infinite; }
.incense-smoke .smoke-b { stroke: color-mix(in srgb, var(--mist) 25%, transparent); animation-delay: -2.3s; }
@keyframes smoke-path { 0% { stroke-dashoffset: 80; opacity: 0; } 25% { opacity: 1; } 100% { stroke-dashoffset: -80; opacity: 0; } }
.incense-ash { position: absolute; top: 4px; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--mist) 45%, transparent); transition: left 1.1s cubic-bezier(.3, .7, .3, 1); }
.clock-text { display: grid; line-height: 1.3; }
.clock-now { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--moon); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.clock-left { font-size: 12.5px; color: var(--moon-dim); white-space: nowrap; }
.clock.is-low .clock-left { color: var(--seal-text); }
.clock.is-low .incense-ember { animation-duration: 0.9s; }
.clock.is-out .incense-ember, .clock.is-out .incense-smoke { display: none; }
.clock.is-out .clock-left { color: var(--seal-bright); font-weight: 700; }
.clock-floats { position: absolute; right: 0; top: -2px; pointer-events: none; }
.clock-float { position: absolute; right: 0; top: 0; font-weight: 700; font-size: 13px; color: var(--seal-text); white-space: nowrap; animation: float-up 1.5s ease-out both; }
@keyframes float-up { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

/* ------------------------------------------------------------------ map */
.village-card { position: relative; }
.map-legend { list-style: none; display: flex; gap: 10px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.map-legend li { display: inline-flex; align-items: center; gap: 4px; }
.map-legend li::before { content: ''; width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(40, 30, 20, 0.5); }
.lg-home::before { background: var(--kind-home); }
.lg-work::before { background: var(--kind-work); }
.lg-public::before { background: var(--kind-public); border-radius: 50% !important; }
.lg-wild::before { background: var(--kind-wild); }
.map-wrap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; border-radius: 4px; background: radial-gradient(circle at 50% 50%, rgba(255, 252, 235, 0.35), transparent 70%); }
.village-map { width: 100%; height: 100%; overflow: visible; font-family: var(--font-display); }
.deco-ridge { fill: none; stroke: rgba(60, 45, 25, 0.3); stroke-width: 0.45; stroke-linecap: round; }
.deco-ridge-far { stroke: rgba(60, 45, 25, 0.16); }
.deco-compass circle { fill: none; stroke: rgba(60, 45, 25, 0.35); stroke-width: 0.35; }
.deco-compass path { fill: rgba(140, 40, 30, 0.6); }
.deco-compass text { font-size: 3.2px; fill: rgba(60, 45, 25, 0.7); font-weight: 800; }
.road-base { fill: none; stroke: rgba(196, 172, 122, 0.55); stroke-width: 2.6; stroke-linecap: round; }
.road { fill: none; stroke: rgba(92, 70, 40, 0.72); stroke-width: 0.55; stroke-linecap: round; }
.road-base.is-trail { stroke: rgba(160, 170, 120, 0.25); stroke-width: 1.8; }
.road.is-trail { stroke-dasharray: 1.4 1.4; stroke: rgba(80, 90, 50, 0.7); }
.map-node { cursor: pointer; outline: none; }
.map-node .hit { fill: transparent; }
.map-node .sel-ring { fill: none; stroke: var(--seal); stroke-width: 0.7; stroke-dasharray: 2.2 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map-node.is-selected .sel-ring { opacity: 1; animation: spin 18s linear infinite; }
.map-node:focus-visible .sel-ring { opacity: 1; stroke: #c4881f; stroke-width: 1; stroke-dasharray: none; }
.map-node:hover .glyph { transform: translateY(-0.6px); }
/* map art: every fill and stroke is a token (see --art-* at the top) */
.glyph { transition: transform .2s; stroke: var(--art-ink); stroke-width: 0.45; stroke-linejoin: round; stroke-linecap: round; }
.g-wall { fill: var(--art-wall); }
.g-white { fill: var(--art-white); }
.g-wood { fill: var(--art-wood); }
.g-wood-dark { fill: var(--art-wood-dark); }
.g-log { fill: var(--art-log); }
.g-red { fill: var(--art-red); }
.g-violet { fill: var(--art-violet); }
.g-brick { fill: var(--art-brick); }
.g-stone { fill: var(--art-stone); }
.g-roof { fill: var(--art-roof); }
.g-sign { fill: var(--art-sign); }
.g-plank { fill: var(--art-plank); }
.g-dark { fill: var(--art-dark); }
.g-door { fill: var(--art-door); stroke: none; }
.g-window { fill: var(--art-window); stroke: var(--art-door); stroke-width: 0.3; }
.g-window-cold { fill: var(--art-glass); stroke: var(--art-door); stroke-width: 0.3; }
.g-glow { fill: var(--art-glow); stroke: var(--art-door); stroke-width: 0.3; }
.g-brass { fill: var(--art-brass); stroke-width: 0.3; }
.g-iron { fill: var(--art-iron); stroke-width: 0.3; }
.g-awning { fill: var(--art-awning); }
.g-stripe { fill: none; stroke: var(--art-white); stroke-width: 0.7; }
.g-curtain { fill: var(--art-awning); stroke: none; }
.g-globe-red { fill: var(--art-awning); stroke: none; }
.g-globe-green { fill: var(--art-leaf); stroke: none; }
.g-batwing { fill: var(--art-wood); stroke-width: 0.25; }
.g-line { fill: none; stroke: var(--art-line); stroke-width: 0.35; }
.g-post, .g-rail, .g-fence, .g-tower { fill: none; stroke: var(--art-post); stroke-width: 0.6; }
.g-axle { stroke: var(--art-post); stroke-width: 0.9; }
.g-cross { fill: none; stroke: var(--art-post); stroke-width: 0.75; }
.g-rope, .g-pestle { fill: none; stroke: var(--art-rope); stroke-width: 0.4; }
.g-pestle { stroke: var(--art-iron); stroke-width: 0.6; }
.g-smoke { fill: none; stroke: var(--art-smoke); stroke-width: 0.6; }
.g-spoke { fill: none; stroke: var(--art-post); stroke-width: 0.4; }
.g-wheel { fill: var(--art-plank); }
.g-flag { fill: var(--seal); stroke: none; }
.g-trunk { fill: var(--art-wood-dark); }
.g-leaf { fill: var(--art-leaf); }
.g-leaf-lit { fill: var(--art-leaf-lit); }
.g-hill { fill: var(--art-hill); }
.g-mesa { fill: var(--art-mesa); }
.g-strata { fill: none; stroke: var(--art-strata); stroke-width: 0.4; }
.g-brush { fill: none; stroke: var(--art-pine-far); stroke-width: 0.5; }
.g-crop { fill: var(--art-crop); }
.g-row { fill: none; stroke: var(--art-row); stroke-width: 0.45; }
.g-porch { fill: none; stroke: var(--art-roof); stroke-width: 0.9; }
.g-pool { fill: var(--art-water); stroke: var(--art-water-edge); stroke-width: 0.35; }
.g-wave { fill: none; stroke: var(--art-wave); stroke-width: 0.7; stroke-linecap: round; }
.g-ground { fill: none; stroke: var(--art-ground); stroke-width: 0.5; }
.g-pine { fill: var(--art-pine); }
.g-pine-far { fill: var(--art-pine-far); }
.map-label { font-size: 3.6px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: rgba(236, 225, 197, 0.92); stroke-width: 1.1px; stroke-linejoin: round; pointer-events: none; }
.map-node.is-selected .map-label { fill: var(--seal-deep); }
.mark-body rect { fill: var(--seal); filter: url(#seal-ink); }
.mark-body text { font-size: 3.1px; fill: var(--seal-ink); font-weight: 800; }
.map-node.is-body .glyph { filter: drop-shadow(0 0 1.5px rgba(184, 52, 42, 0.8)); }
.mark-searched circle { fill: #f6efd8; stroke: var(--ink-2); stroke-width: 0.4; }
.mark-searched path { fill: none; stroke: #3d6b4b; stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.mark-evidence circle { fill: var(--ink); }
.mark-evidence text { font-size: 3px; font-weight: 800; fill: var(--paper); font-family: var(--font-body); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ place panel & body */
.loc-panel { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: rgba(255, 252, 240, 0.3); }
.loc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loc-head h3 { font-size: 19px; margin-right: 4px; }
.chip-kind-home { border-color: var(--kind-home) !important; }
.chip-kind-work { border-color: var(--kind-work) !important; }
.chip-kind-public { border-color: var(--kind-public) !important; }
.chip-kind-wild { border-color: var(--kind-wild) !important; }
.loc-owners { font-size: 13px; color: var(--ink-3); }
.loc-callout { font-size: 13.5px; color: var(--seal-deep); font-weight: 700; }
.loc-actions { display: flex; gap: 8px; align-items: center; }
.searched-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.found-list { list-style: none; display: grid; gap: 6px; }
.found-item {
  width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline;
  padding: 8px 10px; border: 1px solid var(--ink-line); border-left: 3px solid var(--ochre); border-radius: 4px;
  background: rgba(255, 252, 240, 0.45); color: var(--ink);
}
.found-item:hover { background: rgba(255, 252, 240, 0.75); }
.found-item.is-fresh { animation: fresh 1.6s ease-out 1; border-left-color: var(--seal); }
@keyframes fresh { 0% { background: rgba(242, 196, 107, 0.6); } 100% { background: rgba(255, 252, 240, 0.45); } }
.found-kind { font-size: 11.5px; font-weight: 700; color: var(--ochre-dim); }
.found-name { font-family: var(--font-display); font-weight: 800; }
.found-desc { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.body-card { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: rgba(31, 26, 20, 0.08); border: 1px dashed rgba(123, 30, 23, 0.4); }
.body-card > .btn { grid-column: 1 / -1; justify-self: start; }
.body-portrait .portrait { border-radius: 4px; }
.body-text h3 { font-size: 16px; }
.body-text p { font-size: 13px; }
.body-k { color: var(--ink-3); }
.body-examine:not(:disabled) { animation: beckon 2.4s ease-out infinite; }

/* ------------------------------------------------------------------ interrogation */
.panel-night {
  border: 1px solid var(--night-line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--night-2) 92%, transparent), color-mix(in srgb, var(--night-1) 86%, transparent));
  box-shadow: var(--shadow-soft);
}
/* The roster (second row) scrolls sideways, so in an auto row its minimum height collapsed and
   the cards were clipped when space ran short. A min-content row keeps its own height (scrollbar
   included); the transcript (the minmax row) takes whatever space is left or missing. */
.interrogation { display: grid; grid-template-rows: auto min-content auto minmax(140px, 1fr) auto; min-height: 0; overflow: hidden; }
.interrogation > .panel-head { padding: 12px 16px 4px; }
.roster { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.roster.is-calling .roster-card:not(.is-dead) { animation: call 0.5s ease-in-out 3; }
@keyframes call { 50% { transform: translateY(-4px); border-color: var(--focus); } }
.roster-card {
  position: relative; flex: none; align-self: start; width: 86px; scroll-snap-align: start;
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px;
  border: 1px solid var(--night-line); border-radius: 8px; background: color-mix(in srgb, var(--wash) 3%, transparent); color: var(--moon);
  transition: border-color .18s, background .18s, transform .18s;
}
.roster-card:hover { border-color: var(--night-line-2); background: color-mix(in srgb, var(--wash) 7%, transparent); }
.roster-card.is-on { border-color: var(--seal); background: color-mix(in srgb, var(--seal) 14%, transparent); box-shadow: inset 0 -3px 0 var(--seal); }
.roster-card .portrait { border-radius: 5px; }
.roster-card.is-dead { opacity: 0.7; }
.roster-card.is-dead .portrait { filter: grayscale(1) contrast(.9); }
.roster-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.roster-occ { font-size: 11px; color: var(--moon-dim); line-height: 1.2; text-align: center; }
.roster-meta { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; align-items: center; }
.mood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px color-mix(in srgb, var(--night-0) 60%, transparent); }
.roster-count { font-size: 10px; min-width: 16px; padding: 0 4px; border-radius: 99px; background: color-mix(in srgb, var(--wash) 16%, transparent); line-height: 16px; }
.roster-contra { font-size: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--seal); color: var(--seal-ink); line-height: 16px; text-align: center; font-weight: 800; }
.roster-contra.is-done { background: color-mix(in srgb, var(--seal) 45%, transparent); }
.roster-soft { font-size: 10px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--ochre) 40%, transparent); color: var(--ochre-text); line-height: 16px; text-align: center; font-weight: 800; }
.link-btn.is-ochre { color: var(--ochre-text); }
.link-btn:hover { color: var(--moon); }

.dossier { padding: 0 16px 10px; }
.dossier-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--wash) 5%, transparent); border: 1px solid var(--night-line); }
.dossier-card.is-dead .portrait { filter: grayscale(1); }
.dossier-portrait .portrait { border-radius: 6px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
.dossier-portrait.is-shaken { animation: shaken 0.5s ease-in-out; }
@keyframes shaken { 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.dossier-text { min-width: 0; display: grid; gap: 3px; align-content: start; }
.dossier-name { font-size: 21px; color: var(--moon); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.dossier-age { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--moon-dim); }
.dossier-look { font-size: 12.5px; color: var(--mist); }
.dossier-bio { font-family: var(--font-voice); font-size: 14.5px; line-height: 1.55; color: var(--moon-dim); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dossier-more { display: none; }
.dossier-card.is-long .dossier-more { display: inline; }
.dossier-card.is-open .dossier-bio { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.dossier-stats { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.dossier-empty { padding: 12px 14px; border: 1px dashed var(--night-line-2); border-radius: 8px; }
.dossier-hint-title { font-family: var(--font-display); font-weight: 700; color: var(--moon); margin-bottom: 6px; }
.howto { padding-left: 1.3em; display: grid; gap: 4px; color: var(--moon-dim); font-size: 14px; }
.howto strong { color: var(--seal-text); }

.transcript-wrap { overflow-y: auto; min-height: 0; padding: 4px 16px 12px; border-top: 1px solid var(--night-line); scrollbar-width: thin; }
.transcript { list-style: none; display: grid; gap: 14px; padding-top: 12px; }
.tx { position: relative; }
.tx-empty { color: var(--moon-dim); font-family: var(--font-voice); padding: 18px 0; text-align: center; display: grid; justify-items: center; gap: 10px; }
.tx-empty > div { display: grid; gap: 10px; justify-items: center; }
.tx-q { display: flex; justify-content: flex-end; }
.bubble { margin: 0; }
.bubble-detective {
  max-width: min(78%, 560px); padding: 8px 14px 7px; border-radius: 12px 12px 3px 12px;
  color: var(--ink); background: var(--paper); background-image: var(--tex-grain);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.8);
}
.via-confront .bubble-detective { background-color: color-mix(in srgb, var(--paper) 86%, var(--seal)); border-left: 3px solid var(--seal); }
.bubble-detective .speaker { font-size: 11px; font-weight: 700; color: var(--seal-deep); letter-spacing: 0.08em; }
.bubble-detective .voice { font-family: var(--font-voice); font-size: 15.5px; line-height: 1.6; }
.tx-meta { display: block; text-align: right; font-size: 11px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.tx-q.is-failed .bubble-detective { opacity: 0.55; }
.tx-a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.tx-who .portrait { border-radius: 5px; }
.tx-body { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.tx-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tx-head strong { font-family: var(--font-display); color: var(--moon); }
.bubble-resident {
  max-width: min(92%, 620px); padding: 8px 14px; border-radius: 3px 12px 12px 12px;
  background: color-mix(in srgb, var(--wash) 6%, transparent); border: 1px solid color-mix(in srgb, var(--moon) 14%, transparent);
  font-family: var(--font-voice); font-size: 16px; line-height: 1.6; color: var(--moon);
}
.narr { font-family: var(--font-voice); font-style: italic; font-size: 14px; color: var(--moon-dim); padding-left: 4px; }
.narr::before { content: '— '; color: var(--mist); }
.is-new.bubble, .is-new.narr { animation: line-in 0.45s ease-out both; animation-delay: calc(var(--i, 0) * 170ms); }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tx-interpreted { font-size: 12px; color: var(--mist); }
.tx-stmts { display: grid; gap: 4px; margin-top: 2px; padding: 6px 8px; border-left: 2px solid rgba(185, 141, 62, 0.45); background: rgba(185, 141, 62, 0.06); border-radius: 0 4px 4px 0; }
.tx-stmts-label { font-size: 11px; color: var(--ochre-text); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tx-stmt { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ref { font-family: var(--font-body); font-size: 11px; color: var(--mist); font-variant-numeric: lining-nums tabular-nums; }
.paper .ref { color: var(--ink-3); }
.tx-a.is-broken .bubble-resident { border-color: color-mix(in srgb, var(--seal-bright) 50%, transparent); background: color-mix(in srgb, var(--seal) 12%, transparent); }
.stamp-host { position: absolute; right: 6px; top: -6px; width: 120px; height: 60px; pointer-events: none; }
.stamp-host .stamp { right: 0; top: 0; }
.tx-typing .typing { display: inline-flex; gap: 5px; padding: 12px 16px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--moon-dim); animation: dot 1.1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.tx-sys p { text-align: center; font-size: 12.5px; color: var(--mist); }

/* builder */
.builder-slot { border-top: 1px solid var(--night-line); background: color-mix(in srgb, var(--wash) 4%, transparent); }
.qb { display: grid; gap: 10px; padding: 12px 16px 14px; }
.qb-modes { justify-self: start; }
.qb-body { display: grid; gap: 10px; }
.qb-label { font-size: 12px; font-weight: 700; color: var(--moon-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  border: 1px solid var(--night-line-2); background: color-mix(in srgb, var(--wash) 2%, transparent); color: var(--moon);
  border-radius: 99px; padding: 0.28em 0.85em; font-size: 13.5px; line-height: 1.5;
  transition: background .15s, color .15s, border-color .15s;
}
.chip-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--moon) 50%, transparent); background: color-mix(in srgb, var(--wash) 6%, transparent); }
.chip-btn.is-on { background: var(--moon); color: var(--night-0); border-color: var(--moon); font-weight: 700; }
.chip-btn.is-emph:not(.is-on) { border-color: color-mix(in srgb, var(--seal-bright) 70%, transparent); color: var(--seal-text); }
.chip-btn.is-emph.is-on { background: var(--seal); color: var(--seal-ink); border-color: var(--seal); }
.chip-btn:disabled { opacity: 0.35; }
.qb-params { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.qb-field { display: grid; gap: 5px; align-content: start; }
.qb-window { grid-column: 1 / -1; }
.qb-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--moon-dim); }
.select-time { width: auto; min-width: 104px; font-variant-numeric: lining-nums tabular-nums; }
.qb-note { font-size: 13px; color: var(--moon-dim); font-family: var(--font-voice); }
.qb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qb-say { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.qb-preview { font-family: var(--font-voice); font-size: 15px; color: var(--moon); display: flex; gap: 8px; align-items: baseline; min-height: 1.6em; }
.qb-preview q { quotes: '“' '”'; }
.qb-speaker { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--seal-text); letter-spacing: 0.1em; text-transform: uppercase; flex: none; }
.qb-problem { font-size: 12.5px; color: var(--ochre-text); min-height: 1em; }
.qb-problem:empty { display: none; }
.qb-submit { min-width: 128px; }
.qb-suggest { display: grid; gap: 5px; }
.suggest-list { display: grid; gap: 5px; }
.suggest {
  text-align: left; display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--seal-bright) 45%, transparent); background: color-mix(in srgb, var(--seal) 10%, transparent); color: var(--moon); font-size: 13px;
}
.suggest:hover { background: color-mix(in srgb, var(--seal) 18%, transparent); }
.suggest.sev-soft { border-color: color-mix(in srgb, var(--ochre) 50%, transparent); background: color-mix(in srgb, var(--ochre) 8%, transparent); }
.suggest.sev-soft:hover { background: color-mix(in srgb, var(--ochre) 16%, transparent); }
.suggest.is-on { background: color-mix(in srgb, var(--seal) 28%, transparent); border-color: var(--seal-bright); }
.suggest-sev { flex: none; font-size: 11px; font-weight: 800; color: var(--seal-text); text-transform: uppercase; letter-spacing: 0.06em; }
.suggest.sev-soft .suggest-sev { color: var(--ochre-text); }
.suggest-text { min-width: 0; }
.qb-soft-note { font-size: 12.5px; color: var(--mist); }
.proof-list { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 210px; overflow-y: auto; scrollbar-width: thin; }
.proof-list legend { margin-bottom: 4px; }
.proof-group { display: grid; gap: 4px; }
.proof-group-title { font-size: 11px; color: var(--mist); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 2px; }
.proof-opt { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 6px 9px; border-radius: 5px; border: 1px solid var(--night-line); background: color-mix(in srgb, var(--wash) 2%, transparent); cursor: pointer; font-size: 13px; }
.proof-opt:hover { border-color: var(--night-line-2); }
.proof-opt.is-on { border-color: var(--seal); background: color-mix(in srgb, var(--seal) 13%, transparent); }
.proof-opt input { margin-top: 4px; accent-color: var(--seal); }
.proof-opt.is-own { opacity: 0.7; }
.proof-text { display: grid; gap: 1px; min-width: 0; }
.proof-text strong { font-weight: 500; font-family: var(--font-voice); }
.proof-opt.is-evidence .proof-text strong { font-family: var(--font-display); font-weight: 700; }
.proof-sub { font-size: 11.5px; color: var(--mist); }
.llm-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--moon-dim); }
.llm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mist); flex: none; }
.llm-status.is-on .llm-dot { background: var(--jade); box-shadow: 0 0 8px rgba(127, 209, 166, 0.7); }

/* ------------------------------------------------------------------ sheets & modals */
dialog { color: inherit; }
dialog::backdrop { background: rgba(4, 5, 12, 0.66); backdrop-filter: blur(2px); }
.sheet {
  margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0;
  width: min(1180px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
}
.sheet[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); animation: sheet-in 0.32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet.paper { border-radius: 0; box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.7), inset 0 0 80px rgba(140, 100, 40, 0.2); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px 8px; }
.sheet-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sheet-title h2 { font-size: 26px; }
.sheet-sub { font-size: 13px; color: var(--ink-3); }
.tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--ink-line); overflow-x: auto; scrollbar-width: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 9px;
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-3);
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--seal); }
.tab-count:not(:empty) { font-family: var(--font-body); font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: rgba(70, 52, 28, 0.12); color: var(--ink-2); line-height: 18px; }
.tab-count.is-soft:not(:empty) { background: rgba(185, 141, 62, 0.22); color: #6e4f18; }
.tab.has-new::after { content: ''; position: absolute; top: 8px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--seal-bright); }
.sheet-body { overflow-y: auto; padding: 16px 22px 48px; display: grid; gap: 18px; align-content: start; }
.sheet-body:focus { outline: none; }

.note-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13.5px; }
.note-controls .select { width: auto; min-width: 140px; }
.note-intro { font-family: var(--font-voice); color: var(--ink-2); }
.speaker-group { display: grid; gap: 10px; }
.speaker-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink-line); }
.speaker-head .portrait { border-radius: 4px; }
.speaker-head h3 { font-size: 18px; }
.card-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.note-card { display: grid; gap: 7px; padding: 12px 14px; border-radius: 6px; background: rgba(255, 252, 240, 0.42); border: 1px solid var(--ink-line); align-content: start; }
.note-card.has-contra { border-left: 3px solid var(--seal); }
.note-card.has-soft { border-left: 3px solid rgba(185, 141, 62, 0.7); }
.note-card.is-focus, .evidence-tag.is-focus { box-shadow: 0 0 0 3px rgba(242, 196, 107, 0.8); }
.note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-head .portrait { border-radius: 4px; }
.note-card .voice { margin: 0; font-family: var(--font-voice); font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.note-card .voice::before { content: '“'; color: var(--ink-3); }
.note-card .voice::after { content: '”'; color: var(--ink-3); }
.tells { font-family: var(--font-voice); font-style: italic; font-size: 13px; color: var(--ink-3); }
.contra-mini { list-style: none; display: grid; gap: 3px; font-size: 12.5px; color: var(--seal-deep); }
.contra-mini li::before { content: '⚠ '; }
.contra-mini .sev-soft { color: var(--ochre-dim); }
.note-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.asked { font-size: 11.5px; color: var(--ink-3); }

.tag-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.evidence-tag {
  position: relative; display: grid; gap: 6px; padding: 16px 16px 12px 30px; align-content: start;
  background: #e9dab6; background-image: var(--tex-grain);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  border-radius: 0 4px 4px 0;
  box-shadow: inset 0 0 0 1px rgba(110, 80, 30, 0.25);
}
.evidence-tag::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(110, 80, 30, 0.15); }
.tag-hole { position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--paper-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(185, 141, 62, 0.6); }
.evidence-tag.has-contra { box-shadow: inset 0 0 0 1px rgba(110, 80, 30, 0.25), inset 0 -3px 0 var(--seal); }
.ev-name { font-size: 17px; }
.ev-desc { font-family: var(--font-voice); font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.ev-where { font-size: 12px; color: var(--ink-3); }
.ev-weapon .ev-name, .ev-blood .ev-name, .ev-body .ev-name { color: var(--seal-deep); }

.autopsy-cta { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 30px 10px; font-family: var(--font-voice); }
.autopsy-doc { position: relative; max-width: 760px; padding: 26px 28px; border: 3px double rgba(70, 52, 28, 0.45); background: rgba(255, 252, 240, 0.45); display: grid; gap: 14px; }
.doc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.doc-head h3 { font-size: 22px; margin-top: 4px; }
.doc-fields { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); padding: 12px 0; }
.doc-fields dt { font-weight: 700; color: var(--ink-3); }
.doc-fields dd { margin: 0; font-family: var(--font-voice); font-size: 15.5px; }
.doc-strong { color: var(--seal-deep); font-weight: 700; }
.autopsy-doc h4 { font-size: 16px; }
.doc-findings { padding-left: 1.4em; display: grid; gap: 6px; font-family: var(--font-voice); font-size: 15px; line-height: 1.6; }

.contra-top { display: grid; gap: 10px; }
.contra-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 8px 12px; border-radius: 6px; border: 1px solid var(--ink-line); background: rgba(70, 52, 28, 0.06);
}
.contra-summary { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.soft-toggle { min-height: 32px; color: var(--ink-2); }
.contra-section { display: grid; gap: 10px; }
.contra-section-title { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.contra-none, .soft-hidden { font-family: var(--font-voice); color: var(--ink-3); padding: 2px 2px 6px; }
.contra-soft-note { font-size: 13px; color: var(--ink-3); margin-top: -4px; }
.soft-groups { list-style: none; display: grid; gap: 6px; }
.soft-group { border: 1px solid rgba(185, 141, 62, 0.45); border-radius: 6px; background: rgba(255, 252, 240, 0.3); }
.soft-group.is-done { opacity: 0.72; }
.soft-group.is-open { background: rgba(255, 252, 240, 0.45); }
.soft-group-head {
  width: 100%; min-height: 44px; display: grid; grid-template-columns: 1.1em minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; font-size: 14px;
}
.soft-group-head:hover { background: rgba(185, 141, 62, 0.1); }
.sg-caret { color: var(--ochre-dim); }
.sg-label { font-family: var(--font-voice); font-size: 15px; }
.sg-count { font-size: 12.5px; font-weight: 700; color: var(--ochre-dim); white-space: nowrap; }
.sg-who { grid-column: 2 / -1; font-size: 12.5px; color: var(--ink-3); }
.soft-cards { padding: 0 10px 10px; }
.soft-cards .contra-card { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; background: rgba(255, 252, 240, 0.55); }
.soft-cards .contra-seal { display: none; }
.contra-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 6px; background: rgba(255, 252, 240, 0.42); border: 1px solid var(--ink-line); }
.contra-card.sev-hard { border-color: rgba(184, 52, 42, 0.5); }
.contra-card.sev-soft { border-color: rgba(185, 141, 62, 0.4); }
.contra-card.is-new { box-shadow: 0 0 0 2px rgba(242, 196, 107, 0.85); }
.contra-main { display: grid; gap: 8px; min-width: 0; }
.contra-reason { font-family: var(--font-voice); font-size: 15.5px; color: var(--ink); }
.tl-pair { list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.tl-pair li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.pair-tag { font-family: var(--font-body); font-weight: 700; color: var(--paper); background: var(--ink-2); border-radius: 3px; padding: 0 6px; font-size: 12px; }
.empty-state { padding: 40px 12px; text-align: center; color: var(--ink-3); font-family: var(--font-voice); display: grid; gap: 6px; justify-items: center; }
.empty-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-2); }

/* ------------------------------------------------------------------ timeline */
.timeline { display: grid; gap: 12px; }
.tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tl-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tl-board { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--ink-line); border-radius: 6px; background: rgba(255, 252, 240, 0.5); overflow: hidden; }
.tl-labels { border-right: 1px solid var(--ink-line); background: rgba(236, 225, 197, 0.6); }
.tl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tl-scroll:focus-visible { outline: 2px solid var(--seal-deep); outline-offset: -2px; }
.tl-svg, .tl-label-svg { display: block; max-width: none; font-family: var(--font-body); }
.tl-corner { font-size: 11px; fill: var(--ink-3); }
.tl-name { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; fill: var(--ink); }
.tl-occ { font-size: 10.5px; fill: var(--ink-3); }
.tl-name.tl-surname { font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.tl-row-bg { fill: transparent; }
.tl-row-bg.is-alt { fill: rgba(120, 90, 40, 0.05); }
.tl-row-bg.is-dead { fill: rgba(30, 26, 22, 0.07); }
.tl-label-svg .is-dead + svg { filter: grayscale(1); }
.tl-night { fill: rgba(38, 45, 95, 0.075); }
.tl-grid { stroke: rgba(70, 52, 28, 0.11); stroke-width: 1; }
.tl-grid.is-major { stroke: rgba(70, 52, 28, 0.3); }
.tl-tick { font-size: 10.5px; fill: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.tl-day { font-family: var(--font-display); font-weight: 800; font-size: 13px; fill: var(--ink-2); }
.tl-day-line { stroke: rgba(70, 52, 28, 0.38); stroke-width: 1; }
.tl-death .band { fill: rgba(184, 52, 42, 0.1); }
.tl-death .edge { stroke: rgba(184, 52, 42, 0.55); stroke-dasharray: 3 3; }
.tl-death .label { font-size: 11.5px; font-weight: 700; fill: var(--seal-deep); }
.tl-discovery line { stroke: var(--ink-2); stroke-dasharray: 2 3; }
.tl-discovery text { font-size: 11px; fill: var(--ink-2); font-weight: 700; }
.tl-zone { fill: rgba(184, 52, 42, 0.09); stroke: rgba(184, 52, 42, 0.75); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tl-zone.sev-soft { fill: rgba(185, 141, 62, 0.1); stroke: rgba(160, 115, 40, 0.75); }
.tl-bar { cursor: pointer; outline: none; transition: opacity .2s; }
.tl-bar .core { stroke: var(--loc-ink); stroke-width: 0.8; }
.tl-bar .halo { opacity: 0.36; }
.tl-bar.src-other .core { stroke-width: 1; }
.tl-bar.src-evidence .core, .tl-bar.src-evidence .halo { fill-opacity: 0.16; stroke: var(--loc-ink); stroke-width: 1.6; stroke-dasharray: 1.5 2.4; stroke-linecap: round; }
.tl-bar.src-evidence .halo { stroke-width: 1; }
.tl-bar.prec-vague .core { opacity: 0.85; }
.tl-bar .instant { stroke-width: 1.2; }
.tl-bar.is-contra .core { stroke: var(--seal); stroke-width: 2; stroke-dasharray: none; }
.tl-bar.is-contra.is-hard .core { stroke-width: 2.6; }
.tl-bar:hover .core, .tl-bar:focus-visible .core { stroke: #c4881f; stroke-width: 2.6; }
.tl-bar.is-picked .core { stroke: var(--ink); stroke-width: 2.6; }
.bar-label { font-size: 10px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(30, 20, 10, 0.55); stroke-width: 2.4px; pointer-events: none; }
.src-other .bar-label, .src-evidence .bar-label { fill: var(--ink); stroke: rgba(255, 250, 235, 0.9); }
.only-contra .tl-bar:not(.is-contra) { opacity: 0.18; }
.is-heating .tl-bar:not(.is-hot) { opacity: 0.28; }
.tl-marker { cursor: pointer; outline: none; }
.tl-marker circle { fill: var(--seal); stroke: var(--paper); stroke-width: 1.6; }
.tl-marker.sev-soft circle { fill: var(--ochre); }
.tl-marker text { font-size: 11px; font-weight: 800; fill: #fff; pointer-events: none; }
.tl-marker:hover circle, .tl-marker:focus-visible circle { stroke: #c4881f; stroke-width: 2.6; }
.tl-marker.is-picked circle { stroke: var(--ink); stroke-width: 2.4; }
.tl-empty { font-family: var(--font-voice); font-size: 14px; fill: var(--ink-3); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12.5px; color: var(--ink-2); }
.tl-legend ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 26px; height: 10px; border-radius: 2px; }
.sw-self { background: #a8794a; border: 1px solid #5d4024; }
.sw-other { background: repeating-linear-gradient(45deg, #a8794a 0 2px, rgba(168, 121, 74, 0.2) 2px 5px); border: 1px solid #5d4024; }
.sw-evidence { background: rgba(168, 121, 74, 0.16); border: 1.5px dotted #5d4024; }
.sw-halo { background: linear-gradient(90deg, rgba(168, 121, 74, 0.35) 0 25%, #a8794a 25% 75%, rgba(168, 121, 74, 0.35) 75%); }
.sw-death { background: rgba(184, 52, 42, 0.16); border-left: 1px dashed var(--seal); border-right: 1px dashed var(--seal); }
.sw-contra { border: 2px solid var(--seal); }
.loc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.tl-detail { min-height: 64px; padding: 12px 14px; border-radius: 6px; border: 1px dashed var(--ink-line); display: grid; gap: 8px; }
.tl-detail h4 { font-size: 15px; }
.tl-hint { font-family: var(--font-voice); color: var(--ink-3); font-size: 14px; }
.tl-quote { margin: 0; font-family: var(--font-voice); font-size: 15px; padding-left: 10px; border-left: 3px solid var(--paper-edge); }
.tl-reason { font-family: var(--font-voice); font-size: 15px; }
.tl-contras { list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--seal-deep); }
.tl-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ accusation */
.modal { width: min(880px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; overflow: auto; }
.modal[open] { animation: modal-in 0.35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { padding: 24px 26px 6px; display: grid; gap: 4px; }
.modal-kicker { font-family: var(--font-body); font-size: 12px; color: var(--seal-deep); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.modal-head h2 { font-size: clamp(24px, 4vw, 32px); }
.modal-sub { color: var(--ink-3); font-family: var(--font-voice); }
.modal-accuse.is-forced .modal-kicker { color: var(--seal); }
.acc-form { padding: 10px 26px 24px; display: grid; gap: 16px; }
.acc-section { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.acc-section legend { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.acc-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--seal); color: var(--seal); font-family: var(--font-body); font-size: 13px; }
.acc-opt-note { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--ink-3); }
.acc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.acc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-opt { position: relative; cursor: pointer; }
.acc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.acc-card {
  display: grid; justify-items: center; gap: 2px; padding: 10px 6px 9px; border-radius: 6px; text-align: center;
  border: 1px solid rgba(70, 52, 28, 0.25); background: rgba(255, 252, 240, 0.4); transition: border-color .15s, background .15s, transform .15s;
}
.acc-card .portrait { border-radius: 5px; }
.acc-name { font-family: var(--font-display); font-weight: 800; }
.acc-occ { font-size: 12px; color: var(--ink-3); }
.acc-chip { display: inline-block; padding: 0.35em 1em; border-radius: 99px; border: 1px solid rgba(70, 52, 28, 0.3); background: rgba(255, 252, 240, 0.4); font-weight: 700; font-size: 14px; }
.acc-opt:hover .acc-card, .acc-opt:hover .acc-chip { border-color: var(--ink-2); }
.acc-opt input:checked + .acc-card { border-color: var(--seal); background: rgba(184, 52, 42, 0.12); box-shadow: inset 0 0 0 1px var(--seal); transform: translateY(-2px); }
.acc-opt input:checked + .acc-chip { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.acc-opt input:focus-visible + .acc-card, .acc-opt input:focus-visible + .acc-chip { outline: 2px solid var(--seal-deep); outline-offset: 2px; }
.acc-summary { font-family: var(--font-voice); font-size: clamp(17px, 2.6vw, 20px); text-align: center; padding: 12px; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.acc-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.acc-stamp-host { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.acc-stamp-host .stamp { left: 0; top: 0; translate: -50% -50%; }
.modal-accuse { position: fixed; }
.modal-accuse.is-sealing .acc-form { filter: saturate(.7); }

/* ------------------------------------------------------------------ verdict */
.verdict-screen { width: min(1220px, 100%); margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 22px; }
.verdict-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: stretch; }
.verdict-head { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: 'grade title' 'results results'; gap: 16px 22px; padding: 26px; }
.grade-host { grid-area: grade; position: relative; width: 150px; height: 150px; }
.grade-host .stamp { left: 0; top: 0; }
.verdict-title { grid-area: title; display: grid; gap: 4px; align-content: center; }
.verdict-title h1 { font-size: clamp(28px, 4.6vw, 42px); }
.verdict-head.is-wrong .verdict-title h1 { color: var(--seal-deep); }
.grade-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink-2); }
.grade-line { font-family: var(--font-voice); color: var(--ink-2); }
.score { font-size: 14px; color: var(--ink-3); }
.score strong { font-family: var(--font-display); font-size: 26px; color: var(--ink); }
.result-list { grid-area: results; list-style: none; display: grid; gap: 6px; border-top: 1px solid var(--ink-line); padding-top: 14px; }
.result-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; }
.result-label { font-family: var(--font-display); font-weight: 800; color: var(--ink-3); }
.result-mine { font-weight: 700; }
.result-row.is-skip .result-mine { color: var(--ink-3); font-weight: 400; }
.result-real { color: var(--ink-2); font-family: var(--font-voice); }
.mark-no .seal-inner, .paper .seal.mark-no .seal-inner { background: var(--slate); }
.mark-skip .seal-inner, .paper .seal.mark-skip .seal-inner { background: #9d927d; }
.culprit-card { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 22px 18px; text-align: center; }
.culprit-card .portrait { border-radius: 6px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.culprit-card h2 { font-size: 26px; color: var(--seal-deep); }
.culprit-how { font-size: 13.5px; color: var(--ink-2); }
.story { padding: 24px 28px; display: grid; gap: 14px; }
.story h2 { font-size: 22px; }
.story-list { padding-left: 1.4em; display: grid; gap: 10px; font-family: var(--font-voice); font-size: 16.5px; line-height: 1.65; }
.story-list li::marker { color: var(--seal); font-family: var(--font-display); font-weight: 800; }
.section-head { display: grid; gap: 4px; margin-bottom: 12px; }
.section-head h2, .replay-section > h2 { font-size: 24px; color: var(--moon); }
.verdict-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.reveal, .lies { padding: 22px; display: grid; gap: 10px; }
.reveal h2, .lies h2 { font-size: 20px; }
.reveal-list { list-style: none; display: grid; gap: 2px; max-height: 620px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.reveal-btn {
  width: 100%; text-align: left; display: grid; grid-template-columns: 92px auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline;
  padding: 7px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font-size: 14px;
}
.reveal-btn:hover { background: rgba(70, 52, 28, 0.07); }
.reveal-time { font-size: 12px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.reveal-times { font-size: 11px; }
.reveal-repeat { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); }
.reveal-kind { font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 3px; background: rgba(70, 52, 28, 0.1); color: var(--ink-2); }
.reveal-text { font-family: var(--font-voice); line-height: 1.6; }
.reveal-loc { grid-column: 3; font-size: 11.5px; color: var(--ink-3); }
.rk-crime .reveal-kind { background: var(--seal); color: var(--seal-ink); }
.rk-crime .reveal-text { color: var(--seal-deep); font-weight: 700; }
.rk-lie .reveal-kind { background: rgba(122, 93, 140, 0.2); color: #5a3f6b; }
.rk-clue .reveal-kind { background: rgba(185, 141, 62, 0.25); color: #77561f; }
.reveal-item.is-now .reveal-btn { background: rgba(242, 196, 107, 0.35); box-shadow: inset 3px 0 0 var(--seal); }
.reveal-item:not(.is-past) .reveal-btn { opacity: 0.55; }
.lie-list { list-style: none; display: grid; gap: 10px; }
.lie-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 6px; background: rgba(255, 252, 240, 0.42); border: 1px solid var(--ink-line); }
.lie-said { font-family: var(--font-voice); color: var(--ink-3); }
.lie-said s { text-decoration-color: rgba(184, 52, 42, 0.7); text-decoration-thickness: 1.5px; }
.lie-when { font-size: 12px; color: var(--ink-3); }
.lie-truth { font-family: var(--font-voice); font-size: 15px; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--seal); }
.verdict-foot { display: flex; justify-content: center; padding-top: 8px; }

/* replay */
.replay { display: grid; gap: 12px; }
.replay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.replay-stage { position: relative; aspect-ratio: 1; max-height: min(78vh, 760px); width: 100%; margin: 0 auto; padding: 8px; overflow: hidden; }
.replay-stage .village-map { width: 100%; height: 100%; }
.replay-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(28, 34, 86, 0); mix-blend-mode: multiply; transition: background 1.4s ease; border-radius: inherit; }
.replay-stage.is-night::after { background: rgba(28, 34, 86, 0.32); }
.replay-stage.is-kill::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(184, 52, 42, 0.55); z-index: 1; animation: kill-flash 2.4s ease-out both; }
@keyframes kill-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0.25; } }
.token { transition: opacity .3s; }
.token-body { stroke: #1f1a14; stroke-width: 0.5; }
.token-halo { fill: none; stroke: transparent; stroke-width: 0.8; }
.token-label { font-family: var(--font-display); font-size: 2.6px; font-weight: 800; fill: #fff; pointer-events: none; }
.token-label.is-dark { fill: var(--ink); }
.token.is-asleep { opacity: 0.62; }
.token.is-dead .token-body { fill: #777064 !important; }
.token.is-dead .token-label { fill: #ddd; }
.token.is-marked .token-halo { stroke: var(--seal); stroke-width: 1.1; }
.is-following .token:not(.is-followed) { opacity: 0.22; }
.token.is-followed .token-halo { stroke: var(--focus); stroke-width: 1.1; }
.trail { fill: none; stroke-width: 0.9; stroke-dasharray: 1.6 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.kill-ring { fill: none; stroke: var(--seal-bright); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: ring 1.5s ease-out 3; }
.kill-ring-2 { animation-delay: 0.5s; }
@keyframes ring { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.replay-banner {
  position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translate(-50%, 12px); opacity: 0;
  display: grid; gap: 2px; justify-items: center; padding: 10px 18px; border-radius: 4px; text-align: center;
  background: var(--seal); color: var(--seal-ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7);
  transition: opacity .4s, transform .4s; width: max-content; max-width: calc(100% - 32px);
}
.replay-banner.is-on { opacity: 1; transform: translate(-50%, 0); }
.banner-time { font-size: 12px; letter-spacing: 0.1em; opacity: 0.9; }
.banner-text { font-family: var(--font-voice); font-weight: 700; font-size: 16px; }
.replay-side { display: grid; gap: 12px; align-content: start; }
.replay-time { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); color: var(--moon); }
.replay-day { font-size: 15px; color: var(--moon-dim); }
.replay-hm { font-size: 34px; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.replay-part { font-size: 15px; color: var(--moon-dim); }
.replay-captions { list-style: none; display: grid; gap: 6px; min-height: 180px; align-content: end; }
.cap { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--moon-dim); }
.cap.is-new { animation: line-in 0.4s ease-out both; color: var(--moon); }
.cap-time { font-variant-numeric: lining-nums tabular-nums; color: var(--mist); font-size: 12px; }
.cap-text { font-family: var(--font-voice); line-height: 1.55; }
.cap-kill .cap-text, .cap-death .cap-text { color: var(--seal-text); font-weight: 700; }
.lg-token { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--font-display); font-size: 11px; font-weight: 800; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); flex: none; }
.cap-token { width: 18px; height: 18px; font-size: 9.5px; }
.lg-token.is-dark { color: var(--ink); text-shadow: none; }
.replay-legend-title { font-size: 14px; color: var(--moon-dim); }
.replay-legend { list-style: none; display: grid; gap: 4px; }
.lg-btn { width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; padding: 4px 6px; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--moon); font-size: 13.5px; }
.lg-btn:hover { background: color-mix(in srgb, var(--wash) 6%, transparent); }
.lg-btn[aria-pressed='true'] { border-color: var(--focus); background: rgba(242, 196, 107, 0.08); }
.lg-name { font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.lg-where { font-size: 12px; color: var(--moon-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--night-line); border-radius: 8px; background: color-mix(in srgb, var(--night-2) 70%, transparent); }
.replay-play { min-width: 84px; }
.replay-scrubber { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.replay-scrub { width: 100%; accent-color: var(--seal); }
.replay-ticks { width: 100%; height: 14px; }
.replay-ticks .tick { stroke: color-mix(in srgb, var(--moon) 35%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.replay-ticks .tick-kill { stroke: var(--seal-bright); stroke-width: 3; }
.replay-ticks .tick-death { stroke: var(--seal); }
.replay-ticks .tick-argue, .replay-ticks .tick-threaten { stroke: var(--ochre); }
.replay-ticks .tick-tryst { stroke: #b48bc9; }
.replay-ticks .tick-steal, .replay-ticks .tick-take_item, .replay-ticks .tick-drop_item, .replay-ticks .tick-wash { stroke: #c9a35f; }
.replay-ticks .tick-discover_body { stroke: var(--moon); }
.replay-speed { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--moon-dim); }
.replay-routine { font-size: 13px; color: var(--moon-dim); }

/* ------------------------------------------------------------------ portraits */
.portrait { overflow: visible; flex: none; }
.portrait-bg { fill: #e7dab9; }
.portrait.is-dead { filter: grayscale(0.85) contrast(0.95); }
.portrait-smoke { animation: smoke-path 5s linear infinite; stroke-dasharray: 40; }

/* ------------------------------------------------------------------ debug */
.debug-fab {
  position: fixed; left: 14px; bottom: 14px; z-index: 40; padding: 8px 14px; border-radius: 99px;
  border: 1px dashed var(--ochre); background: color-mix(in srgb, var(--night-2) 92%, transparent); color: var(--ochre-text); font-weight: 700; font-size: 13px;
}
.sheet-debug { margin: 0 auto 0 0; width: min(640px, 100vw); background: var(--night-1); color: var(--moon); }
.sheet-debug[open] { grid-template-rows: auto minmax(0, 1fr); }
.sheet-debug .sheet-sub { color: var(--moon-dim); }
.sheet-debug .icon-btn { color: var(--moon); border-color: var(--night-line-2); }
.debug-body { overflow: auto; padding: 8px 18px 40px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12.5px; }
.debug-highlights { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--seal); border-radius: 6px; font-family: var(--font-body); }
.debug-highlights dt { color: var(--moon-dim); }
.debug-highlights dd { margin: 0; color: var(--seal-text); font-weight: 700; }
.j-root, .j-list { list-style: none; padding-left: 14px; }
.j-root { padding-left: 0; }
.j-node summary { cursor: pointer; }
.j-key { color: var(--tone-grieving); }
.j-meta { color: var(--mist); }
.j-string { color: var(--ochre-text); }
.j-number { color: var(--jade); }
.j-boolean, .j-null { color: var(--seal-text); }
.j-more { color: var(--mist); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .inv-main { grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); gap: 12px; padding: 12px; }
  .replay-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}

@media (max-width: 960px) {
  .inv-screen { height: auto; min-height: 100dvh; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand actions' 'clock clock'; position: sticky; top: 0; }
  .brand { grid-area: brand; }
  .top-actions { grid-area: actions; }
  .clock { grid-area: clock; justify-self: stretch; grid-template-columns: minmax(0, 1fr) auto; }
  .incense { width: 100%; }
  .inv-main { grid-template-columns: minmax(0, 1fr); }
  .inv-left { overflow: visible; }
  .map-wrap { max-width: 520px; }
  .interrogation { grid-template-rows: auto auto auto auto auto; overflow: visible; }
  .transcript-wrap { max-height: 62vh; min-height: 160px; }
  .verdict-top { grid-template-columns: minmax(0, 1fr); }
  .culprit-card { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 18px; }
  .culprit-card .portrait { grid-row: span 5; }
  .replay-layout { grid-template-columns: minmax(0, 1fr); }
  .replay-captions { min-height: 0; }
  .replay-legend { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .verdict-columns { grid-template-columns: minmax(0, 1fr); }
  .brief-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .topbar { padding: 8px 12px; gap: 8px 10px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'brand' 'actions' 'clock'; }
  .top-actions { justify-content: flex-start; flex-wrap: nowrap; }
  .brand-village { font-size: 17px; }
  .brand-seal { --seal-size: 28px !important; }
  .top-actions { gap: 6px; }
  .top-btn { min-height: 34px; padding: 0.3em 0.7em; font-size: 13px; }
  .clock-now { font-size: 16px; }
  .inv-main { padding: 10px; gap: 10px; }
  .inv-left { padding: 12px; }
  .roster { padding: 6px 10px 8px; }
  .roster-card { width: 74px; }
  .dossier { padding: 0 10px 8px; }
  .dossier-card { grid-template-columns: 1fr; }
  .dossier-portrait { display: none; }
  .transcript-wrap { padding: 2px 10px 10px; max-height: 46vh; }
  .bubble-detective { max-width: 92%; }
  /* question builder for one thumb: full-width mode tabs, swipeable single rows of chips,
     44px targets, 16px form text (no zoom on focus), and Ask docked at the bottom */
  .qb { padding: 10px 10px 0; }
  .qb-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; }
  .qb-modes .seg { justify-content: center; min-height: 42px; padding: 0.35em 0.4em; }
  .chip-btn { min-height: 40px; padding: 0.35em 0.95em; font-size: 14px; }
  .qb-kinds, .qb-window .chip-row {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 -10px; padding: 0 10px 2px; scroll-padding: 0 10px;
  }
  .qb-kinds::-webkit-scrollbar, .qb-window .chip-row::-webkit-scrollbar { display: none; }
  .qb-kinds .chip-btn, .qb-window .chip-btn { flex: none; scroll-snap-align: start; }
  .qb-params { grid-template-columns: minmax(0, 1fr); }
  .qb .select, .qb .textarea { min-height: 44px; font-size: 16px; }
  .select-time { min-width: 0; flex: 1 1 110px; }
  .proof-opt { min-height: 44px; padding: 8px 10px; }
  .proof-opt input { width: 18px; height: 18px; }
  .suggest { min-height: 44px; align-items: center; }
  .proof-list { max-height: 40vh; }
  .qb-foot {
    position: sticky; bottom: 0; z-index: 2; margin: 0 -10px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: var(--night-2); border-top: 1px solid var(--night-line);
    box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.5);
  }
  .qb-submit { min-height: 48px; }
  .toast-host { inset: calc(8px + env(safe-area-inset-top)) 0 auto 0; }
  .soft-group-head { padding: 10px; }
  .stamp-host { width: 70px; height: 70px; right: 0; }
  .sheet-head { padding: 12px 14px 6px; }
  .tabs { padding: 0 8px; }
  .tab { padding: 9px 10px 8px; font-size: 14.5px; }
  .sheet-body { padding: 12px 12px 40px; }
  .card-list { grid-template-columns: minmax(0, 1fr); }
  .contra-card { grid-template-columns: minmax(0, 1fr); }
  .contra-seal { display: none; }
  .autopsy-doc { padding: 18px 16px; }
  .doc-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc-fields dd { margin-bottom: 8px; }
  .modal-head { padding: 18px 16px 4px; }
  .acc-form { padding: 8px 16px 18px; }
  .acc-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .verdict-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'grade' 'title' 'results'; justify-items: start; padding: 18px; }
  .grade-host { width: 140px; height: 140px; }
  .result-row { grid-template-columns: 44px minmax(0, 1fr) 34px; }
  .result-real { grid-column: 2 / -1; font-size: 13.5px; }
  .story { padding: 18px; }
  .story-list { font-size: 15.5px; }
  .reveal-btn { grid-template-columns: auto minmax(0, 1fr); }
  .reveal-time { grid-column: 1 / -1; }
  .reveal-loc { grid-column: 2; }
  .culprit-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .wordmark-seal { position: static; justify-self: center; margin-top: 12px; transform: rotate(-4deg); --seal-size: 52px !important; }
  .moon { display: none; }
  .title-card { padding: 18px 16px 16px; }
  .brief-head { flex-direction: column-reverse; }
  .brief-seal { align-self: flex-end; margin-top: 0; }
  .victim-card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .replay-hm { font-size: 28px; }
}

@media (max-width: 420px) {
  .top-actions .btn { padding: 0.3em 0.55em; }
  .topbar .clock { margin-right: 136px; }
  .brand-case { display: none; }
  .map-legend { display: none; }
  .body-card { grid-template-columns: auto 1fr; }
  .body-card > .btn { grid-column: 1 / -1; }
  .qb-foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .qb-say { flex: none; } /* its 260px basis would become a height in the column */
  .qb-submit { width: 100%; }
  .seg { padding: 0.35em 0.6em; font-size: 13px; }
  .loc-actions .btn { min-height: 44px; flex: 1; }
  .contra-bar { padding: 8px 10px; }
  .tabs { padding: 0 4px; gap: 0; }
  .tab { padding: 9px 7px 8px; gap: 4px; font-size: 14px; }
  .replay-controls { gap: 8px; }
  .replay-scrubber { flex-basis: 100%; order: 5; }
}

@media (pointer: coarse) {
  .tab { min-height: 44px; }
  .link-btn { padding: 6px 2px; }
  .check { min-height: 36px; }
  .lg-btn { min-height: 40px; }
}

@media (min-width: 961px) {
  /* Two-column layout (fixed to the screen height), town column: the map row takes only the
     height left after the place and body cards (at least 160px). The SVG is xMidYMid meet, so it
     shrinks centred and keeps its aspect (0.78–1.42 per town; tall towns used to clip the body card). */
  .inv-left { grid-template-rows: auto minmax(160px, auto) auto auto; }
  .map-wrap { max-height: 100%; }
  /* The place card is 98–158px depending on the place. Reserving the usual maximum keeps the map
     from resizing on every click; it shrinks once, when an evidence list is added. */
  .loc-panel { min-height: 158px; align-content: start; }
}

@media (min-width: 961px) and (max-height: 860px) {
  /* The roster keeps its height, so the transcript's minimum drops and Ask stays on screen at 720px. */
  .interrogation { grid-template-rows: auto min-content auto minmax(96px, 1fr) auto; }
  /* Short screens (1366×768, 1024×768 …): flat roster cards, portrait left, name and trade right. */
  .roster { padding: 6px 14px 8px; }
  .roster-card { width: auto; grid-template-columns: auto auto; justify-items: start; align-items: center; column-gap: 8px; row-gap: 0; padding: 5px 28px 5px 6px; text-align: left; }
  /* The mood dot and statement count stack in the 28px right margin, clear of the name. */
  .roster-meta { flex-direction: column-reverse; }
  .roster-card .portrait { width: 30px; height: 36px; grid-row: span 2; }
  .roster-name, .roster-occ { grid-column: 2; text-align: left; }
  .dossier-card { padding: 8px 10px; gap: 10px; }
  .dossier-portrait .portrait { width: 56px; height: 67px; }
  .dossier-look { display: none; }
  .dossier-bio { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .dossier-more { display: inline; }
  .dossier-card.is-open .dossier-look { display: block; }
  .dossier-card.is-open .dossier-bio { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .interrogation > .panel-head { padding-top: 8px; }
  .qb { gap: 8px; padding-top: 10px; }
  .proof-list { max-height: 150px; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .incense-smoke, .mist, .portrait-smoke, .li-smoke { display: none; }
  .map-node.is-selected .sel-ring { animation: none; }
}

/* ------------------------------------------------------------------ campaign */
/* mode choice on the title screen */
.seg-mode-control { justify-self: center; background: color-mix(in srgb, var(--night-2) 70%, transparent); }
.seg-mode-control .seg { min-height: 40px; padding: 0.4em 1.3em; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; }
.field-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.seg-length-control { justify-self: start; }
.seg-length-control .seg { min-height: 36px; min-width: 56px; justify-content: center; }
.overwrite-confirm { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid rgba(184, 52, 42, 0.5); background: rgba(184, 52, 42, 0.08); font-size: 14px; color: var(--seal-deep); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.saved-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; text-align: left; transform: rotate(0.3deg); border-left: 4px solid var(--seal); }
.saved-card.is-ended { border-left-color: var(--ink-3); }
.saved-line { font-family: var(--font-voice); font-size: 15px; color: var(--ink); }
.saved-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* reputation meter: a paper strip, ash toward resentment, warm toward trust, a brass star riding on it */
.rep-meter { display: grid; gap: 6px; }
.rep-head { display: flex; align-items: baseline; gap: 8px; }
.rep-label { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.rep-num { font-family: var(--font-display); font-size: 22px; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.rep-meter.is-pos .rep-num { color: var(--seal-deep); }
.rep-meter.is-neg .rep-num { color: var(--slate); }
.rep-word { font-family: var(--font-voice); font-size: 14px; color: var(--ink-3); }
.rep-track {
  position: relative; height: 12px; margin: 12px 18px; border-radius: 99px;
  background: linear-gradient(90deg, #4b4552 0%, #8d8478 40%, #cdbf9b 50%, #d6a774 75%, #c2553e 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(70, 52, 28, 0.25);
}
.rep-ash { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(40, 30, 20, 0.22) 9.5% 10%); }
.rep-zero { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink-2); opacity: 0.55; }
.rep-fill { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: rgba(255, 245, 220, 0.55); transition: left 0.9s cubic-bezier(.3, .7, .3, 1), width 0.9s cubic-bezier(.3, .7, .3, 1); }
.rep-meter.is-neg .rep-fill { background: rgba(20, 18, 30, 0.45); }
.rep-marker .seal-inner, .paper .rep-marker .seal .seal-inner { background: var(--ochre); color: var(--ink); }
.rep-marker { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); transition: left 0.9s cubic-bezier(.3, .7, .3, 1); }
.rep-meter.is-moving .rep-marker { animation: rep-wobble 0.9s ease-in-out; }
@keyframes rep-wobble { 50% { transform: translate(-50%, -62%) rotate(4deg); } }
.rep-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; }
.rep-small .rep-track { height: 8px; margin: 8px 14px; }
.rep-small .rep-num { font-size: 17px; }
.rep-delta { font-family: var(--font-display); font-weight: 800; font-size: 18px; min-height: 1.5em; text-align: center; color: var(--ink-2); }
.rep-delta.is-up { color: var(--seal-deep); }
.rep-delta.is-down { color: var(--slate); }

/* chapter card, interlude, ending */
.campaign-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: clamp(16px, 4vh, 48px) 16px; }
.chapter-card, .interlude-doc, .ending-doc { width: min(760px, 100%); padding: clamp(20px, 4vw, 38px); display: grid; gap: 22px; position: relative; }
.chapter-card::before, .interlude-doc::before, .ending-doc::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(120, 90, 40, 0.28); border-radius: 3px; pointer-events: none; }
.chapter-head, .ending-head { display: flex; gap: 20px; align-items: center; }
.chapter-seal, .ending-seal { transform: rotate(-6deg); }
.chapter-titles { min-width: 0; }
.chapter-title, .interlude-title, .ending-title { font-size: clamp(28px, 5vw, 42px); margin-top: 4px; }
.chapter-village, .interlude-days, .ending-tally { color: var(--ink-3); margin-top: 2px; }
.camp-progress { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; }
.camp-dot {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  border: 1px solid var(--ink-line); color: var(--ink-3); background: rgba(255, 252, 240, 0.35);
}
.camp-dot.is-now { border: 2px solid var(--seal); color: var(--seal-deep); }
.camp-dot.is-right { background: var(--seal); color: var(--seal-ink); border-color: var(--seal); }
.camp-dot.is-wrong { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.previously h2, .ledger-title { font-size: 18px; letter-spacing: 0.04em; margin-bottom: 8px; }
.previously-list, .news-list { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; font-family: var(--font-voice); font-size: 16px; line-height: 1.6; }
.previously-list li, .news-list li { padding-left: 14px; border-left: 3px solid rgba(184, 52, 42, 0.55); }
.chapter-first { font-family: var(--font-voice); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.chapter-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chapter-foot .btn-large { margin-left: auto; }
.interlude-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.interlude-mark { position: relative; width: 76px; height: 76px; flex: none; }
.interlude-mark .stamp { inset: 0; }
.news { border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); padding: 16px 0; }
.interlude-rep { display: grid; gap: 4px; }
.ending-lines { display: grid; gap: 10px; font-family: var(--font-voice); font-size: 17px; line-height: 1.65; }

/* ledger */
.ledger-list { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.ledger-row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.2fr) auto 40px; gap: 4px 12px; align-items: center;
  padding: 8px 12px; border-radius: 6px; border: 1px solid var(--ink-line); background: rgba(255, 252, 240, 0.38); font-size: 14px;
}
.ledger-row.is-latest { box-shadow: inset 3px 0 0 var(--seal); }
.ledger-ch { font-family: var(--font-display); font-weight: 800; color: var(--ink-2); }
.ledger-k { color: var(--ink-3); font-size: 12px; }
.ledger-truth { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-3); }
.ledger-truth:empty { display: none; }
.ledger-rep { grid-row: 1; grid-column: 4; font-size: 12.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.ledger-rep.is-up { color: var(--seal-deep); }
.ledger-mark { grid-row: 1 / span 2; grid-column: 5; justify-self: end; }
.paper .ledger-row.is-wrong .seal .seal-inner { background: var(--slate); }
.paper .ledger-row.is-none .seal .seal-inner { background: #8d8478; }
.ledger-foot { margin-top: 8px; font-size: 13px; color: var(--ink-3); text-align: right; }

/* briefing and top bar inside a campaign */
.brief-campaign { display: grid; gap: 10px; padding: 12px 16px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: rgba(255, 252, 240, 0.3); }
.bc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; align-items: center; }
.bc-chapter { font-family: var(--font-display); color: var(--ink-2); }
.bc-chapter strong { color: var(--seal-deep); font-size: 18px; }
.bc-previously summary { cursor: pointer; font-weight: 700; color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.bc-previously ul { display: grid; gap: 6px; padding-left: 18px; margin: 6px 0 0; font-family: var(--font-voice); font-size: 15px; }
.brand-chapter {
  display: inline-block; margin-left: 10px; padding: 0.05em 0.6em; border-radius: 99px; vertical-align: 0.15em;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--seal-ink); background: rgba(184, 52, 42, 0.75);
}

@media (max-width: 640px) {
  .seg-mode-control { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; }
  .seg-mode-control .seg { justify-content: center; min-height: 44px; }
  .seg-length-control .seg { min-height: 44px; }
  .saved-card { padding: 12px 14px; }
  .saved-actions { width: 100%; }
  .saved-actions .btn { flex: 1; min-height: 44px; }
  .chapter-head, .ending-head { gap: 14px; }
  .chapter-seal, .ending-seal { --seal-size: 56px !important; }
  .chapter-foot { flex-direction: column-reverse; align-items: stretch; }
  .chapter-foot .btn-large { margin-left: 0; width: 100%; }
  .chapter-foot .btn-small { min-height: 40px; }
  .bc-head { grid-template-columns: minmax(0, 1fr); }
  .ledger-row { grid-template-columns: 72px minmax(0, 1fr) 36px; }
  .ledger-victim, .ledger-accused, .ledger-truth, .ledger-rep { grid-column: 2; grid-row: auto; }
  .ledger-mark { grid-column: 3; grid-row: 1 / span 3; }
  .brand-chapter { margin-left: 6px; font-size: 11px; }
}
/* narrowest phones: a campaign brand has no room beside three buttons, so the pill takes its own
   line under the town name (breaking only at the dot) and the brand mark steps aside for it */
@media (max-width: 420px) {
  .brand.has-chapter .brand-seal { display: none; }
  .brand-chapter { display: block; width: max-content; max-width: 100%; margin: 2px 0 0; white-space: normal; }
  .brand-chapter > span { white-space: nowrap; }
}

/* ==================================================================
   HIGH-CONTRAST THEME (src/ui/theme.js sets it from the title card or the system setting).
   Active when <html data-theme="high-contrast">. Text is at least 7:1 on its ground
   (4.5:1 at 24px+), and surfaces and controls are bounded by lines of at least 3:1.
   Textures and glows are dropped so nothing sits behind text.
   ================================================================== */
:root[data-theme="high-contrast"] {
  --night-0: #000000; --night-1: #05060c; --night-2: #0a0c18; --night-3: #10132a; --night-4: #1a1e3c;
  --night-line: #8c8676; --night-line-2: #bdb59f;
  --moon: #fffaf0; --moon-dim: #e8e1cf; --mist: #cbc8d8;
  --paper: #fffaf0; --paper-2: #f6eedb; --paper-3: #ebe0c4; --paper-edge: #5e4f33;
  --ink: #0d0a06; --ink-2: #2a2218; --ink-3: #41372a; --ink-line: #6b5a3a;
  --seal: #9a2820; --seal-bright: #7a1d16; --seal-deep: #6b1812; --seal-ink: #fffaf0;
  --ochre: #f2c877; --ochre-dim: #5a4210; --jade: #8fd4b6; --violet: #cdb4e0; --focus: #ffd27a;
  --tone-calm: #a8dec6; --tone-nervous: #f4c86c; --tone-angry: #ffa48c; --tone-broken: #f3abc8; --tone-grieving: #aecaf0;
  --hc-seal-on-night: #ffb4a3;
  --wash: #fffaf0; --seal-text: #ffb4a3; --ochre-text: #f2c877; --slate: #3a3442;
  --paper-hi: #fffaf0; --paper-lo: #fffaf0; --glow-a: transparent; --glow-b: transparent;
  --sky-top: #000; --sky-bottom: #0a0c18; --ridge-far: #1a1e3c; --ridge-mid: #10132a; --ridge-near: #05060c; --moon-disc: #fffaf0;
  --art-ink: #0d0a06; --art-line: rgba(13, 10, 6, 0.7); --pt-ink: #0d0a06;
  color-scheme: dark;
}
/* grounds: flat, no texture or glow */
:root[data-theme="high-contrast"] body { background: var(--night-0); }
:root[data-theme="high-contrast"] .paper { background: var(--paper); box-shadow: 0 0 0 1px var(--paper-edge), 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
:root[data-theme="high-contrast"] .panel-night,
:root[data-theme="high-contrast"] .topbar { background: var(--night-2); }
:root[data-theme="high-contrast"] .brief-doc::before,
:root[data-theme="high-contrast"] .chapter-card::before,
:root[data-theme="high-contrast"] .interlude-doc::before,
:root[data-theme="high-contrast"] .ending-doc::before { border-color: var(--ink-line); }
:root[data-theme="high-contrast"] .bubble-detective { background: var(--paper); box-shadow: 0 0 0 1px var(--paper-edge); }
:root[data-theme="high-contrast"] .bubble-resident { background: var(--night-3); border-color: var(--night-line-2); }

/* seal fills on night are bounded by a light line (the fill itself is darkened for its text) */
:root[data-theme="high-contrast"] .btn-seal { background-image: none; border-color: var(--seal-ink); }
:root[data-theme="high-contrast"] .badge-seal,
:root[data-theme="high-contrast"] .roster-contra,
:root[data-theme="high-contrast"] .top-contra .top-count:not(:empty):not(.top-soft),
:root[data-theme="high-contrast"] .chip-kind.kind-confession { box-shadow: 0 0 0 1px var(--seal-ink); }
:root[data-theme="high-contrast"] .paper .badge-seal,
:root[data-theme="high-contrast"] .paper .chip-kind.kind-confession { box-shadow: none; }
:root[data-theme="high-contrast"] .chip-kind.kind-confession { color: var(--seal-ink); background: var(--seal); }

/* text set in literal colours in styles.css */
:root[data-theme="high-contrast"] .link-btn.is-seal,
:root[data-theme="high-contrast"] .howto strong,
:root[data-theme="high-contrast"] .qb-speaker,
:root[data-theme="high-contrast"] .chip-btn.is-emph:not(.is-on),
:root[data-theme="high-contrast"] .suggest-sev,
:root[data-theme="high-contrast"] .cap-kill .cap-text, :root[data-theme="high-contrast"] .cap-death .cap-text,
:root[data-theme="high-contrast"] .clock.is-low .clock-left,
:root[data-theme="high-contrast"] .clock-float,
:root[data-theme="high-contrast"] .debug-highlights dd { color: var(--hc-seal-on-night); }
:root[data-theme="high-contrast"] .link-btn.is-ochre,
:root[data-theme="high-contrast"] .suggest.sev-soft .suggest-sev { color: var(--ochre); }
:root[data-theme="high-contrast"] .badge-ochre { color: var(--ochre-dim); background: var(--paper-2); border-color: var(--ochre-dim); }
:root[data-theme="high-contrast"] .top-contra .top-count.top-soft:not(:empty),
:root[data-theme="high-contrast"] .roster-soft { color: var(--ochre); background: var(--night-0); box-shadow: 0 0 0 1px var(--ochre); }
:root[data-theme="high-contrast"] .tab-count.is-soft:not(:empty) { color: var(--ochre-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--ochre-dim); }
:root[data-theme="high-contrast"] .rk-lie .reveal-kind { color: #4a2a5c; background: transparent; box-shadow: inset 0 0 0 1px #4a2a5c; }
:root[data-theme="high-contrast"] .rk-clue .reveal-kind { color: #4e3a0e; background: transparent; box-shadow: inset 0 0 0 1px #4e3a0e; }
:root[data-theme="high-contrast"] .rep-meter.is-neg .rep-num,
:root[data-theme="high-contrast"] .rep-delta.is-down { color: var(--ink); }
:root[data-theme="high-contrast"] .tone-dead { --tone: #d4cfc3; }

/* control and card boundaries that were translucent */
:root[data-theme="high-contrast"] .btn-paper,
:root[data-theme="high-contrast"] .paper .input, :root[data-theme="high-contrast"] .paper .select, :root[data-theme="high-contrast"] .paper .textarea,
:root[data-theme="high-contrast"] .paper .chip,
:root[data-theme="high-contrast"] .acc-card, :root[data-theme="high-contrast"] .acc-chip,
:root[data-theme="high-contrast"] .autopsy-doc { border-color: var(--ink-line); }
:root[data-theme="high-contrast"] .paper .btn-ghost { border-color: var(--ink-line); color: var(--ink-2); }
:root[data-theme="high-contrast"] .btn-ghost:hover:not(:disabled),
:root[data-theme="high-contrast"] .chip-btn:hover:not(:disabled) { border-color: var(--moon); }
:root[data-theme="high-contrast"] .chip-btn.is-emph:not(.is-on),
:root[data-theme="high-contrast"] .suggest { border-color: var(--hc-seal-on-night); }
:root[data-theme="high-contrast"] .suggest.sev-soft,
:root[data-theme="high-contrast"] .soft-group { border-color: var(--ochre); }
:root[data-theme="high-contrast"] .paper .soft-group { border-color: var(--ochre-dim); }
:root[data-theme="high-contrast"] .contra-card.sev-hard { border-color: var(--seal); }
:root[data-theme="high-contrast"] .contra-card.sev-soft { border-color: var(--ochre-dim); }
:root[data-theme="high-contrast"] .note-card.has-soft { border-left-color: var(--ochre-dim); }
:root[data-theme="high-contrast"] .tx-stmts { border-left-color: var(--ochre); }
:root[data-theme="high-contrast"] .tx-a.is-broken .bubble-resident { border-color: var(--hc-seal-on-night); }
:root[data-theme="high-contrast"] .cost-chip.is-free,
:root[data-theme="high-contrast"] .overwrite-confirm { border-color: var(--seal); }
:root[data-theme="high-contrast"] .previously-list li, :root[data-theme="high-contrast"] .news-list li { border-left-color: var(--seal); }
:root[data-theme="high-contrast"] .evidence-tag { box-shadow: inset 0 0 0 1px var(--ink-line); }
:root[data-theme="high-contrast"] .evidence-tag.has-contra { box-shadow: inset 0 0 0 1px var(--ink-line), inset 0 -3px 0 var(--seal); }
:root[data-theme="high-contrast"] .body-card { border-color: var(--seal-deep); }

/* dimmed states stay readable */
:root[data-theme="high-contrast"] .reveal-item:not(.is-past) .reveal-btn { opacity: 0.8; }
:root[data-theme="high-contrast"] .roster-card.is-dead { opacity: 1; }
:root[data-theme="high-contrast"] .btn:disabled { opacity: 0.6; }
/* found by auditing every screen in this theme */
:root[data-theme="high-contrast"] .paper .seal:not(.seal-word) .seal-inner { background: var(--seal); }
:root[data-theme="high-contrast"] .paper .seal { mix-blend-mode: normal; }
:root[data-theme="high-contrast"] .mark-skip .seal-inner { background: #4f483d; }
:root[data-theme="high-contrast"] .howto-num { color: var(--hc-seal-on-night); }
:root[data-theme="high-contrast"] .reveal-item:not(.is-past) .reveal-btn { opacity: 1; }
/* light initials: darken the clothing colour 40% so every colour reads at least 8:1 */
:root[data-theme="high-contrast"] .lg-token:not(.is-dark) { text-shadow: none; box-shadow: inset 0 0 0 1.5px #000, inset 0 0 0 20px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--moon); }
:root[data-theme="high-contrast"] .lg-token.is-dark { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 1px var(--moon); }

/* ------------------------------------------------------------------ daily */
/* Daily Case: the dated card on the title, the board after a verdict (grade, marks, share, stats,
   countdown, calendar). Paper on the ground, the same stamps as the verdict. */
.daily-card {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'main mark' 'actions actions';
  gap: 10px 16px; padding: 16px 20px; text-align: left; position: relative; border-top: 4px solid var(--seal); transform: rotate(-0.25deg);
}
.daily-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(120, 90, 40, 0.25); border-radius: 3px; pointer-events: none; }
.daily-card.is-unavailable { grid-template-areas: 'main'; grid-template-columns: minmax(0, 1fr); border-top-color: var(--ink-3); }
.daily-main { grid-area: main; display: grid; gap: 4px; min-width: 0; }
.daily-main > .btn { justify-self: start; margin-top: 4px; }
.daily-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.04em; }
.daily-badge { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 0.45em; border-radius: 3px; background: var(--seal); color: var(--seal-ink); }
.daily-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 5.4vw, 32px); color: var(--ink); letter-spacing: 0.01em; }
.daily-line { font-family: var(--font-voice); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.daily-done { font-weight: 700; color: var(--seal-deep); }
.daily-mark { grid-area: mark; align-self: center; transform: rotate(-7deg); }
.daily-actions { grid-area: actions; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.daily-actions .btn-daily { min-width: 9.5em; justify-content: center; }
.countdown { font-size: 13.5px; color: var(--ink-3); }
.cd-time { font-family: var(--font-display); font-weight: 800; font-size: 1.15em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.04em; }
.badge-practice { margin-left: 8px; background: #3d5a50; color: #f1ead6; vertical-align: 0.15em; letter-spacing: 0.1em; }
.brand-chapter.brand-daily.is-practice { background: rgba(61, 90, 80, 0.9); }

/* the board */
.daily-screen { width: min(860px, 100%); margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 18px; }
.daily-head { position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: 'grade text' 'marks marks'; gap: 14px 22px; padding: 24px; }
.daily-head.is-empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'text'; }
.daily-grade-host { grid-area: grade; width: 124px; height: 124px; }
.daily-head-text { grid-area: text; display: grid; gap: 4px; align-content: center; min-width: 0; }
.daily-head h1 { font-size: clamp(26px, 4.6vw, 38px); }
.daily-head.is-wrong h1 { color: var(--seal-deep); }
.daily-name { white-space: nowrap; }
.daily-verdict-word { font-size: 0.62em; color: var(--ink-2); white-space: nowrap; }
.daily-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.practice-note { font-size: 13.5px; color: #3d5a50; font-weight: 700; }
.daily-marks { grid-area: marks; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0 0; margin: 0; border-top: 1px solid var(--ink-line); }
.dm { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: var(--radius); border: 1px solid var(--ink-line); background: rgba(255, 252, 240, 0.35); }
.dm-label { font-family: var(--font-display); font-weight: 800; color: var(--ink-2); letter-spacing: 0.1em; }
.daily-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.daily-share .btn { min-height: 44px; }
.share-note { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--moon-dim); }
.daily-share .btn-paper { background: var(--paper); }
.daily-board { display: grid; gap: 20px; padding: 22px; }
.daily-sub { font-size: 18px; letter-spacing: 0.04em; margin-bottom: 8px; }
.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat-tile { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--radius); border: 1px solid var(--ink-line); background: rgba(255, 252, 240, 0.35); }
.stat-num { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.stat-label { font-size: 12.5px; color: var(--ink-3); }
.grade-bars { list-style: none; display: grid; gap: 5px; padding: 0; margin: 14px 0 0; }
.grade-bar { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.gb-grade { font-family: var(--font-display); font-weight: 800; color: var(--ink-2); text-align: center; }
.gb-track { height: 16px; border-radius: 2px; background: rgba(70, 52, 28, 0.08); overflow: hidden; }
.gb-fill { display: block; height: 100%; background: #6d6152; border-radius: 2px; }
.grade-bar.is-mine .gb-fill { background: var(--seal); }
.gb-n { font-size: 13px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.board-countdown { text-align: center; padding: 10px; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }

/* friends who sent their link (src/daily/compare.js) */
.daily-friends-line { font-size: 13.5px; font-weight: 700; color: var(--seal-deep); }
.daily-friends { display: grid; gap: 8px; padding: 20px 24px; }
.daily-friends.is-locked { padding-block: 16px; }
.friends-line { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.friends-list { list-style: none; display: grid; gap: 4px; padding: 0; margin: 0; }
.friend-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px 56px 64px 44px; gap: 8px; align-items: center;
  min-height: 44px; padding: 4px 12px; border-radius: var(--radius); border: 1px solid var(--ink-line); font-variant-numeric: lining-nums tabular-nums;
}
.friend-row.is-me { border: 2px solid var(--seal); }
.fr-rank { font-family: var(--font-display); font-weight: 800; color: var(--ink-2); text-align: center; }
.fr-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row.is-me .fr-name { color: var(--seal-deep); }
.fr-grade { font-family: var(--font-display); font-weight: 800; color: var(--ink); text-align: center; }
.fr-score, .fr-min { font-size: 14px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.fr-marks { font-family: var(--font-display); font-size: 13px; color: var(--ink-3); letter-spacing: 0.05em; text-align: right; }
.friends-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* one more case after the daily: the unlimited single cases */
.daily-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 24px; }
.daily-more-text { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.daily-more .daily-sub { margin-bottom: 0; }
.daily-more-line { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.daily-more .btn-another { min-height: 44px; }

/* calendar */
.daily-calendar { width: 100%; max-width: 480px; justify-self: center; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-title { font-family: var(--font-display); font-size: 17px; }
.cal-head .btn { min-width: 40px; min-height: 40px; justify-content: center; color: var(--ink-2); font-size: 20px; }
.cal-head .btn:disabled { opacity: 0.3; }
.cal-grid { display: grid; gap: 4px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--ink-3); font-weight: 700; }
.cal-gc { display: grid; }
.cal-cell {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; min-height: 40px; padding: 0; border-radius: 4px;
  font: inherit; font-size: 13px; color: var(--ink-2); border: 1px solid var(--ink-line); background: rgba(255, 252, 240, 0.4); cursor: pointer;
}
button.cal-cell:hover { border-color: var(--seal); }
.cal-cell.is-blank { border: 0; background: none; }
.cal-cell.is-off { color: rgba(70, 52, 28, 0.38); background: none; border-color: transparent; cursor: default; }
.cal-cell.is-solved { background: var(--seal); border-color: var(--seal); color: var(--seal-ink); }
.cal-cell.is-unsolved { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.cal-cell.is-today { box-shadow: 0 0 0 2px var(--ochre); }
.cal-cell.is-current { outline: 2px dashed var(--ink-2); outline-offset: 1px; }
.cal-day { line-height: 1; }
.cal-mark { position: absolute; right: 3px; bottom: 2px; font-family: var(--font-display); font-weight: 800; font-size: 10px; opacity: 0.9; }
.cal-legend { list-style: none; display: flex; gap: 14px; justify-content: center; padding: 0; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.cal-legend li::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; border: 1px solid var(--ink-line); }
.cal-legend .lg-solved::before { background: var(--seal); border-color: var(--seal); }
.cal-legend .lg-unsolved::before { background: var(--slate); border-color: var(--slate); }
.cal-legend .lg-unplayed::before { background: rgba(255, 252, 240, 0.6); }
.cal-note { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.daily-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .daily-card { padding: 14px; }
  .daily-actions .btn { flex: 1; min-height: 44px; justify-content: center; }
  .daily-head { grid-template-columns: 84px minmax(0, 1fr); padding: 18px 16px; gap: 12px 14px; }
  .daily-grade-host { width: 84px; height: 84px; }
  .daily-head .doc-kicker { letter-spacing: 0.06em; }
  .daily-verdict-word { display: block; font-size: 0.55em; }
  .daily-grade-host .seal { --seal-size: 78px !important; }
  .daily-marks { gap: 6px; }
  .dm { flex-direction: column; gap: 4px; padding: 6px 4px; }
  .daily-board { padding: 16px 14px; }
  .daily-friends { padding: 16px 14px; }
  .daily-more { padding: 16px 14px; }
  .daily-more .btn-another { flex: 1 1 100%; }
  .friend-row { grid-template-columns: 24px minmax(0, 1fr) 20px 44px 64px; gap: 6px; padding: 4px 8px; }
  .fr-marks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* screen readers still get the marks */
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-share .btn { flex: 1 1 140px; }
  .cal-row, .cal-grid { gap: 3px; }
  .cal-cell { min-height: 36px; font-size: 12px; }
  .daily-foot .btn { flex: 1; min-height: 44px; }
}

:root[data-theme="high-contrast"] .daily-card::before { border-color: var(--paper-edge); }
:root[data-theme="high-contrast"] .cal-cell.is-off { color: var(--ink-3); }
:root[data-theme="high-contrast"] .share-note { color: var(--moon); }
:root[data-theme="high-contrast"] .badge-practice { background: #1f3d33; color: #fffaf0; }