:root{--bg: #0f1114;--panel: #1a1e24;--panel-2: #23282f;--text: #f2f3f5;--muted: #b3b9c2;--accent: #e0263f;--accent-dark: #a5182c;--ok: #3fbf6a;--warn: #ffb020;--focus: #ffd166;--radius: 10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none}#app{position:fixed;inset:0}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:var(--radius);padding:.75rem 1.4rem;background:var(--panel-2);color:var(--text);font-weight:600;min-height:44px}button.primary{background:var(--accent);color:#fff;font-size:1.25rem;padding:.9rem 2.2rem}button.primary:hover{background:var(--accent-dark)}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:2px}input[type=text]{background:var(--panel-2);color:var(--text);border:1px solid #3a414b;border-radius:var(--radius);padding:.6rem .8rem;min-height:44px;width:100%}label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.3rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hidden{display:none!important}.screen{position:absolute;inset:0;display:flex;overflow:auto;padding:1rem;background:radial-gradient(ellipse at 50% 30%,#2a1418 0%,var(--bg) 60%)}.screen>*{margin:auto}.screen .panel{background:var(--panel);border-radius:16px;padding:1.5rem;box-shadow:0 20px 60px #00000080}.start{display:grid;grid-template-columns:1fr minmax(240px,1.2fr) 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem;width:min(1100px,100%)}.start{min-height:min(720px,calc(100vh - 2rem));min-height:min(720px,calc(100svh - 2rem))}.start .naam{grid-column:1;grid-row:1}.start .instellingen{grid-column:3;grid-row:1}.start .instellingen label+input{margin-bottom:.8rem}.start .instellingen input[type=range]{width:100%;accent-color:var(--accent);min-height:44px}.start .team{border:0;padding:0;margin:0 0 .8rem;display:flex;gap:.6rem}.start .team legend{color:var(--muted);font-size:.9rem;margin-bottom:.3rem}.start .teamkeuze{flex:1;display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:var(--radius);background:var(--panel-2);font-weight:700;min-height:44px;cursor:pointer;margin:0;color:var(--text)}.start .teamkeuze.blauw:has(:checked){background:#2f6fd6}.start .teamkeuze.rood:has(:checked){background:#d63031}.start .vinkje{display:flex;align-items:center;gap:.5rem;min-height:44px;margin:0 0 .8rem;cursor:pointer}.start .vinkje input{width:1.3rem;height:1.3rem;accent-color:var(--accent);margin:0;flex:none}.lobby li.blauw{background:#2f6fd6}.lobby li.rood{background:#d63031}.hud .bord tr.blauw td:first-child{border-left:4px solid #2f6fd6}.hud .bord tr.rood td:first-child{border-left:4px solid #d63031}.hud .boven .blauw{color:#7fb0ff}.hud .boven .rood{color:#ff7f7f}.start .instellingen select{width:100%;min-height:44px;background:var(--panel-2);color:var(--text);border:1px solid #3a414b;border-radius:var(--radius);padding:.4rem .6rem}.start .logo{grid-column:2;grid-row:1;text-align:center}.start .logo h1{margin:0;font-size:clamp(2rem,6vw,3.5rem);letter-spacing:.08em;color:var(--accent);text-transform:uppercase}.start .logo p{margin:.2rem 0 0;color:var(--muted)}.start .shop{grid-column:1;grid-row:2;align-self:center}.start .skin{grid-column:2;grid-row:2;display:grid;place-items:center}.start .skin .poppetje{width:min(200px,34vh);height:min(320px,30vh);display:grid;place-items:center}.start .skin .poppetje canvas{width:100%;height:100%}.start .zegereeks{grid-column:3;grid-row:2;align-self:center}.start .spelen{grid-column:3;grid-row:3;justify-self:end;align-self:end}.start .geld{grid-column:1;grid-row:3;align-self:end}.start .placeholder{opacity:.7}.start .placeholder small{display:block;color:var(--muted);margin-top:.3rem}.foutmelding{color:#ff8a95;margin-top:.5rem;min-height:1.4em}.money{font-weight:700;color:var(--warn)}@media(max-height:820px){.screen{padding:.5rem}.start{gap:.6rem;min-height:0}.screen .panel{padding:.8rem 1rem}.start .logo h1{font-size:clamp(1.5rem,4vw,2.4rem)}.start .logo p{font-size:.85rem}.start .instellingen label+input{margin-bottom:.4rem}.start .team{margin-bottom:.4rem}}@media(max-height:660px){.start .instellingen{display:grid;grid-template-columns:7.5rem 1fr;gap:.3rem .7rem;align-items:center;align-content:start}.start .instellingen .uitleg{display:none}.start .instellingen>label{margin:0}.start .instellingen label+input,.start .instellingen label+select{margin-bottom:0}.start .team{grid-column:1 / -1;margin-bottom:.2rem}.start .vinkje{grid-column:1 / -1;margin-bottom:0;min-height:36px}.start .instellingen input[type=range],.start .instellingen select,.start .instellingen input[type=number]{min-height:36px}.start .skin .poppetje{width:min(200px,26vh);height:min(320px,24vh)}.start .logo h1{font-size:1.4rem}.start .naam,.start .shop,.start .zegereeks,.start .geld{font-size:.9rem}}@media(max-width:720px){.start{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto auto;height:auto;overflow:auto}.start>*{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important}}.lobby .panel,.eind .panel,.laden .panel{width:min(520px,100vw - 2rem);text-align:center}.laden .balk{height:12px;background:var(--panel-2);border-radius:6px;overflow:hidden}.laden .balk>div{height:100%;width:0;background:var(--accent);transition:width .15s}.laden .wat{color:var(--muted)}.lobby h2,.eind h2{margin-top:0}.lobby .aftellen{font-size:3rem;font-weight:800;color:var(--accent)}.lobby ul{list-style:none;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}.lobby li{background:var(--panel-2);padding:.3rem .7rem;border-radius:999px}.eind .stats{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}.eind .stat{background:var(--panel-2);border-radius:var(--radius);padding:.8rem}.eind .stat b{display:block;font-size:1.8rem}.eind .dans{width:90px;height:160px;margin:0 auto;border-radius:45px 45px 12px 12px;background:linear-gradient(#3b4a5c,#223040);animation:dans 1.2s ease-in-out infinite}@keyframes dans{0%,to{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-8px)}}@media(prefers-reduced-motion:reduce){.eind .dans{animation:none}}.game{position:absolute;inset:0}.game canvas.view{display:block;width:100%;height:100%;outline:none;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}.hud .vak{position:absolute;background:#0a0c109e;border-radius:var(--radius);padding:.5rem .8rem;backdrop-filter:blur(4px)}.hud .health{left:1rem;bottom:1rem;min-width:220px}.hud .health .balk{height:12px;background:#3a1c22;border-radius:6px;overflow:hidden;margin-top:.3rem}.hud .health .balk>div{height:100%;background:var(--ok);transition:width .12s linear}.hud .health .balk>div.laag{background:var(--accent)}.hud .wapen{right:1rem;bottom:1rem;text-align:right;min-width:180px}.hud .wapen .kogels{font-size:1.8rem;font-weight:800}.hud .wapen .herladen{color:var(--warn)}.hud .slots{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end;margin-top:.3rem;max-width:300px}.hud .slots span{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:#ffffff14;font-size:.8rem}.hud .slots span.actief{background:var(--accent)}.hud .boven{left:50%;top:1rem;transform:translate(-50%);display:flex;gap:1.2rem}.hud .boven b{color:var(--warn)}.hud .minimap{left:1rem;top:1rem;padding:.3rem}.hud .minimap canvas{display:block;width:180px;height:180px;border-radius:6px}.hud .feed{right:1rem;top:1rem;text-align:right;background:none}.hud .feed div{background:#0a0c109e;border-radius:6px;padding:.2rem .6rem;margin-bottom:.3rem;font-size:.9rem}.hud .feed .jij{color:var(--warn)}.hud .kruis{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}.hud .kruis:before,.hud .kruis:after{content:"";position:absolute;background:#fff;box-shadow:0 0 2px #000}.hud .kruis:before{left:50%;top:0;width:2px;height:100%;transform:translate(-50%)}.hud .kruis:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}.hud .kruis.richten{width:12px;height:12px}.hud .flits{position:absolute;inset:0;background:radial-gradient(ellipse at center,#e0263f00 40%,#e0263fbf);opacity:0;transition:opacity 80ms}.hud .melding{z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:auto;font-size:1.1rem}.hud .melding p{margin:.4rem 0 0;color:var(--muted);font-size:.95rem}.hud .hulp{left:50%;bottom:1rem;transform:translate(-50%);color:var(--muted);font-size:.85rem}.hud .tijd-dood{color:var(--accent)}.start .shop button{margin-top:.6rem}.start .skinnaam{color:var(--muted);font-size:.85rem;text-align:center;margin-top:.6rem;max-width:260px}.start .potjes{grid-column:2;grid-row:3}.start .potjes .potje{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.4rem 0;border-top:1px solid #2f353d;font-size:.9rem}.start .potjes .potje:first-child{border-top:0}.shopmenu{position:absolute;inset:0;display:grid;place-items:center;background:#0009;z-index:5}.shopmenu .panel{width:min(720px,100vw - 2rem);max-height:calc(100vh - 2rem);overflow:auto}.shopmenu h2,.winkel h2{margin-top:0}.tabs{display:flex;gap:.4rem;margin-bottom:.8rem}.tabs button.actief{background:var(--accent);color:#fff}.artikel{display:grid;grid-template-columns:1fr 1.4fr auto;gap:.6rem;align-items:center;padding:.45rem 0;border-top:1px solid #2f353d}.artikel .n{font-weight:600}.artikel .n input{margin-right:.4rem;width:18px;height:18px}.artikel .i{color:var(--muted);font-size:.85rem}.artikel button{padding:.4rem .8rem;min-height:36px;white-space:nowrap}.artikel button:disabled{opacity:.5;cursor:default}.eind .knoppen{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}@media(max-width:720px){.artikel{grid-template-columns:1fr auto}.artikel .i{grid-column:1 / -1}}.hud .toasts{position:absolute;left:50%;top:4.5rem;transform:translate(-50%);text-align:center}.hud .toasts div{background:#0a0c10b3;border-radius:6px;padding:.3rem .8rem;margin-bottom:.3rem;color:var(--warn);font-weight:600}.hud .hint{left:50%;bottom:4.2rem;transform:translate(-50%);color:var(--warn);font-weight:600}.hud .zak{color:var(--muted);font-size:.8rem;margin-top:.3rem}.hud .vest{margin-left:.3rem}.hud .slots span{width:auto;padding:0 .4rem;font-size:.75rem;white-space:nowrap}.hud .slots span.leeg{opacity:.4}.hud .overval{left:50%;top:5rem;transform:translate(-50%);min-width:260px;text-align:center;color:var(--warn)}.hud .overval .balk{height:10px;background:#3a2c10;border-radius:5px;overflow:hidden;margin-top:.3rem}.hud .overval .balk>div{height:100%;background:var(--warn)}.hud.alarm .boven{box-shadow:0 0 0 2px var(--accent)}.hud .bord{z-index:5;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0a0c10d9;border-radius:var(--radius);padding:1rem;min-width:320px}.hud .bord table{border-collapse:collapse;width:100%}.hud .bord th,.hud .bord td{text-align:left;padding:.25rem .6rem}.hud .bord th{color:var(--muted);font-weight:600;border-bottom:1px solid #3a414b}.hud .bord tr.jij td{color:var(--warn);font-weight:700}.hud .bord tr.dood td{opacity:.5}.hud .winkel{z-index:6;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0e1014f5;border-radius:16px;padding:1.2rem;width:min(640px,100vw - 2rem);max-height:calc(100vh - 2rem);overflow:auto;pointer-events:auto}.hud .winkel .sluiten{margin-top:.8rem}.hud .scope{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 22vmin,rgba(0,0,0,.96) 23vmin)}.hud .scope:before,.hud .scope:after{content:"";position:absolute;left:50%;top:50%;background:#ffffffb3}.hud .scope:before{width:44vmin;height:1px;transform:translate(-50%,-50%)}.hud .scope:after{height:44vmin;width:1px;transform:translate(-50%,-50%)}.touch{position:absolute;inset:0;z-index:4;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--rand-l: calc(env(safe-area-inset-left, 0px) + 1rem) ;--rand-r: calc(env(safe-area-inset-right, 0px) + 1rem) ;--rand-b: calc(env(safe-area-inset-bottom, 0px) + 1rem) }.touch>*,.touch .tknop{pointer-events:auto;touch-action:none}.touch .tring{pointer-events:none}.tkijk{position:absolute;right:0;top:0;width:55%;height:100%}.tstickzone{position:absolute;left:0;bottom:0;width:45%;height:62%}.tring{position:absolute;left:calc(var(--rand-l) + 74px);bottom:calc(var(--rand-b) + 74px);width:132px;height:132px;margin:0 0 -66px -66px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:#0a0c1047;transition:opacity .14s;opacity:.5}.tring.aan{bottom:auto;margin-top:-66px;margin-bottom:0;opacity:.95;transition:none}.tduim{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#ffffff57;border:2px solid rgba(255,255,255,.6)}.touch .tknop{position:absolute;display:grid;place-content:center;gap:1px;padding:0;width:64px;height:64px;min-height:0;border-radius:50%;background:#0a0c108c;border:2px solid rgba(255,255,255,.34);color:var(--text);backdrop-filter:blur(3px);font-weight:600;line-height:1}.touch .tknop .teken{font-size:1.5rem}.touch .tknop b{font-size:.6rem;font-weight:600;letter-spacing:.02em}.touch .tknop.aan{background:#e0263fbf;border-color:#fff}.touch .tknop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.touch .vuur{right:var(--rand-r);bottom:var(--rand-b);width:92px;height:92px;background:#e0263f6b;border-color:#ffffff8c}.touch .vuur .teken{font-size:2rem}.touch .vuur-links{left:calc(var(--rand-l) + 158px);bottom:calc(var(--rand-b) + 132px);width:72px;height:72px;background:#e0263f57}.touch .richten{right:calc(var(--rand-r) + 104px);bottom:calc(var(--rand-b) + 14px)}.touch .springen{right:calc(var(--rand-r) + 14px);bottom:calc(var(--rand-b) + 104px)}.touch .hurken{right:calc(var(--rand-r) + 104px);bottom:calc(var(--rand-b) + 94px)}.touch .herladen{right:calc(var(--rand-r) + 14px);bottom:calc(var(--rand-b) + 182px)}.touch .wapen{right:calc(var(--rand-r) + 186px);bottom:calc(var(--rand-b) + 34px)}.tklein{position:absolute;left:50%;bottom:var(--rand-b);transform:translate(-50%);display:flex;gap:.5rem;background:none}.touch .tknop.klein{position:static;width:54px;height:54px}.touch .tknop.klein .teken{font-size:1.15rem}.touch .tknop.klein b{font-size:.55rem}.hud.touch .hulp{display:none}.hud.touch .health{left:1rem;bottom:auto;top:calc(180px + 1.6rem);min-width:180px}.hud.touch .wapen{right:1rem;bottom:auto;top:1rem;min-width:0;font-size:.9rem}.hud.touch .wapen .kogels{font-size:1.4rem}.hud.touch .slots{max-width:190px}.hud.touch .boven{font-size:.85rem;gap:.7rem;padding:.4rem .6rem}.hud.touch .feed{top:9.5rem;font-size:.8rem}.hud.touch .hint{bottom:calc(env(safe-area-inset-bottom,0px) + 5.2rem)}.hud.touch .melding{pointer-events:auto}@media(max-height:560px){.hud.touch .minimap canvas{width:110px;height:110px}.hud.touch .health{top:calc(110px + 1.6rem);min-width:150px}.hud.touch .feed{top:7.5rem}.hud.touch .wapen{font-size:.8rem}.hud.touch .wapen .kogels{font-size:1.2rem}.hud.touch .slots{max-width:150px}.touch .tknop{width:56px;height:56px}.touch .tknop .teken{font-size:1.25rem}.touch .vuur{width:78px;height:78px}.touch .vuur-links{width:62px;height:62px;left:calc(var(--rand-l) + 150px);bottom:calc(var(--rand-b) + 116px)}.touch .richten{right:calc(var(--rand-r) + 88px);bottom:calc(var(--rand-b) + 8px)}.touch .springen{right:calc(var(--rand-r) + 8px);bottom:calc(var(--rand-b) + 88px)}.touch .hurken{right:calc(var(--rand-r) + 88px);bottom:calc(var(--rand-b) + 72px)}.touch .herladen{right:calc(var(--rand-r) + 154px);bottom:calc(var(--rand-b) + 20px)}.touch .wapen{right:calc(var(--rand-r) + 154px);bottom:calc(var(--rand-b) + 84px)}.touch .tknop.klein{width:46px;height:46px}.touch .tknop.klein b{font-size:.5rem}}.touch .draaien{position:absolute;inset:0;z-index:9;display:none;place-content:center;text-align:center;background:var(--bg);padding:2rem}.touch .draaien p{color:var(--muted)}@media(orientation:portrait)and (pointer:coarse){.touch .draaien{display:grid}}