:root{
  --ink:#233052;--card:#fffdf7;--grass:#4fb477;--sun:#ffc542;--coral:#ff6b6b;--aqua:#25b5c4;--violet:#6f67ab;
  --sky-top:#8fd8f7;--sky-bottom:#dff3ff;
  --pad-t:env(safe-area-inset-top,0px);--pad-b:env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
html,body{background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-bottom) 100%);transition:background 900ms ease}
body{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;line-height:1.05;margin:0}

#app{height:100%;max-width:1020px;margin:0 auto;padding:calc(10px + var(--pad-t)) 14px calc(10px + var(--pad-b));
  display:flex;flex-direction:column;gap:10px}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;animation:pop 320ms ease both}
.hidden{display:none !important}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes wob{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes cheer{0%{transform:scale(1)}30%{transform:scale(1.14) rotate(-2deg)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.shake{animation:wob 420ms ease}

/* topbar */
.topbar{display:flex;align-items:center;gap:8px;flex:none}
.logo{display:flex;align-items:center;gap:8px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(18px,4.4vw,24px)}
.logo svg{width:30px;height:30px;flex:none}
.spacer{flex:1}
.chip{border:0;background:rgba(255,255,255,.85);color:var(--ink);font-family:inherit;font-weight:800;font-size:14px;
  padding:9px 13px;border-radius:999px;cursor:pointer;box-shadow:0 3px 0 rgba(35,48,82,.14);min-height:42px;white-space:nowrap}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(35,48,82,.14)}
.chip.coins{background:#fff1b8;box-shadow:0 3px 0 #e8cf7a}
.chip.coins.bump{animation:cheer 600ms ease}

/* panels */
.panel{background:var(--card);border-radius:26px;box-shadow:0 10px 0 rgba(35,48,82,.10);padding:16px;
  display:flex;flex-direction:column;min-height:0;flex:1;position:relative;overflow:hidden}
.scroller{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;position:relative;z-index:1}
.scroller::-webkit-scrollbar{display:none}
.cloud{position:absolute;pointer-events:none;z-index:0}
.cloud.c1{width:74px;top:10px;left:-14px}
.cloud.c2{width:54px;top:58px;right:-8px}
.hero{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 4px}
.hero svg{width:clamp(70px,18vw,100px);height:auto;flex:none}
.hero h1{font-size:clamp(24px,6.4vw,40px)}
.bubble{position:relative;display:inline-block;margin-top:5px;background:#fff1b8;border-radius:16px;padding:6px 12px;font-weight:700;font-size:clamp(13px,3.4vw,16px)}
.bubble::before{content:"";position:absolute;left:-8px;top:50%;margin-top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:9px solid #fff1b8}
.waveArm{transform-origin:9px -20px;animation:hello 1.6s ease-in-out infinite}
@keyframes hello{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-18deg)}80%{transform:rotate(6deg)}90%{transform:rotate(-14deg)}}
.step{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(15px,3.8vw,18px);color:var(--violet);margin:10px 2px 7px}
.linkbtn{background:none;border:0;font:inherit;font-size:13px;font-weight:700;color:var(--violet);text-decoration:underline;cursor:pointer;padding:6px}

/* buttons */
.go{border:0;border-radius:999px;cursor:pointer;background:#ff5c5c;color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;
  font-size:clamp(20px,5vw,26px);padding:14px 40px;box-shadow:0 7px 0 #d9453f;min-height:58px;transition:transform 100ms ease,box-shadow 100ms ease}
.go:active{transform:translateY(5px);box-shadow:0 2px 0 #d9453f}
.go:disabled{background:#c9ccd6;box-shadow:0 7px 0 #a9adba;cursor:not-allowed}
.go.alt{background:var(--violet);box-shadow:0 7px 0 #4d4690}
.go.green{background:#2ba86f;box-shadow:0 7px 0 #1f8355}
.go.orange{background:#ec7112;box-shadow:0 7px 0 #b9580c}
.go.small{font-size:clamp(17px,4.2vw,21px);padding:11px 22px;min-height:50px}
.pills{display:inline-flex;gap:6px;background:rgba(35,48,82,.06);padding:4px;border-radius:999px}
.pill{border:0;background:transparent;color:var(--ink);font-family:inherit;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;min-height:38px}
.pill[aria-pressed="true"]{background:#fff;box-shadow:0 2px 0 rgba(35,48,82,.15)}

/* hub */
.daily{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-weight:800;font-size:14px;margin:6px 0 2px}
.daily .dots3{display:inline-flex;gap:5px}
.daily .dots3 i{width:16px;height:16px;border-radius:50%;background:rgba(35,48,82,.12);display:inline-block}
.daily .dots3 i.on{background:var(--grass)}
.streak{background:#ffe6d6;border-radius:999px;padding:4px 10px}
.games{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.gcard{position:relative;border:0;border-radius:24px;background:#fff;cursor:pointer;color:var(--ink);font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px 8px;
  box-shadow:0 6px 0 rgba(35,48,82,.12);min-height:clamp(100px,17vh,170px);transition:transform 120ms ease}
.gcard:active{transform:translateY(3px)}
.gcard .sym{width:clamp(50px,12vw,72px);height:clamp(50px,12vw,72px);border-radius:50%;background:var(--c);color:#fff;
  font:800 clamp(30px,7vw,44px)/1 "Baloo 2",sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(35,48,82,.2);margin-bottom:3px}
.gcard b{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(17px,4.4vw,23px);line-height:1.1}
.gcard small{font-weight:700;font-size:12.5px;opacity:.65}
.gcard.locked{background:rgba(255,255,255,.7)}
.gcard.locked .sym{filter:grayscale(.6);opacity:.6}
.gcard.locked b,.gcard.locked small{opacity:.55}
.gcard .tag{position:absolute;top:9px;right:9px;background:#fff1b8;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800}
.hubrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.hubbtn{border:0;border-radius:20px;background:#fff;box-shadow:0 5px 0 rgba(35,48,82,.12);cursor:pointer;font-family:"Baloo 2",sans-serif;font-weight:800;
  font-size:clamp(16px,4.2vw,20px);color:var(--ink);padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px}
.hubbtn:active{transform:translateY(3px)}
.hubbtn .e{font-size:24px}
.hubfoot{text-align:center;margin-top:6px;display:flex;justify-content:center;flex-wrap:wrap;gap:0 14px}
/* Toegankelijkheid (WCAG 2.1 AA): altijd een duidelijke focusrand bij bediening met het toetsenbord */
:focus-visible{outline:3px solid #233052;outline-offset:2px}
.overlay :focus-visible,.screen :focus-visible{outline:3px solid #233052;outline-offset:2px;box-shadow:0 0 0 6px rgba(255,255,255,.85)}

/* menu */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:3px solid rgba(35,48,82,.1);background:#fff;border-radius:20px;
  padding:9px 4px;cursor:pointer;color:var(--ink);font-family:inherit;box-shadow:0 4px 0 rgba(35,48,82,.08);transition:border-color 160ms ease,background 160ms ease,transform 120ms ease}
.mode .ico{width:clamp(32px,8.5vw,42px);height:auto}
.mode b{display:block;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(15px,4vw,19px);line-height:1.1}
.mode small{display:block;font-size:11.5px;font-weight:700;opacity:.65;line-height:1.2}
.mode.learn[aria-pressed="true"]{border-color:#2ba86f;background:#e8f7ee;transform:translateY(-2px);box-shadow:0 5px 0 #bfe6cf}
.mode.light[aria-pressed="true"]{border-color:#3aa9e0;background:#e9f6fd;transform:translateY(-2px);box-shadow:0 5px 0 #b9def2}
.mode.hard[aria-pressed="true"]{border-color:var(--violet);background:#f0eefb;transform:translateY(-2px);box-shadow:0 5px 0 #cfcaec}
.tables{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
@media(min-width:720px){.tables{grid-template-columns:repeat(10,1fr)}}
.tbl{--c:#3aa9e0;position:relative;border:3px solid var(--c);background:#fff;color:var(--c);border-radius:20px;padding:7px 2px;cursor:pointer;
  font-family:"Baloo 2",sans-serif;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 4px 0 rgba(35,48,82,.1);
  transition:transform 140ms ease,background 160ms ease,color 160ms ease,box-shadow 160ms ease}
.tbl .n{font-size:clamp(24px,6.4vw,32px);line-height:1}
.tbl[aria-pressed="true"],.tables.learn .tbl{background:var(--c);color:#fff;box-shadow:0 5px 0 rgba(35,48,82,.22)}
.tbl[aria-pressed="true"]{transform:translateY(-3px) rotate(var(--r,0deg))}
.ck{position:absolute;top:-8px;right:-7px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--c);font:800 13px/22px "Nunito",sans-serif;text-align:center;
  box-shadow:0 2px 0 rgba(35,48,82,.2);transform:scale(0);transition:transform 180ms cubic-bezier(.34,1.5,.5,1)}
.tbl[aria-pressed="true"] .ck{transform:scale(1)}
.tables.learn .ck{display:none}
.stars3{display:flex;gap:1px;min-height:13px;align-items:center}
.stars3 svg{width:clamp(10px,2.6vw,13px);height:clamp(10px,2.6vw,13px)}
.lrn{font:800 10px/1.4 "Nunito",sans-serif;background:#fff;color:var(--c);border-radius:999px;padding:0 6px}
.presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 2px}
.preset{border:0;background:#fff1b8;color:var(--ink);font-family:inherit;font-weight:700;font-size:14px;padding:9px 14px;border-radius:999px;cursor:pointer;min-height:40px;box-shadow:0 3px 0 #efd98a}
.roundrow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-weight:800;font-size:14px}
.statline{text-align:center;font-size:13px;opacity:.75;margin:8px 0 0;font-weight:700}
.startline{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px;position:relative;z-index:1}
.hintline{font-size:13px;opacity:.75;min-height:18px;text-align:center;font-weight:700}
@media(max-height:700px){.hero svg{width:60px}.bubble{display:none}.step{margin:7px 2px 5px}}
@media(max-height:600px){#startScreen .hero{display:none}}

/* lesson */
#lessonScreen{--c:#3aa9e0}
.lhead{flex:none;display:flex;flex-direction:column;gap:8px}
.lhead h2{font-size:clamp(22px,5.6vw,32px);color:var(--c);text-align:center}
.lsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lsteps span{text-align:center;padding:6px 2px;border-radius:999px;background:rgba(35,48,82,.07);font-weight:800;font-size:12.5px}
.lsteps span.done{background:#d8f1e3;color:#1f8355}
.lsteps span.on{background:var(--c);color:#fff}
.lstage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 0;overflow:hidden;text-align:center}
.lfoot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lsay{font-weight:800;font-size:clamp(15px,3.8vw,19px);max-width:40ch;line-height:1.35;margin:0}
.see-ctrl{display:flex;align-items:center;gap:14px}
.round{width:52px;height:52px;border-radius:50%;border:0;background:var(--c);color:#fff;cursor:pointer;font:800 30px/1 "Baloo 2",sans-serif;box-shadow:0 5px 0 rgba(35,48,82,.22)}
.round:disabled{background:#c9ccd6}
.see-label{font-weight:800;font-size:clamp(15px,3.8vw,19px);min-width:12ch}
.groups{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap,6px)}
.bag{display:flex;gap:var(--gap,6px);padding:calc(var(--gap,6px) * .9) calc(var(--gap,6px) * 1.6);border-radius:999px;background:rgba(35,48,82,.06);animation:pop 260ms ease both}
.bag span{width:var(--d,16px);height:var(--d,16px);border-radius:50%}
.rep{font-weight:800;font-size:clamp(14px,3.4vw,18px);opacity:.75;max-width:100%}
.bigsum{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(30px,7vh,52px);line-height:1}
.nline{width:100%;max-width:min(820px,95vh);height:auto;flex:none}
.rule{font-weight:800;font-size:clamp(17px,4.4vw,23px);line-height:1.35;max-width:32ch;background:#fff1b8;border-radius:22px;padding:14px 18px}
.chain{display:flex;flex-direction:column;align-items:center;gap:4px}
.cstep{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(20px,4.6vh,32px);background:#fff;border:3px solid rgba(35,48,82,.1);border-radius:18px;padding:4px 16px;opacity:0;animation:pop 360ms ease forwards}
.cstep.last{background:var(--c);color:#fff;border-color:transparent}
.carrow{font-weight:800;opacity:0;animation:pop 300ms ease forwards;color:var(--c);line-height:1}
.rijtje{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:6px 14px;width:100%;max-width:520px}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff;border:3px solid rgba(35,48,82,.08);border-radius:16px;padding:4px 12px;
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(17px,3.6vh,27px);cursor:pointer;transition:background 200ms ease,border-color 200ms ease,transform 200ms ease}
.rrow .a{min-width:1.8em;text-align:center;border-radius:10px;color:var(--c)}
.rrow .a.hid{background:#eef2f8;color:#98a0b4;border:2px dashed rgba(35,48,82,.25)}
.rrow.say{border-color:var(--c);transform:scale(1.04);background:#fffbe9}
.drillbtns,.fbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fcount{font-weight:800;font-size:13px;opacity:.6}
.flash{border:0;cursor:pointer;width:min(360px,86%);min-height:clamp(130px,26vh,220px);border-radius:28px;background:var(--c);color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;
  font-size:clamp(40px,10vh,72px);box-shadow:0 8px 0 rgba(35,48,82,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px}
.flash small{font-family:"Nunito",sans-serif;font-size:clamp(13px,2.4vh,16px);font-weight:800;opacity:.95;max-width:26ch;line-height:1.3}
.flash.flip{animation:flip 380ms ease}
@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}

/* game */
#gameScreen{gap:10px}
.game-grid{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
@media(min-width:860px){.game-grid{display:grid;grid-template-columns:320px 1fr;align-items:stretch}}
.mountain-wrap{flex:1 1 auto;min-height:0;background:rgba(255,255,255,.4);border-radius:24px;padding:6px;display:flex;justify-content:center;position:relative;overflow:hidden}
.mountain-wrap svg{width:100%;height:100%;display:block}
.flag-wave{animation:wave 700ms ease-in-out 3}
@keyframes wave{0%,100%{transform:translate(100px,140px) rotate(0)}50%{transform:translate(100px,140px) rotate(-7deg)}}
.pulse{animation:pulsering 900ms ease-out forwards}
@keyframes pulsering{from{r:4;opacity:.9}to{r:26;opacity:0}}
.shout{position:absolute;transform:translate(-50%,-100%);pointer-events:none;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:22px;color:#fff;
  text-shadow:0 2px 6px rgba(35,48,82,.5);animation:shout 1100ms ease-out forwards;white-space:nowrap}
.shout.combo{font-size:26px;color:#ffe27a}
@keyframes shout{0%{opacity:0;transform:translate(-50%,-90%) scale(.6)}25%{opacity:1;transform:translate(-50%,-115%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
@keyframes fly{0%{left:-14%;transform:translateY(0)}25%{transform:translateY(-12px)}50%{transform:translateY(6px)}75%{transform:translateY(-10px)}100%{left:108%;transform:translateY(0)}}
@keyframes flyr{0%{left:108%;transform:translateY(0) scaleX(-1)}50%{transform:translateY(-10px) scaleX(-1)}100%{left:-14%;transform:translateY(0) scaleX(-1)}}
.qcard{position:relative;flex:none;background:var(--card);border-radius:26px;padding:14px 16px 16px;box-shadow:0 10px 0 rgba(35,48,82,.10)}
@media(min-width:860px){.qcard{flex:1;display:flex;flex-direction:column;justify-content:center}}
.meter{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dots{display:flex;gap:4px;flex:1}
.dots i{flex:1;max-width:22px;height:10px;border-radius:5px;background:rgba(35,48,82,.13)}
.dots i.done{background:var(--grass)}
.dots i.help{background:var(--sun)}
.dots i.now{background:var(--aqua);box-shadow:0 0 0 3px rgba(37,181,196,.22)}
.counter{font-weight:700;font-size:13px;opacity:.7;white-space:nowrap}
.sum{font-family:"Baloo 2",sans-serif;font-weight:800;text-align:center;font-size:clamp(34px,9vh,64px);line-height:1.1;margin:2px 0;animation:pop 300ms ease both}
body.hard .sum{font-size:clamp(30px,7vh,56px)}
.tip{text-align:center;font-size:14px;font-weight:700;color:var(--violet);min-height:20px;opacity:0;transition:opacity 400ms ease}
.tip.show{opacity:.85}
.tip{line-height:1.25}
.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;transition:opacity 300ms ease}
.answers.wait{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.ans{border:0;border-radius:20px;cursor:pointer;color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(24px,5.2vh,38px);padding:0;min-height:clamp(58px,9.5vh,86px);
  transition:transform 110ms ease,box-shadow 110ms ease,background 260ms ease,color 260ms ease}
.ans:active{transform:translateY(4px)}
.ans.c0{background:#229dd9;box-shadow:0 6px 0 #1a7cad}
.ans.c1{background:#ec7112;box-shadow:0 6px 0 #b9580c}
.ans.c2{background:#7a63c9;box-shadow:0 6px 0 #5e49a6}
.ans.c3{background:#2ba86f;box-shadow:0 6px 0 #1f8355}
.ans.parked{background:#dfe3ec !important;color:#98a0b4 !important;box-shadow:0 6px 0 #c6cbd8 !important;cursor:default}
.ans.right{animation:cheer 700ms ease}
.ans.wobble{animation:wob 420ms ease}
.cheerword{text-align:center;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:18px;color:var(--grass);min-height:24px;margin-top:6px}
.box{display:inline-block;min-width:1.7em;padding:0 .18em;border-radius:14px;text-align:center;background:#eef6ff;border:3px dashed rgba(35,48,82,.28);color:var(--ink);line-height:1.15}
.box.filled{border-style:solid;border-color:var(--aqua)}
.box.right{background:#e3f6ea;border-color:var(--grass);animation:cheer 700ms ease}
.box.wobble{animation:wob 420ms ease}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.key{border:2px solid rgba(35,48,82,.08);border-radius:16px;background:#fff;color:var(--ink);font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(22px,4.4vh,32px);
  min-height:clamp(44px,7vh,64px);box-shadow:0 4px 0 rgba(35,48,82,.18);cursor:pointer;padding:0}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(35,48,82,.18)}
.key.del{background:#eef1f7}
.key.ok{background:#47a66c;color:#fff;box-shadow:0 4px 0 #1f8355;border-color:transparent}
.key.ok:disabled{background:#c9ccd6;box-shadow:0 4px 0 #a9adba}

/* overlay */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--pad-t)) 16px calc(16px + var(--pad-b));
  background:rgba(35,48,82,.5);backdrop-filter:blur(2px)}
.ov-card{background:var(--card);border-radius:26px;padding:18px 16px;max-width:460px;width:100%;max-height:100%;display:flex;flex-direction:column;gap:12px;text-align:center;
  box-shadow:0 14px 0 rgba(35,48,82,.22);animation:pop 260ms ease both}
.ov-card h3{font-size:clamp(19px,4.6vw,24px)}
.grid-rows{display:flex;flex-direction:column;gap:var(--gap,6px);align-items:center;flex:1;min-height:0;justify-content:center}
.grow{display:flex;gap:var(--gap,6px)}
.grow span{width:var(--d,18px);height:var(--d,18px);border-radius:50%;background:var(--aqua)}
.grow:nth-child(even) span{background:#f08a3c}
.ov-tip{margin:0;font-size:14px;font-weight:700;color:var(--violet);min-height:18px}

/* end */
#endScreen h2{font-size:clamp(26px,6.6vw,42px);text-align:center}
.stars{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 2px}
.stars svg{width:clamp(26px,7vw,36px);height:clamp(26px,7vw,36px)}
.earned{text-align:center;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:20px;color:#c98a00}
.reward{display:flex;flex-direction:column;align-items:center;gap:2px;margin:10px auto 0;background:#fff7d6;border-radius:22px;padding:10px 16px;max-width:320px}
.reward .big{font-size:clamp(52px,12vh,86px);line-height:1.1;animation:stickerIn 800ms cubic-bezier(.34,1.5,.5,1) both}
@keyframes stickerIn{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
.reward b{font-family:"Baloo 2",sans-serif;font-size:18px}
.reward small{font-weight:700;opacity:.7;font-size:13px}
.newberg{margin:8px auto 0;text-align:center;font-weight:800;background:#e8f7ee;color:#1f8355;border-radius:16px;padding:8px 12px;max-width:340px}
.endnote{font-size:clamp(14px,3.5vw,16px);line-height:1.4;max-width:40ch;margin:10px auto 0;text-align:center;opacity:.85}
.endbtns{flex:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding-top:12px}

/* verzameling */
.tabs{display:flex;justify-content:center;margin-bottom:12px;flex:none}
.sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sticker{position:relative;aspect-ratio:1;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,6.5vw,40px);
  box-shadow:0 3px 0 rgba(35,48,82,.1)}
.sticker.locked{background:rgba(35,48,82,.06);box-shadow:none;color:rgba(35,48,82,.28);font:800 clamp(18px,4.5vw,26px) "Baloo 2",sans-serif}
.sticker .cnt{position:absolute;bottom:2px;right:5px;font:800 11px "Nunito",sans-serif;color:var(--violet)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:720px){.bgrid{grid-template-columns:repeat(6,1fr)}}
.bcard{position:relative;border:3px solid transparent;background:#fff;border-radius:18px;padding:6px 4px 6px;cursor:pointer;font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 3px 0 rgba(35,48,82,.1)}
.bcard svg{width:100%;max-width:70px;height:auto}
.bcard b{font:800 12px/1.15 "Nunito",sans-serif;text-align:center}
.bcard small{font-size:10px;font-weight:700;opacity:.6;line-height:1.1;text-align:center}
.bcard.locked svg{filter:grayscale(1);opacity:.35}
.bcard.active{border-color:var(--grass)}
.bcard.active::after{content:"✓";position:absolute;top:-8px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--grass);color:#fff;font:800 13px/22px "Nunito",sans-serif;text-align:center}
.colnote{text-align:center;font-weight:800;font-size:14px;opacity:.75;margin:10px 0 0}

/* shop */
.shop-top{flex:none;display:flex;align-items:center;justify-content:center;gap:14px}
.shop-top svg{width:clamp(90px,24vw,130px);height:auto;background:radial-gradient(circle at 50% 70%,#fff1b8 0 58%,transparent 59%)}
.shop-top .msg{font-weight:800;font-size:14px;max-width:18ch;min-height:2.6em}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.item{position:relative;border:3px solid transparent;background:#fff;border-radius:18px;padding:6px 4px 8px;cursor:pointer;font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 3px 0 rgba(35,48,82,.1)}
.item svg{width:clamp(44px,12vw,62px);height:auto}
.item b{font:800 13px "Nunito",sans-serif}
.item .price{font:800 12px "Nunito",sans-serif;background:#fff1b8;border-radius:999px;padding:1px 8px}
.item .price.own{background:#e8f7ee;color:#1a7148}
.item.wearing{border-color:var(--grass)}

/* ouders */
.psec{background:#fff;border-radius:18px;padding:12px 14px;margin-bottom:10px;box-shadow:0 3px 0 rgba(35,48,82,.08)}
.psec h3{font-size:18px;margin-bottom:6px}
.psec p{margin:4px 0;font-size:14px;line-height:1.4}
.prow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0}
.hardlist{display:flex;flex-wrap:wrap;gap:6px}
.hardlist span{background:#fff0e6;border-radius:999px;padding:4px 10px;font-weight:800;font-size:13px}
.ptable{width:100%;border-collapse:collapse;font-size:13px}
.ptable td,.ptable th{padding:5px 4px;text-align:left;border-bottom:1px solid rgba(35,48,82,.08)}
.ptable th{font-size:12px;opacity:.6}

/* =====================================================================
   RUIMTE: alles schaalt mee met schermhoogte en breedte
   ===================================================================== */
#app{max-width:1280px;padding:calc(8px + var(--pad-t)) 10px calc(8px + var(--pad-b));gap:8px}
@media(min-width:700px){#app{padding:calc(14px + var(--pad-t)) 18px calc(14px + var(--pad-b));gap:12px}}
.panel{padding:clamp(12px,2vh,26px)}
.chip{font-size:clamp(14px,1.8vh,18px);min-height:clamp(42px,5vh,54px);padding:0 clamp(12px,1.6vh,18px)}
.logo{font-size:clamp(18px,min(4.4vw,3vh),30px)}
.logo svg{width:clamp(28px,3.6vh,40px);height:clamp(28px,3.6vh,40px)}
.go{font-size:clamp(20px,min(5.4vw,3.4vh),34px);padding:clamp(12px,1.8vh,20px) clamp(32px,5vw,56px);min-height:clamp(56px,7.5vh,84px)}
.go.small{font-size:clamp(17px,min(4.4vw,2.8vh),28px);min-height:clamp(50px,6.4vh,72px)}
.pill{font-size:clamp(14px,1.8vh,18px);min-height:clamp(38px,4.6vh,50px);padding:0 clamp(14px,2vw,22px)}

/* hero en koppen */
.hero svg{width:clamp(64px,min(20vw,13vh),150px)}
.hero h1{font-size:clamp(24px,min(7vw,4.6vh),54px)}
.bubble{font-size:clamp(13px,min(3.6vw,2.2vh),22px);padding:clamp(6px,.9vh,10px) clamp(12px,1.6vh,18px)}
.step{font-size:clamp(15px,min(4.2vw,2.5vh),26px);margin:clamp(8px,1.6vh,18px) 2px clamp(6px,1vh,12px)}

/* hub: kaarten vullen de ruimte */
#homeScreen .scroller,#hubScreen .scroller,#startScreen .scroller{display:flex;flex-direction:column}
.games{flex:1 1 auto;grid-auto-rows:1fr;gap:clamp(10px,1.8vh,20px);margin-top:clamp(8px,1.6vh,18px)}
.gcard{min-height:clamp(100px,17vh,170px);border-radius:clamp(22px,3vh,34px)}
.gcard .sym{width:clamp(50px,min(20vw,11vh),140px);height:clamp(50px,min(20vw,11vh),140px);font-size:clamp(30px,min(11vw,6.6vh),84px)}
.gcard b{font-size:clamp(17px,min(5.2vw,3.2vh),36px)}
.gcard small{font-size:clamp(12.5px,min(3.4vw,1.9vh),19px)}
.gcard .tag{font-size:clamp(11px,1.5vh,15px);padding:3px 10px}
.hubrow{gap:clamp(10px,1.8vh,20px);margin-top:clamp(10px,1.8vh,20px)}
.hubbtn{min-height:clamp(56px,8vh,96px);font-size:clamp(16px,min(4.6vw,2.8vh),30px);border-radius:clamp(18px,2.6vh,28px)}
.hubbtn .e{font-size:clamp(24px,3.6vh,40px)}
.daily{font-size:clamp(14px,min(3.8vw,2.1vh),22px)}
.daily .dots3 i{width:clamp(16px,2.2vh,24px);height:clamp(16px,2.2vh,24px)}
.linkbtn{font-size:clamp(13px,1.7vh,17px)}

/* menu: tegels groeien mee */
.mode{padding:clamp(9px,1.6vh,20px) 4px;border-radius:clamp(18px,2.6vh,28px)}
.mode .ico{width:clamp(32px,min(10vw,6vh),64px)}
.mode b{font-size:clamp(15px,min(4.6vw,2.8vh),30px)}
.mode small{font-size:clamp(11.5px,min(3.2vw,1.7vh),17px)}
.tables{flex:1 1 auto;grid-auto-rows:1fr;gap:clamp(8px,1.4vh,16px);max-height:36vh}
.tbl{border-radius:clamp(18px,2.6vh,28px);justify-content:center;min-height:clamp(62px,9vh,150px)}
.tbl .n{font-size:clamp(24px,min(8vw,5.4vh),64px)}
.stars3 svg{width:clamp(10px,min(3vw,1.8vh),20px);height:clamp(10px,min(3vw,1.8vh),20px)}
.lrn{font-size:clamp(10px,1.4vh,14px)}
.ck{width:clamp(22px,3vh,30px);height:clamp(22px,3vh,30px);line-height:clamp(22px,3vh,30px);font-size:clamp(13px,1.8vh,17px)}
.tables,.tables{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(min-width:720px){.tables{grid-template-columns:repeat(5,minmax(0,1fr));max-height:34vh}}
@media(min-width:1000px) and (orientation:landscape){.tables{grid-template-columns:repeat(10,minmax(0,1fr));max-height:30vh}.tbl{min-height:clamp(80px,14vh,150px)}}
.preset{font-size:clamp(14px,1.8vh,18px);min-height:clamp(40px,5vh,52px);padding:0 clamp(14px,2vw,22px)}
.roundrow,.statline,.hintline{font-size:clamp(13px,1.8vh,18px)}

/* spel */
@media(min-width:860px){.game-grid{grid-template-columns:minmax(300px,42%) 1fr}}
.qcard{padding:clamp(14px,2vh,28px) clamp(14px,2.4vw,30px) clamp(16px,2.2vh,30px);border-radius:clamp(22px,3vh,34px)}
.counter{font-size:clamp(13px,1.7vh,18px)}
.dots i{height:clamp(10px,1.4vh,16px);max-width:40px}
.sum{font-size:clamp(36px,min(14vw,9.5vh),112px)}
body.hard .sum{font-size:clamp(32px,min(12vw,7.5vh),96px)}
.tip{font-size:clamp(14px,1.9vh,20px)}
.answers{gap:clamp(10px,1.6vh,20px);margin-top:clamp(10px,1.6vh,20px)}
.ans{font-size:clamp(26px,min(9vw,6vh),64px);min-height:clamp(62px,11vh,140px);border-radius:clamp(18px,2.6vh,30px)}
.keypad{gap:clamp(8px,1.2vh,14px)}
.key{font-size:clamp(22px,min(7vw,4.6vh),48px);min-height:clamp(46px,7.4vh,96px);border-radius:clamp(14px,2vh,24px)}
.cheerword{font-size:clamp(18px,2.6vh,30px);min-height:clamp(24px,3.4vh,40px)}
.shout{font-size:clamp(22px,3.2vh,36px)}

/* leren */
.lhead h2{font-size:clamp(22px,min(6.4vw,4vh),48px)}
.lsteps span{font-size:clamp(12.5px,min(3.4vw,1.8vh),19px);padding:clamp(6px,.9vh,11px) 2px}
.lsay{font-size:clamp(15px,min(4.4vw,2.5vh),28px)}
.round{width:clamp(52px,7vh,80px);height:clamp(52px,7vh,80px);font-size:clamp(30px,4vh,46px)}
.see-label{font-size:clamp(15px,min(4.4vw,2.5vh),28px)}
.rep{font-size:clamp(14px,min(4vw,2.3vh),26px)}
.bigsum{font-size:clamp(32px,min(12vw,8vh),90px)}
.rule{font-size:clamp(17px,min(5vw,3vh),34px);max-width:34ch;padding:clamp(14px,2vh,24px) clamp(18px,2.4vh,30px)}
.cstep{font-size:clamp(20px,min(8vw,5.4vh),52px);padding:clamp(4px,.8vh,10px) clamp(16px,2vh,26px)}
.carrow{font-size:clamp(18px,3vh,34px)}
.rijtje{max-width:760px;gap:clamp(6px,1vh,12px) clamp(12px,2vw,24px)}
.rrow{font-size:clamp(18px,min(5.6vw,4.2vh),44px);padding:clamp(4px,.7vh,10px) clamp(12px,1.6vh,20px);border-radius:clamp(14px,2vh,24px)}
.flash{width:min(620px,90%);min-height:clamp(140px,32vh,380px);font-size:clamp(44px,min(16vw,11vh),120px);border-radius:clamp(26px,3.6vh,40px)}
.flash small{font-size:clamp(14px,min(4vw,2.3vh),24px)}
.fcount{font-size:clamp(13px,1.7vh,18px)}

/* einde */
#endScreen h2{font-size:clamp(28px,min(8vw,5vh),60px)}
.stars svg{width:clamp(28px,min(10vw,6vh),66px);height:clamp(28px,min(10vw,6vh),66px)}
.earned{font-size:clamp(20px,3vh,34px)}
.reward{max-width:440px;padding:clamp(10px,1.6vh,22px) clamp(16px,2.4vh,30px);border-radius:clamp(20px,3vh,32px)}
.reward .big{font-size:clamp(56px,15vh,160px)}
.reward b{font-size:clamp(18px,2.6vh,30px)}
.reward small{font-size:clamp(13px,1.8vh,18px)}
.newberg{font-size:clamp(14px,1.9vh,20px);max-width:460px}
.endnote{font-size:clamp(14px,min(4vw,2.3vh),24px)}

/* verzameling */
.sgrid{gap:clamp(8px,1.4vh,16px)}
.sticker{font-size:clamp(26px,min(8vw,6vh),72px);border-radius:clamp(14px,2vh,24px)}
.sticker.locked{font-size:clamp(18px,min(5vw,3.6vh),40px)}
.sticker .cnt{font-size:clamp(11px,1.5vh,15px)}
@media(max-width:620px) and (min-height:700px){.sgrid{grid-template-columns:repeat(4,1fr)}}
.bgrid{gap:clamp(8px,1.4vh,16px)}
@media(max-width:620px) and (min-height:760px){.bgrid{grid-template-columns:repeat(3,1fr)}}
.bcard svg{max-width:clamp(70px,12vh,140px)}
.bcard b{font-size:clamp(12px,min(3.4vw,1.8vh),18px)}
.bcard small{font-size:clamp(10px,1.4vh,14px)}
.colnote{font-size:clamp(14px,1.9vh,20px)}

/* mijn klimmer */
.shop-top svg{width:clamp(96px,min(34vw,22vh),230px)}
.shop-top .msg{font-size:clamp(14px,min(4vw,2.3vh),24px)}
.items{gap:clamp(10px,1.6vh,18px)}
.item{border-radius:clamp(16px,2.4vh,26px);padding:clamp(6px,1vh,14px) 4px}
.item svg{width:clamp(48px,min(16vw,10vh),120px)}
.item b{font-size:clamp(13px,1.8vh,19px)}
.item .price{font-size:clamp(12px,1.6vh,16px)}

/* ouders */
.psec h3{font-size:clamp(18px,2.4vh,24px)}
.psec p,.ptable{font-size:clamp(13px,1.8vh,17px)}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
button:focus-visible{outline:4px solid #233052;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
/* =====================================================================
   LUCHT: ruimte tussen tekst en het element erboven
   ===================================================================== */
.hero{margin-bottom:clamp(6px,1.4vh,16px)}
.bubble{margin-top:clamp(6px,1.1vh,12px)}
.daily{margin:clamp(8px,1.6vh,18px) 0 clamp(4px,1vh,10px)}
.hubfoot{margin-top:clamp(8px,1.4vh,16px)}
.presets{margin-top:clamp(12px,2vh,22px)}
.roundrow{margin-top:clamp(12px,2vh,22px)}
.statline{margin-top:clamp(10px,1.8vh,20px)}
.startline{gap:clamp(8px,1.4vh,14px);padding-top:clamp(12px,2vh,22px)}
.meter{margin-bottom:clamp(10px,1.6vh,18px)}
.tip{margin-top:clamp(4px,.8vh,10px)}
.cheerword{margin-top:clamp(14px,2.2vh,24px)}
.lhead{gap:clamp(8px,1.4vh,16px)}
.lstage{gap:clamp(12px,2vh,24px);padding:clamp(12px,2.2vh,26px) 0}
.rep{margin-top:clamp(4px,.8vh,10px)}
.flash small{margin-top:clamp(6px,1vh,12px)}
.stars{margin:clamp(12px,2vh,24px) 0 clamp(8px,1.4vh,16px)}
.earned{margin-top:clamp(4px,.8vh,10px)}
.reward{margin-top:clamp(14px,2.4vh,28px);gap:clamp(4px,.8vh,10px)}
.reward .big{margin-bottom:clamp(2px,.6vh,8px)}
.newberg{margin-top:clamp(12px,2vh,22px)}
.endnote{margin-top:clamp(14px,2.4vh,28px)}
.endbtns{padding-top:clamp(14px,2.2vh,24px)}
.colnote{margin-top:clamp(14px,2.4vh,26px)}
.shop-top{padding-top:clamp(4px,1vh,12px)}
.shop-top .msg{line-height:1.35}
.tabs{margin-bottom:clamp(12px,2vh,22px)}
.psec h3{margin-bottom:clamp(8px,1.2vh,12px)}
.ov-card{gap:clamp(12px,2vh,22px)}

/* stickers per categorie */
.catpills{display:flex;flex-wrap:wrap;gap:clamp(6px,1vh,10px);justify-content:center;margin-bottom:clamp(14px,2.2vh,24px)}
.catpill{border:0;background:rgba(35,48,82,.07);color:var(--ink);font-family:inherit;font-weight:800;font-size:clamp(13px,1.8vh,18px);
  padding:0 clamp(12px,1.6vh,18px);min-height:clamp(38px,4.8vh,50px);border-radius:999px;cursor:pointer}
.catpill small{font-weight:700;opacity:.65;margin-left:5px}
.catpill[aria-pressed="true"]{background:var(--violet);color:#fff;box-shadow:0 3px 0 #4d4690}
.sgrid,.sgrid{grid-template-columns:repeat(4,1fr);max-width:min(100%,64vh);margin:0 auto}
.sticker{flex-direction:column;gap:2px;font-size:clamp(34px,min(12vw,8vh),96px)}
.sticker .sname{font:800 clamp(10px,1.4vh,15px)/1.1 "Nunito",sans-serif;color:var(--ink);opacity:.7;text-align:center;padding:0 3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticker .cnt{top:5px;bottom:auto}
@media(max-width:620px) and (min-height:700px){.sgrid{grid-template-columns:repeat(4,1fr)}}

/* winkel met meer categorieen */
.pills{flex-wrap:wrap;justify-content:center}
#shopTabs{border-radius:24px}
@media(min-width:700px){.items{grid-template-columns:repeat(4,1fr)}}

.items{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:700px){.items{grid-template-columns:repeat(4,minmax(0,1fr))}}
.item{min-width:0}
.item b{max-width:100%;padding:0 3px;font-size:clamp(11.5px,min(3.2vw,1.7vh),18px);line-height:1.15;text-align:center;hyphens:manual;min-height:2.3em;display:flex;align-items:center;justify-content:center}
.logo{min-width:0;flex:1 1 auto;white-space:nowrap}
.logo span{overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:0 0 0}
.reward small{text-align:center}

/* diploma's */
.hubrow{grid-template-columns:repeat(3,1fr)}
.hubbtn{flex-direction:column;gap:2px;font-size:clamp(14px,min(4vw,2.4vh),26px);padding:clamp(8px,1.2vh,14px) 4px}
.nameinput{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(20px,3vh,30px);color:var(--ink);background:#fff;
  border:3px solid rgba(35,48,82,.15);border-radius:18px;padding:6px 16px;width:100%;max-width:380px;text-align:center}
.nameinput:focus{border-color:var(--violet)}
.nameinput:focus-visible{outline:3px solid #233052;outline-offset:2px}
.bigdip{width:100%;border:0;background:#fff7d6;border-radius:clamp(18px,2.6vh,28px);display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,20px);
  padding:clamp(10px,1.6vh,18px);cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:0 5px 0 #efd98a;margin-bottom:clamp(14px,2.2vh,24px)}
.bigdip svg{width:clamp(54px,9vh,100px);height:auto;flex:none}
.bigdip span{display:flex;flex-direction:column;text-align:left}
.bigdip b{font-family:"Baloo 2",sans-serif;font-size:clamp(20px,3vh,32px);line-height:1.1}
.bigdip small{font-weight:700;font-size:clamp(13px,1.8vh,18px);opacity:.7}
.bigdip.locked svg{filter:grayscale(1);opacity:.4}
.medals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.6vh,18px) clamp(6px,1.4vw,14px)}
.medal{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit;color:var(--ink);padding:0}
.medal svg{width:100%;max-width:clamp(52px,12vh,120px);height:auto}
.medal b{font-weight:800;font-size:clamp(11px,min(3vw,1.6vh),16px);line-height:1.15;text-align:center}
.medal.locked svg{filter:grayscale(1);opacity:.32}
.medal.locked b{opacity:.5}
.newdip{margin:clamp(12px,2vh,22px) auto 0;text-align:center;background:#f0eefb;border-radius:18px;padding:clamp(10px,1.6vh,16px);max-width:420px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,12px);font-weight:800;font-size:clamp(15px,2vh,21px)}
.dip-wrap{width:min(96vw,calc((100vh - 170px) * 1.414),1100px);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,18px)}
#dipSvg{width:100%;border-radius:10px;overflow:hidden;box-shadow:0 14px 0 rgba(35,48,82,.25);animation:pop 300ms ease both;background:#fffaf0}
#dipSvg svg{width:100%;height:auto;display:block}
.dip-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dip-msg{margin:0;color:#fff;font-weight:800;font-size:clamp(14px,1.9vh,19px);min-height:1.2em;text-align:center}

/* hulp, ontbrekend getal, tip */
.hintbig{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(20px,min(5.4vw,3.2vh),34px);line-height:1.3;background:#fff1b8;border-radius:20px;
  padding:clamp(14px,2vh,22px) clamp(16px,2.4vh,26px);max-width:26ch;margin:0 auto}
.cheerword.miss{color:var(--violet)}
.tbl.rec::before{content:"Tip";position:absolute;top:-9px;left:-7px;background:#ffc542;color:#233052;font:800 clamp(10px,1.4vh,13px)/1 "Nunito",sans-serif;
  padding:4px 8px;border-radius:999px;box-shadow:0 2px 0 #e0a417;z-index:2;animation:tipPulse 2.4s ease-in-out infinite}
@keyframes tipPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.preset.smart{background:var(--violet);color:#fff;box-shadow:0 3px 0 #4d4690}
#bkMsg{font-weight:700}
#bkMsg .chip{margin-left:6px}
.hq{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(26px,min(8vw,4.4vh),46px);line-height:1.1}
.hchain{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.8vh,8px);margin-top:clamp(8px,1.4vh,16px)}
.hstep{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(20px,min(6vw,3.4vh),36px);line-height:1.15;background:#fff1b8;border-radius:16px;
  padding:clamp(4px,.8vh,10px) clamp(14px,2vh,22px);opacity:0;animation:pop 380ms ease forwards}
.hstep.last{background:var(--violet);color:#fff}
.harrow{font-weight:800;color:var(--violet);font-size:clamp(18px,2.8vh,30px);line-height:1;opacity:0;animation:pop 300ms ease forwards}

/* ga verder */
.gonext{width:100%;border:0;border-radius:clamp(20px,3vh,32px);background:var(--coral);color:#fff;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,18px);padding:clamp(12px,1.8vh,20px) clamp(14px,2vw,24px);
  box-shadow:0 7px 0 #d9453f;margin-top:clamp(8px,1.4vh,14px);text-align:left;min-height:clamp(72px,10vh,120px)}
.gonext:active{transform:translateY(5px);box-shadow:0 2px 0 #d9453f}
.gn-play{width:clamp(44px,6.4vh,70px);height:clamp(44px,6.4vh,70px);border-radius:50%;background:#fff;color:var(--coral);display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,3vh,32px);flex:none;padding-left:4px}
.gn-txt{display:flex;flex-direction:column;min-width:0}
.gn-txt b{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(24px,min(7vw,4.2vh),44px);line-height:1.05}
.gn-txt small{font-weight:800;font-size:clamp(13px,min(3.6vw,2vh),20px);opacity:.92;line-height:1.25}
/* juf */
.tbl.juf::after{content:"Juf";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:#2ba86f;color:#fff;
  font:800 clamp(10px,1.4vh,13px)/1 "Nunito",sans-serif;padding:3px 8px;border-radius:999px;box-shadow:0 2px 0 #1f8355;z-index:2}
/* plaatjessom */
.picsum{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,1vh,10px);margin-bottom:clamp(4px,.8vh,10px)}
.pcap{width:100%;text-align:center;font-weight:800;font-size:clamp(14px,min(4vw,2.1vh),22px)}
.pbox{display:grid;gap:1px;background:#fff1b8;border-radius:14px;padding:clamp(3px,.6vh,6px) clamp(5px,.8vh,8px);line-height:1.1;box-shadow:0 3px 0 #efd98a}
/* rustige modus */
body.calm .waveArm,body.calm .tbl.rec::before,body.calm .flag-wave{animation:none !important}

.meter{flex-wrap:nowrap}
.explain{flex:none;border:0;cursor:pointer;background:#fff1b8;color:var(--ink);font-family:inherit;font-weight:800;
  font-size:clamp(13px,min(3.6vw,1.9vh),19px);min-height:clamp(36px,4.6vh,50px);padding:0 clamp(10px,1.6vh,16px);border-radius:999px;
  box-shadow:0 3px 0 #efd98a;white-space:nowrap}
.explain:active{transform:translateY(2px);box-shadow:0 1px 0 #efd98a}
.explain:disabled{opacity:.45;cursor:default}
@media(max-width:420px){.counter{font-size:12px}.dots{gap:3px}}
.helperbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}

.tbl.off{background:#eef1f7 !important;color:#b3b9c8 !important;border-color:#d9dde7 !important;box-shadow:none !important;transform:none !important}
.tbl.off .stars3,.tbl.off .ck{visibility:hidden}
.tbl.off::after{content:"🔒";position:absolute;top:4px;right:6px;font-size:clamp(11px,1.6vh,15px);line-height:1;background:none;box-shadow:none;padding:0;left:auto;bottom:auto;transform:none}
.tbl.off::before{display:none}
.allowpills .pill[aria-pressed="false"]{opacity:.55;text-decoration:line-through}

.gate-card{max-width:380px;gap:clamp(8px,1.4vh,14px)}
.gate-lede{margin:0;font-weight:700;opacity:.7;font-size:clamp(13px,1.8vh,17px)}
.gate-sum{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(28px,min(8vw,4.6vh),44px);line-height:1.1}
.gate-boxes{display:flex;justify-content:center;gap:10px}
.gate-boxes span{width:clamp(44px,6vh,58px);height:clamp(52px,7vh,66px);border-radius:14px;border:3px dashed rgba(35,48,82,.25);background:#eef6ff;
  display:flex;align-items:center;justify-content:center;font:800 clamp(26px,4vh,36px) "Baloo 2",sans-serif}
.gate-boxes span.filled{border-style:solid;border-color:var(--violet)}
.gate-msg{margin:0;min-height:1.3em;font-weight:800;color:#d6336c;font-size:clamp(13px,1.8vh,17px)}
.gate-keys .key{min-height:clamp(46px,6.4vh,64px)}

.hubbtn{position:relative}
.hubbadge{position:absolute;top:-8px;right:-4px;background:#c8305e;color:#fff;font:800 clamp(10px,1.4vh,13px)/1 "Nunito",sans-serif;
  padding:4px 8px;border-radius:999px;box-shadow:0 2px 0 #c43d6b;animation:tipPulse 2s ease-in-out infinite;white-space:nowrap}
.newb{position:absolute;top:-7px;left:-5px;background:#ef5f8a;color:#fff;font:800 clamp(10px,1.3vh,12px)/1 "Nunito",sans-serif;
  padding:3px 7px;border-radius:999px;box-shadow:0 2px 0 #c43d6b;z-index:2;animation:tipPulse 2s ease-in-out infinite}
.sticker.fresh{box-shadow:0 0 0 3px #ef5f8a,0 3px 0 rgba(35,48,82,.1);animation:stickerIn 700ms cubic-bezier(.34,1.5,.5,1) both}
.catpill{position:relative}
.pilldot{position:absolute;top:-6px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:#ef5f8a;color:#fff;
  font:800 11px/18px "Nunito",sans-serif;text-align:center;padding:0 4px;box-shadow:0 2px 0 #c43d6b}
body.calm .hubbadge,body.calm .newb{animation:none}

.sgrid{padding:10px 8px 6px}
/* rustiger startscherm: Ga verder is de hoofdrol */
#hubScreen .gonext{flex:1 1 auto;max-height:50vh;min-height:clamp(110px,18vh,240px);flex-direction:column;text-align:center;gap:clamp(8px,1.4vh,16px)}
#hubScreen .gn-play{width:clamp(64px,10vh,110px);height:clamp(64px,10vh,110px);font-size:clamp(28px,4.6vh,50px)}
#hubScreen .gn-txt{align-items:center}
#hubScreen .gn-txt b{font-size:clamp(30px,min(9vw,5.4vh),60px)}
#hubScreen .gn-txt small{font-size:clamp(14px,min(4vw,2.3vh),24px)}
.pickcard{width:100%;border:0;background:#fff;border-radius:clamp(18px,2.6vh,28px);box-shadow:0 5px 0 rgba(35,48,82,.12);cursor:pointer;font-family:inherit;color:var(--ink);
  display:flex;align-items:center;gap:clamp(10px,2vw,18px);padding:clamp(10px,1.6vh,16px) clamp(14px,2vw,22px);margin-top:clamp(12px,2vh,22px);text-align:left}
.pickcard:active{transform:translateY(3px)}
.pickcard .sym{width:clamp(44px,6.4vh,70px);height:clamp(44px,6.4vh,70px);border-radius:50%;background:var(--violet);color:#fff;flex:none;
  font:800 clamp(26px,4vh,42px)/1 "Baloo 2",sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #4d4690}
.pc-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.pc-txt b{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(18px,min(5vw,3vh),30px);line-height:1.1}
.pc-txt small{font-weight:700;font-size:clamp(12.5px,1.8vh,17px);opacity:.65}
.pc-arrow{font:800 clamp(28px,4vh,40px)/1 "Baloo 2",sans-serif;color:var(--violet);opacity:.6}

#dipNote .go{margin-top:10px}
.minitables{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1vh,10px);width:100%;max-width:440px}
.minitbl{--c:#3aa9e0;border:3px solid var(--c);background:#fff;color:var(--c);border-radius:14px;cursor:pointer;
  font:800 clamp(18px,min(5.4vw,3vh),28px)/1 "Baloo 2",sans-serif;min-height:clamp(42px,6vh,58px);box-shadow:0 3px 0 rgba(35,48,82,.1);transition:transform 120ms ease}
.minitbl[aria-pressed="true"]{background:var(--c);color:#fff;transform:translateY(-2px)}
.minitbl.off{background:#eef1f7;color:#b3b9c8;border-color:#d9dde7;box-shadow:none}

/* desktop: tegels niet uitrekken, labels niet afsnijden */
.tables{padding:12px 9px 8px}
@media(min-width:1000px) and (orientation:landscape){
  .tables{grid-template-columns:repeat(10,minmax(0,1fr));flex:0 0 auto;grid-auto-rows:auto;max-height:none}
  .tbl{min-height:0;aspect-ratio:1 / 1.05;max-height:clamp(70px,15vh,150px)}
  .tbl .n{font-size:clamp(24px,min(3vw,5vh),52px)}
  #startScreen .scroller > *{max-width:1100px;margin-left:auto;margin-right:auto;width:100%}
  /* tafelmenu bovenaan, zoals alle andere menu's (14-10-2026, Mark: uniform) */
}
@media(orientation:landscape) and (max-height:800px){
  #startScreen .hero svg{width:clamp(48px,9vh,72px)}
  #startScreen .bubble{display:none}
  #startScreen .hero h1{font-size:clamp(22px,4.2vh,34px)}
  .step{margin:clamp(6px,1.2vh,12px) 2px clamp(4px,.8vh,8px)}
  .presets{margin-top:clamp(8px,1.4vh,14px)}
  .roundrow{margin-top:clamp(8px,1.4vh,14px)}
  .statline{margin-top:clamp(6px,1vh,12px)}
}

/* telefoon staand: menu past zonder scrollen */
@media(max-width:620px) and (orientation:portrait){
  #startScreen .hero{margin:0 0 4px}
  #startScreen .hero svg{width:clamp(46px,8vh,64px)}
  #startScreen .bubble{display:none}
  #startScreen .hero h1{font-size:clamp(22px,6vw,30px)}
  .step{margin:clamp(6px,1.1vh,10px) 2px clamp(4px,.7vh,7px)}
  .mode{padding:clamp(6px,1vh,10px) 3px;gap:2px}
  .mode .ico{width:clamp(28px,5vh,38px)}
  .tables{padding:10px 6px 6px;gap:clamp(6px,1vh,10px);max-height:24vh}
  .tbl{min-height:clamp(52px,7.6vh,86px)}
  .presets{margin-top:clamp(6px,1vh,10px);flex-wrap:nowrap;gap:6px}
  .preset{font-size:13px;padding:0 10px;min-height:36px;white-space:nowrap}
  .roundrow{margin-top:clamp(6px,1vh,10px)}
  .pill{min-height:34px}
  .statline{margin-top:clamp(4px,.8vh,8px);font-size:12.5px}
  .startline{padding-top:clamp(6px,1.2vh,12px);gap:4px}
}
@media(max-width:620px) and (max-height:700px){
  #startScreen .hero{display:none}
  .mode small{display:none}
}

.np-kid{width:clamp(90px,16vh,140px);height:auto}

/* klimmer: animaties */
.twinkle{animation:twinkle 1.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.flame{animation:flick .16s steps(2,end) infinite alternate}
@keyframes flick{from{opacity:.5}to{opacity:1}}
.glow{animation:glowp 1.1s ease-in-out infinite alternate}
@keyframes glowp{from{opacity:.3}to{opacity:.85}}
body.calm .twinkle,body.calm .flame,body.calm .glow{animation:none}
/* winkel: zeldzaamheid */
.item{position:relative;overflow:visible}
.item.r-z{border-color:#3aa9e0}
.item.r-e{border-color:#7a63c9;background:#faf8ff}
.item.r-l{border-color:#e0a417;background:linear-gradient(120deg,#fff8dc 0%,#ffffff 40%,#fff1b8 60%,#fff8dc 100%);background-size:250% 100%;animation:shimmer 3.5s linear infinite}
@keyframes shimmer{from{background-position:0% 0}to{background-position:250% 0}}
body.calm .item.r-l{animation:none}
.item.wearing{box-shadow:0 0 0 3px var(--grass),0 3px 0 rgba(35,48,82,.1)}
.item.locked svg{opacity:.8}
.item .rar{position:absolute;top:-9px;left:50%;transform:translateX(-50%);color:#fff;font:800 clamp(9px,1.3vh,11px)/1 "Nunito",sans-serif;
  padding:3px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 0 rgba(35,48,82,.2);z-index:2}
.items{padding-top:10px}
.items.sets{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.items.sets{grid-template-columns:repeat(3,minmax(0,1fr))}}
.setcard .sp{font-size:clamp(11px,1.6vh,14px);font-weight:700;opacity:.7}
.setcard.done{border-color:#2ba86f}
.shop-info{display:flex;flex-direction:column;gap:6px;max-width:24ch;min-width:0}
.setbadge{align-self:flex-start;background:#f0eefb;color:var(--violet);font-weight:800;border-radius:999px;padding:3px 10px;font-size:clamp(12px,1.7vh,15px)}
.goal{font-weight:800;font-size:clamp(12px,1.7vh,15px)}
.goalbar{height:10px;border-radius:5px;background:rgba(35,48,82,.1);overflow:hidden;margin-top:4px}
.goalbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffc542,#f08a3c);transition:width 600ms ease}

/* startscherm: groot mannetje, twee even grote knoppen */
.hubhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.hubhead h1{font-size:clamp(24px,min(7vw,4.4vh),48px)}
.hubhead .daily{margin:0}
.stage{position:relative;flex:1 1 auto;min-height:clamp(170px,30vh,420px);margin-top:clamp(8px,1.4vh,16px);border:0;cursor:pointer;font-family:inherit;color:var(--ink);
  border-radius:clamp(22px,3vh,34px);background:radial-gradient(ellipse at 50% 65%,#fff6cf 0%,#fff1b8 38%,#e6f6ff 72%,#d7efff 100%);
  display:flex;align-items:flex-end;justify-content:center;padding:clamp(8px,1.4vh,16px);overflow:hidden;box-shadow:inset 0 -6px 0 rgba(35,48,82,.05)}
.stage svg{position:absolute;inset:clamp(26px,4vh,44px) 0 clamp(26px,3.6vh,40px) 0;width:100%;height:calc(100% - clamp(52px,7.6vh,84px));margin:auto}
.stage:active svg{transform:scale(.98)}
.stage-bubble{position:absolute;top:clamp(10px,1.8vh,18px);left:clamp(12px,2vw,22px);margin:0;z-index:2}
.stage-set{position:absolute;top:clamp(10px,1.8vh,18px);right:clamp(12px,2vw,22px);z-index:2}
.stage-tip{position:relative;z-index:2;font-weight:800;font-size:clamp(12px,min(3.4vw,1.8vh),17px);background:rgba(255,255,255,.85);border-radius:999px;padding:5px 12px}
.mainbtns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vh,20px);margin-top:clamp(12px,2vh,22px)}
.bigbtn{border:0;border-radius:clamp(20px,3vh,32px);cursor:pointer;color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(3px,.6vh,8px);min-height:clamp(104px,16vh,180px);padding:clamp(10px,1.6vh,18px) clamp(8px,1.4vw,16px);text-align:center;transition:transform 100ms ease,box-shadow 100ms ease}
.bigbtn b{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(20px,min(6vw,3.6vh),38px);line-height:1.05}
.bigbtn small{font-weight:800;font-size:clamp(11.5px,min(3.2vw,1.8vh),17px);opacity:.92;line-height:1.25}
.bb-ico{width:clamp(40px,6vh,62px);height:clamp(40px,6vh,62px);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  font:800 clamp(20px,3vh,32px)/1 "Baloo 2",sans-serif}
.bb-next{background:var(--coral);box-shadow:0 7px 0 #d9453f}
.bb-next .bb-ico{color:var(--coral);padding-left:3px}
.bb-pick{background:var(--violet);box-shadow:0 7px 0 #4d4690}
.bb-pick .bb-ico{color:var(--violet)}
.bigbtn:active{transform:translateY(5px)}
.bb-next:active{box-shadow:0 2px 0 #d9453f}
.bb-pick:active{box-shadow:0 2px 0 #4d4690}
@media(max-height:620px){.stage-bubble{display:none}}

/* startscherm: lopen wordt met JavaScript aangestuurd (walkerTick) */

/* meer ruimte tussen de grote knoppen en de rij eronder, zodat badges vrij staan */
#homeScreen .hubrow{margin-top:clamp(28px,3.8vh,38px)}

.tbl .rate{position:absolute;right:-7px;bottom:-9px;background:#7a63c9;color:#fff;font:800 clamp(9px,1.3vh,12px)/1 "Nunito",sans-serif;
  padding:3px 6px;border-radius:999px;box-shadow:0 2px 0 #5e49a6;z-index:2;white-space:nowrap}
.tbl .rate.half{background:#9aa5b8;box-shadow:0 2px 0 #7d889b}
.tbl.juf::after{left:-6px;transform:none}

/* verzameling: nette, gelijke kaarten en niets afgesneden */
#tabStickers .catpills{padding-top:10px}
#bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vh,14px);padding:14px 8px 8px;max-width:980px;margin:0 auto}
@media(min-width:560px){#bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){#bgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
#bgrid .bcard{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  padding:clamp(8px,1.2vh,12px) 6px clamp(8px,1.2vh,12px);height:100%}
#bgrid .bcard svg{width:100%;max-width:clamp(64px,11vh,120px);aspect-ratio:4 / 3;height:auto;flex:none}
#bgrid .bcard b{min-height:2.35em;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;
  font-size:clamp(12px,min(3.4vw,1.8vh),17px);hyphens:manual}
#bgrid .bstat{font:800 clamp(10.5px,1.5vh,13px)/1.2 "Nunito",sans-serif;opacity:1;color:#8a94a6;white-space:nowrap}
#bgrid .bcard.active .bstat{color:#2ba86f}
#bgrid .bcard:not(.locked):not(.active) .bstat{color:var(--violet)}
#bgrid .bcard.active::after{top:-9px;right:-7px}

@media(max-height:720px) and (max-width:620px){
  #bgrid{gap:7px;padding:12px 4px 4px}
  #bgrid .bcard{padding:6px 4px;gap:2px}
  #bgrid .bcard svg{max-width:50px}
  #bgrid .bcard b{font-size:11.5px;min-height:2.3em}
  #bgrid .bstat{font-size:10px}
  #tabBergen .colnote{margin-top:10px;font-size:13px}
}

/* keuzeknoppen in winkel en verzameling: overal dezelfde stijl (paars = gekozen) */
.tabs .pills,#shopTabs{background:none;padding:0;border-radius:0;gap:clamp(6px,1vh,10px)}
.tabs .pill,.catpill{background:rgba(35,48,82,.07);color:var(--ink);box-shadow:none;border-radius:999px;
  font-weight:800;font-size:clamp(13px,1.8vh,18px);min-height:clamp(38px,4.8vh,50px);padding:0 clamp(12px,1.6vh,18px)}
.tabs .pill[aria-pressed="true"],.catpill[aria-pressed="true"]{background:var(--violet);color:#fff;box-shadow:0 3px 0 #4d4690}
/* ruimte rond de rasters zodat randen en labels niet wegvallen */
.items{padding:12px 8px 8px}
#tabStickers .sgrid{padding:12px 8px 8px}


/* Winkel: bergen en ballonnen als voorbeeld (geen klimmer) */
.items.decor .item svg{width:auto;max-width:100%;height:clamp(52px,min(16vw,10vh),112px)}

/* Winkel: vier afdelingen (Klimmer, Maatjes, Bergen, Ballonnen) */
.shopsections{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.2vw,12px);margin-top:clamp(8px,1.4vh,14px)}
.shopsec{position:relative;border:3px solid transparent;background:#fff;border-radius:clamp(14px,2vh,20px);box-shadow:0 4px 0 rgba(35,48,82,.1);cursor:pointer;
  font:800 clamp(12px,min(3.4vw,1.9vh),17px)/1.1 "Nunito",sans-serif;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:clamp(6px,1vh,10px) 2px;min-height:clamp(52px,7vh,72px)}
.shopsec .e{font-size:clamp(20px,3.2vh,30px);line-height:1}
.shopsec[aria-selected="true"]{border-color:var(--violet);background:#f0eefb;box-shadow:0 4px 0 #cfcaec}
.shopsec .pilldot{top:-7px;right:-4px}
#shopTabsRow{margin-top:clamp(8px,1.2vh,12px)}
.shop-decorprev{display:flex;align-items:center;justify-content:center;width:clamp(96px,min(34vw,22vh),230px);flex:none}
.shop-decorprev svg{width:100%;height:auto;max-height:clamp(90px,20vh,200px)}
/* titel bovenin mag op een smalle telefoon iets kleiner, zodat de titel past */
.logo{font-size:clamp(15px,min(4.4vw,3vh),30px)}
@media(max-width:380px){.topbar{gap:6px}.topbar .chip{padding:0 10px}}

/* overzicht: landen */
#homeScreen .stage{min-height:clamp(110px,20vh,380px)}
@media(max-height:700px){#homeScreen .stage{min-height:94px}}   /* kleine telefoon: ruimte voor de reeks en de twee links onderaan (landen: onderaan dit bestand) */
.lands{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);margin-top:clamp(10px,1.8vh,20px)}
.landcard{width:100%;border:0;border-radius:clamp(20px,3vh,32px);cursor:pointer;font-family:inherit;color:#fff;text-align:left;
  display:flex;align-items:center;gap:clamp(10px,2vw,20px);padding:clamp(8px,1.4vh,16px) clamp(14px,2.4vw,26px);
  background:linear-gradient(135deg,#f76627,#ef5f8a);box-shadow:0 7px 0 #c43d6b;transition:transform 100ms ease,box-shadow 100ms ease}
.landcard:active{transform:translateY(5px);box-shadow:0 2px 0 #c43d6b}
.lc-art{flex:none;width:clamp(64px,min(22vw,11vh),130px);height:clamp(52px,min(17vw,8.6vh),100px);background:rgba(255,255,255,.9);border-radius:clamp(14px,2vh,22px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:clamp(28px,5vh,52px)}
.lc-art svg{width:100%;height:100%;display:block}
.lc-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.lc-txt b{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(22px,min(6.4vw,4vh),42px);line-height:1.05}
.lc-txt small{font-weight:800;font-size:clamp(12.5px,min(3.4vw,1.9vh),19px);opacity:.92}
.lc-go{font:800 clamp(34px,5vh,54px)/1 "Baloo 2",sans-serif;opacity:.85}
.landcard.locked{background:#b7bfcd;box-shadow:0 7px 0 #8f98a8}
.landcard.locked .lc-go{font-size:clamp(22px,3.4vh,34px)}
.soonrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1.2vw,14px)}
.sooncard{border:0;border-radius:clamp(14px,2vh,22px);background:rgba(255,255,255,.72);color:var(--ink);font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:clamp(5px,.9vh,10px) 2px;
  font-weight:800;font-size:clamp(11.5px,min(3.2vw,1.8vh),17px);line-height:1.15;min-width:0}
.sooncard .e{font-size:clamp(20px,3.2vh,34px);filter:grayscale(.5);opacity:.75}
.sooncard small{font-size:clamp(9.5px,min(2.6vw,1.4vh),13px);opacity:.55;font-weight:800}
/* Rekenland: kop met de berg, daaronder de twee grote knoppen */
.landhero{display:flex;align-items:center;gap:clamp(10px,2vw,20px);background:rgba(255,255,255,.8);border-radius:clamp(20px,3vh,32px);padding:clamp(8px,1.4vh,16px) clamp(12px,2vw,22px)}
.lh-art{flex:none;width:clamp(80px,min(26vw,14vh),170px);height:clamp(60px,min(19vw,10.5vh),128px)}
.lh-art svg{width:100%;height:100%;display:block}
.lh-txt{display:flex;flex-direction:column}
.lh-txt h1{font-size:clamp(26px,min(7.6vw,4.8vh),52px);line-height:1.05}
.lh-txt small{font-weight:800;font-size:clamp(13px,min(3.6vw,2vh),20px);opacity:.65}
/* Rekenland: Ga verder bovenaan (groot), daaronder de onderdelen als tegels */
.rl-next{flex:none;width:100%;margin-top:clamp(12px,2vh,22px);min-height:0;height:clamp(78px,12vh,130px);
  flex-direction:row;justify-content:flex-start;gap:clamp(12px,2.4vw,24px);padding:0 clamp(16px,3vw,32px);text-align:left}
.rl-next .gn-t{display:flex;flex-direction:column;min-width:0}
.rl-next b{font-size:clamp(24px,min(7vw,4.2vh),46px)}
.rl-next small{font-size:clamp(12.5px,min(3.4vw,1.9vh),20px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(92px,30%),1fr));gap:clamp(10px,1.8vh,20px);margin-top:clamp(16px,2.6vh,28px);padding-bottom:10px}
.parttile{min-height:clamp(120px,24vh,260px);padding-left:4px;padding-right:4px}
.parttile b{font-size:clamp(16px,min(4.8vw,3.4vh),36px)}
.parttile small{font-size:clamp(11px,min(3vw,1.8vh),17px)}
.pt-plus{background:#21a3b1;box-shadow:0 7px 0 #17808b}
.pt-plus .bb-ico{color:#21a3b1}
.pt-plus:active{box-shadow:0 2px 0 #17808b}
.pt-tafels{background:var(--violet);box-shadow:0 7px 0 #4d4690}
.pt-tafels .bb-ico{color:var(--violet)}
.pt-tafels:active{box-shadow:0 2px 0 #4d4690}
.pt-delen{background:#ec7112;box-shadow:0 7px 0 #b9580c}
.pt-delen .bb-ico{color:#ec7112}
.pt-delen:active{box-shadow:0 2px 0 #c96a22}
.pt-p100{background:#2ba86f;box-shadow:0 7px 0 #1f7d51}
.pt-p100 .bb-ico{color:#2ba86f}
.pt-p100:active{box-shadow:0 2px 0 #1f7d51}
/* 4 onderdelen: 2 × 2 op een staand scherm, alles naast elkaar op een breed scherm */
.parts[data-n="4"]{grid-template-columns:1fr 1fr}
.parts[data-n="4"] .parttile{min-height:clamp(96px,17vh,220px)}
@media(min-aspect-ratio:1/1){.parts[data-n="4"]{grid-template-columns:repeat(4,1fr)}}
.pt-dh{background:#229dd9;box-shadow:0 7px 0 #1a7cad}
.pt-dh .bb-ico{color:#229dd9}
.pt-dh:active{box-shadow:0 2px 0 #2584b3}
/* 5 of 6 onderdelen: 3 per rij op een staand scherm, alles naast elkaar op een breed scherm */
.parts[data-n="5"],.parts[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.parts[data-n="5"] .parttile,.parts[data-n="6"] .parttile{min-height:clamp(96px,17vh,220px)}
@media(min-aspect-ratio:1/1){.parts[data-n="5"]{grid-template-columns:repeat(5,1fr)}.parts[data-n="6"]{grid-template-columns:repeat(6,1fr)}}
.pt-gk{background:#ef5f8a;box-shadow:0 7px 0 #c43d6b}
.pt-gk .bb-ico{color:#ef5f8a}
.pt-gk:active{box-shadow:0 2px 0 #c43d6b}
.pt-gt{background:#c78700;box-shadow:0 7px 0 #996800}
.pt-gt .bb-ico{color:#c78700}
.pt-gt:active{box-shadow:0 2px 0 #996800}
/* 7 of meer onderdelen: liggende tegels (icoon links, tekst rechts) in 2 kolommen, breed 4 kolommen */
.parts.many{grid-template-columns:1fr 1fr}
.parts.many .parttile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;justify-items:start;column-gap:clamp(8px,1.4vw,14px);row-gap:0;
  min-height:clamp(62px,10vh,120px);padding:clamp(8px,1.2vh,14px) clamp(10px,1.6vw,18px);text-align:left}
.parts.many .parttile .bb-ico{grid-row:1 / span 2;width:clamp(34px,5vh,54px);height:clamp(34px,5vh,54px);font-size:clamp(16px,2.6vh,26px)}
.parts.many .parttile b{font-size:clamp(15px,min(4.4vw,2.8vh),28px)}
.parts.many .parttile small{font-size:clamp(10.5px,min(2.9vw,1.6vh),16px)}
.parts.many .parttile.wide{grid-column:1 / -1}   /* losse laatste tegel van een groepje (land.js) */
@media(min-aspect-ratio:1/1){.parts.many{grid-template-columns:repeat(4,1fr)}.parts.many .parttile.wide{grid-column:auto}}
.pt-geld{background:#20a39e;box-shadow:0 7px 0 #16807c}
.pt-geld .bb-ico{color:#20a39e}
.pt-geld:active{box-shadow:0 2px 0 #16807c}
.pt-br{background:#d65db1;box-shadow:0 7px 0 #a83f8a}
.pt-br .bb-ico{color:#d65db1}
.pt-br:active{box-shadow:0 2px 0 #a83f8a}
.parttile.locked{background:#b7bfcd;box-shadow:0 7px 0 #8f98a8}
.parttile.locked .bb-ico{font-size:clamp(16px,2.4vh,24px)}

/* lange vraag (bv. 3 H + 4 T + 7 E = ?): kleinere letters zodat hij op één of twee regels past */
.sum.long{font-size:clamp(24px,min(7.4vw,5.6vh),64px)}
body.hard .sum.long{font-size:clamp(22px,min(6.8vw,5vh),58px)}
/* plaatje bij de vraag (getallenlijn met pijl) */
.picsum svg.gtline{width:min(100%,460px);height:auto;max-height:min(16vh,150px)}
.flash svg.gtline{display:block;width:min(100%,420px);height:auto;margin:0 auto 4px}

/* drie keuzes (< > =) op één rij */
.answers.three{grid-template-columns:repeat(3,1fr)}
.answers.three .ans{font-size:clamp(34px,min(11vw,7vh),72px)}
/* antwoordknop met een plaatje (bv. munten en briefjes bij betalen) */
.ans.pic{padding:6px}
.ans.pic svg{width:100%;height:auto;max-height:clamp(40px,8vh,90px);display:block}
.picsum svg.gdmoney{width:min(100%,440px);height:auto;max-height:min(18vh,160px)}
.flash svg.gdmoney{display:block;width:min(100%,400px);height:auto;margin:0 auto 4px}
.pm-rek svg.gdmoney{width:min(100%,440px);height:auto;max-height:min(30vh,240px)}
/* bij moeilijk neemt het toetsenbord ruimte in: plaatje bij de vraag kleiner */
.picsum svg.gdmoney{max-height:min(14vh,150px)}
body.hard .picsum svg.gdmoney,body.hard .picsum svg.gtline{max-height:min(9vh,110px)}
/* breuken: teller boven, noemer onder */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .08em;font-size:.72em}
.frac > span:first-child{border-bottom:.08em solid currentColor;padding:0 .12em .04em}
.frac > span:last-child{padding:.04em .12em 0}
.frac .box{font-size:1em;min-width:1.4em}
.ans .frac{font-size:.8em}
.ans .fr-word{font-size:.62em}
.picsum svg.brpic{width:auto;height:min(17vh,150px);max-width:100%}
.picsum svg.brpic.wide{width:min(100%,420px);height:auto}
body.hard .picsum svg.brpic{height:min(11vh,110px)}
.pm-rek svg.brpic{width:min(100%,260px);height:auto;max-height:min(30vh,240px)}
.pm-rek svg.brpic.wide{width:min(100%,440px)}
.flash svg.brpic{display:block;height:min(18vh,150px);width:auto;margin:0 auto 4px}
/* 9 of meer onderdelen: liggende tegels iets lager, zodat alles past op een kleine telefoon */
.parts.many[data-n="9"] .parttile,.parts.many[data-n="10"] .parttile{min-height:clamp(52px,8.3vh,110px);padding-top:clamp(6px,1vh,12px);padding-bottom:clamp(6px,1vh,12px)}
.parts.many[data-n="9"],.parts.many[data-n="10"]{row-gap:clamp(8px,1.4vh,16px)}
.ans .fr-word{line-height:1.1;display:block}
.sum.long .frac{font-size:.95em}

/* knop in het hulpvenster altijd op één regel */
#helperClose{white-space:nowrap}
.reward .big.dim{filter:grayscale(.3);opacity:.75;animation:none}
/* eindscherm: beloning iets kleiner, zodat ook met "Durf je moeilijk?" en een lange tip alles past op 360×640 */
.reward .big{font-size:clamp(46px,12vh,150px)}

/* Rekenland: hoever ben je (balk onder de titel, dun balkje in elke tegel) */
.lh-txt{flex:1;min-width:0}
.rl-prog{display:flex;flex-direction:column;gap:clamp(2px,.5vh,6px);margin-top:clamp(3px,.6vh,8px)}
.rl-prog small{font-weight:800;font-size:clamp(12.5px,min(3.4vw,1.9vh),20px);opacity:.75}
.rlp-bar{display:block;height:clamp(10px,1.5vh,16px);border-radius:99px;background:#e6e3f5;overflow:hidden;max-width:420px}
.rlp-bar i{display:block;height:100%;border-radius:99px;background:#f5b82e;min-width:clamp(10px,1.5vh,16px)}
.parttile{position:relative;overflow:hidden}
.pt-bar{position:absolute;left:14%;right:14%;bottom:clamp(5px,.9vh,10px);height:clamp(5px,.8vh,8px);border-radius:99px;background:rgba(0,0,0,.18);overflow:hidden}
.pt-bar i{display:block;height:100%;background:#fff;border-radius:99px}
.pt-bar.full i{background:#ffd24a}
.pt-star{position:absolute;top:clamp(4px,.7vh,8px);right:clamp(6px,1vw,10px);color:#ffd24a;font-size:clamp(14px,2.2vh,22px);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.parts.many .pt-bar{position:static;grid-column:2;width:100%;max-width:130px;height:clamp(4px,.6vh,7px);margin-top:clamp(3px,.5vh,6px)}
.parts.many .parttile .bb-ico{grid-row:1 / span 3}
.parts.many .parttile{grid-template-rows:auto auto auto}
@media(prefers-reduced-motion:no-preference){.rlp-bar i,.pt-bar i{transition:width .6s ease}}

/* ---------- UI/UX-controle (28-09-2026) ---------- */
/* landen die nog komen: één regel */
.soonline{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-weight:800;font-size:clamp(12.5px,min(3.4vw,1.8vh),18px);color:var(--ink);opacity:.6}
.soonline .e{font-size:clamp(16px,2.4vh,24px);filter:grayscale(.4);letter-spacing:2px}
/* eindscherm: sterren met hulp zijn lichtgoud (ook verdiend) */
/* winkel: kop kleiner op een telefoon, zodat er meer spullen in beeld zijn */
@media(max-aspect-ratio:3/4){.shop-top svg,.shop-decorprev{width:clamp(76px,min(24vw,14vh),230px)}.shop-top .msg{min-height:0}}
/* spel, moeilijk op een kleine telefoon: meer ruimte voor de scène */
@media(max-height:760px) and (max-width:600px){
  body.hard .cheerword{position:absolute;left:50%;top:0;transform:translate(-50%,-55%);margin:0;min-height:0;pointer-events:none;white-space:nowrap;background:#fff;border-radius:99px;padding:1px 14px;box-shadow:0 3px 0 rgba(35,48,82,.12);z-index:2}
  body.hard .cheerword:empty{display:none}
  body.hard .qcard{padding-bottom:12px}
  body.hard .tip:empty{min-height:0}
  body.hard .key{min-height:clamp(42px,6.6vh,96px)}
}
/* wolkjes vielen door de titel en het podium op het beginscherm en het Rekenland-scherm */
#homeScreen .cloud,#hubScreen .cloud{display:none}

/* staging: label TEST (alleen als de server zegt dat dit staging is) */
body.staging::after{content:"TEST";position:fixed;left:6px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:9999;pointer-events:none;background:#ff6b6b;color:#fff;font:800 10px/1 "Nunito",sans-serif;letter-spacing:1px;padding:3px 7px;border-radius:99px;opacity:.85}

/* ---------- reeks: vlam, feestmoment dagdoel, reeks redden (reeks.js, 01-10-2026) ---------- */
.flame{display:inline-block;width:1em;height:1.17em;vertical-align:-.2em;overflow:visible}
.flame .fl-out,.flame .fl-in{transform-box:fill-box;transform-origin:50% 100%}
@keyframes flk{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(.95,1.06) rotate(-2deg)}60%{transform:scale(1.03,.96) rotate(2deg)}}
@keyframes flk2{0%,100%{transform:scale(1,1)}50%{transform:scale(.9,1.12)}}
@keyframes twk{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes flWob{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.flame.fl-live .fl-out{animation:flk 1.6s ease-in-out infinite}
.flame.fl-live .fl-in{animation:flk2 1.1s ease-in-out infinite}
.flame .fl-spark path{transform-box:fill-box;transform-origin:center;animation:twk 1.8s ease-in-out infinite}
.flame .fl-spark path:nth-child(2){animation-delay:.9s}
.flame.fl-wobble{animation:flWob 2.4s ease-in-out infinite;filter:saturate(.45)}
/* beginscherm: vlam + aantal dagen */
.streak{display:inline-flex;align-items:center;gap:4px;background:#ffe9d9;color:#9a4f14;border-radius:999px;padding:3px 10px 3px 7px}
.streak .flame{font-size:1.25em}
.streak b{font:800 1.15em/1 "Baloo 2",sans-serif}
.streak span{font-size:.85em}
.streak.t3{background:#dff3fd;color:#1a6c96}
.streak.t4{background:#fff4c7;color:#8a6100}
.streak.risk{border:0;cursor:pointer;font:inherit;font-weight:800;background:#ffe3e0;color:#c0392b}
/* feestmoment */
.goalparty{z-index:70}
.gp-card{position:relative;background:var(--card);border-radius:28px;padding:clamp(16px,2.6vh,30px) 18px;max-width:420px;width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);text-align:center;box-shadow:0 14px 0 rgba(35,48,82,.22);overflow:hidden}
.gp-dots{display:flex;gap:10px;height:22px;align-items:center}
.gp-dots i{width:20px;height:20px;border-radius:50%;background:var(--grass);display:block}
.gp-flame{height:clamp(84px,15vh,140px);display:flex;align-items:flex-end;justify-content:center}
.gp-flame .flame{width:auto;height:100%}
.gp-count{display:flex;align-items:baseline;gap:8px;font-weight:800}
.gp-num{position:relative;display:inline-block;min-width:1.2ch;height:1.1em;overflow:hidden;font:800 clamp(40px,7vh,64px)/1.1 "Baloo 2",sans-serif;color:#e36414}
.gp-num span{display:block}
.gp-num .old{position:absolute;inset:0}
.gp-days{font-size:clamp(15px,2.2vh,20px);color:#9a4f14}
.goalparty h2{margin:0;font-size:clamp(24px,4vh,36px)}
.gp-sub{margin:0;font-weight:700;opacity:.75}
.gp-mile{display:flex;align-items:center;gap:10px;background:#fff4c7;border-radius:18px;padding:8px 14px;font-weight:800}
.gp-mile .big{font-size:clamp(34px,6vh,52px);line-height:1}
.gp-kid{position:absolute;left:8px;bottom:6px;width:clamp(54px,9vh,80px);pointer-events:none}
.gp-kid svg{width:100%;height:auto;display:block}
#gpClose.wait{opacity:.35}
/* volgorde: bolletjes ploppen (0-0.7s) en vliegen in de vlam (0.8-1.1s), vlam ontbrandt (1.0s), teller klapt om (1.2s), klimmer springt, sticker */
@keyframes gpPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes gpFly{to{transform:translateY(60px) scale(.2);opacity:0}}
@keyframes gpIgnite{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
@keyframes gpOut{to{transform:translateY(-110%);opacity:0}}
@keyframes gpIn{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes gpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gpJump{0%,100%{transform:translateY(0)}30%{transform:translateY(-22px)}50%{transform:translateY(0)}70%{transform:translateY(-12px)}}
@keyframes gpMile{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.1) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.goalparty.play .gp-dots i{animation:gpPop .35s ease both,gpFly .35s ease-in forwards;animation-delay:calc(var(--i) * .18s),calc(.8s + var(--i) * .06s)}
.goalparty.play .gp-flame{animation:gpIgnite .6s cubic-bezier(.3,1.6,.5,1) 1s both}
.goalparty.play .gp-num .old{animation:gpOut .35s ease-in 1.25s forwards}
.goalparty.play .gp-num .new{animation:gpIn .4s cubic-bezier(.3,1.6,.5,1) 1.3s both}
.goalparty.play h2,.goalparty.play .gp-sub,.goalparty.play .gp-days{animation:gpFade .4s ease 1.35s both}
.goalparty.play .gp-kid{animation:gpJump .9s ease 1.5s 2}
.goalparty.play .gp-mile{animation:gpMile .6s cubic-bezier(.3,1.6,.5,1) 1.8s both}
.goalparty.play #gpClose{animation:gpFade .4s ease 1.6s both}
/* rustig of minder beweging: alles staat meteen stil op zijn plek */
.goalparty.calm *,.goalparty.calm{animation:none !important}
.goalparty.calm .gp-dots{display:none}
.goalparty.calm .gp-num .old{display:none}
body.calm .flame *, body.calm .flame{animation:none !important}
@media (prefers-reduced-motion:reduce){.flame *,.flame{animation:none !important}}
/* reeks redden */
.sgrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}

/* weekbalk in het reeks-scherm (zoals Duolingo) */
.gp-count{flex-direction:column;align-items:center;gap:0}
.gp-num{font-size:clamp(56px,10vh,96px);height:1.05em;line-height:1.05}
.gp-days{margin-top:-2px}
.gp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.2vw,10px);width:100%;max-width:340px;background:#f6f3ec;border-radius:18px;padding:8px 8px 10px}
.gp-week .wd{display:flex;flex-direction:column;align-items:center;gap:4px}
.gp-week small{font-weight:800;font-size:clamp(11px,1.6vh,14px);color:#8a8fa3}
.gp-week .today small{color:#e36414}
.gp-week i{display:flex;align-items:center;justify-content:center;width:clamp(28px,4.4vh,38px);height:clamp(28px,4.4vh,38px);border-radius:50%;background:#e2e5ee}
.gp-week i svg{width:70%;height:70%}
.gp-week i.ok{background:#ff9f1c;box-shadow:0 3px 0 #d97c06}
.gp-week i.saved{background:#3aa9e0;box-shadow:0 3px 0 #2b87b6}
.gp-week i.miss{background:#e2e5ee}
.gp-week .today i{outline:3px solid #ffd9b8;outline-offset:2px}
.gp-note{margin:0;font-size:clamp(12px,1.7vh,14px);font-weight:700;opacity:.7}
.streak{border:0;cursor:pointer;font:inherit;font-weight:800}
/* vinkjes: eerdere dagen staan er al, het vinkje van vandaag plopt erin na de vlam */
@keyframes wdPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.goalparty.play .gp-week .fresh i.ok,.goalparty.play .gp-week .fresh i.saved{animation:wdPop .45s cubic-bezier(.3,1.6,.5,1) 1.45s both}
.goalparty.play .gp-week,.goalparty.play .gp-note{animation:gpFade .4s ease .9s both}
.goalparty.view .gp-dots,.goalparty.view .gp-kid{display:none}

/* ---------- netjes en uitgelijnd (UI/UX-controle ronde 3, 01-10-2026) ---------- */
/* wolkjes in de panelen vielen steeds door titels en hoeken */
.panel > .cloud{display:none}
/* beginscherm: opdracht als compact label op één regel */
.lc-task{align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Rekenland: tekens (+ × : €) even zwaar als de emoji-iconen */
.parttile .bb-ico.txt{font:800 clamp(22px,min(6vw,3.4vh),34px)/1 "Baloo 2",sans-serif}   /* kleur: die van de tegel (13-10-2026, Mark: gekleurd op wit) */
@media(min-height:900px){.parts.many[data-n="9"] .parttile,.parts.many[data-n="10"] .parttile{min-height:clamp(52px,10.5vh,140px)}}
/* eindscherm: grote knoppen even breed */
.endbtns .go:not(.small){width:min(100%,300px)}
/* berg-scène: gras en heuvels lopen door tot de randen van het vak */
#sceneBerg{overflow:visible}

/* ===== Tegels B-plus (WCAG 2.1 AA, besloten met Mark 08-10-2026) =====
   Kleuren halen met wit minstens 3:1 (tileColor() in core/basis.js); titels zijn groot (≥ 19 px vet),
   kleine tekst staat op een donker rond labeltje (4,5:1). Vrolijk: glansje bovenin, twee stipjes, 3D-rand.
   Alles als achtergrondlaag, zodat ::before/::after vrij blijven voor Tip, Juf en het slotje. */
:root{--bplus:radial-gradient(circle at calc(100% - 15px) 13px,rgba(255,255,255,.55) 0 4px,transparent 4.6px),
  radial-gradient(circle at calc(100% - 27px) 24px,rgba(255,255,255,.42) 0 2.5px,transparent 3.1px),
  radial-gradient(130% 50% at 50% -16%,rgba(255,255,255,.15) 0 60%,transparent 61%)}
:root{--bglans:radial-gradient(130% 50% at 50% -16%,rgba(255,255,255,.15) 0 60%,transparent 61%)}
.parttile:not(.locked),.sthero,.tables .tbl[aria-pressed="true"],.tables.learn .tbl{background-image:var(--bplus)}
#pmGrid.learn .tbl,#pmGrid .tbl[aria-pressed="true"]{background-image:var(--bglans)}   /* menu: geen stipjes, die vallen over de stapnaam */
.landcard:not(.locked){background-image:var(--bplus),linear-gradient(135deg,#f76627,#ef5f8a)}
.parttile b{font-size:clamp(19px,min(4.8vw,3.4vh),36px)}
.parts.many .parttile b{font-size:clamp(19px,min(4.4vw,2.8vh),28px)}
.parttile small,.lc-txt small{display:inline-block;width:fit-content;background:rgba(0,0,0,.24);border-radius:99px;padding:1px 9px;opacity:1}
.go.small{font-size:clamp(19px,min(4.4vw,2.8vh),28px)}
/* Lange namen (Grote keersommen) passen op een telefoon: kleiner rondje, minder ruimte ernaast; de titel blijft groot */
@media(max-width:430px){.parts.many .parttile{column-gap:5px;padding-left:6px;padding-right:4px}.parts.many .parttile .bb-ico{width:28px;height:28px;font-size:15px}.parts.many .parttile b{font-size:18.7px;letter-spacing:-.45px}}
/* veel vragen (bv. toets van 25): sterren kleiner, hooguit 13 per rij */
.stars.many{gap:3px;max-width:min(100%,460px);margin-left:auto;margin-right:auto}
.stars.many svg{width:calc((100% - 36px) / 13);height:auto;aspect-ratio:1;max-width:30px}
/* winkel: kopjes binnen Shirt (Kleuren, Bijzonder, Voetbal) */
.items .shopgroup{grid-column:1 / -1;margin:clamp(4px,1vh,10px) 2px -2px;font:800 clamp(15px,2.2vh,19px) "Baloo 2",sans-serif;color:var(--ink,#233052)}
.items .shopgroup:first-child{margin-top:0}
/* logo in de kopbalk (public/merk/): kuikentje, en op het beginscherm het tekstlogo */
.logo .logo-kuiken{height:clamp(28px,3.8vh,40px);width:auto;flex:none;display:block}
.logo .logo-word{height:clamp(20px,2.8vh,30px);width:auto;flex:none;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* winkel: eerst iets anders nodig (bv. de Voetbal voor een voetbalshirt) */
.item .need{display:block;font-size:11.5px;font-weight:800;line-height:1.2;color:#5a4a10;background:#fff3cd;border-radius:8px;padding:2px 6px;margin-top:3px}
.item.needs svg{opacity:.55}
.item.point{animation:point 1.4s ease 1;box-shadow:0 0 0 4px #ffc542}
@keyframes point{0%,100%{transform:scale(1)}20%,60%{transform:scale(1.08)}40%,80%{transform:scale(1)}}
body.calm .item.point{animation:none}
/* rekensom bij kopen */
.bs-card{gap:10px}
.bs-pic svg{width:clamp(70px,20vw,110px);height:auto;display:block;margin:0 auto}
.bs-q{margin:0;font-size:clamp(17px,4.4vw,21px);font-weight:700;line-height:1.35}
.bs-q b{white-space:nowrap}
.bs-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bs-ans{font-size:clamp(20px,5.4vw,28px);padding:10px 4px;min-height:56px}
.bs-ans.gone{opacity:.3;text-decoration:line-through}
.bs-ans.right{background:#2ba86f;box-shadow:0 6px 0 #1f8355}
.bs-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(17px,4.4vw,22px)}
.bs-n{background:#fff7d6;border-radius:10px;padding:2px 10px}
.bs-j{color:#c0392b}

/* Voor jou / Straks (core/groepen.js): wat nog niet bij de groep hoort, staat grijs achteraan */
.tbl.off.straks .stars3{visibility:visible}
.tbl .slot{font-style:normal;font-size:clamp(10px,1.5vh,13px);font-weight:800;color:#6b7386;white-space:nowrap}
.rl-kop{grid-column:1 / -1;font:800 clamp(12px,1.8vh,16px)/1 "Baloo 2",sans-serif;color:var(--ink);opacity:.75;margin:2px 4px -2px}
/* kleine telefoon met drie landen (Rekenland, Klokland, Taalland): lagere landkaarten, zodat het beginscherm niet scrollt */
@media(max-height:700px){.lands{gap:7px;margin-top:8px}.lc-art{width:58px;height:44px}.landcard{padding-top:6px;padding-bottom:6px}}

/* eindscherm compacter (Mark, 12-10-2026: "te veel tekst, je kunt naar beneden scrollen"): sterren altijd op één rij,
   het stickerblok liggend (cadeautje of sticker links, tekst rechts) */
.stars:not(.many){flex-wrap:nowrap;gap:4px}
.stars:not(.many) svg{flex:0 1 clamp(26px,min(10vw,6vh),66px);width:auto;height:auto;aspect-ratio:1;min-width:0}
.reward{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(10px,2vw,18px);align-items:center;text-align:left;justify-items:start}
.reward .big{grid-row:1 / span 3;font-size:clamp(40px,8vh,96px);margin:0}
.reward b,.reward small{grid-column:2;text-align:left}
/* beginscherm: Voor ouders en Wat weten we over jou? onopvallend, maar met genoeg tikruimte voor kindervingers (min. 44 px) */
.hubfoot{gap:4px 12px}
.hubfoot .linkbtn{min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center}

/* landkaarten: eigen kleur per land (registerLand col) en voortgang */
.landcard:not(.locked){background-image:var(--bplus),linear-gradient(135deg,var(--lc1,#f76627),var(--lc2,#ef5f8a));box-shadow:0 7px 0 var(--lcs,#c43d6b)}
.landcard:not(.locked):active{box-shadow:0 2px 0 var(--lcs,#c43d6b)}
.lc-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;align-self:flex-start}
.lc-prog{display:flex;align-items:center;gap:6px;margin-top:4px}
.lc-bar{flex:1;max-width:150px;height:7px;border-radius:99px;background:rgba(0,0,0,.22);overflow:hidden}
.lc-bar i{display:block;height:100%;background:#ffe27a;border-radius:99px}
.lc-prog em{font-style:normal;font-weight:800;font-size:clamp(11px,min(3vw,1.6vh),15px);white-space:nowrap}
/* winkel: "61 ★ te besteden" in rustig goud, niet rood */
.hubbadge.stars{background:#fff3cd;color:#7a5600;box-shadow:0 0 0 2px #e0a417 inset;animation:none;white-space:nowrap;right:auto;left:50%;transform:translateX(-50%)}
/* kleine telefoon: landkaarten met voortgang compact houden (balkje dunner, zonder getal; het getal staat in aria-label) */
@media(max-height:700px){.lc-prog{margin-top:3px}.lc-prog em{display:none}.lc-bar{height:5px;max-width:none}.landcard{padding-top:5px;padding-bottom:5px}.lc-txt b{line-height:1}#homeScreen .stage{min-height:72px}}
@media(max-height:700px){#homeScreen .stage{position:relative}#homeScreen .stage-tip{position:absolute;right:8px;bottom:8px;padding:4px 10px}}   /* klein scherm: Aanpassen in de hoek, niet over de klimmer */
#homeScreen .stage{min-height:clamp(110px,15vh,380px)}   /* ruimte voor de landkaarten met voortgang */
@media(max-height:700px){#homeScreen .stage{min-height:72px}}
@media(max-height:800px) and (min-aspect-ratio:1/1){#homeScreen .stage{min-height:92px}}   /* laptop liggend */

/* weekreeks (12-10-2026): kalendertje in plaats van de vlam, vinkjes groen, geen teller als de ouder de reeks uitzet */
.streak.wk{border:0;font:inherit;cursor:pointer;background:#e3f5ea;color:#1f7a4d}
.streak.wk .flame.cal{width:1.05em;height:1.14em;animation:none}
.gp-flame .flame.cal{animation:none}
.gp-week i.ok{background:#2ba86f;box-shadow:0 3px 0 #1f7a4d}
.gp-week .today small{color:#1f7a4d}
.gp-week .today i{outline-color:#bfe6cf}
.gp-num{color:#1f7a4d}
.gp-days{color:#1f7a4d}
.goalparty.noweek .gp-count,.goalparty.noweek #gpWeek,.goalparty.noweek .gp-note{display:none}
/* beginscherm (Mark, 12-10-2026): grotere plaatjes op de landkaarten en een grotere klimmer, ook op een telefoon.
   De klimmer vult het vak (Aanpassen staat in de hoek), de plaatjes zijn breder zonder de kaarten veel hoger te maken */
.lc-art{width:clamp(76px,min(27vw,13.5vh),168px);height:clamp(58px,min(19.5vw,9.6vh),118px)}
#homeScreen .stage svg{inset:6px 0 6px 0;height:calc(100% - 12px)}
#homeScreen .stage-tip{position:absolute;right:clamp(8px,1.6vw,16px);bottom:clamp(8px,1.4vh,14px);padding:4px 10px}
#homeScreen .stage{min-height:clamp(110px,14vh,380px)}
@media(max-height:700px){.lc-art{width:72px;height:50px}#homeScreen .stage{min-height:84px}}

/* beginscherm (Mark, 12-10-2026): begroeting met het weekchipje rechts, dagdoel op één regel, groter klimmervak */
#homeScreen .hubhead{flex-wrap:nowrap}
#homeScreen .hubhead h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#weekChip{flex:none}
#weekChip:empty{display:none}
#homeScreen .daily{flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:8px;margin:clamp(4px,1vh,12px) 0 0}
#homeScreen .stage{min-height:clamp(130px,22vh,420px)}
@media(max-height:700px){#homeScreen .stage{min-height:110px}}
/* onderbalk zoals in een app: vijf tabbladen, pictogram met woordje; tikvlak minstens 48 px */
.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-radius:22px;box-shadow:0 6px 0 rgba(35,48,82,.10);padding:4px}
.tabbar.hidden{display:none}
.tab{position:relative;border:0;background:none;font-family:inherit;color:#5d6580;cursor:pointer;border-radius:16px;
  min-height:52px;padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tab b{font:800 clamp(11.5px,min(3.2vw,1.8vh),15px)/1.1 "Nunito",sans-serif;white-space:nowrap}
.tab .tb-ic{width:clamp(24px,min(7vw,3.6vh),32px);height:clamp(24px,min(7vw,3.6vh),32px)}
.tab[aria-current="page"]{color:#fff;background:#3a7bd5;box-shadow:0 3px 0 #2a5ea6}
.tab:active{transform:translateY(2px)}
.tb-badge{position:absolute;top:0;left:52%;background:#c8305e;color:#fff;font:800 10.5px/1 "Nunito",sans-serif;padding:3px 6px;border-radius:999px;white-space:nowrap}
.tb-dot{position:absolute;top:5px;left:58%;width:11px;height:11px;border-radius:50%;background:#ffc542;box-shadow:0 0 0 2px var(--card)}
.tb-dot.hidden,.tb-badge.hidden{display:none}
.help-card{gap:14px}
.help-link{text-decoration:none;justify-content:center;min-height:44px;display:flex;align-items:center}
#homeScreen .scroller{padding-bottom:9px}
@media(max-height:800px) and (min-aspect-ratio:1/1){#homeScreen .stage{min-height:120px}}   /* laptop liggend */

/* diplomascherm in twee lagen (Mark, 12-10-2026): landen in hun eigen kleur, daaronder bij Rekenland de onderdelen als gelijke tegeltjes */
#diplomaScreen .scroller{overflow-x:hidden}
.diplands{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(6px,1.4vw,12px);margin:0 0 clamp(8px,1.4vh,14px)}
.dipland{border:0;border-radius:clamp(14px,2vh,20px);padding:clamp(6px,1vh,10px) 4px;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:1px;background:#fff;color:var(--lcs,#b8470a);box-shadow:0 4px 0 rgba(35,48,82,.12)}
.dipland b{font:800 clamp(15px,min(4.4vw,2.4vh),22px)/1.1 "Baloo 2",sans-serif;white-space:nowrap}
.dipland small{font-weight:800;font-size:clamp(11.5px,min(3.2vw,1.7vh),14px);white-space:nowrap}
.dipland[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,var(--lc1),var(--lc2));box-shadow:0 4px 0 var(--lcs)}
.dipland:active{transform:translateY(2px)}
#diplomaScreen .dipparts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,1.2vw,10px);margin:0 0 clamp(8px,1.4vh,14px)}
#diplomaScreen .dipparts.hidden{display:none}
@media(min-width:700px){#diplomaScreen .dipparts{grid-template-columns:repeat(10,minmax(0,1fr))}}
.dipparts button{border:2px solid transparent;border-radius:clamp(12px,1.8vh,18px);background:#fff;box-shadow:0 3px 0 rgba(35,48,82,.1);cursor:pointer;font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:clamp(4px,.8vh,8px) 2px;min-height:clamp(52px,7.4vh,80px)}
.dipparts .e{height:clamp(22px,3.2vh,32px);display:flex;align-items:center;justify-content:center;font:800 clamp(18px,2.8vh,26px)/1 "Baloo 2",sans-serif}
.dipparts b{font-weight:800;font-size:clamp(10.5px,min(2.9vw,1.6vh),14px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dipparts button[aria-selected="true"]{border-color:#e8590c;background:#fff1e6;box-shadow:0 3px 0 #f3c4a3}
.diphead{font-size:clamp(17px,min(4.8vw,2.6vh),24px);margin:0 0 clamp(6px,1vh,12px);text-align:center}
.diphead.hidden{display:none}
/* winkel: wat je aan hebt (Mark, 12-10-2026: bij zeldzaam gaf de groene ring om de gekleurde rand een dubbele lijn).
   Nu één rand: groen als je het aan hebt, met een groen vinkje rechtsboven; de zeldzaamheid blijft zichtbaar aan het labeltje bovenop */
.item.wearing{border-color:var(--grass);box-shadow:0 3px 0 rgba(35,48,82,.1)}
.item.wearing::after{content:"";position:absolute;top:-8px;right:-6px;width:24px;height:24px;border-radius:50%;z-index:3;
  background:var(--grass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  box-shadow:0 0 0 2px #fff,0 2px 0 rgba(35,48,82,.2)}
.item.wearing .price.own{background:#1f7a4d;color:#fff}   /* 4,5:1 met witte letters */

/* sets in groepjes en een open set met de losse stukken (12-10-2026) */
.items .shopgroup small{font:700 clamp(11.5px,1.6vh,14px) "Nunito",sans-serif;color:#5d6580;margin-left:6px}
.setdots{display:flex;gap:4px;justify-content:center;min-height:16px;align-items:center}
.setdots i{width:10px;height:10px;border-radius:50%;background:#dfe3ec;box-shadow:inset 0 0 0 1.5px #c3c8d6}
.setdots i.on{background:#2ba86f;box-shadow:none}
.items.sets .sethead{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-bottom:2px}
.items.sets .sethead h3{flex:1;min-width:0;font:800 clamp(18px,2.6vh,24px) "Baloo 2",sans-serif;margin:0}
.items.sets .setcount{font-weight:800;color:#5d6580;white-space:nowrap}
.items.sets .setwear{grid-column:1 / -1}

/* klimmervak met een decor bij de set die je draagt (12-10-2026) */
#kidStage .stage-bg{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0}
#kidStage .stage-bg.hidden{display:none}
#kidStage > svg:not(.stage-bg){z-index:1}
#kidStage.themed > svg:not(.stage-bg) > ellipse{display:none}   /* de groene grondvlekjes niet over het decor */
#kidStage.themed .stage-bubble{display:none}

/* stickers als tekening (Klimba-stijl, stickerkunst.js) */
.stk{display:block;width:1em;height:1em;overflow:visible}
.sticker{flex-direction:column}
.sticker .stk{width:clamp(36px,72%,96px);height:auto;aspect-ratio:1;margin:0 auto}
.big .stk{width:1.1em;height:1.1em;margin:0 auto}
.gp-mile .big .stk{width:1em;height:1em}

/* sticker aantikken: hoe krijg je hem (12-10-2026) */
.sticker{cursor:pointer}
.si-card{align-items:center;gap:10px}
.si-art{width:clamp(96px,30vw,140px);aspect-ratio:1}
.si-art .stk{width:100%;height:100%}
.si-art.locked .stk{filter:brightness(0);opacity:.18}   /* nog niet verdiend: alleen het silhouet */
.si-how{margin:0;font-weight:700;line-height:1.45;max-width:340px}
.si-bar{width:min(100%,260px);height:12px;border-radius:99px;background:rgba(35,48,82,.1);overflow:hidden}
.si-bar.hidden{display:none}
.si-bar i{display:block;height:100%;background:var(--grass);border-radius:99px}

/* iPad (12-10-2026): lang drukken op een knop of plaatje geeft geen kopieermenu, selectie of vergrootglas; invulvelden wel */
body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable]{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
img,svg{-webkit-user-drag:none}

/* Lijnpictogrammen in plaats van emoji (13-10-2026, Mark: alles in Klimba-stijl; core/iconen.js) */
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em;margin-right:.3em}
.icostar{width:1em;height:1em;vertical-align:-.12em}
#soundBtn .ico{margin:0;width:1.25em;height:1.25em}
.lc-go .ico{margin:0;width:.8em;height:.8em}
.parttile .bb-ico .ico{margin:0;width:55%;height:55%;color:#8a6a1a}
.parttile .bb-ico.txt{letter-spacing:-.03em}
.act .ai .ico{margin:0;width:62%;height:62%}
.pt-star .icostar,.donestar .icostar{width:100%;height:100%}
.pt-star,.donestar{line-height:0}
/* slotje op een tegel die nog dicht is: lijntekening in plaats van emoji (13-10-2026) */
.tbl.off::after{content:"";width:clamp(12px,1.8vh,16px);height:clamp(12px,1.8vh,16px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d82a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3M12 15v2'/%3E%3C/svg%3E") center/contain no-repeat}
#shopScreen svg.ico{width:1em;height:1em;flex:none}
.shopsec .e svg{width:1.3em;height:1.3em;display:block;margin:0 auto}
#homeScreen .stage-tip{display:inline-flex;align-items:center;gap:5px}#homeScreen .stage .stage-tip svg.ico{position:static;inset:auto;width:1.05em;height:1.05em;margin:0;flex:none}   /* .stage svg zet tekeningen absoluut (de klimmer); het potloodje niet */
.parttile .bb-ico.art .tegelart{width:90%;height:90%;display:block}
.parts.many .parttile .bb-ico.art{width:clamp(42px,6.2vh,64px);height:clamp(42px,6.2vh,64px)}
/* ster bij een behaald onderdeel of een behaalde stap: vaste maat (13-10-2026; zonder maat werd de tekening heel groot en half afgeknipt) */
.pt-star{width:clamp(24px,3.4vh,34px);height:clamp(24px,3.4vh,34px);top:clamp(5px,.8vh,9px);right:clamp(6px,1vw,10px);filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.donestar{width:clamp(18px,2.6vh,26px);height:clamp(18px,2.6vh,26px)}
.pt-star .icostar,.donestar .icostar{display:block;width:100%;height:100%}