@font-face{font-family:Fredoka;src:url(../fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#0e2415;font-family:Fredoka,Trebuchet MS,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;top:0;right:0;bottom:0;left:0}#spel{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.verborgen{display:none!important}#sysknoppen{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:10px;z-index:30}#sysknoppen button{width:clamp(44px,7.5vh,78px);height:clamp(44px,7.5vh,78px);border:none;padding:0;background:none;cursor:pointer;display:grid;place-items:center;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}#sysknoppen button img{width:100%;height:100%;display:block;-webkit-user-drag:none}#sysknoppen button:active{transform:translateY(2px) scale(.96)}#dpad{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:168px;height:168px;display:none;z-index:25}#dpad.zichtbaar{display:block}#dpad button{position:absolute;width:54px;height:54px;border-radius:14px;border:3px solid rgba(30,66,24,.9);background:#408234d9;color:#fff;font-size:22px;cursor:pointer}#dpad .dp-up{left:57px;top:0}#dpad .dp-down{left:57px;bottom:0}#dpad .dp-left{left:0;top:57px}#dpad .dp-right{right:0;top:57px}#dpad button:active{background:#ffe082e6;color:#2e4a1c}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:#102b18;display:grid;place-items:center}#ovl-kaart{width:min(560px,88vw);background:#f7ecd7;border:6px solid #2e7d32;border-radius:24px;padding:clamp(20px,4vmin,40px);text-align:center;box-shadow:0 12px 40px #00000080}#ovl-titel{font-size:clamp(30px,6vmin,48px);font-weight:700;color:#2e7d32;margin-bottom:12px}#ovl-tekst{font-size:clamp(18px,3vmin,24px);color:#3a2c1c;margin-bottom:22px;line-height:1.4}#ovl-knoppen{display:flex;flex-direction:column;gap:12px;align-items:center}.knop{font-family:inherit;font-weight:700;border-radius:18px;cursor:pointer;padding:14px 34px;font-size:clamp(18px,3vmin,26px);letter-spacing:.5px}.knop-groot{background:linear-gradient(#c98b45,#9c661f);border:3px solid #4a2f10;color:#ffe082;text-shadow:0 2px 0 rgba(74,47,16,.8);box-shadow:0 0 0 4px #3e7a34,0 5px #26471f}.knop-groot:active{transform:translateY(3px);box-shadow:0 0 0 4px #3e7a34,0 2px #26471f}.knop-stil{background:linear-gradient(#8a6a3e,#6e5230);border:3px solid #3c2a12;color:#f0dcb0;text-shadow:0 2px 0 rgba(60,42,18,.8);box-shadow:0 0 0 4px #33552c,0 4px #203a1a}.knop-stil:active{transform:translateY(2px);box-shadow:0 0 0 4px #33552c,0 1px #203a1a}#startscherm{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:radial-gradient(circle at 50% 30%,#2f6b3a,#0e2415 75%);display:grid;place-items:center}#start-kaart{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.4vmin,26px);padding:16px}#start-hero{width:min(52vh,78vw,520px);aspect-ratio:4 / 3;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}#startscherm h1{font-size:clamp(40px,9vmin,84px);font-weight:700;color:#ffd76e;text-shadow:0 4px 0 #164a20,0 8px 18px rgba(0,0,0,.55);letter-spacing:1px}#start-knoppen{display:flex;flex-direction:column;gap:12px;align-items:center}#levelscherm{position:absolute;top:0;right:0;bottom:0;left:0;z-index:45;background:radial-gradient(circle at 50% 20%,#2f6b3a,#0e2415 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vmin,30px);padding:20px}#levelscherm h2{font-size:clamp(28px,6vmin,52px);font-weight:700;color:#ffe082;text-shadow:0 3px 0 #164a20,0 6px 14px rgba(0,0,0,.5)}#level-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(9px,1.6vmin,15px);width:min(92vw,720px)}.level-knop{aspect-ratio:1;font-family:inherit;font-size:clamp(16px,2.6vmin,26px);font-weight:700;color:#ffe082;text-shadow:0 2px 0 rgba(74,47,16,.8);background:linear-gradient(#c98b45,#9c661f);border:3px solid #4a2f10;border-radius:14px;box-shadow:0 0 0 3px #3e7a34,0 4px #26471f;cursor:pointer}.level-knop:active{transform:translateY(2px);box-shadow:0 0 0 3px #3e7a34,0 1px #26471f}.level-knop.level-dicht{background:linear-gradient(#57503f,#423c2e);border-color:#2c2618;box-shadow:0 0 0 3px #2f4a29,0 3px #1c2f17;color:#a89e86;cursor:default;font-size:clamp(13px,2vmin,20px);text-shadow:none}@media (max-width: 640px){#level-grid{grid-template-columns:repeat(6,1fr)}}