@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");:root{--paars:#a78bfa;--blauw:#60a5fa;--groen:#34d399;--geel:#fbbf24;--roze:#fb7185;--rose:#f472b6;--tekst:#2d2a45;--tekst-zacht:#6b6889;--wit:#fff;--kaart:#fff;--rand:#e9e7f5;--goed:#16a34a;--fout:#ef4444;--radius:22px;--radius-klein:14px;--schaduw:0 10px 30px rgba(80,70,160,.12);--schaduw-knop:0 6px 0 rgba(0,0,0,.08);--font:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0}body{color:var(--tekst);background:linear-gradient(160deg,#eef2ff,#fdf2f8 50%,#ecfeff);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;font-size:18px;line-height:1.5}body,button{font-family:var(--font)}button{cursor:pointer}a{text-decoration:none;color:inherit}.scherm{max-width:860px;margin:0 auto;padding:24px 18px 60px;display:flex;flex-direction:column;gap:22px}.scherm--start{max-width:560px;align-items:stretch;padding-top:40px}.logo{text-align:center}.logo-emoji{font-size:56px;display:block}.logo-titel{font-size:44px;font-weight:900;margin:6px 0 2px;background:linear-gradient(90deg,var(--paars),var(--blauw),var(--groen));-webkit-background-clip:text;background-clip:text;color:transparent}.logo-onder{margin:0;color:var(--tekst-zacht);font-weight:700}.kaart{background:var(--kaart);border-radius:var(--radius);box-shadow:var(--schaduw);padding:28px 26px;display:flex;flex-direction:column;gap:18px}.kaart-titel{margin:0;font-size:28px;font-weight:800;text-align:center}.kaart-titel--feest{color:var(--groen)}.kaart-onder{margin:0}.kaart-onder,.leeg{text-align:center;color:var(--tekst-zacht)}.knop{border:none;border-radius:var(--radius-klein);padding:14px 22px;font-size:18px;font-weight:800;background:#eef0fb;color:var(--tekst);box-shadow:var(--schaduw-knop);transition:transform .08s ease,filter .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px}.knop:hover{filter:brightness(1.03)}.knop:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.08)}.knop--groot{padding:18px 26px;font-size:20px}.knop--primair{background:linear-gradient(180deg,var(--paars),#8b6ef0);color:#fff}.knop--succes{background:linear-gradient(180deg,var(--groen),#1fb87f);color:#fff}.knop--terug{background:#f1f1f7;color:var(--tekst-zacht)}.knop--klein{padding:10px 16px;font-size:15px}.knoprij{display:flex;gap:12px;flex-wrap:wrap}.knoprij--midden{justify-content:center}.profiel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:14px;gap:14px}.profiel-tegel{position:relative}.profiel-knop{width:100%;border:2px solid var(--rand);background:#fff;border-radius:var(--radius-klein);padding:18px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .1s ease,border-color .15s ease}.profiel-knop:hover{transform:translateY(-3px);border-color:var(--paars)}.avatar{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff}.profiel-naam{font-weight:800;font-size:17px;word-break:break-word}.verwijder-knop{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:none;background:#fde2e2;color:#d44;font-weight:900;font-size:13px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.12)}.pinvelden{gap:14px}.pinvak,.pinvelden{display:flex;justify-content:center}.pinvak{width:52px;height:60px;border-radius:14px;border:3px solid var(--rand);align-items:center;font-size:30px;color:var(--paars);background:#fafaff}.pinvak--vol{border-color:var(--paars)}.pinpad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px;max-width:280px;margin:0 auto}.pinknop{border:none;background:#f1f1fb;border-radius:16px;padding:16px 0;font-size:24px;font-weight:800;color:var(--tekst);box-shadow:var(--schaduw-knop);transition:transform .08s ease}.pinknop:active{transform:translateY(2px)}.pinknop--wis{background:#fde9e9;color:#d44}.veldlabel{font-weight:800;font-size:16px}.tekstveld{font-family:var(--font);font-size:20px;padding:14px 16px;border-radius:14px;border:3px solid var(--rand);outline:none}.tekstveld:focus{border-color:var(--paars)}.melding{border-radius:14px;padding:12px 16px;font-weight:700;text-align:center}.melding--waarschuwing{background:#fff4d6;color:#8a6d00}.melding--fout{background:#fde2e2;color:#c0392b}.melding--oefen{background:#e7f0ff;color:#2b5c9e}.kop{justify-content:space-between}.kop,.kop-welkom{display:flex;align-items:center;gap:12px}.kop-emoji{font-size:38px}.kop-hoi{font-size:24px;font-weight:900}.kop-sub{color:var(--tekst-zacht);font-weight:700;font-size:15px}.kop--les{background:#fff;border-radius:var(--radius-klein);box-shadow:var(--schaduw);padding:10px 14px}.kop-lestitel{font-weight:800;text-align:center;flex:1 1}.verdergaan{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,var(--paars),var(--blauw));color:#fff;border-radius:var(--radius);padding:20px 24px;box-shadow:var(--schaduw);transition:transform .1s ease}.verdergaan:hover{transform:translateY(-3px)}.verdergaan-label{font-weight:700;opacity:.9;font-size:15px}.verdergaan-titel{font-weight:900;font-size:22px}.verdergaan-pijl{font-size:26px}.lessenlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.les-link{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--radius-klein);padding:16px 18px;box-shadow:var(--schaduw);border:3px solid transparent;transition:transform .1s ease,border-color .15s ease}.les-link:hover{transform:translateY(-2px);border-color:var(--blauw)}.les-link--uit{opacity:.55;cursor:default}.les-rij--voltooid .les-link{border-color:#bbf0d6;background:#f4fdf8}.les-nummer{width:46px;height:46px;border-radius:50%;background:#eef0fb;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;flex-shrink:0}.les-rij--voltooid .les-nummer{background:#d7f7e7}.les-midden{flex:1 1}.les-titel{font-weight:800;font-size:18px}.les-stats{font-size:14px;font-weight:700}.les-icoon,.les-stats{color:var(--tekst-zacht)}.les-icoon{font-size:22px}.les-rij--voltooid .les-icoon{color:var(--groen)}.kaart--intro{align-items:center;text-align:center}.intro-emoji{font-size:54px}.intro-uitleg{font-size:20px;margin:0;max-width:540px}.intro-doel{margin:0;color:var(--tekst-zacht);font-weight:700}.nieuwe-toetsen{gap:12px;flex-wrap:wrap}.nieuwe-toetsen,.toets-chip{display:flex;justify-content:center}.toets-chip{background:linear-gradient(180deg,var(--geel),#f6ab12);color:#5a3d00;font-weight:900;font-size:26px;min-width:52px;height:52px;border-radius:14px;align-items:center;padding:0 10px;box-shadow:0 4px 0 rgba(0,0,0,.1)}.oefen{display:flex;flex-direction:column;align-items:center;gap:20px}.oefen-voortgang{font-weight:800;color:var(--tekst-zacht)}.typeveld{position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--schaduw);padding:30px 26px;width:100%;text-align:center;font-size:clamp(28px,6vw,44px);font-weight:800;letter-spacing:4px;line-height:1.6;word-break:break-word;min-height:110px}.tk{display:inline-block;border-radius:6px;padding:0 2px;transition:color .1s ease,background .1s ease}.tk--todo{color:#c7c4dd}.tk--goed{color:var(--goed)}.tk--nu{color:var(--tekst);background:#fff3c4;box-shadow:0 4px 0 #fbbf24;animation:knipper 1s ease-in-out infinite}.tk--fout{color:#fff;background:var(--fout)}.tk--spatie{color:#d7d4ea}.tk--goed.tk--spatie{color:var(--goed)}@keyframes knipper{0%,to{box-shadow:0 4px 0 #fbbf24}50%{box-shadow:0 4px 0 #f59e0b;transform:translateY(-1px)}}.verborgen-input{position:absolute;opacity:0;width:2px;height:2px;left:50%;bottom:0;border:none}.oefen-hint{color:var(--tekst-zacht);font-size:14px;font-weight:700;margin:0;text-align:center}.kb{flex-direction:column;align-items:center;width:100%}.kb,.kb-row{display:flex;gap:8px}.kb-key,.kb-row{justify-content:center}.kb-key{min-width:clamp(30px,7.5vw,50px);height:clamp(38px,8vw,52px);border-radius:12px;background:#fff;border-bottom:4px solid var(--vinger,#ddd);box-shadow:0 2px 6px rgba(80,70,160,.1);display:flex;align-items:center;font-weight:800;font-size:clamp(15px,3.4vw,20px);color:var(--tekst);text-transform:lowercase;padding:0 6px}.kb-key--space{min-width:clamp(160px,40vw,300px);font-size:14px;color:var(--tekst-zacht)}.kb-key--dim{opacity:.35}.kb-key--next{color:#fff;transform:translateY(-3px) scale(1.06);box-shadow:0 8px 16px rgba(0,0,0,.18);border-bottom-color:rgba(0,0,0,.15);animation:stuiter .8s ease-in-out infinite}@keyframes stuiter{0%,to{transform:translateY(-3px) scale(1.06)}50%{transform:translateY(-6px) scale(1.09)}}.handen{gap:clamp(20px,8vw,60px);justify-content:center;padding:4px 0}.hand,.handen{display:flex;align-items:flex-start}.hand{gap:6px;padding:10px;background:hsla(0,0%,100%,.6);border-radius:18px}.vinger{width:clamp(14px,4vw,22px);border-radius:12px;transition:background .12s ease,box-shadow .12s ease,transform .12s ease}.vinger--actief{box-shadow:0 0 0 3px #fff,0 0 18px var(--vinger);transform:translateY(-4px)}.kaart--uitslag{align-items:center;text-align:center;position:relative}.uitslag-tekst{margin:0;font-size:19px;max-width:500px}.meters{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.meter{background:#f4f5fe;border-radius:var(--radius-klein);padding:18px 28px;min-width:150px}.meter-getal{font-size:40px;font-weight:900;color:var(--paars)}.meter-label{color:var(--tekst-zacht);font-weight:700;font-size:14px}.starburst{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.starburst-main{font-size:80px;animation:pop .6s cubic-bezier(.2,1.4,.5,1) both}@keyframes pop{0%{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}.starburst-spark{position:absolute;font-size:20px;left:50%;top:50%;transform:rotate(var(--hoek)) translateY(-10px);animation:vonk .8s ease-out var(--delay) both}@keyframes vonk{0%{opacity:0;transform:rotate(var(--hoek)) translateY(-10px) scale(.3)}60%{opacity:1;transform:rotate(var(--hoek)) translateY(-64px) scale(1)}to{opacity:0;transform:rotate(var(--hoek)) translateY(-78px) scale(.6)}}.kb-key--klik{cursor:pointer;font-family:var(--font);border-top:none;border-left:none;border-right:none}.kb-key--klik:active{transform:translateY(2px)}.spel-knop{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--groen),var(--blauw));color:#fff;border-radius:var(--radius);padding:18px 22px;box-shadow:var(--schaduw);transition:transform .1s ease}.spel-knop:hover{transform:translateY(-3px)}.spel-knop-emoji{font-size:34px}.spel-knop-titel{font-weight:900;font-size:21px}.spel-knop-sub{font-weight:700;opacity:.92;font-size:15px}.spel-uitleg{text-align:center;color:var(--tekst-zacht);font-weight:700;margin:0}.niveau-kiezer{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.niveau-chip{border:2px solid var(--rand);background:#fff;border-radius:999px;padding:8px 16px;font-weight:800;font-size:15px;color:var(--tekst-zacht);box-shadow:var(--schaduw-knop)}.niveau-chip--aan{background:var(--paars);border-color:var(--paars);color:#fff}.niveau-letters{text-align:center;font-weight:800;color:var(--tekst-zacht);display:flex;gap:6px;flex-wrap:wrap}.mini-toets,.niveau-letters{justify-content:center;align-items:center}.mini-toets{display:inline-flex;min-width:28px;height:28px;border-radius:8px;background:#eef0fb;color:var(--tekst);font-weight:900;padding:0 6px}.spel{flex-direction:column;gap:16px}.spel,.spel-balk{display:flex;align-items:center;width:100%}.spel-balk{justify-content:space-between;max-width:640px;font-weight:900;font-size:22px}.spel-levens{display:flex;gap:4px;font-size:20px}.hart--leeg{opacity:.6}.spel-top{font-size:16px;color:var(--tekst-zacht);font-weight:800}.speelveld{position:relative;width:100%;max-width:640px;height:clamp(300px,52vh,440px);background:linear-gradient(180deg,#f0f5ff,#eafaf3);border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden}.speelveld-grond{position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(45deg,#cbd5f5,#cbd5f5 8px,#dbe3fb 0,#dbe3fb 16px)}.vallende{position:absolute;transform:translate(-50%,-50%);transition:top .05s linear;display:inline-flex;align-items:center;gap:1px;padding:8px 12px;border-radius:16px;background:#fff;border:3px solid #e4e8f7;font-weight:900;font-size:clamp(20px,4.6vw,28px);text-transform:lowercase;box-shadow:0 4px 10px rgba(80,70,160,.18);white-space:nowrap}.vallende--actief{border-color:var(--paars);box-shadow:0 0 0 3px rgba(167,139,250,.35),0 6px 14px rgba(80,70,160,.25);transform:translate(-50%,-50%) scale(1.06)}.vl{display:inline-block}.vl--gedaan{color:#c9c6dd!important;text-decoration:line-through}.spel-over{position:absolute;inset:0;background:hsla(0,0%,100%,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}.spel-over-emoji{font-size:52px}.spel-over-titel{margin:0;font-size:26px;font-weight:900;color:var(--groen)}.spel-over-tekst{margin:0;font-size:19px;max-width:420px}@media (max-width:520px){body{font-size:16px}.kaart{padding:22px 16px}.typeveld{letter-spacing:2px;padding:24px 14px}.kop-hoi{font-size:20px}}@media (prefers-reduced-motion:reduce){.kb-key--next,.starburst-main,.starburst-spark,.tk--nu{animation:none}}