/* ============================================================
   爱乐之城 · 光影版 — 成都信息工程大学
   视觉主题：La La Land 的暮色紫 / 午夜蓝 / 星光金 / 灯塔青
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  /* 主色 — 取自《爱乐之城》暮色场景 */
  --midnight:   #0b1029;
  --midnight-2: #131a3a;
  --dusk:       #2a1e4f;
  --violet:     #6d4aa8;
  --orchid:     #a678d6;
  --rose:       #e06b8b;
  --gold:       #f3c76b;
  --gold-soft:  #f7dfa5;
  --teal:       #3fc7c0;
  --cream:      #fdf6e8;
  --ink:        #eae4f2;
  --ink-dim:    rgba(234, 228, 242, .62);
  --ink-faint:  rgba(234, 228, 242, .34);

  --font-display: "Didot", "Songti SC", "STSong", "Noto Serif SC", serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  --ease-silk: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--midnight);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { cursor: default; user-select: none; overflow-wrap: break-word; word-break: break-word; }

/* ============================================================
   背景层
   ============================================================ */
.bg-stage {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #241b47 0%, transparent 60%),
    radial-gradient(90% 70% at 15% 0%, #1d2456 0%, transparent 55%),
    linear-gradient(170deg, #070a1c 0%, #0b1029 40%, #161037 75%, #0a0c20 100%);
  transition: background 1.1s var(--ease-soft);
}

/* 极光光斑 —— 缓慢漂移，制造呼吸感 */
.bg-aurora {
  position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: .55; will-change: transform;
}
.aurora-a {
  width: 62vw; height: 62vw; left: -14vw; top: -18vw;
  background: radial-gradient(circle, rgba(109,74,168,.85) 0%, rgba(109,74,168,0) 68%);
  animation: drift-a 26s var(--ease-soft) infinite alternate;
}
.aurora-b {
  width: 58vw; height: 58vw; right: -12vw; bottom: -22vw;
  background: radial-gradient(circle, rgba(63,199,192,.55) 0%, rgba(63,199,192,0) 68%);
  animation: drift-b 32s var(--ease-soft) infinite alternate;
}
@keyframes drift-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(8vw, 6vh, 0) scale(1.18); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0,0,0) scale(1.1); }
  100% { transform: translate3d(-7vw, -5vh, 0) scale(.92); }
}

#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.bg-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(3,5,14,.72) 100%);
  transition: background 1.1s var(--ease-soft);
}
.bg-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ============================================================
   幻灯片容器与转场
   ============================================================ */
.deck { position: relative; z-index: 2; height: 100%; }

.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(2.4rem, 5vw, 5rem) clamp(1.6rem, 6vw, 7rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 核心转场：位移 + 缩放 + 模糊 + 旋转微调 */
  transform: translate3d(0, 4vh, 0) scale(.96);
  filter: blur(10px);
  transition:
    opacity .85s var(--ease-silk),
    transform 1.05s var(--ease-silk),
    filter .85s var(--ease-silk),
    visibility 0s linear .85s;
}

.slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  transition:
    opacity .9s var(--ease-silk),
    transform 1.15s var(--ease-silk),
    filter .9s var(--ease-silk),
    visibility 0s linear 0s;
  z-index: 3;
}

/* 离场方向：向左滑出（下一页） */
.slide.is-leaving { transform: translate3d(-5vw, -2vh, 0) scale(1.04); filter: blur(12px); opacity: 0; }

/* 幕次水印 —— 默认隐藏。
   幕次信息已由左下角 HUD 标签表达，这里的大写罗马数字
   在深色舞台上呈现为空心态的怪异线框，故不显示。
   若想启用，把下面的 display 改为 block 即可。 */
.act-number {
  display: none;
  position: absolute;
  font-family: var(--font-display);
  font-size: min(22vh, 17vw);
  line-height: 1;
  color: rgba(247, 223, 165, .032);
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(3.2rem, 7vh, 5rem);
  z-index: 0;
}

/* 幻灯片内容始终在水印之上（排除谢幕页，它有自己的层叠结构） */
.slide:not(.final-act) > *:not(.act-number) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   入场动画基类
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .9s var(--ease-silk) var(--d, 0s),
    transform 1s var(--ease-silk) var(--d, 0s);
}
.slide.is-active .reveal { opacity: 1; transform: translate3d(0,0,0); }

/* 标题逐字遮罩上滑 */
.cover-title .line { display: block; overflow: hidden; }
.cover-title .line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.15s var(--ease-silk) var(--d, 0s);
}
.slide.is-active .cover-title .line > span { transform: translate3d(0,0,0); }

/* ============================================================
   封面
   ============================================================ */
.cover-inner { text-align: center; max-width: 980px; }

.cover-logo {
  position: relative;
  width: clamp(96px, 11vw, 150px);
  margin: 0 auto clamp(1.6rem, 3vh, 2.6rem);
  display: grid; place-items: center;
}
.cover-logo img {
  width: 100%; display: block; border-radius: 50%;
  filter: drop-shadow(0 14px 40px rgba(109,74,168,.55));
  animation: logo-float 7s ease-in-out infinite;
}
@keyframes logo-float {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-9px) }
}
/* 校徽外圈光环 */
.logo-ring {
  position: absolute; inset: -16%;
  border-radius: 50%;
  border: 1px solid rgba(247,223,165,.32);
  animation: ring-pulse 3.6s ease-out infinite;
}
.logo-ring::after {
  content: ''; position: absolute; inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(63,199,192,.22);
  animation: ring-pulse 3.6s ease-out .9s infinite;
}
@keyframes ring-pulse {
  0%   { transform: scale(.86); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1.22); opacity: 0; }
}

.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .18em;
}
.cover-title .line > span {
  font-size: clamp(3rem, 11vw, 8.4rem);
  line-height: 1.02;
  background: linear-gradient(175deg, #fffaf0 8%, var(--gold-soft) 38%, var(--gold) 62%, #c98f5a 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 用 text-shadow 会画出方框，改用父层独立发光层 */
  position: relative;
}
/* 独立的光晕层，避免 background-clip:text 与 drop-shadow 冲突产生暗块 */
.cover-title .line { position: relative; }
.cover-title .line::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 82%; height: 62%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(243,199,107,.24) 0%, rgba(243,199,107,0) 68%);
  filter: blur(38px);
  pointer-events: none;
  z-index: -1;
}
.cover-title .sub > span {
  font-size: clamp(1rem, 2.6vw, 1.85rem);
  letter-spacing: .52em;
  margin-top: .7em;
  color: var(--cream);
  -webkit-text-fill-color: var(--cream);
  background: none;
  opacity: .9;
  filter: none;
}

.cover-rule {
  width: min(340px, 52vw); height: 1px; margin: clamp(1.6rem,3vh,2.4rem) auto;
  background: linear-gradient(90deg, transparent, rgba(247,223,165,.7), transparent);
  transform: scaleX(0);
  transition: transform 1.3s var(--ease-silk) var(--d, 0s);
}
.slide.is-active .cover-rule { transform: scaleX(1); }

.cover-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(.85rem, 1.6vw, 1.15rem);
  letter-spacing: .16em;
  color: var(--ink-dim);
}
.cover-meta {
  margin-top: .9em;
  font-size: clamp(.72rem, 1.15vw, .92rem);
  letter-spacing: .3em;
  color: var(--ink-faint);
}

.cover-hint {
  margin-top: clamp(2.2rem, 5vh, 3.6rem);
  font-size: clamp(.7rem, 1.05vw, .84rem);
  letter-spacing: .26em;
  color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: .8em;
}
.cover-hint .key {
  display: inline-grid; place-items: center;
  width: 2em; height: 2em; border-radius: 6px;
  border: 1px solid rgba(247,223,165,.34);
  color: var(--gold-soft);
  animation: key-nudge 1.9s ease-in-out infinite;
}
@keyframes key-nudge {
  0%,100% { transform: translateX(0); opacity: .85 }
  50%     { transform: translateX(5px); opacity: 1 }
}

/* ============================================================
   通用页头
   ============================================================ */
.slide-head { text-align: center; margin-bottom: clamp(1.4rem, 3.4vh, 2.8rem); flex: 0 0 auto; }

.kicker {
  font-size: clamp(.66rem, 1vw, .78rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .85em;
  font-weight: 500;
}

.slide-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.5rem);
  letter-spacing: .2em;
  line-height: 1.15;
  background: linear-gradient(170deg, #fffdf7 10%, var(--gold-soft) 52%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide-sub {
  margin-top: .8em;
  font-size: clamp(.72rem, 1.15vw, .9rem);
  letter-spacing: .22em;
  color: var(--ink-dim);
}
.slide-sub em { font-family: var(--font-display); font-style: italic; color: var(--gold-soft); }

/* ============================================================
   第一幕
   ============================================================ */
.act-1 .slide-head { margin-bottom: clamp(1rem, 2.4vh, 1.8rem); }

.cast-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
}
.cast { text-align: center; }
.cast-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: .12em;
  color: var(--cream);
  line-height: 1.5;
}
.cast-role {
  display: block;
  margin-top: .15em;
  font-size: clamp(.62rem, .95vw, .74rem);
  letter-spacing: .3em;
  color: var(--ink-faint);
  line-height: 1.4;
}
.cast-sep {
  width: 1px; height: 2.4em;
  background: linear-gradient(180deg, transparent, rgba(247,223,165,.42), transparent);
}

.beat-list { width: min(940px, 100%); display: grid; gap: clamp(.6rem, 1.5vh, 1rem); }

.beat {
  display: flex; gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(.75rem, 1.6vh, 1.15rem) clamp(1rem, 2.2vw, 1.7rem);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .5s var(--ease-silk), border-color .5s, background .5s;
}
.beat:hover {
  transform: translateX(6px);
  border-color: rgba(247,223,165,.32);
  background: linear-gradient(100deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
}

.beat-no {
  font-family: var(--font-display);
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  color: var(--gold);
  opacity: .8;
  flex: 0 0 auto;
  padding-top: .1em;
  letter-spacing: .08em;
}
.beat-body { flex: 1 1 auto; min-width: 0; }

.beat-who {
  font-size: clamp(.74rem, 1.1vw, .86rem);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: .35em;
}
.beat-stage {
  font-weight: 400; letter-spacing: .02em;
  color: var(--ink-faint);
  margin-left: .7em;
  font-size: .92em;
}

.beat-line {
  font-size: clamp(.88rem, 1.32vw, 1.04rem);
  line-height: 1.72;
  color: var(--ink);
}
.beat-line.muted { color: var(--ink-dim); }
.beat-line.accent { color: var(--gold-soft); }

.slide-foot {
  margin-top: clamp(1.1rem, 2.6vh, 2rem);
  display: flex; align-items: center; gap: 1.1rem;
  flex-wrap: wrap; justify-content: center;
}
.tag-pill {
  padding: .42em 1.1em; border-radius: 999px;
  font-size: clamp(.66rem, .95vw, .76rem);
  letter-spacing: .2em;
  color: var(--midnight);
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  font-weight: 600;
}
.tag-note {
  font-size: clamp(.66rem, .95vw, .78rem);
  letter-spacing: .14em;
  color: var(--ink-faint);
}

/* ============================================================
   第二幕 · 双独白
   ============================================================ */
.duo {
  width: min(1180px, 100%);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.6vw, 2.2rem);
}

.monologue {
  position: relative;
  padding: clamp(1.2rem, 2.6vh, 2rem) clamp(1.2rem, 2.2vw, 2rem);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.014));
  border: 1px solid rgba(255,255,255,.085);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
/* 顶部渐变描边 */
.monologue::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
  opacity: .8;
}
.monologue.right::before { background: linear-gradient(90deg, transparent, var(--teal), transparent); }

.mono-head { display: flex; align-items: baseline; gap: .7em; margin-bottom: .85em; }
.mono-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: .1em;
  color: var(--cream);
}
.mono-role {
  font-size: clamp(.62rem, .92vw, .72rem);
  letter-spacing: .26em;
  color: var(--ink-faint);
}

.mono-text {
  font-size: clamp(.84rem, 1.24vw, .98rem);
  line-height: 1.85;
  color: var(--ink-dim);
  margin-bottom: .7em;
}
.mono-text.strong { color: var(--ink); margin-bottom: 0; }
.mono-text.strong em {
  font-style: normal;
  color: var(--gold-soft);
  border-bottom: 1px solid rgba(247,223,165,.4);
}

.mono-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5em;
  margin: .2em 0 .9em;
}
.mono-tags li {
  font-size: clamp(.66rem, .95vw, .76rem);
  letter-spacing: .06em;
  padding: .34em .95em;
  border-radius: 999px;
  color: var(--gold-soft);
  border: 1px solid rgba(247,223,165,.26);
  background: rgba(247,223,165,.06);
}

.mono-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: .1em;
  color: var(--teal);
  margin: .1em 0 .55em;
  line-height: 1.3;
}

/* ============================================================
   第二幕 · 四定格
   ============================================================ */
.frames {
  width: min(1340px, 100%);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.3rem);
}

.frame {
  position: relative;
  padding: clamp(1rem, 2.2vh, 1.6rem) clamp(.9rem, 1.4vw, 1.3rem);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: clamp(230px, 34vh, 320px);   /* 四卡等高 */
  transition: transform .55s var(--ease-silk), border-color .55s;
}
.frame:hover { transform: translateY(-8px); border-color: rgba(247,223,165,.3); }

/* 卡片扫光 */
.frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .95s var(--ease-silk);
  pointer-events: none;
}
.frame:hover::after { transform: translateX(120%); }

.frame-no {
  font-size: clamp(.6rem, .88vw, .7rem);
  letter-spacing: .26em;
  color: var(--teal);
  margin-bottom: .8em;
}
.frame-icon {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--gold);
  margin-bottom: .7em;
  opacity: .9;
}
.frame figcaption {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.frame-action {
  font-size: clamp(.78rem, 1.14vw, .92rem);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: .5em;
}
.frame-line {
  font-size: clamp(.72rem, 1.02vw, .84rem);
  line-height: 1.7;
  color: var(--ink-faint);
  font-style: italic;
}

/* ============================================================
   第三幕 A · 双光对峙
   ============================================================ */
.split-stage {
  width: min(1120px, 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.6rem);
}

.stage-side {
  position: relative;
  padding: clamp(1.3rem, 3vh, 2.2rem) clamp(1.2rem, 2vw, 1.9rem);
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  min-height: clamp(210px, 30vh, 300px);
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .6s var(--ease-silk);
}
.stage-side.left { background: radial-gradient(120% 100% at 50% 0%, rgba(224,107,139,.16), rgba(255,255,255,.02)); }
.stage-side.right { background: radial-gradient(120% 100% at 50% 0%, rgba(63,199,192,.1), rgba(255,255,255,.012)); }

/* 顶光锥 */
.spotlight {
  position: absolute; top: -30%; left: 50%;
  width: 62%; height: 120%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%);
  pointer-events: none;
  opacity: .7;
  animation: spot-breathe 5.5s ease-in-out infinite;
}
@keyframes spot-breathe {
  0%,100% { opacity: .45; }
  50%     { opacity: .85; }
}

.side-label {
  font-size: clamp(.6rem, .9vw, .7rem);
  letter-spacing: .3em;
  color: var(--ink-faint);
  margin-bottom: .6em;
}
.side-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  letter-spacing: .14em;
  color: var(--cream);
  margin-bottom: .5em;
}
.phone-line {
  font-size: clamp(.82rem, 1.2vw, .95rem);
  line-height: 1.8;
  color: var(--ink-dim);
  font-style: normal;
  max-width: 34ch; margin: 0 auto .7em;
  border-left: 2px solid rgba(224,107,139,.5);
  padding-left: .9em; text-align: left;
}
.side-note {
  font-size: clamp(.68rem, .98vw, .78rem);
  letter-spacing: .06em;
  color: var(--ink-faint);
  line-height: 1.7;
}
.side-note.big {
  font-size: clamp(.82rem, 1.2vw, .96rem);
  color: var(--ink-dim);
  margin-bottom: .6em;
}

.transition-line {
  margin-top: clamp(1rem, 2.6vh, 1.8rem);
  text-align: center;
  font-size: clamp(.76rem, 1.1vw, .9rem);
  letter-spacing: .1em;
  line-height: 2;
  color: var(--ink-faint);
}
.transition-line .dim { opacity: .68; }

/* ============================================================
   第三幕 B · 两顶帽子
   ============================================================ */
.hat-scene {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(.6rem, 1.8vw, 1.4rem);
}

.hat-card {
  position: relative;
  padding: clamp(1.1rem, 2.6vh, 1.9rem) clamp(1.1rem, 1.9vw, 1.7rem);
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.012));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.hat-visual { display: grid; place-items: center; margin-bottom: .8em; }
.hat-svg {
  width: clamp(64px, 8vw, 92px);
  height: auto;
  transition: transform .7s var(--ease-silk);
}
.hat-card:hover .hat-svg { transform: translateY(-7px) rotate(-6deg); }

.hat-card.jazz .hat-svg { color: var(--gold); filter: drop-shadow(0 8px 24px rgba(243,199,107,.45)); }
.hat-card.reality .hat-svg { color: #8d95b3; filter: drop-shadow(0 8px 24px rgba(141,149,179,.32)); }

.hat-label {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: .16em;
  color: var(--cream);
  margin-bottom: .3em;
}
.hat-card.jazz .hat-label { color: var(--gold-soft); }

.hat-sub {
  font-size: clamp(.64rem, .92vw, .74rem);
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin-bottom: 1em;
}
.hat-desc {
  font-size: clamp(.78rem, 1.14vw, .92rem);
  line-height: 1.85;
  color: var(--ink-dim);
}
.hat-desc strong { color: var(--gold-soft); font-weight: 600; }
.hat-detail {
  margin-top: .9em;
  padding-top: .85em;
  border-top: 1px dashed rgba(255,255,255,.12);
  font-size: clamp(.68rem, .96vw, .78rem);
  color: var(--ink-faint);
  line-height: 1.7;
}
.hat-detail.strong { color: var(--gold-soft); letter-spacing: .06em; }

.hat-divider {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 0 .2rem;
}
.divider-line {
  width: 1px; flex: 1;
  background: linear-gradient(180deg, transparent, rgba(247,223,165,.34), transparent);
  min-height: 30px;
}
.divider-dot { color: var(--gold); font-size: .8rem; opacity: .7; }

/* ============================================================
   第三幕 C · 面试与争吵
   ============================================================ */
.act-3c { justify-content: flex-start; padding-top: clamp(2rem, 4vw, 3.4rem); padding-bottom: clamp(3.6rem, 6vh, 4.8rem); }

.act-3c .slide-head { margin-bottom: clamp(.7rem, 1.6vh, 1.1rem); }
.act-3c .slide-title { font-size: clamp(1.6rem, 3.6vw, 2.7rem); }

.audition { width: min(1080px, 100%); margin-bottom: clamp(.7rem, 1.6vh, 1.1rem); }
.audition-title {
  text-align: center;
  font-size: clamp(.68rem, .95vw, .76rem);
  letter-spacing: .28em;
  color: var(--teal);
  margin-bottom: .7em;
}
.audition-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.4rem, 1vw, .75rem);
  margin-bottom: .7em;
}
.aud-item {
  padding: clamp(.45rem, 1vh, .7rem) .7rem;
  border-radius: 11px;
  text-align: center;
  font-size: clamp(.68rem, 1vw, .8rem);
  color: var(--ink-dim);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  position: relative;
  transition: transform .5s var(--ease-silk), opacity .5s;
}
.aud-item:nth-child(1) { opacity: .95; }
.aud-item:nth-child(2) { opacity: .8; transform: translateY(4px); }
.aud-item:nth-child(3) { opacity: .62; transform: translateY(8px); }
.aud-item:nth-child(4) { opacity: .46; transform: translateY(12px); }
.slide.is-active .aud-item:nth-child(2) { transform: translateY(4px); }
.slide.is-active .aud-item:nth-child(3) { transform: translateY(8px); }
.slide.is-active .aud-item:nth-child(4) { transform: translateY(12px); }

.aud-n {
  display: block;
  font-family: var(--font-display);
  color: var(--rose);
  font-size: .82em;
  margin-bottom: .3em;
  opacity: .8;
}
.audition-note {
  text-align: center;
  font-size: clamp(.68rem, .98vw, .78rem);
  color: var(--ink-faint);
  line-height: 1.65;
  letter-spacing: .03em;
}

.fight { width: min(1080px, 100%); }
.brother {
  text-align: center;
  padding: clamp(.55rem, 1.3vh, .8rem) 1.1rem;
  border-radius: 11px;
  background: rgba(141,149,179,.08);
  border: 1px dashed rgba(141,149,179,.28);
  margin-bottom: clamp(.55rem, 1.3vh, .85rem);
}
.bro-who {
  font-size: clamp(.6rem, .86vw, .68rem);
  letter-spacing: .22em;
  color: #9aa3c2;
  margin-bottom: .35em;
}
.bro-line {
  font-size: clamp(.76rem, 1.1vw, .88rem);
  color: var(--ink);
  line-height: 1.6;
}

.fight-lines { display: grid; gap: clamp(.28rem, .75vh, .45rem); }

.fl-line {
  display: flex; align-items: baseline; gap: .8em;
  padding: clamp(.36rem, .85vh, .52rem) clamp(.8rem, 1.4vw, 1.1rem);
  border-radius: 9px;
  font-size: clamp(.72rem, 1.04vw, .84rem);
  line-height: 1.55;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
  transition: background .4s;
}
.fl-line:hover { background: rgba(255,255,255,.035); }

.fl-line.mia { border-left-color: rgba(224,107,139,.6); background: rgba(224,107,139,.05); }
.fl-line.seb { border-left-color: rgba(63,199,192,.55); background: rgba(63,199,192,.04); }
.fl-line.climax {
  color: var(--cream);
  background: rgba(224,107,139,.11);
  border-left-color: var(--rose);
  font-weight: 500;
}
.fl-line.final {
  color: var(--gold-soft);
  background: rgba(247,223,165,.07);
  border-left-color: var(--gold);
  letter-spacing: .04em;
  font-style: italic;
}
.fl-who {
  flex: 0 0 auto;
  font-size: .9em;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold-soft);
  opacity: .85;
}
.fl-line.mia .fl-who { color: var(--rose); }
.fl-line.seb .fl-who { color: var(--teal); }

.fight-end {
  margin-top: clamp(.6rem, 1.4vh, .95rem);
  text-align: center;
  font-size: clamp(.7rem, 1vw, .82rem);
  letter-spacing: .14em;
  color: var(--ink-faint);
}

/* ============================================================
   第四幕 · 双景
   ============================================================ */
.dual-view {
  width: min(1060px, 100%);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(.8rem, 2vw, 1.8rem);
}

.dv {
  text-align: center;
  padding: clamp(1.3rem, 3vh, 2.2rem) clamp(1.1rem, 2vw, 1.8rem);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .6s var(--ease-silk), border-color .6s;
}
.dv:hover { transform: translateY(-7px); border-color: rgba(247,223,165,.28); }

.dv-icon {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--gold);
  margin-bottom: .5em;
}
.dv-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  letter-spacing: .16em;
  color: var(--cream);
  margin-bottom: .6em;
}
.dv-desc {
  font-size: clamp(.78rem, 1.14vw, .92rem);
  line-height: 1.8;
  color: var(--ink-dim);
  margin-bottom: .9em;
}
.dv-result {
  font-size: clamp(.76rem, 1.1vw, .9rem);
  line-height: 1.7;
  color: var(--gold-soft);
  padding-top: .8em;
  border-top: 1px solid rgba(247,223,165,.18);
}

.dv-bridge {
  width: 1px; height: clamp(80px, 16vh, 150px);
  background: linear-gradient(180deg, transparent, rgba(63,199,192,.45), transparent);
}

.dual-note {
  margin-top: clamp(1rem, 2.6vh, 1.8rem);
  text-align: center;
  font-size: clamp(.72rem, 1.04vw, .86rem);
  letter-spacing: .18em;
  color: var(--ink-faint);
}

/* ============================================================
   第五幕 · 谢幕（La La Land 日落天际线）
   ------------------------------------------------------------
   纯代码绘制的矢量背景：紫红渐变天空 + 巨型太阳 + 城市剪影
   + 棕榈树 + 霓虹光带。无位图，任意分辨率都清晰。
   ============================================================ */
.final-act {
  text-align: center;
  padding: 0;
  overflow: hidden;
  display: block;   /* 覆盖 .slide 的 flex，避免绝对定位子元素塌陷 */
}

/* ---------- 背景容器 ---------- */
.final-bg {
  position: absolute;
  /* 抵消 .slide 的 padding，铺满整个可视区 */
  top: calc(-1 * clamp(2.4rem, 5vw, 5rem));
  left: calc(-1 * clamp(1.6rem, 6vw, 7rem));
  right: calc(-1 * clamp(1.6rem, 6vw, 7rem));
  bottom: calc(-1 * clamp(2.4rem, 5vw, 5rem));
  overflow: hidden;
  z-index: 0;
}

/* 天空渐变：深紫顶 → 品红中 → 暖橘底 */
.sky-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 78% at 50% 96%, #ff9d7a 0%, rgba(255,120,140,0) 52%),
    radial-gradient(100% 66% at 50% 88%, #f0509e 0%, rgba(240,80,158,0) 62%),
    linear-gradient(180deg,
      #0a0616 0%,
      #1a0b2e 22%,
      #3a1152 42%,
      #6d1d64 60%,
      #a52866 74%,
      #d1406f 84%,
      #f06a7a 94%,
      #ffb08a 100%);
  transition: opacity 1.2s var(--ease-soft);
}

/* ---------- 太阳 ---------- */
.sun-wrap {
  position: absolute;
  left: 50%;
  bottom: 27%;
  width: min(52vw, 74vh);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 外发光 */
.sun-glow {
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 140, 200, .55) 0%,
    rgba(240, 90, 200, .30) 26%,
    rgba(190, 50, 160, .12) 48%,
    transparent 70%);
  filter: blur(18px);
  animation: sun-breathe 11s ease-in-out infinite;
}
@keyframes sun-breathe {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* 太阳外发光随节拍膨胀 */
.sun-glow {
  transform: scale(calc(1 + var(--beat, 0) * 0.10));
  transition: transform .09s linear;
}

/* 太阳本体：上品红下暖橙，模拟日落 */
.sun-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 78%,
      #ffd9a8 0%,
      #ffab8c 16%,
      #ff7fa8 38%,
      #f2508f 60%,
      #c22e78 82%,
      #8a1a5c 100%);
  box-shadow:
    0 0 90px rgba(255, 120, 180, .55),
    0 0 190px rgba(230, 60, 150, .28),
    inset 0 -8% 22% rgba(90, 0, 60, .35);
  /* 缓慢升起 */
  animation: sun-rise 16s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sun-rise {
  0%   { transform: translateY(46%) scale(.9);   opacity: 0; }
  100% { transform: translateY(0) scale(1);      opacity: 1; }
}

/* 太阳外圈光晕环 */
.sun-rings {
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  border: 1px solid rgba(255, 190, 220, .16);
  animation: ring-drift 14s linear infinite;
}
.sun-rings::after {
  content: '';
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  border: 1px solid rgba(255, 160, 210, .09);
}
@keyframes ring-drift {
  0%   { transform: rotate(0deg);   opacity: .7; }
  50%  { opacity: 1; }
  100% { transform: rotate(360deg); opacity: .7; }
}

/* ---------- 霓虹光带 ---------- */
.light-beams {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
}
.light-beams span {
  width: clamp(2px, .22vw, 5px);
  /* 光带只覆盖天空，不压到建筑与地面，避免底部被切成方块 */
  height: 74%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 120, 220, .06) 20%,
    rgba(255, 90, 210, .26) 60%,
    rgba(255, 170, 230, .42) 88%,
    transparent 100%);
  filter: blur(1.2px);
  transform-origin: bottom center;
  animation: beam-sway 9s ease-in-out infinite;
}
.light-beams span:nth-child(1)  { animation-delay: 0s;    opacity: .45; }
.light-beams span:nth-child(2)  { animation-delay: -1.3s; opacity: .72; }
.light-beams span:nth-child(3)  { animation-delay: -2.7s; opacity: .38; }
.light-beams span:nth-child(4)  { animation-delay: -0.6s; opacity: .85; }
.light-beams span:nth-child(5)  { animation-delay: -3.4s; opacity: .52; }
.light-beams span:nth-child(6)  { animation-delay: -1.9s; opacity: .66; }
.light-beams span:nth-child(7)  { animation-delay: -4.1s; opacity: .40; }
.light-beams span:nth-child(8)  { animation-delay: -0.9s; opacity: .78; }
.light-beams span:nth-child(9)  { animation-delay: -2.2s; opacity: .58; }
.light-beams span:nth-child(10) { animation-delay: -3.8s; opacity: .48; }
.light-beams span:nth-child(11) { animation-delay: -1.5s; opacity: .70; }
.light-beams span:nth-child(12) { animation-delay: -2.9s; opacity: .36; }
@keyframes beam-sway {
  0%, 100% { transform: scaleX(1)    translateY(0); opacity: .38; }
  50%      { transform: scaleX(1.9)  translateY(-1.2%); opacity: .85; }
}

/* 光带随节拍整体提亮（--beat 由 JS 写入，0~1） */
.light-beams {
  filter: brightness(calc(1 + var(--beat, 0) * 0.85));
  transition: filter .08s linear;
}

/* ---------- 天际线 ---------- */
.skyline {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.skyline-far {
  bottom: 12%;
  height: 24%;
  opacity: .72;
  filter: blur(.5px);
}
.skyline-near {
  bottom: 0;
  height: 34%;
  display: block;
  /* 底部用渐变融入地面，任何缝隙都被遮住 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/* ---------- 棕榈树 ---------- */
.palm {
  position: absolute;
  bottom: 6%;
  height: 38%;
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(255, 80, 160, .25));
}
.palm-l { left: 3%; }
.palm-r { right: 3%; transform: scaleX(-1); }

/* ---------- 地面 ---------- */
/* 地面：柔和暗角，盖住建筑底部与屏幕边缘的接缝 */
.ground-glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(180deg,
    rgba(26, 5, 20, 0) 0%,
    rgba(26, 5, 20, .55) 46%,
    rgba(14, 3, 12, .95) 100%);
  pointer-events: none;
}
/* 地平线：只用一层极淡的暖光晕，不画实线 */
.horizon-line {
  position: absolute;
  left: 0; right: 0; bottom: 10%;
  height: 90px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 150, 195, .10) 46%,
    rgba(255, 180, 215, .16) 58%,
    transparent 100%);
  filter: blur(16px);
  pointer-events: none;
}

/* ---------- 星空 ---------- */
.stars-field {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 58%;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 8%  14%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 18% 32%, rgba(255,235,250,.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 27% 9%,  rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 26%, rgba(255,225,245,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 6%,  rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.3px 1.3px at 56% 20%, rgba(255,240,250,.72), transparent 60%),
    radial-gradient(1.7px 1.7px at 67% 11%, rgba(255,255,255,.88), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 30%, rgba(255,230,248,.68), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 17%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(1.3px 1.3px at 94% 35%, rgba(255,238,250,.7),  transparent 60%),
    radial-gradient(1.1px 1.1px at 13% 44%, rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 42%, rgba(255,245,252,.7),  transparent 60%);
  animation: twinkle 5.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  42%      { opacity: .95; }
  68%      { opacity: .55; }
}

/* ---------- 云层 ---------- */
.clouds {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52%;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .5;
  mix-blend-mode: screen;
}
.c1 {
  top: 16%; left: -26%;
  width: 54%; height: 15%;
  background: radial-gradient(ellipse at center, rgba(226, 92, 190, .55), transparent 70%);
  animation: cloud-drift 48s linear infinite;
}
.c2 {
  top: 30%; left: -40%;
  width: 66%; height: 12%;
  background: radial-gradient(ellipse at center, rgba(255, 130, 175, .40), transparent 70%);
  animation: cloud-drift 68s linear infinite -22s;
}
.c3 {
  top: 8%; left: -34%;
  width: 46%; height: 10%;
  background: radial-gradient(ellipse at center, rgba(160, 90, 220, .40), transparent 70%);
  animation: cloud-drift 84s linear infinite -47s;
}
@keyframes cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(230%); }
}

/* ---------- 楼体窗户 ---------- */
.windows rect {
  opacity: .85;
  animation: win-flicker 6s ease-in-out infinite;
}
.windows rect:nth-child(3n)   { animation-delay: -1.4s; animation-duration: 7.5s; }
.windows rect:nth-child(3n+1) { animation-delay: -3.1s; animation-duration: 5.2s; }
.windows rect:nth-child(3n+2) { animation-delay: -4.8s; animation-duration: 8.6s; }
@keyframes win-flicker {
  0%, 100% { opacity: .20; }
  30%      { opacity: .95; }
  55%      { opacity: .45; }
  75%      { opacity: 1;   }
}

/* ---------- 上升光点 ---------- */
.motes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.motes span {
  position: absolute;
  bottom: -6%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 250, .95), rgba(255, 170, 215, .35) 55%, transparent 72%);
  filter: blur(.4px);
  animation: mote-rise linear infinite;
}
.motes span:nth-child(1)  { left: 6%;  animation-duration: 17s; animation-delay: 0s;    transform: scale(1.0); }
.motes span:nth-child(2)  { left: 13%; animation-duration: 22s; animation-delay: -4s;   transform: scale(.7); }
.motes span:nth-child(3)  { left: 21%; animation-duration: 15s; animation-delay: -8s;   transform: scale(1.3); }
.motes span:nth-child(4)  { left: 29%; animation-duration: 25s; animation-delay: -2s;   transform: scale(.85); }
.motes span:nth-child(5)  { left: 37%; animation-duration: 19s; animation-delay: -11s;  transform: scale(1.1); }
.motes span:nth-child(6)  { left: 46%; animation-duration: 23s; animation-delay: -6s;   transform: scale(.75); }
.motes span:nth-child(7)  { left: 54%; animation-duration: 16s; animation-delay: -13s;  transform: scale(1.2); }
.motes span:nth-child(8)  { left: 62%; animation-duration: 21s; animation-delay: -3s;   transform: scale(.9); }
.motes span:nth-child(9)  { left: 70%; animation-duration: 27s; animation-delay: -9s;   transform: scale(1.05); }
.motes span:nth-child(10) { left: 78%; animation-duration: 18s; animation-delay: -15s;  transform: scale(.8); }
.motes span:nth-child(11) { left: 85%; animation-duration: 24s; animation-delay: -5s;   transform: scale(1.25); }
.motes span:nth-child(12) { left: 92%; animation-duration: 20s; animation-delay: -12s;  transform: scale(.88); }
.motes span:nth-child(13) { left: 33%; animation-duration: 29s; animation-delay: -18s;  transform: scale(1.15); }
.motes span:nth-child(14) { left: 58%; animation-duration: 26s; animation-delay: -7s;   transform: scale(.72); }
.motes span:nth-child(15) { left: 96%; animation-duration: 21s; animation-delay: -16s;  transform: scale(1.0); }
@keyframes mote-rise {
  0%   { transform: translateY(0) scale(var(--s, 1)); opacity: 0; }
  12%  { opacity: .9; }
  80%  { opacity: .55; }
  100% { transform: translateY(-118vh) scale(var(--s, 1)); opacity: 0; }
}

/* ---------- 艺术字 ---------- */
.final-hero {
  position: absolute;
  top: calc(-1 * clamp(2.4rem, 5vw, 5rem));
  left: calc(-1 * clamp(1.6rem, 6vw, 7rem));
  right: calc(-1 * clamp(1.6rem, 6vw, 7rem));
  bottom: calc(-1 * clamp(2.4rem, 5vw, 5rem));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  pointer-events: none;
}

.hero-title {
  font-family: "Didot", "Playfair Display", "Songti SC", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  line-height: .92;
  text-align: center;
  letter-spacing: .01em;
  margin: 0;
  position: relative;
  z-index: 4;
}

.hero-line {
  display: block;
  /* 入场用 translateY 而非裁切，避免 overflow:hidden 在扫光时露出矩形边界 */
  overflow: visible;
}

.hero-line .word {
  display: inline-block;
  font-size: clamp(3rem, 12.5vw, 13rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.015em;

  /* 纯白实心 + 深色描边 + 粉色外发光，
     即使在亮色太阳前也能保持清晰可读 */
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 1.5px rgba(60, 6, 34, .30);
  paint-order: stroke fill;
  text-shadow:
    0 2px 3px  rgba(70, 0, 40, .55),
    0 0 3px    rgba(255, 255, 255, 1),
    0 0 22px   rgba(255, 190, 230, .85),
    0 0 54px   rgba(235, 90, 185, .60),
    0 0 110px  rgba(180, 40, 140, .40),
    0 14px 52px rgba(0, 0, 0, .60);

  /* 入场：从下方浮起 + 淡入 */
  transform: translateY(38px);
  opacity: 0;
  transition:
    transform 1.35s cubic-bezier(.16, 1, .3, 1) var(--d, 0s),
    opacity 1.1s var(--ease-soft) var(--d, 0s);
}

.slide.is-active .hero-line .word {
  transform: translateY(0);
  opacity: 1;
}

/* 第二行字号略小，形成层次 */
.hero-line.l2 .word {
  font-size: clamp(2.5rem, 10.5vw, 11rem);
}

/* ---------- 艺术字的动态光影 ----------
   1) 逐字弹出 —— 每个字母依次放大入场
   2) 扫光     —— 一道暖白光周期性掠过字面
   3) 浮动     —— 两行错相位缓慢上下
   4) 落影     —— 地面出现文字的倒影，随节拍微颤
   ---------------------------------------------------------- */

/* ---- 1) 逐字弹出 ---- */
.hero-char {
  display: inline-block;
  /* 初始：缩小 + 下沉 + 透明，等待逐个弹出 */
  transform: translateY(46px) scale(.72);
  opacity: 0;
  filter: blur(6px);
  transition:
    transform .82s cubic-bezier(.18, 1.28, .34, 1) var(--cd, 0s),
    opacity .58s var(--ease-soft) var(--cd, 0s),
    filter .58s var(--ease-soft) var(--cd, 0s);
}
.slide.is-active .hero-char {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0);
}
.hero-char.space { width: .28em; }

/* 整行的常驻浮动：作用在外层，不干扰字母自身的过渡 */
.slide.is-active .hero-line.l1 .word {
  animation: word-float 8s ease-in-out 2.2s infinite;
}
.slide.is-active .hero-line.l2 .word {
  animation: word-float 8s ease-in-out 3.2s infinite reverse;
}
@keyframes word-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4%); }
}

/* ---- 2) 扫光 ---- */
.hero-line .word { position: relative; }

.hero-line .word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, .55) 44%,
    rgba(255, 250, 255, 1) 50%,
    rgba(255, 235, 250, .60) 56%,
    rgba(255, 255, 255, 0) 66%
  );
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: 170% 0;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  animation: shimmer-sweep 5.5s cubic-bezier(.45, 0, .25, 1) 2.4s infinite;
}
.hero-line.l2 .word::after { animation-delay: 3.3s; }

@keyframes shimmer-sweep {
  0%          { background-position: 170% 0; }
  55%, 100%   { background-position: -90% 0; }
}

/* ---- 3) 整体呼吸 + 节拍闪光 ---- */
.final-hero {
  animation: hero-glow 6.5s ease-in-out infinite;
}
@keyframes hero-glow {
  0%, 100% { filter: brightness(1)    saturate(1); }
  50%      { filter: brightness(1.12) saturate(1.08); }
}

/* ---- 4) 地面倒影 ----
   放在建筑下方的地面上，只映出文字底部的一小截，
   随节拍与声浪轻轻颤动。 */
.hero-reflection {
  /* 用 fixed 直接锚定视口底部，不受 .slide 的 padding 影响；
     仅在谢幕页显示 */
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 11vh;
  display: none;
  z-index: 2;
  pointer-events: none;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  /* 垂直翻转：以自身中心为原点，翻转后仍占据同一区域 */
  transform: scaleY(-1);
  transform-origin: center center;
  /* 越往下越淡，自然融进地面 */
  -webkit-mask-image: linear-gradient(0deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.18) 78%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(0deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.18) 78%, rgba(0,0,0,0) 100%);
  opacity: .8;
  filter: blur(3px) brightness(calc(1 + var(--beat, 0) * 0.7));
  transition: filter .09s linear;
}
.hero-reflection .refl-text {
  font-family: "Didot", "Playfair Display", "Songti SC", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  font-size: clamp(2rem, 7.4vw, 7.6rem);
  letter-spacing: -.015em;
  white-space: nowrap;
  color: rgba(255, 190, 225, .40);
  text-shadow:
    0 0 18px rgba(255, 120, 195, .40),
    0 0 48px rgba(200, 55, 150, .22);
  animation: refl-ripple 6.5s ease-in-out infinite;
}
/* 仅在第 9 页（非剪影模式）显示 */
body.mode-final .hero-reflection { display: flex; }

@keyframes refl-ripple {
  0%, 100% { transform: scaleY(1)    skewX(0deg);   }
  33%      { transform: scaleY(1.06) skewX(.7deg);  }
  66%      { transform: scaleY(.97)  skewX(-.6deg); }
}

/* ============================================================
   第五幕 · 重逢（黑底简素）
   ------------------------------------------------------------
   谢幕之前的最后一幕：安静、克制，只留两行字。
   与前四幕同一套剪影基调，但字号更大、留白更多。
   ============================================================ */
.reunion-act {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.reunion-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.8rem, 2vh, 1.4rem);
}

.reunion-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 8.2rem);
  letter-spacing: .34em;
  text-indent: .34em;
  line-height: 1.1;
  color: rgba(238, 231, 216, .62);
  -webkit-text-fill-color: rgba(238, 231, 216, .62);
  background: none;
  text-shadow:
    0 0 34px rgba(226, 214, 192, .10),
    0 0 90px rgba(220, 206, 184, .05);
  animation: reunion-breathe 7.5s ease-in-out infinite;
}
@keyframes reunion-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1;   }
}

.reunion-rule {
  width: min(300px, 46vw);
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(226, 216, 198, .26), transparent);
  transform: scaleX(0);
  transition: transform 1.5s var(--ease-silk) .4s;
}
.slide.is-active .reunion-rule { transform: scaleX(1); }

.reunion-desc {
  font-size: clamp(.76rem, 1.1vw, .92rem);
  letter-spacing: .26em;
  color: rgba(222, 212, 194, .26);
  margin-top: .2em;
}

@media (max-width: 820px) {
  .reunion-title { font-size: clamp(2.6rem, 15vw, 5rem); letter-spacing: .24em; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 820px) {
  .sun-wrap { width: min(74vw, 46vh); bottom: 26%; }
  .hero-line .word     { font-size: clamp(2.4rem, 15vw, 6rem); }
  .hero-line.l2 .word  { font-size: clamp(2rem, 13vw, 5.2rem); }
  .palm { height: 30%; opacity: .85; }
  .skyline-far { display: none; }
}

/* ============================================================
   进度条 & HUD
   ============================================================ */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 40;
  background: rgba(255,255,255,.05);
}
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--orchid), var(--gold));
  box-shadow: 0 0 14px rgba(243,199,107,.55);
  transition: width .95s var(--ease-silk), background 1s var(--ease-soft), box-shadow 1s var(--ease-soft);
}

.hud {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(.8rem, 1.8vh, 1.3rem) clamp(1.1rem, 3vw, 2.4rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease-soft);
}
.hud.ready { opacity: 1; }
.hud > * { pointer-events: auto; }

.hud-left { display: flex; align-items: center; gap: .9em; }
.hud-tag {
  font-size: clamp(.62rem, .92vw, .74rem);
  letter-spacing: .28em;
  color: var(--gold-soft);
  padding: .34em .95em;
  border-radius: 999px;
  border: 1px solid rgba(247,223,165,.24);
  background: rgba(11,16,41,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .4s;
}
.hud-page {
  font-family: var(--font-display);
  font-size: clamp(.72rem, 1.02vw, .86rem);
  letter-spacing: .16em;
  color: var(--ink-faint);
}
.hud-page span:first-child { color: var(--ink); }

.hud-right { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.5rem); }

/* 音频控件 */
.audio-control {
  display: flex; align-items: center; gap: .65em;
  padding: .34em .9em .34em .5em;
  border-radius: 999px;
  background: rgba(11,16,41,.5);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mute-btn {
  width: 1.9em; height: 1.9em;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim);
  transition: color .3s;
  padding: 0;
}
.mute-btn:hover { color: var(--gold-soft); }
.mute-btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.mute-btn .ico-off { display: none; }
.audio-control.muted .ico-on { display: none; }
.audio-control.muted .ico-off { display: block; }

/* 音量律动条 */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 1.1em; }
.bars span {
  display: block; width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--gold-soft), var(--teal));
  height: 22%;
  opacity: .35;
  transition: height .2s, opacity .2s;
}
.audio-control.playing .bars span { opacity: .92; animation: bar-dance .9s ease-in-out infinite; }
.audio-control.playing .bars span:nth-child(2) { animation-delay: .12s; }
.audio-control.playing .bars span:nth-child(3) { animation-delay: .26s; }
.audio-control.playing .bars span:nth-child(4) { animation-delay: .38s; }
.audio-control.playing .bars span:nth-child(5) { animation-delay: .5s; }
.audio-control.muted .bars span { animation: none !important; height: 14% !important; opacity: .22 !important; }

@keyframes bar-dance {
  0%,100% { height: 24%; }
  50%     { height: 96%; }
}

/* 导航按钮 */
.nav-btns { display: flex; gap: .5em; }
.nav-btn {
  width: clamp(2.1rem, 3vw, 2.5rem); height: clamp(2.1rem, 3vw, 2.5rem);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,16,41,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-dim);
  font-size: 1.25em;
  line-height: 1;
  cursor: pointer;
  transition: transform .35s var(--ease-silk), color .35s, border-color .35s, background .35s;
}
.nav-btn:hover {
  color: var(--midnight);
  border-color: transparent;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  transform: scale(1.08);
}
.nav-btn:active { transform: scale(.95); }
.nav-btn:disabled { opacity: .28; cursor: default; }
.nav-btn:disabled:hover {
  color: var(--ink-dim); background: rgba(11,16,41,.5);
  border-color: rgba(255,255,255,.12); transform: none;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
  .frames { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .split-stage { grid-template-columns: 1fr; }
  .dual-view { grid-template-columns: 1fr; }
  .dv-bridge { width: 60%; height: 1px; margin: 0 auto; justify-self: center; }
  .audition-grid { grid-template-columns: repeat(2, 1fr); }
  .act-3c { overflow-y: auto; }
}

@media (max-width: 720px) {
  .slide { padding: 3.2rem 1.2rem 4.5rem; }
  .hat-scene { grid-template-columns: 1fr; }
  .hat-divider { flex-direction: row; padding: .4rem 0; }
  .divider-line { width: 30%; height: 1px; flex: none; min-height: 0;
    background: linear-gradient(90deg, transparent, rgba(247,223,165,.34), transparent); }
  .cover-meta { letter-spacing: .16em; }
  .frames { grid-template-columns: 1fr; }
  .audition-grid { grid-template-columns: 1fr; }
  .fl-line { flex-direction: column; gap: .2em; }
  .hud-left { gap: .5em; }
  .nav-btns { gap: .35em; }
}

/* ============================================================
   剪影模式（前四幕 · 幕布后）
   ------------------------------------------------------------
   观众看的是幕布上的灯光投影，屏幕要退到几乎不可见。
   文字统一为「暖灰 + 极低亮度」，像隔着一层厚幕布透出的微光。
   亮度层级（由强到弱，差值刻意拉得很小，整体都很暗）：
     人物名 .26 / 强调 .22 / 正文 .20 / 次要 .10 / 署名 .075 / 装饰 .05
   ============================================================ */

/* ---- 背景压到舞台黑 ---- */
body.mode-silhouette .bg-stage {
  background: #050508;
}
body.mode-silhouette .bg-aurora,
body.mode-silhouette #stars,
body.mode-silhouette .bg-grain {
  opacity: 0;
  transition: opacity .9s var(--ease-soft);
}
body.mode-silhouette .bg-vignette {
  background: radial-gradient(
    120% 100% at 50% 46%,
    rgba(255, 252, 240, .014) 0%,
    rgba(0, 0, 0, 0) 46%,
    rgba(0, 0, 0, .62) 100%
  );
}

.silhouette .slide-head { margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }

/* ---- 大标题：与封面同档，仅留一层字痕 ---- */
.silhouette .kicker {
  color: rgba(230, 223, 207, .38);
  letter-spacing: .5em;
}

.silhouette .slide-title {
  background: none;
  -webkit-text-fill-color: rgba(238, 231, 216, .56);
  color: rgba(238, 231, 216, .56);
  letter-spacing: .3em;
  filter: none;
  text-shadow:
    0 0 26px rgba(222, 210, 188, .03),
    0 0 58px rgba(218, 206, 184, .015);
}

.silhouette .slide-sub {
  color: rgba(226, 219, 203, .34);
  letter-spacing: .28em;
}
.silhouette .slide-sub em { color: rgba(228, 221, 205, .40); }

/* ---- 移除卡片化外观 ---- */
.silhouette .beat,
.silhouette .monologue,
.silhouette .frame,
.silhouette .stage-side,
.silhouette .hat-card,
.silhouette .aud-item,
.silhouette .dv,
.silhouette .brother,
.silhouette .fl-line {
  background: none !important;
  border-color: rgba(226, 219, 203, .16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.silhouette .monologue::before,
.silhouette .frame::after,
.silhouette .spotlight {
  display: none !important;
}

/* ---- 署名 / 角色 / 序号：极弱 ---- */
.silhouette .beat-who,
.silhouette .mono-role,
.silhouette .frame-no,
.silhouette .side-label,
.silhouette .bro-who,
.silhouette .audition-title,
.silhouette .cast-role {
  color: rgba(224, 217, 201, .30);
  letter-spacing: .26em;
}

/* 第一幕 01/02/03 序号原本是金色且从未被覆盖 */
.silhouette .beat-no {
  color: rgba(224, 217, 201, .33);
  opacity: 1;
}

/* ---- 次要说明 ---- */
.silhouette .beat-stage,
.silhouette .side-note,
.silhouette .frame-line,
.silhouette .hat-sub,
.silhouette .audition-note,
.silhouette .fight-end,
.silhouette .dual-note,
.silhouette .transition-line {
  color: rgba(222, 215, 199, .37);
}

/* ---- 正文：主可读层 ---- */
.silhouette .beat-line,
.silhouette .frame-action,
.silhouette .phone-line,
.silhouette .hat-desc,
.silhouette .bro-line,
.silhouette .dv-desc,
.silhouette .fl-line {
  color: rgba(238, 232, 218, .60);
}

.silhouette .beat-line.muted,
.silhouette .mono-text { color: rgba(232, 226, 212, .48); }

/* ---- 强调：比正文亮一档 ---- */
.silhouette .beat-line.accent,
.silhouette .mono-text.strong em,
.silhouette .hat-desc strong,
.silhouette .fl-line.final,
.silhouette .dv-result {
  color: rgba(244, 238, 224, .70);
  border-color: rgba(226, 216, 198, .055);
}

.silhouette .hat-detail,
.silhouette .hat-detail.strong {
  color: rgba(220, 213, 197, .32);
  border-top-color: rgba(226, 219, 203, .16);
}

/* ---- 人物名：全页最亮的一档 ---- */
.silhouette .mono-name,
.silhouette .cast-name,
.silhouette .side-name,
.silhouette .hat-label,
.silhouette .dv-name {
  color: rgba(242, 236, 222, .72);
  -webkit-text-fill-color: rgba(242, 236, 222, .72);
  background: none;
  text-shadow: 0 0 26px rgba(226, 214, 192, .03);
}

/* 封面主标题「爱乐之城」字号最大，单独再压一档 */
.silhouette .cover-title .line > span {
  color: rgba(238, 231, 216, .56);
  -webkit-text-fill-color: rgba(238, 231, 216, .56);
  background: none;
  text-shadow: 0 0 30px rgba(222, 210, 188, .02);
}
.silhouette .cover-title .sub > span {
  color: rgba(226, 219, 203, .42);
  -webkit-text-fill-color: rgba(226, 219, 203, .42);
  opacity: 1;
  text-shadow: none;
  letter-spacing: .6em;
}

.silhouette .mono-quote {
  color: rgba(238, 232, 218, .62);
  letter-spacing: .14em;
}

/* ---- 标签：只留最淡的描边 ---- */
.silhouette .mono-tags li {
  color: rgba(226, 219, 203, .42);
  border-color: rgba(226, 219, 203, .20);
  background: none;
}

.silhouette .tag-pill {
  color: rgba(236, 230, 216, .55);
  background: none;
  border: 1px solid rgba(226, 219, 203, .26);
  font-weight: 400;
}
.silhouette .tag-note { color: rgba(214, 204, 186, .075); }

/* ---- 对话：靠左侧细线明暗分层 ---- */
.silhouette .fl-line { border-left-color: rgba(226, 219, 203, .20) !important; }
.silhouette .fl-line.mia { border-left-color: rgba(230, 223, 207, .44) !important; }
.silhouette .fl-line.seb { border-left-color: rgba(230, 223, 207, .32) !important; }
.silhouette .fl-line.climax {
  border-left-color: rgba(244, 238, 224, .74) !important;
  color: rgba(244, 238, 224, .74);
  font-weight: 500;
}
.silhouette .fl-who { color: rgba(224, 217, 201, .30) !important; }

/* ---- 帽子：极淡轮廓 ---- */
.silhouette .hat-card.jazz .hat-svg,
.silhouette .hat-card.reality .hat-svg {
  color: rgba(230, 223, 207, .46);
  filter: none;
}
.silhouette .hat-card.jazz .hat-label { color: rgba(242, 236, 222, .72); }

/* ---- 校徽：几乎融入背景 ---- */
.silhouette .cover-logo img,
.silhouette .final-logo img {
  filter: grayscale(1) brightness(1.05) contrast(.72);
  opacity: .26;
}
.silhouette .logo-ring,
.silhouette .logo-ring::after {
  border-color: rgba(226, 219, 203, .16);
}

/* ---- 封面 --- */
.silhouette .cover-rule,
.silhouette .final-rule {
  background: linear-gradient(90deg, transparent, rgba(230, 223, 207, .32), transparent);
}
.silhouette .cover-sub { color: rgba(226, 219, 203, .34); }
.silhouette .cover-meta { color: rgba(220, 213, 197, .28); }
.silhouette .cover-hint { color: rgba(220, 213, 197, .28); }
.silhouette .cover-hint .key {
  border-color: rgba(226, 219, 203, .20);
  color: rgba(230, 223, 207, .38);
}

/* ---- 图标与装饰 ---- */
.silhouette .frame-icon,
.silhouette .dv-icon { color: rgba(230, 223, 207, .32); }

/* ---- 清理残留的彩色边框 ----
   原设计中这些边框用金/粉/青等强调色，在几乎全黑的幕布页面上
   会格外扎眼，统一收成极淡的暖灰。 */
.silhouette .phone-line {
  border-left-color: rgba(226, 216, 198, .16);
}
.silhouette .mono-text.strong em {
  border-bottom-color: rgba(230, 223, 207, .38);
}
.silhouette .mono-tags li {
  border-color: rgba(226, 219, 203, .24);
}
.silhouette .dv-result {
  border-top-color: rgba(226, 219, 203, .24);
}
.silhouette .hud-tag {
  border-color: rgba(226, 219, 203, .16);
}

/* 第三幕面试台词（.aud-item 的文字色在原规则里，剪影模式需单独压暗）
   保留原本「一句话比一句话更暗」的递进设计 */
.silhouette .aud-item { color: rgba(226, 219, 203, .34); }
.silhouette .aud-item:nth-child(1) { opacity: .85; }
.silhouette .aud-item:nth-child(2) { opacity: .68; }
.silhouette .aud-item:nth-child(3) { opacity: .50; }
.silhouette .aud-item:nth-child(4) { opacity: .34; }

.silhouette .aud-n { color: rgba(216, 206, 188, .075); }

.silhouette .divider-line,
.silhouette .dv-bridge {
  background: linear-gradient(180deg, transparent, rgba(226, 219, 203, .20), transparent);
}
.silhouette .divider-dot { color: rgba(226, 219, 203, .24); }

.silhouette .cover-title .line::before,
.silhouette .final-title::before { display: none; }

/* ---- HUD 同步压暗 ---- */
body.mode-silhouette .hud-tag {
  color: rgba(214, 204, 186, .10);
  border-color: rgba(226, 219, 203, .16);
  background: rgba(5, 5, 8, .45);
}
body.mode-silhouette .nav-btn,
body.mode-silhouette .audio-control {
  background: rgba(5, 5, 8, .45);
  border-color: rgba(226, 216, 198, .03);
  color: rgba(214, 204, 186, .11);
}
body.mode-silhouette .nav-btn:hover {
  color: rgba(238, 231, 216, .56);
}
body.mode-silhouette .bars span { background: rgba(230, 223, 207, .44); }
body.mode-silhouette .progress-fill {
  background: linear-gradient(90deg, rgba(226, 216, 198, .03), rgba(226, 216, 198, .11));
  box-shadow: none;
}

/* ============================================================
   舞台控制台（前四幕 · 只给演员与音响看）
   ------------------------------------------------------------
   幕布挡着，观众看不见屏幕，所以这几页把它当工作台：
   曲目名、播放进度（可拖动）、音量滑块。
   第五幕幕布拉开时自动隐藏，不打扰谢幕画面。
   ============================================================ */
.stage-console {
  position: fixed;
  left: clamp(1.1rem, 3vw, 2.4rem);
  bottom: clamp(.7rem, 1.6vh, 1.1rem);
  z-index: 45;
  width: min(400px, 40vw);
  display: flex;
  flex-direction: column;
  gap: .38rem;
  padding: .62rem .85rem .58rem;
  border-radius: 10px;
  background: rgba(6, 6, 10, .82);
  border: 1px solid rgba(246, 240, 228, .09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(240, 233, 219, .56);
  font-family: var(--font-body);

  /* 默认隐藏；剪影模式下淡入 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity .5s var(--ease-soft),
    transform .5s var(--ease-soft),
    visibility 0s linear .5s;
}
body.mode-silhouette .stage-console {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity .55s var(--ease-soft) .15s,
    transform .55s var(--ease-soft) .15s,
    visibility 0s linear 0s;
}

.console-row {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: clamp(.62rem, .86vw, .72rem);
  letter-spacing: .06em;
  min-width: 0;
}

/* 播放状态小圆点 */
.console-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(246, 240, 228, .22);
  transition: background .3s, box-shadow .3s;
}
.stage-console.is-playing .console-dot {
  background: rgba(246, 240, 228, .92);
  box-shadow: 0 0 9px rgba(246, 240, 228, .46);
  animation: console-pulse 2.1s ease-in-out infinite;
}
@keyframes console-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .42; }
}

.console-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(240, 233, 219, .52);
  letter-spacing: .1em;
}

.console-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: rgba(240, 233, 219, .34);
  letter-spacing: .04em;
}

/* ---- 进度条 ---- */
.console-progress {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.console-progress::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(246, 240, 228, .14);
}
.console-progress-fill {
  position: absolute;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: rgba(246, 240, 228, .78);
  transition: background .3s;
}
.console-progress-knob {
  position: absolute;
  left: 0;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: rgba(246, 240, 228, .82);
  box-shadow: 0 0 10px rgba(246, 240, 228, .4);
  transform: scale(.54);
  transition: transform .25s var(--ease-silk);
}
.console-progress:hover .console-progress-knob,
.console-progress.is-dragging .console-progress-knob {
  transform: scale(1.25);
}
.console-progress:hover .console-progress-fill,
.console-progress.is-dragging .console-progress-fill {
  background: rgba(246, 240, 228, 1);
}

/* ---- 音量行 ---- */
.volume-row { gap: .5em; }

.console-mute {
  flex: 0 0 auto;
  width: 1.5em; height: 1.5em;
  display: grid; place-items: center;
  padding: 0;
  background: none; border: none;
  color: rgba(240, 233, 219, .46);
  cursor: pointer;
  transition: color .25s;
}
.console-mute:hover { color: rgba(246, 240, 228, .82); }
.console-mute svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.console-mute .c-ico-off { display: none; }
.stage-console.is-muted .console-mute .c-ico-on { display: none; }
.stage-console.is-muted .console-mute .c-ico-off { display: block; }
.stage-console.is-muted .console-mute { color: rgba(246, 240, 228, .25); }

.console-volume {
  flex: 1 1 auto;
  min-width: 60px;
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.console-volume::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(246, 240, 228, .16);
}
.console-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(246, 240, 228, .92);
  box-shadow: 0 0 8px rgba(246, 240, 228, .35);
  transition: transform .22s var(--ease-silk);
}
.console-volume:hover::-webkit-slider-thumb { transform: scale(1.2); }
.console-volume::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(246, 240, 228, .16);
}
.console-volume::-moz-range-thumb {
  width: 10px; height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(246, 240, 228, .92);
}

.console-vol-val {
  flex: 0 0 auto;
  min-width: 3.1em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(240, 233, 219, .40);
  letter-spacing: .03em;
}

/* 无配乐页：音量控件置灰 */
.stage-console.no-track .console-volume,
.stage-console.no-track .console-mute {
  opacity: .28;
  pointer-events: none;
}
.stage-console.no-track .console-vol-val {
  color: rgba(246, 240, 228, .22);
}

/* 小屏：控制台拉宽，HUD 让位 */
@media (max-width: 720px) {
  .stage-console {
    width: calc(100vw - 2.2rem);
    left: 1.1rem;
    bottom: 3.4rem;
  }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cover-title .line > span { transform: none; }
}