*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#060b12;
  font-family:"Bahnschrift","DIN Alternate","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:#e8f1f8;user-select:none;-webkit-user-select:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
kbd{background:#172a3b;border:1px solid #38546a;border-radius:3px;padding:1px 6px;font-size:12px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}


/* 内置瞄具：中心保持通透，散布环使用真实角度投影得到的像素半径。 */
.aim-overlay{--aim-size:min(72vmin,620px);--aim-spread-radius:12px;position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--ui-accent,#64e5ee)}
.aim-overlay.hidden{display:none!important}
.aim-lens{position:absolute;left:50%;top:50%;width:152px;height:100px;transform:translate(-50%,-50%)}
.aim-lines{position:absolute;inset:0;opacity:.75;background:
 linear-gradient(currentColor,currentColor) left top/22px 1px,
 linear-gradient(currentColor,currentColor) left top/1px 14px,
 linear-gradient(currentColor,currentColor) right top/22px 1px,
 linear-gradient(currentColor,currentColor) right top/1px 14px,
 linear-gradient(currentColor,currentColor) left bottom/22px 1px,
 linear-gradient(currentColor,currentColor) left bottom/1px 14px,
 linear-gradient(currentColor,currentColor) right bottom/22px 1px,
 linear-gradient(currentColor,currentColor) right bottom/1px 14px;
 background-repeat:no-repeat;filter:drop-shadow(0 0 1px rgba(0,16,28,.85))}
.aim-dot,.aim-spread{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.aim-dot{width:4px;height:4px;background:currentColor;box-shadow:0 0 2px 1px rgba(0,16,28,.85),0 0 6px currentColor}
.aim-spread{width:calc(var(--aim-spread-radius)*2);height:calc(var(--aim-spread-radius)*2);border:1px solid currentColor;box-shadow:0 0 1px rgba(0,16,28,.8);opacity:.7}
.aim-zoom{position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);padding:3px 8px;border-radius:4px;background:var(--ui-hud,rgba(8,19,31,.8));color:var(--ui-text,#e8f1f8);font-size:11px;font-weight:650;letter-spacing:1px;white-space:nowrap}
.aim-overlay.scoped .aim-lens{width:var(--aim-size);height:var(--aim-size);border:1px solid currentColor;border-radius:50%;box-shadow:0 0 0 100vmax rgba(3,10,18,.80),inset 0 0 0 5px rgba(3,10,18,.2),0 0 0 4px rgba(3,10,18,.65)}
.aim-overlay.scoped .aim-lines{inset:5px;border-radius:50%;opacity:.58;background:
 linear-gradient(currentColor,currentColor) left center/calc(50% - 22px) 1px,
 linear-gradient(currentColor,currentColor) right center/calc(50% - 22px) 1px,
 linear-gradient(currentColor,currentColor) center top/1px calc(50% - 22px),
 linear-gradient(currentColor,currentColor) center bottom/1px calc(50% - 22px);
 background-repeat:no-repeat}
.aim-overlay.scoped .aim-lines:after{content:"";position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);background:
 repeating-linear-gradient(90deg,transparent 0,transparent 24px,currentColor 24px,currentColor 25px,transparent 25px,transparent 49px) center/100% 7px,
 repeating-linear-gradient(0deg,transparent 0,transparent 24px,currentColor 24px,currentColor 25px,transparent 25px,transparent 49px) center/7px 100%;background-repeat:no-repeat;mask-image:radial-gradient(circle,transparent 22px,#000 23px)}
.aim-overlay.scoped .aim-spread{opacity:.42}
.aim-overlay.scoped .aim-zoom{bottom:14px}

/* 四臂内缘始终等于真实弹道散布半径，game.js 每帧更新此变量。 */
#crosshair{--spread-radius:12px;position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair i{position:absolute;background:rgba(153,248,255,.94);box-shadow:0 0 3px #00121f}
#crosshair .ct{left:-1px;bottom:var(--spread-radius);width:2px;height:8px}
#crosshair .cb{left:-1px;top:var(--spread-radius);width:2px;height:8px}
#crosshair .cl{top:-1px;right:var(--spread-radius);height:2px;width:8px}
#crosshair .cr{top:-1px;left:var(--spread-radius);height:2px;width:8px}
#crosshair .cd{left:-2px;top:-2px;width:4px;height:4px;background:#fff;border-radius:50%}
#crosshair.hide{opacity:0}
#crosshair.hit i{background:#fff;box-shadow:0 0 4px #000,0 0 9px rgba(255,255,255,.9)}

#hitmarker{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
#hitmarker i{position:absolute;background:#fff;box-shadow:0 0 4px #000}
#hitmarker i:nth-child(1){left:14px;top:0;width:2px;height:9px}
#hitmarker i:nth-child(2){left:14px;bottom:0;width:2px;height:9px}
#hitmarker i:nth-child(3){top:14px;left:0;height:2px;width:9px}
#hitmarker i:nth-child(4){top:14px;right:0;height:2px;width:9px}
/* 命中后变白并停留约 1 秒再淡出 */
#hitmarker.on{opacity:1;animation:hm 1s ease-out forwards}
#hitmarker.kill i{background:#ff5a4a}
@keyframes hm{
  0%  {transform:translate(-50%,-50%) rotate(45deg) scale(.5);opacity:1}
  12% {transform:translate(-50%,-50%) rotate(45deg) scale(1.1);opacity:1}
  20% {transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}
  75% {transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:0}
}

#vignette{position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(ellipse at center,rgba(140,0,0,0) 40%,rgba(150,10,0,.75) 100%)}

/* 顶栏 */
#topbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;
  background:rgba(8,19,31,.55);border:1px solid rgba(120,195,220,.22);border-radius:4px;padding:7px 18px;backdrop-filter:blur(3px)}
.tk{text-align:center;min-width:86px}
.tk .lbl{display:block;font-size:10px;letter-spacing:2px;color:#8daabd}
.tk b{font-size:24px;line-height:1}
.tk.att b{color:#ff8a5c}.tk.def b{color:#6fc9ff}
#objline{display:flex;gap:5px}
.obj{min-width:30px;height:30px;line-height:28px;padding:0 3px;text-align:center;
  border:2px solid #557183;border-radius:4px;
  font-weight:700;font-size:12.5px;color:#a4bbc9;background:rgba(0,0,0,.3)}
.obj.active{border-color:#76eff7;color:#76eff7;animation:pulse 1.3s infinite}
.obj.taken{border-color:#ff7b4a;background:rgba(255,90,50,.28);color:#ffd9cb}
.obj.locked{opacity:.35}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(90,226,239,.55)}50%{box-shadow:0 0 0 7px rgba(90,226,239,0)}}

/* 占领条 */
#capbox{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:300px;text-align:center}
.captitle{font-size:13px;letter-spacing:1px;margin-bottom:5px;text-shadow:0 1px 3px #000}
.captitle b{color:#76eff7}
#capstate{color:#ff6b5c}
.capbar{height:9px;background:rgba(0,0,0,.6);border:1px solid rgba(145,204,226,.3);border-radius:2px;overflow:hidden}
.capbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#30c6df,#a1fbff);transition:width .1s linear}

/* 击杀播报 */
#killfeed{position:absolute;top:150px;right:14px;width:340px;font-size:12.5px;
  display:flex;flex-direction:column;align-items:flex-end}
#killfeed div{margin-bottom:4px;background:rgba(8,19,31,.6);padding:3px 8px;border-radius:3px;
  white-space:nowrap;animation:kf .3s ease-out}
@keyframes kf{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.kf-att{color:#ff9a72}.kf-def{color:#7fd0ff}.kf-me{color:#76eff7;font-weight:700}

#minimap{position:absolute;top:14px;right:14px;width:300px;height:118px;
  background:rgba(6,17,30,.62);border:1px solid rgba(120,195,220,.25);border-radius:4px}

#botleft{position:absolute;left:22px;bottom:20px}
.hpwrap{display:flex;align-items:center;gap:9px}
.hpbar{width:190px;height:12px;background:rgba(0,0,0,.6);border:1px solid rgba(145,204,226,.3);border-radius:2px;overflow:hidden}
.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#30c6bf,#8af5e0);transition:width .15s}
.hpbar i.low{background:linear-gradient(90deg,#c4402a,#ff8452)}
#hpnum{font-size:19px;font-weight:700;min-width:38px}
#statusline{margin-top:6px;font-size:12px;color:#8eabba}
#statusline b{color:#76eff7}

#botright{position:absolute;right:22px;bottom:18px;text-align:right}
#wname{font-size:14px;letter-spacing:2px;color:#bdd2e1}
#ammo b{font-size:38px;line-height:1;font-weight:700}
#ammo span{font-size:15px;color:#87a4b7;margin-left:4px}
#wstate{font-size:12px;height:16px;color:#30c6df;letter-spacing:1px}

#objarrow{position:absolute;left:50%;top:calc(50% - 105px);transform:translateX(-50%);text-align:center;opacity:.85}
#objarrow span{display:block;font-size:15px;color:#76eff7;text-shadow:0 0 6px #000}
#objarrow em{font-size:11px;font-style:normal;color:#d7e9f4;text-shadow:0 0 4px #000}

#toast{position:absolute;left:50%;top:36%;transform:translateX(-50%);font-size:26px;font-weight:700;
  letter-spacing:4px;text-shadow:0 2px 10px #000;opacity:0;transition:opacity .4s;color:#76eff7;white-space:nowrap}
#toast.on{opacity:1}

/* ---------- 菜单 ---------- */
#menu,.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#15273e,#050a13 70%)}
.panel{width:min(1050px,94vw);max-height:94vh;overflow-y:auto;overscroll-behavior:contain;padding:28px 36px 32px;
  background:rgba(10,21,35,.86);border:1px solid rgba(105,162,191,.28);border-radius:8px;box-shadow:0 20px 90px #000,0 0 80px rgba(38,158,197,.06)}
.panel h1{font-size:38px;letter-spacing:8px;margin-bottom:0;color:#effaff}
.panel h1 small{display:block;font-size:11px;letter-spacing:6px;color:#7ab5cc;margin-top:7px}
.section{margin-bottom:18px}
.section h2{font-size:12px;letter-spacing:3px;color:#99b7ca;margin-bottom:8px;font-weight:600}
.wclass{font-size:10.5px;letter-spacing:3px;color:#628497;margin:10px 0 6px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.card{flex:1 1 205px;text-align:left;padding:13px 14px;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid rgba(105,162,191,.22);color:#cfdfeb;
  font-family:inherit;transition:.13s}
.card:hover{background:rgba(255,255,255,.09);border-color:rgba(140,222,242,.5)}
.card.sel{border-color:#76eff7;background:rgba(90,226,239,.14);color:#fff}
.card b{display:block;font-size:14.5px;margin-bottom:3px;color:#effaff}
.card p{font-size:11.5px;line-height:1.55;color:#9bb3c3}
.card .stat{margin-top:6px;font-size:10.5px;color:#83a2b6;display:flex;gap:10px;flex-wrap:wrap}
.card .stat i{font-style:normal;color:#c3deed}
.mod{font-size:12.5px;color:#c1d9e7;display:flex;align-items:center;gap:8px;cursor:pointer;margin-top:10px}
.nomod{font-size:12px;color:#7698ad}
.keys p{font-size:11.5px;color:#9bb3c3;line-height:2}
#startBtn,#againBtn,#changeKit{margin-top:8px;width:100%;padding:13px;font-size:16px;letter-spacing:6px;
  font-family:inherit;font-weight:700;cursor:pointer;color:#07151e;border:0;border-radius:5px;
  background:linear-gradient(180deg,#a5f9ff,#45c7df)}
#startBtn:hover,#againBtn:hover,#changeKit:hover{filter:brightness(1.1)}
#changeKit{background:rgba(255,255,255,.1);color:#dcebf4;font-size:13px;letter-spacing:3px;padding:10px}

.overlay{background:rgba(6,14,26,.72);backdrop-filter:blur(3px)}
.dpanel{text-align:center;width:min(560px,92vw);padding:28px 30px;
  background:rgba(10,21,35,.9);border:1px solid rgba(105,162,191,.25);border-radius:8px}
.dpanel h2{font-size:30px;letter-spacing:10px;margin-bottom:10px}
#deathTitle{color:#ff6b4a}
.dpanel p{font-size:13px;color:#9eb7c9;margin-bottom:14px}
.respawn{font-size:13px;color:#bed7e7;margin-bottom:14px}
.respawn b{font-size:22px;color:#76eff7}
#endStats{font-size:13px;color:#bdd2e1;line-height:2;margin-bottom:14px}
#endStats span{color:#76eff7;font-weight:700}

/* ---------- 结算排名榜 ---------- */
#endBoard{margin-bottom:16px;max-height:36vh;overflow-y:auto}
.lbhead{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:2px;
  color:#7698ad;padding:0 8px 5px;border-bottom:1px solid rgba(105,162,191,.18);margin-bottom:5px}
.lbrow{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;
  border-left:3px solid transparent;text-align:left}
.lbrow+.lbrow{margin-top:3px}
.lbrow.att{border-left-color:#c8703c}
.lbrow.def{border-left-color:#3f77ad}
.lbrow.me{background:rgba(90,226,239,.14);box-shadow:inset 0 0 0 1px rgba(90,226,239,.35)}
.lbrow .rk{width:26px;text-align:center;font-size:15px;font-weight:700;color:#83a2b6;flex:none}
.lbrow.top1 .rk{color:#76eff7}.lbrow.top2 .rk{color:#d8dce4}.lbrow.top3 .rk{color:#d2955c}
.lbrow .pic{width:34px;height:34px;flex:none;border-radius:4px;overflow:hidden;
  background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(105,162,191,.2)}
.lbrow .pic svg{display:block;width:100%;height:100%}
.lbrow .nm{flex:1;min-width:0;font-size:13px;color:#dcebf4;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lbrow .nm em{font-style:normal;font-size:10.5px;color:#83a2b6;margin-left:5px}
.lbrow .kd{width:62px;flex:none;text-align:right;font-size:12px;color:#9eb7c9}
.lbrow .kd b{color:#e8f1f8}
.lbrow .sc{width:66px;flex:none;text-align:right;font-size:14px;font-weight:700;color:#76eff7}
.lbgap{text-align:center;color:#628497;font-size:12px;letter-spacing:3px;padding:2px 0}

#clickhint{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);z-index:10;
  font-size:13px;letter-spacing:2px;color:#e0eff7;background:rgba(0,0,0,.55);padding:8px 18px;border-radius:4px}

/* ---------- 开场：无人机检视战场 ---------- */
#intro{position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(6,14,26,.55) 0%,rgba(6,14,26,0) 28%,
             rgba(6,14,26,0) 72%,rgba(6,14,26,.62) 100%)}
#intro .ieye{font-size:11px;letter-spacing:6px;color:#95cbd9;
  animation:iblink 1.4s ease-in-out infinite}
#intro .iname{font-size:52px;font-weight:700;letter-spacing:14px;color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.85);margin-top:10px;
  animation:irise .9s cubic-bezier(.2,.8,.2,1) both}
#intro .ien{font-size:13px;letter-spacing:11px;color:#76eff7;margin-top:2px;
  animation:irise .9s cubic-bezier(.2,.8,.2,1) .12s both}
#intro .isub{font-size:12.5px;letter-spacing:4px;color:#c1d9e7;margin-top:14px;
  border-top:1px solid rgba(145,204,226,.3);padding-top:10px;
  animation:irise .9s cubic-bezier(.2,.8,.2,1) .24s both}
@keyframes iblink{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes irise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 积分弹跳 ---------- */
#scorepop{position:absolute;left:50%;top:56%;transform:translateX(-50%);text-align:center;
  font-size:17px;font-weight:700;color:#76eff7;text-shadow:0 1px 6px #000;opacity:0;transition:opacity .25s}
#scorepop.on{opacity:1}

/* ---------- 倒地 / 救援 ---------- */
.revbar{height:8px;width:220px;margin:8px auto;background:rgba(0,0,0,.6);
  border:1px solid rgba(145,204,226,.3);border-radius:2px;overflow:hidden}
.revbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#30c6bf,#8af5e0)}
#downbox{position:absolute;left:50%;top:30%;transform:translateX(-50%);text-align:center;
  background:rgba(20,8,6,.72);border:1px solid rgba(255,120,90,.4);border-radius:6px;padding:14px 26px}
#downbox b{font-size:22px;letter-spacing:6px;color:#ff6b4a}
#downbox .bleed{margin-top:6px;font-size:13px;color:#e8c9bd}
#downbox .bleed i{font-style:normal;font-size:18px;color:#76eff7}
#downbox p{margin-top:4px;font-size:11.5px;color:#b09a90}
#downbox .revbar i{background:linear-gradient(90deg,#30c6df,#a1fbff)}
#revivebox{position:absolute;left:50%;bottom:36%;transform:translateX(-50%);text-align:center;
  font-size:14px;color:#e0eff7;background:rgba(7,24,37,.66);border:1px solid rgba(102,219,225,.35);
  border-radius:5px;padding:9px 20px}
#revivebox b{color:#85f0e3}

/* ---------- 补给箱 ---------- */
#cratehint{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);
  font-size:14px;color:#e0eff7;background:rgba(7,24,37,.7);
  border:1px solid rgba(90,226,239,.4);border-radius:5px;padding:8px 18px}
#crate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px,86vw);background:rgba(8,22,37,.94);
  border:1px solid rgba(90,226,239,.4);border-radius:7px;padding:18px 20px;
  box-shadow:0 16px 50px rgba(0,0,0,.7);pointer-events:auto}
#crate .ctitle{font-size:19px;font-weight:700;letter-spacing:7px;color:#76eff7;text-align:center}
#crate .csub{font-size:11.5px;color:#83a2b6;text-align:center;margin:5px 0 14px}
#crate .crow{display:grid;grid-template-columns:26px 1fr;gap:4px 11px;align-items:center;
  padding:8px 11px;border-radius:5px;cursor:pointer;border:1px solid transparent;
  background:rgba(255,255,255,.035)}
#crate .crow+.crow{margin-top:6px}
#crate .crow:hover{background:rgba(90,226,239,.14);border-color:rgba(90,226,239,.5)}
#crate .crow b{grid-row:1/3;width:26px;height:26px;line-height:24px;text-align:center;
  border:1px solid rgba(90,226,239,.5);border-radius:4px;color:#76eff7;font-size:13px}
#crate .cn{font-size:14px;color:#effaff;font-weight:600}
#crate .cd{font-size:11.5px;color:#99b6c7;line-height:1.5}

/* ---------- 投掷物 HUD ---------- */
#nadehud{position:absolute;right:22px;bottom:96px;text-align:right}
#nadehud .nn{font-size:13px;letter-spacing:2px;color:#bdd2e1}
#nadehud .nc{font-size:26px;font-weight:700;color:#76eff7;margin-left:7px}
#nadehud em{display:block;font-style:normal;font-size:11px;color:#83a2b6;margin-top:1px}

/* ---------- 闪光弹白屏 ---------- */
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:28}

/* ---------- 核弹白闪 ---------- */
#nukeflash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:30;transition:opacity 1.6s}
#nukeflash.on{opacity:1;transition:opacity .05s}

/* ---------- 战术地图 ---------- */
#bigmap{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:rgba(4,10,20,.82);backdrop-filter:blur(3px)}
#bmc{background:rgba(8,22,37,.9);border:1px solid rgba(120,195,220,.35);border-radius:6px;
  width:min(1000px,94vw);height:auto}
#bmc.targeting{cursor:crosshair;border-color:#76eff7}
#bmhint{font-size:12.5px;letter-spacing:2px;color:#a4bbc9}
#skillbar{display:flex;gap:10px;align-items:stretch}
#skillbar .myscore{align-self:center;text-align:center;font-size:12px;color:#8daabd;margin-right:8px}
#skillbar .myscore b{display:block;font-size:22px;color:#76eff7}
.skillbtn{width:118px;padding:9px 8px;text-align:center;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.05);border:1px solid rgba(105,162,191,.3);border-radius:5px;color:#cfdfeb}
.skillbtn b{display:block;font-size:15px;color:#effaff;margin-bottom:2px}
.skillbtn span{font-size:11px;color:#76eff7}
.skillbtn small{display:block;font-size:10px;color:#83a2b6;margin-top:3px;line-height:1.4}
.skillbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(90,226,239,.6)}
.skillbtn.off{opacity:.38;cursor:not-allowed}
.skillbtn.off:hover{background:rgba(255,255,255,.05);border-color:rgba(105,162,191,.3)}
.skillbtn.armed{border-color:#76eff7;background:rgba(90,226,239,.16)}


/* ---------- 星港战术终端 ---------- */
:root{color-scheme:dark;--cyan:#76eff7;--panel:#0d1c2d;--line:rgba(127,192,220,.2)}
#menu{background:radial-gradient(ellipse at 85% 10%,rgba(22,112,147,.24),transparent 46%),
  linear-gradient(135deg,#0c1728,#050911 70%)}
#menu::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;
  background-image:linear-gradient(rgba(105,174,208,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(105,174,208,.09) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(120deg,#000,transparent 65%)}
.panel{position:relative;scrollbar-width:thin;scrollbar-color:#365e76 #0a1726;
  border-top:2px solid rgba(118,239,247,.7);background:linear-gradient(150deg,rgba(17,35,54,.97),rgba(7,16,29,.98));}
.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-thumb{background:#365e76;border-radius:6px}
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:23px}
.eyebrow{font-size:9px;letter-spacing:2.5px;color:#6b9ab4;margin-bottom:12px}
.system-state{text-align:right;font-size:11px;color:#99ccd8;letter-spacing:1px;padding-bottom:2px;white-space:nowrap}
.system-state span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:7px}
.system-state small{display:block;font-size:8px;letter-spacing:1.7px;color:#567d95;margin-top:9px}
.mission-strip{display:grid;grid-template-columns:1fr .8fr 1.35fr;gap:15px;margin:0 0 28px;padding:16px 18px;
  border:1px solid var(--line);border-radius:4px;background:rgba(29,59,80,.2)}
.mission-strip>div+div{border-left:1px solid var(--line);padding-left:20px}
.mission-strip strong{display:block;font-size:20px;letter-spacing:1px;font-weight:600;color:#d6f6ff;line-height:1.25}
.mission-strip>div>span{display:block;font-size:10px;color:#7595ab;margin-top:7px;letter-spacing:.5px}
.mission-teams em{font-style:normal}.mission-teams em:first-child{color:#ff9b68}.mission-teams em:last-child{color:#70bdff}
.mission-teams span{font-size:9px;color:#597b91;letter-spacing:2px;vertical-align:middle;margin:0 11px}
.section{padding-top:17px;border-top:1px solid rgba(114,170,201,.11);margin-bottom:21px}
.section h2{font-size:11px;letter-spacing:2px;color:#7fc3d5;margin-bottom:11px}
.wclass{color:#6b91ab;letter-spacing:2px;margin:12px 0 8px}
.card{background:linear-gradient(145deg,rgba(100,150,185,.06),rgba(38,66,91,.04));border-color:rgba(127,179,210,.18)}
.card.sel{background:linear-gradient(110deg,rgba(75,196,224,.17),rgba(38,110,139,.06));box-shadow:inset 3px 0 0 #76eff7;border-color:rgba(105,232,245,.8)}
.card:focus-visible,.skillbtn:focus-visible,button:focus-visible{outline:2px solid #d4ffff;outline-offset:3px}
.card.team b{font-size:15px}.card.team b span{float:right;font-size:10px;font-weight:500;letter-spacing:1.3px;margin-top:4px}
.card.team[data-team="att"] b{color:#ffac81}.card.team[data-team="def"] b{color:#8dccff}
.card.team[data-team="att"].sel{border-color:#ec955f;box-shadow:inset 3px 0 0 #f7a36f;background:rgba(171,84,36,.12)}
.card.team[data-team="def"].sel{border-color:#6bb9f6;box-shadow:inset 3px 0 0 #70bdff;background:rgba(42,110,175,.15)}
.card .stat{border-top:1px solid rgba(113,171,200,.13);padding-top:7px;margin-top:9px;gap:8px 13px}
.mod input{accent-color:var(--cyan)}
.keys p{font-size:11px;line-height:2.3}.keys .fire-note{color:#83c6d3;margin-top:8px;line-height:1.8}
#startBtn{display:flex;justify-content:space-between;align-items:center;padding:16px 21px;text-align:left;letter-spacing:3px;box-shadow:0 3px 24px rgba(54,210,231,.12)}
#startBtn span{font-size:11px;letter-spacing:2px;font-weight:600}
#topbar,#minimap,#botleft,#botright{box-shadow:0 4px 25px rgba(0,9,19,.2)}
#topbar{top:18px;border-top:2px solid rgba(118,239,247,.55);background:rgba(7,20,33,.75);backdrop-filter:blur(8px)}
#botleft,#botright{padding:13px 16px;border:1px solid var(--line);border-top:2px solid rgba(105,219,236,.5);border-radius:4px;background:rgba(6,18,30,.73);backdrop-filter:blur(5px)}
#botleft{left:20px;bottom:18px}#botright{right:20px;bottom:18px;min-width:180px}
#wname{font-size:12px;color:#9bd7e6}#ammo b{font-size:42px;font-variant-numeric:tabular-nums}
#hpnum,#clocknum,.tk b{font-variant-numeric:tabular-nums}
#nadehud{right:27px;bottom:138px}
#killfeed div{border-left:2px solid rgba(118,239,247,.3)}
#skillbar{max-width:94vw;flex-wrap:wrap;justify-content:center}
@media(max-width:1050px){#minimap{width:230px;height:91px;top:91px;right:12px}#killfeed{top:196px;width:300px;font-size:11px}#topbar{gap:13px}.tk{min-width:70px}}
@media(max-width:640px){.panel{width:96vw;max-height:96vh;padding:23px 18px}.panel h1{font-size:29px;letter-spacing:5px}.menu-head{gap:10px}.system-state{display:none}.mission-strip{gap:8px;padding:12px 10px;grid-template-columns:1fr .8fr 1.25fr}.mission-strip>div+div{padding-left:10px}.mission-strip strong{font-size:16px}.mission-strip>div>span{font-size:9px;line-height:1.6}.card{flex-basis:220px}.obj{min-width:24px;height:26px;line-height:22px;font-size:10px}#topbar{gap:8px;padding:7px 9px}#objline{gap:3px}.tk{min-width:48px}.tk .lbl{font-size:8px;letter-spacing:1px}.tk b{font-size:20px}#botleft{left:9px;padding:10px}#botright{right:9px;padding:10px;min-width:140px}#statusline{max-width:230px;font-size:10px}.hpbar{width:135px}#intro .iname{font-size:34px;letter-spacing:7px}#toast{font-size:19px;letter-spacing:2px}}

/* ---------- 可选色系：界面与 HUD 共享语义配色 ---------- */
:root{color-scheme:light;
  --ui-bg:#e6eff4;--ui-panel:#f8fcff;--ui-card:#ffffff;--ui-text:#173044;
  --ui-muted:#50697a;--ui-line:#b5cbd9;--ui-accent:#08768a;--ui-accent-soft:#dcf4f7;
  --ui-button-text:#ffffff;--ui-hud:rgba(248,252,255,.94);
  --cyan:var(--ui-accent);--panel:var(--ui-panel);--line:var(--ui-line);
  --team-att:#a94c1a;--team-def:#1765ab;--danger:#b52b3b;--ui-success:#187249;
  --rank-silver:#546b7b;--rank-bronze:#8c541b}
:root[data-theme="neon"],:root[data-theme="classic"]{color-scheme:dark;
  --team-att:#ffac81;--team-def:#8dccff;--danger:#ff766b;--ui-success:#87e8af;
  --rank-silver:#d5dfe8;--rank-bronze:#e7ae78}
html,body{background:var(--ui-bg);color:var(--ui-text)}
kbd{background:var(--ui-card);border-color:var(--ui-line);color:var(--ui-text)}
#menu{background:linear-gradient(135deg,var(--ui-bg),var(--ui-panel))}
#menu::before{opacity:.35;background-image:linear-gradient(var(--ui-line) 1px,transparent 1px),linear-gradient(90deg,var(--ui-line) 1px,transparent 1px)}
.panel{background:var(--ui-panel);border-color:var(--ui-line);border-top-color:var(--ui-accent);
  box-shadow:0 20px 80px rgba(16,34,50,.18);scrollbar-color:var(--ui-line) var(--ui-panel)}
.panel::-webkit-scrollbar-thumb{background:var(--ui-line)}
.panel h1,.mission-strip strong,.card b,.card .stat i,.mod,.lbrow .nm,.lbrow .kd b{color:var(--ui-text)}
.panel h1 small,.section h2,.system-state,.keys .fire-note,.respawn b,#endStats span{color:var(--ui-accent)}
.eyebrow,.system-state small,.wclass,.card p,.card .stat,.keys p,.nomod,.mission-strip>div>span,
.mission-teams span,.dpanel p,.respawn,#endStats,.lbhead,.lbrow .rk,.lbrow .nm em,.lbrow .kd,.lbgap{color:var(--ui-muted)}
.system-state span{background:var(--ui-accent);box-shadow:0 0 9px var(--ui-accent-soft)}
.section,.card .stat,.lbhead{border-color:var(--ui-line)}
.mission-strip{background:var(--ui-card);border-color:var(--ui-line)}
.mission-strip>div+div{border-color:var(--ui-line)}
.mission-teams em:first-child{color:var(--team-att)}.mission-teams em:last-child{color:var(--team-def)}
.card{background:var(--ui-card);border-color:var(--ui-line);color:var(--ui-text)}
.card:hover{background:var(--ui-accent-soft);border-color:var(--ui-accent)}
.card.sel{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-text);box-shadow:inset 3px 0 0 var(--ui-accent)}
.card.team[data-team="att"] b{color:var(--team-att)}.card.team[data-team="def"] b{color:var(--team-def)}
.card.team[data-team="att"].sel{background:var(--ui-card);border-color:var(--team-att);box-shadow:inset 3px 0 0 var(--team-att)}
.card.team[data-team="def"].sel{background:var(--ui-card);border-color:var(--team-def);box-shadow:inset 3px 0 0 var(--team-def)}
.card:focus-visible,.skillbtn:focus-visible,button:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
.mod input{accent-color:var(--ui-accent)}
#startBtn,#againBtn{background:var(--ui-accent);color:var(--ui-button-text);box-shadow:0 4px 16px rgba(15,56,75,.12)}
#startBtn:hover,#againBtn:hover{filter:brightness(1.08)}
#changeKit{background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-line)}
.overlay{background:rgba(18,30,43,.4)}
.dpanel{background:var(--ui-panel);border-color:var(--ui-line);color:var(--ui-text);box-shadow:0 20px 70px rgba(7,21,35,.2)}
#deathTitle{color:var(--danger)}
.lbrow.att{border-left-color:var(--team-att)}.lbrow.def{border-left-color:var(--team-def)}
.lbrow.me{background:var(--ui-accent-soft);box-shadow:inset 0 0 0 1px var(--ui-line)}
.lbrow .sc,.lbrow.top1 .rk{color:var(--ui-accent)}
.lbrow.top2 .rk{color:var(--rank-silver)}.lbrow.top3 .rk{color:var(--rank-bronze)}
.lbrow .pic{background:var(--ui-bg);box-shadow:inset 0 0 0 1px var(--ui-line)}

/* 主题选择器：颜色之外保留明确文字和选中状态。 */
.theme-section{margin-top:20px}
.theme-section h2{display:flex;gap:12px;align-items:center;font-size:13px;letter-spacing:1.5px}
.theme-section h2>span{font-size:9px;font-weight:400;letter-spacing:2px;color:var(--ui-muted)}
#themeRow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.theme-card{position:relative;min-width:0;min-height:122px;padding:14px 12px 12px;
  border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-card);color:var(--ui-text);
  font-family:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.theme-card:hover{border-color:var(--ui-accent);background:var(--ui-accent-soft)}
.theme-card[aria-pressed="true"],.theme-card.sel{border-color:var(--ui-accent);background:var(--ui-accent-soft);box-shadow:inset 0 0 0 1px var(--ui-accent)}
.theme-card[aria-pressed="true"]::after{content:"✓";position:absolute;right:9px;top:8px;
  color:var(--ui-button-text);background:var(--ui-accent);width:17px;height:17px;line-height:17px;text-align:center;border-radius:50%;font-size:11px;font-weight:700}
.theme-swatches{display:flex;width:calc(100% - 20px);height:24px;margin-bottom:12px;border:1px solid rgba(63,86,104,.2);border-radius:4px;overflow:hidden}
.theme-swatches span{display:block;flex:1;min-width:0}
.theme-name{display:block;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.1px;color:var(--ui-text)}
.theme-desc{display:block;font-size:10px;line-height:1.65;margin-top:4px;color:var(--ui-muted)}
.theme-footer{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:11px}
#themeNote{font-size:11px;line-height:1.7;color:var(--ui-accent)}
.theme-help{flex-shrink:0;font-size:10px;line-height:1.7;color:var(--ui-muted)}
.theme-help kbd{font-size:10px;padding:1px 5px}

/* HUD 面板跟随主题；阵营、危险和健康状态保留独立语义色。 */
#topbar,#botleft,#botright,#killfeed div,#capbox,#revivebox,#cratehint,#themeLabel,#nadehud{
  background:var(--ui-hud);color:var(--ui-text);border-color:var(--ui-line)}
#topbar,#botleft,#botright{border-top-color:var(--ui-accent)}
#topbar{box-shadow:0 4px 20px rgba(6,25,42,.14)}
#themeLabel{position:absolute;left:20px;top:18px;padding:8px 11px;border:1px solid var(--ui-line);
  border-left:3px solid var(--ui-accent);border-radius:4px;font-size:10px;letter-spacing:.6px;max-width:230px;line-height:1.5}
.tk .lbl,#statusline,#ammo span,#nadehud em{color:var(--ui-muted)}
.tk.att b,.kf-att{color:var(--team-att)}.tk.def b,.kf-def{color:var(--team-def)}
#statusline b,#wname,#wstate,.kf-me,#nadehud .nc{color:var(--ui-accent)}
#hpnum,#ammo b,#nadehud .nn{color:var(--ui-text)}
#killfeed div{border-left-color:var(--ui-accent)}
.obj{border-color:var(--ui-line);background:var(--ui-card);color:var(--ui-muted)}
.obj.active{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent)}
.obj.taken{border-color:var(--team-att);background:var(--ui-card);color:var(--team-att)}
.obj.locked{opacity:.5}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--ui-accent-soft)}50%{box-shadow:0 0 0 6px transparent}}
#capbox{padding:9px 13px;border:1px solid var(--ui-line);border-radius:4px}
.captitle{color:var(--ui-text);text-shadow:none}.captitle b{color:var(--ui-accent)}
#capstate{color:var(--danger)}
.capbar,.hpbar,.revbar{background:var(--ui-bg);border-color:var(--ui-line)}
.capbar i{background:var(--ui-accent)}
.hpbar i,.revbar i{background:var(--ui-success)}
.hpbar i.low{background:var(--danger)}
#revivebox b{color:var(--ui-success)}
#crate{background:var(--ui-panel);border-color:var(--ui-accent);color:var(--ui-text)}
#crate .ctitle,#crate .crow b{color:var(--ui-accent)}
#crate .csub,#crate .cd{color:var(--ui-muted)}
#crate .cn{color:var(--ui-text)}
#crate .crow{background:var(--ui-card)}
#crate .crow:hover{background:var(--ui-accent-soft);border-color:var(--ui-accent)}
#crate .crow b{border-color:var(--ui-line)}
#nadehud{padding:8px 12px;border:1px solid var(--ui-line);border-radius:4px}
#downbox{background:var(--ui-hud);border-color:var(--danger);color:var(--ui-text)}
#downbox b,#downbox .bleed i{color:var(--danger)}
#downbox .bleed{color:var(--ui-text)}#downbox p{color:var(--ui-muted)}
#downbox .revbar i{background:var(--danger)}
#toast,#scorepop{color:var(--ui-accent);background:var(--ui-hud);text-shadow:none;
  border-radius:5px;padding:7px 12px;max-width:calc(100vw - 24px);text-align:center;white-space:normal}
#clickhint{background:var(--ui-hud);color:var(--ui-text);border:1px solid var(--ui-line)}
/* 直接叠在场景上的标记用中性白色与深色描边，亮暗地面均清晰。 */
#crosshair i{background:#fff;box-shadow:0 0 0 1px rgba(5,22,35,.8),0 0 3px #00121f}
#crosshair.hit i{background:#fff;box-shadow:0 0 0 1px #152939,0 0 8px #fff}
#objarrow span,#objarrow em{color:#fff;text-shadow:0 1px 2px #091622,0 0 5px #091622}
#intro .ieye,#intro .ien,#intro .isub{color:#fff;text-shadow:0 1px 4px #0a1723}
#intro .isub{border-top-color:rgba(255,255,255,.4)}
#bigmap{background:var(--ui-hud);color:var(--ui-text)}
#bmc,#minimap{background:var(--ui-card);border-color:var(--ui-line)}
#bmc.targeting{border-color:var(--ui-accent)}
#bmhint,#skillbar .myscore{color:var(--ui-muted)}
#skillbar .myscore b{color:var(--ui-accent)}
.skillbtn{background:var(--ui-card);border-color:var(--ui-line);color:var(--ui-text)}
.skillbtn b{color:var(--ui-text)}.skillbtn span{color:var(--ui-accent)}.skillbtn small{color:var(--ui-muted)}
.skillbtn:hover,.skillbtn.armed{background:var(--ui-accent-soft);border-color:var(--ui-accent)}
.skillbtn.off:hover{background:var(--ui-card);border-color:var(--ui-line)}
@media(max-width:850px){#themeRow{grid-template-columns:repeat(3,minmax(0,1fr))}.theme-footer{display:block}.theme-help{margin-top:5px}#themeLabel{max-width:170px;font-size:9px}}
@media(max-width:640px){#themeRow{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme-card{min-height:114px}.theme-section h2>span{font-size:8px}#themeLabel{top:88px;left:10px;max-width:135px;padding:6px 8px}#capbox{width:235px}#nadehud{right:9px;bottom:145px}}
@media(prefers-reduced-motion:reduce){.theme-card{transition:none}}

/* 人物与服装可独立搭配，选择控件在手机宽度也能完整操作。 */
.appearance-picker{display:flex;gap:20px;align-items:center;padding:16px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-card)}
#appearancePortrait{width:100px;flex:0 0 100px;line-height:0}
#appearancePortrait svg{width:100%;height:auto;border-radius:15px}
.appearance-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;flex:1;min-width:0}
.appearance-fields label{font-size:11px;color:var(--ui-muted);display:grid;gap:7px;min-width:0}
.appearance-fields select{width:100%;min-width:0;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-panel);color:var(--ui-text);padding:10px;font:inherit;font-size:13px}
.appearance-fields select:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.appearance-fields p{grid-column:1/-1;font-size:11px;color:var(--ui-muted);line-height:1.6}
.appearance-fields a{grid-column:1/-1;color:var(--ui-accent);font-size:12px;text-decoration:none}
@media(max-width:520px){.appearance-picker{gap:12px;padding:12px}#appearancePortrait{width:70px;flex-basis:70px}.appearance-fields{grid-template-columns:1fr;gap:9px}.appearance-fields select{font-size:12px}}

.appearance-intro{font-size:12px;color:var(--ui-muted);line-height:1.7;margin:-2px 0 12px}


/* 普通攻防与刀战共用菜单和据点规则，装备按模式展示。 */
.mode-section{margin-bottom:10px}
.mode-section h2{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:1.5px}
.mode-section h2>span{font-size:9px;font-weight:400;letter-spacing:2px;color:var(--ui-muted)}
#modeRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mode-card{position:relative;min-width:0;padding:16px 18px;border-radius:9px}
.mode-card b{font-size:16px;line-height:1.5;margin-bottom:7px;padding-right:22px}
.mode-card b span{display:block;font-size:9px;font-weight:500;letter-spacing:1.5px;color:var(--ui-muted);margin-top:2px}
.mode-card p{font-size:11px;line-height:1.8}
.mode-card:disabled{cursor:default;opacity:.72}
.mode-card[aria-pressed="true"],.mode-card.sel{border-color:var(--ui-accent);background:var(--ui-accent-soft);box-shadow:inset 3px 0 0 var(--ui-accent)}
.mode-card[aria-pressed="true"]::after{content:"✓";position:absolute;right:13px;top:15px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--ui-accent);color:var(--ui-button-text);font-size:12px;font-weight:700}
#modeNote{font-size:11px;color:var(--ui-muted);line-height:1.8;margin-top:11px;min-height:20px}
.loadout-note{font-size:11px;line-height:1.9;color:var(--ui-muted);margin:0 0 12px}
.knife-rules{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.knife-rules span{font-size:10px;color:var(--ui-accent);padding:5px 8px;border:1px solid var(--ui-line);border-radius:5px;background:var(--ui-accent-soft)}
#knifeRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#knifeRow .card{min-width:0;border-radius:8px;padding:14px}
#knifeRow .card .stat{gap:6px 12px;font-variant-numeric:tabular-nums}
.knife-footnote{margin:12px 0 0}
#modeLabel{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;margin-bottom:9px;border:1px solid var(--ui-line);border-radius:4px;background:var(--ui-card);color:var(--ui-accent);font-size:10px;line-height:1.4;font-weight:650;letter-spacing:.5px}
#modeLabel::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ui-accent)}
@media(max-width:700px){#knifeRow{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-card{padding:13px}.mode-card b{font-size:14px}.mode-card p{font-size:10.5px}}
@media(max-width:420px){#modeRow{gap:8px}.mode-card{padding:11px}.mode-card b span{font-size:8px;letter-spacing:.6px}.mode-card[aria-pressed="true"]::after{right:8px;top:12px;width:15px;height:15px;font-size:10px}#knifeRow{grid-template-columns:1fr}}