@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:#e8862f;font-family:Nunito,system-ui,sans-serif;color:#4a2410;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,#8a5a33,#6b3f1f);box-shadow:0 4px #4a2a12,0 6px 14px #3c190559,inset 0 1px #ffebc859;display:flex;align-items:center;justify-content:center;padding:0}.sysknoppen button:active{transform:translateY(3px);box-shadow:0 1px #4a2a12}.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:radial-gradient(130% 90% at 50% -10%,#ffdf9e,#ffdf9e00 55%),linear-gradient(180deg,#f5a04a,#e07c2e 55%,#b85a22);overflow:hidden}.overlay.hidden{display:none}.card{position:relative;width:min(94%,460px);max-height:calc(100% - 12px);overflow-y:auto;background:linear-gradient(180deg,#fff7e6,#ffe9c4);border:3px solid #8a5228;border-radius:26px;box-shadow:0 10px #5a2d0c59,0 26px 60px #461e0559;padding:20px 22px 26px;text-align:center}.startvlak{position:relative;text-align:center;padding:12px;max-height:100%;overflow-y:auto}.start-blad{width:clamp(170px,36vmin,290px);display:block;margin:0 auto 10px;filter:drop-shadow(0 16px 26px rgba(90,40,5,.35));animation:zweefblad 3.6s ease-in-out infinite alternate}@keyframes zweefblad{0%{transform:translateY(-12px) rotate(-7deg)}to{transform:translateY(14px) rotate(8deg)}}.startvlak .title{font-size:clamp(52px,11vw,88px);background:linear-gradient(180deg,#fff7e6,#ffe2ae 55%,#ffc97e);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 0 rgba(122,52,12,.45))}.startvlak .subtitle{color:#ffedd0;font-size:16px}.startvlak .record-line{color:#ffe089;font-size:18px;margin-bottom:20px}.title{font-family:Chewy,sans-serif;font-size:clamp(44px,10vw,68px);line-height:1.12;letter-spacing:1px;background:linear-gradient(180deg,#ff9a3c,#e05a1a 60%,#a83c10);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(90,40,5,.3));margin-bottom:4px}.subtitle{font-weight:500;color:#8a5c33;margin-bottom:14px;font-size:15px}.big-score{font-family:Chewy,sans-serif;font-size:52px;color:#e05a1a;line-height:1.2;text-shadow:0 2px 0 rgba(120,55,10,.2)}.record-line{font-weight:800;color:#b06a10;margin:8px 0 16px;font-size:17px}.record-line.new{color:#1e8a3c;animation:pop .5s ease}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}to{transform:scale(1)}}.btn{font-family:Chewy,sans-serif;font-size:26px;letter-spacing:1px;border:none;cursor:pointer;color:#fff7e6;background:linear-gradient(180deg,#ff9d3f,#e0641e);padding:14px 38px;border-radius:18px;box-shadow:0 7px #a04212,0 14px 24px #5a28054d,inset 0 2px #fff0d280;transition:transform .06s,box-shadow .06s;margin-top:4px;text-shadow:0 2px 0 rgba(120,50,8,.35)}.btn:active{transform:translateY(5px);box-shadow:0 2px #a04212}.btn-submit{display:block;margin:14px auto 0;font-size:20px;padding:11px 26px;background:linear-gradient(180deg,#9c6cff,#6b3fd6);box-shadow:0 7px #4a2a99,0 14px 24px #28145a4d,inset 0 2px #e6dcff80}.btn-submit:active{transform:translateY(5px);box-shadow:0 2px #4a2a99}.ovblad{position:absolute;top:-60px;opacity:.85;animation:dwarrel linear infinite;pointer-events:none}@keyframes dwarrel{0%{transform:translateY(-8vh) rotate(0)}to{transform:translateY(115vh) rotate(340deg)}}.hint-run{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:15;background:#46230ad1;color:#ffe9c4;font-weight:500;font-size:clamp(14px,2.4vmin,18px);padding:10px 20px;border-radius:999px;white-space:nowrap;pointer-events:none;animation:hintfade 4.5s ease forwards}@keyframes hintfade{0%{opacity:0;transform:translate(-50%) translateY(12px)}12%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1}to{opacity:0}}