*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--kleur-goed:#22c55e;--kleur-fout:#ef4444;--font:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif}body{font-family:var(--font);color:#1e293b;background:#fffbf0;min-height:100vh;font-size:18px}#root{min-height:100vh}button{font-family:var(--font)}.terug-knop{color:#475569;white-space:nowrap;cursor:pointer;background:#ffffffe6;border:2px solid #e2e8f0;border-radius:12px;align-items:center;padding:10px 18px;font-size:1rem;font-weight:700;text-decoration:none;transition:background .15s,transform .1s;display:inline-flex}.terug-knop:hover{background:#fff;transform:translate(-2px)}@keyframes correctPop{0%{transform:scale(1)}30%{transform:scale(1.18)}70%{transform:scale(.96)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}15%{transform:translate(-12px)}35%{transform:translate(12px)}55%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.home{flex-direction:column;align-items:center;min-height:100vh;padding:48px 24px;display:flex}.home-header{text-align:center;margin-bottom:52px;animation:.5s fadeIn}.home-header h1{color:#1e293b;margin-bottom:10px;font-size:3rem;font-weight:800}.home-header p{color:#64748b;font-size:1.4rem}.spellen-raster{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;width:100%;max-width:960px;display:grid}.spel-tegel{background:var(--tacktergrond);border:3px solid var(--tkleur);color:#1e293b;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:44px 28px;text-decoration:none;transition:transform .15s,box-shadow .15s;animation:.5s fadeIn;display:flex;box-shadow:0 6px 20px #00000017}.spel-tegel:hover,.spel-tegel:focus{outline:none;transform:translateY(-8px)scale(1.02);box-shadow:0 16px 36px #00000024}.tegel-icon{font-size:4.5rem;line-height:1}.tegel-titel{color:var(--tkleur);font-size:2rem;font-weight:800}.tegel-beschrijving{color:#64748b;text-align:center;font-size:1.1rem}.niveau-keuze{flex-direction:column;min-height:100vh;padding:20px;display:flex}.niveau-keuze-terug{align-self:flex-start}.niveau-keuze-inhoud{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;animation:.4s fadeIn;display:flex}.niveau-spel-icon{font-size:5rem;line-height:1}.niveau-keuze-inhoud h1{color:#1e293b;font-size:2.5rem;font-weight:800}.niveau-keuze-inhoud p{color:#64748b;font-size:1.3rem}.niveau-knoppen{flex-direction:column;gap:16px;width:100%;max-width:360px;margin-top:8px;display:flex}.niveau-knop{border:3px solid var(--nkleur);color:var(--nkleur);cursor:pointer;background:#fff;border-radius:20px;padding:20px 32px;font-size:1.4rem;font-weight:700;transition:transform .1s,background .15s,color .15s;box-shadow:0 4px 12px #0000001a}.niveau-knop:hover{background:var(--nkleur);color:#fff;transform:scale(1.04)}.niveau-knoppen.compact .niveau-knop{padding:14px 24px;font-size:1.25rem}.eindscherm{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.eindscherm-inhoud{text-align:center;flex-direction:column;align-items:center;gap:20px;animation:.5s fadeIn;display:flex}.eindscherm-emoji{font-size:5rem;line-height:1;animation:.6s correctPop}.eindscherm-inhoud h1{color:#1e293b;font-size:2.6rem;font-weight:800}.eindscherm-score{color:#64748b;font-size:1.5rem}.eindscherm-sterren{letter-spacing:4px;font-size:2.5rem}.eindscherm-knoppen{flex-direction:column;gap:14px;width:100%;max-width:340px;margin-top:12px;display:flex}.knop-opnieuw,.knop-terug{font-family:var(--font);cursor:pointer;border:none;border-radius:20px;padding:18px 32px;font-size:1.3rem;font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 14px #00000026}.knop-opnieuw{color:#fff;background:#22c55e}.knop-terug{color:#fff;background:#6366f1}.knop-opnieuw:hover,.knop-terug:hover{transform:scale(1.04);box-shadow:0 8px 22px #0003}.feedback-balk{z-index:200;background:#fff;border-top-left-radius:24px;border-top-right-radius:24px;flex-direction:column;align-items:center;gap:10px;padding:18px 24px 24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(110%);box-shadow:0 -4px 20px #0000001a}.feedback-zichtbaar{transform:translateY(0)}.feedback-goed-inhoud{align-items:center;gap:12px;display:flex}.feedback-emoji{font-size:2.2rem;line-height:1;animation:.45s forwards correctPop}.feedback-tekst{color:#22c55e;font-size:2rem;font-weight:900}.volgende-knop{font-family:var(--font);color:#fff;cursor:pointer;background:#6366f1;border:none;border-radius:18px;width:100%;max-width:420px;padding:16px 0;font-size:1.3rem;font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 14px #6366f159}.volgende-knop:hover{transform:scale(1.03);box-shadow:0 6px 22px #6366f180}.spel-container{flex-direction:column;min-height:100vh;display:flex}.spel-header{z-index:10;background:#fff;align-items:center;gap:16px;padding:14px 20px;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #00000012}.voortgang-balk-wrapper{flex:1}.voortgang-label{color:#64748b;margin-bottom:4px;font-size:.85rem;font-weight:600}.voortgang-balk{background:#e2e8f0;border-radius:7px;height:14px;overflow:hidden}.voortgang-vulling{background:linear-gradient(90deg,#22c55e,#86efac);border-radius:7px;height:100%;transition:width .5s}.spel-inhoud{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:28px;padding:32px 24px 160px;display:flex}.spel-instructie{color:#475569;text-align:center;font-size:1.4rem;font-weight:600}.antwoord-knoppen{flex-wrap:wrap;justify-content:center;gap:14px;width:100%;max-width:600px;display:flex}.antwoord-knop{font-family:var(--font);color:#1e293b;cursor:pointer;background:#fff;border:3px solid #cbd5e1;border-radius:18px;flex:110px;max-width:220px;padding:18px 28px;font-size:1.6rem;font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 12px #00000014}.antwoord-knop:hover:not(:disabled){border-color:#6366f1;transform:scale(1.06);box-shadow:0 8px 20px #00000024}.antwoord-knop:disabled{cursor:default}.antwoord-knop.correct{background:var(--kleur-goed);border-color:var(--kleur-goed);color:#fff;animation:.45s forwards correctPop}.antwoord-knop.fout{background:var(--kleur-fout);border-color:var(--kleur-fout);color:#fff;animation:.5s forwards wrongShake}.tellen-emojis{background:#fff;border:2px solid #e2e8f0;border-radius:24px;flex-wrap:wrap;place-content:center;gap:8px;max-width:520px;min-height:130px;padding:24px;display:flex;box-shadow:0 4px 16px #00000014}.tellen-emoji{font-size:2.4rem;line-height:1}.kleur-vlak{border:3px solid #0000001a;border-radius:28px;flex-shrink:0;width:200px;height:200px;box-shadow:0 8px 28px #0000002e}.kleur-knop{text-transform:capitalize;font-size:1.3rem}.letter-klank-sectie{flex-direction:row;align-items:center;gap:16px;display:flex}.letter-display{color:#8b5cf6;-webkit-user-select:none;user-select:none;background:#fff;border:3px solid #e2e8f0;border-radius:28px;justify-content:center;align-items:center;width:clamp(130px,35vw,170px);height:clamp(130px,35vw,170px);font-size:clamp(4.5rem,18vw,7rem);font-weight:900;line-height:1;display:flex;box-shadow:0 6px 24px #0000001a}.klank-knop{color:#8b5cf6;cursor:pointer;width:66px;height:66px;font-size:1.8rem;font-family:var(--font);background:#fff;border:3px solid #8b5cf6;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .1s,background .15s,color .15s;display:flex;box-shadow:0 4px 12px #0000001a}.klank-knop:hover{color:#fff;background:#8b5cf6;transform:scale(1.08)}.klank-knop:active{transform:scale(.92)}.emoji-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:380px;display:grid}.emoji-knop{cursor:pointer;font-family:var(--font);background:#fff;border:3px solid #cbd5e1;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 4px 12px #00000014}.emoji-knop:hover:not(:disabled){border-color:#8b5cf6;transform:scale(1.04);box-shadow:0 8px 20px #00000024}.emoji-knop:disabled{cursor:default}.emoji-knop.correct{background:var(--kleur-goed);border-color:var(--kleur-goed);animation:.45s forwards correctPop}.emoji-knop.fout{background:var(--kleur-fout);border-color:var(--kleur-fout);animation:.5s forwards wrongShake}.emoji-optie-icon{font-size:clamp(3rem,10vw,4rem);line-height:1}.emoji-optie-woord{color:#475569;font-size:.9rem;font-weight:700}.emoji-knop.correct .emoji-optie-woord,.emoji-knop.fout .emoji-optie-woord{color:#fff}.reken-kaart{background:#fff;border:2px solid #e2e8f0;border-radius:28px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:36px 48px;display:flex;box-shadow:0 6px 24px #0000001a}.reken-getal,.reken-operator,.reken-is,.reken-vraagteken{-webkit-user-select:none;user-select:none;font-size:clamp(3rem,8vw,4.5rem);font-weight:900;line-height:1}.reken-getal,.reken-is{color:#1e293b}.reken-opties{max-width:480px}.reken-knop{flex:90px;min-width:90px;max-width:150px;font-size:2rem;font-weight:900}.icoon-kaart{background:#fff;border:2px solid #e2e8f0;border-radius:28px;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:480px;padding:28px 20px;display:flex;box-shadow:0 6px 24px #0000001a}.icoon-groep{flex-wrap:wrap;justify-content:center;gap:4px;max-width:300px;display:flex}.icoon-item{-webkit-user-select:none;user-select:none;font-size:clamp(2rem,5vw,2.5rem);line-height:1.3}.icoon-symbool{-webkit-user-select:none;user-select:none;font-size:clamp(2.5rem,7vw,3.5rem);font-weight:900;line-height:1}.icoon-uitkomst{align-items:center;gap:8px;display:flex}.icoon-is{color:#1e293b;-webkit-user-select:none;user-select:none;font-size:clamp(2.5rem,7vw,3.5rem);font-weight:900}.icoon-vraagteken{-webkit-user-select:none;user-select:none;font-size:clamp(2.5rem,7vw,3.5rem);font-weight:900}