@property --spread { syntax: "<length>"; inherits: true; initial-value: 0px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b1220; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #e8eef7; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50; background: rgba(6, 14, 26, 0.72); backdrop-filter: blur(3px); }
.overlay.hidden { display: none; }

.box { background: linear-gradient(160deg, #14243c, #0d1a2e); border: 1px solid #2e4a72; border-radius: 14px; padding: 28px 34px; min-width: 380px; max-width: 560px; box-shadow: 0 12px 40px rgba(0,0,0,.5); text-align: center; }
.box h1 { font-size: 26px; letter-spacing: 2px; margin-bottom: 4px; color: #a8d4ff; }
.box h2 { font-size: 16px; margin: 14px 0 8px; color: #8fb8e8; }
.box .sub { color: #6d8bb0; font-size: 13px; margin-bottom: 16px; }
.box label { display: block; text-align: left; margin: 12px 0; font-size: 13px; color: #9db8d8; }
.box input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #3a5a86; background: #0e1c30; color: #eaf2fc; margin-top: 4px; font-size: 14px; }
.box input[type=range] { padding: 0; accent-color: #4f8fd8; }
.box button { display: block; width: 100%; padding: 11px; margin-top: 14px; border: none; border-radius: 9px; background: linear-gradient(180deg, #3f86d8, #2a66b0); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.box button:hover { filter: brightness(1.15); }
.box .hint { font-size: 12px; color: #6682a8; margin-top: 12px; line-height: 1.6; }
.box .small { color: #5f7ba0; font-size: 12px; margin-top: 8px; }

.weapon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.weapon-grid .weapon-btn { background: #132640; border: 1px solid #3a5a86; border-radius: 10px; padding: 10px; cursor: pointer; text-align: center; }
.weapon-btn b { display: block; font-size: 16px; color: #d8eaff; }
.weapon-btn i { display: block; font-size: 11px; font-style: normal; color: #7d9ac0; margin-top: 3px; }
.weapon-btn:hover { border-color: #5fa0e8; background: #1a3050; }
.weapon-btn.selected { border-color: #7fd0ff; background: #1e3a60; box-shadow: 0 0 10px rgba(90,170,255,.35); }
#loadout-ok { margin-top: 18px; }

/* 准星 */
#crosshair { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0; z-index: 30; pointer-events: none; transition: transform 0.05s linear, --spread 0.18s ease-out; }
.ch-line { position: absolute; background: #eaf6ff; box-shadow: 0 0 2px rgba(0,0,0,.8); opacity: .95; }
#ch-top, #ch-bottom { width: 2px; height: 10px; left: -1px; }
#ch-top { top: -20px; }
#ch-bottom { top: 10px; }
#ch-left, #ch-right { height: 2px; width: 10px; top: -1px; }
#ch-left { left: -20px; }
#ch-right { left: 10px; }
#ch-dot { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; background: #fff; }
#crosshair.scoped { opacity: 0; }
#crosshair.big { --spread: 12px; }
#ch-top { top: calc(-20px - var(--spread, 0px)); }
#ch-bottom { top: calc(10px + var(--spread, 0px)); }
#ch-left { left: calc(-20px - var(--spread, 0px)); }
#ch-right { left: calc(10px + var(--spread, 0px)); }
#crosshair.big { --spread: 12px; }

#hitmarker, #hitmarker-kill { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; opacity: 0; }
#hitmarker::before, #hitmarker::after, #hitmarker-kill::before, #hitmarker-kill::after { content: ""; position: absolute; background: #fff; width: 2px; height: 6px; }
#hitmarker::before { left: 9px; top: 7px; transform: rotate(45deg); }
#hitmarker::after { left: 9px; top: 7px; transform: rotate(-45deg); }
#hitmarker-kill::before { left: 7px; top: 5px; width: 7px; height: 7px; transform: rotate(45deg); background: #ff5555; }
#hitmarker-kill::after { left: 6px; top: 6px; width: 7px; height: 7px; transform: rotate(-45deg); background: #ff5555; }
#hitmarker.show, #hitmarker-kill.show { opacity: 1; animation: hm 0.3s ease-out; }
@keyframes hm { 0% { transform: scale(1.6); } 100% { transform: scale(0.8); opacity: 0; } }

/* HUD */
#topinfo { position: fixed; top: 14px; left: 0; right: 0; text-align: center; z-index: 20; pointer-events: none; }
#score { font-size: 42px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); letter-spacing: 3px; }
#players { margin-top: 4px; font-size: 14px; color: #c8dcf4; }
#players span { margin: 0 12px; }
#p1 { color: #ff6b6b; }
#p2 { color: #5f9dff; }

#hpbar { position: fixed; left: 22px; bottom: 22px; width: 260px; height: 22px; background: rgba(10,20,34,.6); border: 1px solid #2e4a72; border-radius: 6px; z-index: 20; overflow: hidden; }
#hpfill { height: 100%; width: 100%; background: linear-gradient(180deg, #58c878, #2e9a58); transition: width .2s; }
#hptext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }

#ammobox { position: fixed; right: 22px; bottom: 22px; text-align: right; z-index: 20; pointer-events: none; }
#ammo { font-size: 40px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
#weaponname { font-size: 14px; color: #9db8d8; margin-top: 2px; }

#killfeed { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 25; pointer-events: none; }
#killfeed div { margin-top: 6px; padding: 4px 14px; background: rgba(8,16,30,.55); border-radius: 6px; font-size: 15px; animation: kf 3s ease-out forwards; }
#killfeed .hs { color: #ffd76a; }
@keyframes kf { 0% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 死亡 */
#death { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(120,0,0,.0) 40%, rgba(90,0,0,.45) 100%); z-index: 35; display: none; flex-direction: column; align-items: center; justify-content: center; }
#death.show { display: flex; }
#deathinfo { font-size: 30px; font-weight: 800; color: #ff8a8a; text-shadow: 0 2px 10px #000; }
#deathtimer { font-size: 56px; font-weight: 800; color: #fff; margin: 10px 0; }
#deathhint { font-size: 13px; color: #9db8d8; }

/* 获胜 */
#win { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0,60,120,.15), rgba(0,20,50,.65)); z-index: 40; display: none; align-items: center; justify-content: center; flex-direction: column; }
#win.show { display: flex; }
#wintext { font-size: 64px; font-weight: 900; color: #ffd76a; text-shadow: 0 4px 20px rgba(255,180,0,.5); }
#winhint { font-size: 16px; color: #bcd8f8; margin-top: 12px; }

/* 等待 */
#waiting { position: fixed; inset: 0; background: rgba(6,14,26,.8); z-index: 45; display: none; align-items: center; justify-content: center; }
#waiting.show { display: flex; }