/* ---- individual story (reader) page ---- */
.reader{max-width:850px; margin:0 auto; padding:0 22px; position:relative; z-index:1;}

.story-hero{text-align:center; padding:46px 0 8px;}
.story-hero .back{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-weight:600;
  font-size:14px; margin-bottom:22px;}
.story-hero .back:hover{color:#fff;}
.story-hero .cover{width:320px; max-width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px;
  border:1px solid var(--line); box-shadow:0 30px 70px -28px #000d; display:block; margin:0 auto 22px;}
.story-hero h1{font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(30px,5vw,50px);
  line-height:1.06; margin:.1em 0 .2em;
  background:linear-gradient(92deg,#ffe1a3,#ff9d5c 50%,#c79bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.story-hero .sub{color:var(--muted); font-size:16px; margin:0 0 16px;}
.story-hero .meta{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.story-hero .tag{font-size:12.5px; font-weight:600; color:var(--text); background:var(--chip);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;}
.story-hero .tag.gold{background:#f6b73c22; border-color:#f6b73c55; color:#ffd98a;}

.divider{width:60px; height:3px; margin:30px auto 8px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));}

.chapter{position:relative; margin:40px 0; padding:26px clamp(20px,3.2vw,42px) 34px; color:#3c2c17;
  background:linear-gradient(135deg,#ecdab4,#dcc69b 58%,#cdb585);
  border:1px solid #c4ab73; box-shadow:inset 0 0 90px #8a6a3a55, 0 18px 40px -26px #000a;
  clip-path:polygon(0% 7px,3% 0,18% 5px,34% 0,52% 7px,70% 0,86% 5px,100% 2px,99% 18%,100% 36%,98.6% 55%,100% 72%,99% 90%,100% 100%,82% calc(100% - 6px),64% 100%,46% calc(100% - 5px),28% 100%,12% calc(100% - 6px),0% 100%,1% 80%,0% 60%,1.2% 40%,0% 20%);
  opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.chapter:nth-of-type(even){clip-path:polygon(0% 3px,14% 0,30% 6px,48% 0,66% 5px,82% 0,97% 6px,100% 7px,99% 20%,100% 40%,98.8% 58%,100% 76%,99% 92%,100% 99.4%,86% 100%,68% calc(100% - 6px),50% 100%,32% calc(100% - 5px),16% 100%,2% calc(100% - 4px),0% 99%,1% 78%,0% 58%,1.4% 38%,0% 18%);}
.chapter.in{opacity:1; transform:none;}
.chapter::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:multiply; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.chapter > *{position:relative; z-index:1;}
.chapter .pic{width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:8px;
  border:1px solid #b89a63; box-shadow:0 12px 28px -16px #0009;}
.chapter .num{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 6px 16px -4px var(--accent2);
  margin:0;}
.chapter .chap-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 0;}
.chapter .chap-head .listen{margin:0;}
.chapter h2{font-family:'Lora',serif; font-weight:600; color:#36260f;
  font-size:clamp(22px,3vw,28px); margin:10px 0 8px;}
.chapter p{font-family:'Lora',serif; font-size:clamp(17px,2.1vw,19px); line-height:1.85; color:#43341f; margin:0 0 1.15em;}
.chapter p:last-child{margin-bottom:0;}

.story-end{text-align:center; padding:40px 16px 8px;}
.story-end .moon{font-size:46px; filter:drop-shadow(0 0 24px #f6b73caa); display:inline-block;}
.story-end .end{font-family:'Fredoka',sans-serif; font-size:26px; color:var(--gold);
  text-shadow:0 2px 20px #f6b73c55; margin:.3em 0;}
.story-end p{color:var(--muted); margin:.2em 0 22px;}
.story-end .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

@media (max-width:640px){
  .reader{padding:0 14px;}
  .chapter .pic{aspect-ratio:4/3;}
}
@media (prefers-reduced-motion:reduce){ .chapter{opacity:1; transform:none;} }

/* ---- story page audiobook player ---- */
body.has-player{padding-bottom:92px;}
.listen-all{margin-top:6px;}
.chapter .listen{margin:12px 0 0; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:14px;
  color:#5a4422; cursor:pointer; border:1.5px solid #00000026; background:#ffffff66; border-radius:999px;
  padding:8px 15px; display:inline-flex; align-items:center; gap:7px; transition:all .15s;}
.chapter .listen:hover{background:#ffffff99; border-color:#00000040;}
.chapter .listen.playing{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent;}
.chapter .listen .ico{font-size:11px;}
.chapter.active{}
.chapter.active .pic{box-shadow:0 0 0 2px var(--gold), 0 26px 60px -24px #000d;}

#bar{position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:linear-gradient(180deg, rgba(36,29,72,.72), rgba(24,19,48,.92));
  backdrop-filter:blur(16px); border-top:1px solid #ffffff1f; color:#fff;
  display:flex; align-items:center; gap:14px; padding:11px clamp(12px,3vw,28px); box-shadow:0 -12px 36px -14px #000c;}
#bar.hidden{transform:translateY(110%); transition:transform .3s ease;}
#bar button{border:none; background:none; color:#fff; cursor:pointer; font-size:18px; width:40px; height:40px;
  border-radius:50%; display:grid; place-items:center; transition:background .15s;}
#bar button:hover{background:#ffffff22;}
#bar #pp{background:linear-gradient(135deg,var(--accent),var(--accent2)); width:48px; height:48px; font-size:20px;}
#bar .meta{min-width:0; flex:0 1 240px;}
#bar .meta .lbl{font-family:'Fredoka',sans-serif; font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#bar .meta .small{font-size:12px; color:#cdbfff;}
#bar .track{flex:1 1 auto; display:flex; align-items:center; gap:10px;}
#seek{flex:1 1 auto; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; background:#ffffff2e; outline:none; cursor:pointer;}
#seek::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px #f6b73c44;}
#seek::-moz-range-thumb{width:15px; height:15px; border:none; border-radius:50%; background:var(--gold);}
#time{font-size:12px; color:#cdbfff; min-width:88px; text-align:right; font-variant-numeric:tabular-nums;}
@media (max-width:640px){ #bar .meta{display:none;} #time{min-width:74px;} }

/* ---- voice picker (beside Listen to the story) ---- */
.hero-listen{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:6px;}
/* Equalize heights: the ghost buttons (Queue/Save) carry a 1.5px border, the
   primary (Listen) has none — give it a transparent border so all three match. */
.hero-listen .btn.primary{border:1.5px solid transparent;}
/* SVG line icons in the hero action buttons (Listen / Queue), matching the SVG Save heart */
.hero-listen .btn svg, .hero-listen .qadd svg{width:17px; height:17px; flex:0 0 auto;}
.voicepick{display:inline-flex; align-items:center; gap:6px; background:#ffffff10; border:1px solid var(--line); border-radius:999px; padding:5px 6px 5px 13px;}
.voicepick .vp-lbl{font-size:12px; color:var(--muted); font-weight:600; margin-right:2px;}
.voicepick .vp{font-family:'Baloo 2',sans-serif; font-weight:600; font-size:13px; color:var(--text); cursor:pointer; border:none; background:transparent; border-radius:999px; padding:7px 13px; transition:all .15s;}
.voicepick .vp:hover{background:#ffffff18;}
.voicepick .vp.active{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;}
@media (max-width:520px){ .hero-listen{flex-direction:column; gap:10px;} }
/* read-along: highlight the sentence currently being narrated */
.body .rs{ transition:box-shadow .15s ease; }
.body .rs.reading{ box-shadow:inset 0 -0.14em 0 rgba(214,90,20,.7); }