* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#000; font-family:'Segoe UI',Arial,sans-serif; touch-action:none; }

#nickname-screen { position:fixed; inset:0; background:#0a0a0a; display:flex; justify-content:center; align-items:center; z-index:1000; }
#nickname-box { text-align:center; }
#nickname-input { padding:10px 16px; font-size:16px; background:#161616; border:1px solid #333; color:#ddd; outline:none; width:260px; border-radius:2px; }
#nickname-btn { padding:10px 30px; font-size:14px; background:#1c1c1c; border:1px solid #333; color:#aaa; cursor:pointer; margin-left:8px; border-radius:2px; }

#crosshair { position:fixed; top:50%; left:50%; width:2px; height:2px; background:#000; transform:translate(-50%,-50%); pointer-events:none; z-index:10; border-radius:50%; box-shadow:0 0 1px rgba(255,255,255,0.4); }
#ammo-ring { position:fixed; top:50%; left:50%; width:40px; height:40px; transform:translate(-50%,-50%); pointer-events:none; z-index:10; }
#ammo-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
#ammo-ring circle { fill:none; stroke-width:1.5; }
#ammo-ring .bg { stroke:rgba(255,255,255,0.1); }
#ammo-ring .fill { stroke:#fff; stroke-dasharray:113.1; transition:stroke-dashoffset 0.15s; }
#reserve-text { position:fixed; top:calc(50% + 28px); left:50%; transform:translateX(-50%); color:#fff; font-size:11px; pointer-events:none; z-index:10; }

#health-bar { position:fixed; bottom:28px; left:28px; width:180px; height:4px; background:rgba(255,255,255,0.08); pointer-events:none; z-index:10; }
#health-fill { height:100%; width:100%; background:#c03030; transition:width 0.25s; }
#weapon-name { position:fixed; bottom:28px; right:28px; color:#777; font-size:11px; letter-spacing:2px; pointer-events:none; z-index:10; }
#reload-indicator { display:none; position:fixed; top:calc(50% + 46px); left:50%; transform:translateX(-50%); color:#888; font-size:11px; letter-spacing:2px; pointer-events:none; z-index:10; }

#damage-flash { position:fixed; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle, transparent 40%, rgba(180,0,0,0.35) 100%); transition:opacity 0.1s; z-index:9; }
#scope { display:none; position:fixed; inset:0; pointer-events:none; z-index:8; background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.97) 33%); }
#scope .h, #scope .v { position:absolute; top:50%; left:50%; background:rgba(10,10,10,0.9); }
#scope .h { width:50vmin; height:1px; transform:translate(-50%,-50%); }
#scope .v { width:1px; height:50vmin; transform:translate(-50%,-50%); }

#killfeed { position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; text-align:center; }
.kill-msg { color:#ccc; font-size:12px; background:rgba(0,0,0,0.45); padding:4px 14px; margin-bottom:4px; animation:killfade 6s forwards; }
@keyframes killfade { 0%,75% { opacity:1; } 100% { opacity:0; } }

#death-screen { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); color:#777; flex-direction:column; justify-content:center; align-items:center; z-index:100; pointer-events:none; }
#death-screen h1 { font-size:42px; font-weight:200; letter-spacing:8px; }

#scoreboard { position:fixed; top:28px; right:28px; pointer-events:none; z-index:10; text-align:right; }
.player-entry { font-size:13px; padding:2px 0; color:#ddd; }
.player-entry b { color:#fff; margin-left:6px; }

#mobile-controls { display:none; position:fixed; inset:0; pointer-events:none; z-index:50; }
#joystick-zone { position:absolute; bottom:30px; left:30px; width:120px; height:120px; pointer-events:auto; touch-action:none; }
#joystick-base { width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.2); position:relative; }
#joystick-knob { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.4); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
#mobile-buttons { position:absolute; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; pointer-events:auto; }
.mob-btn { width:55px; height:55px; border-radius:50%; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.2); color:#ccc; font-size:10px; font-weight:bold; display:flex; justify-content:center; align-items:center; user-select:none; touch-action:none; }
.mob-btn.small { width:45px; height:45px; font-size:8px; }
.fire-btn { width:70px; height:70px; background:rgba(192,48,48,0.2); border-color:rgba(192,48,48,0.4); }
#weapon-buttons { display:flex; gap:8px; margin-bottom:5px; }
@media (hover:none) and (pointer:coarse) { #mobile-controls { display:block; } }