:root{
  --ink:#1b1b1b;--blue:#2d7dff;--green:#27c24c;--red:#ff4d4f;--yellow:#ffd23f;--purple:#8e5bff;--orange:#ff8c1a;
  --card:#fff;--sky1:#7fd1ff;--sky2:#d4f0ff;
  --ui:"Arial Rounded MT Bold","Trebuchet MS",Verdana,sans-serif;
  --read:Verdana,"Trebuchet MS",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:var(--ui);color:var(--ink);background:linear-gradient(var(--sky1),var(--sky2)) fixed;font-size:18px;line-height:1.35;
  padding-bottom:calc(24vh + env(safe-area-inset-bottom));overflow-x:hidden;user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}
.baseplate{position:fixed;left:0;right:0;bottom:0;height:22vh;z-index:-1;border-top:6px solid #2b8a2b;
  background:#3fb33f radial-gradient(circle at 50% 50%,#5fd35d 0 26%,#379c37 27% 32%,transparent 33%) 0 0/54px 54px}
.cloud{position:fixed;z-index:-1;width:150px;height:44px;background:#fff;border-radius:8px;opacity:.9;box-shadow:40px -22px 0 #fff,80px 0 0 #fff;animation:drift 70s linear infinite}
.c1{top:14%;left:-200px}.c2{top:30%;left:-200px;animation-duration:110s;animation-delay:-40s;transform:scale(.7)}.c3{top:8%;left:-200px;animation-duration:90s;animation-delay:-70s;transform:scale(.5)}
@keyframes drift{to{left:110vw}}

#hud{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-bottom:4px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.15)}
#hud .who{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#hud .name{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .lvl{font-size:12px;opacity:.7}
.xpbar{height:12px;border:3px solid var(--ink);background:#ddd;border-radius:3px;overflow:hidden;min-width:70px;width:120px;margin-top:2px}
.xpbar i{display:block;height:100%;background:var(--green);transition:width .6s}
.coins{background:var(--yellow);border:3px solid var(--ink);border-radius:6px;padding:4px 10px;font-size:20px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.coins.pop{animation:pop .5s}
.iconbtn{width:44px;height:44px;border:3px solid var(--ink);background:#fff;border-radius:6px;font-size:22px;box-shadow:0 3px 0 var(--ink);cursor:pointer;padding:0}
.iconbtn:active{transform:translateY(3px);box-shadow:none}

#app{max-width:820px;margin:0 auto;padding:16px 14px 30px}
h1,h2,h3{margin:.3em 0}
h2{font-size:24px;text-shadow:2px 2px 0 #fff}

.card{background:var(--card);border:4px solid var(--ink);border-radius:10px;box-shadow:0 6px 0 var(--ink);padding:16px;margin-bottom:18px}
.btn{font-family:var(--ui);font-size:20px;color:#fff;background:var(--blue);border:4px solid var(--ink);border-radius:8px;padding:12px 18px;box-shadow:0 6px 0 var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.yellow{background:var(--yellow);color:var(--ink);text-shadow:none}
.btn.purple{background:var(--purple)}.btn.orange{background:var(--orange)}.btn.white{background:#fff;color:var(--ink);text-shadow:none}
.btn.big{font-size:26px;padding:16px 26px}.btn.wide{width:100%}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin:14px 0}

/* splash + home */
.splash{text-align:center;padding-top:30px}
.splash h1{font-size:44px;text-shadow:4px 4px 0 #fff;line-height:1.05}
.hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.hero .txt{flex:1;min-width:220px}
.stand{padding:18px 26px 0;background:#3fb33f radial-gradient(circle,#5fd35d 0 26%,transparent 28%) 0 0/28px 28px;border:4px solid var(--ink);border-radius:8px}
.worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.world{background:var(--c,#27c24c);color:#fff;border:4px solid var(--ink);border-radius:10px;box-shadow:0 6px 0 var(--ink);padding:10px;text-align:center;cursor:pointer;font-family:var(--ui);text-shadow:0 2px 0 rgba(0,0,0,.4);position:relative}
.world:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.world .ic{font-size:40px;display:block}
.world .nm{font-size:16px;display:block}
.world .rg{font-size:14px;opacity:.95;display:block}
.world .st{font-size:18px;letter-spacing:2px;text-shadow:none;display:block;margin-top:2px}
.world.locked{filter:grayscale(1) brightness(.85);cursor:not-allowed}
.world.current{animation:bob 1.2s ease-in-out infinite}
.nav{display:flex;gap:10px;margin-top:20px}.nav .btn{flex:1;font-size:17px}
.streak{display:inline-block;background:#fff3cd;border:3px solid var(--ink);border-radius:6px;padding:2px 10px;font-size:16px}

.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.acts .btn{flex-direction:column;padding:16px 8px;font-size:19px}
.acts .btn small{font-size:13px;opacity:.9;text-shadow:none}
.acts .ic{font-size:34px}
.worldhead{background:var(--c);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);display:flex;align-items:center;gap:14px}
.worldhead .ic{font-size:56px}

/* questions */
.dots{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.dots i{width:18px;height:18px;border:3px solid var(--ink);background:#fff;border-radius:3px}
.dots i.done{background:var(--green)}.dots i.now{background:var(--yellow);animation:bob 1s infinite}.dots i.miss{background:var(--red)}
.q{text-align:center}
.prompt{font-size:22px;margin:0 0 6px}
.bignum{font-family:var(--read);font-weight:bold;font-size:88px;line-height:1;margin:6px 0;text-shadow:4px 4px 0 var(--yellow)}
.word{font-family:var(--read);font-weight:bold;font-size:44px;letter-spacing:.06em;margin:8px 0;word-break:break-word;line-height:1.2}
.word.sm{font-size:20px;letter-spacing:.04em;margin:2px 0}
.syl.s0{color:#1d4ed8}.syl.s1{color:#ea580c}
.syl+.syl{margin-left:.08em}
mark{background:var(--yellow);color:var(--ink);border-radius:3px;padding:0 2px}
.hint{font-family:var(--read);font-size:26px;font-weight:bold;color:#555}
.fb{min-height:62px;font-size:21px;margin:10px 0}
.fb.good{color:#0b7a27}.fb.warn{color:#b45309}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:12px}
.opt{font-family:var(--read);background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:8px;box-shadow:0 6px 0 var(--ink);padding:10px 6px;cursor:pointer;text-align:center}
.opt:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.opt b{display:block;font-size:40px}
.opt span{font-size:15px}
.opt.good{background:#b9f6ca}.opt.bad{background:#ffc9c9;animation:shake .4s;opacity:.7}
.seq{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.seq b{font-family:var(--read);font-size:44px;background:#fff;border:4px solid var(--ink);border-radius:8px;min-width:76px;padding:4px 8px;box-shadow:0 5px 0 var(--ink)}
.seq b.q{background:var(--yellow)}
.slots{min-height:78px;border:4px dashed #999;border-radius:8px;padding:8px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;margin:10px 0;font-family:var(--read);font-weight:bold;font-size:38px;background:#f6fbff}
.slots .ph{color:#bbb}
.tiles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.tile{font-family:var(--read);font-weight:bold;font-size:34px;background:var(--orange);color:#fff;border:4px solid var(--ink);border-radius:8px;box-shadow:0 6px 0 var(--ink);padding:8px 16px;cursor:pointer;min-width:60px}
.tile:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.tile.used{visibility:hidden}
.tile.shake{animation:shake .4s}
.typed{font-family:var(--read);font-weight:bold;font-size:34px;text-align:center;border:4px solid var(--ink);border-radius:8px;padding:10px;width:100%;max-width:520px;letter-spacing:.06em}
.mic{width:130px;height:130px;border-radius:12px;font-size:56px;background:var(--red);border:5px solid var(--ink);box-shadow:0 8px 0 var(--ink);cursor:pointer;color:#fff}
.mic:active{transform:translateY(6px);box-shadow:0 2px 0 var(--ink)}
.mic.on{animation:pulse .8s infinite;background:var(--green)}
.seg{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.seg button{font-family:var(--ui);font-size:15px;border:3px solid var(--ink);background:#fff;border-radius:6px;padding:6px 12px;cursor:pointer}
.seg button.on{background:var(--yellow)}

/* blokken */
.blocks{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:flex-end;margin:10px auto;max-width:100%}
.blocks.frame{display:grid;grid-template-columns:repeat(5,28px);gap:5px;justify-content:center}
.cube{display:block;width:28px;height:28px;border:3px solid var(--ink);border-radius:4px;background:#4da3ff}
.cube.b{background:#ffb347}
.base10 .cube{width:var(--sq);height:var(--sq);border-width:1px;border-radius:1px;background:#ffb347}
.base10 .rod{width:var(--sq);height:calc(var(--sq)*10);background:#4da3ff linear-gradient(rgba(0,0,0,.45) 1px,transparent 1px) 0 0/100% var(--sq);border:1px solid var(--ink);margin-right:3px}
.base10 .flat{width:calc(var(--sq)*10);height:calc(var(--sq)*10);background:#a678ff linear-gradient(rgba(0,0,0,.4) 1px,transparent 1px) 0 0/100% var(--sq),linear-gradient(90deg,rgba(0,0,0,.4) 1px,transparent 1px) 0 0/var(--sq) 100%;border:1px solid var(--ink)}
.base10 .grp{display:flex;align-items:flex-end;gap:3px;flex-wrap:wrap}
.base10 .units{display:grid;grid-template-columns:repeat(3,var(--sq));gap:2px}

/* honderdveld */
.grid100{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.cell{font-family:var(--read);font-weight:bold;font-size:15px;padding:8px 0;border:3px solid var(--ink);border-radius:5px;background:var(--bg,#fff);cursor:pointer;text-align:center}
.cell.now{background:var(--yellow)!important;transform:scale(1.25);position:relative;z-index:2}
.cell.done::after{content:"★";position:absolute;font-size:9px;margin:-6px 0 0 -2px;color:#d97706}
.cell{position:relative}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.chips button{font-family:var(--ui);font-size:16px;border:3px solid var(--ink);background:#fff;border-radius:6px;padding:6px 12px;cursor:pointer}
.chips button.on{background:var(--yellow)}

/* shop */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.item{background:#fff;border:4px solid var(--ink);border-radius:10px;box-shadow:0 5px 0 var(--ink);padding:10px;text-align:center}
.item .pv{height:130px;display:flex;align-items:flex-end;justify-content:center;padding-top:30px}
.item .hatpv{font-size:60px;height:130px;display:flex;align-items:center;justify-content:center}
.item.eq{background:#d9ffd9}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{background:#fff;border:4px solid var(--ink);border-radius:10px;padding:10px;text-align:center;box-shadow:0 5px 0 var(--ink)}
.badge .ic{font-size:44px}
.badge.off{filter:grayscale(1);opacity:.5}
.badge small{display:block;font-family:var(--read);font-size:12px}

/* avatar */
.avatar{--u:10px;width:calc(var(--u)*5);position:relative;display:flex;flex-direction:column;align-items:center;flex:none}
.avatar>*{flex:none}
.avatar .hat{position:absolute;top:calc(var(--u)*-2.2);font-size:calc(var(--u)*2.8);line-height:1;z-index:2}
.avatar .head{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);background:var(--head);border:calc(var(--u)*.22) solid var(--ink);border-radius:calc(var(--u)*.4);position:relative}
.avatar .eye{position:absolute;top:32%;width:14%;height:22%;background:var(--ink)}
.avatar .eye.l{left:24%}.avatar .eye.r{right:24%}
.avatar .smile{position:absolute;left:28%;right:28%;bottom:16%;height:12%;background:var(--ink);border-radius:0 0 50% 50%}
.avatar .body{display:flex}
.avatar .arm{width:calc(var(--u)*1.1);height:calc(var(--u)*2.6);background:var(--head);border:calc(var(--u)*.2) solid var(--ink)}
.avatar .torso{width:calc(var(--u)*2.4);height:calc(var(--u)*2.6);background:var(--torso);border:calc(var(--u)*.2) solid var(--ink);margin:0 calc(var(--u)*-.2)}
.avatar .legs{display:flex}
.avatar .leg{width:calc(var(--u)*1.2);height:calc(var(--u)*2.4);background:var(--legs);border:calc(var(--u)*.2) solid var(--ink)}
.avatar.bob{animation:bob 1.4s ease-in-out infinite}
.avatar.jump{animation:jump .6s}

/* modal + toasts + confetti */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:14px}
#overlay[hidden]{display:none}
.modal{background:#fff;border:4px solid var(--ink);border-radius:10px;box-shadow:0 8px 0 var(--ink);padding:18px;max-width:560px;width:100%;max-height:90vh;overflow:auto;font-size:16px}
.modal label{display:block;margin:12px 0 4px;font-size:15px}
.modal input[type=text],.modal select{width:100%;font-size:17px;padding:8px;border:3px solid var(--ink);border-radius:6px;font-family:var(--read)}
.modal .weak{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--read);font-size:13px}
.modal .weak span{background:#ffe3e3;border:2px solid var(--ink);border-radius:4px;padding:2px 6px}
#toasts{position:fixed;top:70px;left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--yellow);border:4px solid var(--ink);border-radius:8px;box-shadow:0 5px 0 var(--ink);padding:10px 18px;font-size:20px;animation:toast 3.4s forwards}
.confetti{position:fixed;top:-20px;width:14px;height:14px;border:2px solid var(--ink);z-index:70;pointer-events:none;animation:fall linear forwards}
.stars{font-size:60px;letter-spacing:6px}
.stars .off{filter:grayscale(1);opacity:.3}

@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes jump{30%{transform:translateY(-34px)}60%{transform:translateY(0)}80%{transform:translateY(-8px)}}
@keyframes pop{40%{transform:scale(1.3)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes toast{0%{transform:translateY(-30px);opacity:0}10%,85%{transform:none;opacity:1}100%{opacity:0}}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

@media (max-width:520px){
  .bignum{font-size:72px}.word{font-size:34px}.xpbar{width:80px}.grid100{gap:2px}.cell{font-size:12px;padding:6px 0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}

.dots.track{gap:0;align-items:flex-end;margin:6px 0 30px;padding-top:56px}
.dots.track>i{width:auto;flex:1;max-width:44px;height:30px;border:3px solid var(--ink);border-left-width:0;background:#9be28a;border-radius:0;display:flex;align-items:flex-end;justify-content:center;position:relative;font-size:16px;font-style:normal;overflow:visible;animation:none}
.dots.track>i:first-child{border-left-width:3px}
.dots.track>i.done{background:#ffe27a}.dots.track>i.miss{background:#f0b0b0}
.dots.track .avatar{position:absolute;bottom:calc(100% - 3px);left:50%;margin-left:calc(var(--u)*-2.5)}
.floaty{position:fixed;left:50%;top:40%;z-index:80;font-size:48px;font-weight:bold;text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff;pointer-events:none;animation:floaty 1.3s ease-out forwards}
@keyframes floaty{0%{transform:translate(-50%,0) scale(.5);opacity:0}20%{opacity:1;transform:translate(-50%,-20px) scale(1.2)}100%{transform:translate(-50%,-140px) scale(1);opacity:0}}

/* maatje */
.buddy{display:flex;align-items:center;gap:10px;margin:0 0 10px;text-align:left}
.buddy .bd{font-size:54px;line-height:1;flex:none}
.buddy .bd.jump{animation:jump .6s}.buddy .bd.shake{animation:shake .4s}
.bubble{position:relative;background:#fff;border:3px solid var(--ink);border-radius:10px;padding:8px 12px;font-family:var(--read);font-size:17px;box-shadow:0 3px 0 var(--ink)}
.bubble::before{content:"";position:absolute;left:-12px;top:18px;border:8px solid transparent;border-right:10px solid var(--ink);border-left:0}
/* baas */
.bossbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;background:#fff;border:4px solid var(--ink);border-radius:10px;padding:8px 12px;box-shadow:0 4px 0 var(--ink)}
.boss{display:flex;align-items:center;gap:10px;flex:1}
.boss .bi{font-size:52px;line-height:1;animation:bob 1.4s infinite}
.hpw{flex:1}.hp{height:18px;border:3px solid var(--ink);background:#ddd;border-radius:4px;overflow:hidden}
.hp i{display:block;height:100%;background:var(--red);transition:width .5s}
.hearts{font-size:22px;letter-spacing:2px}
/* opdrachten */
.mis{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:16px;flex-wrap:wrap}
.mis .mt{flex:1 1 180px}
.mbar{width:90px;height:14px;border:3px solid var(--ink);border-radius:4px;background:#ddd;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--green)}
.mv{font-size:14px;min-width:34px}.mdone{min-width:30px;display:inline-block}
.garage{display:flex;align-items:flex-end;gap:12px;padding-bottom:6px}
.garage .bud{font-size:42px;align-self:flex-end}
.swatch{width:100%;height:130px;border:3px solid var(--ink);border-radius:6px;display:flex;align-items:flex-start;justify-content:flex-end;font-size:42px;padding:6px}
/* rijden */
.drv{position:relative;border:4px solid var(--ink);border-radius:10px;overflow:hidden;background:linear-gradient(var(--sky) 0 38%,var(--ground) 38%);box-shadow:0 6px 0 var(--ink)}
.drv-deco{position:absolute;left:0;right:0;top:60px;height:120px;pointer-events:none;overflow:hidden}
.drv-deco span{position:absolute;left:100%;font-size:46px;animation:decomove var(--d,30s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes decomove{to{transform:translateX(-150vw)}}
.drv-bar{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.92);border-bottom:4px solid var(--ink);padding:8px 10px;min-height:64px}
.dq{font-family:var(--read);font-weight:bold;font-size:26px;text-align:center}
.drv-prog{position:relative;display:flex;gap:4px;justify-content:center;align-items:center;padding:6px 0;font-size:16px}
.drv-prog i{width:16px;height:12px;border:2px solid var(--ink);background:#fff;border-radius:2px}
.drv-prog i.d{background:var(--green)}.drv-prog i.n{background:var(--yellow)}
.drv-road{position:relative;height:270px;margin-top:70px;background:var(--road);border-top:4px solid var(--ink);overflow:hidden;touch-action:none}
.ln{position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,#fff 0 34px,transparent 34px 68px);animation:roadmove .5s linear infinite}
.ln.l1{top:33.3%}.ln.l2{top:66.6%}
@keyframes roadmove{to{background-position-x:-68px}}
.dcar{position:absolute;left:8%;width:110px;transition:top .25s ease-out;z-index:3}
.dcar.hop{animation:jump .6s}.dcar.wobble{animation:shake .5s}
.gate{position:absolute;left:0;width:86px;display:flex;align-items:center;justify-content:center;will-change:transform;transform:translateX(120vw)}
.gate b{font-family:var(--read);font-size:34px;min-width:78px;text-align:center;background:var(--yellow);border:4px solid var(--ink);border-radius:8px;padding:6px 4px;box-shadow:0 4px 0 var(--ink)}
.gate.ok b{background:#9cf5b3}.gate.no b{background:#ffb3b3}
.drv-ctl{display:flex;gap:16px;justify-content:center;margin:16px 0}
.drv-ctl .btn{width:110px}
/* sprint */
.timebar{height:20px;border:4px solid var(--ink);border-radius:6px;background:#ddd;overflow:hidden;margin-bottom:8px}
.timebar i{display:block;height:100%;width:100%;background:var(--orange)}

.carimg{image-rendering:pixelated;display:block}
.w3d{position:fixed;inset:0;z-index:40;background:#8fd8ff;touch-action:none;user-select:none;-webkit-user-select:none}
.w3d canvas{width:100%;height:100%;display:block}
.w3-top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.w3-top>*{pointer-events:auto}
.w3-q{flex:1;text-align:center;font-family:var(--read);font-weight:bold;font-size:24px;background:rgba(255,255,255,.92);border:4px solid var(--ink);border-radius:10px;padding:6px 10px;min-height:46px;box-shadow:0 4px 0 var(--ink)}
.w3-q:empty{visibility:hidden}
.w3-info{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.w3-info span{background:var(--yellow);border:3px solid var(--ink);border-radius:6px;padding:3px 10px;font-size:18px;box-shadow:0 3px 0 var(--ink)}
.w3-cmp{position:absolute;top:calc(74px + env(safe-area-inset-top));left:50%;margin-left:-28px;width:56px;height:56px;border:4px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden}
.w3-cmp i{font-style:normal;font-size:30px;color:#e8452c;line-height:1}
.w3-ctl{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;padding:0 16px;pointer-events:none}
.w3-ctl .pad{display:flex;gap:14px;pointer-events:auto;align-items:flex-end}
.w3-ctl button{width:92px;height:92px;font-size:42px;border:5px solid var(--ink);border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 6px 0 var(--ink);touch-action:none;color:var(--ink);font-family:var(--ui)}
.w3-ctl button:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink);background:var(--yellow)}
.w3-ctl .pad:last-child button:first-child{background:rgba(120,230,140,.9)}
.w3-ctl .pad:last-child button:last-child{background:rgba(255,140,140,.9)}
.w3-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;background:#8fd8ff}
@media (max-width:520px){.w3-ctl button{width:80px;height:80px;font-size:36px}.w3-q{font-size:19px}}

.w3-hint{position:absolute;left:50%;top:32%;transform:translateX(-50%);background:#fff;border:4px solid var(--ink);border-radius:10px;padding:10px 18px;font-size:24px;box-shadow:0 5px 0 var(--ink);animation:bob 1s infinite;pointer-events:none;text-align:center}

/* vrij rijden v2: paneel, minikaart, joystick */
.w3-q{position:relative;padding-right:46px}
.w3-x{position:absolute;right:6px;top:6px;width:34px;height:34px;border:3px solid var(--ink);border-radius:6px;background:#ff8a8a;font-size:16px;cursor:pointer;padding:0}
.w3-panel{position:absolute;left:10px;top:calc(66px + env(safe-area-inset-top));width:230px;background:rgba(255,255,255,.93);border:4px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 var(--ink);font-size:14px;max-height:55vh;overflow:auto}
.w3-panel .ph{padding:6px 10px;font-weight:bold;cursor:pointer}
.w3-panel .pb{padding:0 10px 8px}
.tg{display:flex;align-items:center;gap:6px;padding:5px 0;border-top:2px solid #ddd}
.tg span{flex:1}.tg b{font-family:var(--read);font-size:13px}
.tg i{font-style:normal;color:#e8452c;font-size:22px;width:24px;text-align:center;display:inline-block}
.dm .dh{font-weight:bold;margin-top:6px;border-top:2px solid #ddd;padding-top:6px}
.dm .mr{display:flex;justify-content:space-between;gap:6px;font-size:13px;padding:2px 0}
.dm em{font-style:normal;font-family:var(--read);font-size:12px}
.w3d canvas.w3-map{position:absolute;right:10px;top:calc(160px + env(safe-area-inset-top));width:130px;height:130px;border:4px solid var(--ink);border-radius:8px;background:#5fbf5a;box-shadow:0 4px 0 var(--ink);opacity:.95}
.w3-joy{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(26px + env(safe-area-inset-bottom));width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.55);border:5px solid var(--ink);touch-action:none;display:flex;align-items:center;justify-content:center}
.w3-joy::before{content:"▲";position:absolute;top:6px;font-size:20px;color:#1b1b1b99}
.w3-joy::after{content:"▼";position:absolute;bottom:6px;font-size:20px;color:#1b1b1b99}
.w3-joy i{display:block;width:76px;height:76px;border-radius:50%;background:var(--yellow);border:5px solid var(--ink);box-shadow:0 4px 0 var(--ink);pointer-events:none}
.w3-keys{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(255,255,255,.88);border:3px solid var(--ink);border-radius:8px;padding:6px 14px;font-size:15px}
@media (max-width:700px){.w3-panel{width:190px;font-size:12px}.w3d canvas.w3-map{width:100px;height:100px}}

.w3-hint{top:auto!important;bottom:90px;font-size:22px;max-width:80vw}
@media (pointer:coarse){.w3-hint{bottom:240px;font-size:20px}}

/* stad: dialoog, betalen */
.w3-dlg{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,94vw);background:#fff;border:5px solid var(--ink);border-radius:14px;box-shadow:0 8px 0 var(--ink);padding:12px;display:flex;gap:12px;z-index:5;max-height:62vh;overflow:auto}
.dl-av{font-size:64px;line-height:1;flex:none}
.dl-body{flex:1;font-family:var(--read)}
.dl-body b{font-family:var(--ui)}
.dl-text{font-size:19px;margin:4px 0 8px}
.dl-btns{display:flex;gap:10px;flex-wrap:wrap}
.dl-btns .btn{font-size:17px;padding:8px 14px}
.paytot{font-size:22px;margin:6px 0}
.paycoins{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.coinb{width:78px;height:78px;border-radius:50%;border:5px solid var(--ink);background:radial-gradient(circle at 35% 30%,#ffe680,#ffc928 60%,#d99a00);font-family:var(--read);font-weight:bold;font-size:30px;box-shadow:0 5px 0 var(--ink);cursor:pointer;touch-action:manipulation}
.coinb:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
@media (pointer:coarse){.w3-dlg{bottom:calc(20px + env(safe-area-inset-bottom))}}

/* bouwplaats */
.bld{position:fixed;inset:0;z-index:40;background:#9fdcff;touch-action:none;user-select:none;-webkit-user-select:none}
.bld canvas{width:100%;height:100%;display:block}
.bld-top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:10px;align-items:flex-start}
.bld-q{flex:1;text-align:center;font-family:var(--read);font-weight:bold;font-size:20px;background:rgba(255,255,255,.93);border:4px solid var(--ink);border-radius:10px;padding:8px 10px;box-shadow:0 4px 0 var(--ink)}
.bld-q small{font-weight:normal}
.bld-count{position:absolute;top:calc(74px + env(safe-area-inset-top));left:10px;background:#ffd23f;border:4px solid var(--ink);border-radius:10px;padding:5px 12px;font-size:17px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.bld-tools{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;align-items:center;padding:0 8px}
.bld .pal{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.9);border:4px solid var(--ink);border-radius:12px;padding:8px}
.bld .sw{width:44px;height:44px;border:4px solid var(--ink);border-radius:8px;cursor:pointer;padding:0;font-size:20px}
.bld .sw.on{outline:4px solid #ffd23f;transform:scale(1.12)}
.bld .sw.more{background:#fff}
.bld .tl{display:flex;gap:10px}
.bld .tl .btn{padding:8px 16px;font-size:18px}

.carmeta{display:flex;justify-content:space-between;font-size:12px;margin:2px 4px 0;font-family:var(--read)}
.carmeta span:last-child{letter-spacing:-1px;color:#e8590c}
/* showroom */
.cg-menu{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.show{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:50vh;overflow:auto;margin:8px 0}
.show .item{padding:6px}.show .item .pv{height:84px;padding-top:0}
.show .item .btn{font-size:14px;padding:6px 8px}

/* klok op het scherm + klokspel */
.w3-clock{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:104px;background:rgba(255,255,255,.9);border:4px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:4px 4px 2px;text-align:center;cursor:pointer}
.w3-clock svg{display:block;margin:0 auto}
.w3-clock .dg{font-family:var(--read);font-weight:bold;font-size:20px;line-height:1.1}
@media (pointer:coarse){.w3-clock{bottom:calc(26px + env(safe-area-inset-bottom))}}
.cg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:10px}
.w3d .cg{position:absolute}
.cg-card{background:#fff;border:5px solid var(--ink);border-radius:14px;box-shadow:0 8px 0 var(--ink);padding:14px;width:min(640px,98vw);max-height:96vh;overflow:auto;text-align:center}
.cg-top{display:flex;justify-content:space-between;align-items:center;font-size:20px}
.cg-lead{font-size:18px;margin:8px 0}
.cg-prompt{font-family:var(--read);font-size:22px;margin:8px 0}
.cg-prompt small{font-weight:normal;color:#555}
.cg-hear{border:3px solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;font-size:18px}
.cg-visual{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:8px;margin:6px 0}
.cg-two{display:flex;align-items:center;gap:10px;font-size:28px}
.cg-opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.cg-opt{font-family:var(--read);font-size:26px;background:#fff;border:4px solid var(--ink);border-radius:10px;box-shadow:0 5px 0 var(--ink);padding:10px 18px;cursor:pointer;min-width:110px}
.cg-opt.clk{padding:4px}
.cg-opt:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.cg-opt.good{background:#b9f6ca}.cg-opt.bad{background:#ffc9c9;animation:shake .4s;opacity:.7}
.cg-fb{min-height:34px;font-size:19px;margin:6px 0}.cg-fb.good{color:#0b7a27}.cg-fb.warn{color:#b45309}
.cg-dots{display:flex;gap:6px;justify-content:center;margin:6px 0}
.cg-dots i{width:16px;height:16px;border:3px solid var(--ink);background:#fff;border-radius:3px}.cg-dots i.d{background:var(--green)}.cg-dots i.n{background:var(--yellow)}
.cg-digital{font-family:var(--read);font-weight:bold;font-size:38px}
.cg-ctl{display:flex;gap:24px;justify-content:center;margin:8px 0}
.cg-ctl .btn{padding:8px 18px;font-size:22px}
.cg-month{width:100%}.cg-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px}
.cg-grid .hd{font-style:normal;font-size:14px;font-weight:bold}
.cg-day{font-family:var(--read);font-weight:bold;font-size:18px;border:3px solid var(--ink);border-radius:6px;background:#fff;padding:8px 0;cursor:pointer}
.cg-day.today{background:var(--yellow)}.cg-day.good{background:#b9f6ca}.cg-day.bad{background:#ffc9c9}

.ptimer{background:#e7f5ff;border:3px solid var(--ink);border-radius:6px;padding:4px 8px;font-size:15px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.ptimer.low{background:#ffc9c9;animation:pulse 1s infinite}
#timeup{position:fixed;inset:0;z-index:200;background:linear-gradient(#1c2a5a,#4b3b8f);display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:#fff}
.tu-card h1{font-size:34px;margin:10px 0;text-shadow:3px 3px 0 #0006}.tu-card p{font-size:22px}.tu-ic{font-size:90px;animation:bob 2s infinite}.tu-sm{font-size:14px!important;opacity:.8;margin-top:30px}
.routine{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.rt{display:flex;gap:10px;align-items:center;background:#fff;border:4px solid var(--ink);border-radius:10px;padding:8px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.rt.next{background:#fff3c4;outline:4px solid var(--yellow)}
.cg-grid.cal .cal-day{position:relative;font-family:var(--read);font-weight:bold;font-size:18px;border:3px solid var(--ink);border-radius:6px;background:#fff;padding:12px 0;cursor:pointer}
.cal-day.today{background:var(--yellow)}.cal-day.played{background:#e3f9e5}.cal-day span{position:absolute;right:2px;top:-2px;font-size:12px}
.wk>div{padding:6px 8px;border-bottom:2px solid #eee;cursor:pointer;text-align:left}.wk>div.tod{background:#fff3c4}

.syncbox{background:#eef7ff;border:3px solid var(--ink);border-radius:8px;padding:10px;margin:10px 0;font-size:15px}
.synccode{font-family:var(--read);font-size:26px;font-weight:bold;letter-spacing:.08em;background:#fff3c4;border:3px solid var(--ink);border-radius:8px;padding:6px;text-align:center;margin:6px 0;user-select:text}

.modal input[type=number]{width:72px;flex:none}

.loginbox{max-width:420px;margin:12px auto;text-align:center}
.loginbox input{display:block;width:100%;font-size:20px;padding:12px;margin:8px 0;border:4px solid var(--ink);border-radius:8px;font-family:var(--read)}
.loginbox .or{margin:10px 0;font-size:15px;opacity:.7}
.lmsg{min-height:24px;margin-top:8px;font-size:16px;color:#b45309}

/* ===== telefoon (staand en liggend): compacte indeling van het rijspel ===== */
@media (max-width:700px),(max-height:520px){
  .w3-top{gap:6px;flex-wrap:wrap;left:8px;right:8px;top:calc(6px + env(safe-area-inset-top))}
  .w3-top .iconbtn{width:38px;height:38px;font-size:18px;border-width:3px}
  .w3-info{flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-end;align-items:center;margin-left:auto;max-width:62vw}
  .w3-info span{font-size:13px;padding:2px 7px;border-width:2px;box-shadow:0 2px 0 var(--ink)}
  .w3-q{order:3;flex-basis:100%;font-size:15px;padding:4px 40px 4px 8px;min-height:34px;border-width:3px}
  .w3-q .word.sm{font-size:19px!important}
  .w3-x{width:28px;height:28px;right:4px;top:3px;font-size:13px}
  .w3-panel{left:8px;top:calc(52px + env(safe-area-inset-top));width:auto;max-width:60vw;font-size:12px;border-width:3px;box-shadow:0 3px 0 var(--ink);max-height:48vh}
  .w3-panel .ph{padding:4px 8px;font-size:12px;white-space:nowrap}
  .w3-panel.open{width:70vw;max-width:70vw}
  .w3d canvas.w3-map{width:84px;height:84px;top:calc(52px + env(safe-area-inset-top));right:8px;border-width:3px;border-radius:6px}
  .w3-cmp{top:calc(52px + env(safe-area-inset-top));width:44px;height:44px;margin-left:-22px;border-width:3px}
  .w3-cmp i{font-size:22px}
  .w3-joy{width:118px;height:118px;left:calc(14px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));border-width:4px}
  .w3-joy i{width:52px;height:52px;border-width:4px}
  .w3-joy::before,.w3-joy::after{font-size:14px}
  .w3-clock{width:78px;right:calc(8px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));padding:3px 3px 1px;border-width:3px;border-radius:10px}
  .w3-clock svg{width:58px;height:58px}
  .w3-clock .dg{font-size:15px}
  .w3-keys{display:none}
  .w3-hint{font-size:16px!important;padding:6px 12px;border-width:3px;max-width:86vw}
  .w3-dlg{width:96vw!important;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));padding:8px;gap:8px;border-width:4px;max-height:58vh!important}
  .dl-av{font-size:38px}.dl-text{font-size:16px;margin:2px 0 6px}
  .dl-btns .btn{font-size:15px;padding:6px 10px}
  .dl-extra .cg-digital{font-size:26px}
  .show{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));max-height:32vh;gap:6px}
  .show .item .pv{height:60px}.show .item .pv img{width:64px;height:64px}
  .show .item .btn{font-size:12px;padding:4px 6px}
  .coinb{width:62px;height:62px;font-size:24px}
  .paytot{font-size:18px}
  .cg-card{padding:8px;border-width:4px}
  .cg-prompt{font-size:18px}
  .cg-opt{font-size:20px;padding:8px 12px;min-width:84px}
  .cg-visual svg{max-width:170px;max-height:170px}
  .floaty{font-size:34px}
  .toast{font-size:15px;padding:6px 12px}
}
@media (max-height:520px) and (orientation:landscape){
  .w3-joy{width:104px;height:104px}
  .w3-panel{top:calc(48px + env(safe-area-inset-top))}
  .w3-dlg{max-height:70vh!important;width:min(560px,70vw)!important}
}
@media (max-width:700px),(max-height:520px){
  .cg-menu{gap:6px;margin:6px 0}
  .cg-menu .btn{padding:8px 10px;font-size:17px}
  .cg-top{font-size:17px}
  .cg-lead{font-size:15px;margin:4px 0}
}

.greet{max-width:560px;margin:0 auto}
.greet p{font-family:var(--read);font-weight:bold;font-size:28px;line-height:1.25;margin:10px 0;padding:8px 12px;border:4px solid transparent;border-radius:10px;opacity:.4;transition:all .3s}
.greet p.now{opacity:1;background:#fff3c4;border-color:var(--ink);box-shadow:0 5px 0 var(--ink);transform:scale(1.03)}
.greet p.said{opacity:.75}
@media (max-width:700px){.greet p{font-size:22px}}

/* app op het beginscherm: marges voor statusbalk/notch, geen uittrekken-om-te-verversen */
html,body{overscroll-behavior-y:none;-webkit-touch-callout:none;touch-action:manipulation}
#hud{padding-top:calc(8px + env(safe-area-inset-top));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
#app{padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
.pwabtn{margin-top:8px}
.steps{text-align:left;font-family:var(--read);font-size:18px;line-height:1.5;padding-left:22px;margin:10px 0}
.steps li{margin:8px 0}
.steps b{background:#fff3c4;padding:0 4px;border-radius:4px}