@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:#171019;font-family:Nunito,system-ui,sans-serif;color:#f5e9d6;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,#8f2b38,#641722);box-shadow:0 4px #3d0c14,0 6px 14px #00000080,inset 0 1px #ffdcb44d;display:flex;align-items:center;justify-content:center;padding:0}.sysknoppen button:active{transform:translateY(3px);box-shadow:0 1px #3d0c14}.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:#140c1699;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,580px);max-width:92vw;display:block;margin:0 auto 26px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}.title{font-family:Chewy,sans-serif;font-size:clamp(48px,10vw,84px);line-height:1.12;letter-spacing:1px;color:#ffe9b0;text-shadow:3px 0 0 #3d1030,-3px 0 0 #3d1030,0 3px 0 #3d1030,0 -3px 0 #3d1030,2px 2px 0 #3d1030,-2px 2px 0 #3d1030,2px -2px 0 #3d1030,-2px -2px 0 #3d1030,0 8px 20px rgba(0,0,0,.6);margin-bottom:6px}.record-line{font-family:Chewy,sans-serif;font-weight:400;color:#ffd76e;font-size:30px;margin:0 0 20px;text-shadow:2px 0 0 #3d1030,-2px 0 0 #3d1030,0 2px 0 #3d1030,0 -2px 0 #3d1030,0 5px 14px rgba(0,0,0,.5)}.record-line.new{color:#9dffb8;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:34px;letter-spacing:1px;border:none;cursor:pointer;color:#4a1608;background:linear-gradient(180deg,#ffd76e,#f2a93b);padding:18px 60px;border-radius:22px;box-shadow:0 8px #a06210,0 16px 30px #00000080,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,#9c6cff,#6b3fd6);box-shadow:0 8px #4a2a99,0 16px 30px #00000080,inset 0 2px #e6dcff80;text-shadow:0 2px 0 rgba(60,30,120,.4)}.btn-submit:active{transform:translateY(5px);box-shadow:0 3px #4a2a99}.hint-run{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:15;background:#140c16d9;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 5s ease forwards}@keyframes hintfade{0%{opacity:0;transform:translate(-50%) translateY(12px)}12%{opacity:1;transform:translate(-50%) translateY(0)}82%{opacity:1}to{opacity:0}}