:root {
  --sn-bg: #f0f9ff;
  --sn-panel: #ffffff;
  --sn-text: #0c4a6e;
  --sn-muted: #0369a1;
  --sn-accent: #0284c7;
  --sn-accent-dark: #0369a1;
  --sn-accent-soft: #e0f2fe;
  --sn-border: #bae6fd;
  --sn-shadow: 0 12px 30px rgba(2, 132, 199, 0.14);
  --sn-correct: #166534;
  --sn-correct-bg: #dcfce7;
  --sn-wrong: #9f1239;
  --sn-gradient:
    radial-gradient(circle at 10% 8%, rgba(186, 230, 253, 0.62), transparent 22rem),
    radial-gradient(circle at 90% 12%, rgba(165, 243, 252, 0.55), transparent 24rem),
    radial-gradient(circle at 50% 100%, rgba(224, 242, 254, 0.45), transparent 28rem),
    linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 52%, #ecfeff 100%);
  --sn-card-bg:
    radial-gradient(circle at 14% 14%, rgba(186, 230, 253, 0.55) 0 4rem, transparent 4.1rem),
    radial-gradient(circle at 86% 12%, rgba(153, 246, 228, 0.42) 0 3rem, transparent 3.1rem),
    linear-gradient(165deg, #e0f2fe 0%, #f0fdfa 48%, #f0f9ff 100%);
  --sn-font-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --sn-font-body: "Nunito", "Fredoka", ui-rounded, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--sn-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family: var(--sn-font-body);
  color: var(--sn-text);
  background: var(--sn-gradient);
}

button, select { font: inherit; }
button { touch-action: manipulation; cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, .sn-badge, .sn-stat strong, .sn-choice {
  font-family: var(--sn-font-display);
}

.sn-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sn-blob {
  position: absolute;
  border-radius: 999px;
  opacity: 0.72;
  animation: snBlobDrift 10s ease-in-out infinite;
}

.sn-blob-a { width: 18rem; height: 18rem; top: -4rem; left: -4rem; background: #bae6fd; }
.sn-blob-b { width: 20rem; height: 20rem; top: 10%; right: -5rem; background: #a5f3fc; animation-delay: -3s; }
.sn-blob-c { width: 18rem; height: 18rem; bottom: -5rem; left: 28%; background: #99f6e4; animation-delay: -6s; }

.sn-float {
  position: absolute;
  font-size: clamp(1rem, 3vw, 1.5rem);
  opacity: 0.68;
  animation: snFloat 7s ease-in-out infinite;
}

.sn-float-1 { left: 8%; top: 15%; }
.sn-float-2 { left: 18%; top: 65%; animation-delay: -1.2s; }
.sn-float-3 { right: 12%; top: 18%; animation-delay: -2.4s; }
.sn-float-4 { right: 16%; top: 60%; animation-delay: -3.6s; }
.sn-float-5 { left: 45%; top: 8%; animation-delay: -4.8s; }

.sn-shell {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  margin: 0 auto;
  padding:
    max(18px, env(safe-area-inset-top))
    16px
    max(28px, env(safe-area-inset-bottom));
}

.sn-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sn-topbar h1 {
  margin: 0 0 4px;
  font-size: clamp(1.85rem, 7vw, 2.75rem);
  line-height: 1.05;
}

.sn-subtitle, .sn-footer p, .sn-help {
  color: var(--sn-muted);
}

.sn-eyebrow {
  margin: 0 0 4px;
  color: var(--sn-accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sn-title-icon {
  display: inline-block;
  animation: snIconSway 2.8s ease-in-out infinite;
}

.sn-controls {
  display: flex;
  gap: 8px;
}

.sn-icon-button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--sn-border);
  border-radius: 16px;
  background: var(--sn-panel);
  box-shadow: var(--sn-shadow);
  font-size: 1.35rem;
}

.sn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.sn-stat {
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--sn-border);
  border-radius: 18px;
  background: var(--sn-panel);
  box-shadow: var(--sn-shadow);
}

.sn-stat span {
  display: block;
  color: var(--sn-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.sn-stat strong {
  display: block;
  margin-top: 3px;
  font-size: 1.25rem;
}

.sn-stat-stars { background: linear-gradient(180deg, #fff7ed, #ffedd5); border-color: #fdba74; }
.sn-stat-streak { background: linear-gradient(180deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.sn-stat-stories { background: linear-gradient(180deg, #eef2ff, #e0e7ff); border-color: #a5b4fc; }

.sn-story-card,
.sn-choice-card {
  border: 2px solid var(--sn-border);
  border-radius: 28px;
  background: var(--sn-card-bg);
  box-shadow: var(--sn-shadow);
}

.sn-story-card {
  padding: 18px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}

.sn-scene-banner {
  position: relative;
  margin-bottom: 10px;
  overflow: visible;
}

.sn-scene-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sn-scene-wrap {
  position: relative;
  flex: 0 0 auto;
}

.sn-scene-stage {
  position: relative;
  width: 100%;
  height: clamp(12rem, 34vw, 19rem);
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid var(--sn-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), var(--sn-shadow);
  background: rgba(255, 255, 255, 0.72);
}

.sn-scene-cast {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 10px 4.75rem 12px 14px;
}

.sn-scene-actor {
  display: grid;
  place-items: center;
  line-height: 1;
  transform-origin: bottom center;
  transition: opacity 0.2s ease;
}

.sn-scene-actor.is-empty {
  opacity: 0;
  visibility: hidden;
}

.sn-scene-actor-left,
.sn-scene-actor-right {
  flex: 0 1 28%;
  font-size: clamp(1.45rem, 5vw, 2rem);
  opacity: 0.94;
}

.sn-scene-actor-main {
  flex: 0 1 36%;
  font-size: clamp(2.15rem, 8vw, 3rem);
}

.sn-scene-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0.92;
  transition: background 0.35s ease;
}

.sn-scene-stage.sn-theme-sky .sn-scene-backdrop {
  background: linear-gradient(180deg, #bae6fd 0%, #e0f2fe 55%, #f0f9ff 100%);
}

.sn-scene-stage.sn-theme-grass .sn-scene-backdrop {
  background: linear-gradient(180deg, #bae6fd 0%, #bbf7d0 58%, #86efac 100%);
}

.sn-scene-stage.sn-theme-warm .sn-scene-backdrop {
  background: linear-gradient(180deg, #fde68a 0%, #fed7aa 55%, #ffedd5 100%);
}

.sn-scene-stage.sn-theme-water .sn-scene-backdrop {
  background: linear-gradient(180deg, #67e8f9 0%, #7dd3fc 50%, #bae6fd 100%);
}

.sn-scene-stage.sn-theme-night .sn-scene-backdrop {
  background: linear-gradient(180deg, #312e81 0%, #4338ca 45%, #6366f1 100%);
}

.sn-scene-stage.sn-theme-cozy .sn-scene-backdrop {
  background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 50%, #fdf2f8 100%);
}

.sn-scene-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sn-scene-particle {
  position: absolute;
  left: var(--sn-px, 50%);
  top: var(--sn-py, 50%);
  font-size: clamp(0.6rem, 2vw, 0.8rem);
  opacity: 0.72;
  animation: snParticleDrift var(--sn-dur, 3s) ease-in-out infinite;
  animation-delay: var(--sn-delay, 0s);
}

.sn-scene {
  position: relative;
  z-index: 1;
}

.sn-scene-stage.sn-scene-enter {
  animation: snSceneEnter 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.sn-scene.sn-scene-reading,
.sn-scene-actor-main.sn-scene-reading {
  animation: snSceneReadPulse 0.45s ease both;
}

.sn-anim-bounce { animation: snAnimBounce 1.8s ease-in-out infinite; }
.sn-anim-float { animation: snAnimFloat 2.6s ease-in-out infinite; }
.sn-anim-sway { animation: snAnimSway 2.8s ease-in-out infinite; }
.sn-anim-pulse { animation: snAnimPulse 2s ease-in-out infinite; }
.sn-anim-wiggle { animation: snAnimWiggle 1.2s ease-in-out infinite; }
.sn-anim-hop { animation: snAnimHop 1.5s ease-in-out infinite; }
.sn-anim-drift { animation: snAnimDrift 3.2s ease-in-out infinite; }
.sn-anim-spin { animation: snAnimSpin 4s linear infinite; }
.sn-anim-purr { animation: snAnimPurr 2.4s ease-in-out infinite; }
.sn-anim-wag { animation: snAnimWag 0.9s ease-in-out infinite; }
.sn-anim-peck { animation: snAnimPeck 1.1s ease-in-out infinite; }
.sn-anim-roar { animation: snAnimRoar 2.2s ease-in-out infinite; }
.sn-anim-flutter { animation: snAnimFlutter 1.4s ease-in-out infinite; }
.sn-anim-swim { animation: snAnimSwim 2s ease-in-out infinite; }
.sn-anim-march { animation: snAnimMarch 1.6s ease-in-out infinite; }
.sn-anim-crawl { animation: snAnimCrawl 3.5s ease-in-out infinite; }
.sn-anim-buzz { animation: snAnimBuzz 0.55s ease-in-out infinite; }
.sn-anim-roll { animation: snAnimRoll 1.8s ease-in-out infinite; }
.sn-anim-soar { animation: snAnimSoar 2.8s ease-in-out infinite; }
.sn-anim-drive { animation: snAnimDrive 1.4s ease-in-out infinite; }
.sn-anim-rain { animation: snAnimRain 2.2s ease-in-out infinite; }
.sn-anim-glow { animation: snAnimGlow 2.4s ease-in-out infinite; }
.sn-anim-twinkle { animation: snAnimTwinkle 1.6s ease-in-out infinite; }
.sn-anim-shimmer { animation: snAnimShimmer 2.5s ease-in-out infinite; }
.sn-anim-fall { animation: snAnimFall 2.8s ease-in-out infinite; }
.sn-anim-gust { animation: snAnimGust 1.5s ease-in-out infinite; }
.sn-anim-bloom { animation: snAnimBloom 2.6s ease-in-out infinite; }
.sn-anim-grow { animation: snAnimGrow 2.4s ease-in-out infinite; }
.sn-anim-wave { animation: snAnimWave 2.2s ease-in-out infinite; }
.sn-anim-erupt { animation: snAnimErupt 1.8s ease-in-out infinite; }
.sn-anim-steam { animation: snAnimSteam 2.2s ease-in-out infinite; }
.sn-anim-drop { animation: snAnimDrop 2s ease-in-out infinite; }
.sn-anim-page { animation: snAnimPage 2.4s ease-in-out infinite; }
.sn-anim-scribble { animation: snAnimScribble 1.1s ease-in-out infinite; }
.sn-anim-splash { animation: snAnimSplash 1.6s ease-in-out infinite; }
.sn-anim-run { animation: snAnimRun 0.85s ease-in-out infinite; }
.sn-anim-swing { animation: snAnimSwing 2.2s ease-in-out infinite; }
.sn-anim-bubble { animation: snAnimBubble 2s ease-in-out infinite; }
.sn-anim-tick { animation: snAnimTick 1.2s steps(2, end) infinite; }
.sn-anim-ring { animation: snAnimRing 1.4s ease-in-out infinite; }
.sn-anim-sail { animation: snAnimSail 2.6s ease-in-out infinite; }
.sn-anim-sparkle { animation: snAnimTwinkle 1.2s ease-in-out infinite; }
.sn-anim-melt { animation: snAnimMelt 2.4s ease-in-out infinite; }

.sn-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sn-accent-soft);
  color: var(--sn-accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
  max-width: min(100%, 12rem);
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

.sn-story-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 4.2vw, 1.35rem);
  line-height: 1.25;
}

.sn-passage-shell {
  flex: 1 1 auto;
  min-height: clamp(15rem, 42vh, 22rem);
  display: flex;
  flex-direction: column;
  border: 2px dashed var(--sn-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.sn-passage-shell:has(.sn-passage.is-reading) {
  border-color: var(--sn-accent);
  background: rgba(255, 255, 255, 0.94);
}

.sn-passage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  scroll-padding-top: 12px;
  scroll-padding-bottom: 28px;
}

.sn-passage-hint {
  display: none;
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--sn-muted);
}

.sn-story-title {
  margin: 0 0 8px;
  font-family: var(--sn-font-display);
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  font-weight: 900;
  color: var(--sn-accent-dark);
  text-align: center;
}

.sn-line {
  margin: 0 0 5px;
  font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  font-weight: 750;
  line-height: 1.55;
}

.sn-line-btn {
  display: block;
  width: 100%;
  margin: 0 0 5px;
  padding: 5px 12px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--sn-text);
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.sn-word {
  display: inline-block;
  margin: 0;
  border: 0;
  border-radius: 6px;
  padding: 1px 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.sn-word:hover,
.sn-word:focus-visible {
  background: rgba(253, 224, 71, 0.55);
  outline: none;
}

.sn-word.read {
  background: rgba(186, 230, 253, 0.55);
}

.sn-word.reading {
  background: #fde047;
  color: #713f12;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45);
}

.sn-line-btn.active {
  background: var(--sn-accent-soft);
  border-color: var(--sn-accent);
  color: var(--sn-accent-dark);
}

.sn-line-btn.reading-line {
  animation: snLineReadGlow 1.6s ease-in-out infinite;
}

.sn-line-btn.reading-line.active {
  background: rgba(186, 230, 253, 0.42);
}

.sn-line:last-child,
.sn-line-btn:last-child {
  margin-bottom: 4px;
}

.sn-read-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.sn-read-button {
  min-height: 42px;
  padding: 8px 14px;
  border: 2px solid var(--sn-border);
  border-radius: 999px;
  background: white;
  color: var(--sn-accent-dark);
  font-weight: 800;
}

.sn-feedback {
  min-height: 42px;
  margin-top: 12px;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.sn-feedback-pop {
  animation: snFeedbackPop 0.4s ease;
}

.sn-practice-card {
  padding: 16px;
  text-align: center;
}

.sn-help {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sn-muted);
}

.sn-done-button {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 14px 18px;
  border: 3px solid #4ade80;
  border-radius: 22px;
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: var(--sn-correct);
  font-family: var(--sn-font-display);
  font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(22, 101, 52, 0.18);
  transition: transform 0.12s ease;
}

.sn-done-button:hover,
.sn-done-button:focus-visible {
  transform: translateY(-2px) scale(1.01);
}

.sn-done-button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.sn-celebration-next {
  display: block;
  width: 100%;
  margin-top: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 3px solid #67e8f9;
  border-radius: 18px;
  background: white;
  color: var(--sn-accent-dark);
  font-family: var(--sn-font-display);
  font-size: 1.05rem;
  font-weight: 900;
}

.sn-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.sn-action-row .sn-secondary {
  width: 100%;
  min-height: 46px;
}

.sn-favorite-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

.sn-favorite-action.is-favorite {
  border-color: #f472b6;
  background: linear-gradient(180deg, #fce7f3, #ffffff);
  color: #831843;
}

.sn-secondary {
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid var(--sn-border);
  border-radius: 16px;
  background: var(--sn-panel);
  color: var(--sn-text);
  font-weight: 800;
}

.sn-hint-box.hidden { display: none; }

.sn-footer {
  margin-top: 16px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.sn-footer a {
  color: var(--sn-accent-dark);
  font-weight: 800;
}

.sn-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12, 74, 110, 0.42);
  backdrop-filter: blur(5px);
}

.sn-overlay.hidden { display: none; }

.sn-window {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 18px;
  border: 3px solid #67e8f9;
  border-radius: 28px;
  background: linear-gradient(180deg, #f0f9ff, #e0f2fe);
  box-shadow: 0 24px 60px rgba(12, 74, 110, 0.28);
  text-align: center;
}

.sn-window h2 {
  margin: 0 0 8px;
  color: var(--sn-accent-dark);
  font-size: clamp(1.6rem, 6vw, 2rem);
}

.sn-window p {
  margin: 0 0 8px;
  color: var(--sn-muted);
  font-weight: 700;
}

.sn-celebrate-char {
  width: min(160px, 42vw);
  min-height: 132px;
  display: grid;
  place-items: end center;
  margin: 0 auto 8px;
  line-height: 1;
}

.sn-celebrate-hero-art {
  width: 100%;
  height: 100%;
  max-height: 150px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 12px rgba(15, 55, 91, .16));
}

.sn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--sn-border);
  border-radius: 12px;
  background: white;
}

.sn-settings-intro {
  margin-bottom: 12px;
  color: var(--sn-muted);
  font-size: 0.9rem;
}

.sn-settings-grid {
  display: grid;
  gap: 10px;
}

.sn-settings-grid label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.sn-settings-grid select {
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--sn-border);
  border-radius: 14px;
  background: white;
  color: var(--sn-text);
}

.reveal-in {
  animation: snReveal 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }

@keyframes snSceneEnter {
  from { opacity: 0; transform: scale(0.82) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes snSceneReadPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.14); }
}

@keyframes snParticleDrift {
  0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.45; }
  50% { transform: translate(4px, -10px) scale(1.05); opacity: 0.95; }
}

@keyframes snLineReadGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
  50% { box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18); }
}

@keyframes snAnimBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes snAnimFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes snAnimSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes snAnimPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.92; }
}

@keyframes snAnimWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

@keyframes snAnimHop {
  0%, 100% { transform: translateY(0) scaleX(1); }
  35% { transform: translateY(-14px) scaleX(1.05); }
  55% { transform: translateY(0) scaleX(0.96); }
}

@keyframes snAnimDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, -8px); }
}

@keyframes snAnimSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes snAnimPurr {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes snAnimWag {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes snAnimPeck {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
}

@keyframes snAnimRoar {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12); }
  60% { transform: scale(1.06); }
}

@keyframes snAnimFlutter {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}

@keyframes snAnimSwim {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(8px) rotate(4deg); }
}

@keyframes snAnimMarch {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@keyframes snAnimCrawl {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}

@keyframes snAnimBuzz {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -3px); }
}

@keyframes snAnimRoll {
  0%, 100% { transform: translateX(-6px) rotate(-8deg); }
  50% { transform: translateX(6px) rotate(8deg); }
}

@keyframes snAnimSoar {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(4px, -12px) rotate(8deg); }
}

@keyframes snAnimDrive {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}

@keyframes snAnimRain {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.85; }
}

@keyframes snAnimGlow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.15); }
}

@keyframes snAnimTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.12) rotate(12deg); opacity: 0.82; }
}

@keyframes snAnimShimmer {
  0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
  50% { transform: scale(1.05); filter: hue-rotate(18deg); }
}

@keyframes snAnimFall {
  0%, 100% { transform: translateY(-6px) rotate(-6deg); }
  50% { transform: translateY(4px) rotate(6deg); }
}

@keyframes snAnimGust {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  50% { transform: translateX(6px) skewX(4deg); }
}

@keyframes snAnimBloom {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.08); }
}

@keyframes snAnimGrow {
  0%, 100% { transform: scale(0.92) translateY(4px); }
  50% { transform: scale(1.06) translateY(0); }
}

@keyframes snAnimWave {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-4px); }
}

@keyframes snAnimErupt {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-10px) scale(1.08); }
}

@keyframes snAnimSteam {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-6px); opacity: 0.88; }
}

@keyframes snAnimDrop {
  0%, 100% { transform: translateY(-8px); }
  55% { transform: translateY(2px); }
}

@keyframes snAnimPage {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg) scale(1.04); }
}

@keyframes snAnimScribble {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(-5deg) translateX(-2px); }
  75% { transform: rotate(5deg) translateX(2px); }
}

@keyframes snAnimSplash {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.1) rotate(-8deg); }
  70% { transform: scale(1.06) rotate(8deg); }
}

@keyframes snAnimRun {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

@keyframes snAnimSwing {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

@keyframes snAnimBubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px) scale(1.04); }
}

@keyframes snAnimTick {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes snAnimRing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-8deg) scale(1.04); }
  75% { transform: rotate(8deg) scale(1.04); }
}

@keyframes snAnimSail {
  0%, 100% { transform: translateX(-4px) rotate(-6deg); }
  50% { transform: translateX(4px) rotate(6deg); }
}

@keyframes snAnimMelt {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.92); }
}

@keyframes snBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -10px) scale(1.05); }
}

@keyframes snFloat {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-14px); opacity: 0.88; }
}

@keyframes snIconSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg) scale(1.05); }
}

@keyframes snFeedbackPop {
  0% { transform: scale(0.96); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes snReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes snCelebrateHop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sn-blob,
  .sn-float,
  .sn-title-icon,
  .sn-celebrate-char,
  .reveal-in,
  .sn-scene-stage,
  .sn-scene,
  .sn-scene-actor,
  .sn-scene-particle,
  .sn-line-btn.reading-line,
  .sn-feedback-pop,
  .sn-line-btn,
  .sn-done-button,
  .sn-scene-backdrop {
    animation: none !important;
    transition: none !important;
  }

  .sn-line-btn:hover,
  .sn-line-btn:focus-visible,
  .sn-done-button:hover,
  .sn-done-button:focus-visible {
    transform: none;
  }
}


/* Story illustration hero -------------------------------------------------- */
.sn-story-image {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 320ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

.sn-story-image-shade {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 48%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 29, 48, .72), rgba(5, 29, 48, 0));
  transition: opacity 320ms ease;
}

.sn-story-image-caption {
  position: absolute;
  left: clamp(14px, 3vw, 24px);
  right: 68px;
  bottom: clamp(13px, 2.4vw, 22px);
  z-index: 5;
  color: #fff;
  font-family: var(--sn-font-display);
  font-size: clamp(1.55rem, 5vw, 2.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(8px);
  text-shadow: 0 3px 14px rgba(3, 22, 36, .72);
  transition: opacity 320ms ease 80ms, transform 320ms ease 80ms;
}

.sn-scene-stage.has-story-image {
  background: #dff3ff;
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(2, 90, 140, .18), inset 0 0 0 1px rgba(255,255,255,.65);
}

.sn-scene-stage.has-story-image.story-image-ready .sn-story-image,
.sn-scene-stage.has-story-image.story-image-ready .sn-story-image-shade,
.sn-scene-stage.has-story-image.story-image-ready .sn-story-image-caption { opacity: 1; }
.sn-scene-stage.has-story-image.story-image-ready .sn-story-image { transform: scale(1); }
.sn-scene-stage.has-story-image.story-image-ready .sn-story-image-caption { transform: translateY(0); }

.sn-scene-stage.has-story-image .sn-scene-backdrop,
.sn-scene-stage.has-story-image .sn-scene-cast,
.sn-scene-stage.has-story-image .sn-scene-particles,
.sn-scene-stage.has-story-image .sn-scene-sprite-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 560px) {
  .sn-story-card { padding: 12px; }
  .sn-scene-stage { height: clamp(11rem, 58vw, 14rem); border-radius: 20px; }
  .sn-story-image-caption { right: 18px; }
}

@media (min-width: 800px) {
  .sn-scene-stage { height: clamp(15rem, 30vw, 20rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sn-story-image, .sn-story-image-shade, .sn-story-image-caption { transition: none !important; }
}

/* =========================================================
   Story Nest illustrated dashboard v3
   Rebuilds the main reading screen to match the visual mockup.
   ========================================================= */

.sn-main-stage-v3 { margin-top: 20px; }
.sn-play-layout-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(285px, .9fr);
  gap: 16px;
  align-items: stretch;
}

.sn-story-card-v3,
.sn-practice-card-v3 {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cfe3f5;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 32px rgba(14, 92, 145, .12);
}

.sn-scene-banner-v3 { position: relative; }
.sn-scene-stage-v3 {
  width: 100%;
  height: clamp(270px, 34vw, 410px) !important;
  min-height: 270px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.sn-scene-stage-v3 .sn-story-image { object-position: center; }
.sn-scene-stage-v3 .sn-story-image-shade {
  height: 36%;
  background: linear-gradient(to top, rgba(2,24,38,.82), transparent);
}
.sn-scene-stage-v3 .sn-story-image-caption {
  left: 22px;
  bottom: 18px;
  font-size: clamp(2rem, 5vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.sn-hero-sound {
  position: absolute;
  right: 17px;
  top: 17px;
  z-index: 7;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: rgba(4,37,58,.58);
  color: white;
  font-size: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.sn-passage-shell-v3 { padding: 8px 18px 16px; background:#fff; }
.sn-story-card-v3 .sn-passage { display:grid; gap:3px; }
.sn-story-card-v3 .sn-line-btn {
  position: relative;
  min-height: 47px;
  padding: 8px 14px 8px 54px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #112d54;
  text-align: left;
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 750;
}
.sn-story-card-v3 .sn-line-btn:first-child { background:#eef7ff; }
.sn-story-card-v3 .sn-line-btn::before {
  content: attr(data-sentence-number);
  position:absolute;
  left: 9px;
  top:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:translateY(-50%);
  background:#dceeff;
  color:#2879bd;
  font-family:var(--sn-font-display);
  font-weight:800;
  font-size:.92rem;
}
.sn-story-card-v3 .sn-passage { counter-reset: snline; }
.sn-story-card-v3 .sn-line-btn { counter-increment: snline; }
.sn-story-card-v3 .sn-line-btn .sn-line-number { display:none !important; }
.sn-story-card-v3 .sn-line-btn:hover { background:#f2f8fe; }

.sn-practice-card-v3 {
  padding: 24px 18px 18px;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.sn-practice-heading { display:flex; align-items:center; gap:11px; margin:0 4px 8px; }
.sn-practice-heading > span { font-size:2rem; }
.sn-practice-heading > .sn-current-grade { margin-left:auto; padding:3px 7px; border:1px solid #bae6fd; border-radius:999px; background:#f0f9ff; }
.sn-current-grade select { border:0; outline:0; background:transparent; color:#0369a1; font:800 .72rem/1 var(--sn-font-display); cursor:pointer; }
.sn-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.sn-practice-heading h2 { margin:0; color:#163b6b; font-size:1.7rem; }
.sn-practice-heading p { margin:2px 0 0; color:#6680a2; font-size:1rem; }
.sn-mic-zone { display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0 8px; }
.sn-mic-button {
  width:118px; height:118px; display:grid; place-items:center;
  border:12px solid #e0f2ff; border-radius:50%;
  background:linear-gradient(145deg,#35adff,#0778e9);
  box-shadow:0 10px 24px rgba(0,119,222,.25), inset 0 2px 0 rgba(255,255,255,.4);
  font-size:3rem;
}
.sn-wave { color:#b7dcfa; font-size:1rem; letter-spacing:-2px; }
.sn-mic-label { margin:0 0 20px; text-align:center; color:#18375f; font-weight:800; }
.sn-done-button-v3 {
  width:100%; min-height:54px; margin:0; border:0; border-radius:10px;
  background:linear-gradient(#25bd4a,#17a43a); color:#fff;
  font-size:1.1rem; font-weight:900; box-shadow:0 5px 14px rgba(20,150,55,.2);
}
.sn-action-row-v3 { display:grid; grid-template-columns:1.25fr .9fr; gap:10px; margin-top:16px; }
.sn-action-row-v3 button {
  min-height:52px; border:2px solid #2d8ef0; border-radius:12px;
  background:#fff; color:#1672d2; font-weight:850;
}
.sn-action-row-v3 .sn-line-mode-v3 { border-color:#d4e0ed; color:#3b5574; }
.sn-tips-card {
  margin-top:18px; padding:15px 16px; border:1px solid #c7e3f8; border-radius:14px;
  background:linear-gradient(145deg,#edf8ff,#dff1ff); color:#294d78;
}
.sn-tips-card h3 { margin:0 0 10px; font-family:var(--sn-font-display); color:#184f8e; }
.sn-tips-card p { margin:8px 0; font-size:.86rem; font-weight:700; }
.sn-grade-awards { margin-top:12px; padding-top:10px; border-top:1px solid rgba(40,121,189,.22); }
.sn-grade-awards.hidden { display:none !important; }
.sn-grade-awards h4 { margin:0 0 8px; color:#184f8e; font:800 .82rem/1.1 var(--sn-font-display); }
.sn-grade-award-badges { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }

.sn-grade-award {
  --sn-award-main: #b87333;
  --sn-award-light: #f4c89b;
  --sn-award-dark: #7a3f19;
  --sn-award-edge: #7a451c;
  --sn-award-ink: #4b240d;
  width: 58px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 6px 8px rgba(30, 64, 95, .16));
}

.sn-grade-award-svg { display:block; width:100%; height:100%; overflow:visible; }
.sn-grade-award-1 {
  --sn-award-main: #b87333;
  --sn-award-light: #efc08e;
  --sn-award-dark: #8f5322;
  --sn-award-edge: #74401a;
  --sn-award-ink: #51280f;
}
.sn-grade-award-2 {
  --sn-award-main: #b7c1cf;
  --sn-award-light: #f7fafc;
  --sn-award-dark: #7d8795;
  --sn-award-edge: #65707f;
  --sn-award-ink: #34404d;
}
.sn-grade-award-3 {
  --sn-award-main: #e8bb33;
  --sn-award-light: #fff2a3;
  --sn-award-dark: #ba7f10;
  --sn-award-edge: #9a6605;
  --sn-award-ink: #6f4500;
}
.sn-grade-award:hover,
.sn-grade-award:focus-visible {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 9px 10px rgba(30, 64, 95, .2));
}
.sn-grade-award:active { transform: translateY(0) scale(.985); }
.sn-grade-award:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .sn-grade-award-badges { gap: 8px; }
  .sn-grade-award { width: 54px; height: 68px; }
}

.sn-favorite-action-v3 {
  margin-top:auto; padding-top:13px; border:0; background:transparent; color:#e5a900; font-weight:800;
}
.sn-bottom-cheer {
  width:min(720px,90%); margin:22px auto 0; padding:11px 20px; border-radius:999px;
  background:#daf1ff; color:#2467a4; text-align:center; font-size:.9rem;
}

/* Top navigation gets the labelled-card appearance from the concept image. */
.sn-controls.sn-fun-buttons { align-items:stretch; flex-wrap:wrap; justify-content:flex-end; }
.sn-controls.sn-fun-buttons .sn-icon-button {
  width:66px; height:70px; display:flex; align-items:center; justify-content:center;
  border:1px solid #d5e5f3; border-radius:15px; background:#fff;
  box-shadow:0 7px 18px rgba(25,95,145,.12); font-size:1.65rem;
}

@media (max-width: 820px) {
  .sn-play-layout-v3 { grid-template-columns:1fr; }
  .sn-practice-card-v3 { min-height:auto; }
  .sn-scene-stage-v3 { height:clamp(235px,62vw,360px)!important; }
  .sn-bottom-cheer { width:100%; }
}
@media (max-width: 540px) {
  .sn-main-stage-v3 { margin-top:12px; }
  .sn-story-card-v3,.sn-practice-card-v3 { border-radius:18px; }
  .sn-scene-stage-v3 { min-height:220px; }
  .sn-scene-stage-v3 .sn-story-image-caption { left:15px; bottom:13px; font-size:2rem; }
  .sn-hero-sound { width:40px;height:40px;right:12px;top:12px; }
  .sn-passage-shell-v3 { padding:7px 9px 12px; }
  .sn-story-card-v3 .sn-line-btn { padding-left:45px; font-size:.98rem; }
}

/* =========================================================
   Story Nest illustrated dashboard v4
   Wider reading canvas + passage content must never clip.
   ========================================================= */

/* Let the dashboard use the width shown in the visual concept. */
.sn-shell {
  width: min(1380px, 100%) !important;
  max-width: 1380px !important;
  padding-inline: clamp(14px, 2.2vw, 30px) !important;
}

/* Never lock the page to one viewport or hide vertical content. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.sn-main-stage-v3,
.pp-main-stage.sn-main-stage-v3 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Give the illustration and story text noticeably more room. */
.sn-play-layout-v3,
.pp-play-layout.sn-play-layout-v3 {
  grid-template-columns: minmax(0, 2.35fr) minmax(310px, 0.9fr) !important;
  gap: clamp(16px, 1.7vw, 24px) !important;
  align-items: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.sn-story-card-v3 {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* A wider, cinematic image banner. */
.sn-scene-stage-v3 {
  height: clamp(320px, 31vw, 470px) !important;
  min-height: 320px !important;
  max-height: none !important;
}

/* The passage grows with its content. It never becomes an inner scroll box. */
.sn-story-card-v3 .sn-passage-shell,
.sn-story-card-v3 .sn-passage-shell-v3 {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px 20px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: #fff !important;
}

.sn-story-card-v3 .sn-passage {
  display: grid !important;
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 5px !important;
  padding: 0 !important;
  overflow: visible !important;
  scrollbar-width: none;
}

.sn-story-card-v3 .sn-line-btn {
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
  padding-block: 10px !important;
}

.sn-story-card-v3 .sn-passage-hint,
.sn-story-card-v3 .sn-feedback {
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.sn-practice-card-v3 {
  position: sticky;
  top: 14px;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 980px) {
  .sn-play-layout-v3,
  .pp-play-layout.sn-play-layout-v3 {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr) !important;
  }

  .sn-scene-stage-v3 {
    height: clamp(285px, 38vw, 410px) !important;
    min-height: 285px !important;
  }
}

@media (max-width: 820px) {
  .sn-play-layout-v3,
  .pp-play-layout.sn-play-layout-v3 {
    grid-template-columns: 1fr !important;
  }

  .sn-practice-card-v3 {
    position: static;
  }

  .sn-scene-stage-v3 {
    height: clamp(260px, 58vw, 400px) !important;
    min-height: 260px !important;
  }
}

@media (max-width: 540px) {
  .sn-scene-stage-v3 {
    height: clamp(235px, 66vw, 330px) !important;
    min-height: 235px !important;
  }

  .sn-story-card-v3 .sn-passage-shell-v3 {
    padding: 9px 10px 15px !important;
  }

  .sn-story-card-v3 .sn-line-btn {
    min-height: 48px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* =========================================================
   Story Nest illustrated dashboard v5
   Viewport-fit reading mode: the complete passage remains
   visible on common laptop screens without clipping.
   ========================================================= */

@media (min-width: 821px) {
  .sn-shell {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
  }

  .sn-topbar {
    align-items: center !important;
    gap: 12px !important;
  }

  .sn-topbar h1 {
    font-size: clamp(1.75rem, 3vw, 2.55rem) !important;
    margin-bottom: 1px !important;
  }

  .sn-eyebrow {
    margin-bottom: 1px !important;
    font-size: .68rem !important;
  }

  .sn-subtitle {
    margin-bottom: 0 !important;
    font-size: .88rem !important;
  }

  .sn-controls.sn-fun-buttons {
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  .sn-controls.sn-fun-buttons .sn-icon-button {
    width: 51px !important;
    height: 53px !important;
    min-width: 51px !important;
    border-radius: 13px !important;
    font-size: 1.35rem !important;
  }

  /* Put all progress information on one compact row. */
  .sn-stats {
    display: grid !important;
    grid-template-columns: minmax(210px, 1.7fr) minmax(210px, 1.7fr) repeat(3, minmax(82px, .55fr)) !important;
    gap: 8px !important;
    margin: 9px 0 10px !important;
    align-items: stretch !important;
  }

  .sn-star-goal,
  .sn-bookshelf-bar {
    grid-column: auto !important;
    min-height: 55px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .sn-stat {
    min-height: 55px !important;
    padding: 7px 6px !important;
    border-radius: 15px !important;
  }

  .sn-stat span {
    margin-bottom: 1px !important;
    font-size: .7rem !important;
  }

  .sn-stat strong {
    font-size: 1.05rem !important;
  }

  .sn-main-stage-v3 {
    margin-top: 0 !important;
  }

  .sn-play-layout-v3,
  .pp-play-layout.sn-play-layout-v3 {
    grid-template-columns: minmax(0, 2.55fr) minmax(285px, .82fr) !important;
    gap: 14px !important;
  }

  /* The hero uses viewport height, not a large fixed desktop size. */
  .sn-scene-stage-v3 {
    height: clamp(205px, 29vh, 285px) !important;
    min-height: 205px !important;
  }

  .sn-scene-stage-v3 .sn-story-image-caption {
    font-size: clamp(1.8rem, 3vw, 2.7rem) !important;
    bottom: 12px !important;
  }

  .sn-hero-sound {
    width: 42px !important;
    height: 42px !important;
    top: 12px !important;
    bottom: auto !important;
  }

  /* Every line is present; the panel sizes to its contents. */
  .sn-story-card-v3 .sn-passage-shell-v3 {
    padding: 6px 13px 9px !important;
  }

  .sn-story-card-v3 .sn-passage {
    gap: 1px !important;
  }

  .sn-story-card-v3 .sn-line-btn {
    min-height: 37px !important;
    padding: 5px 8px 5px 43px !important;
    font-size: clamp(.84rem, 1.3vw, 1rem) !important;
    line-height: 1.2 !important;
  }

  .sn-story-card-v3 .sn-line-btn::before {
    width: 25px !important;
    height: 25px !important;
    left: 7px !important;
    font-size: .75rem !important;
  }

  .sn-passage-hint,
  .sn-feedback {
    margin-block: 0 !important;
    min-height: 0 !important;
  }

  /* Compact the right column so its main actions also fit. */
  .sn-practice-card-v3 {
    top: 8px !important;
    padding: 14px 14px 12px !important;
  }

  .sn-practice-heading {
    margin-bottom: 2px !important;
  }

  .sn-practice-heading > span {
    font-size: 1.5rem !important;
  }

  .sn-practice-heading h2 {
    font-size: 1.35rem !important;
  }

  .sn-practice-heading p {
    font-size: .82rem !important;
  }

  .sn-mic-zone {
    margin: 9px 0 3px !important;
  }

  .sn-mic-button {
    width: 84px !important;
    height: 84px !important;
    border-width: 8px !important;
    font-size: 2rem !important;
  }

  .sn-mic-label {
    margin-bottom: 9px !important;
    font-size: .82rem !important;
  }

  .sn-done-button-v3 {
    min-height: 44px !important;
    font-size: .95rem !important;
  }

  .sn-action-row-v3 {
    margin-top: 9px !important;
    gap: 7px !important;
  }

  .sn-action-row-v3 button {
    min-height: 42px !important;
    font-size: .82rem !important;
  }

  .sn-tips-card {
    margin-top: 10px !important;
    padding: 9px 11px !important;
  }

  .sn-tips-card h3 {
    margin-bottom: 5px !important;
    font-size: .94rem !important;
  }

  .sn-tips-card p {
    margin: 4px 0 !important;
    font-size: .72rem !important;
  }

  .sn-favorite-action-v3 {
    padding-top: 6px !important;
    font-size: .78rem !important;
  }

  .sn-bottom-cheer {
    margin-top: 9px !important;
    padding: 7px 16px !important;
    font-size: .78rem !important;
  }
}

/* Extra compression for typical 1366x768 and similar laptop screens. */
@media (min-width: 821px) and (max-height: 850px) {
  .sn-subtitle { display: none !important; }

  .sn-controls.sn-fun-buttons .sn-icon-button {
    width: 47px !important;
    height: 47px !important;
    min-width: 47px !important;
  }

  .sn-stats {
    margin: 6px 0 7px !important;
  }

  .sn-star-goal,
  .sn-bookshelf-bar,
  .sn-stat {
    min-height: 48px !important;
  }

  .sn-scene-stage-v3 {
    height: clamp(190px, 27vh, 230px) !important;
    min-height: 190px !important;
  }

  .sn-story-card-v3 .sn-line-btn {
    min-height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .sn-bottom-cheer {
    display: none !important;
  }
}

/* Very short desktop windows still show the full passage; the hero contracts first. */
@media (min-width: 821px) and (max-height: 700px) {
  .sn-eyebrow { display: none !important; }
  .sn-topbar h1 { font-size: 1.65rem !important; }
  .sn-stats { margin-top: 4px !important; }
  .sn-scene-stage-v3 {
    height: 170px !important;
    min-height: 170px !important;
  }
  .sn-tips-card { display: none !important; }
  .sn-practice-card-v3 { padding-block: 10px !important; }
}


/* =========================================================
   Story Nest v8 — working Line Mode and equal-height columns
   ========================================================= */

#lineModeButton {
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#lineModeButton.is-active {
  color: #075985 !important;
  background: linear-gradient(180deg, #e0f2fe, #bae6fd) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .16),
    0 7px 16px rgba(2, 132, 199, .14) !important;
}

#lineModeButton.is-active:active {
  transform: translateY(1px);
}

.sn-passage.line-mode-active .sn-line-btn {
  cursor: pointer !important;
  border: 2px solid rgba(2, 132, 199, .12) !important;
  border-radius: 13px !important;
  transition: background-color .16s ease, border-color .16s ease,
    box-shadow .16s ease, transform .16s ease;
}

.sn-passage.line-mode-active .sn-line-btn:hover,
.sn-passage.line-mode-active .sn-line-btn:focus-visible {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .15) !important;
  outline: none !important;
  transform: translateY(-1px);
}

.sn-passage.line-mode-active .sn-line-btn.active,
.sn-passage.line-mode-active .sn-line-btn.reading-line {
  background: #dbeafe !important;
  border-color: #0284c7 !important;
  box-shadow: inset 4px 0 0 #0284c7 !important;
}

.sn-passage.line-mode-active .sn-word {
  pointer-events: none;
}

@media (min-width: 821px) {
  .pp-play-layout.sn-play-layout-v3,
  .sn-play-layout-v3 {
    align-items: stretch !important;
  }

  .sn-story-card-v3,
  .sn-practice-card-v3 {
    height: 100% !important;
    min-height: 100% !important;
  }

  .sn-story-card-v3 {
    display: flex !important;
    flex-direction: column !important;
  }

  .sn-story-card-v3 .sn-passage-shell-v3 {
    flex: 1 0 auto !important;
  }

  .sn-practice-card-v3 {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .sn-practice-card-v3 .sn-tips-card {
    flex: 1 1 auto !important;
  }

  .sn-practice-card-v3 .sn-favorite-action-v3 {
    margin-top: auto !important;
  }
}

@media (max-width: 820px) {
  .sn-story-card-v3,
  .sn-practice-card-v3 {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   Story Nest v9 — iPad/tablet portrait layout
   iPad Pro portrait widths (834px/1024px) must not inherit the
   compressed desktop side-by-side layout.
   ========================================================= */

@media (orientation: portrait) and (min-width: 700px) and (max-width: 1100px) {
  .sn-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: clamp(16px, 3vw, 28px) !important;
  }

  .sn-topbar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .sn-controls.sn-fun-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .sn-controls.sn-fun-buttons .sn-icon-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
  }

  .sn-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sn-star-goal,
  .sn-bookshelf-bar {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
  }

  .pp-play-layout.sn-play-layout-v3,
  .sn-play-layout-v3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    height: auto !important;
  }

  .sn-story-card-v3,
  .sn-practice-card-v3 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .sn-story-card-v3 {
    display: block !important;
  }

  .sn-scene-stage-v3 {
    height: clamp(300px, 43vw, 430px) !important;
    min-height: 300px !important;
  }

  .sn-story-card-v3 .sn-passage-shell-v3 {
    padding: 10px 18px 16px !important;
  }

  .sn-story-card-v3 .sn-line-btn {
    min-height: 48px !important;
    padding: 8px 12px 8px 52px !important;
    font-size: clamp(1rem, 2.2vw, 1.2rem) !important;
    line-height: 1.35 !important;
  }

  .sn-story-card-v3 .sn-line-btn::before {
    width: 30px !important;
    height: 30px !important;
    left: 9px !important;
    font-size: .88rem !important;
  }

  .sn-practice-card-v3 {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(210px, .78fr) minmax(0, 1.22fr) !important;
    grid-template-areas:
      "heading heading"
      "microphone actions"
      "tips tips"
      "favorite favorite" !important;
    column-gap: 20px !important;
    row-gap: 12px !important;
    padding: 18px !important;
  }

  .sn-practice-card-v3 > .sn-practice-heading {
    grid-area: heading !important;
    margin: 0 !important;
  }

  .sn-practice-card-v3 .sn-practice-notices {
    grid-area: heading !important;
    align-self: end !important;
    justify-self: end !important;
    max-width: 48% !important;
    margin: 0 !important;
  }

  .sn-mic-zone {
    grid-area: microphone !important;
    margin: 4px 0 0 !important;
    align-self: center !important;
  }

  .sn-mic-label {
    grid-area: microphone !important;
    align-self: end !important;
    margin: 0 0 4px !important;
    padding-top: 126px !important;
  }

  .sn-done-button-v3 {
    grid-area: actions !important;
    align-self: start !important;
    margin-top: 8px !important;
  }

  .sn-action-row-v3 {
    grid-area: actions !important;
    align-self: end !important;
    margin-top: 74px !important;
  }

  .sn-tips-card {
    grid-area: tips !important;
    margin-top: 0 !important;
  }

  .sn-practice-card-v3 .sn-favorite-action-v3 {
    grid-area: favorite !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .sn-bottom-cheer {
    width: min(92%, 760px) !important;
  }
}

/* Standard 9.7/10.2-inch iPads are 768px wide in portrait. */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 820px) {
  .sn-controls.sn-fun-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .sn-practice-card-v3 {
    grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr) !important;
  }

  .sn-scene-stage-v3 {
    height: clamp(280px, 46vw, 370px) !important;
    min-height: 280px !important;
  }
}

/* Narrow portrait tablets use a simple vertical Practice layout. */
@media (orientation: portrait) and (max-width: 740px) {
  .sn-practice-card-v3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .sn-practice-card-v3 .sn-practice-notices {
    max-width: none !important;
    align-self: stretch !important;
  }

  .sn-mic-label {
    padding-top: 0 !important;
  }

  .sn-action-row-v3 {
    margin-top: 10px !important;
  }
}

/* v11 — interactive reading-session timer */
.sn-mic-zone {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
}

.sn-mic-zone:focus-visible {
  outline: 4px solid rgba(2, 132, 199, 0.3);
  outline-offset: 5px;
}

.sn-mic-zone .sn-mic-button {
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.sn-mic-zone:hover .sn-mic-button,
.sn-mic-zone:focus-visible .sn-mic-button {
  transform: translateY(-2px) scale(1.025);
  filter: saturate(1.08);
}

.sn-mic-zone.is-reading .sn-mic-button {
  box-shadow:
    0 0 0 10px rgba(56, 189, 248, 0.16),
    0 0 0 20px rgba(56, 189, 248, 0.08),
    0 10px 24px rgba(0, 119, 222, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  animation: snReadingPulse 1.35s ease-in-out infinite;
}

.sn-mic-zone.is-reading .sn-wave {
  animation: snReadingWave 0.9s ease-in-out infinite alternate;
}

.sn-mic-zone.is-reading .sn-wave-right {
  animation-delay: -0.45s;
}

.sn-reading-timer {
  margin: -14px 0 16px;
  text-align: center;
  color: #1672d2;
  font-family: var(--sn-font-display);
  font-size: 1.08rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

@keyframes snReadingPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes snReadingWave {
  from { opacity: 0.42; transform: scaleY(0.72); }
  to { opacity: 1; transform: scaleY(1.14); }
}

@media (max-height: 820px) and (min-width: 821px) {
  .sn-reading-timer {
    margin: -6px 0 8px;
    font-size: .92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-mic-zone.is-reading .sn-mic-button,
  .sn-mic-zone.is-reading .sn-wave {
    animation: none;
  }
}


/* v17 — exact 16:9 story banner; no crop for 16:9 assets */
.sn-scene-stage.sn-scene-stage-v3 {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

.sn-scene-stage.sn-scene-stage-v3 .sn-story-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

.sn-scene-stage.sn-scene-stage-v3.has-story-image.story-image-ready .sn-story-image {
  transform: none !important;
}

/* Keep the 16:9 banner at every responsive breakpoint. */
@media (max-width: 1180px), (max-height: 820px), (orientation: portrait) {
  .sn-scene-stage.sn-scene-stage-v3 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}


/* v21: banner Read to Me control */
.sn-hero-sound {
  top: 17px !important;
  right: 17px !important;
  bottom: auto !important;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.sn-hero-sound:hover {
  transform: translateY(-1px) scale(1.04);
  background: rgba(4,37,58,.76);
}
.sn-hero-sound:focus-visible {
  outline: 4px solid rgba(255,229,122,.95);
  outline-offset: 3px;
}
.sn-action-row-v3 {
  grid-template-columns: 1fr;
}
@media (max-width: 720px) {
  .sn-hero-sound {
    top: 12px !important;
    right: 12px !important;
  }
}

/* =========================================================
   Story Nest v22 — restore panoramic banner height
   Full-width artwork at 60% of the former 16:9 height.
   Matching artwork size: 1600 × 540 (80:27).
   ========================================================= */
.sn-story-card-v3 .sn-scene-banner-v3,
.sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 80 / 27 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

.sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 .sn-story-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* Keep the speaker in the top-right corner of the panoramic banner. */
.sn-story-card-v3 .sn-hero-sound {
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;
}

/* The title is displayed in the banner only. */
.sn-passage .sn-story-title {
  display: none !important;
}

/* Grade 3+ stories use three book-like pages of six sentences each. */
.sn-story-page-navigation {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px 4px;
  border-top: 2px dashed rgba(2, 132, 199, .2);
}

.sn-story-page-navigation.hidden {
  display: none !important;
}

.sn-story-page-button {
  min-height: 44px;
  padding: 9px 16px;
  border: 2px solid #7dd3fc;
  border-radius: 999px;
  color: #075985;
  background: #f0f9ff;
  font: 800 .9rem/1.1 var(--sn-font-body);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.sn-story-page-button:first-child { justify-self: start; }
.sn-story-page-button:last-child { justify-self: end; }
.sn-story-page-button-next { color: #fff; background: #0284c7; border-color: #0284c7; }
.sn-story-page-button:hover:not(:disabled),
.sn-story-page-button:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(2, 132, 199, .2); }
.sn-story-page-button:focus-visible { outline: 3px solid rgba(250, 204, 21, .65); outline-offset: 2px; }
.sn-story-page-button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

.sn-story-page-status {
  color: #475569;
  font: 900 .84rem/1 var(--sn-font-display);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .sn-story-page-navigation { grid-template-columns: 1fr auto 1fr; gap: 6px; padding-inline: 6px; }
  .sn-story-page-button { min-width: 0; padding-inline: 10px; font-size: .8rem; }
  .sn-story-page-status { font-size: .74rem; }
}

/* Story comprehension check */
.sn-comprehension-window {
  width: min(620px, calc(100vw - 28px));
  text-align: left;
}

.sn-comprehension-progress {
  margin-bottom: 6px;
  color: var(--sn-accent-dark);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sn-comprehension-window h2 {
  margin-bottom: 7px;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.3;
}

.sn-comprehension-word-hint {
  margin: 0 0 12px;
  color: var(--sn-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.sn-comprehension-spoken-word {
  display: inline;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(2, 132, 199, 0.24);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.sn-comprehension-spoken-word:hover,
.sn-comprehension-spoken-word:focus-visible {
  background: #fff4bd;
  color: #5b3c00;
  outline: 2px solid rgba(245, 158, 11, 0.4);
  outline-offset: 1px;
}

.sn-comprehension-spoken-word.is-speaking {
  background: #fde68a;
  color: #4b3200;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
  text-decoration-color: transparent;
}

.sn-comprehension-choices {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.sn-comprehension-choice {
  position: relative;
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border: 2px solid var(--sn-border);
  border-radius: 16px;
  background: #fff;
  color: var(--sn-text);
  text-align: left;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: 0 5px 14px rgba(2, 132, 199, 0.08);
  overflow: hidden;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.sn-comprehension-choice:hover,
.sn-comprehension-choice:has(.sn-comprehension-choice-select:focus-visible) {
  border-color: var(--sn-accent);
  background: var(--sn-accent-soft);
  box-shadow: 0 7px 18px rgba(2, 132, 199, 0.13);
}

.sn-comprehension-choice-select {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.sn-comprehension-choice-select:focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.28);
  outline-offset: -4px;
}

.sn-comprehension-choice-select:disabled {
  cursor: default;
}

.sn-comprehension-choice-text {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.sn-comprehension-choice-text .sn-comprehension-spoken-word {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.sn-comprehension-choice.is-wrong {
  border-color: #fda4af;
  background: #fff1f2;
  color: var(--sn-wrong);
}

.sn-comprehension-choice.is-correct {
  border-color: #86efac;
  background: var(--sn-correct-bg);
  color: var(--sn-correct);
}

.sn-comprehension-feedback {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: var(--sn-muted);
  font-weight: 800;
}

.sn-comprehension-feedback.is-hint { color: #9a3412; }
.sn-comprehension-feedback.is-correct { color: var(--sn-correct); }

.sn-comprehension-support {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 14px 0 2px;
  padding: 13px 14px;
  border: 2px solid #93c5fd;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  color: #164e63;
  box-shadow: 0 6px 18px rgba(14, 116, 144, 0.1);
}

.sn-comprehension-support.hidden { display: none; }

.sn-comprehension-support.is-guided {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #f5f3ff, #fff7ed);
}

.sn-comprehension-support-title {
  grid-column: 1 / -1;
  margin: 0;
  color: #0369a1;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.sn-comprehension-evidence {
  align-self: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.45;
}

.sn-comprehension-explanation {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(109, 40, 217, 0.18);
  color: #6d28d9;
  font-weight: 850;
}

.sn-comprehension-explanation.hidden { display: none; }

.sn-comprehension-evidence-audio {
  align-self: center;
  min-height: 40px;
  padding: 8px 11px;
  border: 2px solid #7dd3fc;
  border-radius: 12px;
  background: #fff;
  color: #075985;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.sn-comprehension-evidence-audio:hover,
.sn-comprehension-evidence-audio:focus-visible,
.sn-comprehension-evidence-audio.is-speaking {
  border-color: #0284c7;
  background: #e0f2fe;
  outline: none;
}

.sn-comprehension-choice.is-eliminated {
  border-style: dashed;
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #64748b;
  box-shadow: none;
  opacity: 0.78;
}

.sn-comprehension-choice.is-eliminated .sn-comprehension-choice-text {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.sn-comprehension-choice-removed {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 4px;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .sn-comprehension-window { padding: 20px 16px; }
  .sn-comprehension-choice { min-height: 64px; }
  .sn-comprehension-support { grid-template-columns: 1fr; }
  .sn-comprehension-evidence-audio { justify-self: start; }
}

/* Story banner narration: play, pause, and resume state. */
.sn-hero-sound.is-narrating {
  background: rgba(2, 132, 199, 0.94);
  border-color: #ffffff;
  box-shadow:
    0 0 0 5px rgba(125, 211, 252, 0.34),
    0 0 24px 8px rgba(56, 189, 248, 0.72),
    0 8px 20px rgba(0, 0, 0, 0.24);
  animation: snNarrationGlow 1.15s ease-in-out infinite;
}

.sn-hero-sound.is-paused {
  background: rgba(4, 37, 58, 0.72);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

@keyframes snNarrationGlow {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-hero-sound.is-narrating {
    animation: none;
  }
}

/* Story-specific word helper */
.sn-word-helper-button {
  width: min(25rem, 100%);
  min-height: 4.5rem;
  margin: 1.25rem auto 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 2px solid #7dd3fc;
  border-radius: 1.4rem;
  background: linear-gradient(180deg, #f0f9ff, #e0f2fe);
  color: #075985;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.14);
  font-family: var(--sn-font-display);
  font-size: 1.05rem;
  font-weight: 900;
}
.sn-word-helper-button:hover,
.sn-word-helper-button:focus-visible { transform: translateY(-1px); border-color: #0284c7; }
.sn-word-helper-icon { font-size: 1.65rem; }
.sn-word-helper-caption { margin: 0 0 1rem; text-align: center; color: var(--sn-muted); font-size: 0.82rem; font-weight: 700; }
.sn-word-helper-modal {
  width: min(34rem, 100%);
  max-height: min(42rem, calc(100dvh - 2rem));
  overflow-y: auto;
  padding: 1.6rem 1.25rem 1.35rem;
  border-color: #7dd3fc;
  background:
    radial-gradient(circle at 12% 10%, rgba(186, 230, 253, 0.65), transparent 7rem),
    radial-gradient(circle at 90% 8%, rgba(153, 246, 228, 0.42), transparent 7rem),
    linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  text-align: left;
}

.sn-word-helper-modal .sn-eyebrow {
  margin: 0 3rem 0.25rem 0;
}

.sn-word-helper-modal h2 {
  margin: 0 3rem 0.45rem 0;
  color: var(--sn-accent-dark);
  font-size: clamp(1.55rem, 6vw, 2rem);
}

.sn-word-helper-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #bae6fd;
  border-radius: 999px;
  background: #ffffff;
  color: #075985;
  box-shadow: 0 5px 14px rgba(12, 74, 110, 0.16);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.sn-word-helper-close:hover,
.sn-word-helper-close:focus-visible {
  transform: scale(1.06);
  border-color: #0284c7;
  background: #e0f2fe;
  outline: 3px solid rgba(56, 189, 248, 0.28);
  outline-offset: 2px;
}

.sn-word-helper-list { display: grid; gap: 0.75rem; margin-top: 1rem; }
.sn-word-card { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem; border: 2px solid var(--sn-border); border-radius: 1.1rem; background: #f8fdff; }
.sn-word-card h3 { margin: 0 0 0.2rem; color: var(--sn-accent-dark); font-family: var(--sn-font-display); font-size: 1.18rem; }
.sn-word-card p { margin: 0; color: var(--sn-text); line-height: 1.4; }
.sn-word-card-speak { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border: 2px solid #bae6fd; border-radius: 0.9rem; background: #fff; font-size: 1.2rem; }


@media (max-width: 520px) {
  .sn-word-helper-modal {
    max-height: calc(100dvh - 1.25rem);
    padding: 1.35rem 1rem 1.1rem;
    border-radius: 1.35rem;
  }

  .sn-word-card {
    gap: 0.7rem;
    padding: 0.8rem;
  }
}

/* Word Helper decoding and blending */
.sn-word-card {
  display: block;
}

.sn-word-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sn-word-card-header h3 {
  margin: 0;
  font-size: clamp(1.25rem, 5vw, 1.55rem);
}

.sn-word-parts-label {
  margin: 0.55rem 0 0.35rem !important;
  color: var(--sn-muted) !important;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sn-word-parts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.sn-word-part {
  min-height: 2.5rem;
  padding: 0.4rem 0.72rem;
  border: 2px solid #7dd3fc;
  border-radius: 0.8rem;
  background: #fff;
  color: #075985;
  font-family: var(--sn-font-display);
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.1);
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.sn-word-part:hover,
.sn-word-part:focus-visible,
.sn-word-part.is-speaking {
  transform: translateY(-1px) scale(1.04);
  background: #fef9c3;
  border-color: #facc15;
  color: #713f12;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.22);
  outline: none;
}

.sn-word-part-dot {
  color: #38bdf8;
  font-size: 1.25rem;
  font-weight: 900;
}

.sn-word-blend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0 0 !important;
  padding: 0.48rem 0.65rem;
  border-radius: 0.75rem;
  background: #e0f2fe;
  color: #075985 !important;
  font-family: var(--sn-font-display);
  font-weight: 800;
}

.sn-word-blend strong {
  color: #0284c7;
  font-size: 1.15rem;
}

.sn-word-blend b {
  color: #0c4a6e;
  font-size: 1.08rem;
}

.sn-word-card.is-blending .sn-word-blend {
  background: #dcfce7;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.sn-word-meaning {
  margin: 0.65rem 0 0 !important;
  line-height: 1.42;
}

.sn-word-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.sn-word-sound-out,
.sn-word-find {
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 2px solid #bae6fd;
  border-radius: 0.85rem;
  background: #fff;
  color: #075985;
  font-family: var(--sn-font-display);
  font-weight: 900;
}

.sn-word-sound-out {
  background: linear-gradient(180deg, #e0f2fe, #fff);
}

.sn-word-find {
  background: linear-gradient(180deg, #ecfccb, #fff);
  border-color: #bef264;
  color: #3f6212;
}

.sn-word-sound-out:hover,
.sn-word-sound-out:focus-visible,
.sn-word-find:hover,
.sn-word-find:focus-visible {
  transform: translateY(-1px);
  outline: 3px solid rgba(56, 189, 248, 0.22);
  outline-offset: 2px;
}

.sn-word-sound-out:disabled {
  opacity: 0.7;
  cursor: wait;
}

.sn-word.word-helper-found {
  background: #fef08a;
  color: #713f12;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.35);
  animation: snWordHelperFound 0.8s ease-in-out 3;
}

@keyframes snWordHelperFound {
  50% { transform: scale(1.08); }
}

@media (max-width: 420px) {
  .sn-word-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-word.word-helper-found {
    animation: none;
  }
}

/* Story Nest hero picker — Phase 1 */
.sn-nest-hero {
  width: clamp(58px, 8vw, 78px);
  height: clamp(66px, 9vw, 88px);
  display: grid;
  place-items: end center;
  overflow: visible;
}
.sn-hero-art-banner { width: 100%; height: 100%; display: block; }
.sn-hero-picker-window { width: min(720px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); overflow: auto; }
.sn-hero-picker-intro { margin: 0 36px 18px 0; color: var(--sn-muted); font-weight: 800; }
.sn-hero-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sn-hero-choice {
  position: relative;
  min-width: 0;
  padding: 10px 8px 12px;
  border: 2px solid var(--sn-border);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #f0f9ff);
  color: var(--sn-text);
  box-shadow: 0 7px 18px rgba(2, 132, 199, .1);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sn-hero-choice:hover,
.sn-hero-choice:focus-visible { transform: translateY(-3px); border-color: var(--sn-accent); box-shadow: 0 11px 24px rgba(2, 132, 199, .17); }
.sn-hero-choice:focus-visible { outline: 3px solid rgba(56, 189, 248, .42); outline-offset: 2px; }
.sn-hero-choice.is-selected { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4, #dcfce7); }
.sn-hero-choice-art { display: grid; place-items: center; height: 150px; }
.sn-hero-art { width: 100%; height: 100%; display: block; }
.sn-hero-art-image { object-fit: contain; object-position: center bottom; }
.sn-hero-stack { position: relative; display: block; overflow: visible; }
.sn-hero-base-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.sn-nest-hero .sn-hero-art-image { filter: drop-shadow(0 6px 10px rgba(15, 55, 91, .18)); }
.sn-hero-choice-art .sn-hero-art-image { max-width: 100%; max-height: 100%; }
.sn-hero-choice strong { display: block; margin-top: 3px; font: 900 1.05rem/1.15 var(--sn-font-display); }
.sn-hero-choice small { display: block; margin-top: 3px; color: var(--sn-muted); font-size: .76rem; font-weight: 800; }
.sn-hero-choice-check {
  position: absolute; right: 8px; top: 8px; width: 25px; height: 25px; display: none; place-items: center;
  border-radius: 999px; background: #16a34a; color: #fff; font-weight: 900; box-shadow: 0 3px 8px rgba(22, 163, 74, .25);
}
.sn-hero-choice.is-selected .sn-hero-choice-check { display: grid; }
.sn-change-hero-button {
  width: 100%; margin-top: 14px; padding: 11px 14px; border: 2px solid #93c5fd; border-radius: 14px;
  background: linear-gradient(180deg, #eff6ff, #dbeafe); color: #1e3a8a; font-weight: 900;
}
.sn-change-hero-button:hover, .sn-change-hero-button:focus-visible { border-color: #2563eb; }
@media (max-width: 640px) {
  .sn-hero-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-hero-choice-art { height: 132px; }
}
@media (max-width: 360px) {
  .sn-hero-choice-grid { gap: 8px; }
  .sn-hero-choice-art { height: 116px; }
}


/* Reading Buddy wardrobe rewards — Phase 2A */
.sn-nest-hero { position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; overflow: visible; }
.sn-nest-hero:hover { transform: translateY(-2px); }
.sn-nest-hero:focus-visible { outline: 3px solid #38bdf8; outline-offset: 4px; border-radius: 18px; }
.sn-hero-wardrobe-icon { position: absolute; z-index: 5; left: -10px; bottom: -2px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 999px; background: #fff; border: 2px solid #fbbf24; box-shadow: 0 4px 9px rgba(15,55,91,.2); font-size: .9rem; }
.sn-hero-wardrobe-count { position: absolute; z-index: 6; right: -11px; bottom: -3px; min-width: 23px; height: 23px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #0284c7; color: white; border: 2px solid white; box-shadow: 0 3px 8px rgba(2,132,199,.3); font: 900 .68rem/1 var(--sn-font-display); }
.sn-hero-wardrobe-count.hidden { display: none; }
.sn-hero-wardrobe-toast { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 10px); width: min(290px, 78vw); display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 16px; background: #fff; border: 2px solid #facc15; color: #713f12; box-shadow: 0 10px 24px rgba(15,55,91,.2); font-size: .78rem; line-height: 1.25; }
.sn-hero-wardrobe-toast > span { font-size: 1.45rem; }
.sn-hero-wardrobe-toast.hidden { display: none; }

.sn-hero-wardrobe-window { width: min(720px, calc(100vw - 28px)); max-height: min(780px, calc(100dvh - 28px)); overflow: auto; }
.sn-hero-wardrobe-header { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; margin: 4px 0 18px; padding: 12px; border-radius: 20px; background: linear-gradient(145deg,#eff6ff,#fefce8); border: 2px solid #bae6fd; }
.sn-hero-wardrobe-buddy-art { height: 165px; display: grid; place-items: center; overflow: visible; }
.sn-hero-wardrobe-buddy-image { width: 100%; height: 100%; }
.sn-hero-wardrobe-summary { margin: 0 0 5px; color: #075985; font: 900 1.08rem/1.2 var(--sn-font-display); }
.sn-hero-wardrobe-copy { margin: 0; color: var(--sn-muted); font-size: .84rem; font-weight: 750; line-height: 1.4; }
.sn-wardrobe-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.sn-wardrobe-item { min-height: 124px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 9px 6px; text-align: center; border-radius: 17px; border: 2px solid #bae6fd; background: linear-gradient(180deg,#fff,#f0f9ff); color: #075985; transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.sn-wardrobe-item.is-owned:hover,.sn-wardrobe-item.is-owned:focus-visible { transform: translateY(-2px); border-color: #0284c7; box-shadow: 0 8px 18px rgba(2,132,199,.14); }
.sn-wardrobe-item.is-equipped { border-color: #16a34a; background: linear-gradient(180deg,#f0fdf4,#dcfce7); box-shadow: inset 0 0 0 1px rgba(22,163,74,.12); }
.sn-wardrobe-item.is-locked { border-style: dashed; background: #f8fafc; opacity: .62; cursor: not-allowed; }
.sn-wardrobe-preview { width: 90px; height: 58px; display: grid; place-items: center; font-size: 1.6rem; }
.sn-wardrobe-default-option { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 999px; border: 3px dashed #94a3b8; color: #16a34a; font-size: 1.5rem; }
.sn-wardrobe-item strong { font: 900 .78rem/1.12 var(--sn-font-display); }
.sn-wardrobe-item small { color: #64748b; font-size: .68rem; font-weight: 850; }
.sn-wardrobe-item.is-equipped small { color: #15803d; }
@media (max-width: 620px) { .sn-wardrobe-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .sn-hero-wardrobe-header{grid-template-columns:110px 1fr}.sn-hero-wardrobe-buddy-art{height:130px} }
@media (max-width: 390px) { .sn-wardrobe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sn-hero-wardrobe-header{grid-template-columns:1fr;text-align:center}.sn-hero-wardrobe-buddy-art{height:120px} }


/* Wardrobe correction: make clothing the visible story-completion reward. */
#celebrationOverlay .sn-window { border-color: #f59e0b; background: linear-gradient(180deg,#fffdf4,#fff7ed); }
#celebrationOverlay #celebrationTitle { color: #9a3412; }
#celebrationOverlay #celebrationMessage { color: #7c2d12; font-size: 1.08rem; }
#celebrationOverlay .sn-window { overflow: hidden; }
#celebrationOverlay .sn-window > * { position: relative; z-index: 1; }
#celebrationOverlay .sn-window { overflow: hidden; }
#celebrationOverlay .sn-window > * { position: relative; z-index: 1; }
#celebrationOverlay .sn-celebration-fireworks {
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
#celebrationOverlay.is-fireworks .sn-celebration-fireworks { opacity: 1; }
#celebrationOverlay .sn-celebration-fireworks .firework {
  width: 18px;
  height: 18px;
  animation: fireworkBurst 1.25s ease-out 3 both;
  filter: saturate(1.08) brightness(1.04);
}
#celebrationOverlay:not(.is-fireworks) .sn-celebration-fireworks .firework { animation: none !important; opacity: 0 !important; }
#celebrationOverlay .sn-celebration-fireworks .firework::before,
#celebrationOverlay .sn-celebration-fireworks .firework::after { inset: -28px; }
#celebrationOverlay .sn-celebration-fireworks .firework-1  { left: 7%;  top: 12%; animation-delay: .00s; }
#celebrationOverlay .sn-celebration-fireworks .firework-2  { left: 18%; top: 7%;  animation-delay: .08s; }
#celebrationOverlay .sn-celebration-fireworks .firework-3  { left: 31%; top: 11%; animation-delay: .16s; }
#celebrationOverlay .sn-celebration-fireworks .firework-4  { left: 47%; top: 6%;  animation-delay: .24s; }
#celebrationOverlay .sn-celebration-fireworks .firework-5  { left: 63%; top: 10%; animation-delay: .32s; }
#celebrationOverlay .sn-celebration-fireworks .firework-6  { left: 79%; top: 8%;  animation-delay: .40s; }
#celebrationOverlay .sn-celebration-fireworks .firework-7  { left: 89%; top: 16%; animation-delay: .48s; }
#celebrationOverlay .sn-celebration-fireworks .firework-8  { left: 12%; top: 34%; animation-delay: .20s; }
#celebrationOverlay .sn-celebration-fireworks .firework-9  { left: 28%; top: 40%; animation-delay: .52s; }
#celebrationOverlay .sn-celebration-fireworks .firework-10 { left: 69%; top: 38%; animation-delay: .60s; }
#celebrationOverlay .sn-celebration-fireworks .firework-11 { left: 84%; top: 42%; animation-delay: .68s; }
#celebrationOverlay .sn-celebration-fireworks .firework-12 { left: 50%; top: 28%; animation-delay: .76s; }
html[data-sn-theme="dark"] #celebrationOverlay .sn-window {
  border-color: #fbbf24;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg, #3a2a1f, #241913);
}
html[data-sn-theme="dark"] #celebrationOverlay #celebrationTitle { color: #fde68a; }
html[data-sn-theme="dark"] #celebrationOverlay #celebrationMessage { color: #ffedd5; }
html[data-sn-theme="dark"] #celebrationOverlay #celebrationSubtext { color: #fed7aa; }

/* Reading-first completion celebration. Ordinary stories get a warm glow;
   fireworks are reserved for five-story milestones and completed grades. */
#celebrationOverlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(253, 224, 71, .24), transparent 32%),
    rgba(57, 31, 96, .52);
}

#celebrationOverlay .sn-celebration-window {
  width: min(570px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 22px 22px;
  border: 4px solid #f6c453;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% -8%, rgba(254, 240, 138, .75), transparent 34%),
    linear-gradient(180deg, #fffdf4 0%, #fffaf0 56%, #f0fdf4 100%);
  box-shadow: 0 28px 80px rgba(57, 31, 96, .34), 0 0 0 7px rgba(255,255,255,.22);
  animation: snCelebrationWindowIn .48s cubic-bezier(.2,.9,.22,1.12) both;
}

.sn-celebration-eyebrow {
  margin: 0 0 2px !important;
  color: #a16207 !important;
  font-size: .75rem;
  font-weight: 950 !important;
  letter-spacing: .11em;
  text-transform: uppercase;
  animation: snCelebrationRise .38s .08s ease-out both;
}

.sn-celebration-hero-stage {
  position: relative;
  width: min(176px, 46vw);
  min-height: 142px;
  margin: 0 auto 2px;
  display: grid;
  place-items: end center;
  isolation: isolate;
}

.sn-celebration-hero-stage .sn-celebrate-char {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 132px;
  margin: 0;
}

.sn-celebration-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 5px;
  width: 126px;
  height: 126px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 34%, rgba(253,224,71,.58) 35% 53%, transparent 55%),
    conic-gradient(from 0deg, #facc15, transparent 8%, #67e8f9 16%, transparent 24%, #fb7185 34%, transparent 42%, #86efac 52%, transparent 60%, #c4b5fd 70%, transparent 78%, #facc15 88%, transparent 96%);
  transform: translateX(-50%) scale(.65) rotate(-18deg);
  opacity: 0;
  filter: blur(.2px);
  animation: snCelebrationHalo 1.05s .12s cubic-bezier(.2,.85,.22,1) forwards;
}

.sn-celebration-spark {
  position: absolute;
  z-index: 4;
  color: #f59e0b;
  font-size: 1.2rem;
  opacity: 0;
  text-shadow: 0 2px 8px rgba(245,158,11,.3);
  animation: snCelebrationSpark .7s cubic-bezier(.2,.9,.25,1.2) forwards;
}
.sn-celebration-spark-1 { left: 3px; top: 24px; animation-delay: .28s; }
.sn-celebration-spark-2 { right: 2px; top: 36px; color: #0ea5e9; animation-delay: .38s; }
.sn-celebration-spark-3 { left: 12px; bottom: 13px; color: #ec4899; animation-delay: .48s; }
.sn-celebration-spark-4 { right: 9px; bottom: 9px; color: #16a34a; animation-delay: .58s; }

#celebrationOverlay #celebrationTitle {
  margin-bottom: 4px;
  font-size: clamp(1.65rem, 5.4vw, 2.2rem);
  line-height: 1.08;
  animation: snCelebrationRise .42s .14s ease-out both;
}

#celebrationOverlay #celebrationMessage {
  margin: 0 auto 12px;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.4;
  animation: snCelebrationRise .42s .2s ease-out both;
}

.sn-celebration-results {
  display: grid;
  grid-template-columns: minmax(124px, .72fr) minmax(220px, 1.55fr);
  gap: 10px;
  margin: 4px 0 11px;
  text-align: left;
}

.sn-celebration-reward-card,
.sn-celebration-progress-card {
  min-width: 0;
  border: 2px solid rgba(234, 179, 8, .32);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 7px 18px rgba(120, 74, 12, .08);
}

.sn-celebration-reward-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 10px;
  animation: snCelebrationResultIn .45s .28s cubic-bezier(.2,.9,.22,1.1) both;
}

.sn-celebration-reward-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fef3c7;
  font-size: 1.55rem;
}

.sn-celebration-reward-card.is-earned .sn-celebration-reward-icon {
  animation: snCelebrationStar .72s .5s cubic-bezier(.2,.9,.2,1.22) both;
}

.sn-celebration-reward-copy { min-width: 0; display: grid; gap: 1px; }
.sn-celebration-reward-copy small { color: #78716c; font-size: .7rem; font-weight: 850; }
.sn-celebration-reward-copy strong { color: #92400e; font: 950 .98rem/1.15 var(--sn-font-display); overflow-wrap: anywhere; }

.sn-celebration-progress-card {
  padding: 10px 12px;
  animation: snCelebrationResultIn .45s .36s cubic-bezier(.2,.9,.22,1.1) both;
}

.sn-celebration-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #166534;
  font-size: .78rem;
  font-weight: 900;
}
.sn-celebration-progress-heading strong { white-space: nowrap; }

.sn-celebration-progress {
  --sn-celebration-progress: 0%;
  position: relative;
  height: 13px;
  margin-right: 8px;
  border: 2px solid #bbf7d0;
  border-radius: 999px;
  background: #ecfdf5;
  overflow: visible;
}

.sn-celebration-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #84cc16, #facc15);
  box-shadow: 0 0 12px rgba(34,197,94,.26);
}

.sn-celebration-progress-fill.is-growing {
  animation: snCelebrationProgressGrow .9s .5s cubic-bezier(.22,.8,.2,1) both;
}

.sn-celebration-progress-bloom {
  position: absolute;
  z-index: 2;
  left: clamp(0px, calc(var(--sn-celebration-progress) - 9px), calc(100% - 9px));
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: 1.12rem;
  filter: drop-shadow(0 2px 3px rgba(22,101,52,.2));
  animation: snCelebrationBloom .48s .98s cubic-bezier(.2,.9,.22,1.25) forwards;
}

.sn-celebration-milestone {
  margin: 7px 0 0 !important;
  color: #3f6212 !important;
  font-size: .72rem;
  line-height: 1.25;
}

#celebrationOverlay.is-milestone .sn-celebration-progress-card,
#celebrationOverlay.is-grade-complete .sn-celebration-progress-card {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250,204,21,.18), 0 9px 22px rgba(120,74,12,.13);
}

#celebrationOverlay.is-major-milestone .sn-celebration-window {
  border-color: #f59e0b;
  box-shadow: 0 28px 80px rgba(57,31,96,.34), 0 0 0 7px rgba(255,255,255,.22), 0 0 32px rgba(245,158,11,.34);
}

#celebrationOverlay.is-major-milestone .sn-celebration-progress-card {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(254,243,199,.9));
  box-shadow: 0 0 0 4px rgba(245,158,11,.2), 0 11px 26px rgba(120,74,12,.18);
}

#celebrationOverlay.is-major-milestone .sn-celebration-halo {
  width: 142px;
  height: 142px;
  background: radial-gradient(circle, rgba(253,224,71,.72) 0 30%, rgba(245,158,11,.28) 52%, transparent 72%);
}

#celebrationOverlay #celebrationSubtext {
  margin: 0 auto 10px;
  max-width: 50ch;
  font-size: .84rem;
  line-height: 1.35;
  animation: snCelebrationRise .38s .44s ease-out both;
}

#celebrationOverlay .sn-celebration-next {
  margin-top: 0;
  border-color: #16a34a;
  background: linear-gradient(180deg, #4ade80, #22c55e);
  color: #052e16;
  box-shadow: 0 9px 20px rgba(22,163,74,.22);
  animation: snCelebrationRise .4s .5s ease-out both;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

#celebrationOverlay .sn-celebration-next:hover,
#celebrationOverlay .sn-celebration-next:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(22,163,74,.3);
  filter: brightness(1.03);
}

#celebrationOverlay .sn-celebration-fireworks .firework {
  animation-iteration-count: 1;
}

@keyframes snCelebrationWindowIn {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes snCelebrationRise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes snCelebrationHalo {
  0% { opacity: 0; transform: translateX(-50%) scale(.58) rotate(-18deg); }
  62% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(8deg); }
  100% { opacity: .82; transform: translateX(-50%) scale(1) rotate(0deg); }
}
@keyframes snCelebrationSpark {
  0% { opacity: 0; transform: scale(.2) rotate(-28deg); }
  65% { opacity: 1; transform: scale(1.24) rotate(12deg); }
  100% { opacity: .9; transform: scale(1) rotate(0deg); }
}
@keyframes snCelebrationResultIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes snCelebrationStar {
  0% { transform: scale(.3) rotate(-35deg); }
  60% { transform: scale(1.25) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes snCelebrationProgressGrow {
  from { width: var(--sn-celebration-progress-from); }
  to { width: var(--sn-celebration-progress-to); }
}
@keyframes snCelebrationBloom {
  from { opacity: 0; transform: translateY(-50%) scale(.2) rotate(-25deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
}

@media (max-width: 520px) {
  #celebrationOverlay .sn-celebration-window {
    width: min(430px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 15px 14px 16px;
    border-radius: 24px;
  }
  .sn-celebration-hero-stage { width: 132px; min-height: 106px; }
  .sn-celebration-hero-stage .sn-celebrate-char { min-height: 100px; }
  .sn-celebration-hero-stage .sn-celebrate-hero-art { max-height: 110px; }
  .sn-celebration-halo { width: 96px; height: 96px; }
  .sn-celebration-results { grid-template-columns: 1fr; gap: 7px; }
  .sn-celebration-reward-card { justify-content: flex-start; padding: 8px 12px; }
  .sn-celebration-reward-icon { width: 36px; height: 36px; font-size: 1.25rem; }
  .sn-celebration-progress-card { padding: 9px 11px; }
  #celebrationOverlay #celebrationMessage { margin-bottom: 8px; }
  #celebrationOverlay #celebrationSubtext { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #celebrationOverlay .sn-celebration-window,
  #celebrationOverlay .sn-celebration-eyebrow,
  #celebrationOverlay #celebrationTitle,
  #celebrationOverlay #celebrationMessage,
  #celebrationOverlay #celebrationSubtext,
  #celebrationOverlay .sn-celebration-results > *,
  #celebrationOverlay .sn-celebration-next,
  #celebrationOverlay .sn-celebration-halo,
  #celebrationOverlay .sn-celebration-spark,
  #celebrationOverlay .sn-celebration-reward-icon,
  #celebrationOverlay .sn-celebration-progress-fill,
  #celebrationOverlay .sn-celebration-progress-bloom,
  #celebrationOverlay .sn-celebration-fireworks .firework {
    animation: none !important;
    transition: none !important;
  }
  #celebrationOverlay .sn-celebration-halo,
  #celebrationOverlay .sn-celebration-spark,
  #celebrationOverlay .sn-celebration-progress-bloom { opacity: 1; }
  #celebrationOverlay .sn-celebration-halo { transform: translateX(-50%) scale(1); }
  #celebrationOverlay .sn-celebration-progress-bloom { transform: translateY(-50%) scale(1); }
}

html[data-sn-theme="dark"] #celebrationOverlay .sn-celebration-window {
  background:
    radial-gradient(circle at 50% -8%, rgba(180,83,9,.3), transparent 34%),
    linear-gradient(180deg, #3a2a1f 0%, #241913 56%, #16352b 100%);
}
html[data-sn-theme="dark"] .sn-celebration-reward-card,
html[data-sn-theme="dark"] .sn-celebration-progress-card { border-color: #84632b; background: rgba(34,29,25,.86); }
html[data-sn-theme="dark"] .sn-celebration-reward-copy small { color: #d6d3d1; }
html[data-sn-theme="dark"] .sn-celebration-reward-copy strong { color: #fde68a; }
html[data-sn-theme="dark"] .sn-celebration-progress-heading { color: #bbf7d0; }
html[data-sn-theme="dark"] .sn-celebration-progress { border-color: #3f7553; background: #173a2a; }
html[data-sn-theme="dark"] .sn-celebration-milestone { color: #d9f99d !important; }
html[data-sn-theme="dark"] #celebrationOverlay .sn-celebration-next { color: #052e16; }

/* The original floating sticker/decor reward UI is retired. */
.sn-nest-decor,
.sn-hero-wardrobe-icon,
.sn-hero-wardrobe-count { display: none !important; }
.sn-stat-rewards strong { white-space: nowrap; }


/* Issy buddy closet v3 */
.sn-hero-item-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sn-hero-clothing-layer { z-index: 3; }
.sn-hero-pet-layer { z-index: 6; }
.sn-wardrobe-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sn-wardrobe-tab { border: 2px solid #bae6fd; border-radius: 999px; background: #eff6ff; color: #075985; padding: 8px 12px; font: 800 .78rem/1 var(--sn-font-display); }
.sn-wardrobe-tab span { color: #64748b; font-size: .72rem; margin-left: 4px; }
.sn-wardrobe-tab.is-active { background: linear-gradient(180deg,#fff7ed,#ffedd5); border-color: #fb923c; color: #9a3412; }
.sn-wardrobe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sn-wardrobe-preview { width: 92px; height: 64px; display: grid; place-items: center; }
.sn-wardrobe-item-art { display: block; width: 92px; height: 64px; overflow: visible; filter: drop-shadow(0 4px 4px rgba(15,55,91,.13)); }
.sn-wardrobe-pet-preview, .sn-wardrobe-clothing-preview { width: 92px; height: 64px; }
.sn-hero-wardrobe-window { width: min(760px, calc(100vw - 28px)); }
@media (max-width: 620px) { .sn-wardrobe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 390px) { .sn-wardrobe-tabs { justify-content: center; } .sn-wardrobe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Issy buddy closet complete build: image-based hero variants and reward items */
.sn-hero-stack { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.sn-hero-variant-image,
.sn-hero-base-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 14px rgba(15,55,91,.16)); }
.sn-hero-item-layer { pointer-events: none; }
.sn-hero-pet-layer {
  position: absolute;
  right: -8%;
  bottom: 2%;
  width: 56%;
  max-width: 200px;
  aspect-ratio: 1;
  display: block;
  z-index: 8;
  filter: drop-shadow(0 8px 12px rgba(15,55,91,.18));
}
.sn-hero-pet-image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.sn-hero-art-banner .sn-hero-pet-layer { right: -10%; bottom: 2%; width: 54%; max-width: 170px; }
.sn-hero-wardrobe-buddy-image .sn-hero-pet-layer { right: -8%; bottom: 3%; width: 52%; max-width: 190px; }
.sn-wardrobe-preview {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}
.sn-wardrobe-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(15,55,91,.12));
}
.sn-wardrobe-item {
  min-height: 158px;
  gap: 6px;
}
.sn-wardrobe-item strong { font-size: .8rem; }
.sn-wardrobe-item small { text-align: center; line-height: 1.2; }
.sn-hero-wardrobe-copy { max-width: 46ch; }
@media (max-width: 620px) {
  .sn-wardrobe-preview { width: 84px; height: 84px; }
  .sn-hero-pet-layer { width: 48%; right: -6%; }
}

/* Story Nest layout correction: companion scale/placement and four-card progress row */
.sn-hero-pet-layer {
  left: -3%;
  right: auto;
  bottom: 4%;
  width: 27%;
  max-width: 100px;
}

.sn-hero-art-banner .sn-hero-pet-layer {
  left: -4%;
  right: auto;
  bottom: 4%;
  width: 26%;
  max-width: 80px;
}

.sn-hero-wardrobe-buddy-image .sn-hero-pet-layer {
  left: -3%;
  right: auto;
  bottom: 4%;
  width: 26%;
  max-width: 95px;
}

.sn-celebrate-hero-art .sn-hero-pet-layer {
  left: -3%;
  right: auto;
  bottom: 4%;
  width: 26%;
  max-width: 90px;
}

.sn-stats {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.sn-bookshelf-bar,
.sn-stat {
  box-sizing: border-box;
  min-width: 0;
  min-height: 64px;
  height: 100%;
  margin: 0 !important;
  padding: 10px 9px !important;
  border-radius: 16px !important;
}

.sn-bookshelf-bar {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.sn-bookshelf-bar-label,
#bookshelfBarLabel {
  overflow-wrap: anywhere;
}

.sn-stat span,
.sn-bookshelf-bar {
  line-height: 1.18;
}

@media (min-width: 700px) {
  .sn-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .sn-star-goal,
  .sn-bookshelf-bar {
    grid-column: auto !important;
  }
}

@media (max-width: 699px) {
  .sn-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sn-star-goal,
  .sn-bookshelf-bar {
    grid-column: auto !important;
  }

  .sn-bookshelf-bar,
  .sn-stat {
    min-height: 60px;
  }
}


/* Compact star shop: all rewards are visible and purchasable. */
.sn-hero-wardrobe-window {
  width: min(840px, calc(100vw - 24px));
  max-height: min(760px, calc(100dvh - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sn-hero-wardrobe-header {
  grid-template-columns: 104px 1fr;
  gap: 14px;
  margin-bottom: 10px;
  padding: 9px 12px;
}
.sn-hero-wardrobe-buddy-art { height: 108px; }
.sn-wardrobe-tabs { flex: 0 0 auto; margin-bottom: 9px; }
.sn-wardrobe-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(470px, 57dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  align-content: start;
  gap: 8px;
  padding: 2px 5px 8px 2px;
}
.sn-wardrobe-item {
  position: relative;
  min-height: 128px;
  padding: 20px 6px 8px;
  gap: 3px;
  cursor: pointer;
}
.sn-wardrobe-preview { width: 68px; height: 68px; }
.sn-wardrobe-item strong { font-size: .72rem; }
.sn-wardrobe-item small { font-size: .63rem; }
.sn-wardrobe-item.is-for-sale {
  border-style: solid;
  border-color: #fbbf24;
  background: linear-gradient(180deg, #fffdf4, #fff7d6);
  color: #854d0e;
  opacity: 1;
}
.sn-wardrobe-item.is-for-sale:hover,
.sn-wardrobe-item.is-for-sale:focus-visible {
  transform: translateY(-2px);
  border-color: #f59e0b;
  box-shadow: 0 8px 18px rgba(245,158,11,.18);
}
.sn-wardrobe-item.needs-stars { border-color: #fcd34d; }
.sn-wardrobe-item.can-buy { box-shadow: inset 0 0 0 1px rgba(245,158,11,.12); }
.sn-wardrobe-price {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  font: 900 .63rem/1 var(--sn-font-display);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .sn-wardrobe-grid { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
}
@media (max-width: 590px) {
  .sn-hero-wardrobe-window { overflow-y: auto; }
  .sn-hero-wardrobe-header { grid-template-columns: 78px 1fr; }
  .sn-hero-wardrobe-buddy-art { height: 82px; }
  .sn-wardrobe-grid { max-height: 55dvh; grid-template-columns: repeat(3, minmax(92px, 1fr)); }
  .sn-wardrobe-item { min-height: 120px; }
  .sn-wardrobe-preview { width: 60px; height: 60px; }
}
@media (max-width: 390px) {
  .sn-hero-wardrobe-header { grid-template-columns: 1fr; }
  .sn-hero-wardrobe-buddy-art { display: none; }
  .sn-wardrobe-grid { grid-template-columns: repeat(2, minmax(112px, 1fr)); }
}


/* Encouraging reread prompt after two incorrect answers. */
.sn-reread-overlay {
  background: rgba(59, 32, 91, .58);
  backdrop-filter: blur(5px);
}
.sn-reread-window {
  width: min(430px, calc(100vw - 32px));
  padding: 28px 26px 26px;
  text-align: center;
  border: 4px solid #f7d36b;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    linear-gradient(180deg, #fffdf5 0%, #fff6cf 100%);
  box-shadow: 0 24px 70px rgba(45, 20, 73, .3);
  animation: sn-reread-pop .32s cubic-bezier(.2,.9,.25,1.18) both;
}
.sn-reread-sparkles {
  font-size: 1.35rem;
  letter-spacing: .22rem;
  margin-bottom: 2px;
}
.sn-reread-character {
  width: 86px;
  height: 86px;
  margin: 2px auto 8px;
  display: grid;
  place-items: center;
  font-size: 3.8rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #f6c453;
  box-shadow: 0 8px 0 rgba(181, 121, 27, .12);
}
.sn-reread-window h2 {
  margin: 5px 0 8px;
  color: #59337c;
}
.sn-reread-window #rereadMessage {
  max-width: 34ch;
  margin: 0 auto 18px;
  color: #5d4b63;
  font-weight: 700;
  line-height: 1.45;
}
.sn-reread-button {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #8c5ac7, #7040aa);
  color: white;
  font: 900 1rem/1.2 var(--sn-font-display);
  box-shadow: 0 7px 0 #4f287b;
  cursor: pointer;
}
.sn-reread-button:hover { transform: translateY(-1px); }
.sn-reread-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #4f287b; }
.sn-reread-button:focus-visible { outline: 4px solid #f4c94f; outline-offset: 3px; }
@keyframes sn-reread-pop {
  from { opacity: 0; transform: translateY(18px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-reread-window { animation: none; }
}


/* Star Shop header alignment */
.sn-hero-wardrobe-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.sn-hero-wardrobe-summary {
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #075985;
  font: 800 .9rem/1.2 var(--sn-font-display);
}
.sn-shop-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 10px;
  border: 1.5px solid #bae6fd;
  border-radius: 999px;
  background: rgba(248, 242, 255, .92);
  white-space: nowrap;
}
.sn-shop-stat strong {
  color: #0369a1;
  font-size: 1rem;
  font-weight: 950;
}
.sn-hero-wardrobe-copy {
  width: 100%;
  max-width: 52ch;
  margin: 0;
  color: var(--sn-muted);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
@media (max-width: 390px) {
  .sn-hero-wardrobe-info { align-items: center; }
  .sn-hero-wardrobe-summary { justify-content: center; }
  .sn-hero-wardrobe-copy { text-align: center; }
}

/* Keep Issy stationary during reward and story celebrations. */
#nestHero.is-wardrobe-celebrating,
#nestHero.celebrate,
#celebrationOverlay .sn-celebrate-char,
#celebrationOverlay .sn-celebrate-hero-art {
  animation: none !important;
  transform: none !important;
}

/* v57 — right column split into companion and Practice rows */
.sn-right-column { min-width: 0; }

@media (min-width: 1025px) {
  .sn-play-layout-v3,
  .pp-play-layout.sn-play-layout-v3 { align-items: stretch !important; }

  .sn-right-column {
    display: grid;
    grid-template-rows: clamp(320px, 31vw, 470px) auto;
    gap: clamp(16px, 1.7vw, 24px);
    align-self: stretch;
  }

  .sn-companion-panel {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: clamp(18px, 2vw, 28px) 14px 14px;
    border: 1px solid #cfe3f5;
    border-radius: 24px;
    background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.92) 0 4px, transparent 5px), radial-gradient(circle at 82% 25%, rgba(255,255,255,.88) 0 3px, transparent 4px), linear-gradient(160deg, #f8f2ff 0%, #eef9ff 52%, #f6ffef 100%);
    box-shadow: 0 12px 32px rgba(14, 92, 145, .12);
  }

  .sn-companion-panel::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    left: 11%;
    bottom: -45%;
    border-radius: 50%;
    background: rgba(255,255,255,.62);
  }

  .sn-companion-hero.sn-banner-hero {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    pointer-events: none;
    filter: none;
  }

  .sn-companion-hero .sn-nest-hero {
    width: min(92%, 315px);
    height: min(92%, 390px);
    max-height: 390px;
    pointer-events: auto;
  }

  .sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer {
    left: -1%;
    bottom: 3%;
    width: 31%;
    max-width: 112px;
  }

  .sn-companion-label {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 14px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid rgba(125,98,180,.16);
    border-radius: 999px;
    background: rgba(248, 242, 255, .92);
    color: #5b4383;
    font: 900 .78rem/1 var(--sn-font-display);
    backdrop-filter: blur(6px);
  }

  .sn-companion-sparkles {
    position: absolute;
    inset: 16px 18px auto;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    color: #e5aa22;
    font-size: clamp(1rem, 1.5vw, 1.45rem);
    opacity: .8;
  }

  .sn-right-column .sn-practice-card-v3 {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 1024px) {
  .sn-right-column { display: flex; flex-direction: column; gap: 16px; }
  .sn-companion-panel {
    position: relative;
    min-height: clamp(220px, 52vw, 350px);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 14px 12px 8px;
    border: 1px solid #cfe3f5;
    border-radius: 24px;
    background: linear-gradient(180deg, #f8f2ff 0%, #eef9ff 55%, #f6ffef 100%);
    box-shadow: 0 12px 32px rgba(14,92,145,.12);
  }
  .sn-companion-hero.sn-banner-hero { position: relative; inset: auto; width: 100%; height: 100%; filter: none; }
  .sn-companion-hero .sn-nest-hero { width: min(280px, 70vw); height: min(325px, 64vw); pointer-events: auto; }
  .sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer { width: 30%; max-width: 92px; }
  .sn-companion-label, .sn-companion-sparkles { display: none; }
}

/* v58 — banner-matched Reading Buddy panel with Practice controls above hero */
@media (min-width: 1025px) {
  .sn-right-column {
    grid-template-rows: auto auto;
  }

  .sn-companion-panel {
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    place-items: stretch;
    padding: 0;
  }

  .sn-companion-practice-heading {
    position: relative;
    z-index: 5;
    min-width: 0;
    margin: 0;
    padding: 13px 15px 10px;
    border-bottom: 1px solid rgba(110, 145, 182, .18);
    background: rgba(248, 242, 255, .88);
    backdrop-filter: blur(7px);
  }

  .sn-companion-practice-heading > span {
    font-size: 1.65rem;
  }

  .sn-companion-practice-heading h2 {
    font-size: 1.42rem;
  }

  .sn-companion-practice-heading p {
    font-size: .88rem;
  }

  .sn-companion-practice-heading > .sn-current-grade {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .sn-companion-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .sn-companion-panel::before {
    left: 11%;
    bottom: -56%;
  }

  .sn-companion-hero.sn-banner-hero {
    position: absolute;
    inset: 0;
  }

  .sn-companion-hero .sn-nest-hero {
    width: min(88%, 285px);
    height: min(98%, 330px);
    max-height: 330px;
  }

  .sn-companion-label {
    left: 14px;
    bottom: 11px;
  }

  .sn-companion-sparkles {
    inset: 12px 16px auto;
  }
}

@media (max-width: 1024px) {
  .sn-companion-panel {
    display: grid;
    grid-template-rows: auto minmax(210px, 1fr);
    place-items: stretch;
    padding: 0;
  }

  .sn-companion-practice-heading {
    position: relative;
    z-index: 4;
    margin: 0;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(110,145,182,.18);
    background: rgba(248, 242, 255, .92);
  }

  .sn-companion-stage {
    position: relative;
    min-height: clamp(210px, 48vw, 325px);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .sn-companion-hero.sn-banner-hero {
    position: absolute;
    inset: 0;
  }
}


/* v59 — bottom-centred reading buddy without label bubble */
.sn-companion-label { display: none !important; }

.sn-companion-stage {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  box-sizing: border-box;
  padding: 12px 16px 24px !important;
}

.sn-companion-hero.sn-banner-hero {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 330px) !important;
  height: min(100%, 340px) !important;
  min-height: 0;
  display: grid !important;
  place-items: end center !important;
  z-index: 3;
  visibility: visible !important;
  opacity: 1 !important;
}

.sn-companion-hero .sn-nest-hero {
  display: grid !important;
  place-items: end center !important;
  width: min(92%, 290px) !important;
  height: min(100%, 325px) !important;
  margin: 0 auto;
  visibility: visible !important;
  opacity: 1 !important;
}

.sn-companion-hero .sn-hero-art-banner {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  .sn-companion-stage {
    padding: 10px 14px 22px !important;
  }
  .sn-companion-hero.sn-banner-hero {
    width: min(100%, 300px) !important;
    height: min(100%, 315px) !important;
  }
  .sn-companion-hero .sn-nest-hero {
    width: min(88%, 270px) !important;
    height: min(100%, 300px) !important;
  }
}

@media (max-width: 620px) {
  .sn-companion-stage {
    padding-bottom: 18px !important;
  }
}

/* v60 — guarantee the reading buddy has a real paint area and sits above panel decoration */
.sn-companion-panel {
  isolation: isolate;
}

.sn-companion-panel::before {
  z-index: 0 !important;
  pointer-events: none;
}

.sn-companion-practice-heading {
  z-index: 4 !important;
}

.sn-companion-stage {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 190px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
}

.sn-companion-sparkles {
  z-index: 1 !important;
  pointer-events: none;
}

.sn-companion-hero.sn-banner-hero {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  width: min(88%, 310px) !important;
  height: min(94%, 315px) !important;
  min-height: 180px !important;
  z-index: 5 !important;
  overflow: visible !important;
  pointer-events: none;
}

.sn-companion-hero #nestHero,
.sn-companion-hero .sn-nest-hero {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  z-index: 6 !important;
  overflow: visible !important;
  pointer-events: auto;
}

.sn-companion-hero .sn-hero-stack,
.sn-companion-hero .sn-hero-art-banner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  z-index: 7 !important;
  overflow: visible !important;
}

.sn-companion-hero .sn-hero-variant-image,
.sn-companion-hero .sn-hero-base-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 8 !important;
}

.sn-companion-hero .sn-hero-pet-layer {
  z-index: 9 !important;
}

@media (max-width: 1024px) {
  .sn-companion-stage { min-height: 230px !important; }
  .sn-companion-hero.sn-banner-hero {
    bottom: 22px !important;
    width: min(82%, 285px) !important;
    height: min(92%, 285px) !important;
  }
}

@media (max-width: 620px) {
  .sn-companion-stage { min-height: 210px !important; }
  .sn-companion-hero.sn-banner-hero {
    bottom: 18px !important;
    width: min(78%, 245px) !important;
    height: min(90%, 245px) !important;
  }
}


/* v61 — deterministic reading buddy paint; static fallback survives delayed JS */
.sn-companion-stage {
  contain: none !important;
}
.sn-companion-hero.sn-banner-hero {
  display: block !important;
  visibility: visible !important;
}
.sn-companion-hero #nestHero {
  display: block !important;
  position: relative !important;
  min-width: 210px !important;
  min-height: 240px !important;
  background: transparent !important;
}
.sn-hero-static-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  visibility: visible;
  opacity: 1;
  z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(15,55,91,.16));
}
.sn-companion-hero .sn-hero-stack {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}
.sn-companion-hero .sn-hero-variant-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
@media (max-width: 620px) {
  .sn-companion-hero #nestHero {
    min-width: 170px !important;
    min-height: 205px !important;
  }
}

/* v62 — compact reading buddy; preserve open space for future unlockable backgrounds */
.sn-companion-stage {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 20px 28px !important;
}
.sn-companion-hero.sn-banner-hero {
  position: relative !important;
  inset: auto !important;
  width: 112px !important;
  height: 128px !important;
  flex: 0 0 112px !important;
}
.sn-companion-hero #nestHero,
.sn-companion-hero .sn-nest-hero {
  width: 112px !important;
  height: 128px !important;
  min-width: 112px !important;
  min-height: 128px !important;
  max-width: 112px !important;
  max-height: 128px !important;
}
.sn-companion-hero .sn-hero-pet-layer {
  transform: scale(.82);
  transform-origin: bottom right;
}
@media (max-width: 620px) {
  .sn-companion-stage {
    padding-bottom: 22px !important;
  }
  .sn-companion-hero.sn-banner-hero {
    width: 96px !important;
    height: 112px !important;
    flex-basis: 96px !important;
  }
  .sn-companion-hero #nestHero,
  .sn-companion-hero .sn-nest-hero {
    width: 96px !important;
    height: 112px !important;
    min-width: 96px !important;
    min-height: 112px !important;
    max-width: 96px !important;
    max-height: 112px !important;
  }
}

/* v63 — compact no-scroll layout for the lower-right Practice panel */
.sn-practice-card-v3 {
  box-sizing: border-box;
}

.sn-practice-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.sn-practice-card-v3 .sn-compact-tool {
  min-width: 0;
  min-height: 62px;
  margin: 0 !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
  border-radius: 16px;
}

.sn-practice-card-v3 .sn-compact-tool-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.15;
}

.sn-practice-card-v3 .sn-compact-tool-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 900 .88rem/1.1 var(--sn-font-display);
}

.sn-practice-card-v3 .sn-compact-tool-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sn-muted);
  font-size: .7rem;
  font-weight: 750;
}

.sn-practice-card-v3 .sn-word-helper-icon,
.sn-practice-card-v3 #favoriteStarIcon {
  flex: 0 0 auto;
  font-size: 1.35rem;
}

.sn-practice-card-v3 .sn-done-button-v3 {
  min-height: 54px;
  margin: 12px 0 0 !important;
  padding: 11px 14px !important;
}

.sn-practice-footer-row {
  min-height: 0;
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(108px, .72fr) minmax(0, 1.28fr);
  gap: 10px;
  align-items: stretch;
}

.sn-practice-footer-row .sn-line-mode-v3 {
  min-height: 58px;
  margin: 0;
  padding: 10px 8px;
  border-radius: 15px;
  font-size: .8rem;
}

.sn-practice-card-v3 .sn-tips-card {
  min-width: 0;
  margin: 0 !important;
  padding: 9px 11px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 15px;
}

.sn-practice-card-v3 .sn-tips-card h3 {
  margin: 0 0 3px !important;
  font-size: .78rem !important;
}

.sn-practice-card-v3 .sn-tips-card p {
  margin: 0 !important;
  font-size: .7rem !important;
  line-height: 1.3;
}

.sn-practice-card-v3 .sn-practice-notices:empty,
.sn-practice-card-v3 .sn-practice-notices:has(.hidden) {
  display: none;
}

@media (min-width: 1025px) {
  .sn-right-column .sn-practice-card-v3 {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(12px, 1.25vw, 17px) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .sn-practice-card-v3 {
    overflow: visible;
  }
}

@media (max-width: 460px) {
  .sn-practice-tools,
  .sn-practice-footer-row {
    grid-template-columns: 1fr;
  }
  .sn-practice-card-v3 .sn-compact-tool {
    min-height: 56px;
  }
}


/* v64 — remove tips/grade trophies and give Favorite the freed space */
.sn-practice-card-v3 {
  justify-content: center;
}

.sn-practice-card-v3 > .sn-word-tool {
  width: 100%;
  min-height: 60px;
}

.sn-practice-footer-row-favorite {
  grid-template-columns: minmax(108px, .7fr) minmax(0, 1.55fr);
}

.sn-practice-card-v3 .sn-favorite-tool {
  width: 100%;
  min-height: 58px;
  margin: 0 !important;
  justify-content: flex-start;
  background: linear-gradient(135deg, #fff8d7 0%, #fffdf4 100%);
  border: 2px solid #f1cc58;
  box-shadow: 0 6px 14px rgba(116, 82, 16, .12);
}

.sn-practice-card-v3 .sn-favorite-tool[aria-pressed="true"] {
  background: linear-gradient(135deg, #fff0a8 0%, #fff8d7 100%);
  border-color: #e6b629;
}

.sn-practice-card-v3 .sn-favorite-tool .sn-compact-tool-copy strong {
  font-size: .94rem;
}

.sn-practice-card-v3 .sn-favorite-tool .sn-compact-tool-copy small {
  white-space: normal;
  line-height: 1.2;
}

.sn-practice-card-v3 .sn-tips-card,
.sn-practice-card-v3 .sn-grade-awards {
  display: none !important;
}

@media (max-width: 460px) {
  .sn-practice-footer-row-favorite {
    grid-template-columns: 1fr;
  }
}

/* v66 — reading buddy bottom-centred with 10px bottom padding */
.sn-companion-stage {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 20px 10px !important;
}

.sn-companion-hero.sn-banner-hero {
  margin: 0 auto !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .sn-companion-stage {
    padding-bottom: 10px !important;
  }
}

@media (max-width: 620px) {
  .sn-companion-stage {
    padding-bottom: 10px !important;
  }
}


/* v69 — unlockable reading buddy backgrounds fully fill the buddy box */
.sn-companion-stage,
.sn-hero-wardrobe-buddy-art {
  position: relative;
  isolation: isolate;
}

.sn-companion-stage.has-buddy-background,
.sn-hero-wardrobe-buddy-art.has-buddy-background {
  background-image: var(--sn-buddy-background-image);
  background-repeat: no-repeat;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

.sn-companion-stage.has-buddy-background {
  background-color: #eaf5df;
  background-position: center center;
  background-size: cover;
  /* The hero panel joins the section above, so only the bottom corners are rounded. */
  border-radius: 0 0 24px 24px;
}

.sn-hero-wardrobe-buddy-art.has-buddy-background {
  background-color: #eaf5df;
  background-position: center center;
  background-size: cover;
}

.sn-companion-stage.has-buddy-background::after,
.sn-hero-wardrobe-buddy-art.has-buddy-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05) 42%, rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}

.sn-companion-stage > *,
.sn-hero-wardrobe-buddy-art > * {
  position: relative;
  z-index: 1;
}

.sn-hero-wardrobe-buddy-art {
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.sn-wardrobe-item-image {
  object-fit: cover;
}


/* v70 — standard background thumbnails and square top hero-background corners */
.sn-wardrobe-item[data-category="backgrounds"] .sn-wardrobe-preview {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
}
.sn-wardrobe-item[data-category="backgrounds"] .sn-wardrobe-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sn-wardrobe-item[data-category="backgrounds"] {
  min-height: 148px;
  gap: 5px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.sn-wardrobe-item[data-category="backgrounds"] strong,
.sn-wardrobe-item[data-category="backgrounds"] small {
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .sn-wardrobe-item[data-category="backgrounds"] .sn-wardrobe-preview {
    width: 68px;
    height: 68px;
  }
}
.sn-companion-stage.has-buddy-background,
.sn-hero-wardrobe-buddy-art.has-buddy-background {
  border-radius: 0 0 24px 24px;
}

/* v70 — backgrounds should not display decorative stars over the hero scene */
.sn-companion-sparkles { display: none !important; }

/* v71 — dynamically fit the reading buddy inside the hero stage on tablets/orientation changes */
.sn-companion-stage {
  --sn-responsive-hero-width: 112px;
  --sn-responsive-hero-height: 168px;
}

.sn-companion-hero.sn-banner-hero {
  width: var(--sn-responsive-hero-width) !important;
  height: var(--sn-responsive-hero-height) !important;
  flex: 0 0 var(--sn-responsive-hero-width) !important;
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 10px) !important;
  overflow: visible !important;
}

.sn-companion-hero #nestHero,
.sn-companion-hero .sn-nest-hero,
.sn-companion-hero .sn-hero-stack,
.sn-companion-hero .sn-hero-art-banner {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.sn-companion-hero .sn-hero-variant-image,
.sn-companion-hero .sn-hero-base-image,
.sn-companion-hero .sn-hero-static-fallback {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* iPad landscape commonly falls at or just above 1024 CSS pixels. */
@media (orientation: landscape) and (max-height: 900px) {
  .sn-companion-stage {
    padding: 0 12px 8px !important;
  }
}

/* v72 — preserve hero/pet proportions and keep the complete buddy group inside tablet stages */
.sn-companion-hero.sn-banner-hero {
  aspect-ratio: 2 / 3 !important;
  overflow: visible !important;
}

.sn-companion-hero #nestHero,
.sn-companion-hero .sn-nest-hero,
.sn-companion-hero .sn-hero-stack,
.sn-companion-hero .sn-hero-art-banner {
  aspect-ratio: 2 / 3 !important;
  overflow: visible !important;
}

.sn-companion-hero .sn-hero-pet-layer,
.sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer {
  left: 1% !important;
  right: auto !important;
  bottom: 2% !important;
  width: 30% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
  transform-origin: center bottom !important;
  overflow: visible !important;
}

.sn-companion-hero .sn-hero-pet-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* In short landscape tablet viewports, use a little more breathing room. */
@media (orientation: landscape) and (max-height: 900px) {
  .sn-companion-hero .sn-hero-pet-layer,
  .sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer {
    left: 2% !important;
    width: 28% !important;
  }
}

/* v73 — verified responsive buddy group sizing for iPad landscape and split view */
.sn-companion-stage {
  --sn-fit-hero-width: 128px;
  --sn-fit-hero-height: 192px;
  overflow: hidden !important;
}

.sn-companion-hero.sn-banner-hero {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: var(--sn-fit-hero-width) !important;
  height: var(--sn-fit-hero-height) !important;
  flex: 0 0 var(--sn-fit-hero-width) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

.sn-companion-hero #nestHero,
.sn-companion-hero .sn-nest-hero,
.sn-companion-hero .sn-hero-stack,
.sn-companion-hero .sn-hero-art-banner {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

.sn-companion-hero .sn-hero-variant-image,
.sn-companion-hero .sn-hero-base-image,
.sn-companion-hero .sn-hero-static-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* Pets scale as a percentage of Issy's fitted box, so both shrink together. */
.sn-companion-hero .sn-hero-pet-layer,
.sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 1% !important;
  width: 31% !important;
  height: 31% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
  overflow: visible !important;
}

.sn-companion-hero .sn-hero-pet-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}


/* v75 — compact one-line companion header for more hero space */
.sn-companion-practice-heading {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0;
}
.sn-companion-practice-heading .sn-practice-title {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sn-companion-practice-heading .sn-practice-title h2 {
  margin: 0 !important;
  white-space: nowrap;
}
.sn-companion-practice-heading > .sn-current-grade {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
@media (max-width: 1024px) {
  .sn-companion-practice-heading {
    padding-block: 8px !important;
  }
  .sn-companion-practice-heading > span {
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }
  .sn-companion-practice-heading h2 {
    font-size: 1.22rem !important;
    line-height: 1 !important;
  }
}
@media (max-width: 620px) {
  .sn-companion-practice-heading {
    gap: 7px !important;
    padding: 7px 10px !important;
  }
  .sn-companion-practice-heading > span {
    font-size: 1.3rem !important;
  }
  .sn-companion-practice-heading h2 {
    font-size: 1.08rem !important;
  }
  .sn-companion-practice-heading .sn-current-grade {
    padding: 3px 5px !important;
  }
  .sn-companion-practice-heading .sn-current-grade select {
    max-width: 112px;
    font-size: .68rem !important;
  }
}

/* v76 — let the lower right practice panel use the remaining column height */
@media (min-width: 768px) and (orientation: landscape) {
  .sn-right-column {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    gap: clamp(8px, 1vw, 12px) !important;
    min-height: 0 !important;
  }

  .sn-right-column > .sn-companion-panel {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .sn-right-column > .sn-practice-card-v3 {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: clamp(245px, 31vh, 360px) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1025px) {
  .sn-right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 1vw, 14px) !important;
  }

  .sn-right-column > .sn-companion-panel {
    flex: 0 1 auto !important;
  }

  .sn-right-column > .sn-practice-card-v3 {
    flex: 1 1 0 !important;
    min-height: clamp(260px, 29vh, 390px) !important;
    justify-content: space-evenly !important;
  }
}

/* v76 — slightly larger equipped pets inside the reading-buddy hero box */
.sn-companion-hero .sn-hero-pet-layer,
.sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer {
  left: -1% !important;
  bottom: 1% !important;
  width: 36% !important;
  height: 36% !important;
}

@media (orientation: landscape) and (max-height: 900px) {
  .sn-companion-hero .sn-hero-pet-layer,
  .sn-companion-hero .sn-hero-art-banner .sn-hero-pet-layer {
    left: 0 !important;
    width: 35% !important;
    height: 35% !important;
  }
}

/* v207 — display insufficient-star feedback above the open Star Shop overlay */
.sn-hero-wardrobe-overlay > .sn-hero-wardrobe-toast {
  position: fixed !important;
  top: max(18px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  box-sizing: border-box;
  transform: translateX(-50%);
  z-index: 10001 !important;
}

@media (max-width: 620px) {
  .sn-hero-wardrobe-overlay > .sn-hero-wardrobe-toast {
    top: max(10px, env(safe-area-inset-top)) !important;
    width: calc(100vw - 24px) !important;
  }
}

/* v212 — anchor the complete hero and pet group closer to the bottom centre */
.sn-companion-stage {
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 3px !important;
}

.sn-companion-hero.sn-banner-hero {
  margin-inline: auto !important;
  transform: translateY(5px) !important;
  transform-origin: center bottom !important;
}

@media (orientation: landscape) and (max-height: 900px) {
  .sn-companion-stage {
    padding-bottom: 2px !important;
  }
  .sn-companion-hero.sn-banner-hero {
    transform: translateY(4px) !important;
  }
}


/* v217b — slightly smaller outfit previews so names/descriptions fit cleanly */
.sn-wardrobe-item[data-category="clothes"] {
  min-height: 138px;
  gap: 4px;
  padding: 18px 6px 8px;
}
.sn-wardrobe-item[data-category="clothes"] .sn-wardrobe-preview {
  width: 74px;
  height: 74px;
}
.sn-wardrobe-item[data-category="clothes"] .sn-wardrobe-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.sn-wardrobe-item[data-category="clothes"].has-no-helper {
  align-content: center;
  padding-bottom: 10px;
}
@media (max-width: 590px) {
  .sn-wardrobe-item[data-category="clothes"] {
    min-height: 128px;
  }
  .sn-wardrobe-item[data-category="clothes"] .sn-wardrobe-preview {
    width: 64px;
    height: 64px;
  }
}

/* v77 — Star Shop live previews, filters, and reward-tier sections */
.sn-hero-wardrobe-window {
  width: min(980px, calc(100vw - 24px));
  max-height: min(840px, calc(100dvh - 20px));
}

.sn-wardrobe-filters {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -1px 0 10px;
  padding: 2px 2px 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sn-shop-filter {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1.5px solid #bae6fd;
  border-radius: 999px;
  background: #f8fbff;
  color: #075985;
  font: 850 .72rem/1 var(--sn-font-display);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.sn-shop-filter:hover,
.sn-shop-filter:focus-visible {
  transform: translateY(-1px);
  border-color: #38bdf8;
  box-shadow: 0 5px 12px rgba(14,165,233,.13);
}

.sn-shop-filter.is-active {
  border-color: #0284c7;
  background: linear-gradient(180deg, #e0f2fe, #bae6fd);
  color: #075985;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}

.sn-wardrobe-live-preview {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 0 11px;
  padding: 12px;
  border: 2px solid #a5b4fc;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(238,242,255,.98), rgba(250,245,255,.98));
  box-shadow: 0 10px 24px rgba(79,70,229,.12);
}

.sn-wardrobe-live-preview.hidden { display: none !important; }

.sn-wardrobe-live-preview-stage {
  position: relative;
  isolation: isolate;
  width: 180px;
  height: 218px;
  justify-self: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 18px;
  background: linear-gradient(180deg, #eef8ff, #fff8e7);
  box-shadow: inset 0 0 0 1px rgba(14,165,233,.12), 0 7px 16px rgba(15,55,91,.12);
}

.sn-wardrobe-live-preview-stage.has-buddy-background {
  background-image: var(--sn-buddy-background-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sn-shop-live-preview-art {
  width: 92%;
  height: 96%;
  z-index: 2;
}

.sn-wardrobe-live-preview-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%, rgba(255,255,255,.08));
}

.sn-wardrobe-live-preview-info { min-width: 0; }
.sn-wardrobe-live-preview-eyebrow {
  margin: 0 0 4px;
  color: #7c3aed;
  font: 900 .72rem/1.1 var(--sn-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sn-wardrobe-live-preview-info h3 {
  margin: 0;
  color: #312e81;
  font: 950 1.35rem/1.15 var(--sn-font-display);
}
.sn-wardrobe-live-preview-info p:not(.sn-wardrobe-live-preview-eyebrow) {
  max-width: 54ch;
  margin: 7px 0 12px;
  color: #475569;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.45;
}
.sn-wardrobe-live-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sn-shop-preview-primary,
.sn-shop-preview-cancel {
  min-height: 39px;
  padding: 8px 14px;
  border-radius: 12px;
  font: 900 .78rem/1 var(--sn-font-display);
  cursor: pointer;
}
.sn-shop-preview-primary {
  border: 1.5px solid #4f46e5;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 7px 14px rgba(79,70,229,.2);
}
.sn-shop-preview-primary:disabled {
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #64748b;
  box-shadow: none;
  cursor: default;
}
.sn-shop-preview-cancel {
  border: 1.5px solid #cbd5e1;
  background: #fff;
  color: #475569;
}

.sn-wardrobe-grid {
  display: block;
  max-height: min(430px, 50dvh);
  padding: 0 6px 10px 1px;
  overflow-y: auto;
  scroll-padding-top: 44px;
}

.sn-wardrobe-default-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
}
.sn-wardrobe-default-label {
  flex: 0 0 auto;
  color: #64748b;
  font: 900 .7rem/1 var(--sn-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sn-wardrobe-default-button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1.5px solid #bae6fd;
  border-radius: 11px;
  background: #fff;
  color: #075985;
  cursor: pointer;
}
.sn-wardrobe-default-button strong { font: 900 .76rem/1.1 var(--sn-font-display); }
.sn-wardrobe-default-button small { color: #64748b; font: 800 .65rem/1 var(--sn-font-display); }
.sn-wardrobe-default-button.is-equipped { border-color: #22c55e; background: #f0fdf4; }
.sn-wardrobe-default-button .sn-wardrobe-default-option {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e0f2fe;
}

.sn-wardrobe-tier { margin: 0 0 14px; }
.sn-wardrobe-tier-heading {
  position: sticky;
  top: -1px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
  padding: 8px 10px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: rgba(239,246,255,.96);
  backdrop-filter: blur(8px);
  color: #1e3a8a;
}
.sn-wardrobe-tier-heading strong { font: 950 .8rem/1 var(--sn-font-display); }
.sn-wardrobe-tier-heading span { color: #64748b; font: 850 .67rem/1 var(--sn-font-display); }
.sn-wardrobe-tier-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: 8px;
}

.sn-wardrobe-item {
  min-height: 130px;
  padding-top: 22px;
}
.sn-wardrobe-item.is-previewing {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15), 0 8px 18px rgba(124,58,237,.16) !important;
}
.sn-wardrobe-new-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  padding: 3px 6px;
  border: 1px solid #c084fc;
  border-radius: 999px;
  background: #f3e8ff;
  color: #7e22ce;
  font: 950 .58rem/1 var(--sn-font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sn-wardrobe-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 24px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  color: #475569;
  text-align: center;
}
.sn-wardrobe-empty span { font-size: 1.7rem; }
.sn-wardrobe-empty strong { font: 900 .88rem/1.2 var(--sn-font-display); }
.sn-wardrobe-empty p { margin: 0; font-size: .78rem; font-weight: 700; }

@media (max-width: 760px) {
  .sn-wardrobe-tier-grid { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
  .sn-wardrobe-live-preview { grid-template-columns: 150px minmax(0, 1fr); }
  .sn-wardrobe-live-preview-stage { width: 150px; height: 188px; }
}

@media (max-width: 590px) {
  .sn-wardrobe-live-preview {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
  }
  .sn-wardrobe-live-preview-stage { width: 112px; height: 142px; }
  .sn-wardrobe-live-preview-info h3 { font-size: 1.02rem; }
  .sn-wardrobe-live-preview-info p:not(.sn-wardrobe-live-preview-eyebrow) { margin: 5px 0 8px; font-size: .73rem; }
  .sn-shop-preview-primary,
  .sn-shop-preview-cancel { min-height: 34px; padding: 7px 9px; font-size: .68rem; }
  .sn-wardrobe-grid { max-height: 48dvh; }
  .sn-wardrobe-tier-grid { grid-template-columns: repeat(3, minmax(92px, 1fr)); }
  .sn-wardrobe-default-row { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (max-width: 390px) {
  .sn-wardrobe-live-preview { grid-template-columns: 1fr; }
  .sn-wardrobe-live-preview-stage { width: 128px; height: 158px; }
  .sn-wardrobe-live-preview-info { text-align: center; }
  .sn-wardrobe-live-preview-actions { justify-content: center; }
  .sn-wardrobe-tier-grid { grid-template-columns: repeat(2, minmax(112px, 1fr)); }
}


/* v78 — place live reward previews inside the existing Star Shop header */
.sn-hero-wardrobe-header-content {
  min-width: 0;
}

.sn-hero-wardrobe-copy.hidden,
.sn-wardrobe-header-preview.hidden {
  display: none !important;
}

.sn-wardrobe-header-preview {
  min-width: 0;
}

.sn-wardrobe-header-preview h3 {
  margin: 0;
  color: #312e81;
  font: 950 1.28rem/1.12 var(--sn-font-display);
}

.sn-wardrobe-header-preview > p:not(.sn-wardrobe-live-preview-eyebrow) {
  max-width: 54ch;
  margin: 6px 0 10px;
  color: #475569;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.38;
}

.sn-hero-wardrobe-header.is-previewing {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-color: #a5b4fc;
  background: linear-gradient(135deg, rgba(238,242,255,.98), rgba(250,245,255,.98));
  box-shadow: 0 9px 22px rgba(79,70,229,.11);
}

.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-buddy-art {
  position: relative;
  isolation: isolate;
  width: 180px;
  height: 218px;
  justify-self: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 18px;
  background: linear-gradient(180deg, #eef8ff, #fff8e7);
  box-shadow: inset 0 0 0 1px rgba(14,165,233,.12), 0 7px 16px rgba(15,55,91,.12);
}

.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-buddy-art.has-buddy-background {
  background-image: var(--sn-buddy-background-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-buddy-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%, rgba(255,255,255,.08));
}

.sn-hero-wardrobe-header.is-previewing .sn-shop-live-preview-art {
  width: 92%;
  height: 96%;
  z-index: 2;
}

.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-summary {
  margin-bottom: 7px;
}

@media (max-width: 760px) {
  .sn-hero-wardrobe-header.is-previewing {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-buddy-art {
    width: 150px;
    height: 188px;
  }
}

@media (max-width: 590px) {
  .sn-hero-wardrobe-header.is-previewing {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
  }
  .sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-buddy-art {
    width: 112px;
    height: 142px;
  }
  .sn-wardrobe-header-preview h3 { font-size: 1.02rem; }
  .sn-wardrobe-header-preview > p:not(.sn-wardrobe-live-preview-eyebrow) {
    margin: 5px 0 8px;
    font-size: .73rem;
  }
}

@media (max-width: 390px) {
  .sn-hero-wardrobe-header.is-previewing {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-buddy-art {
    width: 128px;
    height: 158px;
  }
  .sn-wardrobe-header-preview .sn-wardrobe-live-preview-actions {
    justify-content: center;
  }
}


/* v225 — use the full live-preview style for the Star Shop startup state */
.sn-hero-wardrobe-header.is-current-look .sn-wardrobe-header-preview > p:not(.sn-wardrobe-live-preview-eyebrow) {
  margin-bottom: 0;
}


/* v226 — clean current-look copy and align shop preview actions */
.sn-shop-preview-primary.hidden,
.sn-shop-preview-cancel.hidden,
.sn-shop-preview-primary[hidden],
.sn-shop-preview-cancel[hidden] {
  display: none !important;
}

.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-header-content {
  align-self: stretch;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview > p:not(.sn-wardrobe-live-preview-eyebrow) {
  margin: 7px 0 0;
}

.sn-hero-wardrobe-header.is-previewing:not(.is-current-look) .sn-wardrobe-live-preview-actions {
  margin-top: auto;
  padding-top: 12px;
}

.sn-hero-wardrobe-header.is-current-look .sn-wardrobe-live-preview-actions {
  display: none !important;
}

.sn-wardrobe-header-preview .sn-wardrobe-live-preview-actions {
  align-items: center;
  justify-content: flex-start;
}

.sn-wardrobe-header-preview .sn-shop-preview-primary {
  min-width: 168px;
}

.sn-wardrobe-header-preview .sn-shop-preview-cancel {
  min-width: 112px;
}

@media (max-width: 590px) {
  .sn-hero-wardrobe-header.is-previewing:not(.is-current-look) .sn-wardrobe-live-preview-actions {
    padding-top: 8px;
  }

  .sn-wardrobe-header-preview .sn-shop-preview-primary,
  .sn-wardrobe-header-preview .sn-shop-preview-cancel {
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .sn-wardrobe-header-preview .sn-wardrobe-live-preview-actions {
    justify-content: center;
  }
}

/* v227 — center the Star Shop preview copy and controls */
.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-header-content,
.sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview {
  align-items: center;
  text-align: center;
}

.sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview > p:not(.sn-wardrobe-live-preview-eyebrow) {
  width: min(100%, 460px);
  margin-left: auto;
  margin-right: auto;
}

.sn-wardrobe-header-preview .sn-wardrobe-live-preview-actions {
  width: 100%;
  justify-content: center;
}

.sn-hero-wardrobe-header.is-previewing:not(.is-current-look) .sn-wardrobe-live-preview-actions {
  margin-top: auto;
}

/* v228 — lower and vertically center the Star Shop preview copy */
.sn-hero-wardrobe-header.is-previewing .sn-hero-wardrobe-header-content {
  justify-content: center;
}

.sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview {
  flex: 0 1 auto;
  justify-content: center;
  transform: translateY(12px);
}

.sn-hero-wardrobe-header.is-previewing:not(.is-current-look) .sn-wardrobe-live-preview-actions {
  margin-top: 14px;
  padding-top: 0;
}

@media (max-width: 590px) {
  .sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview {
    transform: translateY(7px);
  }

  .sn-hero-wardrobe-header.is-previewing:not(.is-current-look) .sn-wardrobe-live-preview-actions {
    margin-top: 10px;
  }
}

@media (max-width: 390px) {
  .sn-hero-wardrobe-header.is-previewing .sn-wardrobe-header-preview {
    transform: none;
  }
}

/* v230 — center the Star Shop balance and collection badges */
.sn-hero-wardrobe-summary {
  justify-content: center;
  text-align: center;
}

.sn-shop-stat {
  justify-content: center;
  text-align: center;
}

@media (max-width: 420px) {
  .sn-hero-wardrobe-summary {
    flex-direction: column;
    align-items: center;
  }
}


/* v231 — star-tier buttons already identify the selected price, so reclaim the duplicate heading space */
.sn-wardrobe-tier { margin: 0; }
.sn-wardrobe-tier-heading { display: none !important; }

/* =========================================================
   Story Nest v238 — soft book-page background
   Warm paper tint keeps dark text, blue sentence highlights,
   and yellow word highlights clearly visible.
   ========================================================= */
.sn-story-card-v3 .sn-passage-shell,
.sn-story-card-v3 .sn-passage-shell-v3 {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .78), transparent 28%),
    linear-gradient(180deg, #fffdf6 0%, #fff9ec 52%, #f7fbff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

/* Keep the existing reading cues distinct against the warmer page. */
.sn-story-card-v3 .sn-line-btn:first-child {
  background: #eaf5ff !important;
}

.sn-story-card-v3 .sn-line-btn:hover,
.sn-story-card-v3 .sn-line-btn:focus-visible {
  background: #e3f2ff !important;
}

.sn-passage.line-mode-active .sn-line-btn.active,
.sn-passage.line-mode-active .sn-line-btn.reading-line {
  background: #dbeafe !important;
}

.sn-story-page-navigation {
  background: rgba(248, 251, 255, .42);
}


/* v239 — quiet one-minute independent-reading period before full narration */
.sn-story-card-v3 .sn-hero-sound.is-read-locked,
.sn-story-card-v3 .sn-hero-sound:disabled {
  background: rgba(226, 232, 240, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.82) !important;
  color: #64748b !important;
  opacity: 0.78 !important;
  filter: grayscale(0.5) saturate(0.55) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
  cursor: not-allowed !important;
  transform: none !important;
  animation: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}

.sn-story-card-v3 .sn-hero-sound.is-read-locked:hover,
.sn-story-card-v3 .sn-hero-sound.is-read-locked:focus-visible,
.sn-story-card-v3 .sn-hero-sound:disabled:hover,
.sn-story-card-v3 .sn-hero-sound:disabled:focus-visible {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}


/* v240 — gently glow when Read to Me becomes available */
@keyframes sn-read-ready-glow {
  0%, 100% {
    box-shadow:
      0 6px 16px rgba(15, 23, 42, .18),
      0 0 0 0 rgba(255, 224, 102, 0);
  }
  50% {
    box-shadow:
      0 8px 20px rgba(15, 23, 42, .2),
      0 0 0 7px rgba(255, 224, 102, .25),
      0 0 22px rgba(255, 224, 102, .72);
  }
}

.sn-story-card-v3 .sn-hero-sound.is-read-ready {
  background: rgba(4, 37, 58, .9) !important;
  border-color: rgba(255, 229, 122, .96) !important;
  color: #fff8cf !important;
  opacity: 1 !important;
  filter: none !important;
  animation: sn-read-ready-glow 1.9s ease-in-out infinite;
}

.sn-story-card-v3 .sn-hero-sound.is-read-ready:hover,
.sn-story-card-v3 .sn-hero-sound.is-read-ready:focus-visible {
  animation-play-state: paused;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, .22),
    0 0 0 7px rgba(255, 224, 102, .28),
    0 0 24px rgba(255, 224, 102, .78) !important;
}

.sn-story-card-v3 .sn-hero-sound.is-narrating,
.sn-story-card-v3 .sn-hero-sound.is-paused {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sn-story-card-v3 .sn-hero-sound.is-read-ready {
    animation: none !important;
    box-shadow:
      0 8px 20px rgba(15, 23, 42, .2),
      0 0 0 6px rgba(255, 224, 102, .24),
      0 0 18px rgba(255, 224, 102, .62) !important;
  }
}


/* v257 — temporary encouragement ribbon inside the bottom of the hero box
   The existing cheer-message JavaScript continues to control the text and timing. */
.sn-hero-cheer-bubble,
.sn-hero-encouragement-ribbon {
  position: absolute !important;
  z-index: 14 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(9px, env(safe-area-inset-bottom)) !important;
  width: min(86%, 340px) !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box;
  padding: 8px 15px 9px 37px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .91), rgba(255, 248, 225, .88));
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  backdrop-filter: blur(8px) saturate(1.08);
  color: #55366f;
  box-shadow:
    0 5px 15px rgba(61, 43, 84, .16),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  font-size: clamp(.73rem, 1.55vw, .87rem);
  font-weight: 800;
  line-height: 1.22;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none !important;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.98) !important;
  transform-origin: center bottom;
  transition:
    opacity 260ms ease,
    transform 300ms cubic-bezier(.2, .8, .2, 1);
}

.sn-hero-cheer-bubble::before,
.sn-hero-encouragement-ribbon::before {
  content: "✨";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(116, 78, 17, .2));
}

/* Remove the old speech-bubble tail. */
.sn-hero-cheer-bubble::after,
.sn-hero-encouragement-ribbon::after {
  content: none !important;
  display: none !important;
}

.sn-hero-cheer-bubble.is-visible,
.sn-hero-encouragement-ribbon.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) !important;
}

.sn-hero-cheer-bubble.is-positioning,
.sn-hero-encouragement-ribbon.is-positioning {
  transition: none !important;
}

/* Keep the ribbon compact in portrait tablet and phone layouts. */
@media (max-width: 720px) {
  .sn-hero-cheer-bubble,
  .sn-hero-encouragement-ribbon {
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: min(90%, 320px) !important;
    max-width: calc(100% - 16px) !important;
    padding: 7px 12px 8px 33px;
    border-radius: 13px;
    font-size: clamp(.68rem, 2.45vw, .78rem);
  }

  .sn-hero-cheer-bubble::before,
  .sn-hero-encouragement-ribbon::before {
    left: 10px;
    font-size: .9rem;
  }
}

@media (max-width: 430px) {
  .sn-hero-cheer-bubble,
  .sn-hero-encouragement-ribbon {
    width: calc(100% - 14px) !important;
    max-width: none !important;
    padding-right: 10px;
  }
}

html[data-sn-theme="dark"] .sn-hero-cheer-bubble,
html[data-sn-theme="dark"] .sn-hero-encouragement-ribbon {
  border-color: rgba(117, 216, 255, .42);
  background:
    radial-gradient(circle at 12% 0%, rgba(99, 203, 255, .16), transparent 42%),
    linear-gradient(135deg, rgba(31, 62, 98, .94), rgba(24, 48, 78, .94));
  color: #eef9ff;
  box-shadow:
    0 6px 18px rgba(2, 8, 28, .34),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (prefers-reduced-motion: reduce) {
  .sn-hero-cheer-bubble,
  .sn-hero-encouragement-ribbon {
    transition: opacity 140ms linear;
    transform: translate(-50%, 0) !important;
  }

  .sn-hero-cheer-bubble.is-visible,
  .sn-hero-encouragement-ribbon.is-visible {
    transform: translate(-50%, 0) !important;
  }
}

/* v246 — grown-up multiplication gate for Reading Settings */
.sn-parent-gate-window {
  width: min(420px, calc(100vw - 28px));
  padding: 24px clamp(18px, 5vw, 30px) 22px;
  border: 2px solid rgba(125, 91, 166, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(155deg, #f7f1ff 0%, #eef8ff 50%, #fff8e8 100%);
  box-shadow: 0 24px 70px rgba(52, 38, 86, 0.3);
  text-align: center;
}

.sn-parent-gate-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 7px;
  border: 2px solid rgba(126, 87, 166, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 9px 22px rgba(77, 52, 111, 0.13);
  font-size: 1.72rem;
}

.sn-parent-gate-instructions {
  max-width: 330px;
  margin: 0 auto 15px !important;
  font-size: 0.92rem;
  line-height: 1.42;
}

.sn-parent-gate-form {
  display: grid;
  gap: 13px;
  margin-top: 8px;
}

.sn-parent-gate-question {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 10px 16px;
  border: 2px solid rgba(67, 128, 176, 0.2);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  color: #46305f;
  box-shadow:
    0 10px 24px rgba(48, 70, 110, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  font-family: var(--sn-font-display);
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.sn-parent-gate-answer {
  display: grid;
  gap: 6px;
  color: #51396c;
  font-weight: 800;
  text-align: left;
}

.sn-parent-gate-answer span {
  padding-left: 4px;
  font-size: 0.84rem;
}

.sn-parent-gate-answer input {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 8px 14px;
  border: 2px solid rgba(91, 132, 173, 0.27);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.96);
  color: #26384d;
  font-family: var(--sn-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sn-parent-gate-answer input:focus {
  border-color: #8c69bd;
  box-shadow: 0 0 0 4px rgba(140, 105, 189, 0.14);
}

.sn-parent-gate-submit {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #7956ad, #4f83bf);
  color: white;
  box-shadow: 0 10px 22px rgba(78, 70, 145, 0.24);
  font-family: var(--sn-font-display);
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
}

.sn-parent-gate-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(78, 70, 145, 0.3);
}

.sn-parent-gate-submit:disabled {
  cursor: default;
  opacity: 0.62;
}

.sn-parent-gate-feedback {
  min-height: 1.4em;
  margin: 10px 0 0 !important;
  color: #704d8d !important;
  font-size: 0.86rem;
  font-weight: 800 !important;
}

.sn-parent-gate-feedback.is-error {
  color: #a33b55 !important;
}

.sn-parent-gate-feedback.is-success {
  color: #18714f !important;
}

.sn-parent-gate-form.is-shaking {
  animation: snParentGateShake 320ms ease;
}

#settingsButton.is-parent-locked,
#settingsButton:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  filter: grayscale(0.35) saturate(0.7);
  box-shadow: none;
}

@keyframes snParentGateShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  55% { transform: translateX(5px); }
  78% { transform: translateX(-3px); }
}

@media (max-width: 520px) {
  .sn-parent-gate-window {
    padding: 21px 16px 18px;
    border-radius: 24px;
  }

  .sn-parent-gate-question {
    min-height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-parent-gate-form.is-shaking {
    animation: none;
  }
}


/* v247 — comprehensive correct/incorrect answer history */
#historyOverlay .history-summary {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

#historyOverlay .sn-history-question {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(91, 68, 122, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

#historyOverlay .sn-history-question.is-correct {
  border-color: rgba(58, 143, 85, 0.3);
  background: rgba(232, 249, 237, 0.78);
}

#historyOverlay .sn-history-question.is-incorrect {
  border-color: rgba(190, 84, 124, 0.26);
  background: rgba(255, 240, 246, 0.78);
}

#historyOverlay .sn-history-question p {
  margin: 0;
}

#historyOverlay .sn-history-question-number {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#historyOverlay .sn-history-answer {
  font-weight: 850;
}

#historyOverlay .sn-history-result {
  margin-top: 2px !important;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

@media (max-width: 520px) {
  #historyOverlay .history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v248 — selectable reading buddies, sized so 3 fit in one row */
.sn-hero-picker-window {
  width: min(860px, calc(100vw - 28px));
}
.sn-hero-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: stretch;
}
.sn-hero-choice {
  padding: 10px 8px 14px;
}
.sn-hero-choice-art {
  height: 190px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(239,246,255,.9), rgba(255,247,237,.85));
}
.sn-hero-choice-art .sn-hero-art-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 7px 10px rgba(15,55,91,.14));
}
@media (max-width: 760px) {
  .sn-hero-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-hero-choice-art { height: 170px; }
}
@media (max-width: 520px) {
  .sn-hero-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-hero-choice-art { height: 150px; }
}


/* v249 — public reading-buddy switching and first-visit hero choice */
.sn-hair-color-customizer {
  margin: 0.75rem 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(139,92,246,.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(250,245,255,.96), rgba(239,246,255,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.sn-hair-color-customizer.hidden,
.sn-hair-color-customizer[hidden] { display: none !important; }

.sn-hair-color-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.55rem;
  color: #4338ca;
}

.sn-hair-color-heading > div {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 900 .9rem/1.1 var(--sn-font-display);
}

.sn-hair-color-heading small {
  color: #64748b;
  font-size: .7rem;
  font-weight: 750;
}

.sn-hair-color-swatches {
  display: grid;
  grid-template-columns: repeat(9, minmax(54px, 1fr));
  gap: 7px;
}

.sn-hair-color-swatch {
  min-width: 0;
  min-height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 5px 3px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255,255,255,.76);
  color: #475569;
  cursor: pointer;
}

.sn-hair-color-swatch > span {
  width: 27px;
  height: 27px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: var(--sn-hair-swatch);
  box-shadow: 0 0 0 1px rgba(71,85,105,.28), 0 3px 7px rgba(15,23,42,.15);
}

.sn-hair-color-swatch small {
  overflow: hidden;
  max-width: 100%;
  font-size: .61rem;
  font-weight: 800;
  text-overflow: ellipsis;
}

.sn-hair-color-swatch:hover,
.sn-hair-color-swatch:focus-visible { border-color: #a78bfa; background: #fff; }

.sn-hair-color-swatch.is-selected {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #5b21b6;
  box-shadow: 0 4px 10px rgba(124,58,237,.16);
}

html[data-sn-theme="dark"] .sn-hair-color-customizer {
  border-color: #687fc7;
  background: linear-gradient(135deg, #223b63, #292f5d);
}

html[data-sn-theme="dark"] .sn-hair-color-heading,
html[data-sn-theme="dark"] .sn-hair-color-heading small { color: #dbeafe; }

html[data-sn-theme="dark"] .sn-hair-color-swatch { background: #1d3557; color: #e2e8f0; }
html[data-sn-theme="dark"] .sn-hair-color-swatch.is-selected { border-color: #c4b5fd; background: #312e81; }

@media (max-width: 760px) {
  .sn-hair-color-swatches { grid-template-columns: repeat(5, minmax(50px, 1fr)); }
}

@media (max-width: 460px) {
  .sn-hair-color-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .sn-hair-color-swatches { grid-template-columns: repeat(3, minmax(64px, 1fr)); }
}

.sn-shop-buddy-switch-row {
  display: flex;
  justify-content: center;
  margin: 0.45rem 0 0.85rem;
}

.sn-shop-change-hero-button {
  min-height: 2.65rem;
  padding: 0.58rem 1rem;
  border: 2px solid rgba(59, 130, 246, 0.32);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.98));
  color: #1e3a8a;
  box-shadow: 0 5px 13px rgba(37, 99, 235, 0.12);
  font-family: var(--sn-font-display);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.sn-shop-change-hero-button:hover,
.sn-shop-change-hero-button:focus-visible {
  transform: translateY(-1px);
  border-color: #2563eb;
  box-shadow: 0 8px 17px rgba(37, 99, 235, 0.18);
}

.sn-shop-change-hero-button:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.34);
  outline-offset: 2px;
}

/* The picker must sit above the already-open Star Shop when switching there. */
.sn-hero-picker-overlay {
  z-index: 110;
}

.sn-hero-picker-overlay.is-required-selection {
  background: rgba(12, 74, 110, 0.58);
  backdrop-filter: blur(8px);
}

.sn-hero-picker-overlay.is-required-selection .sn-hero-picker-window {
  border-color: #fbbf24;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.28);
}

@media (max-width: 520px) {
  .sn-shop-buddy-switch-row {
    margin-top: 0.35rem;
    margin-bottom: 0.65rem;
  }

  .sn-shop-change-hero-button {
    min-height: 2.5rem;
    padding-inline: 0.85rem;
    font-size: 0.84rem;
  }
}


/* v233 — Lilly unlocks after 50 completed stories */
.sn-hero-choice.is-locked,
.sn-hero-choice.is-locked:hover,
.sn-hero-choice.is-locked:focus-visible {
  cursor: not-allowed;
  transform: none;
  border-color: rgba(100, 116, 139, 0.34);
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(226,232,240,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 5px 14px rgba(51,65,85,.10);
}

.sn-hero-choice.is-locked .sn-hero-choice-art {
  background: linear-gradient(180deg, rgba(226,232,240,.92), rgba(203,213,225,.9));
}

.sn-hero-choice.is-locked .sn-hero-art-image {
  opacity: 0.78;
  filter: grayscale(1) saturate(0) contrast(.9) drop-shadow(0 6px 9px rgba(30,41,59,.12));
}

.sn-hero-choice-lock {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: rgba(51,65,85,.92);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 4px 11px rgba(15,23,42,.22);
}

.sn-hero-choice-progress {
  color: #475569 !important;
}

.sn-hero-choice-unlock-copy {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 24px;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(71,85,105,.10);
  color: #334155;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.15;
}


/* v239 — parent-selectable child-friendly Light and Dark Story Nest backgrounds */
html[data-sn-theme="light"] {
  color-scheme: light;
}

html[data-sn-theme="dark"] {
  color-scheme: dark;
  --sn-bg: #101a3a;
  --sn-panel: #1c2c52;
  --sn-text: #eef8ff;
  --sn-muted: #b9ddf7;
  --sn-accent: #5ee7f2;
  --sn-accent-dark: #9cf5ff;
  --sn-accent-soft: #173d5e;
  --sn-border: #5278a3;
  --sn-shadow: 0 14px 34px rgba(3, 8, 28, 0.42);
  --sn-correct: #bbf7d0;
  --sn-correct-bg: #14532d;
  --sn-wrong: #fecdd3;
  --sn-gradient:
    radial-gradient(circle at 13% 12%, rgba(56, 189, 248, 0.22), transparent 22rem),
    radial-gradient(circle at 88% 14%, rgba(167, 139, 250, 0.22), transparent 25rem),
    radial-gradient(circle at 52% 95%, rgba(45, 212, 191, 0.16), transparent 28rem),
    radial-gradient(circle at 9% 25%, rgba(255,255,255,.88) 0 1px, transparent 1.7px),
    radial-gradient(circle at 26% 8%, rgba(255,255,255,.72) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 71% 21%, rgba(255,255,255,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 91% 38%, rgba(255,255,255,.62) 0 1.1px, transparent 1.8px),
    linear-gradient(180deg, #101a3a 0%, #172554 54%, #12304a 100%);
  --sn-card-bg:
    radial-gradient(circle at 15% 14%, rgba(94, 234, 212, 0.12) 0 4rem, transparent 4.1rem),
    radial-gradient(circle at 86% 12%, rgba(129, 140, 248, 0.14) 0 3rem, transparent 3.1rem),
    linear-gradient(165deg, #1c3157 0%, #173650 48%, #202a52 100%);
}

html[data-sn-theme="dark"] body {
  background: var(--sn-gradient);
}

html[data-sn-theme="dark"] .sn-blob {
  opacity: .48;
  filter: blur(1px) saturate(1.15);
}
html[data-sn-theme="dark"] .sn-blob-a { background: #155e75; }
html[data-sn-theme="dark"] .sn-blob-b { background: #4338ca; }
html[data-sn-theme="dark"] .sn-blob-c { background: #0f766e; }
html[data-sn-theme="dark"] .sn-float {
  opacity: .86;
  filter: drop-shadow(0 0 9px rgba(125, 211, 252, .55));
}

html[data-sn-theme="dark"] .sn-stat-stars {
  color: #fff7d6;
  border-color: #a16207;
  background: linear-gradient(180deg, #5f4316, #3b2d18);
}
html[data-sn-theme="dark"] .sn-stat-streak {
  color: #cffafe;
  border-color: #0e7490;
  background: linear-gradient(180deg, #164e63, #15394a);
}
html[data-sn-theme="dark"] .sn-stat-stories {
  color: #e0e7ff;
  border-color: #6366f1;
  background: linear-gradient(180deg, #37306d, #252750);
}

html[data-sn-theme="dark"] .sn-scene-stage {
  background: rgba(17, 34, 64, .82);
  box-shadow: inset 0 0 0 1px rgba(186, 230, 253, .16), var(--sn-shadow);
}

html[data-sn-theme="dark"] .sn-window {
  border-color: #38bdf8;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, #20365f, #172b4c);
  box-shadow: 0 24px 60px rgba(1, 5, 20, .58);
}
html[data-sn-theme="dark"] .sn-overlay {
  background: rgba(3, 8, 28, .68);
}
html[data-sn-theme="dark"] .sn-close,
html[data-sn-theme="dark"] .sn-settings-grid select,
html[data-sn-theme="dark"] .sn-read-button,
html[data-sn-theme="dark"] .sn-secondary,
html[data-sn-theme="dark"] .sn-icon-button {
  border-color: var(--sn-border);
  background: #22375d;
  color: var(--sn-text);
}
html[data-sn-theme="dark"] .sn-settings-grid select {
  background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04));
}
html[data-sn-theme="dark"] .sn-celebration-next {
  background: #20365f;
  color: #cffafe;
}

html[data-sn-theme="dark"] .sn-passage-shell-v3 {
  background: #172a48;
  color: #f1f7ff;
}
html[data-sn-theme="dark"] .sn-line-btn {
  color: #f1f7ff;
}
html[data-sn-theme="dark"] .sn-line-btn:hover,
html[data-sn-theme="dark"] .sn-line-btn:focus-visible {
  background: rgba(56, 189, 248, .14);
}
html[data-sn-theme="dark"] .sn-line-btn.active {
  background: rgba(94, 234, 212, .16);
  color: #ecfeff;
}

.sn-theme-setting small {
  display: block;
  margin-top: 1px;
  color: var(--sn-muted);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  html[data-sn-theme="dark"] .sn-float { filter: none; }
}

/* v240 — dark-theme contrast and surface audit */
html[data-sn-theme="dark"] {
  --sn-text: #f8fbff;
  --sn-muted: #c9e3f6;
  --sn-accent-dark: #8eeaff;
  --sn-border: #6b96bf;
}

html[data-sn-theme="dark"] .sn-topbar,
html[data-sn-theme="dark"] .sn-footer,
html[data-sn-theme="dark"] .sn-shell {
  color: var(--sn-text);
}

html[data-sn-theme="dark"] .sn-subtitle,
html[data-sn-theme="dark"] .sn-footer p,
html[data-sn-theme="dark"] .sn-help,
html[data-sn-theme="dark"] .sn-stat span,
html[data-sn-theme="dark"] .sn-passage-hint,
html[data-sn-theme="dark"] .sn-settings-intro,
html[data-sn-theme="dark"] .sn-hero-picker-intro,
html[data-sn-theme="dark"] .sn-comprehension-word-hint,
html[data-sn-theme="dark"] .sn-comprehension-feedback,
html[data-sn-theme="dark"] .sn-word-helper-caption,
html[data-sn-theme="dark"] .sn-word-parts-label,
html[data-sn-theme="dark"] .sn-hero-wardrobe-copy,
html[data-sn-theme="dark"] .sn-wardrobe-live-preview-info p,
html[data-sn-theme="dark"] .sn-wardrobe-header-preview > p,
html[data-sn-theme="dark"] .sn-theme-setting small {
  color: #c9e3f6 !important;
}

/* Main reading and practice surfaces */
html[data-sn-theme="dark"] .sn-story-card-v3,
html[data-sn-theme="dark"] .sn-practice-card-v3 {
  border-color: #476e98;
  background: linear-gradient(165deg, #1c3157 0%, #172b4c 100%);
  color: var(--sn-text);
  box-shadow: 0 12px 32px rgba(2, 8, 28, .35);
}

html[data-sn-theme="dark"] .sn-passage-shell-v3 {
  background: #132743;
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn {
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn:first-child,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn:hover,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn:focus-visible {
  background: #203b61;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn::before {
  background: #274d76;
  color: #bcecff;
}

html[data-sn-theme="dark"] .sn-story-title,
html[data-sn-theme="dark"] .sn-practice-heading h2,
html[data-sn-theme="dark"] .sn-tips-card h3,
html[data-sn-theme="dark"] .sn-grade-awards h4,
html[data-sn-theme="dark"] .sn-mic-label,
html[data-sn-theme="dark"] .sn-wardrobe-live-preview-info h3,
html[data-sn-theme="dark"] .sn-wardrobe-header-preview h3 {
  color: #eef8ff;
}

html[data-sn-theme="dark"] .sn-practice-heading p,
html[data-sn-theme="dark"] .sn-story-page-status,
html[data-sn-theme="dark"] .sn-bottom-cheer {
  color: #c9e3f6;
}

html[data-sn-theme="dark"] .sn-current-grade {
  border-color: #5480aa !important;
  background: #223b62 !important;
}

html[data-sn-theme="dark"] .sn-current-grade select {
  color: #bcecff;
}

html[data-sn-theme="dark"] .sn-action-row-v3 button,
html[data-sn-theme="dark"] .sn-story-page-button {
  border-color: #4f86b7;
  background: #213a61;
  color: #d9f3ff;
}

html[data-sn-theme="dark"] .sn-action-row-v3 .sn-line-mode-v3 {
  border-color: #6b7f99;
  color: #e4edf7;
}

html[data-sn-theme="dark"] .sn-tips-card {
  border-color: #3f739e;
  background: linear-gradient(145deg, #183754, #19304f);
  color: #e8f6ff;
}

html[data-sn-theme="dark"] .sn-tips-card p {
  color: #d5eafa;
}

/* Story Check and word-helper contrast */
html[data-sn-theme="dark"] .sn-comprehension-choice {
  border-color: #5d83aa;
  background: #20385e;
  color: #f8fbff;
  box-shadow: 0 5px 14px rgba(1, 7, 25, .26);
}

html[data-sn-theme="dark"] .sn-comprehension-choice:hover,
html[data-sn-theme="dark"] .sn-comprehension-choice:has(.sn-comprehension-choice-select:focus-visible) {
  border-color: #76d9f0;
  background: #294b73;
}

html[data-sn-theme="dark"] .sn-comprehension-choice.is-wrong {
  border-color: #fb7185;
  background: #5b2334;
  color: #ffe4e6;
}

html[data-sn-theme="dark"] .sn-comprehension-choice.is-correct {
  border-color: #4ade80;
  background: #14532d;
  color: #dcfce7;
}

html[data-sn-theme="dark"] .sn-comprehension-feedback.is-hint {
  color: #fed7aa;
}

html[data-sn-theme="dark"] .sn-comprehension-support {
  border-color: #38bdf8;
  background: linear-gradient(135deg, #17395a, #164e4a);
  color: #e0f2fe;
}

html[data-sn-theme="dark"] .sn-comprehension-support.is-guided {
  border-color: #a78bfa;
  background: linear-gradient(135deg, #33245f, #55311d);
}

html[data-sn-theme="dark"] .sn-comprehension-support-title {
  color: #7dd3fc;
}

html[data-sn-theme="dark"] .sn-comprehension-explanation {
  border-top-color: rgba(221, 214, 254, 0.24);
  color: #ddd6fe;
}

html[data-sn-theme="dark"] .sn-comprehension-evidence-audio {
  border-color: #38bdf8;
  background: #17395a;
  color: #e0f2fe;
}

html[data-sn-theme="dark"] .sn-comprehension-evidence-audio:hover,
html[data-sn-theme="dark"] .sn-comprehension-evidence-audio:focus-visible,
html[data-sn-theme="dark"] .sn-comprehension-evidence-audio.is-speaking {
  border-color: #7dd3fc;
  background: #25537a;
}

html[data-sn-theme="dark"] .sn-comprehension-choice.is-eliminated {
  border-color: #64748b;
  background: #26364b;
  color: #cbd5e1;
}

html[data-sn-theme="dark"] .sn-comprehension-choice-removed {
  color: #cbd5e1;
}

html[data-sn-theme="dark"] .sn-word-helper-modal,
html[data-sn-theme="dark"] .sn-word-card {
  border-color: #5f8db6;
  background: #1b3459;
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-word-helper-close,
html[data-sn-theme="dark"] .sn-word-sound-out,
html[data-sn-theme="dark"] .sn-word-blend,
html[data-sn-theme="dark"] .sn-word-blend strong,
html[data-sn-theme="dark"] .sn-word-blend b,
html[data-sn-theme="dark"] .sn-word-part {
  color: #bcecff !important;
}

/* Character picker */
html[data-sn-theme="dark"] .sn-hero-choice {
  border-color: #527da7;
  background: linear-gradient(180deg, #243d66, #1b3154);
  color: #f8fbff;
  box-shadow: 0 7px 18px rgba(1, 7, 25, .28);
}

html[data-sn-theme="dark"] .sn-hero-choice:hover,
html[data-sn-theme="dark"] .sn-hero-choice:focus-visible {
  border-color: #70d7ec;
  background: linear-gradient(180deg, #2a4c74, #203a61);
}

html[data-sn-theme="dark"] .sn-hero-choice.is-selected {
  border-color: #4ade80;
  background: linear-gradient(180deg, #1d513e, #153d31);
}

html[data-sn-theme="dark"] .sn-hero-choice strong,
html[data-sn-theme="dark"] .sn-hero-choice small,
html[data-sn-theme="dark"] .sn-hero-choice-progress,
html[data-sn-theme="dark"] .sn-hero-choice-unlock-copy {
  color: #eef8ff !important;
}

html[data-sn-theme="dark"] .sn-hero-choice.is-locked,
html[data-sn-theme="dark"] .sn-hero-choice.is-locked:hover,
html[data-sn-theme="dark"] .sn-hero-choice.is-locked:focus-visible {
  border-color: #64748b;
  background: #26364f;
  color: #d6e2ee;
  opacity: .86;
}

html[data-sn-theme="dark"] .sn-change-hero-button,
html[data-sn-theme="dark"] .sn-shop-change-hero-button {
  border-color: #5d8fb8;
  background: linear-gradient(180deg, #294b73, #203b61);
  color: #e8f7ff;
}

/* Star Shop */
html[data-sn-theme="dark"] .sn-hero-wardrobe-header,
html[data-sn-theme="dark"] .sn-hero-wardrobe-header.is-previewing,
html[data-sn-theme="dark"] .sn-wardrobe-live-preview {
  border-color: #687fc7;
  background: linear-gradient(135deg, #223b63, #292f5d);
  color: #f8fbff;
  box-shadow: 0 9px 22px rgba(1, 6, 24, .3);
}

html[data-sn-theme="dark"] .sn-hero-wardrobe-summary,
html[data-sn-theme="dark"] .sn-shop-stat strong,
html[data-sn-theme="dark"] .sn-wardrobe-live-preview-eyebrow,
html[data-sn-theme="dark"] .sn-wardrobe-tier-heading {
  color: #9ee9ff;
}

html[data-sn-theme="dark"] .sn-wardrobe-tab,
html[data-sn-theme="dark"] .sn-shop-filter,
html[data-sn-theme="dark"] .sn-wardrobe-default-button {
  border-color: #5c84ad;
  background: #213a60;
  color: #e8f7ff;
}

html[data-sn-theme="dark"] .sn-wardrobe-tab span,
html[data-sn-theme="dark"] .sn-wardrobe-default-label,
html[data-sn-theme="dark"] .sn-wardrobe-default-button small,
html[data-sn-theme="dark"] .sn-wardrobe-tier-heading span,
html[data-sn-theme="dark"] .sn-wardrobe-item small,
html[data-sn-theme="dark"] .sn-wardrobe-empty,
html[data-sn-theme="dark"] .sn-shop-preview-cancel {
  color: #c9e3f6;
}

html[data-sn-theme="dark"] .sn-wardrobe-tab.is-active,
html[data-sn-theme="dark"] .sn-shop-filter.is-active {
  border-color: #f6b85b;
  background: linear-gradient(180deg, #654620, #4b341a);
  color: #fff1c2;
}

html[data-sn-theme="dark"] .sn-wardrobe-item {
  border-color: #557fa8;
  background: linear-gradient(180deg, #263f68, #1d3458);
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-wardrobe-item.is-for-sale,
html[data-sn-theme="dark"] .sn-wardrobe-item.needs-stars {
  border-color: #d9a441;
  background: linear-gradient(180deg, #56401f, #3c301d);
  color: #fff3c4;
}

html[data-sn-theme="dark"] .sn-wardrobe-item.is-equipped,
html[data-sn-theme="dark"] .sn-wardrobe-default-button.is-equipped {
  border-color: #4ade80;
  background: linear-gradient(180deg, #1f5a43, #173f32);
  color: #dcfce7;
}

html[data-sn-theme="dark"] .sn-wardrobe-item.is-equipped small {
  color: #bbf7d0;
}

html[data-sn-theme="dark"] .sn-wardrobe-price {
  background: #7c4a12;
  color: #fff7d6;
}

html[data-sn-theme="dark"] .sn-wardrobe-new-badge {
  border-color: #d8b4fe;
  background: #5b2d82;
  color: #f3e8ff;
}

html[data-sn-theme="dark"] .sn-shop-preview-primary:disabled {
  background: #475569;
  color: #e2e8f0;
}

/* Settings, parent gate, and history */
html[data-sn-theme="dark"] .sn-settings-grid label,
html[data-sn-theme="dark"] .sn-parent-gate-window label,
html[data-sn-theme="dark"] .sn-parent-gate-window h2,
html[data-sn-theme="dark"] .sn-parent-gate-window strong {
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-parent-gate-question,
html[data-sn-theme="dark"] .sn-parent-gate-answer {
  border-color: #5d83aa;
  background: #20385e;
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-parent-gate-answer input {
  border-color: #6b96bf;
  background: #102442;
  color: #f8fbff;
}

html[data-sn-theme="dark"] .sn-parent-gate-answer input::placeholder {
  color: #aac8df;
}

html[data-sn-theme="dark"] .sn-parent-gate-feedback {
  color: #d8eafa !important;
}

html[data-sn-theme="dark"] .sn-parent-gate-feedback.is-error {
  color: #fecdd3 !important;
}

html[data-sn-theme="dark"] .sn-parent-gate-feedback.is-success {
  color: #bbf7d0 !important;
}

html[data-sn-theme="dark"] #historyOverlay .sn-history-question {
  border-color: #55799f;
  background: #20385e;
  color: #f8fbff;
}

html[data-sn-theme="dark"] #historyOverlay .sn-history-question.is-correct {
  border-color: #3f9f68;
  background: #194a35;
}

html[data-sn-theme="dark"] #historyOverlay .sn-history-question.is-incorrect {
  border-color: #c76582;
  background: #54283a;
}

html[data-sn-theme="dark"] #historyOverlay .sn-history-question-number,
html[data-sn-theme="dark"] #historyOverlay .sn-history-result,
html[data-sn-theme="dark"] #historyOverlay .sn-history-question p {
  color: #d5eafa;
}

html[data-sn-theme="dark"] #historyOverlay .sn-history-answer {
  color: #f8fbff;
}

/* =========================================================
   Story Nest v241 — dark-theme reading plane and labels
   High-contrast night reading surface, character name, and
   encouragement banner. These rules intentionally come last
   so the light paper-page styles cannot override dark mode.
   ========================================================= */
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-passage-shell,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-passage-shell-v3 {
  background:
    radial-gradient(circle at 14% 8%, rgba(83, 155, 215, .16), transparent 32%),
    linear-gradient(180deg, #183453 0%, #112844 56%, #0d213a 100%) !important;
  color: #f7fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(187, 229, 255, .16),
    inset 0 0 0 1px rgba(91, 145, 190, .18) !important;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-passage,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn .sn-word {
  color: #f7fbff !important;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn:first-child {
  background: #234568 !important;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn:hover,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn:focus-visible {
  background: #294d73 !important;
  color: #ffffff !important;
}

html[data-sn-theme="dark"] .sn-passage.line-mode-active .sn-line-btn.active,
html[data-sn-theme="dark"] .sn-passage.line-mode-active .sn-line-btn.reading-line,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-line-btn.active {
  border-color: #75d8ff !important;
  background: #2b557f !important;
  color: #ffffff !important;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-word:hover,
html[data-sn-theme="dark"] .sn-story-card-v3 .sn-word:focus-visible {
  background: rgba(250, 204, 21, .28) !important;
  color: #fffbea !important;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-word.read {
  background: rgba(56, 189, 248, .25) !important;
  color: #f7fbff !important;
}

html[data-sn-theme="dark"] .sn-story-card-v3 .sn-word.reading {
  background: #fde047 !important;
  color: #5b3508 !important;
}

html[data-sn-theme="dark"] #companionHeroName,
html[data-sn-theme="dark"] .sn-companion-practice-heading .sn-practice-title h2 {
  color: #f4fbff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(104, 213, 255, .18);
}

html[data-sn-theme="dark"] .sn-bottom-cheer {
  border: 1px solid #4f83ad !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(99, 203, 255, .15), transparent 40%),
    linear-gradient(135deg, #213f66 0%, #193556 100%) !important;
  color: #e7f6ff !important;
  box-shadow: 0 8px 20px rgba(3, 12, 33, .28);
}

html[data-sn-theme="dark"] .sn-bottom-cheer strong {
  color: #ffe69a !important;
}

/* v82 — dark-theme companion name header */
html[data-sn-theme="dark"] .sn-companion-practice-heading {
  border: 1px solid #426f98 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(84, 193, 240, .14), transparent 42%),
    linear-gradient(135deg, #1b3556 0%, #11263f 100%) !important;
  box-shadow:
    0 8px 18px rgba(3, 12, 33, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

html[data-sn-theme="dark"] .sn-companion-practice-heading > span {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* v83 — dark-theme companion card surface
   Match the full hero box to the dark name header. */
html[data-sn-theme="dark"] .sn-companion-panel {
  border-color: #426f98 !important;
  background:
    radial-gradient(circle at 15% 12%, rgba(99, 203, 255, .12) 0 4px, transparent 5px),
    radial-gradient(circle at 84% 22%, rgba(167, 139, 250, .10) 0 3px, transparent 4px),
    linear-gradient(160deg, #1b3556 0%, #142b49 52%, #10243d 100%) !important;
  box-shadow:
    0 12px 32px rgba(2, 8, 28, .38),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html[data-sn-theme="dark"] .sn-companion-panel::before {
  background: rgba(67, 111, 152, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(143, 211, 245, .05);
}

html[data-sn-theme="dark"] .sn-companion-stage:not(.has-buddy-background) {
  background:
    radial-gradient(circle at 50% 100%, rgba(86, 157, 211, .18), transparent 58%),
    linear-gradient(180deg, rgba(27, 53, 86, .18), rgba(9, 28, 49, .30)) !important;
}

/* v84 — preserve equipped award backgrounds in the dark hero box */
html[data-sn-theme="dark"] .sn-companion-stage.has-buddy-background {
  background-color: #10243d !important;
  background-image: var(--sn-buddy-background-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

html[data-sn-theme="dark"] .sn-companion-stage.has-buddy-background::after {
  background: linear-gradient(
    180deg,
    rgba(8, 23, 41, .04),
    rgba(8, 23, 41, .02) 48%,
    rgba(8, 23, 41, .10)
  ) !important;
}

html[data-sn-theme="dark"] .sn-companion-practice-heading {
  border-bottom-color: rgba(111, 166, 207, .42) !important;
}

/* v254 — lift Issy's 2-star outfit thumbnails so the bottom labels remain visible */
.sn-wardrobe-item[data-category="clothes"][data-preview-item="pixelplayer"],
.sn-wardrobe-item[data-category="clothes"][data-preview-item="emostarlace"],
.sn-wardrobe-item[data-category="clothes"][data-preview-item="ghostymist"],
.sn-wardrobe-item[data-category="clothes"][data-preview-item="unicorndream"],
.sn-wardrobe-item[data-category="clothes"][data-preview-item="blockbuilder"] {
  padding-top: 10px;
  padding-bottom: 10px;
}
.sn-wardrobe-item[data-category="clothes"][data-preview-item="pixelplayer"] .sn-wardrobe-preview,
.sn-wardrobe-item[data-category="clothes"][data-preview-item="emostarlace"] .sn-wardrobe-preview,
.sn-wardrobe-item[data-category="clothes"][data-preview-item="ghostymist"] .sn-wardrobe-preview,
.sn-wardrobe-item[data-category="clothes"][data-preview-item="unicorndream"] .sn-wardrobe-preview,
.sn-wardrobe-item[data-category="clothes"][data-preview-item="blockbuilder"] .sn-wardrobe-preview {
  transform: translateY(-5px);
  margin-bottom: -5px;
}

/* v256 — hold-to-move reading buddy and pet; no on-screen arrange controls */
.sn-companion-stage .sn-companion-hero.sn-buddy-layout-positioned {
  position: absolute !important;
  left: var(--sn-buddy-hero-x, 50%) !important;
  top: var(--sn-buddy-hero-y, 58%) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

.sn-companion-stage .sn-hero-pet-layer.sn-buddy-layout-positioned {
  position: absolute !important;
  left: var(--sn-buddy-pet-left, 0px) !important;
  top: var(--sn-buddy-pet-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* The hero is no longer a Star Shop shortcut. The gift button remains the shop entry. */
.sn-companion-stage #nestHero,
.sn-companion-stage .sn-hero-pet-layer {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: none !important;
}

.sn-companion-stage #nestHero {
  cursor: default !important;
}

/* A quiet confirmation appears only after the hold gesture activates. */
.sn-companion-stage.is-arranging-buddy {
  outline: 2px dashed rgba(14, 165, 233, .62);
  outline-offset: -5px;
}

.sn-companion-stage .is-dragging-buddy {
  cursor: grabbing !important;
  z-index: 20 !important;
  filter: drop-shadow(0 9px 15px rgba(14, 116, 144, .28));
}

.sn-companion-stage .sn-hero-pet-layer.is-dragging-buddy {
  pointer-events: auto !important;
  z-index: 24 !important;
  filter: drop-shadow(0 8px 14px rgba(147, 51, 234, .3));
}

.sn-companion-stage .is-dragging-buddy::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px dashed rgba(14, 165, 233, .72);
  border-radius: 16px;
  pointer-events: none;
}

.sn-companion-stage .sn-hero-pet-layer.is-dragging-buddy::after {
  border-color: rgba(168, 85, 247, .76);
  border-radius: 999px;
}

.sn-companion-stage .is-dragging-buddy .sn-hero-variant-image,
.sn-companion-stage .is-dragging-buddy .sn-hero-base-image,
.sn-companion-stage .is-dragging-buddy .sn-hero-static-fallback,
.sn-companion-stage .sn-hero-pet-layer.is-dragging-buddy .sn-hero-pet-image {
  pointer-events: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .sn-companion-stage .is-dragging-buddy {
    animation: sn-buddy-hold-ready 180ms ease-out both;
  }
}

@keyframes sn-buddy-hold-ready {
  from { filter: drop-shadow(0 0 0 rgba(14, 116, 144, 0)); }
  to { filter: drop-shadow(0 9px 15px rgba(14, 116, 144, .28)); }
}

/* v258 — taller, matched story and reading-buddy panels in tablet landscape */
@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) and (max-height: 1024px) {
  /* Increase the panoramic story art by about 11% without changing the six-line passage. */
  .sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 8 / 3 !important;
  }

  /* The inline height synchronizer matches this complete panel to the banner. */
  .sn-right-column > .sn-companion-panel {
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .sn-right-column > .sn-companion-panel .sn-companion-stage {
    min-height: 0 !important;
  }
}

/* =========================================================
   v259 — mobile + portrait rendering correction
   Keeps phone navigation, story art, and tablet reading buddy
   in their intended responsive layout without affecting
   tablet landscape or desktop.
   ========================================================= */

/* Phone portrait: give the title and navigation their own rows. */
@media (orientation: portrait) and (max-width: 699px) {
  .sn-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .sn-topbar > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sn-topbar h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 1.04 !important;
  }

  .sn-controls.sn-fun-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    justify-content: stretch !important;
  }

  .sn-controls.sn-fun-buttons .sn-icon-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: 1.45rem !important;
  }
}

/* Phone portrait: override the later panoramic desktop banner rule. */
@media (orientation: portrait) and (max-width: 600px) {
  .sn-story-card-v3 .sn-scene-stage.sn-scene-stage-v3 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }

  .sn-story-card-v3 .sn-hero-sound {
    top: 10px !important;
    right: 10px !important;
  }
}

/* Tablet portrait: keep the buddy heading above one full-width hero stage. */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1100px) {
  .sn-right-column > .sn-companion-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(250px, 1fr) !important;
    place-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }

  .sn-right-column > .sn-companion-panel > .sn-companion-practice-heading {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .sn-right-column > .sn-companion-panel > .sn-companion-stage {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(250px, 48vw, 370px) !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
}


/* =========================================================
   v260 — match the lower practice panel to the equipped
   reading-buddy background with a soft, readable neutral.
   ========================================================= */
.sn-practice-card-v3.sn-buddy-neutral-synced {
  border-color: var(--sn-buddy-neutral-border, #cfe3f5) !important;
  background:
    linear-gradient(
      180deg,
      var(--sn-buddy-neutral-highlight, #ffffff) 0%,
      var(--sn-buddy-neutral-bg, #f7fafc) 100%
    ) !important;
  box-shadow:
    0 12px 32px var(--sn-buddy-neutral-shadow, rgba(14, 92, 145, .12)) !important;
  transition:
    background-color .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

html[data-sn-theme="dark"] .sn-practice-card-v3.sn-buddy-neutral-synced {
  border-color: var(--sn-buddy-neutral-dark-border, #476e98) !important;
  background:
    linear-gradient(
      165deg,
      var(--sn-buddy-neutral-dark-top, #1c3157) 0%,
      var(--sn-buddy-neutral-dark-bottom, #172b4c) 100%
    ) !important;
  box-shadow: 0 12px 32px rgba(2, 8, 28, .38) !important;
}