* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0a1220; font-family: "Segoe UI", system-ui, sans-serif; color: #e8f6ff; }
#scene { position: fixed; inset: 0; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#top-bar { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 28px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 0 12px rgba(45,232,200,.6); }
#score-text { color: #ffd166; }
#wave-text { color: #2de8c8; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); }
#crosshair span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(125,252,216,.85); box-shadow: 0 0 8px rgba(125,252,216,.7); }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: rgba(125,252,216,.85); }
#crosshair::before { left: 50%; top: -8px; width: 2px; height: 8px; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: -8px; height: 2px; width: 8px; transform: translateY(-50%); }
#hitmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.4); font-size: 22px; opacity: 0; font-weight: 900; }
#hitmark.pop { animation: hm .25s ease-out; }
@keyframes hm { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1.8);} 100% { opacity: 0; transform: translate(-50%,-50%) scale(1);} }
#vitals { position: absolute; left: 18px; bottom: 18px; width: 240px; }
.meter-label { font-size: 11px; letter-spacing: 2px; margin-bottom: 4px; opacity: .9; }
#ammo-text { color: #2de8c8; font-weight: 700; }
#reload { color: #ffb347; opacity: 0; transition: opacity .2s; }
.meter { height: 12px; border: 1px solid rgba(232,246,255,.35); border-radius: 6px; overflow: hidden; margin-bottom: 10px; background: rgba(10,18,32,.6); }
.meter div { height: 100%; width: 100%; transition: width .15s; }
#hp-fill { background: linear-gradient(90deg,#19d3ab,#2de8c8); }
#ammo-fill { background: linear-gradient(90deg,#d9a13c,#ffd166); }
#msg { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-size: clamp(16px, 3vw, 26px); font-weight: 800; letter-spacing: 3px; color: #ffd166; text-shadow: 0 0 18px rgba(255,179,71,.8); opacity: 0; transition: opacity .3s; white-space: nowrap; }
#msg.show { opacity: 1; }
#damage-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(255,45,85,.55) 100%); }
#start, #end { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(6,10,20,.78); backdrop-filter: blur(3px); }
#end { display: none; }
.panel { max-width: 640px; margin: 16px; padding: 28px 34px; border: 1px solid rgba(45,232,200,.4); border-radius: 14px; background: rgba(13,22,40,.9); box-shadow: 0 0 40px rgba(45,232,200,.25); text-align: center; }
.panel h1 { font-size: clamp(26px, 5vw, 44px); letter-spacing: 3px; }
.panel h1 span { color: #2de8c8; }
.panel h2 { font-size: clamp(22px, 4vw, 34px); color: #2de8c8; margin-bottom: 10px; }
.panel p { margin: 12px 0; opacity: .9; }
.panel ul { list-style: none; text-align: left; margin: 14px 0 20px; line-height: 1.9; font-size: 14px; }
.panel li::before { content: "◆ "; color: #2de8c8; }
.big-btn { pointer-events: auto; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: 2px; font-size: 18px; padding: 14px 42px; color: #06212b; background: linear-gradient(135deg, #2de8c8, #7ab8ff); border: none; border-radius: 10px; box-shadow: 0 0 24px rgba(45,232,200,.5); }
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(45,232,200,.8); }
#touch-ui { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: block; }
#stick { position: absolute; left: 20px; bottom: 24px; width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(125,252,216,.5); background: rgba(10,18,32,.45); pointer-events: auto; touch-action: none; }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(45,232,200,.55); box-shadow: 0 0 14px rgba(45,232,200,.6); }
#look-zone { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; pointer-events: auto; touch-action: none; }
#btn-fire { position: absolute; right: 24px; bottom: 40px; width: 96px; height: 96px; border-radius: 50%; pointer-events: auto; touch-action: none; font: 800 16px/1 inherit; letter-spacing: 2px; color: #06212b; background: radial-gradient(circle at 35% 35%, #ff8fa3, #ff4d6d); border: none; box-shadow: 0 0 20px rgba(255,77,109,.6); }
#btn-reload { pointer-events: auto; position: absolute; right: 132px; bottom: 64px; width: 70px; height: 70px; border-radius: 50%; pointer-events: auto; touch-action: none; font: 700 11px/1.2 inherit; letter-spacing: 1px; color: #e8f6ff; background: rgba(42,49,64,.8); border: 2px solid rgba(255,209,102,.6); }
#radar { position: absolute; right: 16px; top: 52px; width: 110px; height: 110px; opacity: .9; }
@media (pointer: coarse) { #radar { top: 46px; width: 84px; height: 84px; } }