/* ═══════════════════════════════════════════════════
   三国乱世红颜 · 逐句 ADV 播放器
   全屏舞台 / 名牌台词框 / 古风金黑主题
   ═══════════════════════════════════════════════════ */

:root {
  --p-gold: #f0c060;
  --p-gold-dim: #c8a870;
  --p-gold-faint: #a07840;
  --p-text: #f2e8d0;
  --p-text-dim: #b09060;
  --p-bg: #0e0905;
  --p-border-gold: #8b6914;
  --p-heroine: #f0b8d0;
  --p-mono: #c0b090;
  --p-serif: "Source Han Serif CN", "Noto Serif CJK SC", "STSong", Georgia, serif;
  --p-kai: "KaiTi", "STKaiti", "AR PL UKai CN", serif;
  --p-seal-red: #9e2b23;
}

/* 六女主主题色（名牌色条 / 路线卡强调色） */
[data-cid="zhen_ji"]        { --char-c: #a678d8; }  /* 甄姬 · 紫 */
[data-cid="diao_chan"]      { --char-c: #c93b4e; }  /* 貂蝉 · 红 */
[data-cid="sun_shangxiang"] { --char-c: #e05a2b; }  /* 孙尚香 · 朱红 */
[data-cid="cai_wenji"]      { --char-c: #4f9e94; }  /* 蔡文姬 · 青 */
[data-cid="da_qiao"]        { --char-c: #9cc3d5; }  /* 大乔 · 淡青 */
[data-cid="xiao_qiao"]      { --char-c: #ef93b2; }  /* 小乔 · 桃粉 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--p-serif); color: var(--p-text); user-select: none; }

#app { position: fixed; inset: 0; }

/* ── 舞台 ── */
#stage { position: absolute; inset: 0; background: #000; }

#shake-wrap { position: absolute; inset: 0; }
#shake-wrap.shake-1 { animation: shake-s 0.35s ease; }
#shake-wrap.shake-2 { animation: shake-m 0.45s ease; }
#shake-wrap.shake-3 { animation: shake-l 0.6s ease; }
@keyframes shake-s {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px,3px); } 40% { transform: translate(5px,-4px); }
  60% { transform: translate(-4px,2px); } 80% { transform: translate(3px,-2px); }
}
@keyframes shake-m {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-12px,6px); } 30% { transform: translate(10px,-8px); }
  45% { transform: translate(-9px,5px); } 60% { transform: translate(7px,-4px); }
  75% { transform: translate(-5px,3px); } 90% { transform: translate(3px,-2px); }
}
@keyframes shake-l {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-20px,10px); } 25% { transform: translate(18px,-13px); }
  40% { transform: translate(-15px,8px); } 55% { transform: translate(12px,-7px); }
  70% { transform: translate(-8px,5px); } 85% { transform: translate(5px,-3px); }
}

.bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
  opacity: 0; transition: opacity 0.8s ease;
}
.bg-layer.visible { opacity: 1; }
.bg-layer.bg-rule-in {
  animation: bg-rule-in 0.8s cubic-bezier(0.45, 0, 0.2, 1) both;
}
@keyframes bg-rule-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ── 色调滤镜（tint op）——在立绘之上，夜色/回忆滤镜要罩住人物 ── */
#tint-layer {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease; z-index: 6;
}
#tint-layer.tint-tense {
  opacity: 1;
  background: linear-gradient(180deg, rgba(30,8,18,0.28), rgba(8,2,10,0.42));
}
#tint-layer.tint-night {
  opacity: 1;
  background: linear-gradient(180deg, rgba(6,10,34,0.35), rgba(2,4,18,0.45));
}
#tint-layer.tint-memory {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(220,190,130,0.14), rgba(90,70,40,0.3));
}

/* Bad End 前兆：tension 越高越暗、边缘泛红（罩住立绘） */
#tension-overlay {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 2s ease; z-index: 7;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(60,0,0,0.5) 100%);
}
#tension-overlay.t1 { opacity: 0.25; }
#tension-overlay.t2 { opacity: 0.5; }
#tension-overlay.t3 { opacity: 0.8; }

/* ── 立绘槽（左/中/右，各自双缓冲差分） ── */
#sprite-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.sprite-slot {
  position: absolute; bottom: 0; height: 86%; width: 44vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.42s ease, transform 0.42s ease, filter 0.4s ease;
  transform: translateY(1.5%);
}
.sprite-slot.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sprite-slot.pos-l { left: 1%; }
.sprite-slot.pos-c { left: 50%; margin-left: -22vw; }
.sprite-slot.pos-r { right: 1%; }
/* 单人站位时中槽稍偏右，给左侧文字视线留空间 */
.sprite-slot.pos-c.solo { left: 58%; margin-left: -20vw; }

.sprite-slot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  opacity: 0; transition: opacity 0.24s ease;
  filter: drop-shadow(0 0 24px rgba(0,0,0,0.6));
}
.sprite-slot img.on { opacity: 1; }

/* focus：说话者亮、微前倾；他人说话/旁白时压暗
   scale 放在内层 img 上，避免与 .enter-slide-*.visible 的槽级 transform 打架 */
.sprite-slot.dimmed { filter: brightness(0.55) saturate(0.85); }
.sprite-slot.focused { filter: brightness(1.02); }
.sprite-slot.focused img.on { transform: scale(1.015); }
.sprite-slot img { transition: opacity 0.24s ease, transform 0.3s ease; }

/* 说话强调（D1 微演出）：开口瞬间立绘轻微上浮脉冲一次。
   只在槽位刚获得 focused 时由 JS 挂类触发（连续台词不重复脉冲）；
   scale 起止值与 .focused img.on 的静态 scale(1.015) 对齐，避免动画结束跳变 */
@keyframes speak-pulse {
  0%   { transform: scale(1.015) translateY(0); }
  35%  { transform: scale(1.022) translateY(-0.5%); }
  100% { transform: scale(1.015) translateY(0); }
}
.sprite-slot.focused.speak-pulse img.on { animation: speak-pulse 0.34s ease-out 1; }
body.perf-lite .sprite-slot.speak-pulse img.on { animation: none !important; }

/* 入场方向修饰 */
.sprite-slot.enter-slide-l { transform: translate(-4%, 0); }
.sprite-slot.enter-slide-r { transform: translate(4%, 0); }
.sprite-slot.enter-slide-l.visible, .sprite-slot.enter-slide-r.visible { transform: translate(0, 0); }
/* A 组行级退场 op：fade 为默认；slide-l/slide-r 可选。 */
.sprite-slot.exit-slide-l { transform: translateX(-7%); }
.sprite-slot.exit-slide-r { transform: translateX(7%); }

/* ── 特效层 ── */
#fx-flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 45;
  background: #fff; opacity: 0;
}
#fx-flash.on { animation: flash-fx 0.32s ease; }
@keyframes flash-fx { 0% { opacity: 0; } 18% { opacity: 0.92; } 100% { opacity: 0; } }

/* ── 转场遮罩（bg trans）——低于章节大卡(z50后者)，压黑不遮章节演出 ── */
#trans-mask {
  position: absolute; inset: 0; pointer-events: none; z-index: 48;
  background: #000; opacity: 0; transition: opacity 0.5s ease;
}
#trans-mask.on { opacity: 1; pointer-events: all; }
#trans-mask.white { background: #f8f4ea; }
/* WA2 式黑幕对白：幕只压住背景/立绘，ADV 与点击层继续工作。 */
#trans-mask.dialogue { z-index: 8; pointer-events: none; }

/* ── 标题卡（事件题卡）：匾额式装裱 ── */
#title-card {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62); opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease; z-index: 30;
}
#title-card.visible { opacity: 1; }
#title-card-text {
  position: relative;
  font-family: var(--p-kai); font-size: 2.6rem; letter-spacing: 0.5em;
  color: var(--p-gold); text-shadow: 0 2px 3px rgba(0,0,0,0.85), 0 0 30px rgba(240,192,96,0.4);
  border-top: 1px solid var(--p-border-gold); border-bottom: 1px solid var(--p-border-gold);
  padding: 1.35rem 3.4rem 1.35rem 3.9rem;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(20,12,4,0.55), rgba(10,6,2,0.72));
  transform: translateY(10px); transition: transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
#title-card.visible #title-card-text { transform: translateY(0); }
/* 匾额四角：仅上下短竖笔，模拟榫角 */
#title-card-text::before, #title-card-text::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; width: 7px;
  border-top: 1px solid var(--p-gold-dim); border-bottom: 1px solid var(--p-gold-dim);
}
#title-card-text::before { left: 0; border-left: 1px solid var(--p-gold-dim); }
#title-card-text::after  { right: 0; border-right: 1px solid var(--p-gold-dim); }

/* ── 章内字卡（slate op）：时间 / 地点 / 视角切换，低于章节大卡 ── */
#slate-card {
  position: absolute; inset: 0; z-index: 49;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.85rem; background: rgba(0,0,0,0.92);
  opacity: 0; pointer-events: none; transition: opacity 0.55s ease;
}
#slate-card.visible { opacity: 1; pointer-events: auto; }
#slate-card-title {
  font-family: var(--p-kai); font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--p-gold); letter-spacing: 0.38em; padding-left: 0.38em;
  text-shadow: 0 0 24px rgba(240,192,96,0.28);
}
#slate-card-sub {
  min-height: 1.5em; color: var(--p-text-dim); font-size: 0.88rem;
  letter-spacing: 0.18em; padding-left: 0.18em;
}

/* ── 章末悬念钩子卡（hook op：scene_end_hook「下回预告」式底部横条） ── */
#hook-card {
  position: absolute; left: 0; right: 0; bottom: 26%;
  display: flex; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.7s ease;
  z-index: 31;
}
#hook-card.visible { opacity: 1; }
#hook-card-text {
  max-width: 72%;
  background: linear-gradient(90deg,
    transparent, rgba(8,4,2,0.9) 10%, rgba(8,4,2,0.9) 90%, transparent);
  color: #d8c290; font-family: var(--p-kai);
  font-size: 1.05rem; line-height: 1.9; letter-spacing: 0.14em;
  padding: 0.85rem 3rem; text-align: center;
  border-top: 1px solid rgba(200,160,80,0.35);
  border-bottom: 1px solid rgba(200,160,80,0.35);
}

/* ── 回调小字（callback op：「你想起了……」屏幕上方淡金一行，非阻塞） ── */
#callback-note {
  position: absolute; top: 4.5%; left: 50%; transform: translateX(-50%);
  max-width: 74%; text-align: center; pointer-events: none;
  color: rgba(232,200,130,0.92); font-family: var(--p-kai);
  font-size: 0.95rem; line-height: 1.9; letter-spacing: 0.12em;
  text-shadow: 0 1px 6px #000;
  opacity: 0; transition: opacity 1.1s ease; z-index: 28;
}
#callback-note.visible { opacity: 1; }

/* ── Bad End 风声：不弹窗、不点名结局；二阶段只提升演出重量 ── */
#foreshadow-note {
  position: absolute; left: 50%; top: 12%; transform: translate(-50%, -8px);
  max-width: min(78vw, 720px); z-index: 34;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.65rem 1.5rem;
  color: #c7b99b; font-family: var(--p-kai); font-size: 0.9rem;
  line-height: 1.8; letter-spacing: 0.08em; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(16,13,12,0.86) 14%, rgba(16,13,12,0.86) 86%, transparent);
  border-top: 1px solid rgba(174,153,123,0.22);
  border-bottom: 1px solid rgba(174,153,123,0.22);
  opacity: 0; pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s ease, color 0.8s ease;
}
#foreshadow-note.visible { opacity: 1; transform: translate(-50%, 0); }
#foreshadow-mark {
  flex: 0 0 auto; width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border: 1px solid rgba(174,153,123,0.35); border-radius: 50%;
  color: #9e8e74; font-size: 0.72rem; letter-spacing: 0;
}
#foreshadow-note.stage-2 {
  color: #e1b7aa;
  background: linear-gradient(90deg, transparent, rgba(35,8,12,0.92) 12%, rgba(35,8,12,0.92) 88%, transparent);
  border-color: rgba(183,78,67,0.55);
  box-shadow: 0 0 38px rgba(110,20,24,0.22);
}
#foreshadow-note.stage-2 #foreshadow-mark {
  color: #e19a89; border-color: rgba(210,105,88,0.65);
  animation: foreshadow-beat 1.5s ease-in-out 2;
}
@keyframes foreshadow-beat {
  0%, 100% { transform: scale(1); box-shadow: none; }
  45% { transform: scale(1.12); box-shadow: 0 0 16px rgba(190,70,58,0.45); }
}

/* ── 身份暴露风险指示（疑 ▮▮▮░░）——档位变化时短暂浮现于文本框右上 ── */
#exposure-ind {
  position: absolute; right: 1.2rem; top: -1.75rem;
  display: flex; align-items: center; gap: 3px;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
  z-index: 21;
}
#exposure-ind.visible { opacity: 1; }
#exposure-ind .exp-label {
  font-family: var(--p-kai); font-size: 0.82rem; letter-spacing: 0;
  color: #c86a4a; margin-right: 4px; text-shadow: 0 1px 4px #000;
}
#exposure-ind .exp-cell {
  width: 12px; height: 7px; border-radius: 1px;
  background: rgba(120,80,50,0.35); border: 1px solid rgba(160,100,60,0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#exposure-ind .exp-cell.on {
  background: linear-gradient(180deg, #d8703f, #9e3a23);
  box-shadow: 0 0 6px rgba(216,112,63,0.55);
}
#exposure-ind.pulse { animation: exp-pulse 1.1s ease 2; }
@keyframes exp-pulse {
  0%, 100% { transform: none; filter: none; }
  50% { transform: scale(1.07); filter: brightness(1.35); }
}

/* ── 章节大卡（chapter_card op）——高于转场遮罩(z48)，压黑期间照常演出 ── */
#chapter-card {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.012) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 70% 60% at 50% 44%, rgba(139,105,20,0.12), transparent 68%),
    radial-gradient(ellipse at 12% 92%, rgba(60,26,8,0.30), transparent 55%),
    rgba(2,1,0,0.94);
  opacity: 0; pointer-events: none; transition: opacity 0.9s ease;
}
#chapter-card.visible { opacity: 1; }
#chapter-card-kicker {
  position: relative;
  color: var(--p-gold-faint); font-size: 0.8rem; letter-spacing: 0.6em;
  padding: 0 3.2em; padding-left: 3.8em; margin-bottom: 1.7rem;
  opacity: 0; transform: translateY(10px); transition: all 0.7s ease 0.3s;
}
/* kicker 两侧延长金线 */
#chapter-card-kicker::before, #chapter-card-kicker::after {
  content: ""; position: absolute; top: 50%; width: 2.4em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--p-gold-faint));
}
#chapter-card-kicker::before { left: 0; }
#chapter-card-kicker::after  { right: 0; transform: scaleX(-1); }
#chapter-card-title {
  position: relative;
  font-family: var(--p-kai); font-size: 3.2rem; letter-spacing: 0.4em;
  padding: 0.15em 0.55em 0.15em 0.95em; text-align: center;
  /* 与主标题同族的鎏金填字 */
  background: linear-gradient(178deg,
    #fbe9bc 6%, #f4cf7e 32%, #eab84f 52%, #b98a2e 74%, #e2b055 94%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,0.9))
    drop-shadow(0 0 34px rgba(240,192,96,0.30));
  opacity: 0; transform: translateY(14px); transition: all 0.8s ease 0.55s;
}
/* 章题右下朱印：呼应标题页印章 */
#chapter-card-title::after {
  content: "章"; position: absolute; right: -0.9em; bottom: 0.05em;
  font-size: 0.30em; letter-spacing: 0; line-height: 1;
  padding: 0.34em 0.3em 0.26em;
  background: linear-gradient(155deg, #a93529, #71190f);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #f3e6cd; color: #f3e6cd;
  border-radius: 3px; transform: rotate(5deg);
  box-shadow: 0 2px 10px rgba(120,20,10,0.55), inset 0 0 6px rgba(50,5,0,0.5);
  filter: none;
}
#chapter-card-sub {
  margin-top: 2rem; max-width: 620px; text-align: center;
  color: var(--p-text-dim); font-size: 0.92rem; line-height: 2.1; letter-spacing: 0.1em;
  opacity: 0; transform: translateY(10px); transition: all 0.8s ease 0.95s;
}
#chapter-card.visible #chapter-card-kicker,
#chapter-card.visible #chapter-card-title,
#chapter-card.visible #chapter-card-sub { opacity: 1; transform: translateY(0); }

/* ── ADV 文本框 ── */
/* Current markup uses private VN IDs; old selectors support one cached shell generation. */
:is(#vn-dialogue, #adv) {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 2.5vh; width: min(92vw, 1100px); z-index: 20;
  transition: opacity 0.25s ease;
}
:is(#vn-dialogue, #adv).hidden-box { opacity: 0; pointer-events: none; }

#nameplate {
  position: relative; overflow: hidden;
  display: inline-block; margin-left: 1.6rem; margin-bottom: -1px;
  padding: 0.3rem 1.7rem 0.26rem 1.9rem;
  background:
    repeating-linear-gradient(90deg, rgba(255,238,200,0.032) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(36,23,8,0.97), rgba(64,43,14,0.97));
  border: 1px solid var(--p-border-gold); border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-family: var(--p-kai); font-size: 1.05rem; letter-spacing: 0.15em;
  color: var(--p-gold); min-width: 5.5rem; text-align: center;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.35);
  visibility: hidden;
}
/* 角色主题色条（女主按 data-cid 着色，其余用金） */
#nameplate::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--char-c, var(--p-gold-dim)), transparent 130%);
  box-shadow: 0 0 10px 0 var(--char-c, transparent);
}
#nameplate.heroine #speaker-name {
  color: var(--char-c, var(--p-heroine));
  text-shadow: 0 0 12px color-mix(in srgb, var(--char-c, var(--p-heroine)) 45%, transparent);
}
#nameplate.visible { visibility: visible; }

:is(#vn-dialogue-box, #adv-box) {
  position: relative;
  padding: 1.3rem 2.2rem 1.5rem;
  min-height: 7.2rem;
}
/* 底板独立成层：透明度设置只淡化底板，不影响文字（--box-alpha 由设置面板驱动） */
:is(#vn-dialogue-surface, #adv-box-bg) {
  position: absolute; inset: 0; pointer-events: none;
  /* 绢帛质感：斜纹缎光 + 经纬织纹 + 暖褐底（纹理加浓到实机可感知） */
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.034) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,238,200,0.024) 0 1px, transparent 1px 3px),
    linear-gradient(105deg, transparent 38%, rgba(255,238,200,0.028) 50%, transparent 62%),
    radial-gradient(ellipse at 50% 0%, rgba(139,105,20,0.14), transparent 65%),
    linear-gradient(180deg, rgba(22,14,7,0.90), rgba(11,7,3,0.95));
  border: 1px solid var(--p-border-gold);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), inset 0 0 60px rgba(139,105,20,0.08);
  backdrop-filter: blur(6px);
  opacity: var(--box-alpha, 1);
  transition: opacity 0.2s ease;
}
/* 内衬细金线，双重描边的装裱感 */
:is(#vn-dialogue-surface, #adv-box-bg)::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid rgba(240,192,96,0.16); border-radius: 7px;
}
/* 顶缘一道极淡的金光，压出「上装裱」 */
:is(#vn-dialogue-surface, #adv-box-bg)::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240,192,96,0.5), transparent);
}
:is(#vn-dialogue-text, #adv-text) {
  position: relative; z-index: 1;
  font-size: 1.12rem; line-height: 2.05; letter-spacing: 0.02em;
  min-height: 4.2rem; max-height: 22vh; overflow-y: auto;
  /* 行长上限（P2-1）：1100px 框内 ~57 字/行超出中文 30–45 字舒适区，
     正文区限 46em（~46 字/行）居中；移动断点框宽更窄，天然不受影响 */
  max-width: 46em; margin-inline: auto;
}
/* 文字描边（设置可关）：底板调透明后仍保证低对比背景下的可读性 */
body.text-outline :is(#vn-dialogue-text, #adv-text) {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95), 0 -1px 2px rgba(0,0,0,0.8),
    1px 0 2px rgba(0,0,0,0.8), -1px 0 2px rgba(0,0,0,0.8),
    0 0 8px rgba(0,0,0,0.7);
}
body.text-outline #speaker-name {
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7);
}
:is(#vn-dialogue-text, #adv-text) .say-quote { color: #fff2dc; }
:is(#vn-dialogue-text, #adv-text).mono-line { font-style: italic; color: var(--p-mono); }
:is(#vn-dialogue-text, #adv-text).mono-line::before { content: "──"; opacity: 0.5; margin-right: 0.4em; }
:is(#vn-dialogue-text, #adv-text).narration { color: var(--p-text); }
/* 二周目跨线对照行（reactive op）：月白色 + 微光，与旁白/独白明显区隔 */
:is(#vn-dialogue-text, #adv-text).reactive-line {
  font-style: italic; color: #a8c8d8;
  text-shadow: 0 0 10px rgba(120, 180, 210, 0.35);
}
:is(#vn-dialogue-text, #adv-text).reactive-line::before {
  content: "◈ "; color: #6fa8c0; opacity: 0.85; font-style: normal;
}

:is(#vn-dialogue-indicator, #adv-indicator) {
  position: absolute; right: 1.4rem; bottom: 0.7rem;
  color: var(--p-gold-dim); font-size: 0.8rem;
  animation: bob 1.1s ease-in-out infinite; opacity: 0;
}
:is(#vn-dialogue-indicator, #adv-indicator).visible { opacity: 1; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── 选项 ── */
#choices {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(88vw, 760px); z-index: 25;
  display: flex; flex-direction: column; gap: 0.9rem;
}
#choices .choice-btn {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.026) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(26,17,6,0.95), rgba(44,29,10,0.95));
  border: 1px solid var(--p-border-gold); border-radius: 8px;
  color: var(--p-text); font-family: var(--p-serif);
  font-size: 1rem; line-height: 1.75; letter-spacing: 0.02em;
  padding: 1rem 1.6rem 1rem 2.6rem; cursor: pointer; text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(240,192,96,0.06);
  opacity: 0; transform: translateY(12px);
  animation: choice-in 0.4s ease forwards;
}
#choices .choice-btn:nth-child(2) { animation-delay: 0.08s; }
#choices .choice-btn:nth-child(3) { animation-delay: 0.16s; }
#choices .choice-btn:nth-child(4) { animation-delay: 0.24s; }
@keyframes choice-in { to { opacity: 1; transform: translateY(0); } }
/* 左侧菱形标记 */
#choices .choice-btn::before {
  content: "◆"; position: absolute; left: 1.1rem; top: 50%;
  transform: translateY(-50%) scale(0.6) rotate(0deg);
  color: var(--p-gold-faint); font-size: 0.8rem;
  transition: all 0.22s ease;
}
/* hover 金光扫过 */
#choices .choice-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(240,192,96,0.14), transparent);
  transform: skewX(-18deg); transition: left 0.45s ease; pointer-events: none;
}
#choices .choice-btn:hover {
  border-color: var(--p-gold); color: #fff;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.02) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(52,33,10,0.97), rgba(72,47,14,0.97));
  box-shadow: 0 0 26px rgba(240,192,96,0.28), inset 0 0 0 1px rgba(240,192,96,0.22),
              inset 0 0 24px rgba(240,192,96,0.07);
  transform: translateX(6px);
}
#choices .choice-btn:hover::before {
  color: var(--p-gold); transform: translateY(-50%) scale(0.85) rotate(90deg);
  text-shadow: 0 0 10px rgba(240,192,96,0.8);
}
#choices .choice-btn:hover::after { left: 120%; }

/* ── 快捷工具栏 ── */
#quick-bar {
  position: absolute; right: 1rem; top: 1rem; z-index: 40;
  /* idle 0.35 可发现性偏弱（P2-7）：提到 0.55，hover 仍全亮 */
  display: flex; gap: 0.4rem; opacity: 0.55; transition: opacity 0.2s;
}
#quick-bar:hover { opacity: 1; }
#quick-bar button {
  background: linear-gradient(180deg, rgba(24,15,6,0.88), rgba(12,7,3,0.9));
  border: 1px solid rgba(139,105,20,0.75);
  color: var(--p-gold-dim); font-size: 0.68rem; letter-spacing: 0.08em;
  padding: 0.5rem 0.8rem; border-radius: 5px; cursor: pointer;
  font-family: var(--p-serif); transition: all 0.15s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#quick-bar button:hover {
  color: var(--p-gold); border-color: var(--p-gold);
  box-shadow: 0 0 12px rgba(240,192,96,0.2);
}
#quick-bar button.active {
  background: linear-gradient(180deg, #8b6914, #6a4f0e); color: #fff;
  box-shadow: 0 0 14px rgba(240,192,96,0.35), inset 0 1px 0 rgba(255,235,180,0.3);
}

/* ── BGM 徽标 ── */
#bgm-badge {
  position: absolute; left: 1.2rem; top: 1rem; z-index: 15;
  font-size: 0.75rem; color: var(--p-gold-faint); letter-spacing: 0.1em;
  opacity: 0; transition: opacity 1s ease;
  text-shadow: 0 1px 4px #000;
}
#bgm-badge.visible { opacity: 0.85; }
/* 回顾横幅（left:1rem top:1rem, z41）在场时会盖住曲名徽标（P2-6）：回顾中直接藏 badge */
#stage:has(#preview-banner:not(.hidden)) #bgm-badge { opacity: 0 !important; }

/* ── AUTO / SKIP 模式角标（bgm 徽标下方，进行中常驻脉冲） ── */
#mode-ind {
  position: absolute; left: 1.2rem; top: 2.6rem; z-index: 15;
  font-size: 0.72rem; letter-spacing: 0.2em; padding: 0.2rem 0.7rem;
  color: var(--p-gold); border: 1px solid rgba(240,192,96,0.5);
  border-radius: 12px; background: rgba(20,12,4,0.75);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  text-shadow: 0 1px 4px #000;
}
#mode-ind.visible { opacity: 0.9; animation: mode-pulse 1.4s ease-in-out infinite; }
#mode-ind.skip { color: #ffd890; border-color: rgba(255,216,144,0.6); animation-duration: 0.7s; }
@keyframes mode-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.5; } }
body.perf-lite #mode-ind.visible { animation: none; }

/* ── 看 CG 模式（HIDE / H 键）：文本框之外的 UI 一并隐藏，画面零遮挡 ── */
#stage.ui-hidden #quick-bar,
#stage.ui-hidden #choices,
#stage.ui-hidden #bgm-badge,
#stage.ui-hidden #mode-ind,
#stage.ui-hidden #preview-banner {
  opacity: 0 !important; pointer-events: none !important;
}

/* ── 序章跳过按钮（右上角，仅二周目/已看过序章时显示）
   桌面基档下移到 #quick-bar（right:1rem top:1rem）之下，避免同位重叠误触；
   移动断点各自用 safe-t 复位，不受影响。 ── */
#prologue-skip {
  position: absolute; right: 1rem; top: 3.4rem; z-index: 41;
  background: rgba(14, 9, 4, 0.78);
  border: 1px solid var(--p-gold-dim); border-radius: 18px;
  color: var(--p-gold); font-family: var(--p-serif);
  font-size: 0.78rem; letter-spacing: 0.08em;
  padding: 0.42rem 1.1rem; cursor: pointer;
  transition: all 0.2s;
}
#prologue-skip:hover {
  color: #fff; border-color: var(--p-gold);
  box-shadow: 0 0 18px rgba(240,192,96,0.35);
}
#prologue-skip.hidden { display: none; }
#stage.ui-hidden #prologue-skip { opacity: 0; pointer-events: none; }

/* ── Backlog 回顾模式横幅（左上角，点击返回原进度） ── */
#preview-banner {
  position: absolute; left: 1rem; top: 1rem; z-index: 41;
  background: linear-gradient(180deg, rgba(40,26,8,0.94), rgba(22,13,4,0.94));
  border: 1px solid var(--p-gold-dim); border-radius: 18px;
  color: var(--p-gold); font-family: var(--p-serif);
  font-size: 0.78rem; letter-spacing: 0.08em;
  padding: 0.42rem 1.1rem; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 0 14px rgba(240,192,96,0.15);
  animation: mode-pulse 1.6s ease-in-out infinite;
}
#preview-banner:hover {
  color: #fff; border-color: var(--p-gold);
  box-shadow: 0 0 18px rgba(240,192,96,0.35);
  animation: none;
}

/* ── Toast ── */
#toast-area {
  /* top 8% 与 foreshadow-note（top 12%）竖向拥挤（P2-8）：上移到 4% 拉开间距 */
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  /* Settings/save failures must remain readable above the open overlay (200). */
  z-index: 220; display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(20,12,4,0.94); border: 1px solid var(--p-border-gold);
  color: var(--p-gold); padding: 0.55rem 1.4rem; border-radius: 20px;
  font-size: 0.85rem; letter-spacing: 0.05em;
  animation: toast-in 0.3s ease, toast-out 0.5s ease 2.8s forwards;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.toast.butterfly { color: #ffdf80; border-color: #d0a020; }
/* 嫉妒触发（三角关系）：绛紫色长驻 toast，停留时间由 JS 延长到 7s */
.toast.jealousy {
  color: #e8b8d0; border-color: #a04878;
  animation: toast-in 0.3s ease, toast-out 0.5s ease 6.3s forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ── 菜单画面（标题 / 路线选择） ── */
#menu-screen, #chapter-screen {
  position: absolute; inset: 0; z-index: 100;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(160deg, #0c0804 0%, #171008 55%, #080502 100%);
}
/* 全屏入场压黑揭幕（WA2 式克制开场） */
#menu-screen::after, #chapter-screen::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: #000;
  animation: menu-unveil 1.4s ease 0.05s both;
}
@keyframes menu-unveil { from { opacity: 1; } to { opacity: 0; } }

/* 主视觉：洛神赋卷轴画——让画本身成为标题页的主角，
   只在下半屏（路线卡区）渐隐入暗，保住卡片可读性 */
.menu-kv {
  position: fixed; inset: 0; pointer-events: none;
  background: url("/images/scenes/zhenji_luoshen.webp") center 24% / cover no-repeat;
  opacity: 0.78;
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0.95) 0%, #000 36%, rgba(0,0,0,0.82) 60%,
    rgba(0,0,0,0.38) 82%, transparent 98%);
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,0.95) 0%, #000 36%, rgba(0,0,0,0.82) 60%,
    rgba(0,0,0,0.38) 82%, transparent 98%);
  animation: kv-drift 52s ease-in-out infinite alternate;
  filter: brightness(0.94) saturate(0.96);
}
@keyframes kv-drift {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.2%); }
}

/* 水墨氛围层：轻手——只留四缘暗角与底部收墨，别再把主视觉压死 */
.menu-ink {
  position: fixed; inset: -10%; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%, transparent 62%, rgba(5,3,1,0.48) 100%),
    linear-gradient(180deg, rgba(8,5,2,0.26), transparent 24%, transparent 60%, rgba(5,3,1,0.72) 96%);
  animation: ink-drift 38s ease-in-out infinite alternate;
}
@keyframes ink-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(1.2%, -1%); }
}

.menu-inner {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto; padding: 5vh 2rem 6vh;
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}

/* ── 标题区 ── */
.title-block {
  position: relative;
  text-align: center; margin-bottom: 5vh;
  animation: menu-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 标题后的暗色墨带：主视觉提亮后保证标题可读，柔边不显形 */
.title-block::before {
  content: ""; position: absolute; inset: -18% -14%;
  pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 62% 74% at 50% 46%,
    rgba(6,3,1,0.62), rgba(6,3,1,0.34) 55%, transparent 78%);
  filter: blur(2px);
}
@keyframes menu-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.title-kicker {
  color: var(--p-gold-faint); font-size: 0.78rem; letter-spacing: 0.55em;
  padding-left: 0.55em; margin-bottom: 1.4rem;
  animation: menu-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.title-row { position: relative; display: inline-block; }
.game-title {
  font-family: var(--p-kai); font-weight: 700;
  font-size: clamp(3rem, 7.5vw, 4.8rem); letter-spacing: 0.22em;
  padding-left: 0.22em; line-height: 1.25;
  /* 毛笔鎏金：金箔渐变填字 + 墨色沉底 + 金晕 */
  background: linear-gradient(178deg,
    #fbe9bc 6%, #f4cf7e 30%, #eab84f 48%, #a5761f 72%, #e2b055 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(52,30,4,0.45);
  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,0.9))
    drop-shadow(0 0 18px rgba(240,192,96,0.30))
    drop-shadow(0 0 60px rgba(240,192,96,0.18));
  animation: menu-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
/* 朱砂印章 */
.title-seal {
  position: absolute; right: -3.4rem; bottom: 0.5rem;
  writing-mode: vertical-rl;
  font-family: var(--p-kai); font-size: 1.02rem; letter-spacing: 0.28em;
  color: #f3e6cd; line-height: 1;
  background: linear-gradient(155deg, #b23a2e, #7d1d14);
  border: 1px solid rgba(255,200,180,0.25); border-radius: 4px;
  padding: 0.55rem 0.34rem;
  box-shadow: 0 3px 14px rgba(120,20,10,0.55), inset 0 0 8px rgba(50,5,0,0.5);
  transform: rotate(4deg);
  animation: seal-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s both;
}
@keyframes seal-stamp {
  from { opacity: 0; transform: rotate(4deg) scale(1.7); }
  to   { opacity: 1; transform: rotate(4deg) scale(1); }
}
.title-rule {
  position: relative; width: min(430px, 62vw); height: 1px;
  margin: 1.5rem auto 1.1rem;
  background: linear-gradient(90deg,
    transparent, var(--p-border-gold) 22%, var(--p-gold) 50%,
    var(--p-border-gold) 78%, transparent);
  animation: rule-unfurl 0.9s ease 0.55s both;
}
@keyframes rule-unfurl {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.title-rule::after {
  content: "◆"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.62);
  color: var(--p-gold); font-size: 0.7rem;
  text-shadow: 0 0 10px rgba(240,192,96,0.9);
}
.game-subtitle {
  color: var(--p-text-dim); font-size: 0.9rem;
  letter-spacing: 0.34em; padding-left: 0.34em;
  animation: menu-rise 0.9s ease 0.65s both;
}

/* ── 路线卡 ── */
#route-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem; margin-bottom: 3vh;
}
.route-card {
  position: relative; display: flex; gap: 1rem; align-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.02) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(20,13,4,0.88), rgba(30,21,9,0.88));
  backdrop-filter: blur(5px);
  border: 1px solid #462c12; border-radius: 10px;
  padding: 1.1rem 1.2rem 1.1rem 1.45rem;
  cursor: pointer; overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
  animation: card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 入场 stagger */
.route-card:nth-child(1) { animation-delay: 0.55s; }
.route-card:nth-child(2) { animation-delay: 0.65s; }
.route-card:nth-child(3) { animation-delay: 0.75s; }
.route-card:nth-child(4) { animation-delay: 0.85s; }
.route-card:nth-child(5) { animation-delay: 0.95s; }
.route-card:nth-child(6) { animation-delay: 1.05s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 女主主题色条 */
.route-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--char-c, var(--p-gold-dim)), transparent 135%);
  opacity: 0.65; transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
/* hover 金光斜扫 */
.route-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(240,192,96,0.10), transparent);
  transform: skewX(-18deg); transition: left 0.5s ease; pointer-events: none;
}
.route-card:hover {
  border-color: var(--char-c, var(--p-gold)); transform: translateY(-4px);
  box-shadow:
    0 10px 34px rgba(0,0,0,0.55),
    0 0 22px color-mix(in srgb, var(--char-c, var(--p-gold)) 22%, transparent);
}
.route-card:hover::before { opacity: 1; box-shadow: 0 0 14px 0 var(--char-c, var(--p-gold)); }
.route-card:hover::after { left: 130%; }
.route-card.locked { opacity: 0.45; cursor: default; }
.route-card.locked:hover {
  transform: none; border-color: #3d2610; box-shadow: none;
}
.route-card.locked:hover::before { opacity: 0.65; box-shadow: none; }
.route-card.locked::after { display: none; }
.route-card.completed { border-color: #4a6a4a; }
.route-card img.portrait {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top;
  border: 2px solid var(--p-border-gold); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(139,105,20,0.18), 0 4px 14px rgba(0,0,0,0.5);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.route-card:hover img.portrait {
  transform: scale(1.07);
  border-color: var(--char-c, var(--p-gold));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--char-c, var(--p-gold)) 30%, transparent),
              0 4px 18px rgba(0,0,0,0.6);
}
.route-card .r-info { flex: 1; min-width: 0; }
.route-card .r-name {
  font-family: var(--p-kai); font-size: 1.3rem; color: var(--p-gold);
  letter-spacing: 0.15em; transition: color 0.2s;
}
.route-card:hover .r-name { color: #ffe9b8; text-shadow: 0 0 14px rgba(240,192,96,0.4); }
.route-card .r-line { font-size: 0.8rem; color: var(--p-heroine); margin: 0.15rem 0 0.3rem; }
.route-card .r-progress { font-size: 0.72rem; color: var(--p-text-dim); }
.route-card .r-lock { font-size: 0.72rem; color: #b08268; } /* 对比度 3.2→~5:1（P2-13） */
.route-card .r-done { position: absolute; right: 0.9rem; top: 0.7rem; color: #80c080; font-size: 0.72rem; letter-spacing: 0.1em; }

.menu-links {
  display: flex; justify-content: center; gap: 2rem; margin-top: 2vh;
  animation: menu-rise 0.8s ease 1.15s both;
}
.menu-links a {
  color: var(--p-gold-dim); text-decoration: none; font-size: 0.88rem;
  letter-spacing: 0.15em; border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: all 0.15s;
}
.menu-links a:hover {
  color: var(--p-gold); border-bottom-color: var(--p-gold);
  text-shadow: 0 0 12px rgba(240,192,96,0.5);
}

/* ── 章节选择 ── */
#chapter-screen h2 {
  font-family: var(--p-kai); font-size: 2.2rem; letter-spacing: 0.3em;
  text-align: center; margin-bottom: 0.6rem; padding-left: 0.3em;
  background: linear-gradient(178deg, #fbe9bc 10%, #eab84f 55%, #b98a2e 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 22px rgba(240,192,96,0.25));
  animation: menu-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#chapter-screen p {
  text-align: center; color: var(--p-text-dim); font-size: 0.85rem;
  letter-spacing: 0.12em; margin-bottom: 3vh;
  animation: menu-rise 0.8s ease 0.12s both;
}
#chapter-list { display: grid; gap: 0.8rem; max-width: 720px; margin: 0 auto 3vh; }
.chapter-item {
  position: relative; display: flex; align-items: center; gap: 1rem;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.012) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(22,14,4,0.92), rgba(26,18,7,0.92));
  border: 1px solid #3d2610; border-radius: 8px;
  padding: 1rem 1.3rem; cursor: pointer; overflow: hidden;
  transition: border-color 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.07s);
}
.chapter-item::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(240,192,96,0.09), transparent);
  transform: skewX(-18deg); transition: left 0.45s ease; pointer-events: none;
}
.chapter-item:hover {
  border-color: var(--p-gold); transform: translateX(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 18px rgba(240,192,96,0.10);
}
.chapter-item:hover::after { left: 130%; }
.chapter-item.locked { opacity: 0.4; cursor: default; }
.chapter-item.locked:hover { transform: none; border-color: #3d2610; box-shadow: none; }
.chapter-item.locked::after { display: none; }
.chapter-item.current {
  border-color: var(--p-gold);
  box-shadow: 0 0 20px rgba(240,192,96,0.12), inset 0 0 24px rgba(139,105,20,0.08);
}
.chapter-item.completed { border-color: #4a6a4a; opacity: 0.75; }
.chapter-item .c-num {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--p-kai);
  background: linear-gradient(135deg, #3a2808, #5a3c10);
  border: 1px solid var(--p-border-gold); color: var(--p-gold); font-size: 0.98rem;
  box-shadow: inset 0 1px 0 rgba(255,235,180,0.15), 0 2px 8px rgba(0,0,0,0.4);
  transition: box-shadow 0.2s ease;
}
.chapter-item:hover .c-num { box-shadow: 0 0 14px rgba(240,192,96,0.3), inset 0 1px 0 rgba(255,235,180,0.2); }
.chapter-item.completed .c-num { background: linear-gradient(135deg, #1a3a1a, #2a5020); border-color: #608060; color: #80c080; }
.chapter-item .c-title { color: var(--p-text); font-size: 0.98rem; }
.chapter-item .c-body { flex: 1; min-width: 0; }
.chapter-item .c-desc { color: var(--p-text-dim); font-size: 0.75rem; margin-top: 0.15rem; }

/* ── 分支探索地图（X2）：逐章计数行 + 已读微型进度条 ── */
#chapter-route-explore {
  color: var(--p-gold-dim); font-size: 0.78rem; letter-spacing: 0.1em;
}
#chapter-route-explore.hidden { display: none; }
.chapter-item .c-explore {
  display: flex; align-items: center; gap: 0.55rem;
  margin-top: 0.4rem; font-size: 0.72rem; color: var(--p-gold-dim);
  letter-spacing: 0.06em;
}
.chapter-item .ce-bar {
  flex: 0 1 120px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(61,38,16,0.85); border: 1px solid rgba(139,105,20,0.35);
}
.chapter-item .ce-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #8b6914, var(--p-gold));
  transition: width 0.5s ease;
}
.chapter-item.locked .c-explore { opacity: 0.75; }
.back-btn {
  display: block; margin: 0 auto; background: rgba(14,9,4,0.6);
  border: 1px solid #3d2610;
  color: var(--p-gold-dim); padding: 0.5rem 2.4rem; border-radius: 20px;
  cursor: pointer; font-family: var(--p-serif); font-size: 0.85rem; letter-spacing: 0.1em;
  transition: all 0.15s;
  animation: menu-rise 0.7s ease 0.5s both;
}
.back-btn:hover {
  border-color: var(--p-gold); color: var(--p-gold);
  box-shadow: 0 0 16px rgba(240,192,96,0.18);
}

/* ── 覆盖层（backlog / 存档 / 设置 / 画廊） ── */
#overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
#overlay-panel {
  position: relative;
  width: min(92vw, 860px); max-height: 84vh; display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(0deg, rgba(255,238,200,0.022) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #181109, #0e0905);
  border: 1px solid var(--p-border-gold); border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(240,192,96,0.07);
  animation: overlay-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes overlay-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#overlay-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #3d2610;
  background: linear-gradient(180deg, rgba(139,105,20,0.08), transparent);
  border-radius: 12px 12px 0 0;
}
#overlay-title { font-family: var(--p-kai); color: var(--p-gold); font-size: 1.2rem; letter-spacing: 0.2em; }
#overlay-close { background: none; border: none; color: var(--p-gold-dim); font-size: 1.1rem; cursor: pointer; }
#overlay-close:hover { color: var(--p-gold); }
#overlay-body { padding: 1.3rem 1.5rem; overflow-y: auto; }

/* backlog */
.log-hint {
  color: #8a7a5f; font-size: 0.75rem; letter-spacing: 0.04em; /* A-P2-12：#706050→#8a7a5f，对比度 3.48→≥4.5 */
  margin-bottom: 1rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(61,38,16,0.5);
}
.log-entry { margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(61,38,16,0.5); }
/* 可回跳行：hover 高亮 + 左缘 ◄ 提示 */
.log-entry.jumpable { position: relative; cursor: pointer; padding-left: 1.2rem; transition: background 0.15s ease; border-radius: 6px; }
.log-entry.jumpable::before {
  content: "◄"; position: absolute; left: 0; top: 0.15rem;
  color: var(--p-gold-faint); font-size: 0.7rem; opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.log-entry.jumpable:hover { background: rgba(139,105,20,0.10); }
.log-entry.jumpable:hover::before { opacity: 1; color: var(--p-gold); }
.log-speaker { font-size: 0.78rem; color: var(--p-heroine); letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.log-speaker.player { color: var(--p-gold); }
.log-text { font-size: 0.95rem; line-height: 1.9; color: var(--p-text); user-select: text; }
.log-text.mono { font-style: italic; color: var(--p-mono); }
.log-text.reactive { font-style: italic; color: #a8c8d8; }
.log-text.reactive::before { content: "◈ "; color: #6fa8c0; font-style: normal; }
.log-choice { color: #90c090; font-size: 0.85rem; }
.log-choice::before { content: "▸ 选择："; opacity: 0.7; }

/* 存档槽（12 手动 + 3 自动 + Q.Save；缩略图作背景） */
.save-sec-head {
  color: var(--p-gold-dim); font-size: 0.82rem; letter-spacing: 0.14em;
  margin: 1.2rem 0 0.7rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid #3d2610;
}
.save-sec-head:first-child { margin-top: 0; }
.saves-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}
.save-slot {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(21,14,4,0.8); border: 1px solid #3d2610; border-radius: 8px;
  padding: 0.85rem 1.1rem; min-height: 4.6rem;
  cursor: pointer; transition: all 0.15s;
  background-size: cover; background-position: center;
}
.save-slot:hover { border-color: var(--p-gold); box-shadow: 0 0 16px rgba(240,192,96,0.12); }
.save-slot.readonly { cursor: default; opacity: 0.55; }
.save-slot.readonly:hover { border-color: #3d2610; box-shadow: none; }
.save-slot .s-num { font-family: var(--p-kai); font-size: 1.4rem; color: var(--p-gold-faint); width: 2.2rem; text-align: center; flex-shrink: 0; }
.save-slot .s-info { flex: 1; min-width: 0; }
.save-slot .s-main {
  color: var(--p-text); font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.save-slot .s-quote {
  color: var(--p-gold-dim); font-size: 0.78rem; margin-top: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.save-slot .s-sub { color: var(--p-text-dim); font-size: 0.72rem; margin-top: 0.25rem; }
.save-slot .s-empty { color: #8a7a5f; font-size: 0.85rem; } /* A-P2-12：3.24→≥4.5 */
/* 自定义备注（X3）：金色手记行，与台词摘要区分 */
.save-slot .s-note {
  color: var(--p-gold); font-size: 0.78rem; margin-top: 0.15rem;
  letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.save-slot .s-note.hidden { display: none; }
.save-note-row input[type=text] {
  flex: 1; min-width: 0;
  background: rgba(14,9,4,0.8); border: 1px solid #3d2610; border-radius: 6px;
  color: var(--p-text); font-size: 0.85rem; padding: 0.45rem 0.7rem;
  font-family: inherit; letter-spacing: 0.03em;
}
.save-note-row input[type=text]:focus {
  outline: none; border-color: var(--p-gold);
  box-shadow: 0 0 10px rgba(240,192,96,0.18);
}

/* 标题页「继续游戏」 */
#continue-wrap { margin: 0 0 1.6rem; }
#continue-wrap.hidden { display: none; }
#continue-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  width: 100%; max-width: 30rem;
  padding: 0.9rem 1.4rem;
  background: linear-gradient(135deg, rgba(58,40,16,0.9), rgba(33,20,7,0.9));
  border: 1px solid var(--p-gold-faint); border-radius: 10px;
  color: var(--p-gold); font-family: inherit; cursor: pointer;
  transition: all 0.2s; text-align: left;
}
#continue-btn:hover {
  border-color: var(--p-gold);
  box-shadow: 0 0 20px rgba(240,192,96,0.18);
  transform: translateY(-1px);
}
#continue-btn .cont-label { font-size: 1.02rem; letter-spacing: 0.18em; }
#continue-btn .cont-meta { color: var(--p-text-dim); font-size: 0.76rem; letter-spacing: 0.04em; }

/* 标题页「新游戏」（UX-01）：视觉族复用继续游戏；新玩家态 primary 高亮 */
#newgame-wrap { margin: 0 0 1.6rem; }
#newgame-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  width: 100%; max-width: 30rem;
  padding: 0.9rem 1.4rem;
  background: linear-gradient(135deg, rgba(58,40,16,0.9), rgba(33,20,7,0.9));
  border: 1px solid var(--p-gold-faint); border-radius: 10px;
  color: var(--p-gold); font-family: inherit; cursor: pointer;
  transition: all 0.2s; text-align: left;
}
#newgame-btn:hover {
  border-color: var(--p-gold);
  box-shadow: 0 0 20px rgba(240,192,96,0.18);
  transform: translateY(-1px);
}
#newgame-btn .ng-label { font-size: 1.02rem; letter-spacing: 0.18em; }
#newgame-btn .ng-meta { color: var(--p-text-dim); font-size: 0.76rem; letter-spacing: 0.04em; }
/* 新玩家态：金框呼吸高亮，标题屏第一眼即知从哪开始 */
#newgame-btn.primary {
  border-color: var(--p-gold);
  box-shadow: 0 0 18px rgba(240,192,96,0.22);
  animation: ng-breathe 2.6s ease-in-out infinite;
}
@keyframes ng-breathe {
  0%, 100% { box-shadow: 0 0 12px rgba(240,192,96,0.16); }
  50% { box-shadow: 0 0 26px rgba(240,192,96,0.34); }
}
body.perf-lite #newgame-btn.primary { animation: none; }
@media (prefers-reduced-motion: reduce) { #newgame-btn.primary { animation: none; } }

/* 序章引导卡（UX-01）：新玩家首次点路线卡的轻量二选一 */
#prologue-guide {
  /* 必须压过 #menu-screen(100)/#overlay(200)，否则点击被标题屏拦截 */
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 3, 1, 0.72); backdrop-filter: blur(3px);
}
#prologue-guide.hidden { display: none; }
#prologue-guide .pg-card {
  display: flex; flex-direction: column; gap: 0.7rem;
  width: min(26rem, calc(100vw - 3rem));
  padding: 1.6rem 1.8rem 1.4rem;
  background: linear-gradient(165deg, rgba(28,18,8,0.98), rgba(14,8,4,0.98));
  border: 1px solid var(--p-border-gold); border-radius: 12px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.7);
}
#prologue-guide .pg-title {
  color: var(--p-gold); font-size: 1.15rem; letter-spacing: 0.3em;
}
#prologue-guide .pg-text {
  color: var(--p-text-dim); font-size: 0.88rem; line-height: 1.8;
  margin-bottom: 0.5rem;
}
#prologue-guide button {
  min-height: 46px; padding: 0.6rem 1rem;
  background: linear-gradient(180deg, rgba(34,22,9,0.9), rgba(18,11,5,0.92));
  border: 1px solid rgba(139,105,20,0.6); border-radius: 8px;
  color: var(--p-gold-dim); font-family: inherit;
  font-size: 0.9rem; letter-spacing: 0.1em; cursor: pointer;
  transition: all 0.15s;
}
#prologue-guide button:hover { color: var(--p-gold); border-color: var(--p-gold); }
#prologue-guide .pg-primary {
  background: linear-gradient(180deg, #8b6914, #6a4f0e);
  border-color: var(--p-gold); color: #fff;
}

/* 设置 */
.setting-row { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; }
.setting-row label { width: 8.5rem; color: var(--p-gold-dim); font-size: 0.9rem; letter-spacing: 0.08em; flex-shrink: 0; }
/* 滑杆重绘（MOB-02 统一制式）：appearance:none 金色 thumb，
   桌面 thumb 18px；触控档由 T4 块的 min-height:44px 扩命中区 */
.setting-row input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 24px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.setting-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #2c1a06, #3d2610);
  border: 1px solid rgba(61,38,16,0.9);
}
.setting-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  margin-top: -8px;
  background: radial-gradient(circle at 35% 30%, #f6d894, var(--p-gold) 55%, #a5761f);
  border: 1px solid var(--p-border-gold);
  box-shadow: 0 1px 5px rgba(0,0,0,0.6);
}
.setting-row input[type=range]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: #3d2610; border: 1px solid rgba(61,38,16,0.9);
}
.setting-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6d894, var(--p-gold) 55%, #a5761f);
  border: 1px solid var(--p-border-gold);
  box-shadow: 0 1px 5px rgba(0,0,0,0.6);
}
.setting-row input[type=range]:focus-visible {
  outline: 2px solid var(--p-gold); outline-offset: 2px; border-radius: 4px;
}
.setting-row .val { width: 3rem; text-align: right; color: var(--p-text-dim); font-size: 0.85rem; }
.setting-row select {
  background: #1a1008; color: var(--p-text); border: 1px solid #3d2610;
  border-radius: 5px; padding: 0.3rem 0.6rem; font-family: var(--p-serif);
}
/* 设置面板：全屏按钮 */
#overlay-body .fs-btn {
  background: linear-gradient(135deg, #3a2808, #5a3c10);
  border: 1px solid var(--p-border-gold); border-radius: 18px;
  color: var(--p-gold); font-family: var(--p-serif); font-size: 0.85rem;
  letter-spacing: 0.08em; padding: 0.4rem 1.6rem; cursor: pointer; min-height: 44px;
  transition: all 0.15s;
}
#overlay-body .fs-btn:hover { color: #fff; box-shadow: 0 0 16px rgba(240,192,96,0.25); }

/* 设置面板：数据与存档（导出 / 导入） */
.data-note {
  color: #8a7a5f; font-size: 0.75rem; line-height: 1.8; /* A-P2-12：3.48→≥4.5 */
  letter-spacing: 0.04em; margin-top: 0.4rem;
}
.import-confirm {
  margin: 0.6rem 0 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(52,16,10,0.28);
  border: 1px solid rgba(178,58,46,0.5); border-radius: 8px;
}
.import-confirm p { color: var(--p-text); font-size: 0.85rem; line-height: 1.9; }
.import-confirm .ic-danger {
  color: #d89090; font-size: 0.85rem; margin: 0.5rem 0 0.8rem;
  letter-spacing: 0.04em;
}
.import-confirm .ic-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.import-confirm .ic-actions button {
  min-height: 44px; padding: 0.4rem 1.4rem; border-radius: 18px;
  font-family: var(--p-serif); font-size: 0.85rem; cursor: pointer;
}
.import-confirm .ic-apply {
  background: linear-gradient(135deg, #6a2418, #8b3020);
  border: 1px solid rgba(216,144,144,0.55); color: #ffe3d8;
}
.import-confirm .ic-apply:disabled { opacity: 0.5; cursor: default; }
.import-confirm .ic-cancel {
  background: rgba(14,9,4,0.6); border: 1px solid #3d2610;
  color: var(--p-gold-dim);
}

/* 设置面板：操作说明键位表 */
.help-keys { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
.help-key-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.3rem 0.2rem; border-bottom: 1px dashed rgba(61,38,16,0.5);
}
.help-key-row .hk-key {
  flex-shrink: 0; min-width: 11.5rem;
  color: var(--p-gold); font-size: 0.85rem; letter-spacing: 0.04em;
}
.help-key-row .hk-desc { color: var(--p-text-dim); font-size: 0.82rem; line-height: 1.7; }

/* 画廊 */
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.cg-thumb {
  aspect-ratio: 3/2; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 1px solid #3d2610; background: #0a0602; position: relative;
}
.cg-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.cg-thumb:hover img { transform: scale(1.06); }
.cg-thumb.locked { display: flex; align-items: center; justify-content: center; color: #504030; font-size: 1.5rem; }
.cg-char-head { font-family: var(--p-kai); color: var(--p-gold); margin: 1.2rem 0 0.6rem; letter-spacing: 0.15em; }
.cg-viewer {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cg-viewer img { max-width: 96vw; max-height: 96vh; object-fit: contain; }

/* Bad End 列表 */
.be-item { margin-bottom: 1rem; padding: 1rem 1.2rem; background: rgba(30,10,8,0.5); border: 1px solid #4a2018; border-radius: 8px; }
.be-item.unseen { opacity: 0.5; border-color: #2a1a10; background: rgba(20,14,8,0.5); }
.be-item .be-title { color: #e08070; font-size: 1rem; margin-bottom: 0.3rem; }
.be-item .be-char { font-size: 0.72rem; color: var(--p-text-dim); }
.be-item .be-lesson { font-size: 0.82rem; color: #c0a080; margin-top: 0.5rem; line-height: 1.7; }

/* ── 结局全屏卡 ── */
#ending-screen {
  position: absolute; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(6px);
  animation: fade-in 1s ease;
}
#ending-screen.illustrated {
  background-color: #07090d;
  background-size: cover;
  background-position: center;
  backdrop-filter: none;
}
@keyframes fade-in { from { opacity: 0; } }
#ending-inner {
  max-width: 720px; padding: 2rem; text-align: center; max-height: 90vh; overflow-y: auto;
  /* P2-03：长卡内滚时行文在容器上下缘被硬切成半行字（透明底上像叠字/穿透）；
     渐隐遮罩让出入边界的文字淡出而非硬切 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
#ending-kicker { color: var(--p-gold-faint); letter-spacing: 0.5em; font-size: 0.85rem; margin-bottom: 1rem; padding-left: 0.5em; }
#ending-title { font-family: var(--p-kai); font-size: 2.2rem; color: var(--p-gold); letter-spacing: 0.3em; margin-bottom: 1.6rem; }
#ending-screen.bad #ending-title { color: #e08070; }
#ending-body { color: var(--p-text); font-size: 0.98rem; line-height: 2.1; text-align: left; margin-bottom: 2rem; white-space: pre-line; }
#ending-lesson {
  color: #c0a080; font-size: 0.9rem; line-height: 2;
  text-align: left; white-space: pre-line;
  border-top: 1px solid #3d2610; margin: -0.4rem 0 2rem; padding: 1.2rem 0 0;
  animation: lesson-reveal 0.65s ease both;
}
@keyframes lesson-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#ending-actions { display: flex; justify-content: center; gap: 1rem; }
#ending-actions button, #ending-gate {
  background: linear-gradient(135deg, #3a2808, #5a3c10); border: 1px solid var(--p-border-gold);
  color: var(--p-gold); font-family: var(--p-serif); font-size: 0.92rem;
  padding: 0.7rem 2.2rem; border-radius: 24px; cursor: pointer; letter-spacing: 0.1em;
  transition: all 0.18s;
}
#ending-actions button:hover, #ending-gate:hover { box-shadow: 0 0 24px rgba(240,192,96,0.3); color: #fff; }
#ending-gate { display: block; margin: 0 auto; }

/* 跨线揭示卡 */
.revelation-card {
  background: rgba(30,22,8,0.92); border: 1px solid var(--p-border-gold);
  border-radius: 8px; padding: 1rem 1.4rem; margin-bottom: 0.8rem;
  font-size: 0.9rem; line-height: 1.8; color: #ffe8b0;
}
.revelation-card .rev-tag { font-size: 0.7rem; color: var(--p-gold-faint); letter-spacing: 0.2em; display: block; margin-bottom: 0.3rem; }

#boot-loading {
  position: absolute; inset: 0; z-index: 500; display: flex;
  align-items: center; justify-content: center;
  background: #0e0905; color: var(--p-gold-dim); letter-spacing: 0.3em;
  transition: opacity 0.5s ease;
}
#boot-loading.done { opacity: 0; pointer-events: none; }

.hidden { display: none !important; }

/* ── 演出精简模式（设置：演出效果=精简 / 性能兜底） ── */
body.perf-lite #shake-wrap,
body.perf-lite .sprite-slot,
body.perf-lite .sprite-slot img,
body.perf-lite .bg-layer,
body.perf-lite #tint-layer,
body.perf-lite #trans-mask,
body.perf-lite #slate-card,
body.perf-lite #chapter-card,
body.perf-lite #chapter-card-kicker,
body.perf-lite #chapter-card-title,
body.perf-lite #chapter-card-sub,
body.perf-lite #title-card,
body.perf-lite #hook-card,
body.perf-lite #callback-note,
body.perf-lite #foreshadow-note,
body.perf-lite #exposure-ind,
body.perf-lite #exposure-ind .exp-cell {
  transition-duration: 0.08s !important;
  animation-duration: 0.08s !important;
  transition-delay: 0s !important;
}
body.perf-lite #exposure-ind.pulse { animation: none; }
body.perf-lite #foreshadow-note.stage-2 #foreshadow-mark { animation: none; }
/* 精简模式：菜单常驻动画停掉，入场动画瞬时完成 */
body.perf-lite .menu-kv, body.perf-lite .menu-ink { animation: none; }
body.perf-lite #menu-screen::after, body.perf-lite #chapter-screen::after { animation: none; opacity: 0; }
body.perf-lite .title-block, body.perf-lite .title-kicker,
body.perf-lite .game-title, body.perf-lite .title-seal,
body.perf-lite .title-rule, body.perf-lite .game-subtitle,
body.perf-lite .route-card, body.perf-lite .chapter-item,
body.perf-lite .menu-links, body.perf-lite .back-btn,
body.perf-lite #chapter-screen h2, body.perf-lite #chapter-screen p,
body.perf-lite #overlay-panel {
  animation-duration: 0.01s !important;
  animation-delay: 0s !important;
}
/* 精简模式：常驻模糊全部关掉（backdrop-filter 是持续合成开销，低端机大头） */
body.perf-lite :is(#vn-dialogue-surface, #adv-box-bg), body.perf-lite .route-card,
body.perf-lite #overlay, body.perf-lite #ending-screen,
body.perf-lite #quick-bar button { backdrop-filter: none; }
body.perf-lite .title-block::before { filter: none; }

/* ═══════════════════════════════════════════════════
   结局余韵（afterglow）：定帧静默 → 黑场 → ED/credits → 记录卡
   ═══════════════════════════════════════════════════ */
#afterglow { position: absolute; inset: 0; z-index: 160; }
#ag-black {
  position: absolute; inset: 0; background: #000;
  opacity: 0; transition: opacity 1.5s ease;
}
#ag-black.on { opacity: 1; }

/* NORMAL 档 12s「ED 卡」：黑场上曲目名 + 结局名 */
#ag-ed-card {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; opacity: 0; transition: opacity 1.4s ease;
}
#ag-ed-card.shown { display: flex; }
#ag-ed-card.on { opacity: 1; }
#ag-ed-track { color: var(--p-gold-faint); font-size: 0.85rem; letter-spacing: 0.4em; padding-left: 0.4em; }
#ag-ed-title {
  font-family: var(--p-kai); font-size: 1.9rem; color: var(--p-gold);
  letter-spacing: 0.32em; padding-left: 0.32em;
}

/* credits 滚动壳 */
#ag-credits {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  display: none; opacity: 0; transition: opacity 1.4s ease;
}
#ag-credits.shown { display: block; }
#ag-credits.on { opacity: 1; }
#ag-credits-roll {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center; will-change: transform;
}
.ag-block { margin-bottom: 5.5rem; }
.ag-h {
  color: var(--p-gold-faint); font-size: 0.78rem; letter-spacing: 0.5em;
  padding-left: 0.5em; margin-bottom: 1.1rem;
}
.ag-line { color: var(--p-text); font-size: 1rem; line-height: 2.3; letter-spacing: 0.18em; }
.ag-line.dim { color: var(--p-text-dim); font-size: 0.88rem; }
.ag-title {
  font-family: var(--p-kai); font-size: 2.3rem; color: var(--p-gold);
  letter-spacing: 0.3em; padding-left: 0.3em; margin-bottom: 0.9rem;
}
.ag-fin { color: var(--p-gold-dim); font-size: 0.95rem; letter-spacing: 0.4em; padding-left: 0.4em; }

/* 收尾帧（TRUE：「她的故事，到这里。」静止 2s） */
#ag-final-frame {
  position: absolute; inset: 0; z-index: 3;
  display: none; align-items: center; justify-content: center;
  color: var(--p-text-dim); font-family: var(--p-kai); font-size: 1.15rem;
  letter-spacing: 0.35em; padding-left: 0.35em;
  opacity: 0; transition: opacity 1.2s ease;
}
#ag-final-frame.shown { display: flex; }
#ag-final-frame.on { opacity: 1; }

/* 记录卡：仅两行——「已记录」＋「＜角色名＞《＜结局标题＞》」 */
#ag-record {
  position: absolute; inset: 0; z-index: 4;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; opacity: 0; transition: opacity 1s ease;
}
#ag-record.shown { display: flex; }
#ag-record.on { opacity: 1; }
#ag-record-kicker {
  color: var(--p-gold-faint); font-size: 0.8rem; letter-spacing: 0.6em; padding-left: 0.6em;
}
#ag-record-line {
  font-family: var(--p-kai); font-size: 1.5rem; color: var(--p-text);
  letter-spacing: 0.2em; padding-left: 0.2em;
}
#ag-record-actions { margin-top: 1.6rem; }
#ag-record-actions button {
  background: linear-gradient(135deg, #3a2808, #5a3c10); border: 1px solid var(--p-border-gold);
  color: var(--p-gold); font-family: var(--p-serif); font-size: 0.92rem;
  padding: 0.7rem 2.2rem; border-radius: 24px; cursor: pointer; letter-spacing: 0.1em;
  transition: all 0.18s;
}
#ag-record-actions button:hover { box-shadow: 0 0 24px rgba(240,192,96,0.3); color: #fff; }

/* 跳过提示（键盘可达；首次长按 / 已看单击） */
#ag-skip-hint {
  position: absolute; bottom: 1.4rem; right: 1.8rem; z-index: 5;
  color: rgba(200,168,112,0.55); font-size: 0.72rem; letter-spacing: 0.12em;
  opacity: 0; transition: opacity 0.8s ease;
}
#ag-skip-hint.on { opacity: 1; }

/* 低动效：credits 改分页淡入淡出（JS 检测 prefers-reduced-motion 走分页），
   余韵过渡缩短 */
@media (prefers-reduced-motion: reduce) {
  #ag-black, #ag-ed-card, #ag-credits, #ag-final-frame, #ag-record { transition-duration: 0.3s; }
}
body.perf-lite #ag-black, body.perf-lite #ag-ed-card,
body.perf-lite #ag-credits, body.perf-lite #ag-final-frame,
body.perf-lite #ag-record { transition-duration: 0.3s; }

/* ═══════════════════════════════════════════════════
   标题页全通态（时光之岸）：副标题换字 / 第二印「歸心」/ kicker 换行
   ═══════════════════════════════════════════════════ */
.title-seal-2 {
  position: absolute; right: -3.4rem; top: -0.9rem;
  writing-mode: vertical-rl;
  font-family: var(--p-kai); font-size: 0.82rem; letter-spacing: 0.24em;
  color: #f3e6cd; line-height: 1;
  background: linear-gradient(155deg, #b23a2e, #7d1d14);
  border: 1px solid rgba(255,200,180,0.25); border-radius: 4px;
  padding: 0.42rem 0.26rem;
  box-shadow: 0 3px 14px rgba(120,20,10,0.55), inset 0 0 8px rgba(50,5,0,0.5);
  transform: rotate(-3deg);
  animation: seal-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s both;
}
/* 首次全通回标题：副标题 2s 微光渐显（localStorage 只播一次） */
.game-subtitle.fc-glow { animation: subtitle-glow 2s ease both; }
@keyframes subtitle-glow {
  0% { color: var(--p-text-dim); text-shadow: none; }
  45% { color: var(--p-gold); text-shadow: 0 0 18px rgba(240,192,96,0.85); }
  100% { color: var(--p-text-dim); text-shadow: 0 0 6px rgba(240,192,96,0.25); }
}
/* 低动效替代：副标题旁静态「新」字徽标（不依赖颜色传达） */
.fc-new-badge {
  display: inline-block; margin-left: 0.7em;
  font-size: 0.68rem; color: var(--p-gold); letter-spacing: 0;
  border: 1px solid var(--p-gold-dim); border-radius: 3px; padding: 0.08em 0.35em;
  vertical-align: 0.1em;
}
@media (prefers-reduced-motion: reduce) {
  .game-subtitle.fc-glow { animation: none; }
}

/* ═══════════════════════════════════════════════════
   移动端适配（发布 P0，设计 docs/review/_release_eng_design.md §2）
   T0 桌面保持现状；T1 低高度横屏；T2 窄屏；T3 手机竖屏；T4 粗指针。
   布局主重排依赖 body.m-portrait / body.m-landscape（player.js 按
   matchMedia 同步设置，并同步按钮 hidden 语义，不靠 display:none 丢焦点）。
   ═══════════════════════════════════════════════════ */

/* 动态视口与安全区基础 */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --mobile-bar-h: 52px;
}
#app, #stage { min-height: 100vh; min-height: 100dvh; }

/* 桌面默认：MORE 与抽屉不存在 */
.qb-more, #mobile-drawer, #rotate-hint { display: none; }
#quick-bar button[hidden], #mobile-drawer[hidden] { display: none !important; }

/* ── T4 粗指针：44px 触控目标 / 禁 hover 依赖 / 触控行为 ── */
@media (hover: none) and (pointer: coarse) {
  #quick-bar { opacity: 0.92; }
  #quick-bar button,
  #overlay-close,
  #mobile-drawer button,
  .back-btn { min-width: 44px; min-height: 44px; }
  #quick-bar button:hover,
  #choices .choice-btn:hover { transform: none; }
  #choices .choice-btn:hover::after { left: -60%; }
  .route-card:hover, .chapter-item:hover { transform: none; }
  /* 禁双指捏合缩放（MOB-04）：html 级 pan-x pan-y 沿祖先链求交集，任意触点
     起始处 pinch-zoom / 双击缩放均被禁（viewport meta 被 iOS 忽略时的兜底）；
     平移/滚动保留，系统级辅助缩放（OS 放大手势）不经 touch-action、不受影响 */
  html { touch-action: pan-x pan-y; }
  #stage { touch-action: pan-x pan-y; }
  /* 交互元素禁双击缩放误触（元素自身 manipulation 保留滚动；缩放已被 html 级交集禁掉） */
  button, a, select, input, label,
  #quick-bar, #mobile-drawer, #choices .choice-btn,
  .route-card, .chapter-item, .save-slot { touch-action: manipulation; }
  #overlay-body { touch-action: pan-y; overscroll-behavior: contain; }
  #menu-screen, #chapter-screen { overscroll-behavior: contain; }
  .setting-row input[type=range] { min-height: 44px; }
  /* 设置面板功能行触控命中补齐（MOB-01）：.fs-btn×4（进入全屏/导出/导入/提交反馈）
     32.8px、显示模式等下拉 27.6px、X3 存档备注输入 34.4px → 全部补到 44px */
  #overlay-body .fs-btn,
  .setting-row select,
  .save-note-row input[type=text] { min-height: 44px; }
  /* backlog 可回跳行触屏命中高度补到 44px（P2-10） */
  .log-entry.jumpable { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .setting-row input[type=range]::-webkit-slider-thumb {
    width: 28px; height: 28px; margin-top: -13px;
  }
  .setting-row input[type=range]::-moz-range-thumb { width: 28px; height: 28px; }
  #choices .choice-btn { min-height: 52px; }
  /* 触控档命中区补齐（MOB-03）：标题屏底部链接行在 >700px 平板下也要 44px；
     竖屏提示条按钮同标准 */
  .menu-links a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-top: 0; padding-bottom: 0;
  }
  #rotate-hint button { min-height: 44px; min-width: 44px; }
}

/* ── T2 窄屏：覆盖层贴边 / 存档单列 / 设置两行 / 菜单可达性 ── */
@media (max-width: 700px) {
  /* 印章收进可视区（dim6 P2-3）：375px 下负 right 定位被视口裁切断字，
     主印贴右缘内侧、第二印「歸心」窄屏不渲染 */
  .title-seal { right: 0.1rem; bottom: auto; top: -1.2rem; font-size: 0.85rem; padding: 0.4rem 0.28rem; }
  .title-seal-2 { display: none; }

  #overlay {
    padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
    align-items: stretch;
  }
  #overlay-panel {
    width: 100%; max-width: none; max-height: 100%;
    max-height: 100dvh; border-radius: 0;
  }
  #overlay-head { border-radius: 0; padding: 0.7rem 1rem; }
  #overlay-close { min-width: 44px; min-height: 44px; }
  #overlay-body { padding: 1rem; }
  .saves-grid, #route-grid { grid-template-columns: minmax(0, 1fr); }
  .save-slot { min-width: 0; }
  .setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
  }
  .setting-row label { grid-column: 1 / -1; width: auto; }
  .help-key-row { flex-wrap: wrap; gap: 0.3rem 1rem; }
  .help-key-row .hk-key { min-width: 0; }
  .menu-inner { padding: max(4vh, var(--safe-t)) 1.1rem calc(4vh + var(--safe-b)); }
  .menu-links { flex-wrap: wrap; gap: 0.4rem 1.4rem; }
  .menu-links a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 0.4rem;
  }
  .game-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
}

/* ── T3 手机竖屏：四键底栏 + 全宽文本/选项 + 竖屏字号 ── */
body.m-portrait #quick-bar {
  position: fixed;
  left: var(--safe-l); right: var(--safe-r);
  top: auto; bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px; padding: 4px 8px;
  background: linear-gradient(180deg, rgba(10,6,2,0.55), rgba(10,6,2,0.88));
  opacity: 0.96; z-index: 40;
}
body.m-portrait #quick-bar button {
  min-height: 44px; padding: 0.3rem 0.2rem;
  font-size: 0.72rem; letter-spacing: 0.04em;
}
body.m-portrait :is(#vn-dialogue, #adv) {
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  bottom: calc(var(--safe-b) + var(--mobile-bar-h) + 8px);
  width: auto; transform: none;
}
body.m-portrait :is(#vn-dialogue-box, #adv-box) { padding: 0.9rem 1rem 1.1rem; min-height: 0; }
body.m-portrait :is(#vn-dialogue-text, #adv-text) {
  font-size: clamp(16px, 4.3vw, 19px); line-height: 1.75;
  min-height: 2.6em; max-height: 34dvh;
}
body.m-portrait #nameplate {
  margin-left: 0.6rem; min-height: 44px;
  display: inline-flex; align-items: center;
  max-width: calc(100% - 1.2rem);
}
body.m-portrait #nameplate #speaker-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.m-portrait #choices {
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  top: auto; bottom: calc(var(--safe-b) + var(--mobile-bar-h) + 42dvh);
  width: auto; max-height: 56dvh; overflow-y: auto;
  transform: none; touch-action: pan-y; overscroll-behavior: contain;
}
body.m-portrait #choices .choice-btn {
  min-height: 52px; padding: 0.75rem 1rem 0.75rem 2rem;
  line-height: 1.6;
}
/* 竖屏立绘占屏比（dim6 P2-1）：44vw 槽在 390px 竖屏仅 ~172px 立绘过小、
   剧情画面大面积留黑；放宽到 min(78vw,340px) 并保持中置 */
body.m-portrait .sprite-slot { width: min(78vw, 340px); }
body.m-portrait .sprite-slot.pos-c,
body.m-portrait .sprite-slot.pos-c.solo {
  left: 50%; margin-left: max(-39vw, -170px);
}
body.m-portrait .sprite-slot.pos-l { left: -6%; }
body.m-portrait .sprite-slot.pos-r { right: -6%; }
body.m-portrait #toast-area { top: calc(var(--safe-t) + 3.4rem); width: 92vw; }
body.m-portrait #bgm-badge { top: calc(var(--safe-t) + 0.5rem); }
body.m-portrait #mode-ind { top: calc(var(--safe-t) + 2rem); }
body.m-portrait #exposure-ind { display: none; }
/* 二周目竖屏跳过序章避让（MOB-02）：#rotate-hint（z46，条底缘 ≈ safe-t+68px）
   曾完全压住 0.6rem 位的本按钮（z41）；下移到提示条之下，提示条关闭后位置不变（保持静态、无 JS 耦合） */
body.m-portrait #prologue-skip { top: calc(var(--safe-t) + 4.6rem); }
body.m-portrait #preview-banner { top: calc(var(--safe-t) + 0.6rem); max-width: 70vw; }
/* 长事件题卡竖屏收敛（MOB-03）：基档 2.6rem/0.5em + 左右 7.3rem 衬垫在 390px 下
   10 字题卡（全库最长「婚礼之前：留营的一日」）断成三行、榫角匾额拉成方块。
   字号按视口收敛 + 字距收窄 + 衬垫改 em 随字号缩放（左比右多 0.28em 抵消尾字距，
   与基档 3.9/3.4rem 的光学居中意图一致）：390px 实算 10×24.96×1.28+2.08em≈371px < 390，保单行；
   更长的未来题卡自然优雅两行（不设 nowrap）。横屏/桌面不受影响。 */
body.m-portrait #title-card-text {
  font-size: clamp(1.5rem, 6.4vw, 2.6rem);
  letter-spacing: 0.28em;
  padding: 0.55em 0.9em 0.55em 1.18em;
}

/* ── T1 手机横屏：六键顶栏 + 压缩文本框 ── */
body.m-landscape #quick-bar {
  right: calc(var(--safe-r) + 8px); top: calc(var(--safe-t) + 6px);
  max-width: calc(100vw - var(--safe-l) - var(--safe-r) - 16px);
  flex-wrap: wrap; justify-content: flex-end;
  opacity: 0.92; gap: 0.3rem;
}
body.m-landscape #quick-bar button { min-height: 44px; min-width: 52px; }
body.m-landscape :is(#vn-dialogue, #adv) {
  bottom: calc(var(--safe-b) + 8px);
  width: min(78vw, 920px);
}
body.m-landscape :is(#vn-dialogue-box, #adv-box) { padding: 0.7rem 1.2rem 0.85rem; min-height: 0; }
body.m-landscape :is(#vn-dialogue-text, #adv-text) {
  font-size: clamp(15px, 2.2vw, 18px); line-height: 1.65;
  min-height: 2.2em; max-height: 30dvh;
}
body.m-landscape #choices { max-height: 72dvh; overflow-y: auto; touch-action: pan-y; }
body.m-landscape #choices .choice-btn { min-height: 48px; padding: 0.6rem 1rem 0.6rem 2rem; }

@media (orientation: landscape) and (max-height: 500px) {
  .game-title { font-size: 2rem; }
  .menu-inner { padding-top: max(3vh, var(--safe-t)); }
}

/* ── 移动操作抽屉（两列网格；竖屏在底栏上方，横屏在顶栏下方） ── */
body.m-portrait #mobile-drawer,
body.m-landscape #mobile-drawer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; padding: 10px;
  position: fixed; z-index: 45;
  background: linear-gradient(165deg, rgba(24,16,7,0.97), rgba(12,7,3,0.97));
  border: 1px solid var(--p-border-gold); border-radius: 10px;
  box-shadow: 0 12px 44px rgba(0,0,0,0.7);
}
body.m-portrait #mobile-drawer {
  left: calc(var(--safe-l) + 10px); right: calc(var(--safe-r) + 10px);
  bottom: calc(var(--safe-b) + var(--mobile-bar-h) + 8px);
}
body.m-landscape #mobile-drawer {
  right: calc(var(--safe-r) + 8px); top: calc(var(--safe-t) + 58px);
  width: min(320px, 60vw);
}
#mobile-drawer button {
  min-height: 46px; padding: 0.4rem 0.6rem;
  background: linear-gradient(180deg, rgba(34,22,9,0.9), rgba(18,11,5,0.92));
  border: 1px solid rgba(139,105,20,0.6); border-radius: 7px;
  color: var(--p-gold-dim); font-family: var(--p-serif);
  font-size: 0.8rem; letter-spacing: 0.05em; cursor: pointer;
}
#mobile-drawer button:active { color: var(--p-gold); border-color: var(--p-gold); }
#mobile-drawer .md-danger {
  grid-column: 1 / -1;
  color: #d89090; border-color: rgba(178,58,46,0.65);
  background: linear-gradient(180deg, rgba(52,16,10,0.85), rgba(26,8,5,0.9));
}
/* 横屏时 Q.SAVE/Q.LOAD 已在顶栏常驻，抽屉里不重复 */
body.m-landscape #mobile-drawer .md-quick { display: none; }
/* 抽屉/MORE 在移动层级下可见 */
body.m-portrait .qb-more, body.m-landscape .qb-more { display: inline-block; }
body.m-portrait #stage.ui-hidden #mobile-drawer,
body.m-landscape #stage.ui-hidden #mobile-drawer { display: none; }

/* ── 竖屏提示条（非模态，顶部） ── */
body.m-portrait #rotate-hint {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  position: fixed; z-index: 46;
  left: calc(var(--safe-l) + 10px); right: calc(var(--safe-r) + 10px);
  top: calc(var(--safe-t) + 8px);
  padding: 0.45rem 0.9rem;
  background: rgba(20,12,4,0.92); border: 1px solid var(--p-border-gold);
  border-radius: 20px; color: var(--p-gold-dim); font-size: 0.8rem;
}
body.m-portrait #rotate-hint[hidden] { display: none; }
#rotate-hint button {
  background: none; border: 1px solid rgba(139,105,20,0.6); border-radius: 14px;
  color: var(--p-gold); font-size: 0.75rem; padding: 0.25rem 0.8rem;
  /* 只在竖屏触控档显示，命中区直接给足 44px（MOB-03） */
  min-height: 44px; min-width: 44px; cursor: pointer;
}

/* ── dim6 P2-1：per-scene 竖屏取景（数据驱动，A16 替代原 vn_prologue_desk 特判） ──
   登记表在 content/images/scene_focus.yaml，经 /api/v1/assets/manifest 下发；
   player.js applyBgFocus 命中场景时在 bg-layer 挂 .bg-focus + 两个 CSS 变量。
   仅竖屏生效（横屏/桌面永远全画幅），旋转由 body.m-portrait 切换自然生效；
   未登记场景无该类，行为不变。 */
body.m-portrait .bg-layer.bg-focus {
  background-size: var(--bg-focus-size, cover);
  background-position: var(--bg-focus-pos, center);
}

/* ── dim6 P2-3：标题页《洛神赋》题跋渐隐收边 ──
   主视觉 zhenji_luoshen.webp 右缘为竖排题跋（x≈1004-1536/1536）；
   cover 裁切在视口纵横比 (0.46, 1.5) 区间会把某一墨列切在半字上
   （900×844 / 820×1180 / 1024×768 均复现断字）。给 KV 右缘一道向
   暗底的渐隐，被裁墨列淡出而非硬切；用 ::after 叠加而非第二层
   mask + mask-composite，规避旧内核把多层 mask 回退成 add 的风险。
   >3/2 宽横屏题跋全幅可见，不加收边；≤3/2 窄侧（含手机竖屏，题跋
   已整体在窗外）仅右缘极轻微墨晕，印章在 .menu-inner 层不受影响。 */
@media (max-aspect-ratio: 3/2) {
  .menu-kv::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent 78%, rgba(10,6,2,0.45) 90%, rgba(8,5,2,0.96) 100%);
  }
}

/* ── A11y：低动效偏好停用常驻动画（玩家显式设置优先于系统默认） ── */
@media (prefers-reduced-motion: reduce) {
  .menu-kv, .menu-ink, #mode-ind.visible, #preview-banner,
  :is(#vn-dialogue-indicator, #adv-indicator), .route-card, .chapter-item, .title-block,
  .title-kicker, .game-title, .title-rule, .game-subtitle,
  .menu-links, .back-btn, #menu-screen::after, #chapter-screen::after,
  .title-seal, .title-seal-2 {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  #overlay-panel, .toast { animation-duration: 0.01ms !important; }
  #choices .choice-btn { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
}