* { box-sizing: border-box; margin: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05030d; font-family: "Segoe UI", Arial, sans-serif; color: #dff8ff; user-select: none; }
#app, #app canvas { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }
#hud, #scope, #vignette, #shieldFx, #flash, #crosshair, #hit { position: fixed; pointer-events: none; }
#hud { inset: 0; }

#stats { position: absolute; right: 20px; top: 56px; width: 280px; }
.bar { position: relative; height: 26px; margin-top: 8px; background: rgba(0, 0, 0, 0.6); border: 3px solid #fff; border-radius: 14px; box-shadow: 0 0 12px #39ff6a; overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b3b, #ffd93d, #39ff6a); transition: width 0.1s; }
.bar.mana { height: 12px; border-color: #b36bff; }
.bar.mana i { background: linear-gradient(90deg, #7a5cff, #00f0ff); }
.bar span { position: absolute; left: 12px; top: 2px; z-index: 1; text-shadow: 0 0 4px #000; font-size: 15px; font-weight: bold; }

#top { position: absolute; top: 16px; right: 20px; font-size: 18px; letter-spacing: 2px; text-shadow: 0 0 8px #00f0ff; }
#top b { color: #ffd93d; font-size: 22px; }
#ammo { position: absolute; right: 24px; bottom: 100px; font-size: 26px; font-weight: bold; letter-spacing: 2px; text-shadow: 0 0 8px #ff2bd6; }
#msg { position: absolute; top: 18%; width: 100%; text-align: center; font-size: 54px; font-weight: bold; letter-spacing: 6px; color: #fff; text-shadow: 0 0 20px #00f0ff, 0 0 40px #ff2bd6; opacity: 0; transition: opacity 0.3s; }
#msg.on { opacity: 1; }

#slots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 28px; }
#weapons, #powers { display: flex; gap: 8px; }
.slot { position: relative; width: 82px; height: 56px; overflow: hidden; background: rgba(5, 10, 25, 0.65); border: 2px solid #335; text-align: center; font-size: 11px; padding-top: 4px; transform: skewX(-8deg); }
.slot b { display: block; font-size: 18px; color: #fff; }
.slot span { position: relative; z-index: 1; }
.slot.on { border-color: #00f0ff; box-shadow: 0 0 14px #00f0ff; background: rgba(0, 80, 110, 0.55); }
.slot.power { border-color: var(--c); }
.slot.power.low { opacity: 0.45; }
.slot i { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: rgba(255, 255, 255, 0.3); }

#crosshair { left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #00f0ff; box-shadow: 0 0 6px #00f0ff; }
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; -webkit-mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); }
#crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; -webkit-mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); }
#hit { left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid #fff; transform: rotate(45deg) scale(0.6); opacity: 0; }
#hit.on { opacity: 1; transform: rotate(45deg) scale(1); transition: transform 0.1s; }
#hit.head { border-color: #ff2b2b; }

#scope { inset: 0; opacity: 0; background: radial-gradient(circle at center, transparent 0 32vmin, #000 32.3vmin); }
#scope.on { opacity: 1; }
#scope::before, #scope::after { content: ""; position: absolute; background: rgba(255, 40, 80, 0.8); }
#scope::before { left: 50%; top: calc(50% - 32vmin); width: 1px; height: 64vmin; }
#scope::after { top: 50%; left: calc(50% - 32vmin); height: 1px; width: 64vmin; }

#vignette { inset: 0; opacity: 0; box-shadow: inset 0 0 160px 50px rgba(255, 0, 40, 0.85); }
#vignette.pulse { animation: fade 0.5s ease-out; }
#flash { inset: 0; opacity: 0; background: radial-gradient(circle, rgba(130, 240, 255, 0.5), rgba(130, 240, 255, 0.05)); }
#flash.pulse { animation: fade 0.35s ease-out; }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }

.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 20px; background: rgba(5, 3, 20, 0.72); backdrop-filter: blur(3px); cursor: pointer; }
.screen h1 { font-size: clamp(36px, 7vw, 76px); letter-spacing: 8px; color: #fff; text-shadow: 0 0 20px #00f0ff, 0 0 50px #ff2bd6; }
.screen p { font-size: 20px; max-width: 640px; }
.help { display: grid; gap: 6px; font-size: 16px; background: rgba(0, 0, 0, 0.4); padding: 14px 24px; border: 1px solid #00f0ff; }
.help b { color: #ffd93d; }
button { font: inherit; font-size: 26px; font-weight: bold; letter-spacing: 4px; padding: 12px 48px; color: #fff; background: linear-gradient(90deg, #39ff6a, #ff7a1a); border: 3px solid #fff; border-radius: 6px; text-shadow: 0 0 8px #000; cursor: pointer; box-shadow: 0 0 32px #39ff6a, 0 0 12px #ff7a1a; transition: transform 0.15s; }
button:hover { filter: brightness(1.15); transform: scale(1.05); }
#shieldFx { inset: 0; opacity: 0; transition: opacity 0.2s; box-shadow: inset 0 0 120px 30px rgba(90, 140, 255, 0.8); background: rgba(90, 140, 255, 0.12); }
#shieldFx.on { opacity: 1; }
.slot.weapon { width: 96px; height: 64px; transform: none; border-radius: 14px; border: 3px solid var(--c); background: linear-gradient(180deg, rgba(10, 25, 15, 0.8), rgba(0, 0, 0, 0.7)); }
.slot.weapon b { font-size: 22px; color: var(--c); text-shadow: 0 0 8px var(--c); }
.slot.weapon span { font-size: 12px; font-weight: bold; }
.slot.weapon.on { transform: translateY(-8px) scale(1.1); box-shadow: 0 0 20px var(--c); background: linear-gradient(180deg, var(--c), rgba(0, 0, 0, 0.6)); }
.slot.weapon.on b { color: #fff; }
.slot.power { width: 64px; height: 64px; padding-top: 8px; transform: none; border-radius: 50%; border: 3px solid var(--c); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.75) 70%); box-shadow: 0 0 14px var(--c), inset 0 0 12px var(--c); }
.slot.power b { font-size: 24px; line-height: 24px; color: var(--c); text-shadow: 0 0 8px var(--c); }
.slot.power span { font-size: 8px; letter-spacing: -0.3px; font-weight: bold; }
.slot.power i { background: rgba(0, 0, 0, 0.6); top: 0; bottom: auto; }
#powers { position: fixed; right: 40px; bottom: 140px; width: 190px; height: 190px; display: block; border-radius: 50%; border: 2px dashed rgba(57, 255, 106, 0.5); box-shadow: 0 0 20px rgba(57, 255, 106, 0.3); }
#powers .slot.power { position: absolute; left: 63px; top: 63px; }
#powers .slot.power:nth-child(1) { transform: translate(0, -95px); }
#powers .slot.power:nth-child(2) { transform: translate(90px, -29px); }
#powers .slot.power:nth-child(3) { transform: translate(56px, 77px); }
#powers .slot.power:nth-child(4) { transform: translate(-56px, 77px); }
#powers .slot.power:nth-child(5) { transform: translate(-90px, -29px); }
#slots { left: 0; right: 0; transform: none; justify-content: center; }
#powers { right: 70px; bottom: 120px; }