*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;background:#79c4ef;font-family:"Baloo 2",Trebuchet MS,Comic Sans MS,system-ui,sans-serif}.ob-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--ob-page-bg: linear-gradient(180deg, #6db9e8 0%, #a5dcf7 55%, #d6f1ff 100%);--ob-text: #123a57}.ob-root [hidden]{display:none!important}.ob-root canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none}.ob-hud{position:absolute;top:calc(10px + var(--sat));left:calc(12px + var(--sal));display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 200px - var(--sal) - var(--sar));z-index:25;pointer-events:none}.ob-pill{background:#0a23378c;color:#fff;font-weight:700;font-size:clamp(14px,2.4vh,20px);padding:6px 14px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}.ob-corners{position:absolute;top:calc(10px + var(--sat));right:calc(12px + var(--sar));display:flex;gap:10px;z-index:50}.ob-corner{width:clamp(44px,6.5vh,56px);height:clamp(44px,6.5vh,56px);border-radius:50%;border:none;background:linear-gradient(180deg,#fff,#d9efff);box-shadow:0 4px #18527a66,inset 0 -3px #58c6f273,inset 0 2px #ffffffe6;color:#14608f;font-size:clamp(19px,3vh,26px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .08s,box-shadow .08s}.ob-corner:active{transform:translateY(3px);box-shadow:0 1px #18527a66,inset 0 -2px #58c6f273}.ob-corner svg{width:58%;height:58%;display:block}.ob-skip{position:absolute;bottom:calc(18px + var(--sab));left:50%;transform:translate(-50%);z-index:26;border:none;border-radius:999px;padding:12px 22px;font-family:inherit;font-size:clamp(15px,2.4vh,19px);font-weight:800;color:#5a3d00;background:#ffd24d;box-shadow:0 4px #c99a1b;cursor:pointer;animation:ob-pop .3s ease-out}.ob-skip:active{transform:translate(-50%) scale(.94)}.ob-touch{position:absolute;top:0;right:0;bottom:0;left:0;z-index:24;pointer-events:none}.ob-stick{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:#ffffff29;border:2px solid rgba(255,255,255,.4)}.ob-stick__knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#ffffff8c;transform:translate(-50%,-50%)}.ob-jump{position:absolute;right:calc(22px + var(--sar));bottom:calc(26px + var(--sab));width:clamp(72px,12vh,96px);height:clamp(72px,12vh,96px);border-radius:50%;border:none;background:#ffd24de6;box-shadow:0 5px #a07814b3;color:#5a3d00;font-size:clamp(30px,5vh,42px);font-weight:900;pointer-events:auto;touch-action:none}.ob-jump.ingedrukt{transform:scale(.92);box-shadow:0 2px #a07814b3}.ob-toast{position:absolute;top:calc(64px + var(--sat));left:50%;transform:translate(-50%);z-index:27;background:#0a2337bf;color:#fff;font-weight:800;font-size:clamp(14px,2.4vh,19px);padding:8px 18px;border-radius:999px;pointer-events:none;animation:ob-pop .25s ease-out}.ob-fade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:28;background:#08131d;opacity:0;pointer-events:none;transition:opacity .08s linear}.ob-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:var(--ob-page-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.8vh,18px);text-align:center;padding:clamp(10px,2.5vh,28px);color:var(--ob-text);overflow:hidden auto}.ob-overlay h1{margin:0;font-size:clamp(30px,7vh,58px);font-weight:900;letter-spacing:.01em;text-shadow:0 3px 0 rgba(255,255,255,.55)}.ob-overlay--home{background:none;justify-content:flex-start;padding-top:clamp(20px,6vh,56px);padding-bottom:clamp(18px,5vh,44px)}.ob-home__spacer{flex:1}.ob-overlay--home h1{font-size:clamp(46px,12vh,96px);color:#fff;text-shadow:3px 0 0 #14608f,-3px 0 0 #14608f,0 3px 0 #14608f,0 -3px 0 #14608f,2px 2px 0 #14608f,-2px 2px 0 #14608f,2px -2px 0 #14608f,-2px -2px 0 #14608f,0 8px 0 rgba(15,61,92,.85),0 14px 22px rgba(10,40,70,.4);animation:ob-logo-float 3.4s ease-in-out infinite}.ob-overlay--home .ob-sub{color:#fff;opacity:1;font-weight:800;text-shadow:0 2px 0 rgba(20,96,143,.9),0 4px 10px rgba(10,40,70,.45)}.ob-overlay--home .ob-best{background:#ffffffe6;padding:6px 18px;border-radius:999px;box-shadow:0 3px #18527a4d}.ob-overlay--home .ob-link{color:#fff;opacity:.92;text-shadow:0 2px 4px rgba(10,40,70,.6)}.ob-home__modes{display:flex;gap:clamp(10px,2vw,18px);justify-content:center}.ob-home__modes .ob-btn{width:clamp(150px,34vw,250px);padding-left:0;padding-right:0}.ob-verder{margin:0;font-size:clamp(13px,2.2vh,17px);font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(20,96,143,.9),0 4px 10px rgba(10,40,70,.45)}@keyframes ob-logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ob-overlay--end,.ob-overlay--levels,.ob-overlay--shop,.ob-overlay--set{background:none}.ob-overlay--end h1,.ob-overlay--levels h1,.ob-overlay--shop h1,.ob-overlay--set h1{font-size:clamp(34px,8.5vh,68px);color:#fff;text-shadow:3px 0 0 #14608f,-3px 0 0 #14608f,0 3px 0 #14608f,0 -3px 0 #14608f,2px 2px 0 #14608f,-2px 2px 0 #14608f,2px -2px 0 #14608f,-2px -2px 0 #14608f,0 7px 0 rgba(15,61,92,.85),0 12px 18px rgba(10,40,70,.4)}.ob-overlay--end .ob-end__stats{background:#ffffffeb;color:#123a57;padding:8px 22px;border-radius:999px;box-shadow:0 3px #18527a4d}.ob-overlay--end .ob-link,.ob-overlay--levels .ob-link,.ob-overlay--shop .ob-link,.ob-overlay--set .ob-link{color:#fff;opacity:.92;text-shadow:0 2px 4px rgba(10,40,70,.6)}.ob-paneel--breed{width:min(92vw,640px)}.ob-btn.ob-btn--shop{background:#ffd24d;box-shadow:0 5px #c99a1b;color:#5a3d00;padding-top:clamp(8px,1.4vh,12px);padding-bottom:clamp(8px,1.4vh,12px);font-size:clamp(15px,2.4vh,20px)}.ob-lvl__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,.9vw,8px);width:100%}@media (max-width: 640px){.ob-lvl__grid{grid-template-columns:repeat(5,1fr)}}.ob-lvl{aspect-ratio:1;border:none;border-radius:10px;font-family:inherit;font-weight:900;font-size:clamp(12px,2vh,17px);color:#fff;cursor:pointer;box-shadow:0 3px #081e3273;transition:transform .08s}.ob-lvl:active{transform:translateY(2px)}.ob-lvl--w1{background:#6cc44e}.ob-lvl--w2{background:#f2925c}.ob-lvl--w3{background:#7a6ef3}.ob-lvl--w4{background:#58b6e8}.ob-lvl--w5{background:#c05040}.ob-lvl--slot,.ob-lvl--slot:active{background:#ffffff24;color:#ffffffbf;cursor:default;box-shadow:none;transform:none;font-size:clamp(10px,1.6vh,14px)}.ob-shop__saldo{margin:0;background:#ffffffeb;color:#123a57;font-weight:900;font-size:clamp(16px,2.8vh,22px);padding:6px 20px;border-radius:999px;box-shadow:0 3px #18527a4d}.ob-shop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.5vw,14px);width:100%}@media (max-width: 480px){.ob-shop__grid{grid-template-columns:repeat(2,1fr)}}.ob-skin{display:flex;flex-direction:column;align-items:center;gap:5px;background:#ffffff24;border:3px solid transparent;border-radius:14px;padding:clamp(8px,1.5vh,14px);color:#fff;font-family:inherit;font-weight:800;font-size:clamp(12px,2vh,15px);cursor:pointer;transition:transform .08s}.ob-skin:active{transform:scale(.96)}.ob-skin--actief{border-color:#ffd24d;background:#ffffff38}.ob-skin__prev{display:flex;flex-direction:column;align-items:center}.ob-skin__kop{width:26px;height:20px;border-radius:5px;box-shadow:0 1px #081e3266}.ob-skin__lijf{width:32px;height:22px;margin-top:2px;border-radius:6px;box-shadow:0 2px #081e3266}.ob-skin__prijs{font-size:clamp(11px,1.8vh,13px);opacity:.95;color:#ffd24d}.ob-end__paneel{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,18px);background:#0a284294;border-radius:28px;padding:clamp(18px,3.5vh,32px) clamp(22px,4.5vw,44px);box-shadow:0 10px 30px #081e3259,inset 0 1px #ffffff2e}.ob-end__rij{display:flex;gap:clamp(10px,2vw,18px);justify-content:center}.ob-end__rij .ob-btn{width:clamp(150px,34vw,240px);padding-left:0;padding-right:0}.ob-btn.ob-btn--menu2,.ob-btn.ob-btn--menupauze{background:#3ea7e8;box-shadow:0 5px #1f6fa3}.ob-sub{margin:0;font-size:clamp(15px,2.6vh,21px);font-weight:600;opacity:.85}.ob-best{margin:0;font-size:clamp(14px,2.3vh,18px);font-weight:800;color:#0b6e3f}.ob-art{max-width:min(62vw,340px);max-height:32vh;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(10,40,70,.25))}.ob-btn{border:none;border-radius:999px;padding:clamp(12px,2.2vh,18px) clamp(30px,6vw,52px);font-family:inherit;font-size:clamp(18px,3.2vh,26px);font-weight:900;color:#fff;background:#ff8a3c;box-shadow:0 5px #c95f14;cursor:pointer;transition:transform .08s}.ob-btn:active{transform:scale(.95)}.ob-btn[disabled]{opacity:.6;cursor:default}.ob-btn--submit{background:#2fa84f;box-shadow:0 5px #1d7a34}.ob-btn--afstand{background:#3ea7e8;box-shadow:0 5px #1f6fa3}.ob-pill--pop{animation:ob-pill-pop .3s ease-out}.ob-munt{width:1em;height:1em;display:inline-block;vertical-align:-.12em}.ob-btn.ob-btn--reset{background:#e5534b;box-shadow:0 5px #a83029}@keyframes ob-pill-pop{0%{scale:1}40%{scale:1.3}to{scale:1}}.ob-link{border:none;background:none;font-family:inherit;font-size:clamp(13px,2.2vh,17px);font-weight:700;color:var(--ob-text);opacity:.7;text-decoration:underline;cursor:pointer}.ob-end__stats{margin:0;font-size:clamp(16px,2.8vh,22px);font-weight:600}.ob-end__record{margin:0;font-size:clamp(16px,2.8vh,22px);font-weight:900;color:#c77800;animation:ob-pop .4s ease-out}.ob-confetti{position:absolute;top:-14px;width:10px;height:14px;z-index:45;border-radius:2px;pointer-events:none;animation:ob-confetti-val linear forwards}@keyframes ob-confetti-val{0%{transform:translateY(-10px) rotate(0)}to{transform:translateY(110vh) rotate(660deg)}}@keyframes ob-pop{0%{scale:.6;opacity:0}to{scale:1;opacity:1}}