/* Silent Years. Mobile first: one column, a night stage on top, a paper panel below.
   Night navy and slate; warm amber lamp light; radio-dial green. */
:root{--night:#0b1020;--night2:#151c2e;--ink:#1b2130;--muted:#5d6475;--paper:#ece6d8;--paper2:#e0d8c6;--line:#c9bfa9;--amber:#f0a83a;--dial:#57d38c;--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}
h2{margin:.2em 0 .5em}
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:#0b1020ee;color:#e6e0d2;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(--dial);font-weight:700;text-shadow:0 0 8px #57d38c88}
.brand-mark{width:10px;height:10px;border-radius:50%;background:var(--dial);box-shadow:0 0 10px var(--dial)}
.hdr-btns{display:flex;gap:2px}
.menu{background:none;border:0;color:#e6e0d2;font-size:22px;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:#a86a12}
.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}
.primary.big{font-size:20px;min-height:64px;background:#14301f;box-shadow:0 3px 0 #000,0 0 0 2px var(--dial) inset}
.secondary{background:transparent;border:1.5px solid #a2988a;color:var(--ink);padding:12px 18px;border-radius:10px;min-height:48px}
.secondary.small{min-height:40px;padding:8px 14px}
.danger{background:var(--bad);border:0;color:#fff;padding:12px 18px;border-radius:10px;min-height:50px;font-weight:700}
.actions{display:flex;gap:10px;margin-top:14px}
.actions>*{flex:1}
.actions.stack{flex-direction:column}
.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% 20%,#f0a83a33,transparent 50%),radial-gradient(ellipse at 20% 35%,#57d38c22,transparent 45%),linear-gradient(#151c2e,#05070d);color:#ece6d8;overflow:hidden}
.title-inner{position:relative;z-index:1;padding:28px 22px calc(34px + env(safe-area-inset-bottom))}
.title-card h1{font-size:52px;margin:.1em 0 .15em;letter-spacing:2px;color:#fff;text-shadow:0 0 18px #f0a83a77}
.title-card p{font-family:Georgia,serif;font-size:18px;line-height:1.5;color:#d6d0c2}
.title-card .primary{background:var(--amber);color:#1b1408;box-shadow:0 3px 0 #8a5a12}
.title-card .secondary{color:#ece6d8;border-color:#646b7d}
.bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}

/* radio static: a faint flicker of grain */
.static{position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:repeating-radial-gradient(circle at 17% 32%,#fff 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 71% 64%,#fff 0 1px,transparent 1px 4px);animation:grain .35s steps(3) infinite}
@keyframes grain{50%{background-position:3px 5px,-4px 2px}}
@media (prefers-reduced-motion:reduce){.static{animation:none}}

/* stage */
.stage{position:relative;height:clamp(120px,22dvh,190px);overflow:hidden;flex:0 0 auto;background:linear-gradient(#1b2338,#090c16);color:#ece6d8}
.stage.place-attic{background:radial-gradient(ellipse at 30% 70%,#57d38c33,transparent 45%),radial-gradient(ellipse at 75% 30%,#f0a83a33,transparent 50%),linear-gradient(#1d1a1c,#0a090c)}
.stage.place-harbour{background:radial-gradient(ellipse at 80% 60%,#f0a83a44,transparent 40%),radial-gradient(ellipse at 20% 30%,#9fb3c933,transparent 55%),linear-gradient(#18233a,#070a12)}
.portrait{position:absolute;z-index:1;right:10px;bottom:0;height:96%;width:auto;max-width:48%;object-fit:contain}
.portrait.fading{opacity:.35;filter:blur(1px) grayscale(.6)}
.portrait.shadow{filter:brightness(.6)}
.place{position:absolute;z-index:2;top:10px;left:12px;font-size:11px;letter-spacing:1px;color:#e6e0d2;background:#00000066;padding:3px 9px;border-radius:20px}
.speaker{position:absolute;z-index:2;bottom:12px;left:14px;font-family:Georgia,serif;font-size:26px;color:#fff;text-shadow:0 2px 12px #000}

/* signal meter: it only ever fills */
.meter{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 14px;background:#0f1424;color:#cfd6c9;font-size:11px;letter-spacing:.5px}
.meter-bar{height:7px;border-radius:5px;background:#26304a;overflow:hidden}
.meter-bar span{display:block;height:100%;background:linear-gradient(90deg,#2f8f5a,var(--dial));box-shadow:0 0 8px var(--dial);transition:width .6s ease}
.meter .tag{color:#9ea8bd}

/* panel */
.panel{flex:1;padding:14px 16px calc(22px + env(safe-area-inset-bottom));background:var(--paper);border-top:3px solid var(--dial)}
.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:19px;line-height:1.55;margin:4px 0 10px}
.line.narration{color:#3a3f4c;font-style:italic}
.label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--muted);margin:12px 0 4px}
.how-line{font-size:14px;color:var(--muted);line-height:1.45;margin:4px 0 8px}
.prompt{font-weight:600;font-size:18px;margin:14px 0 8px}
.prompt.listening{color:#1f6b40}
.hint{margin:10px 0;padding:10px 12px;background:#fbf7ee;border-left:4px solid var(--amber);border-radius:4px;font-size:17px}
.hint .label{margin:0 6px 0 0;display:inline}
.drill-text{font-family:Georgia,serif;font-size:19px;line-height:1.5;background:#fbf7ee;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.pair-words{font-family:Georgia,serif;font-size:18px;line-height:1.5;background:#fbf7ee;border:1px solid var(--line);border-radius:8px;padding:10px 14px 10px 34px}
.pair-words li{margin:4px 0}
.heard{font-size:18px;min-height:1.4em}
.verdict{font-family:Georgia,serif;font-size:26px;margin:10px 0 4px}
.verdict.good{color:var(--good)}
.verdict.bad{color:#8a4b12}
.model{font-family:Georgia,serif;font-size:20px;line-height:1.5;background:#e9f6ee;border-left:4px solid var(--dial);padding:10px 12px;border-radius:4px}
.why{line-height:1.5}
.event{font-weight:700;color:#8a5a12}

/* single-cell answer box */
.answer-cell{width:100%;border-collapse:collapse;margin:10px 0}
.answer-cell td{border:2px solid var(--line);background:#fff;padding:0;border-radius:8px}
.answer-cell input{width:100%;border:0;background:transparent;font-size:19px;padding:12px}

/* frequencies */
.freqs{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.freq{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fbf7ee}
.freq b{display:block;font-family:Georgia,serif;font-size:18px;font-weight:600}
.freq span{font-size:13px;color:var(--muted)}
.freq.sealed{opacity:.75}
.freq .primary,.freq .secondary{min-height:44px;padding:10px 16px}

/* facts (end of night) */
.rc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.rc-facts>div{padding:8px 10px;border-radius:10px;background:#fbf4e6;border:1px solid #e3d0ae}
.rc-facts b{font-size:1.2rem;margin-right:4px}

/* 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}
.say-line{margin:10px 0;padding:10px 12px;background:#eef3ff;border-left:4px solid #5b7bd5;border-radius:4px;line-height:1.45}
.drill-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.link{background:none;border:0;color:#2f4fa8;text-decoration:underline;font-size:14px;padding:8px 0;min-height:40px}
.example{margin:12px 0;padding:12px 14px;border:1px dashed #a2988a;border-radius:10px;background:#fbf7ee}
.ex-hear{font-family:Georgia,serif;font-size:18px;margin:4px 0}
.ex-step{margin:10px 0 4px;font-weight:600}