/* 《木兰令》古风界面样式 —— 墨色底，朱砂、鎏金点缀 */

:root {
  --ink: #171310;
  --ink-2: #221b15;
  --ink-3: #2c231b;
  --paper: #e9dcc3;
  --paper-dim: #b8a88c;
  --cinnabar: #b23a2e;
  --cinnabar-bright: #d04a38;
  --cinnabar-glow: #f0836a;
  --gold: #c9a227;
  --gold-dim: rgba(201, 162, 39, 0.45);
  --line: rgba(201, 162, 39, 0.28);
  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

* {
  box-sizing: border-box;
}

/* 手机上不许缩放。三件事各有各的开关，缺一件就还是能放大：
 *   touch-action: manipulation —— 关掉双击放大（顺带把点击的 300ms 延迟一起去了）
 *   -webkit-text-size-adjust  —— 关掉 iOS 横屏时自作主张放大正文
 *   ui.js 里拦 gesturestart   —— 关掉双指捏合（iOS 10 起 user-scalable=no 已失效）
 * 输入框的字号在下面的手机断点里抬到 16px：小于 16px 时 iOS 一聚焦就会自己放大。 */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(178, 58, 46, 0.08), transparent 55%),
    linear-gradient(180deg, #1c1611 0%, var(--ink) 40%, #120e0b 100%);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
}

.frame {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

/* ---------- 头部 ---------- */

.site-header {
  text-align: center;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

/* 标题与页签同一行：开始页页签藏起来、题字居中独占；
   进游戏后小标题靠左，页签占满右边 */
.title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

body:not(.playing) .tabs { display: none; }
body.playing .title-bar { justify-content: space-between; gap: 14px; }
body.playing .game-title { flex: none; }
body.playing .tabs { flex: 1; min-width: 0; }

.game-title {
  margin: 0;
  font-size: 40px;
  letter-spacing: 14px;
  text-indent: 14px;
  color: var(--gold);
  font-weight: 600;
  text-shadow: 0 0 24px rgba(201, 162, 39, 0.25);
}

.game-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--paper-dim);
}

/* ---------- 开局 ---------- */

.start-screen {
  max-width: 520px;
  margin: 40px auto;
  padding: 34px 30px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.start-intro {
  color: var(--paper-dim);
  margin: 0 0 26px;
}

.name-label {
  display: block;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 10px;
}

#name-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  text-align: center;
}

#name-input:focus {
  border-color: var(--gold-dim);
}

/* 键盘可达性：暗底上统一的鎏金焦点描边，任何可聚焦元素肉眼可辨 */
:focus-visible {
  outline: 1px solid var(--gold-dim);
  outline-offset: 2px;
}

.start-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ---------- 主布局 ---------- */

/* hidden 属性必须压过本文件里的 display 规则，否则开始页下方会露出空游戏区 */
[hidden] {
  display: none !important;
}

/* 一页一件事：剧情、麾下、将领、羁绊、历练、纪事各占整幅，
 * 不再挤在一个巴掌宽的侧栏里。 */
.game { display: block; }

.stat-row {
  margin-bottom: 12px;
  border-radius: 3px;
  padding: 4px 6px;
  transition: background-color 0.6s ease;
}

.stat-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.stat-value {
  color: var(--gold);
}

.stat-bar {
  height: 5px;
  margin-top: 5px;
  background: rgba(233, 220, 195, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cinnabar), var(--gold));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.stat-row.flash-up {
  background-color: rgba(201, 162, 39, 0.22);
}

.stat-row.flash-down {
  background-color: rgba(178, 58, 46, 0.28);
}

.float-delta {
  position: fixed;
  right: 24px;
  /* 同一次渲染的多个浮标由 JS 写入 --i，纵向依次错开 34px，互不重叠 */
  top: calc(24px + var(--i, 0) * 34px);
  padding: 4px 12px;
  background: var(--ink-3);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--gold);
  font-size: 14px;
  opacity: 1;
  /* 时长跟 ui.js 的 FLOAT_FADE_MS 是一套，改一个就要改另一个 */
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
  z-index: 30;
}

.float-delta.down {
  color: var(--cinnabar-bright);
  border-color: rgba(178, 58, 46, 0.6);
}

.float-delta.fade {
  opacity: 0;
  transform: translateY(-14px);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap; /* 确认态按钮独占一行时容纳换行，常态三按钮仍在一行内 */
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- 正文区 ---------- */

.stage {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 30px 30px;
  min-height: 420px;
  position: relative;
}

.chapter {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--cinnabar-bright);
  margin-bottom: 6px;
}

.node-title {
  margin: 0 0 16px;
  font-size: 26px;
  letter-spacing: 6px;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.story-text p {
  margin: 0 0 14px;
  text-indent: 2em;
}

/* ---------- 选项 ---------- */

.choices {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-btn {
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cinnabar);
  border-radius: 3px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.choice-btn:hover:not(:disabled) {
  background: #37291d;
  border-color: var(--gold-dim);
}

.choice-btn:disabled {
  cursor: not-allowed;
  border-left-color: #5a4f42;
  color: var(--paper-dim);
}

/* 半透明只施加于选项主文本；锁定原因保持全亮度，否则暗底上几乎看不清 */
.choice-btn:disabled > span:first-child {
  opacity: 0.5;
}

.lock-reason {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--cinnabar-glow);
}

.lock-reason::before {
  content: "🔒 ";
}

/* ---------- 按钮 ---------- */

.btn {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: #3a2c1f;
  color: var(--gold);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 按压反馈：与墨色底拉开一点「按下去」的层次 */
.btn:active:not(:disabled),
.choice-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--cinnabar);
  border-color: var(--cinnabar-bright);
  color: #f6ead8;
}

.btn-primary:hover:not(:disabled) {
  background: var(--cinnabar-bright);
  color: #fff;
}

.btn-small {
  flex: 1;
  padding: 7px 4px;
  font-size: 13px;
  letter-spacing: 1px;
  /* 「重新开始」四字必须单行，否则与「存档」「读档」高矮不齐 */
  white-space: nowrap;
}

/* 两步确认态：文案变长，独占一行并允许折行，避免顶破 250px 面板 */
.btn-small.confirming {
  flex: 1 1 100%;
  white-space: normal;
}

/* ---------- 结局 ---------- */

body.is-ending .stage {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(201, 162, 39, 0.18), inset 0 0 60px rgba(201, 162, 39, 0.05);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.10), transparent 60%),
    var(--ink-2);
}

body.is-ending .node-title {
  font-size: 32px;
  letter-spacing: 10px;
  text-align: center;
  color: var(--gold);
}

.ending-banner {
  text-align: center;
  font-size: 13px;
  letter-spacing: 8px;
  color: var(--gold);
  margin-bottom: 10px;
}

/* ---------- 提示条 ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  padding: 8px 22px;
  background: var(--ink-3);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
  z-index: 40;
}


/* ---------- 战斗界面 ---------- */

.battle {
  margin-top: 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(178, 58, 46, 0.10), transparent 65%),
    var(--ink);
  padding: 11px 14px 13px;
  overflow: hidden;   /* 战场图出血到边，要靠这个把圆角切出来 */
}

.battle-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 9px;
}

.battle-name {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2px;
}

.battle-round {
  color: var(--cinnabar-glow);
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.battle-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.side {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
}

.side-self { border-left: 3px solid var(--gold); }
.side-enemy { border-left: 3px solid var(--cinnabar); }

.side-name {
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: var(--paper);
}

.side-enemy .side-name { color: var(--cinnabar-glow); }
.side-self .side-name { color: var(--gold); }

.gauge {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--paper-dim);
}

.gauge-bar {
  height: 6px;
  background: rgba(233, 220, 195, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.gauge-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease;
}

.g-troops .gauge-bar i { background: linear-gradient(90deg, #8d5a2b, var(--gold)); }
.g-morale .gauge-bar i { background: linear-gradient(90deg, var(--cinnabar), var(--cinnabar-glow)); }
.g-stamina .gauge-bar i { background: linear-gradient(90deg, #3f6b63, #7fbfae); }

.gauge-num {
  font-size: 12px;
  color: var(--paper);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.battle-log-cap {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold-dim);
}

/* 高度是硬约束：1280×800 下「双方状态条 + 战况 + 全部行动按钮」必须同屏，
   所以战况框固定高度、内部滚动，新回合自动滚到底 */
/* 战况日志**不再自己开滚动条**。以前它 max-height:138px 自己滚，
 * 外面套着会滚的正文区，再外面整页还会滚——三层滚动嵌在一起。
 * 手机上量过一次：日志窗 100px，里面藏着 590px；正文区 207px，藏着 270px；
 * 整页还要再滚 208px。要读上一回合发生了什么，得在最里那个小窗里翻半天。
 * 现在它按内容长多高就多高，交给正文区那一层滚——一块地方只留一个滚动条。
 * 打完一手之后 onChoice 会把正文区滚到底，最新那一回合自己送到眼前。 */
.battle-log {
  margin-top: 4px;
  padding-top: 2px;
}

.log-round + .log-round {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 162, 39, 0.18);
}

.log-head {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold-dim);
  margin-bottom: 4px;
}

.battle-log p {
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.65;
}

.log-prelude p {
  color: var(--paper-dim);
}

.log-tally {
  font-size: 13px;
  color: var(--cinnabar-glow);
  letter-spacing: 1px;
}

.battle-result {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: rgba(201, 162, 39, 0.06);
}

.battle-result.tone-defeat,
.battle-result.tone-withdraw {
  border-color: rgba(178, 58, 46, 0.55);
  background: rgba(178, 58, 46, 0.08);
}

.result-badge {
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--gold);
  margin-bottom: 4px;
}

.tone-defeat .result-badge,
.tone-withdraw .result-badge { color: var(--cinnabar-glow); }

.result-title {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: 3px;
  color: var(--paper);
}

.battle-result p {
  margin: 0 0 6px;
  font-size: 15px;
}

/* 战斗中的行动按钮：多一行机制说明 */
.choice-main { display: block; }

.choice-hint {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--paper-dim);
  letter-spacing: 0.5px;
}

.choice-btn.act-hold { border-left-color: #5f8f82; }
.choice-btn.act-ruse { border-left-color: #7a6bb0; }
.choice-btn.act-rally { border-left-color: var(--gold); }
.choice-btn.act-fire,
.choice-btn.act-duel,
.choice-btn.act-banner { border-left-color: var(--cinnabar-bright); }
.choice-btn.act-withdraw { border-left-color: #6a6058; }
.choice-btn.act-settle {
  border-left-color: var(--gold);
  background: #33261a;
}

/* 战斗中行动最多 7 个，排成两列才装得进一屏；结算的「继续」独占一行 */
body.is-battle .choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

body.is-battle .choice-btn {
  /* 左边要给编号腾出位置，不然数字会压在行动名上 */
  padding: 9px 13px 9px 36px;
  font-size: 15px;
  line-height: 1.5;
}

body.is-battle .choice-no { left: 9px; top: 10px; }

body.is-battle .choice-hint {
  font-size: 12px;
  margin-top: 2px;
}

body.is-battle .choice-btn.act-settle {
  grid-column: 1 / -1;
}

/* ---------- 手机布局 ---------- */

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .frame {
    /* 底下那 30px 在折线以下，白白让整页多滚一截；顶上那 12px 是从正文里扣的 */
    padding: 8px 10px 16px;
  }

  .game-title {
    font-size: 30px;
    letter-spacing: 8px;
    text-indent: 8px;
  }

  .game {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .panel {
    position: static;
    padding: 12px;
  }

  #fold-body-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  .stat-row {
    margin-bottom: 6px;
  }

  .stage {
    padding: 18px 16px 20px;
    min-height: 0;
  }

  .node-title {
    font-size: 22px;
    letter-spacing: 3px;
  }

  /* 手机端浮标贴右上角：标题与副标题都居中，右上角是空地，不会遮字 */
  .float-delta {
    right: 10px;
    top: calc(12px + var(--i, 0) * 34px);
  }

  .choice-btn {
    font-size: 15px;
    padding: 12px 14px;
  }

  .start-actions {
    flex-direction: column;
  }

  .battle {
    padding: 10px 10px 12px;
  }

  /* 手机上竖排两个状态块要 270px，占掉三分之一屏；改成两列紧排 */
  .battle-sides {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .side {
    padding: 7px 8px;
  }

  .side-name {
    font-size: 12px;
    letter-spacing: 0;
    margin-bottom: 5px;
  }


  .battle-log-cap {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  /* 行动文案长，手机上仍然单列，只是压紧一些 */
  body.is-battle .choices {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 9px;
  }

  body.is-battle .choice-btn {
    padding: 8px 11px;
    font-size: 14px;
  }

  .battle-log p {
    font-size: 14px;
  }

  .gauge {
    grid-template-columns: 24px 1fr;
    grid-template-areas: "label bar" "num num";
    gap: 4px;
    font-size: 10px;
    margin-bottom: 4px;
  }

  .gauge-label { grid-area: label; }
  .gauge-bar { grid-area: bar; }

  .gauge-num {
    grid-area: num;
    font-size: 10px;
    text-align: right;
    margin-top: -3px;
  }

  .choice-hint {
    font-size: 12px;
  }
}

/* =========================================================================
   以下是「面板收放 / 人物 / 军队 / 大事记 / 自由输入 / 抽屉」的样式
   ========================================================================= */

/* ---------- 顶部状态条：面板全折起时，靠它交代你是谁、在哪、带着多少人 ---------- */

.topbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 9px 14px;
  margin-bottom: 2px;
  background: linear-gradient(90deg, rgba(44, 35, 27, 0.9), rgba(34, 27, 21, 0.9));
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 1px;
}

.tb-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.tb-item i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--paper-dim);
}

.tb-item b {
  font-weight: 600;
  color: var(--gold);
}

.tb-heart b { color: var(--cinnabar-glow); }


/* ---------- 可收放的面板小节 ---------- */

.fold + .fold { margin-top: 8px; }

.fold-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--paper-dim);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}

.fold-head:hover { border-color: var(--gold-dim); }

.fold-title {
  letter-spacing: 3px;
  color: var(--gold);
  font-size: 13px;
}

.fold-summary {
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: var(--paper-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fold-icon { color: var(--gold); font-size: 12px; }

.fold.open .fold-head {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--gold);
}

.fold-body {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 3px 3px;
  padding: 12px 10px;
  background: rgba(23, 19, 16, 0.55);
}

.panel-empty {
  margin: 4px 0;
  font-size: 12.5px;
  color: var(--paper-dim);
  line-height: 1.7;
}

/* ---------- 麾下 ---------- */

.army-res {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.res-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.res-label { font-size: 10.5px; letter-spacing: 1px; color: var(--paper-dim); }
.res-num { font-size: 15px; color: var(--gold); font-weight: 600; }

.unit-list { display: flex; flex-direction: column; gap: 6px; }

.unit-card {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  font-family: var(--serif);
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}

.unit-card:hover { border-color: var(--gold); background: #332a20; }
.unit-card.tier-2 { border-left-color: #7fbfae; }
.unit-card.tier-3 { border-left-color: #7a6bb0; }
.unit-card.tier-4 { border-left-color: var(--cinnabar-bright); }

.unit-glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 15px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.unit-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.unit-name { font-size: 13px; color: var(--paper); }
.unit-meta { font-size: 11px; color: var(--paper-dim); letter-spacing: 1px; }
.unit-vet { font-size: 10.5px; color: var(--paper-dim); white-space: nowrap; }

.vet-bar {
  display: block;
  height: 3px;
  background: rgba(233, 220, 195, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.vet-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8d5a2b, var(--gold));
}

.army-power {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ap-label { font-size: 11px; letter-spacing: 1px; color: var(--paper-dim); }
.ap-nums { font-size: 12.5px; color: var(--gold); }

.fallen {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.fallen-head { font-size: 11px; letter-spacing: 2px; color: var(--cinnabar-glow); margin-bottom: 4px; }
.fallen-row { font-size: 11.5px; color: var(--paper-dim); }

/* ---------- 羁绊 ---------- */

.char-list { display: flex; flex-direction: column; gap: 6px; }

.char-card {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  font-family: var(--serif);
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hue, var(--gold-dim));
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}

.char-card:hover { border-color: var(--gold); background: #332a20; }
.char-card.unmet { opacity: 0.45; border-left-color: #55483a; }
.char-card.romance { background: linear-gradient(90deg, rgba(178, 58, 46, 0.16), var(--ink-3)); }

.char-crest {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: var(--paper);
  background: color-mix(in srgb, var(--hue, #8a7a5c) 30%, transparent);
  border: 1px solid var(--hue, var(--gold-dim));
  border-radius: 2px;
}

.char-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.char-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.char-name { font-size: 13.5px; color: var(--paper); white-space: nowrap; }
.char-title {
  font-size: 10.5px;
  color: var(--paper-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aff-bar {
  display: block;
  height: 3px;
  background: rgba(233, 220, 195, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.aff-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cinnabar), var(--cinnabar-glow));
}

.char-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--paper-dim); }
.char-aff { color: var(--cinnabar-glow); }

.char-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: var(--cinnabar-glow);
  border: 1px solid var(--cinnabar);
  border-radius: 50%;
}

.char-mark.dim { color: var(--paper-dim); border-color: var(--line); }

/* ---------- 大事记 ---------- */

.journal-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.65;
  border-bottom: 1px dashed rgba(201, 162, 39, 0.14);
}

.journal-row:last-child { border-bottom: none; }
.j-step { color: var(--paper-dim); font-size: 10.5px; white-space: nowrap; padding-top: 2px; }
.j-text { color: var(--paper); }
.journal-row.ai .j-text { color: #a9c9be; }
.journal-row.local .j-text { color: #c3b394; }

/* ---------- 插播提示 ---------- */

.divert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(178, 58, 46, 0.2), transparent);
  border-left: 3px solid var(--cinnabar);
  border-radius: 2px;
  font-size: 13px;
}

.db-kind {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cinnabar-glow);
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}

.db-text { color: var(--paper); }

/* ---------- 自由输入 ---------- */

.freeform {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.ff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ff-label { font-size: 12px; letter-spacing: 3px; color: var(--gold); }

.ff-mode {
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
}

.ff-mode.on { color: #7fbfae; border-color: rgba(127, 191, 174, 0.45); }

.ff-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }

.ff-input {
  width: 100%;
  resize: vertical;
  min-height: 62px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 11px;
}

.ff-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.12);
}

.ff-input::placeholder { color: #6d6252; }

.ff-go { white-space: nowrap; align-self: stretch; }

.ff-hint { margin-top: 7px; font-size: 11.5px; color: var(--paper-dim); line-height: 1.65; }

.free-result {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(127, 191, 174, 0.06);
  border: 1px solid rgba(127, 191, 174, 0.22);
  border-left: 3px solid #7fbfae;
  border-radius: 3px;
}

.fr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.fr-quote { font-size: 12.5px; color: #a9c9be; letter-spacing: 1px; }
.fr-src { font-size: 10.5px; color: var(--paper-dim); white-space: nowrap; }
.free-result p { margin: 6px 0 0; font-size: 15px; line-height: 1.85; }

/* 正文被模型照玩家写的那句话改过之后的落款。做得极淡：
 * 它只是解释「这段字怎么跟刚才不一样了」，不该比正文还响。 */
.retold-mark {
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: rgba(169, 201, 190, 0.55);
  text-align: right;
}

/* ---------- 抽屉：人物立传 / 兵种来历 ---------- */

.drawer { position: fixed; inset: 0; z-index: 60; }

.drawer-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(2px);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  background: linear-gradient(180deg, #241d16, var(--ink-2));
  border-left: 1px solid var(--gold-dim);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.drawer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--paper-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.drawer-close:hover { color: var(--gold); border-color: var(--gold); }

.drawer-scroll { overflow-y: auto; padding: 26px 26px 40px; }

.drawer-crest {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 28px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  margin-bottom: 12px;
}

.drawer-title {
  margin: 0 0 4px;
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--gold);
}

.drawer-sub {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--paper-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.drawer-h {
  margin: 18px 0 6px;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--cinnabar-glow);
  font-weight: 600;
}

.drawer-h.strategy-h {
  color: var(--gold);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.drawer-body p { margin: 0 0 9px; font-size: 14.5px; line-height: 1.9; color: var(--paper); }

.call-line {
  font-size: 13px;
  color: var(--cinnabar-glow);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.tier-desc { color: var(--paper-dim) !important; font-style: italic; }

.next-tier {
  font-size: 12px;
  color: var(--paper-dim);
  padding: 6px 9px;
  background: var(--ink-3);
  border-radius: 2px;
  margin-bottom: 6px;
}

.next-tier.dim { color: #8d8071; }

.trait-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(201, 162, 39, 0.14);
  font-size: 12.5px;
}

.trait-name { color: var(--gold); white-space: nowrap; }
.trait-desc { color: var(--paper-dim); line-height: 1.7; }
.trait-row.ready .trait-name { color: #7fbfae; }

.tag-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tag-label { font-size: 11px; letter-spacing: 2px; }
.tag-label.up { color: #7fbfae; }
.tag-label.down { color: var(--cinnabar-glow); }

.tag {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--paper-dim);
}

.tag.up { border-color: rgba(127, 191, 174, 0.35); color: #a9c9be; }
.tag.down { border-color: rgba(208, 74, 56, 0.35); color: #d8a094; }

.bond-on { color: #7fbfae !important; }
.bond-off { color: var(--paper-dim) !important; }

body.drawer-open { overflow: hidden; }

/* ---------- 手机 ---------- */

@media (max-width: 640px) {
  .topbar {
    font-size: 12px;
    gap: 4px 12px;
    padding: 8px 10px;
  }


  .panel { position: static; padding: 10px; }

  .fold-head { grid-template-columns: auto 1fr auto; }
  .fold-summary { font-size: 11px; }

  .army-res { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .res-num { font-size: 14px; }

  .ff-row { grid-template-columns: 1fr; }
  .ff-go { width: 100%; }

  .drawer-panel { width: 100%; border-left: none; }
  .drawer-scroll { padding: 22px 16px 40px; }
  .drawer-title { font-size: 21px; }
}

/* ---------- 募兵抽屉 ---------- */

.btn.wide { width: 100%; margin-bottom: 10px; justify-content: center; }

.drawer-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

.pool { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pool.shut { opacity: 0.5; }

.pool-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pool-name { font-size: 16px; letter-spacing: 3px; color: var(--gold); }
.pool-lock { font-size: 11px; color: var(--cinnabar-glow); }
.pool-desc { margin: 0 0 12px !important; font-size: 12.5px !important; color: var(--paper-dim) !important; line-height: 1.75 !important; }

.offer { padding: 10px; margin-bottom: 8px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; }
.offer-top { display: flex; align-items: center; gap: 9px; }

.offer-glyph {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  font-size: 16px; color: var(--gold);
  background: rgba(201, 162, 39, 0.08); border: 1px solid var(--gold-dim); border-radius: 2px;
}

.offer-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer-name { font-size: 14px; color: var(--paper); }
.offer-meta { font-size: 11px; color: var(--paper-dim); }
.offer-desc { margin: 7px 0 9px !important; font-size: 12.5px !important; line-height: 1.75 !important; color: var(--paper-dim) !important; }
.offer-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.offer-lock { font-size: 11px; color: var(--cinnabar-glow); }
.fr-tally { margin-top: 8px; font-size: 12px; letter-spacing: 1px; color: var(--gold); }

/* ---------- 结局录 ---------- */

.ending-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 13.5px;
  border-bottom: 1px dashed rgba(201, 162, 39, 0.12);
}

.er-mark { color: #5b5046; text-align: center; }
.er-title { color: #6d6252; letter-spacing: 1px; }
.ending-row.got .er-mark { color: var(--gold); }
.ending-row.got .er-title { color: var(--paper); }

/* ---------- 结局页回顾 ---------- */

.run-summary {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.rs-head {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--gold);
  margin-bottom: 12px;
}

.rs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}

.rs-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.rs-label { font-size: 10.5px; letter-spacing: 2px; color: var(--paper-dim); }
.rs-value { font-size: 15px; color: var(--gold); }

.rs-who { margin-bottom: 12px; }
.rs-who > .rs-label { display: block; margin-bottom: 6px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.rs-chip {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--paper-dim);
}

.rs-chip.heart { border-color: var(--cinnabar); color: var(--cinnabar-glow); }

.rs-journal {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--paper-dim);
  padding: 3px 0 3px 10px;
  border-left: 2px solid var(--line);
  margin-bottom: 3px;
}
.char-card.known { opacity: 0.78; border-left-style: dashed; }
.char-card.known .char-tier { color: #8d8071; }

/* 没见过的人收成一排小方块，别让十几张「？？？」卡片撑满整个面板 */
.char-rest {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}

.char-rest-head { font-size: 11px; letter-spacing: 1px; color: var(--paper-dim); margin-bottom: 6px; }
.char-rest-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.char-chip {
  width: 26px;
  height: 26px;
  font-family: var(--serif);
  font-size: 13px;
  color: #6d6252;
  background: var(--ink-3);
  border: 1px dashed rgba(201, 162, 39, 0.22);
  border-radius: 2px;
  cursor: pointer;
}

.char-chip:hover { color: var(--gold); border-color: var(--gold-dim); }

/* =========================================================================
   轮回：属性回响、遗物、前世记忆
   ========================================================================= */

.legacy-box {
  margin: 22px 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(178, 58, 46, 0.08), rgba(34, 27, 21, 0.6));
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: left;
}

.lg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.lg-cycle { font-size: 17px; letter-spacing: 5px; color: var(--cinnabar-glow); }

.lg-more {
  font-family: var(--serif);
  font-size: 11.5px;
  color: var(--paper-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2px 8px;
  cursor: pointer;
}

.lg-more:hover { color: var(--gold); border-color: var(--gold-dim); }

.lg-echoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.lg-label { font-size: 11px; letter-spacing: 2px; color: var(--paper-dim); margin-right: 4px; }

.lg-echo {
  font-size: 12px;
  padding: 2px 8px;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.lg-relic-head { font-size: 11.5px; letter-spacing: 1px; color: var(--paper-dim); margin-bottom: 8px; }
.lg-relic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }

.relic-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.relic-card:hover { border-color: var(--gold-dim); }

.relic-card.on {
  border-color: var(--cinnabar);
  background: linear-gradient(180deg, rgba(178, 58, 46, 0.18), var(--ink-3));
  box-shadow: 0 0 0 1px rgba(178, 58, 46, 0.3);
}

.relic-glyph {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 15px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.relic-name { font-size: 14px; letter-spacing: 2px; color: var(--gold); }
.relic-card.on .relic-name { color: var(--cinnabar-glow); }
.relic-desc { font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.relic-eff { font-size: 11px; color: #7fbfae; letter-spacing: 0.5px; }

/* 初遇那一幕前面的前世记忆 */

.memory-block {
  margin: 0 0 16px;
  padding: 11px 14px;
  background: rgba(178, 58, 46, 0.06);
  border-left: 3px solid rgba(178, 58, 46, 0.5);
  border-radius: 2px;
}

.memory-block.tier-romanced { border-left-color: var(--cinnabar-bright); background: rgba(178, 58, 46, 0.11); }
.mem-head { font-size: 11px; letter-spacing: 4px; color: var(--cinnabar-glow); margin-bottom: 5px; }
.memory-block p { margin: 0 0 6px !important; font-size: 14px !important; line-height: 1.85 !important; color: #d8c4b4 !important; font-style: italic; }
.memory-block p:last-child { margin-bottom: 0 !important; }

.drawer-h.past-h { color: var(--cinnabar-glow); }
.past-meta { font-size: 11.5px; color: var(--paper-dim); margin-bottom: 8px; }

.char-mark.past { color: var(--cinnabar-glow); border-color: rgba(208, 74, 56, 0.45); }
.rs-chip.echo { border-color: var(--gold-dim); color: var(--gold); }
.rs-legacy { padding-top: 10px; border-top: 1px dashed var(--line); }

@media (max-width: 640px) {
  .lg-relic-row { grid-template-columns: 1fr; }
  .lg-cycle { font-size: 15px; letter-spacing: 3px; }
}

/* =========================================================================
   立绘
   ========================================================================= */

.portrait {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(201, 162, 39, 0.06);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;   /* 立绘是半身像，取上面一点才是脸 */
  opacity: 0;
  transition: opacity 0.35s ease;
}

.portrait.has-img img { opacity: 1; }
.portrait.has-img .portrait-glyph { opacity: 0; }

.portrait-glyph {
  font-size: 0.95em;
  color: var(--gold);
  transition: opacity 0.25s ease;
}

/* 人物卡上的小头像 */
.char-crest.portrait { width: 32px; height: 32px; font-size: 17px; }
.char-card.unmet .portrait, .char-chip { filter: grayscale(1); }

/* 抽屉顶上的大立绘 */
.drawer-crest.drawer-portrait {
  width: 100%;
  height: 260px;
  background: none;
  border: none;
  margin-bottom: 14px;
}

.portrait.big {
  width: 100%;
  height: 100%;
  font-size: 40px;
  border-color: var(--line);
  border-radius: 3px;
  box-shadow: inset 0 -60px 60px -30px var(--ink-2);
}

.portrait.big img { object-position: 50% 18%; }

/* 正文旁边的这一幕立绘 */

.scene-portrait {
  float: right;
  width: 156px;
  margin: 0 0 12px 18px;
  cursor: pointer;
}

.portrait.scene {
  width: 156px;
  height: 208px;
  font-size: 34px;
  border-color: var(--gold-dim);
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 -50px 44px -30px rgba(23, 19, 16, 0.9);
}

.scene-portrait:hover .portrait.scene { border-color: var(--gold); }

.scene-cap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
  text-align: center;
}

.scene-name { font-size: 14px; letter-spacing: 3px; color: var(--gold); }
.scene-title { font-size: 10.5px; color: var(--paper-dim); }
.scene-aff { font-size: 10.5px; color: var(--cinnabar-glow); }

@media (max-width: 640px) {
  .scene-portrait { width: 108px; margin-left: 12px; }
  .portrait.scene { width: 108px; height: 144px; font-size: 26px; }
  .drawer-crest.drawer-portrait { height: 200px; }
}

/* =========================================================================
   主视觉与纸纹（两张图都是可有可无的：取不到就当没有，界面照旧）
   ========================================================================= */

/* 主视觉：出血到开始页的边，图挂上时整页跟着变宽 —— 一进来先看见的是一幅画，
 * 而不是一个表单。取不到图就塌成 0 高，什么也不影响。 */
.hero {
  height: 0;
  margin: 0;
  overflow: hidden;
  transition: height 0.45s ease, margin 0.45s ease;
}

.start-screen:has(.hero.on) { max-width: 760px; }

.hero.on {
  height: 300px;
  /* 出血：抵掉开始页的内边距，横向铺满整张卡 */
  margin: -34px -30px 24px;
  background-image: url('art/ui/hero.jpg');
  background-size: cover;
  background-position: 50% 58%;
  position: relative;
}

/* 只在上下两端压一点，中间保持画本身的样子 */
.hero.on::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 19, 16, 0.35) 0%, transparent 22%, transparent 55%, rgba(34, 27, 21, 0.85) 92%, var(--ink-2) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(23, 19, 16, 0.5) 100%);
}

body.papered {
  background-image:
    url('art/ui/paper.jpg'),
    radial-gradient(ellipse at 50% 0%, rgba(178, 58, 46, 0.08), transparent 55%),
    linear-gradient(180deg, #1c1611 0%, var(--ink) 40%, #120e0b 100%);
  background-size: 720px auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal;
}

@media (max-width: 640px) {
  .start-screen { padding: 20px 16px; }
  .start-screen:has(.hero.on) { max-width: 100%; }
  .hero.on { height: 170px; margin: -20px -16px 18px; }
}

/* =========================================================================
   章节卡与选择肢
   ========================================================================= */

.chapter-card {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  gap: 10px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.88) 40%, rgba(12, 10, 8, 0.55) 70%, transparent 92%);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.chapter-card.show { opacity: 1; }

.cc-line {
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  justify-self: center;
}

.cc-num {
  font-size: 15px;
  letter-spacing: 10px;
  text-indent: 10px;
  color: var(--cinnabar-glow);
  text-align: center;
}

.cc-name {
  font-size: 38px;
  letter-spacing: 14px;
  text-indent: 14px;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 32px rgba(201, 162, 39, 0.28);
}

.chapter-card.show .cc-name { animation: ccrise 0.7s ease both; }

@keyframes ccrise {
  from { transform: translateY(10px); letter-spacing: 24px; opacity: 0; }
  to   { transform: none; letter-spacing: 14px; opacity: 1; }
}

/* 选择肢：左边一个编号，看起来像游戏的选项而不是一段链接 */
.choice-btn { position: relative; padding-left: 40px; }

.choice-no {
  position: absolute;
  left: 12px;
  /* 对齐第一行而不是整块居中——带说明的战斗行动有三行高，居中会掉到文字中间 */
  top: 13px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.choice-btn:hover:not(:disabled) .choice-no { color: var(--gold); border-color: var(--gold-dim); }
.choice-btn:disabled .choice-no { opacity: 0.4; }

@media (max-width: 640px) {
  .cc-name { font-size: 26px; letter-spacing: 8px; text-indent: 8px; }
  .cc-line { width: 150px; }
  .choice-btn { padding-left: 34px; }
  .choice-no { left: 9px; top: 11px; }
  body.is-battle .choice-btn { padding-left: 32px; }
}

/* ---------- 战场图 ---------- */

.battle-art {
  position: relative;
  /* 战斗时状态条比画面要紧，图压到 108px 只作气氛，别把数字挤下去 */
  height: 108px;
  margin: -11px -14px 10px;   /* 抵掉 .battle 的内边距，图铺满整个战斗框的顶部 */
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.battle-art.has-img { opacity: 1; }

.battle-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.battle-art::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 战场图本身就画得很暗，压太狠会糊成一块黑；只在最底下收一收，好接住下面的状态条 */
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.18) 0%, transparent 26%, transparent 58%, rgba(23, 19, 16, 0.72) 88%, var(--ink) 100%);
}

.battle-art-cap {
  position: absolute;
  left: 14px;
  bottom: 8px;
  z-index: 1;
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.battle-art.has-img + .battle-head .battle-name { display: none; }

@media (max-width: 640px) {
  .battle-art { height: 104px; margin: -9px -10px 10px; }
  .battle-art-cap { font-size: 13px; letter-spacing: 2px; left: 10px; }
}

/* 输入框下面的「可以这么写」——空输入框最劝退，给几个例子点一下就填进去 */
.ff-eg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.ff-eg-chip {
  font-family: var(--serif);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--paper-dim);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 2px;
  padding: 3px 9px;
  cursor: pointer;
  text-align: left;
}

.ff-eg-chip:hover { color: var(--gold); border-color: var(--gold-dim); border-style: solid; }

/* =========================================================================
   分页：状态条 + 页签 + 六个页面
   ========================================================================= */

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(44, 35, 27, 0.9), rgba(34, 27, 21, 0.9));
  border: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  font-size: 13px;
  letter-spacing: 1px;
}

.hud-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.hud-item i { font-style: normal; font-size: 11px; letter-spacing: 2px; color: var(--paper-dim); }
.hud-item b { font-weight: 600; color: var(--gold); }
.hud-heart b { color: var(--cinnabar-glow); }

.hud-stats {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 1px;
  color: var(--paper);
  background: rgba(23, 19, 16, 0.5);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
}

.hud-stats:hover { color: var(--gold); border-color: var(--gold-dim); }

.hud-save {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 2px;
  color: transparent;
  transition: color 0.35s ease;
}

.hud-save.on { color: rgba(127, 191, 174, 0.85); }
.hud-save.bad { color: var(--cinnabar-glow); }

/* ---------- 页签 ---------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px 8px;
  font-family: var(--serif);
  color: var(--paper-dim);
  background: var(--ink-2);
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.tab i {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
  color: var(--paper-dim);
  transition: color 0.15s ease;
}

.tab span { font-size: 11.5px; letter-spacing: 2px; }
.tab:hover { color: var(--paper); background: var(--ink-3); }
.tab:hover i { color: var(--gold-dim); }

.tab.on {
  color: var(--gold);
  background: var(--ink-3);
  box-shadow: inset 0 -2px 0 var(--cinnabar);
}

.tab.on i { color: var(--cinnabar-glow); }

/* ---------- 页面 ---------- */

.screen {
  display: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 28px 28px;
  min-height: 420px;
}

.screen.on { display: block; }

.screen-head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.screen-title { margin: 0 0 5px; font-size: 22px; letter-spacing: 8px; color: var(--gold); }
.screen-sub { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--paper-dim); }
.screen-actions { margin: 14px 0; }
.journal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* 剧情页沿用原来 .stage 的排版 */
#screen-stage { padding: 26px 30px 30px; }

/* ---------- 麾下 ---------- */

.army-res { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.unit-grid .unit-card { grid-template-columns: 30px 1fr auto; }

/* ---------- 将领 ---------- */

.off-sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }

.post-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 13px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 3px;
}

.post-card.filled { border-left-color: var(--gold); }
.post-head { display: flex; flex-direction: column; gap: 3px; }
.post-name { font-size: 16px; letter-spacing: 4px; color: var(--gold); }
.post-desc { font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.post-empty { margin: 0; font-size: 12.5px; color: #6d6252; }
.post-who { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; }
.portrait.post-face { width: 46px; height: 60px; font-size: 20px; }
.post-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.post-who-name { font-size: 14px; color: var(--paper); }
.post-who-stat { font-size: 11px; color: var(--paper-dim); }
.post-skill { font-size: 11px; color: #6d6252; line-height: 1.6; }
.post-skill.on { color: #7fbfae; }
.post-acts { display: flex; gap: 6px; }

.cand {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 9px;
  margin-bottom: 6px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.cand:hover:not(:disabled) { border-color: var(--gold); }
.cand.shut { opacity: 0.45; cursor: default; }
.cand.best { border-left: 3px solid var(--gold); }
.portrait.cand-face { width: 40px; height: 52px; font-size: 18px; }
.cand-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cand-top { display: flex; align-items: baseline; gap: 6px; }
.cand-name { font-size: 14px; color: var(--paper); }
.cand-best { font-size: 10px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 2px; padding: 0 4px; }
.cand-stat { font-size: 11px; color: var(--paper-dim); }
.cand-note { font-size: 11px; color: #8d8071; }
.cand-aff { font-size: 11.5px; color: var(--cinnabar-glow); white-space: nowrap; }

/* ---------- 羁绊 ---------- */

.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 10px; }

.char-tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.char-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.char-tile.known { opacity: 0.72; border-style: dashed; }
.char-tile.romance { border-color: var(--cinnabar); }
.portrait.tile-face { width: 100%; height: 172px; font-size: 34px; border: none; border-radius: 0; }
.tile-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tile-name { font-size: 14.5px; letter-spacing: 2px; color: var(--gold); }
.tile-title { font-size: 10.5px; color: var(--paper-dim); }
.tile-foot { font-size: 11px; color: var(--paper-dim); }
.char-tile.romance .tile-name { color: var(--cinnabar-glow); }

/* ---------- 历练 ---------- */

.dg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.dg-card {
  padding: 13px 14px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.dg-card.shut { opacity: 0.5; }
.dg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }

.dg-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.dg-h { display: flex; flex-direction: column; gap: 1px; }
.dg-name { font-size: 16px; letter-spacing: 4px; color: var(--gold); }
.dg-lock { font-size: 11px; color: var(--cinnabar-glow); }
.dg-desc { margin: 0 0 10px; font-size: 12px; line-height: 1.75; color: var(--paper-dim); }
.dg-tiers { display: flex; flex-direction: column; gap: 5px; }

.dg-tier {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 7px 9px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}

.dg-tier:hover:not(:disabled) { border-color: var(--gold); }
.dg-tier.shut { opacity: 0.45; cursor: default; }
.dg-tier.done { border-left: 3px solid #7fbfae; }

.dg-lv {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.dg-tier.done .dg-lv { color: #7fbfae; border-color: rgba(127, 191, 174, 0.4); }
.dg-mid { display: flex; flex-direction: column; gap: 2px; }
.dg-tname { font-size: 13.5px; color: var(--paper); }
.dg-cost { font-size: 11px; color: var(--paper-dim); }

/* ---------- 手机 ---------- */

@media (max-width: 640px) {
  .hud { font-size: 12px; gap: 4px 12px; padding: 8px 10px; }
  .hud-stats { font-size: 11.5px; padding: 2px 8px; }
  .tabs { grid-template-columns: repeat(7, 1fr); }
  .tab { padding: 7px 2px 6px; }
  .tab i { font-size: 15px; }
  .tab span { font-size: 10px; letter-spacing: 1px; }
  .screen { padding: 16px 14px 20px; min-height: 0; }
  #screen-stage { padding: 18px 16px 20px; }
  .screen-title { font-size: 18px; letter-spacing: 5px; }
  .char-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .portrait.tile-face { height: 150px; }
  .post-grid, .dg-list, .unit-grid { grid-template-columns: 1fr; }
  .tab span { font-size: 9.5px; letter-spacing: 0; }
}

/* 将领带来的战场行动：一眼看得出这是你任命换来的 */
.choice-btn.by-officer { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(201, 162, 39, 0.07), var(--ink-3)); }

.choice-by {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

body.is-battle .choices { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------- 阵法 ---------- */

.fm-block { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.fm-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.fm-title { font-size: 15px; letter-spacing: 5px; color: var(--gold); }
.fm-now { font-size: 12px; color: var(--cinnabar-glow); }
.fm-note { margin: 0 0 10px; font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px; }

.fm-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.fm-card:hover:not(:disabled) { border-color: var(--gold); }
.fm-card.shut { opacity: 0.45; cursor: default; }
.fm-card.on { border-color: var(--cinnabar); background: linear-gradient(180deg, rgba(178, 58, 46, 0.14), var(--ink-3)); }

.fm-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.fm-card.on .fm-glyph { color: var(--cinnabar-glow); border-color: var(--cinnabar); }
.fm-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fm-name { font-size: 14.5px; letter-spacing: 3px; color: var(--gold); }
.fm-card.on .fm-name { color: var(--cinnabar-glow); }
.fm-desc { font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.fm-mods { font-size: 11px; color: #7fbfae; line-height: 1.6; }
.fm-lock { font-size: 11px; color: var(--cinnabar-glow); }

.battle-fm { font-size: 12px; letter-spacing: 2px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 2px; padding: 1px 7px; }

@media (max-width: 640px) { .fm-grid { grid-template-columns: 1fr; } }

/* ---------- 军镇 ----------
   后方一级一级垒起来的五处营务。和阵法并排放在麾下页，所以样式沿用阵法那一套，
   只把「已垒到第几级」这件事做成一排圆点 —— 玩家一眼要看出还差几级。 */

.gz-block { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.gz-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.gz-title { font-size: 15px; letter-spacing: 5px; color: var(--gold); }
.gz-now { font-size: 12px; color: var(--cinnabar-glow); }
.gz-note { margin: 0 0 8px; font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.gz-sum {
  margin-bottom: 10px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #7fbfae;
  background: rgba(127, 191, 174, 0.06);
  border-left: 2px solid rgba(127, 191, 174, 0.35);
  border-radius: 2px;
}
.gz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px; }

.gz-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.gz-card:hover { border-color: var(--gold); }
.gz-card.on { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(201, 162, 39, 0.08), var(--ink-3)); }
.gz-card.ready { border-color: var(--cinnabar); }

.gz-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.gz-card.ready .gz-glyph { color: var(--cinnabar-glow); border-color: var(--cinnabar); }
.gz-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gz-name-row { display: flex; align-items: baseline; gap: 8px; }
.gz-name { font-size: 14.5px; letter-spacing: 3px; color: var(--gold); }
.gz-pips { font-size: 10px; letter-spacing: 2px; color: var(--cinnabar-glow); }
.gz-here { font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.gz-next { font-size: 11px; line-height: 1.6; color: #7fbfae; }
.gz-lock { font-size: 11px; color: var(--cinnabar-glow); }

.gz-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 2px;
}
.gz-row.got { border-left-color: var(--gold); opacity: 0.72; }
.gz-row.nextup { border-left-color: var(--cinnabar); }
.gz-row-name { font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.gz-row-desc { font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.gz-row-eff { font-size: 11px; line-height: 1.6; color: #7fbfae; }
.gz-row-cost { font-size: 11px; color: var(--paper-dim); }

@media (max-width: 640px) { .gz-grid { grid-template-columns: 1fr; } }

/* ---------- 兵甲 ---------- */

.gear-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.gear-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.gear-slot.on { border-color: var(--gold-dim); background: rgba(201, 162, 39, 0.05); }
.gear-slot-name { font-size: 11px; letter-spacing: 3px; color: var(--paper-dim); }

.gear-slot-glyph {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.gear-slot.on .gear-slot-glyph {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(201, 162, 39, 0.08);
}

.gear-slot-item { font-size: 13px; letter-spacing: 2px; color: var(--paper); }
.gear-slot .gear-off { margin-top: 4px; }

.gear-cat { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 7px; }
.gear-cat-name { font-size: 15px; letter-spacing: 5px; color: var(--gold); }
.gear-cat-sub { font-size: 11px; line-height: 1.6; color: var(--paper-dim); }

.gear-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 9px; }

.gear-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 10px 11px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}

.gear-card:hover { border-color: var(--gold); }
.gear-card.on { border-color: var(--gold); background: rgba(201, 162, 39, 0.06); }
.gear-card.unowned { opacity: 0.55; }

.gear-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}

.gear-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gear-name-line { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.gear-name { font-size: 15px; letter-spacing: 3px; color: var(--paper); }
.gear-tier { font-size: 10px; letter-spacing: 2px; color: var(--paper-dim); }

.gear-on-tag, .gear-have-tag, .gear-forge-tag {
  padding: 1px 5px;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 2px;
}

.gear-on-tag { color: var(--ink); background: var(--gold); }
.gear-have-tag { color: var(--gold); border: 1px solid var(--gold-dim); }
.gear-forge-tag { color: #7fbfae; border: 1px solid rgba(127, 191, 174, 0.4); }
.gear-eff { font-size: 11px; line-height: 1.7; color: var(--paper-dim); }
.gear-note { font-size: 11px; line-height: 1.7; color: var(--cinnabar-glow); }
.gear-faint { font-size: 11px; line-height: 1.7; color: var(--paper-dim); opacity: 0.7; }

.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 640px) {
  .gear-list { grid-template-columns: 1fr; }
  .gear-slots { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 计策：阵前那一手 ---------- */
.battle-plotbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 2px; padding: 9px 12px;
  border: 1px dashed var(--line); border-radius: 4px;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.07), rgba(0, 0, 0, 0.12));
}
.bp-cap { font-size: 12px; color: var(--paper-dim); letter-spacing: 0.04em; }
.bp-open {
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.06em;
  padding: 7px 16px; cursor: pointer;
  color: var(--gold); background: var(--ink-3);
  border: 1px solid var(--gold-dim); border-radius: 3px;
}
.bp-open:hover { border-color: var(--gold); color: #f0d68a; }

.battle-plot {
  margin: 10px 0 2px; padding: 11px 14px;
  border-left: 3px solid var(--gold); border-radius: 3px;
  background: rgba(201, 162, 39, 0.08);
}
.battle-plot.bad { border-left-color: var(--cinnabar); background: rgba(178, 58, 46, 0.10); }
.battle-plot p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--paper); }
.bp-badge {
  display: inline-block; font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 2px;
  padding: 2px 8px;
}
.battle-plot.bad .bp-badge { color: var(--cinnabar-glow); border-color: rgba(178, 58, 46, 0.5); }

.plot-note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.75; color: var(--paper-dim); }
.plot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px; }
.plot-card {
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--ink-3);
}
.plot-card.shut { opacity: 0.5; }
.plot-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plot-glyph {
  width: 24px; height: 24px; line-height: 22px; text-align: center;
  font-size: 14px; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 2px;
}
.plot-name { font-size: 15px; color: var(--paper); letter-spacing: 0.06em; }
.plot-tag {
  font-size: 10.5px; color: var(--paper-dim);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px;
}
.plot-chance { margin-left: auto; font-size: 11.5px; color: var(--gold); }
.plot-desc { margin: 7px 0 6px; font-size: 12.5px; line-height: 1.8; color: var(--paper-dim); }
.plot-mods { font-size: 11px; line-height: 1.6; }
.plot-mods.good { color: #7fbfae; }
.plot-mods.bad { color: var(--cinnabar-glow); }
.plot-cost { margin-top: 5px; font-size: 11px; color: var(--paper-dim); }
.plot-do {
  margin-top: 9px; width: 100%;
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.08em;
  padding: 7px 0; cursor: pointer;
  color: var(--gold); background: var(--ink-2);
  border: 1px solid var(--gold-dim); border-radius: 3px;
}
.plot-do:hover:not(:disabled) { border-color: var(--gold); color: #f0d68a; }
.plot-do:disabled { cursor: default; color: var(--paper-dim); border-color: var(--line); opacity: 0.7; }
@media (max-width: 640px) {
  .plot-grid { grid-template-columns: 1fr; }
  .battle-plotbar { flex-direction: column; align-items: stretch; }
  .bp-open { width: 100%; }
}

/* ---------- 天时地利 ---------- */
.battle-env {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 4px;
  background: linear-gradient(180deg, rgba(126, 158, 176, 0.09), rgba(0, 0, 0, 0.14));
}
.env-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: 0.06em;
  padding: 4px 11px 4px 5px; cursor: pointer;
  color: var(--paper); background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px;
}
.env-chip:hover { border-color: var(--gold-dim); color: #f0d68a; }
.env-chip.done { border-color: var(--gold-dim); }
.env-chip-glyph {
  width: 21px; height: 21px; line-height: 19px; text-align: center;
  font-size: 12.5px; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 2px;
}
.env-chip-name { letter-spacing: 0.1em; }
.env-chip-note { font-size: 11.5px; color: var(--paper-dim); letter-spacing: 0.03em; }
.env-chip-note.done { color: var(--gold); }
.env-prep-open {
  margin-left: auto;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: 0.08em;
  padding: 6px 15px; cursor: pointer;
  color: var(--gold); background: var(--ink-3);
  border: 1px solid var(--gold-dim); border-radius: 3px;
}
.env-prep-open:hover { border-color: var(--gold); color: #f0d68a; }
.battle-omen {
  margin: 7px 0 2px; padding: 0 2px;
  font-size: 12.5px; line-height: 1.85; color: var(--paper-dim); font-style: normal;
}

.env-adapt-big {
  margin: 0 0 11px; padding: 7px 11px;
  font-size: 12.5px; color: var(--gold); letter-spacing: 0.04em;
  border: 1px dashed var(--gold-dim); border-radius: 3px;
  background: rgba(201, 162, 39, 0.06);
}
.env-card {
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--ink-3);
}
.env-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.env-glyph {
  width: 24px; height: 24px; line-height: 22px; text-align: center;
  font-size: 14px; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 2px;
}
.env-name { font-size: 15px; color: var(--paper); letter-spacing: 0.08em; }
.env-kind {
  margin-left: auto; font-size: 10.5px; color: var(--paper-dim);
  border: 1px solid var(--line); border-radius: 2px; padding: 1px 6px;
}
.env-omen { margin: 8px 0 6px; font-size: 12.5px; line-height: 1.85; color: var(--paper); }
.env-desc { margin: 0 0 8px; font-size: 12px; line-height: 1.8; color: var(--paper-dim); }
.env-mods { font-size: 11px; line-height: 1.7; color: var(--paper-dim); }
.env-mods.good { color: #7fbfae; }
.env-prep {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.env-prep-name { font-size: 13px; color: var(--gold); letter-spacing: 0.06em; }
.env-prep-desc { margin: 6px 0; font-size: 12px; line-height: 1.8; color: var(--paper-dim); }
@media (max-width: 640px) {
  /* 以前这里是 flex-direction: column，一条一条竖着堆，实测 253px——
   * 比整个可读区还高，战况日志直接被它顶出视野。改回横着排、放不下就折行，
   * 每个格子压小一点，同样的内容 90px 上下就够。 */
  .battle-env { gap: 5px; padding: 6px 8px; margin-top: 8px; }
  .env-chip { font-size: 11.5px; padding: 2px 8px 2px 4px; gap: 4px; }
  .env-chip-glyph { width: 17px; height: 17px; line-height: 15px; font-size: 11px; }
  .env-chip-note { font-size: 10.5px; }
  .env-prep-open { margin-left: 0; }
}

/* =========================================================================
   剧情页：一屏装下，「读」和「做」分开
   —— 上面交代身在何处，中间自己滚，下面钉住行动区。
   目的只有一个：任何时候都不用上下翻，就知道该点哪。
   ========================================================================= */

/* max-height 而不是 height：能装下就正好一屏，实在装不下（选项特别多、
 * 窗口特别矮）就让页面自己长，而不是把战况框压成零高。 */
#screen-stage.on {
  display: flex;
  flex-direction: column;
  max-height: var(--stage-h, none);
  min-height: 0;
  padding: 18px 26px 18px;
  overflow: hidden;
}

.stage-top { flex: none; }

.stage-body {
  /* 结构上的取舍：正文区可以被压到很矮（它自己能滚，那是读的东西），
   * 行动区一律不压缩（那是做的东西，被截一半就等于没有）。
   * 所以这里的下限只留一个「还看得出是个区域」的高度。 */
  flex: 1 1 auto;
  min-height: 64px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  margin-right: -10px;
  position: relative;
}

/* 滚动条做细，别在墨底上戳一道亮杠 */
.stage-body::-webkit-scrollbar { width: 6px; }
.stage-body::-webkit-scrollbar-track { background: transparent; }
.stage-body::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.22); border-radius: 3px; }
.stage-body::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.4); }

/* 下面还有字的时候，底沿压一道渐隐 */
.body-fade {
  position: sticky;
  bottom: 0;
  height: 34px;
  margin-top: -34px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ink-2));
}

/* ---------- 行动区：永远在底下，永远看得见 ---------- */

.stage-act {
  /* 行动区按需占高，不参与压缩——它是这一屏最要紧的东西 */
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gold-dim);
  position: relative;
}

/* 行动区顶上那条金线，是「读完了，该动了」的分界 */
.stage-act::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

.act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.act-label {
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--cinnabar-glow);
}

/* in- 前缀是有意的：`.battle` 是战况框那一整块的类名，
 * 直接拿 `battle` 当这行小字的修饰类会把整块的边框背景全套上来。 */
.act-label.in-battle { color: var(--gold); }
.act-label.in-end { color: var(--paper-dim); }

.ff-toggle {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--paper-dim);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 2px;
  padding: 3px 10px;
  cursor: pointer;
}

.ff-toggle:hover { color: var(--gold); border-color: var(--gold-dim); border-style: solid; }
.ff-toggle.on { color: var(--gold); border-style: solid; border-color: var(--gold-dim); }

/* 展开的自由输入压扁一点，别把选项挤下去 */
.freeform { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
/* 16px 不是排版选的，是 iOS 的阈值：输入框字号小于 16px，一聚焦整页就被放大，
 * 而缩放已经关掉了，放大之后玩家再也缩不回来。别往下调。 */
.ff-input { min-height: 48px; font-size: 16px; }
.ff-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ff-hint { margin-top: 0; }

/* ---------- 选项：这一屏最响的东西 ---------- */

/* 选项永远不滚：一屏里它是最不能被截断的东西。
 * 真的多到装不下时，宁可让整页长出去（页面自己滚），也不在选项内部开滚动条—— */
.choices { overflow: visible; }
.choices::-webkit-scrollbar { width: 6px; }
.choices::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.22); border-radius: 3px; }

.choice-btn {
  border-left-width: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.choice-btn:hover:not(:disabled) {
  border-color: var(--gold);
  background: #35291d;
  transform: translateX(2px);
}

.choice-btn:hover:not(:disabled) .choice-main { color: var(--gold); }

/* 一进新的一幕，选项轻轻亮一下：告诉人「这里变了，看这儿」 */
@keyframes choicewake {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.choices > .choice-btn { animation: choicewake 0.26s ease both; }
.choices > .choice-btn:nth-child(2) { animation-delay: 0.04s; }
.choices > .choice-btn:nth-child(3) { animation-delay: 0.08s; }
.choices > .choice-btn:nth-child(4) { animation-delay: 0.12s; }
.choices > .choice-btn:nth-child(n+5) { animation-delay: 0.15s; }

/* 开始游戏之后把大标题压扁，那 110 像素留给正文 */
body.playing .site-header { padding: 8px 0 6px; margin-bottom: 12px; }
body.playing .game-title { font-size: 21px; letter-spacing: 7px; text-indent: 7px; }
body.playing .game-subtitle { display: none; }

@media (max-width: 640px) {
  #screen-stage { padding: 12px 12px 12px; }
  .act-label { font-size: 11px; letter-spacing: 3px; }
  body.playing .title-bar { gap: 8px; }
  body.playing .game-title { font-size: 18px; letter-spacing: 5px; text-indent: 5px; }
}

/* 战斗时钉住的状态层：兵力士气锐气不跟着战况日志滚走 */
.stage-status {
  flex: none;
  margin: 8px 0 6px;
  padding: 9px 12px 10px;
  background: linear-gradient(180deg, rgba(44, 35, 27, 0.85), rgba(23, 19, 16, 0.9));
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
}

.stage-status .battle-head { margin-bottom: 7px; padding-bottom: 6px; }
.stage-status .battle-sides { gap: 10px; }
.stage-status .side { padding: 7px 9px; }
.stage-status .gauge { margin-bottom: 3px; }

/* 战斗时正文已经收起来，图只作气氛，再压一压 */
body.is-battle .battle-art { height: 84px; }

@media (max-width: 640px) {
  body.is-battle .battle-art { height: 62px; }
  .stage-status { padding: 7px 9px 8px; margin: 6px 0 5px; }
  .stage-status .battle-sides { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stage-status .side { padding: 5px 6px; }
  .stage-status .side-name { font-size: 11px; }
  .stage-status .gauge { grid-template-columns: 24px 1fr auto; }
  .stage-status .gauge-num { font-size: 10px; }
}

/* =========================================================================
   战斗那一屏的纵向预算
   —— 六个行动 + 双方状态条 + 战况，必须一起装进一屏。
   下面每一条都是为了省像素，不是为了好看。
   ========================================================================= */

/* 战况框在正文区里，外框和内边距是重复的，去掉 */
body.is-battle #battle {
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
}

body.is-battle .battle-art { height: 64px; margin: 0 0 8px; border-radius: 3px; }
body.is-battle .battle-art-cap { font-size: 12px; letter-spacing: 2px; bottom: 5px; left: 9px; }

/* 状态条压紧：三条杠各省 6px，两侧各省一圈内边距 */
.stage-status .gauge { grid-template-columns: 28px 1fr auto; margin-bottom: 2px; }
.stage-status .gauge-bar { height: 5px; }
.stage-status .side-name { margin-bottom: 4px; font-size: 12px; }
.stage-status .gauge-label, .stage-status .gauge-num { font-size: 11px; }

/* 战斗的行动卡压扁：说明字小一号、最多两行 */
body.is-battle .choice-btn { padding: 7px 11px 7px 32px; }
body.is-battle .choice-no { left: 8px; top: 8px; width: 17px; height: 17px; font-size: 10px; }
body.is-battle .choice-main { font-size: 14px; line-height: 1.45; }

body.is-battle .choice-hint {
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  /* 手机上战斗时不放战场图——一屏就那么高，图和数字只能留一个 */
  body.is-battle .battle-art { display: none; }
  /* 六个行动排成两列，一列六行是绝对装不下的 */
  body.is-battle .choices { grid-template-columns: 1fr 1fr; gap: 6px; }
  body.is-battle .choice-btn { padding: 6px 8px 6px 8px; }
  body.is-battle .choice-no { position: static; display: inline-grid; margin-right: 5px; vertical-align: 1px; }
  body.is-battle .choice-main { font-size: 12.5px; letter-spacing: 0; }
  body.is-battle .choice-hint { font-size: 10.5px; -webkit-line-clamp: 3; }
  body.is-battle .choice-btn.act-settle { grid-column: 1 / -1; }
  .stage-body { min-height: 96px; }
}

/* =========================================================================
   手机上的纵向预算（390×660 实测：正文区一度只剩 108px，三行字要滚七行）
   ========================================================================= */

/* ---------- 把纵向预算还给正文 ----------
 * 390×660 的真机上量过一次，账是这样的：
 *   页头 60 + 状态条 35 + 章节标题 72 + 行动区 290 = 457，
 *   剩给正文的只有 108px（约三行），而一幕正文通常有七八行。
 * 于是读一幕要在一个三行的小窗里滚四五下——sway 的原话是「滚的很累」。
 *
 * 下面这一组只做一件事：把上面那四项各削一点，凑出两百多像素还给正文。
 * 削的都是重复的、或者本来就过宽松的，没有一处是把能点的东西压小。
 * 目标：常见的一幕正文一屏读完，一下都不用滚。 */
@media (max-width: 640px) {
  /* 章节名在状态条上已经写了一遍（「此刻 第一章 · 异乡」），
     正文上方那一行是纯重复，手机上收掉，只留这一幕的标题 */
  .stage-top .chapter { display: none; }
  .node-title { font-size: 20px; letter-spacing: 2px; margin: 0 0 8px; }

  /* 立绘在手机上是第二贵的一项：108×144 加上底下三行说明共 213px，
     而正文区一共才两百出头——有男主在场的那几幕，正文被挤得一行都读不到。
     缩到 84×112，说明挤成一行贴在下面，整块 152px。
     文字仍然绕着它排，视觉小说的样子还在，只是不再把正文吃光。 */
  .scene-portrait { width: 84px; margin: 0 0 8px 12px; }
  .portrait.scene { width: 84px; height: 112px; font-size: 20px; }
  .scene-cap { margin-top: 4px; gap: 0; line-height: 1.3; }
  .scene-name { font-size: 11.5px; letter-spacing: 1px; }
  .scene-aff { font-size: 9.5px; }
  /* 他的头衔在这儿是第三重要的：名字和好感留着，头衔点开立绘就看得到 */
  .scene-title { display: none; }

  /* 感情线插播那条横栏，一行字不必占 39px */
  .divert-banner { padding: 5px 9px; font-size: 11px; }

  /* 页头：进游戏之后标题已经让位了，再收紧一点 */
  body.playing .site-header { padding: 5px 0 4px; margin-bottom: 8px; }

  /* 剧情页四周的留白 */
  #screen-stage { padding: 10px 12px 10px; }

  /* 行动区跟正文之间那道金线，上下各收 3px */
  .stage-act { margin-top: 8px; padding-top: 8px; }
  .act-head { margin-bottom: 6px; }
  .act-label { font-size: 10.5px; letter-spacing: 2.5px; }
  .ff-toggle { font-size: 11px; padding: 2px 8px; }
  .hud { padding: 5px 10px; }

  /* 选项：字号和内边距各收一点。一条两行的选项从 74px 降到 63px，
     三条就省下 33px——够多读三行字。行高不敢再低了，1.5 已经是中文的下限。 */
  .choices { gap: 7px; }
  .choice-btn { font-size: 14.5px; line-height: 1.5; padding: 8px 12px 8px 32px; }
  .choice-no { top: 7px; }
}

/* =========================================================================
   手机上的纵向预算（旧的一组：390×844 实测，状态层曾经吃掉 219px）
   ========================================================================= */

@media (max-width: 640px) {
  /* 状态条挤成一行：名字、章节、属性、存档提示，其余移进弹窗 */
  .hud {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding: 6px 10px;
    scrollbar-width: none;
  }
  .hud::-webkit-scrollbar { display: none; }
  .hud-item { font-size: 11.5px; }
  .hud-item i { font-size: 10px; letter-spacing: 1px; }
  .hud-stats { font-size: 11px; padding: 2px 7px; }
  /* 麾下人数和系心谁在，属性弹窗和羁绊页里都有，这一行不必再挤 */
  .hud .tb-troops-item, .hud .hud-heart { display: none; }
  .hud-save { flex: none; margin-left: auto; font-size: 10px; }

  /* 章节和标题压一压 */
  .stage-top { }
  .chapter { font-size: 11px; letter-spacing: 3px; margin-bottom: 2px; }
  .node-title { font-size: 19px; letter-spacing: 3px; margin: 0 0 8px; padding-bottom: 8px; }

  /* 行动区顶上那一行不许换行 */
  .act-head { flex-wrap: nowrap; margin-bottom: 6px; }
  .act-label { white-space: nowrap; }
  .ff-toggle { white-space: nowrap; flex: none; }

  /* 双方状态条并排，而不是上下堆 */
  body.is-battle .stage-status .battle-sides { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  body.is-battle .stage-status .battle-head { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 5px; padding-bottom: 5px; }
  body.is-battle .stage-status .battle-name { font-size: 12px; letter-spacing: 1px; }
  body.is-battle .stage-status .gauge { grid-template-columns: 22px 1fr; grid-template-areas: "label bar" "num num"; }
  body.is-battle .stage-status .gauge-num { grid-area: num; text-align: right; font-size: 9.5px; line-height: 1.2; }

  /* 行动卡：标题一行、说明两行封顶 */
  body.is-battle .choice-btn { padding: 6px 7px; }
  body.is-battle .choice-main {
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.is-battle .choice-hint { -webkit-line-clamp: 2; font-size: 10px; line-height: 1.35; }
  body.is-battle .lock-reason { font-size: 10px; }
}

@media (max-width: 640px) {
  /* 属性那颗按钮不许折行——它跟着状态条一起横向滚 */
  .hud-stats { white-space: nowrap; }
  .hud-item { white-space: nowrap; }

  /* 行动区标题一行放得下：字压到 10px，不换行 */
  .act-label { white-space: nowrap; font-size: 10px; letter-spacing: 1.5px; overflow: hidden; text-overflow: ellipsis; }
  .ff-toggle { font-size: 10.5px; padding: 2px 8px; }

  /* 状态条恢复三列（标签/条/数），数字压到 9.5px，一行 20px */
  body.is-battle .stage-status .gauge {
    grid-template-columns: 22px 1fr auto !important;
    grid-template-areas: none !important;
    align-items: center;
    margin-bottom: 1px;
  }
  /* 上面那条把 grid-template-areas 撤成了 none，可 .gauge-label / .gauge-bar
   * 还挂着 `grid-area: label / bar`——名字没了的具名区域会退回自动放置，
   * 于是三格的顺序被打乱：数字挤进 22px 的第一列、标签被甩到最右边，
   * 条子从标签上横穿过去。三个都要撤回 auto，缺一个就还是乱的。 */
  body.is-battle .stage-status .gauge-label,
  body.is-battle .stage-status .gauge-bar { grid-area: auto !important; }
  body.is-battle .stage-status .gauge-num {
    grid-area: auto !important;
    font-size: 9px;
    text-align: right;
    white-space: nowrap;
  }
  body.is-battle .stage-status .gauge-label { font-size: 10px; }
  body.is-battle .stage-status .gauge-bar { height: 4px; }
  body.is-battle .stage-status .side-name { font-size: 11px; margin-bottom: 3px; }

  /* 行动卡的标题也只给一行，说明两行 */
  body.is-battle .choice-main { -webkit-line-clamp: 1; }
}

@media (max-width: 640px) {
  /* 状态条整条不许折行——它是一条可以横向滑的带子，不是一块会长高的面板 */
  .hud > * { white-space: nowrap; flex: none; }
  .hud-save { margin-left: auto; font-size: 10px; }
  /* 行动区标题：占满剩下的宽度，一行，超了打省略号 */
  .act-label { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 640px) {
  /* 这一行只放得下一行字。给死高度，别让它被弹性盒撑开 */
  .act-head { align-items: center; min-height: 0; }
  .act-label { line-height: 18px; height: 18px; align-self: center; }
  .ff-toggle { align-self: center; line-height: 15px; }
}

/* =========================================================================
   剧情页的氛围底图：战斗时是这一仗的战场图
   —— 压得很暗，只让人知道自己站在什么地方，不跟正文抢眼睛。
   ========================================================================= */

#screen-stage.has-art { position: relative; }

#screen-stage.has-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--stage-art);
  background-size: cover;
  background-position: 50% 42%;
  opacity: 0.3;
  filter: saturate(0.75) contrast(1.05);
  pointer-events: none;
}

/* 图上再压一层墨，保证任何一张图底下文字都读得清 */
#screen-stage.has-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(23, 19, 16, 0.86) 0%, rgba(23, 19, 16, 0.7) 34%, rgba(23, 19, 16, 0.88) 72%, var(--ink-2) 100%);
}

#screen-stage.has-art > * { position: relative; z-index: 1; }

/* 底图上来时轻轻淡入，别硬切 */
#screen-stage.has-art::before { animation: artin 0.55s ease both; }
@keyframes artin { from { opacity: 0; } to { opacity: 0.3; } }

/* 战况框里那条窄图带没了，把它的样式一并停掉 */
.battle-art { display: none !important; }

/* =========================================================================
   视觉层级：一屏之内只有一类东西是「主要动作」
   —— 带编号的选项/行动是主要的，其余（整备、用计、不按剧本走）一律降一级。
   眼睛扫过去应该先落在编号卡上，而不是在四五种同样醒目的按钮之间犹豫。
   ========================================================================= */

/* 阵前的辅助入口：细边、小字、不填色 */
.env-prep-open,
.plot-open,
#battle .btn.btn-small {
  font-size: 11.5px !important;
  letter-spacing: 1px;
  padding: 3px 10px !important;
  color: var(--paper-dim) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px;
  box-shadow: none !important;
}

.env-prep-open:hover,
.plot-open:hover,
#battle .btn.btn-small:hover:not(:disabled) {
  color: var(--gold) !important;
  border-color: var(--gold-dim) !important;
}

/* 主要动作反过来加重：编号更亮、左边那道竖线更粗 */
.choice-btn { border-left-width: 4px; }
.choice-btn:not(:disabled) .choice-no { color: var(--gold); border-color: var(--gold-dim); }
.choice-btn:not(:disabled) .choice-main { font-weight: 600; }

/* 行动区整体再压一层底色，跟上面的「读」区分开 */
.stage-act {
  background: linear-gradient(180deg, rgba(23, 19, 16, 0.55), rgba(23, 19, 16, 0.85));
  margin-left: -26px;
  margin-right: -26px;
  padding-left: 26px;
  padding-right: 26px;
  padding-bottom: 4px;
}

@media (max-width: 640px) {
  .stage-act { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* =========================================================================
   题字：开始页用刻出来的那三个字，进了游戏换回小字让位给正文
   ========================================================================= */

.game-title { position: relative; }

/* 图取得到就把文字换成图；取不到什么也不会发生，还是那行字 */
body.has-logo:not(.playing) .title-word {
  display: block;
  width: min(380px, 72vw);
  height: 0;
  margin: 0 auto;
  padding-top: min(152px, 28.8vw);   /* 5:2 */
  overflow: hidden;
  background: url('art/ui/logo.png') center / contain no-repeat;
  text-indent: -9999px;
}

body.has-logo:not(.playing) .game-title { text-shadow: none; }

@media (max-width: 640px) {
  body.has-logo:not(.playing) .title-word { width: 76vw; padding-top: 30.4vw; }
}

/* ---------- 敌将：对面领兵的那个人 ---------- */
.battle-foe {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 8px 11px;
  border: 1px solid rgba(176, 92, 76, 0.42); border-radius: 4px;
  background: linear-gradient(180deg, rgba(176, 92, 76, 0.11), rgba(0, 0, 0, 0.16));
}
.battle-foe.baned { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(201, 162, 39, 0.10), rgba(0, 0, 0, 0.16)); }
.foe-cap {
  font-family: var(--serif); font-size: 11.5px; letter-spacing: 0.18em;
  color: var(--paper-dim);
}
.foe-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); text-align: left;
  padding: 4px 12px 4px 5px; cursor: pointer;
  color: var(--paper); background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px;
}
.foe-chip:hover { border-color: var(--gold-dim); color: #f0d68a; }
.foe-chip.live { border-color: rgba(176, 92, 76, 0.55); }
.foe-chip-glyph {
  width: 23px; height: 23px; line-height: 21px; text-align: center; flex: none;
  font-size: 13px; color: #e2a08e;
  border: 1px solid rgba(176, 92, 76, 0.6); border-radius: 2px;
}
.foe-chip.tier-2 .foe-chip-glyph { color: #d8b26a; border-color: var(--gold-dim); }
.foe-chip.tier-3 .foe-chip-glyph { color: #f0d68a; border-color: var(--gold); }
.foe-chip-txt { display: inline-flex; flex-direction: column; gap: 1px; }
.foe-chip-name { font-size: 13px; letter-spacing: 0.1em; }
.foe-chip-side { font-size: 10.5px; letter-spacing: 0.04em; color: var(--paper-dim); }
.foe-note { font-size: 11.5px; color: #e2a08e; letter-spacing: 0.03em; }
.foe-note.good { color: var(--gold); }
.foe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 7px; }
.foe-card {
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 4px;
  background: rgba(0, 0, 0, 0.16);
}
.foe-card.baned { border-color: var(--gold-dim); }
.foe-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.foe-glyph {
  width: 24px; height: 24px; line-height: 22px; text-align: center; flex: none;
  font-size: 13.5px; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 2px;
}
.foe-name { font-family: var(--serif); font-size: 16px; letter-spacing: 0.12em; color: var(--paper); }
.foe-side { font-size: 11.5px; color: var(--paper-dim); letter-spacing: 0.04em; }
.foe-tier { margin-left: auto; font-size: 11px; color: var(--gold); letter-spacing: 0.08em; }
.foe-lean { font-size: 11.5px; color: #e2a08e; letter-spacing: 0.06em; margin-bottom: 7px; }
.foe-look, .foe-bio, .foe-style { margin: 0 0 7px; font-size: 12.5px; line-height: 1.85; color: var(--paper-dim); }
.foe-mods {
  margin: 6px 0 9px; padding: 5px 9px; font-size: 11.5px; letter-spacing: 0.04em;
  color: #e2a08e; background: rgba(176, 92, 76, 0.12); border-radius: 3px;
}
.foe-quirk, .foe-bane {
  margin-top: 9px; padding: 8px 10px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.2); border-left: 2px solid rgba(176, 92, 76, 0.5);
}
.foe-bane { border-left-color: var(--gold-dim); }
.foe-bane.on { border-left-color: var(--gold); background: rgba(201, 162, 39, 0.09); }
.foe-quirk p, .foe-bane p { margin: 5px 0 0; font-size: 12px; line-height: 1.8; color: var(--paper-dim); }
.foe-tag { font-family: var(--serif); font-size: 12px; letter-spacing: 0.1em; color: var(--gold); }
.foe-bane-how { margin-top: 4px; font-size: 11.5px; color: #e2a08e; letter-spacing: 0.03em; }
.foe-state { margin-top: 6px; font-size: 11.5px; letter-spacing: 0.06em; }
.foe-state.good { color: var(--gold); }
.foe-state.bad { color: #e2a08e; }

/* ---- 敌将录：打过照面才认得 ---- */

/* 名册上的小头像。敌将像的脸比立绘占得更满，取景比立绘再往上一点 */
.portrait.foe-chip-face {
  width: 40px; height: 52px;
  flex: 0 0 40px;
  font-size: 17px;
  border-color: rgba(176, 92, 76, 0.45);
  background: rgba(176, 92, 76, 0.07);
}
.portrait.foe-chip-face img { object-position: 50% 16%; }
.foe-chip { align-items: center; }
.foe-chip.beaten .portrait.foe-chip-face { border-color: var(--gold-dim); }
.foe-chip-tally { font-size: 10px; letter-spacing: 0.04em; color: var(--gold-dim); }

/* 还没照过面：一个空位，只写得出他是哪一档、哪一路来的 */
.foe-chip.unmet {
  cursor: default;
  opacity: 0.5;
  border-style: dashed;
  color: var(--paper-dim);
}
.foe-chip.unmet .foe-chip-glyph { color: var(--paper-dim); border-color: var(--line); }
.foe-chip.unmet .foe-chip-name { color: var(--paper-dim); letter-spacing: 0.06em; }

.foe-sum {
  margin: 2px 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--gold-dim);
}

/* 详情卡顶上那张大一点的脸 */
.portrait.foe-face {
  width: 62px; height: 80px;
  flex: 0 0 62px;
  font-size: 26px;
  border-color: rgba(176, 92, 76, 0.5);
  background: rgba(176, 92, 76, 0.08);
}
.portrait.foe-face img { object-position: 50% 15%; }
.foe-head { align-items: center; }
.foe-namebox { display: inline-flex; flex-direction: column; gap: 3px; }
.foe-tally {
  margin: 0 0 7px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--gold);
}
@media (max-width: 560px) {
  .foe-grid { grid-template-columns: 1fr 1fr; }
  .battle-foe { gap: 7px; padding: 7px 9px; }
  .foe-tier { margin-left: 0; }
}
.battle-env.baned { border-color: var(--gold-dim); }
.env-sep { color: var(--line); font-size: 12px; }
.battle-taunt {
  margin: 7px 0 2px; padding: 0 2px 0 9px;
  border-left: 2px solid rgba(176, 92, 76, 0.5);
  font-size: 12.5px; line-height: 1.85; color: var(--paper-dim);
}

/* ---------- 赠礼与书信 ---------- */

.char-tier-desc { font-size: 12.5px; line-height: 1.9; color: var(--paper-dim); margin: 0 0 8px; }
.char-next { font-size: 11.5px; color: var(--gold); margin: 0 0 8px; }
.char-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.char-tags-h { font-size: 11px; letter-spacing: 2px; color: var(--paper-dim); }
.char-tag {
  font-size: 11px; padding: 2px 7px; border-radius: 2px;
  background: var(--ink-3); border: 1px solid var(--line); color: var(--paper-dim);
}
.char-tag.good { color: #7fbfae; border-color: rgba(127, 191, 174, 0.4); }
.char-tag.bad { color: var(--cinnabar-glow); border-color: rgba(178, 58, 46, 0.45); }

.gift-note { font-size: 11.5px; line-height: 1.8; color: var(--paper-dim); margin: 0 0 8px; }
.gift-list { display: flex; flex-direction: column; gap: 6px; }
.gift-row {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--line);
  border-left: 2px solid var(--line); border-radius: 2px; color: inherit; font: inherit;
}
.gift-row:hover:not(:disabled) { border-color: var(--gold); }
.gift-row.shut { opacity: 0.45; cursor: default; }
.gift-glyph {
  flex: 0 0 auto; width: 26px; height: 26px; line-height: 26px; text-align: center;
  font-size: 14px; color: var(--gold); background: var(--ink-2); border: 1px solid var(--line);
}
.gift-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.gift-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.gift-name { font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.gift-cost { font-size: 11px; color: var(--paper-dim); white-space: nowrap; }
.gift-desc { font-size: 11.5px; line-height: 1.75; color: var(--paper-dim); }
.gift-foot { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--paper-dim); }
.gift-guess.good { color: #7fbfae; }
.gift-guess.bad { color: var(--cinnabar-glow); }
.gift-again { color: var(--gold); opacity: 0.75; }
.gift-reply {
  font-size: 13.5px; line-height: 2; color: var(--paper); margin: 10px 0;
  padding: 10px 12px; background: var(--ink-3); border-left: 2px solid var(--gold);
}
.gift-reply.cold { border-left-color: var(--cinnabar); color: var(--paper-dim); }
.gift-after { font-size: 11.5px; line-height: 1.8; color: var(--paper-dim); margin: 0; }

/* ---------- 朝议：麾下页军镇下面那一块 ---------- */
.ct-block { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ct-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.ct-title { font-size: 15px; letter-spacing: 5px; color: var(--gold); }
.ct-now { font-size: 12px; color: var(--cinnabar-glow); }
.ct-note { margin: 0 0 8px; font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.ct-sum {
  margin-bottom: 10px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #7fbfae;
  background: rgba(127, 191, 174, 0.06);
  border-left: 2px solid rgba(127, 191, 174, 0.35);
  border-radius: 2px;
}
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px; }

.ct-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  font-family: var(--serif);
  text-align: left;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
.ct-card:hover { border-color: var(--gold); }
.ct-card.good { background: linear-gradient(180deg, rgba(201, 162, 39, 0.07), var(--ink-3)); }
.ct-card.bad { background: linear-gradient(180deg, rgba(176, 58, 46, 0.09), var(--ink-3)); }

.ct-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
}
.ct-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-name-row { display: flex; align-items: baseline; gap: 8px; }
.ct-name { font-size: 14.5px; letter-spacing: 3px; color: var(--gold); }
.ct-standing { font-size: 11.5px; color: var(--cinnabar-glow); }
.ct-bar { position: relative; display: block; height: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; overflow: hidden; }
.ct-bar-mid { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.22); }
.ct-bar-fill { position: absolute; top: 0; height: 100%; background: var(--gold-dim); }
.ct-bar-fill.bad { background: var(--cinnabar); }
.ct-tier { font-size: 11.5px; line-height: 1.7; color: var(--paper-dim); }
.ct-next { font-size: 11px; line-height: 1.6; color: #7fbfae; }
.ct-acts { margin-top: 10px; }
.ct-file { width: 100%; }
.ct-reply {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--ink-3);
  border-left: 2px solid var(--gold-dim);
  border-radius: 2px;
}
.ct-reply-h { font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.ct-reply-t { font-size: 11.5px; line-height: 1.8; color: var(--paper-dim); }

.ct-row {
  padding: 7px 10px;
  margin-bottom: 5px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 2px;
}
.ct-row.here { border-left-color: var(--cinnabar); }
.ct-row-name { font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.ct-row-eff { margin: 6px 0 2px; font-size: 11.5px; line-height: 1.7; color: #7fbfae; }
.ct-warshift { margin: 8px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--cinnabar-glow); }

.ct-mem {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  margin-bottom: 7px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 2px;
  opacity: 0.62;
}
.ct-mem.open { opacity: 1; border-left-color: var(--cinnabar); }
.ct-mem.done { opacity: 0.45; }
.ct-mem-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ct-mem-name { font-size: 13.5px; letter-spacing: 2px; color: var(--gold); }
.ct-mem-cost { font-size: 11px; color: var(--paper-dim); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-chip {
  padding: 1px 7px;
  font-size: 11px;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.ct-chip.up { color: #7fbfae; }
.ct-chip.down { color: var(--cinnabar-glow); }
.ct-mem-text { margin: 0; font-size: 11.5px; line-height: 1.8; color: var(--paper-dim); }
.ct-mem-lock { font-size: 11px; color: var(--cinnabar-glow); }
.ct-mem-done { font-size: 11px; color: var(--gold-dim); }
.ct-mem-file { align-self: flex-start; }


/* ---------- 不按剧本走：自己走过的前几步 ---------- */

/* 先前自己写过的那几句。压得很淡，是背景不是正文——
 * 它的作用只是让人看见自己攒了一段戏，不该跟最新那一句抢眼睛。 */
.fr-prev {
  margin: -2px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(127, 191, 174, 0.18);
}

.fr-prev-label {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--paper-dim);
  margin-bottom: 5px;
}

.fr-prev-line {
  font-size: 12px;
  line-height: 1.7;
  color: #8fa79e;
  padding-left: 8px;
  border-left: 2px solid rgba(127, 191, 174, 0.18);
  margin-top: 3px;
}

/* ==================== 难度与存档槽 ==================== */

/* ---------- 开局页：难度选择 ---------- */

.diff-box {
  margin: 18px auto 4px;
  max-width: 560px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
}

.diff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.diff-label {
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--paper-dim);
}

.diff-more {
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--paper-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.diff-more:hover { color: var(--gold); border-color: var(--gold-dim); }

.diff-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.diff-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--paper-dim);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.diff-chip:hover { color: var(--paper); border-color: var(--gold-dim); }

.diff-chip.on {
  color: var(--paper);
  border-color: var(--cinnabar);
  background: rgba(178, 58, 46, 0.18);
}

.diff-glyph {
  font-style: normal;
  font-size: 19px;
  line-height: 1.1;
  color: var(--gold);
}

.diff-chip.on .diff-glyph { color: var(--cinnabar-glow); }

.diff-name {
  font-size: 14px;
  letter-spacing: 0.1em;
}

.diff-blurb {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-dim);
  text-align: center;
}

/* ---------- 难度抽屉 ---------- */

.diff-card {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
}

.diff-card.on {
  border-color: var(--cinnabar);
  background: rgba(178, 58, 46, 0.12);
}

.diff-card p { margin: 6px 0; font-size: 14px; line-height: 1.7; }

.diff-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}

.diff-glyph.big { font-size: 22px; }

.diff-card-name { font-size: 17px; letter-spacing: 0.12em; }

.diff-card-tag {
  padding: 1px 7px;
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  font-size: 12px;
  color: var(--cinnabar-glow);
}

.diff-facts {
  margin: 9px 0 4px;
  border-top: 1px solid rgba(201, 162, 39, 0.16);
  padding-top: 8px;
}

.diff-fact {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.9;
}

.df-k { flex: 0 0 116px; color: var(--paper-dim); }
.df-v { flex: 1; }

/* ---------- 存档槽 ---------- */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.slot-card {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
}

.slot-card.empty { border-style: dashed; opacity: 0.72; }

.slot-card.current { border-color: var(--gold-dim); background: rgba(201, 162, 39, 0.08); }

.slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.slot-no {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.slot-tag { font-size: 11px; color: var(--paper-dim); }

.slot-card p { margin: 2px 0; }

.slot-line { font-size: 14px; line-height: 1.6; }

.slot-where {
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper);
  /* 钉成两行高：章名长短不一，不钉住的话六张卡会参差不齐 */
  height: 3.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slot-dim { color: var(--paper-dim); font-size: 12.5px; }

.slot-diff {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  font-size: 11.5px;
  color: var(--gold);
}

.slot-time { font-size: 12px; color: var(--paper-dim); }

.slot-empty-note {
  font-size: 13px;
  color: var(--paper-dim);
  min-height: 4.4em;
  display: flex;
  align-items: center;
}

.slot-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.btn-danger { border-color: rgba(178, 58, 46, 0.45); color: #d9927f; }
.btn-danger:hover:not(:disabled) { border-color: var(--cinnabar-bright); color: var(--cinnabar-glow); }

.slot-foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--paper-dim);
}

/* ---------- 手机 ---------- */

@media (max-width: 560px) {
  .slot-grid { grid-template-columns: 1fr; }
  .diff-box { margin-top: 14px; padding: 12px 12px 10px; }
  .diff-picker { gap: 6px; }
  .diff-chip { padding: 8px 2px 6px; }
  .diff-name { font-size: 13px; letter-spacing: 0.04em; }
  .diff-glyph { font-size: 17px; }
  .df-k { flex: 0 0 96px; }
}