/* Hearsay. Mobile first: one column, a rainy stage on top, a paper panel below. */
:root{--night:#0d0f14;--night2:#171b24;--ink:#1d1f26;--muted:#62646e;--paper:#efe9de;--paper2:#e3dbcc;--line:#cfc4b0;--neon:#ff3d7f;--amber:#f2b134;--teal:#3fc1c9;--good:#2f6e45;--bad:#a3302a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;-webkit-text-size-adjust:100%}
button,input{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:500}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));background:#0d0f14ee;color:#e9e3d8;backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:3px}
.brand b{color:var(--neon);font-weight:700;text-shadow:0 0 8px #ff3d7f88}
.brand-mark{color:var(--neon);font-size:20px;font-family:Georgia,serif}
.menu{background:none;border:0;color:#e9e3d8;font-size:24px;min-width:44px;min-height:44px}
main{max-width:640px;margin:0 auto;min-height:calc(100dvh - 60px);display:flex;flex-direction:column;background:var(--paper)}
.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--neon)}
.small-note{font-size:13px;color:var(--muted);line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* buttons */
.primary{border:0;background:var(--ink);color:#fff;font-weight:700;padding:14px 22px;border-radius:10px;min-height:50px;box-shadow:0 3px 0 #000}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.secondary{background:transparent;border:1.5px solid #a99d88;color:var(--ink);padding:12px 18px;border-radius:10px;min-height:48px}
.danger{background:var(--bad);border:0;color:#fff;padding:12px 18px;border-radius:10px;min-height:48px;font-weight:700}
.actions{display:flex;gap:10px;margin-top:16px}
.actions .primary{flex:1}
.actions.stack{flex-direction:column}
.actions.stack>*{width:100%}
.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* title */
.title-card{position:relative;flex:1;display:flex;align-items:flex-end;min-height:calc(100dvh - 60px);background:radial-gradient(ellipse at 70% 15%,#ff3d7f33,transparent 55%),radial-gradient(ellipse at 15% 30%,#3fc1c922,transparent 50%),linear-gradient(#141824,#07080c);color:#efe9de;overflow:hidden}
.title-inner{position:relative;z-index:1;padding:28px 22px calc(34px + env(safe-area-inset-bottom))}
.title-card h1{font-size:56px;margin:.1em 0 .15em;letter-spacing:2px;color:#fff;text-shadow:0 0 18px #ff3d7f99}
.title-card p{font-family:Georgia,serif;font-size:18px;line-height:1.5;color:#d9d2c5}
.title-card .primary{background:var(--neon);box-shadow:0 3px 0 #9c1d47}
.title-card .secondary{color:#efe9de;border-color:#6d6a75}

/* rain */
.rain{position:absolute;inset:-20% 0 0 0;pointer-events:none;background-image:repeating-linear-gradient(105deg,transparent 0 22px,#ffffff14 22px 23px),repeating-linear-gradient(100deg,transparent 0 37px,#ffffff0d 37px 38px);background-size:180px 180px,260px 260px;animation:rain .6s linear infinite}
@keyframes rain{to{background-position:-40px 180px,-50px 260px}}
@media (prefers-reduced-motion:reduce){.rain{animation:none}}

/* stage */
.stage{position:relative;height:clamp(110px,18dvh,170px);overflow:hidden;flex:0 0 auto;background:linear-gradient(#1a1f2c,#0b0d12);color:#efe9de}
.stage.place-office{background:radial-gradient(ellipse at 80% 30%,#f2b13433,transparent 50%),linear-gradient(#1b1d24,#0b0c10)}
.stage.place-court{background:radial-gradient(ellipse at 50% 0%,#e9e3d822,transparent 60%),linear-gradient(#22201f,#0e0d0c)}
.stage.place-steps{background:radial-gradient(ellipse at 20% 20%,#ff3d7f44,transparent 50%),radial-gradient(ellipse at 85% 40%,#3fc1c933,transparent 45%),linear-gradient(#141824,#07080c)}
.place{position:absolute;z-index:2;top:10px;left:12px;font-size:11px;letter-spacing:1px;color:#e9e3d8;background:#00000066;padding:3px 9px;border-radius:20px}
.speaker{position:absolute;z-index:2;bottom:12px;left:14px;font-family:Georgia,serif;font-size:28px;color:#fff;text-shadow:0 2px 12px #000}
.speaker.who-voss{color:#ffd0dc;text-shadow:0 0 12px #ff3d7f88}
.speaker.who-hale{color:#f6e5c0}
.speaker.who-marsh{font-style:italic;color:#c9e9ec}
.patience{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:7px 14px;background:#14161d;color:#d8d2c6;font-size:11px;letter-spacing:.5px}
.meter-bar{height:7px;border-radius:5px;background:#2c2f38;overflow:hidden}
.meter-bar span{display:block;height:100%;background:linear-gradient(90deg,#8d8a7c,var(--amber));transition:width .6s ease}
.patience.hot .meter-bar span{background:linear-gradient(90deg,var(--neon),#e0412a)}
.patience.hot{color:#ffb3c8}

/* panel */
.panel{flex:1;padding:14px 16px calc(22px + env(safe-area-inset-bottom));background:var(--paper);border-top:3px solid var(--neon)}
.who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:-2px 0 6px}
.who b{font-family:Georgia,serif;font-size:19px;font-weight:600}
.who span{font-size:12px;color:var(--muted)}
.line{font-family:Georgia,serif;font-size:18px;line-height:1.55;margin:4px 0 10px}
.line.narration{color:#34363f}
.line.note{font-style:italic;background:#fbf7ee;border-left:4px solid var(--teal);padding:10px 12px;border-radius:4px}
.line.bad{color:#7c2a17}
.label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--muted);margin:12px 0 4px}
.prompt{font-weight:600;margin:14px 0 8px}
.doc-quote{margin:0;padding:12px 14px;background:#fbf7ee;border:1px solid var(--line);border-radius:6px;font-family:'Courier New',Courier,monospace;font-size:15px;line-height:1.55}
.voss-says{margin:12px 0;padding:12px 14px;border-radius:10px;background:#1d1f26;color:#ffe3ea}
.voss-says .label{color:var(--neon);margin:0 0 4px}
.voss-says p{margin:0;font-family:Georgia,serif;font-size:17px;line-height:1.5}
.field{display:grid;gap:6px;margin:12px 0}
.field input{font-size:18px;padding:12px;border:2px solid var(--line);border-radius:10px;background:#fff}

/* options */
.opt-list{display:grid;gap:8px;margin:8px 0}
.opt{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px;line-height:1.4;color:var(--ink)}
.opt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.opt.right{border-color:var(--good);background:#e5efe2}
.opt.wrong{border-color:var(--bad);background:#f5dfd9}
.opt.dim{opacity:.55}
.opt:disabled{cursor:default;color:var(--ink)}
.feedback{margin:12px 0 0;padding:12px 14px;border-radius:10px;line-height:1.5}
.feedback.good{background:#e5efe2;color:#1f4d2f}
.feedback.bad{background:#f5dfd9;color:#6b2016}
.cross-btns{display:grid;gap:10px;margin-top:14px}
.objection{border:0;background:var(--neon);color:#fff;font-family:Georgia,serif;font-size:26px;letter-spacing:2px;font-weight:700;padding:16px;border-radius:12px;box-shadow:0 4px 0 #9c1d47;text-shadow:0 2px 0 #9c1d47}
.objection:active{transform:translateY(2px);box-shadow:0 2px 0 #9c1d47}

/* ruling and evidence board */
.ruling{margin:0 0 12px;padding:12px 14px;border-radius:8px;background:#1d1f26;color:#efe9de}
.ruling p{margin:.4em 0;font-family:Georgia,serif;line-height:1.5}
.ruling .range{font-family:system-ui,sans-serif;font-size:14px;color:#cfc8bb}
.ruling.compact p{font-size:15px}
.board{padding:12px 12px calc(90px + env(safe-area-inset-bottom))}
.doc{background:#fbf7ee;border:1px solid var(--line);border-radius:6px;padding:10px 12px;box-shadow:0 2px 0 #0000000d}
.doc-head{font-family:'Courier New',monospace;font-size:12px;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:6px;margin-bottom:6px}
.para{display:grid;grid-template-columns:auto 1fr;gap:8px;margin:8px 0}
.para p{margin:0;font-family:'Courier New',Courier,monospace;font-size:15px;line-height:1.7}
.pnum{font-weight:700;font-size:13px;color:var(--muted);padding-top:2px;max-width:2em;line-height:1.2}
.para.out .pnum{max-width:5.5em;font-size:11px;color:#8a6d4a}
.para.out p{color:#7e7a72}
.cl{display:inline;background:none;border:0;padding:1px 2px;margin:0;font:inherit;color:inherit;text-align:left;border-radius:3px;line-height:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-bottom:1px dotted #b8ad98}
.cl.pinned{background:#ffe08a;color:#1d1f26;border-bottom:2px solid var(--amber);box-shadow:0 0 0 1px #f2b13466}
.board-bar{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:640px;margin:0 auto;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#0d0f14f2;color:#efe9de}
.board-bar .primary{background:var(--neon);box-shadow:0 3px 0 #9c1d47}
.cl-r{padding:1px 2px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cl-r.found{background:#cfe6c9}
.cl-r.missed{outline:2px dashed #c98b1a;background:#fff3d1}
.cl-r.junk{background:#f3cfc8;text-decoration:line-through;text-decoration-color:#a3302a88}
.cl-r.out{color:#8a857b}
.tag{display:inline-block;font-style:normal;font-family:system-ui,sans-serif;font-size:11px;font-weight:700;margin-left:4px;padding:0 6px;border-radius:8px;text-decoration:none;vertical-align:1px}
.tag.good{background:var(--good);color:#fff}
.tag.miss{background:#c98b1a;color:#fff}
.tag.bad{background:var(--bad);color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;margin:0 0 10px}
.board .actions{margin-top:14px}

/* closing and verdict */
.closing{margin:6px 0;padding:14px;background:#fbf7ee;border-left:4px solid var(--neon);font-family:Georgia,serif;font-size:17px;line-height:1.6}
.verdict{font-size:34px;margin:.15em 0 .3em}
.verdict.strong{color:var(--good)}
.verdict.narrow{color:#8a6114}
.verdict.lost{color:var(--bad)}

/* modal */
dialog{border:0;border-radius:14px;padding:18px;width:min(600px,94vw);max-height:90dvh;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:#000a}
#modalBody{max-height:calc(90dvh - 110px);overflow:auto}
#closeModal{margin-top:12px;width:100%}
.how li{margin:6px 0;line-height:1.45}