/* game.css —— 有匪 · 第一卷
   职责：配色变量、字体、舞台分层、对白框/HUD 基础样式、竖屏提示。
   逻辑分辨率固定 1920×1080，由 js/stage.js 负责等比缩放。 */

:root {
  --ink: #141210;        /* 墨黑，主文字背景 */
  --ink-2: #2a2724;
  --paper: #efe9d8;      /* 宣纸白，主文字色 */
  --paper-dim: #b9b2a2;
  --gold: #b89a5a;       /* 暗金，细线、人名、强调 */
  --gold-dim: #7a6a45;
  --ochre: #8b6a45;      /* 赭石 */
  --azurite: #3d5a6b;    /* 石青 */
  --blood: #8f3a32;      /* 气血条 */
  --silk: #0f1a22;       /* 绢帛底（B 皮肤） */
  --brass: #c9a45c;      /* 铜金（B 皮肤） */
  --seal: #a3322a;       /* 朱砂（B 皮肤） */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  font-family: var(--font-serif);
  color: var(--paper);
  -webkit-tap-highlight-color: transparent;
}

/* 触屏命中与字号下限由 stage.js 按缩放比例写入舞台变量。 */
button {
  min-width: var(--min-hit, var(--btn-min, 0px));
  min-height: var(--min-hit, var(--btn-min, 0px));
}

/* ---------- 舞台外框（letterbox 容器） ---------- */
#stage-outer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  overflow: hidden;
  /* 刘海屏安全区 */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* ---------- 逻辑舞台 1920×1080 ---------- */
#stage {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  font-size: var(--min-font, 16px);
  transform-origin: top left;
  overflow: hidden;
}

/* ---------- 分层（z-index 从低到高：bg < fog < chars < vignette < hud < screen < dialog < overlay < top） ---------- */
.layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.layer.bg       { z-index: 0; }
.layer.fog      { z-index: 1; pointer-events: none; }
.layer.ambient  { z-index: 1; pointer-events: none; } /* DOM 在 fog 之后 → 覆盖雾，仍在 chars 之下 */
.layer.chars    { z-index: 2; }
.layer.vignette { z-index: 3; pointer-events: none; }
.layer.tone     { z-index: 3; pointer-events: none; background: #000; opacity: 0; transition: opacity 1.5s ease; }
.layer.hud      { z-index: 4; pointer-events: none; }
.layer.screen   { z-index: 5; pointer-events: none; } /* 战斗/解谜/CG 画面（在 dialog 之下） */
.layer.dialog   { z-index: 6; pointer-events: none; }
.layer.overlay  { z-index: 7; pointer-events: none; }
.layer.top      { z-index: 8; pointer-events: none; } /* 常驻最上层（菜单按钮） */

/* ---------- 镜头包裹层（第 15.2 节）：包住 bg/fog/chars，镜头变换作用其上 ---------- */
#cam-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  will-change: transform;
}

/* 覆盖层里的全屏/弹窗界面恢复可点击 */
.card-chapter, .card-interlude, .card-end,
.card-summary,
.battle-screen, .puzzle-screen, .title-screen,
.map-overlay, .backlog-panel, .confirm-overlay,
.ui-panel, .choice-box { pointer-events: auto; }

/* ---------- bg 层：双槽交叉淡化 ---------- */
.layer.bg .bg-slot {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.layer.bg .bg-slot.active { opacity: 1; }

/* 背景 Ken Burns 缓慢推移（第 15.3 节）：幅度/方向由 JS 设 --drift-* 变量 */
@keyframes kb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(var(--drift-x, 0px), var(--drift-y, 0px)) scale(var(--drift-scale, 1.04)); }
}

/* ---------- fog 层：两层半透明漂移雾 ---------- */
.fog-layer {
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat;
}
.fog-a { animation: fogDriftA 60s linear infinite; opacity: 0.15; }
.fog-b { animation: fogDriftB 90s linear infinite; opacity: 0.30; }
/* 雾纹理宽 960px，平移整周期（960px）即无缝循环 */
@keyframes fogDriftA { from { transform: translateX(0); }    to { transform: translateX(-960px); } }
@keyframes fogDriftB { from { transform: translateX(-960px); } to { transform: translateX(0); } }

/* ---------- chars 层：三个站位 ---------- */
.char-slot {
  position: absolute;
  bottom: 0;
  height: 92%;
  transform: translateX(-50%);
}
.char-slot.left   { left: 22%; }
.char-slot.center { left: 50%; }
.char-slot.right  { left: 78%; }
.char-slot img {
  height: 100%;
  width: auto;
  display: block;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
}

/* ---------- vignette 层：电影感暗角 + 上下黑边 ---------- */
.layer.vignette {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,0.42) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 6%,
      rgba(0,0,0,0) 94%, rgba(0,0,0,0.35) 100%);
}

/* ---------- HUD：时间题签（左上）、竖排地名（右上） ---------- */
#hud-time {
  position: absolute;
  top: 30px; left: 44px;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.2em;
}
#hud-place-wrap {
  position: absolute;
  top: 44px; right: 44px;
}
#hud-place {
  writing-mode: vertical-rl;
  font-size: 36px;
  color: var(--paper);
  letter-spacing: 0.3em;
  border-left: 1px solid var(--gold);
  padding-left: 14px;
  line-height: 1.2;
}

/* ---------- dialog 层 / overlay 层（任务 1 为空，占位） ---------- */

/* ---------- 按钮基础样式（克制、细金线，供后续界面复用） ---------- */
.btn {
  font-family: var(--font-serif);
  color: var(--paper);
  background: transparent;
  border: 0.8px solid var(--gold);
  padding: 10px 28px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.btn:hover { background: rgba(184, 154, 90, 0.12); }

/* ---------- 手机竖屏提示 ---------- */
#portrait-prompt {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  color: var(--paper);
  font-family: var(--font-serif);
}
#portrait-prompt.show { display: flex; }
#rotate-icon {
  width: 80px;
  height: 120px;
  border: 2px solid var(--gold);
  border-radius: 10px;
  position: relative;
  animation: rotatePhone 2s ease-in-out infinite;
}
#rotate-icon::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
}
#rotate-icon::after {
  content: "";
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 3px;
  background: var(--gold-dim);
  border-radius: 2px;
}
@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}
#portrait-prompt .portrait-text {
  font-size: 30px;
  letter-spacing: 0.3em;
}

/* ---------- 舞台震动容器 ---------- */
#shake-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
#shake-wrap.fx-shake { animation: shakeAnim 350ms linear; }
@keyframes shakeAnim {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 4px); }
  40% { transform: translate(9px, -6px); }
  60% { transform: translate(-7px, -3px); }
  80% { transform: translate(6px, 5px); }
}
#shake-wrap.memory { filter: sepia(0.5) contrast(0.9); }
#shake-wrap.cam-desat { filter: saturate(0.55); }

/* ---------- 对白框 ---------- */
.dlg-box {
  position: absolute;
  left: 50%; bottom: 40px;
  transform: translateX(-50%);
  width: 1360px;
  min-height: 220px;
  padding: 24px 44px 16px;
  background: linear-gradient(to bottom, rgba(10, 9, 8, 0), rgba(10, 9, 8, 0.78));
}
.dlg-name-line {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.dlg-name-line::before,
.dlg-name-line::after {
  content: "";
  height: 0.8px;
  background: var(--gold);
  opacity: 0.8;
  flex: 1;
}
.dlg-name {
  color: var(--gold);
  letter-spacing: 0.4em;
  font-size: 26px;
  padding: 0 6px;
  white-space: nowrap;
}
.dlg-text {
  font-size: 34px;
  line-height: 1.8;
  min-height: 96px;
}
.dlg-text.dlg-say { color: var(--paper); text-align: left; }
.dlg-text.dlg-think { color: var(--paper-dim); font-style: italic; }
.dlg-text.dlg-narr { color: var(--paper-dim); text-align: center; letter-spacing: 0.15em; }
/* say 样式（第 15.1 节） */
.dlg-text.dlg-style-whisper { font-size: 28px; color: var(--paper-dim); letter-spacing: 0.08em; opacity: 0.86; }
.dlg-text.dlg-style-shout { font-size: 44px; font-weight: bold; }
.dlg-text.dlg-style-cold { letter-spacing: 0.2em; color: #cfd8d6; }
.dlg-next {
  position: absolute;
  right: 34px; bottom: 14px;
  color: var(--paper);
  font-size: 20px;
  animation: blinkNext 1s ease-in-out infinite;
}
@keyframes blinkNext { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* shout 对话框震动（第 15.1 节） */
.dlg-box.dlg-shake { animation: dlgShake 200ms ease; }
@keyframes dlgShake {
  0%, 100% { transform: translateX(-50%) translate(0, 0); }
  25% { transform: translateX(-50%) translate(-4px, 2px); }
  50% { transform: translateX(-50%) translate(3px, -2px); }
  75% { transform: translateX(-50%) translate(-2px, -1px); }
}

/* 竖排旁白（narr.vertical，第 15.1 节）：舞台右侧 1/3 古籍批注样式 */
.narr-vertical {
  position: absolute;
  top: 0; right: 0;
  width: 33.333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 40px;
  pointer-events: none;
  background: rgba(10, 14, 18, 0.62);
  border: 0.8px solid var(--gold);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.narr-vertical-text {
  writing-mode: vertical-rl;
  font-size: 36px;
  line-height: 2;
  color: var(--paper);
  letter-spacing: 0.25em;
  max-height: 100%;
}

/* ---------- 选项 ---------- */
.choice-box {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.choice-btn {
  font-family: var(--font-serif);
  color: var(--paper);
  background: rgba(10, 9, 8, 0.6);
  border: 0.8px solid var(--gold);
  padding: 14px 60px;
  font-size: 28px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.choice-btn:hover { background: rgba(184, 154, 90, 0.18); }

/* ---------- 章节卡 ---------- */
.card-chapter {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 70px;
  background: var(--paper);
  transition: opacity 600ms ease;
}
.card-chapter-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, #e9e1cd, #efe9d8 62%, #d9d0ba);
}
.card-chapter-bg::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(120, 118, 108, 0), rgba(120, 118, 108, 0.16));
}
.card-chapter-cols {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 130px;
}
.cc-col { writing-mode: vertical-rl; color: var(--ink); }
.cc-big { font-size: 104px; letter-spacing: 0.22em; white-space: nowrap; }
.cc-small { font-size: 34px; letter-spacing: 0.35em; color: #3a3530; white-space: nowrap; }
.card-seal {
  position: relative;
  width: 88px; height: 88px;
  border: 3px solid #a33028;
  color: #a33028;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  writing-mode: vertical-rl;
}

/* ---------- 插叙卡 / 结尾卡 ---------- */
.card-interlude {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 500ms ease;
}
.interlude-line { display: flex; align-items: center; gap: 32px; }
.interlude-rule { width: 90px; height: 1px; background: var(--gold); }
.interlude-text { color: var(--paper); font-size: 40px; letter-spacing: 0.2em; }

.card-end {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
}
.end-text, .end-next, .end-btn { opacity: 0; transition: opacity 800ms ease; }
.end-text.show, .end-next.show, .end-btn.show { opacity: 1; }
.end-text { color: var(--paper); font-size: 44px; letter-spacing: 0.2em; }
.end-next { color: var(--paper-dim); font-size: 28px; letter-spacing: 0.25em; }

/* 卡片通用淡出 */
.fade-out { opacity: 0; }

/* ---------- 右上角提示 ---------- */
.toast-wrap {
  position: absolute;
  top: 120px; right: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.toast {
  color: var(--gold);
  font-size: 22px;
  letter-spacing: 0.15em;
  background: rgba(10, 9, 8, 0.55);
  border: 0.8px solid var(--gold);
  padding: 10px 22px;
  opacity: 0;
  transition: opacity 300ms ease;
}
.toast.show { opacity: 1; }

/* ---------- 回顾记录 ---------- */
.backlog-panel {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 9, 8, 0.86);
  display: flex;
  justify-content: center;
  padding: 80px 0;
}
.backlog-inner {
  width: 100%;
  overflow-y: auto; /* 非皮肤模式自行滚动 */
  padding: 0;
}
body.has-skin .backlog-inner { overflow: visible; } /* 皮肤模式滚动由面板画心负责 */
.backlog-item { margin-bottom: 14px; line-height: 1.7; } /* 每条记录间距 14px */
.backlog-name { color: var(--brass); margin-right: 16px; letter-spacing: 0.15em; }
.backlog-text { color: var(--paper); font-size: 28px; }

/* ---------- CG ---------- */
.cg-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
}
.cg-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  animation: kenburns 8s ease-out forwards;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.cg-title {
  position: absolute;
  left: 50%; bottom: 120px;
  transform: translateX(-50%);
  color: var(--paper);
  font-size: 34px;
  letter-spacing: 0.3em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ---------- 人物登场特写（第 15.4 节） ---------- */
.intro-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: auto;
  overflow: hidden;
  transition: opacity 400ms ease;
}
.intro-layer.out { opacity: 0; }

.intro-dim {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #000; opacity: 0;
  transition: opacity 400ms ease;
}
.intro-layer.in .intro-dim { opacity: 0.65; }

.intro-bar {
  position: absolute; left: 0; width: 100%; height: 12%;
  background: #000;
  transition: transform 400ms ease;
}
.intro-bar-top { top: 0; transform: translateY(-100%); }
.intro-bar-bottom { bottom: 0; transform: translateY(100%); }
.intro-layer.in .intro-bar-top { transform: translateY(0); }
.intro-layer.in .intro-bar-bottom { transform: translateY(0); }

.intro-portrait {
  position: absolute;
  width: auto;
  opacity: 0;
  transition: opacity 600ms ease;
}
.intro-portrait.show { opacity: 1; }

.intro-right {
  position: absolute;
  right: 80px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 34px;
}
.intro-title {
  writing-mode: vertical-rl;
  font-size: 30px;
  color: var(--gold);
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.intro-name {
  writing-mode: vertical-rl;
  font-size: 132px;
  color: var(--paper);
  letter-spacing: 0.3em;
  white-space: nowrap;
  line-height: 1;
}
.intro-name-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 120ms ease, transform 120ms ease;
}
.intro-name-char.show { opacity: 1; transform: scale(1); }
.intro-seal {
  width: 56px; height: 56px;
  border: 2px solid #a33028;
  color: #a33028;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  writing-mode: vertical-rl;
  align-self: flex-end;
  margin-bottom: 40px;
  flex-shrink: 0;
}
.intro-line {
  position: absolute;
  left: 50%; bottom: 46px;
  transform: translateX(-50%);
  font-size: 34px;
  color: var(--paper);
  letter-spacing: 0.15em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 500ms ease;
}
.intro-line.show { opacity: 1; }

/* ---------- 特效 ---------- */
.fx-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.fx-flash {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #fff;
  animation: flashAnim 120ms ease-out forwards;
}
@keyframes flashAnim { from { opacity: 0.9; } to { opacity: 0; } }

/* cam.hurt 受击：全屏红色暗角脉冲（第 15.2 节） */
.fx-hurt {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(143, 58, 50, 0) 42%, rgba(143, 58, 50, 0.45) 100%);
  animation: hurtPulse 500ms ease-out forwards;
}
@keyframes hurtPulse { 0% { opacity: 0.5; } 100% { opacity: 0; } }

.fx-slash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.fx-slash::before {
  content: "";
  position: absolute;
  left: 20%; top: -15%;
  width: 7px; height: 130%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9), rgba(255,255,255,0));
  transform: rotate(26deg);
  animation: slashAnim 250ms ease-out forwards;
}
@keyframes slashAnim {
  from { transform: rotate(26deg) translateX(-200px); opacity: 0; }
  25% { opacity: 1; }
  to { transform: rotate(26deg) translateX(700px); opacity: 0; }
}

.fx-whip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.fx-whip::before {
  content: "";
  position: absolute;
  left: 18%; top: 22%;
  width: 42%; height: 50%;
  border-left: 5px solid rgba(160, 40, 40, 0.7);
  border-radius: 50%;
  transform: rotate(12deg);
  animation: whipAnim 300ms ease-out forwards;
}
@keyframes whipAnim { from { opacity: 0; } 30% { opacity: 1; } to { opacity: 0; } }

.fx-throw {
  position: absolute;
  left: -20px; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.6);
  animation: throwAnim 400ms ease-in forwards;
}
@keyframes throwAnim { from { left: -20px; opacity: 1; } to { left: 46%; opacity: 0; } }

.fx-coin {
  position: absolute;
  left: 50%; top: 40%;
  width: 80px; height: 80px;
  margin-left: -40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8c08a, #b89a5a);
  border: 2px solid #8a6a3a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: coinAnim 1200ms ease-in-out forwards;
}
.fx-coin::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  background: #6a4a2a;
}
@keyframes coinAnim {
  0% { transform: translateY(220px) rotate(0); opacity: 0; }
  30% { transform: translateY(-80px) rotate(720deg); opacity: 1; }
  60% { transform: translateY(0) rotate(1080deg); }
  80% { transform: translateY(-12px); }
  100% { transform: translateY(0) rotateX(78deg); }
}

.fx-flare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.fx-flare::before {
  content: "";
  position: absolute;
  left: 50%; top: -60px;
  width: 420px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(120, 220, 180, 0.7), rgba(120, 220, 180, 0));
  animation: flareAnim 2000ms ease-out forwards;
}
@keyframes flareAnim { from { opacity: 1; } to { opacity: 0; transform: translateX(-50%) translateY(320px); } }
.flare-dot {
  position: absolute;
  top: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(140, 235, 195, 0.85);
  animation: flareDotAnim 1900ms ease-in forwards;
}
@keyframes flareDotAnim { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(560px); opacity: 0; } }

.fx-crush { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; overflow: hidden; }
.fx-crush span {
  position: absolute;
  bottom: 0;
  width: 8px; height: 8px;
  background: var(--paper-dim);
  border-radius: 2px;
  animation: crushAnim 500ms ease-out forwards;
}
@keyframes crushAnim {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx, 0), -46px) rotate(100deg); opacity: 0; }
}

.fx-flute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.fx-flute span {
  position: absolute;
  width: 3px; height: 42px;
  background: var(--gold);
  opacity: 0;
  animation: fluteAnim 1800ms ease-out forwards;
}
@keyframes fluteAnim { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(-320px); opacity: 0; } }

/* ---------- 标题画面 ---------- */
.title-screen {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
}
.title-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  animation: titleZoom 32s ease-in-out infinite alternate;
}
@keyframes titleZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.title-right {
  position: absolute;
  top: 50%; right: 130px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 46px;
  align-items: flex-end;
}
.title-big {
  writing-mode: vertical-rl;
  font-size: 150px;
  letter-spacing: 0.22em;
  color: var(--paper);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.title-small {
  writing-mode: vertical-rl;
  font-size: 32px;
  letter-spacing: 0.3em;
  color: var(--paper-dim);
  white-space: nowrap;
}
.title-btns {
  position: absolute;
  left: 120px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.title-btns .ui-btn { color: var(--paper); min-width: 220px; }

/* 多卷选择 */
.volume-picker {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 12, 0.78);
  pointer-events: auto;
}
.volume-picker-box {
  width: 820px;
  max-height: 820px;
  padding: 54px 70px;
  color: var(--paper);
  background: rgba(21, 27, 31, 0.96);
  border: 1px solid var(--gold);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
}
.volume-picker-title {
  margin-bottom: 34px;
  text-align: center;
  font-size: 38px;
  letter-spacing: 0.28em;
  color: var(--gold);
}
.volume-picker-list { display: flex; flex-direction: column; gap: 18px; }
.volume-option {
  min-height: 104px;
  padding: 16px 28px;
  font: 28px/1.5 var(--font-serif);
  letter-spacing: 0.12em;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(184, 154, 90, 0.7);
  cursor: pointer;
}
.volume-option:hover { background: rgba(184, 154, 90, 0.14); }
.volume-option.locked { opacity: 0.45; cursor: default; }
.volume-option-name, .volume-option-hint { display: block; }
.volume-option-hint { margin-top: 5px; font-size: 20px; color: var(--paper-dim); }
.volume-picker-close { display: block; margin: 34px auto 0; color: var(--paper); }

/* ---------- 右上角菜单按钮 ---------- */
.menu-btn {
  position: absolute;
  top: 42px; right: 130px;
  font-family: var(--font-serif);
  color: var(--paper);
  background: transparent;
  border: 0.8px solid var(--gold);
  font-size: 24px;
  letter-spacing: 0.2em;
  padding: 6px 18px;
  cursor: pointer;
}
.menu-btn:hover { background: rgba(184, 154, 90, 0.12); }

/* 喇叭按钮（静音开关） */
.speaker-btn {
  position: absolute;
  top: 42px; right: 70px;
  font-family: var(--font-serif);
  color: var(--paper);
  background: transparent;
  border: 0.8px solid var(--gold);
  font-size: 24px;
  padding: 4px 14px;
  cursor: pointer;
}
.speaker-btn:hover { background: rgba(184, 154, 90, 0.12); }
.speaker-btn.muted { text-decoration: line-through; opacity: 0.55; }

/* 战斗/解谜时改到顶部中央，不遮挡右上角状态数字。 */
#stage:has(.battle-screen) .menu-btn,
#stage:has(.puzzle-screen) .menu-btn {
  top: 16px;
  right: auto;
  left: calc(50% - 6px);
  transform: translateX(-100%);
}
#stage:has(.battle-screen) .speaker-btn,
#stage:has(.puzzle-screen) .speaker-btn {
  top: 16px;
  right: auto;
  left: calc(50% + 6px);
}
#stage:has(.puzzle-screen) .puzzle-title {
  top: max(72px, calc(28px + var(--min-hit, 44px)));
}

/* 战斗期间：敌方一侧右移让位（margin-right 把整侧左推 ≥260px），使右上角按钮不再压住敌方气血数值。 */
body.in-battle .battle-side-right { margin-right: 260px; }

/* ---------- 弹窗面板（宣纸底 + 暗金细线框） ---------- */
.ui-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 940px;
  max-height: 86%;
  overflow-y: auto;
  background: rgba(239, 233, 216, 0.95);
  border: 0.8px solid var(--gold);
  padding: 40px 52px;
  color: var(--ink);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.panel-title {
  font-size: 40px;
  letter-spacing: 0.3em;
  color: var(--ink);
}
.panel-empty {
  text-align: center;
  font-size: 26px;
  color: var(--gold-dim);
  padding: 60px 0;
  letter-spacing: 0.1em;
}

.ui-btn {
  font-family: var(--font-serif);
  color: var(--ink);
  background: transparent;
  border: 0.8px solid var(--gold);
  padding: 12px 30px;
  font-size: 24px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.ui-btn:hover { background: rgba(184, 154, 90, 0.15); }
.ui-btn.active { background: rgba(184, 154, 90, 0.28); }

.menu-list { display: flex; flex-direction: column; gap: 16px; }
.menu-list .ui-btn { width: 100%; text-align: center; }

/* ---------- 存档 / 读档 ---------- */
.slot-list { display: flex; flex-direction: column; gap: 14px; }
.slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 0.8px solid var(--gold-dim);
  padding-bottom: 14px;
}
.slot-info { font-size: 24px; color: var(--ink); flex: 1; }
.slot-empty { text-align: center; font-size: 24px; color: var(--gold-dim); padding: 30px 0; }

/* ---------- 设置 ---------- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.settings-column { min-width: 0; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 0.8px solid var(--gold-dim);
  padding: 18px 0;
}
.settings-label { font-size: 26px; letter-spacing: 0.15em; color: var(--ink); }
.settings-options { display: flex; gap: 12px; }
/* 绢帛皮肤：每行下面用 uis_divider 分隔，最后一行不加；缺图回退 1px 暗金线 */
body.has-skin .settings-row {
  border-bottom: 1px solid var(--gold-dim);
  background: url(../美术素材/uis_divider.png) center bottom / 100% 14px no-repeat;
  padding: 18px 0 28px;
}
body.has-skin .settings-row:last-child { background: none; }

/* ---------- 二次确认 ---------- */
.confirm-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(6, 10, 14, 0.62); /* 一致遮罩色 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-box {
  width: 620px;
  background: rgba(239, 233, 216, 0.97);
  border: 0.8px solid var(--gold);
  padding: 44px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.confirm-text { font-size: 26px; letter-spacing: 0.1em; text-align: center; }
.confirm-btns { display: flex; gap: 20px; }

/* 绢帛皮肤：二次确认框用 uis_dlg_panel，按钮用 uis_choice，四角 uis_corner */
body.has-skin .confirm-box {
  position: relative; /* 供四角点缀绝对定位 */
  width: 900px;
  height: 400px;
  background: url(../美术素材/uis_dlg_panel.png) center / 100% 100% no-repeat;
  border: none;
  color: var(--paper);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 整体在底板里垂直居中 */
  gap: 40px;
}
body.has-skin .confirm-text { font-size: 32px; color: var(--paper); padding: 0 100px; text-align: center; }
body.has-skin .confirm-btns { display: flex; gap: 40px; justify-content: center; }
/* 提高优先级（body.has-skin .confirm-box .confirm-btn.ui-btn）以盖过靠后且同级的
   body.has-skin .ui-btn（其 background 会清掉 uis_choice 牌子）。 */
body.has-skin .confirm-box .confirm-btn.ui-btn {
  width: 300px; height: 90px;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat !important;
  border: none !important;
  color: #f1e3b8 !important;
  font-size: 30px !important;
  display: flex; align-items: center; justify-content: center;
}
body.has-skin .confirm-box .confirm-btn.ui-btn:hover {
  background-image: url(../美术素材/uis_choice_hot.png) !important;
}
.ui-corner {
  position: absolute;
  width: 90px; height: 90px;
  background: url(../美术素材/uis_corner.png) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 5;
}
.ui-corner-tl { top: 0; left: 0; }
.ui-corner-tr { top: 0; right: 0; transform: scale(-1, 1); }
.ui-corner-bl { bottom: 0; left: 0; transform: scale(1, -1); }
.ui-corner-br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* ---------- 自由时段 ---------- */
.free-banner {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 24px;
  letter-spacing: 0.2em;
  background: rgba(10, 9, 8, 0.6);
  border: 0.8px solid var(--gold);
  padding: 10px 30px;
  pointer-events: none;
  white-space: nowrap;
}
.free-hotspots {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.hotspot { position: absolute; cursor: pointer; }

.hotspot-dot {
  position: absolute;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(184, 154, 90, 0.9);
  opacity: 0;
  transition: opacity 200ms ease;
}
.hotspot-seal {
  position: absolute;
  left: 50%; top: 20%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border: 1.5px solid #a33028;
  color: #a33028;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms ease;
}
.hotspot-label {
  position: absolute;
  left: 50%; top: 52%;
  transform: translateX(-50%);
  color: var(--paper);
  font-size: 20px;
  letter-spacing: 0.1em;
  background: rgba(10, 9, 8, 0.55);
  padding: 4px 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
}
.hotspot:hover .hotspot-dot,
.hotspot:hover .hotspot-seal,
.hotspot:hover .hotspot-label { opacity: 1; }

.hotspot-npc-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  transition: filter 200ms ease;
}
.hotspot-npc:hover .hotspot-npc-img { filter: brightness(1.25); }
.hotspot-name {
  position: absolute;
  left: 50%; top: -8px;
  transform: translate(-50%, -100%);
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 0.15em;
  background: rgba(10, 9, 8, 0.55);
  padding: 2px 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
}
.hotspot-npc:hover .hotspot-name { opacity: 1; }

.hotspot-arrow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 15px solid var(--paper);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  opacity: 0.55;
}
.hotspot-exit .hotspot-label {
  position: absolute;
  left: 50%; top: 62%;
  transform: translateX(-50%);
  color: var(--paper);
  font-size: 20px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.7;
}

/* 触屏设备常显标签 */
.is-touch .hotspot-dot,
.is-touch .hotspot-seal,
.is-touch .hotspot-label,
.is-touch .hotspot-name { opacity: 1; }

/* 地图按钮（左下角常驻） */
.map-btn {
  position: absolute;
  left: 30px; bottom: 30px;
  font-family: var(--font-serif);
  color: var(--paper);
  background: transparent;
  border: 0.8px solid var(--gold);
  font-size: 22px;
  letter-spacing: 0.2em;
  padding: 8px 22px;
  cursor: pointer;
}
.map-btn:hover { background: rgba(184, 154, 90, 0.12); }
.map-btn.locked { opacity: 0.4; color: var(--paper-dim); }

/* 卷轴地图 */
.map-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 9, 8, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-scroll {
  position: relative;
  width: 1440px;
  max-width: 92%;
  max-height: 88%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background: linear-gradient(to bottom, #e9e1cd, #efe9d8 70%, #d9d0ba);
  border: 0.8px solid var(--gold);
  padding: 46px 60px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
.map-scroll::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(to bottom, rgba(120, 118, 108, 0), rgba(120, 118, 108, 0.15));
  pointer-events: none;
}
.map-title {
  position: relative;
  text-align: center;
  font-size: 32px;
  letter-spacing: 0.3em;
  color: var(--ink);
  margin-bottom: 30px;
}
.map-current-region {
  position: sticky;
  top: 0;
  z-index: 2;
  width: max-content;
  margin: -20px 0 -30px;
  padding: 8px 14px;
  color: #7f241f;
  background: rgba(239, 233, 216, 0.9);
  border-left: 3px solid #a33028;
  font-size: 22px;
  letter-spacing: 0.16em;
}
.map-regions { position: relative; display: flex; flex-direction: column; gap: 28px; }
.map-region-group { position: relative; padding-top: 28px; border-top: 1px solid rgba(127, 91, 61, 0.28); }
.map-region-group:first-child { border-top: 0; }
.map-region-name {
  margin-bottom: 16px;
  color: #5b4938;
  font-size: 22px;
  letter-spacing: 0.22em;
}
.map-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.map-seal {
  position: relative;
  font-family: var(--font-serif);
  color: #a33028;
  background: transparent;
  border: 2px solid #a33028;
  padding: 20px 26px;
  font-size: 24px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 200ms ease;
  min-height: 78px;
}
.map-seal:hover { background: rgba(163, 48, 40, 0.12); }
.map-seal.active { background: rgba(163, 48, 40, 0.18); box-shadow: inset 0 0 0 2px #a33028; }
.map-close { position: relative; display: block; margin: 44px auto 0; }

/* 摘要事件：一屏压缩叙事 */
.card-summary {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101214;
  cursor: pointer;
  transition: opacity 450ms ease;
}
.summary-bg {
  position: absolute;
  inset: -32px;
  background-size: cover;
  background-position: center;
  filter: blur(10px) saturate(0.65);
  transform: scale(1.06);
}
.summary-shade { position: absolute; inset: 0; background: rgba(8, 10, 12, 0.72); }
.summary-lines {
  position: relative;
  z-index: 1;
  width: min(1320px, 78%);
  text-align: center;
  color: var(--paper);
  font-size: 34px;
  line-height: 1.9;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}
.summary-line { opacity: 0; transform: translateY(10px); transition: opacity 600ms ease, transform 600ms ease; }
.summary-line.show { opacity: 1; transform: translateY(0); }
.card-summary.no-fx, .card-summary.no-fx .summary-line { transition: none; }

/* ---------- 江湖见闻图鉴 ---------- */
.codex-top {
  text-align: center;
  font-size: 24px;
  color: var(--gold-dim);
  margin-bottom: 24px;
  letter-spacing: 0.15em;
}
.codex-body { display: flex; gap: 24px; }
.codex-cats { display: flex; flex-direction: column; gap: 10px; width: 140px; flex-shrink: 0; }
.codex-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 230px;
  flex-shrink: 0;
  max-height: 520px;
  overflow-y: auto;
}
.codex-item { text-align: left; width: 100%; }
.codex-item.locked { color: var(--gold-dim); opacity: 0.7; cursor: default; }
.codex-detail { flex: 1; min-width: 0; }
.codex-detail-title { font-size: 30px; letter-spacing: 0.2em; color: var(--ink); margin-bottom: 16px; }
.codex-thumb { width: 120px; height: 180px; margin-bottom: 16px; overflow: hidden; }
.codex-thumb img { height: 100%; width: auto; display: block; }
.codex-thumb.placeholder {
  background: radial-gradient(ellipse at center, #2a2a2a 0%, #0e0d0c 72%);
  border: 0.8px solid var(--gold-dim);
}
.codex-detail-text { font-size: 24px; line-height: 1.7; color: var(--ink); }
.codex-detail-empty { color: var(--gold-dim); font-size: 24px; padding: 40px 0; }

/* ---------- 行囊 ---------- */
.inv-weapon {
  font-size: 24px;
  color: var(--ink);
  border-bottom: 0.8px solid var(--gold-dim);
  padding-bottom: 16px;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.inv-row { border-bottom: 0.8px solid var(--gold-dim); padding: 14px 0; }
.inv-head { display: flex; justify-content: space-between; align-items: center; }
.inv-name { font-size: 26px; color: var(--ink); letter-spacing: 0.1em; }
.inv-count { font-size: 22px; color: var(--gold-dim); }
.inv-desc { font-size: 20px; color: var(--gold-dim); margin-top: 6px; line-height: 1.6; }
.inv-empty { text-align: center; color: var(--gold-dim); font-size: 24px; padding: 30px 0; }

/* ---------- 牵机解谜 ---------- */
.puzzle-screen {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.puzzle-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.puzzle-cold {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(38, 68, 88, 0.24);
}
.puzzle-title {
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  color: var(--paper);
  letter-spacing: 0.25em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.puzzle-hp { position: absolute; top: 30px; right: 50px; width: 220px; }
.puzzle-hp-bar { position: relative; height: 16px; background: rgba(10, 9, 8, 0.6); border: 0.8px solid var(--gold-dim); }
.puzzle-hp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--blood); transition: width 200ms ease; }
.puzzle-hp-label { margin-top: 4px; font-size: 16px; color: var(--paper); text-align: right; letter-spacing: 0.1em; }
.puzzle-body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.puzzle-choice {
  position: absolute;
  left: 50%; bottom: 110px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}

/* probe 投石问路 */
.probe-layout {
  position: absolute;
  left: 50%; bottom: 90px;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  align-items: stretch;
}
.probe-labels { display: flex; flex-direction: column; justify-content: space-around; }
.probe-label { font-size: 24px; color: var(--paper); letter-spacing: 0.15em; writing-mode: vertical-rl; }
.probe-grid { display: grid; grid-template-columns: repeat(3, 116px); grid-template-rows: repeat(3, 116px); gap: 12px; }
.probe-cell {
  position: relative;
  background: rgba(40, 70, 90, 0.55);
  border: 0.8px solid var(--gold-dim);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.probe-cell:hover { background: rgba(92, 132, 152, 0.6); }
.probe-cell.stepped { background: rgba(110, 175, 155, 0.4); }
.probe-cell.stepped::after {
  content: "翡";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--paper);
  font-size: 32px;
  letter-spacing: 0.05em;
}
.probe-pop {
  position: absolute;
  left: 50%; top: 64%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  background: rgba(10, 9, 8, 0.72);
  padding: 16px 26px;
  border: 0.8px solid var(--gold);
}

/* 银线动画 */
.puzzle-line {
  position: absolute;
  left: 0; top: 52%;
  width: 300px; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(220, 235, 240, 0.95), transparent);
  pointer-events: none;
  animation: lineSweep 700ms ease-out forwards;
}
.puzzle-line-low { top: 68%; }
.puzzle-line-mid { top: 52%; }
.puzzle-line-diag { animation: lineSweepDiag 700ms ease-out forwards; }
@keyframes lineSweep {
  0% { transform: translateX(-300px); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(1920px); opacity: 0; }
}
@keyframes lineSweepDiag {
  0% { transform: rotate(18deg) translateX(-300px); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(18deg) translateX(1920px); opacity: 0; }
}

/* memory 跟着谢允 */
.memory-grid {
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(4, 124px);
  grid-template-rows: repeat(2, 124px);
  gap: 30px;
}
.memory-stone {
  background: radial-gradient(circle at 40% 35%, #5a6a70, #262e34 72%);
  border: 0.8px solid var(--gold-dim);
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 200ms ease, background 200ms ease;
}
.memory-stone.lit {
  background: radial-gradient(circle at 40% 35%, #c8f0e0, #4a8a78 72%);
  box-shadow: 0 0 32px 9px rgba(160, 230, 210, 0.85);
}

/* listen 砍那根 */
.listen-line {
  position: absolute;
  top: 26%;
  width: 4px; height: 360px;
  background: linear-gradient(to bottom, transparent, rgba(220, 235, 240, 0.8), transparent);
  cursor: pointer;
}
.listen-line:nth-child(1) { left: 22%; transform: rotate(9deg); }
.listen-line:nth-child(2) { left: 38%; transform: rotate(5deg); }
.listen-line:nth-child(3) { left: 52%; transform: rotate(0deg); }
.listen-line:nth-child(4) { left: 66%; transform: rotate(-5deg); }
.listen-line:nth-child(5) { left: 80%; transform: rotate(-9deg); }
.listen-line:hover { background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9), transparent); }
.listen-line.hint {
  background: linear-gradient(to bottom, transparent, rgba(200, 240, 224, 0.95), transparent);
  animation: lineTremble 500ms ease-in-out infinite;
}
@keyframes lineTremble {
  0%, 100% { box-shadow: 0 0 14px 2px rgba(160, 230, 210, 0.5); opacity: 0.9; }
  50% { box-shadow: 0 0 34px 10px rgba(160, 230, 210, 0.95); opacity: 1; }
}

/* ---------- 解谜常驻提示 + 深色按钮 ---------- */
.puzzle-hint {
  position: absolute;
  top: 96px; left: 50%;
  transform: translateX(-50%);
  max-width: 82%;
  font-size: 28px;
  color: var(--paper);
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1.6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  white-space: pre-wrap;
}
.dark-btn {
  font-family: var(--font-serif);
  color: var(--paper);
  background: rgba(10, 9, 8, 0.6);
  border: 0.8px solid var(--gold);
  padding: 14px 36px;
  font-size: 30px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.dark-btn:hover { background: rgba(184, 154, 90, 0.18); }

/* ---------- 战斗 ---------- */
.battle-screen {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
.battle-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.battle-bg-dark {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.battle-char {
  position: absolute;
  bottom: 0;
  height: 82%;
  width: auto;
}
.battle-char-left { left: 5%; }
.battle-player-pos-protect .battle-char-left { left: 10%; }
.battle-player-pos-xieyun .battle-char-left { left: 2%; }
.battle-char-right { right: 5%; }
.battle-char-left.lunge { animation: lungeLeft 380ms ease; }
.battle-char-right.lunge { animation: lungeRight 380ms ease; }
.battle-char.shake { animation: battleShake 380ms ease; }
.battle-char-left.dodge { animation: dodgeLeft 380ms ease; }
.battle-char-right.dodge { animation: dodgeRight 380ms ease; }
@keyframes lungeLeft { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(44px); } }
@keyframes lungeRight { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-44px); } }
@keyframes battleShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-11px); } 40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); } 80% { transform: translateX(7px); }
}
@keyframes dodgeLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-40px); } }
@keyframes dodgeRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(40px); } }

.battle-top {
  position: absolute;
  top: 22px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 56px;
  pointer-events: none;
}
.battle-side { width: 360px; }
.battle-name { font-size: 28px; color: var(--paper); letter-spacing: 0.2em; margin-bottom: 8px; }
.battle-bar {
  position: relative;
  height: 16px;
  background: rgba(10, 9, 8, 0.6);
  border: 0.8px solid var(--gold-dim);
  margin-bottom: 6px;
  overflow: hidden;
}
.battle-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  transition: width 200ms ease;
}
.battle-bar-fill::after { /* 淡高光 */
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  display: none;
}
.battle-bar-hp .battle-bar-fill { background: var(--blood); }
.battle-bar-protect { height: 13px; border-color: rgba(205, 176, 104, 0.9); }
.battle-bar-protect .battle-bar-fill { background: linear-gradient(90deg, #8c433b, #d1a55d); }
.battle-bar-mp { height: 10px; }
.battle-bar-mp .battle-bar-fill { background: var(--azurite); }
.battle-bar-break { height: 12px; }
.battle-bar-break .battle-bar-fill { background: var(--gold); }
.battle-bar-weapon { height: 12px; border-color: rgba(196, 132, 72, 0.85); }
.battle-bar-weapon .battle-bar-fill { background: linear-gradient(90deg, #806044, #d69b58); }
.battle-bar-label {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--paper);
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  z-index: 1;
}
.battle-bar-val {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--paper);
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  z-index: 1;
}

.battle-turn {
  position: absolute;
  top: 152px; left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.battle-tell {
  position: absolute;
  top: 56%; left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  color: var(--paper);
  letter-spacing: 0.15em;
  text-align: center;
  background: rgba(10, 9, 8, 0.5);
  padding: 8px 26px;
  max-width: 74%;
  white-space: nowrap;
}

.battle-bottom {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 92%;
}
.battle-skill {
  font-family: var(--font-serif);
  color: var(--paper);
  background: rgba(10, 9, 8, 0.6);
  border: 0.8px solid var(--gold);
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 124px;
}
.battle-skill:hover { background: rgba(184, 154, 90, 0.18); }
.battle-skill.dim { opacity: 0.5; }
.bs-name { font-size: 24px; letter-spacing: 0.1em; }
.bs-meta { font-size: 15px; color: var(--paper-dim); letter-spacing: 0.05em; }
.battle-surrender { border-color: var(--gold-dim); color: var(--paper-dim); }
.battle-skip { border-color: var(--gold-dim); }
.battle-retry-btn {
  position: absolute;
  bottom: 44%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  color: var(--paper);
  background: transparent;
  border: 0.8px solid var(--gold);
  padding: 12px 32px;
  font-size: 26px;
  letter-spacing: 0.15em;
  cursor: pointer;
}
.battle-retry-btn:hover { background: rgba(184, 154, 90, 0.15); }

.battle-broken {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 92px;
  color: var(--blood);
  letter-spacing: 0.3em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 22px rgba(143, 58, 50, 0.85);
  white-space: nowrap;
}
.battle-broken.show { animation: brokenFlash 1200ms ease; }
@keyframes brokenFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- 战斗演出（第 15.5 节） ---------- */
.battle-bottom.perf-busy { pointer-events: none; opacity: 0.55; }

/* 第 21.2 条：战斗 / 牵机解谜 皮肤（body.has-skin 门控，缺素材回退上面默认样式） */
/* 气血/内力/破绽条：深色绢帛轨道 + 铜金细框 + 淡高光 */
body.has-skin .battle-bar {
  background: rgba(15, 26, 34, 0.9);
  border: 0.8px solid var(--brass);
}
body.has-skin .battle-bar-fill::after {
  height: 60%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%);
}
/* 战斗按钮统一 uis_choice */
body.has-skin .battle-skill {
  width: 330px; height: 100px;
  flex-shrink: 0;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  border: none; padding: 0;
  color: #f1e3b8; font-size: 30px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
body.has-skin .battle-skill.battle-item,
body.has-skin .battle-skill.battle-surrender { width: 260px; height: 90px; }
body.has-skin .battle-skill .bs-name { font-size: 30px; color: #f1e3b8; }
body.has-skin .battle-skill .bs-meta { font-size: 22px; color: #f1e3b8; margin-top: auto; }
body.has-skin .battle-skill.dim { opacity: 0.45; filter: grayscale(0.6); }
body.has-skin .battle-retry-btn {
  width: 260px; height: 90px;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  border: none; padding: 0;
  color: #f1e3b8; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
body.has-skin .battle-skill:hover,
body.has-skin .battle-retry-btn:hover { background-image: url(../美术素材/uis_choice_hot.png); }
/* 牵机解谜：气血条同样处理 */
body.has-skin .puzzle-hp-bar {
  background: rgba(15, 26, 34, 0.9);
  border: 0.8px solid var(--brass);
}
body.has-skin .puzzle-hp-fill { background: var(--seal); }
body.has-skin .puzzle-hp-fill::after {
  content: "";
  position: absolute; left: 0; top: 0; right: 0;
  height: 60%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%);
}
/* 牵机解谜按钮同样用 uis_choice */
body.has-skin .dark-btn {
  width: 300px; height: 90px;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  border: none; padding: 0;
  color: #f1e3b8; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
body.has-skin .dark-btn:hover { background-image: url(../美术素材/uis_choice_hot.png); }

/* 开场 */
.bfx-intro {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
  transition: opacity 350ms ease;
  z-index: 10;
}
.bfx-intro.out { opacity: 0; }
.bfx-intro-dim {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.92);
}
.bfx-bar {
  position: absolute; left: 0; width: 100%; height: 12%;
  background: #000;
  transition: transform 400ms ease;
}
.bfx-bar-top { top: 0; transform: translateY(-100%); }
.bfx-bar-bottom { bottom: 0; transform: translateY(100%); }
.bfx-intro.in .bfx-bar-top { transform: translateY(0); }
.bfx-intro.in .bfx-bar-bottom { transform: translateY(0); }

.bfx-intro-char {
  position: absolute; bottom: 0; height: 82%; width: auto;
  opacity: 0;
}
.bfx-intro-left { left: 5%; }
.bfx-intro-right { right: 5%; }
.bfx-intro.in .bfx-intro-left { animation: bfxInkLeft 900ms ease-out forwards; }
.bfx-intro.in .bfx-intro-right { animation: bfxInkRight 900ms ease-out forwards; }
@keyframes bfxInkLeft {
  from { transform: translateX(-220px); opacity: 0; filter: blur(7px); }
  to { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes bfxInkRight {
  from { transform: translateX(220px); opacity: 0; filter: blur(7px); }
  to { transform: translateX(0); opacity: 1; filter: blur(0); }
}

.bfx-intro-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* tagline 始终在竖排标题整体下方 24px，标题多长都不重叠 */
}
.bfx-intro-title {
  writing-mode: vertical-rl;
  font-size: 110px;
  color: var(--paper);
  letter-spacing: 0.3em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.85);
  opacity: 0;
}
.bfx-intro.in .bfx-intro-title { animation: bfxInkTitle 800ms ease-out forwards; }
@keyframes bfxInkTitle {
  from { opacity: 0; transform: scale(1.15); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.bfx-intro-tagline {
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 0.25em;
  white-space: nowrap;
  opacity: 0;
}
.bfx-intro.in .bfx-intro-tagline { animation: bfxTagline 700ms ease-out 500ms forwards; }
@keyframes bfxTagline { from { opacity: 0; } to { opacity: 1; } }

/* 招式名横幅（毛笔字感） */
.bfx-movename {
  position: absolute;
  top: 32%;
  writing-mode: vertical-rl;
  font-size: 88px;
  color: var(--paper);
  letter-spacing: 0.2em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
  z-index: 6;
  transition: opacity 150ms ease, transform 150ms ease;
  text-shadow:
    2px 0 0 rgba(143, 58, 50, 0.85),
    -2px 0 0 rgba(143, 58, 50, 0.85),
    0 2px 0 rgba(143, 58, 50, 0.85),
    0 -2px 0 rgba(143, 58, 50, 0.85);
}
.bfx-movename-left { left: 9%; }
.bfx-movename-right { right: 9%; }
.bfx-movename.show { opacity: 1; transform: translateY(0); }
.bfx-movename.out { opacity: 0; }

/* 命中白闪 / 顿帧 / 破绽光晕 */
.battle-char.bfx-white { filter: brightness(2.6) saturate(0.35); }
.bfx-hitstop .battle-char { animation-play-state: paused; }
.battle-char.broken-glow {
  animation: bfxGlow 700ms ease-in-out infinite !important;
  box-shadow: 0 0 42px 12px rgba(143, 58, 50, 0.75);
}
@keyframes bfxGlow {
  0%, 100% { box-shadow: 0 0 24px 6px rgba(143, 58, 50, 0.45); }
  50% { box-shadow: 0 0 52px 18px rgba(143, 58, 50, 0.85); }
}

/* 红色伤害数字上飘 */
.bfx-dmg {
  position: absolute;
  top: 46%;
  font-size: 48px;
  font-weight: bold;
  color: #c0392b;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 7;
  animation: bfxDmgUp 850ms ease-out forwards;
}
.bfx-dmg-left { left: 21%; }
.bfx-dmg-right { right: 21%; }
@keyframes bfxDmgUp {
  0% { opacity: 0; transform: translateY(14px); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-72px); }
}

/* 金色火星（格挡） */
.bfx-sparks { position: absolute; left: 50%; top: 60%; width: 0; height: 0; pointer-events: none; }
.bfx-sparks span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #d8b06a;
  box-shadow: 0 0 6px 1px rgba(216, 176, 106, 0.85);
  animation: bfxSpark 520ms ease-out forwards;
}
@keyframes bfxSpark {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; }
}

/* 闪避残影 + 淡墨「闪」字 */
.battle-char.bfx-ghost {
  pointer-events: none;
  animation: bfxGhost 620ms ease-out forwards !important;
}
@keyframes bfxGhost {
  from { opacity: var(--go, 0.5); transform: translateX(0); }
  to { opacity: 0; transform: translateX(var(--gx, -50px)); }
}
.bfx-dodge-zi {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150px;
  color: rgba(20, 18, 16, 0.55);
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 6;
  animation: bfxZi 650ms ease-out forwards;
}
@keyframes bfxZi {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* 巧招墨色水波纹 */
.bfx-ripple {
  position: absolute;
  left: 50%; top: 60%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(20, 18, 16, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  animation: bfxRipple 680ms ease-out forwards;
}
@keyframes bfxRipple {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(9); opacity: 0; }
}

/* 收招定格与大印 */
.bfx-slowmo { animation: bfxSlowZoom 600ms ease-out; }
@keyframes bfxSlowZoom { from { transform: scale(1); } to { transform: scale(1.03); } }
.bfx-freeze .battle-char { filter: grayscale(0.85) brightness(0.9); }
.bfx-seal {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  pointer-events: auto;
  cursor: pointer;
  z-index: 9;
  animation: bfxSeal 420ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.bfx-seal.seal-win { color: #a33028; border: 4px solid #a33028; background: rgba(163, 48, 40, 0.10); }
.bfx-seal.seal-lose { color: #4a4640; border: 4px solid #4a4640; background: rgba(74, 70, 64, 0.10); }
.bfx-seal.seal-held { color: var(--gold); border: 4px solid var(--gold); background: rgba(184, 154, 90, 0.10); }
@keyframes bfxSeal {
  0% { opacity: 0; transform: scale(1.4); }
  55% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* 可选 introCg / finishCg 全屏淡入 */
.bfx-cg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 9;
  pointer-events: none;
}
.bfx-cg.in { opacity: 1; }
.bfx-cg.out { opacity: 0; }

/* 破绽毕露「无法行动（继续）」按钮：520×130，居中，位于舞台约 78% 高度 */
.bfx-skip {
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 130px;
  border: 0.8px solid var(--gold);
  background: rgba(10, 9, 8, 0.6);
  color: #f1e3b8;
  font-size: 28px;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
}
body.has-skin .bfx-skip {
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
}
body.has-skin .bfx-skip:hover {
  background-image: url(../美术素材/uis_choice_hot.png);
}

/* ============ B 绢帛锦缎风皮肤（body.has-skin 时启用，第 15.7 节） ============ */

/* ---- 对话框底板 ---- */
body.has-skin .dlg-box {
  width: 1360px;
  min-height: 272px;
  padding: 44px 150px 30px 160px;
  background: url(../美术素材/uis_dlg_panel.png) center / 100% 100% no-repeat;
}
/* 名字印牌：竖排人名叠在朱红区，压在对话框左上角外沿 */
body.has-skin .dlg-name-plate {
  position: absolute;
  left: -22px;
  top: -166px;
  width: 70px;
  height: 285px;
  background: url(../美术素材/uis_name_plate.png) center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
body.has-skin .dlg-name-plate .dlg-name {
  writing-mode: vertical-rl;
  font-size: 30px;
  color: #f1e3b8;
  letter-spacing: 0.26em;
  white-space: nowrap;
  padding: 0;
  text-align: center;
}
body.has-skin .dlg-name-line { display: none; }

/* ---- 选项牌 ---- */
body.has-skin .choice-box { gap: 46px; }
body.has-skin .choice-btn {
  position: relative;
  width: 760px;
  height: 190px;
  padding: 0;
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  font-size: 32px;
  color: #f1e3b8;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease, filter 150ms ease;
}
body.has-skin .choice-btn:hover,
body.has-skin .choice-btn:focus {
  background-image: url(../美术素材/uis_choice_hot.png);
  transform: translateY(-3px);
  filter: brightness(1.06);
}
/* 选项数 3 → 整体缩到 0.8；≥4 → 缩到 0.65 */
body.has-skin .choice-box.choice-n3 { gap: 32px; }
body.has-skin .choice-box.choice-n3 .choice-btn { width: 608px; height: 152px; }
body.has-skin .choice-box.choice-n4 { gap: 28px; }
body.has-skin .choice-box.choice-n4 .choice-btn { width: 494px; height: 124px; }
/* key 选项右端朱砂印记 */
body.has-skin .choice-btn.key::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: url(../美术素材/uis_btn_seal.png) center / 100% 100% no-repeat;
}

/* ---- 全屏卷轴面板 ---- */
body.has-skin .ui-panel {
  width: 1760px;
  height: 665px;
  max-height: none;
  padding: 0;
  background: url(../美术素材/uis_scroll.png) center / 100% 100% no-repeat;
  border: none;
  color: var(--paper);
  box-shadow: none;
  overflow: hidden;
  animation: scrollUnroll 400ms ease-out;
}
@keyframes scrollUnroll {
  from { clip-path: inset(0 48% 0 48%); }
  to { clip-path: inset(0 0 0 0); }
}
body.has-skin .ui-panel.closing { animation: scrollUnrollReverse 300ms ease-in forwards; }
@keyframes scrollUnrollReverse {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 48% 0 48%); }
}
/* 内容画心（可滚动） */
body.has-skin .panel-scroll-body {
  position: absolute;
  left: 210px; right: 210px;
  top: 170px; bottom: 70px;
  overflow-y: auto;
  z-index: 1;
  /* 细滚动条：Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 164, 92, 0.5) transparent;
}
/* 细滚动条：WebKit（宽 6px，滑块铜金半透明，轨道透明） */
body.has-skin .panel-scroll-body::-webkit-scrollbar { width: 6px; }
body.has-skin .panel-scroll-body::-webkit-scrollbar-track { background: transparent; }
body.has-skin .panel-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(201, 164, 92, 0.5);
  border-radius: 3px;
}
/* 标题文字叠在卷轴自带的匾上 */
body.has-skin .panel-title {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: var(--brass);
  letter-spacing: 0.35em;
  pointer-events: none;
  z-index: 2;
}
/* 关闭按钮：卷轴下方居中，不压卷轴头 */
body.has-skin .panel-close {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* 面板内通用按钮改深色绢帛风 */
body.has-skin .ui-btn {
  color: var(--paper);
  border-color: var(--brass);
  background: rgba(15, 26, 34, 0.45);
}
body.has-skin .ui-btn:hover { background: rgba(201, 164, 92, 0.18); }
body.has-skin .ui-btn.active { background: rgba(201, 164, 92, 0.3); }

/* 面板内容文字改浅色（叠在深色绢帛上） */
body.has-skin .settings-label,
body.has-skin .codex-top,
body.has-skin .codex-detail-title,
body.has-skin .codex-detail-text,
body.has-skin .inv-weapon,
body.has-skin .inv-name,
body.has-skin .inv-desc { color: var(--paper); }
body.has-skin .settings-row,
body.has-skin .inv-row,
body.has-skin .inv-weapon,
body.has-skin .slot-row { border-color: rgba(201, 164, 92, 0.4); }
body.has-skin .codex-detail-empty,
body.has-skin .inv-empty,
body.has-skin .slot-empty,
body.has-skin .panel-empty { color: rgba(201, 164, 92, 0.7); }
body.has-skin .inv-count { color: var(--brass); }
body.has-skin .codex-item { color: var(--paper); }
body.has-skin .codex-item.locked { color: rgba(201, 164, 92, 0.6); }
body.has-skin .codex-cat { color: var(--paper); }

/* ---- 设置页：画心内两列，底部给「关闭」留出独立区域 ---- */
body.has-skin .settings-panel .panel-scroll-body {
  top: 150px;
  bottom: 150px;
  overflow-x: hidden;
  overflow-y: auto;
}
body.has-skin .settings-grid {
  grid-template-columns: repeat(2, minmax(0, 650px));
  gap: 40px;
}
body.has-skin .settings-panel .settings-row {
  height: 58px;
  min-height: 58px;
  padding: 0 8px 8px;
  gap: 12px;
  background-size: 100% 8px;
}
body.has-skin .settings-panel .settings-label {
  flex: 0 0 132px;
  min-width: 0;
  font-size: 22px;
  white-space: nowrap;
}
body.has-skin .settings-panel .settings-grid button {
  position: relative;
  min-width: 0;
  min-height: 44px;
}
body.has-skin .settings-panel .settings-grid button::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, var(--min-hit, 44px));
  height: max(100%, var(--min-hit, 44px));
  transform: translate(-50%, -50%);
}
body.has-skin .settings-panel .settings-row .ui-btn {
  height: 44px;
  padding: 6px 16px;
  font-size: 20px;
}

/* ---- 开关（uis_toggle：左半开 / 右半关） ---- */
body.has-skin .ui-toggle {
  position: relative;
  width: 144px;
  height: 44px;
  border: none;
  background: url(../美术素材/uis_toggle.png) no-repeat;
  background-size: 200% 100%;
  cursor: pointer;
  flex-shrink: 0;
}
body.has-skin .ui-toggle.on { background-position: 0 0; }
body.has-skin .ui-toggle.off { background-position: 100% 0; }

/* ---- 文字速度（4 个并排小选项牌） ---- */
body.has-skin .ui-slider {
  display: flex;
  flex-direction: row;
  width: 480px;
  gap: 8px;
  align-items: center;
  background: none;
}
body.has-skin .ui-slider-seg {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  color: var(--paper);
  font-size: 20px;
  letter-spacing: 0.15em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease;
}
body.has-skin .ui-slider-seg.active {
  background-image: url(../美术素材/uis_choice_hot.png);
  color: #f1e3b8;
}
body.has-skin .ui-slider-seg:hover { transform: translateY(-2px); }

/* ---- 存档位线装书 ---- */
body.has-skin .slot-list {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-start;
}
body.has-skin .slot-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 240px;
  flex: 0 0 auto;
  border: none;
  padding: 0;
}
body.has-skin .slot-book {
  position: relative;
  width: 240px;
  height: 360px;
  background: url(../美术素材/uis_book.png) center / 100% 100% no-repeat;
}
body.has-skin .slot-row.empty .slot-book { filter: brightness(0.72) saturate(0.72); }
/* 题签：只放一列竖排字（米色题签贴约 x38%–62%、y30%–68%），overflow 不裁 */
body.has-skin .slot-info {
  position: absolute;
  left: 38%;
  top: 30%;
  width: 24%;
  height: 38%;
  writing-mode: vertical-rl;
  font-size: 22px;
  color: #2a2118;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 书册下方两行横排说明（章名 / 日期） */
body.has-skin .slot-caption {
  width: 240px;
  text-align: center;
  font-size: 20px;
  color: #f1e3b8;
  line-height: 1.35;
  letter-spacing: 0.05em;
  white-space: pre-line;
  flex: 0 0 auto;
}
body.has-skin .slot-action {
  width: 140px;
  height: 34px;
  flex: 0 0 auto;
  border: 0.8px solid var(--brass);
  color: var(--paper);
  background: rgba(15, 26, 34, 0.5);
  font-size: 20px;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.has-skin .slot-action:hover { background: rgba(201, 164, 92, 0.18); }

/* ---- 菜单（皮肤：两列选项牌） ---- */
body.has-skin .menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
body.has-skin .menu-list .ui-btn {
  height: 110px;
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  color: var(--paper);
  font-size: 28px;
  letter-spacing: 0.2em;
  transition: transform 150ms ease;
}
body.has-skin .menu-list .ui-btn:hover {
  background-image: url(../美术素材/uis_choice_hot.png);
  transform: translateY(-3px);
}

/* ---- 标题画面按钮（选项牌） ---- */
body.has-skin .title-btns .ui-btn {
  width: 560px;
  height: 140px;
  padding: 0;
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  color: #f1e3b8;
  font-size: 30px;
  letter-spacing: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease;
}
body.has-skin .title-btns .ui-btn:hover {
  background-image: url(../美术素材/uis_choice_hot.png);
  transform: translateY(-3px);
}

/* fxLevel=off：皮肤照常显示，但去掉展开动画和悬停上抬 */
body.has-skin.no-fx .ui-panel { animation: none; }
body.has-skin.no-fx .ui-panel.closing { animation: none; }
body.has-skin.no-fx .choice-btn:hover,
body.has-skin.no-fx .title-btns .ui-btn:hover { transform: none; }

/* ---- 面板全屏遮罩（打开设置/存档/读档/见闻/行囊/菜单时） ---- */
.panel-mask {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(6, 10, 14, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
/* 面板打开时隐藏对话框（含人名印牌、心想文字），避免压在卷轴上 */
body.panel-open .layer.dialog { visibility: hidden; }

/* ============ 阶段 1：真实感与引导（第 16 节） ============ */

/* ---- 热区图标（icon，contain + 投影 + 浮动） ---- */
.hotspot-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
  animation: hotspotFloat 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hotspotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ---- 呼吸光环（无 icon 的 item/exit/advance） ---- */
.hotspot-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-dim);
  box-shadow: inset 0 0 12px rgba(184, 154, 90, 0.45);
  animation: hotspotBreathe 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hotspotBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* ---- 已互动变暗 / requires 未满足变暗 ---- */
.hotspot.visited .hotspot-icon { opacity: 0.55; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)) saturate(0.5); }
.hotspot.visited .hotspot-halo { opacity: 0.45; }
.hotspot.locked .hotspot-icon,
.hotspot.locked .hotspot-halo { opacity: 0.5; filter: saturate(0.5); }

/* 锁形小角标 */
.hotspot-lock {
  position: absolute;
  right: -6px; top: -8px;
  width: 22px; height: 18px;
  background: var(--gold-dim);
  border-radius: 3px;
  pointer-events: none;
}
.hotspot-lock::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 9px;
  border: 2px solid var(--gold-dim);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

/* 触屏命中扩展（只扩大命中，不改画面） */
.is-touch .hotspot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 88px; min-height: 88px;
}

/* 提示关闭：隐藏光环、停止图标浮动 */
body.hints-off .hotspot-halo { display: none; }
body.hints-off .hotspot-icon { animation: none; }

/* 提示脉冲（第 2/3 档） */
.hotspot.hint-pulse .hotspot-halo,
.hotspot.hint-pulse .hotspot-icon {
  animation: hintPulse var(--pulse-dur, 2s) ease-out;
}
@keyframes hintPulse {
  0% { filter: drop-shadow(0 0 10px rgba(184, 154, 90, 0.95)) brightness(1.5); }
  100% { filter: drop-shadow(0 0 0 rgba(184, 154, 90, 0)) brightness(1); }
}

/* ---- 道具卡（第 16.2 节） ---- */
.itemcard {
  position: absolute;
  top: 120px; left: 50%;
  transform: translateX(-50%) translateY(-30px);
  width: 860px;
  height: 172px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  background: rgba(10, 9, 8, 0.88);
  border: 0.8px solid var(--gold);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 50;
  pointer-events: auto;
  box-sizing: border-box;
}
body.has-skin .itemcard {
  border: none;
  background: url(../美术素材/uis_dlg_panel.png) center / 100% 100% no-repeat;
}
.itemcard.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.itemcard.out { opacity: 0; }
.itemcard.no-anim { transition: none; transform: translateX(-50%); }
.itemcard-icon {
  width: 120px; height: 120px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.itemcard-icon img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}
.itemcard.weapon-card { width: 960px; height: 260px; }
.itemcard.weapon-card .itemcard-icon { width: 260px; height: 210px; }
.itemcard-right { flex: 1; min-width: 0; }
.itemcard-name { font-size: 36px; color: #f1e3b8; letter-spacing: 0.1em; margin-bottom: 8px; }
.itemcard-desc { font-size: 24px; color: var(--paper); line-height: 1.5; white-space: pre-line; }

/* ---- 目标面板（第 16.3 节） ---- */
.free-objective {
  position: absolute;
  left: 40px; top: 96px;
  width: 520px;
  background: rgba(15, 26, 34, 0.82);
  border: 0.8px solid var(--brass);
  padding: 10px 18px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 40;
}
.free-obj-header { font-size: 24px; color: var(--paper); letter-spacing: 0.05em; line-height: 1.4; }
.free-obj-title { font-size: 24px; color: var(--gold); margin: 8px 0 6px; letter-spacing: 0.1em; }
.free-obj-list { display: flex; flex-direction: column; gap: 4px; }
.free-obj-step { font-size: 22px; color: var(--paper); }
.free-obj-step.done { color: var(--gold-dim); }
.free-obj-step.current { color: var(--gold); }
.free-obj-step.optional { color: rgba(185, 178, 162, 0.72); }

/* ---- 提示按钮 + 气泡（第 16.4 节） ---- */
.free-hint-btn {
  position: absolute;
  left: 30px; bottom: 90px;
  font-family: var(--font-serif);
  color: var(--paper);
  background: rgba(15, 26, 34, 0.7);
  border: 0.8px solid var(--brass);
  font-size: 22px;
  letter-spacing: 0.15em;
  padding: 8px 22px;
  cursor: pointer;
  z-index: 5;
}
body.has-skin .free-hint-btn {
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  width: 190px;
  height: 58px;
  padding: 0;
  color: #f1e3b8;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.has-skin .free-hint-btn:hover { background-image: url(../美术素材/uis_choice_hot.png); }
body.hints-off .free-hint-btn { display: none; }

.free-hint-bubble {
  position: absolute;
  left: 30px; bottom: 160px;
  width: 560px;
  background: rgba(15, 26, 34, 0.92);
  border: 0.8px solid var(--brass);
  padding: 16px 20px;
  font-size: 24px;
  color: var(--paper);
  line-height: 1.5;
  pointer-events: none;
  z-index: 45;
  opacity: 0;
  transition: opacity 300ms ease;
}
.free-hint-bubble.show { opacity: 1; }

/* 地图按钮脉冲 */
.map-btn.pulse {
  animation: mapPulse 2s ease-out;
  border-color: var(--gold);
}
@keyframes mapPulse {
  0%, 35% { box-shadow: 0 0 14px 4px rgba(184, 154, 90, 0.9); }
  100% { box-shadow: none; }
}
.map-seal.target { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- 调试热区矩形（?debug=1） ---- */
.debug-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 60;
}
.debug-rect { position: absolute; border: 2px solid; pointer-events: none; }
.debug-item { border-color: #2ecc71; }
.debug-npc { border-color: #3498db; }
.debug-exit { border-color: #e67e22; }
.debug-advance { border-color: #9b59b6; }
.debug-label {
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 0 4px;
  white-space: nowrap;
}

/* ---- 行囊物品图标 ---- */
.inv-icon {
  width: 48px; height: 48px;
  object-fit: contain;
  margin-right: 14px;
  flex-shrink: 0;
}

/* ============ 阶段 3：动作互动（第 17 节） ============ */
.act-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: auto;
  z-index: 55;
}
.act-dim {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.act-prompt {
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  max-width: 70%;
  font-size: 28px;
  color: var(--paper);
  letter-spacing: 0.1em;
  text-align: center;
  background: rgba(15, 26, 34, 0.72);
  border: 0.8px solid var(--brass);
  padding: 10px 28px;
  pointer-events: none;
}

/* 印章按钮（缺图回退朱红圆） */
.act-seal {
  position: absolute;
  background: var(--seal);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
body.has-skin .act-seal {
  background: url(../美术素材/uis_btn_seal.png) center / 100% 100% no-repeat;
  border-radius: 0;
}
.act-hold {
  left: 50%; bottom: 150px;
  margin-left: -75px;
  width: 150px; height: 150px;
}
.act-mash {
  left: 50%; top: 56%;
  margin: -90px 0 0 -90px;
  width: 180px; height: 180px;
}
.act-seal.holding { transform: scale(0.94); }
.act-seal.mash-pop { animation: actPop 200ms ease; }
@keyframes actPop {
  0% { transform: scale(1); }
  40% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* 进度环（hold） */
.act-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.act-ring circle { fill: none; stroke-width: 6; }
.act-ring .ring-bg { stroke: rgba(184, 154, 90, 0.3); }
.act-ring .ring-fg { stroke: var(--gold); stroke-linecap: round; }

/* 计数条 + 时间条（mash） */
.act-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 26, 34, 0.6);
  border: 0.8px solid var(--gold-dim);
  overflow: hidden;
}
.act-countbar { top: 26%; width: 400px; height: 14px; }
.act-countbar .act-bar-fill { background: var(--seal); }
.act-timebar { bottom: 120px; width: 400px; height: 6px; }
.act-timebar .act-bar-fill { background: var(--gold); }
.act-bar-fill { height: 100%; width: 0; }

/* 墨点扩散 */
.act-inkdot {
  position: absolute;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.8);
  animation: actInkDot 500ms ease-out forwards;
  pointer-events: none;
}
@keyframes actInkDot {
  from { transform: scale(0.5); opacity: 0.8; }
  to { transform: scale(3); opacity: 0; }
}

/* 成/失墨字 */
.act-ink {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 160px;
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 60;
  animation: actInk 600ms ease-out forwards;
}
.act-ink.ink-win { color: var(--seal); }
.act-ink.ink-fail { color: #5a564e; }
@keyframes actInk {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* tap 目标 */
.act-target {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
}
.act-target::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 88px; min-height: 88px;
}
.act-target-halo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold-dim);
  box-shadow: inset 0 0 12px rgba(184, 154, 90, 0.4);
  animation: actBreathe 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes actBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
.act-target-num {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; color: var(--gold);
  pointer-events: none;
}
.act-target-label {
  position: absolute;
  left: 50%; top: calc(50% + 30px);
  transform: translateX(-50%);
  font-size: 20px; color: var(--paper);
  white-space: nowrap;
  pointer-events: none;
}
.act-target.hit { opacity: 0.45; pointer-events: none; }
.act-target.hit .act-target-halo {
  border-color: var(--gold);
  background: rgba(184, 154, 90, 0.5);
  animation: none;
}

/* 点空白水波纹 */
.act-ripple {
  position: absolute;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(184, 154, 90, 0.6);
  border-radius: 50%;
  animation: actRipple 600ms ease-out forwards;
  pointer-events: none;
}
@keyframes actRipple {
  from { transform: scale(0.4); opacity: 0.8; }
  to { transform: scale(2.5); opacity: 0; }
}

/* 限时选择倒计时条（第 17.2 节） */
.choice-timer {
  position: absolute;
  left: 50%; bottom: -28px;
  transform: translateX(-50%);
  width: 520px; height: 6px;
  background: rgba(15, 26, 34, 0.7);
  border: 0.8px solid var(--gold-dim);
  overflow: hidden;
  pointer-events: none;
}
.choice-timer-fill { height: 100%; width: 100%; background: var(--gold); }
.choice-btn.picked {
  background: rgba(184, 154, 90, 0.35);
  border-color: var(--gold);
  filter: brightness(1.25);
}
body.has-skin .choice-btn.picked {
  background-image: url(../美术素材/uis_choice_hot.png);
  filter: brightness(1.25);
}

/* 不寻常选项（以「（」开头）更暗淡 */
.choice-btn.unusual { color: var(--paper-dim); opacity: 0.82; }

/* ============ 阶段 4：结局页与表情（第 18 节） ============ */
.ending-page {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #0f1a22;
  pointer-events: auto;
  z-index: 70;
  overflow: hidden;
}
body.has-skin .ending-page {
  background: url(../美术素材/uis_scroll.png) center / 150% 150% no-repeat, #0f1a22;
}

.ending-head {
  position: absolute;
  left: 22%; top: 90px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}
.ending-title {
  writing-mode: vertical-rl;
  color: var(--paper);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.ending-title-char {
  display: inline-block;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 120ms ease, transform 120ms ease;
}
.ending-title-char.show { opacity: 1; transform: scale(1); }

.ending-kind {
  writing-mode: vertical-rl;
  font-size: 30px;
  color: var(--gold);
  letter-spacing: 0.3em;
  white-space: nowrap;
  padding-top: 4px;
}

.ending-text {
  position: absolute;
  left: 46%; top: 32%;
  width: 42%;
  font-size: 34px;
  color: var(--paper);
  text-align: left;
  line-height: 1.8;
  opacity: 0;
  transition: opacity 500ms ease;
}
.ending-next {
  position: absolute;
  left: 46%; top: 56%;
  width: 42%;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 0.25em;
  opacity: 0;
  transition: opacity 500ms ease;
}
.ending-text.show, .ending-next.show { opacity: 1; }

.ending-seals {
  position: absolute;
  left: 50%; bottom: 130px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
}
.ending-seal {
  width: 80px; height: 80px;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 6px;
  text-align: center;
  writing-mode: vertical-rl;
  overflow: hidden;
}
.ending-seal.unlocked { border-color: var(--seal); color: #e8d5c0; background: rgba(163, 50, 42, 0.35); }
.ending-seal.locked { border-color: var(--gold-dim); color: var(--gold-dim); background: rgba(10, 9, 8, 0.45); }
.ending-seal.current { transform: scale(1.12); animation: endingSealPulse 1.6s ease-in-out infinite; }

/* 小屏下结局印章只显示首字，避免长标题溢出（data-seal-first 由 JS 写入）。 */
body.small-screen .ending-seal .ending-seal-text { display: none; }
body.small-screen .ending-seal[data-seal-first]::before { content: attr(data-seal-first); }
@keyframes endingSealPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(163, 50, 42, 0.6); }
  50% { box-shadow: 0 0 20px rgba(163, 50, 42, 0.9); }
}

.ending-count {
  position: absolute;
  left: 50%; bottom: 88px;
  transform: translateX(-50%);
  font-size: 22px;
  color: var(--gold-dim);
  letter-spacing: 0.1em;
}

.ending-btns {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  opacity: 0;
  transition: opacity 500ms ease;
}
.ending-btns.show { opacity: 1; }
.ending-btn {
  font-family: var(--font-serif);
  width: 300px; height: 58px;
  border: 0.8px solid var(--gold);
  background: rgba(15, 26, 34, 0.7);
  color: var(--paper);
  font-size: 24px;
  letter-spacing: 0.15em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.has-skin .ending-btn {
  border: none;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  color: #f1e3b8;
}
body.has-skin .ending-btn:hover { background-image: url(../美术素材/uis_choice_hot.png); }

/* 标题「结局」面板行 */
.ending-row {
  border-bottom: 0.8px solid var(--gold-dim);
  padding: 12px 0;
}
.ending-row-title { font-size: 26px; color: var(--ink); letter-spacing: 0.1em; }
body.has-skin .ending-row-title { color: var(--paper); }
.ending-row-title.locked { color: var(--gold-dim); }
.ending-row-blurb { font-size: 20px; color: var(--ink); margin-top: 4px; line-height: 1.5; }
body.has-skin .ending-row-blurb { color: var(--paper-dim); }
.ending-row-at { font-size: 18px; color: var(--gold-dim); margin-top: 4px; }
.ending-row-ask { font-size: 18px; color: var(--gold-dim); margin-top: 4px; }

/* ============ 阶段 5：见闻册 / 关系图 / 招式（第 19 节） ============ */

/* ---- 见闻册（古籍：书脊分类签 + 左右页） ---- */
.codex-book {
  display: flex;
  width: 100%;
  min-height: 360px;
}
.codex-spine {
  width: 90px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: rgba(10, 9, 8, 0.3);
  border-right: 1px solid var(--gold-dim);
}
.codex-tab {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--paper-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 0.2em;
  padding: 10px 6px;
}
body.has-skin .codex-tab { color: #f1e3b8; }
.codex-tab.active { color: var(--seal); }
.codex-page-left {
  flex: 0 0 34%;
  overflow-y: auto;
  padding: 10px 14px 10px 70px; /* 左页给书脊分类签留出约 70px 宽度 */
  border-right: 1px solid var(--gold-dim);
}
.codex-page-right {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  position: relative;
  perspective: 1000px;
}
.codex-page-right.flip { animation: codexFlip 350ms ease; transform-origin: left center; }
@keyframes codexFlip {
  from { transform: rotateY(60deg); opacity: 0.4; }
  to { transform: rotateY(0); opacity: 1; }
}
.codex-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--seal);
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.codex-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  font-family: var(--font-serif);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 0.8px solid rgba(201, 164, 92, 0.25);
  padding: 8px 6px;
  font-size: 22px;
  cursor: pointer;
}
body.has-skin .codex-item { color: var(--paper); }
.codex-item.locked { color: var(--gold-dim); }
.codex-item.active { color: var(--gold); }
.codex-detail-seal {
  display: inline-block;
  border: 1.5px solid var(--seal);
  color: var(--seal);
  font-size: 14px;
  padding: 2px 6px;
  margin-left: 10px;
  vertical-align: middle;
}
.codex-detail-text { font-size: 28px; line-height: 1.9; color: var(--ink); }
body.has-skin .codex-detail-text { color: var(--paper); }
.codex-thumb {
  width: 200px; height: 300px;
  overflow: hidden;
  position: absolute;
  right: 20px; bottom: 20px; /* 右页右下角，不超出画心 */
  border: 0.8px solid var(--gold-dim);
  display: block;
}
.codex-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁到上半身 */
  object-position: top;
  position: absolute;
  top: 0; left: 0;
  display: block;
}

/* ---- 人物关系图 ---- */
.relation-wrap {
  position: relative;
  width: 100%;
  height: 660px;
}
.relation-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.relation-line { stroke: var(--gold); stroke-width: 0.8; opacity: 0.7; }
.relation-line.active { stroke: var(--gold); stroke-width: 1.6; opacity: 1; }
.relation-labels {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.relation-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 22px;
  color: #f1e3b8;
  background: rgba(15, 26, 34, 0.78); /* 深色半透明底，保证文字在连线上可读 */
  padding: 2px 8px;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.4;
}
.relation-nodes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.relation-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background-size: 260% auto;
  background-position: 50% 12%;
  background-repeat: no-repeat;
  background-color: rgba(15, 26, 34, 0.6);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.relation-node.noavatar {
  width: 80px; height: 80px;
  background: rgba(163, 50, 42, 0.35);
  border-color: var(--seal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.relation-node-sealchar { font-size: 36px; color: #e8d5c0; }
.relation-node-name {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: var(--paper);
  margin-top: 4px;
  white-space: nowrap;
}
.relation-node.new { animation: relNodeIn 500ms ease-out; }
@keyframes relNodeIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.relation-node.new::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.7);
  animation: relInkDot 500ms ease-out forwards;
  pointer-events: none;
}
@keyframes relInkDot {
  from { transform: scale(0.5); opacity: 0.8; }
  to { transform: scale(2); opacity: 0; }
}
.relation-card {
  position: absolute;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 520px;
  background: rgba(15, 26, 34, 0.88);
  border: 0.8px solid var(--gold);
  padding: 12px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.relation-card.show { opacity: 1; }
.relation-card-name { font-size: 24px; color: #f1e3b8; }
.relation-card-title { font-size: 18px; color: var(--gold); margin-top: 2px; }
.relation-card-text { font-size: 20px; color: var(--paper); margin-top: 6px; line-height: 1.6; }

/* ---- 招式演示 ---- */
.skilldemo-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: auto;
  z-index: 55;
  opacity: 0;
  transition: opacity 200ms ease;
}
.skilldemo-layer.in { opacity: 1; }
.skilldemo-layer.out { opacity: 0; }
.skilldemo-dim {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(6, 10, 14, 0.72);
}
.skilldemo-portrait {
  position: absolute;
  left: 8%; top: 50%;
  height: 82%;
  width: auto;
  transform: translateY(-50%) translateX(-120px);
  opacity: 0;
  transition: transform 400ms ease, opacity 400ms ease;
}
.skilldemo-layer.in .skilldemo-portrait { transform: translateY(-50%) translateX(0); opacity: 1; }
.skilldemo-name {
  position: absolute;
  left: 56%; top: 36%;
  transform: translate(-50%, -50%) scale(1.15);
  font-size: 140px;
  color: var(--paper);
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease;
}
.skilldemo-layer.in .skilldemo-name { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
.skilldemo-type {
  position: absolute;
  left: 56%; top: 52%;
  transform: translateX(-50%);
  width: 80px; height: 80px;
  border: 3px solid var(--seal);
  color: #e8d5c0;
  background: rgba(163, 50, 42, 0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.skilldemo-desc {
  position: absolute;
  left: 56%; top: 66%;
  transform: translateX(-50%);
  max-width: 46%;
  font-size: 26px;
  color: var(--paper);
  text-align: center;
}
.skilldemo-spark {
  position: absolute;
  left: 56%; top: 55%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d8b06a;
  box-shadow: 0 0 6px 1px rgba(216, 176, 106, 0.85);
  animation: sdSpark 600ms ease-out forwards;
}
@keyframes sdSpark {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; }
}
.skilldemo-ghost {
  position: absolute;
  left: 56%; top: 50%;
  width: 60px; height: 90px;
  margin: -45px 0 0 -30px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  animation: sdGhost 600ms ease-out forwards;
}
@keyframes sdGhost {
  from { opacity: 0.5; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-70px); }
}
.skilldemo-ripple {
  position: absolute;
  left: 56%; top: 55%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(20, 18, 16, 0.7);
  border-radius: 50%;
  animation: sdRipple 700ms ease-out forwards;
}
@keyframes sdRipple {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(9); opacity: 0; }
}

/* ---- 招式册 ---- */
.skill-list {
  overflow-y: auto;
  max-height: 350px; /* 固定画心内最大高度（舞台 y≈378~728），超出滚动，最后一行不掉落 */
  width: 100%;
}
.skill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: none; /* 分隔线改由 .skill-divider 负责 */
  padding: 6px 0;
  max-height: 64px; /* 每行高度不超过 64 舞台像素 */
  overflow: hidden;
}
.skill-row-type {
  width: 40px; height: 40px;
  border: 2px solid var(--seal);
  color: #e8d5c0;
  background: rgba(163, 50, 42, 0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.skill-row-name { font-size: 26px; color: var(--ink); letter-spacing: 0.1em; flex-shrink: 0; min-width: 140px; }
body.has-skin .skill-row-name { color: var(--paper); }
.skill-row-name.locked { color: var(--gold-dim); }
.skill-row-prof { font-size: 20px; color: var(--gold); flex-shrink: 0; min-width: 64px; }
.skill-row-desc { font-size: 20px; color: var(--ink); flex: 1; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-skin .skill-row-desc { color: var(--paper-dim); }
.skill-divider {
  height: 14px; /* 分隔线高 14px */
  background: url('../美术素材/uis_divider.png') center center / 100% 14px no-repeat;
  border-bottom: 1px solid var(--gold-dim); /* 缺图回退 1px 暗金线 */
}
.skill-list .skill-divider:last-child { display: none; } /* 末行后不画分隔 */

/* ============ 阶段 2 遗留小项（第 21 节） ============ */

/* 素材装饰只在整套皮肤成功加载后显示，缺素材保持原样。 */
.ui-corner { display: none; background: none; }
body.has-skin .ui-corner {
  display: block;
  width: 90px;
  height: 90px;
  background: url(../美术素材/uis_corner.png) center / 100% 100% no-repeat;
}

/* 回顾长文本由卷轴画心滚动。 */
body.has-skin .backlog-inner { width: 100%; overflow: visible; padding: 0 24px; }

/* 设置页分隔线：素材 1384×79，舞台显示宽 900、高约 51px。 */
body.has-skin .settings-row {
  height: auto;
  min-height: 70px;
  padding: 8px 12px 28px;
  border-bottom: 1px solid var(--gold-dim);
  background: url(../美术素材/uis_divider.png) center bottom / 900px 51px no-repeat;
}
body.has-skin .settings-row:last-child { border-bottom: 0; background: none; }

/* 牵机气血条与战斗三类状态条。 */
body.has-skin .puzzle-hp-bar,
body.has-skin .battle-bar {
  background: var(--silk);
  border: 0.8px solid var(--brass);
  overflow: hidden;
}
body.has-skin .puzzle-hp-bar { height: 24px; }
body.has-skin .puzzle-hp-fill { background: var(--seal); }
body.has-skin .battle-bar-hp .battle-bar-fill { background: var(--seal); }
body.has-skin .battle-bar-mp .battle-bar-fill { background: var(--azurite); }
body.has-skin .battle-bar-break .battle-bar-fill { background: var(--gold-dim); }
body.has-skin .battle-bar-weapon .battle-bar-fill { background: linear-gradient(90deg, #72513a, #c99356); }
body.has-skin .puzzle-hp-fill::after,
body.has-skin .battle-bar-fill::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0));
  display: block;
}
body.has-skin .puzzle-hp-label,
body.has-skin .battle-bar-label { color: var(--paper); }

/* 战斗全部操作按钮与牵机选项统一为 uis_choice。 */
body.has-skin .battle-skill,
body.has-skin .battle-retry-btn,
body.has-skin .bfx-skip,
body.has-skin .dark-btn {
  border: 0;
  background: url(../美术素材/uis_choice.png) center / 100% 100% no-repeat;
  color: #f1e3b8;
}
body.has-skin .battle-skill { width: 250px; min-width: 250px; min-height: 96px; padding: 12px 24px; }
body.has-skin .battle-retry-btn { width: 420px; height: 112px; padding: 0; }
body.has-skin .dark-btn { min-width: 260px; min-height: 86px; }
body.has-skin .battle-skill:hover,
body.has-skin .battle-skill:focus,
body.has-skin .battle-retry-btn:hover,
body.has-skin .battle-retry-btn:focus,
body.has-skin .bfx-skip:hover,
body.has-skin .bfx-skip:focus,
body.has-skin .dark-btn:hover,
body.has-skin .dark-btn:focus { background-image: url(../美术素材/uis_choice_hot.png); }

/* 非 button 命中区也使用 --min-hit；视觉尺寸保持不变。小屏下扩展命中区到 max(100%, --min-hit)。 */
body.small-screen .hotspot::before,
body.small-screen .act-target::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: var(--min-hit, 44px);
  min-height: var(--min-hit, 44px);
}
body.small-screen .probe-cell,
body.small-screen .memory-stone {
  min-width: var(--min-hit, 44px);
  min-height: var(--min-hit, 44px);
}
body.small-screen .listen-line::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: var(--min-hit, 44px);
  height: 100%;
  min-height: var(--min-hit, 44px);
  transform: translate(-50%, -50%);
}

/* 道具卡明确提供一个 ≥44px 的关闭命中区。 */
body.small-screen .itemcard-close {
  position: absolute;
  top: 12px; right: 14px;
  width: var(--min-hit, 44px);
  height: var(--min-hit, 44px);
  min-width: var(--min-hit, 44px);
  min-height: var(--min-hit, 44px);
  border: 0;
  background: transparent;
  color: var(--paper);
  font: 30px/1 var(--font-serif);
  cursor: pointer;
  z-index: 2;
}

/* 关键小字号按 --min-font 抬升，确保触屏实际字号 ≥12px。 */
body.small-screen .battle-bar-label,
body.small-screen .battle-bar-val { font-size: max(13px, var(--min-font, 13px)); }
body.small-screen .puzzle-hp-label { font-size: max(16px, var(--min-font, 16px)); }
body.small-screen .bs-meta { font-size: max(15px, var(--min-font, 15px)); }
body.small-screen .hotspot-label,
body.small-screen .hotspot-name,
body.small-screen .act-target-num,
body.small-screen .act-target-label { font-size: max(20px, var(--min-font, 20px)); }

/* 小屏放大字号后同步给状态条留出高度，并错开右上角常驻按钮。 */
body.small-screen .battle-bar,
body.small-screen .puzzle-hp-bar { min-height: calc(var(--min-font, 12px) + 8px); }
body.small-screen .battle-turn { top: max(152px, calc(var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + 24px)); }
body.small-screen .menu-btn { right: calc(82px + var(--min-hit, 44px)); }

/* 标题入口改为两列，八个入口在 1080 舞台高内完整显示。 */
.title-btns {
  display: grid;
  grid-template-columns: repeat(2, 420px);
  gap: 16px 18px;
}
body.has-skin .title-btns .ui-btn {
  width: 420px;
  height: 105px;
}

body.small-screen .probe-cell.stepped::after { font-size: max(32px, var(--min-font, 32px)); }
body.small-screen .itemcard { height: max(172px, calc(var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + var(--min-font, 12px) + 40px)); }

/* 第 21.4 条：触屏命中区放大（仅 small-screen 生效，不改画面），确保实际屏幕尺寸 ≥44×44。 */
body.small-screen .ui-btn,
body.small-screen .choice-btn,
body.small-screen .menu-btn,
body.small-screen .speaker-btn,
body.small-screen .map-btn,
body.small-screen .free-hint-btn,
body.small-screen .codex-tab,
body.small-screen .act-seal,
body.small-screen .battle-skill,
body.small-screen .battle-item,
body.small-screen .battle-surrender,
body.small-screen .dark-btn {
  min-width: var(--min-hit, 44px);
  min-height: var(--min-hit, 44px);
}
/* 小字号（标签/数值/提示）按 --min-font 抬升，确保屏幕实际字号 ≥12px。 */
body.small-screen .settings-label,
body.small-screen .settings-options,
body.small-screen .confirm-text,
body.small-screen .codex-detail-text,
body.small-screen .inv-desc,
body.small-screen .free-banner { font-size: max(20px, var(--min-font, 20px)); }

/* 触屏面板命中区：--min-hit 由 stage.js 按 44px 实际屏幕尺寸换算，桌面端为 0px。 */
.settings-panel .settings-grid button,
.ui-panel .panel-close,
.ui-panel .slot-action,
.ui-panel .codex-tab,
.ui-panel .codex-item,
.ui-panel .relation-node {
  min-width: var(--min-hit, 0px);
  min-height: var(--min-hit, 0px);
}

/* 触屏设置页保持两列，行高为命中高度加少量留白，画心独立惯性滚动。 */
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .panel-scroll-body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 164, 92, 0.65) transparent;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .panel-scroll-body::-webkit-scrollbar { width: 5px; }
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .panel-scroll-body::-webkit-scrollbar-track { background: transparent; }
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .panel-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(201, 164, 92, 0.65);
  border-radius: 3px;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-grid {
  grid-template-columns: minmax(0, 48.5%) minmax(0, 51.5%);
  gap: 0;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .settings-row {
  width: 100%;
  height: auto;
  min-height: calc(var(--min-hit, 0px) + 12px);
  padding: 6px 0;
  gap: 4px;
  background-size: 100% 10px;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .settings-label {
  flex: 0 0 auto;
  min-width: 0;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-column-right .settings-row:nth-child(-n+2) .settings-label {
  letter-spacing: 0;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .settings-options,
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .ui-slider {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  gap: 0;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .settings-grid button {
  width: auto;
  height: var(--min-hit, 0px);
  min-width: var(--min-hit, 0px);
  min-height: var(--min-hit, 0px);
  padding-left: 4px;
  padding-right: 4px;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel .ui-toggle {
  width: max(144px, var(--min-hit, 0px));
  flex: 0 0 max(144px, var(--min-hit, 0px));
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel::before,
body:is(.is-touch, .has-min-hit).has-skin .settings-panel::after {
  content: "";
  position: absolute;
  left: 210px;
  right: 210px;
  height: 34px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel::before {
  top: 150px;
  background: linear-gradient(to bottom, rgba(15, 26, 34, 0.96), rgba(15, 26, 34, 0));
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel::after {
  bottom: 150px;
  background: linear-gradient(to top, rgba(15, 26, 34, 0.96), rgba(15, 26, 34, 0));
}
body:is(.is-touch, .has-min-hit).has-skin .settings-panel.can-scroll-up::before,
body:is(.is-touch, .has-min-hit).has-skin .settings-panel.can-scroll-down::after { opacity: 1; }

/* 指定面板的小控件同样使用 44px 实际命中尺寸。 */
body:is(.is-touch, .has-min-hit).has-skin .slot-action {
  width: max(140px, var(--min-hit, 0px));
  height: var(--min-hit, 0px);
}
body:is(.is-touch, .has-min-hit) .codex-item { padding-top: 6px; padding-bottom: 6px; }
body:is(.is-touch, .has-min-hit) .relation-node,
body:is(.is-touch, .has-min-hit) .relation-node.noavatar {
  width: max(96px, var(--min-hit, 0px));
  height: max(96px, var(--min-hit, 0px));
}

/* 面板（设置/见闻册/存档等）打开时，隐藏自由时段的目标面板、提示按钮和气泡，避免盖住面板内容 */
body.panel-open .free-obj-header, body.panel-open .free-obj-title, body.panel-open .free-obj-list,
body.panel-open .free-obj, body.panel-open .free-objective, body.panel-open .free-hint-btn, body.panel-open .free-hint-bubble { visibility: hidden !important; }

/* ---------- 第三卷起：四种新解谜 ---------- */
.sort-slots, .sort-cards {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; width: 1540px; justify-content: center; flex-wrap: wrap;
}
.sort-slots { top: 210px; min-height: 150px; }
.sort-cards { bottom: 130px; }
.sort-slot, .sort-card {
  width: 250px; min-height: 126px; padding: 18px; border: 1px solid var(--gold);
  background: rgba(235, 224, 194, 0.9); color: var(--ink); font: 26px/1.55 var(--font-serif);
  box-shadow: 0 8px 20px rgba(0,0,0,.35); text-align: center;
}
.sort-slot { opacity: .72; border-style: dashed; }
.sort-card { cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.sort-card:hover { transform: translateY(-8px); }
.sort-card.hint, .evidence-clue.hint { animation: puzzleHintPulse 900ms ease-in-out infinite; }
@keyframes puzzleHintPulse { 50% { box-shadow: 0 0 30px 10px rgba(174, 49, 43, .75); } }

.evidence-question { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); font-size: 34px; color: var(--paper); }
.evidence-clues { position: absolute; left: 50%; bottom: 135px; transform: translateX(-50%); display: flex; gap: 24px; width: 1600px; justify-content: center; }
.evidence-clue { width: 280px; min-height: 230px; padding: 24px; border: 1px solid var(--gold); background: rgba(234,222,190,.92); color: var(--ink); font: 27px/1.55 var(--font-serif); cursor: pointer; }
.evidence-clue.selected { opacity: .55; }
.evidence-icon { width: 88px; height: 88px; object-fit: contain; display: block; margin: 0 auto 14px; }
.evidence-confirm { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); z-index: 3; padding: 28px 40px; color: var(--paper); font-size: 30px; text-align: center; background: rgba(15,26,34,.94); border: 1px solid var(--gold); }
.evidence-confirm .dark-btn { margin: 20px 8px 0; }

.spot-stage { position: absolute; left: 160px; top: 130px; width: 1600px; height: 820px; background-size: cover; background-position: center; overflow: hidden; border: 1px solid var(--gold-dim); cursor: crosshair; }
.spot-target { position: absolute; min-width: 88px; min-height: 88px; border: 0; background: transparent; color: transparent; cursor: crosshair; }
.spot-target.found { border: 4px solid var(--seal); border-radius: 50%; color: var(--paper); background: rgba(163,50,42,.18); font: 22px var(--font-serif); }
.spot-target.hint { border: 2px solid rgba(235,218,170,.7); border-radius: 50%; animation: puzzleHintPulse 1.2s ease-in-out infinite; }
.spot-ripple { position: absolute; width: 20px; height: 20px; margin: -10px; border: 2px solid rgba(235,235,220,.8); border-radius: 50%; animation: spotRipple 650ms ease-out forwards; pointer-events: none; }
@keyframes spotRipple { to { transform: scale(5); opacity: 0; } }
.spot-count { position: absolute; right: 180px; top: 145px; z-index: 2; padding: 8px 18px; background: rgba(10,9,8,.7); color: var(--paper); font-size: 24px; }

.timing-flash { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 780px; padding: 42px 70px; background: rgba(239,229,202,.95); color: var(--ink); border: 1px solid var(--gold); font-size: 36px; line-height: 1.8; text-align: center; }
.timing-prompt { position: absolute; top: 300px; left: 50%; transform: translateX(-50%); color: var(--paper); font-size: 36px; }
.timing-bar { position: absolute; left: 360px; top: 520px; width: 1200px; height: 56px; background: rgba(8,12,16,.82); border: 1px solid var(--gold); cursor: pointer; }
.timing-zone { position: absolute; top: 0; height: 100%; background: rgba(163,50,42,.62); }
.timing-cursor { position: absolute; top: -16px; width: 8px; height: 88px; margin-left: -4px; background: #f3e4b3; box-shadow: 0 0 15px rgba(255,255,230,.9); }

/* ---------- 第三卷起：探索发现 discover ---------- */
.discover-layer { position: absolute; inset: 0; pointer-events: auto; }
.discover-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(7,8,8,.38), transparent 22%, transparent 68%, rgba(7,8,8,.34)); }
.discover-head { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); width: 1320px; min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 18px 150px; color: var(--paper); background: linear-gradient(90deg, transparent, rgba(15,26,34,.88) 16%, rgba(15,26,34,.88) 84%, transparent); }
.discover-prompt { font-size: 30px; letter-spacing: .12em; text-shadow: 0 2px 5px #000; }
.discover-count { min-width: 90px; color: var(--gold); font-size: 24px; text-align: center; }
.discover-continue { position: absolute; right: 52px; top: 7px; width: 82px; height: 82px; border: 3px double rgba(239,221,174,.86); border-radius: 50%; color: #f6dfb0; background: rgba(163,50,42,.94); font: 25px var(--font-serif); letter-spacing: .08em; cursor: pointer; transform: rotate(-7deg); box-shadow: 0 0 0 4px rgba(163,50,42,.35), 0 5px 16px rgba(0,0,0,.45); animation: discoverContinueIn 260ms ease-out; }
@keyframes discoverContinueIn { from { opacity: 0; transform: scale(.72) rotate(-15deg); } }
.discover-point { position: absolute; min-width: 88px; min-height: 88px; border: 0; color: var(--paper); background: transparent; font-family: var(--font-serif); cursor: pointer; overflow: visible; }
.discover-halo { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%,-50%); border: 2px solid rgba(241,221,165,.86); border-radius: 50%; box-shadow: 0 0 12px 5px rgba(237,218,160,.34), inset 0 0 10px rgba(255,246,205,.28); animation: discoverBreath 1.8s ease-in-out infinite; }
.discover-person .discover-halo { border-color: rgba(170,208,218,.92); box-shadow: 0 0 13px 6px rgba(98,155,174,.42), inset 0 0 10px rgba(210,240,246,.25); }
@keyframes discoverBreath { 50% { transform: translate(-50%,-50%) scale(1.2); opacity: .55; } }
.discover-label { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); min-width: 110px; padding: 5px 11px; border: 1px solid rgba(184,154,90,.72); color: var(--paper); background: rgba(15,26,34,.88); font-size: 22px; line-height: 1.25; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.discover-point:hover .discover-label, .discover-point:focus-visible .discover-label { color: #fff0bd; border-color: #e0c47c; }
.discover-point.seen { filter: grayscale(1); opacity: .52; cursor: default; pointer-events: none; } /* 已看的点不再拦截点击，避免压住旁边未看的点 */
.discover-point.seen .discover-halo { animation: none; opacity: .38; }
.discover-point.seen .discover-label { color: #aaa; border-color: #666; }
.discover-talks { z-index: 6; pointer-events: none; position: absolute; left: 50%; top: 610px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 15px; width: 680px; }
.discover-talk { pointer-events: auto; position: relative; width: 520px; min-height: 82px; padding: 12px 32px; border: 1px solid var(--gold); color: var(--paper); background: rgba(15,26,34,.9); box-shadow: 0 7px 20px rgba(0,0,0,.4); }
.discover-talk::before { content: "念"; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--seal); font-size: 27px; }
.discover-talk .discover-label { position: static; display: block; transform: none; min-width: 0; padding: 0 0 0 42px; border: 0; background: none; font-size: 25px; text-align: center; white-space: normal; }
.discover-talk.seen { opacity: .48; }
body.small-screen .discover-point { min-width: max(88px, var(--min-hit, 88px)); min-height: max(88px, var(--min-hit, 88px)); }
body.small-screen .discover-continue { min-width: max(82px, var(--min-hit, 82px)); min-height: max(82px, var(--min-hit, 82px)); }

/* ---------- 物品图鉴 / 见闻追加 ---------- */
.codex-extra { position: relative; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(184,154,90,.45); }
.codex-extra-title { color: var(--seal); font-size: 24px; margin-bottom: 8px; }
.codex-extra-text { font-size: 25px; line-height: 1.8; color: var(--ink); }
body.has-skin .codex-extra-text { color: var(--paper); }
.codex-extra-new { position: absolute; right: 0; top: 12px; padding: 1px 7px; color: #fff1d2; background: var(--seal); border-radius: 50%; font-size: 16px; }
.gallery-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.gallery-body { display: flex; gap: 28px; height: 560px; }
.gallery-list { width: 48%; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.gallery-item { min-height: 128px; display: flex; align-items: center; gap: 16px; padding: 12px; color: var(--ink); background: rgba(255,250,235,.38); border: 1px solid var(--gold-dim); font: 24px var(--font-serif); cursor: pointer; }
body.has-skin .gallery-item { color: var(--paper); background: rgba(15,26,34,.45); }
.gallery-item.locked { filter: grayscale(1); opacity: .58; cursor: default; }
.gallery-icon { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; background: rgba(20,20,20,.18); }
.gallery-item.locked .gallery-icon::after { content: "？"; font-size: 42px; color: #777; }
.gallery-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-detail { flex: 1; padding: 28px; border-left: 1px solid var(--gold-dim); }
.gallery-detail-title { font-size: 34px; color: var(--seal); margin-bottom: 20px; }
.gallery-detail-desc, .gallery-detail-chapter, .gallery-weapon-text, .gallery-weapon-skill { font-size: 24px; line-height: 1.7; color: var(--ink); margin-bottom: 14px; }
body.has-skin .gallery-detail-desc, body.has-skin .gallery-detail-chapter, body.has-skin .gallery-weapon-text, body.has-skin .gallery-weapon-skill { color: var(--paper); }
.gallery-weapon { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--gold-dim); }
.gallery-weapon-title { font-size: 27px; color: var(--gold); margin-bottom: 12px; }
.gallery-states { margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); }
.gallery-states-title { font-size: 27px; color: var(--gold); margin-bottom: 10px; }
.gallery-state { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 22px; color: var(--ink); }
body.has-skin .gallery-state { color: var(--paper); }
.gallery-state::before { content: "◆"; color: var(--seal); font-size: 14px; }
.gallery-state-icon { width: 34px; height: 34px; object-fit: contain; }
.gallery-state-desc { color: var(--gold-dim); }
.gallery-empty { padding: 40px; color: var(--gold-dim); font-size: 24px; }

.relation-favor { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); min-width: 74px; display: flex; justify-content: center; align-items: center; gap: 3px; }
.relation-favor-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--seal); box-shadow: 0 0 5px rgba(190,58,48,.8); }
.relation-favor.negative .relation-favor-dot { background: #777; box-shadow: none; }
.relation-favor-num { margin-left: 3px; padding: 1px 5px; border-radius: 8px; color: var(--paper); background: rgba(10,9,8,.75); font-size: 14px; }

/* ---------- 分卷素材加载 ---------- */
.volume-loading { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,26,34,.94); color: var(--paper); pointer-events: auto; }
.volume-loading-label { font-size: 30px; letter-spacing: .18em; margin-bottom: 26px; }
.volume-loading-bar { width: 720px; height: 18px; border: 1px solid var(--gold); background: rgba(0,0,0,.35); }
.volume-loading-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--seal), var(--gold)); transition: width 120ms linear; }