@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/baloo-2-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2')}
/* Layout: one full-screen tablet app. Each screen is a column (button bar + play area); play areas are size
   containers so cards, boards and sheets scale with the tablet in both orientations. Grids that must fit an
   exact count of cards are sized in script. One bright daylight look on purpose (a toddler app), so there is
   no dark variant; every color is set explicitly. */
:root{
  --ink:#2b2440; --paper:#ffffff; --muted:#5f5872;
  --bg:#dcedf9; --bg2:#bcd9ef; --accent:#3559a6; --accent2:#f2b134; --soft:#f1f7fc;
  --ok:#36a15a; --ok-dark:#237a40; --no:#e0603f;
  --display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
html{height:100%;box-sizing:border-box;overscroll-behavior:none;background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:var(--display);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#app{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px;
  --shade:color-mix(in srgb,var(--accent) 30%,var(--bg));transition:background-color .5s}
#app[data-world="bijbel"]{--bg:#d3eaf7;--bg2:#f0dcb0;--accent:#2a6cb0;--accent2:#f2b134;--soft:#eaf5fc}
#app[data-world="dino"]{--bg:#dcf0d2;--bg2:#b9dc9f;--accent:#2f7d2b;--accent2:#f08a24;--soft:#eff8e9}
#app[data-world="zoo"]{--bg:#fdf1cc;--bg2:#f3d98a;--accent:#c4561f;--accent2:#1fa094;--soft:#fff8e4}
button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--accent2);outline-offset:3px}
svg{display:block}
#stage{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1}
.screen{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;animation:enter .4s cubic-bezier(.2,.8,.3,1)}
@keyframes enter{from{opacity:.3;transform:translateY(14px) scale(.985)}}
.press{transition:transform .12s,box-shadow .12s}
.press:active{transform:translateY(4px) scale(.96)}
.decor{position:absolute;left:0;right:0;bottom:0;width:100%;height:26%;z-index:0;pointer-events:none}

/* ---- top bar ---- */
.bar{flex:none;display:flex;align-items:center;gap:12px;min-height:70px;position:relative;z-index:3}
.round{flex:none;width:66px;height:66px;border-radius:50%;background:var(--paper);color:var(--accent);display:grid;place-items:center;box-shadow:0 6px 0 var(--shade)}
.round svg{width:56%;height:56%}
.round:active{box-shadow:0 2px 0 var(--shade)}
.round.ok{background:var(--ok);color:#fff;box-shadow:0 6px 0 var(--ok-dark)}
.round.on{background:var(--accent);color:#fff}
.bar-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1}
.bar h2{margin:0;text-align:center;font-weight:800;font-size:clamp(24px,3.3vw,40px);line-height:1.05;color:var(--accent);text-wrap:balance}
.lvl{display:flex;gap:3px;margin-top:3px}
.lvl i{width:15px;height:15px;background:color-mix(in srgb,var(--accent) 22%,#fff);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.lvl i.on{background:var(--accent2)}
.area{flex:1;min-height:0;position:relative;container-type:size}
.fill{position:absolute;inset:0}

/* ---- mascot ---- */
.pip{overflow:visible}
.pip .pip-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.pip .pip-beak{transform-box:fill-box;transform-origin:top center}
.talking .pip .pip-beak{animation:beak .22s ease-in-out infinite alternate}
@keyframes beak{to{transform:scaleY(.55)}}
.pip .pip-wl,.pip .pip-wr{transform-box:fill-box}
.pip .pip-wl{transform-origin:top right}.pip .pip-wr{transform-origin:top left}
.pip.wave .pip-wr,.cheer .pip .pip-wr{animation:flapR .35s ease-in-out infinite alternate}
.cheer .pip .pip-wl{animation:flapL .35s ease-in-out infinite alternate}
@keyframes flapR{to{transform:rotate(-38deg)}}
@keyframes flapL{to{transform:rotate(38deg)}}
.buddy{position:absolute;z-index:4;left:max(8px,env(safe-area-inset-left,0px));bottom:6px;width:clamp(78px,11vmin,120px);animation:peek 3.6s ease-in-out infinite;cursor:pointer}
@keyframes peek{0%,100%{transform:translateY(6px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}

/* ---- splash + shelf ---- */
.title{position:relative;z-index:1;margin:0;text-align:center;line-height:.9;font-weight:800;color:var(--accent)}
.title small{display:block;font-size:clamp(22px,3.2vw,34px);font-weight:700;letter-spacing:.06em;color:var(--muted)}
.title .word{font-size:clamp(54px,9vw,104px);letter-spacing:.01em;text-shadow:0 5px 0 rgba(43,36,64,.13)}
.title .word b{font-weight:800;display:inline-block;animation:wob 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.45s)}
.title .word b:nth-child(7n+1){color:#e0463e}.title .word b:nth-child(7n+2){color:#ec8420}.title .word b:nth-child(7n+3){color:#3a9a4f}
.title .word b:nth-child(7n+4){color:#2f6fd0}.title .word b:nth-child(7n+5){color:#8a5cc7}.title .word b:nth-child(7n+6){color:#dc5b8b}.title .word b:nth-child(7n+7){color:#d29a00}
@keyframes wob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:24%;z-index:0;pointer-events:none}
.clouds{position:absolute;inset:0;z-index:0;pointer-events:none}
.splash{justify-content:center;align-items:center;gap:3vh}
.splash-row{position:relative;z-index:1;display:flex;align-items:center;gap:4vw}
.splash .pip{width:clamp(130px,22vmin,220px);animation:hop .8s ease-in-out infinite alternate}
.play{position:relative;z-index:1;width:clamp(130px,22vmin,200px);aspect-ratio:1;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 0 var(--ok-dark),0 0 0 14px rgba(255,255,255,.55);animation:breathe 1.8s ease-in-out infinite}
.play svg{width:46%;height:46%;margin-left:8%}
@keyframes breathe{50%{transform:scale(1.06)}}
.tap-hint{position:relative;z-index:1;margin:0;font-family:var(--body);font-size:16px;color:var(--muted)}
.books{gap:8px}
.shelf{flex:1;min-height:0;position:relative;z-index:1;container-type:size;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:4cqh 4cqw;perspective:1400px}
.book{position:relative;width:min(25cqw,52cqh);aspect-ratio:3/4;border-radius:12px 26px 26px 12px;background:var(--c);
  box-shadow:inset 16px 0 0 var(--c2),inset 19px 0 0 rgba(255,255,255,.25),0 9px 0 rgba(43,36,64,.2);text-align:left;
  animation:bookIn .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .12s);transform-origin:left center}
@keyframes bookIn{from{opacity:0;transform:translateY(40px) rotate(-6deg)}}
.book::after{content:"";position:absolute;right:-8px;top:5%;bottom:5%;width:10px;border-radius:0 7px 7px 0;
  background:repeating-linear-gradient(#ffffff 0 3px,#e2dccd 3px 4px);box-shadow:2px 0 0 rgba(43,36,64,.12)}
.book.opening{z-index:5;animation:bookOpen .55s cubic-bezier(.5,0,.7,.4) forwards}
@keyframes bookOpen{to{transform:scale(1.25) rotateY(-75deg);opacity:0}}
.book-in{position:absolute;inset:0;container-type:inline-size}
.book-pad{position:absolute;inset:0;display:flex;flex-direction:column;gap:6cqi;padding:10cqi 9cqi 9cqi 16cqi}
.cover-art{flex:1;min-height:0;position:relative;background:#fff;border-radius:8cqi;box-shadow:inset 0 -5px 0 rgba(43,36,64,.08)}
.cover-art svg{position:absolute;inset:9%;width:82%;height:82%;animation:bob 2.6s ease-in-out infinite alternate}
.book-title{flex:none;color:#fff;font-weight:800;font-size:9.6cqi;line-height:1.05;text-shadow:0 3px 0 rgba(0,0,0,.18);text-wrap:balance}
.book-count{position:absolute;top:6cqi;right:-2cqi;background:var(--paper);color:var(--ink);font-weight:800;font-size:7cqi;padding:1cqi 3.5cqi;border-radius:999px;box-shadow:0 3px 0 rgba(43,36,64,.18);transform:rotate(5deg);display:flex;gap:1.5cqi;align-items:center}
.book-count i{width:6cqi;height:6cqi;background:#f2b134;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gear{position:absolute;z-index:3;top:12px;right:max(16px,env(safe-area-inset-right,0px));width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.7);color:var(--muted);display:grid;place-items:center;touch-action:none}
.gear>svg:first-child{width:56%;height:56%}
.gear .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gear .ring circle{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170}
.gear.holding .ring circle{animation:ring 3s linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
@media (orientation:portrait){.book{width:min(40cqw,32cqh)}}

/* ---- activity menu ---- */
.tiles{position:absolute;inset:0;display:grid;justify-content:center;align-content:center;gap:18px;
  grid-template-columns:repeat(6,var(--t));--t:min(calc((100cqw - 90px) / 6),calc((100cqh - 18px) / 2.1))}
@media (orientation:portrait){.tiles{grid-template-columns:repeat(3,var(--t));--t:min(calc((100cqw - 36px) / 3),calc((100cqh - 54px) / 4.2))}}
.tile{position:relative;width:var(--t);aspect-ratio:1/1.05;background:var(--paper);border-radius:30px;box-shadow:0 8px 0 var(--shade);
  animation:tileIn .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .04s)}
@keyframes tileIn{from{opacity:0;transform:scale(.5) rotate(-8deg)}}
.tile:active{box-shadow:0 3px 0 var(--shade)}
.tile-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;padding:9% 7% 8%}
.tile-ic{display:block;position:relative;width:80%;flex:1;min-height:0}
.tile-ic svg{position:absolute;inset:0;width:100%;height:100%}
.tile:hover .tile-ic svg,.tile:focus-visible .tile-ic svg{animation:wiggle .5s ease-in-out}
.tile-name{font-weight:800;font-size:clamp(15px,calc(var(--t) * .12),26px);color:var(--accent);line-height:1;text-align:center}
.tile .lvl{margin-top:2px}
.tile .lvl i{width:clamp(9px,calc(var(--t) * .07),15px);height:clamp(9px,calc(var(--t) * .07),15px)}
.tile.special{background:color-mix(in srgb,var(--accent2) 22%,#fff)}
@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* ---- shared picture + cards ---- */
.pic{width:100%;height:100%;overflow:visible}
.pic.shadow{filter:brightness(0);opacity:.7}
.pw.flip{transform:scaleX(-1)}
.pw.bob.flip{transform:none}
.pw.bob.flip .pic{transform:scaleX(-1)}
.card{position:relative;border-radius:26px;background:var(--paper);box-shadow:0 7px 0 var(--shade);transition:transform .15s,box-shadow .2s}
.card>.pic,.card>.pw{position:absolute;inset:9%;width:82%;height:82%}
.pw .pic{position:absolute;inset:0}
.bob{animation:bob 2.4s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(3%)}to{transform:translateY(-3%)}}
.shake{animation:shake .45s ease-in-out}
@keyframes shake{20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(9px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.hint{animation:pulse .7s ease-in-out 3}
@keyframes pulse{50%{transform:scale(1.1);box-shadow:0 7px 0 var(--shade),0 0 0 9px var(--accent2)}}
.yay{animation:yay .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes yay{40%{transform:scale(1.18) rotate(-5deg)}70%{transform:scale(.95) rotate(3deg)}}
.grid{position:absolute;inset:0;display:grid;justify-content:center;align-content:center;gap:var(--g,16px);grid-template-columns:repeat(var(--cols),var(--cs))}
.grid>*{width:var(--cs);height:var(--cs)}

/* ---- shadow game ---- */
.connect{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr auto;touch-action:none}
.col{display:flex;flex-direction:column;justify-content:space-around;align-items:center;gap:10px}
.col.a{grid-column:1}.col.b{grid-column:3}
.connect .card{width:var(--s);height:var(--s)}
.card.sh{background:var(--soft);box-shadow:0 7px 0 var(--shade),inset 0 0 0 4px rgba(43,36,64,.06)}
.card .reveal{opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.card.sh.done .shadow{opacity:0;transition:opacity .25s}
.card.sh.done .reveal{opacity:1;transform:scale(1)}
.card.active,.card.sel,.card.over{transform:scale(1.06);box-shadow:0 7px 0 var(--shade),0 0 0 7px var(--accent2)}
.card.done{box-shadow:0 7px 0 var(--shade),0 0 0 7px var(--ok)}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lines .live{stroke:var(--accent);stroke-width:13;stroke-dasharray:1 20}
.lines .bad{stroke:var(--no);stroke-width:10;transition:opacity .35s}
.lines .fixed path{stroke:var(--ok);stroke-width:10;stroke-dasharray:var(--len);animation:draw .35s ease-out}
@keyframes draw{from{stroke-dashoffset:var(--len)}}
.lines .fixed circle{fill:var(--ok)}
.connect.rows{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
.connect.rows .col{flex-direction:row}
.connect.rows .col.a{grid-column:1;grid-row:1}.connect.rows .col.b{grid-column:1;grid-row:3}

/* ---- puzzle ---- */
.puz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px}
.board{flex:none;width:var(--b);height:var(--b);overflow:visible;filter:drop-shadow(0 8px 0 var(--shade))}
.board .hole{fill:var(--soft);stroke:var(--accent);stroke-width:2.4;stroke-dasharray:6 5;animation:march 1.2s linear infinite}
.board .hole.ghost{fill:none;stroke-opacity:.6}
@keyframes march{to{stroke-dashoffset:-22}}
.tray{display:grid;gap:14px;grid-template-columns:repeat(var(--tc),var(--p))}
.opt{width:var(--p);height:var(--p);border-radius:24px;background:var(--paper);box-shadow:0 6px 0 var(--shade);display:grid;place-items:center;padding:5%;touch-action:none}
.opt .pc{width:100%;height:100%;overflow:visible}
.opt.used{visibility:hidden}
.floating{position:fixed;z-index:60;pointer-events:none;overflow:visible;transition:width .14s,height .14s}
.floating.drag{filter:drop-shadow(0 10px 8px rgba(43,36,64,.3))}
@media (orientation:portrait){.puz{flex-direction:column}}

/* ---- memory ---- */
.mc{perspective:900px;background:none;box-shadow:none}
.mc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.mc.open .mc-in{transform:rotateY(180deg)}
.mc-face,.mc-back{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 0 var(--shade)}
.mc-back{background:var(--accent);display:grid;place-items:center;overflow:hidden;
  background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.18) 0 12%,transparent 13%),radial-gradient(circle at 75% 70%,rgba(255,255,255,.14) 0 16%,transparent 17%)}
.mc-back svg{width:46%;height:46%}
.mc-face{background:var(--paper);transform:rotateY(180deg)}
.mc-face .pic{position:absolute;inset:10%;width:80%;height:80%}
.mc.ok .mc-face{box-shadow:0 6px 0 var(--shade),0 0 0 6px var(--ok)}
.mc.ok{animation:yay .6s cubic-bezier(.3,1.6,.5,1)}

/* ---- zoek dezelfde / anders / tellen ---- */
.split{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4cqw}
.target{flex:none;width:min(38cqh,28cqw);display:flex;flex-direction:column;align-items:center;gap:10px}
.target .card{width:100%;aspect-ratio:1;box-shadow:0 7px 0 var(--shade),0 0 0 7px var(--accent2)}
.target-tag{font-weight:800;font-size:clamp(20px,2.4vw,30px);color:var(--accent);display:flex;align-items:center;gap:8px}
.target-tag svg{width:1.3em;height:1.3em}
.split .area2{flex:1;min-width:0;height:100%;position:relative;container-type:size}
@media (orientation:portrait){.split{flex-direction:column;gap:3cqh}.target{width:min(26cqh,40cqw)}.split .area2{width:100%;flex:1}}
.choice{cursor:pointer}
.choice.right{box-shadow:0 7px 0 var(--shade),0 0 0 7px var(--ok)}

/* ---- zoekplaat ---- */
.hunt{position:absolute;inset:0;display:flex;gap:18px;align-items:center;justify-content:center}
.hunt-scene{flex:none;width:var(--sw);height:var(--sh);border-radius:26px;overflow:hidden;box-shadow:0 8px 0 var(--shade);background:#fff;touch-action:manipulation}
.hunt-scene svg{width:100%;height:100%}
.zi{cursor:pointer}
.zb{transform-box:fill-box;transform-origin:center;animation:bob 2.6s ease-in-out infinite alternate}
.zi.no .zb{animation:shake .45s ease-in-out}
.zi.found{pointer-events:none}
.zi.found .zb{animation:foundAnim .6s ease-in forwards}
@keyframes foundAnim{40%{transform:scale(1.4)}100%{transform:scale(.2);opacity:0}}
.bush{pointer-events:none}
.find{display:flex;flex-direction:column;gap:12px;align-items:center}
.find .card{width:var(--fs);height:var(--fs)}
.find .card.got{box-shadow:0 7px 0 var(--shade),0 0 0 6px var(--ok)}
.find .card.got::after{content:"";position:absolute;right:-8px;top:-8px;width:34px;height:34px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M12 25l8 8 16-17' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;animation:yay .5s}
@media (orientation:portrait){.hunt{flex-direction:column}.find{flex-direction:row}}

/* ---- doolhof ---- */
.maze{position:absolute;inset:0;display:grid;place-items:center}
.maze svg{width:var(--mw);height:var(--mh);overflow:visible;touch-action:none;filter:drop-shadow(0 8px 0 var(--shade))}
.maze .hero{transition:transform .14s ease-out}
.maze .hero-in{transform-box:fill-box;transform-origin:center;animation:bob 1.6s ease-in-out infinite alternate}
.maze .goal-in{transform-box:fill-box;transform-origin:center;animation:yayLoop 1.8s ease-in-out infinite}
@keyframes yayLoop{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
.maze .gem{transform-box:fill-box;transform-origin:center;animation:spin 3s linear infinite}
.maze .gem.got{animation:foundAnim .5s ease-in forwards}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- stippen ---- */
.dots{position:absolute;inset:0;display:grid;place-items:center}
.dots .sheet-paper{width:min(100cqh,100cqw);height:min(100cqh,100cqw)}
.dots svg{width:100%;height:100%;touch-action:none;overflow:visible}
.dot circle.d{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;transform-box:fill-box;transform-origin:center}
.dot.done circle.d{fill:var(--accent)}
.dot text{font-family:var(--display);font-weight:800;font-size:12px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.dot.next circle.ring{fill:none;stroke:var(--accent2);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:ringP 1s ease-out infinite}
@keyframes ringP{from{transform:scale(.8);opacity:1}to{transform:scale(1.9);opacity:0}}
.dots .seg{stroke:var(--accent);stroke-width:4;stroke-linecap:round;fill:none}
.dots .live{stroke:var(--accent2);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 7;fill:none}
.dots .reveal-art{opacity:0;transition:opacity .9s}
.dots .reveal-art.on{opacity:1}

/* ---- patroon ---- */
.pat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqh}
.train{display:flex;align-items:flex-end;gap:10px;padding:0 6px 16px;position:relative}
.train::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--accent) 45%,#8a6a4a)}
.train .card{width:var(--ps);height:var(--ps)}
.train .card:nth-child(n){animation:wagon .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .08s)}
@keyframes wagon{from{opacity:0;transform:translateX(-60px)}}
.train .q{background:var(--soft);box-shadow:0 7px 0 var(--shade),inset 0 0 0 5px color-mix(in srgb,var(--accent) 30%,transparent);display:grid;place-items:center;font-size:calc(var(--ps) * .55);font-weight:800;color:var(--accent)}
.train .q span{animation:bob 1s ease-in-out infinite alternate}
.train.go .card{animation:hopWave .5s ease-in-out both;animation-delay:calc(var(--i) * .07s)}
@keyframes hopWave{50%{transform:translateY(-22%)}}
.picks{display:flex;gap:22px}
.picks .card{width:var(--ps2);height:var(--ps2)}

/* ---- tellen ---- */
.count{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.5cqh;align-items:center}
.count-field{flex:1;min-height:0;width:100%;position:relative;border-radius:26px;background:var(--paper);box-shadow:0 7px 0 var(--shade)}
.count-field svg{position:absolute;inset:0;width:100%;height:100%}
.cnt{cursor:pointer}
.cnt .badge{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.cnt.on .badge{opacity:1;transform:scale(1)}
.cnt .badge text{font-family:var(--display);font-weight:800;fill:#fff}
.nums{flex:none;display:flex;gap:22px}
.num{width:clamp(96px,17cqh,150px);aspect-ratio:1;border-radius:26px;background:var(--paper);box-shadow:0 7px 0 var(--shade);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:clamp(44px,9cqh,74px);color:var(--accent);line-height:.9}
.num small{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:76%;margin-top:4px}
.num small i{width:9px;height:9px;border-radius:50%;background:var(--accent2)}

/* ---- coloring ---- */
.area.scroll{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.pick{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;padding:6px 6px 22px}
@media (orientation:portrait){.pick{grid-template-columns:repeat(3,1fr)}}
.thumb{aspect-ratio:1;border-radius:26px;background:var(--paper);box-shadow:0 7px 0 var(--shade);padding:10%;animation:tileIn .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .03s)}
.thumb svg{width:100%;height:100%;pointer-events:none}
.thumb.blank{outline:4px dashed var(--shade);outline-offset:-14px}
.paintwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2.5cqw}
.sheet-paper{flex:none;width:min(100cqh,calc(100cqw - 220px));aspect-ratio:1;background:#fff;border-radius:30px;box-shadow:0 8px 0 var(--shade);padding:2.5%;touch-action:none;position:relative}
.paint{width:100%;height:100%;touch-action:none;overflow:visible}
.paint .zone{transition:fill .25s}
.paint .drawn,.paint .lines-g{pointer-events:none}
.palette{display:grid;grid-template-columns:repeat(2,auto);gap:min(1.2cqh,10px) 14px;align-content:center}
.dot-c{width:min(10cqh,64px);aspect-ratio:1;border-radius:50%;background:var(--c);border:5px solid #fff;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.14),0 4px 0 rgba(43,36,64,.18);transition:transform .12s}
.dot-c.rainbow{background:conic-gradient(#e8473f,#f5922f,#f9d23c,#9ad14b,#3fa45b,#6ec6f0,#2f6fd0,#8a5cc7,#f48fb1,#e8473f)}
.dot-c.stamp{background:#fff;display:grid;place-items:center;border-color:var(--accent2)}
.dot-c.stamp svg{width:74%;height:74%}
.dot-c[aria-pressed="true"]{transform:scale(1.16);outline:5px solid var(--ink);outline-offset:2px}
.stamps{position:absolute;z-index:8;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:var(--paper);border-radius:24px;box-shadow:0 10px 30px rgba(43,36,64,.3);animation:tileIn .3s cubic-bezier(.3,1.5,.5,1)}
.stamps button{width:70px;height:70px;border-radius:16px;background:var(--soft);padding:8%}
.stamps button svg{width:100%;height:100%}
@media (orientation:portrait){
  .paintwrap{flex-direction:column;gap:2.5cqh}
  .sheet-paper{width:min(100cqw,calc(100cqh - 190px))}
  .palette{grid-template-columns:repeat(8,auto);gap:12px min(1.6cqw,14px)}
  .dot-c{width:min(10cqw,62px)}
}

/* ---- stickerboek ---- */
.album{position:absolute;inset:0;display:grid;justify-content:center;align-content:center;gap:18px;grid-template-columns:repeat(5,var(--as));--as:min(calc((100cqw - 72px) / 5),calc((100cqh - 18px) / 2.15))}
@media (orientation:portrait){.album{grid-template-columns:repeat(3,var(--as));--as:min(calc((100cqw - 36px) / 3),calc((100cqh - 54px) / 4.3))}}
.stk{position:relative;width:var(--as);aspect-ratio:1;border-radius:50%;background:var(--paper);box-shadow:0 7px 0 var(--shade),inset 0 0 0 6px #fff,inset 0 0 0 9px color-mix(in srgb,var(--accent2) 60%,#fff)}
.stk .pic{position:absolute;inset:15%;width:70%;height:70%}
.stk.miss{background:var(--soft);box-shadow:0 7px 0 var(--shade)}
.stk.miss .pic{filter:brightness(0);opacity:.15}
.stk .cnt-b{position:absolute;right:2%;top:2%;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:19px;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.stk:not(.miss){animation:stkIn .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .05s)}
@keyframes stkIn{from{transform:scale(.3) rotate(-30deg);opacity:0}}

/* ---- rewards ---- */
.burst{position:absolute;width:0;height:0;z-index:15;pointer-events:none}
.burst i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:var(--c);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:burst .85s ease-out forwards}
@keyframes burst{from{transform:rotate(var(--a)) translateY(-10px) scale(.4)}to{transform:rotate(var(--a)) translateY(-110px) scale(1.1);opacity:0}}
.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 90%,transparent);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.cheer{display:flex;flex-direction:column;align-items:center;gap:2.5vh;position:relative}
.cheer-row{display:flex;align-items:center;gap:4vw}
.cheer .pip{width:min(34vmin,250px);animation:hop .7s ease-in-out infinite alternate}
@keyframes hop{from{transform:translateY(8px) rotate(-4deg)}to{transform:translateY(-14px) rotate(4deg)}}
.sticker{position:relative;width:min(30vmin,220px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 10px 0 rgba(43,36,64,.15),inset 0 0 0 8px #fff,inset 0 0 0 12px var(--accent2);animation:stickIn .9s cubic-bezier(.3,1.5,.5,1) .25s both}
.sticker .pic{position:absolute;inset:16%;width:68%;height:68%}
.sticker::before{content:"Sticker!";position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(-6deg);background:var(--accent2);color:#fff;font-weight:800;font-size:clamp(16px,2.2vmin,22px);padding:2px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.15)}
@keyframes stickIn{from{transform:scale(0) rotate(-200deg)}to{transform:scale(1) rotate(-6deg)}}
.levelup{position:absolute;top:-8vh;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--accent);color:#fff;font-weight:800;font-size:clamp(22px,3.4vmin,34px);padding:6px 22px;border-radius:999px;box-shadow:0 6px 0 rgba(0,0,0,.18);animation:lvlIn .7s cubic-bezier(.3,1.6,.5,1) .6s both;display:flex;align-items:center;gap:10px}
.levelup i{width:.9em;height:.9em;background:var(--accent2);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes lvlIn{from{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.6)}}
.cel-btns{display:flex;align-items:center;gap:32px}
.big{width:clamp(84px,14vmin,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--accent);box-shadow:0 7px 0 var(--shade)}
.big svg{width:52%;height:52%}
.big.go{width:clamp(108px,19vmin,156px);background:var(--ok);color:#fff;box-shadow:0 8px 0 var(--ok-dark)}
.confetti i{position:absolute;left:50%;top:42%;width:16px;height:22px;border-radius:4px;background:var(--c);animation:fly 1.5s cubic-bezier(.2,.7,.4,1) forwards}
.confetti i:nth-child(3n){border-radius:50%;width:16px;height:16px}
@keyframes fly{from{transform:translate(-50%,-50%) scale(.3)}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));opacity:0}}

/* ---- ambient scenery ---- */
.drift{animation:drift 26s ease-in-out infinite alternate}
.drift.slow{animation-duration:40s}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.sway{animation:sway 4s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.smoke{transform-box:fill-box;transform-origin:center;animation:smoke 4s ease-out infinite}
.smoke.s2{animation-delay:-2s}
@keyframes smoke{from{transform:translateY(0) scale(.6);opacity:.9}to{transform:translateY(-60px) scale(1.8);opacity:0}}
.flyby{animation:flyby 18s linear infinite}
@keyframes flyby{from{transform:translate(-90px,40px)}50%{transform:translate(600px,10px)}to{transform:translate(1300px,50px)}}

/* ---- parent area ---- */
.modal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(43,36,64,.5);animation:fade .2s}
.sheet{width:min(640px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);border-radius:26px;padding:22px 24px 24px;font-family:var(--body);font-size:16px;line-height:1.45;box-shadow:0 18px 40px rgba(43,36,64,.3)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sheet h3{margin:0;font-family:var(--display);font-weight:800;font-size:28px;color:#3559a6}
.sheet h4{margin:18px 0 4px;font-family:var(--display);font-weight:800;font-size:20px;color:#3559a6}
.x{width:46px;height:46px;border-radius:50%;background:#eef1f7;color:var(--ink);display:grid;place-items:center}
.x svg{width:50%;height:50%}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid #e7e3ee}
.opt-row b{display:block;font-size:17px}
.opt-row span{display:block;color:var(--muted);font-size:14.5px}
.switch{flex:none;width:62px;height:36px;border-radius:999px;background:#cfcadb;position:relative;transition:background .2s}
.switch::after{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.switch[aria-pressed="true"]{background:var(--ok)}
.switch[aria-pressed="true"]::after{transform:translateX(26px)}
.btn-sec{flex:none;padding:10px 16px;border-radius:12px;background:#eef1f7;color:var(--ink);font-weight:600;font-family:var(--body);font-size:15px}
.btn-sec.warn{background:#f6e4df;color:#9c3a22}
.btn-sec.main{background:var(--ok);color:#fff}
.lv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #f0edf4}
.lv-row b{font-weight:600}
.stepper{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.stepper button{width:40px;height:40px;border-radius:12px;background:#eef1f7;font-size:22px;font-weight:700;font-family:var(--body)}
.stepper span{min-width:64px;text-align:center;color:var(--muted);font-size:14.5px}
.info{padding:14px 16px;margin:8px 0 4px;border-radius:16px;background:#f1f6fd}
.info b{font-size:17px}
.info ol{margin:6px 0 0;padding-left:22px}
.info li{margin:4px 0}
.note{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#fff4dc;font-size:14.5px}
.ver{margin:14px 0 0;color:var(--muted);font-size:13.5px}
.gate{width:min(380px,100%);text-align:center}
.gate .q{font-family:var(--display);font-size:30px;font-weight:700;margin:6px 0 4px}
.entry{height:58px;margin:0 auto 14px;width:150px;border-radius:14px;background:#f1f6fd;font-family:var(--display);font-size:40px;font-weight:800;line-height:58px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.key{height:62px;border-radius:16px;background:#eef1f7;font-family:var(--display);font-size:28px;font-weight:700}
.key:active{background:#dfe5f0}
.key.ok{background:var(--ok);color:#fff;font-size:22px}
.gate.wrong .entry{animation:shake .4s}

/* ===== versie 3 ===== */
#app[data-world="hulp"]{--bg:#e4edf8;--bg2:#c9d6ea;--accent:#c8332a;--accent2:#2f6fd0;--soft:#f3f7fc}
.book{width:min(21cqw,50cqh)}
@media (orientation:portrait){.book{width:min(40cqw,30cqh)}}
.grid.tiles{grid-template-columns:repeat(var(--cols),var(--cs));--t:var(--cs)}
.tabs{flex:none;display:flex;justify-content:center;gap:12px;position:relative;z-index:3}
.tab{display:flex;align-items:center;gap:8px;padding:5px 18px 5px 6px;border-radius:999px;background:color-mix(in srgb,var(--paper) 75%,transparent);color:var(--accent);font-weight:800;font-size:clamp(17px,2vw,24px);box-shadow:0 4px 0 var(--shade);transition:transform .15s,background .2s}
.tab .tab-ic{width:46px;height:46px;display:block;border-radius:50%;padding:3px}
.tab .tab-ic svg{width:100%;height:100%}
.tab.on{background:var(--accent);color:#fff;transform:translateY(-2px) scale(1.05)}
.tab.on .tab-ic{background:#fff}
@media (max-width:700px){.tab span:last-child{display:none}.tab{padding:5px}}
.stk-btn{position:relative}
.stk-btn svg{width:70%;height:70%}
.stk-btn b{position:absolute;right:-6px;top:-6px;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--accent2);color:#fff;font-size:16px;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.seg{display:flex;gap:8px;margin:4px 0}
.seg button{flex:1;height:48px;border-radius:14px;background:#eef1f7;font-family:var(--display);font-size:20px;font-weight:700}
.seg button[aria-pressed="true"]{background:#3559a6;color:#fff}
.name-in{flex:none;width:150px;height:44px;border-radius:12px;border:2px solid #d9d4e4;padding:0 12px;font-size:18px;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;-webkit-user-select:text;user-select:text;color:var(--ink);background:#fff}

/* racen */
.race{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px}
.rprog{flex:none;position:relative;height:46px;margin:0 34px 0 24px}
.rprog-line{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:4px;background:color-mix(in srgb,var(--accent) 25%,#fff)}
.rfin{position:absolute;right:-16px;top:4px;width:28px;height:38px;border-radius:4px;background:repeating-conic-gradient(#2b2440 0 25%,#fff 0 50%) 0 0/14px 14px;box-shadow:0 0 0 3px #2b2440}
.rmark{position:absolute;top:3px;left:-20px;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--shade)}
.rmark .pw{position:absolute;inset:10%;width:80%;height:80%}
.rmark .pw .pic{position:absolute;inset:0}
.rmark.me{box-shadow:0 0 0 4px var(--accent2);z-index:2}
.rtrack{flex:1;min-height:0;position:relative;overflow:hidden;border-radius:26px;box-shadow:0 8px 0 var(--shade);background:#bfe6ff;touch-action:none}
.rbg{position:absolute;left:0;right:0;top:0;height:44%;overflow:hidden}
.rbg-strip{display:flex;height:100%;will-change:transform}
.rbg-strip svg{height:100%;width:auto;aspect-ratio:400/280;flex:none}
.road{position:absolute;left:0;right:0;bottom:0;top:38%;background-color:var(--road);
  background-image:linear-gradient(90deg,rgba(255,255,255,.85) 50%,transparent 50%),linear-gradient(90deg,rgba(255,255,255,.85) 50%,transparent 50%);
  background-size:120px 6px,120px 6px;background-repeat:repeat-x;background-position:0 33.3%,0 66.6%;box-shadow:inset 0 8px 0 rgba(0,0,0,.1)}
.finish{position:absolute;top:38%;bottom:0;left:0;width:28px;background:repeating-conic-gradient(#2b2440 0 25%,#fff 0 50%) 0 0/28px 28px;opacity:.9;z-index:5}
.racer,.robj{position:absolute;left:0;top:0;will-change:transform}
.racer .racer-in{position:absolute;inset:0}
.racer .pw,.robj svg{position:absolute;inset:0;width:100%;height:100%}
.racer .pw .pic{position:absolute;inset:0}
.racer.moving .racer-in{animation:run .26s ease-in-out infinite alternate}
@keyframes run{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6%) rotate(2deg)}}
.racer::after{content:"";position:absolute;left:18%;right:18%;bottom:2%;height:9%;border-radius:50%;background:rgba(0,0,0,.16);z-index:-1}
.racer.me .racer-in::before{content:"";position:absolute;left:50%;top:-14%;width:22px;height:22px;margin-left:-11px;background:var(--accent2);clip-path:polygon(0 0,100% 0,50% 100%)}
.racer .racer-in.spin{animation:spin .6s linear}
.robj.got svg{animation:foundAnim .5s ease-in forwards}
.robj.hit svg{animation:shake .45s ease-in-out}
.robj.star svg{animation:bob 1s ease-in-out infinite alternate}
.count-big{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(70px,18vmin,180px);font-weight:800;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke;text-shadow:0 8px 0 rgba(0,0,0,.2);pointer-events:none;z-index:50}
.gas{position:absolute;right:18px;bottom:18px;z-index:60;width:clamp(110px,17vmin,160px);aspect-ratio:1;border-radius:50%;background:var(--ok);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:22px;line-height:1;box-shadow:0 8px 0 var(--ok-dark),0 0 0 8px rgba(255,255,255,.6);touch-action:none}
.gas svg{width:46%;height:46%}
.gas.on{transform:translateY(4px) scale(.95);box-shadow:0 3px 0 var(--ok-dark),0 0 0 12px rgba(255,255,255,.85)}
.lanebtn{position:absolute;left:18px;z-index:60;width:clamp(70px,11vmin,100px);aspect-ratio:1;border-radius:50%;background:var(--paper);color:var(--accent);display:grid;place-items:center;box-shadow:0 6px 0 var(--shade)}
.lanebtn svg{width:56%;height:56%}
.lanebtn.up{bottom:calc(36px + clamp(70px,11vmin,100px))}.lanebtn.down{bottom:18px}

/* ballonnen, vangen */
.sky-play{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px}
.goalbar{flex:none;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;min-height:46px}
.goalbar i{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--shade);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--accent);font-size:17px;transition:transform .3s,background .3s}
.goalbar i.on{background:var(--accent2);color:#fff;transform:scale(1.15);box-shadow:none}
.goalbar .want{width:54px;height:54px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px #fff,0 5px 0 4px var(--shade);margin-right:12px}
.goalbar .want.pic{background:#fff;padding:7px}
.goalbar .want.pic svg{width:100%;height:100%}
.bfield{flex:1;min-height:0;position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(#a9dcfb,#eef8ff);box-shadow:0 8px 0 var(--shade);touch-action:none}
.balloon{position:absolute;left:0;top:0;will-change:transform;touch-action:none}
.balloon svg{width:100%;height:100%}
.blabel{position:absolute;left:25%;top:10%;width:50%;height:48%;display:grid;place-items:center;pointer-events:none}
.blabel .pic{width:100%;height:100%;background:#fff;border-radius:50%;padding:8%}
.blabel b{font-size:calc(var(--bs,120px) * .3);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke;line-height:1}
.balloon.pop svg{animation:popB .3s ease-out forwards}
.balloon.pop .blabel{opacity:0}
@keyframes popB{to{transform:scale(1.6);opacity:0}}
.fall{position:absolute;left:0;top:0;will-change:transform;pointer-events:none}
.fall svg{width:100%;height:100%}
.fall.caught{transition:opacity .25s;opacity:0}
.basket{position:absolute;left:0;top:0;pointer-events:none}
.basket svg{width:100%;height:100%}

/* muziek */
.music{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.mprog{display:flex;gap:8px}
.mprog i{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--shade)}
.mprog i.on{background:var(--accent2);box-shadow:none}
.pads{display:grid;grid-template-columns:repeat(2,var(--ps,200px));gap:22px}
.pad{position:relative;width:var(--ps,200px);height:var(--ps,200px);border-radius:34px;background:var(--c);box-shadow:0 9px 0 rgba(0,0,0,.22);transition:transform .1s,filter .1s,box-shadow .1s;filter:saturate(.75) brightness(.92);touch-action:none}
.pad .pw{position:absolute;inset:17%;width:66%;height:66%;background:rgba(255,255,255,.88);border-radius:50%}
.pad .pw .pic{position:absolute;inset:12%;width:76%;height:76%}
.pad.lit{filter:saturate(1.25) brightness(1.12);transform:scale(1.06);box-shadow:0 9px 0 rgba(0,0,0,.22),0 0 0 10px #fff,0 0 50px 14px var(--c)}

/* groot en klein, halve plaatjes */
.sizeg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqh}
.slots{display:flex;gap:14px;align-items:flex-end}
.slot{position:relative;width:var(--ps);height:var(--ps);border-radius:22px;border:4px dashed var(--shade);background:rgba(255,255,255,.45)}
.slot.full{border-color:transparent;background:var(--paper);box-shadow:0 6px 0 var(--shade)}
.slots.go .slot{animation:hopWave .5s ease-in-out both}
.slots.go .slot:nth-child(2){animation-delay:.08s}.slots.go .slot:nth-child(3){animation-delay:.16s}.slots.go .slot:nth-child(4){animation-delay:.24s}.slots.go .slot:nth-child(5){animation-delay:.32s}
.sz,.ghost{position:absolute;inset:0;display:grid;place-items:end center}
.sz .pic,.ghost .pic{width:calc(var(--k) * 86%);height:calc(var(--k) * 86%);margin-bottom:6%}
.ghost{opacity:.22}
.arrowline{font-weight:800;color:var(--accent);font-size:clamp(18px,2.4vw,28px)}
.sizeg .picks{display:flex;gap:14px}
.sizeg .picks .card{width:var(--ps);height:var(--ps)}
.halfbox{width:min(46cqh,34cqw)}
.whole{display:flex;width:100%;aspect-ratio:1;padding:7%}
.whole .hl,.whole .hr{position:relative;flex:1;height:100%}
.whole .pic{position:absolute;inset:0;width:100%;height:100%}
.whole .hr{border:4px dashed var(--shade);border-left:none;border-radius:0 16px 16px 0;display:grid;place-items:center;font-size:clamp(40px,8cqh,80px);font-weight:800;color:var(--accent)}
.whole .hr.full{border-color:transparent}
.hr-pic{position:absolute;inset:8% 26%}
.hr-pic .pic,.floating .pic{width:100%;height:100%}
.pic.half{overflow:hidden}

/* nakleuren, kleur op nummer */
.cg .example{flex:none;width:min(40cqh,27cqw);aspect-ratio:1;padding:4%}
.cg .example .ex-svg{width:100%;height:100%}
.ex-tag{position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(-5deg);background:var(--accent2);color:#fff;font-weight:800;padding:0 14px;border-radius:999px;font-size:18px;white-space:nowrap;z-index:2}
.cg .sheet-paper{width:min(100cqh,calc(100cqw - 230px - min(40cqh,27cqw)))}
.dot-c.numd{display:grid;place-items:center}
.numd b{color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke;font-size:26px;font-weight:800}
.numlabels{pointer-events:none}
.nl circle{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.nl text{font-family:var(--display);font-weight:800;font-size:9.5px;fill:var(--ink)}
.zone.blink{animation:blink2 .5s ease-in-out 3}
@keyframes blink2{50%{opacity:.2}}
@media (orientation:portrait){.cg .sheet-paper{width:min(100cqw,calc(100cqh - 200px - min(22cqh,30cqw)))}.cg .example{width:min(22cqh,30cqw)}}

/* pen */
.penwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.penwrap .sheet-paper.wide{width:min(100cqw,calc((100cqh - 50px) * 400 / 260));height:auto;aspect-ratio:400/260}
.penwrap .sheet-paper.tall{width:min(100cqw,calc((100cqh - 110px) * 132 / 172));height:auto;aspect-ratio:132/172}
.tr-track{fill:none;stroke:color-mix(in srgb,var(--accent) 13%,#eceaf1);stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.tr-guide{fill:none;stroke:color-mix(in srgb,var(--accent) 50%,#fff);stroke-width:2;stroke-dasharray:4 6;stroke-linecap:round}
.tr-done{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.tr-start{fill:var(--ok);stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ringP2 1.1s ease-in-out infinite}
@keyframes ringP2{50%{transform:scale(1.3)}}
.tr.on .tr-start,.tr.fin .tr-start{animation:none}
.tr-end{fill:var(--accent2);stroke:#fff;stroke-width:2}
.tr.err .tr-track{stroke:#f8c5b8}
.tr.fin .tr-done{stroke:var(--ok)}
.rider{pointer-events:none}
.penprog{display:flex;gap:10px;justify-content:center}
.penprog i,.countrow i{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--shade)}
.penprog i.on{background:var(--ok);box-shadow:none}
.wordstrip{display:flex;gap:10px;justify-content:center;font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1;color:color-mix(in srgb,var(--accent) 35%,#fff);letter-spacing:.04em}
.wordstrip b{display:inline-block;transition:transform .2s}
.wordstrip b.now{color:var(--accent);transform:scale(1.25)}
.wordstrip b.done{color:var(--ok)}
.gl-ghost{fill:none;stroke:#f0eef4;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.donechar{pointer-events:none;animation:fade .2s reverse forwards .6s}
.countrow{display:flex;gap:8px;justify-content:center;min-height:30px;flex-wrap:wrap}
.countrow i{background:var(--accent2);box-shadow:none;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:tileIn .4s both;animation-delay:calc(var(--i) * .1s)}
.pm-head{fill:var(--accent2);stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center}
.pm-err{fill:var(--no);opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.pm-err.flash{animation:flashE .6s ease-out}
@keyframes flashE{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(2.2)}}

/* racen 3d */
.race3{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px}
.rview{flex:1;min-height:0;position:relative;border-radius:26px;overflow:hidden;box-shadow:0 8px 0 var(--shade);touch-action:none;background:#9fd3f2}
.rview canvas{position:absolute;inset:0;width:100%;height:100%}
.steer{position:absolute;bottom:18px;z-index:60;width:clamp(84px,13vmin,120px);aspect-ratio:1;border-radius:50%;background:var(--paper);color:var(--accent);display:grid;place-items:center;box-shadow:0 7px 0 var(--shade);touch-action:none}
.steer svg{width:58%;height:58%}
.steer.left{left:18px}.steer.right{left:calc(32px + clamp(84px,13vmin,120px))}
.steer.on{transform:translateY(4px) scale(.95);background:var(--accent2);color:#fff}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ===== versie 4: prentenboek ===== */
.reader-screen{gap:0}
.reader{position:relative;flex:1;min-height:0;border-radius:24px;overflow:hidden;background:#1b2433;box-shadow:0 8px 0 var(--shade);touch-action:pan-y}
.plates{position:absolute;inset:0;overflow:hidden}
.platewrap{position:absolute;inset:0;opacity:0;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.platewrap.from-r{transform:translateX(6%)}.platewrap.from-l{transform:translateX(-6%)}
.platewrap.on{opacity:1;transform:none}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--ox) var(--oy);animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.rtxt{position:absolute;z-index:3;max-width:40%;padding:18px 24px;border-radius:22px;color:#fff;font-weight:700;font-size:clamp(20px,2.3vw,34px);line-height:1.28;text-wrap:pretty;
  background:linear-gradient(160deg,rgba(14,22,40,.48),rgba(14,22,40,.22));text-shadow:0 2px 8px rgba(0,0,0,.55);transition:box-shadow .3s,opacity .3s;cursor:pointer}
.rtxt p{margin:0}
.rtxt.reading{box-shadow:0 0 0 4px rgba(255,255,255,.55)}
.rtxt.pos-right{right:4%;top:9%}.rtxt.pos-left{left:4%;top:9%}
.rtxt.pos-top{left:50%;top:5%;transform:translateX(-50%);max-width:72%;text-align:center}
.rtxt.pos-bottom{left:50%;bottom:11%;transform:translateX(-50%);max-width:72%;text-align:center}
.reader.cover .rtxt{opacity:0;pointer-events:none}
.rtitle{position:absolute;z-index:3;left:50%;top:6%;transform:translateX(-50%);width:84%;text-align:center;opacity:0;pointer-events:none;transition:opacity .4s}
.rtitle span{font-weight:800;font-size:clamp(40px,6vw,86px);line-height:1;color:#fff;-webkit-text-stroke:3px rgba(30,24,50,.55);paint-order:stroke;text-shadow:0 6px 18px rgba(0,0,0,.45);text-wrap:balance}
.reader.cover .rtitle{opacity:1;pointer-events:auto}
.rbtn{position:absolute;z-index:5;top:14px;height:62px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--accent);display:flex;align-items:center;gap:8px;padding:0 18px 0 12px;font-weight:800;font-size:20px;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.rbtn svg{width:36px;height:36px}
.rbtn.home{left:14px;width:62px;padding:0;justify-content:center}
.rbtn.readaloud{right:14px}
.rbtn.readaloud[aria-pressed="true"]{background:var(--ok);color:#fff}
.rarrow{position:absolute;z-index:5;top:50%;margin-top:-40px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.82);color:var(--accent);display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.rarrow svg{width:56%;height:56%}.rarrow.prev{left:14px}.rarrow.next{right:14px}
.rarrow:disabled{opacity:0;pointer-events:none}
.rdots{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.rdots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.5)}.rdots i.on{background:#fff;transform:scale(1.3)}
.bigread{position:absolute;z-index:5;left:50%;bottom:9%;transform:translateX(-50%);display:none;align-items:center;gap:12px;padding:14px 34px 14px 22px;border-radius:999px;background:var(--ok);color:#fff;font-weight:800;font-size:clamp(24px,3vw,36px);box-shadow:0 8px 0 var(--ok-dark),0 0 0 10px rgba(255,255,255,.4);animation:breathe 1.8s ease-in-out infinite}
.bigread svg{width:46px;height:46px}
.reader.cover .bigread{display:flex}
@media (orientation:portrait){
  .reader{display:flex;flex-direction:column}
  .plates{position:relative;inset:auto;flex:none;width:100%;height:62%}
  .rtxt,.rtxt.pos-left,.rtxt.pos-right,.rtxt.pos-top,.rtxt.pos-bottom{position:relative;inset:auto;transform:none;max-width:none;flex:1;margin:0;border-radius:0;background:none;text-align:left;display:flex;align-items:center;padding:24px 32px 70px;font-size:clamp(24px,4.4vw,38px)}
  .rtitle{top:auto;bottom:24%}.rtitle span{font-size:clamp(34px,7vw,64px)}
  .rarrow{top:auto;bottom:64px;margin:0}
  .reader.cover .bigread{bottom:8%}
}
.booktiles{grid-template-columns:min(560px,100%)!important;--cs:auto}
.booktile{width:min(560px,90cqw)!important;height:auto!important;aspect-ratio:16/10;padding:0;overflow:hidden;position:relative}
.booktile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-name{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;background:linear-gradient(transparent,rgba(10,16,30,.7));color:#fff;font-weight:800;font-size:clamp(22px,2.6vw,32px);text-align:left}
.bt-play{position:absolute;right:16px;top:16px;width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--ok-dark)}
.bt-play svg{width:58%;height:58%}
.opt-row.col{flex-direction:column;align-items:stretch}
.vlist{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:240px;overflow:auto}
.vrow{display:flex;align-items:center;gap:10px}
.vrow span{flex:1;min-width:0}.vrow small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cover-art.painted{overflow:hidden;background:#1b2433}
.cover-art.painted img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 65%}
.cover-art.painted svg{display:none}
.rarrow.next.end{background:var(--ok);color:#fff}
.booktile{width:min(680px,80cqw)!important}
.booktiles{grid-template-columns:min(680px,80cqw)!important}

/* zuinig: niemand tikt een poosje op een rustig scherm, dan staan alle versieringen stil (zie kern/zuinig.js) */
html.stil *,html.stil *::before,html.stil *::after{animation-play-state:paused!important}

/* =====================================================================
   HUB: profielen, poppetje, reiskaart, haltes, beloningen, ouderhoek, nieuwe spellen
   ===================================================================== */
#app[data-world="map"]{--bg:#cfe6f2;--accent:#2f6fd0;--accent2:#f2b134;padding:0}
#app[data-world="night"]{--bg:#2a3a6e;--accent:#2f6fd0}
#app[data-world="hub"]{--bg:#d6eaf6;--accent:#2f6fd0;--accent2:#f2b134;--soft:#eef6fc}
#app[data-world="map"] #stage{min-height:0}

/* ---- profielen ---- */
.profiles{align-items:center;justify-content:center;gap:2vh}
.profiles .title{margin-top:0}
.who{margin:0;font-weight:800;font-size:clamp(24px,3.4vmin,36px);color:var(--accent);position:relative;z-index:2}
.kids{display:flex;flex-wrap:wrap;justify-content:center;gap:4vmin;position:relative;z-index:2}
.kid{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(30vmin,240px);animation:tileIn .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*.08s)}
.kid-av{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#fff3d0);box-shadow:0 10px 0 var(--shade),inset 0 0 0 8px #fff;overflow:hidden}
.kid-av svg{width:100%;height:100%;transform:translateY(6%)}
.kid-name{font-weight:800;font-size:clamp(24px,3.6vmin,38px);color:var(--accent);background:#fff;padding:2px 20px;border-radius:999px;box-shadow:0 5px 0 var(--shade)}
.kid:active .kid-av{transform:scale(.95)}

/* ---- poppetje maken ---- */
.avatar-ed .av-wrap{flex:1;min-height:0;display:flex;gap:3vw;align-items:stretch}
.av-big{flex:0 0 38%;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#fff,#fff3d0 70%);border-radius:30px;box-shadow:0 8px 0 var(--shade)}
.av-big svg{width:90%;height:90%}
.av-opts{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 4px 12px}
.av-help{margin:0;font-family:var(--body);font-size:16px;color:var(--muted)}
.av-field{display:flex;flex-direction:column;gap:4px;font-weight:800;color:var(--accent)}
.av-field input{font:inherit;font-size:24px;padding:8px 14px;border-radius:14px;border:3px solid var(--shade);background:#fff;color:var(--ink);font-family:var(--display)}
.av-row b{display:block;color:var(--accent);font-size:20px;margin-bottom:4px}
.sws{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:52px;height:52px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 4px rgba(255,255,255,.7),0 4px 0 var(--shade);position:relative}
.swatch[aria-pressed="true"]{outline:5px solid var(--accent2);outline-offset:2px}
.swatch.pic{width:74px;height:74px;background:#fff;overflow:hidden}
.swatch.pic svg{width:100%;height:100%}
.swatch.locked svg{opacity:.35;filter:grayscale(1)}
.swatch .lk{position:absolute;right:2px;bottom:2px;width:26px;height:26px;color:var(--muted)}
.btn-main{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;padding:10px 26px 10px 14px;border-radius:999px;background:var(--ok);color:#fff;font-weight:800;font-size:clamp(22px,2.8vmin,30px);box-shadow:0 6px 0 var(--ok-dark)}
.btn-main svg{width:40px;height:40px}
@media (orientation:portrait){.avatar-ed .av-wrap{flex-direction:column}.av-big{flex:0 0 32%}}

/* ---- reiskaart ---- */
.kaart-screen{gap:0}
.kaart{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.kaart::-webkit-scrollbar{display:none}
.kaart-in{position:relative;height:100%;width:calc(var(--W) * var(--s,1) * 1px)}

.kaart-in .ktile{position:absolute;top:0;height:100%;left:calc(var(--x) * var(--s) * 1px);width:calc(var(--w) * var(--s) * 1px);aspect-ratio:auto;border-radius:0;box-shadow:none;background:none;animation:none;object-fit:fill;pointer-events:none}
.mistbank{position:absolute;top:0;height:100%;left:calc(var(--x) * var(--s) * 1px);width:calc(var(--w) * var(--s) * 1px);background:linear-gradient(90deg,rgba(236,242,250,0),rgba(236,242,250,.85) 14%,rgba(240,245,252,.94));pointer-events:none}
.mistbank::before,.mistbank::after{content:"";position:absolute;inset:8% 0 10% 0;background:radial-gradient(ellipse 22% 18% at 20% 40%,#fff 60%,transparent 62%),radial-gradient(ellipse 18% 14% at 46% 60%,#fff 60%,transparent 62%),radial-gradient(ellipse 24% 16% at 72% 34%,#fff 60%,transparent 62%);opacity:.8;animation:drift 18s ease-in-out infinite alternate}
.mistbank::after{opacity:.55;animation-duration:26s;animation-direction:alternate-reverse}
.kroad{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kroad .r0{fill:none;stroke:#7a5230;stroke-opacity:.35;stroke-width:88;stroke-linecap:round}
.kroad .r1{fill:none;stroke:#e5c48a;stroke-width:74;stroke-linecap:round}
.kroad .r2{fill:none;stroke:#f5e2b6;stroke-width:52;stroke-linecap:round}
.kroad .r3{fill:none;stroke:#fffaf0;stroke-width:6;stroke-dasharray:2 30;stroke-linecap:round;opacity:.9}
.bridge{cursor:pointer}
.bridge .bstar{fill:#ffffff;fill-opacity:.65;stroke:#2b2440;stroke-width:5;stroke-linejoin:round}
.bridge .bstar.on{fill:#f9d23c;fill-opacity:1}
.bridge .bglow{fill:#fff3a0;opacity:.6;animation:pulse 1.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.bridge.ready .bstar{animation:twinkle 1s ease-in-out infinite alternate}
.bridge.misty{opacity:.55}
@keyframes twinkle{to{fill:#fff3a0}}
@keyframes pulse{from{opacity:.25;transform:scale(.9)}to{opacity:.75;transform:scale(1.06)}}
.mk{position:absolute;left:calc(var(--x) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.mk-c{position:relative;display:block;width:clamp(96px,calc(150 * var(--s) * 1px),160px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #2b2440,0 10px 0 6px rgba(43,36,64,.25);padding:14%}
.mk-c svg{width:100%;height:100%}
.mk-n{position:relative;z-index:1;margin-top:-16px;font-weight:800;font-size:clamp(16px,calc(26 * var(--s) * 1px),26px);background:#fff;color:#2b2440;padding:1px 16px;border-radius:999px;box-shadow:0 0 0 4px #2b2440,0 5px 0 4px rgba(43,36,64,.25);white-space:nowrap}
.mk.here .mk-c{box-shadow:0 0 0 10px #f9d23c,0 0 0 14px #2b2440,0 12px 0 12px rgba(43,36,64,.25)}
.mk.here .mk-n{background:#2f6fd0;color:#fff;margin-top:-10px}
.mk.shut .mk-c{background:#ece8f2}.mk.shut .mk-c svg{opacity:.4;filter:grayscale(.7)}
.mk-lock{position:absolute;right:-6px;top:-6px;width:42%;aspect-ratio:1;border-radius:50%;background:#2b2440;color:#fff;display:grid;place-items:center;padding:20%}
.mk.mist{opacity:.7}.mk.mist .mk-c{background:#f1f4fa}.mk.mist .mk-c svg{opacity:.25;filter:blur(2px)}
.mk.mist .mk-c::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(40px,calc(70 * var(--s) * 1px),70px);font-weight:800;color:#9aa3b5}
.walker{position:absolute;z-index:3;left:calc(var(--x) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px);width:clamp(110px,calc(230 * var(--s) * 1px),230px);aspect-ratio:1;transform:translate(-50%,-92%);pointer-events:none}
.walker>svg{width:100%;height:100%;position:relative;z-index:2}
.walker .arrow{position:absolute;left:50%;top:-14%;width:34px;height:30px;margin-left:-17px;background:#f9d23c;clip-path:polygon(0 0,100% 0,50% 100%);animation:bounce .9s ease-in-out infinite alternate}
.walker.walking>svg{animation:walkbob .38s ease-in-out infinite alternate}
.walker.walking .arrow{display:none}
.walker .ride{position:absolute;inset:auto -10% -18% -10%;height:70%;z-index:1;display:none}
.walker.riding .ride{display:block}
.walker.riding .ride svg{width:100%;height:100%}
.walker.riding.boot>svg{transform:translateY(-10%)}
/* riding: the child sits on the animal's back; the animal is drawn in front of the legs */
.walker.riding.kameel>svg,.walker.riding.ezel>svg,.walker.riding.paard>svg,.walker.riding.tractor>svg{transform:translateY(-30%) scale(.66);z-index:0}
.walker.riding.kameel .ride,.walker.riding.ezel .ride,.walker.riding.paard .ride,.walker.riding.tractor .ride{inset:auto -24% -14% -24%;height:112%;z-index:1}
.walker.riding.kameel>svg{transform:translateY(-40%) scale(.62)}
@keyframes walkbob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-6%) rotate(3deg)}}
@keyframes bounce{to{transform:translateY(8px)}}
.ktop{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.ktop>*{pointer-events:auto}
.kchip{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:4px 18px 4px 4px;box-shadow:0 6px 0 rgba(43,36,64,.2)}
.kchip svg{width:58px;height:58px;border-radius:50%;background:#fff3d0}
.kchip b{font-size:clamp(20px,2.6vmin,28px);color:#2b2440}
.dagreis{margin:0 auto;display:flex;gap:10px;background:rgba(255,255,255,.9);border-radius:999px;padding:9px 16px;box-shadow:0 6px 0 rgba(43,36,64,.15)}
.dagreis i{width:30px;height:30px;border-radius:50%;background:#e9e3d6;box-shadow:inset 0 3px 0 rgba(0,0,0,.08)}
.dagreis i.on{background:radial-gradient(circle at 35% 35%,#fff7c8,#f9d23c 55%,#f0a91e);box-shadow:0 0 12px #ffd76a}
.ktop .round{position:relative}
.ktop .badge,.round .badge{position:absolute;right:-6px;top:-6px;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--accent2);color:#fff;font-size:16px;display:grid;place-items:center}
.ktop .gear.small{position:relative;top:auto;right:auto;width:52px;height:52px}
.kmsg{background:#f48fb1;color:#fff}
.kpip{position:absolute;z-index:4;left:max(12px,env(safe-area-inset-left,0px));top:clamp(84px,11vmin,100px);bottom:auto;width:clamp(90px,14vmin,130px);right:auto}
.pipsay{position:absolute;z-index:5;pointer-events:none;left:calc(max(12px,env(safe-area-inset-left,0px)) + clamp(96px,15vmin,140px));top:clamp(100px,13vmin,124px);max-width:min(560px,60vw);background:#fff;color:#2b2440;border-radius:24px;padding:12px 22px;font-weight:800;font-size:clamp(20px,2.6vmin,28px);line-height:1.15;box-shadow:0 6px 0 rgba(43,36,64,.18)}
.pipsay::before{content:"";position:absolute;left:-16px;top:22px;border:10px solid transparent;border-right:18px solid #fff}
.travelling .kaart{overflow:hidden}
.curtain{position:absolute;inset:0;z-index:30;pointer-events:none}
.curtain .cl{position:absolute;top:-10%;bottom:-10%;width:62%;background:radial-gradient(circle at 30% 30%,#fff 0 30%,transparent 31%),radial-gradient(circle at 70% 60%,#fff 0 34%,transparent 35%),radial-gradient(circle at 40% 85%,#fff 0 30%,transparent 31%),#f4f8ff;animation:clIn 1s ease forwards}
.curtain .cl.l{left:-62%}.curtain .cl.r{right:-62%;animation-name:clInR}
.curtain.open .cl.l{animation:clOut 1.2s ease forwards}.curtain.open .cl.r{animation:clOutR 1.2s ease forwards}
@keyframes clIn{to{left:-2%}}@keyframes clInR{to{right:-2%}}
@keyframes clOut{from{left:-2%}to{left:-70%}}@keyframes clOutR{from{right:-2%}to{right:-70%}}

/* ---- halte ---- */
.halte-screen{gap:12px}
.halte-bg{position:absolute;inset:-12px max(-16px,calc(-1 * env(safe-area-inset-right,0px) - 16px));z-index:0;overflow:hidden;border-radius:0}
.halte-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;animation:hbKen 14s ease-out 1 forwards}
.halte-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25))}
@keyframes hbKen{to{transform:scale(1.08) translate(-2%,-1%)}}
.halte-screen .bar h2{background:rgba(255,255,255,.92);padding:2px 22px;border-radius:999px;box-shadow:0 5px 0 var(--shade)}
.halte-screen .area{z-index:2}
.halte-screen .tile{box-shadow:0 8px 0 rgba(43,36,64,.28)}
.halte-screen .tile.tech{background:#eef3fb}
.halte-screen .tile.tech::before{content:"Techniek";position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:#5a6b86;color:#fff;font-size:14px;padding:0 10px;border-radius:999px;font-weight:800;z-index:2}
.halte-screen .tile.penc{background:#f4eefb}
.halte-screen .booktile{width:var(--cs)!important;height:var(--cs)!important;aspect-ratio:auto;border-radius:30px}
.halte-screen .booktile .bt-name{font-size:clamp(15px,calc(var(--cs) * .1),24px);padding:30px 12px 10px}
.halte-screen .booktile .bt-play{width:28%;height:28%;right:8%;top:8%}
.nieuw{position:absolute;right:-8px;top:-10px;background:#e8473f;color:#fff;font-weight:800;font-size:clamp(14px,2vmin,20px);padding:2px 12px;border-radius:999px;transform:rotate(8deg);box-shadow:0 3px 0 rgba(0,0,0,.2);animation:nieuw 1s ease-in-out 6 alternate}
@keyframes nieuw{to{transform:rotate(-4deg) scale(1.1)}}
.halte-kid{position:absolute;z-index:1;left:max(4px,env(safe-area-inset-left,0px));bottom:-8px;width:clamp(110px,20vmin,190px);pointer-events:none}
.halte-kid svg{width:100%;height:auto}
.hbridge{position:absolute;z-index:3;right:0;bottom:6px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border-radius:24px;background:#fff;box-shadow:0 7px 0 var(--shade)}
.hb-stars{display:flex;gap:4px}
.hb-stars i{width:34px;height:34px;background:#e6e1ee;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hb-stars i.on{background:#f9d23c}
.hb-txt{width:44px;height:44px;color:var(--accent)}

/* ---- schatkist en beloningen ---- */
.chest{position:relative;width:min(30vmin,220px);aspect-ratio:1;animation:stickIn .9s cubic-bezier(.3,1.5,.5,1) both}
.chest svg{width:100%;height:100%}
.chest.rattle:not(.open)>svg{animation:rattle .5s ease-in-out infinite}
@keyframes rattle{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.chest .prize{position:absolute;left:18%;right:18%;top:-22%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 8px 0 rgba(43,36,64,.15),inset 0 0 0 7px #fff,inset 0 0 0 11px var(--accent2);animation:prize .9s cubic-bezier(.3,1.5,.5,1) both;display:grid;place-items:center;padding:10%}
.chest .prize svg{width:100%;height:100%}
@keyframes prize{from{transform:translateY(60%) scale(.2);opacity:0}}
.bridge-stars{display:flex;gap:10px;background:#fff;padding:8px 18px;border-radius:999px;box-shadow:0 5px 0 var(--shade)}
.bridge-stars i{width:44px;height:44px;background:#e6e1ee;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.bridge-stars i.on{background:#f9d23c}
.bridge-stars i.new{animation:starPop 1s cubic-bezier(.3,1.6,.5,1) .8s both}
@keyframes starPop{from{transform:scale(0) rotate(-120deg)}}
.big.travel{background:#2f6fd0;color:#fff;box-shadow:0 8px 0 #1f4f9f;width:clamp(108px,19vmin,156px);animation:nieuw 1s ease-in-out infinite alternate}
.sticker.big{width:min(36vmin,260px)}
.sticker.big::before{content:"Souvenir!"}
.sticker.big svg{position:absolute;inset:14%;width:72%;height:72%}

/* ---- rugzak ---- */
.rz{position:absolute;inset:0;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-content:start;padding:4px 2px 20px}
.rz-card{background:#fff;border-radius:26px;padding:12px 18px 16px;box-shadow:0 7px 0 var(--shade)}
.rz-card:first-child{grid-column:1/-1}
.rz-card h3{margin:0 0 8px;color:var(--accent);font-size:clamp(22px,2.8vmin,30px)}
.souv{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}
.sv{position:relative;aspect-ratio:1;border-radius:50%;background:#fff8e6;box-shadow:inset 0 0 0 5px #f3e2b8}
.sv svg{position:absolute;inset:14%;width:72%;height:72%}
.sv.miss svg{filter:brightness(0);opacity:.12}
.sv.miss span{position:absolute;inset:0;display:grid;place-items:center;font-size:36px;font-weight:800;color:#c9c2d6}
.suns{display:flex;gap:8px;justify-content:space-between}
.sun{display:flex;flex-direction:column;align-items:center;gap:2px}
.sun{min-width:0;flex:1 1 0}
.sun i{width:min(42px,100%);aspect-ratio:1;border-radius:50%;background:#ece8f2}
.sun.on i{background:radial-gradient(circle at 35% 35%,#fff7c8,#f9d23c 55%,#f0a91e);box-shadow:0 0 12px #ffd76a}
.sun small{font-size:15px;color:var(--muted)}
.dias{display:flex;flex-wrap:wrap;gap:10px}
.dia{width:44px;height:44px;background:#e6e1ee;clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%)}
.dia.on{background:linear-gradient(135deg,#bff0ff,#6ec6f0 50%,#8a5cc7)}
.goal{margin:8px 0 0;font-family:var(--body);font-weight:600;color:var(--ink)}
.rz-btns{grid-column:1/-1;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.rz-btns .btn-main{align-self:auto;background:#fff;color:var(--accent);box-shadow:0 6px 0 var(--shade)}
.rz-btns .btn-main svg{width:54px;height:54px;border-radius:50%}
@media (orientation:portrait){.rz{grid-template-columns:minmax(0,1fr)}.souv{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}}

/* ---- gebed en rust ---- */
.pray-screen,.rest-screen{align-items:center;justify-content:center}
.pray-card,.rest-card{position:relative;z-index:2;background:rgba(255,255,255,.94);border-radius:34px;padding:24px 32px;max-width:min(720px,92vw);display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 10px 0 var(--shade);text-align:center}
.pray-pip,.rest-pip{width:min(30vmin,220px);position:relative}
.pray-txt{margin:0;font-size:clamp(22px,3vmin,32px);font-weight:700;line-height:1.25;color:#2b2440}
.pip.pray .pip-wl{animation:none;transform:rotate(-52deg) translate(8%,-4%)}
.pip.pray .pip-wr{animation:none;transform:rotate(52deg) translate(-8%,-4%)}
.pip.pray .pip-eyes,.pip.sleep .pip-eyes{animation:none}
.rest-screen{background:linear-gradient(#2a3a6e,#5a6aa0)}
.rest-card h2{margin:0;color:var(--accent);font-size:clamp(28px,4vmin,44px)}
.rest-card p{margin:0;font-family:var(--body);font-size:18px}
.zz{position:absolute;right:-10%;top:0;font-weight:800;font-size:30px;color:#8a5cc7;animation:zz 2s ease-in-out infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,10px)}50%{opacity:1}100%{opacity:0;transform:translate(14px,-20px)}}

/* ---- ouderhoek ---- */
.sheet.parent{width:min(980px,100%)}
.pkids{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.pkid{display:flex;align-items:center;gap:8px;padding:4px 16px 4px 4px;border-radius:999px;background:#eef1f7;font-weight:700}
.pkid svg{width:44px;height:44px;border-radius:50%;background:#fff3d0}
.pkid.on{background:#3559a6;color:#fff}
.pkid.add{padding:4px 16px;font-size:22px;gap:4px}.pkid.add span{font-size:15px}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid #e7e3ee;margin-bottom:10px}
.ptab{padding:8px 14px;border-radius:12px 12px 0 0;font-weight:700;color:var(--muted)}
.ptab.on{background:#3559a6;color:#fff}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcard{background:#f7f6fb;border-radius:18px;padding:12px 16px}
.pcard.wide{grid-column:1/-1}
.pcard h4{margin:0 0 6px}
.pcard p{margin:6px 0 0}
.bars{display:flex;gap:8px;align-items:flex-end;height:120px}
.bar1{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;position:relative}
.bar1 i{width:100%;max-width:34px;background:#3559a6;border-radius:8px 8px 3px 3px;min-height:3px}
.bar1 b{font-size:12px;color:var(--muted);order:-1}
.bar1 small{font-size:12px;color:var(--muted)}
.kan{margin:0;padding:0;list-style:none;columns:2;column-gap:20px}
.kan li{display:flex;gap:8px;align-items:baseline;break-inside:avoid;padding:3px 0}
.kan li i,.an i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.area1{display:flex;align-items:center;gap:10px}
.an{flex:1;display:flex;align-items:center;gap:8px;font-weight:600}
.dots5{display:flex;gap:3px}.dots5 i{width:12px;height:12px;border-radius:50%;background:#e2deea}.dots5 i.on{background:var(--c)}
.area1 small{width:110px;text-align:right;color:var(--muted)}
.recent{margin:0;padding:0;list-style:none;font-size:14.5px}
.recent li{padding:3px 0;border-top:1px solid #ebe8f1}.recent small{color:var(--muted)}
.sel,.txt{font:inherit;font-family:var(--body);font-size:15px;padding:8px 10px;border-radius:10px;border:2px solid #dcd7e6;background:#fff;color:var(--ink)}
.txt.area{width:100%;resize:vertical;min-height:56px}
.msgrow{display:flex;gap:8px;margin-top:6px}.msgrow .txt{flex:1;min-width:0}
@media (max-width:760px){.pgrid,.areas{grid-template-columns:1fr}.kan{columns:1}}

/* ---- rondjes-teller ---- */
.rounds{flex:none;display:flex;justify-content:center;gap:10px;position:relative;z-index:3}
.rounds i{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--shade);transition:transform .3s}
.rounds i.on{background:var(--accent2);box-shadow:none;transform:scale(1.15)}
.pop-in{animation:tileIn .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .05s)}

/* ---- bubbels ---- */
.sea-play{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px}
.sea-play .bfield{background:linear-gradient(#7fd0f2,#2f8ac0);}
.bubble{position:absolute;left:0;top:0;will-change:transform;touch-action:none}
.bubble svg{width:100%;height:100%}
.bubble.pop svg{animation:popB .3s ease-out forwards}

/* ---- sorteren ---- */
.sortplay{position:absolute;inset:0;display:flex;flex-direction:column;gap:2cqh}
.sortplay .tray{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2cqmin}
.sitem{width:min(20cqh,15cqw);aspect-ratio:1;border-radius:24px;background:#fff;box-shadow:0 6px 0 var(--shade);touch-action:none;position:relative;z-index:2;display:grid;place-items:center}
.sitem svg{width:86%;height:86%}
.sitem.lift{z-index:10;box-shadow:0 14px 18px rgba(0,0,0,.2)}
.sitem.sel{outline:6px solid var(--accent2)}
.bins{flex:none;display:flex;justify-content:center;gap:4cqw}
.bin{position:relative;width:min(30cqw,300px);display:flex;flex-direction:column;align-items:center;gap:6px}
.bin-body{position:relative;width:100%;height:min(22cqh,150px)}
.bin-top{width:min(13cqh,90px);height:min(13cqh,90px);border-radius:50%;background:#fff;box-shadow:0 5px 0 var(--shade);display:grid;place-items:center;z-index:2}
.bin-top svg{width:80%;height:80%}
.binsw{width:70%;height:70%;border-radius:50%;background:var(--c)}
.bin-in{position:absolute;left:12%;right:12%;top:-18%;bottom:30%;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;z-index:2}
.inbin{width:min(9cqh,60px);aspect-ratio:1;margin:-8px -4px;animation:tileIn .4s both}
.inbin svg{width:100%;height:100%}
.bin .basket{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* ---- oversteken ---- */
.street{position:absolute;inset:0;border-radius:26px;overflow:hidden;box-shadow:0 8px 0 var(--shade)}
.st-bg{position:absolute;inset:0;width:100%;height:100%}
.tlight{position:absolute;right:8%;top:6%;width:min(9cqw,80px);padding:8px;background:#3a3550;border-radius:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 5px #2b2440}
.tlight i{display:block;aspect-ratio:1;border-radius:50%;background:#555}
.tlight i.red.on{background:#e8473f;box-shadow:0 0 20px #ff6a5a}
.tlight i.green.on{background:#3fe07a;box-shadow:0 0 20px #5aff9a}
.lanes{position:absolute;inset:0;pointer-events:none}
.car{position:absolute;left:0;top:0;width:120px;height:120px}
.car svg{width:100%;height:100%}
.walker2{position:absolute;left:46%;bottom:2%;width:min(26cqh,200px);aspect-ratio:1;transform:translateX(-50%);transition:bottom 2.2s ease-in-out}
.walker2 svg{width:100%;height:100%}
.walker2.cross{bottom:64%}
.walker2.cross svg{animation:walkbob .3s ease-in-out infinite alternate}
.walker2.look-l svg{transform:translateX(-8%) rotate(-6deg)}.walker2.look-r svg{transform:translateX(8%) rotate(6deg)}
.eye{position:absolute;bottom:4%;display:flex;flex-direction:column;align-items:center;gap:2px;width:min(18cqh,120px);padding:10px;border-radius:24px;background:#fff;color:var(--accent);font-weight:800;box-shadow:0 6px 0 var(--shade)}
.eye svg{width:60%;height:auto}
.eye.l{left:6%}.eye.r{right:6%}
.eye.done{background:#dff3e4;color:var(--ok)}

/* ---- drijven of zinken ---- */
.tank-wrap{position:absolute;inset:0;display:flex;gap:3cqw;align-items:center;justify-content:center}
.tank{position:relative;height:90cqh;aspect-ratio:.9;border-radius:20px 20px 30px 30px;background:linear-gradient(#ffffff,#eef6fb);box-shadow:0 0 0 8px #2b2440,0 14px 0 8px var(--shade);overflow:hidden}
.tank .water{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(#8fd6f6cc,#3f9ad0dd)}
.tank .wave{position:absolute;left:-10%;right:-10%;top:-12px;height:24px;background:radial-gradient(circle at 12px 24px,transparent 12px,#8fd6f6cc 13px) 0 0/24px 24px repeat-x;animation:wave 2s linear infinite}
@keyframes wave{to{transform:translateX(24px)}}
.tank .sand{position:absolute;left:0;right:0;bottom:0;height:8%;background:#e9c98f}
.fobj{position:absolute;left:50%;top:6%;width:32%;aspect-ratio:1;transform:translateX(-50%);z-index:2;transition:top 1.2s cubic-bezier(.4,.1,.5,1)}
.fobj svg{width:100%;height:100%}
.fobj.drop.float{top:26%;animation:bob 2s ease-in-out 1.1s infinite}
.fobj.drop.sink{top:66%;transition:top 1.4s cubic-bezier(.5,0,.4,1)}
.guess{display:flex;flex-direction:column;gap:3cqh}
.gbtn{width:min(30cqh,220px);display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border-radius:28px;background:#fff;box-shadow:0 7px 0 var(--shade);font-weight:800;font-size:clamp(20px,2.6vmin,30px);color:var(--accent)}
.gbtn svg{width:80%;height:auto}
.gbtn.picked{outline:6px solid var(--accent2)}
.gbtn.right{background:#dff3e4}.gbtn.wrong{background:#fdeee6}
@media (orientation:portrait){.tank-wrap{flex-direction:column}.tank{height:56cqh}.guess{flex-direction:row}}

/* ---- wip ---- */
.wipplay{position:absolute;inset:0;display:flex;flex-direction:column}
.wipscene{flex:1;min-height:0;background:linear-gradient(#cfeaf9,#f4fbff);border-radius:26px;box-shadow:0 8px 0 var(--shade)}
.wipsvg{width:100%;height:100%}
.beam{transform-box:view-box;transform-origin:500px 380px;transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.wipui{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:8px}
.wq{margin:0;font-weight:800;font-size:clamp(20px,2.6vmin,30px);color:var(--accent)}
.wopts{display:flex;gap:14px}
.wopts .card{width:min(18cqh,130px);height:min(18cqh,130px)}
.wopts .undo{color:var(--muted);display:grid;place-items:center}.wopts .undo svg{width:50%}

/* ---- tandwielen ---- */
.gearplay{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px}
.gboard{flex:1;min-height:0;width:100%}
.gtray{flex:none;display:flex;justify-content:center;gap:16px}
.gitem{width:min(19cqh,130px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 6px 0 var(--shade);touch-action:none;display:grid;place-items:center;position:relative;z-index:3}
.gitem svg{width:96%;height:96%}
.gitem.sel{outline:6px solid var(--accent2)}
.gw .spin{transform-box:fill-box;transform-origin:center}
.cspin{transform-box:fill-box;transform-origin:center}
@keyframes gspin{to{transform:rotate(360deg)}}@keyframes gspinR{to{transform:rotate(-360deg)}}
.peg{cursor:pointer}
.askdir{position:absolute;left:50%;top:2%;transform:translateX(-50%);display:flex;gap:20px;z-index:5}
.askdir .gbtn{width:min(22cqh,150px)}

/* ---- lichtjes ---- */
.lightplay{position:absolute;inset:0;display:grid;place-items:center}
.lboard{width:100%;height:100%;touch-action:none}
.term{fill:#f9d23c;stroke:#2b2440;stroke-width:5;cursor:pointer}
.wire{fill:none;stroke:#e8473f;stroke-width:12;stroke-linecap:round;pointer-events:none}
.wire.fixed{stroke:#c9473f}
.wire.temp{stroke-dasharray:4 14;stroke:#ffcf5a}
.wire.new{animation:wireIn .4s ease-out}
@keyframes wireIn{from{stroke-width:22;opacity:.4}}
.bulb .glow{opacity:0;transition:opacity .4s}
.bulb.on .glow{opacity:1}
.bulb.on .glass{fill:#fff3a0}
.switch1{cursor:pointer}.switch1 .lever{transition:transform .3s;transform-box:fill-box;transform-origin:0% 100%}
.switch1.on .lever{transform:rotate(22deg)}

.seadecor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.seadecor .fish1{animation:swim 14s linear infinite}.seadecor .fish2{animation:swim 20s linear infinite reverse}
@keyframes swim{from{transform:translateX(-30%)}to{transform:translateX(110%)}}

.sheet.parent .seg{flex-wrap:wrap;justify-content:flex-end;max-width:60%}
.sheet.parent .seg button{flex:0 0 auto;height:auto;min-height:42px;padding:6px 14px;font-size:16px;font-family:var(--body);font-weight:700}
.sheet.parent .opt-row>div:first-child{min-width:0;flex:1}

.reader .plate{object-position:var(--ox) 55%}
.pray-card .btn-main{align-self:center}

#app[data-world="zee"]{--bg:#d4eef8;--bg2:#f4dca0;--accent:#1f78b4;--accent2:#f5922f;--soft:#eef8fc}
.fishplay{position:absolute;inset:0;display:flex;gap:16px}
.fsea{position:relative;flex:1;min-width:0;border-radius:26px;overflow:hidden;background:linear-gradient(#7fd0f2,#2f8ac0);box-shadow:0 8px 0 var(--shade);touch-action:none}
.sfish{position:absolute;left:0;top:0;will-change:transform;touch-action:none}
.sfish svg{width:100%;height:100%}
.sfish.caught{animation:popB .35s ease-out forwards}
.fside{flex:0 0 min(26%,240px);display:flex;flex-direction:column;align-items:center;gap:12px}
.fask{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:22px;padding:10px 14px;box-shadow:0 6px 0 var(--shade)}
.fq{display:flex;align-items:center;gap:8px}
.fq b{font-size:clamp(34px,5vmin,52px);line-height:1;color:var(--accent)}
.fq svg{width:clamp(50px,8vmin,80px);height:auto}
.fdots{display:grid;grid-template-columns:repeat(3,18px);gap:5px}
.fdots i{width:18px;height:18px;border-radius:50%;background:var(--accent)}
.bucket{position:relative;width:100%;flex:1;min-height:100px;max-height:240px;background:linear-gradient(#c9ced8,#9aa3b5);border-radius:14px 14px 40px 40px;box-shadow:inset 0 10px 0 rgba(0,0,0,.08),0 6px 0 var(--shade);border:5px solid #2b2440}
.bcount{position:absolute;inset:10px;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:4px}
.bcount i{width:30px;height:18px;border-radius:50%;background:var(--c);border:3px solid #2b2440;animation:tileIn .3s both}
.fdone{align-self:center}
@media (orientation:portrait){.fishplay{flex-direction:column}.fside{flex:0 0 auto;flex-direction:row;width:100%}.bucket{min-height:90px}}
.albumgrid .stk{width:var(--cs);height:var(--cs)}
.albumgrid .stk .cnt-b{min-width:28px;height:28px;font-size:16px}

/* ---- sterrenbeelden (stippen in de nacht) ---- */
.dots.night .sheet-paper{background:radial-gradient(circle at 70% 20%,#3a3a8a,#14163f 70%);box-shadow:0 8px 0 #0b0c2a}
.dots.night .dot path.d{fill:#fff6c8;stroke:#f9d23c;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.dots.night .dot.done path.d{fill:#f9d23c}
.dots.night .dot.next path.d{animation:twinkle 1s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.35)}}
.dots.night .dot text{fill:#fff;stroke:#14163f}
.dots.night .seg{stroke:#f9d23c;stroke-opacity:.85;stroke-width:3}
.dots.night .live{stroke:#fff6c8}
.dots.night .dot.next circle.ring{stroke:#fff6c8}

/* ---- klanken ---- */
.sounds{position:absolute;inset:0;display:flex;align-items:center;gap:3cqw;padding:0 2cqw}
.sx-ex{flex:none;width:min(38cqh,30cqw);aspect-ratio:1;position:relative;border:5px solid var(--accent);display:grid;place-items:center}
.sx-ex svg{width:88%;height:88%}
.sx-ex.letter{background:#fff8e6}
.sx-big{font-family:var(--display);font-weight:800;font-size:min(24cqh,18cqw);line-height:1;color:var(--accent)}
.sx-ear{position:absolute;right:-12px;bottom:-12px;width:54px;height:54px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 4px 0 var(--shade)}
.sx-ear{color:#fff}.sx-ear svg{width:60%;height:60%}
.sx-letter{position:absolute;left:-10px;top:-10px;min-width:52px;height:52px;padding:0 8px;border-radius:26px;background:#fff;border:4px solid var(--accent);font-family:var(--display);font-weight:800;font-size:30px;line-height:44px;color:var(--accent);text-align:center}
.sx-grid{position:relative;flex:1;height:100%}
.card.choice .sx-letter{left:auto;right:-10px}
@container (max-aspect-ratio:1/1){.sounds{flex-direction:column;justify-content:center;padding:2cqh 0}.sx-ex{width:min(30cqh,46cqw)}.sx-grid{width:100%;flex:1}}

/* ---- ophaalbrug ---- */
.bridgeplay,.rocketplay{position:absolute;inset:0;display:grid;place-items:center}
.dbsvg,.rksvg{width:100%;height:100%;touch-action:none;overflow:visible}
.dbsvg .dbwheel{cursor:grab}
.dbhint,.dbwho,.dbchain,.dbchain2{pointer-events:none}
.dbhint{animation:hintP 1.2s ease-in-out infinite}
@keyframes hintP{50%{opacity:.45}}
.dbdusk{transition:opacity 1.5s}
/* ---- raket bouwen ---- */
.rksvg .rkpart{cursor:grab}
.rksvg .rkghost,.rksvg .rksmoke{pointer-events:none}
.rksvg .puff{animation:puff 1.6s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes puff{to{transform:scale(2.4) translateY(-20px);opacity:0}}
.rkgo{position:absolute;right:6%;bottom:8%;z-index:4;font-size:clamp(24px,4cqh,40px)}
.rkcount{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:min(34cqh,220px);color:#fff;text-shadow:0 8px 0 rgba(0,0,0,.25);pointer-events:none;z-index:5}
.rkcount.pop{animation:cpop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes cpop{from{transform:scale(.3);opacity:0}}
.rkask .gbtn svg{height:min(22cqh,170px);width:auto}

.walker.riding.raket>svg{opacity:0}
.walker.riding.raket .ride{inset:-30% -10% -10% -10%;height:140%;transform:rotate(-8deg)}
#app[data-world="kasteel"]{--bg:#ece4f6;--bg2:#d6c8ea;--accent:#7a4cb8;--accent2:#f2b134;--soft:#f8f4fc}
#app[data-world="ruimte"]{--bg:#1e2058;--bg2:#2e3070;--accent:#f2b134;--accent2:#6ec6f0;--soft:#e8eaf8;--ink-on-bg:#fff}
#app[data-world="ruimte"] .screen:not(.halte-screen) .bar h2{color:#fff}

/* ---- ouderhoek: telefoon koppelen ---- */
.telcard{display:flex;gap:18px;align-items:center;background:#fff;border-radius:20px;padding:14px;margin:6px 0 12px;box-shadow:0 4px 0 var(--shade)}
.telqr{flex:none;width:min(180px,34vw);aspect-ratio:1}
.telqr svg{width:100%;height:100%;display:block}
.teltxt{min-width:0}
.teltxt h4{margin:0 0 6px}
.teltxt p{margin:4px 0;overflow-wrap:anywhere}
.telcode{font-family:var(--display);font-weight:800;font-size:clamp(20px,3.4vmin,30px);letter-spacing:.06em;color:var(--accent)}
.tel-bad{color:#c4361f;font-weight:700}
.txt.codein{font-family:var(--display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex:1;min-width:0}
.txt.short{max-width:220px}
@media (max-width:640px){.telcard{flex-direction:column;align-items:stretch}.telqr{align-self:center}}
.halte-screen .booktile .nieuw{left:8px;right:auto;top:8px;transform:rotate(-6deg)}

/* ---- robotje ---- */
.robotplay{position:absolute;inset:0;display:flex;gap:3cqw;align-items:center;justify-content:center}
.rboard{flex:none;height:min(100cqh,62cqw);aspect-ratio:1;background:#fff;border-radius:26px;box-shadow:0 8px 0 var(--shade);padding:1.2%}
.rbsvg{width:100%;height:100%;display:block}
.rpanel{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;flex:1;max-width:360px}
.rpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:min(100%,260px,38cqh);aspect-ratio:1}
.rbarrow{border-radius:22px;background:#fff;box-shadow:0 6px 0 var(--shade);color:var(--accent);display:grid;place-items:center}
.rbarrow svg{width:62%;height:62%}
.r-u{grid-area:1/2}.r-l{grid-area:2/1}.r-r{grid-area:2/3}.r-d{grid-area:3/2}
.rprog{display:flex;flex-wrap:wrap;gap:6px;min-height:58px;width:100%;background:#fff;border-radius:18px;padding:8px;box-shadow:inset 0 0 0 3px var(--soft,#eef6fc)}
.rchip{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center}
.rchip svg{width:70%;height:70%}
.rchip.now{background:var(--accent2);transform:scale(1.12)}
.rchip.done{opacity:.55}
.rchip.wrong{background:#e8473f;animation:shake .4s}
.rslot{width:44px;height:44px;border-radius:12px;border:3px dashed #c9c4d6}
.rbtns{display:flex;gap:10px}
.rbtns .btn-sec{width:64px;display:grid;place-items:center}
.rbtns svg{width:28px;height:28px}
@container (max-aspect-ratio:1/1){.robotplay{flex-direction:column}.rboard{height:auto;width:min(100cqw,58cqh)}.rpanel{max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:center}.rpad{width:min(36cqw,28cqh)}.rprog{width:auto;flex:1;min-width:200px}}

/* ---- plaatjessudoku ---- */
.sudoplay{position:absolute;inset:0;display:flex;gap:4cqw;align-items:center;justify-content:center}
.sgrid{flex:none;height:min(100cqh,64cqw);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:6px;background:#2b2440;padding:6px;border-radius:24px;box-shadow:0 8px 0 var(--shade)}
.scell{background:#fff;border-radius:14px;display:grid;place-items:center;padding:8%;transition:background .2s}
.scell svg,.scell .pic{width:100%;height:100%}
.scell.empty{background:#fff8e6;box-shadow:inset 0 0 0 4px #f2b134}
.scell.lit{background:#eaf4ff}.scell.empty.lit{background:#fff1c8}
.scell.sel{box-shadow:inset 0 0 0 5px var(--accent2)}
.scell.ok{animation:sPop .4s}
@keyframes sPop{50%{transform:scale(1.1)}}
.sgrid.done .scell{background:#dff3e4}
.stray{display:flex;flex-direction:column;gap:14px}
.stray .ssym{width:min(17cqh,130px);aspect-ratio:1}
.stray .ssym.sel{transform:scale(1.08);box-shadow:0 7px 0 var(--shade),0 0 0 7px var(--accent2)}
@container (max-aspect-ratio:1/1){.sudoplay{flex-direction:column}.sgrid{height:auto;width:min(100cqw,64cqh)}.stray{flex-direction:row}.stray .ssym{width:min(20cqw,15cqh)}}

/* ---- verhaal op volgorde ---- */
.storyplay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4cqh;padding:0 1cqw}
.sslots,.scards{display:grid;grid-template-columns:repeat(var(--k),1fr);gap:2cqw;width:min(100%,calc(var(--k) * 44cqh));margin:0 auto}
.sslot,.scard{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;padding:0}
.sslot{background:#fff8e6;box-shadow:inset 0 0 0 4px #f2b134}
.sslot b{position:absolute;left:8px;top:6px;z-index:2;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font-family:var(--display);font-weight:800;font-size:22px;line-height:34px;text-align:center;box-shadow:0 3px 0 var(--shade)}
.sslot img,.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sslot.full{box-shadow:0 5px 0 var(--shade)}
.sslot.fixed{box-shadow:0 5px 0 var(--shade),inset 0 0 0 4px var(--accent)}
.sslot.ok{outline:5px solid var(--ok,#3fa45b)}
.sslot.bad{outline:5px solid #e8473f;animation:shake .45s}
.scard{box-shadow:0 6px 0 var(--shade)}
@container (max-aspect-ratio:1/1){.sslots,.scards{grid-template-columns:repeat(2,1fr);width:100%}}

/* ---- vormen leggen ---- */
.shapeplay{position:absolute;inset:0;display:grid;place-items:center}
.shsvg{width:100%;height:100%;touch-action:none}
.shpiece{cursor:grab}
.shghost{pointer-events:none}

/* ---- waterbaan ---- */
.waterplay{position:absolute;inset:0;display:grid;place-items:center}
.wbsvg{width:100%;height:100%;max-height:100%}
.wbt{cursor:pointer}
.wbwater{transition:opacity .35s}
.wbflower .petals{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.55);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.wbflower.bloom .petals{transform:scale(1.15)}
/* ---------- Wat is er weg? ---------- */
.wegplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3cqh,30px);padding:8px 12px}
.wegtable{position:relative;width:min(96cqw,calc(var(--n,5) * (min(34cqh,200px) + 16px) + 40px));padding:clamp(10px,2cqw,22px);border-radius:28px;box-shadow:0 7px 0 rgba(0,0,0,.18);
  background:repeating-linear-gradient(90deg,rgba(232,71,63,.55) 0 22px,transparent 22px 44px),repeating-linear-gradient(0deg,rgba(232,71,63,.55) 0 22px,#fff6ec 22px 44px)}
.wegrow{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(6px,1.6cqw,16px)}
.wslot{aspect-ratio:1;background:var(--paper);border-radius:20px;padding:9%;box-shadow:0 4px 0 var(--shade);display:grid;place-items:center}
.wslot svg{width:100%;height:100%}
.wslot.empty{background:rgba(255,255,255,.55);box-shadow:none;outline:5px dashed rgba(43,36,64,.35);outline-offset:-8px}
.wegcloth{position:absolute;inset:-6px;border-radius:30px;transform-origin:top;transform:scaleY(0);transition:transform .45s cubic-bezier(.5,0,.3,1.2);pointer-events:none;
  background:repeating-linear-gradient(90deg,#7a52c0 0 36px,#8f66d6 36px 52px,#6a44ae 52px 72px);box-shadow:0 10px 0 rgba(0,0,0,.2)}
.wegcloth.down{transform:scaleY(1)}
.wegbtn{display:flex;align-items:center;gap:14px;padding:14px 30px;font:800 clamp(22px,3.4cqw,34px)/1 var(--display);color:var(--ink)}
.wegbtn svg{width:58px;height:36px}
.wegbtn[hidden],.wegopts[hidden]{display:none}
.wegopts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,190px));gap:clamp(8px,2cqw,18px);justify-content:center;width:min(96cqw,900px)}
.wegopts .choice{aspect-ratio:1;max-height:30cqh;padding:10%;display:grid;place-items:center}
.wegopts .choice svg{width:100%;height:100%}
.wegopts .choice.right{outline:6px solid #3fa45b;outline-offset:-3px}
/* ---------- Kleuren mengen ---------- */
.mixplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:4px 10px 10px}
.mixsvg{flex:1;min-height:0;width:100%;overflow:visible}
.mpot{cursor:pointer}
.mpot.used{opacity:.45}
.mpin.wiggle{animation:mwig .9s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mwig{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.mixopts:empty{display:none}
.mixopts{display:flex;gap:clamp(10px,2cqw,22px);justify-content:center}
.mixopt{width:clamp(110px,16cqw,170px);padding:10px 10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.mixopt svg{width:78%}
.mixopt b{font:800 clamp(18px,2.4cqw,24px)/1.1 var(--display);color:var(--ink)}
.mixopt.right{outline:6px solid #3fa45b;outline-offset:-3px}
.mixopt.picked{outline:6px solid #e8473f;outline-offset:-3px}
/* ---------- Schuifpuzzel ---------- */
.spplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3cqw,32px);padding:10px}
.spboard{position:relative;aspect-ratio:16/10;width:min(72cqw,calc((100cqh - 30px) * 1.6));background:#2b2440;border:8px solid #2b2440;border-radius:22px;box-shadow:0 8px 0 rgba(0,0,0,.2)}
.sptile{position:absolute;width:calc(100% / var(--c));height:calc(100% / var(--r));padding:3px;border:0;background:none;transition:left .2s ease,top .2s ease;cursor:pointer}
.sptile i{display:block;width:100%;height:100%;border-radius:10px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.spfull{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:14px;opacity:0;transition:opacity .6s;pointer-events:none}
.spboard.done .spfull{opacity:1}
.spref{width:clamp(110px,18cqw,230px);aspect-ratio:16/10;padding:8px;flex:none}
.spref i{display:block;width:100%;height:100%;border-radius:14px;background-size:cover;background-position:center}
@container (max-aspect-ratio:1/1){.spplay{flex-direction:column}.spboard{width:min(94cqw,calc((78cqh) * 1.6))}.spref{width:clamp(110px,34cqw,240px)}}
/* ---------- Klappen ---------- */
.klapplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,6cqw,90px);padding:10px}
.klapask{display:flex;flex-direction:column;align-items:center;gap:16px}
.klappic{width:min(34cqw,56cqh);aspect-ratio:1;padding:16px}
.klappic svg{width:100%;height:100%}
.klapdots{display:flex;gap:14px;min-height:36px}
.klapdots i{width:34px;height:34px;border-radius:50%;background:#f5922f;box-shadow:0 4px 0 rgba(0,0,0,.15);animation:tileIn .3s cubic-bezier(.3,1.5,.5,1) both}
.klapdots i:not(.on){background:rgba(43,36,64,.15);box-shadow:none}
.klapdots i.ok{background:#3fa45b}
.klapdrum{width:min(30cqw,50cqh);aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer}
.klapdrum svg{width:100%;height:100%;filter:drop-shadow(0 8px 0 rgba(0,0,0,.15))}
.klapask[hidden],.klapdrum[hidden],.klapopts[hidden]{display:none}
.klapopts{position:relative;flex:1;height:100%}
@container (max-aspect-ratio:1/1){.klapplay{flex-direction:column}.klappic{width:min(56cqw,34cqh)}.klapdrum{width:min(50cqw,28cqh)}}
/* ---------- Sommetjes ---------- */
.somplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,5cqh,48px);padding:10px}
.somrow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6cqw,20px);flex-wrap:wrap;max-width:98cqw}
.sombox{display:grid;gap:6px;padding:12px;background:var(--paper);border-radius:22px;box-shadow:0 6px 0 var(--shade)}
.sompic{width:min(var(--ps,80px),15cqh,10cqw);aspect-ratio:1;display:block;position:relative;transition:opacity .6s,transform .6s,filter .6s}
.sompic svg{width:100%;height:100%}
.sompic.gone{opacity:.3;filter:grayscale(1);transform:translateY(-8px) scale(.85)}
.sompic.gone::after{content:'';position:absolute;inset:6%;background:linear-gradient(45deg,transparent 44%,#e8473f 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#e8473f 44% 56%,transparent 56%)}
.sompic.counted::before{content:attr(data-k);position:absolute;top:-12px;right:-8px;background:#2f6fd0;color:#fff;border-radius:50%;width:30px;height:30px;font:800 18px/30px var(--display);text-align:center;z-index:1}
.somnum{font:800 clamp(44px,8cqw,96px)/1 var(--display);color:var(--ink);min-width:.7em;text-align:center}
.somnum.op{color:#8a5cc7}
.somnum.ask{background:var(--paper);border-radius:22px;padding:8px 24px;box-shadow:0 6px 0 var(--shade);color:#c4561f}
.somnum.ask.ok{color:#3fa45b}
.somopts{display:flex;gap:clamp(10px,2cqw,24px)}
.somopt{width:clamp(80px,12cqw,140px);aspect-ratio:1;font:800 clamp(44px,7cqw,80px)/1 var(--display);color:var(--ink);display:grid;place-items:center}
.somopt.nope{opacity:.4}
.somopt.right{outline:6px solid #3fa45b;outline-offset:-3px}
/* ---------- Spiegelen ---------- */
.spgplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,4cqw,44px);padding:10px}
.spgboard{position:relative;display:grid;grid-template-columns:repeat(var(--w),1fr);gap:clamp(5px,1.1cqw,12px);padding:clamp(10px,2cqw,22px);background:var(--paper);border-radius:24px;box-shadow:0 8px 0 var(--shade);
  width:min(78cqw,calc(82cqh * var(--w) / var(--h)))}
.spgcell{aspect-ratio:1;border:0;border-radius:12px;background:#eef0f6;box-shadow:inset 0 0 0 3px rgba(43,36,64,.12);cursor:pointer;transition:background .2s}
.spgcell.lft{cursor:default}
.spgcell:not(.lft){background:#f8f9fc;outline:3px dashed rgba(43,36,64,.2);outline-offset:-7px}
.spgcell.on{outline:none}
.spgcell.bad{background:#fbd4d2!important}
.spgmirror{position:absolute;top:8px;bottom:8px;left:50%;width:10px;margin-left:-5px;border-radius:6px;background:linear-gradient(90deg,#c9ced8,#ffffff 40%,#9aa3b5);box-shadow:0 0 0 2px rgba(43,36,64,.35);pointer-events:none}
.spgboard.done .spgcell[style]{animation:spgshine .6s ease 2}
@keyframes spgshine{50%{transform:scale(1.08)}}
.spgpal{display:flex;flex-direction:column;gap:18px}
.spgpal:empty{display:none}
.spgpot{width:clamp(60px,9cqw,100px);aspect-ratio:1;border-radius:50%;background:var(--c);border:6px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.18);cursor:pointer}
.spgpot.on{outline:6px solid #2b2440;outline-offset:3px}
@container (max-aspect-ratio:1/1){.spgplay{flex-direction:column}.spgpal{flex-direction:row}.spgboard{width:min(94cqw,calc(66cqh * var(--w) / var(--h)))}}
/* ---------- Lezen ---------- */
.leesplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.leesword{font:800 clamp(64px,12cqw,150px)/1.1 var(--display);color:var(--ink);padding:18px 44px 26px;letter-spacing:.05em;min-width:min(34cqw,420px);flex:none}
.leesword span.first{color:#e8473f}
.leesword.pic{width:min(32cqw,54cqh);height:min(32cqw,54cqh);aspect-ratio:auto;padding:6%;min-width:0}
.leesword.pic svg{width:100%;height:100%}
.leesopts{position:relative;flex:1;height:100%}
.leesopts.words .leesopt{font:800 clamp(34px,5.4cqw,64px)/1 var(--display);color:var(--ink)}
.leesopt.nope{opacity:.4}
.leesopt.right{outline:6px solid #3fa45b;outline-offset:-3px}
@container (max-aspect-ratio:1/1){.leesplay{flex-direction:column;padding:2cqh 0}.leesopts{width:100%;flex:1}.leesword.pic{width:min(50cqw,30cqh);height:min(50cqw,30cqh)}}
/* ---------- Dobbelen met Pip ---------- */
.dobplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3cqw,36px);padding:8px}
.dobsvg{flex:1;min-width:0;height:100%;max-height:100%}
.dobside{display:flex;flex-direction:column;align-items:center;gap:16px;flex:none}
.dobdie{display:flex;gap:10px;border:0;background:none;padding:0;cursor:pointer}
.dobdie svg{width:clamp(80px,12cqw,140px);height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18))}
.dobdie.ready svg{animation:dobpulse 1.4s ease-in-out infinite}
@keyframes dobpulse{50%{transform:scale(1.06) rotate(-4deg)}}
.dobdie.rolling svg{animation:dobspin .2s linear infinite}
@keyframes dobspin{to{transform:rotate(360deg)}}
.dobturn{display:flex;align-items:center;gap:8px;font:800 clamp(20px,2.6cqw,28px)/1 var(--display);color:var(--ink);background:var(--paper);padding:8px 18px 8px 8px;border-radius:40px;box-shadow:0 5px 0 var(--shade)}
.dobturn .avface,.dobturn .pipmini svg{width:48px;height:48px;display:block}
.dobpawn{transition:transform .28s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.dobcell{cursor:pointer}
.dobcell.next rect{stroke:#3fa45b;stroke-width:10;animation:dobglow 1s ease-in-out infinite}
@keyframes dobglow{50%{stroke-opacity:.35}}
@container (max-aspect-ratio:1/1){.dobplay{flex-direction:column}.dobside{flex-direction:row}.dobsvg{width:100%;height:auto;flex:none;max-height:72cqh}}
/* ---------- Woorden maken ---------- */
.wmplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.wmpic{width:min(30cqw,52cqh);aspect-ratio:1;padding:16px;flex:none}
.wmpic svg{width:100%;height:100%}
.wmright{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,5cqh,44px)}
.wmslots{display:flex;gap:clamp(8px,1.4cqw,16px)}
.wmslot{width:clamp(60px,9cqw,110px);aspect-ratio:.85;border-radius:18px;border:5px dashed rgba(43,36,64,.3);display:grid;place-items:center;font:800 clamp(44px,7cqw,84px)/1 var(--display);color:var(--ink);background:rgba(255,255,255,.6)}
.wmslot i{font-style:normal;color:rgba(43,36,64,.2)}
.wmslot b{font-weight:800}
.wmslot.on{border-style:solid;border-color:#3fa45b;background:#fff}
.wmtiles{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.4cqw,16px);max-width:min(60cqw,720px)}
.wmtile{width:clamp(58px,8cqw,100px);aspect-ratio:1;border:0;border-radius:18px;background:#2f6fd0;color:#fff;font:800 clamp(38px,6cqw,72px)/1 var(--display);box-shadow:0 6px 0 #1f4f9a;cursor:pointer}
.wmtile:nth-child(3n+1){background:#e8473f;box-shadow:0 6px 0 #a8302a}
.wmtile:nth-child(3n+2){background:#3fa45b;box-shadow:0 6px 0 #2a7a3a}
.wmtile.used{visibility:hidden}
@container (max-aspect-ratio:1/1){.wmplay{flex-direction:column}.wmpic{width:min(50cqw,28cqh)}.wmtiles{max-width:94cqw}}
/* ---------- Hellingbaan ---------- */
.helplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3cqw,36px);padding:8px 2cqw}
.helsvg{flex:1;min-width:0;height:100%;max-height:100%}
.helctl{display:flex;flex-direction:column;align-items:center;gap:18px;flex:none}
.helh{display:flex;align-items:flex-end;gap:10px;height:clamp(90px,22cqh,180px)}
.helbtn{width:clamp(40px,5cqw,60px);height:100%;border:0;border-radius:14px;background:var(--paper);box-shadow:0 5px 0 var(--shade);display:flex;align-items:flex-end;padding:6px;cursor:pointer}
.helbtn span{display:block;width:100%;border-radius:8px;background:#c9ced8}
.helbtn.on span{background:#f5922f}
.helbtn.on{outline:5px solid #2b2440;outline-offset:2px}
.helgo{border:0;border-radius:40px;padding:14px 34px;background:#3fa45b;color:#fff;font:800 clamp(26px,3.6cqw,40px)/1 var(--display);box-shadow:0 6px 0 #2a7a3a;cursor:pointer}
@container (max-aspect-ratio:1/1){.helplay{flex-direction:column}.helctl{flex-direction:row}.helsvg{width:100%;height:auto;flex:none;max-height:60cqh}}
/* ---------- Boekenkast ---------- */
.kbooks svg{width:58%;height:58%;color:#8a5cc7}
.bkgrid{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px clamp(12px,3cqw,32px) 30px;display:flex;flex-direction:column;gap:clamp(12px,2.4cqh,22px)}
.bkhalte h3{margin:0 0 8px 6px;font:800 clamp(20px,2.6cqw,28px)/1.1 var(--display);color:var(--ink)}
.bkrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,21cqw,250px),1fr));gap:clamp(10px,1.6cqw,18px)}
.bkbook{position:relative;aspect-ratio:16/11;border:0;padding:0;border-radius:20px;overflow:hidden;background:#2b2440;box-shadow:0 6px 0 rgba(0,0,0,.2);cursor:pointer}
.bkbook img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bkbook span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font:800 clamp(15px,1.8cqw,20px)/1.15 var(--display);color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.bkbook .nieuw{position:absolute;top:8px;left:8px;right:auto;background:#e8473f;color:#fff;font:800 14px/1 var(--display);font-style:normal;padding:6px 10px;border-radius:12px;transform:rotate(-6deg)}
.bkbook.locked{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#c9ced8 0 18px,#d8dce4 18px 36px);color:#8a90a0;cursor:default}
.bkbook.locked svg{width:30%;height:30%}
/* ---------- Wat hoort erbij? ---------- */
.erbplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.erbask{display:flex;align-items:center;gap:clamp(8px,1.6cqw,18px);flex:none}
.erbask[hidden]{display:none}
.erbcard{width:min(22cqw,40cqh);aspect-ratio:1;padding:6%;display:grid;place-items:center;font:800 clamp(60px,9cqw,110px)/1 var(--display);color:rgba(43,36,64,.35)}
.erbcard svg{width:100%;height:100%}
.erbq{border:5px dashed rgba(43,36,64,.25);background:rgba(255,255,255,.6);box-shadow:none}
.erbplus{font:800 clamp(40px,6cqw,70px)/1 var(--display);color:#8a5cc7}
.erbopts{position:relative;flex:1;height:100%}
.erbopts .choice.nope{opacity:.4}
.erbopts .choice.right{outline:6px solid #3fa45b;outline-offset:-3px}
@container (max-aspect-ratio:1/1){.erbplay{flex-direction:column;padding:2cqh 0}.erbopts{width:100%}.erbcard{width:min(34cqw,22cqh)}}
/* ---------- Zon en schaduw ---------- */
.zsplay{position:absolute;inset:0;display:grid;place-items:center;padding:6px 2cqw 12px}
.zssvg{width:100%;height:100%;border-radius:24px;overflow:hidden}
.zssun{cursor:pointer}
.zsice .cool{animation:spgshine .6s ease 2;transform-box:fill-box;transform-origin:50% 100%}
/* ---------- Wat past erin? ---------- */
.mxplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,5cqw,70px);padding:10px 2cqw}
.mxgrid{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:clamp(6px,1.2cqw,12px);padding:clamp(10px,1.6cqw,18px);background:var(--paper);border-radius:24px;box-shadow:0 7px 0 var(--shade);width:min(46cqw,82cqh)}
.mxcell{aspect-ratio:1;border-radius:16px;background:#f4f1ea;display:grid;place-items:center}
.mxcell svg{width:86%;height:86%}
.mxcell.hole{background:rgba(255,255,255,.6);outline:5px dashed rgba(43,36,64,.3);outline-offset:-8px;font:800 clamp(40px,6cqw,70px)/1 var(--display);color:rgba(43,36,64,.4)}
.mxcell.hole.ok{outline-color:#3fa45b}
.mxopts{display:grid;grid-template-columns:repeat(2,minmax(0,clamp(90px,13cqw,150px)));gap:clamp(10px,1.6cqw,18px)}
.mxopt{aspect-ratio:1;padding:6%;display:grid;place-items:center}
.mxopt svg{width:90%;height:90%}
.mxopt.nope{opacity:.4}
.mxopt.right{outline:6px solid #3fa45b;outline-offset:-3px}
@container (max-aspect-ratio:1/1){.mxplay{flex-direction:column}.mxgrid{width:min(80cqw,52cqh)}.mxopts{grid-template-columns:repeat(4,minmax(0,clamp(70px,20cqw,130px)))}}
/* ---------- Wie zegt dat? ---------- */
.gelplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.gelear{width:min(24cqw,40cqh);aspect-ratio:1;padding:12px;flex:none}
.gelear{display:grid;place-items:center}
.gelear>svg{width:86%!important;height:86%!important;max-width:none!important}
.gelear.talk{animation:geltalk .5s ease-in-out infinite}
@keyframes geltalk{50%{transform:scale(1.08)}}
.gelopts{position:relative;flex:1;height:100%}
.gelopts .choice.nope{opacity:.4}
.gelopts .choice.right{outline:6px solid #3fa45b;outline-offset:-3px}
@container (max-aspect-ratio:1/1){.gelplay{flex-direction:column;padding:2cqh 0}.gelopts{width:100%}.gelear{width:min(40cqw,22cqh)}}

/* Wat trek je aan? */
.klplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.klweer{width:min(26cqw,46cqh);aspect-ratio:.86;padding:12px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(#cfe8ff,#fff)}
.klweer>svg{width:84%!important;height:auto!important;max-width:none!important;flex:none}
.klweer b{font-family:'Baloo 2',sans-serif;font-size:clamp(18px,3.2cqh,30px);color:var(--ink,#2b2440);line-height:1.1;text-align:center}
.klopts{position:relative;flex:1;height:100%}
.klopts .choice.nope{opacity:.4}
.klopts .choice.right{outline:6px solid #3fa45b;outline-offset:-3px}
@container (max-aspect-ratio:1/1){.klplay{flex-direction:column;padding:2cqh 0}.klopts{width:100%}.klweer{width:min(44cqw,26cqh)}}

/* Winkeltje */
.wkplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3cqw,40px);padding:10px 2cqw}
.wkshop{position:relative;flex:none;width:min(34cqw,62cqh);padding:0 0 18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;transition:outline-color .3s}
.wkawn{width:100%;height:clamp(26px,6cqh,48px);background:repeating-linear-gradient(90deg,#e8473f 0 12.5%,#fff 12.5% 25%);border-bottom:4px solid var(--ink);border-radius:0 0 50% 50%/0 0 30% 30%}
.wkitems{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 12px 0;width:100%}
.wkitem{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.wkitem>svg{width:100%!important;height:auto!important;aspect-ratio:1;max-width:none!important}
.wkprice{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff6d6;border:4px solid var(--ink);border-radius:14px;padding:4px 14px 6px;margin-top:-4px;transform:rotate(-4deg)}
.wkprice b{font:800 clamp(30px,6cqh,56px)/1 var(--display);color:var(--ink)}
.wkprice i{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:110px}
.wkprice u{width:14px;height:14px;border-radius:50%;background:#f2c94c;border:2px solid var(--ink)}
.wkplus{font:800 clamp(30px,6cqh,56px)/1 var(--display);color:var(--ink);flex:none}
.wkshop.paid{outline:6px solid #3fa45b;outline-offset:-3px}
.wkright{flex:1;min-width:0;max-width:62cqw;height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,3cqh,30px)}
.wktoon{position:relative;min-height:clamp(100px,24cqh,200px);background:linear-gradient(#d39a52,#b07a3e);border-top:14px solid #7a4a24;border-radius:10px 10px 22px 22px;padding:12px clamp(70px,12cqh,110px) 12px 14px;display:flex;align-items:center;box-shadow:0 6px 0 var(--shade)}
.wkplaced{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:clamp(52px,10cqh,84px);width:100%}
.wksum{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:800 clamp(40px,8cqh,72px)/1 var(--display);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.wkpurse{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;padding:16px;background:#8a5cc7;border:4px solid var(--ink);border-radius:26px 26px 44px 44px;min-height:clamp(100px,22cqh,190px)}
.wkcoin{width:clamp(64px,14cqh,112px);aspect-ratio:1;padding:0;border:0;background:none;border-radius:50%;flex:none}
.wkcoin.v2{width:clamp(70px,15.4cqh,122px)}.wkcoin.v5{width:clamp(76px,16.8cqh,132px)}
.wkcoin>svg{width:100%;height:100%;display:block}
.wkplaced .wkcoin{width:clamp(46px,9cqh,78px)}
@container (max-aspect-ratio:1/1){.wkplay{flex-direction:column;padding:2cqh 4cqw}.wkshop{width:min(80cqw,40cqh)}.wkright{width:100%;max-width:none;flex:none;height:auto}}

/* Hoe laat is het? */
.uurplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.uurq{width:min(26cqw,46cqh);aspect-ratio:1;padding:14px;flex:none;display:grid;place-items:center}
.uurq>svg{width:90%!important;height:90%!important;max-width:none!important}
.uurlabel{font:800 clamp(40px,9cqh,90px)/1 var(--display);color:var(--ink);text-align:center}
.uuropts{position:relative;flex:1;height:100%}
.uuropts.uurzet{display:grid;place-items:center;align-self:stretch}
.uurbig{--bs:min(52cqw,74cqh);width:var(--bs);height:var(--bs);padding:8px;border-radius:50%}
.uurbig>svg{width:100%;height:100%;display:block}
.uurhit{cursor:pointer}
.uurklok g{transform-origin:100px 100px;transform-box:view-box;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.uuropts .choice.nope{opacity:.4}
.uuropts .choice.right,.uurbig.right{outline:6px solid #3fa45b;outline-offset:-3px}
.uuropts .choice>svg.uurklok{width:92%!important;height:92%!important;max-width:none!important}
@container (max-aspect-ratio:1/1){.uurplay{flex-direction:column;padding:2cqh 0}.uuropts{width:100%}.uurq{width:min(44cqw,26cqh)}.uurbig{--bs:min(86cqw,50cqh)}}

/* Bruggenbouwer */
.brplay{position:absolute;inset:0;display:grid;place-items:center;padding:8px 2cqw}
.brsvg{width:min(96cqw,158cqh);height:auto;max-height:100%;border-radius:26px;box-shadow:0 7px 0 var(--shade);background:#f4e6cc;overflow:hidden}
.brplank{transition:transform .45s cubic-bezier(.3,1.2,.5,1);cursor:pointer}
.brcar{transition:transform 1.6s ease-in-out}

/* Eerlijk delen */
.dlplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3cqh,30px);padding:8px 2cqw}
.dltin{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:clamp(70px,14cqh,120px);max-width:min(92cqw,900px);padding:12px 22px;background:linear-gradient(#e8473f,#c9372f);border:5px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--shade)}
.dlt{width:clamp(50px,10.5cqh,92px);aspect-ratio:1;display:block}.dlt svg,.dlk svg{width:100%;height:100%;display:block}
.dlleeg{font:800 clamp(22px,4cqh,36px)/1 var(--display);color:#fff}
.dlplates{display:grid;grid-template-columns:repeat(var(--np),1fr);gap:clamp(12px,2.6cqw,34px);width:min(96cqw,calc(var(--np)*min(36cqw,58cqh)))}
.dlplate{display:flex;flex-direction:column;align-items:center;padding:10px 8px 14px;cursor:pointer;min-width:0}
.dlwho{width:76%;aspect-ratio:1;position:relative}.dlwho>svg{position:absolute;inset:0;width:100%;height:100%}
.dldish{width:100%;min-height:clamp(80px,16cqh,150px);margin-top:4px;background:radial-gradient(ellipse at 50% 40%,#ffffff 55%,#dfe6ee 56%,#dfe6ee 68%,#ffffff 69%);border:4px solid var(--ink);border-radius:50%/40%;display:grid;place-items:center;padding:8px 10%}
.dlon{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.dlk{width:clamp(42px,8.5cqh,74px);aspect-ratio:1;padding:0;border:0;background:none;border-radius:50%}
@container (max-aspect-ratio:1/1){.dlplates{width:96cqw}.dlt{width:clamp(40px,6cqh,70px)}}

/* Xylofoon */
.xyplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3cqh,30px);padding:8px 2cqw}
.xyscore{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:clamp(60px,12cqh,110px);justify-content:center}
.xytitle{font:800 clamp(20px,3.6cqh,34px)/1 var(--display);color:var(--ink);text-align:center}
.xydots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:92cqw;padding:10px 16px;background:var(--paper);border-radius:18px;box-shadow:0 5px 0 var(--shade)}
.xydots:empty{display:none}
.xydots i{width:clamp(22px,5.4cqh,44px);aspect-ratio:1;border-radius:50%;background:var(--c);border:3px solid var(--ink);transition:transform .2s,opacity .3s}
.xydots i.done{opacity:.3}
.xydots i.cur{transform:scale(1.3);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink)}
.xybars{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4cqw,16px);height:min(64cqh,52cqw);width:min(96cqw,136cqh);padding:18px 20px;background:linear-gradient(#a8703f,#7a4a24);border:4px solid var(--ink);border-radius:26px;box-shadow:0 7px 0 var(--shade)}
.xybar{position:relative;flex:1;min-width:0;height:var(--h);background:var(--c);border:4px solid var(--ink);border-radius:14px;padding:0;box-shadow:inset 0 -10px 0 rgba(0,0,0,.15),inset 0 8px 0 rgba(255,255,255,.3);transition:filter .15s,transform .1s;touch-action:none}
.xybar i{position:absolute;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#c9ced8;border:2px solid var(--ink)}
.xybar i:first-child{top:9%}.xybar i:last-child{bottom:9%}
.xybar.lit{filter:brightness(1.35) saturate(1.2);transform:scale(1.04)}
.xybar.next{animation:xynext .9s ease-in-out infinite;outline:5px solid #fff;outline-offset:3px}
@keyframes xynext{50%{box-shadow:0 0 0 6px #fff,0 0 24px 12px var(--c)}}
.xybar.hint{outline:6px dashed #fff;outline-offset:3px}
@container (max-aspect-ratio:1/1){.xybars{width:96cqw;height:44cqh}}

/* Kikkersprong */
.kkplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4cqh,24px);padding:8px 2cqw}
.kksvg{width:min(96cqw,200cqh);max-height:70cqh;height:auto;border-radius:26px;border:5px solid var(--ink);box-shadow:0 7px 0 var(--shade);background:#7cc4e8}
.kkfrog{transition:transform .45s cubic-bezier(.3,1.2,.5,1);pointer-events:auto;cursor:pointer}
.kkbody.hop{animation:kkhop .45s ease-out}
@keyframes kkhop{40%{transform:translateY(-70px)}}
.kkfly{animation:kkfly 1.1s ease-in-out infinite alternate}
@keyframes kkfly{to{transform:translate(6px,-9px)}}
.kkpad{cursor:pointer}
.kkopts{display:flex;gap:clamp(12px,3cqw,30px);justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none}
.kkopts.on{opacity:1;pointer-events:auto}
.kkopts:empty{display:none}
.kkopt{width:clamp(80px,15cqh,130px);aspect-ratio:1;font:800 clamp(40px,8cqh,72px)/1 var(--display);color:var(--ink);display:grid;place-items:center}
.kkopt.right{outline:6px solid #3fa45b;outline-offset:-3px}
.kkopt.nope{opacity:.4}

/* Kiekeboe */
.kbplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4cqw,50px);padding:10px 2cqw}
.kbq{width:min(34cqw,62cqh);aspect-ratio:1;padding:10px;flex:none}
.kbq>svg{width:100%;height:100%;display:block}
.kbopts{position:relative;flex:1;height:100%}
.kbbush{transition:transform .7s cubic-bezier(.4,0,.6,1)}
.kbbush.kb-bottom.open{transform:translateY(170px)}.kbbush.kb-left.open{transform:translateX(-180px)}.kbbush.kb-right.open{transform:translateX(180px)}
.kbopts .choice.nope{opacity:.4}
.kbopts .choice.right{outline:6px solid #3fa45b;outline-offset:-3px}
@container (max-aspect-ratio:1/1){.kbplay{flex-direction:column;padding:2cqh 0}.kbopts{width:100%}.kbq{width:min(60cqw,34cqh)}}

/* Schatkaart */
.skplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3cqw,40px);padding:10px 2cqw}
.skarrows{display:flex;flex-direction:column;gap:8px;padding:12px;flex:none}
.skarr{width:clamp(48px,11cqh,90px);aspect-ratio:1;display:block;transition:opacity .3s}
.skarr.on{opacity:.3}
.skarr svg{width:100%;height:100%;display:block}
.skmap{height:min(88cqh,62cqw);width:auto;max-width:80cqw;filter:drop-shadow(0 6px 0 var(--shade))}
.skcell{cursor:pointer}
.skpip{transition:transform .4s cubic-bezier(.3,1.2,.5,1);pointer-events:none}
.skpath,.skkist{pointer-events:none}
@container (max-aspect-ratio:1/1){.skplay{flex-direction:column}.skarrows{flex-direction:row}.skarr{width:clamp(48px,14cqw,90px)}.skmap{width:94cqw;height:auto;max-height:62cqh;max-width:94cqw}}

/* ---------- samen spelen op twee tablets ---------- */
.ksamen{position:relative}
.ksamen .sdot{position:absolute;right:0;top:0;width:18px;height:18px;border-radius:50%;background:#3fbf5a;border:3px solid #fff}
.samen-scr .area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.samen-kids{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.samen-kid{width:min(30cqw,250px);background:#fff;border-radius:30px;box-shadow:0 8px 0 var(--shade);padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;opacity:.55;filter:grayscale(.7)}
.samen-kid.on{opacity:1;filter:none}
.samen-kid .sk-face svg{width:min(22cqw,170px);height:auto;display:block}
.samen-kid b{font-size:clamp(20px,3cqmin,30px);color:var(--accent)}
.samen-kid .sk-st{position:absolute;right:10px;top:10px;width:52px;height:52px;border-radius:50%;background:#e8e4f0;color:#6a6488;display:grid;place-items:center}
.samen-kid.on .sk-st{background:#3fbf5a;color:#fff}
.samen-kid.busy .sk-st{background:#f5922f;color:#fff}
.samen-kid .sk-st svg{width:60%;height:60%}
.samen-st{margin:0;color:var(--muted);font-size:clamp(17px,2.4cqmin,24px);text-align:center;max-width:36ch;font-weight:700}
.samen-pop,.samen-wacht{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 88%,transparent)}
.sp-box,.sw-box{background:#fff;border-radius:34px;box-shadow:0 10px 0 var(--shade);padding:24px 30px;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;max-width:92vw}
.sp-row{display:flex;align-items:center;gap:16px}
.sp-face svg{width:min(34vmin,200px);height:auto;display:block}
.sp-ic{width:min(14vmin,80px);aspect-ratio:1;color:var(--accent)}.sp-ic svg{width:100%;height:100%}
.sp-box p{margin:0;font-size:clamp(20px,3.2vmin,30px);font-weight:800;color:var(--accent);text-align:center}
.sp-btns{display:flex;gap:30px}
.sp-yes,.sp-no{width:min(20vmin,110px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 7px 0 rgba(0,0,0,.18)}
.sp-yes{background:#3fbf5a}.sp-no{background:#e8473f}
.sp-yes svg,.sp-no svg{width:56%;height:56%}
.sw-faces{display:flex;align-items:center;gap:14px}.sw-faces span svg{width:min(26vmin,150px);height:auto;display:block}
.sw-dots{display:flex;gap:8px}.sw-dots b{width:16px;height:16px;border-radius:50%;background:var(--accent);animation:swdot 1.2s infinite ease-in-out}
.sw-dots b:nth-child(2){animation-delay:.2s}.sw-dots b:nth-child(3){animation-delay:.4s}
@keyframes swdot{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.sw-x{position:absolute;right:-14px;top:-14px}
.vel-paper{aspect-ratio:10/7;width:min(calc(100cqh * 10 / 7 - 30px),calc(100cqw - 220px));padding:1.2%}
.vel-paper svg.vel{width:100%;height:100%;display:block;border-radius:18px;touch-action:none}
.vel-paper .pennen g{transition:opacity .4s}
.samen-duo{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:4px 12px;box-shadow:0 5px 0 var(--shade);z-index:2}
.samen-duo svg{width:52px;height:52px;display:block}.samen-duo .sd-plus{font-weight:800;color:var(--accent);font-size:24px}
.samen-duo.alleen .sd-ander{opacity:.3;filter:grayscale(1)}
.opt-row .samen-keuze{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.opt-row .samen-keuze .pkid span{display:inline;color:inherit;font-size:16px;font-weight:700}
.samen-keuze .pkid svg{width:44px;height:44px}
@media (orientation:portrait){.vel-paper{width:min(100cqw,calc((100cqh - 190px) * 10 / 7))}.samen-duo{top:4px;bottom:auto}}
.samen-kies .sk-games{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.sk-game{width:min(26vmin,180px);aspect-ratio:1;background:#f4f1fa;border-radius:28px;box-shadow:0 7px 0 var(--shade);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--accent)}
.sk-game svg{width:58%;height:58%}.sk-game b{font-size:clamp(17px,2.6vmin,24px)}
.samen-duo .sd-me,.samen-duo .sd-ander{position:relative;border-radius:50%;display:block}
.samen-duo .beurt{box-shadow:0 0 0 5px #3fbf5a;animation:beurt 1.4s ease-in-out infinite alternate}
@keyframes beurt{to{box-shadow:0 0 0 9px rgba(63,191,90,.35)}}
.samen-duo .sd-n{position:absolute;right:-8px;bottom:-6px;min-width:24px;height:24px;border-radius:12px;background:#f9d23c;color:#2b2440;font:800 15px/24px var(--font,inherit);text-align:center;font-style:normal}
.samen-duo .sd-n:empty{display:none}
.smem .mc .mc-wie{position:absolute;right:6%;bottom:6%;width:30%;aspect-ratio:1;z-index:2;border-radius:50%;background:#fff;box-shadow:0 2px 0 var(--shade)}
.smem .mc .mc-wie:empty{display:none}.smem .mc .mc-wie svg{width:100%;height:100%;display:block}
.bouw-paper{aspect-ratio:3/2;width:min(calc(100cqh * 1.5 - 30px),calc(100cqw - 240px));padding:1%}
.bouw-paper svg.bouw{width:100%;height:100%;display:block;border-radius:18px;touch-action:none}
.bouw-pal{grid-template-columns:repeat(2,auto)}
.bouw-t{width:min(10cqh,66px);aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--shade);display:grid;place-items:center}
.bouw-t svg{width:84%;height:84%}.bouw-t.on{outline:5px solid var(--ink);outline-offset:2px;transform:scale(1.08)}
@media (orientation:portrait){.bouw-paper{width:min(100cqw,calc((100cqh - 230px) * 1.5))}.bouw-pal{grid-template-columns:repeat(7,auto)}}

/* ---------- koptelefoon-melding ---------- */
.koptel{position:absolute;inset:0;z-index:55;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 90%,transparent)}
.kt-box{background:#fff;border-radius:36px;box-shadow:0 10px 0 var(--shade);padding:26px 34px;display:flex;flex-direction:column;align-items:center;gap:18px}
.kt-row{display:flex;align-items:center;gap:18px}.kt-row svg{width:min(28vmin,170px);height:auto}
.kt-row b{font-size:clamp(22px,3.4vmin,32px);color:var(--muted)}
.kt-row svg:last-child{animation:ktbob 1.6s ease-in-out infinite alternate}@keyframes ktbob{to{transform:translateY(-8px) rotate(-4deg)}}

/* ---------- vrij tekenen en het tekenboek ---------- */
.vrijwrap .vel-paper{width:min(calc(100cqh * 10 / 7 - 30px),calc(100cqw - 290px))}
.vrij-tools{display:flex;flex-direction:column;align-items:center;gap:min(1.6cqh,14px)}
.vrij-tools .pennen{display:grid;grid-template-columns:repeat(4,auto);gap:8px}
.pen-b{width:min(8.5cqh,56px);aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--shade);color:var(--accent);display:grid;place-items:center}
.pen-b svg{width:78%;height:78%}.pen-b[aria-pressed="true"]{outline:5px solid var(--ink);outline-offset:2px;transform:scale(1.06)}
.vrij-tools .palette{grid-template-columns:repeat(3,auto)}
.vrij-tools .dot-c{width:min(8.5cqh,58px)}
.round.sure{background:#e8473f;color:#fff}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(42cqw,230px),1fr));gap:18px;padding:6px 4px 24px}
.tb-item,.tb-new{position:relative;aspect-ratio:10/7;border-radius:22px;background:#fff;box-shadow:0 7px 0 var(--shade);overflow:hidden;padding:0}
.tb-item img{width:100%;height:100%;display:block;object-fit:contain}
.tb-new{display:grid;place-items:center;background:#f4f1fa;border:4px dashed #c9c2e0}.tb-new svg{width:46%;height:auto}
.tb-met{position:absolute;right:8px;bottom:8px;width:40px;height:40px;border-radius:50%;background:#3fbf5a;color:#fff;display:grid;place-items:center}.tb-met svg{width:70%;height:70%}
.tb-groot{position:absolute;inset:0;display:grid;place-items:center}
.tb-groot img{max-width:100%;max-height:100%;aspect-ratio:10/7;background:#fff;border-radius:24px;box-shadow:0 8px 0 var(--shade)}
@media (orientation:portrait){.vrijwrap .vel-paper{width:min(100cqw,calc((100cqh - 250px) * 10 / 7))}.vrij-tools .palette{grid-template-columns:repeat(8,auto)}.vrij-tools .dot-c{width:min(9cqw,52px)}}

/* ---------- bouwen ---------- */
.bouw-vb{position:absolute;left:10px;top:8px;background:#fff;border-radius:20px;box-shadow:0 6px 0 var(--shade);padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:2}
.bouw-vb b{color:var(--accent);font-size:clamp(14px,2cqmin,20px)}
.bouw-vb svg{width:min(16cqw,150px);height:auto;max-height:min(24cqh,170px)}

/* ---------- toren van babel ---------- */
.babel-veld{position:absolute;inset:0;display:grid;place-items:center}
.babel-veld svg.babel{height:100%;width:auto;max-width:100%;aspect-ratio:1;border-radius:26px;box-shadow:0 8px 0 var(--shade);touch-action:none;background:#bfe2f4}
/* robotje: herhalen */
.rrep{display:flex;gap:10px;justify-content:center}
.rrep-b{min-width:min(10cqh,64px);height:min(10cqh,64px);border-radius:18px;background:#f9d23c;color:#2b2440;font-weight:800;font-size:clamp(20px,3cqmin,28px);box-shadow:0 5px 0 #d4a920;padding:0 10px}
.rchip{position:relative}.rchip .rx{position:absolute;right:-6px;top:-8px;background:#f9d23c;color:#2b2440;border-radius:10px;padding:0 5px;font-size:15px;font-weight:800;box-shadow:0 2px 0 #d4a920}

/* ---------- rekenen tot 20 ---------- */
.twplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3cqh,22px)}
.tw-reks{display:flex;gap:min(3cqw,26px);flex-wrap:wrap;justify-content:center}
.tw-rek{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:#fff;border-radius:18px;padding:10px;box-shadow:0 6px 0 var(--shade);border:4px solid #2b2440}
.tw-vak{width:min(7.5cqh,6cqw,56px);aspect-ratio:1;border-radius:50%;background:#efeaf6;display:grid;place-items:center}
.tw-dot{width:84%;aspect-ratio:1;border-radius:50%;background:var(--c);border:3px solid #2b2440;animation:pop-in .35s calc(var(--i)*.03s) both;position:relative}
.tw-dot.weg.gone{opacity:.25}.tw-dot.weg.gone::after{content:"";position:absolute;inset:-12%;background:linear-gradient(45deg,transparent 44%,#2b2440 44%,#2b2440 56%,transparent 56%)}
.tw-som{display:flex;align-items:center;gap:10px;font-weight:800}
.tw-n,.tw-op{font-size:clamp(34px,6cqh,60px);color:#2b2440}.tw-op{color:var(--muted)}
.tw-ask{min-width:1.4em;text-align:center;background:#fff;border-radius:16px;box-shadow:0 5px 0 var(--shade);padding:0 10px}.tw-ask.ok{background:#3fbf5a;color:#fff}
.tw-opts{display:flex;gap:min(3cqw,24px)}
.tw-opt{width:min(16cqh,120px);aspect-ratio:1;font-size:clamp(34px,6cqh,56px);font-weight:800}
.tw-lijn{width:min(96cqw,1000px);height:auto;background:#fff;border-radius:24px;box-shadow:0 7px 0 var(--shade)}
.tw-tik{cursor:pointer}
@media (orientation:portrait){.tw-vak{width:min(7cqw,52px)}}
.tw-som{background:#fff;border-radius:22px;padding:2px 18px;box-shadow:0 5px 0 var(--shade)}.tw-som:empty{display:none}
/* ---------- engels ---------- */
.enplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3cqh,22px)}
.en-oor{display:flex;align-items:center;gap:14px;padding:12px 26px;border-radius:999px;color:var(--accent)}
.en-oor svg{width:min(10cqh,64px);height:auto}.en-oor b{font-size:clamp(28px,5cqh,48px);color:#2b2440}.en-oor b:empty{display:none}
.en-vak{position:relative;flex:1;width:100%;min-height:0}
.en-groot{display:flex;flex-direction:column;align-items:center;padding:16px}.en-groot svg{width:min(40cqh,260px);height:auto}.en-groot b{font-size:clamp(30px,5cqh,52px);color:var(--accent)}

/* Liedjes: kies een liedje en speel het mee */
.liedlijst{position:absolute;inset:0;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:clamp(12px,2.4cqh,24px);padding:clamp(14px,3cqh,30px) 3cqw clamp(20px,4cqh,40px)}
.lied-k{width:clamp(190px,27cqw,300px);min-height:clamp(130px,22cqh,190px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;border:0;font:inherit}
.lied-k b{font:800 clamp(18px,2.8cqh,26px)/1.15 var(--display);color:var(--ink);text-align:center}
.lied-k.vrij{background:#e3f4ff}.lied-k.eigen{background:#fff4d6}
.lied-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.lied-dots i{width:clamp(16px,3cqh,24px);aspect-ratio:1;border-radius:50%;background:var(--c);border:3px solid var(--ink)}
.lied-ic svg{width:clamp(60px,10cqh,90px);height:auto;display:block}
@container (max-aspect-ratio:1/1){.lied-k{width:42cqw}}
/* ouderhoek: Liedje maken */
.lm-bars{display:flex;align-items:center;gap:8px;height:150px;max-width:540px;padding:12px 14px;margin:14px 0 10px;background:linear-gradient(#a8703f,#7a4a24);border:3px solid var(--ink);border-radius:18px}
.lm-bar{flex:1;min-width:0;height:var(--h);background:var(--c);border:3px solid var(--ink);border-radius:10px;padding:0;touch-action:none;box-shadow:inset 0 -7px 0 rgba(0,0,0,.15),inset 0 5px 0 rgba(255,255,255,.3);transition:filter .12s,transform .1s}
.lm-bar.lit{filter:brightness(1.35);transform:scale(1.05)}
.lm-noten{display:flex;flex-wrap:wrap;gap:6px 12px;min-height:30px;margin-bottom:10px;align-items:center}
.lm-noten small{color:var(--muted,#6b6478)}
.lm-zin{display:flex;gap:3px;padding:5px 8px;background:#f4efe6;border-radius:12px}
.lm-zin i{width:15px;height:15px;border-radius:50%;background:var(--c);border:2px solid var(--ink)}
.lm-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lm-msg{display:block;min-height:1.2em;margin-top:6px}
.lm-lijst{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:4px}
.lm-lijst li{display:flex;align-items:center;gap:10px}
.lm-lijst small{color:var(--muted,#6b6478)}
.lm-play{flex:1;display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;font:inherit;font-weight:700;color:var(--ink);text-align:left;cursor:pointer}
.lm-play svg{width:24px;height:24px;flex:none;color:#3fa45b}

/* Domino */
.domplay{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(6px,1.6cqh,18px);padding:clamp(4px,1cqh,10px) 2cqw clamp(12px,2.6cqh,26px)}
.dom-top{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2cqw,20px);min-height:clamp(56px,10cqh,96px)}
.dom-wie{width:clamp(56px,10cqh,92px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;transition:transform .25s,box-shadow .25s}
.dom-wie>svg{width:100%;height:100%}
.dom-wie.beurt{transform:scale(1.12);box-shadow:0 0 0 5px #fff,0 0 0 9px var(--ink)}
.dom-backs{display:flex;gap:6px}
.dom-back{width:clamp(22px,3.6cqh,34px);aspect-ratio:1/2;border-radius:7px;background:repeating-linear-gradient(45deg,#8a5cc7 0 6px,#a07ad6 6px 12px);border:3px solid var(--ink)}
.dom-mid{display:flex;align-items:center;gap:2cqw;min-height:0}
.dom-rij{flex:1;min-width:0;height:100%;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:12px 8px;overflow:hidden;padding:10px 12px}
.dom-rij .dom-steen{flex:none;pointer-events:none}
.dom-rij .dom-steen.kant-l .dom-h:first-child{animation:domopen 1.6s ease-in-out infinite}
.dom-rij .dom-steen.kant-r .dom-h:last-child{animation:domopen 1.6s ease-in-out infinite}
@keyframes domopen{50%{box-shadow:inset 0 0 0 5px #f9d23c;background:#fff6c8}}
.dom-plek{flex:none;width:calc(var(--w) * .62);height:calc(var(--w) * .5);border:4px dashed rgba(43,36,64,.28);border-radius:16px;transition:background .2s,border-color .2s,transform .2s}
.dom-plek.open{border-color:rgba(43,36,64,.6);background:rgba(255,255,255,.5)}
.dom-plek.doel{border-color:#f5922f;background:#fff1c4;transform:scale(1.12)}
.dom-plek.hint{animation:domplek 1s ease-in-out 3}
@keyframes domplek{50%{background:#fff1c4;border-color:#f5922f;transform:scale(1.15)}}
.dom-puntjes{flex:none;font:800 28px/1 var(--display);color:var(--ink);opacity:.5;letter-spacing:2px}
.dom-zweef{position:fixed;z-index:1000;pointer-events:none;margin:0;transform:scale(1.08) rotate(-3deg);box-shadow:0 14px 24px rgba(0,0,0,.25)!important}
.dom-steen.weg{opacity:.25}
.dom-hand .dom-steen{touch-action:none}
.dom-steen{display:flex;width:var(--w,min(21cqw,26cqh));aspect-ratio:2/1;background:#fffdf6;border:4px solid var(--ink);border-radius:16px;padding:0;box-shadow:0 6px 0 var(--shade);overflow:hidden;cursor:pointer;transition:transform .15s}
.dom-h{flex:1;display:grid;place-items:center;padding:7%;min-width:0}
.dom-h+.dom-h{border-left:3px solid var(--ink)}
.dom-h svg{width:100%;height:100%;display:block}
.dom-hand{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(8px,1.6cqw,18px);padding:8px;border-radius:24px;transition:background .25s}
.dom-hand.beurt{background:rgba(255,255,255,.45)}
.dom-hand .dom-steen:active{transform:scale(.96)}
.dom-steen.hint{animation:domhint .9s ease-in-out infinite;outline:5px solid #f9d23c;outline-offset:3px}
@keyframes domhint{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.dom-pot{position:relative;flex:none;width:clamp(70px,10cqw,120px);aspect-ratio:1/1.3;border:0;background:none;padding:0}
.dom-pot i{position:absolute;left:12%;width:76%;height:46%;border-radius:10px;background:repeating-linear-gradient(45deg,#8a5cc7 0 6px,#a07ad6 6px 12px);border:3px solid var(--ink)}
.dom-pot i:nth-child(1){top:44%}.dom-pot i:nth-child(2){top:30%;transform:rotate(-6deg)}.dom-pot i:nth-child(3){top:16%;transform:rotate(5deg)}
.dom-pot b{position:absolute;right:-6px;top:4px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:var(--ink);color:#fff;font:800 17px/30px var(--display)}
.dom-pot b:empty{display:none}
.dom-pot.leeg i{opacity:.25}
.dom-pot.hint{animation:domhint .9s ease-in-out infinite}
@container (max-aspect-ratio:1/1){.dom-pot{width:18cqw}}

/* Dier op dier: which animals are on the crocodile already */
.dod-teller{position:absolute;left:2cqw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.dod-teller i{width:clamp(34px,7cqh,64px);aspect-ratio:1;border-radius:14px;background:var(--paper);box-shadow:0 4px 0 var(--shade);opacity:.4;display:grid;place-items:center;transition:opacity .3s,transform .3s}
.dod-teller i.op{opacity:1;transform:scale(1.06)}
.dod-teller i svg{width:84%;height:84%}
@container (max-aspect-ratio:1/1){.dod-teller{left:50%;top:1.5cqh;transform:translateX(-50%);flex-direction:row}.dod-teller i{width:clamp(30px,8cqw,56px)}}

/* Boomgaard, Slakkenrace, Opruimen: a play field and a big die */
.bgplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2cqw;padding:1cqh 2cqw 2cqh}
.bg-veld{height:100%;width:auto;max-width:calc(100% - clamp(100px,16cqh,160px));aspect-ratio:1000/660;border-radius:26px;box-shadow:0 8px 0 var(--shade);touch-action:none;background:#e8f6ff}
.opr-veld{aspect-ratio:1000/700;max-width:100%}
.dob-knop{flex:none;width:clamp(90px,15cqh,140px);aspect-ratio:1;border-radius:24px;background:#fff;border:5px solid var(--ink);box-shadow:0 7px 0 var(--shade);display:grid;place-items:center;padding:10px}
.dob-knop.wacht{animation:dobwacht 1.2s ease-in-out infinite}
.dob-knop.rolt{animation:dobrol .25s linear infinite}
@keyframes dobwacht{50%{transform:rotate(-8deg) scale(1.07)}}
@keyframes dobrol{to{transform:rotate(360deg)}}
.dob-face{width:100%;height:100%;display:grid;place-items:center}
.dob-face svg{width:100%;height:100%}
.dob-kl{display:block;width:72%;aspect-ratio:1;border-radius:50%;background:var(--c);border:4px solid var(--ink)}
.dob-kl.twee{background:linear-gradient(90deg,var(--c) 50%,var(--c2) 50%)}
.bg-v{cursor:pointer;transition:filter .2s}
.bg-v.hint{animation:bghint 1s ease-in-out infinite}
@keyframes bghint{50%{filter:drop-shadow(0 0 9px #fff) brightness(1.25)}}
.bg-v.weg{pointer-events:none}
.bg-raaf{transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.sl-s{cursor:pointer;transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.opr-t{cursor:grab}.opr-t.sleep{cursor:grabbing;filter:drop-shadow(0 12px 8px rgba(0,0,0,.3))}
@container (max-aspect-ratio:1/1){.bgplay{flex-direction:column}.bg-veld{width:100%;height:auto;max-width:100%}}
/* Voer de dieren */
.voerplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:2cqh 2cqw}
.voer-bak{min-height:clamp(110px,24cqh,220px);display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:90cqw}
.voer-eten{width:clamp(110px,22cqh,200px);aspect-ratio:1;display:grid;place-items:center;transition:transform .5s,opacity .3s}
.voer-eten.klein{width:clamp(70px,13cqh,120px);border:0;background:var(--paper);border-radius:20px;box-shadow:0 5px 0 var(--shade);padding:8px}
.voer-eten svg{width:100%;height:100%}
.voer-dieren{display:flex;gap:2cqw;justify-content:center;flex-wrap:wrap}
.voer-d{position:relative;width:clamp(120px,20cqw,230px);aspect-ratio:1;border:0;padding:12px}
.voer-d>svg.pic{width:100%;height:100%}
.voer-wil{position:absolute;left:50%;top:-16%;transform:translateX(-50%);pointer-events:none}
.voer-wil:empty{display:none}
.voer-ballon{display:flex;gap:2px;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:4px 8px}
.voer-ballon svg{width:clamp(26px,4.4cqh,40px);height:auto}
.voer-n{position:absolute;right:8px;bottom:6px;font:800 clamp(22px,4cqh,38px)/1 var(--display);color:#e8473f}
@container (max-aspect-ratio:1/1){.voer-d{width:40cqw}}
/* Snel tikken */
.stplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:1.4cqh;padding:1cqh 2cqw 2cqh}
.st-boven{display:flex;align-items:center;gap:4cqw}
.st-kaart{width:clamp(100px,17cqh,170px);aspect-ratio:1;display:grid;place-items:center;padding:10px}
.st-kaart>div,.st-kaart svg{width:100%;height:100%}
.st-score{display:flex;align-items:center;gap:8px;font:800 clamp(26px,5cqh,44px)/1 var(--display);color:var(--ink)}
.st-score>svg{width:clamp(44px,8cqh,72px);height:auto}
.st-balk{position:relative;width:min(70cqw,700px);height:14px;background:#fff;border-radius:7px;box-shadow:inset 0 0 0 3px var(--ink);flex:none}
.st-balk i{position:absolute;left:0;top:0;bottom:0;background:#f5922f;border-radius:7px}
.st-vleugel{position:absolute;top:50%;width:46px;height:46px;transform:translate(-50%,-50%)}
.st-vleugel svg{width:100%;height:100%}
.st-vak{position:relative;flex:1;width:100%;min-height:0}
.choice.pip-pakt{outline:6px solid #8a5cc7;outline-offset:3px}

/* Vragen na het Bijbelboekje */
.bvplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3cqh,22px);padding:0 2cqw}
.bv-vraag{display:flex;align-items:center;gap:14px;max-width:92cqw;padding:12px 26px;border-radius:999px;border:0;color:var(--accent);font:inherit}
.bv-vraag svg{flex:none;width:min(8cqh,54px);height:auto}
.bv-vraag b{font:800 clamp(22px,4.2cqh,40px)/1.15 var(--display);color:#2b2440;text-align:left}
.bv-vak{position:relative;flex:1;width:100%;min-height:0}
.bv-opt .bv-fig{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.bv-opt.hint-wiebel{animation:domhint .9s ease-in-out infinite;outline:6px solid #f9d23c;outline-offset:4px}

/* Bijwerken bij het opstarten */
.bijwerk{display:grid;place-items:center;background:linear-gradient(#cfe6f2,#eef7fc)}
.bw-box{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(90vw,520px);text-align:center;padding:20px}
.bw-box .pip{width:clamp(110px,22vh,180px);height:auto;animation:bob 2.4s ease-in-out infinite}
.bw-titel{font:800 clamp(26px,4.4vh,40px)/1.1 var(--display);color:var(--ink);margin:0}
.bw-tekst{font-size:clamp(17px,2.4vh,22px);color:var(--ink);margin:0;opacity:.85}
.bw-balk{width:min(80vw,420px);height:22px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 3px var(--ink);overflow:hidden}
.bw-balk i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa45b,#7cc06a);border-radius:11px;transition:width .4s}
.bw-tel{font-size:15px;color:var(--ink);opacity:.7;margin:0;min-height:1.2em}
.bw-knoppen{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- uitleg bij een spel (i-knop) ---------- */
.bar .binfo{color:#3559a6}
.sheet.uitleg{width:min(620px,100%)}
.ul-lees{background:#fff6dc;border-radius:18px;padding:12px 18px 14px;margin:6px 0 12px}
.ul-lees small{display:block;font-weight:700;color:#8a6a1a;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.ul-lees p{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:23px;line-height:1.35;color:var(--ink)}
.ul-pip{display:inline-flex;align-items:center;gap:8px}
.ul-pip svg{width:22px;height:22px}
.ul-tip{margin-top:14px;border-top:2px solid #eef1f7;padding-top:10px}
.ul-tip p{margin:4px 0 0}
@media (max-height:520px){.ul-lees p{font-size:19px}}

/* ---------- gratis haltes en de volledige reis (gezin.js) ---------- */
.mk.betaal .mk-lock{background:#fff3c4;padding:12%;box-shadow:0 3px 0 rgba(122,90,18,.35)}
.mk.betaal .mk-lock svg{width:100%;height:100%}
.mk.betaal .mk-c{filter:saturate(.75)}
.bridge .bslot{animation:slotwip 3.2s ease-in-out infinite}
@keyframes slotwip{0%,86%,100%{transform:translate(-40px,-224px) scale(1.25) rotate(0)}90%{transform:translate(-40px,-224px) scale(1.25) rotate(-8deg)}95%{transform:translate(-40px,-224px) scale(1.25) rotate(7deg)}}
.hbridge.slot{background:#fff8dc}
.hb-slot{display:block;width:44px;height:44px}.hb-slot svg{width:100%;height:100%}
/* welkom: wie gebruikt dit apparaat? */
.screen.welkom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vmin,18px);padding:16px;overflow-y:auto}
.welkom .title{font-size:clamp(30px,6vmin,64px)}
.welkom .title small{display:block;font-size:.45em;color:var(--ink)}
.wk-keuze{position:relative;z-index:2;display:flex;gap:clamp(12px,2.4vmin,26px);flex-wrap:wrap;justify-content:center;width:min(900px,100%)}
.wk-kaart{flex:1 1 260px;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 18px 20px;border-radius:28px;background:#fff;box-shadow:0 8px 0 var(--shade);text-align:center}
.wk-kaart b{font-family:var(--display);font-weight:800;font-size:clamp(20px,3vmin,28px);color:var(--accent);line-height:1.1}
.wk-kaart span{font-size:15px;color:var(--muted);line-height:1.35}
.wk-pic{display:block;height:clamp(90px,18vmin,170px);aspect-ratio:1}
.wk-pic svg{width:100%;height:100%}
.wk-onder{position:relative;z-index:2;width:min(640px,100%);text-align:center}
.wk-gratis{margin:4px 0;font-weight:700;color:var(--ink)}
.wk-koppel{background:#fff;border-radius:18px;padding:10px 14px;text-align:left;box-shadow:0 4px 0 var(--shade);margin-top:8px}
.wk-koppel summary{cursor:pointer;font-weight:700;color:var(--accent)}
.wk-koppel p{margin:6px 0}
.welkom .hills{pointer-events:none}
/* ouderhoek, tab Gezin */
.gz-koop h4{margin-top:0}
.gz-lijst{margin:8px 0 10px;padding-left:20px}
.gz-lijst li{margin:2px 0}
.gz-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.gz-knoppen .btn-sec{font-size:16px;padding:12px 18px}
.gz-knoppen .btn-sec:disabled{opacity:.5}
.gz-ok{display:flex;align-items:center;gap:8px;font-weight:700;color:#2f7d45}
.gz-ok svg{width:26px;height:26px;flex:none}
.gz-apps{list-style:none;margin:6px 0;padding:0}
.gz-apps li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef1f7}
.gz-ic{font-size:24px;flex:none}
.gz-an{flex:1;min-width:0;display:flex;flex-direction:column}
.gz-an small{color:var(--muted)}