:root{color-scheme:dark;--ink:#eaf2ef;--muted:#b1c1c4;--accent:#8ed7ca}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111a22;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}[hidden]{display:none!important}#viewport{position:relative;width:100%;height:100%;min-height:400px}#scene{display:block;width:100%;height:100%;outline:none}header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:25px 32px;font-size:12px;text-shadow:0 1px 8px #111}header>span{position:absolute;left:50%;transform:translateX(-50%);font:20px Georgia,serif}header>div{display:flex;gap:18px}header button{font-size:12px;padding:0}a:hover,header button:hover{color:var(--accent)}
.top-status{position:absolute;top:78px;left:50%;transform:translateX(-50%);display:flex;gap:28px;font-size:12px;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #101820}.hud{position:absolute;bottom:58px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:end;pointer-events:none;text-shadow:0 2px 10px #07151c}.health{display:flex;gap:13px;align-items:center}.health>span{font-size:34px;font-variant-numeric:tabular-nums}.health small,.weapon>small{font-size:9px;letter-spacing:.14em}.health-track{margin-top:5px;width:75px;height:3px;background:#ffffff29}.health-track i{display:block;width:100%;height:100%;background:var(--accent);transition:width .12s}.weapon{text-align:right;position:relative}.weapon>div>span{font-size:36px;font-variant-numeric:tabular-nums}.weapon>div>small{font-size:13px;margin-left:8px;color:var(--muted)}#reload-status{font-size:11px;position:absolute;bottom:-22px;right:0;white-space:nowrap;color:var(--accent)}.weapon-keys{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:20px;font-size:11px;color:#b0bcbb;white-space:nowrap;text-shadow:0 2px 5px #111}.weapon-keys .selected{color:#fff;border-bottom:1px solid var(--accent);padding-bottom:4px}
#crosshair{position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 2px #111)}#crosshair i{position:absolute;background:#e9fff5;border-radius:1px}#crosshair i:nth-child(1){width:1px;height:6px;left:12px;top:0}#crosshair i:nth-child(2){width:1px;height:6px;left:12px;bottom:0}#crosshair i:nth-child(3){height:1px;width:6px;top:12px;left:0}#crosshair i:nth-child(4){height:1px;width:6px;top:12px;right:0}#crosshair b{position:absolute;width:2px;height:2px;left:12px;top:12px;background:white;border-radius:50%}#hit{position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid transparent;opacity:0;pointer-events:none}#hit:before,#hit:after{content:'';position:absolute;background:var(--accent)}#hit:before{width:20px;height:2px;left:6px;top:15px}#hit:after{width:2px;height:20px;left:15px;top:6px}#hit.visible{opacity:1}#notice{position:absolute;top:24%;left:0;right:0;text-align:center;font-size:14px;letter-spacing:.04em;text-shadow:0 2px 12px #001;pointer-events:none}#damage{position:absolute;inset:0;box-shadow:inset 0 0 100px 30px #e260484d;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,18,25,.88),rgba(9,18,25,.35));display:grid;align-items:center;justify-items:start;padding:clamp(30px,7vw,110px);backdrop-filter:blur(3px)}.menu{max-width:540px}h1{font:400 clamp(54px,8vw,92px)/1 Georgia,'Times New Roman',serif;letter-spacing:-3px;margin:0 0 22px}.menu>p{font-size:16px;color:var(--muted);margin:0 0 28px}.menu>#start{border:1px solid #bad9d0;border-radius:2px;background:#d5e9e1;color:#132b2b;padding:12px 35px;font-size:14px;min-width:130px}.menu>#start:hover{background:#effaf5}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:38px 0 24px;font-size:12px;color:#bac9c9}.controls>span{display:flex;gap:12px;align-items:center}kbd{font:11px inherit;min-width:55px;color:#edf4f0}.menu>.menu-note{font-size:11px;margin:0;max-width:350px}.menu>#restart{font-size:12px;color:var(--muted);padding:0;margin-top:22px}.playing header{opacity:.55}.playing header:hover{opacity:1}.menu-open .hud,.menu-open .top-status,.menu-open .weapon-keys,.menu-open #crosshair{visibility:hidden}
@media(max-width:700px){header{padding:20px}header>span{display:none}.overlay{padding:30px}.hud{left:20px;right:20px}.weapon-keys{gap:12px;font-size:10px}.controls{gap:12px 16px}.menu>p{font-size:14px}h1{font-size:60px}.top-status{top:65px}.menu>.menu-note{max-width:280px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.overlay{overflow-y:auto}.menu{width:min(100%,540px);margin:auto 0}.controls{margin-top:26px;gap:9px 24px}.look-settings{max-width:350px;display:grid;gap:8px;margin:22px 0}.look-settings label{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}.look-settings output{font-variant-numeric:tabular-nums;color:var(--ink)}.look-settings input{width:100%;margin:0 0 8px;accent-color:var(--accent);cursor:pointer}.look-settings input:focus-visible{outline:1px solid var(--accent);outline-offset:4px}.aiming #crosshair{opacity:0}.aiming #hit{width:20px;height:20px}.aiming #hit:before{left:4px;top:9px;width:12px}.aiming #hit:after{left:9px;top:4px;height:12px}
@media(max-height:720px){.overlay{padding-top:25px;padding-bottom:25px}h1{font-size:52px;margin-bottom:12px}.menu>p{margin-bottom:16px}.controls{margin:20px 0 16px;gap:7px 24px}.look-settings{margin:16px 0;gap:5px}}