@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:#f3dfb8;font-family:Nunito,system-ui,sans-serif;color:#4a2410;touch-action:manipulation;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:#fdf0c0;overflow:hidden}.overlay.hidden{display:none}.overlay.start-blur{background:#3a26148c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.start-logo{width:clamp(300px,44vw,560px);max-width:92vw;display:block;margin:0 auto 22px;filter:drop-shadow(0 10px 24px rgba(30,15,5,.45))}.overlay.start-blur .title{font-size:clamp(54px,11vw,96px);margin-bottom:10px;background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff7e6;filter:none;text-shadow:3px 0 0 #4a2c14,-3px 0 0 #4a2c14,0 3px 0 #4a2c14,0 -3px 0 #4a2c14,2px 2px 0 #4a2c14,-2px 2px 0 #4a2c14,2px -2px 0 #4a2c14,-2px -2px 0 #4a2c14,0 8px 18px rgba(60,30,5,.4)}.overlay.start-blur .record-line{font-family:Chewy,sans-serif;font-weight:400;font-size:30px;margin:0 0 20px;text-shadow:2px 0 0 #4a2c14,-2px 0 0 #4a2c14,0 2px 0 #4a2c14,0 -2px 0 #4a2c14,0 5px 12px rgba(60,30,5,.35)}.title{font-size:clamp(54px,11vw,96px);margin-bottom:10px}.startvlak .btn{margin-top:40px;font-size:34px;padding:18px 60px;border-radius:22px}.ovboek{position:absolute;top:-70px;opacity:.5;animation:boekval linear infinite;pointer-events:none}@keyframes boekval{0%{transform:translateY(-10vh) rotate(-12deg)}to{transform:translateY(115vh) rotate(348deg)}}.startvlak{position:relative;text-align:center;padding:12px;max-height:100%;overflow-y:auto}.start-hero{width:clamp(150px,27vmin,230px);display:block;margin:0 auto 6px;position:relative;z-index:2;filter:drop-shadow(0 16px 26px rgba(80,40,5,.3));animation:zweef 3.4s ease-in-out infinite alternate}@keyframes zweef{0%{transform:translateY(-8px) rotate(-2.5deg)}to{transform:translateY(10px) rotate(2.5deg)}}.title{font-family:Chewy,sans-serif;font-size:clamp(46px,10.5vw,84px);line-height:1.12;letter-spacing:1px;background:linear-gradient(180deg,#fff7e6,#ffe2ae 55%,#ffc97e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(110,50,10,.5));margin-bottom:4px}.record-line{font-weight:800;color:#fff3d0;font-size:18px;margin:6px 0 20px;text-shadow:0 2px 0 rgba(110,50,10,.35)}.record-line.new{color:#b8ffcb;animation:pop .5s ease}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}to{transform:scale(1)}}.eind-kaart{position:relative;width:min(94%,440px);background:linear-gradient(180deg,#fff9ec,#ffedc8);border:3px solid #8a5228;border-radius:26px;box-shadow:0 10px #5a2d0c59,0 26px 60px #461e0559;padding:24px 22px 28px;text-align:center}.eind-kaart .title{font-size:clamp(36px,8vw,54px);background:linear-gradient(180deg,#ff9a3c,#e05a1a 60%,#a83c10);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 rgba(90,40,5,.3))}.eind-kaart .subtitle{font-weight:500;color:#8a5c33;font-size:15px}.big-score{font-family:Chewy,sans-serif;font-size:56px;color:#e05a1a;line-height:1.2;text-shadow:0 2px 0 rgba(120,55,10,.2)}.eind-kaart .record-line{color:#b06a10;text-shadow:none;margin-bottom:16px}.eind-kaart .record-line.new{color:#1e8a3c}.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;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}.hint-run{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:15;background:#4a2410d9;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}}