/* A New Page — storybook.css: the full-screen living book.
   Pairs with storybook.js (ANPStorybook). Loaded by session.html and
   adventure-maker.html. Design: real paper, real spine, 3D page turns,
   art that breathes, a sky behind the book that belongs to the world. */

body.sb-lock { overflow: hidden; }

.sb-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: block; overflow: hidden;
  animation: sbFadeIn .5s ease both;
}
.sb-overlay.closing { animation: sbFadeOut .45s ease both; }
@keyframes sbFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes sbFadeOut { from { opacity: 1 } to { opacity: 0 } }

.sb-ambient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.sb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 2200px; padding: 18px;
}

/* ---------- the closed cover ---------- */
.sb-cover {
  position: relative; cursor: pointer;
  width: min(440px, 92vw); height: min(620px, 84vh);
  border-radius: 10px 18px 18px 10px;
  border: 3px solid #E8A33D;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden; transform-origin: left center;
  animation: sbCoverIn .9s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes sbCoverIn {
  from { opacity: 0; transform: translateY(34px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sb-cover.opening { animation: sbCoverOpen .7s cubic-bezier(.6,0,.3,1) both; }
@keyframes sbCoverOpen {
  to { transform: rotateY(-88deg); opacity: 0; }
}
.sb-cover-art { position: absolute !important; inset: 0; }
.sb-cover-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, rgba(10,10,16,0), rgba(10,10,16,.78) 40%);
  text-align: center; color: #fff;
}
.sb-cover-kick {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85; font-weight: 800; margin-bottom: 6px;
}
.sb-cover-title {
  font-size: clamp(1.5rem, 5.5vw, 2.1rem); font-weight: 900; line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.sb-cover-sub { font-size: .95rem; opacity: .9; margin-top: 6px; }
.sb-cover-open {
  display: inline-block; margin-top: 16px; padding: 10px 22px;
  border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px;
  font-weight: 800; font-size: .92rem;
  animation: sbPulse 2.2s ease-in-out infinite;
}
@keyframes sbPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.25); }
  50%     { transform: scale(1.05); box-shadow: 0 0 22px 4px rgba(255,255,255,.18); }
}

/* ---------- the open book ---------- */
.sb-book {
  position: relative; display: flex;
  transform-style: preserve-3d;
  animation: sbBookIn .6s cubic-bezier(.2,.8,.25,1) both;
  filter: drop-shadow(0 34px 50px rgba(0,0,0,.5));
}
@keyframes sbBookIn { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
.sb-book.spread { width: min(1160px, 94vw); height: min(740px, 88vh); }
.sb-book.single { width: min(560px, 94vw); height: min(800px, 88vh); }

.sb-half { position: relative; flex: 1; min-width: 0; }

.sb-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 36px;
  transform: translateX(-50%); pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, rgba(60,40,20,0) 0%, rgba(60,40,20,.22) 42%, rgba(30,20,10,.4) 50%, rgba(60,40,20,.22) 58%, rgba(60,40,20,0) 100%);
}

/* ---------- a page ---------- */
.sb-page {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(120,90,40,.05), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(120,90,40,.06), transparent 40%),
    linear-gradient(180deg, #fdf8ec 0%, #f8f1e0 100%);
  color: #2c2415;
  box-shadow: inset 0 0 60px rgba(140,110,60,.12);
}
.sb-book.spread .sb-half.left  .sb-page { border-radius: 12px 2px 2px 12px; }
.sb-book.spread .sb-half.right .sb-page { border-radius: 2px 12px 12px 2px; }
.sb-book.single .sb-page { border-radius: 12px; }

.sb-page-in {
  position: absolute; inset: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(18px, 3.4vh, 30px) clamp(18px, 3vw, 34px) 46px;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-folio {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center; font-size: .72rem; letter-spacing: .18em;
  color: rgba(90,70,40,.55); font-weight: 700; pointer-events: none;
}

/* full-bleed art pages */
.sb-page-art .sb-page-in { padding: 0; gap: 0; overflow: hidden; }
.sb-page-art .sb-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 26px 22px calc(30px + env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff;
  font-weight: 800; font-size: clamp(.95rem, 2.4vh, 1.05rem); line-height: 1.4;
  background: linear-gradient(180deg, rgba(8,8,14,0), rgba(8,8,14,.72) 45%, rgba(8,8,14,.82));
  text-shadow: 0 1px 10px rgba(0,0,0,.65);
  /* never let a long cliffhanger run off the bottom — cap it and let it scroll */
  max-height: 60%; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sb-page-art .sb-folio { display: none; }

/* ---------- art figures + ken burns ---------- */
.sb-art {
  position: relative; width: 100%; flex: 0 0 auto;
  height: clamp(150px, 26vh, 240px);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 26px rgba(60,40,10,.25), inset 0 0 0 1px rgba(120,90,40,.18);
}
.sb-art.full { position: absolute; inset: 0; height: 100%; border-radius: 0; box-shadow: none; }
.sb-art-kb { position: absolute; inset: -6%; }
.sb-art-kb:not(.no-kb) { animation: sbKenBurns 26s ease-in-out infinite alternate; }
@keyframes sbKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.6%, -1.2%); }
}
.sb-art-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-art-glow { position: absolute; inset: 0; }
.sb-art-emoji {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(54px, 12vh, 110px); filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  animation: sbFloat 5s ease-in-out infinite;
}
@keyframes sbFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* ---------- page body typography ---------- */
.sb-page-body { display: flex; flex-direction: column; gap: 14px; }
.sb-page-body.dropcap > div > .sb-pp:first-of-type p:first-of-type::first-letter,
.sb-page-body.dropcap .sb-pp:first-child p:first-of-type::first-letter {
  float: left; font-size: 3.3em; line-height: .82; font-weight: 900;
  padding: 4px 8px 0 0; color: #9a6b2a; font-family: Georgia, 'Times New Roman', serif;
}

/* parent narration block, inside the book */
.sb-pp { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
.sb-pp .k {
  font-family: inherit; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: #9a6b2a; font-weight: 700; margin-bottom: 6px;
}
/* dyslexia-friendlier reading: wider interline + word/letter spacing reduces
   visual crowding for struggling decoders; imperceptible to fluent readers */
.sb-pp p { margin: 0; font-size: clamp(1rem, 2.3vh, 1.12rem); line-height: 1.68; word-spacing: .12em; letter-spacing: .012em; }
.sb-pp .tv-cue {
  display: inline-block; margin: 8px 8px 0 0; padding: 3px 12px;
  border: 1px solid rgba(150,110,50,.4); border-radius: 999px;
  font-size: .76rem; font-weight: 700; color: #7a5a28; background: rgba(230,190,120,.14);
  font-family: system-ui, sans-serif;
}

/* the child's hero panel — the star of every page */
.sb-cc {
  background: linear-gradient(180deg, #fffdf6, #fff8e6);
  border: 2px solid rgba(190,140,60,.5); border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 6px 20px rgba(140,100,40,.16);
}
.sb-cc.climax { border-color: #d99a2b; box-shadow: 0 0 0 4px rgba(232,163,61,.18), 0 8px 26px rgba(160,110,30,.22); }
.sb-cc .youread {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: #b07a22; margin-bottom: 8px;
}
.sb-cc .line { margin: 0; font-size: clamp(1.35rem, 3.4vh, 1.7rem); line-height: 1.7; font-weight: 700; letter-spacing: .035em; word-spacing: .18em; }
.sb-cc .w { cursor: pointer; border-radius: 6px; padding: 1px 3px; }
.sb-cc .w.miss { background: #ffd9d2; box-shadow: inset 0 -2px 0 #e2604c; }
.sb-cc .tv-mark { font-size: clamp(2.6rem, 7vh, 3.6rem); text-align: center; cursor: pointer; border-radius: 12px; padding: 6px; }
.sb-cc .tv-mark.miss { background: #ffd9d2; box-shadow: inset 0 -3px 0 #e2604c; }
.sb-cc .subnote { font-size: .8rem; color: #8a7a5a; margin: 6px 0 0; text-align: center; }

/* dice / choice / cliffhanger flourishes inside pages */
.sb-dice {
  border: 1.5px dashed rgba(150,110,50,.5); border-radius: 14px; padding: 14px 16px;
  background: rgba(240,210,150,.12); font-family: Georgia, serif;
}
.sb-dice .k { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #9a6b2a; font-weight: 800; margin-bottom: 6px; }
.sb-dice p { margin: 0 0 6px; font-size: 1rem; line-height: 1.55; }
.sb-dice .subnote { font-size: .8rem; color: #8a7a5a; margin: 0; }

.sb-cliffline {
  font-family: Georgia, serif; font-size: clamp(1.08rem, 2.6vh, 1.25rem); line-height: 1.6;
  font-style: italic; text-align: center; margin: 0; padding: 0 6px;
}
.sb-choice-row { display: flex; flex-direction: column; gap: 10px; }
.sb-choice-row button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 2px solid rgba(170,130,60,.45); border-radius: 14px;
  background: #fffdf6; padding: 12px 16px; font-family: inherit;
  font-size: 1rem; font-weight: 700; color: #2c2415; cursor: pointer; text-align: left;
}
.sb-choice-row button .big-ic { font-size: 1.5rem; }
.sb-choice-row button.on { border-color: #d99a2b; background: #fdf2d7; box-shadow: 0 0 0 3px rgba(232,163,61,.25); }

.sb-finish {
  display: block; width: 100%; margin-top: 4px;
  background: #2f5d3f; color: #fff; border: none; border-radius: 999px;
  padding: 15px 24px; font-family: inherit; font-size: 1.02rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 22px rgba(30,70,45,.35);
}
.sb-finish:active { transform: scale(.98); }
.sb-tapnote { font-size: .8rem; color: #8a7a5a; text-align: center; margin: 0; }

/* the end-paper (blank facing page at the back) */
.sb-endpaper { display: flex; align-items: center; justify-content: center; }
.sb-endpaper-mark { font-size: 1.6rem; color: rgba(140,100,40,.35); }

/* ---------- the turning leaf ---------- */
.sb-leaf {
  position: absolute; top: 0; bottom: 0; z-index: 20;
  transform-style: preserve-3d; pointer-events: none;
  transition: transform .62s cubic-bezier(.45,.05,.35,1);
}
.sb-leaf.spread { left: 50%; right: 0; transform-origin: left center; }
.sb-leaf:not(.spread) { left: 0; right: 0; transform-origin: left center; }
.sb-leaf.fwd.go { transform: rotateY(-178deg); }
.sb-leaf.back { transform: rotateY(-178deg); }
.sb-leaf.back.go { transform: rotateY(0deg); }
.sb-leaf-face {
  position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden;
  border-radius: 2px 12px 12px 2px;
  background: linear-gradient(180deg, #fdf8ec 0%, #f8f1e0 100%);
  box-shadow: -6px 0 24px rgba(0,0,0,.18);
}
.sb-leaf-backface {
  position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden;
  border-radius: 12px 2px 2px 12px;
  background: linear-gradient(270deg, #f3ead6 0%, #faf4e4 100%);
  box-shadow: inset -14px 0 30px rgba(140,110,60,.18);
}

/* ---------- nav arrows ---------- */
.sb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); background: rgba(15,18,30,.45);
  color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease;
}
.sb-nav:hover { background: rgba(15,18,30,.7); transform: translateY(-50%) scale(1.08); }
.sb-nav.prev { left: clamp(6px, 2vw, 26px); }
.sb-nav.next { right: clamp(6px, 2vw, 26px); animation: sbNudge 2.6s ease-in-out infinite; }
@keyframes sbNudge { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0) } 50% { box-shadow: 0 0 18px 2px rgba(255,255,255,.28) } }

@media (max-width: 600px) {
  .sb-stage { padding: 10px; }
  .sb-nav { width: 46px; height: 46px; }
  .sb-book.single { height: min(86vh, 760px); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-art-kb:not(.no-kb), .sb-cover-open, .sb-nav.next, .sb-art-emoji { animation: none; }
  .sb-leaf { transition: none; }
}

/* ---------- sparkle bursts ---------- */
.sb-burst { position: fixed; z-index: 9999; width: 0; height: 0; pointer-events: none; }
.sb-burst span {
  position: absolute; left: 0; top: 0; color: #ffd76a;
  text-shadow: 0 0 10px rgba(255,200,90,.9);
  animation: sbBurst 1.1s cubic-bezier(.15,.65,.35,1) both;
}
@keyframes sbBurst {
  0%   { transform: translate(0,0) scale(.4) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(40deg); opacity: 0; }
}

/* ---------- mute toggle ---------- */
.sb-mute {
  position: absolute; top: clamp(10px, 2vh, 22px); right: clamp(10px, 2vw, 24px); z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5); background: rgba(15,18,30,.45);
  color: #fff; font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ---------- the Hero's Seal (kid's reading unlocks the page) ---------- */
.sb-seal-wrap { text-align: center; margin-top: 4px; }
.sb-seal-note { font-size: .78rem; color: #8a7a5a; margin: 0 0 8px; font-weight: 700; letter-spacing: .04em; }
.sb-seal {
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 38% 32%, #f3c66a, #d99a2b 58%, #a96f14);
  box-shadow: 0 8px 22px rgba(160,110,30,.45), inset 0 2px 6px rgba(255,235,180,.8), inset 0 -4px 8px rgba(120,75,10,.5);
  color: #5d3c05; font-size: 2rem; font-weight: 900; font-family: inherit;
  animation: sbSealGlow 2s ease-in-out infinite;
}
@keyframes sbSealGlow {
  0%,100% { box-shadow: 0 8px 22px rgba(160,110,30,.45), inset 0 2px 6px rgba(255,235,180,.8), inset 0 -4px 8px rgba(120,75,10,.5); }
  50%     { box-shadow: 0 8px 30px rgba(220,160,50,.75), inset 0 2px 6px rgba(255,235,180,.8), inset 0 -4px 8px rgba(120,75,10,.5); }
}
.sb-seal:active { transform: scale(.94); }
.sb-seal.done {
  animation: none; cursor: default;
  background: radial-gradient(circle at 38% 32%, #9fd9a8, #3f9d63 60%, #2a6e44);
  color: #fff;
}

/* ---------- the WORD KEY (climax page-lock: build the big word) ---------- */
.sb-wk-slots { display: flex; gap: 8px; justify-content: center; margin: 6px 0 12px; }
.sb-wk-slot {
  min-width: 44px; min-height: 52px; display: flex; align-items: center; justify-content: center;
  border-bottom: 4px solid rgba(160,110,30,.4);
  font-family: inherit; font-weight: 900; font-size: 1.7rem; color: #5d3c05;
  text-transform: uppercase;
}
.sb-wk-slot.fill { border-bottom-color: #d99a2b; animation: sbWkFill .3s ease both; }
@keyframes sbWkFill { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.sb-wk-slots.won .sb-wk-slot { border-bottom-color: #3f9d63; color: #2a6e44; animation: sbWkWin .55s ease both; }
@keyframes sbWkWin { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
.sb-wk-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sb-wk-tile {
  min-width: 54px; min-height: 54px; border-radius: 12px; cursor: pointer;
  border: none; font-family: inherit; font-weight: 900; font-size: 1.55rem;
  color: #5d3c05; text-transform: uppercase;
  background: radial-gradient(circle at 38% 32%, #f3c66a, #d99a2b 75%);
  box-shadow: 0 5px 14px rgba(160,110,30,.4), inset 0 2px 4px rgba(255,235,180,.8);
}
.sb-wk-tile:active { transform: scale(.93); }
.sb-wk-tile.used { opacity: .22; pointer-events: none; box-shadow: none; }
.sb-wk-tile.shake { animation: sbWkShake .38s ease; }
@keyframes sbWkShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } 85% { transform: translateX(-3px); } }

/* ---------- companion corner badge ---------- */
.sb-pal { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sb-pal .sb-pal-art {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 2px solid rgba(190,140,60,.55); position: relative;
  box-shadow: 0 3px 10px rgba(140,100,40,.25);
}
.sb-pal .sb-pal-art .sb-art { position: absolute; inset: 0; height: 100%; border-radius: 0; box-shadow: none; }
.sb-pal .sb-pal-say { font-size: .82rem; color: #7a5a28; font-style: italic; font-family: Georgia, serif; }

/* ---------- parent corner (quiet mechanics, off the kid's stage) ---------- */
.sb-pcorner { margin-top: 2px; }
.sb-pcorner summary {
  list-style: none; cursor: pointer; text-align: center;
  font-size: .72rem; font-weight: 700; color: rgba(120,95,55,.65); letter-spacing: .06em;
}
.sb-pcorner summary::-webkit-details-marker { display: none; }
.sb-pcorner p { font-size: .8rem; color: #8a7a5a; margin: 6px 0 0; text-align: center; }

/* ---------- collectible artifact card ---------- */
.sb-artifact {
  position: relative; margin: 6px auto 0; max-width: 320px;
  border: 2px solid rgba(190,140,60,.6); border-radius: 16px;
  background: linear-gradient(160deg, #fffdf4, #f7ecd2);
  padding: 18px 18px 16px; text-align: center;
  box-shadow: 0 10px 26px rgba(140,100,40,.25);
  animation: sbCardIn .7s cubic-bezier(.2,.8,.3,1.2) both .2s;
}
@keyframes sbCardIn { from { opacity: 0; transform: translateY(22px) rotate(-3deg) scale(.92); } to { opacity: 1; transform: none; } }
.sb-artifact .k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #9a6b2a; font-weight: 800; margin-bottom: 6px; }
.sb-artifact .sb-artifact-ic { font-size: 2.2rem; margin: 4px 0 6px; }
.sb-artifact .sb-artifact-label { font-weight: 800; font-size: 1.02rem; color: #2c2415; }
.sb-artifact .sb-stamp {
  position: absolute; right: 10px; top: 8px;
  font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: #b3402e; border: 2px solid #b3402e; border-radius: 6px; padding: 3px 7px;
  transform: rotate(8deg); opacity: 0;
  animation: sbStamp .35s ease-out forwards 1s;
}
@keyframes sbStamp { from { transform: rotate(8deg) scale(2.2); opacity: 0; } to { transform: rotate(8deg) scale(1); opacity: .9; } }

/* ---------- the bookplate ---------- */
.sb-bookplate { text-align: center; padding-top: 8px; font-family: Georgia, serif; }
.sb-bookplate .sb-bp-frame {
  border: 2px solid rgba(170,125,50,.55); border-radius: 14px; padding: 20px 16px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(230,190,110,.18), transparent 60%),
    linear-gradient(180deg, #fffdf4, #f8efda);
  box-shadow: inset 0 0 0 5px rgba(255,252,240,.8), inset 0 0 0 6px rgba(170,125,50,.35);
}
.sb-bookplate .sb-bp-kick { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #9a6b2a; font-weight: 700; }
.sb-bookplate .sb-bp-name {
  font-size: clamp(1.7rem, 5vh, 2.3rem); font-weight: 900; color: #2c2415; margin: 8px 0 2px; line-height: 1.15;
}
.sb-bookplate .sb-bp-sub { font-size: .92rem; color: #7a5a28; font-style: italic; }
.sb-bookplate .sb-bp-rule { width: 70px; height: 2px; background: rgba(170,125,50,.5); margin: 12px auto; border-radius: 2px; }

/* companion emoji badge (when no art file yet) */
.sb-pal .sb-pal-ic {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  border: 2px solid rgba(190,140,60,.55); background: #fffdf4;
  box-shadow: 0 3px 10px rgba(140,100,40,.25);
  animation: sbFloat 4s ease-in-out infinite;
}

/* ===== MAGIC PASS 2 — more wonder, more fun ===== */

/* fireworks canvas sits above everything but never blocks taps */
.sb-fireworks{position:fixed;inset:0;z-index:60;pointer-events:none}

/* companion cheer bubble */
.sb-cheer{position:fixed;z-index:55;max-width:270px;display:flex;gap:8px;align-items:center;
  background:rgba(255,251,240,.97);border:2px solid rgba(212,160,60,.55);border-radius:16px 16px 16px 4px;
  padding:9px 14px;font-weight:700;font-size:.95rem;color:#4a3a1d;
  box-shadow:0 8px 30px rgba(0,0,0,.35);pointer-events:none;
  animation:sbCheerIn .35s cubic-bezier(.2,1.4,.4,1) both;transition:opacity .45s,transform .45s}
.sb-cheer-ic{font-size:1.45rem;animation:sbPalHop .55s ease 2}
.sb-cheer.bye{opacity:0;transform:translateY(-14px)}
@keyframes sbCheerIn{0%{opacity:0;transform:scale(.6) translateY(16px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes sbPalHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* streak badge */
.sb-streak{position:fixed;z-index:56;left:50%;top:14%;transform:translateX(-50%) scale(1);
  background:linear-gradient(135deg,#ffb347,#ff7b3d);color:#fff;font-weight:900;font-size:1.25rem;
  padding:10px 22px;border-radius:999px;box-shadow:0 10px 36px rgba(255,123,61,.5);
  letter-spacing:.5px;pointer-events:none;animation:sbStreakIn .4s cubic-bezier(.2,1.6,.4,1) both;
  transition:opacity .45s,transform .45s}
.sb-streak.bye{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.85)}
@keyframes sbStreakIn{0%{opacity:0;transform:translateX(-50%) scale(.3) rotate(-6deg)}
  70%{transform:translateX(-50%) scale(1.12) rotate(2deg)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* the words the kid just read light up gold, one by one */
.w.sb-word-pop{animation:sbWordPop .9s ease both}
@keyframes sbWordPop{0%{transform:scale(1)}30%{transform:scale(1.22);color:#b07818;
  text-shadow:0 0 14px rgba(255,200,90,.95),0 0 4px rgba(255,220,130,.9)}
  100%{transform:scale(1);text-shadow:none}}

/* progress star trail along the bottom */
.sb-progress{position:fixed;z-index:52;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:7px;pointer-events:none}
.sb-prog-star{font-size:13px;color:rgba(255,255,255,.22);transition:color .4s,transform .4s,text-shadow .4s}
.sb-prog-star.done{color:#ffd76a;text-shadow:0 0 8px rgba(255,205,90,.8)}
.sb-prog-star.here{color:#fff3c4;transform:scale(1.45);text-shadow:0 0 12px rgba(255,225,140,.95);
  animation:sbHerePulse 1.6s ease-in-out infinite}
@keyframes sbHerePulse{0%,100%{transform:scale(1.35)}50%{transform:scale(1.6)}}

/* the whole book pulses gold when a seal unlocks */
.sb-book.sb-glow-pulse{animation:sbBookGlow .95s ease}
@keyframes sbBookGlow{0%{filter:drop-shadow(0 0 0 rgba(255,200,90,0))}
  35%{filter:drop-shadow(0 0 34px rgba(255,200,90,.85))}
  100%{filter:drop-shadow(0 0 0 rgba(255,200,90,0))}}

/* cover title gets a slow golden shimmer */
.sb-cover-title{background:linear-gradient(100deg,#fff7e0 20%,#ffd76a 38%,#fff7e0 52%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:220% 100%;animation:sbTitleShimmer 5.5s ease-in-out infinite}
@keyframes sbTitleShimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}

/* cliffhanger line: ember heartbeat */
.sb-cliffline{animation:sbCliffPulse 2.2s ease-in-out infinite}
@keyframes sbCliffPulse{0%,100%{text-shadow:0 0 6px rgba(255,140,60,.25)}
  50%{text-shadow:0 0 22px rgba(255,150,60,.75),0 0 6px rgba(255,190,90,.5)}}

/* the closed cover gently floats — it's alive before the first tap */
.sb-cover{animation:sbCoverIn .9s cubic-bezier(.2,.8,.25,1) both,sbCoverFloat 4.5s ease-in-out 1.1s infinite}
.sb-cover.opening{animation:sbCoverOpen .7s cubic-bezier(.6,0,.3,1) both}
@keyframes sbCoverFloat{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-9px) rotate(.3deg)}}

/* the story die — a real thing the kid taps */
.sb-die{display:block;margin:14px auto 8px;font-size:3.4rem;line-height:1;background:none;border:none;
  cursor:pointer;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));transition:transform .2s;
  animation:sbDieBeckon 2.4s ease-in-out infinite}
.sb-die:hover{transform:scale(1.12)}
.sb-die.rolling{animation:sbDieTumble .55s linear infinite}
.sb-die.landed{animation:sbDieLand .55s cubic-bezier(.2,1.8,.4,1)}
@keyframes sbDieBeckon{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes sbDieTumble{0%{transform:rotate(0) scale(1.05)}100%{transform:rotate(360deg) scale(1.05)}}
@keyframes sbDieLand{0%{transform:scale(1.7) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
.sb-die-outs{margin:6px 0 4px}
.sb-die-out{padding:5px 10px;border-radius:9px;margin:3px 0;font-size:.92rem;color:#6b5a35;transition:all .35s}
.sb-die-out.hit{background:linear-gradient(135deg,rgba(255,214,106,.4),rgba(255,184,77,.28));
  color:#4a3a10;font-weight:800;transform:scale(1.04);box-shadow:0 4px 16px rgba(212,160,60,.3)}

/* ============ MAGIC PASS 3: margin sketches + world-entry doorway ============ */

/* margin doodles — pencil sketches that draw themselves on */
.sb-page-in{z-index:1}
.sb-doodle{position:absolute;z-index:0;width:46px;height:46px;pointer-events:none;opacity:.5}
.sb-doodle.tl{top:14px;left:14px}
.sb-doodle.tr{top:14px;right:16px}
.sb-doodle.bl{bottom:34px;left:14px}
.sb-doodle.br{bottom:34px;right:16px}
.sb-doodle svg{width:100%;height:100%;overflow:visible}
.sb-doodle path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:101;stroke-dashoffset:101;
  animation:sbDraw 1.5s ease forwards}
@keyframes sbDraw{to{stroke-dashoffset:0}}
@media (max-width:560px){.sb-doodle{width:34px;height:34px;opacity:.38}}

/* world-entry doorway */
.sb-enter{position:absolute;inset:0;z-index:70;cursor:pointer;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(20,16,40,.15),rgba(6,8,16,.55));
  transition:opacity .65s ease}
.sb-enter.bye{opacity:0;pointer-events:none}
.sb-enter-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sb-enter-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sb-enter-heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none}
.sb-enter-emoji{font-size:clamp(3.4rem,9vw,5.6rem);line-height:1;
  filter:drop-shadow(0 0 28px rgba(255,215,120,.85));
  animation:sbEnterEmoji 1.9s cubic-bezier(.2,1.2,.3,1) both}
.sb-enter-kick{margin-top:14px;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,245,220,.75);animation:sbEnterFade .8s ease .55s both}
.sb-enter-name{font-family:Georgia,'Times New Roman',serif;font-weight:800;
  font-size:clamp(1.7rem,5.4vw,3rem);letter-spacing:.04em;margin-top:4px;
  text-shadow:0 0 26px rgba(255,210,110,.55),0 2px 10px rgba(0,0,0,.5);
  animation:sbEnterName 1s cubic-bezier(.2,1.4,.35,1) .45s both}
@keyframes sbEnterEmoji{0%{opacity:0;transform:scale(.2) rotate(-14deg)}
  60%{opacity:1;transform:scale(1.18) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sbEnterName{0%{opacity:0;transform:translateY(26px) scale(.85)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sbEnterFade{0%{opacity:0}100%{opacity:1}}