/* ══════════════════════════════════════════════════════════
   《尋找普賢先生》Scene Design System v3.0
   小王子 × 流行音樂 — 深藍星空繪本風
   Dr.Strange Command Center — 2026-04-01
   ══════════════════════════════════════════════════════════ */

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

:root {
  /* Upper Half Scene Colors */
  --c-indigo:     #5A4DA0;  /* 01 靛青 — 五戒十善 (提亮) */
  --c-moonwhite:  #C8CDD5;  /* 02 月白 — 菩提本無樹 */
  --c-amber:      #E8B44E;  /* 03 琥珀 — 十二因緣 (提亮) */
  --c-bamboo:     #6B9A6E;  /* 04 竹青 — 仁 (提亮) */
  --c-skyblue:    #7BBDE0;  /* 05 天青 — KISS老子 (提亮) */
  --c-inkbamboo:  #3A6B50;  /* 06 墨竹 — 定風波 (提亮) */
  --c-electric:   #A080E0;  /* 07 電紫 — 郭子儀 (提亮) */
  --c-peach:      #E8B0C0;  /* 08 桃粉 — 桃花庵歌 (提亮) */
  --c-turquoise:  #40C0B8;  /* 09 松石 — 哪 (提亮) */
  --c-smoke:      #C8B098;  /* ♥ 煙色 — 送別 */

  /* Lower Half Scene Colors */
  --c-mist:       #8090A8;
  --c-lotus:      #9070C0;
  --c-moss:       #5A8A6A;
  --c-brightgold: #E8C060;
  --c-aware:      #50B0C8;
  --c-compassion: #C05080;
  --c-warmsand:   #D8A870;
  --c-cosmos:     #4060A0;
  --c-angelgold:  #F0D080;
  --c-terracotta: #E08860;  /* ∞ 赤陶 — 終幕 ONLY */

  /* Little Prince 深藍星空 */
  --bg-night:     #0B1A3B;  /* 主背景：小王子夜空藍 */
  --bg-deep:      #091530;  /* 更深夜空 */
  --bg-mid:       #122448;  /* 中間層 */
  --text-gold:    #F0D890;  /* 金色主文字 */
  --text-cream:   #E8DCC8;  /* 暖奶油文字 */
  --text-star:    #C0B8A8;  /* 星光灰 */
  --text-dim:     #6878A0;  /* 暗字 */

  /* Scene (overridden per page) */
  --scene-color:  #F0D890;
  --scene-light:  rgba(240, 216, 144, 0.08);
  --scene-glow:   rgba(240, 216, 144, 0.06);

  --ease-story: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --dur-reveal: 1s;
  --dur-slow:   2s;
}

/* ── Typography — 大字繪本 ──────────────────────────────── */
html {
  font-size: 48px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg-night);
  color: var(--text-cream);
  font-family: 'Noto Serif TC', 'Georgia', serif;
  line-height: 2.1;
  overflow-x: hidden;
  letter-spacing: 0.04em;
}

::selection {
  background: rgba(240, 216, 144, 0.3);
  color: #fff;
}

/* ── Stars Background (CSS-only) ────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,240,0.6), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,240,0.4), transparent),
    radial-gradient(2px 2px at 40% 8%, rgba(255,255,240,0.5), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,240,0.3), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,240,0.5), transparent),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,240,0.3), transparent),
    radial-gradient(2px 2px at 15% 65%, rgba(255,255,240,0.4), transparent),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,240,0.3), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,240,0.5), transparent),
    radial-gradient(1px 1px at 80% 85%, rgba(255,255,240,0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,240,0.4), transparent),
    radial-gradient(1px 1px at 5% 90%, rgba(255,255,240,0.3), transparent),
    radial-gradient(2px 2px at 48% 25%, rgba(255,255,240,0.5), transparent),
    radial-gradient(1px 1px at 72% 58%, rgba(255,255,240,0.3), transparent),
    radial-gradient(1.5px 1.5px at 30% 52%, rgba(255,255,240,0.4), transparent);
  pointer-events: none;
  z-index: 0;
  animation: stars-twinkle 8s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ── Chrome ─────────────────────────────────────────────── */
.scene-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.42rem; color: var(--text-dim); letter-spacing: 0.15em;
  background: linear-gradient(180deg, var(--bg-night) 50%, transparent);
  transition: transform 0.5s var(--ease-story), opacity 0.5s var(--ease-story);
  pointer-events: none;
}
.scene-chrome a { color: var(--text-star); text-decoration: none; pointer-events: auto; transition: color 0.3s; }
.scene-chrome a:hover { color: var(--scene-color); }
.scene-chrome.hidden { transform: translateY(-100%); opacity: 0; }

.scene-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.38rem; color: var(--text-dim); letter-spacing: 0.12em;
  background: linear-gradient(0deg, var(--bg-night) 60%, transparent);
  transition: transform 0.5s var(--ease-story), opacity 0.5s var(--ease-story);
  pointer-events: none;
}
.scene-nav a {
  color: var(--text-star); text-decoration: none; pointer-events: auto;
  transition: color 0.3s;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 8px 4px; max-width: 45%;
}
.scene-nav a:hover { color: var(--scene-color); }
.scene-nav.hidden { transform: translateY(100%); opacity: 0; }

/* ── Sections ───────────────────────────────────────────── */
.act {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12vh 8vw; position: relative; overflow: hidden;
  z-index: 1;
}

/* ── Typography — 繪本大字 ──────────────────────────────── */
.t-scene-number {
  font-size: 0.45rem; letter-spacing: 0.5em;
  color: var(--scene-color); margin-bottom: 0.8rem; font-weight: 600;
}

.t-title {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 900; line-height: 1.3; letter-spacing: 0.1em;
  color: var(--scene-color); text-align: center; margin-bottom: 1rem;
}

.t-subtitle {
  font-size: 0.6rem; color: var(--text-star);
  letter-spacing: 0.3em; text-align: center; margin-bottom: 2rem;
}

.t-body {
  font-size: 1.05rem; line-height: 2.3; max-width: 18em; margin: 0 auto;
}

.t-big {
  font-size: 1.3rem; font-weight: 700; color: var(--scene-color); line-height: 2.0;
}

.t-stage {
  font-size: 0.75rem; color: var(--text-star);
  font-style: italic; line-height: 2.2; max-width: 22em; margin: 0 auto;
}

.t-director {
  font-size: 0.58rem; color: var(--text-star);
  max-width: 24em; margin: 2rem auto; padding: 1.5rem 2rem;
  border-left: 3px solid var(--scene-color);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,0.04); line-height: 2.0;
}

/* ── Dialogue ───────────────────────────────────────────── */
.dialogue-block { max-width: 18em; margin: 0 auto; }

.dialogue-line { margin-bottom: 2.2em; }

.dialogue-line .who {
  display: inline-block; font-weight: 700; font-size: 0.48rem;
  letter-spacing: 0.15em; padding: 0.15em 0.7em; border-radius: 14px;
  margin-bottom: 0.4em;
}
.dialogue-line .who.her { color: var(--c-peach); background: rgba(232, 176, 192, 0.12); }
.dialogue-line .who.him { color: var(--scene-color); background: var(--scene-light); }

.dialogue-line .what {
  font-size: 1.05rem; line-height: 2.3; display: block; margin-top: 0.3em;
}

.dialogue-line .parenthetical {
  color: var(--text-dim); font-style: italic; font-size: 0.65rem;
}

/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity var(--dur-reveal) var(--ease-story), transform var(--dur-reveal) var(--ease-story);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-slow {
  opacity: 0; transform: translateY(2rem);
  transition: opacity var(--dur-slow) var(--ease-story), transform var(--dur-slow) var(--ease-story);
}
.reveal-slow.visible { opacity: 1; transform: translateY(0); }

.reveal-fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-story); }
.reveal-fade.visible { opacity: 1; }

.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.2s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.4s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.6s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.8s; }
.stagger > .reveal:nth-child(6) { transition-delay: 1.0s; }

/* ── Decorative — Stars, Orbs, Cards ────────────────────── */
.star {
  display: inline-block; border-radius: 50%; opacity: 0.6;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 0.8; transform: scale(1.2); }
}

.card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2rem 2.5rem;
  max-width: 20em; margin: 0 auto;
}

.color-badge {
  display: inline-block; padding: 0.25em 0.8em; border-radius: 20px;
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.1em; margin: 0.3em;
}

.sound-bubble {
  display: inline-block; padding: 0.3em 1em; border-radius: 20px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.55rem; color: var(--text-star); letter-spacing: 0.1em;
  animation: float 6s ease-in-out infinite;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-scene {
  display: inline-block; padding: 0.5em 2em;
  border: 2px solid var(--scene-color); border-radius: 30px;
  color: var(--scene-color); text-decoration: none;
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.2em;
  transition: all 0.4s var(--ease-story);
}
.btn-scene:hover {
  background: var(--scene-color); color: var(--bg-night);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(240,216,144,0.15);
}

/* ── Dividers ───────────────────────────────────────────── */
.divider { width: 3em; height: 2px; background: var(--scene-color); margin: 3rem auto; opacity: 0.3; border-radius: 1px; }
.divider-dot { text-align: center; color: var(--scene-color); font-size: 0.6rem; letter-spacing: 1em; margin: 2rem auto; opacity: 0.4; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes pulse-soft { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes drift { 0% { transform: translate(0,0); } 25% { transform: translate(12px,-18px); } 50% { transform: translate(-10px,10px); } 75% { transform: translate(15px,6px); } 100% { transform: translate(0,0); } }
@keyframes breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
@keyframes rainbow-flow { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes typewriter-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ══════════════════════════════════════════════════════════
   MUSIC PLAYER — floating mini player
   ══════════════════════════════════════════════════════════ */
#music-player {
  position: fixed; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); right: 20px; z-index: 150;
  background: rgba(11, 26, 59, 0.9); border: 1px solid rgba(240,216,144,0.15);
  border-radius: 16px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.38rem; color: var(--text-star);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: opacity 0.3s;
  min-height: 44px; box-sizing: border-box;
}
#music-player:hover { border-color: rgba(240,216,144,0.3); }

.mp-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(240,216,144,0.1); border: 1px solid rgba(240,216,144,0.2);
  color: var(--scene-color); font-size: 0.34rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; flex-shrink: 0;
}
.mp-toggle:hover { background: rgba(240,216,144,0.2); }

.mp-info { max-width: 100px; }
.mp-title { font-size: 12px; color: var(--scene-color); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-progress { width: 100%; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.mp-progress-fill { height: 100%; background: var(--scene-color); border-radius: 2px; width: 0; transition: width 0.3s linear; }

/* ══════════════════════════════════════════════════════════
   NARRATION PANEL — Metis CEO guide
   ══════════════════════════════════════════════════════════ */
#narr-btn {
  position: fixed; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); left: 20px; z-index: 150;
  background: rgba(11, 26, 59, 0.9); border: 1px solid rgba(240,216,144,0.15);
  border-radius: 30px; padding: 8px 16px;
  color: var(--scene-color); font-size: 0.38rem; font-weight: 600;
  letter-spacing: 0.1em; cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  min-height: 44px; box-sizing: border-box;
  display: inline-flex; align-items: center;
}
#narr-btn:hover { background: rgba(240,216,144,0.1); border-color: rgba(240,216,144,0.3); }
#narr-btn.active { background: rgba(240,216,144,0.15); }

#narr-panel {
  position: fixed; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); left: 20px; z-index: 150;
  background: rgba(11, 26, 59, 0.95); border: 1px solid rgba(240,216,144,0.12);
  border-radius: 16px; padding: 0.6rem 1rem;
  max-width: 300px; min-width: 200px;
  font-size: 0.42rem; color: var(--text-cream);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  line-height: 1.8;
}

.narr-status { color: var(--text-dim); font-size: 0.35rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.narr-text { color: var(--text-cream); }

/* ── Scene-specific overrides ───────────────────────────── */
.scene-00 { --scene-color: #F0D890; --scene-light: rgba(240,216,144,0.06); }
.scene-01 { --scene-color: #E0C8F0; --scene-light: rgba(224,200,240,0.06); }
.scene-02 { --scene-color: #8878D0; --scene-light: rgba(136,120,208,0.06); }
.scene-03 { --scene-color: #E8B44E; --scene-light: rgba(232,180,78,0.06); }
.scene-04 { --scene-color: #D0A060; --scene-light: rgba(208,160,96,0.06); }
.scene-05 { --scene-color: #C8CDD5; --scene-light: rgba(200,205,213,0.06); }
.scene-06 { --scene-color: #6B9A6E; --scene-light: rgba(107,154,110,0.06); }
.scene-07 { --scene-color: #7BBDE0; --scene-light: rgba(123,189,224,0.06); }
.scene-08 { --scene-color: #5AA070; --scene-light: rgba(90,160,112,0.06); }
.scene-09 { --scene-color: #A080E0; --scene-light: rgba(160,128,224,0.06); }
.scene-10 { --scene-color: #E8B0C0; --scene-light: rgba(232,176,192,0.06); }
.scene-11 { --scene-color: #40C0B8; --scene-light: rgba(64,192,184,0.06); }
.scene-12 { --scene-color: #C8B098; --scene-light: rgba(200,176,152,0.06); }
.scene-13 { --scene-color: #8090A8; --scene-light: rgba(128,144,168,0.06); }
.scene-14 { --scene-color: #9070C0; --scene-light: rgba(144,112,192,0.06); }
.scene-15 { --scene-color: #5A8A6A; --scene-light: rgba(90,138,106,0.06); }
.scene-16 { --scene-color: #E8C060; --scene-light: rgba(232,192,96,0.06); }
.scene-17 { --scene-color: #50B0C8; --scene-light: rgba(80,176,200,0.06); }
.scene-18 { --scene-color: #C05080; --scene-light: rgba(192,80,128,0.06); }
.scene-19 { --scene-color: #D8A870; --scene-light: rgba(216,168,112,0.06); }
.scene-20 { --scene-color: #6080C0; --scene-light: rgba(96,128,192,0.06); }
.scene-21 { --scene-color: #F0D080; --scene-light: rgba(240,208,128,0.08); }
.scene-final { --scene-color: #E08860; --scene-light: rgba(224,136,96,0.08); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  html { font-size: 36px; }
  .act { padding: 8vh 6vw; }
  .t-title { font-size: clamp(1.6rem, 9vw, 3rem); }
  .scene-nav { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .scene-nav a { padding: 10px 6px; }
  #music-player { right: 10px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  #narr-btn { left: 10px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  #narr-panel { left: 10px; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); max-width: 260px; }
}

@media (max-width: 480px) {
  html { font-size: 30px; }
  .act { padding: 6vh 5vw; }
}