/* 《向北》style.css —— 步骤二：视觉系统（令牌 + 组件壳 + 舞台）
   规格见 docs/visual-system.md 与 docs/ui-layout.md；组件规则里只允许 var()，禁止再写色值。 */

/* ---------- 字体：OFL 子集随包，系统字体兜底 ----------
   子集只含游戏实际用字；缺字时回退系统宋体/黑体。
   授权见 assets/fonts/OFL-Zhuque.txt 与 OFL-Smiley.txt。 */
@font-face {
  font-family: "XB Smiley";
  src: url("./assets/fonts/smiley-game.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "XB Zhuque";
  src: url("./assets/fonts/zhuque-game.woff2") format("woff2");
  font-display: swap;
}

/* ---------- 令牌：唯一可以写色值的地方 ---------- */
:root {
  /* 五色 */
  --paper: #E8E1D0;
  --ink: #1A1714;
  --cinnabar: #A8322D;
  --ember: #D97A2B;
  --night: #1B2430;

  /* 派生色 */
  --paper-hi: #F1EBDD;
  --paper-lo: #DCD2BC;
  --ink-muted: #5C564D;
  --night-deep: #10161D;
  --scrim: rgba(16, 22, 29, 0.62);
  --overlay: rgba(16, 22, 29, 0.78);
  --title-map-scrim: linear-gradient(90deg, rgba(11, 14, 19, 0.96) 0%, rgba(11, 14, 19, 0.9) 34%, rgba(11, 14, 19, 0.48) 58%, rgba(11, 14, 19, 0.04) 82%);
  --chapter-photo-scrim: linear-gradient(90deg, rgba(11, 14, 19, 0.97) 0%, rgba(11, 14, 19, 0.9) 30%, rgba(11, 14, 19, 0.52) 56%, rgba(11, 14, 19, 0.08) 84%);
  --codex-caption-scrim: linear-gradient(0deg, rgba(11, 14, 19, 0.82), transparent);
  --title-photo-left-scrim: linear-gradient(90deg,
    rgba(232, 225, 208, 0.82) 0%,
    rgba(232, 225, 208, 0.58) 22%,
    rgba(232, 225, 208, 0.18) 42%,
    rgba(232, 225, 208, 0) 62%);
  --title-photo-bottom-scrim: linear-gradient(to left,
    rgba(16, 22, 29, 0.97) 0%,
    rgba(16, 22, 29, 0.94) 14%,
    rgba(16, 22, 29, 0.55) 20%,
    rgba(16, 22, 29, 0) 30%);
  --title-map-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
  --title-sub-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  --shadow: rgba(26, 23, 20, 0.18);
  --ink-a12: rgba(26, 23, 20, 0.12);
  --ink-a20: rgba(26, 23, 20, 0.2);
  --ink-a30: rgba(26, 23, 20, 0.3);
  --ink-a45: rgba(26, 23, 20, 0.45);
  --paper-a72: rgba(232, 225, 208, 0.72);
  --paper-a90: rgba(232, 225, 208, 0.9);
  /* 歧路图专用夜色：全部在此定义，组件只引用令牌（check-build C10）。 */
  --branch-sky-top: #0d1620;
  --branch-sky: #0b1119;
  --branch-sky-deep: #080d13;
  --branch-star-hi: rgba(241, 235, 221, 0.72);
  --branch-star-mid: rgba(241, 235, 221, 0.62);
  --branch-star-low: rgba(241, 235, 221, 0.48);
  --branch-star-faint: rgba(241, 235, 221, 0.55);
  --branch-glow: rgba(58, 82, 105, 0.42);
  --branch-warm: rgba(168, 50, 45, 0.12);
  --branch-sky-shadow: rgba(0, 0, 0, 0.7);
  --branch-seal-shadow: rgba(0, 0, 0, 0.35);
  --branch-card: #18222d;
  --branch-edge: rgba(232, 225, 208, 0.5);
  --branch-edge-soft: rgba(232, 225, 208, 0.28);
  --branch-edge-faint: rgba(232, 225, 208, 0.26);
  --branch-scrim-top: rgba(8, 13, 19, 0.06);
  --branch-scrim-bottom: rgba(8, 13, 19, 0.88);
  --branch-title-shadow: rgba(0, 0, 0, 0.9);
  --branch-ring: rgba(168, 50, 45, 0.45);
  --branch-ring-soft: rgba(168, 50, 45, 0.25);
  --branch-current-ink: #f0b3aa;
  --branch-group-meta: rgba(232, 225, 208, 0.45);
  --branch-card-bg: rgba(232, 225, 208, 0.055);
  --branch-card-unlocked: rgba(232, 225, 208, 0.12);
  --branch-card-locked: rgba(232, 225, 208, 0.025);
  --branch-hint-ink: rgba(232, 225, 208, 0.46);
  --branch-detail-scrim: rgba(4, 8, 12, 0.74);
  --branch-panel-shadow: rgba(0, 0, 0, 0.34);
  --branch-node-hover: rgba(26, 23, 20, 0.035);
  /* 剧情回顾：近黑底、纸白台词、唯一的金色留给玩家选择。 */
  --history-bg: #080D13;
  --history-choice: #F2C45C;
  --history-rule: rgba(232, 225, 208, 0.18);
  --history-prompt: rgba(232, 225, 208, 0.55);
  --history-speaker: rgba(232, 225, 208, 0.72);
  --history-scroll-thumb: rgba(232, 225, 208, 0.22);
  --focus-color: #A8322D;
  --focus-gap: #F1EBDD;

  /* 纸纹：两层细纹 + 极淡高光，不引图片。
     周期取 5px/7px 而不是 3px/4px——太密会形成网格，看着像坐标纸不像纸。 */
  --paper-texture:
    repeating-linear-gradient(0deg, rgba(26, 23, 20, 0.015) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(26, 23, 20, 0.012) 0 1px, transparent 1px 7px),
    radial-gradient(90% 70% at 20% 10%, rgba(241, 235, 221, 0.035), transparent 55%);

  /* 字体：得意黑只给最大标题，其余用朱雀仿宋。 */
  --font-display: "XB Smiley", "Smiley Sans", "得意黑", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-title: "XB Zhuque", "Zhuque Fangsong", "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
  --font-body: "XB Zhuque", "Zhuque Fangsong", "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
  --font-num: "Consolas", "SFMono-Regular", "Courier New", monospace;

  /* 字号 / 行高 / 字距 */
  --fs-title: 96px;
  --fs-subtitle: 20px;
  --fs-chapter: 44px;
  --fs-h2: 28px;
  --fs-body: 26px;
  --fs-choice: 22px;
  --fs-name: 18px;
  --fs-note: 18px;
  --fs-small: 14px;
  --lh-title: 1;
  --lh-body: 1.8;
  --lh-choice: 1.45;
  --lh-note: 1.7;
  --ls-title: 12px;
  --ls-chapter: 8px;
  --ls-button: 4px;

  /* 间距 / 边框 / 圆角 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 64px;
  --space-8: 96px;
  --border: 1px;
  --border-strong: 2px;
  --border-accent: 4px;
  --radius: 2px;

  /* 层级 */
  --z-art: 0;
  --z-scene: 1;
  --z-figure: 10;
  --z-hud: 20;
  --z-dialogue: 30;
  --z-choice: 40;
  --z-modal: 50;
  --z-transition: 60;
  --z-pause: 80;
  --z-gallery: 82;
  --z-saves: 83;
  --z-codex: 84;
  --z-history: 85;
  --z-branch: 86;
  --z-ending-modal: 87;
  --z-branch-detail: 88;
  --z-save-confirm: 89;
  --z-dev: 89;
  --z-toast: 90;
  --z-debug: 95;
  --z-orientation: 100;

  /* 动效 / 焦点 / 舞台 */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 480ms;
  --dur-transition: 480ms;
  --dur-flash: 120ms;
  --dur-shake: 180ms;
  --dur-strike: 420ms;
  --strike-stagger: 90ms;
  --fx-flash-opacity: 0.12;
  --fx-shake-distance: 2px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --focus-w: 2px;
  --focus-offset: 2px;

  --stage-w: 1280px;
  --stage-h: 720px;
  --scale: 1;

  /* 阅读层（步骤三）：正文缩放与选项计时条进度 */
  --text-scale: 1;
  --choice-progress: 1;
}

/* 低配 / 对照：强制走系统回退栈（?fonts=fallback 触发） */
html.fonts-fallback {
  --font-display: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-title: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
  --font-body: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
}

/* ---------- 基础层 ---------- */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  margin-left: calc(var(--stage-w) / -2);
  margin-top: calc(var(--stage-h) / -2);
  transform: scale(var(--scale));
  transform-origin: center center;
  background-color: var(--paper);
  background-image: var(--paper-texture);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow: hidden;
}

/* 全站禁选：双击推进剧情、横屏提示与所有面板都不应选中文字；只有滑杆需要拖动。 */
html,
body,
#stage,
#stage * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

[hidden] {
  display: none !important;
}

/* 单画布：标题 / 地图 / VN 共用的程序化版画底 */
.stage-art {
  position: absolute;
  inset: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  z-index: var(--z-art);
  display: block;
  pointer-events: none;
}

/* 照片底缓慢推近；不改变布局，只在画布内部裁切。 */
.stage-art.is-photo {
  transform-origin: 50% 52%;
  animation: xb-art-drift 28s ease-in-out infinite alternate;
}

@keyframes xb-art-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.05) translate3d(-0.55%, -0.35%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-art.is-photo {
    animation: none;
    transform: none;
  }
}

.scene {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
}

/* ---------- 特效层：墨色横擦 + 软闪白（步骤六） ---------- */
.fx-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-transition);
  overflow: hidden;
  pointer-events: none;
}

.fx-wipe,
.fx-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-wipe {
  transform: translateX(-100%);
  opacity: 0;
}

.fx-layer.is-paper .fx-wipe {
  background: linear-gradient(90deg, transparent 0%, var(--paper) 14%, var(--paper-hi) 50%, var(--paper) 86%, transparent 100%);
}

.fx-layer.is-night .fx-wipe {
  background: linear-gradient(90deg, transparent 0%, var(--night-deep) 14%, var(--night) 50%, var(--night-deep) 86%, transparent 100%);
}

.fx-layer.is-wiping .fx-wipe {
  animation: xb-fx-wipe var(--dur-transition) var(--ease-out) both;
}

.fx-flash {
  background: var(--paper-hi);
  opacity: 0;
}

.fx-layer.is-flashing .fx-flash {
  animation: xb-fx-flash var(--dur-flash) var(--ease-out) both;
}

#stage.is-shaking {
  animation: xb-fx-shake var(--dur-shake) linear both;
}

@keyframes xb-fx-wipe {
  0% { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 1; }
}

@keyframes xb-fx-flash {
  0% { opacity: 0; }
  28% { opacity: var(--fx-flash-opacity); }
  100% { opacity: 0; }
}

@keyframes xb-fx-shake {
  0%, 100% { transform: translateX(0) scale(var(--scale)); }
  25% { transform: translateX(calc(var(--fx-shake-distance) * -1)) scale(var(--scale)); }
  75% { transform: translateX(var(--fx-shake-distance)) scale(var(--scale)); }
}

html {
  /* 手机点按由朱砂焦点环和自绘状态表示；去掉 Edge/Chrome 默认的蓝色 tap highlight。 */
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  font-size: var(--fs-choice);
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-w) var(--focus-color), 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--focus-gap);
}

[aria-disabled="true"] {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- 标题画面 ---------- */
.title-main {
  position: absolute;
  left: 120px;
  top: 132px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--ink);
}

.title-seal {
  position: absolute;
  left: 360px;
  top: 150px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: var(--paper-hi);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  border-radius: var(--radius);
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--ink-a12);
}

.title-sub {
  position: absolute;
  left: 120px;
  top: 258px;
  margin: 0;
  font-size: var(--fs-subtitle);
  letter-spacing: 4px;
  color: var(--ink-muted);
}

.title-menu {
  position: absolute;
  left: 120px;
  top: 300px;
  width: 450px;
  display: grid;
  grid-template-columns: repeat(2, 220px);
  gap: 10px;
}

/* 「开始 / 继续」占整行；其余四个入口两两并排，落在 844×390 的 44 CSS px 热区之上。 */
.title-menu .menu-button--wide {
  grid-column: 1 / -1;
  width: 450px;
}

/* 标题态设置入口：右上角独立按钮，不挤进 2×2 主菜单。
   #scene-title 提高优先级，避免后面的 .xb-btn { position: relative } 覆盖绝对定位。 */
#scene-title .title-settings {
  position: absolute;
  right: 24px;
  top: 24px;
  min-width: 168px;
  min-height: 82px;
  padding: 0 24px;
}

.title-menu .menu-button {
  min-height: 82px;
}

.title-version {
  position: absolute;
  left: 32px;
  top: 690px;
  margin: 0;
  font-size: var(--fs-small);
  letter-spacing: 1px;
  color: var(--ink-muted);
}

/* 标题页制作名单入口：静态文本链接，不占主菜单、不弹窗。
   右下角与左下版本行分开，避免 844×390 缩放下互相遮挡。 */
.title-credits {
  position: absolute;
  right: 24px;
  bottom: 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 1px;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.title-credits:hover {
  color: var(--ink);
  border-bottom-color: var(--cinnabar);
}

.title-credits:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 2px;
}

/* 标题照片底：左侧压纸、右下压暗。
   左压纸保证“向北”和菜单压在人物/山影上仍可读；右下压暗同时收住
   AI 生成图右下角的水印，制作名单链接因此改用纸色。 */
#scene-title::before,
#scene-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#scene-title::before {
  background: var(--title-photo-left-scrim);
}

#scene-title::after {
  background: var(--title-photo-bottom-scrim);
  background-size: 100% 150px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.title-main,
.title-seal,
.title-sub,
.title-menu,
.title-settings,
.title-version,
.title-credits {
  z-index: 1;
}

.title-credits {
  color: var(--paper-hi);
  text-shadow: 0 1px 2px var(--ink);
}

.title-credits:hover {
  color: var(--paper-hi);
  border-bottom-color: var(--cinnabar);
}

/* ---------- 地图画面 ---------- */
.map-title {
  position: absolute;
  left: 64px;
  top: 48px;
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-chapter);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-chapter);
  color: var(--ink);
}

.map-sub {
  position: absolute;
  left: 64px;
  top: 108px;
  margin: 0;
  font-size: var(--fs-note);
  letter-spacing: 2px;
  color: var(--ink-muted);
}

.map-route {
  position: absolute;
  inset: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  pointer-events: none;
}

.map-route polyline {
  fill: none;
  stroke: var(--ink-a30);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.map-stations {
  position: absolute;
  inset: 0;
}

.map-station {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 6px 10px;
  text-align: left;
  background: var(--paper-hi);
  border: var(--border) solid var(--ink-a20);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink-a12);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.map-station:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.map-station:focus-visible {
  border-color: var(--cinnabar);
}

.station-order {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--cinnabar);
}

.station-name {
  font-size: 20px;
  line-height: 1.2;
}

.station-state {
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--ink-muted);
}

.map-station.is-locked {
  background: var(--paper-lo);
  border-style: dashed;
  box-shadow: none;
}

.map-station.is-locked .station-order,
.map-station.is-locked .station-name {
  color: var(--ink-muted);
}

.map-hint {
  position: absolute;
  left: 64px;
  top: 660px;
  margin: 0;
  font-size: var(--fs-note);
  color: var(--ink-muted);
}

/* ---------- VN 画面 ---------- */
.vn-chapter {
  position: absolute;
  left: 32px;
  top: 24px;
  height: 28px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 10px 0 8px;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--paper);
  background: var(--scrim);
  border-radius: var(--radius);
}

.vn-chapter::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--cinnabar);
}

.vn-pause {
  position: absolute;
  left: 1200px;
  top: 24px;
  width: 48px;
  height: 48px;
  font-size: 20px;
  color: var(--paper);
  background: var(--scrim);
  border: var(--border) solid var(--paper-a72);
  border-radius: var(--radius);
}

/* 回顾放在暂停正下方：顶栏从「物资」到暂停已满，不抢自动/跳过的位置。 */
.vn-history-button {
  position: absolute;
  right: 32px;
  top: 84px;
  width: 112px;
  height: 44px;
  z-index: var(--z-dialogue);
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--paper);
  background: var(--scrim);
  border: var(--border) solid var(--paper-a72);
  border-radius: var(--radius);
}

.vn-history-button:focus-visible,
.xb-history__close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-w) var(--focus-color),
    0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--focus-gap);
}

.vn-dialogue {
  position: absolute;
  left: 60px;
  top: 560px;
  width: 1160px;
  height: 118px;
  box-sizing: border-box;
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
  z-index: var(--z-dialogue);
}

.vn-name {
  position: absolute;
  left: 24px;
  top: -20px;
  margin: 0;
  padding: 2px 10px;
  font-size: var(--fs-name);
  font-weight: bold;
  line-height: 1.2;
  color: var(--cinnabar);
  background: var(--paper-hi);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
}

.vn-text {
  position: absolute;
  left: 26px;
  top: 26px;
  width: 1108px;
  height: 66px;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.vn-next {
  position: absolute;
  right: 20px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  font-size: var(--fs-small);
  line-height: 24px;
  text-align: center;
  color: var(--cinnabar);
  animation: breathe 1.6s var(--ease-out) infinite;
}

/* 朱雀仿宋的 ▼ 在 14px 下会缩成小点：箭头单独走系统符号字体。 */
.vn-next__mark {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif;
  font-size: 15px;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- 暂停遮罩 ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-pause);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.pause-panel {
  width: 280px;
  max-height: 688px;
  box-sizing: border-box;
  padding: var(--space-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}

.pause-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-name);
  letter-spacing: var(--ls-chapter);
  text-align: center;
  color: var(--ink-muted);
}

.pause-button {
  min-height: 56px;
  font-size: var(--fs-choice);
  letter-spacing: 2px;
  color: var(--ink);
  background: var(--paper);
  border: var(--border) solid var(--ink-a20);
  border-radius: var(--radius);
}

.pause-button:hover {
  border-color: var(--ink);
}

/* 暂停里的本周目状态记录：默认收起，展开后只读；完整句子与弹窗同一套。 */
.pause-status-log {
  border-top: var(--border) solid var(--ink-a20);
  padding-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.pause-status-log summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  letter-spacing: 1px;
  color: var(--ink);
}

.pause-status-log__list {
  margin: var(--space-1) 0 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  line-height: 1.45;
}

.pause-status-log__empty {
  list-style: none;
  margin-left: -18px;
}

/* ---------- 提示 / 调试 / 横屏 ---------- */
#toast {
  position: absolute;
  left: 320px;
  top: 24px;
  width: 640px;
  box-sizing: border-box;
  z-index: var(--z-toast);
  padding: 12px 20px;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--paper);
  background: var(--ink);
  border-left: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}

#toast.is-visible {
  opacity: 1;
}

/* 章末自动存档：顶部独立纸条，避免与 toast 抢位置；3.5 秒后淡出。 */
#autosave-notice {
  position: absolute;
  left: 50%;
  top: 84px;
  z-index: var(--z-toast);
  box-sizing: border-box;
  padding: 9px 18px;
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: var(--border) solid var(--ink-a20);
  border-left: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

#autosave-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

#debug {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: var(--z-debug);
  margin: 0;
  padding: 6px 8px;
  font-family: var(--font-num);
  font-size: 12px;
  line-height: 1.4;
  color: var(--paper);
  background: var(--scrim);
  white-space: pre-wrap;
  pointer-events: none;
}

#orientation {
  position: fixed;
  inset: 0;
  z-index: var(--z-orientation);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-note);
  letter-spacing: 2px;
  text-align: center;
}

#orientation p {
  margin: 0;
}

.orientation-hint {
  max-width: 320px;
  margin-top: 14px;
  color: var(--paper-a72);
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: 1px;
}

@media (orientation: portrait) and (max-width: 900px) {
  #stage {
    display: none;
  }

  #orientation {
    display: flex;
  }
}

/* =====================================================================
   组件壳（xb-）：只做壳，不接逻辑
   ===================================================================== */

/* 1. 按钮 */
.xb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 220px;
  min-height: 56px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-choice);
  line-height: var(--lh-choice);
  letter-spacing: var(--ls-button);
  color: var(--ink);
  background: var(--paper-hi);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink-a12);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.xb-btn::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 10px;
  height: 10px;
  border-right: var(--border) solid var(--ink-a30);
  border-bottom: var(--border) solid var(--ink-a30);
}

.xb-btn--primary {
  color: var(--paper-hi);
  background: var(--ink);
  border-color: var(--ink);
}

.xb-btn--primary::after {
  border-color: var(--paper-a72);
}

.xb-btn--ghost {
  background: transparent;
  border-color: var(--ink-a30);
  box-shadow: none;
}

.xb-btn--danger {
  color: var(--cinnabar);
  background: var(--paper-hi);
  border-color: var(--cinnabar);
}

.xb-btn--sm {
  min-width: 120px;
  min-height: 44px;
  font-size: var(--fs-note);
  letter-spacing: 2px;
}

@media (hover: hover) {
  .xb-btn:hover {
    transform: translateY(-1px);
    box-shadow: 3px 4px 0 var(--ink-a20);
  }

  .xb-btn--primary:hover {
    background: var(--night);
  }

  .xb-btn--ghost:hover {
    background: var(--paper-hi);
    border-color: var(--ink);
  }
}

.xb-btn:active {
  transform: translateY(0);
  box-shadow: 1px 1px 0 var(--ink-a12);
}

.xb-btn[aria-disabled="true"],
.xb-btn.is-disabled {
  color: var(--ink-muted);
  background: var(--paper);
  border-style: dashed;
  border-color: var(--ink-a30);
  box-shadow: none;
}

/* 标题菜单沿用按钮壳（menu-button 保留兼容类名） */
.menu-button {
  width: 220px;
  justify-content: flex-start;
  padding-left: var(--space-4);
}

/* 2. 对话框 */
.xb-panel {
  box-sizing: border-box;
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}

.xb-dialog {
  position: relative;
  width: 1160px;
  min-height: 118px;
  padding: var(--space-4) var(--space-5) var(--space-3);
}

.xb-dialog__name {
  position: absolute;
  left: 24px;
  top: -20px;
  padding: 2px 10px;
  font-size: var(--fs-name);
  font-weight: bold;
  line-height: 1.2;
  color: var(--cinnabar);
  background: var(--paper-hi);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
}

.xb-dialog__text {
  margin: 0;
  min-height: 66px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.xb-dialog__next {
  position: absolute;
  right: 20px;
  bottom: 8px;
  font-size: var(--fs-small);
  color: var(--cinnabar);
}

.xb-dialog--narration .xb-dialog__name {
  display: none;
}

/* 3. 选项 */
.xb-choice {
  position: relative;
  box-sizing: border-box;
  width: 560px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-4) 10px;
  overflow: hidden;
  text-align: left;
  color: var(--ink);
  background: var(--paper-hi);
  border: var(--border) solid var(--ink-a30);
  border-left: var(--border-accent) solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.xb-choice__index {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: var(--fs-note);
  color: var(--cinnabar);
  border: var(--border) solid var(--ink-a20);
  border-radius: var(--radius);
}

.xb-choice__label {
  font-size: var(--fs-choice);
  line-height: var(--lh-choice);
}

.xb-choice__cost {
  grid-column: 2;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--ink-muted);
}

.xb-choice__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-accent);
  background: var(--ink-a12);
}

.xb-choice__timer > i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--cinnabar);
}

.xb-choice.is-selected {
  border-color: var(--cinnabar);
  border-left-color: var(--cinnabar);
}

.xb-choice.is-selected .xb-choice__index {
  color: var(--paper-hi);
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.xb-choice.is-timeout {
  border-style: dashed;
}

.xb-choice.is-timeout .xb-choice__timer > i {
  background: var(--ember);
}

.xb-choice.is-disabled {
  color: var(--ink-muted);
  background: var(--paper);
  border-color: var(--ink-a20);
}

/* 缺物资的条件选项仍占位，但整张卡明确灰掉：
   底色退回 --paper，序号/代价/底部进度条都退出朱砂，和可选项一眼可分。 */
.xb-choice.is-unavailable {
  color: var(--ink-muted);
  background: var(--paper);
  border-color: var(--ink-a12);
  opacity: 0.58;
  cursor: not-allowed;
}

.xb-choice.is-unavailable .xb-choice__index {
  color: var(--ink-muted);
  background: transparent;
  border-color: var(--ink-a12);
}

.xb-choice.is-unavailable .xb-choice__cost {
  color: var(--ink-a30);
}

.xb-choice.is-unavailable .xb-choice__timer > i {
  background: var(--ink-a30);
}

/* 4. 章节标题卡 */
.xb-title-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--night);
  color: var(--paper);
  animation: xb-fade var(--dur-med) var(--ease-out) both;
}

.xb-title-card__chapter {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-chapter);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

/* 湘江章首：让 1934 年作战地图露出右半屏，标题压暗左半屏。
   地图是照片底，不再铺纯夜色；其余章首仍用纯夜色。 */
#vn-title-card.is-map {
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 104px;
  background: var(--title-map-scrim);
}

#vn-title-card.is-map .xb-title-card__chapter {
  font-size: 36px;
  letter-spacing: 6px;
  text-shadow: var(--title-map-shadow);
}

#vn-title-card.is-map .xb-title-card__rule {
  width: 280px;
  background: var(--cinnabar);
}

#vn-title-card.is-map .xb-title-card__sub {
  color: var(--paper-a72);
  text-shadow: var(--title-sub-shadow);
}

/* 标题卡是透明地图/照片时，下面的 HUD 和空对话框会透出来。 */
#scene-vn.is-title-card .vn-chapter,
#scene-vn.is-title-card .vn-pause,
#scene-vn.is-title-card .vn-history-button,
#scene-vn.is-title-card .vn-dialogue {
  visibility: hidden;
}

#scene-vn.is-title-card .vn-history-button {
  display: none;
}

.xb-title-card__sub {
  margin: 0;
  font-size: var(--fs-note);
  letter-spacing: 4px;
  color: var(--paper-a72);
}

.xb-title-card__rule {
  width: 240px;
  height: var(--border);
  background: var(--paper-a72);
}

.xb-title-card__seal {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  color: var(--paper-hi);
  background: var(--cinnabar);
  border-radius: var(--radius);
}

/* 所有章首卡统一：照片铺满，左侧留出标题；地图卡沿用更暗的左侧压暗。 */
#vn-title-card.has-photo {
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 104px;
  background-color: var(--night);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#vn-title-card.has-photo:not(.is-map) {
  background-image: var(--chapter-photo-scrim), var(--title-card-image);
}

#vn-title-card.has-photo.is-map {
  background-image: var(--title-map-scrim), var(--title-card-image);
}

#vn-title-card.has-photo .xb-title-card__chapter {
  font-size: 36px;
  letter-spacing: 6px;
  text-shadow: var(--title-map-shadow);
}

#vn-title-card.has-photo .xb-title-card__rule {
  width: 280px;
  background: var(--cinnabar);
}

#vn-title-card.has-photo .xb-title-card__sub {
  color: var(--paper-a72);
  text-shadow: var(--title-sub-shadow);
}

.xb-title-card__place {
  margin: calc(-1 * var(--space-2)) 0 0;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--paper-a72);
  text-shadow: var(--title-sub-shadow);
}

/* 章首卡不自动关，给一个明确的继续提示；不闪烁，减少动效下也成立。 */
.xb-title-card__hint {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--paper-a72);
  text-shadow: var(--title-sub-shadow);
}

@keyframes xb-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 5. 史实图鉴 */
.xb-modal {
  position: absolute;
  left: 190px;
  top: 80px;
  width: 900px;
  height: 560px;
  box-sizing: border-box;
  z-index: var(--z-codex);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}

.xb-modal__title {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-3);
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

.xb-modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  font-size: var(--fs-note);
  color: var(--ink);
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.xb-codex__badges {
  display: flex;
  gap: var(--space-2);
}

.xb-codex-grid {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
}

.xb-codex__card {
  position: relative;
  box-sizing: border-box;
  width: 260px;
  height: 140px;
  padding: var(--space-3);
  overflow: hidden;
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.xb-codex__card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-note);
  font-weight: bold;
  line-height: 1.3;
}

.xb-codex__card p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

.xb-codex__card.is-locked {
  background: var(--paper-lo);
  border-style: dashed;
}

.xb-codex__card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--ink-a12) 6px 7px);
}

.xb-codex__card.is-unlocked::before {
  content: "√";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--paper-hi);
  background: var(--cinnabar);
  border-radius: var(--radius);
}

.xb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 72px;
  height: 28px;
  padding: 0 var(--space-2);
  font-size: var(--fs-small);
  letter-spacing: 1px;
  border-radius: var(--radius);
}

.xb-badge--fact {
  color: var(--paper-hi);
  background: var(--ink);
}

.xb-badge--memoir {
  color: var(--ink);
  background: var(--paper-lo);
  border: var(--border) solid var(--ink-a20);
}

.xb-badge--literature {
  color: var(--ink);
  background: var(--paper);
  border: var(--border) dashed var(--ink-a45);
}

.xb-note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-note);
  color: var(--ink-muted);
}

/* 6. 结局面板：880×560，位置 200,80（附录 A / ui-layout §8） */
.xb-ending {
  position: absolute;
  left: 200px;
  top: 80px;
  width: 880px;
  height: 560px;
  box-sizing: border-box;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: 20px 26px;
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}

.xb-ending__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--ls-chapter);
}

.xb-ending__date {
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-muted);
}

.xb-ending__lede {
  margin: 0;
  font-size: 17px;
  letter-spacing: 1px;
}

/* 人物命运路线：一行朱砂，压在场次之上，不做分数/百分比 */
.xb-ending__route {
  margin: 0;
  padding-left: 10px;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--cinnabar);
  border-left: 3px solid var(--cinnabar);
}

/* 结局短描述：本局到底发生了什么，供结局页与分支卡共用 */
.xb-ending__summary {
  margin: 0;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

/* 结局人物账：门板去向 + 谁到了 + 谁没到；由本局 fate 生成 */
.xb-ending__fates {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

/* 结局收束句：价值判断与情绪余韵，保留作者分行 */
.xb-ending__closing {
  margin: 2px 0 0;
  padding: 10px 0 0 13px;
  border-top: 1px dashed var(--ink-a20);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 1px;
  white-space: pre-line;
  color: var(--ink);
}

.xb-ending__cols {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  margin-top: var(--space-1);
}

.xb-ending__label {
  margin: 0 0 var(--space-1);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--cinnabar);
}

.xb-ending__names {
  max-height: 172px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: 15px;
  line-height: 1;
}

.xb-ending__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  height: 19px;
  border-bottom: var(--border) dotted var(--ink-a20);
}

.xb-ending__name-status {
  font-size: 11px;
  color: var(--ink-muted);
}

.xb-ending__name-text {
  position: relative;
  display: inline-block;
}

.xb-ending__name.is-missed .xb-ending__name-text {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* 墨迹划名：每行一道手写横线，延迟由 --strike-delay 控制 */
.xb-ending__name.is-struck .xb-ending__name-text {
  text-decoration-color: transparent;
}

.xb-ending__name.is-struck .xb-ending__name-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--ink-muted);
  transform: scaleX(0);
  transform-origin: left center;
  animation: xb-fx-strike var(--dur-strike) var(--ease-out) both;
  animation-delay: var(--strike-delay, 0ms);
}

@keyframes xb-fx-strike {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.xb-ending__name.is-player .xb-ending__name-status {
  color: var(--cinnabar);
}

.xb-ending__stats {
  margin: 0;
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

.xb-ending__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  max-height: 168px;
  margin-top: var(--space-1);
  overflow-y: auto;
  /* 面板是固定高 flex 列；成就区加进来后，五卡不能和它一起被压成 0 高。 */
  flex-shrink: 0;
}

.xb-ending__card {
  box-sizing: border-box;
  height: 78px;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.xb-ending__card.is-lit {
  background: var(--paper-hi);
  border-left: var(--border-accent) solid var(--cinnabar);
}

.xb-ending__card.is-unlit {
  background: var(--paper-lo);
  border-style: dashed;
}

.xb-ending__card h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}

.xb-ending__card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

.xb-ending__card.is-lit p {
  color: var(--ink);
}

/* 本局成就：五张精神卡上方的一行词条；点开复用成就详情 */
.xb-ending__achievements {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: var(--border) dotted var(--ink-a20);
  flex-shrink: 0;
}

.xb-ending__achievements-title {
  margin: 0 0 var(--space-1);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cinnabar);
}

.xb-ending__achievement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 本局成就全部铺开；面板本身可滚，不把词条藏在第二个滚动区里。 */
  max-height: none;
  overflow: visible;
}

.xb-ending__achievement {
  min-height: 24px;
  box-sizing: border-box;
  padding: 2px 9px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-left: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
}

.xb-ending__achievement:hover,
.xb-ending__achievement:focus-visible {
  border-color: var(--ink);
  border-left-color: var(--cinnabar);
}

.xb-ending__achievements-empty {
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-ending__achievements-count {
  margin: 4px 0 0;
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--ink-muted);
}

.xb-ending__disclaimer {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.xb-ending__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* 结局入口从 3 个增至 5 个后，通用按钮的 220px 最小宽会把“分享/统计”挤出面板左侧。 */
.xb-ending__actions .xb-btn {
  min-width: 0;
  padding: 0 var(--space-3);
}

/* 6.1 结局页的分享卡与本周目统计：盖在结局之上，不遮断点名的阅读 */
.xb-share,
.xb-runstats,
.xb-dev {
  position: absolute;
  inset: 0;
  z-index: var(--z-ending-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.xb-share__panel,
.xb-runstats__panel,
.xb-dev__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-6) var(--space-4);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--shadow);
}

.xb-share__panel {
  width: 620px;
  height: 660px;
  align-items: center;
}

.xb-runstats__panel,
.xb-dev__panel {
  width: 1040px;
  height: 640px;
  overflow-y: auto;
}

.xb-share__kicker,
.xb-runstats__kicker,
.xb-dev__kicker {
  margin: 0;
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-muted);
}

.xb-share__title,
.xb-runstats__title,
.xb-dev__title {
  margin: 0;
  align-self: flex-start;
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

.xb-share__sub,
.xb-dev__note {
  margin: var(--space-1) 0 0;
  align-self: flex-start;
  font-size: 13px;
  color: var(--ink-muted);
}

.xb-share__frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
}

#share-card-canvas {
  display: block;
  width: 330px;
  height: 440px;
  border: var(--border) solid var(--ink-a20);
  background: var(--paper);
}

.xb-share__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  width: 100%;
}

.xb-runstats__route {
  margin: var(--space-1) 0 var(--space-3);
  padding-left: 10px;
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--cinnabar);
  border-left: 3px solid var(--cinnabar);
}

.xb-runstats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.xb-runstats__block {
  padding: var(--space-2) var(--space-3);
  background: var(--ink-a12);
  border: var(--border) solid var(--ink-a20);
}

.xb-runstats__block h3,
.xb-runstats__heading {
  margin: 0 0 4px;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

.xb-runstats__block p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.xb-runstats__heading {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--cinnabar);
}

.xb-runstats__chapters,
.xb-runstats__fates,
.xb-runstats__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xb-runstats__chip {
  padding: 5px 10px;
  font-size: 14px;
  border: var(--border) solid var(--ink-a20);
  color: var(--ink-muted);
}

.xb-runstats__chip.is-visited,
.xb-runstats__chip.is-alive,
.xb-runstats__chip.is-lit {
  color: var(--ink);
  border-color: var(--ink);
}

.xb-runstats__chip.is-dead,
.xb-runstats__chip.is-unlit {
  color: var(--ink-muted);
  border-style: dashed;
}

.xb-runstats__names {
  margin: 0;
  padding-left: 1.2em;
  columns: 2;
  column-gap: var(--space-4);
  font-size: 14px;
  line-height: 1.8;
}

.xb-runstats__names .is-missed {
  color: var(--ink-muted);
}

.xb-runstats__note {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-dev {
  z-index: var(--z-dev);
}

.xb-dev__panel h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
}

.xb-dev__chapters,
.xb-dev__routes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xb-dev__chapters .xb-btn,
.xb-dev__routes .xb-btn {
  min-height: 44px;
  font-size: 14px;
}

.xb-dev-toggle {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: var(--z-toast);
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
}

/* 7. 暂停面板 */
.xb-pause {
  width: 280px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

/* 8. 设置 */
.xb-settings {
  width: 560px;
  box-sizing: border-box;
  padding: var(--space-5);
}

.xb-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  font-size: var(--fs-note);
}

/* 危险操作只在标题态设置里出现；用分隔线与普通设置拉开距离。 */
.xb-settings__danger {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border) dashed var(--ink-a30);
}

.xb-settings__danger-title {
  margin: 0 0 6px;
  font-size: var(--fs-note);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cinnabar);
}

.xb-settings__danger-hint {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-settings__danger-button {
  width: 100%;
  min-height: 82px;
}

.xb-settings__label {
  color: var(--ink);
}

.xb-switch {
  position: relative;
  width: 56px;
  height: 28px;
  padding: 0;
  background: var(--paper-lo);
  border: var(--border) solid var(--ink-a30);
  border-radius: 14px;
}

.xb-switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: var(--paper-hi);
  border: var(--border) solid var(--ink-a30);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}

.xb-switch[aria-checked="true"] {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.xb-switch[aria-checked="true"]::after {
  transform: translateX(28px);
}

.xb-slider {
  width: 240px;
  height: 44px;
  display: flex;
  align-items: center;
}

.xb-slider__track {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--ink-a20);
  border-radius: var(--radius);
}

.xb-slider__track > i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60%;
  background: var(--cinnabar);
}

.xb-slider__track > b {
  position: absolute;
  left: 60%;
  top: -8px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: var(--paper-hi);
  border: var(--border-strong) solid var(--ink);
  border-radius: 50%;
}

.xb-segmented {
  display: inline-flex;
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
  overflow: hidden;
}

.xb-segmented > button {
  min-width: 72px;
  min-height: 44px;
  font-size: var(--fs-small);
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--paper);
  border: none;
}

.xb-segmented > button[aria-pressed="true"] {
  color: var(--paper-hi);
  background: var(--ink);
}

/* 9. HUD */
.xb-hud {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 72px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  z-index: var(--z-hud);
  color: var(--paper);
  background: var(--scrim);
}

.xb-hud__chapter {
  font-size: var(--fs-note);
  letter-spacing: 2px;
}

.xb-hud__meta {
  display: flex;
  gap: var(--space-5);
  font-family: var(--font-num);
  font-size: var(--fs-small);
  color: var(--paper-a72);
}

.xb-hud__timer {
  font-family: var(--font-num);
  font-size: var(--fs-h2);
  color: var(--ember);
}

/* 10. 反馈 */
.xb-toast {
  box-sizing: border-box;
  width: 640px;
  padding: 12px 20px;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--paper);
  background: var(--ink);
  border-left: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
}

.xb-rule {
  height: var(--border);
  background: var(--ink-a20);
}

.xb-seal {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  color: var(--paper-hi);
  background: var(--cinnabar);
  border-radius: var(--radius);
  transform: rotate(-3deg);
}

/* =====================================================================
   步骤三：阅读层容器（坐标见 docs/ui-layout.md §7）
   只做落位与状态；外观复用上面的 xb-* 壳，色值一律 var()
   ===================================================================== */

/* 正文与量具共用字号：--fs-body × --text-scale，两者必须同步，否则分页错位 */
.vn-text {
  font-size: calc(var(--fs-body) * var(--text-scale));
  white-space: pre-wrap;
  word-break: break-word;
}

.vn-dialogue {
  cursor: pointer;
}

.vn-measure {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1108px;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: calc(var(--fs-body) * var(--text-scale));
  line-height: var(--lh-body);
  white-space: pre-wrap;
  word-break: break-word;
  visibility: hidden;
  pointer-events: none;
}

/* 工具条：自动 / 跳过（只在 line 节点显示） */
.vn-toolbar {
  position: absolute;
  left: 912px;
  top: 24px;
  display: flex;
  gap: var(--space-2);
  z-index: var(--z-dialogue);
}

.vn-tool {
  width: 120px;
  height: 44px;
  font-size: var(--fs-small);
  letter-spacing: 2px;
  color: var(--paper);
  background: var(--scrim);
  border: var(--border) solid var(--paper-a72);
  border-radius: var(--radius);
}

.vn-tool[aria-pressed="true"] {
  color: var(--ink);
  background: var(--paper-hi);
  border-color: var(--cinnabar);
}

.vn-tool[aria-disabled="true"] {
  color: var(--paper-a72);
  border-style: dashed;
}

/* 选项提示区：处境一行，筹码/不可逆代价一行；超时后第一行换成剧情里的迟疑 */
.vn-choice-head {
  position: absolute;
  left: 360px;
  top: 250px;
  width: 560px;
  box-sizing: border-box;
  padding: 4px 10px 5px;
  background: var(--paper-a90);
  z-index: var(--z-choice);
}

.vn-choice-prompt {
  margin: 0;
  font-size: var(--fs-note);
  line-height: 1.45;
  color: var(--ink-muted);
}

.vn-choice-stakes {
  margin: 3px 0 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-a45);
}

.vn-choice-head.is-timeout {
  border-left: 3px solid var(--cinnabar);
  color: var(--cinnabar);
}

.vn-choice-head.is-timeout .vn-choice-prompt {
  color: var(--cinnabar);
}

/* 点名/记名覆盖层出现时，底下那句旁白不再参与阅读，避免与面板姓名打架。 */
#scene-vn.is-interacting .vn-dialogue {
  visibility: hidden;
}

/* 选项组：整卡可点，代价行常显 */
.vn-choices {
  position: absolute;
  left: 360px;
  top: 316px;
  width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  z-index: var(--z-choice);
}

.vn-choices .xb-choice {
  animation: xb-rise var(--dur-med) var(--ease-out) both;
}

.vn-choices .xb-choice:nth-child(2) {
  animation-delay: 60ms;
}

.vn-choices .xb-choice:nth-child(3) {
  animation-delay: 120ms;
}

/* 计时条读 --choice-progress（满 = 1，空 = 0）；组件壳默认 100% */
.vn-choices .xb-choice__timer > i {
  width: calc(var(--choice-progress, 1) * 100%);
  transition: width 80ms linear;
}

@keyframes xb-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 多选面板：行囊/弃物。整卡可点，选中是朱砂边；没有倒计时，确认才落档 */
.vn-multichoice {
  position: absolute;
  left: 300px;
  top: 96px;
  width: 680px;
  box-sizing: border-box;
  padding: var(--space-4);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border) solid var(--ink-a30);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
  z-index: var(--z-choice);
}

.vn-multi-prompt {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-choice);
  line-height: 1.4;
  color: var(--ink);
}

.vn-multi-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.xb-multi-option {
  position: relative;
  box-sizing: border-box;
  min-height: 58px;
  display: grid;
  grid-template-columns: 20px 24px 1fr;
  align-items: center;
  column-gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: var(--border) solid var(--ink-a20);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.xb-multi-option__key {
  font-family: var(--font-num);
  font-size: var(--fs-note);
  color: var(--ink-muted);
  text-align: center;
}

.xb-multi-option__mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: var(--border) solid var(--ink-a30);
  border-radius: 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--paper-hi);
}

.xb-multi-option__mark::after {
  content: "";
}

.xb-multi-option__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.xb-multi-option__label {
  font-size: var(--fs-choice);
  line-height: 1.25;
}

.xb-multi-option__note {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-muted);
}

.xb-multi-option.is-checked {
  border-color: var(--cinnabar);
  background: var(--paper-hi);
}

.xb-multi-option.is-checked .xb-multi-option__mark {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.xb-multi-option.is-checked .xb-multi-option__mark::after {
  content: "✓";
}

.xb-multi-option.is-locked {
  border-style: dashed;
  opacity: 0.6;
}

.xb-multi-option.is-disabled {
  opacity: 0.38;
}

.vn-multi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.vn-multi-status {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-muted);
}

.vn-multi-confirm {
  flex: none;
  min-width: 132px;
  min-height: 44px;
}

.vn-multi-confirm[disabled] {
  opacity: 0.45;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 行囊/弃物/渡口/铁索结算：DOM 清单，不评分 */
.vn-result {
  position: absolute;
  left: 360px;
  top: 170px;
  width: 560px;
  height: 380px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  z-index: var(--z-choice);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}

/* 结算是阅读区，不是控件；焦点落在容器只为让读屏从标题开始读。 */
.vn-result:focus {
  outline: none;
}

.vn-result__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-chapter);
}

.vn-seam__params {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--ink-muted);
}

.vn-seam__note,
.vn-result__note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}

.vn-result__stats {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink);
}

.vn-result__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
}

.vn-result__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
}

.vn-result__heading {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-note);
  letter-spacing: 2px;
  color: var(--cinnabar);
}

.vn-result__items {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--ink);
}

.vn-seam__more,
.vn-result__more {
  margin-top: auto;
  align-self: flex-start;
}

#vn-title-card {
  z-index: var(--z-choice);
  cursor: pointer;
}

/* 设置面板：嵌在 #pause 遮罩里，切到设置时菜单隐藏 */
#vn-settings {
  position: absolute;
  left: 360px;
  top: 140px;
  width: 560px;
  height: 440px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}

/* 花名册：暂停菜单里的第三个面板，只读当前名册，不写新档。 */
#vn-roster {
  position: absolute;
  left: 360px;
  top: 80px;
  width: 560px;
  max-height: 560px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}

.xb-roster__hint,
.xb-roster__foot {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-roster__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border) solid var(--ink-a30);
}

.xb-roster__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 42px;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-1);
  border-bottom: var(--border) solid var(--ink-a30);
}

.xb-roster__name {
  font-family: var(--font-title);
  font-size: 19px;
  letter-spacing: 2px;
}

.xb-roster__status {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

.xb-roster__item.is-missed .xb-roster__name {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.xb-roster__item.is-missed .xb-roster__status {
  color: var(--cinnabar);
}

.xb-roster__item.is-answered .xb-roster__status {
  color: var(--ember);
}

.xb-roster__item.is-remote .xb-roster__status {
  color: var(--ink);
}

.xb-settings__control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.xb-settings__value {
  min-width: 72px;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  text-align: right;
}

.xb-settings__hint {
  margin-left: var(--space-2);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.xb-range {
  width: 200px;
  height: 44px;
  accent-color: var(--cinnabar);
}

/* 史实注：标题 / 徽章 / 正文滚动区 / 争议行 / 出处 / 虚构落款 */
.xb-codex {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-4);
}

.xb-codex .xb-modal__title {
  padding-bottom: var(--space-2);
}

.xb-codex__badges {
  padding: 0 var(--space-5) var(--space-3);
}

.xb-codex__figure {
  position: relative;
  margin: 0 var(--space-5) var(--space-3);
  overflow: hidden;
  background: var(--night);
  border: var(--border) solid var(--ink-a30);
}

.xb-codex__figure img {
  display: block;
  width: 100%;
  height: 158px;
  object-fit: cover;
  filter: grayscale(1) sepia(0.12) contrast(1.04);
}

.xb-codex__figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px var(--space-3);
  font-size: 11px;
  line-height: 1.5;
  color: var(--paper-a72);
  background: var(--codex-caption-scrim);
}

.xb-codex__asset-note {
  margin: var(--space-2) var(--space-5) 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-codex__body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-5);
  overflow-y: auto;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--ink);
}

.xb-codex__body p {
  margin: 0 0 var(--space-3);
}

.xb-codex__note {
  margin: var(--space-3) var(--space-5) 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border-left: var(--border-accent) solid var(--ember);
}

.xb-codex__source {
  margin: var(--space-3) var(--space-5) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-codex__disclaimer {
  margin: var(--space-2) var(--space-5) 0;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-muted);
  text-align: right;
}

/* 点名 / 记名：620×320 纸面板，只压在对话上 */
.vn-interact {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}

.vn-interact__panel {
  box-sizing: border-box;
  width: 620px;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}

.vn-interact__kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--cinnabar);
}

.vn-interact__name {
  margin: 0;
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 4px;
}

.vn-interact__status {
  min-height: 22px;
  margin: 0;
  font-size: 15px;
  color: var(--ink-muted);
}

.vn-interact__bar {
  width: 100%;
  height: 4px;
  margin: var(--space-1) 0 var(--space-2);
  overflow: hidden;
  background: var(--ink-a20);
}

.vn-interact__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cinnabar);
  transform-origin: left center;
}

.vn-interact__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-height: 76px;
  overflow-y: auto;
}

.interact-chip {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
  border: var(--border) solid var(--ink-a20);
  border-radius: var(--radius);
}

.interact-chip.is-player {
  color: var(--paper-hi);
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.interact-chip.is-missed {
  opacity: 0.55;
  text-decoration: line-through;
}

.interact-chip.is-done.is-self,
.interact-chip.is-done.is-remote {
  color: var(--ink);
  background: var(--paper);
}

.interact-name-button {
  min-width: 120px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 18px;
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.interact-name-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-w) var(--focus-color), 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--focus-gap);
}

.vn-interact__answer {
  width: 240px;
  height: 64px;
  margin-top: var(--space-1);
  font-size: 18px;
  border: var(--border-strong) solid var(--ink);
  border-radius: var(--radius);
}

/* 史实图鉴：全屏遮罩 + 3 列卡片；锁卡只提示，不开弹窗 */
.xb-gallery {
  position: absolute;
  inset: 0;
  z-index: var(--z-gallery);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.xb-gallery__panel {
  position: relative;
  box-sizing: border-box;
  width: 1040px;
  height: 620px;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--shadow);
}

.xb-gallery__title {
  margin: 0;
  padding-right: var(--space-6);
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

.xb-gallery__count {
  margin: var(--space-1) 0 var(--space-4);
  font-family: var(--font-num);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.xb-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.xb-gallery__card {
  position: relative;
  box-sizing: border-box;
  height: 140px;
  padding: var(--space-3) var(--space-4) var(--space-3) 96px;
  overflow: hidden;
  text-align: left;
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.xb-gallery__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 82px;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.12) contrast(1.04);
  opacity: 0.92;
}

.xb-gallery__card.is-locked .xb-gallery__thumb {
  opacity: 0.38;
}

.xb-gallery__asset-note {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-gallery__card.is-unlocked {
  border-left: var(--border-accent) solid var(--cinnabar);
}

.xb-gallery__card.is-locked {
  background: var(--paper-lo);
  border-style: dashed;
}

.xb-gallery__card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--ink-a12) 6px 7px);
}

.xb-gallery__card-order {
  position: absolute;
  right: 10px;
  top: 8px;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-gallery__card h3 {
  margin: 0 0 var(--space-1);
  padding-right: var(--space-5);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.3;
}

.xb-gallery__card-type {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-gallery__card-state {
  position: absolute;
  left: 96px;
  bottom: var(--space-3);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

.xb-gallery__card.is-unlocked .xb-gallery__card-state {
  color: var(--cinnabar);
}

.xb-roster-pages {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-content: start;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.xb-roster-page {
  padding: var(--space-3);
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.xb-roster-page__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 2px;
}

.xb-roster-page__meta {
  margin: 2px 0 var(--space-2);
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-roster-page__names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xb-roster-page__name {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 14px;
  line-height: 1.6;
  border-bottom: 1px dashed var(--ink-a20);
}

.xb-roster-page__name.is-missed .xb-roster-page__name-text {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.xb-roster-page__mark {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.xb-roster-page__name.is-player .xb-roster-page__mark {
  color: var(--cinnabar);
}

.xb-roster-page__note {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.xb-gallery__hint {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------- 状态 HUD / 物资 / 门板（v1.4） ---------- */
.vn-condition {
  position: absolute;
  left: 32px;
  top: 60px;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 4px 10px;
  font-size: var(--fs-small);
  letter-spacing: 2px;
  color: var(--paper-a72);
  background: var(--scrim);
  border-radius: var(--radius);
  cursor: pointer;
}

.vn-condition:focus-visible {
  outline: 2px solid var(--paper-hi);
  outline-offset: 2px;
}

.vn-condition b {
  font-weight: 400;
  color: var(--paper-hi);
}

.vn-condition.is-q1 b,
.vn-condition.is-q0 b {
  color: var(--ember);
}

/* 状态变化：顶部居中，不挡点击；标题卡/物资/警告打开时由 JS 排队。 */
.xb-status-notice {
  position: absolute;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 860px;
  box-sizing: border-box;
  padding: 10px 18px 12px;
  color: var(--paper-hi);
  background: var(--ink);
  border-left: 4px solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
  z-index: 35;
  pointer-events: none;
  animation: xb-status-notice-in 180ms var(--ease-out) both;
}

.xb-status-notice__kicker {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--paper-a72);
}

.xb-status-notice__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.xb-status-notice__list li {
  margin: 0;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--paper-hi);
}

@keyframes xb-status-notice-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .xb-status-notice { animation: none; }
}

.vn-pack-button {
  position: absolute;
  left: 726px;
  top: 24px;
  width: 176px;
  height: 44px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 1px;
  color: var(--paper);
  background: var(--scrim);
  border: var(--border) solid var(--paper-a72);
  border-radius: var(--radius);
  z-index: var(--z-dialogue);
}

.vn-pack-button span {
  color: var(--paper-a72);
}

.vn-pack-button:disabled {
  color: var(--paper-a72);
  border-style: dashed;
}

/* 解锁成就：标题 / 暂停 / 结局共用；锁定卡只露词条和“未解锁” */
.xb-achievements {
  position: absolute;
  inset: 0;
  z-index: var(--z-codex);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.xb-achievements__panel {
  position: relative;
  box-sizing: border-box;
  width: 1040px;
  height: 620px;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-6) var(--space-3);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--shadow);
}

.xb-achievements__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-right: 56px;
}

.xb-achievements__kicker {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-muted);
}

.xb-achievements__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

.xb-achievements__count {
  margin: 0 0 0 auto;
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--cinnabar);
}

.xb-achievements__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-2) 0 var(--space-2);
}

.xb-achievements__tab {
  min-height: 30px;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-muted);
  background: var(--paper);
  border: var(--border) solid var(--ink-a20);
  border-radius: var(--radius);
}

.xb-achievements__tab.is-active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.xb-achievements__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 88px;
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  padding-right: 4px;
}

.xb-achievement-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 14px;
  overflow: hidden;
  font-family: var(--font-body);
  text-align: left;
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
  border-radius: var(--radius);
}

.xb-achievement-card__title {
  max-width: 100%;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 1px;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xb-achievement-card__meta {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xb-achievement-card__state {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-muted);
}

.xb-achievement-card.is-unlocked {
  background: var(--paper-hi);
  border-left: var(--border-accent) solid var(--cinnabar);
}

.xb-achievement-card.is-unlocked .xb-achievement-card__state {
  color: var(--cinnabar);
}

.xb-achievement-card.is-locked {
  color: var(--ink-muted);
  background: var(--paper-lo);
  border-style: dashed;
}

.xb-achievement-card.is-locked .xb-achievement-card__title {
  color: var(--ink-muted);
}

.xb-achievement-card:hover,
.xb-achievement-card:focus-visible {
  border-color: var(--ink);
}

.xb-achievements__hint {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

/* 成就详情：面板内的第二层；锁定态不显示决策组、选项和原因 */
.xb-achievement-detail {
  position: absolute;
  inset: 0;
  z-index: var(--z-codex);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}

.xb-achievement-detail__panel {
  position: relative;
  box-sizing: border-box;
  width: 640px;
  max-height: 520px;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}

.xb-achievement-detail__kicker {
  margin: 0 0 var(--space-1);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cinnabar);
}

.xb-achievement-detail__title {
  margin: 0 0 var(--space-3);
  padding-right: 48px;
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 2px;
}

.xb-achievement-detail__body {
  outline: none;
}

.xb-achievement-detail__lead {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  line-height: 1.8;
}

.xb-achievement-detail__text {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-muted);
}

.xb-achievement-detail__time {
  margin: var(--space-3) 0 0;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-pack-overlay,
.xb-door-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  z-index: 78;
}

.xb-door-modal { z-index: 79; }

.xb-pack {
  width: 760px;
  max-height: 640px;
  overflow-y: auto;
  padding: var(--space-6) var(--space-7);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  box-shadow: 6px 6px 0 var(--shadow);
}

.xb-pack__warning {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--paper-hi);
  background: var(--cinnabar);
}

.xb-pack__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-chapter);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

.xb-pack__summary {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.xb-pack__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.xb-pack__item {
  display: grid;
  grid-template-columns: 160px 90px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: var(--border) dashed var(--ink-a30);
}

.xb-pack__item-name {
  font-size: var(--fs-body);
}

.xb-pack__item-units {
  font-size: var(--fs-small);
  color: var(--cinnabar);
}

.xb-pack__item-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

.xb-pack__subhead {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--fs-small);
  letter-spacing: 3px;
  color: var(--cinnabar);
}

.xb-pack__recipes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.xb-pack__recipe {
  min-height: 44px;
}

.xb-pack__empty,
.xb-pack__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-pack__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.xb-door {
  width: 620px;
  padding: var(--space-6);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  box-shadow: 6px 6px 0 var(--shadow);
}

.xb-door__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-title);
  font-size: var(--fs-chapter);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
  color: var(--cinnabar);
}

.xb-door__body {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.xb-danger__actions {
  display: flex;
  gap: var(--space-3);
}

.xb-danger__actions .xb-btn {
  min-width: 160px;
}

/* 设置里的「减少动效」：与系统偏好同一条规则，两种入口都关掉动效 */
html.reduce-motion * {
  transition: none !important;
  animation: none !important;
}

/* 减少动效时，划名与转场直接到终态（上面的 animation:none 会停在起始帧） */
html.reduce-motion .xb-ending__name.is-struck .xb-ending__name-text::after {
  animation: none !important;
  transform: scaleX(1);
}

html.reduce-motion .fx-layer.is-wiping .fx-wipe,
html.reduce-motion .fx-layer.is-flashing .fx-flash {
  animation: none !important;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .xb-ending__name.is-struck .xb-ending__name-text::after {
    animation: none !important;
    transform: scaleX(1);
  }

  .fx-layer.is-wiping .fx-wipe,
  .fx-layer.is-flashing .fx-flash {
    animation: none !important;
    opacity: 0;
  }
}


/* =====================================================================
   手机横屏（844×390 一类）：舞台整体缩到 54%，逻辑字号必须放大，
   否则 17px 正文只剩 9 CSS px。暂停热区按 96 逻辑 ≈ 52 CSS px。
   ===================================================================== */
/* ---------- 剧情分支：只读歧路图（v1.5） ---------- */
.xb-branch {
  position: absolute;
  inset: 0;
  z-index: var(--z-branch);
  overflow: hidden;
  color: var(--paper-hi);
  background: var(--night-deep);
}

.xb-branch__sky {
  position: absolute;
  inset: 0;
  background-color: var(--branch-sky);
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, var(--branch-star-hi) 0 38%, transparent 48%),
    radial-gradient(1px 1px at 72% 16%, var(--branch-star-mid) 0 36%, transparent 48%),
    radial-gradient(1.2px 1.2px at 44% 72%, var(--branch-star-low) 0 36%, transparent 48%),
    radial-gradient(1px 1px at 88% 58%, var(--branch-star-faint) 0 34%, transparent 46%),
    radial-gradient(70% 55% at 52% 4%, var(--branch-glow), transparent 72%),
    radial-gradient(48% 40% at 86% 88%, var(--branch-warm), transparent 74%),
    linear-gradient(180deg, var(--branch-sky-top) 0%, var(--branch-sky) 46%, var(--branch-sky-deep) 100%);
  background-size: 260px 210px, 190px 160px, 310px 250px, 230px 190px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 40px 26px, 90px 12px, 18px 70px, 0 0, 0 0, 0 0;
  box-shadow: inset 0 0 190px 72px var(--branch-sky-shadow);
}

.xb-branch__head {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 22px;
  height: 86px;
  display: flex;
  align-items: flex-start;
}

.xb-branch__brand {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.xb-branch__kicker {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--paper-a72);
}

.xb-branch__title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--paper-hi);
}

.xb-branch__seal {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  background: var(--cinnabar);
  color: var(--paper-hi);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 var(--branch-seal-shadow);
}

.xb-branch__count {
  margin: 34px 74px 0 auto;
  padding: 6px 12px;
  font-family: var(--font-num);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--paper-a72);
  border: var(--border) solid var(--paper-a72);
}

.xb-branch__close {
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 52px;
  color: var(--paper-hi);
  background: transparent;
  border-color: var(--paper-a72);
}

.xb-branch__body {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 112px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
}

.xb-branch__chapters {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  padding-top: 8px;
}

.xb-branch-chapter {
  position: relative;
  display: block;
  width: 100%;
  height: 96px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: var(--paper-hi);
  background: var(--branch-card);
  border: var(--border) solid var(--branch-edge);
  border-radius: var(--radius);
}

.xb-branch-chapter img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.72) sepia(0.2) contrast(1.06) brightness(0.78);
  opacity: 0.72;
}

.xb-branch-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--branch-scrim-top) 20%, var(--branch-scrim-bottom) 100%);
}

.xb-branch-chapter__index {
  position: absolute;
  left: 9px;
  top: 8px;
  z-index: 1;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--paper-a72);
}

.xb-branch-chapter__title {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  z-index: 1;
  font-family: var(--font-title);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px var(--branch-title-shadow);
}

.xb-branch-chapter__state {
  position: absolute;
  right: 8px;
  top: 7px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--paper-a72);
}

.xb-branch-chapter.is-this-run {
  border-left: var(--border-accent) solid var(--cinnabar);
}

.xb-branch-chapter.is-current {
  border: var(--border-strong) solid var(--cinnabar);
  box-shadow: 0 0 0 2px var(--branch-ring-soft);
}

.xb-branch-chapter.is-current .xb-branch-chapter__state {
  color: var(--branch-current-ink);
}

.xb-branch-chapter.is-locked {
  border-style: dashed;
  border-color: var(--branch-edge-faint);
}

.xb-branch-chapter.is-locked img {
  filter: grayscale(1) brightness(0.34);
  opacity: 0.3;
}

.xb-branch-chapter.is-locked .xb-branch-chapter__title {
  color: var(--paper-a72);
}

.xb-branch-chapter.is-locked::before {
  content: "未";
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--paper-a72);
  border: 1px solid var(--paper-a72);
  opacity: 0.7;
  transform: rotate(-3deg);
}

.xb-branch__live {
  min-height: 34px;
  margin: 14px 0 10px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--paper-a72);
}

.xb-branch__live b {
  color: var(--paper-hi);
  font-weight: normal;
}

.xb-branch__live .is-current {
  color: var(--branch-current-ink);
}

.xb-branch__ends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto auto;
  gap: 12px 20px;
  align-items: start;
}

.xb-branch__group {
  min-width: 0;
}

.xb-branch__group--door { grid-column: 1; grid-row: 1; }
.xb-branch__group--nodoor { grid-column: 1; grid-row: 2; }
.xb-branch__group--bad { grid-column: 2; grid-row: 1 / span 2; }

.xb-branch__group-title {
  margin: 0 0 7px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--paper-a72);
}

.xb-branch__group-title span {
  margin-left: 6px;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--branch-group-meta);
}

.xb-branch__endings {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.xb-branch-ending {
  position: relative;
  min-height: 92px;
  padding: 8px 10px;
  overflow: hidden;
  text-align: left;
  color: var(--paper-hi);
  background: var(--branch-card-bg);
  border: var(--border) solid var(--branch-edge-soft);
  border-radius: var(--radius);
}

.xb-branch-ending__num {
  display: block;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--paper-a72);
}

.xb-branch-ending__title {
  display: block;
  margin-top: 2px;
  font-family: var(--font-title);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 1px;
}

.xb-branch-ending__lede {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--paper-a72);
}

.xb-branch-ending.is-unlocked {
  background: var(--branch-card-unlocked);
  border-left: var(--border-accent) solid var(--branch-edge);
}

.xb-branch-ending.is-current {
  border-color: var(--cinnabar);
  border-left-color: var(--cinnabar);
  box-shadow: inset 0 0 0 1px var(--branch-ring);
}

.xb-branch-ending.is-locked {
  border-style: dashed;
  background: var(--branch-card-locked);
}

.xb-branch-ending.is-locked .xb-branch-ending__title {
  color: var(--paper-a72);
}

.xb-branch-ending.is-locked::after {
  content: "未";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--paper-a72);
  border: 1px solid var(--paper-a72);
  opacity: 0.6;
  transform: rotate(-4deg);
}

.xb-branch__group--bad .xb-branch__endings {
  grid-template-columns: minmax(0, 1fr);
}

.xb-branch__group--bad .xb-branch-ending {
  min-height: 200px;
  padding: 12px 14px;
}

.xb-branch__group--bad .xb-branch-ending__title {
  margin-top: 8px;
  font-size: 24px;
}

.xb-branch__group--bad .xb-branch-ending__lede {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
}

.xb-branch__hint {
  margin: auto 0 0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--branch-hint-ink);
}

/* 章节详情：盖在歧路图上，纸纹底，节点可逐条展开 */
.xb-branch-detail {
  position: absolute;
  inset: 0;
  z-index: var(--z-branch-detail);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--branch-detail-scrim);
}

.xb-branch-detail__panel {
  position: relative;
  box-sizing: border-box;
  width: 840px;
  max-height: 570px;
  display: flex;
  flex-direction: column;
  padding: 24px 30px;
  color: var(--ink);
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--branch-panel-shadow);
}

.xb-branch-detail__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--cinnabar);
}

.xb-branch-detail__title {
  margin: 6px 0 4px;
  padding-right: 54px;
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 2px;
}

.xb-branch-detail__sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.xb-branch-detail__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

/* 章节详情底部：一周目后才可用；不可用时保留按钮并说明原因，不藏起来。 */
.xb-branch-detail__actions {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 12px;
  border-top: var(--border) solid var(--ink-a12);
}

.xb-branch-start {
  display: flex;
  align-items: center;
  gap: 16px;
}

.xb-branch-start__button {
  flex: 0 0 auto;
  min-width: 180px;
  min-height: 64px;
  font-size: 18px;
}

.xb-branch-start__button.is-unavailable {
  opacity: 0.55;
}

.xb-branch-start__hint {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.xb-branch-node {
  border-top: 1px dashed var(--ink-a30);
}

.xb-branch-node:first-child {
  border-top: 0;
}

.xb-branch-node__toggle {
  box-sizing: border-box;
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.xb-branch-node__toggle:hover {
  background: var(--branch-node-hover);
}

.xb-branch-node__index {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--ink-muted);
}

.xb-branch-node__title {
  font-family: var(--font-title);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 1px;
}

.xb-branch-node__status {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.xb-branch-node.is-done .xb-branch-node__status {
  color: var(--cinnabar);
}

.xb-branch-node.is-locked {
  opacity: 0.56;
}

.xb-branch-node__body {
  padding: 0 8px 18px 48px;
  font-size: 17px;
  line-height: 1.85;
}

.xb-branch-node__quote {
  margin: 0;
}

.xb-branch-node__list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.xb-branch-node__list li {
  margin: 2px 0;
}

.xb-branch-node__context {
  margin: 0 0 8px;
  color: var(--ink-muted);
}

.xb-branch-node__empty {
  margin: 0;
  color: var(--ink-muted);
}

/* 结局详情：纸纹卡，只读；未解锁时只给模糊提示 */
.xb-branch-route__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.xb-branch-route__chip {
  padding: 4px 9px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--paper);
  border: var(--border) solid var(--ink-a30);
}

.xb-branch-route__section {
  margin-top: 12px;
}

.xb-branch-route__section h4 {
  margin: 0 0 4px;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cinnabar);
}

.xb-branch-route__list {
  margin: 0;
  padding-left: 20px;
}

.xb-branch-route__list li {
  margin: 3px 0;
  font-size: 16px;
  line-height: 1.6;
}

.xb-branch-route__hint {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  border-left: 3px solid var(--ink-a30);
}

@media (max-height: 500px) and (orientation: landscape) {
  .vn-pause {
    left: 1172px;
    top: 12px;
    width: 96px;
    height: 96px;
    font-size: 36px;
  }

  /* 844×390 舞台缩到约 0.54；96/82 逻辑像素落在 44 CSS 像素以上 */
  .vn-history-button {
    right: 12px;
    top: 120px;
    width: 96px;
    height: 96px;
    font-size: 22px;
    letter-spacing: 2px;
  }

  .xb-ending {
    left: 16px;
    top: 16px;
    width: 1248px;
    height: 688px;
    gap: var(--space-3);
    padding: 24px 32px;
  }

  .xb-ending__title { font-size: 42px; }
  .xb-ending__date { font-size: 24px; letter-spacing: 1px; }
  .xb-ending__lede { font-size: 28px; letter-spacing: 0; }
  .xb-ending__route { font-size: 22px; }
  .xb-ending__summary { font-size: 22px; line-height: 1.45; }
  .xb-ending__fates { font-size: 22px; line-height: 1.45; }
  .xb-ending__closing { font-size: 24px; line-height: 1.5; }
  .xb-ending__cols { grid-template-columns: 1fr; gap: var(--space-3); }
  .xb-ending__label { font-size: 22px; letter-spacing: 2px; }
  .xb-ending__names { max-height: none; font-size: 26px; line-height: 1.5; }
  .xb-ending__name { height: 40px; }
  .xb-ending__name-status { font-size: 18px; }
  .xb-ending__stats { font-size: 26px; line-height: 1.5; }
  .xb-ending > * { flex-shrink: 0; }
  .xb-ending__cards { grid-template-columns: repeat(2, 1fr); max-height: none; overflow: visible; gap: var(--space-3); }
  .xb-ending__card { height: auto; min-height: 112px; padding: var(--space-3); }
  .xb-ending__card h3 { margin-bottom: 4px; font-size: 26px; }
  .xb-ending__card p { font-size: 26px; line-height: 1.35; }
  .xb-ending__disclaimer { font-size: 18px; }
  .xb-ending__actions .xb-btn { min-height: 64px; padding: 0 24px; font-size: 24px; }
  .pause-panel,
  .xb-pause { width: 520px; max-height: 688px; overflow-y: auto; padding: var(--space-6); }
  .pause-panel .pause-button,
  .xb-pause .pause-button { min-height: 82px; font-size: 26px; }

  /* 844×390 舞台缩放约 0.54；96/82 逻辑像素落在 44 CSS 像素以上 */
  .xb-choice { min-height: 82px; }
  .xb-multi-option { min-height: 82px; }
  .vn-multi-confirm { min-width: 160px; min-height: 96px; font-size: 22px; }

  .xb-roster-pages { grid-template-columns: 1fr; gap: var(--space-3); }
  .xb-roster-page__title { font-size: 28px; }
  .xb-roster-page__meta { font-size: 20px; }
  .xb-roster-page__names { grid-template-columns: 1fr; }
  .xb-roster-page__name { font-size: 24px; }
  .xb-roster-page__mark { font-size: 18px; }
  .xb-roster-page__note { font-size: 20px; }

  /* 物资面板与状态：舞台缩到约 54%，逻辑字号需放大到可读 */
  .vn-condition { top: 76px; font-size: 22px; padding: 6px 12px; }
  .vn-pack-button { left: 700px; top: 24px; width: 190px; height: 64px; font-size: 22px; }
  .xb-pack { width: 920px; max-height: 650px; padding: 24px 32px; }
  .xb-pack__title { font-size: 38px; }
  .xb-pack__warning { font-size: 26px; }
  .xb-pack__summary { font-size: 20px; }
  .xb-pack__item { grid-template-columns: 220px 120px 1fr; }
  .xb-pack__item-name { font-size: 26px; }
  .xb-pack__item-units { font-size: 20px; }
  .xb-pack__item-note { font-size: 20px; }
  .xb-pack__subhead { font-size: 20px; }
  .xb-pack__recipe { min-height: 64px; font-size: 20px; }
  .xb-pack__empty, .xb-pack__note { font-size: 20px; }
  /* 64 逻辑在 844×390 只有 34.7 CSS px；物资的关闭/继续是手机上的主要出口，抬到 82。 */
  .xb-pack__actions .xb-btn { min-height: 82px; font-size: 22px; }
  .xb-door { width: 760px; padding: 24px 32px; }
  .xb-door__title { font-size: 38px; }
  .xb-door__body { font-size: 26px; }
  .xb-door .xb-btn { min-height: 64px; font-size: 22px; }
  /* 行囊未满的「是/否」是手机上必须点得准的出口，同样抬到 82 逻辑 ≈ 44.4 CSS px。 */
  #bag-confirm-modal .xb-danger__actions .xb-btn { min-height: 82px; font-size: 22px; }

  /* 歧路图在 844×390 下：章节卡仍一排七张，但字号放大到约 11–13 CSS px；
     详情是一屏内可滚的纸卡，节点行 96 逻辑 ≈ 52 CSS px。 */
  .xb-branch__head { left: 24px; right: 24px; top: 12px; height: 74px; }
  .xb-branch__kicker { font-size: 14px; letter-spacing: 3px; }
  .xb-branch__title { margin-top: 14px; font-size: 42px; }
  .xb-branch__seal { width: 34px; height: 34px; font-size: 20px; }
  .xb-branch__count { margin: 24px 68px 0 auto; padding: 4px 8px; font-size: 16px; }
  .xb-branch__close, #branch-detail-close { width: 82px; height: 82px; font-size: 30px; }
  .xb-branch__body { left: 24px; right: 24px; top: 88px; bottom: 12px; }
  .xb-branch__chapters { gap: 6px; padding-top: 4px; }
  .xb-branch-chapter { height: 92px; }
  .xb-branch-chapter__index { left: 7px; top: 6px; font-size: 12px; }
  .xb-branch-chapter__title { left: 7px; right: 7px; bottom: 7px; font-size: 22px; }
  .xb-branch-chapter__state { right: 6px; top: 5px; font-size: 12px; }
  .xb-branch-chapter.is-locked::before { right: 6px; bottom: 5px; width: 24px; height: 24px; font-size: 14px; }
  .xb-branch__live { min-height: 26px; margin: 8px 0 6px; font-size: 16px; line-height: 1.4; }
  .xb-branch__ends { grid-template-columns: minmax(0, 1fr) 250px; gap: 8px 12px; }
  .xb-branch__group-title { margin-bottom: 4px; font-size: 16px; }
  .xb-branch__group-title span { font-size: 12px; }
  .xb-branch__endings { gap: 6px; }
  .xb-branch-ending { min-height: 86px; padding: 6px 8px; }
  .xb-branch-ending__num { font-size: 12px; }
  .xb-branch-ending__title { font-size: 19px; }
  .xb-branch-ending__lede { margin-top: 3px; font-size: 12px; line-height: 1.35; }
  .xb-branch__group--bad .xb-branch-ending { min-height: 190px; padding: 10px 12px; }
  .xb-branch__group--bad .xb-branch-ending__title { font-size: 26px; }
  .xb-branch__group--bad .xb-branch-ending__lede { font-size: 14px; }
  .xb-branch__hint { font-size: 11px; }
  .xb-branch-detail__panel { width: 1180px; max-height: 660px; padding: 18px 22px; }
  .xb-branch-detail__kicker { font-size: 14px; }
  .xb-branch-detail__title { font-size: 36px; }
  .xb-branch-detail__sub { font-size: 15px; }
  .xb-branch-start { gap: 12px; }
  .xb-branch-start__button { min-height: 82px; font-size: 22px; }
  .xb-branch-start__hint { font-size: 18px; }
  .xb-branch-node__toggle { min-height: 96px; grid-template-columns: 42px minmax(0, 1fr) auto; }
  .xb-branch-node__index { font-size: 14px; }
  .xb-branch-node__title { font-size: 24px; }
  .xb-branch-node__status { font-size: 14px; }
  .xb-branch-node__body { padding-left: 52px; font-size: 19px; }
  .xb-branch-route__chip { font-size: 14px; }
  .xb-branch-route__section h4 { font-size: 18px; }
  .xb-branch-route__list li { font-size: 18px; }
  .xb-branch-route__hint { font-size: 17px; }

  /* 成就面板：844×390 舞台缩到约 54%，逻辑字号需放大到可读 */
  .xb-achievements__panel { width: 1240px; height: 688px; padding: 18px 26px; }
  .xb-achievements__head { gap: var(--space-3); }
  .xb-achievements__kicker { font-size: 14px; letter-spacing: 3px; }
  .xb-achievements__title { font-size: 42px; }
  .xb-achievements__count { font-size: 20px; }
  .xb-achievements__tabs { gap: 4px; margin: 6px 0 8px; }
  .xb-achievements__tab { min-height: 82px; padding: 4px 8px; font-size: 17px; }
  .xb-achievements__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 112px; gap: 8px; }
  .xb-achievement-card { padding: 8px 12px; gap: 2px; }
  .xb-achievement-card__title { font-size: 27px; }
  .xb-achievement-card__meta { font-size: 15px; }
  .xb-achievement-card__state { font-size: 15px; letter-spacing: 1px; }
  .xb-achievements__hint { margin-top: 8px; font-size: 17px; }
  .xb-achievement-detail__panel { width: 1040px; max-height: 660px; padding: 18px 26px; }
  .xb-achievement-detail__kicker { font-size: 15px; }
  .xb-achievement-detail__title { font-size: 38px; }
  .xb-achievement-detail__lead { font-size: 25px; }
  .xb-achievement-detail__text { font-size: 22px; }
  .xb-achievement-detail__time { font-size: 17px; }
  #achievement-close, #achievement-detail-close { width: 82px; height: 82px; font-size: 30px; }

  .xb-ending__achievements-title { font-size: 20px; letter-spacing: 1px; }
  .xb-ending__achievement-chips { max-height: 104px; gap: 6px; }
  .xb-ending__achievement { min-height: 82px; padding: 2px 10px; font-size: 21px; }
  .xb-ending__achievements-empty { font-size: 19px; }
  .xb-ending__achievements-count { font-size: 16px; }
}

/* ---------- 剧情回顾：全屏只读层（v1.7 步骤十六） ---------- */
.xb-history {
  position: absolute;
  inset: 0;
  z-index: var(--z-history);
  color: var(--paper-hi);
  background: var(--history-bg);
}

/* 双保险：全局已禁选，这里再声明一次；回顾层没有输入框，也不接受拖拽。 */
.xb-history,
.xb-history * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.xb-history__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 36px 96px 40px;
}

.xb-history__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  height: 48px;
}

.xb-history__seal {
  width: 4px;
  height: 28px;
  background: var(--cinnabar);
}

.xb-history__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 8px;
  color: var(--paper-hi);
}

/* 参考图里的关闭是无边框细X；命中区仍按 56 逻辑像素给足。 */
.xb-history__close {
  position: absolute;
  right: 32px;
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  color: var(--paper-hi);
  background: none;
  border: 0;
  cursor: pointer;
}

.xb-history__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 20px;
  padding: 12px 16px 40px;
  overflow-y: auto;
  scrollbar-color: var(--history-scroll-thumb) transparent;
  scrollbar-width: thin;
}

.xb-history__body:focus-visible {
  outline: var(--border) solid var(--history-rule);
  outline-offset: 4px;
}

.xb-history__list {
  max-width: 1000px;
  margin: 0 auto;
}

.xb-history__chapter {
  margin: 28px 0 14px;
  padding-bottom: 8px;
  font-family: var(--font-title);
  font-size: 20px;
  letter-spacing: 6px;
  color: var(--paper-a72);
  border-bottom: var(--border) solid var(--history-rule);
}

.xb-history__chapter:first-child {
  margin-top: 0;
}

.xb-history__row {
  display: grid;
  grid-template-columns: 200px 1px minmax(0, 1fr);
  column-gap: 24px;
  padding: 9px 0;
}

.xb-history__speaker {
  margin: 0;
  font-size: 20px;
  line-height: 1.85;
  text-align: right;
  color: var(--history-speaker);
}

.xb-history__rule {
  width: 1px;
  background: var(--history-rule);
}

.xb-history__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.9;
  color: var(--paper-hi);
}

/* 玩家的选择是整页唯一的金色，且加粗；加 ➤ 与参考图的选择行对齐。 */
.xb-history__text.is-choice {
  color: var(--history-choice);
  font-weight: 700;
}

.xb-history__arrow {
  margin-right: 10px;
  font-family: var(--font-display);
  font-size: 18px;
}

.xb-history__meta {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--paper-a72);
}

.xb-history__row--prompt {
  display: block;
  padding: 12px 0 2px 249px;
}

.xb-history__prompt {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--history-prompt);
}

.xb-history__empty {
  max-width: 1000px;
  margin: 64px auto 0;
  font-size: 18px;
  color: var(--paper-a72);
}

/* 844×390 覆盖必须放在基础回顾样式之后：同优先级下后写生效。 */
@media (max-height: 500px) and (orientation: landscape) {
  .xb-history__panel {
    padding: 20px 28px;
  }

  .xb-history__head {
    height: 74px;
  }

  .xb-history__seal {
    width: 5px;
    height: 36px;
  }

  .xb-history__title {
    font-size: 42px;
    letter-spacing: 5px;
  }

  .xb-history__close {
    right: 16px;
    top: 8px;
    width: 82px;
    height: 82px;
    font-size: 40px;
  }

  .xb-history__body {
    margin-top: 8px;
    padding: 8px 8px 24px;
  }

  .xb-history__chapter {
    margin: 18px 0 8px;
    font-size: 26px;
    letter-spacing: 4px;
  }

  .xb-history__row {
    grid-template-columns: 150px 1px minmax(0, 1fr);
    column-gap: 14px;
    padding: 7px 0;
  }

  .xb-history__speaker {
    font-size: 24px;
    line-height: 1.6;
  }

  .xb-history__text {
    font-size: 28px;
    line-height: 1.65;
  }

  .xb-history__arrow {
    margin-right: 8px;
    font-size: 20px;
  }

  .xb-history__meta {
    font-size: 18px;
  }

  .xb-history__row--prompt {
    padding: 8px 0 0 179px;
  }

  .xb-history__prompt {
    font-size: 22px;
    line-height: 1.5;
  }

  .xb-history__empty {
    margin-top: 32px;
    font-size: 22px;
  }
}

/* ---------- 存档：标题入口、列表、确认弹窗（v1.6） ---------- */.xb-saves {
  position: absolute;
  inset: 0;
  z-index: var(--z-saves);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.xb-saves__panel {
  position: relative;
  box-sizing: border-box;
  width: 920px;
  max-height: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 32px 20px;
  background-color: var(--paper-hi);
  background-image: var(--paper-texture);
  border: var(--border-strong) solid var(--ink);
  border-top: var(--border-accent) solid var(--cinnabar);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow);
}

.xb-saves.is-chapter {
  z-index: var(--z-branch-detail);
}

.xb-saves__panel.is-chapter {
  width: 980px;
}

.xb-saves__panel.is-chapter .xb-saves__title {
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: 2px;
}

.xb-saves__panel.is-chapter .xb-saves__actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xb-saves__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 56px;
}

.xb-saves__kicker {
  margin: 0;
  font-size: var(--fs-small);
  letter-spacing: 3px;
  color: var(--cinnabar);
}

.xb-saves__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: var(--ls-chapter);
}

.xb-saves__count {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.xb-saves__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.xb-saves__actions .xb-btn {
  min-height: 84px;
  font-size: 18px;
}

.xb-saves__list-wrap {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
}

.xb-saves__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xb-saves__row {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 12px 16px;
  text-align: left;
  background: var(--paper);
  border: var(--border) solid var(--ink-a20);
  border-left: 6px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.xb-saves__row:hover,
.xb-saves__row:focus-visible {
  border-color: var(--ink);
}

.xb-saves__row:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-w) var(--focus-color),
    0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--focus-gap);
}

.xb-saves__row.is-unavailable {
  border-style: dashed;
  opacity: 0.55;
  cursor: not-allowed;
}

.xb-saves__row.is-unavailable:hover {
  border-color: var(--ink-a20);
}

.xb-saves__row-main {
  max-width: 100%;
  font-size: var(--fs-body);
  line-height: 1.45;
  letter-spacing: 1px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.xb-saves__row-sub {
  max-width: 100%;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

/* 删除模式：整行变墨色底纸白字，左上角朱砂条 + 勾，选中一眼可辨 */
.xb-saves__row.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  border-left-color: var(--cinnabar);
}

.xb-saves__row.is-selected .xb-saves__row-main {
  color: var(--paper-hi);
}

.xb-saves__row.is-selected .xb-saves__row-sub {
  color: var(--paper-a72);
}

.xb-saves__row.is-selected::after {
  content: "✓";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-num);
  font-size: 24px;
  color: var(--cinnabar);
}

.xb-saves__empty {
  margin: 0;
  padding: 28px 24px;
  font-size: var(--fs-body);
  color: var(--ink-muted);
  text-align: center;
  border: var(--border) dashed var(--ink-a30);
  border-radius: var(--radius);
}

.xb-saves__delete-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: var(--border) solid var(--ink-a12);
}

.xb-saves__delete-count {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.xb-saves__delete-actions {
  display: flex;
  gap: 10px;
}

.xb-saves__delete-actions .xb-btn {
  min-width: 160px;
  min-height: 64px;
}

.xb-saves__hint {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.xb-save-confirm {
  z-index: var(--z-save-confirm);
}

.xb-save-confirm .xb-door {
  width: 560px;
}

.xb-save-confirm .xb-door__body[hidden] {
  display: none;
}

.xb-save-confirm .xb-danger__actions {
  justify-content: flex-end;
}

.xb-save-confirm .xb-danger__actions .xb-btn {
  min-width: 160px;
}

@media (max-height: 500px) and (orientation: landscape) {
  .xb-saves__panel {
    width: 1240px;
    height: 688px;
    max-height: 688px;
    padding: 18px 28px 14px;
    gap: 10px;
  }
  .xb-saves__panel.is-chapter { width: 1240px; }
  .xb-saves__panel.is-chapter .xb-saves__title { font-size: 34px; }
  .xb-saves__kicker { font-size: 16px; letter-spacing: 3px; }
  .xb-saves__title { font-size: 42px; }
  .xb-saves__count { font-size: 20px; }
  .xb-saves__actions { gap: 10px; }
  .xb-saves__actions .xb-btn { min-height: 82px; font-size: 22px; }
  .xb-saves__row { min-height: 96px; padding: 10px 16px; }
  .xb-saves__row-main { font-size: 26px; }
  .xb-saves__row-sub { font-size: 18px; }
  .xb-saves__row.is-selected::after { font-size: 28px; }
  .xb-saves__delete-count { font-size: 20px; }
  .xb-saves__delete-actions .xb-btn { min-height: 82px; font-size: 22px; }
  .xb-saves__hint { font-size: 18px; }
  .xb-saves__empty { font-size: 22px; }
  .xb-save-confirm .xb-door { width: 760px; }
  .xb-save-confirm .xb-door__body { font-size: 26px; }
  .xb-save-confirm .xb-danger__actions .xb-btn { min-height: 82px; font-size: 22px; }
}