/* ============ 钢铁前线 1944 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000;
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif;
  user-select:none; -webkit-user-select:none; cursor:default; }
#app { position:fixed; inset:0; }
#gl { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

/* ---------- 通用屏幕层 ---------- */
.screen { position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(24,28,22,.88), rgba(8,10,7,.96));
  backdrop-filter:blur(3px); }
.panel { text-align:center; color:#d8d4c4; padding:46px 70px; border:1px solid #5a5744;
  background:linear-gradient(180deg, rgba(30,33,26,.92), rgba(16,18,14,.94));
  box-shadow:0 0 80px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.5); }
.panel h2 { font-size:42px; letter-spacing:14px; color:#e8dfc2; margin-bottom:26px;
  font-family:Impact,"Arial Black","Microsoft YaHei",sans-serif; }
.panel.red h2 { color:#ff6a55; }
.panel p { margin:10px 0 22px; color:#b9b3a0; font-size:15px; }
.panel .tip { font-size:12px; color:#7d7767; margin-top:18px; }
.skull { font-size:56px; color:#8a2f24; margin-top:8px; }

/* ---------- 阵亡部署选择 ---------- */
.deployment-panel { width:min(620px,92vw); padding:34px 44px 30px; }
.panel.deployment-panel h2 { margin-bottom:14px; }
.deployment-panel #killerinfo { margin-bottom:12px; }
.deployment-panel .deploy-countdown { margin:0 0 16px; color:#8f8978; font-size:12px; letter-spacing:2px; }
.deploy-countdown b { min-width:42px; display:inline-block; color:#e8dfc2; font-size:18px; letter-spacing:1px; }
.deploy-picker { padding:15px; text-align:left; border:1px solid rgba(181,171,129,.28);
  background:linear-gradient(145deg,rgba(30,35,28,.94),rgba(12,15,12,.94)); }
.deploy-picker label { display:block; margin-bottom:8px; color:#aaa184; font-size:10px; letter-spacing:3px; }
.deploy-picker select { width:100%; height:46px; padding:0 36px 0 12px; color:#ece4cd;
  border:1px solid #696348; background:#242820; font:12px/1.2 inherit; cursor:pointer; }
.deploy-picker select:focus-visible { outline:2px solid #d0bd76; outline-offset:3px; }
.deploy-picker option:disabled { color:#82665f; }
.panel .deploy-status { min-height:17px; margin:9px 0 0; font-size:10px; line-height:1.5; letter-spacing:1px; }
.deploy-status.safe { color:#91b895; }
.deploy-status.danger { color:#d79882; }
.deploy-button { margin:16px auto 0; }
.deploy-button:disabled { opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
.panel .deploy-tip { margin:13px auto 0; color:#777365; font-size:10px; line-height:1.6; }

.mbtn { display:block; width:280px; margin:14px auto; padding:14px 0; font-size:18px; letter-spacing:8px;
  color:#efe8d0; background:linear-gradient(180deg,#6b6f4e,#4a4d36); border:1px solid #8f9370;
  cursor:pointer; transition:all .15s; font-family:inherit; text-shadow:0 1px 2px #000; }
.mbtn:hover { background:linear-gradient(180deg,#8a8f63,#5d6144); transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(0,0,0,.6); }
.mbtn.ghost { background:transparent; border-color:#5a5744; color:#a8a290; }
.mbtn.ghost:hover { border-color:#8f9370; color:#e8dfc2; }

/* ---------- 主菜单 ---------- */
#menu { align-items:flex-start; justify-content:center; overflow-x:hidden; overflow-y:auto;
  padding:clamp(18px,3vh,38px) clamp(14px,3vw,44px); scrollbar-color:#6f6a4d #151812; }
#menu::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.24;
  background:repeating-linear-gradient(112deg,transparent 0 46px,rgba(200,190,145,.025) 47px 48px); }
.menu-inner { position:relative; width:min(1160px,100%); margin:auto; color:#d8d4c4; }
.menu-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px;
  padding:0 3px 15px; border-bottom:1px solid rgba(187,174,119,.36); }
.game-logo { text-align:left; }
.game-logo h1 { color:#ece5cf; font:58px/.85 Impact,"Arial Black","Microsoft YaHei",sans-serif;
  letter-spacing:11px; text-shadow:0 3px 0 #25281f,0 10px 28px #000; }
.game-logo h1 span { display:inline-block; margin-left:13px; color:#b7a768; font-size:23px; letter-spacing:7px; }
.logo-sub { margin-bottom:8px; color:#8f8a73; font-size:10px; letter-spacing:7px; }
.menu-status { display:flex; align-items:center; gap:9px; min-height:34px; padding:7px 11px;
  color:#8f8a77; font-size:9px; letter-spacing:2px; border:1px solid rgba(188,177,130,.24);
  background:rgba(12,15,12,.55); }
.menu-status i { width:7px; height:7px; border-radius:50%; background:#92b887; box-shadow:0 0 9px #6a9d63; }
.menu-status b { color:#a8c69d; font-size:9px; }
.menu-dashboard { display:grid; grid-template-columns:minmax(0,1.14fr) minmax(390px,.86fr); gap:16px; }
.menu-card { position:relative; min-width:0; padding:22px; border:1px solid rgba(181,171,129,.32);
  background:linear-gradient(155deg,rgba(35,39,31,.96),rgba(16,19,15,.97));
  box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.025); overflow:hidden; }
.menu-card::after { content:""; position:absolute; width:120px; height:120px; right:-61px; bottom:-61px;
  border:1px solid rgba(183,167,104,.12); transform:rotate(45deg); pointer-events:none; }
.deployment-card { background:
  radial-gradient(circle at 20% 12%,rgba(122,131,93,.12),transparent 36%),
  repeating-radial-gradient(ellipse at 25% 110%,transparent 0 36px,rgba(184,175,133,.022) 37px 38px),
  linear-gradient(155deg,rgba(35,39,31,.97),rgba(16,19,15,.98)); }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:13px;
  border-bottom:1px solid rgba(187,174,119,.2); }
.card-heading span,.pause-heading span { display:block; margin-bottom:4px; color:#8f876b; font-size:9px; letter-spacing:4px; }
.card-heading h2 { color:#e8e1ce; font-size:21px; font-weight:500; letter-spacing:5px; }
.card-heading > b { color:rgba(185,169,102,.36); font:32px/1 Impact,"Arial Black",sans-serif; letter-spacing:2px; }
.brief { margin:17px 0; color:#aaa590; font-size:13px; line-height:1.75; text-align:left; }
.brief p { margin:5px 0; }
.brief #maptitle { color:#c5bea7; font-size:15px; letter-spacing:1px; }
.brief b { color:#f0e7ca; }
.brief .mission-rule { margin-top:12px; padding:10px 12px; color:#898574; font-size:11px;
  border-left:2px solid #827850; background:rgba(0,0,0,.18); }
.theater-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.theater-row label,.setting-field { display:flex; min-width:0; flex-direction:column; gap:7px; text-align:left; }
.theater-row label > span,.setting-field > span { color:#96907b; font-size:9px; letter-spacing:2px; }
.theater-row select,.setting-field select { width:100%; height:42px; padding:0 34px 0 11px; color:#e2dcc8;
  background:#242820; border:1px solid #595641; font-family:inherit; font-size:12px; cursor:pointer; }
.setting-field input[type=text] { width:100%; height:42px; padding:0 11px; color:#e2dcc8;
  background:#242820; border:1px solid #595641; font-family:inherit; font-size:12px; user-select:text; }
.setting-field input[type=text]::placeholder { color:#716d5d; }
.loadout-strip { display:flex; align-items:center; gap:12px; min-height:42px; margin-top:13px; padding:9px 12px;
  text-align:left; border:1px solid rgba(179,164,102,.22); background:rgba(12,15,12,.45); }
.loadout-strip > span { flex:0 0 auto; color:#807b68; font-size:9px; letter-spacing:2px; }
.loadout-preview { min-width:0; color:#c9bd91; font-size:11px; font-weight:500; letter-spacing:1px;
  text-shadow:0 1px 2px #000; overflow-wrap:anywhere; }
.settings-card { display:flex; flex-direction:column; gap:15px; }
.settings-section { padding:13px 14px 15px; border:1px solid rgba(255,255,255,.075); background:rgba(6,9,7,.18); }
.settings-section h3 { margin-bottom:12px; color:#aaa184; font-size:10px; font-weight:500; letter-spacing:3px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
.setting-field > span { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.setting-field > span b { color:#cbbd89; font-size:10px; font-weight:500; letter-spacing:1px; }
.setting-field input[type=range] { width:100%; height:42px; margin:0; accent-color:#b3a466; cursor:pointer; }
.setting-wide { grid-column:1/-1; }
.settings-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; margin-top:12px; }
.setting-check { position:relative; display:flex; align-items:center; gap:9px; min-height:42px; padding:7px 9px; color:#a9a38f;
  font-size:10px; letter-spacing:1px; border:1px solid rgba(255,255,255,.075); background:rgba(0,0,0,.13); cursor:pointer; }
.setting-check input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.setting-check i { position:relative; width:31px; height:17px; flex:0 0 31px; border:1px solid #5e5b48;
  border-radius:9px; background:#20231d; transition:background .15s,border-color .15s; }
.setting-check i::after { content:""; position:absolute; width:11px; height:11px; left:2px; top:2px;
  border-radius:50%; background:#777363; transition:transform .15s,background .15s; }
.setting-check input:checked + i { border-color:#a7975e; background:#554f34; }
.setting-check input:checked + i::after { background:#e1d6ae; transform:translateX(14px); }
.setting-check input:focus-visible + i { outline:2px solid #d0bd76; outline-offset:3px; }
.multiplayer-section { border-color:rgba(104,151,169,.2); background:rgba(19,38,43,.18); }
.multiplayer-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(145px,.72fr); gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(125,171,184,.16); }
.multiplayer-fields > p { grid-column:1/-1; color:#7f8984; font-size:9px; line-height:1.55; letter-spacing:.5px; }
.multiplayer-fields > .network-status { grid-column:1/-1; }
.network-status { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 10px; color:#999384;
  font-size:9px; letter-spacing:1px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.16); }
.network-status i,.network-hud i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#777267; }
.network-status.connecting i { background:#d0a85d; box-shadow:0 0 8px rgba(208,168,93,.65); animation:blink .65s infinite alternate; }
.network-status.connected i,.network-hud i { background:#7ec58a; box-shadow:0 0 8px rgba(92,194,112,.65); }
.network-status.error { color:#d79787; border-color:rgba(190,92,72,.35); }
.network-status.error i { background:#d56c58; }
.menu-actions { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-top:15px; padding:15px 18px;
  border:1px solid rgba(181,171,129,.28); background:rgba(15,18,14,.88); }
.menu-actions > div { margin-right:auto; text-align:left; }
.menu-actions > div span { display:block; color:#777362; font-size:8px; letter-spacing:3px; }
.menu-actions > div b { display:block; margin-top:3px; color:#a9c79e; font-size:11px; letter-spacing:2px; }
.menu-actions .mbtn { width:310px; margin:0; }
.controls-panel { margin-top:10px; color:#8e8977; border:1px solid rgba(181,171,129,.2); background:rgba(12,15,12,.72); }
.controls-panel summary { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 14px;
  font-size:10px; letter-spacing:2px; cursor:pointer; list-style:none; }
.controls-panel summary::-webkit-details-marker { display:none; }
.controls-panel summary::before { content:"+"; margin-right:9px; color:#b4a76e; font-size:16px; }
.controls-panel[open] summary::before { content:"−"; }
.controls-panel summary span { margin-right:auto; }
.controls-panel summary b { color:#777260; font-size:8px; letter-spacing:3px; }
.controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px 15px; padding:13px 14px 16px;
  font-size:10px; border-top:1px solid rgba(181,171,129,.15); }
.controls div { min-width:0; color:#8b876f; }
.controls b { display:inline-block; min-width:48px; margin-right:5px; padding:2px 6px; color:#d2cbb5;
  text-align:center; border:1px solid #4d4f3d; border-radius:2px; background:#272a22; font-size:9px; }

/* ---------- 暂停设置 ---------- */
#pause { overflow-y:auto; padding:24px 16px; }
.pause-panel { width:min(920px,96vw); max-height:none; padding:26px 30px; text-align:left; }
.pause-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid rgba(181,171,129,.28); }
.panel .pause-heading h2 { margin:0; color:#e8e1cd; font-size:32px; letter-spacing:9px; }
.pause-heading > b { padding:6px 9px; color:#91896b; font-size:10px; letter-spacing:2px;
  border:1px solid rgba(181,171,129,.3); background:rgba(0,0,0,.18); }
.pause-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pause-options .settings-section { min-width:0; }
.pause-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:17px; }
.pause-actions .mbtn { width:250px; margin:0; }
.pause-actions .menu-return { border-color:#6e5149; color:#bca49b; }
.pause-actions .menu-return:hover { border-color:#b47262; color:#f0c4b7; background:rgba(103,49,39,.22); }
.pause-panel .tip { margin:13px 0 0; text-align:center; }

/* ---------- 通用菜单交互 ---------- */
.menu-inner :is(button,select,input,summary):focus-visible,.pause-panel :is(button,select,input,summary):focus-visible {
  outline:2px solid #d0bd76; outline-offset:3px; }
.menu-inner select:hover,.pause-panel select:hover { border-color:#92885f; }

/* ---------- 结算统计 ---------- */
.stats { display:flex; gap:36px; justify-content:center; margin:22px 0 28px; }
.stats div { text-align:center; }
.stats span { display:block; font-size:38px; color:#e8dfc2; font-family:Impact,"Arial Black",sans-serif; }
.stats label { font-size:12px; color:#8b876f; letter-spacing:4px; }
#endtitle.win { color:#ffd77a; } #endtitle.lose { color:#ff6a55; }

/* ==================== HUD ==================== */
#hud { position:absolute; inset:0; z-index:20; pointer-events:none; overflow:hidden; }

/* ---------- Tab 战况统计 ---------- */
#scoreboard { position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:3vh 3vw; color:#d8d4c4; background:rgba(5,8,7,.88); pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .1s ease,visibility 0s linear .1s; }
#scoreboard.show { opacity:1; visibility:visible; transition:opacity .08s ease; }
.scoreboard-shell { width:min(1180px,94vw); max-height:92vh; padding:22px 26px 14px;
  border:1px solid rgba(185,176,142,.42); background:linear-gradient(180deg,rgba(28,32,27,.97),rgba(12,15,13,.98));
  box-shadow:0 24px 90px rgba(0,0,0,.72),inset 0 0 50px rgba(0,0,0,.32); overflow:hidden; }
.scoreboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:0 4px 15px; border-bottom:1px solid rgba(185,176,142,.24); }
.score-kicker { display:block; margin-bottom:5px; color:#978f72; font-size:10px; letter-spacing:5px; }
.scoreboard-head h2 { color:#eee7d2; font:34px/1 Impact,"Arial Black","Microsoft YaHei",sans-serif;
  letter-spacing:5px; text-shadow:0 2px 10px #000; }
.score-meta { display:flex; gap:12px; align-items:center; color:#bdb59b; font-size:12px; letter-spacing:2px; }
.score-meta span { min-width:84px; padding:7px 10px; text-align:center; border:1px solid rgba(185,176,142,.25);
  background:rgba(0,0,0,.24); }
.score-teams { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 0 10px; }
.score-team { min-width:0; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); }
.score-team.allied { --team:#72b9eb; --team-bg:rgba(54,116,157,.24); }
.score-team.axis { --team:#ef7866; --team-bg:rgba(153,68,55,.24); }
.score-team-head { display:flex; justify-content:space-between; align-items:center; min-height:68px;
  padding:10px 14px; border-bottom:2px solid var(--team); background:linear-gradient(90deg,var(--team-bg),transparent); }
.score-team-head span { color:#8f8b7c; font-size:9px; letter-spacing:3px; }
.score-team-head h3 { margin-top:2px; color:var(--team); font-size:19px; letter-spacing:3px; }
.score-team-head strong { color:#f0ead8; font:34px/1 Impact,"Arial Black",sans-serif; letter-spacing:2px; }
.score-team-summary { padding:7px 14px; color:#999485; font-size:10px; letter-spacing:2px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.score-table-wrap { max-height:48vh; overflow:hidden; }
.score-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
.score-table th { padding:7px 6px; color:#817d70; font-size:9px; font-weight:400; letter-spacing:2px;
  text-align:left; border-bottom:1px solid rgba(255,255,255,.09); }
.score-table td { height:30px; padding:5px 6px; color:#bdb8aa; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; border-bottom:1px solid rgba(255,255,255,.055); }
.score-table th:nth-child(1),.score-table td:nth-child(1) { width:25%; padding-left:12px; }
.score-table th:nth-child(2),.score-table td:nth-child(2) { width:16%; }
.score-table th:nth-child(3),.score-table td:nth-child(3) { width:27%; }
.score-table th:nth-child(4),.score-table td:nth-child(4),
.score-table th:nth-child(5),.score-table td:nth-child(5) { width:8%; text-align:center; }
.score-table th:nth-child(6),.score-table td:nth-child(6) { width:16%; text-align:right; padding-right:12px; }
.score-table tr.me td { color:#f4edd8; background:var(--team-bg); }
.score-table tr.dead td { color:#6f6d65; }
.score-table .status-alive { color:#9bcf9e; }
.score-table .status-dead { color:#a66b63; }
.scoreboard-foot { padding-top:2px; color:#777367; font-size:10px; letter-spacing:3px; text-align:center; }
.scoreboard-foot b { color:#c8c0a5; }
@media (max-width:800px) {
  #scoreboard { padding:1.5vh 2vw; }
  .scoreboard-shell { width:96vw; max-height:97vh; padding:14px 12px 9px; overflow-y:auto; }
  .scoreboard-head h2 { font-size:25px; }
  .score-kicker { letter-spacing:3px; }
  .score-teams { grid-template-columns:1fr; gap:10px; }
  .score-table-wrap { max-height:none; }
  .score-table td { height:27px; }
  .score-meta { flex-direction:column; gap:4px; }
}

/* 准星 */
#crosshair { position:absolute; left:50%; top:50%; width:0; height:0; --gap:6px; --len:9px; }
.ch { position:absolute; background:#e8f0e0; box-shadow:0 0 2px #000, 0 0 4px rgba(0,0,0,.8); }
.ch.t { width:2px; height:var(--len); left:-1px; top:calc(-1 * var(--gap) - var(--len)); }
.ch.b { width:2px; height:var(--len); left:-1px; top:var(--gap); }
.ch.l { width:var(--len); height:2px; top:-1px; left:calc(-1 * var(--gap) - var(--len)); }
.ch.r { width:var(--len); height:2px; top:-1px; left:var(--gap); }
.ch.dot { width:2px; height:2px; left:-1px; top:-1px; border-radius:50%; }
#crosshair.ads .ch.t,#crosshair.ads .ch.b,#crosshair.ads .ch.l,#crosshair.ads .ch.r { opacity:.35; }

/* 击中标记 */
#hitmarker { position:absolute; left:50%; top:50%; opacity:0; }
#hitmarker span { position:absolute; width:11px; height:2px; background:#fff; box-shadow:0 0 3px #000; }
#hitmarker span:nth-child(1){ transform:translate(-14px,-11px) rotate(45deg); }
#hitmarker span:nth-child(2){ transform:translate(4px,-11px) rotate(-45deg); }
#hitmarker span:nth-child(3){ transform:translate(-14px,9px) rotate(-45deg); }
#hitmarker span:nth-child(4){ transform:translate(4px,9px) rotate(45deg); }
#hitmarker.pop { animation:hm .28s ease-out; }
#hitmarker.kill span { background:#ff4b3a; }
@keyframes hm { 0%{opacity:1; transform:scale(1.5);} 100%{opacity:0; transform:scale(.9);} }

/* 受击反馈 */
#dmgvig { position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(190,10,0,.55) 100%); }
#healvig { position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(80,160,60,.28) 100%); }
#suppressionfx { position:absolute; inset:-2%; opacity:0; transition:opacity .12s; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at center, transparent 34%, rgba(28,32,30,.24) 63%, rgba(8,10,10,.86) 100%);
  filter:contrast(1.06) saturate(.72); }
#dmgdir { position:absolute; left:50%; top:50%; width:130px; height:130px; margin:-65px 0 0 -65px;
  opacity:0; border-radius:50%; transition:opacity .4s;
  background:conic-gradient(from -25deg, transparent 0deg, rgba(255,40,20,.85) 25deg, transparent 50deg);
  -webkit-mask:radial-gradient(circle, transparent 56px, #000 57px); mask:radial-gradient(circle, transparent 56px, #000 57px); }

/* 顶部票数栏 */
#topbar { position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:18px; }
.ticket { display:flex; align-items:center; gap:9px; padding:5px 14px;
  background:rgba(10,12,10,.55); border:1px solid rgba(190,190,160,.25); }
.tlabel { font-size:12px; letter-spacing:3px; color:#b9b3a0; }
.tnum { font-size:24px; font-weight:bold; font-family:Impact,"Arial Black",sans-serif; min-width:56px; text-align:center; }
.ticket.us .tnum { color:#8fc3ff; } .ticket.them .tnum { color:#ff8a76; }
.ticket.us { border-left:3px solid #5a9fe0; } .ticket.them { border-right:3px solid #e06a55; }
#flagpips { display:flex; gap:8px; }
.pip { width:40px; height:40px; border-radius:50%; border:2px solid #999; display:flex; align-items:center;
  justify-content:center; background:rgba(10,12,10,.6); position:relative; transition:border-color .3s, background .3s; }
.pip i { font-style:normal; font-weight:bold; font-size:17px; color:#ccc; font-family:Impact,"Arial Black",sans-serif; }
.pip.us { border-color:#5a9fe0; background:rgba(40,90,150,.5); } .pip.us i { color:#a8d4ff; }
.pip.them { border-color:#e06a55; background:rgba(150,50,35,.5); } .pip.them i { color:#ffb0a0; }
.pip.contested { animation:blink .5s infinite alternate; }
.pip.capping::after { content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,240,180,.7); border-top-color:transparent; animation:spin 1.2s linear infinite; }
@keyframes blink { from{filter:brightness(1);} to{filter:brightness(1.9);} }
@keyframes spin { to{transform:rotate(360deg);} }

/* 罗盘 */
#compass { position:absolute; top:64px; left:50%; transform:translateX(-50%);
  background:rgba(10,12,10,.45); border:1px solid rgba(190,190,160,.2); border-radius:3px; }

/* 小地图 */
#mapwrap { position:absolute; top:14px; right:14px; padding:4px; background:rgba(10,12,10,.55);
  border:1px solid rgba(190,190,160,.25); }
#minimap { display:block; }
.perf-hud { position:absolute; top:14px; left:14px; display:flex; gap:4px; padding:5px;
  color:#9e9988; background:rgba(8,11,9,.72); border:1px solid rgba(190,190,160,.23); }
.perf-hud span { min-width:78px; padding:4px 7px; font-size:8px; letter-spacing:1px; border-left:2px solid #777052; }
.perf-hud b { margin-left:4px; color:#ded7c2; font:12px/1 Impact,"Arial Black",sans-serif; letter-spacing:1px; }
.network-hud { position:absolute; top:220px; right:14px; display:flex; align-items:center; gap:8px; min-width:196px;
  padding:7px 9px; color:#9f9a89; background:rgba(8,11,9,.72); border:1px solid rgba(190,190,160,.23);
  font-size:9px; letter-spacing:1px; }
.network-hud span { margin-right:auto; }
.network-hud b { color:#d9d3c0; font-size:10px; }

/* 目标点 3D 标记 */
#objlayer { position:absolute; inset:0; }
.objm { position:absolute; transform:translate(-50%,-50%); text-align:center; transition:opacity .2s; }
.objm b { display:block; font-size:15px; font-family:Impact,"Arial Black",sans-serif; color:#ddd;
  text-shadow:0 0 4px #000, 0 0 8px #000; }
.objm s { display:block; width:10px; height:10px; margin:2px auto; transform:rotate(45deg);
  background:#999; border:1px solid rgba(0,0,0,.5); }
.objm em { display:block; font-style:normal; font-size:10px; color:#cfc9b4; text-shadow:0 0 3px #000; }
.objm.us s { background:#5a9fe0; } .objm.them s { background:#e06a55; }
.objm.contested b { animation:blink .5s infinite alternate; }

/* 击杀信息流 */
#killfeed { position:absolute; top:110px; left:16px; list-style:none; font-size:13px; }
#killfeed li { margin-bottom:5px; padding:4px 10px; background:rgba(10,12,10,.55);
  border-left:2px solid #666; color:#cfc9b4; animation:feedin .18s ease-out; text-shadow:0 1px 2px #000; }
#killfeed li .us { color:#8fc3ff; } #killfeed li .them { color:#ff8a76; }
#killfeed li .me { color:#ffe08a; font-weight:bold; }
#killfeed li .wp { color:#9a947e; font-size:11px; margin:0 6px; }
#killfeed li.fade { opacity:0; transition:opacity .6s; }
@keyframes feedin { from{transform:translateX(-16px); opacity:0;} to{transform:none; opacity:1;} }

/* 战场聊天 */
.chat-panel { position:absolute; left:22px; bottom:118px; z-index:42; display:flex; width:min(430px,calc(100vw - 44px));
  flex-direction:column; gap:6px; color:#d9d5c7; pointer-events:none; }
.chat-messages { display:flex; max-height:152px; min-height:0; flex-direction:column; justify-content:flex-end; gap:3px;
  overflow:hidden; mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 100%); }
.chat-message { position:relative; width:fit-content; max-width:100%; padding:4px 9px 4px 10px; color:#d4d0c2;
  border-left:2px solid #898471; background:linear-gradient(90deg,rgba(8,11,9,.76),rgba(8,11,9,.42) 84%,transparent);
  font-size:12px; line-height:1.42; text-shadow:0 1px 2px #000; overflow-wrap:anywhere; animation:chatin .16s ease-out; }
.chat-message .chat-author { margin-right:6px; color:#ebe5d1; font-weight:600; }
.chat-message .chat-channel-tag { margin-right:6px; color:#918c7b; font-size:9px; letter-spacing:1px; }
.chat-message.all { border-left-color:#b5ad8e; }
.chat-message.team,.chat-message.ally { border-left-color:#5a9fe0; background:linear-gradient(90deg,rgba(25,66,98,.72),rgba(8,11,9,.36) 84%,transparent); }
.chat-message.team .chat-author,.chat-message.ally .chat-author { color:#9ed0ff; }
.chat-message.enemy { border-left-color:#e06a55; }
.chat-message.enemy .chat-author { color:#ff9d8d; }
.chat-message.self { border-left-color:#d4bd68; }
.chat-message.self .chat-author { color:#ffe39a; }
.chat-message.system { padding-left:10px; color:#c5bb91; border-left-color:#aa985c;
  background:linear-gradient(90deg,rgba(74,66,37,.66),rgba(8,11,9,.32) 84%,transparent); font-size:11px; letter-spacing:.4px; }
.chat-message.fade { opacity:0; transform:translateX(-5px); transition:opacity .35s,transform .35s; }
.chat-composer { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; min-height:38px;
  border:1px solid rgba(190,190,160,.34); border-left:3px solid #b3a466; background:rgba(8,11,9,.92);
  box-shadow:0 8px 26px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.025); pointer-events:auto; }
.chat-composer:focus-within { border-color:rgba(211,199,143,.72); border-left-color:#e0c66d; }
.chat-channel { align-self:stretch; display:flex; min-width:56px; align-items:center; justify-content:center; padding:0 10px;
  color:#c8bc8d; border-right:1px solid rgba(190,190,160,.18); font-size:9px; letter-spacing:2px; }
#chatInput { width:100%; min-width:0; height:36px; padding:0 10px; color:#eee9d9; border:0; outline:0; background:transparent;
  font:12px/1.2 inherit; user-select:text; -webkit-user-select:text; caret-color:#e2cc78; }
#chatInput::placeholder { color:#6f6c61; }
.chat-hint { padding:0 10px; color:#777366; font-size:8px; letter-spacing:1px; white-space:nowrap; }
@keyframes chatin { from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

/* 中央横幅 */
#banner { position:absolute; top:23%; left:50%; transform:translateX(-50%); font-size:26px;
  letter-spacing:8px; color:#efe8d0; text-shadow:0 2px 6px #000; opacity:0; white-space:nowrap;
  font-weight:bold; }
#banner.show { animation:bannerin 2.6s ease-out; }
@keyframes bannerin { 0%{opacity:0; transform:translateX(-50%) scale(1.25);} 12%{opacity:1; transform:translateX(-50%) scale(1);}
  80%{opacity:1;} 100%{opacity:0;} }

/* 占领进度条 */
#capbar { position:absolute; top:31%; left:50%; transform:translateX(-50%); width:240px; height:10px;
  background:rgba(10,12,10,.6); border:1px solid rgba(190,190,160,.35); opacity:0; transition:opacity .2s; }
#capfill { height:100%; width:0%; background:#b3a466; transition:width .1s linear; }
#capbar span { position:absolute; top:-24px; width:100%; text-align:center; font-size:13px;
  letter-spacing:4px; color:#e8dfc2; text-shadow:0 1px 3px #000; }

/* 左下生命 */
#vitals { position:absolute; left:22px; bottom:22px; }
#hpnum { font-size:44px; font-family:Impact,"Arial Black",sans-serif; color:#e8f0e0;
  text-shadow:0 2px 4px #000; line-height:1; }
#hpbarwrap { width:220px; height:7px; background:rgba(10,12,10,.7); border:1px solid rgba(190,190,160,.3); margin-top:6px; }
#hpbar { height:100%; width:100%; background:linear-gradient(90deg,#7fae6a,#a8d490); transition:width .15s; }
#hpbar.low { background:linear-gradient(90deg,#c0392b,#e74c3c); }
#kdrow { margin-top:8px; font-size:12px; color:#a8a290; display:flex; gap:16px; text-shadow:0 1px 2px #000; }

/* 右下武器 */
#weaponbox { position:absolute; right:22px; bottom:22px; text-align:right; }
#classinfo { margin-bottom:6px; color:#a9c6a0; font-size:11px; letter-spacing:2px; text-shadow:0 1px 3px #000; }
#wname { font-size:14px; letter-spacing:4px; color:#b9b3a0; text-shadow:0 1px 2px #000; }
#ammorow { margin-top:2px; text-shadow:0 2px 4px #000; }
#mag { font-size:42px; font-family:Impact,"Arial Black",sans-serif; color:#e8f0e0; }
#mag.empty { color:#ff6a55; }
#reserve { font-size:17px; color:#9a947e; margin-left:6px; }
#nades { font-size:13px; color:#b3a466; letter-spacing:4px; margin-top:2px; text-shadow:0 1px 2px #000; }
#firemode { font-size:11px; color:#7d7767; letter-spacing:2px; margin-top:2px; }
#reloadhint { position:absolute; right:22px; bottom:118px; font-size:14px; color:#ffb45e;
  letter-spacing:3px; opacity:0; text-shadow:0 1px 3px #000; }
#reloadhint.show { opacity:1; animation:blink .6s infinite alternate; }

/* 底部中央提示 */
#hint { position:absolute; bottom:120px; left:50%; transform:translateX(-50%); font-size:13px;
  color:#cfc9b4; letter-spacing:3px; text-shadow:0 1px 3px #000; opacity:0; transition:opacity .3s; }

/* ==================== 载具 HUD ==================== */
#vehicleHud { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .12s; }
#vehicleHud.show { opacity:1; visibility:visible; }
#hud.vehicle-active #crosshair,#hud.vehicle-active #vitals,#hud.vehicle-active #weaponbox,
#hud.vehicle-active #reloadhint { opacity:0 !important; visibility:hidden; }
#vehicleReticle { position:absolute; left:50%; top:50%; width:94px; height:94px; transform:translate(-50%,-50%);
  color:#e5e0bd; filter:drop-shadow(0 1px 2px #000); }
#vehicleReticle .vring { position:absolute; inset:18px; border:1px solid currentColor; border-radius:50%; opacity:.68; }
#vehicleReticle .vline { position:absolute; display:block; background:currentColor; opacity:.86; }
#vehicleReticle .vline.left,#vehicleReticle .vline.right { top:46px; width:25px; height:1px; }
#vehicleReticle .vline.left { left:0; } #vehicleReticle .vline.right { right:0; }
#vehicleReticle .vline.top,#vehicleReticle .vline.bottom { left:46px; width:1px; height:25px; }
#vehicleReticle .vline.top { top:0; } #vehicleReticle .vline.bottom { bottom:0; }
#vehicleReticle b { position:absolute; left:44px; top:44px; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; }
#vehicleReticle.fighter { width:128px; height:82px; color:#d9efcf; }
#vehicleReticle.fighter .vring { inset:14px 37px; border-radius:50%; }
#vehicleReticle.fighter .vline.left,#vehicleReticle.fighter .vline.right { top:40px; width:37px; }
#vehicleReticle.fighter .vline.top,#vehicleReticle.fighter .vline.bottom { left:63px; height:16px; }
#vehicleReticle.fighter b { left:61px; top:38px; }
.vehicle-panel { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:min(760px,78vw);
  display:grid; grid-template-columns:1.25fr 1fr 1.25fr .8fr; align-items:center; gap:14px; padding:12px 18px;
  border-top:2px solid rgba(206,198,158,.72); border-bottom:1px solid rgba(206,198,158,.3);
  background:linear-gradient(90deg,rgba(10,14,12,.22),rgba(12,16,14,.88) 12%,rgba(12,16,14,.88) 88%,rgba(10,14,12,.22));
  box-shadow:0 12px 34px rgba(0,0,0,.42); }
.vehicle-panel span,.vehicle-panel small { color:#9e9985; font-size:9px; letter-spacing:2px; }
.vehicle-ident span { display:block; margin-bottom:3px; }
.vehicle-ident strong { color:#eee8d0; font-size:18px; letter-spacing:2px; white-space:nowrap; }
.vehicle-health { display:grid; grid-template-columns:1fr auto; gap:3px 8px; }
.vehicle-health b { color:#d9e9d2; font-size:12px; font-variant-numeric:tabular-nums; }
.vehicle-hp-track { grid-column:1/3; height:5px; background:rgba(255,255,255,.11); overflow:hidden; }
#vehicleHpBar { display:block; width:100%; height:100%; background:linear-gradient(90deg,#bb5948,#e0c86d 42%,#83c58d); transition:width .12s; }
.vehicle-weapon-readout { display:grid; grid-template-columns:1fr auto; gap:3px 8px; border-left:1px solid rgba(255,255,255,.12); padding-left:14px; }
.vehicle-weapon-readout span { color:#ddd7bf; font-size:11px; }
.vehicle-weapon-readout b { color:#fff0b6; font-size:12px; text-align:right; }
.vehicle-weapon-readout small { grid-column:1/3; }
.vehicle-motion { display:flex; flex-direction:column; align-items:flex-end; gap:4px; border-left:1px solid rgba(255,255,255,.12); }
.vehicle-motion b { color:#e7e1c9; font:18px/1 Impact,"Arial Black",sans-serif; letter-spacing:1px; }
.vehicle-motion .hidden { visibility:hidden; }
@media (max-width:760px) {
  .vehicle-panel { width:94vw; grid-template-columns:1fr 1fr; gap:9px; padding:9px 12px; }
  .vehicle-ident strong { font-size:14px; }
  .vehicle-motion { align-items:flex-start; border-left:0; }
}

/* 暗场过渡 */
#fadelayer { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .5s; z-index:60; }
#fadelayer.on { opacity:1; }

/* 低血量心跳 */
#vitals.critical #hpnum { color:#ff6a55; animation:blink .5s infinite alternate; }

@media (max-height:820px) and (min-width:901px) {
  #menu { padding-top:16px; padding-bottom:16px; }
  .menu-header { margin-bottom:12px; padding-bottom:10px; }
  .game-logo h1 { font-size:47px; }
  .game-logo h1 span { font-size:19px; }
  .menu-card { padding:17px; }
  .brief { margin:11px 0; line-height:1.55; }
  .brief .mission-rule { margin-top:8px; padding:7px 10px; }
  .theater-row { margin-top:12px; }
  .settings-card { gap:10px; }
  .settings-section { padding:10px 12px 12px; }
  .settings-section h3 { margin-bottom:8px; }
  .settings-grid { gap:8px 9px; }
  .settings-checks { margin-top:8px; }
  .menu-actions { margin-top:10px; padding-top:10px; padding-bottom:10px; }
}
@media (max-width:900px) {
  #menu { padding:20px 16px; }
  .menu-inner { max-width:720px; }
  .menu-dashboard { grid-template-columns:1fr; }
  .menu-header { align-items:center; }
  .settings-card { gap:12px; }
  .controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pause-panel { width:min(680px,96vw); }
  .pause-options { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  #menu { padding:12px 10px 20px; }
  .menu-header { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:12px; }
  .game-logo h1 { font-size:43px; letter-spacing:7px; }
  .game-logo h1 span { margin-left:8px; font-size:17px; letter-spacing:4px; }
  .logo-sub { font-size:8px; letter-spacing:4px; }
  .menu-status { align-self:stretch; justify-content:center; }
  .menu-card { padding:15px 13px; }
  .card-heading h2 { font-size:18px; }
  .theater-row,.settings-grid,.settings-checks,.multiplayer-fields { grid-template-columns:1fr; }
  .setting-wide { grid-column:auto; }
  .loadout-strip { align-items:flex-start; flex-direction:column; gap:5px; }
  .menu-actions { align-items:stretch; flex-direction:column; gap:12px; }
  .menu-actions > div { margin-right:0; text-align:center; }
  .menu-actions .mbtn { width:100%; }
  .controls-panel summary b { display:none; }
  .controls { grid-template-columns:1fr; }
  #pause { padding:12px 8px; }
  .pause-panel { width:100%; padding:20px 13px; }
  .deployment-panel { width:96vw; padding:25px 16px 22px; }
  .panel.deployment-panel h2 { font-size:32px; letter-spacing:8px; }
  .deployment-panel .deploy-button { width:100%; }
  .panel .pause-heading h2 { font-size:27px; letter-spacing:6px; }
  .pause-actions { align-items:stretch; flex-direction:column; }
  .pause-actions .mbtn { width:100%; }
  .perf-hud { top:8px; left:8px; flex-direction:column; }
  .network-hud { top:8px; right:8px; min-width:150px; }
  #mapwrap { transform:scale(.72); transform-origin:top right; }
  #compass { width:72vw; }
  .chat-panel { left:10px; bottom:108px; width:calc(100vw - 20px); }
  .chat-messages { max-height:112px; }
  .chat-message { max-width:94%; font-size:11px; }
  .chat-hint { display:none; }
  .chat-composer { grid-template-columns:auto minmax(0,1fr); }
}
@media (max-height:620px) {
  .chat-panel { bottom:102px; }
  .chat-messages { max-height:86px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}