*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;font-family:Segoe UI,system-ui,sans-serif;user-select:none}canvas{display:block}#crosshair{position:fixed;top:50%;left:50%;width:24px;height:24px;transform:translate(-50%,-50%);pointer-events:none;z-index:10}#crosshair:before,#crosshair:after{content:"";position:absolute;background:#ffffffd9}#crosshair:before{left:50%;top:50%;width:2px;height:24px;transform:translate(-50%,-50%)}#crosshair:after{top:50%;left:50%;width:24px;height:2px;transform:translate(-50%,-50%)}#hud{position:fixed;inset:0;pointer-events:none;z-index:5}#top-left,#top-right{position:fixed;top:16px;color:#fff;font-size:18px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8);background:#00000073;padding:10px 16px;border-radius:10px}#top-left{left:16px}#top-right{right:16px;text-align:right}#health.low{color:#f44}#ammo{margin-top:6px;color:#ffd166}#damage-flash{position:fixed;inset:0;background:radial-gradient(circle,transparent 40%,rgba(255,0,0,.55));opacity:0;pointer-events:none;transition:opacity .15s ease-out;z-index:4}.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#05050ad9;color:#fff;text-align:center;z-index:20}.overlay h1{font-size:56px;letter-spacing:4px;color:#e63946;text-shadow:0 0 30px rgba(230,57,70,.6)}.overlay p{font-size:16px;color:#ccc;opacity:.9}.overlay button{font-size:22px;font-weight:700;padding:16px 48px;border:none;border-radius:12px;cursor:pointer;background:linear-gradient(135deg,#e63946,#d90429);color:#fff;letter-spacing:2px;box-shadow:0 8px 30px #e6394666;transition:transform .1s ease}.overlay button:hover{transform:scale(1.06)}.hidden{display:none}#banner{position:fixed;top:22%;left:50%;transform:translate(-50%);font-size:34px;font-weight:800;color:#fff;text-shadow:0 0 20px rgba(230,57,70,.8);letter-spacing:2px;opacity:0;transition:opacity .3s ease;pointer-events:none}#banner.show{opacity:1}#hitmarker{position:fixed;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%) rotate(45deg);opacity:0;pointer-events:none;z-index:10}#hitmarker:before,#hitmarker:after{content:"";position:absolute;background:#f55}#hitmarker:before{left:50%;top:0;width:2px;height:22px;transform:translate(-50%)}#hitmarker:after{top:50%;left:0;width:22px;height:2px;transform:translateY(-50%)}#hitmarker.show{animation:hitmark .18s ease-out}@keyframes hitmark{0%{opacity:1}to{opacity:0}}