/* ============================================
   Quantum Wonder Book - Styles
   ============================================ */

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

body {
  font-family: 'Fredoka', sans-serif;
  background:
    radial-gradient(circle at 20% 30%, #ffe5b4 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #ffd6e8 0%, transparent 40%),
    linear-gradient(135deg, #fff8e7 0%, #fce4ec 100%);
  min-height: 100vh;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decorative floating shapes */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
body::before {
  width: 200px; height: 200px;
  background: #ffd54f;
  top: 10%; left: 5%;
  animation: float 8s ease-in-out infinite;
}
body::after {
  width: 150px; height: 150px;
  background: #ce93d8;
  bottom: 10%; right: 5%;
  animation: float 10s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-30px) rotate(10deg); }
}

/* ---------- Header ---------- */
.site-header {
  text-align: center;
  margin-bottom: 20px;
  z-index: 2;
  position: relative;
}
.site-header h1 {
  font-size: 2.8rem;
  color: #5d4037;
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.1);
  letter-spacing: 1px;
}
.site-header p {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.3rem;
  color: #795548;
  margin-top: 8px;
}

/* ---------- Book wrapper + nav arrows ----------
   The book is flanked by circular prev/next arrows in a flex row.
   No more nav bar below the book — buttons are always visible alongside it. */
.book-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.nav-arrow {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ff7043;
  color: #fff;
  border: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 #d84315, 0 6px 14px rgba(0,0,0,0.25);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* nudge the chevron glyph so it sits visually centered */
  padding-bottom: 6px;
}
.nav-arrow:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #d84315, 0 8px 18px rgba(0,0,0,0.3);
}
.nav-arrow:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #d84315;
}
.nav-arrow:disabled {
  background: #bdbdbd;
  box-shadow: 0 4px 0 #9e9e9e;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ---------- The book ----------
   Sized to fit the viewport. Now that nav buttons flank the book (not below it),
   we only need a small buffer for body padding — book gets ~80px more vertical
   space than before, which goes straight into the narrative area. */
.book {
  flex: 0 1 1280px;
  width: 100%;
  max-width: 1280px;
  height: min(calc(100vh - 60px), 1120px);
  min-height: 480px;
  background: #fff;
  border-radius: 12px 24px 24px 12px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    inset 8px 0 20px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.book::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
  pointer-events: none;
  z-index: 5;
}

/* ---------- Pages ---------- */
.page {
  position: absolute;
  inset: 0;
  /* Tightened top/bottom so the video + ~3.5" of narrative both fit cleanly. */
  padding: 18px 50px 22px 70px;
  display: none;
  flex-direction: column;
  animation: fadeIn 0.5s ease;
}
.page.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Chapter title — slim so it doesn't steal vertical space from the video/narrative. */
.page-title {
  font-size: 1.4rem;
  color: #d84315;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 #ffe0b2;
  line-height: 1.2;
}

.page-content {
  /* Stacked layout: video pinned at top, narrative scrolls below. */
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  overflow: hidden;
  min-height: 0;          /* lets the inner narrative properly own the scroll */
}

.video-frame {
  /* Clean borderless video frame — no dashed border, no cream padding around the iframe. */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16:9 — same ratio YouTube ships in its default share/embed code.
     Width is capped so the height never exceeds 420px → leaves the narrative
     ~3-4 inches of room below. On wide viewports the video is near-full-width;
     on narrower viewports it stays under 100% so narrative still gets its space. */
  width: min(100%, calc(420px * 16 / 9));   /* 420 × 16/9 ≈ 747px wide */
  aspect-ratio: 16 / 9;
  margin: 0 auto;          /* center horizontally if we shrank below 100% */
  flex-shrink: 0;          /* don't squeeze — narrative absorbs the rest */
  background: #000;        /* black behind iframe so loading is clean */
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  display: block;
}

.narrative {
  background: #fffde7;
  border-radius: 12px;
  padding: 22px 28px;
  border: 2px solid #fff59d;
  /* Fill remaining vertical space below the pinned video, scroll its own content. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #4e342e;
  /* Friendlier scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #ffb74d #fff8e1;
}
.narrative::-webkit-scrollbar { width: 10px; }
.narrative::-webkit-scrollbar-track { background: #fff8e1; border-radius: 10px; }
.narrative::-webkit-scrollbar-thumb { background: #ffb74d; border-radius: 10px; }
.narrative::-webkit-scrollbar-thumb:hover { background: #ff9800; }
.narrative h3 {
  font-family: 'Fredoka', sans-serif;
  color: #6a1b9a;
  margin-bottom: 14px;
  font-size: 1.4rem;
}
.narrative p { margin-bottom: 14px; }
.narrative .question {
  background: #e1f5fe;
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 14px;
  border-left: 4px solid #4fc3f7;
}
.narrative .question strong { color: #01579b; }
/* Tighter spacing inside Q&A bubbles so the answer sits close under the
   question and the bubble doesn't have a trailing empty line at the bottom. */
.narrative .question p { margin-bottom: 8px; }
.narrative .question p:last-child { margin-bottom: 0; }

/* ---------- Cover style pages ---------- */
.cover {
  background: linear-gradient(135deg, #ff7043, #ffa726);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 60px;
}
.cover h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}
.cover p {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.5rem;
  max-width: 500px;
}
.cover .emoji { font-size: 4rem; margin: 20px 0; }

/* Cover/end pages still use a small "page-number" element for byline-style text
   (e.g. "a JollyBean Series", "The End") — chapter pages no longer have one. */
.page-number {
  position: absolute;
  bottom: 15px;
  right: 25px;
  font-family: 'Patrick Hand', cursive;
  color: #8d6e63;
  font-size: 1rem;
}
.cover .page-number { color: rgba(255,255,255,0.85); }

/* ---------- Loading state ---------- */
.loading {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem;
  color: #6a1b9a;
}
.loading-spinner {
  font-size: 4rem;
  animation: spin 2s linear infinite;
  margin-bottom: 15px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* (Old bottom-bar .nav and .page-indicator styles removed — replaced by
    .book-wrap + .nav-arrow defined near the top of this file.) */

/* ---------- "Go to Chapters" button on chapter pages ----------
   Small unobtrusive pill in the top-left corner of every chapter page.
   Absolute-positioned so it doesn't disturb the title/video/narrative layout.
   Cover, end, and the TOC page do NOT have this button. */
.back-to-chapters {
  position: absolute;
  top: 10px;
  left: 80px;             /* clear of the book-spine shadow on the left edge */
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border: 2px solid #ffb74d;
  color: #d84315;
  border-radius: 20px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.back-to-chapters:hover {
  background: #ffe0b2;
  border-color: #ff9800;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.back-to-chapters:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.back-to-chapters:focus-visible {
  outline: 3px solid #ff7043;
  outline-offset: 2px;
}

/* ---------- Chapters (table of contents) page ----------
   Built dynamically by JS from each chapter's <h2 class="page-title"> so the
   list always reflects the chapter pages themselves. */
.toc {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 79, 0.18) 0%, transparent 60%),
    #fff8e1;
}
.toc .page-title {
  font-size: 2rem;
  margin-bottom: 22px;
  color: #6a1b9a;
  text-shadow: 2px 2px 0 #ffe0b2;
}
.toc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 8px 8px 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Friendly scrollbar to match the narrative scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #ffb74d #fff8e1;
}
.toc-list::-webkit-scrollbar { width: 10px; }
.toc-list::-webkit-scrollbar-track { background: #fff8e1; border-radius: 10px; }
.toc-list::-webkit-scrollbar-thumb { background: #ffb74d; border-radius: 10px; }
.toc-list::-webkit-scrollbar-thumb:hover { background: #ff9800; }

.toc-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border: 2px solid #fff59d;
  border-radius: 14px;
  background: #fffde7;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem;
  color: #4e342e;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.toc-item:hover {
  background: #fff3c4;
  border-color: #ffb74d;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.toc-item:focus-visible {
  outline: 3px solid #ff7043;
  outline-offset: 2px;
}
.toc-item:active {
  transform: translateX(2px) scale(0.99);
}

.toc-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ff7043;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 0 #d84315;
}
.toc-title { flex: 1 1 auto; }
.toc-arrow {
  color: #ff7043;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.6rem;
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.toc-item:hover .toc-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ---------- Cosmic cover (night sky) ----------
   Used by .cover.cosmic (cover + "The End" pages).
   Chapter pages keep the warm storybook palette — this only restyles cover pages. */
.cover.cosmic {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(126, 87, 194, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(236, 64, 122, 0.35) 0%, transparent 50%),
    linear-gradient(160deg, #0d0a2e 0%, #1a1147 35%, #2d1b69 70%, #4a1f7a 100%);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.cover.cosmic h2 {
  text-shadow: 0 0 20px rgba(255, 213, 79, 0.6), 4px 4px 0 rgba(0, 0, 0, 0.3);
}
.cover.cosmic .emoji {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
  animation: cosmic-glow 4s ease-in-out infinite;
}
@keyframes cosmic-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)); }
  50%      { filter: drop-shadow(0 0 24px rgba(255, 213, 79, 0.7)); }
}

/* Twinkling starfield — pure CSS, no images.
   Two layers of radial-gradient "stars" at different sizes, drifting slowly. */
.cover.cosmic .stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px,  #fff,        transparent),
    radial-gradient(1px 1px at 60px 80px,  #fff,        transparent),
    radial-gradient(1px 1px at 130px 50px, #fffacd,     transparent),
    radial-gradient(2px 2px at 180px 120px,#fff,        transparent),
    radial-gradient(1px 1px at 220px 30px, #fff,        transparent),
    radial-gradient(2px 2px at 280px 160px,#ffd54f,     transparent),
    radial-gradient(1px 1px at 320px 70px, #fff,        transparent),
    radial-gradient(1px 1px at 380px 110px,#fff,        transparent),
    radial-gradient(2px 2px at 50px 200px, #fff,        transparent),
    radial-gradient(1px 1px at 250px 240px,#fffacd,     transparent),
    radial-gradient(1px 1px at 360px 220px,#fff,        transparent),
    radial-gradient(2px 2px at 100px 280px,#fff,        transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: twinkle 6s ease-in-out infinite, drift 60s linear infinite;
  opacity: 0.9;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.5; }
}
@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 400px 300px; }
}
/* Make sure the cosmic cover content sits above the starfield */
.cover.cosmic .emoji,
.cover.cosmic h2,
.cover.cosmic p,
.cover.cosmic .page-number {
  position: relative;
  z-index: 1;
}

/* ---------- Star-spangled purple cover ----------
   Used by .cover.starry-purple (cover + "The End" pages).
   Inspired by the JollyBean icon: lively purple with multi-colored sparkles
   (white + gold + soft pink), no heavy scrim. */
.cover.starry-purple {
  background:
    /* subtle warm glows in the corners — pink top-left, gold bottom-right */
    radial-gradient(ellipse at 15% 20%, rgba(236, 64, 122, 0.30) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(255, 213, 79, 0.22) 0%, transparent 55%),
    /* the main purple gradient — medium, lively (not deep navy) */
    linear-gradient(160deg, #6a3a9e 0%, #5b2a8e 40%, #4a1f7a 75%, #3d1865 100%);
  color: #fff8e7;            /* soft warm cream, not stark white */
  /* NOTE: keep position:absolute from .page — DO NOT override to relative.
     The starfield pseudo-elements use the .page as their positioning context. */
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.cover.starry-purple .cover-text {
  text-align: center;
  padding: 20px 30px;
  position: relative;
  z-index: 1;
  max-width: 600px;
}
.cover.starry-purple h2 {
  font-size: 3.2rem;
  margin-bottom: 8px;
  color: #fff8e7;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  line-height: 1.05;
}
.cover.starry-purple .byline {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem;
  color: #ffd54f;            /* warm gold from the icon palette */
  margin-bottom: 22px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.cover.starry-purple p {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem;
  color: #ffe8a8;            /* soft pale gold so it sits below the title visually */
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* The sparkle layer — densely sprinkled multi-colored "stars" matching the
   white/gold/pink palette of the JollyBean icon. Pure CSS, no images.
   Three stacked starfield layers (different sizes & speeds) for depth. */
.cover.starry-purple .stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* TILE 1 — small dense sparkles (250x180 px tile, lots of dots) */
  background-image:
    /* whites */
    radial-gradient(1px 1px at 12px 18px,   #fff,    transparent),
    radial-gradient(1.5px 1.5px at 38px 52px, #fff,  transparent),
    radial-gradient(1px 1px at 65px 22px,   #fff,    transparent),
    radial-gradient(1px 1px at 92px 88px,   #fff,    transparent),
    radial-gradient(1.5px 1.5px at 118px 35px,#fff,  transparent),
    radial-gradient(1px 1px at 142px 70px,  #fff,    transparent),
    radial-gradient(1px 1px at 168px 14px,  #fff,    transparent),
    radial-gradient(1.5px 1.5px at 195px 58px,#fff,  transparent),
    radial-gradient(1px 1px at 220px 96px,  #fff,    transparent),
    radial-gradient(1px 1px at 28px 110px,  #fff,    transparent),
    radial-gradient(1.5px 1.5px at 80px 130px,#fff,  transparent),
    radial-gradient(1px 1px at 156px 148px, #fff,    transparent),
    radial-gradient(1px 1px at 210px 162px, #fff,    transparent),
    /* golds */
    radial-gradient(1.5px 1.5px at 50px 38px,  #ffd54f, transparent),
    radial-gradient(1px 1px at 110px 60px,    #ffe082, transparent),
    radial-gradient(1.5px 1.5px at 175px 95px,#ffd54f, transparent),
    radial-gradient(1px 1px at 60px 158px,    #ffe082, transparent),
    radial-gradient(1.5px 1.5px at 130px 120px,#ffd54f, transparent),
    radial-gradient(1px 1px at 230px 50px,    #ffe082, transparent),
    /* pinks */
    radial-gradient(1px 1px at 22px 78px,    #f8bbd0, transparent),
    radial-gradient(1.5px 1.5px at 100px 40px,#f48fb1, transparent),
    radial-gradient(1px 1px at 188px 130px,  #f8bbd0, transparent),
    radial-gradient(1.5px 1.5px at 240px 110px,#f48fb1, transparent);
  background-repeat: repeat;
  background-size: 250px 180px;
  animation: twinkle 5s ease-in-out infinite, drift 80s linear infinite;
  opacity: 0.95;
}

/* TILE 2 — slightly bigger, brighter "hero" sparkles, slower drift, different tile size */
.cover.starry-purple::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2.5px 2.5px at 60px 80px,   #fff,    transparent),
    radial-gradient(3px 3px at 220px 40px,      #ffd54f, transparent),
    radial-gradient(2.5px 2.5px at 380px 220px, #fff,    transparent),
    radial-gradient(3px 3px at 140px 270px,     #ffe082, transparent),
    radial-gradient(2.5px 2.5px at 320px 130px, #f48fb1, transparent),
    radial-gradient(2.5px 2.5px at 80px 200px,  #fff,    transparent),
    radial-gradient(3px 3px at 280px 80px,      #fff,    transparent),
    radial-gradient(2.5px 2.5px at 200px 180px, #ffd54f, transparent);
  background-repeat: repeat;
  background-size: 420px 320px;
  animation: twinkle 7s ease-in-out infinite 1s, drift 110s linear infinite reverse;
  opacity: 0.85;
}

/* TILE 3 — tiny faint sparkles for "fairy dust" depth, fastest twinkle */
.cover.starry-purple::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(0.5px 0.5px at 8px 12px,   rgba(255,255,255,0.9), transparent),
    radial-gradient(0.5px 0.5px at 35px 28px,  rgba(255,255,255,0.9), transparent),
    radial-gradient(0.5px 0.5px at 62px 8px,   rgba(255,213,79,0.9),  transparent),
    radial-gradient(0.5px 0.5px at 92px 42px,  rgba(255,255,255,0.9), transparent),
    radial-gradient(0.5px 0.5px at 118px 22px, rgba(248,187,208,0.9), transparent),
    radial-gradient(0.5px 0.5px at 144px 6px,  rgba(255,255,255,0.9), transparent),
    radial-gradient(0.5px 0.5px at 16px 60px,  rgba(255,224,130,0.9), transparent),
    radial-gradient(0.5px 0.5px at 48px 78px,  rgba(255,255,255,0.9), transparent),
    radial-gradient(0.5px 0.5px at 78px 92px,  rgba(255,255,255,0.9), transparent),
    radial-gradient(0.5px 0.5px at 108px 70px, rgba(244,143,177,0.9), transparent),
    radial-gradient(0.5px 0.5px at 136px 98px, rgba(255,255,255,0.9), transparent);
  background-repeat: repeat;
  background-size: 160px 110px;
  animation: twinkle 3s ease-in-out infinite 0.5s, drift 90s linear infinite;
  opacity: 0.7;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .book          { aspect-ratio: 3 / 4; }
  .page          { padding: 25px 25px 25px 35px; }
  .page-content  { grid-template-columns: 1fr; gap: 15px; }
  .page-title    { font-size: 1.4rem; }
  .narrative     { font-size: 1rem; padding: 12px; }
  .cover h2      { font-size: 2rem; }
  .cover p       { font-size: 1.1rem; }
  .site-header h1 { font-size: 1.8rem; }
}