/* ══════════════════════════════════════════════════════════
   LUMINARA SPARK — Stylesheet v4
   Color palette from enchanted forest imagery:
   lilac/lavender, sky-blue wildflowers, teal-mint, soft pink mist
══════════════════════════════════════════════════════════ */

:root {
  /* Core palette — pulled from the forest images */
  --lilac:         #c8a0f5;
  --lilac-deep:    #9b6dff;
  --lilac-dark:    #7c4fe0;
  --sky:           #7dd4f8;
  --sky-deep:      #4ab8e8;
  --teal:          #5ae8c0;
  --mint:          #a8f0d0;
  --pink:          #f0b4e0;
  --pink-warm:     #f5c8e0;
  --gold:          #f8e87a;
  --mist:          #f0e8ff;

  /* Backgrounds */
  --bg-deep:       #1a0838;
  --bg-mid:        #250d4a;
  --bg-forest:     #0d1a2e;

  /* Text */
  --text-dark:     #1a0838;
  --text-mid:      #4a2880;
  --text-soft:     #8860c8;
  --text-mist:     #c8b0e8;
  --text-white:    #f8f4ff;

  /* Glass / overlays */
  --glass-light:   rgba(255,255,255,0.12);
  --glass-lighter: rgba(255,255,255,0.22);
  --glass-border:  rgba(200,160,245,0.3);
  --glass-blur:    blur(16px);

  /* Shadows */
  --shadow-lilac:  0 8px 32px rgba(155,109,255,0.35), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-glow:   0 0 28px rgba(200,160,245,0.5);
  --shadow-soft:   0 4px 20px rgba(74,40,128,0.25);

  --radius-pill: 999px;
  --radius-lg:   20px;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Nunito', sans-serif;
  --font-ui:      'DM Sans', sans-serif;
  --font-story:   'Nunito', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
html { touch-action: pan-y; }
body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-dark); -webkit-font-smoothing: antialiased; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input  { font-family: inherit; }

/* ── Screens ── */
.screen { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.screen.active  { opacity: 1; pointer-events: all; }

/* Spark screen uses native body scroll — override fixed positioning */
.screen.spark-native {
  position: relative !important;
  inset: unset !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
}
.screen.spark-native.hidden,
.screen.spark-native.exiting {
  display: none !important;
}


/* Spark form screen scroll container */

.screen.exiting { opacity: 0; pointer-events: none; }
.screen.hidden  { display: none; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   SCREEN 1 — SPARK
   bg-landscape.jpg as background
══════════════════════════════════════════════════════════ */
body.spark-active {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background-color: #060212;
  min-height: 100vh;
}

/* Lock body scroll when on gen/story screens */
body.overlay-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

#screen-spark {
  /* Static poster shown instantly — video fades in over it */
  background: url('spark-bg-poster.jpg') center center / cover no-repeat;
  overflow: hidden;
  overscroll-behavior: none;
}
#screen-spark::before {
  content: '';
  position: absolute; inset: 0;  /* was fixed — fixed children break iOS overflow-y:auto scroll */
  background: linear-gradient(
    180deg,
    rgba(8,2,24,0.84) 0%,
    rgba(13,4,36,0.76) 20%,
    rgba(18,6,44,0.55) 45%,
    rgba(18,6,44,0.60) 70%,
    rgba(8,2,24,0.88) 100%
  );
  z-index: 2;
  pointer-events: none;
}
#screen-spark::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #060212 70%);
  z-index: 3;
  pointer-events: none;
}

/* ── Spark screen ambient video ── */
.spark-video-bg {
  position: absolute; inset: 0;  /* was fixed — breaks iOS scroll when inside fixed overflow container */
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.8s ease;
  /* Force own GPU compositing layer for smooth decode alongside canvas animations */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.spark-video-bg.loaded { opacity: 1; }

/* Starfield (subtle, on top of bg) */
#starfield  { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.4; }
#fairydust  { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Ambient glyphs */
.ambient { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.amb { position: absolute; color: var(--gold); font-size: clamp(0.8rem,1.5vw,1.2rem); animation: amb-float linear infinite; opacity: 0; }
.a1{top:10%;left:7%;animation-duration:20s;animation-delay:0s}
.a2{top:22%;right:8%;animation-duration:24s;animation-delay:4s}
.a3{top:52%;left:12%;animation-duration:18s;animation-delay:8s}
.a4{top:70%;right:11%;animation-duration:26s;animation-delay:2s}
.a5{top:6%;left:50%;animation-duration:21s;animation-delay:6s}
.a6{top:78%;left:43%;animation-duration:23s;animation-delay:10s}
.a7{top:38%;left:30%;animation-duration:30s;animation-delay:3s}
.a8{top:60%;right:26%;animation-duration:22s;animation-delay:12s}
@keyframes amb-float {
  0%   { transform: translateY(0) rotate(0deg);    opacity: 0; }
  10%  { opacity: 0.5; }
  50%  { transform: translateY(-30px) rotate(180deg); opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(0) rotate(360deg);  opacity: 0; }
}

.spark-inner {
  position: relative; z-index: 10;
  max-width: 680px; width: 100%; margin: 0 auto 60px;
  padding: 32px 32px 44px;
  display: flex; flex-direction: column; gap: 20px;
  border-radius: 24px;
}
.spark-inner::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 24px;
  background: rgba(6, 2, 18, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(200, 160, 245, 0.12);
  box-shadow: 0 8px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.2);
  pointer-events: none; /* glass card is visually there but touch-transparent */
  z-index: -1;
}

/* Logo */
/* ── Logo ── */
.spark-logo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.spark-logo-stars {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.sls {
  color: var(--gold); opacity: 0;
  animation: sls-fade 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(248,232,122,0.9));
}
.sls1 { font-size: 0.9rem; animation-delay: 0s; }
.sls2 { font-size: 1.3rem; animation-delay: 0.6s; }
.sls3 { font-size: 0.9rem; animation-delay: 1.2s; }
@keyframes sls-fade {
  0%,100% { opacity: 0.2; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); filter: drop-shadow(0 0 14px rgba(248,232,122,1)); }
}

.spark-title {
  display: flex; flex-direction: row; align-items: baseline;
  gap: 0.25em; line-height: 1;
  flex-wrap: nowrap; white-space: nowrap;
}
.spark-title-luminara {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 600;
  font-style: italic;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 40px rgba(255,255,255,0.25),
    0 2px 12px rgba(0,0,0,0.9);
  line-height: 1.0;
}
.spark-title-spark {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f0c96e;
  text-shadow:
    0 0 30px rgba(240,201,110,0.6),
    0 0 60px rgba(240,201,110,0.25),
    0 2px 8px rgba(0,0,0,0.9);
  line-height: 1.0;
}

.spark-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem; font-weight: 500;
  color: rgba(240,232,255,0.80);
  letter-spacing: 3px; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.tl-dot-sep {
  font-size: 0.5rem; color: var(--gold); opacity: 0.7;
}

/* ── Hero Pitch ── */
.hero-pitch {
  text-align: center;
  padding: 24px 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-top: 1px solid rgba(200,160,245,0.08);
  border-bottom: 1px solid rgba(200,160,245,0.08);
  margin: 4px 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(155,111,224,0.06) 0%, transparent 70%);
  border-radius: 16px;
}

.hero-pitch-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 16px rgba(0,0,0,0.8), 0 2px 32px rgba(0,0,0,0.6);
  max-width: 360px;
  letter-spacing: 0.01em;
}

/* The single poetic line under the lead */
.hero-spark-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.92rem, 3.2vw, 1.08rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: rgba(220,200,255,0.65);
  max-width: 340px;
  margin: 0;
  text-shadow: 0 0 24px rgba(180,140,255,0.25);
}
.hero-spark-line em {
  font-style: italic;
  color: #f0c96e;
  text-shadow: 0 0 20px rgba(240,201,110,0.45);
}

/* Age block fade */
.hfc-age-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hfc-fade-in 0.35s ease both;
}
.hfc-age-block.hidden { display: none; }
@keyframes hfc-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Rune marks — minimal glowing tags */
/* ── Hero feature cards ── */
.hero-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 400px;
}
.hf-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 10px;
  background: rgba(155,111,224,0.08);
  border: 1px solid rgba(201,184,240,0.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s, background 0.3s;
}
.hf-card:hover {
  border-color: rgba(201,184,240,0.25);
  background: rgba(155,111,224,0.14);
}
.hf-card--gold {
  border-color: rgba(232,201,106,0.2);
  background: rgba(232,201,106,0.06);
}
.hf-card--gold:hover {
  border-color: rgba(232,201,106,0.35);
  background: rgba(232,201,106,0.12);
}
.hf-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}
.hf-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(220,200,255,0.75);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.hf-card--gold .hf-text {
  color: rgba(240,210,130,0.9);
}

/* Legacy — keep for any remaining rune references */
.hero-runes { display: none; }



/* Sections */
.spark-section { display: flex; flex-direction: column; gap: 6px; }
.spark-label { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 800; color: rgba(255,218,120,0.95); letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 12px rgba(240,200,80,0.3); }
.spark-hint {
  font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 400;
  color: rgba(200,180,245,0.50); line-height: 1.35; margin: -2px 0 2px;
  font-style: italic; letter-spacing: 0.01em;
}
.spark-hint.sub-hint { margin: 0 0 4px 2px; font-size: 0.64rem; }
.sub-select-label {
  display: block; font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,218,120,0.70); margin-bottom: 2px; padding-left: 2px;
}

/* ── FOREST GLASS CARD — base for all panels ── */
.forest-card {
  background: rgba(20,8,48,0.55);
  backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Age buttons — brass */
.age-row { display: flex; gap: 8px; }
.age-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 8px; border-radius: 14px;
  border: 1.5px solid #8a6e28;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 60%, #251d42 100%);
  color: var(--text-mist);
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), inset 0 -1px 0 rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.4);
  transition: all 0.2s;
  position: relative; overflow: hidden;
}
.age-btn::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(220,185,90,0.12) 45%, rgba(255,220,120,0.06) 55%, transparent 100%);
  z-index: 1; pointer-events: none; transition: left 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.age-btn:hover::before { left: 170%; }
.age-btn:hover { border-color: #d4b050; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(220,185,90,0.35), 0 0 0 1px rgba(201,168,76,0.15), 0 8px 32px rgba(201,168,76,0.2); }
.age-btn.selected {
  border-color: #e8c860;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.4), 0 0 0 3px rgba(201,168,76,0.25), 0 8px 32px rgba(201,168,76,0.3);
}
.age-num { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; line-height: 1; color: #f5e0a0; }
.age-tag { font-size: 0.55rem; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: #b09050; }

/* Mood grid */
.mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Story Style groups — mirrors lesson dropdown grouping */
.style-groups { display: flex; flex-direction: column; gap: 10px; }
.style-group-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #9b8abf;
  padding: 2px 0 0 4px;
}
/* ── Brass mood buttons ── */
.mood-btn {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px;
  border: 1.5px solid #8a6e28;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 60%, #251d42 100%);
  color: var(--text-mist); text-align: left;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), inset 0 -1px 0 rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s, border-color 0.3s;
}
/* Brass light sweep on hover */
.mood-btn::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(220,185,90,0.12) 45%, rgba(255,220,120,0.06) 55%, transparent 100%);
  z-index: 1; pointer-events: none;
  transition: left 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.mood-btn:hover::before { left: 170%; }
.mood-btn:hover {
  border-color: #d4b050;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.35), 0 0 0 1px rgba(201,168,76,0.15), 0 8px 32px rgba(201,168,76,0.2), 0 0 60px rgba(201,168,76,0.06);
  transform: translateY(-3px);
}
.mood-btn:active { transform: scale(0.96) !important; }
.mood-btn.selected {
  background: linear-gradient(150deg, #4a3080 0%, #3a2468 60%, #432e75 100%);
  border-color: #ffd740;
  border-width: 2px;
  box-shadow: inset 0 1px 0 rgba(255,220,100,0.6), 0 0 0 4px rgba(255,215,64,0.3), 0 0 24px rgba(255,200,50,0.35), 0 0 48px rgba(255,200,50,0.15);
  transform: translateY(-2px);
}
.mood-emoji {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.45rem; position: relative; z-index: 2;
  background: linear-gradient(145deg, #d4ad50 0%, #9a7520 50%, #705010 100%);
  box-shadow: inset 0 1px 1px rgba(255,230,140,0.4), 0 2px 8px rgba(0,0,0,0.5);
  transition: box-shadow 0.3s, transform 0.3s;
}
.mood-btn:hover .mood-emoji {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: inset 0 1px 1px rgba(255,230,140,0.5), 0 0 16px rgba(201,168,76,0.4);
}
.mood-info  { display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; z-index: 2; }
.mood-name  { font-size: 0.82rem; font-weight: 700; color: #f5e0a0; line-height: 1.2; }
.mood-desc  { font-size: 0.62rem; font-weight: 400; color: #b09050; line-height: 1.3; }

/* Cinematic badge — top-right corner of mood buttons with video pools */
.cinematic-badge {
  position: absolute; top: 8px; right: 10px; z-index: 3;
  font-size: 1.3rem; line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,200,50,0.7));
  animation: cinematic-pulse 2.5s ease-in-out infinite;
}
@keyframes cinematic-pulse {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255,200,50,0.7)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 14px rgba(255,200,50,1)); }
}
/* Cinematic key/legend below mood grid */
.cinematic-key {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: #f5e0a0; margin-top: 10px;
  padding-left: 2px; letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.cinematic-key span { font-size: 0.95rem; }

/* Hero input */
.hero-input-wrap { position: relative; }
.hero-input {
  width: 100%; padding: 15px 18px; border-radius: 14px;
  border: 2px solid rgba(200,160,245,0.45);
  background: rgba(14,5,34,0.90);
  color: #f0e8ff; font-size: 1.0rem; font-weight: 700;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  position: relative; z-index: 10;
  -webkit-user-select: text; user-select: text;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-input::placeholder { color: rgba(200,170,255,0.45); font-weight: 600; font-style: italic; }
.hero-input:focus { border-color: var(--sky); background: rgba(20,8,52,0.92); box-shadow: 0 0 0 3px rgba(125,212,248,0.25), 0 0 28px rgba(125,212,248,0.18); }

/* Age select */
.age-select {
  width: 100%; padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid rgba(125,212,248,0.40);
  background: rgba(14,5,34,0.90);
  color: #f0e8ff; font-size: 0.95rem; font-weight: 700;
  font-family: var(--font-body);
  appearance: none; -webkit-appearance: none;
  outline: none; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative; z-index: 10;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.age-select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(125,212,248,0.22); }
.age-select option { background: #1a0838; color: #f0e8ff; font-weight: 700; }
/* ── Sub-style select (sports / real-world) ── */
.sub-select-wrap {
  margin-top: 6px;
  animation: sub-select-in 0.22s cubic-bezier(0.34,1.3,0.64,1);
}
.sub-select-wrap.hidden { display: none; }
@keyframes sub-select-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.sub-select {
  width: 100%; padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(240,180,80,0.45);
  background: rgba(14,5,34,0.90);
  color: #f0e8ff; font-size: 0.9rem; font-weight: 700;
  font-family: var(--font-body);
  appearance: none; -webkit-appearance: none;
  outline: none; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative; z-index: 10;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
              0 0 14px rgba(240,180,80,0.12);
}
.sub-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240,180,80,0.22),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.sub-select option    { background: #1a0838; color: #f0e8ff; font-weight: 700; }
.sub-select optgroup  { background: #0d0620; color: var(--gold); font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; }

/* ── Glow hint — eye-catching animated attention indicator ── */
.glow-hint-wrap {
  position: relative;
}
/* Bouncing arrow indicator */
.glow-hint-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 3px;
  animation: arrowBounce 1s ease-in-out infinite;
}
.glow-hint-arrow-text {
  font-size: 0.62rem;
  font-weight: 800;
  color: rgba(232,201,106,0.95);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(232,201,106,0.5);
  white-space: nowrap;
}
.glow-hint-arrow-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(232,201,106,0.6));
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(4px); }
}
/* Hero input version — arrow below, pointing down */
.glow-hint-arrow.glow-arrow-below {
  top: auto;
  bottom: -28px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  animation: arrowBounceDown 1s ease-in-out infinite;
  flex-direction: column;
  align-items: center;
}
@keyframes arrowBounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}

/* Purple glow with particles */
.glow-hint {
  position: relative;
  animation: glowPulse 1.4s ease-in-out infinite;
  border-color: rgba(155,111,224,0.8) !important;
  box-shadow: 0 0 16px rgba(155,111,224,0.5), 0 0 40px rgba(155,111,224,0.2), inset 0 0 12px rgba(155,111,224,0.08) !important;
  transform: scale(1);
}
.glow-hint::before,
.glow-hint::after {
  content: '✦';
  position: absolute;
  font-size: 0.6rem;
  color: rgba(155,111,224,0.9);
  pointer-events: none;
  z-index: 15;
  text-shadow: 0 0 8px rgba(155,111,224,0.8);
}
.glow-hint::before {
  top: -6px; left: 12px;
  animation: sparkFloat1 2s ease-in-out infinite;
}
.glow-hint::after {
  top: -4px; right: 16px;
  animation: sparkFloat2 2.3s ease-in-out infinite 0.4s;
}

/* Gold variant */
.glow-hint.glow-hint-gold {
  animation: glowPulseGold 1.4s ease-in-out infinite;
  border-color: rgba(240,180,80,0.8) !important;
  box-shadow: 0 0 16px rgba(240,180,80,0.5), 0 0 40px rgba(240,180,80,0.2), inset 0 0 12px rgba(240,180,80,0.08) !important;
}
.glow-hint.glow-hint-gold::before,
.glow-hint.glow-hint-gold::after {
  color: rgba(240,180,80,0.9);
  text-shadow: 0 0 8px rgba(240,180,80,0.8);
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(155,111,224,0.4), 0 0 30px rgba(155,111,224,0.15), inset 0 0 10px rgba(155,111,224,0.06);
    border-color: rgba(155,111,224,0.65);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 24px rgba(155,111,224,0.7), 0 0 55px rgba(155,111,224,0.3), inset 0 0 16px rgba(155,111,224,0.12);
    border-color: rgba(155,111,224,1);
    transform: scale(1.015);
  }
}
@keyframes glowPulseGold {
  0%, 100% {
    box-shadow: 0 0 12px rgba(240,180,80,0.4), 0 0 30px rgba(240,180,80,0.15), inset 0 0 10px rgba(240,180,80,0.06);
    border-color: rgba(240,180,80,0.65);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 24px rgba(240,180,80,0.7), 0 0 55px rgba(240,180,80,0.3), inset 0 0 16px rgba(240,180,80,0.12);
    border-color: rgba(240,180,80,1);
    transform: scale(1.015);
  }
}
/* Floating sparkle particles */
@keyframes sparkFloat1 {
  0%   { transform: translateY(0) scale(1); opacity: 0.9; }
  50%  { transform: translateY(-10px) scale(1.4); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.9; }
}
@keyframes sparkFloat2 {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.7; }
  50%  { transform: translateY(-8px) rotate(90deg) scale(1.3); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.7; }
}

/* Extra particle layer injected via JS — floating dots around element */
.glow-particles {
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  pointer-events: none;
  z-index: 14;
  overflow: visible;
}
.glow-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(155,111,224,0.9);
  box-shadow: 0 0 6px rgba(155,111,224,0.7);
  animation: particleDrift 2.5s ease-in-out infinite;
}
.glow-hint-gold .glow-particle {
  background: rgba(240,180,80,0.9);
  box-shadow: 0 0 6px rgba(240,180,80,0.7);
}
.glow-particle:nth-child(1) { top: 0; left: 20%; animation-delay: 0s; }
.glow-particle:nth-child(2) { top: 0; right: 30%; animation-delay: 0.5s; }
.glow-particle:nth-child(3) { bottom: 0; left: 40%; animation-delay: 1s; }
.glow-particle:nth-child(4) { top: 50%; right: -4px; animation-delay: 1.5s; }
.glow-particle:nth-child(5) { top: 50%; left: -4px; animation-delay: 0.8s; }
@keyframes particleDrift {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  30%  { opacity: 1; transform: translateY(-6px) scale(1); }
  70%  { opacity: 0.8; transform: translateY(-12px) scale(0.9); }
  100% { transform: translateY(-18px) scale(0.4); opacity: 0; }
}

/* ── Narrator section (spark screen) ── */
.narrator-spark-section { margin-top: 12px; margin-bottom: 4px; }
.narrator-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.narrator-header .spark-label { margin-bottom: 0; }
.narrator-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Language toggle — inline with header */
.lang-toggle-wrap { display: flex; gap: 4px; }
.lang-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 4px 10px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 100%);
  border: 1px solid rgba(138,110,40,0.5);
  color: #e8d8b0; font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  transition: all 0.2s;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.1);
}
.lang-btn:hover { border-color: #d4b050; color: #f5e0a0; box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), 0 0 12px rgba(201,168,76,0.15); }
.lang-btn.selected {
  background: linear-gradient(150deg, #342858 0%, #281e45 100%);
  border-color: #e8c860;
  color: #f5e0a0; box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 0 0 2px rgba(201,168,76,0.2), 0 0 12px rgba(201,168,76,0.15);
}
.lang-flag { font-size: 0.82rem; line-height: 1; }
.lang-name { font-size: 0.7rem; }

/* ── Narrator cards (compact 2-col grid) ── */
.narrator-card {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 60%, #251d42 100%);
  border: 1px solid rgba(138,110,40,0.4);
  color: #e8d8b0; font-family: 'DM Sans', sans-serif;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.1), 0 1px 4px rgba(0,0,0,0.3);
  min-width: 0; overflow: hidden;
}
.narrator-card:hover {
  border-color: #d4b050;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), 0 4px 16px rgba(201,168,76,0.15);
}
.narrator-card.selected {
  background: linear-gradient(150deg, #342858 0%, #281e45 60%, #2e2350 100%);
  border-color: #e8c860;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 0 0 2px rgba(201,168,76,0.2), 0 4px 16px rgba(201,168,76,0.2);
}
.nc-emoji { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.nc-text  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nc-name  { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.nc-bio   {
  font-size: 0.6rem; font-weight: 400; line-height: 1.25;
  color: rgba(255,255,255,0.45); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.narrator-card.selected .nc-bio { color: rgba(255,255,255,0.65); }

/* Loading state — card dims and shows animated shimmer */
.narrator-card.loading {
  opacity: 0.65;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.narrator-card.loading::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(220,185,90,0.2) 40%,
    rgba(255,220,120,0.15) 50%,
    rgba(220,185,90,0.2) 60%,
    transparent 100%);
  transform: translateX(-100%);
  animation: pill-shimmer 1.4s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
}
@keyframes pill-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Keep .narrator-pill class for language pills that still use it */
.narrator-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 100%);
  border: 1.5px solid rgba(138,110,40,0.45);
  color: #e8d8b0; font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.12), 0 1px 4px rgba(0,0,0,0.3);
}
.narrator-pill:hover { border-color: #d4b050; color: #f5e0a0; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(220,185,90,0.25), 0 4px 16px rgba(201,168,76,0.15); }
.narrator-pill.selected {
  background: linear-gradient(150deg, #342858 0%, #281e45 100%);
  border-color: #e8c860; color: #f5e0a0;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.35), 0 0 0 2px rgba(201,168,76,0.2), 0 4px 12px rgba(201,168,76,0.2);
}
.narrator-pill-emoji { font-size: 1rem; line-height: 1; }
.narrator-pill-name  { font-size: 0.8rem; }
.narrator-pill-dot { display: none; }

/* ── Narrator magic loader — sweeping shimmer bar ── */
.narrator-magic-loader {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
  animation: nml-appear 0.4s ease both;
}
.narrator-magic-loader.hidden { display: none; }
@keyframes nml-appear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
/* Particle canvas */
.nml-particles {
  width: 100%;
  height: 32px;
  display: block;
  border-radius: 8px;
}
/* Track — full width pill */
.nml-bar-track {
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(124, 92, 191, 0.18);
  overflow: hidden;
  position: relative;
}
/* Fill — sweeping shimmer */
.nml-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 160, 245, 0.5) 20%,
    rgba(248, 232, 122, 0.9) 50%,
    rgba(200, 160, 245, 0.5) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: nml-sweep 1.6s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(248, 232, 122, 0.35);
}
@keyframes nml-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.nml-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(200,160,245,0.55);
  text-align: center;
  animation: nml-pulse 2.2s ease-in-out infinite;
}
@keyframes nml-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.9; }
}

/* ── PRIMARY SPARK BUTTON ── */
#panel-quick .spark-btn {
  margin-top: 8px;  /* breathing room from narrator pills */
}
.spark-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 18px 24px; border-radius: var(--radius-pill);
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 60%, #251d42 100%);
  border: 2px solid #b8962e;
  color: #f5e0a0; font-family: var(--font-display); font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.25), inset 0 -1px 0 rgba(0,0,0,0.4), 0 4px 20px rgba(201,168,76,0.3), 0 2px 8px rgba(0,0,0,0.4);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.spark-btn::before {
  content: '';
  position: absolute; top: 0; left: -130%; width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(220,185,90,0.12) 45%, rgba(255,220,120,0.06) 55%, transparent 100%);
  pointer-events: none;
  transition: left 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.spark-btn:not(:disabled):hover::before { left: 170%; }
.spark-btn:not(:disabled):hover {
  transform: translateY(-3px) scale(1.02);
  border-color: #e8c860;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.4), 0 0 0 3px rgba(201,168,76,0.25), 0 8px 32px rgba(201,168,76,0.35), 0 0 60px rgba(201,168,76,0.08);
}
.spark-btn:not(:disabled):active { transform: scale(0.97); }
.spark-btn:disabled,
.spark-btn.btn-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.spark-btn.small { width: auto; padding: 14px 32px; font-size: 1.1rem; }
.spark-btn-icon { font-size: 1.3em; }
/* Shimmer sweep */
.spark-btn-shine {
  position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(220,185,90,0.2), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3.5s ease-in-out infinite;
}
@keyframes btn-shine { 0%,100%{left:-70%} 55%{left:120%} }

.spark-footer { text-align: center; font-size: 0.7rem; font-weight: 700; color: rgba(200,160,245,0.5); letter-spacing: 0.5px; }

/* ══════════════════════════════════════════════════════════
   SCREEN 2 — GENERATING
══════════════════════════════════════════════════════════ */
/* ── Gen screen — wand + canvas particle system ── */
#screen-gen {
  background: #080216;   /* deep fallback while video loads */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Cinematic reel video ── */
.gen-reel-video {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.gen-reel-video.active { opacity: 1; }

/* ── Vignette overlay — darkens edges, keeps text legible ── */
.gen-reel-overlay {
  position: fixed; inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%,
      transparent 30%,
      rgba(4,1,16,0.55) 65%,
      rgba(4,1,16,0.88) 100%),
    linear-gradient(180deg,
      rgba(4,1,16,0.72) 0%,
      transparent 20%,
      transparent 75%,
      rgba(4,1,16,0.80) 100%);
  pointer-events: none;
}

/* Fairy dust canvas — on top of video */
#gen-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; opacity: 0.6;
}

/* ── Inner content — floats above everything ── */
.gen-inner {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px; padding: 40px 32px;
  transition: opacity 0.4s ease;
}

/* ── Brand wordmark ── */
.gen-brand {
  display: flex; align-items: baseline; justify-content: center;
  animation: brand-glow-pulse 3s ease-in-out infinite;
}
.gen-brand-luminara {
  font-family: var(--font-display);
  font-size: 2.2rem; font-style: italic; font-weight: 300;
  color: rgba(255,255,255,0.97);
  text-shadow:
    0 0 24px rgba(200,160,255,0.9),
    0 0 50px rgba(140,100,240,0.6),
    0 2px 8px rgba(0,0,0,0.5);
}
.gen-brand-spark {
  font-family: var(--font-display);
  font-size: 2.2rem; font-style: normal; font-weight: 700;
  color: var(--gold);
  text-shadow:
    0 0 20px rgba(240,201,110,1),
    0 0 45px rgba(240,180,60,0.7),
    0 2px 8px rgba(0,0,0,0.5);
}
@keyframes brand-glow-pulse {
  0%,100% { filter: brightness(0.88); }
  50%      { filter: brightness(1.18); }
}

/* ── Status text ── */
.gen-status {
  font-family: var(--font-display); font-size: 1.4rem;
  color: rgba(235,220,255,0.92); text-align: center;
  text-shadow: 0 2px 20px rgba(196,132,252,0.8), 0 0 40px rgba(140,80,240,0.4);
  min-height: 2.2rem;
  animation: status-fade 0.6s ease;
}
@keyframes status-fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── Pulse dots ── */
.gen-pulse-dots { display: flex; gap: 10px; align-items: center; }
.gpd {
  width: 9px; height: 9px; border-radius: 50%;
  animation: gpd-bounce 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px currentColor;
}
.gpd1 { animation-delay: 0s;    background: #c084fc; }
.gpd2 { animation-delay: 0.22s; background: var(--gold); }
.gpd3 { animation-delay: 0.44s; background: #7dd4f8; }
@keyframes gpd-bounce {
  0%,80%,100% { transform: scale(0.7); opacity: 0.4; }
  40%          { transform: scale(1.4); opacity: 1; }
}


/* ══════════════════════════════════════════════════════════
   SCREEN 3 — STORY
   bg-landscape.jpg tinted as story background
══════════════════════════════════════════════════════════ */
/* ── Story screen — fully contained, ZERO scroll ── */
#screen-story {
  background: url('bg-landscape.jpg') center top / cover no-repeat scroll; /* fixed breaks iOS scroll */
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* outer container clips bg, inner story-cover handles scroll */
  height: 100dvh;               /* device visual viewport on mobile */
}
#screen-story::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,8,56,0.7) 0%, rgba(13,4,28,0.75) 100%);
  z-index: 0;
}

/* ── Story bar ── */
.story-bar {
  position: relative; z-index: 100;   /* was sticky — now just top of flex column */
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; gap: 10px;
  background: rgba(10,4,24,0.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(200,160,245,0.15);
}

/* Forest pill button — used for bar-btn and read-aloud */
.forest-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(138,110,40,0.5);
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 100%);
  backdrop-filter: var(--glass-blur);
  color: #e8d8b0; font-family: var(--font-body); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase;
  transition: all 0.25s;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.15), 0 1px 4px rgba(0,0,0,0.3);
}
.forest-pill:hover { border-color: #d4b050; color: #f5e0a0; box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 4px 16px rgba(201,168,76,0.2); }

/* Specific bar button */
.bar-btn { }
.bar-btn-icon { font-size: 0.85rem; }

/* Page counter */
.bar-page-counter { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-mist); letter-spacing: 1px; }

/* Nav left group — wraps Back + translate toggle */
.nav-left-group { display: flex; align-items: center; gap: 6px; }

/* Translation toggle — sits next to Back in nav bar, same base style as nav-btn */
.nav-btn-translate { font-size: 0.78rem; padding: 11px 14px; letter-spacing: 0.3px; }

/* Fullscreen toggle button */
.nav-btn-fullscreen {
  font-size: 1.1rem;
  padding: 8px 12px;
  min-width: unset;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.nav-btn-fullscreen:hover { opacity: 1; }
.nav-btn-fullscreen.fs-active { opacity: 1; color: #f5e0a0; border-color: #e8c860; background: linear-gradient(150deg, #342858 0%, #281e45 100%); box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 0 0 2px rgba(201,168,76,0.2); }

/* ── Immersive Mode (iOS / fallback) — hides app chrome for more reading space ── */
.immersive-mode .story-bar {
  display: none !important;
}
.immersive-mode .page-view {
  padding-top: env(safe-area-inset-top, 0px) !important;
}
/* On mobile immersive, also slim down the nav bar */
@media (max-width: 599px) {
  .immersive-mode .page-nav {
    padding: 4px 2px 6px;
  }
}
.nav-btn-translate.is-translating { border-color: #e8c860; color: #f5e0a0; background: linear-gradient(150deg, #342858 0%, #281e45 100%); box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 0 0 2px rgba(201,168,76,0.2); }
.nav-btn-translate:disabled { opacity: 0.5; cursor: default; }

/* Read aloud button */
.btn-read-aloud { min-width: 105px; }
.btn-read-aloud.is-reading { border-color: #e8c860; color: #f5e0a0; background: linear-gradient(150deg, #342858 0%, #281e45 100%); box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 0 0 2px rgba(201,168,76,0.2), 0 0 16px rgba(201,168,76,0.2); }
.btn-read-aloud.is-loading {
  border-color: rgba(138,110,40,0.6);
  color: #f5e0a0;
  background: linear-gradient(270deg, rgba(44,32,80,0.9), rgba(201,168,76,0.25), rgba(220,185,90,0.3), rgba(44,32,80,0.9));
  background-size: 300% 100%;
  animation: ra-btn-flow 3s ease infinite;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), 0 0 14px rgba(201,168,76,0.2);
}
@keyframes ra-btn-flow {
  0%   { background-position: 0% 50%;   box-shadow: inset 0 1px 0 rgba(220,185,90,0.15), 0 0 10px rgba(201,168,76,0.15); }
  33%  { background-position: 50% 50%;  box-shadow: inset 0 1px 0 rgba(220,185,90,0.25), 0 0 18px rgba(201,168,76,0.25); }
  66%  { background-position: 100% 50%; box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), 0 0 14px rgba(201,168,76,0.2); }
  100% { background-position: 0% 50%;   box-shadow: inset 0 1px 0 rgba(220,185,90,0.15), 0 0 10px rgba(201,168,76,0.15); }
}

/* Loading progress bar inside Read button */
.ra-loading-wrap { display: none; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
.btn-read-aloud.is-loading .ra-icon  { display: none; }
.btn-read-aloud.is-loading .ra-label { display: none; }
.btn-read-aloud.is-loading .ra-loading-wrap { display: flex; }
.ra-loading-label { font-size: 0.7rem; letter-spacing: 0.06em; opacity: 0.95; white-space: nowrap; color: #fff; text-shadow: 0 0 6px rgba(155,111,224,0.5); }
.ra-progress-track { width: 100%; max-width: 140px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; position: relative; }
.ra-progress-fill  { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #8a6e28, #d4ad50, #f5e0a0, #d4ad50, #8a6e28); background-size: 300% 100%; transition: width 0.8s ease; animation: ra-shimmer 2.4s linear infinite; }
@keyframes ra-shimmer { 0%{background-position:0% 0} 100%{background-position:-300% 0} }
/* Animated sparkle dots after the loading label */
.ra-loading-label::after {
  content: '✦';
  display: inline-block;
  margin-left: 4px;
  animation: ra-sparkle-pulse 1.2s ease-in-out infinite;
  color: #F0C96E;
}
@keyframes ra-sparkle-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.btn-read-aloud.is-paused  { border-color: rgba(138,110,40,0.6); color: #c8b070; background: linear-gradient(150deg, #251c40 0%, #1a1230 100%); box-shadow: inset 0 1px 0 rgba(220,185,90,0.1); }
.ra-wave { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.btn-read-aloud.is-reading .ra-wave { display: flex; }
.btn-read-aloud.is-reading .ra-label { display: none; }
.ra-bar { width: 3px; border-radius: 2px; background: #e8c860; animation: ra-wave 0.8s ease-in-out infinite; }
.ra-bar:nth-child(1){height:6px;animation-delay:0s}
.ra-bar:nth-child(2){height:10px;animation-delay:.15s}
.ra-bar:nth-child(3){height:14px;animation-delay:.3s}
.ra-bar:nth-child(4){height:8px;animation-delay:.45s}
.ra-bar:nth-child(5){height:5px;animation-delay:.6s}
@keyframes ra-wave { 0%,100%{transform:scaleY(0.4);opacity:0.5} 50%{transform:scaleY(1);opacity:1} }

/* ── Cover ── */
.story-cover { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 24px 16px; box-sizing: border-box; }
.story-cover.hidden { display: none; }

/* Cover reel — cinematic clips behind the loading card */
.cover-inner {
  max-width: 440px; width: 100%;
  background: rgba(10,4,24,0.10); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(200,160,245,0.3);
  border-radius: 28px; padding: 32px 28px 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(125,212,248,0.05) inset, var(--shadow-glow);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative;
  z-index: 2;
  animation: page-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both, coverFloat 20s ease-in-out 0.6s infinite;
}
.cover-stars { font-size: 1.1rem; color: var(--gold); letter-spacing: 10px; filter: drop-shadow(0 0 8px rgba(248,232,122,0.8)); }
.cover-tagline { font-size: 0.68rem; font-weight: 900; color: var(--sky); letter-spacing: 3.5px; text-transform: uppercase; }
.cover-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 400; font-style: italic; color: var(--mist); text-shadow: 0 2px 20px rgba(200,160,245,0.5); line-height: 1.2; }
.cover-hero  { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-mist); }
.cover-btn { max-width: 280px; font-size: 1.15rem; }
/* Branded ambient music pill */
.ambient-music-pill {
  display: flex; justify-content: center;
  margin-top: 10px;
}
.amp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px 6px 12px;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 100%);
  border: 1px solid rgba(138,110,40,0.5);
  border-radius: 100px;
  color: #e8d8b0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.12), 0 1px 4px rgba(0,0,0,0.3);
}
.amp-btn:hover { border-color: #d4b050; color: #f5e0a0; box-shadow: inset 0 1px 0 rgba(220,185,90,0.25), 0 4px 12px rgba(201,168,76,0.15); }
.amp-btn.muted { opacity: 0.4; border-color: rgba(138,110,40,0.3); box-shadow: none; }
.amp-icon { font-size: 0.9rem; line-height: 1; }
.amp-label { line-height: 1; }

@keyframes coverFloat {
  0%   { transform: translate(0px,   0px); }
  15%  { transform: translate(8px,  -6px); }
  30%  { transform: translate(-6px, -10px); }
  45%  { transform: translate(-10px, 5px); }
  60%  { transform: translate(4px,   10px); }
  75%  { transform: translate(10px, -3px); }
  90%  { transform: translate(-5px, -6px); }
  100% { transform: translate(0px,   0px); }
}

/* ══════════════════════════════════════════════════════════
   STORY READER — card layout (no book metaphor)
   Structure: flex column [story-reader grows] [page-nav fixed-height]
   story-reader = [story-text-panel] + [story-side-panel]
══════════════════════════════════════════════════════════ */

/* Outer wrapper — fills all space between top bar and bottom nav */
.page-view {
  position: relative; z-index: 1;
  width: 100%;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 10px 14px 0;
}
.page-view.hidden { display: none; }

/* Reader row: text left, side panel right */
.story-reader {
  flex: 1;
  display: flex;
  gap: 0;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,160,245,0.18);
  animation: page-in 0.4s cubic-bezier(0.34,1.2,0.64,1) both;
}

/* ── Text panel ── */
.story-text-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(160deg, #fdf8ff 0%, #f5eeff 55%, #ede8f8 100%);
  position: relative;
  z-index: 2;
}
/* Right edge: storybook page shadow — gives depth like a turned page */
.story-text-panel::after {
  content: '';
  position: absolute; top: 0; right: -6px; bottom: 0; width: 20px;
  background: linear-gradient(90deg,
    rgba(80,40,140,0.18) 0%,
    rgba(60,20,120,0.10) 30%,
    rgba(40,10,80,0.04)  60%,
    transparent           100%);
  pointer-events: none;
  z-index: 5;
}
/* subtle left-edge shadow for depth */
.story-text-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 20px;
  background: linear-gradient(90deg, rgba(100,60,180,0.07), transparent);
  pointer-events: none;
}

.stp-inner {
  flex: 1;
  padding: 28px 28px 60px 32px;      /* extra bottom padding so text isn't hidden behind floating nav */
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: 0;                          /* iOS flex scroll fix: forces element to scroll */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
}

.stp-chapter-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lilac-deep);
  opacity: 0.65;
}

/* ── Page footer — ornament + page number ── */
.page-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 0 6px;
  flex-shrink: 0;
  margin-top: auto; /* push to bottom of stp-inner */
}
.page-footer.hidden { display: none; }
.page-footer-ornament {
  width: 140px;
  height: 10px;
  color: #c4a0ff;
  opacity: 0.6;
  flex-shrink: 0;
}
.page-footer-num {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  color: #c4a0ff;
  opacity: 1;
  text-shadow: 0 1px 10px rgba(160, 100, 255, 0.4);
  position: relative;
}
.page-footer-num::before,
.page-footer-num::after {
  content: '—';
  font-size: 0.8rem;
  color: rgba(180, 130, 255, 0.45);
  vertical-align: middle;
  margin: 0 8px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0;
}

/* ── Story text ── */
/* ═══════════════════════════════════════════════════════
   STORY TEXT — single source of truth for ALL page types
   Every rendering context (plain text, bridge
   text, draw-page hint) must inherit from .page-text.
   NEVER override font-family, color, or font-weight below
   this block — set them here and let children inherit.
   ═══════════════════════════════════════════════════════ */
.page-text {
  font-family: var(--font-story);
  font-size: clamp(1.0rem, 1.7vw, 1.22rem);
  font-weight: 700;
  line-height: 1.85;
  color: #2a1060;
  flex: 1;
  /* Ensure all inline children inherit text styling */
  -webkit-font-smoothing: antialiased;
}

/* Age-based font scaling */
.age-6 .page-text { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 2.05; }
.age-7 .page-text, .age-8 .page-text { font-size: clamp(1.0rem,  1.7vw, 1.22rem); line-height: 1.90; }
.age-9 .page-text, .age-10 .page-text{ font-size: clamp(0.85rem, 1.35vw, 1.05rem);line-height: 1.78; }

/* ── Drop cap — text pages only ── */
.page-text::first-letter {
  font-family: var(--font-display);
  font-size: 3.0em; line-height: 0.85;
  float: left; margin: 4px 10px 0 0;
  color: var(--lilac-deep);
  filter: drop-shadow(0 2px 6px rgba(155,109,255,0.35));
}
.age-9 .page-text::first-letter,
.age-10 .page-text::first-letter { font-size: 2.4em; }
/* Suppress drop-cap on image-page bridge text */
.page-text:has(.image-page-story-ctx)::first-letter { font-size: inherit; float: none; margin: 0; filter: none; color: inherit; }

/* ── Word-highlight spans (read-aloud mode) ──
   Must be invisible — pure passthrough for font/color/size.
   Only the .word-highlight class adds visual change.        */

/* ── Draw bridge text (previous chapter shown on image pages) ──
   Span wraps the full text — must fully inherit page-text styles. */
.image-page-story-ctx {
  font-family: inherit !important;
  font-size:   inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color:       inherit !important;
  font-style:  normal;
  display: block;
}

/* ── Draw page hint (no previous chapter) ── */
.image-page-hint {
  font-family: var(--font-story);
  font-size: inherit;
  font-weight: 600;
  color: rgba(42,16,96,0.45);
  font-style: italic;
  display: block;
}

/* ── Read-aloud active state ── */
@keyframes page-entering { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.page-entering { animation: page-entering 0.3s ease forwards; }

/* Page-change fade on the text panel */
.story-text-panel.page-changing { transition: opacity 0.15s ease; opacity: 0.12; }
.story-text-panel.page-settled  { transition: opacity 0.22s ease; opacity: 1; }

/* Disable nav clicks during transition */
.story-reader.transitioning .nav-btn { pointer-events: none; opacity: 0.5; }


/* ── Side panel — right column ── */
.story-side-panel {
  width: 48%;
  max-width: 540px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, #1a0840 0%, #2a0a60 50%, #1a1048 100%);
  position: relative;
  overflow: hidden;
}
/* ── Storybook ornamental edge — blends text panel into side panel ── */
/* Layer 1: soft page-edge shadow bleeding from the light panel */
.story-side-panel::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -28px;
  width: 56px;
  background: linear-gradient(90deg,
    rgba(237,232,248,0.0)  0%,
    rgba(220,200,245,0.35) 25%,
    rgba(180,140,220,0.25) 40%,
    rgba(100,60,160,0.15)  55%,
    rgba(40,10,80,0.08)    70%,
    transparent             100%);
  z-index: 10;
  pointer-events: none;
}
/* Layer 2: ornamental vine/scroll pattern along the seam */
.story-side-panel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  width: 24px;
  z-index: 11;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='400' viewBox='0 0 24 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23c8a0f5' stop-opacity='0'/%3E%3Cstop offset='8%25' stop-color='%23c8a0f5' stop-opacity='0.6'/%3E%3Cstop offset='50%25' stop-color='%23e8c96e' stop-opacity='0.8'/%3E%3Cstop offset='92%25' stop-color='%23c8a0f5' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23c8a0f5' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Central vine stem --%3E%3Cpath d='M12 0 Q14 50 10 100 Q8 150 14 200 Q16 250 10 300 Q8 350 12 400' fill='none' stroke='url(%23g)' stroke-width='1.2'/%3E%3C!-- Leaf pairs along the vine --%3E%3Cellipse cx='6' cy='40' rx='4' ry='8' fill='%23c8a0f5' fill-opacity='0.25' transform='rotate(-20 6 40)'/%3E%3Cellipse cx='18' cy='40' rx='4' ry='8' fill='%23c8a0f5' fill-opacity='0.2' transform='rotate(20 18 40)'/%3E%3Cellipse cx='17' cy='100' rx='4' ry='7' fill='%23e8c96e' fill-opacity='0.2' transform='rotate(15 17 100)'/%3E%3Cellipse cx='7' cy='100' rx='4' ry='7' fill='%23e8c96e' fill-opacity='0.15' transform='rotate(-15 7 100)'/%3E%3Cellipse cx='6' cy='160' rx='3.5' ry='7' fill='%23c8a0f5' fill-opacity='0.2' transform='rotate(-25 6 160)'/%3E%3Cellipse cx='18' cy='160' rx='3.5' ry='7' fill='%23c8a0f5' fill-opacity='0.15' transform='rotate(25 18 160)'/%3E%3Cellipse cx='17' cy='220' rx='4' ry='8' fill='%23e8c96e' fill-opacity='0.2' transform='rotate(18 17 220)'/%3E%3Cellipse cx='7' cy='220' rx='4' ry='8' fill='%23e8c96e' fill-opacity='0.15' transform='rotate(-18 7 220)'/%3E%3Cellipse cx='6' cy='280' rx='3.5' ry='7' fill='%23c8a0f5' fill-opacity='0.22' transform='rotate(-22 6 280)'/%3E%3Cellipse cx='18' cy='280' rx='3.5' ry='7' fill='%23c8a0f5' fill-opacity='0.18' transform='rotate(22 18 280)'/%3E%3Cellipse cx='17' cy='340' rx='4' ry='7' fill='%23e8c96e' fill-opacity='0.18' transform='rotate(15 17 340)'/%3E%3Cellipse cx='7' cy='340' rx='4' ry='7' fill='%23e8c96e' fill-opacity='0.14' transform='rotate(-15 7 340)'/%3E%3C!-- Small diamond ornaments at intervals --%3E%3Crect x='10' y='68' width='4' height='4' rx='0.5' fill='%23e8c96e' fill-opacity='0.4' transform='rotate(45 12 70)'/%3E%3Crect x='10' y='128' width='3.5' height='3.5' rx='0.5' fill='%23c8a0f5' fill-opacity='0.35' transform='rotate(45 12 130)'/%3E%3Crect x='10' y='188' width='4' height='4' rx='0.5' fill='%23e8c96e' fill-opacity='0.4' transform='rotate(45 12 190)'/%3E%3Crect x='10' y='248' width='3.5' height='3.5' rx='0.5' fill='%23c8a0f5' fill-opacity='0.35' transform='rotate(45 12 250)'/%3E%3Crect x='10' y='308' width='4' height='4' rx='0.5' fill='%23e8c96e' fill-opacity='0.4' transform='rotate(45 12 310)'/%3E%3Crect x='10' y='368' width='3.5' height='3.5' rx='0.5' fill='%23c8a0f5' fill-opacity='0.35' transform='rotate(45 12 370)'/%3E%3C!-- Tiny curl tendrils --%3E%3Cpath d='M14 55 Q18 52 17 48' fill='none' stroke='%23c8a0f5' stroke-opacity='0.3' stroke-width='0.8'/%3E%3Cpath d='M10 115 Q6 112 7 108' fill='none' stroke='%23e8c96e' stroke-opacity='0.25' stroke-width='0.8'/%3E%3Cpath d='M14 175 Q18 172 17 168' fill='none' stroke='%23c8a0f5' stroke-opacity='0.3' stroke-width='0.8'/%3E%3Cpath d='M10 235 Q6 232 7 228' fill='none' stroke='%23e8c96e' stroke-opacity='0.25' stroke-width='0.8'/%3E%3Cpath d='M14 295 Q18 292 17 288' fill='none' stroke='%23c8a0f5' stroke-opacity='0.3' stroke-width='0.8'/%3E%3Cpath d='M10 355 Q6 352 7 348' fill='none' stroke='%23e8c96e' stroke-opacity='0.25' stroke-width='0.8'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 24px 400px;
  background-position: center top;
}

/* ── Content wrapper — swapped via innerHTML without touching persistent video ── */
.ssp-content {
  flex: 1; display: flex; flex-direction: column;
  position: relative; min-height: 0;
}

/* ── Ambient panel — shown on text pages ── */
.ssp-ambient {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

/* ── Side-panel video — same approach as gen-reel (which plays smooth) ── */
/* Uses position:fixed to escape the overflow:hidden side panel container.
   This matches how gen-reel-video works — and those never lag. */
.ssp-vid-pool {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 48%; max-width: 540px; min-width: 300px;
  z-index: 20;
  pointer-events: none;
  background: transparent; /* Default transparent — purple bg applied via JS when video active */
}
.ssp-vid-pool video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 3s ease; /* Slow calming fade */
  /* Force own compositing layer — GPU decodes directly to texture, no main-thread jank */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.ssp-vid-pool video.active {
  opacity: 1;
}
#ssp-vignette {
  position: absolute; inset: 0;
  z-index: 21;
  background: linear-gradient(180deg,
    rgba(10,0,24,0.10) 0%,
    transparent 20%,
    transparent 80%,
    rgba(10,0,24,0.15) 100%);
  pointer-events: none;
  display: none;
}
.story-side-panel.video-active #ssp-vignette { display: block; }
.story-side-panel.video-active::before,
.story-side-panel.video-active::after { display: none !important; }
.story-side-panel.video-active .ssp-content { display: none !important; }

/* ── Video loading shimmer — magical sparkle while video buffers ── */
.ssp-vid-loading {
  position: absolute; inset: 0; z-index: 19;
  background: radial-gradient(ellipse at center, #1a0a3e 0%, #0d0520 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ssp-vid-loading.active {
  opacity: 1; visibility: visible;
}
.ssp-vid-loading .shimmer-orb {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,130,255,0.5) 0%, rgba(100,60,200,0.15) 50%, transparent 70%);
  animation: vidLoadPulse 1.8s ease-in-out infinite;
  position: relative;
}
.ssp-vid-loading .shimmer-orb::before {
  content: '✦';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: rgba(220,190,255,0.9);
  animation: vidLoadSpin 3s linear infinite;
}
.ssp-vid-loading .shimmer-orb::after {
  content: '';
  position: absolute; inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,130,255,0.2) 0%, transparent 60%);
  animation: vidLoadPulse 1.8s ease-in-out infinite 0.4s;
}
@keyframes vidLoadPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.5; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes vidLoadSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Story image as faint background — shown after any image is generated */
.ssp-img-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  animation: ssp-img-fade-in 1.2s ease 0.3s forwards;
}
/* Static variant — no re-fade on subsequent page turns */
.ssp-img-bg--static {
  opacity: 1 !important;
  animation: none !important;
}
@keyframes ssp-img-fade-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
/* Dark overlay so text/orb stays legible over the image */
.ssp-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(150deg,
    rgba(20, 4, 60, 0.72) 0%,
    rgba(30, 8, 80, 0.62) 50%,
    rgba(15, 5, 50, 0.75) 100%);
  pointer-events: none;
}

/* ── Per-page environment background ── */
/* ── Falling Leaves, Dust Motes & Critters ── */
.ssp-env-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: ssp-env-fade 2s ease 0.3s forwards;
  overflow: hidden;
}
@keyframes ssp-env-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Falling leaves — gentle fade-in at top, tumble down ── */
/* Persistent leaves host — sibling of side panel, never destroyed by innerHTML */
.persistent-leaves-host {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48%; /* matches .story-side-panel width */
  max-width: 540px;
  min-width: 300px;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  display: none; /* shown by JS when story starts */
}
/* Persistent leaves layer inside the host */
.persistent-leaves-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
/* Falling leaf base styles */
.ssp-env-bg .falling-leaf {
  position: absolute;
  top: -10%;
  will-change: transform, opacity;
  animation: var(--lf-drift) var(--lf-dur) linear infinite;
  animation-delay: var(--lf-delay);
}
/* Persistent leaves — each leaf has its own fall color + individual color cycle */
.persistent-leaves-layer .falling-leaf {
  position: absolute;
  top: -10%;
  will-change: transform, opacity, filter;
  filter: hue-rotate(var(--leaf-hue, 0deg));
  animation: var(--lf-drift) var(--lf-dur) linear infinite,
             leaf-color-cycle var(--leaf-cycle, 40s) ease-in-out infinite;
  animation-delay: var(--lf-delay), var(--leaf-cycle-delay, 0s);
}
@keyframes leaf-color-cycle {
  0%   { filter: hue-rotate(var(--leaf-hue, 0deg)) saturate(105%); }
  25%  { filter: hue-rotate(calc(var(--leaf-hue, 0deg) + 25deg)) saturate(115%); }
  50%  { filter: hue-rotate(calc(var(--leaf-hue, 0deg) + 55deg)) saturate(130%); }
  75%  { filter: hue-rotate(calc(var(--leaf-hue, 0deg) + 25deg)) saturate(112%); }
  100% { filter: hue-rotate(var(--leaf-hue, 0deg)) saturate(105%); }
}
.ssp-env-bg .falling-leaf svg {
  width: 100%;
  height: 100%;
}

/* 4 drift paths — slower fade-in over first 12-15% */
@keyframes leaf-drift-1 {
  0%   { transform: translateY(0) translateX(0) rotate(var(--lf-rot)); opacity: 0; }
  12%  { transform: translateY(12vh) translateX(10px) rotate(calc(var(--lf-rot) + 25deg)); opacity: 0.7; }
  30%  { transform: translateY(30vh) translateX(-15px) rotate(calc(var(--lf-rot) + 120deg)); opacity: 0.75; }
  50%  { transform: translateY(50vh) translateX(30px) rotate(calc(var(--lf-rot) + 200deg)); opacity: 0.6; }
  70%  { transform: translateY(70vh) translateX(-10px) rotate(calc(var(--lf-rot) + 290deg)); opacity: 0.7; }
  88%  { opacity: 0.3; }
  100% { transform: translateY(110vh) translateX(20px) rotate(calc(var(--lf-rot) + 380deg)); opacity: 0; }
}
@keyframes leaf-drift-2 {
  0%   { transform: translateY(0) translateX(0) rotate(var(--lf-rot)); opacity: 0; }
  14%  { transform: translateY(14vh) translateX(-12px) rotate(calc(var(--lf-rot) + 30deg)); opacity: 0.65; }
  35%  { transform: translateY(35vh) translateX(20px) rotate(calc(var(--lf-rot) + 150deg)); opacity: 0.7; }
  55%  { transform: translateY(55vh) translateX(-25px) rotate(calc(var(--lf-rot) + 240deg)); opacity: 0.5; }
  75%  { transform: translateY(75vh) translateX(15px) rotate(calc(var(--lf-rot) + 320deg)); opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(110vh) translateX(-10px) rotate(calc(var(--lf-rot) + 400deg)); opacity: 0; }
}
@keyframes leaf-drift-3 {
  0%   { transform: translateY(0) translateX(0) rotate(var(--lf-rot)); opacity: 0; }
  13%  { transform: translateY(13vh) translateX(8px) rotate(calc(var(--lf-rot) + 20deg)); opacity: 0.6; }
  40%  { transform: translateY(40vh) translateX(-35px) rotate(calc(var(--lf-rot) + 180deg)); opacity: 0.65; }
  60%  { transform: translateY(60vh) translateX(10px) rotate(calc(var(--lf-rot) + 260deg)); opacity: 0.55; }
  80%  { transform: translateY(80vh) translateX(-20px) rotate(calc(var(--lf-rot) + 340deg)); opacity: 0.6; }
  92%  { opacity: 0.15; }
  100% { transform: translateY(110vh) translateX(5px) rotate(calc(var(--lf-rot) + 420deg)); opacity: 0; }
}
@keyframes leaf-drift-4 {
  0%   { transform: translateY(0) translateX(0) rotate(var(--lf-rot)); opacity: 0; }
  15%  { transform: translateY(15vh) translateX(-8px) rotate(calc(var(--lf-rot) + 35deg)); opacity: 0.7; }
  45%  { transform: translateY(45vh) translateX(35px) rotate(calc(var(--lf-rot) + 190deg)); opacity: 0.6; }
  65%  { transform: translateY(65vh) translateX(-15px) rotate(calc(var(--lf-rot) + 280deg)); opacity: 0.7; }
  85%  { transform: translateY(85vh) translateX(25px) rotate(calc(var(--lf-rot) + 360deg)); opacity: 0.35; }
  95%  { opacity: 0.1; }
  100% { transform: translateY(110vh) translateX(-5px) rotate(calc(var(--lf-rot) + 440deg)); opacity: 0; }
}

/* ── Dust motes — tiny drifting particles ── */
.ssp-env-bg .dust-mote {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  background: radial-gradient(circle, var(--dust-color) 0%, transparent 70%);
  animation: var(--dust-path) var(--dust-dur) ease-in-out infinite;
  animation-delay: var(--dust-delay);
}
@keyframes dust-float-1 {
  0%   { transform: translate(0,0); opacity: 0; }
  10%  { opacity: 0.6; }
  30%  { transform: translate(15px,-20px); opacity: 0.8; }
  50%  { transform: translate(-10px,-8px); opacity: 0.4; }
  70%  { transform: translate(20px,10px); opacity: 0.7; }
  90%  { opacity: 0.2; }
  100% { transform: translate(0,0); opacity: 0; }
}
@keyframes dust-float-2 {
  0%   { transform: translate(0,0); opacity: 0; }
  12%  { opacity: 0.5; }
  35%  { transform: translate(-20px,15px); opacity: 0.7; }
  55%  { transform: translate(8px,-12px); opacity: 0.3; }
  75%  { transform: translate(-15px,20px); opacity: 0.6; }
  92%  { opacity: 0.15; }
  100% { transform: translate(0,0); opacity: 0; }
}
@keyframes dust-float-3 {
  0%   { transform: translate(0,0); opacity: 0; }
  8%   { opacity: 0.55; }
  25%  { transform: translate(12px,18px); opacity: 0.7; }
  48%  { transform: translate(-18px,-5px); opacity: 0.35; }
  68%  { transform: translate(10px,-15px); opacity: 0.65; }
  88%  { opacity: 0.2; }
  100% { transform: translate(0,0); opacity: 0; }
}




/* Orb hidden — replaced by richer particle field */
.ssp-orb { display: none; }

/* Aurora shimmer — sweeping color wash */
.ssp-aurora {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  filter: hue-rotate(var(--mood-aurora-hue, 0deg));
}
.ssp-aurora::before {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 70%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(125,212,248,0.10) 60deg,
    rgba(200,130,255,0.14) 120deg,
    rgba(255,160,220,0.08) 180deg,
    rgba(125,212,248,0.06) 240deg,
    transparent 300deg
  );
  animation: aurora-spin 18s linear infinite;
  filter: blur(24px);
}
.ssp-aurora::after {
  content: '';
  position: absolute;
  bottom: -30%; right: -10%;
  width: 110%; height: 60%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(155,109,255,0.12) 80deg,
    rgba(125,212,248,0.08) 160deg,
    transparent 240deg
  );
  animation: aurora-spin 24s linear infinite reverse;
  filter: blur(20px);
}
@keyframes aurora-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Star field */
.ssp-ambient::before {
  content: '✦ ✧ ✦ ✧ ✦';
  position: absolute; top: 18px; width: 100%;
  text-align: center; letter-spacing: 14px;
  font-size: 0.55rem; color: rgba(200,160,245,0.25);
  animation: ambient-drift 6s ease-in-out infinite;
  z-index: 2;
}
.ssp-ambient::after {
  content: '✧ ✦ ✧ ✦ ✧';
  position: absolute; bottom: 18px; width: 100%;
  text-align: center; letter-spacing: 14px;
  font-size: 0.55rem; color: rgba(125,212,248,0.2);
  animation: ambient-drift 8s ease-in-out infinite reverse;
  z-index: 2;
}
@keyframes ambient-drift {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(-6px); opacity: 1; }
}


/* ── Side panel brand header ── */
/* ── Side panel brand lockup ─────────────────────────────────────────────
   Positioned in the upper-right corner: a compact glowing logo badge.
   Visible on every side-panel state (ambient, draw idle, draw result).
   ─────────────────────────────────────────────────────────────────────── */
/* Side-panel brand badge — hidden everywhere except draw pages */
.ssp-brand {
  display: none !important;
}
.ssp-brand.draw-panel-brand {
  display: flex !important;
  position: absolute;
  top: 14px; right: 16px;
  flex-direction: column; align-items: flex-end;
  gap: 0;
  z-index: 10;
  pointer-events: none;
  background: rgba(8, 2, 24, 0.52);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(155,109,255,0.18);
  border-radius: 12px;
  padding: 8px 12px 7px;
  box-shadow:
    0 0 0 1px rgba(155,109,255,0.06),
    0 4px 20px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Spark glyph — small orbiting star above the name */
.ssp-brand-icon {
  position: absolute;
  top: -5px; right: -4px;
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(200,140,255,0.9) 0%, rgba(130,60,230,0.4) 60%, transparent 100%);
  border-radius: 50%;
  font-size: 0.42rem;
  color: rgba(255,240,255,0.95);
  box-shadow: 0 0 6px rgba(200,140,255,0.7), 0 0 12px rgba(155,109,255,0.4);
  animation: brand-orb-pulse 2.8s ease-in-out infinite;
}
@keyframes brand-orb-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(200,140,255,0.7), 0 0 12px rgba(155,109,255,0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 10px rgba(200,140,255,0.95), 0 0 20px rgba(155,109,255,0.6); transform: scale(1.15); }
}

/* "Luminara" — the display name in Cormorant */
.ssp-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  color: rgba(235,215,255,0.95);
  text-shadow:
    0 0 16px rgba(200,140,255,0.45),
    0 1px 0 rgba(0,0,0,0.4);
}

/* "SPARK" — small caps label below */
.ssp-brand-sub {
  font-family: var(--font-body);
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(180,140,255,0.5);
  margin-top: 2px;
  /* Subtle gradient text */
  background: linear-gradient(90deg, rgba(155,109,255,0.65), rgba(125,212,248,0.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Enchanted Night Sky ── */
.sky-star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(200,180,255,0.3));
  pointer-events: none;
  animation: star-twinkle var(--star-dur) ease-in-out var(--star-delay) infinite;
  filter: var(--mood-star-tint, none);
}
@keyframes star-twinkle {
  0%, 100% { opacity: var(--star-base, 0.3); transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* Shooting stars */
.shooting-star {
  position: absolute;
  left: -5%;
  width: 80px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8) 30%, rgba(200,180,255,0.6) 60%, transparent);
  border-radius: 50px;
  pointer-events: none;
  opacity: 0;
  animation: shoot-across var(--shoot-dur) ease-in var(--shoot-delay) infinite;
}
.shooting-star::after {
  content: '';
  position: absolute;
  right: 0; top: -1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.8), 0 0 12px 4px rgba(200,180,255,0.4);
}
@keyframes shoot-across {
  0%   { left: -10%; top: var(--shoot-top, 20%); opacity: 0; transform: rotate(-15deg); }
  2%   { opacity: 1; }
  8%   { left: 110%; opacity: 0.6; }
  10%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Fireflies — warm glowing dots that drift */
.firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ff-glow) 0%, transparent 70%);
  box-shadow: 0 0 var(--ff-glow-size) var(--ff-glow), 0 0 calc(var(--ff-glow-size) * 2.5) var(--ff-glow);
  pointer-events: none;
  opacity: 0;
  animation: var(--ff-drift) var(--ff-dur) ease-in-out var(--ff-delay) infinite;
}

@keyframes ff-drift-1 {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.8; }
  25%  { transform: translate(30px, -20px); opacity: 0.6; }
  40%  { transform: translate(-15px, -35px); opacity: 0.9; }
  55%  { transform: translate(20px, 10px); opacity: 0.4; }
  70%  { transform: translate(-25px, -15px); opacity: 0.85; }
  85%  { transform: translate(10px, 5px); opacity: 0.5; }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes ff-drift-2 {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.7; }
  30%  { transform: translate(-20px, 15px); opacity: 0.5; }
  45%  { transform: translate(25px, -10px); opacity: 0.9; }
  60%  { transform: translate(-10px, 25px); opacity: 0.3; }
  75%  { transform: translate(15px, -20px); opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes ff-drift-3 {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 0.6; }
  20%  { transform: translate(20px, 20px); opacity: 0.85; }
  35%  { transform: translate(-30px, -5px); opacity: 0.4; }
  50%  { transform: translate(10px, -25px); opacity: 0.9; }
  65%  { transform: translate(-20px, 15px); opacity: 0.5; }
  80%  { transform: translate(25px, -10px); opacity: 0.7; }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes ff-drift-4 {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.9; }
  28%  { transform: translate(-15px, -25px); opacity: 0.6; }
  42%  { transform: translate(20px, 10px); opacity: 0.85; }
  58%  { transform: translate(-25px, 20px); opacity: 0.3; }
  72%  { transform: translate(10px, -15px); opacity: 0.7; }
  88%  { opacity: 0.4; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* ── Persistent ambient video host — looping background animations ── */
/* Page number display — centered roman numeral with circular orbiting decorations */
.ssp-page-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  text-align: center;
  pointer-events: none;
  width: 160px;
  height: 160px;
  overflow: visible;
  animation: page-display-fade 2s ease 0.5s forwards;
  opacity: 0;
}
@keyframes page-display-fade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Orbit rings — thin circular borders that rotate */
.page-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200,175,240,0.12);
  pointer-events: none;
}
.ring-outer {
  width: 150px; height: 150px;
  top: 5px; left: 5px;
  animation: orbit-spin 30s linear infinite;
  border-style: dashed;
  border-color: rgba(200,175,240,0.1);
}
.ring-inner {
  width: 110px; height: 110px;
  top: 25px; left: 25px;
  animation: orbit-spin 20s linear infinite reverse;
  border-color: rgba(200,175,240,0.08);
}
@keyframes orbit-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Orbiting stars — positioned via rotate + translateX to circle the center */
.page-orbit-star {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  font-size: 0.6rem;
  color: rgba(200,175,240,0.4);
  transform-origin: 0 0;
  animation: orbit-star-glow 4s ease-in-out infinite;
}
/* 8 stars evenly spaced around the orbit (45° apart) */
.os-1 { animation: orbit-pos-1 24s linear infinite, orbit-star-glow 3.5s ease-in-out infinite; }
.os-2 { animation: orbit-pos-2 24s linear infinite, orbit-star-glow 4.0s ease-in-out 0.5s infinite; }
.os-3 { animation: orbit-pos-3 24s linear infinite, orbit-star-glow 3.8s ease-in-out 1.0s infinite; }
.os-4 { animation: orbit-pos-4 24s linear infinite, orbit-star-glow 4.2s ease-in-out 1.5s infinite; }
.os-5 { animation: orbit-pos-5 24s linear infinite, orbit-star-glow 3.6s ease-in-out 2.0s infinite; }
.os-6 { animation: orbit-pos-6 24s linear infinite, orbit-star-glow 4.1s ease-in-out 2.5s infinite; }
.os-7 { animation: orbit-pos-7 24s linear infinite, orbit-star-glow 3.9s ease-in-out 3.0s infinite; }
.os-8 { animation: orbit-pos-8 24s linear infinite, orbit-star-glow 3.7s ease-in-out 3.5s infinite; }

@keyframes orbit-pos-1 { 0% { transform: rotate(0deg)   translateX(72px) rotate(0deg);   } 100% { transform: rotate(360deg) translateX(72px) rotate(-360deg); } }
@keyframes orbit-pos-2 { 0% { transform: rotate(45deg)  translateX(72px) rotate(-45deg);  } 100% { transform: rotate(405deg) translateX(72px) rotate(-405deg); } }
@keyframes orbit-pos-3 { 0% { transform: rotate(90deg)  translateX(72px) rotate(-90deg);  } 100% { transform: rotate(450deg) translateX(72px) rotate(-450deg); } }
@keyframes orbit-pos-4 { 0% { transform: rotate(135deg) translateX(72px) rotate(-135deg); } 100% { transform: rotate(495deg) translateX(72px) rotate(-495deg); } }
@keyframes orbit-pos-5 { 0% { transform: rotate(180deg) translateX(72px) rotate(-180deg); } 100% { transform: rotate(540deg) translateX(72px) rotate(-540deg); } }
@keyframes orbit-pos-6 { 0% { transform: rotate(225deg) translateX(72px) rotate(-225deg); } 100% { transform: rotate(585deg) translateX(72px) rotate(-585deg); } }
@keyframes orbit-pos-7 { 0% { transform: rotate(270deg) translateX(72px) rotate(-270deg); } 100% { transform: rotate(630deg) translateX(72px) rotate(-630deg); } }
@keyframes orbit-pos-8 { 0% { transform: rotate(315deg) translateX(72px) rotate(-315deg); } 100% { transform: rotate(675deg) translateX(72px) rotate(-675deg); } }

@keyframes orbit-star-glow {
  0%, 100% { opacity: 0.25; text-shadow: none; }
  50% { opacity: 0.85; text-shadow: 0 0 8px rgba(200,175,240,0.5), 0 0 16px rgba(160,120,220,0.3); }
}

/* Roman numeral — centered with breathing glow */
.ssp-page-roman {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 2.8rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.15em;
  color: rgba(200,175,240,0.35);
  line-height: 1;
  animation: roman-glow 6s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes roman-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(160,120,220,0.1); color: rgba(200,175,240,0.3); }
  50% { text-shadow: 0 0 25px rgba(160,120,220,0.25), 0 0 50px rgba(140,100,200,0.1); color: rgba(210,185,250,0.5); }
}

/* Video scene countdown hint — above the sigil so it's always visible */
.ssp-video-hint-wrap {
  position: absolute;
  top: 10%;
  left: 0; right: 0;
  text-align: center;
  z-index: 12;
  pointer-events: none;
}
.ssp-video-hint {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(220,200,255,0.85);
  white-space: nowrap;
  animation: video-hint-breathe 4s ease-in-out infinite;
  pointer-events: none;
}
.ssp-video-hint-dust { display: none; }
@keyframes video-hint-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Legacy page number indicator */
.ssp-page-num {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 20;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(200,175,240,0.45);
  text-shadow: 0 0 12px rgba(140,100,200,0.2);
  pointer-events: none;
}

/* Brand on draw result panel — same corner position */
.draw-panel-brand {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  border-bottom: none !important;
  pointer-events: none;
}

/* ── SSP particle canvas ── */
.ssp-particles-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Brand is a corner badge — no top padding needed to clear it */
.ssp-ambient {
  padding-top: 0;
}

/* ── SSP Tease — countdown panel before a draw page ── */
.ssp-tease {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  overflow: hidden;
  padding: 32px 28px;
  box-sizing: border-box;
  text-align: center;
  background-size: cover;
  background-position: center top;
}
/* Tease elements sit above any bg image overlay */
.ssp-tease .ssp-img-overlay { z-index: 0; }
.ssp-tease > *:not(.ssp-img-overlay):not(.ssp-brand) { position: relative; z-index: 1; }
/* Brand sits above all tease content layers */
.ssp-tease .ssp-brand { z-index: 12; }

/* Big glowing orb that pulses with anticipation */
.ssp-tease-orb {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(180, 100, 255, 0.55) 0%,
    rgba(100, 40, 200, 0.30) 45%,
    transparent 75%);
  filter: blur(28px);
  animation: tease-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tease-pulse {
  0%, 100% { transform: scale(0.88); opacity: 0.7; }
  50%       { transform: scale(1.12); opacity: 1; }
}

/* Floating star particles */
.ssp-tease-stars { position: absolute; inset: 0; pointer-events: none; }
.ssp-tstar {
  position: absolute;
  color: rgba(200, 160, 255, 0.7);
  font-size: 0.85rem;
  animation: tstar-float 3.5s ease-in-out infinite;
}
.ssp-tstar-1 { top: 14%; left: 18%; animation-delay: 0s;    font-size: 0.7rem; }
.ssp-tstar-2 { top: 22%; right: 20%; animation-delay: 0.7s; font-size: 1rem; }
.ssp-tstar-3 { top: 60%; left: 12%; animation-delay: 1.3s;  font-size: 0.6rem; }
.ssp-tstar-4 { bottom: 28%; right: 15%; animation-delay: 0.4s; font-size: 0.9rem; }
.ssp-tstar-5 { bottom: 16%; left: 30%; animation-delay: 1.8s;  font-size: 0.65rem; }
@keyframes tstar-float {
  0%, 100% { transform: translateY(0) rotate(0deg);   opacity: 0.5; }
  50%       { transform: translateY(-10px) rotate(20deg); opacity: 1; }
}

/* "Scene 2 of 4" badge */
.ssp-tease-badge {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(190, 140, 255, 0.8);
  background: rgba(130, 60, 220, 0.18);
  border: 1px solid rgba(160, 90, 255, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 18px;
}

/* Main headline */
.ssp-tease-headline {
  position: relative;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  color: #f0e8ff;
  margin-bottom: 14px;
  text-shadow: 0 0 24px rgba(180, 100, 255, 0.6);
  animation: tease-headline-glow 2.4s ease-in-out infinite;
}
@keyframes tease-headline-glow {
  0%, 100% { text-shadow: 0 0 18px rgba(180, 100, 255, 0.5); }
  50%       { text-shadow: 0 0 36px rgba(200, 130, 255, 0.9), 0 0 8px rgba(255,255,255,0.2); }
}

/* Sub-text */
.ssp-tease-sub {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(210, 185, 255, 0.72);
  max-width: 200px;
  margin-bottom: 28px;
}

/* Animated arrow caret */
.ssp-tease-caret {
  position: relative;
  font-size: 1.5rem;
  color: rgba(200, 160, 255, 0.8);
  animation: tease-caret 1.2s ease-in-out infinite;
}
@keyframes tease-caret {
  0%, 100% { transform: translateX(0);   opacity: 0.6; }
  50%       { transform: translateX(8px); opacity: 1; }
}


/* ── Draw page pulse — read-aloud is active, waiting for reader ── */
@keyframes draw-page-pulse {
  0%, 100% { box-shadow: inset 0 0 0px 0px rgba(180, 100, 255, 0); }
  50%       { box-shadow: inset 0 0 30px 8px rgba(180, 100, 255, 0.28); }
}
.story-side-panel.draw-page-pulse {
  animation: draw-page-pulse 2s ease-in-out infinite;
}

/* ── TAP TO DRAW full-panel CTA ── */
.draw-tap-cta {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(10, 2, 30, 0.72);
  backdrop-filter: blur(4px);
  animation: dtc-appear 0.25s ease forwards;
}
@keyframes dtc-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Pulsing rings behind the button */
.dtc-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(200,130,255,0.4);
  animation: dtc-ring-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.dtc-ring--1 { width: 130px; height: 130px; animation-delay: 0s;    border-color: rgba(200,130,255,0.5); }
.dtc-ring--2 { width: 175px; height: 175px; animation-delay: 0.45s; border-color: rgba(125,212,248,0.35); }
.dtc-ring--3 { width: 225px; height: 225px; animation-delay: 0.9s;  border-color: rgba(200,130,255,0.2); }
@keyframes dtc-ring-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.25); opacity: 0; }
}
/* Rotating burst star */
.dtc-burst {
  position: absolute;
  font-size: 2rem;
  color: rgba(200,160,245,0.3);
  animation: dtc-burst-spin 6s linear infinite;
  pointer-events: none;
}
@keyframes dtc-burst-spin {
  from { transform: rotate(0deg) scale(4); }
  to   { transform: rotate(360deg) scale(4); }
}
/* Main body */
.dtc-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(145deg, rgba(139,92,246,0.85), rgba(109,40,217,0.9));
  border: 2px solid rgba(200,130,255,0.6);
  border-radius: 24px;
  padding: 20px 32px 16px;
  box-shadow:
    0 0 40px rgba(155,109,255,0.6),
    0 0 80px rgba(155,109,255,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
  animation: dtc-body-pump 0.9s ease-in-out infinite alternate;
}
@keyframes dtc-body-pump {
  from { transform: scale(1);    box-shadow: 0 0 40px rgba(155,109,255,0.6), 0 0 80px rgba(155,109,255,0.25); }
  to   { transform: scale(1.05); box-shadow: 0 0 55px rgba(155,109,255,0.85), 0 0 110px rgba(155,109,255,0.4); }
}
.dtc-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(220,195,255,0.75);
}
.dtc-action {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 0 20px rgba(255,255,255,0.5);
}
.dtc-counter {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 900;
  color: #c084fc;
  line-height: 1;
  text-shadow: 0 0 16px rgba(192,132,252,0.8);
  animation: dtc-tick 1s ease-in-out infinite;
}
@keyframes dtc-tick {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}
.dtc-sub {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: rgba(220,195,255,0.5);
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Keep old nudge class as no-op (for safety) */
.draw-reading-nudge { display: none; }
.drn-icon, .drn-text { display: none; }

/* ── Page nav — always docked below reader ── */
.page-nav {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 14px 14px; gap: 10px;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999; /* above everything — always visible over videos */
  /* Frosted glass bar — opaque behind buttons, fades above */
  background: linear-gradient(180deg, rgba(10,4,28,0) 0%, rgba(10,4,28,0.8) 18%, rgba(10,4,28,0.96) 50%, rgba(10,4,28,0.98) 100%);
  pointer-events: none; /* let clicks pass through transparent top gradient */
}

/* Nav buttons */
.nav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 22px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(138,110,40,0.5);
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 100%);
  backdrop-filter: var(--glass-blur);
  color: #e8d8b0; font-family: var(--font-body); font-size: 0.85rem; font-weight: 800;
  white-space: nowrap; flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: all;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.15), 0 2px 6px rgba(0,0,0,0.35);
}
.nav-btn:hover:not(:disabled) { border-color: #d4b050; color: #f5e0a0; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(220,185,90,0.3), 0 6px 24px rgba(201,168,76,0.2); }
.nav-btn:active:not(:disabled) { transform: scale(0.96); }
.nav-btn:disabled { opacity: 0.22; cursor: not-allowed; }

.next-btn {
  background: linear-gradient(150deg, #2c2050 0%, #1a1230 60%, #251d42 100%);
  border-color: #b8962e; color: #f5e0a0;
}
.next-btn:hover:not(:disabled) { background: linear-gradient(150deg, #342858 0%, #221845 100%); border-color: #e8c860; color: #fff; box-shadow: inset 0 1px 0 rgba(220,185,90,0.35), 0 0 0 2px rgba(201,168,76,0.2), 0 6px 24px rgba(201,168,76,0.25); }
.nav-btn-icon { font-size: 1.1em; }

/* Progress dots */
.nav-dots { display: flex; gap: 6px; align-items: center; flex: 1; justify-content: center; flex-wrap: wrap; pointer-events: all; }
.nav-dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: rgba(200,160,245,0.18); border: 1.5px solid rgba(200,160,245,0.2);
  cursor: pointer; flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-dot.visited  { background: rgba(200,160,245,0.3); border-color: rgba(200,160,245,0.4); }
.nav-dot.active   { width: 24px; background: linear-gradient(90deg, var(--sky), var(--teal)); border-color: var(--sky); box-shadow: 0 0 10px rgba(125,212,248,0.5); }
.nav-dot:hover    { transform: scale(1.3); }
.nav-dot.nav-dot-image { border-radius: 3px; background: rgba(248,200,130,0.2); border-color: rgba(248,200,130,0.35); }
.nav-dot.nav-dot-image.active { background: linear-gradient(90deg, #f8c882, #f8a040); border-color: #f8c882; }

/* ── End card fox video ── */
.end-fox-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.end-fox-video.active { opacity: 1; }

.end-card {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px; overflow: hidden;
  background: rgb(4,1,14);
}
.end-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(4,1,14,1) 0%,
    rgba(8,2,24,0.95) 20%,
    rgba(12,4,32,0.90) 50%,
    rgba(8,2,24,0.95) 80%,
    rgba(4,1,14,1) 100%);
  z-index: 1;
}
/* Landing-style top nav bar on end card */
.end-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,160,255,0.25), rgba(255,200,80,0.3), rgba(200,160,255,0.25), transparent);
  z-index: 4;
}
.end-card.hidden { display: none; }

.end-particles-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

.end-bg-aurora {
  display: none; /* removed — videos provide the background atmosphere */
}

.end-amb-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.end-amb {
  position: absolute; font-size: 0.65rem; color: rgba(200,160,245,0.18);
  animation: end-amb-float 9s ease-in-out infinite;
}
.ea1 { top: 8%;  left: 6%;   animation-delay: 0s;    animation-duration: 8s;   color: rgba(255,200,100,0.22); }
.ea2 { top: 18%; right: 9%;  animation-delay: 1.5s;  animation-duration: 11s;  color: rgba(200,120,255,0.20); }
.ea3 { top: 35%; left: 4%;   animation-delay: 3s;    animation-duration: 9.5s; color: rgba(120,210,255,0.20); }
.ea4 { top: 72%; right: 7%;  animation-delay: 0.8s;  animation-duration: 10s;  color: rgba(255,160,230,0.22); }
.ea5 { top: 55%; left: 91%;  animation-delay: 2.2s;  animation-duration: 7.5s; color: rgba(200,255,160,0.18); }
.ea6 { top: 86%; left: 48%;  animation-delay: 4s;    animation-duration: 12s;  color: rgba(255,200,100,0.20); }
.ea7 { top: 48%; left: 50%;  animation-delay: 5s;    animation-duration: 13s;  color: rgba(180,130,255,0.15); }
.ea8 { top: 92%; left: 18%;  animation-delay: 1.8s;  animation-duration: 9s;   color: rgba(120,210,255,0.18); }
@keyframes end-amb-float {
  0%,100% { transform: translateY(0) scale(1);       opacity: 0.18; }
  33%      { transform: translateY(-14px) scale(1.3); opacity: 0.50; }
  66%      { transform: translateY(-6px) scale(0.9);  opacity: 0.28; }
}

/* ── End card brand mark (matches landing page header) ── */
.end-brand-mark {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 14px;
  border: 1px solid rgba(200,160,255,0.15);
  border-radius: 100px;
  background: rgba(6,2,18,0.45);
  backdrop-filter: blur(8px);
  margin-bottom: -4px;
}
.end-brand-icon {
  font-size: 0.85rem;
  color: rgba(255,200,80,0.8);
  filter: drop-shadow(0 0 6px rgba(255,200,80,0.5));
}
.end-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem; font-weight: 600; font-style: italic;
  color: rgba(235,220,255,0.9);
  letter-spacing: 0.02em;
}
.end-brand-spark {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,200,80,0.65);
  margin-top: 1px;
}
.btn-mute {
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 100%);
  border: 1px solid rgba(138,110,40,0.5);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #e8d8b0;
  font-size: 0.85rem;
  transition: all 0.2s;
  flex-shrink: 0; padding: 0; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.12), 0 1px 4px rgba(0,0,0,0.3);
}
.btn-mute:hover { border-color: #d4b050; color: #f5e0a0; box-shadow: inset 0 1px 0 rgba(220,185,90,0.25), 0 4px 12px rgba(201,168,76,0.15); }
.btn-mute.muted { color: rgba(200,150,80,0.4); border-color: rgba(138,110,40,0.25); box-shadow: none; }
/* On end card the mute btn fills the space left by the hidden read button */
.end-mute-btn {
  width: 34px; height: 34px;
  font-size: 1rem;
  border-color: rgba(200,160,255,0.2);
  margin-left: 4px;
}

.end-inner {
  position: relative; z-index: 3;
  max-width: 560px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  animation: end-enter 0.75s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes end-enter {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Completion burst ── */
.end-burst-wrap {
  position: relative; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: -2px;
}
.end-burst-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(200,140,255,0.3);
  animation: end-burst-expand 3s ease-out infinite;
}
.er1 { width: 24px; height: 24px; animation-delay: 0s; }
.er2 { width: 36px; height: 36px; animation-delay: 0.6s; border-color: rgba(125,212,248,0.25); }
.er3 { width: 48px; height: 48px; animation-delay: 1.2s; border-color: rgba(255,180,80,0.20); }
@keyframes end-burst-expand {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}
.end-burst-core {
  position: relative; z-index: 2;
  font-size: 1.3rem;
  color: rgba(255,210,100,0.95);
  text-shadow: 0 0 20px rgba(255,200,80,0.9), 0 0 50px rgba(200,100,255,0.5);
  animation: end-core-pulse 2.4s ease-in-out infinite;
}
@keyframes end-core-pulse {
  0%,100% { transform: scale(1) rotate(0deg);    filter: brightness(1); }
  50%      { transform: scale(1.2) rotate(180deg); filter: brightness(1.5); }
}

/* ── Hero text ── */
.end-complete-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(255,200,80,0.7); margin-bottom: -6px;
  text-shadow: 0 0 12px rgba(255,200,80,0.3);
}
.end-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.end-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 600; font-style: italic;
  color: #f8f0ff; line-height: 1.05;
  text-shadow: 0 2px 40px rgba(200,140,255,0.55), 0 0 80px rgba(155,109,255,0.2);
  letter-spacing: -0.5px;
}
.end-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 400; font-style: italic;
  color: rgba(220,200,255,0.5); line-height: 1.6;
}

/* ── Stats strip ── */
.end-details-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%;
}
.end-detail-chip {
  flex: 1; max-width: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(155,109,255,0.20);
  border-radius: 12px; padding: 6px 6px;
  backdrop-filter: blur(8px);
}
.edc-icon { font-size: 1.1rem; line-height: 1; }
.edc-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 600;
  color: rgba(225,200,255,0.9); line-height: 1;
}
.edc-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(180,150,255,0.45);
}

/* ── CTA trio — side by side ── */
.end-cta-pair {
  width: 100%;
  display: flex; flex-direction: row; gap: 8px;
  justify-content: center;
}

.end-cta-btn {
  position: relative; overflow: hidden;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 10px;
  border-radius: 16px; border: 1.5px solid #8a6e28;
  background: linear-gradient(150deg, #2c2050 0%, #1e1538 60%, #251d42 100%);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.2), inset 0 -1px 0 rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.4);
}
/* Light sweep on both buttons */
.ect-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(108deg,
    transparent 25%, rgba(220,185,90,0.12) 48%,
    rgba(255,220,120,0.08) 52%, transparent 75%);
  transform: translateX(-120%);
  animation: ect-sweep 3.8s ease-in-out infinite;
  pointer-events: none;
}
.end-cta-btn:hover .ect-sweep,
.end-cta-btn:nth-child(2) .ect-sweep { animation-delay: 1.9s; }
@keyframes ect-sweep {
  0%,100% { transform: translateX(-120%); }
  50%,100% { transform: translateX(120%); }
}

.ect-icon {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(138,110,40,0.4);
  background: linear-gradient(145deg, #d4ad50 0%, #9a7520 50%, #705010 100%);
  box-shadow: inset 0 1px 1px rgba(255,230,140,0.3), 0 2px 6px rgba(0,0,0,0.4);
}
.ect-body {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ect-headline {
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem; font-weight: 800;
  color: #f5e0a0; letter-spacing: 0.1px;
}
.ect-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem; font-weight: 500;
  color: #b09050; letter-spacing: 0.2px;
}
.ect-arrow {
  display: none;
}
.ect-badge {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.48rem; font-weight: 900;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(200,255,160,0.95);
  background: rgba(100,220,70,0.16);
  border: 1px solid rgba(140,255,100,0.30);
  border-radius: 6px; padding: 3px 6px;
}

/* New Story — brass accent, slightly brighter gold border */
.end-cta-new {
  border-color: #b8962e;
}
.end-cta-new:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: #e8c860;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.4), 0 0 0 3px rgba(201,168,76,0.25), 0 8px 32px rgba(201,168,76,0.25);
}
.end-cta-new:active { transform: translateY(-1px) scale(1.005); }

/* Save button — brass */
.end-cta-save { }
.end-cta-save:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: #e8c860;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.4), 0 0 0 3px rgba(201,168,76,0.25), 0 8px 32px rgba(201,168,76,0.25);
}
.end-cta-save:active { transform: translateY(-1px) scale(1.005); }

/* Re-Read button — brass */
.end-cta-reread { }
.end-cta-reread:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: #e8c860;
  box-shadow: inset 0 1px 0 rgba(220,185,90,0.4), 0 0 0 3px rgba(201,168,76,0.25), 0 8px 32px rgba(201,168,76,0.25);
}
.end-cta-reread:active { transform: translateY(-1px) scale(1.005); }

/* Warning that unsaved story is lost — above CTA buttons */
.end-story-warning {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  color: rgba(255,210,120,0.9);
  background: linear-gradient(135deg, rgba(255,180,50,0.10), rgba(255,140,40,0.06));
  border: 1px solid rgba(255,180,50,0.22);
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  line-height: 1.4;
  max-width: 400px;
  backdrop-filter: blur(4px);
  animation: end-warn-pulse 3.5s ease-in-out infinite;
}
@keyframes end-warn-pulse {
  0%, 100% { border-color: rgba(255,180,50,0.22); box-shadow: 0 0 0 rgba(255,180,50,0); }
  50% { border-color: rgba(255,180,50,0.45); box-shadow: 0 0 16px rgba(255,180,50,0.08); }
}

.end-pdf-status {
  font-family: 'DM Sans', sans-serif; font-size: 0.7rem;
  color: rgba(200,170,255,0.5); min-height: 1rem; font-style: italic;
}
.end-ios-tip {
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem;
  color: rgba(255,220,120,0.85);
  background: rgba(255,200,50,0.08);
  border: 1px solid rgba(255,200,50,0.2);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.5;
  text-align: center;
  max-width: 320px;
}
.end-ios-tip strong { color: #ffe066; }
.end-footer {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 0.75rem; color: rgba(180,150,255,0.28);
  letter-spacing: 1px; margin-top: -4px;
}




/* ══════════════════════════════════════════════════════════
   OPENING OVERLAY — shown on Begin tap while decode runs
   Never lets the child see a blank frozen screen
══════════════════════════════════════════════════════════ */
.opening-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(6, 2, 20, 0.92);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
.opening-overlay.hidden { display: none; }

.opening-inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center; padding: 40px;
}
.opening-sparkle {
  font-size: 3rem; line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(240,200,80,0.9), 0 0 60px rgba(200,150,40,0.5);
  animation: opening-spin 4s linear infinite;
}
@keyframes opening-spin {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.8; }
  25%  { transform: rotate(90deg)  scale(1.25); opacity: 1;   }
  50%  { transform: rotate(180deg) scale(1);    opacity: 0.8; }
  75%  { transform: rotate(270deg) scale(1.25); opacity: 1;   }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.8; }
}
.opening-text {
  font-family: var(--font-display);
  font-size: 1.5rem; font-style: italic; font-weight: 300;
  color: rgba(240, 220, 255, 0.95);
  text-shadow: 0 0 20px rgba(180, 120, 255, 0.7);
  min-height: 2rem;
  animation: opening-txt-fade 0.5s ease;
}
@keyframes opening-txt-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.opening-dots {
  display: flex; gap: 10px; align-items: center;
}
.opening-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
  animation: opening-dot-pulse 1.4s ease-in-out infinite;
}
.opening-dots span:nth-child(1) { animation-delay: 0s;    background: #c084fc; box-shadow: 0 0 8px #c084fc; }
.opening-dots span:nth-child(2) { animation-delay: 0.22s; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.opening-dots span:nth-child(3) { animation-delay: 0.44s; background: #7dd4f8; box-shadow: 0 0 8px #7dd4f8; }
@keyframes opening-dot-pulse {
  0%,80%,100% { transform: scale(0.65); opacity: 0.35; }
  40%          { transform: scale(1.4);  opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Desktop ── */
@media (min-width: 900px) {
  #screen-story { padding: 0; }
  .page-view { padding: 0; }
  .story-reader { border-radius: 0; }
  .page-nav { padding: 12px 28px 16px; }

  /* Desktop font scaling */
  .age-6 .page-text { font-size: clamp(1.2rem, 2.3vw, 1.5rem); line-height: 2.05; }
  .age-7 .page-text { font-size: clamp(1.0rem, 1.8vw, 1.3rem); line-height: 1.95; }
}

/* ── Tablet ── */
@media (min-width: 600px) and (max-width: 899px) {
  .story-side-panel { width: 44%; min-width: 240px; }
  .persistent-leaves-host { width: 44%; min-width: 240px; }
  .stp-inner { padding: 22px 20px 56px 24px; } /* extra bottom for floating nav */
  .page-nav { padding: 10px 10px 14px; }
  .ssp-vid-pool { width: 44%; min-width: 240px; }
  .nav-btn  { padding: 9px 16px; font-size: 0.82rem; }
}

/* ── Mobile: stack vertically — side panel collapses to bottom strip ── */
@media (max-width: 599px) {
  /* Cover card — compact on mobile so button stays in view */
  .cover-inner {
    padding: 28px 20px 24px;
    gap: 10px;
    max-width: 100%;
  }
  /* Reduce float travel on small screens */
  @keyframes coverFloat {
    0%   { transform: translate(0px,   0px); }
    15%  { transform: translate(30px, -20px); }
    30%  { transform: translate(-25px, -35px); }
    45%  { transform: translate(-35px,  15px); }
    60%  { transform: translate(12px,   35px); }
    75%  { transform: translate(35px,  -10px); }
    90%  { transform: translate(-15px, -20px); }
    100% { transform: translate(0px,   0px); }
  }
  #screen-spark {
    padding: max(20px, env(safe-area-inset-top, 0px) + 20px) 10px 48px;
  }


  .story-reader { flex-direction: column; border-radius: 16px; gap: 0; }
  .story-text-panel { flex: 1; min-height: 0; height: 0; margin: 0; } /* iOS: height:0 makes flex child scrollable */
  .story-text-panel::after { display: none; } /* remove right-edge shadow on mobile — it's vertical now */
  .story-side-panel {
    width: 100%; max-width: none; min-width: unset;
    /* Match 3:2 video — use aspect-ratio so panel always fits video exactly */
    aspect-ratio: 3 / 2;
    height: auto;
    max-height: 50vh;
    flex-shrink: 0;
    flex-direction: row;
    margin: 0; padding: 0;
  }
  /* Hide ornamental edges on mobile — they create gaps in vertical layout */
  .story-side-panel::before { display: none; }
  .story-side-panel::after { display: none; }
  .persistent-leaves-host {
    width: 100%; max-width: none; min-width: unset;
    right: 0; bottom: 0; left: 0;
    top: auto;
    height: 350px; /* extends above the side panel */
    z-index: 1; /* behind story text panel, in front of side panel background */
  }
  /* On draw pages the side panel shows full-screen overlay — handled by JS */
  .story-side-panel.draw-active {
    height: 100%;
    position: absolute; inset: 0;
    z-index: 50;
  }
  .stp-inner { padding: 16px 18px 56px 20px; } /* extra bottom for floating nav */
  .page-text { font-size: 1.0rem; line-height: 1.8; }
  .story-text-panel::before { display: none; }
  /* Mobile: video pool sits above nav bar, matches story box width */
  .ssp-vid-pool {
    top: auto; bottom: 52px;
    left: 8px; right: 8px;  /* match .page-view padding */
    width: auto; max-width: none; min-width: unset;
    aspect-ratio: 3 / 2;
    height: auto;
    max-height: 50vh;
    border-radius: 0 0 16px 16px; /* match story-reader bottom corners */
  }

  .page-view { padding: 6px 8px 0; }
  .page-nav  { padding: 8px 6px 12px; }
  .nav-btn   { padding: 9px 14px; font-size: 0.78rem; }
  .nav-dot   { width: 6px; height: 6px; }
  .nav-dot.active { width: 20px; }

  .spark-inner  { padding: 60px 14px 36px; gap: 16px; }
  .spark-title-luminara { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .spark-title-spark    { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .spark-logo-stars     { display: none; }  /* hide decorative stars on small mobile */
  .hero-features        { gap: 6px; max-width: 100%; }
  .hf-card              { padding: 5px 10px 5px 8px; }
  .hf-icon              { font-size: 0.85rem; }
  .hf-text              { font-size: 0.68rem; }
  .mood-grid    { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mood-btn     { padding: 10px 12px; gap: 10px; }
  .mood-emoji   { width: 38px; height: 38px; border-radius: 10px; font-size: 1.15rem; }
  .mood-name    { font-size: 0.76rem; }
  .mood-desc    { display: none; }
  .spark-btn    { font-size: 1.2rem; }
  .cover-inner  { padding: 30px 18px 26px; }

  /* End card — compact for mobile, no scroll */
  .end-card { padding: 8px 12px; }
  .end-inner { gap: 6px; max-width: 100%; }
  .end-burst-wrap { width: 36px; height: 36px; }
  .er1 { width: 18px; height: 18px; }
  .er2 { width: 27px; height: 27px; }
  .er3 { width: 36px; height: 36px; }
  .end-burst-core { font-size: 1rem; }
  .end-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .end-cta-pair { gap: 6px; }
  .end-cta-btn { padding: 10px 6px; border-radius: 14px; }
  .ect-icon { width: 32px; height: 32px; font-size: 1.1rem; border-radius: 10px; }
  .ect-headline { font-size: 0.72rem; }
  .ect-sub { display: none; }
  .ect-badge { font-size: 0.44rem; padding: 2px 5px; }
  .end-story-warning { font-size: 0.6rem; padding: 4px 10px; }
  .end-detail-chip { padding: 4px 4px; border-radius: 10px; }
  .edc-val { font-size: 1.1rem; }
  .edc-icon { font-size: 0.9rem; }
  .end-footer { font-size: 0.65rem; }
}

.mode-panel { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 5; }
.mode-panel-hidden { display: none; }


/* ── Narrator picker ──────────────────────────────────────────────────────── */
.read-aloud-wrap {
  position: relative;
  display: flex; align-items: center; gap: 6px;
}
/* Hide read/narrator controls while cover is showing (cover now lives in screen-gen) */
#screen-gen:has(.story-cover:not(.hidden)) ~ #screen-story .read-aloud-wrap {
  visibility: hidden;
  pointer-events: none;
}

/* Speed slider */
.speed-wrap {
  display: flex; align-items: center; gap: 5px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.speed-wrap.visible {
  opacity: 1; pointer-events: auto;
}
.speed-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 72px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  outline: none; cursor: pointer;
}
.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold, #f0c840);
  box-shadow: 0 0 6px rgba(240,200,64,0.5);
  cursor: pointer;
}
.speed-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: var(--gold, #f0c840);
  box-shadow: 0 0 6px rgba(240,200,64,0.5);
  cursor: pointer;
}
.speed-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,218,120,0.9);
  min-width: 22px; text-align: left;
  letter-spacing: 0.02em;
}

.btn-narrator {
  padding: 7px 10px;
  min-width: unset;
  font-size: 1rem;
  line-height: 1;
}

.narrator-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: 220px;
  background: rgba(14,6,32,0.97);
  border: 1.5px solid rgba(138,110,40,0.5);
  border-radius: 14px;
  padding: 12px 10px;
  backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.narrator-popover-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--text-mist);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.7;
}

.narrator-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.narrator-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text-mist);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.narrator-option:hover {
  background: rgba(200,160,245,0.1);
  border-color: rgba(200,160,245,0.2);
  color: var(--mist);
}
.narrator-option.selected {
  background: rgba(200,160,245,0.15);
  border-color: rgba(200,160,245,0.45);
  color: var(--lilac);
}
.narrator-avatar-lg { font-size: 1.3rem; line-height: 1; }
.narrator-info { display: flex; flex-direction: column; gap: 1px; }
.narrator-name { font-size: 0.82rem; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.narrator-desc { font-size: 0.68rem; opacity: 0.6; font-weight: 500; }
.narrator-hd-badge {
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.08em;
  background: linear-gradient(135deg, #1a73e8, #34a853);
  color: #fff; padding: 1px 5px; border-radius: 4px;
  line-height: 1.4; vertical-align: middle; flex-shrink: 0;
}



.book-page-left {
  background: linear-gradient(160deg, #fefcff 0%, #f8f2ff 45%, #f0e9fc 100%);
  box-shadow: inset -2px 0 8px rgba(100,60,180,0.06);
}



/* ═══════════════════════════════════════════════════════════
   MAGICAL CRAFTING PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */

.craft-progress-wrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.craft-progress-wrap.done {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.craft-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(200, 160, 255, 0.15);
  border-radius: 99px;
  overflow: visible;
  box-shadow: 0 0 12px rgba(155, 109, 255, 0.15);
}

.craft-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #9b6dff, #7dd4f8, #f8e87a, #9b6dff);
  background-size: 200% 100%;
  animation: bar-shimmer 2.5s linear infinite;
  /* Slow ease: real value transitions smoothly. Never looks frozen. */
  transition: width 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 0 10px rgba(155, 109, 255, 0.6), 0 0 24px rgba(125, 212, 248, 0.3);
}
/* When bar hasn't moved in a while, a subtle pulse shows it's still alive */
.craft-progress-bar.stalled {
  animation: bar-shimmer 2.5s linear infinite, bar-breathe 2s ease-in-out infinite;
}
@keyframes bar-breathe {
  0%,100% { box-shadow: 0 0 10px rgba(155,109,255,0.6), 0 0 24px rgba(125,212,248,0.3); }
  50%      { box-shadow: 0 0 20px rgba(155,109,255,1.0), 0 0 44px rgba(125,212,248,0.7); }
}

@keyframes bar-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Particles container — dots float up along the bar */
.craft-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.craft-particle {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  bottom: 50%;
  transform: translateY(50%);
  opacity: 0;
  --drift: 0px;
  animation: particle-float 2.2s ease-out forwards;
}
/* Star-shaped particles */
.craft-particle-star {
  border-radius: 1px;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

@keyframes particle-float {
  0%   { opacity: 0;   transform: translate(0, 0)                    scale(0.4) rotate(0deg); }
  15%  { opacity: 1;   transform: translate(calc(var(--drift)*0.3), -8px)  scale(1.1) rotate(45deg); }
  60%  { opacity: 0.7; transform: translate(calc(var(--drift)*0.7), -24px) scale(0.9) rotate(120deg); }
  100% { opacity: 0;   transform: translate(var(--drift), -42px)          scale(0.3) rotate(180deg); }
}

.craft-progress-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--text-mist);
  opacity: 0.75;
  text-align: center;
  animation: label-pulse 3s ease-in-out infinite;
}

@keyframes label-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.9; }
}

/* ── Cover button states ── */
.cover-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none !important;
  box-shadow: none !important;
}

.cover-btn:disabled .spark-btn-shine { display: none; }

/* Ready state — pulses gold */
.cover-btn.story-ready {
  animation: btn-ready-pulse 1.4s ease-in-out infinite;
}

.cover-btn.story-ready-pulse {
  animation: btn-ready-pulse 0.6s ease-in-out 3;
}

@keyframes btn-ready-pulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(220,185,90,0.25), 0 0 0 0 rgba(201,168,76,0),
                0 4px 20px rgba(201,168,76,0.3);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(220,185,90,0.4), 0 0 0 12px rgba(201,168,76,0.2),
                0 8px 40px rgba(201,168,76,0.45);
  }
}

/* Loading voices progress — shown during audio preload phase */
.craft-progress-label.voices-loading {
  color: #c084fc;
  font-weight: 600;
}

/* ── Narrator Voice Badge ── */
.narrator-voice-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(100, 70, 180, 0.38);
  border: 1.5px solid rgba(180, 140, 255, 0.55);
  border-radius: 40px;
  padding: 10px 18px 10px 13px;
  margin-bottom: 4px;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  animation: badge-appear 0.5s ease-out;
  box-shadow: 0 2px 16px rgba(120, 80, 220, 0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}

.narrator-voice-badge.hidden { display: none; }

.narrator-voice-badge.voice-ready {
  background: rgba(200, 160, 40, 0.22);
  border-color: rgba(248, 220, 100, 0.65);
  box-shadow: 0 2px 20px rgba(220, 180, 60, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

@keyframes badge-appear {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.nvb-emoji {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(180,140,255,0.6));
}

.narrator-voice-badge.voice-ready .nvb-emoji {
  filter: drop-shadow(0 0 6px rgba(248,220,100,0.6));
}

.nvb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nvb-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 1px 8px rgba(180,140,255,0.5);
}

.narrator-voice-badge.voice-ready .nvb-name {
  color: var(--gold);
  text-shadow: 0 1px 8px rgba(248,220,100,0.45);
}

.nvb-status {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: rgba(220, 200, 255, 0.92);
  letter-spacing: 0.4px;
  opacity: 1;
}

.narrator-voice-badge.voice-ready .nvb-status {
  color: rgba(248, 232, 160, 0.9);
}

/* Animated waveform bars */
.nvb-waves {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  margin-left: 6px;
}

.nvb-bar {
  width: 3.5px;
  border-radius: 2px;
  background: rgba(180, 140, 255, 0.9);
  animation: nvb-wave 1.1s ease-in-out infinite;
  transform-origin: bottom;
  box-shadow: 0 0 4px rgba(180,140,255,0.5);
}

.narrator-voice-badge.voice-ready .nvb-bar {
  background: var(--gold);
  box-shadow: 0 0 4px rgba(248,220,100,0.5);
  animation: none;
  height: 4px !important;
}

.nvb-bar:nth-child(1) { animation-delay: 0s;    height: 8px;  }
.nvb-bar:nth-child(2) { animation-delay: 0.15s; height: 14px; }
.nvb-bar:nth-child(3) { animation-delay: 0.3s;  height: 20px; }
.nvb-bar:nth-child(4) { animation-delay: 0.15s; height: 14px; }
.nvb-bar:nth-child(5) { animation-delay: 0s;    height: 8px;  }

@keyframes nvb-wave {
  0%, 100% { transform: scaleY(0.3);  opacity: 0.55; }
  50%       { transform: scaleY(1.0); opacity: 1.0;  }
}

/* Chapter counter (e.g. "4 of 9 chapters ready") */
.nvb-chapter-counter {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 1px;
  color: rgba(200, 180, 255, 0.85);
  opacity: 1;
  text-align: center;
  margin-top: -2px;
}
.nvb-chapter-counter.hidden { display: none; }

/* Completion burst */
.craft-progress-wrap.burst .craft-progress-bar {
  box-shadow: 0 0 24px rgba(248, 232, 122, 0.9), 0 0 48px rgba(155, 109, 255, 0.6);
}



/* ═══════════════════════════════════════════════════════════
   AGE SELECT DROPDOWN
   ═══════════════════════════════════════════════════════════ */
.age-select {
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #f0e8ff;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c4a8ff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.age-select:focus {
  outline: none;
  border-color: rgba(196,168,255,0.5);
  background-color: rgba(255,255,255,0.12);
}
.age-select option {
  background: #1a0050;
  color: #f0e8ff;
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT PANEL — age 6 right page (no image)
   ═══════════════════════════════════════════════════════════ */
.ambient-panel {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 40%, rgba(120,60,220,0.18) 0%, transparent 70%);
  border-radius: 0 16px 16px 0;
  position: relative;
  overflow: hidden;
}
.ambient-motif {
  font-size: 4rem;
  opacity: 0.55;
  animation: ambientFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(196,168,255,0.4));
}
.ambient-motif-lg {
  font-size: 10rem;
  opacity: 0.08;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  animation: ambientFloat 6s ease-in-out infinite reverse;
}
@keyframes ambientFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.ambient-motif-lg {
  transform: translate(-50%,-50%) !important;
  animation-name: ambientFloatLg;
}
@keyframes ambientFloatLg {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%      { transform: translate(-50%,-52%) scale(1.04); }
}

/* ═══════════════════════════════════════════════════════════
   READER IMAGE PANEL — ages 7-10 image pages
   ═══════════════════════════════════════════════════════════ */
.reader-image-panel {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 0;
}
.reader-image-inner {
  padding: 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  height: 100%;
}
.reader-panel-header { text-align: center; }
.reader-panel-icon { font-size: 2rem; display: block; margin-bottom: 0.3rem; }
.reader-panel-title {
  font-size: 1.1rem; font-weight: 700;
  color: #e8d8ff; margin: 0 0 0.25rem;
}
.reader-panel-subtitle {
  font-size: 0.8rem; color: rgba(220,190,255,0.7);
  margin: 0;
}
.reader-tips {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(196,168,255,0.15);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}
.reader-tips-title {
  font-size: 0.78rem; font-weight: 700;
  color: #c4a8ff; margin: 0 0 0.4rem;
}
.reader-tips-list {
  margin: 0; padding-left: 1.2rem;
  font-size: 0.75rem; color: rgba(220,190,255,0.85);
  line-height: 1.6;
}
.reader-input-row { display: flex; flex-direction: column; }
.reader-prompt-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(196,168,255,0.25);
  border-radius: 10px;
  color: #f0e8ff;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.65rem 0.85rem;
  resize: none;
  transition: border-color 0.2s;
}
.reader-prompt-input:focus {
  outline: none;
  border-color: rgba(196,168,255,0.6);
  background: rgba(255,255,255,0.1);
}
.reader-prompt-input::placeholder { color: rgba(196,168,255,0.4); }
.reader-btn-row {
  display: flex; gap: 0.6rem; align-items: center;
}
.reader-generate-btn {
  flex: 1;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #fff; border: none; border-radius: 10px;
  padding: 0.65rem 1rem;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.reader-generate-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.reader-generate-btn:active { transform: scale(0.97); }
.reader-skip-btn {
  background: transparent; border: 1.5px solid rgba(196,168,255,0.25);
  border-radius: 10px; color: rgba(196,168,255,0.6);
  font-family: inherit; font-size: 0.78rem;
  padding: 0.65rem 0.9rem; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.reader-skip-btn:hover { border-color: rgba(196,168,255,0.5); color: rgba(196,168,255,0.9); }
.reader-img-loading {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; color: rgba(196,168,255,0.7);
  padding: 0.5rem 0;
}
.reader-img-error { font-size: 0.78rem; color: #ff8a9a; margin: 0; }
.reader-img-result {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem; padding: 0.8rem;
  height: 100%;
}
.reader-img-display {
  width: 100%; max-width: 380px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.reader-img-redo-btn {
  background: transparent; border: 1.5px solid rgba(196,168,255,0.3);
  border-radius: 8px; color: rgba(196,168,255,0.8);
  font-family: inherit; font-size: 0.8rem;
  padding: 0.4rem 0.9rem; cursor: pointer;
  transition: all 0.2s;
}
.reader-img-redo-btn:hover { background: rgba(196,168,255,0.1); }

/* .image-page-hint defined near .page-text above */

/* ═══════════════════════════════════════════════════════════
   QUIZ PANEL — age 6, last page
   Right page is LIGHT (lavender) — all colors must be dark-on-light
   ═══════════════════════════════════════════════════════════ */
.quiz-panel {
  width: 100%; height: 100%;
  padding: 1rem 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  overflow-y: auto; box-sizing: border-box;
  background: linear-gradient(160deg, #1a0040 0%, #2d0060 50%, #1a0040 100%);
  position: relative;
}

/* Sparkle stars in background */
.quiz-panel::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,220,100,0.7) 1px, transparent 1px),
    radial-gradient(circle, rgba(200,160,255,0.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 40px 40px, 65px 65px, 55px 55px;
  background-position: 8px 8px, 30px 20px, 50px 35px;
  z-index: 0;
}

.quiz-panel > * { position: relative; z-index: 1; }

.quiz-header { text-align: center; }

.quiz-icon {
  font-size: 2.4rem; display: block;
  margin-bottom: 0.15rem;
  animation: quiz-bounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,220,100,0.8));
}

@keyframes quiz-bounce {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.08); }
}

.quiz-title {
  font-size: 1.15rem; font-weight: 900;
  color: #ffe066;
  margin: 0 0 0.2rem;
  text-shadow: 0 0 12px rgba(255,200,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
}

.quiz-subtitle {
  font-size: 0.75rem;
  color: rgba(200,170,255,0.9);
  margin: 0; line-height: 1.4;
}

.quiz-questions { display: flex; flex-direction: column; gap: 0.45rem; }

.quiz-question-row { display: flex; flex-direction: column; gap: 0.2rem; }

.quiz-label {
  font-size: 0.72rem;
  color: #c8a0ff;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.quiz-input {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(180,130,255,0.4);
  border-radius: 10px;
  color: #fff;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.7rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.quiz-input:focus {
  border-color: rgba(255,220,100,0.7);
  box-shadow: 0 0 0 3px rgba(255,200,0,0.15);
  background: rgba(255,255,255,0.15);
}
.quiz-input::placeholder { color: rgba(180,140,255,0.45); font-style: italic; }

.quiz-btn-row { display: flex; gap: 0.5rem; margin-top: 0.15rem; }

.quiz-result-img-wrap { display: flex; justify-content: center; }
.quiz-result-caption {
  text-align: center; font-size: 0.82rem;
  color: #c8a0ff; font-style: italic; margin: 0;
}

/* BIG glowing generate button */
.quiz-generate-btn {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b, #f97316, #ec4899);
  color: #fff;
  border: none; border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(245,158,11,0.5), 0 0 30px rgba(245,158,11,0.2);
  letter-spacing: 0.3px;
  animation: quiz-btn-pulse 2.5s ease-in-out infinite;
}
@keyframes quiz-btn-pulse {
  0%,100% { box-shadow: 0 4px 18px rgba(245,158,11,0.5), 0 0 30px rgba(245,158,11,0.2); }
  50%      { box-shadow: 0 6px 28px rgba(245,158,11,0.75), 0 0 50px rgba(245,158,11,0.35); }
}
.quiz-generate-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(245,158,11,0.7);
  animation: none;
}
.quiz-skip-btn {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(180,130,255,0.3);
  border-radius: 12px; color: rgba(180,150,255,0.7);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  padding: 10px 12px; cursor: pointer; transition: all 0.2s;
}
.quiz-skip-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(180,130,255,0.6); color: #fff; }


/* Shake animation for empty inputs */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.shake { animation: shake 0.4s ease; }

/* ═══════════════════════════════════════════════════════════
   DRAW PANEL — "Your Turn to Draw" (redesigned v6b)
   Dark canvas aesthetic, crystal clear, maximum impact
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   DRAW PANEL — "Your Turn to Draw" — the magic moment
   THIS IS THE COOL FACTOR. Light canvas, big type, unmissable.
   ═══════════════════════════════════════════════════════════ */

/* Base: cream-white canvas that fills the right page */
/* ══════════════════════════════════════════════════════════
   DRAW PANEL — completely reimagined visual system
   Goal: feels like stepping into a studio / magic workshop
══════════════════════════════════════════════════════════ */

.draw-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #120630 0%, #1e0850 40%, #160840 100%);
  overflow: hidden;
  position: relative;
  gap: 0;
  padding: 0;
}

/* Layered cosmic background glow */
.draw-panel::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(155,109,255,0.22) 0%,
    rgba(125,212,248,0.08) 45%,
    transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
  animation: dp-glow-pulse 5s ease-in-out infinite;
}
.draw-panel::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,160,220,0.10) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
@keyframes dp-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Content wrapper — fills panel, centered, scrollable */
.draw-panel-inner {
  position: relative; z-index: 1;
  width: 100%;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 14px 14px 12px;
  gap: 9px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start; /* always top-aligned so result + next button are reachable */
  min-height: 0;
}

/* ── TOP ZONE: identity strip ── */
.draw-header {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(155,109,255,0.18);
}
.draw-header-glow { display: none; }

.draw-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(200,160,255,0.9);
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(155,109,255,0.3);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 8px;
}

.draw-headline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: #f0e8ff;
  line-height: 1.1;
  margin: 0 0 4px;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(180,120,255,0.5);
}
.draw-headline-accent {
  font-style: italic;
  color: #c084fc;
}
.draw-subhead {
  font-family: var(--font-body);
  font-size: 0.73rem;
  font-weight: 500;
  color: rgba(200,170,255,0.65);
  margin: 0;
  line-height: 1.4;
}

/* ── TIP CARDS ── */
.draw-tips-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
}
.draw-tip-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(155,109,255,0.18);
  border-radius: 8px;
  padding: 6px 8px;
  transition: background 0.2s, border-color 0.2s;
  cursor: default;
}
.draw-tip-pill:hover {
  background: rgba(155,109,255,0.12);
  border-color: rgba(155,109,255,0.35);
}
.draw-tip-icon { font-size: 0.9rem; line-height: 1; flex-shrink: 0; }
.draw-tip-text {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(210,185,255,0.8);
  line-height: 1.3;
}

/* ── TEXTAREA ZONE ── */
.draw-canvas-zone { width: 100%; }
.draw-canvas-border {
  border: 1.5px solid rgba(155,109,255,0.3);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.draw-canvas-border:focus-within {
  border-color: rgba(200,130,255,0.6);
  box-shadow: 0 0 0 3px rgba(155,109,255,0.15), 0 0 20px rgba(155,109,255,0.12);
}
.draw-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #e8d5ff;
  line-height: 1.55;
  box-sizing: border-box;
  caret-color: #c084fc;
}
.draw-textarea::placeholder { color: rgba(200,170,255,0.35); }
.draw-canvas-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 12px 8px;
}
.draw-charcount {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: rgba(200,170,255,0.4);
}
.draw-error-msg { font-size: 0.7rem; color: #ff8a9a; }

/* ── STYLE PICKER ── */
.draw-style-row {
  width: 100%;
  display: flex; flex-direction: column; gap: 6px;
}
.draw-style-label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(200,160,255,0.6);
  padding-left: 2px;
}
.draw-style-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.draw-style-pill {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(155,109,255,0.2);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.18s;
  color: rgba(200,170,255,0.75);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
}
.draw-style-pill:hover {
  background: rgba(155,109,255,0.15);
  border-color: rgba(200,130,255,0.45);
  color: #e8d5ff;
  transform: translateY(-1px);
}
.draw-style-pill.selected {
  background: linear-gradient(135deg, rgba(155,109,255,0.35), rgba(200,130,255,0.25));
  border-color: rgba(200,130,255,0.7);
  color: #f0e8ff;
  box-shadow: 0 0 12px rgba(155,109,255,0.25);
}
.dsp-emoji { font-size: 0.85rem; }
.dsp-name  { font-size: 0.63rem; }

/* ── ACTION ROW ── */
.draw-action-row {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
}

.draw-create-btn {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #9333ea, #a855f7);
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  color: white;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(139,92,246,0.45);
  letter-spacing: 0.3px;
}
.draw-create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139,92,246,0.6);
}
.draw-create-btn:active { transform: translateY(0); }
.draw-create-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: shimmer-sweep 3s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0%   { transform: translateX(-100%); }
  40%, 100% { transform: translateX(200%); }
}
.draw-create-icon  { font-size: 1rem; }
.draw-create-label { font-size: 0.82rem; }

.draw-skip-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid rgba(155,109,255,0.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(200,170,255,0.6);
  cursor: pointer;
  transition: all 0.15s;
}
.draw-skip-btn:hover {
  border-color: rgba(200,130,255,0.4);
  color: rgba(220,190,255,0.85);
}

/* ── LOADING STATE ── */
.draw-panel--loading {
  align-items: center;
  justify-content: center;
}
.draw-loading-cosmos {
  position: relative;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.draw-loading-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: ring-spin 2s linear infinite;
}
.draw-loading-ring--1 { width: 90px; height: 90px; border-top-color: rgba(200,130,255,0.8); animation-duration: 1.8s; }
.draw-loading-ring--2 { width: 66px; height: 66px; border-right-color: rgba(125,212,248,0.6); animation-duration: 2.4s; animation-direction: reverse; }
.draw-loading-ring--3 { width: 44px; height: 44px; border-bottom-color: rgba(255,160,220,0.5); animation-duration: 1.5s; }
@keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.draw-loading-spark {
  font-size: 1.4rem;
  color: rgba(200,160,245,0.9);
  filter: drop-shadow(0 0 8px rgba(200,160,245,0.8));
  animation: orb-breathe 1.2s ease-in-out infinite;
  z-index: 1;
}
.draw-loading-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: rgba(220,195,255,0.9);
  text-align: center;
  margin: 0 0 4px;
}
.draw-loading-sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(180,150,255,0.55);
  text-align: center;
  margin: 0;
}

/* ── RESULT STATE ── */
.draw-result-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  position: relative; z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

/* Full-bleed result layout — image fills the panel, badge + redo float over it */
.draw-panel--result {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  justify-content: stretch;
}
.draw-result-fill {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* push image below brand bar */
  margin-top: 36px;
}
.draw-result-fullimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.draw-result-fullimg.draw-result-img--fadein {
  animation: img-reveal 0.8s ease forwards;
}
.draw-result-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(10,2,30,0.85) 0%, transparent 100%);
  gap: 8px;
}
.draw-result-overlay .draw-result-badge {
  font-size: 0.58rem;
  color: rgba(200,160,255,0.85);
  letter-spacing: 1.5px;
}
.draw-result-overlay .draw-redo-btn {
  padding: 6px 12px;
  font-size: 0.68rem;
}
.draw-result-img-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(200,130,255,0.25), 0 8px 30px rgba(0,0,0,0.5);
  line-height: 0; /* removes phantom gap below img */
}
.reader-img-display {
  width: 100%;
  height: auto;   /* natural aspect ratio — no janky empty border */
  display: block;
  border-radius: 12px;
}
.draw-result-img--fadein {
  animation: img-reveal 0.8s ease forwards;
}
@keyframes img-reveal {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.reader-img-error { font-size: 0.75rem; color: #ff8a9a; text-align: center; margin: 0; }
.draw-result-badge {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(200,160,255,0.7);
}
.draw-result-actions {
  display: flex; gap: 8px; width: 100%; justify-content: center;
}
.draw-redo-btn {
  background: rgba(155,109,255,0.15);
  border: 1.5px solid rgba(155,109,255,0.3);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(210,185,255,0.85);
  cursor: pointer;
  transition: all 0.15s;
}
.draw-redo-btn:hover { background: rgba(155,109,255,0.25); border-color: rgba(200,130,255,0.5); }
.btn-disabled { opacity: 0.35; pointer-events: none; cursor: not-allowed; }

/* ── QUIZ PANEL (ages 7+) — bubbly cosmic pop ── */
.quiz-panel {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 16px 14px 12px;
  gap: 9px;
  position: relative; z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  min-height: 0;
}
/* Floating orbs behind content */
.quiz-panel::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle 60px at 15% 20%, rgba(255,200,80,0.12) 0%, transparent 70%),
    radial-gradient(circle 80px at 85% 70%, rgba(200,100,255,0.15) 0%, transparent 70%),
    radial-gradient(circle 50px at 50% 90%, rgba(100,200,255,0.10) 0%, transparent 70%);
}
.quiz-panel > * { position: relative; z-index: 1; }
.quiz-header { text-align: center; }
.quiz-icon {
  font-size: 2.2rem; display: block; margin-bottom: 4px;
  animation: quiz-bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,210,80,0.7));
}
@keyframes quiz-bounce {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.quiz-title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 900;
  color: #ffe066;
  margin: 0 0 3px;
  text-shadow: 0 0 20px rgba(255,200,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}
.quiz-subtitle {
  font-family: var(--font-body);
  font-size: 0.71rem;
  color: rgba(210,180,255,0.85);
  margin: 0; line-height: 1.45;
}
.quiz-questions { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.quiz-question-row { display: flex; flex-direction: column; gap: 3px; }
.quiz-label {
  font-family: var(--font-body);
  font-size: 0.67rem; font-weight: 800;
  color: #c8a0ff;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.quiz-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(180,130,255,0.3);
  border-radius: 10px;
  padding: 7px 10px;
  font-family: var(--font-body); font-size: 0.75rem;
  color: #f0e0ff; outline: none;
  box-sizing: border-box; caret-color: #ffe066;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.quiz-input:focus {
  border-color: rgba(255,220,80,0.6);
  box-shadow: 0 0 0 3px rgba(255,200,0,0.12);
  background: rgba(255,255,255,0.12);
}
.quiz-input::placeholder { color: rgba(180,140,255,0.35); font-style: italic; }
.quiz-btn-row { display: flex; gap: 8px; width: 100%; margin-top: 2px; }
.quiz-generate-btn {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ec4899 100%);
  border: none; border-radius: 12px;
  padding: 11px 14px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 900;
  color: white; cursor: pointer; letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(245,158,11,0.5), 0 0 35px rgba(245,158,11,0.2);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: quiz-btn-glow 2.5s ease-in-out infinite;
}
@keyframes quiz-btn-glow {
  0%,100% { box-shadow: 0 4px 20px rgba(245,158,11,0.5), 0 0 35px rgba(245,158,11,0.2); }
  50%      { box-shadow: 0 6px 30px rgba(245,158,11,0.75), 0 0 55px rgba(245,158,11,0.35); }
}
.quiz-generate-btn:hover { transform: translateY(-2px) scale(1.02); animation: none; box-shadow: 0 8px 30px rgba(245,158,11,0.7); }
.quiz-skip-btn {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(180,130,255,0.25);
  border-radius: 12px; padding: 9px 14px;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  color: rgba(190,155,255,0.65); cursor: pointer;
  transition: all 0.15s;
}
.quiz-skip-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(200,150,255,0.5); color: rgba(220,190,255,0.9); }
.quiz-result-img-wrap { width: 100%; border-radius: 12px; overflow: hidden; }
.quiz-result-caption {
  font-family: var(--font-display);
  font-size: 1rem; color: rgba(220,195,255,0.8);
  text-align: center; margin: 0;
}
.reader-img-loading {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 0.75rem; color: rgba(200,170,255,0.7);
}

/* Quiz action buttons — reuse draw-panel button styles but on light bg */


/* ── End card PDF save ── */
/* ═══════════════════════════════════════════════════════════
   END CARD — full-screen story completion experience
   ═══════════════════════════════════════════════════════════ */

/* Override base layout to fill full reader */
/* ══════════════════════════════════════════════════════════
   END CARD — Full cosmos, matches spark screen identity
   ══════════════════════════════════════════════════════════ */
.end-card {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  overflow: hidden;
  background: rgb(4,1,14);
}
.end-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4,1,14,1) 0%,
    rgba(8,2,24,0.97) 20%,
    rgba(12,4,32,0.92) 45%,
    rgba(12,4,32,0.92) 70%,
    rgba(4,1,14,1) 100%
  );
  z-index: 0;
}
.end-card.hidden { display: none; }

/* Particle canvas — sized to fill end card */
.end-particles-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* Aurora wash */
.end-bg-aurora {
  position: absolute; inset: -50%;
  z-index: 1;
  background: conic-gradient(
    from 220deg at 35% 55%,
    transparent 0deg,
    rgba(139,92,246,0.10) 50deg,
    transparent 110deg,
    rgba(125,212,248,0.07) 190deg,
    transparent 250deg,
    rgba(220,100,255,0.09) 310deg,
    transparent 360deg
  );
  /* animation removed */
  pointer-events: none; z-index: 0;
}
@keyframes end-aurora-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Floating ambient sparkles */
.end-amb-layer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  overflow: hidden;
}
.end-amb {
  position: absolute;
  font-size: 0.65rem;
  color: rgba(200,160,245,0.18);
  animation: end-amb-float 9s ease-in-out infinite;
}
.ea1 { top: 12%; left: 8%;  animation-delay: 0s;    animation-duration: 8s; }
.ea2 { top: 22%; right: 10%; animation-delay: 1.5s; animation-duration: 11s; }
.ea3 { top: 60%; left: 5%;  animation-delay: 3s;    animation-duration: 9.5s; }
.ea4 { top: 75%; right: 8%; animation-delay: 0.8s;  animation-duration: 10s; }
.ea5 { top: 40%; left: 88%; animation-delay: 2.2s;  animation-duration: 7.5s; }
.ea6 { top: 88%; left: 50%; animation-delay: 4s;    animation-duration: 12s; }
@keyframes end-amb-float {
  0%,100% { transform: translateY(0) scale(1);    opacity: 0.18; }
  33%      { transform: translateY(-14px) scale(1.3); opacity: 0.45; }
  66%      { transform: translateY(-6px) scale(0.9);  opacity: 0.25; }
}

/* Inner content */
.end-inner {
  position: relative; z-index: 3;
  max-width: 560px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: end-enter 0.75s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes end-enter {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Completion burst ── */
.end-burst-wrap {
  position: relative;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: -2px;
}
.end-burst-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(200,140,255,0.3);
  animation: end-burst-expand 3s ease-out infinite;
}
.er1 { width: 24px; height: 24px; animation-delay: 0s; }
.er2 { width: 36px; height: 36px; animation-delay: 0.6s; border-color: rgba(125,212,248,0.2); }
.er3 { width: 48px; height: 48px; animation-delay: 1.2s; border-color: rgba(200,140,255,0.12); }
@keyframes end-burst-expand {
  0%   { transform: scale(0.7); opacity: 0.8; }
  70%  { opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 0; }
}
.end-burst-core {
  position: relative; z-index: 2;
  font-size: 1.3rem;
  color: rgba(220,180,255,0.9);
  text-shadow: 0 0 20px rgba(200,140,255,0.8), 0 0 40px rgba(155,109,255,0.5);
  animation: end-core-pulse 2.4s ease-in-out infinite;
}
@keyframes end-core-pulse {
  0%,100% { transform: scale(1)   rotate(0deg);   filter: brightness(1); }
  50%      { transform: scale(1.15) rotate(180deg); filter: brightness(1.4); }
}

/* ── Hero text ── */
.end-complete-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(200,160,245,0.45);
  margin-bottom: -6px;
}
.end-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.end-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 6.5vw, 3.4rem);
  font-weight: 600; font-style: italic;
  color: #f4eeff;
  line-height: 1.05;
  text-shadow: 0 2px 40px rgba(200,140,255,0.55), 0 0 80px rgba(155,109,255,0.2);
  letter-spacing: -0.5px;
}
.end-tagline {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  color: rgba(200,175,255,0.5);
  line-height: 1.7;
}
.end-tagline em { font-style: italic; color: rgba(220,195,255,0.75); }

/* ── Story stats strip ── */
.end-details-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%;
}
.end-detail-chip {
  flex: 1; max-width: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(155,109,255,0.18);
  border-radius: 12px;
  padding: 6px 6px;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s;
}
.end-detail-chip:hover {
  background: rgba(155,109,255,0.07);
  border-color: rgba(155,109,255,0.35);
}
.edc-icon { font-size: 1.1rem; line-height: 1; }
.edc-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 600;
  color: rgba(225,200,255,0.9);
  line-height: 1;
}
.edc-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(180,150,255,0.45);
}

/* ── Save button — hero CTA ── */
.end-save-block {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.end-save-btn {
  position: relative; overflow: hidden;
  width: 100%;
  display: flex; align-items: center;
  gap: 14px;
  padding: 17px 20px 17px 18px;
  background: linear-gradient(135deg,
    rgba(155,80,255,0.75) 0%,
    rgba(109,40,217,0.85) 50%,
    rgba(80,20,180,0.9) 100%);
  border: 1.5px solid rgba(210,150,255,0.55);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  box-shadow:
    0 0 30px rgba(155,80,255,0.35),
    0 10px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  text-align: left;
}
.end-save-btn:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 0 50px rgba(180,100,255,0.55),
    0 16px 48px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  border-color: rgba(220,160,255,0.75);
}
.end-save-btn:active { transform: translateY(-1px) scale(1.005); }

/* Moving light sweep */
.esb-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(108deg,
    transparent 25%,
    rgba(255,255,255,0.09) 48%,
    rgba(255,255,255,0.14) 52%,
    transparent 75%);
  transform: translateX(-120%);
  animation: esb-sweep 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes esb-sweep {
  0%,100% { transform: translateX(-120%); }
  55%,100% { transform: translateX(120%); }
}
/* Edge shimmer */
.esb-shimmer {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.esb-left {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
}
.esb-book-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}
.esb-text {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.esb-headline {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem; font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.1px;
}
.esb-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem; font-weight: 500;
  color: rgba(220,195,255,0.6);
  letter-spacing: 0.3px;
}
.esb-badge {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.esb-badge-inner {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.52rem; font-weight: 900;
  letter-spacing: 1.5px;
  color: rgba(220,255,180,0.9);
  background: rgba(120,220,80,0.18);
  border: 1px solid rgba(150,255,100,0.3);
  border-radius: 6px;
  padding: 3px 7px;
  text-transform: uppercase;
}

.end-pdf-status {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: rgba(200,170,255,0.5);
  min-height: 1rem;
  font-style: italic;
}

/* ── New story button — cosmic pill ── */
.end-new-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  background: rgba(155,109,255,0.08);
  border: 1.5px solid rgba(155,109,255,0.28);
  border-radius: 100px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  color: rgba(210,185,255,0.8);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
}
.end-new-btn:hover {
  background: rgba(155,109,255,0.18);
  border-color: rgba(180,130,255,0.55);
  color: rgba(230,210,255,0.95);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(155,109,255,0.25), 0 6px 20px rgba(0,0,0,0.3);
}
.end-new-btn:active { transform: translateY(0); }
/* Inner glow on hover */
.enb-glow {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,109,255,0.15), transparent 70%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.end-new-btn:hover .enb-glow { opacity: 1; }
.enb-icon {
  font-size: 0.62rem;
  color: rgba(200,160,245,0.6);
  animation: end-spark-spin 3.5s linear infinite;
  flex-shrink: 0;
}
@keyframes end-spark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.enb-text { flex: 1; }
.enb-arrow {
  font-size: 0.95rem;
  color: rgba(200,160,245,0.45);
  transition: transform 0.2s;
}
.end-new-btn:hover .enb-arrow { transform: translateX(3px); }

/* Footer */
.end-footer {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(180,150,255,0.28);
  letter-spacing: 1px;
  margin-top: -4px;
}

/* Legacy — suppress old elements */
.end-msg { display: none; }
.end-sub { display: none; }
.end-actions { display: none; }
.end-brand { display: none; }

@keyframes end-star-twinkle {
  0%,100% { opacity: var(--op, 0.4); transform: scale(1); }
  50%      { opacity: 0.05; transform: scale(0.6); }
}

/* ── Climax Image Page ───────────────────────────────────────────────────── */
/* ── Climax image — fills LEFT (text) panel ─────────────────────────────── */

/* stp-inner override — remove padding so image goes full-bleed */
.stp-inner.climax-image-active {
  padding: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}

.climax-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060212;
  overflow: hidden;
}

.climax-image-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  touch-action: manipulation; /* prevents 300ms tap delay on iOS */
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; /* iOS Safari requires pointer to fire click on non-anchor elements */
}
@media (hover: hover) {
  .climax-image-full { cursor: zoom-in; }
}

.climax-image-full.climax-img--fadein {
  animation: climax-fade-in 1.4s ease-out forwards;
}

@keyframes climax-fade-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

.climax-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(transparent, rgba(6,2,18,0.72));
  pointer-events: none;
}

.climax-image-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: rgba(240,220,180,0.9);
  text-align: center;
  margin: 0;
  letter-spacing: 0.03em;
}

.climax-zoom-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: rgba(200,160,245,0.7);
  text-align: center;
  margin: 0.25rem 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: climax-hint-pulse 2.4s ease-in-out infinite;
}
@keyframes climax-hint-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.06); }
}

/* Loading state — in left panel */
.climax-image-wrap--loading {
  flex-direction: column;
  gap: 1.2rem;
  background: radial-gradient(ellipse at 50% 60%, rgba(107,63,160,0.18), transparent 70%), #060212;
}

.climax-loading-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(200,160,245,0.15);
  border-top-color: rgba(200,160,245,0.7);
  animation: climax-spin 1.2s linear infinite;
}

@keyframes climax-spin {
  to { transform: rotate(360deg); }
}

.climax-loading-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(200,160,245,0.6);
  text-align: center;
  margin: 0;
}

/* ── Climax right panel — decorated page number ─────────────────────────── */
.climax-pagenum-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
}

/* Soft pulsing glow ring behind the number */
.cpn-glow-ring {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,160,245,0.18);
  box-shadow:
    0 0 30px rgba(160,100,230,0.18),
    0 0 80px rgba(120,60,200,0.1),
    inset 0 0 40px rgba(160,100,230,0.08);
  animation: cpn-ring-pulse 3.5s ease-in-out infinite;
}

@keyframes cpn-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%       { transform: scale(1.06); opacity: 1; }
}

/* Decorative top ornament */
.cpn-ornament-top {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  color: rgba(240,201,110,0.45);
  letter-spacing: 0.4em;
  position: relative;
  z-index: 1;
}

/* The BIG number */
.cpn-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4.5rem, 9vw, 7rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(232,220,255,0.9);
  line-height: 1;
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 40px rgba(180,120,255,0.5),
    0 0 80px rgba(140,80,220,0.25);
  animation: cpn-num-glow 4s ease-in-out infinite;
}

@keyframes cpn-num-glow {
  0%, 100% { text-shadow: 0 0 40px rgba(180,120,255,0.4), 0 0 80px rgba(140,80,220,0.2); }
  50%       { text-shadow: 0 0 55px rgba(200,140,255,0.7), 0 0 110px rgba(160,90,240,0.35); }
}

/* "The End" label */
.cpn-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(200,160,245,0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* Bottom dots */
.cpn-ornament-bottom {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.65rem;
  color: rgba(200,160,245,0.25);
  letter-spacing: 0.5em;
  position: relative;
  z-index: 1;
  margin-top: 0.25rem;
}

/* ── Page loading state (jumped ahead of generation) ────────────────────── */
.page-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  min-height: 180px;
  opacity: 0.7;
}

.pls-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(200,160,245,0.15);
  border-top-color: rgba(200,160,245,0.6);
  animation: climax-spin 1.1s linear infinite;
}

.pls-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(200,160,245,0.5);
  margin: 0;
}

.page-text-arrive {
  animation: page-text-fadein 0.5s ease-out forwards;
}

@keyframes page-text-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* Climax page — page-text fills full height for image */
.stp-inner.climax-image-active .page-text {
  flex: 1;
  display: flex;
  height: 100%;
  min-height: 0;
}
.stp-inner.climax-image-active .page-text .climax-image-wrap {
  flex: 1;
}

/* ── Climax image lightbox (CZO) ─────────────────────────────────────────── */
#climax-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
#climax-zoom-overlay.czo--open {
  opacity: 1;
  pointer-events: auto;
}
#climax-zoom-overlay.czo--closing {
  opacity: 0;
  pointer-events: none;
}

.czo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 1, 14, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.czo-container {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}

.czo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}

/* Close button */
.czo-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(200,160,255,0.25);
  background: rgba(6,2,18,0.7);
  color: rgba(220,200,255,0.8);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(4px);
}
.czo-close:hover {
  background: rgba(140,80,220,0.4);
  border-color: rgba(200,160,255,0.5);
}

/* Hint label */
.czo-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200,160,255,0.55);
  background: rgba(6,2,18,0.6);
  border: 1px solid rgba(180,140,255,0.12);
  border-radius: 20px;
  padding: 5px 14px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.czo-hint.czo-hint--gone {
  opacity: 0;
}


/* ─── OWL LOGO INTEGRATION ──────────────────────────── */

/* Header owl — sits left of the brand text */
.spark-owl-logo {
  height: 38px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 12px rgba(232,201,106,0.5)) drop-shadow(0 0 20px rgba(232,201,106,0.25));
  animation: owl-float 4s ease-in-out infinite, owl-spark 3s ease-in-out infinite;
}

@keyframes owl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes owl-spark {
  0%, 100% { filter: drop-shadow(0 2px 12px rgba(232,201,106,0.45)) drop-shadow(0 0 18px rgba(232,201,106,0.2)); }
  50%      { filter: drop-shadow(0 2px 16px rgba(232,201,106,0.7)) drop-shadow(0 0 30px rgba(232,201,106,0.4)); }
}

/* Generating screen owl */
.gen-owl {
  height: 48px;
  width: auto;
  display: block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 2px 14px rgba(232,201,106,0.5)) drop-shadow(0 0 24px rgba(232,201,106,0.3));
  animation: owl-float 4s ease-in-out infinite, owl-spark 3s ease-in-out infinite;
}

/* End card owl */
.end-owl {
  height: 32px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(0 2px 10px rgba(232,201,106,0.5)) drop-shadow(0 0 18px rgba(232,201,106,0.25));
  animation: owl-spark 3s ease-in-out infinite;
}

/* Cover page owl — replaces star text */
.cover-owl {
  height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 14px rgba(232,201,106,0.5)) drop-shadow(0 0 24px rgba(232,201,106,0.3));
  animation: owl-float 5s ease-in-out infinite, owl-spark 3s ease-in-out infinite;
}

/* Story page watermark — bottom-right subtle owl on each page */
.story-page-owl-wm {
  position: absolute;
  bottom: 12px;
  right: 14px;
  height: 40px;
  width: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

/* Story bar owl — tiny owl before "New Story" text */
.bar-owl {
  height: 20px;
  width: auto;
  vertical-align: middle;
  margin-right: 2px;
  filter: drop-shadow(0 1px 6px rgba(232,201,106,0.45)) drop-shadow(0 0 12px rgba(232,201,106,0.2));
  animation: owl-spark 3s ease-in-out infinite;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .spark-owl-logo {
    height: 30px;
    margin-right: 5px;
  }
  .gen-owl {
    height: 38px;
  }
  .cover-owl {
    height: 38px;
  }
  .end-owl {
    height: 26px;
  }
}

/* Page footer owl ornament — replaces SVG divider */
.page-footer-ornament-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}
.page-footer-line {
  flex: 1;
  max-width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  border-radius: 1px;
}
.page-footer-owl {
  height: 20px;
  width: auto;
  opacity: 0.35;
  filter: grayscale(0.2);
}
.page-footer-brand {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: rgba(201,184,240,0.35);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── SKIP NAV (accessibility) ── */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--lilac-deep, #9b6dff);
  color: #fff;
  padding: 0.7rem 1.5rem;
  border-radius: 0 0 12px 12px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-nav:focus {
  top: 0;
  outline: 3px solid var(--gold, #f8e87a);
  outline-offset: 2px;
}

/* ── CHARACTER PROFILES ── */
.profile-cards-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.profile-cards-scroll::-webkit-scrollbar { display: none; }

.profile-card {
  flex-shrink: 0; width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 14px;
  border: 1.5px solid rgba(200,160,245,0.2);
  background: rgba(20,8,48,0.5); backdrop-filter: blur(12px);
  cursor: pointer; transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}
.profile-card:hover { border-color: var(--lilac); transform: translateY(-2px) scale(1.02); }
.profile-card.selected {
  border-color: var(--teal);
  background: linear-gradient(135deg, rgba(90,232,192,0.12), rgba(200,160,245,0.12));
  box-shadow: 0 0 0 2px rgba(90,232,192,0.25), var(--shadow-soft);
}

.profile-photo, .profile-photo-placeholder {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(200,160,245,0.3);
}
.profile-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,5,34,0.6); font-size: 1.4rem;
}

.profile-name {
  font-size: 0.65rem; font-weight: 700; color: var(--mist);
  text-align: center; max-width: 70px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.profile-type-badge { font-size: 0.7rem; position: absolute; top: 4px; right: 6px; }

.profile-delete-btn {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(240,80,80,0.8); color: white; font-size: 0.6rem;
  border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center; line-height: 1;
}
.profile-card:hover .profile-delete-btn { display: flex; }

.profile-add-card { border-style: dashed; border-color: rgba(200,160,245,0.25); opacity: 0.7; }
.profile-add-card:hover { opacity: 1; }

/* Skeleton loading state */
.profile-skeleton { pointer-events: none; opacity: 0.5; }
.skeleton-pulse {
  background: linear-gradient(90deg, rgba(200,160,245,0.08) 25%, rgba(200,160,245,0.18) 50%, rgba(200,160,245,0.08) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-text {
  display: block; width: 48px; height: 8px; border-radius: 4px; margin: 0 auto;
  background: linear-gradient(90deg, rgba(200,160,245,0.08) 25%, rgba(200,160,245,0.18) 50%, rgba(200,160,245,0.08) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.profile-add-icon { font-size: 1.4rem; color: var(--lilac); }
.profile-add-label { font-size: 0.55rem; font-weight: 700; color: rgba(232,224,240,0.5); }

/* Photo toggle */
.photo-toggle-wrap { margin-top: 10px; }
.photo-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.photo-toggle-checkbox { display: none; }
.photo-toggle-track {
  width: 40px; height: 22px; border-radius: 11px;
  background: rgba(200,160,245,0.2); position: relative; transition: background 0.2s;
  flex-shrink: 0;
}
.photo-toggle-checkbox:checked + .photo-toggle-track { background: var(--teal); }
.photo-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; transition: transform 0.2s;
}
.photo-toggle-checkbox:checked + .photo-toggle-track .photo-toggle-thumb { transform: translateX(18px); }
.photo-toggle-text { font-size: 0.75rem; font-weight: 600; color: rgba(232,224,240,0.6); }

/* Profile modal */
.profile-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,4,24,0.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.profile-modal-card {
  width: 100%; max-width: 360px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 20px; border: 1px solid rgba(200,160,245,0.2);
  background: rgba(13,7,26,0.96); backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.profile-modal-title {
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 800;
  color: var(--gold); text-align: center; margin: 0;
}
.profile-type-toggle { display: flex; gap: 6px; justify-content: center; }
.profile-type-btn {
  padding: 8px 16px; border-radius: 12px;
  border: 1.5px solid rgba(200,160,245,0.25);
  background: rgba(20,8,48,0.5); color: rgba(232,224,240,0.6);
  font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.profile-type-btn.selected {
  border-color: var(--teal); color: var(--mist);
  background: linear-gradient(135deg, rgba(90,232,192,0.12), rgba(200,160,245,0.12));
}

/* Profile photo upload area */
.profile-photo-upload {
  display: flex; align-items: center; gap: 12px;
}
.profile-photo-preview {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  border: 2px dashed rgba(200,160,245,0.3);
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,5,34,0.5); overflow: hidden;
}
.profile-photo-preview-icon { font-size: 1.5rem; opacity: 0.4; }
.profile-photo-btns { display: flex; flex-direction: column; gap: 6px; }
.profile-upload-btn {
  padding: 6px 14px; border-radius: 10px; font-size: 0.72rem; font-weight: 700;
  border: 1px solid rgba(200,160,245,0.25); background: rgba(200,160,245,0.1);
  color: var(--mist); cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.profile-upload-btn:hover { background: rgba(200,160,245,0.2); border-color: var(--lilac); }

/* Profile modal actions */
.profile-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.profile-cancel-btn {
  padding: 8px 18px; border-radius: 12px; font-weight: 700; font-size: 0.82rem;
  border: 1px solid rgba(200,160,245,0.2); background: transparent;
  color: rgba(232,224,240,0.5); cursor: pointer; transition: all 0.2s;
}
.profile-cancel-btn:hover { color: var(--mist); border-color: var(--lilac); }
.profile-save-btn {
  padding: 8px 22px; border-radius: 12px; font-weight: 700; font-size: 0.82rem;
  border: none; cursor: pointer; transition: all 0.2s;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: var(--mist); box-shadow: 0 4px 16px rgba(109,40,217,0.4);
}
.profile-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(109,40,217,0.5); }

/* ══════════════════════════════════════════════════════════════
   MY STORIES LIBRARY — cloud archive overlay
   ══════════════════════════════════════════════════════════════ */
.library-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: lib-fade-in 0.25s ease-out;
}
@keyframes lib-fade-in { from { opacity: 0; } to { opacity: 1; } }
.library-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(107,63,160,0.12) 0%, rgba(10,6,18,0.97) 65%);
  backdrop-filter: blur(12px);
}
.library-panel {
  position: relative;
  width: 100%; max-width: 520px; max-height: 80vh;
  background: rgba(13,7,26,0.96);
  border: 1px solid rgba(179,157,219,0.18);
  border-radius: 20px;
  padding: 1.8rem 1.6rem 1.4rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  animation: lib-panel-in 0.3s ease-out;
}
@keyframes lib-panel-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.library-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.3rem;
}
.library-title-wrap { display: flex; align-items: center; gap: 0.5rem; }
.library-icon { font-size: 1.3rem; }
.library-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.4rem; font-weight: 600; color: #fff;
  letter-spacing: 0.03em;
}
.library-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); font-size: 0.95rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.library-close:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
.library-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; color: rgba(232,224,240,0.45);
  margin-bottom: 1.2rem; line-height: 1.5;
}
.library-list {
  overflow-y: auto; flex: 1; min-height: 120px;
  scrollbar-width: thin; scrollbar-color: rgba(179,157,219,0.2) transparent;
}
.library-loading {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 2rem; color: rgba(232,224,240,0.5);
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
}
.library-loading-icon {
  animation: lib-spin 2s linear infinite; display: inline-block;
}
@keyframes lib-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.library-empty {
  text-align: center; padding: 2.5rem 1rem;
  color: rgba(232,224,240,0.4);
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
}
.library-empty-icon { font-size: 2rem; display: block; margin-bottom: 0.6rem; }

/* Story card in library */
.lib-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(179,157,219,0.12);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.lib-card:hover {
  border-color: rgba(179,157,219,0.35);
  background: rgba(179,157,219,0.06);
  transform: translateY(-1px);
}
.lib-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.4rem;
}
.lib-card-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.9);
  line-height: 1.3; flex: 1;
}
.lib-card-days {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem; font-weight: 600;
  color: rgba(240,201,110,0.85);
  background: rgba(240,201,110,0.1);
  border: 1px solid rgba(240,201,110,0.2);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lib-card-days.expiring {
  color: rgba(255,120,100,0.9);
  background: rgba(255,120,100,0.1);
  border-color: rgba(255,120,100,0.25);
}
.lib-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; color: rgba(232,224,240,0.4);
}
.lib-card-meta span { display: inline-flex; align-items: center; gap: 0.2rem; }
.lib-card-actions {
  display: flex; gap: 0.4rem; margin-top: 0.6rem;
}
.lib-card-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(179,157,219,0.2);
  background: rgba(179,157,219,0.08);
  color: rgba(232,224,240,0.75);
  cursor: pointer;
  transition: all 0.2s;
}
.lib-card-btn:hover {
  background: rgba(179,157,219,0.18);
  border-color: rgba(179,157,219,0.4);
  color: #fff;
}
.lib-card-btn.lib-read-btn {
  background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(109,40,217,0.25));
  border-color: rgba(139,92,246,0.35);
  color: rgba(232,224,240,0.9);
}
.lib-card-btn.lib-read-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(109,40,217,0.4));
}
.lib-card-btn.lib-delete-btn {
  border-color: rgba(255,100,100,0.15);
  color: rgba(255,100,100,0.5);
}
.lib-card-btn.lib-delete-btn:hover {
  background: rgba(255,100,100,0.1);
  border-color: rgba(255,100,100,0.35);
  color: rgba(255,100,100,0.85);
}

/* End card cloud save confirmation */
.end-story-saved {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(160,210,160,0.75);
  text-align: center;
  margin: 0.3rem 0 0.8rem;
  animation: lib-fade-in 0.5s ease-out;
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .amb, .spark-video-bg, video, .hero-video-wrap video {
    display: none !important;
  }
}