html,body{color:#fff;-webkit-user-select:none;user-select:none;background:#000;height:100%;margin:0;font-family:Segoe UI,Arial,sans-serif;overflow:hidden}canvas{display:block}#hud{pointer-events:none;text-shadow:0 2px 6px #000;position:fixed;inset:0}#top{letter-spacing:1px;gap:28px;font-size:22px;font-weight:700;display:flex;position:absolute;top:18px;left:24px;right:24px}#top #left{color:#ffd24a;margin-left:auto}#crosshair{--gap:8px;width:0;height:0;transition:opacity .1s;position:absolute;top:50%;left:50%}#crosshair i{background:#fff;position:absolute;box-shadow:0 0 3px #000}#crosshair i:first-child{width:2px;height:9px;left:-1px;top:calc(-9px - var(--gap))}#crosshair i:nth-child(2){width:2px;height:9px;left:-1px;top:var(--gap)}#crosshair i:nth-child(3){width:9px;height:2px;top:-1px;left:calc(-9px - var(--gap))}#crosshair i:nth-child(4){width:9px;height:2px;top:-1px;left:var(--gap)}#hitmarker{opacity:0;width:28px;height:28px;transition:opacity .25s;position:absolute;top:-14px;left:-14px}#hitmarker:before,#hitmarker:after{content:"";background:#fff;width:2px;height:32px;position:absolute;top:-2px;left:13px;transform:rotate(45deg)}#hitmarker:after{transform:rotate(-45deg)}#hitmarker.on{opacity:1;transition:none}#hitmarker.head:before,#hitmarker.head:after{background:#ff4a3a}#killtext{color:#ffd24a;opacity:0;font-size:20px;font-weight:700;transition:opacity .6s;position:absolute;top:58%;left:50%;transform:translate(-50%)}#killtext.on{opacity:1;transition:none}#banner{text-align:center;letter-spacing:4px;opacity:0;font-size:54px;font-weight:800;transition:opacity .8s;position:absolute;top:22%;left:0;right:0}#banner.on{opacity:1;transition:opacity .1s}#banner small{letter-spacing:1px;margin-top:6px;font-size:22px;font-weight:600;display:block}#damage{opacity:0;background:radial-gradient(#0000 45%,#be0000d9 100%);position:absolute;inset:0}#arrows{width:0;height:0;position:absolute;top:50%;left:50%}.arrow{transform-origin:60px 170px;opacity:1;width:120px;height:170px;transition:opacity 1.2s ease-out;position:absolute;top:-170px;left:-60px}.arrow:before{content:"";background:radial-gradient(at top,#ff281ef2,#0000 70%);width:60px;height:28px;position:absolute;top:0;left:30px}#bottom{justify-content:space-between;align-items:flex-end;display:flex;position:absolute;bottom:22px;left:28px;right:28px}#health{align-items:center;gap:12px;display:flex}#healthbar{background:#0000008c;border:2px solid #fffc;width:260px;height:16px;transform:skew(-18deg)}#healthfill{background:linear-gradient(#7dff8a,#1fae45);width:100%;height:100%;transition:background .2s}#healthfill.low{background:linear-gradient(#ff8a7a,#c4271a)}#healthnum{font-size:34px;font-weight:800}#ammo{font-weight:800}#clip{font-size:56px}#reserve{opacity:.8;margin-left:8px;font-size:26px}#ammo.low #clip{color:#ff5a4a}#menu{cursor:pointer;z-index:5;text-align:center;background:radial-gradient(#0a0e18b3,#000000eb);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0}#menu h1{letter-spacing:8px;text-shadow:0 0 30px #ff7a30,0 4px #000;margin:0;font-size:64px}#menu-text{color:#ffd24a;margin:0;font-size:28px;font-weight:700;animation:1.4s infinite blink}#controls{opacity:.9;flex-direction:column;gap:8px;margin-top:18px;font-size:18px;display:flex}#loading{opacity:.7;margin:0}kbd{background:#2a2f3a;border:1px solid #667;border-bottom-width:3px;border-radius:5px;margin:0 2px;padding:1px 7px;font-family:inherit;font-size:16px}@keyframes blink{50%{opacity:.5}}.hidden{display:none!important}