:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #15324a;
  --muted: #607386;
  --blue-950: #053a72;
  --blue-900: #0a4f96;
  --blue-800: #0d5fb8;
  --blue-700: #1976d2;
  --blue-500: #3ea6f5;
  --blue-100: #eaf5ff;
  --sky: #f6fbff;
  --panel: rgba(255, 255, 255, 0.97);
  --line: #d8e5ef;
  --success: #147d42;
  --success-bg: #e9f8ef;
  --warning: #8a5a00;
  --warning-bg: #fff6dc;
  --danger: #a12929;
  --danger-bg: #fff0f0;
  --shadow: 0 18px 50px rgba(11, 65, 110, 0.12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #dff3ff; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.9), transparent 34rem),
    linear-gradient(180deg, #d9f1ff 0%, #f8fcff 44%, #eef8ff 100%);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 4px solid rgba(244, 169, 42, .78);
  outline-offset: 3px;
}
h1, h2, p { margin-top: 0; }
h1 { letter-spacing: -.035em; }
small { color: var(--muted); }
.hidden { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.home-shell {
  width: min(1000px, calc(100% - 32px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 14px 0;
  display: grid;
  place-items: center;
}

.home-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - 28px);
  overflow: hidden;
  border-radius: clamp(22px, 2.2vw, 30px);
  background: #6fc8f7;
  box-shadow: 0 22px 58px rgba(8, 64, 112, .2);
  isolation: isolate;
}

.home-banner,
.home-banner img,
.home-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-banner img {
  display: block;
  object-fit: cover;
  object-position: center center;
}

.home-wash {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(232, 247, 255, .34) 0%, rgba(232, 247, 255, .14) 34%, rgba(232, 247, 255, 0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
}

.home-ui {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 51%;
  padding: clamp(28px, 4vw, 50px) clamp(26px, 4.4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 22px);
}

.home-wordmark {
  display: block;
  width: clamp(270px, 32vw, 370px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(5, 47, 87, .14));
}

.home-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.home-action {
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 850;
  font-size: clamp(.96rem, 1.1vw, 1.04rem);
  letter-spacing: -.01em;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(7, 65, 112, .14);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.home-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(7, 65, 112, .2);
}
.home-action.student {
  color: #fffaf0;
  background: linear-gradient(180deg, #147ed8 0%, #0758a6 100%);
  border-color: rgba(4, 61, 115, .5);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.home-action.teacher {
  color: #073b70;
  background: rgba(255, 252, 239, .96);
  border-color: rgba(7, 59, 112, .28);
  box-shadow: 0 8px 18px rgba(7, 65, 112, .11), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
}
.home-action.student:hover { filter: brightness(1.045); }
.home-action.teacher:hover { border-color: rgba(7, 59, 112, .42); }
.home-action:focus-visible {
  outline: 4px solid rgba(246, 178, 49, .92);
  outline-offset: 4px;
}

.guest-btn {
  width: 100%;
  margin-top: 10px;
}

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 64px;
}
.shell.narrow { width: min(780px, calc(100% - 28px)); }
.panel {
  background: var(--panel);
  border: 1px solid rgba(130, 169, 199, .34);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 38px);
}

.eyebrow {
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-800);
}
.brand-row, .topbar, .topbar-actions, .section-heading, .teacher-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill.cloud { background: #e7f7ee; color: #17653c; }
.status-pill.demo { background: #fff3d8; color: #7c5100; }

.primary, .secondary, .text-btn, .help, .toggle, .segmented button {
  border: 0;
  border-radius: 14px;
  min-height: 46px;
  font-weight: 800;
}
.primary, .secondary { padding: 12px 20px; }
.primary {
  color: #fff;
  background: linear-gradient(180deg, #2185dc, #0c5eaf);
  box-shadow: 0 8px 18px rgba(13, 95, 184, .24);
}
.primary:hover:not(:disabled) { filter: brightness(1.045); transform: translateY(-1px); }
.secondary {
  color: var(--blue-900);
  background: #eef7ff;
  border: 1px solid #b9d8ef;
}
.text-btn {
  background: transparent;
  color: var(--blue-900);
  padding: 9px 10px;
}
.text-btn:hover:not(:disabled) { background: rgba(13, 95, 184, .07); }
.large { min-height: 56px; padding: 15px 25px; font-size: 1.05rem; }
.small { min-height: 38px; padding: 8px 12px; font-size: .9rem; }

.hero {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  gap: clamp(28px, 7vw, 82px);
  overflow: hidden;
}
.hero h1 { font-size: clamp(3rem, 8vw, 6.6rem); line-height: .9; margin: 16px 0 24px; color: var(--blue-950); }
.hero h1 span { display: block; color: var(--blue-700); font-size: .68em; }
.hero-lede { max-width: 680px; font-size: clamp(1.02rem, 2vw, 1.25rem); line-height: 1.58; color: #3d5367; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 25px 0 14px; }
.mode-note, .privacy-note { color: var(--muted); font-size: .88rem; }
.hero-art {
  width: min(100%, 330px);
  justify-self: center;
  border-radius: 22px;
  box-shadow: 0 24px 48px rgba(8, 65, 117, .22);
  transform: rotate(2deg);
}
.mini-lesson {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  align-items: center;
  gap: 26px;
  padding-block: 24px;
}
.mini-lesson h2 { margin-bottom: 0; }
.scan-cue { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; font-weight: 800; color: var(--blue-900); }
.scan-cue .scan-line { letter-spacing: .25em; }
.mini-lesson p { margin: 0; line-height: 1.5; color: #52687c; }

.auth-shell { padding-top: min(11vh, 90px); }
.stack { display: grid; gap: 18px; }
.stack label { display: grid; gap: 7px; font-weight: 800; }
.stack label small { font-weight: 500; }
input {
  width: 100%;
  min-height: 50px;
  border: 1px solid #b7cbdc;
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--ink);
  background: #fff;
}
.error { color: var(--danger); min-height: 1.25em; margin-bottom: 0; }
.success { color: var(--success); min-height: 1.25em; margin-bottom: 0; }
.demo-cred { background: #f4f8fb; border-radius: 12px; padding: 12px 14px; }

.topbar { margin-bottom: 24px; }
.topbar h1 { margin: 4px 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
.level-select-shell {
  width: min(1040px, calc(100% - 28px));
  padding-top: clamp(18px, 2.5vw, 28px);
  padding-bottom: 40px;
}
.level-select-topbar {
  width: min(100%, 1000px);
  margin: 0 auto clamp(14px, 2vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.level-select-topbar h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  line-height: 1;
}
.level-grid {
  width: min(100%, 1000px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: 16px;
}
.level-card {
  position: relative;
  width: 100%;
  max-width: 190px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(21, 72, 111, .17);
  border-radius: 19px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 22px rgba(14, 72, 113, .12);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.level-art {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #159fe9;
}
.level-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .18s ease;
}
.level-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  padding: 9px 10px 10px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.level-best {
  flex-basis: 100%;
  display: block;
  color: #172330;
  font-size: clamp(.78rem, .9vw, .88rem);
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.level-best strong { font-size: 1.04em; }
.level-best.score-strong { color: #14613d; }
.level-best.score-great { color: #075e72; }
.level-best.score-excellent { color: #6b4c0a; }
.level-best.score-perfect { color: #7b5100; }
.achievement,
.stopwatch-unlocked {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
}
.achievement { padding: 4px 7px; border: 1px solid transparent; }
.achievement-strong { color: #14613d; background: #edf9f2; border-color: #b8dec9; }
.achievement-great { color: #075e72; background: #ebf8fb; border-color: #acdce6; }
.achievement-excellent { color: #73520b; background: #fff8df; border-color: #efd98e; }
.achievement-perfect {
  color: #6b4300;
  background: linear-gradient(135deg, #fff9d7, #ffeaa0 58%, #fff7ce);
  border-color: #e6bd45;
  box-shadow: 0 2px 8px rgba(196, 139, 17, .14);
}
.stopwatch-unlocked {
  padding: 5px 8px;
  color: #744900;
  background: #fff6d7;
  border: 1px solid #e5c463;
}
.level-card:has(.achievement-perfect) {
  border-color: rgba(211, 157, 35, .58);
  box-shadow: 0 10px 26px rgba(183, 126, 13, .17);
}
.level-card:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(17, 98, 160, .48);
  box-shadow: 0 14px 30px rgba(14, 72, 113, .18);
}
.level-card:hover .level-art img { transform: scale(1.012); }
.level-card:focus-visible {
  outline: 4px solid rgba(244, 169, 42, .88);
  outline-offset: 4px;
}
.speed-card {
  border-color: #e2c35e;
  background: linear-gradient(180deg, #fffdf4, #fff6cf);
}
.speed-card strong { color: #714800; }
.speed-record-panel { border-color: #eadba7; background: linear-gradient(180deg, #fffef8, #fffaf0); }
.speed-empty { color: var(--muted); margin: 0; }
.speed-records {
  list-style: none;
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
}
.speed-records li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid #eadfb9;
}
.speed-rank {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff2b7;
  color: #6e4b00;
  font-weight: 900;
  font-size: .78rem;
}
.speed-records li > span:last-child { font-variant-numeric: tabular-nums; font-weight: 850; color: #5b6874; }
.stopwatch-result {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 16px auto 22px;
  padding: 12px 18px;
  width: fit-content;
  border: 1px solid #e1cc83;
  border-radius: 16px;
  background: #fffaf0;
}
.stopwatch-result span { color: #6e5b24; font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.stopwatch-result strong { font-size: 1.7rem; font-variant-numeric: tabular-nums; color: #644500; }
.stopwatch-result small { color: var(--muted); }
.unlock-celebration {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 20px 0 24px;
  padding: 18px;
  text-align: left;
  border-radius: 20px;
  border: 2px solid #dfb53f;
  background: radial-gradient(circle at top left, #fffbe8, #fff2b4 65%, #ffed9f);
  box-shadow: 0 12px 30px rgba(177, 119, 8, .14);
}
.unlock-medal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8bf, #f4c84c);
  border: 2px solid #c99416;
  color: #6d4800;
  font-size: 1.9rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 5px 14px rgba(129, 83, 3, .16);
  animation: unlock-pop .55s cubic-bezier(.2,.9,.35,1.2) both;
}
.perfect-label { color: #815500; font-size: .75rem; font-weight: 950; letter-spacing: .12em; }
.unlock-celebration strong { display: block; margin-top: 2px; font-size: 1.45rem; color: #604000; }
.unlock-celebration h2 { margin: 3px 0 2px; color: #513800; }
.unlock-celebration p { margin: 0; color: #745d25; }
.results-speed-records { margin: 14px auto 4px; width: min(560px, 100%); text-align: left; }
.results-speed-records h2 { font-size: .92rem; margin: 0 0 7px; }
.results-speed-records .speed-records { gap: 5px; }
.results-speed-records .speed-records li { padding: 7px 10px; }
@keyframes unlock-pop {
  0% { transform: scale(.7) rotate(-7deg); opacity: 0; }
  70% { transform: scale(1.07) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.resume-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 20px; padding: 15px 18px;
  background: #fff7df; border: 1px solid #f2cf77; border-radius: 16px;
}
.resume-banner div:first-child { display: grid; gap: 4px; }
.resume-banner span { color: #72581d; font-size: .9rem; }
.resume-actions { display: flex; gap: 8px; }

.round-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.round-grid.has-speed { grid-template-columns: repeat(2, 1fr); }
.round-card {
  min-height: 132px; border: 1px solid #c4ddec; border-radius: 18px; padding: 18px;
  background: linear-gradient(180deg, #fff, #f2f9ff); color: var(--ink); text-align: left;
}
.round-card:hover { border-color: #65aadd; transform: translateY(-2px); }
.round-card strong { display: block; font-size: 1.04rem; margin-bottom: 9px; }
.round-card span { color: var(--muted); font-size: .87rem; line-height: 1.4; }
.shell.narrow > .panel + .panel { margin-top: 18px; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 8px 0;
}
.setting-row + .setting-row { margin-top: 15px; padding-top: 20px; border-top: 1px solid var(--line); }
.setting-row > div:first-child { display: grid; gap: 4px; }
.setting-row > div:first-child span { color: var(--muted); font-size: .86rem; }
.setting-row.compact { align-items: flex-start; }
.segmented {
  display: inline-flex; align-items: stretch; padding: 4px; gap: 4px;
  border: 1px solid #c4d8e7; border-radius: 14px; background: #edf5fb;
}
.segmented button { min-height: 38px; padding: 8px 11px; background: transparent; color: #456277; }
.segmented button.active { background: #fff; color: var(--blue-900); box-shadow: 0 2px 8px rgba(10, 74, 123, .12); }
.toggle { min-width: 68px; padding: 8px 13px; border: 1px solid #bccfdd; background: #edf2f6; color: #4c6172; }
.toggle.on { background: var(--success-bg); border-color: #91d4aa; color: var(--success); }
.notice {
  margin-bottom: 16px; padding: 13px 16px; border-radius: 14px;
  background: var(--warning-bg); color: #6c4c07; border: 1px solid #efd58e;
}

.reminder-shell { padding-top: min(7vh, 55px); }
.reminder-panel { text-align: center; }
.reminder-panel h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); max-width: 650px; margin: 12px auto 25px; }
.eye-scan { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 10px auto 28px; color: var(--blue-800); }
.eye-scan .eyes { font-size: 2rem; }
.eye-scan .arrow-track { font-size: 1.5rem; letter-spacing: .35em; }
.orientation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.orientation-card {
  display: grid; justify-items: center; gap: 8px;
  padding: 22px; border: 1px solid #cbddea; border-radius: 20px; background: #f8fcff;
}
.orientation-letter { font-family: Arial, Helvetica, sans-serif; font-size: clamp(4rem, 10vw, 6.5rem); line-height: .9; color: #112e48; }
.mouth-cue { display: grid; place-items: center; width: 58px; height: 36px; color: var(--blue-800); font-weight: 900; font-size: 2rem; }
.round-mouth { font-size: 2.45rem; line-height: 1; }
.orientation-card strong { color: var(--blue-950); font-size: 1.1rem; }
.orientation-card span { color: var(--muted); }
.reminder-note { margin: 24px 0 20px; color: var(--muted); }

.game-shell {
  width: min(960px, calc(100% - 24px));
  margin: 0 auto;
  min-height: 100vh;
  padding: 18px 0 30px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
}
.game-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.race-wrap {
  background: rgba(255,255,255,.9); border: 1px solid rgba(113,160,196,.35); border-radius: 18px;
  padding: 11px 14px 13px; box-shadow: 0 8px 25px rgba(13,73,116,.09);
}
.race-label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; font-size: .82rem; font-weight: 800; color: #50677b; }
.track {
  position: relative; height: 42px; border-radius: 13px; overflow: visible;
  background: linear-gradient(180deg, #1888da, #0868b9); border: 2px solid #0a5595;
}
.track-lanes {
  position: absolute; inset: 0; border-radius: 11px; opacity: .72;
  background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(255,255,255,.72) 12px 14px);
}
.track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; background: rgba(255,255,255,.15); transition: width .42s ease; }
.runner {
  position: absolute; z-index: 2; top: 50%; width: 56px; height: 48px; object-fit: cover;
  border-radius: 11px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 10px rgba(0,40,80,.22);
  transform: translate(-50%, -50%); transition: left .48s cubic-bezier(.2,.75,.2,1);
}
.help { min-width: 84px; background: #fff; color: var(--blue-900); border: 1px solid #bdd7ea; padding: 10px 14px; box-shadow: 0 6px 18px rgba(13,73,116,.08); }
.game-card {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(245px, 1fr) auto 32px;
  place-items: center;
  align-content: center;
  padding: clamp(14px, 2.5vw, 24px);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(113,160,196,.32);
  border-radius: 28px;
  box-shadow: 0 15px 44px rgba(9,72,119,.11);
}
.picture-frame {
  width: min(54vh, 460px, 78vw);
  aspect-ratio: 1;
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 24px;
}
.clue-image { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .18s ease; }
.picture-frame.loading .clue-image { opacity: 0; }
.picture-skeleton { display: none; position: absolute; inset: 8%; border-radius: 22px; background: linear-gradient(90deg, #f3f6f8 25%, #e7edf1 37%, #f3f6f8 63%); background-size: 400% 100%; animation: shimmer 1.2s infinite; }
.picture-frame.loading .picture-skeleton { display: block; }
.image-fallback { color: var(--muted); font-weight: 750; background: #f4f7f9; border-radius: 14px; padding: 16px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.word {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 1.25em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(4rem, 11vw, 7.7rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: .005em;
  color: #111f2c;
  white-space: nowrap;
}
.word-letter { display: inline-block; min-width: .54em; text-align: center; }
.letter-blank {
  display: inline-block;
  width: .58em;
  height: .86em;
  margin: 0 .01em .04em;
  border-bottom: .075em solid #1684e0;
  vertical-align: bottom;
}
.inserted { color: var(--blue-700); animation: letterPop .34s ease-out; }
@keyframes letterPop { 0% { transform: translateY(-.2em) scale(1.2); opacity: .25; } 70% { transform: translateY(.02em) scale(.96); } 100% { transform: none; opacity: 1; } }
.feedback-msg { min-height: 28px; font-size: 1.05rem; font-weight: 800; color: var(--muted); }
.feedback-msg.good { color: var(--success); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.letter {
  min-height: clamp(92px, 14vh, 128px);
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 30px rgba(12,70,111,.14);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(4.1rem, 10vw, 6.6rem);
  font-weight: 600;
  line-height: 1;
  color: #10283c;
  transition: transform .12s ease, filter .12s ease;
}
.letter:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.02); }
.b-btn { background: #eaf6ff; border-color: #9fd2f2; }
.d-btn { background: #eaf6ff; border-color: #9fd2f2; }
.read-it {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid #bfd8e8; box-shadow: 0 10px 25px rgba(13,73,116,.09);
}
.read-it strong { color: var(--blue-800); letter-spacing: .08em; }
.read-word { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 700; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 39, 69, .56); backdrop-filter: blur(4px);
}
.modal { width: min(520px, 100%); padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 25px 80px rgba(1,30,60,.3); }
.scan-demo { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px; margin: 15px 0; border-radius: 16px; background: #eef8ff; color: var(--blue-800); font-size: 1.45rem; letter-spacing: .18em; }
.help-cues { display: grid; gap: 8px; }
.help-cues p { margin: 0; padding: 12px 14px; background: #f6f9fb; border-radius: 12px; }
.help-note { color: var(--muted); margin: 16px 0; }

.results { text-align: center; margin-top: min(7vh, 60px); }
.finish { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 3rem; }
.finish img { width: 92px; height: 78px; object-fit: cover; border-radius: 16px; }
.results h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); margin: 8px 0 10px; }
.score-big { font-size: clamp(4rem, 12vw, 7rem); line-height: .9; font-weight: 900; color: var(--blue-800); }
.stats, .teacher-summary, .metric-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0;
}
.stats > div, .teacher-summary > div, .metric-grid > div {
  display: grid; gap: 5px; align-content: center; min-height: 100px;
  padding: 15px; border-radius: 17px; background: #f2f8fc; border: 1px solid #d6e5ef;
}
.stats strong, .teacher-summary strong, .metric-grid strong { font-size: 1.65rem; color: var(--blue-950); }
.stats span, .teacher-summary span, .metric-grid span { color: var(--muted); font-size: .82rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 25px; }
.support-note { padding: 12px 14px; border-radius: 13px; background: var(--warning-bg); color: #76520b; }
.save-warning { display: grid; gap: 7px; text-align: left; margin-top: 18px; padding: 15px; border-radius: 14px; color: #743c17; background: #fff3e7; border: 1px solid #efc295; }
.save-warning button { justify-self: start; }
.save-status {
  width: fit-content;
  margin: 13px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #587083;
  font-size: .82rem;
  font-weight: 800;
}
.save-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #bdd5e7;
  border-top-color: var(--blue-700);
  border-radius: 50%;
  animation: save-spin .8s linear infinite;
}
@keyframes save-spin { to { transform: rotate(360deg); } }


.teacher-shell { width: min(1280px, calc(100% - 32px)); }
.teacher-summary { margin-top: 0; }
.teacher-panel { margin-top: 16px; }
.section-heading { margin-bottom: 15px; }
.section-heading h2 { margin: 3px 0 0; }
.section-heading > span { color: var(--muted); font-size: .86rem; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #e1e9ef; vertical-align: top; }
th { color: #546b7f; font-size: .78rem; text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; }
td { font-size: .93rem; }
.click-row { transition: background .12s ease; }
.click-row:hover { background: #f5faff; }
.table-link { border: 0; background: transparent; padding: 0; color: var(--blue-900); font-weight: 850; text-align: left; text-decoration: underline; text-decoration-color: #a9cee7; text-underline-offset: 3px; }
.empty-state { display: grid; gap: 5px; justify-items: start; padding: 25px 4px 5px; color: var(--muted); }
.teacher-detail-head { align-items: flex-end; margin-bottom: 18px; }
.teacher-detail-head h1 { margin: 3px 0 0; font-size: clamp(2rem, 5vw, 3.4rem); }
.teacher-detail-head p { color: var(--muted); margin-bottom: 0; }
.metric-grid.six { grid-template-columns: repeat(6, 1fr); }
.teacher-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.teacher-two-col .panel { height: 100%; }
.detail-list { display: grid; gap: 3px; }
.detail-list p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 10px 0; border-bottom: 1px solid #e5edf3; }
.detail-list p:last-child { border-bottom: 0; }
.detail-list span { color: var(--muted); }
.word-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.word-chips > span { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; background: #f2f8fc; border: 1px solid #d4e3ed; }
.word-chips small { font-size: .72rem; }
.teacher-shell > .panel + .panel { margin-top: 16px; }


@media (min-width: 1600px) {
  .home-shell { width: min(1100px, calc(100% - 40px)); }
  .home-wordmark { width: clamp(330px, 22vw, 410px); }
}

@media (max-width: 1050px) {
  .home-shell { width: min(940px, calc(100% - 28px)); }
  .home-ui { width: 53%; padding-inline: clamp(24px, 4vw, 40px); }
  .home-wordmark { width: clamp(250px, 34vw, 350px); }
  .level-select-shell { width: min(700px, calc(100% - 24px)); }
  .level-grid {
    max-width: 640px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
  }
  .level-card { max-width: 198px; }
  .metric-grid.six { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .shell, .teacher-shell { width: min(100% - 20px, 680px); padding-top: 18px; }
  .home-shell { width: calc(100% - 18px); padding: 9px 0; }
  .home-hero {
    aspect-ratio: 5 / 4;
    max-height: none;
    border-radius: 22px;
  }
  .home-banner img { object-position: 68% 50%; }
  .home-wash {
    background:
      linear-gradient(180deg, rgba(225, 244, 255, .46) 0%, rgba(225, 244, 255, .16) 36%, rgba(225, 244, 255, 0) 62%),
      linear-gradient(90deg, rgba(229, 246, 255, .2), rgba(229, 246, 255, 0) 78%);
  }
  .home-ui {
    inset: 0;
    width: 100%;
    padding: clamp(28px, 6vw, 44px) clamp(20px, 6vw, 38px);
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }
  .home-wordmark { width: min(64vw, 390px); }
  .home-actions { justify-content: center; }
  .level-select-shell { width: min(430px, calc(100% - 20px)); }
  .level-grid {
    max-width: 410px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .level-card { max-width: 192px; }
  .level-select-topbar { margin-bottom: 14px; }
  .topbar { align-items: flex-start; }
  .round-grid { grid-template-columns: 1fr; }
  .setting-row { align-items: flex-start; flex-direction: column; }
  .orientation-grid { grid-template-columns: 1fr 1fr; }
  .game-shell { width: calc(100% - 14px); padding-top: 9px; }
  .game-top { grid-template-columns: 1fr auto; gap: 8px; }
  .race-wrap { padding: 9px 10px 11px; }
  .runner { width: 50px; height: 43px; }
  .game-card { grid-template-rows: minmax(215px, 1fr) auto 28px; border-radius: 22px; }
  .picture-frame { width: min(45vh, 350px, 82vw); }
  .choices { gap: 10px; }
  .letter { border-radius: 19px; }
  .read-it { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .stats, .teacher-summary, .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid.six { grid-template-columns: 1fr 1fr; }
  .teacher-two-col { grid-template-columns: 1fr; }
  .teacher-detail-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .panel { padding: 20px 17px; border-radius: 20px; }
  .home-hero { aspect-ratio: 4 / 5; }
  .home-ui { padding-inline: 18px; padding-top: 28px; }
  .home-wordmark { width: min(78vw, 330px); }
  .home-actions {
    width: min(100%, 320px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .home-action { width: 100%; min-height: 50px; padding-block: 11px; }
  .level-select-shell { width: min(400px, calc(100% - 18px)); }
  .level-grid { gap: 12px; }
  .level-card { max-width: 178px; border-radius: 17px; }
  .level-card-meta { min-height: 61px; padding: 8px 9px 9px; }
  .achievement, .stopwatch-unlocked { font-size: .59rem; }
  .resume-banner { align-items: flex-start; flex-direction: column; }
  .orientation-grid { grid-template-columns: 1fr; }
  .orientation-letter { font-size: 4.5rem; }
  .game-card { min-height: 58vh; }
  .picture-frame { width: min(37vh, 285px, 86vw); }
  .word { font-size: clamp(3.7rem, 18vw, 5.3rem); }
  .letter { min-height: 94px; font-size: 4.6rem; }
  .help { min-width: 72px; padding-inline: 10px; }
  .stats, .teacher-summary, .metric-grid, .metric-grid.six { grid-template-columns: 1fr; }
  .topbar-actions { align-items: flex-end; flex-direction: column; gap: 3px; }
}

@media (max-width: 340px) {
  .level-select-topbar { align-items: flex-start; }
  .level-select-topbar h1 { font-size: 1.75rem; }
  .level-select-shell { width: min(250px, calc(100% - 18px)); }
  .level-grid { grid-template-columns: 1fr; gap: 14px; }
  .level-card { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* v0.3.7 student UX refinement */
.student-entry-shell {
  width: min(590px, calc(100% - 24px));
  padding-top: clamp(22px, 5vh, 54px);
  padding-bottom: 28px;
}
.student-entry-panel { padding: clamp(22px, 4vw, 34px); }
.guest-primary {
  width: 100%;
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 14px 22px;
  border: 1px solid #064f97;
  border-radius: 17px;
  color: #fffdf3;
  background: linear-gradient(180deg, #1888e2, #0758a6);
  box-shadow: 0 11px 24px rgba(7, 77, 136, .22), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.guest-primary:hover { transform: translateY(-2px); filter: brightness(1.035); box-shadow: 0 14px 28px rgba(7,77,136,.27); }
.guest-primary span { font-size: 1.22rem; font-weight: 900; }
.guest-primary small { color: rgba(255,255,255,.84); font-size: .78rem; font-weight: 700; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 11px; margin: 19px 0 15px; color: #718596; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before,.auth-divider::after { content: ''; height: 1px; background: #d8e4ed; }
.student-signin-title { margin: 0 0 16px; font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; }
.signup-toggle { width: 100%; margin-top: 7px; }
.entry-back { margin-top: 4px; }

.level-identity {
  display: grid;
  gap: 2px;
  padding: 9px 10px 8px;
  background: #fffdf6;
  border-top: 1px solid rgba(23,78,118,.12);
  border-bottom: 1px solid rgba(23,78,118,.1);
}
.level-number {
  color: var(--blue-950);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.level-focus {
  color: #1b3449;
  font-size: .78rem;
  line-height: 1.15;
  font-weight: 860;
}
.level-examples {
  color: #667887;
  font-size: .69rem;
  line-height: 1.18;
  font-weight: 650;
}
.level-card-meta { min-height: 57px; padding: 8px 10px 9px; }
.level-best { font-size: .77rem; }

.round-select-shell { width: min(680px, calc(100% - 24px)); padding-top: 22px; padding-bottom: 36px; }
.round-topbar { margin-bottom: 18px; align-items: flex-start; }
.round-topbar h1 { margin: 3px 0 2px; font-size: clamp(1.8rem, 4vw, 2.65rem); }
.round-examples { margin: 0; color: var(--muted); font-weight: 750; font-size: .92rem; }
.round-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.round-grid.has-speed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.round-card {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 7px 18px rgba(13,73,116,.08);
}
.round-card strong { margin: 0; font-size: 1.02rem; }
.practice-missed-link { display: block; margin: 9px auto 2px; min-height: 38px; color: #557083; }
.speed-record-compact { margin-top: 18px; padding: 14px 16px; border-radius: 17px; border: 1px solid #eadba7; background: rgba(255,253,244,.82); }
.speed-record-compact h2 { margin: 0 0 9px; font-size: .92rem; color: #614a13; }
.speed-record-compact .speed-records { gap: 5px; }
.speed-record-compact .speed-records li { padding: 7px 9px; }
.reminder-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 14px;
  border-top: 1px solid #dce7ef;
  color: #526b7d;
  font-size: .88rem;
  font-weight: 750;
}

.reminder-shell {
  width: min(930px, calc(100% - 24px));
  min-height: 100svh;
  padding: 12px 0;
  display: grid;
  place-items: center;
}
.reminder-panel {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(14px, 2.3vw, 24px);
}
.strategy-picture { display: grid; place-items: center; width: 100%; }
.strategy-picture img {
  display: block;
  width: min(980px, 100%);
  max-height: 62dvh;
  height: auto;
  object-fit: contain;
}
.strategy-picture-overview img {
  width: min(1000px, 100%);
  max-height: min(68dvh, 720px);
}
.start-dash-button { min-width: 180px; min-height: 52px; font-size: 1.04rem; }

.game-shell {
  width: min(900px, calc(100% - 18px));
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  padding: 7px 0 9px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  overflow: hidden;
}
.game-top { gap: 8px; }
.race-wrap { padding: 6px 10px 8px; border-radius: 14px; }
.race-label { margin-bottom: 4px; font-size: .72rem; }
.track { height: 30px; border-radius: 10px; }
.track-lanes { border-radius: 8px; background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(255,255,255,.72) 8px 10px); }
.runner { width: 44px; height: 38px; border-radius: 9px; }
.help { min-width: 76px; min-height: 42px; padding: 8px 11px; }
.game-card {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto 22px;
  align-content: center;
  gap: 2px;
  padding: clamp(8px, 1.4vw, 14px);
  border-radius: 21px;
  overflow: hidden;
}
.picture-frame {
  width: min(42vw, 52svh, 430px);
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 17px;
}
.clue-image { object-fit: contain; }
.word { font-size: clamp(3.2rem, 8svh, 6.25rem); line-height: .9; }
.feedback-msg { min-height: 22px; font-size: .92rem; }
.choices { gap: 12px; }
.letter {
  min-height: clamp(76px, 11svh, 96px);
  border-radius: 19px;
  font-size: clamp(3.8rem, 8svh, 5.6rem);
}

.game-shell.showing-correction { grid-template-rows: auto minmax(0,1fr); }
.game-shell.showing-correction .game-card { grid-template-rows: 1fr; }
.correction-card {
  width: min(760px, 100%);
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 1.8vh, 16px);
  padding: clamp(8px, 2vh, 18px);
  text-align: center;
}
.correction-kicker { color: #213f56; font-size: 1.25rem; font-weight: 950; letter-spacing: .01em; }
.correction-instruction {
  width: min(660px, 100%);
  margin: 0;
  color: #385468;
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.4;
}
.correction-steps {
  margin: 0;
  padding-left: 1.7rem;
  text-align: left;
  display: grid;
  gap: 5px;
}
.correction-steps li { padding-left: .15rem; }
.correction-steps strong { font-weight: 850; }
.correction-strategy {
  width: min(660px, 100%);
  display: grid;
  place-items: center;
}
.correction-strategy img {
  display: block;
  width: min(660px, 100%);
  height: auto;
  object-fit: contain;
}
.spelling-compare { width: min(520px, 100%); display: grid; gap: 10px; }
.spelling-option {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 10px 20px 10px 12px;
  border-radius: 19px 17px 20px 16px;
  border: 2px solid #d3dfe7;
  background: #f5f8fa;
  text-align: left;
  box-shadow: 0 6px 0 rgba(23,62,99,.045), inset 0 1px 0 rgba(255,255,255,.75);
}
.spelling-option span { color: #6d7c88; font-size: .76rem; font-weight: 850; }
.spelling-option strong { font-family: Arial, Helvetica, sans-serif; font-size: clamp(2.5rem, 6svh, 4.5rem); line-height: .9; text-align: left; color: #314758; }
.spelling-option.chosen { border-color: #df9b9b; background: linear-gradient(180deg,#fff7f3,#fff1ef); }
.spelling-option.correct { border-color: #68ad82; background: linear-gradient(180deg,#fffdf0,#eaf8ed); box-shadow: 0 7px 0 rgba(28,112,63,.07), inset 0 1px 0 rgba(255,255,255,.8); }
.spelling-option.correct span,
.spelling-option.correct strong { color: #0f6035; }
.correction-choice {
  width: 100%;
  cursor: pointer;
}
.correction-choice:hover,
.correction-choice:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 9px 0 rgba(28,112,63,.09), inset 0 1px 0 rgba(255,255,255,.85);
}
.correction-choice:focus-visible {
  outline: 3px solid rgba(13,95,184,.28);
  outline-offset: 2px;
}

.modal { width: min(480px,100%); }
.help-cues p { text-align: left; }

.results-shell { padding-top: 12px; padding-bottom: 28px; }
.results { margin-top: 0; padding: clamp(20px, 3.5vw, 32px); }
.finish-mark { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; margin-bottom: 2px; }
.finish-flag { font-size: 2.1rem; line-height: 1; }
.results h1 { font-size: clamp(1.9rem, 4.7vw, 3rem); line-height: 1.02; margin: 4px 0 13px; }
.score-big { font-size: clamp(3.7rem, 9vw, 5.8rem); line-height: .9; }
.accuracy-line { margin-top: 9px; color: #435e72; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 850; }
.result-achievement { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 5px; padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 950; letter-spacing: .02em; }
.result-achievement.achievement-strong { color:#14613d;background:#edf9f2;border:1px solid #b8dec9; }
.result-achievement.achievement-great { color:#075e72;background:#ebf8fb;border:1px solid #acdce6; }
.result-achievement.achievement-excellent { color:#73520b;background:#fff8df;border:1px solid #efd98e; }
.result-achievement.achievement-perfect { color:#6b4300;background:linear-gradient(135deg,#fff9d7,#ffeaa0);border:1px solid #e6bd45;box-shadow:0 4px 12px rgba(196,139,17,.12); }
.best-streak { width: fit-content; margin: 12px auto 0; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 13px; border-radius: 13px; background:#f2f8fc; border:1px solid #d6e5ef; }
.best-streak span { color: var(--muted); font-size: .82rem; font-weight: 750; }
.best-streak strong { color: var(--blue-950); font-size: 1.15rem; }
.result-actions { margin-top: 18px; }

@media (max-width: 1050px) {
  .level-card { max-width: 198px; }
  .level-identity { padding-inline: 9px; }
  .level-focus { font-size: .76rem; }
  .level-examples { font-size: .67rem; }
}

@media (max-width: 820px) {
  .round-grid, .round-grid.has-speed { grid-template-columns: 1fr 1fr; }
  .round-card { min-height: 78px; }
  .reminder-shell { width: min(760px, calc(100% - 18px)); padding: 9px 0; }
  .strategy-picture img { max-height: 60dvh; }
  .game-shell { width: calc(100% - 12px); padding-top: 5px; padding-bottom: 6px; }
  .race-wrap { padding: 5px 8px 7px; }
  .picture-frame { width: min(68vw, 48svh, 390px); }
  .game-card { padding: 8px; }
  .spelling-option { padding: 9px 12px; }
}

@media (max-width: 560px) {
  .student-entry-shell { padding-top: 12px; }
  .level-identity { min-height: 64px; }
  .level-number { font-size: .69rem; }
  .level-focus { font-size: .73rem; }
  .level-examples { font-size: .63rem; }
  .round-grid, .round-grid.has-speed { grid-template-columns: 1fr; }
  .round-card { min-height: 66px; }
  .reminder-setting { align-items: center; }
  .strategy-picture img { max-height: 52dvh; }
  .game-shell { gap: 5px; }
  .game-top { gap: 5px; }
  .track { height: 26px; }
  .runner { width: 39px; height: 34px; }
  .picture-frame { width: min(86vw, 44svh, 345px); }
  .word { font-size: clamp(3rem, 14vw, 4.8rem); }
  .letter { min-height: 78px; font-size: clamp(3.7rem, 18vw, 4.8rem); }
  .correction-card { gap: 12px; }
  .correction-instruction { font-size: .98rem; }
  .correction-strategy img { width: min(100%, 620px); }
  .spelling-option { grid-template-columns: 48px 1fr; min-height: 76px; padding: 8px 14px 8px 9px; }
  .spelling-option strong { font-size: clamp(2.5rem, 13vw, 3.8rem); }
  .results { padding: 18px 14px; }
  .unlock-celebration { grid-template-columns: 1fr; text-align:center; justify-items:center; }
}

@media (max-width: 340px) {
  .level-identity { min-height: 0; }
  .round-topbar { gap: 6px; }
}

.student-entry-panel .error:empty,
.student-entry-panel .success:empty { display: none; }

@media (max-width: 1050px) {
  .level-select-shell { padding-bottom: 8px; }
}

/* =========================================================
   Brain Dash v0.3.9 — High Scores + unified student navigation
   ========================================================= */

/* Guest play should read as the fastest, most inviting path into the game. */
.guest-primary {
  color: #15324a;
  background: linear-gradient(180deg, #ffe783 0%, #f2bd3f 66%, #e9a92a 100%);
  border: 2px solid #c88812;
  box-shadow: 0 10px 24px rgba(156, 100, 8, .22), inset 0 2px 0 rgba(255,255,255,.65);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.guest-primary:hover { box-shadow: 0 14px 30px rgba(156, 100, 8, .28); filter: brightness(1.025); }
.guest-primary small { color: #5d4717; }

/* A single, consistent student back-navigation treatment. */
.back-nav {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 8px 10px;
  border-radius: 14px;
  border: 1.5px solid #aac9df;
  color: #0a4f96;
  background: rgba(255,253,245,.94);
  box-shadow: 0 5px 13px rgba(13,73,116,.08), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: .84rem;
  font-weight: 850;
  letter-spacing: -.01em;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.back-nav:hover { transform: translateX(-2px); border-color: #6ea9d2; box-shadow: 0 7px 16px rgba(13,73,116,.12); }
.back-arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 9px; background: #e8f4fd; font-size: 1.12rem; line-height: 1; }
.entry-back { margin-top: 14px; }
.level-footer-nav { width: min(100%, 1000px); margin: 18px auto 0; display: flex; justify-content: flex-start; }

/* Level cards remain compact, but the selected level becomes unmistakable. */
.level-card.selected {
  border-color: #e0a72b;
  box-shadow: 0 0 0 3px rgba(255,225,132,.74), 0 15px 31px rgba(14,72,113,.18);
  transform: translateY(-2px);
}
.level-card.selected::after {
  content: 'SELECTED';
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,248,213,.96);
  border: 1px solid #ddb146;
  color: #684500;
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 0 3px 9px rgba(100,70,10,.14);
}
.level-best { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.level-best-label { color: #6d7c88; font-size: .58rem; font-weight: 950; letter-spacing: .08em; }
.level-pick-hint { width: min(100%,1000px); margin: 18px auto 0; text-align: center; color: #607386; font-size: .86rem; font-weight: 720; }

/* Same-screen play panel + personal high scores. */
.selected-level-panel {
  width: min(100%, 1000px);
  margin: 20px auto 0;
  padding: clamp(16px, 2vw, 22px);
  border: 2px solid rgba(20,83,132,.22);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,255,.97));
  box-shadow: 0 14px 34px rgba(11,65,110,.12);
}
.selected-level-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.selected-level-number { color: #0d5fb8; font-size: .68rem; font-weight: 950; letter-spacing: .11em; }
.selected-level-heading h2 { margin: 2px 0 2px; color: #15324a; font-size: clamp(1.25rem, 2.2vw, 1.72rem); line-height: 1.08; }
.selected-level-heading p { margin: 0; color: #607386; font-size: .82rem; font-weight: 720; }
.selected-stopwatch-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; color: #714800; background: #fff4c8; border: 1px solid #e4c35f; font-size: .67rem; font-weight: 900; }
.selected-level-notice { margin: 0 0 12px; }
.selected-level-content { display: grid; grid-template-columns: minmax(260px,.82fr) minmax(420px,1.28fr); gap: 18px; align-items: stretch; }
.play-panel {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 19px;
  border: 1px solid #c7ddea;
  background: linear-gradient(180deg,#f9fdff,#eef8ff);
  min-width: 0;
}
.play-panel-heading { margin-bottom: 11px; }
.play-kicker { color: #1976d2; font-size: .62rem; font-weight: 950; letter-spacing: .12em; }
.play-panel-heading h2 { margin: 2px 0 0; font-size: 1.18rem; }
.game-choice-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.game-choice-grid.has-speed { grid-template-columns: 1fr; }
.game-choice-grid .round-card {
  min-height: 62px;
  padding: 11px 13px;
  border-width: 1.5px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 12px rgba(13,73,116,.07);
}
.game-choice-grid .round-card strong { font-size: .98rem; }
.play-panel .practice-missed-link { margin: auto auto 0; padding-top: 13px; }

/* High Scores: arcade hierarchy without abandoning the painted Brain Dash palette. */
.high-scores-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 15px 16px 13px;
  border-radius: 20px;
  border: 2px solid #173e63;
  background:
    linear-gradient(180deg, rgba(255,250,230,.98), rgba(255,253,243,.98));
  box-shadow: 0 8px 0 rgba(9,57,98,.08), inset 0 0 0 3px rgba(255,255,255,.72);
}
.high-scores-panel::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg,#0d5fb8 0 22px,#fff6d1 22px 32px,#e4ad2d 32px 54px,#fff6d1 54px 64px);
  opacity: .9;
}
.high-scores-heading { display: flex; align-items: center; gap: 10px; padding-top: 5px; margin-bottom: 10px; }
.hs-trophy { width: 40px; height: 40px; fill: #ffd86c; stroke: #173e63; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(103,70,0,.12)); }
.hs-eyebrow { color: #80621b; font-size: .56rem; font-weight: 950; letter-spacing: .14em; }
.high-scores-heading h2 { margin: 0; color: #083e74; font-size: 1.35rem; line-height: .95; letter-spacing: .045em; }
.high-score-tabs { display: flex; gap: 6px; margin-bottom: 9px; padding: 3px; border-radius: 12px; background: #e7f1f8; border: 1px solid #c4d8e7; }
.high-score-tab {
  flex: 1 1 0;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #526b7d;
  font-size: .7rem;
  font-weight: 850;
  padding: 6px 7px;
}
.high-score-tab.active { color: #fff; background: linear-gradient(180deg,#197bd0,#0a559c); box-shadow: 0 3px 8px rgba(8,68,116,.18), inset 0 1px 0 rgba(255,255,255,.24); }
.high-score-list { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0; }
.high-score-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 13px;
  border: 1px solid #d9d7c8;
  background: rgba(255,255,255,.78);
  box-shadow: 0 2px 0 rgba(23,62,99,.04);
}
.hs-rank { display: grid; grid-auto-flow: column; place-items: baseline center; justify-content: center; gap: 1px; width: 31px; height: 31px; padding-top: 5px; border-radius: 50% 48% 53% 47%; border: 1.5px solid #98afbf; background: #eff5f8; color: #36556d; font-size: .86rem; font-weight: 950; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.hs-rank > span { font-size: .54rem; }
.high-score-row.rank-1 { border-color: #ddb340; background: linear-gradient(90deg,#fff7cf,#fffdf0 58%,#fff); box-shadow: 0 3px 0 rgba(160,112,12,.08); }
.rank-1 .hs-rank { color: #604100; border-color: #c99519; background: linear-gradient(145deg,#fff1a7,#e9b62f); }
.rank-2 .hs-rank { color: #445461; border-color: #9caab4; background: linear-gradient(145deg,#f8fbfd,#cfdbe2); }
.rank-3 .hs-rank { color: #68451f; border-color: #b58352; background: linear-gradient(145deg,#f7d1aa,#c98b53); }
.hs-score { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.hs-score strong { color: #15324a; font-size: 1.02rem; font-weight: 950; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.hs-score > span { color: #0d5fb8; font-size: .86rem; font-weight: 950; }
.high-score-row.rank-1 .hs-score strong { color: #614400; font-size: 1.08rem; }
.high-score-row.rank-1 .hs-score > span { color: #7b5500; }
.hs-time { display: inline-flex; align-items: center; gap: 5px; color: #5b6f7f; font-size: .78rem; font-weight: 820; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-clock { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.high-score-empty { min-height: 120px; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; border: 1px dashed #c9bea0; border-radius: 13px; background: rgba(255,255,255,.55); color: #6c7880; }
.high-score-empty strong { color: #173e63; font-size: 1rem; }
.high-score-empty span { max-width: 290px; font-size: .77rem; line-height: 1.35; }
.high-score-rule { margin: 8px 0 0; color: #697784; font-size: .66rem; text-align: center; }
.high-score-rule strong { color: #173e63; }
.high-score-mode-label {
  width: fit-content;
  margin: 0 auto 9px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #c9bea0;
  background: rgba(255,255,255,.72);
  color: #173e63;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.game-choice-grid.full-only { grid-template-columns: 1fr; }
.full-level-card { min-height: 86px; }

/* Reminder has one teaching visual, one action, and one consistent way back. */
.reminder-shell {
  grid-template-rows: minmax(0,1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
}
.reminder-back { width: 100%; display: flex; justify-content: flex-start; padding: 0 2px 2px; }

/* Gameplay keeps navigation inside the viewport without competing with b/d choices. */
.game-shell { grid-template-rows: auto minmax(0,1fr) auto auto; }
.game-top { display: block; }
.game-back { height: 42px; min-height: 42px; display: flex; justify-content: flex-start; align-items: end; }
.game-back:empty { height: 42px; min-height: 42px; visibility: hidden; }
.game-shell.showing-correction .game-back { display: none; }

/* More illustrative, instantly readable correction comparison. */
.spelling-compare { width: min(500px, 100%); gap: 11px; }
.spelling-option {
  grid-template-columns: 58px 1fr;
  min-height: 86px;
  gap: 10px;
  padding: 10px 20px 10px 12px;
  border-width: 2px;
  border-radius: 19px 17px 20px 16px;
  box-shadow: 0 6px 0 rgba(23,62,99,.045), inset 0 1px 0 rgba(255,255,255,.75);
}
.spelling-option.chosen { border-color: #df9b9b; background: linear-gradient(180deg,#fff7f3,#fff1ef); }
.spelling-option.correct { border-color: #68ad82; background: linear-gradient(180deg,#fffdf0,#eaf8ed); box-shadow: 0 7px 0 rgba(28,112,63,.07), inset 0 1px 0 rgba(255,255,255,.8); }
.spelling-option strong { text-align: left; color: #314758; }
.spelling-option.correct strong { color: #0f6035; }
.verdict-icon { width: 48px; height: 48px; fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(0,0,0,.06)); }
.wrong-mark { stroke: #c64040; transform: rotate(-2deg); }
.correct-mark { stroke: #19834a; transform: rotate(1deg); }
.correction-next { min-width: 150px; }

/* High-score celebration on results stays compact. */
.new-high-score { width: fit-content; margin: -3px auto 10px; display: grid; justify-items: center; gap: 1px; padding: 7px 15px 6px; border-radius: 999px; border: 1.5px solid #d5a525; background: linear-gradient(180deg,#fff6ba,#f4cf57); color: #654300; box-shadow: 0 5px 13px rgba(151,103,7,.13); }
.new-high-score span { font-size: .79rem; font-weight: 950; letter-spacing: .055em; }
.new-high-score small { color: #795d19; font-size: .59rem; font-weight: 800; }

@media (max-width: 820px) {
  .selected-level-content { grid-template-columns: 1fr; }
  .play-panel { min-height: 0; }
  .game-choice-grid, .game-choice-grid.has-speed { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-choice-grid.has-speed .round-card:last-child { grid-column: 1 / -1; }
  .reminder-back { padding-inline: 4px; }
}

@media (max-width: 560px) {
  .level-select-shell { padding-bottom: 14px; }
  .selected-level-panel { margin-top: 16px; padding: 13px; border-radius: 20px; }
  .selected-level-heading { display: grid; gap: 8px; }
  .selected-stopwatch-badge { justify-self: start; }
  .game-choice-grid, .game-choice-grid.has-speed { grid-template-columns: 1fr; }
  .game-choice-grid.has-speed .round-card:last-child { grid-column: auto; }
  .high-scores-panel { padding: 14px 11px 11px; }
  .high-score-tabs { gap: 3px; }
  .high-score-tab { padding-inline: 4px; font-size: .64rem; }
  .high-score-row { grid-template-columns: 34px minmax(0,1fr) auto; gap: 6px; padding-inline: 7px; }
  .hs-score { gap: 6px; }
  .hs-score strong { font-size: .92rem; }
  .hs-score > span { font-size: .77rem; }
  .hs-time { font-size: .7rem; }
  .hs-clock { width: 15px; height: 15px; }
  .game-shell { grid-template-rows: auto minmax(0,1fr) auto auto; }
  .game-back .back-nav { min-height: 34px; padding: 5px 9px 5px 7px; font-size: .75rem; }
  .game-back .back-arrow { width: 21px; height: 21px; }
  .spelling-option { grid-template-columns: 48px 1fr; min-height: 76px; padding: 8px 14px 8px 9px; }
  .verdict-icon { width: 41px; height: 41px; }
  .spelling-option strong { text-align: left; font-size: clamp(2.5rem, 13vw, 3.8rem); }
}

@media (max-width: 390px) {
  .high-score-row { grid-template-columns: 32px minmax(0,1fr); }
  .hs-time { grid-column: 2; justify-self: start; margin-top: -3px; }
  .high-score-row { row-gap: 0; }
  .level-footer-nav { margin-top: 14px; }
}

/* Brain Dash v0.3.13 — simplified selected-level launch UI */
.play-panel{justify-content:center;min-height:150px}
.game-choice-grid.full-only{width:100%}
.start-level-button{min-height:78px!important;border:2px solid #0a5aa8!important;border-radius:18px!important;background:linear-gradient(180deg,#1b8be5 0%,#0b65ba 62%,#07549d 100%)!important;color:#fff!important;box-shadow:0 10px 22px rgba(7,80,145,.22),inset 0 1px 0 rgba(255,255,255,.24)!important}
.start-level-button strong{font-size:clamp(1.08rem,2.2vw,1.3rem)!important;letter-spacing:.01em}
.finish-line-scores{position:relative;overflow:hidden;padding-top:24px}
.finish-line-scores::before{content:'';position:absolute;inset:0 0 auto 0;height:10px;background:linear-gradient(45deg,#18384f 25%,transparent 25%,transparent 75%,#18384f 75%) 0 0/20px 20px,linear-gradient(45deg,#18384f 25%,#fff 25%,#fff 75%,#18384f 75%) 10px 10px/20px 20px;opacity:.86}
.finish-line-scores .high-scores-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.finish-line-scores .high-scores-heading h2{margin:0}
.high-scores-flag{display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#fff7d6;border:1px solid #e4c45d;font-size:1.35rem;box-shadow:0 4px 10px rgba(80,59,9,.08)}
.finish-line-scores .high-score-empty{min-height:88px;display:grid;place-items:center;text-align:center}
.finish-line-scores .high-score-empty strong{color:#526b7d;font-size:.95rem}
@media(max-width:700px){.selected-level-content{grid-template-columns:1fr}.play-panel{min-height:0}.start-level-button{min-height:70px!important}}

/* Brain Dash v0.3.14 — signed-in home sign-out */
.home-signout{position:absolute;top:14px;right:14px;z-index:6;min-height:40px;padding:8px 13px;border:1.5px solid rgba(255,255,255,.78);border-radius:14px;color:#15324a;background:rgba(255,253,245,.94);box-shadow:0 5px 14px rgba(12,54,87,.13);font-size:.84rem;font-weight:850;cursor:pointer}
.home-signout:hover{transform:translateY(-1px);box-shadow:0 7px 17px rgba(12,54,87,.18)}
.home-signout:focus-visible{outline:3px solid rgba(13,95,184,.3);outline-offset:2px}
@media(max-width:480px){.home-signout{top:10px;right:10px;min-height:38px;padding:7px 11px;font-size:.8rem}}

/* Brain Dash v0.3.15 — teacher student account management */
.student-username{margin:.2rem 0 0;color:#667b8b;font-size:.9rem}
.student-account-panel{margin-bottom:18px}
.student-account-actions{display:grid;gap:18px}
.student-name-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.student-name-form label{display:grid;gap:6px;font-weight:800;color:#29485d}
.student-name-form input{min-height:44px;width:100%;padding:10px 12px;border:1.5px solid #b8c9d5;border-radius:12px;background:#fff;color:#18384f;font:inherit}
.student-delete-area{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px;border-top:1px solid #dce5eb}
.student-delete-area>div{display:grid;gap:3px}
.student-delete-area span{color:#667b8b;font-size:.88rem;line-height:1.35}
.danger-button{min-height:44px;padding:9px 14px;border:1.5px solid #a62d2d;border-radius:12px;background:#fff5f4;color:#9b2424;font-weight:850;cursor:pointer;white-space:nowrap}
.danger-button:hover{background:#ffe9e7}
.danger-button:focus-visible{outline:3px solid rgba(166,45,45,.2);outline-offset:2px}
@media(max-width:640px){.student-name-form{grid-template-columns:1fr}.student-name-form .secondary{width:100%}.student-delete-area{align-items:stretch;flex-direction:column}.danger-button{width:100%}}

.strategy-practice-section{margin:6px 0 28px;padding:22px;border:2px solid rgba(13,95,184,.13);border-radius:24px;background:rgba(255,255,255,.72)}.strategy-practice-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}.strategy-practice-heading h2{margin:3px 0 0;font-size:clamp(1.55rem,3vw,2.15rem)}.strategy-practice-heading p{margin:0;color:var(--muted);max-width:430px}.strategy-practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.strategy-practice-card{min-height:132px;text-align:left;border:2px solid #cfe4f5;border-radius:20px;background:#fff;padding:18px 20px;color:var(--ink);display:flex;flex-direction:column;gap:7px}.strategy-practice-card strong{font-size:1.2rem}.strategy-practice-card>span:last-child{color:var(--muted)}.strategy-card-number{font-size:.78rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-800)}.strategy-practice-shell{padding-top:22px;padding-bottom:30px}.strategy-practice-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.strategy-trial-progress{display:flex;align-items:baseline;gap:4px;color:var(--muted)}.strategy-trial-progress strong{font-size:1.35rem;color:var(--ink)}.strategy-practice-panel{text-align:center}.strategy-practice-panel h1{font-size:clamp(1.35rem,3.3vw,2rem);line-height:1.3;max-width:760px;margin:6px auto 18px}.strategy-letter-stage{display:grid;place-items:center;margin:8px auto 18px}.strategy-crop{display:block;background-repeat:no-repeat;background-color:#fff}.strategy-visual-b{background-image:url("../assets/strategy/b-strategy-horizontal.png?v=0.5.40")}.strategy-visual-d{background-image:url("../assets/strategy/d-strategy-horizontal.png")}.strategy-crop-letter{width:min(430px,92vw);aspect-ratio:1.5/1;background-size:250% 100%;background-position:100% 50%;border-radius:18px}.strategy-crop-mouth{width:min(330px,38vw);aspect-ratio:1.05/1;background-size:250% 100%;background-position:14% 50%;border-radius:16px}.mouth-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px;margin:0 auto}.mouth-choice{min-height:240px;border:3px solid #d7e7f3;border-radius:22px;background:#fff;padding:10px;display:grid;place-items:center}.strategy-feedback{font-size:1.3rem;font-weight:900;margin:0 auto 14px}.strategy-feedback.good{color:var(--success)}.strategy-correction{max-width:760px;margin:0 auto 18px;padding:16px;border-radius:18px;background:var(--warning-bg);border:1px solid #f0d78f}.strategy-correction img{display:block;width:100%;height:auto;border-radius:14px}.strategy-timing-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 12px}.strategy-timing-row label{font-weight:800}.strategy-timing-row select{min-height:46px;border:2px solid #c9dceb;border-radius:12px;padding:0 12px;background:#fff}.strategy-countdown{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:2px auto 14px;color:var(--muted)}.strategy-countdown strong{min-width:1.4em;font-size:2.5rem;color:var(--blue-900);font-variant-numeric:tabular-nums}.strategy-paused{font-weight:900;color:var(--warning);margin-bottom:12px}.strategy-sound-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.strategy-done-panel{text-align:center;padding-top:30px}.word-strategy-cue{max-width:520px;margin:12px auto 2px;padding:10px 14px;border-radius:16px;background:rgba(234,245,255,.72);display:grid;gap:3px;text-align:left}.word-strategy-cue span{font-weight:750;font-size:clamp(.92rem,2.2vw,1.05rem);line-height:1.25}.stopwatch-progress{display:inline-flex;align-items:center;gap:6px;color:var(--warning);font-weight:850}.perfect-progress{margin:16px auto 4px;max-width:520px;padding:16px 18px;border-radius:18px;background:var(--success-bg);border:2px solid rgba(20,125,66,.18)}.perfect-progress strong{display:block;font-size:1.25rem}@media(max-width:700px){.strategy-practice-heading{display:block}.strategy-practice-grid{grid-template-columns:1fr}.mouth-choice-grid{gap:10px}.mouth-choice{min-height:180px}.strategy-crop-mouth{width:min(42vw,250px)}}
/* Brain Dash v0.4.2: compact choices and local multiplayer */
.game-shell .choices{display:grid;grid-template-columns:repeat(2,minmax(64px,100px));justify-content:center;gap:clamp(12px,2vw,20px);width:min(100%,240px);margin-inline:auto}
.game-shell .choices .letter{width:100%;min-width:64px;min-height:64px}
.runner-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}
.runner-tile,.runner-bio-card,.multi-score,.match-runners>div{background:#fff;border:3px solid #dce6f2;border-radius:20px;padding:16px}
.runner-tile{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.runner-tile:hover,.runner-tile:focus-visible{border-color:#347ecf}
.runner-image{display:block;width:100%;max-width:180px;height:130px;object-fit:contain;margin-inline:auto}
.runner-bio-card{max-width:550px;margin:20px auto;padding:26px;text-align:center}
.runner-bio-card>.runner-image{height:220px;max-width:290px}
.runner-bio-card p{font-size:1.1rem;line-height:1.55}
.runner-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.match-runners{display:flex;gap:20px;align-items:center;justify-content:center;margin:24px auto}
.match-runners>div{flex:0 1 240px;text-align:center}.match-runners .runner-image{height:180px}
.multi-hud{display:flex;gap:12px;justify-content:center;max-width:580px;margin:0 auto 12px}
.multi-score{display:flex;align-items:center;gap:10px;flex:1;padding:8px 12px}
.multi-score.is-active{border-color:#1875c9;background:#eaf5ff;box-shadow:0 0 0 3px rgba(22,115,201,.12)}
.multi-score .runner-image{width:62px;min-width:62px;height:65px}.multi-score strong,.multi-score span{display:block}
.multi-pick,.multi-match,.multi-final{text-align:center}
@media(max-width:700px){.runner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.runner-tile .runner-image{height:100px}.multi-hud{gap:6px}.multi-score{padding:6px;gap:5px}.multi-score .runner-image{width:42px;min-width:42px;height:48px}.multi-score strong{font-size:.78rem}.match-runners{gap:8px}.match-runners .runner-image{height:130px}}
@media(max-width:480px){.game-shell .choices{grid-template-columns:repeat(2,minmax(60px,84px));gap:12px}}

/* v0.4.3: strategy cues belong below answer choices, never inside word card. */
.game-shell:not(.showing-correction){grid-template-rows:auto minmax(0,1fr) auto auto auto;overflow:hidden}
.game-shell .word-strategy-cue{position:static;max-width:640px;width:min(100%,640px);margin:0 auto;padding:7px 12px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 13px;background:rgba(234,245,255,.88);border:1px solid #d1e6f6;border-radius:13px;line-height:1.15;text-align:left}
.game-shell .word-strategy-cue .cue-lead{font-weight:850;font-size:.89rem;white-space:nowrap}
.game-shell .word-strategy-cue ol{display:grid;grid-template-columns:repeat(4,auto);gap:4px 12px;margin:0;padding-left:18px}
.game-shell .word-strategy-cue li{font-weight:750;font-size:.85rem;white-space:nowrap}
.game-shell .word-strategy-cue li::marker{font-weight:850}
.strategy-practice-card{min-height:90px;justify-content:center}
.strategy-practice-card strong{font-size:clamp(1rem,1.8vw,1.16rem);line-height:1.3}
@media(max-width:650px){.game-shell .word-strategy-cue{padding:5px 9px;gap:3px 9px}.game-shell .word-strategy-cue ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;width:100%;padding-left:22px}.game-shell .word-strategy-cue li{font-size:.79rem}.game-shell .word-strategy-cue .cue-lead{font-size:.82rem}.game-shell:not(.showing-correction){overflow-y:auto;scrollbar-width:thin}.strategy-practice-card{min-height:76px}}
@media(max-height:660px){.game-shell:not(.showing-correction){overflow-y:auto}.game-shell .word-strategy-cue{padding-top:4px;padding-bottom:4px}.game-shell .word-strategy-cue li{font-size:.76rem}}

/* Original 1080×1080 level-card illustrations: preserve full compositions. */
.level-art img{object-fit:contain;object-position:center;transform:none}
.level-card:hover .level-art img{transform:none}

/* v0.4.4 layout-only development: instructional sequence beside the picture,
   choices immediately beneath and anchored to the true missing-letter position. */
.game-shell:not(.showing-correction){
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow-y:auto;
  overflow-x:hidden;
  height:100svh;
}
.game-shell:not(.showing-correction) .game-card{
  height:100%;min-height:0;display:block;overflow:visible;
  padding:clamp(10px,2vw,22px);
}
.game-shell:not(.showing-correction) .gameplay-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,42%);
  align-items:center;gap:clamp(8px,1vw,14px);
  width:100%;max-width:1080px;margin-inline:auto;height:100%;min-height:0;
}
.game-shell:not(.showing-correction) .gameplay-primary{
  min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(6px,1.2svh,14px);
}
.game-shell:not(.showing-correction) .picture-frame{
  width:min(100%,36svh,360px);max-height:41svh;
  aspect-ratio:4/3;flex-shrink:1;
}
.game-shell:not(.showing-correction) .answer-cluster{
  display:flex;flex-direction:column;align-items:center;gap:clamp(9px,1.8svh,17px);
  width:100%;min-width:0;
}
.game-shell:not(.showing-correction) .answer-cluster .word{
  font-size:clamp(3rem,8svh,6.25rem);max-width:100%;
}
.game-shell:not(.showing-correction) .answer-cluster .choices{
  transform:translateX(var(--answer-offset,0px));
  display:grid;grid-template-columns:repeat(2,minmax(62px,86px));
  gap:clamp(10px,1.6vw,18px);width:max-content;max-width:100%;
  margin:0;justify-content:center;
}
.game-shell:not(.showing-correction) .answer-cluster .letter{
  min-width:62px;min-height:68px;width:100%;
  font-size:clamp(3.4rem,6.5svh,5rem);
  border-radius:19px;
}
.game-shell:not(.showing-correction) .word-strategy-cue{
  display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:none;min-width:0;margin:0;
  padding:clamp(12px,1.7vw,22px);
  border:3px solid #9fd2f2;border-radius:24px;
  background:#eef8ff;gap:12px;
  box-shadow:0 5px 16px rgba(18,90,145,.06);
}
.game-shell:not(.showing-correction) .word-strategy-cue .cue-lead{
  display:block;width:100%;padding:12px 7px;text-align:center;
  background:#d7efff;border-radius:15px;color:#102c54;
  font-size:clamp(1.1rem,2vw,1.65rem);font-weight:900;
  line-height:1.22;white-space:normal;
}
.game-shell:not(.showing-correction) .word-strategy-cue ol{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(7px,1.3svh,12px);padding:0;margin:0;width:100%;
  counter-reset:bd-step;list-style:none;
}
.game-shell:not(.showing-correction) .word-strategy-cue li{
  display:flex;align-items:center;min-width:0;min-height:50px;
  padding:7px 10px;gap:12px;
  border-radius:18px;background:white;color:#102c54;
  font-size:clamp(.99rem,1.7vw,1.26rem);font-weight:850;
  white-space:normal;line-height:1.25;
  counter-increment:bd-step;
}
.game-shell:not(.showing-correction) .word-strategy-cue li::before{
  content:counter(bd-step);display:grid;place-items:center;
  flex:0 0 37px;width:37px;height:37px;
  border-radius:50%;background:#2087e3;color:white;font-weight:900;
}
.game-shell:not(.showing-correction) .word-strategy-cue li span{
  font:inherit;overflow-wrap:normal;
}
@media(max-width:700px){
  .game-shell:not(.showing-correction){height:auto;min-height:100svh;overflow-y:visible;}
  .game-shell:not(.showing-correction) .game-card{height:auto;}
  .game-shell:not(.showing-correction) .gameplay-layout{
    grid-template-columns:minmax(0,1fr);height:auto;gap:18px;
  }
  .game-shell:not(.showing-correction) .picture-frame{width:min(78vw,300px);max-height:34svh;}
  .game-shell:not(.showing-correction) .word-strategy-cue{
    width:min(440px,100%);justify-self:center;padding:12px;gap:9px;
  }
  .game-shell:not(.showing-correction) .word-strategy-cue .cue-lead{
    font-size:1.15rem;padding:8px;
  }
  .game-shell:not(.showing-correction) .word-strategy-cue li{
    min-height:42px;padding:5px 9px;font-size:1rem;
  }
  .game-shell:not(.showing-correction) .word-strategy-cue li::before{
    flex-basis:32px;width:32px;height:32px;
  }
}
@media(max-width:370px){
  .game-shell:not(.showing-correction) .picture-frame{width:min(78vw,260px);}
  .game-shell:not(.showing-correction) .answer-cluster .choices{
    grid-template-columns:repeat(2,64px);gap:10px;
  }
  .game-shell:not(.showing-correction) .answer-cluster .word{font-size:clamp(2.6rem,13vw,4rem);}
}
@media(max-height:650px) and (min-width:701px){
  .game-shell:not(.showing-correction){height:auto;min-height:100svh;}
  .game-shell:not(.showing-correction) .game-card{height:auto;}
  .game-shell:not(.showing-correction) .picture-frame{width:min(100%,230px);max-height:240px;}
  .game-shell:not(.showing-correction) .gameplay-layout{min-height:380px;}
}

/* Warm-Up 2: unmarked artwork with large, accessible image-choice buttons. */
.strategy-matching-panel{max-width:1100px;margin-inline:auto}
.strategy-matching-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,56px);width:100%;max-width:920px;margin:20px auto 4px}
.strategy-matching-mouth{min-width:0;display:grid;place-items:center}
.strategy-matching-mouth img{width:100%;max-width:425px;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:15px}
.strategy-matching-choices{display:grid;gap:clamp(12px,2vw,24px);min-width:0}
.strategy-matching-choice{min-width:0;width:100%;display:grid;place-items:center;padding:10px 14px;border:3px solid #d4e2ef;border-radius:20px;background:#fff;cursor:pointer;min-height:92px;transition:background-color .13s,border-color .13s,box-shadow .13s}
.strategy-matching-choice img{display:block;width:100%;max-width:370px;height:auto;object-fit:contain;pointer-events:none}
@media(hover:hover){.strategy-matching-choice:hover{background:#fff3c9;border-color:#e0b73d}}
.strategy-matching-choice:focus-visible{outline:4px solid #0d5fb8;outline-offset:3px;background:#fff3c9}
.strategy-matching-choice:active{background:#ffe9a0}
.strategy-matching-correction{max-width:980px;margin:0 auto;display:grid;justify-items:center;gap:12px}
.strategy-matching-correction>strong{display:block;width:100%;max-width:550px;text-align:left;font-size:1.3rem}
.strategy-matching-correction p{margin:0}
.strategy-matching-correction img{display:block;width:100%;height:auto;border-radius:12px}
@media(max-width:700px){.strategy-matching-layout{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:10px}.strategy-matching-mouth img{max-width:min(80vw,310px)}.strategy-matching-choices{max-width:440px;width:100%;margin-inline:auto;gap:10px}.strategy-matching-choice{min-height:78px;padding:6px 12px}.strategy-matching-panel{padding-inline:clamp(12px,3vw,22px)}}

/* Warm-Up 2: succinct, scan-friendly correction instructions. */
.strategy-matching-steps{width:100%;max-width:550px;margin:0;padding-left:2rem;text-align:left;display:grid;gap:8px;line-height:1.45;font-size:clamp(1rem,2vw,1.17rem)}
.strategy-matching-steps li{padding-left:.15rem}
.strategy-matching-steps strong{font-weight:800}

/* v0.5.0 — grouped level selection; no changes to game or practice views */
.level-select-shell .option-group{width:min(100%,1000px);margin:8px auto 24px;padding:clamp(16px,2.3vw,24px);border:2px solid rgba(13,95,184,.13);border-radius:24px;background:rgba(255,255,255,.72);box-sizing:border-box}
.level-select-shell .strategy-practice-section{width:min(100%,1000px);margin:8px auto 24px}
.level-select-shell .strategy-practice-heading{align-items:start;margin-bottom:16px}
.level-select-shell .strategy-practice-heading h2,.level-select-shell .challenge-section-heading h2{margin:0;font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.18}
.level-select-shell .group-heading-detail{font-size:.65em;font-weight:700;white-space:normal}
.level-select-shell .option-group-subtitle{margin:7px 0 0;color:var(--muted);font-size:clamp(.96rem,1.9vw,1.13rem);line-height:1.45}
.level-select-shell .challenge-section-heading{margin-bottom:18px}
.level-select-shell .challenge-section .level-grid{width:100%;gap:clamp(10px,1.5vw,16px)}
@media(max-width:650px){.level-select-shell .option-group{padding:16px;margin-bottom:18px}.level-select-shell .strategy-practice-heading{margin-bottom:13px}.level-select-shell .challenge-section-heading{margin-bottom:14px}}

/* v0.5.2: artwork in strategy practice menu only; instructional assets and gameplay unchanged. */
.strategy-practice-card{justify-content:flex-start;overflow:hidden;min-height:0;gap:12px;padding:12px 12px 17px;align-items:stretch}
.strategy-practice-art{display:block;width:100%;height:clamp(160px,20vw,246px);object-fit:contain;object-position:center;background:#f4f8fb;border-radius:13px}
.strategy-practice-card strong{padding:0 5px;line-height:1.35}
@media(max-width:700px){.strategy-practice-art{height:clamp(175px,48vw,265px)}}

/* v0.5.3 — Character-specific running illustrations on multiplayer race tracks. */
.race-multiplayer { width: 100%; max-width: 680px; margin-inline: auto; display: grid; gap: 13px; }
.race-multiplayer .multi-race-lane { min-width: 0; }
.race-multiplayer .race-label { margin-bottom: 6px; }
.race-multiplayer .runner { object-fit: contain; border: 0; border-radius: 0; box-shadow: none; width: 66px; height: 56px; }
.game-top:has(.race-multiplayer) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.game-top:has(.race-multiplayer) .multi-hud { margin-bottom: 0; }
@media (max-width: 700px) {
  .race-multiplayer { gap: 10px; }
  .race-multiplayer .runner { width: 47px; height: 41px; }
  .race-multiplayer .track { height: 30px; }
  .race-multiplayer .race-label { font-size: .72rem; }
}

/* Hubble's bicycle is wider than the running characters; maintain its full silhouette. */
.race-multiplayer .runner.runner-bicycle { width: 88px; height: 56px; object-fit: contain; }
@media(max-width:700px){.race-multiplayer .runner.runner-bicycle { width: 62px; height: 41px; }}

.runner-subtitle { text-align: center; font-size: .94rem; font-weight: 650; color: var(--muted, #536273); margin: -.2rem 0 .7rem; }

/* v0.5.5 — The Training Zone cards follow the same visual language and
   hover/focus elevation as the Challenge level cards. */
.level-select-shell .strategy-practice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: stretch;
  gap: clamp(10px, 1.5vw, 16px);
}
.level-select-shell .strategy-practice-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: block;
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid rgba(21, 72, 111, .17);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(14, 72, 113, .12);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.level-select-shell .strategy-practice-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 0;
  background: #159fe9;
  overflow: hidden;
}
.level-select-shell .strategy-practice-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .18s ease;
}
.level-select-shell .strategy-practice-identity {
  min-height: 91px;
  align-content: start;
  padding: 11px 12px 12px;
}
.level-select-shell .strategy-practice-identity .level-number {
  font-size: .74rem;
}
.level-select-shell .strategy-practice-identity .level-focus {
  font-size: .84rem;
  line-height: 1.25;
}
.level-select-shell .strategy-practice-card:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(17, 98, 160, .48);
  box-shadow: 0 14px 30px rgba(14, 72, 113, .18);
}
.level-select-shell .strategy-practice-card:hover .strategy-practice-art img {
  transform: scale(1.012);
}
.level-select-shell .strategy-practice-card:focus-visible {
  outline: 4px solid rgba(244, 169, 42, .88);
  outline-offset: 4px;
}
@media (max-width: 650px) {
  .level-select-shell .strategy-practice-grid { grid-template-columns: 1fr; }
  .level-select-shell .strategy-practice-card { max-width: 300px; margin-inline: auto; }
  .level-select-shell .strategy-practice-identity { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .level-select-shell .strategy-practice-card,
  .level-select-shell .strategy-practice-art img { transition: none; }
}

/* v0.5.9 art refresh: the standalone handwriting-letter artwork is rendered directly (never cropped from a composite). */
.strategy-letter-prompt{display:block;width:min(430px,92vw);max-height:310px;height:auto;object-fit:contain;border-radius:15px}

/* Warm-Ups 1 and 3: shared pre-practice visual review, without changing trial mechanics. */
.strategy-intro-panel{display:grid;justify-items:center;gap:16px}
.strategy-intro-panel h1{margin:0}
.strategy-intro-art{display:block;width:min(100%,680px);height:auto;object-fit:contain;border-radius:12px}
.strategy-intro-panel>.primary{min-width:190px}

/* Review and navigation controls remain usable together on narrow screens. */
.strategy-practice-top{flex-wrap:wrap}
.strategy-practice-top .strategy-trial-progress{margin-left:auto}

/* Warm-Up 3 audio choice follows the existing timing control. */
.strategy-audio-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 12px;flex-wrap:wrap}.strategy-audio-row label{font-weight:800}.strategy-audio-row select{min-height:46px;max-width:100%;border:2px solid #c9dceb;border-radius:12px;padding:0 12px;background:#fff;color:var(--ink);font:inherit}

/* v0.5.15: responsive individual-player setup and score displays */
.game-choice-grid.full-only{grid-template-columns:repeat(2,minmax(0,1fr));}
.runner-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.multi-hud{max-width:100%;flex-wrap:wrap;}
.multi-score{flex:1 1 150px;min-width:0;}
.match-runners{flex-wrap:wrap;}
.match-runners>div{flex:0 1 180px;min-width:120px;}
.race-multiplayer{max-width:100%;}
@media(max-width:550px){.game-choice-grid.full-only{grid-template-columns:repeat(2,minmax(0,1fr));}.multi-score{flex:1 1 135px}.match-runners>div{flex:1 1 125px;}.match-runners .runner-image{height:105px}}

/* v0.5.16: clear, consistent character and pre-race actions */
.runner-bio-card .runner-actions{display:flex;justify-content:center;margin-top:22px}
.runner-confirm,.multi-start-btn{min-width:175px;min-height:53px;border-radius:15px;font-size:1.09rem;font-weight:900;box-shadow:0 7px 18px rgba(13,96,180,.20)}
.multi-start-actions{display:flex;justify-content:center;margin:26px auto 12px}
.multi-bottom-nav{display:flex;justify-content:flex-start;align-items:center;width:100%;margin:22px 0 12px;text-align:left}
.multi-bottom-nav .secondary{min-height:43px;border-radius:12px;padding:10px 17px;font-weight:750}
.multi-pick,.multi-match{padding-bottom:28px}
.multi-pick .runner-bio-card{margin-bottom:10px}

/* v0.5.17 — Warm-Up 2 compact game panel and bottom-edge navigation */
.strategy-matching-shell{padding-top:6px;max-width:1160px}
.strategy-matching-panel{padding-top:clamp(15px,2vw,24px);padding-bottom:clamp(13px,2vw,22px)}
.strategy-matching-panel h1{margin-bottom:12px}
.strategy-matching-layout{margin:8px auto 2px;gap:clamp(14px,2.5vw,34px)}
.strategy-matching-choices{gap:clamp(8px,1.3vw,16px)}
.strategy-matching-choice{padding:6px 10px;min-height:80px}
.strategy-matching-choice img{max-width:335px}
.strategy-matching-mouth img{max-width:395px}
.strategy-matching-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;width:100%;padding:12px 4px 0}
.strategy-matching-bottom-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.strategy-matching-bottom .strategy-trial-progress{margin-left:auto;align-self:flex-end}
.strategy-matching-correction{padding-top:12px}
.strategy-matching-correction>strong{margin-top:9px}
@media(max-width:700px){.strategy-matching-shell{padding-top:4px}.strategy-matching-panel{padding-block:12px}.strategy-matching-layout{gap:8px;margin-top:4px}.strategy-matching-mouth img{max-width:min(66vw,235px)}.strategy-matching-choices{gap:7px}.strategy-matching-choice{min-height:65px;padding:3px 8px}.strategy-matching-choice img{max-width:265px}.strategy-matching-bottom{padding:10px 4px 2px}}

/* v0.5.18 — preserve full 3:4 portrait card-back artwork on the Game Hub. */
.challenge-section .level-art{aspect-ratio:3 / 4;background:#fff}
.challenge-section .level-art img{object-fit:contain;object-position:center;width:100%;height:100%;transform:none}
.challenge-section .level-card:hover .level-art img{transform:none}


/* v0.5.19 — warm-up strategy intro and gameplay layout polish */
.strategy-intro-shell{padding-top:8px;padding-bottom:18px}
.strategy-intro-panel{padding-top:18px;padding-bottom:16px}
.strategy-intro-panel .strategy-intro-art{display:block;width:100%;max-width:900px;height:auto;margin:6px auto 10px;border-radius:18px}
.strategy-intro-start{margin-top:6px}
.strategy-intro-bottom{display:flex;justify-content:flex-start;align-items:center;width:100%;max-width:900px;margin:10px auto 0;padding-left:4px}

/* Use bottom controls for all warm-ups. */
.strategy-practice-shell .strategy-practice-top{display:none}
.strategy-practice-shell .strategy-practice-panel{padding-top:16px;padding-bottom:16px}
.strategy-practice-shell .strategy-practice-panel h1{margin-top:4px;margin-bottom:14px}
.strategy-practice-shell .strategy-letter-stage{margin:4px auto 12px}
.strategy-practice-shell .strategy-feedback{margin-bottom:10px}

/* Warm-Up 1/3 shared bottom controls */
.strategy-matching-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;width:100%;padding:12px 4px 0}
.strategy-matching-bottom-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.strategy-matching-bottom .strategy-trial-progress{margin-left:auto;align-self:flex-end}

/* Strategy cue styling on gameplay screen */
.game-shell:not(.showing-correction) .word-strategy-cue .cue-title{font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.05;font-weight:950;color:#0d5fb8;text-align:left;letter-spacing:-.02em}
.game-shell:not(.showing-correction) .word-strategy-cue .cue-lead{display:block;width:100%;padding:0;text-align:left;background:none;border-radius:0;color:#102c54;font-size:clamp(1.02rem,1.8vw,1.28rem);font-weight:850;line-height:1.2;white-space:normal;margin-top:-2px}

@media(max-width:700px){
  .strategy-intro-bottom{margin-top:8px;padding-left:0}
  .strategy-matching-bottom{padding:10px 4px 2px;gap:10px}
}


/* v0.5.20 — Marathon setup, six-card challenge grid, and single-player runners */
.level-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.game-race{width:min(100%,760px);margin:0 auto}
.game-race .race-wrap{width:100%}
.game-race .runner{object-fit:contain;border:0;border-radius:0;box-shadow:none;width:66px;height:56px}
.game-race .runner.runner-bicycle{width:88px;height:56px}
.marathon-card-picker{max-width:320px;margin:18px auto 4px;padding:16px 18px;border:2px solid rgba(13,95,184,.14);border-radius:18px;background:rgba(255,255,255,.88);display:grid;gap:9px;text-align:left}
.marathon-card-picker label{font-weight:900;color:#12385e}
.marathon-card-picker select{min-height:48px;border:2px solid #c9dceb;border-radius:12px;padding:0 12px;background:#fff;color:var(--ink);font:inherit;font-weight:800}
.marathon-card-note{margin:0;color:var(--muted);font-size:.92rem;line-height:1.35}
@media(max-width:700px){.game-race .runner{width:47px;height:41px}.game-race .runner.runner-bicycle{width:62px;height:41px}.marathon-card-picker{max-width:100%}}


/* v0.5.21: stable two-second Warm-Up 2 positive feedback; readable correction */
.strategy-matching-question{min-height:2.6rem;display:flex;align-items:center;justify-content:center}
.strategy-matching-question.is-correct{color:#13803d;font-weight:900}
.strategy-matching-choice:disabled{opacity:1;cursor:default;filter:none}
.strategy-matching-choice:disabled:hover{background:#fff;border-color:#d4e2ef;box-shadow:none}
.strategy-matching-correction{width:min(100%,1020px);max-width:none;justify-items:stretch;gap:12px;padding:4px 0 0;text-align:left}
.strategy-matching-correction .strategy-matching-notquite{color:#bd282e;text-align:center;font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.15;margin:0 auto 4px}
.strategy-matching-correction .strategy-matching-try{font-size:clamp(1.4rem,2.5vw,1.75rem);font-weight:900;line-height:1.2;margin:0}
.strategy-matching-correction .strategy-matching-steps{max-width:none;width:100%;font-size:clamp(1.13rem,2vw,1.34rem);line-height:1.5;gap:10px;padding-left:2.1rem;margin:0 0 6px}
.strategy-matching-correction .strategy-matching-steps li{padding-left:.25rem}
.strategy-matching-correction .strategy-matching-steps li::marker{font-weight:900;color:#126bb6}
.strategy-matching-correction .strategy-matching-steps strong{font-weight:900}
.strategy-matching-correction img{width:100%;height:auto;max-height:320px;object-fit:contain;border-radius:12px}
.strategy-matching-correction .strategy-continue{justify-self:center;margin-top:3px}
@media(max-width:700px){.strategy-matching-correction{gap:10px}.strategy-matching-correction img{max-height:none}.strategy-matching-correction .strategy-matching-steps{font-size:1.08rem;gap:8px}}

/* v0.5.23: restrained current-turn emphasis; dim inactive players. */
.multi-score.is-active{background:#fff;border-color:#c7e0f4;box-shadow:0 0 0 3px rgba(34,141,221,.13),0 0 24px rgba(65,165,239,.22)}
.multi-score.is-active .runner-image{filter:drop-shadow(0 0 8px rgba(59,159,238,.58))}
.multi-score:not(.is-active){background:#f8f9fa;border-color:#e1e5e9;opacity:.6;filter:grayscale(.5)}
.multi-final-actions{display:flex;justify-content:space-between;gap:14px;margin:26px auto 12px;max-width:650px}
.multi-final-actions button{flex:0 1 230px;min-height:52px;border-radius:14px;font-size:1rem;font-weight:850}
@media(max-width:460px){.multi-final-actions{flex-wrap:wrap}.multi-final-actions button{flex:1 1 160px}}
.strategy-sound-shell .strategy-letter-stage{min-height:310px;display:grid;place-items:center}

/* v0.5.24: isolated Warm-Up 3 cabinet and teacher controls. */
.wa-shell{--wood:url('../assets/arcade/wood.png') center / 640px 320px;--edge:#8a410e;max-width:1060px;width:calc(100% - 40px);margin:14px auto 0;color:#27201b}
.wa-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.wa-header h1{font-size:clamp(24px,3vw,34px);margin:0;line-height:1.1}.wa-header .eyebrow{font-size:11px;letter-spacing:2px}.wa-presentation{display:flex;gap:15px;border:0;padding:0;margin:0;font-size:13px}.wa-presentation legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.wa-presentation label{display:flex;gap:5px;align-items:center;white-space:nowrap}.wa-presentation input{accent-color:#126799}.wa-instruction{text-align:center;font-size:14px;margin:7px 0 12px;color:#485a6b}
.wa-machine{position:relative;padding:12px 22px 0;background:repeating-linear-gradient(90deg,#aa2522 0 26px,#eee0b4 26px 52px,#c1332d 52px 78px,#f6e8c6 78px 104px);border:13px ridge #ca7928;border-radius:70px 70px 20px 20px;box-shadow:0 14px 30px #152a4140,inset 0 0 25px #432310b0;container-type:inline-size;overflow:hidden}
.wa-machine::before,.wa-machine::after{position:absolute;top:26px;bottom:0;width:15px;background:var(--wood);border:2px solid #8d461b;box-shadow:inset 2px 0 2px #ffd491,2px 0 3px #0008;content:'';z-index:2}.wa-machine::before{left:0}.wa-machine::after{right:0}
.wa-crown{display:flex;align-items:center;justify-content:center;gap:32px;height:27px;color:#bd1f20;text-shadow:1px 2px #723716;font:24px Georgia;background:var(--wood);margin:-12px 12% 0;border-radius:90% 90% 0 0;border:3px solid #cc751c;border-bottom:0}.wa-crown b{color:#ffbd42;font-size:36px;transform:translateY(-1px)}
.wa-light-plaque{position:relative;background:var(--wood);border:7px ridge #c57c2c;margin:0 12% 14px;border-radius:10px;box-shadow:0 3px 6px #0009,inset 0 0 14px #85431166;padding:9px 12px 5px}.wa-lights{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.5cqw,17px)}.wa-light-unit{display:flex;flex-direction:column;align-items:center;gap:1px}.wa-bulb{display:block;width:clamp(22px,3.5cqw,38px);aspect-ratio:1;border-radius:50%;border:3px solid #542a10;background:radial-gradient(circle at 40% 34%,#735449,#241208 55%,#100905);box-shadow:0 0 0 2px #e0a043,inset 0 0 5px #000,2px 3px 3px #6e310b}.wa-bulb.lit{background:radial-gradient(circle at 40% 34%,#ffffe5 0 7%,#ffe98b 10%,#ffb300 45%,#ce6900 78%);box-shadow:0 0 0 2px #e0a043,0 0 12px #ffb41b99,inset 0 0 6px #fff792}.wa-light-number{font:bold 13px Georgia}
.wa-body{display:grid;grid-template-columns:1fr 2.9fr 1.25fr;gap:14px;align-items:stretch;margin:0 3px}.wa-left,.wa-right{display:flex;flex-direction:column;justify-content:center;gap:13px;min-width:0;background:linear-gradient(#0a71a5,#004478);padding:8px 6px;border-radius:8px;box-shadow:inset 0 0 10px #002434}.wa-plaque{position:relative;background:var(--wood);padding:7px;border:5px ridge #cb791f;border-radius:11px;box-shadow:0 3px 5px #0008}.wa-plaque::before,.wa-plaque::after,.wa-board::before,.wa-board::after{position:absolute;content:'';width:8px;height:8px;top:3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d2d2b5,#817956 45%,#332e20 65%,#121309);box-shadow:1px 2px 2px #0008;z-index:1}.wa-plaque::before,.wa-board::before{left:3px}.wa-plaque::after,.wa-board::after{right:3px}.wa-plaque h2{font:bold clamp(16px,2.2cqw,24px) Georgia,serif;margin:0 0 5px;text-align:center;color:#211709;text-shadow:0 1px #ffe2ab}
.wa-counter{display:flex;align-items:center;justify-content:center;gap:5px}.wa-counter output{min-width:0;flex:1;border:2px solid #9c591d;border-radius:9px;background:linear-gradient(#f4ddaf,#fff5da);box-shadow:inset 0 2px 5px #95582366;text-align:center;font:bold clamp(25px,4.1cqw,43px)/1.3 Georgia;color:#151410}.wa-counter button{border:2px solid #7d3c0c;border-radius:7px;padding:4px 5px;background:var(--wood);font-size:clamp(12px,1.7cqw,18px);color:#181711;box-shadow:inset 0 2px 1px #ffdf98,0 2px 2px #733507}
.wa-board{position:relative;background:#fff2d9;border:9px ridge #c78538;border-radius:5px;box-shadow:0 4px 7px #0009,inset 0 0 25px #c99e5c55;display:flex;align-items:center;justify-content:center;min-width:0}.wa-letter{display:block;width:100%;height:auto;aspect-ratio:1448/1086;object-fit:contain;mix-blend-mode:multiply}.wa-radio-board{padding:8px 5px;background:#ffefd1;border:2px solid #99632b;border-radius:8px;box-shadow:inset 0 2px 5px #915f2433;display:flex;flex-direction:column;gap:12px}.wa-radio-board label{display:flex;align-items:center;gap:6px;font-size:clamp(12px,1.65cqw,18px);font-weight:750;white-space:nowrap}.wa-radio-board input{margin:0;accent-color:#0876b8;width:clamp(16px,2.4cqw,27px);height:clamp(16px,2.4cqw,27px)}
.wa-start{margin:0 2px;border:6px ridge #e59736;border-radius:13px;padding:9px 5px;font-size:clamp(20px,3.1cqw,33px);font-weight:850;color:#fff;white-space:nowrap;background:linear-gradient(#1dc743,#007f19 80%,#005e15);text-shadow:0 2px 2px #004309;box-shadow:inset 0 0 0 2px #ffdfa0,inset 0 3px 6px #ffffff99,0 4px 4px #0009}.wa-start:hover{filter:brightness(1.06)}
.wa-deck{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px 10px;margin:13px -8px 0;padding:19px 15px 7px;background:var(--wood);border:9px ridge #c9802d;border-radius:20px 20px 6px 6px;box-shadow:inset 0 3px 7px #64320999;position:relative;z-index:3}.wa-hole{min-width:0;text-align:center;position:relative}.wa-hole-mouth{position:relative;height:clamp(25px,4.1cqw,46px);border:4px solid #d92c23;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,#3c210d,#110903 70%);box-shadow:0 2px 0 #601509,inset 0 3px 5px #000,0 -1px 0 2px #ffbc58;clip-path:inset(-100% -8% 0 -8%)}.wa-hole span{display:block;font:bold clamp(12px,1.7cqw,18px)/1.3 Georgia;margin-top:3px}.wa-gopher{width:105%;height:auto;position:absolute;bottom:-115%;left:-2.5%;transform:translateY(110%);transition:transform 160ms ease-out;pointer-events:none}.wa-hole.up .wa-gopher{bottom:-10%;transform:translateY(0)}.wa-hole.bonk .wa-gopher{animation:wa-bonk 420ms both}.wa-apron{display:flex;align-items:center;justify-content:space-evenly;height:35px;margin:0 -20px;background:linear-gradient(130deg,#00699b,#06385d);border-top:6px ridge #c57e2b;color:#ffc564;font-size:25px;text-shadow:1px 2px #5c3011}.wa-apron b{font-size:33px}.wa-count-20 .wa-deck{row-gap:10px;padding-top:15px}.wa-machine.is-paused .wa-gopher{animation-play-state:paused;transition:none}.wa-machine.is-paused .wa-start{background:linear-gradient(#e69e25,#946006)}
@keyframes wa-bonk{0%{transform:translateY(0)}30%{transform:translateY(6%) scaleY(.8) rotate(-8deg)}55%{transform:translateY(0) rotate(5deg)}100%{transform:translateY(115%) scaleY(.95)}}
.wa-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:13px;font-size:12px}.wa-footer .back-nav{font-size:13px}.wa-progress{font-size:14px;white-space:nowrap;color:#31526b}.wa-teacher{display:flex;align-items:center;gap:9px;color:#536476;font-size:11px}.wa-teacher button{font-size:11px;border:1px solid #b0c0cc;border-radius:6px;background:#fff;padding:6px 8px;color:#334c5d}.wa-teacher button:disabled{opacity:.4}kbd{font:inherit;border:1px solid #c4d0da;border-radius:3px;padding:0 4px;margin-left:3px}.wa-status{min-height:17px;text-align:center;font-size:12px;color:#637588;margin-top:5px}.wa-note{text-align:center;font-size:11px;color:#637588;margin:3px 0 12px}.wa-plaque button:disabled{opacity:.55;cursor:default}.wa-shell button:focus-visible,.wa-shell input:focus-visible{outline:3px solid #08a9ff;outline-offset:3px}
.wa-minimal{background:#fff;border:1px solid #cad9e3;box-shadow:0 8px 22px #243a4915;border-radius:18px;padding:20px}.wa-minimal::before,.wa-minimal::after,.wa-minimal .wa-crown,.wa-minimal .wa-apron,.wa-minimal .wa-deck{display:none}.wa-minimal .wa-light-plaque{background:transparent;border:0;box-shadow:none}.wa-minimal .wa-left,.wa-minimal .wa-right{background:transparent;box-shadow:none}.wa-minimal .wa-plaque{background:#f0f6f9;border:1px solid #d4e0e9;box-shadow:none}.wa-minimal .wa-plaque::before,.wa-minimal .wa-plaque::after,.wa-minimal .wa-board::before,.wa-minimal .wa-board::after{display:none}.wa-minimal .wa-board{background:white;border:1px solid #d4e0e9;box-shadow:none}.wa-minimal .wa-counter button{background:#fff;border:1px solid #bbcbd7;box-shadow:none}.wa-minimal .wa-counter output{border:0;background:#fff;box-shadow:none}.wa-minimal .wa-radio-board{border:0;background:transparent;box-shadow:none}.wa-minimal .wa-start{background:#0869a3;border:1px solid #005b90;box-shadow:none;font-size:24px;text-shadow:none}.wa-minimal .wa-plaque h2{font-family:inherit;text-shadow:none;color:#29445a}
.wa-results{text-align:center}.wa-results h1{margin-bottom:6px}.wa-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.wa-result-grid div{background:#eff7fb;border-radius:14px;padding:20px}.wa-result-grid strong{display:block;font-size:40px;color:#126b93}.wa-result-grid span{font-size:14px;color:#52677b}.wa-results details{margin:20px 0;font-size:14px}
@media(max-height:740px) and (min-width:900px){.wa-shell{max-width:930px;margin-top:8px}.wa-header h1{font-size:26px}.wa-instruction{margin:5px 0 8px}.wa-machine{padding-top:8px}.wa-crown{height:20px}.wa-light-plaque{margin-bottom:9px;padding:5px}.wa-body{gap:11px}.wa-left,.wa-right{gap:9px;padding:5px}.wa-footer{margin-top:9px}}
@media(max-width:760px){.wa-shell{width:calc(100% - 16px)}.wa-header{gap:8px}.wa-presentation{gap:8px;font-size:11px}.wa-machine{padding:8px 10px 0;border-width:8px;border-radius:35px 35px 12px 12px}.wa-body{gap:7px;grid-template-columns:1fr 2.7fr 1.3fr}.wa-plaque{padding:4px;border-width:3px}.wa-left,.wa-right{padding:3px;gap:7px}.wa-counter{gap:2px}.wa-counter button{padding:3px}.wa-radio-board{padding:4px;gap:8px}.wa-deck{gap:3px 5px;padding:12px 8px 5px;border-width:6px}.wa-hole-mouth{border-width:3px}.wa-footer{flex-wrap:wrap}.wa-teacher{margin-left:auto}.wa-teacher>span{display:none}.wa-note{font-size:10px}.wa-crown{height:20px}.wa-light-plaque{margin-bottom:7px}.wa-minimal{padding:8px}.wa-apron{height:27px}}
@media(prefers-reduced-motion:reduce){.wa-gopher{transition:none}}
@media(min-width:900px){.wa-shell{max-width:min(1060px,calc((100dvh - 190px) * 1.24))}.wa-header h1{font-size:26px}.wa-instruction{font-size:13px;margin:6px 0 9px}.wa-footer{margin-top:10px}.wa-note{margin-bottom:5px}}
.wa-radio-board label{margin:0}.wa-radio-board input{padding:0;min-height:0}

.wa-filter-defs{position:absolute;width:0;height:0;overflow:hidden}.wa-letter{filter:url(#wa-guide-color)}.wa-counter output{font-size:clamp(22px,3.3cqw,36px);font-variant-numeric:tabular-nums}.wa-status{min-height:14px;margin-top:2px}.wa-shell>.wa-note{font-size:10px;margin:2px 0 3px}@media(max-height:800px){.wa-teacher>span{display:none}}
.wa-shell{margin-top:0;padding-top:14px}.wa-plaque,.wa-light-plaque{background:linear-gradient(#fff0c490,#ffc76e70),var(--wood)}.wa-minimal .wa-plaque{background:#f0f6f9}.wa-minimal .wa-light-plaque{background:transparent}
.wa-radio-board label{font-size:clamp(10px,1.5cqw,17px)}
@media(min-width:900px){.wa-shell{max-width:min(1060px,calc((100dvh - 180px) * 1.6))}.wa-board{height:clamp(180px,calc(100dvh - 535px),400px)}.wa-letter{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}}

/* Center the smaller bottom star within the apron row. */
.wa-apron b{font-size:27px;line-height:1;display:flex;align-items:center;align-self:stretch}

/* Level cards flip to a vertical player menu. */
.level-flip{width:100%;max-width:190px;perspective:1100px;min-width:0}
.level-flip-inner{position:relative;transform-style:preserve-3d;transition:transform .4s ease}
.level-flip.is-flipped .level-flip-inner{transform:rotateY(180deg);animation:level-turn .4s ease}
.level-flip-front,.level-flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.level-flip-front{display:block;max-width:none}
.level-flip-back{position:absolute;inset:0;transform:rotateY(180deg);background:#fff;border:2px solid #a6d6f6;border-radius:19px;padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:8px;box-shadow:0 8px 22px #0e48711f;text-align:center}
.level-player-options{display:flex;flex-direction:column;gap:7px;flex:1;justify-content:center}
.level-player-choice{min-height:44px;padding:8px;background:#eaf6ff;border:1px solid #a6d6f6;border-radius:10px;font-weight:850;color:#16496c}
.level-player-choice:hover{background:#cdeaff}.level-player-choice:focus-visible{outline:3px solid #0869a3;outline-offset:2px}
.player-label-short{display:none}.level-flip-return{font-size:12px}.selected-level-content{grid-template-columns:1fr}
@keyframes level-turn{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@media(max-width:650px){.player-label-full{display:none}.player-label-short{display:inline}.level-flip-back{padding:9px;gap:5px}.level-player-options{gap:5px}}
@media(prefers-reduced-motion:reduce){.level-flip-inner{transition:none}.level-flip.is-flipped .level-flip-inner{animation:none}}

/* Stable whole-word alignment, correction navigation, and stationary player cards. */
.game-shell:not(.showing-correction) .answer-cluster .choices{transform:none;gap:14px;align-self:center}
.correction-next-row{display:flex;justify-content:flex-end;width:100%;margin-top:12px}
.correction-next{min-height:44px;min-width:112px}
.multi-hud{display:grid;grid-template-columns:repeat(var(--player-count,2),minmax(0,1fr));align-items:stretch;gap:10px}
.multi-score,.multi-score.is-active,.multi-score:not(.is-active){transform:none;animation:none;min-width:0;margin:0;align-self:stretch;transition:box-shadow .18s,border-color .18s,opacity .18s;min-height:88px}
.multi-score>div{min-width:0;flex:1}.multi-score strong{min-height:2.6em;line-height:1.3;overflow-wrap:anywhere}
.multi-score .runner-image{flex-shrink:0;transform:none;animation:none}
.multi-score.is-active{background:#fff;border-color:#2986c5;box-shadow:0 0 0 3px #228ddd22,0 0 20px #41a5ef44}
.multi-score:not(.is-active){opacity:.65;filter:grayscale(.4)}
@media(max-width:700px){.multi-hud{gap:5px}.multi-score{flex-direction:column;justify-content:center;padding:6px 3px;gap:3px;min-height:118px;text-align:center}.multi-score>div{width:100%}.multi-score strong{font-size:.72rem;min-height:3.9em}.multi-score span{font-size:.7rem}}

/* Competition correction typography matches Warm-Up 2. */
.correction-card .correction-notquite{color:#bd282e;text-align:center;font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.15;margin:0 auto 4px}
.correction-card .correction-try{font-size:clamp(1.4rem,2.5vw,1.75rem);font-weight:900;line-height:1.2;margin:0;text-align:left;width:min(660px,100%)}
.correction-card .correction-steps{max-width:none;width:100%;font-size:clamp(1.13rem,2vw,1.34rem);line-height:1.5;gap:10px;padding-left:2.1rem;margin:0 0 6px;text-align:left}
.correction-card .correction-steps li{padding-left:.25rem}
.correction-card .correction-steps li::marker{font-weight:900;color:#126bb6}
.correction-card .correction-steps strong{font-weight:900}
.correction-card .correction-steps u{text-decoration-thickness:2px;text-underline-offset:.12em}
@media(max-width:700px){.correction-card .correction-steps{font-size:1.08rem;gap:8px}}

/* Warm-Up 1 reverses Warm-Up 2: letter left, equal mouth choices right. */
.strategy-letter-mouth-layout .strategy-letter-question img{aspect-ratio:4/3;max-width:425px}
.strategy-letter-mouth-layout .strategy-mouth-choice img{width:100%;max-width:335px;aspect-ratio:3/2;object-fit:contain}
.strategy-letter-mouth-layout .strategy-matching-choices{grid-auto-rows:1fr}
@media(hover:hover){.strategy-matching-choice:not(:disabled):hover{box-shadow:0 0 0 4px #f6cf5a38,0 0 18px #f3c84355}}
@media(max-width:700px){.strategy-letter-mouth-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.strategy-letter-mouth-layout .strategy-mouth-choice img{max-width:265px}.strategy-letter-mouth-layout .strategy-letter-question img{max-width:100%}}

/* Stable strategy navigation and clearer answer affordances. */
.strategy-matching-bottom-left{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.strategy-matching-bottom-left [data-action="strategyBack"]{order:0;color:#626b74;border-color:#c6cbd0;background:#f6f7f8}
.strategy-matching-bottom-left [data-action="strategyBack"] .back-arrow{background:#e4e7ea;color:#626b74}
.strategy-matching-bottom-left .strategy-review-button{order:1}
.strategy-review-button:disabled{opacity:1;filter:none;cursor:default}
.strategy-review-button:hover,.strategy-review-button:disabled:hover{transform:none}
.strategy-letter-mouth-layout .strategy-mouth-choice{width:96%;justify-self:center}
.game-shell .choices .letter{background:#f3faff;border:3px solid #69b4ea;box-shadow:0 0 0 4px #a4d7fa38,0 0 20px #5db8f25c,0 5px 10px #126bb622;transition:background .15s,border-color .15s,box-shadow .15s}
.game-shell .choices .letter:hover:not(:disabled),.game-shell .choices .letter:focus-visible{background:#fff3c9;border-color:#dcae2e;box-shadow:0 0 0 4px #f6cf5a55,0 0 22px #efc34366}

/* Keep mobile Warm-Up 1 and 2 question headings on one fitted line. */
@media(max-width:700px){
.strategy-matching-panel .strategy-matching-question{display:block;white-space:nowrap;width:100%;max-width:100%;font-size:clamp(.75rem,3.7vw,1.6rem);line-height:1.3;min-height:2.6rem;text-align:center;align-content:center}
}

/* Gopher-only comic bonk reaction. */
.wa-deck{padding-top:32px}
.wa-count-20 .wa-deck{padding-top:32px}
.wa-hole.bonk .wa-gopher{transform-origin:50% 90%;animation:wa-carnival-retreat 420ms linear both;animation-delay:var(--wa-reaction-delay,0ms)}

@keyframes wa-carnival-retreat{
  0%,23%{transform:translateY(0) scale(1) rotate(0deg)}
  24%{transform:translateY(4%) scale(1.05,.88) rotate(-5deg)}
  30%{transform:translateY(8%) scale(1.08,.8) rotate(-7deg)}
  43%{transform:translateY(3%) scale(.98,1.02) rotate(5deg)}
  55%{transform:translateY(12%) scale(1) rotate(-3deg)}
  70%{transform:translateY(55%) rotate(0deg)}
  78%,85%{transform:translateY(50%) rotate(2deg)}
  100%{transform:translateY(115%) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){
  .wa-hole.bonk .wa-gopher{animation:wa-carnival-reduced-retreat 420ms steps(1,end) both;animation-delay:var(--wa-reaction-delay,0ms)}
}

/* Scoring targets stay visible while the next letter counts down. */
.wa-teacher{flex-wrap:wrap}
.wa-teacher>.wa-pending{display:grid;grid-template-columns:1fr;flex-basis:100%;gap:6px}
.wa-pending:empty{display:none}
.wa-pending-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 8px;background:#f2f7fb;border:1px solid #cbdce8;border-radius:8px}
.wa-pending-row span{font-size:12px;white-space:nowrap}
.wa-pending-row button{min-height:36px}

.wa-settings-hint{color:#526176;font-size:14px;text-align:center;margin:8px 0;line-height:1.4}.wa-settings-hint:empty{display:none}

/* Rise completes at 170ms; the gopher reacts at ~411ms after playback. */
.wa-hole.up.rising .wa-gopher{animation:wa-carnival-rise 170ms cubic-bezier(.2,.65,.3,1) both;animation-delay:var(--wa-rise-delay,0ms);transition:none}
@keyframes wa-carnival-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes wa-carnival-reduced-retreat{0%,24%{transform:translateY(0)}25%,100%{transform:translateY(115%)}}
@media(prefers-reduced-motion:reduce){.wa-hole.up.rising .wa-gopher{animation:none;transform:translateY(0)}}

/* Keep native radios compact and prevent clipped oval shadows from painting rectangular tiles. */
.wa-presentation{align-items:center;flex-wrap:wrap;justify-content:flex-end}
.wa-presentation label{margin:0;min-height:32px;line-height:1.2}
.wa-presentation input{width:16px;height:16px;min-height:0;padding:0;margin:0;flex:0 0 16px;border:0;border-radius:50%;background:transparent}
/* Clip only the moving sprite; SVG draws the oval without a rectangular shadow layer. */
.wa-hole-mouth{--wa-hole-height:clamp(25px,4.1cqw,46px);height:var(--wa-hole-height);border:0;border-radius:0;background:transparent;box-shadow:none;clip-path:none;isolation:auto}
.wa-hole-mouth::before{content:none}
.wa-hole-rim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wa-gopher-clip{position:absolute;bottom:0;left:-8%;width:116%;height:200%;overflow:hidden;background:transparent;pointer-events:none}
.wa-gopher-clip .wa-gopher{width:82.758621%;left:8.620690%;bottom:calc(var(--wa-hole-height) * -1.15);background:transparent;border:0;box-shadow:none}
.wa-hole.up .wa-gopher-clip .wa-gopher{bottom:calc(var(--wa-hole-height) * .18)}

/* The body is visible above the deck and only inside the oval below its center. */
.wa-gopher-clip{clip-path:url(#wa-gopher-opening);z-index:1}
.wa-hole-rim{z-index:0}
.wa-hole-front-rim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}