/* ============================================================
   theme.css —— 《三分天下》宣纸水墨风「精修」主题
   在 css/style.css 之后加载：只做新增 / 覆盖，不删除任何既有规则。

   视觉语言：宣纸（#f7f1e3）+ 墨块（#3a3226）+ 朱红（#a3281f）
             辅以赭石 #b8860b / 花青 #4a6f8a / 竹绿 #2e7d32
   规矩：
     · 圆角 ≤ 4px（方正与笔锋，不用胶囊/大圆角）
     · 阴影只能是极淡墨晕 rgba(58,50,38,0.08~0.12)
     · 分隔用 1px 淡墨线；徽章取「印章」式方角细边 + 内描边
     · 动效克制：淡入 + 上移 4~6px / 180~240ms，进度条小幅流动
     · 不使用玻璃拟态（无 backdrop-filter）、不使用纯黑投影
     · 完整支持 prefers-reduced-motion

   结构约定（由 main.js / window.UI 生成，本文件负责样式）：
     .tabs / .tab / .tab.active / .ui-pane(.on)  城池面板分区
     .card / .card-h / .card-b                   卡片
     .bar > u（.ok/.warn/.bad/.gold/.ochre/.flow/.sm/.lg）
     .badge / .badge-ok|warn|bad|gold|info|ink    徽章
     .stat / .stat-k / .stat-v · table.stat-table
     .ofc / .pt / .five .fv / .rank              武将卡
     .ub(.ub-<id>/.ub-sm|lg)/.ub-tip · .uring    兵种徽章与克制环
     .upick/.upick-i(.on/.is-dis)/.upick-t       兵种四选一
     .army.march|.stay|.retreat|.done            军情状态色
     .empty / .ui-toast                          空态与轻提示

   运行时注入变量（本文件**不声明**，由 JS 内联写到元素上）：
     --fc  势力色。唯一写入方 UI.fColor(f)（src/ui/widgets.js），取不到势力退 var(--ink-3)。
           CSS 侧一律带兜底消费：var(--fc, var(--line-2))。
           ⚠ 别与 style.css 遗留的 --c（.pick，style.css:308）混用：新代码统一 --fc。
           新增消费点请回 src/ui/widgets.js 的 fColor 注释里同步登记。
   ============================================================ */

/* ---------------- 色板与度量 ---------------- */
:root {
  /* 宣纸 */
  --paper: #f7f1e3;
  --paper-2: #fcf8ef;
  --paper-3: #f1e9d6;
  /* 半透明纸底：徽章压在地图/深色地形上时保证可读（兵种圆章用） */
  --paper-90: rgba(247, 241, 227, 0.92);
  /* 墨 */
  --ink: #3a3226;
  --ink-2: #5c5140;
  --ink-3: #7d7060;
  /* 强调与辅色 */
  --accent: #a3281f;
  --accent-2: #c14a3e;
  --ochre: #b8860b;
  --cyan: #4a6f8a;
  --green: #2e7d32;
  /* 线与影 */
  --line: #ded2b8;
  --line-2: #c9bda1;
  --shadow: 0 1px 2px rgba(58, 50, 38, 0.08);
  --shadow-2: 0 2px 6px rgba(58, 50, 38, 0.10);
  --radius: 3px;
  --radius-sm: 2px;
  --radius-lg: 4px;

  /* 字体与节奏 */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 兼容别名（旧命名 → 新色板） */
  --gold: var(--ochre);
  --ok: var(--green);
  --warn: var(--ochre);
  --bad: var(--accent);
  --info: var(--cyan);
  --border: var(--line);
  --border-2: var(--line-2);
  --muted: var(--ink-3);
  --bar-h: 6px;
}

/* ---------------- 纸面 ---------------- */
body {
  font-family: var(--font-serif);   /* R4：正文切衬线（思源宋体本地子集），古书观感；小字控件仍走 --font-sans */
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(58, 50, 38, 0.022) 0 1px, rgba(58, 50, 38, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(58, 50, 38, 0.016) 0 1px, rgba(58, 50, 38, 0) 1px 4px),
    radial-gradient(120% 70% at 50% -8%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%);
}

/* 标题统一用衬线，带字距 */
header h1,
aside h2,
.card-h h3,
.sub,
.modal-card h3,
.start-card h2,
.ofc .ofc-name b,
.rank,
button.order b,
.dim-title {
  font-family: var(--font-serif);
  font-weight: 600;
}

/* 数字统一等宽，避免资源数值错位 */
header .res b,
header .turn b,
.stat-v,
table.stat-table td,
table.stats td,
.badge,
button.order em,
.ofc .five .fv b,
.ofc .loy em,
.ofc .merit em,
.odds b,
#log p span {
  font-variant-numeric: tabular-nums;
}

/* 滚动条：细墨线（wave4：#modal-body 接管弹窗滚动，一并纳入） */
aside::-webkit-scrollbar,
#log::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
#modal-body::-webkit-scrollbar,
.start-card::-webkit-scrollbar { width: 8px; height: 8px; }
aside::-webkit-scrollbar-track,
#log::-webkit-scrollbar-track,
#modal-body::-webkit-scrollbar-track { background: rgba(58, 50, 38, 0.04); }
aside::-webkit-scrollbar-thumb,
#log::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb,
#modal-body::-webkit-scrollbar-thumb,
.start-card::-webkit-scrollbar-thumb {
  background: rgba(58, 50, 38, 0.18);
  border: 2px solid transparent;
  background-clip: padding-box;
}
aside::-webkit-scrollbar-thumb:hover { background: rgba(58, 50, 38, 0.30); background-clip: padding-box; }

/* ---------------- 顶栏：宣纸上的墨块 ---------------- */
header {
  position: relative;
  z-index: 5;
  align-items: center;
  gap: 14px;
  padding: 7px 18px;
  background:
    linear-gradient(0deg, rgba(58, 50, 38, 0.06), rgba(58, 50, 38, 0)),
    linear-gradient(180deg, #463d2f 0%, #3a3226 60%, #322b21 100%);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(58, 50, 38, 0.12);
}
/* 朱红之下再压一道赭石细线，像双边框 */
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: rgba(184, 134, 11, 0.35);
}

header h1 {
  font-size: 20px;
  letter-spacing: 8px;
  color: var(--paper);
  text-shadow: none;
}

/* 分段：1px 淡墨（纸色）竖线 */
header .scenario,
header .date,
header .turn,
header .who,
header .res {
  position: relative;
  padding-left: 14px;
}
header .scenario::before,
header .date::before,
header .turn::before,
header .who::before,
header .res::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgba(247, 241, 227, 0.20);
}
header .scenario { font-size: 12.5px; color: #cdc2ab; letter-spacing: 1px; }
header .date { font-size: 12.5px; color: #c6bba4; }
header .turn { font-size: 12.5px; color: #e5cf9a; }
header .who { font-size: 12.5px; }

/* 资源：方角小格 + 字距 + 图标，解决拥挤 */
header .res {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 3px 11px;
  font-size: 12.5px;
  border: 1px solid rgba(247, 241, 227, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(247, 241, 227, 0.06);
}
header .res b {
  display: inline-flex;
  align-items: center;
  color: #e8cf95;
  transition: color 0.2s var(--ease);
}
header .res b::before {
  font-size: 10px;
  margin-right: 4px;
  opacity: 0.85;
}
header #res-gold::before { content: "\25C9"; }  /* ◉ 金 */
header #res-food::before { content: "\25C8"; }  /* ◈ 粮 */
header .res:hover b { color: #f6e3b8; }
/* 数值变化时的「墨渗」微动效钩子 */
header .res.flash b { animation: ui-ink 0.5s var(--ease); }

header .actions { margin-left: auto; gap: 8px; }

/* 顶栏按钮：方角、细边、纸色 */
.hbtn {
  padding: 4px 13px;
  font-size: 12.5px;
  letter-spacing: 1px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(247, 241, 227, 0.26);
  background: rgba(247, 241, 227, 0.08);
  color: var(--paper);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.12s var(--ease), color 0.18s var(--ease);
}
.hbtn:hover {
  background: rgba(247, 241, 227, 0.16);
  border-color: rgba(232, 207, 149, 0.55);
}
.hbtn:active { transform: translateY(1px); background: rgba(247, 241, 227, 0.06); }
.hbtn:focus-visible { outline: 1px solid var(--ochre); outline-offset: 2px; }
.hbtn.primary {
  background: linear-gradient(180deg, #b02a20 0%, #8d1f18 100%);
  border-color: #c9564a;
}
.hbtn.primary:hover { background: linear-gradient(180deg, #bf3126 0%, #99231b 100%); }
.hbtn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.hbtn.pulse { animation: ui-pulse 1.8s ease-in-out infinite; border-color: var(--accent-2); }

/* 浅底上下文里的 .hbtn（评审第 1 伤害项）：
   .hbtn 本为深色顶栏设计（米白字 + 8% 透明底），落到浅米卡上近乎隐形——
   受害面：事件抉择按钮（结算弹窗事件卡）、剧本条未选中项、战斗战法/「交给将领」、
   结算窗「知道了」以外的次要按钮、人事「寻访在野」、军队面板操作行、引导「跳过引导」。
   这里按浅底容器一层兜底翻成墨字浅底；顶栏深底与朱红 primary 均不受影响。 */
.modal-card .hbtn:not(.primary),
.start-card .hbtn:not(.primary),
.card .hbtn:not(.primary),
.bact .hbtn:not(.primary),
.hire .hbtn:not(.primary),
.guide-card .hbtn:not(.primary) {
  color: var(--ink);
  background: #efe6d2;
  border-color: #b4a68c;
}
.modal-card .hbtn:not(.primary):hover,
.start-card .hbtn:not(.primary):hover,
.card .hbtn:not(.primary):hover,
.bact .hbtn:not(.primary):hover,
.hire .hbtn:not(.primary):hover,
.guide-card .hbtn:not(.primary):hover {
  background: #e6d9bd;
  border-color: #9a8a68;
}
.modal-card .hbtn:not(.primary):active,
.start-card .hbtn:not(.primary):active,
.card .hbtn:not(.primary):active,
.bact .hbtn:not(.primary):active,
.hire .hbtn:not(.primary):active,
.guide-card .hbtn:not(.primary):active {
  background: #e0d2b2;
  border-color: #8d7d5c;
}

/* ---------------- 地图：状态栏与 tooltip ---------------- */
#statusbar {
  left: 14px;
  bottom: 12px;
  padding: 3px 11px;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: var(--ink-2);
  background: rgba(252, 248, 239, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* tooltip 改为宣纸小笺，而非深色玻璃 */
#tooltip {
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 30;
  animation: ui-fade 0.14s var(--ease);
}

/* ---------------- 侧栏 ---------------- */
aside {
  width: 344px;
  padding: 14px 16px 26px;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(58, 50, 38, 0.018) 0 1px, rgba(58, 50, 38, 0) 1px 3px);
  border-left: 1px solid var(--line);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.55);
}

aside h2 {
  font-size: 18px;
  letter-spacing: 3px;
  margin: 0 0 10px;
  padding: 2px 0 6px 10px;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--line);
}
aside h2 small { color: var(--ink-3); letter-spacing: 1px; font-family: var(--font-sans); }

/* 分区标题：淡墨细线 + 短朱红笔锋 */
.sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 8px;
  padding: 0 0 5px;
  font-size: 13.5px;
  letter-spacing: 2px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: var(--accent);
}
.sub .slots { margin-left: auto; letter-spacing: 3px; font-family: var(--font-sans); }
#panel > .sub:first-child,
#armies > .sub:first-child,
#legend > .sub:first-child,
#logbox > .sub:first-child { margin-top: 2px; }

.intro {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(252, 248, 239, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.8;
}
.note {
  padding: 5px 10px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: rgba(58, 50, 38, 0.03);
  border-left: 2px solid var(--line-2);
}
.owner { font-size: 15px; letter-spacing: 1px; margin-bottom: 8px; }
.hint {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(252, 248, 239, 0.55);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* ---------------- Tab：方角分段 ---------------- */
.tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 10px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.tabs .tab {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 4px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.tabs .tab:hover { color: var(--ink); background: rgba(252, 248, 239, 0.7); }
.tabs .tab.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--paper-2);
  box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(58, 50, 38, 0.06);
}
.tabs .tab:focus-visible { outline: 1px solid var(--ochre); outline-offset: 1px; }

.ui-pane { display: none; }
.ui-pane.on { display: block; animation: ui-fade 0.2s var(--ease) both; }

/* ---------------- 卡片 ---------------- */
.card {
  margin-bottom: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-h {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: linear-gradient(180deg, #f6efdd 0%, #f0e7d1 100%);
  border-bottom: 1px solid var(--line);
}
.card-h h3 { font-size: 14px; letter-spacing: 3px; color: var(--ink); }
/* 图标槽：印章式小方块 */
.card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  font-style: normal;
  font-size: 10px;
  border-radius: var(--radius-sm);
  color: #f4ead2;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(247, 241, 227, 0.35);
}
.card-x {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 1px;
}
.card-b { padding: 10px 11px; font-size: 13px; }
.card-b > :last-child { margin-bottom: 0; }
.card.plain { background: transparent; border: 0; box-shadow: none; }
.card.plain .card-b { padding: 0; }
.card.accent { border-color: rgba(163, 40, 31, 0.35); }
.card.accent .card-h { background: linear-gradient(180deg, #f9e9e3 0%, #f2dbd3 100%); }
.card.ochre,
.card.gold { border-color: rgba(184, 134, 11, 0.40); }
.card.ochre .card-h,
.card.gold .card-h { background: linear-gradient(180deg, #f7eed6 0%, #f0e4c4 100%); }
.card.ok { border-color: rgba(46, 125, 50, 0.35); }
.card.warn { border-color: rgba(184, 134, 11, 0.45); }
.card.bad { border-color: rgba(163, 40, 31, 0.45); }

/* ---------------- 进度条 ---------------- */
.bar {
  position: relative;
  flex: 1 1 auto;
  height: var(--bar-h);
  min-width: 34px;
  background: rgba(58, 50, 38, 0.07);
  border: 1px solid rgba(58, 50, 38, 0.10);
  border-radius: 1px;
  overflow: hidden;
}
.bar > u {
  display: block;
  height: 100%;
  text-decoration: none;
  background: linear-gradient(90deg, #8e2019, var(--accent-2));
  transition: width 0.35s var(--ease);
}
.bar.ok > u { background: linear-gradient(90deg, #27692b, #3f9145); }
.bar.green > u { background: linear-gradient(90deg, #27692b, #3f9145); }
.bar.warn > u,
.bar.ochre > u,
.bar.gold > u { background: linear-gradient(90deg, #8f6a09, #c99a1d); }
.bar.bad > u { background: linear-gradient(90deg, #8e2019, #c14a3e); }
.bar.cyan > u { background: linear-gradient(90deg, #3a5b73, #5c86a5); }
/* 行军流动：幅度克制、速度偏慢 */
.bar.flow > u {
  background-image:
    repeating-linear-gradient(115deg, rgba(247, 241, 227, 0.22) 0 6px, rgba(247, 241, 227, 0) 6px 14px),
    linear-gradient(90deg, #8e2019, var(--accent-2));
  background-size: 28px 100%, 100% 100%;
  animation: ui-flow 1.6s linear infinite;
}
.bar.flow.ok > u,
.bar.flow.green > u {
  background-image:
    repeating-linear-gradient(115deg, rgba(247, 241, 227, 0.22) 0 6px, rgba(247, 241, 227, 0) 6px 14px),
    linear-gradient(90deg, #27692b, #3f9145);
}
.bar.sm { height: 4px; min-width: 20px; }
.bar.lg { height: 10px; }

/* ---------------- 徽章：朱红印章式 ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  font-size: 11px;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--paper-3);
  border: 1px solid var(--line-2);
}
.badge-ok { color: #27692b; background: rgba(46, 125, 50, 0.08); border-color: rgba(46, 125, 50, 0.40); }
.badge-warn,
.badge-gold,
.badge-ochre {
  color: #7a5c1e;
  background: rgba(184, 134, 11, 0.10);
  border-color: rgba(184, 134, 11, 0.55);
  box-shadow: inset 0 0 0 2px rgba(184, 134, 11, 0.12);
}
.badge-bad {
  color: #8d201a;
  background: rgba(163, 40, 31, 0.08);
  border-color: rgba(163, 40, 31, 0.50);
  box-shadow: inset 0 0 0 2px rgba(163, 40, 31, 0.10);
}
.badge-info { color: #3a5b73; background: rgba(74, 111, 138, 0.10); border-color: rgba(74, 111, 138, 0.45); }
.badge-ink { color: #f4ead2; background: var(--ink); border-color: #241f18; }

/* ---------------- 兵种徽章：圆形墨圈 + 单字 ----------------
   取色只用既有变量：剑=墨 / 枪=竹绿 / 戟=赭石 / 骑=朱红
   数据（单字、说明、金费、克制关系）全部来自 window.Units，样式不改数值 */
.ub {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  font-family: var(--font-serif);
  font-size: 14px;      /* 直径 × 0.62，与地图层 canvas 圆章同一比例 */
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  /* 纸底 + 兵种色边与字：与地图层（Terrain/MapRenderer）圆章同规格 */
  color: var(--ub-c, var(--ink-3));
  background: var(--paper-90);
  border: 1px solid var(--ub-c, var(--ink-3));
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: help;
  user-select: none;
}
.ub-sm { width: 18px; height: 18px; font-size: 11px; }
.ub-lg { width: 28px; height: 28px; font-size: 17px; }
/* 密集档：地图标记（map）/ 战术格子（xs）——同为 14px、字号 9px */
.ub-map, .ub-xs { width: 14px; height: 14px; font-size: 9px; }
/* 实心态右上浮动：不依赖父级 position:relative（float 版，战术格子里安全） */
.ub-fr { float: right; margin-top: 1px; }
/* 实心变体：选中/强调、地图与战术格子（与 canvas 圆章同款） */
.ub-solid {
  background: var(--ub-c, var(--ink-3));
  color: var(--paper-2);
  /* 外圈 1px 纸色隔离带：实心态压在同色底（如朱红军旗）时不糊在一起 */
  box-shadow: inset 0 0 0 2px rgba(252, 248, 239, 0.42), 0 0 0 1px var(--paper), var(--shadow);
}
/* 兵种色：统一由 --ub-c 提供，纸底态取色边/字，实心态取底色 */
.ub-sword   { --ub-c: var(--ink); }
.ub-spear   { --ub-c: var(--green); }
.ub-halberd { --ub-c: var(--ochre); }
.ub-cavalry { --ub-c: var(--accent); }
.ub-none    { --ub-c: var(--ink-3); }
.ub:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* 徽章 tooltip：淡入 + 轻微上移（墨渗） */
.ub-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 60;
  display: block;
  width: 196px;
  padding: 7px 9px 8px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
  cursor: default;
}
.ub:hover .ub-tip,
.ub:focus .ub-tip,
.ub:focus-within .ub-tip,
.upick-i:hover .ub-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* 独立浮层：不由 .ub 托管时用（canvas 上叠 DOM、格子内直接插入），直接可见、参与文档流 */
.ub-tip.on {
  position: relative;
  left: auto;
  bottom: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* 笔锋小尖：指向徽章 */
.ub-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -4px;
  background: var(--paper-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  transform: rotate(45deg);
}
.ub-tip-h {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}
.ub-tip-d { display: block; color: var(--ink-2); }
.ub-tip-r { display: block; margin-top: 2px; }
.ub-tip-r em {
  font-style: normal;
  margin-right: 6px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ub-tip-r em.k { color: var(--green); border-color: rgba(46, 125, 50, 0.40); }
.ub-tip-r em.w { color: var(--accent); border-color: rgba(163, 40, 31, 0.40); }
.ub-tip-g {
  display: block;
  margin-top: 4px;
  padding-top: 4px;
  color: var(--ochre);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
/* 追加注脚行：可信 HTML，供外部（如 Terrain.badgeText 地形文案）注入 */
.ub-tip-n {
  display: block;
  margin-top: 4px;
  padding-top: 4px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.5;
}

/* 克制环小图：枪→骑→戟→枪，剑在环外 */
.uring {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}
.uring-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.uring-ar {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-3);
  padding: 0 1px;
}
.uring-x {
  margin: 3px 0 0;
  font-size: 10.5px;
  color: var(--ink-3);
}
/* 次级克制行（2026-09-29 精锐入半环）：非主环档的克制边，如「枪/骑/戟/锐克剑、枪克锐」 */
.uring-s {
  margin: 1px 0 0;
  font-size: 10px;
  color: var(--ink-3);
  opacity: .85;
}

/* 兵种四选一（编成面板） */
.upick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.upick-i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.upick-i input { position: absolute; opacity: 0; pointer-events: none; }
.upick-i:hover { border-color: var(--line-2); }
.upick-i.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(163, 40, 31, 0.10);
}
.upick-i.is-dis { opacity: 0.45; cursor: not-allowed; }
.upick-i.is-dis:hover { border-color: var(--line); }
.upick-t { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.upick-t b {
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.upick-t em {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.upick-t s { font-size: 10.5px; color: var(--accent); text-decoration: none; }
/* 缺口角标恒占位（unitPickerRefresh 只改文本）：空文案时整行收起 */
.upick-t s:empty { display: none; }

/* ---------------- 旧账兜底：em 标签改 UI.badge 后的对齐 ----------------
   原 button.pick em{margin-left:auto} 与 .days .dy em 的样式随标签消失，
   这里把同样的版式挂到 .badge 上，替换后视觉不变 */
button.pick .badge { margin-left: auto; font-size: 12px; }
.days .dy .badge { flex: none; font-size: 10.5px; padding: 0 5px; letter-spacing: 0; }

/* ---------------- 键值行 / 键值表 ---------------- */
.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  border-bottom: 1px solid rgba(58, 50, 38, 0.07);
}
.stat:last-child { border-bottom: 0; }
.stat-k { color: var(--ink-3); font-size: 12.5px; }
.stat-v { color: var(--ink); text-align: right; }

table.stat-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
table.stat-table th {
  text-align: left;
  font-weight: normal;
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 5px 10px;
  background: #f5eeda;
  border-bottom: 1px solid var(--line);
}
table.stat-table td {
  text-align: right;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(58, 50, 38, 0.07);
}
table.stat-table tr:last-child th,
table.stat-table tr:last-child td { border-bottom: 0; }

/* main.js 现有 table.stats：卡片化 + 淡墨分隔 */
table.stats {
  margin: 6px 0 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.stats td { padding: 5px 10px; border-bottom: 1px solid rgba(58, 50, 38, 0.07); }
table.stats tr:last-child td { border-bottom: 0; }
table.stats td:first-child { color: var(--ink-3); }

/* ---------------- 政令：网格 + 图标槽 + 成本印章 ---------------- */
.orders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}
button.order {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name cost"
    "desc desc desc";
  align-items: center;
  gap: 2px 8px;
  padding: 7px 9px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper-2) 0%, #f6efdd 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              transform 0.12s var(--ease);
}
button.order i {
  grid-area: icon;
  width: 26px;
  height: 26px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(247, 241, 227, 0.32);
}
button.order b { grid-area: name; font-size: 14px; letter-spacing: 2px; color: var(--ink); }
button.order span { grid-area: desc; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
button.order em {
  grid-area: cost;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: rgba(184, 134, 11, 0.10);
  border: 1px solid rgba(184, 134, 11, 0.55);
  color: #7a5c1e;
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px rgba(184, 134, 11, 0.10);
}
button.order:hover:not(:disabled) {
  border-color: var(--accent);
  background: linear-gradient(180deg, #fdf8ea 0%, #f7efdc 100%);
  transform: translateY(-1px);
}
button.order:active:not(:disabled) { transform: translateY(0); }
button.order:focus-visible { outline: 1px solid var(--ochre); outline-offset: 1px; }
button.order:disabled,
button.order.off { opacity: 0.5; cursor: not-allowed; box-shadow: none; filter: grayscale(0.15); }

/* ---------------- 武将卡 ---------------- */
/* --fc 消费点：.ofc 左侧 3px 边、.pt 立绘框描边（势力色由 UI.fColor 内联注入，缺省 --line-2） */
.officers { gap: 8px; margin-bottom: 10px; }
.ofc {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--fc, var(--line-2));
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper-2) 0%, #f7f0de 100%);
  box-shadow: var(--shadow);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
  animation: ui-rise 0.22s var(--ease) both;
}
.ofc:hover { transform: translateY(-1px); border-color: var(--line-2); }
.ofc.is-gov {
  border-color: rgba(163, 40, 31, 0.35);
  background: linear-gradient(180deg, #fdf6e7 0%, #f7eeda 100%);
}

/* 立绘框：方角 + 细边 + 极淡内阴影 + 势力色描边 */
.ofc .pt {
  width: 46px;
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--fc, var(--line-2));
  background: linear-gradient(180deg, #f2ead6 0%, #e4d9bd 100%);
  box-shadow:
    inset 0 0 0 1px rgba(252, 248, 239, 0.75),
    inset 0 1px 3px rgba(58, 50, 38, 0.14);
}
.ofc .pt img { object-fit: cover; }
.ofc .pt span { font-size: 20px; color: rgba(58, 50, 38, 0.45); font-family: var(--font-serif); }

/* 立绘 404 的印章化兜底（widgets.js 对 .pt 恒写 data-seal；立绘加载成功时被 img 盖住）：
   纸底 + 朱砂双框 + 竹帘纹样 + 四角描朱，姓氏落朱砂——「有意的印章」，不是缺图的破洞 */
.ofc .pt[data-seal] {
  background:
    repeating-linear-gradient(45deg, rgba(163, 40, 31, 0.045) 0 5px, rgba(163, 40, 31, 0) 5px 10px),
    linear-gradient(180deg, #f8f2e4 0%, #efe4cc 100%);
  border-color: rgba(163, 40, 31, 0.55);
  box-shadow:
    inset 0 0 0 2px rgba(247, 241, 227, 0.8),
    inset 0 0 0 3px rgba(163, 40, 31, 0.32),
    inset 0 1px 3px rgba(58, 50, 38, 0.10);
}
.ofc .pt[data-seal]::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    linear-gradient(#a3281f, #a3281f) left top / 7px 1.5px,
    linear-gradient(#a3281f, #a3281f) left top / 1.5px 7px,
    linear-gradient(#a3281f, #a3281f) right top / 7px 1.5px,
    linear-gradient(#a3281f, #a3281f) right top / 1.5px 7px,
    linear-gradient(#a3281f, #a3281f) left bottom / 7px 1.5px,
    linear-gradient(#a3281f, #a3281f) left bottom / 1.5px 7px,
    linear-gradient(#a3281f, #a3281f) right bottom / 7px 1.5px,
    linear-gradient(#a3281f, #a3281f) right bottom / 1.5px 7px;
  background-repeat: no-repeat;
  opacity: 0.62;
}
.ofc .pt[data-seal] span {
  color: rgba(163, 40, 31, 0.82);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(247, 241, 227, 0.65);
}

/* 真立绘装裱（wave4 视觉，复评 07 号图）：绢边细框 + 左下朱题签小容器——
   与印章占位同一卡式语汇（朱底纸字、方角、细边），把「9 张真图 vs 印章占位」
   的资产缺口从裸露变策展。:has(img) / img + .pt-tag 双保险：立绘 404 被 onerror
   移除后绢框与题签一并退场，干净落回印章占位。 */
.ofc .pt[data-photo]:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 绢边：外缘 1px 淡墨线 + 内侧 2px 纸色绫边（inset 描边，不参与外投影审计） */
  box-shadow:
    inset 0 0 0 1px rgba(58, 50, 38, 0.28),
    inset 0 0 0 3px rgba(252, 248, 239, 0.55);
}
.ofc .pt .pt-tag {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 4px 1px 3px;
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #fdf3e6;
  background: var(--accent);
  border-top: 1px solid rgba(247, 241, 227, 0.5);
  border-right: 1px solid rgba(247, 241, 227, 0.3);
  border-top-right-radius: var(--radius-sm);
}
.ofc .pt[data-photo] img + .pt-tag { display: block; }

.ofc .ofc-main { min-width: 0; }
.ofc .ofc-name { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.ofc .ofc-name b { font-size: 15px; letter-spacing: 2px; }
.ofc .zi { color: var(--ink-3); font-size: 12px; font-family: var(--font-sans); }
.ofc .tag {
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #fdf3e6;
  background: var(--accent);
  border: 1px solid #7d1b14;
  box-shadow: inset 0 0 0 2px rgba(247, 241, 227, 0.18);
}

/* 五维小条 */
.ofc .five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}
.ofc .five .fv { display: grid; gap: 2px; justify-items: center; }
.ofc .five .fv i {
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.ofc .five .fv b { font-size: 10.5px; font-weight: normal; color: var(--ink-2); }
/* 旧结构 <p class="five"><i>统90</i>…</p> 兼容 */
.ofc .five > i {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-2);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: rgba(58, 50, 38, 0.04);
}

/* 忠诚 / 战功 */
.ofc .loy,
.ofc .merit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-3);
}
.ofc .loy > i,
.ofc .merit > i { font-style: normal; font-family: var(--font-serif); font-size: 11px; flex: none; }
.ofc .loy > u,
.ofc .merit > u {
  flex: 1 1 auto;
  height: 5px;
  min-width: 30px;
  border-radius: 1px;
  text-decoration: none;
  background: linear-gradient(90deg, #8e2019, var(--accent-2));
}
.ofc .loy em,
.ofc .merit em { font-style: normal; color: var(--ink-2); white-space: nowrap; }
/* 官爵徽章：赭石印章 */
.ofc .rank {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #7a5c1e;
  background: rgba(184, 134, 11, 0.10);
  border: 1px solid rgba(184, 134, 11, 0.55);
  box-shadow: inset 0 0 0 2px rgba(184, 134, 11, 0.12);
}
.ofc .rank.top {
  color: #7d1b14;
  background: rgba(163, 40, 31, 0.08);
  border-color: rgba(163, 40, 31, 0.50);
  box-shadow: inset 0 0 0 2px rgba(163, 40, 31, 0.10);
}

.ofc .ofc-act button {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: linear-gradient(180deg, var(--paper-2), #f2ead6);
  border: 1px solid var(--line-2);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.ofc .ofc-act button:hover:not(:disabled) {
  background: #fdf8ea;
  border-color: var(--accent);
}
.ofc .ofc-act button:disabled { opacity: 0.45; cursor: not-allowed; }

.hire { margin-bottom: 10px; }

/* ---------------- 出兵面板 ---------------- */
.march {
  gap: 8px;
  padding: 8px 10px;
  background: rgba(252, 248, 239, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.march select,
.march input {
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--paper-2);
}
.march select:focus,
.march input:focus { outline: 1px solid var(--ochre); outline-offset: 1px; }
.odds {
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: rgba(252, 248, 239, 0.6);
  border: 1px solid var(--line);
  font-size: 12.5px;
}
.odds b.good { color: #27692b; }
.odds b.mid { color: #7a5c1e; }
.odds b.bad { color: #8d201a; }
/* 本回合已出兵清单（BATTLE-V2 §2.3：多路出兵的可见性）——中性灰基调，不与军情行的
   进军/驻扎/回师状态色抢语义 */
.mk-outs { display: grid; gap: 4px; margin: 6px 0 2px; }
.mk-out {
  margin: 0;
  padding: 4px 8px;
  border-left: 2px solid var(--ink-3);
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
}
.mk-out b { letter-spacing: 0.5px; }
.mk-outs .empty { margin: 2px 0; }
.battle {
  padding: 5px 0 5px 10px;
  margin-bottom: 8px;
  border-left: 2px solid var(--accent);
  background: rgba(163, 40, 31, 0.04);
}

/* ---------------- 军情 ---------------- */
#armies {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.army {
  border-left: 3px solid var(--accent);
  padding: 5px 0 5px 10px;
  margin-bottom: 8px;
  background: rgba(163, 40, 31, 0.03);
}
.army:last-child { margin-bottom: 0; }
.army.march { border-left-color: var(--accent); }
.army.stay { border-left-color: var(--ochre); }
.army.retreat { border-left-color: var(--cyan); }
.army.done { border-left-color: var(--green); background: rgba(46, 125, 50, 0.04); }
.ar-h { gap: 6px; }
.ar-h i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
.ar-bar {
  height: 6px;
  margin: 5px 0;
  border-radius: 1px;
  background: rgba(58, 50, 38, 0.07);
  border: 1px solid rgba(58, 50, 38, 0.10);
  overflow: hidden;
}
.ar-bar u {
  display: block;
  height: 100%;
  text-decoration: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(247, 241, 227, 0.22) 0 6px, rgba(247, 241, 227, 0) 6px 14px),
    linear-gradient(90deg, #8e2019, var(--accent-2));
  background-size: 28px 100%, 100% 100%;
  animation: ui-flow 1.6s linear infinite;
}
.ar-bar.done u {
  background-image: none;
  background: linear-gradient(90deg, #27692b, #3f9145);
  animation: none;
}
.days .dy u { border-radius: 1px; }
/* 战事逐日行（09/10 号图）：攻/守两根条 + 三枚徽标在窄卡里贴边溢出——
   允许换行、条可收缩、右侧留一线纸白（评审第 4-④ 项） */
.days .dy { flex-wrap: wrap; row-gap: 3px; padding-right: 4px; }
/* wave4 复评（10 号图 D1 行红条顶到卡缘、徽标被裁）：条再加 58% 硬上限——
   满宽条永远给右侧徽标留出 >40% 的地盘，放不下就整行换行，绝不贴边裁切 */
.days .dy u { flex: 0 1 auto; min-width: 14px; max-width: 58%; }

/* ---------------- 群雄图例 ---------------- */
ul.factions { display: grid; gap: 0; }
ul.factions li {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(58, 50, 38, 0.07);
  transition: background 0.16s var(--ease);
}
ul.factions li:hover { background: rgba(163, 40, 31, 0.04); }
ul.factions li.me {
  background: rgba(163, 40, 31, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 600;
}
ul.factions i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }

/* ---------------- 纪事 ---------------- */
#logbox {
  margin-top: 16px;
  padding: 10px 12px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#log { max-height: 240px; font-size: 12.5px; line-height: 1.7; }
#log p {
  border-bottom: 0;
  border-left: 2px solid transparent;
  padding: 3px 6px;
  margin-bottom: 1px;
  color: var(--ink-2);
}
#log p:nth-child(even) { background: rgba(58, 50, 38, 0.03); }
#log p span { color: var(--ink-3); font-size: 11.5px; }
#log p.imp { color: var(--ink); border-left-color: var(--accent); background: rgba(163, 40, 31, 0.05); }

/* 四邻 */
.neighbors { gap: 6px; }
span.nb {
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: border-color 0.14s var(--ease), transform 0.12s var(--ease);
}
span.nb:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---------------- 空态 / 轻提示 ---------------- */
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  margin: 4px 0 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  background: rgba(252, 248, 239, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.empty-ico { font-style: normal; font-size: 14px; color: var(--line-2); }

.ui-toast-box {
  position: fixed;
  top: 58px;
  right: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.ui-toast {
  min-width: 160px;
  max-width: 320px;
  padding: 7px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  box-shadow: var(--shadow-2);
  animation: ui-toast-in 0.2s var(--ease) both;
}
.ui-toast-ok { border-left-color: var(--green); }
.ui-toast-warn { border-left-color: var(--ochre); }
.ui-toast-bad { border-left-color: var(--accent); }
.ui-toast-gold { border-left-color: var(--ochre); }
.ui-toast.out { animation: ui-toast-out 0.24s var(--ease) both; }

/* ---------------- 弹窗 / 开局 ---------------- */
/* 遮罩统一：结算/战报/外交/战斗弹窗与开局、引导同属一个「暗纸罩」家族
   （#start-overlay 0.88 / .guide-mask 0.72，色相同源 rgba(40,33,24,·)）；
   此前 #modal 被调浅到 0.42，结算与战报弹窗（09/10 号图）因此脱离家族观感，
   收敛回 0.6——四个弹窗遮罩像素级一致，地图仍隐约可辨。 */
#modal { background: rgba(40, 33, 24, 0.6); }
.modal-card {
  width: 520px;
  padding: 18px 22px 16px;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: 0 4px 18px rgba(58, 50, 38, 0.12);
  animation: ui-pop 0.2s var(--ease) both;
  /* wave4 弹窗收尾⑤：卡体改 flex 列、限高 86vh——滚动移进 #modal-body，
     「知道了」恒在卡底可见（10 号图内容超一屏、按钮掉到折叠线下） */
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
}
.modal-card h3 {
  flex: none;
  margin-bottom: 12px;
  padding-bottom: 7px;
  font-size: 17px;
  letter-spacing: 4px;
  border-bottom: 1px solid var(--line);
}
.modal-card #modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-card #modal-close { flex: none; align-self: center; }
.modal-card .hbtn { margin: 14px auto 0; padding: 5px 28px; }

/* 波5 季结弹窗降噪：卡底部「后续季结不再自动弹出」让渡行（淡墨小字 + 朱红勾选点） */
.season-quiet {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.season-quiet input { accent-color: var(--accent); margin: 0; flex: none; }

#start-overlay { background: rgba(40, 33, 24, 0.88); z-index: 200; }
.start-card {
  width: 620px;
  padding: 26px 30px;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: 0 6px 24px rgba(58, 50, 38, 0.14);
  animation: ui-pop 0.24s var(--ease) both;
}
.start-card h2 {
  font-size: 28px;
  letter-spacing: 12px;
  color: var(--ink);
}
#faction-list { gap: 8px; }
button.pick {
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), #f4ecda);
  box-shadow: var(--shadow);
  transition: border-color 0.18s var(--ease), transform 0.12s var(--ease), background 0.18s var(--ease);
}
button.pick:hover { border-color: var(--accent); background: #fdf8ea; transform: translateY(-1px); }
button.pick:active { transform: translateY(0); }
button.pick:focus-visible { outline: 1px solid var(--ochre); outline-offset: 2px; }

.bact { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
button.dip {
  padding: 1px 8px;
  margin: 1px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--paper-2), #f2ead6);
  transition: border-color 0.16s var(--ease);
}
button.dip:hover:not(:disabled) { border-color: var(--accent); }
button.dip:disabled { opacity: 0.42; cursor: not-allowed; }
p.warn { color: var(--accent); }
p.sum {
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.35);
}
.report .promo { border-radius: var(--radius-sm); }

/* 守城战报（波6 交付G）：标题破 .report.win/.lose 的绿/朱惯例——
   胜利朱题（捷报朱批传统，--accent 朱红）、败局墨题（讣闻墨笔，--ink）。
   复用 style.css 的 .report 结构，仅覆写标题两色，无新图片资源。 */
.report.sv-win .rp-title { color: var(--accent); }
.report.sv-lose .rp-title { color: var(--ink); }

/* 战术网格轻微精修 */
.bgrid { gap: 3px; }
.bgrid .bc {
  border-radius: var(--radius-sm);
  transition: transform 0.12s var(--ease);
}
.bgrid .bc:hover:not(.gate) { transform: translateY(-1px); }

/* ---------------- 战场纸底（wave4 战斗盘微精修，复评 04 号图）----------------
   「地形 wash 与城关同为 0.055 级、格线均一像数据表」——wash 浓度提升在 battle.js
   （纯渲染，0.10~0.12）；这里给格盘下垫四角淡墨晕染的宣纸底 + 1.5px 墨线外框，
   与内部 0.5px 淡格线（style.css .bc）构成虚实对比。格纸底半透明，晕染可透出来。 */
.bgrid {
  padding: 7px;
  border: 1.5px solid rgba(58, 50, 38, 0.55);
  border-radius: var(--radius);
  background:
    radial-gradient(130px 95px at 0% 0%, rgba(58, 50, 38, 0.10), rgba(58, 50, 38, 0) 72%),
    radial-gradient(130px 95px at 100% 0%, rgba(58, 50, 38, 0.075), rgba(58, 50, 38, 0) 72%),
    radial-gradient(150px 105px at 0% 100%, rgba(58, 50, 38, 0.075), rgba(58, 50, 38, 0) 72%),
    radial-gradient(150px 105px at 100% 100%, rgba(58, 50, 38, 0.11), rgba(58, 50, 38, 0) 72%),
    linear-gradient(180deg, #f3ebd7 0%, #ebe1c7 100%);
}
/* 单位格恢复 1px 描边：0.5px 淡格线是空地的，归属描边（墨/朱）不能跟着变细 */
.bgrid .bc.u-atk,
.bgrid .bc.u-def { border-width: 1px; }

/* ---------------- 动效：墨渗 ---------------- */
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes ui-pop {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ui-pulse {
  0% { border-color: rgba(163, 40, 31, 0.35); }
  50% { border-color: rgba(163, 40, 31, 0.85); }
  100% { border-color: rgba(163, 40, 31, 0.35); }
}
@keyframes ui-ink {
  0% { color: #f6e3b8; }
  100% { color: #e8cf95; }
}
@keyframes ui-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 28px 0, 0 0; }
}
@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes ui-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px); }
}

/* ---------------- 无障碍：关闭全部动效 ---------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- 响应式：侧栏降级为底部抽屉 ---------------- */
@media (max-width: 1100px) {
  #layout { flex-direction: column; }
  #mapWrap { flex: 1 1 auto; min-height: 42vh; }

  aside {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-height: 46vh;
    padding: 10px 14px 22px;
    border-left: 0;
    border-top: 1px solid var(--line-2);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 14px rgba(58, 50, 38, 0.10);
  }
  /* 抽屉把手：一道淡墨短线 */
  aside::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 auto 10px;
    border-radius: 1px;
    background: var(--line-2);
  }

  .orders { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
  .officers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  #legend ul.factions { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

  header { flex-wrap: wrap; gap: 6px 12px; padding: 6px 12px; }
  header h1 { font-size: 17px; letter-spacing: 5px; }
  header .actions { margin-left: auto; }
  .modal-card, .start-card { width: 92vw; }
  .ui-toast-box { top: auto; bottom: 48vh; right: 12px; }
}

@media (max-width: 720px) {
  header h1 { font-size: 15px; letter-spacing: 3px; }
  header .scenario { display: none; }
  .officers { grid-template-columns: 1fr; }
  #faction-list { grid-template-columns: 1fr; }

  /* ---------- 触屏可玩性（2026-09-29）----------
     此前移动端只是"能显示"：按钮 12px、说明字 10~12.5px 且对比度不足（.dim ≈2.9:1），
     输入框 13px 还会触发 iOS 聚焦自动放大。这里统一到可点可读的尺寸。 */
  #mapWrap { min-height: 50vh; }          /* 地图是主视图，手机上给它一半屏 */
  aside { max-height: 44vh; }
  .hbtn { padding: 9px 14px; font-size: 13px; min-height: 40px; }
  /* ≥16px 是 iOS Safari 聚焦不自动放大的阈值 */
  input, select, textarea, .pick input { font-size: 16px; }
  .dim, small, .tip { font-size: 13px; color: var(--ink-2); }
  /* 小屏读不到的三处老字号：状态栏 11.5px、地形角标 9px、格内文字 12px */
  #statusbar { font-size: 13px; }
  .tmark { font-size: 12px; }
  .bgrid .bc span { font-size: 12px; }
  /* 9 列在 360px 下每格仅 ~35px：热区提到 44px（Apple HIG 触控最小值）+ 容器横向滚动。
     44×9 + gap 3×8 + padding 7×2 = 434px > 360px 视口，滚动兜底从 modal-wide 扩到 .bgrid 本体 */
  .bgrid { grid-template-columns: repeat(9, minmax(44px, 1fr)); overflow-x: auto; }
  .modal-card.modal-wide { width: 96vw; padding: 14px 12px; }
  .modal-card.modal-wide .bgrid { overflow-x: auto; }
  .modal-card.modal-wide .bgrid .bc { height: 44px; }
}

/* ---------------- 政令分组折叠（OrderUI：农商/军备/民政，12 令收纳） ----------------
   由 src/ui/ordergroups.js 生成 <details class="og"><summary>…</summary><div class="orders">… */
details.og {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(58, 50, 38, 0.025);
  margin-bottom: 7px;
}
details.og > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}
details.og > summary::-webkit-details-marker { display: none; }
details.og > summary::after {
  content: "▸";
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  transition: transform 0.15s var(--ease);
}
details.og[open] > summary::after { transform: rotate(90deg); }
details.og > summary:hover { background: rgba(58, 50, 38, 0.05); }
details.og .og-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  color: var(--paper);
  background: var(--ink-2);
  border-radius: var(--radius-sm);
}
details.og .og-n {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);  font-variant-numeric: tabular-nums;
}
details.og .orders { margin: 0 7px 7px; }

/* 军务配额徽记（机会成本，2026-09-29）：军备组 summary 上的「军务 x/y」——
   配额满时变灰红，让"本回合军令已用"一眼可见 */
details.og .og-mq {
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: rgba(178, 58, 52, 0.08);
  border: 1px solid rgba(178, 58, 52, 0.25);
  border-radius: var(--radius-sm);
  padding: 0 5px;
  margin-left: 2px;
}
details.og .og-mq.full { color: #a33; background: rgba(178, 58, 52, 0.16); }


/* ============================================================
   新手引导与帮助（src/ui/guide.js，ITERATION-PLAN R2）
   ============================================================ */
.guide-mask {
  position: fixed; inset: 0;
  background: rgba(40, 33, 24, 0.72);
  display: none;
  align-items: center; justify-content: center;
  z-index: 300;
}
.guide-card {
  width: 480px; max-width: calc(100vw - 40px);
  max-height: 86vh; overflow-y: auto;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(58, 50, 38, 0.14);
  padding: 22px 26px 18px;
  text-align: center;
  animation: ui-pop 0.24s var(--ease) both;
}
.guide-card h3 { font-size: 19px; letter-spacing: 2px; margin-bottom: 10px; }
.guide-ico {
  width: 52px; height: 52px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #f7f1e3;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(247, 241, 227, 0.5);
}
.guide-body { text-align: left; font-size: 13.5px; line-height: 1.8; margin-bottom: 12px; }
.guide-hint {
  display: block; margin-top: 6px; padding: 6px 9px;
  background: rgba(58, 50, 38, 0.06);
  border-left: 3px solid var(--accent);
  font-size: 12.5px;
}
.guide-red { color: var(--accent); }
.guide-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.guide-dots { display: inline-flex; gap: 5px; }
.guide-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-2);
}
.guide-dot.on { background: var(--accent); }
.guide-dot.past { background: var(--ink-3); }
table.guide-help { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
table.guide-help th {
  width: 58px; padding: 7px 4px; vertical-align: top;
  font-size: 12.5px; color: var(--accent);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.guide-help td {
  padding: 7px 4px; text-align: left;
  font-size: 12.5px; line-height: 1.7;
  border-bottom: 1px solid var(--line);
}


/* ============================================================
   原生控件主题化（ITERATION-PLAN R4）：去浏览器默认观感
   ============================================================ */
select,
input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  background-color: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 6px 26px 6px 10px;
  box-shadow: inset 0 1px 2px rgba(58, 50, 38, 0.06);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
/* 自绘下拉箭头：两条渐变拼 V 形（纯 CSS，零图片资源——test-ui 审计红线） */
select {
  padding-right: 26px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, rgba(92, 81, 64, 0) 50%, #5c5140 50%),
    linear-gradient(315deg, rgba(92, 81, 64, 0) 50%, #5c5140 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input[type="number"] {
  padding-right: 10px;
}
select:focus,
input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(163, 40, 31, 0.12);
}
input[type="number"]::-webkit-inner-spin-button { opacity: 0; }
input[type="number"]:hover::-webkit-inner-spin-button { opacity: 0.35; }

/* 剧本选择条（R6 多剧本） */
.scn-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.scn-bar .hbtn { font-size: 12.5px; }

/* 难度选择条（2026-09-29）：与剧本条同一套按钮语言，只是更紧凑并带一个标签 */
.diff-bar { margin: -4px 0 10px; gap: 8px; }
.diff-bar .hbtn { font-size: 12px; padding: 3px 10px; }
.scn-label { font-size: 12px; color: var(--ink-3); letter-spacing: 1px; align-self: center; }


/* ============================================================
   R6 视觉（迭代波 6·视觉F）：汉代纹样落地 + 面板纸纹 + 印章做旧
   ------------------------------------------------------------
   红线：零图片资源（test-ui 审计禁 url()/data-uri SVG）——
   纹样一律纯 CSS（多重渐变 / radial 环段 / 伪元素 / clip 无关的 border 图案）。
   克制总则：纹样是「印章律」的伴奏，暗朱 6~12% 透明度，不与内容抢墨。
   ============================================================ */

/* ---------------- ① 弹窗头部：云纹带 + 两端回钩 ----------------
   原来只有一根素朱线（h3 border-bottom）。现在：
   ::after = 标题线两端的小回钩（朱 38%）；
   ::before = 线下 9px 高的连续云纹带（上下交错的半圆环段 + 中缝细线，
   radial 环段 16px 一循环，暗朱 8~11%——近看不抢正文，远看是「一条纹样带」）。 */
.modal-card h3 { position: relative; }
.modal-card h3::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 3px;
  pointer-events: none;
  background:
    linear-gradient(rgba(163, 40, 31, 0.38), rgba(163, 40, 31, 0.38)) left top / 1px 3px no-repeat,
    linear-gradient(rgba(163, 40, 31, 0.38), rgba(163, 40, 31, 0.38)) right top / 1px 3px no-repeat;
}
.modal-card h3::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: -13px;
  height: 9px;
  pointer-events: none;
  background:
    radial-gradient(circle at 8px 0,
      rgba(163, 40, 31, 0) 4.2px,
      rgba(163, 40, 31, 0.11) 4.2px 5.6px,
      rgba(163, 40, 31, 0) 6.2px) 0 0 / 16px 9px repeat-x,
    radial-gradient(circle at 8px 9px,
      rgba(163, 40, 31, 0) 4.2px,
      rgba(163, 40, 31, 0.08) 4.2px 5.6px,
      rgba(163, 40, 31, 0) 6.2px) 8px 0 / 16px 9px repeat-x,
    linear-gradient(180deg,
      rgba(163, 40, 31, 0) 3.9px,
      rgba(163, 40, 31, 0.06) 3.9px 4.7px,
      rgba(163, 40, 31, 0) 4.7px);
}

/* ---------------- ② 弹窗四角角花：双线勾云角 ----------------
   两个伪元素各管对角两隅（::before 左上+右下、::after 右上+左下），
   每隅 = 外线 11px + 内线 7px 的双层 L 勾（朱 30% / 16%），inset 6px 让开 3px 朱顶边。 */
.modal-card {
  position: relative;
}
.modal-card::before,
.modal-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
}
.modal-card::before {
  background:
    linear-gradient(90deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) left top / 11px 1.5px no-repeat,
    linear-gradient(180deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) left top / 1.5px 11px no-repeat,
    linear-gradient(90deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) 3px 3px / 7px 1px no-repeat,
    linear-gradient(180deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) 3px 3px / 1px 7px no-repeat,
    linear-gradient(270deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) right bottom / 11px 1.5px no-repeat,
    linear-gradient(0deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) right bottom / 1.5px 11px no-repeat,
    linear-gradient(270deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) right 3px bottom 3px / 7px 1px no-repeat,
    linear-gradient(0deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) right 3px bottom 3px / 1px 7px no-repeat;
}
.modal-card::after {
  background:
    linear-gradient(270deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) right top / 11px 1.5px no-repeat,
    linear-gradient(180deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) right top / 1.5px 11px no-repeat,
    linear-gradient(270deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) right 3px top 3px / 7px 1px no-repeat,
    linear-gradient(180deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) right 3px top 3px / 1px 7px no-repeat,
    linear-gradient(90deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) left bottom / 11px 1.5px no-repeat,
    linear-gradient(0deg, rgba(163, 40, 31, 0.30) 0 11px, rgba(163, 40, 31, 0) 11px) left bottom / 1.5px 11px no-repeat,
    linear-gradient(90deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) left 3px bottom 3px / 7px 1px no-repeat,
    linear-gradient(0deg, rgba(163, 40, 31, 0.16) 0 7px, rgba(163, 40, 31, 0) 7px) left 3px bottom 3px / 1px 7px no-repeat;
}

/* ---------------- ③ 关键分区分隔线：中线 + 两端回钩 ----------------
   卡头（.card-h）、Tab 条（.tabs）、键值表头（stat-table th）三处：
   淡墨中线贯通、两端 1px 回钩上挑、线心压一短段朱——印章律的「界栏」语法。 */
.card-h { position: relative; }
.card-h::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 4px;
  pointer-events: none;
  background:
    linear-gradient(rgba(92, 81, 64, 0.28), rgba(92, 81, 64, 0.28)) left 0 top 2px / 100% 1px no-repeat,
    linear-gradient(rgba(163, 40, 31, 0.45), rgba(163, 40, 31, 0.45)) left 12px top 1.5px / 22px 2px no-repeat,
    linear-gradient(rgba(92, 81, 64, 0.28), rgba(92, 81, 64, 0.28)) left top / 1px 4px no-repeat,
    linear-gradient(rgba(92, 81, 64, 0.28), rgba(92, 81, 64, 0.28)) right top / 1px 4px no-repeat;
}
.tabs { position: relative; }
.tabs::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -4px;
  height: 3px;
  pointer-events: none;
  background:
    linear-gradient(rgba(92, 81, 64, 0.22), rgba(92, 81, 64, 0.22)) left 8px top 1px / calc(100% - 16px) 1px no-repeat,
    linear-gradient(rgba(92, 81, 64, 0.22), rgba(92, 81, 64, 0.22)) left top / 1px 3px no-repeat,
    linear-gradient(rgba(92, 81, 64, 0.22), rgba(92, 81, 64, 0.22)) right top / 1px 3px no-repeat;
}
table.stat-table th { position: relative; }
table.stat-table th::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 6px;
  height: 1px;
  margin-left: -3px;
  background: rgba(163, 40, 31, 0.35);
}

/* ---------------- ④ 侧栏竖向雷纹边饰（极淡） ----------------
   左缘 4px 菱纹链（两组反向 45° 细线交错），暗朱 7%——只当「装裱边」，不当花边。 */
aside { position: relative; }
aside::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 14px;
  width: 4px;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(163, 40, 31, 0.07) 0 1px, rgba(163, 40, 31, 0) 1px 6px),
    repeating-linear-gradient(-45deg, rgba(163, 40, 31, 0.07) 0 1px, rgba(163, 40, 31, 0) 1px 6px);
}

/* ---------------- ⑤ 宣纸纤维纹薄涂（1~2% 对比度） ----------------
   右栏 / 弹窗 / 开局卡：斜向细纤维 + 极淡角部墨晕，叠在原有纸色上——
   呼应 body 的横纹，纸面不再是一块平色。全部纯渐变，零图片。 */
aside {
  background-image:
    repeating-linear-gradient(17deg, rgba(58, 50, 38, 0.012) 0 1px, rgba(58, 50, 38, 0) 1px 9px),
    repeating-linear-gradient(53deg, rgba(58, 50, 38, 0.009) 0 1px, rgba(58, 50, 38, 0) 1px 13px),
    repeating-linear-gradient(0deg, rgba(58, 50, 38, 0.018) 0 1px, rgba(58, 50, 38, 0) 1px 3px);
}
.modal-card {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(90% 55% at 14% 0%, rgba(58, 50, 38, 0.028), rgba(58, 50, 38, 0) 62%),
    radial-gradient(85% 50% at 88% 100%, rgba(58, 50, 38, 0.024), rgba(58, 50, 38, 0) 60%),
    repeating-linear-gradient(17deg, rgba(58, 50, 38, 0.010) 0 1px, rgba(58, 50, 38, 0) 1px 9px),
    repeating-linear-gradient(53deg, rgba(58, 50, 38, 0.008) 0 1px, rgba(58, 50, 38, 0) 1px 13px);
}
.start-card {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(90% 55% at 14% 0%, rgba(58, 50, 38, 0.024), rgba(58, 50, 38, 0) 62%),
    radial-gradient(85% 50% at 88% 100%, rgba(58, 50, 38, 0.020), rgba(58, 50, 38, 0) 60%),
    repeating-linear-gradient(17deg, rgba(58, 50, 38, 0.009) 0 1px, rgba(58, 50, 38, 0) 1px 9px),
    repeating-linear-gradient(53deg, rgba(58, 50, 38, 0.007) 0 1px, rgba(58, 50, 38, 0) 1px 13px);
}

/* ---------------- ⑥ 印章占位 / 朱题签：轻微做旧 ----------------
   印泥边的不规则感 = 内描边双层微偏移（右上稍实、左下稍虚）+ 竹帘纹上一抹不匀朱晕；
   题签底色改斜向三段渐变，模拟印泥厚薄。全部 inset 阴影（外投影审计不涉）。 */
.ofc .pt[data-seal] {
  background:
    radial-gradient(130% 105% at 30% 18%, rgba(163, 40, 31, 0.05), rgba(163, 40, 31, 0) 56%),
    repeating-linear-gradient(45deg, rgba(163, 40, 31, 0.045) 0 5px, rgba(163, 40, 31, 0) 5px 10px),
    linear-gradient(180deg, #f8f2e4 0%, #efe4cc 100%);
  box-shadow:
    inset 0 0 0 2px rgba(247, 241, 227, 0.8),
    inset 0 0 0 3px rgba(163, 40, 31, 0.30),
    inset 1.5px 1px 0 rgba(163, 40, 31, 0.16),
    inset -1.5px -1px 0 rgba(163, 40, 31, 0.11),
    inset 0 1px 3px rgba(58, 50, 38, 0.10);
}
.ofc .pt .pt-tag {
  background: linear-gradient(115deg, #b02d22 0%, var(--accent) 52%, #95231a 100%);
  box-shadow:
    inset 1px 0 0 rgba(247, 241, 227, 0.28),
    inset -1px -0.5px 0 rgba(58, 50, 38, 0.20);
}

/* ---------------- ⑦ 战术格盘：地形符号图形化 + 格线再降一档 ----------------
   R6 复评 04 号图「单字 + 均布线框」残留数据表感。空格地形改纯 CSS 图形符号
   （battle.js 只挂 .t-<key> 类，绘制全在这里）：
     林 t-w = 墨点簇（竹绿主、淡墨辅，五点浓淡不一）
     丘 t-h = 皴笔弧（三道同心短弧，越远越淡）
     道 t-r = 双虚线（赭）
     水 t-a = 横波纹（花青三道错宽波线）
     平原 t-p = 一粒淡墨点（原 · 的图形化）
     城关 = 朱印小方块（.tseal，「门」字入印）
   单字退成右下角标（.tmark，9px / 55%）；地形全名仍在 title（hover）。
   格线：0.5px 线框降为 0.10/0.07 双档（隔行微差），以地形色差读格；外框墨线不动。 */
.bgrid .bc { position: relative; border-color: rgba(58, 50, 38, 0.10); }
.bgrid .bc:nth-child(even) { border-color: rgba(58, 50, 38, 0.07); }
.bgrid .bc .tgeo { position: absolute; inset: 0; pointer-events: none; }
.bgrid .bc .tmark {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-family: var(--font-serif);
  font-size: 9px;
  line-height: 1.4;
  color: var(--ink-3);
  opacity: 0.55;
  pointer-events: none;
}
.bgrid .bc.t-w .tgeo {
  background:
    radial-gradient(circle at 30% 34%, rgba(46, 125, 50, 0.52) 0 2.1px, rgba(46, 125, 50, 0) 2.6px),
    radial-gradient(circle at 58% 28%, rgba(58, 50, 38, 0.38) 0 1.7px, rgba(58, 50, 38, 0) 2.2px),
    radial-gradient(circle at 70% 54%, rgba(46, 125, 50, 0.44) 0 2.3px, rgba(46, 125, 50, 0) 2.8px),
    radial-gradient(circle at 40% 60%, rgba(46, 125, 50, 0.34) 0 1.6px, rgba(46, 125, 50, 0) 2.1px),
    radial-gradient(circle at 56% 76%, rgba(58, 50, 38, 0.26) 0 1.4px, rgba(58, 50, 38, 0) 1.9px);
}
.bgrid .bc.t-h .tgeo {
  background:
    radial-gradient(circle at 46% 150%, rgba(58, 50, 38, 0) 57px, rgba(58, 50, 38, 0.42) 57px 58.6px, rgba(58, 50, 38, 0) 59.6px),
    radial-gradient(circle at 40% 165%, rgba(58, 50, 38, 0) 68px, rgba(58, 50, 38, 0.28) 68px 69.6px, rgba(58, 50, 38, 0) 70.6px),
    radial-gradient(circle at 54% 180%, rgba(58, 50, 38, 0) 80px, rgba(58, 50, 38, 0.18) 80px 81.6px, rgba(58, 50, 38, 0) 82.6px);
}
.bgrid .bc.t-r .tgeo {
  background:
    repeating-linear-gradient(90deg, rgba(143, 106, 9, 0.50) 0 5px, rgba(143, 106, 9, 0) 5px 9px) 50% 36% / 72% 1.5px no-repeat,
    repeating-linear-gradient(90deg, rgba(143, 106, 9, 0.32) 0 5px, rgba(143, 106, 9, 0) 5px 9px) calc(50% + 5px) 64% / 72% 1.5px no-repeat;
}
.bgrid .bc.t-a .tgeo {
  background:
    repeating-linear-gradient(90deg, rgba(74, 111, 138, 0.50) 0 7px, rgba(74, 111, 138, 0) 7px 11px) 50% 28% / 78% 1.3px no-repeat,
    repeating-linear-gradient(90deg, rgba(74, 111, 138, 0.38) 0 6px, rgba(74, 111, 138, 0) 6px 12px) 50% 50% / 60% 1.3px no-repeat,
    repeating-linear-gradient(90deg, rgba(74, 111, 138, 0.30) 0 7px, rgba(74, 111, 138, 0) 7px 11px) 50% 72% / 70% 1.3px no-repeat;
}
.bgrid .bc.t-p .tgeo {
  background: radial-gradient(circle at 50% 50%, rgba(58, 50, 38, 0.20) 0 1.1px, rgba(58, 50, 38, 0) 1.6px);
}
.bgrid .bc .tseal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 10px;
  line-height: 1;
  color: #f7f1e3;
  background: rgba(163, 40, 31, 0.88);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(247, 241, 227, 0.45), 0 0 0 1px rgba(163, 40, 31, 0.25);
}

/* 窄屏抽屉态：侧栏竖向雷纹边饰随侧栏改向退场 */
@media (max-width: 1100px) {
  aside::after { display: none; }
}

/* ---------- 势力科技面板（2026-09-29 长线成长）---------- */
.t-line { margin: 10px 0 14px; }
.t-line-h { font-weight: 700; letter-spacing: 4px; border-left: 4px solid var(--ink, #444);
  padding-left: 8px; margin-bottom: 6px; }
.t-item { border: 1px solid rgba(68,59,47,.25); border-radius: 4px; padding: 8px 10px;
  margin: 6px 0; background: rgba(255,252,245,.55); }
.t-item.t-owned { border-color: rgba(94,124,87,.55); background: rgba(94,124,87,.08); }
.t-item .t-name { display: flex; align-items: baseline; gap: 8px; }
.t-item .t-act { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.t-buy { border: 1px solid #9c3c2e; color: #9c3c2e; background: transparent; border-radius: 4px;
  padding: 3px 12px; cursor: pointer; font-size: 13px; }
.t-buy:hover { background: #9c3c2e; color: #fff; }
.t-why { font-size: 12px; }

/* ---------------- 武将详情 & 战法闪现（2026-09-30，OfficerDetail）----------------
   266 张立绘全量覆盖后的资产兑现：点武将卡（data-od）弹详情——立绘大图 + 五维 +
   生平 + 羁绊；详情内点立绘近全屏放大（.od-zoom）；battle.js 施放战法时
   .od-flash 短暂浮层（小立绘 + 战法名 + 专属音效，1.2s 节流防 AI 连闪）。
   点击委托在 src/ui/officerdetail.js（document 捕获阶段，button 等控件直通）。 */

/* 可点开详情的武将卡：手型 + 立绘框微亮 */
.ofc[data-od] { cursor: pointer; }
.ofc[data-od]:hover .pt { border-color: rgba(163, 40, 31, 0.55); }
.ofc[data-od]:hover .pt img { filter: brightness(1.07); }

/* 行内可点人名（军队面板主/副将、详情羁绊） */
.od-link { color: inherit; border-bottom: 1px dashed rgba(68, 59, 47, 0.45); cursor: pointer; }
.od-link:hover { color: #9c3c2e; border-bottom-color: #9c3c2e; }

/* 详情布局：左立绘右信息；窄屏折单列 */
.od { display: grid; grid-template-columns: 176px 1fr; gap: 14px; }
.od-fig {
  position: relative; margin: 0; border: 1px solid var(--line-2); background: #f4ecd9;
  box-shadow: inset 0 0 0 3px rgba(255, 252, 245, 0.85);
  cursor: zoom-in; overflow: hidden;
}
.od-fig img {
  display: block; width: 100%; height: 258px; object-fit: cover; object-position: top center;
}
.od-fig.noimg img { display: none; }
.od-fig.noimg::before {           /* 立绘缺失：首字印章占位（与 .pt 同族语法） */
  content: attr(data-ch);
  display: flex; align-items: center; justify-content: center;
  height: 258px; font-family: var(--font-serif); font-size: 64px;
  color: rgba(163, 40, 31, 0.5); background: #efe6d2;
}
.od-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px;
  font-size: 10.5px; text-align: center; color: rgba(255, 252, 245, 0.92);
  background: rgba(40, 33, 24, 0.55); pointer-events: none;
}
.od-info { min-width: 0; }
.od-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.od-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: 3px; }
.od-zi { color: var(--ink-3); font-size: 12.5px; }
.od-fac {
  margin-left: auto; font-size: 11.5px; padding: 1px 8px; border-radius: 3px;
  color: #fff; background: var(--fc, #8a7a5c); letter-spacing: 2px;
}
table.od-meta { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; }
table.od-meta td { padding: 2.5px 6px 2.5px 0; vertical-align: top; }
table.od-meta td:first-child {
  width: 3.2em; color: var(--ink-3); white-space: nowrap;
  border-right: 1px solid var(--line); padding-right: 8px;
}
.od-five { margin-bottom: 6px; }
.od-fr { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.od-fr i { width: 2.6em; font-style: normal; font-size: 12px; color: var(--ink-3); letter-spacing: 1px; }
.od-bar {
  flex: 1; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(58, 50, 38, 0.08); border: 1px solid rgba(58, 50, 38, 0.12);
}
.od-bar b {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(68, 59, 47, 0.72), rgba(163, 40, 31, 0.82));
}
.od-fr em { font-style: normal; font-size: 12.5px; min-width: 2em; text-align: right; }
.od-tags, .od-bonds { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0; }
.od-tags em, .od-bonds em {
  font-style: normal; font-size: 11.5px; color: var(--ink-3); letter-spacing: 2px; margin-right: 2px;
}
.od-tags i {
  font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 3px;
  border: 1px solid rgba(68, 59, 47, 0.3); background: rgba(58, 50, 38, 0.04);
}
.od-bonds .od-link { font-size: 12.5px; }
.od-life { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-3); letter-spacing: 1px; }
.od-bio {
  margin: 8px 0 0; padding: 7px 0 0 10px; font-size: 12.8px; line-height: 1.75;
  color: var(--ink-2); border-left: 2px solid rgba(163, 40, 31, 0.4);
}

/* 近全屏放大层：z-index 350（#modal 之上、guide 300 之上——放大优先于一切临时层） */
.od-zoom {
  position: fixed; inset: 0; z-index: 350; cursor: zoom-out;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(40, 33, 24, 0.82);
  animation: od-fade 0.18s var(--ease) both;
}
.od-zoom-inner {
  position: relative; margin: 0; padding: 7px;
  background: var(--paper-2); border: 1px solid var(--line-2);
  box-shadow: 0 6px 22px rgba(20, 16, 10, 0.14);
}
.od-zoom-inner img {
  display: block; max-height: 74vh; max-width: 82vw;
}
.od-zoom-inner figcaption {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 5px 4px 1px; font-size: 13px; letter-spacing: 3px;
}
.od-zoom-inner figcaption b { font-family: var(--font-serif); font-size: 16px; }
.od-zoom-inner figcaption span { color: var(--ink-3); font-size: 12px; }
.od-zoom-tip { color: rgba(255, 252, 245, 0.75); font-size: 11.5px; letter-spacing: 2px; }

/* 战法闪现浮层：右上角小立绘 + 名条；pointer-events 不挡战场操作 */
.od-flash {
  position: fixed; top: 78px; right: 16px; width: 136px; z-index: 340;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-left: 3px solid #9c3c2e; border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(58, 50, 38, 0.13);
  pointer-events: none; overflow: hidden;
  animation: od-flash-in 0.2s var(--ease) both; transform-origin: top right;
}
.od-flash img {
  display: block; width: 100%; height: 198px; object-fit: cover; object-position: top center;
}
.od-flash-cap { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px 5px; }
.od-flash-cap b { font-family: var(--font-serif); font-size: 13.5px; letter-spacing: 2px; }
.od-flash-cap span { font-size: 11px; color: #9c3c2e; letter-spacing: 1.5px; }
.od-flash.out { animation: od-flash-out 0.38s var(--ease) both; }

@keyframes od-fade { from { opacity: 0; } }
@keyframes od-flash-in {
  from { opacity: 0; transform: translateX(12px) scale(0.96); }
  to { opacity: 1; }
}
@keyframes od-flash-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .od { grid-template-columns: 1fr; }
  .od-fig img, .od-fig.noimg::before { height: 300px; }
  .od-flash { top: auto; bottom: 88px; right: 10px; width: 116px; }
  .od-flash img { height: 168px; }
}

/* ---------------- 触屏 hover 粘滞修正（2026-09-30 手机友好）----------------
   触屏 tap 会触发 :hover 且残留到点别处为止。两类必须还原：
   ① transform 残留——格子/卡片"一直歪着 1px"，观感像坏了；
   ② .t-buy 残留红底白字——像"已购买"，直接误导操作。
   背景/边框微调类残留轻微、兼有 tap 反馈作用，保留不动。 */
@media (hover: none) {
  .ofc:hover, span.nb:hover, button.pick:hover, button.order:hover:not(:disabled),
  .bgrid .bc:hover:not(.gate) { transform: none; }
  .t-buy:hover { background: transparent; color: #9c3c2e; }
}