/* =========================================================
   STORYBOOK — Phase 3 complete rewrite
   Shelf · Reader · Page-flip · Themes · Text settings · Narration
   ========================================================= */

/* ── Reader theme tokens ────────────────────────────────── */
.reader-overlay { --rd-bg: #0a0a0d; --rd-text: #e7e5e1; --rd-page-bg: #131317; --rd-page-border: rgba(255,255,255,.10); --rd-muted: #a3a1a8; }
.reader-overlay.theme-light  { --rd-bg: #f4f1eb; --rd-text: #1a1916; --rd-page-bg: #ffffff; --rd-page-border: rgba(0,0,0,.12); --rd-muted: #6c6a72; }
.reader-overlay.theme-sepia  { --rd-bg: #2e2014; --rd-text: #e8d8b0; --rd-page-bg: #3a2a18; --rd-page-border: rgba(232,216,176,.15); --rd-muted: #c4a86e; }
.reader-overlay.theme-night  { --rd-bg: #04060a; --rd-text: #c0d0e8; --rd-page-bg: #060d16; --rd-page-border: rgba(150,180,220,.10); --rd-muted: #6a8098; }

/* ── Storybook shelf page ──────────────────────────────── */
.shelf-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--color-surface-border);
  position: relative;
  overflow: hidden;
}
.shelf-hero .hero-chakra-bg { opacity: .05; }

.shelf-search-bar {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  max-width: 520px;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
}
.shelf-search-bar input { flex: 1; background: none; border: none; color: var(--color-white); }

.shelf-meta-row {
  display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-5);
}
.shelf-meta-stat .figure { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--color-white); display: block; }
.shelf-meta-stat .label  { font-size: var(--fs-xs); color: var(--color-text-dim); text-transform: uppercase; letter-spacing: .06em; }

/* ── Category strip ────────────────────────────────────── */
.shelf-category-strip {
  display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-6); scrollbar-width: thin;
  scrollbar-color: var(--color-surface-border) transparent;
}

/* ── Section label ─────────────────────────────────────── */
.shelf-section { margin-bottom: var(--sp-8); }
.shelf-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--sp-5); flex-wrap: wrap; gap: var(--sp-4);
}

/* ── Featured horizontal card ──────────────────────────── */
.featured-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-surface-border);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.featured-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--shadow-red-glow); }
.featured-cover {
  aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem; position: relative;
  overflow: hidden;
}
.featured-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.25), transparent);
}
.featured-body {
  padding: var(--sp-7);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--color-surface);
}
.featured-label {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-saffron); margin-bottom: var(--sp-3);
}
.featured-title { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.featured-sub   { color: var(--color-text-muted); font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.featured-footer{ display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.read-time-badge { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-dim); }

/* ── Standard shelf card ────────────────────────────────── */
.shelf-card {
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  position: relative;
}
.shelf-card:hover { transform: translateY(-6px) rotate(-0.4deg); border-color: var(--color-surface-border-strong); box-shadow: var(--shadow-lg); }
.shelf-card-cover {
  aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; position: relative; overflow: hidden;
}
.shelf-card-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7));
}
.shelf-card-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.shelf-card-title { font-size: var(--fs-md); color: var(--color-white); }
.shelf-card-sub   { font-size: var(--fs-xs); color: var(--color-text-muted); flex: 1; }
.shelf-card-meta  { display: flex; gap: var(--sp-3); align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--color-surface-border); font-size: var(--fs-xs); color: var(--color-text-dim); font-family: var(--font-mono); }

.shelf-card .progress-indicator {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-red);
}
.shelf-card .bookmark-badge {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--color-saffron); z-index: 2;
}

/* ── Horizontal scroll strip for mobile ────────────────── */
.shelf-scroll-strip {
  display: flex; gap: var(--sp-5); overflow-x: auto;
  padding-bottom: var(--sp-3); scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--color-surface-border) transparent;
}
.shelf-scroll-strip .shelf-card { flex: 0 0 220px; scroll-snap-align: start; }

/* ── Grid for tablets/desktop ───────────────────────────── */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-5);
}

/* ═══════════════════════════════════════════════════════
   FULLSCREEN READER
   ═══════════════════════════════════════════════════════ */
.reader-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: var(--rd-bg);
  color: var(--rd-text);
  display: none; flex-direction: column;
  transition: background var(--dur-base);
}
.reader-overlay.open { display: flex; }

/* ── Top bar ──────────────────────────────────────────── */
.reader-topbar {
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--rd-page-border);
  flex-shrink: 0; z-index: 2; position: relative;
}
.reader-brand { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rd-muted); }
.reader-story-title {
  flex: 1; text-align: center; font-family: var(--font-display-en); font-weight: 600;
  font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--rd-text);
}
.reader-top-controls { display: flex; gap: var(--sp-2); flex-shrink: 0; }

.reader-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--rd-page-border);
  display: grid; place-items: center;
  color: var(--rd-muted); font-size: var(--fs-sm);
  transition: all var(--dur-fast); position: relative;
}
.reader-icon-btn:hover, .reader-icon-btn.active { color: var(--rd-text); border-color: var(--color-saffron); }
.reader-icon-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85); color: #fff;
  font-size: 10px; padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast);
}
.reader-icon-btn:hover[data-tooltip]::after { opacity: 1; }

/* ── Progress bar (top) ───────────────────────────────── */
.reader-progress-strip {
  height: 3px; background: var(--rd-page-border); position: relative; flex-shrink: 0;
}
.reader-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--gradient-red);
  transition: width var(--dur-base) var(--ease-out);
}

/* ── Stage (page area) ────────────────────────────────── */
.reader-stage {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; perspective: 2000px;
}

/* ── The page card ────────────────────────────────────── */
.reader-page {
  width: min(94vw, 620px);
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  background: var(--rd-page-bg);
  border: 1px solid var(--rd-page-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: background var(--dur-base), border-color var(--dur-base);
}
/* Custom scrollbar inside page */
.reader-page::-webkit-scrollbar { width: 4px; }
.reader-page::-webkit-scrollbar-thumb { background: var(--rd-page-border); border-radius: 999px; }

.reader-page .page-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rd-muted);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.reader-page .page-title {
  font-size: var(--fs-xl); color: var(--rd-text);
  margin-bottom: var(--sp-4); font-family: var(--font-display-en);
}
html[lang="hi"] .reader-page .page-title { font-family: var(--font-display-hi); }

.reader-page .page-illustration {
  font-size: 5rem; line-height: 1;
  text-align: center; margin-bottom: var(--sp-5);
  opacity: .85;
}
.reader-page .page-text {
  font-size: var(--rd-font-size, 1.05rem);
  line-height: var(--rd-line-height, 1.85);
  color: var(--rd-text);
  font-family: var(--font-body-en);
}
html[lang="hi"] .reader-page .page-text { font-family: var(--font-body-hi); }

/* Narration word highlight */
.reader-page .page-text .speaking { background: rgba(255,153,51,.25); border-radius: 3px; }

.reader-page .page-number {
  position: sticky; bottom: 0; right: 0; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rd-muted);
  padding-top: var(--sp-4); margin-top: var(--sp-4);
  border-top: 1px solid var(--rd-page-border);
  background: var(--rd-page-bg);
}

/* ── Page flip animations ─────────────────────────────── */
@keyframes flip-out-next {
  0%   { transform: rotateY(0deg) scale(1); opacity: 1; }
  50%  { transform: rotateY(-25deg) scale(.97); opacity: .5; }
  100% { transform: rotateY(-90deg) scale(.94); opacity: 0; }
}
@keyframes flip-in-next {
  0%   { transform: rotateY(90deg) scale(.94); opacity: 0; }
  50%  { transform: rotateY(20deg) scale(.97); opacity: .5; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
@keyframes flip-out-prev {
  0%   { transform: rotateY(0deg) scale(1); opacity: 1; }
  50%  { transform: rotateY(25deg) scale(.97); opacity: .5; }
  100% { transform: rotateY(90deg) scale(.94); opacity: 0; }
}
@keyframes flip-in-prev {
  0%   { transform: rotateY(-90deg) scale(.94); opacity: 0; }
  50%  { transform: rotateY(-20deg) scale(.97); opacity: .5; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.reader-page.flip-out-next { animation: flip-out-next 280ms var(--ease-in-out) forwards; }
.reader-page.flip-in-next  { animation: flip-in-next  280ms var(--ease-in-out) forwards; }
.reader-page.flip-out-prev { animation: flip-out-prev 280ms var(--ease-in-out) forwards; }
.reader-page.flip-in-prev  { animation: flip-in-prev  280ms var(--ease-in-out) forwards; }

/* ── Nav arrows ───────────────────────────────────────── */
.reader-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--rd-page-bg); border: 2px solid var(--color-saffron);
  display: grid; place-items: center; color: var(--color-saffron);
  box-shadow: 0 0 0 4px rgba(255, 153, 51, .12);
  z-index: 5; transition: all var(--dur-fast);
}
.reader-nav svg, .reader-nav { font-size: 1.3rem; }
.reader-nav:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; box-shadow: 0 0 0 4px rgba(193, 39, 45, .18); }
.reader-nav:disabled { opacity: .25; pointer-events: none; box-shadow: none; }
.reader-nav.prev { left: var(--sp-5); }
.reader-nav.next { right: var(--sp-5); }

/* ── Bottom bar ───────────────────────────────────────── */
.reader-bottombar {
  height: 60px;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-6);
  border-top: 1px solid var(--rd-page-border);
  flex-shrink: 0; z-index: 2;
}
.reader-page-counter {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rd-muted);
  white-space: nowrap; min-width: 60px;
}
.reader-time-left  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rd-muted); }
.reader-bottom-controls { display: flex; gap: var(--sp-2); margin-left: auto; }

/* ── Settings panel (slide-up) ────────────────────────── */
.reader-settings-panel {
  position: absolute; bottom: 60px; right: 0; left: 0; z-index: 10;
  background: var(--rd-page-bg);
  border-top: 1px solid var(--rd-page-border);
  padding: var(--sp-5) var(--sp-6);
  display: none; grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.reader-settings-panel.open { display: grid; transform: translateY(0); }
.settings-group h4 { font-size: var(--fs-xs); color: var(--rd-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-3); }
.settings-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.settings-btn {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill);
  border: 1px solid var(--rd-page-border); font-size: var(--fs-xs);
  color: var(--rd-muted); transition: all var(--dur-fast);
}
.settings-btn:hover, .settings-btn.active { color: var(--rd-text); border-color: var(--color-saffron); }
.settings-slider { display: flex; align-items: center; gap: var(--sp-3); }
.settings-slider input[type=range] {
  flex: 1; accent-color: var(--color-red-bright); cursor: pointer;
}
.settings-slider span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rd-muted); min-width: 30px; }

/* ── Narration panel (slide-up) ───────────────────────── */
.reader-narration-panel {
  position: absolute; bottom: 60px; left: 0; right: 0; z-index: 10;
  background: var(--rd-page-bg); border-top: 1px solid var(--rd-page-border);
  padding: var(--sp-5) var(--sp-6);
  display: none;
}
.reader-narration-panel.open { display: block; }
.narration-controls { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.narration-play-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-red); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.narration-label { font-size: var(--fs-sm); color: var(--rd-text); flex: 1; }
.narration-speed-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.narration-speed-row label { font-size: var(--fs-xs); color: var(--rd-muted); }
.voice-select {
  background: var(--rd-page-bg); border: 1px solid var(--rd-page-border);
  color: var(--rd-text); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs);
}

/* ── End-of-story panel ───────────────────────────────── */
.story-end-panel {
  width: min(94vw, 620px);
  background: var(--rd-page-bg);
  border: 1px solid var(--rd-page-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  text-align: center;
  display: none;
}
.story-end-panel.show { display: block; }
.story-end-emoji { font-size: 3.5rem; margin-bottom: var(--sp-4); }
.story-end-title { font-size: var(--fs-xl); color: var(--rd-text); margin-bottom: var(--sp-2); }
.story-end-sub   { color: var(--rd-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.reaction-row { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.reaction-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md); border: 1px solid var(--rd-page-border);
  background: var(--rd-page-bg); color: var(--rd-text);
  transition: all var(--dur-fast); min-width: 80px;
}
.reaction-btn .emoji { font-size: var(--fs-xl); }
.reaction-btn span   { font-size: var(--fs-xs); color: var(--rd-muted); }
.reaction-btn:hover, .reaction-btn.reacted { border-color: var(--color-saffron); background: rgba(255,153,51,.08); }
.story-end-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.star-rating-row { display: flex; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-5); font-size: var(--fs-2xl); }
.end-star { cursor: pointer; color: var(--rd-muted); transition: color var(--dur-fast), transform var(--dur-fast); }
.end-star:hover, .end-star.rated { color: #f59e0b; transform: scale(1.15); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .featured-card { grid-template-columns: 1fr; }
  .featured-cover { aspect-ratio: 16/7; }
  .featured-title { font-size: var(--fs-2xl); }
}
@media (max-width: 640px) {
  .reader-topbar { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .reader-page { padding: var(--sp-5); }
  .reader-nav.prev { left: var(--sp-2); }
  .reader-nav.next { right: var(--sp-2); }
  .reader-nav { width: 40px; height: 40px; }
  .reader-bottombar { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .reader-settings-panel { grid-template-columns: 1fr; }
  .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}