/* ═══════════ IRON FRONTLINE — HUD & Menus ═══════════ */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --acc:#ff9d2e; --acc2:#ffc46b; --red:#ff3b30; --hp:#7dce4f;
  --panel:rgba(10,14,18,.72); --line:rgba(255,157,46,.55);
  --font:'Bahnschrift','Segoe UI','Arial Narrow',sans-serif;
}
html,body { width:100%; height:100%; overflow:hidden; background:#0a0c0e; font-family:var(--font); user-select:none; }
#game-root { position:fixed; inset:0; }
#c { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
.hidden { display:none !important; }

/* ─────────── HUD ─────────── */
#hud { position:absolute; inset:0; pointer-events:none; color:#e8e4da; }

/* 准星 */
#crosshair { position:absolute; left:50%; top:50%; width:0; height:0; }
#crosshair .ch { position:absolute; background:#f2eee2; box-shadow:0 0 3px rgba(0,0,0,.9); }
#crosshair .ch-t { width:2px; height:9px; left:-1px; }
#crosshair .ch-b { width:2px; height:9px; left:-1px; }
#crosshair .ch-l { width:9px; height:2px; top:-1px; }
#crosshair .ch-r { width:9px; height:2px; top:-1px; }
#crosshair .ch-dot { position:absolute; width:2px; height:2px; left:-1px; top:-1px; background:var(--acc); box-shadow:0 0 3px rgba(0,0,0,.9); }

/* 小队面板 */
#squad-panel { position:absolute; top:206px; right:18px; text-align:right; }
#squad-panel .sq-label { font-size:10px; letter-spacing:3px; color:#9a948a; margin-bottom:3px; }
#squad-icons { display:flex; gap:3px; justify-content:flex-end; }
.sq-ico { width:9px; height:16px; background:#7dce4f; border:1px solid rgba(0,0,0,.4); }
.sq-ico.dead { background:rgba(120,120,110,.25); border-color:rgba(255,255,255,.12); }
.sq-count { font-size:12px; color:#cfc9bb; margin-top:3px; }
.sq-count b { color:#7dce4f; font-size:15px; }
#squad-panel.low .sq-count b { color:var(--red); }

/* 载具警报 */
#vehicle-alert { position:absolute; left:50%; top:17%; transform:translateX(-50%);
  font-size:16px; letter-spacing:4px; font-weight:700; color:#ffdf6b;
  background:rgba(60,20,5,.75); border:1px solid rgba(255,160,40,.6); padding:8px 26px;
  animation:blink 0.7s infinite; text-shadow:0 0 8px rgba(0,0,0,.9); }

/* 命中标记 */
#hitmarker { position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; }
#hitmarker span { position:absolute; width:2.5px; height:11px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.8); }
#hitmarker span:nth-child(1){ transform:translate(-9px,-15px) rotate(-45deg); }
#hitmarker span:nth-child(2){ transform:translate(6px,-15px) rotate(45deg); }
#hitmarker span:nth-child(3){ transform:translate(-9px,4px) rotate(45deg); }
#hitmarker span:nth-child(4){ transform:translate(6px,4px) rotate(-45deg); }
#hitmarker.show { animation:hm .25s ease-out; }
#hitmarker.kill span { background:var(--red); }
#hitmarker.head span { background:var(--acc); }
@keyframes hm { 0%{opacity:1; transform:scale(1.35);} 100%{opacity:0; transform:scale(.9);} }

/* 得分飘字 */
#score-pop { position:absolute; left:50%; top:44%; transform:translateX(-50%); font-size:20px; font-weight:700; color:var(--acc2); text-shadow:0 0 6px rgba(0,0,0,.9); opacity:0; }
#score-pop.show { animation:sp 0.9s ease-out; }
@keyframes sp { 0%{opacity:0; transform:translate(-50%,14px);} 15%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-26px);} }

/* 狙击镜 */
#scope { position:absolute; inset:0; }
#scope .scope-mask { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, transparent 0 34vmin, rgba(0,0,0,.97) 35vmin); }
#scope .scope-ring { position:absolute; left:50%; top:50%; width:70vmin; height:70vmin; transform:translate(-50%,-50%); border-radius:50%; border:3px solid #050505; box-shadow:inset 0 0 60px rgba(0,0,0,.85); }
#scope .scope-line { position:absolute; background:rgba(10,10,10,.9); }
#scope .scope-h { left:50%; top:50%; width:70vmin; height:1.5px; transform:translate(-50%,-50%); }
#scope .scope-v { left:50%; top:50%; height:70vmin; width:1.5px; transform:translate(-50%,-50%); }
#scope .scope-mildot { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:rgba(200,30,30,.95); }

/* 顶部罗盘 */
#compass { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:340px; height:26px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }
#compass-strip { position:absolute; top:0; height:100%; white-space:nowrap; font-size:13px; letter-spacing:0; color:#cfc9bb; }
#compass-strip span { display:inline-block; position:absolute; top:3px; transform:translateX(-50%); }
#compass-strip span.card { color:var(--acc); font-weight:700; font-size:14px; }
#compass-strip i { position:absolute; top:17px; width:1px; height:5px; background:rgba(255,255,255,.35); }
#compass .compass-center { position:absolute; left:50%; top:0; width:2px; height:100%; background:var(--acc); transform:translateX(-50%); }

/* 顶部战况 */
#top-bar { position:absolute; top:14px; left:18px; display:flex; gap:14px; }
.tb-item { background:var(--panel); border-left:2px solid var(--line); padding:5px 12px 6px; min-width:64px; }
.tb-item .tb-label { display:block; font-size:10px; letter-spacing:2px; color:#9a948a; }
.tb-item b { font-size:20px; color:#f2eee2; font-weight:700; }
#tb-hiscore { color:var(--acc2) !important; font-size:16px !important; }

/* 雷达 */
#radar { position:absolute; top:14px; right:18px; width:150px; height:150px; border-radius:50%;
  background:rgba(8,12,10,.66); border:1px solid rgba(255,157,46,.4); box-shadow:0 0 18px rgba(0,0,0,.5) inset; }

/* 击杀播报 */
#killfeed { position:absolute; top:180px; right:18px; width:240px; text-align:right; }
.kf-row { margin-bottom:5px; font-size:13px; color:#ddd6c8; background:rgba(8,10,12,.55); padding:4px 10px; border-right:2px solid var(--acc); animation:kfin .2s ease-out; }
.kf-row .kf-hs { color:var(--acc); font-weight:700; }
.kf-row.fade { opacity:0; transition:opacity .6s; }
@keyframes kfin { from{transform:translateX(18px); opacity:0;} to{transform:none; opacity:1;} }

/* 武器面板 */
#weapon-panel { position:absolute; right:18px; bottom:16px; text-align:right; }
#weapon-slots { display:flex; gap:4px; justify-content:flex-end; margin-bottom:8px; }
.wslot { width:40px; height:30px; background:rgba(8,10,12,.55); border:1px solid rgba(255,255,255,.14); font-size:10px; color:#8d887d;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
.wslot small { opacity:.7; }
.wslot.on { border-color:var(--acc); color:#fff; background:rgba(50,34,10,.7); }
#ammo-panel { background:var(--panel); border-right:2px solid var(--line); padding:6px 14px; display:inline-block; }
#wp-name { font-size:13px; letter-spacing:1px; color:#cfc9bb; }
#wp-mode { font-size:10px; letter-spacing:2px; color:#8d887d; margin-top:1px; }
#ammo-row { margin-top:2px; }
#ammo-cur { font-size:34px; font-weight:700; color:#fff; line-height:1; }
#ammo-cur.low { color:var(--red); }
#ammo-sep { color:#6f6a60; margin:0 4px; font-size:18px; }
#ammo-res { font-size:16px; color:#b3ad9f; }
#reload-hint { font-size:11px; color:var(--acc); letter-spacing:2px; margin-top:3px; animation:blink 1s infinite; }
@keyframes blink { 50%{opacity:.25;} }
#nade-panel { margin-top:6px; display:flex; justify-content:flex-end; align-items:center; gap:6px; background:rgba(8,10,12,.55); padding:4px 10px; display:inline-flex; }
#nade-panel .nade-ico { color:var(--acc); font-size:14px; }
#nade-count { color:#fff; font-size:16px; }
.key-hint { font-size:10px; color:#8d887d; border:1px solid rgba(255,255,255,.2); padding:1px 4px; }

/* 生命面板 */
#health-panel { position:absolute; left:18px; bottom:16px; width:210px; }
#hp-num { font-size:26px; font-weight:700; color:var(--hp); text-shadow:0 0 8px rgba(0,0,0,.8); }
#hp-num.low { color:var(--red); animation:blink .8s infinite; }
#hp-bar { height:8px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); margin:4px 0 3px; }
#hp-fill { height:100%; width:100%; background:linear-gradient(90deg,#5da639,var(--hp)); transition:width .15s; }
#hp-fill.low { background:linear-gradient(90deg,#a11710,var(--red)); }
#hp-label { font-size:10px; letter-spacing:3px; color:#9a948a; }

/* 中央播报 */
#center-msg { position:absolute; left:50%; top:26%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .3s; }
#center-msg.show { opacity:1; }
#center-msg .cm-big { font-size:40px; font-weight:700; letter-spacing:8px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.9); }
#center-msg .cm-sub { font-size:15px; letter-spacing:4px; color:var(--acc2); margin-top:6px; }
#sub-msg { position:absolute; left:50%; bottom:26%; transform:translateX(-50%); font-size:14px; letter-spacing:2px; color:var(--acc2);
  background:rgba(8,10,12,.6); padding:5px 14px; border:1px solid rgba(255,157,46,.35); opacity:0; transition:opacity .25s; }
#sub-msg.show { opacity:1; }

/* 受击 */
#dmg-vignette { position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(160,10,5,.55) 78%, rgba(120,0,0,.8) 100%); }
#lowhp-overlay { position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(130,0,0,.5) 100%); }
#lowhp-overlay.beat { animation:beat 0.9s infinite; }
@keyframes beat { 0%,100%{opacity:.25;} 12%{opacity:.7;} 24%{opacity:.3;} 36%{opacity:.55;} }
#damage-flash { position:absolute; inset:0; background:rgba(255,40,30,.28); opacity:0; }
#damage-flash.show { animation:df .3s ease-out; }
@keyframes df { from{opacity:1;} to{opacity:0;} }

/* 方向指示 */
#dmg-dir-wrap { position:absolute; left:50%; top:50%; }
.dmg-dir { position:absolute; left:-90px; top:-90px; width:180px; height:180px; }
.dmg-dir::before { content:''; position:absolute; left:50%; top:-34px; transform:translateX(-50%);
  border-left:17px solid transparent; border-right:17px solid transparent; border-bottom:22px solid rgba(255,45,35,.85);
  filter:drop-shadow(0 0 6px rgba(255,0,0,.6)); }
.dmg-dir.hide { opacity:0 !important; }

/* ─────────── 菜单 / 全屏界面 ─────────── */
#menu, .overlay-screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:20; }
.menu-bg { position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(12,15,20,.88), rgba(5,7,9,.94)),
  repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px); }
.menu-bg::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 65%, rgba(255,120,20,.10), transparent 55%); }
.menu-inner { position:relative; text-align:center; z-index:2; }
.menu-kicker { font-size:12px; letter-spacing:6px; color:#8d887d; margin-bottom:10px; }
.menu-title { font-size:60px; font-weight:700; letter-spacing:9px; color:#f2eee2; text-shadow:0 4px 30px rgba(255,130,20,.25); line-height:1; }
.menu-title span { color:var(--acc); }
.menu-sub { font-size:16px; letter-spacing:12px; color:#6f6a60; margin:10px 0 40px; }
.menu-btns { display:flex; flex-direction:column; gap:10px; align-items:center; }
.mbtn { font-family:var(--font); font-size:17px; letter-spacing:5px; padding:12px 54px; min-width:250px;
  background:rgba(20,26,32,.8); color:#d8d2c4; border:1px solid rgba(255,255,255,.16); cursor:pointer; transition:all .12s; }
.mbtn:hover { border-color:var(--acc); color:#fff; background:rgba(60,40,12,.85); transform:translateX(3px); }
.mbtn.primary { border-color:var(--acc); color:var(--acc2); font-weight:700; }
.mbtn.primary:hover { background:var(--acc); color:#15100a; }
.menu-foot { margin-top:44px; font-size:11px; letter-spacing:3px; color:#5c584f; }

.menu-panel { position:absolute; z-index:3; background:rgba(10,13,17,.96); border:1px solid rgba(255,157,46,.3);
  padding:34px 44px; max-width:520px; }
.menu-panel h2 { color:var(--acc); letter-spacing:6px; font-size:22px; margin-bottom:20px; }
.ctrl-table td { padding:5px 16px 5px 0; color:#c9c3b5; font-size:15px; }
.ctrl-table td:last-child { color:#fff; }
.ctrl-tip { color:#8d887d; font-size:13px; line-height:1.7; margin:14px 0 20px; border-left:2px solid var(--line); padding-left:12px; }
.back-btn { margin-top:6px; }
.set-row { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; color:#c9c3b5; font-size:15px; }
.set-row label { display:flex; justify-content:space-between; }
.set-row label b { color:var(--acc2); }
.set-row input[type=range] { width:100%; accent-color:var(--acc); }
.set-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--acc); }

.overlay-screen { background:rgba(5,6,8,.82); flex-direction:column; z-index:30; }
.overlay-screen h2 { color:#f2eee2; font-size:40px; letter-spacing:10px; margin-bottom:8px; }
.go-kicker { color:var(--red); font-size:15px; letter-spacing:6px; margin-bottom:6px; }
.go-stats { display:grid; grid-template-columns:repeat(3,130px); gap:14px 20px; margin:28px 0 34px; text-align:center; }
.go-stats span { display:block; font-size:11px; letter-spacing:2px; color:#8d887d; margin-bottom:3px; }
.go-stats b { font-size:26px; color:#fff; }
.go-stats div:last-child b { color:var(--acc); }

#loading-tip { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); font-size:11px; letter-spacing:3px; color:#5c584f; z-index:5; }
#loading-tip.off { display:none; }