/* ===========================================================
   Magic Words: Grow Your Brain Bigger
   Soft, rounded, friendly for young kids (~5–8).
   Big type, big targets. Reduced-motion + print aware.
   =========================================================== */
:root{
  --sky:#3f9ad6; --sky-deep:#2c73b0; --sun:#ffc83d; --sun-deep:#e9ad12;
  --leaf:#46b06a; --leaf-deep:#2b8149; --coral:#ff8a6b; --grape:#9b6ad6;
  --ink:#2c2640; --cream:#fff8ee; --paper:#ffffff; --muted:#6b6480;
  --radius:22px; --shadow:0 8px 0 rgba(44,38,64,.12), 0 10px 24px rgba(44,38,64,.12);
  --maxw:820px;
  --font:"Comic Sans MS","Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font); font-size:1.18rem; line-height:1.6;
  color:var(--ink); background:var(--cream);
  background-image:radial-gradient(rgba(63,154,214,.12) 1px, transparent 1px);
  background-size:22px 22px;
}
img{ max-width:100%; height:auto; display:block; }
h1{ font-size:2.1rem; line-height:1.15; }
h2{ font-size:1.7rem; }
h3{ font-size:1.45rem; margin:0; }
a{ color:var(--sky-deep); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-999px; top:0; z-index:100; background:var(--sun); color:var(--ink); padding:.6rem 1rem; font-weight:800; border-radius:0 0 12px 0; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:4px solid var(--ink); outline-offset:3px; }
.hidden{ display:none !important; }

/* header / nav */
.site-header{ position:sticky; top:0; z-index:50; background:var(--sky); }
.nav{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; padding:.7rem 1rem; }
.brand{ color:#fff; font-weight:800; font-size:1.3rem; text-decoration:none; margin-right:auto; }
.nav-links{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.nav-links a{ color:#fff; text-decoration:none; font-weight:700; padding:.35rem .6rem; border-radius:12px; }
.nav-links a:hover,.nav-links a:focus{ background:var(--sky-deep); }
.founder-badge{ display:inline-flex; align-items:center; padding:.3rem .7rem; border:1.5px solid rgba(255,255,255,.55); border-radius:999px; font-size:.78rem; font-weight:700; color:#fff; white-space:nowrap; }

/* panels */
.panel{ background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem; margin:1.3rem auto; max-width:var(--maxw); }
main{ padding:0 1rem 2rem; }

/* hero — Warm Split: text leads, photo card tilted with a backer card behind it */
html,body{ overflow-x:hidden; }
.hero{ margin-top:1.4rem; display:grid; gap:1rem; background:linear-gradient(160deg,#eaf5ff,#fff3f0); position:relative; padding:.4rem; }
.hero-art{ position:relative; min-width:0; margin:14px 10px; }
.hero-art::before{
  content:""; position:absolute; inset:0; border-radius:18px;
  background:var(--sky-deep); transform:rotate(4deg); z-index:0;
}
.hero-art img, .hero-art video{
  position:relative; z-index:1; border-radius:18px; width:100%; max-height:360px;
  object-fit:contain; object-position:center; background:#eef3f7; box-shadow:var(--shadow);
  transform:rotate(-4deg); border:6px solid #fff;
}
.hero-text{ min-width:0; }
.hero h1{ margin:.2rem 0; color:var(--sky-deep); }
.kicker{ display:inline-block; background:var(--sun); color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; padding:.3rem .7rem; border-radius:999px; margin:0; }
.lead{ font-size:1.2rem; }
.credit{ margin:.6rem 0 0; font-weight:700; color:var(--sky-deep); font-size:.95rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.6rem; }
.btn{ display:inline-block; text-decoration:none; cursor:pointer; font-weight:800; font-size:1.05rem; padding:.8rem 1.3rem; border-radius:999px; border:0; }
.btn-primary{ background:var(--sun); color:var(--ink); box-shadow:0 5px 0 var(--sun-deep); }
.btn-ghost{ background:#fff; color:var(--sky-deep); box-shadow:0 5px 0 #d6e6f4; }
.btn:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }
@media (min-width:720px){ .hero{ grid-template-columns:2fr 3fr; align-items:center; } }

/* Brain-O-Meter + Bloom */
.meter-wrap{ max-width:var(--maxw); margin:0 auto; padding:.5rem; text-align:center; }
.meter-label{ font-weight:800; font-size:1.15rem; margin:0 0 .2rem; color:var(--grape); }
.bloom-row{ height:84px; display:flex; align-items:flex-end; justify-content:center; }
.bloom{ font-size:42px; line-height:1; display:inline-block; transition:transform .5s cubic-bezier(.2,1.4,.4,1), filter .4s; transform:scale(1); }
.bloom.bump{ animation:bloomPop .6s ease; }
.meter{ height:24px; background:#eaf0e7; border-radius:999px; overflow:hidden; max-width:480px; margin:.4rem auto 0; box-shadow:inset 0 2px 4px rgba(0,0,0,.08); }
#meter-fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--leaf),#7ad29a); transition:width .5s ease; }
@media (prefers-reduced-motion: reduce){ #meter-fill,.bloom{ transition:none; } }
#meter-text{ margin:.4rem 0 0; font-weight:700; }

/* section headings */
.section-heading{ max-width:var(--maxw); margin:1.4rem auto 0; text-align:center; }
.section-heading h2{ display:inline-block; background:var(--grape); color:#fff; padding:.4rem 1.1rem; border-radius:999px; box-shadow:0 5px 0 #7a4fb5; }

/* episodes */
.episodes{ display:block; }
.episode .ep-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.ep-num{ background:var(--coral); color:var(--ink); font-weight:800; padding:.2rem .8rem; border-radius:999px; font-size:.85rem; }
.ep-art{ position:relative; margin-bottom:.8rem; }
.ep-art img{ border-radius:18px; width:100%; max-height:340px; object-fit:contain; object-position:center; background:#eef3f7; box-shadow:var(--shadow); }
.ep-art video{ border-radius:18px; width:100%; max-height:340px; object-fit:contain; object-position:center; background:#eef3f7; box-shadow:var(--shadow);  display:block; }
.caption{ font-size:1.2rem; margin:.2rem 0 .6rem; }
.lesson{ background:#eef7ff; border-left:8px solid var(--sky); padding:.6rem .9rem; border-radius:0 14px 14px 0; margin:.6rem 0; }
.say{ font-weight:700; color:var(--grape); background:#f6f0ff; border-radius:14px; padding:.6rem .9rem; }

/* activities */
.activity{ background:#fff9f0; border:3px dashed var(--sun); border-radius:18px; padding:1rem; margin:.8rem 0; }
.activity-title{ font-weight:800; margin:0 0 .5rem; color:var(--sky-deep); font-size:1.2rem; }
.big-out{ margin:.6rem 0 0; font-weight:800; font-size:1.15rem; min-height:1.2em; color:var(--ink); }

/* tappable buttons (big for little fingers) */
.grow-btn,.sort-btn,.flip-card,.choice-btn,.say-btn,.breath-btn{
  cursor:pointer; font-family:inherit; font-weight:800; font-size:1.1rem;
  background:#fff; color:var(--ink); border:0; border-radius:16px;
  padding:.85rem 1.1rem; box-shadow:0 5px 0 #e7dcc6; text-align:center;
}
.sort-row,.flip-row,.choice-row,.say-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.grow-btn{ font-size:1.6rem; background:var(--grape); color:#fff; box-shadow:0 6px 0 #7a4fb5; }
.grow-btn:active{ transform:translateY(3px); }
.sort-btn:hover,.choice-btn:hover,.say-btn:hover,.flip-card:hover{ background:var(--sun); }
.sort-btn.yes{ background:var(--leaf-deep); color:#fff; box-shadow:0 5px 0 #2f8a4f; }
.sort-btn.no{ background:#ffe1d8; }
.flip-card.flipped{ background:var(--leaf-deep); color:#fff; box-shadow:0 5px 0 #2f8a4f; }
.choice-btn.good{ background:var(--leaf-deep); color:#fff; box-shadow:0 5px 0 #2f8a4f; }
.choice-btn.soft{ background:#ffe1d8; }
.say-btn{ background:var(--sky-deep); color:#fff; box-shadow:0 5px 0 var(--sky-deep); }
.say-btn.spoke{ background:var(--leaf-deep); box-shadow:0 5px 0 #2f8a4f; }

/* breathing buddy (Bloom) */
.breath-orb {
  width: 139px; height: 141px; margin: 2.2rem auto 2.6rem;
  display: grid; place-items: center;
  /* 4s matches this site's inhale step in script.js — keep them together */
  transform: scale(1); transition: transform 4s ease-in-out;
}
.breath-orb img { width: 100%; }
.breath-orb.inhale,.breath-orb.hold{ transform:scale(1.45); }
.breath-orb.exhale{ transform:scale(1);  transition-duration: 6s; }
.breath-output{ font-weight:800; font-size:1.2rem; min-height:1.2em; color:var(--sky-deep); }

/* complete buttons */
.ep-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.complete-btn{ cursor:pointer; font-family:inherit; font-weight:800; font-size:1.1rem; border:0; border-radius:999px; padding:.8rem 1.4rem; background:var(--sun); color:var(--ink); box-shadow:0 5px 0 var(--sun-deep); }
.complete-btn.done{ background:var(--leaf-deep); color:#fff; box-shadow:0 5px 0 #2f8a4f; }
.complete-btn:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .complete-btn:hover{ transform:none; } }

/* narration button (injected) */
.narrate-btn{ cursor:pointer; font-family:inherit; font-weight:800; font-size:1.05rem; border:0; border-radius:999px; padding:.8rem 1.2rem; background:#fff; color:var(--sky-deep); box-shadow:0 5px 0 #d6e6f4; }
.narrate-btn.speaking{ background:var(--sky); color:#fff; box-shadow:0 5px 0 var(--sky-deep); }

/* finale + finish */
.finale{ background:#fff7ea; }
.finish-wrap{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.finish-msg{ background:var(--sun); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem; font-size:1.4rem; font-weight:800; }

/* guides + privacy */
.guide h3{ color:var(--sky-deep); margin-top:1rem; }
.guide ul{ padding-left:1.2rem; }
.guide li{ margin:.35rem 0; }
.privacy{ background:#eafaf0; }

/* footer */
.site-footer{ background:var(--sky-deep); color:#fff; padding:1.2rem 1rem; text-align:center; }
.site-footer .fine{ font-size:.85rem; color:#d6e9f7; max-width:640px; margin:.5rem auto 0; }

/* reveal + celebration */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.star{ position:fixed; z-index:79; font-size:1.4rem; pointer-events:none; animation:starUp 1s ease-out forwards; }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(140%); background:var(--leaf-deep); color:#fff; font-weight:800; font-size:1.1rem; padding:.8rem 1.3rem; border-radius:999px; box-shadow:var(--shadow); z-index:80; opacity:0; transition:transform .4s ease, opacity .4s ease; }
.toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.hero-orbs{ position:absolute; inset:0; overflow:hidden; border-radius:var(--radius); z-index:0; pointer-events:none; }
.hero > .hero-art, .hero > .hero-text{ position:relative; z-index:1; }
.hero-orb{ position:absolute; border-radius:50%; opacity:.25; filter:blur(1px); animation:drift 15s ease-in-out infinite; }

@keyframes bloomPop{ 0%{ transform:scale(1);} 45%{ transform:scale(1.35);} 100%{ transform:scale(1);} }
@keyframes starUp{ 0%{ opacity:1; transform:translateY(0) scale(.6);} 100%{ opacity:0; transform:translateY(-80px) scale(1.2);} }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(10px,-18px) scale(1.12);} }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in{ opacity:1 !important; transform:none !important; transition:none; }
  .bloom.bump{ animation:none; }
  .breath-orb{ transition:none; }
  .hero-orb{ animation:none; }
  .star{ display:none; }
  .toast{ transition:opacity .2s ease; }
}
@media print{
  .site-header,.site-footer,.meter-wrap,.btn-row,.narrate-btn,.complete-btn,.hero-orbs,.star,.toast{ display:none !important; }
  .panel{ box-shadow:none; }
}

/* McCray Learning Lab branding */
.site-footer .mccray{ font-weight:700; margin:.5rem 0 0; opacity:.95; }
.site-footer .mccray{ font-weight:700; margin:.5rem 0 0; opacity:.95; }

/* ---- Story-spine rollout: guide video, gating, badge ---- */
.video-intro { text-align: center; }
.video-intro h2 { margin-bottom: 1rem; }
.video-wrap { max-width: 680px; margin: 0 auto 1rem; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.16); }
.video-wrap video { display: block; width: 100%; height: auto; background: #eefbe9; }
.episode.locked { opacity: .45; filter: saturate(.55); pointer-events: none; position: relative; }
.lock-note { font-weight: 800; color: var(--leaf-deep, #2e6b2e); background: #eefbe9; border: 2px dashed #bfe0b8; border-radius: 14px; padding: .6rem .9rem; text-align: center; margin: 0 0 .8rem; }
.badge-wrap { background: var(--sun, #ffe9a8); border-radius: var(--radius, 16px); box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.12)); padding: 1.4rem; }
.badge-wrap.hidden { display: none; }
.badge { font-size: 4rem; line-height: 1; animation: badge-pop .8s ease; }
.badge-wrap .finish-msg { background: none; box-shadow: none; padding: .4rem 0 0; }
.grownup-tip { font-weight: 700; color: var(--leaf-deep, #2e6b2e); margin-top: .4rem; }
@keyframes badge-pop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15) rotate(5deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badge { animation: none; } }
.narrate-top { display: inline-block; margin: 0 0 .8rem; }

/* ============================================================
   STORY PLAYER (My Brave Friends-style paged layout)
   Applied only when JS adds body.player-mode; without JS the
   page stays a plain scrolling story.
   ============================================================ */
body.player-mode .section-heading,
body.player-mode .meter-wrap,
body.player-mode .ep-actions,
body.player-mode .lock-note,
body.player-mode .narrate-top,
body.player-mode .nav-links a:not(.lib-link) { display: none !important; }

body.player-mode .episode { opacity: 1 !important; transform: none !important; }
body.player-mode .locked { filter: none; pointer-events: auto; }
body.player-mode .locked button { pointer-events: auto; }

/* every screen hidden unless active */
body.player-mode .hero,
body.player-mode .video-intro,
body.player-mode .episode,
body.player-mode .finish-wrap,
body.player-mode .guide,
body.player-mode .privacy { display: none; }
body.player-mode .screen-active { display: block; max-width: 940px; margin: 0 auto; }
body.player-mode .hero.screen-active { display: grid; }

@keyframes screen-in {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-in-back {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: none; }
}
body.player-mode .screen-active.enter { animation: screen-in .45s ease both; }
body.player-mode .screen-active.enter-back { animation: screen-in-back .45s ease both; }

/* player top bar */
.pbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  max-width: 940px; margin: 0 auto .8rem;
  background: #ffffffee; backdrop-filter: blur(4px);
  border-radius: 0 0 18px 18px; padding: .5rem .8rem;
  box-shadow: var(--shadow);
}
.pbar.hidden { display: none; }
.pbar-btn {
  border: 0; border-radius: 999px; padding: .5rem .9rem;
  font: inherit; font-weight: 700; cursor: pointer;
  background: #eefbe9; color: var(--leaf-deep);
}
.pbar-btn:hover { filter: brightness(.96); }
.pbar-mid { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--leaf-deep); }
.pbar-pip { transition: transform .4s ease; display: inline-block; }
.pbar-meter {
  width: 90px; height: 10px; border-radius: 999px; background: #e4efe0; overflow: hidden; display: inline-block;
}
.pbar-fill { display: block; height: 100%; width: 0; background: var(--leaf-deep, #3c8a3c); border-radius: 999px; transition: width .4s ease; }
.pbar-audio { display: flex; gap: .4rem; }

/* continue button */
.pcontinue {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(90px);
  z-index: 50; border: 0; cursor: pointer;
  font: inherit; font-size: 1.35rem; font-weight: 800;
  padding: .9rem 2.2rem; border-radius: 999px;
  background: var(--sun, #f7b733); color: #461328;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.pcontinue.show { transform: translateX(-50%) translateY(0); opacity: 1; }
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  50% { box-shadow: 0 6px 26px rgba(247,183,51,.8); }
}
.pcontinue.show { animation: gentle-pulse 1.8s ease-in-out infinite; }
body.player-mode main { padding-bottom: 110px; }

/* hero: one clear start button */
.btn-start { font-size: 1.5rem; padding: 1rem 2.4rem; }
.btn-start { animation: gentle-pulse 1.8s ease-in-out infinite; }
.hero-hint { font-size: 1.05rem; color: var(--leaf-deep); margin-top: .5rem; font-weight: 600; }
.grownup-link { margin-top: 1.2rem; }
.grownup-link a { color: #2c73b0; font-size: .95rem; text-decoration: underline; }

/* celebration actions */
.finish-actions { display: flex; gap: .8rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  body.player-mode .screen-active.enter,
  body.player-mode .screen-active.enter-back,
  .pcontinue.show,
  .btn-start { animation: none; }
}
@media (max-width: 600px) {
  .pbar { flex-wrap: wrap; }
  .pbar-meter { width: 60px; }
  .pcontinue { font-size: 1.15rem; padding: .8rem 1.7rem; }
}

/* celebration finale video */
.badge-wrap .celebrate-video { display:block; width:100%; max-width:720px; margin:0 auto .9rem; border-radius:18px; box-shadow:var(--shadow); }

.badge-wrap .celebrate-video { display:block; width:100%; max-width:720px; margin:0 auto .9rem; border-radius:18px; box-shadow:var(--shadow); }

/* ===========================================================
   WORD POWER — the vocabulary ritual (tap to hear, flips to
   big HTML/CSS word art in the story's sky / grape / sun palette)
   =========================================================== */
.wordpower { text-align: center; }
.wp-instruction { font-weight: 700; color: var(--grape); }
.word-row {
  display: grid; grid-template-columns: 1fr; gap: 0.8rem;
  max-width: 760px; margin: 1rem auto 0;
}
@media (min-width: 640px) { .word-row { grid-template-columns: repeat(3, 1fr); } }
.word-card {
  cursor: pointer; font-family: inherit;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 1rem 0.8rem; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
}
.word-card:hover { background: var(--sun); }
.word-front {
  font-weight: 900; font-size: 1.7rem; letter-spacing: 1.5px;
  color: var(--grape);
}
.word-tap { font-size: 0.85rem; font-weight: 700; color: #3f394d; }
.word-art { display: none; }
.word-card.word-open {
  background: linear-gradient(150deg, var(--grape), #7a4fb5);
  border-color: var(--ink); box-shadow: 4px 4px 0 var(--sun-deep);
  animation: flipPop .45s ease;
}
.word-card.word-open:hover { background: linear-gradient(150deg, var(--grape), #7a4fb5); }
.word-card.word-open .word-front, .word-card.word-open .word-tap { display: none; }
.word-card.word-open .word-art {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.word-big {
  font-weight: 900; font-size: 2.3rem; line-height: 1.05; letter-spacing: 2px;
  color: var(--sun); text-shadow: 3px 3px 0 var(--ink);
}
.word-mean { font-weight: 700; font-size: 1rem; color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .word-card.word-open { animation: none; } }
@keyframes flipPop { 0% { transform: rotateX(0) scale(1); } 50% { transform: rotateX(90deg) scale(1.05); } 100% { transform: rotateX(0) scale(1); } }

/* ===========================================================
   RECORD MOMENT — device-only "say it" voice recording
   (in-memory only; the JS revokes and discards everything)
   =========================================================== */
.record-moment {
  max-width: 560px; margin: 1.2rem auto 0;
  background: var(--cream); border: 2px dashed var(--grape);
  border-radius: 12px; padding: 0.9rem; text-align: center;
}
.record-title { font-weight: 800; color: var(--grape); margin: 0 0 0.4rem; }
.record-line { color: var(--ink); }
.record-fallback { font-weight: 700; color: var(--grape); margin: 0.3rem 0 0; }
.record-controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.4rem;
}
.record-btn {
  cursor: pointer; font-family: inherit; font-weight: 800; font-size: 1rem;
  background: var(--sun); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 999px; padding: 0.7rem 1.2rem; min-height: 44px;
}
.record-btn:hover { filter: brightness(0.96); }
.record-btn.rec-live {
  background: var(--coral); color: var(--ink);
  animation: recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,107,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(255,138,107,0); }
}
.record-status { font-weight: 700; margin: 0.5rem 0 0; min-height: 1.2em; }
.record-note { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0; }
.record-skip { font-size: 0.9rem; font-weight: 700; color: var(--muted); margin: 0.5rem 0 0; }
@media (prefers-reduced-motion: reduce) { .record-btn.rec-live { animation: none; } }

/* Word Power is a paged-player screen: hidden unless active */
body.player-mode .wordpower:not(.screen-active) { display: none !important; }

/* MLL-FREDOKA display type — appended */
@font-face{font-family:"Fredoka";src:url("/assets/brand/Fredoka-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
h1,h2,h3,h4,.brand,.kicker,.btn,.btn-primary,.nav-toggle,.nav-links a{font-family:"Fredoka","Trebuchet MS","Segoe UI",system-ui,sans-serif}


/* finale celebration (2026-07-30): confetti burst + badge pop when the story
   completes; calm mode keeps the moment quiet. */
.confetti-bit{ position:fixed; width:10px; height:14px; border-radius:2px; z-index:60;
  pointer-events:none; opacity:0; animation:confetti-fall 2.2s ease-in forwards; }
@keyframes confetti-fall{
  0%{ opacity:1; transform:translate(0,0) rotate(0deg); }
  100%{ opacity:0; transform:translate(var(--dx,0px), 46vh) rotate(var(--rot,240deg)); } }
.finish-pop{ animation:finish-pop .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes finish-pop{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .confetti-bit{ display:none; }
  .finish-pop{ animation:none; } }