/* Layout: één scherm. Kop, scrollend speelveld (citaat + omschrijvingen), vaste balk met invoerveld en toetsenbord. Delfts-blauwe tegels op porseleinwit. */
:root{
  --bg:#f3f5f8; --paper:#ffffff; --ink:#18233a; --muted:#5d6880; --line:#d3d9e4;
  --accent:#1f4fa3; --accent-soft:#dbe5f6; --accent-ink:#ffffff;
  --cell:#ffffff; --cell-line:#9aa6bd; --word:#e9eef8; --sel:#f7d35c; --sel-ink:#18233a;
  --bad:#c0392b; --bad-soft:#f8dedb; --good:#2e7d4f; --reveal:#7a5bb5;
  --key:#e2e7f0; --key-ink:#18233a;
  --band:#14295c; --band-cell:#2a4383; --band-num:#a9b9df; --tile:#ffffff; --tile-ink:#14295c; --stop:#8d97ab; --first:#f2c94c; --first-ink:#14295c; --ans-fill:#14295c;
  --f-display:"Gloock", Georgia, "Times New Roman", serif;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs: clamp(24px, calc((100vw - 64px) / 11.8), 40px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1524; --paper:#161e31; --ink:#e7ecf6; --muted:#9aa6bf; --line:#2a3550;
  --accent:#7ea6ec; --accent-soft:#22325a; --accent-ink:#0f1524;
  --cell:#1b2540; --cell-line:#4a5a80; --word:#22325a; --sel:#e9c04a; --sel-ink:#0f1524;
  --bad:#ff8a7a; --bad-soft:#4a2224; --good:#6fd39a; --reveal:#b9a0ec;
  --key:#26314d; --key-ink:#e7ecf6; --band:#0a1330; --band-cell:#1f3266; --band-num:#8fa2d1; --tile:#e7ecf6; --tile-ink:#0f1f4a; --stop:#56607a; --first:#e9c04a; --first-ink:#0f1524; --ans-fill:#3557a8; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1524; --paper:#161e31; --ink:#e7ecf6; --muted:#9aa6bf; --line:#2a3550;
  --accent:#7ea6ec; --accent-soft:#22325a; --accent-ink:#0f1524;
  --cell:#1b2540; --cell-line:#4a5a80; --word:#22325a; --sel:#e9c04a; --sel-ink:#0f1524;
  --bad:#ff8a7a; --bad-soft:#4a2224; --good:#6fd39a; --reveal:#b9a0ec;
  --key:#26314d; --key-ink:#e7ecf6; --band:#0a1330; --band-cell:#1f3266; --band-num:#8fa2d1; --tile:#e7ecf6; --tile-ink:#0f1f4a; --stop:#56607a; --first:#e9c04a; --first-ink:#0f1524; --ans-fill:#3557a8; color-scheme:dark}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.cell:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#app{height:100%;display:flex;flex-direction:column;max-width:640px;margin:0 auto}
header{display:flex;align-items:center;gap:8px;padding-block:calc(10px + env(safe-area-inset-top,0px)) 8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line)}
.brand{flex:1;min-width:0;cursor:pointer}
.brand .sub::after{content:" ▾"}
.brand h1{font-family:var(--f-display);font-weight:400;font-size:1.2rem;line-height:1.1;margin:0;letter-spacing:.005em}
.brand .sub{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:1rem;padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--ink)}
.iconbtn{border:1px solid var(--line);background:var(--paper);border-radius:999px;height:36px;min-width:36px;padding:0 10px;font-weight:700;font-size:.9rem;flex:none}
.timer{flex:none}
.iconbtn svg{display:block;width:14px;height:14px;fill:currentColor}
.iconbtn{display:inline-flex;align-items:center;justify-content:center}
main{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-block:16px 24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin:0 0 8px}
.qband{background:var(--band);padding-block:10px 12px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));--qs:clamp(22px,calc((100vw - 44px) / 13.4),38px)}
.quote{display:flex;flex-wrap:wrap;gap:5px var(--qs);justify-content:center}
.qband{max-height:44vh;overflow-y:auto}
.brand h1{white-space:nowrap}
@media (max-width:380px){.brand h1{font-size:1.02rem}.iconbtn{padding:0 8px;height:34px;min-width:34px;font-size:.85rem}.timer{padding:5px 8px;font-size:.9rem}header{gap:6px}}
@media (max-height:720px){.key{height:42px!important}.gword{height:42px!important}.row{gap:4px}.kb{gap:5px!important}}
.cell .n,.timer,.prog,.stat b{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.quote .cell{width:var(--qs);height:var(--qs);border:0;border-radius:4px;background:var(--band-cell);color:var(--tile-ink);font-size:calc(var(--qs) * .58)}
.quote .cell .n{position:static;font-size:calc(var(--qs) * .36);color:var(--band-num)}
.quote .cell .v{margin:0}
.quote .cell.filled{background:var(--tile)}
.quote .cell.filled .n{display:none}
.quote .cell.inword:not(.filled){outline:2px solid var(--first);outline-offset:-2px;background:var(--band-cell)}
.quote .stop{width:var(--qs);height:var(--qs);border-radius:4px;background:var(--stop);color:var(--band);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(var(--qs) * .6)}
.qword{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;max-width:100%}

.cell{position:relative;width:var(--cs);height:calc(var(--cs) + 6px);border:1.5px solid var(--cell-line);border-radius:5px;background:var(--cell);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(var(--cs) * .5);text-transform:uppercase;padding:0;user-select:none;transition:background-color .12s}
.cell .n{position:absolute;top:1px;left:2px;font-size:10px;font-weight:400;color:var(--muted);line-height:1}
.cell .c{position:absolute;bottom:1px;right:2px;font-size:8.5px;font-weight:700;color:var(--muted);line-height:1}
.cell .v{line-height:1;margin-top:4px}
.cell.inword{background:var(--word)}
.cell.sel{background:var(--sel);color:var(--sel-ink);border-color:var(--sel)}
.cell.sel .n,.cell.sel .c{color:var(--sel-ink)}
.cell.wrong .v{color:var(--bad)}
.cell.wrong{border-color:var(--bad)}
.cell.revealed .v{color:var(--reveal)}
.cell.sel.revealed .v{color:var(--sel-ink);text-decoration:underline}
.cell.locked{cursor:default}
.clues{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.clue{display:grid;grid-template-columns:1fr;gap:4px 10px;align-items:start;padding:8px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.clue.active{background:var(--paper);border-color:var(--line)}
.clue .lt{font-family:var(--f-display);font-size:1.35rem;line-height:1.2;color:var(--accent);text-align:center}
.clue .txt{min-width:0;font-size:1.02rem;line-height:1.35;cursor:pointer}
.clue .diff{display:inline-block;margin-left:6px;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.clue .diff i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-right:2px;opacity:.35}
.clue .diff i.on{opacity:1}
.clue .ans{grid-column:1;display:flex;flex-wrap:wrap;gap:2px}
.clue .ans .cell .n{top:auto;bottom:2px;left:auto;right:3px;font-size:9px}
.clue .ans .cell.filled{font-size:calc(var(--cs) * .62)}
.clue .ans .cell.filled .n{display:none}
.clue .ans .cell.filled .v{margin-top:0}
.clue .ans .cell.first{background:var(--first);border-color:var(--first);color:var(--first-ink)}
.clue .ans .cell.first .n{color:var(--first-ink)}
.clue .ans .cell.filled:not(.first){background:var(--ans-fill);border-color:var(--ans-fill);color:#fff}
.clue .ans .cell.filled:not(.first) .n{color:var(--band-num)}
.clue .ans .cell.revealed:not(.first) .v{color:#fff;text-decoration:underline}

.note{font-size:.85rem;color:var(--muted);text-align:center;margin:0}
.bottom{border-top:1px solid var(--line);background:var(--paper);padding-block:8px calc(6px + env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.guess{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gword{flex:1;min-width:0;height:48px;border:1.5px solid var(--cell-line);border-radius:10px;background:var(--cell);display:flex;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:1.35rem;letter-spacing:.06em;overflow:hidden}
.gword .ph{font-weight:400;font-size:1rem;letter-spacing:0;color:var(--muted)}
.gword{cursor:text}.gword .gl{padding:6px 0}
.gword .caret{width:2px;height:26px;background:var(--accent);animation:blink 1s steps(1) infinite}
.gbtn{border:0;border-radius:10px;height:48px;padding:0 18px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:1rem}
.guess.bad .gword{border-color:var(--bad);color:var(--bad);animation:shake .35s}
.guess.good .gword{border-color:var(--good);color:var(--good)}
@keyframes blink{50%{opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.cell.found{border-color:var(--accent)}
.cell.flash{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.12)}}
.clue.ok .txt{color:var(--muted)}
.clue.ok:not(.active){opacity:.8}
#app.paused .qband,#app.paused main{filter:blur(10px)}
.guess.good .gword{animation:none}
.kb{display:flex;flex-direction:column;gap:6px;user-select:none}
.guess,.gword,.kb,.key,.cell,.qband,.prog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.row{display:flex;gap:5px;justify-content:center}
.key{flex:1;max-width:46px;height:50px;border:0;border-radius:7px;background:var(--key);color:var(--key-ink);font-weight:700;font-size:1.1rem;padding:0;touch-action:manipulation}
.key:active{background:var(--accent-soft)}
.key.wide{max-width:70px;flex:1.5;font-size:1rem}
.sheet-bg{position:fixed;inset:0;background:rgba(8,14,30,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--paper);color:var(--ink);width:100%;max-width:640px;border-radius:16px 16px 0 0;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));max-height:88%;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sheet>*{flex:none}
.sheet h2{font-family:var(--f-display);font-weight:400;font-size:1.6rem;margin:0;text-wrap:balance}
.sheet p{margin:0;line-height:1.45}
.sheet ul{margin:0;padding-left:20px;line-height:1.45;display:flex;flex-direction:column;gap:6px}
.hist h3{font-family:var(--f-display);font-weight:400;font-size:1.15rem;margin:0 0 4px}
.hist p{color:var(--ink);line-height:1.5}
.prog{display:none}
.quote .cell.wave{animation:pop .5s}
.key.pressed{transform:scale(.94)}
.btn.sticky{position:sticky;bottom:0;box-shadow:0 10px 0 var(--paper),0 -14px 14px var(--paper)}
@media (max-height:720px){main .label{display:none}}
.btn{border:0;border-radius:12px;padding:14px 16px;font-weight:700;font-size:1rem;text-align:left;background:var(--key);color:var(--key-ink);display:flex;flex-direction:column;gap:2px}
.btn small{font-weight:400;color:var(--muted);font-size:.85rem}
.btn.primary{background:var(--accent);color:var(--accent-ink);text-align:center}
.btn.danger{color:var(--bad)}
.btn.danger.confirm{background:var(--bad);color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:default}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:center}
.stat{background:var(--bg);border-radius:10px;padding:10px 4px}
.stat b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.solved-quote{font-family:var(--f-display);font-size:1.3rem;line-height:1.35;margin:0}
.solved-quote + .src{color:var(--muted);margin-top:-6px}
.srcrow{margin:4px 0 14px}.srclab{display:block;color:var(--muted);font-size:.9rem;margin-bottom:6px}.srctiles{display:flex;flex-wrap:wrap;gap:4px 14px}.srcw{display:flex;gap:3px}.srct{width:min(30px,calc((100vw - 72px) / var(--n) - 3px));height:34px;border-radius:5px;background:var(--first);color:var(--first-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.pvtag{display:none;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:middle}
body.preview .pvtag{display:inline-block}
.review{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px}
.review h3{margin:0;font-size:1rem}
.stars{display:flex;gap:6px;justify-content:center}
.star{font-size:2rem;line-height:1;background:none;border:0;color:var(--line);padding:4px}
.star.on{color:#f2c94c}
.review textarea,.review input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;background:var(--bg);color:var(--ink);box-sizing:border-box}
.review details{font-size:.9rem}
.review .pc{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.review .pc span{font-weight:700;font-size:.8rem;color:var(--muted)}
.share .bars{color:var(--accent);font-size:1.25rem;letter-spacing:2px;line-height:1.2}
.share{user-select:text;-webkit-user-select:text}
.share{font-family:var(--f-body);white-space:pre-wrap;background:var(--bg);border-radius:10px;padding:12px 14px;font-size:1rem;line-height:1.5;text-align:center;width:100%;border:1px solid var(--line);color:var(--ink);resize:none}
.intro{color:var(--muted)}
.demo{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.demo .qband{--qs:30px;max-height:none;padding:12px 10px}
.demo .clue{cursor:default;padding:10px 12px 6px;--cs:34px}
.demo .clue .txt{cursor:default}
.demo .cell{cursor:default}
.demo .cap{font-size:.92rem;color:var(--muted);padding:0 12px 12px;margin:0;line-height:1.4}
.demo .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--band-num);font-weight:700;margin:0 0 8px;text-align:center}
.done-sub{font-size:1.05rem}
.stats.three{grid-template-columns:repeat(3,1fr)}
.next{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted)}
.next .clock{font-size:1.6rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.next .btn{align-self:stretch}
.sheet .fine{display:flex;justify-content:center;gap:20px;font-size:.9rem}
.sheet .fine a{color:var(--muted)}
.legend{font-size:.85rem;color:var(--muted);text-align:center;margin:-6px 0 0}
.toast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700;font-size:.95rem;z-index:30;max-width:calc(100% - 32px);text-align:center}
.loading{margin:auto;color:var(--muted)}
.nojs{position:fixed;inset:0;margin:0;padding:24px;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;z-index:40}
@media (min-width:560px){.cell .n,.cell .c{font-size:10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}