@font-face{font-family:Chewy;src:url(../fonts/chewy.woff2) format("woff2");font-display:swap}@font-face{font-family:Nunito;src:url(../fonts/nunito.woff2) format("woff2");font-weight:400 900;font-display:swap}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#bfe0f2;font-family:Nunito,system-ui,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}#app{height:100%}canvas#game{position:fixed;top:0;right:0;bottom:0;left:0;display:block}.sysknoppen{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));z-index:30;display:flex;gap:8px}.sysknoppen button{width:clamp(42px,6.4vmin,56px);height:clamp(42px,6.4vmin,56px);border:none;border-radius:14px;cursor:pointer;background:linear-gradient(180deg,#2f6fb5,#1d4d85);box-shadow:0 4px #123058,0 6px 14px #00000059,inset 0 1px #ffffff4d;display:flex;align-items:center;justify-content:center;padding:0}.sysknoppen button:active{transform:translateY(3px);box-shadow:0 1px #123058}.sysknoppen button[hidden]{display:none}.sysknoppen svg{width:58%;height:58%;display:block}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:#142d508c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}.overlay.hidden{display:none}.startvlak{position:relative;text-align:center;padding:12px;max-height:100%;overflow-y:auto}.start-logo{width:clamp(300px,46vw,560px);max-width:92vw;display:block;margin:0 auto 8px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}.start-hero{width:clamp(130px,22vh,210px);display:block;margin:0 auto 6px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));animation:bob 2.2s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.title{font-family:Chewy,sans-serif;font-size:clamp(40px,8.5vw,72px);line-height:1.1;letter-spacing:1px;color:#fff;text-shadow:3px 0 0 #123058,-3px 0 0 #123058,0 3px 0 #123058,0 -3px 0 #123058,2px 2px 0 #123058,-2px 2px 0 #123058,2px -2px 0 #123058,-2px -2px 0 #123058,0 8px 20px rgba(0,0,0,.45);margin-bottom:4px}.score-line{font-family:Chewy,sans-serif;font-size:clamp(56px,12vw,104px);line-height:1;color:#fff;text-shadow:0 4px 0 #123058,0 10px 24px rgba(0,0,0,.45);margin:6px 0 2px}.sub-line{font-family:Nunito,sans-serif;font-weight:600;font-size:clamp(18px,3.2vw,24px);color:#e8f4ff;text-shadow:0 2px 0 #123058;margin:0 0 6px}.record-line{font-family:Chewy,sans-serif;font-weight:400;color:#ffd76e;font-size:clamp(22px,4vw,30px);margin:0 0 18px;text-shadow:2px 0 0 #123058,-2px 0 0 #123058,0 2px 0 #123058,0 -2px 0 #123058,0 5px 14px rgba(0,0,0,.4)}.record-line.new{color:#9dffb8;animation:pop .5s ease}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}to{transform:scale(1)}}.jumps{display:flex;gap:10px;justify-content:center;margin:4px 0 14px;flex-wrap:wrap}.jump-chip{font-family:Chewy,sans-serif;font-size:clamp(18px,3vw,24px);background:#ffffff2e;border:2px solid rgba(255,255,255,.5);border-radius:14px;padding:6px 14px;color:#fff;text-shadow:0 2px 0 #123058}.jump-chip.fall{opacity:.7}.btn{font-family:Chewy,sans-serif;font-size:clamp(26px,4.5vw,34px);letter-spacing:1px;border:none;cursor:pointer;color:#123058;background:linear-gradient(180deg,#ffd76e,#f2a93b);padding:16px 56px;border-radius:22px;box-shadow:0 8px #a06210,0 16px 30px #00000059,inset 0 2px #fff5dc99;transition:transform .06s,box-shadow .06s;margin-top:6px;text-shadow:0 1px 0 rgba(255,240,200,.4)}.btn:active{transform:translateY(5px);box-shadow:0 3px #a06210}.btn-submit{display:block;margin:16px auto 0;color:#fff;background:linear-gradient(180deg,#4f9be6,#2a66b8);box-shadow:0 8px #163f78,0 16px 30px #00000059,inset 0 2px #dcebff80;text-shadow:0 2px 0 rgba(20,50,100,.4)}.btn-submit:active{transform:translateY(5px);box-shadow:0 3px #163f78}