/* ======================================================================
   钢铁前线 · 全局样式(P3C UI 全重构, 2026-08-10)
   —— 统一视觉变量体系 + 七层 HUD 分层 + 移动端断点适配
   变量: --c-main 主色(金) / --c-accent 强调 / --c-ally --c-enemy 阵营色
         --c-bg 面板底 / --c-line 描边 / --r-* 圆角 / --sh 阴影
   P3D 动态触控元素(touch-*, #touchPlaneUI, hiddenT)样式在 31_touch.js 注入, 本文件不冲突
   ====================================================================== */
:root{
  --c-main:#d8c894;
  --c-accent:#ffd77a;
  --c-ally:#8fc1ff;
  --c-enemy:#ff9c8a;
  --c-text:#e8e2d0;
  --c-text-dim:#9a9478;
  --c-bg:rgba(10,14,8,.62);
  --c-bg-strong:rgba(8,10,6,.9);
  --c-line:rgba(210,200,160,.3);
  --c-panel-top:#5a5236;
  --c-panel-bot:#3a3422;
  --c-border:#8a7c50;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --sh-sm:0 1px 3px rgba(0,0,0,.6);
  --sh-md:0 2px 10px rgba(0,0,0,.45);
  --sh-lg:0 6px 28px rgba(0,0,0,.6);
  --hud-fs:14px;               /* HUD 最小可读字号 */
  --font-ui:"Segoe UI","Microsoft YaHei",sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:var(--font-ui); user-select:none; -webkit-user-select:none; touch-action:manipulation; }
canvas.game { display:block; }
.hidden { display:none !important; }
/* ===== HUD 根容器: 七层分层(L1基础→L7交互), z 轴有序递增, 全部禁指针 ===== */
#ui { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }
#ui > div[class^="hudL"] { position:absolute; inset:0; pointer-events:none; }
#hudBase     { z-index:11; }   /* L1 基础: 准星/命中反馈/镜遮罩 */
#hudStatus   { z-index:12; }   /* L2 状态: 血条/氧条/受击特效(不遮视线中心) */
#hudWeapon   { z-index:13; }   /* L3 武器: 弹药/装填/兵种提示(右下) */
#hudVehicle  { z-index:14; }   /* L4 载具: 飞机俯仰条等(驾驶时) */
#hudObjective{ z-index:15; }   /* L5 目标: 票数/旗帜/小地图/任务/占点(顶部) */
#hudMsg      { z-index:16; }   /* L6 消息: killfeed/中央消息/警告(顶部下方滚动) */
#hudInteract { z-index:17; }   /* L7 交互: F提示/架枪(中央下方) */
#ui #fps, #ui #stormOv, #ui #scoreboard { z-index:19; } /* 系统浮层(记分板/风暴) */
/* ===== 移动端触控 (专用设计: 每指独立路由 / 情境按键 / 滑动开火转视角) ===== */
#touchUI { display:none; position:fixed; inset:0; z-index:40; pointer-events:none;
--sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-t:env(safe-area-inset-top,0px); }
body.mobile #touchUI { display:block; }
/* 菜单/部署/结算等全屏界面显示时触控层让位, 防止遮挡按钮无法点击(需求14.2) */
body.mobile:has(.screen:not(.hidden)) #touchUI { display:none !important; }
/* 视角层: 全屏最底层, 未命中按钮/摇杆的触摸都由它转动视角 */
#tLook { position:absolute; inset:0; pointer-events:auto; }
/* 浮动摇杆区: 左下 42% x 60% 区域, 落指即为摇杆原点 */
#tStickZone { position:absolute; left:0; bottom:0; width:42%; height:60%; pointer-events:auto; }
#tStick { position:absolute; left:40px; bottom:60px; width:124px; height:124px; border:2px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(0,0,0,.16); pointer-events:none; opacity:.7; transition:opacity .15s; }
#tStick.live { opacity:.95; }
#tStick .sprintHint { position:absolute; left:50%; top:-24px; transform:translateX(-50%); font-size:11px; color:rgba(255,255,255,.5); letter-spacing:1px; }
#tKnob { position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px; border-radius:50%; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.4); box-shadow:0 2px 8px rgba(0,0,0,.4); }
#tStick.sprint #tKnob { background:rgba(140,220,120,.5); border-color:rgba(160,255,140,.8); }
.tbtn { position:fixed; pointer-events:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
color:rgba(255,255,255,.88); background:rgba(10,14,10,.42); border:1.5px solid rgba(255,255,255,.28); border-radius:50%;
text-shadow:0 1px 2px #000; -webkit-tap-highlight-color:transparent; }
.tbtn .tIco { font-size:20px; line-height:1; pointer-events:none; }
.tbtn .tLbl { font-size:10px; letter-spacing:1px; opacity:.85; pointer-events:none; }
.tbtn.sm .tIco { font-size:15px; }
.tbtn.sm .tLbl { font-size:9px; }
.tbtn.press,.tbtn.on { background:rgba(255,215,110,.32); border-color:rgba(255,220,140,.85); }
#touchUI .hiddenT { display:none !important; }
/* —— 右手主簇(H12 CODM式分区: 开火/瞄准=核心大键, 跳/蹲=移动辅助, 换弹/切枪/近战/投掷=战斗次键拉开间距) —— */
#tFire   { right:calc(26px + var(--sa-r)); bottom:calc(88px + var(--sa-b)); width:110px; height:110px; background:rgba(150,42,22,.4); }
#tFire .tIco { font-size:34px; }
#tFireL  { left:calc(210px + var(--sa-l)); bottom:calc(196px + var(--sa-b)); width:64px; height:64px; background:rgba(150,42,22,.32); }
#tAds    { right:calc(148px + var(--sa-r)); bottom:calc(66px + var(--sa-b)); width:70px; height:70px; }
#tJump   { right:calc(22px + var(--sa-r)); bottom:calc(212px + var(--sa-b)); width:64px; height:64px; }
#tCrouch { right:calc(96px + var(--sa-r)); bottom:calc(204px + var(--sa-b)); width:58px; height:58px; }
#tReload { right:calc(172px + var(--sa-r)); bottom:calc(170px + var(--sa-b)); width:58px; height:58px; }
#tSwap   { right:calc(226px + var(--sa-r)); bottom:calc(104px + var(--sa-b)); width:54px; height:54px; }
#tMelee  { right:calc(30px + var(--sa-r)); bottom:calc(296px + var(--sa-b)); width:58px; height:58px; }
/* —— 投掷物 —— */
#tNade     { right:calc(128px + var(--sa-r)); bottom:calc(278px + var(--sa-b)); width:64px; height:64px; background:rgba(120,110,40,.35); }
#tNadeType { right:calc(140px + var(--sa-r)); bottom:calc(350px + var(--sa-b)); width:50px; height:50px; border-radius:10px; }
/* —— 左手簇 —— */
#tHeal   { left:calc(24px + var(--sa-l)); top:38%; width:50px; height:50px; background:rgba(50,110,60,.4); }
#tSkill  { left:calc(24px + var(--sa-l)); top:calc(38% + 58px); width:50px; height:50px; background:rgba(60,90,140,.35); }
#tBuildSel { left:calc(82px + var(--sa-l)); top:calc(38% + 64px); width:44px; height:44px; border-radius:10px; }
#tBrace  { left:calc(24px + var(--sa-l)); top:calc(38% - 58px); width:48px; height:48px; }
/* —— 情境交互键: 屏幕右中, 醒目 —— */
#tInteract { right:calc(120px + var(--sa-r)); top:34%; min-width:96px; height:52px; border-radius:26px; padding:0 18px;
background:rgba(220,180,60,.34); border-color:rgba(255,225,140,.9); }
#tInteract .tLbl { font-size:14px; letter-spacing:2px; }
/* —— 小队/系统 —— */
#tSquad  { left:calc(120px + var(--sa-l)); top:calc(8px + var(--sa-t)); width:46px; height:34px; border-radius:8px; }
#tFollow { left:calc(172px + var(--sa-l)); top:calc(8px + var(--sa-t)); width:46px; height:34px; border-radius:8px; }
#tScore  { right:calc(64px + var(--sa-r)); top:calc(8px + var(--sa-t)); width:44px; height:34px; border-radius:8px; }
#tMenu   { right:calc(12px + var(--sa-r)); top:calc(8px + var(--sa-t)); width:44px; height:34px; border-radius:8px; }
#tMenu .tLbl,#tScore .tLbl,#tSquad .tLbl,#tFollow .tLbl { font-size:12px; }
body.mobile #hint { display:none; }
body.mobile #ctrlHelp { display:none; }
body.mobile #interact { display:none !important; }
body.mobile #clsTip { display:none !important; }
body.mobile #braceInd { display:none !important; }
/* ======================================================================
   L1 基础层: 准星 + 命中反馈 + 镜遮罩(视线中心)
   ====================================================================== */
#crosshair { position:absolute; left:50%; top:50%; width:0; height:0; --gap:8px; }
#crosshair .chl { position:absolute; background:rgba(255,255,255,.92); box-shadow:0 0 3px rgba(0,0,0,.9); }
#crosshair .chl.t { left:-1px; bottom:var(--gap); width:2px; height:9px; }
#crosshair .chl.b { left:-1px; top:var(--gap); width:2px; height:9px; }
#crosshair .chl.l { top:-1px; right:var(--gap); height:2px; width:9px; }
#crosshair .chl.r { top:-1px; left:var(--gap); height:2px; width:9px; }
#crosshair .chdot { position:absolute; left:-1px; top:-1px; width:2px; height:2px; background:rgba(255,255,255,.95); }
#hitmark { position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; }
#hitmark span { position:absolute; width:2px; height:10px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.8); }
#hitmark span:nth-child(1){ transform:translate(-8px,-14px) rotate(45deg); }
#hitmark span:nth-child(2){ transform:translate(6px,-14px) rotate(-45deg); }
#hitmark span:nth-child(3){ transform:translate(-8px,4px) rotate(-45deg); }
#hitmark span:nth-child(4){ transform:translate(6px,4px) rotate(45deg); }
#hitmark.kill span { background:#ff5343; }
#scopeOv { position:absolute; inset:0; display:none; background:radial-gradient(circle at center, transparent 0, transparent 31vmin, rgba(0,0,0,.985) 33vmin); }
#scopeOv::before { content:""; position:absolute; left:50%; top:0; width:1.5px; height:100%; background:rgba(0,0,0,.85); transform:translateX(-50%); }
#scopeOv::after { content:""; position:absolute; top:50%; left:0; height:1.5px; width:100%; background:rgba(0,0,0,.85); transform:translateY(-50%); }
#dirHits { position:absolute; left:50%; top:50%; }
.dirHit { position:absolute; left:-90px; top:-90px; width:180px; height:180px; opacity:.85; pointer-events:none; }
.dirHit::before { content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%); border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:22px solid rgba(255,40,20,.75); filter:blur(1px); }
/* 载具指向/瞄准圈(坦克炮塔朝向/防空提前量/MG 提前量) */
#leadPip { position:absolute; width:20px; height:20px; box-sizing:border-box; border:2px solid rgba(255,220,120,.95); border-radius:50%; margin:-10px 0 0 -10px; display:none; box-shadow:0 0 6px rgba(0,0,0,.7); }
#leadPip::after { content:""; position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px; background:rgba(255,220,120,.95); border-radius:50%; }
#tankPip { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; display:none; }
#tankPip::before { content:""; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px; box-sizing:border-box; border:2px dashed rgba(255,200,90,.75); border-radius:50%; box-shadow:0 0 5px rgba(0,0,0,.8); }
#tankPip::after { content:""; position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px; background:rgba(255,200,90,.9); border-radius:50%; }
#mgPip { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; display:none; }
#mgPip::before { content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; box-sizing:border-box; border:1.5px solid rgba(150,215,255,.92); border-radius:50%; box-shadow:0 0 4px rgba(0,0,0,.8); }
#mgPip::after { content:""; position:absolute; left:50%; top:50%; width:2px; height:2px; margin:-1px; background:rgba(150,215,255,.95); border-radius:50%; }
/* 坦克主炮分划瞄准具: 战雷式 chevron + 测距刻度, 与步兵准星/预测圈完全区分 */
#tankSight { position:absolute; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px; display:none; pointer-events:none; opacity:.95;
background-repeat:no-repeat; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg stroke='%23101010' stroke-width='2.4' fill='none' opacity='0.9'%3E%3Cpath d='M75 78 L69 90 M75 78 L81 90'/%3E%3Cpath d='M6 75 h34 M110 75 h34'/%3E%3Cpath d='M75 116 v28'/%3E%3Cpath d='M50 75 h8 M92 75 h8'/%3E%3Cpath d='M75 96 l-4 8 h8 z'/%3E%3C/g%3E%3Cg fill='%23101010' opacity='0.9'%3E%3Cpath d='M44 71 l8 4 -8 4 z'/%3E%3Cpath d='M106 71 l-8 4 8 4 z'/%3E%3C/g%3E%3Cg stroke='%23101010' stroke-width='1.4' opacity='0.75'%3E%3Cpath d='M58 60 v6 M75 56 v6 M92 60 v6'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='1.8' fill='%23ffb02e'/%3E%3C/svg%3E");
filter:drop-shadow(0 0 1.5px rgba(255,240,200,.35)); }
#blackOv { position:absolute; inset:0; background:#000; opacity:0; }
/* ======================================================================
   L2 状态层: 血量/氧气/体力(左下) + 全屏状态特效
   ====================================================================== */
#healthPanel { position:absolute; left:26px; bottom:24px; width:230px; }
#healthPanel .hpRow { display:flex; align-items:center; gap:10px; }
#hpNum { color:var(--c-text); font-size:30px; font-weight:700; text-shadow:var(--sh-sm); display:inline-block; min-width:56px; }
#hpBarWrap { display:inline-block; width:160px; height:9px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); }
#hpBar { display:block; height:100%; width:100%; background:#cfe0c0; transition:width .15s; }
#stamBarWrap { margin-top:5px; margin-left:66px; width:160px; height:4px; background:rgba(0,0,0,.5); }
#stamBar { display:block; height:100%; width:100%; background:rgba(220,220,190,.65); }
/* 2.8 屏息氧条: 独立于体力条, 屏息时淡入(28_hud 控制透明度) */
#oxyBar { position:absolute; left:50%; bottom:38px; transform:translateX(-50%); width:180px; height:10px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.3); border-radius:5px; opacity:0; transition:opacity .3s; }
#oxyFill { display:block; height:100%; width:100%; border-radius:4px; background:linear-gradient(90deg,#7fd0ff,#4aa8e8); }
/* 全屏状态特效: 挂载下层(不遮视线中心), 透明过渡 */
#vig { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.38) 100%); }
#dmgOv { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 40%, rgba(160,0,0,.55) 100%); opacity:0; }
#lowOv { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 30%, rgba(120,0,0,.7) 100%); opacity:0; transition:opacity .5s; }
#supOv { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 45%, rgba(60,60,60,.6) 100%); opacity:0; }
/* B35 屏息暗角 + B34 低血量暗角(原 28_hud 懒创建, P3C 静态化) */
#vigOv { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%); opacity:0; transition:opacity .25s; }
/* ======================================================================
   L3 武器层: 武器名/弹药/投掷物/装填条/兵种提示(右下)
   ====================================================================== */
#ammoPanel { position:absolute; right:26px; bottom:24px; color:#eee; text-align:right; text-shadow:0 1px 3px rgba(0,0,0,.9); }
#ammoPanel #wname { font-size:15px; letter-spacing:2px; color:var(--c-main); }
#ammoPanel #wmode { font-size:11px; color:#9aa; letter-spacing:1px; margin-left:8px; }
#ammoPanel .ammoRow { font-size:40px; font-weight:700; line-height:1; margin-top:2px; }
#ammoPanel #resN { font-size:20px; color:#9a9a8a; font-weight:400; }
#ammoPanel #nadeN { font-size:12px; color:rgba(187,187,170,.85); margin-top:3px; max-width:280px; text-align:right; }
/* 装填/热度/炸弹条(坦克装填/重机枪过热/飞机炸弹, 25_player_update 控制 fill) */
#heatWrap { position:absolute; left:50%; bottom:80px; transform:translateX(-50%); width:200px; height:6px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.3); display:none; }
#heatFill { height:100%; width:0; background:linear-gradient(90deg,#e8c56a,#e83a1a); }
/* 兵种技能常驻提示(右下, 25_player_update 控制) */
#clsTip { position:absolute; right:26px; bottom:110px; color:#d8d2b8; font-size:12px; letter-spacing:1px; text-shadow:var(--sh-sm); background:var(--c-bg); padding:4px 10px; border-radius:3px; border:1px solid rgba(200,180,130,.22); display:none; }
#clsTip b { color:var(--c-accent); }
/* ======================================================================
   L4 载具层: 驾驶时专用(飞机俯仰条; 坦克弹药=动态 #tankAmmo z50 挂 body)
   ====================================================================== */
/* H3 俯仰条: 右侧竖条, 滑块=杆位, 中心死区亮带(28_hud 控制 stick/display) */
#elevBar { position:absolute; right:28px; top:50%; transform:translateY(-50%); width:14px; height:36vh; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.28); border-radius:7px; display:none; }
#elevDead { position:absolute; left:0; right:0; top:47%; height:6%; background:rgba(255,255,255,.14); }
#elevFill { position:absolute; left:2px; right:2px; height:0%; border-radius:5px; background:linear-gradient(180deg,#ffd77a,#ff9a4a); opacity:.85; }
#elevDot { position:absolute; left:-5px; right:-5px; top:50%; height:4px; margin-top:-2px; background:#fff; border-radius:2px; box-shadow:0 0 6px rgba(255,255,255,.6); }
/* ======================================================================
   L5 目标层: 票数/旗帜/时间/罗盘/小地图/任务目标/占点(顶部)
   ====================================================================== */
#topBar { position:absolute; top:14px; left:50%; transform:translateX(-50%); text-align:center; color:#ddd; text-shadow:var(--sh-sm); }
#tickets { font-size:17px; font-weight:600; letter-spacing:1px; }
#tickets .tl { color:var(--c-ally); } #tickets .tr { color:var(--c-enemy); }
#flagIcons { margin-top:3px; }
#flagIcons span { display:inline-block; width:26px; height:26px; line-height:24px; margin:0 5px; border:2px solid #888; border-radius:50%; font-weight:700; font-size:14px; color:#ccc; background:rgba(0,0,0,.45); transition:all .3s; }
#flagIcons span.f0 { border-color:#6da5e8; color:#aecdf5; }
#flagIcons span.f1 { border-color:#e87a68; color:#f5b3a8; }
#flagIcons span.fc { animation:flagBlink 1s infinite; }
@keyframes flagBlink { 50% { background:rgba(255,255,255,.25); } }
#timeTxt { font-size:12px; color:#aaa; margin-top:2px; }
#compass { display:block; margin:8px auto 0; width:460px; height:26px; }
/* H6A1 任务目标 HUD(mission 模式, 原 28_hud 懒创建, P3C 静态化) */
#misHud { position:absolute; top:64px; left:50%; transform:translateX(-50%); text-align:center; display:none; }
#misHudHead { font-size:12px; color:var(--c-accent); letter-spacing:2px; text-shadow:var(--sh-sm); margin-bottom:3px; }
#misHudList { text-align:center; }
#misHudList > div { font-size:12px; color:#eee; text-shadow:var(--sh-sm); margin:2px 0; display:flex; align-items:center; gap:6px; justify-content:center; }
#minimapWrap { position:absolute; left:18px; top:18px; width:190px; height:190px; border:2px solid rgba(210,200,160,.35); border-radius:var(--r-sm); background:rgba(10,14,8,.72); overflow:hidden; }
#minimap { width:100%; height:100%; }
#squadHUD { position:absolute; left:18px; top:214px; color:#cfe8cf; font-size:12px; line-height:1.5; text-shadow:var(--sh-sm); background:var(--c-bg); padding:5px 9px; border-radius:3px; border:1px solid rgba(140,200,140,.25); display:none; }
#squadHUD b { color:#8dffa8; }
#capPanel { position:absolute; left:50%; bottom:110px; transform:translateX(-50%); width:240px; text-align:center; color:#eee; text-shadow:var(--sh-sm); display:none; }
#capLetter { font-size:26px; font-weight:700; }
#capBarWrap { width:100%; height:7px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.3); margin-top:4px; }
#capBarFill { height:100%; width:0; background:var(--c-ally); transition:width .2s linear; }
#capTxt { font-size:12px; color:#ccc; margin-top:3px; }
/* ======================================================================
   L6 消息层: killmsg/击杀流/得分/警告(顶部下方滚动, 重要大字/普通小字)
   ====================================================================== */
#killfeed { position:absolute; right:22px; top:18px; text-align:right; font-size:13px; color:#ddd; text-shadow:var(--sh-sm); }
#killfeed div { margin-bottom:4px; background:rgba(0,0,0,.4); padding:3px 9px; border-radius:3px; opacity:1; transition:opacity 1s; }
#killfeed .kf0 { color:#9cc4f7; } #killfeed .kf1 { color:#f7a99c; }
#killfeed .me { color:var(--c-accent); font-weight:700; }
#msgC { position:absolute; left:50%; top:26%; transform:translateX(-50%); font-size:24px; letter-spacing:3px; color:#f0e6c8; text-shadow:0 2px 8px #000; opacity:0; transition:opacity .4s; text-align:center; }
#scorePop { position:absolute; left:50%; top:58%; transform:translateX(-50%); font-size:17px; color:var(--c-accent); text-shadow:var(--sh-sm); opacity:0; }
#nadeWarn { position:absolute; left:50%; top:42%; transform:translateX(-50%); color:#ff4a3a; font-size:22px; font-weight:700; text-shadow:0 0 8px rgba(255,0,0,.6); display:none; animation:flagBlink .35s infinite; }
#deathQuote { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); max-width:70vw; text-align:center;
color:#e8e2d0; font-size:19px; line-height:1.7; letter-spacing:2px; opacity:0; pointer-events:none;
text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.8); font-family:"Kaiti","STKaiti","Segoe UI",serif; }
/* M8 出界警告(原 28_hud 懒创建, P3C 静态化) */
#oobWarn { position:absolute; top:16%; left:50%; transform:translateX(-50%); color:#ff3b2e; font-size:30px; font-weight:900; letter-spacing:3px; text-shadow:0 2px 8px #000,0 0 26px rgba(255,40,20,.85); text-align:center; display:none; animation:oobFlash .5s step-end infinite; }
@keyframes oobFlash{ 50%{ opacity:.3; } }
/* ======================================================================
   L7 交互提示层: F 交互/架枪(中央下方, 不遮视线中心)
   ====================================================================== */
#interact { position:absolute; left:50%; top:60%; transform:translateX(-50%); color:#fff; font-size:16px; text-shadow:var(--sh-sm); background:rgba(0,0,0,.45); padding:6px 16px; border-radius:var(--r-sm); display:none; }
#interact b { color:var(--c-accent); }
#braceInd { position:absolute; left:50%; top:56%; transform:translateX(-50%); font-size:12px; letter-spacing:2px; color:rgba(255,232,160,.92); text-shadow:var(--sh-sm); display:none; pointer-events:none; }
#braceInd.on { color:#ffe8a0; background:rgba(0,0,0,.4); padding:3px 10px; border-radius:3px; border:1px solid rgba(255,220,140,.35); }
/* ===== L8 教学层: 新兵营教官(50_tutorial 渲染, 顶部横幅+文案+按键+进度) ===== */
#tutHud { position:absolute; top:0; left:0; right:0; display:none; pointer-events:none; z-index:60; }
#tutHud .tutHead { position:absolute; top:92px; left:50%; transform:translateX(-50%); font-size:13px; color:var(--c-accent); letter-spacing:2px; text-shadow:var(--sh-sm); background:rgba(10,12,8,.72); padding:5px 18px; border-radius:var(--r-sm); border:1px solid rgba(200,180,110,.35); white-space:nowrap; }
#tutHud .tutHead .tutBadge { color:#ffd77a; font-weight:700; margin-right:8px; }
#tutHud .tutBody { position:absolute; top:130px; left:50%; transform:translateX(-50%); max-width:640px; width:88vw; text-align:center; }
#tutHud .tutVoice { font-size:18px; color:#f5ecd0; text-shadow:0 2px 6px rgba(0,0,0,.9); background:rgba(8,10,6,.62); padding:10px 18px; border-radius:var(--r-sm); line-height:1.6; border-left:4px solid #c8a860; }
#tutHud .tutHint { margin-top:8px; font-size:15px; color:var(--c-accent); text-shadow:var(--sh-sm); }
#tutHud .tutHint b { color:#ffe9a8; background:rgba(0,0,0,.5); padding:1px 8px; border-radius:4px; margin:0 3px; }
#tutHud .tutFoot { position:absolute; top:232px; left:50%; transform:translateX(-50%); text-align:center; display:flex; align-items:center; gap:12px; pointer-events:auto; }
#tutHud .tutProg { display:inline-block; width:120px; height:8px; background:rgba(0,0,0,.5); border-radius:4px; overflow:hidden; border:1px solid rgba(255,255,255,.2); }
#tutHud .tutProg i { display:block; height:100%; background:linear-gradient(90deg,#d8b860,#f0d890); }
#tutHud .tutSteps { font-size:13px; color:#ddd; letter-spacing:2px; }
#tutHud .tutSteps .tk.on { color:#ffd77a; font-size:15px; }
#tutHud .tutSteps .tk.off { color:#666; }
#tutHud .tutBtn { pointer-events:auto; cursor:pointer; background:rgba(40,38,28,.85); color:#e8dcb0; border:1px solid #7a6f4a; padding:6px 14px; font-size:12px; letter-spacing:1px; border-radius:var(--r-sm); font-family:inherit; }
#tutHud .tutBtn:hover { background:#6a5f3e; }
/* ===== 系统浮层: FPS/风暴/记分板 ===== */
#fps { position:absolute; right:8px; bottom:4px; color:rgba(255,255,255,.4); font-size:11px; }
#hint { position:absolute; left:50%; bottom:4px; transform:translateX(-50%); color:rgba(255,255,255,.35); font-size:11px; letter-spacing:1px; }
#stormOv { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
#scoreboard { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:760px; max-width:94vw; background:var(--c-bg-strong); border:1px solid var(--c-line); border-radius:var(--r-md); padding:18px 22px; color:#ddd; display:none; pointer-events:auto; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; max-height:82vh; overflow-y:auto; }
/* H7/25 记分板滚动(50v50 名单超屏时滚轮/触屏可滑动查看全部; 滚动条暗色细条, 不影响 translate 居中布局) */
#scoreboard::-webkit-scrollbar { width:6px; }
#scoreboard::-webkit-scrollbar-thumb { background:rgba(200,180,130,.3); border-radius:3px; }
#scoreboard::-webkit-scrollbar-track { background:transparent; }
#scoreboard h3 { text-align:center; letter-spacing:4px; color:var(--c-main); font-weight:600; margin-bottom:10px; }
#sbCols { display:flex; gap:20px; }
#sbCols > div { flex:1; min-width:0; }
#scoreboard table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
/* H8/25 表头防换行: 名字列限宽省略, 数字列自适应(辅助列不再折行) */
#scoreboard th, #scoreboard td { text-align:left; color:#998; font-weight:500; border-bottom:1px solid #444; padding:3px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#scoreboard td { color:#ddd; }
#scoreboard th:first-child, #scoreboard td:first-child { width:38%; }
#scoreboard .meRow { color:var(--c-accent); font-weight:700; }
#scoreboard .t0h { color:var(--c-ally); } #scoreboard .t1h { color:var(--c-enemy); }
/* ======================================================================
   全屏界面: 菜单/部署/暂停/结算(统一视觉: 变量+圆角+阴影)
   ====================================================================== */
.screen { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, #1d241a, #04060a); color:#ddd; }
.panel { width:860px; max-width:94vw; max-height:92vh; overflow:auto; padding:30px 40px; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
.panel::-webkit-scrollbar { width:6px; }
.panel::-webkit-scrollbar-thumb { background:rgba(200,180,130,.3); border-radius:3px; }
.panel::-webkit-scrollbar-track { background:transparent; }
h1.title { font-size:52px; letter-spacing:10px; color:#e8dcb0; text-shadow:0 2px 12px #000, 0 0 40px rgba(200,170,90,.25); font-weight:800; text-align:center; }
.subtitle { text-align:center; color:var(--c-text-dim); letter-spacing:5px; margin:6px 0 26px; font-size:15px; }
.secLabel { color:#b8ae88; letter-spacing:3px; font-size:13px; margin:18px 0 8px; border-bottom:1px solid rgba(200,180,130,.2); padding-bottom:4px; }
.rowFlex { display:flex; gap:14px; flex-wrap:wrap; }
.bigBtn { pointer-events:auto; cursor:pointer; background:linear-gradient(180deg,var(--c-panel-top),var(--c-panel-bot)); color:#f0e6c0; border:1px solid var(--c-border); padding:14px 42px; font-size:20px; letter-spacing:6px; border-radius:var(--r-sm); transition:all .15s; font-family:inherit; }
.bigBtn:hover { background:linear-gradient(180deg,#6e6544,#4a422c); box-shadow:0 0 18px rgba(220,190,110,.3); }
.bigBtn:disabled { opacity:.4; cursor:default; }
.optBtn { pointer-events:auto; cursor:pointer; background:rgba(255,255,255,.06); color:#ccc; border:1px solid #555; padding:9px 20px; font-size:14px; border-radius:3px; transition:all .12s; font-family:inherit; }
.optBtn:hover { border-color:#b8a86a; color:#fff; }
.optBtn.sel { background:rgba(200,175,95,.22); border-color:#d8c080; color:#ffe9b0; }
.teamBtn { flex:1; padding:16px; font-size:18px; letter-spacing:3px; }
.classCard { pointer-events:auto; cursor:pointer; width:auto; min-width:0; min-height:82px; background:rgba(255,255,255,.05); border:1px solid #555; border-radius:var(--r-md); padding:8px 11px; transition:all .12s; }
.classCard:hover { border-color:#b8a86a; }
.classCard.sel { background:rgba(200,175,95,.18); border-color:#e0ca8a; box-shadow:0 0 14px rgba(210,180,100,.25); }
.classCard .cname { font-size:14px; color:#f0e2b0; letter-spacing:2px; }
.classCard .cwpn { font-size:10.5px; color:#aaa; margin-top:3px; line-height:1.45; }
.spawnBtn { pointer-events:auto; cursor:pointer; display:block; width:100%; text-align:left; background:rgba(255,255,255,.05); color:#ccc; border:1px solid #555; padding:8px 12px; margin-bottom:6px; font-size:13px; border-radius:3px; font-family:inherit; }
.spawnBtn:hover { border-color:#b8a86a; }
.spawnBtn.sel { background:rgba(200,175,95,.2); border-color:#e0ca8a; color:#ffe9b0; }
.sliderRow { display:flex; align-items:center; gap:12px; margin:6px 0; font-size:14px; color:#bbb; }
.sliderRow input { pointer-events:auto; width:200px; }
.sliderRow .val { color:#e8dcb0; min-width:36px; }
#ctrlHelp { font-size:12.5px; color:#8a8878; line-height:1.9; column-count:1; margin-top:6px; max-height:34vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
#ctrlHelp b { color:#c5ba90; font-weight:600; }
/* ===== 主菜单 ===== */
.menuMain { background:rgba(8,12,6,.78) !important; backdrop-filter:blur(3px); }
.gameLogo { text-align:center; font-size:52px; font-weight:800; letter-spacing:14px; color:#e8dcb0; text-shadow:0 2px 0 #4a3f22, 0 6px 22px rgba(0,0,0,.8); margin-top:10px; }
.gameLogoSub { text-align:center; font-size:13px; letter-spacing:6px; color:rgba(220,210,170,.55); margin:4px 0 14px; }
.menuNav { display:flex; flex-direction:column; align-items:center; gap:12px; margin:30px 0 26px; }
.navBtn { width:320px; font-size:19px; letter-spacing:8px; padding:14px 0; }
.mSubTitle { text-align:center; letter-spacing:8px; color:var(--c-main); font-weight:600; margin-bottom:12px; }
.backBtn { opacity:.8; }
#mHome { text-align:center; }
#menuVer { text-align:center; color:#555; font-size:11px; margin-top:20px; letter-spacing:2px; }
/* ======================================================================
   联机大厅(38_net P1 美化)/聊天(43_net_chat) —— 复用主菜单同款 panel 视觉
   ====================================================================== */
#netLobby .panel { background:rgba(8,12,6,.78) !important; backdrop-filter:blur(3px); }
#netLobby input, #netLobby select { font-family:inherit; }
.netChatLog { height:118px; overflow:auto; background:rgba(255,255,255,.04); border:1px solid #3a4430; border-radius:4px;
  padding:6px 10px; font-size:13px; line-height:1.7; text-align:left; word-break:break-word;
  scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
.netChatLog .gcMsg { color:#c9d8c8; }
.netChatLog .gcMsg.gcTeam { color:#b8d8e8; }
.netChatLog .gcTag { color:#9fdcff; margin-right:4px; font-size:11px; }
.netChatLog .gcName { color:#e8dcb0; margin-right:6px; }
.netChatInputRow { display:flex; gap:8px; margin-top:8px; }
.netChatInputRow input { flex:1; background:rgba(255,255,255,.06); border:1px solid #555; color:#eee;
  padding:8px 10px; font-size:14px; border-radius:3px; }
.netChatInputRow input:focus { border-color:#b8a86a; outline:none; }
#netPeerList { scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
#netPeerList::-webkit-scrollbar, .netChatLog::-webkit-scrollbar { width:6px; }
#netPeerList::-webkit-scrollbar-thumb, .netChatLog::-webkit-scrollbar-thumb { background:rgba(200,180,130,.3); border-radius:3px; }
/* ===== P3C 战役卡(名称/年份/对阵/天气/预览色块) ===== */
#campRow { gap:16px; max-height:62vh; overflow-y:auto; align-content:flex-start; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
#campRow::-webkit-scrollbar { width:6px; }
#campRow::-webkit-scrollbar-thumb { background:rgba(200,180,130,.3); border-radius:3px; }
.campCard { pointer-events:auto; cursor:pointer; width:min(300px,42vw); text-align:left; background:rgba(255,255,255,.05); border:1px solid #555; border-radius:var(--r-md); padding:0; overflow:hidden; transition:all .15s; font-family:inherit; color:#ccc; }
.campCard:hover { border-color:#b8a86a; transform:translateY(-2px); box-shadow:var(--sh-md); }
.campCard.sel { background:rgba(200,175,95,.18); border-color:#e0ca8a; box-shadow:0 0 14px rgba(210,180,100,.25); }
.campCard .ccPrev { height:64px; position:relative; }
.campCard .ccPrev .ccWx { position:absolute; right:8px; top:6px; font-size:20px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.campCard .ccBody { padding:10px 13px 12px; }
.campCard .ccTitle { font-size:16px; color:#f0e2b0; letter-spacing:1px; font-weight:700; }
.campCard .ccMode { font-size:11px; color:#c0d8e0; opacity:.9; margin-top:3px; letter-spacing:1px; }
.campCard .ccVs { font-size:12px; color:#bbb; margin-top:5px; line-height:1.5; }
.campCard .ccVs b { color:#ffe9b0; }
/* ===== 部署/暂停 (DEPLOY3D 全屏: 顶部兵种 / 中部 3D 俯瞰占满 / 底部出生区) ===== */
.deployPanel { position:fixed; inset:0; width:100%; height:100%; max-width:100vw; max-height:100vh;
  display:flex; flex-direction:column; padding:10px 20px 14px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #1d241a, #04060a); }
#deathInfo { text-align:center; color:#e88; font-size:15px; margin-bottom:6px; min-height:18px; }
/* 兵种卡: 顶部横排(全屏 8 卡一行紧凑, 窄屏自动换行) */
#classGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); grid-auto-rows:1fr; gap:8px; }
.classCard { min-height:52px; padding:5px 8px; }
.classCard .cname { font-size:12.5px; }
.classCard .cwpn { font-size:9.5px; }
/* 中部 3D 俯瞰: 占满剩余空间(不再小方窗) */
#deployMid { display:flex; flex-direction:column; align-items:center; flex:1; min-height:0; }
.mapHint { margin-left:12px; font-size:11px; letter-spacing:1px; color:#7f8a70; font-weight:400; border:none; }
#deployMap { flex:1; width:100%; min-height:300px; aspect-ratio:auto; height:auto; max-width:none; margin:2px auto 0;
  border:1px solid var(--c-line); border-radius:var(--r-md); background:#141a10; cursor:pointer;
  box-shadow:0 0 26px rgba(0,0,0,.55), inset 0 0 70px rgba(0,0,0,.35); }
#deployMap:hover { border-color:rgba(210,190,120,.55); }
/* 下部: 左=出生位置快捷按钮, 右=载具列表按钮, 最右=部署按钮 */
#deployBottom { display:flex; gap:20px; align-items:stretch; margin-top:8px; }
#spawnCol { flex:1; min-width:0; }
#vehCol { flex:1.4; min-width:0; }
#deployBtnCol { flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding-left:6px; }
#deployBtnCol .bigBtn { padding:16px 28px; }
#spawnList { max-height:112px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
#spawnList::-webkit-scrollbar { width:6px; }
#spawnList::-webkit-scrollbar-thumb { background:rgba(200,180,130,.3); border-radius:3px; }
#vehList { max-height:112px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
#vehList::-webkit-scrollbar { width:6px; }
#vehList::-webkit-scrollbar-thumb { background:rgba(200,180,130,.3); border-radius:3px; }
.vehBtn { pointer-events:auto; cursor:pointer; display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:rgba(255,255,255,.05); color:#ccc; border:1px solid #555; padding:7px 10px; margin-bottom:5px;
  font-size:13px; border-radius:3px; font-family:inherit; transition:all .12s; }
.vehBtn:hover { border-color:#b8a86a; }
.vehBtn.sel { background:rgba(200,175,95,.2); border-color:#e0ca8a; color:#ffe9b0; box-shadow:0 0 12px rgba(210,180,100,.25); }
.vehBtn.off { opacity:.45; }
.vehQuota { font-size:12px; color:#cdd8c8; margin:2px 0 6px; line-height:1.5; }
.vehQuota b { color:#ffe9b8; }
.vehQuota .qBonus { color:#8fffa0; margin-left:6px; }
.vehBtn .vc { font-size:11px; color:#c8b478; margin-left:4px; }
.vehBtn.quotaFull { cursor:not-allowed; }
.vehBtn .vi { font-size:15px; width:20px; text-align:center; flex:0 0 auto; }
.vehBtn .vn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vehBtn .vs { margin-left:auto; font-size:11px; opacity:.7; flex:0 0 auto; }
#respawnTxt { color:var(--c-main); }
/* 暂停面板(部署屏内, 存活部署中显示) */
.pauseTitle { font-size:44px; letter-spacing:18px; color:var(--c-accent); text-shadow:0 2px 12px rgba(0,0,0,.8); }
.pauseStats { text-align:center; font-size:14px; color:#bbb; line-height:2; margin:14px 0 20px; }
.pauseStats b { color:#f0e2b0; }
.pausePanel .bigBtn { min-width:260px; }
/* ===== 结算 ===== */
.endPanel { max-width:760px; display:flex; flex-direction:column; }
.endPanel #endTitle { flex:0 0 auto; }
.endPanel #endStats { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; padding-right:4px; }
.endPanel .endBtns { flex:0 0 auto; margin-top:14px; }
#endTitle { font-size:46px; text-align:center; letter-spacing:8px; margin-bottom:8px; }
#endTitle.win { color:#ffe08a; text-shadow:0 0 30px rgba(255,210,110,.5); }
#endTitle.lose { color:#e86a5a; }
#endStats { text-align:center; font-size:16px; color:#bbb; line-height:2.1; margin:16px 0 26px; }
#endStats b { color:#f0e2b0; font-size:20px; }
.endBtns { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
#newspaperDl { font-size:14px; }
.center { text-align:center; }
/* ======================================================================
   移动端适配(P3D 触控优先: 静态 HUD 缩小避让触控区, 断点 <768px)
   P3D 动态元素(#touchPlaneUI z45 / 俯仰滑条 / hiddenT)不受影响
   ====================================================================== */
@media (max-width:767px){
  /* 目标层: 小地图缩至 120px 并下移避让左上触控行(tSquad/tFollow), 罗盘移动端隐藏(宽度放不下) */
  #minimapWrap { left:12px; top:50px; width:120px; height:120px; }
  #squadHUD { left:140px; top:52px; font-size:11px; padding:4px 8px; max-width:calc(100vw - 260px); }
  #topBar { top:46px; transform:translateX(-50%) scale(.82); transform-origin:top center; }
  #compass { display:none; }
  #tickets { font-size:14px; }
  /* 状态层: 血量条缩小移至小地图下方(避让摇杆区/开火簇), 氧气条居中在屏幕下部 */
  #healthPanel { left:12px; top:172px; bottom:auto; width:180px; transform:scale(.78); transform-origin:top left; }
  #oxyBar { bottom:118px; width:150px; height:8px; }
  /* 武器层: 弹药面板缩小移至左列(小地图/血条下方), 长文本截断防横穿 */
  #ammoPanel { left:12px; right:auto; top:248px; text-align:left; transform:scale(.8); transform-origin:top left; }
  #ammoPanel .ammoRow { font-size:26px; }
  #ammoPanel #nadeN { max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; }
  #clsTip { display:none !important; }
  #heatWrap { bottom:150px; width:150px; }
  /* 消息层: 击杀流移入屏幕中下部(避让右上触控行), 字号缩 */
  #killfeed { right:12px; top:52px; font-size:11px; max-width:52vw; }
  #killfeed div { padding:2px 7px; }
  #msgC { top:22%; font-size:19px; }
  #scorePop { top:56%; font-size:14px; }
  #nadeWarn { top:38%; font-size:18px; }
  #interact { top:64%; font-size:14px; }
  /* 记分板窄屏可用(H7/25: 移动端限高 70vh, 名单超屏可滚动) */
  #scoreboard { width:94vw; padding:12px 14px; max-height:70vh; }
  #sbCols { gap:10px; }
  #scoreboard table { font-size:11px; }
  /* 菜单: 按钮宽度自适应 */
  .navBtn { width:min(320px,80vw); }
  .panel { padding:22px 18px; }
  .gameLogo { font-size:38px; letter-spacing:8px; }
  .bigBtn { padding:13px 22px; font-size:17px; letter-spacing:4px; }
  .campCard { width:min(300px,88vw); }
  /* 部署屏移动端(DEPLOY3D 全屏): 地图在上占满 / 兵种卡横向滚动 / 底部按钮可滚动 */
  .deployPanel { gap:2px; padding:8px 10px; }
  #deployMid { order:1; }
  #clsLabel { order:2; }
  #classGrid { order:2; display:flex; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:rgba(200,180,130,.35) transparent; }
  #classGrid .classCard { flex:0 0 116px; min-height:56px; }
  #deployBottom { order:3; flex-direction:column; gap:4px; max-height:30vh; overflow-y:auto; }
  #spawnCol, #vehCol { flex:auto; }
  #deployBtnCol { padding:4px 0 0; }
  #deployMap { max-width:min(82vw,400px); }
  #vehList { max-height:128px; }
  #ctrlHelp { column-count:1; }
}

/* ===== 2026-08-11 boot 音频预载加载条(主菜单之前) ===== */
#bootLoad{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,#0d1420,#1a2436);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#bootLoad .bootLogo{font-size:44px;letter-spacing:14px;color:#e8d8a8;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#bootLoad .bootSub{font-size:13px;letter-spacing:6px;color:#8fa3c0}
#bootLoad .bootBarWrap{width:min(420px,70vw);height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
#bootLoad #bootFill{height:100%;width:0;background:linear-gradient(90deg,#8fa3c0,#e8d8a8);transition:width .15s}
#bootLoad #bootTxt{font-size:13px;color:#a8b8d0}