:root{--papier: #fff8e8;--inkt: #1e1b4b;--hoofdkleur: #f15b79;--hoofdkleur-donker: #cf3858;--succes: #38a169;--waarschuwing: #f59e0b;--fout: #df4b4b;--zacht: #dce7ff;--wit: #fff;--rand: 3px solid var(--inkt);--schaduw: 5px 5px 0 var(--inkt);--radius: 20px}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;font-family:ui-rounded,Nunito,Segoe UI Rounded,system-ui,sans-serif;color:var(--inkt);background-color:var(--papier);background-image:linear-gradient(#f2dcb9 1px,transparent 1px),linear-gradient(90deg,#f2dcb9 1px,transparent 1px);background-size:24px 24px;overscroll-behavior:none}#app{width:100%;max-width:560px}.scherm{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:16px;text-align:center}.scherm:before,.scherm:after{position:absolute;z-index:-1;pointer-events:none;color:#f7c948;font-size:3rem;line-height:1;transform:rotate(-12deg);content:"✦"}.scherm:before{top:-15px;left:-9px}.scherm:after{right:-8px;bottom:9px;transform:rotate(18deg)}h1{margin:0;font-size:clamp(2rem,8vw,3rem);line-height:1.05;overflow-wrap:anywhere}p{margin:0;font-size:1.15rem;overflow-wrap:anywhere}button,.knop{max-width:100%;min-height:56px;padding:12px 20px;font:inherit;font-size:1.2rem;font-weight:800;color:var(--inkt);border:var(--rand);border-radius:var(--radius);background:var(--wit);box-shadow:var(--schaduw);cursor:pointer;touch-action:manipulation;transition:transform .12s ease,box-shadow .12s ease}button:active,.knop:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--inkt)}button:focus-visible,.knop:focus-visible{outline:4px solid #2563eb;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.55;box-shadow:3px 3px 0 var(--inkt)}.knop--hoofd{background:var(--hoofdkleur);color:var(--wit)}.knop--neutraal{background:#f7c948}.knop--zacht{background:var(--zacht)}.kaart{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,7vw,42px);background:var(--wit);border:var(--rand);border-radius:28px;box-shadow:8px 8px 0 var(--inkt)}.startkaart h1 span{display:inline-block;transform:rotate(-12deg)}.kamerskaart{align-items:stretch}.kamerlijst{display:grid;gap:12px}.kamerlijst .knop{display:flex;align-items:center;justify-content:space-between;text-align:left}.kamerlijst small{font-size:1rem;white-space:nowrap}.kamerstatus{padding:18px;font-size:1.25rem;font-weight:900;background:#e1f8e9;border:var(--rand);border-radius:var(--radius)}.woordenlijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:280px;overflow:auto}.woordenlijst .knop{min-height:42px;padding:7px;font-size:.9rem}.woord--gekozen{color:var(--wit);background:var(--succes)}.uitslag{display:flex;flex-direction:column;gap:16px}.tekeningen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tekeningen figure{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:8px;border:2px solid var(--inkt);border-radius:14px;background:var(--papier)}.tekeningen figcaption{font-weight:900}.tekeningen img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--wit);border:2px solid var(--inkt);border-radius:9px}.tekeningen p,.uitslagscores p{padding:8px;font-size:.9rem;font-weight:700}.uitslagscores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.uitslagscores p{margin:0;border:2px solid var(--inkt);border-radius:14px;background:#e1f8e9}.offline-melding,.installhulp,.updatebalk{padding:12px;font-size:1rem;font-weight:750;border:2px solid var(--inkt);border-radius:14px;background:#fff0c7}.installhulp{background:var(--zacht)}.updatebalk{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px;background:#e1f8e9}.updatebalk .knop{min-height:44px;padding:8px 13px;font-size:1rem}.duurkeuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.duurkeuze .knop{min-height:68px}.duurkeuze__knop--gekozen{color:var(--wit);background:var(--succes);box-shadow:3px 3px 0 var(--inkt);transform:translate(2px,2px)}.lerenkaart,.leskaart{gap:16px}.niveaukeuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.niveauknop{min-height:48px;padding:8px;font-size:.95rem}.niveauknop--gekozen{color:var(--wit);background:var(--succes);box-shadow:3px 3px 0 var(--inkt);transform:translate(2px,2px)}.lesraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.leskeuze{display:flex;min-height:0;flex-direction:column;align-items:center;gap:8px;padding:10px;font-size:1rem}.niveaulabel{padding:2px 8px;font-weight:900;border:2px solid var(--inkt);border-radius:99px;background:var(--zacht)}.leerdoel{display:block;font-size:.82rem;font-weight:650;line-height:1.2}.lesmeta{font-size:1rem;font-weight:850}.lestekening{display:block;width:100%;aspect-ratio:1;overflow:visible;background:var(--wit);border:var(--rand);border-radius:14px}.leskaart>.lestekening,.lesbeelden>.lestekening{width:min(100%,30dvh);margin:0 auto;box-shadow:var(--schaduw)}.plaatje-lijn--teken>*{stroke-dasharray:1;stroke-dashoffset:1;animation:tekenles-lijn .6s ease-out forwards;animation-delay:inherit;animation-play-state:inherit}.plaatje-lijn--fade,.plaatje-kleur--animeer{opacity:0;animation:plaatje-fade .6s ease-out forwards}.lestekening--pauze .plaatje-lijn--teken>*,.lestekening--pauze .plaatje-lijn--fade,.lestekening--pauze .plaatje-kleur--animeer{animation-play-state:paused}.leslijn{fill:none;stroke:var(--inkt);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.leslijn--animeer{stroke-dasharray:1;stroke-dashoffset:1;animation:tekenles-lijn .7s ease-out forwards}.lestekening--pauze .leslijn--animeer{animation-play-state:paused}.stapteller{font-size:1rem;font-weight:800}.lesuitleg{min-height:2.6em;padding:10px;font-weight:800;background:#fff0c7;border:2px solid var(--inkt);border-radius:14px}.leswaarom{padding:10px;font-size:1rem;text-align:left;background:#e1f8e9;border:2px solid var(--inkt);border-radius:14px}.klaar{color:#147245;font-weight:900}.lesacties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.leskop{display:flex;align-items:center;justify-content:space-between;gap:12px}.leskop h1{min-width:0}.knop--klein{min-height:44px;padding:6px 12px;font-size:1rem}.knop--tweede{min-height:44px;font-size:1rem;background:var(--wit);box-shadow:3px 3px 0 var(--inkt)}.lesbeelden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.lesbeelden>:only-child{grid-column:1 / -1}.moduskeuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.moduskeuze .knop{border-radius:0}.moduskeuze .knop:first-child{border-radius:var(--radius) 0 0 var(--radius)}.moduskeuze .knop:last-child{margin-left:-3px;border-radius:0 var(--radius) var(--radius) 0}.lesstapbalk{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px}.lesstapbalk--twee{grid-template-columns:repeat(2,minmax(0,1fr))}.lesstapbalk .knop{min-height:48px;padding:6px 8px;font-size:.9rem;white-space:nowrap}.lesextra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.duurkeuze--compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.duurkeuze--compact .knop{min-height:48px;padding:6px;font-size:.95rem}.lesinhoud,.lesvoorbeeld,.lesoefening{display:flex;flex-direction:column;gap:16px}.lesoefening>p{font-weight:800}.lesoefening .tekenvlak{width:min(100%,52dvh)}.stopbevestiging{display:flex;flex-direction:column;gap:16px;padding:16px;background:#fff0c7;border:var(--rand);border-radius:14px}.feedback{padding:12px;font-size:1rem;font-weight:750;border:2px solid var(--inkt);border-radius:14px;background:#fff0c7}.feedback--goed{background:#e1f8e9}.feedback--fout{color:#a63434;background:#fff}.spelbalk{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:stretch}.spelbalk p{position:relative;min-width:0;padding:10px 12px;font-size:clamp(1rem,4.5vw,1.2rem);font-weight:800;background:var(--wit);border:var(--rand);border-radius:16px;box-shadow:3px 3px 0 var(--inkt)}.klok--bijna{color:#8a3300;background:#ffe1ab!important;animation:tik .8s ease-in-out infinite}.geluidknop{min-height:44px;padding:8px 12px;font-size:clamp(.85rem,3.5vw,1rem);white-space:nowrap}@media (max-width: 420px){.spelbalk{grid-template-columns:1fr 1fr}.spelbalk .geluidknop{grid-column:1 / -1}}.melding{box-sizing:border-box;height:calc(2.6em + 24px);overflow:hidden;line-height:1.3;padding:10px 12px;border:2px solid transparent;border-radius:15px;font-weight:750}.melding:not(:empty){border-color:currentColor;background:var(--wit)}.melding-icoon{margin-right:7px;line-height:1}.melding--kijkt{color:#315fbd}.melding--gok{color:#78500d}.melding--fout{color:#a63434}.melding--succes{color:#147245;background:#e1f8e9!important}.stipjes{display:inline-block;vertical-align:top;line-height:1.3;width:1.25em;overflow:hidden;text-align:left;animation:stippen 1s steps(4,end) infinite}.woordkeuze,.acties{display:grid;gap:14px}.woordkeuze,.acties{grid-template-columns:repeat(2,minmax(0,1fr))}.acties--race{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.acties--race .knop--zacht{min-height:48px}.tekenvlak{display:block;width:min(100%,62dvh);aspect-ratio:1 / 1;margin:0 auto;background:var(--wit);outline:var(--rand);outline-offset:0;border-radius:14px;box-shadow:var(--schaduw);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}.score--plop{animation:plop .52s cubic-bezier(.2,1.5,.4,1)}.confetti{position:absolute;top:-19px;right:-5px;color:var(--hoofdkleur);font-size:.9rem;letter-spacing:1px;animation:dwarrel .8s ease-out both}.eindkaart{align-items:stretch}.eindscore{position:relative;padding:16px;font-size:clamp(2rem,10vw,3.25rem);font-weight:900;color:var(--hoofdkleur-donker);background:#fff0c7;border:var(--rand);border-radius:var(--radius)}.eindscore--feest:before,.eindscore--feest:after{position:absolute;top:-13px;color:var(--succes);content:"✦";animation:dwarrel .85s ease-out both}.eindscore--feest:before{left:10%}.eindscore--feest:after{right:10%;color:var(--hoofdkleur);animation-delay:.12s}@keyframes plop{50%{transform:scale(1.13) rotate(-2deg);color:var(--succes)}}@keyframes tik{50%{transform:rotate(-1deg) scale(1.03)}}@keyframes stippen{to{width:0}}@keyframes dwarrel{0%{opacity:0;transform:translateY(8px) rotate(0)}to{opacity:1;transform:translateY(-14px) rotate(120deg)}}@keyframes tekenles-lijn{to{stroke-dashoffset:0}}@keyframes plaatje-fade{to{opacity:1}}@media (max-width: 359px){.woordkeuze,.acties{grid-template-columns:1fr}}@media (max-width: 759px){.leskaart{gap:12px;padding:14px}.lesinhoud,.lesvoorbeeld,.lesoefening{gap:10px}.lesplaatjekader .lesplaatje,.lesbeelden>.lestekening{width:100%}}@media (min-width: 760px){#app{max-width:960px}.lesinhoud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.leskaart>.lestekening,.lesbeelden>.lestekening{width:min(100%,360px)}.lesoefening .tekenvlak{width:min(100%,420px)}}@media (prefers-reduced-motion: reduce){.score--plop,.confetti,.stipjes,.eindscore--feest:before,.eindscore--feest:after,.klok--bijna,.leslijn--animeer,.knop:active,button:active{animation:none;transition:none}.leslijn--animeer{stroke-dashoffset:0}.plaatje-lijn--teken>*{animation:none;stroke-dashoffset:0}.plaatje-lijn--fade,.plaatje-kleur--animeer{animation:none;opacity:1}.confetti{display:none}}.lesplaatje{object-fit:contain;padding:6px}.lesplaatjekader{display:grid;justify-items:center;gap:4px;margin:0}.lesplaatjekader .lesplaatje{width:min(60%,18dvh);aspect-ratio:1;background:var(--wit);border:var(--rand);border-radius:14px;box-shadow:var(--schaduw)}.lesplaatjekader figcaption,.bronvermelding{font-size:.85rem;font-weight:700;text-align:center}.hofkaartlijst{align-items:stretch}.podium,.hoflijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}.hofkaart{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;text-align:center;background:#fff;border:var(--rand);border-radius:var(--radius)}.hofkaart img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px}.hofkaart__positie{font-weight:900;font-size:1.2rem}.hofkaart--goud{background:#ffe58a}.hofkaart--zilver{background:#e4e8ef}.hofkaart--brons{background:#f2c9a0}@media (min-width: 560px){.podium .hofkaart--goud{order:2;transform:translateY(-10px)}.podium .hofkaart--zilver{order:1}.podium .hofkaart--brons{order:3}}