/* ---- 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:230px; max-width:60%; 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{margin:44px 0; opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;}
.chapter.in{opacity:1; transform:none;}
.chapter .pic{width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:22px;
  border:1px solid var(--line); box-shadow:0 26px 60px -28px #000d;}
.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:20px 0 0;}
.chapter h2{font-family:'Fredoka',sans-serif; font-weight:600; color:#fff;
  font-size:clamp(21px,3vw,28px); margin:10px 0 6px; text-shadow:0 2px 16px #00000040;}
.chapter p{font-size:clamp(17px,2.1vw,19px); line-height:1.85; color:#ded7f5; margin: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:var(--text); cursor:pointer; border:1.5px solid #ffffff33; background:#ffffff14; border-radius:999px;
  padding:8px 15px; display:inline-flex; align-items:center; gap:7px; transition:all .15s; backdrop-filter:blur(4px);}
.chapter .listen:hover{background:#ffffff26; border-color:#ffffff55;}
.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;} }