/* ===== Stories — Racconti degli Dei ===== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Nunito:wght@400;600;700&display=swap');

:root {
  --gold: #c9a84c;
  --gold-light: #f0d080;
  --deep: #1a1035;
  --night: #0e0820;
  --parchment: #fdf6e3;
  --rose: #e8b4b8;
  --teal: #5b9ea0;
  --ember: #e06c3a;
  --star: #fff8dc;
}

body.story-body-root {
  background: var(--night);
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100vw;
  position: relative;
  padding-top: 74px; /* account for fixed navbar */
  box-sizing: border-box;
}

/* Starfield */
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 30%, #1a0a3a 0%, #0e0820 70%);
}
.star-dot {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: twinkle var(--dur) ease-in-out infinite;
}
@keyframes twinkle {
  0%,100% { opacity: var(--op); transform: scale(1); }
  50% { opacity: 0.1; transform: scale(0.5); }
}

/* Book container */
.book-wrap {
  position: relative; z-index: 10;
  width: min(720px, 96vw);
  height: min(calc(90vh - 74px), 820px);
  perspective: 1800px;
}

.page {
  display: none;
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.3);
  animation: pageIn 0.6s cubic-bezier(0.23,1,0.32,1);
}
.page.active { display: flex; flex-direction: column; }

@keyframes pageIn {
  from { opacity:0; transform: rotateY(-8deg) translateX(-30px); }
  to   { opacity:1; transform: rotateY(0) translateX(0); }
}

/* ===== COVER ===== */
.cover {
  background: linear-gradient(160deg, #1a0a3a 0%, #0e0820 50%, #1a1035 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 30px;
}
.cover-ornament {
  font-size: 3.5rem;
  margin-bottom: 10px;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.cover-subtitle {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(0.55rem, 1.5vw, 0.75rem);
  color: var(--gold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.85;
}
.cover-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--gold-light);
  line-height: 1.25;
  text-shadow: 0 0 40px rgba(201,168,76,0.5);
  margin-bottom: 10px;
}
.cover-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: #c8b8e8;
  margin-bottom: 40px;
}
.cover-divider {
  width: 120px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 0 auto 40px;
}
.story-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 40px;
}
.story-list li {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--star);
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
  padding: 4px 0;
}
.story-list li:hover { color: var(--gold-light); transform: translateX(4px); }
.story-list li .emoji { font-size: 1.2rem; }
.cover-footer {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}
.btn-start {
  background: linear-gradient(135deg, var(--gold), #a07830);
  color: var(--deep);
  border: none;
  padding: 14px 40px;
  border-radius: 50px;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(201,168,76,0.4);
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,168,76,0.5); }

/* ===== INTRO PAGE ===== */
.intro-page {
  background: var(--parchment);
  padding: 50px 50px 30px;
  flex-direction: column;
  justify-content: center;
}
.intro-page .chapter-label {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.intro-page h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  color: var(--deep);
  margin-bottom: 25px;
  line-height: 1.4;
}
.intro-page p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.85;
  color: #3a2e2e;
  margin-bottom: 15px;
}
.intro-page p em { color: var(--gold); font-style: italic; }

/* ===== STORY PAGES ===== */
.story-page {
  flex-direction: column;
}

.story-header {
  padding: 28px 40px 22px;
  position: relative;
  flex-shrink: 0;
}
.story-number {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  opacity: 0.7;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.story-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1rem, 2.8vw, 1.5rem);
  line-height: 1.3;
}
.story-emoji {
  font-size: 2.2rem;
  position: absolute;
  right: 40px; top: 50%;
  transform: translateY(-50%);
}
.header-line {
  height: 2px;
  background: rgba(255,255,255,0.2);
  margin-top: 18px;
}

.story-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.4) transparent;
}
.story-body::-webkit-scrollbar { width: 4px; }
.story-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.4); border-radius: 2px; }

.story-body p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  line-height: 1.9;
  margin-bottom: 14px;
  color: inherit;
}
.story-body p em {
  font-style: italic;
  opacity: 0.9;
}
.story-body .moral {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  text-align: center;
  padding: 18px 24px;
  border-radius: 10px;
  margin: 20px 0 10px;
  line-height: 1.6;
}
.story-body h3 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.9rem;
  margin: 18px 0 8px;
  opacity: 0.85;
}
.story-body strong { font-weight: 700; }

/* Navigation */
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: inherit;
  padding: 8px 20px;
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.05em;
}
.nav-btn:hover { background: rgba(255,255,255,0.22); }
.nav-btn:disabled { opacity: 0.3; cursor: default; }
.page-dots {
  display: flex; gap: 8px; align-items: center;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer; transition: all 0.3s;
}
.dot.active { background: white; transform: scale(1.4); }

/* ===== THEME: Persefone — Rose/Spring ===== */
.theme-spring .story-header { background: linear-gradient(135deg, #6b2d5e, #c75986); color: white; }
.story-page.theme-spring { background: #fff0f5; color: #3a1a2e; }
.theme-spring .story-number { color: #c75986; }
.theme-spring .story-title { color: #6b2d5e; }
.theme-spring .header-line { background: rgba(199,89,134,0.3); }
.theme-spring .moral { background: rgba(199,89,134,0.1); color: #6b2d5e; border-left: 3px solid #c75986; }
.theme-spring .nav-bar { background: #6b2d5e; color: white; border-color: rgba(255,255,255,0.1); }

/* ===== THEME: Chelone — Gold/Earth ===== */
.theme-earth .story-header { background: linear-gradient(135deg, #4a3500, #b8860b); color: #fff8dc; }
.story-page.theme-earth { background: #fffdf0; color: #3a2e00; }
.theme-earth .story-number { color: #b8860b; }
.theme-earth .story-title { color: #4a3500; }
.theme-earth .header-line { background: rgba(184,134,11,0.3); }
.theme-earth .moral { background: rgba(184,134,11,0.1); color: #4a3500; border-left: 3px solid #b8860b; }
.theme-earth .nav-bar { background: #4a3500; color: #fff8dc; border-color: rgba(255,255,255,0.1); }

/* ===== THEME: Pyra — Fire/Ember ===== */
.theme-fire .story-header { background: linear-gradient(135deg, #7a1500, #e06c3a); color: white; }
.story-page.theme-fire { background: #fff5f0; color: #3a1500; }
.theme-fire .story-number { color: #e06c3a; }
.theme-fire .story-title { color: #7a1500; }
.theme-fire .header-line { background: rgba(224,108,58,0.3); }
.theme-fire .moral { background: rgba(224,108,58,0.1); color: #7a1500; border-left: 3px solid #e06c3a; }
.theme-fire .nav-bar { background: #7a1500; color: white; border-color: rgba(255,255,255,0.1); }

/* ===== THEME: Berenice — Night/Stars ===== */
.theme-stars .story-header { background: linear-gradient(135deg, #0e0820, #3b1f6e); color: #f0d080; }
.story-page.theme-stars { background: #f5f0ff; color: #1a0a3a; }
.theme-stars .story-number { color: #7b5ea7; }
.theme-stars .story-title { color: #1a0a3a; }
.theme-stars .header-line { background: rgba(123,94,167,0.3); }
.theme-stars .moral { background: rgba(123,94,167,0.1); color: #1a0a3a; border-left: 3px solid #7b5ea7; }
.theme-stars .nav-bar { background: #1a0a3a; color: #f0d080; border-color: rgba(255,255,255,0.1); }

/* ===== THEME: Muse — Teal/Arts ===== */
.theme-arts .story-header { background: linear-gradient(135deg, #1a4a4a, #5b9ea0); color: white; }
.story-page.theme-arts { background: #f0fafa; color: #0e2e2e; }
.theme-arts .story-number { color: #5b9ea0; }
.theme-arts .story-title { color: #1a4a4a; }
.theme-arts .header-line { background: rgba(91,158,160,0.3); }
.theme-arts .moral { background: rgba(91,158,160,0.1); color: #1a4a4a; border-left: 3px solid #5b9ea0; }
.theme-arts .nav-bar { background: #1a4a4a; color: white; border-color: rgba(255,255,255,0.1); }

/* Intro/cover nav bars */
.intro-page .nav-bar, .cover .nav-bar-cover {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.intro-page .nav-btn { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.15); color: var(--deep); }
.intro-page .nav-btn:hover { background: rgba(0,0,0,0.13); }
.intro-page .dot { background: rgba(0,0,0,0.2); }
.intro-page .dot.active { background: var(--deep); }

.fine {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.7rem;
  text-align: center;
  letter-spacing: 0.3em;
  opacity: 0.5;
  margin-top: 8px;
  text-transform: uppercase;
}

/* Navbar override for dark story background */
.story-body-root .navbar {
  background: rgba(14, 8, 32, 0.85);
  border-color: rgba(201, 168, 76, 0.25);
}
.story-body-root .navbar.scrolled {
  background: rgba(14, 8, 32, 0.95);
}
.story-body-root .navbar-left .navbar-brand {
  color: var(--gold);
}
.story-body-root .navbar-right .navbar-logo {
  color: var(--gold-light);
}

@media (max-width: 600px) {
  body.story-body-root {
    padding-top: 0;
    align-items: flex-start;
  }

  .book-wrap {
    width: 100vw;
    height: calc(100svh - 70px);
    height: calc(100vh - 70px); /* non-svh fallback */
    margin-top: 70px;
  }

  .page {
    border-radius: 0;
    box-shadow: none;
  }

  .story-header {
    padding: 16px 20px 12px;
  }

  .story-title {
    padding-right: 0;
    font-size: clamp(0.95rem, 4.5vw, 1.2rem);
  }

  .story-emoji {
    display: none;
  }

  .story-body {
    padding: 16px 20px;
  }

  .nav-bar {
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }

  .intro-page {
    padding: 28px 24px 0;
  }

  .cover {
    padding: 20px 20px 16px;
  }

  .cover-title {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  .story-list li {
    font-size: 0.9rem;
  }

  .btn-start {
    padding: 12px 28px;
    margin-bottom: 20px;
  }

  .story-body p {
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  }

  .moral {
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  }

  .nav-btn {
    padding: 7px 14px;
    font-size: 0.75rem;
  }
}