html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#87b5d6;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif}#app{position:fixed;inset:0}#renderCanvas{width:100%;height:100%;display:block;touch-action:none}#hud{position:fixed;top:12px;left:12px;z-index:10;pointer-events:none}#hud .panel{pointer-events:auto;background:#0c121ac7;color:#e8eef4;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;width:380px;max-width:calc(100vw - 24px);backdrop-filter:blur(6px)}#hud .row{display:flex;align-items:center;gap:6px;margin:6px 0}#hud .title{font-weight:700;letter-spacing:.06em;font-size:13px}#hud .badge{font-size:10px;font-weight:600;background:#2f7bff;border-radius:20px;padding:2px 8px}#hud label{font-size:12px;opacity:.8}#hud input{flex:1;background:#0c141d;color:#fff;border:1px solid #2a3a4d;border-radius:6px;padding:6px 8px;font-size:13px}#hud button{background:#1d2c3d;color:#fff;border:1px solid #31465c;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:12px}#hud button:hover{background:#27405a}#hud .stats{font-family:ui-monospace,Consolas,monospace;font-size:11px;opacity:.9}#hud .help{font-size:11px;opacity:.65}#hud .hintline{font-size:12px;color:#ffd75e;min-height:14px}#crosshair{position:fixed;left:50%;top:50%;width:5px;height:5px;z-index:20;transform:translate(-50%,-50%);border-radius:50%;background:#ffffffe6;box-shadow:0 0 0 1px #000000a6;pointer-events:none;transition:transform 90ms ease-out}#crosshair.pulse{transform:translate(-50%,-50%) scale(1.8)}#scope{display:none;position:fixed;inset:0;z-index:24;pointer-events:none;background:radial-gradient(circle at center,#0000 21vmin,#000000f7 23vmin)}#scope .ret-h,#scope .ret-v{position:absolute;background:#b4f0ffd9}#scope .ret-h{left:50%;top:50%;width:36vmin;height:1px;transform:translate(-50%,-50%)}#scope .ret-v{left:50%;top:50%;width:1px;height:36vmin;transform:translate(-50%,-50%)}#dmgflash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#f000 40%,#ff000073)}#death{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;background:#0a0000b8;color:#ff6b5e;font-size:34px;font-weight:800;letter-spacing:.2em}#death.show{display:flex}#death .sub{font-size:13px;letter-spacing:.3em;opacity:.7;margin-top:8px}#playerbar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:10;width:240px;height:18px;pointer-events:none;background:#0c121ac7;border:1px solid rgba(255,255,255,.2);border-radius:9px;overflow:hidden}#playerfill{height:100%;width:100%;background:#17cf17}#playertext{position:absolute;inset:0;text-align:center;font-size:11px;line-height:18px;color:#fff;text-shadow:0 1px 2px #000;font-family:ui-monospace,Consolas,monospace}#invbar{position:fixed;bottom:16px;left:12px;z-index:10;display:flex;gap:6px;pointer-events:none;font-family:ui-monospace,Consolas,monospace;font-size:11px}#invbar .slot{background:#0c121ac7;color:#9fb2c5;border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:5px 9px}#invbar .slot.on{color:#ffd75e;border-color:#ffd75e}#invbar .slot.stored{opacity:.45}#invbar .hint{color:#5c6b7d;align-self:center}#toast{position:fixed;bottom:48px;left:50%;transform:translate(-50%);z-index:25;display:none;pointer-events:none;color:#ffd75e;background:#0c121ae0;border:1px solid rgba(255,215,94,.35);border-radius:8px;padding:8px 14px;font-size:13px;font-family:ui-sans-serif,system-ui,sans-serif}#toast.show{display:block}#alienbar{position:fixed;z-index:10;width:90px;height:7px;display:none;pointer-events:none;background:#0009;border:1px solid rgba(255,80,60,.8);border-radius:4px;transform:translate(-50%,-50%)}#alienfill{height:100%;width:100%;background:#ff3b28;border-radius:3px}#compass{position:fixed;top:10px;left:50%;transform:translate(-50%);z-index:10;width:220px;pointer-events:none;background:#0c121ab8;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#e8eef4;text-align:center;overflow:hidden;font-family:ui-monospace,Consolas,monospace}#compassStrip{position:relative;height:18px;font-size:11px;opacity:.9;border-bottom:1px solid rgba(255,255,255,.12)}#compassStrip span{position:absolute;top:2px;transform:translate(-50%)}#compassStrip .tick{opacity:.45}#compassRead{font-size:11px;padding:2px 0 3px;letter-spacing:.08em}