/* ============================================================
   Ledger & Lance · 钢笔淡彩 UI
   纸底 + 墨线 + 朱/靛 双阵营。禁渐变按钮、禁圆角滥用——
   纸的边缘是裁切的，不是长出来的。
   ============================================================ */
:root {
  --paper: #efe6d0;
  --paper-2: #e7dcc2;
  --panel: #f6eed9;      /* 面板底：不透明亮纸（v0.6.3：透明底会与氛围底图混字） */
  --panel-ink: #f9f1de;  /* 带色面板底（敌情/黑市）：不透明 */
  --ink: #2b2620;
  --ink-2: #5a5142;
  --cinnabar: #a63a2e;   /* 朱 · 守方 / 赤字 */
  --indigo: #3e5c76;     /* 靛 · 攻方 / 账 */
  --gold: #c9a227;
  --line: 1.5px solid var(--ink);
  /* 字体双栈：zh 走楷体规范；en 走西文 UI/UX 传统（Cinzel 展示 + EB Garamond 正文） */
  --font-zh: "LXGW WenKai Screen", "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  --font-en-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-en-body: "EB Garamond Variable", "EB Garamond", Georgia, "Times New Roman", serif;
  --font: var(--font-zh);
  --font-display: var(--font-zh);
}

/* ── 西文排印规范（html[lang=en]，applyStatic 自动切换）──────────
   与中文规范分轨：小字距、大写小标签、老式数字、更紧的行高、
   标题用 Cinzel（罗马碑刻传统，契合"行会账本"题材）。 */
html:lang(en) { --font: var(--font-en-body); --font-display: var(--font-en-display); }
html:lang(en) body { font-size: 16.5px; line-height: 1.6; font-variant-numeric: oldstyle-nums; }
html:lang(en) .btn { letter-spacing: .05em; }
html:lang(en) .btn.big { letter-spacing: .16em; text-indent: .16em; }
html:lang(en) .title-eyebrow { letter-spacing: .24em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; }
html:lang(en) .title-logo .en { letter-spacing: .02em; font-family: var(--font-display); font-weight: 700; }
html:lang(en) .title-tag { font-size: 16px; font-style: italic; }
html:lang(en) .topbar-title,
html:lang(en) .panel-h,
html:lang(en) .intel-head h3,
html:lang(en) .intel-sub { letter-spacing: .1em; }
html:lang(en) .badge,
html:lang(en) .lv-n,
html:lang(en) .title-foot,
html:lang(en) .hud-round,
html:lang(en) .bar-label { letter-spacing: .12em; text-transform: uppercase; }
html:lang(en) .badge { font-weight: 600; }
html:lang(en) .lv-name { font-family: var(--font-en-body); }
html:lang(en) .d-name,
html:lang(en) .py-h,
html:lang(en) .hud-level { letter-spacing: .04em; }
html:lang(en) .si-desc,
html:lang(en) .warehouse-hint,
html:lang(en) .cap-note,
html:lang(en) .intel-click-hint { font-style: italic; }
html:lang(en) .settle-seed { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  /* 纸纹：两层细噪点 */
  background-image:
    repeating-linear-gradient(0deg, rgba(43,38,32,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(43,38,32,.02) 0 1px, transparent 1px 4px);
  overflow: hidden;
}
#app { height: 100vh; position: relative; }

/* ── 屏幕切换 ── */
.screen { position: absolute; inset: 0; display: none; overflow: auto; }
.screen.active { display: block; animation: fadein .35s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ── AI 管线美术底图（artgen → assets/art/，注册表探测到才显示）── */
.screen-art {
  position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat; pointer-events: none; display: none;
}
.screen-art.has-art { display: block; }
.screen-art.has-art ~ * { position: relative; z-index: 1; }
#title-art { opacity: .88; }
#map-art { opacity: .5; border-radius: 2px; }
/* 检阅页氛围底图：压暗+纸色渐隐，保证前景卡可读 */
#muster-art { background-size: cover; background-position: center; }
#muster-art.has-art { opacity: .34; }
#muster-art.has-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(239,230,208,.28), rgba(239,230,208,.62) 42%, rgba(239,230,208,.5));
}

/* ── 纸卡 ── */
.paper-card {
  background: var(--paper);
  border: var(--line);
  box-shadow: 4px 4px 0 rgba(43,38,32,.18);
  padding: 34px 40px;
}

/* ── 按钮 ── */
.btn {
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: var(--line);
  padding: 8px 20px;
  cursor: pointer;
  transition: transform .08s, background .12s;
  letter-spacing: .12em;
}
.btn:hover:not(:disabled) { background: rgba(43,38,32,.07); transform: translate(-1px,-1px); box-shadow: 2px 2px 0 rgba(43,38,32,.25); }
.btn:active:not(:disabled) { transform: translate(0,0); box-shadow: none; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover:not(:disabled) { background: #3a332a; }
.btn.ghost { border-style: dashed; opacity: .8; }
.btn.tiny { padding: 3px 12px; font-size: 13px; }
.btn.big { width: 100%; padding: 14px; font-size: 19px; margin-top: 18px; letter-spacing: .4em; text-indent: .4em; }

/* ═══════════ 标题页 ═══════════ */
#screen-title { display: none; align-items: center; justify-content: center; }
#screen-title.active { display: flex; }
.title-card { width: min(620px, 92vw); text-align: center; position: relative; }
.title-card::before {
  content: "承";
  position: absolute; right: 18px; top: 12px;
  font-size: 84px; color: rgba(166,58,46,.12); font-weight: bold;
}
.title-eyebrow { font-size: 13px; letter-spacing: .5em; color: var(--ink-2); margin-bottom: 14px; }
.title-logo .en { display: block; font-size: 44px; letter-spacing: .04em; font-weight: bold; font-family: var(--font-display); }
.title-logo .zh { display: block; font-size: 30px; letter-spacing: 1.2em; text-indent: 1.2em; margin-top: 6px; color: var(--cinnabar); }
.title-tag { margin: 18px 0 22px; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.title-crowns-line { font-size: 15px; margin-bottom: 20px; }
.title-crowns-line b { color: var(--gold); font-size: 18px; }
.title-foot { margin-top: 22px; font-size: 12px; color: var(--ink-2); letter-spacing: .2em; }

.lv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lv-btn {
  font-family: var(--font); border: var(--line); background: transparent;
  padding: 12px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: transform .08s, background .12s;
}
.lv-btn:hover:not(:disabled) { background: rgba(62,92,118,.08); transform: translateY(-2px); }
.lv-btn.locked { opacity: .4; cursor: not-allowed; }
.lv-n { font-size: 12px; color: var(--ink-2); letter-spacing: .3em; }
.lv-name { font-size: 16px; font-weight: bold; }
.lv-lock { font-size: 11px; color: var(--cinnabar); }

/* ═══════════ 检阅页 ═══════════ */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px; border-bottom: var(--line); background: var(--paper-2);
}
.topbar-title { font-size: 19px; font-weight: bold; letter-spacing: .1em; font-family: var(--font-display); }
.topbar-meta { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); align-items: center; flex: 1; }
.topbar-crowns { font-size: 15px; }
.topbar-crowns b { color: var(--gold); font-size: 18px; }
.badge { font-family: var(--font-display); font-size: 12px; padding: 2px 10px; border: 1.5px solid; letter-spacing: .2em; }
.badge.sweep { color: var(--indigo); border-color: var(--indigo); }
.badge.breach { color: var(--cinnabar); border-color: var(--cinnabar); }

.muster-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; padding: 18px 22px; max-width: 1200px; margin: 0 auto; }
.panel { border: var(--line); background: var(--panel); padding: 12px 14px; }
.panel-h { font-family: var(--font-display); font-size: 14px; letter-spacing: .3em; margin: 4px 0 8px; border-bottom: 1px dashed var(--ink-2); padding-bottom: 5px; }

/* ── 军需铺（v2 紧凑格子）：小图省空间，描述两行截断，关键信息不被挤出视口 ──
   中栏纵向布局：商店格是定高滚动区——出阵/仓库/出战按钮常驻可视，不被 11 张卡挤走 */
.muster-mid { display: flex; flex-direction: column; min-width: 0; }
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 8px;
  max-height: 296px; overflow-y: auto; padding-right: 4px;
}
/* 出战按钮紧跟出阵框（调拨完即可出战）；仓库/英雄区下沉浏览 */
#btn-fight.big { margin-top: 8px; margin-bottom: 12px; }
.shop-item { border: 1px solid var(--ink-2); padding: 7px 9px; background: var(--paper); position: relative; }
.shop-item .si-art { width: 100%; height: 56px; object-fit: contain; display: none; margin-bottom: 4px; }
.shop-item .si-art.ready { display: block; border-bottom: 1px dashed rgba(43,38,32,.25); padding-bottom: 3px; }
.d-portrait { width: 52px; height: 52px; object-fit: cover; border: 1.5px solid var(--ink); background: var(--paper-2); flex: 0 0 auto; }
.d-portrait[hidden] { display: none; }
.shop-item .si-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.si-name { font-weight: bold; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-tier { font-size: 11px; color: var(--ink-2); letter-spacing: .15em; flex: 0 0 auto; }
.tier-T2 { border-left: 3px solid var(--gold); }
.tier-T1 { border-left: 3px solid var(--indigo); }
.tier-T0 { border-left: 3px solid var(--ink-2); }
.si-stats { font-size: 13px; margin: 3px 0; }
.si-stats b { color: var(--cinnabar); }
/* 描述两行截断：完整文案放 title 悬浮，格子高度可预期 */
.si-desc {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.si-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.si-foot .buy { padding: 2px 9px; font-size: 12px; }
.si-price { font-weight: bold; font-size: 13.5px; }
.si-own { font-size: 11.5px; color: var(--ink-2); flex: 1; text-align: right; }

.equip-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; margin-bottom: 8px; }
.eq-chip { font-size: 13px; border: 1px solid var(--ink-2); padding: 3px 10px; background: var(--paper); }
.eq-none { font-size: 13px; color: var(--ink-2); font-style: italic; }
.cap-note { font-size: 13px; color: var(--cinnabar); margin-bottom: 12px; min-height: 18px; }

/* ═══════════ 战斗页 ═══════════ */
#screen-battle.active { display: block; }
.battle-canvas { position: absolute; inset: 0; }
.battle-canvas canvas { display: block; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.float-dmg {
  position: absolute; transform: translate(-50%, 0);
  font-size: 20px; font-weight: bold; color: var(--ink);
  animation: floatup 1s ease-out both;
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper);
}
.float-dmg.crit { font-size: 27px; color: var(--cinnabar); }
.float-dmg.splash { font-size: 14px; opacity: .8; }
.float-dmg.gate { color: var(--cinnabar); letter-spacing: .1em; }
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px); }
}

.battle-hud {
  position: absolute; left: 0; right: 0; top: 0;
  display: none; justify-content: space-between; align-items: flex-start;
  padding: 12px 18px; pointer-events: none;
}
.battle-hud.active { display: flex; }
.battle-hud .btn { pointer-events: auto; background: rgba(239,230,208,.88); }
.hud-left { background: rgba(239,230,208,.85); border: var(--line); padding: 8px 14px; }
.hud-level { font-size: 16px; font-weight: bold; letter-spacing: .1em; font-family: var(--font-display); }
.hud-objective { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.hud-center { text-align: center; background: rgba(239,230,208,.85); border: var(--line); padding: 8px 18px; }
.hud-guard-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hud-bar { width: 180px; height: 10px; border: 1px solid var(--ink); background: var(--paper); }
.hud-bar div { height: 100%; background: var(--cinnabar); width: 100%; transition: width .3s; }
.hud-round { font-size: 12px; color: var(--ink-2); margin-top: 4px; letter-spacing: .2em; }
.hud-right { display: flex; flex-direction: column; gap: 8px; }

#round-banner {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%) scale(.9);
  font-family: var(--font-display);
  font-size: 42px; letter-spacing: .5em; text-indent: .5em; font-weight: bold;
  color: var(--ink); opacity: 0; pointer-events: none;
  text-shadow: 0 0 6px var(--paper);
}
#round-banner.show { animation: bannerIn 1.1s ease both; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.04); }
}

/* ═══════════ 结算页 ═══════════ */
#screen-settle { display: none; align-items: center; justify-content: center; }
#screen-settle.active { display: flex; }
.settle-card { width: min(560px, 92vw); }
.settle-card h2 { font-family: var(--font-display); font-size: 27px; letter-spacing: .12em; margin-bottom: 18px; text-align: center; }
.settle-card.win h2 { color: var(--indigo); }
.settle-card.pyrrhic h2 { color: var(--cinnabar); font-size: 24px; }
.settle-card.loss h2 { color: var(--ink-2); }

.ledger-lines { border-top: 1px dashed var(--ink-2); border-bottom: 1px dashed var(--ink-2); padding: 12px 4px; margin-bottom: 14px; }
.ll { display: flex; justify-content: space-between; padding: 5px 0; font-size: 15px; }
.ll.dim { color: var(--ink-2); font-size: 13px; }
.ll.total { border-top: 1px solid var(--ink); margin-top: 6px; padding-top: 9px; font-size: 17px; }
.ll.total b { font-size: 20px; }
.ll b.neg, .neg { color: var(--cinnabar); }

.pyrrhic-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 16px; margin-bottom: 14px; }
/* 中缝：撕纸线 */
.pyrrhic-cols { position: relative; }
.pyrrhic-cols::after {
  content: ""; grid-column: 2; grid-row: 1;
  background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 11px);
  width: 1px; margin: 4px 0;
}
.py-left, .py-right { padding: 6px 4px; font-size: 14px; line-height: 1.8; }
.py-left { color: var(--ink); }
.py-right { color: var(--ink-2); }
.py-h { font-family: var(--font-display); font-size: 19px; font-weight: bold; margin-bottom: 6px; letter-spacing: .15em; }
.py-left .py-h { color: var(--indigo); }
.py-right .py-h { color: var(--cinnabar); }

.settle-note { font-size: 13px; color: var(--ink-2); line-height: 1.9; text-align: center; }
.settle-seed { font-size: 11px; color: var(--ink-2); text-align: center; margin-top: 14px; opacity: .75; font-family: monospace; }
.settle-btns { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

/* ═══════════ 敌情面板（决策核心）═══════════ */
.lang-btn { position: absolute; right: 18px; top: 18px; z-index: 5; }
.topbar .lang-btn { position: static; }

.intel-panel {
  max-width: 1320px; margin: 10px auto 0; padding: 10px 20px 9px;
  border: 2px solid var(--cinnabar); background: var(--panel-ink);
  box-shadow: 4px 4px 0 rgba(166,58,46,.12);
}
.intel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.intel-head h3 { font-family: var(--font-display); font-size: 16px; letter-spacing: .35em; color: var(--cinnabar); }
.intel-obj-text { font-size: 13px; color: var(--ink-2); }
.intel-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }

/* ── 可视化 · 分区小标题 ── */
.intel-sub {
  font-size: 11.5px; letter-spacing: .3em; color: var(--cinnabar);
  border-bottom: 1px dashed rgba(166,58,46,.3); margin-bottom: 6px; padding-bottom: 2px;
}

/* ── 可视化 · 守军兵种卡（队伍配置 + 装备情况）── */
.guard-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.guard-card {
  font-family: var(--font); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 30px 1fr; gap: 1px 7px; align-items: center;
  border: 1.5px solid var(--ink-2); background: var(--paper);
  padding: 6px 8px; min-width: 150px; flex: 1 1 150px; max-width: 236px;
  transition: transform .08s, background .12s, box-shadow .12s, opacity .12s;
}
.guard-card:hover { transform: translateY(-2px); background: #fff; }
.guard-card.hl { border-color: var(--cinnabar); background: rgba(166,58,46,.06); box-shadow: 3px 3px 0 rgba(166,58,46,.18); }
.guard-card.dim { opacity: .35; }
.gc-ico { grid-row: 1 / span 2; color: var(--cinnabar); display: flex; align-items: center; justify-content: center; }
.gc-name { font-weight: bold; font-size: 13.5px; white-space: nowrap; }
.gc-name b { color: var(--cinnabar); }
.gc-stats { font-size: 11px; color: var(--ink-2); }
.gc-gear { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.gc-chip {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; border: 1px solid var(--ink-2);
  padding: 1px 5px; background: var(--paper-2); pointer-events: none;
}
.gc-chip .ico { flex: 0 0 auto; }
.gc-atk { color: var(--indigo); }
.gc-prot { color: var(--cinnabar); }

/* ── 可视化 · 攻防构成条（对手能力）── */
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.bar-label { flex: 0 0 48px; text-align: right; font-size: 12px; letter-spacing: .2em; color: var(--ink-2); }
.mixbar {
  flex: 1; display: flex; height: 26px;
  border: 1.5px solid var(--ink); background: var(--paper); overflow: hidden;
}
.mix-seg {
  font-family: var(--font); display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; min-width: 0; padding: 0 5px;
  border: none; border-right: 1px solid var(--ink); background: transparent;
  color: inherit; cursor: pointer; font-size: 11.5px;
  transition: background .12s, box-shadow .12s, opacity .12s;
}
.mix-seg:last-child { border-right: none; }
.mix-seg .ms-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-seg b { font-size: 10.5px; flex: 0 0 auto; }
.mix-seg:hover { background: rgba(43,38,32,.08); }
.mix-seg.hl { background: rgba(166,58,46,.14); box-shadow: inset 0 0 0 1.5px var(--cinnabar); }
.mix-seg.dim { opacity: .35; }
.mix-atk { color: var(--indigo); }
.mix-prot { color: var(--cinnabar); }

.intel-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.fact-chip { font-size: 11.5px; border: 1px dashed var(--ink-2); padding: 1px 7px; color: var(--ink-2); }
.intel-click-hint { font-size: 11px; color: var(--ink-2); opacity: .8; margin-top: 6px; }
.intel-tip { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(166,58,46,.35); font-size: 12.5px; line-height: 1.65; }
.intel-tip b { color: var(--cinnabar); letter-spacing: .1em; }

/* ── 检阅页三栏（立绘卡 / 军需 / 双方对比）── */
.muster-grid {
  display: grid; grid-template-columns: 1.05fr 1.7fr 236px;
  gap: 14px; padding: 12px 20px 18px; max-width: 1320px; margin: 0 auto;
  align-items: start;
}
/* 左：角色大立绘卡 */
.portrait-card {
  padding: 0 0 12px; overflow: hidden; display: flex; flex-direction: column;
  animation: fadein .4s ease both;
}
.mp-art-wrap {
  position: relative; flex: 0 0 auto; aspect-ratio: 3 / 3.4;
  border-bottom: var(--line); overflow: hidden; background: var(--paper-2);
}
.mp-art-wrap .d-stamp.big {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px;
  font-size: 46px; border-width: 3px; z-index: 0;
}
.d-stamp {
  border: 2px solid var(--cinnabar); color: var(--cinnabar); font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg); background: var(--paper);
}
.mp-art-wrap .d-portrait {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; z-index: 1;
  filter: sepia(.08) contrast(1.02);
}
.mp-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 5px 12px; background: rgba(43,38,32,.82); color: var(--paper);
  font-size: 14px; font-weight: bold; letter-spacing: .25em; text-align: center;
}
.mp-text {
  flex: 1; padding: 10px 14px; font-size: 13.5px; line-height: 1.85;
  color: var(--ink); min-height: 92px;
}
/* 右：双方对比面板 */
.compare-panel { display: flex; flex-direction: column; }
.cmp-sub {
  font-size: 12px; letter-spacing: .3em; color: var(--ink-2); margin: 2px 0 6px;
}
.roster-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; justify-content: center; }
.roster-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--indigo); background: rgba(62,92,118,.09);
  padding: 5px 11px; font-size: 13px;
  animation: fadein .3s ease both;
}
.roster-chip .ico { color: var(--indigo); flex: 0 0 auto; }
.roster-chip b { color: var(--indigo); }
.roster-chip i { font-style: normal; color: var(--ink-2); }
.roster-chip.rc-hero { border-color: var(--gold); background: rgba(201,162,39,.12); }
.roster-chip.rc-hero b { color: var(--gold); }
/* 雷达图 */
.radar-box { display: flex; align-items: center; justify-content: center; min-height: 178px; }
.radar-svg { width: 100%; max-width: 240px; }
/* 装备增益行：随出阵装备实时重算的数字反馈 */
.radar-delta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12.5px; margin-top: 4px; border-top: 1px dashed rgba(43,38,32,.25); padding-top: 6px;
}
.radar-delta .rd-label { color: var(--ink-2); letter-spacing: .12em; }
.radar-delta .rd-pos { color: var(--gold); font-weight: bold; }
.radar-delta .rd-none { color: var(--ink-2); font-style: italic; font-size: 12px; }
.radar-ring { fill: none; stroke: rgba(43,38,32,.22); stroke-width: 1; }
.radar-spoke { stroke: rgba(43,38,32,.22); stroke-width: 1; }
.radar-poly.us { fill: rgba(62,92,118,.30); stroke: var(--indigo); stroke-width: 2; }
.radar-poly.foe { fill: rgba(166,58,46,.22); stroke: var(--cinnabar); stroke-width: 2; stroke-dasharray: 5 3; }
/* ghost 基线（未装备我方）+ 装备增益楔形/端点（波段缩放版专用元素） */
.radar-poly.ghost { fill: rgba(62,92,118,.08); stroke: rgba(62,92,118,.55); stroke-width: 1.4; stroke-dasharray: 4 4; }
.radar-wedge { stroke: #f2c81e; stroke-width: 5; stroke-linecap: round; opacity: .92; transition: opacity .2s; }
.radar-tip { fill: #f2c81e; stroke: var(--ink); stroke-width: 1; transition: opacity .2s; }
.radar-label {
  font-size: 11px; fill: var(--ink); text-anchor: middle; letter-spacing: .08em;
  paint-order: stroke; stroke: rgba(239,230,208,.9); stroke-width: 3px;
}
.radar-legend {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--ink-2); margin-top: 6px;
}
.radar-legend .lg { width: 22px; height: 10px; display: inline-block; border: 1.5px solid; }
.lg-us { background: rgba(62,92,118,.30); border-color: var(--indigo); }
.lg-foe { background: rgba(166,58,46,.22); border-color: var(--cinnabar); }
.lg-gain { background: #f2c81e; border-color: var(--ink); }
/* 英雄行（第二幕）：小立绘 + 装备位 */
.hero-row { display: flex; gap: 10px; align-items: stretch; }
.hero-portrait {
  width: 86px; align-self: flex-start; border: 2px solid var(--gold);
  object-fit: cover; object-position: top; aspect-ratio: 3 / 4;
}
.hero-body { flex: 1; min-width: 0; }

/* ── 仓库 / 出阵双框体 ── */
.gear-box {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px;
  padding: 7px; border: 1.5px dashed var(--ink-2); margin-bottom: 8px;
  background: var(--panel-ink);
}
/* 出阵框：视觉主角——居中排布 + 鎏金高亮呼吸（v0.6.2） */
.gear-box.loadout {
  border: 2px solid var(--gold);
  background: linear-gradient(rgba(201,162,39,.12), rgba(201,162,39,.12)), var(--panel-ink);
  justify-content: center; min-height: 52px; padding: 9px;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.28), inset 0 0 18px rgba(201,162,39,.06);
  animation: loadoutPulse 2.8s ease-in-out infinite;
}
@keyframes loadoutPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(201,162,39,.28), inset 0 0 18px rgba(201,162,39,.06); }
  50% { box-shadow: inset 0 0 0 2px rgba(201,162,39,.55), inset 0 0 30px rgba(201,162,39,.16); }
}
.eq-chip {
  font-family: var(--font); font-size: 13px; border: 1px solid var(--ink-2);
  padding: 4px 10px; background: var(--paper); cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
  transition: transform .08s;
}
.eq-chip:hover { transform: translateY(-2px); background: #fff; }
.eq-chip.in-wh { opacity: .75; border-style: dashed; }
.eq-chip .eq-v { color: var(--cinnabar); font-size: 12px; }
.eq-chip .eq-c { color: var(--ink-2); }
.eq-none { font-size: 13px; color: var(--ink-2); font-style: italic; align-self: center; }
.warehouse-hint { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.cap-note { font-size: 13px; color: var(--indigo); margin: 4px 0 10px; min-height: 18px; }
.cap-note.warn { color: var(--cinnabar); }

/* ── 战斗 HUD：三条血条 ── */
.hud-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 3px 0; }
.hud-label { width: 84px; text-align: right; letter-spacing: .1em; white-space: nowrap; }
.atk-label { color: var(--indigo); } .def-label { color: var(--cinnabar); } .gate-label { color: var(--ink-2); }
.hud-bar { width: 170px; height: 10px; border: 1px solid var(--ink); background: var(--paper); }
.hud-bar.thin { height: 6px; width: 120px; }
.hud-bar div { height: 100%; width: 100%; transition: width .25s; }
.hud-bar .bar-atk { background: var(--indigo); } .hud-bar .bar-def { background: var(--cinnabar); } .hud-bar .bar-gate { background: var(--ink-2); }

/* ── 结算补充 ── */
.ll.commission-note { font-size: 12px; color: var(--ink-2); padding: 2px 0 6px; border-bottom: 1px dashed rgba(43,38,32,.25); }
.settle-dlg { margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--cinnabar); background: var(--paper-2); font-size: 13.5px; line-height: 1.8; text-align: left; }
.settle-dlg #settle-otto { font-weight: bold; color: var(--cinnabar); margin-right: 8px; }

/* ═══════════ 战役地图（剧情渲染）═══════════ */
#btn-map { display: inline-block; margin-top: 18px; }
.map-wrap {
  max-width: 1160px; margin: 0 auto; padding: 0 22px;
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-content: center;
  min-height: calc(100vh - 62px); box-sizing: border-box;
}
.map-card { padding: 22px 26px; position: relative; overflow: hidden; }
.map-sub { font-size: 13px; color: var(--ink-2); letter-spacing: .15em; margin-bottom: 10px; text-align: center; }
.camp-map { width: 100%; }
.camp-map svg { display: block; width: 100%; height: auto; }
/* 有美术底图时：路线/节点加纸色光晕，保证在丰富底图上可读 */
.map-card.has-art .map-route,
.map-card.has-art .map-node text {
  paint-order: stroke fill;
  stroke: rgba(239,230,208,.92);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.map-card.has-art .map-node circle.nd { stroke-width: 2.6; filter: drop-shadow(0 0 3px rgba(239,230,208,.95)); }
.map-card.has-art .map-node.st-lock { opacity: .92; }
.map-card.has-art .map-node.st-lock circle.nd { fill: rgba(239,230,208,.88); }
.map-card.has-art #camp-map > svg { background: rgba(239,230,208,.30); }

.map-route { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.map-route.done { stroke: var(--indigo); stroke-width: 3; stroke-dasharray: none; }
.map-node { cursor: pointer; }
.map-node circle.nd {
  fill: var(--paper); stroke: var(--ink); stroke-width: 1.8;
  transition: transform .12s;
}
.map-node text.nd-n { font-family: var(--font-display); font-size: 16px; fill: var(--ink); text-anchor: middle; font-weight: bold; }
.map-node.st-lock text.nd-n { fill: var(--ink-2); font-size: 15px; }
.map-node text.nd-name { font-size: 12.5px; fill: var(--ink); text-anchor: middle; }
.map-node text.nd-terr { font-size: 10.5px; fill: var(--ink-2); text-anchor: middle; letter-spacing: .1em; }
.map-node:hover circle.nd { transform: translateY(-2px); }
.map-node.st-done circle.nd { fill: var(--indigo); stroke: var(--atkd, #2c4358); }
.map-node.st-done text.nd-n { fill: var(--paper); }
.map-node.st-done text.nd-name { fill: var(--indigo); }
.map-node.st-cur circle.nd { fill: var(--cinnabar); stroke: var(--ink); }
.map-node.st-cur text.nd-n { fill: var(--paper); }
.map-node.st-cur text.nd-name { fill: var(--cinnabar); font-weight: bold; }
.map-node.st-cur circle.pulse {
  fill: none; stroke: var(--cinnabar); stroke-width: 1.5;
  animation: nodePulse 1.6s ease-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes nodePulse {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.55); opacity: 0; }
}
.map-node.st-lock { opacity: .38; cursor: not-allowed; }
.map-node.st-lock circle.nd { stroke-dasharray: 3 3; }
.map-compass { font-family: var(--font-display); font-size: 13px; fill: var(--ink-2); letter-spacing: .2em; }
.map-deco { stroke: var(--ink-2); fill: none; stroke-width: 1.2; opacity: .5; }

/* ── 战前简报 ── */
.briefing { padding: 20px 24px; min-height: 220px; }
.brief-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.brief-head h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: .25em; color: var(--cinnabar); }
.brief-pick { font-size: 14px; color: var(--ink-2); font-style: italic; padding: 30px 0; text-align: center; }
#brief-title { font-size: 20px; font-weight: bold; margin: 4px 0 10px; letter-spacing: .08em; }
#brief-text { font-size: 14.5px; line-height: 2; min-height: 88px; color: var(--ink); }
#brief-text.typing::after { content: "▍"; color: var(--cinnabar); animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.brief-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.brief-facts .fact-chip { font-size: 12px; border: 1px dashed var(--ink-2); padding: 2px 8px; color: var(--ink-2); }
#btn-go { width: 100%; }

/* ── 英雄（第二幕解锁）── */
.hero-h { color: var(--gold); }
.hero-stat { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.7; }
.gear-box.hero { border-style: solid; border-color: var(--gold); background: rgba(201,162,39,.05); }
.eq-chip.hero-chip { border-color: var(--gold); }
.eq-chip.hero-chip .eq-n::before { content: "★ "; color: var(--gold); }
.shop-item.tier-T3 { border-left: 3px solid var(--cinnabar); }
.si-hero-tag { font-size: 10.5px; color: var(--gold); letter-spacing: .1em; border: 1px solid var(--gold); padding: 0 4px; margin-left: 6px; }

/* ── 窄屏 ── */
@media (max-width: 860px) {
  .muster-grid { grid-template-columns: 1fr 1fr; }
  .portrait-card { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; }
  .mp-art-wrap { aspect-ratio: auto; min-height: 220px; }
  .lv-grid { grid-template-columns: repeat(2, 1fr); }
  .hud-center { display: none; }
  .intel-body { grid-template-columns: 1fr; }
  .map-wrap { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   v0.6.2 氛围与动效（检阅页）：鎏金角饰 / 入场编排 / 按钮流光 / 卡片悬停
   ════════════════════════════════════════════════════════════════ */

/* 鎏金角饰：三栏面板 + 敌情面板四角描金（游戏感边框） */
.panel, .portrait-card, .intel-panel { position: relative; }
.panel::after, .portrait-card::after, .intel-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  --oc: rgba(201,162,39,.8);
  background:
    linear-gradient(var(--oc), var(--oc)) left top / 16px 2px,
    linear-gradient(var(--oc), var(--oc)) left top / 2px 16px,
    linear-gradient(var(--oc), var(--oc)) right top / 16px 2px,
    linear-gradient(var(--oc), var(--oc)) right top / 2px 16px,
    linear-gradient(var(--oc), var(--oc)) left bottom / 16px 2px,
    linear-gradient(var(--oc), var(--oc)) left bottom / 2px 16px,
    linear-gradient(var(--oc), var(--oc)) right bottom / 16px 2px,
    linear-gradient(var(--oc), var(--oc)) right bottom / 2px 16px;
  background-repeat: no-repeat;
}

/* 面板入场编排：立绘卡 → 军需 → 对比，依次浮起 */
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#screen-muster .portrait-card, #screen-muster .muster-mid,
#screen-muster .compare-panel, #screen-muster .intel-panel { animation: riseIn .45s ease both; }
#screen-muster .muster-mid { animation-delay: .07s; }
#screen-muster .compare-panel { animation-delay: .14s; }

/* 出战按钮：鎏金流光扫过（主行动按钮的游戏感） */
#btn-fight { position: relative; overflow: hidden; }
#btn-fight::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(239,230,208,.5), transparent);
  transform: skewX(-18deg);
  animation: sheen 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes sheen { 0%, 55% { left: -60%; } 85%, 100% { left: 135%; } }

/* 装备卡悬停：浮起 + 描金（可点击暗示，军需官建议的入口） */
.shop-item { transition: transform .1s, border-color .12s, box-shadow .12s; }
.shop-item:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 3px 3px 0 rgba(201,162,39,.28); cursor: pointer; }

/* 装备 chip 弹入（backwards 结束后不占用 transform，悬停位移不受影响） */
@keyframes chipPop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
.eq-chip { animation: chipPop .2s ease backwards; }

/* 顾问名牌微动效：换顾问时名牌闪一下 */
.mp-name { transition: background .2s; }

/* ════════════════════════════════════════════════════════════════
   v0.6.3 开始画面 / 黑市弹窗 / 两军对照布局
   ════════════════════════════════════════════════════════════════ */

/* ── 开始画面（继续 / 重置存档）── */
#screen-start { display: none; align-items: center; justify-content: center; }
#screen-start.active { display: flex; }
.start-card { width: min(560px, 92vw); text-align: center; position: relative; }
.start-save { margin-top: 4px; }
.ss-btn { margin-top: 14px; }
.ss-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.ss-meta span { border: 1px dashed var(--ink-2); padding: 2px 10px; }
.ss-meta .ss-when { border-style: none; font-size: 12px; }
.start-new { margin-top: 4px; }
.new-confirm { margin-top: 10px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13.5px; color: var(--cinnabar); flex-wrap: wrap; }
.btn.danger { border-color: var(--cinnabar); color: var(--cinnabar); }
.btn.danger:hover:not(:disabled) { background: rgba(166,58,46,.08); }

/* ── 军需铺头部：标题 + 黑市入口（v0.6.5 强化：异色高亮 + 辉光脉冲 + 流光）── */
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.shop-head .panel-h { flex: 1; margin-bottom: 0; }
.market-btn {
  flex: 0 0 auto; position: relative; overflow: hidden;
  border-color: var(--cinnabar); color: #fff; font-weight: bold;
  background: var(--cinnabar); letter-spacing: .1em;
  box-shadow: 2px 2px 0 rgba(166,58,46,.3);
  text-shadow: 0 1px 0 rgba(43,38,32,.4);
  animation: bmGlow 2.2s ease-in-out infinite;
}
.market-btn:hover:not(:disabled) { background: #b8463a; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(166,58,46,.4); }
@keyframes bmGlow {
  0%, 100% { box-shadow: 2px 2px 0 rgba(166,58,46,.3), 0 0 0 rgba(201,162,39,0); }
  50% { box-shadow: 2px 2px 0 rgba(166,58,46,.45), 0 0 14px rgba(201,162,39,.55); }
}
.market-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,246,224,.55), transparent);
  transform: skewX(-18deg);
  animation: sheen 2.8s ease-in-out infinite; pointer-events: none;
}

/* ── 黑市弹窗 ── */
.market-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.market-modal[hidden] { display: none; }
.market-backdrop { position: absolute; inset: 0; background: rgba(26,22,17,.62); }
.market-card {
  position: relative; width: min(760px, 94vw); max-height: 88vh; overflow-y: auto;
  border: 2px solid var(--cinnabar); box-shadow: 8px 10px 0 rgba(26,22,17,.45);
  animation: riseIn .3s ease both;
}
.market-close { position: absolute; right: 14px; top: 14px; z-index: 2; }
.market-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; padding-right: 70px; }
.market-title { font-family: var(--font-display); font-size: 24px; letter-spacing: .4em; color: var(--cinnabar); }
.market-sub { font-size: 13px; color: var(--ink-2); flex: 1; }
.market-line { min-height: 22px; font-size: 14px; color: var(--ink-2); font-style: italic; margin-bottom: 10px; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.market-item { border-color: var(--cinnabar); background: #f7ead7; }
.market-item.tier-T4 { border-left: 3px solid var(--gold); }
.mi-badge {
  position: absolute; right: 8px; top: 8px; font-size: 11px;
  border: 1.5px solid var(--cinnabar); color: var(--cinnabar);
  padding: 1px 6px; letter-spacing: .2em; transform: rotate(4deg);
  background: rgba(255,252,244,.85);
}
.mi-sold { font-weight: bold; color: var(--cinnabar); letter-spacing: .15em; }
.market-foot { margin-top: 12px; font-size: 14px; text-align: right; }
.market-foot b { color: var(--gold); font-size: 17px; }

/* ── 我方编成卡（与守军 guard-card 同构，靛色系区分）── */
.our-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.guard-card.ours { border-color: var(--indigo); background: rgba(62,92,118,.05); cursor: default; }
.guard-card.ours:hover { background: rgba(62,92,118,.09); transform: none; }
.guard-card.ours .gc-ico { color: var(--indigo); }
.guard-card.ours .gc-name b { color: var(--indigo); }

/* ════════════════════════════════════════════════════════════════
   v0.6.4 兵力方阵条 / 黑市行情 / 全团 BUFF / 五级结算
   ════════════════════════════════════════════════════════════════ */

/* ── 兵力方阵对比条（敌我两带方阵小人，全宽横条）── */
.formation-strip { max-width: 1320px; margin: 10px auto 0; }
.fm-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.fm-title { flex: 1; text-align: center; font-family: var(--font-display); font-size: 13px; letter-spacing: .3em; color: var(--ink-2); }
.fm-foe-name { color: var(--cinnabar); font-size: 12px; letter-spacing: .2em; }
.fm-us-name { color: var(--indigo); font-size: 12px; letter-spacing: .2em; }
.fm-lane { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start; }
.fm-lane.fm-foe { justify-content: flex-start; }
.fm-lane.fm-us { justify-content: flex-end; }
.fm-unit {
  border: 1px solid var(--ink-2); padding: 4px 6px 3px; background: var(--paper);
  animation: chipPop .25s ease backwards;
}
.fm-unit.fm-foe { color: var(--cinnabar); border-color: rgba(166,58,46,.55); background: rgba(166,58,46,.045); }
.fm-unit.fm-us { color: var(--indigo); border-color: rgba(62,92,118,.55); background: rgba(62,92,118,.045); }
.fm-grid { display: grid; gap: 1px; justify-items: center; }
.fm-n { display: block; font-size: 10.5px; color: var(--ink-2); margin-top: 2px; letter-spacing: .08em; white-space: nowrap; }
.fm-mid {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 6px 0; border-top: 1px dashed var(--ink-2); border-bottom: 1px dashed var(--ink-2); padding: 3px 0;
}
.fm-vs { font-family: var(--font-display); font-weight: bold; color: var(--gold); letter-spacing: .2em; font-size: 13px; }
.fm-total { font-size: 12.5px; color: var(--ink-2); }
.fm-total b { color: var(--ink); }
.fm-total i { font-style: normal; color: var(--gold); margin: 0 4px; }
.fm-empty { color: var(--ink-2); font-style: italic; font-size: 12px; }

/* ── 军需顾问席（v0.6.7 任命制）：回合开始先选一位随军顾问 ── */
.advisor-bar { max-width: 1320px; margin: 12px auto 0; }
.ab-head { display: flex; align-items: baseline; gap: 14px; }
.ab-head .panel-h { flex: 0 0 auto; margin-bottom: 0; }
.ab-sub { font-size: 12px; color: var(--ink-2); font-style: italic; }
.ab-seats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.seat {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 13px; color: var(--ink);
  border: 1px solid var(--ink-2); background: var(--paper);
  padding: 5px 12px 5px 6px; cursor: pointer; text-align: left;
  animation: chipPop .25s ease backwards;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.seat .seat-stamp {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-weight: bold; font-size: 13px;
  background: var(--paper-2); color: var(--ink); flex: 0 0 auto;
}
.seat .seat-name { line-height: 1.2; }
.seat .seat-role { display: block; font-size: 10.5px; color: var(--ink-2); letter-spacing: .06em; }
.seat:hover { transform: translateY(-1px); border-color: var(--ink); }
.seat.active {
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, rgba(242,200,30,.16), transparent 70%), var(--paper);
  box-shadow: 0 2px 0 rgba(26,22,17,.28);
  padding: 4px 11px 4px 5px;
}
.seat.active .seat-stamp { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.seat.locked { opacity: .5; cursor: not-allowed; filter: saturate(.4); }
.seat.locked .seat-stamp { border-style: dashed; }
.seat .seat-lock { font-size: 10.5px; color: var(--ink-2); letter-spacing: .05em; }

/* ── 佣兵契（v0.6.8）：新兵种进战场的通道 ── */
.merc-bar { max-width: 1320px; margin: 10px auto 0; }
.seat.merc { border-style: dashed; }
.seat.merc:not(.locked):not(.broke):hover { border-style: solid; }
.seat.merc.active { border-style: solid; }
.seat.merc.broke { opacity: .55; }
.seat.merc .seat-stamp { display: inline-flex; align-items: center; justify-content: center; }
.seat.merc .seat-lock.hired { color: var(--gold); font-weight: bold; }

/* ── 相型装备 chips（atkType/protType）── */
.buff-chip.bc-unit { color: var(--ink); border-color: var(--ink-2); background: rgba(90,81,66,.07); }

/* ── 敌情页克制签（v0.6.8 counter.js）：构成条下方的即时提示层 ── */
.ctr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.ctr-h { font-size: 10.5px; color: var(--ink-2); letter-spacing: .12em; margin-right: 2px; }
.ctr-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; padding: 0 5px; border: 1px solid var(--ink-2);
  background: rgba(255,252,244,.8); white-space: nowrap;
}
.ctr-good { color: var(--cinnabar); border-color: var(--cinnabar); }
.ctr-wear { color: var(--indigo); border-color: var(--indigo); }

/* ── 军略轮盘（v0.6.8 典籍「军略一图」章节）── */
.wheel { width: 100%; max-width: 500px; margin: 8px auto; display: block; }
.wheel .wn rect { fill: rgba(255,252,244,.75); stroke: var(--ink-2); stroke-width: 1; }
.wheel .wn text { font-size: 13px; fill: var(--ink); }
.wheel .wn-atk rect { stroke: var(--indigo); }
.wheel .wn-prot rect { stroke: var(--cinnabar); }
.wheel .wl { fill: none; stroke-width: 2; }
.wheel .wl-good { stroke: var(--gold); }
.wheel .wl-bad { stroke: var(--ink-2); stroke-dasharray: 4 4; stroke-width: 1.2; opacity: .75; }
.wheel .wlm { font-size: 10.5px; text-anchor: middle; }
.wheel .wlm-good { fill: var(--gold); font-weight: bold; }
.wheel .wlm-bad { fill: var(--ink-2); }
.wheel .w-legend text { font-size: 11px; fill: var(--ink-2); }

/* ── 黑市行情签（便宜/公道/昂贵）── */
.mi-tag {
  position: absolute; left: 8px; top: 8px; font-size: 10.5px; padding: 0 6px;
  border: 1px solid var(--ink-2); letter-spacing: .12em; background: rgba(255,252,244,.85);
}
.mi-tag-cheap { color: var(--indigo); border-color: var(--indigo); }
.mi-tag-fair { color: var(--ink-2); }
.mi-tag-steep { color: var(--cinnabar); border-color: var(--cinnabar); }

/* ── 全团 BUFF chips（军旗/号角/战鼓）── */
.buff-chip {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: bold;
  border: 1px solid var(--gold); color: var(--gold); padding: 0 5px;
  background: rgba(201,162,39,.09); white-space: nowrap;
}
.buff-chip + .buff-chip { margin-left: 4px; }
.bc-atk { color: var(--cinnabar); border-color: var(--cinnabar); background: rgba(166,58,46,.07); }
.bc-def { color: var(--indigo); border-color: var(--indigo); background: rgba(62,92,118,.07); }

/* ── 五级结算卡面 ── */
#screen-settle .screen-art { opacity: .3; }
#screen-settle .screen-art.has-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(239,230,208,.42), rgba(239,230,208,.78));
}
.settle-emblem { display: flex; justify-content: center; margin-bottom: 4px; }
.settle-card.tier-flawless h2 { color: var(--gold); }
.settle-card.tier-decisive h2 { color: var(--indigo); }
.settle-card.tier-pyrrhic h2 { color: var(--cinnabar); }
.settle-card.tier-retreat h2 { color: var(--ink-2); }
.settle-card.tier-rout h2 { color: var(--cinnabar); font-size: 24px; }
.settle-card.tier-flawless #settle-emblem { color: var(--gold); }
.settle-card.tier-decisive #settle-emblem { color: var(--indigo); }
.settle-card.tier-pyrrhic #settle-emblem { color: var(--cinnabar); }
.settle-card.tier-retreat #settle-emblem { color: var(--ink-2); }
.settle-card.tier-rout #settle-emblem { color: var(--cinnabar); }
.settle-card.tier-flawless { border-color: var(--gold); box-shadow: 6px 6px 0 rgba(201,162,39,.32); }
.settle-card.tier-rout { border-color: var(--cinnabar); box-shadow: 6px 6px 0 rgba(166,58,46,.25); }

/* ── 装备回收声明区 ── */
.gear-report { border-top: 1px dashed var(--ink-2); margin-top: 4px; padding: 8px 4px 2px; }
.gr-h { font-family: var(--font-display); font-size: 13px; letter-spacing: .3em; color: var(--ink-2); margin-bottom: 4px; }
.gear-report .ll { font-size: 13.5px; }
.gear-report .ll b { text-align: right; }
.gr-rec b { color: var(--indigo); }
.gr-lost span { color: var(--cinnabar); }
.gr-lost b { color: var(--cinnabar); }
.gr-note { font-size: 12px; color: var(--ink-2); font-style: italic; text-align: right; margin-top: 3px; }
.ll.gr-flawless b { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   v0.6.5 同侧对位对比 / 黑市换批费 / 装备详情 / 书籍 / 润色
   ════════════════════════════════════════════════════════════════ */

/* ── 同侧对位对比表（duel.js）：每兵种一行 [守军 | 徽记 | 我方] ── */
.duel-table { display: flex; flex-direction: column; gap: 4px; }
.duel-hrow {
  display: grid; grid-template-columns: 1fr 30px 1fr; gap: 6px; align-items: center;
  font-size: 11px; letter-spacing: .2em;
}
.dh-foe { color: var(--cinnabar); }
.dh-us { color: var(--indigo); text-align: right; }
.duel-row {
  display: grid; grid-template-columns: 1fr 30px 1fr; gap: 6px; align-items: stretch;
  animation: chipPop .3s ease backwards;
}
.duel-row:nth-child(odd) { animation-delay: .04s; }
.duel-row:hover .duel-cell { transform: translateY(-1px); box-shadow: 2px 2px 0 rgba(43,38,32,.16); }
.duel-mid {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); border-left: 1px dashed rgba(43,38,32,.3);
  border-right: 1px dashed rgba(43,38,32,.3);
}
.duel-cell { min-width: 0; max-width: none; flex: none; cursor: default; padding: 4px 7px; }
.guard-card.duel-cell.foe { border-color: rgba(166,58,46,.6); background: rgba(166,58,46,.04); }
.guard-card.duel-cell.foe .gc-ico, .guard-card.duel-cell.foe .gc-name b { color: var(--cinnabar); }
.guard-card.duel-cell.us { border-color: rgba(62,92,118,.6); background: rgba(62,92,118,.04); text-align: right; }
.guard-card.duel-cell.us .gc-ico { order: 2; color: var(--indigo); }
.guard-card.duel-cell.us .gc-name { order: 1; }
.guard-card.duel-cell.us .gc-name b { color: var(--indigo); }
.guard-card.duel-cell.us .gc-stats { order: 0; }
.guard-card.duel-cell.us .gc-stats i { color: var(--gold); font-style: normal; font-weight: bold; }
.guard-card.duel-cell.empty { display: flex; align-items: center; justify-content: center; opacity: .35; }
.gc-none { color: var(--ink-2); }

/* ── 黑市换批费：按钮标价 + 付不起置灰 ── */
#btn-market-restock { position: relative; }
#btn-market-restock:disabled { opacity: .45; }

/* ── 装备详情放大图（羊皮纸留底）── */
.detail-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.detail-modal[hidden] { display: none; }
.detail-backdrop { position: absolute; inset: 0; background: rgba(26,22,17,.66); }
.detail-card {
  position: relative; width: min(720px, 94vw);
  border: 2px solid var(--ink); box-shadow: 8px 10px 0 rgba(26,22,17,.45);
  animation: riseIn .28s ease both;
}
.detail-close { position: absolute; right: 14px; top: 14px; z-index: 2; }
.detail-body { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: stretch; }
.detail-art-wrap {
  background:
    repeating-linear-gradient(0deg, rgba(43,38,32,.03) 0 1px, transparent 1px 4px),
    var(--paper-2);
  border: 1.5px solid var(--ink-2); box-shadow: inset 0 0 26px rgba(43,38,32,.14);
  min-height: 300px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* 留底图：装备图之下垫羊皮纹 + 檀木角饰 */
.detail-art-wrap::before {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  --oc: rgba(201,162,39,.7);
  background:
    linear-gradient(var(--oc), var(--oc)) left top / 14px 2px,
    linear-gradient(var(--oc), var(--oc)) left top / 2px 14px,
    linear-gradient(var(--oc), var(--oc)) right top / 14px 2px,
    linear-gradient(var(--oc), var(--oc)) right top / 2px 14px,
    linear-gradient(var(--oc), var(--oc)) left bottom / 14px 2px,
    linear-gradient(var(--oc), var(--oc)) left bottom / 2px 14px,
    linear-gradient(var(--oc), var(--oc)) right bottom / 14px 2px,
    linear-gradient(var(--oc), var(--oc)) right bottom / 2px 14px;
  background-repeat: no-repeat;
}
.detail-art-wrap.src-bm { background-color: #f3e6cf; }
.detail-art-wrap img { max-width: 92%; max-height: 320px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(43,38,32,.28)); }
.detail-info { padding: 8px 26px 8px 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.detail-nameline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.detail-name { font-family: var(--font-display); font-size: 24px; font-weight: bold; letter-spacing: .08em; }
.detail-tier { font-size: 12px; color: var(--ink-2); letter-spacing: .18em; border: 1px solid var(--ink-2); padding: 1px 8px; }
.detail-stats { font-size: 17px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-stats b { color: var(--cinnabar); font-size: 19px; }
.detail-desc { font-size: 14px; line-height: 1.9; color: var(--ink); border-top: 1px dashed rgba(43,38,32,.3); padding-top: 8px; }
.detail-meta { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.detail-meta .dm-src { border: 1px dashed var(--ink-2); padding: 2px 8px; font-style: italic; }
.detail-meta .dm-price { color: var(--gold); font-weight: bold; font-size: 15px; }
/* 缩略图可点暗示：放大光标 + 悬停微扩 */
.shop-item .si-art { cursor: zoom-in; transition: transform .12s ease; }
.shop-item .si-art:hover { transform: scale(1.04); }

/* ── 书籍（通用 book.js）：书匣 + 左目录右页 + 翻页动效 ── */
.book-root {
  position: relative; z-index: 1; max-width: 980px; margin: 4vh auto 0;
  padding: 0 20px 30px;
}
.book-frame {
  position: relative; display: grid; grid-template-columns: 240px 1fr;
  min-height: 62vh; padding: 0; overflow: hidden;
  border-width: 2px; box-shadow: 10px 12px 0 rgba(43,38,32,.28);
}
.book-spine {
  position: absolute; left: 240px; top: 0; bottom: 0; width: 10px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(43,38,32,.28) 0 2px, rgba(43,38,32,.1) 2px 5px, transparent 5px 10px);
}
.book-close { position: absolute; right: 14px; top: 14px; z-index: 5; }
.book-toc {
  background: var(--paper-2); border-right: 1.5px solid var(--ink);
  padding: 52px 14px 14px; display: flex; flex-direction: column; gap: 5px;
}
.btoc-h { font-family: var(--font-display); font-size: 12px; letter-spacing: .3em; color: var(--ink-2); margin-bottom: 8px; border-bottom: 1px dashed rgba(43,38,32,.3); padding-bottom: 6px; }
.btoc-item {
  font-family: var(--font); display: flex; align-items: center; gap: 8px; text-align: left;
  font-size: 13.5px; padding: 7px 9px; border: 1px solid transparent; background: transparent;
  cursor: pointer; color: var(--ink); transition: background .12s, border-color .12s;
}
.btoc-item:hover { background: rgba(43,38,32,.05); }
.btoc-item.cur { border-color: var(--gold); background: rgba(201,162,39,.1); font-weight: bold; }
.btoc-ico { flex: 0 0 auto; color: var(--cinnabar); display: inline-flex; }
.btoc-t { min-width: 0; }
.book-page { padding: 46px 34px 20px; display: flex; flex-direction: column; min-width: 0; }
.book-page.flip { animation: pageFlip .38s ease both; }
@keyframes pageFlip {
  from { opacity: 0; transform: translateX(14px) rotateY(-4deg); }
  to { opacity: 1; transform: none; }
}
.bp-title {
  font-family: var(--font-display); font-size: 21px; letter-spacing: .12em;
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 8px;
}
.bp-ico, .bp-cover ~ .bp-intro { flex: 0 0 auto; }
.bp-title .bk-ico { color: var(--cinnabar); }
.bp-body { flex: 1; font-size: 14.5px; line-height: 2; }
.bp-body p { margin-bottom: 10px; text-indent: 2em; }
.bp-body p:first-of-type::first-letter { font-size: 1.5em; font-family: var(--font-display); color: var(--cinnabar); }
.bp-body.bp-intro { font-style: italic; color: var(--ink-2); }
.bp-body.bp-intro p { text-indent: 0; }
.bp-cover { justify-content: center; font-size: 30px; border-bottom: none; margin-top: 8vh; }
.bp-cover ~ .bp-body.bp-intro { text-align: center; max-width: 400px; margin: 0 auto; }
.bk-ico { display: inline-flex; vertical-align: -3px; }
.bk-ico.u { color: var(--indigo); }
.bk-atk { white-space: nowrap; }
.bk-atk .ico { vertical-align: -2px; }
.bk-trait { font-size: 12px; color: var(--ink-2); }
.bp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.bp-table th {
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: .1em; text-align: left;
  border-bottom: 1.5px solid var(--ink); padding: 5px 7px; white-space: nowrap;
}
.bp-table td { border-bottom: 1px dashed rgba(43,38,32,.25); padding: 6px 7px; vertical-align: middle; }
.bp-table tr:hover td { background: rgba(201,162,39,.06); }
.mcell { font-variant-numeric: tabular-nums; font-weight: bold; }
.mcell.good { color: var(--cinnabar); }
.mcell.bad { color: var(--indigo); }
.bk-tier { font-weight: bold; letter-spacing: .08em; }
.lv-flawless { color: var(--gold); } .lv-decisive { color: var(--indigo); }
.lv-pyrrhic { color: var(--cinnabar); } .lv-retreat { color: var(--ink-2); } .lv-rout { color: var(--cinnabar); }
.bp-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border-top: 1px dashed rgba(43,38,32,.3); margin-top: 16px; padding-top: 10px;
}
.bp-num { font-size: 12.5px; color: var(--ink-2); letter-spacing: .2em; min-width: 64px; text-align: center; }

/* ── 开始画面书籍入口 ── */
.start-links { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
#btn-codex-t { margin-top: 12px; }

/* ═══════════ 全局润色（v0.6.5）：动效统一与排印规范 ═══════════ */
/* 结算纹章落款：从虚入实 + 轻微下压 */
.settle-emblem { animation: emblemDrop .5s cubic-bezier(.2,.8,.3,1.2) both .15s; }
@keyframes emblemDrop { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
/* 面板底图卡片压暗不变，黑市卡内图与详情同款缩放 */
.market-item .si-art { cursor: zoom-in; transition: transform .12s ease; }
.market-item .si-art:hover { transform: scale(1.04); }
/* 尊重系统的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── EN 排印补全（英文界面零中文字符）── */
html:lang(en) .title-logo .zh { display: none; }
html:lang(en) .title-card::before,
html:lang(en) .start-card::before { content: 'Q'; font-family: var(--font-display); }
html:lang(en) .fm-n, html:lang(en) .btoc-t { letter-spacing: .02em; }
html:lang(en) .bp-body { line-height: 1.75; }
html:lang(en) .bp-body p { text-indent: 0; }
html:lang(en) .bp-body p:first-of-type::first-letter { font-size: 1em; color: inherit; font-family: inherit; }
html:lang(en) .detail-name, html:lang(en) .market-title, html:lang(en) .bp-title { letter-spacing: .05em; }

/* ══════════ v0.6.6 过场剧情 / 破产清算 / 战斗快报 / 传奇装备 ══════════ */

/* ── 过场剧情屏：全屏底图 + 底部字幕卡 ── */
.story-root {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 4vh 4vw 6vh; pointer-events: none;
}
.story-card {
  width: min(860px, 92vw); pointer-events: auto;
  padding: 26px 34px 22px; position: relative;
  animation: riseIn .5s ease both;
}
.story-card::after {   /* 鎏金角饰（与结算卡同语汇） */
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(201, 162, 39, .35);
  -webkit-mask: linear-gradient(#000 0 0) top left/26px 26px no-repeat,
    linear-gradient(#000 0 0) top right/26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom left/26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom right/26px 26px no-repeat;
          mask: linear-gradient(#000 0 0) top left/26px 26px no-repeat,
    linear-gradient(#000 0 0) top right/26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom left/26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom right/26px 26px no-repeat;
}
.story-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.story-kicker {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cinnabar); font-weight: bold;
}
.story-step { font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
#story-title { margin: 6px 0 10px; font-size: 24px; }
.story-text {
  min-height: 96px; font-size: 15.5px; line-height: 1.85; color: var(--ink);
}
.story-text.typing::after { content: '▏'; opacity: .55; animation: caret 1s steps(1) infinite; }
.story-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
@keyframes caret { 50% { opacity: 0; } }
/* 底图压暗（文字可读性）：剧情屏激活时给画面加纱 */
#screen-story.active #story-art { filter: brightness(.72) saturate(.92); }

/* ── 破产清算：债务横幅 + 流放横幅 ── */
.debt-note {
  margin: 8px 0; padding: 10px 14px;
  border: 1.5px dashed var(--cinnabar); background: rgba(166, 58, 46, .06);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  animation: riseIn .4s ease both;
}
.debt-line { font-size: 13.5px; color: var(--cinnabar); font-weight: bold; }
.debt-empty { font-size: 12.5px; color: var(--ink-dim); }
.exile-banner {
  margin: 10px 0; padding: 10px 16px;
  border-left: 4px solid var(--cinnabar); background: rgba(166, 58, 46, .07);
  color: var(--cinnabar); font-weight: bold; font-size: 13.5px;
  animation: riseIn .5s ease both;
}

/* ── 战斗文字快报（底部居中滚动栈）── */
.battle-ticker {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px;
  pointer-events: none; width: min(640px, 80vw);
}
.tick-line {
  font-size: 13px; color: var(--ink); letter-spacing: .03em;
  padding: 3px 14px; border-radius: 999px;
  background: rgba(239, 230, 208, .82); border: 1px solid rgba(43, 38, 32, .18);
  box-shadow: 0 1px 0 rgba(43, 38, 32, .08);
  animation: tickIn .28s ease both; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
}
.tick-line.tk-round { color: var(--ink); font-weight: bold; letter-spacing: .12em; background: rgba(239,230,208,.94); }
.tick-line.tk-crit { color: var(--cinnabar); font-weight: bold; }
.tick-line.tk-kill { color: var(--cinnabar); font-weight: bold; border-color: var(--cinnabar); }
.tick-line.tk-gate { color: #7c5a16; font-weight: bold; }
.tick-line.fade { opacity: 0; transition: opacity .6s ease; }
.tick-line:nth-last-child(n+3) { opacity: .62; }
.tick-line:nth-last-child(n+4) { opacity: .34; }
@keyframes tickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 战斗图例（左下角：装备辨识色语）── */
.battle-legend {
  position: absolute; left: 14px; bottom: 12px; z-index: 6;
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.bl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink);
  background: rgba(239, 230, 208, .78); border: 1px solid rgba(43, 38, 32, .15);
  border-radius: 999px; padding: 2px 10px 2px 6px;
}
.bl-sw { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.bl-wpn { background: radial-gradient(circle, #ffd400 30%, #a07d00 100%); box-shadow: 0 0 5px rgba(255, 212, 0, .8); }
.bl-arm { background: radial-gradient(circle, #6ea6cf 30%, #33607f 100%); box-shadow: 0 0 5px rgba(79, 134, 176, .8); }
.bl-line { border-radius: 0; height: 3px; width: 18px; background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 7px); align-self: center; }

/* ── 传奇装备（LG）：卡面与徽记 ── */
.shop-item.legend { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .4), 0 0 14px rgba(201, 162, 39, .16); }
.shop-item.legend::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 212, 0, .14) 50%, transparent 58%);
  background-size: 240% 100%; animation: sheen 3.2s ease-in-out infinite;
}
.mi-legend {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 10px; font-weight: bold; letter-spacing: .12em;
  color: #6b5200; background: linear-gradient(180deg, #ffe9a8, #e3c25c);
  border: 1px solid #b8912a; border-radius: 3px; padding: 1px 6px;
}
.spec-chip {
  display: inline-block; margin-left: 5px;
  font-size: 11px; font-weight: bold; color: #6b5200;
  background: rgba(255, 233, 168, .55); border: 1px solid rgba(184, 145, 42, .55);
  border-radius: 3px; padding: 0 5px;
}
.detail-tier.tier-txt-LG { color: var(--gold); }

/* ── 阵型与席次（v0.6.9）：阵型选择条 + 行军序列槽位图 ── */
.formation-plan { max-width: 1320px; margin: 10px auto 0; }
.fp-head { display: flex; align-items: baseline; gap: 14px; }
.fp-head .panel-h { flex: 0 0 auto; margin-bottom: 0; }
.fp-sub { font-size: 12px; color: var(--ink-2); font-style: italic; }
.fp-seats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.seat.fmt { flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; }
.seat.fmt .fmt-mods { font-size: 10.5px; color: var(--ink-2); letter-spacing: .04em; }
.seat.fmt.active .fmt-mods { color: #6b5200; }

/* 行军序列槽位图：前排金带 / 中军素带 / 后队灰带，格 = 兵种徽 + 落位装备 */
.slot-map { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.sm-band { display: flex; align-items: stretch; gap: 5px; border: 1px dashed var(--ink-2); padding: 4px 6px; border-radius: 4px; }
.sm-band.b-front { border-color: rgba(201,162,39,.75); background: rgba(242,200,30,.07); }
.sm-band.b-rear { border-color: var(--ink-2); background: rgba(90,81,66,.05); }
.sm-band-l {
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 10px; letter-spacing: .2em; color: var(--ink-2);
  display: flex; align-items: center; padding: 2px 0;
}
.b-front .sm-band-l { color: #8a6d1a; }
.sm-cells { display: flex; flex-wrap: wrap; gap: 4px; max-width: 1080px; }
.sm-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 46px; padding: 4px 5px 3px; border: 1px solid var(--ink-2);
  background: var(--paper); border-radius: 3px; cursor: default;
}
.sm-cell .sm-ico { color: var(--indigo); line-height: 0; }
.sm-cell.sm-hero { border: 1.5px solid var(--gold); box-shadow: 0 0 0 1px rgba(201,162,39,.35); }
.sm-cell.sm-hero .sm-ico { color: var(--gold); }
.sm-gear {
  font-size: 9.5px; line-height: 1.25; max-width: 74px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  color: #6b5200; background: rgba(255,233,168,.5); border: 1px solid rgba(184,145,42,.5);
  border-radius: 2px; padding: 0 3px;
}
.sm-idx {
  position: absolute; top: -6px; right: -4px; font-style: normal;
  font-size: 9px; font-family: var(--font-display); font-weight: bold;
  background: var(--ink); color: var(--paper); border-radius: 50%;
  width: 14px; height: 14px; display: grid; place-items: center;
}
.sm-note { flex-basis: 100%; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }

/* 出阵装备 chip 的席号与调序钮（v0.6.9） */
.eq-chip { position: relative; }
.eq-chip .eq-slot {
  font-family: var(--font-display); font-weight: bold; font-size: 10.5px;
  color: var(--paper); background: var(--ink); border-radius: 50%;
  width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto;
}
.eq-move { display: inline-flex; flex-direction: column; gap: 0; margin-left: 2px; }
.eq-move .mv {
  font-style: normal; font-size: 8.5px; line-height: 1.1; cursor: pointer;
  color: var(--ink-2); padding: 0 2px; user-select: none;
}
.eq-move .mv:hover { color: var(--gold); }

/* ── 战场单位悬停提示卡（v0.6.9 装备认知）── */
#screen-battle .battle-canvas { cursor: crosshair; }
.unit-tip {
  position: absolute; z-index: 60; max-width: 250px;
  background: rgba(239, 230, 208, .97); border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(26,22,17,.35);
  font-size: 12px; padding: 8px 10px; pointer-events: none;
}
.unit-tip .ut-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--ink-2); padding-bottom: 3px; margin-bottom: 4px; }
.unit-tip .ut-head b { font-family: var(--font-display); font-size: 13.5px; }
.unit-tip .ut-head.atk span { color: var(--indigo); }
.unit-tip .ut-head.def span { color: var(--cinnabar); }
.unit-tip .ut-stats { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--ink-2); }
.unit-tip .ut-stats b { color: var(--ink); }
.unit-tip .ut-types { display: flex; gap: 10px; margin: 4px 0 2px; }
.unit-tip .ut-ty { display: inline-flex; align-items: center; gap: 3px; font-weight: bold; }
.unit-tip .ut-trait { font-size: 11px; color: var(--ink-2); font-style: italic; margin-bottom: 4px; }
.unit-tip .ut-gear-h { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-2); margin-top: 3px; }
.unit-tip .ut-gear { display: flex; justify-content: space-between; gap: 8px; }
.unit-tip .ut-gear .ut-gn { font-weight: bold; }
.unit-tip .ut-gear .ut-gv { color: #6b5200; }
.unit-tip .ut-none { font-size: 11px; color: var(--ink-2); font-style: italic; }

/* ── 音频坞（v0.6.10 音乐/音效开关，全屏固定右下角）── */
#audio-dock {
  position: fixed; right: 10px; bottom: 10px; z-index: 90;
  display: flex; gap: 6px;
}
.dock-btn {
  width: 34px; height: 34px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239, 230, 208, .92); border: var(--line);
  box-shadow: 2px 2px 0 rgba(26,22,17,.3);
  color: var(--ink); padding: 0;
}
.dock-btn .dock-ic { font-size: 17px; line-height: 1; }
.dock-btn:hover { background: #efe6d0; border-color: var(--gold); }
.dock-btn.off { color: var(--ink-2); opacity: .55; }
.dock-btn.off .dock-ic { text-decoration: line-through; }

/* ── 多人军帐（v0.7.0-M1 热座竞标）── */
.mp-root {
  position: relative; z-index: 1; width: min(1060px, 96vw); margin: 0 auto;
  padding: 14px 0 40px; color: var(--ink);
}
.mp-card { background: rgba(239,230,208,.94); border: var(--line); box-shadow: 3px 3px 0 rgba(26,22,17,.25); padding: 14px 16px; margin-bottom: 12px; }
.mp-h { font-weight: 700; letter-spacing: .04em; margin: 0 0 8px; font-size: 15px; }
.mp-dim { color: var(--ink-2); }
.mp-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mp-spacer { flex: 1; }

/* 设置页 */
.mp-setup .mp-h { font-size: 18px; }
.mp-setup label { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.mp-setup input[type="text"] {
  background: #efe6d0; border: var(--line); padding: 4px 8px; color: var(--ink); width: 130px;
  font-family: inherit; font-size: 13px;
}
.mp-setup input[type="radio"] { accent-color: #8b1d1d; }
.mp-names { display: flex; gap: 8px; flex-wrap: wrap; }

/* 顶栏 */
.mp-top { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mp-top .mp-phase { font-size: 17px; font-weight: 700; }
.mp-top .mp-lv { color: var(--ink-2); }
.mp-timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.mp-timer.low { color: #8b1d1d; }

/* 席位面板 */
.mp-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mp-seat { border: var(--line); background: rgba(255,252,244,.6); padding: 7px 9px; }
.mp-seat.cur { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.mp-seat.out { opacity: .45; }
.mp-seat .nm { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.mp-seat .tag { font-size: 10px; border: 1px solid var(--ink-2); padding: 0 4px; color: var(--ink-2); }
.mp-seat .tag.out { border-color: #8b1d1d; color: #8b1d1d; }
.mp-seat .st { font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; }

/* 拍品墙 */
.mp-lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.mp-lot { border: var(--line); background: rgba(255,252,244,.7); padding: 8px; display: flex; gap: 8px; }
.mp-lot.owned { opacity: .5; }
.mp-lot img { width: 56px; height: 56px; object-fit: cover; border: var(--line); background: #efe6d0; }
.mp-lot .li { min-width: 0; flex: 1; }
.mp-lot .nm { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lot .rs { font-size: 12px; color: var(--ink-2); }
.mp-lot .ct { font-size: 11px; color: #8b6d1d; }
.mp-bidrow { display: flex; gap: 5px; margin-top: 5px; align-items: center; }
.mp-bidrow input { width: 66px; background: #efe6d0; border: var(--line); padding: 3px 6px; color: var(--ink); font-family: inherit; font-size: 12px; }
.mp-lot .err { font-size: 11px; color: #8b1d1d; min-height: 14px; }

/* ── M5 公共检阅市场（v0.7.1 D-16）：敌情条/建议/轮次标签/轮转高亮 ── */
.mp-intel {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--ink);
  background: rgba(139,109,29,.10); border: var(--line);
  padding: 6px 10px; margin-bottom: 8px;
}
.mp-intel .tag { background: rgba(139,109,29,.18); padding: 1px 8px; font-weight: 700; }
.mp-advice { font-size: 12px; color: var(--ink-2); margin: 0 0 8px 2px; line-height: 1.55; }
.mp-roundtag {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: rgba(139,29,29,.14); color: #8b1d1d; border: var(--line);
  padding: 2px 10px;
}
.mp-roundtag.r2 { background: rgba(29,107,47,.12); color: #1d6b2f; }
.mp-seat.turn { outline: 2px solid #8b6d1d; background: rgba(139,109,29,.10); }
.mp-seat .tag.turn { background: #8b6d1d; color: #f5efdd; }

/* ── M5 之前的盖板样式废除（市场制无隐私录入）── */

/* 开标结果 */
.mp-lockline { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed rgba(26,22,17,.2); font-size: 13px; flex-wrap: wrap; }
.mp-lockline .w { font-weight: 700; }
.mp-lockline .tie { color: #8b6d1d; font-size: 12px; }
.mp-lockline .unsold { color: var(--ink-2); }

/* 结算 */
.mp-settle-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-settle-t th, .mp-settle-t td { border: var(--line); padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.mp-settle-t th:first-child, .mp-settle-t td:first-child { text-align: left; }
.mp-settle-t thead th { background: rgba(26,22,17,.08); }
.mp-settle-t td.pos { color: #1d6b2f; } .mp-settle-t td.neg { color: #8b1d1d; }
.mp-lostline { font-size: 12px; color: #8b1d1d; margin-top: 6px; }

/* ── 在线房间（v0.7.0-M2）── */
.mp-on .mp-code-in {
  background: #efe6d0; border: var(--line); padding: 4px 8px; color: var(--ink);
  width: 92px; font-family: inherit; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.mp-on .err { font-size: 12px; color: #8b1d1d; min-height: 16px; margin-top: 4px; }
.mp-roomtag { font-size: 12px; color: var(--ink-2); letter-spacing: .05em; }
#mp-toast {
  position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%);
  z-index: 95; background: rgba(26,22,17,.95); color: #efe6d0;
  border: 1px solid var(--gold); padding: 6px 14px; font-size: 13px;
  display: none; max-width: 80vw;
}
#mp-toast.show { display: block; }
.mp-seat-out td { opacity: .45; }

/* ── M3 合作分工（mp-coop）：五席徽章 / 词缀 / 纸面 comm / 评价卡 ── */
.mp-desks { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-desk {
  font-size: 11px; padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--ink-2, #5a5142); opacity: .55;
}
.mp-desk.mine { opacity: 1; border-color: var(--indigo); color: var(--indigo); font-weight: 700; }
.mp-mod {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  border: 1px dashed var(--cinnabar); color: var(--cinnabar); cursor: help;
}
.mp-phrasebar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mp-comm { display: flex; flex-direction: column; gap: 3px; max-height: 132px; overflow: auto; }
.mp-comm-line { font-size: 12.5px; animation: mp-comm-fade 6s forwards; }
.mp-comm-line.pin { color: var(--cinnabar); font-weight: 700; }
.mp-comm-line .who { opacity: .75; margin-right: 6px; }
@keyframes mp-comm-fade { 0%, 70% { opacity: 1; } 100% { opacity: .45; } }
.mp-cardrow { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(43, 38, 32, .18); }
.mp-cardrow:first-of-type { border-top: 0; }
.mp-cardrole { min-width: 64px; font-weight: 700; font-size: 13px; }
.mp-cardlines { font-size: 12.5px; line-height: 1.55; }
.mp-lot .mp-do-buy:disabled { opacity: .45; cursor: not-allowed; }

/* ── M4 UI/UX：计时进度条 / 佣兵契 / 英雄位 / 表格与响应式 ── */
.mp-tbar { height: 4px; background: rgba(43,38,32,.14); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.mp-tbar i { display: block; height: 100%; width: 0%; background: var(--indigo, #3b4a8c); border-radius: 2px; transition: width .2s linear; }
.mp-tbar i.low { background: #8b1d1d; }

.mp-mercs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(43,38,32,.25); }
.mp-merc { font-variant-numeric: tabular-nums; }
.mp-merc.hired { border-color: #2e6b34; color: #2e6b34; font-weight: 700; }
.mp-merc.locked { opacity: .45; cursor: not-allowed; }

.mp-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mp-hero-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 6px; border: 1px solid var(--ink-2, #5a5142); border-radius: 10px; background: rgba(255,252,244,.8); }
.mp-hero-chip .mp-hero-out { padding: 0 4px; min-height: 0; line-height: 1; }

.mp-lot .tag.hero { margin-left: 4px; font-size: 11px; }
.mp-lot .rs .mp-desk { margin-left: 6px; }

.mp-settle-t tbody tr:nth-child(even) { background: rgba(43,38,32,.05); }
.mp-settle-t tr.rank1 { background: rgba(139,109,29,.12); font-weight: 700; }

.mp-timer { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .mp-lots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mp-lot img { width: 44px; height: 44px; }
  .mp-seat { min-width: 0; }
  .mp-top { gap: 8px; font-size: 12px; }
}