:root{--inkt: #1b1420;--vlak: #241a2e;--vlak-op: #2f2340;--rand: #3a2d47;--tekst: #efe9f2;--gedempt: #a394b3;--goed: #3fb984;--aanwezig: #e0a53d;--afwezig: #4a3d57;--accent: #b57bff}*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:radial-gradient(120% 120% at 50% 0%,#241a2e 0%,var(--inkt) 60%);color:var(--tekst);font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;overflow:hidden}.scherm{height:100%;max-width:480px;margin:0 auto;padding:14px 12px 18px;display:flex;flex-direction:column;align-items:center;gap:14px}.laden,.fout{margin-top:40vh;color:var(--gedempt)}.fout{color:#ff8a8a}.kop{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.speler{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gedempt);min-width:0}.speler span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0}.avatar-leeg{display:grid;place-items:center;background:var(--accent);color:var(--inkt);font-weight:700;text-transform:uppercase}.titel{font-size:22px;font-weight:800;letter-spacing:.12em}.kop-rechts{justify-self:end;display:flex;align-items:center;gap:8px}.teller{color:var(--gedempt);font-variant-numeric:tabular-nums;font-size:14px}.teller-knop{background:none;border:none;font-size:18px;line-height:1;cursor:pointer;padding:2px}.gedempt-tekst{color:var(--gedempt);font-size:13px}.melding{position:absolute;top:64px;background:var(--tekst);color:var(--inkt);padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px;z-index:5}.bord{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:min(330px,82vw);aspect-ratio:5 / 6}.rij{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.vak{display:grid;place-items:center;border:2px solid var(--rand);border-radius:8px;background:transparent;font-size:clamp(20px,7vw,30px);font-weight:700;text-transform:uppercase;color:var(--tekst);-webkit-user-select:none;user-select:none}.vak.gevuld{border-color:var(--gedempt);animation:pop .12s ease-out}.st-goed{background:var(--goed);border-color:var(--goed);color:#0d2a1c}.st-aanwezig{background:var(--aanwezig);border-color:var(--aanwezig);color:#3a2600}.st-afwezig{background:var(--afwezig);border-color:var(--afwezig);color:var(--tekst)}.vak.onthul{animation:flip .5s ease forwards}@keyframes pop{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.rammel{animation:rammel .4s ease}@keyframes rammel{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.einde{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--tekst)}.einde strong{color:var(--accent)}.knop{background:var(--accent);color:var(--inkt);border:none;border-radius:10px;padding:10px 20px;font-size:15px;font-weight:700;cursor:pointer}.knop:hover{filter:brightness(1.08)}.toetsenbord{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:auto}.toetsrij{display:flex;justify-content:center;gap:5px}.toets{flex:1;max-width:40px;height:52px;border:none;border-radius:7px;background:var(--vlak-op);color:var(--tekst);font-size:16px;font-weight:600;text-transform:uppercase;cursor:pointer}.toets:active{transform:translateY(1px)}.toets-breed{max-width:58px;font-size:18px}.toets.st-goed{background:var(--goed);color:#0d2a1c}.toets.st-aanwezig{background:var(--aanwezig);color:#3a2600}.toets.st-afwezig{background:var(--afwezig);color:var(--gedempt)}.modaal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a060e99;display:grid;place-items:center;z-index:10;padding:16px}.modaal{width:min(360px,100%);max-height:80vh;overflow-y:auto;background:var(--vlak);border:1px solid var(--rand);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}.modaal-kop{display:flex;align-items:center;justify-content:space-between}.modaal-kop h2{font-size:18px}.modaal-sluit{background:none;border:none;color:var(--gedempt);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}.groep-streak{color:var(--accent);font-size:14px;font-weight:600}.periode-knoppen{display:flex;gap:6px}.periode-knop{flex:1;background:var(--vlak-op);color:var(--gedempt);border:none;border-radius:8px;padding:7px 0;font-size:13px;font-weight:600;cursor:pointer}.periode-knop.actief{background:var(--accent);color:var(--inkt)}.leaderboard-lijst{display:flex;flex-direction:column;gap:8px;list-style:none}.leaderboard-lijst li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px}.leaderboard-lijst li.eigen{background:var(--vlak-op)}.rang{width:20px;color:var(--gedempt);font-variant-numeric:tabular-nums;font-size:13px}.avatar-klein{width:24px;height:24px;font-size:12px}.naam{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.streak{font-size:12px;color:var(--gedempt)}.punten{font-weight:700;font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){.vak.onthul,.vak.gevuld,.rammel{animation:none}}