/* Case File overhaul (2026-10-11): the Case File sheet, the revelation card, ask-chips, the clue toast,
   the roster's case banner + secret slots, the accusation's "your case" list, The Choice, and the
   ending's fates + rank. Tokens come from styles.css :root.
   Dossier skin (2026-10-12): the Case File is a manila folder of typed paper, the revelation card is a
   typed report, the suggested questions are typed cards. Wax red (--seal) only where it MEANS
   something: solved, confessed, wrong, Nestor's signature. */

/* --- shared badge ---------------------------------------------------------------------------------- */
.cf-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brass); color: #1a1306; font: 700 10.5px/1 var(--font-body); letter-spacing: 0; margin-left: 4px; }
.cf-badge[hidden] { display: none; }

/* --- the Case File sheet: a manila folder on a dark desk ---------------------------------------------- */
.cf-scrim { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.72); }
.cf-scrim[hidden] { display: none; }
.cf-sheet { position: relative; width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(120% 60% at 50% -10%, #3a2f1c 0%, #17130d 55%, #0e0c09 100%) #0e0c09;
  border-top: 1px solid #5c4a2a; border-radius: 14px 14px 0 0; padding: 16px 16px 28px; box-shadow: 0 -18px 50px rgba(0,0,0,0.7); scrollbar-width: thin; scrollbar-color: var(--brass-dim) transparent; }
@media (min-width: 600px) { .cf-scrim { align-items: center; } .cf-sheet { border-radius: 14px; border: 1px solid #5c4a2a; } }
.cf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cf-kicker { margin: 0; font: 700 11px/1.4 var(--font-type); letter-spacing: 0.12em; color: var(--brass); }
.cf-act { margin: 4px 0 0; font: 600 20px/1.15 var(--font-oswald); letter-spacing: 0.04em; color: var(--ink); }
.cf-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #5c4a2a; border-radius: 22px; background: rgba(0,0,0,0.35); color: var(--ink-soft); font-size: 22px; cursor: pointer; }
.cf-close:hover { border-color: var(--brass); color: var(--ink); }
/* Act seals: a solved act is sealed in wax (the one place red marks progress), the current one is
   ringed in brass, a locked one is a dashed outline. */
.cf-acts { list-style: none; display: flex; gap: 10px; padding: 0; margin: 12px 0 8px; }
.cf-actdot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed #6d6150; color: #a89a80; font: italic 600 14px/1 var(--font-display); }
.cf-actdot.done { border: none; background: radial-gradient(circle at 35% 30%, var(--seal-hi) 0%, var(--seal) 55%, var(--seal-lo) 100%); box-shadow: 0 0 0 2px #6e1410, 0 2px 6px rgba(0,0,0,0.6); color: #ffd6c4; }
.cf-actdot.current { border: 2px solid var(--brass); color: var(--brass); font-style: normal; font-family: var(--font-type); font-weight: 700; }
.cf-objective { margin: 4px 0 10px; font: italic 400 15px/1.5 var(--font-read); color: var(--ink); }
.cf-lab { margin: 0 0 10px; padding: 8px 10px; border: 1px dashed var(--brass-dim); border-radius: 4px; font: 400 12.5px/1.45 var(--font-type); color: var(--ink-soft); }
/* Folder tabs: the selected tab is the same manila as the folder body, so it reads as one object. */
.cf-tabs { display: flex; align-items: flex-end; gap: 6px; margin: 12px 0 0; }
.cf-tabs button { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 6px; border: none; border-radius: 7px 7px 0 0; background: var(--manila-tab); color: #2a241a; font: 700 12.5px/1 var(--font-type); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cf-tabs button[aria-selected="true"] { height: 46px; background: var(--manila); color: var(--type-ink); box-shadow: 0 -3px 10px rgba(0,0,0,0.35); }
.cf-tabs button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cf-panel { padding: 14px 12px 16px; background: var(--manila); border-radius: 0 0 8px 8px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); color: var(--type-ink); }
.cf-panel[hidden] { display: none; }
.cf-sub { margin: 18px 0 8px; font: 600 12px/1 var(--font-oswald); letter-spacing: 0.16em; text-transform: uppercase; color: var(--type-soft); }
.cf-panel > .cf-sub:first-child { margin-top: 2px; }
.cf-note { margin: 14px 0 0; font: italic 400 14px/1.5 var(--font-read); color: var(--type-soft); }

/* questions: typed sheets clipped into the folder */
.cf-q { position: relative; margin: 0 0 14px; padding: 16px 14px 14px; border: none; border-radius: 2px; background: var(--paper); color: var(--type-ink); box-shadow: 0 2px 0 #c9b68c, 0 6px 14px rgba(60,40,10,0.25); }
.cf-q.solved { background: #ebe1ca; }
.cf-q.locked { background: transparent; border: 1.5px dashed rgba(74,61,37,0.55); box-shadow: none; }
.cf-q-num { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 12px/1.3 var(--font-type); letter-spacing: 0.1em; color: var(--type-mute); }
.cf-q.locked .cf-q-num { color: var(--type-soft); }
/* SOLVED is a wax-red ink stamp, struck at an angle. */
.cf-q-stamp { margin-left: auto; padding: 3px 8px; border: 2px solid var(--seal); color: var(--seal); border-radius: 2px; font: 700 11px/1 var(--font-type); letter-spacing: 0.18em; transform: rotate(-6deg); }
.cf-q-locked { margin: 0; font: 400 14px/1.45 var(--font-type); color: var(--type-soft); }
.cf-q-sentence { margin: 0; font: 400 17px/2.1 var(--font-type); color: var(--type-ink); overflow-wrap: anywhere; }
/* An empty blank is a dashed "fill me" line; a filled one is a slip of paper taped into the sentence. */
.cf-blank { display: inline-flex; align-items: center; min-height: 34px; margin: 0 2px; padding: 0 10px; border: none; border-bottom: 2px dashed #8a6f3a; border-radius: 2px; background: rgba(205,163,73,0.2); color: #6e5424; font: italic 400 16px/1.2 var(--font-type); cursor: pointer; vertical-align: baseline; }
.cf-blank::before { content: "▾"; font-style: normal; font-size: 10px; margin-right: 6px; opacity: 0.8; }
.cf-blank.filled { position: relative; border-bottom: none; background: var(--slip); color: var(--type-ink); font-style: normal; font-weight: 700; box-shadow: 0 1px 3px rgba(60,40,10,0.35); transform: rotate(-1.1deg); }
.cf-blank.filled:nth-of-type(even) { transform: rotate(0.9deg); }
.cf-blank.filled::before { content: none; }
.cf-blank.filled::after { content: ""; position: absolute; left: 34%; top: -4px; width: 26px; height: 8px; background: rgba(230,214,160,0.75); pointer-events: none; }
/* Focus on paper is drawn in ink: brass on paper is under 2:1. */
.cf-blank:hover { outline: 2px solid var(--brass); outline-offset: 2px; }
.cf-blank:focus-visible { outline: 2px solid var(--type-ink); outline-offset: 2px; }
.cf-hint:focus-visible, .cf-q .cf-check:focus-visible, .cf-reread:focus-visible, .cf-picker-cancel:focus-visible { outline: 2px solid var(--type-ink); outline-offset: 2px; }
.cf-answer { display: inline; padding: 1px 6px; background: var(--slip); color: var(--type-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(60,40,10,0.3); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cf-q-msg { min-height: 0; margin: 10px 0 0; font: 700 14px/1.45 var(--font-type); color: var(--seal); }
.cf-q-msg:empty { display: none; }
/* "A piece is missing": Nestor talking, not a red mark (no try was charged). */
.cf-q-msg.is-missing { color: var(--type-ink); font-weight: 400; font-style: italic; }
/* Nestor's nudges arrive as his paper note, clipped to the sheet, signed in red. */
.cf-q-hints { position: relative; margin: 16px 0 0 6%; padding: 14px 14px 12px 16px; border: none; background: var(--note); box-shadow: 0 4px 10px rgba(60,40,10,0.3); transform: rotate(0.8deg); }
.cf-q-hints::before { content: ""; position: absolute; top: -10px; left: 18px; width: 12px; height: 28px; border: 2px solid #8d8d8d; border-radius: 6px; }
.cf-hint-line { margin: 0 0 8px; font: 500 20px/1.2 var(--font-hand); color: var(--note-ink); }
.cf-hint-line:last-of-type { margin-bottom: 0; }
.cf-hint-line:last-of-type::after { content: " N."; content: " N." / ""; font-weight: 600; color: var(--seal); }
.cf-go { margin-top: 10px; min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--type-soft); border-radius: 3px; background: transparent; color: var(--type-ink); font: 700 13px/1 var(--font-type); letter-spacing: 0.04em; cursor: pointer; }
.cf-go:focus-visible { outline: 2px solid var(--type-ink); outline-offset: 2px; }
.cf-q-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.cf-hint { flex: 1 1 0; min-height: 46px; padding: 0 10px; border: 1.5px solid #8a6f3a; border-radius: 3px; background: transparent; color: var(--type-soft); font: 700 13px/1.15 var(--font-type); cursor: pointer; }
.cf-hint:hover:not(:disabled) { border-color: var(--type-ink); color: var(--type-ink); }
.cf-hint:disabled { opacity: 0.5; cursor: default; }
.cf-q .cf-check { flex: 1 1 0; min-width: 110px; min-height: 46px; padding: 0 14px; border: 2px solid var(--type-ink); border-radius: 3px; background: var(--type-ink); color: var(--paper); font: 600 15px/1 var(--font-oswald); letter-spacing: 0.16em; text-transform: uppercase; }
.cf-q .cf-check:disabled { opacity: 0.35; }
.cf-q-tries { margin: 10px 0 0; font: 400 12px/1 var(--font-type); color: var(--type-mute); }
.cf-reread { margin-top: 10px; padding: 0; border: none; background: none; color: var(--type-soft); font: italic 400 14px/1.4 var(--font-read); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@keyframes cf-shake { 0%,100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
html:not([data-reduce="1"]) .cf-q.cf-shake { animation: cf-shake 0.42s ease-out; }

/* picker: the clue slips, laid out on the folder */
.cf-picker { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.55); }
.cf-picker[hidden] { display: none; }
.cf-picker-sheet { width: 100%; max-width: 560px; max-height: 70dvh; overflow-y: auto; padding: 16px; background: var(--manila); border-radius: 12px 12px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.cf-picker-title { margin: 0 0 10px; font: 600 15px/1.2 var(--font-oswald); letter-spacing: 0.08em; color: var(--type-ink); text-transform: uppercase; }
.cf-picker-list { display: flex; flex-direction: column; gap: 8px; }
.cf-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; width: 100%; min-height: 52px; padding: 9px 12px; border: none; border-radius: 1px; background: var(--slip); color: var(--type-ink); text-align: left; cursor: pointer; box-shadow: 0 2px 4px rgba(60,40,10,0.3); }
.cf-option:hover, .cf-option:focus-visible { outline: 2px solid var(--type-ink); outline-offset: 1px; }
.cf-option.chosen { box-shadow: 0 0 0 2px var(--type-ink), 0 2px 4px rgba(60,40,10,0.3); }
.cf-option-label { font: 700 15px/1.25 var(--font-type); }
.cf-picker-cancel { width: 100%; min-height: 46px; margin-top: 10px; border: 1.5px solid #8a6f3a; border-radius: 3px; background: transparent; color: var(--type-soft); font: 700 13px/1 var(--font-type); cursor: pointer; }

/* confessions + contradictions: a confession is wax red, a contradiction is cool ink */
.cf-noteline { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--seal); background: var(--paper); border-radius: 0 2px 2px 0; box-shadow: 0 2px 4px rgba(60,40,10,0.2); }
.cf-noteline.conflict { border-left-color: #4f6b86; }
.cf-noteline-k { margin: 0 0 4px; font: 700 11px/1.2 var(--font-type); letter-spacing: 0.12em; color: var(--type-mute); }
.cf-noteline.crack .cf-noteline-k { color: var(--seal); }
.cf-noteline-t { margin: 0; font: 400 15px/1.5 var(--font-read); color: var(--type-ink); }

/* clues: torn slips. The tear is a clip-path, varied by position so no two edges match. */
.cf-clues { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cf-clue { position: relative; padding: 10px 10px 11px; border: none; border-radius: 0; background: var(--slip);
  clip-path: polygon(0 4%, 6% 0, 14% 5%, 25% 0, 38% 4%, 52% 0, 66% 5%, 80% 0, 92% 4%, 100% 0, 100% 96%, 90% 100%, 76% 95%, 60% 100%, 45% 96%, 30% 100%, 16% 95%, 0 100%); }
.cf-clue:nth-child(3n+2) { clip-path: polygon(0 0, 10% 4%, 22% 0, 36% 5%, 50% 0, 63% 4%, 77% 0, 90% 5%, 100% 2%, 100% 100%, 86% 96%, 72% 100%, 58% 95%, 42% 100%, 28% 96%, 12% 100%, 0 96%); }
.cf-clue:nth-child(3n) { clip-path: polygon(0 3%, 12% 0, 26% 5%, 40% 0, 55% 4%, 70% 0, 84% 5%, 100% 0, 100% 97%, 85% 100%, 70% 95%, 54% 100%, 38% 96%, 22% 100%, 8% 95%, 0 100%); }
.cf-clue.new { background: #fff3cf; }
.cf-clue.new::after, .cf-stmt.new::after { content: "NEW"; position: absolute; top: 8px; right: 8px; font: 700 10px/1 var(--font-type); letter-spacing: 0.12em; color: #7a5f2a; }
.cf-clue-label { margin: 0; font: 700 14px/1.25 var(--font-type); color: var(--type-ink); padding-right: 26px; }
.cf-clue-note { margin: 4px 0 0; font: 400 12px/1.35 var(--font-type); color: var(--type-mute); }
.cf-clue-src { margin: 2px 0 0; font: italic 400 11px/1.3 var(--font-type); color: var(--type-mute); opacity: 0.85; }
/* statements: index cards with a photo clipped on */
.cf-stmt { position: relative; display: flex; gap: 12px; margin: 0 0 12px; padding: 12px; border: none; border-radius: 2px; background: var(--paper); box-shadow: 0 2px 0 #c9b68c, 0 4px 10px rgba(60,40,10,0.2); }
/* Not questioned yet: a plainer card, never faded (fading pushed its small type under 4.5:1). */
.cf-stmt:not(.taken) { background: #e9dfc9; box-shadow: none; outline: 1.5px dashed rgba(74,61,37,0.45); outline-offset: -1.5px; }
.cf-stmt:not(.taken) .cf-stmt-photo { filter: grayscale(1) contrast(0.95); }
.cf-stmt:not(.taken) .cf-stmt-text { font-style: italic; color: var(--type-soft); }
.cf-stmt.new .cf-stmt-name { padding-right: 36px; }
.cf-stmt.new { box-shadow: 0 0 0 2px #8a6f3a, 0 4px 10px rgba(60,40,10,0.2); }
.cf-stmt-photo { width: 62px; height: 78px; object-fit: cover; object-position: center top; border: 3px solid var(--slip); border-radius: 1px; box-shadow: 0 2px 5px rgba(60,40,10,0.35); filter: grayscale(0.45) contrast(1.05); flex-shrink: 0; transform: rotate(-2deg); }
.cf-stmt-body { min-width: 0; }
.cf-stmt-name { margin: 0; font: 600 16px/1.15 var(--font-oswald); letter-spacing: 0.03em; text-transform: uppercase; color: var(--type-ink); }
.cf-stmt-role { margin: 3px 0 7px; font: 700 11px/1.2 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--type-mute); }
.cf-stmt-text { margin: 0; font: 400 14px/1.55 var(--font-type); color: var(--type-ink); }
.cf-secrets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cf-secrets-label { font: 700 11px/1 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; color: var(--type-mute); }
.cf-secret { padding: 4px 8px; border: 1px dashed #8a6f3a; border-radius: 10px; font: 400 12px/1.2 var(--font-type); color: var(--type-mute); }
.cf-secret.cracked { border: 1px solid var(--seal); background: var(--seal); color: #ffe3da; }
.cf-secret.proven { border: 1px solid #7a5f2a; color: var(--type-soft); }
.cf-foot { position: sticky; bottom: -28px; margin: 16px -16px -28px; padding: 12px 16px 20px; background: linear-gradient(to top, #0e0c09 70%, transparent); }
.cf-foot[hidden] { display: none; }
.cf-accuse { width: 100%; }

/* --- revelation card: a typed report on the desk --------------------------------------------------------- */
.rv-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: radial-gradient(110% 70% at 50% 0%, rgba(58,47,28,0.9) 0%, rgba(14,12,9,0.94) 60%) rgba(8,6,4,0.92); }
.rv-scrim[hidden] { display: none; }
/* The tilt rides the independent `rotate` property so the rise animation (transform) never clobbers it. */
.rv-card { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px 22px 22px; border: none; border-radius: 2px; background: var(--paper); color: var(--type-ink); rotate: -0.6deg; box-shadow: 0 24px 60px rgba(0,0,0,0.7); scrollbar-width: thin; scrollbar-color: #b8a272 transparent; }
.rv-scrim[data-tone="letter"] .rv-card { rotate: 0deg; background: #efe2c2; }
html:not([data-reduce="1"]) .rv-scrim.rv-in .rv-card { animation: rv-rise 0.55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
/* The suspect across the table: a photo clipped to the report's corner. */
.rv-portrait { position: absolute; top: 16px; right: 16px; display: block; width: 104px; height: 124px; padding: 5px 5px 16px; margin: 0; object-fit: cover; object-position: center top; background: var(--slip); border: none; border-radius: 1px; box-shadow: 0 6px 14px rgba(60,40,10,0.4); rotate: 3.5deg; filter: grayscale(0.35) contrast(1.05); }
.rv-portrait[hidden] { display: none; }
.rv-scrim[data-portrait] .rv-kicker, .rv-scrim[data-portrait] .rv-title { max-width: calc(100% - 118px); }
.rv-scrim[data-portrait] .rv-card { min-height: 0; }
.rv-kicker { margin: 0 0 10px; font: 700 12px/1.35 var(--font-type); letter-spacing: 0.12em; color: var(--type-mute); }
.rv-title { margin: 0; font: 600 28px/1.1 var(--font-read); color: #1d1a14; text-wrap: balance; }
.rv-rule { width: 48px; height: 2px; margin: 14px 0; background: var(--type-ink); }
/* A solved question gets the SOLVED stamp where the rule would be: struck in wax-red ink. */
.rv-scrim[data-tone="solve"] .rv-rule { display: inline-block; width: auto; height: auto; margin: 14px 0 12px; padding: 4px 12px; background: none; border: 3px solid var(--seal); border-radius: 2px; color: var(--seal); font: 700 15px/1 var(--font-type); letter-spacing: 0.2em; rotate: -6deg; opacity: 0.9; }
.rv-scrim[data-tone="solve"] .rv-rule::before { content: "SOLVED"; }
.rv-scrim[data-portrait] .rv-rule { margin-top: 18px; }
.rv-body p { margin: 0 0 12px; font: 400 15.5px/1.6 var(--font-type); color: var(--type-ink); }
.rv-scrim[data-tone="letter"] .rv-body p { font: italic 400 17px/1.6 var(--font-read); color: #3a2f1c; }
.rv-extra:empty, .rv-lead:empty { display: none; }
/* The letter's plain-words summary (endgame.js LETTER_IN_SHORT): upright and set apart from the italic letter. */
.rv-inshort { margin: 4px 0 16px; padding: 10px 12px; border-left: 3px solid var(--type-ink); background: rgba(255,255,255,0.35); }
.rv-inshort-h { margin: 0 0 6px; font: 700 11px/1 var(--font-type); letter-spacing: 0.14em; color: var(--type-mute); }
.rv-inshort p:not(.rv-inshort-h) { margin: 0 0 6px; font: 400 16.5px/1.5 var(--font-read); color: var(--type-ink); }
.rv-inshort p:last-child { margin-bottom: 0; }
.rv-evidence { margin: 4px 0 14px; padding: 10px 12px; border: 1.5px dashed rgba(74,61,37,0.55); border-radius: 2px; }
.rv-evidence-h { margin: 0 0 6px; font: 700 11px/1 var(--font-type); letter-spacing: 0.14em; color: var(--type-mute); }
.rv-evidence-row { margin: 0 0 4px; font: 400 14px/1.4 var(--font-type); color: var(--type-ink); }
.rv-evidence-row::before { content: "+ "; color: var(--type-soft); font-weight: 700; }
/* Nestor's line is his paper note, tucked onto the report and signed. */
.rv-nestor { display: flex; align-items: center; gap: 12px; margin: 10px 0 20px 5%; padding: 12px 14px; border: none; border-radius: 1px; background: var(--note); box-shadow: 0 6px 14px rgba(60,40,10,0.35); rotate: 1.2deg; }
.rv-nestor[hidden] { display: none; }
.rv-nestor-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; border: none; filter: grayscale(1) contrast(1.1); flex-shrink: 0; }
.rv-nestor-line { margin: 0; font: 500 20px/1.18 var(--font-hand); color: var(--note-ink); }
.rv-nestor-line::after { content: " N."; content: " N." / ""; font-weight: 600; color: var(--seal); }
.rv-continue { width: 100%; }
.rv-card .rv-continue { border-color: var(--type-ink); background: var(--type-ink); color: var(--paper); border-radius: 3px; font: 600 15px/1 var(--font-oswald); letter-spacing: 0.16em; text-transform: uppercase; }
.rv-card .rv-continue:focus-visible { outline: 3px solid var(--type-ink); outline-offset: 3px; }
/* The button never scrolls out of reach on a short phone: it sticks to the card's foot, on a strip
   of the card's own paper so the text slides under it cleanly (2026-10-13). */
.rv-card .rv-continue { position: sticky; bottom: -22px; z-index: 1; box-shadow: 0 0 0 8px var(--paper), 0 -18px 14px 2px var(--paper); }
.rv-scrim[data-tone="letter"] .rv-card .rv-continue { box-shadow: 0 0 0 8px #efe2c2, 0 -18px 14px 2px #efe2c2; }
.rv-choices { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.rv-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 58px; padding: 11px 13px; border: none; border-radius: 1px; background: var(--slip); color: var(--type-ink); text-align: left; cursor: pointer; box-shadow: 0 2px 5px rgba(60,40,10,0.3); }
.rv-choice:hover, .rv-choice:focus-visible { outline: 2px solid var(--type-ink); outline-offset: 1px; }
.rv-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--type-ink), 0 2px 5px rgba(60,40,10,0.3); }
.rv-choice b { font: 700 15px/1.25 var(--font-type); }
.rv-choice span { font: 400 13px/1.4 var(--font-type); color: var(--type-mute); }

/* --- ask-chips: typed question cards ---------------------------------------------------------------- */
/* One card per row, full width: a non-gamer reads them like a list of questions, never discovers a swipe.
   Nestor's lead is the clean sheet with a brass edge and his red initial. */
.ask-chips { display: flex; flex-direction: column; gap: 7px; margin: 0 0 9px; }
.ask-chips[hidden] { display: none; }
.ask-chip { position: relative; width: 100%; min-height: 44px; padding: 9px 14px; border: none; border-radius: 2px; background: var(--paper-2); color: var(--type-ink); font: 700 calc(14.5px * var(--read-scale, 1))/1.3 var(--font-type); text-align: left; white-space: normal; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.45); }
.ask-chip.statement { background: var(--paper); }
/* An odd side question (tone pass 2026-10-14): set apart so it reads as color, not as a lead. */
.ask-chip.odd { font-style: italic; font-weight: 400; background: transparent; color: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.ask-chip:hover:not(:disabled), .ask-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.ask-chip:disabled { opacity: 0.55; cursor: default; }
.ask-chip.lead { padding-right: 44px; background: var(--paper); box-shadow: 0 0 0 2px var(--brass), 0 4px 14px rgba(205,163,73,0.35); }
.ask-chip.lead::after { content: "N."; content: "N." / ""; position: absolute; right: 12px; top: 50%; translate: 0 -50%; rotate: -8deg; font: 600 22px/1 var(--font-hand); color: var(--seal); }

/* --- evidence arrival lightbox -------------------------------------------------------------------- */
.lb-kicker { margin: 0 0 6px; font: 500 10px/1.3 var(--font-jbmono); letter-spacing: 0.16em; color: var(--brass); }
.lb-keep { width: 100%; margin-top: 12px; }
.lb-present.lb-present-secondary { width: 100%; margin-top: 8px; background: transparent; border: 1px solid var(--border); color: var(--ink-soft); font-size: 12.5px; letter-spacing: 0.04em; }
/* --- clue toast ----------------------------------------------------------------------------------------- */
.clue-toast { position: relative; width: 100%; border: 1px solid var(--brass); border-radius: 4px 10px 4px 9px; background: rgba(26,22,15,0.97); color: var(--ink); box-shadow: 0 14px 40px rgba(0,0,0,0.6); transform: translateY(-12px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; }
/* The card's body opens the Case File; the x in its corner puts it away (it no longer leaves by itself
   while it is being read, 2026-10-15). */
.ct-open { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 11px 40px 11px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ct-open:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }
.ct-x { position: absolute; top: 2px; right: 2px; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-mute); font-size: 22px; line-height: 1; cursor: pointer; }
.ct-x:hover, .ct-x:focus-visible { color: var(--ink); }
.ct-note { font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.clue-toast[hidden] { display: none; }
.clue-toast.show { transform: translateY(0); opacity: 1; }
.ct-head { font: 600 11px/1.2 var(--font-jbmono); letter-spacing: 0.14em; color: var(--brass); }
.ct-clues { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-clue { padding: 3px 8px; border-radius: 10px; background: rgba(205,163,73,0.15); font-size: 12.5px; }
.ct-foot { font-size: 11px; color: var(--ink-mute); }

/* --- roster: case banner + secret slots ------------------------------------------------------------------- */
/* Compact (2026-10-13): act, a two-line objective, then progress and the open link on one row. */
.rs-case { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; width: 100%; margin: 8px 0 8px; padding: 10px 12px; border: 1px solid var(--brass-dim); border-radius: 4px 10px 4px 9px; background: rgba(12,10,7,0.78); color: var(--ink); text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 var(--brass); }
.rs-case:hover, .rs-case:focus-visible { border-color: var(--brass); outline: none; }
.rs-case-act { flex: 1 0 100%; font: 600 12px/1.2 var(--font-oswald); letter-spacing: 0.1em; color: var(--brass); }
.rs-case-obj { flex: 1 0 100%; font: italic 400 14.5px/1.4 var(--font-read); color: var(--ink); }
/* Once Nestor has named the next step, that line replaces the objective here (the objective stays in
   the Case File), so the banner never grows and all five suspects stay on one phone screen. */
.rs-case:has(.rs-case-lead:not([hidden])) .rs-case-obj { display: none; }
.rs-case-progress { flex: 1 1 auto; font: 400 11px/1.3 var(--font-jbmono); color: var(--ink-soft); letter-spacing: 0.04em; }
/* Nestor's pointer at the next step, once he has given it (2026-10-12). */
.rs-case-lead { flex: 1 0 100%; display: block; font: 400 13.5px/1.4 var(--font-read); color: var(--brass); border-left: 2px solid var(--brass-dim); padding-left: 8px; }
.rs-case-lead[hidden] { display: none; }
.rs-case-lead::before { content: "Nestor: "; font: 600 10.5px/1 var(--font-jbmono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.rs-case-cta { flex: none; display: inline-flex; align-items: center; margin-top: 2px; font: 600 11px/1 var(--font-jbmono); letter-spacing: 0.14em; color: var(--brass); }
.rs-secrets { position: absolute; left: 5px; top: 5px; z-index: 2; display: flex; gap: 3px; padding: 2px 6px; border-radius: 3px; background: rgba(10,8,5,0.72); font-size: 12px; line-height: 1.2; color: #b6ab93; letter-spacing: 1px; pointer-events: none; }
.rs-secrets:empty { display: none; }
.rs-secrets .on { color: #e0776b; }
.rs-secrets .half { color: var(--brass); }
.rs-accuse.early { opacity: 0.55; }
.rs-accuse.ready { border-color: var(--brass) !important; box-shadow: 0 0 0 3px rgba(205,163,73,0.22); }

/* --- accusation: your case ------------------------------------------------------------------------------- */
.ax-pick-more { margin-top: 18px; }
.ax-pick-more .ax-picklabel { margin-top: 12px; }
.ax-case { display: flex; flex-direction: column; gap: 6px; }
.ax-case-row { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-mute); }
.ax-case-row.done { color: var(--ink); }
.ax-case-row::before { content: "○"; color: var(--ink-mute); flex-shrink: 0; }
.ax-case-row.done::before { content: "✓"; color: #7fc995; }
.ax-case-row.key { font-weight: 600; }
.ax-case-tip { margin: 6px 0 0; font: italic 400 13px/1.45 var(--font-read); color: var(--ink-soft); }

/* --- ending: fates + rank ---------------------------------------------------------------------------------- */
.en-rank { margin: 18px 0 6px; padding: 14px; border: 1px solid var(--brass-dim); border-radius: 4px 10px 4px 9px; background: rgba(0,0,0,0.35); text-align: left; }
.en-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.en-rank-title { margin: 0; font: 600 20px/1.1 var(--font-oswald); letter-spacing: 0.05em; color: var(--ink); }
.en-rank-stars { font-size: 16px; letter-spacing: 3px; color: var(--brass); }
.en-rank-verdict { margin: 8px 0 10px; font: italic 400 15px/1.5 var(--font-read); color: var(--ink-soft); }
.en-rank-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; margin: 0; font: 400 11.5px/1.5 var(--font-jbmono); color: var(--ink-mute); }
.en-fates { margin: 18px 0 6px; text-align: left; }
.en-fates-h { margin: 0 0 8px; font: 500 10px/1 var(--font-jbmono); letter-spacing: 0.16em; color: var(--brass); }
.en-fate { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.en-fate img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center top; border: 1px solid var(--border); flex-shrink: 0; }
.en-fate p { margin: 0; font: 400 14px/1.5 var(--font-read); color: var(--ink-soft); }
.en-fate b { display: block; font: 600 12px/1.3 var(--font-body); color: var(--ink); }

/* Phone fit (2026-10-13): a phone inside the Claude app is ~660px tall. Lives here, after the base
   rules above, because a media query adds no specificity. */
@media (max-height: 760px) {
  .ask-chips { gap: 6px; margin-bottom: 8px; }
  .ask-chip { min-height: 38px; padding: 7px 12px; font-size: calc(13.5px * var(--read-scale, 1)); }
  .cf-acts { margin: 8px 0 6px; }
  .cf-actdot { width: 28px; height: 28px; font-size: 13px; }
  .cf-objective { margin: 2px 0 8px; font-size: 14px; }
  .rv-card { padding: 22px 18px 18px; }
  .rv-card .rv-continue { bottom: -18px; }
  .rv-title { font-size: 25px; }
}
/* The close button stays in reach on a long tab (2026-10-13: it scrolled away with the Clues list). */
.cf-head { position: sticky; top: -16px; z-index: 3; margin: -16px -16px 0; padding: 16px 16px 8px; background: linear-gradient(#211a10 82%, rgba(23,19,13,0)); }
/* A long picker shows that it scrolls: Cancel stays pinned at the bottom under a fade. */
.cf-picker-cancel { position: sticky; bottom: -16px; margin-bottom: -16px; background: var(--manila); box-shadow: 0 -18px 16px -4px var(--manila); }
.cf-picker-more { margin: 4px 0 8px; font: italic 400 12px/1.3 var(--font-type); color: var(--type-mute); text-align: center; }
/* Scrolled to the end, the last option sits clear of the pinned Cancel and its fade, so a click on it
   never lands on Cancel (2026-10-15 r6, Walter: "Ten years ago" sat half under Cancel and the click
   cancelled the picker). Keyboard focus scrolls an option clear of it too. */
.cf-picker-list { padding-bottom: 30px; }
.cf-picker-sheet { scroll-padding-bottom: 96px; }
/* A blank that scrolls under the header shows through its fade, so the header lets taps through to it;
   only the close button takes a tap (2026-10-13 r3: taps meant for a blank closed the sheet). */
.cf-head { pointer-events: none; }
.cf-head .cf-close { pointer-events: auto; }