/* ============================================================
   卫戍协议 —— 莱茵生命（Rhine Lab）风格改造
   纯白 + 暖灰点阵 · 柠檬黄 #9b7247 唯一强调 · 直角矩形
   无阴影 / 无渐变 / 无毛玻璃 / 圆角 ≤ 4px
   继承 ../rhine.css 设计系统；仅覆盖游戏内容，不改任何 JS。
   ============================================================ */
:root {
  /* 复用 rhine.css 语义变量，便于本页内统一引用 */
  --rhine-bg: #eae5e1;
  --rhine-panel: #edebe4;
  --rhine-panel2: #e7e3d9;
  --rhine-ink: #080a08;
  --rhine-body: #45443c;
  --rhine-mute: #77756d;
  --rhine-line: #bdb8ad;
  --rhine-line-strong: #a6a49c;
  --rhine-accent: #9b7247;
  --rhine-accent-ink: #eae5e1;
  /* 暖灰点阵纹理（同 rhine.css） */
  --rhine-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='0.75' fill='%23d8d2c6'/%3E%3C/svg%3E");
}

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

body {
  font-family: var(--rl-font-body);
  /* 背景交给 rhine.css（纯白 + 暖灰点阵）；此处不再声明深色太空背景 */
  color: var(--rhine-body);
  min-height: 100vh;
  overflow-x: hidden;
}

.page {
  display: flex;
  gap: 14px;
  padding: 14px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  /* 必须不透明：覆盖并隐藏 dyson-bg.js 的深色太空画布，呈现纯白 + 暖灰纹理 */
  background-color: var(--rhine-bg);
  background-image: var(--rhine-dot);
  background-repeat: repeat;
}

/* ---------- 顶部主标题区：标志 + 粗体全大写 ---------- */
.welcome h2 {
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rhine-ink);
}
/* 副标题（JS 渲染的 <p>）：极细全大写副标，暖灰 */
.welcome p {
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--rhine-mute);
  margin-bottom: 26px;
}

/* ---------- 左侧面板（欢迎/作战主面板） ---------- */
.side-panel {
  flex: 1;
  min-width: 0;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 28px);
  position: relative;
  box-shadow: none;
}

.action-panel {
  flex: none;
  width: 172px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;
  position: sticky;
  top: 14px;
}

/* ---------- 主操作按钮：直角矩形，白底黑字，hover 反色 ---------- */
.action-btn {
  width: 100%;
  padding: 13px 10px;
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-ink);
  border-radius: 0;
  color: var(--rhine-ink);
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}
.action-btn:hover { background: var(--rhine-accent); border-color: var(--rhine-accent); color: var(--rhine-accent-ink); transform: none; }
.action-btn.primary {
  background: var(--rhine-ink);
  border-color: var(--rhine-ink);
  color: #eae5e1;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 15px 10px;
}
.action-btn.primary:hover { background: var(--rhine-accent); border-color: var(--rhine-accent); color: var(--rhine-accent-ink); }

.back-link {
  display: block;
  text-align: center;
  color: var(--rhine-mute);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 8px;
  border-bottom: 1px solid transparent;
}
.back-link:hover { color: var(--rhine-accent); border-bottom-color: var(--rhine-accent); }

/* ---------- 欢迎区 ---------- */
.welcome { text-align: center; padding: 40px 20px; }
.big-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 2px;               /* 直角矩形徽标 */
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--rhine-accent);
  background: var(--rhine-bg);
  border: 2px solid var(--rhine-accent);
  box-shadow: none;                 /* 去发光 */
  margin-bottom: 18px;
}
.welcome p { color: var(--rhine-mute); margin-bottom: 26px; font-size: 0.95rem; }
.welcome .hint { color: var(--rhine-mute); font-size: 0.82rem; }

/* ---------- 弹窗：白色直角卡片 ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(250, 248, 246, 0.86);   /* 浅暖灰蒙版，不再深色 */
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.active { display: flex; }
.modal-box {
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-top: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 20px;
  width: 560px;
  max-width: 96vw;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: none;                 /* 无阴影 */
}
.modal-box.wide { width: 860px; }
.modal-box h3 {
  color: var(--rhine-ink);
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--rhine-accent);
  padding-bottom: 10px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 1px solid transparent;
  color: var(--rhine-mute);
  font-size: 1.05rem;
  cursor: pointer;
}
.modal-close:hover { color: var(--rhine-accent); border-color: var(--rhine-accent); }
.modal-tip { font-size: 0.76rem; color: var(--rhine-accent); margin-bottom: 10px; }

/* ---------- 模式卡片 ---------- */
.mode-card {
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mode-card:hover { border-color: var(--rhine-accent); background: var(--rhine-bg); }
.mode-card.locked { opacity: 0.55; cursor: not-allowed; }
.mode-name { font-size: 1rem; color: var(--rhine-ink); font-weight: 700; margin-bottom: 6px; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
.mode-lock { font-size: 0.78rem; color: var(--rhine-mute); }
.mode-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--rhine-mute); margin-top: 4px; }
.mode-row b { color: var(--rhine-accent); }

/* ---------- 策略卡片 ---------- */
.strategy-card {
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.strategy-card:hover { border-color: var(--rhine-accent); background: var(--rhine-bg); }
.sc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sc-name { font-size: 1rem; color: var(--rhine-ink); font-weight: 700; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-org { font-size: 0.7rem; color: var(--rhine-mute); }
.sc-life { font-size: 0.76rem; color: var(--rhine-accent); margin-bottom: 4px; }
.sc-desc { font-size: 0.76rem; color: var(--rhine-body); line-height: 1.5; }

/* ---------- 回合强化卡片 ---------- */
.up-tip { font-size: 0.8rem; color: var(--rhine-accent); margin-bottom: 10px; }
.up-card {
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.up-card:hover { border-color: var(--rhine-accent); background: var(--rhine-bg); }
.up-name { font-size: 0.95rem; color: var(--rhine-ink); font-weight: 700; margin-bottom: 4px; }
.up-desc { font-size: 0.76rem; color: var(--rhine-body); }

/* ---------- 对局界面 ---------- */
/* 分屏结构：顶栏（.top-status）全宽通栏，下方 .ws-split 把主区与右侧详情并排。
   栅格用 1fr + 固定 248px 而不是 flex:1 —— 主区内容（九宫格卡池、舰队行）宽度
   随内容变，给它 1fr 才能保证右栏宽度稳定、两个回合之间不跳。 */
.game-header { display: flex; flex-direction: column; gap: 12px; }
.ws-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 12px;
  align-items: start;
}
/* 战斗期右栏已不渲染（.ws-side 不存在），单列让战场铺满宽度 */
.ws-split.no-side { grid-template-columns: minmax(0, 1fr); }
.ws-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }

/* 窄屏收成单列：右栏内容顺序下移，不做横向滚动 */
@media (max-width: 900px) {
  .ws-split { grid-template-columns: minmax(0, 1fr); }
  .ws-side { position: static; }
}
.top-status {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.faction-bar { display: flex; align-items: center; gap: 8px; min-width: 150px; flex: 1; }
.fb-name { font-size: 0.72rem; color: var(--rhine-ink); white-space: nowrap; }
.fb-track {
  flex: 1;
  height: 8px;
  background: var(--rhine-panel2);
  border: 1px solid var(--rhine-line);
  border-radius: 0;
  overflow: hidden;
}
.fb-fill {
  height: 100%;
  background: var(--rhine-accent);   /* 实心柠檬黄，去渐变 */
  transition: width 0.4s;
}
.fb-num { font-size: 0.78rem; color: var(--rhine-ink); min-width: 30px; text-align: right; }

.my-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mb-row { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; }
.mb-label { color: var(--rhine-mute); }
.mb-val { color: var(--rhine-ink); font-weight: 700; }

/* ---------- 细直线状态条（护盾/生命） ---------- */
.shield-bar, .life-bar {
  width: 90px;
  height: 6px;
  background: var(--rhine-panel2);
  border: 1px solid var(--rhine-line);
  border-radius: 0;
  overflow: hidden;
}
.shield-bar .fill { height: 100%; background: var(--rhine-ink); }        /* 深灰 */
.life-bar .fill { height: 100%; background: var(--rhine-accent); }       /* 柠檬黄 */

/* ---------- 战况滚动条 ---------- */
.news-ticker {
  font-size: 0.76rem;
  color: var(--rhine-body);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 6px 10px;
  max-height: 64px;
  overflow: hidden;
}
.nt-item.good { color: #62805a; }     /* 语义色保留，去发光 */
.nt-item.bad { color: #a8503f; }
.nt-item.warn { color: #9b7247; }

/* ---------- 货舱/编组面板 ---------- */
.barge-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.bp-title { font-size: 0.9rem; color: var(--rhine-ink); font-weight: 700; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
.bp-stats { display: flex; gap: 14px; font-size: 0.76rem; color: var(--rhine-mute); flex-wrap: wrap; }

.prep-fleet { background: var(--rhine-panel2); border: 1px solid var(--rhine-line); border-radius: 2px; padding: 10px; }
.pf-title { font-size: 0.8rem; color: var(--rhine-ink); font-weight: 700; margin-bottom: 8px; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
/* 手牌区默认折叠：HAND_LIMIT 已取消（对局中买舰不限数量），编组会随买舰
   无限变长，不折叠会把整条右栏顶出视口。
   标题本身做成 button —— 原生可聚焦、回车可开合，且文字仍是
   「我方编组（手牌区）」一字未改；箭头走 ::before，不进 textContent。
   展开态存 JS 的 prepFleetOpen，因为 renderPrep 每次买舰都整块重绘。 */
button.pf-title {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer;
}
button.pf-title::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: currentColor;
  margin-right: 6px;
  vertical-align: middle;
  transition: transform .15s ease;
}
.prep-fleet.open button.pf-title::before { transform: rotate(90deg); }
/* 收起时去掉标题下边距，让这一块只剩标题一行 */
.prep-fleet:not(.open) button.pf-title { margin-bottom: 0; }
.pf-body { display: none; }
.prep-fleet.open .pf-body { display: block; }
.pool-section, .hand-section { background: var(--rhine-panel2); border: 1px solid var(--rhine-line); border-radius: 2px; padding: 10px; }

/* 补给池搬到右下横条（参照参考项目的 .shopbar：right/bottom 绝对定位、
   只占一条横带、不改变页面布局）。
   position:fixed 让它脱离文档流 —— DOM 仍留在 ws-main 里，无需移动节点，
   视觉上落在视口右下；只在备战期存在（battle 期不渲染 pool-section），
   因此等价于参考里「备战期才出现」的行为。
   手牌区 .hand-section 共用上面的规则，此处单独覆盖，不影响它。 */
.pool-section {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12;                       /* 面板档（8-12），低于模态 70 */
  max-width: calc(100vw - 36px);
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-top: 2px solid var(--rhine-accent);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);
  padding: 10px 14px 12px;
}
/* 只有存在补给池的那一页才在底部留白，战斗期不匹配就不会白空一段 */
.game-header:has(> .ws-split > .ws-main > .pool-section) { padding-bottom: 176px; }
/* 横条里卡片横排不换行，超出横向滚动，保证条形高度固定 */
.pool-section .pool-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.pool-section .pool-card { flex: 0 0 176px; min-width: 176px; }

/* 商店条右端的资金（参考 .funds 的位置）：与 HUD 里的资金同源，
   由 updateHudTop 一并定点刷新，不额外引入更新路径 */
.shop-funds {
  font-size: 0.76rem;
  color: var(--rhine-mute);
  border-left: 1px solid var(--rhine-line);
  padding-left: 10px;
  margin-left: 4px;
  white-space: nowrap;
}
.shop-funds b { font-size: 0.92rem; color: var(--rhine-ink); font-variant-numeric: tabular-nums; }

.pool-head, .hand-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--rhine-ink);
  font-weight: 700;
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pool-list, .hand-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 池/手牌卡片 ---------- */
.pool-card {
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 8px 10px;
  cursor: pointer;
  min-width: 150px;
  flex: 1 1 160px;
  transition: border-color 0.15s ease;
}
.pool-card:hover { border-color: var(--rhine-accent); transform: none; }
.pc-name { font-size: 0.8rem; color: var(--rhine-ink); margin-bottom: 3px; }
.pc-stats { font-size: 0.68rem; color: var(--rhine-mute); }
.pc-price { font-size: 0.72rem; color: var(--rhine-accent); margin-top: 4px; }
.pool-empty { font-size: 0.74rem; color: var(--rhine-mute); padding: 10px; }

.hand-card {
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 7px 9px;
  position: relative;
  min-width: 110px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.hand-card:hover { border-color: var(--rhine-accent); }
.hand-card.elite { border-left-color: var(--rhine-accent); border-color: var(--rhine-accent); box-shadow: none; }  /* 去发光 */
.hand-card .hc-tag {
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 0.55rem;
  color: var(--rhine-accent-ink);
  background: var(--rhine-accent);
  border-radius: 2px;
  padding: 1px 4px;
}
.hc-name { font-size: 0.76rem; color: var(--rhine-ink); }
.hc-cls { font-size: 0.64rem; color: var(--rhine-mute); margin-bottom: 4px; }
.hc-lv { font-size: 0.6rem; color: var(--rhine-accent); }

/* ---------- 通用按钮 ---------- */
.btn-action {
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-ink);
  border-radius: 0;
  color: var(--rhine-ink);
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}
.btn-action:hover { background: var(--rhine-accent); border-color: var(--rhine-accent); color: var(--rhine-accent-ink); }
.btn-action.primary-btn {
  background: var(--rhine-ink);
  border-color: var(--rhine-ink);
  color: #eae5e1;
  font-weight: 700;
  font-size: 0.82rem;
}
.btn-action.primary-btn:hover { background: var(--rhine-accent); border-color: var(--rhine-accent); color: var(--rhine-accent-ink); }
.btn-action.tiny { font-size: 0.66rem; padding: 4px 8px; }
.btn-action.small { font-size: 0.7rem; padding: 5px 10px; }
.btn-action.danger { background: var(--rhine-bg); border-color: #a8503f; color: #a8503f; }
.btn-action.danger:hover { background: #a8503f; border-color: #a8503f; color: #eae5e1; }

.action-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- 编组行 ---------- */
.fleet-rows { display: flex; flex-direction: column; gap: 10px; }
.fleet-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 6px 8px;
  min-height: 74px;
}
.row-label {
  flex: none;
  writing-mode: vertical-lr;
  font-size: 0.66rem;
  color: var(--rhine-mute);
  letter-spacing: 2px;
  text-align: center;
  padding: 2px 2px;
  border-right: 1px dashed var(--rhine-line-strong);
}
.row-cards { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
.row-empty { color: var(--rhine-mute); font-size: 0.72rem; padding: 10px 4px; }

.prep-card {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 6px 10px;
  min-width: 150px;
}
.prep-card.elite { border-color: var(--rhine-accent); box-shadow: none; }
.prep-card .fc-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 2px;                /* 直角徽标 */
}
.prep-card-info { min-width: 0; }
.pci-name { font-size: 0.76rem; color: var(--rhine-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pci-stats { font-size: 0.64rem; color: var(--rhine-mute); }

/* 我方/敌方识别徽标（内容标识，保留明暗区分） */
.ft-tag {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 2px;
  font-size: 0.68rem;
  margin-right: 6px;
  vertical-align: 1px;
}
.ft-tag.my { background: var(--rhine-accent); color: var(--rhine-accent-ink); }   /* 我方：柠檬黄 */
.ft-tag.en { background: var(--rhine-ink); color: #eae5e1; }                          /* 敌方：深灰 */

/* ---------- 战斗界面 ---------- */
.battle-layout { position: relative; }
.battle-view { display: flex; gap: 10px; align-items: stretch; }
.fleet-panel {
  flex: 1;
  min-width: 0;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 10px;
}
/* 敌我区分：细线 + 柠檬黄标记（我方）/ 深灰标记（敌方） */
.fleet-panel.left { border-left: 3px solid var(--rhine-accent); }
.fleet-panel.right { border-left: 3px solid var(--rhine-ink); }
.fleet-title {
  font-size: 0.82rem;
  color: var(--rhine-ink);
  margin-bottom: 8px;
  font-weight: 700;
  font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fleet-panel.left .fleet-title { color: var(--rhine-accent); }
.fleet-panel.right .fleet-title { color: var(--rhine-ink); }
.fp-cnt { color: var(--rhine-mute); font-size: 0.7rem; }

.battle-center {
  flex: none;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bc-info { font-size: 0.76rem; color: var(--rhine-mute); text-align: center; }
.bc-info b { color: var(--rhine-accent); font-size: 1.1rem; }
.bc-log {
  flex: 1;
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 8px;
  font-size: 0.66rem;
  overflow-y: auto;
  max-height: 320px;
}
.bc-line { margin: 2px 0; color: var(--rhine-body); }
.bc-line.atk-my { color: var(--rhine-accent); }        /* 我方行动：柠檬黄 */
.bc-line.atk-en { color: #a8503f; }                    /* 敌方行动：哑红（内容语义） */
.bc-line .atk-arrow { color: var(--rhine-mute); margin: 0 3px; }
.bc-line .atk-dmg { color: var(--rhine-accent); font-weight: 700; }
.bc-line .atk-dmg.crit { color: #a8503f; }
.bc-hint { font-size: 0.72rem; color: var(--rhine-mute); text-align: center; }

.battle-clock {
  position: absolute;
  top: 76px;
  right: 14px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--rhine-accent);
  text-shadow: none;                 /* 去发光 */
  z-index: 3;
}
@keyframes clockPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- 舰队卡片 ---------- */
.fleet-card {
  position: relative;
  flex: 1 1 170px;
  max-width: 250px;
  min-width: 155px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 8px 10px 7px;
  overflow: hidden;
  box-shadow: none;
}
.fc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* 联机联合舰队：左缘玩家色条 + 名字前缀。单人局不产生这些节点。 */
.fc-owner {
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 30px;
  margin-right: -2px;
}
.fc-owner-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 2px;
  white-space: nowrap;
}
/* 联机卡面留出左缘色条的位置，避免与 .fc-icon 贴在一起 */
.fleet-card.coop { padding-left: 12px; border-left-width: 2px; }
.fc-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 2px;                /* 直角徽标 */
  box-shadow: none;                  /* 去内阴影 */
}
.fc-id { flex: 1; min-width: 0; }
.fc-name { font-size: 0.78rem; color: var(--rhine-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cls { font-size: 0.66rem; opacity: 0.9; margin-top: 1px; }
.fc-bar { display: flex; flex-direction: column; gap: 3px; }
.fc-hp { height: 6px; background: var(--rhine-panel2); border: 1px solid var(--rhine-line); border-radius: 0; overflow: hidden; }
/* 血条：实心无渐变（我方柠檬黄/敌方哑红，便于内容识别） */
.fc-hp .fill { height: 100%; background: var(--rhine-accent); transition: width 0.15s linear; }
.fc-shield { height: 4px; background: var(--rhine-panel2); border: 1px solid var(--rhine-line); border-radius: 0; overflow: hidden; }
.fc-shield .fill { height: 100%; background: var(--rhine-ink); transition: width 0.15s linear; }
.fc-hpnum { font-size: 0.66rem; color: var(--rhine-mute); margin-top: 3px; font-variant-numeric: tabular-nums; }
.fc-mini { font-size: 0.62rem; color: var(--rhine-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 敌方舰卡：暖灰底 + 深灰色块标记 */
.fleet-card.enemy { background: var(--rhine-panel2); border-color: var(--rhine-line-strong); border-left-color: var(--rhine-ink); }
.fleet-card.enemy .fc-hp .fill { background: #a8503f; }
.fleet-card.elite { border-color: var(--rhine-accent); box-shadow: none; }          /* 去发光 */
.fleet-card.elite::before {
  content: '精';
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.6rem;
  color: var(--rhine-accent-ink);
  background: var(--rhine-accent);
  padding: 1px 6px;
  border-radius: 0 2px 0 0;
}
.fleet-card.dead { opacity: 0.32; filter: grayscale(1); }
.fleet-card.dead::after {
  content: '已击毁';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  color: #a8503f;
  background: rgba(250, 248, 246, 0.88);
  border-radius: 2px;
}
.dmg-pop-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg-pop {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--rhine-accent);
  text-shadow: none;                 /* 去发光 */
  animation: dmgPopUp 0.9s ease-out forwards;
  white-space: nowrap;
}
.dmg-pop.crit { color: #a8503f; font-size: 1.05rem; }
.dmg-pop.from-enemy { color: #a8503f; }
@keyframes dmgPopUp {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-36px) scale(1.15); }
}

/* ---------- 部署界面 ---------- */
.deploy-layout { display: flex; gap: 14px; }
.deploy-left { flex: 1; max-height: 60vh; overflow-y: auto; }
.deploy-right { flex: none; width: 300px; max-height: 60vh; overflow-y: auto; }
.dp-group { margin-bottom: 10px; }
.dp-group.locked { opacity: 0.55; }
.dp-group-title { font-size: 0.82rem; color: var(--rhine-ink); font-weight: 700; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
.dp-limit { color: var(--rhine-accent); font-size: 0.74rem; }
.dp-aircap { color: #62805a; font-size: 0.68rem; }
.dp-lock-tip { font-size: 0.68rem; color: #a8503f; margin-bottom: 4px; }
.dp-ships { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-ship {
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 7px 9px;
  cursor: pointer;
  min-width: 150px;
  flex: 1 1 160px;
  transition: border-color 0.15s ease;
}
.dp-ship:hover { border-color: var(--rhine-accent); }
.dp-ship.on { border-color: var(--rhine-accent); border-left-color: var(--rhine-accent); background: rgba(255, 215, 0, 0.08); }
.dp-ship.off { opacity: 0.4; cursor: not-allowed; }
.dp-name { font-size: 0.76rem; color: var(--rhine-ink); }
.dp-stats { font-size: 0.64rem; color: var(--rhine-mute); margin-top: 2px; }
.dp-carry { font-size: 0.62rem; color: #62805a; margin-top: 2px; }
.dp-right-title { font-size: 0.82rem; color: var(--rhine-ink); font-weight: 700; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.dp-empty-tip { font-size: 0.72rem; color: var(--rhine-mute); padding: 8px; }
.dp-selected { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.dp-sel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--rhine-body);
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 5px 8px;
}
.dp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 10px;
}
.dp-prow { display: flex; align-items: center; gap: 6px; }
.dp-plabel { flex: none; width: 34px; font-size: 0.66rem; color: var(--rhine-mute); text-align: center; }
.dp-pcells { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-height: 34px; }
.dp-pempty { color: var(--rhine-mute); font-size: 0.7rem; padding: 6px 2px; }
.dp-pcell {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 0.66rem;
}
.dp-picon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 2px;                /* 直角徽标 */
}
.dp-pname { color: var(--rhine-body); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 强化/属性面板 ---------- */
.sp-sec { margin-bottom: 12px; }
.sp-sec-title { font-size: 0.82rem; color: var(--rhine-ink); font-weight: 700; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.sp-row { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--rhine-mute); padding: 3px 0; }
.sp-row .v { color: var(--rhine-ink); }
.sp-tip { font-size: 0.72rem; color: var(--rhine-accent); margin-bottom: 10px; }
.sp-actions { margin-top: 8px; }

/* ---------- 蓝图数据库 ---------- */
.blue-head { font-size: 0.84rem; color: var(--rhine-accent); font-weight: 700; margin-bottom: 10px; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
.blue-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.blue-item {
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  border-radius: 2px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.blue-item:hover { border-color: var(--rhine-accent); }
.bi-name { font-size: 0.82rem; color: var(--rhine-ink); font-weight: 700; }
.bi-stats { font-size: 0.68rem; color: var(--rhine-mute); margin-top: 2px; }
.bi-lv { font-size: 0.66rem; color: var(--rhine-accent); margin-top: 2px; }

/* ---------- 回合强化/升级条 ---------- */
.su-head { font-size: 0.9rem; color: var(--rhine-ink); font-weight: 700; margin-bottom: 6px; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); text-transform: uppercase; letter-spacing: 0.04em; }
.su-points { font-size: 0.78rem; color: var(--rhine-accent); margin-bottom: 10px; }
.su-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.su-info { flex: none; width: 150px; }
.su-name { font-size: 0.8rem; color: var(--rhine-ink); margin-right: 8px; }
.su-lv { font-size: 0.7rem; color: var(--rhine-accent); margin-right: 6px; }
.su-val { font-size: 0.7rem; color: var(--rhine-mute); }
.su-track {
  flex: 1;
  height: 6px;
  background: var(--rhine-panel2);
  border: 1px solid var(--rhine-line);
  border-radius: 0;
  overflow: hidden;
}
.su-fill { height: 100%; background: var(--rhine-accent); }   /* 实心柠檬黄 */
.su-back { margin-top: 10px; }

/* ---------- 结果/确认 ---------- */
.rs-line { font-size: 0.8rem; color: var(--rhine-body); padding: 4px 0; }
.rs-actions { display: flex; gap: 10px; margin-top: 14px; }
.confirm-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.bp-list { max-height: 60vh; overflow-y: auto; }
.bp-type-title { font-size: 0.8rem; color: var(--rhine-ink); padding: 8px 0 4px; border-bottom: 2px solid var(--rhine-accent); margin-top: 8px; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.bp-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  padding: 5px 2px;
  border-bottom: 1px solid var(--rhine-line);
}
.bp-name { color: var(--rhine-body); }
.bp-stats { color: var(--rhine-mute); white-space: nowrap; }

/* ---------- 浮动提示 ---------- */
.flash-tip {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  color: var(--rhine-ink);
  font-size: 0.84rem;
  padding: 10px 20px;
  border-radius: 2px;
  z-index: 80;
  box-shadow: none;
  animation: tipIn 0.25s;
}
@keyframes tipIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.supply-panel { font-size: 0.8rem; }

/* 战场三栏在窄屏改单列。注意：分屏后主区比原来窄 260px 左右，
   战场从「三栏并排」降级为单列的阈值要跟着降，否则会挤成一条。
   1100px 是给整页留的余量；此处用 1180px 覆盖战场自身的实际可用宽度。 */
@media (max-width: 1180px) {
  .battle-view { flex-direction: column; }
  .battle-center { width: 100%; max-height: 160px; order: -1; }
}

/* 进入对局后（leftPanel[data-mode] 不是 welcome）把外层那条 172px 按钮列收起来：
   它的 6 个入口已经由 .ws-side 承载，再留一条就是同一屏两处「开始/返回」，
   横向白白吃掉 172px。收窄到图标宽度而不是 display:none —— btnSupply 等
   按钮的 id 仍需存在，隐藏后物资调配等入口会失效。 */
.side-panel:not([data-mode="welcome"]) ~ .action-panel { width: 56px; }
.side-panel:not([data-mode="welcome"]) ~ .action-panel .action-btn,
.side-panel:not([data-mode="welcome"]) ~ .action-panel .back-link {
  font-size: 0;              /* 文字收起，靠 CSS 伪元素给图标位 */
  padding: 8px 0;
  text-align: center;
}
.side-panel:not([data-mode="welcome"]) ~ .action-panel .action-btn::before {
  content: attr(data-glyph);
  font-size: 1rem;
  line-height: 1;
}
.side-panel:not([data-mode="welcome"]) ~ .action-panel .back-link::before {
  content: '←';
  font-size: 1rem;
}

/* ---------- 对局 HUD（信息架构参照 sganggs/Stronghold-Protocol 的
   screens/game.css：顶栏三段 left/center/right、左侧队友列、右侧效果列、
   底部 HUD。配色沿用站内浅色档案风，不跟参考项目一样走深色终端。） ---------- */
.hud-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  padding: 9px 14px;
}
.hud-left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }

/* 主行动钮：顶栏右下，三段式（勾选框 + 文案）。
   参考项目把全屏唯一的主行动放在顶栏（.readybtn），战斗期底部不放行动按钮。 */
.hud-ready { margin-top: 2px; }
.readybtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rhine-ink);
  background: var(--rhine-accent-soft);
  border: 2px solid var(--rhine-accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.readybtn:hover { background: var(--rhine-accent); color: #fff; transform: translateY(-1px); }
.readybtn:active { transform: translateY(0); }
.readybtn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.readybtn__box { width: 14px; height: 14px; border: 2px solid var(--rhine-accent); background: #fff; flex: none; }
.readybtn__label { line-height: 1; }

/* 舰船详情：贴边侧滑面板（参照参考项目 .dpanel 的停靠 + 滑入，非居中模态）。
   z-index 取 10：对齐参考分层档位（面板 8-12），低于模态 70、高于 HUD 3。 */
.dpanel {
  position: fixed;
  top: 90px;
  left: 0;
  bottom: 24px;
  width: 300px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-accent);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.dpanel.active { transform: translateX(0); pointer-events: auto; }
.dpanel__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rhine-line);
  background: var(--rhine-bg);
  color: var(--rhine-mute);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.dpanel__close:hover { color: var(--rhine-accent); border-color: var(--rhine-accent); }
.dpanel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }

/* 头部：名称 + 舰种 */
.dhead { padding-right: 32px; margin-bottom: 12px; }
.dhead__name { font-size: 1.02rem; font-weight: 700; color: var(--rhine-ink); line-height: 1.3; }
.dhead__cls { font-size: 0.76rem; color: var(--rhine-mute); margin-top: 3px; letter-spacing: 0.06em; }

/* 属性网格：1px gap + 容器底色直接画出分隔线（参考 .dstats 的做法） */
.dstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rhine-line);
  border: 1px solid var(--rhine-line);
}
.dst {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  background: var(--rhine-bg);
}
.dst__l { font-size: 0.74rem; color: var(--rhine-mute); flex: none; }
.dst__v {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rhine-ink);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分区标题 */
.dsec {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--rhine-mute);
  padding-bottom: 5px;
  margin: 14px 0 7px;
  border-bottom: 1px solid var(--rhine-line);
}

/* 强化等级：左侧 3px 强调条（参考用左竖条表达强调块） */
.dlvs { display: flex; flex-direction: column; gap: 4px; }
.dlv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  background: var(--rhine-panel2);
  border-left: 3px solid var(--rhine-accent);
}
.dlv__l { font-size: 0.76rem; color: var(--rhine-body); }
.dlv__v { font-size: 0.8rem; font-weight: 700; color: var(--rhine-ink); }

/* 装备 */
.deq { display: flex; flex-wrap: wrap; gap: 6px; }
.deq__i {
  font-size: 0.74rem;
  padding: 4px 8px;
  border: 1px solid var(--rhine-line);
  background: var(--rhine-bg);
  color: var(--rhine-body);
}

/* 两段式购买（参照参考项目 .scard.is-armed）：
   首次点击抬起 + 强调框 + 底部确认条，其余卡压暗，再次点击才成交。 */
.pool-card { position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.pool-card.is-armed {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--rhine-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  z-index: 2;
}
.pool-card.is-armed::after {
  content: '再次点击确认购买';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--rhine-accent);
}
/* 已有卡处于待确认时，其余卡压暗，视线只落在这一张上 */
.pool-list:has(.pool-card.is-armed) .pool-card:not(.is-armed) { filter: brightness(0.78); }
.hud-faction-bar { display: flex; flex-direction: column; gap: 4px; }
.hud-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hud-round { display: flex; align-items: baseline; gap: 6px; }
.hud-round-num {
  font-family: var(--rhine-title-font, sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rhine-ink);
}
.hud-round-cap { font-size: 0.66rem; letter-spacing: 0.14em; color: var(--rhine-mute); }
.hud-phase {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 1px 7px;
  border: 1px solid var(--rhine-accent);
  color: var(--rhine-accent);
}
/* 阶段胶囊内的击杀进度（参考 .capsule__kills 的 killed/total）：
   与阶段名共处一枚胶囊，用竖线分隔，等宽数字避免跳动。 */
.capsule__kills {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid currentColor;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 回合进度：15 格，已打过 / 当前 / 未打，一眼看到节奏 */
.hud-progress { display: flex; gap: 2px; }
.hud-pip { width: 7px; height: 12px; background: var(--rhine-field); border: 1px solid var(--rhine-line); }
.hud-pip.done { background: var(--rhine-line-strong); }
.hud-pip.now { background: var(--rhine-accent); border-color: var(--rhine-accent); }
.hud-pip.upgrade { border-color: var(--rhine-accent); }
.hud-pip.upgrade.done { background: var(--rhine-accent); }

.hud-clock {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--rhine-title-font, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rhine-ink);
  min-width: 64px;
  justify-content: flex-end;
}
.hud-clock.warn { color: var(--rhine-accent); }
.hud-clock-cap { font-size: 0.64rem; letter-spacing: 0.12em; color: var(--rhine-mute); }

.hud-faction { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hud-faction .fb-name { flex: none; max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-faction .fb-track { flex: 1; }
.hud-faction .fb-num { min-width: 34px; text-align: right; flex: none; }

/* 队友列：左侧竖排。参考项目里是 .team 绝对定位，这里做成常规流 ——
   竖排卡片会随内容增高，绝对定位反而容易与主区重叠。 */
/* 队友列：独立于顶栏，浮在内容区左侧（参考项目 .team 用 left/top 绝对定位）。
   .side-panel 是 position:relative，作为定位基准；该列只在联机时存在。 */
.hud-team {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  left: 16px;
  top: 124px;
  width: 168px;
  z-index: 3;
}
/* 有队友列时主区左侧让位，避免与列表重叠；单人局该列不渲染，故不生效 */
.side-panel:has(> .game-header > .hud-team) .ws-main { padding-left: 184px; }
.hud-team-title {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--rhine-mute);
  border-bottom: 1px solid var(--rhine-line);
  padding-bottom: 3px;
}
.hud-mate {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-left: 3px solid var(--rhine-line);
  border-radius: 2px;
  font-size: 0.72rem;
  color: var(--rhine-body);
}
.hud-mate.is-me { border-left-color: var(--rhine-accent); background: var(--rhine-accent-soft); }
.hud-mate.is-host { border-left-color: var(--rhine-accent); }
.hud-mate.is-off { opacity: 0.5; }
.hud-mate.is-spec { border-left-style: dashed; }
.hm-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--rhine-mute); }
.hm-dot.on { background: #5f7a4a; }
.hm-name { color: var(--rhine-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tag {
  font-size: 0.6rem;
  padding: 0 4px;
  border: 1px solid currentColor;
  color: var(--rhine-mute);
  flex: none;
}
.hm-tag.host { color: var(--rhine-accent); }
.hm-units { margin-left: auto; font-size: 0.68rem; color: var(--rhine-mute); flex: none; }

/* 底部 HUD：进度提示 + 提示轮播 */
/* 底部状态提示：参考项目是屏幕底部居中的药丸（.chud__bottom > .chud__msg），
   不是靠左的方块。这里保留原信息，只改形态与对齐。 */
.hud-bottom { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hud-hint {
  font-size: 0.72rem;
  color: var(--rhine-mute);
  padding: 7px 18px;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 999px;
  min-height: 26px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------- 联机房间 ---------- */
/* 全屏覆盖层：保留 .modal 的 id 与 .active 开合机制，initRoomUi /
   startGameFromRoom 等逻辑层零改动，只把外壳从居中弹窗改成全屏屏。 */
#roomModal.room-screen {
  padding: 0;
  background: var(--rhine-bg);
  align-items: stretch;
  justify-content: stretch;
}
.room-screen__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#roomLobby { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 18px; }

/* 顶栏三栏：左=离开+连接状态，中=标题，右=房间码邀请卡 */
.room-topbar {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rhine-line);
}
.room-topbar__left { display: flex; align-items: center; gap: 10px; justify-self: start; }
.room-topbar__center { display: flex; flex-direction: column; align-items: center; gap: 2px; justify-self: center; }
.room-topbar__right { justify-self: end; }
.room-eyebrow { font-size: 0.66rem; letter-spacing: 0.18em; color: var(--rhine-mute); }
.room-title { font-size: 1rem; font-weight: 700; color: var(--rhine-ink); }

/* 邀请卡：标签 + 逐字符码 + 复制按钮竖排 */
.room-invite { display: flex; align-items: center; gap: 10px; }
.room-invite__label { font-size: 0.7rem; color: var(--rhine-mute); }
.room-invite__btns { display: flex; flex-direction: column; gap: 4px; }

/* 席位区吃掉全部剩余高度，内容垂直居中 */
.room-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
}

/* 观战条：有观战者才渲染，紧贴底栏之上 */
.room-specbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 18px;
  border-top: 1px solid var(--rhine-line);
}
.specbar__label { font-size: 0.72rem; font-weight: 700; color: var(--rhine-mute); }
.spec-who {
  font-size: 0.72rem;
  padding: 2px 8px;
  border: 1px solid var(--rhine-line);
  color: var(--rhine-body);
  border-radius: 2px;
}
.spec-who.is-me { border-color: var(--rhine-accent); color: var(--rhine-accent); }

/* 底栏三栏：左=就绪计数，中=状态行，右=主操作按钮组 */
.room-bar {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--rhine-line);
}
.room-bar__left { justify-self: start; }
.room-bar__center { justify-self: center; text-align: center; }
.room-bar__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.ready-count { font-size: 0.76rem; color: var(--rhine-mute); }
.ready-count b { font-size: 0.95rem; color: var(--rhine-ink); }
.ready-count .dim { color: var(--rhine-mute); }
.room-status { font-size: 0.76rem; color: var(--rhine-body); }

.room-code {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0;
}
/* 展示态：已在房间内，逐字符分格 + 底部强调线 */
.room-code span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 42px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--rhine-ink);
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-bottom: 2px solid var(--rhine-accent);
  border-radius: 2px;
  font-family: var(--rhine-title-font, monospace);
}
/* 输入态：尚未加入时的房间码输入框 */
.room-code input {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: 1.5rem;
  font-family: var(--rhine-title-font, monospace);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--rhine-ink);
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  text-transform: uppercase;
}
.room-code input:focus { outline: none; border-color: var(--rhine-accent); }
/* 席位网格：列数由 --seat-cols 控制（2 席排 2 列、4 席排 4 列），整块居中 */
.room-seats {
  display: grid;
  grid-template-columns: repeat(var(--seat-cols, 4), minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
  align-content: center;
  margin: 10px 0;
}
.room-seat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  font-size: 0.8rem;
  color: var(--rhine-body);
  background: var(--rhine-bg);
  border: 1px solid var(--rhine-line);
  border-top: 3px solid var(--rhine-line);
  border-radius: 2px;
}
.seat__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.seat__no {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--rhine-mute);
  font-family: var(--rhine-title-font, monospace);
}
.seat__who { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 30px; }
.seat__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rhine-line);
}
.room-seat.is-host { border-top-color: var(--rhine-accent); }
.room-seat.is-me { background: var(--rhine-accent-soft); }
.room-seat.is-empty { opacity: 0.55; border-top-style: dashed; }
.room-seat.is-empty .seat__foot { border-top-style: dashed; }
.rs-name { font-weight: 700; color: var(--rhine-ink); }
.rs-tag {
  font-size: 0.66rem;
  padding: 0 5px;
  border: 1px solid currentColor;
  color: var(--rhine-mute);
  border-radius: 2px;
}
.rs-tag.host { color: var(--rhine-accent); }
.rs-tag.spectator { color: var(--rhine-mute); }

/* AI 席位：与真人（强调色顶条）和空席（虚线）都要区分开 ——
   中性灰顶条 + 斜体名 + 独立徽标。参考项目用冰蓝系表达，
   我们沿用站内中性色，不引入新调色。 */
.room-seat.is-bot { border-top-color: var(--rhine-mute); }
.room-seat.is-bot .rs-name { color: var(--rhine-mute); font-style: italic; }
.rs-tag.bot {
  color: var(--rhine-mute);
  border-color: var(--rhine-mute);
}
/* AI 卡的底脚要同时放「已准备」和「移除」，两端对齐 */
.room-seat.is-bot .seat__foot { justify-content: space-between; }

.rs-ready { color: #62805a; font-size: 0.72rem; }
.rs-wait { color: var(--rhine-mute); font-size: 0.72rem; }
.room-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.78rem;
  background: var(--rhine-panel);
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
}
.room-phase-label { font-weight: 700; color: var(--rhine-accent); }
.room-conn { font-size: 0.7rem; color: var(--rhine-mute); }
.room-conn.on { color: #62805a; }
.room-conn.off { color: #a8503f; }
.room-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.room-err { color: #a8503f; font-size: 0.76rem; margin-top: 8px; min-height: 18px; }
/* 队友面板：挂在顶栏右下，为联机预留（单人局不显示） */
.room-mates { display: none; gap: 6px; align-items: center; }
.room-mates.on { display: flex; }
.rm-chip {
  font-size: 0.68rem;
  padding: 2px 7px;
  border: 1px solid var(--rhine-line);
  border-radius: 2px;
  color: var(--rhine-body);
  white-space: nowrap;
}
.rm-chip.host { border-color: var(--rhine-accent); color: var(--rhine-accent); }
.rm-chip.ready { border-color: #62805a; color: #62805a; }

@media (max-width: 1100px) {
  .deploy-layout { flex-direction: column; }
  .deploy-right { width: 100%; }
  .fleet-card { flex: 1 1 140px; min-width: 130px; }
  .action-panel { width: 130px; }
}

/* ---------- 维修标记 ---------- */
.fc-repair { font-size: 0.62rem; color: #62805a; border: 1px solid #62805a; border-radius: 2px; padding: 0 3px; margin-left: 4px; background: transparent; }
.dmg-pop.heal { color: #62805a; text-shadow: none; }

/* ---------- 部署指令条 ---------- */
.deploy-cmd { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--rhine-panel); border: 1px solid var(--rhine-line); border-left: 3px solid var(--rhine-accent); border-radius: 2px; margin-bottom: 8px; font-size: 14px; }
.deploy-cmd b { color: var(--rhine-accent); font-size: 16px; }
.deploy-cmd b.over { color: #a8503f; }
.dp-cmd-hint { color: var(--rhine-mute); font-size: 12px; }
.dp-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.dp-minus, .dp-plus { width: 24px; height: 24px; border: 1px solid var(--rhine-line-strong); background: var(--rhine-bg); color: var(--rhine-ink); border-radius: 2px; cursor: pointer; font-size: 14px; line-height: 1; }
.dp-minus:hover, .dp-plus:hover { border-color: var(--rhine-accent); color: var(--rhine-accent); }
.dp-plus.off { opacity: .35; cursor: not-allowed; }
.dp-num { color: var(--rhine-ink); font-size: 13px; min-width: 52px; text-align: center; }
.dp-mod { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--rhine-accent); background: transparent; color: var(--rhine-accent); border-radius: 2px; cursor: pointer; font-size: 12px; }
.dp-mod:hover { background: var(--rhine-accent); color: var(--rhine-accent-ink); }
.bi-name.gold, .su-head.gold { color: var(--rhine-accent); }
.bi-name.gold em, .su-head.gold em { color: var(--rhine-accent); font-size: 11px; margin-left: 6px; }
.grp-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--rhine-line-strong); color: var(--rhine-body); border-radius: 2px; font-size: 10px; }
.mod-ship-name { color: var(--rhine-accent); font-size: 16px; margin-bottom: 10px; font-family: var(--rhine-title-font, 'Oswald', 'Helvetica Neue', Arial, sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mod-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.mod-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--rhine-line); background: var(--rhine-panel); border-left: 3px solid var(--rhine-accent); border-radius: 2px; cursor: pointer; }
.mod-item:hover { border-color: var(--rhine-accent); }
.mod-item em { color: var(--rhine-mute); font-style: normal; font-size: 12px; }
#warpCanvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 75; pointer-events: none; }

/* ---------- 跃迁（去发光，改柠檬黄细线 + 透明度） ---------- */


/* ---------- 部署锁标记 ---------- */
.dp-lock-badge { display: inline-block; margin: 2px 0 0; padding: 1px 8px; font-size: 11px; color: #a8503f; border: 1px solid #a8503f; border-radius: 2px; background: transparent; }
.dp-ship.off .dp-lock-badge { color: var(--rhine-mute); border-color: var(--rhine-line-strong); background: transparent; }

/* ---------- 要塞（深色内容保留少量色调，去发光/渐变） ---------- */
.fortress-bar { background: var(--rhine-panel); border: 1px solid var(--rhine-line); border-left: 3px solid var(--rhine-accent); border-radius: 2px; padding: 8px 12px; margin: 6px 12px; position: relative; }
.fortress-bar .fb-name { font-size: .8rem; font-weight: 700; color: var(--rhine-ink); margin-bottom: 4px; text-shadow: none; }
.fort-hp, .fort-sh { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: .68rem; color: var(--rhine-body); }
.fort-hp .fill, .fort-sh .fill { height: 8px; border-radius: 0; transition: width .2s; }
.fort-hp { background: var(--rhine-panel2); border: 1px solid var(--rhine-line); border-radius: 0; overflow: hidden; }
.fort-hp .fill { background: #a8503f; }
.fort-sh { background: var(--rhine-panel2); border: 1px solid var(--rhine-line); border-radius: 0; overflow: hidden; }
.fort-sh .fill { background: var(--rhine-accent); }
.fort-hp span, .fort-sh span { white-space: nowrap; min-width: 110px; }
.fleet-card.fortress { border-color: var(--rhine-accent); background: var(--rhine-panel2); box-shadow: none; }
.fleet-card.fortress .fc-name { color: var(--rhine-accent); text-shadow: none; }
.fleet-card.fortress-hit { border-color: #a8503f; box-shadow: none; }
.fh-count { background: #a8503f; color: #eae5e1; border-radius: 2px; padding: 0 6px; font-size: .6rem; margin-left: 4px; font-weight: 700; }

/* ---------- 终局横幅：柠檬黄大横幅 ---------- */
.final-banner { background: var(--rhine-accent); border: 1px solid var(--rhine-accent); color: var(--rhine-accent-ink); font-weight: 700; text-align: center; padding: 8px; margin: 6px 12px; border-radius: 2px; font-size: .85rem; letter-spacing: 1px; text-shadow: none; }

/* ---------- 蓝图操作 ---------- */
.blue-actions { display: flex; gap: 8px; margin: 6px 0; padding: 0 4px; }
.blue-actions .btn-action { flex: 1; background: var(--rhine-ink); border-color: var(--rhine-ink); color: #eae5e1; font-weight: 700; }
.blue-actions .btn-action:hover { background: var(--rhine-accent); border-color: var(--rhine-accent); color: var(--rhine-accent-ink); }

/* ---------- 装备装配（舰船卡上的装备槽 / 装配选择器） ---------- */
.hc-eq { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
.hc-eq-tag {
  font-size: 0.6rem; padding: 1px 5px; border: 1px solid var(--rhine-accent);
  color: var(--rhine-accent); cursor: pointer; border-radius: 2px; white-space: nowrap;
}
.hc-eq-tag:hover { background: var(--rhine-accent); color: var(--rhine-accent-ink); }
.equip-pick { padding: 2px 0; }
.ep-title { font-size: 0.9rem; font-weight: 700; color: var(--rhine-ink); margin-bottom: 6px; }
.ep-tip { font-size: 0.72rem; color: var(--rhine-mute); margin-bottom: 10px; line-height: 1.65; }
.ep-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.ep-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--rhine-line); cursor: pointer; transition: border-color .15s, background .15s;
}
.ep-item:hover { border-color: var(--rhine-accent); background: var(--rhine-panel2); }
.ep-name { font-weight: 700; color: var(--rhine-ink); }
.ep-cls { font-size: 0.72rem; color: var(--rhine-mute); }
.ep-has { margin-left: auto; font-size: 0.7rem; color: var(--rhine-accent); }

/* ==================== 设备层：安全区 / 触控 / 窄屏 ====================
   参照参考项目的 public/css/devices.css（该文件同样是最后加载、用来覆盖
   前面各屏的桌面取值）。放在本文件末尾，让本段尺寸优先级更高。 */

:root {
  /* 刘海、圆角屏与 Home 指示条。env() 在不支持的设备上回退 0px，
     所以桌面端这一整段等于没有效果。 */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --tap-min: 44px;
}

/* 1) 手势：禁下拉刷新、双指/双击缩放与长按菜单。
   html 上保留 pan-x pan-y，可滚动列表照常滑动；按钮加 manipulation
   消除 300ms 点击延迟，同时不触发双击缩放。 */
html, body { overscroll-behavior: none; }
html { touch-action: pan-x pan-y; }
body { -webkit-touch-callout: none; }
:is(button, a, label, [role="button"], .btn-action, .readybtn, .room-seat,
     .pool-card, .hand-card, .prep-card, .fleet-card, .spec-who) {
  touch-action: manipulation;
}
img { -webkit-user-drag: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }

/* 2) 安全区：全屏层与贴边浮层退到刘海 / 圆角 / Home 指示条之内。
   只影响贴边元素，页面正文本身已有 padding。 */
#roomModal.room-screen { padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
.pool-section {
  right: calc(18px + var(--sa-r));
  bottom: calc(18px + var(--sa-b));
  max-width: calc(100vw - 36px - var(--sa-r) - var(--sa-l));
}
.dpanel {
  top: calc(90px + var(--sa-t));
  left: var(--sa-l);
  bottom: calc(24px + var(--sa-b));
}
.flash-tip { top: calc(60px + var(--sa-t)); }

/* 3) 触摸：给小控件一个不小于 44px 的隐形点击区，只扩大命中范围、
   不改布局。用 @media (pointer: coarse) 判断触摸设备，不做 UA 嗅探。
   同时要求窄屏：触摸屏笔记本用鼠标时不需要这套放大，而点击区一旦高过
   按钮（约 34px），在我们 8-10px 的按钮间距下会溢出到相邻控件。
   不能选中本身已用 ::before 画图标的元素 —— button.pf-title、
   .action-btn[data-glyph]、.back-link、.fleet-card.elite 都占用了
   ::before，选进来会把它们的图标顶掉（参考项目也踩过同一个坑）。 */
@media (max-width: 900px) and (pointer: coarse),
       (max-width: 900px) and (any-pointer: coarse) {
  :is(.btn-action, .readybtn, .modal-close, .dpanel__close, .spec-who,
      .hud-clock, .pool-card, .hand-card, .prep-card) {
    position: relative;
  }
  :is(.btn-action, .readybtn, .modal-close, .dpanel__close, .spec-who,
      .hud-clock, .pool-card, .hand-card, .prep-card)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, var(--tap-min));
    height: max(100%, var(--tap-min));
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    pointer-events: auto;
  }
}

/* 4) 横屏手机（高度不超过 600px）：常用控件放大一点，够得着也看得清 */
@media (max-height: 600px) and (pointer: coarse),
       (max-height: 600px) and (any-pointer: coarse) {
  .readybtn { min-height: 34px; padding: 9px 18px; }
  .btn-action { min-height: 32px; }
  .modal-close, .dpanel__close { min-width: 32px; min-height: 32px; }
  .pool-card { padding: 10px 12px; }
}

/* 5) 窄屏（不超过 767px）：贴边浮层收窄，避免占掉大半个屏宽。
   右栏在 900px 断点已收成单列，这里只处理 fixed 浮层与房间栏的间距 ——
   房间顶栏/底栏保持三栏 grid 不动，只把 padding 与 gap 收紧。 */
@media (max-width: 767px) {
  /* 顶栏三栏在窄屏撑不住：grid 是 1fr auto 1fr，中栏（波次/阶段）不可压缩，
     于是左右两栏被挤到 48px，而左段的势力血条 + 护盾/生命/资金/强化点
     需要 174px，溢出后直接压在波次上。实测 420x860 视口下
     mb-val「1000/1000」与 hud-phase「休整期」重叠 39x7px。
     改成两行两列：波次独占一行，资源与时钟各占一半（各约 194px，够放）。 */
  .hud-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'center center'
      'left   right';
    gap: 8px 14px;
  }
  .hud-left { grid-area: left; justify-self: start; }
  .hud-center { grid-area: center; justify-self: center; }
  .hud-right { grid-area: right; justify-self: end; align-items: flex-end; }

  .dpanel { width: min(300px, calc(100vw - 24px - var(--sa-l) - var(--sa-r))); }
  .pool-section {
    right: calc(10px + var(--sa-r));
    bottom: calc(10px + var(--sa-b));
    max-width: calc(100vw - 20px - var(--sa-l) - var(--sa-r));
  }
  .room-topbar, .room-bar { gap: 8px; padding: 8px 10px; }
  #roomLobby { padding: 0 10px; }
}

/* 更窄（手机竖屏，<= 480px）：两行两列仍只有约 84px 一列，放不下 174px 的
   资源行，实测 360px 下 mb-val 与开始作战按钮重叠 26x11px。
   退成单列三行，每行独占整宽。 */
@media (max-width: 480px) {
  .hud-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'center'
      'left'
      'right';
    gap: 6px;
  }
  .hud-left { grid-area: left; justify-self: stretch; }
  .hud-right { grid-area: right; justify-self: stretch; }

  /* 窄屏把补给池放回正常流：它是 position:fixed 贴视口底的，不随内容滚动，
     而窄屏一屏装不下「内容 + 池」，于是初始位置就压在行动条上
     （实测 360x860：池 716-850，行动条 707-737，重叠 21px）。
     留白救不了 —— 留白只在滚动到底时才起作用。放回文档流后
     池排在 ws-side 之后，不再覆盖任何内容，也不需要额外留白。 */
  .pool-section {
    position: static;
    margin-top: 10px;
    max-width: none;
  }
  .game-header:has(> .ws-split > .ws-main > .pool-section) { padding-bottom: 0; }

  /* 极窄（<= 380px，如 iPhone SE 竖屏）：资源行「标签 + 血条 + 数值」
     横排需要 174px，可用宽只剩 141px，会多出 18px 横向溢出。
     让血条换到第二行独占整宽，标签与数值仍同行。 */
  .hud-meta .mb-row { flex-wrap: wrap; row-gap: 2px; }
  .hud-meta .mb-row .shield-bar,
  .hud-meta .mb-row .life-bar { order: 2; width: 100%; }
}