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

.home-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  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", 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", 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", 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", 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;
  margin: 0 auto;
  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", 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", sans-serif;
  font-size: 1em;
  color: #2E7D32;
  font-weight: 900;
}
.install-banner-text span {
  font-family: "Nunito", 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", 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: calc(0.7em + env(safe-area-inset-top, 0px)) !important;
  right: calc(0.7em + env(safe-area-inset-right, 0px)) !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;
}

/* 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", 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, color 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;
  /* Offset the extra 3px/side of padding (base is 0 1px) with negative margin so
     highlighting a word doesn't widen it and shift the surrounding text. */
  margin: 0 -3px;
  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", 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: 18px !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: calc(76px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  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;
}
/* Launch splash exists only to capture the first tap (unlocks audio, then
   routes to profile selection) — visible for branding continuity, but must
   not be tappable, or the nav lets you skip past profile selection entirely. */
body.launch-mode .bottom-nav {
  pointer-events: 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-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
  background: #FAF7F2; /* matches --sw-bg so overscroll never flashes mint */
}
.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);
  /* Native-app feel: kill the tap-highlight flash, the long-press callout menu,
     and accidental text selection when tapping/holding buttons and words.
     These properties inherit, so the whole UI is covered from here. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Blocks double-tap-to-zoom and pinch-zoom gestures (the viewport meta tag's
     maximum-scale/user-scalable=no covers most browsers; this backs it up on
     the ones — mainly Chrome/Android — that still allow gesture-zoom regardless). */
  touch-action: pan-x pan-y;
}

/* Restore selection/editing where a user genuinely types or selects text. */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

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 calc(76px + env(safe-area-inset-bottom, 0px)) 0;
}


/* CONTENT BUTTONS — clean white card style */
button:not(.tab-btn):not(.tts-fab):not(.install-fab):not(.mc-choice-btn):not(.sw-choice-btn):not(.sw-back-btn):not(.sw-next-btn):not(.sw-speaker-btn):not(.sw-rotate-back):not(.pf-btn):not(.pf-chip):not(.pf-level):not(.pf-color):not(.pf-emoji):not(.pf-tile):not(.switch-profile-btn):not(.pf-mini) {
  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", 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):not(.sw-choice-btn):not(.sw-back-btn):not(.sw-next-btn):not(.sw-speaker-btn):not(.sw-rotate-back):not(.pf-btn):not(.pf-chip):not(.pf-level):not(.pf-color):not(.pf-emoji):not(.pf-tile):not(.switch-profile-btn):not(.pf-mini):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):not(.sw-choice-btn):not(.sw-back-btn):not(.sw-next-btn):not(.sw-speaker-btn):not(.sw-rotate-back):not(.pf-btn):not(.pf-chip):not(.pf-level):not(.pf-color):not(.pf-emoji):not(.pf-tile):not(.switch-profile-btn):not(.pf-mini):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;
}

/* Kill the mobile double-tap-zoom delay on everything tappable — a child
   tapping rapidly should never trigger a zoom instead of an action. */
button,
.sw-flashcard, .sw-video-frame, .sw-image-frame, .sw-flash-card {
  touch-action: manipulation;
}

/* 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: calc(0.55em + env(safe-area-inset-top, 0px)) !important;
  left: calc(0.7em + env(safe-area-inset-left, 0px)) !important;
  z-index: 150 !important;
  height: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !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: 1.1em !important;
  font-weight: 700 !important;
  padding: 0 !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", 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", 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", 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 — DESIGN TOKENS
   Calm-practice palette: warm paper bg, near-black ink, hairline borders.
   Level gradients are reserved for the hub cards, transition screens and
   celebration — practice screens stay neutral so the word/card is the only
   color pop (single-focal-point rule for young learners).
   ================================ */
.sw-practice, .sw-hub {
  --sw-bg: #FAF7F2;
  --sw-ink: #3E3A33;
  --sw-ink-soft: #8A8378;
  --sw-line: #E7E0D5;
  --sw-shadow-hard: #E3DCCF;
  --sw-star: #F59E0B;
  --sw-star-soft: #FFD54F;
  /* Warm, barely-off-white — used for card surfaces (e.g. the sentence box)
     instead of a literal pure #fff. Pure white next to dark text is more
     glare/visual-stress-prone for dyslexic/ADHD/autistic readers than a
     softened white; still clearly lighter than --sw-bg so cards keep their
     "raised surface" distinction from the page. */
  --sw-card-bg: #FFFCF7;
}

/* ================================
   SIGHT WORDS — DEBUG BAR (testing only, ?swdebug=1)
   ================================ */
.sw-debug-bar {
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.4em;
  background: rgba(0,0,0,0.8) !important;
  padding: 0.3em 0.5em;
  border-radius: 8px;
}
.sw-debug-bar span {
  color: #aaa;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-right: 0.2em;
}
.sw-debug-bar button {
  background: #333 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
  border-radius: 4px !important;
  padding: 0.25em 0.55em !important;
  font-size: 11px !important;
  font-family: monospace !important;
  font-weight: 600 !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: none !important;
  cursor: pointer;
}
.sw-debug-bar button:hover { background: #444 !important; }

/* ================================
   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: 800;
  color: var(--sw-ink);
  margin: 0;
}
.sw-hub-sub {
  font-size: 1em;
  color: #888;
  margin: 0 0 1em;
}
.sw-level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1em;
  width: 100%;
  max-width: 760px;
}
.sw-level-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  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); }
@media (hover: hover) {
  .sw-level-card:hover { transform: translateY(-3px); }
}
.sw-level-emoji { font-size: 2.8em; line-height: 1; }
.sw-level-name  { font-size: 1em; font-weight: 800; 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
   Calm treatment for every level: warm paper background, transparent bar,
   the word card/video is the only strong color on screen.
   ================================ */
.sw-practice {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  background: var(--sw-bg);
}
.sw-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: calc(0.7em + env(safe-area-inset-top, 0px)) 1.2em 0.7em;
  color: var(--sw-ink);
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}
.sw-content-area {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2em 1.5em 2.5em;
  overflow: visible;
}
.sw-back-btn {
  background: #fff !important;
  border: 1px solid var(--sw-line) !important;
  color: var(--sw-ink) !important;
  font-size: 0.95em !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.55em 1.15em !important;
  cursor: pointer;
  min-width: unset !important;
  min-height: 48px !important;
  box-shadow: 0 2px 0 var(--sw-shadow-hard) !important;
  flex: none;
}
.sw-back-btn:hover {
  background: #fffdf9 !important;
  border-color: var(--sw-line) !important;
}
/* Invisible — layout balance only, so the star path centers under the bar
   instead of drifting toward the Back button. Not a decorative icon: a
   static element with no function reads as a dead button to a curious tap. */
.sw-top-bar-spacer {
  width: 48px;
  flex: none;
}
/* Shared with the story reader's page indicator — kept for that use. */
.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);
}

/* Shared slot for the star path and the idle-nudge hint text (stages 2 & 4) —
   they overlay the same reserved space (absolute inset:0) instead of sitting
   side by side, so one fading out as the other fades in never changes the
   top bar's height or shifts anything below it. */
.sw-top-center {
  flex: 1;
  min-width: 0;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── STAR PATH — one token per word in the current stage ──
   Shown briefly at the start of each word (the just-earned star pops in),
   then fades out — a quiet check-in rather than a status bar that competes
   for attention for the whole time the child is working on the word. */
.sw-star-path {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 420px;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.sw-star-path.sw-star-path-hidden {
  opacity: 0;
  pointer-events: none;
}
/* Idle nudge (stages 2 & 4): hidden until swArmIdleHint reveals it after a
   few seconds of no interaction, or swShowPrompt shows it immediately for
   real feedback (e.g. a wrong-answer message). Lives in the star path's
   slot — appearing/disappearing can't shift the sentence/choices below. */
.sw-topbar-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0 0.6em;
  font-weight: 800;
  font-size: 0.95em;
  color: var(--sw-ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.sw-topbar-hint.sw-prompt-visible {
  opacity: 1;
  pointer-events: auto;
}
.sw-star {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-star::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sw-shadow-hard);
}
.sw-star.current::before {
  background: #CFC6B5;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
}
.sw-star.done::before {
  content: '★';
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--sw-star);
  font-size: 15px;
  line-height: 1;
}
@keyframes sw-star-earn {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0.3; }
  55%  { transform: scale(1.5) rotate(8deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0); }
}
.sw-star.earn::before {
  display: inline-block;
  animation: sw-star-earn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Missed words get appended to a stage's list, so it can exceed the batch
   of 10 — shrink tokens instead of overflowing on narrow phones. */
.sw-star-path-dense { gap: 4px; }
.sw-star-path-dense .sw-star { width: 12px; height: 12px; }
.sw-star-path-dense .sw-star::before { width: 6px; height: 6px; }
.sw-star-path-dense .sw-star.done::before { font-size: 11px; }

/* ── ROTATE-TO-CONTINUE OVERLAY ──
   The card+Next-beside-it layout needs landscape width. iOS has no API to
   force landscape, so this blocking screen IS the enforcement — shown only
   on phone-width viewports, only in portrait, only while a practice screen
   (not the hub/transitions/celebration) is active. Pure media-query gating:
   no JS listener needed, it reacts to rotation on its own. */
.sw-rotate-prompt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #FAF7F2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  text-align: center;
  padding: 2em;
  box-sizing: border-box;
}
@media (max-width: 767px) and (orientation: portrait) {
  body.sw-landscape-required .sw-rotate-prompt { display: flex; }
}
@keyframes sw-rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}
.sw-rotate-icon {
  font-size: 3.5em;
  line-height: 1;
  animation: sw-rotate-hint 1.6s ease-in-out infinite;
}
.sw-rotate-text {
  font-size: 1.2em;
  font-weight: 700;
  color: #3E3A33;
  max-width: 300px;
  margin: 0;
}
.sw-rotate-back {
  background: #fff !important;
  border: 1px solid #E7E0D5 !important;
  color: #3E3A33 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.55em 1.15em !important;
  box-shadow: 0 2px 0 #E3DCCF !important;
  min-height: 48px !important;
}

/* ================================
   STAGE 1 — LEARN
   ================================ */
/* Two pieces: the card+sentence/hint column, and the Next button. Column by
   default; landscape phones (the enforced mobile orientation for practice)
   and tablet/desktop widths switch to a row with Next beside the card —
   there's room, and it keeps the card from getting cramped by a stacked
   Next button on a short landscape viewport. */
.sw-stage1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 1.6em;
  flex: 1;
  width: 100%;
  max-width: 1100px;
}
.sw-stage-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
  min-width: 0;
}
/* Grid, not a centered flex row: `minmax(0,1fr)` on both side columns forces
   them to stay EQUAL width regardless of what's in them, so the card (the
   fixed-size middle column) never moves when the Next button appears in the
   right column — it just uses the gutter that was already reserved for it,
   matching the empty gutter on the left. A flex row centered as one group
   would re-center — and visibly shift the card — every time Next's width
   changed from 0 to its real width.
   Scoped to touch devices in landscape (phones/tablets — pointer:coarse),
   not just any wide/landscape-shaped window: on a desktop browser the extra
   width goes unused as empty page around the 1100px cap, and the button
   ends up floating alone in that void with nothing tying it to the card.
   Desktop always has vertical room, so it keeps Next below the card. */
@media (orientation: landscape) and (pointer: coarse) {
  .sw-stage1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5em;
  }
  .sw-stage-main { grid-column: 2; }
  .sw-next-slot { grid-column: 3; justify-self: start; }
}
.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: 800;
  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;
}
/* Sits below the word card on the plain page background (not on a colored
   surface) — small, muted, and a slow fade so it never grabs attention away
   from the card itself; it's a quiet affordance, not a prompt. */
.sw-hear-hint-below {
  color: var(--sw-ink-soft);
  font-weight: 700;
  font-size: 0.82em;
  margin-top: -0.9em;
  transition: opacity 0.6s ease;
}
/* Always-visible quiet hint (stage 2 replay affordance). */
.sw-hint-quiet {
  color: var(--sw-ink-soft);
  font-weight: 700;
  font-size: 0.82em;
  margin-top: 0.3em;
}

.sw-sentence-box {
  position: relative;
  font-size: 1.4em;
  font-weight: 800;
  color: var(--sw-ink);
  text-align: center;
  max-width: 600px;
  width: 100%;
  line-height: 1.6;
  background: var(--sw-card-bg);
  border: 1px solid var(--sw-line);
  box-shadow: 0 4px 16px rgba(62,58,51,0.10);
  border-radius: 1.4em;
  padding: 0.9em 1.6em;
  box-sizing: border-box;
}
/* Speech-bubble tail pointing up at the word card this sentence explains. */
.sw-sentence-box::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--sw-card-bg);
  border-left: 1px solid var(--sw-line);
  border-top: 1px solid var(--sw-line);
  transform: translateX(-50%) rotate(45deg);
}
.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;
  background: #FFF1D0;
  border-radius: 0.5em;
  padding: 0.03em 0.4em;
  font-weight: 800;
}
/* Fixed-height slot so the Next button's reveal never shifts the layout
   under a child's finger. */
.sw-next-slot {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.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;
  /* Deeper bevel + a soft glow underneath — the one button on screen meant
     to look like a fun, tappable "candy" object rather than a neutral
     control (that's Back's job, deliberately kept quiet). */
  box-shadow: 0 8px 0 #1B5E20, 0 12px 26px rgba(46,125,50,0.38) !important;
  min-width: unset !important;
  min-height: 64px !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
.sw-next-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 0 #1B5E20, 0 16px 30px rgba(46,125,50,0.4) !important;
}
.sw-next-btn:active {
  transform: translateY(6px) !important;
  box-shadow: 0 2px 0 #1B5E20, 0 4px 10px rgba(46,125,50,0.3) !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;
}
/* Stage 4: sentence + its replay speaker sit side by side, so the control
   reads as tied to the sentence rather than a separate focal element. */
.sw-sentence-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  flex-wrap: wrap;
}
/* Sized as a quiet "replay" affordance, not a focal point — the word/sentence
   already auto-plays on arrival, so this only ever needs tapping for an
   optional re-listen. Used standalone (Stage 2) and inline next to the
   sentence (.sw-sentence-row, Stage 4). */
.sw-speaker-btn {
  position: relative !important;
  font-size: 1.8em !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #fff, var(--sw-card-bg)) !important;
  border: 2px solid var(--sw-line) !important;
  border-radius: 50% !important;
  width: 58px !important;
  height: 58px !important;
  min-width: unset !important;
  min-height: unset !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex: none;
  box-shadow: 0 4px 0 var(--sw-shadow-hard) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.sw-speaker-btn:hover {
  background: #fffdf9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 var(--sw-shadow-hard) !important;
}
.sw-speaker-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--sw-shadow-hard) !important;
}
/* "Your turn" now lives here instead of on the choice buttons — a ring that
   expands and fades only while the word/sentence is actually being spoken
   (toggled via JS, see swSpeakPulse/swReplayBlankSentencePulse), so it draws
   attention to listening specifically, at the moment listening is what's
   actually happening, instead of jumping buttons the whole time. */
@keyframes sw-speaker-pulse {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.5); opacity: 0; }
}
.sw-speaker-btn.sw-speaking::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--sw-star);
  animation: sw-speaker-pulse 1s ease-out infinite;
}
.sw-blank-sentence {
  font-size: 1.7em;
  font-weight: 800;
  color: var(--sw-ink);
  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.35em !important;
  font-weight: 800 !important;
  min-width: 140px !important;
  min-height: 78px !important;
  border-radius: 1.6em !important;
  border: 1px solid var(--sw-line, #E7E0D5) !important;
  background: linear-gradient(180deg, #fff, var(--sw-card-bg, #FFFCF7)) !important;
  color: var(--sw-ink, #3E3A33) !important;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--sw-shadow-hard, #E3DCCF) !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: linear-gradient(180deg, #fffdf9, var(--sw-card-bg, #FFFCF7)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 0 var(--sw-shadow-hard, #E3DCCF) !important;
}
.sw-choice-btn:active:not(:disabled) {
  transform: translateY(5px) !important;
  box-shadow: 0 1px 0 var(--sw-shadow-hard, #E3DCCF) !important;
}
/* Correct: unmistakable — solid green fill + check. */
.sw-choice-btn.sw-correct {
  background: linear-gradient(135deg,#4CAF50,#2E7D32) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 5px 0 #1B5E20 !important;
}
.sw-choice-btn.sw-correct::after { content: ' ✓'; font-weight: 800; }
/* Wrong: gentle — no red fill, the button just quietly recedes.
   The single short shake carries the "not this one" message. */
.sw-choice-btn.sw-wrong {
  background: #fff !important;
  color: var(--sw-ink-soft, #8A8378) !important;
  border-color: #EAD6CF !important;
  box-shadow: none !important;
  opacity: 0.7;
}
@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;
}
/* One-time entrance pop, replacing the old looping bounce — that used to run
   for 1.8s starting the instant the screen renders, which was also exactly
   when the word audio is playing/needs concentration. This settles in ~0.4s
   and then stays completely still; "your turn" now lives on the speaker
   button's pulse ring instead (only while it's actually speaking), not on
   the choice buttons the whole time. */
@keyframes sw-choice-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sw-choice-pop {
  animation: sw-choice-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ================================
   STAGE 3 — RECALL
   ================================ */
.sw-stage3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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);
}
/* Big word-only targets. White like every other choice button — the flash
   card is the focal color; the answers shouldn't compete with it. */
.sw-stage3 .sw-choice-btn {
  background: #fff !important;
  color: var(--sw-ink) !important;
  border: 2px solid var(--sw-line) !important;
  border-radius: 1.5em !important;
  box-shadow: 0 5px 0 var(--sw-shadow-hard) !important;
  text-shadow: none;
  font-weight: 800 !important;
  font-size: 2.4em !important;
  min-height: 130px !important;
}
.sw-stage3 .sw-choice-btn:hover:not(:disabled) {
  background: #fffdf9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--sw-shadow-hard) !important;
}
/* Feedback must out-rank the stage-3 base rule above (equal specificity,
   later in file = wins) or correct/wrong fills never show on these buttons. */
.sw-stage3 .sw-choice-btn.sw-correct {
  background: linear-gradient(135deg,#4CAF50,#2E7D32) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 5px 0 #1B5E20 !important;
}
.sw-stage3 .sw-choice-btn.sw-wrong {
  background: #fff !important;
  color: var(--sw-ink-soft) !important;
  border-color: #EAD6CF !important;
  box-shadow: none !important;
  opacity: 0.7;
}
.sw-flash-hint { font-size: 0.9em; color: var(--sw-ink-soft); }
.sw-choices-hidden { visibility: hidden; }
/* Recall (stage 3) has no speaker at all by default — genuinely testing
   memory. But a child who truly can't recall shouldn't be stuck blind-
   guessing with no way out: this quiet "need a hint?" replay reuses the
   .sw-flash-hint slot, appearing only after a few seconds of no answer
   (see swArmStage3Hint in app.js) so it never undercuts a quick, confident
   recall. */
.sw-hint-replay-btn {
  background: var(--sw-card-bg);
  border: 1px solid var(--sw-line);
  border-radius: 999px;
  color: var(--sw-ink-soft);
  font-weight: 700;
  font-size: 0.9em;
  padding: 0.5em 1.1em;
  cursor: pointer;
  animation: sw-choice-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Per-word TTS highlight in sight word sentences — a scale "pop" rather than
   a background flash. A background here used to visibly clash with the
   target word's own permanent pill highlight underneath it (two mismatched
   rounded boxes); a pop works cleanly on every word regardless of whether
   it already has its own background. */
.sw-word { display: inline-block; }
@keyframes sw-word-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.sw-word-hl { animation: sw-word-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Learn-stage per-word video (fills the flashcard; word overlaid with a scrim) */
.sw-flashcard-video { position: relative; overflow: hidden; }
.sw-word-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.sw-flashcard-video::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,0.18); /* keeps the word legible over any video */
}
.sw-flashcard-video .sw-big-word,
.sw-flashcard-video .sw-hear-hint { position: relative; z-index: 2; }
.sw-flashcard-video .sw-big-word { font-size: 4em; text-shadow: 0 3px 14px rgba(0,0,0,0.55); }
/* Once the video confirms it can actually play, it already shows the word itself
   (baked into the clip) — drop the static text + scrim so nothing is duplicated. */
.sw-flashcard-video.sw-video-ready::after { display: none; }
.sw-flashcard-video.sw-video-ready .sw-big-word { display: none; }

/* First Words: video + audio only, no card chrome — the video itself carries
   whatever "card" look it needs, the app just frames it plainly. */
.sw-video-frame {
  position: relative;
  width: min(92vw, 520px);
  aspect-ratio: 16 / 9;
  border-radius: 1.5em;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  user-select: none;
}
/* Tap-to-replay feedback — the video itself doesn't visibly change on tap
   (audio replays over the same static frame), so give the frame its own cue. */
.sw-video-frame:active { transform: scale(0.96); box-shadow: 0 0 0 6px rgba(255,255,255,0.45); }
.sw-video-frame .sw-word-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Static-image words (no natural motion of their own — apple, a cup, a sock
   — vs. ball/water/car, which stay video because their motion is true to
   the object). Same frame treatment as the video card for visual consistency. */
.sw-image-frame {
  position: relative;
  width: min(92vw, 520px);
  aspect-ratio: 16 / 9;
  border-radius: 1.5em;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  user-select: none;
}
.sw-image-frame:active { transform: scale(0.96); box-shadow: 0 0 0 6px rgba(255,255,255,0.45); }
.sw-image-frame .sw-word-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Plain text fallback for words that don't have a generated video yet. */
.sw-video-fallback-word {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-size: 3em; font-weight: 800;
  color: #333; background: #eee;
}
.sw-video-frame.sw-video-error .sw-word-video { display: none; }
.sw-video-frame.sw-video-error .sw-video-fallback-word { display: flex; }

/* Held on the settled word+object frame while the word audio plays — no tapping
   to trigger the video's movement early; it unlocks once the word has been said. */
.sw-flashcard.sw-locked,
.sw-video-frame.sw-locked { pointer-events: none; cursor: default; }

/* Fill-in-the-blank: a clear, pulsing "missing word" slot */
.sw-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6em;
  min-height: 1.3em;
  text-align: center;
  background: #FFD54F;
  color: #5d4037;
  font-weight: 800;
  border: 3px dashed #E8A400;
  border-radius: 0.5em;
  padding: 0.05em 0.5em;
  margin: 0 0.15em;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(255,213,79,0.35);
  animation: sw-blank-pulse 1.2s ease-in-out infinite;
}
.sw-blank::before {
  content: "?";
  color: #8a5a00;
  font-weight: 800;
  opacity: 0.55;
}
@keyframes sw-blank-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,213,79,0.40); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 9px rgba(255,213,79,0.12); transform: translateY(-2px); }
}

/* ================================
   DESKTOP SCALE-UP
   Card/button sizes above are tuned for phones — min(92vw,520px) etc. —
   and never grow past that on a wide desktop window, leaving a small
   cluster adrift in a lot of unused page. Scoped to pointer:fine so touch
   tablets/phones (even wide ones in landscape) keep their existing sizing;
   only an actual mouse-driven wide window gets the larger card + buttons.
   ================================ */
@media (min-width: 900px) and (pointer: fine) {
  .sw-video-frame    { width: min(50vw, 760px); }
  .sw-image-frame    { width: min(50vw, 760px); }
  .sw-flashcard      { width: min(50vw, 760px); height: min(28vw, 428px); }
  .sw-big-word       { font-size: 6.5em; }
  .sw-sentence-box   { max-width: 760px; font-size: 1.6em; }
  .sw-back-btn       { font-size: 1.05em !important; padding: 0.65em 1.35em !important; min-height: 54px !important; }
  .sw-next-btn       { font-size: 1.4em !important; padding: 0.8em 3.2em !important; min-height: 72px !important; }
  .sw-speaker-btn    { width: 76px !important; height: 76px !important; font-size: 2.2em !important; }
  .sw-choice-btn     { font-size: 1.4em !important; min-height: 82px !important; min-width: 160px !important; }
  .sw-stage3 .sw-choice-btn { font-size: 2.8em !important; min-height: 150px !important; }
  .sw-topbar-hint    { font-size: 1.1em; }
  .sw-blank-sentence { font-size: 2em; }
  .sw-blank          { min-width: 2.9em; min-height: 1.4em; border-width: 4px; }
}

/* ================================
   STAGE TRANSITION SCREEN
   ================================ */
.sw-transition {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(2em + env(safe-area-inset-top, 0px)) 2em calc(2em + env(safe-area-inset-bottom, 0px));
  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: 800;
  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);
}

/* ================================
   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-cover {
  /* Natural aspect ratio — covers vary (2:3, 4:5, …); forcing a box crops them. */
  width: auto;
  height: auto;
  max-width: min(60vw, 230px);
  max-height: 40vh;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: emoji-intro 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
.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;
}
/* Secondary choice next to "Continue Reading" — same pill shape, quieter
   fill/border so Continue still reads as the default, expected action. */
.story-entry-restart-btn {
  margin-top: 1.2em !important;
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-radius: 999px !important;
  padding: 0.55em 1.6em !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  min-width: unset !important;
  min-height: unset !important;
  animation: title-drop-in 0.65s 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  cursor: pointer !important;
}
.story-entry-restart-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.6) !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;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 500;
  overflow: hidden;
}
.celebration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 1.5em;
}
/* Deliberate rows (header / stars / body / buttons) instead of one flat
   flex-wrap of loose elements — keeps layout predictable at any size
   instead of letting differently-sized items wrap wherever they fit. */
.celebration-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
.celebration-stars {
  font-size: 1.6em;
  letter-spacing: 0.25em;
  animation: fadeInUp 0.6s 0.2s both;
}
.celebration-trophy {
  font-size: 2.6em;
  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-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}
.celebration-text {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.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-cover {
  width: auto;
  height: auto;
  max-width: min(45vw, 150px);
  max-height: 24vh;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  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: 2.6em;
  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: 0.3em;
  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 --- must out-specify `.story-section .story-text { 2em !important }`
     (0,2,0) or this shrink is ignored and long text overflows its half of the page. */
  .story-section .story-text,
  .story-section .story-question {
    font-size: 1.45em !important;
    letter-spacing: 0.02em !important;
    margin: 0.5em 0 !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: 250px !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: calc(0.6em + env(safe-area-inset-top, 0px)) 0.9em 0.6em !important;
  }

  /* --- SW hub --- */
  .sw-hub { padding: 1.2em 0.9em !important; }
  .sw-level-emoji { font-size: 2.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-cover {
    max-height: 30vh !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: calc(0.45em + env(safe-area-inset-top, 0px)) !important;
    right: calc(0.45em + env(safe-area-inset-right, 0px)) !important;
  }
  .tts-fab-label { display: none !important; }
  .story-exit-btn {
    width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
    font-size: 0.9em !important;
    top: calc(0.35em + env(safe-area-inset-top, 0px)) !important;
    left: calc(0.35em + env(safe-area-inset-left, 0px)) !important;
  }

  /* --- Home screen --- */
  /* Portrait tiles on mobile: card width matches the cover so the cover sits
     centered and the title lines up under it (a 130px-wide card around a 75px
     cover left everything looking shifted). */
  .book-card { flex: 0 0 90px !important; min-width: 90px !important; }
  .book-cover { width: 90px !important; height: 120px !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;
  }
  /* Must out-specify `.story-section .story-text { 2em !important }` (0,2,0),
     otherwise this shrink is ignored and the 2em text overflows the short
     landscape viewport and clips at the bottom. Tighten leading/margins too. */
  .story-section .story-text,
  .story-section .story-question {
    font-size: 1.7em !important;
    margin: 0.3em 0 !important;
    line-height: 1.25 !important;
  }
  /* Safety net: if a passage is still taller than the viewport, scroll it rather
     than crop. `safe center` keeps the top reachable when it overflows. */
  .book .book-page-left {
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 0.4em 0.7em !important;
    justify-content: safe center !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 ---
     Keeps the same deliberate rows (header / stars / body / buttons) as
     larger screens — just at compact sizes — instead of letting every
     element wrap freely into whatever few lines it happens to fit. */
  .celebration { overflow-y: auto !important; }
  .celebration-content { gap: 0.45em !important; padding: 0.6em 1em !important; }
  .celebration-header { gap: 0.25em !important; }
  .celebration-trophy { font-size: 1.9em !important; }
  .celebration-title  { font-size: 1.5em !important; margin: 0 !important; }
  .celebration-stars  { font-size: 0.95em !important; letter-spacing: 0.15em !important; }
  .celebration-body   {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.7em !important;
  }
  .celebration-text   { align-items: flex-start !important; text-align: left !important; }
  .celebration-emoji  { font-size: 2.4em !important; }
  .celebration-cover  { max-height: 13vh !important; }
  .celebration-book-name { font-size: 0.9em !important; margin: 0 !important; }
  .celebration-subtitle { font-size: 0.82em !important; margin: 0 !important; text-align: left !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 --- */
  /* Card narrower + Next beside it (row layout kicks in from the plain
     landscape query) — leaves room for both on a short landscape phone.
     Padding/gap trimmed here specifically so the freed space can go to the
     card itself instead — net vertical budget ends up about the same, just
     spent more on the card and less on whitespace around it. */
  .sw-content-area { padding: 0.5em 1em 0.6em !important; }
  .sw-stage-main    { gap: 0.7em !important; }
  .sw-flashcard { height: 180px !important; width: min(60vw, 380px) !important; }
  .sw-big-word { font-size: 3.2em !important; }
  .sw-hear-hint { font-size: 0.75em !important; }
  .sw-sentence-box { font-size: 0.95em !important; padding: 0.4em 0.7em !important; line-height: 1.35 !important; }
  .sw-next-btn { padding: 0.4em 1.2em !important; font-size: 0.9em !important; min-height: 48px !important; }
  .sw-next-slot { min-height: 56px !important; }
  .sw-choice-btn {
    min-height: 64px !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-flash-card (Stage 3's "remember the word" card) had no phone-landscape
     override at all before — left at its 300px desktop height it would
     overflow a short viewport. Sized to match .sw-flashcard here. */
  .sw-flash-card { height: 180px !important; width: min(60vw, 380px) !important; }
  .sw-stage3 { gap: 1em !important; }
  .sw-top-bar { padding: 0.4em 0.9em !important; }
  .sw-video-frame { width: min(60vw, 380px) !important; }
  .sw-image-frame { width: min(60vw, 380px) !important; }
  .sw-hub { padding: 0.8em !important; }
  .sw-level-cards { grid-template-columns: repeat(4, 1fr) !important; }
  .sw-level-card { padding: 0.8em 0.6em !important; }
  .sw-level-emoji { font-size: 1.8em !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", 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", sans-serif;
  font-size: 0.88em;
  font-weight: 800;
  color: #4a4a4a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-field input {
  font-family: "Nunito", 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", 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", 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", sans-serif;
  font-size: 1.05em;
  color: #666;
  margin: 0 0 1.4em;
  text-align: center;
}

.launch-tap {
  font-family: "Nunito", 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;
  }
}

/* =============================
   PROFILES — picker & create/edit
   ============================= */
.profile-screen {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.2em;
  box-sizing: border-box;
  overflow-y: auto;
}
.profile-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 1.8em;
  padding: 1.4em 1.6em 1.6em;
  width: 100%;
  max-width: 540px;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12);
  animation: fadeInUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.profile-h {
  font-family: "Nunito", sans-serif;
  font-size: 1.5em;
  font-weight: 900;
  color: #2E7D32;
  text-align: center;
  margin: 0 0 0.8em;
}
.pf-label {
  display: block;
  font-family: "Nunito", sans-serif;
  font-size: 0.82em;
  font-weight: 800;
  color: #6b6b6b;
  margin: 0.9em 0 0.35em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-input {
  width: 100%;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  font-size: 1.05em;
  padding: 0.6em 0.8em;
  border: 2px solid #e0e0e0;
  border-radius: 0.8em;
  background: #fff;
}
.pf-input:focus { outline: none; border-color: #4CAF50; }
.pf-row { display: flex; gap: 0.6em; }
.pf-row .pf-input { flex: 1; }

/* picker tiles */
.pf-tiles { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; }
.pf-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.4em;
  width: 130px; padding: 1em 0.6em; border: none; cursor: pointer;
  background: #f6f6f6; border-radius: 1.2em;
  font-family: "Nunito", sans-serif;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pf-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.15); }
.pf-tile-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4em; color: #fff;
}
.pf-tile-add .pf-tile-avatar { background: #dcedc8; color: #4CAF50; }
.pf-tile-name { font-weight: 800; font-size: 1.05em; color: #333; }
.pf-tile-sub { font-size: 0.78em; color: #888; }

/* avatar preview + pickers */
.pf-avatar-preview {
  width: 84px; height: 84px; border-radius: 50%; margin: 0.2em auto 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6em; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pf-emoji-grid { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pf-emoji {
  font-size: 1.5em; width: 2em; height: 2em; line-height: 1; cursor: pointer;
  border: 2px solid transparent; border-radius: 0.6em; background: #f2f2f2;
}
.pf-emoji.sel { border-color: #4CAF50; background: #e8f5e9; }
.pf-color-row { display: flex; gap: 0.5em; margin-top: 0.5em; }
.pf-color {
  width: 2em; height: 2em; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent;
}
.pf-color.sel { border-color: #333; }

/* reading-level + interest chips */
.pf-level-row { display: flex; gap: 0.5em; flex-wrap: wrap; }
.pf-level {
  flex: 1; min-width: 130px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 0.1em;
  padding: 0.6em 0.8em; border: 2px solid #e0e0e0; border-radius: 0.8em;
  background: #fff; font-family: "Nunito", sans-serif;
}
.pf-level strong { color: #333; font-size: 1em; }
.pf-level span { color: #888; font-size: 0.8em; }
.pf-level.sel { border-color: #4CAF50; background: #e8f5e9; }
.pf-chip-row { display: flex; gap: 0.5em; flex-wrap: wrap; }
.pf-chip {
  cursor: pointer; padding: 0.45em 1em; border-radius: 2em;
  border: 2px solid #e0e0e0; background: #fff;
  font-family: "Nunito", sans-serif; font-weight: 700; color: #555;
}
.pf-chip.sel { border-color: #4CAF50; background: #4CAF50; color: #fff; }

.pf-actions { display: flex; gap: 0.8em; justify-content: flex-end; margin-top: 1.4em; }
.pf-btn {
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: 1.05em;
  padding: 0.6em 1.8em; border-radius: 2em; border: none; cursor: pointer;
  background: linear-gradient(90deg, #2E7D32, #4CAF50); color: #fff;
}
.pf-btn-ghost { background: #eee; color: #555; }
.pf-btn-sm { font-size: 0.85em; padding: 0.4em 1em; }

/* picker tile management (edit/delete) */
.pf-tile-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.pf-tile-manage { display: flex; gap: 0.5em; }
.pf-tile-manage button {
  border: none; background: transparent; cursor: pointer; font-size: 1em;
  opacity: 0.6; padding: 0.1em 0.3em; border-radius: 0.5em;
}
.pf-tile-manage button:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* switch-profile chip on the home top bar */
.switch-profile-btn {
  display: flex; align-items: center; gap: 0.5em; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: 2em; padding: 0.25em 0.8em 0.25em 0.3em;
  font-family: "Nunito", sans-serif;
}
.switch-profile-btn:hover { background: rgba(0,0,0,0.06); }
.switch-profile-avatar {
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05em;
}
.switch-profile-name { font-weight: 800; font-size: 0.9em; color: #444; }

/* =============================
   SETTINGS (per-child)
   ============================= */
.settings {
  max-width: 560px;
  margin: 0 auto;
  padding: 1em 1.2em 2em;
  font-family: "Nunito", sans-serif;
}
.set-profile-head {
  display: flex; align-items: center; gap: 0.8em;
  padding: 0.8em 1em; background: #f6f6f6; border-radius: 1.2em; margin-bottom: 0.5em;
}
.set-profile-meta { display: flex; flex-direction: column; flex: 1; }
.set-profile-meta strong { font-size: 1.1em; color: #333; }
.set-profile-meta span { font-size: 0.82em; color: #888; }
.set-profile-actions { display: flex; gap: 0.4em; }
.set-section {
  font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em;
  color: #4CAF50; font-weight: 900; margin: 1.4em 0 0.4em;
}
.set-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em;
  padding: 0.6em 0.2em; border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 1em; color: #444;
}
.set-row input[type="range"] { flex: 1; min-width: 120px; }
.set-row input[type="checkbox"] { width: 1.2em; height: 1.2em; }
.set-row select { flex: 1; padding: 0.4em; border-radius: 0.6em; border: 2px solid #e0e0e0; }
.set-val { font-weight: 800; color: #2E7D32; min-width: 3em; text-align: right; }
.set-account { margin-top: 1.8em; display: flex; justify-content: center; }
.set-version { margin-top: 1em; text-align: center; font-size: 0.8em; color: #999; }
body.dark .set-version { color: #777; }
body.dark .set-profile-head { background: rgba(255,255,255,0.08); }
body.dark .set-profile-meta strong { color: #eee; }
body.dark .set-row { color: #ddd; }

/* parent math gate */
.pg-opts { display: flex; gap: 0.7em; justify-content: center; flex-wrap: wrap; }
.pg-opt { min-width: 3.2em; font-size: 1.3em; }

/* parent progress view */
.pp-stats { display: flex; gap: 0.8em; margin: 0.6em 0 0.4em; }
.pp-stat {
  flex: 1; text-align: center; background: #f6f6f6; border-radius: 1em; padding: 0.9em 0.4em;
}
.pp-num { font-size: 1.8em; font-weight: 900; color: #2E7D32; line-height: 1; }
.pp-cap { font-size: 0.72em; color: #888; margin-top: 0.3em; }
.pp-row {
  display: flex; justify-content: space-between; gap: 1em;
  padding: 0.55em 0.2em; border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.95em; color: #444;
}
.pp-row span:last-child { font-weight: 800; color: #333; white-space: nowrap; }
.pp-empty { color: #999; font-style: italic; justify-content: center; }
body.dark .pp-stat { background: rgba(255,255,255,0.08); }
body.dark .pp-row { color: #ddd; }
body.dark .pp-row span:last-child { color: #fff; }

/* sight-words recommended level (matches the child's reading level) */
.sw-level-card { position: relative; }
.sw-level-card.sw-recommended { outline: 3px solid #FFD54F; outline-offset: 2px; }
.sw-rec-badge {
  position: absolute; top: 0.4em; right: 0.4em;
  background: #FFD54F; color: #5d4037; font-weight: 800;
  font-size: 0.62em; padding: 0.2em 0.6em; border-radius: 1em;
}

/* reduced-motion: suppress decorative animations for sensory-sensitive kids */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}