/* ================================
   HOME — FEATURED BANNER
   ================================ */
.home-container {
  width: 100%;
  max-width: 100%;
  padding-bottom: 2em;
  position: relative;
  z-index: 10;
}

.home-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 1em 0;
}

.signout-btn {
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.18);
  color: #666;
  font-size: 0.78em;
  font-weight: 600;
  padding: 0.35em 0.9em;
  border-radius: 2em;
  cursor: pointer;
  opacity: 0.7;
}

.signout-btn:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

.featured-banner {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin: 0.5em 1em 0.5em;
  padding: 1.8em 2em;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: transform 0.18s, box-shadow 0.18s;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}
.featured-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  border-radius: 24px;
  pointer-events: none;
}
.featured-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
}
.featured-emoji {
  font-size: 5.5em;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
.featured-text {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.featured-badge {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 0.85em;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.featured-title {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.7em;
  font-weight: 900;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  line-height: 1.15;
}
.featured-tagline {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1em;
  color: rgba(255,255,255,0.88);
  margin: 0;
  font-weight: 600;
}
.featured-btn {
  margin-top: 0.6em !important;
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
  border-radius: 2em !important;
  padding: 0.5em 1.6em !important;
  font-size: 1em !important;
  min-width: unset !important;
  min-height: unset !important;
  width: fit-content !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.featured-btn:hover {
  background: rgba(255,255,255,0.45) !important;
  color: #fff !important;
  transform: scale(1.06) rotate(0deg) !important;
  border-color: #fff !important;
}

/* ── HOME — ANIMATIONS ──────────────────────────────────────────────── */

/* Featured emoji gentle bob */
@keyframes hero-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-14px) rotate(3deg); }
}
.featured-emoji {
  animation: hero-bob 2.8s ease-in-out infinite;
}

/* Banner shimmer sweep */
@keyframes banner-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(300%); }
}
.featured-banner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
  z-index: 2;
  animation: banner-shimmer 3.5s ease-in-out infinite;
}

/* Book card pop-in on load (delay set via inline style for stagger) */
@keyframes card-pop-in {
  0%   { opacity: 0; transform: translateY(28px) scale(0.82); }
  65%  { transform: translateY(-5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.book-card {
  animation: card-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Category title slide-in (delay set via inline style for stagger) */
@keyframes cat-slide-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cat-title {
  animation: cat-slide-in 0.35s ease both;
}

/* Floating sparkle elements injected by JS */
@keyframes sparkle-float {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; }
  8%   { opacity: 0.75; }
  88%  { opacity: 0.6; }
  100% { transform: translateY(-105vh) rotate(360deg) scale(0.5); opacity: 0; }
}
.home-sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkle-float linear infinite;
}

/* ================================
   HOME — CATEGORY ROWS
   ================================ */
.cat-section {
  margin: 1.4em 0 0;
}
.cat-title {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.35em;
  font-weight: 900;
  color: #2E7D32;
  margin: 0 0 0.5em 1.2em;
  letter-spacing: 0.02em;
}
.book-row {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4em 1.2em 1.2em;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.book-row::-webkit-scrollbar { display: none; }

/* ================================
   HOME — BOOK CARDS
   ================================ */
.book-card {
  flex: 0 0 130px;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.18s, box-shadow 0.18s;
  outline: none;
}
.book-card:hover, .book-card:focus {
  transform: translateY(-6px) scale(1.04);
}
.book-card:hover .book-cover, .book-card:focus .book-cover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}
.book-cover {
  width: 130px;
  height: 180px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 5px 16px rgba(0,0,0,0.15);
  overflow: hidden;
}
.book-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  border-radius: 14px;
  pointer-events: none;
}
.book-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.book-emoji {
  font-size: 3.8em;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
  z-index: 1;
}
.book-title {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 0.82em;
  font-weight: 800;
  color: #2E7D32;
  text-align: center;
  margin: 0.5em 0 0;
  padding: 0 4px;
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
}

/* story page top padding now that main is top-aligned */
.story-page-container {
  margin-top: 1.5em;
}


/* ================================
   PWA INSTALL — floating pill
   ================================ */
.install-fab {
  position: fixed !important;
  bottom: 80px !important;
  right: 1em !important;
  z-index: 150 !important;
  background: linear-gradient(135deg, #FFC83D, #ffb300) !important;
  color: #1a3300 !important;
  border: none !important;
  border-radius: 2em !important;
  padding: 0.55em 1.1em !important;
  font-size: 0.88em !important;
  font-weight: 800 !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
  cursor: pointer !important;
}

/* ================================
   PWA INSTALL — slide-up banner
   ================================ */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 1em 1.4em;
  background: #fff;
  box-shadow: 0 -4px 24px rgba(46,125,50,0.18);
  border-top: 3px solid #2E7D32;
  animation: slideUp 0.38s cubic-bezier(0.22,1,0.36,1);
  flex-wrap: wrap;
}
.install-banner-hide {
  animation: slideDown 0.36s ease forwards !important;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}
.install-banner-emoji {
  font-size: 2.2em;
  flex-shrink: 0;
}
.install-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  min-width: 160px;
}
.install-banner-text strong {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1em;
  color: #2E7D32;
  font-weight: 900;
}
.install-banner-text span {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 0.82em;
  color: #666;
}
.install-banner-btn {
  background: linear-gradient(90deg, #2E7D32, #4CAF50) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2em !important;
  padding: 0.55em 1.4em !important;
  font-size: 0.95em !important;
  min-width: unset !important;
  min-height: unset !important;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(46,125,50,0.3) !important;
}
.install-banner-btn:hover {
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: 0 6px 20px rgba(46,125,50,0.4) !important;
}
.install-banner-ios {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 0.88em;
  color: #2E7D32;
  white-space: nowrap;
  flex-shrink: 0;
}
.install-banner-dismiss {
  background: none !important;
  border: none !important;
  color: #aaa !important;
  font-size: 1.1em !important;
  min-width: unset !important;
  min-height: unset !important;
  padding: 0.3em 0.5em !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.install-banner-dismiss:hover {
  color: #2E7D32 !important;
  transform: scale(1.1) rotate(0deg) !important;
  background: none !important;
}

/* Read-to-me floating action button (visible during story reading) */
.tts-fab {
  position: fixed !important;
  top: 0.7em !important;
  right: 0.7em !important;
  z-index: 150 !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 40px !important;
  width: auto !important;
  border-radius: 999px !important;
  background: rgba(46,125,50,0.88) !important;
  color: rgba(255,255,255,0.85) !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  font-size: 1em !important;
  padding: 0 1em !important;
  gap: 0.35em !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  backdrop-filter: blur(4px) !important;
  white-space: nowrap !important;
}
body.in-story .tts-fab {
  display: flex !important;
}
.tts-fab-label {
  font-size: 0.78em;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  letter-spacing: 0.01em;
}
.tts-fab.tts-active {
  border-color: #FFC83D !important;
  color: #FFC83D !important;
  background: rgba(46,125,50,0.95) !important;
  box-shadow: 0 0 16px rgba(255,200,61,0.45), 0 4px 14px rgba(0,0,0,0.22) !important;
}
.tts-fab.tts-reading {
  animation: pulse-read 1.3s ease-in-out infinite !important;
}

/* Piper TTS settings section */
.piper-section {
  margin-top: 1.6em;
  padding: 1.2em 1.4em;
  background: #f0f7ff;
  border-radius: 1.2em;
  border: 2px solid #b3d4f7;
}
.piper-title {
  font-size: 1.1em;
  font-weight: 800;
  color: #1565C0;
  margin-bottom: 0.3em;
}
.piper-desc {
  font-size: 0.9em;
  color: #444;
  margin: 0 0 0.7em;
  line-height: 1.45;
}
.piper-status {
  font-size: 0.9em;
  font-weight: 700;
  margin-bottom: 0.7em;
  color: #333;
}
.piper-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.piper-btns button {
  font-size: 0.88em !important;
  padding: 0.5em 1em !important;
  border-radius: 2em !important;
}
.piper-bar-track {
  background: #dde8f5;
  border-radius: 1em;
  height: 12px;
  overflow: hidden;
}
.piper-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #42a5f5, #1565C0);
  border-radius: 1em;
  transition: width 0.3s ease;
}

/* Read prompt overlay */
#content {
  position: relative;
}
.read-prompt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(46, 125, 50, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
  border-radius: 0;
}
.read-prompt-box {
  background: #fff;
  border-radius: 24px;
  padding: 2em 2.5em;
  text-align: center;
  box-shadow: 0 8px 40px rgba(46,125,50,0.3);
  max-width: 360px;
  width: 90%;
}
.read-prompt-text {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.5em;
  color: #2E7D32;
  font-weight: 800;
  margin: 0.4em 0;
  line-height: 1.3;
}

/* Read to Me — word-by-word highlight */
.story-word {
  display: inline;
  border-radius: 5px;
  transition: background 0.1s, box-shadow 0.1s;
  padding: 0 1px;
  cursor: pointer;
}

.story-word:hover {
  background: rgba(255, 200, 61, 0.45);
  box-shadow: 0 1px 6px rgba(255, 200, 61, 0.25);
}

.story-word.highlight {
  background: #FFC83D;
  border-radius: 7px;
  padding: 0 4px;
  box-shadow: 0 2px 10px rgba(255, 200, 61, 0.55);
  color: #2E7D32;
}

/* Read button pulsing animation while active */
#readMeBtn.reading-active {
  background: linear-gradient(90deg, #A5D6A7 0%, #FFF9C4 100%) !important;
  border-color: #2E7D32 !important;
  animation: pulse-read 1.3s ease-in-out infinite !important;
}

@keyframes pulse-read {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(46, 125, 50, 0); }
}

button:disabled, .answer-buttons button:disabled, button.disabled, .answer-buttons button.disabled {
  background: #C8E6C9 !important;
  color: #bcbcbc !important;
  border-color: #bcbcbc !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  box-shadow: none !important;
  filter: grayscale(0.3);
}
/* Make story card title text wrap and not too long */
.story-card h2 {
    font-family: "Nunito", cursive, sans-serif !important;
    color: #2E7D32 !important;
    font-weight: 800;
    letter-spacing: 0.04em;
  max-width: 18ch;
  margin: 0.5em auto 0 auto;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  font-size: 1.3em;
  line-height: 1.1;
}
/* Story media — fills the right page of the open book */
.story-section video,
.story-video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer;
}
/* Fade-in animation for story images */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}
/* Story page images — fills the right page of the open book */
.story-section img,
.story-section .story-image,
.story-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Constrain cover images in story cards */
.story-card img {
  max-width: 260px;
  max-height: 200px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 1em auto;
  object-fit: contain;
  border-radius: 10px;
  background: #E8F5E9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
/* ================================
   BOTTOM NAV TAB BAR
   ================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 76px;
  background: #fff;
  display: flex;
  align-items: stretch;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.06), 0 -4px 24px rgba(0,0,0,0.07);
  border-radius: 20px 20px 0 0;
  z-index: 100;
  overflow: hidden;
}
body.dark .bottom-nav {
  background: #1c2b1c;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.35);
}

/* ── NAV LOGO (left slot, same flex width as tab buttons) ── */
.nav-logo-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 3px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.nav-logo-btn:hover  { opacity: 0.8; }
.nav-logo-btn:active { opacity: 0.55; }
.nav-logo-img {
  height: 70px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
body.sw-mode .bottom-nav,
body.in-story .bottom-nav {
  display: none;
}
body.in-story main {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
body.in-story .story-page-container.book {
  margin: 0 !important;
  flex: 1;
}

/* Desktop / large tablet — book pinned edge-to-edge, question overlays bottom */
@media (min-width: 641px) and (min-height: 501px) {
  body.in-story main {
    overflow: hidden !important;
  }
  body.in-story .story-page-container.book {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    flex: none !important;
    z-index: 2 !important;
    transition: bottom 0.3s ease !important;
  }
  body.in-story .book .book-page {
    min-height: 0 !important;
  }
  body.in-story .story-question-area {
    position: fixed !important;
    bottom: 1.8em !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(88vw, 780px) !important;
    max-width: 780px !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 1.4em 1.8em 1.8em !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: #fff !important;
    border-radius: 2.2em !important;
    border: none !important;
    box-shadow: 0 28px 70px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.18) !important;
  }
  /* Book stays full-screen — question floats as an overlay */
  body.in-story.question-active .story-page-container.book {
    bottom: 0 !important;
  }
}

/* Mobile portrait: book pinned edge-to-edge, question overlays bottom */
@media (max-width: 640px) {
  body.in-story .story-page-container.book {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    flex: none !important;
    z-index: 2 !important;
    transition: bottom 0.3s ease !important;
  }
  body.in-story .story-question-area {
    position: fixed !important;
    bottom: 1.4em !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 620px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.2em 1.4em 1.6em !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    background: #fff !important;
    border-radius: 1.8em !important;
    border: none !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.40), 0 8px 20px rgba(0,0,0,0.18) !important;
    text-align: center !important;
  }
  body.in-story.question-active .story-page-container.book {
    bottom: 0 !important;
  }
  body.in-story.question-active .book .book-page {
    justify-content: flex-start !important;
    padding-top: 0.5em !important;
  }
}

body.sw-mode main {
  overflow: hidden !important;
}
.tab-btn {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  color: #b0b8b0 !important;
  font-family: var(--font-family) !important;
  padding: 0.3em 0 0.45em !important;
  margin: 0 !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.22s;
}
body.dark .tab-btn { color: #555 !important; }

/* Icon container — acts like an iOS rounded-square app icon */
.tab-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45em;
  line-height: 1;
  background: transparent;
  transition: background 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
}

/* Active tab — filled icon badge per-tab accent color */
[data-tab="stories"].active   .tab-icon-wrap {
  background: #2E7D32;
  box-shadow: 0 4px 14px rgba(46,125,50,0.38);
  transform: translateY(-2px);
}
[data-tab="sightwords"].active .tab-icon-wrap {
  background: #F59E0B;
  box-shadow: 0 4px 14px rgba(245,158,11,0.38);
  transform: translateY(-2px);
}
[data-tab="settings"].active  .tab-icon-wrap {
  background: #6366F1;
  box-shadow: 0 4px 14px rgba(99,102,241,0.38);
  transform: translateY(-2px);
}

.tab-btn.active { color: #333 !important; }
body.dark .tab-btn.active { color: #eee !important; }

.tab-label {
  font-size: 0.56em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
}
:root {
  --bg-color: #E8F5E9;
  --text-color: #000;
  --accent: #4CAF50;
  --font-size: 1.1rem;
  --font-family: "Nunito", sans-serif;
}

body.dark {
  --bg-color: #121212;
  --text-color: #f2f2f2;
}

html, body {
  width: 100%;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — correct on mobile with system bars */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden; /* page chrome stays put; <main> scrolls internally */
  background: var(--bg-color);
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  position: relative;
  font-weight: bold;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 0 0 76px 0;
}


/* CONTENT BUTTONS — clean white card style */
button:not(.tab-btn):not(.tts-fab):not(.install-fab):not(.mc-choice-btn) {
  background: #fff !important;
  color: #2E7D32 !important;
  font-size: 0.92em !important;
  padding: 0.5em 1.3em !important;
  margin: 0.3em 0.3em 0.3em 0 !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  transition: background 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease !important;
  font-family: "Nunito", cursive, sans-serif !important;
  letter-spacing: 0.01em !important;
  outline: none !important;
  position: relative !important;
  z-index: 1 !important;
  min-width: 88px !important;
  min-height: 40px !important;
}
button:not(.tab-btn):not(.tts-fab):not(.install-fab):not(.mc-choice-btn):hover:not(:disabled) {
  background: #f7fdf7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.11) !important;
}
button:not(.tab-btn):not(.tts-fab):not(.install-fab):not(.mc-choice-btn):active:not(:disabled) {
  transform: scale(0.97) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
button:focus-visible {
  outline: 2px solid #2E7D32;
  outline-offset: 3px;
}

/* Yes — vivid green 3-D button matching MC style */
#answer-yes {
  background: linear-gradient(135deg, #2E7D32, #43A047) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 7px 0 #1B5E20, 0 10px 20px rgba(46,125,50,0.35) !important;
  border-radius: 1.6em !important;
  font-weight: 800 !important;
  font-size: 1.15em !important;
  min-height: 80px !important;
  min-width: unset !important;
  padding: 0.75em 1.4em !important;
  text-shadow: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
#answer-yes:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 0 #1B5E20, 0 14px 28px rgba(46,125,50,0.40) !important;
}
#answer-yes:active:not(:disabled) {
  transform: translateY(6px) !important;
  box-shadow: 0 1px 0 #1B5E20, 0 2px 6px rgba(46,125,50,0.20) !important;
}
/* No — vivid red 3-D button matching MC style */
#answer-no {
  background: linear-gradient(135deg, #c62828, #e53935) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 7px 0 #8B0000, 0 10px 20px rgba(198,40,40,0.35) !important;
  border-radius: 1.6em !important;
  font-weight: 800 !important;
  font-size: 1.15em !important;
  min-height: 80px !important;
  min-width: unset !important;
  padding: 0.75em 1.4em !important;
  text-shadow: none !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
#answer-no:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 0 #8B0000, 0 14px 28px rgba(198,40,40,0.40) !important;
}
#answer-no:active:not(:disabled) {
  transform: translateY(6px) !important;
  box-shadow: 0 1px 0 #8B0000, 0 2px 6px rgba(198,40,40,0.20) !important;
}

.story-grid {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.25em;
  margin: 3.5em 1em 0 1em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  /* height: 84px; removed to allow natural height */
  transition: color 0.2s, text-decoration 0.2s;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.story-card {
  text-align: center;
  border: 3px solid #2E7D32;
  border-radius: 10px;
  padding: 1em;
  background: rgba(255, 255, 255, 0.3);
  margin-top: 2.5em;
}

/* ================================
   STORY — OPEN BOOK LAYOUT
   ================================ */
.story-page-container.book {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: calc(100% - 180px); /* leaves room for side nav arrows */
  max-width: 1200px;
  margin: 0.4em auto 0;
  padding: 1.5em 1.5em;
  gap: 0;
  background:
    linear-gradient(to right,
      #E8F5E9 0%,
      #FFFFFF 6%,
      #FFFFFF 50%,
      #FFFFFF 94%,
      #E8F5E9 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 0 30px rgba(120, 80, 30, 0.10),
    0 18px 40px rgba(46, 125, 50, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.10);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Center spine — shadow line down the middle of the open book */
.story-page-container.book::before {
  content: '';
  position: absolute;
  top: 1em; bottom: 1em; left: 50%;
  width: 28px;
  transform: translateX(-50%);
  background:
    linear-gradient(to right,
      transparent 0%,
      rgba(80, 50, 20, 0.04) 25%,
      rgba(80, 50, 20, 0.20) 50%,
      rgba(80, 50, 20, 0.04) 75%,
      transparent 100%);
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
}

/* Outer page-edge highlights */
.story-page-container.book::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background:
    linear-gradient(to right, rgba(120, 80, 30, 0.10) 0%, transparent 3%, transparent 97%, rgba(120, 80, 30, 0.10) 100%);
  pointer-events: none;
  z-index: 0;
  border-radius: 14px;
}

.book .book-page {
  flex: 1 1 0;
  background: transparent;
  padding: 1.2em 1.8em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: none;
  min-width: 280px;
  min-height: 420px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.book .book-page-left {
  padding-right: 2.4em; /* extra breathing room from spine */
}

.book .book-page-right {
  padding-left: 2.4em;
}

.media-placeholder {
  font-size: 6em;
  opacity: 0.35;
  text-align: center;
}

/* ================================
   STORY — SIDE PAGE-FLIP NAV ARROWS
   ================================ */
.page-nav {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.page-nav.nav-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.85) !important;
}

.page-nav {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 64px !important;
  height: 64px !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 50% !important;
  font-size: 1.7em !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 100 !important;
  background: linear-gradient(135deg, #2E7D32, #4CAF50) !important;
  color: #fff !important;
  border: 4px solid #fff !important;
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.page-nav.nav-prev { left: 1.5em !important; }
.page-nav.nav-next { right: 1.5em !important; }

.page-nav:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFD54F, #FFB300) !important;
  color: #2E7D32 !important;
  border-color: #FFC83D !important;
  box-shadow: 0 12px 30px rgba(255, 179, 0, 0.5) !important;
}
.page-nav.nav-prev:hover:not(:disabled) {
  transform: translateY(-50%) translateX(-5px) scale(1.12) !important;
}
.page-nav.nav-next:hover:not(:disabled) {
  transform: translateY(-50%) translateX(5px) scale(1.12) !important;
}

.page-nav:disabled {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4) !important;
  background: linear-gradient(135deg, #888, #aaa) !important;
}

/* ================================
   STORY — EXIT BUTTON
   ================================ */
.story-exit-btn {
  position: fixed !important;
  top: 0.55em !important;
  left: 0.7em !important;
  z-index: 150 !important;
  height: 40px !important;
  min-height: 40px !important;
  min-width: 40px !important;
  width: auto !important;
  border-radius: 999px !important;
  background: rgba(46,125,50,0.82) !important;
  color: rgba(255,255,255,0.9) !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  font-size: 0.82em !important;
  font-weight: 700 !important;
  padding: 0 1em !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  backdrop-filter: blur(4px) !important;
  letter-spacing: 0.01em !important;
}
body.in-story .story-exit-btn {
  display: flex !important;
}

/* ================================
   STORY — QUESTION AREA (below the book)
   ================================ */
.story-question-area {
  width: 100%;
  max-width: 600px;
  margin: 1.2em auto 0;
  padding: 0 2em;
  text-align: center;
  box-sizing: border-box;
}
/* Desktop: question area spans full width */
@media (min-width: 641px) and (min-height: 501px) {
  .story-question-area {
    max-width: none;
  }
}

.story-question-area .story-question {
  font-size: 1.7em !important;
  color: #1B5E20 !important;
  margin: 0 0 0.4em !important;
  text-align: center !important;
  font-family: "Nunito", cursive, sans-serif !important;
  letter-spacing: 0.03em !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.page-indicator {
  position: fixed;
  top: 10px;
  bottom: auto;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 200;
}
.page-indicator .sw-progress-track {
  flex: none;
  width: 180px;
  height: 6px;
  border-radius: 999px;
  background: rgba(46, 125, 50, 0.22);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  overflow: hidden;
}
.page-indicator .sw-progress-fill {
  background: #2E7D32;
  opacity: 1;
  box-shadow: none;
  border-radius: 999px;
  transition: width 0.4s ease;
}

@media (max-width: 900px) {
  .story-page-container.book {
    width: calc(100% - 1.5em);
    padding: 1em;
  }
  .page-nav {
    width: 56px !important;
    height: 72px !important;
    font-size: 1.5em !important;
    border-radius: 1.2em !important;
  }
  .page-nav.nav-prev { left: 0.2em !important; }
  .page-nav.nav-next { right: 0.2em !important; }
  .book-page-left { padding-right: 1em; }
  .book-page-right { padding-left: 1em; }
}

/* Play button overlay on the video poster */
.play-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 88px !important;
  height: 88px !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 50% !important;
  background: rgba(46, 125, 50, 0.92) !important;
  color: #fff !important;
  font-size: 2.2em !important;
  padding: 0 0 0 6px !important; /* nudge play triangle visually centered */
  margin: 0 !important;
  border: 4px solid #fff !important;
  box-shadow: 0 8px 26px rgba(0,0,0,0.35) !important;
  z-index: 5 !important;
  line-height: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-overlay:hover:not(:disabled) {
  background: #2E7D32 !important;
  color: #FFC83D !important;
  border-color: #FFC83D !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.play-overlay:disabled {
  background: rgba(120, 120, 120, 0.7) !important;
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.5) !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  filter: none !important;
}

.story-actions {
  margin-top: 1.5em;
  text-align: center;
  width: 100%;
}

.story-section {
  flex: 1 1 0;
  background: transparent;
  padding: 3em 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 540px;
  min-width: 340px;
  min-height: 420px;
  /* font-size removed to prevent overriding story text size */
}

.story-section h2 {
  font-size: 1.3em;
  margin-bottom: 1em;
  color: #4CAF50;
  font-weight: bold;
}

.story-section .story-text, .story-section .story-question {
  font-size: 2em !important;
  color: #263238 !important;
  margin: 1.2em 0 !important;
  text-align: center !important;
  font-family: "Nunito", cursive, sans-serif !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.story-section .story-text {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
button.next-btn::after {
  content: ' ▶️';
}
button.prev-btn::before {
  content: '◀️ ';
}
button:hover, .answer-buttons button:hover {
  background: linear-gradient(90deg, #FFD180 0%, #FFF9C4 100%);
  color: #2E7D32;
  transform: scale(1.09) rotate(-2deg);
  box-shadow: 0 12px 32px rgba(76,175,80,0.25);
  border-color: #FFC83D;
}
button:active, .answer-buttons button:active {
  transform: scale(0.97) rotate(1deg);
  background: linear-gradient(90deg, #FFC83D 0%, #FFD180 100%);
  color: #2E7D32;
}
button.selected, button:active, button:focus, .answer-buttons button.selected, .answer-buttons button:active, .answer-buttons button:focus {
  background: linear-gradient(90deg, #A5D6A7 0%, #A5D6A7 100%);
  color: #222;
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(165,214,167,0.3);
}
.answer-buttons button {
  width: 150px;
  min-height: 100px;
  font-size: 1.15em;
  border-radius: 1.6em;
  margin: 0.3em 0;
  font-family: "Nunito", cursive, sans-serif;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15em;
  padding: 0.9em 1em !important;
}
.answer-icon {
  font-size: 2.4em;
  line-height: 1;
  display: block;
}
.answer-label {
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: block;
}
button:focus {
  outline: 3px solid #FFC83D;
}

.story-section .story-image {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  box-sizing: border-box;
  margin: 1em auto;
  border-radius: 12px;
  background: #E8F5E9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.answer-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.2em;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.answer-buttons button {
  width: 150px;
}

/* Multiple-choice layout — side-by-side buttons */
.answer-buttons.mc-mode {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8em;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}
.mc-choice-btn {
  flex: 1 1 200px;
  max-width: 320px;
  min-height: 80px !important;
  min-width: unset !important;
  font-size: 1.15em !important;
  font-weight: 800 !important;
  text-align: center !important;
  padding: 0.75em 1.2em !important;
  border-radius: 1.6em !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
  background: #5C6BC0 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 7px 0 rgba(0,0,0,0.22), 0 10px 20px rgba(0,0,0,0.14) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.mc-choice-btn:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 0 rgba(0,0,0,0.2), 0 14px 28px rgba(0,0,0,0.18) !important;
}
.mc-choice-btn:active:not(:disabled) {
  transform: translateY(6px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12) !important;
}
@keyframes mc-btn-press {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(6px); box-shadow: 0 1px 0 rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12) !important; }
  60%  { transform: translateY(6px); box-shadow: 0 1px 0 rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12) !important; }
  100% { transform: translateY(0); }
}
.mc-choice-btn.mc-pressed {
  animation: mc-btn-press 0.28s ease-out forwards !important;
  pointer-events: none !important;
}

/* Each choice a distinct vivid colour — only in neutral state */
.mc-choice-btn:nth-child(1):not(.mc-correct):not(.mc-wrong) {
  background: linear-gradient(135deg, #5C6BC0, #7E57C2) !important;
  box-shadow: 0 7px 0 #3949AB, 0 10px 20px rgba(92,107,192,0.35) !important;
}
.mc-choice-btn:nth-child(2):not(.mc-correct):not(.mc-wrong) {
  background: linear-gradient(135deg, #FF7043, #FF8A65) !important;
  box-shadow: 0 7px 0 #E64A19, 0 10px 20px rgba(255,112,67,0.35) !important;
}
.mc-choice-btn:nth-child(3):not(.mc-correct):not(.mc-wrong) {
  background: linear-gradient(135deg, #26A69A, #4DB6AC) !important;
  box-shadow: 0 7px 0 #00796B, 0 10px 20px rgba(38,166,154,0.35) !important;
}
.mc-choice-btn:nth-child(4):not(.mc-correct):not(.mc-wrong) {
  background: linear-gradient(135deg, #EC407A, #F06292) !important;
  box-shadow: 0 7px 0 #C2185B, 0 10px 20px rgba(236,64,122,0.35) !important;
}

.mc-choice-btn.mc-correct {
  background: linear-gradient(135deg, #2E7D32, #43A047) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 5px 0 #1B5E20, 0 8px 18px rgba(46,125,50,0.35) !important;
}
.mc-choice-btn.mc-wrong {
  background: linear-gradient(135deg, #c62828, #e53935) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 5px 0 #8B0000, 0 8px 18px rgba(198,40,40,0.35) !important;
}

@keyframes choice-prompt-pulse {
  0%   { transform: scale(1);    box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 0 0 0 rgba(255,255,255,0.55); }
  50%  { transform: scale(1.06); box-shadow: 0 10px 0 rgba(0,0,0,0.2), 0 0 0 10px rgba(255,255,255,0); }
  100% { transform: scale(1);    box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 0 0 0 rgba(255,255,255,0); }
}
.choice-prompt {
  animation: choice-prompt-pulse 0.7s ease-in-out 4;
}

/* ================================
   SIGHT WORDS — HUB
   ================================ */
.sw-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em 1.2em;
  gap: 0.4em;
}
.sw-hub-title {
  font-size: 2em;
  font-weight: 900;
  color: #4B2991;
  margin: 0;
}
.sw-hub-sub {
  font-size: 1em;
  color: #888;
  margin: 0 0 1em;
}
.sw-level-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  width: 100%;
  max-width: 700px;
}
.sw-level-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  border-radius: 1.4em;
  padding: 1.4em 1em 1.1em;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.15s;
  gap: 0.25em;
}
.sw-level-card:active { transform: scale(0.95); }
.sw-level-emoji { font-size: 2.8em; line-height: 1; }
.sw-level-name  { font-size: 1em; font-weight: 900; margin-top: 0.2em; }
.sw-level-count { font-size: 0.8em; opacity: 0.85; }
.sw-level-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  margin: 0.5em 0 0.2em;
  overflow: hidden;
}
.sw-level-bar {
  height: 100%;
  background: #fff;
  border-radius: 3px;
  transition: width 0.4s;
}
.sw-level-pct { font-size: 0.75em; opacity: 0.85; }

/* ================================
   SIGHT WORDS — PRACTICE SHELL
   ================================ */
.sw-practice {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
.sw-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4em 2.5em 4.8em;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}
.sw-content-area {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-color, #E8F5E9);
  border-radius: 2.4em 2.4em 0 0;
  margin-top: -2.8em;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.13);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5em 2em 3em;
  overflow: visible;
}
.sw-back-btn {
  background: rgba(255,255,255,0.22) !important;
  border: 2px solid rgba(255,255,255,0.45) !important;
  color: #fff !important;
  font-size: 0.92em !important;
  font-weight: 700 !important;
  border-radius: 2em !important;
  padding: 0.45em 1.1em !important;
  cursor: pointer;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: none !important;
}
.sw-back-btn:hover {
  background: rgba(255,255,255,0.38) !important;
  border-color: #fff !important;
}
.sw-progress-track {
  flex: 1;
  max-width: 280px;
  height: 12px;
  border-radius: 99px;
  background: rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
  overflow: hidden;
}
.sw-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: #fff;
  min-width: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sw-top-bar-spacer { width: 80px; }

/* ================================
   STAGE 1 — LEARN
   ================================ */
.sw-stage1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 1.6em;
  flex: 1;
  width: 100%;
  max-width: 900px;
}
.sw-flashcard {
  width: min(92vw, 520px);
  height: 300px;
  border-radius: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  gap: 0.4em;
  transition: transform 0.12s;
  user-select: none;
}
.sw-flashcard:active { transform: scale(0.96); }
.sw-big-word {
  font-size: 5.5em;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  font-family: 'Nunito', sans-serif;
  text-shadow: 0 3px 10px rgba(0,0,0,0.18);
  line-height: 1;
}
.sw-hear-hint {
  font-size: 0.9em;
  color: rgba(255,255,255,0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sw-hear-hint.visible {
  opacity: 1;
  pointer-events: auto;
}

.sw-sentence-box {
  font-size: 1.4em;
  font-weight: 700;
  color: #4B2991;
  text-align: center;
  max-width: 600px;
  width: 100%;
  line-height: 1.6;
  background: rgba(75,41,145,0.07);
  border-radius: 1.2em;
  padding: 0.9em 1.6em;
  box-sizing: border-box;
}
.sw-sentence-hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
@keyframes sw-sentence-slide-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sw-sentence-reveal {
  animation: sw-sentence-slide-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sw-sentence-highlight {
  color: #e65100;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  font-weight: 900;
}
.sw-next-btn {
  background: linear-gradient(135deg,#4CAF50,#2E7D32) !important;
  color: #fff !important;
  font-size: 1.25em !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 2em !important;
  padding: 0.7em 2.8em !important;
  cursor: pointer;
  box-shadow: 0 6px 0 #1B5E20 !important;
  min-width: unset !important;
  min-height: unset !important;
}
@keyframes sw-next-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sw-next-reveal {
  animation: sw-next-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes sw-next-pulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(46,125,50,0.3), 0 0 0 0 rgba(46,125,50,0); }
  50%       { box-shadow: 0 4px 15px rgba(46,125,50,0.3), 0 0 0 10px rgba(46,125,50,0.22); }
}
.sw-next-pulse {
  animation: sw-next-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             sw-next-pulse 1.1s ease-in-out 0.4s infinite;
}

/* ================================
   STAGE 2 — RECOGNISE
   ================================ */
.sw-stage2, .sw-stage4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 2em;
  flex: 1;
  width: 100%;
  max-width: 900px;
}
.sw-prompt-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
}
.sw-prompt-text {
  font-size: 1.5em;
  font-weight: 800;
  color: #4B2991;
  text-align: center;
}
.sw-speaker-btn {
  font-size: 3.5em !important;
  line-height: 1 !important;
  background: rgba(75,41,145,0.1) !important;
  border: 3px solid rgba(75,41,145,0.25) !important;
  border-radius: 50% !important;
  width: 110px !important;
  height: 110px !important;
  min-width: unset !important;
  min-height: unset !important;
  padding: 0 !important;
  margin: 0.4em auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(75,41,145,0.15) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.sw-speaker-btn:hover {
  background: rgba(75,41,145,0.18) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 8px 0 rgba(75,41,145,0.2) !important;
}
.sw-blank-sentence {
  font-size: 1.7em;
  font-weight: 800;
  color: #4B2991;
  text-align: center;
  line-height: 1.5;
  max-width: 600px;
}
.sw-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  max-width: 780px;
  width: 100%;
}
.sw-choice-btn {
  font-size: 1.25em !important;
  font-weight: 800 !important;
  min-width: 140px !important;
  min-height: 68px !important;
  border-radius: 1.2em !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  background: #fff !important;
  color: #2E7D32 !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  flex: 1 1 130px;
  max-width: 260px;
}
.sw-choice-btn:hover:not(:disabled) {
  background: #f8f5ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.11) !important;
}
.sw-choice-btn:active:not(:disabled) { transform: scale(0.97) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; }
.sw-choice-btn.sw-correct {
  background: #f0fdf4 !important;
  color: #1B5E20 !important;
  border-color: rgba(46,125,50,0.35) !important;
  box-shadow: 0 2px 10px rgba(46,125,50,0.15) !important;
}
.sw-choice-btn.sw-wrong {
  background: #fff5f5 !important;
  color: #c62828 !important;
  border-color: rgba(198,40,40,0.45) !important;
  box-shadow: 0 2px 8px rgba(198,40,40,0.18) !important;
}
@keyframes sw-wrong-shake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  35%  { transform: translateX(8px); }
  55%  { transform: translateX(-5px); }
  75%  { transform: translateX(5px); }
}
.sw-choice-btn.sw-wrong-shake {
  animation: sw-wrong-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}
@keyframes sw-btn-bounce {
  0%, 100% { transform: translateY(0); }
  18%       { transform: translateY(-14px); }
  36%       { transform: translateY(0); }
  54%       { transform: translateY(-7px); }
  72%       { transform: translateY(0); }
  88%       { transform: translateY(-3px); }
}
.sw-btn-bounce {
  animation: sw-btn-bounce 0.9s ease-out 2;
}

/* ================================
   STAGE 3 — RECALL
   ================================ */
.sw-stage3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 2em;
  flex: 1;
  width: 100%;
  max-width: 900px;
}
.sw-flash-card {
  width: min(92vw, 520px);
  height: 300px;
  border-radius: 2em;
  background: linear-gradient(135deg,#667eea,#764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.sw-stage3 .sw-choice-btn {
  background: var(--sw-level-bg, #f3eeff) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 1.5em !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.22);
  font-weight: 900 !important;
  font-size: 2.8em !important;
  min-height: 130px !important;
}
.sw-stage3 .sw-choice-btn:hover:not(:disabled) {
  filter: brightness(1.12);
  background: var(--sw-level-bg, #f3eeff) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.26) !important;
}
.sw-flash-hint { font-size: 0.9em; color: #888; }
.sw-choices-hidden { visibility: hidden; }

/* Per-word TTS highlight in sight word sentences */
.sw-word { display: inline; border-radius: 4px; padding: 0 1px; transition: background 0.1s; }
.sw-word-hl { background: rgba(255,200,61,0.55); border-radius: 5px; padding: 0 3px; box-shadow: 0 1px 6px rgba(255,200,61,0.3); }



/* Exit × button on full-screen overlay screens */
.sw-exit-btn {
  position: absolute !important;
  top: 0.9em !important;
  right: 0.9em !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.2) !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  color: #fff !important;
  font-size: 1.25em !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 10;
  line-height: 1 !important;
  font-weight: 700 !important;
}
.sw-exit-btn:hover {
  background: rgba(255,255,255,0.38) !important;
  border-color: #fff !important;
  transform: scale(1.1) rotate(0deg) !important;
}

/* ================================
   STAGE TRANSITION SCREEN
   ================================ */
.sw-transition {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em;
  text-align: center;
  gap: 0.7em;
  color: #fff;
  z-index: 300;
  overflow: hidden;
}
.sw-transition-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}
.sw-transition-deco {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  pointer-events: none;
  animation: sw-float ease-in-out infinite;
}
@keyframes sw-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-24px) scale(1.06); }
}
.sw-transition-emoji {
  font-size: 5.5em;
  line-height: 1;
  animation: pop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.22));
}
.sw-transition-title {
  font-size: 3em;
  font-weight: 900;
  margin: 0;
  text-shadow: 0 3px 14px rgba(0,0,0,0.22);
  animation: fadeInUp 0.5s 0.15s both;
  letter-spacing: -0.01em;
}
.sw-transition-desc {
  font-size: 1.2em;
  font-weight: 600;
  opacity: 0.93;
  max-width: 360px;
  margin: 0;
  line-height: 1.5;
  animation: fadeInUp 0.5s 0.3s both;
}
.sw-transition-dots {
  display: flex;
  gap: 0.55em;
  justify-content: center;
  margin-top: 0.2em;
  animation: fadeInUp 0.5s 0.45s both;
}
.sw-transition-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s;
}
.sw-transition-dot.active {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
}
.sw-start-btn {
  margin-top: 0.4em !important;
  font-size: 1.4em !important;
  padding: 0.75em 2.8em !important;
  animation: fadeInUp 0.5s 0.6s both;
  border: 4px solid rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 12px 28px rgba(0,0,0,0.18) !important;
}
.sw-start-btn:hover {
  background: rgba(255,255,255,0.38) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.04) !important;
}

/* ================================
   STORY ENTRY SCREEN
   ================================ */
.story-entry {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 2em 1.5em;
  text-align: center;
  z-index: 300;
  overflow: hidden;
}
.story-entry-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}
.story-entry-emoji {
  font-size: 6em;
  line-height: 1;
  animation: emoji-intro 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25));
}
.story-entry-title {
  font-size: 2.2em;
  font-weight: 900;
  color: #fff;
  margin: 0.1em 0 0;
  text-shadow: 0 3px 14px rgba(0,0,0,0.25);
  animation: title-drop-in 0.65s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
.story-entry-start-btn {
  margin-top: 1.2em !important;
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  border-radius: 999px !important;
  padding: 0.55em 2em !important;
  font-size: 1.1em !important;
  font-weight: 800 !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(6px) !important;
  animation: title-drop-in 0.65s 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  cursor: pointer !important;
}
.story-entry-start-btn:hover {
  background: rgba(255,255,255,0.35) !important;
  transform: scale(1.05) !important;
}
.story-entry-prompt {
  font-size: 1.2em;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0.3em 0 0.1em;
  animation: fadeInUp 0.45s 0.55s both;
}
.story-entry-buttons {
  display: flex;
  gap: 1.5em;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1em;
  animation: fadeInUp 0.45s 0.75s both;
}
.entry-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170px;
  min-height: 170px;
  border-radius: 2em;
  border: 4px solid rgba(255,255,255,0.55) !important;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  gap: 0.5em;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
}
.entry-btn:hover { transform: translateY(-6px) scale(1.07) !important; }
.entry-btn:active { transform: scale(0.93) !important; }
.entry-btn-icon  { font-size: 3.4em; line-height: 1; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2)); }
.entry-btn-label { font-size: 1.05em; display: block; letter-spacing: 0.02em; }
.entry-btn-assisted {
  background: rgba(255,255,255,0.22) !important;
  color: #fff;
  box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 14px 32px rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(8px);
}
.entry-btn-independent {
  background: rgba(255,255,255,0.22) !important;
  color: #fff;
  box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 14px 32px rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(8px);
}

/* ================================
   FINISH BUTTON (last page ▶ → ⭐)
   ================================ */
.nav-finish {
  background: linear-gradient(135deg, #FFD700, #FFA000) !important;
  color: #2E7D32 !important;
  box-shadow: 0 6px 0 #E65100, 0 10px 22px rgba(255,160,0,0.4) !important;
  font-size: 1.6em !important;
  animation: pulse-star 1.5s ease-in-out infinite;
}
@keyframes pulse-star {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.12); }
}

/* ================================
   RETRY OVERLAY
   ================================ */

.retry-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}
.retry-box {
  background: #fff;
  border-radius: 1.8em;
  padding: 2em 2em 1.8em;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.retry-text {
  font-size: 1.3em;
  font-weight: 800;
  color: #4B2991;
  margin: 0.3em 0 0;
  font-family: 'Nunito', sans-serif;
}
.retry-buttons {
  display: flex;
  gap: 0.8em;
  justify-content: center;
  margin-top: 1.3em;
  flex-wrap: wrap;
}

/* ================================
   CELEBRATION SCREEN
   ================================ */
.celebration {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  overflow: hidden;
}
.celebration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 1.5em;
}
.celebration-stars {
  font-size: 2.2em;
  letter-spacing: 0.3em;
  animation: fadeInUp 0.6s 0.2s both;
}
.celebration-trophy {
  font-size: 4.5em;
  line-height: 1;
  animation: pop 0.6s 0.05s cubic-bezier(0.175,0.885,0.32,1.275) both;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}
.celebration-emoji {
  font-size: 5em;
  line-height: 1.1;
  animation: pop 0.55s 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.celebration-book-name {
  font-size: 1.15em;
  font-weight: 800;
  margin: 0;
  opacity: 0.92;
  letter-spacing: 0.02em;
  animation: fadeInUp 0.5s 0.75s both;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.celebration-title {
  font-size: 3.2em;
  font-weight: 900;
  margin: 0;
  animation: fadeInUp 0.6s 0.6s both;
  text-shadow: 0 3px 12px rgba(0,0,0,0.2);
}
.celebration-subtitle {
  font-size: 1.2em;
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
  animation: fadeInUp 0.6s 0.8s both;
  line-height: 1.5;
}
.celebration-btns {
  display: flex;
  gap: 1em;
  margin-top: 1em;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 0.6s 1s both;
}

/* ================================
   CONFETTI
   ================================ */
.confetti-piece {
  position: fixed;
  top: -20px;
  pointer-events: none;
  z-index: 502;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ================================
   SHARED KEYFRAMES
   ================================ */
@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes emoji-intro {
  0%   { opacity: 0; transform: scale(0) rotate(-180deg); }
  60%  { transform: scale(1.25) rotate(12deg); }
  80%  { transform: scale(0.95) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes title-drop-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(-24px); }
  60%  { transform: scale(1.1) translateY(6px); }
  80%  { transform: scale(0.97) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes entry-btn-speaking {
  0%, 100% { transform: translateY(0)   scale(1);    box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 14px 32px rgba(0,0,0,0.2); }
  40%       { transform: translateY(-18px) scale(1.1); box-shadow: 0 24px 0 rgba(0,0,0,0.1), 0 28px 40px rgba(0,0,0,0.25); }
  70%       { transform: translateY(-6px)  scale(1.05); }
}
.entry-btn-speaking {
  animation: entry-btn-speaking 0.6s ease-in-out infinite !important;
  border-color: rgba(255,255,255,0.9) !important;
}
@keyframes choice-reading-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 4px rgba(255,215,0,0.5), 0 6px 0 #d0b8ff; }
  50%       { transform: scale(1.07); box-shadow: 0 0 0 9px rgba(255,215,0,0.75), 0 0 28px rgba(255,215,0,0.45), 0 6px 0 #d0b8ff; }
}
.choice-reading {
  animation: choice-reading-pulse 0.65s ease-in-out infinite !important;
  border: 3px solid #ffd700 !important;
  position: relative;
  z-index: 1;
}
@keyframes correct-bounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35) rotate(-4deg); }
  50%  { transform: scale(1.2) rotate(3deg); }
  75%  { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================
   READING ATTENTION CUES
   ================================ */
@keyframes word-attention-bounce {
  0%   { transform: scale(1)    translateY(0);    color: inherit; }
  35%  { transform: scale(1.55) translateY(-14px); color: #FF6B35; }
  65%  { transform: scale(1.2)  translateY(-5px);  color: #FF6B35; }
  100% { transform: scale(1)    translateY(0);    color: inherit; }
}
.word-attention {
  display: inline-block !important;
  animation: word-attention-bounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1 !important;
}

@keyframes question-area-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); transform: scale(1); }
  35%  { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0.45); transform: scale(1.025); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); transform: scale(1); }
}
.question-attention {
  animation: question-area-pulse 0.75s ease-out 1;
  border-radius: 1em;
}

.story-media-section {
  transition: opacity 0.7s ease;
}
.story-media-section.reading-active {
  opacity: 0.4;
}

@keyframes answers-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.answers-reveal {
  animation: answers-reveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Question panel pops in from centre — scale + fade */
@keyframes question-panel-enter {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  65%  { opacity: 1; transform: translateX(-50%) scale(1.07); }
  82%  { transform: translateX(-50%) scale(0.97); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
body.in-story.question-active .story-question-area {
  animation: question-panel-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Dark backdrop behind the floating question card */
@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.in-story.question-active::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9;
  animation: backdrop-fade-in 0.3s ease both;
  pointer-events: none;
}

/* Individual MC buttons pop in with stagger after the panel lands */
@keyframes mc-btn-pop {
  0%   { opacity: 0; transform: scale(0.55) translateY(24px); }
  65%  { opacity: 1; transform: scale(1.1); }
  82%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes btn-attention-blink {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.45); }
}
.answers-reveal .mc-choice-btn {
  animation: mc-btn-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             btn-attention-blink 0.32s ease-in-out 1s 3;
}
.answers-reveal .mc-choice-btn:nth-child(1) { animation-delay: 0.05s, 1s; }
.answers-reveal .mc-choice-btn:nth-child(2) { animation-delay: 0.15s, 1s; }
.answers-reveal .mc-choice-btn:nth-child(3) { animation-delay: 0.25s, 1s; }
.answers-reveal .mc-choice-btn:nth-child(4) { animation-delay: 0.35s, 1s; }
.answers-reveal #answer-yes,
.answers-reveal #answer-no {
  animation: mc-btn-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             btn-attention-blink 0.32s ease-in-out 0.5s 3;
}

/* ================================
   MOBILE — phones ≤ 640px
   ================================ */
@media (max-width: 640px) {

  /* --- Story book — stack vertically --- */
  .story-page-container.book {
    flex-direction: column !important;
    width: calc(100% - 92px) !important;
    margin: 0.4em auto 0 !important;
    padding: 0.8em !important;
    min-height: unset !important;
  }
  .story-page-container.book::before {
    display: none !important;
  }
  .book .book-page {
    min-width: unset !important;
    min-height: unset !important;
    padding: 0.7em 0.8em !important;
    flex: unset !important;
    width: 100% !important;
  }
  .book .book-page-left {
    padding-right: 0.8em !important;
    padding-bottom: 0.8em !important;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  .book .book-page-right {
    padding-left: 0.8em !important;
    padding-top: 0.8em !important;
  }

  /* --- Story book full-screen in portrait --- */
  body.in-story .story-page-container.book {
    align-items: stretch !important;
  }
  body.in-story .book .book-page-right {
    flex: 1 !important;
    min-height: 0 !important;
  }
  body.in-story .book-page-right .story-image,
  body.in-story .book-page-right img {
    max-height: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* --- Story text (overrides 2.2em inline style) --- */
  .story-text {
    font-size: 1.45em !important;
    letter-spacing: 0.02em !important;
  }

  /* --- Nav arrows --- */
  .page-nav {
    width: 40px !important;
    height: 60px !important;
    font-size: 1.1em !important;
    border-radius: 1em !important;
  }
  .page-nav.nav-prev { left: 0 !important; }
  .page-nav.nav-next { right: 0 !important; }

  /* --- Story question area --- */
  .story-question-area {
    padding: 0 0.6em !important;
  }
  .story-question-area .story-question {
    font-size: 1.35em !important;
  }

  /* --- Answer buttons (Yes/No) --- */
  .answer-buttons button {
    width: 110px !important;
    min-height: 56px !important;
    font-size: 0.95em !important;
  }
  .answer-icon { font-size: 1.6em !important; }

  /* --- MC choice buttons --- */
  .mc-choice-btn {
    font-size: 1em !important;
    padding: 0.65em 0.8em !important;
    min-height: 68px !important;
    min-width: unset !important;
    flex: 1 1 140px !important;
  }

  /* --- SW flashcard --- */
  .sw-flashcard {
    height: 210px !important;
  }
  .sw-big-word {
    font-size: 3.8em !important;
  }

  /* --- SW choice buttons --- */
  .sw-choice-btn {
    min-width: 110px !important;
    min-height: 72px !important;
    font-size: 1.25em !important;
    flex: 1 1 110px !important;
  }
  .sw-stage3 .sw-choice-btn {
    min-height: 110px !important;
    font-size: 2.2em !important;
  }

  /* --- SW top bar --- */
  .sw-top-bar {
    padding: 1em 1.2em 4.2em !important;
  }

  /* --- SW sentence box --- */
  .sw-sentence-box {
    font-size: 1.15em !important;
    padding: 0.7em 1em !important;
  }

  /* --- Story entry screen --- */
  .story-entry-inner {
    gap: 0.6em !important;
    padding-top: 2em !important;
  }
  .story-entry-emoji {
    font-size: 4em !important;
  }
  .story-entry-title {
    font-size: 1.6em !important;
  }

  /* --- Progress bar — already at top in base; no overrides needed --- */
}

/* ================================
   LANDSCAPE on short-screen phones
   (locked landscape mode)
   ================================ */
@media (max-height: 500px) and (orientation: landscape) {

  /* --- Bottom nav — compact in landscape --- */
  .bottom-nav {
    height: 58px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  main { padding-bottom: 58px !important; }
  .tab-icon-wrap { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 1.1em !important; }
  .tab-label { font-size: 0.48em !important; }
  .tts-fab {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    padding: 0 !important;
    font-size: 1em !important;
    top: 0.45em !important; right: 0.45em !important;
  }
  .tts-fab-label { display: none !important; }
  .story-exit-btn {
    height: 30px !important; min-height: 30px !important;
    font-size: 0.72em !important;
    padding: 0 0.7em !important;
    top: 0.35em !important; left: 0.35em !important;
  }

  /* --- Home screen --- */
  .book-card { min-width: 110px !important; }
  .book-cover { height: 100px !important; }
  .book-title { font-size: 0.75em !important; }
  .featured-banner { min-height: 110px !important; }
  .featured-title { font-size: 1.1em !important; }

  /* --- Story book — true full-screen in landscape --- */
  .story-page-container.book {
    flex-direction: row !important;
    overflow: hidden !important;
    padding: 0.4em 0.5em !important;
    align-items: stretch !important;
  }
  body.in-story .story-page-container.book {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    margin: 0 !important;
    flex: none !important;
    z-index: 2 !important;
  }
  body.in-story .story-question-area {
    position: fixed !important;
    bottom: 0.8em !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(88vw, 560px) !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0.8em 1.2em 1em !important;
    background: #fff !important;
    border-radius: 1.4em !important;
    border: none !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.40), 0 6px 16px rgba(0,0,0,0.18) !important;
  }
  body.in-story.question-active .book .book-page {
    justify-content: flex-start !important;
  }
  .book .book-page {
    min-height: unset !important;
    justify-content: center !important;
  }
  .story-section img, .story-image {
    max-height: calc(100dvh - 1.4em) !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .story-section video, .story-video {
    max-height: calc(100dvh - 1.4em) !important;
  }
  .story-text { font-size: 1.1em !important; }
  .page-nav {
    width: 34px !important;
    height: 50px !important;
    font-size: 1em !important;
  }
  .story-question-area { padding: 0 0.4em !important; }
  .story-question-area .story-question { font-size: 1.05em !important; }
  .answer-buttons button {
    width: 90px !important;
    min-height: 44px !important;
    font-size: 0.85em !important;
  }
  .answer-icon { font-size: 1.3em !important; }
  .mc-choice-btn {
    font-size: 0.88em !important;
    min-height: 44px !important;
    padding: 0.4em 0.6em !important;
  }
  /* Progress bar hidden in landscape — viewport too short, overlaps buttons */
  .page-indicator { display: none !important; }

  /* Ensure content never hides behind the bottom nav */

  /* --- Celebration screen --- */
  .celebration { overflow-y: auto !important; }
  .celebration-content {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.4em 1.2em !important;
    padding: 0.5em 1em !important;
  }
  .celebration-trophy { font-size: 2.4em !important; }
  .celebration-emoji  { font-size: 2.8em !important; }
  .celebration-stars  { font-size: 1.1em !important; letter-spacing: 0.1em !important; width: 100% !important; text-align: center !important; }
  .celebration-title  { font-size: 1.9em !important; margin: 0 !important; }
  .celebration-book-name { font-size: 0.9em !important; margin: 0 !important; }
  .celebration-subtitle { font-size: 0.82em !important; margin: 0 !important; text-align: center !important; }
  .celebration-btns   { margin-top: 0.2em !important; gap: 0.5em !important; }
  .celebration-btns button { font-size: 0.85em !important; padding: 0.4em 0.9em !important; }

  /* --- Sight words --- */
  .sw-flashcard { height: 130px !important; }
  .sw-big-word { font-size: 2.8em !important; }
  .sw-hear-hint { font-size: 0.75em !important; }
  .sw-sentence-box { font-size: 0.95em !important; padding: 0.5em 0.8em !important; }
  .sw-next-btn { padding: 0.4em 1.2em !important; font-size: 0.9em !important; }
  .sw-choice-btn {
    min-height: 60px !important;
    font-size: 1.05em !important;
    min-width: 90px !important;
  }
  .sw-stage3 .sw-choice-btn {
    min-height: 85px !important;
    font-size: 1.8em !important;
  }
  .sw-top-bar { padding: 0.6em 1em 0.6em !important; }
  .sw-progress-track { max-width: 180px !important; }
}

/* ================================
   WORD-TAP READING HINT
   ================================ */
.word-tap-hint {
  display: inline-block;
  margin: 0.6em auto 0;
  padding: 0.35em 1em;
  background: rgba(255, 200, 60, 0.92);
  color: #5a3a00;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  animation: hint-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both,
             hint-fade 0.6s ease 4.4s forwards;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
@keyframes hint-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes hint-fade {
  to { opacity: 0; }
}

/* ================================
   LOGIN PAGE
   ================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  box-sizing: border-box;
}

.login-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 2em;
  padding: 2em 2.4em 2em;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.login-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  margin-bottom: 1.2em;
  mix-blend-mode: multiply;
  animation: emoji-intro 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.login-title {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.7em;
  font-weight: 900;
  color: #2E7D32;
  margin: 0 0 1.2em;
  text-align: center;
  letter-spacing: -0.01em;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.login-field label {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 0.88em;
  font-weight: 800;
  color: #4a4a4a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-field input {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.05em;
  font-weight: 600;
  color: #222;
  background: #f4f9f4;
  border: 2px solid #c8e6c9;
  border-radius: 0.9em;
  padding: 0.65em 1em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
  min-height: unset;
  min-width: unset;
}

.login-field input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18);
  background: #fff;
}

.login-error {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 0.88em;
  font-weight: 700;
  color: #c62828;
  text-align: center;
  min-height: 1.3em;
  margin: 0;
}

.login-btn {
  font-family: "Nunito", cursive, sans-serif !important;
  font-size: 1.15em !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #4CAF50, #2E7D32) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.75em 2em !important;
  margin-top: 0.4em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 0 #1B5E20, 0 10px 24px rgba(46, 125, 50, 0.32) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  width: 100% !important;
  min-height: unset !important;
  min-width: unset !important;
  letter-spacing: 0.01em !important;
}

.login-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 9px 0 #1B5E20, 0 14px 30px rgba(46, 125, 50, 0.38) !important;
  background: linear-gradient(135deg, #66BB6A, #388E3C) !important;
  color: #fff !important;
}

.login-btn:active {
  transform: translateY(5px) !important;
  box-shadow: 0 1px 0 #1B5E20, 0 2px 6px rgba(46, 125, 50, 0.18) !important;
}

@media (max-width: 440px) {
  .login-card {
    padding: 1.6em 1.4em 1.6em;
    border-radius: 1.5em;
  }
  .login-logo { max-width: 220px; }
}

/* ── Tap-to-hear / Hold-to-submit answer interaction ── */
.mc-choice-btn {
  position: relative;
  overflow: hidden;
}
.mc-choice-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background: rgba(255,255,255,0.28);
  transition: none;
  pointer-events: none;
  border-radius: inherit;
}
.mc-choice-btn.mc-holding::after {
  height: 100%;
  transition: height 600ms linear;
}
.mc-choice-btn.mc-holding-committed {
  filter: brightness(0.65) !important;
  transition: filter 0.15s ease !important;
}
@keyframes mc-tap-flash {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.55); }
  100% { filter: brightness(1); }
}
.mc-choice-btn.mc-tapped {
  animation: mc-tap-flash 350ms ease-out !important;
}

/* First-use hint banner */
.mc-hint-banner {
  width: 100%;
  text-align: center;
  font-size: 0.88em;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  padding: 0 0 10px;
  pointer-events: none;
  letter-spacing: 0.03em;
  animation: mcHintFade 3.5s ease forwards;
}
@keyframes mcHintFade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Launch splash (audio unlock screen) ── */
.launch-splash {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.launch-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 2em;
  padding: 2em 2.4em 2em;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.launch-tagline {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.05em;
  color: #666;
  margin: 0 0 1.4em;
  text-align: center;
}

.launch-tap {
  font-family: "Nunito", cursive, sans-serif;
  font-size: 1.15em;
  font-weight: 800;
  color: #2E7D32;
  margin: 0;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@media (max-width: 440px) {
  .launch-card {
    padding: 1.6em 1.4em 1.6em;
    border-radius: 1.5em;
  }
}