*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#ffe0b2;color:#493d35;font-family:'Comic Sans MS',Arial,sans-serif}header{max-width:1160px;margin:auto;display:flex;align-items:center;gap:16px;padding:12px 20px}header a{color:#765139;font-size:14px}h1{font-size:25px;color:#b94f2a;margin:0 auto}button,input,select{font:inherit;color:inherit}button{background:#fff8ed;border:2px solid #e5c9a5;border-bottom-width:5px;border-radius:14px;padding:9px 16px;cursor:pointer;min-height:44px;touch-action:manipulation;font-weight:bold}button:hover{filter:brightness(.97)}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #006bb6;outline-offset:4px}main{max-width:1120px;margin:0 auto;padding:0 20px 14px}.gebruik-knoppen{min-height:calc(100dvh - 100px);display:flex;align-items:center;justify-content:center;gap:38px}.keuzekaart{width:330px;padding:20px 20px 0;background:white;border:3px solid #ffcc80;border-bottom:9px solid #d99c50;border-radius:28px;overflow:hidden;box-shadow:0 10px 25px #a4672322}.keuzekaart img{display:block;object-fit:contain;width:100%;height:270px}.keuzekaart span{display:block;margin:15px -20px 0;padding:20px 10px;background:#ffcc80;font-size:28px}#alleen{border-color:#a5d6a7;border-bottom-color:#68a06b}#alleen span{background:#c8e6c9}.les{background:white;border:3px solid #ffcc80;border-radius:24px;padding:16px 24px;text-align:center;box-shadow:0 8px 24px #a4672318}.instellingen,form,.bewerkingen{display:flex;align-items:center;justify-content:center;gap:10px}.instellingen{margin-bottom:10px;flex-wrap:wrap}label{font-size:12px;display:grid;gap:3px}input{width:65px;padding:7px;border:1px solid #d5b98f;border-radius:8px;background:white;font-size:20px}form>span{font-size:26px}.bewerk{font-size:34px;line-height:1;min-width:68px;min-height:62px;border-color:transparent;opacity:.55}.bewerk.plus{background:#4caf50;color:white;border-bottom-color:#2e7d32}.bewerk.min{background:#ef5350;color:white;border-bottom-color:#b52f2c}.bewerk[aria-pressed=true]{opacity:1;outline:3px solid #493d35;outline-offset:3px}.bewerk[aria-pressed=false]{border:3px solid #d1c5b8;background:#fff;color:#675d54}.ramen{display:flex;justify-content:center;gap:25px}.tienraam{display:grid;grid-template-columns:repeat(5,clamp(38px,5.3vw,62px));grid-template-rows:repeat(2,clamp(38px,5.3vw,62px));grid-auto-flow:column;border:2px solid #82766a;background:#fffdf8}.cel{border:1px solid #bcb2a7;display:grid;place-items:center}.stip{display:block;width:72%;aspect-ratio:1;padding:0;min-height:0;border:0;border-radius:50%;background:#075979;touch-action:none}.stip.rood{background:#cc352c}.stip.zwart{background:#252525}.stip:disabled{opacity:1}.voorraad{margin:8px auto}.voorraad h2{font-size:15px;margin:3px;font-weight:normal}.losse{display:flex;justify-content:center;gap:12px;min-height:48px;padding:6px;border:2px dashed #dcc7a8;border-radius:12px;max-width:660px;margin:auto}.losse .stip,.weg{width:32px;height:32px;flex-shrink:0}.weg{border:2px solid #aaa;border-radius:50%;position:relative}.weg:after{content:'';position:absolute;left:0;top:14px;width:28px;height:2px;background:#be3527;transform:rotate(-45deg)}#instructie{font-size:19px;margin:0 0 12px}#penbalk,.penkleuren{display:flex;gap:8px;align-items:center;justify-content:center}#penbalk{margin:10px 0;flex-wrap:wrap}#penbalk button{font-size:14px;padding:6px 10px}#penbalk [aria-pressed=true]{outline:2px solid #665445;outline-offset:1px;background:#fff0d6}.penkleur{display:flex;align-items:center;gap:6px}.penkleur span{width:20px;height:20px;border-radius:50%}#schrijfzone{position:relative;background:white;padding:36px 0 14px}.som{display:flex;justify-content:center;gap:20px;font-size:34px;padding:0 0 77px}.term{position:relative;min-width:30px}.splits{position:absolute;top:43px;width:110px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;font-size:24px;color:#086cad}.splits svg{grid-column:span 2;width:110px;height:35px}.splits path{fill:none;stroke:#086cad;stroke-width:2}#antwoord{color:#086cad}#stappen{display:flex;justify-content:center;gap:35px;padding:4px 20px}.schrijfregel{height:38px;width:40%;border-bottom:1px solid #adbdc9}#inkt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none;overflow:visible}.acties{display:flex;justify-content:center;gap:12px}#stap,#vrij-help-open{background:#ffcc80;border-color:#e8b05e}.tip{font-size:14px;margin:10px 0 0;color:#746858}#fout{color:#a62424;text-align:center;margin:8px}#fout:empty{display:none}.kind-kop{display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;margin:0 0 30px}.alleen-titel{font-size:26px;margin:0 0 6px}.kind-kop p{margin:0;font-size:17px}#alleen-les{padding:28px 35px}.vrij-materiaal{display:flex;align-items:stretch;justify-content:center;gap:20px;margin:28px 0 10px}.vrij-bron{display:flex;align-items:center;gap:14px;touch-action:none;font-size:20px;background:#edf6fc;border-color:#b3d3e7}.vrij-bron[data-kleur=rood]{background:#fff0ed;border-color:#efb7ab}.vrij-bron .stip{width:36px;height:36px;pointer-events:none}#vrij-weg{display:flex;align-items:center;gap:12px;border:2px dashed #b7a997;border-radius:14px;padding:12px;font-size:16px}#vrij-weg span{font-size:32px}#alleen-les .acties{margin-top:25px}#vrij-melding{min-height:22px;font-size:16px;margin:12px 0 0}.vrij-hulp{width:min(540px,90vw);border:3px solid #ffcc80;border-radius:24px;padding:24px;color:#493d35;background:#fffaf1;box-shadow:0 12px 50px #60401840}.vrij-hulp::backdrop{background:#493d3566}.hulp-kop{display:flex;align-items:center;justify-content:space-between}.hulp-kop h2{margin:0;font-size:24px}.vrij-hulp p{font-size:22px;line-height:1.5;min-height:100px}.vrij-hulp>button{margin:4px}.sleepstip{position:fixed;pointer-events:none;z-index:1000;width:38px;height:38px;opacity:.8}
@media(max-height:780px){header{padding:8px 20px}.les{padding:12px 20px}#alleen-les{padding:20px 28px}.kind-kop{margin-bottom:22px}.vrij-materiaal{margin-top:22px}.keuzekaart img{height:220px}.voorraad{margin:4px auto}.som{font-size:30px;padding-bottom:70px}.splits{top:37px}#penbalk{margin:6px 0}.tip{margin-top:6px}}
@media(max-width:850px){header{gap:10px}header a{font-size:12px}h1{font-size:22px}#volledig{font-size:12px;padding:6px 10px}.instellingen{gap:8px}.instellingen button{font-size:13px}.instellingen .bewerk{font-size:30px;min-height:50px;min-width:52px}.ramen{gap:16px}.kind-kop h2{font-size:23px}.vrij-materiaal{gap:10px}.vrij-bron{font-size:17px;padding:10px}.gebruik-knoppen{gap:24px}.keuzekaart{width:300px}.keuzekaart span{font-size:25px}#penbalk{gap:6px}}
@media(max-width:600px){header{flex-wrap:wrap}header a{order:2}main{padding:0 8px 10px}h1{font-size:20px}.gebruik-knoppen{gap:12px;min-height:75dvh}.keuzekaart{width:48%;padding:10px 10px 0}.keuzekaart img{height:150px}.keuzekaart span{font-size:18px;margin:10px -10px 0;padding:16px 4px}#alleen-les{padding:18px 10px}.kind-kop{gap:10px}.kind-kop h2{font-size:19px}.kind-kop p{font-size:14px}.bewerk{min-width:48px;min-height:50px}.ramen{gap:8px}.tienraam{grid-template-columns:repeat(5,8vw);grid-template-rows:repeat(2,8vw)}.vrij-materiaal{flex-wrap:wrap;margin-top:18px}#vrij-weg{padding:6px}.vrij-bron{font-size:15px}.acties{gap:8px}.acties button{padding:8px;font-size:14px}#penbalk button{font-size:12px;padding:5px}.les{padding:12px 8px}}
/* Beide bewerkingen blijven herkenbare, aanklikbare kleurknoppen. */
.bewerk[aria-pressed=false]{opacity:1;border-width:2px;border-bottom-width:5px}.bewerk.plus[aria-pressed=false]{background:#e3f3e3;color:#26722a;border-color:#9dca9f}.bewerk.min[aria-pressed=false]{background:#ffe6e3;color:#b52f2c;border-color:#e9aaa2}
#penbalk .penkleur{color:var(--penkleur);border-color:var(--penkleur);background:white}.penkleur svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#penbalk .penkleur[aria-pressed=true]{background:var(--penkleur);color:white;outline-color:var(--penkleur)}
#vrij-som{min-height:87px;margin:12px 0 0}#vrij-som p{font-size:15px;color:#746858;margin:0 0 4px}.vrij-somregel{display:flex;justify-content:center;gap:18px;font-size:32px;font-weight:bold}.som-blauw{color:#075979}.som-rood{color:#cc352c}#alleen-les .vrij-materiaal{margin-top:12px}
#vrij-weg{flex-direction:column;justify-content:center;gap:5px;min-width:190px;max-width:250px}#vrij-weg-bollen{display:grid;grid-template-columns:repeat(5,22px);gap:5px}#vrij-weg-bollen .stip{width:22px;height:22px;min-height:0}#vrij-weg-aantal{font-size:14px}#vrij-weg-aantal:empty,#vrij-weg-bollen:empty{display:none}
#vrij-weg-som{font-size:24px;font-weight:bold;white-space:nowrap}#vrij-weg-som:empty{display:none}

/* Het legmateriaal is een aanraakvlak; ook naast een stip mag geen veeg beginnen. */
.ramen,.losse,.vrij-materiaal{touch-action:none}
.ramen,.ramen *,.losse,.losse *,.vrij-materiaal,.vrij-materiaal *,.sleepstip{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  -webkit-user-drag:none;
}

/* De volle tien blijft herkenbaar zonder de bolletjes of sleepbediening te bedekken. */
.tienraam.tienraam-vol{border-color:#16803c;outline:3px solid #16803c;outline-offset:1px;box-shadow:0 0 0 5px #16803c20}
.tienraam-oplichten{animation:tienraam-groen .8s ease-out}
@keyframes tienraam-groen{0%{box-shadow:0 0 0 5px #16803c55}45%{box-shadow:0 0 0 11px #16803c44,0 0 22px #16803c66}100%{box-shadow:0 0 0 5px #16803c20}}
@media(prefers-reduced-motion:reduce){.tienraam-oplichten{animation:none}}