:root{--bg:#F6F4EE;--ink:#14171F;--mut:#5A6070;--acc:#1F4FD8;--acc2:#E9F0FF;--kaart:#fff;--goed:#1E8E5A;--fout:#C2410C;--lijn:#E3E0D8}
@media (prefers-color-scheme:dark){:root{--bg:#12141A;--ink:#EEF0F5;--mut:#A3A9B8;--acc:#7EA0FF;--acc2:#1E2740;--kaart:#1B1E27;--lijn:#2C303B}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:19px/1.5 "Atkinson Hyperlegible",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
.balk{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;max-width:680px;width:100%;margin:0 auto}
.titel{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:17px}
.lampjes{font-family:"DM Mono",monospace;font-size:18px;background:var(--kaart);border-radius:99px;padding:4px 12px;border:1px solid var(--lijn)}
.lampjes.plop{animation:plop .5s ease}
@keyframes plop{50%{transform:scale(1.35)}}
.scherm{flex:1;max-width:680px;width:100%;margin:0 auto;padding:8px 18px 28px;display:flex;flex-direction:column;gap:18px}
.flaprij{display:flex;gap:14px;align-items:flex-end}
.flaprij .flap{flex:0 0 auto;width:110px}
.ballon{position:relative;background:var(--kaart);border-radius:20px;padding:14px 18px;box-shadow:0 4px 18px rgba(0,0,0,.07);font-size:20px;min-width:0}
.ballon:after{content:"";position:absolute;left:-10px;bottom:22px;border:10px solid transparent;border-right-color:var(--kaart);border-left:0}
.ballon p{margin:0 0 8px}.ballon p:last-child{margin:0}
h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(26px,6vw,34px);line-height:1.15;margin:0;overflow-wrap:anywhere}
.knop{display:block;width:100%;font:inherit;font-weight:700;font-size:21px;padding:16px 20px;border-radius:16px;border:0;background:var(--acc);color:#fff;cursor:pointer;min-height:58px}
.knop:focus-visible,.keuze:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.knop.zacht{background:var(--kaart);color:var(--ink);border:2px solid var(--lijn)}
.keuzes{display:grid;gap:12px}
.keuze{font:inherit;font-size:20px;text-align:left;padding:16px 18px;border-radius:16px;border:2px solid var(--lijn);background:var(--kaart);color:var(--ink);cursor:pointer;display:flex;gap:12px;align-items:center;min-height:58px}
.keuze .ico{font-size:30px}
.keuze.goed{border-color:var(--goed);background:#E7F6EE;color:#0E3B26}
.keuze.mis{border-color:var(--fout);background:#FDEDE4;color:#4A1A06}
.zin{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(26px,7vw,36px);line-height:1.3;background:var(--kaart);border-radius:18px;padding:18px 20px;min-height:90px;overflow-wrap:anywhere}
.zin .nieuw{color:var(--acc);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.leeg{display:inline-block;min-width:3ch;border-bottom:4px dotted var(--acc)}
.kansen{background:var(--kaart);border-radius:18px;padding:16px 18px;display:grid;gap:10px}
.kansen .rij{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:18px}
.kansen .woord{font-weight:700;overflow-wrap:anywhere}
.kansen .staaf{height:16px;background:var(--acc2);border-radius:8px;overflow:hidden}
.kansen .staaf i{display:block;height:100%;background:var(--acc);border-radius:8px;width:0;transition:width .7s ease}
.kansen .tal{font-family:"DM Mono",monospace;font-size:16px;color:var(--mut)}
.klein{font-size:16px;color:var(--mut)}
.leest{font-family:"DM Mono",monospace;background:var(--kaart);border-radius:18px;padding:16px 18px;font-size:17px;line-height:1.7;color:var(--ink)}
.leest .w{opacity:.22;transition:opacity .2s;border-radius:4px}.leest .w.aan{opacity:1}.leest .w.nu{background:var(--acc2);color:var(--acc);font-weight:500}
.teller{font-family:"DM Mono",monospace;font-size:22px;text-align:center}
.uitleg{background:var(--acc2);border-radius:18px;padding:16px 18px}
.uitleg b{color:var(--acc)}
.crash{animation:schud .5s ease 2}
@keyframes schud{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lijstje{margin:0;padding-left:24px}.lijstje li{margin:6px 0}
.voortgang{height:6px;background:var(--lijn)}.voortgang div{height:100%;width:0;background:var(--acc);transition:width .4s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){.flaprij .flap{width:84px}.ballon{font-size:18px}}
.klein .ballon{font-size:19px;color:var(--ink)}
a.knop{text-align:center;text-decoration:none}
/* Klasmodus (?klas=1): zelfde schermen, groter voor het digibord */
html.klas body{font-size:24px}
html.klas .scherm,html.klas .balk{max-width:960px}
html.klas .ballon{font-size:26px}
html.klas .flaprij .flap{width:150px}
html.klas .knop,html.klas .keuze{font-size:26px;min-height:72px}
html.klas .zin{font-size:44px}
.voet{max-width:680px;margin:0 auto;padding:6px 18px 18px;font-size:14px;color:var(--mut)}
.voet a{color:var(--mut)}
.flaprij .flap svg{width:100%;height:auto;display:block}
.linkje{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.voet .linkje{color:var(--mut)}

/* Donkere modus: het accent wordt licht, dus witte knoptekst haalt de contrastnorm niet (WCAG AA). Donkere tekst wel. */
@media (prefers-color-scheme:dark){.knop:not(.zacht){color:#12141A}}

/* Groep 5-6 (?groep=56): alleen onder html.g56, de standaardles verandert niet */
html.g56 .keuze .ico{font-size:56px;line-height:1}
html.g56 .zin{font-size:40px}
html.g56 .keuzes .knop{min-height:80px}
html.g56 .crash{animation-iteration-count:1}
html.g56 .leest{line-height:1.8}
@media (max-width:420px){html.g56 .zin{font-size:32px}}