/* Leersafari – stijl van de spelmotor en de safari's die erop draaien. */
@font-face{font-family:'Grandstander';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/grandstander-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Grandstander';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/grandstander-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Grandstander';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/grandstander-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Grandstander';font-weight:900;font-style:normal;font-display:swap;src:url(fonts/grandstander-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2')}


:root{
  --ink:#2A1E14;--line:#2A1E14;--bg:#FFF2D6;--paper:#FFFCF4;--empty:#FFFCF4;--soft:#F8EBCB;--edge:#EAD9AE;--muted:#7A5F45;
  --hill1:#9CCB5B;--hill2:#C9DE8C;--tree:#5B7F3A;--grass:#7BAF43;
  --mandarijn:#FF8A3D;--munt:#7CC243;--citroen:#FFC93C;--framboos:#F2617A;--bes:#6FC2F0;--groen:#2FA866;--rood:#E5484D;--druif:#B58CF2;--btnink:#24180F;
  --paws:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23EFD7A6'%3E%3Cellipse cx='30' cy='38' rx='7' ry='6'/%3E%3Ccircle cx='22' cy='28' r='3'/%3E%3Ccircle cx='29' cy='25' r='3'/%3E%3Ccircle cx='36' cy='27' r='3'/%3E%3Cellipse cx='88' cy='96' rx='7' ry='6'/%3E%3Ccircle cx='80' cy='86' r='3'/%3E%3Ccircle cx='87' cy='83' r='3'/%3E%3Ccircle cx='94' cy='85' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --fd:'Grandstander','Baloo 2','Comic Sans MS','Chalkboard SE',system-ui,sans-serif;
  --fb:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#FFF4E2;--line:#0B0F1C;--bg:#17213A;--paper:#24324F;--empty:#33446A;--soft:#2C3C5E;--edge:#3D4F78;--muted:#D9C9AE;
    --hill1:#2F4A3A;--hill2:#26392F;--tree:#1C2D24;--grass:#3B5E44;
    --paws:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%231F2B48'%3E%3Cellipse cx='30' cy='38' rx='7' ry='6'/%3E%3Ccircle cx='22' cy='28' r='3'/%3E%3Ccircle cx='29' cy='25' r='3'/%3E%3Ccircle cx='36' cy='27' r='3'/%3E%3Cellipse cx='88' cy='96' rx='7' ry='6'/%3E%3Ccircle cx='80' cy='86' r='3'/%3E%3Ccircle cx='87' cy='83' r='3'/%3E%3Ccircle cx='94' cy='85' r='3'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#FFF4E2;--line:#0B0F1C;--bg:#17213A;--paper:#24324F;--empty:#33446A;--soft:#2C3C5E;--edge:#3D4F78;--muted:#D9C9AE;
  --hill1:#2F4A3A;--hill2:#26392F;--tree:#1C2D24;--grass:#3B5E44;
  --paws:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%231F2B48'%3E%3Cellipse cx='30' cy='38' rx='7' ry='6'/%3E%3Ccircle cx='22' cy='28' r='3'/%3E%3Ccircle cx='29' cy='25' r='3'/%3E%3Ccircle cx='36' cy='27' r='3'/%3E%3Cellipse cx='88' cy='96' rx='7' ry='6'/%3E%3Ccircle cx='80' cy='86' r='3'/%3E%3Ccircle cx='87' cy='83' r='3'/%3E%3Ccircle cx='94' cy='85' r='3'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--paws) 0 0/120px 120px,var(--bg);color:var(--ink);font:400 1.1rem/1.5 var(--fb);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--fd);line-height:1.1}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:4px solid var(--bes);outline-offset:3px}
#app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:940px;margin:0 auto;padding:14px 16px 56px}

/* kop */
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 0 12px;margin-bottom:4px}
.bar::before{content:"";position:absolute;top:-14px;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--paper);border-bottom:3px solid var(--line);z-index:-1}
.barR{display:flex;gap:10px;align-items:center}
.logo{display:inline-flex;align-items:center;gap:10px;font:900 clamp(1.15rem,4.6vw,1.55rem)/1 var(--fd);letter-spacing:-.01em;min-width:0;color:var(--ink);text-decoration:none}
.logo svg{width:40px;height:40px;flex:none}
.round{width:50px;height:50px;flex:none;border-radius:50%;border:3px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--line);display:grid;place-items:center;font-size:22px;transition:transform .08s,box-shadow .08s}
.round svg{width:26px;height:26px}
.round:active,.pillbtn:active,.pick:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.pillbtn{border:3px solid var(--line);border-radius:99px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--line);padding:.4em 1em;font:800 1rem var(--fd);min-height:48px;transition:transform .08s,box-shadow .08s}
.pillbtn.warn{background:color-mix(in srgb,var(--rood) 24%,var(--paper))}
@media (max-width:460px){.hidesm{display:none}}

/* algemeen */
.title{margin:6px 0 0;text-align:center;font:900 clamp(2.1rem,7vw,3.6rem)/1.05 var(--fd);letter-spacing:-.02em;text-wrap:balance}
.lead{margin:0;text-align:center;font:400 clamp(1.05rem,3vw,1.25rem)/1.45 var(--fb);max-width:42ch}
.card{width:100%;background:var(--paper);border:3px solid var(--line);border-radius:28px;box-shadow:7px 7px 0 var(--line);padding:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:3px solid var(--line);border-radius:18px;background:var(--mandarijn);color:var(--btnink);box-shadow:5px 5px 0 var(--line);padding:.5em 1.1em;min-height:64px;font:800 clamp(1.3rem,4.6vw,1.7rem)/1.1 var(--fd);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.btn.plain{background:var(--paper);color:var(--ink)}
.btn.danger{background:var(--rood);color:#fff}
.btn.small{font-size:1.15rem;min-height:54px}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.savwrap{flex:none;width:min(100vw,1080px);margin:-16px 0 0;line-height:0;overflow:hidden}
@media (min-width:1081px){.savwrap{border-radius:0 0 30px 30px}}
.savwrap>svg{width:100%;height:auto;display:block}

/* spelers */
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px;width:100%;max-width:900px}
.pcard{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;height:100%;padding:18px 12px 16px;border:3px solid var(--line);border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--line);text-align:center;transition:transform .12s,box-shadow .12s}
.players>:nth-child(odd) .pcard{transform:rotate(-1.5deg)}
.players>:nth-child(even) .pcard{transform:rotate(1.2deg)}
.players .pcard:hover{transform:translate(-2px,-3px) rotate(0);box-shadow:9px 9px 0 var(--line)}
.players .pcard:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}
.avc{width:108px;height:108px;flex:none;border:3px solid var(--line);border-radius:50%;background:var(--c);display:grid;place-items:center;line-height:0;overflow:hidden}
.avc svg{width:92px;height:92px}
.pcard .nm{font:800 1.5rem/1.1 var(--fd);overflow-wrap:anywhere}
.pcard .meta{color:var(--muted);font-size:1rem}
.chip{display:inline-block;border:3px solid var(--line);border-radius:99px;background:var(--citroen);color:var(--btnink);padding:1px 12px;font:800 1rem var(--fd)}
.players .pcard.new{border-style:dashed;background:transparent;box-shadow:none;justify-content:center;min-height:210px;font:800 1.15rem var(--fd);transform:none}
.players .pcard.new:hover{transform:none;box-shadow:none;background:var(--paper)}
.plusbig{font:900 3rem/1 var(--fd)}
.note{margin:0;border:3px solid var(--line);border-radius:16px;background:var(--paper);padding:.4em .9em;text-align:center;font-size:1rem}

/* formulier */
.form{display:flex;flex-direction:column;gap:18px;max-width:580px}
.form h2{margin:0;font:900 1.9rem var(--fd)}
.form label,.form .lbl{display:block;font:800 1.15rem var(--fd);margin-bottom:8px}
.form input{width:100%;font:700 1.7rem var(--fd);color:var(--ink);padding:.3em .6em;border-radius:16px;border:3px solid var(--line);background:var(--empty)}
.choices{display:flex;flex-wrap:wrap;gap:12px}
.pick{min-width:62px;height:62px;padding:0 14px;border:3px solid var(--line);border-radius:16px;background:var(--empty);color:var(--ink);box-shadow:3px 3px 0 var(--line);font:800 1.2rem var(--fd)}
.pick[aria-pressed="true"]{background:var(--citroen);color:var(--btnink);transform:rotate(-2deg)}
.pick.an{width:78px;height:78px;padding:4px;display:grid;place-items:center;line-height:0}
.pick.an svg{width:60px;height:60px}
.pick.sw{min-width:56px;width:56px;height:56px;border-radius:50%;background:var(--c)}
.pick.sw[aria-pressed="true"]{background:var(--c);transform:none;outline:4px solid var(--line);outline-offset:3px}
.err{color:var(--rood);font-weight:700;margin:6px 0 0;min-height:1.4em}

/* spellenoverzicht */
.hello{display:flex;flex-direction:column;align-items:center;gap:6px}
.hello .avc{box-shadow:4px 4px 0 var(--line)}
.hello h1{margin:0;font:900 clamp(2.2rem,8vw,3.6rem)/1.05 var(--fd);letter-spacing:-.02em;text-align:center;overflow-wrap:anywhere}
.counts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pill{border:3px solid var(--line);border-radius:99px;background:var(--citroen);color:var(--btnink);box-shadow:3px 3px 0 var(--line);padding:.1em .8em;font:800 1.1rem var(--fd)}
.pill.p2{background:var(--paper);color:var(--ink)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;width:100%}
.gtile{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;height:100%;padding:0 0 14px;border:3px solid var(--line);border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--line);overflow:hidden;text-align:center;transition:transform .12s,box-shadow .12s}
.gtile:hover{transform:translate(-2px,-3px);box-shadow:9px 9px 0 var(--line)}
.gtile:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}
.gtile .art{width:100%;height:112px;background:var(--c);border-bottom:3px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;padding:10px}
.gtile .art .shape{width:64px;height:64px}
.gtile .art .shape.sm{width:44px;height:44px}
.gtile .art .qm{font:900 3rem/1 var(--fd);color:var(--btnink)}
.gtile .gn{font:800 1.25rem/1.15 var(--fd);padding:8px 10px 0}
.gtile .gd{font-size:.95rem;color:var(--muted);padding:0 12px;line-height:1.3}
.gtile .lv{font:800 1.05rem var(--fd);letter-spacing:.08em;color:var(--mandarijn)}
.gtile .lv i{font-style:normal;opacity:.3;color:var(--ink)}
@media (max-width:480px){.games{grid-template-columns:1fr 1fr;gap:14px}.gtile .art{height:92px}.gtile .art .shape{width:50px;height:50px}.gtile .art .shape.sm{width:34px;height:34px}.gtile .gd{display:none}.gtile .gn{font-size:1.1rem}}

/* vormen */
.shape{display:block;width:100%;height:100%;overflow:visible}
.shape g{stroke:var(--line);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.shape.hole g{fill:var(--soft);stroke-dasharray:9 7}
.shape.hole .sh{display:none}

/* spelscherm */
.game{gap:12px;max-width:none;padding-left:0;padding-right:0;padding-bottom:0}
.game .bar{max-width:940px;padding:0 16px 12px}
.prog{display:flex;gap:6px;flex:1;max-width:340px;margin:0 6px}
.prog i{flex:1;height:14px;border:2.5px solid var(--line);border-radius:7px;background:var(--paper)}
.prog i.on{background:var(--groen)}
.stage{position:relative;width:100%;display:grid;place-items:center;padding:12px 0 0;min-height:150px}
.stage::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-3px;height:46%;background:var(--hill2);border-radius:50% 50% 0 0/100% 100% 0 0;z-index:0}
.critters{position:absolute;inset:0 auto 0 50%;width:min(100%,980px);transform:translateX(-50%);pointer-events:none;z-index:1}
.tree{position:absolute;bottom:-4px;fill:var(--tree);transform-origin:50% 100%;animation:boom 7s ease-in-out infinite}
.tree.t0{left:-1%;width:clamp(100px,22%,190px)}
.tree.t1{right:0;width:clamp(84px,18%,150px);animation-delay:-3s}
@keyframes boom{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.6deg)}}
.critter{position:absolute;bottom:6px;width:clamp(56px,11vw,100px);line-height:0;transform-origin:50% 100%;animation:sway 3.6s ease-in-out infinite}
.critter svg{width:100%;height:auto;overflow:visible}
.critter.c0{left:2%}.critter.c1{left:15%;animation-delay:-1.2s;animation-duration:4.2s}
.critter.c2{right:15%;animation-delay:-2.1s;animation-duration:3.9s}.critter.c3{right:2%;animation-delay:-.6s;animation-duration:4.5s}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.critters.cheer .critter{animation:hoera .45s ease-out 3}
@keyframes hoera{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-34%) scale(1.08) rotate(6deg)}}
@media (max-width:620px){.critter.c1,.critter.c2{display:none}.critter{width:clamp(50px,15vw,78px)}.critter.c0{left:0}.critter.c3{right:0}.tree.t0{left:-9%}.tree.t1{right:-7%}}
.qcard{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(92%,640px);border:3px solid var(--line);border-radius:30px 30px 30px 10px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--line);padding:14px 22px 18px;text-align:center}
.qcard .qt{margin:0;font:800 clamp(1.25rem,4.6vw,1.9rem)/1.2 var(--fd);text-wrap:balance}
.qcard .spk{position:absolute;right:-12px;bottom:-12px;width:46px;height:46px;border:3px solid var(--line);border-radius:50%;background:var(--bes);box-shadow:2px 2px 0 var(--line);display:grid;place-items:center;font-size:20px}
.qvis{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.qvis .one{width:clamp(96px,22vw,150px);height:clamp(96px,22vw,150px)}
.qvis .mini{width:clamp(54px,12vw,76px);height:clamp(54px,12vw,76px)}
.qvis .emo{font-size:clamp(84px,20vw,130px);line-height:1}
.seq{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.4vw,10px);flex-wrap:nowrap}
.seq .it{width:clamp(34px,8.6vw,62px);height:clamp(34px,8.6vw,62px);flex:none}
.seq .qm{display:grid;place-items:center;border:3px dashed var(--line);border-radius:14px;font:900 clamp(1.2rem,4vw,1.8rem) var(--fd);background:var(--soft)}
.field{display:grid;gap:clamp(6px,1.6vw,12px);padding:4px}
.field .cell{width:clamp(40px,10vw,66px);height:clamp(40px,10vw,66px)}
.ground{width:100%;height:22px;border-top:3px solid var(--line);background:var(--hill1);position:relative;z-index:1;margin-top:-3px}
.ground::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 16'%3E%3Cpath d='M8 16l4-14 3 12 4-16 3 16 4-10 3 12z' fill='%237BAF43'/%3E%3C/svg%3E") repeat-x left bottom/42px 13px}
.panel{flex:1 0 auto;width:100%;background:var(--soft);border-top:3px solid var(--line);padding:18px 14px 56px}
.opts{display:grid;gap:14px;max-width:720px;margin:0 auto;justify-content:center}
.opts.n3{grid-template-columns:repeat(3,minmax(0,180px))}
.opts.n4{grid-template-columns:repeat(4,minmax(0,160px))}
.opts.n5{grid-template-columns:repeat(5,minmax(0,132px))}
.opts.n6{grid-template-columns:repeat(6,minmax(0,112px))}
.opts.n8{grid-template-columns:repeat(4,minmax(0,124px))}
@media (max-width:620px){.opts.n4{grid-template-columns:repeat(2,minmax(0,150px))}.opts.n5,.opts.n6{grid-template-columns:repeat(3,minmax(0,110px))}}
.opt{aspect-ratio:1;border:3px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--line);padding:14%;display:grid;place-items:center;transition:transform .08s,box-shadow .08s}
.opt:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.opt.num{font:900 clamp(2.2rem,9vw,3.4rem)/1 var(--fd);padding:0}
.opt.good{background:color-mix(in srgb,var(--munt) 55%,var(--paper));animation:hop .45s}
.opt.bad{animation:shake .4s}
.opt.hintp{animation:beat .9s ease-in-out infinite}
@keyframes hop{40%{transform:translateY(-12px) scale(1.08)}}
@keyframes shake{20%{transform:translateX(-9px) rotate(-5deg)}50%{transform:translateX(9px) rotate(5deg)}80%{transform:translateX(-5px)}}
@keyframes beat{50%{transform:scale(1.1);background:color-mix(in srgb,var(--citroen) 60%,var(--paper))}}
.plus{position:absolute;left:50%;top:0;transform:translate(-50%,-60%);z-index:5;border:3px solid var(--line);border-radius:99px;background:var(--citroen);color:var(--btnink);box-shadow:3px 3px 0 var(--line);padding:.05em .7em;font:900 1.5rem var(--fd);white-space:nowrap;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:translate(-50%,-10%) scale(.3);opacity:0}}

/* memory */
.mem{display:grid;gap:clamp(8px,2vw,14px);max-width:640px;margin:0 auto;justify-content:center}
.mem{--ms:max(54px,min(130px,calc((100vh - 290px)/var(--rows) - 14px)))}
.mem.c3{grid-template-columns:repeat(3,minmax(0,var(--ms)))}
.mem.c4{grid-template-columns:repeat(4,minmax(0,var(--ms)))}
.mem.c5{grid-template-columns:repeat(5,minmax(0,var(--ms)))}
.mcard{aspect-ratio:1;border:3px solid var(--line);border-radius:18px;background:var(--mandarijn);box-shadow:4px 4px 0 var(--line);padding:12%;display:grid;place-items:center;font-size:clamp(1.8rem,7vw,2.6rem);transition:transform .15s}
.mcard .shape{display:none}
.mcard.up{background:var(--paper);transform:rotateY(180deg)}
.mcard.up .shape{display:block;transform:rotateY(180deg)}
.mcard.up .back{display:none}
.mcard.found{background:color-mix(in srgb,var(--munt) 50%,var(--paper));box-shadow:none;transform:rotateY(180deg) scale(.94)}
.moves{margin:0;font:800 1.2rem var(--fd)}

/* vormenboek */
.book{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;width:100%}
.bshape{display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--line);padding:14px 10px 12px;font:800 1.1rem/1.15 var(--fd)}
.bshape:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}
.bshape .shape{width:84px;height:84px}
.bshape small{font:400 1.3rem/1 var(--fb)}
.bshape.seen{background:color-mix(in srgb,var(--citroen) 22%,var(--paper))}

/* klaar */
.done h1{margin:0;font:900 clamp(2.4rem,9vw,4rem)/1.05 var(--fd);letter-spacing:-.02em;text-align:center}
.won{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.won .stars{font:900 2.2rem var(--fd)}
.up{margin:0;border:3px solid var(--line);border-radius:14px;background:var(--munt);color:var(--btnink);box-shadow:3px 3px 0 var(--line);padding:.35em .8em;transform:rotate(-1deg);font:800 1.1rem/1.3 var(--fd)}
.newt{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;list-style:none;margin:0;padding:0}
.newt li{display:flex;flex-direction:column;align-items:center;gap:2px;width:120px;font:800 1rem/1.2 var(--fd);animation:pop2 .6s cubic-bezier(.3,1.6,.5,1) both}
.newt li span{font-size:54px;line-height:1.1}
@keyframes pop2{from{transform:scale(.2);opacity:0}}
.confetti{position:fixed;top:-30px;z-index:5;width:16px;height:16px;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

/* prijzenkast */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;width:100%;list-style:none;margin:0;padding:0 7px 7px 0}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-height:150px;border:3px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--line);padding:14px 10px;text-align:center;font:800 1.02rem/1.2 var(--fd);width:100%}
.badge .ic{font-size:3rem;line-height:1.1}
.badge.locked{box-shadow:none;border-style:dashed;opacity:.72;color:var(--muted);font:400 .95rem/1.25 var(--fb)}
.badge.locked .ic{filter:grayscale(1);opacity:.4}

/* ouders en vensters */
.parents{align-items:stretch}
.parents h1{margin:0;font:900 clamp(2rem,7vw,3rem)/1.05 var(--fd);letter-spacing:-.02em}
.parents h2{margin:0 0 8px;font:800 1.4rem var(--fd)}
.parents p{margin:0 0 10px}
.prow{display:flex;flex-direction:column;gap:12px}
.phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:800 1.3rem var(--fd)}
.phead .avc{width:52px;height:52px}.phead .avc svg{width:42px;height:42px}
.phead .pst{margin-left:auto;font:400 1rem var(--fb)}
.pfields{display:flex;gap:12px;flex-wrap:wrap}
.pfields label{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;font:700 .95rem var(--fd)}
select,.gate input{width:100%;min-height:48px;border:3px solid var(--line);border-radius:14px;background:var(--empty);color:var(--ink);font:400 1.05rem var(--fb);padding:.4em .6em}
.pbtns{display:flex;gap:10px;flex-wrap:wrap}
.gl{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gl li{border:2.5px solid var(--line);border-radius:14px;background:var(--empty);padding:6px 10px;font-size:.92rem;line-height:1.25}
.gl b{display:block;font:800 1rem var(--fd)}
details{border-top:2px solid var(--edge);padding:10px 0}
summary{font:800 1.08rem var(--fd);cursor:pointer}
.veil{position:fixed;inset:0;z-index:20;background:rgba(20,14,8,.55);display:grid;place-items:start center;padding:20px;overflow:auto}
.veil>.card{margin:auto 0}
.dialog{max-width:440px;text-align:center}
.dialog h2{margin:0 0 6px;font:900 1.6rem var(--fd)}
.dialog .row{margin-top:16px}
.dialog .btn{font-size:1.15rem;min-height:54px}
.gate input{font-size:1.5rem;text-align:center;max-width:160px;margin:10px auto 0;display:block}

@media (prefers-reduced-motion:reduce){.tree,.critter,.critters.cheer .critter,.opt.hintp{animation:none}.confetti{display:none}.mcard{transition:none}}

/* ---------- uitleg onder het spel en losse pagina's ---------- */
.morelink{display:inline-block;background:var(--paper);color:var(--ink);border:3px solid var(--line);border-radius:99px;padding:.4em 1.1em;font:800 1rem var(--fd);text-decoration:none;box-shadow:3px 3px 0 var(--line)}
.info{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:8px 16px 40px;display:grid;gap:18px;scroll-margin-top:16px}
body[data-screen]:not([data-screen="station"]) .info,body[data-screen]:not([data-screen="station"]) .foot{display:none}
.info h2,.page h2{margin:0 0 10px;font:900 clamp(1.3rem,4vw,1.7rem)/1.2 var(--fd);text-wrap:balance}
.info h3,.page h3{margin:16px 0 4px;font:800 1.15rem/1.25 var(--fd)}
.info p,.page p{margin:0 0 10px;max-width:68ch}
.info ul,.info ol,.page ul,.page ol{margin:0 0 10px;padding-left:1.3em;max-width:68ch}
.info li,.page li{margin-bottom:6px}
.info a,.page a,.foot a{color:inherit;font-weight:700}
.info .howto{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:none}
.howto li{background:var(--empty);border:3px solid var(--line);border-radius:18px;box-shadow:3px 3px 0 var(--line);padding:14px;margin:0}
.howto .big-emo{font-size:40px;line-height:1.1;display:block}
.howto b{display:block;font:800 1.15rem var(--fd);margin:4px 0}
.info .glist{list-style:none;padding:0;max-width:none;display:grid;gap:0}
.glist li{display:grid;grid-template-columns:11em 1fr;gap:10px;margin:0;padding:8px 0;border-top:2px solid var(--edge)}
.glist b{font:800 1.05rem var(--fd)}
@media (max-width:560px){.glist li{grid-template-columns:1fr;gap:0}}
.foot{position:relative;z-index:1;text-align:center;padding:0 16px 40px;font-size:.95rem}
.foot nav{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;background:var(--paper);border:3px solid var(--line);border-radius:16px;padding:10px 18px;box-shadow:4px 4px 0 var(--line)}
.ptop{position:relative;z-index:2;background:var(--paper);border-bottom:3px solid var(--line);padding:10px clamp(12px,3vw,28px)}
.psav{line-height:0;width:min(100%,1080px);margin:0 auto;overflow:hidden}
.psav>svg{width:100%;height:auto;display:block}
.page{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:6px 16px 40px;display:grid;gap:18px}
.page h1{margin:0;font:900 clamp(1.7rem,6vw,2.5rem)/1.15 var(--fd);letter-spacing:-.02em;text-align:center;text-wrap:balance}
.page .cta{display:flex;justify-content:center}
.page .btn{text-decoration:none}
.muted{color:var(--muted)}
.shapes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;max-width:none}
.shapes li{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;font:800 1rem var(--fd);text-align:center}
.shapes .shape{width:64px;height:64px}
.lvrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.lvrow .lvlbl{font:800 1.05rem var(--fd);margin-right:2px}
.lvrow .pick{min-width:48px;height:48px;font-size:1.05rem;padding:0 12px}
.lead.lvinfo{font-size:1rem;margin-top:-8px;max-width:56ch}
.homerow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.homerow .pillbtn b{display:inline-block;min-width:1.6em;margin-left:4px;padding:0 6px;border-radius:99px;background:var(--line);color:#FFF4E2;font-weight:800}
.bar .logo.mid{font-size:clamp(1rem,4vw,1.3rem)}
.bar .logo.mid svg{width:32px;height:32px}
@media (max-width:420px){.bar .logo.mid svg{display:none}}

/* ================= spelmotor: extra onderdelen ================= */
.homerow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.homerow .pillbtn b{display:inline-block;min-width:1.6em;margin-left:4px;padding:0 6px;border-radius:99px;background:var(--line);color:#FFF4E2;font-weight:800}
.bar .logo.mid{font-size:clamp(1rem,4vw,1.3rem)}
.bar .logo.mid svg{width:32px;height:32px}
@media (max-width:420px){.bar .logo.mid svg{display:none}}
.lvrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.lvrow .lvlbl{font:800 1.05rem var(--fd);margin-right:2px}
.lvrow .pick{min-width:48px;height:48px;font-size:1.05rem;padding:0 12px}
.lvinfo{font-size:1rem;margin-top:-8px;max-width:56ch}
.gtile .art{overflow:hidden}
.gtile .art>svg{height:86px;width:auto;flex:none}
.gtile .art .emo{font-size:56px;line-height:1}
.gtile .art .emo.sm{font-size:50px}
.qt b{background:var(--citroen);color:var(--btnink);border-radius:8px;padding:0 .25em;white-space:nowrap}
.qvis .emo.sm{font-size:clamp(54px,12vw,80px)}
.qvis .one{display:block}
#work{max-width:760px;margin:0 auto}
.opts.wide{grid-template-columns:repeat(2,minmax(0,320px))}
.opt.txt{aspect-ratio:auto;min-height:68px;padding:10px 12px;font:800 clamp(1.05rem,3.6vw,1.35rem)/1.2 var(--fd);text-wrap:balance}
.opt.num{font-size:clamp(1.6rem,6.4vw,2.6rem);aspect-ratio:auto;min-height:84px;padding:6px}
.opt svg{max-width:100%;max-height:100%}
@media (max-width:620px){.opts.wide{grid-template-columns:1fr 1fr}.opts.n4:not(.wide){grid-template-columns:repeat(2,minmax(0,170px))}}
@media (max-width:400px){.opts.wide{grid-template-columns:1fr}}
.opts.n2{grid-template-columns:repeat(2,minmax(0,240px))}
/* invoer */
.inwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.inrow{display:flex;align-items:center;gap:10px;font:900 2rem var(--fd)}
.inslot{min-width:150px;min-height:64px;padding:4px 16px;border:3px solid var(--line);border-radius:16px;background:var(--empty);box-shadow:inset 0 -5px 0 var(--soft);display:grid;place-items:center;font:900 2.2rem var(--fd)}
.inslot.good{background:color-mix(in srgb,var(--munt) 55%,var(--paper))}
.inslot.bad{animation:shake .4s}
.inhint{margin:0;min-height:1.5em;font-weight:700;text-align:center}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,84px));gap:10px;justify-content:center}
.keypad button{min-height:58px;border:3px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--line);font:900 1.6rem var(--fd)}
.keypad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.keypad .ok{grid-column:1/-1;background:var(--munt);color:var(--btnink);font-size:1.3rem}
/* memory met willekeurige inhoud */
.mcard{padding:8%}
.mcard .face{display:none;width:100%;height:100%;place-items:center;line-height:1.1}
.mcard.up .face{display:grid;transform:rotateY(180deg)}
.mcard .face svg{max-width:100%;max-height:100%}
.mtxt{font:800 clamp(.7rem,2.6vw,1.05rem)/1.1 var(--fd);text-align:center;text-wrap:balance}
.mnum{font:900 clamp(1.3rem,5.6vw,2.4rem)/1 var(--fd)}
.memo{font-size:clamp(1.5rem,6vw,2.6rem);line-height:1.05;text-align:center}
.confetti{border:2px solid var(--line)}
/* ---------- klok ---------- */
.klok{width:100%;height:100%;display:block}
.qvis .one .klok{width:clamp(130px,30vw,190px);height:auto}
.digi{display:inline-block;border:3px solid var(--line);border-radius:14px;background:#24180F;color:#7CF29A;box-shadow:4px 4px 0 var(--line);padding:.1em .45em;font:900 clamp(2.2rem,9vw,3.4rem)/1.15 var(--fd);letter-spacing:.04em}
.digi.sm{font-size:clamp(1rem,3.6vw,1.5rem);box-shadow:2px 2px 0 var(--line);border-radius:10px}
.zetwrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px}
.zk{width:clamp(170px,44vw,230px)}
.zk.bad{animation:shake .4s}
.zetknop{display:flex;flex-direction:column;gap:10px}
.zetknop div{display:flex;align-items:center;gap:8px}
.zetknop span{min-width:5.6em;font:800 1.05rem var(--fd);text-align:right}
.zetknop button,.stepbtn{width:58px;height:54px;border:3px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--line);font:900 1.7rem/1 var(--fd)}
.zetknop button:active,.stepbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.opts.bigopts{display:flex;flex-wrap:wrap;justify-content:center}
.opt.big{aspect-ratio:auto;min-width:130px;min-height:110px;padding:10px 12px}
.pickdlg{max-width:520px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;margin-top:10px}
.pickgrid .pick{width:100%;min-width:0}
.qvis span.one{display:block;width:auto;height:auto;line-height:0}
/* plaatjes op de speltegels blijven op één regel binnen de tegel */
.gtile .art{container-type:inline-size}
.gtile .art .emo{white-space:nowrap}
.gtile .art .emo.sm{font-size:min(50px,15cqw)}
.gtile .art .qm.s{font-size:min(1.6rem,9.5cqw);white-space:nowrap}
.qt b{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* kopjes boven groepen spellen, het letterbord en tekstinvoer */
.gkop{width:100%;margin:10px 0 -6px;font:900 clamp(1.3rem,5vw,1.7rem) var(--fd);text-align:left;display:flex;align-items:center;gap:10px}
.gkop::after{content:"";flex:1;border-top:3px solid var(--line)}
.inslot.tekst{min-width:min(86vw,320px);font-family:var(--fl,var(--fd));letter-spacing:.04em;font-size:clamp(1.5rem,6.4vw,2.1rem)}
.letterbord{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}
.letterbord>div{display:flex;gap:5px;justify-content:center;width:100%}
.letterbord button{flex:0 1 46px;min-width:0;height:52px;border:3px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--line);font:800 1.35rem var(--fl,var(--fd));padding:0}
.letterbord button:active{transform:translate(2px,2px);box-shadow:none}
.letterbord .spatie{flex:0 1 150px;font-size:1rem}
.letterbord .ok{flex:0 1 300px;background:var(--munt);color:var(--btnink);font:900 1.2rem var(--fd)}
@media (max-width:420px){.letterbord>div{gap:3px}.letterbord button{height:48px;border-width:2px;font-size:1.15rem}}
/* ---------- dagtocht ---------- */
.qlabel{margin:0 0 4px;font:800 .8rem var(--fd);color:var(--muted);text-align:center;letter-spacing:.02em}
.tochtkaart{max-width:620px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.tochtkaart h2{margin:0}.tochtkaart p{margin:0}
.tochtlijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;counter-reset:t}
.tochtlijst li{counter-increment:t;border:3px solid var(--line);border-radius:99px;background:var(--c,var(--paper));color:var(--btnink);padding:2px 12px;font:800 .95rem var(--fd)}
.tochtlijst li::before{content:counter(t) ". "}
.tochtreeks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tochtkaart .btn:disabled{opacity:.6}
.prog.veel{gap:2px;max-width:420px}
.prog.veel i{height:12px;border-width:2px;border-radius:5px;min-width:0}
.prog{min-width:0}.prog.veel{gap:1px;margin:0 4px}.prog.veel i{border-width:1.5px;flex:1 1 0}
/* ---------- tekst blijft binnen zijn vak ---------- */
.opt.txt{min-width:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.opt.num{min-width:0;overflow-wrap:anywhere}
.qt{overflow-wrap:break-word}
.gtile .art .qm.s{white-space:normal;text-align:center;line-height:1.15;font-size:min(1.35rem,8cqw);overflow-wrap:anywhere;max-width:100%}
.gtile .art{text-align:center}
.tikzin button,.tvolg button{max-width:100%;overflow-wrap:anywhere}
.mtxt{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:360px){.opts.wide{grid-template-columns:1fr}.opt.txt{font-size:1.05rem}}
.gtile .art .qm.s{min-width:0;flex:0 1 auto}
.gtile .art>*{max-width:100%}
.qt,.qt b{overflow-wrap:anywhere}
.qcard{box-sizing:border-box;min-width:0}
.screen .gtile .art span.qm.s{white-space:normal;text-align:center;line-height:1.15;font-size:min(1.3rem,7.6cqw);overflow-wrap:anywhere;min-width:0;flex:0 1 auto;max-width:100%}
/* plaatjes op een speltegel passen altijd naast elkaar */
.screen .gtile .art>svg{max-width:44cqw;min-width:0}
.screen .gtile .art:has(>svg:nth-of-type(3))>svg{max-width:29cqw}
.screen .gtile .art .kv{height:auto;width:min(66px,26cqw)}
.screen .gtile .art .kv.klein{width:min(42px,17cqw)}
.screen .gtile .art .kv.groot{width:min(84px,33cqw)}
.screen .gtile .art .meng .kv{width:min(48px,19cqw)}
.screen .gtile .art .meng{max-width:100%}
.screen .gtile .art .emo{font-size:min(56px,24cqw)}
.screen .gtile .art .emo.sm{font-size:min(50px,15cqw)}
.screen .gtile .art .rij span{min-width:0;width:min(46px,19cqw);height:min(46px,19cqw);font-size:min(1.4rem,8cqw);padding:0}
.screen .gtile .art .digi{font-size:min(2.4rem,13cqw)}
.screen .gtile .art .digi.sm{font-size:min(1.3rem,7cqw)}
.screen .gtile .art .br{font-size:min(1.5rem,9cqw)}
.screen .gtile .art .huis{min-width:0;font-size:min(1.6rem,10cqw)}
.screen .gtile .art .prijs{font-size:min(1.05rem,6.5cqw)}
.gtile .art{--ah:92px}
@media (max-width:480px){.gtile .art{--ah:72px}}
.screen .gtile .art svg{max-height:var(--ah);height:auto;width:auto}
.screen .gtile .art>svg.klok,.screen .gtile .art>svg.dobbel,.screen .gtile .art>svg.kompas,.screen .gtile .art>svg.pz,.screen .gtile .art>svg.btaart,.screen .gtile .art>svg.ptaart{aspect-ratio:1;height:min(var(--ah),40cqw);width:auto}
.screen .gtile .art>svg.vlag{height:min(var(--ah),38cqw);width:auto;aspect-ratio:3/2}
.screen .gtile .art .grij{font-size:min(30px,10cqw)}
.screen .gtile .art .qm{font-size:min(3rem,22cqw)}
.screen .gtile .art .som,.screen .gtile .art .tsom{font-size:min(1.8rem,11cqw)}
.screen .gtile .art .somart svg{max-width:80cqw}
.gtile .art{gap:min(6px,2cqw)}
.screen .gtile .art:has(>svg.klok~svg.klok)>svg.klok{height:min(var(--ah),31cqw)}
.screen .gtile .art:has(>svg) .qm{font-size:min(2rem,11cqw)}
.screen .gtile .art>svg.munt{height:auto;width:min(46px,20cqw);max-width:none}
.screen .gtile .art:has(>svg.munt:nth-of-type(3))>svg.munt{width:min(40px,17cqw)}
.screen .gtile .art:has(>:nth-child(4))>svg{max-width:19cqw}
.screen .gtile .art:has(>:nth-child(5))>svg{max-width:15cqw}
.screen .gtile .art>span.tpaw{font-size:min(44px,16cqw);line-height:1}
.screen .gtile .art>span.tpizza{font-size:min(52px,22cqw);line-height:1}
.screen .gtile .art:has(>span.tpaw)>svg{max-width:34cqw}
.screen .gtile .art:has(>:nth-child(4))>.qm{font-size:min(2rem,10cqw)}
.screen .gtile .art .wletters i{min-width:0;width:min(1.7em,10cqw);font-size:min(1.1rem,6.5cqw)}
.screen .gtile .art:has(>:nth-child(4))>svg{max-width:16cqw}.screen .gtile .art:has(>:nth-child(4))>.qm{font-size:min(1.8rem,9cqw)}
/* leesbaar houden: liever twee regels dan piepkleine tekst */
.screen .gtile .art span.qm.s{font-size:min(1.35rem,10.5cqw);line-height:1.1}
.screen .gtile .art .emo.sm{font-size:min(50px,19cqw);white-space:normal;line-height:1.05;text-align:center}
.screen .gtile .art .emo{white-space:normal;text-align:center;line-height:1.05}

/* ---------- breuken ---------- */
.br{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font:900 clamp(1.5rem,6vw,2.3rem)/1.05 var(--fd);margin:0 .12em}
.br i{font-style:normal;padding:0 .22em;min-width:1.1em;text-align:center}
.br i+i{border-top:.11em solid currentColor}
.br i.q{background:var(--citroen);color:var(--btnink);border-radius:8px}
.heel{font:900 clamp(1.8rem,7vw,2.8rem)/1 var(--fd);vertical-align:middle}
.opt .br,.opt .heel{font-size:clamp(1.3rem,5vw,1.9rem)}
.opt.txt .br{margin:0 .1em}
.gtile .art .br{font-size:1.5rem}
.mcard .br{font-size:clamp(1rem,4.6vw,1.8rem)}
.btaart{display:block;flex:none;width:clamp(84px,22vw,124px);height:auto}
.bstrook{display:block;flex:none;width:min(62vw,260px);height:auto}
.opt .bstrook{width:100%;max-width:170px}
.opt.bropt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:clamp(120px,30vw,180px);min-height:96px}
.gtile .art .btaart{width:auto;height:78px}
.gtile .art .bstrook{width:auto;height:34px}
.mcard .btaart,.mcard .bstrook{width:100%}
.blijn{display:block;flex:none;width:min(80vw,520px);height:auto}
.blijn text{font-family:Grandstander,sans-serif;font-weight:800;fill:var(--ink)}
.kleurwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.kleurstrook{display:flex;border:3px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:4px 4px 0 var(--line)}
.kleurstrook.bad{animation:shake .4s}
.kleurstrook button{width:clamp(26px,7.4vw,54px);height:clamp(60px,16vw,86px);border:0;border-right:3px solid var(--line);background:var(--paper);padding:0}
.kleurstrook button:last-child{border-right:0}
.kleurstrook button.aan{background:var(--bes)}
.lab{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:620px;margin:0 auto}
.labrij{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,30px)}
.labknop{display:flex;flex-direction:column;align-items:center;gap:6px;font:800 1rem var(--fd)}
.labbreuk .br{font-size:clamp(2.6rem,12vw,4rem)}
.labvis{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.labfeit{list-style:none;margin:0;padding:14px 18px;border:3px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:4px 4px 0 var(--line);font-size:1.1rem;line-height:1.9;width:100%}
.labfeit .br{font-size:1.2rem}.labfeit .heel{font-size:1.4rem}

/* ---------- geheugen ---------- */
.kijk{display:flex;flex-direction:column;align-items:center;gap:14px}
.kijk .opts{width:100%}
.kijktoon{display:flex;justify-content:center;min-height:70px;align-items:center}
.grij{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:clamp(34px,9vw,54px);line-height:1}
.grij i,.gveld i{font-style:normal;display:inline-block}
.grij>i{width:1.4em;height:1.4em;display:grid;place-items:center;border:3px solid var(--line);border-radius:16px;background:var(--paper)}
.gtile .art .grij{font-size:30px;gap:4px}
.gtile .art .grij>i{border-width:2px;border-radius:10px}
.gveld{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;max-width:420px;font-size:clamp(32px,8.4vw,48px);line-height:1.1;border:3px solid var(--line);border-radius:20px;background:var(--paper);padding:12px}
.groost{display:grid;grid-template-columns:repeat(var(--n),clamp(58px,17vw,84px));gap:6px}
.groost.klein{grid-template-columns:repeat(var(--n),clamp(44px,13vw,66px))}
.groost.bad{animation:shake .4s}
.groost i,.groost .vak{aspect-ratio:1;border:3px solid var(--line);border-radius:14px;background:var(--paper);display:grid;place-items:center;font-style:normal;font-size:clamp(28px,8vw,44px);line-height:1;padding:0;color:inherit}
.groost i.aan,.groost .vak.aan{background:var(--bes)}
.groost .vak{box-shadow:3px 3px 0 var(--line)}
.groost .vak.good{background:color-mix(in srgb,var(--munt) 55%,var(--paper))}
.groost .vak.bad{animation:shake .4s}
.groost .vak.hintp{background:var(--citroen)}
.gvraag{font-size:clamp(40px,10vw,60px);line-height:1}
.simon{display:grid;grid-template-columns:repeat(2,clamp(100px,30vw,150px));gap:14px;justify-content:center}
.simon button{aspect-ratio:1;border:3px solid var(--line);border-radius:28px;background:var(--c);box-shadow:5px 5px 0 var(--line);opacity:.55;transition:opacity .1s,transform .1s}
.simon button:not(:disabled){opacity:.8}
.simon button.licht{opacity:1;transform:scale(1.06);box-shadow:0 0 0 6px var(--citroen),5px 5px 0 var(--line)}
.simon button.bad{animation:shake .4s}
.simon button.hintp{box-shadow:0 0 0 6px var(--citroen),5px 5px 0 var(--line)}
.gcijfer{font:900 clamp(2rem,9vw,3.4rem)/1.2 var(--fd);letter-spacing:.06em;border:3px solid var(--line);border-radius:18px;background:var(--paper);padding:.1em .5em;white-space:nowrap}
.gwoorden{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px}
.gwoorden i{font:800 clamp(1.2rem,5vw,1.7rem)/1.3 var(--fd);font-style:normal;border:3px solid var(--line);border-radius:14px;background:var(--paper);padding:.1em .6em}
.gparen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gparen i{font-style:normal;display:flex;align-items:center;gap:6px;font-size:clamp(30px,8vw,44px);line-height:1;border:3px solid var(--line);border-radius:16px;background:var(--paper);padding:6px 12px}
.gparen b{font:900 clamp(1.1rem,4.4vw,1.5rem) var(--fd)}
.gkleur{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border:3px solid var(--line);border-radius:16px;background:var(--c);font-size:clamp(34px,9vw,50px);line-height:1}
.gkleur.leeg{font-size:clamp(28px,7vw,40px)}
.gtile .art .gkleur{font-size:40px}
.gverhaal{display:block;max-width:560px;font:700 clamp(1.1rem,4.4vw,1.4rem)/1.5 var(--fb);border:3px solid var(--line);border-radius:18px;background:var(--paper);padding:12px 16px;text-align:left}
.opt.emotxt{font-size:clamp(1.3rem,5vw,1.9rem)}
.kijk .tijdbalk{max-width:320px}

/* ---------- geld ---------- */
.geld{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;max-width:520px}
.munt{flex:none;display:block;height:auto}
.opt .geld{gap:3px 4px}
.prijs{display:inline-block;border:3px solid var(--line);border-radius:12px 12px 12px 2px;background:var(--citroen);color:var(--btnink);box-shadow:3px 3px 0 var(--line);padding:0 .5em;font:900 clamp(1.3rem,5vw,1.9rem)/1.4 var(--fd);transform:rotate(-3deg)}
.prijs.sm{font-size:1.05rem;box-shadow:2px 2px 0 var(--line)}
.koop{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap}
.koop .ding{display:flex;flex-direction:column;align-items:center;gap:2px}
.koop .ding .emo{font-size:clamp(44px,11vw,70px)}
.kassa{display:flex;flex-direction:column;align-items:center;gap:12px}
.hand{min-height:92px;width:100%;max-width:560px;border:3px dashed var(--line);border-radius:22px;background:var(--paper);padding:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.hand:empty::before{content:"Tik hieronder op het geld waarmee je betaalt";color:var(--muted);font-size:1rem;text-align:center}
.hand.bad{animation:shake .4s}
.hand button,.lade button{border:0;background:none;padding:0;line-height:0;border-radius:50%}
.lade{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:center;max-width:600px}
.lade button:active{transform:scale(.92)}
.kassa .tot{font:800 1.1rem var(--fd)}
.gtile .art>svg.munt{height:58px}

/* ---------- grafieken ---------- */
.graf{display:block;flex:none;width:min(78vw,430px);height:auto}
.graf.klein{width:min(60vw,250px)}
.graf text{font-family:Grandstander,sans-serif;font-weight:800;fill:var(--ink)}
.turf{display:block;flex:none;height:34px;max-width:100%}
.gtile .art .turf{height:44px;width:auto!important}
.mcard .turf{width:100%!important;height:auto}
.beeld table{border-collapse:collapse;margin:0 auto}
.beeld th{font:800 1rem var(--fd);text-align:right;padding:2px 10px 2px 0;border-right:3px solid var(--line)}
.beeld td{text-align:left;padding:2px 0 2px 8px;font-size:clamp(20px,5.4vw,30px);line-height:1.15;white-space:nowrap}
.beeld i{font-style:normal;display:inline-block}
.beeld i.half{width:.62em;overflow:hidden;vertical-align:bottom}
.beeld p{margin:6px 0 0;font-size:.95rem;text-align:center}
.gtab{border-collapse:collapse;font:800 clamp(1rem,3.8vw,1.3rem) var(--fd);margin:0 auto}
.gtab th,.gtab td{border:2.5px solid var(--line);padding:3px 12px;background:var(--paper);text-align:center}
.gtab th{background:var(--soft)}
.gtab.turftab th{text-align:left;font-size:1rem;white-space:nowrap}
.gtab.turftab td{text-align:left}
.bouw{display:flex;flex-direction:column;align-items:center;gap:10px}
.bouwg.bad{animation:shake .4s}
.bouwk{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center}
.bouwk span{display:flex;align-items:center;gap:6px;font-size:26px}
.bouwk .stepbtn{width:50px;height:46px;font-size:1.5rem}

/* ---------- kaart ---------- */
.kaart{display:block;flex:none;height:auto;border:3px solid var(--line);border-radius:18px;background:#BFE3F5;touch-action:manipulation}
.kaart.nl{width:min(92vw,470px)}
.kaart.eu{width:min(96vw,640px)}
.kaart.wd{width:min(96vw,700px)}
.qvis .kaart.nl{width:min(62vw,300px)}
.qvis .kaart.eu{width:min(80vw,400px)}
.qvis .kaart.wd{width:min(84vw,520px)}
.kaart .buur{fill:#E9E2CF;stroke:#B9AE93;stroke-width:1}
.kaart .land{stroke:#2A1E14;stroke-width:1.6;stroke-linejoin:round}
.kaart.eu .land{stroke-width:1}
.kaart [data-id]{cursor:pointer}
.kaart .hi{fill:#E5484D!important;stroke-width:3}
.kaart .okk{fill:#2FA866!important}
.kaart .mis{animation:kflash .5s}
.kaart .wijs{animation:kpuls .8s ease-in-out infinite}
@keyframes kflash{50%{fill:#E5484D}}
@keyframes kpuls{50%{fill:#FFC93C}}
.kaart .stip{fill:#FFFCF4;stroke:#2A1E14;stroke-width:2.5}
.kaart .stip.hi,.kaart .merk.hi{fill:#E5484D}
.kaart .merk{fill:#6FC2F0;stroke:#2A1E14;stroke-width:2.5}
.kaart .raak{fill:transparent;stroke:none}
.kaart text{font-family:Grandstander,sans-serif;font-weight:800;fill:#2A1E14;pointer-events:none;paint-order:stroke;stroke:#FFFCF4;stroke-width:3px}
.kaartwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.kaartmsg{margin:0;min-height:1.5em;font:800 1.05rem var(--fd);text-align:center}
.vlag{display:block;width:clamp(150px,40vw,230px);height:auto;border:3px solid var(--line);border-radius:6px;box-shadow:4px 4px 0 var(--line)}
.kompas{width:clamp(150px,38vw,210px);height:auto}
@media (prefers-reduced-motion:reduce){.kaart .wijs{animation:none;fill:#FFC93C!important}}
.kaart .meer{fill:#BFE3F5;stroke:#5AA7D6;stroke-width:1}
.kaart .dijk{fill:none;stroke:#2A1E14;stroke-width:2.2;stroke-linecap:round}
.kaart .riv,.kaart .rivrest{fill:none!important;stroke:#2F86CF;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.kaart .rivrest,.kaart .riv.dun{stroke-width:1.8;stroke:#5AA7D6}
.kaart .raaklijn{fill:none;stroke:transparent;stroke-width:26;stroke-linecap:round}
.kaart .riv.hi{stroke:#E5484D;stroke-width:6.5}
.kaart .riv.okk{stroke:#2FA866;stroke-width:6.5}
.kaart .riv.mis{animation:kflashs .5s}
.kaart .riv.wijs{animation:kpulss .8s ease-in-out infinite}
@keyframes kflashs{50%{stroke:#E5484D;stroke-width:6}}
@keyframes kpulss{50%{stroke:#FFC93C;stroke-width:7}}

/* ---------- kleuren ---------- */
.kv{display:block;flex:none;width:clamp(54px,14vw,78px);height:auto}
.kv.klein{width:clamp(34px,9vw,50px)}
.kv.groot{width:clamp(84px,22vw,120px)}
.opt .kv{width:100%}
.opt .kv.klein{width:56%}
.opt.big .kv.groot{width:clamp(84px,20vw,110px)}
.opt.big .kv.klein{width:clamp(40px,10vw,54px)}
.gtile .art .kv{width:auto;height:66px}
.gtile .art .kv.klein{height:42px}
.gtile .art .kv.groot{height:84px}
.mcard .kv{width:100%}
.krij{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:520px}
.mq{flex:none;width:clamp(40px,10vw,56px);aspect-ratio:1;border:3px dashed var(--line);border-radius:14px;background:var(--citroen);color:var(--btnink);display:grid;place-items:center;font:900 1.5rem var(--fd)}
.meng{display:inline-flex;align-items:center;gap:6px}
.meng b{font:900 1.8rem var(--fd)}
.gtile .art .meng .kv{height:52px}
.gtile .art .meng b{font-size:1.2rem}
.gtile .art .mq{width:40px}
.kveld{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:560px;margin:0 auto}
.kveld[hidden]{display:none}
.kveld button{border:3px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:4px 4px 0 var(--line);padding:8px;line-height:0}
.kveld button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.kveld button.weg{background:color-mix(in srgb,var(--munt) 55%,var(--paper));box-shadow:none;transform:scale(.88)}
.kveld button.bad{animation:shake .4s}
.boog{display:block;flex:none;width:min(64vw,300px);height:auto}
.gtile .art .boog{width:auto;height:78px}

/* ---------- kommagetallen ---------- */
.tapnums.breed button{width:auto;min-width:clamp(84px,24vw,120px);aspect-ratio:auto;height:clamp(60px,15vw,80px);padding:0 14px;font-size:clamp(1.3rem,5.4vw,2rem)}
.rij.klein span{min-width:clamp(46px,13vw,74px);font-size:clamp(.95rem,3.6vw,1.4rem)}
.tsom u{text-decoration:none;background:var(--citroen);color:var(--btnink);border-radius:8px;padding:0 .12em}
.qm.s u{text-decoration:underline}

/* ---------- meten ---------- */
.meetsvg{display:block;flex:none;width:min(76vw,560px);height:auto}
.meetsvg.smal{width:min(46vw,190px)}
.meetsvg.mid{width:min(62vw,280px)}
.meetsvg text{font-family:Grandstander,sans-serif;font-weight:800;fill:var(--ink)}
.maat{font:900 clamp(1.5rem,6vw,2.3rem) var(--fd)}

/* ---------- procenten ---------- */
.pveld{display:block;flex:none;height:auto}
.gtile .art .pveld{width:auto!important;height:74px}
.ptaart{display:block;flex:none;width:clamp(130px,32vw,190px);height:auto}
.gtile .art .ptaart{width:auto;height:84px}
.pstrook{display:block;flex:none;width:min(80vw,520px);height:auto}
.pstrook text{font-family:Grandstander,sans-serif;font-weight:800;fill:var(--ink)}
.vtab{border-collapse:collapse;font:800 clamp(1.1rem,4.4vw,1.5rem) var(--fd)}
.vtab th,.vtab td{border:3px solid var(--line);padding:4px 14px;background:var(--paper)}
.vtab th{background:var(--soft);text-align:left;font-size:.8em}
.vtab td.q{background:var(--citroen);color:var(--btnink)}
.tsom{text-wrap:balance;white-space:normal}

/* ---------- puzzel ---------- */
.pz{display:block;flex:none;width:clamp(110px,28vw,170px);height:auto}
.opt .pz{width:100%}
.pz.breed{width:min(78vw,430px)}
.pz.groot{width:min(60vw,250px)}
.schaduw{filter:brightness(0);display:inline-block}
:root[data-theme="dark"] .schaduw{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .schaduw{filter:brightness(0) invert(1)}}
.reeks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:clamp(30px,8vw,50px);line-height:1.1}
.reeks .q{width:1.25em;height:1.25em;border:3px dashed var(--line);border-radius:12px;background:var(--citroen);color:var(--btnink);display:grid;place-items:center;font:900 .6em var(--fd)}
.raadsel{display:flex;flex-direction:column;gap:4px;font:900 clamp(1.3rem,5.4vw,2rem)/1.3 var(--fd);text-align:center}
.zinnen{margin:0;padding:0;list-style:none;font:700 clamp(1.05rem,4vw,1.35rem)/1.5 var(--fb);text-align:left}
.zinnen li::before{content:"🐾 "}
.onthoud{display:flex;flex-direction:column;align-items:center;gap:14px}
.onthoud .toon{min-height:74px;display:flex;gap:8px;align-items:center;justify-content:center;font-size:clamp(38px,10vw,58px);line-height:1}
.onthoud .toon i{font-style:normal;width:1.3em;height:1.3em;display:grid;place-items:center;border:3px solid var(--line);border-radius:16px;background:var(--paper)}
.onthoud .toon i.leeg{border-style:dashed;font:900 .5em var(--fd);color:var(--muted)}
.onthoud .knop{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.onthoud .knop button{width:clamp(58px,15vw,80px);aspect-ratio:1;border:3px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:3px 3px 0 var(--line);font-size:clamp(30px,8vw,44px);line-height:1}
.onthoud .knop button:disabled{opacity:.4}
.onthoud .knop button.bad{animation:shake .4s}

/* ---------- schatten ---------- */
.wolk{display:block;flex:none;width:min(74vw,330px);height:auto;border:3px solid var(--line);border-radius:16px;background:var(--paper)}
.gtile .art .wolk{width:auto;height:80px;border-width:2px}
.pleklijn{display:flex;align-items:center;gap:10px;font:900 clamp(1rem,4vw,1.4rem) var(--fd);max-width:640px;margin:10px auto 0}
.plekbalk{position:relative;flex:1;display:flex;height:64px;border:3px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:4px 4px 0 var(--line);overflow:hidden}
.plekbalk button{flex:1;border:0;background:transparent;padding:0;min-width:0}
.plekbalk button:hover{background:color-mix(in srgb,var(--citroen) 50%,transparent)}
.plekbalk button.raak{background:var(--munt)}
.plekbalk button.wijs{background:var(--citroen);animation:kpuls .8s ease-in-out infinite}
.plekbalk button.mis{animation:plekmis .5s}
@keyframes plekmis{50%{background:var(--rood)}}
.plekmid{position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed var(--edge);pointer-events:none}

/* ---------- sommen: tekeningen uit de eerste Sommensafari ---------- */
img,svg{max-width:100%}
.logo svg{width:40px; height:40px}
.tile .ic svg{filter:drop-shadow(3px 3px 0 rgba(42,30,20,.35))}
.tile .ic .frac{font-size:2.1rem}
.frac{display:inline-flex; flex-direction:column; align-items:center; font-family:var(--fd); font-weight:800; line-height:1; vertical-align:middle; margin:0 .12em}
.frac>span{padding:0 .18em; display:block}
.frac>span:first-child{border-bottom:.09em solid currentColor; padding-bottom:.07em}
.frac>span:last-child{padding-top:.09em}
.frac.big{font-size:clamp(2.6rem,8vw,3.6rem)}
.frac.huge{font-size:clamp(3.4rem,11vw,5.2rem)}
.fracin{display:inline-flex; flex-direction:column; align-items:center; gap:6px; vertical-align:middle; margin:0 .2em}
.fracin i{display:block; width:100%; height:6px; background:currentColor; border-radius:3px}
.vis svg.pie{width:min(190px,42vw); height:auto}
.vis svg.bar{width:min(420px,100%); height:auto}
.q .frac{font-size:1.35em}
.cmp .side svg.bar{width:min(220px,36vw); height:auto}
svg.nline{width:100%; max-width:680px; height:auto; touch-action:none; cursor:pointer; user-select:none}
.items{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:520px; margin:14px auto; font-size:clamp(1.6rem,4.5vw,2.1rem); line-height:1}
.legend{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:1rem}
.legend i{display:inline-block; width:18px; height:18px; border:2.5px solid var(--line); border-radius:5px; vertical-align:-3px; margin-right:6px}
.facts .frac{font-size:1.2rem}
.card .front .frac{font-size:clamp(1.6rem,6vw,2.6rem)}
.card .front svg{width:88%; height:auto}
.savwrap>svg{width:100%;height:auto;display:block}
.wtop svg{width:120px;height:120px;filter:drop-shadow(4px 4px 0 rgba(42,30,20,.4))}
.icn{font-size:3.4rem;line-height:1}
.icn b{font-size:2.3rem;color:var(--btnink)}
.mini-card{width:62px;height:62px;border:3px solid #24180F;border-radius:12px;background:#fff;display:grid;place-items:center;color:#24180F}
.mini-card .ctxt{font-size:1.15rem}
.ctxt{font-family:var(--fd);font-weight:800;font-size:clamp(1rem,3.4vw,1.5rem);line-height:1.15;text-align:center}
.sum{font-family:var(--fd);font-weight:800;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1}
.unit{font-family:var(--fd);font-weight:700;font-size:1.35rem}
svg.jline{width:100%;max-width:680px;height:auto}
.jline .axis{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.jline .tick{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.jline .jl{fill:var(--ink);font-family:var(--fd);font-weight:800;font-size:22px;text-anchor:middle}
.jline .jl.q{fill:var(--framboos);font-size:30px}
.jline .arc{fill:none;stroke:var(--gc,var(--munt));stroke-width:5;stroke-linecap:round}
svg.mab{max-width:100%;height:auto}
.mab .m100{fill:var(--munt);stroke:var(--line);stroke-width:2}
.mab .m10{fill:var(--mandarijn);stroke:var(--line);stroke-width:2}
.mab .m1{fill:var(--citroen);stroke:var(--line);stroke-width:2}
.mab .mg{stroke:var(--line);stroke-width:.8;opacity:.4}
.mabrow svg{max-width:100%}
svg.hf{max-width:240px;height:auto}
.hf .on{fill:var(--gc,var(--citroen));stroke:var(--line);stroke-width:1.5}
.hf .off{fill:var(--empty);stroke:var(--line);stroke-width:1.5;opacity:.6}
svg.arr{max-width:100%;height:auto}
.arr .a{fill:var(--gc);stroke:var(--line);stroke-width:2.5}
.arr .b{fill:var(--mandarijn);stroke:var(--line);stroke-width:2.5}
.arr .cut{stroke:var(--line);stroke-width:3;stroke-dasharray:8 6}
svg.area{width:100%;max-width:560px;height:auto}
.area .ar0{fill:color-mix(in srgb,var(--gc) 55%,var(--paper));stroke:var(--line);stroke-width:3}
.area .ar1{fill:color-mix(in srgb,var(--citroen) 55%,var(--paper));stroke:var(--line);stroke-width:3}
.area .ai{fill:var(--ink);font-family:var(--fd);font-weight:800;font-size:22px;text-anchor:middle}
.plates{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}
.plate{width:clamp(84px,20vw,120px);aspect-ratio:1/1;border-radius:50%;border:3px solid var(--line);background:var(--paper);box-shadow:inset 0 0 0 9px var(--soft),3px 3px 0 var(--line);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;padding:16px;font-size:clamp(.8rem,2.4vw,1.05rem);line-height:1.1}
.plates.mini{margin:0;gap:6px}
.plates.mini .plate{width:58px;padding:10px;font-size:.8rem;box-shadow:inset 0 0 0 5px #E3E9FF}
.gtile .art>svg{width:92px;height:92px;flex:none}
.gtile .art>svg{width:74px;height:74px}
.round svg{width:26px;height:26px}
.avc svg{width:92px;height:92px}
.somhome .gtile .art>svg{filter:none}
.qvis .eq,.eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font:900 clamp(1.6rem,6.4vw,2.4rem) var(--fd)}
.eq .slot{display:inline-grid;place-items:center;min-width:1.6em;height:1.4em;border:3px dashed var(--line);border-radius:12px;background:var(--citroen);color:var(--btnink)}
.eq .slot::after{content:"?";font-size:.8em}
.qvis .sub{margin:0;font-size:1rem;width:100%;text-align:center}
.qvis .vis{display:flex;justify-content:center;width:100%}
.qvis .vis svg{max-width:100%;height:auto}
.somart{display:grid;place-items:center;max-width:100%;max-height:100%;overflow:hidden}
.somart svg{max-height:84px;width:auto;max-width:150px}
.gtile .art .somart>*{transform-origin:center}
:root{--gc:var(--munt)}

/* ---------- taal ---------- */
.taalzin{display:block;font:800 clamp(1.2rem,5vw,1.7rem)/1.5 var(--fd);text-align:center;text-wrap:balance}
.taalzin b{background:var(--citroen);color:var(--btnink);border-radius:8px;padding:0 .2em}
.taalzin i{font:400 .7em var(--fb);color:var(--muted);font-style:normal;white-space:nowrap}
.gat{display:inline-block;min-width:3.2em;border:3px dashed var(--line);border-radius:10px;background:var(--citroen);color:var(--btnink);text-align:center;padding:0 .3em;line-height:1.25}
.tikzin{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:680px;margin:0 auto}
.tikzin button{border:3px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--line);padding:8px 14px;font:800 clamp(1.15rem,4.8vw,1.6rem)/1.2 var(--fd)}
.tikzin button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.tikzin button.good,.tikzin button.hintp{background:color-mix(in srgb,var(--munt) 55%,var(--paper))}
.tikzin button.hintp{background:var(--citroen)}
.tikzin button.bad{animation:shake .4s}
.tikzin button.weg{visibility:hidden}
.zinbouw{min-height:58px;max-width:680px;margin:0 auto 12px;border:3px dashed var(--line);border-radius:18px;background:var(--paper);padding:10px 14px;font:800 clamp(1.15rem,4.8vw,1.6rem)/1.3 var(--fd);text-align:center}
.zinbouw:empty::before{content:"Hier komt je zin";color:var(--muted);font:400 1rem var(--fb)}
.qm.s u{text-decoration:none;background:var(--paper);border-radius:6px;padding:0 .15em}

/* ---------- tafels ---------- */
.gtile .art .qm.s{font-size:clamp(1.25rem,3vw,1.7rem);white-space:nowrap}
.tsom{font:900 clamp(2rem,8vw,3.2rem)/1.1 var(--fd);white-space:nowrap}
.stippen{display:block;flex:none;height:auto;max-width:330px}
.gtile .art .stippen{width:auto!important;height:78px}
.blik{display:flex;flex-direction:column;align-items:center;gap:12px}
.blik .opts{width:100%}
.tijdbalk{width:min(100%,420px);height:18px;border:3px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}
.tijdbalk i{display:block;height:100%;background:var(--citroen);transform-origin:left;animation:leeg linear forwards}
.tijdbalk.op i{background:var(--rood)}
@keyframes leeg{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.tijdbalk i{animation-timing-function:steps(10)}}

/* ---------- tel ---------- */
.grp{display:grid;grid-template-columns:repeat(var(--k,5),auto);gap:2px 4px;justify-content:center;font-size:clamp(26px,6.4vw,44px);line-height:1.1}
.grp.s{font-size:clamp(17px,4.2vw,28px)}
.grp i{font-style:normal}
.grp i.x{opacity:.3;position:relative}
.grp i.x::after{content:"";position:absolute;left:0;right:0;top:48%;border-top:4px solid var(--rood);transform:rotate(-20deg)}
.opt .grp{font-size:clamp(17px,4.4vw,30px)}
.dobbel{width:clamp(64px,16vw,96px);height:auto}
.opt .dobbel{width:70%}
.tienveld{display:grid;grid-template-columns:repeat(5,clamp(26px,6vw,38px));gap:3px;border:3px solid var(--line);border-radius:10px;padding:4px;background:var(--paper)}
.tienveld i{aspect-ratio:1;border:2px solid var(--edge);border-radius:50%}
.tienveld i.v{background:var(--rood);border-color:var(--line)}
.rij{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rij span{min-width:clamp(40px,10vw,58px);height:clamp(40px,10vw,58px);padding:0 6px;border:3px solid var(--line);border-radius:14px;background:var(--empty);display:grid;place-items:center;font:900 clamp(1.2rem,4.6vw,1.8rem) var(--fd)}
.rij span.q{border-style:dashed;background:var(--citroen);color:var(--btnink)}
.huis{display:inline-grid;grid-template-columns:1fr 1fr;border:3px solid var(--line);border-radius:6px 6px 14px 14px;overflow:hidden;background:var(--paper);min-width:150px;font:900 clamp(1.6rem,6vw,2.2rem) var(--fd)}
.huis b{grid-column:1/-1;background:var(--rood);color:#fff;padding:2px 0 0;border-bottom:3px solid var(--line);clip-path:polygon(50% 0,100% 100%,0 100%);height:1.9em;display:grid;place-items:end center}
.huis span{padding:4px 10px;display:grid;place-items:center}
.huis span+span{border-left:3px solid var(--line)}
.huis span.q{background:var(--citroen);color:var(--btnink)}
.som{font:900 clamp(1.8rem,7vw,2.8rem) var(--fd)}
.tapnums{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:560px;margin:0 auto}
.tapnums button{width:clamp(64px,17vw,92px);aspect-ratio:1;border:3px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--line);font:900 clamp(1.7rem,7vw,2.6rem) var(--fd)}
.tapnums button:nth-child(odd){transform:rotate(-3deg)}.tapnums button:nth-child(3n){transform:rotate(4deg)}
.tapnums button.done{background:color-mix(in srgb,var(--munt) 55%,var(--paper));box-shadow:none;transform:scale(.9)}
.tapnums button.bad{animation:shake .4s}
.opts.rowopts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.opts.rowopts .opt{width:clamp(54px,14vw,84px);padding:6px;font-size:clamp(28px,8vw,48px)}
.opt.emo1{font-size:clamp(34px,9vw,56px);line-height:1}
/* in een memorykaartje moet alles binnen het vakje blijven */
.mcard .grp{font-size:clamp(11px,3vw,20px);gap:0 1px;line-height:1.08}
.mcard .tienveld{width:100%;grid-template-columns:repeat(5,1fr);gap:1px;padding:2px;border-width:2px;border-radius:6px}
.mcard .tienveld i{border-width:1.5px}
.mcard .face{gap:3px;align-content:center}
.mcard .dobbel{width:78%}
/* keuzevakken met groepjes krimpen niet kleiner dan hun inhoud */
.opt.big{flex:0 0 auto}
/* elk plaatje krijgt een eigen vakje, zodat het nooit over de rand van het blokje valt */
.grp{gap:1px 2px}
.grp i{display:grid;place-items:center;width:1.32em;height:1.28em;line-height:1;overflow:visible}
.opt.big{padding:14px 16px;min-width:0}
.opt.big .grp{font-size:clamp(15px,3.6vw,28px)}
.opt.big .grp.s{font-size:clamp(13px,3vw,22px)}
.opts.bigopts{gap:12px}
.mcard .grp,.mcard .grp.s{font-size:clamp(11px,3.3vw,17px);--k:3!important}
.mcard .dobbel{width:74%}
.mcard .tienveld{grid-template-columns:repeat(5,clamp(8px,2.2vw,15px));gap:1px;padding:2px;border-width:2px}
.mcard .face{gap:2px}
.qvis .grp{max-width:100%}
/* groepjes passen altijd in hun vak: de grootte van de plaatjes volgt de breedte van het vak,
   ook op apparaten waar de plaatjes breder zijn */
.grp{grid-template-columns:repeat(var(--k,5),1.4em)}
.grp i{text-align:center}
.mcard{container-type:inline-size}
.opt.grpopt{width:clamp(130px,42vw,200px);min-height:0;aspect-ratio:1;container-type:inline-size;overflow:hidden}
.mcard .grp,.opt.grpopt .grp{font-size:min(38px,calc(100cqw/(var(--k,3)*1.7)));gap:1px 0}

/* ---------- tijd en taal: lange teksten in keuzes ---------- */
.opts.lang{grid-template-columns:minmax(0,640px)}
.opts.lang .opt.txt{font:700 clamp(1rem,3.8vw,1.2rem)/1.35 var(--fb);text-align:left;padding:12px 16px;min-height:0}
.tvolg{display:flex;flex-direction:column;gap:10px;max-width:600px;margin:0 auto}
.tvolg button{border:3px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--line);padding:10px 14px;font:800 clamp(1rem,4vw,1.25rem)/1.25 var(--fd);text-align:left}
.tvolg button.done{background:color-mix(in srgb,var(--munt) 55%,var(--paper));box-shadow:none}
.tvolg button.bad{animation:shake .4s}
.tvolg button b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--line);color:#FFF4E2;margin-right:4px}
.tsom.rom{letter-spacing:.06em;font-family:Georgia,'Times New Roman',serif}
.opts.lang .opt.txt{display:block}

/* ================= werkbladen ================= */
body[data-screen="werkblad"]{background:var(--sand)}
.wb-kader{max-width:1000px;margin:0 auto;padding:16px clamp(10px,3vw,24px) 40px}
.wb-keuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px;align-items:end}
.wb-keuze label{display:flex;flex-direction:column;gap:4px;font:800 1rem var(--fd)}
.wb-keuze select{font:400 1rem var(--fb);min-height:48px;border:3px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);padding:6px 10px;width:100%}
.wb-vink{flex-direction:row!important;align-items:center;gap:10px!important;min-height:48px}
.wb-vink input{width:26px;height:26px;accent-color:var(--mandarijn)}
.wb-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
#wb-uitleg{margin:12px 0 0;color:var(--muted)}
#wb-temp{position:absolute;left:-9999px;top:0;width:700px;visibility:hidden}
.wb-laden,.wb-fout{text-align:center;padding:40px 10px;font:800 1.2rem var(--fd)}
/* het blad zelf: altijd licht, ook in de donkere stand */
#wb-blad{--ink:#2A1E14;--line:#2A1E14;--paper:#FFFCF4;--muted:#6B5744;--soft:#F3E3BC;--edge:#EAD9AE;--empty:#FFF6E0;--btnink:#24180F;margin-top:22px;display:flex;flex-direction:column;gap:22px;color:#2A1E14}
.wb-pagina{background:#fff;color:#2A1E14;border:3px solid #2A1E14;border-radius:10px;box-shadow:6px 6px 0 #2A1E14;padding:clamp(14px,3vw,30px);overflow-x:auto}
.wb-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:3px solid #2A1E14;padding-bottom:8px}
.wb-logo{display:flex;align-items:center;gap:8px;font:900 1.5rem var(--fd);white-space:nowrap}
.wb-logo svg{width:44px;height:44px}
.wb-wat{text-align:right;font:400 1rem/1.3 var(--fb)}
.wb-wat b{font-family:var(--fd)}
.wb-naam{margin:12px 0 0;font:800 1rem var(--fd)}
.wb-instr{margin:10px 0 0;font:700 1.05rem/1.4 var(--fb);border:2px dashed #2A1E14;border-radius:10px;padding:6px 12px}
.wb-lijn{display:inline-block;min-width:11em;border-bottom:2.5px solid #2A1E14;height:1.2em;vertical-align:bottom;margin:0 .3em}
.wb-lijn.kort{min-width:6em}
.wb-lijst{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.wb-lijst.breed{grid-template-columns:1fr}
.wb-q{display:flex;gap:10px;break-inside:avoid;page-break-inside:avoid;border-bottom:1.5px solid #E6D9B8;padding-bottom:12px;min-width:0}
.wb-q>div{flex:1;min-width:0}
.wb-nr{flex:none;display:grid;place-items:center;width:1.8em;height:1.8em;border:2.5px solid #2A1E14;border-radius:50%;font:900 .95rem var(--fd);background:#FFC93C}
.wb-t{margin:2px 0 6px;font:700 1.05rem/1.35 var(--fb)}
.wb-t b{background:#FFE9A6;border-radius:5px;padding:0 .2em}
.wb-sub{margin:0 0 6px;font-size:.95rem}
.wb-vis{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px}
.wb-in{margin:6px 0 0;font:800 1.1rem var(--fd)}
.wb-opts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px}
.wb-opts li{display:flex;align-items:center;gap:6px}
.wb-opts li>b{flex:none;display:grid;place-items:center;width:1.5em;height:1.5em;border:2px solid #2A1E14;border-radius:6px;font:800 .85rem var(--fd)}
.wb-opts li>span{display:inline-flex;align-items:center;font:800 1.1rem var(--fd)}
.wb-opts:not(.tekst) li>span{width:74px;justify-content:center;font-size:34px;line-height:1}
.wb-opts:not(.tekst) li>span>svg,.wb-opts:not(.tekst) li>span>span>svg{width:100%;height:auto}
.wb-opts.lang{flex-direction:column;gap:6px}
.wb-opts.lang li>span{font:400 1rem/1.3 var(--fb)}
.wb-eigen{margin-top:6px}
.wb-eigen .btn,.wb-eigen [data-ok],.wb-eigen [data-go],.wb-eigen .tijdbalk,.wb-eigen .kaartmsg,.wb-eigen .zetknop,.wb-eigen .bouwk,.wb-eigen .tot,.wb-klein .btn,.wb-klein [data-ok],.wb-klein .zetknop,.wb-klein .bouwk,.wb-klein .lade,.wb-klein .kaartmsg,.wb-klein .tijdbalk{display:none!important}
.wb-eigen button,.wb-klein button{pointer-events:none}
.wb-eigen .opt{min-height:0}
.wb-klein{zoom:.5;max-width:200%}
.wb-match{display:flex;justify-content:space-between;gap:20%;margin-top:8px}
.wb-match ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.wb-match li{display:flex;align-items:center;gap:8px;min-height:46px}
.wb-match ul:last-child li{justify-content:flex-end}
.wb-match li>b{font:800 1rem var(--fd)}
.wb-match li>i{flex:none;width:12px;height:12px;border-radius:50%;background:#2A1E14}
.wb-match li>span{display:inline-flex;align-items:center;font:800 1.1rem var(--fd);max-width:150px}
.wb-match li>span svg{max-height:56px;width:auto;max-width:150px}
.wb-match .mnum,.wb-match .mtxt{font-size:1.1rem!important}
.wb-woord{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;min-height:50px}
.wb-emo{font-size:38px;line-height:1}
.wb-voor{font:800 1.3rem var(--fl,var(--fd))}
.wb-letters{display:inline-flex;gap:4px}
.wb-letters i{font:800 1.4rem var(--fl,var(--fd));font-style:normal;min-width:1.5em;height:1.7em;display:grid;place-items:center;border:2px solid #2A1E14;border-radius:6px;padding:0 .2em}
.wb-letters i.leeg{border-style:dashed;background:#FFF6D8}
.wb-letters.los i{transform:rotate(-4deg)}.wb-letters.los i:nth-child(even){transform:rotate(5deg)}
.wb-boek{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}
.wb-boek figure{margin:0;text-align:center;font:800 1rem var(--fd)}
.wb-boek svg{width:84px;height:84px;stroke:#2A1E14;stroke-width:3}
.wb-antwlijst{list-style:none;margin:14px 0 0;padding:0;columns:2;column-gap:28px}
.wb-antwlijst li{display:flex;gap:8px;align-items:flex-start;break-inside:avoid;margin-bottom:8px;font:700 1rem/1.35 var(--fb)}
.wb-antwlijst li>div{min-width:0}
.wb-voet{margin-top:14px;border-top:2px solid #2A1E14;padding-top:6px;font-size:.85rem;color:#6B5744;text-align:center}
.wb-pagina .eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:900 1.4rem var(--fd);margin-top:6px}
.wb-pagina .slot{display:inline-block;min-width:74px;height:1.5em;border-bottom:2.5px solid #2A1E14}
.wb-pagina .vis svg{max-width:100%;height:auto}
.wb-pagina .kaart{box-shadow:none}
.wb-pagina svg text{fill:#2A1E14}
.wb-pagina .opt,.wb-pagina .tikzin button,.wb-pagina .tapnums button,.wb-pagina .tvolg button,.wb-pagina .kveld button{box-shadow:none}
@media (max-width:640px){.wb-lijst{grid-template-columns:1fr}.wb-antwlijst{columns:1}.wb-kop{flex-direction:column;align-items:flex-start}.wb-wat{text-align:left}}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important}
  body[data-screen="werkblad"]>*:not(.wb-kader),.wb-geenprint{display:none!important}
  .wb-kader{max-width:none;padding:0}
  #wb-blad{margin:0;gap:0;display:block}
  .wb-pagina{border:0;box-shadow:none;border-radius:0;padding:0;overflow:visible;break-after:page;page-break-after:always}
  .wb-pagina:last-child{break-after:auto;page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* maten op papier */
.wb-vis .klok,.wb-vis .one .klok,.wb-eigen .zk{width:118px!important;height:auto}
.wb-eigen .zk line[transform]{display:none}
.wb-eigen .zetwrap{justify-content:flex-start}
.wb-pagina .kaart.nl{width:min(100%,270px)}
.wb-pagina .kaart.eu{width:min(100%,430px)}
.wb-pagina .kaart.wd{width:min(100%,520px)}
.wb-pagina .graf{width:min(100%,300px)}
.wb-pagina .graf.klein{width:min(100%,190px)}
.wb-pagina .meetsvg.smal{width:130px}.wb-pagina .meetsvg.mid{width:200px}
.wb-pagina .wolk{width:min(100%,250px)}
.wb-pagina .btaart,.wb-pagina .ptaart{width:84px}
.wb-pagina .tsom{font-size:1.9rem}
.wb-pagina .kv{width:54px}.wb-pagina .kv.groot{width:80px}.wb-pagina .kv.klein{width:38px}
.wb-pagina .emo{font-size:44px;line-height:1}
.wb-eigen .hand{display:none}
.wb-eigen .lade{justify-content:flex-start}
.wb-eigen .kassa{align-items:flex-start}
.wb-match{max-width:520px;margin-left:auto;margin-right:auto}
.wb-lijst:not(.breed) .wb-q .kaart.nl{width:100%}
.wb-som .q{margin:0}
.wb-som.eq .slot,.wb-pagina .eq .slot{display:inline-block;min-width:74px;height:1.5em;border:0;border-bottom:2.5px solid #2A1E14;background:none;box-shadow:none;border-radius:0}
.wb-keuze label[hidden]{display:none!important}#wb-pvlbl::first-letter{text-transform:uppercase}
.wb-lijn.lang{min-width:min(100%,22em)}
.wb-kies{display:flex;flex-wrap:wrap;gap:8px 12px;margin:6px 0 0}
.wb-kies span{border:2px solid #2A1E14;border-radius:10px;padding:2px 12px;font:800 1.05rem var(--fd)}

/* ---------- woorden ---------- */
.wletters{display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:center}
.wletters i{font:800 clamp(1.5rem,6.4vw,2.2rem)/1 var(--fl,var(--fd));font-style:normal;min-width:1.5em;height:1.7em;display:grid;place-items:center;border:3px solid var(--line);border-radius:12px;background:var(--paper);padding:0 .22em}
.wletters i.leeg{border-style:dashed;background:var(--citroen);color:var(--btnink)}
.gtile .art .wletters i{font-size:1.3rem;border-width:2px;border-radius:8px}
.wbouw{display:flex;flex-direction:column;align-items:center;gap:18px}
.wtegels{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px}
.wtegels button{min-width:clamp(58px,15vw,76px);height:clamp(58px,15vw,76px);padding:0 10px;border:3px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--line);font:800 clamp(1.6rem,7vw,2.3rem)/1 var(--fl,var(--fd))}
.wtegels button:nth-child(odd){transform:rotate(-3deg)}.wtegels button:nth-child(3n){transform:rotate(4deg)}
.wtegels button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.wtegels button.weg{visibility:hidden}
.wtegels button.bad{animation:shake .4s}
.wtegels button.hintp{background:var(--citroen)}
.leesw,.opt.leesw{font-family:var(--fl,var(--fd))!important;font-size:clamp(1.3rem,5.4vw,1.8rem)!important;letter-spacing:.02em}
.mtxt.leesw{font-size:clamp(.9rem,3.6vw,1.4rem)!important}
.flitsbord{display:inline-block;border:3px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:4px 4px 0 var(--line);padding:.15em .7em;font:800 clamp(2rem,9vw,3.2rem)/1.3 var(--fl,var(--fd))}
.flitswoord{display:inline-block;font:800 clamp(1.8rem,8vw,2.8rem) var(--fl,var(--fd));animation:flitsweg 2.6s forwards}
@keyframes flitsweg{0%,70%{opacity:1}100%{opacity:0}}
/* memory uit de Vormensafari: de vorm staat nu in een kaartvlak */
.mcard .face .shape{display:block;transform:none;width:100%;height:100%}
.gtile .art .emo{font-size:56px;line-height:1}
/* grote plaatjes voor de jongsten */
.opts.rowopts.jong{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.opts.rowopts.jong .opt{width:clamp(88px,27vw,132px);height:clamp(88px,27vw,132px);aspect-ratio:1;font-size:clamp(46px,14vw,72px);line-height:1;padding:0;display:grid;place-items:center}
.tgsvg{display:block;width:78%;height:auto}
.tgemo{font-size:1em;line-height:1}
.tgmaat{line-height:1}.tgmaat.groot{font-size:1.25em}.tgmaat.klein{font-size:.5em}
.tgveel{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:1px;font-size:.36em;line-height:1.05;max-width:92%}
.tgveel i{font-style:normal}
.opts.rowopts.jong.scene .opt{width:clamp(132px,43vw,200px);height:auto;aspect-ratio:160/126;padding:4px}
.plek{display:block;width:100%;height:auto}
.plek text{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.screen .gtile .art .tgmaat.groot{font-size:min(54px,22cqw)}.screen .gtile .art .tgmaat.klein{font-size:min(24px,10cqw)}
.screen .gtile .art>svg.plek{max-width:60cqw}