/* Craft & Learn — lesson, exercise and reward screens in the pixel style.
   Loaded after style.css; overrides the old purple theme. */
:root {
  --c-ink: #2b1d14; --c-cream: #fff6df; --c-cream-lo: #f0dfb5;
  --c-grass: #5fb336; --c-grass-hi: #8fd65a; --c-grass-lo: #3d7f22;
  --c-dirt: #8a5a35; --c-dirt-lo: #6b4226; --c-dirt-hi: #a6704a;
  --c-stone: #7d7d84; --c-stone-hi: #9a9aa3; --c-stone-lo: #5c5c63;
  --c-wood: #b8874f; --c-wood-lo: #8a6234; --c-wood-hi: #d4a56a;
  --c-ok: #8fd65a; --c-ok-lo: #3d7f22; --c-bad: #ff8a7a; --c-bad-lo: #a8322a;
  --c-safe-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
  --c-blk: 0 0 0 4px var(--c-ink), 0 6px 0 var(--c-ink);
}

/* ── screen + dirt backdrop ─────────────────── */
.lesson-screen, .reward-screen {
  font-family: "Rubik", "Nunito", sans-serif;
  background-color: var(--c-dirt);
  background-image: linear-gradient(45deg, var(--c-dirt-lo) 25%, transparent 25%), linear-gradient(-45deg, var(--c-dirt-hi) 25%, transparent 25%);
  background-size: 24px 24px, 32px 32px; background-position: 0 0, 12px 8px;
  color: var(--c-cream);
}

/* ── header: grass strip ─────────────────────── */
.lesson-screen .lesson-header {
  padding: calc(var(--c-safe-top) + 10px) 12px 14px; gap: 12px;
  background: var(--c-grass); border: 0;
  box-shadow: inset 0 -6px 0 var(--c-grass-lo), inset 0 6px 0 var(--c-grass-hi), 0 4px 0 var(--c-ink);
  position: relative; z-index: 2;
}
.lesson-screen .lesson-back {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  font-family: "Rubik", sans-serif; font-size: 20px; font-weight: 800; color: #fff;
  background: var(--c-stone); box-shadow: inset 3px 3px 0 var(--c-stone-hi), inset -3px -3px 0 var(--c-stone-lo), 0 0 0 3px var(--c-ink);
}
.lesson-screen .lesson-back:active { transform: translateY(2px); }
.lesson-screen .lesson-title-text { display: flex; flex-direction: column; color: #fff; line-height: 1.1; }
.lesson-screen .lesson-title-text .ru { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 20px; text-shadow: 2px 2px 0 var(--c-grass-lo); }
.lesson-screen .lesson-title-text .en { font-family: "Press Start 2P", monospace; font-size: 8px; opacity: .9; margin-top: 4px; }
.lesson-screen .lesson-step { display: flex; gap: 4px; }
.lesson-screen .lesson-step i { width: 14px; height: 14px; background: var(--c-grass-lo); box-shadow: 0 0 0 2px var(--c-ink); }
.lesson-screen .lesson-step i.done { background: #ffcf3a; }
.lesson-screen .lesson-step i.now { background: #fff; animation: cl-now 1s steps(2) infinite; }
@keyframes cl-now { 50% { background: #ffcf3a; } }
.lesson-screen .progress-track { display: none; }

.lesson-screen .exercise-area { padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); gap: 0; }

/* ── Leo + speech bubble ─────────────────────── */
.lesson-screen .leo-row { align-items: center; gap: 14px; margin-bottom: 16px; }
.lesson-screen .leo-ex { width: 64px; height: 64px; flex: none; font-size: 0; filter: drop-shadow(0 4px 0 rgba(43,29,20,.35)); }
.lesson-screen .leo-ex svg { width: 100%; height: 100%; display: block; }
.lesson-screen .leo-ex.react { animation: cl-hop .45s steps(3); }
@keyframes cl-hop { 40% { transform: translateY(-10px); } }
.lesson-screen .leo-bubble {
  position: relative; border: 0; background: var(--c-cream); color: var(--c-ink);
  font-family: "Rubik", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; padding: 10px 12px;
  box-shadow: 0 -4px 0 var(--c-ink), 0 4px 0 var(--c-ink), -4px 0 0 var(--c-ink), 4px 0 0 var(--c-ink), inset 0 -4px 0 var(--c-cream-lo);
}
.lesson-screen .leo-bubble::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -4px; width: 8px; height: 8px; background: var(--c-cream); box-shadow: -4px 0 0 var(--c-ink), 0 -4px 0 var(--c-ink), 0 4px 0 var(--c-ink); }
.lesson-screen .leo-bubble span { color: #b8541a; }

/* ── generic block card ──────────────────────── */
.lesson-screen .tap-card, .lesson-screen .fast-item, .lesson-screen .word-chip, .lesson-screen .count-num {
  border: 0 !important; border-radius: 0; background: var(--c-cream); color: var(--c-ink);
  box-shadow: inset 0 -6px 0 var(--c-cream-lo), var(--c-blk); transition: transform .08s steps(2);
}
.lesson-screen .tap-card:active, .lesson-screen .fast-item:active, .lesson-screen .word-chip:active, .lesson-screen .count-num:active {
  transform: translateY(4px); box-shadow: inset 0 -6px 0 var(--c-cream-lo), 0 0 0 4px var(--c-ink), 0 2px 0 var(--c-ink);
}
.lesson-screen .tap-card.correct, .lesson-screen .fast-item.hit, .lesson-screen .count-num.correct {
  background: var(--c-ok) !important; box-shadow: inset 0 -6px 0 var(--c-ok-lo), 0 0 0 4px var(--c-ok-lo), 0 6px 0 var(--c-ok-lo); color: var(--c-ink);
}
.lesson-screen .tap-card.wrong, .lesson-screen .fast-item.miss, .lesson-screen .count-num.wrong {
  background: var(--c-bad) !important; box-shadow: inset 0 -6px 0 var(--c-bad-lo), 0 0 0 4px var(--c-bad-lo), 0 6px 0 var(--c-bad-lo); color: var(--c-ink);
}

/* ── 1. listen & tap ─────────────────────────── */
.lesson-screen .listen-word {
  font-family: "Press Start 2P", monospace; font-size: clamp(22px, 7vw, 30px); color: var(--c-cream);
  text-shadow: 3px 3px 0 var(--c-ink); gap: 14px; margin: 4px 0 8px;
}
.lesson-screen .listen-speaker, .lesson-screen .hear-btn {
  border: 0; background: var(--c-stone); color: #fff;
  box-shadow: inset 4px 4px 0 var(--c-stone-hi), inset -4px -4px 0 var(--c-stone-lo), 0 0 0 4px var(--c-ink), 0 6px 0 var(--c-ink);
}
.lesson-screen .listen-speaker { width: 52px; height: 52px; font-size: 24px; }
.lesson-screen .listen-hint { font-family: "Rubik", sans-serif; font-weight: 700; color: #f3d9b8; font-size: 15px; margin-bottom: 16px; }
.lesson-screen .tap-grid { flex: 1; min-height: 0; grid-template-rows: repeat(2, minmax(120px, 1fr)); gap: 16px; }
.lesson-screen .tap-card { aspect-ratio: auto; }
.lesson-screen .tap-emoji { font-size: clamp(64px, 20vw, 96px); }
.lesson-screen .tap-word { color: var(--c-ink); font-family: "Rubik", sans-serif; font-size: 18px; }
.lesson-screen .hear-btn { margin-top: 22px; padding: 14px; font-family: "Rubik", sans-serif; font-weight: 800; font-size: 17px; }
.lesson-screen .hear-btn:active { transform: translateY(4px); }

/* ── 3. sentence: wooden sign + plank chips ──── */
.lesson-screen .sentence-display {
  border: 0; margin: 8px 0 26px; padding: 20px 14px;
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: clamp(22px, 6.5vw, 28px); line-height: 2; color: var(--c-cream);
  text-shadow: 2px 2px 0 var(--c-wood-lo);
  background: var(--c-wood);
  background-image: repeating-linear-gradient(var(--c-wood) 0 26px, var(--c-wood-lo) 26px 30px);
  box-shadow: inset 4px 4px 0 var(--c-wood-hi), inset -4px -4px 0 var(--c-wood-lo), var(--c-blk);
}
.lesson-screen .sentence-gap {
  border: 0 !important; min-width: 110px; height: 44px; line-height: 44px; padding: 0 12px; margin: 0 6px;
  font-family: "Rubik", sans-serif; font-size: inherit; color: var(--c-ink); text-shadow: none;
  background: var(--c-cream); box-shadow: 0 0 0 3px var(--c-ink);
}
.lesson-screen .sentence-gap.empty { background: var(--c-dirt-lo) !important; color: var(--c-dirt-hi) !important; }
.lesson-screen .word-chips { gap: 18px 14px; margin-top: 0; }
.lesson-screen .word-chip { padding: 16px 22px; font-family: "Rubik", sans-serif; font-weight: 800; font-size: 22px; min-width: 42%; text-align: center; }

/* ── 4. count ────────────────────────────────── */
.lesson-screen .count-display { gap: 18px; }
.lesson-screen .count-emoji-row { max-width: 340px; gap: 14px; }
.lesson-screen .count-emoji { font-size: clamp(64px, 18vw, 84px); animation-timing-function: steps(3); }
.lesson-screen .count-word { font-family: "Press Start 2P", monospace; font-size: 14px; color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-ink); text-align: center; line-height: 1.6; }
.lesson-screen .count-ru { font-family: "Rubik", sans-serif; font-weight: 700; color: #f3d9b8; font-size: 16px; }
.lesson-screen .count-nums { gap: 12px; padding: 8px 0 6px; }
.lesson-screen .count-num { max-width: none; height: 76px; font-family: "Press Start 2P", monospace; font-size: 26px; }

/* ── 5. fast tap ─────────────────────────────── */
.lesson-screen .fast-header { margin-bottom: 16px; gap: 10px; }
.lesson-screen .fast-target, .lesson-screen .fast-score { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 20px; color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-ink); }
.lesson-screen .fast-timer-track { height: 20px; border: 0; background: var(--c-dirt-lo); box-shadow: 0 0 0 3px var(--c-ink); margin: 0; }
.lesson-screen .fast-timer-fill { background: var(--c-grass); box-shadow: inset 0 -5px 0 var(--c-grass-lo); }
.lesson-screen .fast-grid { flex: 1; min-height: 0; grid-template-rows: repeat(3, minmax(88px, 1fr)); gap: 14px; }
.lesson-screen .fast-item { aspect-ratio: auto; font-size: clamp(56px, 17vw, 84px); }

/* ── reward ──────────────────────────────────── */
.reward-screen {
  justify-content: flex-start; padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  background-image: linear-gradient(#6fc3ff, #bfe6ff 210px, #8fd65a 210px 216px, #5fb336 216px 228px, #3d7f22 228px 234px, transparent 234px),
    linear-gradient(45deg, var(--c-dirt-lo) 25%, transparent 25%), linear-gradient(-45deg, var(--c-dirt-hi) 25%, transparent 25%);
  background-size: 100% 100%, 24px 24px, 32px 32px;
}
.reward-screen .reward-leo { width: 140px; height: 140px; margin: calc(var(--c-safe-top) + 64px) auto 8px; font-size: 0; animation: cl-bounce 1.2s steps(4) infinite; filter: drop-shadow(0 6px 0 rgba(43,29,20,.3)); }
.reward-screen .reward-leo svg { width: 100%; height: 100%; display: block; }
@keyframes cl-bounce { 50% { transform: translateY(-8px); } }
.reward-screen .reward-title { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 34px; color: var(--c-cream); text-shadow: 3px 3px 0 var(--c-ink); margin: 18px 0 10px; }
.reward-screen .stars-row { gap: 16px; margin-bottom: 18px; }
.reward-screen .star { width: 56px; height: 56px; font-size: 0; filter: none; transform: scale(.85); }
.reward-screen .star svg { width: 100%; height: 100%; display: block; }
.reward-screen .star.lit { animation: star-pop .4s steps(4); transform: none; }
.reward-screen .reward-blocks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 12px 6px; border: 0; margin: 6px 0;
  background: var(--c-stone); color: #fff; font-family: "Rubik", sans-serif; line-height: 1.2;
  box-shadow: inset 4px 4px 0 var(--c-stone-hi), inset -4px -4px 0 var(--c-stone-lo), var(--c-blk);
}
.reward-screen .reward-blocks div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reward-screen .reward-blocks b { font-size: 22px; font-weight: 800; text-shadow: 2px 2px 0 #3a3a40; }
.reward-screen .reward-blocks span { font-size: 12px; font-weight: 700; color: #e8e8ee; }
.reward-screen .reward-btns { gap: 18px; margin-top: 26px; }
.reward-screen .btn { font-family: "Rubik", sans-serif !important; font-weight: 800; font-size: 22px !important; min-height: 64px; border: 0; text-transform: none; }
.reward-screen .btn-green { background: var(--c-grass); color: #fff; text-shadow: 2px 2px 0 var(--c-grass-lo);
  box-shadow: inset 0 6px 0 var(--c-grass-hi), inset 0 -6px 0 var(--c-grass-lo), var(--c-blk); }
.reward-screen .btn-dark { background: var(--c-wood); color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-wood-lo);
  box-shadow: inset 0 6px 0 var(--c-wood-hi), inset 0 -6px 0 var(--c-wood-lo), var(--c-blk); }
.reward-screen .btn:active { transform: translateY(4px) !important; box-shadow: 0 0 0 4px var(--c-ink) !important; }

/* ── feedback pop ────────────────────────────── */
.feedback-overlay .fb {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 22px;
  background: var(--c-cream); box-shadow: 0 0 0 4px var(--c-ink), 0 8px 0 var(--c-ink);
  animation: cl-fb .9s steps(6) forwards;
}
.feedback-overlay .fb b { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 30px; }
.feedback-overlay .fb span { font-family: "Press Start 2P", monospace; font-size: 11px; color: var(--c-ink); }
.feedback-overlay .fb.ok b { color: var(--c-grass-lo); }
.feedback-overlay .fb.no b { color: var(--c-bad-lo); }
@keyframes cl-fb { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 25% { transform: translateY(0) scale(1.05); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lesson-screen *, .reward-screen *, .feedback-overlay * { animation: none !important; transition: none !important; }
}

/* ── splash ──────────────────────────────────── */
.splash { justify-content: center; gap: 22px;
  background: linear-gradient(#6fc3ff, #bfe6ff 62%, #8fd65a 62% 63%, #5fb336 63% 66%, #3d7f22 66% 67%, #8a5a35 67%); }
.splash .splash-leo { width: 120px; height: 120px; font-size: 0; animation: cl-bounce 1.2s steps(4) infinite; }
.splash .splash-leo svg { width: 100%; height: 100%; display: block; }
.splash .splash-title { font-family: "Press Start 2P", monospace; font-size: 22px; line-height: 1.6; text-align: center; color: #fff6df; text-shadow: 3px 3px 0 #2b1d14; }

/* sentence: chips fill the screen as a 2×2 grid with pictures */
.lesson-screen[data-ex="sentence"] .word-chips {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, 1fr); gap: 16px; width: 100%;
}
.lesson-screen[data-ex="sentence"] .word-chip {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 24px;
}
.lesson-screen .word-chip .chip-emoji { font-size: clamp(44px, 13vw, 64px); line-height: 1; }
.lesson-screen .word-chip.used { opacity: .35; }

.lesson-screen .tap-card, .lesson-screen .fast-item, .lesson-screen .count-num { background: var(--c-cream) !important; }
.lesson-screen .tap-card.correct, .lesson-screen .fast-item.hit, .lesson-screen .count-num.correct { background: var(--c-ok) !important; }
.lesson-screen .tap-card.wrong, .lesson-screen .fast-item.miss, .lesson-screen .count-num.wrong { background: var(--c-bad) !important; }

/* ════════ lesson v2: learn / yes-no / craft / letter / review ════════ */
.lesson-screen .big-btn {
  width: 100%; min-height: 64px; border: 0; cursor: pointer; flex: none;
  font-family: "Rubik", sans-serif; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 2px 2px 0 var(--c-grass-lo);
  background: var(--c-grass); box-shadow: inset 0 6px 0 var(--c-grass-hi), inset 0 -6px 0 var(--c-grass-lo), var(--c-blk);
  transition: transform .08s steps(2);
}
.lesson-screen .big-btn:active { transform: translateY(4px); }

/* big picture block shared by learn / yes-no / letter / review */
.lesson-screen .learn-card, .lesson-screen .yn-pic {
  width: calc(100% - 8px); margin: 6px 4px 16px; flex: 1; min-height: 0;
  background: var(--c-cream); color: var(--c-ink);
  box-shadow: inset 0 -6px 0 var(--c-cream-lo), var(--c-blk);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.lesson-screen .learn-card { cursor: pointer; }
.lesson-screen .learn-card .le { font-size: clamp(96px, 34vw, 150px); line-height: 1; }
.lesson-screen .learn-card .lw { font-family: "Press Start 2P", monospace; font-size: clamp(26px, 9vw, 38px); letter-spacing: 2px; }
.lesson-screen .learn-card .lr { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 26px; color: #b8541a; }
.lesson-screen .learn-card .lh { font-family: "Rubik", sans-serif; font-weight: 700; font-size: 14px; color: #8a6a4a; margin-top: 4px; }
.lesson-screen .learn-card.flip .le { animation: cl-card .4s steps(5); }
@keyframes cl-card { 0% { transform: scale(.4) rotate(-8deg); } 70% { transform: scale(1.12); } 100% { transform: none; } }
.lesson-screen .learn-dots { display: flex; gap: 12px; justify-content: center; margin: 2px 0 16px; flex: none; }
.lesson-screen .learn-dots i { width: 16px; height: 16px; background: var(--c-dirt-lo); box-shadow: 0 0 0 3px var(--c-ink); }
.lesson-screen .learn-dots i.on { background: #ffcf3a; }

/* yes / no */
.lesson-screen .yn-pic .pic-in { font-size: clamp(96px, 34vw, 150px); line-height: 1; animation: cl-card .35s steps(4); }
.lesson-screen .yn-pic .pic-cap { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 22px; color: #b8541a; }
.lesson-screen .yn-pic .pic-word { font-family: "Press Start 2P", monospace; font-size: clamp(28px, 10vw, 44px); }
.lesson-screen .yn-q { font-family: "Press Start 2P", monospace; font-size: clamp(16px, 5.4vw, 22px); line-height: 1.5; text-align: center; color: var(--c-cream); text-shadow: 3px 3px 0 var(--c-ink); margin: 4px 0 6px; flex: none; }
.lesson-screen .yn-ru, .lesson-screen .let-q { font-family: "Rubik", sans-serif; font-weight: 700; font-size: 17px; color: #f3d9b8; text-align: center; margin-bottom: 16px; flex: none; }
.lesson-screen .let-q { font-weight: 800; font-size: 19px; color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-ink); margin: 14px 0 12px; }
.lesson-screen .yn-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; flex: none; }
.lesson-screen .yn {
  min-height: 84px; border: 0; cursor: pointer; color: #fff; font-family: "Rubik", sans-serif; font-weight: 800; font-size: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-shadow: 2px 2px 0 rgba(43,29,20,.45);
  transition: transform .08s steps(2);
}
.lesson-screen .yn small { font-family: "Press Start 2P", monospace; font-size: 9px; opacity: .9; text-shadow: none; }
.lesson-screen .yn.yes { background: var(--c-grass); box-shadow: inset 0 6px 0 var(--c-grass-hi), inset 0 -6px 0 var(--c-grass-lo), var(--c-blk); }
.lesson-screen .yn.no { background: #e2563f; box-shadow: inset 0 6px 0 #ff8a74, inset 0 -6px 0 #a8322a, var(--c-blk); }
.lesson-screen .yn:active { transform: translateY(4px); }
.lesson-screen .yn.right { outline: 6px solid #ffcf3a; outline-offset: 3px; }
.lesson-screen .yn.wrong { filter: brightness(.6) saturate(.6); }
.lesson-screen .yn.glow { outline: 6px solid #ffcf3a; outline-offset: 3px; animation: cl-glow .5s steps(2) infinite; }
@keyframes cl-glow { 50% { outline-color: #fff6df; } }

/* craft the word */
.lesson-screen .craft-pic { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 18px; flex: none; }
.lesson-screen .craft-pic .e { font-size: clamp(88px, 28vw, 120px); line-height: 1; }
.lesson-screen .craft-pic .r { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 28px; color: var(--c-cream); text-shadow: 3px 3px 0 var(--c-ink); }
.lesson-screen .craft-slots { display: flex; gap: 8px; justify-content: center; width: 100%; margin-bottom: 14px; flex: none; }
.lesson-screen .slot {
  flex: 1; max-width: 58px; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--c-dirt-lo); box-shadow: inset 4px 4px 0 #4f2f1a, inset -4px -4px 0 var(--c-dirt-hi), 0 0 0 3px var(--c-ink);
  font-family: "Press Start 2P", monospace; font-size: clamp(16px, 5.4vw, 22px); color: var(--c-ink);
}
.lesson-screen .slot.fill { background: var(--c-cream); box-shadow: inset 0 -5px 0 var(--c-cream-lo), 0 0 0 3px var(--c-ink); animation: cl-card .3s steps(4); }
.lesson-screen .craft-blocks { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 22px 16px; width: 100%; flex: 1; padding: 6px 0 12px; }
.lesson-screen .lb {
  width: clamp(64px, 19vw, 82px); aspect-ratio: 1; border: 0; cursor: pointer;
  font-family: "Press Start 2P", monospace; font-size: clamp(20px, 6.5vw, 28px); color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-wood-lo);
  background: var(--c-wood); box-shadow: inset 4px 4px 0 var(--c-wood-hi), inset -4px -4px 0 var(--c-wood-lo), var(--c-blk);
  transition: transform .08s steps(2);
}
.lesson-screen .lb:active { transform: translateY(4px); }
.lesson-screen .lb.used { opacity: .2; pointer-events: none; }
.lesson-screen .lb.shake { animation: mc-wrong .3s; background: #e2563f; }

/* first letter + review options */
.lesson-screen .let-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; flex: none; margin-bottom: 4px; }
.lesson-screen .lo, .lesson-screen .opt {
  border: 0; cursor: pointer; background: var(--c-cream); color: var(--c-ink);
  box-shadow: inset 0 -6px 0 var(--c-cream-lo), var(--c-blk); transition: transform .08s steps(2);
}
.lesson-screen .lo { aspect-ratio: 1; font-family: "Press Start 2P", monospace; font-size: clamp(30px, 10vw, 44px); }
.lesson-screen .lo:active, .lesson-screen .opt:active { transform: translateY(4px); }
.lesson-screen .lo.right, .lesson-screen .opt.right { background: var(--c-ok); box-shadow: inset 0 -6px 0 var(--c-ok-lo), 0 0 0 4px var(--c-ok-lo), 0 6px 0 var(--c-ok-lo); }
.lesson-screen .lo.wrong, .lesson-screen .opt.wrong { background: var(--c-bad); box-shadow: inset 0 -6px 0 var(--c-bad-lo), 0 0 0 4px var(--c-bad-lo), 0 6px 0 var(--c-bad-lo); animation: mc-wrong .3s; }
.lesson-screen .opt.glow { outline: 6px solid #ffcf3a; outline-offset: 3px; }
.lesson-screen .rv-opts { width: 100%; flex: none; display: grid; gap: 16px; margin-bottom: 4px; }
.lesson-screen .rv-opts.words { grid-template-columns: 1fr; }
.lesson-screen .rv-opts.pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lesson-screen .opt { min-height: 66px; font-family: "Rubik", sans-serif; font-weight: 800; font-size: 26px; }
.lesson-screen .opt.pic { aspect-ratio: 1; font-size: clamp(44px, 14vw, 64px); }
.lesson-screen[data-ex="letter"] .hear-btn, .lesson-screen[data-ex="letter"] .let-q { flex: none; }
.lesson-screen[data-ex="letter"] .hear-btn { margin-top: 0; }

/* home: words counter */
.h2 .stat.wide { grid-column: 1 / -1; }
.h2 .stat small { font-size: 12px; font-weight: 700; color: #e8e8ee; }

/* sentence step: picture of the missing word */
.lesson-screen .sent-pic { text-align: center; font-size: clamp(72px, 22vw, 100px); line-height: 1; margin: 0 0 8px; flex: none; }

/* hearing helpers: replay + slow, written word hint, learn-card highlight */
.lesson-screen .hear-row { display: flex; gap: 14px; width: 100%; margin-top: 10px; flex: none; }
.lesson-screen .hear-row .hear-btn { margin-top: 0; }
.lesson-screen .hear-row .hear-btn.slow { width: 84px; flex: none; font-size: 26px; }
.lesson-screen[data-ex="letter"] .hear-row { margin-top: 0; }
.lesson-screen .let-word {
  flex: none; text-align: center; margin: -4px 0 12px; min-height: 34px; opacity: 0; transition: opacity .2s steps(3);
  font-family: "Press Start 2P", monospace; font-size: clamp(22px, 7vw, 30px); letter-spacing: 3px; color: var(--c-cream); text-shadow: 3px 3px 0 var(--c-ink);
}
.lesson-screen .let-word.show { opacity: 1; }
.lesson-screen .let-word b, .lesson-screen .learn-card .lw b { color: #ffcf3a; text-shadow: 3px 3px 0 var(--c-ink); }
.lesson-screen .learn-card .lw b { color: #e0a000; text-shadow: 3px 3px 0 var(--c-cream-lo); }
.lesson-screen .lo.glow { outline: 6px solid #ffcf3a; outline-offset: 3px; animation: cl-glow .5s steps(2) infinite; }
.lesson-screen .learn-card { position: relative; }
.lesson-screen .card-slow {
  position: absolute; right: 12px; bottom: 12px; width: 56px; height: 56px; border: 0; cursor: pointer; font-size: 26px; background: var(--c-stone);
  box-shadow: inset 4px 4px 0 var(--c-stone-hi), inset -4px -4px 0 var(--c-stone-lo), 0 0 0 3px var(--c-ink);
}
.lesson-screen .yn-q { cursor: pointer; }
.lesson-screen .hear-row .hear-btn:not(.slow) { flex: 1; width: auto; min-width: 0; }

/* ════════ new games ════════ */
.lesson-screen .hear-btn.mini { width: 56px; min-height: 44px; padding: 6px; flex: none; margin: 0; font-size: 22px; }

/* balloon pop */
.lesson-screen .bal-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex: none; }
.lesson-screen .bal-top .hear-btn { margin: 0; flex: 1; width: auto; font-size: 16px; }
.lesson-screen .bal-prog { display: flex; gap: 6px; flex: none; }
.lesson-screen .bal-prog i { width: 16px; height: 16px; background: var(--c-dirt-lo); box-shadow: 0 0 0 2px var(--c-ink); }
.lesson-screen .bal-prog i.on { background: #ffcf3a; }
.lesson-screen .bal-prog i.now { background: #fff; }
.lesson-screen .bal-sky {
  position: relative; flex: 1; min-height: 340px; overflow: hidden; touch-action: manipulation;
  background: linear-gradient(#6fc3ff, #bfe6ff 75%, #8fd65a 75% 78%, #5fb336 78%);
  box-shadow: 0 0 0 4px var(--c-ink), 0 6px 0 var(--c-ink);
}
.lesson-screen .bal {
  position: absolute; bottom: -120px; width: 76px; height: 76px; cursor: pointer; will-change: transform;
  animation: cl-rise var(--dur, 8s) linear infinite; animation-delay: var(--delay, 0s);
}
.lesson-screen .bal .b {
  width: 100%; height: 100%; display: grid; place-items: center; background: var(--c);
  box-shadow: inset 5px 5px 0 var(--hi), inset -5px -5px 0 var(--lo), 0 0 0 3px var(--c-ink);
}
.lesson-screen .bal .e { font-size: 40px; line-height: 1; filter: drop-shadow(2px 2px 0 rgba(43,29,20,.3)); }
.lesson-screen .bal::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 38px; margin-left: -1px; background: var(--c-ink); }
.lesson-screen .bal.glow .b { outline: 5px solid #ffcf3a; outline-offset: 3px; }
.lesson-screen .bal .b.wob { animation: mc-wrong .3s; }
@keyframes cl-rise { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--rise, 600px))); } }

/* bingo */
.lesson-screen .bingo-call { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex: none; }
.lesson-screen .bingo-call .hear-btn { margin: 0; flex: 1; width: auto; font-size: 16px; }
.lesson-screen .bingo-call b { font-family: "Press Start 2P", monospace; font-size: 13px; color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-ink); }
.lesson-screen .bingo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1; min-height: 0; align-content: start; }
.lesson-screen .bgc {
  position: relative; aspect-ratio: 1; border: 0; cursor: pointer; background: var(--c-cream); color: var(--c-ink); font-size: clamp(44px, 14vw, 66px);
  box-shadow: inset 0 -6px 0 var(--c-cream-lo), var(--c-blk); transition: transform .08s steps(2);
}
.lesson-screen .bgc:active { transform: translateY(4px); }
.lesson-screen .bgc.on { background: var(--c-ok); box-shadow: inset 0 -6px 0 var(--c-ok-lo), 0 0 0 4px var(--c-ok-lo), 0 6px 0 var(--c-ok-lo); }
.lesson-screen .bgc.on::after { content: "✓"; position: absolute; right: 6px; top: 2px; font-family: "Rubik", sans-serif; font-weight: 800; font-size: 28px; color: #fff; text-shadow: 2px 2px 0 var(--c-ok-lo); }
.lesson-screen .bgc.line { outline: 6px solid #ffcf3a; outline-offset: 2px; }
.lesson-screen .bgc.glow { outline: 6px solid #ffcf3a; outline-offset: 3px; animation: cl-glow .5s steps(2) infinite; }
.lesson-screen .bgc.shake { animation: mc-wrong .3s; background: var(--c-bad); }
.lesson-screen[data-ex="bingo"] .exercise-area { position: relative; }
.lesson-screen .bingo-win {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: rgba(43, 29, 20, .6);
  font-family: "Press Start 2P", monospace; font-size: clamp(30px, 11vw, 46px); color: #ffcf3a; text-shadow: 4px 4px 0 var(--c-ink); animation: cl-card .4s steps(5);
}

/* what's missing */
.lesson-screen .ms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex: none; margin-bottom: 14px; }
.lesson-screen .msc {
  border: 0; cursor: pointer; background: var(--c-cream); color: var(--c-ink); padding: 8px 4px 10px; min-height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: inset 0 -6px 0 var(--c-cream-lo), var(--c-blk);
}
.lesson-screen .msc .e { font-size: clamp(56px, 17vw, 80px); line-height: 1; }
.lesson-screen .msc small { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 17px; }
.lesson-screen .msc.gone { background: #3a2a1c; color: #8a6a4a; box-shadow: inset 4px 4px 0 #2a1c10, inset -4px -4px 0 #5a4430, 0 0 0 4px var(--c-ink), 0 6px 0 var(--c-ink); }
.lesson-screen .msc.gone .e { font-family: "Press Start 2P", monospace; font-size: 40px; animation: cl-glow .6s steps(2) infinite; }
.lesson-screen .ms-q { font-family: "Rubik", sans-serif; font-weight: 800; font-size: 18px; text-align: center; color: var(--c-cream); text-shadow: 2px 2px 0 var(--c-ink); margin: 2px 0 10px; flex: none; }
.lesson-screen .ms-bar { height: 16px; background: var(--c-dirt-lo); box-shadow: 0 0 0 3px var(--c-ink); margin: 0 4px 16px; flex: none; }
.lesson-screen .ms-bar i { display: block; height: 100%; width: 100%; background: var(--c-grass); box-shadow: inset 0 -4px 0 var(--c-grass-lo); }
.lesson-screen .ms-bar.run i { animation: cl-bar 4.5s linear forwards; }
@keyframes cl-bar { from { width: 100%; } to { width: 0; } }
.lesson-screen .ms-opts { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: none; }
.lesson-screen .ms-opts.on { display: grid; }
.lesson-screen[data-ex="missing"] .ms-opts.on + * { display: none; }
.lesson-screen[data-ex="missing"] .ms-bar:has(+ .ms-opts.on) { display: none; }

/* build a creature */
.lesson-screen .cr-order {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex: none; margin-bottom: 10px;
  font-family: "Press Start 2P", monospace; font-size: clamp(20px, 6.6vw, 28px); color: var(--c-cream); text-shadow: 3px 3px 0 var(--c-ink);
}
.lesson-screen .cr-order b { color: #ffcf3a; }
.lesson-screen .cr-order.win { animation: cl-card .4s steps(5); }
.lesson-screen .cr-stage { display: flex; justify-content: center; flex: none; margin-bottom: 12px; }
.lesson-screen .cr-block {
  width: clamp(130px, 40vw, 170px); height: clamp(130px, 40vw, 170px); display: grid; place-items: center; background: #7d7d84;
  box-shadow: inset 6px 6px 0 rgba(255,255,255,.35), inset -6px -6px 0 rgba(0,0,0,.28), 0 0 0 4px var(--c-ink), 0 8px 0 var(--c-ink); transition: background .15s steps(2);
}
.lesson-screen .cr-block .e { font-size: clamp(76px, 24vw, 104px); line-height: 1; filter: drop-shadow(3px 3px 0 rgba(43,29,20,.35)); }
.lesson-screen .cr-block.shake { animation: mc-wrong .3s; }
.lesson-screen .cr-label { font-family: "Press Start 2P", monospace; font-size: 10px; color: #f3d9b8; text-shadow: 2px 2px 0 var(--c-ink); margin: 6px 2px 10px; flex: none; }
.lesson-screen .cr-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; flex: none; }
.lesson-screen .sw, .lesson-screen .an {
  flex: 1; max-width: 80px; aspect-ratio: 1; border: 0; cursor: pointer; background: var(--c-cream);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 0 0 3px var(--c-ink), 0 5px 0 var(--c-ink); transition: transform .08s steps(2);
}
.lesson-screen .an { font-size: clamp(36px, 11vw, 48px); }
.lesson-screen .sw:active, .lesson-screen .an:active { transform: translateY(3px); }
.lesson-screen .sw.sel, .lesson-screen .an.sel { outline: 5px solid #ffcf3a; outline-offset: 3px; }
.lesson-screen[data-ex="creature"] .big-btn { margin-top: auto; }

/* flex column centres children: give the game containers the full width */
.lesson-screen .bal-top, .lesson-screen .bal-sky, .lesson-screen .bingo-call, .lesson-screen .bingo-grid,
.lesson-screen .ms-grid, .lesson-screen .ms-q, .lesson-screen .ms-bar, .lesson-screen .ms-opts,
.lesson-screen .cr-order, .lesson-screen .cr-stage, .lesson-screen .cr-row, .lesson-screen .cr-label { width: 100%; }
.lesson-screen .cr-label { text-align: left; }
.lesson-screen .bingo-grid { grid-template-rows: repeat(3, minmax(0, 1fr)); align-content: stretch; }
.lesson-screen .bgc { aspect-ratio: auto; height: 100%; }
.lesson-screen .ms-grid { flex: 1; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.lesson-screen .msc { min-height: 0; height: 100%; }