/* Phonics & Stuff — games clone
   Design tokens lifted from the original site's global stylesheet. */

:root {
  --font-family-base: "Nunito", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-game-title: "Nunito", sans-serif;
  --font-family-smooth: "Nunito", sans-serif;

  /* Duolingo-inspired system: owl green, chunky bottom shadows, rounded cards */
  --dl-green: #58cc02;
  --dl-green-deep: #58a700;
  --dl-green-light: #89e219;
  --dl-green-pale: #dbf8c5;
  --dl-orange: #ff9600;
  --dl-orange-deep: #cc7a00;
  --dl-blue: #1cb0f6;
  --dl-blue-deep: #1899d6;
  --dl-red: #ff4b4b;
  --dl-red-deep: #cc3b3b;
  --dl-yellow: #ffc800;
  --dl-pink: #ce82ff;
  --dl-ink: #3c3c3c;
  --dl-wolf: #777777;
  --dl-hare: #afafaf;
  --dl-swan: #e5e5e5;
  --dl-eel: #f7f7f7;

  /* legacy names remapped so every existing rule re-skins in place */
  --orange-bg: #dbf8c5;
  --orange-footer: #f7f7f7;
  --navBG: #ffffff;
  --offwhite: #ffffff;
  --teal: #3c3c3c;
  --teal-on-orange: #777777;
  --teal-dark: #3c3c3c;
  --green-success: #58cc02;
  --warning: #ff4b4b;
  --hero-orange-text: #58a700;
  --orange-ps: #ff9600;
  --soundsText: #58a700;
  --optionsText: #1cb0f6;
  --tile-width: 200px;
  --tile-height: 150px;

  --shadow-color: 0deg 0% 0%;
  --shadow-low: 0.8px 0.8px 1.4px hsl(var(--shadow-color) / 0.14), 4.2px 4.1px 7.5px -1.5px hsl(var(--shadow-color) / 0.23);
  --shadow-med: 0.6px 0.7px 1.1px hsl(var(--shadow-color) / 0.09), 2.6px 2.6px 4.6px -0.6px hsl(var(--shadow-color) / 0.11),
    6.1px 6.2px 10.8px -1.2px hsl(var(--shadow-color) / 0.13), 14.1px 14.3px 24.9px -1.7px hsl(var(--shadow-color) / 0.15);
  --shadow-high: 0.2px 0.3px 0.4px hsl(var(--shadow-color) / 0.1), 1.3px 1.6px 2.3px -0.4px hsl(var(--shadow-color) / 0.1),
    3.9px 4.8px 7px -1.1px hsl(var(--shadow-color) / 0.1), 9.7px 12px 17.4px -1.8px hsl(var(--shadow-color) / 0.1),
    21.7px 26.8px 38.8px -2.5px hsl(var(--shadow-color) / 0.1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--teal-dark);
  background: var(--offwhite);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

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

/* ---------------------------------------------------------------- header */

.site-header { background: #fff; box-shadow: 0 1px 0 #e5e5e5; position: relative; z-index: 20; }

.header-top {
  max-width: 1160px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-family-game-title); color: var(--teal); font-size: 1.28rem; line-height: 1.05; }
.brand .brand-mark { font-size: 1.65rem; line-height: 1; }
.brand .amp { color: var(--hero-orange-text); }

.site-nav { background: var(--navBG); }
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 10px;
  display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a {
  color: #fff; font-weight: 700; font-size: 0.92rem; padding: 11px 12px;
  white-space: nowrap; border-radius: 6px 6px 0 0; border-bottom: 3px solid transparent;
}
.nav-inner a:hover { background: rgba(255, 255, 255, 0.12); }
.nav-inner a.active { border-bottom-color: var(--orange-bg); color: #58a700; }

/* ------------------------------------------------------------------ hub */

.games-main { display: flex; flex-direction: column; background: var(--orange-footer); min-height: 60vh; }


.games-stripe { background-color: var(--orange-bg); padding: 22px 0 34px; }

/* single-column staged progression */

.stage-list {
  max-width: 720px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; gap: 14px;
}

.stage-intro { text-align: center; padding: 2px 6px 6px; }
.stage-intro h2 {
  margin: 0 0 4px; font-family: var(--font-family-smooth); font-weight: 400;
  color: var(--teal-dark); font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}
.stage-intro p { margin: 0; font-size: 0.9rem; font-weight: 600; color: #777777; }

.stage {
  background: #fff; border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: var(--shadow-med); scroll-margin-top: 12px;
}
.stage.is-start { box-shadow: var(--shadow-med), 0 0 0 3px rgba(88, 204, 2, 0.28); }

.stage-head { display: flex; align-items: flex-start; gap: 14px; }
.stage-num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family-smooth); font-size: 1.05rem; color: #fff;
  background: var(--teal); box-shadow: var(--shadow-low);
}
.stage.is-start .stage-num { background: var(--green-success); }
.stage-head-copy { flex: 1 1 auto; min-width: 0; }
.stage-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 3px 0 3px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-on-orange);
}
.stage-pill {
  background: var(--green-success); color: #fff; padding: 3px 9px; border-radius: 999px;
  font-size: 0.6rem; letter-spacing: 0.08em; box-shadow: var(--shadow-low);
}
.stage-title {
  margin: 0 0 4px; font-family: var(--font-family-smooth); font-weight: 400;
  color: var(--teal); font-size: clamp(1.15rem, 3.4vw, 1.35rem); line-height: 1.22;
}
.stage-note { margin: 0; font-size: 0.88rem; font-weight: 600; color: #777777; }
.stage-note b { font-weight: 800; color: var(--teal-dark); }
.stage-note-toggle { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.8rem; font-weight: 800; color: var(--teal-dark); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.stage-note-toggle:hover { opacity: 0.8; }

.stage-games { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.stage-game {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; min-height: 64px;
  background: #ffffff; border: 2px solid #e5e5e5; border-radius: 12px;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.stage-game:hover, .stage-game:focus-visible {
  background: #fff; border-color: var(--orange-bg); transform: translateX(3px); box-shadow: var(--shadow-low);
}
.stage-game:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.stage-game img {
  flex: 0 0 auto; width: 86px; height: 64px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-low);
}
.game-copy { flex: 1 1 auto; min-width: 0; }
.game-name { display: block; font-weight: 800; font-size: 0.98rem; color: var(--teal-dark); line-height: 1.25; }
.game-tag { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: #777777; }
.game-go {
  flex: 0 0 auto; font-weight: 800; font-size: 0.78rem; color: var(--hero-orange-text); white-space: nowrap;
}

/* how much of a game's pool this child has met, and how much is solid */
.game-progress {
  position: relative; display: block; height: 8px; margin-top: 8px;
  background: var(--dl-swan); border-radius: 999px; overflow: hidden;
}
.game-progress i { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 999px; }
.game-progress-met { background: var(--dl-green-pale); }
.game-progress-solid { background: var(--dl-green); }
.game-progress-label { display: block; margin-top: 4px; font-size: 0.74rem; font-weight: 700; color: #8a8a8a; }

/* --------------------------------------------------------------- footer */

.site-footer { background: var(--orange-footer); padding: 22px 18px 26px; text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-weight: 800; font-size: 0.88rem; }
.site-footer a { color: var(--teal-dark); }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { color: #777777; }

/* ------------------------------------------------------------ game pages */

.game-main { background: var(--offwhite); }

.game-hero { padding: 26px 20px 16px; text-align: center; }
.game-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-on-orange); margin-bottom: 8px;
}
.game-hero h1 { margin: 0 0 8px; font-family: var(--font-family-smooth); font-weight: 400; color: var(--teal); font-size: clamp(1.6rem, 3vw, 2.35rem); }
.game-hero p { max-width: 680px; margin: 0 auto; color: var(--teal-dark); font-size: clamp(0.92rem, 1.4vw, 1.02rem); }

.game-band { background: var(--orange-bg); padding: 20px 16px 34px; }
.game-frame {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-med);
  width: min(940px, 100%); margin: 0 auto; padding: 16px 16px 22px;
}
/* game chrome: exit on the left, live tallies and help on the right */

.game-bar {
  width: min(940px, 100%); margin: 0 auto 10px; padding: 4px 0;
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 30; background: var(--orange-bg);
}

.game-exit {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; background: #fff; color: var(--teal-dark); border: 2px solid #e5e5e5;
  font-weight: 800; font-size: 0.95rem; box-shadow: var(--shadow-low);
}
.game-exit .exit-x { color: var(--warning); }
.game-exit:hover { background: #fff2ea; }
.game-bar-spacer { flex: 1 1 auto; }
.game-tallies { display: flex; align-items: center; gap: 8px; }

.tally-pill[hidden] { display: none; }
.tally-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 14px 2px 10px;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow-low);
  font-weight: 800; font-size: 1.05rem; color: var(--teal-dark);
}
.tally-pill .tick { font-style: normal; font-size: 1.7rem; line-height: 1; color: var(--green-success); }
.tally-pill .puzzle { font-size: 1.25rem; line-height: 1; }

.game-help {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  border: 2px solid #e5e5e5; background: #fff; color: var(--teal);
  font-family: var(--font-family-smooth); font-size: 1.2rem; box-shadow: var(--shadow-low);
}
.game-help:hover { background: #f7f7f7; }
.game-help:focus-visible, .game-exit:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* the speaker is the call to action, so it is a big round icon button */
.sound-btn.icon {
  width: 76px; height: 76px; min-height: 0; padding: 0; border-width: 4px; border-radius: 50%;
  background: #58cc02; border-color: #58a700; color: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.sound-btn.icon .spk { font-size: 2rem; }
.sound-btn.icon:hover { background: #89e219; }

/* how to play, opened from the ? button */
.help-card { max-width: 520px; text-align: left; }
.help-card h2 { text-align: center; }
.help-steps { margin: 2px 0 12px; padding-left: 20px; color: var(--teal-dark); font-weight: 700; }
.help-steps li { margin-bottom: 8px; }
.help-about { margin: 0 0 16px; font-size: 0.9rem; font-weight: 600; color: #777777; }
.help-card .btn { display: block; margin: 0 auto; }

.game-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.toolbar-solo { justify-content: flex-end; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.stat { font-weight: 800; font-size: 0.85rem; color: var(--teal-on-orange); letter-spacing: 0.02em; }
.stat b { color: var(--soundsText); font-size: 1rem; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: 0.92rem;
  background: var(--hero-orange-text); color: #fff; box-shadow: var(--shadow-low); transition: transform 0.12s, background 0.12s, opacity 0.12s;
}
.btn:hover { background: #58a700; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.secondary { background: var(--teal); }
.btn.secondary:hover { background: #1899d6; }
.btn.ghost { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 2px #afafaf; }
.btn.ghost:hover { background: #f7f7f7; }
.btn.big { padding: 14px 26px; font-size: 1.05rem; }

.sound-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 3px solid var(--soundsActive, #fa8f3d); background: #ffffff; color: var(--soundsText);
  border-radius: 999px; padding: 12px 22px; font-weight: 800; cursor: pointer;
  box-shadow: var(--shadow-low); transition: transform 0.12s, background 0.12s;
}
.sound-btn:hover { background: #f7f7f7; transform: translateY(-1px); }
.sound-btn .spk { font-size: 1.25rem; }

/* A forgotten press of the speaker shakes the button: the sign to listen first. */
.sound-btn.nudge { animation: nudge 0.5s ease; }
@keyframes nudge {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-6px) rotate(-3deg); }
  35% { transform: translateX(6px) rotate(3deg); }
  55% { transform: translateX(-4px) rotate(-2deg); }
  75% { transform: translateX(4px) rotate(2deg); }
}

.prompt { text-align: center; margin: 4px 0 18px; }
/* Games that need no prompt text hand over an empty node; it takes no room. */
.prompt:empty { display: none; }
.prompt .prompt-word {
  font-family: var(--font-family-smooth); font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--teal); letter-spacing: 0.06em; margin: 6px 0 2px; word-break: break-word;
}
.prompt .prompt-hint { font-size: 0.92rem; font-weight: 700; color: var(--teal-on-orange); }
/* Sound It Out prints the word under the speaker, and each sound lifts the
   letters that spell it as it plays. */
.prompt-word.word-letters { display: inline-flex; gap: 6px; margin-top: 10px; }
.word-letters .wl {
  display: inline-block; padding: 0 3px; border-radius: 6px;
  transition: color 0.15s ease;
}
.word-letters .wl.lit { color: var(--green-success, #58cc02); }
.word-letters .wl.pop { animation: letter-pop 0.34s ease; }
@keyframes letter-pop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-7px) scale(1.28); }
  100% { transform: translateY(0) scale(1); }
}
/* A word picture beside the speaker, as in spelling: the two sit on one line so
   the child reads the object and the button as a single prompt. */
.prompt-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.prompt-row .prompt-pic { font-size: clamp(2.6rem, 8vw, 3.6rem); line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14)); }
.prompt-row .prompt-pic.pic-img { width: auto; height: auto; max-width: 140px; max-height: clamp(72px, 12vh, 112px); object-fit: contain; }

.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .option-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.option-card {
  border: 3px solid #e5e5e5; background: #ffffff; border-radius: 14px; cursor: pointer;
  padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform 0.12s, border-color 0.12s, background 0.12s; min-height: 118px; justify-content: center;
}
.option-card .pic { font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14)); }
/* The picture is sized from the card, not from the viewport height: a phone is
   tall and narrow, so a vh cap left a 64px picture floating in a 178px card.
   Width-driven sizing follows each photo's own aspect ratio, so portrait
   uploads no longer sit in an invisible letterbox either. */
.option-card .pic-img {
  width: 100%; height: auto;
  max-width: clamp(84px, 26vw, 132px);
  max-height: none;
  object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14));
}
.option-card:hover { transform: translateY(-3px); border-color: var(--orange-bg); }
.option-card.correct { border-color: var(--green-success); background: #dbf8c5; animation: pop 0.3s ease; }
.option-card.wrong { border-color: var(--warning); background: #ffdfe0; animation: shake 0.35s ease; }
.option-card.letter { font-family: var(--font-family-smooth); font-size: clamp(2rem, 6vw, 2.8rem); color: var(--teal); }
.option-card .cap { font-size: 0.78rem; font-weight: 700; color: var(--teal-on-orange); text-transform: lowercase; }
.option-card.dim { opacity: 0.45; pointer-events: none; }

/* --------------------------------------------- sound–letter setup screen */

.setup-screen { padding: 2px 2px 4px; }
.setup-lead { margin: 0 0 14px; font-size: 0.92rem; font-weight: 700; color: var(--teal-on-orange); }

.setup-columns { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 26px; align-items: start; }

.sound-set + .sound-set { margin-top: 18px; }
.sound-set-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.sound-set-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #3c3c3c; }

.chip-all {
  border: 0; cursor: pointer; padding: 3px 11px; border-radius: 999px;
  background: #ffffff; color: #58a700; font-weight: 800; font-size: 0.72rem;
  box-shadow: var(--shadow-low); transition: background 0.12s, color 0.12s;
}
.chip-all.on { background: var(--teal); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.sound-chip {
  cursor: pointer; border: 3px solid #e5e5e5; background: #fff;
  color: #777777; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.12s, background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.sound-chip.vowel, .sound-chip.consonant { width: 46px; height: 46px; border-radius: 50%; font-size: 1.15rem; }
.sound-chip.digraph { min-width: 54px; height: 44px; padding: 0 12px; border-radius: 12px; font-size: 0.95rem; }
.sound-chip.on { background: #dbf8c5; color: #58a700; border-color: rgba(88, 167, 0, 0.3); box-shadow: var(--shadow-low); }
.sound-chip.digraph.on { background: #6f8f8a; color: #fff; border-color: #777777; }
.sound-chip:hover { transform: translateY(-2px); }
.sound-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.setup-side {
  background: #f7f7f7; border: 2px solid #e5e5e5; border-radius: 16px;
  padding: 14px; position: sticky; top: 12px;
}
.setup-side-title { margin: 0 0 10px; font-family: var(--font-family-smooth); font-weight: 400; font-size: 1rem; color: var(--teal); }
.count-row { display: flex; gap: 8px; margin-bottom: 14px; }
.count-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 6px; cursor: pointer; border: 3px solid transparent; border-radius: 12px;
  background: #ffffff; color: var(--teal-dark);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.count-btn.on { background: var(--teal); color: #fff; border-color: var(--teal-dark); }
.count-glyph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 30px; }
.count-glyph i { display: block; aspect-ratio: 1; background: currentColor; border-radius: 2px; opacity: 0.72; }
.count-label { font-size: 0.72rem; font-weight: 800; }

.btn-play {
  width: 100%; min-height: 58px; border: 0; cursor: pointer; padding: 0 26px 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family-smooth); font-size: 1.55rem; color: #777777;
  background: #58cc02; text-transform: lowercase;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.18)); transition: filter 0.12s;
}
.btn-play:hover { filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22)) brightness(1.04); }
.btn-play:disabled { background: #e5e5e5; color: #777777; cursor: not-allowed; filter: none; }
.setup-hint { margin: 10px 0 0; font-size: 0.76rem; font-weight: 700; color: #777777; }

.setup-block + .setup-block { margin-top: 13px; }
.setup-block .setup-side-title { margin-bottom: 8px; }
.setup-block .count-row { margin-bottom: 0; }
.setup-side .btn-play { margin-top: 14px; }

.range-row { display: flex; flex-wrap: wrap; gap: 6px; }
.range-btn {
  flex: 1 1 0; min-width: 46px; padding: 8px 6px; border-radius: 999px; cursor: pointer;
  border: 3px solid transparent; background: #ffffff; color: #58a700;
  font-weight: 800; font-size: 0.95rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.range-btn:hover { transform: translateY(-2px); }
.range-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.range-btn.on { background: #fff; border-color: var(--green-success); color: #58a700; }

.setup-count { margin: 0; font-size: 0.9rem; font-weight: 800; color: #3c3c3c; }
.setup-count b { font-size: 1.1rem; }

/* no sound chips (blender): one column, centred controls */
.setup-screen.setup-single .setup-lead { text-align: center; }
.setup-columns.setup-single-columns { grid-template-columns: minmax(0, 1fr); }
.setup-screen.setup-single .setup-side { position: static; max-width: 460px; margin: 0 auto; }

/* ------------------------------------ set cards (one group of sounds at a time)
   The question on these screens is which group to practise, so the cards are
   exclusive and the size row keeps one shape on every card. */

/* the card list, then the controls under it, then the pinned way forward */
.setup-cards { max-width: 480px; margin: 0 auto; padding: 4px 0 10px; }
.setup-fields { margin-top: 4px; }
.setup-fields .setup-block:first-child { margin-top: 14px; }
.setup-fields .setup-cards-label { margin-top: 16px; }
.setup-title {
  margin: 0 0 4px; font-family: var(--font-family-smooth); font-weight: 400;
  font-size: clamp(1.45rem, 5.4vw, 1.9rem); line-height: 1.15; color: var(--teal-dark);
}
.setup-sub { margin: 0 0 16px; font-size: 0.95rem; font-weight: 700; color: #777777; }

.setup-card-list { display: flex; flex-direction: column; gap: 10px; }
.setup-card-row {
  display: flex; align-items: stretch; background: #ffffff;
  border: 3px solid #e5e5e5; border-radius: 16px;
  transition: border-color 0.12s, background 0.12s;
}
.setup-card-row.is-on { border-color: var(--green-success); background: #eafbdc; }

.setup-card {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 10px 4px 10px 14px; border: 0; border-radius: 13px;
  background: transparent; cursor: pointer; text-align: left; font-family: inherit;
}
.setup-card:focus-visible, .setup-speak:focus-visible, .setup-size:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 2px;
}
.setup-card-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.setup-card-kicker {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #afafaf;
}
.setup-card-start {
  padding: 1px 7px; border-radius: 999px; background: var(--green-success);
  color: #ffffff; font-size: 0.6rem; letter-spacing: 0.06em;
}
.setup-card-name { font-size: 1.02rem; font-weight: 800; color: #3c3c3c; }
.setup-letters {
  font-size: 0.95rem; font-weight: 800; color: #777777;
  letter-spacing: 0.08em; word-spacing: 0.18em; overflow-wrap: anywhere;
}
.setup-card-row.is-on .setup-card-name,
.setup-card-row.is-on .setup-letters { color: #3f7a06; }

.setup-check {
  flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green-success); color: #ffffff;
  font-size: 0.9rem; font-weight: 900; line-height: 1;
}
.setup-check.is-empty { visibility: hidden; }

.setup-speak {
  flex: 0 0 auto; width: 52px; border: 0; border-left: 2px solid #f0f0f0;
  background: transparent; cursor: pointer; font-size: 1.3rem; color: var(--teal);
}
.setup-card-row.is-on .setup-speak { border-left-color: rgba(88, 167, 0, 0.25); }

.setup-cards-label { margin: 20px 0 9px; font-size: 0.9rem; font-weight: 800; color: #3c3c3c; }
.setup-sizes { display: flex; gap: 8px; margin-bottom: 16px; }
.setup-size {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px 7px; border: 3px solid #e5e5e5; border-radius: 14px;
  background: #ffffff; cursor: pointer; font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.setup-size.on { border-color: var(--green-success); background: #eafbdc; }
.setup-size:disabled { opacity: 0.4; cursor: not-allowed; }
.setup-size-num { font-size: 1.15rem; font-weight: 900; color: #3c3c3c; line-height: 1.1; }
.setup-size-name { font-size: 0.7rem; font-weight: 800; color: #777777; }
.setup-size.on .setup-size-num,
.setup-size.on .setup-size-name { color: #3f7a06; }
.setup-summary { margin: 9px 0 0; font-size: 0.8rem; font-weight: 700; color: #777777; text-align: center; }

/* option grids for 3 / 6 / 9 choices */
.option-grid.count-3,
.option-grid.count-6,
.option-grid.count-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-card.letter.long { font-size: clamp(1.1rem, 4.4vw, 1.8rem); letter-spacing: 0; }

@keyframes pop { 0% { transform: scale(1); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* letter tiles & slots (drag games) */

.letter-tile {
  --tile-size: 58px;
  width: var(--tile-size); height: var(--tile-size); border-radius: 10px; background: #fff;
  box-shadow: var(--shadow-low); border: 2px solid #e5e5e5;
  display: inline-flex; align-items: center; justify-content: center; cursor: grab;
  font-family: var(--font-family-smooth); font-size: calc(var(--tile-size) * 0.52); color: var(--teal);
  user-select: none; touch-action: none; transition: transform 0.1s, box-shadow 0.12s, border-color 0.12s;
}
.letter-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-med); }
.letter-tile.selected { border-color: var(--hero-orange-text); box-shadow: 0 0 0 4px rgba(28, 176, 246, 0.25); }
.letter-tile.dragging { opacity: 0.35; }
.letter-tile.placed { cursor: default; }
.letter-tile.lower { text-transform: lowercase; }
.letter-tile.word { --tile-size: 62px; font-size: 1.1rem; padding: 0 10px; width: auto; min-width: var(--tile-size); font-family: var(--font-family-base); font-weight: 800; }

.bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 14px; background: #f7f7f7; border-radius: 14px; border: 2px dashed #e5e5e5; min-height: 84px; }

.slots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 6px 0; }
.slots.dense { gap: 6px; }
.slots.dense .slot { width: 46px; height: 46px; font-size: 1.5rem; }
@media (max-width: 720px) { .slots.dense .slot { width: 42px; height: 42px; font-size: 1.3rem; } }

.slot {
  width: 58px; height: 58px; border-radius: 10px; border: 3px dashed #afafaf;
  background: #f7f7f7; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family-smooth); font-size: 1.9rem; color: var(--teal); transition: background 0.12s, border-color 0.12s;
}
.slot.wide { width: auto; min-width: 84px; padding: 0 12px; }
.slot.over { background: #e8f7ff; border-color: var(--teal); }
.slot.filled { border-style: solid; border-color: #afafaf; background: #fff; box-shadow: var(--shadow-low); }
.slot.correct { border-color: var(--green-success); background: #dbf8c5; }
.slot.wrong { border-color: var(--warning); background: #ffdfe0; }
.slot .letter-tile { box-shadow: none; border: 0; }

.word-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.word-row.dense .slot,
.word-row.dense .fixed-letter { width: 44px; height: 44px; font-size: 1.5rem; }
@media (max-width: 720px) {
  .word-row.dense .slot,
  .word-row.dense .fixed-letter { width: 40px; height: 40px; font-size: 1.35rem; }
}

.word-row .fixed-letter {
  width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family-smooth); font-size: 1.9rem; color: var(--teal-dark);
}
.picture-big { font-size: clamp(3.4rem, 10vw, 5rem); text-align: center; line-height: 1; margin: 4px 0 12px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.15)); }
.picture-big .pic-img { width: auto; height: auto; max-width: 100%; max-height: clamp(110px, 28vh, 210px); margin: 0 auto; border-radius: 12px; }

/* bingo */

.bingo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; margin: 0 auto; }
.bingo-cell {
  aspect-ratio: 1; border-radius: 12px; border: 3px solid #e5e5e5; background: #ffffff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--font-family-smooth); font-size: clamp(1.4rem, 5vw, 2rem); color: var(--teal);
  transition: background 0.12s, border-color 0.12s, transform 0.12s; padding: 4px; text-align: center; position: relative;
}
.bingo-cell.wrong { border-color: var(--warning); background: #ffdfe0; animation: shake 0.35s ease; }
.bingo-cell.word { font-family: var(--font-family-base); font-weight: 800; font-size: clamp(0.9rem, 2.6vw, 1.15rem); }
.bingo-cell:hover { transform: translateY(-2px); border-color: var(--orange-bg); }
.bingo-cell.called { background: #dbf8c5; border-color: var(--hero-orange-text); color: var(--soundsText); }
.bingo-cell.called::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-size: 0.75rem; color: var(--green-success); }
.bingo-cell.win { background: #dbf8c5; border-color: var(--green-success); box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.28); }
.bingo-cell.free { background: #eef6ff; color: var(--teal-on-orange); }
.bingo-grid.grid-4, .bingo-grid.grid-5 { max-width: 540px; gap: 7px; }
.bingo-grid.grid-4 .bingo-cell { font-size: clamp(1.2rem, 4.2vw, 1.7rem); border-radius: 11px; }
.bingo-grid.grid-5 .bingo-cell {
  font-size: clamp(0.95rem, 3.4vw, 1.4rem); border-radius: 9px;
  border-width: 2px; padding: 2px;
}
.bingo-cell.long { font-size: clamp(0.95rem, 3.6vw, 1.35rem); letter-spacing: -0.02em; }
.bingo-grid.grid-4 .bingo-cell.word { font-size: clamp(0.7rem, 2.6vw, 0.95rem); }
.bingo-grid.grid-5 .bingo-cell.word { font-size: clamp(0.6rem, 2.2vw, 0.82rem); padding: 2px; }

/* bingo setup tiles */
.size-row { display: flex; gap: 8px; }
.size-btn {
  flex: 1 1 0; padding: 11px 4px; border-radius: 12px; cursor: pointer;
  border: 3px solid transparent; background: #ffffff; color: var(--teal-dark);
  font-weight: 800; font-size: 0.9rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.size-btn.on { background: var(--teal); color: #fff; border-color: var(--teal-dark); }
.case-row { display: flex; gap: 8px; }
.case-btn {
  flex: 1 1 0; padding: 10px 6px; border-radius: 999px; cursor: pointer;
  border: 3px solid transparent; background: #ffffff; color: var(--teal-dark);
  font-weight: 800; font-size: 0.88rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.case-btn.on { background: var(--teal); color: #fff; border-color: var(--teal-dark); }

.callout { text-align: center; margin: 0 0 14px; }
.callout .called-sound { font-family: var(--font-family-smooth); font-size: 1.5rem; color: var(--soundsText); margin: 6px 0 0; min-height: 1.9rem; }

/* grammar */

.sentence-block { display: flex; flex-wrap: wrap; gap: 10px 8px; justify-content: center; padding: 8px 0 4px; }
.word-column { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.word-column .word-chip { font-weight: 800; font-size: 1.1rem; color: var(--teal-dark); padding: 6px 10px; border-radius: 8px; background: #ffffff; border: 2px solid transparent; }
.symbol-slot {
  width: 54px; height: 54px; border-radius: 50%; border: 3px dashed #afafaf;
  display: flex; align-items: center; justify-content: center; background: #f7f7f7; font-size: 1.4rem;
}
.symbol-slot.over { background: #e8f7ff; border-color: var(--teal); }
.symbol-slot.correct { border-style: solid; border-color: var(--green-success); background: #dbf8c5; }
.symbol-slot.wrong { border-style: solid; border-color: var(--warning); background: #ffdfe0; }
.symbol-tile {
  width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-low);
  border: 2px solid #e5e5e5; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; cursor: grab; user-select: none; touch-action: none;
}
.symbol-tile.selected { border-color: var(--hero-orange-text); box-shadow: 0 0 0 4px rgba(28, 176, 246, 0.25); }
.symbol-tile .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* feedback + overlay */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--teal-dark); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 800;
  box-shadow: var(--shadow-med); transition: opacity 0.2s, transform 0.2s; z-index: 60; font-size: 0.95rem;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { background: #58a700; }
.toast.bad { background: #cc3b3b; }

.overlay {
  position: fixed; inset: 0; background: rgba(7, 20, 30, 0.55); display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 70; backdrop-filter: blur(2px);
}
.overlay[hidden] { display: none; }
.overlay-card { background: #fff; border-radius: 20px; padding: 26px 24px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-high); }
.overlay-card h2 { margin: 0 0 6px; font-family: var(--font-family-smooth); font-weight: 400; color: var(--teal); font-size: 1.8rem; }
.overlay-card p { margin: 0 0 18px; color: var(--teal-dark); font-weight: 700; }
.overlay-card .big-emoji { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.instructions { margin: 16px 0 0; }
.instructions summary {
  cursor: pointer; font-weight: 800; color: var(--teal-on-orange); font-size: 0.88rem;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.instructions summary::-webkit-details-marker { display: none; }
.instructions summary::before { content: "▸"; transition: transform 0.15s; }
.instructions[open] summary::before { transform: rotate(90deg); }
.instructions .body { margin-top: 8px; font-size: 0.9rem; color: var(--teal-dark); background: #f7f7f7; border-radius: 10px; padding: 12px 14px; }
.instructions .body p { margin: 0 0 8px; }
.instructions .body p:last-child { margin-bottom: 0; }

.progress-track { height: 8px; border-radius: 999px; background: #e5e5e5; overflow: hidden; margin: 2px 0 16px; }
.progress-track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--orange-bg), var(--hero-orange-text)); transition: width 0.25s; }

/* board scaffolds used by the drag games */

.back-link { display: inline-block; font-weight: 800; font-size: 0.85rem; color: var(--teal-on-orange); margin-bottom: 10px; }
.back-link:hover { text-decoration: underline; }

.board { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.slot-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot-label { font-family: var(--font-family-smooth); font-size: 1.4rem; color: var(--teal-on-orange); }
.slot-label.small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.bins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.bin { border: 3px dashed #afafaf; background: #f7f7f7; border-radius: 14px; padding: 12px; min-height: 160px; transition: background 0.12s, border-color 0.12s; }
.bin.over { border-color: var(--teal); background: #e8f7ff; }
.bin h3 { margin: 0 0 10px; text-align: center; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-on-orange); }
.bin .bin-items { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 14px; font-size: 0.78rem; font-weight: 700; color: var(--teal-dark); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { font-style: normal; font-size: 1.1rem; }

.alphabet-strip { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 2px 0 12px; font-family: var(--font-family-smooth); font-size: 0.9rem; color: #777777; }
.alphabet-strip b { color: var(--hero-orange-text); font-weight: 400; }

/* ------------------------------------------------------- touch & mobile */

body { overflow-x: hidden; }

button, a, .option-card, .bingo-cell, .slot, .stage-game { -webkit-tap-highlight-color: transparent; }
button, .option-card, .bingo-cell { touch-action: manipulation; }
.letter-tile, .symbol-tile { touch-action: none; }

@media (max-width: 549px) {
  .header-top { padding: 8px 12px; gap: 8px; }
  .game-bar { gap: 6px; }
  .game-exit { padding: 0 12px 0 10px; font-size: 0.9rem; }
  .tally-pill { padding: 2px 10px 2px 8px; font-size: 0.95rem; }
  .tally-pill .tick { font-size: 1.45rem; }
  .brand { font-size: 1.08rem; gap: 8px; }
  .brand .brand-mark { font-size: 1.3rem; }

  .games-hero { padding: 18px 16px 14px; }
  .hero-heading { gap: 10px; }
  .hero-heading .worm-wrap { height: 2.6rem; }
  .hero-text h1 { font-size: 1.85rem; }
  .hero-text p { font-size: 0.9rem; }
  .games-stripe { padding: 14px 0 22px; }

  .stage-list { padding: 0 12px; gap: 12px; }
  .stage-intro { padding: 0 4px 4px; }
  .stage-intro h2 { font-size: 1rem; }
  .stage-intro p { font-size: 0.84rem; }
  .stage { border-radius: 16px; padding: 14px 12px 12px; }
  .stage-head { gap: 10px; }
  .stage-num { width: 34px; height: 34px; font-size: 0.95rem; }
  .stage-title { font-size: 1.12rem; }
  .stage-note { font-size: 0.84rem; }
  .stage-games { margin-top: 10px; gap: 8px; }
  .stage-game { gap: 10px; padding: 8px; min-height: 72px; }
  .stage-game img { width: 66px; height: 58px; }
  .game-name { font-size: 0.95rem; }
  .game-tag {
    font-size: 0.78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .game-go { display: none; }

  .site-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* game screens: full-bleed board, sticky HUD, thumb-sized controls */
@media (max-width: 720px) {
  .game-hero { padding: 16px 16px 12px; }
  .game-hero h1 { font-size: 1.45rem; }
  .game-hero p { font-size: 0.9rem; }
  .back-link { margin-bottom: 6px; }

  .game-band { padding: 0; }
  .game-frame {
    width: 100%; border-radius: 0; box-shadow: none;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  }

  .game-toolbar {
    position: sticky; top: 0; z-index: 6; background: #fff;
    margin: -12px -12px 10px; padding: 8px 12px;
    border-bottom: 1px solid #e5e5e5; gap: 8px;
  }
  .stats { width: 100%; justify-content: space-between; gap: 8px; }
  .stat { font-size: 0.8rem; }
  .toolbar-actions { width: 100%; gap: 8px; }
  .toolbar-actions .btn { flex: 1 1 auto; min-height: 48px; padding: 12px 14px; }

  .prompt { margin: 2px 0 14px; }
  .option-grid { gap: 10px; }
  .option-card { min-height: 124px; padding: 10px 4px; border-radius: 16px; }
  .option-card .pic { font-size: 3.1rem; }
  .sound-btn:not(.icon) { min-height: 50px; width: 100%; max-width: 340px; }
  .sound-btn.icon { width: 80px; height: 80px; }

  .setup-columns { grid-template-columns: 1fr; gap: 14px; }
  .setup-side {
    position: sticky; top: auto; bottom: 0; z-index: 6;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius: 14px; box-shadow: var(--shadow-med);
  }
  .setup-screen.setup-single .setup-side { position: sticky; top: auto; bottom: 0; max-width: none; }
  .setup-side-title { margin-bottom: 8px; font-size: 0.9rem; }
  .count-row { margin-bottom: 10px; }
  .range-btn { min-height: 44px; font-size: 1rem; }
  .btn-play { min-height: 54px; font-size: 1.3rem; }
  .sound-chip.vowel, .sound-chip.consonant { width: 44px; height: 44px; }
  .sound-chip.digraph { min-width: 50px; height: 42px; }
  .option-grid.count-6 .option-card,
  .option-grid.count-9 .option-card { min-height: 88px; }

  .letter-tile { --tile-size: 56px; }
  .letter-tile.word { font-size: 1rem; padding: 0 12px; }
  .slot { width: 56px; height: 56px; font-size: 1.75rem; }
  .slot.wide { min-width: 74px; padding: 0 10px; }
  .word-row .fixed-letter { width: 56px; height: 56px; font-size: 1.75rem; }
  .bank { padding: 12px 10px; gap: 10px; }
  .bins { grid-template-columns: 1fr; gap: 10px; }
  .bin { min-height: 120px; }

  .bingo-grid { max-width: none; width: 100%; gap: 6px; }
  .bingo-cell { min-height: 84px; border-radius: 14px; }
  .bingo-cell.word { font-size: 1rem; }

  .overlay { align-items: flex-end; padding: 0; }
  .overlay-card { border-radius: 22px 22px 0 0; max-width: none; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
  .overlay-actions { gap: 8px; }
  .overlay-actions .btn { flex: 1 1 140px; min-height: 50px; }

  .toast { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateY(16px); border-radius: 14px; text-align: center; }
  .toast.show { transform: translateY(0); }

  .legend { gap: 6px 12px; font-size: 0.74rem; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .letter-tile { --tile-size: 48px; }
  .slot, .word-row .fixed-letter { width: 48px; height: 48px; font-size: 1.55rem; }
  .bank { gap: 8px; }
  .bingo-cell { min-height: 72px; }
}

/* phones have no hover state to rely on */
@media (hover: none) {
  .stage-game:hover, .stage-game:focus-visible {
    transform: none; background: #ffffff; border-color: #e5e5e5; box-shadow: none;
  }
  .option-card:hover { transform: none; border-color: #e5e5e5; }
  .letter-tile:hover { transform: none; box-shadow: var(--shadow-low); }
  .bingo-cell:hover { transform: none; border-color: #e5e5e5; }
  .sound-btn:hover { transform: none; background: #ffffff; }
  .btn:hover { background: var(--hero-orange-text); }
  .btn.secondary:hover { background: var(--teal); }
  .btn.ghost:hover { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* no shake for children who ask for less motion: a ring says the same thing */
  .sound-btn.nudge { box-shadow: 0 0 0 5px rgba(88, 204, 2, 0.55); }
}

/* big bingo boards keep square cells on phones */
@media (max-width: 720px) {
  .bingo-grid.grid-4 .bingo-cell,
  .bingo-grid.grid-5 .bingo-cell { min-height: 0; }
}

/* case match: font picker */
.font-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.font-btn {
  padding: 12px 4px; border-radius: 12px; cursor: pointer;
  border: 3px solid transparent; background: #ffffff; color: #777777;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.font-btn:hover { transform: translateY(-2px); }
.font-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.font-btn.on { background: #58cc02; border-color: #58a700; color: #fff; }

[data-case-font="smooth"] .slot-label, [data-case-font="smooth"] .letter-tile { font-family: var(--font-family-smooth); }
[data-case-font="alata"] .slot-label, [data-case-font="alata"] .letter-tile { font-family: "Alata", sans-serif; }
[data-case-font="base"] .slot-label, [data-case-font="base"] .letter-tile { font-family: var(--font-family-base); }
[data-case-font="serif"] .slot-label, [data-case-font="serif"] .letter-tile { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
[data-case-font="mono"] .slot-label, [data-case-font="mono"] .letter-tile { font-family: "Courier New", monospace; font-weight: 700; }
[data-case-font="rounded"] .slot-label, [data-case-font="rounded"] .letter-tile { font-family: "Trebuchet MS", Verdana, sans-serif; }

/* difficulty cards (C–V sorting) */
.difficulty-row { display: flex; flex-direction: column; gap: 8px; }
.difficulty-btn {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 14px; border-radius: 12px; cursor: pointer;
  border: 3px solid transparent; background: #ffffff; color: #777777;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.difficulty-btn:hover { transform: translateY(-2px); }
.difficulty-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.difficulty-btn.on { background: #fff; border-color: var(--green-success); }
.difficulty-btn b { font-size: 1rem; color: var(--teal); }
.difficulty-btn span { font-size: 0.8rem; font-weight: 700; color: #777777; line-height: 1.25; }

.letter-tile.team { width: auto; min-width: var(--tile-size); padding: 0 10px; font-size: 1.05rem; }

/* grammar setup: symbols, display and the label tiles */
.symbol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 330px; }
.symbol-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 5px 5px; border-radius: 14px; border: 3px solid transparent;
  background: #ffffff; color: #fff; cursor: pointer;
  transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.symbol-chip:hover { transform: translateY(-2px); }
.symbol-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.symbol-chip-glyph {
  display: grid; place-items: center; width: 100%; min-height: 40px;
  border-radius: 9px; background: #f7f7f7; font-size: 1.45rem; line-height: 1;
}
.symbol-chip-name { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; }
.symbol-chip.on { background: #dbf8c5; color: #58a700; border-color: rgba(88, 167, 0, 0.3); box-shadow: var(--shadow-low); }
.symbol-chip.on .symbol-chip-glyph { background: #ffffff; }

.display-row { display: inline-flex; gap: 6px; }
.display-btn {
  padding: 8px 14px; border-radius: 10px; border: 3px solid transparent;
  background: #ffffff; color: #fff; font-weight: 700; font-size: 0.82rem; cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.display-btn:hover { transform: translateY(-2px); }
.display-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.display-btn.on { background: #dbf8c5; color: #58a700; border-color: rgba(88, 167, 0, 0.3); }

.symbol-tile.is-label { width: auto; min-width: 96px; padding: 0 12px; }
.symbol-tile.is-label span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.01em; }

/* ============================================================ Duolingo skin
   Owl green, chunky bottom shadows on every pressable surface, 2px borders and
   rounded cards. Applied on top of the clone's original rules so the markup and
   the game engines stay untouched. */

body { color: var(--dl-ink); }

/* header, hub, footer */
.site-header { border-bottom: 2px solid var(--dl-swan); box-shadow: none; }
.brand { font-weight: 900; color: var(--dl-ink); letter-spacing: -0.01em; }
.brand .amp { color: var(--dl-green); }
.stage-intro h2, .stage-title { font-weight: 900; color: var(--dl-ink); }
.games-stripe { background: var(--dl-green-pale); }
.stage { border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); border-radius: 16px; box-shadow: none; }
.stage.is-start { border-color: var(--dl-green); border-bottom-color: var(--dl-green-deep); }
.stage-num { background: var(--dl-green); border-bottom: 3px solid var(--dl-green-deep); box-shadow: none; font-weight: 900; }
.stage-pill { background: var(--dl-green); font-weight: 900; box-shadow: none; }
.stage-game { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); border-radius: 16px; }
.stage-game:hover, .stage-game:focus-visible { background: #fff; border-color: var(--dl-hare); transform: translateY(-2px); box-shadow: none; }
.game-name { color: var(--dl-ink); }
.game-go { color: var(--dl-green-deep); font-weight: 900; letter-spacing: 0.04em; }
.site-footer { background: var(--dl-eel); border-top: 2px solid var(--dl-swan); }
.site-footer a { color: var(--dl-wolf); }

/* game frame and chrome */
.game-band, .game-bar { background: var(--dl-eel); }
.game-frame { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); border-radius: 20px; box-shadow: none; }
.game-exit { background: #fff; color: var(--dl-wolf); border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan); border-radius: 12px; box-shadow: none; }
.game-exit:hover { background: var(--dl-eel); color: var(--dl-ink); }
.game-exit .exit-x { color: var(--dl-red); }
.tally-pill { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan); color: var(--dl-ink); box-shadow: none; font-weight: 900; }
.tally-pill .tick { color: var(--dl-green); }
.game-help { background: #fff; color: var(--dl-ink); border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan); box-shadow: none; font-weight: 900; }
.game-help:hover { background: var(--dl-eel); }

/* buttons: the chunky bottom edge is the press affordance */
.btn { background: var(--dl-green); border: 0; border-bottom: 4px solid var(--dl-green-deep); border-radius: 16px; padding: 13px 22px; font-weight: 800; color: #fff; box-shadow: none; }
.btn:hover { background: var(--dl-green-light); }
.btn:active { transform: translateY(4px); border-bottom-width: 0; }
.btn.secondary { background: var(--dl-blue); border-bottom-color: var(--dl-blue-deep); }
.btn.secondary:hover { background: #47c0ff; }
.btn.ghost { background: #fff; color: var(--dl-wolf); border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); }
.btn.ghost:hover { background: #fff; color: var(--dl-ink); border-color: var(--dl-hare); }
.btn:disabled { background: var(--dl-swan); border-bottom-color: #d7d7d7; color: var(--dl-hare); }
.btn-play { background: var(--dl-green); color: #fff; border-radius: 16px; border-bottom: 5px solid var(--dl-green-deep); clip-path: none; filter: none; text-transform: uppercase; font-weight: 900; letter-spacing: 0.06em; }
.btn-play:hover { background: var(--dl-green-light); }
.btn-play:active { transform: translateY(4px); border-bottom-width: 1px; }
.btn-play:disabled { background: var(--dl-swan); border-bottom-color: #d7d7d7; color: var(--dl-hare); }

/* the speaker is the lesson bubble */
.sound-btn.icon { background: var(--dl-green); border: 0; border-bottom: 6px solid var(--dl-green-deep); color: #fff; box-shadow: none; }
.sound-btn.icon:hover { background: var(--dl-green-light); transform: none; }
.sound-btn.icon:active { transform: translateY(4px); border-bottom-width: 2px; }
.sound-btn.icon .spk { filter: brightness(0) invert(1); }
.sound-btn:not(.icon) { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); color: var(--dl-ink); border-radius: 16px; }

/* answer cards, tiles, slots, bins */
.option-card { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); border-radius: 16px; }
.option-card:hover { transform: translateY(-2px); border-color: var(--dl-hare); }
.option-card.correct { background: var(--dl-green-pale); border-color: var(--dl-green); border-bottom-color: var(--dl-green-deep); }
.option-card.wrong { background: #ffdfe0; border-color: var(--dl-red); border-bottom-color: var(--dl-red-deep); }
/* A miss on the sound games colours the whole board and blinks it once before
   the next question: wrong options red, the answer green with a tick. */
.option-card.blink { animation: board-blink 0.42s ease 2; }
@keyframes board-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.option-card.letter { color: var(--dl-ink); font-weight: 900; }
.prompt .prompt-word { color: var(--dl-ink); font-weight: 900; }
.letter-tile { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan); border-radius: 12px; color: var(--dl-ink); box-shadow: none; }
.letter-tile:hover { border-color: var(--dl-hare); box-shadow: none; }
.letter-tile.selected { border-color: var(--dl-blue); box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.25); }
.slot { background: var(--dl-eel); border: 2px dashed var(--dl-hare); border-radius: 12px; color: var(--dl-ink); }
.slot.over { background: #e8f7ff; border-color: var(--dl-blue); }
.slot.filled { background: #fff; border-style: solid; border-color: var(--dl-hare); box-shadow: none; }
.slot.correct { background: var(--dl-green-pale); border-style: solid; border-color: var(--dl-green); }
.slot.wrong { background: #ffdfe0; border-style: solid; border-color: var(--dl-red); }
.bank { background: var(--dl-eel); border: 2px dashed var(--dl-swan); border-radius: 16px; }
.bin { background: var(--dl-eel); border: 2px dashed var(--dl-hare); border-radius: 16px; }
.bin.over { background: #e8f7ff; border-color: var(--dl-blue); }
.symbol-slot { background: var(--dl-eel); border: 2px dashed var(--dl-hare); }
.symbol-slot.over { background: #e8f7ff; border-color: var(--dl-blue); }
.symbol-slot.correct { background: var(--dl-green-pale); border-style: solid; border-color: var(--dl-green); }
.symbol-slot.wrong { background: #ffdfe0; border-style: solid; border-color: var(--dl-red); }
.symbol-tile { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan); box-shadow: none; }
.symbol-tile.selected { border-color: var(--dl-blue); box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.25); }

/* bingo */
.bingo-cell { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); border-radius: 16px; color: var(--dl-ink); }
.bingo-cell:hover { transform: translateY(-2px); border-color: var(--dl-hare); }
.bingo-cell.called { background: var(--dl-green-pale); border-color: var(--dl-green); border-bottom-color: var(--dl-green-deep); color: var(--dl-green-deep); }
.bingo-cell.win { background: var(--dl-green-pale); border-color: var(--dl-green); box-shadow: none; }
.bingo-cell.wrong { background: #ffdfe0; border-color: var(--dl-red); border-bottom-color: var(--dl-red-deep); }
.bingo-cell.free { background: #e8f7ff; color: var(--dl-blue-deep); }

/* setup screen */
.setup-side { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); }
.setup-side-title { font-weight: 800; color: var(--dl-wolf); }
.setup-lead { color: var(--dl-wolf); }
.sound-chip { background: #fff; border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan); color: var(--dl-wolf); box-shadow: none; }
.sound-chip:hover { border-color: var(--dl-hare); }
.sound-chip.on, .sound-chip.digraph.on { background: var(--dl-green-pale); color: var(--dl-green-deep); border-color: var(--dl-green); border-bottom-color: var(--dl-green-deep); }
.chip-all { background: #fff; color: var(--dl-wolf); border: 2px solid var(--dl-swan); border-bottom-width: 3px; box-shadow: none; }
.chip-all.on { background: var(--dl-green-pale); color: var(--dl-green-deep); border-color: var(--dl-green); }
.count-btn, .size-btn, .case-btn, .range-btn, .font-btn, .difficulty-btn, .display-btn, .symbol-chip {
  background: #fff; color: var(--dl-wolf);
  border: 2px solid var(--dl-swan); border-bottom: 3px solid var(--dl-swan);
}
.count-btn.on, .size-btn.on, .case-btn.on, .range-btn.on, .font-btn.on, .difficulty-btn.on, .display-btn.on, .symbol-chip.on {
  background: var(--dl-green-pale); color: var(--dl-green-deep);
  border-color: var(--dl-green); border-bottom-color: var(--dl-green-deep); box-shadow: none;
}
.setup-count { color: var(--dl-wolf); }
.setup-count b { color: var(--dl-green-deep); }
.sound-set-head h3 { color: var(--dl-ink); }

/* feedback, results, progress */
.progress-track { height: 16px; background: var(--dl-swan); }
.progress-track i { background: var(--dl-green); border-radius: 999px; }
.overlay-card { border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan); }
.overlay-card h2 { font-weight: 900; color: var(--dl-ink); }
.overlay-card p { color: var(--dl-wolf); }
.toast { background: var(--dl-ink); border-radius: 16px; }
.toast.good { background: var(--dl-green-deep); }
.toast.bad { background: var(--dl-red-deep); }
.legend, .alphabet-strip { color: var(--dl-wolf); }
.alphabet-strip b { color: var(--dl-green-deep); font-weight: 900; }
.instructions summary { color: var(--dl-green-deep); }

/* one consistent focus ring */
:where(button, a, input, select).focus-visible { outline: 3px solid var(--dl-blue); outline-offset: 2px; }

/* phone: keep the compact sizing the earlier mobile rules established */
@media (max-width: 720px) {
  .game-band, .game-bar { background: #fff; }
  .game-frame { border: 0; border-bottom: 4px solid var(--dl-swan); border-radius: 0; }
  .game-bar { padding: 6px 0; }
  .option-card { min-height: 124px; }
  .bingo-cell { min-height: 84px; }
  .slot { width: 56px; height: 56px; }
  .letter-tile { --tile-size: 56px; }
  .btn-play { min-height: 54px; font-size: 1.2rem; }
  .overlay-card { border-radius: 22px 22px 0 0; }
}
@media (hover: none) {
  .stage-game:hover, .option-card:hover, .letter-tile:hover, .bingo-cell:hover, .sound-chip:hover { transform: none; }
}

/* ------------------------------------------- free stages and the paid set */

.stage-pill--free { background: var(--green-success); }
.stage-pill--locked { background: #ffe9b8; color: #8a5a00; box-shadow: none; }

/* the unlock control in the hub's top bar */

.header-unlock {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 6px 5px 13px; border-radius: 999px;
  background: linear-gradient(100deg, #0f9d8f 0%, #17b26a 55%, #22c55e 100%);
  box-shadow: 0 4px 12px rgba(15, 157, 143, 0.24);
  color: #fff;
}
.hu-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; min-width: 0; }
.hu-title { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 900; white-space: nowrap; }
.hu-price { font-size: 0.72rem; font-weight: 800; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.hu-price s { opacity: 0.7; font-weight: 700; }
.hu-price b { color: #fff; }
.hu-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  background: #fff; color: #0f766e; font-weight: 900; font-size: 0.84rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16); white-space: nowrap;
}
.hu-go:hover { transform: translateY(-1px); }
.hu-go[hidden] { display: none; }

.header-unlock .hu-open,
.header-unlock .hu-short { display: none; }

.header-unlock.is-unlocked {
  background: linear-gradient(100deg, #d5f1ea 0%, #dbf8c5 100%);
  box-shadow: none; color: #0d5f63; padding-right: 13px;
}
.header-unlock.is-unlocked .hu-open { display: flex; }
.header-unlock.is-unlocked .hu-locked { display: none; }

@media (max-width: 640px) {
  .header-unlock { gap: 7px; padding: 4px 5px 4px 10px; }
  .hu-title { font-size: 0.76rem; gap: 5px; }
  .header-unlock .hu-full { display: none; }
  .header-unlock .hu-short { display: inline; }
  .hu-price { font-size: 0.68rem; }
  .hu-price s, .hu-life { display: none; }
  .hu-go { min-height: 34px; padding: 0 11px; font-size: 0.78rem; }
}

/* a locked game card on the hub */

.stage-game.is-locked { border-color: #f0e2c4; }
.stage-game.is-locked img { filter: grayscale(0.5); opacity: 0.72; }
.stage-game.is-locked .game-go { color: #8a5a00; }
.stage-game.is-locked:hover { border-color: #e6d3a8; }

/* the small chip used on locked cards, lists and screenshots */

.lock-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: #fff3d6; color: #8a5a00;
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.01em; white-space: nowrap;
  vertical-align: middle;
}
.acts-list h3 .lock-chip { margin-left: 8px; }

.screen { position: relative; }
.screen.is-locked img { filter: grayscale(0.35); opacity: 0.82; }
.screen .lock-chip { position: absolute; top: 8px; right: 8px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); }

/* the paywall on a locked game page */

.lock-gate {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background-color: #eaf8f3;
  background-image: radial-gradient(circle, #c9e9df 2.5px, transparent 2.5px);
  background-size: 22px 22px;
}
body.lock-gate-open { overflow: hidden; }

.lock-gate-card {
  width: 100%; max-width: 420px; margin: auto; text-align: center;
  background: #fff; border: 3px solid #5cc0b6; border-radius: 26px;
  padding: 24px 22px 20px;
  box-shadow: 0 18px 40px rgba(13, 95, 99, 0.16);
}
.lock-gate-icon { display: block; font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.lock-gate-card h2 {
  margin: 0 0 8px; font-size: 1.35rem; font-weight: 900; line-height: 1.2;
  letter-spacing: -0.02em; color: #0d5f63;
}
.lock-gate-card p { margin: 0 0 10px; font-size: 0.92rem; font-weight: 600; color: #777777; }
.lock-gate-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.lock-gate-price s { color: #9aa8a6; font-weight: 800; }
.lock-gate-price b { font-size: 1.7rem; font-weight: 900; color: #0d5f63; }
.lock-gate-go {
  display: flex; align-items: center; justify-content: center;
  min-height: 58px; margin-top: 8px; border-radius: 14px;
  background: var(--dl-green); color: #fff; font-weight: 900;
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 5px solid var(--dl-green-deep);
}
.lock-gate-go:active { transform: translateY(4px); border-bottom-width: 1px; }
.lock-gate-free {
  display: inline-block; margin-top: 14px; font-size: 0.88rem; font-weight: 800;
  color: #0d5f63; text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .lock-gate { padding: 14px; }
  .lock-gate-card { padding: 20px 16px 16px; border-radius: 22px; }
}

/* -------------------------- setup cards on a phone: keep PLAY above the fold
   The card screen is the only place where the child is not playing yet, so on a
   phone the sizes and PLAY move into a bar pinned to the bottom of the screen:
   whatever the phone's height, the way forward is reachable without scrolling.
   The page boot already drops the title block on a game page, so this screen
   starts right under the bar with only the cards to get through. */

.setup-actions { display: block; }

@media (max-width: 720px) {
  /* the bar is the bottom edge now, so the frame hands its bottom padding over */
  .game-main:has(.setup-cards) .game-frame { padding-bottom: 0; }

  .setup-cards { padding: 0; max-width: none; }
  .setup-title { font-size: 1.3rem; margin-bottom: 2px; }
  .setup-sub { font-size: 0.86rem; margin-bottom: 10px; }

  .setup-fields { margin-top: 2px; }
  .setup-fields .setup-block:first-child { margin-top: 10px; }
  .setup-fields .setup-cards-label { margin-top: 10px; }

  .setup-card-list { gap: 7px; }
  .setup-card-row { border-width: 2px; border-bottom-width: 4px; border-radius: 14px; }
  .setup-card { padding: 7px 2px 7px 12px; gap: 6px; }
  .setup-card-kicker { font-size: 0.58rem; gap: 5px; }
  .setup-card-start { font-size: 0.54rem; padding: 1px 6px; }
  .setup-card-name { font-size: 0.95rem; }
  .setup-letters { font-size: 0.84rem; letter-spacing: 0.05em; word-spacing: 0.14em; }
  .setup-check { flex-basis: 22px; width: 22px; height: 22px; font-size: 0.78rem; }
  .setup-speak { width: 46px; font-size: 1.15rem; }

  .setup-actions {
    position: sticky; bottom: 0; z-index: 5;
    background: #fff; border-top: 2px solid var(--dl-swan);
    margin: 12px -12px 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .setup-cards-label { margin: 0 0 7px; font-size: 0.82rem; }
  .setup-sizes { gap: 7px; margin-bottom: 12px; }
  .setup-size { padding: 7px 3px 5px; border-width: 2px; border-bottom-width: 4px; border-radius: 12px; }
  .setup-size-num { font-size: 1.05rem; }
  .setup-size-name { font-size: 0.64rem; }
  .setup-summary { margin: 7px 0 0; font-size: 0.72rem; line-height: 1.3; }
}

/* short phones: one more notch tighter, so even a small screen fits whole */
@media (max-width: 720px) and (max-height: 700px) {
  .setup-title { font-size: 1.18rem; }
  .setup-sub { display: none; }
  .setup-card { padding: 5px 2px 5px 12px; }
  .setup-card-name { font-size: 0.92rem; }
  .setup-letters { font-size: 0.8rem; }
  .setup-cards-label { display: none; }
  .setup-sizes { margin-bottom: 10px; }
  .setup-size { padding: 5px 3px 4px; }
  .btn-play { min-height: 50px; }
  .setup-summary { font-size: 0.68rem; }
}

/* ------------------------------------------------- right-answer cheer */

/* under the dialogs (70) and the toast (60), over the page itself */
.confetti-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -24px; border-radius: 2px; opacity: 0;
  will-change: transform, opacity;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.33, 0.55, 0.6, 1);
  animation-fill-mode: forwards;
}
.confetti-piece.round { border-radius: 50%; }
@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  6% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), calc(100vh + 40px), 0) rotate(var(--turn)); }
}
@media (prefers-reduced-motion: reduce) {
  /* the green card and the chime already said it; no falling paper */
  .confetti-layer { display: none; }
}

/* ------------------------------------------------- who is playing strip */

/* The player chip is header furniture, not a card: the same row as the brand,
   built from the same shapes. It owns the top-right corner on the hub now that
   the unlock pill is gone, so the row is brand on the left, child on the right. */
.header-player { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.header-player + .header-unlock { margin-left: 0; }
.strip-who {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  border: 0; background: transparent; padding: 3px 9px 3px 3px; border-radius: 999px;
  cursor: pointer; text-align: left; font-family: var(--font-family-smooth); color: var(--dl-ink);
  transition: background 0.15s ease;
}
.strip-who:hover, .strip-who:focus-visible { background: rgba(16, 43, 47, 0.06); }
.strip-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--dl-green-pale); color: var(--dl-green-deep);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dl-swan);
  display: grid; place-items: center; font-weight: 900; font-size: 1rem;
}
.strip-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.strip-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dl-wolf); }
.strip-name { font-size: 0.97rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9ch; }
.strip-caret { color: var(--dl-wolf); font-size: 0.7rem; }
.strip-stars {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px;
  background: #fff9e6; box-shadow: inset 0 0 0 2px #ffe1a1; color: #a06a00;
  font-weight: 900; font-size: 0.82rem;
}
.strip-star-glyph { color: #ffc800; }

/* Parent controls close the switcher sheet: quiet, out of the child's way. */
.sheet-parents {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--dl-swan);
}
.sheet-parents-hint { margin: 0; font-size: 0.78rem; font-weight: 700; line-height: 1.35; color: var(--dl-wolf); }
.sheet-parents-btn {
  position: relative; overflow: hidden; flex: 0 0 auto;
  border: 0; background: transparent; color: var(--dl-wolf);
  border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 0.76rem; font-weight: 800;
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.sheet-parents-btn:hover, .sheet-parents-btn:focus-visible { color: var(--dl-ink); background: rgba(16, 43, 47, 0.06); }
.sheet-parents-btn::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; width: 0;
  border-radius: 2px; background: var(--dl-green);
}
.sheet-parents-btn.holding::after { width: calc(100% - 16px); transition: width 1s linear; }

@media (max-width: 640px) {
  /* With the upsell gone the chip fits beside the brand again, so it stays in
     the same row and only wraps if a long name truly cannot shrink further. */
  .header-top { flex-wrap: wrap; row-gap: 4px; }
  .header-player { flex: 0 1 auto; gap: 4px; }
  .strip-label { display: none; }
  .strip-name { max-width: 8ch; }
  .strip-stars { margin-left: auto; }
}

/* ------------------------------------------------------------- sheets */

.sheet-open { overflow: hidden; }
.sheet-overlay { align-items: flex-end; padding: 0; }
@media (min-width: 640px) { .sheet-overlay { align-items: center; padding: 20px; } }
.sheet-card {
  width: 100%; max-width: 540px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
}
@media (min-width: 640px) { .sheet-card { border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; color: var(--dl-ink); }
.sheet-close {
  border: 0; background: var(--dl-swan); color: var(--dl-wolf);
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer;
}

.profile-list { display: grid; gap: 8px; }
.profile-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 2px solid var(--dl-swan); background: #fff; font: inherit; color: var(--dl-ink);
}
.profile-row.on { border-color: var(--dl-green); background: var(--dl-green-pale); }
.profile-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--dl-eel); color: var(--dl-wolf);
  display: grid; place-items: center; font-weight: 900;
}
.profile-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.profile-name { font-weight: 800; font-size: 0.98rem; }
.profile-meta { font-size: 0.76rem; color: var(--dl-wolf); }
.profile-tick { color: var(--dl-green-deep); font-weight: 900; }

.hub-add, .hub-signin { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--dl-eel); }
.hub-add-label { margin: 0 0 8px; font-weight: 800; font-size: 0.9rem; color: var(--dl-ink); }
.hub-note { margin: 0 0 10px; font-size: 0.8rem; line-height: 1.4; color: var(--dl-wolf); }
.hub-ages { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.hub-age {
  border: 2px solid var(--dl-swan); border-bottom-width: 3px; background: #fff; color: var(--dl-wolf);
  border-radius: 10px; padding: 6px 11px; font: inherit; font-weight: 800; font-size: 0.85rem; cursor: pointer;
}
.hub-age.on { background: var(--dl-green-pale); border-color: var(--dl-green); color: var(--dl-green-deep); }
.btn-sm {
  border: 2px solid var(--dl-swan); border-bottom-width: 3px; background: #fff; color: var(--dl-wolf);
  border-radius: 12px; padding: 8px 14px; font: inherit; font-weight: 800; font-size: 0.85rem; cursor: pointer;
}
.btn-sm-go { background: var(--dl-green); border-color: var(--dl-green); border-bottom-color: var(--dl-green-deep); color: #fff; }
.btn-sm-quiet { color: var(--dl-red-deep); border-color: #ffb4b4; }
.hub-block { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--dl-eel); }
.hub-block:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.hub-block h3 { margin: 0 0 8px; font-size: 0.98rem; color: var(--dl-ink); }
.hub-name-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hub-name-row .text-input { flex: 1 1 auto; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.hub-table th, .hub-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--dl-eel); }
.hub-table thead th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dl-wolf); }
.hub-table td { color: var(--dl-wolf); }
.hub-stars { color: #ffc800; letter-spacing: 0.06em; white-space: nowrap; }
.hub-foot { margin: 16px 0 0; font-size: 0.74rem; color: var(--dl-hare); line-height: 1.4; }

/* ------------------------------------------- stars on the win card */

.win-earned { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 6px; }
.win-mascot { width: 46px; height: 46px; flex: 0 0 auto; }
.win-stars { display: flex; gap: 3px; font-size: 1.7rem; line-height: 1; }
.win-star { color: #dcdcdc; }
.win-star.on { color: #ffc800; text-shadow: 0 2px 0 #e0a800; }

/* ------------------------------------ consonant / vowel sorting: one letter */

.cv-prompt { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cv-letter {
  width: clamp(118px, 28vw, 164px); height: clamp(118px, 28vw, 164px);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 3px solid #dcdcdc; border-radius: 16px;
  box-shadow: var(--shadow-med);
  font-family: var(--font-family-smooth); font-size: clamp(4rem, 13vw, 5.6rem);
  line-height: 1; color: #3c3c3c;
}
.option-grid.cv-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
.option-card.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 0; min-width: clamp(118px, 24vw, 184px); padding: 16px 26px;
  border: 0; border-radius: 999px; background: #3aa8f2; color: #fff;
  font-family: var(--font-family-base); font-size: clamp(1rem, 3.4vw, 1.3rem);
  font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 5px 0 #1f8ed6, var(--shadow-low);
}
.option-card.pill:hover { transform: translateY(-2px); border-color: transparent; background: #2299e6; }
.option-card.pill.correct { background: var(--green-success); border-color: transparent; box-shadow: 0 5px 0 #48a802; }
.option-card.pill.wrong { background: var(--warning); border-color: transparent; box-shadow: 0 5px 0 #d63a3a; }
@media (max-width: 480px) {
  .option-grid.cv-pills { gap: 10px; }
  .option-card.pill { min-width: 0; flex: 1 1 88px; padding: 14px 12px; font-size: 0.98rem; }
}

/* --------------------------------------------- check / clear button icons */

.btn-ico { display: inline-block; font-size: 1.05em; line-height: 1; margin-right: 7px; vertical-align: -0.06em; }
.btn.is-retry { background: var(--teal); }
.btn.is-retry:hover { background: #1899d6; }

/* a tick or a cross sits on the corner of every checked box */
.slot { position: relative; }
.slot-mark {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-base); font-size: 0.78rem; font-weight: 900; line-height: 1;
  color: #fff; background: var(--green-success); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.slot.wrong .slot-mark { background: var(--warning); }

/* Alphabetize answers a wrong letter with a red shiver and no voice, so the
   round stays quiet while the child looks at the letter again. */
.slot.wrong.wiggle { animation: slot-wiggle 380ms ease-in-out 2; }
.slot.wrong .letter-tile { color: var(--dl-red, #ff4b4b); }
@keyframes slot-wiggle {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-7px) rotate(-3deg); }
  75% { transform: translateX(7px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .slot.wrong.wiggle { animation: none; }
}

/* Alphabetize: the board and the bank wear the question's font, and a whole
   alphabet board is a little tighter so 26 letters fit on a phone. */
.game-frame[data-alpha] .slot,
.game-frame[data-alpha] .letter-tile {
  font-family: var(--alpha-stack, var(--font-family-smooth));
}
.game-frame[data-alpha="whole"] .slot {
  width: 46px; height: 46px; border-width: 2px; border-radius: 9px; font-size: 1.5rem;
}
.game-frame[data-alpha="whole"] .letter-tile { --tile-size: 46px; }
.game-frame[data-alpha="whole"] .slots,
.game-frame[data-alpha="whole"] .bank { gap: 7px; }
@media (max-width: 549px) {
  .game-frame[data-alpha="whole"] .slot { width: 40px; height: 40px; font-size: 1.3rem; }
  .game-frame[data-alpha="whole"] .letter-tile { --tile-size: 40px; }
}

/* Rows already finished stay above the row in play, quietly greyed so the new
   row is the one that draws the eye. */
.alpha-board { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.alpha-done { gap: 7px; opacity: 0.85; }
.alpha-done .slot {
  width: 46px; height: 46px; border-style: solid; border-width: 2px; border-radius: 9px;
  border-color: var(--dl-hare); background: #ffffff; font-size: 1.4rem;
}
.alpha-done .letter-tile { cursor: default; pointer-events: none; }
@media (max-width: 549px) {
  .alpha-done { gap: 5px; }
  .alpha-done .slot { width: 40px; height: 40px; font-size: 1.25rem; }
}

/* Letter–sound: the letter sits in a white card and every choice is a speaker,
   so the answer is a sound rather than a picture. */
.prompt-tile {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; min-height: 92px; padding: 4px 18px; margin: 2px auto 16px;
  background: #ffffff; border: 2px solid var(--dl-swan); border-bottom: 4px solid var(--dl-swan);
  border-radius: 16px;
}
.prompt-tile .prompt-word { margin: 0; }

.option-card.sound {
  position: relative; background: var(--dl-blue); border: 0;
  border-bottom: 6px solid rgba(0, 0, 0, 0.18); border-radius: 18px; min-height: 96px;
}
.option-card.sound:hover { background: #3ec0ff; transform: none; }
/* The ring is the only sign of the press, and a blue ring on the blue card was
   invisible on a phone. White inside an ink outline reads on any screen. */
.option-card.sound:active { transform: translateY(3px); border-bottom-width: 3px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--dl-ink); }
.option-card.sound .spk { font-size: clamp(1.8rem, 6vw, 2.6rem); filter: brightness(0) invert(1); }
.option-card.sound.picked { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--dl-ink); }
.option-card.sound:focus-visible { outline: 3px solid var(--dl-ink); outline-offset: 5px; }
.option-card.sound.correct { background: var(--dl-green); border-bottom-color: var(--dl-green-deep); }
.option-card.sound.wrong { background: #ffe3e4; border-bottom-color: var(--dl-red-deep); }
.option-card.sound.wrong .spk { filter: none; color: var(--dl-red-deep); }

.option-mark {
  position: absolute; top: 4px; right: 10px;
  font-size: 1.2rem; font-weight: 900; color: var(--dl-red-deep);
}
.option-mark.ok { color: var(--dl-green-deep); }

.check-row { display: flex; justify-content: center; margin-top: 18px; }
@media (max-width: 720px) {
  .slot-mark { top: -7px; right: -7px; width: 19px; height: 19px; font-size: 0.68rem; }
}

/* Reading bingo: the word to read sits beside a board of pictures. */
.bingo-play { display: grid; gap: 14px; justify-items: center; }
.bingo-play.has-word .callout-word { margin: 0; }
.bingo-word { min-width: 118px; min-height: 96px; }
.bingo-word .prompt-word { font-size: clamp(2.2rem, 8vw, 3rem); }
.bingo-cell.pic-cell { padding: 0; overflow: hidden; border-width: 2px; background: #ffffff; }
.bingo-cell.pic-cell .pic-img { width: 100%; height: 100%; object-fit: contain; }
.bingo-cell.pic-cell .pic { font-size: clamp(1.6rem, 6vw, 2.4rem); }
.bingo-cell.pic-cell.called::after { font-size: 1rem; top: 0; right: 6px; background: var(--dl-green-pale); border-radius: 999px; padding: 0 4px; }
@media (min-width: 760px) {
  .bingo-play.has-word { grid-template-columns: 170px minmax(0, 1fr); align-items: start; justify-items: stretch; }
  .bingo-play.has-word .callout-word { display: flex; justify-content: center; padding-top: 10px; }
  .bingo-play.has-word .bingo-grid { margin: 0; }
}

/* Grammar: the words are the tiles and the part of speech is the box. */
.grammar-bank { gap: 8px; }
.grammar-word { width: auto; min-width: 58px; height: auto; padding: 10px 14px; }
.grammar-boxes { display: flex; flex-wrap: wrap; gap: 20px 26px; justify-content: center; padding: 6px 0; }
.grammar-box-column { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 110px; }
.grammar-box-label { font-weight: 800; font-size: 0.95rem; color: var(--dl-ink); }
.grammar-box-label.glyph { font-size: 1.5rem; }
/* Grammar puts the job on the word, so the box is headed by the word itself and
   the parts of speech are the tiles that travel. */
.grammar-box-word {
  font-weight: 800; font-size: 1rem; line-height: 1.15; color: var(--dl-ink);
  text-align: center; max-width: 122px; overflow-wrap: anywhere;
}
.grammar-part { min-width: 76px; font-weight: 800; }
.grammar-part.glyph { font-size: 1.5rem; line-height: 1; }
/* Both displays on: the symbol carries its name, so the pair is met as one. */
.grammar-part.both {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 10px; min-width: 82px;
}
.grammar-part .part-glyph { font-size: 1.45rem; line-height: 1; }
.grammar-part .part-name { font-size: 0.6rem; font-weight: 800; color: var(--dl-wolf); line-height: 1; }
.grammar-drop {
  position: relative; width: 122px; min-height: 70px; padding: 6px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  background: #ffffff; border: 3px solid #e3d6bf; border-radius: 12px;
}
.grammar-drop.over { border-color: var(--dl-blue); background: #eaf8ff; }
.grammar-drop.correct { border-color: var(--dl-green); background: var(--dl-green-pale); }
.grammar-drop.wrong { border-color: var(--dl-red); background: #ffe3e4; }
.grammar-drop .letter-tile { --tile-size: 44px; height: auto; padding: 6px 8px; font-size: 0.95rem; box-shadow: none; }
.grammar-drop .letter-tile.wrong { border-color: var(--dl-red); color: var(--dl-red-deep); }
.box-mark { position: absolute; top: -12px; right: -12px; font-size: 1.1rem; font-weight: 900; color: var(--dl-red-deep); }

/* ------------------------------------------------------- language switch
   Two languages, one small pill, living inside the profile card rather than
   floating over the page. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}
.switch-label { font-size: 0.86rem; font-weight: 800; color: #6b6b6b; }
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #f1f3ee;
}
.lang-switch button {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #4b4b4b;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  min-height: 32px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lang-switch button:hover { background: #eef7e6; }
.lang-switch button[aria-pressed="true"] { background: var(--green-success, #58cc02); color: #fff; }
.lang-switch button:focus-visible { outline: 3px solid var(--blue, #1cb0f6); outline-offset: 2px; }

/* ---------------------------------------------------------- install banner
   pwa.js shows this on the pages a parent reads, on a phone only, once Chrome
   has offered an install prompt (or on iOS, where it never will). It clears
   the safe area so the buttons are not behind the home indicator. */
.install-banner {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60; width: min(520px, calc(100% - 24px));
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 12px; border-radius: 20px;
  background: #fff; border: 2px solid var(--dl-green);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.install-banner-title { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--dl-ink); line-height: 1.35; }
.install-banner-actions { display: flex; gap: 8px; }
.install-banner-yes,
.install-banner-later {
  flex: 1 1 auto; min-height: 46px; cursor: pointer;
  border-radius: 14px; font-family: inherit; font-size: 0.95rem; font-weight: 900;
}
.install-banner-yes { border: 0; border-bottom: 4px solid var(--dl-green-deep); background: var(--dl-green); color: #fff; }
.install-banner-yes:active { transform: translateY(3px); border-bottom-width: 1px; }
.install-banner-yes[hidden] { display: none; }
.install-banner-later { border: 2px solid var(--dl-swan); background: #fff; color: #6b6b6b; }
.install-banner-later:hover { background: #f5f5f5; }
.install-banner-yes:focus-visible,
.install-banner-later:focus-visible { outline: 3px solid var(--dl-blue); outline-offset: 2px; }

/* Family sync: the two fields stack, and a failed link says why. */
.hub-sync-fields { display: grid; gap: 8px; margin: 8px 0; }
.hub-error { color: #b3261e; }