/* Vibe Story Book Mode / Read Modes / Hero Cover CSS
   Externalised from story HTML pages so Vibe Story pages stay lighter and consistent. */


/* Read view modes: keeps original Vibe Story hero/header, adds optional open-book reader. */
    .read-mode-panel {
      margin-top: clamp(1.5rem, 3vw, 2.5rem);
      padding: 1rem;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      background: rgba(8, 18, 38, .62);
      box-shadow: 0 20px 60px rgba(0,0,0,.22);
    }

    .read-mode-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .read-mode-copy {
      color: rgba(255,255,255,.72);
      font-size: .94rem;
      line-height: 1.5;
    }

    .read-mode-copy strong {
      color: #fff;
    }

    .read-mode-toggle {
      display: inline-flex;
      gap: .55rem;
      padding: .35rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.045);
    }

    .read-mode-btn {
      border: 0;
      cursor: pointer;
      border-radius: 999px;
      padding: .75rem 1rem;
      color: rgba(255,255,255,.76);
      background: transparent;
      font: inherit;
      font-weight: 700;
      transition: .22s ease;
    }

    .read-mode-btn.is-active {
      color: #06111f;
      background: linear-gradient(135deg, #7cf7ff, #b8fff3);
      box-shadow: 0 0 26px rgba(124,247,255,.32);
    }

    .read-view[hidden] { display: none !important; }

    /* Keep the final reflection centred in the original Vibe Story style. */
    .story-ending {
      text-align: center;
      max-width: min(1120px, calc(100% - 2rem));
      margin-left: auto;
      margin-right: auto;
    }

    .story-ending p {
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }

    .story-ending .story-actions {
      justify-content: center;
    }

    .book-reader-shell {
      position: relative;
      margin-top: clamp(1.25rem, 2.6vw, 2.2rem);
      padding: clamp(1rem, 2.5vw, 2rem);
      border-radius: 30px;
      border: 1px solid rgba(124,247,255,.16);
      background:
        radial-gradient(circle at 14% 12%, rgba(93,235,255,.13), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(149,117,255,.14), transparent 32%),
        rgba(4, 12, 27, .76);
      box-shadow: 0 30px 90px rgba(0,0,0,.34);
      overflow: hidden;
    }

    .book-reader-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.8px),
        radial-gradient(circle, rgba(124,247,255,.5) 1px, transparent 1.8px);
      background-size: 150px 150px, 230px 230px;
      opacity: .16;
    }

    .book-stage {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 52px;
      gap: clamp(.75rem, 2vw, 1.25rem);
      align-items: center;
    }

    .book-nav-arrow {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      background: rgba(255,255,255,.055);
      cursor: pointer;
      font-size: 2rem;
      line-height: 1;
      display: grid;
      place-items: center;
      transition: .2s ease;
    }

    .book-nav-arrow:hover {
      border-color: rgba(124,247,255,.55);
      box-shadow: 0 0 28px rgba(124,247,255,.16);
      transform: translateY(-1px);
    }

    .open-book {
      position: relative;
      min-height: 600px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: clamp(1rem, 2vw, 1.55rem);
      border-radius: 28px 28px 18px 18px;
      background:
        radial-gradient(circle at 18% 18%, rgba(124,247,255,.18), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(161,120,255,.22), transparent 34%),
        linear-gradient(90deg, #07142f, #102553 6%, #050b1c 50%, #102553 94%, #07142f);
      box-shadow: 0 35px 70px rgba(0,0,0,.46);
      perspective: 1600px;
      overflow: hidden;
    }

    .open-book::after {
      content: "";
      position: absolute;
      top: 1.25rem;
      bottom: 1.35rem;
      left: 50%;
      width: 72px;
      transform: translateX(-50%);
      background: radial-gradient(ellipse at center, rgba(2,7,20,.78), rgba(24,62,112,.32) 45%, transparent 72%);
      z-index: 4;
      pointer-events: none;
    }

    .book-page {
      position: relative;
      min-height: 548px;
      padding: clamp(2rem, 4vw, 3.6rem);
      color: rgba(236,249,255,.92);
      font-family: Georgia, 'Times New Roman', serif;
      background:
        radial-gradient(circle at 50% 35%, rgba(124,247,255,.11), transparent 36%),
        radial-gradient(circle at 88% 12%, rgba(177,126,255,.13), transparent 34%),
        linear-gradient(90deg, #0b1731, #12284f 14%, #0d1d3f 86%, #08142d);
      box-shadow: inset 0 0 62px rgba(124,247,255,.10), inset 0 0 90px rgba(0,0,0,.25);
      overflow: hidden;
    }

    .book-page::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        repeating-linear-gradient(0deg, rgba(124,247,255,.035), rgba(124,247,255,.035) 1px, transparent 1px, transparent 7px),
        radial-gradient(circle at 15% 22%, rgba(124,247,255,.10), transparent 18%),
        radial-gradient(circle at 72% 80%, rgba(177,126,255,.08), transparent 22%);
      opacity: .55;
    }

    .book-page.left {
      border-radius: 20px 6px 10px 20px;
      text-align: center;
    }

    .book-page.right {
      border-radius: 6px 20px 20px 10px;
    }

    .book-page.left::after {
      content: "";
      position: absolute;
      inset: 0 0 0 auto;
      width: 76px;
      background: linear-gradient(90deg, transparent, rgba(0,0,0,.42));
      pointer-events: none;
    }

    .book-page.right::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 76px;
      background: linear-gradient(90deg, rgba(0,0,0,.46), transparent);
      pointer-events: none;
    }

    .book-page-inner {
      position: relative;
      z-index: 2;
    }

    .book-kicker {
      margin: 0 0 1rem;
      color: #7cf7ff;
      font-size: .88rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .book-title {
      margin: 0 0 1.3rem;
      color: #f4fbff;
      font-size: clamp(2rem, 4vw, 4.2rem);
      line-height: .98;
      letter-spacing: -.05em;
    }

    .book-copy {
      font-size: clamp(1.05rem, 1.55vw, 1.38rem);
      line-height: 1.58;
    }

    .book-copy p { margin: 0 0 1rem; }

    .book-signal {
      margin: 1.4rem 0;
      padding: 1rem 1.15rem;
      border-left: 3px solid #7cf7ff;
      background: rgba(124,247,255,.08);
      border-radius: 16px;
      color: #dffbff;
      font-weight: 700;
      line-height: 1.45;
    }

    .book-tool-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .9rem;
      margin-top: 1.1rem;
    }

    .book-tool-card {
      padding: 1rem;
      border-radius: 16px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(124,247,255,.16);
      font-size: .96rem;
      line-height: 1.42;
    }

    .book-tool-card h4 {
      margin: 0 0 .55rem;
      color: #f4fbff;
      font-size: 1rem;
    }

    .book-tool-card ul,
    .book-tool-card ol {
      margin: 0;
      padding-left: 1.1rem;
    }

    .book-page-number {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1.35rem;
      z-index: 3;
      text-align: center;
      color: rgba(196,235,255,.62);
      font-size: 1rem;
    }

    /* VibeQ orb used inside Book Mode intro pages.
       This replaces the previous small white/blue orb with the VibeQ orbit mark. */
    .book-orbit {
      width: min(320px, 78%);
      height: 160px;
      margin: 1.1rem auto 1.9rem;
      position: relative;
      isolation: isolate;
      filter: drop-shadow(0 0 14px rgba(106, 242, 255, .28));
    }

    .book-orbit::before {
      content: "";
      position: absolute;
      inset: 22px 54px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(118, 246, 255, .22), rgba(118, 246, 255, .08) 38%, transparent 70%);
      filter: blur(4px);
      z-index: 0;
    }

    .book-orbit span {
      position: absolute;
      border: 1.35px solid rgba(106, 242, 255, .68);
      border-radius: 50%;
      box-shadow:
        0 0 8px rgba(106, 242, 255, .50),
        inset 0 0 8px rgba(106, 242, 255, .12);
      z-index: 2;
    }

    .book-orbit span:nth-child(1) {
      inset: 52px 8px;
      transform: rotate(-8deg);
    }

    .book-orbit span:nth-child(2) {
      inset: 34px 50px;
      transform: rotate(62deg);
    }

    /* Remove the extra close/circular ring and keep only two orbit ellipses. */
    .book-orbit span:nth-child(3) {
      display: none;
    }

    .book-orb {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 64px;
      height: 64px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .96) 0 9%, rgba(204, 250, 255, .95) 10% 25%, transparent 36%),
        radial-gradient(circle at 34% 30%, rgba(209, 252, 255, .95) 0 18%, rgba(117, 233, 250, .96) 36%, rgba(58, 145, 255, .96) 66%, rgba(151, 86, 235, .98) 100%);
      box-shadow:
        0 0 18px rgba(144, 252, 255, .92),
        0 0 48px rgba(70, 222, 244, .64),
        0 0 86px rgba(129, 91, 255, .38),
        inset -12px -14px 26px rgba(108, 72, 214, .26),
        inset 9px 10px 24px rgba(255, 255, 255, .48);
      z-index: 1;
    }

    .book-orb::after {
      content: "";
      position: absolute;
      inset: 10px 12px auto auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 70%);
      opacity: .75;
    }

    .book-bottom-controls {
      position: relative;
      z-index: 1;
      margin-top: 1.2rem;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 1rem;
    }

    .book-control-pill {
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.86);
      border-radius: 999px;
      padding: .8rem 1.15rem;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
    }

    .book-control-pill:last-child { justify-self: end; }

    .book-progress {
      color: rgba(255,255,255,.88);
      text-align: center;
      font-weight: 700;
    }

    .book-dots {
      display: flex;
      justify-content: center;
      gap: .45rem;
      margin-top: .6rem;
    }

    .book-dot {
      width: .5rem;
      height: .5rem;
      border-radius: 999px;
      background: rgba(255,255,255,.26);
    }

    .book-dot.is-active {
      background: #7cf7ff;
      box-shadow: 0 0 14px rgba(124,247,255,.8);
    }



/* Book Mode mobile controls + end-state visibility */
.book-mobile-turn-row {
  display: none;
}

.book-nav-arrow:disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-control-pill:disabled {
  opacity: 0.32 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-edge-control:disabled {
  visibility: hidden;
  opacity: 0 !important;
}

    @media (max-width: 920px) {
      .book-stage { grid-template-columns: 1fr; }
      .book-nav-arrow { display: none; }
      .open-book { grid-template-columns: 1fr; min-height: auto; }
      .open-book::after { display: none; }
      .book-page { min-height: 540px; padding: 2rem 1.6rem 4rem; }
      .book-page.right { display: none; }
      .book-tool-grid { grid-template-columns: 1fr; }
      .book-bottom-controls { grid-template-columns: 1fr; }
      .book-control-pill, .book-control-pill:last-child { justify-self: center; }
      .book-edge-control { display: none; }
      .book-mobile-turn-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .7rem;
        width: min(100%, 360px);
        margin: 0 auto;
      }
      .book-mobile-turn-row .book-control-pill {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
      }
      .story-cover { justify-self: center; margin-left: auto; margin-right: auto; }
    }

  
  

/* Global Vibe Story image frame alignment, externalised from VibeQi. */
.story-cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.story-cover img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (min-width: 920px) {
  .story-hero {
    grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  .story-cover {
    width: 100%;
    max-width: 680px;
    justify-self: end;
  }
}