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

:root {
  --theme-primary: #ff7a45;
  --theme-accent: #36cfc9;
  --theme-bg-start: #1a1a2e;
  --theme-bg-end: #16213e;
  --theme-text: #ffffff;
  --theme-text-muted: rgba(255,255,255,0.7);
  --theme-font: -apple-system, "PingFang SC", sans-serif;
  --theme-shadow: 0 4px 16px rgba(0,0,0,0.5);
  /* 文字模式阅读卡/对话框面板底色（styleProfile.palette.panel 覆盖；缺省深色毛玻璃） */
  --novel-panel: rgba(12,12,22,0.72);
}

body[data-theme="mystery"] {
  --theme-primary: #c41e3a;
  --theme-accent: #ffd700;
  --theme-bg-start: #0a0a0f;
  --theme-bg-end: #1a0e1e;
}
body[data-theme="romance"] {
  --theme-primary: #c084fc;
  --theme-accent: #fbbf24;
  --theme-bg-start: #2d1b3d;
  --theme-bg-end: #4a2c5f;
  --theme-font: "PingFang SC", "Songti SC", sans-serif;
}
body[data-theme="ancient"] {
  --theme-primary: #d4af37;
  --theme-accent: #8b1a1a;
  --theme-bg-start: #1a1410;
  --theme-bg-end: #2c1810;
  --theme-text: #f4e8c1;
  --theme-font: "Songti SC", "SimSun", serif;
}
body[data-theme="modern"] {
  --theme-primary: #ff7a45;
  --theme-accent: #36cfc9;
}
body[data-theme="youth"] {
  --theme-primary: #00d4ff;
  --theme-accent: #ff66c4;
  --theme-bg-start: #0f2027;
  --theme-bg-end: #2c5364;
}

html, body {
  width: 100%; height: 100%; background: #000; color: var(--theme-text);
  font-family: var(--theme-font); overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#app { position: relative; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* ── 视频播放层 ───────────────────────────── */
#video-stage { position: relative; width: 100%; height: 100%; background: #000; }
#player { width: 100%; height: 100%; object-fit: contain; }

/* ════ 纯文字视觉小说舞台（renderMode=text，§三十二）════
   纯文字 + 图片产品，精美与可读性为第一目标。
   两种 beat 形态：
     · 旁白 mode-narration → 整段文字居中阅读卡（绝不贴底）；
     · 对白 mode-dialogue  → 全屏角色形象图 + 抬离底部的对话框。
   不设 z-index：靠 DOM 顺序天然落在视频之上、HUD/选择/金币浮层之下。
   层级（同 stage 内 DOM 顺序）：novel-bg → novel-portrait → novel-scrim → novel-particles → 文字层。*/
#novel-stage {
  position: absolute; inset: 0;
  overflow: hidden; cursor: pointer;
}

/* ── 场景背景（旁白卡铺底；对白查不到角色时回退至此） ── */
.novel-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 50% at 50% 16%, rgba(255,255,255,0.06) 0%, transparent 60%),
    radial-gradient(120% 80% at 50% 122%, var(--theme-primary) 0%, transparent 55%),
    linear-gradient(160deg, var(--theme-bg-start) 0%, var(--theme-bg-end) 100%);
  animation: novel-bg-breathe 9s ease-in-out infinite;
}
@keyframes novel-bg-breathe { 0%,100%{filter:brightness(1) saturate(1);} 50%{filter:brightness(1.08) saturate(1.12);} }

/* ── 全屏角色形象图（对白用，cover 铺满 + 缓慢 Ken Burns；进场淡入+轻微上滑） ── */
.novel-portrait {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.06) translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.2,0.8,0.3,1);
  pointer-events: none;
}
.novel-portrait.show {
  opacity: 1; transform: scale(1.02) translateY(0);
  animation: novel-portrait-kb 16s ease-in-out infinite alternate;
}
@keyframes novel-portrait-kb { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } }

/* ── 压暗 scrim（可读性铁律：任何图上文字都要足够对比）── */
.novel-scrim {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.45s ease-out;
}
/* 旁白：四周轻压 + 中部稍亮，居中卡片下托底；对白：底部强压，把对话框区域压暗保证台词清晰 */
#novel-stage.mode-narration .novel-scrim {
  opacity: 1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.34) 60%, rgba(0,0,0,0.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.34) 100%);
}
#novel-stage.mode-dialogue .novel-scrim {
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 34%,
    rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.82) 100%);
}

/* ── 漂浮粒子（氛围；有图时减弱不抢戏） ── */
.novel-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.novel-particles::before, .novel-particles::after {
  content: ""; position: absolute; left: -20%; top: -20%; width: 140%; height: 140%;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 85% 25%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,0.45), transparent);
  animation: novel-drift 18s linear infinite; opacity: 0.5;
}
.novel-particles::after { animation-duration: 26s; animation-direction: reverse; opacity: 0.3; }
@keyframes novel-drift { 0%{transform: translate(0,0);} 100%{transform: translate(4%,-12%);} }
#novel-stage.has-image .novel-particles,
#novel-stage.mode-dialogue .novel-particles { opacity: 0.28; }

/* ════ 旁白：整段居中阅读卡（垂直+水平居中，绝不贴底） ════ */
.novel-narration {
  position: absolute; inset: 0;
  display: none;                       /* 仅 mode-narration 时 flex 显示 */
  align-items: center; justify-content: center;       /* 卡片在可用区垂直居中（卡片自身 min-height≥56vh 保证再短也半屏） */
  padding: 30vh 4.5vw 9vh;             /* 顶部让开 banner+标题+弹幕窄带（≤28%），卡片从 ~30vh 起、与弹幕彻底分开；底部让开轻触提示 */
  pointer-events: none;
}
#novel-stage.mode-narration .novel-narration { display: flex; }
.novel-narration-text {
  position: relative;
  width: 92%; max-width: 92%;
  /* §③ 旁白卡：再短也≥半屏（min-height），长则分页（不滚动）。文字在卡内顶对齐。 */
  min-height: 56vh; max-height: 74vh; overflow: hidden; pointer-events: auto;
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  /* §② 旁白正文增大到 18.5px、行高 1.8（更舒适）；分页按新字号由 _paginateNarration 实测重排，仍不滚动 */
  font-size: 18.5px; line-height: 1.8; letter-spacing: 0.2px;
  color: var(--theme-text, #fff); text-align: left;            /* 长文左对齐，方便阅读 */
  /* bespoke 面板底色（styleProfile.palette.panel）+ 毛玻璃 + 主题描边 + 柔和阴影 */
  background:
    linear-gradient(165deg, rgba(255,255,255,0.05) 0%, transparent 42%),
    var(--novel-panel, rgba(12,12,22,0.72));
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 2px solid var(--theme-primary);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  text-wrap: pretty;
}
/* 多段落：每段首行缩进 + 段间距（整屏长文的阅读节奏） */
.novel-para { text-indent: 2em; margin: 0 0 0.85em; }
.novel-para:last-child { margin-bottom: 0; }
/* §③ 分页：段落放在顶对齐的可伸缩流区；页码点钉在卡底（不随段落数抖动） */
.np-flow { flex: 1 1 auto; min-height: 0; }
.np-flow .novel-para:last-child { margin-bottom: 0; }
.np-dots {
  flex: 0 0 auto; margin-top: 14px; padding-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-indent: 0;
}
.np-dots .np-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.3); transition: background .25s, transform .25s;
}
.np-dots .np-dot.is-cur { background: var(--theme-accent, #ffae5c); transform: scale(1.35); }
/* 极端单段超长兜底：该页允许内滚（仅 .is-overflow 时；正常分页页面不滚） */
.novel-narration-text.is-overflow .np-flow { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 首行缩进 + 起首大引号装饰（精致感，不抢可读性） */
.novel-narration-text::before {
  content: "\201C";
  position: absolute; top: -2px; left: 12px;
  font-family: Georgia, "Songti SC", serif;
  font-size: 60px; line-height: 1; color: var(--theme-primary);
  opacity: 0.5; pointer-events: none;
}
/* 整段一次淡入 + 轻微上浮 */
.novel-narration { opacity: 0; }
#novel-stage.mode-narration .novel-narration { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
#novel-stage.mode-narration .novel-narration.show { opacity: 1; transform: none; }

/* ════ 对白：抬离底部的对话框（下半部偏下，留大底边距，避开底部手势条） ════ */
.novel-textbox {
  position: absolute; left: 50%; bottom: 14vh;       /* 抬离底部：距底 14vh，不 flush bottom */
  transform: translateX(-50%);
  width: min(560px, 90vw);
  display: none;                                     /* 仅 mode-dialogue 时显示 */
  flex-direction: column;
  padding: 20px 22px 20px;
  /* bespoke 面板底色（styleProfile.palette.panel）+ 顶部高光，与旁白卡同源 */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 40%),
    var(--novel-panel, rgba(12,12,22,0.82));
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--speaker-accent, var(--theme-primary));
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
#novel-stage.mode-dialogue .novel-textbox { display: flex; }
/* 换人时整框轻微滑入 */
.novel-textbox.enter { animation: novel-box-in 0.42s cubic-bezier(0.2,0.85,0.3,1) both; }
@keyframes novel-box-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.98); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.novel-speaker {
  align-self: flex-start; margin-bottom: 12px; padding: 6px 18px;
  background: var(--speaker-accent, var(--theme-primary)); color: #fff;
  font-size: 15.5px; font-weight: 800; letter-spacing: 1.5px;
  border-radius: 14px 14px 14px 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.novel-text {
  font-size: 20px; line-height: 1.7; color: #fff; letter-spacing: 0.5px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7); min-height: 1.7em;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.38s ease-out, transform 0.38s ease-out;
}
.novel-text.show { opacity: 1; transform: none; }

/* ── 轻触继续提示（旁白/对白共用，固定屏幕底部安全区上方，不贴边） ── */
.novel-tap-hint {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  text-align: center; font-size: 12.5px;
  color: rgba(255,255,255,0.72); letter-spacing: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  animation: novel-tap-pulse 1.4s ease-in-out infinite;
}
@keyframes novel-tap-pulse { 0%,100%{opacity: 0.45;} 50%{opacity: 0.95;} }

/* ── 情绪 → 背景微染色（场景图与 CSS 氛围都染） ── */
#novel-stage.mood-tense .novel-bg,
#novel-stage.mood-tense .novel-portrait { filter: hue-rotate(-12deg) brightness(0.82) saturate(1.2); }
#novel-stage.mood-fear  .novel-bg,
#novel-stage.mood-fear  .novel-portrait { filter: brightness(0.7) saturate(0.85); }
#novel-stage.mood-sad   .novel-bg,
#novel-stage.mood-sad   .novel-portrait { filter: brightness(0.8) saturate(0.7); }
#novel-stage.mood-warm  .novel-bg,
#novel-stage.mood-warm  .novel-portrait { filter: brightness(1.12) saturate(1.15); }
#novel-stage.mood-happy .novel-bg,
#novel-stage.mood-happy .novel-portrait { filter: brightness(1.18) saturate(1.25); }
#novel-stage.mood-anger .novel-bg,
#novel-stage.mood-anger .novel-portrait { filter: brightness(0.95) saturate(1.5) hue-rotate(-18deg); }

/* 关键场景有即梦实景图时：铺满 + 缓慢 Ken Burns（旁白卡铺底；对白若无角色图也用它打底） */
#novel-stage.has-image .novel-bg {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  animation: novel-kenburns 18s ease-in-out infinite alternate;
}
@keyframes novel-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* 小屏微调：极窄高度时旁白留白收一点、对话框抬离量收一点，避免溢出 */
@media (max-height: 620px) {
  .novel-narration { padding: 8vh 7vw; }
  .novel-narration-text { font-size: 18px; line-height: 1.8; padding: 24px 24px 26px; }
  .novel-textbox { bottom: 11vh; }
}

#progress-bar {
  position: absolute; top: 12px; left: 12px; right: 12px;
  height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px;
  pointer-events: none; overflow: visible;
}
/* 文字模式（§①）：进度条移到最顶（flush top、全宽细线），在番茄 banner 之上、彼此不重叠 */
body[data-render-mode="text"] #progress-bar {
  top: 0; left: 0; right: 0; height: 3px; border-radius: 0;
  background: rgba(255,255,255,0.16);
}
body[data-render-mode="text"] #progress-fill { border-radius: 0; }
#progress-fill {
  height: 100%; background: var(--theme-primary); border-radius: 2px;
  width: 0%; transition: width 0.2s linear;
}

@keyframes urgencyPulse {
  0%, 100% {
    background: var(--theme-primary);
    box-shadow: 0 0 0 0 var(--theme-primary);
  }
  50% {
    background: var(--theme-accent);
    box-shadow: 0 0 12px 4px var(--theme-primary);
  }
}
#progress-fill.urgency { animation: urgencyPulse 0.8s ease-in-out infinite; }

#urgency-hint {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; background: var(--theme-primary); color: #fff;
  font-size: 12px; font-weight: 600; border-radius: 16px; letter-spacing: 1px;
  opacity: 0; transition: opacity 0.4s ease-out; pointer-events: none;
  white-space: nowrap; box-shadow: var(--theme-shadow);
}
#urgency-hint.visible { opacity: 1; }

/* 时序桥接角标（倒叙/闪回，§二十四·5）：进节点时顶部居中淡入 ~1.8s */
#time-label {
  position: absolute; top: 54px; left: 50%; transform: translate(-50%, -8px);
  z-index: 60; padding: 6px 16px; border-radius: 14px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 3px;
  border-left: 3px solid var(--theme-primary);
  opacity: 0; transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  pointer-events: none; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#time-label.show { opacity: 1; transform: translate(-50%, 0); }

#pov-badge {
  position: absolute; top: 22px; right: 14px; padding: 4px 10px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  border-radius: 12px; font-size: 12px;
}

/* ── 决策 overlay（渐进遮盖） ─────────────── */
#decision-overlay {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.4s ease-out;
}
#decision-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }

.overlay-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.overlay-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 16px 28px; }

#decision-prompt {
  font-size: 17px; font-weight: 600; margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7); line-height: 1.4;
}

.choice-btn {
  display: block; width: 100%; padding: 14px;
  background: rgba(255,255,255,0.15); border: 1.5px solid var(--theme-primary);
  border-radius: 24px; color: #fff; font-size: 15px; margin-bottom: 10px;
  backdrop-filter: blur(10px); cursor: pointer;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, background 0.15s;
  font-family: inherit;
}
.choice-btn.show { opacity: 1; transform: translateY(0); }
.choice-btn:active { background: var(--theme-primary); }

#decision-timer {
  text-align: center; color: var(--theme-text-muted);
  font-size: 12px; margin-top: 12px;
}

/* ════ 文字模式决策/选项屏字号增大 + 重排（§②，仅 renderMode=text；视频模式决策样式零改动） ════
   题干明显增大加粗；选项按钮文字增大、舒适内边距、长选项优雅换行、不溢出/不变形/不重叠；
   优先排得下，排不下才让 overlay-content 内滚（min-height 0 + max-height + overflow:auto）。
   在 375×812 与 360×640 都不溢出（按钮自适应换行、容器封顶可滚）。 */
body[data-render-mode="text"] .overlay-content {
  /* 让选项区从底部最多占到 ~78vh，超出才内滚（绝大多数题目能排下，不会触发滚动） */
  max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 26px);
}
body[data-render-mode="text"] #decision-prompt {
  font-size: 21px; font-weight: 700; line-height: 1.45;
  margin-bottom: 18px; letter-spacing: 0.3px;
}
body[data-render-mode="text"] .choice-btn {
  /* 文字左对齐 + 优雅换行（长选项不再被截/挤变形）；舒适内边距 + 行距 */
  display: block; width: 100%;
  padding: 14px 18px; margin-bottom: 12px;
  font-size: 17.5px; line-height: 1.4; font-weight: 600;
  text-align: left;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  border-radius: 20px;
}
/* 题干字数多时（极端长题）略收一档，保证仍不挤占选项空间 */
@media (max-height: 700px) {
  body[data-render-mode="text"] #decision-prompt { font-size: 20px; margin-bottom: 14px; }
  body[data-render-mode="text"] .choice-btn { font-size: 17px; padding: 13px 16px; margin-bottom: 10px; }
}
/* 360 宽小屏：内边距与圆角再收一点点，避免窄屏左右溢出（仍比旧版大） */
@media (max-width: 360px) {
  body[data-render-mode="text"] #decision-prompt { font-size: 19.5px; }
  body[data-render-mode="text"] .choice-btn { font-size: 16.5px; padding: 13px 15px; }
}

/* ── 角色选择 ─────────────────────────────── */
#character-picker {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--theme-bg-start) 0%, var(--theme-bg-end) 100%);
  padding: 40px 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
#picker-title { margin-bottom: 30px; font-size: 20px; text-align: center; }
#picker-options { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
.picker-card {
  padding: 20px; background: rgba(255,255,255,0.1);
  border: 1px solid var(--theme-primary); border-radius: 12px;
  cursor: pointer; font-size: 16px; text-align: center;
  font-family: inherit; color: var(--theme-text);
}

/* ── 旧 ending-screen（fallback） ───────── */
#ending-screen {
  position: absolute; inset: 0; background: rgba(0,0,0,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
}
#ending-title { font-size: 28px; margin-bottom: 30px; text-align: center; }
#replay-btn {
  padding: 14px 32px; background: var(--theme-primary); color: #fff;
  border: none; border-radius: 28px; font-size: 16px; cursor: pointer; font-family: inherit;
}
#locked-endings { margin-top: 24px; color: var(--theme-text-muted); font-size: 13px; text-align: center; }

/* ── 片头 Cover ────────────────────────── */
#cover-screen { position: absolute; inset: 0; overflow: hidden; z-index: 10; }
#cover-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(0.65) saturate(1.1);
}
.cover-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.95) 100%);
}
.cover-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 40px 20px 60px; text-align: center; color: var(--theme-text);
}
#cover-title {
  font-size: 36px; font-weight: 700; margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8); letter-spacing: 4px;
}
#cover-subtitle {
  font-size: 15px; color: var(--theme-text-muted); margin-bottom: 30px;
  letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#cover-start-btn {
  padding: 14px 48px; background: var(--theme-primary); color: #fff;
  border: none; border-radius: 28px; font-size: 17px; font-weight: 600;
  cursor: pointer; font-family: inherit; box-shadow: var(--theme-shadow);
  letter-spacing: 2px;
}

/* ── 片尾 CTA ──────────────────────────── */
#cta-screen { position: absolute; inset: 0; overflow: hidden; }
.cta-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--theme-bg-start) 0%, var(--theme-bg-end) 100%);
}
.cta-content {
  position: relative; height: 100%; padding: 30px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--theme-text);
}
#cta-logo { max-width: 140px; max-height: 60px; margin-bottom: 24px; }
#cta-headline {
  font-size: 26px; font-weight: 700; margin-bottom: 12px;
  letter-spacing: 2px;
}
#cta-subheadline {
  font-size: 14px; color: var(--theme-text-muted); margin-bottom: 28px;
  letter-spacing: 1px; line-height: 1.5;
}
#cta-main-btn {
  display: inline-block; padding: 16px 48px;
  background: var(--theme-primary); color: #fff;
  border-radius: 32px; font-size: 17px; font-weight: 700; letter-spacing: 2px;
  text-decoration: none; box-shadow: var(--theme-shadow);
  margin-bottom: 20px;
}
#cta-replay-btn {
  background: transparent; color: var(--theme-text-muted);
  border: 1px solid var(--theme-text-muted); padding: 8px 20px;
  border-radius: 18px; font-size: 13px; cursor: pointer; font-family: inherit;
  margin-bottom: 12px;
}
#cta-locked-endings { color: var(--theme-text-muted); font-size: 12px; }

/* ── interactionType skin overrides ────── */
body[data-interaction-type="guess"] .choice-btn::before { content: "❓ "; }
body[data-interaction-type="guess"] .choice-btn.correct { background: rgba(82,196,26,0.4); border-color: #52c41a; }
body[data-interaction-type="guess"] .choice-btn.wrong { background: rgba(255,77,79,0.4); border-color: #ff4d4f; }

/* ── Frame Bridge（截帧覆盖切换黑屏） ──── */
#frame-bridge {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;  /* 在 video 上，progress-bar 下 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  background: #000;
}
#frame-bridge.visible {
  opacity: 1;
}

/* video 元素自身淡入淡出，配合 frame-bridge */
#player {
  transition: opacity 0.15s ease-in;
}
#player.fading {
  opacity: 0;
}

/* ── Loading spinner ─────────────────────────── */
#loading-spinner {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--theme-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── iOS 防长按下载视频 / 禁选 ───────────────── */
#video-stage {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#player {
  pointer-events: none; /* 防止用户直接和 video 元素交互 */
}

/* ── overlay z-index 确保在 X5 同层渲染下盖住 video ── */
#decision-overlay,
#urgency-hint,
#pov-badge,
#character-picker,
#ending-screen,
#cta-screen,
#cover-screen,
#loading-spinner {
  z-index: 100;
}
#progress-bar { z-index: 60; }

/* ════════════════════════════════════════
   金币插件 Mode 3
   ════════════════════════════════════════ */

#coin-overlay {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 110;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
#coin-overlay:not(.hidden) {
  pointer-events: auto;
  opacity: 1;
}
.coin-mask {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.75);
}
.coin-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
  text-align: center;
}
#coin-logo {
  max-width: 100px;
  max-height: 40px;
  margin-bottom: 16px;
}
#coin-headline {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #f5c542;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(212, 50, 30, 0.6);
}
.coin-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 形态 1：拆红包 envelope ─────────────── */
.envelope-wrap {
  position: relative;
  width: 200px;
  height: 240px;
  margin-bottom: 30px;
  animation: envelope-bounce 0.6s ease-out, envelope-shake 1.5s ease-in-out 0.7s infinite;
}
.envelope-body {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, #d4321e 0%, #b02014 100%);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.envelope-body::before {
  content: "福";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  font-weight: 900;
  color: #f5c542;
  font-family: serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.envelope-flap {
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, #a01a0f 0%, #8a160d 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.envelope-wrap.opened .envelope-flap {
  transform: rotateX(180deg);
}
.envelope-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 66, 0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.envelope-wrap.opened .envelope-glow {
  opacity: 1;
}
@keyframes envelope-bounce {
  0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
  60% { transform: translateY(-20px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
@keyframes envelope-shake {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-3deg); }
  96% { transform: rotate(3deg); }
  98% { transform: rotate(-2deg); }
}
.coin-open-btn {
  padding: 12px 36px;
  background: linear-gradient(180deg, #ffb300 0%, #f5c542 100%);
  color: #7a1e0f;
  border: none;
  border-radius: 28px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: open-btn-pulse 1.5s ease-in-out infinite;
}
@keyframes open-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ── 形态 2：刮刮卡 scratch（红果风刮奖卡） ──────────────── */
.scratch-brand {
  font-size: 13px;
  font-weight: 700;
  color: #ffd24d;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.scratch-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-shadow: 0 0 1px #ffb300, 1px 1px 0 #e0902a, 0 0 16px rgba(255,210,90,0.7);
}
.scratch-wrap {
  position: relative;
  width: 300px;
  height: 188px;
  margin-bottom: 18px;
  border-radius: 16px;
  overflow: hidden;
  /* 金色描边 + 立体投影，品牌刮奖卡质感 */
  box-shadow: 0 0 0 3px #f0a93c, 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.scratch-reward-bg {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(120% 120% at 50% 30%, #fff3d6 0%, #ffd86b 42%, #f0a93c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.scratch-coin {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(150,90,10,0.4));
}
.scratch-amount-preview {
  font-size: 44px;
  font-weight: 900;
  color: #b3200f;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}
.scratch-reward-cap {
  font-size: 13px;
  font-weight: 700;
  color: #8a4a0f;
  letter-spacing: 1px;
}
#scratch-canvas {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;  /* 刮卡时禁用浏览器手势/滚动，保证 touchmove 连续触发 */
}
#scratch-canvas:active { cursor: grabbing; }
/* 刮开达标后卡面微微放大高亮 */
.scratch-wrap.revealed { animation: scratch-reveal 0.5s ease-out forwards; }
@keyframes scratch-reveal {
  0% { transform: scale(1); box-shadow: 0 0 0 3px #f0a93c, 0 10px 28px rgba(0,0,0,0.5); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1.03); box-shadow: 0 0 0 3px #ffd86b, 0 0 30px rgba(255,210,90,0.7), 0 10px 28px rgba(0,0,0,0.5); }
}
.scratch-hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  color: #8a4a0f;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
.scratch-wrap.revealed .scratch-hint { opacity: 0; transition: opacity 0.3s; }

/* ── 形态 3：转盘 wheel（金币大转盘） ──────────────────── */
.wheel-brand {
  font-size: 14px;
  font-weight: 800;
  color: #ffd24d;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-shadow: 0 0 1px #ffb300, 1px 1px 0 #e0902a, 0 0 16px rgba(255,210,90,0.7);
}
.wheel-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  margin-bottom: 18px;
}
/* 中奖扇区高亮光环（旋停后闪光） */
.wheel-win-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(255,216,107,0);
  z-index: 3;
}
.wheel-win-glow.show {
  animation: wheel-win 0.75s ease-out 2;
}
@keyframes wheel-win {
  0% { opacity: 1; box-shadow: 0 0 8px 4px rgba(255,216,107,0.9), 0 0 30px 10px rgba(255,170,60,0.6); }
  100% { opacity: 0.2; box-shadow: 0 0 24px 12px rgba(255,216,107,0.2), 0 0 60px 24px rgba(255,170,60,0.1); }
}
.wheel-disc {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  /* 6 扇：正红 / 金黄 相间 */
  background: conic-gradient(
    #e8243a 0deg 60deg,
    #ffc83a 60deg 120deg,
    #e8243a 120deg 180deg,
    #ffc83a 180deg 240deg,
    #e8243a 240deg 300deg,
    #ffc83a 300deg 360deg
  );
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
              inset 0 0 0 7px #fff,
              inset 0 0 0 9px #f0a93c;
}
/* 旋转：4s 强缓出（先快后极慢停），停在中奖扇区 */
.wheel-disc.spinning {
  transition: transform 4s cubic-bezier(0.12, 0.62, 0.2, 1);
}
/* 扇区面额标签层（随 disc 一起转） */
.wheel-labels {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}
.wheel-label {
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 50%;
  transform-origin: bottom center;  /* 绕圆心旋到各扇区中线 */
}
.wheel-label > span {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(120,10,10,0.6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 金黄扇区上的字改深红，保证对比度 */
.wheel-label:nth-child(2) > span,
.wheel-label:nth-child(4) > span,
.wheel-label:nth-child(6) > span { color: #b3200f; text-shadow: 0 1px 1px rgba(255,255,255,0.4); }
.wheel-label.is-win > span { font-size: 16px; }
.wheel-pointer {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 30px solid #fff;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
  z-index: 4;
}
.wheel-pointer::after {
  content: "";
  position: absolute;
  top: -34px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, #ffd86b 60%, #f0a93c 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* 中心 GO 按钮（醒目，可点击触发旋转） */
.wheel-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #b3200f;
  background: radial-gradient(circle at 38% 32%, #fff3d6 0%, #ffe07a 42%, #f0a93c 100%);
  box-shadow: 0 0 0 4px #d98e2c, 0 6px 16px rgba(120,20,10,0.5), inset 0 2px 6px rgba(255,255,255,0.6);
  z-index: 5;
  animation: rp-open-pulse 1.3s ease-in-out infinite;
}
.wheel-center:disabled {
  cursor: default;
  animation: none;
  opacity: 0.92;
}
.wheel-tip {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ── 奖励展示态 ─────────────────────────── */
#coin-reward-display {
  display: none;
  flex-direction: column;
  align-items: center;
}
#coin-reward-display.show {
  display: flex;
  animation: reward-fade-in 0.4s ease-out;
}
@keyframes reward-fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.coin-amount-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
}
.coin-prefix {
  font-size: 28px;
  color: #f5c542;
  font-weight: 800;
  margin-right: 4px;
}
#coin-amount {
  font-size: 56px;
  font-weight: 900;
  color: #f5c542;
  text-shadow: 0 0 12px rgba(245, 197, 66, 0.6), 0 3px 0 #7a1e0f;
  font-variant-numeric: tabular-nums;
}
#coin-unit {
  font-size: 18px;
  margin-left: 8px;
  color: #f5c542;
}
#coin-subheadline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1px;
  margin-bottom: 24px;
  padding: 0 20px;
}
#coin-cta-btn {
  display: inline-block;
  padding: 14px 44px;
  background: linear-gradient(180deg, #ffb300 0%, #f5c542 100%);
  color: #7a1e0f;
  border-radius: 32px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
  cursor: pointer;
}
#coin-skip-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 16px;
  margin-bottom: 4px;
}
#coin-skip-timer {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  letter-spacing: 1px;
  min-height: 16px;
}

/* ── 粒子动画 ───────────────────────────── */
#coin-particles {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}
.coin-particle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #fff6c2 0%, #f5c542 70%, transparent 100%);
  border-radius: 50%;
  top: 50%; left: 50%;
  animation: particle-fly 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes particle-fly {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% {
    transform: translate(
      calc(-50% + var(--dx, 100px)),
      calc(-50% + var(--dy, -100px))
    ) scale(0.3);
    opacity: 0;
  }
}

/* ════════════════════════════════════════
   红包炸裂全屏沉浸态（envelope 专用，参考红果真实红包）
   仅在 envelope 形态启用：#coin-overlay.rp-active 切换粉红渐变背景；
   scratch/wheel 不加 .rp-active，沿用上面的 .coin-mask 黑罩 + #coin-reward-display。
   ════════════════════════════════════════ */

/* envelope 态：把 overlay 整体背景换成粉红→珊瑚红渐变 + 飘落粒子 */
#coin-overlay.rp-active .coin-mask {
  background: linear-gradient(180deg, #ff7a9c 0%, #ff5e7e 52%, #ffe8ec 100%);
}
/* 底部祥云纹理（CSS 模拟，不用真图） */
#coin-overlay.rp-active .coin-mask::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    radial-gradient(60px 30px at 18% 88%, rgba(255,224,150,0.32) 0%, transparent 70%),
    radial-gradient(80px 36px at 50% 96%, rgba(255,224,150,0.28) 0%, transparent 72%),
    radial-gradient(64px 30px at 82% 90%, rgba(255,224,150,0.32) 0%, transparent 70%);
  pointer-events: none;
}
/* envelope 态隐藏通用 headline（红包卡自带文案） */
#coin-overlay.rp-active #coin-headline { display: none; }

/* ── 红包视觉变体（随机出现，避免千篇一律）。v1=默认粉红，下面覆盖 v2/v3 ── */
/* 变体 2：喜庆大红（正红背景 + 描金红卡） */
#coin-overlay.rp-active.rp-v2 .coin-mask {
  background: linear-gradient(180deg, #e8243a 0%, #c4162c 52%, #ffd9b0 100%);
}
#coin-overlay.rp-active.rp-v2 .rp-card {
  background: linear-gradient(165deg, #ff4d3d 0%, #c41024 100%);
  box-shadow: 0 16px 48px rgba(150,10,20,0.55), inset 0 1px 0 rgba(255,230,180,0.4);
}
/* 变体 3：紫金财神（紫粉背景 + 紫红卡） */
#coin-overlay.rp-active.rp-v3 .coin-mask {
  background: linear-gradient(180deg, #b03a8f 0%, #d24d7e 50%, #ffe2c0 100%);
}
#coin-overlay.rp-active.rp-v3 .rp-card {
  background: linear-gradient(165deg, #e0445a 0%, #a01e6a 100%);
  box-shadow: 0 16px 48px rgba(120,20,80,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ── 顶部大标语「现金红包天天领」金黄描边 ── */
.rp-slogan {
  font-size: 46px;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 26px;
  text-shadow:
    0 0 1px #ffb300,
    1px 1px 0 #f0a93c,
    2px 2px 0 #e0902a,
    3px 3px 0 #c9781f,
    0 0 18px rgba(255,210,90,0.85),
    0 6px 14px rgba(160,40,20,0.45);
  animation: rp-slogan-in 0.6s cubic-bezier(0.2,0.9,0.3,1.2) both;
}
@keyframes rp-slogan-in {
  0% { opacity: 0; transform: translateY(-30px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 红包主卡（红色立体渐变 + 强投影） ── */
.rp-card {
  position: relative;
  width: 72vw;
  max-width: 320px;
  border-radius: 24px;
  background: linear-gradient(165deg, #ff5a4d 0%, #e0342a 100%);
  box-shadow: 0 16px 48px rgba(200,30,20,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center 30%;
  animation: rp-card-in 0.55s cubic-bezier(0.2,0.9,0.3,1.2) 0.1s both;
}
@keyframes rp-card-in {
  0% { opacity: 0; transform: translateY(50px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 撕开动画：整卡上移缩小淡出（"撕开"露出奖励层） */
.rp-card.tearing {
  animation: rp-card-tear 0.55s cubic-bezier(0.5,0,0.7,0.2) forwards;
}
@keyframes rp-card-tear {
  0% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
  35% { transform: translateY(-6px) scale(1.04) rotateX(0); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.7) rotateX(70deg); }
}
.rp-card-top {
  font-size: 14px;
  color: rgba(255,255,255,0.95);
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-shadow: 0 1px 3px rgba(120,20,10,0.5);
}
.rp-blessing {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 8px;
  text-indent: 8px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffe9b0 0%, #ffd24d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffd24d;
  filter: drop-shadow(0 2px 4px rgba(120,20,10,0.5));
}

/* ── 金币「开」按钮（圆形金币 + 脉动 + 金光环 + 丝带） ── */
.rp-open-btn {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: radial-gradient(circle at 38% 32%, #fff0b8 0%, #ffe07a 38%, #f0a93c 100%);
  box-shadow:
    0 0 0 4px #d98e2c,
    0 6px 16px rgba(120,20,10,0.5),
    inset 0 2px 6px rgba(255,255,255,0.6);
  margin-bottom: 8px;
  animation: rp-open-pulse 1.3s ease-in-out infinite;
}
.rp-open-btn > span {
  font-size: 40px;
  font-weight: 900;
  color: #b3200f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
/* 金光环 */
.rp-open-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,120,0.55) 0%, transparent 68%);
  pointer-events: none;
  animation: rp-halo 1.6s ease-in-out infinite;
}
/* 红包封口金色丝带（横穿金币上方） */
/* 封口丝带已彻底移除：金币按钮上方紧挨"恭喜发财大吉大利"文字，丝带放哪都会遮挡。
   金币按钮本身 + ::before 金光环已足够丰富，不需要丝带。 */
@keyframes rp-open-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes rp-halo {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}
.rp-social {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
}

/* ── 开后奖励态（撕开后白卡 + 超大金额 + 进度条 + CTA） ── */
#coin-rp-reward {
  display: none;
  flex-direction: column;
  align-items: center;
}
#coin-rp-reward.show {
  display: flex;
}
.rp-reward-card {
  position: relative;
  width: 78vw;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fff6f2 100%);
  box-shadow: 0 18px 50px rgba(160,40,20,0.45);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rp-reward-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.3) both;
}
@keyframes rp-reward-pop {
  0% { opacity: 0; transform: scale(0.7) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
#rp-logo {
  max-width: 150px;
  max-height: 52px;
  margin-bottom: 12px;
}
.rp-brand {
  font-size: 13px;
  font-weight: 700;
  color: #ff3b30;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.rp-reward-title {
  font-size: 16px;
  font-weight: 800;
  color: #ff3b30;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-align: center;
}
.rp-amount-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
}
#rp-amount {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ff5a3c 0%, #ff8a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff6a3c;
  text-shadow: 0 2px 10px rgba(255,120,60,0.3);
  font-variant-numeric: tabular-nums;
}
.rp-unit {
  font-size: 20px;
  font-weight: 800;
  color: #ff7a3c;
  margin-left: 8px;
}
/* 进度条（粉红渐变胶囊，纯装饰） */
.rp-progress {
  width: 80%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,120,140,0.18);
  overflow: hidden;
  margin-bottom: 12px;
}
.rp-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff9ab0 0%, #ff5e7e 100%);
  transition: width 0.9s cubic-bezier(0.2,0.8,0.3,1);
}
.rp-note {
  font-size: 11px;
  color: #b0a8a4;
  letter-spacing: 0.3px;
  margin-bottom: 18px;
  text-align: center;
}
/* CTA 主按钮：金色大胶囊 + 脉动 */
#rp-cta {
  display: inline-block;
  width: 88%;
  text-align: center;
  padding: 15px 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffd86b 0%, #f0a93c 100%);
  color: #b3200f;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(240,140,40,0.5);
  cursor: pointer;
  animation: rp-cta-pulse 1.3s ease-in-out infinite;
  margin-bottom: 10px;
}
@keyframes rp-cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
#rp-skip {
  background: transparent;
  border: none;
  color: #b0a8a4;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 12px;
}
#rp-skip-timer {
  color: #c8c0bc;
  font-size: 11px;
  letter-spacing: 0.5px;
  min-height: 15px;
}

/* ── 红包专用粒子层（金币四散爆发 + 背景飘落） ── */
#rp-particles {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}
/* 背景飘落的小红包/金币（从上往下飘 + 旋转） */
.rp-fall {
  position: absolute;
  top: -8%;
  font-size: 22px;
  opacity: 0.9;
  animation: rp-fall-anim linear infinite;
  pointer-events: none;
}
@keyframes rp-fall-anim {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.95; }
  90% { opacity: 0.95; }
  100% { transform: translateY(112vh) rotate(360deg); opacity: 0; }
}
/* 金额出现瞬间四散爆发的金币 */
.rp-burst {
  position: absolute;
  top: 44%; left: 50%;
  font-size: 26px;
  animation: rp-burst-anim 1.3s cubic-bezier(0.15,0.7,0.3,1) forwards;
  pointer-events: none;
}
@keyframes rp-burst-anim {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; }
  100% {
    transform: translate(
      calc(-50% + var(--dx, 100px)),
      calc(-50% + var(--dy, -120px))
    ) scale(1.05) rotate(var(--rot, 180deg));
    opacity: 0;
  }
}

/* ════════════════════════════════════════
   红包雨 rain（玩法1）+ 累计 cumulative（玩法2）
   参考红果真实红包雨 / 现金红包累计样式
   ════════════════════════════════════════ */

/* rain 态背景：暗红渐变（区别于 envelope 的亮粉红） */
#coin-overlay.rain-active .coin-mask {
  background: radial-gradient(120% 80% at 50% 0%, #7a1414 0%, #4a0d10 60%, #2a0608 100%);
}
#coin-overlay.rain-active #coin-headline { display: none; }
#coin-overlay.rain-active #coin-logo { display: none; }

#coin-rain {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  justify-content: center;
}

/* ── 阶段 A：抢红包 ── */
.rain-catch {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rain-title {
  margin-top: 46px;
  font-size: 30px;
  font-weight: 900;
  color: #ffe08a;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 #b3200f, 0 0 18px rgba(255,200,90,0.7);
  z-index: 2;
}
.rain-sub {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,235,200,0.92);
  letter-spacing: 1px;
  z-index: 2;
}
.rain-timerbar {
  margin-top: 16px;
  width: 64%;
  max-width: 280px;
  height: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  z-index: 2;
}
.rain-timerbar-fill {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffd86b 0%, #ff7a3c 100%);
}
.rain-count {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}
.rain-count span { color: #ffe08a; font-size: 18px; }
/* 红包下落区（占满屏，红包绝对定位下落） */
.rain-field {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  pointer-events: none;   /* 让 .rain-drop 自己接管点击，容器不拦截 */
  z-index: 1;
  contain: layout style paint;
}
.rain-drop {
  position: absolute;
  top: -80px;
  width: 50px;
  height: 62px;
  border-radius: 10px;
  background: linear-gradient(160deg, #ff5a4d 0%, #d9281f 100%);
  box-shadow: 0 6px 14px rgba(120,10,10,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  animation-name: rain-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/* 红包上的金色封口圆 */
.rain-drop::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff0b8 0%, #ffe07a 42%, #f0a93c 100%);
  box-shadow: 0 0 0 3px rgba(217,142,44,0.65);
  z-index: 1;
}
/* 红包金色腰封（卡面装饰，不挡点击区） */
.rain-drop::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 40%;
  height: 8px;
  background: linear-gradient(90deg, rgba(255,216,107,0.95), rgba(240,169,60,0.95));
}
@keyframes rain-fall {
  0% { transform: translateY(-80px) rotate(-10deg); }
  100% { transform: translateY(112vh) rotate(10deg); }
}
.rain-drop.caught {
  animation: rain-caught 0.28s ease-out forwards;
}
@keyframes rain-caught {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── 阶段 B：结算（参考截图：你在红包雨中获得 +X 金币） ── */
.rain-result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 24px;
  z-index: 3;
  animation: rp-reward-pop 0.5s cubic-bezier(0.2,0.9,0.3,1.3) both;
}
.rain-result-head {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.rain-result-amount {
  display: flex;
  align-items: baseline;
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  color: #ffd24d;
  text-shadow: 0 2px 0 #b3200f, 0 0 24px rgba(255,200,90,0.7);
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}
.rain-amount-unit {
  font-size: 26px;
  font-weight: 800;
  margin-left: 8px;
}
/* 双卡：直接领取 → 看视频翻倍（参考截图 800→4000） */
.rain-doublecard {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.rain-card {
  width: 110px;
  border-radius: 14px;
  padding: 16px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rain-card-base {
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
  color: #999;
}
.rain-card-double {
  background: linear-gradient(180deg, #ffe7a8 0%, #ffcf5e 100%);
  color: #b3200f;
  box-shadow: 0 8px 20px rgba(240,160,40,0.5);
  transform: scale(1.08);
}
.rain-card-amt {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.rain-card-base .rain-card-amt { color: #ff6a3c; }
.rain-card-label {
  font-size: 13px;
  font-weight: 700;
}
.rain-card-arrow {
  font-size: 24px;
  font-weight: 900;
  color: #ffd24d;
}
.rain-cta {
  display: inline-block;
  width: 86%;
  max-width: 360px;
  text-align: center;
  padding: 15px 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #ff8a3c 0%, #ff5e2c 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(255,90,40,0.55);
  cursor: pointer;
  animation: rp-cta-pulse 1.3s ease-in-out infinite;
  margin-bottom: 10px;
}
.rain-skip {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 12px;
  text-decoration: underline;
}
#rain-skip-timer {
  margin-top: 6px;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  letter-spacing: 0.5px;
  min-height: 15px;
}

/* ── 累计金币文案（envelope/scratch/wheel/rain 通用） ── */
.rp-cumulative {
  font-size: 13px;
  line-height: 1.6;
  color: #8a5a2c;
  text-align: center;
  margin-bottom: 12px;
  padding: 0 6px;
}
.rp-cumulative b { color: #ff6a3c; font-weight: 900; font-size: 15px; }
.rp-cumulative .rp-gap { color: #ff2d2d; font-size: 18px; }
.rp-cumulative .rp-cum-hook {
  display: block;
  margin-top: 4px;
  color: #ff3b30;
  font-weight: 800;
  font-size: 13px;
}
/* rain 结算（暗背景）里累计文案浅色 */
#rain-cumulative { color: rgba(255,235,200,0.92); }
#rain-cumulative b { color: #ffe08a; }
#rain-cumulative .rp-gap { color: #ffd24d; }
#rain-cumulative .rp-cum-hook { color: #ffd24d; }
/* coin-reward-display（黑罩）里累计文案浅色 */
#coin-cumulative { color: rgba(255,255,255,0.85); }
#coin-cumulative b { color: #f5c542; }
#coin-cumulative .rp-gap { color: #ffd24d; }
#coin-cumulative .rp-cum-hook { color: #ffd24d; }
#coin-progress { width: 70%; margin: 0 auto 12px; }

/* ── 金币剧情引导过渡层（introText 铺垫） ── */
#coin-intro {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 112;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  background: rgba(20,8,10,0.6);
  pointer-events: none;
}
#coin-intro-text {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 0 18px rgba(255,180,90,0.5);
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2,0.9,0.3,1.2);
}
#coin-intro.show #coin-intro-text {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ════ 状态变量系统（4 大原则）════ */
#state-hud {
  position: absolute; top: 26px; left: 12px; z-index: 60;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.hud-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
  padding: 4px 8px; border-radius: 12px;
  transition: transform 0.2s;
}
.hud-row.hud-bump { transform: scale(1.08); }
.hud-icon { font-size: 13px; }
.hud-bar { width: 56px; height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden; }
.hud-fill { height: 100%; background: var(--theme-primary); border-radius: 3px; transition: width 0.5s cubic-bezier(0.2,0.8,0.3,1); }
.hud-num { font-size: 11px; color: #fff; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }

#stat-float-layer { position: absolute; inset: 0; top:0;right:0;bottom:0;left:0; pointer-events: none; z-index: 80; overflow: hidden; contain: layout style paint; }
.stat-float {
  position: absolute; left: 50%; top: 52%;
  transform: translateX(-50%) scale(0.5);
  font-size: 26px; font-weight: 900; white-space: nowrap;
  letter-spacing: 1px; opacity: 0;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
}
.stat-float.up {
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74,222,128,0.9), 0 2px 0 #166534, 0 3px 6px rgba(0,0,0,0.5);
}
.stat-float.down {
  color: #ff6b6b;
  text-shadow: 0 0 12px rgba(255,107,107,0.9), 0 2px 0 #991b1b, 0 3px 6px rgba(0,0,0,0.5);
}
.stat-float.fly {
  animation: stat-pop 0.3s cubic-bezier(0.2,1.4,0.4,1) forwards, stat-rise 1.1s ease-out forwards;
}
@keyframes stat-pop { 0%{opacity:0;transform:translateX(-50%) scale(0.5);} 60%{opacity:1;transform:translateX(-50%) scale(1.15);} 100%{transform:translateX(-50%) scale(1);} }
@keyframes stat-rise { 0%{} 70%{opacity:1;} 100%{opacity:0;transform:translateX(-50%) translateY(-70px) scale(1);} }

#choice-feedback {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%,-50%) scale(0.8);
  font-size: 30px; font-weight: 900; text-align: center;
  padding: 0 14px; opacity: 0; z-index: 80; pointer-events: none;
  letter-spacing: 2px; line-height: 1.3;
  white-space: nowrap;  /* 强制一行，不折行；字号由 JS 按字数动态缩放保证不溢出 */
  -webkit-text-stroke: 1px rgba(0,0,0,0.35);
}
#choice-feedback.flash {
  animation: cf-pop 0.35s cubic-bezier(0.2,1.4,0.4,1) forwards, cf-out 0.4s ease-in 1s forwards;
}
@keyframes cf-pop { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.8);} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);} }
@keyframes cf-out { to { opacity:0; transform:translate(-50%,-50%) scale(1.05); } }
#choice-feedback[data-tone="expected"] {
  color: #fff;
  text-shadow: 0 0 16px rgba(255,220,140,0.7), 0 2px 8px rgba(0,0,0,0.8);
}
#choice-feedback[data-tone="surprise"] {
  color: #ffd76e;
  text-shadow: 0 0 20px rgba(255,200,80,0.95), 0 0 40px rgba(255,160,40,0.6), 0 2px 10px rgba(0,0,0,0.8);
}
#choice-feedback[data-tone="surprise"].flash {
  animation: cf-pop 0.35s cubic-bezier(0.2,1.4,0.4,1) forwards, cf-shake 0.5s 0.35s, cf-out 0.4s ease-in 1s forwards;
}
@keyframes cf-shake { 0%,100%{transform:translate(-50%,-50%) scale(1);} 25%{transform:translate(-52%,-50%) scale(1.04);} 75%{transform:translate(-48%,-50%) scale(1.04);} }

/* ════ 弹幕模拟 + 投票（4 大原则·用户共创）════ */
#danmaku-layer {
  position: absolute; inset: 0; top:0;right:0;bottom:0;left:0;
  overflow: hidden; pointer-events: none; z-index: 40;
  contain: layout style paint;  /* 隔离弹幕频繁增删的 reflow/repaint，不影响整页 */
}
.danmaku-item {
  position: absolute; right: 0; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.9); /* color 由 inline style 覆盖，此为 fallback */
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
  transform: translateX(100vw);
  animation: danmaku-fly 7s linear forwards;
  will-change: transform;
}
@keyframes danmaku-fly { to { transform: translateX(-110vw); } }
#danmaku-layer.paused .danmaku-item { animation-play-state: paused; }

.vote-badge {
  display: inline-block; margin-left: 8px;
  font-size: 11px; color: var(--theme-accent);
  opacity: 0.85; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   §B/§D  bespoke 文字视觉小说设计层（仅 renderMode=text / #novel-stage）
   ─ 不设 z-index 跨层时一律 pointer-events:none，绝不挡正文；
   ─ 全部 scope 在 #novel-stage 内，绝不影响视频模式（renderMode!=='text'）。
   ════════════════════════════════════════════════════════════════ */

/* ── 暗角 vignette：四周收暗，增加摄影厚度（克制，不挡中部） ── */
.novel-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(0,0,0,0.28) 82%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
}

/* ── 阅读卡精致化：描金四角 + 顶部分隔短线（叠在现有 .novel-narration-text 上） ── */
.novel-narration-text {
  /* 主题色描边光晕，呼应 palette.primary（color-mix 回退：保留基础双层阴影） */
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07),
              0 0 0 1px color-mix(in srgb, var(--theme-primary) 22%, transparent);
}
/* 起首大引号改用主题色（覆盖原 primary 已是变量，这里加描金质感） */
.novel-narration-text::before { opacity: 0.42; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
/* 描金角花（左上 + 右下两枚 L 形角标） */
.novel-narration-text::after {
  content: ""; position: absolute; pointer-events: none;
  left: 10px; top: 10px; width: 22px; height: 22px;
  border-left: 2px solid var(--theme-accent);
  border-top: 2px solid var(--theme-accent);
  border-radius: 3px 0 0 0; opacity: 0.7;
}
/* 右下角花：用 narration 容器再画一枚（独立元素不够，用 box-shadow 投影法做不出 L；改用 .novel-narration 容器伪元素） */
#novel-stage.mode-narration .novel-narration::after {
  content: ""; position: absolute; pointer-events: none;
  /* 贴在卡片右下：用卡片最大宽度近似定位（卡居中，max-width 92%） */
  right: 5vw; bottom: 5vh; width: 22px; height: 22px;
  border-right: 2px solid var(--theme-accent);
  border-bottom: 2px solid var(--theme-accent);
  border-radius: 0 0 3px 0; opacity: 0.55;
}

/* 名牌：描金内描边，更精致 */
.novel-speaker {
  box-shadow: 0 4px 12px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.22);
}

/* serif/song/kai 字体时旁白用更大字号 + 更舒展行距（衬线适合长文） */
body[data-novel-font="serif"] .novel-narration-text,
body[data-novel-font="song"]  .novel-narration-text,
body[data-novel-font="kai"]   .novel-narration-text { font-size: 20px; line-height: 1.95; letter-spacing: 0.4px; }

/* ── 场景/章节小标题条（左上淡入，制造翻章感） ── */
.novel-scene-title {
  position: absolute; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 30px);
  max-width: 70%; padding: 7px 14px 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.26));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-left: 3px solid var(--theme-primary);
  border-radius: 4px 12px 12px 4px;
  pointer-events: none;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.novel-scene-title.show { opacity: 1; transform: none; }
.novel-scene-title .nst-kicker {
  font-size: 11px; letter-spacing: 3px; font-weight: 700;
  color: var(--theme-accent); text-transform: none;
}
.novel-scene-title .nst-main {
  font-size: 15px; letter-spacing: 1px; font-weight: 700; color: var(--theme-text, #fff);
}

/* ════ 文字模式弹幕：更大更显眼（§③，≈22px + 描边阴影；仅文字模式，video 模式不变） ════ */
body[data-render-mode="text"] .danmaku-item {
  font-size: 22px; font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.85),
               0 0 1px rgba(0,0,0,0.9), 1px 1px 0 rgba(0,0,0,0.55);
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.45);
  padding: 1px 2px;
}
/* 顶部带护栏：弹幕只在 ~16%~28% 的窄带（与 _danmakuLanes 文字模式一致），
   位于番茄 banner + 章节标题下方、旁白卡（≥30vh 起）上方 —— 彻底不与 banner/进度条/正文卡重叠（双保险） */
body[data-render-mode="text"] #danmaku-layer {
  top: 14%; bottom: auto; height: 15%;  /* 14-29% 窄带：banner+标题下方、旁白卡(30vh)上方；高度够 3 条 22px 车道(_danmakuLanes [0.08,0.42,0.76])均匀分布不叠，overflow:hidden 兜底裁切 */
}

/* ── 顶部常驻「下载番茄小说看全文」引导按钮（persistent top CTA，引流番茄小说/红果）── */
#top-cta-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%; transform: translateX(-50%);
  z-index: 70;                 /* 在弹幕(40)/进度条(60)之上，在各 overlay(>=100) 之下 */
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 88%; box-sizing: border-box; white-space: nowrap;
  padding: 9px 20px;
  font-size: 14px; font-weight: 800; letter-spacing: .5px; line-height: 1;
  color: #fff; text-decoration: none;
  background: var(--theme-accent, #C8302B);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.25);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: top-cta-pulse 2.4s ease-in-out infinite;
}
#top-cta-btn:active { filter: brightness(.92); }
@keyframes top-cta-pulse {
  0%,100% { transform: translateX(-50%) scale(1); }
  50%     { transform: translateX(-50%) scale(1.05); box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.12); }
}

/* 文字模式把「线索」HUD 下移到 banner + 章节标题下方，避免与顶部 banner/弹幕带重叠 */
/* 文字模式隐藏命运值/线索 HUD（🔍+进度条+数值）与数值飘字 —— 阅读界面更干净（用户反馈）。
   状态变量仍在内部跟踪、隐藏结局照常解锁，只是不显示这套游戏化 HUD。 */
body[data-render-mode="text"] #state-hud,
body[data-render-mode="text"] #stat-float-layer { display: none !important; }

/* ════ 文字模式顶部番茄小说引导 BANNER（§②/①/⑤）════
   贯通整宽（left/right 留小边距）、~46px 高、番茄色渐变、含 logo + 文案、圆角、轻脉动/流光。
   独占进度条（flush top, h:3px）下方一行，绝不重叠。
   顶部从上到下：进度条 → 番茄 banner → (章节标题瞬现) → 弹幕窄带 → 正文卡。
   z-index 70（弹幕40/进度条60 之上，overlay ≥100 之下）。 */
#novel-cta-pill {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 9px);     /* 紧贴 flush-top 进度条(3px)下方 */
  left: 8px; right: 8px;                               /* 贯通整宽，两侧仅小边距 */
  z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-sizing: border-box; white-space: nowrap; overflow: hidden;
  min-height: 46px; padding: 0 16px;
  font-size: 14.5px; font-weight: 800; letter-spacing: .3px; line-height: 1;
  color: #fff; text-decoration: none;
  /* 番茄色渐变（橙红→正红），呼应番茄小说品牌 */
  background: linear-gradient(135deg, #ff7a45 0%, #ff5630 48%, #f5391f 100%);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(200,40,20,.45), 0 2px 0 rgba(120,20,10,.22), inset 0 1px 0 rgba(255,255,255,.34);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: novel-cta-pulse 2.6s ease-in-out infinite;
}
/* 流动高光（banner 上掠过一道斜光，精致质感，不抢正文） */
#novel-cta-pill::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 38%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  animation: novel-cta-shine 3.4s ease-in-out infinite;
}
#novel-cta-pill:active { filter: brightness(.93); transform: scale(.992); }
.novel-cta-logo {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; background: #fff;
  box-shadow: 0 1px 4px rgba(120,20,10,.4);
}
.novel-cta-text {
  text-shadow: 0 1px 3px rgba(120,20,10,.5);
  overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 40px);
}
/* banner 改为全宽后脉动只缩放（不再含 translateX，避免与 left/right 定位冲突） */
@keyframes novel-cta-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.012); box-shadow: 0 10px 28px rgba(200,40,20,.52), 0 2px 0 rgba(120,20,10,.22), inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 3px rgba(255,120,80,.14); }
}
@keyframes novel-cta-shine {
  0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; }
}

/* 章节小标题条移到 banner 下方（细行；JS 在 ~2.6s 后自隐），不与 banner 重叠 */
body[data-render-mode="text"] .novel-scene-title {
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: 10px; max-width: calc(100% - 70px);
}

/* 时序桥接角标（倒叙/闪回）在文字模式移到 banner+标题下方，避免压 banner */
body[data-render-mode="text"] #time-label {
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: auto; right: 10px; transform: translate(0, -8px);
}
body[data-render-mode="text"] #time-label.show { transform: translate(0, 0); }

/* ════ 文字模式 BGM 静音/播放小按钮（§①）════
   移出顶部 → 右下角（轻触提示之上），不再挤顶部；圆形磨砂；z-index 72（轻触提示之上）。 */
#novel-bgm-toggle {
  position: absolute;
  bottom: 14vh;
  right: 12px;
  top: auto; left: auto;
  z-index: 72;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  border-radius: 50%;
  color: #fff; cursor: pointer;
  background: rgba(20,20,28,.46);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease-out, background .2s;
}
#novel-bgm-toggle:active { transform: scale(.9); }
#novel-bgm-toggle.is-muted { background: rgba(20,20,28,.62); color: rgba(255,255,255,.7); }

/* §13 banner 节点级换字：换字时轻微淡入提示（"升温"被感知，不喧宾夺主） */
.novel-cta-text.banner-swap { animation: novel-banner-swap 0.5s ease-out 1; }
@keyframes novel-banner-swap {
  0%   { opacity: 0.25; transform: translateY(-3px); }
  100% { opacity: 1;    transform: translateY(0); }
}

/* 极窄高度微调：banner 略矮、字号略小；BGM 键略缩 */
@media (max-height: 620px) {
  #novel-cta-pill { min-height: 42px; font-size: 13px; }
  #novel-bgm-toggle { bottom: 13vh; width: 34px; height: 34px; font-size: 15px; }
  body[data-render-mode="text"] .novel-scene-title { top: calc(env(safe-area-inset-top, 0px) + 56px); }
}

/* ════════════════════════════════════════════════════════════════
   §2 文字模式·断章 CTA 覆盖层（原地浮出，不整屏切走）
   #novel-cta-overlay 是 #novel-stage 的子节点 → 天然落在场景/立绘之上（保留断章背景）。
   靠 .nco-scrim 半透明压暗断裂消除；.nco-sheet 从底部抬起承接情绪峰值。
   仅文字模式渲染（视频模式仍走整屏 #cta-screen，本块零影响）。
   ════════════════════════════════════════════════════════════════ */
.novel-cta-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  /* 居中：最终要的内容（主 CTA）放页面中间（用户反馈"承载太多+要居中"），不再贴底大面 */
  /* 不设 z-index：在 stage 内 DOM 顺序最后 → 压住场景/立绘/正文；HUD/弹幕在 stage 外不受影响 */
  opacity: 0; transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.novel-cta-overlay.show { opacity: 1; pointer-events: auto; }
/* 半透明压暗：保留断章背景图/最后一句的轮廓，只压暗以托起 CTA（顶部更透、底部更暗） */
.nco-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.46) 32%,
    rgba(0,0,0,0.7) 64%, rgba(0,0,0,0.88) 100%);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
  backdrop-filter: blur(2px) saturate(1.05);
}
/* CTA 内容卡：从底部抬起，最大宽度居中，内部纵向堆叠 */
.nco-sheet {
  position: relative;
  width: calc(100% - 36px); max-width: 430px; margin: 0 auto;
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-height: 86%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* 居中玻璃卡（不再是贴底大面）：承载更轻、主 CTA 居页面中间 */
  background: linear-gradient(180deg, rgba(10,8,14,0.58), rgba(10,8,14,0.74));
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05);
  animation: nco-sheet-in 0.5s cubic-bezier(0.2,0.8,0.25,1) both;
}
@keyframes nco-sheet-in {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── §6 算账条（recap）── */
.nco-recap {
  width: 100%; margin-bottom: 10px; padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
}
.nco-recap-line {
  font-size: 14.5px; line-height: 1.5; font-weight: 700;
  color: #fff; letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.nco-recap-loss {
  margin-top: 6px; font-size: 13px; font-weight: 700;
  color: #ffd24d; letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* ── §12 免费看全本卖点 chip ── */
.nco-free-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  margin-bottom: 10px; padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a45 0%, #f5391f 100%);
  box-shadow: 0 6px 18px rgba(200,40,20,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.nco-free-badge #nco-free-badge-text,
.nco-free-badge > span:first-child {
  font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(120,20,10,0.5);
}
.nco-benefit-note {
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: 0.2px;
}

/* ── headline（承接结局悬念）── */
.nco-headline {
  font-size: 23px; font-weight: 800; line-height: 1.35;
  color: #fff; letter-spacing: 0.5px; margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.nco-subheadline {
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.82);
  letter-spacing: 0.3px; margin-bottom: 14px; max-width: 92%;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* ── §11 隐藏结局门控醒目卡片（升级版，醒目非 12px 小灰字）── */
.nco-locked {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-bottom: 10px; padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,210,90,0.16), rgba(255,140,40,0.12));
  border: 1px solid rgba(255,200,90,0.45);
  box-shadow: 0 4px 16px rgba(180,90,20,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.nco-locked-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.nco-locked-text {
  font-size: 14px; line-height: 1.45; font-weight: 700; text-align: left;
  color: #ffe6a8; letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ── §8 信任区（评分/读者/排名 + 短评）── */
.nco-trust { width: 100%; margin-bottom: 12px; }
.nco-trust-stats {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 7px;
}
.nco-stat {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  /* 统一：单行 + 同色黄字 + 等高（用户反馈：别"灰小字+黄大字"混搭、别因高度不一撑高别的） */
  font-size: 13.5px; font-weight: 800; line-height: 1.2; white-space: nowrap;
  color: #ffd24d; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.nco-stat-num {
  font-size: 15px; font-weight: 900; color: #ffd24d; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.nco-stat-label { font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.2px; }
.nco-stat-label:empty { display: none; }
.nco-reviews { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.nco-review {
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.8);
  font-style: italic; text-align: center; letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── §7 单一主 CTA 大按钮（视觉主导）── */
.nco-main-btn {
  display: inline-block; width: 100%; max-width: 420px;
  padding: 17px 0; text-align: center;
  font-size: 18px; font-weight: 900; letter-spacing: 1.5px;
  color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #ff7a45 0%, #ff5630 48%, #f5391f 100%);
  border: none; border-radius: 30px;
  box-shadow: 0 10px 26px rgba(200,40,20,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: nco-cta-pulse 1.8s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.nco-main-btn:active { filter: brightness(0.94); transform: scale(0.99); }
@keyframes nco-cta-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 10px 26px rgba(200,40,20,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%     { transform: scale(1.02); box-shadow: 0 14px 34px rgba(200,40,20,0.6), 0 0 0 4px rgba(255,120,80,0.14), inset 0 1px 0 rgba(255,255,255,0.3); }
}

/* ── §7/§20 次级行：分享 + 弱化再玩（小、弱、不与主按钮争注意力）── */
.nco-secondary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px;
}
.nco-share-btn, .nco-replay-btn {
  background: transparent; border: none;
  color: rgba(255,255,255,0.62); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; padding: 6px 8px;
  letter-spacing: 0.3px; text-decoration: underline; text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}
.nco-share-btn:active, .nco-replay-btn:active { color: rgba(255,255,255,0.9); }
.nco-secondary .nco-sep { color: rgba(255,255,255,0.35); font-size: 12px; }

/* reduce-motion：关掉抬起/脉动/淡入过渡，覆盖层直接以最终态出现（无动画，瞬显）。
   同时修掉某些环境（headless/省电 webview）下 opacity 过渡时钟被节流、淡入永远停在 0 的问题。 */
@media (prefers-reduced-motion: reduce) {
  .novel-cta-overlay { transition: none !important; }
  .nco-sheet { animation: none !important; }
  .nco-main-btn { animation: none !important; }
  .novel-cta-text.banner-swap { animation: none !important; }
}

/* 极窄高度：CTA 卡内边距与字号收一档，保证小屏不溢出（卡本身可滚兜底） */
@media (max-height: 640px) {
  .nco-sheet { padding: 16px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .nco-headline { font-size: 21px; }
  .nco-main-btn { padding: 15px 0; font-size: 17px; }
  .nco-recap { margin-bottom: 10px; padding: 10px 12px; }
  .nco-trust { margin-bottom: 12px; }
}

/* ════ 文字模式切换特效（§①）：≥5 种、明显但不晕、确定性轮换 ════
   全部只用 transform/opacity/clip-path/filter（GPU 友好），时长 ~0.22-0.5s，
   且每个 @keyframes 0%/100% 都回到 identity → 绝不永久位移布局；#novel-stage overflow:hidden 已裁剪溢出。
   特效作用于 #novel-stage（连同场景/立绘/装饰一起过渡），顶部 banner/进度条/弹幕/BGM 键是其兄弟节点不受影响。
   will-change 提示合成层；情绪强时叠加 .fx-strong 放大幅度。 */
#novel-stage.fx-fade-up,
#novel-stage.fx-shake,
#novel-stage.fx-flip,
#novel-stage.fx-zoom,
#novel-stage.fx-push,
#novel-stage.fx-reveal,
#novel-stage.fx-blur { will-change: transform, opacity, filter, clip-path; }

/* 1) 交叉淡入 + 上滑（强化：位移更明显、轻微缩放） */
#novel-stage.fx-fade-up { animation: nfx-fade-up 0.34s cubic-bezier(0.22,0.7,0.25,1) 1; }
@keyframes nfx-fade-up {
  0%   { opacity: 0.45; transform: translateY(26px) scale(0.985); }
  100% { opacity: 1;    transform: translateY(0)    scale(1); }
}

/* 2) 屏幕震动（强化：幅度比旧版大、次数多；强情绪走 .fx-strong 更猛） */
#novel-stage.fx-shake { animation: nfx-shake 0.34s cubic-bezier(0.36,0.07,0.19,0.97) 1; }
@keyframes nfx-shake {
  0%,100% { transform: translate(0,0); }
  12% { transform: translate(-6px, 2px); }
  26% { transform: translate(6px, -3px); }
  40% { transform: translate(-5px, 3px); }
  54% { transform: translate(5px, -2px); }
  68% { transform: translate(-3px, 2px); }
  82% { transform: translate(3px, -1px); }
}
#novel-stage.fx-shake.fx-strong { animation-duration: 0.42s; }
#novel-stage.fx-shake.fx-strong { animation-name: nfx-shake-strong; }
@keyframes nfx-shake-strong {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-10px, 4px); }
  22% { transform: translate(11px, -5px); }
  34% { transform: translate(-9px, 5px); }
  46% { transform: translate(9px, -4px); }
  58% { transform: translate(-7px, 3px); }
  70% { transform: translate(6px, -3px); }
  84% { transform: translate(-4px, 2px); }
}

/* 3) 翻页/翻转感（perspective + rotateY，从侧立翻正） */
#novel-stage.fx-flip { animation: nfx-flip 0.46s cubic-bezier(0.2,0.7,0.25,1) 1; transform-origin: 50% 50%; }
@keyframes nfx-flip {
  0%   { opacity: 0.4; transform: perspective(1200px) rotateY(-14deg) scale(0.97); }
  60%  { opacity: 1; }
  100% { opacity: 1;   transform: perspective(1200px) rotateY(0deg)  scale(1); }
}

/* 4) 光扫/闪白：用 .novel-fx-overlay 高光斜扫一道（不动布局，纯 opacity/transform） */
#novel-stage.fx-sweep .novel-fx-overlay { animation: nfx-sweep 0.5s ease-out 1; }
@keyframes nfx-sweep {
  0%   { opacity: 0; transform: translateX(-120%) skewX(-16deg); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%)  skewX(-16deg); }
}

/* 5) 缩放弹入（内容 scale 0.92→1 轻微 punch，带微回弹） */
#novel-stage.fx-zoom { animation: nfx-zoom 0.36s cubic-bezier(0.2,1.3,0.35,1) 1; transform-origin: 50% 54%; }
@keyframes nfx-zoom {
  0%   { opacity: 0.5; transform: scale(0.92); }
  100% { opacity: 1;   transform: scale(1); }
}

/* 6) 方向推移（上一屏被推走、新屏推入；左右交替由 .fx-push-alt 决定） */
#novel-stage.fx-push { animation: nfx-push-l 0.38s cubic-bezier(0.22,0.7,0.2,1) 1; }
#novel-stage.fx-push.fx-push-alt { animation-name: nfx-push-r; }
@keyframes nfx-push-l {
  0%   { opacity: 0.55; transform: translateX(7%); }
  100% { opacity: 1;    transform: translateX(0); }
}
@keyframes nfx-push-r {
  0%   { opacity: 0.55; transform: translateX(-7%); }
  100% { opacity: 1;    transform: translateX(0); }
}

/* 7) 径向揭示（clip-path circle 从点击点 --fx-x/--fx-y 展开；圆心默认中心） */
#novel-stage.fx-reveal { animation: nfx-reveal 0.44s cubic-bezier(0.3,0.7,0.25,1) 1; }
@keyframes nfx-reveal {
  0%   { clip-path: circle(8% at var(--fx-x, 50%) var(--fx-y, 50%)); opacity: 0.7; }
  100% { clip-path: circle(150% at var(--fx-x, 50%) var(--fx-y, 50%)); opacity: 1; }
}

/* 8) 模糊聚焦（blur→sharp，配轻微缩放强化"对焦"感） */
#novel-stage.fx-blur { animation: nfx-blur 0.4s ease-out 1; }
@keyframes nfx-blur {
  0%   { filter: blur(9px); opacity: 0.55; transform: scale(1.03); }
  100% { filter: blur(0);   opacity: 1;    transform: scale(1); }
}

/* 强情绪：给非震动类特效叠一道红闪（overlay），强化冲击但不晕 */
#novel-stage.fx-strong .novel-fx-overlay { animation: nfx-flash-strong 0.3s ease-out 1; }
@keyframes nfx-flash-strong {
  0%   { opacity: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(255,60,60,0.32), transparent 70%); }
  30%  { opacity: 1; background: radial-gradient(120% 90% at 50% 45%, rgba(255,60,60,0.32), transparent 70%); }
  100% { opacity: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(255,60,60,0.32), transparent 70%); }
}

/* 切换特效叠层：满屏、在装饰之上正文之下、不挡点击。默认透明，由上面各特效驱动一次性动画。 */
.novel-fx-overlay {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: 0; will-change: opacity, transform;
  /* 光扫默认高光带（fx-sweep 用）；fx-strong 时被红闪 background 覆盖 */
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%);
}

/* 背景图解码后交叉淡入（§④）：bg-swap 在新图 set 后触发一次柔和淡入，绝非白屏闪入 */
#novel-stage .novel-bg.bg-swap { animation: nfx-bg-swap 0.5s ease-out 1; }
@keyframes nfx-bg-swap { 0% { opacity: 0.35; } 100% { opacity: 1; } }

/* 轻触波纹：点击处扩散的小圆（pointer-events:none，不挡推进；overflow:hidden 已裁剪溢出） */
.novel-tap-ripple {
  position: absolute; z-index: 9;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.18) 45%, transparent 70%);
  border: 1px solid rgba(255,255,255,0.4);
  transform: scale(0); opacity: 0.9;
  animation: novel-tap-ripple 0.6s cubic-bezier(0.2,0.7,0.3,1) forwards;
}
@keyframes novel-tap-ripple {
  0% { transform: scale(0); opacity: 0.85; }
  100% { transform: scale(8); opacity: 0; }
}
/* 尊重 reduce-motion：关掉所有重特效（震动/翻转/推移/缩放/揭示/模糊/光扫/波纹），只保留极简淡入 */
@media (prefers-reduced-motion: reduce) {
  #novel-stage.fx-shake, #novel-stage.fx-flip, #novel-stage.fx-zoom,
  #novel-stage.fx-push, #novel-stage.fx-reveal, #novel-stage.fx-blur,
  #novel-stage.fx-sweep .novel-fx-overlay, #novel-stage.fx-strong .novel-fx-overlay {
    animation: none !important;
  }
  /* 仍保留一个不晕的淡入，让"有切换发生"可感知 */
  #novel-stage.fx-fade-up { animation: nfx-fade-soft 0.3s ease-out 1 !important; }
  @keyframes nfx-fade-soft { 0% { opacity: 0.6; } 100% { opacity: 1; } }
  .novel-tap-ripple { animation: none !important; opacity: 0 !important; }
  #novel-stage .novel-bg.bg-swap { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   装饰母题层（§B）：纯 CSS，按 #novel-stage[data-motif] 渲染。
   .novel-motif 整层 pointer-events:none、低透明、克制；不挡正文。
   每种 motif 给 .novel-motif 及其 3 个 span（motif-a/b/c）不同绘制。
   ════════════════════════════════════════════════════════════════ */
.novel-motif {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 0.8s ease-out;
}
/* 有 motif 才显形 */
#novel-stage[data-motif] .novel-motif { opacity: 1; }
.novel-motif > span { position: absolute; inset: 0; display: block; pointer-events: none; }
/* 对白态（角色立绘铺满）时装饰整体减弱，不抢人物 */
#novel-stage.mode-dialogue .novel-motif { opacity: 0.5; }

/* ── rain：斜向雨丝（两层不同速/角度的线性渐变滚动） ── */
#novel-stage[data-motif="rain"] .motif-a,
#novel-stage[data-motif="rain"] .motif-b {
  background-repeat: repeat;
  background-image: repeating-linear-gradient(105deg,
    transparent 0 7px,
    rgba(180,210,255,0.22) 7px 8px,
    transparent 8px 16px);
  background-size: 60px 120px;
  animation: motif-rain 0.7s linear infinite;
}
#novel-stage[data-motif="rain"] .motif-b {
  background-image: repeating-linear-gradient(102deg,
    transparent 0 11px, rgba(200,225,255,0.14) 11px 12px, transparent 12px 22px);
  background-size: 90px 160px; animation-duration: 1.15s; opacity: 0.7;
}
@keyframes motif-rain { from { background-position: 0 0; } to { background-position: -30px 120px; } }

/* ── ink：水墨晕染（对角两枚柔墨块，缓慢呼吸） ── */
#novel-stage[data-motif="ink"] .motif-a {
  background:
    radial-gradient(closest-side at 12% 14%, rgba(0,0,0,0.5), transparent 70%),
    radial-gradient(closest-side at 88% 90%, rgba(0,0,0,0.42), transparent 72%);
  filter: blur(2px); mix-blend-mode: multiply;
  animation: motif-breathe 11s ease-in-out infinite;
}
#novel-stage[data-motif="ink"] .motif-b {
  background:
    radial-gradient(closest-side at 90% 8%, rgba(20,20,30,0.32), transparent 68%),
    radial-gradient(closest-side at 6% 92%, rgba(20,20,30,0.3), transparent 70%);
  filter: blur(3px); mix-blend-mode: multiply; opacity: 0.8;
  animation: motif-breathe 14s ease-in-out infinite reverse;
}
@keyframes motif-breathe { 0%,100%{opacity:0.8;transform:scale(1);} 50%{opacity:1;transform:scale(1.05);} }

/* ── petals / sakura / snow：飘落粒子（用 radial-gradient 点阵做"花瓣/雪"，垂直滚动 + 摇摆） ── */
#novel-stage[data-motif="petals"] .motif-a, #novel-stage[data-motif="petals"] .motif-b,
#novel-stage[data-motif="sakura"] .motif-a, #novel-stage[data-motif="sakura"] .motif-b,
#novel-stage[data-motif="snow"]   .motif-a, #novel-stage[data-motif="snow"]   .motif-b {
  background-repeat: repeat;
  background-image:
    radial-gradient(4px 5px at 20% 10%, rgba(255,182,205,0.9), transparent 60%),
    radial-gradient(3px 4px at 60% 30%, rgba(255,160,190,0.8), transparent 60%),
    radial-gradient(5px 6px at 85% 18%, rgba(255,200,215,0.85), transparent 60%),
    radial-gradient(3px 4px at 40% 60%, rgba(255,175,200,0.75), transparent 60%),
    radial-gradient(4px 5px at 75% 75%, rgba(255,190,210,0.8), transparent 60%);
  background-size: 280px 360px;
  animation: motif-fall 9s linear infinite;
}
#novel-stage[data-motif="petals"] .motif-b, #novel-stage[data-motif="sakura"] .motif-b,
#novel-stage[data-motif="snow"]   .motif-b {
  background-size: 200px 300px; animation-duration: 13s; opacity: 0.6;
}
/* snow 改白色 + 更细 */
#novel-stage[data-motif="snow"] .motif-a, #novel-stage[data-motif="snow"] .motif-b {
  background-image:
    radial-gradient(3px 3px at 20% 10%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(3px 3px at 85% 18%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(3px 3px at 75% 75%, rgba(255,255,255,0.85), transparent 60%);
}
@keyframes motif-fall {
  0% { background-position: 0 -360px; }
  100% { background-position: 40px 360px; }
}

/* ── stars：星点闪烁（静态点阵 + 整体明暗呼吸 + 一层缓慢漂移） ── */
#novel-stage[data-motif="stars"] .motif-a {
  background-repeat: repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 45% 12%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(2px 2px at 70% 28%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.6), transparent 60%);
  background-size: 240px 240px;
  animation: motif-twinkle 4.5s ease-in-out infinite;
}
#novel-stage[data-motif="stars"] .motif-b {
  background-repeat: repeat;
  background-image:
    radial-gradient(1px 1px at 25% 40%, rgba(190,220,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 35%, rgba(200,225,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 50% 75%, rgba(210,230,255,0.7), transparent 60%);
  background-size: 320px 320px; opacity: 0.7;
  animation: motif-drift-slow 30s linear infinite;
}
@keyframes motif-twinkle { 0%,100%{opacity:0.55;} 50%{opacity:1;} }
@keyframes motif-drift-slow { from{background-position:0 0;} to{background-position:60px -40px;} }

/* ── runes：浮动符文微光（圆形符印 + 缓慢旋转/呼吸的辉光环） ── */
#novel-stage[data-motif="runes"] .motif-a {
  /* 老 webview 无 color-mix 时的回退（中性蓝紫辉光），新浏览器下方 color-mix 覆盖为主题色 */
  background:
    radial-gradient(closest-side at 18% 22%, rgba(120,180,255,0.34), transparent 70%),
    radial-gradient(closest-side at 82% 78%, rgba(200,120,255,0.3), transparent 72%);
  background:
    radial-gradient(closest-side at 18% 22%, color-mix(in srgb, var(--theme-accent) 40%, transparent), transparent 70%),
    radial-gradient(closest-side at 82% 78%, color-mix(in srgb, var(--theme-primary) 36%, transparent), transparent 72%);
  filter: blur(6px); opacity: 0.7;
  animation: motif-breathe 8s ease-in-out infinite;
}
#novel-stage[data-motif="runes"] .motif-b {
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, color-mix(in srgb, var(--theme-accent) 30%, transparent) 30deg,
    transparent 60deg, color-mix(in srgb, var(--theme-primary) 28%, transparent) 120deg, transparent 150deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 64%, transparent 66%);
  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 64%, transparent 66%);
  inset: 18% 18% auto auto; left: auto; top: 10%; width: 64%; height: 64%;
  opacity: 0.5; animation: motif-spin 26s linear infinite;
}
@keyframes motif-spin { to { transform: rotate(360deg); } }

/* ── neon：霓虹边框辉光（四边内发光双线，缓慢明灭） ── */
#novel-stage[data-motif="neon"] .motif-a {
  inset: 10px; border-radius: 18px;
  /* color-mix 回退：直接用主题变量（不透明），新浏览器下方覆盖为半透明混色 */
  border: 1.5px solid var(--theme-accent);
  box-shadow: 0 0 12px var(--theme-accent), inset 0 0 18px rgba(255,255,255,0.12);
  border: 1.5px solid color-mix(in srgb, var(--theme-accent) 75%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--theme-accent) 60%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--theme-accent) 28%, transparent);
  opacity: 0.85; animation: motif-neon 2.6s ease-in-out infinite;
}
#novel-stage[data-motif="neon"] .motif-b {
  inset: 16px; border-radius: 16px;
  border: 1px solid var(--theme-primary);
  box-shadow: 0 0 16px var(--theme-primary);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 65%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--theme-primary) 50%, transparent);
  opacity: 0.6; animation: motif-neon 3.4s ease-in-out infinite reverse;
}
@keyframes motif-neon { 0%,100%{opacity:0.45;} 50%{opacity:0.95;} }
/* tech 复用 neon 观感但更冷（叠一层细网格） */
#novel-stage[data-motif="tech"] .motif-a {
  inset: 0; border: none; border-radius: 0;
  /* color-mix 回退：中性青色细网格 */
  background-image:
    linear-gradient(rgba(120,220,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,220,255,0.14) 1px, transparent 1px);
  background-image:
    linear-gradient(color-mix(in srgb, var(--theme-accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 16%, transparent) 1px, transparent 1px);
  background-size: 44px 44px; box-shadow: none; opacity: 0.5;
  animation: motif-grid 8s linear infinite;
}
#novel-stage[data-motif="tech"] .motif-b {
  inset: 8px; border-radius: 8px;
  border: 1px solid var(--theme-accent);
  border: 1px solid color-mix(in srgb, var(--theme-accent) 50%, transparent);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--theme-accent) 20%, transparent);
  opacity: 0.6; animation: motif-neon 3s ease-in-out infinite;
}
@keyframes motif-grid { from{background-position:0 0,0 0;} to{background-position:0 44px,44px 0;} }

/* ── paper：纸纹（细斜网纹 + 暖色叠加，配 serif 更像旧书页） ── */
#novel-stage[data-motif="paper"] .motif-a {
  background-image:
    repeating-linear-gradient(45deg, rgba(120,90,50,0.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(120,90,50,0.04) 0 2px, transparent 2px 6px);
  mix-blend-mode: multiply; opacity: 0.9;
}
#novel-stage[data-motif="paper"] .motif-b {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,240,210,0.10), transparent 60%);
  opacity: 0.8;
}

/* ── gold：流金光斑（斜向流动的暖金高光带 + 角落金尘） ── */
#novel-stage[data-motif="gold"] .motif-a {
  background: linear-gradient(115deg,
    transparent 30%, rgba(255,215,120,0.16) 46%, rgba(255,235,180,0.26) 50%,
    rgba(255,215,120,0.16) 54%, transparent 70%);
  background-size: 280% 280%;
  animation: motif-sheen 7s ease-in-out infinite;
}
#novel-stage[data-motif="gold"] .motif-b {
  background:
    radial-gradient(closest-side at 14% 16%, rgba(255,210,110,0.3), transparent 70%),
    radial-gradient(closest-side at 86% 84%, rgba(255,225,150,0.26), transparent 72%);
  filter: blur(4px); opacity: 0.7; animation: motif-breathe 9s ease-in-out infinite;
}
@keyframes motif-sheen { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

/* ── blood / ember：暗红血色 / 余烬（底部升腾的暖红辉光 + 飘散火星点） ── */
#novel-stage[data-motif="blood"] .motif-a,
#novel-stage[data-motif="ember"] .motif-a {
  background: radial-gradient(120% 80% at 50% 118%, rgba(190,30,40,0.5) 0%, transparent 60%);
  animation: motif-breathe 7s ease-in-out infinite;
}
#novel-stage[data-motif="ember"] .motif-a {
  background: radial-gradient(120% 80% at 50% 118%, rgba(255,120,40,0.45) 0%, transparent 60%);
}
#novel-stage[data-motif="blood"] .motif-b,
#novel-stage[data-motif="ember"] .motif-b {
  background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 25% 80%, rgba(255,120,80,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,90,60,0.8), transparent 60%),
    radial-gradient(2px 2px at 80% 88%, rgba(255,140,90,0.85), transparent 60%);
  background-size: 260px 340px; opacity: 0.7;
  animation: motif-rise 6s linear infinite;
}
@keyframes motif-rise { 0%{background-position:0 340px;opacity:0.2;} 50%{opacity:0.8;} 100%{background-position:-30px -40px;opacity:0;} }

/* ── mist：流动雾气（两层柔白横向漂移） ── */
#novel-stage[data-motif="mist"] .motif-a {
  background: radial-gradient(140% 60% at 50% 60%, rgba(255,255,255,0.12), transparent 70%);
  filter: blur(8px); animation: motif-drift-x 22s ease-in-out infinite;
}
#novel-stage[data-motif="mist"] .motif-b {
  background: radial-gradient(120% 50% at 30% 80%, rgba(220,230,255,0.1), transparent 72%);
  filter: blur(10px); opacity: 0.7; animation: motif-drift-x 30s ease-in-out infinite reverse;
}
@keyframes motif-drift-x { 0%,100%{transform:translateX(-6%);} 50%{transform:translateX(6%);} }

/* 性能/可达性：尊重 reduce-motion，关掉装饰动画（保留静态观感） */
@media (prefers-reduced-motion: reduce) {
  .novel-motif > span { animation: none !important; }
}