/* Generated critical shell stylesheet. Original order is preserved. */

/* src/styles.css */
:root {
  --ink: #172033;
  --muted: #657084;
  --paper: #ffffff;
  --line: #e2e8f0;
  --blue: #2277d8;
  --mint: #2fbf9b;
  --yellow: #ffd34d;
  --coral: #ff766f;
  --shadow: 0 18px 46px rgba(30, 45, 75, .12);
  font-family: "Pretendard Variable", Pretendard, "Plus Jakarta Sans", Inter, "Noto Sans KR", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,211,77,.28), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(47,191,155,.2), transparent 34%),
    linear-gradient(180deg, #f4fbff 0%, #fff9e7 100%);
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px max(18px, calc((100vw - 1180px) / 2));
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(226,232,240,.9);
  backdrop-filter: blur(16px);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  text-align: left;
}
.brand b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--mint));
}
.brand span { display: grid; }
.brand strong { font-size: 18px; }
.brand small { color: var(--muted); font-weight: 800; }
.back-chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  font-weight: 1000;
  box-shadow: 0 6px 16px rgba(30,45,75,.08);
}

nav { display: flex; gap: 8px; }
nav button, .primary, .secondary, .listen, .music-toggle {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(30,45,75,.08);
}
.primary { color: white; border: 0; background: linear-gradient(135deg, var(--blue), #5a8cff); }
.secondary { background: #f8fafc; }
.listen { color: #103b66; border: 0; background: linear-gradient(135deg, #b8edff, #72d4ff); }
.home-hero .secondary {
  color: #102033;
  background: rgba(255,255,255,.92);
}
.music-toggle {
  min-width: 104px;
  color: #3d4960;
  background: #fff7d8;
}
.music-toggle.active {
  color: #12382f;
  border-color: rgba(47,191,155,.45);
  background: linear-gradient(135deg, #d8fff2, #fff0b8);
}

main {
  width: min(1180px, calc(100vw - 32px));
  margin: 26px auto 60px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
}

.home-hero, .lesson-overview, .lesson-shell, .game-board, .story-page, .story-learning, .report-panel {
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
}

.home-hero {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: end;
  overflow: hidden;
  padding: 44px;
  color: white;
  background: #102a43;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
}
.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,31,50,.86) 0%, rgba(13,31,50,.56) 45%, rgba(13,31,50,.18) 100%);
}
.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-copy, .hero-visual {
  position: relative;
  z-index: 1;
}
.hero-copy h1, .lesson-overview h1, .lesson-card h1, .game-copy h1, .story-copy h1, .report-panel h1 {
  margin: 0 0 14px;
  font-size: clamp(42px, 5vw, 74px);
  line-height: 1.12;
  padding-bottom: 4px;
}
.hero-copy p, .lesson-overview p, .game-copy p, .story-copy p {
  color: var(--muted);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.45;
}
.hero-copy p:not(.eyebrow) { color: rgba(255,255,255,.88); max-width: 680px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.hero-visual {
  display: grid;
  gap: 16px;
}
.premium-panel {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 22px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.progress-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
}
.progress-card strong { font-size: 34px; color: var(--blue); }
.progress-card span { color: var(--muted); font-weight: 900; }
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hero-metrics span {
  min-height: 72px;
  display: grid;
  align-content: center;
  justify-items: center;
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 950;
}
.hero-metrics b { display: block; font-size: 24px; color: var(--coral); }
.mini-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mini-word-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 104px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  overflow: hidden;
}
.mini-word-art img { max-height: 78px; object-fit: contain; }
.mini-word-art span {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: var(--blue);
  font-weight: 1000;
}

.word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.word-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(246,249,253,.94);
  font-weight: 900;
}
.word-chips b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: white;
  background: var(--blue);
}

.home-finder {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1.35fr) minmax(260px, 1.45fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #d7e5f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20,54,94,.07);
}

.home-finder label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.home-finder label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.home-finder select,
.home-finder input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(201,214,229,.95);
  border-radius: 14px;
  color: #172033;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(20,34,58,.06);
}

.home-finder select:focus,
.home-finder input:focus {
  outline: 3px solid rgba(39,111,230,.24);
  border-color: rgba(39,111,230,.5);
}

.home-finder .secondary {
  min-height: 48px;
  white-space: nowrap;
}

/* The cards route begins with the same lesson banner and finder as the other
   learning libraries. Keep a deliberate gap before the card-specific area. */
.two-thousand-cards-content {
  margin-top: 24px;
}

.phonics2-game-launcher {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(201,214,229,.88);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8e8, #eef8ff);
  box-shadow: 0 14px 32px rgba(20,34,58,.08);
}
.game-arcade-heading {
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(201,214,229,.88);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 32px rgba(20,34,58,.08);
}
.game-arcade-heading h1 { margin: 4px 0 8px; font-size: clamp(32px, 4vw, 50px); }
.game-arcade-heading p:last-child { margin: 0; color: var(--muted); font-weight: 800; }
.phonics2-game-launcher-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
.phonics2-game-launcher-heading h2 { margin: 4px 0 0; font-size: clamp(24px, 3vw, 34px); }
.phonics2-game-launcher-heading p:last-child { max-width: 360px; margin: 0; color: var(--muted); font-weight: 800; }
.phonics2-game-launcher-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.phonics2-game-launcher-card {
  display: grid;
  gap: 6px;
  min-height: 148px;
  padding: 16px;
  border: 1px solid rgba(201,214,229,.95);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.phonics2-game-launcher-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(20,34,58,.12); }
.phonics2-game-launcher-card > span { color: var(--blue); font-size: 12px; font-weight: 1000; text-transform: uppercase; }
.phonics2-game-launcher-card strong { font-size: 20px; line-height: 1.15; }
.phonics2-game-launcher-card small { color: var(--muted); font-weight: 800; }
.phonics2-game-launcher-card em { margin-top: auto; color: var(--orange); font-size: 12px; font-style: normal; font-weight: 1000; text-transform: uppercase; }
.phonics2-game-launcher-card .menu-card-scene-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 12px; background: #edf5fb; }

.empty-course-result {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(101,112,132,.35);
  border-radius: 20px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  font-weight: 1000;
}

.publication-coming-soon {
  gap: 8px;
  align-content: center;
}

.publication-coming-soon strong { color: #172033; font-size: 20px; }

.phonics-issue-card {
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(86,105,220,.24);
  border-radius: 22px;
  color: #172033;
  background: linear-gradient(145deg, #ffffff, #eef1ff);
  box-shadow: 0 12px 26px rgba(30,45,75,.1);
  cursor: pointer;
}

.phonics-issue-card img{width:100%;height:150px;object-fit:contain;background:linear-gradient(145deg,#eefcff,#fff7dd);border-radius:18px;margin-bottom:10px}
.phonics-mode-label,.phonics-game-kicker{font-weight:900;letter-spacing:.12em;color:#3e65c8;text-transform:uppercase}
.phonics-mode-label strong{text-transform:none}
.blend-word mark{color:#f0447d;background:#fff0a8;border-radius:12px;padding:0 .08em}
.phonics-unit-hero{min-height:260px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(145deg,#e6fbff,#fff5ca)}
.phonics-unit-hero img{width:85%;height:240px;object-fit:contain}
.phonics-game-shell{max-width:1100px;margin:0 auto;padding:24px}
.phonics-game-stage{min-height:560px;padding:50px;border-radius:38px;text-align:center;background:radial-gradient(circle at 50% 35%,#fff 0 18%,#e8fbff 55%,#cce9ff);box-shadow:0 24px 70px #17345c2c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.phonics-game-stage h1{font-size:clamp(28px,4vw,50px);margin:0;color:#18345c}
.phonics-listen-core{width:170px;height:170px;border-radius:50%;border:12px solid #a2e2ef;background:#177faf;color:white;font-size:22px;font-weight:900;box-shadow:0 0 0 18px #fff9}
.phonics-orbit,.phonics-word-options{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.phonics-orbit button,.phonics-word-options button,.phonics-machine button{min-width:130px;padding:22px;border:0;border-radius:24px;background:white;color:#245087;font-size:30px;font-weight:900;box-shadow:0 10px 0 #b9d6e9,0 18px 35px #17345c20}
.phonics-machine{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;font-size:40px}.phonics-machine button.activated{background:#ffe66b;transform:translateY(5px);box-shadow:0 5px 0 #d7ac38}.phonics-machine strong{padding:22px 30px;border-radius:22px;background:#1c936d;color:white}
.phonics-game-picture img{width:260px;height:220px;object-fit:contain}.phonics-game-stage .task-feedback{min-height:28px;font-weight:800;color:#46617f}
@media(max-width:720px){.phonics-game-stage{padding:24px;min-height:500px}.phonics-machine{font-size:28px}.phonics-orbit button,.phonics-word-options button,.phonics-machine button{min-width:90px;font-size:23px;padding:16px}}

.phonics-issue-card span { color: #66708a; font-weight: 900; }
.phonics-issue-card strong { color: #5544d7; font-size: 38px; }
.phonics-issue-card small { font-size: 13px; font-weight: 900; }
.phonics-issue-card:hover { transform: translateY(-3px); border-color: #6b5bea; }

.daily-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.daily-flow button {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  box-shadow: 0 10px 26px rgba(30,45,75,.08);
  text-align: left;
}
.daily-flow button::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(47,191,155,.14);
}
.daily-flow b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: var(--mint);
}
.daily-flow strong { font-size: 22px; }
.daily-flow span { color: var(--muted); font-weight: 850; }
.daily-flow i {
  width: 46px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--coral));
}
.daily-flow em {
  margin-top: auto;
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.daily-flow button.completed {
  border-color: rgba(47,191,155,.5);
  background: linear-gradient(145deg, #f1fff9, #ffffff);
}
.daily-flow button.completed b {
  background: linear-gradient(135deg, #2fbf9b, #138b76);
}
.daily-flow button.locked,
.step-rail button.locked {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.35);
}
.daily-flow button.locked:hover { transform: none; }
.game-entry-button.completed {
  border-color: #2fbf9b;
  color: #08735f;
  background: #effff9;
}
.report-game-status {
  display: block;
  margin-top: 4px;
  color: #8a6d32;
  font-size: 11px;
  font-weight: 900;
}
.report-game-status.complete { color: #08735f; }

.home-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.home-split article {
  position: relative;
  display: grid;
  align-content: end;
  overflow: hidden;
  min-height: 190px;
  padding: 26px;
  border-radius: 24px;
  color: white;
  background: #1f6fd0;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.feature-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,31,50,.1), rgba(15,31,50,.76));
}
.feature-card > div {
  position: relative;
  z-index: 1;
}
.story-feature > img { object-fit: contain; background: #fff8e8; }
.story-feature::after { background: linear-gradient(180deg, rgba(255,118,111,.04), rgba(112,54,32,.76)); }
.home-split span { font-weight: 1000; opacity: .82; }
.home-split h2 { margin: 14px 0 8px; font-size: 34px; }
.home-split p { max-width: 440px; font-weight: 850; }

.course-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.course-map button {
  min-height: 210px;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 6px 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  text-align: left;
}
.course-map button.active { outline: 3px solid var(--yellow); }
.course-map img { grid-row: span 4; width: 86px; height: 120px; object-fit: cover; border-radius: 16px; }
.course-map .phonics-cover-card {
  grid-template-columns: 1fr;
  align-content: start;
}
.course-map .phonics-cover-card img {
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
}
.course-map .phonics-cover-card strong {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.28;
}
.course-map .alphabet-story-cover-card {
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 260px;
}
.course-map .alphabet-story-cover-card img {
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: #fff;
}
.course-map .alphabet-story-cover-card strong {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.28;
}
.course-map span { color: var(--muted); font-weight: 900; }
.course-map strong { font-size: 30px; }
.course-map small { color: var(--muted); font-weight: 800; line-height: 1.3; }

.lesson-overview {
  display: grid;
  grid-template-columns: 1fr .78fr;
  align-items: center;
  gap: 22px;
  padding: 34px;
  overflow: hidden;
}
.unit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.unit-showcase {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f3fbff, #fff7dc);
}
.unit-showcase > img { max-height: 230px; object-fit: contain; }
.unit-showcase > .phonics-unit-cover { width: min(100%, 480px); max-height: none; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 24px; background: #fff; }
.unit-story-title-cover{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(203,215,230,.9);border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(38,57,86,.12)}
.unit-story-title-image{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.unit-story-title-copy{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:18px 20px 16px;color:#fff;background:linear-gradient(180deg,transparent,rgba(18,32,55,.88));text-align:left;text-shadow:0 2px 6px rgba(0,0,0,.32)}
.unit-story-title-copy span{font-size:11px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase}
.unit-story-title-copy strong{font-size:clamp(19px,2.2vw,29px);line-height:1.1}
.unit-showcase-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media(max-width:640px){.unit-story-title-copy{padding:14px 15px 12px}.unit-story-title-copy strong{font-size:19px}}
.unit-showcase-grid .mini-word-art {
  min-height: 92px;
  background: white;
}

.lesson-shell {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0;
  overflow: hidden;
}
.step-rail {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  background: #f8fbff;
}
.step-rail button {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  font-weight: 1000;
  text-transform: capitalize;
}
.step-rail button.current { color: white; background: var(--blue); }
.step-rail b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.2); }

.lesson-card {
  padding: 28px;
}
.lesson-top,
.pager,
.pager-nav,
.pager-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lesson-top,
.pager {
  justify-content: space-between;
}
.lesson-top span { color: var(--muted); font-weight: 1000; }
.lesson-meter {
  position: relative;
  width: min(210px, 42vw);
  height: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf4fb;
}
.lesson-meter span {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  place-items: center;
  color: #29506f;
  font-size: 13px;
}
.lesson-meter em {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #9be7d2, #ffd96a);
}
.learn-grid, .speak-view {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1fr;
  gap: 28px;
  align-items: center;
  min-height: 470px;
}
.word-art, .choice-art, .game-target {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.96)),
    #eaf7ff;
  box-shadow: inset 0 0 0 1px rgba(226,232,240,.9);
}
.word-art img, .game-target img { max-height: 245px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(30,45,75,.16)); }
.choice-art { min-height: 120px; }
.choice-art img { max-height: 92px; object-fit: contain; }
.blind-choices .choice-art {
  min-height: 142px;
  background: linear-gradient(180deg, #ffffff, #f2f9ff);
}
.blind-choices .choice-art img { max-height: 118px; }

.listen-drum-view {
  display: grid;
  gap: 14px;
}

.listen-drum-stage {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background: #f7fbff;
  box-shadow: 0 20px 46px rgba(20,34,58,.11);
}

.listen-drum-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listen-drum-prompt {
  position: relative;
  z-index: 3;
  width: min(560px, calc(100% - 32px));
  margin: 104px auto 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.listen-drum-prompt h1 {
  display: none;
}

.listen-drum-answer {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  margin: 0 0 4px;
  padding: 4px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  color: #1f66dc;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 1000;
  line-height: .98;
  text-shadow: 0 2px 0 rgba(255,255,255,.92), 0 8px 20px rgba(20,34,58,.18);
}

.listen-drum-prompt p {
  margin: 0;
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 8px 18px rgba(20,34,58,.14);
}

.listen-drum-action {
  display: flex;
  justify-content: center;
  margin-top: -2px;
}

.listen-drum-action .listen {
  min-width: 168px;
}

.listen-drum-buttons {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.listen-drum-choice {
  position: absolute;
  bottom: 138px;
  width: clamp(210px, 23%, 246px);
  height: 172px;
  min-height: 172px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none;
  cursor: url("../assets/ui/drumstick-cursor.webp") 64 14, pointer;
  pointer-events: auto;
  transition: transform .16s ease, filter .16s ease;
}

.listen-drum-choice *,
.listen-drum-buttons {
  cursor: url("../assets/ui/drumstick-cursor.webp") 64 14, pointer;
}

.listen-drum-choice:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 18px 20px rgba(20,34,58,.2));
}

.listen-drum-choice::before {
  content: none;
  display: none;
  position: absolute;
  right: 6%;
  top: 8px;
  z-index: 2;
  width: 116px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7df9f 0%, #d79a42 62%, #a96723 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.55),
    0 8px 14px rgba(61,42,21,.18);
  opacity: 0;
  transform: rotate(-23deg);
  transform-origin: 86% 50%;
  transition: opacity .14s ease, transform .14s ease;
}

.listen-drum-choice::after {
  content: none;
  display: none;
  position: absolute;
  right: 3%;
  top: 36px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2bf, #d49335 64%, #8d511d);
  box-shadow: 0 7px 12px rgba(61,42,21,.22);
  opacity: 0;
  transition: opacity .14s ease;
}

.listen-drum-choice:hover::before,
.listen-drum-choice:hover::after,
.listen-drum-choice:focus-visible::before,
.listen-drum-choice:focus-visible::after,
.listen-drum-choice.correct::before,
.listen-drum-choice.correct::after,
.listen-drum-choice.wrong::before,
.listen-drum-choice.wrong::after {
  opacity: 1;
}

.listen-drum-choice:active::before,
.listen-drum-choice.correct::before,
.listen-drum-choice.wrong::before {
  animation: drumstickTap .24s ease-out;
}

.listen-drum-choice .choice-art {
  width: 100%;
  height: 148px;
  min-height: 148px;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
}

.listen-drum-choice .choice-art img {
  width: 132px;
  height: 132px;
  max-width: 132px;
  max-height: 132px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 16px 16px rgba(20,34,58,.18));
}

.listen-drum-choice.correct,
.listen-drum-choice.wrong {
  outline: 0;
  background: transparent !important;
  filter: none;
}

.listen-drum-choice.correct .listen-choice-art img {
  filter: drop-shadow(0 16px 16px rgba(20,34,58,.18));
}

.listen-drum-choice.wrong .listen-choice-art img {
  filter: drop-shadow(0 16px 16px rgba(20,34,58,.18));
}

.listen-drum-choice.drum-left { left: 7%; }
.listen-drum-choice.drum-center { left: 50%; transform: translateX(-50%); }
.listen-drum-choice.drum-center:hover { transform: translateX(-50%) translateY(-6px); }
.listen-drum-choice.drum-right { right: 7%; }

.listen-drum-effect {
  position: absolute;
  z-index: 5;
  width: 220px;
  max-width: 28%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --drum-tx: 0;
  transform: scale(.72);
}

.effect-left { left: 11%; bottom: 214px; }
.effect-center { left: 50%; bottom: 214px; --drum-tx: -50%; transform: translateX(var(--drum-tx)) scale(.72); }
.effect-right { right: 11%; bottom: 214px; }

.listen-drum-view.hit-left .effect-left,
.listen-drum-view.hit-center .effect-center,
.listen-drum-view.hit-right .effect-right {
  visibility: visible;
  animation: drumHitPop .62s ease forwards;
}

@keyframes drumHitPop {
  0% { opacity: 0; transform: translateX(var(--drum-tx)) scale(.68); }
  42% { opacity: 1; transform: translateX(var(--drum-tx)) scale(1.08); }
  100% { opacity: 0; transform: translateX(var(--drum-tx)) scale(1.22); }
}

@keyframes drumstickTap {
  0% { transform: rotate(-23deg) translateY(0); }
  55% { transform: rotate(-36deg) translateY(20px); }
  100% { transform: rotate(-23deg) translateY(0); }
}
.quiz-art {
  min-height: 300px;
}
.word-art span, .game-target span {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: var(--blue);
  font-size: 24px;
  font-weight: 1000;
}
.phonics-box {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 18px;
  background: #f1f8ff;
  font-weight: 900;
}
.lesson-focus {
  position: relative;
  padding: 10px 0;
}
.big-letter {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 28px;
  color: white;
  background: linear-gradient(135deg, var(--coral), var(--yellow));
  font-size: 58px;
  font-weight: 1000;
  box-shadow: 0 16px 36px rgba(255,118,111,.22);
}
.phonics-box b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: var(--blue);
}

.task-view, .speak-view {
  min-height: 480px;
}
.task-view h1 { font-size: clamp(36px, 4vw, 58px); }
.task-view p, .speak-view p { color: var(--muted); font-weight: 850; font-size: 18px; line-height: 1.45; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.choice-grid button, .letter-grid button, .story-choice-row button {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  font-weight: 1000;
  box-shadow: 0 8px 20px rgba(30,45,75,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.choice-grid button:hover, .letter-grid button:hover, .story-choice-row button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(30,45,75,.13);
}
.letter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
  width: min(640px, 100%);
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
}
.letter-grid button {
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--blue);
  font-size: 34px;
  line-height: 1;
}
/* Answer feedback must not paint a generic rectangle over custom game artwork. */
button.correct,
button.wrong { outline: 0; }
.task-feedback {
  min-height: 48px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff9df;
  color: #765100;
  font-weight: 900;
}
.speak-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pager { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

.game-board > .game-scene + .pager,
.game-board > .action-stage + .pager {
  margin-top: 12px;
  padding-top: 12px;
}

.speak-view {
  grid-template-columns: minmax(340px, 470px) minmax(360px, 1fr);
  align-items: center;
  gap: 30px;
}

.speak-visual-stack {
  width: min(450px, 100%);
  display: grid;
  gap: 10px;
  justify-self: center;
}

.say-panel {
  display: grid;
  gap: 14px;
  align-content: center;
  max-width: 560px;
}

.say-character {
  width: 100%;
  height: 390px;
  min-height: 390px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  justify-self: start;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.say-character img {
  width: min(390px, 92%);
  height: 320px;
  max-height: 320px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 18px rgba(30,45,75,.14));
  transition: transform .2s ease;
}

.say-character span {
  align-self: end;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #123b66;
  background: #dff7ff;
  font-size: 12px;
  font-weight: 1000;
}

.speak-word-art {
  width: 92px;
  min-height: 74px;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.speak-word-art img {
  max-height: 72px;
  filter: drop-shadow(0 10px 12px rgba(30,45,75,.14));
}

.speak-word-art span {
  left: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 16px;
}

.say-panel h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1;
}

.speak-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.say-panel p {
  max-width: 540px;
}

.game-layout { display: grid; }
.game-board { padding: 28px; }
.game-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.game-hud div {
  min-height: 70px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f4fbff);
  box-shadow: 0 8px 20px rgba(30,45,75,.08);
}
.game-hud span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
}
.game-hud strong {
  color: var(--blue);
  font-size: 24px;
}
.game-hud div:last-child strong {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.18;
  text-align: center;
}
.game-scene {
  position: relative;
  min-height: 370px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: #eaf7ff;
}
.game-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .96; }
.game-target { width: min(300px, 64%); z-index: 1; background: rgba(255,255,255,.9); transform: translateY(18px); }
.mystery-card {
  min-height: 230px;
  align-content: center;
  gap: 10px;
  color: #2b5271;
}
.mystery-card b {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  font-size: 54px;
}
.mystery-card small {
  color: var(--muted);
  font-weight: 1000;
}
.game-reward {
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 2;
  width: min(220px, 36%);
  min-height: 132px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 28px;
  color: #7a4b00;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,230,122,.94));
  box-shadow: 0 20px 44px rgba(255,154,77,.28);
  opacity: 0;
  transform: translateY(18px) scale(.9);
  transition: opacity .22s ease, transform .22s ease;
}
.game-reward b {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--coral), var(--yellow));
  font-size: 34px;
  box-shadow: 0 12px 24px rgba(255,118,111,.24);
}
.game-reward span {
  font-size: 18px;
  font-weight: 1000;
}
.game-board.task-done .game-reward { opacity: 1; transform: translateY(0) scale(1); }
.game-board.impact .game-target {
  animation: targetHit .34s ease;
}
.game-board.miss .game-scene {
  animation: missShake .28s ease;
}
.game-badge {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(30,45,75,.16);
  font-weight: 1000;
}
.game-badge b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: var(--coral);
  font-size: 24px;
}
.game-copy { margin: 22px 0; }
.game-copy h1 { font-size: clamp(36px, 4vw, 60px); }
.impact-burst {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  pointer-events: none;
  opacity: 0;
}
.impact-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 0 6px rgba(255,211,77,.22);
}
.impact-burst i:nth-child(1) { --x: -190px; --y: -112px; background: var(--coral); }
.impact-burst i:nth-child(2) { --x: 170px; --y: -98px; background: var(--mint); }
.impact-burst i:nth-child(3) { --x: -142px; --y: 116px; background: var(--blue); }
.impact-burst i:nth-child(4) { --x: 132px; --y: 128px; background: var(--yellow); }
.impact-burst i:nth-child(5) { --x: 0; --y: -154px; background: #9b7cff; }
.impact-burst i:nth-child(6) { --x: 0; --y: 152px; background: #ff9a4d; }
.game-board.impact .impact-burst {
  opacity: 0;
}
.game-board.impact .impact-burst i {
  animation: none;
}
.score-pop {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 4;
  /* This visual-only score burst sits above a number of answer objects.
     Never let its invisible idle state intercept a click or touch. */
  pointer-events: none;
  min-width: 92px;
  padding: 10px 16px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--coral), var(--yellow));
  font-size: 26px;
  font-weight: 1000;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px) scale(.8);
  box-shadow: 0 16px 32px rgba(255,118,111,.28);
}
.game-board.impact .score-pop {
  animation: scorePop .62s ease forwards;
}
.game-board.miss .score-pop {
  background: linear-gradient(135deg, #657084, #172033);
  animation: scorePop .44s ease forwards;
}
.game-board .choice-grid button:active,
.game-board .letter-grid button:active {
  transform: translateY(2px) scale(.98);
}

.lesson-card,
.game-board,
.story-learning {
  position: relative;
}

.effect-float {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 8;
  width: clamp(132px, 18vw, 230px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(20,34,58,.22));
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0;
  animation: effectFloat .9s cubic-bezier(.18,.9,.28,1) forwards;
}

.effect-float.miss {
  width: clamp(116px, 15vw, 190px);
  filter: drop-shadow(0 14px 18px rgba(20,34,58,.16));
  animation: effectPuff .78s ease forwards;
}

.game-board .effect-float {
  top: 38%;
}

.story-learning .effect-float {
  top: 24%;
}

@keyframes targetHit {
  0% { transform: translateY(18px) scale(1); }
  42% { transform: translateY(8px) scale(1.08); }
  100% { transform: translateY(18px) scale(1); }
}
@keyframes missShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-5px); }
}
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.15); opacity: 0; }
}
@keyframes scorePop {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.75); }
  25% { opacity: 1; transform: translate(-50%, -8px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1); }
}

@keyframes effectFloat {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.62) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, -54%) scale(1.08) rotate(2deg); }
  58% { opacity: 1; transform: translate(-50%, -62%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -86%) scale(.92) rotate(4deg); }
}

@keyframes effectPuff {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.72); }
  20% { opacity: .94; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.14); }
}

.story-book-screen {
  width: min(1020px, 100%);
  margin: 0 auto;
}

.story-book-page {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.story-book-page::before {
  content: none;
}

.story-book-media {
  min-height: clamp(360px, 42vw, 520px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f9fbff);
}

.story-book-media img {
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(30,45,75,.12));
}

.story-book-copy {
  padding: 24px 8px 10px;
  text-align: center;
}

.story-book-copy h1 {
  margin: 14px 0 12px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.14;
  padding-bottom: 4px;
}

.story-title-page .story-book-media {
  min-height: clamp(300px, 34vw, 430px);
  background: #ffffff;
}

.story-title-page .story-book-media img {
  max-height: 390px;
}

.story-missing-cover {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  color: #64748b;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}

.story-missing-cover span {
  color: #2563eb;
  font-size: 16px;
}

.story-title-page .story-book-copy {
  text-align: center;
  padding-inline: 28px;
}

.story-title-page .story-book-copy h1 {
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.06;
}

.story-book-copy > p:not(.eyebrow) {
  margin: 0;
  color: #111827;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.story-read-line {
  display: block;
  margin-top: 8px;
}

.story-read-line:first-child {
  margin-top: 0;
}

.story-read-word {
  display: inline-block;
  padding: 0 3px;
  border-radius: 8px;
  transition: color .14s ease, transform .14s ease, text-shadow .14s ease;
}

.story-read-word.read {
  color: #111827;
}

.story-read-word.reading {
  color: #ef233c;
  text-shadow: 0 2px 0 rgba(110, 12, 24, .14), 0 0 12px rgba(239, 35, 60, .22);
  transform: translateY(-1px) scale(1.03);
}

.story-book-pager {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(226,232,240,.9);
}

.story-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
}
.story-page, .story-learning { padding: 24px; }
.story-image {
  min-height: 340px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.96)),
    #f8fbff;
}
.story-image img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(30,45,75,.1)); }
.story-copy h1 { font-size: clamp(30px, 4vw, 48px); }
.scene-meter {
  height: 10px;
  overflow: hidden;
  margin: 0 0 18px;
  border-radius: 999px;
  background: #edf4fb;
}
.scene-meter em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--yellow));
}
.story-learning h2 { margin-top: 0; font-size: 34px; }
.story-word-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 4px 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff7d8, #e8fff6);
}
.story-word-card .mini-word-art { grid-row: span 2; }
.story-word-card strong { font-size: 28px; }
.story-word-card > span { color: var(--muted); font-weight: 900; }
.story-learning section {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fbff;
}
.story-learning section span { color: var(--blue); font-weight: 1000; }
.story-learning section p { margin: 0; color: var(--muted); font-weight: 850; line-height: 1.4; }
.story-choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.story-choice-row button { min-height: 52px; }

.report-panel { padding: 30px; }
.report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 20px 0; }
.report-stats article { padding: 18px; border-radius: 18px; background: #f8fbff; }
.report-stats strong { display: block; font-size: 42px; }
.report-stats span { color: var(--muted); font-weight: 900; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; }
td { color: var(--muted); font-weight: 850; }

.song-stage {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,211,77,.38), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(114,212,255,.32), transparent 32%),
    linear-gradient(135deg, #fffdf4, #f2fbff);
  box-shadow: var(--shadow);
}

.song-visual {
  min-height: 260px;
  display: grid;
  place-items: center;
}

.unit-one-song-stage {
  display: block;
  color: #172033;
  background: rgba(255,255,255,.96);
}

.song-game-board {
  padding: 28px;
}

.song-game-header {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.song-game-header h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .98;
}

.song-game-header p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-weight: 900;
}

.song-game-header .eyebrow {
  color: #60708b;
}

.song-music-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: auto;
  overflow: hidden;
  border-radius: 18px;
  background: #151235;
  box-shadow: 0 22px 54px rgba(20, 34, 58, .22);
}

.song-music-box > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transition: opacity .35s ease;
}

.song-game-board > .song-music-box + .pager {
  margin-top: 12px;
  padding-top: 12px;
}

.song-picture-display {
  position: absolute;
  left: 49.5%;
  top: 41%;
  z-index: 2;
  width: min(330px, 34%);
  min-height: 162px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #172033;
  pointer-events: none;
}

.song-picture-card,
.song-letter-card {
  min-width: 84px;
  max-width: 126px;
  min-height: 122px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 216, 107, .75);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf4, #fff3c8);
  box-shadow: 0 14px 26px rgba(67, 34, 0, .18);
  animation: songPicturePop .52s cubic-bezier(.2, .84, .25, 1.24) both;
  animation-delay: var(--card-delay, 0ms);
}

.song-picture-card strong,
.song-letter-card strong {
  color: #1761df;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255,255,255,.82);
}

.song-letter-card {
  min-width: 92px;
  max-width: 92px;
  min-height: 112px;
}

.song-letter-card strong {
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  gap: 2px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: .86;
}

.song-picture-art {
  width: 82px;
  height: 70px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.song-picture-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.song-caption-bar {
  position: absolute;
  left: 7.5%;
  right: 2.8%;
  bottom: 2.2%;
  z-index: 3;
  min-height: 72px;
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 24px;
  border: 2px solid rgba(255, 207, 88, .92);
  border-radius: 20px;
  color: #fff8d8;
  background: linear-gradient(180deg, rgba(29, 16, 64, .96), rgba(20, 10, 50, .96));
  box-shadow: 0 16px 34px rgba(15, 6, 35, .34), inset 0 0 0 1px rgba(255,255,255,.14);
  pointer-events: none;
}

.song-caption-bar span {
  color: #ffd86b;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

.song-caption-bar p {
  margin: 0;
  color: #fff7d3;
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 1000;
  line-height: 1.15;
  text-shadow: 0 3px 10px rgba(0,0,0,.34);
}

@keyframes songPicturePop {
  0% { opacity: 0; transform: translateY(14px) scale(.76) rotate(-3deg); }
  62% { opacity: 1; transform: translateY(-4px) scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.unit-one-song-stage .song-copy {
  display: grid;
  align-content: center;
}

.unit-one-song-stage .song-copy p {
  color: rgba(255,255,255,.84);
}

.unit-one-song-stage .eyebrow {
  color: #ffd86b;
}

.song-record {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff7c8 0 22%, #ffd45f 23% 29%, #34b7f1 30% 47%, #276fe6 48% 63%, #172033 64%);
  box-shadow: 0 24px 56px rgba(39,111,230,.22), inset 0 0 0 12px rgba(255,255,255,.26);
}

.song-record::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: #fff9df;
  box-shadow: inset 0 0 0 8px rgba(255,211,77,.75);
}

.song-record span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #123a73;
  background: linear-gradient(180deg, #fff7c8, #ffd45f);
  font-size: 24px;
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(20,34,58,.16);
  transform: rotate(calc(var(--i) * 60deg)) translateX(118px) rotate(calc(var(--i) * -60deg)) translate(-50%, -50%);
}

.song-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(42px, 7vw, 74px);
  letter-spacing: 0;
}

.song-copy p {
  max-width: 560px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.45;
}

.song-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.song-word-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.song-word-grid button {
  min-height: 156px;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(201,214,229,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(20,34,58,.1);
  text-align: left;
}

.song-word-grid button.singing {
  border-color: rgba(39,111,230,.5);
  background: linear-gradient(135deg, #ffffff, #fff6cf);
  box-shadow: 0 18px 38px rgba(39,111,230,.18);
}

.song-word-grid button > span {
  display: grid;
  gap: 4px;
  font-size: 24px;
  font-weight: 1000;
}

.song-word-grid button > span b {
  width: 62px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  font-size: 21px;
  white-space: nowrap;
}

.song-word-art {
  width: 104px;
  height: 104px;
}

@media (max-width: 640px) {
  .song-music-box,
  .song-music-box > img {
    min-height: 360px;
  }
  .song-picture-display {
    left: 49.5%;
    top: 41%;
    width: 42%;
    min-height: 106px;
    gap: 6px;
    padding: 8px;
  }
  .song-picture-card,
  .song-letter-card {
    min-width: 64px;
    max-width: 64px;
    min-height: 76px;
    padding: 6px;
  }
  .song-picture-art {
    width: 54px;
    height: 44px;
  }
  .song-picture-card strong {
    font-size: 14px;
  }
  .song-letter-card strong {
    font-size: 22px;
  }
  .song-caption-bar {
    left: 6%;
    right: 2.5%;
    bottom: 2%;
    min-height: 54px;
    grid-template-columns: 82px 1fr;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
  }
  .song-caption-bar span {
    font-size: 9px;
  }
  .song-caption-bar p {
    font-size: 14px;
  }
}

.newspaper-page {
  padding: 34px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,230,.94)),
    repeating-linear-gradient(0deg, rgba(23,32,51,.045) 0 1px, transparent 1px 34px);
  box-shadow: var(--shadow);
}

.newspaper-masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 18px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 4px double rgba(23,32,51,.18);
}

.newspaper-masthead h1 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(44px, 8vw, 86px);
  line-height: .95;
  letter-spacing: 0;
}

.newspaper-masthead > span {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 12px 16px;
  border-radius: 16px;
  color: #123a73;
  background: linear-gradient(180deg, #fff7c8, #ffd45f);
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(20,34,58,.12);
}

.newspaper-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(23,32,51,.12);
}

.newspaper-lead h2 {
  margin: 0 0 10px;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1;
}

.newspaper-lead p {
  max-width: 640px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.45;
}

.newspaper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 22px;
}

.newspaper-grid button {
  min-height: 150px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgba(201,214,229,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  text-align: left;
  box-shadow: 0 10px 24px rgba(20,34,58,.08);
}

.newspaper-grid button b {
  grid-row: span 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  font-size: 24px;
}

.newspaper-grid button strong {
  font-size: 24px;
}

.newspaper-grid button span {
  color: var(--muted);
  font-weight: 850;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .home-hero, .lesson-overview, .learn-grid, .speak-view, .story-layout, .song-stage, .newspaper-lead {
    grid-template-columns: 1fr;
  }
  .unit-one-song-stage {
    grid-template-columns: 1fr;
  }
  .home-finder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .phonics2-game-launcher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .phonics2-game-launcher-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-finder .home-search,
  .home-finder .secondary {
    grid-column: 1 / -1;
  }
  .daily-flow, .course-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lesson-shell {
    grid-template-columns: 1fr;
  }
  .step-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .topbar {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }
  .brand-row {
    width: 100%;
  }
  .brand {
    min-width: 0;
  }
  .brand strong {
    font-size: 16px;
  }
  nav {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }
  nav button {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 0;
    padding: 0 10px;
  }
  .phonics2-game-launcher-grid {
    grid-template-columns: 1fr;
  }
  .music-toggle { width: 100%; }
  main { width: min(100% - 20px, 1180px); margin-top: 16px; }
  .home-hero, .lesson-overview, .lesson-card, .game-board, .story-page, .story-learning, .report-panel {
    padding: 18px;
    border-radius: 20px;
  }
  .daily-flow, .home-split, .course-map, .choice-grid, .report-stats {
    grid-template-columns: 1fr;
  }
  .home-finder {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .game-hud {
    grid-template-columns: 1fr;
  }
  .game-hud div {
    min-height: 58px;
  }
  .home-split article { min-height: 220px; }
  .unit-actions > button { flex: 1 1 100%; }
  .hero-copy h1, .lesson-overview h1, .lesson-card h1 {
    font-size: 42px;
  }
  .step-rail {
    display: flex;
  }
  .step-rail button {
    min-width: 112px;
  }
  .letter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  table, thead, tbody, tr, td {
    display: block;
  }
  thead { display: none; }
  tr { padding: 12px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; }
  td { border: 0; padding: 6px; }
}

/* Polish layer */
:root {
  --ink: #162033;
  --muted: #5f6c80;
  --paper: #ffffff;
  --line: #dce5ef;
  --blue: #276fe6;
  --mint: #24b994;
  --yellow: #ffd45f;
  --coral: #f7655f;
  --violet: #6c5ce7;
  --soft: #f5f8fc;
  --shadow: 0 18px 38px rgba(20, 34, 58, .11);
  --shadow-strong: 0 24px 70px rgba(20, 34, 58, .18);
}

body {
  background:
    linear-gradient(180deg, rgba(247,250,255,.96), rgba(255,255,255,.98) 42%, rgba(247,250,255,.96)),
    repeating-linear-gradient(90deg, rgba(39,111,230,.035) 0 1px, transparent 1px 80px);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(39,111,230,.08), transparent 28%),
    linear-gradient(300deg, rgba(36,185,148,.08), transparent 26%);
  opacity: .82;
}

button {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:disabled {
  cursor: default;
  opacity: .72;
}

button:focus-visible {
  outline: 3px solid rgba(39,111,230,.32);
  outline-offset: 3px;
}

.topbar {
  height: 76px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 26px rgba(20,34,58,.06);
}

.brand b {
  border-radius: 14px;
  background: linear-gradient(135deg, #1f66d1, #22b894);
  box-shadow: 0 10px 22px rgba(39,111,230,.22);
}

.brand strong {
  font-size: 19px;
  line-height: 1.05;
}

.brand small {
  color: #6a768a;
  font-size: 12px;
}

.back-chip,
nav button,
.primary,
.secondary,
.listen,
.music-toggle {
  border-radius: 12px;
}

nav {
  padding: 5px;
  border: 1px solid rgba(220,229,239,.86);
  border-radius: 16px;
  background: rgba(245,248,252,.82);
}

nav button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #4f5d73;
}

nav button.active {
  color: #12315b;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(20,34,58,.1);
}

.primary {
  min-height: 48px;
  background: linear-gradient(135deg, #1f66d1, #4b8eff);
  box-shadow: 0 14px 28px rgba(39,111,230,.2);
}

.secondary {
  min-height: 48px;
  background: #ffffff;
  border-color: rgba(196,208,224,.92);
}

.listen {
  min-height: 48px;
  background: linear-gradient(135deg, #dff7ff, #8edcff);
  box-shadow: 0 12px 24px rgba(38,151,209,.16);
}

.music-toggle {
  min-height: 42px;
  min-width: 108px;
  background: #fff8db;
}

main {
  position: relative;
}

.home-hero,
.lesson-overview,
.lesson-shell,
.game-board,
.story-page,
.story-learning,
.report-panel {
  border-color: rgba(220,229,239,.88);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.home-hero {
  min-height: 560px;
  padding: 50px;
  border: 0;
  box-shadow: var(--shadow-strong);
}

.hero-backdrop::after {
  background:
    linear-gradient(90deg, rgba(9,25,45,.9) 0%, rgba(14,35,62,.66) 46%, rgba(14,35,62,.28) 100%),
    linear-gradient(0deg, rgba(8,22,38,.38), transparent 46%);
}

.hero-copy h1 {
  max-width: 760px;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-copy p:not(.eyebrow) {
  max-width: 640px;
  font-size: 20px;
}

.premium-panel {
  border-radius: 18px;
  background: rgba(255,255,255,.2);
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
}

.progress-card,
.hero-metrics span,
.mini-word-art,
.daily-flow button,
.course-map button,
.choice-grid button,
.letter-grid button,
.story-choice-row button,
.report-stats article {
  border-radius: 12px;
}

.progress-card {
  border: 1px solid rgba(255,255,255,.62);
}

.hero-metrics span {
  min-height: 78px;
}

.mini-word-art {
  border: 1px solid rgba(220,229,239,.72);
}

.word-chips span {
  border: 1px solid rgba(220,229,239,.72);
  background: rgba(255,255,255,.78);
  box-shadow: 0 6px 14px rgba(20,34,58,.06);
}

.home-hero .word-chips span {
  color: #173252;
  background: rgba(255,255,255,.92);
}

.daily-flow {
  gap: 12px;
}

.daily-flow button {
  min-height: 142px;
  border-color: rgba(220,229,239,.95);
  background:
    linear-gradient(180deg, #ffffff, #f8fbff);
}

.daily-flow button::after {
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(39,111,230,.1), rgba(36,185,148,.14));
}

.daily-flow button:hover,
.course-map button:hover,
.choice-grid button:hover,
.letter-grid button:hover,
.story-choice-row button:hover {
  border-color: rgba(39,111,230,.34);
  box-shadow: 0 16px 34px rgba(20,34,58,.12);
}

.home-split article {
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.feature-card::after {
  background: linear-gradient(180deg, rgba(15,31,50,.05), rgba(15,31,50,.82));
}

.course-map {
  gap: 12px;
}

.course-map button {
  min-height: 196px;
  border-color: rgba(220,229,239,.94);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(20,34,58,.07);
}

.course-map button.active {
  outline: 0;
  border-color: rgba(39,111,230,.48);
  box-shadow: 0 0 0 3px rgba(39,111,230,.12), 0 18px 36px rgba(20,34,58,.11);
}

.course-map img {
  border-radius: 12px;
}

.lesson-overview {
  padding: 38px;
}

.unit-showcase {
  border: 1px solid rgba(220,229,239,.84);
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fbff, #fff9e8);
}

.lesson-shell {
  grid-template-columns: 184px 1fr;
  background: #ffffff;
}

.step-rail {
  background: linear-gradient(180deg, #f6f9fd, #eef5fb);
  border-right: 1px solid rgba(220,229,239,.9);
}

.step-rail button {
  border-radius: 12px;
  box-shadow: none;
}

.step-rail button.current {
  background: linear-gradient(135deg, #1f66d1, #22b894);
  box-shadow: 0 12px 24px rgba(39,111,230,.18);
}

.lesson-card {
  padding: 34px;
}

.lesson-meter {
  height: 30px;
  background: #eef4fb;
}

.word-art,
.choice-art,
.game-target,
.story-image {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,253,255,.98)),
    #eef8ff;
}

.word-art {
  min-height: 292px;
}

.word-art img,
.game-target img {
  max-height: 260px;
}

.big-letter {
  border-radius: 18px;
  background: linear-gradient(135deg, #f7655f, #ffd45f);
}

.phonics-box {
  border: 1px solid rgba(220,229,239,.86);
  border-radius: 14px;
  background: #f6faff;
}

.task-feedback {
  border: 1px solid rgba(255,212,95,.58);
  border-radius: 12px;
}

.game-board {
  padding: 32px;
}

.game-hud div {
  border-radius: 12px;
}

.game-scene {
  min-height: 400px;
  border: 1px solid rgba(220,229,239,.86);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.game-target {
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 22px 46px rgba(20,34,58,.18);
}

.game-reward {
  border-radius: 16px;
}

.game-badge {
  border-radius: 12px;
}

.story-page,
.story-learning,
.report-panel {
  padding: 30px;
}

.story-word-card,
.story-learning section {
  border-radius: 12px;
}

th {
  color: #26364d;
  font-size: 13px;
  text-transform: uppercase;
}

td {
  color: #4f5d73;
}

@media (max-width: 960px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
  }
  nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  .home-hero {
    padding: 34px;
  }
  .lesson-shell {
    grid-template-columns: 1fr;
  }
  .step-rail {
    display: flex;
    overflow-x: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(220,229,239,.9);
  }
  .step-rail button {
    flex: 1 1 0;
    min-width: 0;
  }
  .lesson-top {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .home-hero,
  .lesson-overview,
  .lesson-card,
  .game-board,
  .story-page,
  .story-learning,
  .report-panel {
    border-radius: 14px;
  }
  .home-hero {
    min-height: 0;
    padding: 24px;
  }
  .hero-copy p:not(.eyebrow) {
    font-size: 17px;
  }
  .lesson-card {
    padding: 22px;
  }
  .lesson-meter {
    width: 100%;
  }
  .step-rail {
    gap: 6px;
    padding: 12px;
  }
  .step-rail button {
    min-height: 52px;
    gap: 6px;
    padding: 6px;
    font-size: 13px;
  }
  .step-rail b {
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }
  .learn-grid,
  .speak-view {
    min-height: 0;
  }
  .speak-title-row {
    flex-wrap: wrap;
  }
  .choice-grid {
    grid-template-columns: 1fr;
  }
  .game-scene {
    min-height: 320px;
  }
}

:root {
  --space-page: 34px;
  --space-section: 28px;
  --radius-panel: 16px;
  --radius-control: 11px;
  --elev-1: 0 10px 24px rgba(20,34,58,.08);
  --elev-2: 0 18px 42px rgba(20,34,58,.12);
  --elev-3: 0 28px 76px rgba(20,34,58,.18);
}

main {
  margin-top: var(--space-page);
}

.home-screen > section + section,
.unit-screen > section + section {
  margin-top: var(--space-section);
}

.topbar {
  border-bottom-color: rgba(201,214,229,.88);
}

nav {
  gap: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  flex-wrap: wrap;
  justify-content: center;
}

nav button {
  position: relative;
  min-width: 74px;
  font-size: 14px;
  min-height: 40px;
  padding-inline: 14px;
}

nav button.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--mint));
}

.primary,
.secondary,
.listen,
.music-toggle,
.back-chip {
  border-radius: var(--radius-control);
}

.primary {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 28px rgba(39,111,230,.22), inset 0 1px 0 rgba(255,255,255,.25);
}

.primary:hover:not(:disabled) {
  box-shadow: 0 18px 34px rgba(39,111,230,.28), inset 0 1px 0 rgba(255,255,255,.28);
}

.secondary {
  color: #23344d;
  background: linear-gradient(180deg, #ffffff, #f5f8fc);
  box-shadow: 0 8px 18px rgba(20,34,58,.07);
}

.listen {
  color: #10385c;
  background: linear-gradient(135deg, #eafaff, #a7e6ff);
  border: 1px solid rgba(92,190,231,.38);
}

.home-hero,
.lesson-overview,
.lesson-shell,
.game-board,
.story-page,
.story-learning,
.report-panel {
  border-radius: var(--radius-panel);
  box-shadow: var(--elev-2);
}

.home-hero {
  box-shadow: var(--elev-3);
}

.premium-panel {
  border-radius: var(--radius-panel);
  padding: 20px;
}

.daily-flow,
.course-map,
.home-split,
.choice-grid,
.unit-showcase-grid,
.report-stats {
  gap: 16px;
}

.daily-flow button {
  min-height: 134px;
  padding: 18px;
  gap: 8px;
  box-shadow: var(--elev-1);
}

.daily-flow strong {
  font-size: 21px;
}

.daily-flow span {
  line-height: 1.32;
}

.home-split article {
  min-height: 206px;
  padding: 28px;
}

.course-map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.course-map button {
  min-height: 178px;
  padding: 14px;
  grid-template-columns: 78px 1fr;
  gap: 5px 12px;
  box-shadow: var(--elev-1);
}

.course-map img {
  width: 78px;
  height: 112px;
}

.course-map strong {
  font-size: 27px;
}

.course-map small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.lesson-overview {
  padding: 42px;
  box-shadow: var(--elev-2);
}

.unit-showcase {
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 16px 36px rgba(20,34,58,.08);
}

.lesson-shell {
  grid-template-columns: 196px 1fr;
  box-shadow: var(--elev-3);
}

.step-rail {
  padding: 22px;
}

.step-rail button {
  min-height: 66px;
  padding: 10px 12px;
}

.lesson-card {
  padding: 38px;
}

.lesson-top {
  margin-bottom: 10px;
}

.learn-grid,
.speak-view {
  gap: 34px;
}

.speak-view {
  grid-template-columns: minmax(340px, 470px) minmax(360px, 1fr);
  gap: 30px;
}

.speak-view .speak-word-art {
  min-height: 74px;
  box-shadow: none;
}

.speak-view .speak-word-art img {
  max-height: 72px;
}

.word-art {
  min-height: 318px;
  box-shadow: inset 0 0 0 1px rgba(220,229,239,.92), 0 18px 42px rgba(20,34,58,.1);
}

.choice-grid button,
.letter-grid button,
.story-choice-row button {
  box-shadow: 0 10px 22px rgba(20,34,58,.08);
}

.choice-grid button.correct,
.letter-grid button.correct,
.story-choice-row button.correct {
  box-shadow: 0 14px 30px rgba(20,34,58,.1);
}

.pager {
  gap: 10px;
}

.pager-nav,
.pager-actions {
  flex-wrap: wrap;
}

.pager-actions {
  justify-content: flex-end;
}

.pager .primary {
  min-width: 132px;
}

.game-board {
  padding: 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)),
    #ffffff;
}

.game-hud {
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-hud div {
  min-height: 76px;
  box-shadow: var(--elev-1);
}

.game-hud strong {
  font-size: 27px;
}

.game-scene {
  min-height: 430px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 20px 46px rgba(20,34,58,.11);
}

.game-target {
  width: min(320px, 62%);
}

.game-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px 20px;
}

.game-copy .eyebrow,
.game-copy h1,
.game-copy p {
  grid-column: 1;
}

.game-copy .listen {
  display: none;
}

.story-layout {
  gap: 22px;
}

.story-page,
.story-learning {
  box-shadow: var(--elev-2);
}

.story-image {
  min-height: 380px;
  box-shadow: inset 0 0 0 1px rgba(220,229,239,.8);
}

.story-learning section {
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 8px 18px rgba(20,34,58,.06);
}

.report-stats article {
  box-shadow: var(--elev-1);
}

@media (max-width: 960px) {
  main {
    margin-top: 22px;
  }
  .course-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lesson-shell {
    grid-template-columns: 1fr;
  }
  .game-copy {
    grid-template-columns: 1fr;
  }
  .game-copy .listen {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

.custom-game-scene {
  min-height: 500px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(245,250,255,.72) 42%, rgba(236,246,255,.62) 100%),
    #f7fbff;
}

.custom-game-scene::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  pointer-events: none;
}

.custom-game-scene > .game-layer {
  position: absolute;
  inset: auto;
  z-index: 1;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 18px 24px rgba(21,36,62,.18));
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}

.game-prop {
  left: 6%;
  bottom: 6%;
  width: min(300px, 30%);
  max-width: none;
  max-height: 62%;
}

.game-prop-hit {
  left: 6%;
  bottom: 6%;
  width: min(310px, 31%);
  max-width: none;
  max-height: 64%;
  opacity: 0 !important;
  transform: translateY(12px) scale(.92);
}

.game-actor {
  right: 6%;
  bottom: 5%;
  width: min(250px, 26%);
  max-width: none;
  max-height: 64%;
  animation: gameIdle 2.4s ease-in-out infinite;
}

.game-actor-hit {
  right: 6%;
  bottom: 5%;
  width: min(260px, 27%);
  max-width: none;
  max-height: 66%;
  opacity: 0 !important;
  transform: translateY(18px) scale(.9) rotate(-3deg);
}

.game-accent {
  left: 50%;
  bottom: 8%;
  width: min(360px, 38%);
  max-width: none;
  max-height: 34%;
  transform: translateX(-50%);
  opacity: .92;
}

.game-success-layer {
  left: 50%;
  top: 18%;
  z-index: 4 !important;
  max-width: 34%;
  max-height: 34%;
  opacity: 0 !important;
  transform: translate(-50%, 18px) scale(.75);
}

.game-reward-img {
  right: 24px;
  top: 92px;
  z-index: 5 !important;
  max-width: 112px;
  max-height: 112px;
  opacity: 0 !important;
  transform: translateY(-8px) scale(.7) rotate(-10deg);
}

.custom-game-scene .game-target {
  width: min(320px, 46%);
  min-height: 240px;
  z-index: 4;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateY(10px);
}

.custom-game-scene .mystery-card b,
.custom-game-scene .mystery-card small {
  display: none;
}

.custom-game-scene .mystery-card small {
  max-width: 220px;
  text-align: center;
  line-height: 1.25;
}

.game-board.has-prop-hit.task-done .game-prop {
  opacity: 0;
  transform: translateY(10px) scale(.92);
}

.game-board.task-done .game-prop-hit,
.game-board.task-done .game-actor-hit,
.game-board.task-done .game-success-layer,
.game-board.task-done .game-reward-img {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(0);
}

.game-board.task-done .game-success-layer {
  transform: translate(-50%, 0) scale(1);
  animation: successLayerPop .68s ease both;
}

.game-board.has-actor-hit.task-done .game-actor {
  opacity: 0;
  transform: translateY(12px) scale(.92);
}

.game-board.task-done .game-prop-hit,
.game-board.task-done .game-actor-hit,
.game-board.task-done .game-success-layer,
.game-board.task-done .game-reward-img {
  opacity: 0 !important;
  animation: none !important;
}

.game-board.has-prop-hit.task-done .game-prop,
.game-board.has-actor-hit.task-done .game-actor {
  opacity: 1;
  transform: none;
}

.game-progress {
  height: 12px;
  margin: -2px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
  box-shadow: inset 0 1px 2px rgba(21,36,62,.08);
}

.game-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--mint), var(--yellow));
  box-shadow: 0 0 18px rgba(47,191,155,.28);
}

.word-timer-bar {
  height: 8px;
  margin: -8px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(47, 111, 228, .1);
  box-shadow: inset 0 1px 2px rgba(21,36,62,.08);
}

.word-timer-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #ffd45c, #ff8a6a);
  transform-origin: left center;
  animation: wordTimerDrain 12s linear forwards;
}

.game-board.task-done .word-timer-bar i {
  animation-play-state: paused;
}

.round-meter {
  display: none;
}

.round-meter span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.round-meter strong {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--mint));
  font-size: 24px;
}

.game-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-picture-choice {
  min-height: 132px;
  padding: 12px;
}

.game-picture-choice img {
  max-height: 108px;
}

.game-letter-grid button {
  min-height: 92px;
  font-size: clamp(30px, 5vw, 48px);
}

.mechanic-label {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 4;
  min-width: 92px;
  padding: 10px 14px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #172033, #2277d8);
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
  box-shadow: 0 14px 28px rgba(23,32,51,.18);
}

.round-timer {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 18px;
  z-index: 4;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 2px rgba(21,36,62,.1);
}

.round-timer i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--yellow), var(--coral));
  animation: timerDrain 10s linear infinite;
}

.mechanic-choice {
  position: relative;
  overflow: hidden;
  user-select: none;
}

.mechanic-choice::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 14px;
  pointer-events: none;
}

.mechanic-choice.dragging {
  opacity: .58;
  transform: scale(.96);
}

.drop-zone {
  border: 2px dashed rgba(34,119,216,.38) !important;
}

.custom-game-scene .drop-zone {
  border: 0 !important;
  box-shadow: none !important;
}

.mechanic-block .drop-zone,
.mechanic-gate .drop-zone {
  animation: dropPulse 1.35s ease-in-out infinite;
}

.mechanic-block .custom-game-scene .drop-zone,
.mechanic-gate .custom-game-scene .drop-zone {
  animation: none;
}

.mechanic-basket .mechanic-choice {
  animation: fallingChoice 3.4s ease-in-out infinite;
  animation-delay: var(--fall-delay);
}

.mechanic-basket .game-picture-choice {
  background: linear-gradient(180deg, #ffffff, #eef8ff);
}

.mechanic-block .mechanic-choice {
  min-height: 90px;
  border-color: rgba(255,185,73,.55);
  background: linear-gradient(180deg, #fff6d8, #ffd57a);
  box-shadow: 0 12px 0 #d9962b, 0 18px 30px rgba(125,79,18,.18);
}

.mechanic-block .mechanic-choice:active {
  box-shadow: 0 5px 0 #d9962b, 0 12px 20px rgba(125,79,18,.14);
}

.mechanic-rhythm .mechanic-choice {
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 35%, #dff7ff 36% 58%, #65d4ff 59% 100%);
  animation: rhythmPad 1.05s ease-in-out infinite;
  animation-delay: calc(var(--fall-delay) * .5);
}

.mechanic-rhythm .drop-zone b {
  animation: rhythmRing 1.05s ease-in-out infinite;
}

.mechanic-race .mechanic-choice {
  background: linear-gradient(135deg, #ffffff, #eaf3ff);
}

.mechanic-race .mechanic-choice::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  transform: scaleX(.38);
  transform-origin: left;
  transition: transform .2s ease;
}

.mechanic-race .mechanic-choice:hover::before {
  transform: scaleX(1);
}

.mechanic-gate .mechanic-choice {
  background: linear-gradient(180deg, #ffffff, #fff3c2);
  border-color: rgba(255,180,55,.6);
}

.mechanic-gate.task-done .game-target,
.mechanic-block.task-done .game-target {
  border-style: solid !important;
  border-color: rgba(47,191,155,.72) !important;
}

.mechanic-gate.task-done .custom-game-scene .game-target,
.mechanic-block.task-done .custom-game-scene .game-target {
  border: 0 !important;
}

.game-board.round-failed .custom-game-scene {
  animation: missShake .28s ease 2;
}

.game-board.round-failed .game-lives {
  color: var(--coral);
}

.game-board.impact .custom-game-scene {
  animation: sceneHit .42s ease;
}

.game-board.impact .round-meter strong {
  animation: targetHit .34s ease;
}

.action-game {
  overflow: hidden;
}

.action-hud {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.action-hud div:last-child strong {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
}

.action-stage {
  position: relative;
  min-height: clamp(620px, 54vw, 720px);
  overflow: hidden;
  border: 1px solid rgba(205,220,238,.9);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.96), rgba(235,248,255,.84) 48%, rgba(220,239,255,.78)),
    #edf8ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 18px 42px rgba(20,34,58,.1);
}

.action-stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.action-status {
  position: absolute;
  left: 22px;
  top: 20px;
  z-index: 6;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 26px rgba(20,34,58,.12);
  font-weight: 1000;
}

.action-status b {
  font-size: 20px;
}

.action-status span {
  color: var(--muted);
  font-size: 12px;
}

.action-controls {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 7;
  display: flex;
  gap: 10px;
}

.action-copy {
  margin-top: 18px;
}

.dog-dash-stage {
  --dog-x: 25%;
}

.dog-dash-stage[data-lane="0"] { --dog-x: 22%; }
.dog-dash-stage[data-lane="1"] { --dog-x: 40%; }
.dog-dash-stage[data-lane="2"] { --dog-x: 58%; }
.dog-dash-stage[data-lane="3"] { --dog-x: 76%; }

.dash-door,
.dash-door-open {
  position: absolute;
  left: 7%;
  bottom: 128px;
  z-index: 2;
  width: min(210px, 24%);
  max-height: 64%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(20,34,58,.18));
}

.dash-door-open {
  opacity: 0 !important;
}

.dash-dog,
.dash-dog-run {
  position: absolute;
  left: var(--dog-x);
  bottom: 132px;
  z-index: 3;
  width: min(180px, 22%);
  max-height: 54%;
  object-fit: contain;
  transform: translateX(-50%);
  transition: left .24s ease, transform .24s ease;
  filter: drop-shadow(0 18px 24px rgba(20,34,58,.16));
}

.dash-dog-run {
  opacity: 0 !important;
}

.dash-gates {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dash-gate {
  min-height: 74px;
  border: 1px solid rgba(34,119,216,.22);
  border-radius: 16px;
  color: var(--blue);
  background: linear-gradient(180deg, #fff, #eaf5ff);
  box-shadow: 0 10px 22px rgba(20,34,58,.08);
  font-size: 32px;
  font-weight: 1000;
}

.dash-gate span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.dash-gate.selected {
  outline: 4px solid rgba(47,191,155,.28);
  background: linear-gradient(180deg, #ecfff7, #dff4ff);
}

.dog-dash-stage.dash-run .dash-door {
  opacity: 0 !important;
}

.dog-dash-stage.dash-run .dash-door-open {
  opacity: 1 !important;
  animation: actionPop .42s ease both;
}

.dog-dash-stage.dash-run .dash-dog {
  opacity: 0 !important;
}

.dog-dash-stage.dash-run .dash-dog-run {
  opacity: 1 !important;
  animation: dogActionDash .78s cubic-bezier(.2,.8,.2,1) both;
}

.dog-dash-stage.dash-bump .dash-dog {
  animation: actionBump .42s ease;
}

.word-door-stage {
  min-height: clamp(610px, 52vw, 700px);
  overflow: hidden;
  background: #dff4ff;
  cursor: url("../assets/ui/hand-cursor.webp") 28 18, pointer;
}

.word-door-stage-bg {
  object-position: center center;
}

.word-door-grid {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  top: 78px;
  bottom: 74px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.word-door-screen {
  position: absolute;
  left: 50%;
  /* The prompt is always a word card.  The target illustration belongs to
     the completed result, never to the pre-answer door selection state. */
  top: 5.5%;
  z-index: 7;
  box-sizing: border-box;
  width: min(300px, 70%);
  height: 80px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 16px rgba(38, 73, 107, .18);
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.word-door-screen .word-door-prompt-word {
  display: grid;
  place-items: center;
}

/* Unit 11 keeps the word itself on the scene instead of a white card. */
#app main[data-publication="alphabet"] .word-door-stage[data-unit-id="unit-11"] :is(
  .word-door-screen,
  .word-door-result-word
) {
  background: transparent;
}

.word-door-stage.answer-revealed .word-door-screen {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px) scale(.86);
}

.word-door {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 20px 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  cursor: url("../assets/ui/hand-cursor.webp") 28 18, pointer;
}

.word-door img {
  pointer-events: none;
}

.word-door-closed,
.word-door-open {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(180px, 92%);
  max-height: 280px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 20px rgba(20,34,58,.18));
}

.word-door-open {
  opacity: 0 !important;
}

.word-door-word {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 3;
  width: min(150px, 76%);
  max-height: 150px;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -34%) scale(.62);
  filter: drop-shadow(0 14px 18px rgba(20,34,58,.18));
}

.word-door em {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-size: 34px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255,255,255,.95),
    0 5px 10px rgba(20,34,58,.14);
  transform: translate(-50%, -56%);
  transition: opacity .18s ease, transform .18s ease;
}

.word-door:hover {
  transform: translateY(-6px);
}

.word-door.door-opened .word-door-closed {
  opacity: 1;
}

.word-door.door-opened .word-door-open {
  opacity: 0 !important;
}

.word-door.door-opened em {
  opacity: 0;
  transform: translate(-50%, -78%) scale(.82);
}

.word-door.door-opened .word-door-word {
  animation: wordPopFromDoor .72s cubic-bezier(.18,.9,.2,1) both;
}

.word-door.door-bump {
  animation: actionBump .38s ease;
}

.word-door .effect-float {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: min(140px, 72%);
  max-height: 150px;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.72);
  animation: doorEffectPop .72s ease forwards;
}

@keyframes doorEffectPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.62); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.16); }
}

@keyframes wordPopFromDoor {
  0% { opacity: 0; transform: translate(-50%, -8%) scale(.58); }
  45% { opacity: 1; transform: translate(-50%, -62%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
}

.drum-action-stage .beat-core {
  position: absolute;
  left: 50%;
  top: 84px;
  width: min(300px, 36%);
  aspect-ratio: 1 / .82;
  transform: translateX(-50%);
}

.spelling-drum-stage {
  min-height: clamp(650px, 56vw, 760px);
  cursor: url("../assets/ui/drumstick-cursor.webp") 64 14, pointer;
}

.spelling-drum-bg {
  filter: saturate(1.04) contrast(1.01);
}

.spelling-slots {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 92px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.spelling-slots span {
  width: 54px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(34,119,216,.22);
  border-radius: 14px;
  color: var(--blue);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 22px rgba(20,34,58,.08);
  font-size: 30px;
  font-weight: 1000;
}

.spelling-slots span::before {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: rgba(101,112,132,.28);
}

.spelling-slots span.filled::before {
  content: none;
}

.spelling-slots span.filled {
  border-color: rgba(47,191,155,.45);
  background: #ecfff7;
  animation: actionPop .24s ease both;
}

.spelling-answer-picture {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 2;
  width: min(178px, 19%);
  height: min(148px, 20%);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.spelling-answer-picture::before,
.spelling-answer-picture::after {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.spelling-answer-picture::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 12%, rgba(255,218,76,.86) 13% 28%, rgba(255,153,42,.44) 29% 48%, transparent 49%),
    conic-gradient(from 10deg, transparent 0 6%, rgba(255,255,255,.9) 6% 9%, transparent 9% 18%, rgba(255,216,74,.92) 18% 23%, transparent 23% 36%, rgba(255,255,255,.85) 36% 39%, transparent 39% 100%);
  filter: drop-shadow(0 10px 18px rgba(255,162,38,.26));
}

.spelling-answer-picture::after {
  inset: -44px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 28%, rgba(255,230,105,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 77% 82%, rgba(255,255,255,.86) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 72%, rgba(255,220,88,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 12% 28%, rgba(255,255,255,.86) 0 3px, transparent 4px);
}

.spelling-answer-picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(20,34,58,.14));
}

/* Alphabet Drum Beat reveals the completed word picture only after the
   learner has selected its one target letter and heard its teaching turns. */
.spelling-answer-picture[aria-hidden="true"],
.spelling-answer-picture[aria-hidden="true"]::before,
.spelling-answer-picture[aria-hidden="true"]::after {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.spelling-drum-stage.word-complete .spelling-answer-picture::before {
  animation: answerAchievementBurst .82s ease-out forwards;
}

.spelling-drum-stage.word-complete .spelling-answer-picture::after {
  animation: answerAchievementStars 1s ease-out forwards;
}

.spelling-drum-stage.word-complete .spelling-answer-picture img {
  animation: answerAchievementPop .72s cubic-bezier(.18,.82,.28,1.18) both;
}

.spelling-drum-pads {
  position: absolute;
  z-index: 2;
  left: 50%;
  right: auto;
  bottom: 8px;
  width: min(720px, 90%);
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 150px));
  justify-content: center;
  gap: 14px;
  transform: translateX(-50%);
}

.spelling-drum {
  position: relative;
  min-height: 150px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: url("../assets/ui/drumstick-cursor.webp") 64 14, pointer;
}

.spelling-drum img {
  width: min(132px, 100%);
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 15px 20px rgba(20,34,58,.16));
}

.spelling-drum b {
  position: absolute;
  left: 50%;
  top: 42%;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-size: 34px;
  font-weight: 1000;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255,255,255,.9),
    0 6px 10px rgba(20,34,58,.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.spelling-drum.drum-hit {
  animation: none;
}

.spelling-drum.wrong {
  outline: 0 !important;
  background: transparent !important;
  animation: actionBump .32s ease;
}

.spelling-drum .effect-float {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 6;
  width: 116px;
  max-height: 116px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: doorEffectPop .68s ease forwards;
}

.spelling-drum-stage.word-complete .spelling-slots {
  animation: none;
}

@keyframes answerAchievementPop {
  0% { transform: scale(1); filter: drop-shadow(0 10px 14px rgba(20,34,58,.14)); }
  42% { transform: scale(1.18) rotate(-3deg); filter: drop-shadow(0 20px 26px rgba(255,150,36,.28)); }
  72% { transform: scale(.98) rotate(2deg); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 14px 18px rgba(20,34,58,.18)); }
}

@keyframes answerAchievementBurst {
  0% { opacity: 0; transform: scale(.35) rotate(0); }
  28% { opacity: .95; transform: scale(1.05) rotate(10deg); }
  100% { opacity: 0; transform: scale(1.45) rotate(28deg); }
}

@keyframes answerAchievementStars {
  0% { opacity: 0; transform: scale(.62) rotate(0); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.34) rotate(18deg); }
}

@keyframes drumHitButton {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(8px) scale(.96); }
}

.beat-core img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(20,34,58,.16));
}

.beat-ring-visual {
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  border: 10px solid rgba(47,191,155,.18);
  transform: scale(1.28);
  animation: beatRingShrink 1.25s linear infinite;
}

.drum-action-stage.beat-window,
.action-game.beat-window .drum-action-stage {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,245,176,.82), rgba(222,248,255,.88) 44%, rgba(220,239,255,.78)),
    #edf8ff;
}

.drum-pads {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.spelling-drum-stage .drum-pads {
  left: 50%;
  right: auto;
  bottom: 34px;
  width: min(760px, 82%);
  grid-template-columns: repeat(4, minmax(118px, 150px));
  justify-content: center;
  gap: 18px 24px;
  transform: translateX(-50%);
}

.spelling-drum-stage .drum-pad {
  position: relative;
  min-height: 172px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  animation: none;
}

.spelling-drum-stage .drum-pad:nth-child(-n + 4) {
  transform: translateY(54px);
}

.spelling-drum-stage .drum-pad:nth-child(n + 5) {
  transform: translateY(-38px);
}

.spelling-drum-stage .drum-pad img {
  width: 112%;
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(20,34,58,.16));
}

.spelling-drum-stage .drum-pad b {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  color: #14213a;
  font-size: 34px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.88), 0 6px 12px rgba(20,34,58,.16);
}

.spelling-drum-stage .drum-pad.wrong,
.spelling-drum-stage .drum-pad.correct {
  outline: 0 !important;
  background: transparent !important;
}

.arrow-aim-stage {
  min-height: clamp(620px, 54vw, 720px);
  background: #8eddf8;
  cursor: none;
  overflow: hidden;
  --aim-angle: 0deg;
  --aim-x: 50%;
  --wind-start-x: 92%;
  --wind-end-x: 4%;
  --wind-start-y: 0%;
  --wind-end-y: 0%;
  --wind-speed: 11s;
}

.arrow-aim-bg {
  object-position: center center;
}

.arrow-aim-cursor {
  position: absolute;
  left: var(--cursor-x);
  top: var(--cursor-y);
  z-index: 12;
  width: clamp(76px, 8.5vw, 112px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.92);
  filter: drop-shadow(0 12px 18px rgba(20,34,58,.22));
  transition: opacity .12s ease, transform .12s ease;
}

.arrow-aim-stage.cursor-visible .arrow-aim-cursor {
  opacity: .96;
  transform: translate(-50%, -50%) scale(1);
}

.arrow-targets {
  position: absolute;
  inset: 10% 0 30%;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.arrow-target {
  position: absolute;
  left: 0;
  top: calc(4% + var(--wind-row, 0) * 20%);
  width: clamp(126px, 13vw, 170px);
  min-height: clamp(218px, 21vw, 286px);
  border: 0;
  background: transparent;
  cursor: none;
  outline: none;
  filter: drop-shadow(0 16px 20px rgba(42,87,132,.14));
  pointer-events: auto;
  animation:
    /* Four balloons share one route and enter it four seconds apart. */
    windDrift 16s linear infinite,
    flyingBalloon calc(3.6s + var(--lane, 0) * .22s) ease-in-out infinite;
  animation-delay:
    calc(var(--lane, 0) * -4s),
    calc(var(--lane, 0) * -.48s);
}

.arrow-target.lane-0 { --lane: 0; }
.arrow-target.lane-1 { --lane: 1; }
.arrow-target.lane-2 { --lane: 2; }
.arrow-target.lane-3 { --lane: 3; }

.balloon-art {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%) rotate(calc((var(--lane, 1) - 2.5) * 1.2deg));
  transition: transform .18s ease, filter .18s ease;
  pointer-events: none;
}

.arrow-target.selected .balloon-art {
  filter: brightness(1.08) saturate(1.08);
  transform: translateX(-50%) scale(1.06);
}

.arrow-target.selected .balloon-letter {
  color: #fff;
}

.arrow-target.hit .balloon-art {
  animation: balloonHit .62s ease forwards;
}

.arrow-target.hit .balloon-letter {
  animation: balloonLetterDisappear .42s ease forwards;
}

.arrow-target.wrong .balloon-art {
  animation: actionBump .32s ease;
}

.arrow-target.wrong {
  background: transparent !important;
  outline: 0 !important;
}

.wrong-pop {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 5;
  width: clamp(86px, 9vw, 128px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,.94) 0 10%, rgba(255,95,95,.92) 11% 22%, rgba(120,136,158,.45) 23% 41%, transparent 42%),
    conic-gradient(from 20deg, transparent 0 7%, rgba(255,255,255,.9) 7% 10%, transparent 10% 18%, rgba(255,95,95,.85) 18% 23%, transparent 23% 34%, rgba(91,108,132,.55) 34% 38%, transparent 38% 100%);
  filter: drop-shadow(0 10px 16px rgba(120,43,43,.28));
}

.arrow-target.wrong-pop-active .wrong-pop {
  animation: wrongBalloonPop .62s ease-out;
}

.arrow-word-drop {
  position: absolute;
  left: var(--word-drop-x, 50%);
  top: var(--word-drop-start-y, 30%);
  z-index: 8;
  width: clamp(92px, 9vw, 130px);
  max-height: 132px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.65) rotate(-6deg);
  filter: drop-shadow(0 18px 20px rgba(20,34,58,.24));
}

.arrow-word-drop.drop-active {
  animation: wordImageDrop .92s cubic-bezier(.18,.78,.28,1.08) forwards;
}

.arrow-aim-stage.arrow-answer-revealed .arrow-word-drop {
  z-index: 14;
  width: clamp(120px, 15vw, 190px);
  max-height: 180px;
}

.arrow-aim-stage.arrow-answer-revealed .arrow-targets,
.arrow-aim-stage.arrow-answer-revealed .arrow-launcher,
.arrow-aim-stage.arrow-answer-revealed .arrow-aim-cursor {
  opacity: .16;
  pointer-events: none;
  transition: opacity .22s ease;
}

.balloon-letter {
  position: absolute;
  left: 50%;
  top: clamp(28px, 3.4vw, 42px);
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  transform: translateX(-50%) rotate(calc((var(--lane, 1) - 1.5) * .9deg));
  pointer-events: none;
  text-shadow:
    0 2px 0 rgba(21,83,151,.52),
    0 4px 9px rgba(20,34,58,.34);
}

.balloon-letter b {
  color: #fff;
  font-size: clamp(24px, 3.1vw, 40px);
  line-height: .86;
  font-weight: 1000;
}

.balloon-letter small {
  display: inline-block;
  margin-top: 0;
  color: #fff;
  font-size: clamp(13px, 1.35vw, 19px);
  line-height: .9;
  font-weight: 1000;
}

.arrow-launcher {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 6;
  width: min(205px, 18.5%);
  aspect-ratio: .7;
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--aim-angle));
  transform-origin: 50% 86%;
  transition: transform .18s ease, filter .16s ease;
  filter: drop-shadow(0 20px 22px rgba(20,34,58,.26));
}

.arrow-crossbow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(250px, 23%);
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
  transition: transform .16s ease, filter .16s ease;
}

.arrow-aim-stage.arrow-firing .arrow-launcher {
  transform: translateX(-50%) rotate(var(--aim-angle)) translateY(8px) scale(1.04);
  filter: drop-shadow(0 24px 25px rgba(20,34,58,.3)) saturate(1.06);
}

.arrow-projectile {
  position: absolute;
  left: var(--shot-start-x, 50%);
  top: var(--shot-start-y, 62%);
  z-index: 5;
  width: min(104px, 44%);
  height: auto;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--shot-angle, 90deg)) scale(.7);
  filter: drop-shadow(0 8px 10px rgba(20,34,58,.22));
}

.arrow-aim-stage.arrow-shot .arrow-projectile,
.arrow-aim-stage.arrow-miss .arrow-projectile {
  animation: arrowShoot .48s ease-out;
}

.arrow-burst {
  position: absolute;
  left: var(--burst-x, var(--aim-x));
  top: var(--burst-y, 22%);
  z-index: 7;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.4);
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 15%, rgba(255,225,82,.94) 16% 30%, rgba(255,149,46,.62) 31% 52%, transparent 53%),
    conic-gradient(from 8deg, transparent 0 8%, rgba(255,232,96,.88) 8% 12%, transparent 12% 21%, rgba(255,255,255,.85) 21% 25%, transparent 25% 100%);
  filter: drop-shadow(0 8px 16px rgba(255,139,46,.24));
}

.arrow-aim-stage.arrow-shot .arrow-burst {
  animation: arrowBurst .42s ease-out;
}

@keyframes arrowShoot {
  0% {
    opacity: .95;
    left: var(--shot-start-x);
    top: var(--shot-start-y);
    transform: translate(-50%, -50%) rotate(var(--shot-angle, 90deg)) scale(.62);
  }
  72% {
    opacity: 1;
    left: var(--shot-end-x);
    top: var(--shot-end-y);
    transform: translate(-50%, -50%) rotate(var(--shot-angle, 90deg)) scale(.78);
  }
  100% {
    opacity: 0;
    left: var(--shot-end-x);
    top: var(--shot-end-y);
    transform: translate(-50%, -50%) rotate(var(--shot-angle, 90deg)) scale(.45);
  }
}

@keyframes balloonHit {
  0% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  60% { opacity: 1; transform: translateX(-50%) scale(1.22); }
  100% { opacity: 0; transform: translateX(-50%) scale(.22) rotate(8deg); }
}

@keyframes balloonLetterDisappear {
  0% { opacity: 1; transform: translateX(-50%) scale(1) rotate(calc((var(--lane, 1) - 1.5) * .9deg)); }
  100% { opacity: 0; transform: translateX(-50%) scale(.35) rotate(8deg); }
}

@keyframes arrowBurst {
  0% { opacity: 0; transform: translateX(-50%) scale(.35) rotate(0); }
  35% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(12deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.42) rotate(24deg); }
}

@keyframes flyingBalloon {
  0%, 100% { margin-top: 0; }
  25% { margin-top: -18px; }
  50% { margin-top: 10px; }
  75% { margin-top: -10px; }
}

@keyframes windDrift {
  0% {
    left: var(--wind-start-x);
    top: calc(4% + var(--wind-row, 0) * 20% + var(--wind-start-y));
  }
  100% {
    left: var(--wind-end-x);
    top: calc(4% + var(--wind-row, 0) * 20% + var(--wind-end-y));
  }
}

@keyframes wrongBalloonPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.28) rotate(0); }
  28% { opacity: .95; transform: translate(-50%, -50%) scale(1.05) rotate(12deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55) rotate(28deg); }
}

@keyframes wordImageDrop {
  0% {
    opacity: 0;
    top: var(--word-drop-start-y);
    transform: translate(-50%, -50%) scale(.5) rotate(-12deg);
  }
  14% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    top: var(--word-drop-end-y);
    transform: translate(-50%, -50%) scale(1) rotate(5deg);
  }
  84% {
    opacity: 1;
    top: calc(var(--word-drop-end-y) - 18px);
    transform: translate(-50%, -50%) scale(.96) rotate(-3deg);
  }
  100% {
    opacity: 1;
    top: var(--word-drop-end-y);
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

.drum-pad {
  min-height: 112px;
  border: 1px solid rgba(47,191,155,.34);
  border-radius: 999px;
  color: #11456f;
  background: radial-gradient(circle at 50% 35%, #fff 0 28%, #c9f4ff 29% 58%, #39c2ed 59% 100%);
  box-shadow: inset 0 -12px 0 rgba(20,34,58,.1), 0 18px 34px rgba(35,136,196,.2);
  font-size: 34px;
  font-weight: 1000;
}

.drum-pad span {
  display: block;
  font-size: 12px;
}

.action-game.beat-window .drum-pad {
  animation: none;
}

.timing-label {
  position: absolute;
  left: 50%;
  top: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #10385c;
  background: rgba(255,255,255,.82);
  font-weight: 1000;
  transform: translateX(-50%);
}

.block-build-stage .builder-elephant {
  position: absolute;
  left: 10%;
  bottom: 82px;
  width: min(210px, 26%);
  max-height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(20,34,58,.16));
}

.block-base-action,
.success-tower-action {
  position: absolute;
  right: 15%;
  bottom: 92px;
  width: min(220px, 26%);
  max-height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(20,34,58,.14));
}

.success-tower-action {
  opacity: 0;
}

.build-stack {
  position: absolute;
  right: 20%;
  bottom: 96px;
  z-index: 4;
  display: grid;
  gap: 4px;
}

.build-stack i {
  width: 86px;
  height: 36px;
  border-radius: 10px;
  opacity: 0;
  background: linear-gradient(180deg, #fff6cf, #ffc85e);
  box-shadow: 0 7px 0 #c98225;
}

.block-build-stage.built-1 .build-stack i:nth-child(3),
.block-build-stage.built-2 .build-stack i:nth-child(n+2),
.block-build-stage.built-3 .build-stack i {
  opacity: 1;
  animation: blockDropIn .28s ease both;
}

.block-build-stage.built-3 .success-tower-action {
  opacity: 1;
  animation: actionPop .5s ease both;
}

.block-belt {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.moving-block {
  min-height: 78px;
  border: 1px solid rgba(255,185,73,.62);
  border-radius: 16px;
  color: var(--blue);
  background: linear-gradient(180deg, #fff5cc, #ffc95b);
  box-shadow: 0 12px 0 #c98225, 0 20px 34px rgba(125,79,18,.16);
  font-size: 34px;
  font-weight: 1000;
  transition: transform .18s ease, outline .18s ease;
}

.moving-block.active {
  outline: 5px solid rgba(47,191,155,.32);
  transform: translateY(-16px) scale(1.04);
}

.catch-block {
  position: absolute;
  left: 50%;
  bottom: 126px;
  z-index: 6;
  transform: translateX(-50%);
}

.word-tower-stage .builder-elephant {
  left: 31%;
  bottom: 58px;
  z-index: 4;
  width: min(235px, 23%);
  max-height: 64%;
}

.word-tower-stage .block-base-action {
  right: 14%;
  bottom: 74px;
  width: min(260px, 30%);
  opacity: .72;
}

.word-tower-stage {
  background: #e8f8ff;
}

.word-tower-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

.word-tower-stage::after {
  content: none;
}

.word-tower {
  position: absolute;
  right: 18%;
  bottom: 66px;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 36px);
  grid-auto-columns: 118px;
  gap: 0;
  align-items: end;
}

.tower-short .word-tower {
  right: 22%;
  bottom: 66px;
  grid-template-rows: repeat(4, 36px);
}

.tower-split .word-tower {
  right: 14%;
  bottom: 66px;
  grid-template-rows: repeat(4, 36px);
  grid-auto-columns: 116px;
  column-gap: 8px;
}

.word-tower span {
  position: relative;
  width: 118px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  color: var(--blue);
  background: transparent;
  box-shadow: none;
  padding-top: 1px;
  font-size: 27px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.68);
  filter: drop-shadow(0 4px 0 rgba(150,94,24,.2));
}

.word-tower span > img {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  width: 118px;
  height: 52px;
  object-fit: fill;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.word-tower span > b {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: -1px;
  min-width: 1em;
  text-align: center;
}

.word-tower span.missing {
  color: rgba(34,119,216,.55);
}

.word-tower span.missing::before {
  content: none;
}

.word-tower span.missing.filled::before {
  content: none;
}

.word-tower span.filled {
  color: var(--blue);
  filter: drop-shadow(0 12px 18px rgba(47,191,155,.22));
  animation: blockDropIn .32s ease both;
}

.scattered-blocks {
  left: 28%;
  right: 31%;
  bottom: 10px;
  z-index: 4;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 8px 12px;
}

.scattered-letter {
  position: relative;
  min-height: 74px;
  border: 0;
  color: var(--blue);
  background: transparent !important;
  box-shadow: none;
  font-size: 30px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.72);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.scattered-letter > img {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  width: min(126px, 100%);
  height: 70px;
  object-fit: fill;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.scattered-letter > b {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 1em;
  margin-top: -2px;
  text-align: center;
}

.scattered-letter.given {
  opacity: 0;
  visibility: hidden;
  transform: translate(110px, -112px) scale(.76);
  pointer-events: none;
}

.scattered-letter.wrong {
  outline: 0 !important;
  background: transparent !important;
  animation: blockChoiceShake .32s ease;
}

.scattered-letter .effect-float {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  max-height: 112px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: doorEffectPop .68s ease forwards;
}

.word-tower span .effect-float {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 138px;
  max-height: 138px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: doorEffectPop .72s ease forwards;
}

.word-tower-stage.tower-complete .builder-elephant {
  animation: actionPadPulse .5s ease;
}

.alphabet-board-stage {
  min-height: clamp(650px, 54vw, 760px);
  background: #daf4ff;
}

.alphabet-board-stage .alphabet-board-bg {
  object-fit: cover;
  object-position: center center;
}

.alphabet-board-word {
  left: 42%;
  right: auto;
  top: 26%;
  bottom: auto;
  z-index: 5;
  width: min(720px, 58%);
  display: flex;
  justify-content: center;
  gap: 18px;
  transform: translateX(-50%);
}

.alphabet-board-word span {
  width: clamp(74px, 7.1vw, 104px);
  height: clamp(74px, 7.1vw, 104px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 246, 211, .18);
  box-shadow: none;
  color: #2068df;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 1000;
  filter: drop-shadow(0 6px 8px rgba(70, 45, 20, .14));
}

.alphabet-board-word span.hint {
  background: rgba(255, 248, 218, .12);
}

.alphabet-board-word span.missing {
  border: 4px dashed rgba(47, 111, 228, .62);
  background: rgba(255, 255, 255, .42);
  color: rgba(32, 104, 223, .42);
}

.alphabet-board-word span.missing::after {
  content: "?";
  font-size: clamp(30px, 3.4vw, 46px);
  color: rgba(32, 104, 223, .54);
}

.alphabet-board-word span.missing.filled {
  border-color: rgba(47, 191, 155, .9);
  background: rgba(236, 255, 247, .72);
}

.alphabet-board-word span.missing.filled::after {
  content: none;
}

.alphabet-choice-blocks {
  left: 50%;
  right: auto;
  bottom: 46px;
  z-index: 6;
  width: min(620px, 62%);
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 124px));
  justify-content: center;
  gap: 12px 18px;
  transform: translateX(-50%);
}

.alphabet-choice {
  min-height: 92px;
}

.alphabet-choice > img {
  width: min(142px, 108%);
  height: 88px;
  object-fit: contain;
}

.alphabet-choice > b {
  font-size: 34px;
  transform: translateY(-1px);
}

.alphabet-board-stage.tower-complete .alphabet-board-word {
  animation: actionPadPulse .5s ease;
}

.premium-stage {
  min-height: clamp(640px, 54vw, 740px);
  background: #eaf8ff;
}

.premium-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.premium-actor {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(20,34,58,.18));
  transition: left .38s cubic-bezier(.2,.9,.22,1.15), transform .24s ease;
}

.fish-hero {
  left: 12%;
  top: 22%;
  width: min(210px, 24%);
}

.bubble-lane,
.garden-beds,
.star-path {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 34px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.picture-bubble {
  position: relative;
  aspect-ratio: 1.08;
  border: 2px solid rgba(115,218,255,.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.96) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.64), rgba(173,235,255,.44) 54%, rgba(68,190,234,.38));
  box-shadow: inset 0 -14px 26px rgba(30,128,180,.16), 0 18px 34px rgba(20,126,180,.16);
  transition: transform .18s ease, opacity .18s ease;
}

.picture-bubble span {
  position: absolute;
  inset: 16%;
  display: grid;
  place-items: center;
}

.picture-bubble .bubble-picture {
  width: 100%;
  height: 100%;
  background: transparent;
}

.picture-bubble .bubble-picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.picture-bubble.pop {
  opacity: .2;
  transform: scale(1.18);
  pointer-events: none;
}

.picture-bubble.wrong,
.garden-bed.wrong,
.star-pad.wrong {
  animation: blockChoiceShake .32s ease;
  outline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.garden-bed.correct,
.flower-grow-bed.correct,
.flower-grow-bed.grown,
.flower-grow-bed.watering {
  outline: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.goat-hero {
  left: 9%;
  bottom: 98px;
  width: min(248px, 24%);
  display: none;
}

.garden-beds {
  left: 11%;
  right: 15%;
  bottom: 196px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.garden-bed {
  position: relative;
  min-height: 226px;
  border: 0;
  border-radius: 28px;
  color: var(--blue);
  background: transparent;
  box-shadow: none;
  font-size: 34px;
  font-weight: 1000;
  overflow: visible;
  padding: 0;
}

.flower-grow-bed::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 0;
  bottom: -72px;
  z-index: 5;
  background: transparent;
}

.garden-bed img {
  position: absolute;
  left: 50%;
  bottom: -8px;
  z-index: 1;
  width: min(184px, 108%);
  height: 138px;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(59, 105, 45, .18));
}

.garden-bed b {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 78px;
  padding-top: 10px;
  color: #2f6fe4;
  text-shadow: 0 2px 0 rgba(255,255,255,.78);
}

.garden-bed span {
  position: relative;
  z-index: 3;
  display: block;
  min-height: 28px;
  font-size: 38px;
  color: #39b66d;
}

.garden-bed.grown {
  border-color: rgba(82,206,131,.72);
  transform: translateY(-8px);
}

.flower-grow-stage {
  min-height: clamp(640px, 54vw, 740px);
}

.flower-grow-stage.bloom-celebrating::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--bloom-x, 50%) var(--bloom-y, 70%),
      rgba(255, 252, 172, .72) 0 9%,
      rgba(255, 226, 91, .38) 18%,
      rgba(126, 225, 166, .22) 34%,
      rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,245,175,.1));
  animation: gardenBloomBackgroundGlow 1.42s ease-out both;
}

.flower-grow-stage.bloom-celebrating::after {
  content: "";
  position: absolute;
  left: var(--bloom-x, 50%);
  top: var(--bloom-y, 70%);
  z-index: 7;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.96);
  box-shadow:
    -92px -42px 0 2px rgba(255, 244, 122, .95),
    -70px 34px 0 1px rgba(255, 255, 255, .95),
    -28px -86px 0 2px rgba(126, 225, 166, .88),
    36px -70px 0 1px rgba(255, 255, 255, .92),
    78px -28px 0 2px rgba(255, 218, 111, .95),
    86px 44px 0 1px rgba(147, 224, 255, .9),
    12px 82px 0 2px rgba(255, 244, 122, .92),
    -54px 78px 0 1px rgba(255, 255, 255, .92);
  transform: translate(-50%, -50%) scale(.25);
  animation: gardenBloomAmbientSparkles 1.18s ease-out both;
}

.flower-grow-stage .premium-bg {
  object-position: center center;
}

.flower-grow-stage,
.flower-grow-stage button {
  cursor: none;
}

.garden-cursor-can {
  position: absolute;
  z-index: 12;
  width: 230px;
  height: 230px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transform: translate(-64%, -42%) rotate(-8deg);
  filter: drop-shadow(0 18px 24px rgba(24, 85, 138, .28));
  transition: opacity .12s ease;
}

.garden-cursor-can.visible {
  opacity: 1;
}

.flower-grow-bed {
  overflow: visible;
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
  touch-action: manipulation;
}

.flower-grow-motion {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .flower-grow-motion {
    animation: gardenFlowerIdleSway 4.4s ease-in-out infinite;
    will-change: transform;
  }

  .flower-grow-bed:nth-child(2) .flower-grow-motion { animation-delay: -1.45s; }
  .flower-grow-bed:nth-child(3) .flower-grow-motion { animation-delay: -2.85s; }
  .flower-grow-bed:hover .flower-grow-motion,
  .flower-grow-bed:focus-visible .flower-grow-motion,
  .flower-grow-bed.watering .flower-grow-motion,
  .flower-grow-bed.wrong .flower-grow-motion { animation-play-state: paused; }
}

.flower-grow-bed::before {
  content: none;
  position: absolute;
  left: 50%;
  bottom: -46px;
  z-index: 0;
  width: min(300px, 190%);
  height: 250px;
  transform: translateX(-50%);
  border-radius: 999px;
}

.flower-grow-bed:nth-child(1) {
  left: -18px;
}

.flower-grow-bed:nth-child(2) {
  left: 20px;
}

.flower-grow-bed:nth-child(3) {
  left: 62px;
}

.flower-grow-bed .baby-flower {
  bottom: -48px;
  width: min(210px, 138%);
  height: 210px;
  object-position: center center;
  object-fit: contain;
  transition: opacity .08s ease, transform .12s ease;
}

.flower-grow-bed .grown-flower {
  bottom: -102px;
  width: min(288px, 176%);
  height: 266px;
  object-fit: contain;
  opacity: 0;
  transform: translateX(-50%) scale(.62) translateY(-18px);
  transition: opacity .12s ease, transform .16s ease;
}

.flower-grow-bed b {
  position: absolute;
  left: 50%;
  top: 76%;
  z-index: 6;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #2f6fe4;
  font-size: 32px;
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 0 14px rgba(255,255,255,.82);
  pointer-events: none;
}

.flower-grow-bed:nth-child(1) b,
.flower-grow-bed:nth-child(2) b {
  top: 76%;
}

/* Unit 5 Flower Garden: the word screen belongs in the garden, and each
   flower's visual stem is registered to the centre of its painted soil bed. */
.action-garden-goat-find .garden-word-screen {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  pointer-events: none;
}

.action-garden-goat-find .garden-word-screen .garden-masked-word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .04em;
  width: max-content;
  min-width: max-content;
  margin: 0;
  padding: 7px 13px 8px;
  border: 1px solid rgba(215, 224, 235, .94);
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 14px rgba(28, 48, 72, .16);
  color: #596979;
  font-size: clamp(28px, 4.1vw, 48px);
  font-weight: 1000;
  line-height: 1;
}

.action-garden-goat-find .flower-grow-bed:nth-child(1) { left: 27px; }
.action-garden-goat-find .flower-grow-bed:nth-child(2) { left: 19px; }
.action-garden-goat-find .flower-grow-bed:nth-child(3) { left: 10px; }

.action-garden-goat-find .flower-grow-bed .baby-flower { bottom: -69px; }
.action-garden-goat-find .flower-grow-bed b { top: 85%; }

/* Unit 05 only: the generic `.garden-bed span` rule makes this motion layer
   relative, so its flower is anchored to a one-line span instead of its soil
   bed. Restore the full bed as its positioning context. */
#app main[data-publication="alphabet"] .action-garden-goat-find .flower-grow-motion {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
}

.flower-grow-bed.flower-set-2-1 b {
  top: 76%;
}

/* The flower beds share the 16:9 stage on phones.  Scale their coordinate
   system with the background so each letter stays inside its own soil plot. */
@media (max-width: 640px) {
  #app .flower-grow-stage .garden-beds {
    top: 33% !important;
    right: 7% !important;
    bottom: auto !important;
    left: 7% !important;
    height: 50% !important;
  }

  #app .flower-grow-stage .flower-grow-bed {
    left: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  #app .flower-grow-stage .flower-grow-bed .baby-flower {
    bottom: 0 !important;
    width: 150% !important;
    height: 100% !important;
  }

  #app .flower-grow-stage .flower-grow-bed .grown-flower {
    bottom: -6% !important;
    width: 170% !important;
    height: 116% !important;
  }

  #app .flower-grow-stage .flower-grow-bed b {
    top: 58% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: clamp(18px, 6vw, 25px) !important;
  }
}

/* The mobile grid is equally spaced, but the painted pots are not.  Shift
   each complete answer object to the measured pot centre. */
@media (max-width: 640px) {
  #app .action-garden-goat-find .flower-grow-bed:nth-child(1) {
    --garden-pot-shift: 4.1vw;
    transform: translateX(var(--garden-pot-shift)) !important;
  }

  #app .action-garden-goat-find .flower-grow-bed:nth-child(2) {
    --garden-pot-shift: -.3vw;
    transform: translateX(var(--garden-pot-shift)) !important;
  }

  #app .action-garden-goat-find .flower-grow-bed:nth-child(3) {
    --garden-pot-shift: -5.2vw;
    transform: translateX(var(--garden-pot-shift)) !important;
  }

  #app .action-garden-goat-find .flower-grow-bed.grown {
    transform: translateX(var(--garden-pot-shift)) translateY(-8px) !important;
  }

  #app .action-garden-goat-find .garden-word-screen {
    top: 6%;
  }

  #app .action-garden-goat-find .garden-word-screen .garden-masked-word {
    padding: 6px 10px 7px;
    font-size: clamp(25px, 7vw, 38px);
  }
}

.cursor-water-spray {
  position: absolute;
  z-index: 13;
  width: 236px;
  height: 236px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform: scale(.42) rotate(-22deg);
  transform-origin: 72% 18%;
  filter: drop-shadow(0 16px 24px rgba(34, 147, 214, .22));
  animation: cursorWaterSpray 1.05s ease forwards;
}

.flower-grow-bed.grown .baby-flower {
  opacity: 0;
  transform: translateX(-50%) scale(.5) translateY(62px);
}

.flower-grow-bed.grown .grown-flower {
  opacity: 1;
  transform: translateX(-50%) scale(.94) translateY(-82px);
  animation: gardenFlowerRewardPop .72s cubic-bezier(.16, .88, .24, 1.16) both;
}

.flower-grow-bed.grown b {
  opacity: 0;
}

.flower-grow-bed.grown::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 66px;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 248, 137, .55) 0 18%, rgba(255, 211, 77, .28) 30%, rgba(255, 211, 77, 0) 66%);
  transform: translateX(-50%) scale(.3);
  animation: gardenFlowerRewardRing .86s ease-out both;
}

.flower-grow-bed.grown::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 166px;
  z-index: 7;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: #fff36f;
  box-shadow:
    -64px 18px 0 2px #fff36f,
    -42px -42px 0 1px #7de1a6,
    0 -58px 0 2px #ffffff,
    46px -36px 0 1px #ff9eb0,
    64px 18px 0 2px #7bdcff,
    26px 54px 0 1px #ffe27a,
    -34px 52px 0 1px #ffffff;
  transform: translateX(-50%) scale(.2);
  animation: gardenFlowerRewardSparkles .78s ease-out both;
}

.flower-grow-bed .effect-float.effect-garden-sparkle {
  left: 50%;
  top: 28%;
  z-index: 8;
  width: 330px;
  max-width: 142%;
  max-height: none;
  opacity: 0;
  filter:
    drop-shadow(0 0 16px rgba(255, 236, 98, .95))
    drop-shadow(0 18px 24px rgba(28, 85, 30, .22));
  transform: translate(-50%, -50%) scale(.34) rotate(-12deg);
  animation: gardenSparkleRewardImage 1.48s cubic-bezier(.16, .9, .22, 1) both;
}

@keyframes cursorWaterSpray {
  0% { opacity: 0; transform: scale(.3) rotate(-22deg) translate(0, -4px); }
  16% { opacity: .95; transform: scale(.42) rotate(-22deg) translate(-4px, 3px); }
  78% { opacity: .92; transform: scale(.54) rotate(-22deg) translate(-14px, 18px); }
  100% { opacity: 0; transform: scale(.58) rotate(-22deg) translate(-22px, 30px); }
}

@keyframes gardenAnswerPop {
  0% { transform: scale(.92); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes gardenFlowerRewardPop {
  0% { opacity: 0; transform: translateX(-50%) scale(.68) translateY(-42px); }
  54% { opacity: 1; transform: translateX(-50%) scale(1.03) translateY(-88px); }
  100% { opacity: 1; transform: translateX(-50%) scale(.94) translateY(-82px); }
}

@keyframes gardenFlowerIdleSway {
  0%, 100% { transform: translateX(-1px) rotate(-1.25deg); }
  50% { transform: translateX(2px) rotate(1.25deg); }
}

@keyframes gardenFlowerRewardRing {
  0% { opacity: 0; transform: translateX(-50%) scale(.28); }
  35% { opacity: .95; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.18); }
}

@keyframes gardenFlowerRewardSparkles {
  0% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(-8deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.35) rotate(12deg); }
}

@keyframes gardenSparkleRewardImage {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.24) rotate(-18deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) rotate(4deg);
  }
  62% {
    opacity: .96;
    transform: translate(-50%, -50%) scale(.98) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.26) rotate(14deg);
  }
}

@keyframes gardenBloomBackgroundGlow {
  0% { opacity: 0; filter: brightness(1); }
  18% { opacity: 1; filter: brightness(1.12) saturate(1.08); }
  62% { opacity: .9; filter: brightness(1.08) saturate(1.05); }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes gardenBloomAmbientSparkles {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(-12deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(16deg); }
}

.hat-star-stage,
.hat-star-stage button {
  cursor: url("../assets/games/custom-40/06_hat_star_hop/magic-wand-cursor.webp") 18 18, pointer;
}

.hat-star-stage.magic-revealed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 53%, rgba(255, 245, 176, .78) 0 18%, rgba(255, 238, 126, .34) 34%, rgba(255,255,255,0) 62%),
    radial-gradient(circle at 24% 68%, rgba(255, 255, 255, .52), rgba(255,255,255,0) 32%),
    radial-gradient(circle at 78% 66%, rgba(147, 226, 255, .38), rgba(255,255,255,0) 34%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: magicStageBrighten 1.05s ease-out forwards;
}

.star-path {
  left: 19%;
  right: 6%;
  bottom: 146px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}

.hat-screen-word {
  position: absolute;
  left: 32.5%;
  top: 22.5%;
  z-index: 3;
  width: 35%;
  height: 28%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hat-screen-word img {
  width: min(270px, 84%);
  height: min(224px, 92%);
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(4, 15, 54, .24));
  transition: opacity .28s ease, transform .34s ease, filter .28s ease;
}

.hat-star-stage.magic-revealed .hat-screen-word img {
  opacity: 0;
  transform: scale(.68) translateY(-18px);
  filter: blur(6px);
}

.star-pad {
  position: relative;
  min-height: 184px;
  border: 0;
  border-radius: 0;
  color: #163969;
  background: transparent;
  box-shadow: none;
  font-size: 34px;
  font-weight: 1000;
  overflow: visible;
  transition: transform .2s ease;
}

.star-pad:nth-child(1) {
  left: -150px;
  top: -34px;
}

.star-pad:nth-child(2) {
  left: -78px;
  top: -18px;
}

.star-pad:nth-child(3) {
  left: 14px;
  top: -18px;
}

.star-pad .star-object-closed,
.star-pad .star-object-open {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: min(196px, 118%);
  height: 174px;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(35, 42, 92, .18));
  transition: opacity .18s ease, transform .22s ease;
}

.star-pad .star-object-open {
  opacity: 0;
  transform: translateX(-50%) scale(.86);
}

.star-pad b {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 58px;
  padding: 0;
  color: #163969;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 0 rgba(255,255,255,.86);
  transition: opacity .18s ease;
}

.star-pad:nth-child(1) b {
  top: 62%;
}

.star-pad:nth-child(2) b {
  left: 45%;
  top: 62%;
}

.star-pad:nth-child(3) b {
  left: 53%;
  top: 45%;
}

.star-pad.lit {
  transform: translateY(-10px) scale(1.04);
}

.star-pad:nth-child(3).lit {
  transform: translateY(-10px) scale(1.04);
}

.star-pad.lit::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 54px;
  z-index: 5;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 250, 178, .86) 0 22%, rgba(255, 217, 64, .42) 35%, rgba(255, 255, 255, 0) 68%),
    conic-gradient(from 12deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,205,55,.62), rgba(255,255,255,0), rgba(136,220,255,.72), rgba(255,255,255,0));
  filter: blur(.2px) drop-shadow(0 0 18px rgba(255, 220, 66, .72));
  opacity: 0;
  transform: translateX(-50%) scale(.36) rotate(-18deg);
  animation: magicAnswerGlow .72s ease-out forwards;
}

.star-pad.lit::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 118px;
  z-index: 7;
  width: 122px;
  height: 64px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.95) 0 4px, rgba(255,255,255,0) 5px),
    radial-gradient(circle at 42% 18%, rgba(255,231,76,.95) 0 5px, rgba(255,255,255,0) 6px),
    radial-gradient(circle at 67% 58%, rgba(124,220,255,.95) 0 4px, rgba(255,255,255,0) 5px),
    radial-gradient(circle at 84% 28%, rgba(255,145,232,.92) 0 5px, rgba(255,255,255,0) 6px);
  opacity: 0;
  transform: translateX(-50%) translateY(12px) scale(.62);
  animation: magicSparkPop .9s ease-out forwards;
}

.star-pad.lit .star-object-closed,
.star-pad.lit b {
  opacity: 0;
}

.star-pad.lit .star-object-open {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}

.star-pad:nth-child(1).lit .star-object-open {
  height: 202px;
  transform: translateX(-50%) scale(1.04);
}

.star-pad:nth-child(2).lit .star-object-open {
  width: min(216px, 126%);
  height: 192px;
}

.star-pad:nth-child(3).lit .star-object-open {
  bottom: -10px;
  width: min(224px, 130%);
  height: 178px;
}

.magic-reveal-word {
  position: absolute;
  left: 50%;
  bottom: 96px;
  z-index: 6;
  width: min(142px, 82%);
  height: 124px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 12px 14px rgba(12, 21, 54, .22));
  transform: translateX(-50%) scale(.7);
  animation: magicObjectPlace .48s cubic-bezier(.16, .9, .2, 1.08) forwards;
}

.star-pad:nth-child(1) .magic-reveal-word {
  bottom: 136px;
  width: min(140px, 80%);
  height: 126px;
}

.star-pad:nth-child(1).lit::before {
  bottom: 108px;
}

.star-pad:nth-child(1).lit::after {
  bottom: 178px;
}

.star-pad:nth-child(2) .magic-reveal-word {
  bottom: 82px;
  width: min(150px, 84%);
  height: 132px;
}

.star-pad:nth-child(3) .magic-reveal-word {
  bottom: 26px;
  width: min(148px, 84%);
  height: 128px;
}

.star-pad:nth-child(3).lit::before {
  bottom: 16px;
}

.star-pad:nth-child(3).lit::after {
  bottom: 78px;
}

@keyframes magicObjectPlace {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(.62);
  }
  72% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes magicAnswerGlow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(.28) rotate(-18deg);
  }
  35% {
    opacity: .92;
    transform: translateX(-50%) scale(1.08) rotate(18deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.42) rotate(42deg);
  }
}

@keyframes magicSparkPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px) scale(.48);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-42px) scale(1.18);
  }
}

@keyframes magicStageBrighten {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.premium-stage .effect-float {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  max-height: 132px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: doorEffectPop .72s ease forwards;
}

.premium-unit-stage {
  position: relative;
  overflow: hidden;
  height: clamp(620px, 54vw, 740px);
  min-height: clamp(620px, 54vw, 740px);
  border: 1px solid rgba(122, 178, 226, .42);
  border-radius: 18px;
  background: #eaf8ff;
}

.premium-unit-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.premium-current-card {
  position: absolute;
  left: 17%;
  top: 49%;
  z-index: 6;
  width: 142px;
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 18px 38px rgba(27, 50, 82, .12);
  cursor: grab;
  transform: translate(-50%, -42%);
  transition: transform .28s ease, opacity .28s ease, box-shadow .2s ease;
  backdrop-filter: blur(3px);
}

.premium-royal-workshop-rescue .premium-current-card {
  left: 50%;
  top: 85%;
  width: 154px;
  min-height: 154px;
  padding: 10px 12px;
  transform: translate(-50%, -50%);
  /* Show the word picture directly on the royal rug without a card backing. */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.premium-royal-workshop-rescue .premium-game-object {
  width: 126px;
  height: 126px;
}

/* Unit 7: keep the alphabet screen inside the royal workshop scene rather
   than floating above the artwork.  The existing upper window is the clear,
   centered reading area, so the background itself does not need repainting. */
.premium-royal-workshop-rescue .alphabet-masked-word-in-scene {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .04em;
  width: max-content;
  min-width: max-content;
  margin: 0;
  padding: 7px 13px 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(215, 224, 235, .9);
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 14px rgba(28, 48, 72, .16);
  font-size: clamp(28px, 4.1vw, 48px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.premium-current-card.placed {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: .82;
}

/* Royal Workshop: a correct object is delivered to its matching letter bench,
   then fades away. The distance comes from the two rendered centers so it
   remains aligned when the stage is resized. */
.premium-royal-workshop-rescue .premium-current-card.royal-workshop-object-delivery {
  z-index: 22;
  pointer-events: none;
  animation: royal-workshop-object-delivery 820ms cubic-bezier(.22, .8, .25, 1) forwards;
}

@keyframes royal-workshop-object-delivery {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  78% {
    transform: translate(calc(-50% + var(--royal-delivery-x)), calc(-50% + var(--royal-delivery-y))) scale(.58);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--royal-delivery-x)), calc(-50% + var(--royal-delivery-y))) scale(.42);
    opacity: 0;
  }
}

.premium-current-card.dragging {
  cursor: grabbing;
  transform: translate(-50%, -48%) scale(1.08);
  box-shadow: 0 26px 46px rgba(27, 50, 82, .18);
}

.premium-current-card strong {
  font-size: 13px;
  color: #15233d;
  opacity: .78;
}

.premium-game-object {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(28, 55, 85, .12));
}

.premium-stations,
.memory-word-grid,
.route-object-grid,
.festival-booths {
  position: absolute;
  z-index: 4;
  left: 220px;
  right: 42px;
  bottom: 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.royal-stations {
  inset: 0;
  display: block;
  pointer-events: none;
}

.premium-station,
.memory-word-card,
.route-object-card,
.festival-booth {
  min-height: 94px;
  border: 1px solid rgba(139, 185, 226, .8);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 16px 30px rgba(28, 55, 85, .13);
  color: #15233d;
  font-weight: 900;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.royal-stations .premium-station {
  position: absolute;
  pointer-events: auto;
  width: 21%;
  min-height: 82px;
  border: 2px dashed rgba(47, 111, 228, .42);
  border-radius: 20px;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 14px 26px rgba(28, 55, 85, .09);
  backdrop-filter: blur(2px);
}

.premium-royal-workshop-rescue .royal-stations .premium-station {
  top: 43%;
  width: 19%;
  min-height: 86px;
  /* Preserve each station's full click target and letter badge, but do not
     cover the workshop artwork with a white answer-card backing. */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.premium-royal-workshop-rescue .premium-current-card strong {
  display: none;
}

.royal-stations .station-p { left: 20%; top: 70%; }
.royal-stations .station-q { left: 39.5%; top: 70%; }
.royal-stations .station-r { right: 17%; top: 70%; }

.premium-royal-workshop-rescue .royal-stations .station-p {
  left: 8.5%;
  top: 43%;
}

.premium-royal-workshop-rescue .royal-stations .station-q {
  left: 42%;
  top: 42%;
}

.premium-royal-workshop-rescue .royal-stations .station-r {
  left: 77%;
  right: auto;
  top: 43%;
}

.royal-stations .premium-station:hover {
  transform: translateY(-5px);
  border-color: rgba(47, 111, 228, .75);
  background: rgba(255, 255, 255, .64);
}

.premium-station b,
.festival-booth b {
  display: block;
  font-size: 38px;
  color: #2f6fe4;
}

.royal-stations .premium-station b {
  font-size: clamp(52px, 4.4vw, 70px);
  line-height: .85;
}

.premium-station span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #607086;
}

.royal-stations .premium-station span {
  font-size: 0;
}

.royal-stations .premium-station span::after {
  content: none;
}

@media (max-width: 760px) {
  .premium-royal-workshop-rescue .alphabet-masked-word-in-scene {
    top: 3%;
    padding: 6px 10px 7px;
    font-size: clamp(25px, 7vw, 38px);
  }
}

/* Alphabet Unit 8: independently placed snowflakes, word panel, and rewards. */
.snowflake-link-stage {
  min-height: clamp(630px, 56vw, 720px);
  overflow: hidden;
  border-radius: 30px;
  isolation: isolate;
  background: #e4f4ff;
}
.snowflake-link-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.snowflake-link-layer { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.snowflake-link-line { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: 0; stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 3px #74dcff) drop-shadow(0 0 8px #fff); }
.snowflake-link-stage.sound-linked .snowflake-link-line { opacity: 1; animation: snowflakeLinkDraw .72s ease-out forwards; }
.snowflake-link-title { position: absolute; z-index: 10; left: 50%; top: 3%; width: min(620px, 64%); transform: translateX(-50%); padding: 9px 18px 10px; border: 3px solid #fff; border-radius: 24px; background: rgba(242,252,255,.94); box-shadow: 0 8px 22px rgba(72,124,180,.23); color: #275995; text-align: center; }
.snowflake-link-title b { display: block; font-size: clamp(20px, 2.2vw, 33px); letter-spacing: .06em; }
.snowflake-link-title span { display: block; margin-top: 2px; font-size: clamp(12px, 1.15vw, 17px); font-weight: 900; }
.snowflake-link-word-panel { position: absolute; z-index: 8; left: 50%; top: 22%; width: min(260px, 26%); min-width: 172px; min-height: 185px; padding: 13px 10px 10px; transform: translateX(-50%); display: grid; place-items: center; align-content: center; gap: 5px; border: 4px solid rgba(255,255,255,.94); border-radius: 28px; background: linear-gradient(145deg,rgba(245,253,255,.96),rgba(197,232,255,.91)); box-shadow: 0 14px 30px rgba(65,118,172,.28), inset 0 0 0 2px #b7e4fa; }
.snowflake-link-word-panel > small { color: #427cb7; font-size: 11px; font-weight: 1000; letter-spacing: .12em; }
.snowflake-link-word { position: static !important; display: flex; justify-content: center; width: auto; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #245a9b; font-size: clamp(32px,4.4vw,58px); }
.snowflake-link-word .alphabet-missing-letter { width: .88em; height: 1em; border-bottom: .14em solid #367fbe; }
.snowflake-link-picture { width: 92px; height: 78px; object-fit: contain; }
.snowflake-link-choices { position: absolute; inset: 0; z-index: 9; }
.snowflake-link-choice { position: absolute; left: var(--snow-x); top: var(--snow-y); width: clamp(108px,15%,176px); aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%,-50%); filter: drop-shadow(0 10px 12px rgba(54,115,166,.3)); transition: transform .18s ease, filter .18s ease; }
.snowflake-link-choice img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.snowflake-link-choice b { position: absolute; left: 50%; top: 50%; color: #245a9b; font-size: clamp(26px,3.7vw,48px); font-weight: 1000; line-height: 1; text-shadow: 0 2px 0 #fff,0 4px 8px rgba(43,109,166,.24); transform: translate(-50%,-50%); pointer-events: none; }
.snowflake-link-choice:hover:not(:disabled) { transform: translate(-50%,calc(-50% - 9px)) scale(1.05); filter: drop-shadow(0 16px 15px rgba(53,122,179,.38)); }
.snowflake-link-choice.correct { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 17px #58dcff); animation: snowflakeChoiceCorrect .7s ease; }
.snowflake-link-choice.wrong { animation: snowflakeChoiceWrong .48s ease; }
.snowflake-link-choice:disabled:not(.correct) { opacity: .55; }
.snowflake-reward { position: absolute; z-index: 6; pointer-events: none; text-align: center; filter: drop-shadow(0 10px 12px rgba(48,99,150,.22)); }
.snowflake-reward img { display: block; width: 100%; height: auto; clip-path: inset(var(--reward-cut) 0 0 0); transition: clip-path .7s cubic-bezier(.2,.82,.24,1); }
.snowflake-reward span { position: absolute; z-index: 2; left: 50%; bottom: -15px; width: max-content; padding: 4px 8px; transform: translateX(-50%); border: 2px solid #fff; border-radius: 999px; background: rgba(238,249,255,.9); color: #28649f; box-shadow: 0 3px 8px rgba(72,128,179,.22); font-size: 11px; font-weight: 1000; }
.snowflake-reward.is-building img { animation: snowflakeRewardArrive .7s ease; }
.snowflake-reward-snowman { left: 6%; top: 63%; width: clamp(92px,14%,150px); }
.snowflake-reward-igloo { left: 78.5%; top: 68%; width: clamp(118px,17%,182px); }
@keyframes snowflakeLinkDraw { to { stroke-dashoffset: 0; } }
@keyframes snowflakeChoiceCorrect { 42% { transform: translate(-50%,-50%) scale(1.16) rotate(9deg); } }
@keyframes snowflakeChoiceWrong { 20%,60% { transform: translate(-50%,-50%) translateX(-9px); } 40%,80% { transform: translate(-50%,-50%) translateX(9px); } }
@keyframes snowflakeRewardArrive { 45% { transform: translateY(-12px) scale(1.07); } }
@media (max-width: 760px) {
  .snowflake-link-stage { min-height: 590px; border-radius: 22px; }
  .snowflake-link-title { top: 2%; width: 84%; padding: 8px 12px 10px; }
  .snowflake-link-title b { font-size: 18px; }
  .snowflake-link-title span { font-size: 12px; }
  .snowflake-link-word-panel { top: 20%; width: 42%; min-width: 142px; min-height: 134px; padding: 8px; border-radius: 22px; }
  .snowflake-link-picture { width: 70px; height: 56px; }
  .snowflake-link-choice { width: clamp(76px,27vw,116px); }
  .snowflake-link-choice b { font-size: clamp(22px,8vw,34px); }
  .snowflake-link-choice:nth-child(1) { --snow-x: 19% !important; --snow-y: 49% !important; }
  .snowflake-link-choice:nth-child(2) { --snow-x: 81% !important; --snow-y: 49% !important; }
  .snowflake-link-choice:nth-child(3) { --snow-x: 19% !important; --snow-y: 74% !important; }
  .snowflake-link-choice:nth-child(4) { --snow-x: 81% !important; --snow-y: 74% !important; }
  .snowflake-reward span { bottom: -11px; padding: 3px 5px; font-size: 9px; }
  .snowflake-reward-snowman { left: 2%; top: 78%; width: 15%; }
  .snowflake-reward-igloo { left: 83%; top: 80%; width: 16%; }
}

/* Alphabet lessons: derive the visible focus from the current word, never
   from the Phonics vowel focus. */
.word-image-fallback { display: none !important; }
.word-image-fallback[hidden] { display: none !important; }
.word-image-fallback:not([hidden]) { display: grid !important; place-items: center; min-width: 4ch; min-height: 3em; padding: 12px; border-radius: 18px; color: #1f6da7; background: #edf8ff; font-size: clamp(22px,4vw,38px); font-weight: 1000; }
.alphabet-listen-view { display: grid; gap: 14px; min-height: 0; }
.alphabet-listen-focus { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; border: 2px solid #ffc5c3; border-radius: 20px; background: linear-gradient(135deg,#fffdfd,#fff4f3); box-shadow: 0 9px 20px rgba(229,82,79,.1); }
.alphabet-listen-letter-badge,.alphabet-speak-letter-badge { display: grid; place-items: center; align-content: center; width: 64px; height: 64px; border: 4px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ff7471,#e94751); box-shadow: 0 0 0 3px #ffbbb6,0 8px 14px rgba(194,54,61,.22); }
.alphabet-listen-letter-badge b,.alphabet-speak-letter-badge b { font-size: 33px; line-height: .82; }
.alphabet-listen-letter-badge span,.alphabet-speak-letter-badge span { margin-top: 3px; font-size: 12px; font-weight: 950; }
.alphabet-listen-copy > span,.alphabet-speak-copy > span { color: #d83e47; font-size: 11px; font-weight: 1000; letter-spacing: .12em; }
.alphabet-listen-copy h1,.alphabet-speak-copy h1 { margin: 1px 0 2px; color: #1b3152; font-size: clamp(24px,3.2vw,38px); }
.alphabet-listen-copy p,.alphabet-speak-copy p { margin: 0; color: #577089; font-size: 14px; font-weight: 800; }
.alphabet-hear-button { min-width: 110px; padding: 11px 14px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#ff7471,#e94751); box-shadow: 0 6px 0 #ca3945,0 10px 16px rgba(190,55,65,.2); font-weight: 1000; cursor: pointer; }
.alphabet-hear-button:active { transform: translateY(5px); box-shadow: 0 1px 0 #ca3945; }
.alphabet-listen-stage { display: grid; place-items: center; gap: 12px; min-height: 370px; padding: 24px; border: 2px solid #d9e8f6; border-radius: 26px; background: linear-gradient(145deg,#fafdff,#eef8ff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9),0 16px 34px rgba(33,75,116,.1); }
.alphabet-listen-picture { display: grid; place-items: center; width: min(270px,45%); height: 180px; padding: 10px; overflow: hidden; border: 4px solid #fff; border-radius: 24px; background: #fff; box-shadow: 0 12px 24px rgba(39,76,112,.14); }
.alphabet-listen-picture .word-art { display: grid; width: 78%; height: 78%; min-height: 0; max-width: 100%; max-height: 100%; place-items: center; background: transparent; box-shadow: none; }
.alphabet-speak-picture .word-art { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; background: transparent; box-shadow: none; }
.alphabet-listen-picture img { display: block; width: 100% !important; height: 100% !important; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.alphabet-speak-picture img { width: 100%; height: 100%; object-fit: contain; }
.alphabet-target-sound { color: #e94751; font-weight: 1000; }
.alphabet-listen-letter-row { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; }
.alphabet-listen-letter { display: grid; width: 78px; min-height: 82px; place-items: center; align-content: center; gap: 4px; padding: 8px; border: 3px solid #cae0f0; border-radius: 18px; color: #1f6da7; background: linear-gradient(145deg,#f7fdff,#dff3fc); box-shadow: 0 7px 0 #a8d4e9,0 12px 18px rgba(53,117,151,.14); cursor: pointer; transition: transform .18s ease,filter .18s ease; }
.alphabet-listen-hand { position: absolute; left: -35px; top: 24px; z-index: 4; display: block; width: 64px; height: 64px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 5px rgba(38,61,93,.2)); transform-origin: 68% 72%; animation: alphabetListenHandBob 1.15s ease-in-out infinite; }
.alphabet-listen-hand.tap { animation: alphabetListenHandTap .42s ease-out; }
@keyframes alphabetListenHandBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes alphabetListenHandTap { 0% { transform: translateY(0) rotate(-4deg) scale(1); } 55% { transform: translateY(8px) rotate(8deg) scale(.94); } 100% { transform: translateY(0) rotate(-4deg) scale(1); } }
.alphabet-listen-letter b { font-size: 35px; line-height: .8; }
.alphabet-listen-letter span { font-size: 12px; font-weight: 950; }
.alphabet-listen-letter:hover,.alphabet-listen-letter.active { transform: translateY(-6px) scale(1.04); filter: brightness(1.06); }
.alphabet-listen-letter.is-first-sound { border-color: #ff9d99; color: #fff; background: linear-gradient(145deg,#ff7975,#e94751); box-shadow: 0 7px 0 #c83946,0 0 0 5px rgba(255,113,107,.14),0 12px 20px rgba(195,55,65,.22); }
.alphabet-speak-view { display: grid; gap: 14px; min-height: 0; }
.alphabet-speak-view .say-coach-word.alphabet-speak-word-art { display: grid !important; width: min(190px,100%); height: 150px; margin: 8px auto; place-items: center; }
.alphabet-speak-view .say-coach-word.alphabet-speak-word-art .word-art { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; }
.alphabet-speak-view .say-coach-word.alphabet-speak-word-art img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.alphabet-speak-view .say-coach-phonemes > .target-vowel-card { color: #fff; background: linear-gradient(145deg,#ff625c,#d92f35) !important; }
.alphabet-speak-view .alphabet-speak-stage { position: relative; display: grid; grid-template-columns: auto minmax(180px,260px) minmax(220px,1fr); grid-template-rows: 1fr auto; align-items: center; gap: 20px; min-height: 360px !important; padding: 28px; overflow: hidden; border: 2px solid #d9e7f5; border-radius: 28px; background: linear-gradient(135deg,#f8fcff,#edf6ff) !important; box-shadow: 0 18px 36px rgba(36,83,126,.13) !important; aspect-ratio: auto !important; }
.alphabet-speak-view .alphabet-speak-letter-badge { align-self: start; justify-self: start; }
.alphabet-speak-picture { display: grid; width: 100%; height: 210px; place-items: center; padding: 12px; border: 4px solid #fff; border-radius: 24px; background: #fff; box-shadow: 0 14px 26px rgba(44,79,112,.14); }
.alphabet-speak-copy h1 { font-size: clamp(34px,4.4vw,52px); }
.alphabet-speak-copy p { font-size: 17px; line-height: 1.5; }
.alphabet-speak-actions { display: flex; grid-column: 2 / -1; justify-content: flex-end; gap: 10px; }
.alphabet-speak-actions button { min-width: 112px; }
.alphabet-record-button { border: 0; border-radius: 14px; background: linear-gradient(145deg,#ff7471,#e94751); box-shadow: 0 6px 0 #ca3945,0 10px 16px rgba(190,55,65,.2); }
.alphabet-record-button.recording { background: linear-gradient(145deg,#ff4c60,#bd2947); animation: recordPulse .62s ease-in-out infinite alternate; }
@media (max-width: 760px) {
  .alphabet-listen-focus { grid-template-columns: auto 1fr; padding: 12px; }
  .alphabet-hear-button { grid-column: 1 / -1; width: 100%; }
  .alphabet-listen-stage { min-height: 340px; padding: 18px 12px; }
  .alphabet-listen-picture { width: min(230px,78%); height: 160px; }
  .alphabet-listen-letter { width: 64px; min-height: 70px; border-radius: 15px; }
  .alphabet-listen-letter b { font-size: 29px; }
  .alphabet-listen-hand { left: -30px; top: 20px; width: 56px; height: 56px; }
  .alphabet-speak-view .alphabet-speak-stage { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; min-height: 470px !important; padding: 20px; gap: 13px; }
  .alphabet-speak-picture { grid-column: 1 / -1; height: 175px; }
  .alphabet-speak-copy { grid-column: 1 / -1; text-align: center; }
  .alphabet-speak-actions { grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
  .alphabet-speak-actions button { min-width: 100px; }
}

.memory-word-grid,
.festival-booths {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.memory-word-card {
  font-size: 24px;
}

.memory-map-stage .premium-unit-bg {
  filter: saturate(1.03);
}

.memory-map-targets {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.memory-map-target {
  position: absolute;
  width: 118px;
  height: 102px;
  display: grid;
  place-items: center;
  /* Keep the target area sized for click/drag, without a visible dotted frame. */
  border: 2px solid transparent;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(1px);
  transform: translate(-50%, -50%);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.memory-map-target:hover {
  transform: translate(-50%, -50%) translateY(-5px);
  background: rgba(255, 255, 255, .2);
  border-color: rgba(47, 111, 228, .72);
}

.memory-map-target .premium-game-object {
  width: 84px;
  height: 74px;
}

.memory-map-target span {
  position: absolute;
  left: 50%;
  bottom: -13px;
  min-width: 78px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #15233d;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: 0 8px 16px rgba(28, 55, 85, .14);
  opacity: 0;
}

.memory-map-target.matched span {
  opacity: 1;
}

.memory-map-target.matched {
  pointer-events: none;
}

.memory-map-target.correct {
  border-color: #69d99b;
  background: rgba(220, 255, 235, .26);
}

.memory-map-target.wrong {
  animation: blockChoiceShake .28s ease;
}

.memory-map-target.target-apple,
.memory-map-target.target-jam,
.memory-map-target.target-sun { left: 25.5%; top: 28%; }

.memory-map-target.target-bed,
.memory-map-target.target-key,
.memory-map-target.target-tiger { left: 47%; top: 26%; }

.memory-map-target.target-cow,
.memory-map-target.target-lion,
.memory-map-target.target-umbrella { left: 68%; top: 28%; }

.memory-map-target.target-dog,
.memory-map-target.target-moon,
.memory-map-target.target-van { left: 76.5%; top: 45%; }

.memory-map-target.target-egg,
.memory-map-target.target-nest,
.memory-map-target.target-water { left: 22%; top: 52%; }

.memory-map-target.target-fish,
.memory-map-target.target-orange,
.memory-map-target.target-xylophone { left: 79%; top: 60%; }

.memory-map-target.target-yak { left: 49%; top: 43%; }
.memory-map-target.target-zebra { left: 43%; top: 55%; }

.memory-map-target.target-jam { left: 28%; top: 34%; }
.memory-map-target.target-key { left: 43.5%; top: 31%; }
.memory-map-target.target-lion { left: 65%; top: 31%; }
.memory-map-target.target-orange { left: 83%; top: 61%; }

.memory-map-stage.review-unit-04 .memory-map-target {
  width: 148px;
  height: 118px;
}

.memory-map-stage.review-unit-04 .memory-map-target .premium-game-object,
.memory-map-stage.review-unit-08 .memory-map-target .premium-game-object,
.memory-map-stage.review-unit-12 .memory-map-target .premium-game-object {
  width: 96px;
  height: 86px;
}

.memory-map-stage.review-unit-04 .memory-map-target.target-apple { left: 27.2%; top: 25.0%; }
.memory-map-stage.review-unit-04 .memory-map-target.target-bed { left: 47%; top: 22.4%; }
.memory-map-stage.review-unit-04 .memory-map-target.target-cow { left: 71.8%; top: 24.8%; }
.memory-map-stage.review-unit-04 .memory-map-target.target-egg { left: 15.2%; top: 53.4%; }
.memory-map-stage.review-unit-04 .memory-map-target.target-dog { left: 87.1%; top: 40.4%; }
.memory-map-stage.review-unit-04 .memory-map-target.target-fish { left: 83.2%; top: 60.8%; }

.memory-map-stage.review-unit-08 .memory-map-target {
  width: 144px;
  height: 116px;
}

.memory-map-stage.review-unit-08 .memory-map-target .premium-game-object {
  transform: none;
}

.memory-map-stage.review-unit-08 .memory-map-target.target-jam { left: 26.6%; top: 24.8%; }
.memory-map-stage.review-unit-08 .memory-map-target.target-key { left: 51.5%; top: 23.8%; }
.memory-map-stage.review-unit-08 .memory-map-target.target-lion { left: 80.0%; top: 24.2%; }
.memory-map-stage.review-unit-08 .memory-map-target.target-nest { left: 24.2%; top: 55.7%; }
.memory-map-stage.review-unit-08 .memory-map-target.target-moon { left: 50.5%; top: 64.4%; }
.memory-map-stage.review-unit-08 .memory-map-target.target-orange { left: 80.8%; top: 54.8%; }

.memory-map-stage.review-unit-08 .memory-word-tray {
  bottom: 68px;
}

.memory-map-stage.review-unit-12 .memory-map-target {
  width: 148px;
  height: 116px;
}

.memory-map-stage.review-unit-12 .memory-map-target .premium-game-object {
  width: 104px;
  height: 92px;
}

.memory-map-stage.review-unit-12 .memory-map-target.target-sun { left: 25.8%; top: 18.3%; }
.memory-map-stage.review-unit-12 .memory-map-target.target-tiger { left: 50.6%; top: 18.1%; }
.memory-map-stage.review-unit-12 .memory-map-target.target-umbrella { left: 76.3%; top: 18.2%; }
.memory-map-stage.review-unit-12 .memory-map-target.target-water { left: 24.6%; top: 53.5%; }
.memory-map-stage.review-unit-12 .memory-map-target.target-zebra { left: 50.5%; top: 53.3%; }
.memory-map-stage.review-unit-12 .memory-map-target.target-xylophone { left: 77.6%; top: 53.4%; }

.memory-map-stage.review-unit-12 .memory-word-tray {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  left: 7%;
  right: 7%;
  bottom: 16px;
}

.memory-word-tray {
  position: absolute;
  z-index: 6;
  left: 5%;
  right: 5%;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.memory-map-stage.review-map-wide .memory-word-tray {
  left: 8%;
  right: 8%;
  bottom: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
}

.memory-word-tray .memory-word-card {
  min-height: 64px;
  border: 1px solid rgba(139, 185, 226, .8);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 22px rgba(28, 55, 85, .14);
  color: #15233d;
  font-size: 20px;
  font-weight: 1000;
  cursor: grab;
}

.memory-map-stage.review-map-wide .memory-word-card {
  min-height: 52px;
  font-size: 18px;
}

.memory-word-tray .memory-word-card.dragging {
  transform: translateY(-8px) scale(1.04);
  cursor: grabbing;
}

.memory-word-tray .memory-word-card.selected {
  border-color: #69d99b;
  box-shadow: 0 0 0 5px rgba(105, 217, 155, .22), 0 18px 28px rgba(28, 55, 85, .14);
  transform: translateY(-5px);
}

.memory-word-tray .memory-word-card.matched {
  display: none;
}

.route-clue {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
  width: min(430px, 46%);
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 251, 217, .92);
  border: 1px solid rgba(255, 206, 85, .75);
  box-shadow: 0 16px 30px rgba(73, 55, 16, .12);
  color: #6d4b00;
  font-weight: 900;
  text-align: center;
}

.route-object-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.route-object-card {
  min-height: 134px;
  display: grid;
  place-items: center;
  gap: 2px;
}

.route-object-card .premium-game-object {
  width: 82px;
  height: 82px;
}

.route-match-stage .premium-unit-bg {
  filter: saturate(1.04);
}

.route-picture-pulse {
  position: absolute;
  z-index: 5;
  width: 118px;
  height: 102px;
  display: grid;
  place-items: center;
  border: 3px dashed rgba(255, 255, 255, .96);
  border-radius: 28px;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 16px 28px rgba(31, 54, 82, .13);
  animation: routePictureBlink 1s ease-in-out infinite;
}

.route-picture-pulse .premium-game-object {
  width: 82px;
  height: 76px;
}

.route-picture-pulse.matched {
  animation: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: scale(1.05);
}

.route-picture-pulse.route-van { left: 9%; top: 42%; }
.route-picture-pulse.route-vest { left: 24%; top: 45%; }
.route-picture-pulse.route-water { left: 27%; top: 11%; }
.route-picture-pulse.route-worm { left: 47%; top: 10%; }
.route-picture-pulse.route-xray { right: 24%; top: 10%; }
.route-picture-pulse.route-xylophone { right: 22%; top: 45%; }

.route-word-tray {
  position: absolute;
  z-index: 6;
  left: 5%;
  right: 5%;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.route-word-card {
  min-height: 64px;
  border: 1px solid rgba(139, 185, 226, .8);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 22px rgba(28, 55, 85, .14);
  color: #15233d;
  font-size: 19px;
  font-weight: 1000;
}

.route-word-card.correct {
  border-color: #74d7a0;
  box-shadow: 0 0 0 5px rgba(116, 215, 160, .24), 0 18px 34px rgba(28, 55, 85, .14);
  transform: translateY(-5px);
}

.route-word-card.wrong {
  animation: blockChoiceShake .28s ease;
}

.route-word-card.matched {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.82);
}

.rocket-launch-stage .premium-unit-bg {
  filter: saturate(1.05) contrast(1.02);
}

.rocket-command-stage {
  min-height: clamp(640px, 55vw, 760px);
}

.rocket-command-stage .premium-unit-bg {
  object-position: center center;
  transform: scale(1.055);
  transform-origin: 50% 52%;
}

.rocket-control-board {
  position: absolute;
  z-index: 6;
  display: block;
}

.rocket-display-frame {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(5px, .8vw, 10px);
  padding: clamp(13px, 1.7vw, 22px);
  overflow: hidden;
  border: clamp(4px, .55vw, 7px) solid #c8d4e4;
  border-radius: clamp(24px, 3vw, 38px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.65), transparent 22%),
    linear-gradient(180deg, #206fd0 0%, #0b4caa 44%, #073476 100%);
  box-shadow:
    inset 0 0 0 clamp(3px, .42vw, 6px) #0a2c69,
    inset 0 0 0 clamp(6px, .85vw, 11px) rgba(104, 184, 255, .65),
    inset 0 -16px 22px rgba(0, 18, 61, .32),
    0 18px 24px rgba(7, 17, 54, .34),
    0 0 0 4px rgba(255, 117, 82, .78);
}

.rocket-display-frame::before {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.rocket-display-frame::before {
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  border: 1px solid rgba(192, 231, 255, .5);
  border-radius: inherit;
}

.rocket-display-frame > * {
  position: relative;
  z-index: 1;
}

.rocket-letter-board {
  /* The small control board stays clear of the central flight window. */
  left: 4.4%;
  top: 17.5%;
  width: 25.5%;
  height: 39%;
  transform: scale(.76);
  transform-origin: left top;
}

.rocket-command-stage .rocket-word-screen {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .04em;
  min-width: max-content;
  margin: 0;
  padding: 7px 13px 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(215, 224, 235, .9);
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 14px rgba(28, 48, 72, .16);
  font-size: clamp(28px, 4.1vw, 48px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.rocket-screen-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #eff9ff;
}

.rocket-screen-kicker {
  overflow: hidden;
  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 1000;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.rocket-screen-light {
  width: clamp(9px, 1.15vw, 14px);
  height: clamp(9px, 1.15vw, 14px);
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: #91f0b5;
  box-shadow: 0 0 10px #91f0b5;
}

.rocket-screen-instruction {
  margin: 0;
  color: rgba(237, 248, 255, .86);
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 800;
  line-height: 1.15;
}

.rocket-mission-object {
  width: min(240px, 82%);
  height: min(240px, 86%);
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 18px 24px rgba(3, 10, 40, .22));
}

.rocket-picture-viewport {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(193, 231, 255, .64);
  border-radius: clamp(15px, 2vw, 24px);
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.78), rgba(186,224,255,.24) 48%, rgba(0,34,92,.1) 100%);
  box-shadow: inset 0 0 22px rgba(0, 19, 78, .34);
}

.rocket-letter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  align-content: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  width: 84%;
  gap: clamp(5px, .72vw, 9px);
  /* Keep the lower pair inside the painted launch-control screen. */
  transform: translateY(-18px);
}

.rocket-letter-token {
  min-width: 0;
  min-height: clamp(43px, 4.8vw, 56px);
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 5px 3px 4px;
  border: 2px solid rgba(255, 229, 119, .95);
  border-radius: clamp(16px, 2vw, 24px);
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.86) 0 11%, transparent 12%),
    linear-gradient(180deg, #fff7b7 0%, #ffc83f 47%, #e88522 100%);
  box-shadow:
    inset 0 3px rgba(255,255,255,.8),
    inset 0 -8px 0 rgba(176, 91, 17, .34),
    0 6px 0 #b35b16,
    0 13px 20px rgba(4, 19, 61, .3);
  color: #11326d;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.rocket-letter-token:hover,
.rocket-letter-token:focus-visible {
  filter: brightness(1.08);
  outline: 3px solid #d8f5ff;
  outline-offset: 3px;
  transform: translateY(-3px);
}

.rocket-letter-token b {
  align-self: end;
  font-size: clamp(22px, 2.35vw, 29px);
  font-weight: 1000;
  line-height: .92;
}

.rocket-letter-token small {
  align-self: start;
  margin-top: 4px;
  color: rgba(17, 50, 109, .78);
  font-size: clamp(7px, .72vw, 9px);
  font-weight: 1000;
  letter-spacing: .08em;
}

.rocket-letter-token.correct {
  border-color: #dfffea;
  background: linear-gradient(#edfff4, #91efb9 50%, #3cbf70);
  box-shadow: inset 0 3px rgba(255,255,255,.8), inset 0 -8px 0 rgba(17, 111, 61, .34), 0 6px 0 #1e8f50, 0 0 22px rgba(118, 247, 176, .9);
  transform: translateY(-4px) scale(1.06);
}

.rocket-letter-token.wrong {
  animation: blockChoiceShake .28s ease;
}

.rocket-flight-window {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 58%;
  width: min(42%, 430px);
  height: min(64%, 315px);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(199, 241, 255, .86);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(216, 249, 255, .17), rgba(72, 178, 255, .05));
  box-shadow: inset 0 0 0 6px rgba(32, 105, 210, .14), 0 0 28px rgba(127, 229, 255, .22);
  pointer-events: none;
}

.rocket-flight-window::before,
.rocket-flight-window::after {
  position: absolute;
  width: 28px;
  height: 28px;
  content: "";
  border-color: #effcff;
  border-style: solid;
}

.rocket-flight-window::before {
  top: -8px;
  left: -8px;
  border-width: 4px 0 0 4px;
  border-radius: 9px 0 0;
}

.rocket-flight-window::after {
  right: -8px;
  bottom: -8px;
  border-width: 0 4px 4px 0;
  border-radius: 0 0 9px;
}

.rocket-flight-quote {
  position: absolute;
  color: rgba(239, 252, 255, .92);
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}

.rocket-flight-quote-open::before { content: "\201C"; }
.rocket-flight-quote-close::before { content: "\201D"; }
.rocket-flight-quote-open { top: 7px; left: 14px; }
.rocket-flight-quote-close { right: 14px; bottom: -4px; }

.rocket-ship {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 62%;
  --rocket-size: clamp(220px, 27vw, 310px);
  --rocket-height: clamp(218px, 27vw, 276px);
  width: var(--rocket-size);
  height: var(--rocket-height);
  object-fit: contain;
  object-position: center center;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 24px 28px rgba(17, 28, 64, .28));
  --launch-distance: 660px;
  --launch-scale: .64;
  --launch-duration: 1s;
  transition: transform var(--launch-duration) cubic-bezier(.16,.84,.2,1), opacity .82s ease, filter .25s ease;
}

.rocket-launch-stage.ignition .rocket-ship {
  filter: brightness(1.12) drop-shadow(0 0 20px rgba(152, 235, 255, .9));
}

.rocket-launch-stage[data-spacecraft="turquoise-lander"] .rocket-ship { --rocket-size: clamp(208px, 25vw, 278px); }
.rocket-launch-stage[data-spacecraft="gold-observer"] .rocket-ship { --rocket-size: clamp(194px, 23vw, 255px); }
.rocket-launch-stage[data-spacecraft="lavender-pod"] .rocket-ship { --rocket-size: clamp(196px, 23vw, 258px); }
.rocket-launch-stage[data-spacecraft="mint-shuttle"] .rocket-ship { --rocket-size: clamp(190px, 22vw, 250px); }
.rocket-launch-stage[data-spacecraft="coral-explorer"] .rocket-ship { --rocket-size: clamp(193px, 23vw, 254px); }

.rocket-launch-stage[data-flight^="lift-"].launched .rocket-ship {
  transform: translate(-50%, calc(-50% - var(--launch-distance))) scale(var(--launch-scale));
  opacity: .9;
}

.rocket-launch-stage[data-flight="lift-steady"] .rocket-ship { --launch-duration: 1.05s; --launch-distance: 650px; }
.rocket-launch-stage[data-flight="lift-brisk"] .rocket-ship { --launch-duration: .88s; --launch-distance: 690px; --launch-scale: .6; }
.rocket-launch-stage[data-flight="lift-gentle"] .rocket-ship { --launch-duration: 1.14s; --launch-distance: 630px; --launch-scale: .68; }
.rocket-launch-stage[data-flight="lift-swift"] .rocket-ship { --launch-duration: .82s; --launch-distance: 710px; --launch-scale: .58; }
.rocket-launch-stage[data-flight="lift-calm"] .rocket-ship { --launch-duration: 1.2s; --launch-distance: 640px; --launch-scale: .66; }

.rocket-word-reveal {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 48%;
  width: clamp(116px, 16vw, 178px);
  padding: clamp(7px, .9vw, 11px) clamp(10px, 1.15vw, 15px) clamp(8px, 1vw, 12px);
  display: grid;
  justify-items: center;
  gap: 2px;
  border: 3px solid rgba(219, 247, 255, .96);
  border-radius: clamp(16px, 2vw, 24px);
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(192,233,255,.94));
  box-shadow: 0 12px 28px rgba(3, 16, 70, .42), 0 0 0 5px rgba(99, 218, 255, .24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -42%) scale(.72);
  transition: opacity .28s ease, transform .5s cubic-bezier(.2,.9,.25,1), visibility 0s linear .5s;
}

.rocket-word-reveal > span {
  color: #1465ba;
  font-size: clamp(8px, .8vw, 10px);
  font-weight: 1000;
  letter-spacing: .08em;
}

.rocket-word-reveal-picture {
  width: clamp(72px, 10vw, 112px);
  height: clamp(62px, 8vw, 92px);
  display: grid;
  place-items: center;
}

.rocket-complete-object {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(12, 60, 128, .24));
}

.rocket-word-reveal > strong {
  color: #173d78;
  font-size: clamp(17px, 2.15vw, 27px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .05em;
}

.rocket-launch-stage.word-revealed .rocket-word-reveal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.rocket-launch-stage.launching .rocket-letter-token {
  pointer-events: none;
}

@media (max-width: 760px) {
  .rocket-command-stage {
    min-height: max(590px, 122vw);
  }

  .rocket-letter-board {
    left: 3.2%;
    top: 13.5%;
    width: 28%;
    height: 35%;
    transform: scale(.76);
  }

  .rocket-flight-window {
    top: 58%;
    width: min(71%, 360px);
    height: 64%;
    border-radius: 18px;
  }

  .rocket-flight-quote {
    font-size: 31px;
  }

  .rocket-launch-stage .rocket-ship {
    --rocket-size: min(58vw, 220px) !important;
    --rocket-height: min(54vw, 220px);
  }

  /* This selector also overrides the older Unit 10 mobile rocket size.  Keep
     the wide spacecraft fully inside the central flight window. */
  #app main.game-screen .action-rocket-letter-launch .rocket-launch-stage .rocket-ship {
    --rocket-size: clamp(122px, 36.5vw, 146px) !important;
  }

  .rocket-command-stage .rocket-word-screen {
    top: 5%;
    padding: 6px 10px 7px;
    font-size: clamp(25px, 7vw, 38px);
  }

  .rocket-display-frame {
    padding: 10px 8px 8px;
    border-radius: 19px;
  }

  .rocket-screen-kicker { font-size: 9px; }
  .rocket-screen-instruction { font-size: 9px; }
  .rocket-letter-grid {
    gap: 5px;
    /* The scaled mobile control needs a slightly larger visual lift. */
    transform: translateY(-14px);
  }
  .rocket-letter-token { min-height: 42px; border-radius: 14px; }
  .rocket-letter-token b { font-size: 22px; }
  .rocket-letter-token small { display: none; }
  .rocket-mission-object { width: 90%; height: 88%; }
  .rocket-word-reveal {
    top: 51%;
    width: clamp(104px, 31vw, 138px);
  }

  .rocket-word-reveal-picture {
    width: clamp(66px, 20vw, 90px);
    height: clamp(56px, 17vw, 76px);
  }
}

.premium-spell-board,
.zoo-word-repair {
  position: absolute;
  z-index: 6;
  left: 50%;
  right: auto;
  bottom: 28px;
  width: min(520px, 58%);
  transform: translateX(-50%);
  display: grid;
  gap: 16px;
}

.premium-spell-slots,
.zoo-word-slots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.premium-spell-slots span,
.zoo-word-slots span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(139, 185, 226, .85);
  color: #2f6fe4;
  font-size: 30px;
  font-weight: 1000;
  box-shadow: 0 10px 20px rgba(28, 55, 85, .1);
}

.zoo-keeper-stage .zoo-word-slots span {
  width: auto;
  min-width: 34px;
  height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #2f6fe4;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .72);
  filter: none;
}

.zoo-word-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 220px;
  margin: 0 auto;
  padding: 8px 22px 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 22px rgba(78, 52, 8, .14), inset 0 1px rgba(255, 255, 255, .75);
  gap: 2px;
}

.zoo-word-slots .missing {
  border-style: none;
  background: transparent;
  color: rgba(47, 111, 228, .62);
  border-bottom: 6px solid #2f6fe4;
  transform: translateY(4px);
}

.zoo-keeper-stage .zoo-word-inline .missing {
  min-width: 42px;
  border-bottom: 6px solid #2f6fe4;
  border-radius: 0;
}

.zoo-keeper-stage .premium-unit-bg {
  filter: saturate(1.04);
}

.zoo-action-scene {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.zoo-action-scene.zoo-yak {
  left: -9%;
  top: 34%;
  width: 36%;
  height: 47%;
}

.zoo-action-scene.zoo-yarn {
  left: 38%;
  top: 42%;
  width: 24%;
  height: 28%;
}

.zoo-action-scene.zoo-zebra {
  right: -1%;
  top: 31%;
  width: 24%;
  height: 34%;
}

.zoo-action-scene.zoo-zoo {
  left: 9%;
  top: -13%;
  width: 86%;
  height: 86%;
}

.zoo-action-scene.zoo-zoo .zoo-gate-motion::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 39.5%;
  top: 34%;
  width: 21%;
  height: 25%;
  border-radius: 42% 42% 16% 16%;
  background:
    linear-gradient(180deg,
      rgba(113, 204, 236, .98) 0%,
      rgba(113, 204, 236, .98) 28%,
      rgba(107, 183, 104, .98) 29%,
      rgba(129, 184, 91, .98) 52%,
      rgba(230, 174, 88, .98) 53%,
      rgba(236, 181, 94, .98) 100%);
  opacity: 0;
}

.zoo-gate-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.zoo-action-object-wrap,
.zoo-gate-motion {
  position: absolute;
  inset: 0;
}

.zoo-action-object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 18px 18px rgba(30, 52, 71, .2));
  transform-origin: 50% 78%;
}

.zoo-motion-frame.frame-1 {
  opacity: 1;
}

.zoo-object-yarn.frame-1 {
  transform: translateY(8px) rotate(-8deg);
}

.zoo-gate-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 16px 18px rgba(30, 52, 71, .18));
}

.zoo-gate-frame.frame-1 {
  opacity: 1;
}

.zoo-solved-scene {
  opacity: .96;
}

.zoo-solved-scene .zoo-solved-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1 !important;
  animation: none !important;
  filter: drop-shadow(0 18px 18px rgba(30, 52, 71, .18));
}

.zoo-keeper-stage.zoo-solved::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,190,.44), rgba(255,255,255,0) 34%);
  animation: zooSuccessGlow .95s ease-out forwards;
}

.zoo-keeper-stage.zoo-yak-solved .zoo-action-object,
.zoo-keeper-stage.zoo-zebra-solved .zoo-action-object,
.zoo-keeper-stage.zoo-yarn-solved .zoo-action-object {
  animation: zooMotionFrameHide .9s steps(1, end) forwards;
}

.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame.frame-1,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame.frame-1,
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-1 { animation-delay: 0s; }
.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame.frame-2,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame.frame-2,
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-2 { animation-delay: .08s; }
.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame.frame-3,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame.frame-3,
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-3 { animation-delay: .16s; }
.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame.frame-4,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame.frame-4,
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-4 { animation-delay: .24s; }
.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame.frame-5,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame.frame-5,
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-5 { animation-delay: .32s; }
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-6 { animation-delay: .40s; }
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-7 { animation-delay: .48s; }
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-8 { animation-delay: .56s; }
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-9 { animation-delay: .64s; }
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-10 { animation-delay: .72s; }

.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame {
  transform: translateY(0) scale(1);
}

.zoo-keeper-stage.zoo-yak-solved .zoo-motion-frame.frame-5,
.zoo-keeper-stage.zoo-zebra-solved .zoo-motion-frame.frame-5,
.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-3 {
  animation: zooMotionFrameShow .9s steps(1, end) forwards;
}

.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame {
  animation: none;
  opacity: 0;
}

.zoo-keeper-stage.zoo-yarn-solved .zoo-motion-frame.frame-3 {
  opacity: 1;
}

.zoo-keeper-stage.zoo-zoo-solved .zoo-gate-frame {
  animation: none;
  opacity: 0;
  transform: translateY(0) scale(1);
}

.zoo-keeper-stage.zoo-zoo-solved .zoo-action-scene.zoo-zoo .zoo-gate-motion::before,
.zoo-solved-scene.zoo-zoo .zoo-gate-motion::before {
  opacity: 1;
}

.zoo-keeper-stage.zoo-zoo-solved .zoo-gate-frame.frame-5 {
  opacity: 1;
  transform: translateY(-2px) scale(1.02);
}

@keyframes zooMotionFrameHide {
  0% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes zooMotionFrameShow {
  0% { opacity: 0; }
  100% { opacity: 1; filter: drop-shadow(0 18px 18px rgba(30, 52, 71, .2)) brightness(1.08); }
}

@keyframes zooGateOpenFrames {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  99% { opacity: 1; }
  100% { opacity: 1; transform: translateY(-2px) scale(1.02); }
}

@keyframes wordTimerDrain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes zooSuccessGlow {
  0% { opacity: 0; transform: scale(.96); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}

.premium-letter-blocks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.premium-letter-blocks button {
  min-width: 74px;
  min-height: 58px;
  border: 1px solid #f5bc3f;
  border-radius: 14px;
  background: linear-gradient(#ffe69f, #ffc955);
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 8px 0 #d88a24, 0 18px 26px rgba(91, 59, 9, .15);
  color: #2f6fe4;
  font-size: 28px;
  font-weight: 1000;
}

.zoo-keeper-stage .premium-letter-blocks button {
  min-width: 78px;
  min-height: 78px;
  border: 1px solid rgba(178, 199, 222, .95);
  border-radius: 19px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 18px rgba(78, 52, 8, .14), inset 0 1px rgba(255, 255, 255, .85);
  color: #2f6fe4;
  font-size: 30px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .72);
  filter: none;
}

.zoo-keeper-stage .premium-letter-blocks button.correct {
  border-color: rgba(178, 199, 222, .95);
  box-shadow: 0 10px 18px rgba(78, 52, 8, .14), inset 0 1px rgba(255, 255, 255, .85);
  transform: none;
}

.premium-letter-blocks button.used {
  opacity: .35;
  transform: translateY(6px);
}

.camp-build-stage .premium-spell-board {
  left: 26%;
  right: 26%;
  bottom: 28px;
  gap: 14px;
}

.camp-build-stage .premium-spell-slots {
  justify-content: center;
}

.camp-build-stage .premium-letter-blocks {
  justify-content: center;
}

.camp-object-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.camp-scene-object {
  position: absolute;
  object-fit: contain;
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 16px 22px rgba(23, 45, 73, .2));
  transition: opacity .28s ease, filter .28s ease;
}

.camp-scene-object.revealed {
  opacity: 1;
  filter: drop-shadow(0 18px 24px rgba(23, 45, 73, .24));
}

.camp-scene-object.camp-sun {
  left: 23.4%;
  top: -1.4%;
  width: 150px;
  height: 150px;
  transform: rotate(-7deg);
}

.camp-scene-object.camp-sock {
  left: 15.5%;
  top: 28.8%;
  width: 104px;
  height: 124px;
  transform: rotate(7deg);
}

.camp-scene-object.camp-tent {
  left: 64.0%;
  top: 15.0%;
  width: 370px;
  height: 242px;
  transform: translateX(-50%);
}

.camp-scene-object.camp-umbrella {
  right: -1.0%;
  top: 11.0%;
  width: 312px;
  height: 238px;
  transform: rotate(8deg);
}

.camp-scene-object.camp-uniform {
  right: 1.8%;
  bottom: 11.0%;
  width: 170px;
  height: 162px;
}

.camp-scene-object.camp-bear-sign {
  left: -2.2%;
  bottom: 15.5%;
  width: 168px;
  height: 140px;
  transform: rotate(-7deg);
}

.camp-silhouette {
  position: absolute;
  z-index: 3;
  border: 3px dashed rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .08);
  filter: drop-shadow(0 4px 5px rgba(22, 47, 75, .18));
  animation: campTargetBlink 1s ease-in-out infinite;
}

.camp-silhouette.done {
  opacity: 0;
  animation: none;
}

.camp-target-object {
  position: absolute;
  z-index: 5;
  object-fit: contain;
  opacity: 0;
  transform: scale(.82);
  filter: drop-shadow(0 18px 24px rgba(23, 45, 73, .2));
  transition: opacity .32s ease, transform .32s ease;
}

.camp-target-object.revealed {
  opacity: 1;
  transform: scale(1);
}

.camp-silhouette.camp-sun,
.camp-target-object.camp-sun {
  left: 4%;
  top: 7%;
  width: 132px;
  height: 120px;
  border-radius: 44% 56% 48% 52%;
}

.camp-target-object.camp-sun {
  left: 4.5%;
  top: 7.5%;
  width: 118px;
  height: 118px;
}

.camp-silhouette.camp-sock,
.camp-target-object.camp-sock {
  left: 23%;
  top: 17%;
  width: 68px;
  height: 118px;
  border-radius: 38px 20px 34px 42px;
  transform: rotate(7deg);
}

.camp-target-object.camp-sock {
  left: 22.5%;
  top: 19%;
  width: 82px;
  height: 112px;
  transform: rotate(7deg) scale(.82);
}

.camp-target-object.camp-sock.revealed {
  transform: rotate(7deg) scale(1);
}

.camp-silhouette.camp-tent,
.camp-target-object.camp-tent {
  left: 48.5%;
  top: 5%;
  width: 288px;
  height: 186px;
  border-radius: 42% 42% 28px 28px;
  transform: skewX(-5deg);
}

.camp-target-object.camp-tent {
  left: 49%;
  top: 5%;
  width: 270px;
  height: 182px;
  transform: scale(.82);
}

.camp-target-object.camp-tent.revealed {
  transform: scale(1);
}

.camp-silhouette.camp-tiger,
.camp-target-object.camp-tiger {
  left: 6.5%;
  bottom: 15%;
  width: 136px;
  height: 86px;
  border-radius: 36px;
}

.camp-target-object.camp-tiger {
  left: 6%;
  bottom: 13.5%;
  width: 150px;
  height: 112px;
}

.camp-silhouette.camp-umbrella,
.camp-target-object.camp-umbrella {
  right: 4.2%;
  top: 0%;
  width: 242px;
  height: 136px;
  border-radius: 130px 130px 28px 28px;
}

.camp-target-object.camp-umbrella {
  right: 4.6%;
  top: 0%;
  width: 232px;
  height: 148px;
}

.camp-silhouette.camp-uniform,
.camp-target-object.camp-uniform {
  right: 8.5%;
  bottom: 8%;
  width: 110px;
  height: 136px;
  border-radius: 30px 30px 18px 18px;
}

.camp-target-object.camp-uniform {
  right: 7.2%;
  bottom: 4.8%;
  width: 138px;
  height: 156px;
}

.camp-target-zone {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.camp-target-zone::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 242, 118, .38), rgba(255, 242, 118, 0) 68%);
  transition: opacity .28s ease;
}

.camp-target-zone.done::after {
  opacity: 1;
  animation: actionPadPulse .52s ease;
}

.camp-target-zone .camp-target-object {
  position: absolute;
  inset: 0;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: .58;
  object-fit: contain;
  transform: scale(.82);
  filter: drop-shadow(0 16px 20px rgba(23, 45, 73, .18)) saturate(.92);
}

.camp-target-zone .camp-target-object.revealed {
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 20px 26px rgba(23, 45, 73, .22)) saturate(1.08);
}

.camp-target-zone.camp-sun {
  left: 3.8%;
  top: 4.5%;
  width: 148px;
  height: 138px;
}

.camp-target-zone.camp-sock {
  left: 22%;
  top: 16%;
  width: 90px;
  height: 126px;
}

.camp-target-zone.camp-tent {
  left: 49%;
  top: 1%;
  width: 286px;
  height: 206px;
  transform: translateX(-50%);
}

.camp-target-zone.camp-tiger {
  left: 5.6%;
  bottom: 12%;
  width: 166px;
  height: 124px;
}

.camp-target-zone.camp-umbrella {
  right: 3.8%;
  top: 1%;
  width: 252px;
  height: 164px;
}

.camp-target-zone.camp-uniform {
  right: 6.4%;
  bottom: 4%;
  width: 154px;
  height: 170px;
}

.festival-booth {
  min-height: 118px;
  background: rgba(255, 255, 255, .9);
}

.festival-drag-stage .premium-unit-bg {
  filter: saturate(1.04);
}

.festival-dropzones {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.festival-dropzone {
  position: absolute;
  width: 180px;
  height: 142px;
  border: 3px dashed rgba(255, 255, 255, .94);
  border-radius: 28px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 16px 26px rgba(29, 52, 80, .13);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.festival-dropzone:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .22);
  border-color: rgba(47, 111, 228, .72);
}

.festival-dropzone.booth-nature {
  left: 6%;
  top: 25%;
}

.festival-dropzone.booth-animal {
  left: 26%;
  top: 23%;
}

.festival-dropzone.booth-thing {
  right: 26%;
  top: 24%;
}

.festival-dropzone.booth-travel {
  right: 6%;
  top: 25%;
}

.festival-dropzone span {
  position: absolute;
  left: 50%;
  bottom: -14px;
  min-width: 92px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #15233d;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: 0 8px 16px rgba(28, 55, 85, .14);
  opacity: 0;
}

.festival-dropzone.matched span {
  opacity: 1;
}

.festival-dropzone.correct {
  border-color: #78dfa5;
  background: rgba(222, 255, 237, .18);
  box-shadow: 0 0 0 7px rgba(120, 223, 165, .16), 0 16px 26px rgba(29, 52, 80, .13);
}

.festival-dropzone.wrong {
  animation: blockChoiceShake .28s ease;
}

.festival-word-tray {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
}

.festival-word-card {
  min-width: 220px;
  min-height: 74px;
  border: 1px solid rgba(139, 185, 226, .85);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 28px rgba(28, 55, 85, .16);
  color: #2f6fe4;
  font-size: 30px;
  font-weight: 1000;
  cursor: grab;
}

.festival-word-card.dragging {
  cursor: grabbing;
  transform: translateY(-8px) scale(1.04);
}

.festival-word-card.matched {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.82);
}

.premium-station.correct,
.memory-word-card.correct,
.route-object-card.correct,
.festival-booth.correct,
.premium-letter-blocks button.correct {
  border-color: #74d7a0;
  box-shadow: 0 0 0 5px rgba(116, 215, 160, .24), 0 18px 34px rgba(28, 55, 85, .14);
  transform: translateY(-6px);
}

.route-object-card.correct {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.premium-station.wrong,
.memory-word-card.wrong,
.route-object-card.wrong,
.festival-booth.wrong,
.premium-letter-blocks button.wrong {
  animation: blockChoiceShake .28s ease;
}

@keyframes dogActionDash {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  42% { transform: translateX(-10%) translateY(-8px) scale(1.06); }
  100% { transform: translateX(-185%) translateY(0) scale(.96); }
}

@keyframes actionBump {
  0%, 100% { transform: translateX(-50%); }
  30% { transform: translateX(-62%) rotate(-4deg); }
  62% { transform: translateX(-42%) rotate(3deg); }
}

@keyframes blockChoiceShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-9px) rotate(-3deg); }
  62% { transform: translateX(8px) rotate(3deg); }
}

@keyframes actionPop {
  0% { transform: scale(.84); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes beatRingShrink {
  0% { opacity: 0; transform: scale(1.45); }
  22% { opacity: 1; }
  70% { opacity: .85; transform: scale(.88); }
  100% { opacity: 0; transform: scale(.72); }
}

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

@keyframes blockDropIn {
  0% { opacity: 0; transform: translateY(-30px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes successLayerPop {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(.72); }
  54% { opacity: 1; transform: translate(-50%, -8px) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes sceneHit {
  0% { filter: saturate(1); }
  45% { filter: saturate(1.18) brightness(1.04); }
  100% { filter: saturate(1); }
}

@keyframes timerDrain {
  0% { transform: scaleX(1); transform-origin: left; }
  100% { transform: scaleX(.08); transform-origin: left; }
}

@keyframes fallingChoice {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(10px) rotate(calc(var(--choice-offset) * 2deg)); }
}

@keyframes dropPulse {
  0%, 100% { box-shadow: 0 24px 55px rgba(21,36,62,.16), 0 0 0 0 rgba(34,119,216,.2); }
  50% { box-shadow: 0 24px 55px rgba(21,36,62,.16), 0 0 0 10px rgba(34,119,216,.08); }
}

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

@keyframes rhythmRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,191,155,.2); }
  50% { box-shadow: 0 0 0 18px rgba(47,191,155,.08); }
}

/* Home cards use the unit's story-cover illustration as their visual entry point. */
.course-map .menu-card-story-cover {
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: #edf5fb;
}

.course-map .phonics-cover-card .menu-card-story-cover {
  object-fit: cover;
}

@media (max-width: 720px) {
  .listen-drum-stage {
    min-height: 390px;
  }
  .listen-drum-prompt {
    width: calc(100% - 20px);
    margin-top: 54px;
    padding: 0 8px;
  }
  .listen-drum-prompt h1 {
    font-size: clamp(22px, 7vw, 30px);
  }
  .listen-drum-prompt p {
    font-size: 13px;
  }
  .listen-drum-action {
    margin-top: 0;
  }
  .listen-drum-choice {
    bottom: 88px;
    width: clamp(92px, 27%, 122px);
    height: 104px;
    min-height: 104px;
    padding: 0;
  }
  .listen-drum-choice.drum-left { left: 4%; }
  .listen-drum-choice.drum-right { right: 4%; }
  .listen-drum-choice::before {
    right: -2px;
    top: 2px;
    width: 68px;
    height: 9px;
  }
  .listen-drum-choice::after {
    right: -6px;
    top: 20px;
    width: 16px;
    height: 16px;
  }
  .listen-drum-choice .choice-art {
    height: 88px;
    min-height: 88px;
  }
  .listen-drum-choice .choice-art img {
    width: 78px;
    height: 78px;
    max-width: 78px;
    max-height: 78px;
  }
  .custom-game-scene {
    min-height: 420px;
  }
  .game-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-prop,
  .game-prop-hit {
    width: 34%;
    max-width: none;
  }
  .game-actor,
  .game-actor-hit {
    width: 34%;
    max-width: none;
  }
  .game-accent {
    width: 42%;
    max-width: none;
  }
  .custom-game-scene .game-target {
    width: min(260px, 58%);
    min-height: 180px;
  }
}

@media (max-width: 640px) {
  :root {
    --space-page: 16px;
    --space-section: 18px;
  }
  nav button {
    min-width: 0;
  }
  nav button.active::after {
    left: 12px;
    right: 12px;
  }
  .daily-flow,
  .course-map,
  .home-split,
  .choice-grid,
  .unit-showcase-grid,
  .report-stats {
    gap: 12px;
  }
  .lesson-overview,
  .lesson-card,
  .game-board,
  .story-page,
  .story-learning,
  .report-panel {
    padding: 20px;
  }
  .course-map {
    grid-template-columns: 1fr;
  }
  .course-map button {
    min-height: 156px;
  }
  .word-art {
    min-height: 260px;
  }
  .game-scene {
    min-height: 334px;
  }
  .game-reward {
    width: min(180px, 42%);
    min-height: 112px;
  }
  .pager {
    flex-wrap: wrap;
  }
  .pager button {
    flex: 1 1 120px;
  }
}

.phonics-workbook-shell{display:grid;gap:18px;padding:24px;max-width:1280px;margin:0 auto}.phonics-workbook-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid #dbe5f5;border-radius:24px;padding:22px;box-shadow:0 14px 36px rgba(48,67,104,.1)}.phonics-workbook-heading h1{margin:4px 0 8px}.workbook-download{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.phonics-workbook-viewer{width:100%;height:calc(100vh - 245px);min-height:720px;border:1px solid #ccd9ec;border-radius:22px;background:#fff;box-shadow:0 14px 36px rgba(48,67,104,.1)}@media(max-width:760px){.phonics-workbook-heading{align-items:flex-start;flex-direction:column}.phonics-workbook-viewer{height:75vh;min-height:520px}}

/* PHONICS 1 · single-focus Sound Lab listening experience */
.sound-lab-view{gap:14px}.sound-lab-stage{position:relative;min-height:570px;overflow:hidden;border-radius:28px;background:#d8f4ed;box-shadow:0 22px 52px rgba(18,50,55,.18);isolation:isolate}.sound-lab-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.sound-lab-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%,rgba(15,55,52,.08));z-index:-1;pointer-events:none}.sound-lab-heading{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:min(620px,70%);padding:12px 24px;text-align:center;color:#173b48;background:rgba(255,255,255,.86);border:2px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:0 12px 30px rgba(23,59,72,.14)}.sound-lab-heading>span{color:#168c8c;font-weight:950;letter-spacing:.16em;text-transform:uppercase;font-size:12px}.sound-lab-heading h1{margin:2px 0;font-size:clamp(24px,3vw,38px)}.sound-lab-heading p{margin:0;font-weight:750}.sound-lab-heading strong{color:#ed684e}.sound-lab-robot{position:absolute;left:1.2%;bottom:7%;width:clamp(150px,18%,235px);filter:drop-shadow(0 18px 18px rgba(17,49,55,.23));animation:labRobotFloat 4s ease-in-out infinite}.sound-lab-word-picture{position:absolute;right:3%;top:23%;width:clamp(145px,20%,235px);height:clamp(145px,20vw,235px);display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.84);border:5px solid rgba(255,255,255,.92);box-shadow:0 18px 32px rgba(19,57,65,.2)}.sound-lab-word-picture .word-art{width:100%;height:100%;background:transparent;box-shadow:none}.sound-lab-word-picture img{width:90%;height:90%;object-fit:contain}.sound-lab-workbench{position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);width:clamp(440px,58%,690px);filter:drop-shadow(0 22px 20px rgba(20,45,39,.28))}.sound-lab-blocks{position:absolute;left:50%;bottom:28%;transform:translateX(-50%);display:flex;gap:clamp(12px,2vw,24px);z-index:2}.sound-block{width:clamp(76px,9vw,108px);height:clamp(88px,10vw,116px);display:grid;place-items:center;padding:8px;border:4px solid rgba(255,255,255,.9);border-radius:22px;color:#fff;background:linear-gradient(145deg,#39c3bd,#147d9c);box-shadow:inset 0 4px 8px rgba(255,255,255,.42),inset 0 -8px 12px rgba(11,71,90,.2),0 12px 18px rgba(14,60,71,.25);transition:transform .28s ease,filter .28s ease,margin .42s ease;cursor:pointer}.sound-block.vowel{background:linear-gradient(145deg,#ffca55,#f16a4f);box-shadow:inset 0 4px 8px rgba(255,255,255,.45),inset 0 -8px 12px rgba(150,59,38,.18),0 12px 18px rgba(104,58,22,.23)}.sound-block b{font-size:clamp(34px,5vw,58px);line-height:.8;text-shadow:0 3px 0 rgba(0,0,0,.12)}.sound-block span{font-size:15px;font-weight:950}.sound-block:hover{transform:translateY(-7px)}.sound-block.active{transform:translateY(-18px) scale(1.08);filter:brightness(1.18) drop-shadow(0 0 16px rgba(255,242,139,.95));animation:soundBlockPulse .62s ease-in-out infinite alternate}.sound-lab-view.blending .sound-block.joined{margin-left:-6px;margin-right:-6px}.sound-lab-wave{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:42%;height:24px;display:flex;align-items:center;justify-content:center;gap:8px;opacity:.35}.sound-lab-wave i{width:10%;height:4px;border-radius:99px;background:#44d9e5}.sound-lab-view.word-playing .sound-lab-wave{opacity:1}.sound-lab-view.word-playing .sound-lab-wave i{animation:labWave .56s ease-in-out infinite alternate}.sound-lab-wave i:nth-child(2),.sound-lab-wave i:nth-child(4){animation-delay:.12s!important}.sound-lab-wave i:nth-child(3){animation-delay:.24s!important}.sound-lab-speaker{position:absolute;right:4%;bottom:5%;width:clamp(100px,13%,150px);border:0;background:transparent;color:#174457;font-weight:950;cursor:pointer}.sound-lab-speaker img{display:block;width:100%;filter:drop-shadow(0 13px 13px rgba(15,46,53,.25));transition:transform .18s}.sound-lab-speaker:hover img,.sound-lab-view.word-playing .sound-lab-speaker img{transform:scale(1.07);animation:speakerBeat .55s ease-in-out infinite alternate}.sound-lab-speaker span{display:inline-block;margin-top:-5px;padding:5px 12px;border-radius:999px;background:#fff;box-shadow:0 5px 12px rgba(0,0,0,.12)}.sound-lab-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.sound-lab-actions button{min-width:170px}.sound-lab-feedback{text-align:center;margin:0!important;min-height:28px;color:#305368;font-weight:850}@keyframes labRobotFloat{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes soundBlockPulse{to{transform:translateY(-22px) scale(1.1)}}@keyframes labWave{to{height:22px;background:#ffca55}}@keyframes speakerBeat{to{transform:scale(1.12)}}
@media(max-width:760px){.sound-lab-stage{min-height:520px}.sound-lab-heading{top:12px;width:94%;padding:9px 12px}.sound-lab-heading p{font-size:12px}.sound-lab-robot{left:-3%;bottom:10%;width:120px}.sound-lab-word-picture{right:3%;top:24%;width:115px;height:115px}.sound-lab-workbench{bottom:2%;width:410px}.sound-lab-blocks{bottom:31%;gap:8px}.sound-block{width:70px;height:82px;border-radius:17px}.sound-block b{font-size:36px}.sound-lab-speaker{right:1%;bottom:3%;width:90px}.sound-lab-wave{bottom:24%;width:50%}.sound-lab-actions button{min-width:0;flex:1 1 130px}}

/* Unit 1 word art is native transparent PNG; keep the Sound Lab scene visible behind it. */
.sound-lab-word-picture{background:transparent;border:0;box-shadow:none;filter:drop-shadow(0 16px 18px rgba(19,57,65,.22))}
.sound-lab-robot,.sound-lab-word-picture,.sound-lab-workbench,.sound-lab-speaker,.sound-lab-wave{display:none!important}
.sound-lab-heading{display:none!important}
.sound-lab-heading>span,.sound-lab-heading>p{display:none}
.sound-lab-heading h1{margin:0;font-size:clamp(28px,4vw,46px)}
.sound-lab-stage .sound-lab-blocks{bottom:17%}
@media(max-width:760px){.sound-lab-heading{top:6%;width:94%}.sound-lab-heading h1{font-size:28px}.sound-lab-stage .sound-lab-blocks{bottom:18%}}

/* Space Speak console */
.say-coach-stage::after{display:none}
.say-coach-character{display:none!important}
.say-coach-title{display:none!important}
.say-coach-title span{display:none}.say-coach-title h1{color:#182c65;text-shadow:0 2px 0 #fff;font-size:clamp(28px,3.4vw,42px)}
.say-coach-word{left:50%;right:auto;top:10%;width:clamp(270px,34vw,390px);height:clamp(230px,29vw,330px);transform:translateX(-50%)}
.say-coach-phonemes{left:50%;right:auto;top:38%;width:auto;transform:translateX(-50%)}
.say-coach-phonemes>span{width:72px;height:72px;border-radius:16px}.say-coach-phonemes b{font-size:28px}
.say-coach-controls{left:50%;right:auto;bottom:1.5%;z-index:4;width:min(430px,55%);transform:translateX(-50%);gap:14px}
.say-console-button,.say-demo-button.say-console-button,.say-mic-button.say-console-button,.say-play-button{width:112px;height:112px;display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 8px 8px rgba(14,22,72,.28));cursor:pointer;transition:transform .18s,filter .18s}
.say-console-button img{display:block;width:100%;height:100%;object-fit:contain}.say-console-button:hover{transform:translateY(-6px) scale(1.03)}.say-console-button:disabled{filter:grayscale(.75) opacity(.6);cursor:default}.say-mic-button.recording{background:transparent;animation:recordPulse .62s ease-in-out infinite alternate}
.say-coach-result.show{display:flex}.say-coach-result button{min-width:150px}

/* Listening shelf layout */
.sound-lab-stage .sound-lab-word-picture{display:grid!important;left:50%;right:auto;top:9%;width:175px;height:175px;transform:translateX(-50%);filter:drop-shadow(0 12px 12px rgba(38,61,45,.2));z-index:2}
.sound-lab-stage .sound-lab-blocks{bottom:24%;gap:14px}
.sound-lab-stage .sound-block{width:clamp(66px,7.2vw,88px);height:clamp(76px,8.4vw,98px);border-radius:17px}
.sound-lab-stage .sound-block b{font-size:clamp(29px,3.7vw,43px)}
.sound-lab-stage .sound-block span{font-size:12px}
.sound-lab-stage .sound-block.consonant{border-color:transparent;background:transparent;box-shadow:none;color:#137f99;text-shadow:0 2px 0 #fff,0 0 10px rgba(255,255,255,.95)}
.sound-lab-stage .sound-block.consonant b{text-shadow:0 2px 0 #fff,0 0 10px rgba(255,255,255,.95)}
@media(max-width:760px){.say-coach-word{top:11%;width:250px;height:220px}.say-coach-phonemes{top:37%}.say-coach-controls{bottom:1%;width:76%;gap:7px}.say-console-button,.say-demo-button.say-console-button,.say-mic-button.say-console-button,.say-play-button{width:82px;height:82px}.sound-lab-stage .sound-lab-word-picture{top:8%;width:140px;height:140px}.sound-lab-stage .sound-lab-blocks{bottom:25%}}

/* PHONICS · character-led Sound Coach Say It */
.speak-view.say-coach-view{display:grid;grid-template-columns:1fr;gap:12px;min-height:0}.say-coach-stage{position:relative;min-height:570px;overflow:hidden;border-radius:28px;background:#eaf8f2;box-shadow:0 22px 52px rgba(31,68,67,.18);isolation:isolate}.say-coach-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.say-coach-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 42%,rgba(255,255,255,.14));z-index:-1;pointer-events:none}.say-coach-title{position:absolute;top:22px;left:50%;transform:translateX(-50%);min-width:300px;padding:10px 24px;text-align:center;border-radius:22px;background:rgba(255,255,255,.88);border:2px solid rgba(255,255,255,.95);box-shadow:0 12px 28px rgba(28,70,72,.12)}.say-coach-title span{font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:#168c8c}.say-coach-title h1{margin:1px 0;color:#173b48;font-size:clamp(28px,4vw,44px)}.say-coach-word{position:absolute;right:5%;top:21%;width:clamp(145px,19vw,220px);height:clamp(145px,19vw,220px);display:grid;place-items:center;filter:drop-shadow(0 15px 16px rgba(26,65,66,.22))}.say-coach-word .word-art{width:100%;height:100%;min-height:0;background:transparent;box-shadow:none}.say-coach-word img{width:100%;height:100%;object-fit:contain}.say-coach-phonemes{position:absolute;right:4%;top:60%;width:clamp(250px,32%,360px);display:flex;justify-content:center;gap:10px}.say-coach-phonemes>span{width:82px;height:82px;display:grid;place-items:center;padding:7px;border:4px solid rgba(255,255,255,.9);border-radius:20px;color:#fff;background:linear-gradient(145deg,#3bc5bf,#187f9d);box-shadow:inset 0 4px 7px rgba(255,255,255,.4),0 10px 16px rgba(17,73,82,.2)}.say-coach-phonemes>span.vowel{background:linear-gradient(145deg,#ffca55,#f16a4f)}.say-coach-phonemes b{font-size:32px;line-height:.8}.say-coach-phonemes em{font-size:13px;font-weight:950;font-style:normal}.say-coach-character{position:absolute;left:4%;bottom:3%;width:clamp(330px,45%,500px);height:470px;display:grid;grid-template-rows:1fr auto;place-items:center;background:transparent}.say-coach-character img{width:100%;height:420px;max-height:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px rgba(20,52,58,.22));transition:transform .22s}.say-coach-character span{position:absolute;left:66%;top:11%;min-width:155px;padding:10px 16px;color:#174457;background:#fff;border:3px solid #87ddd2;border-radius:20px;font-size:17px;font-weight:950;text-align:center;box-shadow:0 10px 18px rgba(20,61,65,.15)}.say-coach-character span::after{content:"";position:absolute;left:-14px;bottom:12px;border-width:9px 14px 9px 0;border-style:solid;border-color:transparent #87ddd2 transparent transparent}.say-coach-character.celebrate img{animation:sayCoachJump .7s ease-in-out infinite alternate}.say-coach-controls{position:absolute;right:5%;bottom:5%;width:clamp(260px,34%,380px);display:flex;align-items:center;justify-content:center;gap:18px}.say-demo-button,.say-mic-button{border:0;cursor:pointer;font-weight:950;transition:transform .18s,filter .18s}.say-demo-button{display:grid;place-items:center;gap:2px;padding:10px 16px;color:#174457;background:rgba(255,255,255,.92);border-radius:18px;box-shadow:0 10px 18px rgba(20,61,65,.16)}.say-demo-button b{font-size:24px}.say-mic-button{width:126px;height:126px;display:grid;place-items:center;padding:10px;color:#fff;background:linear-gradient(145deg,#ff8068,#ed4c5f);border:7px solid rgba(255,255,255,.92);border-radius:50%;box-shadow:0 0 0 7px rgba(237,76,95,.15),0 15px 25px rgba(91,34,48,.28)}.say-mic-button b{font-size:45px;line-height:1}.say-mic-button span{font-size:13px}.say-demo-button:hover,.say-mic-button:hover{transform:translateY(-5px)}.say-mic-button.recording{animation:recordPulse .62s ease-in-out infinite alternate;background:linear-gradient(145deg,#ff4d65,#c72f53)}.say-coach-result{display:none;justify-content:center;gap:12px}.say-coach-result.show{display:flex}.say-coach-result button{min-width:160px}.say-coach-view>.task-feedback{text-align:center;margin:0!important;min-height:26px;color:#31566a;font-weight:900}@keyframes sayCoachJump{to{transform:translateY(-12px) rotate(2deg)}}@keyframes recordPulse{to{transform:scale(1.08);box-shadow:0 0 0 16px rgba(237,76,95,.12),0 18px 28px rgba(91,34,48,.28)}}
@media(max-width:760px){.say-coach-stage{min-height:620px}.say-coach-title{top:10px;min-width:250px;padding:7px 14px}.say-coach-word{right:4%;top:17%;width:125px;height:125px}.say-coach-phonemes{right:2%;top:39%;width:210px;gap:5px}.say-coach-phonemes>span{width:62px;height:66px;border-radius:15px}.say-coach-phonemes b{font-size:25px}.say-coach-character{left:-5%;bottom:13%;width:310px;height:390px}.say-coach-character img{height:350px}.say-coach-character span{left:58%;top:6%;min-width:135px;font-size:14px}.say-coach-controls{right:3%;bottom:3%;width:94%;justify-content:flex-end}.say-mic-button{width:105px;height:105px}.say-coach-result button{min-width:0;flex:1}}

/* Final cockpit layout: keep the word art large and the phoneme row above the controls. */
.speak-view .say-coach-word{left:50%;right:auto;top:0;width:clamp(310px,38vw,430px);height:clamp(260px,32vw,360px);transform:translateX(-50%)}
.speak-view .say-coach-word img{transform:scale(2.25);transform-origin:center}
.speak-view .say-coach-phonemes{left:50%;right:auto;top:47%;width:auto;transform:translateX(-50%)}
@media(max-width:760px){.speak-view .say-coach-word{left:50%;right:auto;top:1%;width:280px;height:245px}.speak-view .say-coach-phonemes{left:50%;right:auto;top:46%;width:auto}}

.sound-lab-stage .sound-lab-word-picture{top:3%;width:245px;height:245px}
@media(max-width:760px){.sound-lab-stage .sound-lab-word-picture{top:4%;width:190px;height:190px}}

/* Restore the consonant cards and seat the full word row lower on the counter. */
.sound-lab-stage .sound-lab-blocks{bottom:18%}
.sound-lab-stage .sound-block.consonant{border-color:rgba(255,255,255,.9);background:linear-gradient(145deg,#39c3bd,#147d9c);box-shadow:inset 0 4px 8px rgba(255,255,255,.42),inset 0 -8px 12px rgba(11,71,90,.2),0 12px 18px rgba(14,60,71,.25);color:#fff;text-shadow:none}
.sound-lab-stage .sound-block.consonant b{text-shadow:0 3px 0 rgba(0,0,0,.12)}
@media(max-width:760px){.sound-lab-stage .sound-lab-blocks{bottom:19%}}

/* Speak console word changer: the middle vowel stays fixed. */
.speak-view .say-coach-word{top:0}
.speak-view .say-coach-word img{transform:scale(1.9)}
.speak-view .say-coach-phonemes{top:48%}
.speak-view .say-coach-phonemes>span{width:72px;height:72px;border-radius:16px;padding:6px}
.speak-view .say-coach-phonemes b{font-size:28px}
.speak-view .say-coach-phonemes em{font-size:11px}
.say-word-change-button{position:absolute;right:10%;bottom:8%;z-index:5;width:118px;height:118px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 8px 9px rgba(37,20,65,.3));transition:transform .16s}
.say-word-change-button img{width:100%;height:100%;object-fit:contain}
.say-word-change-button:hover{transform:translateY(-4px) scale(1.03)}
.say-word-change-button.pressed{transform:translateY(7px) scale(.96)}
.say-coach-phonemes>span.consonant-changing{animation:speakConsonantSwap .42s ease-in-out}
@keyframes speakConsonantSwap{50%{transform:translateY(-18px) rotateY(90deg);filter:brightness(1.35)}100%{transform:none}}
@media(max-width:760px){.speak-view .say-coach-word{top:1%}.speak-view .say-coach-word img{transform:scale(1.72)}.speak-view .say-coach-phonemes{top:47%}.say-word-change-button{right:8%;bottom:7%;width:90px;height:90px}}

/* Speak console alignment: keep every interaction inside the 16:9 cockpit. */
.speak-view.say-coach-view{display:grid!important;grid-template-columns:1fr!important;align-items:start!important}
.speak-view .say-coach-stage{position:relative!important;width:100%;aspect-ratio:16/9;min-height:0!important;overflow:hidden}
.speak-view .say-coach-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.speak-view .say-coach-word{position:absolute!important;left:50%!important;right:auto!important;top:3%!important;width:32%!important;height:28%!important;transform:translateX(-50%)!important;z-index:2}
.speak-view .say-coach-word .word-art{width:100%!important;height:100%!important;min-height:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.speak-view .say-coach-word img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;transform:scale(.42)!important;transform-origin:center!important}
.speak-view .say-coach-phonemes{position:absolute!important;left:50%!important;right:auto!important;top:48%!important;width:auto!important;transform:translateX(-50%)!important;z-index:3}
.speak-view .say-coach-controls{position:absolute!important;left:50%!important;right:auto!important;bottom:1.5%!important;width:min(400px,52%)!important;transform:translateX(-50%)!important;z-index:4}
.speak-view .say-word-change-button{position:absolute!important;left:79%!important;top:78%!important;right:auto!important;bottom:auto!important;width:74px!important;height:74px!important;margin:0!important;transform:none;z-index:6}
@media(max-width:760px){.speak-view .say-coach-stage{aspect-ratio:auto;min-height:440px!important}.speak-view .say-coach-word{top:2%!important;width:38%!important;height:27%!important}.speak-view .say-coach-word img{transform:scale(.5)!important}.speak-view .say-coach-phonemes{top:46%!important}.speak-view .say-coach-controls{bottom:2%!important;width:58%!important;gap:6px!important}.speak-view .say-word-change-button{left:77%!important;top:79%!important;right:auto!important;bottom:auto!important;width:60px!important;height:60px!important}}

.sound-lab-word-button{position:absolute;right:3%;bottom:17%;z-index:6;width:auto;height:auto;padding:10px 16px;border:2px solid #fff;border-radius:999px;background:#20a69f;color:#fff;font-weight:950;cursor:pointer;box-shadow:0 7px 14px rgba(24,55,67,.22);transition:transform .16s}
.sound-lab-word-button:hover{transform:translateY(-4px) scale(1.03)}
.sound-lab-word-button.pulling{transform:translateY(8px) scale(.94);filter:brightness(.92) drop-shadow(0 3px 5px rgba(24,55,67,.24))}
.sound-lab-block.lever-changing{animation:soundReelRoll .56s cubic-bezier(.35,.05,.25,1)}
@media(max-width:760px){.sound-lab-word-button{right:2%;bottom:14%;padding:8px 12px}}

/* 3D Listening Studio: seat the word picture in the left display and raise the letter row. */
.sound-lab-stage{aspect-ratio:16/9;min-height:0}
.sound-lab-stage .sound-lab-word-picture{left:50%;top:7%;width:clamp(190px,22vw,245px);height:clamp(145px,16vw,180px);transform:translateX(-50%);border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.sound-lab-word-screen-frame{position:absolute;inset:0;z-index:1;width:100%!important;height:100%!important;object-fit:fill!important;filter:drop-shadow(0 9px 10px rgba(28,66,112,.24))}
.sound-lab-word-screen-content{position:absolute;left:15%;top:16%;z-index:2;width:70%;height:64%;display:grid;place-items:center;overflow:hidden;border-radius:12px}
.sound-lab-word-screen-content .word-art{width:100%;height:100%;min-height:0;background:transparent;box-shadow:none}
.sound-lab-word-screen-content .word-art img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:none;transform:scale(1.08)}
.sound-lab-stage .sound-lab-blocks{left:50%;bottom:26%;gap:clamp(14px,1.8vw,22px)}
.sound-lab-stage .sound-block{width:clamp(82px,8.7vw,104px);height:clamp(94px,10vw,116px)}
.sound-lab-stage .sound-block b{font-size:clamp(36px,4.5vw,52px)}
.sound-lab-stage .sound-block span{font-size:16px}
.sound-lab-stage .sound-lab-blocks.letters-3{left:50%}
.sound-lab-stage .sound-lab-blocks.letters-4{left:50%;gap:14px}
.sound-lab-stage .sound-lab-blocks.letters-4 .sound-block{width:clamp(72px,7.6vw,90px);height:clamp(84px,8.8vw,102px)}
.sound-lab-stage .sound-lab-blocks.letters-4 .sound-block b{font-size:clamp(33px,4vw,46px)}
.sound-lab-stage .sound-lab-blocks.long-word{left:52%;gap:10px}
.sound-lab-stage .sound-lab-blocks.long-word .sound-block{width:clamp(62px,6.7vw,78px);height:clamp(74px,8vw,92px)}
.sound-lab-stage .sound-lab-blocks.long-word .sound-block b{font-size:clamp(30px,3.7vw,42px)}
.sound-lab-stage .sound-lab-blocks.long-word .sound-block span{font-size:13px}
.sound-lab-stage .sound-lab-blocks.has-ch.ch-pair-active::after{content:"";position:absolute;left:0;bottom:-16px;width:calc(clamp(62px,6.7vw,78px) + clamp(62px,6.7vw,78px) + 10px);height:5px;border-radius:999px;background:#fff;box-shadow:0 3px 10px rgba(22,105,125,.32);pointer-events:none}
.sound-lab-stage .sound-lab-blocks.has-ch.ch-pair-active::before{content:"CH  /tʃ/";position:absolute;left:0;bottom:-43px;width:calc(clamp(62px,6.7vw,78px) + clamp(62px,6.7vw,78px) + 10px);color:#c72f35;font-size:14px;font-weight:950;letter-spacing:.04em;text-align:center;text-shadow:0 1px #fff;pointer-events:none}
.sound-lab-blocks.ch-pair-active .sound-block.digraph-start,.sound-lab-blocks.ch-pair-active .sound-block.digraph-end{animation:none!important;filter:brightness(1.15) drop-shadow(0 0 16px rgba(255,210,80,.95))}
.sound-lab-blocks.ch-pair-active .sound-block.digraph-start{transform:translate(7px,-18px) scale(1.08)!important}
.sound-lab-blocks.ch-pair-active .sound-block.digraph-end{transform:translate(-7px,-18px) scale(1.08)!important}
.sound-lab-stage .sound-block.silent-letter-block{position:relative}
.sound-lab-stage .sound-block.silent-letter-block span{font-size:12px}
.sound-lab-stage .sound-block.silent-letter-block::before{content:"NO SOUND";position:absolute;left:50%;top:-28px;transform:translateX(-50%);width:max-content;padding:4px 9px;border:2px solid #fff;border-radius:999px;color:#fff;background:#647985;box-shadow:0 4px 10px rgba(43,61,70,.25);font-size:11px;font-weight:950;opacity:.92}
.sound-lab-stage .sound-block.silent-e-block,.sound-lab-stage .sound-block.silent-gh-start,.sound-lab-stage .sound-block.silent-gh-end{color:#566875;background:linear-gradient(145deg,#e8eef1,#9dabb4);border-color:rgba(255,255,255,.92);box-shadow:inset 0 4px 8px rgba(255,255,255,.55),inset 0 -8px 12px rgba(68,84,94,.18),0 12px 18px rgba(52,68,78,.24)}
.sound-lab-stage .sound-block.silent-e-block span,.sound-lab-stage .sound-block.silent-gh-start span,.sound-lab-stage .sound-block.silent-gh-end span{color:#344955}
.sound-lab-stage .sound-block.silent-letter-block::after{content:"";display:none;position:absolute;left:18%;top:47%;width:64%;height:4px;border-radius:99px;background:#e44747;box-shadow:0 1px 0 #fff;transform:rotate(-38deg);pointer-events:none}
.sound-lab-stage .sound-block.silent-letter-block.silent-active{color:#566875;background:linear-gradient(145deg,#eef3f5,#aebcc5);border-style:dashed;animation:none!important;transform:translateY(-18px) scale(1.08);filter:brightness(1.06) drop-shadow(0 0 14px rgba(100,121,133,.75))}
.sound-lab-stage .sound-block.silent-letter-block.silent-active span{color:#344955}
.sound-lab-stage .sound-block.silent-letter-block.silent-active::after{display:block}
.sound-lab-stage .sound-block.silent-e-block.silent-active::before{content:"SILENT E · NO SOUND";background:#e44747;animation:silentBadgePulse .7s ease-in-out infinite alternate}
.sound-lab-stage .sound-block.silent-gh-start::before{content:"SILENT GH";left:calc(100% + 5px)}
.sound-lab-stage .sound-block.silent-gh-end::before{display:none}
.sound-lab-stage .sound-block.silent-gh-start.silent-active::before{content:"SILENT GH · NO SOUND";background:#e44747;animation:silentBadgePulse .7s ease-in-out infinite alternate}
@keyframes silentBadgePulse{to{transform:translateX(-50%) scale(1.06);box-shadow:0 5px 16px rgba(228,71,71,.42)}}
.sound-lab-stage .sound-lab-blocks{--sound-card-gap:clamp(14px,1.8vw,22px)}
.sound-lab-stage .sound-lab-blocks.letters-4{--sound-card-gap:14px}
.sound-lab-stage .sound-lab-blocks.long-word{--sound-card-gap:10px}
.sound-lab-stage .sound-block.sound-group-start{position:relative}
.sound-lab-stage .sound-group-marker{position:absolute;left:0;bottom:-48px;z-index:8;display:block;height:38px;pointer-events:none;font-style:normal}
.sound-lab-stage .sound-group-marker.group-length-2{width:calc(200% + var(--sound-card-gap))}
.sound-lab-stage .sound-group-marker.group-length-3{width:calc(300% + var(--sound-card-gap) + var(--sound-card-gap))}
.sound-lab-stage .sound-group-marker::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:999px;background:#fff;box-shadow:0 3px 10px rgba(22,105,125,.32)}
.sound-lab-stage .sound-group-marker span{position:absolute;left:0;right:0;top:10px;color:#c72f35!important;font-size:13px!important;font-weight:950;text-align:center;white-space:nowrap}
@media(max-width:760px){.sound-lab-stage .sound-lab-blocks{--sound-card-gap:7px}.sound-lab-stage .sound-lab-blocks.letters-4{--sound-card-gap:5px}.sound-lab-stage .sound-lab-blocks.long-word{--sound-card-gap:3px}.sound-lab-stage .sound-group-marker{bottom:-40px;height:32px}.sound-lab-stage .sound-group-marker::before{height:4px}.sound-lab-stage .sound-group-marker span{top:8px;font-size:9px!important}}
.sound-lab-word-button span{position:static;display:block;transform:none;min-width:88px;padding:0;color:#fff;font-size:12px;font-weight:950;white-space:nowrap}
@media(max-width:760px){.sound-lab-stage{aspect-ratio:auto;min-height:420px}.sound-lab-stage .sound-lab-word-picture{left:50%;top:6%;width:175px;height:130px;transform:translateX(-50%)}.sound-lab-stage .sound-lab-blocks{left:50%;bottom:26%;gap:7px}.sound-lab-stage .sound-block{width:62px;height:74px}.sound-lab-stage .sound-block b{font-size:31px}.sound-lab-stage .sound-block span{font-size:12px}.sound-lab-stage .sound-lab-blocks.letters-3{left:50%}.sound-lab-stage .sound-lab-blocks.letters-4{left:50%;gap:5px}.sound-lab-stage .sound-lab-blocks.letters-4 .sound-block{width:54px;height:68px}.sound-lab-stage .sound-lab-blocks.letters-4 .sound-block b{font-size:28px}.sound-lab-stage .sound-lab-blocks.long-word{left:52%;gap:3px}.sound-lab-stage .sound-lab-blocks.long-word .sound-block{width:46px;height:60px}.sound-lab-stage .sound-lab-blocks.long-word .sound-block b{font-size:25px}.sound-lab-stage .sound-lab-blocks.long-word .sound-block span{font-size:9px}.sound-lab-stage .sound-lab-blocks.has-ch.ch-pair-active::after{bottom:-12px;width:95px;height:4px}.sound-lab-stage .sound-lab-blocks.has-ch.ch-pair-active::before{bottom:-32px;width:95px;font-size:10px}.sound-lab-blocks.ch-pair-active .sound-block.digraph-start{transform:translate(4px,-13px) scale(1.07)!important}.sound-lab-blocks.ch-pair-active .sound-block.digraph-end{transform:translate(-4px,-13px) scale(1.07)!important}.sound-lab-stage .sound-block.silent-letter-block::before{top:-23px;padding:3px 6px;font-size:8px}.sound-lab-stage .sound-block.silent-letter-block.silent-active::before{font-size:8px}.sound-lab-word-button span{font-size:10px}}

.sound-lab-actions button.lab-step-current{box-shadow:0 0 0 4px rgba(255,196,53,.38),0 8px 18px rgba(43,96,137,.2);transform:translateY(-2px)}
.sound-lab-actions button.lab-step-flash{animation:labStepFlash .82s ease-in-out infinite}
@keyframes labStepFlash{50%{filter:brightness(1.18);transform:translateY(-4px) scale(1.035);box-shadow:0 0 0 7px rgba(255,200,48,.28),0 0 24px rgba(255,185,35,.55)}}
@keyframes soundReelRoll{0%{transform:translateY(0) rotateX(0);filter:blur(0)}35%{transform:translateY(18px) rotateX(150deg);filter:blur(2px)}65%{transform:translateY(-18px) rotateX(300deg);filter:blur(2px)}100%{transform:translateY(0) rotateX(360deg);filter:blur(0)}}

/* Every Phonics 1 game starts with the learned vowel sound already in place. */
.phonics1-game-screen .fixed-sound-letter{cursor:default!important;opacity:1!important}
.phonics1-game-screen .fixed-learning-vowel{color:#fff!important;background:#ef4d57!important;border-color:#fff!important;box-shadow:0 0 0 4px rgba(239,77,87,.18),0 8px 16px rgba(80,31,38,.18)!important}
.phonics1-game-screen .fixed-sound-helper{color:#536876!important;background:#dce5ea!important;border-color:#fff!important;box-shadow:0 7px 14px rgba(49,68,80,.16)!important}

/* Speak cockpit v2: picture, letter row, and the three supplied controls. */
.speak-view .say-coach-stage{aspect-ratio:1674/941!important}
.speak-view .say-coach-bg{object-fit:cover!important;z-index:0!important}
.speak-view .cockpit-space-flyby{position:absolute;inset:0;z-index:1!important;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0 0);-webkit-mask-size:78% 12%;-webkit-mask-position:center 6%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(#000 0 0);mask-size:78% 12%;mask-position:center 6%;mask-repeat:no-repeat}
.speak-view .cockpit-space-flyby::before{content:"";position:absolute;inset:-35%;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.72) 0 1px,transparent 1.5px 34px);opacity:.28;animation:cockpitForwardStars 22s linear infinite}
.speak-view .flyby-object{display:none!important}
.speak-view .flyby-planet{width:clamp(32px,5.2vw,76px);height:clamp(32px,5.2vw,76px);clip-path:circle(47% at 50% 50%)}
.speak-view .flyby-star{width:clamp(18px,2.7vw,40px);height:clamp(18px,2.7vw,40px);clip-path:polygon(50% 3%,61% 36%,97% 37%,68% 58%,79% 94%,50% 72%,21% 94%,32% 58%,3% 37%,39% 36%)}
.speak-view .flyby-1{top:7%;left:103%;animation-duration:58s;animation-delay:-8s}
.speak-view .flyby-2{top:9%;left:103%;animation-duration:46s;animation-delay:-29s}
.speak-view .flyby-3{top:6%;left:103%;animation-duration:72s;animation-delay:-47s}
.speak-view .flyby-4{top:8%;left:103%;animation-duration:52s;animation-delay:-4s}
.speak-view .flyby-5{top:7%;left:103%;animation-duration:84s;animation-delay:-66s}
.speak-view .flyby-6{top:6%;right:103%;animation-name:cockpitFlyLeftToRight;animation-duration:90s;animation-delay:-32s}
.speak-view .flyby-7{top:9%;right:103%;animation-name:cockpitFlyLeftToRight;animation-duration:54s;animation-delay:-45s}
.speak-view .flyby-8{top:7%;right:103%;animation-name:cockpitFlyLeftToRight;animation-duration:68s;animation-delay:-15s}
.speak-view .flyby-9{top:6%;left:103%;animation-duration:96s;animation-delay:-75s}
@keyframes cockpitFlyRightToLeft{0%{transform:translate3d(0,-8px,0) scale(.28);opacity:0;filter:blur(3px) saturate(1.15)}8%{opacity:.9}58%{opacity:1;filter:blur(0) saturate(1.2)}92%{opacity:.88}100%{transform:translate3d(-1380%,42px,0) scale(1.08);opacity:0;filter:blur(2px) saturate(1.1)}}
@keyframes cockpitFlyLeftToRight{0%{transform:translate3d(0,8px,0) scale(.25);opacity:0;filter:blur(3px) saturate(1.15)}8%{opacity:.85}58%{opacity:1;filter:blur(0) saturate(1.2)}92%{opacity:.85}100%{transform:translate3d(1380%,-35px,0) scale(1.02);opacity:0;filter:blur(2px) saturate(1.1)}}
@keyframes cockpitForwardStars{0%{transform:scale(.72);opacity:.08}70%{opacity:.28}100%{transform:scale(1.32);opacity:0}}
.speak-view .say-coach-word{left:23%!important;top:34%!important;width:11.5%!important;height:18%!important}
.speak-view .say-coach-word img{transform:scale(.9)!important}
.speak-view .say-coach-phonemes{left:57%!important;top:36%!important;gap:12px!important}
.speak-view .say-coach-controls{left:50%!important;bottom:12%!important;width:min(390px,40%)!important;gap:18px!important}
.speak-view .say-console-button,.speak-view .say-demo-button.say-console-button,.speak-view .say-mic-button.say-console-button,.speak-view .say-play-button{width:104px!important;height:104px!important}
.speak-view .say-word-change-button{left:82%!important;top:73%!important}
/* Reuse the original Lily character set in Speak for both Alphabet and Phonics. */
.speak-view .say-coach-character{display:grid!important;left:1%!important;right:auto!important;bottom:1%!important;width:25%!important;height:62%!important;z-index:3!important;pointer-events:none}
.speak-view .say-coach-character img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:left bottom!important;filter:drop-shadow(0 12px 12px rgba(74,45,83,.22))!important}
.speak-view .say-coach-character span{left:62%!important;top:4%!important;min-width:132px!important;max-width:180px;padding:8px 12px!important;border-color:#f7b9d4!important;color:#59365e!important;font-size:13px!important;line-height:1.25}
.speak-view .say-coach-character span::after{border-color:transparent #f7b9d4 transparent transparent!important}
@media(max-width:760px){.speak-view .say-coach-stage{aspect-ratio:auto!important;min-height:440px!important}.speak-view .say-coach-word{left:23%!important;top:35%!important;width:13%!important;height:17%!important}.speak-view .say-coach-phonemes{left:57%!important;top:38%!important;gap:5px!important}.speak-view .say-coach-controls{left:50%!important;bottom:12%!important;width:44%!important;gap:6px!important}.speak-view .say-console-button,.speak-view .say-demo-button.say-console-button,.speak-view .say-mic-button.say-console-button,.speak-view .say-play-button{width:74px!important;height:74px!important}.speak-view .say-coach-character{left:-1%!important;bottom:1%!important;width:29%!important;height:55%!important}.speak-view .say-coach-character span{left:52%!important;top:0!important;min-width:106px!important;font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.speak-view .cockpit-space-flyby::before,.speak-view .flyby-object{animation-play-state:paused!important}.speak-view .flyby-1,.speak-view .flyby-3,.speak-view .flyby-6{opacity:.72!important;transform:scale(.55)!important}}

/* Listening Studio v2: align the interactive lesson with the supplied blue stage. */
.sound-lab-stage{aspect-ratio:1674/909}
.sound-lab-stage .sound-lab-bg{object-fit:cover}
.sound-lab-stage .sound-lab-word-picture{left:16.3%;top:24%;width:21%;height:39%;transform:translateX(-50%);filter:none}
.sound-lab-stage .sound-lab-word-screen-frame{display:none}
.sound-lab-stage .sound-lab-word-screen-content{left:5%;top:5%;width:90%;height:90%;border-radius:18px}
.sound-lab-stage .sound-lab-word-screen-content .word-art img{transform:scale(1.02)}
.sound-lab-word-screen-content .sound-lab-word-display{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#173b48;font-size:clamp(30px,5vw,64px);font-weight:950;letter-spacing:.03em;line-height:1}
.sound-lab-word-screen-content .sound-lab-word-display .blend-word-markup,.sound-lab-word-screen-content .sound-lab-word-display .vowel-word-markup{font-size:inherit}
.sound-lab-stage .sound-lab-blocks,.sound-lab-stage .sound-lab-blocks.letters-3,.sound-lab-stage .sound-lab-blocks.letters-4,.sound-lab-stage .sound-lab-blocks.long-word{left:55%;bottom:46%}
.sound-lab-word-button{right:2.2%;bottom:16%}
@media(max-width:760px){.sound-lab-stage{aspect-ratio:auto;min-height:420px}.sound-lab-stage .sound-lab-word-picture{left:16.5%;top:26%;width:22%;height:36%;transform:translateX(-50%)}.sound-lab-stage .sound-lab-blocks,.sound-lab-stage .sound-lab-blocks.letters-3,.sound-lab-stage .sound-lab-blocks.letters-4,.sound-lab-stage .sound-lab-blocks.long-word{left:55%;bottom:46%}.sound-lab-word-button{right:1.5%;bottom:13%}}

/* Unit 1 - Alphabet Word Delivery Train */
.word-delivery-game{max-width:1180px;margin:0 auto;padding:20px}.delivery-hud{margin-bottom:12px}.word-delivery-stage{position:relative;min-height:600px;overflow:hidden;border-radius:28px;box-shadow:0 24px 55px rgba(20,42,66,.2);isolation:isolate}.word-delivery-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.delivery-word-picture{position:absolute;left:37%;top:21%;width:27%;height:29%;z-index:2;display:grid;place-items:center}.delivery-word-picture .word-art{width:100%;height:100%;min-height:0;background:transparent;box-shadow:none}.delivery-word-picture img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(35,48,38,.18))}.delivery-slots{position:absolute;left:37%;top:54%;width:27%;height:14%;z-index:4;display:flex;align-items:center;justify-content:center;gap:14px}.delivery-slots span{width:72px;height:72px;display:grid;place-items:center;border:3px dashed #b9c8cf;border-radius:15px;background:rgba(255,255,255,.78);color:#91a1a9;font-size:35px;font-weight:950;box-shadow:inset 0 3px 8px rgba(33,56,68,.08)}.delivery-slots span.filled{border-style:solid;border-color:#42bea2;background:#dffff1;color:#126a78;animation:deliverySlotPop .38s ease}.delivery-train{position:absolute;left:-122%;bottom:-1%;width:114%;height:auto;z-index:5;transition:left 2.1s cubic-bezier(.36,.04,.2,1)}.delivery-train>img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 9px rgba(28,39,42,.28))}.train-arrived .delivery-train{left:-7%}.delivery-departing .delivery-train{left:112%;transition-duration:2.4s}.delivery-carriage-letters{position:absolute;inset:0}.delivery-carriage-letters button{position:absolute;left:calc(4.1% + var(--car)*15.75%);top:39%;width:11.2%;height:34%;padding:0;border:0;background:transparent;color:#173b50;cursor:pointer;text-align:center;transition:transform .16s,opacity .2s}.delivery-carriage-letters b{display:block;font-size:clamp(28px,4vw,49px);line-height:1}.delivery-carriage-letters small{display:block;font-size:13px;font-weight:950;color:#1682a1}.delivery-carriage-letters button:hover{transform:translateY(-6px) scale(1.08)}.delivery-carriage-letters button.used{opacity:.3;transform:scale(.82)}.delivery-carriage-letters button.wrong{animation:trainShake .34s}.delivery-cargo{position:absolute;left:39%;top:2%;padding:8px 18px;border-radius:14px;background:#fff4bd;color:#775000;font-weight:950;opacity:0}.delivery-complete .delivery-cargo{animation:deliveryDrop 1s ease forwards}.delivery-success{position:absolute;left:50%;top:60%;z-index:7;transform:translate(-50%,-50%) scale(.2);padding:12px 28px;border:4px solid #fff;border-radius:18px;background:#ffcf48;color:#633d00;font-size:38px;font-weight:950;opacity:0}.delivery-complete .delivery-success{animation:deliverySuccess .85s .35s ease forwards}.delivery-message{display:flex;align-items:center;gap:14px;margin-top:13px;padding:12px 16px;border:2px solid #d9e9f2;border-radius:18px;background:#fff}.delivery-message button{min-width:135px}.delivery-message p{margin:0;flex:1;text-align:center;color:#526b7d;font-weight:900}.word-delivery-game .pager{margin-top:12px}.word-delivery-game .pager button:disabled{opacity:.45}.delivery-departing .delivery-success{opacity:0!important;transition:opacity .3s}@keyframes deliverySlotPop{50%{transform:scale(1.18)}}@keyframes deliveryDrop{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(-190px)}}@keyframes deliverySuccess{60%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(max-width:760px){.word-delivery-game{padding:10px}.word-delivery-stage{min-height:520px}.delivery-word-picture{left:34%;width:32%;top:20%}.delivery-slots{left:33%;width:34%;gap:7px}.delivery-slots span{width:52px;height:58px;font-size:27px}.delivery-train{width:135%;bottom:1%}.train-arrived .delivery-train{left:-18%}.delivery-carriage-letters b{font-size:27px}.delivery-message{flex-direction:column}.delivery-message button{width:100%}}
/* Phonics 1 - Sound Train Adventure */
.short-e-detective{max-width:1180px;margin:0 auto;padding:20px}.detective-hud{margin-bottom:12px}.detective-room{position:relative;min-height:650px;overflow:hidden;border-radius:30px;box-shadow:0 24px 58px rgba(26,44,64,.22);isolation:isolate}.detective-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.detective-meg{position:absolute;left:1%;bottom:4%;width:24%;max-height:58%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 13px 13px rgba(20,33,42,.25));z-index:4;transition:.35s}.detective-case-card{position:absolute;left:21%;right:8%;top:4%;z-index:5;padding:15px 22px;border:3px solid rgba(255,255,255,.92);border-radius:22px;background:rgba(255,255,255,.92);text-align:center;box-shadow:0 12px 28px rgba(24,54,68,.16)}.detective-case-card>span{font-weight:950;color:#148a9d;text-transform:uppercase;letter-spacing:.08em}.detective-case-card h1{margin:2px 0 8px;color:#173b50;font-size:clamp(25px,3.3vw,42px)}.detective-case-card p{margin:8px 0 0;font-weight:850;color:#5c7180}.detective-objects{position:absolute;left:24%;right:4%;top:31%;bottom:24%;display:grid;grid-template-columns:repeat(4,1fr);gap:13px;z-index:3}.detective-object{position:relative;border:3px solid rgba(255,255,255,.92);border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 12px 18px rgba(30,50,65,.16);transition:.2s}.detective-word-object{height:100%;display:grid;place-items:center}.detective-word-object img{width:92%;height:88%;object-fit:contain}.detective-object>span{position:absolute;right:9px;top:8px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#168aa5;color:#fff;font-weight:950}.detective-object:hover{transform:translateY(-5px) rotate(-1deg)}.detective-object.wrong{animation:trainShake .34s;border-color:#ff7886}.detective-object.found{border-color:#43c696;background:#e2fff3;transform:scale(1.05);box-shadow:0 0 0 6px rgba(67,198,150,.18),0 14px 24px rgba(25,70,60,.2)}.detective-vowel-panel{position:absolute;left:29%;right:10%;bottom:8%;z-index:5;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 18px;border:3px solid #a9dce6;border-radius:20px;background:rgba(255,255,255,.95);opacity:0;transform:translateY(25px);pointer-events:none;transition:.3s}.detective-vowel-panel.active{opacity:1;transform:none;pointer-events:auto}.detective-vowel-panel>span{font-weight:900;color:#517080}.detective-vowel-panel>strong{font-size:29px;color:#173b50;letter-spacing:.09em}.detective-vowel-panel>div{display:flex;gap:8px}.detective-vowel-panel button{min-width:55px;padding:7px;border:2px solid #badbe5;border-radius:12px;background:#effaff;font-size:24px;font-weight:950;color:#17647d}.detective-vowel-panel button.correct{background:#dffff0;border-color:#42c58e}.detective-vowel-panel button.wrong{animation:trainShake .34s}.detective-feedback{position:absolute;left:3%;right:3%;bottom:1%;z-index:6;margin:0;text-align:center;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4)}.case-solved .detective-meg{transform:translateY(-10px) rotate(-2deg)}.case-solved .detective-room:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 55% 50%,rgba(255,237,115,.35),transparent 35%)}.detective-finale{max-width:1180px;margin:0 auto;padding:20px}.detective-finale-room{position:relative;min-height:660px;overflow:hidden;border-radius:30px;box-shadow:0 24px 58px rgba(26,44,64,.22);isolation:isolate}.detective-finale-meg{position:absolute;left:2%;bottom:5%;width:26%;max-height:62%;object-fit:contain;z-index:3}.detective-finale-copy{position:absolute;left:22%;right:8%;top:5%;z-index:4;padding:18px;text-align:center;border-radius:24px;background:rgba(255,255,255,.93)}.detective-finale-copy span{font-weight:950;color:#168a9d;text-transform:uppercase}.detective-finale-copy h1{margin:4px;color:#173b50;font-size:clamp(28px,4vw,48px)}.detective-finale-copy p{margin:0;font-weight:850;color:#5a7180}.detective-case-book{position:absolute;left:25%;right:4%;top:32%;bottom:5%;display:grid;grid-template-columns:repeat(5,1fr);gap:9px;z-index:3}.detective-case-book>div{padding:7px;border:2px solid #fff;border-radius:16px;background:rgba(255,255,255,.9);text-align:center}.detective-finale-word{height:82%;display:grid;place-items:center}.detective-finale-word img{width:100%;height:100%;object-fit:contain}.detective-case-book strong{color:#173b50;text-transform:uppercase}@media(max-width:760px){.short-e-detective{padding:10px}.detective-room{min-height:620px}.detective-case-card{left:5%;right:5%}.detective-meg{width:30%;bottom:12%}.detective-objects{left:8%;right:5%;top:31%;bottom:30%;grid-template-columns:repeat(2,1fr)}.detective-vowel-panel{left:5%;right:5%;bottom:8%;flex-wrap:wrap}.detective-finale-room{min-height:650px}.detective-finale-copy{left:5%;right:5%}.detective-finale-meg{width:32%;bottom:7%}.detective-case-book{left:30%;top:31%;grid-template-columns:repeat(3,1fr)}}
.short-e-rooftop,.rooftop-finale{max-width:1180px;margin:0 auto;padding:20px}.rooftop-hud{margin-bottom:12px}.rooftop-stage,.rooftop-finale>article{position:relative;min-height:670px;overflow:hidden;border-radius:30px;background-image:linear-gradient(rgba(31,57,83,.05),rgba(31,57,83,.12)),var(--rooftop-bg);background-size:cover;background-position:center;box-shadow:0 24px 58px rgba(31,58,83,.24)}.rooftop-banner{position:absolute;left:3%;top:3%;z-index:4;width:42%;padding:13px 20px;border:3px solid #fff;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 10px 25px rgba(38,65,82,.16)}.rooftop-banner span,.rooftop-finale>article>div:first-child span{font-weight:950;color:#d85b67;text-transform:uppercase;letter-spacing:.07em}.rooftop-banner h1{margin:2px 0;color:#29445b;font-size:clamp(22px,3vw,37px)}.rooftop-banner h1 b{color:#ff5e70}.rooftop-banner p{margin:0;font-weight:850;color:#5d7180}.rooftop-grid{position:absolute;left:7%;right:7%;top:27%;bottom:8%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr);gap:7px;padding:8px;border-radius:25px;background:rgba(255,255,255,.22);backdrop-filter:blur(2px)}.roof-tile,.roof-obstacle,.rooftop-energy,.rooftop-goal,.rooftop-courier{grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 1)}.roof-tile{border:2px solid rgba(255,255,255,.74);border-radius:15px;background:rgba(255,246,218,.58);box-shadow:inset 0 -4px rgba(174,100,64,.12)}.roof-tile.blocked{background:rgba(116,139,163,.28)}.roof-obstacle{z-index:3;display:grid;place-items:center;font-size:clamp(28px,4vw,54px);filter:drop-shadow(0 5px 5px rgba(45,64,79,.25))}.rooftop-energy{z-index:4;display:grid;place-items:center;align-content:center;margin:7px;border-radius:50%;background:radial-gradient(circle,#fff 15%,#ffe45d 44%,#ff7f68 72%);color:#83384b;box-shadow:0 0 0 7px rgba(255,255,255,.65),0 0 28px #ffe45d;animation:roofPulse .8s ease-in-out infinite alternate;transition:.3s}.rooftop-energy b{font-size:clamp(28px,4vw,49px);line-height:.8}.rooftop-energy span{font-weight:950}.rooftop-energy.collected{opacity:0;transform:scale(.1)}.rooftop-goal{z-index:3;display:grid;grid-template-columns:1fr;place-items:center;margin:3px;padding:3px;border:3px dashed #fff;border-radius:17px;background:rgba(255,255,255,.86)}.rooftop-goal-picture{height:56px;display:grid;place-items:center}.rooftop-goal-picture img{width:100%;height:100%;object-fit:contain}.rooftop-goal strong{font-size:20px;color:#344c5f;text-transform:uppercase}.rooftop-courier{z-index:6;display:grid;place-items:center;transition:grid-column .22s,grid-row .22s,transform .2s}.rooftop-courier span{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#56cff0;font-size:38px;box-shadow:0 8px 0 #2183aa,0 0 0 5px #fff,0 10px 20px rgba(24,60,82,.3)}.roof-charged .rooftop-courier span{background:#ffe15a;box-shadow:0 8px 0 #d78238,0 0 0 5px #fff,0 0 28px #ffea72}.roof-solved .rooftop-goal{animation:roofGoal .7s ease forwards;background:#e8ffdc}.roof-bump .rooftop-courier{animation:trainShake .25s}.rooftop-controls{position:absolute;right:3%;top:3%;z-index:5;width:155px;text-align:center}.rooftop-controls button{width:48px;height:43px;margin:2px;border:2px solid #fff;border-radius:13px;background:#345b7c;color:#fff;font-size:22px;font-weight:950;box-shadow:0 5px 0 #1b3851}.rooftop-controls button:active{transform:translateY(4px);box-shadow:0 1px 0 #1b3851}.rooftop-finale>article>div:first-child{position:absolute;left:8%;right:8%;top:5%;padding:18px;text-align:center;border-radius:25px;background:rgba(255,255,255,.94)}.rooftop-finale h1{margin:3px;color:#29445b;font-size:clamp(27px,4vw,47px)}.rooftop-finale p{margin:0;font-weight:850;color:#5d7180}.rooftop-deliveries{position:absolute;left:8%;right:8%;top:31%;bottom:7%;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.rooftop-deliveries>div{display:grid;place-items:center;padding:7px;border:3px solid #fff;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 8px 14px rgba(38,58,70,.14)}.rooftop-finale-picture{height:85px;display:grid;place-items:center}.rooftop-finale-picture img{width:100%;height:100%;object-fit:contain}.rooftop-deliveries strong{text-transform:uppercase;color:#29445b}@keyframes roofPulse{to{transform:scale(1.1) rotate(4deg)}}@keyframes roofGoal{50%{transform:scale(1.18)}100%{transform:scale(1.05)}}@media(max-width:760px){.short-e-rooftop,.rooftop-finale{padding:10px}.rooftop-stage{min-height:690px}.rooftop-banner{left:4%;width:65%}.rooftop-controls{right:2%;width:125px}.rooftop-grid{left:2%;right:2%;top:32%;bottom:8%;gap:3px}.rooftop-courier span{width:45px;height:45px;font-size:28px}.rooftop-goal-picture{height:40px}.rooftop-deliveries{left:4%;right:4%;grid-template-columns:repeat(3,1fr)}.rooftop-finale>article{min-height:720px}}
.sound-train-finale{max-width:1180px;margin:0 auto;padding:20px}.train-finale-stage{position:relative;min-height:650px;overflow:hidden;border-radius:30px;box-shadow:0 24px 58px rgba(18,49,62,.22);isolation:isolate}.train-finale-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.train-finale-copy{position:absolute;top:4%;left:18%;right:18%;z-index:4;padding:17px 24px;text-align:center;border:3px solid rgba(255,255,255,.88);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(24,58,68,.16)}.train-finale-copy span{font-weight:950;color:#159178;text-transform:uppercase;letter-spacing:.08em}.train-finale-copy h1{margin:3px 0;color:#173d50;font-size:clamp(27px,4vw,48px)}.train-finale-copy p{margin:0;font-weight:800;color:#5a7180}.train-finale-conductor{position:absolute;left:1.5%;bottom:13%;width:23%;max-height:52%;object-fit:contain;z-index:3;filter:drop-shadow(0 12px 14px rgba(16,34,40,.24));animation:finaleBounce 1.2s ease-in-out infinite alternate}.train-finale-burst{position:absolute;right:4%;top:20%;width:24%;z-index:2;animation:finaleSpin 8s linear infinite}.train-word-parade{position:absolute;left:4%;right:4%;bottom:4%;z-index:5;display:grid;grid-template-columns:repeat(9,1fr);gap:8px}.train-word-parade>div{min-width:0;padding:7px 4px;border:2px solid rgba(255,255,255,.9);border-radius:15px;background:rgba(255,255,255,.9);text-align:center;box-shadow:0 7px 15px rgba(25,50,55,.14)}.train-word-parade .finale-word-picture{width:100%;height:70px;object-fit:contain}.train-word-parade strong{display:block;color:#173d50;text-transform:uppercase;font-size:14px}.train-finale-reward{width:max-content;margin:14px auto;display:flex;align-items:center;gap:12px;padding:10px 24px;border-radius:999px;background:#fff3bc;color:#754d00;box-shadow:0 8px 20px rgba(91,64,0,.12)}.train-finale-reward b{font-size:31px}.train-finale-reward span{font-weight:900}@keyframes finaleBounce{to{transform:translateY(-10px) rotate(-2deg)}}@keyframes finaleSpin{to{transform:rotate(360deg)}}@media(max-width:760px){.train-finale-stage{min-height:600px}.train-finale-copy{left:4%;right:4%}.train-finale-conductor{width:30%;bottom:21%}.train-word-parade{grid-template-columns:repeat(5,1fr)}.train-word-parade .finale-word-picture{height:48px}.train-word-parade strong{font-size:11px}}
.story-quest{display:flex;flex-direction:column;gap:12px}.story-quest>h2{margin-bottom:0}.story-quest-step{position:relative;padding:15px 16px 15px 58px!important;border:2px solid #e3ebf3!important;border-radius:18px!important;background:#f7fafc!important;opacity:.55;filter:saturate(.6);transition:.25s}.story-quest-step.active{opacity:1;filter:none;border-color:#9ed9e3!important;background:#fff!important;box-shadow:0 8px 22px rgba(32,108,136,.09)}.story-step-number{position:absolute;left:15px;top:15px;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#dce8ef;color:#607686}.story-quest-step.active .story-step-number{background:linear-gradient(145deg,#26bd9c,#1689bd);color:#fff}.story-quest-step>span{display:block;margin-bottom:4px;font-size:16px}.story-sound-row{display:flex;gap:9px;margin-top:10px}.story-sound-row button{min-width:74px;padding:7px 13px;border:2px solid #b9d9e8;border-radius:14px;background:#f3fbff;color:#173850}.story-sound-row button b{display:block;font-size:22px}.story-sound-row button span{font-size:13px}.story-sound-row button.correct{border-color:#43c394;background:#dffff1}.story-sound-row button.wrong{animation:trainShake .34s}.story-say-actions{display:flex;gap:9px;margin-top:10px}.story-say-actions button{flex:1;min-height:46px}.story-quest button:disabled{opacity:.48;cursor:not-allowed}.story-quest-step.active button:disabled.correct{opacity:1}.story-quest.task-done .story-quest-step{opacity:1;filter:none}@media(max-width:760px){.story-quest-step{padding-left:50px!important}.story-say-actions{flex-direction:column}.story-sound-row{justify-content:center}}
.sound-train-stage{background:#dff5ed!important}.train-station-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.train-game-description{padding:16px 4px 4px}.train-game-description h1{margin:0 0 6px;color:#17233d;font-size:clamp(27px,3.2vw,40px)}.train-game-description p{margin:0;color:#5a687f;font-size:16px;font-weight:800}
.sound-carriages{flex-direction:row!important}
.sound-train-game{max-width:1180px;margin:0 auto;padding:20px}.sound-train-hud{margin-bottom:12px}.sound-train-stage{position:relative;min-height:570px;overflow:hidden;border-radius:28px;background-image:linear-gradient(180deg,rgba(14,39,73,.04),rgba(12,38,66,.16)),var(--station-bg);background-size:cover;background-position:center;box-shadow:0 24px 55px rgba(20,42,66,.2);isolation:isolate}.sound-train-stage:after{content:"";position:absolute;inset:auto 0 0;height:25%;background:linear-gradient(transparent,rgba(15,34,47,.28));z-index:1;pointer-events:none}.sound-gate{position:absolute;right:1.5%;bottom:22%;width:20%;max-height:45%;object-fit:contain;z-index:2;filter:drop-shadow(0 12px 12px rgba(20,35,45,.25));transition:transform .7s ease}.train-destination{position:absolute;right:4%;top:4%;width:20%;height:31%;z-index:4}.train-destination>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(15,35,45,.2))}.train-destination>div{position:absolute;inset:18% 16% 20%;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column}.train-destination .train-word-picture{width:72%;height:70%;object-fit:contain}.train-destination strong{font-size:clamp(18px,2.1vw,28px);color:#18364d;text-transform:uppercase}.train-conductor{position:absolute;left:2.5%;bottom:18%;width:20%;max-height:58%;object-fit:contain;object-position:bottom;z-index:5;filter:drop-shadow(0 12px 14px rgba(15,33,43,.22));transition:transform .35s}.train-instruction{position:absolute;left:21%;top:5%;width:53%;padding:17px 24px;border:3px solid rgba(255,255,255,.85);border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(25,53,74,.16);z-index:5;text-align:center}.train-instruction span{color:#1479a9;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.train-instruction h1{margin:3px 0;font-size:clamp(24px,3.2vw,42px);color:#15364f}.train-instruction p{margin:0;color:#536b7d;font-weight:800}.train-consist{position:absolute;left:17%;right:5%;bottom:4%;height:43%;z-index:4;transition:transform 1.8s cubic-bezier(.5,.02,.35,1)}.train-track-platform{position:absolute;left:-3%;bottom:-7%;width:108%;height:41%;object-fit:fill;z-index:0}.train-locomotive{position:absolute;right:0;bottom:13%;width:29%;height:73%;object-fit:contain;object-position:bottom;z-index:3;filter:drop-shadow(0 12px 10px rgba(15,30,38,.3))}.sound-carriages{position:absolute;left:0;right:25%;bottom:18%;height:64%;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-end;gap:-2px;z-index:2}.sound-carriage{position:relative;width:31%;height:100%;margin-right:-2%;transform:translateY(7px);transition:transform .25s,filter .25s}.sound-carriage img{width:100%;height:100%;object-fit:contain;filter:grayscale(.2) brightness(.92) drop-shadow(0 9px 7px rgba(20,30,35,.28))}.sound-carriage>div{position:absolute;inset:20% 21% 26%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.2)}.sound-carriage b{font-size:clamp(29px,4vw,49px);line-height:1}.sound-carriage span{font-weight:900;font-size:16px}.sound-carriage.connected{transform:translateY(0) scale(1.04)}.sound-carriage.connected img{filter:saturate(1.25) drop-shadow(0 0 14px rgba(255,221,94,.9))}.train-success-burst{position:absolute;left:44%;top:27%;width:23%;z-index:6;opacity:0;transform:scale(.2) rotate(-18deg);pointer-events:none}.train-control-panel{display:grid;grid-template-columns:190px 1fr;gap:14px;margin-top:14px;padding:15px;border:2px solid #d9e9f2;border-radius:22px;background:#fff;box-shadow:0 12px 28px rgba(25,52,70,.1)}.train-hear-word{grid-row:1/3;border:0;border-radius:18px;background:linear-gradient(145deg,#ffb740,#ff765c);color:#fff;font-weight:900;font-size:18px;box-shadow:0 8px 0 #d95646}.train-hear-word span{display:block;font-size:28px}.train-sound-choices{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.train-sound-choices button{min-width:86px;padding:8px 18px;border:3px solid #b9d9e8;border-radius:18px;background:#f4fbff;color:#15364f;box-shadow:0 5px 0 #a7cad9;transition:transform .15s}.train-sound-choices b{display:block;font-size:27px}.train-sound-choices span{font-weight:900;color:#1683af}.train-sound-choices button:hover{transform:translateY(-3px)}.train-sound-choices button.used{border-color:#57c79b;background:#dffff1;box-shadow:none;transform:translateY(5px)}.train-sound-choices button.wrong{animation:trainShake .34s}.train-control-panel .task-feedback{grid-column:2;margin:0;text-align:center;font-weight:850;color:#526b7d}.sound-train-game .pager{margin-top:12px}.sound-train-game .pager button:disabled{opacity:.45;cursor:not-allowed}.train-complete .train-success-burst{animation:trainBurst .75s ease forwards}.train-complete .sound-gate{transform:translateX(70%)}.train-complete .train-conductor{transform:translateY(-8px) rotate(-2deg)}.train-complete .train-consist{animation:trainDepart 2.8s 1.4s ease-in forwards}@keyframes trainShake{25%{transform:translateX(-7px) rotate(-2deg)}50%{transform:translateX(7px) rotate(2deg)}75%{transform:translateX(-4px)}}@keyframes trainBurst{60%{opacity:1;transform:scale(1.15) rotate(5deg)}100%{opacity:1;transform:scale(1)}}@keyframes trainDepart{to{transform:translateX(125%)}}@media(max-width:760px){.sound-train-game{padding:10px}.sound-train-stage{min-height:510px}.train-instruction{left:5%;width:68%;padding:12px}.train-conductor{width:25%;bottom:20%}.train-consist{left:3%;right:1%;height:38%}.train-destination{width:25%}.train-control-panel{grid-template-columns:1fr}.train-hear-word{grid-row:auto;padding:12px}.train-control-panel .task-feedback{grid-column:1}.train-sound-choices button{min-width:68px;padding:7px 12px}}
.short-i-orchestra,.orchestra-finale{max-width:1180px;margin:0 auto;padding:20px}.orchestra-hud{margin-bottom:12px}.orchestra-stage,.orchestra-finale>article{position:relative;min-height:680px;overflow:hidden;border-radius:30px;background-image:linear-gradient(rgba(15,8,42,.08),rgba(15,8,42,.25)),var(--orchestra-bg);background-size:cover;background-position:center;box-shadow:0 24px 60px rgba(20,13,46,.35)}.orchestra-title,.orchestra-finale-title{position:absolute;left:5%;right:5%;top:3%;z-index:5;padding:12px 20px;border:3px solid rgba(255,255,255,.85);border-radius:23px;background:rgba(255,255,255,.92);text-align:center}.orchestra-title span,.orchestra-finale-title span{font-weight:950;color:var(--family-color,#8056ca);letter-spacing:.07em;text-transform:uppercase}.orchestra-title h1,.orchestra-finale-title h1{margin:2px;color:#2c3156;font-size:clamp(24px,3.5vw,42px)}.orchestra-title p,.orchestra-finale-title p{margin:0;font-weight:850;color:#65708a}.conduct-path{position:absolute;left:7%;right:7%;top:25%;height:45%;z-index:4;touch-action:none}.conduct-path svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.conduct-path polyline{fill:none;stroke:rgba(255,255,255,.58);stroke-width:2.2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.conduct-node{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);z-index:4;width:58px;height:58px;transform:translate(-50%,-50%);border:5px solid #fff;border-radius:50%;background:#4b4d72;color:#fff;font-size:20px;font-weight:950;box-shadow:0 8px 0 #272947,0 0 18px rgba(255,255,255,.4);transition:.2s}.conduct-node.next{background:var(--family-color);animation:roofPulse .7s infinite alternate;box-shadow:0 8px 0 #362a54,0 0 30px #fff}.conduct-node.played{background:#ffe764;color:#5e4610;transform:translate(-50%,-50%) scale(.85);box-shadow:0 4px 0 #c99035}.conductor-baton{position:absolute;left:8%;top:82%;z-index:6;width:50px;height:50px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:var(--family-color);font-size:34px;box-shadow:0 0 24px #fff;transition:left .22s,top .22s}.family-performers{position:absolute;left:13%;right:13%;bottom:3%;z-index:5;display:flex;justify-content:center;gap:16px}.family-performers>div{width:150px;height:130px;padding:5px;border:3px solid rgba(255,255,255,.85);border-radius:20px;background:rgba(255,255,255,.9);text-align:center;opacity:.42;transform:translateY(25px);transition:.5s}.orchestra-complete .family-performers>div{opacity:1;transform:none;animation:finaleBounce .7s ease alternate 2}.orchestra-word-picture{height:94px;display:grid;place-items:center}.orchestra-word-picture img{width:100%;height:100%;object-fit:contain}.family-performers strong{text-transform:uppercase;color:#2b3154}.off-beat .conductor-baton{animation:trainShake .3s}.orchestra-finale-title{top:5%}.orchestra-family-board{position:absolute;left:8%;right:8%;top:31%;bottom:8%;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.orchestra-family-board>div{display:flex;align-items:center;justify-content:center;gap:14px;border:3px solid #fff;border-radius:24px;background:rgba(255,255,255,.9)}.orchestra-family-board b{font-size:36px;color:#7551b5}.orchestra-family-board span{padding:7px 12px;border-radius:12px;background:#f0e8ff;font-weight:950;text-transform:uppercase;color:#34395f}@media(max-width:760px){.short-i-orchestra,.orchestra-finale{padding:10px}.orchestra-stage{min-height:700px}.conduct-path{left:2%;right:2%;top:27%}.conduct-node{width:46px;height:46px}.family-performers{left:3%;right:3%}.family-performers>div{width:110px;height:110px}.orchestra-word-picture{height:76px}.orchestra-family-board{left:4%;right:4%;grid-template-columns:1fr}.orchestra-finale>article{min-height:720px}}
.short-o-pop-lab,.pop-finale{max-width:1180px;margin:0 auto;padding:20px}.pop-hud{margin-bottom:12px}.pop-lab-stage,.pop-finale>article{position:relative;min-height:680px;overflow:hidden;border-radius:30px;background-image:linear-gradient(rgba(76,35,11,.06),rgba(76,35,11,.18)),var(--pop-bg);background-size:cover;background-position:center;box-shadow:0 24px 60px rgba(62,32,14,.3)}.pop-lab-title,.pop-finale-title{position:absolute;left:29%;right:29%;top:3%;z-index:5;padding:12px 16px;border:3px solid #fff2cd;border-radius:22px;background:rgba(255,250,231,.94);text-align:center}.pop-lab-title span,.pop-finale-title span{font-weight:950;color:#b65d22;text-transform:uppercase;letter-spacing:.07em}.pop-lab-title h1,.pop-finale-title h1{margin:2px;color:#54351e;font-size:clamp(22px,3vw,37px)}.pop-lab-title p,.pop-finale-title p{margin:0;font-weight:850;color:#80634c}.pop-gauge{position:absolute;left:27%;right:27%;top:27%;height:55px;border:5px solid #fff0c6;border-radius:999px;background:linear-gradient(90deg,#63bfe5,#ffe36e,#f15a3d);box-shadow:0 9px 20px rgba(72,35,13,.28)}.pop-zone{position:absolute;left:calc(var(--low)*1%);width:calc((var(--high) - var(--low))*1%);top:-8px;bottom:-8px;border:5px solid #e7ff9b;border-radius:18px;background:rgba(113,219,73,.45);box-shadow:0 0 20px #bfff6d}.pop-needle{position:absolute;left:0;top:-17px;width:8px;height:80px;border-radius:8px;background:#fff;box-shadow:0 0 0 4px #572c20,0 0 16px #fff;transform:translateX(-50%)}.pop-gauge>span{position:absolute;top:62px;color:#fff;font-weight:950;text-shadow:0 2px 4px #4c2a18}.pop-gauge>span:last-child{right:0}.heat-hold{position:absolute;left:42%;right:42%;top:41%;z-index:7;height:65px;border:4px solid #fff4cb;border-radius:20px;background:linear-gradient(#ff9a38,#e64e24);color:#fff;font-size:20px;font-weight:950;box-shadow:0 9px 0 #9b351d,0 13px 22px rgba(62,26,11,.25);touch-action:none}.heat-hold:active{transform:translateY(7px);box-shadow:0 2px 0 #9b351d}.heat-miss .heat-hold{animation:trainShake .2s}.popcorn-chamber{position:absolute;left:26%;right:26%;bottom:4%;height:31%;z-index:5;display:flex;align-items:flex-end;justify-content:center;gap:10px}.word-kernel{width:140px;height:125px;padding:5px;border:4px solid #fff0bd;border-radius:50% 50% 42% 42%;background:#f6cb56;text-align:center;opacity:.3;transform:scale(.35) translateY(50px);transition:.55s}.batch-popped .word-kernel{opacity:1;transform:none;animation:kernelPop .6s cubic-bezier(.2,1.5,.5,1) both}.batch-popped .kernel-1{animation-delay:.15s}.batch-popped .kernel-2{animation-delay:.3s}.pop-word-picture{height:90px;display:grid;place-items:center}.pop-word-picture img{width:100%;height:100%;object-fit:contain}.word-kernel strong{display:block;color:#613a1d;text-transform:uppercase}.pop-finale-title{top:5%}.pop-family-shelves{position:absolute;left:8%;right:8%;top:31%;bottom:8%;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.pop-family-shelves>div{display:flex;align-items:center;justify-content:center;gap:15px;border:4px solid #ffe9ac;border-radius:25px;background:rgba(255,248,218,.92)}.pop-family-shelves b{font-size:38px;color:#b95520}.pop-family-shelves span{padding:8px 13px;border-radius:50%;background:#ffc94d;color:#5b361b;font-weight:950;text-transform:uppercase}@keyframes kernelPop{0%{transform:scale(.2) translateY(80px)}70%{transform:scale(1.18) translateY(-18px)}100%{transform:none}}@media(max-width:760px){.short-o-pop-lab,.pop-finale{padding:10px}.pop-lab-stage{min-height:700px}.pop-lab-title{left:5%;right:5%}.pop-gauge{left:10%;right:10%;top:29%}.heat-hold{left:31%;right:31%;top:43%}.popcorn-chamber{left:4%;right:4%}.word-kernel{width:105px;height:108px}.pop-word-picture{height:74px}.pop-family-shelves{left:4%;right:4%;grid-template-columns:1fr}.pop-finale>article{min-height:720px}}
.pop-zone{width:26%!important}
.short-u-launch,.launch-finale{max-width:1180px;margin:0 auto;padding:20px}.launch-hud{margin-bottom:12px}.launch-stage,.launch-finale>article{position:relative;min-height:630px;overflow:hidden;border-radius:30px;background-image:linear-gradient(rgba(21,87,136,.03),rgba(21,87,136,.12)),var(--launch-bg);background-size:cover;background-position:center;box-shadow:0 24px 60px rgba(31,75,105,.28)}.launch-title,.launch-finale>article>div:first-child{position:absolute;left:25%;right:9%;top:3%;z-index:5;padding:13px 20px;border:3px solid #fff;border-radius:23px;background:rgba(255,255,255,.93);text-align:center}.launch-title span,.launch-finale>article>div:first-child span{font-weight:950;color:#ef7137;text-transform:uppercase;letter-spacing:.07em}.launch-title h1,.launch-finale h1{margin:2px;color:#244a67;font-size:clamp(23px,3.5vw,41px)}.launch-title p,.launch-finale p{margin:0;font-weight:850;color:#647d8e}.launch-target{position:absolute;left:calc(30% + var(--target)*.58%);bottom:17%;z-index:3;width:105px;height:48px;display:grid;place-items:center;border:7px solid #fff47a;border-radius:50%;background:rgba(255,132,71,.78);box-shadow:0 0 24px #fff760;transform:translateX(-50%)}.launch-target b{color:#fff;font-size:26px}.launch-cargo{position:absolute;left:8%;bottom:16%;z-index:6;width:105px;height:105px;padding:5px;border:5px solid #fff;border-radius:50%;background:#ffe664;text-align:center;box-shadow:0 10px 20px rgba(31,67,87,.25)}.launch-word-picture{height:73px;display:grid;place-items:center}.launch-word-picture img{width:100%;height:100%;object-fit:contain}.launch-cargo strong{display:block;color:#3c5262;text-transform:uppercase}.launch-cargo.flying{animation:cargoFlight 1s cubic-bezier(.25,.55,.55,1) forwards}.launch-cargo.landed{box-shadow:0 0 0 9px rgba(255,246,95,.6),0 10px 20px rgba(31,67,87,.25);animation:landingBounce .5s ease}.launch-cargo.missed{filter:grayscale(.5)}.launch-console{display:grid;grid-template-columns:1fr 180px;gap:12px;margin-top:13px;padding:16px 20px;border:2px solid #d6e7f1;border-radius:22px;background:#fff;box-shadow:0 12px 25px rgba(25,61,82,.1)}.launch-console label{grid-column:1;font-weight:900;color:#345a73}.launch-console output{color:#ef6d36;font-size:23px}.launch-console input{grid-column:1;accent-color:#ef7137}.launch-console button{grid-column:2;grid-row:1/3;font-size:20px}.launch-finale>article{min-height:680px}.launch-finale>article>div:first-child{left:8%;right:8%;top:5%}.launch-parade{position:absolute;left:6%;right:6%;top:30%;bottom:6%;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.launch-parade>div{padding:6px;border:3px solid #fff;border-radius:18px;background:rgba(255,255,255,.9);text-align:center}.launch-finale-picture{height:90px;display:grid;place-items:center}.launch-finale-picture img{width:100%;height:100%;object-fit:contain}.launch-parade strong{color:#31536a;text-transform:uppercase}@keyframes cargoFlight{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(calc(var(--distance)*7.1px),-270px) rotate(190deg)}100%{transform:translate(calc(var(--distance)*7.1px),0) rotate(360deg)}}@keyframes landingBounce{50%{transform:translate(calc(var(--distance)*7.1px),-18px) scale(1.12)}100%{transform:translate(calc(var(--distance)*7.1px),0)}}@media(max-width:760px){.short-u-launch,.launch-finale{padding:10px}.launch-stage{min-height:620px}.launch-title{left:5%;right:5%}.launch-cargo{width:82px;height:82px}.launch-word-picture{height:54px}.launch-target{width:75px}.launch-console{grid-template-columns:1fr 120px}.launch-parade{left:3%;right:3%;grid-template-columns:repeat(3,1fr)}.launch-finale>article{min-height:720px}}
.word-family-strip{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:14px 0;padding:10px;border:1px solid rgba(35,126,151,.18);border-radius:18px;background:rgba(255,255,255,.78)}

/* Phonics vowel-first learning flow */
.vowel-focus-panel{grid-column:1/-1;display:grid;grid-template-columns:112px 1fr;align-items:center;gap:18px;width:100%;padding:18px 22px;border:3px solid #ffd5d2;border-radius:24px;background:linear-gradient(135deg,#fff 0%,#fff8f6 100%);box-shadow:0 12px 28px rgba(176,55,47,.1)}
.vowel-focus-panel.compact{grid-template-columns:76px 1fr;gap:13px;padding:11px 16px;margin-bottom:12px;border-width:2px;border-radius:19px}
.vowel-letter-badge{width:96px;height:96px;display:grid;place-items:center;align-content:center;border:5px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ff625c,#d92f35);box-shadow:0 0 0 5px #ffd8d4,0 12px 22px rgba(179,47,51,.22)}
.compact .vowel-letter-badge{width:66px;height:66px;border-width:3px;box-shadow:0 0 0 3px #ffd8d4,0 8px 16px rgba(179,47,51,.18)}
.vowel-letter-badge b{font-size:48px;line-height:.82}.vowel-letter-badge span{font-size:17px;font-weight:950}.compact .vowel-letter-badge b{font-size:32px}.compact .vowel-letter-badge span{font-size:12px}
.vowel-focus-panel small{color:#b52d35;font-size:12px;font-weight:950;letter-spacing:.09em}.vowel-focus-panel h2{margin:3px 0 5px;color:#24384b;font-size:clamp(21px,2.8vw,31px)}.vowel-focus-panel h2 strong,.vowel-rule strong{color:#df3038}.vowel-focus-panel p{margin:2px 0;color:#536778;font-weight:800;line-height:1.5}.vowel-focus-panel .vowel-rule{color:#c02d35;font-weight:950}.vowel-focus-panel em{display:inline-block;margin-top:5px;color:#8c4a46;font-size:13px;font-style:normal;font-weight:900}
.vowel-sound-button{display:inline-flex;align-items:center;justify-content:center;margin:7px 0 0 12px;padding:8px 13px;border:0;border-radius:13px;color:#fff;background:linear-gradient(145deg,#ff625c,#d92f35);font-size:12px;font-weight:950;box-shadow:0 7px 14px rgba(179,47,51,.2);cursor:pointer}.vowel-sound-button:hover{transform:translateY(-2px)}
.compact.vowel-focus-panel h2{font-size:20px}.compact.vowel-focus-panel p{font-size:13px;line-height:1.35}.compact.vowel-focus-panel em{display:none}.compact.vowel-focus-panel .vowel-sound-button{margin:5px 0 0;padding:6px 10px;font-size:11px}
.compact.vowel-focus-panel{grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:12px 16px}.compact.vowel-focus-panel .vowel-letter-badge{width:58px;height:58px}.compact.vowel-focus-panel .compact-vowel-copy small{display:block;margin-bottom:2px;color:#688094;font-size:10px;letter-spacing:.08em}.compact.vowel-focus-panel .compact-vowel-copy h2{margin:0;font-size:20px}.compact.vowel-focus-panel .vowel-sound-button{margin:0;padding:8px 12px;white-space:nowrap}
.vowel-word-markup{display:inline-flex;align-items:baseline;letter-spacing:.02em}.vowel-word-markup .target-vowel{color:#e32636!important;font-weight:1000;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.blend-word .vowel-word-markup{font-size:inherit}.vowel-explanation>b{color:#fff!important;background:linear-gradient(145deg,#ff625c,#d92f35)!important}.vowel-explanation .vowel-word-markup{font-size:1.08em}
.sound-block.target-vowel-block{color:#fff!important;background:linear-gradient(145deg,#ff625c,#d92f35)!important;border-color:#fff4ef!important;box-shadow:0 0 0 5px rgba(255,98,92,.2),0 13px 22px rgba(140,34,40,.24)!important}.sound-block.target-vowel-block span{color:#fff!important}
.sound-lab-stage .sound-block.grapheme-multi{width:clamp(104px,11vw,132px)}
.sound-lab-stage .sound-block.grapheme-multi b{font-size:clamp(30px,4vw,45px);letter-spacing:-.04em}
.say-coach-phonemes>span.grapheme-multi{width:104px!important}
.say-coach-phonemes>span.grapheme-multi b{font-size:27px;letter-spacing:-.04em}
.say-coach-phonemes>span.silent-grapheme-card{color:#536874;background:linear-gradient(145deg,#edf2f4,#aab8c1);border-style:dashed}

/* Keep alphabet rows centered and scale every card to the current word length. */
.adaptive-letter-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:var(--adaptive-letter-gap,10px)!important;
  box-sizing:border-box;
  margin-inline:auto;
}
.sound-lab-blocks.adaptive-letter-row,.say-coach-phonemes.adaptive-letter-row{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  max-width:68%!important;
}
.sound-lab-blocks.adaptive-letter-row>.sound-block{
  width:var(--adaptive-card-width)!important;
  height:var(--adaptive-card-height)!important;
  flex:0 0 var(--adaptive-card-width)!important;
}
.sound-lab-blocks.adaptive-letter-row>.sound-block b{
  font-size:var(--adaptive-main-letter-size)!important;
}
.say-coach-phonemes.adaptive-letter-row>span{
  width:var(--adaptive-card-width)!important;
  height:var(--adaptive-card-height)!important;
  flex:0 0 var(--adaptive-card-width)!important;
}
.say-coach-phonemes.adaptive-letter-row>span b{
  font-size:var(--adaptive-main-letter-size)!important;
}
.phonics1-game-screen .adaptive-letter-row:not(.sound-carriages)>span,
.phonics1-game-screen .adaptive-letter-row:not(.sound-carriages)>[data-index]:not(button){
  width:var(--adaptive-slot-size)!important;
  min-width:var(--adaptive-slot-size)!important;
  height:var(--adaptive-slot-size)!important;
  flex:0 0 var(--adaptive-slot-size)!important;
  font-size:var(--adaptive-slot-letter-size)!important;
  display:grid;
  place-items:center;
  box-sizing:border-box;
}
@media(max-width:760px){
  .sound-lab-blocks.adaptive-letter-row,.say-coach-phonemes.adaptive-letter-row{max-width:76%!important}
}
@media(max-width:760px){.sound-lab-stage .sound-block.grapheme-multi{width:78px}.sound-lab-stage .sound-block.grapheme-multi b{font-size:27px}.say-coach-phonemes>span.grapheme-multi{width:78px!important}.say-coach-phonemes>span.grapheme-multi b{font-size:22px}}
.say-coach-title .vowel-word-markup{justify-content:center}.say-coach-phonemes>span.target-vowel-card{color:#fff;background:linear-gradient(145deg,#ff625c,#d92f35)!important;box-shadow:0 0 0 5px rgba(255,98,92,.18),0 12px 20px rgba(130,32,38,.25)!important}
.phonics-check>.vowel-focus-panel{margin-bottom:18px}.phonics-check>p{text-align:center;font-size:18px;font-weight:850}.phonics-check>p .vowel-word-markup{font-size:1.45em}.vowel-check-grid{grid-template-columns:repeat(5,minmax(0,1fr));width:min(760px,100%)}.vowel-check-grid button{display:grid;place-items:center;gap:2px;min-height:82px}.vowel-check-grid button b{font-size:28px}.vowel-check-grid button span{font-size:10px;text-transform:uppercase}.vowel-check-grid .target-vowel-choice{border-color:#ffb1ad;background:#fff5f3}
.phonics-learn-grid>.vowel-focus-panel{margin-bottom:4px}
.phonics-learn-grid{grid-template-columns:minmax(300px,.9fr) 1fr}.phonics-learn-grid>.word-art{min-height:350px}.phonics-learn-grid>.word-art img{width:100%;max-height:325px}
.phonics-learn-grid .learn-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.phonics-learn-grid .learn-actions button{min-width:128px}
@media(max-width:960px){.phonics-learn-grid{grid-template-columns:1fr}.phonics-learn-grid>.word-art{min-height:310px}.phonics-learn-grid>.word-art img{max-height:290px}}
@media(max-width:760px){.vowel-focus-panel{grid-template-columns:78px 1fr;padding:13px;gap:12px}.vowel-letter-badge{width:68px;height:68px;border-width:3px}.vowel-letter-badge b{font-size:34px}.vowel-letter-badge span{font-size:12px}.vowel-focus-panel h2{font-size:19px}.vowel-focus-panel p{font-size:12px}.compact.vowel-focus-panel{grid-template-columns:52px 1fr auto;gap:9px;padding:9px 11px}.compact .vowel-letter-badge{width:48px;height:48px}.compact .vowel-letter-badge b{font-size:27px}.compact.vowel-focus-panel h2{font-size:16px}.compact.vowel-focus-panel p{display:none}.compact.vowel-focus-panel .vowel-sound-button{padding:7px 9px;font-size:10px}}
.word-family-strip>span{display:flex;align-items:center;padding:0 8px;color:#237e97;font-size:11px;font-weight:950;letter-spacing:.12em}
.word-family-chip{display:grid;gap:1px;min-width:92px;padding:7px 10px;border:2px solid transparent;border-radius:13px;background:#eef8fa;color:#315565}
.word-family-chip b{font-size:17px;color:#147d9c}
.word-family-chip small{font-size:10px;font-weight:800}
.word-family-chip.active{border-color:#ffb43b;background:#fff5d8;box-shadow:0 5px 12px rgba(126,79,17,.12)}
.word-family-chip.active b{color:#e16544}
.game-family-review{display:grid;grid-template-columns:minmax(220px,.65fr) 1.35fr;gap:16px;align-items:center;margin:14px 0;padding:16px 18px;border:2px solid #cfe5e8;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(31,76,86,.09)}
.game-family-review>div>span{color:#18849a;font-size:12px;font-weight:950;text-transform:uppercase}.game-family-review h2{margin:3px 0;color:#20384b;font-size:24px}.game-family-review p{margin:0;color:#657783;font-weight:750}.game-family-review .word-family-strip{margin:0}
.sound-drop-pad{padding:0;border:0;background:transparent;cursor:pointer}.sound-drop-pad:hover:not(:disabled){transform:translateY(-8px);filter:drop-shadow(0 0 18px #fff36c)}.sound-drop-pad:disabled{cursor:default}.sound-drop-guide{pointer-events:none}
@media(max-width:760px){.word-family-strip{gap:6px;padding:8px}.word-family-strip>span{width:100%}.word-family-chip{min-width:78px;flex:1}.sound-lab-view>.word-family-strip{max-height:118px;overflow:auto}}
@media(max-width:760px){.game-family-review{grid-template-columns:1fr;padding:12px}.game-family-review h2{font-size:20px}}
.short-e-rescue,.rescue-finale{max-width:1180px;margin:0 auto;padding:20px}.rescue-hud{margin-bottom:12px}.rescue-stage,.rescue-finale>article{position:relative;min-height:670px;overflow:hidden;border-radius:30px;background-image:linear-gradient(rgba(255,255,255,.03),rgba(25,91,105,.08)),var(--rescue-bg);background-size:cover;background-position:center;box-shadow:0 24px 58px rgba(31,86,95,.22)}
.rescue-title{position:absolute;left:3%;top:3%;z-index:8;width:min(520px,58%);padding:14px 20px;border:3px solid #fff;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 10px 25px rgba(38,91,94,.16)}.rescue-title span,.rescue-finale-title span{font-weight:950;color:#168c8c;text-transform:uppercase;letter-spacing:.08em}.rescue-title h1{margin:2px 0;color:#294b5b;font-size:clamp(24px,3vw,38px)}.rescue-title p{margin:0;color:#567482;font-weight:800}.rescue-title b{color:#e45d51;text-transform:uppercase}
.rescue-drone{position:absolute;left:calc(var(--drone-x,12)*1%);top:calc(var(--drone-y,50)*1%);z-index:7;width:clamp(120px,16%,205px);transform:translate(-50%,-50%);filter:drop-shadow(0 15px 14px rgba(27,70,76,.22));transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1),transform .3s}.rescue-puppy{position:absolute;right:3%;bottom:3%;z-index:5;width:clamp(150px,21%,255px);filter:drop-shadow(0 16px 15px rgba(56,73,49,.2));transition:.4s}.rescue-mission-object{position:absolute;left:4%;bottom:3%;z-index:4;width:clamp(105px,14%,180px);max-height:190px;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(41,69,65,.18))}
.rescue-path{position:absolute;inset:0;z-index:6}.rescue-path>i{position:absolute;left:24%;top:61%;width:52%;height:5px;border-radius:99px;background:linear-gradient(90deg,#62d5df,#ffd05c,#62d5df);transform:rotate(-2deg);box-shadow:0 0 14px rgba(85,218,226,.8)}.rescue-node{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:clamp(82px,9vw,112px);height:clamp(82px,9vw,112px);display:grid;place-items:center;align-content:center;transform:translate(-50%,-50%);border:6px solid rgba(255,255,255,.92);border-radius:50%;color:#fff;background:linear-gradient(145deg,#42cfd0,#167b9b);box-shadow:0 10px 0 #176984,0 15px 25px rgba(24,75,89,.25);cursor:pointer;transition:.25s}.rescue-node:nth-of-type(3){background:linear-gradient(145deg,#ffc84d,#ef704e);box-shadow:0 10px 0 #c85b3d,0 15px 25px rgba(93,61,24,.22)}.rescue-node b{font-size:clamp(30px,4vw,48px);line-height:.9}.rescue-node span{font-size:13px;font-weight:950}.rescue-node.next{animation:rescueGlow .75s ease-in-out infinite alternate}.rescue-node.visited{background:#35b884;box-shadow:0 6px 0 #188765;transform:translate(-50%,-50%) scale(.86)}.rescue-node.visited::after{content:'✓';position:absolute;right:-4px;top:-6px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#22a374;font-weight:1000}
.rescue-mission-card{position:absolute;right:3%;top:4%;z-index:7;width:min(270px,30%);padding:11px 15px;border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 10px 25px rgba(45,75,74,.14)}.rescue-mission-card span{color:#e15f4d;font-size:11px;font-weight:950;letter-spacing:.12em}.rescue-mission-card p{margin:2px 0;color:#46636d;font-weight:850}.rescue-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:14px}.rescue-actions p{margin:0;color:#4b6875;font-weight:800}
.short-e-rescue.rescue-miss .rescue-drone{animation:rescueSpin .55s ease}.short-e-rescue.rescue-complete .rescue-drone{transform:translate(-50%,-50%) scale(1.08)}.short-e-rescue.rescue-complete .rescue-puppy{animation:puppyCelebrate .7s ease-in-out 2}.short-e-rescue.rescue-complete .rescue-mission-object{animation:rescuePop .6s ease both}
.rescue-finale>article{min-height:680px}.rescue-finale-title{position:absolute;left:8%;right:8%;top:5%;z-index:5;padding:18px;text-align:center;border-radius:24px;background:rgba(255,255,255,.94)}.rescue-finale-title h1{margin:3px;color:#294b5b;font-size:clamp(28px,4vw,48px)}.rescue-finale-title p{margin:0;color:#567482;font-weight:850}.finale-puppy{position:absolute;right:12%;bottom:14%;width:250px}.finale-drone{position:absolute;left:10%;top:36%;width:240px}.rescue-word-board{position:absolute;left:25%;right:25%;bottom:8%;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px;border-radius:22px;background:rgba(255,255,255,.9)}.rescue-word-board span{padding:7px 12px;border-radius:999px;background:#e8f8f5;color:#167d86;font-weight:950;text-transform:uppercase}
@keyframes rescueGlow{to{filter:brightness(1.18);box-shadow:0 10px 0 #176984,0 0 28px #fff27b;transform:translate(-50%,-50%) scale(1.1)}}@keyframes rescueSpin{50%{transform:translate(-50%,-50%) rotate(18deg) scale(.9)}}@keyframes puppyCelebrate{50%{transform:translateY(-20px) rotate(4deg)}}@keyframes rescuePop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@media(max-width:760px){.short-e-rescue,.rescue-finale{padding:10px}.rescue-stage{min-height:680px}.rescue-title{width:68%;padding:10px 13px}.rescue-title p{font-size:12px}.rescue-mission-card{top:21%;width:43%;font-size:12px}.rescue-drone{width:120px}.rescue-puppy{width:145px}.rescue-mission-object{width:105px}.rescue-node{width:72px;height:72px;border-width:4px}.rescue-node b{font-size:30px}.rescue-path>i{top:60%}.rescue-finale>article{min-height:700px}.finale-puppy{right:5%;width:180px}.finale-drone{left:3%;width:170px}.rescue-word-board{left:8%;right:8%}}
/* Short E Rain Rescue v2: direct drone flight */
.rescue-stage{touch-action:none;user-select:none}
.rescue-drone{z-index:9;transition:left .12s linear,top .12s linear,transform .3s;cursor:grab;touch-action:none}
.rescue-flying .rescue-drone{cursor:grabbing;transform:translate(-50%,-50%) scale(1.06)}
.rescue-node{pointer-events:none}
.puppy-rescue-zone{position:absolute;right:2%;bottom:2%;z-index:4;width:clamp(175px,24%,285px);height:clamp(175px,24vw,285px);display:grid;place-items:center;align-content:end;padding-bottom:8px;border:5px dashed rgba(255,255,255,.86);border-radius:50%;color:#fff;background:rgba(44,190,157,.1);opacity:.35;transform:scale(.9);transition:.35s;pointer-events:none}
.puppy-rescue-zone b{padding:5px 12px;border-radius:999px;background:#168c8c;font-size:13px}
.puppy-rescue-zone span{margin-top:4px;padding:3px 9px;border-radius:999px;background:rgba(35,70,77,.75);font-size:10px;font-weight:850}
.path-complete .puppy-rescue-zone{opacity:1;transform:scale(1);animation:rescueZonePulse .7s ease-in-out infinite alternate}
.rescue-complete .puppy-rescue-zone{border-color:#fff;background:rgba(75,205,150,.35);animation:none}
@keyframes rescueZonePulse{to{filter:drop-shadow(0 0 22px #fff57b);transform:scale(1.05)}}
@media(max-width:760px){.puppy-rescue-zone{right:0;bottom:1%;width:175px;height:175px}}
.short-e-sound-drop,.sound-drop-finale{max-width:1180px;margin:0 auto;padding:20px}.drop-hud{margin-bottom:12px}.sound-drop-stage,.sound-drop-finale>article{position:relative;min-height:670px;overflow:hidden;border-radius:30px;background-image:var(--drop-bg);background-size:cover;background-position:center;box-shadow:0 24px 58px rgba(30,80,100,.22)}
.sound-drop-title{position:absolute;left:3%;top:3%;z-index:8;width:min(500px,55%);padding:14px 20px;border:3px solid #fff;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 10px 25px rgba(38,91,94,.16)}.sound-drop-title span,.sound-drop-finale>article>div:first-child span{font-weight:950;color:#168c8c;text-transform:uppercase;letter-spacing:.08em}.sound-drop-title h1{margin:2px 0;color:#294b5b;font-size:clamp(25px,3vw,39px)}.sound-drop-title p{margin:0;color:#567482;font-weight:850}.sound-drop-title b{color:#e45d51}
.patrol-drone-group{position:absolute;left:4%;top:3%;z-index:6;width:clamp(135px,16%,185px);aspect-ratio:1/1;animation:soundDropPatrol 4.8s ease-in-out infinite alternate;pointer-events:none}.patrol-drone-group.reverse{animation-direction:alternate-reverse}.patrol-drone{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 15px rgba(20,62,80,.25))}.drone-word-display{position:absolute;left:22%;top:19%;z-index:3;width:58%;height:42%;overflow:visible;transform:rotate(6deg);transition:opacity .12s,transform .12s}.drone-word-picture,.drone-word-picture img{width:100%;height:100%;background:transparent}.drone-word-picture img{display:block;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(11,49,95,.3))}.word-dropping .drone-word-display{opacity:0;transform:rotate(6deg) scale(.7)}.drop-capsule{position:absolute;left:50%;top:25%;z-index:7;width:92px;height:92px;opacity:0;transform:translateX(-50%);filter:drop-shadow(0 9px 9px rgba(25,67,74,.28));pointer-events:none}.drop-word-picture,.drop-word-picture img{width:100%;height:100%;background:transparent}.drop-word-picture img{display:block;object-fit:contain}.drop-capsule.falling{opacity:1;animation:capsuleFall .72s cubic-bezier(.35,.05,.72,.92) forwards}.drop-hit-effect,.drop-miss-effect{position:absolute;left:50%;bottom:11%;z-index:9;width:180px;opacity:0;transform:translateX(-50%) scale(.3);pointer-events:none}.drop-hit-effect.show,.drop-miss-effect.show{animation:dropEffect .75s ease both}
.sound-drop-pads{position:absolute;left:5%;right:5%;bottom:7%;height:225px;display:grid;grid-template-columns:repeat(3,1fr);gap:8%;align-items:end}.sound-drop-pad{position:relative;display:grid;place-items:center;height:210px;transition:.25s}.sound-drop-pad img{position:absolute;bottom:0;width:100%;height:125px;object-fit:contain}.sound-drop-pad b{position:relative;z-index:2;margin-top:62px;font-size:52px;color:#247d98;text-shadow:0 3px #fff}.sound-drop-pad span{position:relative;z-index:2;color:#346274;font-weight:950}.sound-drop-pad.current{filter:drop-shadow(0 0 18px #fff36c);animation:targetPulse .7s ease-in-out infinite alternate}.sound-drop-pad.hit{filter:grayscale(.15)}.sound-drop-pad.hit b{color:#24a779}.sound-drop-pad.hit::after{content:'✓';position:absolute;right:12%;bottom:13%;z-index:3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#28b284;font-weight:1000}
.drop-control-panel{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:14px;padding:14px 22px;border:2px solid #d9e8ef;border-radius:24px;background:#fff;box-shadow:0 12px 26px rgba(30,70,88,.1)}.sound-drop-button{position:relative;width:150px;height:104px;padding:0;border:0;background:transparent}.sound-drop-button img{width:100%;height:100%;object-fit:contain}.sound-drop-button b{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%);color:#fff;font-size:19px;text-shadow:0 2px rgba(120,42,32,.35)}.sound-drop-button:active{transform:translateY(5px)}.sound-drop-button:disabled{filter:grayscale(.7);cursor:wait}.drop-control-panel>div{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.drop-control-panel p{margin:0;color:#4d6976;font-weight:850}
.sound-drop-finale>article{min-height:680px}.sound-drop-finale>article>div:first-child{position:absolute;left:8%;right:8%;top:5%;padding:18px;text-align:center;border-radius:24px;background:rgba(255,255,255,.94)}.sound-drop-finale h1{margin:3px;color:#294b5b;font-size:clamp(28px,4vw,48px)}.sound-drop-finale p{margin:0;font-weight:850}.finale-drop-drone{position:absolute;left:50%;top:31%;width:300px;transform:translateX(-50%);animation:labRobotFloat 2.2s ease-in-out infinite}.drop-word-board{position:absolute;left:12%;right:12%;bottom:9%;display:flex;justify-content:center;gap:9px;flex-wrap:wrap;padding:16px;border-radius:22px;background:rgba(255,255,255,.9)}.drop-word-board b{padding:8px 14px;border-radius:999px;color:#187d91;background:#e4f8f7;text-transform:uppercase}
@keyframes soundDropPatrol{0%{left:3%;top:-6%}100%{left:72%;top:4%}}@keyframes capsuleFall{0%{top:24%;transform:translateX(-50%) scale(.8)}100%{top:67.5%;transform:translateX(-50%) scale(1)}}@keyframes dropEffect{0%{opacity:0;transform:translateX(-50%) scale(.3)}45%{opacity:1;transform:translateX(-50%) scale(1.15)}100%{opacity:0;transform:translateX(-50%) scale(1)}}@keyframes targetPulse{to{transform:translateY(-7px);filter:drop-shadow(0 0 28px #fff36c)}}
@media(max-width:760px){.short-e-sound-drop,.sound-drop-finale{padding:10px}.sound-drop-stage{min-height:620px}.sound-drop-title{width:68%;padding:10px 13px}.patrol-drone-group{width:108px}.sound-drop-pads{left:1%;right:1%;gap:1%;height:190px}.sound-drop-pad{height:180px}.sound-drop-pad img{height:95px}.sound-drop-pad b{font-size:39px}.drop-control-panel{gap:10px;padding:10px}.sound-drop-button{width:120px}.drop-control-panel>div{display:grid;gap:7px}.drop-control-panel p{font-size:12px}.finale-drop-drone{width:220px}.drop-word-board{left:5%;right:5%}}
.sound-drop-hand-button{position:absolute;left:50%;bottom:-7%;z-index:30;width:clamp(190px,23%,285px);padding:0;border:0;background:transparent;transform:translateX(-50%);filter:drop-shadow(0 18px 18px rgba(19,48,64,.3));cursor:pointer;transition:transform .16s,filter .16s}
.sound-drop-hand-button img{width:100%;height:auto;pointer-events:none}
.sound-drop-hand-button b{position:absolute;left:48%;top:42%;transform:translate(-50%,-50%);padding:5px 11px;border-radius:999px;color:#fff;background:rgba(174,55,49,.75);font-size:16px;text-shadow:0 2px rgba(80,25,20,.35);pointer-events:none}
.sound-drop-hand-button:hover{transform:translateX(-50%) translateY(-7px) scale(1.04)}
.sound-drop-hand-button:active{transform:translateX(-50%) translateY(5px) scale(.97)}
.sound-drop-hand-button:disabled{filter:grayscale(.65) drop-shadow(0 12px 12px rgba(19,48,64,.2));cursor:wait}
.short-e-sound-drop .drop-control-panel{min-height:76px}.short-e-sound-drop .drop-control-panel>div{justify-content:center;width:100%}
@media(max-width:760px){.sound-drop-hand-button{bottom:-3%;width:185px}.sound-drop-hand-button b{font-size:13px}.short-e-sound-drop .drop-control-panel{min-height:64px}}

/* Unit 2 compact targets and scene-first layout. */
.short-e-sound-drop .sound-drop-stage{min-height:650px}
.short-e-sound-drop .sound-drop-pads{left:7%;right:7%;bottom:18%;height:150px;gap:11%}
.short-e-sound-drop .sound-drop-pad{height:145px}
.short-e-sound-drop .sound-drop-pad img{bottom:0;width:64%;height:84px}
.short-e-sound-drop .sound-drop-pad b{margin-top:42px;font-size:40px}
.short-e-sound-drop .sound-drop-pad span{font-size:12px}
.short-e-sound-drop .sound-drop-hand-button{position:absolute;left:50%;bottom:-8px;z-index:30;width:104px;height:104px;padding:0;border:0;background:transparent;transform:translateX(-50%);overflow:visible}
.short-e-sound-drop .sound-drop-hand-button img{display:block;width:104px;height:101px;max-width:104px;object-fit:contain}
.short-e-sound-drop .sound-drop-hand-button b{font-size:11px;padding:3px 7px}
.short-e-sound-drop .sound-drop-pager{margin-top:14px;border-top:1px solid #dce6ee}
.short-e-sound-drop .sound-drop-copy{padding:8px 0 2px}
.short-e-sound-drop .sound-drop-copy h1{margin:14px 0 8px;font-size:clamp(34px,4vw,48px)}
.short-e-sound-drop .sound-drop-feedback{margin-top:16px;padding:9px 12px;border:1px solid #f4d66c;border-radius:10px;background:#fff8dc}
@media(max-width:760px){.short-e-sound-drop .sound-drop-stage{min-height:560px}.short-e-sound-drop .sound-drop-pads{left:2%;right:2%;bottom:19%;height:125px;gap:2%}.short-e-sound-drop .sound-drop-pad{height:118px}.short-e-sound-drop .sound-drop-pad img{width:70%;height:68px}.short-e-sound-drop .sound-drop-pad b{margin-top:34px;font-size:31px}.short-e-sound-drop .sound-drop-hand-button{bottom:-7px;width:84px;height:84px}.short-e-sound-drop .sound-drop-hand-button img{width:84px;height:82px;max-width:84px}}

/* Shared Alphabet-style chrome for every Phonics 1 game. */
.phonics-standard-game{max-width:1180px;margin:0 auto;padding:20px}
.phonics-standard-game .phonics-standard-hud{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}
.phonics-standard-game .phonics-standard-hud>div{min-height:76px}
.phonics-standard-game .phonics-standard-hud>div:last-child strong{font-size:13px}
.phonics-standard-game .phonics-game-progress{height:10px;margin:-2px 0 7px}
.phonics-standard-game .phonics-word-timer{height:7px;margin:0 0 12px}
.phonics-standard-game .phonics-standard-stage{box-sizing:border-box;width:100%;height:568px;min-height:568px!important;max-height:568px;overflow:hidden;border-radius:20px;background-size:cover;background-position:center}
.phonics-standard-game .phonics-standard-pager{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px}
.phonics-standard-game .phonics-standard-pager .pager-nav,.phonics-standard-game .phonics-standard-pager .pager-actions{display:flex;gap:10px}
.phonics-standard-game .phonics-standard-copy{padding:8px 0 2px}
.phonics-standard-game .phonics-standard-copy .eyebrow{margin:0;color:#667285;font-size:14px;font-weight:950;text-transform:uppercase}
.phonics-standard-game .phonics-standard-copy h1{margin:16px 0 10px;color:#172033;font-size:clamp(36px,4.2vw,52px)}
.phonics-standard-game .phonics-standard-copy p:last-child{color:#657189;font-weight:800}

/* Keep each game's live prompt in the DOM for gameplay, but remove the
   decorative title/instruction card from every Phonics 1 game stage. */
.phonics1-game-screen .fire-window-title,
.phonics1-game-screen .mixer-title,
.phonics1-game-screen .bee-game-title,
.phonics1-game-screen .kite-game-title,
.phonics1-game-screen .letter-boat-title,
.phonics1-game-screen .record-game-title,
.phonics1-game-screen .cloud-wheel-title {
  display: none !important;
}

@media(max-width:760px){.phonics-standard-game{padding:10px}.phonics-standard-game .phonics-standard-hud{grid-template-columns:repeat(2,minmax(0,1fr))}.phonics-standard-game .phonics-standard-hud>div{min-height:64px}.phonics-standard-game .phonics-standard-stage{height:460px;min-height:460px!important;max-height:460px}.phonics-standard-game .phonics-standard-pager{align-items:stretch;gap:8px}.phonics-standard-game .phonics-standard-pager button{padding:9px 10px}}

/* Unit 3: Short I Word Factory */
.short-i-orchestra .orchestra-stage,.orchestra-finale>article{background-image:var(--orchestra-bg);background-position:center;background-size:cover}
.short-i-orchestra .conduct-path{left:6%;right:22%;top:25%;height:43%}
.factory-guide-robot{position:absolute;right:1.5%;top:23%;z-index:3;width:19%;max-height:45%;object-fit:contain;filter:drop-shadow(0 16px 12px rgba(25,73,78,.24));animation:factoryRobotFloat 2.4s ease-in-out infinite alternate;pointer-events:none}
@keyframes factoryRobotFloat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-12px) rotate(1deg)}}
@media(max-width:760px){.short-i-orchestra .conduct-path{left:2%;right:25%;top:27%}.factory-guide-robot{right:0;top:25%;width:24%;max-height:38%}}

.short-i-factory{max-width:1180px;margin:0 auto;padding:20px}.factory-hud{margin-bottom:12px}.factory-stage{position:relative;height:620px;overflow:hidden;border-radius:24px;background-image:var(--factory-bg);background-position:center;background-size:cover;box-shadow:0 24px 55px rgba(31,73,75,.22)}
.short-i-factory .factory-guide-robot{right:3%;top:8%;width:19%;max-height:36%}.factory-target-picture{position:absolute;left:5%;top:8%;width:190px;height:175px;display:grid;place-items:center;padding:10px;border:3px solid rgba(255,255,255,.9);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 10px 24px rgba(29,72,72,.18)}.factory-word-picture,.factory-word-picture img{width:100%;height:100%}.factory-word-picture img{object-fit:contain}
.factory-letter-slots{position:absolute;left:25%;right:25%;bottom:14%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.factory-letter-slot{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-height:145px;border:5px solid #fff;border-radius:18px;background:linear-gradient(145deg,#eafcff,#b8e9e4);box-shadow:0 9px 0 #58a9a7,0 15px 24px rgba(32,79,78,.2);transition:.25s}.factory-letter-slot span{font-size:clamp(45px,6vw,72px);font-weight:950;color:#294d5d}.factory-letter-slot small{position:absolute;right:8px;top:6px;color:#4e7e87;font-weight:950}.factory-letter-slot.filled{background:linear-gradient(145deg,#fff4a8,#ffc957);transform:translateY(-7px);box-shadow:0 7px 0 #d69b2a,0 0 28px rgba(255,225,91,.9)}
.factory-description{padding:14px 2px 8px}.factory-description h1{margin:0 0 4px;color:#17233d;font-size:clamp(30px,3.5vw,44px)}.factory-description p{margin:0;color:#5b6980;font-weight:800}.factory-controls{display:grid;grid-template-columns:145px 1fr;gap:14px;padding:14px;border:2px solid #d9e9e7;border-radius:18px;background:#fff}.factory-listen{border:0;border-radius:14px;color:#fff;background:#ef765b;font-size:18px;font-weight:950;box-shadow:0 6px 0 #bf4f3c}.factory-letter-choices{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.factory-letter-choices button{min-width:74px;padding:8px 13px;border:3px solid #9fd4d1;border-radius:14px;color:#173b4a;background:#effdfc;box-shadow:0 5px 0 #75b5b2}.factory-letter-choices b{display:block;font-size:26px}.factory-letter-choices span{color:#197c8b;font-weight:900}.factory-letter-choices button.used{border-color:#54bd83;background:#dcf8e5;box-shadow:none;transform:translateY(5px)}.factory-letter-choices button.wrong{animation:trainShake .34s}.short-i-factory .pager{margin-top:12px}
@media(max-width:760px){.short-i-factory{padding:10px}.factory-stage{height:500px}.short-i-factory .factory-guide-robot{right:1%;top:10%;width:25%}.factory-target-picture{left:3%;top:7%;width:120px;height:115px}.factory-letter-slots{left:8%;right:8%;bottom:16%;gap:9px}.factory-letter-slot{border-width:3px}.factory-letter-slot span{font-size:38px}.factory-controls{grid-template-columns:1fr}.factory-listen{padding:12px}.factory-letter-choices button{min-width:60px;padding:7px 9px}}

/* Unit 4: Tom's Short O Repair Shop */
.short-o-repair,.repair-finale{max-width:1180px;margin:0 auto;padding:20px}.repair-hud{margin-bottom:12px}.repair-stage,.repair-finale>article{position:relative;height:620px;overflow:hidden;border-radius:24px;background-image:var(--repair-bg);background-position:center;background-size:cover;box-shadow:0 24px 55px rgba(58,78,57,.22)}.repair-story-object{position:absolute;left:50%;top:5%;width:44%;height:55%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 16px 14px rgba(50,74,59,.25));animation:repairObjectFloat 2.4s ease-in-out infinite alternate}.repair-letter-slots{position:absolute;left:27%;right:27%;bottom:9%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.repair-letter-slot{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-height:138px;border:5px solid #fff;border-radius:18px;background:linear-gradient(145deg,#fff8d7,#f6cf6d);box-shadow:0 9px 0 #c58b32,0 15px 24px rgba(71,61,35,.2);transition:.25s}.repair-letter-slot span{font-size:clamp(44px,6vw,68px);font-weight:950;color:#3d5961}.repair-letter-slot small{position:absolute;right:8px;top:6px;color:#7b6b42;font-weight:950}.repair-letter-slot.filled{background:linear-gradient(145deg,#dff9ec,#74d3a0);transform:translateY(-7px);box-shadow:0 7px 0 #3b9d69,0 0 28px rgba(104,226,158,.8)}@keyframes repairObjectFloat{to{transform:translateX(-50%) translateY(-7px)}}
.repair-description{padding:14px 2px 8px}.repair-description h1{margin:0 0 4px;color:#17233d;font-size:clamp(30px,3.5vw,44px)}.repair-description p{margin:0;color:#5b6980;font-weight:800}.repair-controls{display:grid;grid-template-columns:145px 1fr;gap:14px;padding:14px;border:2px solid #dce7dc;border-radius:18px;background:#fff}.repair-listen{border:0;border-radius:14px;color:#fff;background:#e87358;font-size:18px;font-weight:950;box-shadow:0 6px 0 #b64d3b}.repair-letter-choices{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.repair-letter-choices button{min-width:74px;padding:8px 13px;border:3px solid #9bcfc0;border-radius:14px;color:#173b4a;background:#f1fcf7;box-shadow:0 5px 0 #70ac9b}.repair-letter-choices b{display:block;font-size:26px}.repair-letter-choices span{color:#277b72;font-weight:900}.repair-letter-choices button.used{border-color:#58bd7d;background:#dcf8e5;box-shadow:none;transform:translateY(5px)}.repair-letter-choices button.wrong{animation:trainShake .34s}.short-o-repair .pager{margin-top:12px}
.repair-finale>article{height:680px}.repair-finale-title{position:absolute;left:7%;right:7%;top:5%;z-index:3;padding:18px;text-align:center;border-radius:20px;background:rgba(255,255,255,.9)}.repair-finale-title span{color:#268678;font-weight:950;text-transform:uppercase}.repair-finale-title h1{margin:4px;color:#243b46;font-size:clamp(28px,4vw,46px)}.repair-finale-title p{margin:0;font-weight:800}.repair-finale-objects{position:absolute;left:4%;right:4%;top:27%;bottom:4%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.repair-finale-objects img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(50,72,54,.22))}
@media(max-width:760px){.short-o-repair,.repair-finale{padding:10px}.repair-stage{height:500px}.repair-story-object{top:6%;width:66%;height:48%}.repair-letter-slots{left:8%;right:8%;bottom:11%;gap:9px}.repair-letter-slot{border-width:3px}.repair-letter-slot span{font-size:38px}.repair-controls{grid-template-columns:1fr}.repair-listen{padding:12px}.repair-letter-choices button{min-width:60px;padding:7px 9px}.repair-finale>article{height:720px}.repair-finale-objects{grid-template-columns:1fr;top:24%}}

/* Unit 5: Sunny Day Camping Adventure */
.short-u-camp{max-width:1180px;margin:0 auto;padding:20px}.short-u-camp .pager{margin-top:12px}.camp-stage .camp-story-object{top:4%;width:42%;height:54%;animation:campObjectFloat 2.7s ease-in-out infinite alternate}.camp-finale-objects{grid-template-columns:repeat(3,1fr)}@keyframes campObjectFloat{to{transform:translateX(-50%) translateY(-9px) rotate(1deg)}}
@media(max-width:760px){.short-u-camp{padding:10px}.camp-stage .camp-story-object{top:5%;width:68%;height:48%}.camp-finale-objects{grid-template-columns:1fr}}

/* Delivery game scale and reliable departure. */
.word-delivery-stage .delivery-word-picture{left:40%;top:24%;width:21%;height:23%}
.word-delivery-stage .delivery-slots{left:39%;top:55%;width:23%;height:12%;gap:11px}
.word-delivery-stage .delivery-slots span{width:58px;height:58px;border-radius:13px;font-size:28px}
.word-delivery-stage .delivery-success{padding:10px 22px;border-radius:16px;font-size:30px}
.word-delivery-game.delivery-departing .delivery-train{pointer-events:none;animation:deliveryTrainExit 2.4s cubic-bezier(.48,.02,.72,.42) forwards}
@keyframes deliveryTrainExit{0%{left:-7%}100%{left:112%}}
@media(max-width:760px){.word-delivery-stage .delivery-word-picture{left:39%;top:23%;width:23%;height:22%}.word-delivery-stage .delivery-slots{left:38%;width:25%;gap:6px}.word-delivery-stage .delivery-slots span{width:45px;height:50px;font-size:24px}}

.word-delivery-stage .delivery-word-picture{left:45%;top:31%;width:11%;height:13%}
.word-delivery-stage .delivery-slots{left:42%;top:56%;width:17%;height:10%;gap:7px}
.word-delivery-stage .delivery-slots span{width:43px;height:43px;border-width:2px;border-radius:10px;font-size:21px}
.word-delivery-stage .delivery-success{padding:7px 15px;border-width:3px;border-radius:12px;font-size:22px}
.word-delivery-stage .delivery-train{transition:left 2.1s cubic-bezier(.36,.04,.2,1),transform 2.4s cubic-bezier(.48,.02,.72,.42)}
.delivery-stage-next{position:absolute;right:3%;top:4%;z-index:10;min-width:145px;padding:12px 20px;border:3px solid #fff;border-radius:16px;background:#347ff0;color:#fff;font-size:17px;font-weight:950;box-shadow:0 9px 20px rgba(22,65,126,.28);opacity:0;transform:translateY(-18px);pointer-events:none;transition:.28s}
.delivery-stage-next.show{opacity:1;transform:none;pointer-events:auto;animation:deliveryNextPulse .9s ease-in-out infinite alternate}
@keyframes deliveryNextPulse{to{filter:brightness(1.13);box-shadow:0 0 0 7px rgba(91,165,255,.22),0 12px 24px rgba(22,65,126,.3)}}
@media(max-width:760px){.word-delivery-stage .delivery-word-picture{left:44%;top:31%;width:13%;height:13%}.word-delivery-stage .delivery-slots{left:40%;width:21%}.word-delivery-stage .delivery-slots span{width:38px;height:40px;font-size:19px}.delivery-stage-next{right:2%;top:2%;min-width:120px;padding:9px 13px;font-size:14px}}

/* Completion fallback: CSS alone reveals Next Word and sends the train away. */
.word-delivery-game.delivery-complete .delivery-stage-next{opacity:1!important;transform:none!important;pointer-events:auto!important;display:block!important;animation:deliveryNextPulse .9s ease-in-out infinite alternate}
.word-delivery-game.delivery-complete .delivery-train{animation:deliveryTrainTransformExit 2.4s .55s cubic-bezier(.48,.02,.72,.42) forwards!important}
@keyframes deliveryTrainTransformExit{0%{transform:translateX(0)}100%{transform:translateX(130vw)}}

/* Unit 3 - Short I Conveyor Word Builder */
.short-i-conveyor{max-width:1180px;margin:0 auto;padding:20px}.conveyor-stage{position:relative;min-height:610px;overflow:hidden;border-radius:28px;box-shadow:0 24px 55px rgba(58,37,18,.22);isolation:isolate}.conveyor-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.conveyor-screen-picture{position:absolute;left:3.2%;top:62%;width:18%;height:23%;z-index:3;display:grid;place-items:center}.conveyor-screen-picture .word-art{width:100%;height:100%;min-height:0;background:transparent;box-shadow:none}.conveyor-screen-picture img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(45,40,28,.18))}.moving-letter-cargo{position:absolute;left:43%;top:49%;z-index:5;width:145px;height:112px;display:grid;place-items:center;transition:transform .36s,opacity .36s}.moving-letter-cargo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 11px 9px rgba(60,38,15,.25))}.moving-letter-cargo b,.moving-letter-cargo small{position:relative;z-index:2;color:#17475a;font-weight:950}.moving-letter-cargo b{font-size:42px;line-height:.8}.moving-letter-cargo small{align-self:end;margin-bottom:22px;font-size:12px}.moving-letter-cargo.changing{animation:cargoPassCenter .72s ease-in-out}.moving-letter-cargo.dropping{animation:cargoDropToBuild .52s ease-in forwards}.moving-letter-cargo.wrong-drop{animation:trainShake .42s}.conveyor-build-slots{position:absolute;left:40%;top:76%;z-index:6;width:23%;display:flex;justify-content:center;gap:9px}.conveyor-build-slots span{width:60px;height:60px;display:grid;place-items:center;border:3px dashed #f1b841;border-radius:13px;background:rgba(255,255,255,.88);color:#9b7c43;font-size:29px;font-weight:950;box-shadow:0 8px 14px rgba(61,42,18,.14)}.conveyor-build-slots span.filled{border-style:solid;border-color:#26aa93;background:#ddfff3;color:#17697a;animation:deliverySlotPop .38s}.conveyor-drop-button{position:absolute;right:2%;bottom:8%;z-index:8;width:150px;height:125px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 9px 9px rgba(35,39,29,.28));transition:transform .15s}.conveyor-drop-button img{width:100%;height:100%;object-fit:contain}.conveyor-drop-button:hover{transform:translateY(-5px) scale(1.04)}.conveyor-drop-button:active{transform:translateY(8px) scale(.94)}.conveyor-drop-copy{position:absolute;left:28%;right:25%;top:4%;z-index:5;padding:10px 18px;border:3px solid rgba(255,255,255,.9);border-radius:17px;background:rgba(255,255,255,.9);color:#31566a;text-align:center;font-weight:900;box-shadow:0 9px 20px rgba(53,42,24,.13)}.short-i-conveyor .pager{margin-top:12px}.short-i-conveyor .pager button:disabled{opacity:.45}.conveyor-complete .conveyor-build-slots{animation:deliveryNextPulse .9s ease-in-out infinite alternate}@keyframes cargoPassCenter{0%{transform:translateX(-340px);opacity:0}48%{opacity:1}70%{transform:translateX(0)}100%{transform:translateX(0)}}@keyframes cargoDropToBuild{0%{transform:translateY(0) scale(1)}65%{transform:translateY(145px) scale(.65);opacity:1}100%{transform:translateY(165px) scale(.2);opacity:0}}@media(max-width:760px){.short-i-conveyor{padding:10px}.conveyor-stage{min-height:540px}.conveyor-screen-picture{left:2%;top:62%;width:21%}.moving-letter-cargo{left:40%;top:50%;width:120px;height:96px}.conveyor-build-slots{left:34%;width:34%}.conveyor-build-slots span{width:48px;height:52px;font-size:25px}.conveyor-drop-button{right:0;bottom:7%;width:105px;height:90px}.conveyor-drop-copy{left:5%;right:5%;font-size:13px}}
.short-i-conveyor .conveyor-screen-picture{left:4.5%;top:64%;width:15%;height:20%}
.short-i-conveyor .moving-letter-cargo{width:124px;height:96px}
.short-i-conveyor .moving-letter-cargo b{font-size:36px}
.short-i-conveyor .moving-letter-cargo small{margin-bottom:18px;font-size:10px}
@media(max-width:760px){.short-i-conveyor .conveyor-screen-picture{left:3.5%;top:65%;width:17%;height:18%}.short-i-conveyor .moving-letter-cargo{width:102px;height:82px}.short-i-conveyor .moving-letter-cargo b{font-size:31px}.short-i-conveyor .moving-letter-cargo small{margin-bottom:15px;font-size:9px}}

/* 2026-07-14 full QA: compact mobile navigation and honest game progress. */
.phonics-standard-game .phonics-standard-hud{grid-template-columns:110px 110px minmax(0,1fr)}
.phonics-standard-game .phonics-standard-hud>div{min-height:68px}
.phonics-standard-game .phonics-standard-hud>div:last-child strong{font-size:13px}
@media(max-width:640px){
  .topbar{height:auto;min-height:0;display:flex;flex-flow:row wrap;align-items:center;gap:6px;padding:6px 10px}
  .brand-row{width:auto;flex:1 1 auto;gap:5px}
  .back-chip{display:none}
  .brand{gap:7px;padding:0}
  .brand b{width:36px;height:36px;border-radius:11px;font-size:12px}
  .brand strong{font-size:13px}
  .brand small{font-size:9px}
  .music-toggle{width:auto;min-width:72px;min-height:36px;padding:0 9px;font-size:10px}
  .topbar nav{order:3;width:100%;display:flex;flex-wrap:nowrap;gap:4px;padding:3px;overflow-x:auto;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav button{flex:0 0 auto;min-width:58px;min-height:32px;padding:0 9px;font-size:10px}
  main{margin-top:10px}
}
@media(max-width:760px){
  .phonics-standard-game .phonics-standard-hud{grid-template-columns:70px 70px minmax(0,1fr);gap:6px;margin-bottom:7px}
  .phonics-standard-game .phonics-standard-hud>div{min-height:50px;padding:6px}
  .phonics-standard-game .phonics-standard-hud>div span{font-size:9px}
  .phonics-standard-game .phonics-standard-hud>div strong{font-size:18px}
  .phonics-standard-game .phonics-standard-hud>div:last-child strong{font-size:10px;line-height:1.15}
  .phonics-standard-game .phonics-standard-pager{margin-top:7px}
  .phonics-standard-game .phonics-standard-pager .pager-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
  .word-delivery-game .delivery-train{width:110%;bottom:1%}
  .word-delivery-game.train-arrived .delivery-train{left:-5%}
}
/* The former global finger image cursor was removed. Games keep their
   original cursor behavior and existing game-specific cursor artwork. */
html,body{cursor:auto}

/* Unit 1 delivery train: smaller, lower, and centered on the track. */
.word-delivery-game .delivery-train{width:96%;bottom:6%;}
.word-delivery-game.train-arrived .delivery-train{left:2%}
.word-delivery-game .delivery-carriage-letters button{left:calc(4.75% + var(--car)*18.15%);width:12.9%;}
.word-delivery-game .delivery-slots{top:59%}
.word-delivery-game .delivery-slots span{width:49px;height:49px;font-size:24px}
.word-delivery-game .delivery-carriage-letters button{top:43%}
.word-delivery-game .delivery-carriage-letters b{transform:translateY(1px)}
.word-delivery-game.delivery-step-changing .delivery-train{pointer-events:none;animation:deliveryNextTrain 1.5s cubic-bezier(.48,.02,.28,1) both!important}
@keyframes deliveryNextTrain{0%{transform:translateX(0)}42%{transform:translateX(118vw)}43%{transform:translateX(-118vw)}100%{transform:translateX(0)}}
@media(max-width:760px){.word-delivery-game .delivery-train{width:104%;bottom:6%}.word-delivery-game.train-arrived .delivery-train{left:-2%}.word-delivery-game .delivery-slots{top:59%}.word-delivery-game .delivery-slots span{width:43px;height:45px;font-size:22px}.word-delivery-game .delivery-carriage-letters button{top:44%}.word-delivery-game .delivery-carriage-letters b{transform:translateY(1px)}}
/* Unified Phonics 1 spelling colors: learning focus red, silent letters gray, all other sounds teal. */
.sound-block.vowel:not(.target-vowel-block):not(.silent-letter-block) {
  background: linear-gradient(145deg,#39c3bd,#147d9c) !important;
  box-shadow: inset 0 4px 8px rgba(255,255,255,.42), inset 0 -8px 12px rgba(11,71,90,.2), 0 12px 18px rgba(14,60,71,.25) !important;
}
.sound-type-label {
  display:block;
  max-width:100%;
  font-size:9px !important;
  line-height:1.05;
  letter-spacing:.02em;
  color:rgba(255,255,255,.92);
  white-space:normal;
}
.sound-block.silent-letter-block .sound-type-label { color:#526573; }
.say-coach-phonemes > span > small {
  display:block;
  margin-top:2px;
  font-size:9px;
  line-height:1.05;
  color:inherit;
  opacity:.82;
}
.phonics1-game-screen .fixed-silent-letter {
  color:#536876 !important;
  background:#dce5ea !important;
  border-color:#fff !important;
  box-shadow:0 7px 14px rgba(49,68,80,.16) !important;
}
.phonics1-game-screen .fixed-sound-letter[data-length="2"],
.phonics1-game-screen .fixed-sound-letter[data-length="3"] {
  min-width:1.55em;
  letter-spacing:.02em;
}

/* Curriculum board copy on the home cards and the top-menu table. */
.course-map .curriculum-card {
  align-content: start;
  box-sizing: border-box;
  height: 236px;
  min-height: 236px;
  overflow: hidden;
}
.course-map .curriculum-card:not(.review-unit) { background: #fff; }
.course-map .curriculum-card:not(.review-unit):hover,
.course-map .curriculum-card.active:not(.review-unit) {
  border-color: rgba(220,229,239,.94);
  box-shadow: 0 14px 28px rgba(20,34,58,.09);
}
.course-map .curriculum-card.review-unit { background: linear-gradient(145deg, #fffaf0 0%, #fff1d6 100%); border-color: #f2c56d; }
.course-map .curriculum-card.active.review-unit { border-color: #e7a832; box-shadow: 0 0 0 3px rgba(231,168,50,.18), 0 18px 36px rgba(20,34,58,.11); }
.course-map .curriculum-card-kicker { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; color:var(--blue); }
.course-map .curriculum-card-kicker b { font-size:14px; font-weight:1000; white-space:nowrap; }
.course-map .curriculum-card-kicker span { color:var(--muted); font-size:10px; letter-spacing:.04em; text-align:right; white-space:nowrap; }
.course-map .curriculum-card.review-unit .curriculum-card-kicker b,
.course-map .curriculum-card.review-unit .curriculum-card-kicker span { color:#ad6b00; }
.course-map .curriculum-card > strong { min-height:2.5em; font-size:clamp(19px,1.55vw,25px); line-height:1.18; }
.course-map .curriculum-card > small { display:block; color:var(--muted); font-size:13px; line-height:1.35; font-weight:850; }

.curriculum-panel { padding:clamp(20px,3vw,36px); border:1px solid rgba(220,229,239,.94); border-radius:24px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); }
.curriculum-path-picker { display:grid; gap:16px; margin-bottom:18px; padding:clamp(18px,2.5vw,28px); border:1px solid #d7e5f2; border-radius:20px; background:linear-gradient(135deg,#f7fbff 0%,#fff 100%); box-shadow:0 12px 28px rgba(20,54,94,.07); }
.curriculum-path-picker__heading h2 { margin:2px 0 7px; color:var(--ink); font-size:clamp(24px,2.4vw,34px); line-height:1.14; }
.curriculum-path-picker__heading p:not(.eyebrow) { margin:0; color:var(--muted); font-weight:800; }
.curriculum-path-picker__choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.curriculum-path-choice { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; min-width:0; padding:18px; border:1px solid #d9e5f2; border-radius:16px; color:var(--ink); background:#fff; box-shadow:0 8px 20px rgba(20,54,94,.06); text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.curriculum-path-choice:hover { border-color:#8fb6ef; transform:translateY(-2px); box-shadow:0 14px 24px rgba(35,103,187,.14); }
.curriculum-path-choice:focus-visible { outline:3px solid rgba(39,111,230,.28); outline-offset:3px; }
.curriculum-path-choice.is-active { border-color:#377fe1; background:linear-gradient(135deg,#f1f7ff 0%,#fff 78%); box-shadow:0 12px 24px rgba(39,111,230,.15); }
.curriculum-path-choice--practice.is-active { border-color:#8c62ce; background:linear-gradient(135deg,#f8f2ff 0%,#fff 78%); box-shadow:0 12px 24px rgba(119,78,183,.15); }
.curriculum-path-choice__badge { grid-row:span 3; display:grid; place-items:center; align-self:start; min-width:70px; min-height:34px; padding:4px 9px; border-radius:10px; color:#276fe6; background:#eef5ff; font-size:11px; font-weight:1000; letter-spacing:.03em; text-align:center; }
.curriculum-path-choice--practice .curriculum-path-choice__badge { color:#7447ba; background:#f0e7ff; }
.curriculum-path-choice strong { align-self:end; font-size:clamp(17px,1.45vw,21px); line-height:1.2; }
.curriculum-path-choice small { color:var(--muted); font-size:13px; font-weight:750; line-height:1.42; }
.curriculum-path-choice em { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#276fe6; font-size:12px; font-style:normal; font-weight:950; }
.curriculum-path-choice--practice em { color:#7447ba; }
.curriculum-path-choice em i { font-size:20px; font-style:normal; line-height:1; }
.curriculum-finder { display:grid; grid-template-columns:minmax(220px,1.1fr) minmax(260px,1.35fr) minmax(260px,1.45fr) auto; gap:12px; align-items:end; margin-bottom:22px; padding:18px; border:1px solid #d7e5f2; border-radius:18px; background:linear-gradient(135deg,#f7fbff 0%,#fff 100%); box-shadow:0 12px 28px rgba(20,54,94,.07); }
.curriculum-finder label { display:grid; gap:7px; min-width:0; }
.curriculum-finder label span { color:var(--muted); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.curriculum-finder select,
.curriculum-finder input { width:100%; min-height:48px; padding:0 14px; border:1px solid rgba(201,214,229,.95); border-radius:14px; color:#172033; background:linear-gradient(180deg,#fff,#f8fbff); font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(20,34,58,.06); }
.curriculum-finder select:focus,
.curriculum-finder input:focus { outline:3px solid rgba(39,111,230,.24); border-color:rgba(39,111,230,.5); }
.curriculum-finder .secondary { min-height:48px; white-space:nowrap; }
.curriculum-legend { display:flex; flex:0 0 auto; gap:8px; align-items:center; font-size:11px; font-weight:1000; letter-spacing:.08em; }
.curriculum-legend span { padding:8px 10px; border-radius:999px; color:#276fe6; background:#eef5ff; }
.curriculum-legend .review-key { color:#ad6b00; background:#fff1d6; }
.curriculum-course-board { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; }
.curriculum-course-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--line); background:linear-gradient(135deg,#fbfdff 0%,#f2f7ff 100%); }
.curriculum-course-heading h2 { margin:0 0 8px; color:var(--ink); font-size:clamp(26px,3vw,40px); line-height:1.08; }
.curriculum-course-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-weight:800; }
.curriculum-unit-list { display:grid; gap:10px; padding:14px; }
.curriculum-unit-card { display:grid; grid-template-columns:74px 132px minmax(180px,1fr) minmax(260px,1.28fr); align-items:center; gap:16px; padding:16px; border:1px solid #e3ebf4; border-radius:14px; background:#fff; }
.curriculum-unit-card:hover { border-color:#bcd3f5; background:#fbfdff; }
.curriculum-unit-card.review-unit { border-color:#f0cd84; background:linear-gradient(90deg,#fffdf8 0%,#fff8e9 100%); }
.curriculum-unit-card__number { display:grid; gap:2px; align-content:center; min-height:58px; padding:8px; border-radius:12px; color:#276fe6; background:#eef5ff; text-align:center; }
.review-unit .curriculum-unit-card__number { color:#ad6b00; background:#fff0d2; }
.curriculum-unit-card__number span,
.curriculum-unit-card__cell > span { font-size:10px; font-weight:1000; letter-spacing:.08em; line-height:1.1; }
.curriculum-unit-card__number strong { font-size:24px; line-height:1; }
.curriculum-unit-card__cover { align-self:center; }
.table-cover-label { color:#276fe6; font-size:11px; font-weight:1000; letter-spacing:.04em; white-space:nowrap; }
.review-unit .table-cover-label { color:#ad6b00; }
.curriculum-unit-card__cell { display:grid; gap:5px; min-width:0; color:var(--muted); font-size:13px; font-weight:800; line-height:1.35; }
.curriculum-unit-card__cell > span { color:#7589a5; }
.curriculum-unit-card__cell strong { color:var(--ink); font-size:16px; line-height:1.25; }
.curriculum-unit-card__targets > div { min-width:0; }
.curriculum-unit-card__targets .phonics2-target-tray { margin-top:0; }
.curriculum-empty-state { padding:28px; border:1px dashed #cbd9e8; border-radius:14px; color:var(--muted); background:#f8fbff; font-weight:850; text-align:center; }
@media (max-width:960px) { .curriculum-path-picker__choices,.curriculum-finder { grid-template-columns:repeat(2,minmax(0,1fr)); } .curriculum-finder .curriculum-finder__search,.curriculum-finder .secondary { grid-column:1 / -1; } }
@media (max-width:820px) {
  .curriculum-course-heading { align-items:flex-start; flex-direction:column; }
  .curriculum-unit-card { grid-template-columns:74px 124px minmax(0,1fr); gap:14px; }
  .curriculum-unit-card__targets { grid-column:3; }
}
@media (max-width:640px) {
  .curriculum-panel { padding:18px; border-radius:20px; }
  .curriculum-path-picker { padding:16px; }
  .curriculum-path-picker__choices,.curriculum-finder { grid-template-columns:1fr; }
  .curriculum-path-choice { padding:16px; }
  .curriculum-finder { padding:14px; }
  .curriculum-finder .curriculum-finder__search,.curriculum-finder .secondary { grid-column:auto; }
  .curriculum-course-heading { padding:20px; }
  .curriculum-legend { flex-wrap:wrap; }
  .curriculum-unit-list { gap:8px; padding:10px; }
  .curriculum-unit-card { grid-template-columns:72px minmax(0,1fr); gap:12px; padding:14px; }
  .curriculum-unit-card__number { grid-row:span 2; }
  .curriculum-unit-card__cover { align-self:end; }
  .curriculum-unit-card__focus { align-self:start; }
  .curriculum-unit-card__targets { grid-column:1 / -1; padding-top:10px; border-top:1px solid rgba(220,229,239,.85); }
  .course-map .curriculum-card { height:214px; min-height:214px; }
  .course-map .curriculum-card-kicker { align-items:flex-start; flex-direction:column; gap:2px; }
  .course-map .curriculum-card-kicker span { text-align:left; }
}

/* Unit 1 train board: separate the picture and spelling row more clearly. */
.word-delivery-stage .delivery-word-picture {
  top: 33%;
}
.word-delivery-stage .delivery-slots {
  top: 57%;
}
@media (max-width: 760px) {
  .word-delivery-stage .delivery-word-picture { top: 33%; }
  .word-delivery-stage .delivery-slots { top: 57%; }
}

/* Phonics 2: each consonant group is one learning block. */
.phonics2-target-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: stretch;
  margin-top: 12px;
}
.phonics2-target-tray.compact { gap: 5px; margin-top: 8px; }
.phonics2-target-box {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 45px;
  padding: 6px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 2px solid #ef5a59;
  border-radius: 10px;
  background: #fff2f1;
  color: #bb2935;
  box-shadow: 0 5px 12px rgba(183, 46, 52, .12);
}
.phonics2-target-tray.compact .phonics2-target-box { min-width: 39px; min-height: 35px; padding: 4px 6px; border-radius: 8px; }
.phonics2-target-box b { font-size: 15px; line-height: 1; letter-spacing: .02em; }
.phonics2-target-box small { color: #bd4a4f; font-size: 10px; line-height: 1.1; font-weight: 900; }
.phonics2-curriculum-card > .phonics2-target-tray { align-self: end; }
.phonics2-curriculum-card.review-unit .phonics2-target-box { border-color: #e47a46; background: #fff7e9; color: #a74d20; }

/* Menu pages should use the available device canvas without turning wide desktop
   layouts into an oversized single column. Game stages keep their own sizing. */
:root {
  --menu-page-width: 1180px;
  --menu-hero-height: 390px;
  --menu-hero-aside: 400px;
}

.topbar {
  padding-inline: max(18px, calc((100vw - var(--menu-page-width)) / 2));
}

main {
  width: min(var(--menu-page-width), calc(100vw - 32px));
}

.home-hero,
.lesson-overview {
  grid-template-columns: minmax(0, 1fr) var(--menu-hero-aside);
  gap: 36px;
  min-height: var(--menu-hero-height);
  padding: 32px;
}

.home-hero h1,
.lesson-overview h1 {
  margin-bottom: 7px;
  font-size: clamp(42px, 5vw, 58px);
}

.home-hero .hero-copy > p:not(.eyebrow),
.lesson-overview > div:first-child > p:not(.eyebrow) {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.35;
}

.home-hero .word-chips,
.lesson-overview .word-chips {
  gap: 6px;
  margin-top: 12px;
}

.home-hero .word-chips span,
.lesson-overview .word-chips span {
  min-height: 30px;
  padding: 4px 9px 4px 6px;
  font-size: 12px;
}

.home-hero .word-chips b,
.lesson-overview .word-chips b {
  width: 17px;
  height: 17px;
  font-size: 10px;
}

.home-hero {
  align-items: center;
}

.home-hero .hero-visual {
  gap: 10px;
}

.home-hero .premium-panel {
  padding: 16px;
}

.home-hero .hero-metrics span {
  min-height: 56px;
}

.home-hero .mini-word-art,
.lesson-overview .unit-showcase-grid .mini-word-art {
  min-height: 62px;
}

.home-hero .hero-actions,
.lesson-overview .unit-actions {
  gap: 8px;
  margin-top: 16px;
}

.home-hero .hero-actions button,
.lesson-overview .unit-actions button {
  min-height: 36px;
  padding-inline: 10px;
  font-size: 12px;
}

.lesson-overview .unit-showcase {
  gap: 10px;
  padding: 16px;
}

@media (min-width: 761px) {
  .home-hero,
  .lesson-overview {
    grid-template-columns: minmax(0, 1fr) var(--menu-hero-aside);
  }
}

/* Large desktop screens retain a generous reading width, while laptops and
   tablets scale from the viewport instead of inheriting the former 885px cap. */
@media (min-width: 1367px) {
  :root {
    --menu-page-width: 1240px;
    --menu-hero-height: 400px;
    --menu-hero-aside: 420px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root {
    --menu-hero-height: 370px;
    --menu-hero-aside: min(320px, 36vw);
  }

  .home-hero,
  .lesson-overview {
    gap: clamp(20px, 3vw, 30px);
    padding: clamp(24px, 3vw, 30px);
  }
}

/* Portrait tablets need the two panels to remain readable, so the progress
   panel becomes a full-width second row rather than shrinking the lesson copy. */
@media (min-width: 641px) and (max-width: 820px) {
  :root {
    --menu-hero-height: 0px;
  }

  .home-hero,
  .lesson-overview {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }

  .home-hero .hero-visual,
  .lesson-overview .unit-showcase {
    width: min(100%, 560px);
  }
}

@media (max-width: 640px) {
  :root {
    --menu-page-width: 100%;
    --menu-hero-height: 0px;
  }

  main {
    width: min(100% - 20px, var(--menu-page-width));
  }

  .home-hero,
  .lesson-overview {
    grid-template-columns: 1fr !important;
    gap: 20px;
    min-height: 0;
    padding: 24px 18px;
  }

  .home-hero .hero-visual,
  .lesson-overview .unit-showcase {
    width: 100%;
  }
}

/* Lesson, Games, and Story use one unit-selection board. */
.unit-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 156px));
  gap: 12px;
  width: min(100%, 660px);
}

.unit-menu-card {
  display: grid;
  grid-template-rows: auto auto minmax(44px, auto) 1fr;
  align-content: start;
  gap: 7px;
  min-height: 186px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #d8e3ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fbfe);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 22px rgba(20, 34, 58, .08);
}

.unit-menu-card--compact {
  grid-template-rows: auto minmax(34px, auto) 1fr;
}

.unit-menu-card:hover,
.unit-menu-card.active {
  border-color: rgba(39, 111, 230, .56);
  box-shadow: 0 0 0 3px rgba(39, 111, 230, .11), 0 15px 28px rgba(20, 34, 58, .12);
}

.unit-menu-card.review-unit {
  border-color: #f1bc50;
  background: linear-gradient(180deg, #fffaf0, #fff0d1);
}

.unit-menu-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 11px;
  background: #fff;
}

.unit-menu-card__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  color: #216edb;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
}

.unit-menu-card__kicker span {
  overflow: hidden;
  color: #53647b;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-menu-card.review-unit .unit-menu-card__kicker,
.unit-menu-card.review-unit .unit-menu-card__kicker span {
  color: #b67000;
}

.unit-menu-card > strong {
  align-self: start;
  font-size: 19px;
  line-height: 1.12;
}

.unit-menu-card > small {
  align-self: end;
  color: #5b6b80;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

@media (max-width: 720px) {
  .unit-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .unit-menu-card {
    min-height: 192px;
  }
}

/* Keep the Home canvas above the cards, then let this board fill the same
   four-column area used by the Home course map. */
.course-map.unit-menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.course-map .unit-menu-card {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(42px, auto) 1fr;
  gap: 8px;
  height: 236px;
  min-height: 236px;
  padding: 12px;
}

.course-map .unit-menu-card img {
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.course-map .unit-menu-card > strong {
  font-size: clamp(19px, 1.8vw, 26px);
}

/* Unit menus use activity-specific previews instead of a reused story cover. */
.course-map .menu-card-word-art {
  grid-row: auto;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f4f9fd);
  box-shadow: inset 0 0 0 1px rgba(220,229,239,.9);
}

.course-map .menu-card-word-art img {
  grid-row: auto;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: inherit;
  background: transparent;
  filter: drop-shadow(0 9px 11px rgba(30,45,75,.14));
}

.course-map .menu-card-scene-art,
.course-map .unit-menu-card .menu-card-scene-art {
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: #edf5fb;
}

/* Every Weekly unit entry uses the same Home-card footprint. */
.course-map.unit-menu-grid .unit-menu-card {
  grid-template-rows: 132px auto minmax(34px, auto) auto;
  gap: 6px;
}

.course-map.unit-menu-grid .unit-menu-card--compact {
  grid-template-rows: 132px minmax(34px, auto) 1fr;
}

.course-map.unit-menu-grid .unit-menu-card__media {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #edf5fb;
}

.course-map.unit-menu-grid .unit-menu-card__media > .menu-card-word-art,
.course-map.unit-menu-grid .unit-menu-card__media > .menu-card-scene-art {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: inherit;
}

.course-map.unit-menu-grid .unit-menu-card__media > .menu-card-scene-art {
  display: block;
  object-fit: cover;
}

/* Story thumbnails are illustrations, so keep the whole scene visible instead
   of zooming and cropping it like a game-background preview. */
.story-menu-screen .course-map.unit-menu-grid .unit-menu-card__media > .menu-card-scene-art {
  box-sizing: border-box;
  object-fit: contain;
  padding: 6px 12px;
  background: #fff;
}

/* Story cards use manuscript titles, which can be longer than lesson topics. */
.story-menu-screen .course-map.unit-menu-grid .unit-menu-card > strong {
  width: 100%;
  text-align: center;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.16;
  letter-spacing: -.02em;
}

.course-map .unit-menu-card .unit-menu-card__unit-badge {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 999px;
  background: rgba(19, 64, 132, .94);
  box-shadow: 0 4px 10px rgba(9, 33, 77, .28);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
  line-height: 1;
}

.course-map .unit-menu-card.review-unit .unit-menu-card__unit-badge {
  background: rgba(179, 102, 0, .95);
}

.course-map.unit-menu-grid .menu-card-word-art {
  position: relative;
  height: 132px;
  aspect-ratio: auto;
}

.course-map.unit-menu-grid .menu-card-word-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 720px) {
  .course-map.unit-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-map .curriculum-card,
  .course-map .unit-menu-card {
    height: 214px;
    min-height: 214px;
  }

  .course-map.unit-menu-grid .unit-menu-card {
    grid-template-rows: 100px auto minmax(34px, auto) auto;
  }

  .course-map.unit-menu-grid .unit-menu-card--compact {
    grid-template-rows: 100px minmax(34px, auto) 1fr;
  }

  .course-map.unit-menu-grid .menu-card-word-art {
    height: 100px;
  }

  .story-menu-screen .course-map.unit-menu-grid .unit-menu-card__media > .menu-card-scene-art {
    padding: 4px 8px;
  }

  .course-map .unit-menu-card .unit-menu-card__unit-badge {
    top: 6px;
    left: 6px;
    min-height: 21px;
    padding: 3px 7px;
    font-size: 10px;
  }
}

/* Phonics 2 curriculum cards can open the lesson or launch their matching game. */
.course-map .curriculum-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(220,229,239,.94);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.course-map .curriculum-card:hover {
  border-color: rgba(39,111,230,.34);
  box-shadow: 0 16px 34px rgba(20,34,58,.12);
}
.course-map .curriculum-card:focus-visible {
  outline: 3px solid rgba(39,111,230,.28);
  outline-offset: 2px;
}
.course-map .curriculum-card-game-link {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-top: 6px;
  padding: 8px 11px;
  border: 1px solid #276fe6;
  border-radius: 999px;
  background: #eef5ff;
  color: #1e5fc3;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
}
.course-map .curriculum-card-game-link:hover {
  border-color: #1e5fc3;
  background: #dceaff;
  box-shadow: 0 8px 18px rgba(39,111,230,.16);
}
.course-map .curriculum-card-game-hint {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
  color: #1e5fc3;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .05em;
}

/* Home unit cards use two direct actions in place of the former sound-summary line. */
.course-map .home-unit-card {
  grid-template-rows: auto auto minmax(42px, auto) auto;
  cursor: default;
}

.course-map .home-unit-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-self: end;
  width: 100%;
  margin-top: 3px;
}

.course-map .home-unit-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #a9caee;
  border-radius: 10px;
  background: #eef7ff;
  box-shadow: none;
  color: #1c68ba;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
}

.course-map .home-unit-card-action--game {
  border-color: #9bd7bf;
  background: #eefbf5;
  color: #247a56;
}

.course-map .home-unit-card-action:hover,
.course-map .home-unit-card-action:focus-visible {
  transform: translateY(-1px);
  border-color: currentColor;
  box-shadow: 0 7px 15px rgba(29, 91, 154, .14);
}

.course-map .home-unit-card-action:focus-visible {
  outline: 3px solid rgba(39, 111, 230, .22);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .course-map .home-unit-card-action { min-height: 32px; padding-inline: 6px; font-size: 10px; }
}

.blend-word-markup { display: inline-flex; align-items: baseline; white-space: nowrap; }
.blend-word-markup .target-blend {
  display: inline-block;
  padding: .02em .12em .08em;
  border-radius: .18em;
  background: #ef4d4d;
  color: #fff;
  box-shadow: 0 4px 10px rgba(195, 35, 43, .22);
  text-decoration: none;
}
.blend-target-badge { border-color: #ef4d4d !important; background: #fff0ef !important; color: #c72d39 !important; }
.blend-target-badge b { font-size: clamp(22px, 3vw, 34px); letter-spacing: .02em; }
.blend-focus-panel .phonics2-target-tray { grid-column: 1 / -1; }
.blend-mode-label { color: #bd2935; }
.blend-explanation { border-color: #f0a1a0; background: #fff5f4; }
.blend-explanation b { background: #ef4d4d; color: #fff; border-radius: 8px; padding: 8px 10px; }
.phonics3-pair-display { width: auto !important; min-width: 58px; padding: 8px 10px; white-space: nowrap; font-size: 18px; letter-spacing: .03em; }

.sound-block.target-blend-block {
  color: #fff !important;
  background: linear-gradient(145deg, #ff625c, #d92f35) !important;
  border-color: #fff4ef !important;
  box-shadow: 0 0 0 5px rgba(255, 98, 92, .2), 0 13px 22px rgba(140, 34, 40, .24) !important;
}
.sound-block.target-blend-block span { color: #fff !important; }
.sound-block.blend { border-width: 2px; }
.say-coach-phonemes > span.target-blend-card {
  color: #fff;
  background: linear-gradient(145deg, #ff625c, #d92f35) !important;
  border-color: #fff4ef;
  box-shadow: 0 0 0 5px rgba(255, 98, 92, .18), 0 12px 20px rgba(130, 32, 38, .25);
}
.say-coach-phonemes > span.target-blend-card em,
.say-coach-phonemes > span.target-blend-card small { color: #fff; }
.fixed-context-letter { border-color: #dce5ee; background: #f7fafc; color: #52677b; }

.phonics2-check .blend-check-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 9px 14px;
  border: 2px solid #ef5a59;
  border-radius: 14px;
  background: #fff2f1;
  color: #b52b37;
}
.blend-check-banner span { font-size: 11px; font-weight: 1000; letter-spacing: .08em; }
.blend-check-banner strong { font-size: 25px; }
.blend-check-banner em { font-size: 13px; font-style: normal; font-weight: 900; }
.phonics2-check-grid { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); width: min(860px, 100%); }
.phonics2-check-grid button { min-height: 76px; display: grid; place-items: center; gap: 2px; }
.phonics2-check-grid button b { font-size: 24px; }

/* Restore the first Speak screen for Alphabet and Phonics 1-3. */
.speak-view .say-coach-stage{aspect-ratio:16/9!important;min-height:0!important;background:#fff!important;box-shadow:0 22px 52px rgba(31,68,67,.18)!important}
.speak-view .say-coach-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;z-index:0!important}
.speak-view .cockpit-space-flyby{display:none!important}
.speak-view .say-coach-title{display:none!important}
.speak-view .say-coach-word{left:50%!important;right:auto!important;top:5%!important;width:32%!important;height:30%!important;transform:translateX(-50%)!important;z-index:2!important}
.speak-view .say-coach-word img{width:100%!important;height:100%!important;object-fit:contain!important;transform:scale(.9)!important}
.speak-view .say-coach-phonemes{left:50%!important;right:auto!important;top:42%!important;width:auto!important;transform:translateX(-50%)!important;gap:12px!important;z-index:3!important}
.speak-view .say-coach-controls{left:50%!important;right:auto!important;bottom:4%!important;width:min(430px,55%)!important;transform:translateX(-50%)!important;gap:14px!important;z-index:4!important}
.speak-view .say-console-button,.speak-view .say-demo-button.say-console-button,.speak-view .say-mic-button.say-console-button,.speak-view .say-play-button{width:96px!important;height:96px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 8px 8px rgba(70,57,104,.24))!important}
.speak-view .say-console-button img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
.speak-view .say-coach-character{display:grid!important;left:3%!important;right:auto!important;bottom:2%!important;width:29%!important;height:55%!important;z-index:3!important;pointer-events:none!important}
.speak-view .say-coach-character img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 14px 14px rgba(44,54,94,.22))!important}
.speak-view .say-coach-character span{left:64%!important;top:3%!important;min-width:132px!important;max-width:180px;padding:8px 12px!important;border-color:#aeb1ec!important;color:#463b72!important;background:#fff!important;font-size:13px!important;line-height:1.25!important}
.speak-view .say-coach-character span::after{border-color:transparent #aeb1ec transparent transparent!important}
@media(max-width:760px){.speak-view .say-coach-stage{aspect-ratio:auto!important;min-height:440px!important}.speak-view .say-coach-word{left:50%!important;top:5%!important;width:42%!important;height:28%!important}.speak-view .say-coach-phonemes{left:50%!important;top:40%!important;gap:5px!important}.speak-view .say-coach-controls{left:50%!important;bottom:3%!important;width:76%!important;gap:6px!important}.speak-view .say-console-button,.speak-view .say-demo-button.say-console-button,.speak-view .say-mic-button.say-console-button,.speak-view .say-play-button{width:72px!important;height:72px!important}.speak-view .say-coach-character{left:-2%!important;bottom:2%!important;width:33%!important;height:48%!important}.speak-view .say-coach-character span{left:53%!important;top:0!important;min-width:104px!important;font-size:11px!important}}
.phonics2-check-grid button span { font-size: 11px; font-weight: 900; }
.phonics2-check-grid .target-blend-choice { border-color: #ff9b98; background: #fff1ef; }

@media (max-width: 760px) {
  .phonics2-target-tray { gap: 5px; }
  .phonics2-target-box { min-width: 42px; min-height: 40px; padding: 5px 6px; }
  .phonics2-target-box b { font-size: 13px; }
  .phonics2-target-box small { font-size: 9px; }
  .compact.vowel-focus-panel.blend-focus-panel { grid-template-columns: 52px 1fr; }
  .compact.blend-focus-panel .phonics2-target-tray { grid-column: 1 / -1; }
  .compact.blend-focus-panel .vowel-sound-button { grid-column: 2; justify-self: start; }
  .phonics2-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Alphabet Unit 8: independently placed snowflakes, word panel, and rewards. */
.snowflake-link-stage { position: relative; min-height: clamp(630px, 56vw, 720px); overflow: hidden; border-radius: 30px; isolation: isolate; background: #e4f4ff; }
.snowflake-link-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.snowflake-link-layer { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.snowflake-link-line { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: 0; stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 3px #74dcff) drop-shadow(0 0 8px #fff); }
.snowflake-link-stage.sound-linked .snowflake-link-line { opacity: 1; animation: snowflakeLinkDraw .72s ease-out forwards; }
.snowflake-link-title { position: absolute; z-index: 10; left: 50%; top: 3%; width: min(620px, 64%); transform: translateX(-50%); padding: 9px 18px 10px; border: 3px solid #fff; border-radius: 24px; background: rgba(242,252,255,.94); box-shadow: 0 8px 22px rgba(72,124,180,.23); color: #275995; text-align: center; }
.snowflake-link-title b { display: block; font-size: clamp(20px, 2.2vw, 33px); letter-spacing: .06em; }
.snowflake-link-title span { display: block; margin-top: 2px; font-size: clamp(12px, 1.15vw, 17px); font-weight: 900; }
.snowflake-link-word-panel { position: absolute; z-index: 8; left: 50%; top: 22%; width: min(260px, 26%); min-width: 172px; min-height: 185px; padding: 13px 10px 10px; transform: translateX(-50%); display: grid; place-items: center; align-content: center; gap: 5px; border: 4px solid rgba(255,255,255,.94); border-radius: 28px; background: linear-gradient(145deg,rgba(245,253,255,.96),rgba(197,232,255,.91)); box-shadow: 0 14px 30px rgba(65,118,172,.28), inset 0 0 0 2px #b7e4fa; }
.snowflake-link-word-panel > small { color: #427cb7; font-size: 11px; font-weight: 1000; letter-spacing: .12em; }
.snowflake-link-word { position: static !important; display: flex; justify-content: center; width: auto; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #245a9b; font-size: clamp(32px,4.4vw,58px); }
.snowflake-link-word .alphabet-missing-letter { width: .88em; height: 1em; border-bottom: .14em solid #367fbe; }
.snowflake-link-picture { width: 92px; height: 78px; object-fit: contain; }
.snowflake-link-choices { position: absolute; inset: 0; z-index: 9; }
.snowflake-link-choice { position: absolute; left: var(--snow-x); top: var(--snow-y); width: clamp(108px,15%,176px); aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%,-50%); filter: drop-shadow(0 10px 12px rgba(54,115,166,.3)); transition: transform .18s ease, filter .18s ease; }
.snowflake-link-choice img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.snowflake-link-choice b { position: absolute; left: 50%; top: 50%; color: #245a9b; font-size: clamp(26px,3.7vw,48px); font-weight: 1000; line-height: 1; text-shadow: 0 2px 0 #fff,0 4px 8px rgba(43,109,166,.24); transform: translate(-50%,-50%); pointer-events: none; }
.snowflake-link-choice:hover:not(:disabled) { transform: translate(-50%,calc(-50% - 9px)) scale(1.05); filter: drop-shadow(0 16px 15px rgba(53,122,179,.38)); }
.snowflake-link-choice.correct { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 17px #58dcff); animation: snowflakeChoiceCorrect .7s ease; }
.snowflake-link-choice.wrong { animation: snowflakeChoiceWrong .48s ease; }
.snowflake-link-choice:disabled:not(.correct) { opacity: .55; }
.snowflake-reward { position: absolute; z-index: 6; pointer-events: none; text-align: center; filter: drop-shadow(0 10px 12px rgba(48,99,150,.22)); }
.snowflake-reward img { display: block; width: 100%; height: auto; clip-path: inset(var(--reward-cut) 0 0 0); transition: clip-path .7s cubic-bezier(.2,.82,.24,1); }
.snowflake-reward span { position: absolute; z-index: 2; left: 50%; bottom: -15px; width: max-content; padding: 4px 8px; transform: translateX(-50%); border: 2px solid #fff; border-radius: 999px; background: rgba(238,249,255,.9); color: #28649f; box-shadow: 0 3px 8px rgba(72,128,179,.22); font-size: 11px; font-weight: 1000; }
.snowflake-reward.is-building img { animation: snowflakeRewardArrive .7s ease; }
.snowflake-reward-snowman { left: 6%; top: 63%; width: clamp(92px,14%,150px); }
.snowflake-reward-igloo { left: 78.5%; top: 68%; width: clamp(118px,17%,182px); }
@keyframes snowflakeLinkDraw { to { stroke-dashoffset: 0; } }
@keyframes snowflakeChoiceCorrect { 42% { transform: translate(-50%,-50%) scale(1.16) rotate(9deg); } }
@keyframes snowflakeChoiceWrong { 20%,60% { transform: translate(-50%,-50%) translateX(-9px); } 40%,80% { transform: translate(-50%,-50%) translateX(9px); } }
@keyframes snowflakeRewardArrive { 45% { transform: translateY(-12px) scale(1.07); } }
@media (max-width: 760px) {
  .snowflake-link-stage { min-height: 590px; border-radius: 22px; }
  .snowflake-link-title { top: 2%; width: 84%; padding: 8px 12px 10px; }
  .snowflake-link-title b { font-size: 18px; }
  .snowflake-link-title span { font-size: 12px; }
  .snowflake-link-word-panel { top: 20%; width: 42%; min-width: 142px; min-height: 134px; padding: 8px; border-radius: 22px; }
  .snowflake-link-picture { width: 70px; height: 56px; }
  .snowflake-link-choice { width: clamp(76px,27vw,116px); }
  .snowflake-link-choice b { font-size: clamp(22px,8vw,34px); }
  .snowflake-link-choice:nth-child(1) { --snow-x: 19% !important; --snow-y: 49% !important; }
  .snowflake-link-choice:nth-child(2) { --snow-x: 81% !important; --snow-y: 49% !important; }
  .snowflake-link-choice:nth-child(3) { --snow-x: 19% !important; --snow-y: 74% !important; }
  .snowflake-link-choice:nth-child(4) { --snow-x: 81% !important; --snow-y: 74% !important; }
  .snowflake-reward span { bottom: -11px; padding: 3px 5px; font-size: 9px; }
  .snowflake-reward-snowman { left: 2%; top: 78%; width: 15%; }
  .snowflake-reward-igloo { left: 83%; top: 80%; width: 16%; }
}

/* Student My Page dashboard */
.my-page-screen {
  width: min(1240px, calc(100vw - 32px));
  margin-top: 24px;
}
.my-page-shell { display: grid; gap: 18px; }
.my-page-next-action {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 26px; align-items: stretch;
  padding: 28px; border-radius: 24px; color: #fff;
  background: linear-gradient(112deg, #153d78 0%, #216dbd 55%, #2eb49e 100%);
  box-shadow: 0 16px 36px rgba(25, 78, 142, .2);
}
.my-page-next-action .eyebrow { color: #c8f5ff; }
.my-page-next-action__unit { margin: 0 0 5px; color: #e0f1ff; font-size: 13px; font-weight: 900; }
.my-page-next-action h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.my-page-next-action__description { margin: 9px 0 18px; color: rgba(255,255,255,.9); font-size: 16px; font-weight: 800; }
.my-page-next-action .primary { min-width: 172px; color: #16477f; background: #fff; }
.my-page-next-action__route { display: grid; gap: 12px; align-content: center; }
.my-page-next-action__route > div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 15px; background: rgba(255,255,255,.12); }
.my-page-next-action__route span { color: #d2f2fb; font-size: 11px; font-weight: 1000; letter-spacing: .03em; text-transform: uppercase; }
.my-page-next-action__route strong { font-size: 15px; line-height: 1.35; }
.my-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 22px;
  align-items: stretch;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(130deg, #173e77 0%, #2473cc 54%, #28b995 100%);
  box-shadow: 0 22px 54px rgba(22,63,116,.22);
}
.my-page-profile { display: flex; align-items: center; gap: 18px; min-width: 0; }
.my-page-avatar {
  width: 72px; height: 72px; flex: 0 0 72px;
  display: grid; place-items: center;
  border-radius: 22px;
  color: #16406f;
  background: linear-gradient(145deg, #fff, #dff5ff);
  font-size: 22px; font-weight: 1000;
  box-shadow: 0 12px 24px rgba(9,30,60,.2);
}
.my-page-profile h1 { margin: 0 0 6px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; }
.my-page-profile p:not(.eyebrow) { margin: 0; max-width: 580px; color: rgba(255,255,255,.84); font-size: 16px; font-weight: 800; line-height: 1.45; }
.my-page-hero .eyebrow { color: #c8f5ff; }
.my-page-overall {
  display: grid; align-content: center; gap: 8px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 20px;
  background: rgba(255,255,255,.13);
}
.my-page-overall span, .my-page-overall small { color: rgba(255,255,255,.78); font-weight: 850; }
.my-page-overall strong { font-size: 46px; line-height: 1; }
.my-page-overall .my-page-progress { background: rgba(255,255,255,.28); }
.my-page-overall .my-page-progress i { background: #ffe178; }
.my-page-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #e9eef7; }
.my-page-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2478df, #2fbf9b); transition: width .35s ease; }
.my-page-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.my-page-stat-grid article {
  display: flex; align-items: center; gap: 12px;
  min-height: 96px; padding: 16px;
  border: 1px solid #e1e9f4; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 24px rgba(38,61,95,.06);
}
.my-page-stat-grid strong { display: block; font-size: 28px; line-height: 1.05; }
.my-page-stat-grid small { color: var(--muted); font-weight: 850; }
.my-page-stat-icon {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px;
  border-radius: 14px; font-size: 22px; font-weight: 1000;
}
.my-page-stat-icon.blue { color: #1767c6; background: #e4f0ff; }
.my-page-stat-icon.mint { color: #08735f; background: #dcfaef; }
.my-page-stat-icon.yellow { color: #98710a; background: #fff4c7; }
.my-page-stat-icon.coral { color: #bf4f49; background: #ffe6e4; }
.my-page-main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; }
.my-page-current-card, .my-page-quick-card, .my-page-section {
  padding: 24px;
  border: 1px solid #e1e9f4; border-radius: 22px; background: #fff;
  box-shadow: 0 14px 34px rgba(38,61,95,.07);
}
.my-page-section { display: grid; gap: 18px; }
.my-page-section--journey { border-color: #bcd9f8; }
.my-page-recent-activity { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border: 1px solid #e1e9f4; border-radius: 20px; background: #f9fbfe; }
.my-page-recent-activity .eyebrow { margin-bottom: 5px; color: #4079be; }
.my-page-recent-activity strong { display: block; color: #173d6a; font-size: 17px; }
.my-page-recent-activity p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 13px; font-weight: 750; }
.my-page-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.my-page-section-heading h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.my-page-section-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-weight: 800; line-height: 1.4; }
.my-page-live-pill, .my-page-profile-badge, .my-page-section-note {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 10px; font-weight: 1000; letter-spacing: .04em; white-space: nowrap;
}
.my-page-live-pill { color: #08735f; background: #e2fbf2; }
.my-page-profile-badge { color: #1767c6; background: #e6f0ff; }
.my-page-section-note { color: #5f6e83; background: #f1f5fa; }
.my-page-current-detail { margin: 14px 0 18px; color: #4d5e77; font-size: 15px; font-weight: 850; }
.my-page-current-body { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 20px; align-items: center; }
.my-page-current-art {
  display: grid; place-items: center; min-height: 136px; overflow: hidden;
  border: 1px solid #e1e9f4; border-radius: 18px;
  background: linear-gradient(145deg, #f5fbff, #fffdf2);
}
.my-page-word-art { width: 100%; height: 126px; display: grid; place-items: center; }
.my-page-word-art img { max-width: 88%; max-height: 112px; object-fit: contain; }
.my-page-current-progress { display: grid; gap: 10px; }
.my-page-percent-row { display: flex; justify-content: space-between; gap: 12px; color: #4d5e77; font-size: 13px; font-weight: 900; }
.my-page-percent-row strong { color: #1767c6; font-size: 21px; }
.my-page-current-progress small { color: var(--muted); font-weight: 850; }
.my-page-current-progress .primary { justify-self: start; margin-top: 4px; }
.my-page-quick-card { display: grid; align-content: start; gap: 16px; }
.my-page-quick-card dl { display: grid; gap: 0; margin: 0; }
.my-page-quick-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1f6; }
.my-page-quick-card dl div:last-child { border-bottom: 0; }
.my-page-quick-card dt { color: var(--muted); font-size: 13px; font-weight: 850; }
.my-page-quick-card dd { margin: 0; color: #223c61; font-size: 13px; font-weight: 1000; text-align: right; }
.my-page-full-button { width: 100%; }
.my-page-journey-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.my-page-journey-card {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center;
  min-height: 116px; padding: 13px;
  border: 1px solid #e3eaf4; border-radius: 16px; background: #f9fbfe;
}
.my-page-journey-card.is-active { border: 2px solid #8ebcf3; background: #e9f4ff; box-shadow: inset 0 0 0 2px rgba(34,119,216,.08); }
.my-page-journey-card.is-done { border-color: #9fdfca; background: #f0fff9; }
.my-page-journey-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #1767c6; background: #e4f0ff; font-size: 13px; font-weight: 1000; }
.my-page-journey-card.is-done .my-page-journey-number { color: #08735f; background: #d9faed; }
.my-page-journey-card strong, .my-page-journey-card span { display: block; }
.my-page-journey-card strong { font-size: 14px; }
.my-page-journey-card span { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.25; }
.my-page-inline-link { padding: 0; border: 0; color: #1767c6; background: transparent; font-size: 12px; font-weight: 1000; }
.my-page-step-status { grid-column: 2; justify-self: start; margin-top: 1px !important; color: #61748d !important; font-size: 11px !important; font-weight: 1000 !important; }
.my-page-journey-card.is-active .my-page-step-status { color: #1267c9 !important; }
.my-page-journey-card.is-done .my-page-step-status { color: #08735f !important; }
.my-page-unit-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.my-page-unit-card { display: grid; gap: 10px; padding: 16px; border: 1px solid #e3eaf4; border-radius: 17px; background: #fff; }
.my-page-unit-card.is-current { border-color: #87baf2; box-shadow: 0 8px 22px rgba(34,119,216,.11); }
.my-page-unit-card-top, .my-page-unit-card-bottom, .my-page-game-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-page-unit-kicker { color: #49627f; font-size: 11px; font-weight: 1000; }
.my-page-unit-status { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 7px; border-radius: 999px; color: #68768b; background: #eef2f7; font-size: 9px; font-weight: 1000; white-space: nowrap; }
.my-page-unit-status.complete { color: #08735f; background: #e1f9f0; }
.my-page-unit-status.in-progress { color: #1767c6; background: #e4f0ff; }
.my-page-unit-status.not-started { color: #68768b; background: #eef2f7; }
.my-page-unit-card h3 { margin: 0; color: #173a66; font-size: 24px; }
.my-page-unit-card p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.my-page-unit-card-bottom { color: #5f6e83; font-size: 11px; font-weight: 900; }
.my-page-unit-game { color: #718198; font-size: 10px; font-weight: 850; }
.my-page-game-list { display: grid; gap: 10px; }
.my-page-game-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid #e3eaf4; border-radius: 16px; background: #fbfdff; }
.my-page-game-icon { width: 42px; height: 42px; display: flex !important; align-items: center; justify-content: center !important; padding: 0; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #2478df, #2fbf9b); font-size: 18px; font-weight: 1000; line-height: 1; text-align: center; }
.my-page-game-icon > span { display: block; width: 1em; height: 1em; line-height: 1; }
.my-page-game-copy { display: grid; gap: 7px; min-width: 0; }
.my-page-game-copy > div { display: flex; align-items: center; gap: 10px; }
.my-page-game-copy strong { font-size: 14px; }
.my-page-game-copy p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; }

@media (max-width: 900px) {
  .my-page-hero, .my-page-main-grid, .my-page-next-action { grid-template-columns: 1fr; }
  .my-page-journey-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .my-page-unit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .my-page-screen { width: min(100% - 20px, 560px); margin-top: 14px; }
  .my-page-hero, .my-page-current-card, .my-page-quick-card, .my-page-section, .my-page-next-action { padding: 18px; border-radius: 18px; }
  .my-page-profile { align-items: flex-start; }
  .my-page-avatar { width: 56px; height: 56px; flex-basis: 56px; border-radius: 17px; font-size: 17px; }
  .my-page-profile h1 { font-size: 34px; }
  .my-page-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .my-page-stat-grid article { min-height: 78px; padding: 12px; }
  .my-page-stat-grid strong { font-size: 23px; }
  .my-page-stat-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; font-size: 17px; }
  .my-page-current-body { grid-template-columns: 1fr; }
  .my-page-current-art { min-height: 118px; }
  .my-page-recent-activity { display: grid; padding: 16px; }
  .my-page-recent-activity .secondary { width: 100%; }
  .my-page-journey-grid, .my-page-unit-grid { grid-template-columns: 1fr; }
  .my-page-section-heading { flex-direction: column; }
  .my-page-section-note { align-self: flex-start; }
  .my-page-game-card { grid-template-columns: 36px minmax(0,1fr); }
  .my-page-game-icon { width: 36px; height: 36px; border-radius: 11px; }
  .my-page-game-card > .my-page-inline-link { grid-column: 2; justify-self: start; }
}

/* Action-first learner hub.  It deliberately prioritizes one next action over
   the dense report-card layout used by the former My Page. */
.learning-command-screen { width: min(1160px, calc(100vw - 32px)); margin-top: 34px; }
.learning-command { display: grid; gap: 22px; padding-bottom: 44px; }
.learning-command__hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 24px;
  padding: clamp(25px, 4vw, 44px); border-radius: 30px; color: #fff;
  background: linear-gradient(125deg, #092a5e 0%, #1452a5 55%, #16a88f 115%);
  box-shadow: 0 24px 52px rgba(10, 51, 108, .2);
}
.learning-command__hero::before, .learning-command__hero::after { position: absolute; z-index: -1; content: ""; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
.learning-command__hero::before { width: 360px; height: 360px; right: -125px; top: -208px; }
.learning-command__hero::after { width: 260px; height: 260px; left: 48%; bottom: -210px; }
.learning-command__hero-copy { max-width: 670px; }
.learning-command__eyebrow, .learning-command__section-heading p, .learning-command__record-intro p, .learning-command__map-header p, .learning-command__recent p, .learning-command__locked-game p { margin: 0; color: #4f77a7; font-size: 11px; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.learning-command__hero .learning-command__eyebrow { color: #aeece2; }
.learning-command__unit-label { margin: 15px 0 6px; color: rgba(255,255,255,.79); font-size: 14px; font-weight: 900; }
.learning-command__hero h1 { margin: 0; font-size: clamp(42px, 6vw, 70px); line-height: .98; letter-spacing: -.06em; }
.learning-command__goal { max-width: 480px; margin: 16px 0 24px; color: rgba(255,255,255,.86); font-size: 18px; font-weight: 800; line-height: 1.45; }
.learning-command__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.learning-command__start, .learning-command__menu, .learning-command__map-link { border: 0; font: inherit; font-weight: 1000; cursor: pointer; }
.learning-command__start { display: inline-flex; align-items: center; gap: 23px; min-height: 56px; padding: 0 19px 0 23px; border-radius: 17px; color: #0d4778; background: #fff; box-shadow: 0 10px 20px rgba(3,30,70,.22); }
.learning-command__start b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #1a9d90; font-size: 20px; }
.learning-command__menu { min-height: 56px; padding: 0 18px; border: 1px solid rgba(255,255,255,.42); border-radius: 17px; color: #fff; background: rgba(255,255,255,.11); }
.learning-command__now-card { display: grid; align-content: center; gap: 12px; padding: 22px; border: 1px solid rgba(255,255,255,.23); border-radius: 22px; background: rgba(0,17,61,.2); backdrop-filter: blur(10px); }
.learning-command__now-card > p { margin: 0; color: #aeece2; font-size: 11px; font-weight: 1000; letter-spacing: .06em; }
.learning-command__now-card > strong { padding-bottom: 8px; font-size: 21px; line-height: 1.22; }
.learning-command__now-card > div { display: flex; justify-content: space-between; gap: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.learning-command__now-card span { color: rgba(255,255,255,.7); font-size: 12px; font-weight: 800; }
.learning-command__now-card b { text-align: right; font-size: 13px; }
.learning-command__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 22px; align-items: start; }
.learning-command__route, .learning-command__words, .learning-command__record, .learning-command__map { padding: 24px; border: 1px solid #e0eaf6; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(38,61,95,.06); }
.learning-command__route { border-color: #bad9fb; }
.learning-command__section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.learning-command__section-heading h2, .learning-command__record h2, .learning-command__map h2 { margin: 5px 0 0; color: #153a67; font-size: 25px; line-height: 1.15; }
.learning-command__record h2 { word-break: keep-all; }
.learning-command__section-heading > span { display: grid; min-width: 46px; min-height: 29px; place-items: center; padding: 0 9px; border-radius: 999px; color: #1767c6; background: #eaf4ff; font-size: 11px; font-weight: 1000; }
.learning-command__stages { display: grid; gap: 8px; margin: 21px 0 0; padding: 0; list-style: none; }
.learning-command__stage { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 62px; padding: 10px 13px; border: 1px solid #e7edf5; border-radius: 16px; background: #f8fafd; }
.learning-command__stage-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; color: #52708f; background: #edf2f8; font-size: 13px; font-weight: 1000; }
.learning-command__stage strong, .learning-command__stage small { display: block; }
.learning-command__stage strong { color: #1f416c; font-size: 14px; }
.learning-command__stage small { margin-top: 3px; color: #6f8197; font-size: 11px; font-weight: 800; }
.learning-command__stage em { color: #77879a; font-size: 11px; font-style: normal; font-weight: 1000; white-space: nowrap; }
.learning-command__stage--done { border-color: #a9e4d0; background: #f1fff9; }
.learning-command__stage--done .learning-command__stage-number { color: #08735f; background: #daf9ec; }
.learning-command__stage--done em { color: #08735f; }
.learning-command__stage--current { border: 2px solid #6caaf0; background: #eef7ff; box-shadow: 0 8px 18px rgba(31,116,212,.1); }
.learning-command__stage--current .learning-command__stage-number { color: #fff; background: #1974d7; }
.learning-command__stage--current em { color: #1469c7; }
.learning-command__route-note { margin: 16px 0 0; color: #64758a; font-size: 12px; font-weight: 800; line-height: 1.45; }
.learning-command__side { display: grid; gap: 14px; }
.learning-command__words { padding: 21px; }
.learning-command__word-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.learning-command__word { display: grid; min-height: 76px; align-content: center; padding: 9px; border: 1px solid #e0eaf4; border-radius: 15px; background: linear-gradient(145deg, #fbfdff, #f4fbff); }
.learning-command__word b { color: #186cc9; font-size: 25px; line-height: 1; }
.learning-command__word span { margin-top: 5px; color: #49647f; font-size: 11px; font-weight: 900; overflow-wrap: anywhere; }
.learning-command__locked-game { display: flex; gap: 12px; padding: 18px; border: 1px solid #ffe3a9; border-radius: 21px; background: #fffaf0; }
.learning-command__locked-game > span { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 13px; color: #9a7411; background: #fff0c7; font-size: 20px; }
.learning-command__locked-game p { color: #a98324; }
.learning-command__locked-game strong, .learning-command__locked-game small { display: block; }
.learning-command__locked-game strong { margin: 3px 0; color: #5a4820; font-size: 14px; }
.learning-command__locked-game small { color: #866f3d; font-size: 11px; font-weight: 800; line-height: 1.35; }
.learning-command__recent { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 22px; border: 1px solid #e1eaf4; border-radius: 21px; background: #f9fbfe; }
.learning-command__recent-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: #4f71a0; background: #e8f1fc; font-size: 23px; font-weight: 1000; }
.learning-command__recent strong, .learning-command__recent small { display: block; }
.learning-command__recent strong { margin: 3px 0; color: #183c68; font-size: 16px; }
.learning-command__recent small { color: #718198; font-size: 12px; font-weight: 750; }
.learning-command__recent .secondary { white-space: nowrap; }
.learning-command__record { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px 24px; background: linear-gradient(120deg, #f8fbff, #fff); }
.learning-command__record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.learning-command__record-grid article { display: grid; gap: 5px; min-height: 82px; align-content: center; padding: 11px 13px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #e5edf6; }
.learning-command__record-grid b { color: #183c68; font-size: 24px; line-height: 1; }
.learning-command__record-grid b small { color: #6d7f96; font-size: 13px; }
.learning-command__record-grid span { color: #63758d; font-size: 11px; font-weight: 900; }
.learning-command__record-grid .my-page-progress { height: 5px; margin-top: 2px; }
.learning-command__review { display: grid; gap: 18px; padding: 24px; border: 1px solid #eadff8; border-radius: 24px; background: linear-gradient(110deg, #fbf9ff, #fff); box-shadow: 0 12px 30px rgba(70,55,124,.05); }
.learning-command__review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.learning-command__review-heading p { margin: 0; color: #7654a8; font-size: 11px; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.learning-command__review-heading h2 { margin: 5px 0 0; color: #2f2752; font-size: 25px; }
.learning-command__review-heading span { display: block; margin-top: 6px; color: #756d8a; font-size: 13px; font-weight: 750; }
.learning-command__review-action { min-height: 40px; padding: 0 13px; border: 1px solid #d8c5ef; border-radius: 12px; color: #68429b; background: #fff; font: inherit; font-size: 12px; font-weight: 1000; white-space: nowrap; cursor: pointer; }
.learning-command__mistakes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.learning-command__mistake { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 67px; padding: 10px 12px; border: 1px solid #e5d9f5; border-radius: 16px; color: #3c3155; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.learning-command__mistake > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; color: #7350a7; background: #f0e9fb; font-size: 16px; font-weight: 1000; }
.learning-command__mistake strong { min-width: 0; font-size: 14px; }
.learning-command__mistake small { color: #897c9d; font-size: 10px; font-weight: 900; white-space: nowrap; }
.learning-command__mistake b { grid-column: 2 / -1; color: #6d459f; font-size: 11px; }
.learning-command__mistake-empty { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 13px 16px; border: 1px dashed #d8c5ef; border-radius: 16px; color: #44385c; background: rgba(255,255,255,.7); }
.learning-command__mistake-empty > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 12px; color: #5a9d7d; background: #e3f8ed; font-weight: 1000; }
.learning-command__mistake-empty strong, .learning-command__mistake-empty small { display: block; }
.learning-command__mistake-empty strong { font-size: 14px; }
.learning-command__mistake-empty small { margin-top: 3px; color: #817790; font-size: 12px; font-weight: 750; }
.learning-command__map { overflow: hidden; }
.learning-command__map-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.learning-command__map-header > div > span { display: block; max-width: 600px; margin-top: 7px; color: #687b93; font-size: 13px; font-weight: 750; line-height: 1.4; }
.learning-command__map-link { min-height: 38px; padding: 0 13px; border: 1px solid #c9ddf5; border-radius: 12px; color: #1767c6; background: #fff; font-size: 12px; white-space: nowrap; }
.learning-command__unit-map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.learning-command__unit { display: grid; min-height: 96px; align-content: center; justify-items: start; gap: 4px; padding: 13px; border: 1px solid #e0e9f4; border-radius: 17px; color: #345273; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.learning-command__unit > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 9px; color: #6d7f95; background: #eef3f8; font-size: 10px; font-weight: 1000; }
.learning-command__unit strong { color: #183c68; font-size: 19px; line-height: 1; }
.learning-command__unit small { color: #708198; font-size: 10px; font-weight: 900; }
.learning-command__unit--done { border-color: #aee4d2; background: #f5fff9; }
.learning-command__unit--done > span { color: #08735f; background: #ddfaee; }
.learning-command__unit--current { border: 2px solid #68a8f2; background: #eef7ff; box-shadow: 0 8px 18px rgba(31,116,212,.1); }
.learning-command__unit--current > span { color: #fff; background: #176fce; }
.learning-command__unit--later { opacity: .68; cursor: not-allowed; background: #fafcff; }
.learning-command__unit-map .learning-command__unit:nth-child(n + 7) { display: none; }
.learning-command__map.is-expanded .learning-command__unit:nth-child(n + 7) { display: grid; }
@media (max-width: 900px) {
  .learning-command__hero, .learning-command__body, .learning-command__record { grid-template-columns: 1fr; }
  .learning-command__record-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
  .learning-command__record-intro h2 { margin: 0; font-size: 21px; }
  .learning-command__unit-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .learning-command-screen { width: min(100% - 20px, 560px); margin-top: 15px; }
  .learning-command { gap: 14px; }
  .learning-command__hero, .learning-command__route, .learning-command__words, .learning-command__record, .learning-command__map { padding: 18px; border-radius: 20px; }
  .learning-command__hero h1 { font-size: 43px; }
  .learning-command__goal { font-size: 16px; }
  .learning-command__start, .learning-command__menu { flex: 1 1 100%; justify-content: space-between; }
  .learning-command__now-card { padding: 17px; }
  .learning-command__stage { grid-template-columns: 34px minmax(0, 1fr); }
  .learning-command__stage em { grid-column: 2; }
  .learning-command__recent { grid-template-columns: 42px minmax(0, 1fr); padding: 16px; }
  .learning-command__recent .secondary { grid-column: 1 / -1; width: 100%; }
  .learning-command__record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-command__record-grid article { min-height: 72px; }
  .learning-command__review { padding: 18px; border-radius: 20px; }
  .learning-command__review-heading { display: grid; }
  .learning-command__review-action { justify-self: start; }
  .learning-command__mistakes { grid-template-columns: 1fr; }
  .learning-command__map-header { display: grid; }
  .learning-command__map-link { justify-self: start; }
  .learning-command__unit-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reusable compact menu banners: white base, transparent subject art, and live copy. */
.menu-page-banner {
  --menu-banner-inline: clamp(22px, 2.25vw, 32px);
  --menu-banner-copy-width: min(47%, 520px);
  --menu-banner-art-opacity: 1;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  height: 360px;
  min-height: 360px;
  aspect-ratio: auto;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 20px var(--menu-banner-inline);
  border: 1px solid #d7e5f2;
  border-radius: 28px;
  color: #173a66;
  background: #fff;
  box-shadow: 0 18px 42px rgba(40, 76, 116, .12);
}
.menu-page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.14) 38%, transparent 59%);
}
.first-weekly-game-picker-screen .menu-page-banner--games::before {
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 39%, rgba(255,255,255,.42) 59%, rgba(255,255,255,.08) 78%, transparent 100%);
}
.menu-page-banner__object {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* A menu hero is a full-bleed stage. `contain` leaves a blank column when
     the supplied art is narrower than the shared wide banner. */
  object-fit: cover;
  object-position: center;
  opacity: var(--menu-banner-art-opacity);
  transform: none;
  pointer-events: none;
  user-select: none;
}
.menu-page-banner--weekly {
  background: #fff;
}
.menu-page-banner--weekly .menu-page-banner__copy { width: min(47%, 520px); }
.menu-page-banner--weekly .menu-page-banner__actions .primary {
  border-color: #287ed8;
  background: linear-gradient(135deg, #4ba7ff, #1e70cb);
  box-shadow: 0 11px 22px rgba(30, 112, 203, .26);
}
.weekly-art-banner {
  position: relative;
  isolation: isolate;
  height: 382px;
  min-height: 382px;
  overflow: hidden;
  margin: 0 0 20px;
  border: 1px solid #d7e5f2;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(40, 76, 116, .12);
}
.weekly-art-banner__background,
.weekly-art-banner__character,
.weekly-art-banner__copy { position: absolute; pointer-events: none; user-select: none; }
.weekly-art-banner__background { inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.weekly-art-banner__character { top: 0; right: 0; z-index: 1; width: 64%; height: 100%; object-fit: contain; object-position: right center; }
.weekly-art-banner__copy { top: 50%; left: clamp(24px, 4vw, 58px); z-index: 2; width: min(46%, 545px); height: auto; transform: translateY(-50%); }
.weekly-art-banner__actions { position: absolute; left: clamp(24px, 4vw, 58px); bottom: clamp(22px, 3vw, 34px); z-index: 3; }
.weekly-art-banner__actions .primary {
  min-height: 42px;
  border-color: #287ed8;
  background: linear-gradient(135deg, #4ba7ff, #1e70cb);
  box-shadow: 0 11px 22px rgba(30, 112, 203, .26);
}
.menu-page-banner__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  width: var(--menu-banner-copy-width);
  transform: none;
}
.menu-page-banner__eyebrow {
  margin: 0;
  color: #287ac0;
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 1000;
  letter-spacing: .11em;
}
.menu-page-banner__copy h1 {
  margin: 0;
  color: #173a66;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.menu-page-banner__copy > p:not(.menu-page-banner__eyebrow) {
  margin: 0;
  color: #5b6f86;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 800;
  line-height: 1.45;
}
.menu-page-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 7px;
}
.menu-page-banner__actions .primary,
.menu-page-banner__actions .secondary {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 14px;
  font-size: 14px;
}
.menu-page-banner__actions .primary {
  color: #fff;
  border-color: #287ed8;
  background: linear-gradient(135deg, #4ba7ff, #1e70cb);
  box-shadow: 0 11px 22px rgba(30, 112, 203, .26);
}

.menu-banner-support-card {
  display: grid;
  gap: 6px;
  padding: 22px 26px;
  border: 1px solid rgba(220, 229, 239, .95);
  border-radius: 18px;
  color: #4d5e77;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 34, 58, .07);
}
.menu-banner-support-card strong { color: #173a66; font-size: 20px; }
.menu-banner-support-card span { font-weight: 750; line-height: 1.45; }

.pronunciation-alphabet-panel {
  display: grid;
  gap: 18px;
  margin: 20px 0;
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid #dce7f3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 54, 94, .07);
}
.pronunciation-alphabet-panel__heading { display: grid; gap: 5px; }
.pronunciation-alphabet-panel__heading .eyebrow { margin: 0; }
.pronunciation-alphabet-panel__heading h2 { margin: 0; color: #173a66; font-size: clamp(24px, 3vw, 34px); }
.pronunciation-alphabet-panel__heading p:not(.eyebrow) { margin: 0; color: #63758d; font-weight: 750; }
.pronunciation-alphabet-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.pronunciation-alphabet-card {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 9px 6px;
  border: 1px solid #d6e5f5;
  border-radius: 15px;
  color: #1d5ea9;
  background: linear-gradient(180deg, #fff, #f3f8ff);
  box-shadow: 0 5px 12px rgba(31, 91, 156, .07);
}
.pronunciation-alphabet-card:hover,
.pronunciation-alphabet-card:focus-visible { border-color: #75aef2; background: #eaf4ff; transform: translateY(-2px); }
.pronunciation-alphabet-card b { font-size: clamp(23px, 2.7vw, 34px); line-height: 1; }
.pronunciation-alphabet-card span { color: #627a99; font-size: 10px; font-weight: 850; }

@media (max-width: 760px) {
  .menu-page-banner {
    height: 298px;
    min-height: 298px;
    aspect-ratio: auto;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 20px;
  }
  .menu-page-banner__object { object-fit: contain; }
  .menu-page-banner::before {
    background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 48%, rgba(255,255,255,.48) 67%, transparent 82%);
  }
  .menu-page-banner__copy { gap: 8px; width: 54%; }
  .menu-page-banner--alphabet-adventure .menu-page-banner__copy { transform: none; }
  .menu-page-banner--alphabet-adventure .menu-page-banner__object { transform: none; }
  .menu-page-banner__eyebrow { font-size: 10px; letter-spacing: .08em; }
  .menu-page-banner__copy h1 { font-size: clamp(27px, 8vw, 40px); }
  .menu-page-banner__copy > p:not(.menu-page-banner__eyebrow) { font-size: 12px; line-height: 1.35; }
  .menu-page-banner__actions { gap: 7px; margin-top: 4px; }
  .menu-page-banner__actions .primary,
  .menu-page-banner__actions .secondary { min-height: 36px; padding-inline: 10px; border-radius: 11px; font-size: 11px; }
  .weekly-art-banner { height: 342px; min-height: 342px; margin-bottom: 16px; border-radius: 20px; }
  .weekly-art-banner__character { right: -8%; width: 82%; }
  .weekly-art-banner__copy { top: 42%; left: 20px; width: 57%; transform: translateY(-50%); }
  .weekly-art-banner__actions { left: 20px; bottom: 20px; }
  .weekly-art-banner__actions .primary { min-height: 36px; padding-inline: 12px; border-radius: 11px; font-size: 11px; }
  .pronunciation-alphabet-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pronunciation-alphabet-card { min-height: 68px; }
}
@media (max-width: 460px) {
  .pronunciation-alphabet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Compact navigation keeps every primary destination reachable on small screens. */
.topbar-mobile-menu { display: none; }

@media (max-width: 960px) {
  .topbar {
    height: 76px;
    min-height: 76px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .topbar > .topbar-nav { display: none; }
  .topbar-mobile-menu {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .topbar-mobile-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid #d7e5f2;
    border-radius: 13px;
    color: #173a66;
    background: #fff;
    font-size: 12px;
    font-weight: 850;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(20, 54, 94, .08);
  }
  .topbar-mobile-menu summary::-webkit-details-marker { display: none; }
  .topbar-mobile-menu summary span { color: #287ac0; font-size: 15px; line-height: 1; }
  .topbar-mobile-menu > nav {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 40;
    display: grid;
    width: min(252px, calc(100vw - 28px));
    padding: 7px;
    border: 1px solid #d7e5f2;
    border-radius: 16px;
    overflow: visible;
    background: #fff;
    box-shadow: 0 18px 38px rgba(20, 54, 94, .16);
  }
  .topbar-mobile-menu > nav button {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    color: #274767;
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 800;
    box-shadow: none;
  }
  .topbar-mobile-menu > nav button:hover,
  .topbar-mobile-menu > nav button.active { color: #176cc0; background: #edf6ff; }
}

@media (max-width: 640px) {
  .topbar {
    height: 60px;
    min-height: 60px;
    padding: 6px max(10px, calc((100vw - var(--menu-page-width)) / 2));
  }
  .topbar-mobile-menu summary { min-height: 36px; padding-inline: 11px; font-size: 11px; }
}

/* Fixed brand slot: keep a single image rather than a course-specific logo or text. */
.brand.brand--fixed {
  display: block;
  flex: 0 0 220px;
  width: 220px;
  height: 72px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
.brand.brand--fixed > :not(.brand__logo) { display: none; }
.brand.brand--fixed .brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  /* Preserve the complete horizontal adventure logo without cropping. */
  transform: none;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 640px) {
  .brand.brand--fixed {
    flex-basis: 184px;
    width: 184px;
    height: 64px;
  }
}

/* Weekly page: replace the word-card footer with a four-course book shelf. */
.weekly-book-shelf {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(38, 76, 119, .14);
}
.weekly-book-shelf__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.weekly-book-shelf__heading .eyebrow { margin: 0 0 6px; color: #2778be; font-size: 10px; letter-spacing: .14em; }
.weekly-book-shelf__heading h2 { margin: 0; color: #172f51; font-size: clamp(23px, 3vw, 32px); letter-spacing: -.055em; line-height: 1.08; }
.weekly-book-shelf__heading > div > p:last-child { margin: 7px 0 0; color: #657992; font-size: 13px; font-weight: 700; line-height: 1.5; }
.weekly-book-shelf__count {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid #d5e4f1;
  border-radius: 999px;
  color: #2a6fae;
  background: #f2f8fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}
.weekly-book-shelf__courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.weekly-course-card {
  --weekly-accent: #2a81d0;
  --weekly-soft: #eef7ff;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--weekly-accent) 23%, #dce8f3);
  border-radius: 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--weekly-soft) 78%, white), #fff);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--weekly-accent) 9%, transparent);
}
.weekly-course-card--sky { --weekly-accent: #2e8ed6; --weekly-soft: #e9f7ff; }
.weekly-course-card--coral { --weekly-accent: #e87a60; --weekly-soft: #fff0eb; }
.weekly-course-card--violet { --weekly-accent: #7a6bd5; --weekly-soft: #f0edff; }
.weekly-course-card--mint { --weekly-accent: #29aa91; --weekly-soft: #e8fbf5; }
.weekly-course-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.weekly-course-card__heading p { margin: 0 0 3px; color: var(--weekly-accent); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.weekly-course-card__heading h3 { margin: 0; color: #203d5f; font-size: 20px; letter-spacing: -.035em; }
.weekly-course-card__heading > span {
  display: grid;
  min-width: 35px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  color: var(--weekly-accent);
  background: color-mix(in srgb, var(--weekly-accent) 11%, white);
  font-size: 11px;
  font-weight: 900;
}
.weekly-course-card__books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.weekly-book-card {
  position: relative;
  display: grid;
  grid-template-rows: 88px auto;
  min-width: 0;
  min-height: 184px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--weekly-accent) 17%, #dce8f3);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  background: #fff;
  text-align: left;
  box-shadow: 0 5px 13px rgba(31, 65, 103, .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.weekly-book-card:hover,
.weekly-book-card:focus-visible {
  z-index: 1;
  border-color: var(--weekly-accent);
  outline: 0;
  box-shadow: 0 12px 22px color-mix(in srgb, var(--weekly-accent) 22%, transparent);
  transform: translateY(-3px);
}
.weekly-book-card__cover { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--weekly-soft); }
.weekly-book-card__cover::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(17, 40, 67, .38)); content: ""; pointer-events: none; }
.weekly-book-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.weekly-book-card:hover .weekly-book-card__cover img { transform: scale(1.06); }
.weekly-book-card__cover b {
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 5px;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
}
.weekly-book-card__copy { display: grid; align-content: start; gap: 3px; padding: 8px 5px 5px; }
.weekly-book-card__copy strong { overflow: hidden; color: #263f5c; font-size: 12px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.weekly-book-card__copy em { min-height: 27px; overflow: hidden; color: var(--weekly-accent); font-size: 11px; font-style: normal; font-weight: 900; line-height: 1.2; }
.weekly-book-card__copy small { display: -webkit-box; overflow: hidden; color: #71839a; font-size: 9px; font-weight: 700; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.weekly-book-card > i {
  position: absolute;
  right: 7px;
  bottom: 6px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--weekly-accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.weekly-book-card:hover > i,
.weekly-book-card:focus-visible > i { opacity: 1; transform: translateX(0); }
@media (max-width: 960px) {
  .weekly-book-shelf__courses { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .weekly-book-shelf { margin-top: 20px; padding-top: 20px; }
  .weekly-book-shelf__heading { align-items: start; flex-direction: column; gap: 10px; }
  .weekly-book-shelf__heading h2 { font-size: 24px; }
  .weekly-book-shelf__heading > div > p:last-child { font-size: 12px; }
  .weekly-course-card { padding: 12px; border-radius: 17px; }
  .weekly-course-card__heading { margin-bottom: 9px; }
  .weekly-course-card__heading h3 { font-size: 18px; }
  .weekly-course-card__books { gap: 7px; }
  .weekly-book-card { grid-template-rows: 72px auto; min-height: 158px; border-radius: 12px; }
  .weekly-book-card__copy { gap: 2px; padding: 6px 3px 3px; }
  .weekly-book-card__copy strong { font-size: 10px; }
  .weekly-book-card__copy em { min-height: 24px; font-size: 9px; }
  .weekly-book-card__copy small { display: none; }
  .weekly-book-card__cover b { right: 4px; bottom: 4px; font-size: 7px; }
}
/* Shared Listen handoff: make the end of one word and the start of the next
   feel distinct across General Alphabet and Phonics 1??. */
#app.is-listen-word-leaving {
  animation: listen-word-page-out 420ms cubic-bezier(.35, .02, .35, 1) both;
}
.listen-word-transition {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  color: #183451;
  opacity: 0;
  pointer-events: all;
  transition: opacity 150ms ease-out;
}
.listen-word-transition.is-visible { opacity: 1; }
.listen-word-transition__wash {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--listen-transition-accent) 28%, transparent), transparent 36%),
    linear-gradient(115deg, rgba(248, 252, 255, .94), rgba(239, 248, 255, .97));
  backdrop-filter: blur(5px);
}
.listen-word-transition__wash::after {
  position: absolute;
  inset: -14% -32%;
  background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--listen-transition-accent) 22%, white) 49%, transparent 78%);
  content: "";
  transform: translateX(-36%) skewX(-16deg);
  animation: listen-word-wipe 620ms cubic-bezier(.2, .72, .3, 1) both;
}
.listen-word-transition__card {
  width: min(660px, 100%);
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid color-mix(in srgb, var(--listen-transition-accent) 26%, white);
  border-radius: 30px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--listen-transition-accent) 24%, transparent);
  text-align: center;
  transform: translateY(16px) scale(.97);
  animation: listen-word-card-in 540ms cubic-bezier(.18, .86, .28, 1) 70ms both;
}
.listen-word-transition__eyebrow {
  margin: 0 0 19px;
  color: var(--listen-transition-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.listen-word-transition__words {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 24px);
}
.listen-word-transition__word {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 18px 12px;
  border-radius: 20px;
}
.listen-word-transition__word small {
  color: #71839a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.listen-word-transition__word strong {
  overflow: hidden;
  color: #173552;
  font-size: clamp(23px, 5vw, 39px);
  letter-spacing: -.055em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listen-word-transition__word--finished {
  background: #f2f6fa;
  animation: listen-word-finished 540ms cubic-bezier(.2, .75, .25, 1) both;
}
.listen-word-transition__word--next {
  border: 1px solid color-mix(in srgb, var(--listen-transition-accent) 24%, white);
  background: color-mix(in srgb, var(--listen-transition-accent) 11%, white);
  animation: listen-word-next 510ms cubic-bezier(.18, .86, .28, 1) 150ms both;
}
.listen-word-transition__word--next strong { color: var(--listen-transition-accent); }
.listen-word-transition__arrow {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--listen-transition-accent);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--listen-transition-accent) 32%, transparent);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  animation: listen-word-arrow 500ms ease-out 105ms both;
}
@keyframes listen-word-page-out {
  to { opacity: .28; transform: translateX(-2.5%) scale(.985); }
}
@keyframes listen-word-wipe {
  from { transform: translateX(-54%) skewX(-16deg); }
  to { transform: translateX(54%) skewX(-16deg); }
}
@keyframes listen-word-card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes listen-word-finished {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes listen-word-next {
  from { opacity: 0; transform: translateX(-24px) scale(.92); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes listen-word-arrow {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 520px) {
  .listen-word-transition { padding: 16px; }
  .listen-word-transition__card { padding: 25px 15px; border-radius: 24px; }
  .listen-word-transition__words { gap: 7px; }
  .listen-word-transition__word { padding: 15px 6px; border-radius: 15px; }
  .listen-word-transition__word small { font-size: 8px; letter-spacing: .08em; }
  .listen-word-transition__arrow { width: 31px; height: 31px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #app.is-listen-word-leaving,
  .listen-word-transition__wash::after,
  .listen-word-transition__card,
  .listen-word-transition__word,
  .listen-word-transition__arrow { animation: none; }
}

/* The games area begins with a focused choice, while both game families keep
   their established screens and mechanics after the choice. */
.game-menu-hub {
  display: grid;
  gap: 18px;
  margin: 22px 0 36px;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(201,214,229,.88);
  border-radius: 26px;
  background: linear-gradient(145deg, #f8fbff, #fffaf2);
  box-shadow: 0 16px 36px rgba(20,34,58,.09);
}
.game-menu-hub__heading { max-width: 700px; }
.game-menu-hub__heading h2 { margin: 5px 0 8px; color: #173a66; font-size: clamp(27px, 3.2vw, 42px); letter-spacing: -.04em; }
.game-menu-hub__heading p:last-child { margin: 0; color: #63758d; font-weight: 750; line-height: 1.5; }
.game-menu-hub__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.game-menu-choice {
  position: relative;
  display: grid;
  min-height: 340px;
  overflow: hidden;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 23px;
  background: #dceeff;
  box-shadow: 0 12px 28px rgba(24,60,99,.14);
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-menu-choice:hover,
.game-menu-choice:focus-visible { outline: 0; transform: translateY(-5px); box-shadow: 0 20px 34px rgba(24,60,99,.22); }
.game-menu-choice:focus-visible { box-shadow: 0 0 0 4px #ffcf58, 0 20px 34px rgba(24,60,99,.22); }
.game-menu-choice::after { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(15,47,80,.05) 22%, rgba(12,37,69,.84) 100%); }
.game-menu-choice > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.game-menu-choice--repeat > img { object-position: 70% center; }
.game-menu-choice__content { position: relative; z-index: 2; display: grid; align-content: end; gap: 7px; min-height: 100%; padding: clamp(20px, 3vw, 32px); }
.game-menu-choice__content b { color: #ffe27c; font-size: 11px; font-weight: 1000; letter-spacing: .13em; }
.game-menu-choice__content strong { font-size: clamp(27px, 3vw, 40px); letter-spacing: -.045em; line-height: 1.03; }
.game-menu-choice__content small { max-width: 440px; color: rgba(255,255,255,.95); font-size: 14px; font-weight: 750; line-height: 1.45; }
.game-menu-choice__content em { margin-top: 9px; color: #fff; font-size: 13px; font-style: normal; font-weight: 1000; }
.game-menu-choice__content em i { margin-left: 5px; color: #ffe27c; font-size: 20px; font-style: normal; vertical-align: -1px; }
@media (max-width: 760px) {
  .game-menu-hub { margin-top: 16px; padding: 16px; border-radius: 21px; }
  .game-menu-hub__choices { grid-template-columns: 1fr; gap: 14px; }
  .game-menu-choice { min-height: 278px; border-radius: 19px; }
  .game-menu-choice__content { padding: 21px; }
}

/* General Games mirrors the Repeat selector: choose a course first, then
   browse that course's existing unit-by-unit game backgrounds. */
.general-game-course-hub {
  display: grid;
  gap: 18px;
  margin: 20px 0 34px;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid #dce8f3;
  border-radius: 24px;
  background: linear-gradient(145deg, #f7fbff, #fffaf2);
  box-shadow: 0 15px 34px rgba(29,72,109,.08);
}
.general-game-course-hub > header { max-width: 720px; }
.general-game-course-hub h2 { margin: 4px 0 8px; color: #173a66; font-size: clamp(27px, 3vw, 40px); letter-spacing: -.04em; }
.general-game-course-hub > header > p:last-child { margin: 0; color: #61758a; font-weight: 750; line-height: 1.5; }
.general-game-course-hub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.general-game-channel {
  position: relative;
  display: grid;
  min-height: 260px;
  overflow: hidden;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #dbeefd;
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  box-shadow: 0 11px 24px rgba(30,70,104,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.general-game-channel:hover,
.general-game-channel:focus-visible { outline: 0; transform: translateY(-4px); box-shadow: 0 18px 30px rgba(30,70,104,.22); }
.general-game-channel:focus-visible { box-shadow: 0 0 0 4px #ffd15b, 0 18px 30px rgba(30,70,104,.22); }
.general-game-channel__art { position: absolute; z-index: 0; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.game-course-card--character .general-game-channel__art { background-position: right 5% bottom, center; background-size: auto 96%, cover; }
.general-game-channel::after { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(18,54,88,.08) 20%, rgba(9,34,65,.87) 100%); }
.general-game-channel__copy { position: relative; z-index: 2; display: grid; align-content: end; gap: 6px; min-height: 100%; padding: 22px; }
.general-game-channel__copy b { color: #ffe37a; font-size: 10px; font-weight: 1000; letter-spacing: .12em; }
.general-game-channel__copy strong { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.04em; }
.general-game-channel__copy small { color: rgba(255,255,255,.95); font-size: 12px; font-weight: 750; line-height: 1.4; }
.general-game-channel__copy em { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; color: #fff; font-size: 11px; font-style: normal; font-weight: 900; }
.general-game-channel__copy em i { color: #ffe37a; font-size: 19px; font-style: normal; }
.shared-course-selection-hub .general-game-channel { height: 260px; min-height: 260px; }
@media (max-width: 720px) {
  .general-game-course-hub { margin-top: 16px; padding: 16px; border-radius: 20px; }
  .general-game-course-hub__grid { grid-template-columns: 1fr; gap: 12px; }
  .general-game-channel { min-height: 235px; border-radius: 17px; }
  .shared-course-selection-hub .general-game-channel { height: 235px; min-height: 235px; }
  .game-course-card--character .general-game-channel__art { background-position: right 2% bottom, center; background-size: auto 92%, cover; }
}

/* Lesson navigation starts by separating the General course journey from the
   standalone Repeat review journey.  Both cards keep the established game
   selector proportions so the two areas read as parallel learning paths. */
.lesson-menu-choice--general > img { object-position: center; }
.lesson-menu-choice--repeat > img { object-position: 64% center; }
.general-lesson-course-hub .general-game-channel { cursor: pointer; }
.lesson-sound-menu {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 36px;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(201,214,229,.9);
  border-radius: 26px;
  background: linear-gradient(145deg, #f8fbff, #fffaf2);
  box-shadow: 0 16px 36px rgba(20,34,58,.09);
  box-sizing: border-box;
}
.lesson-sound-menu__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.lesson-sound-menu__heading > div:first-child { max-width: 720px; }
.lesson-sound-menu__heading h2 { margin: 5px 0 8px; color: #173a66; font-size: clamp(27px, 3.2vw, 42px); letter-spacing: -.04em; }
.lesson-sound-menu__heading p:last-child { margin: 0; color: #63758d; font-weight: 750; line-height: 1.5; }
.lesson-sound-menu__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lesson-sound-menu__actions button { white-space: nowrap; }
.lesson-sound-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lesson-sound-card {
  display: grid;
  gap: 7px;
  min-height: 176px;
  padding: 20px;
  border: 1px solid #c9dbe9;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #eff8ff);
  color: #173a66;
  text-align: left;
  box-shadow: 0 8px 18px rgba(20,59,98,.08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lesson-sound-card:hover,
.lesson-sound-card:focus-visible { outline: 0; transform: translateY(-3px); border-color: #53addb; box-shadow: 0 14px 24px rgba(20,59,98,.15); }
.lesson-sound-card:focus-visible { box-shadow: 0 0 0 4px #ffcf58, 0 14px 24px rgba(20,59,98,.15); }
.lesson-sound-card__unit { color: #287ac0; font-size: 11px; font-weight: 1000; letter-spacing: .11em; }
.lesson-sound-card strong { color: #173a66; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.04; letter-spacing: -.035em; }
.lesson-sound-card small { min-height: 20px; color: #63758d; font-size: 13px; font-weight: 800; line-height: 1.35; }
.lesson-sound-card em { align-self: end; margin-top: 4px; color: #287ac0; font-size: 13px; font-style: normal; font-weight: 1000; }
.lesson-sound-card em i { margin-left: 4px; color: #f0aa2f; font-size: 18px; font-style: normal; vertical-align: -1px; }
@media (max-width: 900px) { .lesson-sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .lesson-sound-menu { width: min(100% - 20px, 1180px); margin-top: 16px; padding: 16px; border-radius: 21px; }
  .lesson-sound-menu__heading { display: grid; margin-bottom: 16px; }
  .lesson-sound-menu__actions { justify-content: flex-start; }
  .lesson-sound-grid { grid-template-columns: 1fr; gap: 12px; }
  .lesson-sound-card { min-height: 150px; padding: 18px; }
}
/* Storybook lesson refresh: a calm white canvas with visual-only controls. */
.learning-screen {
  padding: clamp(14px, 2.8vw, 34px);
  background:
    radial-gradient(circle at 0 0, rgba(244, 208, 111, .18), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(89, 198, 205, .12), transparent 28%),
    #f7fbff;
}

.learning-screen .lesson-shell {
  width: min(100%, 1180px);
  min-width: 0;
  margin: 0 auto;
  grid-template-columns: 128px minmax(0, 1fr);
  overflow: visible;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: 0 18px 44px rgba(22, 55, 86, .12);
}

.learning-screen .step-rail {
  min-width: 0;
  padding: 18px 12px;
  border: 0;
  border-radius: 30px 0 0 30px;
  background: linear-gradient(180deg, rgba(239, 248, 253, .98), rgba(230, 242, 250, .98));
}

.learning-screen .step-rail button {
  min-height: 72px;
  padding: 9px 6px;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(155, 190, 214, .52);
  border-radius: 16px;
  color: #173b5a;
  background: #fff;
  font-size: 13px;
}

.learning-screen .step-rail button b {
  width: 27px;
  height: 27px;
  background: #eef6fb;
  color: #173b5a;
}

.learning-screen .step-rail button.current {
  background: linear-gradient(135deg, #1769b4, #23b7a0);
  color: #fff;
}

.learning-screen .step-rail button.current b {
  color: #1769b4;
  background: #fff;
}

.learning-screen .lesson-card {
  min-width: 0;
  padding: clamp(22px, 3.6vw, 42px);
  border-radius: 0 30px 30px 0;
  background-color: #fff;
  background-image: url("../assets/ui/lesson-storybook/lesson-white-frame-v1.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.learning-screen .lesson-top {
  gap: 18px;
  margin: 0 0 20px;
}

.learning-screen .lesson-top-title {
  margin: 0;
  color: #173b5a;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 950;
}

.learning-screen .lesson-meter {
  margin-left: auto;
  width: min(196px, 42vw);
  height: 24px;
}

.learning-screen .lesson-activity {
  position: relative;
  min-width: 0;
}

.learning-screen .lesson-object-action {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.learning-screen .lesson-object-action img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.learning-screen .lesson-object-action--listen {
  width: clamp(48px, 6vw, 72px);
  aspect-ratio: 1;
}

.learning-screen .lesson-activity > .lesson-object-action--listen {
  position: absolute;
  z-index: 5;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
}

.learning-screen .alphabet-learn-grid {
  min-height: clamp(360px, 46vw, 500px);
  gap: clamp(18px, 4vw, 44px);
}

.learning-screen .alphabet-learn-grid .word-art {
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid rgba(203, 223, 235, .9);
  box-shadow: none;
}

.learning-screen .alphabet-learn-grid .lesson-focus {
  display: grid;
  align-content: center;
  min-height: 100%;
}

.learning-screen .alphabet-learn-grid .lesson-focus h1 {
  margin: 0;
  color: #162743;
  font-size: clamp(50px, 7vw, 88px);
  letter-spacing: -.055em;
}

.learning-screen .alphabet-learn-grid .phonics-box,
.learning-screen .alphabet-learn-grid .lesson-focus p {
  display: none;
}

.learning-screen .lesson-flow-pager {
  min-height: 70px;
  margin-top: 22px;
}

.learning-screen .lesson-nav-button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 8px;
  border: 0;
  color: #173b5a;
  background: transparent;
  box-shadow: none;
  font-weight: 950;
}

.learning-screen .lesson-nav-button img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.learning-screen .lesson-nav-button--next {
  margin-left: auto;
  flex-direction: row-reverse;
}

.learning-screen .lesson-nav-button:hover {
  transform: translateY(-2px);
}

.learning-screen .lesson-listen-focus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 0;
  margin-bottom: 8px;
}

.learning-screen .lesson-sound-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #ffc9c7;
  border-radius: 50%;
  color: #e9545c;
  background: #fff6f5;
  font-size: 24px;
}

.learning-screen .alphabet-listen-view .sound-lab-stage {
  min-height: clamp(390px, 48vw, 530px);
  border: 1px solid rgba(189, 214, 231, .8);
  background: #fff;
  box-shadow: none;
}

.learning-screen .alphabet-listen-view .sound-lab-word-picture {
  background: #fff;
  border: 1px solid rgba(203, 224, 237, .8);
  box-shadow: none;
}

.learning-screen .alphabet-listen-view .sound-block {
  width: clamp(58px, 8vw, 88px);
  height: clamp(66px, 9vw, 98px);
}

.learning-screen .alphabet-listen-view .sound-block span {
  display: none;
}

.learning-screen .sound-lab-feedback.lesson-guidance,
.learning-screen .lesson-guidance {
  margin: 12px 0 0;
  padding: 11px 16px;
  min-height: 0;
  border: 1px solid #f0cf76;
  border-radius: 14px;
  color: #485e76;
  background: #fff9e8;
  font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 850;
  text-align: center;
}

.learning-screen .alphabet-speak-screen-view .say-coach-title > span,
.learning-screen .alphabet-speak-screen-view .say-title-verb,
.learning-screen .alphabet-speak-screen-view .say-title-space {
  display: none;
}

.learning-screen .alphabet-speak-screen-view .say-coach-title h1 {
  margin: 0;
}

.learning-screen .alphabet-speak-screen-view .say-coach-phonemes em,
.learning-screen .alphabet-speak-screen-view .say-coach-phonemes small {
  display: none;
}

.learning-screen .alphabet-check-view {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: clamp(390px, 48vw, 520px);
}

.learning-screen .alphabet-check-view h1 {
  margin: 0;
  color: #162743;
  font-size: clamp(48px, 7vw, 82px);
}

.learning-screen .alphabet-check-view .task-feedback:empty {
  display: none;
}

@media (max-width: 1050px) {
  .learning-screen {
    padding: 14px;
  }

  .learning-screen .lesson-shell {
    grid-template-columns: 1fr;
    box-shadow: none;
  }

  .learning-screen .step-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
    border-radius: 26px 26px 0 0;
  }

  .learning-screen .step-rail button {
    min-height: 58px;
    flex-direction: row;
    font-size: 12px;
  }

  .learning-screen .lesson-card {
    border-radius: 0 0 26px 26px;
    padding: clamp(18px, 3vw, 32px);
  }

  .learning-screen .alphabet-learn-grid {
    min-height: 390px;
  }
}

@media (max-width: 640px) {
  .learning-screen .step-rail button span,
  .learning-screen .lesson-nav-button span {
    display: none;
  }

  .learning-screen .lesson-card {
    background-size: auto 100%;
  }

  .learning-screen .alphabet-learn-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .learning-screen .alphabet-learn-grid .word-art {
    width: min(280px, 100%);
    justify-self: center;
  }

  .learning-screen .alphabet-learn-grid .lesson-focus {
    min-height: auto;
    text-align: center;
  }

  .learning-screen .lesson-flow-pager {
    gap: 0;
  }

  .learning-screen .lesson-nav-button img {
    width: 50px;
    height: 50px;
  }

  .learning-screen .alphabet-listen-view .sound-lab-stage {
    min-height: 350px;
  }
}
/* The shared lesson-flow sheet loads after this file. Keep the Alphabet
   story lesson intentionally stronger so its white, distraction-free canvas
   cannot be replaced by the older blue lesson card. */
#app main.learning-screen[data-publication="alphabet"] .lesson-shell {
  width: min(100%, 1180px);
  grid-template-columns: 128px minmax(0, 1fr);
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: 0 18px 44px rgba(22, 55, 86, .12);
}

#app main.learning-screen[data-publication="alphabet"] .step-rail {
  display: grid;
  min-width: 0;
  padding: 18px 12px;
  border: 0;
  border-radius: 30px 0 0 30px;
  background: linear-gradient(180deg, rgba(239, 248, 253, .98), rgba(230, 242, 250, .98));
}

#app main.learning-screen[data-publication="alphabet"] .step-rail button {
  min-height: 72px;
  padding: 9px 6px;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(155, 190, 214, .52);
  border-radius: 16px;
  color: #173b5a;
  background: #fff;
  font-size: 13px;
}

#app main.learning-screen[data-publication="alphabet"] .step-rail button b {
  width: 27px;
  height: 27px;
  color: #173b5a;
  background: #eef6fb;
}

#app main.learning-screen[data-publication="alphabet"] .step-rail button.current {
  color: #fff;
  background: linear-gradient(135deg, #1769b4, #23b7a0);
}

#app main.learning-screen[data-publication="alphabet"] .step-rail button.current b {
  color: #1769b4;
  background: #fff;
}

#app main.learning-screen[data-publication="alphabet"] .lesson-card {
  min-width: 0;
  padding: clamp(22px, 3.6vw, 42px);
  border: 0;
  border-radius: 0 30px 30px 0;
  background-color: #fff;
  background-image: url("../assets/ui/lesson-storybook/lesson-white-frame-v1.webp") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

#app main.learning-screen[data-publication="alphabet"] .lesson-top {
  gap: 18px;
  margin: 0 0 20px;
}

#app main.learning-screen[data-publication="alphabet"] .lesson-top-title {
  margin: 0;
  color: #173b5a;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 950;
}

#app main.learning-screen[data-publication="alphabet"] .lesson-meter {
  width: min(196px, 42vw);
  height: 24px;
  margin-left: auto;
}

#app main.learning-screen[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title > span,
#app main.learning-screen[data-publication="alphabet"] .alphabet-speak-screen-view .say-title-verb,
#app main.learning-screen[data-publication="alphabet"] .alphabet-speak-screen-view .say-title-space {
  display: none !important;
}

@media (max-width: 1050px) {
  #app main.learning-screen[data-publication="alphabet"] .lesson-shell {
    grid-template-columns: 1fr;
    box-shadow: none;
  }

  #app main.learning-screen[data-publication="alphabet"] .step-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px;
    border-radius: 26px 26px 0 0;
  }

  #app main.learning-screen[data-publication="alphabet"] .step-rail button {
    min-height: 58px;
    flex-direction: row;
    font-size: 12px;
  }

  #app main.learning-screen[data-publication="alphabet"] .lesson-card {
    padding: clamp(18px, 3vw, 32px);
    border-radius: 0 0 26px 26px;
  }
}

/* Home stays a launchpad: resume one saved activity or choose a media path.
   The activity choices themselves live inside each selected unit. */
.home-launchpad {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
  gap: 14px;
  margin: 14px 0 18px;
}

.home-resume-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, .38fr);
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid #cfe0f5;
  border-radius: 22px;
  background: linear-gradient(135deg, #eff8ff 0%, #fff 62%, #fff8df 100%);
  box-shadow: 0 10px 24px rgba(35, 80, 132, .08);
}

.home-resume-card h2 {
  margin: 4px 0 6px;
  color: #173a66;
  font-size: clamp(22px, 2.25vw, 30px);
  letter-spacing: -.035em;
}

.home-resume-card__copy > p:not(.eyebrow) {
  margin: 0;
  color: #63758d;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.42;
}

.home-resume-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.home-resume-card__actions button { min-height: 36px; padding-inline: 12px; font-size: 12px; }

.home-resume-card__progress {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 13px 14px;
  border: 1px solid rgba(111, 159, 214, .28);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
}

.home-resume-card__progress > span { color: #52779f; font-size: 10px; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.home-resume-card__progress > strong { color: #1c67bd; font-size: 28px; line-height: 1; }
.home-resume-card__progress > div { height: 7px; overflow: hidden; border-radius: 999px; background: #dce9f7; }
.home-resume-card__progress > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d82de, #37bea9); }
.home-resume-card__progress > small { color: #63758d; font-size: 10px; font-weight: 850; line-height: 1.3; }

.home-activity-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-activity-shortcut,
.unit-activity-choice {
  appearance: none;
  width: 100%;
  border: 1px solid #d7e4f1;
  color: #173a66;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.home-activity-shortcut {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border-radius: 17px;
}

.home-activity-shortcut:hover,
.home-activity-shortcut:focus-visible,
.unit-activity-choice:hover,
.unit-activity-choice:focus-visible {
  outline: 0;
  transform: translateY(-2px);
  border-color: #6fa9e5;
  box-shadow: 0 11px 22px rgba(31, 83, 142, .13);
}

.home-activity-shortcut__icon,
.unit-activity-choice__icon {
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #2677d8, #3fc5ac);
  font-weight: 1000;
}

.home-activity-shortcut__icon { width: 31px; height: 31px; font-size: 15px; }
.home-activity-shortcut > span:not(.home-activity-shortcut__icon) { display: grid; gap: 2px; min-width: 0; }
.home-activity-shortcut b { color: #173a66; font-size: 13px; line-height: 1.1; }
.home-activity-shortcut small { color: #6b809a; font-size: 10px; font-weight: 750; line-height: 1.25; }
.home-activity-shortcut > i,
.unit-activity-choice > i { color: #2e7dd3; font-size: 18px; font-style: normal; font-weight: 950; }
.home-activity-shortcut--game .home-activity-shortcut__icon { background: linear-gradient(135deg, #ec9a29, #f7c94a); }
.home-activity-shortcut--story .home-activity-shortcut__icon { background: linear-gradient(135deg, #d95c92, #8b73d6); }
.home-activity-shortcut--practice .home-activity-shortcut__icon { background: linear-gradient(135deg, #45a379, #78c99d); }

/* A unit offers its four destinations before the detailed lesson-flow cards. */
.unit-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 17px;
}

.unit-activity-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 15px;
}

.unit-activity-choice__icon { width: 34px; height: 34px; font-size: 13px; }
.unit-activity-choice > span:not(.unit-activity-choice__icon) { display: grid; gap: 2px; min-width: 0; }
.unit-activity-choice small { color: #63809f; font-size: 10px; font-weight: 950; letter-spacing: .055em; text-transform: uppercase; }
.unit-activity-choice b { overflow: hidden; color: #173a66; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.unit-activity-choice--lesson { border-color: #96c4f3; background: linear-gradient(135deg, #edf7ff, #fff); }
.unit-activity-choice--game { border-color: #f1d183; background: linear-gradient(135deg, #fff9e8, #fff); }
.unit-activity-choice--game .unit-activity-choice__icon { background: linear-gradient(135deg, #e69b2a, #f7c84c); }
.unit-activity-choice--story { border-color: #e4b1cb; background: linear-gradient(135deg, #fff1f7, #fff); }
.unit-activity-choice--story .unit-activity-choice__icon { background: linear-gradient(135deg, #d75890, #9578d4); }
.unit-activity-choice--practice { border-color: #9ed7bb; background: linear-gradient(135deg, #effcf5, #fff); }
.unit-activity-choice--practice .unit-activity-choice__icon { background: linear-gradient(135deg, #43a176, #73c59c); }
.unit-activity-choice.is-unavailable { cursor: not-allowed; opacity: .58; }
.unit-activity-choice.is-unavailable:hover { transform: none; border-color: #d7e4f1; box-shadow: none; }
.unit-actions--extras { margin-top: 10px !important; }

@media (max-width: 900px) {
  .home-launchpad { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-launchpad { margin-top: 12px; }
  .home-resume-card { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .home-resume-card__progress { grid-template-columns: auto auto 1fr; align-items: center; }
  .home-resume-card__progress > div { grid-column: 1 / -1; }
  .home-resume-card__progress > small { grid-column: 1 / -1; }
  .home-activity-shortcut { min-height: 70px; padding: 10px; }
  .home-activity-shortcut small { display: none; }
  .unit-activity-grid { gap: 8px; }
  .unit-activity-choice { grid-template-columns: 31px minmax(0, 1fr) auto; min-height: 60px; padding: 9px; }
  .unit-activity-choice__icon { width: 31px; height: 31px; }
}
/* Game paths are deliberately different at the first decision point:
   General is fresh blue-green exploration, Repeat is violet-gold recall. */
#app main.game-menu-hub-screen {
  max-width: none;
  padding: clamp(26px, 4vw, 56px);
  background:
    radial-gradient(circle at 6% 4%, rgba(119, 219, 211, .22), transparent 26%),
    linear-gradient(135deg, #f1fbfd, #f7f9ff 56%, #fff7e8);
}

.game-path-identity-hub {
  max-width: min(1280px, 100%);
  margin: auto;
}

.game-path-identity-hub .game-path-card {
  isolation: isolate;
  min-height: 340px;
  border: 1px solid rgba(37, 74, 117, .13);
}

/* Keep the supplied game-path artwork unfiltered. */
.game-path-identity-hub .game-path-card > img {
  transform: scale(1.018);
}

.game-path-identity-hub .game-path-card--general {
  box-shadow: 0 18px 36px rgba(31, 96, 128, .2);
}

.game-path-identity-hub .game-path-card--general::after {
  background: linear-gradient(180deg, rgba(7, 61, 99, .06) 18%, rgba(8, 55, 85, .89) 100%);
}

.game-path-identity-hub .game-path-card--general .game-menu-choice__content b,
.game-path-identity-hub .game-path-card--general .game-menu-choice__content em i {
  color: #8cf1d5;
}

.game-path-identity-hub .game-path-card--repeat {
  box-shadow: 0 18px 36px rgba(95, 66, 137, .21);
}

.game-path-identity-hub .game-path-card--repeat::after {
  background: linear-gradient(180deg, rgba(78, 42, 115, .06) 18%, rgba(62, 37, 102, .91) 100%);
}

.game-path-identity-hub .game-path-card--repeat .game-menu-choice__content b,
.game-path-identity-hub .game-path-card--repeat .game-menu-choice__content em i {
  color: #ffd98a;
}

.game-path-identity-hub .game-path-card--general:hover,
.game-path-identity-hub .game-path-card--repeat:hover {
  transform: translateY(-7px);
}

@media (max-width: 760px) {
  #app main.game-menu-hub-screen {
    padding: 16px;
  }

  .game-path-identity-hub .game-path-card {
    min-height: 270px;
  }
}

/* Lesson paths use clean white illustration fields.  The artwork keeps the
   learner and learning materials on the right, while copy stays readable in
   the deliberately open white area on the left. */
.lesson-menu-hub .game-menu-choice,
.general-lesson-course-hub .general-game-channel {
  border-color: #d3e1ed;
  background: #fff;
  color: #173a66;
  box-shadow: 0 12px 28px rgba(31, 75, 112, .12);
}

.lesson-menu-hub .game-menu-choice::after,
.general-lesson-course-hub .general-game-channel::after {
  background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 48%, rgba(255,255,255,.5) 76%, rgba(255,255,255,.06) 100%);
}

.lesson-menu-hub .game-menu-choice__content {
  width: min(58%, 420px);
  align-content: center;
  padding: clamp(22px, 3vw, 34px);
}

.general-lesson-course-hub .general-game-channel__copy {
  width: min(63%, 340px);
  align-content: center;
  padding: clamp(18px, 2.4vw, 26px);
}

.lesson-menu-hub .game-menu-choice__content b,
.general-lesson-course-hub .general-game-channel__copy b {
  color: #2183c6;
}

.lesson-menu-hub .game-menu-choice__content strong,
.general-lesson-course-hub .general-game-channel__copy strong {
  color: #173a66;
}

.lesson-menu-hub .game-menu-choice__content small,
.general-lesson-course-hub .general-game-channel__copy small {
  color: #5c728a;
}

.lesson-menu-hub .game-menu-choice__content em,
.general-lesson-course-hub .general-game-channel__copy em {
  color: #1f75b7;
}

.lesson-menu-hub .game-menu-choice__content em i,
.general-lesson-course-hub .general-game-channel__copy em i {
  color: #f0a521;
}

/* Home starts with a two-path choice.  The banner and all ten course cards
   use the supplied Phonics 2 and 3 character illustrations, while the copy
   remains in the deliberately open left side of every card. */
.home-course-path-screen .menu-page-banner--alphabet-adventure .menu-page-banner__object {
  object-fit: cover;
  object-position: center;
}

.home-course-path-hub .home-course-path-card > img {
  object-fit: cover;
  object-position: right center;
}

.home-course-path-hub .home-course-path-card--first-weekly > img {
  object-position: right 62%;
}

#app .home-course-path-hub .game-menu-hub__choices {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#app .home-course-path-hub .game-menu-choice__content strong {
  font-size: clamp(24px, 2.35vw, 32px) !important;
}

.home-course-path-hub .home-course-path-card--two-thousand {
  min-height: 340px;
  border-color: #ffffff;
  background: radial-gradient(circle at 17% 14%, rgba(255, 236, 154, .92) 0 10%, transparent 10.4%), radial-gradient(circle at 86% 18%, rgba(176, 239, 238, .96) 0 15%, transparent 15.4%), linear-gradient(145deg, #f3fbff, #d9f3ee 55%, #fef4cf);
}

.home-course-path-hub .home-course-path-card--two-thousand::after {
  background: linear-gradient(180deg, rgba(15, 47, 80, .02) 18%, rgba(12, 57, 80, .8) 100%);
}

.two-thousand-home-card__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
}

.two-thousand-home-card__art::before,
.two-thousand-home-card__art::after {
  position: absolute;
  content: "";
  border-radius: 999px;
}

.two-thousand-home-card__art::before {
  width: 210px;
  height: 210px;
  top: -74px;
  right: -44px;
  border: 15px solid rgba(255, 255, 255, .5);
}

.two-thousand-home-card__art::after {
  width: 250px;
  height: 250px;
  bottom: -162px;
  left: -92px;
  background: rgba(36, 148, 157, .13);
}

.two-thousand-home-card__art i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 4px solid rgba(255, 255, 255, .83);
  border-radius: 28px;
  box-shadow: 0 12px 22px rgba(20, 74, 93, .16);
  color: #176977;
  background: #ffffff;
  font-family: Georgia, serif;
  font-size: 52px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.two-thousand-home-card__art i:nth-child(1) { top: 42px; left: 15%; transform: rotate(-11deg); color: #e27c43; }
.two-thousand-home-card__art i:nth-child(2) { top: 76px; right: 18%; transform: rotate(8deg); color: #247c91; }
.two-thousand-home-card__art i:nth-child(3) { top: 144px; left: 43%; transform: rotate(-4deg); color: #458c61; }
.two-thousand-home-card__art em { position: absolute; top: 38px; left: 49%; color: #efad38; font-size: 32px; font-style: normal; }

@media (max-width: 1050px) {
  #app .home-course-path-hub .game-menu-hub__choices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  #app .home-course-path-hub .game-menu-hub__choices { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  .lesson-menu-hub .game-menu-choice__content,
  .general-lesson-course-hub .general-game-channel__copy {
    width: min(68%, 360px);
  }

  .home-course-path-screen .menu-page-banner--alphabet-adventure .menu-page-banner__object {
    object-fit: contain;
    object-position: right center;
  }

}

/* Commercial My Page: compact learner home rather than a report dashboard. */
.commercial-my-page-screen { width: min(1240px, calc(100vw - 32px)); margin-top: 24px; }
.commercial-my-page { display: grid; gap: 20px; padding-bottom: 54px; color: #173a61; }

.commercial-my-page__hero {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(330px, .87fr); gap: clamp(28px, 5vw, 70px); height: clamp(292px, 22vw, 340px); min-height: 292px; overflow: hidden;
  padding: 22px clamp(24px, 3vw, 46px); border: 1px solid #d5e6f2; border-radius: 26px;
  background: radial-gradient(circle at 4% 112%, rgba(251,188,107,.23) 0 16%, transparent 16.3%), radial-gradient(circle at 63% -18%, rgba(60,186,193,.12) 0 27%, transparent 27.3%), linear-gradient(135deg, #fdfaf3 0%, #f6fbfb 54%, #edf7fb 100%);
  box-shadow: 0 22px 48px rgba(27,72,101,.11);
}
.commercial-my-page__hero::before, .commercial-my-page__hero::after { position: absolute; z-index: -1; content: ""; border: 1px solid rgba(42,137,160,.12); border-radius: 999px; }
.commercial-my-page__hero::before { width: 360px; height: 360px; right: -162px; bottom: -210px; }
.commercial-my-page__hero::after { width: 230px; height: 230px; left: 43%; top: -174px; }
.commercial-my-page__hero-copy { align-self: center; max-width: 610px; }
.commercial-my-page__eyebrow, .commercial-my-page__section-title p, .commercial-my-page__passport > div > p, .commercial-my-page__review-copy > p { margin: 0; color: #368392; font-size: 11px; font-weight: 1000; letter-spacing: .11em; }
.commercial-my-page__hero h1 { margin: 0; color: #163957; font-size: clamp(38px, 4.45vw, 60px); line-height: 1.08; letter-spacing: -.065em; }
.commercial-my-page__hero h1 em { color: #1c9b91; font-style: normal; }
.commercial-my-page__intro { max-width: 520px; margin: 18px 0 25px; color: #57728a; font-size: 16px; font-weight: 750; line-height: 1.65; }
.commercial-my-page__intro strong { color: #197e9e; }
.commercial-my-page__hero-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; color: #688098; font-size: 12px; font-weight: 800; }
.commercial-my-page__hero-summary strong { color: #1a486c; font-size: 13px; }
.commercial-my-page__hero-summary i { width: 1px; height: 16px; margin: 0 5px; background: #ccdbe6; }

.commercial-my-page__mission { display: grid; align-self: end; align-content: start; gap: 6px; min-height: 0; height: 100%; padding: 18px; border: 1px solid rgba(19,73,109,.08); border-radius: 24px; color: #fff; background: linear-gradient(150deg, #154e76 0%, #147e8b 100%); box-shadow: 0 20px 34px rgba(22,95,113,.2); }
.commercial-my-page__mission-top { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 900; }
.commercial-my-page__mission-top b { display: grid; min-width: 45px; min-height: 27px; place-items: center; padding: 0 9px; border-radius: 999px; color: #1a556d; background: #e6faee; font-size: 11px; }
.commercial-my-page__letter-row { display: flex; gap: 7px; margin: 10px 0 4px; }
.commercial-my-page__letter-tile { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; font-size: 22px; font-weight: 1000; line-height: 1; transform: rotate(-5deg); }
.commercial-my-page__letter-tile--1 { color: #174f79; background: #ffe09c; }
.commercial-my-page__letter-tile--2 { color: #164f70; background: #bfeef0; transform: rotate(4deg); }
.commercial-my-page__letter-tile--3 { color: #5a4777; background: #eadbff; transform: rotate(-2deg); }
.commercial-my-page__mission-action { display: grid; gap: 6px; margin-top: auto; }
.commercial-my-page__mission-action > p { margin: 0; color: #a8e7e3; font-size: 11px; font-weight: 1000; letter-spacing: .06em; }
.commercial-my-page__mission-action > strong { font-size: 25px; line-height: 1.16; letter-spacing: -.035em; }
.commercial-my-page__mission-action > small { min-height: 0; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 750; line-height: 1.42; }
.commercial-my-page__mission-action button { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; margin-top: 2px; padding: 0 11px 0 18px; border: 0; border-radius: 15px; color: #134f67; background: #fff; box-shadow: 0 10px 19px rgba(0,39,67,.18); font: inherit; font-size: 14px; font-weight: 1000; cursor: pointer; }
.commercial-my-page__mission button b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 11px; color: #fff; background: #f19b54; font-size: 19px; }
.commercial-my-page__progress { height: 6px; overflow: hidden; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.24); }
.commercial-my-page__progress i { display: block; height: 100%; border-radius: inherit; background: #ffe49a; }

.commercial-my-page__main-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.commercial-my-page__journey, .commercial-my-page__passport, .commercial-my-page__word-bank, .commercial-my-page__review, .commercial-my-page__course { border: 1px solid #e0eaf1; border-radius: 24px; background: #fff; box-shadow: 0 12px 28px rgba(31,75,101,.06); }
.commercial-my-page__journey { padding: 25px; }
.commercial-my-page__section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.commercial-my-page__section-title h2, .commercial-my-page__passport h2, .commercial-my-page__review h2 { margin: 6px 0 0; color: #183d60; font-size: 24px; line-height: 1.18; letter-spacing: -.03em; }
.commercial-my-page__section-title > span { display: grid; min-height: 28px; place-items: center; padding: 0 10px; border-radius: 999px; color: #207a8c; background: #e4f6f3; font-size: 11px; font-weight: 1000; white-space: nowrap; }
.commercial-my-page__journey ol { display: grid; gap: 7px; margin: 19px 0 0; padding: 0; list-style: none; }
.commercial-my-page__step { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 61px; padding: 10px 12px; border: 1px solid #e8eef3; border-radius: 15px; background: #fbfcfd; }
.commercial-my-page__step-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; color: #69819a; background: #edf2f6; font-size: 13px; font-weight: 1000; }
.commercial-my-page__step strong, .commercial-my-page__step small { display: block; }
.commercial-my-page__step strong { color: #254763; font-size: 14px; }
.commercial-my-page__step small { margin-top: 3px; color: #74889b; font-size: 11px; font-weight: 750; }
.commercial-my-page__step em { color: #8493a2; font-size: 11px; font-style: normal; font-weight: 1000; white-space: nowrap; }
.commercial-my-page__step--complete { border-color: #bae7d5; background: #f1fcf7; }
.commercial-my-page__step--complete .commercial-my-page__step-index { color: #087a65; background: #d9f7ea; }
.commercial-my-page__step--complete em { color: #087a65; }
.commercial-my-page__step--current { border: 2px solid #77c5d0; background: #eefbfc; box-shadow: 0 7px 15px rgba(27,138,148,.08); }
.commercial-my-page__step--current .commercial-my-page__step-index { color: #fff; background: #167e8b; }
.commercial-my-page__step--current em { color: #167e8b; }
.commercial-my-page__step--ready { border-color: #c7e6e6; background: #f7fcfc; }
.commercial-my-page__step--ready .commercial-my-page__step-index { color: #277b85; background: #e4f7f5; }
.commercial-my-page__step--ready em { color: #377884; }
.commercial-my-page__journey-note { margin: 15px 0 0; color: #6c8398; font-size: 12px; font-weight: 800; }
.commercial-my-page__journey-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.commercial-my-page__journey-meta > div { min-width: 0; padding: 10px 11px; border: 1px solid #e3edf2; border-radius: 13px; background: #f9fcfd; }
.commercial-my-page__journey-meta dt { margin: 0; color: #73899b; font-size: 10px; font-weight: 900; }
.commercial-my-page__journey-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #254763; font-size: 11px; font-weight: 1000; line-height: 1.35; }
.commercial-my-page__journey-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; }
.commercial-my-page__journey-footer p { margin: 0; color: #6c8398; font-size: 11px; font-weight: 800; line-height: 1.45; }
.commercial-my-page__journey-footer button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px 0 13px; border: 0; border-radius: 12px; color: #fff; background: #167e8b; font: inherit; font-size: 12px; font-weight: 1000; cursor: pointer; }
.commercial-my-page__journey-footer button b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 8px; color: #167e8b; background: #d9f7f3; font-size: 14px; }
.commercial-my-page__journey--practice { border-color: #eadff6; background: linear-gradient(145deg, #fff, #fcf9ff); }
.commercial-my-page__journey--practice .commercial-my-page__section-title p { color: #8565a7; }
.commercial-my-page__journey--practice .commercial-my-page__section-title > span { color: #755593; background: #eee7fa; }
.commercial-my-page__journey--practice .commercial-my-page__journey-meta > div { border-color: #e9e1f2; background: #fdfbff; }
.commercial-my-page__journey--practice .commercial-my-page__step--current { border-color: #b799dc; background: #f7f2ff; box-shadow: 0 7px 15px rgba(102,72,147,.08); }
.commercial-my-page__journey--practice .commercial-my-page__step--current .commercial-my-page__step-index { background: #7c5aa7; }
.commercial-my-page__journey--practice .commercial-my-page__step--current em { color: #715094; }
.commercial-my-page__journey--practice .commercial-my-page__step--ready { border-color: #e8dff2; background: #fdfbff; }
.commercial-my-page__journey--practice .commercial-my-page__step--ready .commercial-my-page__step-index { color: #765796; background: #f0eafb; }
.commercial-my-page__journey--practice .commercial-my-page__step--ready em { color: #806799; }
.commercial-my-page__journey--practice .commercial-my-page__journey-footer button { background: #7c5aa7; }
.commercial-my-page__journey--practice .commercial-my-page__journey-footer button b { color: #7c5aa7; background: #f0eafb; }
.commercial-my-page__side-stack { display: grid; gap: 20px; }
.commercial-my-page__passport { position: relative; overflow: hidden; padding: 24px; background: linear-gradient(135deg, #fff7e8, #fffdf8); }
.commercial-my-page__passport::after { position: absolute; right: -31px; top: -43px; content: "★"; color: rgba(244,177,64,.14); font-size: 135px; font-weight: 1000; transform: rotate(14deg); }
.commercial-my-page__passport-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 21px; }
.commercial-my-page__passport-stats article { display: grid; gap: 4px; min-height: 70px; align-content: center; padding: 10px; border: 1px solid rgba(232,194,125,.38); border-radius: 14px; background: rgba(255,255,255,.75); }
.commercial-my-page__passport-stats strong { color: #bb6f27; font-size: 24px; line-height: 1; }
.commercial-my-page__passport-stats strong small { color: #b58558; font-size: 12px; }
.commercial-my-page__passport-stats span { color: #876c50; font-size: 10px; font-weight: 900; line-height: 1.25; }
.commercial-my-page__word-bank { padding: 23px; }
.commercial-my-page__word-bank > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.commercial-my-page__word { display: grid; min-height: 61px; align-content: center; padding: 8px 10px; border: 1px solid #e3edf2; border-radius: 14px; background: #f8fbfc; }
.commercial-my-page__word b { color: #177d8e; font-size: 22px; line-height: 1; }
.commercial-my-page__word span { margin-top: 5px; color: #5f778c; font-size: 11px; font-weight: 900; overflow-wrap: anywhere; }

.commercial-my-page__review { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 24px 26px; border-color: #e5e1f3; background: linear-gradient(105deg, #fbf9ff, #fff); }
.commercial-my-page__review-copy > span { display: block; margin-top: 8px; color: #718298; font-size: 12px; font-weight: 750; line-height: 1.45; }
.commercial-my-page__review-copy > p { color: #8263aa; }
.commercial-my-page__review h2 { color: #352b55; }
.commercial-my-page__review-list { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; }
.commercial-my-page__review-word { display: grid; grid-template-columns: 37px minmax(0, 1fr); column-gap: 9px; min-width: 132px; padding: 10px; border: 1px solid #e0d9f0; border-radius: 15px; color: #3a3157; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.commercial-my-page__review-word > span { display: grid; grid-row: span 2; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #684991; background: #eee7fb; font-size: 17px; font-weight: 1000; }
.commercial-my-page__review-word strong { font-size: 13px; }
.commercial-my-page__review-word small { color: #887c9c; font-size: 10px; font-weight: 800; }
.commercial-my-page__review-empty { display: flex; gap: 12px; align-items: center; min-height: 65px; padding: 11px 14px; border: 1px dashed #d6cde8; border-radius: 16px; background: rgba(255,255,255,.73); }
.commercial-my-page__review-empty b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #7d60a8; background: #eee7fb; font-size: 19px; }
.commercial-my-page__review-empty strong, .commercial-my-page__review-empty span { display: block; }
.commercial-my-page__review-empty strong { color: #4a3e67; font-size: 13px; }
.commercial-my-page__review-empty span { margin-top: 3px; color: #837690; font-size: 11px; font-weight: 750; }

.commercial-my-page__dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); gap: 20px; }
.commercial-my-page__learning-chart, .commercial-my-page__today-review { min-width: 0; padding: 24px 25px; border: 1px solid #e0eaf1; border-radius: 24px; background: #fff; box-shadow: 0 12px 28px rgba(31,75,101,.06); }
.commercial-my-page__learning-chart > header, .commercial-my-page__today-review > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.commercial-my-page__learning-chart header p, .commercial-my-page__today-review header p { margin: 0; color: #368392; font-size: 11px; font-weight: 1000; letter-spacing: .11em; }
.commercial-my-page__learning-chart h2, .commercial-my-page__today-review h2 { margin: 6px 0 0; color: #183d60; font-size: 23px; letter-spacing: -.035em; }
.commercial-my-page__learning-chart header span, .commercial-my-page__today-review header span { display: block; margin-top: 7px; color: #71869a; font-size: 11px; font-weight: 750; line-height: 1.4; }
.commercial-my-page__learning-chart > header > strong { display: grid; flex: 0 0 auto; min-height: 34px; place-items: center; padding: 0 11px; border-radius: 999px; color: #177d8e; background: #e4f6f3; font-size: 12px; white-space: nowrap; }
.commercial-my-page__chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-height: 184px; margin-top: 19px; padding: 10px 5px 0; border-top: 1px solid #edf2f5; }
.commercial-my-page__chart-day { display: grid; grid-template-rows: auto 1fr auto auto; gap: 5px; min-width: 0; text-align: center; }
.commercial-my-page__chart-day > strong { min-height: 13px; color: #55718a; font-size: 9px; font-weight: 900; white-space: nowrap; }
.commercial-my-page__chart-rail { display: flex; align-items: end; justify-content: center; min-height: 106px; padding: 0 5px; border-radius: 10px 10px 4px 4px; background: repeating-linear-gradient(to top, transparent 0 32px, #edf2f5 32px 33px); }
.commercial-my-page__chart-rail i { display: block; width: min(100%, 31px); height: var(--learning-bar-height); min-height: 0; border-radius: 9px 9px 4px 4px; background: linear-gradient(180deg, #6dd2d0, #1e91a2); box-shadow: 0 5px 10px rgba(22,137,153,.17); }
.commercial-my-page__chart-day b { color: #365d79; font-size: 11px; }
.commercial-my-page__chart-day span { color: #8396a6; font-size: 9px; font-weight: 800; }
.commercial-my-page__today-review { border-color: #e9e0f3; background: linear-gradient(145deg, #fff, #fcfaff); }
.commercial-my-page__today-review header p { color: #8263aa; }
.commercial-my-page__today-review h2 { color: #382d58; }
.commercial-my-page__today-review > header > b { display: grid; min-width: 32px; min-height: 32px; place-items: center; border-radius: 11px; color: #765796; background: #eee7fa; font-size: 12px; }
.commercial-my-page__today-mistakes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.commercial-my-page__today-mistake { display: grid; grid-template-columns: 35px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 9px; min-width: 0; padding: 10px; border: 1px solid #e5ddf0; border-radius: 14px; color: #41365d; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.commercial-my-page__today-mistake > span { display: grid; grid-row: span 3; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #684991; background: #eee7fb; font-size: 16px; font-weight: 1000; }
.commercial-my-page__today-mistake strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.commercial-my-page__today-mistake small { color: #887c9c; font-size: 10px; font-weight: 800; }
.commercial-my-page__today-mistake > b { margin-top: 2px; color: #7d5aa5; font-size: 10px; }
.commercial-my-page__today-mistake-empty { display: flex; grid-column: 1 / -1; gap: 12px; align-items: center; min-height: 82px; padding: 12px 14px; border: 1px dashed #d9cfea; border-radius: 16px; background: rgba(255,255,255,.72); }
.commercial-my-page__today-mistake-empty > b { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #765796; background: #eee7fb; font-size: 18px; }
.commercial-my-page__today-mistake-empty strong, .commercial-my-page__today-mistake-empty span { display: block; }
.commercial-my-page__today-mistake-empty strong { color: #4a3e67; font-size: 13px; }
.commercial-my-page__today-mistake-empty span { margin-top: 3px; color: #837690; font-size: 11px; font-weight: 750; line-height: 1.4; }

.commercial-my-page__course { padding: 25px; }
.commercial-my-page__course .commercial-my-page__section-title button { min-height: 34px; padding: 0 13px; border: 1px solid #d3e4e9; border-radius: 11px; color: #27768a; background: #fff; font: inherit; font-size: 12px; font-weight: 1000; cursor: pointer; }
.commercial-my-page__course-map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 19px; }
.commercial-my-page__course-card { display: grid; gap: 5px; min-height: 101px; align-content: center; justify-items: start; padding: 12px; border: 1px solid #e5ecf1; border-radius: 15px; color: #8190a0; background: #fafcfd; font: inherit; text-align: left; }
.commercial-my-page__course-card > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 10px; color: #748594; background: #edf1f4; font-size: 11px; font-weight: 1000; }
.commercial-my-page__course-card strong { color: #566f83; font-size: 16px; letter-spacing: .02em; }
.commercial-my-page__course-card small { font-size: 10px; font-weight: 900; }
.commercial-my-page__course-card.is-current { border: 2px solid #6fc2c9; color: #147e8b; background: #effbfa; box-shadow: 0 8px 16px rgba(20,126,139,.08); cursor: pointer; }
.commercial-my-page__course-card.is-current > span { color: #fff; background: #147e8b; }
.commercial-my-page__course-card.is-current strong { color: #176174; }
.commercial-my-page__course-card.is-complete { border-color: #b9e6d1; color: #16806a; background: #f2fcf7; cursor: pointer; }
.commercial-my-page__course-card.is-complete > span { color: #0f7b65; background: #dcf8eb; }
.commercial-my-page__course-card.is-complete strong { color: #277364; }
.commercial-my-page__course-card:disabled { opacity: 1; }
.commercial-my-page__course-map:not(.is-expanded) .commercial-my-page__course-card.is-extra { display: none; }

@media (max-width: 900px) {
  .commercial-my-page__hero, .commercial-my-page__main-grid, .commercial-my-page__dashboard-grid, .commercial-my-page__review { grid-template-columns: 1fr; }
  .commercial-my-page__hero { height: auto; min-height: 0; }
  .commercial-my-page__mission { height: auto; min-height: 0; }
  .commercial-my-page__course-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .commercial-my-page-screen { width: min(100% - 20px, 560px); margin-top: 15px; }
  .commercial-my-page { gap: 14px; padding-bottom: 32px; }
  .commercial-my-page__hero, .commercial-my-page__journey, .commercial-my-page__passport, .commercial-my-page__word-bank, .commercial-my-page__review, .commercial-my-page__course, .commercial-my-page__learning-chart, .commercial-my-page__today-review { padding: 19px; border-radius: 20px; }
  .commercial-my-page__hero { gap: 25px; }
  .commercial-my-page__hero h1 { font-size: clamp(35px, 11vw, 46px); }
  .commercial-my-page__intro { margin-bottom: 20px; font-size: 14px; }
  .commercial-my-page__hero-summary { display: grid; grid-template-columns: auto 1fr; }
  .commercial-my-page__hero-summary i { display: none; }
  .commercial-my-page__mission { padding: 20px; border-radius: 19px; }
  .commercial-my-page__main-grid { gap: 14px; }
  .commercial-my-page__section-title h2, .commercial-my-page__passport h2, .commercial-my-page__review h2 { font-size: 21px; }
  .commercial-my-page__step { grid-template-columns: 34px minmax(0, 1fr); }
  .commercial-my-page__step em { grid-column: 2; justify-self: start; }
  .commercial-my-page__journey-meta { grid-template-columns: 1fr; }
  .commercial-my-page__journey-footer { align-items: flex-start; flex-direction: column; }
  .commercial-my-page__journey-footer button { width: 100%; justify-content: space-between; }
  .commercial-my-page__passport-stats { gap: 6px; }
  .commercial-my-page__passport-stats article { min-height: 65px; padding: 8px; }
  .commercial-my-page__passport-stats strong { font-size: 21px; }
  .commercial-my-page__word-bank > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-my-page__review { gap: 16px; }
  .commercial-my-page__learning-chart h2, .commercial-my-page__today-review h2 { font-size: 21px; }
  .commercial-my-page__chart { gap: 4px; min-height: 162px; padding-left: 0; padding-right: 0; }
  .commercial-my-page__chart-rail { min-height: 89px; padding: 0 3px; }
  .commercial-my-page__chart-day > strong { font-size: 8px; }
  .commercial-my-page__today-mistakes { grid-template-columns: 1fr; }
  .commercial-my-page__course .commercial-my-page__section-title { align-items: center; }
  .commercial-my-page__course-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-my-page__course-card { min-height: 86px; }
}

/* Alphabet Unit 05: six independent, labelled sound moles replace the former
   watering interaction.  Their centres follow the painted holes rather than
   an even grid, so each complete Alphabet 2 object remains on its own target. */
#app main[data-publication="alphabet"] .mole-pop-stage {
  min-height: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

#app main[data-publication="alphabet"] .mole-pop-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1680 / 945;
  overflow: hidden;
  isolation: isolate;
  border: 4px solid #fff;
  border-radius: 24px;
  background: #8dce5b url("../assets/games/card-whack-mole/garden-three-holes.webp") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(39, 110, 78, .25), 0 12px 26px rgba(43, 103, 73, .16);
}

#app main[data-publication="alphabet"] .mole-pop-field .garden-word-screen {
  top: 6%;
  z-index: 8;
}

#app main[data-publication="alphabet"] .mole-pop-field .garden-word-screen .garden-masked-word {
  min-width: 300px;
  min-height: 80px;
  padding: 12px 20px;
  border-radius: 17px;
  font-size: 40px;
}

#app main[data-publication="alphabet"] .mole-pop-hole {
  position: absolute;
  z-index: 2;
  width: 20%;
  height: 29%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  animation: alphabetMoleAppear .35s both;
  animation-delay: var(--mole-delay);
}

#app main[data-publication="alphabet"] .mole-pop-hole:nth-of-type(1) { left: 25.1%; top: 58.2%; }
#app main[data-publication="alphabet"] .mole-pop-hole:nth-of-type(2) { left: 50.1%; top: 58.2%; }
#app main[data-publication="alphabet"] .mole-pop-hole:nth-of-type(3) { left: 75.2%; top: 58.2%; }

#app main[data-publication="alphabet"] .mole-pop-hole::before {
  position: absolute;
  inset: 5% 4%;
  border: 2px solid transparent;
  border-radius: 50%;
  content: "";
  transition: border-color .15s ease, box-shadow .15s ease;
}

#app main[data-publication="alphabet"] .mole-pop-hole:hover::before,
#app main[data-publication="alphabet"] .mole-pop-hole:focus-visible::before {
  /* The painted mole and hole already communicate the target.  A second
     oval ring made the character look as if it were inside a selection
     border, so keep the generous button hit area without drawing one. */
  border-color: transparent;
  box-shadow: none;
}

#app main[data-publication="alphabet"] .mole-pop-hole:focus-visible { outline: none; }

#app main[data-publication="alphabet"] .mole-pop-sprite {
  position: absolute;
  /* Align each complete mole-and-rim illustration with the painted hole,
     not the lower-right corner of its clickable area. */
  /* Keep the foreground dirt rim inside the painted hole instead of spilling
     below it onto the grass. */
  bottom: 8%;
  left: 50%;
  z-index: 2;
  width: 96%;
  pointer-events: none;
  transform: translateX(-50%);
  transition: transform .16s ease, bottom .16s ease, width .16s ease;
}

#app main[data-publication="alphabet"] .mole-pop-sprite img {
  display: block;
  width: 100%;
  filter: saturate(1.06) contrast(1.04);
  clip-path: ellipse(43% 35% at 50% 53%);
  mix-blend-mode: multiply;
}

#app main[data-publication="alphabet"] .mole-pop-hole:hover:not(:disabled) .mole-pop-sprite,
#app main[data-publication="alphabet"] .mole-pop-hole:focus-visible .mole-pop-sprite {
  transform: translate(-50%, -10%);
}

#app main[data-publication="alphabet"] .mole-pop-letter {
  position: absolute;
  bottom: 78%;
  left: 50%;
  z-index: 5;
  display: grid;
  width: clamp(44px, 4.3vw, 56px);
  height: clamp(44px, 4.3vw, 56px);
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  background: rgba(37, 68, 104, .88);
  box-shadow: 0 6px 0 rgba(20, 45, 76, .28), 0 8px 16px rgba(22, 52, 78, .26);
  color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

#app main[data-publication="alphabet"] .mole-pop-letter .alphabet-choice-case-pair {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .02em;
  color: inherit;
  font-weight: 1000;
  line-height: 1;
}

#app main[data-publication="alphabet"] .mole-pop-letter .alphabet-choice-uppercase { font-size: clamp(23px, 2.7vw, 34px); }
#app main[data-publication="alphabet"] .mole-pop-letter .alphabet-choice-lowercase { font-size: clamp(14px, 1.6vw, 20px); }

#app main[data-publication="alphabet"] .mole-pop-stage.mole-pop-locked .mole-pop-hole { pointer-events: none; }

#app main[data-publication="alphabet"] .mole-pop-hole.is-wrong { animation: alphabetMoleWrong .48s ease both; }
#app main[data-publication="alphabet"] .mole-pop-hole.is-wrong .mole-pop-sprite img { clip-path: ellipse(44% 39% at 50% 50%); }

#app main[data-publication="alphabet"] .mole-pop-hole.is-hit .mole-pop-sprite {
  /* A correct choice stays in the same painted hole.  The former larger,
     lower hit pose pushed the mole below the rim. */
  bottom: 8%;
  width: 96%;
}

#app main[data-publication="alphabet"] .mole-pop-hole.is-hit .mole-pop-sprite img { clip-path: ellipse(43% 35% at 50% 53%); }
#app main[data-publication="alphabet"] .mole-pop-hole.is-hit .mole-pop-letter { opacity: 0; transform: translateX(-50%) scale(.55); }

#app main[data-publication="alphabet"] .mole-pop-hole.is-hit::after {
  position: absolute;
  bottom: 46%;
  left: 50%;
  z-index: 6;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff36f;
  box-shadow: -42px 8px 0 1px #fff36f, -22px -29px 0 1px #fff, 24px -29px 0 1px #7de1a6, 43px 10px 0 1px #fff, 0 35px 0 1px #ff9eb0;
  content: "";
  pointer-events: none;
  transform: translateX(-50%) scale(.2);
  animation: alphabetMoleSparkle .7s ease-out both;
}

#app main[data-publication="alphabet"] .mole-pop-stage.mole-pop-celebrating .mole-pop-field::after {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: radial-gradient(circle at 50% 65%, rgba(255, 245, 130, .36), transparent 29%);
  content: "";
  pointer-events: none;
  animation: alphabetMoleGlow .82s ease-out both;
}

@keyframes alphabetMoleAppear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(-3deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes alphabetMoleWrong {
  22%, 62% { transform: translate(-50%, -50%) translateX(-9px) rotate(-4deg); }
  42%, 82% { transform: translate(-50%, -50%) translateX(9px) rotate(4deg); }
  100% { transform: translate(-50%, -50%); }
}

@keyframes alphabetMoleSparkle {
  0% { opacity: 0; transform: translateX(-50%) scale(.2) rotate(-8deg); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.25) rotate(8deg); }
}

@keyframes alphabetMoleGlow {
  0% { opacity: 0; }
  42% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  #app main[data-publication="alphabet"] .mole-pop-field { border-width: 3px; border-radius: 17px; }
  #app main[data-publication="alphabet"] .mole-pop-field .garden-word-screen { top: 4%; }
  #app main[data-publication="alphabet"] .mole-pop-field .garden-word-screen .garden-masked-word {
    min-width: 0;
    min-height: 0;
    padding: 7px 11px;
    font-size: clamp(25px, 7vw, 38px);
  }
  #app main[data-publication="alphabet"] .mole-pop-hole { width: 23%; height: 32%; }
  #app main[data-publication="alphabet"] .mole-pop-sprite { bottom: 5%; width: 105%; }
  #app main[data-publication="alphabet"] .mole-pop-hole.is-hit .mole-pop-sprite { bottom: 5%; width: 105%; }
  #app main[data-publication="alphabet"] .mole-pop-letter { border-width: 2px; box-shadow: 0 4px 0 rgba(20, 45, 76, .28), 0 5px 10px rgba(22, 52, 78, .24); }
}

/* Alphabet unit picker: lower only the tall watercolor artwork inside the
   banner; the frame and left-side course copy keep their existing position. */
#app .menu-page-banner--lesson .menu-page-banner__object[src*="first-weekly-alphabet"] {
  object-position: center 14% !important;
}

/* src/experience-ui-system.css */
/*
 * Shared experience UI system
 *
 * Story, Lesson, and Game keep their own purpose and interaction model.
 * This layer only shares the visual language: a calm white work surface,
 * navy type, fine blue-grey borders, rounded control objects, and restrained
 * blue/teal feedback.  Individual scene art and game objects stay untouched.
 */

:root {
  --experience-ink: #17324f;
  --experience-muted: #60758d;
  --experience-line: #d5e3ef;
  --experience-panel: #ffffff;
  --experience-soft: #f6fbff;
  --experience-blue: #2f80d5;
  --experience-teal: #2ba995;
  --experience-radius: 26px;
  --experience-control-radius: 16px;
  --experience-shadow: 0 18px 46px rgba(32, 61, 96, .14), 0 3px 8px rgba(32, 61, 96, .06);
  /* Keep the Unit-game reader on the same 1200px canvas as the shared
     Phonics game surface.  The 16:9 scene then gains its matching height
     naturally instead of being squeezed into a smaller inner frame. */
  --experience-game-frame-width: 1200px;
}

/* The story reader is the baseline.  Lesson uses the same outer material,
   but its activity canvas remains fully white. */
#app.app--immersive-story main.story-screen,
#app main.learning-screen.lesson-story-mode,
#app main[class*="game-screen"] {
  background-color: var(--experience-soft);
}

#app :is(
  .story-reader--picturebook .story-reader__book--picturebook,
  .lesson-story-reader .lesson-story-book
) {
  border-color: var(--experience-line);
  border-radius: var(--experience-radius);
  background: var(--experience-panel);
  box-shadow: var(--experience-shadow);
}

#app :is(
  .story-reader--picturebook .story-reader__header--picturebook,
  .lesson-story-reader .lesson-story-header
) {
  border-color: var(--experience-line);
  background: #fff;
}

#app :is(
  .story-reader--picturebook .story-reader__page--picturebook,
  .lesson-story-reader .lesson-story-page
) {
  border-color: var(--experience-line);
  border-radius: calc(var(--experience-radius) - 5px);
  box-shadow: inset 0 0 0 5px rgba(249, 252, 255, .92), 0 7px 18px rgba(42, 78, 117, .06);
}

#app :is(
  .story-reader--picturebook .story-reader__caption,
  .lesson-story-reader .lesson-story-caption
) {
  border-color: var(--experience-line);
  background: #fff;
}

#app :is(
  .story-reader--picturebook .story-reader__exit,
  .lesson-story-reader .story-reader__exit,
  .story-reader--picturebook .story-reader__audio-button,
  .lesson-story-reader .lesson-story-audio-button
) {
  border-color: var(--experience-line);
  border-radius: var(--experience-control-radius);
  background: #fff;
  box-shadow: 0 5px 13px rgba(34, 69, 107, .08);
}

#app :is(
  .story-reader--picturebook .story-reader__exit,
  .lesson-story-reader .story-reader__exit
) {
  color: var(--experience-ink);
}

#app :is(
  .story-reader--picturebook .story-reader__audio-button:hover,
  .story-reader--picturebook .story-reader__audio-button:focus-visible,
  .lesson-story-reader .lesson-story-audio-button:hover,
  .lesson-story-reader .lesson-story-audio-button:focus-visible
) {
  border-color: #b8dced;
  background: #f2fbff;
  box-shadow: 0 8px 17px rgba(36, 123, 185, .14);
}

/* ------------------------------- Lesson -------------------------------- */

#app main.learning-screen.lesson-story-mode {
  display: grid;
  min-height: calc(100dvh - 181px);
  padding: clamp(20px, 4vh, 48px) clamp(12px, 3vw, 36px);
  place-items: center;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 226, 151, .16), transparent 24%),
    radial-gradient(circle at 93% 92%, rgba(95, 202, 190, .12), transparent 26%),
    var(--experience-soft);
}

#app main.learning-screen.lesson-story-mode > .lesson-story-reader {
  width: min(1080px, 100%);
  margin: 0;
}

/* A lesson in the picture-book reader is a focused activity, just like a
   Story page: it uses the complete distraction-free 1440px canvas rather
   than the narrower dashboard-sized lesson frame. */
#app.app--immersive-story main.learning-screen.lesson-story-mode {
  min-height: 100dvh;
  padding: clamp(14px, 2.5vw, 32px);
}

#app.app--immersive-story main.learning-screen.lesson-story-mode > .lesson-story-reader {
  width: min(1440px, 100%);
  margin: auto;
}

/* Lesson keeps the Story's horizontal control language, but its four buttons
   name the learning activity instead of pretending they are story pages. */
#app main.learning-screen.lesson-story-mode .lesson-story-header {
  grid-template-columns: 48px minmax(0, 1fr) 54px;
  gap: 12px;
}

#app main.learning-screen.lesson-story-mode .lesson-story-progress {
  width: min(100%, 510px);
  justify-self: center;
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--experience-control-radius);
  color: var(--experience-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab > span {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab.is-current {
  border-color: #b8e0e7;
  color: #176e85;
  background: linear-gradient(135deg, #e9fbf8, #edf8ff);
  box-shadow: 0 4px 10px rgba(45, 146, 162, .12);
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab.is-current > span {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--experience-blue), var(--experience-teal));
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab.is-complete {
  color: #238975;
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab:hover:not(:disabled),
#app main.learning-screen.lesson-story-mode .lesson-stage-tab:focus-visible:not(:disabled) {
  border-color: #c4ddea;
  color: var(--experience-ink);
  background: #f7fcff;
  outline: none;
  transform: translateY(-1px);
}

#app main.learning-screen.lesson-story-mode .lesson-stage-tab:disabled {
  opacity: .46;
  cursor: not-allowed;
}

#app main.learning-screen.lesson-story-mode .lesson-story-stage,
#app main.learning-screen.lesson-story-mode .lesson-story-card {
  background: #fff !important;
}

#app main.learning-screen.lesson-story-mode .lesson-story-nav {
  display: grid;
  width: 52px;
  min-height: 52px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--experience-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 13px rgba(34, 69, 107, .08);
}

#app main.learning-screen.lesson-story-mode .lesson-story-nav:hover,
#app main.learning-screen.lesson-story-mode .lesson-story-nav:focus-visible {
  border-color: #a9d8e7;
  background: #f0fbff;
  box-shadow: 0 8px 17px rgba(36, 123, 185, .15);
}

#app main.learning-screen.lesson-story-mode .lesson-story-nav img {
  width: 48px;
  height: 48px;
}

/* Listen is a picture followed by a visible sound row.  Every letter owns a
   speaker mark so the learner can see exactly which sound will move. */
#app main.learning-screen.lesson-story-mode .listen-dance-stage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(12px, 2vh, 20px);
  min-height: 0 !important;
  padding: clamp(16px, 3vh, 30px) clamp(14px, 3vw, 34px) !important;
  border: 1px solid var(--experience-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* The framed listen canvas is visual only. Its image and click response can
   extend into the surrounding lesson area for Alphabet and every Phonics
   course instead of being clipped at the inner border. */
#app main.learning-screen.lesson-story-mode .lesson-story-card:has(.unified-listen-view),
#app main.learning-screen.lesson-story-mode .unified-listen-view .listen-dance-stage {
  overflow: visible !important;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage > .sound-lab-word-picture {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: min(260px, 46vw) !important;
  height: min(230px, 44vh) !important;
  min-height: 150px !important;
  place-items: center;
  border: 1px solid #cbe0ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(36, 87, 126, .08);
  transform: none !important;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-lab-word-screen-frame {
  display: none !important;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-lab-word-screen-content,
#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-lab-word-screen-content > .word-art {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-lab-word-screen-content img {
  display: block;
  width: min(88%, 210px) !important;
  height: min(88%, 190px) !important;
  object-fit: contain;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage > .sound-lab-blocks {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  width: auto !important;
  max-width: 100%;
  min-height: 0 !important;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 14px) !important;
  padding: 0 !important;
  transform: none !important;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block {
  position: relative;
  display: grid !important;
  width: clamp(58px, 6.8vw, 78px) !important;
  height: clamp(66px, 7.6vw, 88px) !important;
  min-height: 0 !important;
  padding: 8px 6px !important;
  place-items: center;
  border: 1px solid #bcdbea !important;
  border-radius: 16px !important;
  color: #1f78bf;
  background: linear-gradient(160deg, #f8fdff, #dff3fb) !important;
  box-shadow: 0 7px 0 #a8d4e9, 0 12px 18px rgba(53, 117, 151, .12) !important;
  transform-origin: center bottom;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block::after {
  content: "🔊";
  position: absolute;
  right: 7px;
  bottom: 5px;
  color: #247ac0;
  font-size: 12px;
  line-height: 1;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block > b {
  font-size: clamp(28px, 3.2vw, 38px) !important;
  line-height: .86;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block > span:not(.alphabet-listen-letter__sound),
#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block > small {
  display: block !important;
  margin-top: 2px;
  color: currentColor;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .alphabet-listen-letter__sound {
  display: grid !important;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  place-items: center;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .alphabet-listen-letter__sound svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .alphabet-listen-letter::after {
  content: none;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block.is-first-sound,
#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block.target-vowel-block,
#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block.target-blend-block {
  border-color: transparent !important;
  color: #fff;
  background: linear-gradient(145deg, #fa6967, #dd4054) !important;
  box-shadow: 0 7px 0 #c83946, 0 12px 20px rgba(195, 55, 65, .2) !important;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block:is(.active, .listen-sequence-active) {
  animation: lesson-sound-dance .62s cubic-bezier(.2,.8,.25,1) both;
}

#app main.learning-screen.lesson-story-mode .listen-dance-stage:has(.sound-block:is(.active, .listen-sequence-active)) .sound-block:not(.active, .listen-sequence-active) {
  animation: lesson-sound-answer-beat .48s ease-out both;
}

@media (max-width: 760px) {
  #app main.learning-screen.lesson-story-mode .unified-listen-view .listen-dance-stage > .sound-lab-blocks {
    gap: 5px !important;
  }

  #app main.learning-screen.lesson-story-mode .unified-listen-view .listen-dance-stage > .sound-lab-blocks.long-word .sound-block {
    width: clamp(42px, 12vw, 54px) !important;
    height: clamp(52px, 14vw, 64px) !important;
    padding: 6px 3px !important;
  }

  #app main.learning-screen.lesson-story-mode .unified-listen-view .listen-dance-stage > .sound-lab-blocks.long-word .sound-block > b {
    font-size: clamp(20px, 6vw, 27px) !important;
  }
}

@keyframes lesson-sound-dance {
  0% { transform: translateY(0) rotate(0) scale(1); }
  28% { transform: translateY(-15px) rotate(-3deg) scale(1.09); }
  56% { transform: translateY(-7px) rotate(3deg) scale(1.04); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

@keyframes lesson-sound-answer-beat {
  0%, 100% { transform: translateY(0); }
  52% { transform: translateY(-5px); }
}

/* Speak is a fully functional recording board, not a blank character panel.
   Its word, sound objects, and the three actions always fit inside the white
   activity canvas at every desktop and tablet height. */
#app main.learning-screen.lesson-story-mode .lesson-story-card > .speak-view,
#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view {
  display: flex !important;
  flex-direction: column;
  width: min(100%, 980px);
  height: 100%;
  min-height: 0;
  margin: auto;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-stage {
  position: relative !important;
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border: 1px solid var(--experience-line);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #f7fbff 100%) !important;
  box-shadow: none !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-practice-board {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

/* The legacy reveal sheet hid the Alphabet word and its sound cards.  Keep
   both visible: the character is only one visual cue, never the whole page. */
#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-word-panel {
  position: absolute;
  inset: 0;
  display: block !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-word-reveal-screen {
  position: absolute;
  top: 15% !important;
  left: 18% !important;
  display: grid;
  width: min(28%, 240px) !important;
  height: 48% !important;
  place-items: center;
  transform: none !important;
  border: 1px solid #b8ddeb !important;
  border-radius: 20px;
  background: #f4fbff !important;
  box-shadow: inset 0 0 0 5px #fff, 0 9px 18px rgba(45, 105, 151, .09) !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-screen-monster {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain;
}

/* Keep the widened frame, but make only the Alphabet Speak monster a touch
   smaller so it has a calmer amount of space around it. */
#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-screen-monster {
  width: 74% !important;
  height: 74% !important;
}

#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title {
  position: absolute;
  top: 13% !important;
  left: 57% !important;
  display: block !important;
  width: 35% !important;
  min-width: 0;
  padding: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title > span,
#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-title-verb,
#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-title-space {
  display: none !important;
}

#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title h1 {
  margin: 0;
  color: var(--experience-ink);
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1;
}

#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .alphabet-speak-word .alphabet-target-sound {
  color: #ee4d5d;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes {
  position: absolute !important;
  top: 49% !important;
  left: 61% !important;
  right: auto !important;
  display: flex !important;
  width: auto !important;
  max-width: 34%;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px) !important;
  transform: translateX(-50%) !important;
  z-index: 4;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes > span {
  display: grid !important;
  width: clamp(44px, 5.5vw, 68px);
  height: clamp(50px, 6.2vw, 76px);
  padding: 4px;
  place-items: center;
  border: 1px solid #bcdbea;
  border-radius: 15px;
  color: var(--experience-ink);
  background: #fff;
  box-shadow: 0 5px 12px rgba(35, 78, 120, .08);
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes > .target-vowel-card,
#app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes > .vowel {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(145deg, #fa6967, #dd4054) !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes b {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-controls {
  position: absolute !important;
  bottom: 9% !important;
  left: 61% !important;
  right: auto !important;
  display: flex !important;
  width: auto !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  transform: translateX(-50%) !important;
  z-index: 5;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-console-button {
  display: grid !important;
  width: clamp(58px, 6vw, 76px) !important;
  height: clamp(58px, 6vw, 76px) !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #bcdbea !important;
  border-radius: 18px !important;
  color: #2879c7 !important;
  background: #fff !important;
  box-shadow: 0 7px 15px rgba(35, 78, 120, .1) !important;
  filter: none !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-console-button svg {
  width: 42% !important;
  height: 42% !important;
  fill: currentColor;
  stroke: currentColor;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-mic-button {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(145deg, #fa6967, #dd4054) !important;
  box-shadow: 0 8px 18px rgba(211, 70, 88, .22) !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-play-button:disabled {
  opacity: .42;
}

#app main.learning-screen.lesson-story-mode .speak-view .task-feedback {
  display: none;
}

/* ------------------------------- Games --------------------------------- */

/* The General path has two browsing levels before a playable scene.  They
   use the same white material as the reader, while their scene thumbnails
   stay intact so learners can recognise each course and unit at a glance. */
#app main.general-game-course-screen,
#app main.game-menu-screen.unit-menu-screen {
  padding: clamp(20px, 4vw, 56px) clamp(14px, 3.4vw, 42px) clamp(34px, 5vw, 72px);
  background:
    radial-gradient(circle at 7% 9%, rgba(108, 191, 238, .14), transparent 25%),
    radial-gradient(circle at 93% 91%, rgba(84, 206, 177, .11), transparent 27%),
    var(--experience-soft);
}

#app main.general-game-course-screen .general-game-course-hub {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--experience-line);
  border-radius: var(--experience-radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--experience-shadow);
}

#app main.general-game-course-screen .general-game-course-hub h2 {
  color: var(--experience-ink);
}

#app main.general-game-course-screen .general-game-course-hub > header > p:last-child {
  color: var(--experience-muted);
}

#app main.general-game-course-screen .general-game-course-hub__grid {
  gap: clamp(14px, 1.6vw, 20px);
}

#app main.general-game-course-screen .general-game-channel {
  min-height: clamp(220px, 20vw, 270px);
  border: 1px solid var(--experience-line);
  border-radius: 21px;
  box-shadow: 0 9px 22px rgba(32, 61, 96, .12);
}

#app main.general-game-course-screen .general-game-channel::after {
  background: linear-gradient(180deg, rgba(18, 54, 88, .04) 18%, rgba(14, 42, 72, .88) 100%);
}

#app main.general-game-course-screen .general-game-channel__copy {
  padding: clamp(18px, 2vw, 25px);
}

#app main.general-game-course-screen .general-game-channel__copy b {
  color: #fff0a9;
  font-size: 11px;
}

#app main.general-game-course-screen .general-game-channel__copy em i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  font-size: 18px;
  line-height: 1;
}

#app main.general-game-course-screen .general-game-channel:hover,
#app main.general-game-course-screen .general-game-channel:focus-visible {
  transform: translateY(-3px);
  border-color: #a9d8e7;
  box-shadow: 0 15px 30px rgba(32, 61, 96, .19);
}

#app main.general-game-course-screen .general-game-channel:focus-visible {
  box-shadow: 0 0 0 4px rgba(73, 164, 204, .25), 0 15px 30px rgba(32, 61, 96, .19);
}

/* A unit list is an information board, not a second kind of game.  Its
   controls now share the reader's border, radius, and focus behavior while
   keeping every existing scene preview, unit label, and review state. */
#app main.game-menu-screen.unit-menu-screen .home-finder,
#app main.game-menu-screen.unit-menu-screen .course-map.unit-menu-grid {
  width: min(1180px, 100%);
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--experience-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 20px rgba(32, 61, 96, .07);
}

#app main.game-menu-screen.unit-menu-screen .home-finder {
  padding: clamp(16px, 2vw, 22px);
}

#app main.game-menu-screen.unit-menu-screen .course-map.unit-menu-grid {
  gap: 14px;
  padding: clamp(14px, 2vw, 22px);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card {
  min-height: 222px;
  border-color: var(--experience-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(32, 61, 96, .07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card:hover,
#app main.game-menu-screen.unit-menu-screen .unit-menu-card:focus-visible {
  transform: translateY(-2px);
  border-color: #9dcde1;
  box-shadow: 0 11px 22px rgba(32, 61, 96, .13);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card.active {
  border-color: var(--experience-blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 213, .13), 0 11px 22px rgba(32, 61, 96, .13);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card.review-unit {
  border-color: #e9c56c;
  background: linear-gradient(180deg, #fffdfa, #fff8ea);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card__media,
#app main.game-menu-screen.unit-menu-screen .menu-card-scene-art {
  border-radius: 13px;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card__kicker {
  color: var(--experience-blue);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card > small {
  color: var(--experience-muted);
}

#app main[class*="game-screen"] {
  --experience-game-accent: var(--experience-blue);
  --experience-game-support: var(--experience-teal);
  padding: clamp(12px, 2vw, 26px);
  background:
    radial-gradient(circle at 7% 9%, rgba(108, 191, 238, .14), transparent 24%),
    radial-gradient(circle at 93% 91%, rgba(84, 206, 177, .11), transparent 26%),
    var(--experience-soft);
}

#app main[data-publication="alphabet"][class*="game-screen"] {
  --experience-game-accent: #327ed0;
  --experience-game-support: #35b39d;
}

#app main[data-publication^="phonics"][class*="game-screen"] {
  --experience-game-accent: #456fd5;
  --experience-game-support: #35aa98;
}

/* A playable game has its own reader-like chassis.  The stage remains the
   game's scene (and keeps its illustration/object coordinates); the white
   frame only groups progress, scene, instructions and navigation as one
   intentional screen instead of four unrelated panels. */
#app main[class*="game-screen"] > .game-layout {
  width: min(var(--experience-game-frame-width), 100%);
  max-width: var(--experience-game-frame-width);
  margin: 0 auto;
  padding: clamp(12px, 1.7vw, 20px) clamp(12px, 2.1vw, 24px) clamp(16px, 2.2vw, 28px);
  border: 1px solid var(--experience-line);
  border-radius: var(--experience-radius);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--experience-shadow);
}

#app main[class*="game-screen"] :is(
  .unified-game-context-bar,
  .unified-game-info-bar,
  .unified-game-navigation
) {
  border-color: var(--experience-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(36, 73, 113, .08) !important;
}

#app main[class*="game-screen"] .unified-game-context-bar > div,
#app main[class*="game-screen"] .unified-game-info-bar > div {
  background: #fff !important;
}

#app main[class*="game-screen"] .unified-game-context-course strong,
#app main[class*="game-screen"] .unified-game-info-bar h1 {
  color: var(--experience-game-accent) !important;
}

#app main[class*="game-screen"] .unified-game-context-progress strong {
  color: var(--experience-game-support) !important;
}

#app main[class*="game-screen"] .unified-game-listen-button,
#app main[class*="game-screen"] .unified-game-next {
  border-color: transparent !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--experience-game-accent), var(--experience-game-support)) !important;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--experience-game-accent) 24%, transparent) !important;
}

#app main[class*="game-screen"] :is(.unified-game-back, .unified-game-list) {
  border-color: var(--experience-line) !important;
  border-radius: 15px !important;
  color: var(--experience-ink) !important;
  background: #fff !important;
}

@media (max-width: 900px) {
  #app main.learning-screen.lesson-story-mode .speak-view .say-word-reveal-screen {
    left: 11% !important;
    width: min(31%, 210px) !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title {
    left: 57% !important;
    width: 39% !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes,
  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-controls {
    left: 61% !important;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-stage {
    min-height: 410px !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-word-reveal-screen {
    top: 8% !important;
    left: 50% !important;
    width: min(42%, 180px) !important;
    height: 30% !important;
    transform: translateX(-50%) !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title {
    top: 42% !important;
    left: 50% !important;
    width: 88% !important;
    transform: translateX(-50%) !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes {
    top: 58% !important;
    left: 50% !important;
    max-width: 90%;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-controls {
    bottom: 6% !important;
    left: 50% !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes > span {
    width: 46px;
    height: 52px;
  }

  #app main[class*="game-screen"] {
    padding: 8px;
  }

  #app main[class*="game-screen"] > .game-layout {
    width: 100%;
    padding: 10px 8px 14px;
    border-radius: 20px;
  }

  #app main.general-game-course-screen,
  #app main.game-menu-screen.unit-menu-screen {
    padding: 14px 10px 32px;
  }

  #app main.general-game-course-screen .general-game-course-hub,
  #app main.game-menu-screen.unit-menu-screen .home-finder,
  #app main.game-menu-screen.unit-menu-screen .course-map.unit-menu-grid {
    border-radius: 20px;
  }

  #app main.game-menu-screen.unit-menu-screen .course-map.unit-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app main.game-menu-screen.unit-menu-screen .unit-menu-card {
    min-height: 198px;
  }
}

/* The Speak page uses a left-to-right conversation: the Sound Monster listens
   on the left, the target picture is visible in the middle, and word/sound/
   recording controls form the working area on the right. */
#app main.learning-screen.lesson-story-mode .speak-view .say-word-reveal-screen {
  top: 13% !important;
  left: 7% !important;
  width: min(25%, 230px) !important;
  height: 65% !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-target-picture {
  position: absolute;
  top: 16%;
  left: 37%;
  display: grid;
  width: min(23%, 210px);
  height: 54%;
  place-items: center;
  z-index: 3;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-target-picture .word-art,
#app main.learning-screen.lesson-story-mode .speak-view .say-target-picture img {
  display: grid;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  place-items: center;
  object-fit: contain;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title {
  top: 18% !important;
  left: 76% !important;
  width: 32% !important;
  transform: translateX(-50%) !important;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes {
  top: 48% !important;
  left: 76% !important;
  max-width: 35%;
}

#app main.learning-screen.lesson-story-mode .speak-view .say-coach-controls {
  bottom: 10% !important;
  left: 76% !important;
}

/* Every playable General game is centred on the same reader coordinate as a
   lesson.  Only the 16:9 scene keeps its own artwork and interaction model. */
#app main.game-screen:not(.game-menu-screen) {
  display: grid;
  min-height: calc(100dvh - 181px);
  align-content: center;
  justify-items: center;
}

#app main.game-screen:not(.game-menu-screen) > .game-layout {
  width: min(var(--experience-game-frame-width), 100%);
  max-width: var(--experience-game-frame-width);
}

#app main.game-screen:not(.game-menu-screen) :is(
  .alphabet-single-stage,
  .phonics-standard-stage,
  .p1-single-stage,
  .p2u-stage,
  .p3c-stage,
  .p3v-stage,
  .p3u812-stage,
  .advanced-3d-stage,
  .word-lab-stage,
  .fizzy-letter-factory-stage,
  .r-blend-quarry-stage,
  .blend-temple-stage,
  .ending-space-stage,
  .ending-power-stage,
  .sound-thief-stage,
  .snowflake-link-stage
) {
  aspect-ratio: 16 / 9 !important;
}

/* A game scene is 16:9, but its information and control bands also need to
   remain on screen.  Scale the complete player as one responsive object on
   shorter desktop and tablet viewports; this keeps the same centred reader
   coordinate instead of cutting the top of the scene off. */
@media (min-width: 901px) and (max-height: 1100px) {
  #app main.game-screen:not(.game-menu-screen) > .game-layout {
    zoom: .82;
  }
}

@media (min-width: 901px) and (max-height: 980px) {
  #app main.game-screen:not(.game-menu-screen) > .game-layout {
    /* Do not make Unit games smaller than the Phonics game frame on a
       shorter desktop.  Keeping the .82 player scale preserves the shared
       16:9 scene dimensions in both directions. */
    zoom: .82;
  }
}

@media (min-width: 901px) and (max-height: 850px) {
  #app main.game-screen:not(.game-menu-screen) > .game-layout {
    zoom: .82;
  }
}

@media (max-width: 900px) {
  #app main.learning-screen.lesson-story-mode {
    min-height: calc(100dvh - 132px);
  }

  #app main.game-screen:not(.game-menu-screen) {
    min-height: calc(100dvh - 132px);
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-word-reveal-screen {
    left: 5% !important;
    width: 26% !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-target-picture {
    left: 36%;
    width: 24%;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title,
  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes,
  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-controls {
    left: 78% !important;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  #app main.learning-screen.lesson-story-mode {
    min-height: auto;
    padding: 12px 8px 18px;
  }

  #app main.learning-screen.lesson-story-mode .lesson-story-header {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 5px;
  }

  #app main.learning-screen.lesson-story-mode .lesson-stage-tabs {
    gap: 3px;
  }

  #app main.learning-screen.lesson-story-mode .lesson-stage-tab {
    min-height: 36px;
    flex-direction: column;
    gap: 1px;
    padding: 3px 2px;
    font-size: 10px;
  }

  #app main.learning-screen.lesson-story-mode .lesson-stage-tab > span {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 9px;
  }

  /* Four Korean step names must remain readable on a 390px phone.  A compact
     vertical stack gives the label the full tab width instead of ellipsising
     it beside the numbered circle. */
  #app main.learning-screen.lesson-story-mode .lesson-stage-tab > b {
    width: 100%;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
  }
  #app main.learning-screen.lesson-story-mode .listen-dance-stage {
    min-height: 400px !important;
    padding: 18px 10px 22px !important;
  }

  #app main.learning-screen.lesson-story-mode .listen-dance-stage > .sound-lab-word-picture {
    width: min(220px, 76vw) !important;
    height: 190px !important;
  }

  #app main.learning-screen.lesson-story-mode .listen-dance-stage > .sound-lab-blocks {
    gap: 6px !important;
  }

  #app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block {
    width: clamp(48px, 15vw, 62px) !important;
    height: clamp(58px, 17vw, 70px) !important;
    border-radius: 13px !important;
  }

  #app main.learning-screen.lesson-story-mode .listen-dance-stage .sound-block > b {
    font-size: 27px !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-stage {
    min-height: 480px !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-word-reveal-screen {
    top: 7% !important;
    left: 7% !important;
    width: 34% !important;
    height: 34% !important;
    transform: none !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-target-picture {
    top: 7%;
    left: 52%;
    width: 39%;
    height: 34%;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title {
    top: 45% !important;
    left: 50% !important;
    width: 90% !important;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-phonemes {
    top: 58% !important;
    left: 50% !important;
    max-width: 94%;
  }

  #app main.learning-screen.lesson-story-mode .speak-view .say-coach-controls {
    bottom: 5% !important;
    left: 50% !important;
  }

  #app main.game-screen:not(.game-menu-screen) {
    min-height: auto;
  }
}

/* Alphabet lesson Speak: a single, uncluttered practice line.  Keep the
   coach and recording dock together on the left, the word picture in the
   centre, and every letter tile in one readable row below the picture. */
@media (min-width: 761px) and (orientation: landscape) {
  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-word-reveal-screen {
    top: 10% !important;
    left: 6% !important;
    /* Give the Sound Monster a little more horizontal breathing room without
       changing the frame's height or the surrounding control layout. */
    width: min(23%, 205px) !important;
    height: 54% !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-target-picture {
    top: 14% !important;
    left: 45% !important;
    width: min(20%, 190px) !important;
    height: 50% !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-title {
    display: none !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-phonemes {
    top: 72% !important;
    left: 69% !important;
    width: min(48%, 452px) !important;
    max-width: 48% !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: clamp(5px, .7vw, 9px) !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-phonemes > span {
    flex: 0 1 clamp(42px, 4.3vw, 54px) !important;
    width: clamp(42px, 4.3vw, 54px) !important;
    min-width: 0 !important;
    height: clamp(50px, 5vw, 62px) !important;
    padding: 4px 2px !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-phonemes b {
    font-size: clamp(22px, 2.25vw, 28px) !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-controls {
    left: 22% !important;
    bottom: 3% !important;
    gap: clamp(6px, .8vw, 10px) !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-controls .say-console-button {
    width: clamp(48px, 4.8vw, 58px) !important;
    height: clamp(48px, 4.8vw, 58px) !important;
    border-radius: 15px !important;
  }

  #app main.learning-screen.lesson-story-mode .alphabet-speak-screen-view .say-coach-controls .say-mic-button {
    width: clamp(56px, 5.5vw, 66px) !important;
    height: clamp(56px, 5.5vw, 66px) !important;
  }
}

/* Shared Story canvas contract.  A Story picture is 16:9; normal lessons and
   playable General Games use the same centred activity field.  This only
   changes the presentation box: game state, answer handling, audio, recording
   and every existing navigation control remain owned by their current code. */
:root {
  /* The visible Story illustration is 784 by 441. */
  --experience-story-canvas-width: 784px;
  --experience-story-canvas-ratio: 16 / 9;
}

@media (min-width: 761px) and (orientation: landscape) {
  #app main.learning-screen.lesson-story-mode .lesson-story-stage {
    container-type: size;
    display: grid;
    place-items: center;
  }

  #app main.learning-screen.lesson-story-mode .lesson-story-card {
    box-sizing: border-box;
    width: min(var(--experience-story-canvas-width), 100cqw, 177.777cqh);
    height: auto;
    min-height: 0;
    margin: auto;
    aspect-ratio: var(--experience-story-canvas-ratio);
  }

  /* Every interactive scene remains in its own game component, but its outer
     stage is now capped to the Story picture coordinate.  All game scenes use
     a class token ending in -stage, including independent shells that do not
     use .game-board. */
  #app main.game-screen:not(.game-menu-screen) :is([class$="-stage"], [class*="-stage "]) {
    box-sizing: border-box;
    width: min(100%, var(--experience-story-canvas-width)) !important;
    max-width: var(--experience-story-canvas-width) !important;
    height: auto;
    min-height: 0;
    margin-inline: auto !important;
    aspect-ratio: var(--experience-story-canvas-ratio) !important;
  }
}

/* Desktop game players use zoom: .82 on short viewports.  Compensate only
   their internal coordinate so the visible field remains the Story's 784px
   width, without changing any game behavior or the player-scale rule. */
@media (min-width: 901px) and (max-height: 1100px) {
  #app main.game-screen:not(.game-menu-screen) :is([class$="-stage"], [class*="-stage "]) {
    width: min(100%, calc(var(--experience-story-canvas-width) / .82)) !important;
    max-width: calc(var(--experience-story-canvas-width) / .82) !important;
  }
}

/* Alphabet Unit 01 Speak: read one joined word, then connect it with the
   apple placed directly below its centre.  The former letter tiles are not a
   reading model for this step. */
@media (min-width: 761px) and (orientation: landscape) {
  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title {
    top: 15% !important;
    left: 64% !important;
    display: block !important;
    width: min(42%, 420px) !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title h1 {
    color: var(--experience-ink) !important;
    font-size: clamp(52px, 7.4vw, 92px) !important;
    font-weight: 850;
    letter-spacing: -.065em;
    line-height: .94;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title .alphabet-target-sound {
    color: #ee4d5d !important;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title h1 .alphabet-speak-word,
  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title h1 .alphabet-speak-word .alphabet-target-sound {
    display: inline !important;
    color: var(--experience-ink) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-title h1 .alphabet-speak-word .alphabet-target-sound {
    color: #ee4d5d !important;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-target-picture {
    top: 47% !important;
    left: 64% !important;
    width: min(26%, 230px) !important;
    height: 42% !important;
    transform: translateX(-50%) !important;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-speak-screen-view .say-coach-phonemes {
    display: none !important;
  }

  /* Check uses the same joined-word treatment as Speak: a red missing first
     letter followed by the naturally cased, navy remainder of the word. */
  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-check-view .lesson-check-word {
    color: var(--experience-ink) !important;
    font-size: clamp(52px, 7.4vw, 92px) !important;
    font-weight: 850 !important;
    gap: 0 !important;
    letter-spacing: -.065em !important;
    line-height: .94 !important;
    text-transform: none !important;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-check-view .lesson-check-word .lesson-check-blank {
    color: #ee4d5d !important;
  }
}

/* Unit 01 Learn: introduce the short-A sound before the learner moves on to
   listening and speaking. */
#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-learn-grid .lesson-focus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
}

#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note {
  width: min(100%, 500px);
  padding: 16px 18px;
  border: 1px solid #c9e0ee;
  border-radius: 18px;
  color: var(--experience-ink);
  background: #f5fbff;
}

#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note > span {
  display: block;
  margin-bottom: 4px;
  color: #368f9c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note strong {
  display: block;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.1;
}

#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note strong b,
#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note p b {
  color: #ee4d5d;
}

#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note p {
  display: block !important;
  margin: 7px 0 0;
  color: #35516f;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 650;
  line-height: 1.45;
}

@media (min-width: 761px) {
  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note p {
    white-space: nowrap;
  }
}

#app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note em {
  font-style: normal;
}

@media (max-width: 760px) {
  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-learn-grid .lesson-focus {
    align-items: center;
  }

  #app main.learning-screen.lesson-story-mode[data-publication="alphabet"] .alphabet-short-vowel-note {
    text-align: center;
  }
}

/* Practice Story is its own story-game picker, never the general practice
   home that contains lesson and game actions. */
#app main.practice-story-menu-screen {
  min-height: 100dvh;
  padding: clamp(20px, 4vw, 54px) clamp(14px, 3.4vw, 42px) clamp(40px, 5vw, 76px);
  background:
    radial-gradient(circle at 92% 4%, rgba(99, 211, 199, .19), transparent 25%),
    linear-gradient(180deg, #f5faff 0%, #edf7fb 100%);
}

.practice-story-hub {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid #cfe1ef;
  border-radius: 28px;
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 16px 38px rgba(34, 77, 123, .10);
}

.practice-story-hub__heading { max-width: 650px; }
.practice-story-hub__heading .eyebrow,
.practice-story-hub__unit-heading p {
  margin: 0 0 7px;
  color: #257bd0;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
}

.practice-story-hub__heading h2,
.practice-story-hub__unit-heading h3 {
  margin: 0;
  color: #1d426d;
  font-weight: 950;
  letter-spacing: -.045em;
}

.practice-story-hub__heading h2 { font-size: clamp(30px, 3.7vw, 46px); }
.practice-story-hub__heading > p:last-child {
  margin: 10px 0 0;
  color: #607890;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.practice-story-hub__heading > p:last-child b { color: #237fc2; }

.practice-story-course-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: clamp(20px, 2.8vw, 30px) 0 26px;
}

.practice-story-course-tab {
  min-height: 72px;
  padding: 12px;
  border: 1px solid #cbdfee;
  border-radius: 17px;
  color: #365878;
  background: #f7fbff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.practice-story-course-tab span,
.practice-story-course-tab small { display: block; }
.practice-story-course-tab span { font-size: 15px; font-weight: 950; }
.practice-story-course-tab small { margin-top: 4px; color: #7690a6; font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practice-story-course-tab:hover,
.practice-story-course-tab:focus-visible,
.practice-story-course-tab.is-active {
  border-color: transparent;
  outline: 0;
  color: #fff;
  background: linear-gradient(135deg, #267ed9, #36bba1);
  box-shadow: 0 9px 19px rgba(40, 124, 206, .23);
  transform: translateY(-2px);
}
.practice-story-course-tab.is-active small { color: rgba(255, 255, 255, .79); }

.practice-story-hub__unit-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.practice-story-hub__unit-heading h3 { font-size: clamp(23px, 2.5vw, 32px); }
.practice-story-hub__unit-heading > span {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #b9d8f0;
  border-radius: 999px;
  color: #277bc2;
  background: #f2faff;
  font-size: 12px;
  font-weight: 900;
}

.practice-story-grid { padding: 0 !important; border: 0 !important; background: transparent !important; }
.practice-story-unit-card { position: relative; }
.practice-story-unit-card__open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: #237bc5;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}
.practice-story-unit-card:hover .practice-story-unit-card__open,
.practice-story-unit-card:focus-visible .practice-story-unit-card__open { color: #179e8d; }

/* Practice Story cards: the existing story illustration sits on a raised toy
   block.  Only the card presentation changes; each unit keeps its own scene. */
.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card {
  grid-template-rows: minmax(118px, 132px) minmax(42px, auto);
  gap: 12px;
  min-height: 196px;
  overflow: visible;
  padding: 12px 12px 14px;
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media {
  isolation: isolate;
  overflow: visible;
  border-radius: 17px;
  background: transparent;
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media::before,
.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media::after {
  position: absolute;
  z-index: -1;
  content: "";
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media::before {
  inset: 9px 7px 2px;
  border: 1px solid #b6d2df;
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(238, 249, 252, .96) 60%, rgba(197, 225, 236, .98));
  box-shadow:
    0 8px 0 #c5dee7,
    0 14px 18px rgba(31, 86, 116, .18),
    inset 0 2px 0 rgba(255, 255, 255, .96),
    inset 0 -3px 0 rgba(110, 162, 184, .14);
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media::after {
  inset: 17px 16px 11px;
  border: 1px solid rgba(136, 181, 199, .56);
  border-radius: 13px;
  box-shadow: inset 0 5px 8px rgba(73, 130, 153, .14), inset 0 1px 0 rgba(255, 255, 255, .88);
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media > .menu-card-scene-art {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% - 26px);
  height: calc(100% - 20px);
  margin: 4px 13px 16px;
  padding: 3px 7px;
  border-radius: 13px;
  background: transparent;
  filter: drop-shadow(0 7px 7px rgba(26, 79, 105, .18));
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__unit-badge {
  z-index: 3;
  top: 5px;
  left: 7px;
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card > strong {
  min-height: 0;
  padding: 0 3px;
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card:hover .unit-menu-card__media::before,
.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card:focus-visible .unit-menu-card__media::before {
  border-color: #6bbbc8;
  box-shadow:
    0 10px 0 #a9d9dd,
    0 18px 21px rgba(24, 118, 136, .23),
    inset 0 2px 0 #fff,
    inset 0 -3px 0 rgba(71, 157, 157, .18);
}

@media (max-width: 760px) {
  .story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card {
    grid-template-rows: 102px minmax(40px, auto);
    min-height: 172px;
    gap: 9px;
    padding: 9px 9px 11px;
  }

  .story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media::before {
    inset: 7px 5px 1px;
    border-radius: 15px;
    box-shadow: 0 6px 0 #c5dee7, 0 10px 14px rgba(31, 86, 116, .16), inset 0 1px 0 #fff;
  }

  .story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media::after {
    inset: 13px 11px 8px;
    border-radius: 10px;
  }

  .story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card .unit-menu-card__media > .menu-card-scene-art {
    width: calc(100% - 18px);
    height: calc(100% - 15px);
    margin: 3px 9px 12px;
    padding: 2px 4px;
    border-radius: 10px;
  }
}

@media (max-width: 760px) {
  #app main.practice-story-menu-screen { padding: 14px 10px 32px; }
  .practice-story-hub { padding: 20px 14px; border-radius: 22px; }
  .practice-story-course-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .practice-story-course-tab { min-height: 62px; padding: 10px; border-radius: 14px; }
  .practice-story-course-tab span { font-size: 13px; }
  .practice-story-hub__unit-heading { align-items: center; }
  .practice-story-hub__unit-heading h3 { font-size: 23px; }
}

/* src/common-menu-flow.css */
/*
  Every primary menu follows the same two-stage navigation contract:
  path cards (First Weekly / Practice), then four course cards.
  This late stylesheet deliberately wins over game-only layout rules.
*/
#app main.shared-menu-path-screen {
  padding: 0;
}

#app main.shared-menu-path-screen .game-path-identity-hub {
  width: 100%;
  max-width: none;
}

#app main.shared-course-selection-screen {
  padding: 0;
}

#app main.shared-course-selection-screen .shared-course-selection-hub {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(18px, 2.6vw, 30px);
}

#app main.shared-course-selection-screen .shared-course-selection-hub .general-game-course-hub__grid {
  gap: 15px;
}

#app main.shared-course-selection-screen .shared-course-selection-hub .general-game-channel {
  height: 260px;
  min-height: 260px;
}

@media (max-width: 720px) {
  #app main.shared-course-selection-screen .shared-course-selection-hub .general-game-channel {
    height: 235px;
    min-height: 235px;
  }
}

/* src/commercial-consistency-contract.css */
/*
 * Commercial consistency contract
 *
 * Home is a single learning doorway across First Weekly and Practice:
 * one banner, one finder, one four-column unit card, and direct Lesson/Game
 * actions. Course artwork is allowed to change; the frame never does.
 */
:root {
  --commercial-navy: #183b63;
  --commercial-copy: #526c87;
  --commercial-line: #cfe0ef;
  --commercial-surface: #ffffff;
  --commercial-radius: 18px;
  --commercial-card-radius: 16px;
  --commercial-shadow: 0 10px 24px rgba(41, 78, 119, .10);
  --commercial-lesson: #2169c8;
  --commercial-lesson-soft: #edf6ff;
  --commercial-game: #16845f;
  --commercial-game-soft: #eefbf5;
}

/* Practice uses the same banner anatomy as every other primary menu. */
.practice-course-home {
  gap: 18px;
  padding: 0 0 22px;
}

.practice-course-home__hero {
  min-height: clamp(292px, 22vw, 340px);
  height: clamp(292px, 22vw, 340px);
  margin: 0;
  padding: clamp(30px, 3.2vw, 48px);
  border-color: #cfdfef;
  border-radius: 26px;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 43%, rgba(255, 255, 255, .43) 65%, rgba(255, 255, 255, 0) 81%),
    var(--practice-art) right center / cover no-repeat,
    #fff;
  box-shadow: 0 13px 29px rgba(41, 78, 119, .11);
}

.practice-course-home__hero-copy {
  gap: 7px;
  width: min(38%, 470px);
}

.practice-course-home__hero-copy > p {
  color: #2188d2;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.practice-course-home__hero h1 {
  color: #173d6c !important;
  font-size: clamp(34px, 3.15vw, 48px) !important;
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .98 !important;
}

.practice-course-home__hero h1 > span { display: block; }

.practice-course-home__hero-copy > span {
  max-width: 430px;
  color: #4d6b8b;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 760;
  line-height: 1.45;
}

/* The chips repeat letters already taught by the cards, and the second heading
   repeated the banner copy. Both are intentionally omitted from the product UI. */
.practice-course-home__targets,
.practice-course-home__heading { display: none; }

/* Exactly one finder follows every Home banner. */
.practice-course-home__finder {
  grid-template-columns: minmax(185px, 1fr) minmax(185px, 1fr) minmax(240px, 1.25fr) auto;
  gap: 10px;
  padding: 13px 15px;
  border-color: var(--commercial-line);
  border-radius: var(--commercial-radius);
  box-shadow: 0 7px 18px rgba(41, 78, 119, .08);
}

.practice-course-home__finder label > span {
  color: #526a82;
  font-size: 10px;
  font-weight: 900;
}

.practice-course-home__finder select,
.practice-course-home__finder input,
.practice-course-home__finder button {
  min-height: 40px;
  border-color: #bdd2e7;
  border-radius: 11px;
  font-size: 13px;
}

/* First Weekly and Practice Home cards share dimension, image area, title and
   direct actions. Only their supplied artwork and learner target can differ. */
.course-map.unit-menu-grid .home-unit-card,
.practice-course-home__card {
  position: relative;
  grid-template-rows: 132px minmax(47px, auto) 38px;
  min-height: 236px;
  overflow: hidden;
  border: 1px solid #d2e0ef;
  border-radius: var(--commercial-card-radius);
  background: var(--commercial-surface);
  box-shadow: 0 8px 18px rgba(39, 71, 111, .08);
}

.course-map.unit-menu-grid .home-unit-card {
  display: grid;
  gap: 0;
  padding: 0;
}

.course-map.unit-menu-grid .home-unit-card__media,
.practice-course-home__card-art {
  position: relative;
  height: 132px;
  min-height: 132px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #e5edf5;
  border-radius: 0;
  /* Home artwork is presented on the same white canvas as the phoneme cards.
     Do not let the older blue-gray thumbnail backdrop show in letterboxed
     image margins. */
  background-color: #fff;
}

.course-map.unit-menu-grid .home-unit-card__media > .menu-card-scene-art,
.course-map.unit-menu-grid .home-unit-card__media > .menu-card-word-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  box-shadow: none;
}

.course-map.unit-menu-grid .home-unit-card > strong,
.practice-course-home__card-copy h3 {
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 9px 11px 7px;
  color: #183554;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.12;
}

.course-map.unit-menu-grid .home-unit-card .unit-menu-card__unit-badge,
.practice-course-home__card-copy p {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: #174e91;
  color: #fff;
  box-shadow: 0 3px 8px rgba(18, 57, 100, .22);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1;
}

.practice-course-home__card-copy {
  display: grid;
  min-height: 0;
  padding: 0;
}

.practice-course-home__card-copy > span { display: none; }

.course-map .home-unit-card-actions,
.practice-course-home__card-actions {
  /* Lesson and game are two equal choices, but neither should be pushed to a
   * card edge.  Keep their compact control group in the card centre. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 3px 9px 8px;
}

.course-map .home-unit-card-action,
.practice-course-home__card-actions button {
  display: inline-flex;
  flex: 0 1 112px;
  width: 112px;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #9ac5ff;
  border-radius: 9px;
  background: var(--commercial-lesson-soft);
  color: var(--commercial-lesson);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.course-map .home-unit-card-action--game,
.practice-course-home__card-actions button + button {
  border-color: #9bd7bf;
  background: var(--commercial-game-soft);
  color: var(--commercial-game);
}

.course-map .home-unit-card:hover,
.practice-course-home__card:hover {
  border-color: #91bdf5;
  box-shadow: 0 12px 24px rgba(39, 71, 111, .13);
  transform: translateY(-2px);
}

/* Course-selection cards keep the same surface and eliminate their repeated
   explanatory microcopy. The selected course name remains the single label. */
.shared-course-selection-hub .general-game-channel,
.game-menu-hub .game-menu-choice {
  border-radius: var(--commercial-card-radius);
  border-color: var(--commercial-line);
  box-shadow: var(--commercial-shadow);
}

.shared-course-selection-hub .general-game-channel small,
.shared-course-selection-hub .general-game-channel em,
.game-menu-hub .game-menu-choice small,
.game-menu-hub .game-menu-choice em { display: none; }

/* Course selectors now carry one title only.  Their former copy panel washed
   out most of the artwork, so every course card uses a compact lower-left
   reading layer instead of a full-height white veil. */
#app .shared-course-selection-hub .general-game-channel::after,
#app .game-menu-hub .game-menu-choice::after {
  background:
    radial-gradient(ellipse 82% 88% at 5% 100%,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .85) 31%,
      rgba(255, 255, 255, .50) 51%,
      rgba(255, 255, 255, .12) 68%,
      rgba(255, 255, 255, 0) 82%);
}

#app .shared-course-selection-hub .general-game-channel__copy,
#app .game-menu-hub .game-menu-choice__content {
  width: min(48%, 320px) !important;
  align-content: end !important;
  padding: clamp(18px, 2.1vw, 24px) !important;
}

/* Practice Story artwork was supplied with an opaque white rectangle.  Blend
   that white canvas into the existing blue story frame so only the illustration
   is visible, without replacing or altering any source artwork. */
.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card
  .unit-menu-card__media > .menu-card-scene-art {
  mix-blend-mode: multiply;
}

/* A story choice is an illustration, not a framed object.  Remove the
   translucent blue toy frame, its inner glass panel, and its cast shadow so
   the learner sees only the story artwork on the card's clean surface. */
.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card
  .unit-menu-card__media::before,
.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card
  .unit-menu-card__media::after {
  display: none;
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card
  .unit-menu-card__media {
  overflow: hidden;
  background: transparent;
}

.story-menu-screen .course-map.unit-menu-grid .practice-story-unit-card
  .unit-menu-card__media > .menu-card-scene-art {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: none;
}

/* Some supplied menu illustrations have transparent edges while others retain
   a white canvas.  Use the card's white surface for both so no pale-blue bar
   appears around an otherwise white illustration.  The source artwork stays
   unchanged. */
#app main.game-menu-screen.unit-menu-screen .course-map.unit-menu-grid
  .unit-menu-card__media,
#app .course-card-gallery__art {
  background: #fff;
}

/* Story cards can mix supplied transparent art and supplied art on an opaque
   white canvas.  Let both sit directly on the existing card surface so a
   white rectangle never interrupts a review card's background. */
#app main.story-menu-screen .course-map.unit-menu-grid .unit-menu-card--story
  .unit-menu-card__media {
  background: transparent;
}

#app main.story-menu-screen .course-map.unit-menu-grid .unit-menu-card--story
  .unit-menu-card__media > .menu-card-scene-art {
  background: transparent;
  mix-blend-mode: multiply;
}

@media (max-width: 720px) {
  .practice-course-home { gap: 13px; }

  .practice-course-home__hero {
    min-height: 246px;
    height: 246px;
    padding: 25px 22px;
    border-radius: 20px;
    background-size: cover;
  }

  .practice-course-home__hero-copy { width: min(60%, 310px); }

  .practice-course-home__hero h1 { font-size: clamp(30px, 9vw, 42px) !important; }
  .practice-course-home__hero-copy > span { font-size: 12px; }

  .practice-course-home__finder {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }

  .practice-course-home__finder label:last-of-type { grid-column: 1 / -1; }
  .practice-course-home__finder button { grid-column: 1 / -1; }

  .course-map.unit-menu-grid .home-unit-card,
  .practice-course-home__card {
    grid-template-rows: 116px minmax(45px, auto) 38px;
    min-height: 214px;
  }

  .course-map.unit-menu-grid .home-unit-card__media,
  .practice-course-home__card-art {
    height: 116px;
    min-height: 116px;
  }
}

/* src/commercial-home.css */
.commercial-home-screen {
  display: grid;
  gap: 22px;
  padding-bottom: 56px;
}

.commercial-home-screen > section + section {
  margin-top: 0 !important;
}

.commercial-home-intro,
.commercial-home-method,
.commercial-home-guide {
  border: 1px solid #d7e5ef;
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(30, 72, 103, .10);
}

.commercial-home-intro {
  padding: clamp(25px, 3.4vw, 48px);
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 102%, rgba(255, 196, 107, .22) 0 17%, transparent 17.2%),
    radial-gradient(circle at 90% 0%, rgba(84, 192, 190, .16) 0 24%, transparent 24.2%),
    linear-gradient(135deg, #fffdf8, #f5fbff 58%, #effafb);
}

.commercial-home-kicker {
  margin: 0 0 8px;
  color: #197f9b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.commercial-home-intro h2,
.commercial-home-method h2,
.commercial-home-guide h2 {
  margin: 0;
  color: #153b63;
  font-size: clamp(27px, 3vw, 42px);
  letter-spacing: -.055em;
  line-height: 1.15;
}

.commercial-home-intro__copy > p:not(.commercial-home-kicker),
.commercial-home-method header > p:not(.commercial-home-kicker),
.commercial-home-guide > div > p:not(.commercial-home-kicker) {
  max-width: 680px;
  margin: 13px 0 0;
  color: #58718a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
}

.commercial-home-intro__actions,
.commercial-home-guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 21px;
}

.commercial-home-button {
  display: inline-flex;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  font: 900 14px/1 "Segoe UI", "Malgun Gothic", sans-serif;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.commercial-home-button:hover { transform: translateY(-2px); }

.commercial-home-button--primary {
  background: linear-gradient(135deg, #176db4, #269aa9);
  color: #fff;
  box-shadow: 0 11px 19px rgba(27, 118, 171, .24);
}

.commercial-home-button--secondary {
  border-color: #9bcfe0;
  background: #fff;
  color: #176891;
}

.commercial-home-courses {
  padding-top: clamp(24px, 3vw, 36px);
  border: 1px solid #d9e6ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 13px 28px rgba(30, 72, 103, .07);
}

.commercial-home-courses .game-menu-hub__heading {
  padding: 0 clamp(22px, 3vw, 38px);
}

.commercial-home-courses .game-menu-hub__choices {
  padding: clamp(19px, 2.6vw, 30px) clamp(16px, 2.4vw, 30px) clamp(22px, 3vw, 34px);
}

.commercial-home-method {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(25px, 4vw, 64px);
  padding: clamp(25px, 3.4vw, 45px);
  background: #fff;
}

.commercial-home-method__steps {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.commercial-home-method__steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: start;
  padding: 15px;
  border: 1px solid #e0ebf3;
  border-radius: 15px;
  background: linear-gradient(135deg, #fbfdff, #f5faff);
}

.commercial-home-method__steps li > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: #e6f5f4;
  color: #187f89;
  font-size: 11px;
  font-weight: 950;
}

.commercial-home-method__steps h3 {
  margin: 0;
  color: #173d66;
  font-size: 16px;
  letter-spacing: -.025em;
}

.commercial-home-method__steps p {
  margin: 5px 0 0;
  color: #60788e;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.commercial-home-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: clamp(25px, 3.4vw, 44px);
  border-color: #143e66;
  background: linear-gradient(125deg, #123e67, #1a6084 62%, #188b93);
  color: #fff;
}

.commercial-home-guide h2 { color: #fff; }
.commercial-home-guide .commercial-home-kicker { color: #a9e7e5; }
.commercial-home-guide > div > p:not(.commercial-home-kicker) { color: #d0e9ed; }
.commercial-home-guide__actions { margin-top: 0; }
.commercial-home-button--light { background: #fff; color: #14527a; }
.commercial-home-button--outline { border-color: rgba(255,255,255,.56); background: transparent; color: #fff; }

@media (max-width: 860px) {
  .commercial-home-method,
  .commercial-home-guide { grid-template-columns: 1fr; }
  .commercial-home-guide__actions { margin-top: 0; }
}

@media (max-width: 620px) {
  .commercial-home-screen { gap: 14px; padding-bottom: 32px; }
  .commercial-home-intro,
  .commercial-home-method,
  .commercial-home-guide { padding: 22px 18px; border-radius: 18px; }
  .commercial-home-intro h2,
  .commercial-home-method h2,
  .commercial-home-guide h2 { font-size: 27px; }
  .commercial-home-intro__actions,
  .commercial-home-guide__actions { display: grid; grid-template-columns: 1fr; }
  .commercial-home-button { width: 100%; }
  .commercial-home-courses { padding-top: 22px; border-radius: 18px; }
  .commercial-home-courses .game-menu-hub__heading { padding: 0 18px; }
  .commercial-home-courses .game-menu-hub__choices { padding: 17px 12px 18px; }
}

/* src/menu-copy-system.css */
/*
 * Shared menu system
 *
 * Each visual role has one desktop frame across Home, Lesson, Game, Story,
 * Weekly and Curriculum.  The page keeps its supplied artwork and actions;
 * only repeated helper copy is removed.
 */

:root {
  --menu-copy-ink: #173a66;
  --menu-banner-max-width: 1240px;
  --menu-banner-desktop-height: 260px;
  --menu-banner-mobile-height: 190px;
  --menu-entry-card-height: 340px;
  --menu-course-card-height: 260px;
  --menu-course-card-title-size: clamp(21px, 1.8vw, 26px);
  --menu-course-card-title-line-height: 1.16;
  --menu-unit-card-height: 236px;
  --menu-card-gap: 15px;
  --menu-support-copy-size: clamp(12px, 1vw, 15px);
  --menu-support-copy-gap: 8px;
  --menu-support-copy-line-height: 1.35;
}

/* Banner role: every menu uses the same compact hero frame. */
#app .menu-page-banner,
#app main[data-publication^="phonics-"] .menu-page-banner,
#app .weekly-art-banner {
  width: min(100%, var(--menu-banner-max-width)) !important;
  height: var(--menu-banner-desktop-height) !important;
  min-height: var(--menu-banner-desktop-height) !important;
  margin: 0 auto 24px !important;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  #app .menu-page-banner,
  #app main[data-publication^="phonics-"] .menu-page-banner,
  #app .weekly-art-banner {
    width: calc(100% - 24px) !important;
    height: var(--menu-banner-mobile-height) !important;
    min-height: var(--menu-banner-mobile-height) !important;
    margin: 0 auto 16px !important;
  }
}

#app .menu-page-banner__eyebrow,
#app .menu-page-banner__copy > p:not(.menu-page-banner__eyebrow),
#app .practice-course-home__hero-copy > p,
#app .practice-course-home__hero-copy > span {
  display: none !important;
}
/* Supporting copy is limited to menu heroes and two-path selection cards. */
#app .menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy,
#app .menu-support-card .game-menu-choice__content > .menu-support-copy {
  display: block !important;
  margin: var(--menu-support-copy-gap) 0 0 !important;
  color: #526f8d !important;
  font-size: var(--menu-support-copy-size) !important;
  font-weight: 800 !important;
  line-height: var(--menu-support-copy-line-height) !important;
  letter-spacing: -.01em;
}
#app .menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy {
  max-inline-size: 31ch;
}
#app .menu-page-banner--supporting-copy .menu-page-banner__copy {
  gap: 0 !important;
}

#app .menu-page-banner__copy h1,
#app .practice-course-home__hero h1 {
  margin: 0 !important;
  color: var(--menu-copy-ink) !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98 !important;
}

/* Section role: keep the decision question, remove explanatory small copy. */
#app .game-menu-hub__heading > p,
#app .general-game-course-hub > header > p,
#app .practice-story-hub__unit-heading p,
#app .curriculum-path-picker__heading > p {
  display: none !important;
}

/* Menu-entry role: the two first choices always fill one two-column board. */
#app .game-menu-hub__choices {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: var(--menu-card-gap) !important;
}

#app .game-menu-hub .game-menu-choice {
  width: auto !important;
  height: var(--menu-entry-card-height) !important;
  min-height: var(--menu-entry-card-height) !important;
}

#app .game-menu-choice__content {
  align-content: end !important;
  padding: 32px !important;
}

/* Every navigation entry card keeps its full artwork. A shared dark lower
   gradient makes the white title readable without a white background panel. */
#app .game-menu-hub .game-menu-choice::after {
  background: linear-gradient(180deg,
    rgba(9, 31, 56, 0) 38%,
    rgba(9, 31, 56, .14) 59%,
    rgba(9, 31, 56, .66) 100%) !important;
}

#app .game-menu-choice__content > :not(strong) {
  display: none !important;
}

#app .game-menu-choice__content strong {
  color: #fff !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  text-shadow: 0 2px 8px rgba(4, 22, 43, .58);
  word-break: keep-all;
}
#app .menu-support-card .game-menu-choice__content {
  gap: 0 !important;
}
#app .menu-support-card .game-menu-choice__content > .menu-support-copy {
  color: #fff !important;
  max-inline-size: 27ch;
  text-shadow: 0 1px 5px rgba(4, 22, 43, .5);
  word-break: keep-all;
}

/* Lesson artwork deliberately leaves the left side clear.  Give its exact
   course names enough line length so a word such as “레슨” never splits. */
#app .home-course-path-hub .game-menu-choice__content,
#app .lesson-menu-hub .game-menu-choice__content {
  width: min(72%, 420px) !important;
}

/* Course-selection role: every menu uses the same two-column course board. */
#app .shared-course-selection-hub .general-game-course-hub__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: var(--menu-card-gap) !important;
}

#app .shared-course-selection-hub .general-game-channel {
  width: auto !important;
  height: var(--menu-course-card-height) !important;
  min-height: var(--menu-course-card-height) !important;
}

/* Course art remains fully visible. A subtle dark lower gradient keeps the
   white title readable without adding any white background panel. */
#app .shared-course-selection-hub .general-game-channel::after {
  background: linear-gradient(180deg,
    rgba(9, 31, 56, 0) 38%,
    rgba(9, 31, 56, .14) 59%,
    rgba(9, 31, 56, .66) 100%) !important;
}

#app .shared-course-selection-hub .general-game-channel__copy {
  width: min(58%, 380px) !important;
  min-height: 100% !important;
  align-self: end;
  justify-self: start;
  align-content: end !important;
  margin: 0;
  padding: clamp(18px, 2.1vw, 24px) !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app .general-game-channel__copy > :not(strong) {
  display: none !important;
}

/* Every four-course board uses this one title treatment.  Reserving two
   lines keeps the title baseline aligned whether a course name wraps or not. */
#app .shared-course-selection-hub .general-game-channel__copy strong {
  color: #fff !important;
  display: block;
  min-block-size: 2.32em;
  font-size: var(--menu-course-card-title-size) !important;
  line-height: var(--menu-course-card-title-line-height);
  letter-spacing: -.035em;
  text-shadow: 0 2px 8px rgba(4, 22, 43, .58);
  word-break: keep-all;
}

@media (max-width: 720px) {
  #app .shared-course-selection-hub .general-game-channel__copy {
    width: min(68%, 360px) !important;
    margin: 0;
    padding: 18px !important;
  }
}

/* The game catalogue uses a fixed desktop reading width.  Keep the whole
 * catalogue frame centered so its banner, finder, and four-column cards share
 * equal space on both sides of the viewport. */
#app main.game-menu-screen.unit-menu-screen {
  margin: 34px auto 60px !important;
}

/* Unit role: all unit libraries fill the board in four equal readable cards. */
#app .course-map.unit-menu-grid,
#app .first-weekly-phoneme-grid,
#app .alphabet-weekly-phase__cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin-inline: 0 !important;
  gap: var(--menu-card-gap) !important;
}

/* The alphabet letter library has no board padding of its own.  Match its
   usable card board to the padded game/story unit board so this unit role
   keeps the exact same 266 × 210 desktop frame everywhere. */
@media (min-width: 961px) {
  #app .first-weekly-phoneme-grid {
    width: 100% !important;
    margin-inline: auto !important;
  }
}

/* General games keep the same unboxed First Weekly home board as the lesson
   menu. Their individual game picture and title are deliberately unchanged. */
#app main.game-menu-screen.unit-menu-screen {
  margin: 34px 0 60px;
  padding: 0;
  background: transparent;
}

#app main.game-menu-screen.unit-menu-screen .home-finder {
  width: 100% !important;
  gap: 10px !important;
  min-height: 93px !important;
  margin: 20px 0 0 !important;
  padding: 14px !important;
  border: 1.25px solid #dbe8f5 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 8px 22px rgba(31, 72, 118, .055) !important;
}

#app main.game-menu-screen.unit-menu-screen .home-finder select,
#app main.game-menu-screen.unit-menu-screen .home-finder input {
  min-height: 42px;
  border-radius: 11px;
  font-size: 13.3333px;
  font-weight: 850;
}

#app main.game-menu-screen.unit-menu-screen .home-finder button {
  min-height: 48px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 900;
}

#app main.game-menu-screen.unit-menu-screen .course-map.unit-menu-grid {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card {
  grid-template-rows: 132px minmax(34px, 1fr);
  gap: 6px;
  height: var(--menu-unit-card-height);
  min-height: var(--menu-unit-card-height);
  padding: 12px;
  border: 1.25px solid #d8e3ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 22px rgba(20, 34, 58, .08);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card.active,
#app main.game-menu-screen.unit-menu-screen .unit-menu-card:hover,
#app main.game-menu-screen.unit-menu-screen .unit-menu-card:focus-visible {
  border-color: rgba(39, 111, 230, .56);
  box-shadow: 0 0 0 3px rgba(39, 111, 230, .11), 0 15px 28px rgba(20, 34, 58, .12);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card.review-unit {
  border-color: #f1bc50;
  background: linear-gradient(180deg, #fffaf0, #fff0d1);
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card > strong {
  color: #173a66;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* Every game card has one compact explicit launch control. */
#app main.game-menu-screen.unit-menu-screen .unit-menu-card--game {
  grid-template-rows: 132px minmax(34px, 1fr) 30px;
  cursor: default;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card--game > strong {
  align-self: center;
  justify-self: stretch;
  text-align: center;
}

#app .unit-menu-card__menu-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #91ddbf;
  border-radius: 8px;
  background: #f3fffa;
  color: #16845f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card__game-action,
#app .course-map.unit-menu-grid .unit-menu-card--with-action .unit-menu-card__menu-action {
  justify-self: center;
  align-self: end;
  width: 160px;
  min-height: 30px;
  margin: 0;
  padding: 0 12px;
  cursor: pointer;
}

#app .course-map.unit-menu-grid .unit-menu-card--with-action {
  grid-template-rows: 132px minmax(34px, 1fr) 30px;
  cursor: pointer;
}

#app .course-map.unit-menu-grid .unit-menu-card--with-action > strong {
  align-self: center;
  justify-self: stretch;
  text-align: center;
}

#app .course-map.unit-menu-grid .unit-menu-card--lesson .unit-menu-card__menu-action {
  border-color: #a9caee;
  background: #eef7ff;
  color: #1c68ba;
}

/* Lesson launch cards use a clear horizontal action bar at their base.  The
   lesson library had only a small, low-contrast text button, so its action
   was easy to miss compared with the game and story entry cards. */
#app .course-map.unit-menu-grid .unit-menu-card--lesson,
#app .first-weekly-phoneme-card {
  grid-template-rows: 132px minmax(30px, 1fr) 38px;
}

#app .course-map.unit-menu-grid .unit-menu-card--lesson .unit-menu-card__menu-action,
#app .first-weekly-phoneme-card__lesson-action {
  align-self: end;
  justify-self: stretch;
  width: auto;
  min-height: 38px;
  margin: 0 -12px -12px;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid #a9caee;
  border-radius: 0;
  background: linear-gradient(90deg, #eaf6ff, #d8edff);
  color: #1c68ba;
  font-weight: 1000;
  letter-spacing: .01em;
}

#app .course-map.unit-menu-grid .unit-menu-card--story .unit-menu-card__menu-action,
#app .course-map.unit-menu-grid .unit-menu-card--story-maker .unit-menu-card__menu-action {
  border-color: #d5a8e9;
  background: #fbf0ff;
  color: #8d3fa9;
}

/* Hero banner hierarchy v3
 *
 * Everyday-life artwork is the banner, not an illustration parked beside a
 * white copy column.  Let the supplied scene fill the complete frame, then
 * place only a soft readability veil behind the live copy.  Nested routes
 * keep the same visual language in a shorter section marker. */
#app .menu-page-banner--hero,
#app main[data-publication^="phonics-"] .menu-page-banner--hero {
  width: min(100%, var(--menu-banner-max-width)) !important;
  height: clamp(260px, 16vw, 280px) !important;
  min-height: 260px !important;
  padding: 28px clamp(34px, 4.2vw, 62px) !important;
  border: 1px solid rgba(205, 222, 232, .78) !important;
  border-radius: 30px !important;
  background: #eef6f8 !important;
  box-shadow: 0 22px 48px rgba(38, 72, 101, .14) !important;
}

#app .menu-page-banner--section,
#app main[data-publication^="phonics-"] .menu-page-banner--section {
  width: min(100%, var(--menu-banner-max-width)) !important;
  height: clamp(260px, 16vw, 280px) !important;
  min-height: 260px !important;
  margin-bottom: 18px !important;
  padding: 28px clamp(34px, 4.2vw, 62px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(205, 222, 232, .78) !important;
  background: #eef6f8 !important;
  box-shadow: 0 22px 48px rgba(38, 72, 101, .14) !important;
}

#app .menu-page-banner--hero::before,
#app main[data-publication^="phonics-"] .menu-page-banner--hero::before,
#app .menu-page-banner--section::before,
#app main[data-publication^="phonics-"] .menu-page-banner--section::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg,
      rgba(250, 253, 255, .95) 0%,
      rgba(250, 253, 255, .88) 25%,
      rgba(250, 253, 255, .64) 39%,
      rgba(250, 253, 255, .22) 54%,
      transparent 70%),
    linear-gradient(0deg, rgba(18, 46, 70, .08), transparent 42%) !important;
}

#app .menu-page-banner--hero .menu-page-banner__object,
#app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__object {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  transform: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#app .menu-page-banner--section .menu-page-banner__object,
#app main[data-publication^="phonics-"] .menu-page-banner--section .menu-page-banner__object {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: center 44% !important;
  transform: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Keep the important action in each supplied daily-life scene inside the
   shallow banner crop.  These are crop choices only; the artwork is intact. */
#app .menu-page-banner--alphabet-adventure .menu-page-banner__object { object-position: center 56% !important; }
#app .menu-page-banner--lesson .menu-page-banner__object { object-position: center 43% !important; }
#app .menu-page-banner--games .menu-page-banner__object { object-position: center 48% !important; }
#app .menu-page-banner--story .menu-page-banner__object,
#app main[data-publication^="phonics-"] .menu-page-banner--story .menu-page-banner__object {
  object-position: center 28% !important;
}
#app .menu-page-banner--weekly .menu-page-banner__object { object-position: center 54% !important; }
#app .menu-page-banner--curriculum .menu-page-banner__object { object-position: center 57% !important; }
#app .menu-page-banner--tuition .menu-page-banner__object { object-position: center 55% !important; }
#app .menu-page-banner--my-page .menu-page-banner__object { object-position: center 50% !important; }

#app .menu-page-banner--hero .menu-page-banner__copy,
#app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__copy {
  width: min(45%, 515px) !important;
  gap: 0 !important;
  padding: 18px 22px 18px 0;
  border-radius: 20px;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, .3));
}

#app .menu-page-banner--section .menu-page-banner__copy,
#app main[data-publication^="phonics-"] .menu-page-banner--section .menu-page-banner__copy {
  width: min(45%, 515px) !important;
  gap: 0 !important;
  padding: 18px 22px 18px 0;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .55);
}

#app .menu-page-banner--hero .menu-page-banner__eyebrow,
#app .menu-page-banner--section .menu-page-banner__eyebrow,
#app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__eyebrow,
#app main[data-publication^="phonics-"] .menu-page-banner--section .menu-page-banner__eyebrow {
  display: block !important;
  margin: 0 0 7px !important;
  color: #2b78b6 !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .11em !important;
}

#app .menu-page-banner--section.menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy,
#app main[data-publication^="phonics-"] .menu-page-banner--section.menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy {
  display: block !important;
  max-inline-size: 34ch !important;
  margin-top: 10px !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.42 !important;
  word-break: keep-all;
}

#app .menu-page-banner--hero.menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy,
#app main[data-publication^="phonics-"] .menu-page-banner--hero.menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy {
  display: block !important;
  max-inline-size: 34ch !important;
  margin-top: 10px !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.42 !important;
  word-break: keep-all;
}

#app .menu-page-banner__title-lines > span,
#app main[data-publication^="phonics-"] .menu-page-banner__title-lines > span {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

#app .menu-page-banner--hero.menu-page-banner--title-short .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--hero.menu-page-banner--title-short .menu-page-banner__copy h1 {
  font-size: clamp(42px, 3.5vw, 50px) !important;
}

#app .menu-page-banner--hero.menu-page-banner--title-medium .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--hero.menu-page-banner--title-medium .menu-page-banner__copy h1 {
  font-size: clamp(38px, 3.15vw, 46px) !important;
}

#app .menu-page-banner--hero.menu-page-banner--title-long .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--hero.menu-page-banner--title-long .menu-page-banner__copy h1 {
  font-size: clamp(32px, 2.75vw, 40px) !important;
}

#app .menu-page-banner--section.menu-page-banner--title-short .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--section.menu-page-banner--title-short .menu-page-banner__copy h1 {
  font-size: clamp(42px, 3.5vw, 50px) !important;
}

#app .menu-page-banner--section.menu-page-banner--title-medium .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--section.menu-page-banner--title-medium .menu-page-banner__copy h1 {
  font-size: clamp(38px, 3.15vw, 46px) !important;
}

#app .menu-page-banner--section.menu-page-banner--title-long .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--section.menu-page-banner--title-long .menu-page-banner__copy h1 {
  font-size: clamp(32px, 2.75vw, 40px) !important;
}

#app .menu-page-banner--hero .menu-page-banner__copy h1,
#app .menu-page-banner--section .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__copy h1,
#app main[data-publication^="phonics-"] .menu-page-banner--section .menu-page-banner__copy h1 {
  line-height: 1.03 !important;
  letter-spacing: -.055em !important;
}

@media (max-width: 760px) {
  #app .menu-page-banner--hero,
  #app main[data-publication^="phonics-"] .menu-page-banner--hero {
    width: calc(100% - 24px) !important;
    height: 230px !important;
    min-height: 230px !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
  }

  #app .menu-page-banner--section,
  #app main[data-publication^="phonics-"] .menu-page-banner--section {
    width: calc(100% - 24px) !important;
    height: 230px !important;
    min-height: 230px !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
  }

  #app .menu-page-banner--hero .menu-page-banner__object,
  #app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__object {
    width: 100% !important;
    opacity: 1 !important;
    object-position: 62% center !important;
  }

  #app .menu-page-banner--section .menu-page-banner__object,
  #app main[data-publication^="phonics-"] .menu-page-banner--section .menu-page-banner__object {
    width: 100% !important;
    opacity: 1 !important;
    object-position: 64% center !important;
  }

  #app .menu-page-banner--story .menu-page-banner__object,
  #app main[data-publication^="phonics-"] .menu-page-banner--story .menu-page-banner__object {
    object-position: center 28% !important;
  }

  #app .menu-page-banner--hero .menu-page-banner__copy,
  #app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__copy {
    width: 68% !important;
    padding: 8px 0 !important;
  }

  #app .menu-page-banner--section .menu-page-banner__copy,
  #app main[data-publication^="phonics-"] .menu-page-banner--section .menu-page-banner__copy {
    width: 68% !important;
    padding: 8px 0 !important;
  }

  #app .menu-page-banner--hero .menu-page-banner__eyebrow,
  #app .menu-page-banner--section .menu-page-banner__eyebrow {
    margin-bottom: 5px !important;
    font-size: 9px !important;
  }

  #app .menu-page-banner--hero.menu-page-banner--title-short .menu-page-banner__copy h1 { font-size: clamp(28px, 7.4vw, 34px) !important; }
  #app .menu-page-banner--hero.menu-page-banner--title-medium .menu-page-banner__copy h1 { font-size: clamp(25px, 6.7vw, 31px) !important; }
  #app .menu-page-banner--hero.menu-page-banner--title-long .menu-page-banner__copy h1 { font-size: clamp(18px, 5vw, 24px) !important; }
  #app .menu-page-banner--section.menu-page-banner--title-short .menu-page-banner__copy h1 { font-size: clamp(28px, 7.4vw, 34px) !important; }
  #app .menu-page-banner--section.menu-page-banner--title-medium .menu-page-banner__copy h1 { font-size: clamp(25px, 6.7vw, 31px) !important; }
  #app .menu-page-banner--section.menu-page-banner--title-long .menu-page-banner__copy h1 { font-size: clamp(18px, 5vw, 24px) !important; }

  #app .menu-page-banner--hero.menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy {
    max-inline-size: 25ch !important;
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #app .menu-page-banner--section.menu-page-banner--supporting-copy .menu-page-banner__copy > .menu-support-copy {
    max-inline-size: 25ch !important;
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

/* The three course names are short labels, not display headlines. Keep their
   baseline and single-line treatment consistent across the home cards. */
#app .home-course-path-hub.home-course-path-hub .game-menu-choice__content {
  width: min(80%, 440px) !important;
}

#app .home-course-path-hub.home-course-path-hub .game-menu-choice__content strong {
  max-inline-size: none;
  font-size: clamp(20px, 1.65vw, 25px) !important;
  letter-spacing: -.06em;
  line-height: 1.12;
  white-space: nowrap;
}

/* Story, Story Maker, and Weekly cards use the same compact play control as
   the practice-home cards; the card itself still keeps its existing route. */
#app .course-map.unit-menu-grid .unit-menu-card--story .unit-menu-card__play-action,
#app .course-map.unit-menu-grid .unit-menu-card--story-maker .unit-menu-card__play-action {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #e8f8ef;
  color: #078b63;
  font-size: 13px;
}

#app .course-map.unit-menu-grid .unit-menu-card--story .unit-menu-card__play-action:hover,
#app .course-map.unit-menu-grid .unit-menu-card--story-maker .unit-menu-card__play-action:hover {
  background: #d8f3e5;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card__game-action:hover,
#app main.game-menu-screen.unit-menu-screen .unit-menu-card__game-action:focus-visible {
  border-color: #48bd87;
  background: #e4f9ef;
  outline: none;
}

#app main.game-menu-screen.unit-menu-screen .unit-menu-card__game-action:focus-visible {
  box-shadow: 0 0 0 3px rgba(72, 189, 135, .22);
}

@media (max-width: 720px) {
  #app main.game-menu-screen.unit-menu-screen .unit-menu-card {
    grid-template-rows: 100px minmax(34px, 1fr);
    height: 214px;
    min-height: 214px;
    padding: 10px;
  }
  #app main.game-menu-screen.unit-menu-screen .unit-menu-card__media,
  #app main.game-menu-screen.unit-menu-screen .menu-card-word-art { height: 100px; }
  #app main.game-menu-screen.unit-menu-screen .unit-menu-card--game {
    grid-template-rows: 100px minmax(32px, 1fr) 28px;
  }
  #app main.game-menu-screen.unit-menu-screen .unit-menu-card__game-action {
    width: min(144px, 100%);
    min-height: 28px;
    font-size: 11px;
  }

  #app .course-map.unit-menu-grid .unit-menu-card--with-action {
    grid-template-rows: 100px minmax(32px, 1fr) 28px;
  }

  #app .course-map.unit-menu-grid .unit-menu-card--with-action .unit-menu-card__menu-action {
    width: min(144px, 100%);
    min-height: 28px;
    font-size: 11px;
  }

  #app .course-map.unit-menu-grid .unit-menu-card--story .unit-menu-card__play-action,
  #app .course-map.unit-menu-grid .unit-menu-card--story-maker .unit-menu-card__play-action {
    width: 38px;
    min-width: 38px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
  }

  #app .course-map.unit-menu-grid .unit-menu-card--lesson {
    grid-template-rows: 100px minmax(32px, 1fr) 34px;
  }

  #app .course-map.unit-menu-grid .unit-menu-card--lesson .unit-menu-card__menu-action {
    width: auto;
    min-height: 34px;
    margin: 0 -10px -10px;
  }
}

@media (max-width: 640px) {
  #app .first-weekly-phoneme-card {
    grid-template-rows: 100px minmax(34px, 1fr) 34px;
  }

  #app .first-weekly-phoneme-card__lesson-action {
    min-height: 34px;
    margin: 0 -10px -10px;
    font-size: 11px;
  }
}

/* Story Maker uses the same finder-and-card sequence as Story view. */
#app main.practice-story-menu-screen {
  min-height: 0;
  padding: 0;
  background: transparent;
}

#app main.practice-story-menu-screen .practice-story-unit-card {
  overflow: hidden;
  padding: 12px;
}

#app main.practice-story-menu-screen .practice-story-unit-card .unit-menu-card__media {
  overflow: hidden;
  border-radius: 14px;
}

#app main.practice-story-menu-screen .practice-story-unit-card .unit-menu-card__media > .menu-card-scene-art {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: inherit;
}

#app .course-map.unit-menu-grid .unit-menu-card,
#app .first-weekly-phoneme-card,
#app .alphabet-weekly-card {
  width: auto !important;
  height: var(--menu-unit-card-height) !important;
  min-height: var(--menu-unit-card-height) !important;
  box-sizing: border-box;
}

/* Home unit cards include two direct actions, therefore use their existing
   taller action-card frame instead of the compact unit preview. */
#app .course-map.unit-menu-grid .home-unit-card {
  width: auto !important;
  height: 236px !important;
  min-height: 236px !important;
  box-sizing: border-box;
}

#app .unit-menu-card__kicker,
#app .unit-menu-card__unit-badge,
#app .unit-menu-card > small,
#app .course-map.unit-menu-grid .home-unit-card .curriculum-card-kicker {
  display: none !important;
}

#app .course-map.unit-menu-grid .unit-menu-card > strong,
#app .course-map.unit-menu-grid .home-unit-card > strong {
  color: var(--menu-copy-ink);
  font-size: clamp(17px, 1.5vw, 21px) !important;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.12;
}

@media (max-width: 960px) {
  #app .course-map.unit-menu-grid,
  #app .first-weekly-phoneme-grid,
  #app .alphabet-weekly-phase__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #app .game-menu-hub__choices,
  #app .shared-course-selection-hub .general-game-course-hub__grid {
    grid-template-columns: 1fr !important;
  }

  #app .game-menu-hub .game-menu-choice {
    height: 278px !important;
    min-height: 278px !important;
  }

  #app .shared-course-selection-hub .general-game-channel {
    height: 235px !important;
    min-height: 235px !important;
  }

  #app .course-map.unit-menu-grid .unit-menu-card,
  #app .course-map.unit-menu-grid .home-unit-card,
  #app .first-weekly-phoneme-card,
  #app .alphabet-weekly-card {
    height: 214px !important;
    min-height: 214px !important;
  }
}

/* src/account-language-header.css */
/* Account and learning-language controls are kept above the primary course menu. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: auto;
  min-height: 0;
  display: block !important;
  padding: 0;
  overflow: visible;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 26px rgba(20,34,58,.06);
}

/* The game-surface stylesheet locks the former one-row header as flex. */
#app > .topbar { display: block !important; }

.site-utility-bar {
  border-bottom: 1px solid #e6eef7;
  background: linear-gradient(90deg, #f8fbff 0%, #f2fbff 48%, #f6fffb 100%);
}

.site-utility-bar__inner,
.topbar__main {
  width: min(var(--menu-page-width, 1180px), calc(100vw - 36px)) !important;
  margin: 0 auto;
}

.site-utility-bar__inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
}

.topbar__main {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar__main .topbar-nav {
  display: flex;
  gap: 7px;
  padding: 4px;
  border: 1px solid #d9e6f5;
  border-radius: 16px;
  background: rgba(248,251,255,.86);
}

.topbar__main .topbar-nav button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: #4d5f78;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 850;
}

.topbar__main .topbar-nav button:hover,
.topbar__main .topbar-nav button.active {
  color: #123e73;
  background: #fff;
  box-shadow: 0 4px 12px rgba(33,86,143,.10);
}

.utility-language-button,
.utility-login-button {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #2c496c;
  font-weight: 800;
  box-shadow: none;
}

.utility-language-button {
  min-height: 34px;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 11px;
  text-align: left;
}

.utility-language-button:hover,
.utility-language-button:focus-visible {
  outline: none;
  background: rgba(53,127,205,.08);
}

.utility-language-button__globe {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2477bd;
  background: #e0f4ff;
  font-size: 18px;
  font-weight: 900;
}

.utility-language-button__copy {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.utility-language-button__copy small {
  color: #8190a4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
}

.utility-language-button__copy strong {
  color: #294b70;
  font-size: 11px;
  white-space: nowrap;
}

.utility-language-button__chevron {
  color: #6a87a6;
  font-size: 15px;
  line-height: 1;
}

.utility-divider {
  width: 1px;
  height: 20px;
  background: #dbe6f1;
}

.utility-login-button {
  min-height: 32px;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #c9deef;
  border-radius: 10px;
  color: #165c99;
  background: #fff;
  font-size: 11px;
}

.utility-login-button:hover,
.utility-login-button:focus-visible {
  outline: 0;
  border-color: #80bce7;
  background: #edf8ff;
}

.utility-modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.utility-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15,37,67,.38);
  backdrop-filter: blur(4px);
}

.utility-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  padding: 26px;
  border: 1px solid rgba(201,220,239,.95);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8,34,67,.27);
}

.utility-modal__dialog--account { width: min(448px, 100%); }

.utility-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.utility-modal__eyebrow {
  margin: 0 0 5px;
  color: #237bbf;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
}

.utility-modal__header h2 {
  margin: 0;
  color: #17395f;
  font-size: clamp(21px, 4vw, 28px);
  line-height: 1.2;
}

.utility-modal__header p:not(.utility-modal__eyebrow) {
  margin: 7px 0 0;
  color: #677a92;
  font-size: 13px;
  line-height: 1.45;
}

.utility-modal__close {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #d8e5f1;
  border-radius: 50%;
  color: #54708f;
  background: #f9fbfe;
  box-shadow: none;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.language-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.language-choice {
  min-height: 68px;
  display: grid;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dce8f3;
  border-radius: 15px;
  color: #24496f;
  background: #fff;
  text-align: left;
  box-shadow: none;
}

.language-choice:hover,
.language-choice:focus-visible {
  outline: 0;
  border-color: #80bdec;
  background: #f4fbff;
}

.language-choice.is-selected {
  border-color: #49a6e4;
  background: linear-gradient(135deg, #eef9ff, #f2fff9);
  box-shadow: 0 7px 16px rgba(41,137,203,.13);
}

.language-choice__flag { font-size: 28px; line-height: 1; }
.language-choice__copy { display: grid; gap: 3px; min-width: 0; }
.language-choice__copy strong { font-size: 14px; }
.language-choice__copy small { overflow: hidden; color: #74869d; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.language-choice__check { color: #12855e; font-size: 17px; font-weight: 950; text-align: center; }

.account-panel__copy {
  margin: 0 0 18px;
  color: #5f728c;
  font-size: 14px;
  line-height: 1.55;
}

.account-login-form { display: grid; gap: 13px; }
.account-login-form label { display: grid; gap: 7px; color: #315474; font-size: 12px; font-weight: 850; }
.account-login-form input { min-height: 46px; padding: 0 13px; border: 1px solid #cdddec; border-radius: 12px; color: #193e64; background: #fbfdff; font-size: 14px; }
.account-login-form input:focus { outline: 3px solid rgba(60,157,225,.18); border-color: #4eaae5; }
.account-login-form__hint { margin: -1px 0 2px; color: #798aa0; font-size: 11px; line-height: 1.45; }
.account-login-form__submit { min-height: 48px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #257bc3, #24aa8c); box-shadow: 0 9px 18px rgba(37,123,195,.22); font-weight: 900; }

.account-panel__profile { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; padding: 13px; border: 1px solid #d6e6f4; border-radius: 14px; background: #f8fcff; }
.account-panel__profile > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2f8bd0, #37ba9b); font-size: 11px; }
.account-panel__profile div { display: grid; gap: 2px; min-width: 0; }
.account-panel__profile small { color: #71849a; font-size: 10px; font-weight: 800; }
.account-panel__profile strong { overflow: hidden; color: #24496f; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-panel__actions { display: flex; justify-content: flex-end; gap: 9px; }
.account-panel__actions .secondary,
.account-panel__logout { min-height: 40px; padding: 0 14px; border-radius: 11px; font-size: 12px; box-shadow: none; }
.account-panel__logout { border: 1px solid #f0c8c5; color: #b23f39; background: #fffafa; font-weight: 850; }

.utility-notice {
  position: fixed;
  z-index: 250;
  right: 24px;
  bottom: 24px;
  max-width: min(370px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid #c7e8dd;
  border-radius: 13px;
  color: #195b4b;
  background: #f1fff9;
  box-shadow: 0 16px 35px rgba(17,77,65,.16);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 960px) {
  .topbar__main { min-height: 68px; }
  .topbar__main > .topbar-nav { display: none; }
  .topbar__main .topbar-mobile-menu { position: relative; display: block; margin-left: auto; }
  .topbar__main .topbar-mobile-menu summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid #d7e5f2; border-radius: 13px; color: #173a66; background: #fff; font-size: 0; font-weight: 850; list-style: none; cursor: pointer; box-shadow: 0 7px 16px rgba(20,54,94,.08); }
  .topbar__main .topbar-mobile-menu summary::before { content: attr(aria-label); font-size: 12px; }
  .topbar__main .topbar-mobile-menu summary::after { content: "☰"; color: #287ac0; font-size: 15px; line-height: 1; }
  .topbar__main .topbar-mobile-menu summary span { display: none; }
  .topbar__main .topbar-mobile-menu > nav { position: absolute; top: calc(100% + 9px); right: 0; z-index: 70; display: grid; width: min(252px, calc(100vw - 28px)); padding: 7px; border: 1px solid #d7e5f2; border-radius: 16px; overflow: visible; background: #fff; box-shadow: 0 18px 38px rgba(20,54,94,.16); }
  .topbar__main .topbar-mobile-menu > nav button { width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; color: #274767; background: transparent; text-align: left; font-size: 13px; font-weight: 800; box-shadow: none; }
  .topbar__main .topbar-mobile-menu > nav button:hover,
  .topbar__main .topbar-mobile-menu > nav button.active { color: #176cc0; background: #edf6ff; }
}

@media (max-width: 640px) {
  .site-utility-bar__inner,
  .topbar__main { width: min(var(--menu-page-width, 1180px), calc(100vw - 20px)); }
  .site-utility-bar__inner { min-height: 39px; gap: 7px; }
  .utility-language-button { padding-inline: 2px; gap: 5px; }
  .utility-language-button__globe { width: 22px; height: 22px; font-size: 16px; }
  .utility-language-button__copy small { display: none; }
  .utility-language-button__copy strong { font-size: 10px; }
  .utility-divider { height: 18px; }
  .utility-login-button { min-height: 29px; padding: 0 9px; font-size: 10px; }
  .topbar__main { min-height: 68px; }
  .topbar__main .brand.brand--fixed { flex-basis: 184px; width: 184px; height: 64px; }
  .utility-modal { align-items: end; padding: 12px; }
  .utility-modal__dialog { max-height: calc(100vh - 24px); padding: 20px; border-radius: 20px; }
  .utility-modal__header { margin-bottom: 16px; }
  .utility-modal__header p:not(.utility-modal__eyebrow) { font-size: 12px; }
  .language-choice-grid { grid-template-columns: 1fr; gap: 8px; }
  .language-choice { min-height: 58px; grid-template-columns: 30px 1fr 18px; padding: 8px 10px; }
  .language-choice__flag { font-size: 24px; }
  .utility-notice { right: 12px; bottom: 12px; font-size: 12px; }
}

/* Account and language controls: high-contrast, touch-friendly service header. */
.site-utility-bar {
  border-bottom-color: #dcecf1;
  background:
    radial-gradient(circle at 83% 50%, rgba(43,185,157,.16), transparent 27%),
    linear-gradient(105deg, #f7fbff 0%, #f1f9ff 52%, #f1fbf8 100%);
}

.site-utility-bar__inner {
  min-height: 58px;
}

.utility-action-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: clamp(18px, 3vw, 56px);
}

.utility-language-button {
  min-height: 46px;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border: 1px solid #c9dfe8;
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 6px 16px rgba(31,83,113,.07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.utility-language-button:hover,
.utility-language-button:focus-visible {
  border-color: #4da8c9;
  background: #fff;
  box-shadow: 0 10px 20px rgba(31,105,145,.15);
  transform: translateY(-1px);
}

.utility-language-button__flag {
  width: 34px;
  height: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(30,63,93,.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(22,52,80,.13);
}

.utility-language-button__flag img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.utility-language-button__copy { gap: 2px; }
.utility-language-button__copy small {
  color: #72879a;
  font-size: 9px;
  letter-spacing: .08em;
}
.utility-language-button__copy strong {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1c3d5c;
  font-size: 12px;
  font-weight: 900;
}
.utility-language-button__copy i { color: #7fa0b8; font-style: normal; }
.utility-language-button__chevron { color: #2b799b; font-size: 17px; }

.utility-divider {
  width: 1px;
  height: 31px;
  margin-inline: 1px;
  background: linear-gradient(transparent, #c8dde8, transparent);
}

.utility-login-button {
  min-height: 46px;
  min-width: 0;
  justify-content: center;
  padding: 5px 17px;
  border: 1px solid #217bb7;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #1975b6, #1d9f99);
  box-shadow: 0 8px 17px rgba(27,119,174,.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.utility-login-button:hover,
.utility-login-button:focus-visible {
  border-color: #217bb7;
  color: #fff;
  background: linear-gradient(135deg, #1169aa, #168b85);
  box-shadow: 0 11px 21px rgba(27,119,174,.28);
  filter: saturate(1.08);
  transform: translateY(-1px);
}

.utility-login-button__label {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.utility-modal {

.utility-signup-button {
  min-height: 46px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  border: 1px solid #9bc5dd;
  border-radius: 15px;
  color: #17689b;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 14px rgba(31,115,157,.10);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.utility-signup-button:hover,
.utility-signup-button:focus-visible {
  outline: 0;
  border-color: #4b9dc7;
  color: #105f91;
  background: #f1fbff;
  box-shadow: 0 9px 18px rgba(31,115,157,.16);
  transform: translateY(-1px);
}

.utility-signup-button__label { font-size: 13px; font-weight: 950; line-height: 1; white-space: nowrap; }
  padding: 24px;
  background: rgba(10,39,68,.06);
}

.utility-modal__backdrop {
  background: rgba(12,37,64,.44);
  backdrop-filter: blur(8px) saturate(.9);
}

.utility-modal__dialog {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  padding: 0;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(7,31,57,.32);
}

.utility-modal__dialog--account { width: min(476px, 100%); }

.utility-modal__header {
  margin: 0;
  padding: 28px 30px 18px;
  border-bottom: 1px solid #e5eff4;
  background:
    radial-gradient(circle at 92% 24%, rgba(49,190,163,.16), transparent 34%),
    linear-gradient(135deg, #f4fbff, #f7fffc);
}

.utility-modal__eyebrow {
  margin-bottom: 7px;
  color: #1777a9;
  font-size: 10px;
  letter-spacing: .14em;
}

.utility-modal__header h2 { color: #193a59; font-size: clamp(24px, 4vw, 30px); font-weight: 950; }
.utility-modal__header p:not(.utility-modal__eyebrow) { max-width: 540px; margin-top: 9px; color: #5e758c; font-size: 13px; }
.utility-modal__close { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-color: #d7e7ee; color: #47708d; background: rgba(255,255,255,.75); font-size: 26px; }
.utility-modal__close:hover { color: #155d8c; background: #fff; }

.language-choice-grid {
  padding: 22px 30px 30px;
  gap: 12px;
}

.language-choice {
  min-height: 78px;
  grid-template-columns: 45px 1fr 24px;
  gap: 12px;
  padding: 11px 13px;
  border-color: #d8e7ed;
  border-radius: 17px;
  background: linear-gradient(135deg, #fff, #fbfdff);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.language-choice:hover,
.language-choice:focus-visible {
  border-color: #6cbdcb;
  background: #f4fcff;
  box-shadow: 0 8px 18px rgba(31,117,151,.10);
  transform: translateY(-1px);
}

.language-choice.is-selected {
  border-color: #2b9dac;
  background: linear-gradient(135deg, #ebfaff, #effcf6);
  box-shadow: inset 0 0 0 1px rgba(35,161,150,.12), 0 10px 20px rgba(28,131,142,.13);
}

.language-choice__flag {
  width: 43px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31,58,82,.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 7px rgba(23,54,80,.12);
}

.language-choice__flag img { width: 100%; height: 100%; display: block; object-fit: cover; }
.language-choice__copy { gap: 4px; }
.language-choice__copy strong { color: #244765; font-size: 14px; font-weight: 950; }
.language-choice__copy small { color: #718398; font-size: 11px; font-weight: 750; }
.language-choice__check { color: #138b6b; font-size: 20px; }

.account-login-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 26px 14px;
  padding: 15px 16px;
  border: 1px solid #d6edf0;
  border-radius: 18px;
  background: linear-gradient(135deg, #effaff, #effcf7);
}

.account-login-hero > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #2a87c8, #32b597);
  box-shadow: 0 8px 16px rgba(34,133,179,.22);
  font-size: 21px;
}

.account-login-hero div { display: grid; gap: 4px; }
.account-login-hero small { color: #287d9a; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.account-login-hero strong { color: #1e405f; font-size: 18px; }
.account-panel__copy { margin: 0 26px 20px; color: #587087; font-size: 13px; }

.account-login-form { gap: 15px; padding: 0 26px 28px; }
.account-signup-form { gap: 11px; padding-bottom: 22px; }
.account-login-form label { gap: 8px; color: #2b4c68; font-size: 12px; font-weight: 900; }
.account-input-shell { position: relative; display: block; }
.account-input-shell > i { width: 29px; position: absolute; top: 50%; left: 12px; z-index: 1; color: #3384af; font-style: normal; font-size: 17px; font-weight: 900; text-align: center; transform: translateY(-50%); }
.account-login-form input,
.account-login-form select { width: 100%; min-height: 52px; padding: 0 14px 0 50px; border-color: #c9dce7; border-radius: 14px; color: #1d405f; background: #fbfdff; font-size: 14px; box-sizing: border-box; }
.account-login-form input:focus,
.account-login-form select:focus { outline: 3px solid rgba(39,151,190,.17); border-color: #318fb4; background: #fff; }
.account-login-form select { cursor: pointer; }
.account-login-form__hint { margin: -2px 0 0; padding: 10px 12px; border-radius: 11px; color: #647d92; background: #f5f9fc; font-size: 11px; line-height: 1.55; }
.account-login-form__submit { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-radius: 14px; background: linear-gradient(135deg, #1678b9, #1eaa91); box-shadow: 0 12px 21px rgba(31,130,174,.25); font-size: 14px; }
.account-form-switch { margin: -3px 0 0; color: #6b8193; font-size: 12px; text-align: center; }
.account-form-switch button { min-height: auto; padding: 0; border: 0; color: #1678b9; background: transparent; box-shadow: none; font: inherit; font-weight: 950; text-decoration: underline; text-underline-offset: 3px; }
.account-admin-entry { margin: -3px 0 0; text-align: center; }
.account-admin-entry a { color: #60778b; font-size: 11px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.account-form-error { margin: -5px 0 0; padding: 10px 12px; border: 1px solid #f0b9b5; border-radius: 11px; color: #b4423c; background: #fff6f5; font-size: 12px; font-weight: 800; line-height: 1.45; }
.account-login-form__submit b { font-size: 20px; }
.account-login-form__submit:hover { filter: brightness(1.04); transform: translateY(-1px); }

.account-panel__profile { margin: 24px 26px 15px; padding: 14px; border-color: #d3e7ef; border-radius: 17px; background: linear-gradient(135deg, #f3fbff, #f4fdf9); }
.account-panel__profile > span { width: 40px; height: 40px; background: linear-gradient(135deg, #2c85c5, #32ad92); font-size: 15px; font-weight: 950; }
.account-panel__actions { padding: 0 26px 28px; }

@media (max-width: 640px) {
  .site-utility-bar__inner { min-height: 54px; }
  .utility-action-group { width: 100%; justify-content: flex-end; gap: 7px; margin-right: 0; }
  .utility-language-button { min-height: 42px; padding: 4px 7px 4px 5px; border-radius: 13px; }
  .utility-language-button__flag { width: 29px; height: 22px; }
  .utility-language-button__copy small { display: block; font-size: 8px; }
  .utility-language-button__copy strong { font-size: 10px; }
  .utility-language-button__chevron { font-size: 14px; }
  .utility-divider { height: 26px; }
  .utility-signup-button { min-height: 42px; padding: 4px 12px; border-radius: 13px; }
  .utility-login-button { min-width: 0; min-height: 42px; padding: 4px 14px; border-radius: 13px; }
  .utility-login-button__label { font-size: 12px; }
  .utility-modal { align-items: end; padding: 10px; }
  .utility-modal__dialog { max-height: calc(100vh - 20px); border-radius: 22px; }
  .utility-modal__header { padding: 22px 20px 15px; }
  .utility-modal__header h2 { font-size: 23px; }
  .language-choice-grid { grid-template-columns: 1fr; padding: 16px 20px 22px; gap: 8px; }
  .language-choice { min-height: 63px; grid-template-columns: 39px 1fr 22px; gap: 10px; padding: 8px 10px; border-radius: 14px; }
  .language-choice__flag { width: 37px; height: 26px; }
  .account-login-hero { margin: 18px 20px 12px; }
  .account-panel__copy { margin-inline: 20px; }
  .account-login-form { padding: 0 20px 22px; }
  .account-panel__profile { margin-inline: 20px; }
  .account-panel__actions { padding: 0 20px 22px; }
}

/* src/learner-access-control.css */
.learner-access-screen{min-height:calc(100vh - 116px);display:grid;place-items:center;padding:56px 24px;background:linear-gradient(150deg,#f4f9fc,#edf7f4)}
.learner-access-notice{position:relative;width:min(720px,100%);padding:48px;border:1px solid #d8e5eb;border-radius:28px;background:#fff;box-shadow:0 24px 70px rgba(24,58,82,.12);text-align:center;color:#173b5d}
.learner-access-notice__close{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#668197;font:400 34px/1 Arial,sans-serif;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}
.learner-access-notice__close:hover{background:#eef5f7;color:#173b5d;transform:scale(1.04)}
.learner-access-notice__close:focus-visible{outline:3px solid #2f75df;outline-offset:2px}
.learner-access-notice__icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 20px;border-radius:22px;background:linear-gradient(145deg,#e8f4fb,#e8f8f3);font-size:31px}
.learner-access-notice>p{margin:0 0 10px;color:#1f9b89;font-size:12px;font-weight:900;letter-spacing:.14em}
.learner-access-notice h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:-.04em}
.learner-access-notice>span{display:block;margin:16px auto 28px;color:#6b7f91;line-height:1.7}
.learner-access-notice dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;text-align:left}
.learner-access-notice dl div{padding:15px;border-radius:13px;background:#f4f8fa}
.learner-access-notice dt{color:#7a8e9d;font-size:11px;font-weight:800}
.learner-access-notice dd{margin:7px 0 0;color:#214967;font-size:13px;font-weight:850}
.learner-access-notice__actions{display:flex;justify-content:center;gap:10px;margin-top:28px}
.learner-access-notice__actions button{min-width:150px}
@media(max-width:620px){.learner-access-notice{padding:46px 22px 34px}.learner-access-notice__close{top:12px;right:12px}.learner-access-notice dl{grid-template-columns:1fr}.learner-access-notice__actions{display:grid}.learner-access-notice__actions button{width:100%}}

/* src/commercial-service-header.css */
/*
 * Commercial service header
 *
 * This final, scoped layer keeps the course UI intact while giving the public
 * shell a clear service hierarchy: utility actions first, brand and routes
 * second. It deliberately contains no game or lesson selectors.
 */

:root {
  /* The global header owns its own geometry. It must not inherit a page
     menu's responsive width, because every route reuses this brand and
     navigation area. */
  --service-header-shell-width: 1240px;
  --service-header-width: min(var(--service-header-shell-width), calc(100vw - 36px));
  --service-header-utility-height: 52px;
  --service-header-primary-height: 72px;
  --service-header-logo-width: 220px;
  --service-header-logo-height: 72px;
  --service-header-border-height: 4px;
  --service-header-total-height: calc(
    var(--service-header-border-height) +
    var(--service-header-utility-height) +
    var(--service-header-primary-height)
  );
  --service-ink: #173653;
  --service-muted: #61778c;
  --service-line: #d9e5ee;
  --service-blue: #176fae;
  --service-mint: #169b8b;
}

#app > .topbar {
  /* Practice has its own body typeface, so the shared public header must
     declare the main-service typeface instead of inheriting from the page. */
  font-family: "Pretendard Variable", Pretendard, "Plus Jakarta Sans", Inter, "Noto Sans KR", "Segoe UI", Arial, sans-serif;
  position: sticky;
  top: 0;
  z-index: 100;
  display: block !important;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-top: 4px solid #193b4e;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 24px rgba(23, 54, 83, .09);
  backdrop-filter: blur(16px);
}

#app > .topbar .site-utility-bar {
  border-bottom: 1px solid #e2ebf1;
  background:
    radial-gradient(circle at 85% 45%, rgba(33, 169, 145, .13), transparent 23%),
    linear-gradient(90deg, #f7fbff 0%, #f4fbff 54%, #f4fcf9 100%);
}

#app > .topbar .site-utility-bar__inner,
#app > .topbar .topbar__main {
  width: var(--service-header-width) !important;
  margin: 0 auto;
}

#app > .topbar .site-utility-bar__inner {
  min-height: var(--service-header-utility-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#app > .topbar .utility-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-right: 0;
}

#app > .topbar .utility-divider {
  display: none;
}

#app > .topbar .utility-language-button,
#app > .topbar .utility-login-button,
#app > .topbar .utility-signup-button {
  min-height: 38px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 850;
  letter-spacing: -.01em;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

#app > .topbar .utility-language-button {
  gap: 7px;
  padding: 4px 10px 4px 5px;
  border: 1px solid #cfdee8;
  color: var(--service-ink);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 3px 10px rgba(30, 76, 104, .05);
}

#app > .topbar .utility-language-button__flag {
  width: 28px;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(30, 63, 93, .13);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 54, 83, .12);
}

#app > .topbar .utility-language-button__copy {
  gap: 1px;
}

#app > .topbar .utility-language-button__copy small {
  color: #718397;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

#app > .topbar .utility-language-button__copy strong {
  color: #264760;
  font-size: 11px;
  font-weight: 950;
}

#app > .topbar .utility-language-button__chevron {
  color: #35799a;
  font-size: 15px;
}

#app > .topbar .utility-login-button {
  order: 2;
  min-width: 68px;
  padding: 4px 13px;
  border: 1px solid #a9c8dc;
  color: #176b9f;
  background: rgba(255, 255, 255, .94);
  box-shadow: none;
}

#app > .topbar .utility-login-button__label,
#app > .topbar .utility-signup-button__label {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

#app > .topbar .utility-signup-button {
  order: 3;
  min-width: 78px;
  padding: 4px 14px;
  border: 1px solid #126c9e;
  color: #fff;
  background: linear-gradient(135deg, #1675b5 0%, #168f9a 100%);
  box-shadow: 0 7px 16px rgba(20, 111, 165, .20);
}

#app > .topbar .utility-signup-button__label {
  color: #fff;
}

#app > .topbar .utility-language-button:hover,
#app > .topbar .utility-language-button:focus-visible,
#app > .topbar .utility-login-button:hover,
#app > .topbar .utility-login-button:focus-visible {
  border-color: #5ea7cc;
  background: #fff;
  box-shadow: 0 7px 15px rgba(29, 105, 150, .12);
  transform: translateY(-1px);
}

#app > .topbar .utility-signup-button:hover,
#app > .topbar .utility-signup-button:focus-visible {
  border-color: #0e668f;
  background: linear-gradient(135deg, #126ba9 0%, #10847e 100%);
  box-shadow: 0 10px 19px rgba(20, 111, 165, .26);
  transform: translateY(-1px);
}

#app > .topbar :is(button, summary):focus-visible {
  outline: 3px solid rgba(32, 141, 191, .28);
  outline-offset: 2px;
}

#app > .topbar .topbar__main {
  min-height: var(--service-header-primary-height);
  display: grid;
  grid-template-columns: minmax(var(--service-header-logo-width), 1fr) auto;
  align-items: center;
  column-gap: 30px;
}

#app > .topbar .brand-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

#app > .topbar .brand.brand--fixed {
  width: var(--service-header-logo-width);
  height: var(--service-header-logo-height);
  flex: 0 0 var(--service-header-logo-width);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app > .topbar .brand.brand--fixed:hover {
  transform: none;
  opacity: .88;
}

#app > .topbar .topbar-nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: flex-end;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#app > .topbar .topbar-nav button {
  position: relative;
  min-height: var(--service-header-primary-height);
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: #526b80;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.025em;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}

#app > .topbar .topbar-nav button::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  content: "";
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--service-blue), var(--service-mint));
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .16s ease, transform .16s ease;
}

#app > .topbar .topbar-nav button:hover {
  color: #1b638e;
  background: rgba(62, 148, 195, .055);
  transform: none;
}

#app > .topbar .topbar-nav button.active,
#app > .topbar .topbar-nav button[aria-current="page"] {
  color: #174d78;
  background: #fff;
}

#app > .topbar .topbar-nav button:hover::after,
#app > .topbar .topbar-nav button.active::after,
#app > .topbar .topbar-nav button[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

#app > .topbar .topbar-mobile-menu {
  display: none;
}

@media (max-width: 1040px) {
  #app > .topbar .topbar__main {
    min-height: 72px;
    grid-template-columns: 220px 1fr auto;
    column-gap: 14px;
  }

  #app > .topbar .topbar__main > .topbar-nav {
    display: none;
  }

  #app > .topbar .topbar-mobile-menu {
    position: relative;
    display: block;
    grid-column: 3;
  }

  #app > .topbar .topbar-mobile-menu summary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #bfd4e2;
    border-radius: 10px;
    color: #1d567d;
    background: #fff;
    box-shadow: 0 4px 12px rgba(26, 73, 104, .08);
    font-size: 12px;
    font-weight: 900;
    list-style: none;
  }

  #app > .topbar .topbar-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  #app > .topbar .topbar-mobile-menu summary::after {
    color: #197a9d;
    content: "⌄";
    font-size: 15px;
    line-height: 1;
  }

  #app > .topbar .topbar-mobile-menu summary span {
    display: none;
  }

  #app > .topbar .topbar-mobile-menu > nav {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 110;
    display: grid;
    width: min(270px, calc(100vw - 28px));
    padding: 7px;
    border: 1px solid #d3e2eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(20, 54, 83, .18);
  }

  #app > .topbar .topbar-mobile-menu > nav button {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    color: #36566e;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
  }

  #app > .topbar .topbar-mobile-menu > nav button:hover,
  #app > .topbar .topbar-mobile-menu > nav button.active {
    color: #176995;
    background: #eff9fc;
    transform: none;
  }
}

@media (max-width: 640px) {
  :root {
    --service-header-width: calc(100vw - 20px);
    --service-header-utility-height: 47px;
    --service-header-primary-height: 68px;
    --service-header-logo-width: 184px;
    --service-header-logo-height: 64px;
    --service-header-border-height: 3px;
  }

  #app > .topbar {
    border-top-width: 3px;
  }

  #app > .topbar .site-utility-bar__inner {
    min-height: var(--service-header-utility-height);
  }

  #app > .topbar .utility-action-group {
    width: 100%;
    gap: 5px;
  }

  #app > .topbar .utility-language-button,
  #app > .topbar .utility-login-button,
  #app > .topbar .utility-signup-button {
    min-height: 34px;
    border-radius: 9px;
  }

  #app > .topbar .utility-language-button {
    padding-right: 7px;
  }

  #app > .topbar .utility-language-button__flag {
    width: 25px;
    height: 19px;
  }

  #app > .topbar .utility-language-button__copy small {
    display: none;
  }

  #app > .topbar .utility-language-button__copy strong,
  #app > .topbar .utility-login-button__label,
  #app > .topbar .utility-signup-button__label {
    font-size: 11px;
  }

  #app > .topbar .utility-login-button {
    min-width: 0;
    padding-inline: 10px;
  }

  #app > .topbar .utility-signup-button {
    min-width: 0;
    padding-inline: 11px;
  }

  #app > .topbar .topbar__main {
    min-height: var(--service-header-primary-height);
    grid-template-columns: var(--service-header-logo-width) 1fr auto;
  }

  #app > .topbar .brand.brand--fixed {
    width: var(--service-header-logo-width);
    height: var(--service-header-logo-height);
    flex-basis: var(--service-header-logo-width);
  }

  #app > .topbar .topbar-mobile-menu summary {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app > .topbar *,
  #app > .topbar *::after {
    transition-duration: .01ms !important;
  }
}

/*
 * Global header contract
 *
 * Public menus keep one consistent service navigation.  Story, lesson, and
 * game players are distraction-free canvases, so their own close/back controls
 * are the only navigation shown while a learner is in an activity.
 */
#app:not(.app--immersive-story):not(:has(main.learning-screen)):not(:has(main[class*="game-screen"])) > .topbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: var(--service-header-border-height) solid #193b4e !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 8px 24px rgba(23, 54, 83, .09) !important;
}

#app > .topbar .site-utility-bar__inner,
#app > .topbar .topbar__main {
  width: var(--service-header-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#app > .topbar .topbar__main {
  display: grid !important;
  grid-template-columns: minmax(var(--service-header-logo-width), 1fr) auto !important;
  min-height: var(--service-header-primary-height) !important;
  column-gap: 30px !important;
}

#app > .topbar .brand.brand--fixed {
  width: var(--service-header-logo-width) !important;
  height: var(--service-header-logo-height) !important;
  flex-basis: var(--service-header-logo-width) !important;
}

#app > .topbar .topbar-nav,
#app > .topbar .topbar-nav button {
  font-family: inherit !important;
}

#app > .topbar .topbar-nav button {
  min-height: var(--service-header-primary-height) !important;
  padding-inline: 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* The Repeat lesson library is a public course page. Keep the shared service
   menu visible there; only the opened four-step player is distraction-free. */
body.repeat-lesson-menu #app.practice-service-shell > .pronunciation-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Reserve the vertical scrollbar gutter even for short game pages. Without
   this, a menu can move horizontally by one scrollbar width when a route has
   no page scroll. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* A fixed header leaves the document flow. Reserve its exact height on public
   pages only; player screens use the full viewport after their header is hidden. */
#app:not(.app--immersive-story):not(:has(main.learning-screen)):not(:has(main[class*="game-screen"])):not(:has(main.practice-embedded-screen)) > main {
  margin-top: calc(var(--service-header-total-height) + 26px) !important;
}

/* A reader or player must never inherit the public header or its reserved
   vertical space.  This final rule intentionally outranks older header layers. */
#app:is(.app--immersive-story, :has(main.learning-screen), :has(main[class*="game-screen"])) > .topbar {
  display: none !important;
}

#app:is(.app--immersive-story, :has(main.learning-screen), :has(main[class*="game-screen"])) > main {
  margin-top: 0 !important;
}

/* src/service-footer.css */
/* Public service footer: kept outside the learning player so it never
   competes with a lesson or game canvas. */
#app.app--public-service-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#app.app--public-service-page > main {
  flex: 1 0 auto;
}

.service-footer {
  flex: 0 0 auto;
  width: 100%;
  padding: 29px 20px 27px;
  color: #111d22;
  background: #e1e5e3;
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Segoe UI", sans-serif;
  text-align: center;
}

.service-footer__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.service-footer__support,
.service-footer__business {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  word-break: keep-all;
}

.service-footer__support {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 8px;
  font-size: 16px;
  line-height: 1.65;
}

.service-footer__support a {
  color: inherit;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.service-footer__support a:hover,
.service-footer__support a:focus-visible {
  color: #0a6282;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-footer__divider {
  color: #536067;
  font-weight: 700;
}

.service-footer__business {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.service-footer__business-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  color: #58656a;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 3px rgba(18, 30, 34, .18);
}

.service-footer__business-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

@media (max-width: 640px) {
  .service-footer {
    padding: 22px 16px 23px;
  }

  .service-footer__support,
  .service-footer__business {
    font-size: 13px;
  }

  .service-footer__support {
    gap: 0 6px;
    line-height: 1.7;
  }

  .service-footer__business {
    margin-top: 11px;
  }
}

/* src/course-card-gallery.css */
/* Shared course picker: the same unit banner and sound-card language is used
 * by First Weekly Home, Lessons, Games, Stories, and Practice Stories. */
#app .course-card-gallery {
  display: grid;
  gap: 24px;
  width: min(1240px, calc(100vw - 48px));
  margin: 0 auto 44px;
}

#app .course-card-gallery__title {
  margin: 0;
  color: #193d68;
  font-size: clamp(29px, 3vw, 43px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1.12;
}

#app .course-card-gallery__unit {
  overflow: hidden;
  border: 1px solid #d8e5f0;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 13px 28px rgba(26, 66, 109, .08);
}

#app .course-card-gallery__unit--review { border-color: #eed49b; }

#app .course-card-gallery__unit-head {
  display: grid;
  grid-template-columns: minmax(94px, .38fr) minmax(188px, .78fr) minmax(290px, 1.22fr);
  gap: 18px;
  min-height: 132px;
  padding: 19px 21px;
  background:
    linear-gradient(90deg, #fffdf8 0%, rgba(255,253,248,.97) 43%, rgba(255,253,248,.67) 71%, rgba(255,253,248,.08) 100%),
    var(--course-gallery-art) center / cover no-repeat,
    #fff8ed;
}

#app .course-card-gallery__unit-number,
#app .course-card-gallery__focus,
#app .course-card-gallery__targets {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

#app .course-card-gallery__unit-number > span {
  justify-self: start;
  padding: 8px 11px;
  border: 1px solid #f2b581;
  border-radius: 999px;
  background: #fff5e8;
  color: #a55220;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .035em;
}

#app .course-card-gallery__focus > span,
#app .course-card-gallery__targets > span {
  color: #9a5b33;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .045em;
}

#app .course-card-gallery__focus strong {
  overflow-wrap: anywhere;
  color: #173a66;
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1.08;
}

#app .course-card-gallery__target-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#app .course-card-gallery__target-list li {
  display: grid;
  min-width: 47px;
  padding: 5px 8px 6px;
  border: 1px solid #b7d2e9;
  border-radius: 9px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 8px rgba(41,82,126,.07);
  text-align: center;
}

#app .course-card-gallery__target-list b { color: #245078; font-size: 13px; line-height: 1; }
#app .course-card-gallery__target-list small { margin-top: 3px; color: #5c7891; font-size: 9px; font-weight: 850; line-height: 1; }

#app .course-card-gallery__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  padding: 14px 15px 18px;
}

#app .course-card-gallery__entry { display: grid; min-width: 0; gap: 7px; }

#app .course-card-gallery__card {
  display: grid;
  grid-template-rows: 105px minmax(38px, 1fr) 28px;
  gap: 7px;
  min-height: 216px;
  padding: 10px;
  overflow: hidden;
  border: 1.25px solid #d8e3ef;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, #fbfdff);
  box-shadow: 0 10px 22px rgba(20,34,58,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#app .course-card-gallery__entry:hover .course-card-gallery__card,
#app .course-card-gallery__entry:has(.course-card-gallery__play:focus-visible) .course-card-gallery__card {
  border-color: #77b9eb;
  box-shadow: 0 0 0 4px rgba(69,148,226,.14), 0 16px 28px rgba(20,52,91,.13);
  transform: translateY(-3px);
}

#app .course-card-gallery__art,
#app .course-card-gallery__art img { display: block; width: 100%; height: 105px; }

#app .course-card-gallery__art { overflow: hidden; border-radius: 12px; background: #edf5fb; }
#app .course-card-gallery__art img { object-fit: cover; }
#app .course-card-gallery__art > span { display: none; }
#app .course-card-gallery__art .word-image-fallback { display: grid; height: 100%; place-items: center; color: #245078; font-size: 28px; }

#app .course-card-gallery__card-title {
  display: grid;
  align-content: center;
  min-width: 0;
  overflow: hidden;
  color: #173a66;
  font-size: clamp(17px, 1.65vw, 22px);
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: 1.12;
  text-align: center;
}

#app .course-card-gallery__play {
  justify-self: center;
  width: 38px;
  height: 28px;
  padding: 0 0 0 2px;
  border: 0;
  border-radius: 999px;
  background: #e9f9ef;
  color: #16845f;
  cursor: pointer;
  font: 950 13px/1 system-ui, sans-serif;
}

#app .course-card-gallery__play:hover,
#app .course-card-gallery__play:focus-visible { background: #d8f3e5; outline: 3px solid rgba(72,189,135,.23); outline-offset: 2px; }

#app .course-card-gallery__word-list {
  justify-self: center;
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: #6653b3;
  cursor: pointer;
  font: 900 12px/1.2 "Pretendard Variable", "Segoe UI", sans-serif;
}

#app .course-card-gallery__word-list:hover,
#app .course-card-gallery__word-list:focus-visible { border-radius: 8px; background: #f4f1ff; outline: 0; box-shadow: 0 0 0 3px rgba(139,115,210,.16); }

/* First Weekly game cards retain their large scene thumbnail while exposing
 * the same direct unit-word-list affordance used by the course card gallery. */
#app .first-weekly-game-picker-screen .first-weekly-game-card-entry {
  display: grid;
  min-width: 0;
  gap: 7px;
  grid-template-rows: auto min-content;
  align-content: start;
}

#app .first-weekly-game-picker-screen .first-weekly-game-card-entry__word-list {
  justify-self: center;
  min-height: 0;
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: #6653b3;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font: 900 12px/1.2 "Pretendard Variable", "Segoe UI", sans-serif;
}

#app .first-weekly-game-picker-screen .first-weekly-game-card-entry__word-list:hover,
#app .first-weekly-game-picker-screen .first-weekly-game-card-entry__word-list:focus-visible {
  border-radius: 8px;
  background: #f4f1ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(139,115,210,.16);
}

/* Keep the word-list link outside the lesson button so either action remains clear. */
#app .first-weekly-lesson-picker-screen .first-weekly-lesson-card-entry {
  display: grid;
  min-width: 0;
  gap: 7px;
  grid-template-rows: auto min-content;
  align-content: start;
}

/* Lesson cards and their contained story-cover images share one pure-white
 * surface. The story art is contained rather than cropped, so the image
 * element itself must also be white or its unused side space appears blue. */
#app .first-weekly-lesson-picker-screen .first-weekly-lesson-word-card,
#app .first-weekly-lesson-picker-screen .first-weekly-lesson-word-card .menu-card-story-cover {
  background: #fff;
}

#app .first-weekly-lesson-picker-screen .first-weekly-lesson-card-entry__word-list {
  justify-self: center;
  min-height: 0;
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: #6653b3;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font: 900 12px/1.2 "Pretendard Variable", "Segoe UI", sans-serif;
}

#app .first-weekly-lesson-picker-screen .first-weekly-lesson-card-entry__word-list:hover,
#app .first-weekly-lesson-picker-screen .first-weekly-lesson-card-entry__word-list:focus-visible {
  border-radius: 8px;
  background: #f4f1ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(139,115,210,.16);
}

#app .lesson-word-list-screen { min-height: calc(100vh - 112px); padding: clamp(22px,4vw,52px) 16px 68px; background: linear-gradient(180deg,#f7fbff,#edf7ff); }
#app .lesson-word-list { width: min(1120px,100%); margin: auto; color: #173e62; font-family: "Pretendard Variable", "Segoe UI", sans-serif; }
#app .lesson-word-list__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: clamp(21px,3vw,34px); border: 1px solid #d6e6f2; border-radius: 25px; background: rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(35,78,122,.08); }
#app .lesson-word-list__heading .eyebrow { margin: 0 0 8px; color: #5977ad; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
#app .lesson-word-list__heading h2 { margin: 0; font-size: clamp(27px,4vw,42px); letter-spacing: -.05em; }
#app .lesson-word-list__heading p { margin: 10px 0 0; color: #55718c; font-weight: 700; }
#app .lesson-word-list__actions { display: flex; flex-wrap: wrap; gap: 8px; }
#app .lesson-word-list__actions .secondary { min-height: 40px; padding: 0 14px; border: 1px solid #cbddee; border-radius: 10px; color: #28517b; background: #fff; font: 800 13px/1 "Pretendard Variable", sans-serif; cursor: pointer; }
#app .lesson-word-list__grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
#app .lesson-word-list__item { display: grid; min-height: 222px; grid-template-rows: minmax(0,1fr) auto; gap: 10px; padding: 14px; border: 1px solid #d6e5f2; border-radius: 20px; background: #fff; box-shadow: 0 8px 18px rgba(35,78,122,.08); }
#app .lesson-word-list__picture { display: grid; min-height: 0; place-items: center; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg,#f5fbff,#eff8f3); }
#app .lesson-word-list__picture img { width: min(100%,142px); height: 126px; object-fit: contain; }
#app .lesson-word-list__item > div:last-child { display: grid; gap: 3px; text-align: center; }
#app .lesson-word-list__item small { color: #6886a5; font-size: 11px; font-weight: 900; letter-spacing: .05em; }
#app .lesson-word-list__item strong { color: #173e62; font-size: clamp(17px,2vw,22px); letter-spacing: .015em; }
@media (max-width: 840px) { #app .lesson-word-list__grid { grid-template-columns: repeat(3,minmax(0,1fr)); } #app .lesson-word-list__heading { align-items: start; flex-direction: column; } }
@media (max-width: 520px) { #app .lesson-word-list-screen { padding: 16px 12px 46px; } #app .lesson-word-list__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } #app .lesson-word-list__item { min-height: 190px; padding: 10px; } #app .lesson-word-list__picture img { height: 105px; } }

@media (max-width: 960px) {
  #app .course-card-gallery { width: min(100% - 32px, 900px); }
  #app .course-card-gallery__unit-head { grid-template-columns: minmax(92px, .38fr) minmax(180px, .75fr); }
  #app .course-card-gallery__targets { grid-column: 1 / -1; }
  #app .course-card-gallery__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #app .course-card-gallery { width: min(100% - 24px, 620px); gap: 16px; }
  #app .course-card-gallery__title { font-size: 28px; }
  #app .course-card-gallery__unit { border-radius: 17px; }
  #app .course-card-gallery__unit-head { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 17px; }
  #app .course-card-gallery__targets { grid-column: auto; }
  #app .course-card-gallery__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 11px; }
  #app .course-card-gallery__card { grid-template-rows: 88px minmax(35px, 1fr) 27px; min-height: 187px; padding: 8px; border-radius: 13px; }
  #app .course-card-gallery__art,
  #app .course-card-gallery__art img { height: 88px; border-radius: 9px; }
  #app .course-card-gallery__card-title { font-size: 17px; }
}

/* src/phonics-hunt-word-list.css */
body.phonics-hunt-word-list-open { overflow: hidden; }

.phonics-hunt-word-list-layer {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 42, 70, .66);
  backdrop-filter: blur(5px);
}

.phonics-hunt-word-list-layer[hidden] { display: none; }

.phonics-hunt-word-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #d7e5f2;
  border-radius: 25px;
  color: #183e62;
  background: #fff;
  box-shadow: 0 26px 62px rgba(10, 35, 66, .28);
  font-family: "Pretendard Variable", "Segoe UI", sans-serif;
}

.phonics-hunt-word-list__header,
.phonics-hunt-word-list__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 26px;
  background: #fff;
}

.phonics-hunt-word-list__header { border-bottom: 1px solid #dce8f2; }
.phonics-hunt-word-list__header h2 { margin: 0; font-size: clamp(24px, 3vw, 31px); letter-spacing: -.05em; }
.phonics-hunt-word-list__close,
.phonics-hunt-word-list__footer button {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid #cde0f1;
  border-radius: 11px;
  color: #315a82;
  background: #fff;
  font: 850 13px/1 "Pretendard Variable", sans-serif;
  cursor: pointer;
}

.phonics-hunt-word-list__close { font-size: 28px; line-height: .8; }
.phonics-hunt-word-list__close:hover,
.phonics-hunt-word-list__footer button:hover { border-color: #7aaee0; background: #f2f8fd; }

.phonics-hunt-word-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 12px 18px 18px;
  background: linear-gradient(180deg, #fbfdff, #f4f9fd);
}

.phonics-hunt-word-list__card {
  display: grid;
  grid-template-columns: 42px auto minmax(0, 1fr) 31px;
  align-items: center;
  min-height: 70px;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid #d6e5f1;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(34, 78, 120, .04);
}

.phonics-hunt-word-list__picture { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; }
.phonics-hunt-word-list__picture img { width: 42px; height: 42px; object-fit: contain; }
.phonics-hunt-word-list__badge { display: inline-grid; min-width: 29px; height: 31px; place-items: center; padding: 0 5px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #dd9297, #ee7064); font: 900 17px/1 Georgia, serif; }
.phonics-hunt-word-list__card strong { overflow: hidden; color: #173e62; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.phonics-hunt-word-list__listen { width: 31px; height: 31px; padding: 0; border: 1px solid #ffc6bf; border-radius: 9px; background: #fff4f1; cursor: pointer; font-size: 14px; }
.phonics-hunt-word-list__listen:hover { background: #ffe7e2; transform: translateY(-1px); }

.phonics-hunt-word-list__footer { border-top: 1px solid #dce8f2; color: #587594; font-size: 13px; font-weight: 700; }
.phonics-hunt-word-list__footer button { min-width: 82px; padding-inline: 12px; }

@media (max-width: 700px) {
  .phonics-hunt-word-list-layer { padding: 12px; }
  .phonics-hunt-word-list { max-height: calc(100vh - 24px); border-radius: 20px; }
  .phonics-hunt-word-list__header,
  .phonics-hunt-word-list__footer { padding: 14px 16px; }
  .phonics-hunt-word-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .phonics-hunt-word-list__footer span { display: none; }
}

@media (max-width: 430px) {
  .phonics-hunt-word-list__grid { grid-template-columns: 1fr; }
}

/* src/first-weekly-alphabet-library.css */
/* First Weekly Alphabet uses the same home card frame as the other First
   Weekly lesson menus.  Letter art and labels remain course-specific. */
#app main.first-weekly-alphabet-library-screen {
  display: block;
}

#app .first-weekly-alphabet-library-screen .menu-page-banner,
#app .first-weekly-alphabet-library-screen .first-weekly-alphabet-finder {
  margin-bottom: 16px;
}

#app .first-weekly-alphabet-finder {
  gap: 10px !important;
  min-height: 93px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

#app .first-weekly-alphabet-finder select,
#app .first-weekly-alphabet-finder input {
  min-height: 42px !important;
  border-radius: 11px !important;
  font-size: 13.3333px !important;
  font-weight: 850 !important;
}

#app .first-weekly-alphabet-finder button {
  min-height: 48px !important;
  border-radius: 11px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

#app .first-weekly-alphabet-library {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#app .first-weekly-alphabet-library__heading {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

#app .first-weekly-alphabet-library__heading h2 {
  margin: 0;
  color: #203d61;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: -.05em;
}

#app .first-weekly-phoneme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

#app .first-weekly-phoneme-card {
  position: relative;
  display: grid;
  grid-template-rows: 100px minmax(34px, 1fr) 30px;
  height: 210px;
  min-height: 210px;
  padding: 12px;
  overflow: hidden;
  border: 1.25px solid #d8e3ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: #203d61;
  text-align: left;
  box-shadow: 0 10px 22px rgba(20, 34, 58, .08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#app .first-weekly-phoneme-card:hover,
#app .first-weekly-phoneme-card:focus-visible {
  z-index: 1;
  border-color: rgba(39, 111, 230, .56);
  box-shadow: 0 0 0 3px rgba(39, 111, 230, .11), 0 15px 28px rgba(20, 34, 58, .12);
  outline: 0;
  transform: translateY(-3px);
}

#app .first-weekly-phoneme-card__media {
  display: grid;
  height: 100px;
  min-height: 100px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #edf5fb;
  place-items: center;
}

#app .first-weekly-phoneme-card__media img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(31, 51, 75, .13));
}

#app .first-weekly-phoneme-card__media b {
  color: var(--phoneme-card-color);
  font-size: 42px;
  font-weight: 1000;
}

#app .first-weekly-phoneme-card > strong {
  display: block;
  min-height: 0;
  margin-top: 6px;
  overflow: hidden;
  color: #173a66;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-align: left;
}

#app .first-weekly-phoneme-card__lesson-action {
  justify-self: center;
  align-self: end;
  width: min(160px, 100%);
  min-height: 30px;
}

@media (max-width: 880px) {
  #app .first-weekly-phoneme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #app .first-weekly-alphabet-library-screen .menu-page-banner,
  #app .first-weekly-alphabet-library-screen .first-weekly-alphabet-finder { margin-bottom: 12px; }
  #app .first-weekly-phoneme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  #app .first-weekly-phoneme-card { grid-template-rows: 86px minmax(34px, 1fr) 28px; height: 196px; min-height: 196px; padding: 10px; }
  #app .first-weekly-phoneme-card__media { height: 86px; min-height: 86px; }
  #app .first-weekly-phoneme-card__media img { height: 86px; }
  #app .first-weekly-phoneme-card > strong { font-size: 16px; }
  #app .first-weekly-phoneme-card__lesson-action { min-height: 28px; }
}

/* src/alphabet-card-dimension-system.css */
/*
 * Alphabet catalogue compatibility layer
 *
 * Catalogue cards use the same measured First Weekly unit-card frame across
 * every Alphabet and Phonics catalogue.  Path and course-choice cards keep
 * their own navigation scale; this contract covers the repeated unit cards.
 */

:root {
  --catalogue-card-width: 207px;
  --catalogue-card-height: 176px;
  --catalogue-board-width: 858px;
  --catalogue-card-gap: 10px;
}

@media (min-width: 961px) {
  #app .course-map.unit-menu-grid,
  #app .first-weekly-phoneme-grid,
  #app .alphabet-weekly-phase__cards {
    grid-template-columns: repeat(4, var(--catalogue-card-width)) !important;
    width: min(100%, var(--catalogue-board-width)) !important;
    margin-inline: auto !important;
    justify-content: center;
    gap: var(--catalogue-card-gap) !important;
  }

  #app .course-map.unit-menu-grid .unit-menu-card,
  #app .course-map.unit-menu-grid .home-unit-card,
  #app .first-weekly-phoneme-card,
  #app .alphabet-weekly-card {
    box-sizing: border-box;
    width: var(--catalogue-card-width) !important;
    height: var(--catalogue-card-height) !important;
    min-height: var(--catalogue-card-height) !important;
  }
}

/* src/phonics-label-polish.css */
/* Final A1/A2 detail contract.  This file is intentionally last in both
   First Weekly and Practice so a unit-specific scene cannot reintroduce a
   different typeface, a glyph underscore, or an unmeasured offset. */
#app,
.repeat-assembly-root {
  --phonics-label-font: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --phonics-word-size: 40px;
  --phonics-label-size: 30px;
  --phonics-label-weight: 1000;
  --phonics-alphabet-one-red: #e43d45;
}

/* A real blank is a geometric learning slot, never the underscore glyph. */
#app#app :is(.fizzy-letter-factory-screen, .p2u-game, .p3c-game, .p3v-game, .p3u812-game) :is(b, strong).phonics-alphabet-pattern,
#app#app .p2u-center-lock > div.phonics-alphabet-pattern,
.repeat-assembly-dialog--p2 .repeat-assembly-a1.phonics-alphabet-pattern,
.repeat-assembly-dialog--p3 .repeat-assembly-a1.phonics-alphabet-pattern {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  grid-auto-flow: column !important;
  gap: 0 !important;
  color: var(--phonics-alphabet-one-red) !important;
  font-family: var(--phonics-label-font) !important;
  font-size: var(--phonics-label-size) !important;
  font-weight: var(--phonics-label-weight) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

#app#app .phonics-alphabet-pattern > .phonics-alphabet-anchor,
.repeat-assembly-root .phonics-alphabet-pattern > .phonics-alphabet-anchor {
  box-sizing: content-box !important;
  position: static !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1em !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--phonics-alphabet-one-red) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: none !important;
}

#app#app .phonics-alphabet-pattern > .phonics-alphabet-blank,
.repeat-assembly-root .phonics-alphabet-pattern > .phonics-alphabet-blank {
  position: static !important;
  display: inline-block !important;
  flex: 0 0 .63em !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: .63em !important;
  min-width: .63em !important;
  max-width: none !important;
  height: .8em !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 3px solid var(--phonics-alphabet-one-red) !important;
  border-radius: 2px !important;
  color: var(--phonics-alphabet-one-red) !important;
  background: transparent !important;
  box-shadow: none !important;
  /* The span is empty, so it needs no glyph suppression. Keeping the
     inherited size makes its em-based width match the neighbouring letter. */
  font-size: inherit !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  line-height: 0 !important;
  text-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Every audit hit is anchored to the centre of its own moving object. */
#app .fizzy-letter-factory-screen .fizzy-counter-choice > b,
#app .p2u-game.p2u-unit-06 .p2u-island-target > b,
#app .p2u-game.p2u-unit-12 .p2u-choice.has-art > span,
#app .p3c-game.p3c-unit-01 .p3c-drop > b,
#app .p3c-game.p3c-unit-02 .p3c-airport-letter-lever > b,
#app .p3c-game.p3c-unit-05 .p3c-choice > b,
#app .p3u812-game.p3u9-game .p3u812-target > b {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Unit 12's ball label used to remain position:relative.  Applying the
   shared 50% offsets to a relative element shifted every letter down and to
   the right of its coloured ball.  Anchor this one label layer absolutely to
   the ball button while leaving the existing button and hit area untouched. */
#app .p2u-game.p2u-unit-12 .p2u-choice.has-art > span {
  position: absolute !important;
}

/* Practice P2's A2 badge is a child of the moving object and uses the shared face. */
#app main.p2w-weekly-object-screen .p2w-object .p2w-alpha2 {
  font-family: var(--phonics-label-font) !important;
  font-size: var(--phonics-label-size) !important;
  font-weight: var(--phonics-label-weight) !important;
  line-height: 1 !important;
}

/* Parent wrappers must not paint a second fallback pattern under the badge. */
#app .p3v-candy-game .p3v-monster-letter,
#app .p3u812-game.p3u8-game :is(.p3u8-postman-alphabet, .p3u8-house-alphabet) {
  font-size: 0 !important;
  line-height: 0 !important;
}

#app .p3v-candy-game .p3v-monster-letter > b,
#app .p3u812-game.p3u8-game :is(.p3u8-postman-alphabet, .p3u8-house-alphabet) > b {
  font-family: var(--phonics-label-font) !important;
  font-size: var(--phonics-label-size) !important;
  font-weight: var(--phonics-label-weight) !important;
  line-height: 1 !important;
}

#app .p3c-game.p3c-unit-06 .p3c-airport-alpha1 .p3c-airport-target > small,
#app .p3u812-game.p3u8-game :is(.p3u8-postman-alphabet, .p3u8-house-alphabet) > small,
#app .p3v-candy-game :is(.p3v-monster-letter, .p3v-food-letter) > small {
  display: none !important;
}

/* The text in every on-stage word card has the same family, weight, and size. */
#app :is(.p3c-word-line, .p3u812-word-line, .p3u10-road-word) {
  font-family: var(--phonics-label-font) !important;
  font-size: var(--phonics-word-size) !important;
  font-weight: var(--phonics-label-weight) !important;
  line-height: 1 !important;
}

/* Repeat P2/P3 previously used Arial variants and unrelated clamps. */
.repeat-assembly-root,
.repeat-assembly-root :is(.repeat-assembly-word-prompt, .repeat-assembly-completed-word, .repeat-assembly-word-applied, .repeat-assembly-result strong) {
  font-family: var(--phonics-label-font) !important;
}

.repeat-assembly-dialog--p2 :is(.repeat-assembly-word-prompt, .repeat-assembly-completed-word, .repeat-assembly-word-applied),
.repeat-assembly-dialog--p3 :is(.repeat-assembly-word-prompt, .repeat-assembly-completed-word, .repeat-assembly-word-applied),
.repeat-assembly-dialog--p2 .repeat-assembly-result strong,
.repeat-assembly-dialog--p3 .repeat-assembly-result strong {
  font-size: var(--phonics-word-size) !important;
  font-weight: var(--phonics-label-weight) !important;
  line-height: 1 !important;
}

.repeat-assembly-dialog--p2 :is(.repeat-assembly-a1, .repeat-assembly-target-complete, .repeat-assembly-object span),
.repeat-assembly-dialog--p3 :is(.repeat-assembly-a1, .repeat-assembly-target-complete, .repeat-assembly-object span) {
  font-family: var(--phonics-label-font) !important;
  font-size: var(--phonics-label-size) !important;
  font-weight: var(--phonics-label-weight) !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  #app,
  .repeat-assembly-root {
    --phonics-word-size: 30px;
    --phonics-label-size: 24px;
  }

  #app .phonics-alphabet-blank { border-bottom-width: 2px; }
}

/* src/premium-word-surface-system.css */
/*
 * Premium word-surface system — Weekly Alphabet through Phonics 3.
 * P3 Units 10 and 12 deliberately have no selector here: their rule-specific
 * road/conveyor experiences keep their own surfaces.
 */
#app {
  --premium-word-blue: #1f5fa8;
  --premium-word-red: #c93b47;
  --premium-word-card-min: 320px;
  --premium-word-card-max: 380px;
  --premium-word-card-height: 88px;
  --premium-word-card-padding: 12px 24px;
  --premium-word-card-border: 1.5px solid #d8e3ed;
  --premium-word-card-radius: 18px;
  --premium-word-card-shadow: 0 8px 20px rgba(20, 45, 76, .18);
  --premium-word-font: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

/* The companion script marks only verified word-card roots. The width is
   calculated from the rendered word, so long words gain space rather than
   losing the 40px teaching type. */
#app#app#app [data-premium-word-surface="standard"] {
  box-sizing: border-box !important;
  width: var(--premium-word-card-width, var(--premium-word-card-min)) !important;
  min-width: var(--premium-word-card-min) !important;
  max-width: var(--premium-word-card-max) !important;
  height: var(--premium-word-card-height) !important;
  min-height: var(--premium-word-card-height) !important;
  max-height: var(--premium-word-card-height) !important;
  padding: var(--premium-word-card-padding) !important;
  overflow: visible !important;
  border: var(--premium-word-card-border) !important;
  border-radius: var(--premium-word-card-radius) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--premium-word-card-shadow) !important;
}

#app#app#app [data-premium-word-surface="standard"] :is(
  .p1-single-screen-word,
  .p2u-screen-word,
  .fizzy-letter-screen > strong,
  .p3c-word-line,
  .p3u812-word-line,
  .alphabet-screen-word,
  .alphabet-action-word-letters
) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  color: var(--premium-word-blue) !important;
  font-family: var(--premium-word-font) !important;
  font-size: 40px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

#app#app#app [data-premium-word-surface="standard"] :is(
  .p1-single-screen-word,
  .p2u-screen-word,
  .fizzy-letter-screen > strong,
  .p3c-word-line,
  .p3u812-word-line,
  .alphabet-screen-word,
  .alphabet-action-word-letters
) :is(span, b, strong) {
  color: var(--premium-word-blue) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Alphabet Unit 10 owns a scene sign rather than a separate word wrapper.
   It is still the learner's word card, so its slots follow the shared card
   and type rules while retaining its existing red blank / blue hints. */
#app#app#app [data-premium-word-surface="standard"].spelling-slots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#app#app#app [data-premium-word-surface="standard"].spelling-slots span {
  font-family: var(--premium-word-font) !important;
  font-size: 40px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

#app#app#app [data-premium-word-surface="standard"].spelling-slots span.current::after {
  font-size: 1em !important;
  line-height: 1 !important;
}

#app#app#app [data-premium-word-surface="standard"] :is(
  .p1-single-screen-blank:not(.is-filled),
  .alphabet-target-letter.is-filled,
  .p2u-screen-word-answer,
  .p3-composite-word-applied,
  .p3c-word-line #p3cSlot,
  .p3u812-word-line #p3u812Slot
) {
  color: var(--premium-word-red) !important;
  border-color: var(--premium-word-red) !important;
  text-shadow: none !important;
}

#app#app#app [data-premium-word-surface="standard"] :is(
  .p1-single-screen-blank:not(.is-filled),
  .p2u-screen-word-answer,
  .p3-composite-word-blank,
  .p3u812-composite-word-blank
) {
  border-bottom-width: 4px !important;
  transform: none !important;
}

/* A resolved Alphabet 1 becomes the red letter itself. Remove the former
   blank underline instead of leaving a red bar mixed into A, I, O, or U. */
#app#app#app [data-premium-word-surface="standard"] .p1-single-screen-blank.is-filled {
  display: inline-flex !important;
  width: .64em !important;
  min-width: .64em !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--premium-word-red) !important;
  border: 0 !important;
  border-bottom-color: transparent !important;
  text-shadow: none !important;
}

/* Regular P3 results use the same 192px image square. Unit 10 road and Unit
   12 conveyor are intentionally excluded by their parent classes. */
#app#app#app :is(.p3c-game, .p3v-game) .p3c-word-screen,
#app#app#app .p3u812-game:not(.p3u10-game):not(.p3u12-game) .p3u812-word-screen {
  box-sizing: border-box !important;
  width: var(--course-word-result-card-size) !important;
  min-width: var(--course-word-result-card-size) !important;
  max-width: var(--course-word-result-card-size) !important;
  height: var(--course-word-result-card-size) !important;
  min-height: var(--course-word-result-card-size) !important;
  max-height: var(--course-word-result-card-size) !important;
  padding: var(--course-word-result-card-padding) !important;
  overflow: hidden !important;
  border: var(--premium-word-card-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--course-word-result-card-shadow) !important;
}

#app#app#app :is(.p3c-game, .p3v-game) .p3c-word-screen :is(img, .word-art),
#app#app#app .p3u812-game:not(.p3u10-game):not(.p3u12-game) .p3u812-word-screen :is(img, .word-art) {
  display: block !important;
  width: var(--course-word-result-art-size) !important;
  height: var(--course-word-result-art-size) !important;
  max-width: var(--course-word-result-art-size) !important;
  max-height: var(--course-word-result-art-size) !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 720px) {
  #app {
    --premium-word-card-min: 240px;
    --premium-word-card-max: calc(100vw - 32px);
    --premium-word-card-height: 64px;
    --premium-word-card-padding: 8px 16px;
    --premium-word-card-radius: 16px;
  }

  #app#app#app [data-premium-word-surface="standard"] :is(
    .p1-single-screen-word,
    .p2u-screen-word,
    .fizzy-letter-screen > strong,
    .p3c-word-line,
    .p3u812-word-line,
    .alphabet-screen-word,
    .alphabet-action-word-letters
  ) {
    font-size: 30px !important;
  }

  #app#app#app [data-premium-word-surface="standard"].spelling-slots span {
    font-size: 30px !important;
  }
}

/* src/weekly-practice-menu-system.css */
/*
 * Shared menu-card system for First Weekly and Practice.
 *
 * Their learning flows deliberately remain different: Weekly is a guided
 * unit journey, while Practice is a quick repeat library.  This layer shares
 * only the card frame, image window, type hierarchy, and interaction rhythm.
 */
#app {
  --learning-menu-card-width: 272px;
  --learning-menu-card-height: 224px;
  --learning-menu-card-media-height: 104px;
  --learning-menu-card-gap: 8px;
  --learning-menu-card-padding: 12px;
  --learning-menu-card-radius: 18px;
  --learning-menu-card-border: 1.5px solid #d8e3ed;
  --learning-menu-card-shadow: 0 10px 22px rgba(20, 45, 76, .10);
  --learning-menu-card-title: 900 20px/1.15 "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --learning-menu-card-ink: #173a66;
}

/* A fixed maximum track makes the two route families feel like one product
   without making either route's information architecture identical. */
#app .alphabet-weekly-phase__cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, var(--learning-menu-card-width))) !important;
  justify-content: center;
  gap: 16px !important;
}

#app .alphabet-weekly-card--lesson-copy {
  display: grid !important;
  grid-template-rows: var(--learning-menu-card-media-height) minmax(36px, 1fr) 30px !important;
  gap: var(--learning-menu-card-gap) !important;
  width: 100% !important;
  height: var(--learning-menu-card-height) !important;
  min-height: var(--learning-menu-card-height) !important;
  padding: var(--learning-menu-card-padding) !important;
  overflow: hidden;
  border: var(--learning-menu-card-border) !important;
  border-radius: var(--learning-menu-card-radius) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--learning-menu-card-shadow) !important;
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

#app .alphabet-weekly-card--lesson-copy .alphabet-weekly-card__media {
  min-height: var(--learning-menu-card-media-height) !important;
  height: var(--learning-menu-card-media-height) !important;
  border-radius: 14px !important;
}

#app .alphabet-weekly-card--lesson-copy .alphabet-weekly-card__title,
#app .alphabet-weekly-card--lesson-copy > strong {
  display: -webkit-box !important;
  align-self: center;
  overflow: hidden;
  padding: 0 3px !important;
  color: var(--learning-menu-card-ink) !important;
  font: var(--learning-menu-card-title) !important;
  letter-spacing: -.025em !important;
  text-align: center;
  text-overflow: clip;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Review cards keep their red copy from the review contract; only their
   geometry is shared here. */
#app .alphabet-weekly-card--lesson-copy .alphabet-weekly-card__open {
  min-height: 30px !important;
  border-radius: 999px !important;
}

#app .alphabet-weekly-card--lesson-copy:hover,
#app .alphabet-weekly-card--lesson-copy:focus-visible,
#app .alphabet-weekly-card--lesson-copy.is-active {
  box-shadow: 0 0 0 3px rgba(39, 111, 230, .11), 0 15px 28px rgba(20, 45, 76, .14) !important;
}

@media (max-width: 960px) {
  #app .alphabet-weekly-phase__cards {
    grid-template-columns: repeat(2, minmax(0, var(--learning-menu-card-width))) !important;
  }
}

@media (max-width: 720px) {
  #app {
    --learning-menu-card-height: 196px;
    --learning-menu-card-media-height: 88px;
    --learning-menu-card-padding: 10px;
    --learning-menu-card-radius: 16px;
    --learning-menu-card-title: 900 18px/1.15 "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  }

  #app .alphabet-weekly-phase__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Long unit names are part of the learning information, not decorative copy.
   On a phone they receive one full card width instead of being truncated. */
@media (max-width: 480px) {
  #app .alphabet-weekly-phase__cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* src/electronic-whiteboard.css */
:root {
  --ewb-navy: #173d62;
  --ewb-blue: #2677a4;
  --ewb-coral: #ee5a49;
  --ewb-yellow: #ffd447;
  --ewb-panel: rgba(255, 255, 255, .97);
}

.ewb-root,
.ewb-root * {
  box-sizing: border-box;
}

.ewb-root {
  position: fixed;
  inset: 0;
  z-index: 9800;
  pointer-events: none;
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

.ewb-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.ewb-root[data-open="true"][data-tool="pen"] .ewb-canvas,
.ewb-root[data-open="true"][data-tool="highlighter"] .ewb-canvas,
.ewb-root[data-open="true"][data-tool="eraser"] .ewb-canvas,
.ewb-root[data-open="true"][data-tool="text"] .ewb-canvas {
  pointer-events: auto;
  touch-action: none;
}

.ewb-root[data-open="true"][data-tool="pen"] .ewb-canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34' viewBox='0 0 30 34'%3E%3Cpath d='M22 2l6 6L10 28l-8 3 3-8z' fill='%23ee5a49' stroke='%23173d62' stroke-width='2'/%3E%3Cpath d='M5 23l5 5' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 3 31, crosshair;
}

.ewb-root[data-open="true"][data-tool="highlighter"] .ewb-canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='34' viewBox='0 0 32 34'%3E%3Cpath d='M20 2l10 10-15 15-11-1-1-10z' fill='%23ffd447' stroke='%23173d62' stroke-width='2'/%3E%3Cpath d='M4 29h17' stroke='%23ffd447' stroke-width='5'/%3E%3C/svg%3E") 4 29, crosshair;
}

.ewb-root[data-open="true"][data-tool="eraser"] .ewb-canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M18 3l13 13-14 14H8L2 24z' fill='%23f7b8c0' stroke='%23173d62' stroke-width='2'/%3E%3Cpath d='M8 30h23' stroke='%23173d62' stroke-width='2'/%3E%3C/svg%3E") 7 28, cell;
}

.ewb-root[data-open="true"][data-tool="text"] .ewb-canvas {
  cursor: text;
}

.ewb-root[data-open="true"][data-tool="read"] {
  cursor: help;
}

.ewb-edge-tab {
  position: fixed;
  top: 43%;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 5px;
  width: 68px;
  min-height: 102px;
  padding: 13px 8px;
  border: 2px solid #d8e7f0;
  border-left: 0;
  border-radius: 0 21px 21px 0;
  background: linear-gradient(155deg, #fff, #edf8fb);
  color: var(--ewb-navy);
  box-shadow: 0 12px 30px rgba(25, 63, 94, .2);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .24s ease, opacity .2s ease, box-shadow .2s ease;
}

.ewb-edge-tab:hover {
  box-shadow: 0 15px 34px rgba(25, 63, 94, .28);
  transform: translateX(3px);
}

.ewb-edge-tab__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--ewb-coral);
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.ewb-edge-tab__label {
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -.04em;
}

.ewb-root[data-open="true"] .ewb-edge-tab {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
}

.ewb-toolbar {
  position: fixed;
  top: 50%;
  left: 14px;
  z-index: 3;
  display: grid;
  width: 212px;
  max-height: calc(100vh - 28px);
  padding: 16px;
  border: 2px solid rgba(210, 228, 239, .96);
  border-radius: 26px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--ewb-panel);
  box-shadow: 0 22px 55px rgba(21, 53, 82, .25);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transform: translate(-125%, -50%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.ewb-toolbar > *,
.ewb-tool,
.ewb-action,
.ewb-options label {
  min-width: 0;
  max-width: 100%;
}

.ewb-root[data-open="true"] .ewb-toolbar {
  opacity: 1;
  transform: translate(0, -50%);
}

.ewb-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 13px;
  border-bottom: 1px solid #dce9f1;
  touch-action: none;
  cursor: grab;
}

.ewb-toolbar__header:active {
  cursor: grabbing;
}

.ewb-toolbar__title strong,
.ewb-toolbar__title span {
  display: block;
}

.ewb-toolbar__title strong {
  color: var(--ewb-navy);
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: -.055em;
}

.ewb-toolbar__title span {
  margin-top: 2px;
  color: #658095;
  font-size: 11px;
  font-weight: 750;
}

.ewb-toolbar__close {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 1px solid #d6e5ee;
  border-radius: 13px;
  background: #f3f8fb;
  color: #45677f;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.ewb-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.ewb-tool {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid #d9e7ef;
  border-radius: 15px;
  background: #f8fbfd;
  color: #31566f;
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.ewb-tool:hover {
  border-color: #82b7d2;
  transform: translateY(-1px);
}

.ewb-tool[aria-pressed="true"] {
  border-color: var(--ewb-blue);
  background: linear-gradient(145deg, #256f9c, #2d8caf);
  color: #fff;
  box-shadow: 0 7px 16px rgba(38, 119, 164, .24);
}

.ewb-tool__icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  color: var(--ewb-navy);
  font-size: 19px;
  font-weight: 1000;
  line-height: 1;
}

.ewb-tool[aria-pressed="true"] .ewb-tool__icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.ewb-tool__label {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -.035em;
}

.ewb-root[data-context="story"] .ewb-tool[data-tool="hand"] { order: -4; }
.ewb-root[data-context="story"] .ewb-tool[data-tool="highlighter"] { order: -3; }
.ewb-root[data-context="story"] .ewb-tool[data-tool="read"] { order: -2; }
.ewb-root[data-context="story"] .ewb-tool[data-tool="pen"] { order: -1; }

.ewb-options {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dfebf2;
  border-radius: 17px;
  background: #f7fafc;
}

.ewb-options[hidden],
.ewb-colors[hidden],
.ewb-text-editor[hidden],
.ewb-help[hidden] {
  display: none !important;
}

.ewb-options__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #49697f;
  font-size: 11px;
  font-weight: 900;
}

.ewb-options__label output {
  color: var(--ewb-navy);
  font-size: 12px;
}

.ewb-colors {
  display: flex;
  justify-content: space-between;
  gap: 7px;
}

.ewb-color {
  position: relative;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ewb-swatch);
  box-shadow: 0 0 0 1px #bfd2de;
  cursor: pointer;
}

.ewb-color[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .26);
}

.ewb-size {
  width: 100%;
  accent-color: var(--ewb-blue);
  cursor: pointer;
}

.ewb-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.ewb-action {
  min-height: 44px;
  padding: 6px 4px;
  border: 1px solid #d8e6ee;
  border-radius: 13px;
  background: #fff;
  color: #345971;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.ewb-action b {
  display: block;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 1;
}

.ewb-action:hover:not(:disabled) {
  border-color: #78acc8;
  background: #edf7fb;
}

.ewb-action:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.ewb-action--clear[data-confirm="true"] {
  border-color: #ef7a6d;
  background: #fff0ed;
  color: #c74235;
}

.ewb-help-toggle {
  width: 100%;
  margin-top: 11px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #55758a;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.ewb-help {
  margin: 0;
  padding: 10px 11px;
  border-radius: 13px;
  background: #edf6fa;
  color: #45677d;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.55;
}

.ewb-help strong {
  color: var(--ewb-navy);
}

.ewb-text-editor {
  position: fixed;
  z-index: 5;
  display: flex;
  width: min(330px, calc(100vw - 28px));
  padding: 7px;
  border: 2px solid var(--ewb-blue);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 61, 98, .25);
  pointer-events: auto;
}

.ewb-text-editor input {
  min-width: 0;
  flex: 1;
  height: 41px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: var(--ewb-navy);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
}

.ewb-text-editor button {
  min-width: 58px;
  border: 0;
  border-radius: 11px;
  background: var(--ewb-blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.ewb-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 6;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 17px;
  border-radius: 999px;
  background: rgba(19, 53, 82, .94);
  color: #fff;
  box-shadow: 0 10px 30px rgba(14, 43, 68, .25);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .18s ease, transform .18s ease;
}

.ewb-toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ewb-reading-target {
  position: relative !important;
  outline: 4px solid rgba(255, 212, 71, .92) !important;
  outline-offset: 5px !important;
  border-radius: 6px;
  background-color: rgba(255, 236, 124, .2) !important;
  box-shadow: 0 0 0 8px rgba(255, 212, 71, .15) !important;
}

.ewb-root button:focus-visible,
.ewb-root input:focus-visible {
  outline: 3px solid #ffcc42;
  outline-offset: 2px;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  .ewb-edge-tab {
    top: auto;
    bottom: 14px;
    left: 14px;
    grid-template-columns: 34px auto;
    width: auto;
    min-height: 54px;
    padding: 8px 15px 8px 8px;
    border: 2px solid #d8e7f0;
    border-radius: 18px;
  }

  .ewb-edge-tab__icon {
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .ewb-toolbar {
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto;
    max-height: min(48vh, 360px);
    padding: 13px;
    border-radius: 24px;
    transform: translateY(calc(100% + 22px));
  }

  .ewb-root[data-open="true"] .ewb-toolbar {
    transform: translateY(0);
  }

  .ewb-toolbar__header {
    padding-bottom: 10px;
  }

  .ewb-tools {
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    overflow-x: auto;
    padding: 1px 1px 6px;
    scroll-snap-type: x proximity;
  }

  .ewb-tool {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    min-height: 66px;
    scroll-snap-align: start;
  }

  .ewb-options {
    grid-template-columns: minmax(190px, 1fr) minmax(140px, .8fr);
    align-items: center;
  }

  .ewb-colors {
    justify-content: flex-start;
  }

  .ewb-actions {
    position: absolute;
    top: 9px;
    right: 58px;
    display: flex;
    margin: 0;
  }

  .ewb-action {
    min-width: 46px;
    min-height: 37px;
    padding: 4px 6px;
    font-size: 0;
  }

  .ewb-action b {
    margin: 0;
    font-size: 19px;
  }

  .ewb-help-toggle,
  .ewb-help {
    display: none;
  }

  .ewb-toast {
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px));
  }
}

@media (max-width: 620px) {
  .ewb-toolbar__title span {
    display: none;
  }

  .ewb-toolbar__title strong {
    font-size: 17px;
  }

  .ewb-tools {
    grid-template-columns: repeat(6, 70px);
  }

  .ewb-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ewb-options__label {
    display: none;
  }

  .ewb-size {
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ewb-root *,
  .ewb-root *::before,
  .ewb-root *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 1180px), (pointer: coarse) {
  .ewb-root {
    display: none !important;
  }
}

/* src/lifestyle-banner-size-contract.css */
/* Final lifestyle banner size contract.
 * Every menu route uses the same banner height, regardless of whether the
 * route labels it as a public hero or a nested section. */
:root {
  --lifestyle-banner-height: clamp(260px, 16vw, 280px);
  --lifestyle-banner-mobile-height: 230px;
  --lifestyle-menu-width: min(1240px, calc(100vw - 32px));
}

/* Practice routes render an iframe after learner access is confirmed.  Keep its
 * parent geometry in the critical bundle so it matches the normal 1240px Lesson
 * banner before the deferred route stylesheet finishes loading. */
#app#app > main.practice-embedded-screen {
  box-sizing: border-box !important;
  width: var(--lifestyle-menu-width) !important;
  max-width: 1240px !important;
  min-width: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  align-self: center !important;
}

#app#app > main.practice-embedded-screen > .menu-page-banner {
  left: auto !important;
  width: 100% !important;
  transform: none !important;
}

#app#app > main.practice-embedded-screen > .practice-embedded-shell,
#app#app > main.practice-embedded-screen > .practice-embedded-shell > .practice-embedded-shell__frame {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#app#app main .menu-page-banner,
#app#app main[data-publication^="phonics-"] .menu-page-banner,
#app#app main .menu-page-banner--hero,
#app#app main .menu-page-banner--section {
  box-sizing: border-box !important;
  width: var(--lifestyle-menu-width) !important;
  height: var(--lifestyle-banner-height) !important;
  min-height: var(--lifestyle-banner-height) !important;
  max-height: none !important;
  left: 50%;
  transform: translateX(-50%);
}

/* Tuition has a purpose-built trial hero rather than menu-page-banner markup,
   but it follows the same visible banner height. */
#app#app main.tuition-screen .tuition-trial-hero {
  box-sizing: border-box !important;
  height: var(--lifestyle-banner-height) !important;
  min-height: var(--lifestyle-banner-height) !important;
  max-height: none !important;
}

/* Desktop menu shells and the content immediately below their banners share
 * one visible left/right edge.  Older menu layers used separate 1180px,
 * 1200px, 1240px, and fixed 858px catalogue widths, which made the banner
 * look detached from the page content.  Player/game stages are deliberately
 * excluded from this contract. */
@media (min-width: 961px) {
  /* Deferred route styles still contain older 1440px service-page rules.
   * Keep every public menu and sound-card shell on the shared header boundary. */
  #app#app#app > main:is(
    .curriculum-screen,
    .guide-hub-screen,
    .tuition-screen,
    .my-page-screen,
    .report-screen.learning-dashboard-screen,
    .card-games-screen--picture-cards:has(> .menu-page-banner),
    .sound-finder-screen
  ) {
    box-sizing: border-box !important;
    width: var(--lifestyle-menu-width) !important;
    max-width: 1240px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #app#app main:is(
    .phonics-product-home-screen,
    .home-course-path-screen,
    .lesson-menu-hub-screen,
    .general-lesson-course-screen,
    .repeat-lesson-course-screen,
    .shared-menu-path-screen,
    .shared-course-selection-screen,
    .unit-menu-screen,
    .story-menu-hub-screen,
    .story-course-hub-screen,
    .weekly-course-hub-screen,
    .weekly-course-unit-screen
  ) {
    box-sizing: border-box !important;
    width: var(--lifestyle-menu-width) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #app#app main:is(
    .phonics-product-home-screen,
    .home-course-path-screen,
    .lesson-menu-hub-screen,
    .general-lesson-course-screen,
    .repeat-lesson-course-screen,
    .shared-menu-path-screen,
    .shared-course-selection-screen,
    .unit-menu-screen,
    .story-menu-hub-screen,
    .story-course-hub-screen,
    .weekly-course-hub-screen,
    .weekly-course-unit-screen
  ) > :is(.menu-page-banner, .weekly-art-banner) {
    left: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  #app#app main.shared-menu-path-screen > .game-menu-hub,
  #app#app main:is(
    .shared-course-selection-screen,
    .general-lesson-course-screen,
    .repeat-lesson-course-screen
  ) > .shared-course-selection-hub,
  #app#app main.unit-menu-screen > .course-map.unit-menu-grid,
  #app#app main.weekly-course-unit-screen > .weekly-course-unit-hub {
    width: 100% !important;
    max-width: none !important;
  }

  /* Restore the four equal, responsive catalogue columns.  The legacy fixed
   * 207px card contract is the source of the narrow 858px island shown below
   * the full-width game banner. */
  #app#app main.unit-menu-screen > .course-map.unit-menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-inline: 0 !important;
    justify-content: stretch !important;
  }

  #app#app main.unit-menu-screen > .course-map.unit-menu-grid > *,
  #app#app main.unit-menu-screen > .course-map.unit-menu-grid .unit-menu-card,
  #app#app main.unit-menu-screen > .course-map.unit-menu-grid .home-unit-card {
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #app#app main.unit-menu-screen > .course-map.unit-menu-grid .unit-menu-card,
  #app#app main.unit-menu-screen > .course-map.unit-menu-grid .home-unit-card {
    height: var(--menu-unit-card-height, 236px) !important;
    min-height: var(--menu-unit-card-height, 236px) !important;
  }
}

@media (max-width: 760px) {
  #app#app main .menu-page-banner,
  #app#app main[data-publication^="phonics-"] .menu-page-banner,
  #app#app main .menu-page-banner--hero,
  #app#app main .menu-page-banner--section {
    width: 100% !important;
    height: var(--lifestyle-banner-mobile-height) !important;
    min-height: var(--lifestyle-banner-mobile-height) !important;
    left: 0;
    transform: none;
  }

  #app#app main.tuition-screen .tuition-trial-hero {
    height: var(--lifestyle-banner-mobile-height) !important;
    min-height: var(--lifestyle-banner-mobile-height) !important;
  }
}

/* src/player-landscape-gate.css */
#player-landscape-gate[hidden] { display: none !important; }

@media (max-width: 1024px) {
  html.player-landscape-active,
  html.player-landscape-active body { margin: 0 !important; overflow: hidden !important; background: #eaf7fb !important; }

  html.player-landscape-active body > #app { min-width: 100%; min-height: 100%; }

  html.player-landscape-active #app .site-header,
  html.player-landscape-active #app .service-header,
  html.player-landscape-active #app .service-footer,
  html.player-landscape-active #app > header { display: none !important; }

  html.player-landscape-ready body #app#app#app > main {
    box-sizing: border-box !important;
    width: 100dvw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: auto !important;
    transform: none !important;
  }

  /* A scaled landscape player must start at the top of the visible viewport.
     Keeping the desktop vertical-centering rule here creates a large blank
     band above the player after the logical canvas is enlarged for scaling. */
  html.player-landscape-ready body #app#app#app > main.shared-game-player,
  html.player-landscape-ready body #app#app#app > main.game-screen,
  html.player-landscape-ready body #app#app#app > main.story-screen,
  html.player-landscape-ready body #app#app#app > main.sound-finder-screen,
  html.player-landscape-ready body #app#app#app > main.lesson-story-mode,
  html.player-landscape-ready body #app#app#app > main.shared-lesson-player {
    align-content: start !important;
    align-items: start !important;
    place-items: start center !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }

  /* The frame contract uses 100dvh before the whole player is scaled.  Once
     fitLandscapePlayer enlarges the logical canvas, make the game frame use
     that same logical height so its stage and footer are not clipped. */
  html.player-landscape-ready body #app#app#app > main.shared-game-player {
    --course-game-frame-height: 100dvh !important;
  }

  html.player-landscape-ready body #app#app#app > main.shared-game-player > section,
  html.player-landscape-ready body #app#app#app > main.game-screen > section,
  html.player-landscape-ready body #app#app#app > main.story-screen > section,
  html.player-landscape-ready body #app#app#app > main.sound-finder-screen > section,
  html.player-landscape-ready body #app#app#app > main.lesson-story-mode > section,
  html.player-landscape-ready body #app#app#app > main.shared-lesson-player > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html.player-landscape-ready body #app#app#app > main.shared-game-player::before {
    top: 0 !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  html.player-landscape-portrait body > #app {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100dvh !important;
    height: 100dvw !important;
    transform: rotate(90deg) translateY(-100%) !important;
    transform-origin: top left !important;
    overflow: hidden !important;
  }

  html.player-landscape-portrait #app > main {
    box-sizing: border-box !important;
    width: 100dvh !important;
    max-width: none !important;
    height: 100dvw !important;
    min-height: 100dvw !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html.player-landscape-portrait.player-landscape-dismissed #app > main {
    pointer-events: auto !important;
  }

  #player-landscape-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 31, 57, .82);
    color: #153a63;
    font-family: inherit;
  }

  #player-landscape-gate .player-landscape-gate__panel {
    box-sizing: border-box;
    width: min(88vw, 480px);
    padding: 20px;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px 18px;
    align-items: center;
    border: 2px solid #cce1ef;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
  }

  #player-landscape-gate .player-landscape-gate__phone {
    width: 76px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 5px solid #2d78b7;
    border-radius: 13px;
    color: #20a99a;
    font-size: 29px;
    font-weight: 900;
  }

  #player-landscape-gate .player-landscape-gate__copy { display: grid; gap: 5px; }
  #player-landscape-gate strong { font-size: 18px; line-height: 1.3; }
  #player-landscape-gate span { font-size: 14px; color: #55718c; }
  #player-landscape-gate button {
    grid-column: 1 / -1;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(120deg, #328bea, #39bda9);
    color: #fff;
    font: inherit;
    font-weight: 800;
  }
}

/* src/responsive-system.css */
/* Final shared responsive geometry for pages and learning players. */
:root{
  --responsive-page-gutter:clamp(14px,2.6vw,42px);
  --responsive-content-max:1240px;
  --responsive-touch-target:44px;
  --responsive-safe-top:env(safe-area-inset-top,0px);
  --responsive-safe-right:env(safe-area-inset-right,0px);
  --responsive-safe-bottom:env(safe-area-inset-bottom,0px);
  --responsive-safe-left:env(safe-area-inset-left,0px);
}
html{min-width:0;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body,#app,#app>main{min-width:0}
#app img,#app video,#app canvas,#app svg{max-width:100%}
#app :where(section,article,header,footer,nav,aside,div){min-width:0}
#app :where(h1,h2,h3,p,strong,span,a,button){overflow-wrap:break-word}
body:not(:has(#app>main.game-screen,#app>main.shared-game-player,#app>main.story-screen,#app>main.shared-lesson-player,#app>main.sound-finder-screen)) #app>main{
  width:min(100%,var(--responsive-content-max));margin-inline:auto;
}
@media (max-width:1024px){
  :root{--responsive-page-gutter:clamp(12px,2.2vw,24px)}
  #app :where(.service-page-shell,.home-screen,.guide-hub-screen,.learning-dashboard,.curriculum-screen,.tuition-screen,.my-page-screen){padding-inline:var(--responsive-page-gutter)}
  #app :where(.course-card-grid,.unit-grid,.curriculum-grid,.tuition-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  #app :where(.course-card-grid,.unit-grid,.curriculum-grid,.tuition-grid){grid-template-columns:minmax(0,1fr)}
  #app :where(h1,.page-title){font-size:clamp(28px,8.2vw,42px);line-height:1.18}
  #app :where(h2,.section-title){font-size:clamp(24px,7vw,34px);line-height:1.24}
  #app .menu-page-banner--hero .menu-page-banner__copy,
  #app main[data-publication^="phonics-"] .menu-page-banner--hero .menu-page-banner__copy{width:92%!important;max-width:none!important}
  #app#app#app .menu-page-banner--hero.menu-page-banner--title-medium .menu-page-banner__copy h1,
  #app#app#app main[data-publication^="phonics-"] .menu-page-banner--hero.menu-page-banner--title-medium .menu-page-banner__copy h1{font-size:clamp(20px,5.6vw,23px)!important;letter-spacing:-.045em!important}
  /* The public header already paints its accessible menu label with
     summary::before. Hide the duplicate literal text restored by the later
     commercial-header font rule, while retaining the label and arrow. */
  .topbar[data-common-service-header="main"] .topbar-mobile-menu>summary{font-size:0!important;white-space:nowrap}
  :where(.practice-service-header__mobile-menu,.topbar-mobile-menu)>summary span[aria-hidden="true"]{font-size:0!important}
  :where(.practice-service-header__mobile-menu,.topbar-mobile-menu)>summary span[aria-hidden="true"]::before{
    content:"";display:inline-block;width:14px;height:10px;background:linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat
  }
}
#app#app#app>main.shared-game-player .unified-game-footer{
  box-sizing:border-box!important;width:min(calc(100% - 24px),1080px)!important;min-width:0!important;max-width:none!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,32%)!important
}
#app#app#app>main.shared-game-player .unified-game-footer :is(.unified-game-info-bar,.unified-game-navigation){
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;width:100%!important
}
@media (min-width:1025px){
  #app>main:is(.game-screen,.shared-game-player,.story-screen,.shared-lesson-player,.sound-finder-screen,.lesson-story-mode,[class*="lesson-screen"]){
    box-sizing:border-box;width:min(100%,1440px);max-width:calc(100vw - 2 * var(--responsive-page-gutter));margin-inline:auto;padding-top:clamp(10px,1.4vh,22px);padding-bottom:clamp(10px,1.4vh,22px)
  }
}
@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
  #app :where(h1,.page-title){font-size:clamp(34px,5.4vw,48px)}
  #app :where(h2,.section-title){font-size:clamp(28px,4.5vw,40px)}
}
@media (min-width:641px) and (max-width:1024px) and (orientation:landscape){
  body #app#app#app>main.shared-game-player .unified-game-footer{
    width:calc(100dvw - 80px)!important;max-width:calc(100dvw - 80px)!important
  }
}
@media (max-width:1024px){
  html.player-landscape-ready body #app#app#app>main{box-sizing:border-box!important;padding-top:var(--responsive-safe-top)!important;padding-right:var(--responsive-safe-right)!important;padding-bottom:var(--responsive-safe-bottom)!important;padding-left:var(--responsive-safe-left)!important}
  html.player-landscape-ready.player-scroll-surface body #app#app#app>main{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.player-landscape-ready body #app :where(.pager,.player-actions,.lesson-actions,.story-actions) button{min-height:calc(var(--responsive-touch-target) / var(--player-fit-scale,1))}
  body #app#app#app>main:is(.story-screen,.lesson-story-mode,.shared-lesson-player)>section.story-reader{
    box-sizing:border-box!important;width:calc(100% - 24px)!important;max-width:none!important;margin-inline:auto!important;justify-self:stretch!important;align-self:start!important
  }
  body #app#app#app>main.shared-game-player .unified-game-footer{
    width:calc(100dvw - 24px)!important;max-width:calc(100dvw - 24px)!important;grid-template-columns:minmax(0,1fr) minmax(220px,32%)!important
  }
  #player-landscape-gate{padding-top:max(18px,var(--responsive-safe-top));padding-right:max(18px,var(--responsive-safe-right));padding-bottom:max(18px,var(--responsive-safe-bottom));padding-left:max(18px,var(--responsive-safe-left))}
  :where(.electronic-whiteboard,#electronic-whiteboard,[data-electronic-whiteboard],.whiteboard-launcher){display:none!important}
}
@media (min-width:641px) and (max-width:1024px) and (orientation:landscape){
  body #app#app#app>main.shared-game-player .unified-game-footer{
    width:calc(100dvw - 80px)!important;max-width:calc(100dvw - 80px)!important
  }
}
@media (pointer:coarse){
  #app :where(button,a[role="button"],input,select),#player-landscape-gate button{min-height:var(--responsive-touch-target)}
  #app :where(.pager,.player-actions,.lesson-actions,.story-actions) button{min-width:var(--responsive-touch-target)}
}
@media (max-height:520px) and (orientation:landscape){
  #player-landscape-gate .player-landscape-gate__panel{padding:14px 16px;gap:9px 14px}
  html.player-landscape-ready body #app#app#app>main{padding-block:0!important}
}
@media (prefers-reduced-motion:reduce){
  #player-landscape-gate *,html.player-landscape-active #app *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
#app .gramophone-record-disc img:not([src]){display:none!important}

/* src/lesson-duplicate-feedback-cleanup.css */
/* The player already presents its Korean instruction below the activity.
   Keep these live regions for screen readers and game-state scripts, but
   remove the duplicate visible feedback strips and their layout space. */
#app .lesson-story-reader .lesson-feedback-duplicate,
#app .approved-lesson-player .lesson-feedback-duplicate,
#app .lesson-player .lesson-feedback-duplicate,
#app main[class*="lesson"] .lesson-feedback-duplicate {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Compound Conveyor: a locked component stays on the same baseline and
   changes only its word colour. No lift, scale, glow, badge, or flash. */
#app .p3u12-conveyor-game .p3u12-stop-slot.p3u12-stop-visible {
  background: transparent !important;
  box-shadow: none !important;
}
#app .p3u12-conveyor-game .p3u12-selected-word,
#app .p3u12-conveyor-game .p3u12-selected-word.p3u12-word-speaking {
  transform: none !important;
  animation: none !important;
  filter: none !important;
}
#app .p3u12-conveyor-game .p3u12-selected-word b {
  color: #287bcb !important;
}

/* Unit 12 Compound Conveyor reuses the exact Cloud Wheel PRESS cursor.
   Its hotspot is the centre of the red PRESS button. */
#app#app .p3u12-conveyor-game .p3u12-conveyor-stage,
#app#app .p3u12-conveyor-game .p3u12-conveyor-stage * {
  cursor: none !important;
}
#app#app .p3u12-conveyor-game .p3u12-cloud-press-cursor {
  transform: translate(-43%, -38%) !important;
  z-index: 60 !important;
}

/* Unit 10: change only the road-sign lettering.  Centre the painted glyphs
   optically within the supplied green sign and reduce their scale/spacing. */
#app#app .p3u10-game.p3u10-car-road-game .p3u10-road-sign {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(2px, .35vw, 6px) !important;
  box-sizing: border-box !important;
}
#app#app .p3u10-game.p3u10-car-road-game .p3u10-road-syllable {
  position: relative !important;
  top: clamp(-24px, -2.4cqw, -12px) !important;
  font-size: clamp(24px, 5cqw, 50px) !important;
  letter-spacing: .025em !important;
}

/* The shared desktop frame can shorten the stage on a laptop.  Unit 10 must
   shrink both axes together; otherwise its 1672:941 road artwork is cropped
   into an ultra-wide strip. */
@media (min-width: 721px) {
  #app main.p3u10-screen-root .p3u10-car-road-game {
    /* Whichever limit is reached first controls the scale: original canvas,
       available monitor width, or available monitor height. */
    --p3u10-responsive-stage-width: min(1020px, calc(100vw - 96px), 92dvh);
  }
  #app main.p3u10-screen-root .p3u10-car-road-game > .p3u812-stage {
    width: var(--p3u10-responsive-stage-width) !important;
    max-width: min(100%, var(--p3u10-responsive-stage-width)) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1672 / 941 !important;
    container-type: inline-size;
  }
  #app main.p3u10-screen-root .p3u10-car-road-game > :is(.p3-bottom-panel, .unified-game-footer) {
    width: var(--p3u10-responsive-stage-width) !important;
    max-width: 100% !important;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  #app main.p3u10-screen-root .p3u10-car-road-game {
    --p3u10-responsive-stage-width: min(1020px, calc(100vw - 48px), 92dvh);
  }
}

/* src/game-player-header-removal.css */
/*
 * Final game-player vertical contract
 *
 * COURSE / UNIT / STAGE / PROGRESS is not part of the playable surface.
 * Remove it while preserving the published game stage, footer, answer-object
 * dimensions, and every coordinate system inside the stage.
 */

#app main.game-screen.shared-game-player .unified-game-context-bar {
  display: none !important;
}

/*
 * Move only the complete outer section inside its fixed white frame.  The
 * relative offset keeps hit areas attached to their visuals and never
 * reflows, scales, transforms, or recalculates an object inside the stage.
 */
#app main.game-screen.shared-game-player > section {
  top: 0 !important;
}

@media (min-width: 1025px) and (min-height: 730px) {
  /*
   * Standard Phonics 1–3 wrappers do not reserve the removed 74px header row.
   * Centre their published 1020 x 490 stage and footer as one visible stack.
   * This is the same visible coordinate used by the approved Sound Thief
   * reference, expressed from the wrapper's own top-space variable.
   */
  #app main.game-screen.shared-game-player {
    --game-player-visible-stack-height: calc(
      var(--course-game-stage-height) + 8px + var(--course-game-footer-height)
    );
    --game-player-standard-section-top: calc(
      (var(--course-game-frame-height) - var(--game-player-visible-stack-height)) / 2
      - var(--course-game-top-space)
    );
  }

  #app main.game-screen.shared-game-player > section {
    top: var(--game-player-standard-section-top) !important;
  }

  /*
   * Alphabet legacy and Drum wrappers still contain the hidden header and
   * progress rows in their explicit grid.  Retain their established lift so
   * Sound Thief and the other authored coordinate systems stay unchanged.
   */
  #app main.game-screen.shared-game-player:is(
    .alphabet-single-screen-root,
    .alphabet-type1-game-screen,
    .approved-drum-beat-game
  ) > section,
  #app main.game-screen.shared-game-player:has(> .game-layout > .action-game) > .game-layout {
    top: calc(-1 * clamp(36px, 6dvh, 56px)) !important;
  }
}

/*
 * PC and tablet players keep the published 1020 x 490 game stage.  A short
 * browser may scroll the outer page, but it must never shrink the stage or
 * apply zoom/scale to compensate for viewport height.
 */
@media (min-width: 1025px), (min-width: 721px) and (min-height: 600px) {
  #app main.game-screen.shared-game-player {
    --course-game-stage-height: 490px !important;
    --course-game-frame-height: max(666px, min(836px, calc(100dvh - 64px))) !important;
    height: max(100dvh, 730px) !important;
    min-height: 730px !important;
    overflow-y: auto !important;
  }

  #app main.game-screen.shared-game-player > section {
    zoom: 1 !important;
  }
}

/* src/lesson-story-controls-bottom.css */
/*
 * Lesson and story viewport recovery
 *
 * The close control remains at the top-left as an overlay.  Lesson progress
 * and story listening controls live in the footer so the authored activity
 * canvas starts at the same vertical position as the close control.  This
 * intentionally does not scale game stages or their internal objects.
 */

/* Account dialogs must sit above the fixed public header (z-index: 1000),
   otherwise that header intercepts the account dialog's close button. */
.utility-modal {
  z-index: 12000 !important;
}

/* Two legacy header layers both supplied the mobile menu word.  Keep the
   real summary label and remove the generated duplicate. */
#app > .topbar .topbar-mobile-menu summary::before {
  content: none !important;
}

/* Shared lesson player: recover the former header row for the lesson screen. */
#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  > .lesson-story-book {
  position: relative;
  grid-template-rows: minmax(0, 1fr) var(--common-lesson-footer-height, 76px) !important;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-header .story-reader__exit {
  position: absolute;
  top: clamp(10px, 1.5vw, 18px);
  left: clamp(10px, 1.5vw, 18px);
  pointer-events: auto;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-footer {
  min-height: var(--common-lesson-footer-height, 76px) !important;
  padding: 8px clamp(14px, 2vw, 26px) !important;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-footer-actions {
  display: grid !important;
  grid-template-columns: var(--common-lesson-control-size, 52px) minmax(0, 1fr) var(--common-lesson-control-size, 52px);
  align-items: center;
  gap: 12px;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-footer-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-progress {
  width: min(100%, var(--common-lesson-progress-width, 510px)) !important;
  min-width: 0;
}

#app main.learning-screen.lesson-story-mode
  .lesson-story-reader[data-shared-lesson-player="true"]
  .lesson-story-header-actions:empty {
  display: none;
}

/* Picture-book story: the header becomes a close-button overlay and the
   illustration starts at the top of the book. */
#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__book--picturebook {
  position: relative;
  grid-template-rows: minmax(0, 1fr) 76px !important;
}

#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__header--picturebook {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__header--picturebook .story-reader__exit {
  position: absolute;
  top: clamp(10px, 1.5vw, 18px);
  left: clamp(10px, 1.5vw, 18px);
  pointer-events: auto;
}

#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__footer--picturebook {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  gap: 12px;
  align-items: center;
}

#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__footer--picturebook > span {
  min-width: 0;
}

#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__footer-audio {
  grid-column: 2;
  min-width: 0;
  justify-self: end;
}

#app.app--immersive-story main.story-screen
  .story-reader--picturebook
  .story-reader__footer-actions {
  grid-column: 3;
}

@media (max-width: 900px) and (orientation: landscape) {
  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    > .lesson-story-book,
  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__book--picturebook {
    grid-template-rows: minmax(0, 1fr) 60px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-footer,
  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__footer--picturebook {
    min-height: 60px !important;
    padding: 5px 13px !important;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__footer--picturebook {
    gap: 7px;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__footer-audio {
    gap: 4px;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__repeat-picker {
    min-height: 44px;
    padding: 4px 5px;
    gap: 4px;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__audio-button {
    min-height: 44px;
    padding-inline: 8px;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__footer-actions {
    gap: 5px;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    :is(.story-reader__learn-button, .story-reader__continue) {
    min-height: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }
}

/* Short landscape phones have less vertical room than the authored lesson
   canvas.  Adapt the complete lesson activity together (frame, picture and
   sound tiles) so no child-facing object is clipped while the game canvases
   and their original coordinate systems remain untouched. */
@media (max-height: 500px) and (orientation: landscape) {
  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-spread {
    padding: 6px 10px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-page {
    grid-template-rows: minmax(0, 1fr) 52px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-caption {
    min-height: 52px !important;
    padding: 6px 12px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-caption p {
    font-size: clamp(13px, 2.4vw, 17px) !important;
    line-height: 1.2;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-stage-tab {
    min-height: 40px;
    flex-direction: column;
    gap: 1px;
    padding: 2px;
    font-size: 9px;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-stage-tab > b {
    width: 100%;
    overflow: visible;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-card {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    padding: 7px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-card > :is(.task-view, .speak-view, .learn-grid) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .unified-listen-view {
    min-height: 0 !important;
    gap: 0 !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .unified-listen-view .listen-dance-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-inline: 0 !important;
    grid-template-rows: minmax(72px, 1fr) auto !important;
    gap: 5px !important;
    padding: 6px 10px 10px !important;
    overflow: hidden !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .unified-listen-view .listen-dance-stage > .sound-lab-word-picture {
    width: 86px !important;
    height: 76px !important;
    min-height: 0 !important;
    padding: 6px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .unified-listen-view .sound-lab-blocks.fixed-listen-word-row {
    gap: 5px !important;
    padding: 0 2px 7px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .unified-listen-view .sound-lab-blocks.fixed-listen-word-row > .sound-block {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 62px !important;
    min-height: 62px !important;
    flex-basis: 54px !important;
    padding: 5px 3px !important;
    border-radius: 12px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .unified-listen-view .sound-lab-blocks.fixed-listen-word-row > .sound-block > b {
    font-size: 25px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .speak-view .say-coach-stage {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    > .lesson-story-book {
    grid-template-rows: minmax(0, 1fr) 68px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-footer {
    min-height: 68px !important;
    padding: 6px 8px !important;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-footer-actions {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 4px;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-footer-controls {
    gap: 3px;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-header-actions {
    position: absolute;
    right: 54px;
    bottom: 7px;
  }

  #app main.learning-screen.lesson-story-mode
    .lesson-story-reader[data-shared-lesson-player="true"]
    .lesson-story-header-actions:not(:empty)
    + * {
    margin-right: 0;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__book--picturebook {
    grid-template-rows: minmax(0, 1fr) 68px !important;
  }

  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__footer--picturebook {
    display: flex;
    min-height: 68px;
  }

  /* Portrait keeps the purpose-built large audio panel inside the spread. */
  #app.app--immersive-story main.story-screen
    .story-reader--picturebook
    .story-reader__footer-audio {
    display: none;
  }
}

/* src/mobile-game-footer-drawer.css */
/*
 * Mobile game footer drawer
 *
 * The 1020 x 490 game stage and every object inside it keep their published
 * coordinate system. On a short phone in landscape, only the explanatory
 * footer becomes a viewport-level drawer so the stage receives the vertical
 * space. Tablet and desktop layouts are intentionally untouched.
 */

#app main.shared-game-player .mobile-game-footer-toggle {
  display: none;
}

@media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) {
  #app main.game-screen.shared-game-player {
    align-content: start !important;
    padding-top: 8px !important;
    padding-bottom: 52px !important;
  }

  /* A declared zoom value creates a containing block for fixed descendants
   * even when its numeric scale is exactly 1. `normal` is the same visual
   * size, but lets the drawer anchor to the phone viewport as intended. */
  #app main.game-screen.shared-game-player > section {
    zoom: normal !important;
  }

  #app main.game-screen.shared-game-player .unified-game-footer {
    position: fixed !important;
    z-index: 30 !important;
    right: auto !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(760px, calc(100vw - 20px)) !important;
    max-width: min(760px, calc(100vw - 20px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding: 0 8px 8px !important;
    gap: 8px !important;
    overflow: auto !important;
    border: 1px solid #cfe0ee;
    border-radius: 18px;
    background: rgba(248, 252, 255, .98);
    box-shadow: 0 -12px 30px rgba(22, 56, 91, .18);
    transform: translate(-50%, calc(100% - 44px));
    transition: transform .22s ease;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  #app main.shared-game-player .unified-game-footer.is-mobile-expanded {
    transform: translate(-50%, 0);
  }

  #app main.shared-game-player .unified-game-footer > .mobile-game-footer-toggle {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    grid-column: 1 / -1 !important;
    justify-self: center;
    width: 78px;
    min-width: 78px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #bad5e8;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    color: #0d5da9;
    background: #fff;
    box-shadow: 0 5px 14px rgba(22, 66, 105, .15);
    cursor: pointer;
    touch-action: manipulation;
  }

  #app main.shared-game-player .mobile-game-footer-toggle-icon {
    display: block;
    font: 1000 28px/1 "Segoe UI Symbol", "Malgun Gothic", sans-serif;
    transform: translateY(-2px);
  }

  #app main.shared-game-player .unified-game-footer:not(.is-mobile-expanded) > :not(.mobile-game-footer-toggle) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #app main.game-screen.shared-game-player .unified-game-footer .unified-game-info-bar {
    grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #app main.shared-game-player .unified-game-footer .unified-game-info-bar > div {
    min-height: 76px !important;
    padding: 10px 14px !important;
  }

  #app main.shared-game-player .unified-game-footer .unified-game-info-how > p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #app main.game-screen.shared-game-player .unified-game-footer .unified-game-navigation {
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 7px 9px !important;
  }
}