/* style.css — 驱逐舰海战 界面样式 */

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

/* 通用隐藏（!important 压过元素自身的 display:flex 等布局规则） */
.hidden { display: none !important; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0B4E7A;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 应用根容器与模拟横屏 ----------
 * --gwu / --gvu = 游戏「逻辑横屏」的 1vw / 1vh 单位：
 *   正常横屏：--gwu = 1vw、--gvu = 1vh（与物理一致）；
 *   竖屏模拟横屏（#app.sim-landscape 整体 rotate 90°）：物理宽高互换，
 *   --gwu = 1vh、--gvu = 1vw，全部尺寸随置换后的逻辑坐标自动生效。
 * 旋转映射：rotate(90deg) + translateY(-100%)（origin 0 0），元素恰铺满竖屏视口。 */
#app {
  position: fixed;
  inset: 0;
  transform-origin: 0 0;
}
#app.sim-landscape {
  width: 100vh;    /* 物理视口高 → 逻辑横屏宽（此处保持物理单位，勿改 --gwu/--gvu） */
  height: 100vw;   /* 物理视口宽 → 逻辑横屏高 */
  transform: rotate(90deg) translateY(-100%);
  --gwu: 1vh;
  --gvu: 1vw;
}

#game-canvas {
  position: fixed;
  left: 0;
  top: 0;               /* 运行时由 renderer 按「信息栏高度」设置（游戏内容不与信息栏重叠） */
  display: block;
}

/* ---------- 顶部信息栏 ----------
 * 高度 = max(safe-top, 基础栏高)：Toy 胶囊安全区内信息栏底部与胶囊底对齐；
 * 非 Toy 环境 safe-top = 0，使用基础栏高。内容贴栏底排布（避开顶部胶囊）。 */
:root { --gwu: 1vw; --gvu: 1vh; --safe-top: 0px; --safe-right: 0px; --ib-h: 46px; --ib-total: 46px; }
#info-bar {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: var(--ib-total);
  /* 右内边距叠加 safeArea.right：横屏时避让右上角胶囊，右侧内容整体左移 */
  padding: 0 calc(var(--safe-right) + calc(1 * var(--gwu))) 3px calc(1 * var(--gwu));
  display: flex;
  align-items: flex-end;
  gap: calc(1.2 * var(--gwu));
  background: linear-gradient(180deg, rgba(7, 26, 40, 0.92), rgba(7, 26, 40, 0.78));
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 8;
  color: #fff;
}
#info-bar.hidden { display: none; }
.ib-left { display: flex; align-items: center; gap: calc(0.6 * var(--gwu)); min-width: 0; }
.ib-avatar {
  width: clamp(24px, calc(var(--ib-h) * 0.62), 34px);
  height: clamp(24px, calc(var(--ib-h) * 0.62), 34px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7FA8C0, #2C4A5E);
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ib-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ib-name {
  font-size: clamp(11px, calc(1.4 * var(--gvu)) + 4px, 14px);
  font-weight: 600;
  max-width: calc(12 * var(--gwu));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ib-center { display: flex; align-items: center; gap: calc(1.4 * var(--gwu)); flex: 1; justify-content: center; min-width: 0; }
/* 生命（爱心） */
.ib-hp { display: flex; align-items: center; gap: 3px; font-size: clamp(12px, calc(1.8 * var(--gvu)) + 4px, 16px); letter-spacing: 1px; }
.ib-hp .hp-full { color: #FF5A6E; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ib-hp .hp-empty { color: rgba(255, 120, 130, 0.35); }
/* 弹药（紧凑：图标 + n/n + 冷却条） */
.ib-ammo { display: flex; align-items: center; gap: calc(1 * var(--gwu)); }
.ib-ammo-item { display: flex; align-items: center; gap: 4px; }
.ib-ammo-icon { width: clamp(13px, calc(2.2 * var(--gvu)) + 3px, 18px); height: clamp(13px, calc(2.2 * var(--gvu)) + 3px, 18px); fill: #E8F4FA; }
.ib-ammo-item.cd-active .ib-ammo-icon { fill: rgba(200, 214, 224, 0.5); }
.ib-ammo-count { font-size: clamp(10px, calc(1.5 * var(--gvu)) + 3px, 13px); font-weight: 700; min-width: 4ch; }
.ib-cd {
  width: clamp(26px, calc(4 * var(--gwu)), 52px);
  height: clamp(4px, calc(0.9 * var(--gvu)) + 2px, 7px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: inline-block;
}
/* 补弹条与释放冷却条上下摆放 */
.ib-bars { display: flex; flex-direction: column; gap: 2px; }
.ib-cd-fill {
  display: block;
  width: 100%; height: 100%;
  border-radius: 999px;
  background: #38D47F;               /* 绿=就绪；冷却中由 JS 切橙色并按比例收缩 */
}
.ib-ammo-item.cd-active .ib-cd-fill { background: #F7941D; }
/* 补给条：空闲时暗灰；补给中蓝色按进度填充 */
.ib-cd-rs-fill { background: rgba(180, 200, 214, 0.35); }
.ib-cd-rs-fill.rs-active { background: #4FC3F7; }
/* 待发弹药为 0：图标/计数红色（不可发射，发射即抖动提醒） */
.ib-ammo-item.empty .ib-ammo-count,
.ib-ammo-item.empty .ib-ammo-icon { color: #FF5A6E; fill: #FF5A6E; }
/* 弹仓不足提醒：红色 + 抖动 */
.ib-ammo-item.deny { animation: ibShake 0.5s ease-in-out; }
.ib-ammo-item.deny .ib-ammo-count,
.ib-ammo-item.deny .ib-ammo-icon { color: #FF5A6E; fill: #FF5A6E; }
@keyframes ibShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
/* 永久状态（增益）图标 */
.ib-buffs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.ib-buff {
  position: relative;
  width: clamp(16px, calc(2.8 * var(--gvu)) + 3px, 22px);
  height: clamp(16px, calc(2.8 * var(--gvu)) + 3px, 22px);
  border-radius: 50%;
  background: rgba(8, 24, 38, 0.85);
  border: 1.5px solid #888;
  color: #ccc;
  font-size: clamp(9px, calc(1.5 * var(--gvu)) + 2px, 12px);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ib-buff .ib-buff-n {
  position: absolute;
  right: -4px; top: -4px;
  min-width: 13px; height: 13px;
  padding: 0 2px;
  border-radius: 999px;
  background: #F7941D;
  color: #fff;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
}
.ib-right { display: flex; align-items: center; gap: calc(0.7 * var(--gwu)); }
.ib-stats { display: flex; gap: calc(0.9 * var(--gwu)); font-size: clamp(10px, calc(1.5 * var(--gvu)) + 3px, 13px); color: #CFE9F5; white-space: nowrap; }
#ib-kills { color: #FFD75E; font-weight: 700; }
.ib-btn {
  width: clamp(28px, calc(var(--ib-h) * 0.66), 36px);
  height: clamp(28px, calc(var(--ib-h) * 0.66), 36px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(8, 24, 38, 0.62);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s ease;
}
.ib-btn:hover { background: rgba(247, 148, 29, 0.45); }
.ib-btn svg { width: 56%; height: 56%; fill: currentColor; }
.ib-btn .hidden { display: none; }

/* ---------- 触屏按钮型控制 ----------
 * 默认（left-move）：左侧=移动按钮，右侧=攻击按钮；right-move 时由 JS 交换左右位置。 */
#touch-controls { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#touch-controls.hidden { display: none; }
.tc-group { position: absolute; bottom: calc(4 * var(--gvu)); display: flex; gap: calc(2.6 * var(--gwu)); pointer-events: none; }
#tc-move { left: calc(4 * var(--gwu)); }
#tc-attack { right: calc(4 * var(--gwu)); flex-direction: row; }
.tc-btn {
  width: clamp(52px, calc(9 * var(--gvu)), 76px);
  height: clamp(52px, calc(9 * var(--gvu)), 76px);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(8, 24, 38, 0.45);
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(18px, calc(3.4 * var(--gvu)), 26px);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.tc-btn:active { background: rgba(247, 148, 29, 0.5); }
/* right-move：交换左右（移动在右、攻击在左） */
#touch-controls.op-right #tc-move { left: auto; right: calc(4 * var(--gwu)); }
#touch-controls.op-right #tc-attack { right: auto; left: calc(4 * var(--gwu)); }

/* ---------- 设置页（统一行高/控件尺寸/对齐） ---------- */
.settings-box { max-width: min(calc(92 * var(--gwu)), 560px); display: flex; flex-direction: column; gap: calc(1.6 * var(--gvu)); align-items: stretch; }
.set-row { display: grid; grid-template-columns: 9.5em 1fr 3.5ch; align-items: center; gap: calc(1.4 * var(--gwu)); min-height: calc(3.6 * var(--gvu)); }
.set-row-col { grid-template-columns: 9.5em 1fr; align-items: center; row-gap: calc(0.8 * var(--gvu)); }
.set-row-col > .set-hint { grid-column: 2; margin-top: 0; }
.set-label { font-size: clamp(12px, calc(1.8 * var(--gwu)), 15px); color: #CFE9F5; flex-shrink: 0; line-height: 1.4; text-align: left; }
.set-slider { grid-column: 2; width: 100%; accent-color: #F7941D; height: calc(3 * var(--gvu)); cursor: pointer; }
.set-val { min-width: 3.5ch; text-align: right; font-weight: 700; font-size: clamp(11px, calc(1.6 * var(--gwu)), 14px); color: #FFD75E; }
.set-hint { font-size: clamp(10px, calc(1.5 * var(--gwu)), 12px); color: #8FB8CC; margin-top: -calc(0.6 * var(--gvu)); line-height: 1.5; text-align: left; }
.seg-group { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(0.8 * var(--gwu)); width: 100%; }
.seg-btn {
  padding: calc(0.9 * var(--gvu)) calc(0.8 * var(--gwu));
  min-height: calc(3.6 * var(--gvu));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #CFE9F5;
  font-size: clamp(11px, calc(1.6 * var(--gwu)), 14px);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn.active {
  background: linear-gradient(180deg, #16AEE0, #009BDF);
  border-color: #6FD1F0;
  color: #fff;
  font-weight: 700;
}
/* PC 键位表：行高与列对齐统一 */
.keybind-grid { display: flex; flex-direction: column; gap: calc(0.6 * var(--gvu)); width: 100%; }
.kb-row { display: grid; grid-template-columns: 1fr 6.5em 6.5em; gap: calc(0.8 * var(--gwu)); align-items: center; min-height: calc(3.6 * var(--gvu)); }
.kb-op { font-size: clamp(11px, calc(1.6 * var(--gwu)), 14px); color: #CFE9F5; text-align: left; }
.kb-key {
  min-height: calc(3.6 * var(--gvu));
  padding: calc(0.4 * var(--gvu)) calc(0.6 * var(--gwu));
  border-radius: calc(0.6 * var(--gvu));
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: clamp(10px, calc(1.5 * var(--gwu)), 13px);
  cursor: pointer;
}
.kb-key.listening { border-color: #F7941D; background: rgba(247, 148, 29, 0.25); }
#btn-settings-close { align-self: center; margin-top: calc(0.6 * var(--gvu)); min-width: 12em; }

/* ---------- 覆盖层 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 30, 48, 0.72);
  backdrop-filter: blur(3px);
  z-index: 10;
}
.overlay.hidden { display: none; }

.title-box {
  width: min(calc(92 * var(--gwu)), 860px);
  max-height: calc(92 * var(--gvu));
  overflow: hidden;
  overflow-y: auto;
  padding: calc(2.2 * var(--gvu)) calc(2.4 * var(--gwu));
  text-align: center;
  color: #fff;
}

.game-title {
  font-size: min(calc(6 * var(--gwu)), 44px);
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 2px 0 #0E5E8C, 0 4px 14px rgba(0,0,0,0.4);
}
.game-subtitle {
  margin-top: calc(0.4 * var(--gvu));
  font-size: min(calc(2.2 * var(--gwu)), 15px);
  color: #9FD8F0;
  letter-spacing: 0.35em;
}

/* ---------- 操作说明 ---------- */
.help-grid {
  display: flex;
  gap: calc(1.2 * var(--gwu));
  margin: calc(2.4 * var(--gvu)) auto calc(1.2 * var(--gvu));
  text-align: left;
}
.help-col {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: calc(1.6 * var(--gvu)) calc(1.1 * var(--gwu));
  font-size: min(calc(1.7 * var(--gwu)), 13px);
  line-height: 1.55;
}
.help-col-mid { text-align: center; }
.help-col-title {
  font-weight: 700;
  font-size: min(calc(2 * var(--gwu)), 15px);
  color: #F7941D;
  margin-bottom: calc(1 * var(--gvu));
  text-align: center;
}
.key-row { display: flex; align-items: center; gap: 8px; margin-bottom: calc(1 * var(--gvu)); }
.key {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #cfd8de);
  color: #16323f;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 0 #7e8b93;
  flex-shrink: 0;
}
.help-line { margin: calc(0.5 * var(--gvu)) 0; }
.help-warn { color: #FF9A7A; font-weight: 700; margin-top: calc(1 * var(--gvu)); }
.help-touch { color: #9FD8F0; font-size: min(calc(1.5 * var(--gwu)), 12px); margin-top: calc(0.8 * var(--gvu)); display: flex; align-items: center; gap: calc(0.6 * var(--gwu)); flex-wrap: wrap; }
.help-fx { width: min(calc(3.4 * var(--gwu)), 34px); height: auto; flex-shrink: 0; }
.help-keyboard { color: #B9D9E8; font-size: min(calc(1.7 * var(--gwu)), 13px); margin: calc(0.6 * var(--gvu)) 0 calc(2 * var(--gvu)); }

/* ---------- 按钮 ---------- */
.btn-primary {
  display: inline-block;
  padding: calc(1.4 * var(--gvu)) calc(4 * var(--gwu));
  font-size: min(calc(2.6 * var(--gwu)), 20px);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #16AEE0, #009BDF);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.2em;
  box-shadow: 0 4px 0 #006D9C, 0 8px 20px rgba(0,0,0,0.35);
  transition: transform 0.08s ease;
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #006D9C; }

/* ---------- 卡牌（尺寸以 vw 为主，随屏幕宽度自适应） ---------- */
.overlay-title-text { font-size: clamp(18px, calc(3.6 * var(--gwu)), 34px); letter-spacing: 0.1em; }
.overlay-title-text.warn { color: #F7941D; }
.overlay-subtitle { color: #9FD8F0; margin: calc(1 * var(--gvu)) 0 calc(2.4 * var(--gvu)); font-size: clamp(11px, calc(1.8 * var(--gwu)), 17px); }
.card-list {
  display: flex;
  gap: calc(2 * var(--gwu));
  justify-content: center;
  margin-bottom: calc(1.4 * var(--gvu));
}
/* 卡牌宽高双约束：宽度 ≤ calc(23 * var(--gwu))（3 张 + 间距 < 面板宽，杜绝横向滚动条），
   高度经 3:4 比例折算 ≤ calc(34 * var(--gvu))（标题 + 卡牌 + 按钮不超出视口，杜绝纵向滚动条） */
.gain-card {
  width: min(calc(23 * var(--gwu)), calc(34 * var(--gvu)));
  aspect-ratio: 3 / 4;
  background: linear-gradient(165deg, #1B5F86, #0D3B57);
  border: 2px solid #4FC3F7;
  border-radius: calc(1.1 * var(--gwu));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(1 * var(--gvu));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  padding: calc(1.4 * var(--gvu)) calc(1 * var(--gwu));
  position: relative;
  overflow: hidden;
  text-align: left;
}
.gain-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 30px rgba(79, 195, 247, 0.35);
}
/* 稀有度外观：R 蓝 / SR 紫 / SSR 金 */
.gain-card.rarity-R { border-color: #4FC3F7; }
.gain-card.rarity-R:hover { box-shadow: 0 10px 30px rgba(79, 195, 247, 0.35); }
.gain-card.rarity-SR { border-color: #CE93D8; background: linear-gradient(165deg, #4A3A6E, #1B2450); }
.gain-card.rarity-SR:hover { box-shadow: 0 10px 30px rgba(206, 147, 216, 0.4); }
.gain-card.rarity-SSR { border-color: #FFD54F; background: linear-gradient(165deg, #6E5518, #1B2450); }
.gain-card.rarity-SSR:hover { box-shadow: 0 10px 34px rgba(255, 213, 79, 0.5); }
/* 选中态：亮边 + 抬升 + 角标勾 */
.gain-card.selected {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 12px 32px rgba(124, 242, 156, 0.35);
  border-color: #7CF29C;
}
.gain-card.selected .gc-check { opacity: 1; transform: scale(1); }
.gc-check {
  position: absolute;
  top: calc(0.8 * var(--gvu)); left: calc(0.9 * var(--gwu));
  width: clamp(18px, calc(2.4 * var(--gvu)), 26px); height: clamp(18px, calc(2.4 * var(--gvu)), 26px);
  border-radius: 50%;
  background: #38D47F;
  color: #06281A;
  font-weight: 900;
  font-size: clamp(11px, calc(1.6 * var(--gvu)), 15px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
/* 卡头：专属图标 + 稀有度/名称 */
.gc-top { display: flex; align-items: center; gap: calc(0.9 * var(--gwu)); }
.gc-head { display: flex; flex-direction: column; gap: calc(0.3 * var(--gvu)); min-width: 0; }
.gain-card-icon {
  width: clamp(40px, calc(7 * var(--gvu)), 58px);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 20%;
  background: radial-gradient(circle at 35% 30%, #3E5A6C, #14242F);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  color: #DCE9F2;
  overflow: hidden;
}
.gain-card-icon svg { width: 100%; height: 100%; }
.gain-card-rarity {
  font-size: clamp(9px, calc(1.3 * var(--gwu)), 12px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
}
.gain-card-name {
  font-weight: 800;
  font-size: clamp(12px, calc(1.8 * var(--gwu)), 18px);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* 功能描述 */
.gain-card-desc {
  font-size: clamp(9px, calc(1.2 * var(--gwu)), 12px);
  color: #B9D9E8;
  line-height: 1.45;
  flex: 1;
  min-height: 0;
}
/* 获得后：数值变化（当前 → 提升），绿色高亮 */
.gc-eff {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(0.7 * var(--gwu));
  padding: calc(0.6 * var(--gvu)) calc(0.7 * var(--gwu));
}
.gc-eff-title {
  font-size: clamp(8.5px, calc(1.05 * var(--gwu)), 11px);
  font-weight: 700;
  color: #FFD75E;
  letter-spacing: 0.12em;
  margin-bottom: calc(0.3 * var(--gvu));
}
/* 获得后数值：单独一行凸显（只展示增减值） */
.gc-eff-val {
  font-size: clamp(11px, calc(1.6 * var(--gwu)), 17px);
  font-weight: 800;
  color: #7CF29C;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: break-word;
  text-shadow: 0 1px 6px rgba(124, 242, 156, 0.28);
}
/* 可加倍标记（无持有上限卡） */
.gc-tag {
  position: absolute;
  bottom: 0; right: 0;
  font-size: clamp(8px, calc(1 * var(--gwu)), 10px);
  font-weight: 700;
  color: #0B2A3C;
  background: #7CF29C;
  border-radius: calc(0.7 * var(--gwu)) 0 0 0;
  padding: calc(0.25 * var(--gvu)) calc(0.8 * var(--gwu));
  letter-spacing: 0.08em;
}

/* ---------- 选卡底部三按钮：重新抽卡 / 确认选卡 / 加倍 ---------- */
.card-actions {
  display: flex;
  gap: calc(1.6 * var(--gwu));
  justify-content: center;
  align-items: center;
  margin-top: calc(0.4 * var(--gvu));
}
.card-actions .btn-secondary { min-width: calc(13 * var(--gwu)); }
.card-actions .btn-primary { min-width: calc(13 * var(--gwu)); }
#btn-reroll.hidden { display: none; }
#btn-reroll:disabled, #btn-confirm-card:disabled, #btn-boost:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
#btn-confirm-card.double {
  background: linear-gradient(180deg, #45D98A, #1FA966);
  box-shadow: 0 4px 0 #157A4A, 0 8px 20px rgba(56, 212, 127, 0.35);
}
/* 加倍按钮：未关注=普通加倍（青），已关注=超级加倍（金） */
.boost-btn { border-color: rgba(79, 195, 247, 0.6); color: #9FE0FA; }
.boost-btn:not(:disabled):hover { background: rgba(79, 195, 247, 0.18); }
.boost-btn.boost-super {
  border-color: rgba(255, 213, 79, 0.65);
  color: #FFE082;
}
.boost-btn.boost-super:not(:disabled):hover { background: rgba(255, 213, 79, 0.15); }

/* 关注/充电确认框 */
.follow-box { max-width: min(calc(92 * var(--gwu)), 620px); }
.follow-actions { display: flex; gap: calc(2 * var(--gwu)); justify-content: center; margin-top: calc(1 * var(--gvu)); }
/* 长文案（充电免责声明）：左对齐、限高滚动，保证底部按钮始终可见 */
.overlay-subtitle.confirm-long {
  text-align: left;
  max-height: calc(44 * var(--gvu));
  overflow-y: auto;
  margin: calc(1 * var(--gvu)) 0 calc(1.6 * var(--gvu));
  padding-right: calc(0.6 * var(--gwu));
  line-height: 1.62;
}
.overlay-subtitle.confirm-long p { margin: 0 0 calc(0.9 * var(--gvu)); }
.overlay-subtitle.confirm-long p:last-child { margin-bottom: 0; }

/* 信息栏增益角标内嵌专属图标 */
.ib-buff .ib-buff-icon { width: 72%; height: 72%; display: flex; align-items: center; justify-content: center; line-height: 1; }
.ib-buff .ib-buff-icon svg { width: 100%; height: 100%; }

/* 低高度横屏（手机横屏常见 ≤ 480px）：整体压缩纵向空间，杜绝滚动条 */
@media (max-height: 480px) {
  .title-box { max-height: calc(96 * var(--gvu)); padding: calc(1.2 * var(--gvu)) calc(2.4 * var(--gwu)); overflow: hidden; }
  .overlay-title-text { font-size: clamp(15px, calc(2.6 * var(--gvu)), 26px); }
  .overlay-subtitle { margin: calc(0.6 * var(--gvu)) 0 calc(1.2 * var(--gvu)); }
  .card-list { gap: calc(1.6 * var(--gwu)); margin-bottom: calc(1 * var(--gvu)); }
  .gain-card { width: min(calc(22 * var(--gwu)), calc(33 * var(--gvu))); gap: calc(0.6 * var(--gvu)); padding: calc(1 * var(--gvu)) calc(0.9 * var(--gwu)); }
  .gain-card-icon { width: clamp(34px, calc(6 * var(--gvu)), 48px); }
  .gain-card-desc { line-height: 1.3; }
  .gc-eff { padding: calc(0.4 * var(--gvu)) calc(0.6 * var(--gwu)); }
  .card-actions { gap: calc(1.2 * var(--gwu)); }
  .card-actions .btn-secondary, .card-actions .btn-primary { min-width: calc(15 * var(--gwu)); padding: calc(0.8 * var(--gvu)) calc(1.6 * var(--gwu)); font-size: min(calc(2 * var(--gwu)), 14px); }
}

/* ---------- 新敌人预警（独立面板） ---------- */
.warning-box { max-width: min(calc(88 * var(--gwu)), 560px); }
.intel-name { font-size: clamp(13px, calc(2.6 * var(--gwu)), 25px); font-weight: 800; color: #FFD75E; margin: calc(1.2 * var(--gvu)) 0 calc(0.9 * var(--gvu)); }
.intel-desc { font-size: clamp(10px, calc(1.7 * var(--gwu)), 16px); line-height: 1.7; color: #E5F3FA; margin-bottom: calc(2.2 * var(--gvu)); }

/* ---------- 暂停击毁数 ---------- */
.pause-kills-line { font-size: clamp(13px, calc(2.2 * var(--gwu)), 20px); font-weight: 700; color: #FFD75E; }

/* ---------- 暂停 ---------- */
.pause-box { max-width: min(calc(92 * var(--gwu)), 560px); display: flex; flex-direction: column; gap: calc(1.6 * var(--gvu)); align-items: center; }
/* 暂停页内嵌双榜（直显，不经按钮跳转） */
.rank-cols-pause .rank-list { max-height: calc(22 * var(--gvu)); }
.rank-cols-pause { margin-bottom: 0; }
.btn-secondary {
  display: inline-block;
  padding: calc(1 * var(--gvu)) calc(3 * var(--gwu));
  font-size: min(calc(2.2 * var(--gwu)), 16px);
  font-weight: 600;
  color: #CFE9F5;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.15em;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- 结算 ---------- */
.stats-row { display: flex; gap: calc(3 * var(--gwu)); justify-content: center; margin: calc(2.4 * var(--gvu)) 0 calc(1.4 * var(--gvu)); }
.stat-num { font-size: min(calc(7 * var(--gwu)), 46px); font-weight: 900; color: #F7941D; text-shadow: 0 3px 10px rgba(0,0,0,0.4); }
.stat-label { font-size: min(calc(1.9 * var(--gwu)), 13px); color: #B9D9E8; margin-top: calc(0.4 * var(--gvu)); }
.rank-info { color: #9FD8F0; font-size: min(calc(2 * var(--gwu)), 14px); min-height: 1.6em; margin-bottom: calc(1.2 * var(--gvu)); }

/* ---------- 排行榜（关卡榜 / 击毁榜 左右并排） ---------- */
.rank-cols { display: flex; gap: calc(2.4 * var(--gwu)); width: 100%; margin-bottom: calc(1.6 * var(--gvu)); }
.rank-col {
  flex: 1; min-width: 0;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(0.9 * var(--gwu));
  padding: calc(1 * var(--gvu)) calc(0.9 * var(--gwu));
}
.rank-col-title {
  font-size: clamp(11px, calc(1.8 * var(--gwu)), 16px);
  font-weight: 800;
  color: #FFD75E;
  letter-spacing: 0.12em;
  margin-bottom: calc(0.8 * var(--gvu));
  text-align: center;
}
.rank-list { max-height: calc(36 * var(--gvu)); overflow-y: auto; }
#rank-cols-over .rank-list { max-height: calc(24 * var(--gvu)); }   /* 结算页空间有限，压缩榜单高度 */
.rank-row {
  display: flex; align-items: center; gap: calc(0.8 * var(--gwu));
  font-size: clamp(10px, calc(1.5 * var(--gwu)), 14px);
  color: #DCEEF8;
  padding: calc(0.45 * var(--gvu)) calc(0.3 * var(--gwu));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.rank-row:last-child { border-bottom: none; }
.rk-no { width: 2.2em; text-align: center; color: #9FD8F0; font-weight: 700; flex-shrink: 0; }
.rank-row.rank-top .rk-no { color: #FFD75E; font-weight: 800; }
.rk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-score { color: #F7941D; font-weight: 700; flex-shrink: 0; }
.rank-row.rank-empty { justify-content: center; color: #8FB8CC; }

/* ---------- 竖屏提示 ---------- */
#overlay-rotate { background: #0A3A58; z-index: 99; flex-direction: column; gap: calc(2 * var(--gvu)); }
.rotate-icon { font-size: 54px; }
.rotate-title { color: #fff; font-size: 24px; font-weight: 700; }
.rotate-sub { color: #9FD8F0; font-size: 14px; }

/* 手机窄屏下说明布局保持三列（横屏强制），字号已按 vw 缩放 */
@media (max-width: 700px) {
  .help-grid { gap: 6px; }
  .help-col { padding: 8px 6px; }
}