:root {
  --bg: #0d1117;
  --panel: #161b22;
  --line: #2b3340;
  --text: #c9d1d9;
  --muted: #8b949e;
  --accent: #607D8B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* 阻止移动端下拉刷新 / 橡皮筋滚动干扰游戏操作 */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* ===== 顶部状态栏 ===== */
#topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
#topbar .title { font-weight: 700; letter-spacing: 1px; }
#topbar .title .sub { color: var(--muted); font-weight: 400; font-size: 12px; }
#status { flex: 1; color: var(--muted); font-size: 13px; }
#status b { color: var(--text); }
/* 结束回合 / 撤回移动：尺寸规则共用，保证两者大小完全一致；仅底色不同 */
#end-turn, #undo-move {
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
#end-turn { background: #5a9bd5; }   /* 钢蓝提亮，与撤回移动区分 */
#undo-move { background: #3a6e9c; }  /* 钢蓝压暗，比结束回合更沉 */
#end-turn:hover, #undo-move:hover { filter: brightness(1.1); }
/* 撤回移动不可用：变灰禁用 */
#undo-move:disabled {
  background: #5a5f66;   /* 灰 */
  color: #9aa0a6;
  cursor: not-allowed;
  filter: none;
}
/* 投降：方形灰色底白字，区别于结束回合（钢蓝） */
#surrender {
  width: 36px; height: 36px;
  padding: 0;
  background: #5b6168;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#surrender:hover { filter: brightness(1.12); }

/* ===== 主区域 ===== */
#app {
  display: flex;
  height: calc(100% - 52px);
  height: calc(100dvh - 52px);
}

#board-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  perspective: 1400px;
  cursor: grab;
  user-select: none;
  touch-action: none;            /* 移动端：禁止页面手势，交给我们自己处理拖动/缩放 */
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 50% 40%, #11202e 0%, #0d1117 70%);
}

/* 等距投影：容器倾斜，内部六角变菱形，文字反向转正 */
/* 绝对定位于父容器正中（translate -50% 居中），绕中心旋转保持视觉居中 */
/* 外层：仅负责平移/缩放（2D 合成层，拖动/缩放时只移动已栅格化的图，不重绘子元素 → 不卡、不黑） */
#map-board {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1156px;          /* 由 renderBoard 按 HEX 动态覆盖，此处仅作默认 */
  height: 713px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
/* 内层：静态等距倾斜（3D 场景只栅格化一次） */
#map-board-3d {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateX(60deg) rotateZ(45deg);
  transform-origin: center center;
  transform-style: preserve-3d;
}

/* 地图缩放控制（右上角） */
#zoom-ctrl {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 20;
}
#zoom-ctrl button {
  width: 38px;
  height: 38px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #21303f;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
#zoom-ctrl button:hover:not(:disabled) { border-color: var(--accent); }
#zoom-ctrl button:disabled {
  background: #2b2b2b;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===== 六角格 ===== */
.hex {
  position: absolute;
  cursor: pointer;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  transition: filter 0.12s;
}
.hex:hover { filter: brightness(1.25); }

/* 文字内容反向旋转，使其在等距视角下保持正向可读 */
.hex .content {
  transform: rotateZ(-45deg) rotateX(-60deg);
  text-align: center;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 2;
}
.hex .terrain-label {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.hex .elev {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
}

/* 占点模式：基地地块为浅黄底（TERRAIN.base.color）；地块字为白色；
   描边与外发光颜色由 render.js 按当前占领方动态设置（无人占领为银色 #c0c0c0） */
.hex.base { box-sizing: border-box; }
.hex.base .terrain-label { color: rgba(255,255,255,0.9); }
.hex.base .elev { color: #555; }

/* 机甲方块（立体化：内部斜面 + 底部侧面 + 地面投影，避免被 hex 的 clip-path 裁掉外阴影） */
.hex .mech {
  position: relative;
  margin-top: 2px;
  width: 96%;
  padding: 5px 4px 7px;
  border-radius: 6px 6px 4px 4px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: #06121f;
  border: 1px solid rgba(0,0,0,0.45);
  border-top-color: rgba(255,255,255,0.80);
  border-bottom-color: rgba(0,0,0,0.70);
  background-color: var(--mc, #3da9fc);
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0) 50%),
    linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0) 45%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 -4px 4px rgba(0,0,0,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
/* 立体侧面厚度：越高越显“高” */
.hex .mech::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 9px;
  background: rgba(0,0,0,0.55);
  border-radius: 0 0 6px 6px;
}
/* 地面投影 + 与机体间的缝隙 => 悬浮感（缝隙越大越“高”） */
.hex .mech::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%;
  top: 100%;
  margin-top: 7px;
  height: 9px;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  filter: blur(3px);
}
.hex .mech .hpbar {
  height: 3px;
  margin-top: 2px;
  background: rgba(0,0,0,0.35);
  border-radius: 2px;
  overflow: hidden;
}
.hex .mech .hpbar > i {
  display: block;
  height: 100%;
  background: #7CFC00;
}
/* 蚖虫（怪兽阵营）：棋盘棋子绿光描边，区别于同色的普通机甲 */
.hex .mech.monster {
  border: 2px solid #7CFC00;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 -4px 4px rgba(0,0,0,0.35),
    0 0 9px 2px rgba(124,252,0,0.75);
}
/* 撕裂者（Lac-00）：单独蓝光描边，区别于普通蚖虫的绿光 */
.hex .mech.dragon {
  border: 2px solid #4ea8ff;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 -4px 4px rgba(0,0,0,0.35),
    0 0 11px 2px rgba(78,168,255,0.9);
}

/* 高亮状态：实心内描边六边形环 + 半透明填色（内阴影环不被 clip-path 裁掉，最醒目） */
.hex::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
  z-index: 1;
}
/* 指挥光环范围：选中带光环的单位时高亮其作用半径（紫色，最低优先，被可移动/可攻击/可支援色覆盖） */
.hex.aura-range { box-shadow: inset 0 0 0 3px rgba(168,140,255,0.9); }
.hex.aura-range::before { opacity: 1; background: rgba(168,140,255,0.16); }
.hex.reachable { box-shadow: inset 0 0 0 5px #2cf59a; }
.hex.reachable::before { opacity: 1; background: rgba(44, 245, 154, 0.28); }
.hex.attackable { box-shadow: inset 0 0 0 5px #ff4d6d; }
.hex.attackable::before { opacity: 1; background: rgba(255, 77, 109, 0.30); }
/* 支援目标（修理/补给）：青色，区别于绿色可移动与红色可攻击。
   写在 attackable 之后——同一格既可攻击又可支援时，优先显示为支援色。 */
.hex.supportable { box-shadow: inset 0 0 0 5px #35d6f0; }
.hex.supportable::before { opacity: 1; background: rgba(53, 214, 240, 0.30); }
.hex.selected { box-shadow: inset 0 0 0 6px #ffd166; }
.hex.selected::before { opacity: 1; background: rgba(255, 209, 102, 0.28); }
/* 本回合已行动完的机体：选中后用银色高亮 */
.hex.selected-done { box-shadow: inset 0 0 0 6px #cfd6e0; }
/* 本回合已行动完（移动+攻击）的己方单位：常驻灰色描边 + 轻微去饱和，独立于选中态，便于一眼识别待操作/已操作单位（敌方不标记） */
.hex.done { box-shadow: inset 0 0 0 3px #7b8494; }
.hex.done .mech { box-shadow: 0 0 0 2px #7b8494, inset 0 2px 1px rgba(255,255,255,0.30), inset 0 -4px 4px rgba(0,0,0,0.35); filter: saturate(0.6) brightness(0.92); }
/* 已行动完的单位若同时被选为支援目标，仍须显示支援蓝色高亮（复合选择器特异度更高，胜出 done 灰边） */
.hex.done.supportable { box-shadow: inset 0 0 0 5px #35d6f0; }
.hex.done.supportable::before { opacity: 1; background: rgba(53, 214, 240, 0.30); }

/* 战争迷雾（详见 DEV-FOG-OF-WAR.md）：未探索格全遮罩；已探索但当前不可见格变暗保留地形记忆 */
.hex.fog { background: #0a0d12 !important; }          /* 遮住地形底色 */
.hex.fog::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,10,14,0.92); pointer-events: none;   /* 深色迷雾遮罩，覆盖地形与机甲残影 */
}
.hex.explored::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,10,14,0.55); pointer-events: none;   /* 已探索区域变暗，地形仍隐约可辨 */
}
.hex.selected-done::before { opacity: 1; background: rgba(207, 214, 224, 0.26); }
/* 被选中的我方机体额外描白边，进一步突出 */
.hex.selected .mech { box-shadow: 0 0 0 2px #ffffff, 0 0 12px #ffd166, inset 0 2px 1px rgba(255,255,255,0.55), inset 0 -4px 4px rgba(0,0,0,0.35); }
.hex.selected-done .mech { box-shadow: 0 0 0 2px #cfd6e0, 0 0 12px #aeb6c2, inset 0 2px 1px rgba(255,255,255,0.55), inset 0 -4px 4px rgba(0,0,0,0.35); }

/* ===== 战斗特效动画 ===== */
/* 1) 开局提示：玩家单位所在格闪烁两次（复用六边形高亮遮罩） */
.hex.fx-start::before {
  opacity: 1;
  background: rgba(255, 209, 102, 0.55);
  animation: fxStart 0.35s ease 2;
}
@keyframes fxStart {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
/* 2) 命中红光：机甲方块红色辉光一闪 */
.hex .mech.fx-hit { animation: fxHit 0.5s ease; }
@keyframes fxHit {
  0% {
    box-shadow: 0 0 0 3px #ff3b3b, 0 0 18px 4px #ff3b3b, inset 0 2px 1px rgba(255,255,255,0.55), inset 0 -4px 4px rgba(0,0,0,0.35);
    filter: brightness(1.8);
  }
  100% {
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.55), inset 0 -4px 4px rgba(0,0,0,0.35);
    filter: brightness(1);
  }
}
/* 3) 摧毁爆炸 / 蚖虫泼溅：图片放大淡出（挂在未倾斜的外层 #map-board 上，因此不会被拉伸）
      改用 effect/ 下的 PNG 而非 emoji：安卓等平台缺少 🫟，且图片可控性更好 */
.fx-boom {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  line-height: 1;
}
.fx-boom span {
  display: inline-block;
  animation: fxBoomInner 0.8s ease-out forwards;
}
.fx-boom img {
  display: block;
  width: 40px;                                 /* 特效图基准尺寸，配合动画缩放 0.45→1.6 */
  height: 40px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.85));   /* 爆炸：橙色辉光 */
}
/* 蚖虫泼溅：绿色辉光（图片本身已是泼溅色，不再做色相旋转） */
.fx-boom.mon img {
  filter: drop-shadow(0 0 6px rgba(124, 252, 0, 0.9));
}
/* 龙灾核爆：更大、更久、绿黄色辉光（图片为 effect/nuclear_explosion.png） */
.fx-boom.nuclear img {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 16px rgba(180, 255, 110, 0.95));
}
.fx-boom.nuclear span {
  animation: fxNuclearInner 1.2s ease-out forwards;
}
@keyframes fxNuclearInner {
  0%   { transform: scale(0.5);  opacity: 0.7; }
  50%  { transform: scale(1.55); opacity: 1;   }
  100% { transform: scale(2.4);  opacity: 0;   }
}
@keyframes fxBoomInner {
  0%   { transform: scale(0.45); opacity: 0.55; }   /* 起始：半透明 */
  55%  { transform: scale(1.4);  opacity: 0.8;  }   /* 峰值：半透明但不过透（原 1.9 / 1） */
  100% { transform: scale(1.6);  opacity: 0;    }   /* 淡出（原 2.2） */
}

/* 攻击指示线：进攻方阵营色「>」箭头串，沿进攻方向指向被进攻方；整组淡入淡出，约 0.52s 后随 JS 移除 */
.fx-line {
  position: absolute; z-index: 6; pointer-events: none;
  animation: fxLineFade 0.52s ease-out forwards;
}
@keyframes fxLineFade {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== 侧栏 ===== */
#sidebar {
  width: 260px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
}

/* 图例可折叠：点击标题栏收起，腾出战斗日志空间（小屏尤其有用） */
.collapsible-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding: 2px 0 6px;
}
.collapsible-head .caret {
  color: var(--muted);
  transition: transform 0.15s ease;
  font-size: 15px;
}
.collapsible.collapsed .caret { transform: rotate(-90deg); }
.collapsible.collapsed #legend { display: none; }

#legend { font-size: 12px; }
#legend .row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
#legend .dot { width: 12px; height: 12px; border-radius: 3px; }
#legend .swatch { width: 14px; height: 14px; border-radius: 2px; display:inline-block; }
/* 与图例的折叠栏标题 .collapsible-head 视觉对齐（加粗 + 主文本色）；保留上分隔线做区块分隔 */
#log-title { margin-top: 12px; color: var(--text); font-size: 15px; font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; }
#log { flex: 1; overflow: auto; font-size: 12px; line-height: 1.5; margin-top: 4px; }
#log .line { margin: 2px 0; color: var(--text); }
#log .sys { color: var(--muted); }
#log .hit { color: #ffd166; }
#log .kill { color: #ef4565; font-weight: 700; }
#log .crit { color: #ff7b00; font-weight: 700; }
#log .sup { color: #35d6f0; }
/* 回合上限倒计时通告：橙红高亮块 + 轻微脉动。
   字号与日志正文一致（继承 #log 的 12px），仅靠颜色/加粗/左边框/底色区分，避免日志里出现突兀的大字。 */
#log .turnwarn {
  display: block;
  margin: 4px 0;
  padding: 2px 6px;
  color: #ff9f1c;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-left: 3px solid #ff9f1c;
  background: rgba(255,159,28,0.10);
  border-radius: 3px;
  animation: turnwarn-pulse 1.2s ease-in-out infinite;
}
@keyframes turnwarn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ===== 悬浮窗 ===== */
#popup {
  position: fixed;
  z-index: 50;
  width: 230px;
  background: rgba(13,17,23,0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  user-select: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#popup h3 { margin: 0 0 6px; font-size: 14px; }
#popup .seg { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
#popup .kv { display: flex; justify-content: space-between; margin: 2px 0; color: var(--muted); }
#popup .kv b { color: var(--text); }
#popup .close { position: absolute; top: 4px; right: 8px; cursor: pointer; color: var(--muted); }
#popup .tag { display:inline-block; padding:1px 6px; border-radius:4px; font-size:11px; margin-right:4px; }
#popup .tag.st-buff   { background: rgba(120,224,128,0.18); color: #8ef09a; border:1px solid rgba(120,224,128,0.5); }
#popup .tag.st-debuff { background: rgba(255,107,129,0.16); color: #ff8a9e; border:1px solid rgba(255,107,129,0.5); }
#popup .st-tags { text-align:right; }

/* 机甲头像（整备卡片与悬浮窗共用基础样式） */
.mech-avatar { width: 64px; height: 64px; border-radius: 8px; object-fit: contain; background: #000; display: block; }
/* 悬浮窗内：头像仅与标题同行，武器/属性整块左对齐 + 按玩家配色描边 */
#popup .mech-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#popup .mech-pop-head h3 { margin: 0; }
#popup .weapon-label { margin-top: 6px; color: var(--muted); }
#popup .mech-avatar.pop { width: 48px; height: 48px; border: 2px solid var(--line); }

/* 攻击选武器区（合并在信息窗顶部，样式与面板统一） */
#popup .atk-choose {
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
}
#popup .atk-title { font-size: 13px; margin-bottom: 6px; color: var(--text); }
/* 支援区（修理/补给）与攻击区在视觉上区分 */
#popup .atk-choose.sup { background: rgba(53, 214, 240, 0.08); }
#popup .atk-w {
  display: block;
  width: 100%;
  margin: 4px 0;
  text-align: left;
  background: #21303f;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
#popup .atk-w:hover { border-color: var(--accent); }

/* ===== 遮罩 / 面板 ===== */
.overlay {
  position: fixed; inset: 0;
  background: #05080c;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
/* AI 行动遮罩：仅作透明点击拦截（不遮挡画面）。
   注：#board-wrap 因 perspective 建立层叠上下文，把棋盘（含爆炸/攻击线特效）压在根级遮罩之下；
   若此处仍用半透明深色背景，会把 AI 回合中的死亡/攻击动画盖住、看起来「没播动画」。
   改为透明后，AI 行动全程可见，仅拦截玩家点击。回合归属由顶栏「当前：敌方」指示。 */
#ai-overlay { background: transparent; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 460px;
  text-align: center;
}
.panel.wide { max-width: 760px; text-align: left; }
/* 整备界面标题左侧：返回模式选择箭头（< 符号） */
.build-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.corner-arrow {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(18, 26, 36, 0.72);
  color: #e8eef5;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.corner-arrow:hover { background: rgba(46, 60, 78, 0.95); }
.panel h1 { margin: 0 0 6px; letter-spacing: 1px; }
.panel .desc { color: var(--muted); margin: 0 0 14px; }
.panel .hint { color: var(--muted); font-size: 12px; margin-top: 14px; }
.btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
button {
  background: #21303f; color: var(--text);
  border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
/* 首页模式选择：选中态 */
.btn-row button.sel { border-color: var(--accent); background: #455A64; color: #fff; box-shadow: 0 0 0 1px var(--accent) inset; }

/* ===== 真标题画面 ===== */
.title-panel { max-width: 380px; }
.game-logo {
  font-size: 40px; letter-spacing: 6px; margin: 4px 0 8px;
  font-weight: 800;
  background: linear-gradient(180deg, #e8eef5, #8fb8d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-col { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.btn-col button { font-size: 17px; padding: 12px 0; font-weight: 700; }
.btn-col button.primary {
  background: #4682B4; color: #fff; border-color: #4682B4;
}
.btn-col button.primary:hover { filter: brightness(1.1); }

/* ===== 设定手册 ===== */
.panel.manual {
  max-width: 820px; width: 92vw; max-height: 86vh;
  display: flex; flex-direction: column; text-align: left; padding: 20px 22px;
}
.manual-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.manual-head h1 { margin: 0; font-size: 20px; letter-spacing: 1px; }
.manual-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.manual-tabs button {
  font-size: 14px; padding: 7px 18px; border-radius: 999px;
  background: #1b2531; color: var(--muted);
}
.manual-tabs button.sel {
  border-color: var(--accent); background: #455A64; color: #fff;
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.manual-body { overflow-y: auto; padding-right: 6px; }
.manual-intro { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 14px; }
.manual-intro b { color: var(--text); }
.manual-sub {
  font-weight: 700; font-size: 14px; margin: 16px 0 8px;
  color: var(--accent); border-left: 3px solid var(--accent); padding-left: 8px;
}
.manual-card {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px; background: rgba(255,255,255,0.02);
}
/* 机甲/怪物卡片：头像与「标题+参数」同一行、头像底部对齐参数行；介绍文字换行后整行左对齐 */
.manual-card.with-avatar { display: block; padding: 10px 12px; }
.mc-top { display: flex; gap: 12px; align-items: flex-end; }
.manual-avatar {
  flex: 0 0 auto; width: 52px; height: 52px;
  border-radius: 10px; border: 2px solid #fff;
  object-fit: cover; background: #0d1117;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
}
.mc-meta { flex: 1; min-width: 0; }
/* 机甲卡片：改用全身立绘——左侧竖版立绘，右侧「标题/参数/介绍」整体成栏 */
.manual-card.with-avatar.has-photo { display: flex; gap: 14px; align-items: flex-start; }
.manual-card.with-avatar .manual-avatar.fullbody {
  width: 104px; height: 140px; object-fit: contain;
  background: #000;
}
.mc-body { flex: 1; min-width: 0; }
.manual-card.with-avatar h3 { margin: 0 0 4px; font-size: 15px; color: #e8eef5; }
.manual-card.with-avatar .tags { color: var(--muted); font-size: 12px; }
.manual-card.with-avatar p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; text-align: left; }
.manual-card .tags { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.manual-card p { margin: 0; font-size: 13px; line-height: 1.65; }
/* 开始战斗：主行动按钮，视觉上区别于模式/人数选择 */
#start-battle {
  margin-top: 4px;
  padding: 10px 32px;
  font-size: 16px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#start-battle:hover { filter: brightness(1.12); }

/* 整备卡片 */
/* 资源点状态条（剩余/总额，超支标红） */
.points-bar {
  position: relative;
  height: 22px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #0b1017;
  overflow: hidden;
  margin-bottom: 6px;
}
.points-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, #7d93ab, #5b6f88);
  transition: width 0.18s ease;
}
.points-text {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.points-bar.over { border-color: #ef4565; }
.points-bar.over .points-text { color: #ef4565; }

#build-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; max-height: 60vh; overflow: auto; }
/* 机甲选择区：单排横向滚动（不折行） */
.mech-picker {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-top: 2px;
}
.mech-picker button { flex: 0 0 auto; white-space: nowrap; }
/* 已选机甲草稿卡：单排横向滚动 */
.draft-row {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
}
/* 隐藏滚动条：改为按住拖动滚动 */
.mech-picker, .draft-row {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧版 Edge/IE */
  cursor: grab;
  user-select: none;
}
.mech-picker::-webkit-scrollbar,
.draft-row::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.mech-picker.dragging, .draft-row.dragging { cursor: grabbing; }
.mech-card {
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  background: #11161d;
}
/* 草稿卡右上角移除按钮 */
.mech-card .rm-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  color: #fff;
  background: rgba(239, 69, 101, 0.85);
  border: none; border-radius: 50%;
  cursor: pointer;
}
.mech-card .rm-x:hover { background: #ef4565; }
.mech-card h4 { margin: 0 0 4px; font-size: 14px; }
.mech-card .stat { font-size: 11px; color: var(--muted); margin: 1px 0; }
/* 武器选单：超出高度时改为内部上下滚动（触摸上下拖动即可），隐藏系统滚动条 */
.mech-card .weps {
  margin-top: 6px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
  overscroll-behavior: contain;        /* 滚到头不牵连外层列表 */
  scrollbar-width: none;               /* Firefox：隐藏滚动条 */
  -ms-overflow-style: none;            /* 旧版 Edge/IE */
  -webkit-user-select: none;
  user-select: none;
  padding-right: 2px;
  padding-bottom: 16px;   /* 内容最末尾的留白 */
}
.mech-card .weps::-webkit-scrollbar { display: none; }   /* Chrome/Safari：隐藏滚动条 */
.mech-card .weps.dragging-v { cursor: grabbing; }

/* 滚动方向提示：包裹层固定不动，边缘小三角仅在可滚动方向显示 */
.mech-picker-wrap, .draft-row-wrap, .weps-wrap { position: relative; }

.mech-picker-wrap::before, .draft-row-wrap::before,
.mech-picker-wrap::after,  .draft-row-wrap::after,
.weps-wrap::before, .weps-wrap::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  pointer-events: none;          /* 不拦截点击/拖拽 */
  opacity: 0;
  transition: opacity .15s;
  z-index: 3;
}
/* 横向：左(指向左) / 右(指向右) */
.mech-picker-wrap::before, .draft-row-wrap::before {
  left: 3px; top: 50%; transform: translateY(-50%);
  border-width: 5px 6px 5px 0;
  border-color: transparent rgba(255,255,255,.4) transparent transparent;
}
.mech-picker-wrap::after, .draft-row-wrap::after {
  right: 3px; top: 50%; transform: translateY(-50%);
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent rgba(255,255,255,.4);
}
.mech-picker-wrap.can-start::before, .draft-row-wrap.can-start::before { opacity: 1; }
.mech-picker-wrap.can-end::after,   .draft-row-wrap.can-end::after   { opacity: 1; }

/* 纵向：上(指向上) / 下(指向下) */
.weps-wrap::before {
  top: 2px; left: 50%; transform: translateX(-50%);
  border-width: 0 5px 6px 5px;
  border-color: transparent transparent rgba(255,255,255,.4) transparent;
}
.weps-wrap::after {
  bottom: 3px; left: 50%; transform: translateX(-50%);
  border-width: 6px 5px 0 5px;
  border-color: rgba(255,255,255,.4) transparent transparent transparent;
}
.weps-wrap.can-start::before { opacity: 1; }
.weps-wrap.can-end::after    { opacity: 1; }

/* 边缘渐隐：仅当对应方向可滚动时（.fade-*）生效，制造视觉留白区容纳提示三角 */
.mech-picker.fade-left,  .draft-row.fade-left  { -webkit-mask-image: linear-gradient(to right, transparent, #000 16px); mask-image: linear-gradient(to right, transparent, #000 16px); }
.mech-picker.fade-right, .draft-row.fade-right { -webkit-mask-image: linear-gradient(to left,  transparent, #000 16px); mask-image: linear-gradient(to left,  transparent, #000 16px); }
.weps.fade-top    { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px); mask-image: linear-gradient(to bottom, transparent, #000 16px); }
.weps.fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%); }
.mech-card label { display: block; font-size: 12px; margin: 2px 0; cursor: pointer; }
.mech-card.owned { border-color: var(--accent); }
.mech-card .mech-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.mech-card .mech-head h4 { margin: 0; }

.hidden { display: none !important; }

/* =========================================================
 * 响应式适配：平板 / 手机
 *  - 窄屏（≤820px）：主区改为上下布局，地图在上、图例/日志在下
 *  - 超窄屏（≤520px）：放大触摸目标、单列整备、悬浮窗自适应宽
 *  - 安全区（刘海/底部条）适配
 * ========================================================= */
@media (max-width: 820px) {
  /* 小屏：body 改为纵向弹性布局，顶栏按内容自适应高度，#app 吃掉剩余空间，
     这样状态信息可换行完整显示，不再因顶栏固定高度而被裁切/溢出 */
  body { display: flex; flex-direction: column; }
  #app { flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; }
  #board-wrap { order: 1; flex: 1 1 auto; min-height: 0; }
  #sidebar {
    order: 2;
    width: 100%;
    max-height: 34vh;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  /* 顶栏：隐藏标题腾出横向空间；状态区自适应占满剩余宽度，文字换行完整显示，
     顶栏高度随内容增长（配合上方 body 纵向 flex，不会裁切也不会挤压棋盘） */
  #topbar {
    flex: 0 0 auto;
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 6px 12px;
    /* 顶部内边距叠加刘海安全区（不支持 env() 的浏览器会忽略此行，回退到上面的 6px） */
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
  }
  #topbar .title { display: none; }        /* 小屏移除「BF 机甲兵棋」标题 */
  #status { flex: 1 1 auto; min-width: 170px; font-size: 12px; line-height: 1.4; }
  #log { font-size: 11px; }
}

@media (max-width: 520px) {
  #topbar { min-height: 44px; padding: 5px 10px;     /* 高度自适应，不再固定 48px */
            padding-top: calc(5px + env(safe-area-inset-top, 0px)); }
  #app { height: auto; }                             /* 由 body 纵向 flex 分配剩余高度 */
  #end-turn, #undo-move { padding: 8px 12px; font-size: 13px; }   /* 两者同规则，保持大小一致 */
  #sidebar { max-height: 30vh; padding: 10px; }
  #zoom-ctrl button { width: 46px; height: 46px; font-size: 26px; }
  #popup { width: min(250px, 92vw); font-size: 13px; }
  .panel { padding: 18px 16px; max-width: 94vw; }
  .panel.wide { max-width: 94vw; }
  .manual-card.with-avatar.has-photo { gap: 10px; }              /* 小屏压缩立绘，给文字留出宽度 */
  .manual-card.with-avatar .manual-avatar.fullbody { width: 84px; height: 113px; }
  button { padding: 10px 16px; font-size: 15px; }   /* 更大触摸目标 */
}

/* 安全区（刘海屏 / 底部手势条） */
@supports (padding: env(safe-area-inset-bottom)) {
  /* 顶栏顶部安全区已在各断点用 calc(… + env(safe-area-inset-top)) 叠加，此处只处理底部 */
  #sidebar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}