* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:'Segoe UI',Arial,sans-serif; color:#fff; user-select:none; }
#menu,#gameover { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#1a1a1a 0%,#000 70%); z-index:10; }
.menu-box { text-align:center; padding:40px; background:rgba(20,20,20,0.85); border:1px solid #444; border-radius:8px; max-width:600px; }
.menu-box h1 { font-size:56px; letter-spacing:6px; color:#f5a623; text-shadow:0 0 20px #f5a623; }
.menu-box h2 { font-size:24px; letter-spacing:8px; color:#ccc; margin-bottom:10px; }
.sub { color:#888; margin-bottom:24px; }
.menu-box button { padding:12px 36px; font-size:18px; background:#f5a623; color:#000; border:none; border-radius:4px; cursor:pointer; font-weight:bold; }
.menu-box button:hover { background:#ffc04a; }
.controls { margin-top:20px; font-size:13px; color:#aaa; line-height:1.7; text-align:left; }
#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
#hud.hidden { display:none; }
#crosshair { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; }
#crosshair::before,#crosshair::after { content:''; position:absolute; background:#fff; box-shadow:0 0 2px #000; }
#crosshair::before { left:9px; top:0; width:2px; height:20px; }
#crosshair::after { top:9px; left:0; width:20px; height:2px; }
#killfeed { position:absolute; top:20px; right:20px; font-size:14px; color:#fff; text-shadow:1px 1px 2px #000; max-width:300px; }
#killfeed div { margin-bottom:4px; animation:fade 4s forwards; }
@keyframes fade { 0%{opacity:1;} 80%{opacity:1;} 100%{opacity:0;} }
#health { position:absolute; bottom:30px; left:30px; font-size:28px; font-weight:bold; color:#ff4444; text-shadow:2px 2px 4px #000; }
#ammo { position:absolute; bottom:30px; right:30px; font-size:28px; font-weight:bold; color:#fff; text-shadow:2px 2px 4px #000; }
#weaponName { position:absolute; bottom:8px; right:30px; font-size:14px; color:#f5a623; }
#score { position:absolute; top:20px; left:20px; font-size:16px; color:#fff; text-shadow:1px 1px 2px #000; }
#wave { position:absolute; top:44px; left:20px; font-size:14px; color:#f5a623; }
#reloadHint { position:absolute; top:55%; left:50%; transform:translateX(-50%); font-size:16px; color:#ffcc00; text-shadow:1px 1px 2px #000; }
#reloadHint.hidden { display:none; }
#hitmarker { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; pointer-events:none; }
#hitmarker::before,#hitmarker::after { content:''; position:absolute; width:2px; height:14px; background:#fff; left:14px; top:8px; }
#hitmarker::before { transform:rotate(45deg); }
#hitmarker::after { transform:rotate(-45deg); }
#hitmarker.hidden { display:none; }
#gameover.hidden { display:none; }
canvas { display:block; }