/* ============================================================
 * CyberStrike 3D — UI 层样式（owner: US-012，占位文件由 US-003 建立）
 * 职责：主菜单、暂停菜单、结算面板、设置面板、历史积分榜、操作说明，
 *       HUD（生命条/护甲条/武器与弹药/切枪条/准星与瞄准镜/击杀提示/
 *       积分与排名/延迟与在线状态/小地图/积分板）的视觉样式。
 * 依赖：css/style.css 中定义的 CSS 变量（--neon-cyan 等）。
 * 注意：触屏按钮样式在 css/touch.css（owner: US-004），本文件只放菜单与 HUD。
 * 层级：#hud-root（z=10）内放 .hud；#menu-root（z=30）内放 .menu。
 * ============================================================ */

/* 供 US-012 使用的 UI 专用变量（保持与 style.css 的霓虹主题一致） */
:root {
  /* 面板玻璃质感 */
  --ui-panel-bg: rgba(10, 16, 28, 0.82);
  --ui-panel-bg-strong: rgba(6, 10, 20, 0.94);
  --ui-panel-blur: 8px;
  --ui-panel-radius: 14px;
  --ui-panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);

  /* 霓虹描边与文字发光 */
  --ui-neon-border: 1px solid rgba(0, 234, 255, 0.55);
  --ui-neon-border-magenta: 1px solid rgba(255, 47, 208, 0.55);
  --ui-neon-glow: 0 0 8px rgba(0, 234, 255, 0.65), 0 0 22px rgba(0, 234, 255, 0.25);
  --ui-neon-text-shadow: 0 0 6px rgba(0, 234, 255, 0.75);
  --ui-title-gradient: linear-gradient(90deg, #00eaff, #ff2fd0);

  /* HUD 相关 */
  --ui-hud-scale: 1;
  --ui-hud-pad: calc(env(safe-area-inset-top, 0px) + 14px);
  --ui-crosshair-size: 22px;
  --ui-crosshair-color: var(--neon-cyan);
  --ui-killfeed-ttl: 5s;
  --ui-hp-color: var(--hp-full);
  --ui-armor-color: var(--armor);

  /* 层级 z-index（与 style.css 的 --z-* 保持一致） */
  --ui-z-canvas: 0;
  --ui-z-hud: 10;
  --ui-z-touch: 20;
  --ui-z-menu: 30;
  --ui-z-overlay: 40;
  --ui-z-toast: 45;

  /* ---- US-012 追加：HUD 布局参数（触屏布局在下方 @media / [data-layout] 覆盖） ---- */
  --ui-edge: calc(env(safe-area-inset-top, 0px) + 14px);
  --ui-edge-x: calc(env(safe-area-inset-left, 0px) + 16px);
  --ui-edge-x-r: calc(env(safe-area-inset-right, 0px) + 16px);
  --ui-edge-b: calc(env(safe-area-inset-bottom, 0px) + 16px);
  --ui-minimap-size: 172px;
  --ui-panel-pad: 10px 12px;
}

/* ============================================================
 * 0. 基础工具与 HUD 容器
 * ============================================================ */

.menu-root {
  backdrop-filter: blur(var(--ui-panel-blur));
  -webkit-backdrop-filter: blur(var(--ui-panel-blur));
  background: radial-gradient(circle at 50% 30%, rgba(0, 229, 255, 0.06), rgba(5, 6, 10, 0.9) 60%);
}

#hud-root {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* HUD 根：铺满视口、默认穿透指针事件（只有按钮自己开 pointer-events） */
.hud,
.hud *,
.hud *::before,
.hud *::after {
  box-sizing: border-box;
}

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.hud[hidden],
.hud [hidden] {
  display: none !important;
}

/* 玻璃面板通用外观 */
.hud-panel {
  position: relative;
  background: var(--ui-panel-bg);
  border: var(--ui-neon-border);
  border-radius: var(--ui-panel-radius);
  box-shadow: var(--ui-panel-shadow), inset 0 0 18px rgba(0, 234, 255, 0.06);
  backdrop-filter: blur(var(--ui-panel-blur));
  -webkit-backdrop-filter: blur(var(--ui-panel-blur));
  padding: var(--ui-panel-pad);
}

/* 全屏装饰：扫描线 + 暗角（随画质档位开关，见 [data-postfx]） */
.hud__scan,
.hud__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud__scan {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 234, 255, 0.045) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.55;
  mix-blend-mode: screen;
}

.hud__vignette {
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0.9;
}

/* 画质档位 → 装饰强度（低档关掉扫描线与泛光，省 GPU 合成开销） */
.hud[data-postfx="off"] .hud__vignette {
  opacity: 0.45;
}

.hud[data-postfx="off"] .hud__scan {
  opacity: 0.22;
}

:root[data-quality="low"] .hud__scan {
  display: none;
}

:root[data-quality="low"] .hud-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 12px rgba(0, 234, 255, 0.05);
}

/* ============================================================
 * 1. 小地图（左上）
 * ============================================================ */

.hud-minimap {
  position: absolute;
  top: var(--ui-edge);
  left: var(--ui-edge-x);
  padding: 6px;
  border-radius: 50%;
  background: rgba(6, 10, 20, 0.72);
}

.hud-minimap__canvas {
  display: block;
  width: var(--ui-minimap-size);
  height: var(--ui-minimap-size);
  border-radius: 50%;
}

.hud-minimap__badge {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.9);
  border: 1px solid rgba(0, 234, 255, 0.35);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================
 * 2. 顶部中间：分数 / 排名 / 计时
 * ============================================================ */

.hud-topcenter {
  position: absolute;
  top: var(--ui-edge);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hud-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
}

.hud-score__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.hud-score__val {
  font-size: 24px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: var(--ui-neon-text-shadow);
  min-width: 2.2em;
  text-align: right;
}

.hud-score__rank {
  font-size: 12px;
  color: var(--neon-magenta);
  text-shadow: 0 0 6px rgba(255, 47, 208, 0.6);
}

.hud-score__kd {
  font-size: 11px;
  color: var(--text-muted);
}

.hud-timer {
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.hud-timer.is-low {
  color: var(--neon-red);
  border-color: rgba(255, 51, 85, 0.6);
  animation: cs-ui-blink 1s steps(2, end) infinite;
}

/* ============================================================
 * 3. 右上：在线状态 / 延迟 + 击杀提示
 * ============================================================ */

.hud-topright {
  position: absolute;
  top: var(--ui-edge);
  right: var(--ui-edge-x-r);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 42vw;
}

.hud-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
}

.hud-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 transparent;
}

.hud-status__dot.is-online {
  background: var(--neon-lime);
  box-shadow: 0 0 8px rgba(157, 255, 43, 0.85);
}

.hud-status__text {
  color: var(--text-primary);
}

.hud-status__ping {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.hud-killfeed {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.hud-kill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.78);
  border: 1px solid rgba(0, 234, 255, 0.28);
  font-size: 12px;
  white-space: nowrap;
  animation: cs-ui-slide-in 160ms ease-out both;
  transition: opacity 260ms linear;
}

.hud-kill.is-fading {
  opacity: 0;
}

.hud-kill--headshot {
  border-color: rgba(255, 47, 208, 0.6);
}

.hud-kill--mine {
  border-color: rgba(157, 255, 43, 0.7);
  box-shadow: 0 0 10px rgba(157, 255, 43, 0.25);
}

.hud-kill__killer {
  color: var(--neon-cyan);
}

.hud-kill__arrow {
  color: var(--text-dim);
}

.hud-kill__victim {
  color: var(--neon-red);
}

.hud-kill__weapon {
  color: var(--text-muted);
  font-size: 11px;
}

/* ============================================================
 * 4. 左下：生命 / 护甲（载具内隐藏）
 * ============================================================ */

.hud-vitals {
  position: absolute;
  left: var(--ui-edge-x);
  bottom: var(--ui-edge-b);
  width: min(260px, 42vw);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hud-bar {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 234, 255, 0.28);
  overflow: hidden;
}

.hud-bar__fill {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--ui-hp-color);
  box-shadow: 0 0 10px rgba(53, 224, 138, 0.5);
  transition: width 140ms linear;
}

.hud-bar__text {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 10px;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: #f2fbff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.8);
}

.hud-bar--hp .hud-bar__fill[data-level="mid"] {
  background: var(--hp-mid);
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.5);
}

.hud-bar--hp .hud-bar__fill[data-level="low"] {
  background: var(--hp-low);
  box-shadow: 0 0 10px rgba(255, 51, 85, 0.6);
}

.hud-bar--hp .hud-bar__fill.is-critical {
  animation: cs-ui-blink 0.75s steps(2, end) infinite;
}

.hud-bar--armor .hud-bar__fill {
  background: var(--armor);
  box-shadow: 0 0 10px rgba(67, 182, 255, 0.5);
}

/* ============================================================
 * 5. 载具状态面板（进入载具后替代生命/武器面板）
 * ============================================================ */

.hud-vehicle {
  display: none;
  position: absolute;
  left: var(--ui-edge-x);
  bottom: var(--ui-edge-b);
  width: min(280px, 46vw);
  flex-direction: column;
  gap: 7px;
}

.hud[data-vehicle="true"] .hud-vehicle {
  display: flex;
}

.hud[data-vehicle="true"] .hud-vitals,
.hud[data-vehicle="true"] .hud-weapon {
  display: none;
}

.hud-vehicle__name {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--neon-amber);
  text-shadow: 0 0 6px rgba(255, 176, 32, 0.6);
}

.hud-bar--vehicle .hud-bar__fill {
  background: var(--neon-amber);
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.5);
}

.hud-vehicle__ammo {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ammo);
}

.hud-vehicle__ammo.is-empty {
  color: var(--neon-red);
  animation: cs-ui-blink 0.6s steps(2, end) infinite;
}

/* ============================================================
 * 6. 右下：武器名 / 弹药 / 切枪条
 * ============================================================ */

.hud-weapon {
  position: absolute;
  right: var(--ui-edge-x-r);
  bottom: var(--ui-edge-b);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 12px;
}

.hud-weapon__name {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.hud-ammo {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.hud-ammo__mag {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ammo);
  line-height: 1;
}

.hud-ammo__sep {
  font-size: 16px;
  color: var(--text-dim);
}

.hud-ammo__reserve {
  font-size: 15px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* 弹药为 0：变红闪烁 */
.hud-ammo--empty .hud-ammo__mag {
  color: var(--neon-red);
  text-shadow: 0 0 10px rgba(255, 51, 85, 0.8);
  animation: cs-ui-blink 0.5s steps(2, end) infinite;
}

.hud-ammo--empty .hud-ammo__reserve {
  color: var(--neon-red);
}

.hud-reload {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--neon-amber);
  animation: cs-ui-blink 1s steps(2, end) infinite;
}

/* 5 格武器切换条：高亮当前武器 */
.hud-slots {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}

.hud-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0, 234, 255, 0.22);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.65;
  transition: opacity 120ms linear, border-color 120ms linear, box-shadow 120ms linear;
}

.hud-slot__key {
  font-size: 9px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.hud-slot__name {
  font-size: 11px;
  color: var(--text-muted);
}

.hud-slot.is-active {
  opacity: 1;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.45), inset 0 0 8px rgba(0, 234, 255, 0.18);
  background: rgba(0, 234, 255, 0.14);
}

.hud-slot.is-active .hud-slot__name {
  color: var(--neon-cyan);
}

.hud-slot.is-empty {
  opacity: 0.3;
}

/* ============================================================
 * 7. 中央准星（按武器换形状）与开镜遮罩
 * ============================================================ */

.hud-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-crosshair {
  position: relative;
  width: var(--ui-crosshair-size);
  height: var(--ui-crosshair-size);
  transition: opacity 120ms linear;
}

.hud-crosshair i {
  position: absolute;
  display: none;
  background: var(--ui-crosshair-color);
  box-shadow: 0 0 4px var(--ui-crosshair-color);
}

/* 十字线：上下左右四条短杠 */
.hud-crosshair__line {
  width: 2px;
  height: 8px;
}

.hud-crosshair__line--t { left: 50%; top: 0; transform: translateX(-50%); }
.hud-crosshair__line--b { left: 50%; bottom: 0; transform: translateX(-50%); }
.hud-crosshair__line--l { top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 2px; }
.hud-crosshair__line--r { top: 50%; right: 0; transform: translateY(-50%); width: 8px; height: 2px; }

/* 中心点 */
.hud-crosshair__dot {
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 圆环（能量枪 / 狙击） */
.hud-crosshair__ring {
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: 1px solid var(--ui-crosshair-color);
  box-shadow: 0 0 6px var(--ui-crosshair-color);
}

/* 四角括号（火箭筒） */
.hud-crosshair__bracket {
  width: 7px;
  height: 7px;
  background: none;
  border: 0 solid var(--ui-crosshair-color);
  box-shadow: none;
}

.hud-crosshair__bracket--tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.hud-crosshair__bracket--tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.hud-crosshair__bracket--bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.hud-crosshair__bracket--br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

/* 形状开关（data-shape 由 ui.js 按当前武器写入） */
.hud-crosshair[data-shape="cross"] .hud-crosshair__line { display: block; }
.hud-crosshair[data-shape="cross-dot"] .hud-crosshair__line,
.hud-crosshair[data-shape="cross-dot"] .hud-crosshair__dot { display: block; }
.hud-crosshair[data-shape="mil-dot"] .hud-crosshair__line,
.hud-crosshair[data-shape="mil-dot"] .hud-crosshair__dot,
.hud-crosshair[data-shape="mil-dot"] .hud-crosshair__ring { display: block; }
.hud-crosshair[data-shape="ring"] .hud-crosshair__dot,
.hud-crosshair[data-shape="ring"] .hud-crosshair__ring { display: block; }
.hud-crosshair[data-shape="bracket"] .hud-crosshair__dot,
.hud-crosshair[data-shape="bracket"] .hud-crosshair__bracket { display: block; }
.hud-crosshair[data-shape="bracket"] .hud-crosshair__line { display: block; }
.hud-crosshair[data-shape="bracket"] .hud-crosshair__line--t,
.hud-crosshair[data-shape="bracket"] .hud-crosshair__line--b { height: 5px; }

/* 开镜：隐藏动态准星（visibility 立即生效，不依赖过渡帧），显示瞄准镜遮罩 */
.hud[data-ads="true"] .hud-crosshair {
  opacity: 0;
  visibility: hidden;
}

.hud-scope {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hud[data-ads="true"] .hud-scope {
  display: block;
}

.hud-scope__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vh, 74vw);
  height: min(74vh, 74vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(0, 234, 255, 0.5);
  box-shadow:
    0 0 0 9999px rgba(3, 6, 12, 0.72),
    inset 0 0 60px rgba(0, 0, 0, 0.75);
}

.hud-scope__line {
  position: absolute;
  background: rgba(0, 234, 255, 0.45);
}

.hud-scope__line--h {
  left: 50%;
  top: 50%;
  width: min(74vh, 74vw);
  height: 1px;
  transform: translate(-50%, -50%);
}

.hud-scope__line--v {
  left: 50%;
  top: 50%;
  width: 1px;
  height: min(74vh, 74vw);
  transform: translate(-50%, -50%);
}

.hud-scope__tick {
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(0, 234, 255, 0.35);
}

.hud-scope__tick--h {
  width: 46px;
  height: 1px;
  transform: translate(-50%, -50%);
  box-shadow: 0 -18px 0 rgba(0, 234, 255, 0.3), 0 18px 0 rgba(0, 234, 255, 0.3);
}

.hud-scope__tick--v {
  width: 1px;
  height: 46px;
  transform: translate(-50%, -50%);
  box-shadow: -18px 0 0 rgba(0, 234, 255, 0.3), 18px 0 0 rgba(0, 234, 255, 0.3);
}

.hud-scope__label {
  position: absolute;
  left: 50%;
  top: calc(50% + min(37vh, 37vw) - 26px);
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(0, 234, 255, 0.7);
}

/* ============================================================
 * 8. 中央提示（重生 / 进入载具 / 联机状态）
 * ============================================================ */

.hud-toast {
  position: absolute;
  left: 50%;
  /* 38%：竖屏(≈308px)/横屏(≈142px) 都落在「其他 HUD 面板之间的空档」，
     既不压生命/护甲、也不压底部武器面板与中心准星（US-014 修复）。 */
  top: 38%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(6, 10, 20, 0.86);
  border: var(--ui-neon-border);
  color: var(--neon-cyan);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: cs-ui-toast-in 200ms ease-out both;
}

/* ============================================================
 * 9. Tab 积分板（按住显示；行节点复用）
 * ============================================================ */

.hud-board {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 86vw);
  max-height: 76vh;
  overflow: hidden;
  padding: 12px 14px;
  background: var(--ui-panel-bg-strong);
  border: var(--ui-neon-border);
  border-radius: var(--ui-panel-radius);
  box-shadow: var(--ui-panel-shadow);
}

.hud-board__title {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--neon-cyan);
  text-shadow: var(--ui-neon-text-shadow);
  margin-bottom: 8px;
}

.hud-board__row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1fr);
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
}

.hud-board__row--head {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(0, 234, 255, 0.2);
}

.hud-board__row.is-local {
  background: rgba(0, 234, 255, 0.16);
  border: 1px solid rgba(0, 234, 255, 0.5);
  color: var(--neon-cyan);
}

.hud-board__row.is-top {
  color: var(--neon-magenta);
}

.hud-board__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-board__hint {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-align: right;
}

/* ============================================================
 * 10. 触屏布局：HUD 与按钮重排（安全区适配、不遮挡准星）
 * ============================================================ */

/* 桌面端隐藏触屏按钮（布局类按钮只在触屏布局出现） */
.hud-buttons {
  display: none;
  position: absolute;
  left: var(--ui-edge-x);
  /* 小地图实占高度 = --ui-minimap-size + 12px(padding) + 2px(border)；
     +10px 为两者间隙。必须按「实占」算，否则面板会压在小地图上（US-014 修复）。 */
  top: calc(var(--ui-edge) + var(--ui-minimap-size) + 24px);
  flex-direction: column;
  gap: 8px;
}

.hud-btn {
  pointer-events: auto;
  min-width: var(--touch-target-min, 44px);
  min-height: var(--touch-target-min, 44px);
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(12, 20, 34, 0.66);
  border: 1px solid rgba(0, 234, 255, 0.45);
  color: var(--text-primary);
  font-size: 12px;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hud-btn:active,
.hud-btn.is-active {
  background: rgba(0, 234, 255, 0.28);
  color: var(--neon-cyan);
}

/* 触屏布局重排（竖屏 / 横屏都由 [data-layout="touch"] 驱动） */
.hud[data-layout="touch"] {
  --ui-minimap-size: 116px;
  --ui-edge: calc(env(safe-area-inset-top, 0px) + 10px);
  --ui-edge-x: calc(env(safe-area-inset-left, 0px) + 10px);
  --ui-edge-x-r: calc(env(safe-area-inset-right, 0px) + 10px);
  --ui-edge-b: calc(env(safe-area-inset-bottom, 0px) + 12px);
  font-size: 12px;
}

.hud[data-layout="touch"] .hud-buttons {
  display: flex;
}

/* 触屏：生命/护甲移到左上（小地图下方），摇杆在左下不被遮挡 */
.hud[data-layout="touch"] .hud-vitals {
  /* 小地图(实占) → 积分板按钮 → 生命/护甲：逐级下排，三者互不重叠 */
  top: calc(var(--ui-edge) + var(--ui-minimap-size) + 24px + var(--touch-target-min, 44px) + 10px);
  bottom: auto;
  width: min(180px, 46vw);
}

.hud[data-layout="touch"] .hud-vehicle {
  top: calc(var(--ui-edge) + var(--ui-minimap-size) + 24px + var(--touch-target-min, 44px) + 10px);
  bottom: auto;
  width: min(190px, 48vw);
}

/* 触屏：武器与弹药移到屏幕底部正中（右下角留给按钮簇） */
.hud[data-layout="touch"] .hud-weapon {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  align-items: center;
  padding: 6px 10px;
}

.hud[data-layout="touch"] .hud-ammo__mag {
  font-size: 22px;
}

.hud[data-layout="touch"] .hud-slot {
  width: 38px;
  height: 30px;
}

/* 触屏：击杀提示下移，避开右上角「暂停」按钮（48px + 边距） */
.hud[data-layout="touch"] .hud-topright {
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  max-width: 52vw;
}

.hud[data-layout="touch"] .hud-kill {
  font-size: 11px;
  padding: 2px 7px;
}

.hud[data-layout="touch"] .hud-score__val {
  font-size: 20px;
}

.hud[data-layout="touch"] .hud-board {
  width: 92vw;
  font-size: 12px;
}

.hud[data-layout="touch"] .hud-board__row {
  grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 0.7fr)) minmax(0, 0.9fr);
  font-size: 11px;
}

/* 横屏（矮屏）：进一步压缩 HUD 高度与字号，保证中心准星区域干净 */
@media (orientation: landscape) and (max-height: 520px) {
  .hud-topcenter {
    top: calc(env(safe-area-inset-top, 0px) + 6px);
  }

  .hud-score__val {
    font-size: 18px;
  }

  .hud-vitals {
    width: min(200px, 34vw);
  }

  /* 横屏矮屏：左列只能容纳「小地图 → 生命/护甲」两级（左下角被摇杆占用，
     再往下堆就会压住摇杆），因此触屏的「积分板」按钮改到小地图右侧、顶部对齐；
     生命/护甲紧贴小地图下方（实占底边 = top + size + 14px）。 */
  .hud[data-layout="touch"] .hud-buttons {
    left: calc(var(--ui-edge-x) + var(--ui-minimap-size) + 24px);
    top: var(--ui-edge);
  }

  .hud[data-layout="touch"] .hud-vitals,
  .hud[data-layout="touch"] .hud-vehicle {
    top: calc(var(--ui-edge) + var(--ui-minimap-size) + 24px);
  }

  .hud-toast {
    top: 38%;
    font-size: 12px;
  }
}

/* 极窄竖屏：武器面板缩小，避免与小地图/按钮打架 */
@media (orientation: portrait) and (max-width: 359px) {
  .hud-slot {
    width: 32px;
  }

  .hud-slot__name {
    font-size: 10px;
  }

  .hud-ammo__mag {
    font-size: 20px;
  }
}

/* US-014 竖屏手机（≤480px）：触屏布局下小地图在左上、而记分牌仍居中对齐，
   两者在 375px 宽屏实测重叠 46px（小地图盖住「分数/排名」）；且底部居中的
   武器/弹药/切枪面板被右手按钮簇（换弹/开火…）压住。这里把记分牌右移避开
   小地图与右上角暂停键，并把武器面板抬到按钮簇之上，保证 HUD 与触屏控件
   互不遮挡。仅作用于竖屏窄屏：横屏（812x375）与桌面端不受影响。 */
@media (orientation: portrait) and (max-width: 480px) {
  /* 竖屏窄屏：分数/排名面板的左边界 = 小地图实占右边界(edge-x + size + 14px) + 8px，
     右边界让开右上角「暂停」按钮；两者都在同一行且互不相交（US-014 修复）。 */
  .hud[data-layout="touch"] .hud-topcenter {
    left: calc(var(--ui-edge-x) + var(--ui-minimap-size) + 14px + 8px);
    right: calc(var(--ui-edge-x-r) + 62px);
    transform: none;
    max-width: none;
  }

  /* 竖屏收窄分数行，保证内容不溢出到小地图上 */
  .hud[data-layout="touch"] .hud-score {
    gap: 6px;
    padding: 4px 8px;
  }

  /* 「击杀/死亡」明细在窄屏隐藏（击杀信息由击杀提示/积分板承载） */
  .hud[data-layout="touch"] .hud-score__kd {
    display: none;
  }

  /* 竖屏把在线状态 / 击杀提示下移，避开分数面板（其底边约 92px） */
  .hud[data-layout="touch"] .hud-topright {
    top: calc(env(safe-area-inset-top, 0px) + 104px);
  }

  .hud[data-layout="touch"] .hud-killfeed {
    max-height: 96px;
    overflow: hidden;
  }

  .hud[data-layout="touch"] .hud-weapon {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 232px);
  }
}

/* ============================================================
 * 11. 动画
 * ============================================================ */

@keyframes cs-ui-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes cs-ui-slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cs-ui-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-kill,
  .hud-toast {
    animation: none;
  }

  .hud-ammo--empty .hud-ammo__mag,
  .hud-bar--hp .hud-bar__fill.is-critical,
  .hud-timer.is-low {
    animation: none;
  }
}

/* ============================================================
 * 12. 菜单外壳（#menu-root 内）：背景网格 + 扫描线
 * ============================================================ */

.menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  overflow: hidden;
}

.menu__grid {
  position: absolute;
  inset: -20% -10% -40% -10%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 234, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 47, 208, 0.1) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: 50% 100%;
  opacity: 0.45;
  mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
}

.menu__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 234, 255, 0.06) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.7;
  animation: cs-menu-scan 6s linear infinite;
}

@keyframes cs-menu-scan {
  0% { background-position-y: 0; }
  100% { background-position-y: 60px; }
}

/* ============================================================
 * 13. 主菜单面板
 * ============================================================ */

.menu-panel {
  position: relative;
  width: min(760px, 94vw);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: clamp(18px, 3vw, 30px);
  background: var(--ui-panel-bg-strong);
  border: var(--ui-neon-border);
  border-radius: 18px;
  box-shadow: var(--ui-panel-shadow), 0 0 40px rgba(0, 234, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cs-menu-in 220ms ease-out both;
}

.menu-panel[hidden] {
  display: none !important;
}

.menu-panel--compact {
  width: min(420px, 92vw);
}

@keyframes cs-menu-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.menu-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(0, 234, 255, 0.22);
  padding-bottom: 12px;
}

.menu-head--sub {
  padding-bottom: 8px;
}

.menu-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12em;
  font-size: clamp(30px, 6.4vw, 54px);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--text-primary);
  position: relative;
  text-transform: uppercase;
}

/* 霓虹描边标题：文字描边 + 发光 + 品红偏移重影 */
.menu-title__a {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--neon-cyan);
  text-shadow: var(--ui-neon-glow);
}

.menu-title__b {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.9), 0 0 30px rgba(0, 234, 255, 0.35);
}

.menu-title__c {
  color: var(--neon-magenta);
  font-size: 0.62em;
  letter-spacing: 0.22em;
  text-shadow: 0 0 10px rgba(255, 47, 208, 0.85);
}

.menu-title::after {
  content: 'CYBERSTRIKE 3D';
  position: absolute;
  left: 2px;
  top: 2px;
  color: rgba(255, 47, 208, 0.35);
  -webkit-text-stroke: 0;
  text-shadow: none;
  clip-path: inset(58% 0 26% 0);
  pointer-events: none;
  z-index: -1;
}

.menu-panel__title {
  font-size: clamp(20px, 3.4vw, 28px);
  letter-spacing: 0.12em;
  color: var(--neon-cyan);
  text-shadow: var(--ui-neon-text-shadow);
}

.menu-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.menu-group {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--neon-magenta);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---------- 按钮 ---------- */

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-actions__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.menu-actions__row > .menu-btn {
  flex: 1 1 132px;
}

.menu-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 234, 255, 0.35);
  background: linear-gradient(180deg, rgba(12, 22, 38, 0.9), rgba(8, 12, 22, 0.9));
  color: var(--text-primary);
  text-align: left;
  transition: transform 90ms ease-out, box-shadow 140ms linear, border-color 140ms linear;
}

.menu-btn:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 234, 255, 0.35);
}

.menu-btn:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: inset 0 0 18px rgba(0, 234, 255, 0.25);
}

.menu-btn__text {
  font-size: 15px;
  letter-spacing: 0.06em;
}

.menu-btn__hint {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.menu-btn--primary {
  border-color: rgba(0, 234, 255, 0.75);
  background: linear-gradient(180deg, rgba(0, 234, 255, 0.18), rgba(8, 14, 24, 0.92));
  box-shadow: 0 0 16px rgba(0, 234, 255, 0.22);
}

.menu-btn--primary .menu-btn__text {
  color: var(--neon-cyan);
  text-shadow: var(--ui-neon-text-shadow);
}

.menu-btn--ghost {
  align-items: center;
  border-color: rgba(125, 143, 168, 0.4);
  color: var(--text-muted);
}

.menu-btn--ghost .menu-btn__text {
  font-size: 13px;
}

/* ---------- 表单与设置控件 ---------- */

.menu-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.menu-field__label {
  flex: 0 0 128px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.menu-field__val {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--neon-cyan);
}

.menu-input {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 234, 255, 0.35);
  background: rgba(4, 8, 16, 0.85);
  color: var(--text-primary);
  font-size: 14px;
}

.menu-input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.3);
}

.menu-input--mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.menu-range {
  flex: 1 1 180px;
  min-height: 32px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.menu-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 234, 255, 0.6), rgba(255, 47, 208, 0.5));
}

.menu-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #08111d;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.7);
}

.menu-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 234, 255, 0.6), rgba(255, 47, 208, 0.5));
}

.menu-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #08111d;
  border: 2px solid var(--neon-cyan);
}

.menu-quality {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.menu-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 52px;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid rgba(0, 234, 255, 0.28);
  background: rgba(6, 12, 22, 0.8);
  text-align: left;
}

.menu-choice__name {
  font-size: 13px;
  color: var(--text-primary);
}

.menu-choice__hint {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.menu-choice.is-active {
  border-color: var(--neon-cyan);
  background: rgba(0, 234, 255, 0.16);
  box-shadow: 0 0 14px rgba(0, 234, 255, 0.3);
}

.menu-choice.is-active .menu-choice__name {
  color: var(--neon-cyan);
}

.menu-choice.is-active .menu-choice__hint {
  color: rgba(232, 246, 255, 0.75);
}

.menu-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.menu-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(232, 246, 255, 0.22);
  background: var(--swatch, var(--neon-cyan));
}

.menu-swatch.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 12px var(--swatch, var(--neon-cyan));
}

.menu-color {
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid rgba(0, 234, 255, 0.4);
  background: rgba(4, 8, 16, 0.9);
}

.menu-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.menu-note--dim {
  color: var(--text-dim);
  font-size: 11.5px;
}

/* ---------- 历史积分榜 ---------- */

.menu-best__top {
  font-size: 15px;
  color: var(--neon-amber);
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(255, 176, 32, 0.5);
}

.menu-best {
  border: 1px solid rgba(0, 234, 255, 0.22);
  border-radius: 10px;
  overflow: hidden;
}

.menu-best__row {
  display: grid;
  grid-template-columns: 40px repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
}

.menu-best__row--head {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  background: rgba(0, 234, 255, 0.08);
}

.menu-best__row.is-top {
  color: var(--neon-cyan);
  background: rgba(0, 234, 255, 0.06);
}

.menu-best__body .menu-best__row + .menu-best__row {
  border-top: 1px solid rgba(0, 234, 255, 0.12);
}

.menu-best__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 操作说明 ---------- */

.menu-help {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 12.5px;
}

.menu-help--list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
}

.menu-help__key {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--neon-cyan);
  letter-spacing: 0.04em;
}

.menu-help__desc {
  color: var(--text-muted);
}

.menu-help__item {
  position: relative;
  padding-left: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

.menu-help__item::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--neon-magenta);
}

/* ---------- 结算面板 ---------- */

.menu-badge {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  border: var(--ui-neon-border-magenta);
  color: var(--neon-magenta);
  font-size: 12px;
  letter-spacing: 0.14em;
  box-shadow: 0 0 14px rgba(255, 47, 208, 0.35);
  animation: cs-ui-blink 1.1s steps(2, end) infinite;
}

.menu-settle__score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.menu-settle__score-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.menu-settle__score-val {
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--neon-cyan);
  text-shadow: var(--ui-neon-glow);
  line-height: 1;
}

.menu-settle__table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 234, 255, 0.22);
  border-radius: 10px;
  overflow: hidden;
}

.menu-settle__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
}

.menu-settle__row + .menu-settle__row {
  border-top: 1px solid rgba(0, 234, 255, 0.12);
}

.menu-settle__row--sum {
  background: rgba(0, 234, 255, 0.1);
  color: var(--neon-cyan);
  font-weight: 700;
}

.menu-settle__name {
  color: var(--text-muted);
}

.menu-settle__row--sum .menu-settle__name {
  color: var(--neon-cyan);
}

.menu-settle__count {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.menu-settle__gain {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--neon-lime);
}

.menu-settle__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.menu-settle__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 234, 255, 0.2);
  background: rgba(4, 8, 16, 0.6);
}

.menu-settle__stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.menu-settle__stat-val {
  font-size: 16px;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* ============================================================
 * 14. 触屏布局下的菜单适配（大按钮、单列、适配安全区）
 * ============================================================ */

.menu-root[data-layout="touch"] .menu {
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
}

.menu-root[data-layout="touch"] .menu-panel {
  width: 100%;
  padding: 16px 14px;
  gap: 12px;
}

.menu-root[data-layout="touch"] .menu-title {
  font-size: clamp(26px, 9vw, 40px);
}

.menu-root[data-layout="touch"] .menu-btn {
  min-height: 52px;
  padding: 12px 14px;
}

.menu-root[data-layout="touch"] .menu-actions__row > .menu-btn {
  flex: 1 1 100%;
}

.menu-root[data-layout="touch"] .menu-quality {
  grid-template-columns: 1fr;
}

.menu-root[data-layout="touch"] .menu-choice {
  min-height: 56px;
}

.menu-root[data-layout="touch"] .menu-swatch,
.menu-root[data-layout="touch"] .menu-color {
  width: 48px;
  height: 48px;
}

.menu-root[data-layout="touch"] .menu-field__label {
  flex: 1 1 100%;
}

.menu-root[data-layout="touch"] .menu-help {
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
  font-size: 12px;
  gap: 5px 10px;
}

/* 矮屏（横屏手机）：菜单整体缩放，避免溢出 */
@media (orientation: landscape) and (max-height: 520px) {
  .menu-panel {
    padding: 14px 16px;
    gap: 10px;
  }

  .menu-title {
    font-size: clamp(22px, 4.4vw, 34px);
  }

  .menu-btn {
    min-height: 44px;
    padding: 8px 12px;
  }

  .menu-btn__hint {
    display: none;
  }
}