/* stardust-frontline/css/main.css */
/* ================================================================
   星尘战线 · 全局样式
   §4 全局 UI 规范：色板 / 字体 / 面板 / 按钮 / 界面切换
   ================================================================ */

:root {
  /* 色板（宪法 §4，唯一事实来源） */
  --bg-deep: #05070f;
  --bg-panel: rgba(13, 20, 38, .82);
  --line: rgba(120, 180, 255, .25);
  --accent: #4ca7ff;
  --accent2: #8fd6ff;
  --white: #eef4ff;
  --hp: #6fe3a5;
  --danger: #ff6b6b;
  --gold: #ffd54f;
  --rare: #4fc3f7;
  --epic: #b388ff;
  --legend: #ffd54f;

  /* 字号（v1.6.0 响应式：clamp 上界 = 原值 —— 桌面渲染逐像素不变，窄屏自动收缩） */
  --fs-title: clamp(20px, 1.4vw + 12px, 28px);
  --fs-body: 14px;
  --fs-btn: clamp(15px, 0.6vw + 13px, 16px);
  --ls-title: clamp(2px, 0.2vw + 1.5px, 4px);

  /* v1.6.0 响应式：安全区域（iOS 刘海/灵动岛 + Android 手势条；
     viewport-fit=cover 已启用，桌面/无安全区环境 env 回退 0px 零影响） */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
}

body {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: var(--fs-body);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- 三层固定布局 ---------- */
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: #000;
}

#app {
  position: fixed;
  inset: 0;
  z-index: 5;
}

/* 战斗固定视口锁：不允许宿主 WebView/浏览器把整页当成可拖动文档。滚动只
   在图鉴/设置等明确的内容容器内发生，战斗背景由输入层接管。 */
html.sf-battle-active,
html.sf-battle-active body,
html.sf-battle-active #app,
html.sf-battle-active .battle-root {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* ba-click-fx 覆盖层自带 pointer-events:none + 最高 z-index，无需额外处理 */

/* ---------- 按钮（宪法 §4） ---------- */
.btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--fs-btn);
  letter-spacing: .18em;
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 28px;
  cursor: pointer;
  transition:
    background .15s,
    border-color .15s,
    color .15s,
    box-shadow .15s,
    transform .15s;
}

.btn:hover {
  background: rgba(76, 167, 255, .15);
  border-color: rgba(120, 180, 255, .5);
  color: var(--white);
  box-shadow: 0 0 24px rgba(76, 167, 255, .28), inset 0 0 12px rgba(76, 167, 255, .08);
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 第19轮：出击按钮加载失败警示（网页版首次加载被拦截时的重试入口） */
.btn-warn {
  color: #ff7a6b !important;
  border-color: rgba(255, 122, 107, .55) !important;
}

.btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 面板（宪法 §4） ---------- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(76, 167, 255, .12);
}

/* ---------- 界面切换：淡入淡出 250ms + 8px 位移（宪法 §4） ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                 /* 第15轮：原生滚动 → Canvas 自绘（根治滚动条闪现） */
}

.screen-in  { animation: screenIn .25s ease-out; }    /* 不 fill：动画结束回落基础 transform（移动端 UI 缩放 scale 不被覆盖） */
.screen-out { animation: screenOut .25s ease-in both; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes screenOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ---------- 主菜单（menuUI.js 构建的 DOM） ---------- */
.menu-root {
  flex-direction: column;
  text-align: center;
}

.menu-title {
  font-size: var(--fs-title);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 64px;
  text-shadow: 0 0 22px rgba(76, 167, 255, .35);
}

.menu-title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(7px);
  filter: blur(6px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease, text-shadow .5s ease;
}

.menu-title .ch.lit {
  opacity: 1;
  transform: none;
  filter: blur(0);
  text-shadow: 0 0 16px rgba(143, 214, 255, .8);
}

.menu-title .ch.space { width: 1.05em; }

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;                      /* 宪法：按钮间距 20px */
  align-items: center;
}

.menu-nav .btn {
  width: 250px;
  text-align: center;
  /* 模糊背景（毛玻璃）：贴合主菜单粒子背景的层次感 */
  background: rgba(10, 18, 36, .38);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  /* 浮现过渡（第8轮：粒子汇聚同期，柔和显现） */
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.22, 1, .36, 1),
    filter .55s ease,
    background .15s,
    border-color .15s,
    color .15s,
    box-shadow .15s;
}

.menu-btn-hide {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  filter: blur(8px);
  pointer-events: none;
}

.menu-btn-show {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 主菜单版本页脚：右下角低调淡蓝小字 */
.menu-ver {
  position: absolute;
  right: calc(18px + var(--sa-r));
  bottom: calc(14px + var(--sa-b));
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(115, 158, 228, .8);
  pointer-events: none;
}

/* ---------- 占位屏幕（screens.js 路由骨架） ---------- */
.screen-panel {
  padding: 48px 60px;
  text-align: center;
  min-width: min(360px, 92vw);
}

.screen-title {
  font-size: var(--fs-title);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent2);
  margin-bottom: 40px;
  text-shadow: 0 0 18px rgba(76, 167, 255, .3);
}

/* ================================================================
   战斗屏幕与 HUD（hud.js，宪法 §4 HUD 红线 12 项）
   ================================================================ */
.battle-root {
  background: #05070f;
}

#battle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 第21轮：电子屏幕滤镜（扫描线 + 暗角）—— 参考「引力回响」屏幕质感；
   只随战斗屏幕存在（hud.js 构建），canvas 之上、HUD(z2) 之下 → 菜单/HUD 不受影响。
   开关 save.settings.screenFx（默认关）→ .off 隐藏 */
.screenfx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2,3,12,.65) 100%);
}
.screenfx.off {
  display: none;
}

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* HUD 根层只负责铺满视口，交互必须显式恢复命中。
   之前只有“自定义 HUD”模式才恢复 pointer-events:auto，实机上按钮视觉可见但
   elementFromPoint 永远落到 battle-canvas，技能/冲刺/互动/菜单全部无法点按。 */
.hud .skill-slot,
.hud .hud-menubtn,
.hud .hud-touch-btn,
.hud .denial-buildbtn,
.hud .ui-editor-hotspot { pointer-events: auto; }

/* ---------- 1 玩家卡（左上） ---------- */
.hud-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(76, 167, 255, .12);
}

.hud-pcard { top: calc(16px + var(--sa-t)); left: calc(16px + var(--sa-l)); }

.pcard-icon { display: flex; }

.pcard-name {
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--accent2);
  text-shadow: 0 0 10px rgba(76, 167, 255, .5);
}

/* 第20轮：机体名 + 血条数字同一行 */
.pcard-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.hpbar {
  position: relative;
  width: 220px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(6, 10, 20, .72);
  overflow: hidden;
}

.hpbar.thin { width: 150px; height: 10px; }

.hpfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #7deab1, var(--hp));
  border-radius: 6px;
  transition: width .25s ease;
  box-shadow: 0 0 8px rgba(111, 227, 165, .45);
}

.hpfill.low {
  background: linear-gradient(180deg, #ffb3b3, var(--danger));
  box-shadow: 0 0 8px rgba(255, 107, 107, .5);
}

.hpfill.mate { background: linear-gradient(180deg, #9fd8ff, var(--rare)); }

/* 第20轮：血条数字（机体名后，不再覆盖在血条内） */
.hptext {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(143, 214, 255, .92);
  text-shadow: 0 0 8px rgba(76, 167, 255, .5);
}

.shieldbar {
  display: none;
  margin-top: 4px;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: rgba(6, 10, 20, .6);
  overflow: hidden;
}

.shieldbar.mate {
  width: 160px;
  height: 4px;
  margin-top: 3px;
}

/* ---------- 热量条（第10轮：光束武器过热） ---------- */
.heatbar {
  display: none;
  position: relative;
  margin-top: 4px;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: rgba(6, 10, 20, .6);
  overflow: hidden;
}

.heatfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9e40, #ff5252);
  transition: width .12s linear;
}

.heatbar.over .heatfill { background: linear-gradient(90deg, #ff5252, #ff1744); }

.heatlabel {
  position: absolute;
  right: -34px;
  top: -3px;
  font-size: 10px;
  color: #ff5252;
  letter-spacing: .05em;
}

/* ---------- 剧情覆盖层（第10轮：关卡开始显示章节名+剧情） ---------- */
.story-overlay {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  max-width: min(640px, 88vw);
  padding: 14px 22px;
  text-align: center;
  background: rgba(6, 10, 20, .72);
  border: 1px solid rgba(120, 180, 255, .28);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .6s ease;
  z-index: 5;
  pointer-events: none;
}

.story-overlay.show { opacity: 1; }

.story-chapter {
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--accent2);
  text-shadow: 0 0 10px rgba(143, 214, 255, .5);
  margin-bottom: 6px;
}

.story-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--white);
  opacity: .92;
}

.shieldfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4fc3f7, #8fd6ff);
  transition: width .25s ease;
  box-shadow: 0 0 6px rgba(79, 195, 247, .6);
}

/* 激活增益图标行：3 个 buff 槽 + 右侧复活徽章（第28轮填充） */
.buff-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.buff-slot {
  width: 26px;
  height: 26px;
  position: relative;
  border: 1px dashed rgba(120, 180, 255, .3);
  border-radius: 6px;
  background: rgba(13, 20, 38, .45);
  transition: border-color .2s ease, background .2s ease;
}

/* 有增益激活：虚线转实线亮框 */
.buff-slot.on {
  border-style: solid;
  border-color: rgba(143, 214, 255, .45);
  background: rgba(23, 38, 66, .5);
}

.buff-ico {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  color: var(--accent2);
}

.buff-t {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: rgba(143, 214, 255, .92);
  text-shadow: 0 0 3px rgba(76, 167, 255, .55);
}

/* 剩余复活机会（第28轮）：canvas 自绘徽章阵列 */
.revive-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.revive-badge {
  width: 16px;
  height: 16px;
  display: block;
  transition: filter .25s ease, opacity .25s ease;
}

.revive-t {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent2);
  text-shadow: 0 0 4px rgba(76, 167, 255, .6);
}

/* 3s 原地复活倒计时：徽章蓝光呼吸脉动 */
.revive-row.countdown .revive-badge {
  animation: revivePulse 1s ease-in-out infinite;
}

@keyframes revivePulse {
  50% {
    filter: brightness(1.75) drop-shadow(0 0 5px rgba(143, 214, 255, .95));
  }
}

/* ---------- 2 队友卡（左下） ---------- */
.hud-mcard { bottom: calc(16px + var(--sa-b)); left: calc(16px + var(--sa-l)); flex-direction: column; align-items: flex-start; gap: 5px; }

.mcard-name {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent2);
  opacity: .85;
}

.mcard-status {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--white);
  opacity: .6;
}

/* ---------- 3 小地图（右上，180×120） ---------- */
.hud-mmwrap {
  position: absolute;
  top: calc(16px + var(--sa-t));
  right: calc(16px + var(--sa-r));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(76, 167, 255, .12);
}

#hud-minimap {
  width: 180px;
  height: 120px;
  background: rgba(3, 6, 14, .9);
  border-radius: 5px;
}

.mm-star-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 213, 79, .4);
}

.mm-level {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent2);
  opacity: .85;
}

/* ---------- 5 目标追踪器（顶部中央） ---------- */
.hud-objective {
  position: absolute;
  top: calc(16px + var(--sa-t));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--accent2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 20, 38, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 0 10px rgba(76, 167, 255, .5);
}

/* ---------- 6 战斗卡组（底部中央） ---------- */
.hud-deck {
  position: absolute;
  bottom: calc(16px + var(--sa-b));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.skill-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 20, 38, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-slot.locked { opacity: .55; }

.skill-icon { display: flex; color: var(--accent2); }
.skill-icon.gray { color: #5a6b85; }
.skill-icon.gray svg { stroke: #5a6b85; }

.skill-key {
  position: absolute;
  left: 4px;
  bottom: 2px;
  font-size: 9px;
  letter-spacing: .05em;
  color: var(--accent2);
  opacity: .8;
}

.skill-cd {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: conic-gradient(from 0deg, rgba(6, 10, 20, .85) var(--deg), rgba(6, 10, 20, 0) var(--deg));
  opacity: 0;
  transition: opacity .2s;
}

.skill-slot.on-cd .skill-cd { opacity: 1; }

.skill-cdtext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 0 6px rgba(0, 0, 0, .9);
}

.skill-lock {
  position: absolute;
  right: 3px;
  top: 3px;
  display: flex;
}

.weapon-card {
  position: relative;                 /* 第20轮：B 键角标定位基准 */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 20, 38, .85);
  min-height: 52px;
}

.weapon-card[data-quality="rare"]   { border-color: var(--rare);   box-shadow: 0 0 14px rgba(79, 195, 247, .25); }
.weapon-card[data-quality="epic"]   { border-color: var(--epic);   box-shadow: 0 0 14px rgba(179, 136, 255, .3); }
.weapon-card[data-quality="legend"] { border-color: var(--legend); box-shadow: 0 0 14px rgba(255, 213, 79, .3); }

.weapon-icon { display: flex; }

.weapon-name {
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--white);
}

/* ---------- 7 浮动伤害数字 ---------- */
.dmg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}

.dmg-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 0 6px rgba(0, 0, 0, .9), 0 0 2px #000;
  animation: dmgFloat 1s ease-out both;
  pointer-events: none;
}

.dmg-num.crit { color: var(--gold); font-size: 17px; }
.dmg-num.heal { color: #a5d6a7; font-size: 13px; }

@keyframes dmgFloat {
  0%   { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--drift, 14px))); }
}

/* ---------- 8 事件 toast（右下角竖排堆叠） ---------- */
.toast-stack {
  position: absolute;
  right: calc(16px + var(--sa-r));
  bottom: calc(90px + var(--sa-b));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 6;
}

.toast {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(13, 20, 38, .85);
  animation: toastIn .25s ease-out both;
}

.toast.out { animation: toastOut .4s ease-in both; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ---------- 9 低血量警告（边缘红色呼吸脉冲） ---------- */
.lowhp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 90px 30px rgba(255, 60, 60, .35);
  z-index: 4;
}

.lowhp.on {
  opacity: 1;
  animation: lowhpPulse 1.1s ease-in-out infinite;
}

@keyframes lowhpPulse {
  0%, 100% { box-shadow: inset 0 0 70px 20px rgba(255, 60, 60, .25); }
  50%      { box-shadow: inset 0 0 110px 40px rgba(255, 60, 60, .5); }
}

/* ---------- 10 中央横幅（逐字显现） ---------- */
.hud-banner {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(24px, 4vw + 12px, 32px);
  letter-spacing: .3em;
  color: var(--accent2);
  text-shadow: 0 0 26px rgba(76, 167, 255, .85);
  opacity: 0;
  transition: opacity .45s ease;     /* 淡入淡出双向过渡（第8轮） */
  pointer-events: none;
  z-index: 7;
}

.hud-banner.show { opacity: 1; }

.hud-banner .ch {
  display: inline-block;
  opacity: 0;
  transition: opacity .4s;
}

.hud-banner .ch.lit { opacity: 1; }

/* ---------- 10.5 随机特殊事件 · 居中静态横幅（左右蓝色三角 + 事件名 + 小字说明） ---------- */
.hud-marquee {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transform: translateY(-80px);            /* 初始态：上移 + 透明 */
  transition: opacity .5s ease, transform .5s ease;
}

.hud-marquee.on {
  opacity: 1;
  transform: translateY(0);                /* 滑入到位 */
}

.hud-marquee-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hud-marquee-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(26px, 5vw + 14px, 42px);
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--accent2);                   /* 与"时间停滞"横幅同款蓝色 */
  text-shadow: 0 0 26px rgba(76, 167, 255, .85);
}

.hud-marquee-sub {
  font-size: 17px;                         /* 说明小字（比横幅小一号） */
  letter-spacing: .22em;
  color: var(--accent2);
  opacity: .85;
  text-shadow: 0 0 14px rgba(76, 167, 255, .6);
}

.hud-marquee .hud-warn {
  display: inline-block;
  width: 26px;
  height: 23px;
}

/* ---------- 12 Boss 血条（第9轮：多 Boss 叠条，每 Boss 一条不重叠） ---------- */
.bosswrap {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

/* 第20轮：防卫作战核心 HUD（top 74px）遮挡 Boss 血条 → 该模式下 Boss 条下移 */
.denial-wrap:not([hidden]) ~ .bosswrap { top: 128px; }

.bossbar {
  width: 100%;
  padding: 6px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 10, 20, .82);
  text-align: center;
}

.bossbar .boss-name {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--danger);
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(255, 107, 107, .5);
}

.bossbar .boss-fill {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.bossbar .bossfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff8a8a, var(--danger));
  transition: width .15s;
}

/* ---------- 结算弹窗 ---------- */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.modal-backdrop[hidden] { display: none; }

.modal {
  min-width: min(320px, 90vw);
  padding: 34px 44px;
  text-align: center;
  animation: modalIn .3s cubic-bezier(.2, .9, .3, 1.15) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

.modal-title {
  font-size: clamp(19px, 1vw + 14px, 24px);
  letter-spacing: .3em;
  font-weight: 600;
  color: var(--accent2);
  margin-bottom: 24px;
  text-shadow: 0 0 16px rgba(76, 167, 255, .4);
}

.modal-title.fail {
  color: var(--danger);
  text-shadow: 0 0 16px rgba(255, 107, 107, .4);
}

.modal-stats {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--white);
}

.modal-stats .row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.modal-stats .k { color: var(--accent2); opacity: .75; }
.modal-stats .v-gold { color: var(--gold); }

/* ================================================================
   职业选择（classSelect.js）
   ================================================================ */
.cs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px;
}

.cs-head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cs-stardust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 213, 79, .4);
}

.modal-body {
  font-size: 14px;
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.7;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.cs-body {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.cs-list {
  width: min(380px, 94vw);
  overflow: hidden;              /* 第15轮：原生滚动 → Canvas 自绘（滚动状态 JS 维护） */
  max-height: 440px;
}
.cs-list-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  will-change: transform;        /* 内容位移由 canvasScroll transform 驱动 */
}

.cs-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cs-row:hover { background: rgba(76, 167, 255, .1); }
.cs-row.sel { border-color: var(--accent); background: rgba(76, 167, 255, .14); }

.cs-row-name { font-weight: 600; letter-spacing: .08em; }
.cs-row-tag { font-size: 11px; opacity: .65; }
.cs-row-state { font-size: 11px; white-space: nowrap; }
.cs-row-state .ok { color: var(--hp); }
.cs-row-state .locked { color: var(--danger); }

.cs-detail {
  width: min(420px, 94vw);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
}

.cs-detail-head {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.cs-detail-name { font-size: clamp(18px, 1vw + 14px, 22px); font-weight: 600; letter-spacing: .2em; }
.cs-detail-tag { font-size: 12px; opacity: .7; }

.cs-stat, .cs-wpn, .cs-sk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.cs-stat .k, .cs-wpn .k, .cs-sk .k {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent2);
  min-width: 76px;
}

.cs-stat .bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(6, 10, 20, .7);
  overflow: hidden;
}

.cs-stat .bar .fill { height: 100%; border-radius: 4px; }
.cs-stat .bar .fill.hp { background: var(--hp); }
.cs-stat .bar .fill.spd { background: var(--accent); }

.cs-wpn, .cs-sk { line-height: 1.5; }
.cs-sk.dim { opacity: .7; }

.cs-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-mate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent2);
}

.cs-mate select {
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
}

/* ================================================================
   战前准备（prepUI.js）
   ================================================================ */
.prep-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px 30px 40px;
  margin: auto;                     /* 超高时由 prepUI 滚动模块顶部对齐 + transform 位移 */
  will-change: transform;
}

/* 第15轮：战前准备 Canvas 自绘滚动条覆盖层（pointer-events:none 不挡交互） */
#prep-scroll-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.prep-body {
  display: flex;
  gap: 18px;
}

.prep-class {
  width: min(300px, 88vw);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prep-cname { font-size: clamp(19px, 1vw + 14px, 24px); font-weight: 600; letter-spacing: .18em; }
.prep-ctag { font-size: 12px; opacity: .7; margin-bottom: 8px; }
.prep-cstat, .prep-cskill { font-size: 13px; color: var(--white); line-height: 1.6; }

.prep-weapons {
  width: min(460px, 94vw);
  padding: 16px;
}

.prep-wtitle { font-size: 14px; letter-spacing: .2em; color: var(--accent2); margin-bottom: 10px; }

.prep-wlist {
  overflow: hidden;              /* 第15轮：武器列表随战前准备整体滚动，不设 max-height */
}
.prep-wlist-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prep-wrow {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.prep-wrow:hover { background: rgba(76, 167, 255, .1); }
.prep-wrow.sel { border-color: var(--accent); background: rgba(76, 167, 255, .14); }
.prep-wrow.locked { opacity: .5; cursor: not-allowed; }

/* ---------- 章节选择（章节卡含代码绘制章节图；为后续新章节预留） ---------- */
.prep-chapters { padding: 14px 16px; margin-top: 12px; width: 100%; box-sizing: border-box; }

.prep-chgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.prep-ch {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: min(396px, 88vw);
  padding: 10px;
  text-align: left;
  font: inherit;
  color: var(--white);
  background: rgba(8, 14, 28, .6);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.prep-ch:hover { background: rgba(76, 167, 255, .1); border-color: rgba(120, 180, 255, .5); }
.prep-ch.sel {
  border-color: var(--accent);
  background: rgba(76, 167, 255, .14);
  box-shadow: 0 0 14px rgba(76, 167, 255, .22);
}
.prep-ch.locked { opacity: .45; cursor: not-allowed; }

.prep-chart {
  display: block;
  flex: 0 0 auto;
  width: 150px;
  height: 84px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(120, 180, 255, .28);
}

.prep-chart svg.chapter-art { display: block; width: 100%; height: 100%; }

.prep-chart-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(238, 244, 255, .5);
  background: #05070f;
}

.prep-chinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.prep-chname { font-size: 16px; font-weight: 600; letter-spacing: .12em; color: var(--accent2); }
.prep-chdesc { font-size: 12px; opacity: .72; line-height: 1.5; }
.prep-chprog { font-size: 11px; color: #ffd54f; letter-spacing: .08em; }

/* ---------- 战役选关（第8轮） ---------- */
.prep-levels { padding: 14px 16px; margin-top: 12px; width: 100%; box-sizing: border-box; }
.prep-lvch { color: var(--accent); letter-spacing: .06em; }

.prep-lvgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.prep-lv {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--white);
  background: rgba(8, 14, 28, .6);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.prep-lv:hover { background: rgba(76, 167, 255, .1); border-color: rgba(120, 180, 255, .5); }
.prep-lv.sel { border-color: var(--accent); background: rgba(76, 167, 255, .16); color: var(--accent2); }
.prep-lv.locked { opacity: .4; cursor: not-allowed; }
.prep-lv-num { color: var(--accent2); font-weight: 600; }
.prep-lv.locked .prep-lv-num { color: var(--white); }
.prep-lv-name { letter-spacing: .04em; opacity: .92; }

/* ---------- 难度选择（第9轮） ---------- */
.prep-diff { padding: 14px 16px; margin-top: 12px; }

.prep-diffgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.prep-diffbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: var(--white);
  background: rgba(8, 14, 28, .6);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.prep-diffbtn:hover { background: rgba(76, 167, 255, .1); border-color: rgba(120, 180, 255, .5); }
.prep-diffbtn.sel { border-color: var(--accent); background: rgba(76, 167, 255, .16); }
.prep-diffname { font-weight: 600; color: var(--accent2); letter-spacing: .06em; }
.prep-diffbtn.sel .prep-diffname { color: var(--white); }
.prep-diffdesc { font-size: 11px; line-height: 1.5; opacity: .72; }

.prep-wicon {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
}

.prep-winfo { display: flex; flex-direction: column; gap: 2px; }
.prep-wname { font-size: 14px; letter-spacing: .06em; }
.prep-wname em { font-style: normal; font-size: 10px; margin-left: 6px; }
.prep-wdesc { font-size: 11px; opacity: .65; }
.prep-wstate { font-size: 11px; color: var(--danger); }

.q-common { color: var(--accent2); }
.q-rare { color: var(--rare); }
.q-epic { color: var(--epic); }
.q-legend { color: var(--legend); }

.prep-bottom { display: flex; gap: 14px; }

/* ================================================================
   局内弹窗（panels.js）：3选1 强化 + 背包
   ================================================================ */
.choice-panel {
  width: min(720px, 94vw);
  max-width: 92vw;
  padding: 26px 30px;
  text-align: center;
}

.choice-title {
  font-size: clamp(18px, 1vw + 14px, 22px);
  letter-spacing: .3em;
  color: var(--accent2);
  margin-bottom: 22px;
  text-shadow: 0 0 16px rgba(76, 167, 255, .4);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;              /* v1.6.0 响应式：窄屏三卡自动换行不裁剪 */
  gap: 14px;
  justify-content: center;
}

.choice-card {
  width: min(200px, 30vw);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font: inherit;
  color: var(--white);
  background: rgba(8, 14, 28, .8);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.choice-card:hover {
  border-color: var(--accent);
  background: rgba(76, 167, 255, .14);
  transform: translateY(-2px);
}

.choice-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.choice-icon svg { width: 40px; height: 40px; }

.choice-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent2);
}

.choice-desc {
  font-size: 12px;
  line-height: 1.6;
  opacity: .75;
}

/* 第25轮：强化层数圆点条（当前/上限，参考商店永久强化 sh-dot） */
.choice-levels {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.choice-dot {
  width: 8px;
  height: 5px;
  border-radius: 3px;
  background: rgba(120, 180, 255, .18);
}

.choice-dot.on {
  background: var(--accent);
  box-shadow: 0 0 5px rgba(76, 167, 255, .55);
}

.choice-levels-txt {
  font-size: 11px;
  opacity: .6;
  letter-spacing: .08em;
}

.choice-hint {
  margin-top: 16px;
  font-size: 11px;
  opacity: .5;
  letter-spacing: .2em;
}

.inv-panel {
  width: min(680px, 94vw);
  max-width: 92vw;
  max-height: 84vh;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.inv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.inv-title {
  font-size: clamp(17px, 1vw + 14px, 20px);
  letter-spacing: .3em;
  color: var(--accent2);
}

.btn-sm {
  font-size: 13px;
  padding: 6px 16px;
}

.inv-groups {
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.inv-groups-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
  flex: 0 0 auto;
  width: 100%;
}

.inv-group-title {
  font-size: 13px;
  letter-spacing: .2em;
  margin-bottom: 8px;
  opacity: .9;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.inv-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--white);
  background: rgba(8, 14, 28, .7);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.inv-slot:hover { border-color: var(--accent); background: rgba(76, 167, 255, .12); }
.inv-slot.locked { opacity: .45; cursor: not-allowed; }
.inv-slot.locked:hover { border-color: var(--line); background: rgba(8, 14, 28, .7); }
.inv-slot.equipped { border-color: var(--accent); background: rgba(76, 167, 255, .12); }

.inv-icon {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: 6px;
}

.inv-name { flex: 1; letter-spacing: .04em; }
.inv-q { font-size: 10px; opacity: .7; }
.inv-tag {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 9px;
  opacity: .8;
  letter-spacing: .1em;
}

.inv-empty { font-size: 13px; opacity: .6; padding: 20px 0; text-align: center; }

/* toast 品质着色（drops 武器拾取） */
.toast.q-common { color: var(--accent2); }
.toast.q-rare { color: var(--rare); }
.toast.q-epic { color: var(--epic); }
.toast.q-legend { color: var(--legend); }

/* ================================================================
   模式选择（modeSelect.js）
   ================================================================ */
.ms-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 30px;
}

.ms-head { display: flex; align-items: center; gap: 24px; }

.ms-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.ms-card {
  width: min(300px, 88vw);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font: inherit;
  color: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.ms-card:hover {
  border-color: var(--accent);
  background: rgba(76, 167, 255, .14);
  transform: translateY(-3px);
}

.ms-card:nth-child(2):hover { border-color: #b388ff; background: rgba(179, 136, 255, .14); }
.ms-card:nth-child(3):hover { border-color: #69f0ae; background: rgba(105, 240, 174, .12); }

.ms-icon { margin-bottom: 4px; }

.ms-name {
  font-size: clamp(17px, 1vw + 14px, 20px);
  font-weight: 600;
  letter-spacing: .25em;
  color: var(--accent2);
}

.ms-card:nth-child(2) .ms-name { color: #c9a6ff; }
.ms-card:nth-child(3) .ms-name { color: #69f0ae; }

.ms-desc { font-size: 13px; opacity: .85; }
.ms-desc2 { font-size: 11px; opacity: .55; }

.ms-progress {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
  border: 1px solid rgba(255, 213, 79, .3);
  border-radius: 20px;
  padding: 5px 16px;
}

/* ================================================================
   完整结算界面（resultUI.js）
   ================================================================ */
.rs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.rs-panel {
  width: min(460px, 94vw);
  padding: 30px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rs-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-title {
  font-size: clamp(18px, 1vw + 14px, 22px);
  letter-spacing: .25em;
  color: var(--accent2);
  text-shadow: 0 0 16px rgba(76, 167, 255, .4);
}

.rs-title.fail {
  color: var(--danger);
  text-shadow: 0 0 16px rgba(255, 107, 107, .4);
}

.rs-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.rs-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.rs-k { color: var(--accent2); opacity: .75; }
.rs-v { color: var(--white); font-weight: 600; }

.rs-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.rs-gain { text-align: center; }

.rs-gain-label {
  font-size: 12px;
  letter-spacing: .25em;
  opacity: .7;
  margin-bottom: 4px;
}

.rs-gain-num {
  font-size: clamp(26px, 3.6vw + 14px, 34px);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 213, 79, .45);
  font-variant-numeric: tabular-nums;
}

.rs-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  opacity: .85;
}

.rs-item {
  display: flex;
  justify-content: space-between;
}

.rs-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}

/* ================================================================
   商店（shopUI.js）
   ================================================================ */
.sh-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.sh-tabs {
  display: flex;
  gap: 10px;
}

.sh-tab {
  font: inherit;
  font-size: 15px;
  letter-spacing: .15em;
  padding: 9px 26px;
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}

.sh-tab:hover { background: rgba(76, 167, 255, .1); }
.sh-tab.on { border-color: var(--accent); background: rgba(76, 167, 255, .16); color: var(--white); }

.sh-body {
  width: min(640px, 94vw);
  max-width: 92vw;
  max-height: 62vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.sh-body-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
}

.sh-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.sh-row:hover { background: rgba(76, 167, 255, .06); }

.sh-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent2);
}

.sh-icon svg { width: 30px; height: 30px; }

.sh-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-name { font-size: 14px; letter-spacing: .06em; color: var(--white); }
.sh-desc { font-size: 11px; opacity: .65; }
.sh-levels { display: flex; gap: 5px; margin-top: 2px; }
.sh-dot { width: 14px; height: 5px; border-radius: 3px; background: rgba(120, 180, 255, .18); }
.sh-dot.on { background: var(--accent); box-shadow: 0 0 6px rgba(76, 167, 255, .6); }

.sh-buy { min-width: 96px; }
.sh-buy.poor { color: var(--danger); border-color: rgba(255, 107, 107, .5); }
.sh-buy.owned { opacity: .6; }
.sh-buy.maxed { opacity: .6; }
.sh-buy:disabled { cursor: not-allowed; }

.sh-group { margin-bottom: 6px; }
.sh-group-title {
  font-size: 13px;
  letter-spacing: .2em;
  margin: 8px 0 6px;
  padding-left: 8px;
  border-left: 3px solid currentColor;
}

.sh-wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 4px;
}

.sh-wcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(8, 14, 28, .6);
}

.sh-whead { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sh-wname { font-size: 13px; letter-spacing: .05em; }
.sh-wq { font-size: 10px; }
.sh-wstats { font-size: 11px; opacity: .7; }
.sh-wdesc { font-size: 10px; opacity: .55; line-height: 1.5; }

.sh-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
}

/* ================================================================
   图鉴（codexUI.js）
   ================================================================ */
.cd-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.cd-tabs { display: flex; gap: 10px; }

.cd-tab {
  font: inherit;
  font-size: 15px;
  letter-spacing: .15em;
  padding: 9px 26px;
  color: var(--accent2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}

.cd-tab:hover { background: rgba(76, 167, 255, .1); }
.cd-tab.on { border-color: var(--accent); background: rgba(76, 167, 255, .16); color: var(--white); }

.cd-body {
  width: min(780px, 94vw);
  max-width: 94vw;
  max-height: 62vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 16px;
}
.cd-body-content {
  flex: 0 0 auto;
  width: 100%;
}

.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.cd-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: rgba(8, 14, 28, .6);
}

.cd-card.locked { opacity: .55; }

.cd-portrait { margin-bottom: 2px; }

.cd-cname { font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.cd-text { font-size: 11px; line-height: 1.6; opacity: .85; }
.cd-text.dim { opacity: .55; }
.cd-skill-ic { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.cd-tip {
  font-size: 11px;
  line-height: 1.6;
  color: var(--accent2);
  border-top: 1px dashed var(--line);
  padding-top: 6px;
  margin-top: 4px;
  opacity: .9;
}

.cd-particle { display: flex; justify-content: center; }

.cd-wname { font-size: 14px; font-weight: 600; letter-spacing: .05em; }
.cd-wq { font-size: 10px; opacity: .8; }

/* ================================================================
   设置（settingsUI.js）
   ================================================================ */
.st-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.st-body {
  width: min(560px, 94vw);
  max-width: 92vw;
  max-height: 66vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
}
.st-body-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  width: 100%;
}

.st-section {
  font-size: 13px;
  letter-spacing: .25em;
  color: var(--accent2);
  margin: 12px 0 4px;
  padding-left: 8px;
  border-left: 3px solid var(--accent);
}

.st-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px;
}

.st-row.danger { margin-top: 6px; }

.st-label { width: 120px; font-size: 14px; color: var(--white); }

.st-range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 180, 255, .25);
  outline: none;
}

.st-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 8px rgba(76, 167, 255, .6);
  cursor: pointer;
}

.st-val {
  width: 34px;
  text-align: right;
  font-size: 13px;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}

.st-select {
  font: inherit;
  font-size: 13px;
  color: var(--white);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
}

.st-hint { font-size: 11px; opacity: .55; flex-basis: 100%; }

.st-toggle {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #5a6b85;
  transition: color .15s;
}

.st-toggle.on { color: var(--accent); }

.btn.danger {
  color: var(--danger);
  border-color: rgba(255, 107, 107, .55);
}

.btn.danger:hover {
  background: rgba(255, 107, 107, .15);
  color: var(--danger);
}

.st-reset-input {
  width: 100%;
  margin: 8px 0 18px;
  font: inherit;
  font-size: 16px;
  text-align: center;
  letter-spacing: .4em;
  color: var(--white);
  background: rgba(6, 10, 20, .7);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  outline: none;
}

.st-reset-input:focus { border-color: var(--danger); }

/* ================================================================
   帮助（helpUI.js）
   ================================================================ */
.hp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px;
}

.hp-body {
  width: min(720px, 94vw);
  max-width: 94vw;
  max-height: 66vh;
  overflow: hidden;                /* 第17轮：原生滚动 → Canvas 自绘 */
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
}
.hp-body-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 auto;
  width: 100%;
}

.hp-title {
  font-size: 16px;
  letter-spacing: .3em;
  color: var(--accent2);
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(76, 167, 255, .35);
}

.hp-content { display: flex; flex-direction: column; gap: 8px; }

.hp-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }

.hp-key {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px dashed rgba(120, 180, 255, .15);
  padding-bottom: 4px;
}

.hp-k { color: var(--gold); font-weight: 600; white-space: nowrap; }
.hp-v { color: var(--white); text-align: right; }

.hp-p { font-size: 13px; line-height: 1.8; color: var(--white); opacity: .9; }
.hp-p b { color: var(--accent2); }

.hp-particles { display: flex; flex-direction: column; gap: 10px; }

.hp-particle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hp-ptext { font-size: 12px; line-height: 1.6; color: var(--white); opacity: .9; }
.hp-ptext b { letter-spacing: .05em; }

/* ---------- 测试通道（自动化验收用，不可见） ---------- */
.battle-cmd {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 9999;          /* 顶层：避免被 app/canvas 覆盖影响自动化输入 */
  pointer-events: auto;   /* 测试通道需可聚焦（IAB fill 要求 actionability） */
}

.battle-state { display: none; }

/* ================================================================
   第8轮：局内菜单按钮 + 暂停面板 + 武器图标
   ================================================================ */

/* ---------- 战斗右下角菜单按钮 ---------- */
.hud-menubtn {
  position: absolute;
  right: calc(16px + var(--sa-r));
  bottom: calc(14px + var(--sa-b));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--accent2);
  background: rgba(10, 18, 36, .5);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.hud-menubtn:hover {
  background: rgba(76, 167, 255, .15);
  border-color: rgba(120, 180, 255, .5);
  color: var(--white);
  box-shadow: 0 0 18px rgba(76, 167, 255, .25);
}

/* 编辑器允许把 HUD 菜单视觉缩小到约 50%；移动端仍保留 44px 级别的透明
   手指热区，且热区跟随按钮本身移动，不会覆盖摇杆或画布。 */
@media (pointer: coarse) {
  .hud-menubtn::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 14px;
  }
}

/* ---------- 暂停面板 ---------- */
.pause-bd { z-index: 60; }

.pause-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 250px;
  padding: 26px 28px;
  background: rgba(8, 14, 28, .72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.pause-title {
  text-align: center;
  font-size: 15px;
  letter-spacing: .4em;
  color: var(--accent2);
  text-shadow: 0 0 14px rgba(143, 214, 255, .5);
  margin-bottom: 8px;
}

.pause-btn {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background: rgba(10, 18, 36, .45);
}

.pause-btn.danger { color: #ff9d9d; border-color: rgba(255, 107, 107, .35); }
.pause-btn.danger:hover {
  background: rgba(255, 107, 107, .12);
  border-color: rgba(255, 107, 107, .6);
  color: #ffd0d0;
  box-shadow: 0 0 18px rgba(255, 107, 107, .2);
}

/* ---------- 武器图标（各 UI 共用 weaponIcons.js 线稿） ---------- */
.weapon-icon svg { display: block; }
.weapon-icon { color: var(--accent2); }
.weapon-card[data-quality="rare"] .weapon-icon   { color: var(--rare); }
.weapon-card[data-quality="epic"] .weapon-icon   { color: var(--epic); }
.weapon-card[data-quality="legend"] .weapon-icon { color: var(--legend); }

.prep-wicon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-icon {
  align-items: center;
  justify-content: center;
}
.inv-icon svg { display: block; }
.inv-icon.q-common { color: var(--accent2); }
.inv-icon.q-rare { color: var(--rare); }
.inv-icon.q-epic { color: var(--epic); }
.inv-icon.q-legend { color: var(--legend); }

/* 图鉴武器卡图标 */
.cd-wicon {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--accent2);
}
.cd-wicon.q-rare { color: var(--rare); }
.cd-wicon.q-epic { color: var(--epic); }
.cd-wicon.q-legend { color: var(--legend); }
.cd-wicon svg { filter: drop-shadow(0 0 6px currentColor); }

/* 第19轮：图鉴·局内强化 图标（与武器图标同风格，橙色系） */
.cd-upicon {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  color: #ffb74d;
}
.cd-upicon svg { width: 34px; height: 34px; filter: drop-shadow(0 0 6px currentColor); }

/* ================================================================
   第11轮 · 宙域拒止作战
   ================================================================ */
/* 战斗 HUD：核心血条 / 能量 / 波次（顶部中央下方） */
.denial-wrap {
  position: fixed;
  /* 第14轮：hidden 属性需显式覆盖 display:flex（UA [hidden] 样式被类选择器覆盖） */
}
.denial-wrap[hidden] { display: none; }
.denial-wrap {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(6, 12, 24, .82);
  border: 1px solid rgba(105, 240, 174, .3);
  border-radius: 10px;
  padding: 8px 16px;
  z-index: 40;
  backdrop-filter: blur(3px);
}
.denial-wrap .denial-core { display: flex; align-items: center; gap: 8px; }
.denial-wrap .denial-core .k,
.denial-wrap .denial-energy .k { font-size: 12px; color: #7c93b8; letter-spacing: .1em; }
.denial-wrap .denial-core .bar {
  width: 130px; height: 8px;
  background: rgba(255, 255, 255, .1);
  border-radius: 4px; overflow: hidden;
}
.denial-wrap .denial-core .bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #69f0ae, #a5f6c8);
  transition: width .15s;
}
.denial-wrap .denial-core .v { font-size: 12px; color: #cfe2ff; min-width: 64px; }
.denial-wrap .denial-energy { display: flex; align-items: center; gap: 6px; }
.denial-wrap .denial-energy .v { font-size: 16px; font-weight: 600; color: #69f0ae; }
.denial-wrap .denial-wave { font-size: 13px; color: #ffd54f; letter-spacing: .08em; }

/* 建造按钮（HUD 常驻，提示 G 快捷键；HUD 层默认 pointer-events:none，需单独恢复） */
.denial-wrap .denial-buildbtn {
  pointer-events: auto;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #69f0ae;
  background: rgba(105, 240, 174, .12);
  border: 1px solid rgba(105, 240, 174, .5);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.denial-wrap .denial-buildbtn:hover { background: rgba(105, 240, 174, .25); border-color: #69f0ae; }

/* 建造菜单（右下） */
.denial-build {
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: 250px;
  background: rgba(6, 12, 24, .92);
  border: 1px solid rgba(105, 240, 174, .35);
  border-radius: 10px;
  padding: 10px;
  z-index: 45;
  display: none;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(3px);
}
.denial-build.on { display: flex; }
.denial-build-title { font-size: 12px; color: #69f0ae; letter-spacing: .05em; }
.denial-build-list { overflow: hidden; max-height: 52vh; }   /* 第15轮：原生滚动 → Canvas 自绘 */
.denial-build-list-content { display: flex; flex-direction: column; gap: 6px; padding-right: 2px; will-change: transform; }
.db-cat {
  font-size: 11px;
  font-weight: 700;
  color: #69f0ae;
  letter-spacing: .3em;
  padding: 4px 2px 0;
  border-top: 1px solid rgba(105, 240, 174, .18);
}
.db-cat:first-child { border-top: 0; }
.denial-build-btn .db-size { font-size: 10px; color: #7c93b8; margin-left: 5px; }
.denial-build-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(20, 34, 56, .8);
  border: 1px solid rgba(120, 160, 220, .25);
  border-radius: 8px;
  color: var(--white);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.denial-build-btn:hover { border-color: #69f0ae; background: rgba(105, 240, 174, .1); }
.denial-build-btn.sel { border-color: #69f0ae; background: rgba(105, 240, 174, .16); }
.denial-build-btn .db-name { font-size: 13px; font-weight: 600; }
.denial-build-btn .db-cost { font-size: 12px; color: #ffd54f; }
.denial-build-btn .db-desc { grid-column: 1 / -1; font-size: 11px; color: #7c93b8; }
.denial-build-energy { font-size: 12px; color: #69f0ae; text-align: right; }

/* 战前准备：设施平面图预览 */
.prep-editor-btn {
  font-size: 12px;
  padding: 3px 12px;
  margin-left: 12px;
  letter-spacing: .1em;
  vertical-align: 1px;
}
.prep-chart canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, .2);
}

/* ================================================================
   第16轮：设施地图编辑器（游戏内整合）
   ================================================================ */
.me-root { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; }
.me-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid rgba(120,180,255,.25);
  background: rgba(10,18,34,.92);
}
.me-title { font-size: 15px; letter-spacing: .18em; color: #8fd6ff; margin-right: 6px; }
.me-back { border-color: #69f0ae; color: #69f0ae; }
.me-back:hover { background: rgba(105,240,174,.12); }
.me-header label { display: flex; align-items: center; gap: 5px; color: #9fb6d8; font-size: 12px; }
.me-header input[type=text], .me-header input[type=number] {
  background: rgba(8,14,28,.9); border: 1px solid rgba(120,180,255,.25); color: #eef4ff;
  border-radius: 5px; padding: 4px 8px; font: inherit; font-size: 12px;
}
.me-header input[type=text] { width: 130px; }
.me-header input[type=number] { width: 60px; }
.me-main { flex: 1; display: flex; min-height: 0; }
/* 左工具栏（Canvas 自绘滚动） */
.me-tools {
  width: 180px; display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid rgba(120,180,255,.25); background: rgba(8,12,24,.6);
}
.me-tools-content { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.me-tool-title { font-size: 11px; color: #7c93b8; letter-spacing: .2em; margin-top: 4px; }
.me-tool-btn {
  font: inherit; font-size: 12px; text-align: left; color: #eef4ff; cursor: pointer;
  background: rgba(20,34,56,.8); border: 1px solid rgba(120,180,255,.25); border-radius: 6px;
  padding: 6px 9px; transition: border-color .12s, background .12s;
}
.me-tool-btn:hover { border-color: #4ca7ff; background: rgba(76,167,255,.1); }
.me-tool-btn.sel { border-color: #4ca7ff; background: rgba(76,167,255,.18); color: #8fd6ff; }
.me-tool-btn small { display: block; color: #7c93b8; margin-top: 2px; font-size: 10px; }
.me-dim { color: #7c93b8; font-size: 10px; margin-left: 3px; }
.me-size-row { display: flex; align-items: center; gap: 6px; }
.me-size-label { font-size: 11px; color: #7c93b8; }
.me-size-btn {
  font: inherit; font-size: 11px; color: #eef4ff; cursor: pointer; width: 32px;
  background: rgba(20,34,56,.8); border: 1px solid rgba(120,180,255,.25); border-radius: 4px; padding: 3px 0;
}
.me-size-btn.sel { border-color: #4ca7ff; background: rgba(76,167,255,.18); color: #8fd6ff; }
/* 中间画布 */
.me-stage-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; position: relative; padding: 8px; }
#me-stage { display: block; width: 100%; height: 100%; background: #0a1220; border: 1px solid rgba(120,180,255,.25); cursor: crosshair; }
.me-hover-tip {
  position: absolute; left: 14px; bottom: 12px; color: #7c93b8; font-size: 11px;
  background: rgba(8,12,24,.7); padding: 4px 10px; border-radius: 6px; pointer-events: none;
}
/* 右侧栏（Canvas 自绘滚动） */
.me-side {
  width: 250px; display: flex; flex-direction: column; overflow: hidden;
  border-left: 1px solid rgba(120,180,255,.25); background: rgba(8,12,24,.6);
}
.me-side-content { display: flex; flex-direction: column; gap: 9px; padding: 10px; }
.me-hint { font-size: 11px; color: #647a9c; line-height: 1.6; }
.me-io { display: flex; gap: 6px; }
.me-io .btn { flex: 1; }
#me-map-list { display: flex; flex-direction: column; gap: 5px; }
.me-map-row {
  display: flex; align-items: center; gap: 5px; padding: 6px 8px;
  background: rgba(20,34,56,.8); border: 1px solid rgba(120,180,255,.25); border-radius: 5px;
}
.me-map-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.me-map-row button {
  font: inherit; font-size: 10px; cursor: pointer; color: #eef4ff;
  background: transparent; border: 1px solid rgba(120,180,255,.25); border-radius: 4px; padding: 2px 7px;
}
.me-map-row button:hover { border-color: #4ca7ff; color: #8fd6ff; }
.me-map-row button.del:hover { border-color: #ff5252; color: #ff5252; }
#me-check-result { font-size: 11px; line-height: 1.6; white-space: pre-wrap; color: #9fb6d8; }
#me-check-result .ok { color: #69f0ae; } #me-check-result .bad { color: #ff5252; }

/* ---------- 开发者控制台（· 键开关） ---------- */
#dev-console {
  position: fixed;
  right: 16px;
  bottom: 120px;
  z-index: 90;
  width: 340px;
  background: rgba(6, 12, 24, .92);
  border: 1px solid rgba(76, 167, 255, .4);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(76, 167, 255, .18);
}
#dev-console[hidden] { display: none; }
#dev-console .dev-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent2);
  margin-bottom: 8px;
}
#dev-console .dev-key {
  font-size: 10px;
  opacity: .6;
  margin-left: 8px;
}
#dev-console .dev-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #9fb8d8;
}
#dev-console label { width: 30px; flex-shrink: 0; }
#dev-console select,
#dev-console input {
  background: rgba(10, 18, 34, .9);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #d7e6ff;
  font-size: 12px;
  padding: 3px 6px;
}
#dev-console input[type="number"] { width: 52px; }
#dev-console button {
  background: rgba(76, 167, 255, .14);
  border: 1px solid rgba(76, 167, 255, .35);
  border-radius: 6px;
  color: #bfe0ff;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
}
#dev-console button:hover { background: rgba(76, 167, 255, .28); }
#dev-console .dev-evs { display: flex; flex-wrap: wrap; gap: 4px; }
#dev-console .dev-evs button { padding: 2px 8px; font-size: 11px; }

/* ================================================================
   v1.6.0 外围包：成就屏 / 图鉴进度条 / 分章 / FPS / 金色 toast / 结算成就行
   ================================================================ */

/* ---------- 成就屏 ---------- */
.achv-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
.achv-body { width: min(1080px, 94vw); flex: 1; min-height: 0; position: relative; overflow: hidden; }
.achv-tab-cnt { font-size: 12px; opacity: .75; margin-left: 4px; }
.achv-head { padding: 10px 14px 6px; }
.achv-head-txt { font-size: 14px; color: var(--white); letter-spacing: .08em; }
.achv-head-txt b { color: var(--gold); font-size: 16px; }
.achv-head-star { float: right; display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: 13px; }
.achv-prog { height: 6px; margin-top: 8px; background: rgba(120,180,255,.12); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.achv-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--gold)); border-radius: 3px; transition: width .6s cubic-bezier(.2,.8,.3,1); }
.achv-prog-fill.full { box-shadow: 0 0 10px rgba(255,213,79,.55); }
.achv-sec { margin: 6px 0 14px; }
.achv-sec-title { padding: 6px 14px 8px; font-size: 14px; font-weight: 600; letter-spacing: .14em; display: flex; justify-content: space-between; }
.achv-sec-title span { opacity: .7; font-weight: 400; font-size: 12px; }
.achv-card { position: relative; animation: achvFade .34s both; animation-delay: var(--d, 0ms); }
@keyframes achvFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.achv-badge { width: 52px; height: 52px; margin: 2px auto 6px; border: 1.6px solid; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(8,20,42,.6); }
.achv-card.on .achv-badge { box-shadow: 0 0 12px rgba(140,190,255,.22) inset; }
.achv-bar { height: 5px; margin: 6px 10px 2px; background: rgba(120,180,255,.12); border-radius: 3px; overflow: hidden; }
.achv-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 3px; }
.achv-bar-num { font-size: 11px; color: #7d92b5; text-align: center; margin-bottom: 2px; }
.achv-got { font-size: 12px; text-align: center; margin: 6px 0 2px; font-weight: 600; }
.achv-reward { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--gold); padding: 2px 0 4px; }
.achv-stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.achv-stat-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; animation: achvFade .34s both; animation-delay: var(--d, 0ms); }
.achv-stat-ico { color: var(--accent2); opacity: .8; }
.achv-stat-v { font-size: clamp(17px, 1vw + 14px, 20px); font-weight: 700; color: var(--white); letter-spacing: .04em; }
.achv-stat-k { font-size: 12px; color: #7d92b5; }

/* ---------- 图鉴：进度条头部 + 分章 + Boss 角标 ---------- */
.cd-prog-head { padding: 10px 14px 8px; }
.cd-prog-txt { font-size: 13px; color: var(--white); letter-spacing: .08em; }
.cd-prog-txt b { color: var(--gold); font-size: 15px; }
.cd-ch-sec { margin-bottom: 4px; }
.cd-ch-title { padding: 8px 14px 6px; font-size: 13px; font-weight: 600; color: #9db8dd; letter-spacing: .14em; border-left: 3px solid var(--line); margin: 4px 8px 2px; display: flex; justify-content: space-between; }
.cd-ch-title span { font-weight: 400; font-size: 12px; opacity: .75; }
.cd-ch-title.full { color: var(--gold); border-left-color: var(--gold); }
.cd-ecard { position: relative; }
.cd-ecard.is-boss::after { content: 'BOSS'; position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--gold); border: 1px solid rgba(255,213,79,.55); border-radius: 4px; padding: 1px 5px; background: rgba(8,20,42,.75); }
.cd-ecard.locked.is-boss::after { color: #5a6b85; border-color: rgba(120,150,190,.3); }

/* ---------- FPS 显示 ---------- */
.hud-fps { position: absolute; top: calc(10px + var(--sa-t)); right: calc(14px + var(--sa-r)); z-index: 6; font-size: 12px; color: var(--accent2); opacity: .8; letter-spacing: .08em; font-family: ui-monospace, Consolas, monospace; pointer-events: none; }

/* ---------- 成就金色 toast ---------- */
.toast-achv { border-color: rgba(255,213,79,.6); background: linear-gradient(135deg, rgba(50,40,10,.94), rgba(20,18,30,.94)); color: var(--gold); display: flex; align-items: center; gap: 6px; box-shadow: 0 0 16px rgba(255,213,79,.25); }
.toast-achv b { color: #fff3c4; }
.achv-toast-star { display: inline-flex; }

/* ---------- 结算：新成就行 ---------- */
.rs-achv { margin: 10px 0 2px; padding: 8px 12px; border: 1px solid rgba(255,213,79,.45); border-radius: 8px; background: linear-gradient(135deg, rgba(50,40,10,.5), rgba(20,18,30,.4)); }
.rs-achv-title { font-size: 13px; color: var(--gold); letter-spacing: .14em; font-weight: 600; margin-bottom: 4px; }
.rs-achv-item { display: flex; justify-content: space-between; font-size: 13px; color: var(--white); padding: 2px 0; }
.rs-achv-item .rs-achv-name { color: #ffe9a8; }

/* ---------- 主菜单按钮图标 ----------
   inline-flex 下 text-align 对 flex 子项无效——必须 justify-content: center
   文字才居中（旧版纯文字与新版图标+文字都整体居中） */
.menu-nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.menu-nav-ico { display: inline-flex; opacity: .85; }

/* ================================================================
   v1.6.0 响应式布局（clamp 上界 = 桌面原值，≥768px 渲染逐像素不变）
   B. ≤768px 手机纵向堆叠 + 隐藏 PC 冗余
   C. pointer:coarse 触屏可用性（触摸目标 / 原生滚动）
   D. 窄屏 HUD 紧凑（主视野 >70%）
   F. portrait + coarse：强制横屏旋转引导浮层
   ================================================================ */

/* ---------- B. ≤768px / 手机横屏矮视口：纵向堆叠 ----------
   横屏手机在 Chrome 地址栏可见时布局视口高度会被压到 ~287px，
   而 CSS 宽度（如 Pixel 6 = 915px）远超 768 断点 → 会误走 PC 布局。
   故另加"横屏 + 触屏 + 高度 ≤500px"触发同一套移动端规则。 */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .cs-body, .prep-body { flex-direction: column; align-items: center; }
  .cs-list, .cs-detail { width: min(94vw, 460px); }
  .cs-detail { max-height: 42vh; overflow-y: auto; }
  .prep-class, .prep-weapons { width: min(94vw, 460px); }
  .prep-diffgrid { grid-template-columns: repeat(2, 1fr); }
  .prep-chgrid { justify-content: center; }
  .cs-row { grid-template-columns: 64px 1fr auto; }
  .cs-row-tag { display: none; }                    /* PC 冗余：一句话定位 */
  /* 主菜单：2 列按钮网格（7 钮 4 行，矮屏高度受限也完整显示、全部可点按；
     PC 单列 250px 按钮布局不变） */
  .menu-title { margin-bottom: 12px; }
  .menu-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: min(460px, 92vw); }
  .menu-nav .btn { width: 100%; padding: 12px 10px; }
  /* 模式选择：三卡并排紧凑（窄屏高度有限，卡片瘦身；desc2 为 PC 冗余） */
  .ms-wrap { gap: 14px; padding: 14px; }
  .ms-head { gap: 12px; }
  .ms-cards { gap: 10px; }
  .ms-card { width: min(300px, 30vw); padding: 14px 10px; gap: 8px; }
  .ms-icon svg { width: 40px; height: 40px; }
  .ms-name { font-size: 15px; letter-spacing: .14em; }
  .ms-desc { font-size: 12px; line-height: 1.4; }
  .ms-desc2 { display: none; }
  .ms-progress { font-size: 11px; padding: 4px 10px; margin-top: 2px; }
  /* 职业选择：解除列表/详情固定高度 → 整屏随手指滚动（避免双层滚动区） */
  .cs-list, .cs-detail { max-height: none; overflow-y: visible; }
  .cs-body { gap: 10px; }
  /* v1.6.9：移动端不再整体缩放屏幕；各页面通过真实 flex/grid、间距和字号重排。 */
  /* HUD 不整体缩放：祖先 transform 会把 fixed/absolute 全屏层一并缩小；
     移动端通过具体控件尺寸与位置规则收口，保证 screenfx/dmg/lowhp 覆盖视口。 */
  /* 全屏效果层豁免：伤害数字坐标是视口系、低血警告/滤镜需铺满全屏 */
  .battle-root > .screenfx,
  .battle-root .hud > .dmg-layer,
  .battle-root .hud > .lowhp { position: fixed; inset: 0; width: 100%; height: 100%; transform: none; }
  .rs-panel, .modal { padding: 14px 16px; }
  .st-row, .rs-row { padding: 6px 4px; }
  .screen { padding: 8px; }
  .hp-keys { grid-template-columns: 1fr; }          /* 键位表两列 → 单列 */
  .screen-panel { padding: 24px 20px; }
}

/* ---------- C. pointer:coarse 触屏 ---------- */
@media (pointer: coarse) {
  .btn { padding: 12px 24px; }
  .cd-tab { padding: 12px 20px; }
  .cs-row { padding: 12px; }
  .inv-slot { padding: 12px 10px; }
  .hud-menubtn { padding: 10px 16px; }
  .st-range { height: 22px; }
  .st-range::-webkit-slider-thumb { width: 22px; height: 22px; }
  .st-range::-moz-range-thumb { width: 22px; height: 22px; border: none; }
  /* 自绘滚动条与浏览器手势冲突 → 走原生触摸滚动，隐藏 Canvas 条 */
  .cd-body, .st-body, .hp-body, .sh-body, .cs-list, .hp-wrap .hp-body,
  .cd-body-content, .st-body-content, .hp-body-content, .sh-body-content, .cs-list-content {
    overflow: hidden;
    touch-action: none;
  }
  /* 整屏级手指滚动：屏幕内容超高时（safe center = 能放下时居中、放不下时顶部对齐不裁头） */
  .screen {
    overflow: hidden;
    touch-action: none;
    align-items: safe center;
  }
  /* 战前准备 / 地图编辑器：同样原生手指滚动（隐藏自绘滚动条，触控拖 8px 滑块不可用） */
  .prep-wrap { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  #prep-scroll-canvas { display: none !important; }
  .me-tools, .me-side { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .scroll-canvas { display: none !important; }
  #app { touch-action: manipulation; }
  /* 拉拽刷新/边缘回弹与游戏手势冲突 → 关闭（仅影响滚动容器，桌面零变化） */
  body { overscroll-behavior: none; }
  /* v1.6.3：局内弹窗（3选1强化/背包/暂停菜单）挂 body，不在 .screen/.hud 缩放
     范围内 → 单独缩小 20%；暂停 7 按钮与 3选1 三卡在矮屏（~287px）放不下，
     safe center + 原生滚动兜底；按钮/卡片同步压缩保证一屏可读可点 */
  body > .modal-backdrop {
    transform: scale(0.8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    align-items: safe center;
  }
  .pause-panel { gap: 6px; padding: 18px 22px; }
  .pause-btn { padding: 6px 0; font-size: 14px; }
  .pause-title { margin-bottom: 4px; font-size: 14px; }
  .choice-panel { padding: 18px 14px; }
  .choice-card { padding: 12px 10px; gap: 6px; }
  .choice-icon svg { width: 32px; height: 32px; }
  .choice-title { margin-bottom: 14px; }
}

/* ---------- D. 窄屏/手机横屏 HUD 紧凑（主视野 >70%） ---------- */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hpbar { width: clamp(130px, 30vw, 220px); height: 12px; }
  .hpbar.thin { width: 110px; }
  .shieldbar, .heatbar { width: clamp(130px, 30vw, 220px); }
  .heatlabel { display: none; }
  .pcard-icon svg { width: 20px; height: 20px; }
  .buff-slot { width: 22px; height: 22px; }
  .mcard-status { display: none; }                  /* 队友卡极简：只留名字+细血条 */
  .hud-mmwrap { padding: 5px; max-width: 152px; }   /* 星辉/关卡文本不撑破小地图列宽 */
  .mm-star-row { white-space: nowrap; overflow: hidden; max-width: 100%; }
  .mm-level { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #hud-minimap { width: 132px; height: 88px; }
  .mm-star-row { font-size: 12px; }
  .mm-level { font-size: 12px; }
  .skill-slot { width: 46px; height: 46px; }
  .weapon-card { max-width: 34vw; }
  .weapon-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-deck { gap: 6px; }
  .toast-stack { bottom: calc(60px + var(--sa-b)); }
  .bosswrap { top: calc(54px + var(--sa-t)); }
  .hud-objective { font-size: 12px; padding: 4px 10px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .denial-wrap { gap: 8px; padding: 6px 10px; max-width: 94vw; flex-wrap: wrap; justify-content: center; }
  .story-overlay { bottom: calc(76px + var(--sa-b)); max-width: min(640px, 88vw); }
  /* 字号底线（正文类 ≥12px，装饰角标放宽到 10px） */
  .hptext, .mcard-name, .mm-level, .bossbar .boss-name { font-size: 12px; }
  .skill-key, .buff-t { font-size: 10px; }
  .revive-t { font-size: 10px; }
}

/* ---------- E. 窄横屏 HUD 紧凑（≤700px / 矮横屏：小手机横放；四角互不遮挡） ---------- */
@media (max-width: 700px), (orientation: landscape) and (max-height: 420px) and (pointer: coarse) {
  .hud-card { padding: 8px 10px; gap: 8px; }
  .hud-pcard { left: calc(10px + var(--sa-l)); top: calc(10px + var(--sa-t)); }
  .hud-mmwrap { top: calc(10px + var(--sa-t)); right: calc(10px + var(--sa-r)); }
  .hpbar { width: clamp(120px, 26vw, 200px); height: 12px; }
  .hpbar.thin { width: clamp(90px, 20vw, 150px); }
  .shieldbar, .heatbar { width: clamp(120px, 26vw, 200px); }
  .hud-objective { top: calc(10px + var(--sa-t)); max-width: 46vw; padding: 4px 8px; }
  /* Boss 条/防卫面板下移：避开左上玩家卡（≤700px 时 pcard 高 ~90px） */
  .bosswrap { top: calc(100px + var(--sa-t)); width: min(440px, 80vw); }
  .denial-wrap { top: calc(100px + var(--sa-t)); }
  .denial-wrap:not([hidden]) ~ .bosswrap { top: calc(148px + var(--sa-t)); }
  .hud-deck { bottom: calc(12px + var(--sa-b)); gap: 6px; }
  .skill-slot { width: 44px; height: 44px; }
  .weapon-card { max-width: 30vw; padding: 6px 10px; }
  .weapon-name { font-size: 12px; }
  .toast-stack { right: calc(10px + var(--sa-r)); bottom: calc(58px + var(--sa-b)); }
  .hud-menubtn { right: calc(10px + var(--sa-r)); bottom: calc(8px + var(--sa-b)); padding: 10px 14px; }
}

/* ---------- E2. 极矮横屏（浏览器地址栏可见时布局视口 ~287px，内容需整屏放下） ---------- */
@media (orientation: landscape) and (max-height: 380px) and (pointer: coarse) {
  .ms-wrap { gap: 8px; padding: 8px; }
  .ms-head { gap: 8px; }
  .ms-icon svg { width: 32px; height: 32px; }
  .ms-card { padding: 10px 8px; gap: 6px; }
  .ms-name { font-size: 14px; letter-spacing: .1em; }
  .ms-progress { font-size: 11px; padding: 3px 8px; margin-top: 0; }
  .ms-cards { gap: 8px; }
  .ms-head .screen-title { margin-bottom: 0; }
}

/* ---------- F. 竖屏 + 触屏：强制横屏引导 ----------
   media 块必须在基础规则之后（同特异性后者胜，先写 none 会被 media 覆盖） */
.rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5, 7, 15, .96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--white);
  letter-spacing: .14em;
}
.rotate-overlay svg {
  width: 64px; height: 64px;
  color: var(--accent2);
  animation: rotateHint 2.2s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 20% { transform: rotate(0deg); }
  55%, 80% { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}
.rotate-overlay .ro-title { font-size: clamp(18px, 2vw + 14px, 24px); }
.rotate-overlay .ro-sub { font-size: 14px; color: #9db8dd; }

@media (orientation: portrait) and (pointer: coarse) {
  .rotate-overlay { display: flex; }
}

/* ================================================================
   v1.6.0 移动端触控（画布手势 / 虚拟摇杆 / 触控按钮组）
   PC 端（≥768px / 鼠标）零影响：全部默认隐藏，仅 pointer:coarse 激活
   ================================================================ */

/* 游戏画布禁止浏览器手势（滚动/双指缩放），交给游戏内触控层 */
#stage, #battle-canvas { touch-action: none; }

/* 固定虚拟摇杆（input.js 创建；常驻左下角半透明，激活时 .on 高亮） */
.touch-stick {
  display: none;
  position: fixed;
  left: calc(28px + var(--sa-l));
  bottom: calc(28px + var(--sa-b));
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 214, 255, .3);
  background: radial-gradient(circle, rgba(76, 167, 255, .1), rgba(76, 167, 255, .02));
  box-shadow: 0 0 26px rgba(76, 167, 255, .12);
  z-index: 55;                 /* HUD(z2) 之上、暂停菜单(z60)之下（同在 #app 内） */
  pointer-events: none;
  opacity: .45;
  transition: opacity .12s, border-color .12s, box-shadow .12s;
}
.touch-stick.on {
  opacity: 1;
  border-color: rgba(143, 214, 255, .6);
  box-shadow: 0 0 30px rgba(76, 167, 255, .28);
}
.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(143, 214, 255, .55);
  box-shadow: 0 0 16px rgba(143, 214, 255, .55);
}

/* 触控按钮组（HUD 右下角：冲刺 / 互动；仅 coarse 显示） */
.hud-touchpad {
  display: none;
  position: absolute;
  /* 空白动作组容器不能截获右半屏摇杆起点；按钮子项在上方 HUD 交互规则中单独恢复 auto。 */
  pointer-events: none;
  right: calc(16px + var(--sa-r));
  bottom: calc(84px + var(--sa-b));
  flex-direction: column;
  gap: 10px;
  z-index: 8;
}
.hud-touch-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 214, 255, .45);
  background: rgba(10, 18, 36, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--accent2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .1em;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hud-touch-btn:active {
  transform: scale(.94);
  background: rgba(76, 167, 255, .22);
}

@media (pointer: coarse) {
  .hud-touchpad { display: flex; }
  .battle-root > .touch-stick { display: block; }   /* 摇杆挂 battle-root 内：仅战斗屏显示 */
  .hud-menubtn { padding: 12px 18px; font-size: 14px; }   /* 热区 ≥44px（手指操作） */
  .skill-slot { cursor: pointer; }
  /* v1.6.3：手机端队友卡上移贴玩家卡下方（左下角让位固定摇杆由摇杆自身占据） */
  .hud-mcard {
    bottom: auto;
    left: calc(10px + var(--sa-l));
    top: calc(104px + var(--sa-t));
  }
}
@media (pointer: coarse) and (max-width: 820px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .hud-touchpad { bottom: calc(72px + var(--sa-b)); gap: 8px; }
  .hud-touch-btn { width: 54px; height: 54px; }
  .hud-touch-btn span { font-size: 12px; }
  .toast-stack { bottom: calc(150px + var(--sa-b)); }     /* toast 让位触控组（后写胜） */
}

/* ================================================================
   v1.6.8 移动端原生感收口
   - 安全区作为真实边距参与布局，避免刘海/手势条压住内容
   - 菜单与战前卡片使用更大的圆角、稳定的 48px 触控行高
   - HUD 固定控件分区更明确：左下移动、右下动作、底部中央武器
   ================================================================ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .screen:not(.battle-root) {
    padding: max(8px, calc(8px + var(--sa-t))) max(8px, calc(8px + var(--sa-r)))
      max(8px, calc(8px + var(--sa-b))) max(8px, calc(8px + var(--sa-l)));
  }

  .menu-root {
    justify-content: flex-start;
    padding-top: max(18px, calc(18px + var(--sa-t)));
    padding-bottom: max(16px, calc(16px + var(--sa-b)));
  }
  .menu-title {
    margin-top: clamp(6px, 3vh, 26px);
    margin-bottom: clamp(18px, 5vh, 38px);
    text-shadow: 0 0 18px rgba(76, 167, 255, .46);
  }
  .menu-nav {
    width: min(460px, calc(100vw - 24px - var(--sa-l) - var(--sa-r)));
    gap: 10px;
  }
  .menu-nav .btn {
    min-height: 56px;
    padding: 12px 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(18, 34, 60, .7), rgba(10, 18, 36, .55));
    box-shadow: 0 5px 18px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .06);
  }
  .menu-nav .btn:active { transform: scale(.96); }

  .screen-panel, .panel, .cs-detail, .prep-class, .prep-weapons {
    border-radius: 14px;
  }
  .cs-row, .prep-wrow, .prep-ch, .prep-diffbtn {
    min-height: 48px;
    border-radius: 12px;
  }
}

@media (pointer: coarse) {
  button, .btn, .skill-slot, .hud-touch-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .touch-stick {
    left: max(16px, calc(18px + var(--sa-l)));
    bottom: max(16px, calc(18px + var(--sa-b)));
    width: 128px;
    height: 128px;
    border-width: 2px;
    opacity: .58;
    background:
      radial-gradient(circle at center, rgba(143, 214, 255, .16) 0 2px, transparent 3px),
      radial-gradient(circle, rgba(76, 167, 255, .13), rgba(76, 167, 255, .025) 68%, transparent 69%);
    box-shadow: 0 0 0 7px rgba(76, 167, 255, .045), 0 0 28px rgba(76, 167, 255, .16);
  }
  .touch-stick::before, .touch-stick::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(143, 214, 255, .18);
    border-radius: 50%;
  }
  .touch-stick::after {
    inset: 61px;
    border: 0;
    background: rgba(238, 244, 255, .4);
    box-shadow: 0 0 8px rgba(143, 214, 255, .65);
  }
  .touch-stick-knob {
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border: 1px solid rgba(238, 244, 255, .38);
    background: radial-gradient(circle at 36% 32%, rgba(238, 244, 255, .72), rgba(143, 214, 255, .44) 48%, rgba(76, 167, 255, .24));
  }

  .hud-touchpad {
    right: max(14px, calc(16px + var(--sa-r)));
    bottom: max(78px, calc(84px + var(--sa-b)));
    gap: 10px;
  }
  .hud-touch-btn {
    width: 62px;
    height: 62px;
    border-width: 2px;
    border-color: rgba(143, 214, 255, .55);
    background: linear-gradient(180deg, rgba(24, 47, 78, .82), rgba(8, 16, 32, .74));
    box-shadow: 0 5px 18px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .12);
  }
  .hud-touch-btn span { font-size: 11px; font-weight: 600; }
  .hud-touch-btn:active { transform: scale(.91); }

  .hud-deck {
    bottom: max(8px, calc(10px + var(--sa-b)));
    gap: 8px;
  }
  .weapon-card {
    max-width: min(34vw, 190px);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18, 34, 60, .82), rgba(10, 18, 36, .72));
  }
  .weapon-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (pointer: coarse) and (max-width: 700px), (pointer: coarse) and (orientation: landscape) and (max-height: 420px) {
  .hud-pcard { max-width: min(44vw, 270px); }
  .hud-pcard .pcard-main { min-width: 0; }
  .pcard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud-objective { max-width: min(48vw, 320px); }
  .hud-touchpad { right: max(8px, calc(10px + var(--sa-r))); }
  .hud-touch-btn { width: 60px; height: 60px; }
}

/* v1.6.9：同一 DOM 的宽屏重排。宽屏把统计/卡片/建造信息铺开，
   窄屏媒体块再收束为单列；不复制 Mobile 页面，也不改变桌面视觉语言。 */
@media (min-width: 1100px) {
  .achv-wrap { padding: 28px 5vw; }
  .achv-body { width: min(1280px, 90vw); }
  .achv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .achv-stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cd-body { width: min(1180px, 90vw); max-height: 72vh; }
  .cd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cd-wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hud-pcard { max-width: 310px; }
  .hud-mmwrap { right: calc(24px + var(--sa-r)); }
  .hud-deck { left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--sa-b)); }
  .denial-build { width: min(430px, 32vw); right: calc(24px + var(--sa-r)); bottom: calc(96px + var(--sa-b)); }
  .denial-build-list-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .db-cat { grid-column: 1 / -1; }
}

/* 防卫建造菜单在窄屏占用底部安全区，横屏仍保留两列空间。 */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .denial-wrap { top: calc(8px + var(--sa-t)); left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); transform: none; justify-content: space-between; gap: 6px; padding: 6px 8px; }
  .denial-wrap .denial-core .bar { width: clamp(70px, 20vw, 130px); }
  .denial-build { left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); bottom: calc(74px + var(--sa-b)); width: auto; max-height: min(56vh, 420px); }
  .denial-build-list-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .db-cat { grid-column: 1 / -1; }
  .denial-build-btn { min-height: 48px; padding: 8px; }
  .screen-title { font-size: clamp(20px, 5vw, 28px); margin-bottom: 14px; }
  .cd-tabs { gap: 8px; flex-wrap: wrap; }
  .cd-tab { min-height: 48px; padding: 12px 16px; }
  .cd-grid, .achv-grid, .achv-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cd-card { min-height: 48px; padding: 12px 10px; }
  .st-row, .hp-row, .setting-row { min-height: 48px; }
  .cs-body, .prep-body { width: min(96vw, 760px); gap: 14px; }
  .cs-list, .cs-detail, .prep-class, .prep-weapons { width: 100%; }
  .hud-deck { left: calc(150px + var(--sa-l)); right: calc(150px + var(--sa-r)); justify-content: center; }
}

/* ================================================================
   v1.6.10 移动端原生横屏 UI
   - 页面使用“顶栏 / 可用内容区 / 固定操作栏”应用壳，不再缩放桌面长页
   - 职业选择左右分区；战前准备把机体武器与关卡配置并排呈现
   - 所有大面板占满剩余空间，取消 62/66vh 等桌面固定高度
   ================================================================ */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .screen:not(.battle-root) {
    box-sizing: border-box;
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
  }
  /* 触屏正文靠直接拖拽，不显示仅 8px 宽的桌面 Canvas 滑块。 */
  #scroll-canvas, #prep-scroll-canvas { display: none !important; }

  /* 主菜单保持 PC 的居中构图，但把卡片视觉宽度收至约一半；触控热区仍 >=44px。 */
  .menu-root {
    align-items: center;
    justify-content: center;
    padding-top: max(8px, var(--sa-t));
    padding-bottom: max(8px, var(--sa-b));
  }
  .menu-title {
    margin: 0 0 clamp(10px, 3vh, 18px);
    font-size: clamp(20px, 4.2vw, 28px);
    letter-spacing: .24em;
  }
  .menu-nav {
    grid-template-columns: repeat(2, 132px);
    width: max-content;
    max-width: calc(100vw - 24px - var(--sa-l) - var(--sa-r));
    gap: 7px 9px;
    margin-inline: auto;
  }
  .menu-nav .btn {
    width: 132px;
    min-height: 45px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 13px;
  }
  .menu-nav .btn:nth-child(7) { grid-column: 1 / -1; justify-self: center; }
  .menu-nav-ico svg { width: 14px; height: 14px; }

  /* 图鉴 / 商店 / 成就 / 设置 / 帮助：动态占满可用视口，而不是固定 vh 面板。 */
  .cd-wrap, .sh-wrap, .achv-wrap, .st-wrap, .hp-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 4px 6px;
    gap: 6px;
    align-items: stretch;
    justify-items: stretch;
  }
  .cd-wrap, .sh-wrap, .achv-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .st-wrap, .hp-wrap {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .cd-wrap > .screen-title, .achv-wrap > .screen-title,
  .st-wrap > .screen-title, .hp-wrap > .screen-title,
  .sh-head .screen-title {
    margin: 0;
    font-size: clamp(18px, 4vw, 24px);
    line-height: 1.1;
  }
  .sh-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .cd-tabs, .sh-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: min(100%, 720px);
    justify-self: center;
    gap: 5px;
  }
  .cd-tab, .sh-tab {
    min-height: 38px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .cd-body, .sh-body, .achv-body, .st-body, .hp-body {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    box-sizing: border-box;
    padding: 8px 10px;
  }
  .cd-wrap > .btn:last-child, .sh-wrap > .btn:last-child,
  .achv-wrap > .btn:last-child, .st-wrap > .btn:last-child,
  .hp-wrap > .btn:last-child {
    justify-self: center;
    min-height: 40px;
    padding: 6px 22px;
    font-size: 13px;
  }
  .cd-grid, .achv-grid, .achv-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .cd-card { padding: 8px 6px; gap: 3px; }
  .achv-head { padding: 6px 8px 4px; }
  .achv-sec { margin: 4px 0 8px; }
  .achv-sec-title { padding: 4px 8px; }
  .achv-badge { width: 40px; height: 40px; margin-bottom: 3px; }
  .st-body-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; }
  .st-section { grid-column: 1 / -1; margin: 5px 0 1px; }
  .st-row { min-width: 0; padding: 3px 2px; }
  .st-label { width: 88px; font-size: 12px; }
  .st-hint { font-size: 10px; }
  .hp-body-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .hp-section:first-child { grid-column: 1 / -1; }
  .hp-title { font-size: 14px; margin-bottom: 5px; }
  .hp-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .hp-p { font-size: 12px; line-height: 1.55; }

  /* 职业选择：固定顶栏与底栏，中间左右分区；仅职业列表自身滚动。 */
  .screen > .cs-wrap {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    gap: 6px;
    padding: 3px 5px;
    margin: 0;
  }
  .cs-head { justify-content: center; gap: 14px; min-height: 30px; }
  .cs-head .screen-title { margin: 0; font-size: clamp(18px, 4vw, 24px); }
  .cs-body {
    display: grid;
    grid-template-columns: minmax(220px, 41%) minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 7px;
    align-items: stretch;
  }
  .cs-list, .cs-detail {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    overflow: hidden;
  }
  .cs-list-content { gap: 3px; padding: 5px; }
  .cs-row {
    grid-template-columns: minmax(66px, .8fr) 1fr;
    min-height: 40px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
  }
  .cs-row-state { text-align: right; }
  .cs-detail { padding: 8px 10px; gap: 4px; }
  .cs-detail-head { margin: 0; padding-left: 8px; }
  .cs-detail-name { font-size: 16px; }
  .cs-detail-tag { font-size: 10px; }
  .cs-stat, .cs-wpn, .cs-sk { font-size: 11px; gap: 6px; line-height: 1.25; }
  .cs-stat .k, .cs-wpn .k, .cs-sk .k { min-width: 66px; }
  .cs-bottom {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.25fr) auto auto;
    width: 100%;
    gap: 6px;
    align-items: center;
  }
  .cs-mate { min-width: 0; gap: 4px; font-size: 11px; white-space: nowrap; }
  .cs-mate select { min-width: 0; width: 100%; min-height: 40px; padding: 4px 6px; font-size: 11px; }
  .cs-bottom .btn { min-height: 40px; padding: 6px 12px; font-size: 12px; white-space: nowrap; }

  /* 战前准备：左侧机体+2x2武器，右侧章节/关卡/难度，底部操作始终可见。 */
  .screen > .prep-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #prep-wrap {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "prep-title prep-title"
      "prep-loadout prep-chapters"
      "prep-loadout prep-levels"
      "prep-loadout prep-diff"
      "prep-actions prep-actions";
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    gap: 5px 7px;
    padding: 2px 4px;
    margin: 0;
    transform: none !important;
  }
  #prep-wrap > .screen-title { grid-area: prep-title; margin: 0; font-size: clamp(18px, 4vw, 24px); line-height: 1.05; }
  #prep-wrap > .prep-body { grid-area: prep-loadout; }
  #prep-wrap > .prep-chapters { grid-area: prep-chapters; }
  #prep-wrap > .prep-levels { grid-area: prep-levels; }
  #prep-wrap > .prep-diff { grid-area: prep-diff; }
  #prep-wrap > .prep-bottom { grid-area: prep-actions; }
  .prep-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 5px;
  }
  .prep-class, .prep-weapons {
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
  }
  .prep-class { padding: 7px 9px; gap: 2px; }
  .prep-cname { font-size: 16px; }
  .prep-ctag { margin-bottom: 2px; font-size: 10px; }
  .prep-cstat, .prep-cskill { font-size: 10px; line-height: 1.3; }
  .prep-weapons { display: flex; flex-direction: column; padding: 6px; overflow: hidden; }
  .prep-wtitle { margin-bottom: 4px; font-size: 11px; letter-spacing: .1em; }
  .prep-wlist { flex: 1; min-height: 0; overflow: hidden; }
  .prep-wlist-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .prep-wrow {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 42px;
    padding: 4px 5px;
    gap: 5px;
    border-radius: 8px;
  }
  .prep-wicon { width: 27px; height: 27px; border-radius: 6px; }
  .prep-wicon svg { width: 20px; height: 20px; }
  .prep-wname { font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prep-wname em { display: none; }
  .prep-wdesc, .prep-wstate { display: none; }
  .prep-chapters, .prep-levels, .prep-diff {
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 7px;
    overflow: hidden;
  }
  .prep-chgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
  .prep-ch {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 4px 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 7px;
  }
  .prep-chart, .prep-chdesc, .prep-chprog { display: none; }
  .prep-chinfo { min-width: 0; }
  .prep-chname { font-size: 11px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prep-lvgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
  .prep-lv { justify-content: center; min-width: 0; min-height: 34px; padding: 3px 4px; font-size: 10px; text-align: center; }
  .prep-lv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prep-diffgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
  .prep-diffbtn { min-width: 0; min-height: 38px; align-items: center; justify-content: center; padding: 4px; text-align: center; }
  .prep-diffname { font-size: 11px; }
  .prep-diffdesc { display: none; }
  .prep-bottom { justify-content: center; gap: 8px; }
  .prep-bottom .btn { min-height: 40px; padding: 6px 24px; font-size: 12px; }
}
/* 图形化 UI 编辑器生成的运行时点击判定区域。默认完全透明，show-label 仅用于明确可见按钮。 */
.ui-editor-hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  color: #dff6ff;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.ui-editor-hotspot.show-label {
  border: 1px solid rgba(143, 214, 255, .55);
  border-radius: 8px;
  background: rgba(7, 20, 38, .72);
  box-shadow: 0 0 16px rgba(76, 167, 255, .2);
}

/* ================================================================
   v1.6.12 · Android 915×412 统一移动 UI 基准
   其他移动视口只做等比 contain 缩放；游戏战场 Canvas 仍铺满真实屏幕。
   ================================================================ */
:root { --mobile-ui-scale: 1; }

html.mobile-ui-reference #app > .screen:not(.battle-root) {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 915px;
  height: 412px;
  box-sizing: border-box;
  translate: -50% -50%;
  scale: var(--mobile-ui-scale);
  transform-origin: center;
}

html.mobile-ui-reference #app > .screen:not(.battle-root).screen-in {
  animation: mobileScreenIn .25s ease-out;
}
html.mobile-ui-reference #app > .screen:not(.battle-root).screen-out {
  animation: mobileScreenOut .25s ease-in both;
}
@keyframes mobileScreenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mobileScreenOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

html.mobile-ui-reference .battle-root > .hud {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 915px;
  height: 412px;
  box-sizing: border-box;
  translate: -50% -50%;
  scale: var(--mobile-ui-scale);
  transform-origin: center;
}

.hud-viewport-fx {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.hud-viewport-fx > .dmg-layer,
.hud-viewport-fx > .lowhp { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 图鉴卡片：SVG/Canvas 图示约 52~56px，卡宽固定为其 3 倍，长文案向下换行。 */
html.mobile-ui-reference .cd-grid,
html.mobile-ui-reference .cd-wgrid,
html.mobile-ui-reference .cd-ch-sec .cd-grid {
  grid-template-columns: repeat(auto-fit, 168px) !important;
  justify-content: center;
  align-items: start;
  gap: 7px;
}
html.mobile-ui-reference .cd-card {
  width: 168px;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 8px 7px;
  overflow-wrap: anywhere;
}
html.mobile-ui-reference .cd-card .cd-text,
html.mobile-ui-reference .cd-card .cd-tip,
html.mobile-ui-reference .cd-card .cd-wname,
html.mobile-ui-reference .cd-card .cd-cname { max-width: 100%; white-space: normal; }

/* 双浮动摇杆：触点处生成，离手淡出。底座与旋钮全部使用内联 SVG 线稿。 */
.touch-stick {
  left: 25%;
  top: 72%;
  bottom: auto;
  width: 128px;
  height: 128px;
  border: 0;
  background: radial-gradient(circle, rgba(76,167,255,.12), rgba(6,14,28,.08) 66%, transparent 68%);
  box-shadow: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--mobile-ui-scale, 1));
  transform-origin: center;
  transition: opacity .1s;
}
.touch-stick-aim { left: 75%; }
.touch-stick.on { opacity: 1; }
.touch-stick::before, .touch-stick::after { content: none; }
.touch-stick-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(143,214,255,.58); stroke-width: 1.5; }
.touch-stick-aim .touch-stick-ring { stroke: rgba(179,136,255,.72); }
.touch-stick-knob {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238,244,255,.42);
  background: radial-gradient(circle, rgba(143,214,255,.38), rgba(22,48,78,.88));
  box-shadow: 0 0 18px rgba(76,167,255,.42);
}
.touch-stick-aim .touch-stick-knob { background: radial-gradient(circle, rgba(203,176,255,.42), rgba(43,28,78,.88)); box-shadow: 0 0 18px rgba(179,136,255,.46); }
.touch-stick-knob svg { width: 38px; height: 38px; fill: none; stroke: #dff6ff; stroke-width: 1.6; }
.touch-stick-knob svg path { fill: rgba(223,246,255,.24); }
.touch-stick-label { position: absolute; left: 0; right: 0; bottom: -12px; text-align: center; color: rgba(223,246,255,.72); font-size: 10px; letter-spacing: .24em; }
.hud-touch-attack[hidden] { display: none !important; }
.mobile-separate-attack .hud-touch-attack { border-color: rgba(179,136,255,.72); color: #d5b8ff; }

/* 设置内战斗 HUD 拖拽编辑器。 */
.hud-layout-editor {
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  color: #dff6ff;
}
.hud-layout-editor[hidden] { display: none; }
.hud-layout-title,
.hud-layout-modules,
.hud-layout-actions { position: absolute; display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.hud-layout-title { top: 8px; left: 50%; translate: -50% 0; padding: 7px 12px; border: 1px solid rgba(143,214,255,.4); border-radius: 8px; background: rgba(5,12,24,.9); font-size: 13px; letter-spacing: .12em; }
.hud-layout-title span { color: #7f9bbb; font-size: 10px; letter-spacing: .04em; }
.hud-layout-modules { left: 50%; bottom: 8px; translate: -50% 0; padding: 6px; border-radius: 9px; background: rgba(5,12,24,.9); }
.hud-layout-actions { right: 8px; top: 8px; }
.hud-layout-editor button { min-height: 34px; padding: 5px 9px; color: #b7cee9; border: 1px solid rgba(143,214,255,.28); border-radius: 6px; background: rgba(12,25,45,.92); font: inherit; font-size: 10px; }
.hud-layout-editor button.on,
.hud-layout-editor button.primary { color: #eef8ff; border-color: #4ca7ff; background: rgba(76,167,255,.24); }
.hud-layout-editing .hud-pcard,
.hud-layout-editing .hud-mcard,
.hud-layout-editing .hud-mmwrap,
.hud-layout-editing .hud-objective,
.hud-layout-editing .hud-deck,
.hud-layout-editing .hud-touchpad,
.hud-layout-editing .hud-menubtn { pointer-events: auto !important; outline: 1px dashed rgba(143,214,255,.5); outline-offset: 3px; }
.hud-layout-editing .hud-layout-selected { outline: 2px solid #8fd6ff !important; box-shadow: 0 0 22px rgba(76,167,255,.42) !important; }
.hud-layout-editing .hud-touchpad { display: flex !important; }

/* 地图编辑器移动端重构：画布全屏，工具和地图信息作为可开合侧屉。 */
.me-mobile-dock { display: none; }
html.mobile-ui-reference .me-root { padding: 0 !important; background: #070b14; }
html.mobile-ui-reference .me-header {
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 5px 7px;
  overflow: hidden;
  z-index: 30;
}
html.mobile-ui-reference .me-title { min-width: 92px; margin: 0; font-size: 12px; letter-spacing: .08em; }
html.mobile-ui-reference .me-header label { gap: 3px; font-size: 10px; white-space: nowrap; }
html.mobile-ui-reference .me-header input[type=text] { width: 104px; }
html.mobile-ui-reference .me-header input[type=number] { width: 46px; }
html.mobile-ui-reference .me-header input[type=text],
html.mobile-ui-reference .me-header input[type=number] { height: 30px; box-sizing: border-box; padding: 3px 5px; }
html.mobile-ui-reference .me-header .btn { min-height: 34px; padding: 5px 9px; border-radius: 7px; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
html.mobile-ui-reference .me-main { position: relative; overflow: hidden; }
html.mobile-ui-reference .me-stage-wrap { position: absolute; inset: 0; padding: 4px 4px 48px; }
html.mobile-ui-reference #me-stage { touch-action: none; border-radius: 8px; }
html.mobile-ui-reference .me-hover-tip { left: 10px; bottom: 51px; font-size: 10px; }
html.mobile-ui-reference .me-tools,
html.mobile-ui-reference .me-side {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 70;
  width: 285px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: rgba(5,12,24,.97);
  transition: translate .18s ease-out;
  box-shadow: 0 0 28px rgba(0,0,0,.55);
}
html.mobile-ui-reference .me-tools { left: 0; translate: -102% 0; }
html.mobile-ui-reference .me-side { right: 0; translate: 102% 0; }
html.mobile-ui-reference .me-panel-tools .me-tools,
html.mobile-ui-reference .me-panel-side .me-side { translate: 0 0; }
html.mobile-ui-reference .me-tools-content { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; padding: 8px 8px 56px; }
html.mobile-ui-reference .me-tool-title,
html.mobile-ui-reference .me-size-row { grid-column: 1 / -1; }
html.mobile-ui-reference .me-tool-btn { min-height: 40px; padding: 5px 7px; font-size: 11px; }
html.mobile-ui-reference .me-tool-btn small { display: none; }
html.mobile-ui-reference .me-side-content { padding: 8px 8px 56px; }
html.mobile-ui-reference .me-mobile-dock {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 6px;
  translate: -50% 0;
  z-index: 80;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(143,214,255,.28);
  border-radius: 10px;
  background: rgba(5,12,24,.9);
  backdrop-filter: blur(8px);
}
html.mobile-ui-reference .me-mobile-dock button {
  min-width: 48px;
  min-height: 34px;
  padding: 4px 7px;
  color: #b9d4ef;
  border: 1px solid rgba(143,214,255,.26);
  border-radius: 7px;
  background: rgba(14,29,50,.92);
  font: inherit;
  font-size: 10px;
}
html.mobile-ui-reference .me-mobile-dock button.on { color: #eef8ff; border-color: #ff9d9d; background: rgba(255,107,107,.18); }

html.mobile-ui-reference .hud-touch-btn span { font-size: 12px; }
html.mobile-ui-reference .hud-menubtn { min-height: 44px !important; }

@media (pointer: coarse) {
  .battle-root > .touch-stick { display: block; }
  .hud-touch-btn { width: 54px; height: 54px; }
  .st-mobile-layout-row .btn { min-height: 40px; padding: 6px 12px; font-size: 11px; }
}