/* 影証言。色・寸法・字は :root のトークンだけに置く（view.js が壁の色を読むのも同じトークン）。
   app.js が作る要素の構造は、末尾の「app.js が作る要素」にまとめてある。 */
:root {
  color-scheme: dark;
  --stage: #12102a;
  --panel: #1b1840;
  --panel-clear: rgba(27, 24, 64, 0);
  --panel-2: #26215a;
  --line: #3b3573;
  --line-strong: #6a63a6;
  --wall: #efe6cf;
  --wall-edge: #cdbf9d;
  /* 身長計の数字と線。紙（--wall）に対して6.1:1（道具の縁と同じ色）。 */
  --ruler: #6b4f2a;
  --shadow: #1d1a3a;
  --prop: #e8d2a2;
  --prop-line: #6b4f2a;
  --lamp: #ffb84d;
  --lamp-soft: rgba(255, 184, 77, 0.1);
  --lamp-wash: rgba(255, 184, 77, 0.16);
  --mask-solid: #000;
  --stamp: #d6402f;
  --stamp-ink: #ff7a66;
  --stamp-paper: rgba(239, 230, 207, 0.9);
  --wrong-bg: #3a1a2e;
  --text: #f1ecff;
  --muted: #b9b2d8;
  --focus: #ffd36e;
  --focus-soft: rgba(255, 211, 110, 0.14);
  --backdrop: rgba(10, 8, 26, 0.78);
  --drop: rgba(0, 0, 0, 0.5);
  --glow: #2c2670;
  --on-lamp: #1b1840;
  --on-stamp: #ffffff;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Source Han Serif JP", serif;
  --sans: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --radius: 18px;
  --radius-s: 12px;
  --gap: 14px;
  --read: 680px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--text);
  background: radial-gradient(120% 56% at 50% -8%, var(--glow) 0%, var(--stage) 58%) no-repeat, var(--stage);
  font: 400 15px/1.75 var(--sans);
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 対応するブラウザーでは、文節の途中で折り返さない。 */
@supports (word-break: auto-phrase) { body { word-break: auto-phrase; } }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input, textarea, summary { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* 数字・単位・式の途中で折り返さない範囲（lib/text.js が決める）。 */
.nb { white-space: nowrap; }
button, input, .panel, .dialog-content { min-width: 0; }

.app {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ---- ヘッダ ---- */
.app-header { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.brand { flex: 1; min-width: 0; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--lamp); line-height: 1.6; }
.brand h1 { font: 700 22px/1.3 var(--serif); letter-spacing: 0.08em; }
.header-actions { display: flex; gap: 8px; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel);
  font-weight: 700; font-size: 16px;
}
.icon-button:hover { background: var(--panel-2); }
.share-open { font-size: 14px; }
.back-button { font-size: 14px; padding: 0 14px 0 10px; }
.back-button span { font-size: 22px; line-height: 1; margin-top: -2px; }

.notice { margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); font-size: 13px; color: var(--muted); }
.notice h2 { font-size: 15px; color: var(--text); }
.notice-error { border-color: var(--stamp); }
.notice-action { margin-top: 10px; min-height: 44px; padding: 0 18px; font-size: 14px; }

/* ---- 共通の面板・文字・ボタン ---- */
.panel { margin-top: 10px; }
.panel > h2, .stage-title { font: 700 26px/1.45 var(--serif); letter-spacing: 0.03em; text-wrap: balance; }
/* 見出しの焦点枠は残し、上の小見出しの文字に掛からない余白にする。 */
.panel > .eyebrow + h2 { margin-top: 6px; }
h2[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.lead { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.85; text-wrap: pretty; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 700; font-size: 15px; line-height: 1.3; text-align: center;
}
.button-primary { background: var(--lamp); color: var(--on-lamp); box-shadow: 0 6px 22px -8px var(--lamp); }
.button-primary:hover { filter: brightness(1.06); }
/* 押せる部品の枠は --line-strong（地に対して3:1以上）。カードの枠（--line）とは分ける。 */
.button-secondary { background: transparent; border-color: var(--line-strong); color: var(--text); }
.button-secondary:hover { background: var(--panel-2); }
/* 押されている副ボタン（「ガイドを消す」）は琥珀の枠と薄い琥珀の面。朱は取り消せない「リセットする」だけに使う。 */
.button-secondary[aria-pressed="true"] { border-color: var(--lamp); background: var(--lamp-wash); }
.button-danger { background: var(--stamp); color: var(--on-stamp); }
.button-ghost { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.button-ghost[aria-pressed="true"] { border-color: var(--line-strong); color: var(--text); }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* 小さい補助ボタン（「進行をリセット」など）。押せる高さは44px。 */
.button-small { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* ---- 事件簿（home） ---- */
.home-panel > .lead { max-width: 44em; }
.case-list { display: grid; gap: 10px; margin-top: 22px; }
.case-list > li { display: grid; }
.case-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "no state" "title state" "summary summary";
  grid-template-rows: auto auto 1fr;
  gap: 0 14px; width: 100%; height: 100%; padding: 14px 16px; text-align: left; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.case-card:hover:not([aria-disabled="true"]) { border-color: var(--line-strong); }
.case-card[aria-disabled="true"] { cursor: not-allowed; }
/* 次に開く夜：琥珀の枠と「はじめる →」。琥珀の強調はこのカードだけ。 */
.case-card.is-next { border: 2px solid var(--lamp); padding: 13px 15px; box-shadow: 0 0 0 4px var(--lamp-soft); }
.case-card.is-next:hover { border-color: var(--lamp); }
.case-card.is-solved { background: var(--panel); }
/* 鍵の夜：全体を薄くせず（文字のコントラストを保つ）、点線の枠と鍵の印で分ける。 */
.case-card[data-locked="true"] { border-style: dashed; border-color: var(--line-strong); background: var(--panel); cursor: not-allowed; }
.case-card[data-locked="true"] .case-title { color: var(--muted); }
.case-no { grid-area: no; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--lamp); }
.case-card[data-locked="true"] .case-no { color: var(--muted); }
.case-title { grid-area: title; font: 700 20px/1.45 var(--serif); }
.case-summary { grid-area: summary; font-size: 13px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.case-state { grid-area: state; align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 2px; font-size: 12px; color: var(--muted); text-align: right; max-width: 9em; }
/* 「はじめる →」：主ボタンより弱く見えないよう、高さ36px・14px。 */
.next-label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lamp); color: var(--on-lamp); font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px -8px var(--lamp); }
.lock-note { display: inline-flex; align-items: center; gap: 6px; }
.lock-icon { position: relative; display: inline-block; flex: none; width: 14px; height: 17px; }
.lock-icon::before { content: ""; position: absolute; left: 2px; top: 0; width: 6px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }
.lock-icon::after { content: ""; position: absolute; left: 0; bottom: 0; width: 14px; height: 10px; border-radius: 3px; background: currentColor; }
.star-row { display: inline-flex; align-items: center; gap: 6px; }
.stars { display: inline-flex; gap: 3px; }
/* 星：空の星も輪郭で見える（輪郭は補助の色、中は面の色）。 */
.star { position: relative; display: inline-block; width: 18px; height: 18px; background: var(--muted); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star::after { content: ""; position: absolute; inset: 2.5px; background: var(--panel); clip-path: inherit; }
.star.is-on { background: var(--lamp); }
.star.is-on::after { content: none; }
.star-count { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.total { margin-top: 18px; color: var(--muted); font-size: 14px; }
.total strong { color: var(--lamp); font: 700 20px/1 var(--serif); margin: 0 2px; }
.home-actions { margin-top: 8px; }

/* ---- 事件の概要（briefing）と証言 ---- */
/* 読む列：導入・推理は、ヘッダの左端にそろえて左寄せ（幅は絞るが、右側だけを絞る）。結末・エピローグは中央の構図。 */
.briefing-panel, .deduction-panel { max-width: var(--read); }
.verdict-panel, .epilogue-panel { max-width: var(--read); margin-left: auto; margin-right: auto; }
.witness-card { display: grid; gap: 12px; margin: 18px 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.sketch { display: block; width: 168px; height: 126px; flex: none; border-radius: 6px; background: var(--wall); }
/* 1列のときは、スケッチを中央に置く（左に寄って右が空かないように）。 */
.witness-card .sketch { width: min(100%, 220px); height: auto; aspect-ratio: 4 / 3; justify-self: center; }
.witness-who { font-size: 13px; color: var(--muted); }
.witness-who strong { font: 700 17px var(--serif); color: var(--text); margin-right: 6px; }
blockquote { margin-top: 6px; padding-left: 12px; border-left: 3px solid var(--lamp); font: 500 16px/1.85 var(--serif); text-wrap: pretty; }

/* ---- 再現室（stage） ---- */
.panel > .stage-title { font-size: 20px; margin: 2px 0 10px; }
.stage-layout { display: grid; gap: 16px; }
.stage-main { display: grid; gap: 10px; min-width: 0; }
/* 証言ストリップ：閉じた状態は引用を2行まで（幅720px以上は5行まで）。「全文を読む」で全文とスケッチを大きく。 */
.witness-strip { --sketch-w: 112px; --sketch-open: 152px; display: grid; grid-template-columns: var(--sketch-w) minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); }
.witness-strip[data-open="true"] { --sketch-w: var(--sketch-open); }
.witness-strip .sketch { width: var(--sketch-w); height: auto; aspect-ratio: 4 / 3; }
.witness-text { min-width: 0; }
.witness-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; }
.witness-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--lamp); }
/* 「全文を読む」：見た目は高さ36pxの枠付きピル、押せる高さは44px（上下へ4pxずつはみ出させて、見出しの行は36pxに保つ）。 */
.strip-toggle { display: inline-flex; align-items: center; min-height: 44px; margin: -4px -2px -4px 0; padding: 0 2px; border: 0; background: none; color: var(--lamp); font-size: 13px; font-weight: 700; white-space: nowrap; }
.strip-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel-2); }
.strip-toggle:hover .strip-pill { border-color: var(--lamp); }
.strip-toggle-mark { font-size: 12px; }
.witness-quote { font: 500 13px/1.65 var(--serif); color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.witness-strip[data-open="true"] .witness-quote { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; text-wrap: pretty; }
.wall-frame { position: relative; width: 100%; aspect-ratio: 260 / 180; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--stage); }
.wall { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.wall:active { cursor: grabbing; }
.wall-static { cursor: default; }
.wall:focus-visible { outline-offset: -3px; }
/* 状態：1行目に読み出し、2行目に近さの文とメーター。どちらの行も高さを固定し、文が替わっても下の操作を動かさない。 */
.status-row { display: grid; gap: 2px; }
.readouts { display: flex; align-items: baseline; gap: 16px; min-height: 30px; white-space: nowrap; }
.readout { font-size: 14px; color: var(--muted); }
.readout strong { font: 700 24px/1 var(--serif); color: var(--lamp); font-variant-numeric: tabular-nums; margin: 0 2px; }
.readout-item strong { color: var(--focus); }
.band-row { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.band-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-detail { font-size: 12px; font-weight: 600; color: var(--muted); }
/* 近さのメーター：4つの目盛りを、--fill（0〜1。app.js が入れる）の分だけ左から満たす。 */
.meter { --tick: 18px; display: inline-flex; flex: none; gap: 4px; }
.meter i { position: relative; display: block; width: var(--tick); height: 8px; overflow: hidden; border-radius: 4px; background: var(--line); box-shadow: inset 0 0 0 1px var(--line-strong); }
.meter i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lamp); transform: scaleX(var(--fill, 0)); transform-origin: left center; transition: transform 0.16s ease-out; }
.meter[data-band="match"] { filter: drop-shadow(0 0 6px var(--lamp)); }
/* 注記：最初はその夜の一言（coach）、ヒントを押したらヒントの文（hint）、矢印キーの案内（notice）。
   種類が変わっても高さを変えない（2行分で固定）。文は内側の span にまとめ、欄の縦の中央に置く。 */
.note-text { --note-lines: 2; display: grid; align-content: center; min-height: calc(var(--note-lines) * 1.65em + 16px); padding: 8px 12px; border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: transparent; font-size: 14px; font-weight: 600; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.note-text[data-kind="hint"] { border-left-color: var(--lamp); background: var(--panel); }
.note-text[data-kind="notice"] { border-left-color: var(--focus); background: var(--panel); }
.note-tag { color: var(--lamp); font-weight: 700; white-space: nowrap; }
.controls { display: grid; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 選んだチップは輪と✓。✓で幅が少し変わるが、段数は変わらない（狭い画面は1段の横スクロール）。 */
.chip { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); font-weight: 700; font-size: 14px; }
.chip[aria-checked="true"] { border-color: var(--focus); background: var(--focus-soft); }
.chip[aria-checked="true"]::before { content: "✓ "; color: var(--focus); }
.nudges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nudge { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel-2); font-weight: 700; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.nudge:active { background: var(--line); }
.nudge-icon { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; }
.nudge-up { border-bottom: 13px solid var(--lamp); }
.nudge-down { border-top: 13px solid var(--lamp); }
.nudge-left { border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 0; border-right: 13px solid var(--lamp); }
.nudge-right { border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 0; border-left: 13px solid var(--lamp); }
.assist-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assist-row .button { gap: 0; min-height: 44px; padding: 0 12px; font-size: 14px; }
/* 星の代償「（★−1）」は文言より少し小さい字。文言は app.js が入れた区切り（<wbr>）の所でだけ、代償は折り返さない。 */
.assist-row .label { word-break: keep-all; }
.cost { white-space: nowrap; font-size: 0.86em; }
/* 「考え方を見る」の答え。見える所まで送るとき、画面の下端に貼りつかないよう16px残す。 */
.hint-text { padding: 12px 14px; border-left: 3px solid var(--lamp); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--panel); font-size: 14px; line-height: 1.8; text-wrap: pretty; scroll-margin-bottom: 16px; }
.clues { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); }
/* 開閉の印：閉じているとき ▸、開いているとき ▾。 */
.clues summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.clues summary::-webkit-details-marker { display: none; }
.clues summary::before { content: "▸"; color: var(--lamp); font-size: 12px; }
.clues[open] summary::before { content: "▾"; }
/* 手がかりカードの間隔は、推理画面（.clue-list）と同じ8px。枠線を重ねない。 */
.clue-body { display: grid; gap: 8px; padding: 0 12px 12px; }

.stamp {
  position: absolute; right: 5%; bottom: 8%; rotate: -9deg;
  padding: 0.05em 0.45em; border: 4px double var(--stamp); border-radius: 12px;
  background: var(--stamp-paper); color: var(--stamp);
  font: 700 clamp(26px, 8vw, 46px)/1.15 var(--serif); letter-spacing: 0.1em; pointer-events: none;
  animation: stamp-in 0.38s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
/* 結末とエピローグの判子。大きく始めると横へはみ出すので、始めの倍率を抑え、入れ物で横を切る。
   判子は傾いていて、外形が上下に約10〜18pxはみ出す。その分も足して、ヘッダと下の見出しから12px以上離す。 */
.stamp-holder { overflow-x: clip; padding: 24px 0 32px; }
.stamp-static { position: static; display: inline-block; font-size: 40px; animation-name: stamp-in-static; }
@keyframes stamp-in { from { scale: 1.9; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes stamp-in-static { from { scale: 1.35; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---- 現場図（solved） ---- */
/* 幅900px未満は1列。壁と現場図を同じ640pxの列に、ヘッダの左端にそろえて置く。 */
.solved-panel { max-width: 640px; }
.solved-panel .result-frame { margin-top: 14px; }
.solved-panel .side-view { display: block; width: 100%; aspect-ratio: 520 / 322; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); }
.reading { margin: 12px 0 18px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--panel-2); font: 700 16px/1.8 var(--serif); text-wrap: pretty; }

/* ---- 推理（deduction） ---- */
.clue-list { display: grid; gap: 8px; margin: 14px 0; }
.clue { display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; align-items: start; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); font-size: 14px; line-height: 1.7; }
.clue-kind { justify-self: start; padding: 0 10px; border-radius: 999px; background: var(--panel-2); color: var(--lamp); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; margin-top: 3px; line-height: 1.9; }
.clue-text { text-wrap: pretty; }
.clue[data-kind="result"] { border-color: var(--lamp); }
.suspect-list { display: grid; gap: 12px; margin: 18px 0; }
.suspect { display: grid; grid-template-areas: "head" "statement" "actions" "message"; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.suspect-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.suspect-name { font: 700 20px/1.4 var(--serif); }
.suspect-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.suspect-badge { padding: 0 10px; border: 2px solid var(--stamp); border-radius: 6px; color: var(--stamp-ink); font: 700 13px/1.7 var(--serif); letter-spacing: 0.1em; rotate: -4deg; }
.suspect-statement { grid-area: statement; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.suspect-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.suspect-actions .button { min-height: 44px; padding: 0 18px; font-size: 14px; }
/* 外した人：全体を薄くせず（肩書き・証言のコントラストを保つ）、名前の取り消し線と点線の枠で分ける。判定には使わない。 */
.suspect.is-excluded { border-style: dashed; border-color: var(--line-strong); background: var(--panel); }
.suspect.is-excluded .suspect-name { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
/* 外した人の「この人だ」は、押せるまま（判定には使わない）見た目だけ控えめに：琥珀の塗りをやめ、枠だけのボタンに。 */
.suspect.is-excluded .accuse { background: transparent; border-color: var(--line-strong); color: var(--text); box-shadow: none; }
.suspect.is-wrong { border-color: var(--stamp); }
.message { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--stamp); border-radius: var(--radius-s); background: var(--wrong-bg); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.suspect .message { grid-area: message; margin: 6px 0 0; }

/* ---- 結末（verdict）とエピローグ：判子・見出し・本文・星・ボタンを中央でそろえる ---- */
.verdict-panel, .epilogue-panel { text-align: center; padding-top: 8px; }
.verdict-panel .lead, .epilogue-panel .lead { max-width: 34em; margin-left: auto; margin-right: auto; text-wrap: balance; }
/* 結末は短いので、画面の縦の中ほどに置く（下半分だけが空かないように）。 */
.verdict-panel { display: grid; align-content: center; min-height: calc(100svh - 150px); }
.verdict-stars { margin: 16px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.verdict-stars .star { width: 30px; height: 30px; }
.verdict-stars .star::after { inset: 3.5px; }
.epilogue-panel .verdict-stars { font: 700 18px/1.5 var(--serif); color: var(--text); }
.recap { display: grid; gap: 8px; margin: 26px auto 4px; max-width: 34em; text-align: left; }
.recap li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "no stars" "title stars" "culprit stars"; gap: 0 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); }
.recap-no { grid-area: no; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--lamp); }
.recap-title { grid-area: title; font: 700 17px/1.5 var(--serif); }
.recap-culprit { grid-area: culprit; font-size: 13px; color: var(--muted); }
.recap .star-row { grid-area: stars; }
.verdict-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ---- dialog ---- */
dialog { width: min(480px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--text); box-shadow: 0 20px 80px var(--drop); }
dialog::backdrop { background: var(--backdrop); }
/* 下の余白はぼかしの帯で取る。中身が長くてスクロールするときだけ、帯が下端に貼りついて「続きがある」と分かる。 */
.dialog-content { --dialog-pad: 24px; padding: var(--dialog-pad) var(--dialog-pad) 0; }
.dialog-content::after { content: ""; position: sticky; bottom: 0; display: block; height: var(--dialog-pad); margin: 0 calc(-1 * var(--dialog-pad)); background: linear-gradient(to bottom, var(--panel-clear), var(--panel)); pointer-events: none; }
/* 中身が画面に入らずスクロールできるときだけ、下端に「↓ 続きがあります」（app.js が出し入れする。高さは取らない）。 */
.more-hint { position: sticky; bottom: 10px; z-index: 1; width: max-content; height: 28px; margin: -28px auto 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 12px; font-weight: 700; line-height: 26px; pointer-events: none; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dialog-header h2 { font: 700 21px/1.5 var(--serif); margin-top: 4px; text-wrap: balance; }
.close-button { flex: none; min-width: 44px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: transparent; font-size: 20px; line-height: 1; }
.dialog-lead { margin: 16px 0 10px; font-size: 15px; font-weight: 700; line-height: 1.8; }
.dialog-note { margin-top: 10px; font-size: 13px; line-height: 1.85; color: var(--muted); }
.help-rules { display: grid; gap: 12px; margin-top: 16px; counter-reset: step; }
.help-rules li { display: grid; gap: 2px; padding-left: 38px; position: relative; counter-increment: step; }
.help-rules li::before { content: counter(step); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lamp); color: var(--on-lamp); font: 700 14px/1 var(--sans); }
.help-rules strong { font: 700 16px/1.6 var(--serif); }
.help-rules span { font-size: 13px; color: var(--muted); line-height: 1.8; }
.help-rules span .nb { color: inherit; font-size: inherit; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#share { min-width: 0; max-width: 100%; }
#share .share { min-width: 0; border-top-color: var(--line); }
/* 共有のボタン（shared/share.css は共通部品なので触らず、ここで上書き）：他の副ボタンと同じ枠色・太さ・角丸。 */
#share .share__button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: transparent; color: var(--text); font-size: 14px; font-weight: 700; }
#share .share__button:hover { background: var(--panel-2); }
#share .share__button--primary { background: var(--panel-2); }
#share .share__button[data-done="true"] { border-color: var(--lamp); }
/* Instagram・YouTube の注記は、説明文と同じ補助の灰。 */
#share .share__note, #share .share__said { color: var(--muted); opacity: 1; }
.manual-copy { margin-top: 16px; font-size: 12px; }
.manual-copy label { display: block; font-weight: 700; margin-bottom: 4px; }
/* URL は折り返して全部見せる（狭い画面で末尾が切れない）。値と readonly はそのまま。 */
.manual-copy textarea { display: block; width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--stage); font: 500 13px/1.5 var(--sans); resize: none; overflow: hidden; word-break: break-all; }
.manual-copy p { margin-top: 6px; color: var(--muted); line-height: 1.8; }

/* ---- 幅に応じた配置 ---- */
@media (max-width: 479px) {
  /* 手がかりカード：種類の札を本文の上に置き、本文をカード幅いっぱいに使う（行がでこぼこにならない）。 */
  .clue { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 10px; }
  .clue-kind { margin-top: 0; }
  /* 再現室の手がかりは、開閉の枠の内側で幅が狭い。字を13pxにして、文節で早めに折り返さず行を詰めて組む
     （幅360で、いちばん長い「足跡」の文も3行に収まる）。推理画面のカードは14pxのまま。 */
  .clue-body { padding: 0 8px 8px; }
  .clue-body .clue { font-size: 13px; }
  .clue-body .clue-text { word-break: normal; }
}
@media (max-width: 519px) {
  /* 狭い画面の共有ボタンは2列に並べる（1つだけ2段目に残らない）。数が奇数なら最後を横いっぱいに。 */
  #share .share__row { display: grid; grid-template-columns: 1fr 1fr; }
  #share .share__button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dialog-content { --dialog-pad: 20px; }
}
@media (min-width: 520px) {
  .manual-copy textarea { height: 44px; padding-block: 11px; }
}
@media (max-width: 899px) {
  /* 道具のチップは1段の横スクロール（段が増えない）。続きがある側の端をぼかし、焦点の枠は内側に描く（切れない）。 */
  .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip:focus-visible { outline-offset: -4px; }
  .chips[data-more="right"] { mask-image: linear-gradient(to right, var(--mask-solid) calc(100% - 36px), transparent); }
  .chips[data-more="left"] { mask-image: linear-gradient(to left, var(--mask-solid) calc(100% - 36px), transparent); }
  .chips[data-more="left right"] { mask-image: linear-gradient(to right, transparent, var(--mask-solid) 36px, var(--mask-solid) calc(100% - 36px), transparent); }
}
@media (min-width: 560px) {
  /* 列の幅を固定する（auto の列に割合の幅のスケッチを入れると、列が0幅に潰れる）。 */
  .witness-card { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px; }
  .witness-card .sketch { width: 100%; justify-self: stretch; }
  .case-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .app { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .panel > h2 { font-size: 32px; }
  .panel > .stage-title { font-size: 24px; }
  .witness-strip { --sketch-w: 132px; --sketch-open: 168px; }
  .witness-quote { font-size: 14px; -webkit-line-clamp: 5; line-clamp: 5; }
  /* 鍵の文言を1行に（幅が十分にある）。 */
  .case-state { max-width: none; }
  /* 容疑者のカード：左に名前・肩書き・証言、右にボタン。1行が長くなりすぎない。 */
  .suspect { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head actions" "statement actions" "message message"; column-gap: 18px; align-items: center; }
  .suspect-actions { flex-direction: column; align-items: stretch; margin-top: 0; width: 11.5em; }
}
@media (min-width: 900px) {
  /* 壁を左、状態・注記・操作・手がかりを右へ並べ、1画面に収める。 */
  .stage-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "strip status" "wall note" "wall controls" "wall assist" "wall clues";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    gap: 12px 24px;
  }
  .stage-main, .stage-side { display: contents; }
  .witness-strip { grid-area: strip; }
  .wall-frame { grid-area: wall; align-self: start; }
  .status-row { grid-area: status; align-self: center; }
  .note-text { grid-area: note; --note-lines: 3; }
  .controls { grid-area: controls; }
  /* 右の列（340px）でも「ヒント／ガイド／はじめから」を1段に（文言が替わっても段が変わらない）。 */
  .assist-row { grid-area: assist; gap: 6px; }
  .stage-main .assist-row .button { padding: 0 9px; }
  .clues { grid-area: clues; }
  .clues[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
  .meter { --tick: 17px; }
  /* 現場図：左に再現した壁、右に現場図・説明・読み・「推理する」。見出しと「推理する」が同じ画面に入る。 */
  .solved-panel {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
    grid-template-areas: "eyebrow eyebrow" "title title" "wall side" "wall reveal" "wall reading" "wall cta" "wall .";
    grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 28px; align-items: start;
  }
  .solved-panel > .eyebrow { grid-area: eyebrow; }
  .solved-panel > h2 { grid-area: title; }
  .solved-panel .result-frame { grid-area: wall; }
  .solved-panel .side-view { grid-area: side; margin-top: 14px; }
  .solved-panel #reveal-text { grid-area: reveal; }
  .solved-panel .reading { grid-area: reading; }
  .solved-panel #to-deduction { grid-area: cta; justify-self: start; }
}
/* 幅の狭いスマホで、高さも低いとき：題を（読み上げには残して）見た目から隠し、縦を詰める。 */
@media (max-width: 719px) and (max-height: 760px) {
  .app { padding-top: max(6px, env(safe-area-inset-top)); }
  .app-header { min-height: 44px; }
  .stage-panel { margin-top: 4px; }
  .panel > .stage-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .stage-main { gap: 8px; }
  .witness-strip { --sketch-w: 96px; padding: 6px 8px 6px 6px; }
  .readouts { min-height: 28px; }
  .band-row { min-height: 22px; }
  .note-text { padding: 6px 10px; line-height: 1.6; min-height: calc(var(--note-lines) * 1.6em + 12px); }
  .controls { gap: 8px; }
  .nudge { min-height: 52px; }
  .briefing-panel .lead { margin-top: 8px; line-height: 1.75; }
  .witness-card { margin: 12px 0 14px; padding: 12px; gap: 10px; }
  .witness-card .sketch { width: min(100%, 176px); }
  blockquote { font-size: 15px; line-height: 1.75; }
}
/* さらに低い画面（高さ700px以下）：証言ストリップを小さく（スケッチ72×54、引用は「全文を読む」で開く）、
   「下げる／上げる」を44pxに。壁・注記・チップ・下げる／上げる・ヒントの行までを最初の画面に入れる。 */
@media (max-width: 719px) and (max-height: 700px) {
  .witness-strip { --sketch-w: 72px; align-items: center; }
  .witness-strip[data-open="false"] .witness-quote { display: none; }
  .nudge { min-height: 44px; }
  /* 遊び方：最後の段落まで1画面に入るよう、余白と行間を詰める。 */
  .dialog-content { --dialog-pad: 16px; }
  .dialog-header h2 { font-size: 19px; }
  .help-rules { gap: 8px; margin-top: 10px; }
  .help-rules strong { font-size: 15px; line-height: 1.5; }
  .help-rules span { line-height: 1.6; }
  .dialog-note { margin-top: 8px; line-height: 1.6; }
}
/* 高さの低い横向き：壁を左いっぱいに、スケッチと操作を右へ。縦の操作がはみ出さない。
   上の「狭くて低い」画面の規則とも重なるので、そのあとに置いて、こちらを優先する。 */
@media (orientation: landscape) and (max-height: 560px) {
  .app { padding-top: 6px; padding-bottom: 12px; }
  .app-header { min-height: 44px; }
  .brand h1 { font-size: 18px; }
  .panel { margin-top: 4px; }
  .panel > .stage-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .stage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    grid-template-areas: "wall strip" "wall status" "wall note" "wall controls" "wall assist";
    grid-template-rows: auto auto auto auto 1fr;
    gap: 6px 14px;
    align-items: start;
  }
  .stage-main { display: contents; }
  .stage-side { display: none; }
  .witness-strip { grid-area: strip; --sketch-w: 84px; --sketch-open: 84px; padding: 6px; grid-template-columns: var(--sketch-w); }
  .witness-text { display: none; }
  .wall-frame { grid-area: wall; width: min(100%, calc((100svh - 64px) * 260 / 180)); }
  .status-row { grid-area: status; }
  .note-text { grid-area: note; --note-lines: 2; padding: 4px 10px; font-size: 13px; line-height: 1.5; min-height: calc(2 * 1.5em + 8px); }
  .controls { grid-area: controls; gap: 6px; }
  /* 右の列は狭い（260px〜）。3つのボタンをいつも1段に並べ、入らなければボタンの中で2行にする
     （代償「（★−1）」を次の行へ、文言は区切りの所で）。文言が替わっても段数は変わらない。 */
  .assist-row { grid-area: assist; gap: 6px; flex-wrap: nowrap; }
  .assist-row .button { flex: 1 1 auto; flex-wrap: wrap; align-content: center; min-width: min-content; padding: 0 8px; font-size: 13px; word-break: keep-all; }
  .nudge { min-height: 48px; }
  .readout strong { font-size: 20px; }
}
@media (max-width: 420px) {
  /* 「ヒント／ガイド／はじめから」を1段に（幅360・390）。代償の「（★−1）」は少し小さい字に。 */
  .assist-row { gap: 6px; }
  .assist-row .button { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 380px) {
  .panel > h2 { font-size: 23px; }
  .witness-strip { --sketch-open: 140px; }
  .meter { --tick: 15px; gap: 3px; }
  /* 幅360でも、その夜の一言が2行に収まる大きさ。 */
  .note-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- app.js が作る要素 ----
   #case-list > li > button.case-card[data-case-id][data-locked](.is-next/.is-solved)
     > span.case-no（第1夜） span.case-title span.case-summary
       span.case-state > span.next-label（はじめる →） | span.star-row（span.stars[role=img] > i.star(.is-on) ×3 ＋ span.star-count「2/3」）
                       | span.lock-note > i.lock-icon + 文 | 文（未解決）
   #item-select > button.chip[role=radio][aria-checked][data-item]
   #nudge-minus / #nudge-plus 内の .nudge-icon は .nudge-down/.nudge-up（灯り）か .nudge-left/.nudge-right（道具）。.nudge-label に文
   #item-readout > 名前 横 <strong>数</strong>cm
   #band-text > 近さの言葉 ＋ span.band-detail（理由）／ #meter > i ×4（style の --fill）
   #note-text[data-kind=coach|hint|notice] > span.note-body > （番号付きのヒントのとき）strong.note-tag「ヒントN：」＋ 文
   #hint / #guide-toggle > 文言 ＋ span.cost「（★−1）」（代償があるときだけ）
   dialog .more-hint（中身がスクロールできるときだけ hidden を外す）
   #stage-clues / #deduction-clues > li.clue[data-kind] > span.clue-kind + span.clue-text
   #suspect-list > li.suspect[data-suspect-id](.is-excluded/.is-wrong)
     > div.suspect-head > h3.suspect-name + p.suspect-meta + span.suspect-badge[hidden]
       p.suspect-statement
       div.suspect-actions > button.button.button-ghost.exclude[aria-pressed] + button.button.button-primary.accuse
   #verdict-stars > span.stars（.star の並び）＋ span.stars-reason（「星Nつ（」＋ 理由ごとの span.nb を「・」でつなぐ ＋「）」）
   #epilogue-stars > 合計の文
   数字を含む文は、span.nb（折り返さない範囲）を含む。 */