/* 부검 — noir Korean folk-mystery.
   Deep indigo night, aged hanji paper, vermilion seals (도장), muted ochre.
   Textures are CSS-only (inline SVG data URIs). */

/* ------------------------------------------------------------------ tokens */
:root {
  --night-0: #07080f;
  --night-1: #0c0f1e;
  --night-2: #131830;
  --night-3: #1b2142;
  --night-4: #262d55;
  --night-line: rgba(214, 200, 166, 0.14);
  --night-line-2: rgba(214, 200, 166, 0.26);
  --moon: #ebe3cc;
  --moon-dim: #b3ab95;
  --mist: #7f7d92;

  --paper: #ece1c5;
  --paper-2: #e3d5b3;
  --paper-3: #d4c39b;
  --paper-edge: #b7a074;
  --ink: #1f1a14;
  --ink-2: #463b2d;
  --ink-3: #74654f;
  --ink-line: rgba(70, 52, 28, 0.2);

  --seal: #b8342a;
  --seal-bright: #d04532;
  --seal-deep: #7b1e17;
  --seal-ink: #f6e9cf;
  --ochre: #b98d3e;
  --ochre-dim: #8e6c33;
  --jade: #5d8777;
  --violet: #7a5d8c;
  --focus: #f2c46b;

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

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.4) 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);

  --font-display: 'Nanum Myeongjo', 'Noto Serif KR', 'AppleMyungjo', 'Batang', 'BatangChe', serif;
  --font-voice: 'Gowun Batang', 'Nanum Myeongjo', 'Noto Serif KR', 'Batang', serif;
  --font-body: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', system-ui, 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 .85 0 0 0 0 .82 0 0 0 0 .74 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  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 {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--moon);
  background-color: var(--night-0);
  background-image:
    var(--tex-night),
    radial-gradient(1200px 700px at 82% -12%, rgba(120, 132, 196, 0.17), transparent 62%),
    radial-gradient(900px 600px at 8% 112%, rgba(150, 62, 40, 0.1), transparent 60%),
    linear-gradient(180deg, #0c1022 0%, #08091a 55%, #06070d 100%);
  background-attachment: fixed;
  word-break: keep-all;
  overflow-wrap: break-word;
  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-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
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, #efe5cb, #e2d3ae);
  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 :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: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover:not(:disabled) { border-color: rgba(235, 227, 204, 0.5); background: rgba(255, 255, 255, 0.06); }
.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: #3a2f22; }
.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: #e88d78; }

.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 0.45em 0.7em;
  border-radius: 4px; border: 1px solid var(--night-line-2);
  background: rgba(8, 10, 22, 0.55); 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-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: tabular-nums; }
.chip-kind { font-weight: 700; }
.chip-kind.kind-confession { color: #f3c2b6; 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: rgba(255, 255, 255, 0.08); color: var(--moon-dim); }

.seg-control { display: inline-flex; padding: 3px; border-radius: 6px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--night-line); gap: 2px; }
.seg {
  border: 0; background: transparent; color: var(--moon-dim); 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.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: 800;
  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-vertical .seal-inner { writing-mode: vertical-rl; font-size: calc(var(--seal-size) * 0.36); letter-spacing: 0.04em; }
.seal-grid .seal-inner { grid-auto-flow: column; direction: rtl; gap: 0; font-size: calc(var(--seal-size) * 0.3); }
.seal-grid .seal-col { writing-mode: vertical-rl; direction: ltr; line-height: 1.05; }
.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 .seal-inner { background: #b9372b; }

.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: rgba(19, 24, 48, 0.96); 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, rgba(120, 30, 22, 0.55), rgba(19, 24, 48, 0.96) 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: rgba(255, 255, 255, 0.08); }
@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: rgba(10, 12, 26, 0.97); 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(--paper); }
.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%, #fbf4dc, #e9dcb4 52%, #cbbb8e 100%);
  box-shadow: 0 0 60px 18px rgba(240, 225, 180, 0.16), 0 0 160px 60px rgba(150, 160, 220, 0.12);
  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; }
.ridge-far { fill: #151a33; }
.ridge-mid { fill: #0f1326; }
.ridge-near { fill: #080a15; }
.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, rgba(170, 176, 210, 0.22), transparent 70%); animation: drift 38s linear infinite alternate; }
.mist-2 { bottom: 2vh; background: linear-gradient(90deg, transparent 10%, rgba(170, 176, 210, 0.18), 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(84px, 19vw, 176px); font-weight: 800; line-height: 1; letter-spacing: 0.06em;
  color: var(--paper); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 0 50px rgba(235, 220, 180, 0.12);
  padding-left: 0.06em;
}
.wordmark-seal { position: absolute; right: -14%; bottom: 18%; transform: rotate(-7deg); }
.wordmark-roman { font-family: var(--font-display); letter-spacing: 0.9em; font-size: 12px; color: var(--mist); margin-top: 6px; padding-left: 0.9em; }
.wordmark-roman.is-hanzi { letter-spacing: 0.48em; padding-left: 0.48em; font-size: 13px; }
.tagline { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: clamp(17px, 3.6vw, 21px); color: var(--moon); letter-spacing: 0.35em; }
.tagline::before, .tagline::after { content: ''; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--moon-dim)); }
.tagline::after { transform: scaleX(-1); }
.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: 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; word-break: keep-all; }
.title-privacy a { color: var(--moon); text-underline-offset: 3px; display: inline-block; padding-block: 4px; }
.title-privacy a:hover { color: var(--ochre); }
.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: 18px; border-radius: 0 0 20px 20px; background: linear-gradient(#8a6a33, #4e3a1a); }
.li-stick { position: absolute; bottom: 16px; left: 19px; width: 2px; height: 70px; background: #7a3b22; }
.li-stick::after { content: ''; position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: #ff8a3a; box-shadow: 0 0 10px 3px rgba(255, 120, 40, 0.6); animation: ember 1.6s ease-in-out infinite; }
.li-smoke { position: absolute; left: 14px; bottom: 82px; width: 12px; height: 60px; border-radius: 50%; border-left: 2px solid rgba(220, 215, 200, 0.4); 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(--paper); }
.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: 70px; }
.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-display); font-size: 13px; letter-spacing: 0.2em; 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.25em; 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.7; }
.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: 10px; font-family: var(--font-voice); font-size: clamp(16px, 2.2vw, 18.5px); line-height: 1.85; 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, rgba(19, 24, 48, 0.92), rgba(12, 15, 30, 0.86));
  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(--paper); }
.brand-case { font-size: 12.5px; color: var(--moon-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-mock .brand-case::after { content: ' · 목업'; color: var(--ochre); }
.top-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.top-btn { position: relative; }
.top-contrast[aria-pressed='true'], .top-music[aria-pressed='true'] { background: var(--moon); color: var(--night-0); border-color: var(--moon); }
/* 한 줄 상단 바의 좁은 구간(961~1280px): 양쪽 칸을 같은 폭으로 나누면 버튼 다섯(소리·고대비·수첩·모순·지목하기, 약 410px)이
   1195px에서도 400px 칸에 들어가지 못해 두 줄로 감기고, 상단 바가 67→110px로 커져 아래 두 칸을 밀어냈다.
   버튼 칸은 제 폭만큼 쓰고 남는 폭은 이름 칸이 받는다(사건명은 넘치면 말줄임). */
@media (min-width: 961px) and (max-width: 1280px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .top-actions { flex-wrap: nowrap; }
}
/* two-row top bar (960px and under): a fourth button would squeeze the village name, so the toggle sits at the end of the clock row */
@media (max-width: 960px) {
  .top-contrast { position: absolute; right: 18px; bottom: 8px; }
  .top-music { position: absolute; right: 96px; bottom: 8px; }
  .topbar .clock { margin-right: 156px; }
}
@media (max-width: 640px) {
  .top-contrast { right: 12px; }
  .top-music { right: 82px; }
  .topbar .clock { margin-right: 132px; }
}
.top-count:not(:empty) { min-width: 20px; padding: 0 6px; border-radius: 99px; background: rgba(235, 227, 204, 0.14); 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: rgba(185, 141, 62, 0.28); color: #f0d6a2; 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 (incense) */
.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: #6c6158; }
.incense-track { position: absolute; left: 12px; right: 4px; top: 14px; height: 3px; }
.incense-stick {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(90deg, #5b2a17, #8a4426 40%, #93502c); border-radius: 2px;
  transition: width 1.1s cubic-bezier(.3, .7, .3, 1);
}
.incense-ember {
  position: absolute; right: -4px; top: -2.5px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff1b8, #ff8a2c 45%, #c7321c 80%);
  box-shadow: 0 0 8px 2px rgba(255, 120, 40, 0.65), 0 0 18px 6px rgba(255, 90, 30, 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: rgba(225, 220, 205, 0.32); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 80; animation: smoke-path 4.6s linear infinite; }
.incense-smoke .smoke-b { stroke: rgba(225, 220, 205, 0.2); 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: 1px; right: 0; height: 0; border-top: 1px dashed rgba(170, 165, 150, 0.35); 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: 800; font-size: 19px; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-left { font-size: 12.5px; color: var(--moon-dim); white-space: nowrap; }
.clock.is-low .clock-left { color: #f08b6f; }
.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: #f0a58f; 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: #c9a35f; }
.lg-work::before { background: #9b5c3c; }
.lg-public::before { background: #6f9584; border-radius: 50% !important; }
.lg-wild::before { background: #5f7547; }
.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); }
.glyph { transition: transform .2s; stroke: #2a2219; stroke-width: 0.45; stroke-linejoin: round; }
.g-wall { fill: #efe2c2; }
.g-thatch { fill: #c9a35f; }
.g-line { fill: none; stroke: rgba(60, 40, 15, 0.5); stroke-width: 0.35; }
.g-door { fill: #4a3a28; stroke: none; }
.g-window { fill: #f2c46b; stroke: #4a3a28; stroke-width: 0.3; }
.g-tile { fill: #3b3530; }
.g-ridge { stroke: #18130e; stroke-width: 0.9; }
.glyph-work .g-wall { fill: #d6b997; }
.g-pole { stroke: #3b2a1a; stroke-width: 0.5; }
.g-flag { fill: var(--seal); stroke: none; }
.g-plaza { fill: rgba(111, 149, 132, 0.28); stroke: rgba(70, 100, 85, 0.55); stroke-width: 0.4; stroke-dasharray: 1 1; }
.g-post { stroke: #3b2a1a; stroke-width: 0.7; }
.g-floor { fill: #9b8463; }
.g-pool { fill: rgba(86, 130, 150, 0.3); stroke: rgba(60, 100, 120, 0.5); stroke-width: 0.35; }
.g-wave { fill: none; stroke: #406a80; stroke-width: 0.7; stroke-linecap: round; }
.g-plot { fill: rgba(150, 160, 90, 0.35); }
.g-ground { fill: none; stroke: rgba(70, 80, 40, 0.6); stroke-width: 0.5; }
.g-pine { fill: #4f6a3b; }
.g-pine-far { fill: #6f845a; }
/* zh: a Ming North-China village (map.js mingGlyph) */
.g-roof { fill: #6f6b66; }
.g-tileline { fill: none; stroke: rgba(30, 28, 26, 0.45); stroke-width: 0.3; }
.g-court { fill: #ddd0b2; }
.g-cap { stroke: #5c5955; stroke-width: 0.9; stroke-linecap: square; }
.g-gate { fill: #8a2f24; }
.g-shopfront { fill: #8a6a48; }
.g-counter { fill: #c7a77a; }
.g-flag-edge { fill: none; stroke: var(--seal); stroke-width: 0.4; }
.g-flag-cloth { fill: #f1e6c8; stroke: var(--seal); stroke-width: 0.45; }
.g-flag-text { font-size: 3.4px; font-weight: 700; font-family: var(--font-display, serif); fill: var(--seal); stroke: none; }
.g-redwall { fill: #a63b2c; }
.g-step { fill: #aaa397; }
.g-plaque { fill: #2f2a26; stroke: #c49a43; stroke-width: 0.3; }
.g-plaque.is-red { fill: #8a2f24; }
.g-incense { stroke: #6b4a2b; stroke-width: 0.5; }
.g-trunk { fill: #5a4632; }
.g-crown { fill: #5b7444; }
.g-crown-light { fill: none; stroke: #8aa166; stroke-width: 0.6; }
.g-ribbon { stroke: var(--seal); stroke-width: 0.7; }
.g-shadow { fill: rgba(60, 50, 30, 0.18); stroke: none; }
.g-boat { fill: #7a5a3a; }
.g-awning { fill: #2f2b28; }
.g-wheel { fill: none; stroke: #5a4632; stroke-width: 0.6; }
.g-rope { fill: none; stroke: #8a7a5a; stroke-width: 0.35; }
.g-axle { stroke: #3b2a1a; stroke-width: 1; }
.g-umbrella { fill: #c9a35f; }
.g-umbrella.is-red { fill: var(--seal); }
.g-table { fill: #9b8463; }
.g-goods { fill: #d9b25c; stroke-width: 0.3; }
.g-jar { fill: #6b4a2b; stroke-width: 0.3; }
.g-stone { fill: #b8b0a2; }
.g-hole { fill: #2a2622; }
.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: #c9a35f !important; }
.chip-kind-work { border-color: #9b5c3c !important; }
.chip-kind-public { border-color: #6f9584 !important; }
.chip-kind-wild { border-color: #5f7547 !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 auto; gap: 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-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, rgba(27, 33, 66, 0.72), rgba(14, 18, 38, 0.82));
  box-shadow: var(--shadow-soft);
}
/* 명부(둘째 행)는 가로 스크롤 컨테이너라 auto 행에서는 자동 최소 높이가 0이 되어, 공간이 모자라면 눌려 카드가 잘렸다.
   min-content 행은 가로 스크롤바까지 포함한 제 높이를 지키고, 남거나 모자란 공간은 심문 기록(minmax 행)이 받는다. */
.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: rgba(255, 255, 255, 0.025); color: var(--moon);
  transition: border-color .18s, background .18s, transform .18s;
}
.roster-card:hover { border-color: var(--night-line-2); background: rgba(255, 255, 255, 0.05); }
.roster-card.is-on { border-color: var(--seal); background: rgba(184, 52, 42, 0.14); 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: 800; font-size: 13.5px; line-height: 1.3; }
.roster-occ { font-size: 11px; color: var(--moon-dim); line-height: 1.2; }
.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 rgba(0, 0, 0, 0.35); }
.roster-count { font-size: 10px; min-width: 16px; padding: 0 4px; border-radius: 99px; background: rgba(235, 227, 204, 0.16); 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: rgba(184, 52, 42, 0.42); }
.roster-soft { font-size: 10px; width: 16px; height: 16px; border-radius: 50%; background: rgba(185, 141, 62, 0.4); color: #f6e3bd; line-height: 16px; text-align: center; font-weight: 800; }
.link-btn.is-ochre { color: #d9b46a; }

.dossier { padding: 0 16px 10px; }
.dossier-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.18); 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(--paper); 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; color: var(--moon-dim); }
.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: 800; color: var(--paper); margin-bottom: 6px; }
.howto { padding-left: 1.3em; display: grid; gap: 4px; color: var(--moon-dim); font-size: 14px; }
.howto strong { color: #f09a84; }

.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: #f1d9cc; 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: 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(--paper); }
.bubble-resident {
  max-width: min(92%, 620px); padding: 8px 14px; border-radius: 3px 12px 12px 12px;
  background: rgba(235, 227, 204, 0.07); border: 1px solid rgba(235, 227, 204, 0.13);
  font-family: var(--font-voice); font-size: 16px; line-height: 1.7; 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); font-weight: 700; letter-spacing: 0.1em; }
.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: tabular-nums; }
.paper .ref { color: var(--ink-3); }
.tx-a.is-broken .bubble-resident { border-color: rgba(208, 69, 50, 0.5); background: rgba(184, 52, 42, 0.12); }
.stamp-host { position: absolute; right: 6px; top: -6px; width: 90px; height: 90px; 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: rgba(6, 8, 18, 0.45); }
.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; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  border: 1px solid var(--night-line-2); background: rgba(255, 255, 255, 0.02); 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: rgba(235, 227, 204, 0.5); }
.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: rgba(208, 69, 50, 0.7); color: #f2a491; }
.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: 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(--paper); 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: #e88d78; letter-spacing: 0.1em; flex: none; }
.qb-problem { font-size: 12.5px; color: var(--ochre); 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 rgba(208, 69, 50, 0.45); background: rgba(184, 52, 42, 0.1); color: var(--moon); font-size: 13px;
}
.suggest.sev-soft { border-color: rgba(185, 141, 62, 0.5); background: rgba(185, 141, 62, 0.08); }
.suggest.is-on { background: rgba(184, 52, 42, 0.3); border-color: var(--seal-bright); }
.suggest-sev { flex: none; font-size: 11px; font-weight: 800; color: #f2a491; }
.suggest.sev-soft .suggest-sev { color: #e2bf7a; }
.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; 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: rgba(255, 255, 255, 0.02); cursor: pointer; font-size: 13px; }
.proof-opt:hover { border-color: var(--night-line-2); }
.proof-opt.is-on { border-color: var(--seal); background: rgba(184, 52, 42, 0.13); }
.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: 800; }
.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: #7fd1a6; 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: 800; 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: #77561f; }
.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.7; }

.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-display); font-weight: 800; 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: 800; 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-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: 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-display); font-size: 13px; color: var(--seal-deep); letter-spacing: 0.25em; 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: 800; font-size: 17px; margin-bottom: 8px; }
.acc-num { color: var(--seal); }
.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: -60px; top: -60px; }
.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 { background: #4a4038; }
.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.85; }
.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(--paper); }
.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: 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(--paper); }
.replay-day { font-size: 15px; color: var(--moon-dim); }
.replay-hm { font-size: 34px; font-weight: 800; font-variant-numeric: 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: 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: #f2a491; 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: rgba(255, 255, 255, 0.05); }
.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: rgba(12, 15, 30, 0.6); }
.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: rgba(235, 227, 204, 0.35); 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(--paper); }
.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: rgba(12, 15, 30, 0.9); color: var(--ochre); font-weight: 700; font-size: 13px;
}
.sheet-debug { margin: 0 auto 0 0; width: min(640px, 100vw); background: #0d1020; 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: #f2a491; 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: #9fb8e8; }
.j-meta { color: var(--mist); }
.j-string { color: #e8c98f; }
.j-number { color: #9fe0b8; }
.j-boolean, .j-null { color: #e89f9f; }
.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; }
  .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 묻는다 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: #0a0c1b; border-top: 1px solid var(--night-line);
    box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, 0.8);
  }
  .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 { right: -6%; --seal-size: 52px !important; }
  .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; }
  .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) {
  /* 두 칸 배치(화면 높이에 고정)의 마을 칸: 지도 행이 장소·시신 카드를 뺀 남는 높이까지만 차지한다(최소 160px).
     지도 칸은 그 행에 맞춰 낮아지고, SVG는 xMidYMid meet라 비율을 지킨 채 가운데로 줄어든다. 지도 비율은 마을마다
     0.78~1.42라, 세로로 긴 마을은 1440×900에서도 칸이 넘쳐 시신 카드·검안서 버튼이 잘렸다. 들어가면 지금 크기 그대로다. */
  .inv-left { grid-template-rows: auto minmax(160px, auto) auto auto; }
  .map-wrap { max-height: 100%; }
  /* 장소 칸은 고른 곳에 따라 98~158px로 달라진다. 가장 흔한 최대치(이름·주인·발견 문구·수색 버튼)를 미리 잡아,
     지도를 누를 때마다 지도 크기가 출렁이지 않게 한다. 증거 목록이 붙으면 그때만 지도가 한 번 줄어든다. */
  .loc-panel { min-height: 158px; align-content: start; }
}

@media (min-width: 961px) and (max-height: 860px) {
  /* 명부가 제 높이를 지키는 만큼 심문 기록의 최소 높이를 낮춰, 720px 화면에서도 '묻는다' 버튼이 밀려나지 않게 한다. */
  .interrogation { grid-template-rows: auto min-content auto minmax(96px, 1fr) auto; }
  /* 키가 낮은 화면(1366×768, 1024×768 …)에서는 명부를 가로형 카드로 납작하게: 초상 왼쪽, 이름·직업 오른쪽. */
  .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; }
  /* 기분 점·진술 수는 세로로 쌓아 오른쪽 여백(28px) 안에 넣는다 — 가로로 두면 이름 끝 글자를 덮는다. */
  .roster-meta { flex-direction: column-reverse; }
  .roster-card .portrait { width: 30px; height: 36px; grid-row: span 2; }
  .roster-name, .roster-occ { grid-column: 2; }
  .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; }
  .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: rgba(8, 10, 22, 0.6); }
.seg-mode-control .seg { min-height: 40px; padding: 0.4em 1.3em; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.08em; }
.field-label { font-family: var(--font-display); font-weight: 800; 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 hanji strip, ash toward 원망, warm toward 신망, a 信 seal riding on it */
.rep-meter { display: grid; gap: 6px; }
.rep-head { display: flex; align-items: baseline; gap: 8px; }
.rep-label { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.2em; color: var(--ink-3); }
.rep-num { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); }
.rep-meter.is-pos .rep-num { color: var(--seal-deep); }
.rep-meter.is-neg .rep-num { color: #3d3a4a; }
.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 { 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: #3d3a4a; }

/* 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: #4b4552; color: var(--paper); border-color: #4b4552; }
.previously h2, .ledger-title { font-size: 18px; letter-spacing: 0.15em; 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.75; }
.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.8; 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.85; }

/* ledger */
.ledger-list { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.ledger-row {
  display: grid; grid-template-columns: 54px 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: #4b4552; }
.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: 46px 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 village name (breaking only at the dot) and the 剖 seal 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;
}
/* 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 .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 */
/* 오늘의 사건: the dated card on the title, the board after a verdict (grade, marks, share, stats,
   countdown, calendar). Hanji paper on the night, the same seals 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-display); font-weight: 800; letter-spacing: 0.2em; padding: 0 0.45em; border-radius: 3px; background: var(--seal); color: var(--seal-ink); }
.daily-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 5.4vw, 32px); color: var(--ink); letter-spacing: 0.02em; }
.daily-line { font-family: var(--font-voice); font-size: 15px; line-height: 1.7; 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: 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: 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-board { display: grid; gap: 20px; padding: 22px; }
.daily-sub { font-size: 18px; letter-spacing: 0.15em; 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: 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: 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); word-break: keep-all; }
.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: 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); word-break: keep-all; }

/* 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; word-break: keep-all; }
.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: #4b4552; border-color: #4b4552; 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: #4b4552; border-color: #4b4552; }
.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; }

/* ------------------------------------------------------------------ 简体中文 (验尸)
   <html lang="zh-Hans">: the Chinese edition. No web fonts (Google Fonts is unreachable in
   mainland China, and the Korean faces have no Chinese glyphs anyway): the system's own CJK
   serif and sans. Chinese may break between any two characters, so the Korean word-keeping
   (keep-all) goes; Han characters have no italic (browsers would fake a slant), so the italic
   tells and narration stand upright. */
html[lang|="zh"] {
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-voice: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
html[lang|="zh"] body,
html[lang|="zh"] .title-privacy,
html[lang|="zh"] .friends-line,
html[lang|="zh"] .friends-note,
html[lang|="zh"] .daily-more-line { word-break: normal; line-break: strict; }
html[lang|="zh"] .narr,
html[lang|="zh"] .tells { font-style: normal; }