/* Styles for every game page (one file, sections per game). */

/* ---------- the standard game shell (Views/Play/_GameQuestion + _GameActions, js/core/game.js) ---------- */
/* question row: prompt + 🔊; then the "How to play" line */
.question [data-question]:focus { outline: none; }
.question [data-question]:focus-visible { outline: 3px dashed var(--focus); outline-offset: 6px; border-radius: var(--radius-s); }
.how-to { text-align: center; color: var(--ink-soft); font-size: var(--fs-s); font-weight: 700; margin: calc(-1 * var(--space-3)) auto var(--space-4); max-width: 60ch; }
.how-to__label { color: var(--ink); font-weight: 900; }
.question--left + .how-to { text-align: left; margin: 0 0 var(--space-4); }

/* the message line: "Great job! That is the Lion." / "That is the Cat. Try again!" */
.game-feedback {
  min-height: 1.5em;               /* reserve the line so the buttons never jump */
  margin: var(--space-4) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink-soft);
}
.game-feedback[data-tone="good"] { color: var(--good); }
.game-feedback[data-tone="try"] { color: var(--try); }
.game-feedback[data-tone="info"] { color: var(--ink); }

/* the 💡 line: a hint after two wrong tries, or how the answer works (rules, not AI) */
.game-explain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 62ch;
  margin: var(--space-3) auto 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  background: #fff8db;
  box-shadow: inset 0 0 0 2px #ffe08a;
  font-weight: 800;
  font-size: var(--fs-m);
  line-height: 1.35;
}
.game-explain[hidden] { display: none; }
.game-explain[data-kind="explain"] { background: #e9fbe9; box-shadow: inset 0 0 0 2px #b6eab8; }
.game-explain__icon { font-size: 1.6rem; }
.game-explain__text { flex: 1; }

/* the action bar: Start over | extras | Next (Next appears when the round is done) */
.game-feedback + .game-actions { margin-top: var(--space-3); }
.game-actions [data-next] { order: 99; }

.is-hint { box-shadow: 0 0 0 5px var(--sun), 0 0 24px 6px rgba(255, 210, 63, 0.8) !important; }
.is-away { opacity: 0 !important; }

/* ---------- picture quiz ---------- */
.quiz-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.quiz-options[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 640px) {
  .quiz-options, .quiz-options[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
.quiz-option { padding: var(--space-2); }
.quiz-option .card__visual { aspect-ratio: 1 / 1; }
.quiz-option .swatch { width: 82%; height: 82%; }
.quiz-option__name { opacity: 0; transition: opacity var(--dur-2); }
.show-names .quiz-option__name,
.is-complete .quiz-option__name { opacity: 1; }
.quiz-option[aria-disabled="true"] { cursor: default; }

/* ---------- ABC order ---------- */
.abc-slots, .abc-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0 auto var(--space-5);
  padding: 0;
  max-width: 980px;
}
.abc-slot, .abc-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, 11vw, 104px);
  aspect-ratio: 1;
  padding: 4px;
  border-radius: var(--radius-m);
  overflow: hidden;
}
[data-mode="full"] .abc-slot, [data-mode="full"] .abc-tile { width: clamp(56px, 8vw, 76px); }
[data-mode="medium"] .abc-slot, [data-mode="medium"] .abc-tile { width: clamp(64px, 9vw, 92px); }
.abc-slot {
  border: 4px dashed #c8bfae;
  background: rgba(255, 255, 255, 0.7);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2);
}
.abc-slot__num { font-weight: 900; font-size: 1rem; color: #7d725e; }
.abc-slot.is-filled { border-style: solid; border-color: var(--green); background: #fff; }
.abc-tile {
  border: 0;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.abc-tile:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: var(--shadow-2); }
.abc-tile img, .abc-slot img { width: 100%; height: 100%; object-fit: contain; }
.abc-tile .letter-face, .abc-slot .letter-face { font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* ---------- letter basket ---------- */
.basket-targets { display: flex; justify-content: center; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.basket-target {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: var(--shadow-1);
  font-size: 2.4rem;
  font-weight: 900;
  transition: background-color var(--dur-2);
}
.basket-target__tick {
  position: absolute;
  right: -10px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-deep);
  color: #fff;
  font-size: 1.1rem;
  transform: scale(0);
  transition: transform var(--dur-3) var(--ease-spring);
}
.basket-target.is-done { background: #dcffe6; }
.basket-target.is-done .basket-target__tick { transform: scale(1); }
.basket-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 640px) { .basket-area { grid-template-columns: 1fr; justify-items: center; } }
/* 6, 9 or 12 letters (levels 1-3): 3 or 4 columns */
.basket-tiles[data-count="12"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 520px; }
.basket-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 420px;
  width: 100%;
}
.basket-tile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2);
}
.basket-tile:hover { transform: translateY(-4px) rotate(2deg); }
.basket-tile img { width: 100%; height: 100%; object-fit: contain; }
.basket-tile.is-used { opacity: 0.2; transform: scale(0.8); cursor: default; }
.basket-flyer { position: fixed; z-index: 85; margin: 0; pointer-events: none; }
.basket {
  position: relative;
  width: clamp(180px, 28vw, 240px);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-l);
  background: transparent;
  transition: transform var(--dur-2) var(--ease-spring);
}
.basket__svg { width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(80, 40, 0, 0.25)); }
.basket__count {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  padding: 2px 14px;
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 900;
  font-size: var(--fs-m);
  box-shadow: var(--shadow-1);
}

/* ---------- number match ---------- */
.match-board {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 760px;
  margin: 0 auto;
  align-items: start;
}
.match-numbers, .match-words { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.match-num {
  display: block;
  width: clamp(72px, 16vw, 96px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring);
}
.match-num .numeral { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.match-num:hover { transform: translateY(-3px) rotate(-3deg); }
.match-word { display: flex; align-items: center; gap: var(--space-3); }
.match-word__btn {
  flex: 1;
  min-height: clamp(72px, 16vw, 96px);
  padding: 0 var(--space-4);
  border: 4px dashed #c8bfae;
  border-radius: var(--radius-m);
  background: #fff;
  font-weight: 900;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  text-align: left;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2), background-color var(--dur-2);
}
.match-word__btn.is-matched { border-style: solid; border-color: var(--green); background: #e6ffed; }
.match-word__slot { flex: none; width: clamp(72px, 16vw, 96px); }
.match-word__slot:empty { display: none; }
.match-num.is-matched { cursor: default; }

/* ---------- spelling ---------- */
.spell-top { display: flex; align-items: center; justify-content: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.spell-question { flex: 1 1 260px; max-width: 460px; }
.spell-picture__frame {
  display: grid;
  place-items: center;
  width: clamp(150px, 30vw, 240px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-2);
}
.spell-picture__frame img { width: 100%; height: 100%; object-fit: contain; }
.spell-picture__frame.card--photo img { object-fit: cover; }
.spell-picture__frame .numeral { font-size: 5rem; }
.spell-slots, .spell-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0 auto var(--space-5);
  padding: 0;
  max-width: 900px;
}
.spell-slot {
  display: grid;
  place-items: center;
  width: clamp(48px, 10vw, 76px);
  aspect-ratio: 1;
  border: 0;
  border-bottom: 6px solid var(--blue-deep);
  border-radius: var(--radius-s) var(--radius-s) 4px 4px;
  background: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
  transition: transform var(--dur-2) var(--ease-spring);
}
.spell-slot.is-filled { border-bottom-color: var(--green); background: #e6ffed; }
.spell-slot__letter { display: block; }
.spell-slots.is-complete li { animation: bob 500ms ease-in-out 2; }
.spell-slots.is-complete li:nth-child(2) { animation-delay: 60ms; }
.spell-slots.is-complete li:nth-child(3) { animation-delay: 120ms; }
.spell-slots.is-complete li:nth-child(4) { animation-delay: 180ms; }
.spell-slots.is-complete li:nth-child(5) { animation-delay: 240ms; }
.spell-slots.is-complete li:nth-child(6) { animation-delay: 300ms; }
.spell-slots.is-complete li:nth-child(n+7) { animation-delay: 360ms; }
html.calm .spell-slots.is-complete li { animation: none; }
.spell-tile {
  width: clamp(64px, 10vw, 76px); /* a tap target: never below --tap */
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--radius-m);
  color: #fff;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2);
}
.spell-tiles li:nth-child(5n + 1) .spell-tile { background: #e8590c; }
.spell-tiles li:nth-child(5n + 2) .spell-tile { background: #1b64b5; }
.spell-tiles li:nth-child(5n + 3) .spell-tile { background: #13803d; }
.spell-tiles li:nth-child(5n + 4) .spell-tile { background: #6a3fc4; }
.spell-tiles li:nth-child(5n + 5) .spell-tile { background: #b8236b; }
.spell-tile:hover { transform: translateY(-4px) rotate(-3deg); }
.spell-tile.is-used { opacity: 0.18; transform: scale(0.8); cursor: default; }
[data-level="hard"] .spell-tile { width: clamp(44px, 8vw, 60px); font-size: clamp(1.3rem, 4vw, 1.9rem); }

/* ---------- maths ---------- */
.sum { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 900; letter-spacing: 0.04em; }
.sum__gap {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  padding: 0 0.15em;
  border: 5px dashed var(--sun-deep);
  border-radius: var(--radius-m);
  color: var(--orange-deep);
}
.sum__gap.is-filled { border-style: solid; border-color: var(--green); color: var(--green-deep); background: #e6ffed; }
.dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin: 0 auto var(--space-5); max-width: 720px; }
.dots__group { display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(5 * 28px + 4 * 8px + 2 * var(--space-3)); padding: var(--space-3); border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.dots__sign { font-size: 2.4rem; font-weight: 900; }
.dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb27a, var(--orange-deep)); }
.dots__group--1 .dot { background: radial-gradient(circle at 35% 35%, #8fd3ff, var(--blue-deep)); }
.dot--gone { position: relative; opacity: 0.3; }
.dot--gone::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-weight: 900; font-size: 1.1rem; }
.answer-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (max-width: 560px) { .answer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.answer {
  width: 100%;
  min-height: 96px;
  border: 0;
  border-radius: var(--radius-l);
  background: #fff;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 900;
  box-shadow: 0 7px 0 #d9d2c3, var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2), opacity var(--dur-2);
}
.answer:hover { transform: translateY(-4px); box-shadow: 0 10px 0 #d9d2c3, var(--shadow-2); }
.answer:active { transform: translateY(6px) scale(0.97); box-shadow: 0 1px 0 #d9d2c3; }
.answer[aria-disabled="true"] { cursor: default; }

/* ---------- tic tac toe ---------- */
.ttt-status { font-size: var(--fs-l); }
.ttt-wrap { position: relative; width: min(100%, 420px); margin: 0 auto; }
.ttt-board {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-l);
  background: var(--purple-deep);
  box-shadow: var(--shadow-2);
}
.ttt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ttt-cell {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background: #fff;
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2);
}
.ttt-cell:not([aria-disabled="true"]):hover { transform: scale(1.04); background: #fff8e1; }
.ttt-cell:not([aria-disabled="true"]):active { transform: scale(0.94); }
.ttt-cell[aria-disabled="true"] { cursor: default; }
.ttt-cell.is-win { background: #fff3b0; }
.ttt-mark { width: 100%; height: 100%; }
.ttt-x, .ttt-o {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 320ms ease-out forwards;
}
.ttt-x { stroke: var(--orange-deep); }
.ttt-x--2 { animation-delay: 180ms; }
.ttt-o { stroke: var(--blue-deep); animation-duration: 480ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }
html.calm .ttt-x, html.calm .ttt-o { animation: none; stroke-dashoffset: 0; }
.ttt-line { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; overflow: visible; }
.ttt-line line { stroke: var(--sun); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)); }
.ttt-line.is-drawn line { opacity: 1; animation: draw 520ms ease-out 150ms forwards; }
html.calm .ttt-line.is-drawn line { animation: none; stroke-dashoffset: 0; }
.ttt-score { display: flex; justify-content: center; gap: var(--space-4); margin: var(--space-5) 0 0; flex-wrap: wrap; }
.ttt-score div { min-width: 110px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); text-align: center; }
.ttt-score dt { font-weight: 800; font-size: var(--fs-s); }
.ttt-score dd { margin: 0; font-size: var(--fs-l); font-weight: 900; }
.ttt-score__x { color: var(--orange-deep); font-weight: 900; }
.ttt-score__o { color: var(--blue-deep); font-weight: 900; }

/* ---------- photo puzzle ---------- */
.photo-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 480px) { .photo-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.photo-pick {
  display: block;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.photo-pick:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow-2); }
.photo-pick:active { transform: scale(0.95); }
.photo-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius-m) - 6px); }
.photo-pick__name { display: block; padding-top: var(--space-1); font-weight: 800; }
.puzzle-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--space-5); }
.puzzle {
  --size: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  width: min(100%, 560px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: #fff;
}
.puzzle-tile {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #eee;
  background-repeat: no-repeat;
}
.puzzle-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95);
  transition: opacity 900ms ease;
  pointer-events: none;
}
.puzzle-tile.is-selected { z-index: 2; box-shadow: inset 0 0 0 5px var(--blue-deep) !important; transform: none; }
.puzzle-tile.is-drop-ready { animation: none; }
.puzzle-tile.is-drop-hover { box-shadow: inset 0 0 0 5px var(--sun-deep) !important; transform: none !important; }
.puzzle.is-solved .puzzle-tile::after { opacity: 0; }
.puzzle.is-solved { animation: solved-glow 1.6s ease-out 2; }
@keyframes solved-glow {
  0% { box-shadow: var(--shadow-2), 0 0 0 0 rgba(255, 210, 63, 0.9); }
  60% { box-shadow: var(--shadow-2), 0 0 0 18px rgba(255, 210, 63, 0); }
  100% { box-shadow: var(--shadow-2), 0 0 0 0 rgba(255, 210, 63, 0); }
}
.drag-ghost .puzzle-tile { box-shadow: 0 0 0 4px #fff; }
.puzzle-preview { margin: 0; width: clamp(130px, 22vw, 200px); text-align: center; }
.puzzle-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
.puzzle-preview figcaption { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); margin-top: var(--space-1); }

/* ---------- memory ---------- */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 540px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* 4 pairs: 4 x 2; 6 pairs: 4 x 3 (3 x 4 on phones); 8 pairs: 4 x 4; 10 pairs: 5 x 4 */
.memory-grid[data-pairs="4"] { max-width: 520px; }
@media (max-width: 480px) {
  .memory-grid[data-pairs="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 380px; }
}
@media (min-width: 700px) {
  .memory-grid[data-pairs="10"] { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 660px; }
}
/* the peek hint: cards turn over for a moment, with a glow so it reads as a peek */
.memory-card.is-peek .memory-card__front { box-shadow: 0 0 0 5px var(--sun), var(--shadow-1); }
.memory-card {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  background: none;
  perspective: 900px;
}
.memory-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease-spring);
}
.memory-card.is-flipped .memory-card__inner { transform: rotateY(180deg); }
.memory-card:not(.is-flipped):hover .memory-card__inner { transform: rotateY(-12deg) translateY(-4px); }
.memory-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-m);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.memory-card__back {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25) 6px, transparent 7px) 0 0 / 28px 28px,
    linear-gradient(150deg, var(--purple) 0%, var(--purple-deep) 100%);
}
.memory-card__q { font-size: clamp(2rem, 7vw, 3rem); font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
.memory-card__front { transform: rotateY(180deg); background: #fff; padding: 6px; }
.memory-card__visual { display: grid; place-items: center; width: 100%; flex: 1; min-height: 0; overflow: hidden; border-radius: calc(var(--radius-m) - 6px); }
.memory-card__visual img { width: 100%; height: 100%; object-fit: contain; }
.memory-card__front.card--photo .memory-card__visual img { object-fit: cover; }
.memory-card__visual .numeral { font-size: clamp(1.6rem, 6vw, 2.6rem); }
.memory-card__name { font-size: clamp(0.7rem, 2.2vw, 0.95rem); font-weight: 800; line-height: 1.1; padding-top: 4px; text-align: center; }
.memory-card.is-matched .memory-card__front { box-shadow: 0 0 0 4px var(--green), 0 0 18px 4px var(--good-glow); }
.memory-card.is-matched { cursor: default; }
html.calm .memory-card__inner { transition: none; transform: none !important; }
html.calm .memory-card__front { transform: none; opacity: 0; transition: opacity 200ms; }
html.calm .memory-card__back { transition: opacity 200ms; }
html.calm .memory-card.is-flipped .memory-card__front { opacity: 1; }
html.calm .memory-card.is-flipped .memory-card__back { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .memory-card__inner { transition: none; transform: none !important; }
  .memory-card__front { transform: none; opacity: 0; }
  .memory-card.is-flipped .memory-card__front { opacity: 1; }
  .memory-card.is-flipped .memory-card__back { opacity: 0; }
}

/* ---------- clock ---------- */
.clock-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5); }
.clock { width: min(78vw, 340px); height: auto; filter: drop-shadow(0 12px 18px rgba(43, 45, 66, 0.2)); }
.clock__tick { stroke: #c9b99a; stroke-width: 2; stroke-linecap: round; }
.clock__tick--major { stroke: var(--ink); stroke-width: 4; }
.clock__num { font: 900 19px var(--font); fill: var(--ink); text-anchor: middle; }
.clock__hand line { stroke-linecap: round; }
.clock__hand--hour line { stroke: var(--ink); stroke-width: 9; }
/* the clock hint makes the short hand glow */
.clock__hand--hour.is-hint { box-shadow: none !important; }
.clock__hand--hour.is-hint line { stroke: var(--sun-deep); stroke-width: 13; filter: drop-shadow(0 0 6px var(--sun)); }
.clock__hand--minute line { stroke: var(--orange-deep); stroke-width: 6; }
.clock__cap { fill: var(--ink); }
.clock-side { flex: 1 1 300px; max-width: 460px; }
.clock-words { min-height: 1.6em; font-size: var(--fs-m); font-weight: 900; color: var(--green-deep); }
.answer-options--clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answer--time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-2); }
.answer__time { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.answer__words { font-size: var(--fs-xs); font-weight: 800; color: var(--ink-soft); }

/* ---------- number games for Class 1-3: shared pieces (Views/Play/_NumberPad, js/core/entry.js) ---------- */
/* the 💡 line when it shows the answer after two tries (game.js reveal) */
.game-explain[data-kind="answer"] { background: #eef6ff; box-shadow: inset 0 0 0 2px #b9dcff; }

/* the board, with the number pad beside it on wide screens and under it on phones */
.pad-layout { display: grid; gap: var(--space-5); justify-items: center; align-items: center; max-width: 900px; margin: 0 auto; }
.pad-layout__board { display: grid; gap: var(--space-4); justify-items: center; width: 100%; min-width: 0; }
.pad-layout__pad { display: grid; gap: var(--space-3); justify-items: center; }
@media (min-width: 900px) {
  .pad-layout { grid-template-columns: minmax(0, 1fr) auto; }
}

.numpad { display: grid; grid-template-columns: repeat(3, var(--tap)); gap: var(--space-2); justify-content: center; }
.numpad__key {
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--radius-m);
  background: #fff;
  color: var(--ink);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 0 #d9d2c3, var(--shadow-1);
  transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-1);
  touch-action: manipulation;
  user-select: none;
}
.numpad__key:hover { transform: translateY(-2px); }
.numpad__key:active { transform: translateY(4px) scale(0.95); box-shadow: 0 1px 0 #d9d2c3; }
.numpad__key.is-pressed { animation: key-press 240ms var(--ease-out); }
.numpad__key--back { background: #ffeee6; box-shadow: 0 5px 0 #f3b9a5, var(--shadow-1); }
.numpad__key--ok { background: var(--green-deep); color: #fff; box-shadow: 0 5px 0 #0b5a2a, var(--shadow-1); font-size: 2rem; }
.game-stage.is-complete .numpad { opacity: 0.55; }
@keyframes key-press { from { transform: translateY(4px) scale(0.92); } to { transform: none; } }
html.calm .numpad__key.is-pressed { animation: none; }
@media (prefers-reduced-motion: reduce) { .numpad__key.is-pressed { animation: none; } }

/* a box the child types into: dashed while empty, glowing while active, green once right */
.digit-box {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  min-height: 1.5em;
  padding: 0 0.15em;
  border: 3px dashed #a39a86;
  border-radius: var(--radius-s);
  background: #fffdf6;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: box-shadow var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
}
.digit-box:empty::after { content: "?"; color: var(--ink-soft); font-size: 0.8em; }
.digit-box.is-active { border-style: solid; border-color: var(--blue-deep); background: #eef6ff; animation: box-glow 1.6s ease-in-out infinite; animation-play-state: var(--loops); }
.digit-box.is-active:empty::after { content: ""; width: 3px; height: 0.9em; background: var(--blue-deep); animation: caret-blink 1s steps(1) infinite; animation-play-state: var(--loops); }
.digit-box.is-wrong { border-color: var(--try); background: #fff1ea; color: var(--try); }
.digit-box.is-filled { border-style: solid; border-color: var(--green); background: #e6ffed; color: var(--green-deep); animation: none; }
@keyframes box-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(63, 169, 245, 0.35); } 50% { box-shadow: 0 0 0 8px rgba(63, 169, 245, 0.15); } }
@keyframes caret-blink { 50% { opacity: 0; } }

/* the 💡 picture aids: base-ten blocks (js/core/blocks.js) and number lines (js/core/numberline.js) */
.hint-aid { width: 100%; max-width: 720px; margin: 0 auto; padding: var(--space-3); border-radius: var(--radius-m); background: #fff8db; box-shadow: inset 0 0 0 2px #ffe08a; }
.hint-aid[hidden] { display: none; }
.hint-aid__note { margin: var(--space-2) 0 0; text-align: center; font-weight: 800; font-size: var(--fs-m); }
.hint-aid__actions { margin: var(--space-3) 0 0; text-align: center; }

.blocks-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: var(--space-3); }
.blocks { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: #fff; box-shadow: var(--shadow-1); }
.blocks[hidden] { display: none; }
.blocks--made { background: #e6ffed; }
.blocks__label { font-weight: 900; font-size: var(--fs-m); }
.blocks__set { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; max-width: 260px; min-height: 16px; }
.blocks__group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; }
.blocks__group--cube { max-width: calc(5 * 14px + 4 * 3px); }
.blocks__cube { width: 14px; height: 14px; border-radius: 3px; background: var(--orange); box-shadow: inset 0 0 0 2px var(--orange-deep); }
.blocks__rod { width: 14px; height: 120px; border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--blue) 0 10px, var(--blue-deep) 10px 12px); box-shadow: inset 0 0 0 2px var(--blue-deep); }
.blocks__flat { width: 60px; height: 60px; border-radius: 4px; background: repeating-linear-gradient(to right, var(--purple) 0 4px, var(--purple-deep) 4px 6px); box-shadow: inset 0 0 0 2px var(--purple-deep); }

.numline { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.numline__axis { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.numline__tick { stroke: var(--ink); stroke-width: 3; }
.numline__label { font-family: var(--font); font-size: 30px; font-weight: 900; fill: var(--ink); }
.numline__unknown { fill: #fff; stroke: var(--blue-deep); stroke-width: 3; stroke-dasharray: 7 5; }
.numline__unknown-text { font-family: var(--font); font-size: 30px; font-weight: 900; fill: var(--blue-deep); }
.numline__hop { fill: none; stroke: var(--orange-deep); stroke-width: 4; stroke-linecap: round; }
.numline__head { fill: var(--orange-deep); }
.numline__hop-label { font-family: var(--font); font-size: 28px; font-weight: 900; fill: var(--orange-deep); }

/* ---------- skip counting train ---------- */
.train-track { width: 100%; overflow: hidden; padding: var(--space-5) 0 var(--space-4); }
.train { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: var(--space-3); }
.train__cars { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-4); margin: 0; padding: 0; list-style: none; }
.train__engine { width: 96px; height: auto; flex: none; margin-bottom: -8px; }
.car {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(66px, 17vw, 92px);
  height: 74px;
  padding: 8px;
  border-radius: 14px 14px 8px 8px;
  background: #ffe2a8;
  box-shadow: inset 0 -8px 0 rgba(43, 45, 66, 0.08), var(--shadow-1);
}
.car:nth-child(3n + 2) { background: #c8f0ff; }
.car:nth-child(3n) { background: #ffd6e7; }
.car + .car::before { content: ""; position: absolute; top: 50%; right: 100%; width: var(--space-4); height: 6px; border-radius: 3px; background: var(--ink-soft); }
.car__num { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.car__num.digit-box { width: 100%; height: 100%; }
.car__wheels { position: absolute; left: 10px; right: 10px; bottom: -11px; display: flex; justify-content: space-between; pointer-events: none; }
.car__wheels::before, .car__wheels::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, var(--sun) 0 4px, var(--ink) 5px); }
/* the 💡 hint: the jump between two carriages, written above the coupling */
.car__jump { position: absolute; bottom: calc(100% + 4px); right: calc(100% - 12px); padding: 0 6px; border-radius: var(--radius-pill); background: #fff; color: var(--orange-deep); font-size: var(--fs-s); font-weight: 900; white-space: nowrap; opacity: 0; transition: opacity var(--dur-2); }
.train.is-jumps .car__jump { opacity: 1; }

/* ---------- two-digit addition and subtraction (js/core/columns.js) ---------- */
.colsum-wrap { display: flex; justify-content: center; width: 100%; }
.colsum {
  --cell: clamp(52px, 15vw, 76px);
  --sign: 36px;
  display: grid;
  grid-template-columns: var(--sign) repeat(2, var(--cell));
  gap: 6px 8px;
  align-items: center;
  justify-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: var(--shadow-1);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.colsum--3 { grid-template-columns: var(--sign) repeat(3, var(--cell)); }
.colsum__head { font-size: var(--fs-m); color: var(--ink-soft); }
.colsum__sign { width: var(--sign); text-align: center; }
.colsum__digit { position: relative; }
.colsum__digit.is-crossed { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--try); }
.colsum__borrowed { position: absolute; right: 100%; top: -0.15em; font-size: 0.5em; color: var(--try); }
.colsum__line { grid-column: 1 / -1; width: 100%; height: 5px; border-radius: 3px; background: var(--ink); }
.colsum .digit-box { width: var(--cell); height: var(--cell); }
.colsum .digit-box--small { width: calc(var(--cell) * 0.64); height: calc(var(--cell) * 0.64); font-size: 0.6em; }
@media (max-width: 480px) { .colsum { padding: var(--space-3); gap: 4px 6px; } }

/* ---------- number chart ---------- */
.chart { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 560px; padding: 6px; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.chart__cell { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border-radius: 6px; background: #f6f1e4; color: var(--ink); font-size: clamp(0.62rem, 2.6vw, 1.1rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.chart__cell--blank { min-width: 0; min-height: 0; width: 100%; padding: 0; border-width: 2px; border-radius: 6px; cursor: pointer; }
.chart__cell.is-line { background: #fff3c4; box-shadow: inset 0 0 0 2px var(--sun-deep); }
.chart__cell--blank.is-filled.is-line { background: #fff3c4; }
.chart-nav { display: flex; gap: var(--space-3); justify-content: center; }

/* ---------- before, after, between ---------- */
.number-card { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-3) auto 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); font-size: clamp(2rem, 9vw, 4rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.number-card__num.digit-box { min-width: 2.2em; min-height: 1.4em; }
@media (max-width: 480px) { .number-card { gap: var(--space-3); padding: var(--space-4); } }

/* ---------- bigger or smaller ---------- */
.compare { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-3) auto var(--space-5); font-size: clamp(2rem, 9vw, 4.6rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.compare__num { min-width: 2ch; padding: var(--space-2) var(--space-4); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); text-align: center; }
.compare__digit { display: inline-block; border-radius: 8px; }
.compare__gap { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 1.5em; height: 1.5em; padding: 0 4px; border: 4px dashed #a39a86; border-radius: var(--radius-m); color: var(--ink-soft); }
.compare__gap.is-filled { border-style: solid; border-color: var(--green); background: #e6ffed; color: var(--green-deep); }
.compare__gap .croc { width: 1.2em; }
.answer-options--signs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
@media (max-width: 560px) { .answer-options--signs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.answer--sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; padding: var(--space-2); }
.answer__sign { font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1; }
.croc { display: block; width: 60px; height: auto; flex: none; }
.croc--gt { transform: scaleX(-1); }
.no-croc .croc { display: none; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 480px) { .compare { gap: var(--space-2); } .compare__num { padding: var(--space-2) var(--space-3); } .croc { width: 48px; } }

/* ---------- letter tiles (js/core/lettertiles.js): Missing Letter ---------- */
.letter-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 760px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
.letter-tile {
  width: clamp(64px, 12vw, 88px); /* never below --tap */
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--blue-deep);
  color: #fff;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 900;
  box-shadow: 0 5px 0 #0f4583, var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2);
  touch-action: manipulation;
}
.letter-tiles li:nth-child(4n + 2) .letter-tile { background: var(--green-deep); box-shadow: 0 5px 0 #0b5a2a, var(--shadow-1); }
.letter-tiles li:nth-child(4n + 3) .letter-tile { background: var(--purple-deep); box-shadow: 0 5px 0 #4a2a8c, var(--shadow-1); }
.letter-tiles li:nth-child(4n + 4) .letter-tile { background: var(--pink-deep); box-shadow: 0 5px 0 #85164c, var(--shadow-1); }
.letter-tile:hover { transform: translateY(-3px); }
.letter-tile:active { transform: translateY(4px) scale(0.95); }
.letter-tile[aria-disabled="true"] { cursor: default; transform: none; }
.letter-tile.is-pressed { animation: key-press 240ms var(--ease-out); }
/* the whole alphabet: smaller tiles, still 44px and up */
.letter-tiles--many { gap: var(--space-2); max-width: 680px; }
.letter-tiles--many .letter-tile { width: clamp(44px, 9vw, 60px); font-size: clamp(1.3rem, 4.5vw, 1.9rem); }
html.calm .letter-tile.is-pressed { animation: none; }
@media (prefers-reduced-motion: reduce) { .letter-tile.is-pressed { animation: none; } }

/* ---------- missing letter ---------- */
.ml-word { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 auto var(--space-5); padding: 0; list-style: none; }
.ml-letter {
  display: grid;
  place-items: center;
  width: clamp(44px, 10vw, 72px);
  aspect-ratio: 1;
  border-bottom: 6px solid var(--ink-soft);
  border-radius: var(--radius-s) var(--radius-s) 4px 4px;
  background: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
}
.ml-letter.digit-box { min-width: 0; min-height: 0; padding: 0; border-width: 3px; border-bottom-width: 6px; font-size: clamp(1.8rem, 6vw, 2.8rem); }

/* ---------- fill the sentence ---------- */
.sentence-board { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5); margin: 0 auto var(--space-5); }
.sentence-picture[hidden] { display: none; }
.sentence-stars { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-width: 240px; padding: var(--space-3); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-2); }
.sentence-stars .shape { width: 44px; height: 44px; }
.sentence { max-width: 30ch; margin: 0; font-size: clamp(1.6rem, 5.5vw, 2.4rem); font-weight: 900; line-height: 1.6; text-align: center; }
.sentence__blank {
  display: inline-block;
  min-width: 4.2ch;
  margin: 0 0.15em;
  padding: 0 0.25em;
  border-bottom: 5px dashed #a39a86;
  border-radius: 6px 6px 0 0;
  line-height: 1.2;
}
.sentence__blank.is-active { border-bottom-style: solid; border-bottom-color: var(--blue-deep); background: #eef6ff; }
.sentence__blank.is-filled { border-bottom-style: solid; border-bottom-color: var(--green); background: #e6ffed; color: var(--green-deep); }
.answer-options--words { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; }
.answer-options--words .answer { padding: var(--space-2); font-size: clamp(1.3rem, 5vw, 2rem); }
.word-choice.is-used { opacity: 0.25; }
/* phones: one word per row, so long words (butterfly, pineapple) never break in the middle */
@media (max-width: 560px) {
  .answer-options--words { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: var(--space-2); }
  .answer-options--words .answer { min-height: var(--tap); }
}

/* ---------- odd one out ---------- */
.odd-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
@media (max-width: 640px) { .odd-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.odd-option { padding: var(--space-2); }
.odd-option .card__visual { aspect-ratio: 1 / 1; }
.odd-option__shape .shape { width: 78%; height: 78%; }
.odd-option__number .numeral { font-size: clamp(3rem, 12vw, 5rem); }
.odd-option[aria-disabled="true"] { cursor: default; }

/* ---------- what comes next ---------- */
.pattern-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-3); margin: var(--space-3) auto var(--space-5); padding: 0; list-style: none; }
.pattern-row > li { position: relative; }
.pattern-cell { display: grid; place-items: center; width: clamp(48px, 11vw, 80px); aspect-ratio: 1; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.pattern-cell .shape { width: 80%; height: 80%; }
.pattern-cell--empty { border: 4px dashed #a39a86; box-shadow: none; background: #fffdf6; }
.pattern-cell--empty.is-active { border-style: solid; border-color: var(--blue-deep); background: #eef6ff; animation: box-glow 1.6s ease-in-out infinite; animation-play-state: var(--loops); }
.pattern-cell.is-filled { box-shadow: 0 0 0 4px var(--green), var(--shadow-1); }
.pattern-cell--number { font-size: clamp(1.5rem, 6vw, 2.4rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.pattern-cell--number.digit-box { width: clamp(48px, 11vw, 80px); min-width: 0; font-size: clamp(1.5rem, 6vw, 2.4rem); }
.pattern-jump { position: absolute; bottom: calc(100% + 2px); right: calc(100% - 8px); padding: 0 6px; border-radius: var(--radius-pill); background: #fff; color: var(--orange-deep); font-size: var(--fs-s); font-weight: 900; white-space: nowrap; opacity: 0; transition: opacity var(--dur-2); }
.pattern-row.is-jumps .pattern-jump { opacity: 1; }
.pattern-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.pattern-choices[hidden] { display: none; }
.pattern-choice { width: clamp(76px, 20vw, 120px); padding: var(--space-2); }
.pattern-choice .card__visual { aspect-ratio: 1 / 1; }
.pattern-choice .shape { width: 80%; height: 80%; }
.pattern-choice[aria-disabled="true"] { cursor: default; }
.pad-layout__pad[hidden] { display: none; }

/* ---------- "Print a worksheet" (Views/Play/_Worksheet, js/pages/worksheet.js) ---------- */
.print-sheet { max-width: 720px; margin: var(--space-6) auto 0; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.print-sheet__summary { display: block; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); font-weight: 800; line-height: 1.5; color: var(--ink-soft); list-style: none; cursor: pointer; }
.print-sheet__summary::-webkit-details-marker { display: none; }
.print-sheet__summary::after { content: " ▾"; }
.print-sheet[open] .print-sheet__summary::after { content: " ▴"; }
.print-sheet__summary small { font-weight: 700; }
.print-sheet[open] .print-sheet__summary { color: var(--ink); }
.print-sheet__body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.print-sheet__body p { margin: 0; }
.print-sheet__body .btn { justify-self: start; }
.print-sheet__note { min-height: 1.4em; font-weight: 700; color: var(--ink-soft); }
.worksheet { display: none; }

/* printing: only the worksheet, when the Print button was used (html.is-printing-sheet) */
@media print {
  @page { size: A4; margin: 12mm; }
  html.is-printing-sheet body { background: #fff; }
  html.is-printing-sheet body > :not(main),
  html.is-printing-sheet main > :not(.worksheet) { display: none !important; }
  html.is-printing-sheet main { max-width: none; margin: 0; padding: 0; }
  html.is-printing-sheet .worksheet { display: block !important; color: #000; font-family: var(--font); }
}
.ws-sheet + .ws-sheet { break-before: page; }
.ws-sheet__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2mm 6mm; padding-bottom: 2mm; border-bottom: 0.6mm solid #000; }
.ws-sheet__brand { margin: 0; font-weight: 900; font-size: 11pt; }
.ws-sheet__title { grid-column: 1; margin: 0; font-size: 18pt; }
.ws-sheet__level { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 11pt; font-weight: 700; text-align: right; }
.ws-sheet__name { grid-column: 1 / -1; margin: 2mm 0 0; font-size: 11pt; }
.ws-sheet__task { margin: 3mm 0; font-size: 13pt; font-weight: 800; }
.ws-sheet-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.2mm 8mm; margin: 0; padding-left: 7mm; font-size: 14pt; font-variant-numeric: tabular-nums; }
.ws-sheet-list > li { break-inside: avoid; padding-left: 1mm; }
.ws-sheet-list--add-2digit, .ws-sheet-list--subtract-2digit { grid-template-columns: repeat(4, 1fr); gap: 5mm 6mm; }
.ws-sheet-list--skip-count { grid-template-columns: 1fr; gap: 2.4mm; }
.ws-sheet-box { display: inline-grid; place-items: center; min-width: 11mm; height: 9mm; margin: 0 0.8mm; padding: 0 1mm; border: 0.4mm solid #000; border-radius: 1.5mm; vertical-align: middle; font-weight: 700; }
.ws-sheet-box--given { border-color: #888; }
.ws-sheet-box--letter { min-width: 8mm; }
.ws-sheet-box--answer { font-weight: 900; }
.ws-sheet-train { display: inline-flex; flex-wrap: wrap; gap: 1mm; }
.ws-sheet-line { display: inline-flex; align-items: center; gap: 3mm; font-weight: 700; }
.ws-sheet-circle { display: inline-grid; place-items: center; width: 10mm; height: 10mm; border: 0.4mm solid #000; border-radius: 50%; font-weight: 900; }
.ws-sheet-sum { display: inline-grid; justify-items: end; min-width: 22mm; font-size: 15pt; font-weight: 700; line-height: 1.25; }
.ws-sheet-sum__row { display: grid; grid-template-columns: 5mm auto; justify-items: end; width: 100%; }
.ws-sheet-sum__sign { justify-self: start; }
.ws-sheet-sum__line { width: 100%; height: 0.5mm; margin: 0.6mm 0; background: #000; }
.ws-sheet-sum__answer { width: 100%; min-height: 8mm; padding: 0 1mm; border: 0.4mm solid #000; border-radius: 1.5mm; text-align: right; }
.ws-sheet-chart { width: 100%; border-collapse: collapse; font-size: 13pt; font-variant-numeric: tabular-nums; }
.ws-sheet-chart td { height: 11mm; border: 0.3mm solid #000; text-align: center; }
.ws-sheet--answers .ws-sheet-chart__empty { font-weight: 900; text-decoration: underline; }
.ws-sheet-word { display: inline-flex; align-items: center; gap: 3mm; }
.ws-sheet-word__picture { display: grid; place-items: center; width: 20mm; height: 15mm; overflow: hidden; }
.ws-sheet-word__picture img { width: 100%; height: 100%; object-fit: contain; }
.ws-sheet-word__picture .swatch { width: 14mm; height: 14mm; }
.ws-sheet-word__picture .numeral { font-size: 20pt; background: none; color: #000; text-shadow: none; box-shadow: none; border: 0.4mm solid #000; } /* no ink-heavy tiles on paper */
.ws-sheet-word__letters { display: inline-flex; align-items: center; gap: 1mm; font-size: 16pt; font-weight: 900; letter-spacing: 0.04em; }
.ws-sheet-letter { display: inline-block; min-width: 5mm; text-align: center; }

/* ---------- Words in games (⚙️ Settings): an approved Hindi how-to line ---------- */
.how-to__hi { font-weight: 800; color: var(--ink); }

/* ---------- Two-Digit sums written in a line (the grown-ups "in a line" option) ---------- */
.colsum-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin: 0; font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.digit-box--wide { min-width: 2.6em; }

/* ---------- My Quiz ---------- */
.quiz-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); max-width: 900px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
.quiz-pick {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: 0 6px 0 #d9d2c3, var(--shadow-1);
  text-align: left;
  transition: transform var(--dur-2) var(--ease-spring);
}
.quiz-pick:hover { transform: translateY(-4px); }
.quiz-pick:active { transform: translateY(4px) scale(0.98); }
.quiz-pick__icon { grid-row: 1 / span 2; font-size: 2rem; }
.quiz-pick__name { font-weight: 900; font-size: var(--fs-m); overflow-wrap: anywhere; }
.quiz-pick__count { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.quiz-empty { max-width: 46ch; margin: 0 auto var(--space-4); text-align: center; font-weight: 800; }
.quiz-empty[hidden] { display: none; }
.myquiz { display: grid; gap: var(--space-4); }
.myquiz [hidden] { display: none !important; }
.myquiz__picture { display: flex; justify-content: center; }
.myquiz__figure { margin: 0; width: min(100%, 260px); padding: var(--space-2); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); }
.myquiz__figure img, .myquiz__figure .swatch { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; border-radius: var(--radius-m); }
.myquiz__figure .numeral { display: grid; place-items: center; min-height: 160px; font-size: 5rem; }
.answer--picture { display: grid; place-items: center; padding: var(--space-2); min-height: 120px; overflow: hidden; }
.answer--picture img, .answer--picture .swatch { width: 100%; height: 110px; object-fit: contain; }
.answer--picture .numeral { font-size: 3rem; }
.answer--word { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: clamp(1.3rem, 5vw, 2rem); overflow-wrap: anywhere; }
.answer__icon { font-size: 1.2em; }
.myquiz__choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.myquiz__word .ml-word { margin-bottom: var(--space-3); }

/* ---------- My Photo Puzzle ---------- */
.puzzle--square { aspect-ratio: 1 / 1; width: min(100%, 520px); }
.puzzle-preview--square img { aspect-ratio: 1 / 1; }
.puzzle-gap { background: repeating-linear-gradient(45deg, #f4efe4 0 10px, #ebe4d3 10px 20px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.puzzle.is-solved .puzzle-gap { background: none; }
.photo-picker--own:empty, .photo-picker--own[hidden] { display: none; }
.photo-picker--own .photo-pick img { aspect-ratio: 1 / 1; }
.photo-start { display: grid; gap: var(--space-4); }
.photo-start[hidden] { display: none; }
.grownup-box { display: grid; gap: var(--space-3); justify-items: start; max-width: 640px; margin: 0 auto; padding: var(--space-4); border-radius: var(--radius-l); background: #f3f6ff; box-shadow: inset 0 0 0 2px #d6e2ff; }
.grownup-box__title { margin: 0; font-weight: 800; }
.grownup-box__pick { display: grid; gap: var(--space-3); justify-items: start; }
.grownup-box__pick[hidden] { display: none; }
.hold-btn--small { min-height: 64px; font-size: var(--fs-s); }
.hold-btn--small .hold-btn__ring { width: 48px; height: 48px; }
.hold-btn[hidden] { display: none; }

/* ---------- Phase 4a: Place Value Blocks, Odd or Even, Times Tables Race, Number Bonds, Missing Number Sums ---------- */
.ws-sheet-list--tables { grid-template-columns: repeat(4, 1fr); gap: 5mm 4mm; }

/* a number card that may hold a longer line (4 x 6 = __, 12 - __ = 7, 300 + 40 + 5): smaller, and wraps on a phone */
.number-card--sum { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-4); font-size: clamp(1.7rem, 8.5vw, 3.4rem); }
.number-card--sum .number-card__num.digit-box { min-width: 1.9em; }
.number-card--parts { flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: clamp(1.6rem, 7.5vw, 3rem); }
.number-card--parts .digit-box--wide { min-width: 2.4em; }
.number-card__sign { color: var(--ink-soft); }
.number-card[hidden] { display: none; }

/* place value: the blocks you made, and a row of + and - buttons for each place */
.pv { display: grid; gap: var(--space-4); justify-items: center; width: 100%; }
.pv[hidden] { display: none; }
.pv__made { display: grid; place-items: center; width: 100%; max-width: 560px; min-height: 160px; padding: var(--space-3); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); }
.pv__made .blocks { box-shadow: none; }
.pv__made .blocks__set { max-width: 100%; }
.pv__empty { color: var(--ink-soft); font-weight: 700; }
.pv__words { margin: 0; min-height: 1.5em; font-size: var(--fs-m); font-weight: 800; text-align: center; }
.pv__counters { display: grid; gap: var(--space-2); width: 100%; max-width: 420px; margin: 0; padding: 0; list-style: none; }
.pv-counter { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: #fff; box-shadow: inset 0 0 0 3px var(--pv-color, #d9d2c3); }
.pv-counter--flat { --pv-color: var(--purple-deep); }
.pv-counter--rod { --pv-color: var(--blue-deep); }
.pv-counter--cube { --pv-color: var(--orange-deep); }
.pv-counter__name { font-size: var(--fs-m); font-weight: 900; }
.pv-counter__btn { width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-m); background: var(--ink); color: #fff; font-size: 2rem; font-weight: 900; line-height: 1; box-shadow: 0 5px 0 #14152a, var(--shadow-1); touch-action: manipulation; transition: transform var(--dur-1) var(--ease-spring); }
.pv-counter__btn--more { background: var(--green-deep); box-shadow: 0 5px 0 #0b5a2a, var(--shadow-1); }
.pv-counter__btn:active { transform: translateY(4px) scale(0.95); }
.pv-counter__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; }
.pv-counter__count { min-width: 1.6em; font-size: 2rem; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.pv__check { min-width: 160px; }
.game-stage.is-complete .pv-counter__btn, .game-stage.is-complete .pv__check { opacity: 0.45; }
@media (max-width: 380px) { .pv-counter { gap: var(--space-1); padding: var(--space-2); } .pv-counter__name { font-size: var(--fs-s); } }

/* odd or even: number tiles and two baskets */
.oe-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 640px; min-height: calc(var(--tap) + 8px); margin: 0 auto var(--space-5); padding: 0; list-style: none; }
.oe-tile { min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-m); background: var(--blue-deep); color: #fff; font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 5px 0 #0f4583, var(--shadow-1); transition: transform var(--dur-2) var(--ease-spring); }
.oe-tile:hover { transform: translateY(-3px); }
.oe-tile__last { display: inline-block; border-radius: 6px; }
.oe-tile.is-sorted { min-width: 48px; min-height: 48px; padding: 0 var(--space-3); background: var(--ink-soft); box-shadow: none; font-size: 1.3rem; cursor: default; transform: none; }
.oe-baskets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 720px; margin: 0 auto var(--space-4); }
.oe-basket { display: grid; align-content: start; gap: var(--space-2); min-height: 180px; padding: var(--space-3); border: 4px dashed var(--oe-color); border-radius: var(--radius-l); background: #fff; }
.oe-basket--odd { --oe-color: var(--pink-deep); }
.oe-basket--even { --oe-color: var(--green-deep); }
.oe-basket__button { min-height: var(--tap); border: 0; border-radius: var(--radius-m); background: var(--oe-color); color: #fff; font-size: 1.5rem; font-weight: 900; touch-action: manipulation; }
.oe-basket__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (max-width: 380px) { .oe-baskets { gap: var(--space-2); } .oe-basket { padding: var(--space-2); } }

/* times tables race: a calm bar (never a countdown), and the fact as rows of dots */
.pace { display: grid; justify-items: center; gap: var(--space-1); width: 100%; max-width: 420px; }
.pace[hidden], html.calm .pace { display: none; }
.pace__track { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #e7e0d0; }
.pace__bar { width: 100%; height: 100%; border-radius: inherit; background: var(--blue); transition: width 500ms linear; }
html.calm .pace__bar { transition: none; }
@media (prefers-reduced-motion: reduce) { .pace__bar { transition: none; } }
.pace__note { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.dots { display: grid; grid-template-columns: repeat(var(--cols, 5), 14px); gap: 6px; justify-content: center; }
.dots__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--blue-deep); }

/* number bonds: the whole on top, two parts below, joined by two lines */
.bond { --b: clamp(76px, 24vw, 104px); position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: var(--b) var(--b); row-gap: calc(var(--b) * 0.5); justify-items: center; width: min(100%, 380px); margin: var(--space-3) auto 0; }
.bond__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bond__lines line { stroke: #7a7160; stroke-width: 4; vector-effect: non-scaling-stroke; }
.bond__whole, .bond__part { position: relative; z-index: 1; display: grid; place-items: center; width: var(--b); height: var(--b); border-radius: 50%; background: #fff; font-size: calc(var(--b) * 0.46); font-weight: 900; font-variant-numeric: tabular-nums; }
.bond__whole { grid-column: 1 / -1; background: #fff3c4; border: 4px solid var(--orange-deep); }
.bond__part:not(.digit-box) { border: 4px solid var(--blue-deep); }
.bond__part--left { grid-column: 1; }
.bond__part--right { grid-column: 2; }
.bond__part.digit-box { min-width: 0; min-height: 0; padding: 0; border-radius: 50%; }

/* ---------- Phase 4b: Shape Hunt, Days and Months, Rupee Shop, Story Sums, First Second Third ---------- */
/* the shared tap board (js/core/pickboard.js): big real buttons in a grid */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 720px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 640px) { .pick-grid { gap: var(--space-4); } .pick-grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pick-grid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
.pick-grid--words.pick-grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 96px;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-l);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  font-weight: 900;
  box-shadow: 0 7px 0 #d9d2c3, var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2), opacity var(--dur-2);
  touch-action: manipulation;
}
.pick:hover { transform: translateY(-4px); box-shadow: 0 10px 0 #d9d2c3, var(--shadow-2); }
.pick:active { transform: translateY(6px) scale(0.97); box-shadow: 0 1px 0 #d9d2c3; }
.pick[aria-disabled="true"] { cursor: default; }
.pick.is-found { background: #e6ffed; box-shadow: inset 0 0 0 4px var(--green), var(--shadow-1); }
.pick.is-hint { box-shadow: 0 0 0 5px var(--sun), var(--shadow-2); }
.pick--number { font-size: clamp(2rem, 8vw, 3rem); }
.pick .shape-art { width: clamp(56px, 16vw, 92px); height: clamp(56px, 16vw, 92px); }
.pick-grid--n6 .shape-art { width: clamp(48px, 14vw, 80px); height: clamp(48px, 14vw, 80px); }
.shape-display { display: grid; place-items: center; margin: 0 auto var(--space-4); }
.shape-display .shape-art { width: clamp(110px, 30vw, 160px); height: clamp(110px, 30vw, 160px); }

/* a calendar month: day names across the top, dates below (dates are buttons when they are the answers) */
.cal-board { display: grid; gap: var(--space-4); justify-items: center; }
.cal-wrap { width: 100%; max-width: 520px; }
.cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.cal__title { padding: var(--space-2); font-size: var(--fs-l); font-weight: 900; text-align: center; background: var(--blue-deep); color: #fff; caption-side: top; }
.cal__head { padding: var(--space-2) 0; background: #eef6ff; font-size: var(--fs-xs); font-weight: 900; text-align: center; }
.cal__head abbr { text-decoration: none; }
.cal__head.is-hint { background: var(--sun); }
.cal__day { height: 44px; padding: 0; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; border-top: 1px solid #e7e0d0; }
.cal__day--mark { background: #fff3c4; }
.cal__num { display: block; font-size: var(--fs-s); }
.cal__button { min-height: 44px; height: 44px; padding: 0; border-radius: 10px; box-shadow: none; font-size: var(--fs-s); background: transparent; }
.cal__button:hover { transform: none; box-shadow: inset 0 0 0 3px var(--blue); }
.cal__button.is-today { background: #fff3c4; box-shadow: inset 0 0 0 3px var(--orange-deep); }
.cal__button.is-found { background: #e6ffed; box-shadow: inset 0 0 0 3px var(--green); }
.cal__button.is-hint { box-shadow: inset 0 0 0 4px var(--sun-deep); }
/* on the narrowest phones seven columns inside the page gutter and the game card's padding are under 44px each
   (about 39px at 320px): let the month use the full width of the screen (gutter + the card's var(--space-2) padding each side) */
@media (max-width: 360px) {
  .cal-wrap { width: calc(100% + 2 * (var(--gutter) + var(--space-2))); max-width: none; margin-inline: calc(-1 * (var(--gutter) + var(--space-2))); }
  .cal { border-radius: 0; }
}

/* First, Second, Third: a row with a start arrow on the left */
.ordinal { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); max-width: 1000px; margin: 0 auto; }
.ordinal__start { display: grid; justify-items: center; margin: 0; font-weight: 900; font-size: var(--fs-s); color: var(--blue-deep); text-align: center; }
.ordinal__start.is-hint { outline: 4px solid var(--sun); border-radius: var(--radius-s); }
.ordinal__arrow { font-size: 2rem; line-height: 1; }
.ordinal__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ordinal[data-length="7"] .ordinal__items { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ordinal[data-length="10"] .ordinal__items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 900px) { .ordinal[data-length="10"] .ordinal__items { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.pick--picture { min-height: 0; padding: var(--space-1); border-radius: var(--radius-m); }
.pick--picture .card__visual { width: 100%; aspect-ratio: 1 / 1; }
.pick--picture:hover { transform: translateY(-3px); }
.ordinal__note { margin: var(--space-2) 0 0; text-align: center; font-weight: 800; color: var(--ink-soft); }
@media (max-width: 480px) {
  .ordinal { grid-template-columns: minmax(0, 1fr); }
  .ordinal__start { grid-auto-flow: column; justify-content: start; gap: var(--space-2); }
  .ordinal[data-length="7"] .ordinal__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Story Sums */
.story { display: grid; justify-items: center; gap: var(--space-3); width: 100%; max-width: 560px; padding: var(--space-4); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); }
.story__picture { width: clamp(90px, 28vw, 130px); aspect-ratio: 1 / 1; }
.story__picture img { width: 100%; height: 100%; object-fit: contain; }
.story__text { margin: 0; font-size: var(--fs-m); font-weight: 800; line-height: 1.45; text-align: center; }
.story__answer { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-l); font-weight: 900; }
.story__box { min-width: 2.4em; min-height: 1.6em; font-size: 1.2em; }

/* Rupee Shop */
.shop { display: grid; gap: var(--space-4); justify-items: center; max-width: 760px; margin: 0 auto; }
.shop__item { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: var(--space-1) var(--space-4); }
.shop__picture { grid-row: 1 / 3; width: clamp(80px, 24vw, 110px); aspect-ratio: 1 / 1; }
.shop__picture img { width: 100%; height: 100%; object-fit: contain; }
.shop__price { margin: 0; align-self: end; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: #fff3c4; border: 3px dashed var(--orange-deep); font-size: 2rem; font-weight: 900; }
.shop__play { margin: 0; align-self: start; font-size: var(--fs-xs); font-weight: 800; color: var(--ink-soft); }
.shop__pay { display: grid; gap: var(--space-3); justify-items: center; width: 100%; }
.tray__total { margin: 0; font-size: var(--fs-m); font-weight: 900; text-align: center; }
.tray { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: var(--space-2); width: 100%; min-height: 84px; margin: 0; padding: var(--space-3); list-style: none; border: 3px dashed #a39a86; border-radius: var(--radius-m); background: #fffdf6; }
.tray__piece { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 2px; border: 0; border-radius: var(--radius-s); background: transparent; touch-action: manipulation; }
.tray__piece .money-art--coin { width: 44px; height: 44px; }
.tray__piece .money-art--note { width: 72px; height: 40px; }
.tray__piece:hover { background: #fff3c4; }
.purse { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: var(--space-2); list-style: none; border-radius: var(--radius-m); }
.purse.is-hint { box-shadow: 0 0 0 5px var(--sun); }
.purse__piece { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: var(--space-1); border: 0; border-radius: var(--radius-m); background: #fff; box-shadow: 0 5px 0 #d9d2c3, var(--shadow-1); touch-action: manipulation; transition: transform var(--dur-1) var(--ease-spring); }
.purse__piece:hover { transform: translateY(-3px); }
.purse__piece:active { transform: translateY(4px) scale(0.96); box-shadow: 0 1px 0 #d9d2c3; }
.purse__piece.is-hint { box-shadow: 0 0 0 5px var(--sun), var(--shadow-2); }
.purse__piece .money-art--coin { width: 60px; height: 60px; }
.purse__piece .money-art--note { width: 104px; height: 58px; }
.shop__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.shop__note { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-m); }
.shop__note.is-hint { box-shadow: 0 0 0 5px var(--sun); }
.shop__label { font-weight: 800; font-size: var(--fs-s); }
.shop__note .money-art--note { width: min(220px, 70vw); height: auto; }
.shop__change { width: 100%; }
.money-art { display: block; }
.game-stage.is-complete .purse, .game-stage.is-complete .tray { opacity: 0.6; }
.pick--word { font-size: clamp(1.1rem, 4.4vw, 1.6rem); overflow-wrap: anywhere; }
.pick-grid--words, .pick-grid--words.pick-grid--n4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

/* ---------- Phase 4c: First Sound, Rhyme Time, Opposites, Sight Words Pop, Living or Non-living ---------- */
/* pictures to pick from (First Sound, Rhyme Time, Opposites) */
.pick-grid--pictures { max-width: 640px; }
.pick-grid--pictures.pick-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
@media (max-width: 639px) { .pick-grid--pictures.pick-grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; } }
.pick--picture .opposite-art { width: 100%; height: 100%; display: block; }
.pick--picture .numeral { font-size: clamp(2.2rem, 11vw, 3.6rem); }

/* First Sound: the big letter */
.fs-letter { display: grid; place-items: center; width: fit-content; min-width: 120px; margin: 0 auto var(--space-4); padding: var(--space-2) var(--space-5); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); border: 4px solid var(--teal-deep); color: var(--teal-deep); font-size: clamp(3.6rem, 1.6rem + 14vw, 6.5rem); font-weight: 900; line-height: 1.1; letter-spacing: 0.04em; }
.fs-letter.is-hint { box-shadow: 0 0 0 6px var(--sun), var(--shadow-2); }

/* Rhyme Time and Opposites: the word the question is about */
.rhyme-model, .opposite-model { display: grid; justify-items: center; gap: var(--space-2); margin: 0 auto var(--space-4); }
.rhyme-model.is-hint, .opposite-model.is-hint { border-radius: var(--radius-m); box-shadow: 0 0 0 6px var(--sun); }
.rhyme-model__picture, .opposite-model__picture { width: clamp(96px, 30vw, 150px); aspect-ratio: 1 / 1; }
.rhyme-model__frame { width: 100%; height: 100%; padding: var(--space-1); border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.rhyme-model__frame img { width: 100%; height: 100%; object-fit: contain; }
.rhyme-model__word, .opposite-model__word { margin: 0; font-size: var(--fs-xl); font-weight: 900; color: var(--purple-deep); }
.opposite-model__word { color: var(--orange-deep); }
.opposite-model__picture .opposite-art { width: 100%; height: 100%; display: block; }
.rhyme-make { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0 auto var(--space-4); font-size: var(--fs-xl); font-weight: 900; }
.rhyme-make__blank { min-width: 1.6em; min-height: 1.4em; font-size: 1em; }
.rhyme-make__rime { color: var(--purple-deep); }
.opposite-sentence { max-width: 640px; margin: 0 auto var(--space-4); padding: var(--space-4); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-1); font-size: var(--fs-l); font-weight: 800; line-height: 1.5; text-align: center; }
.opposite-sentence.is-hint { box-shadow: 0 0 0 6px var(--sun), var(--shadow-2); }
.opposite-sentence__key { padding: 0 0.2em; border-radius: 8px; background: #fff3c4; color: var(--orange-deep); }
.opposite-sentence__blank { display: inline-grid; min-width: 2.2em; min-height: 1.3em; margin: 0 0.15em; font-size: 0.9em; vertical-align: middle; }

/* Sight Words Pop: bubbles */
.sw-target { margin: 0 auto var(--space-3); padding: var(--space-2) var(--space-5); width: fit-content; border-radius: var(--radius-l); background: #fff3c4; border: 3px dashed var(--orange-deep); font-size: var(--fs-xl); font-weight: 900; text-align: center; }
.sw-note { margin: 0 auto var(--space-3); max-width: 560px; text-align: center; font-weight: 800; font-size: var(--fs-s); color: var(--ink-soft); }
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); max-width: 720px; margin: 0 auto; padding: var(--space-3) 0; list-style: none; }
.bubble {
  display: grid; place-items: center; width: clamp(96px, 28vw, 150px); aspect-ratio: 1 / 1; padding: var(--space-2);
  border: 4px solid var(--bubble-edge, var(--blue-deep)); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, var(--bubble-fill, #d9efff) 55%, var(--bubble-fill2, #9fd4fb) 100%);
  color: var(--ink); font: inherit; font-size: clamp(1.4rem, 6vw, 2.3rem); font-weight: 900; box-shadow: var(--shadow-1);
  overflow-wrap: anywhere; touch-action: manipulation;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2), opacity var(--dur-2);
}
.bubbles__item--2 { --bubble-edge: var(--pink-deep); --bubble-fill: #ffe0ef; --bubble-fill2: #ffb3d4; }
.bubbles__item--3 { --bubble-edge: var(--green-deep); --bubble-fill: #dcf8e5; --bubble-fill2: #a6e8bc; }
.bubbles__item--4 { --bubble-edge: var(--purple-deep); --bubble-fill: #ece2fd; --bubble-fill2: #cdb6f8; }
.bubbles__item { animation: bubble-bob 3.6s ease-in-out infinite; animation-play-state: var(--loops); }
.bubbles__item--2 { animation-delay: -0.9s; }
.bubbles__item--3 { animation-delay: -1.8s; }
.bubbles__item--4 { animation-delay: -2.7s; }
@keyframes bubble-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
html.calm .bubbles__item { animation: none; }
@media (prefers-reduced-motion: reduce) { .bubbles__item { animation: none; } }
.bubble:hover { transform: scale(1.05); }
.bubble:active { transform: scale(0.96); }
.bubble[aria-disabled="true"] { cursor: default; }
.bubble.is-found { box-shadow: 0 0 0 6px var(--good-glow), var(--shadow-1); }
.bubble.is-hint { box-shadow: 0 0 0 6px var(--sun), var(--shadow-2); }
.bubble.is-popped { opacity: 0.18; transform: scale(0.6); }

/* Living or Non-living: pictures to sort into two baskets (the baskets are Odd or Even's) */
.sort-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 720px; min-height: 120px; margin: 0 auto var(--space-5); padding: 0; list-style: none; }
.sort-tile { display: grid; justify-items: center; gap: var(--space-1); width: clamp(88px, 26vw, 124px); padding: var(--space-2); border: 0; border-radius: var(--radius-m); background: #fff; color: var(--ink); font: inherit; box-shadow: 0 5px 0 #d9d2c3, var(--shadow-1); touch-action: manipulation; transition: transform var(--dur-2) var(--ease-spring); }
.sort-tile:hover { transform: translateY(-3px); }
.sort-tile__visual { display: block; width: 100%; aspect-ratio: 1 / 1; }
.sort-tile__visual img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-s); }
.sort-tile--cutout .sort-tile__visual img, .sort-tile.card--cutout .sort-tile__visual img { object-fit: contain; }
.sort-tile__name { font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.sort-tile.is-sorted { width: 72px; padding: var(--space-1); box-shadow: none; background: #f4f0e6; cursor: default; transform: none; }
.sort-tile.is-sorted .sort-tile__name { display: none; }
.sort-tile.is-hint { box-shadow: 0 0 0 5px var(--sun), var(--shadow-2); }
.sort-basket--first { --oe-color: var(--green-deep); }
.sort-basket--second { --oe-color: var(--blue-deep); }
.sort-basket__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* Who Lives Where: four homes in a 2 x 2 grid, a reason to pick in the "Why" level */
.habitat-basket--forest { --oe-color: var(--green-deep); }
.habitat-basket--sea { --oe-color: var(--blue-deep); }
.habitat-basket--farm { --oe-color: #8a4b08; }
.habitat-basket--home { --oe-color: var(--pink-deep); }
.habitat-basket[hidden] { display: none; }
.habitat-baskets { max-width: 760px; }
.habitat-basket__icon { margin-right: var(--space-1); }
.habitat-why { display: grid; justify-items: center; gap: var(--space-4); max-width: 720px; margin: 0 auto var(--space-4); }
.habitat-why__animal { display: grid; justify-items: center; gap: var(--space-2); }
.habitat-why__picture { width: clamp(120px, 40vw, 190px); aspect-ratio: 1 / 1; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.habitat-why__picture img { width: 100%; height: 100%; object-fit: cover; }
.habitat-why__picture.card--cutout img { object-fit: contain; }
.habitat-why__name { margin: 0; font-size: var(--fs-m); font-weight: 900; }
.habitat-why__animal.is-hint { outline: 4px solid var(--sun); border-radius: var(--radius-m); }
.pick--reason { font-size: clamp(1rem, 3.6vw, 1.25rem); font-weight: 800; line-height: 1.3; text-align: center; min-height: var(--tap); padding: var(--space-3) var(--space-4); }
.habitat-why__options { grid-template-columns: minmax(0, 1fr); max-width: 560px; width: 100%; }
.habitat-note { max-width: 560px; margin: var(--space-3) auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: #fff8dc; font-weight: 800; text-align: center; }

/* My Body: the drawn child with a real button over each part */
.body-figure { position: relative; width: min(100%, 340px); margin: 0 auto var(--space-4); border-radius: var(--radius-l); background: #e8f6ff; box-shadow: var(--shadow-1); overflow: hidden; }
.body-figure[data-view="head"] { aspect-ratio: 160 / 125; }
.body-figure[data-view="full"] { width: min(100%, 250px); aspect-ratio: 200 / 330; }
.body-figure__art, .body-figure__hits { position: absolute; inset: 0; }
.body-art { display: block; width: 100%; height: 100%; }
.body-figure__art.is-hint { outline: 4px solid var(--sun); outline-offset: -4px; border-radius: var(--radius-l); }
.body-hit { position: absolute; padding: 0; border: 2px dashed transparent; border-radius: var(--radius-s); background: transparent; touch-action: manipulation; cursor: pointer; }
.body-hit::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; min-width: 48px; min-height: 48px; transform: translate(-50%, -50%); }
.body-hit:hover { border-color: rgba(27, 100, 181, 0.55); background: rgba(255, 255, 255, 0.28); }
.body-hit:focus-visible { border-color: var(--ink); background: rgba(255, 210, 63, 0.35); outline: 3px solid var(--ink); outline-offset: 2px; }
.body-hit.is-found { border-color: var(--green-deep); background: rgba(19, 128, 61, 0.28); }
.body-hit.is-hint { border-color: var(--sun-deep); background: rgba(255, 210, 63, 0.55); }
.body-hit.is-dimmed { opacity: 0.35; }
.body-hit[aria-disabled="true"] { cursor: default; }

/* Map and Planet Quiz: the map, a wonder's picture, and the names to tap */
.quiz-map { max-width: 760px; margin: 0 auto var(--space-4); }
.quiz-map[hidden], .quiz-picture[hidden] { display: none; }
.quiz-map .country.is-home { fill: #fff3c4; }
.quiz-map .country.is-picked { opacity: 0.45; }
.quiz-map .country.is-answer { fill: #ff7a2f; stroke: #2b2d42; stroke-width: 1.5; }
.quiz-map.is-hint { outline: 4px solid var(--sun); }
.quiz-picture { display: grid; justify-items: center; margin: 0 auto var(--space-4); }
.quiz-picture__image { display: block; width: clamp(150px, 56vw, 260px); aspect-ratio: 4 / 3; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.quiz-picture__image img { width: 100%; height: 100%; object-fit: cover; }
.pick-grid--list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); max-width: 760px; }
.pick__caption { font-size: var(--fs-xs); font-weight: 800; }

/* Daily challenge */
.daily-streak { margin: 0 auto var(--space-3); padding: var(--space-2) var(--space-4); max-width: 560px; border-radius: var(--radius-pill); background: #fff8dc; font-weight: 900; text-align: center; }
.daily-note { max-width: 560px; margin: 0 auto var(--space-3); font-weight: 800; text-align: center; color: var(--ink-soft); }
.daily-note[hidden] { display: none; }

/* ---------- Hindi games (batch 4e): Varnamala, Matra Magic, Hindi Number Names ---------- */
.pick--hindi { font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1.5; font-weight: 700; padding-block: var(--space-2); }
.pick--name { font-size: clamp(1.5rem, 6.5vw, 2.1rem); overflow-wrap: anywhere; }
.pick--matra { display: grid; place-items: center; }
.matra-sign { font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1.6; }
.pick-grid--letters { max-width: 560px; }
.pick-grid--letters.pick-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-grid--letters.pick-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; }
.pick-grid--names.pick-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.pick-grid--names { gap: var(--space-2); }
.pick--name { font-size: clamp(1.15rem, 5.4vw, 2rem); padding-inline: var(--space-1); }
@media (min-width: 640px) { .pick-grid--letters.pick-grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; } }
@media (max-width: 639px) { .pick-grid--letters.pick-grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; } }
.hindi-target { margin: 0 auto var(--space-3); padding: var(--space-1) var(--space-6); width: fit-content; border-radius: var(--radius-l); background: #fff3c4; border: 3px dashed var(--orange-deep); font-size: clamp(3rem, 14vw, 5rem); line-height: 1.5; font-weight: 700; text-align: center; }
.hindi-note { margin: 0 auto var(--space-3); max-width: 560px; text-align: center; font-weight: 800; font-size: var(--fs-s); color: var(--ink-soft); }
.hindi-note--waiting { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: #fff8dc; color: var(--ink); }
.hindi-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 auto var(--space-4); padding: 0; list-style: none; max-width: 560px; }
.hindi-row__cell { display: grid; place-items: center; min-width: clamp(48px, 15vw, 72px); height: clamp(64px, 18vw, 88px); padding: 0 var(--space-2); border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); font-size: clamp(2rem, 9vw, 3rem); line-height: 1.5; font-weight: 700; }
.hindi-row__cell--gap { background: #fff3c4; border: 3px dashed var(--orange-deep); box-shadow: none; }
.hindi-example { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-3) auto 0; font-size: var(--fs-l); font-weight: 700; line-height: 1.5; }
.hindi-example[hidden] { display: none; }
.hindi-example__picture { width: clamp(64px, 20vw, 96px); aspect-ratio: 1 / 1; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.hindi-example__picture img { width: 100%; height: 100%; object-fit: contain; }
.hindi-example__picture.card--photo img { object-fit: cover; }
.matra-board { display: grid; justify-items: center; gap: var(--space-3); margin: 0 auto var(--space-4); }
.matra-board[hidden], .number-board[hidden] { display: none; }
.matra-picture { width: clamp(120px, 38vw, 180px); aspect-ratio: 1 / 1; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.matra-picture img { width: 100%; height: 100%; object-fit: contain; }
.matra-picture.card--photo img { object-fit: cover; }
.matra-word { display: flex; align-items: center; justify-content: center; margin: 0; font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1.6; font-weight: 700; }
.matra-word__gap { display: inline-grid; place-items: center; min-width: 0.9em; margin: 0 0.1em; border-radius: var(--radius-s); border: 3px dashed var(--orange-deep); background: #fff3c4; line-height: 1.1; }
.matra-word.is-done { color: var(--green-deep); }
.number-board { display: grid; justify-items: center; gap: var(--space-2); margin: 0 auto var(--space-4); }
.hindi-number { margin: 0; padding: var(--space-2) var(--space-6); border-radius: var(--radius-l); background: #fff3c4; border: 3px dashed var(--orange-deep); font-size: clamp(3rem, 14vw, 5rem); font-weight: 900; line-height: 1.2; }
/* Hindi letters worksheet */
.ws-sheet-hindi { display: inline-grid; place-items: center; min-width: 9mm; height: 11mm; font-size: 22pt; line-height: 1.3; }
.ws-sheet-hindi--grey { color: #8a8a8a; }
.ws-sheet-hindi--answer { font-weight: 900; }
.ws-sheet-trace { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1.5mm; }

/* ======================================================================================================
   Phase 5, batch 5a: Think & Remember - Hoot's Path, What Fits?, Number Line Jump, What's Missing?, Follow Hoot
   (colours only from tokens or the same dark-on-light pairs as the rest of the site; every lit / chosen state
   is shown by an outline or a fill, never by movement alone; Calm mode and reduced motion switch gliding off)
   ====================================================================================================== */

/* ---------- Hoot's Path ---------- */
.path-board { container-type: inline-size; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--n, 4), minmax(0, 1fr)); width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto var(--space-4); overflow: hidden; border: 4px solid var(--grass-deep); border-radius: var(--radius-m); background: #e3f6d6; box-shadow: var(--shadow-1); }
.path-cell { overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(19, 128, 61, 0.35); font-size: calc(100cqw / var(--n, 4) * 0.55); line-height: 1; }
.path-cell--nest { background: #fff1b8; }
.path-cell--tree, .path-cell--puddle { background: #cfe8bd; }
.path-cell.is-collected { filter: grayscale(1); opacity: 0.4; }
.path-hoot { position: absolute; display: grid; place-items: center; font-size: calc(100cqw / var(--n, 4) * 0.55); line-height: 1; pointer-events: none; transition: left 420ms var(--ease-out), top 420ms var(--ease-out); }
html.calm .path-hoot { transition: none; }
@media (prefers-reduced-motion: reduce) { .path-hoot { transition: none; } }
.path-hoot.is-bumped .path-hoot__owl { filter: drop-shadow(0 0 0.15em #c2410c); }
.path-hoot__facing { position: absolute; display: grid; place-items: center; width: 1em; height: 1em; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.34em; }
.path-hoot[data-facing="0"] .path-hoot__facing { top: 0; left: 50%; margin-left: -0.5em; }
.path-hoot[data-facing="1"] .path-hoot__facing { right: 0; top: 50%; margin-top: -0.5em; transform: rotate(90deg); }
.path-hoot[data-facing="2"] .path-hoot__facing { bottom: 0; left: 50%; margin-left: -0.5em; transform: rotate(180deg); }
.path-hoot[data-facing="3"] .path-hoot__facing { left: 0; top: 50%; margin-top: -0.5em; transform: rotate(270deg); }
.path-program { max-width: 760px; margin: 0 auto var(--space-3); text-align: center; }
.path-program__title { margin: 0 0 var(--space-2); font-size: var(--fs-m); }
.path-program__empty { margin: var(--space-2) 0 0; color: var(--ink-soft); font-weight: 700; }
.path-row, .path-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 auto; padding: 0; list-style: none; }
.path-row { min-height: 40px; padding: var(--space-2); border-radius: var(--radius-m); background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.path-palette { max-width: 640px; margin-bottom: var(--space-3); }
.path-card { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: var(--tap); min-height: var(--tap); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-m); background: #e3f2fd; color: var(--ink); font: inherit; font-weight: 800; box-shadow: 0 4px 0 #90b8d9, var(--shadow-1); cursor: pointer; }
.path-card--left, .path-card--right { background: #ede7f6; box-shadow: 0 4px 0 #b7a3dc, var(--shadow-1); }
.path-card--repeat { background: #fff3c4; box-shadow: 0 4px 0 #e0b84a, var(--shadow-1); }
.path-card__icon { font-size: 1.7rem; line-height: 1; }
.path-card__name { font-size: var(--fs-xs); }
.path-card--small { min-width: 72px; padding: var(--space-1) var(--space-2); }
.path-card--small .path-card__icon { font-size: 1.4rem; }
.path-card.is-current { outline: 5px solid var(--sun-deep); outline-offset: 2px; background: #fff7d6; }
.path-card[aria-pressed="true"] { outline: 5px solid var(--blue-deep); outline-offset: 2px; }
.path-card[aria-disabled="true"] { cursor: default; }
.path-status { min-height: 1.5em; margin: 0 auto var(--space-3); text-align: center; font-weight: 800; color: var(--ink-soft); }
.path-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0 auto var(--space-3); }
.path-sheet__page { color: #000; font-size: 11pt; }
.path-sheet__grid { border-collapse: collapse; margin: 3mm auto; }
.path-sheet__grid td { width: 19mm; height: 19mm; border: 0.5mm solid #000; text-align: center; font-size: 20pt; }
.path-sheet__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; margin: 3mm 0; padding: 0; list-style: none; }
.path-sheet__card { display: grid; justify-items: center; gap: 1mm; padding: 4mm 2mm; border: 0.4mm dashed #000; font-size: 11pt; font-weight: 800; break-inside: avoid; }
.path-sheet__icon { font-size: 22pt; }
.path-sheet__note { margin: 2mm 0 0; font-size: 10pt; }

/* ---------- What Fits? ---------- */
.matrix-grid { display: grid; gap: var(--space-2); margin: 0 auto var(--space-4); }
.matrix-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 260px); }
.matrix-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 330px); }
.matrix-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); }
.matrix-cell .shape { width: 72%; height: 72%; }
.matrix-cell--gap { border: 4px dashed #a39a86; background: #fffdf6; box-shadow: none; color: var(--blue-deep); font-size: 2.4rem; font-weight: 900; }
.matrix-cell.is-filled { box-shadow: 0 0 0 4px var(--green), var(--shadow-1); }
.matrix-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
@media (max-width: 640px) { .matrix-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.matrix-option { padding: var(--space-2); }
.matrix-option .card__visual { aspect-ratio: 1 / 1; }
.matrix-option .shape { width: 78%; height: 78%; }
.matrix-option[aria-disabled="true"] { cursor: default; }

/* ---------- Number Line Jump ---------- */
.jump-line { position: relative; max-width: 680px; margin: var(--space-4) auto var(--space-3); padding: 78px 24px 60px; border-radius: var(--radius-m); background: #fff; box-shadow: var(--shadow-1); cursor: pointer; touch-action: manipulation; }
.jump-line:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.jump-line__inner { position: relative; height: 8px; }
.jump-line__axis { position: absolute; inset: 0; border-radius: 4px; background: var(--ink); }
.jump-tick { position: absolute; top: -9px; width: 4px; height: 26px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.jump-tick--half { top: -3px; width: 3px; height: 14px; margin-left: -1.5px; background: var(--ink-soft); }
.jump-label { position: absolute; top: 24px; transform: translateX(-50%); font-size: clamp(0.75rem, 3vw, 1.05rem); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }
.jump-label.is-hint { padding: 0 6px; border-radius: var(--radius-pill); background: var(--sun); }
.jump-frog { position: absolute; top: -70px; transform: translateX(-50%); font-size: 2.6rem; line-height: 1; transition: left 260ms var(--ease-spring); }
html.calm .jump-frog { transition: none; }
@media (prefers-reduced-motion: reduce) { .jump-frog { transition: none; } }
.jump-flag { position: absolute; top: -44px; transform: translateX(-50%); font-size: 1.8rem; line-height: 1; }
.jump-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: var(--space-3) auto; }
.jump-where { min-height: 1.5em; margin: 0; text-align: center; font-weight: 800; color: var(--ink-soft); }

/* ---------- What's Missing? ---------- */
.shelf-look { min-height: 1.6em; margin: 0 auto var(--space-3); text-align: center; font-size: var(--fs-m); font-weight: 800; }
.shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 720px; margin: 0 auto var(--space-4); padding: var(--space-4) var(--space-3) var(--space-3); border-bottom: 12px solid #8d6e63; border-radius: var(--radius-m) var(--radius-m) 0 0; background: #fff3e0; list-style: none; }
.shelf__slot { width: clamp(72px, 22vw, 124px); }
.shelf-item .card__visual { aspect-ratio: 1 / 1; }
.shelf-item.is-found { box-shadow: 0 0 0 4px var(--green), var(--shadow-1); }
.shelf__slot.is-flying { animation: shelf-fly 600ms var(--ease-in-out) forwards; }
@keyframes shelf-fly { to { transform: translateY(-70px) scale(0.6); opacity: 0; } }
html.calm .shelf__slot.is-flying { animation: none; }
.shelf-gap { display: grid; place-items: center; aspect-ratio: 1; border: 4px dashed #a39a86; border-radius: var(--radius-m); background: #fffdf6; color: var(--blue-deep); font-size: 2.2rem; font-weight: 900; }
.shelf-actions { display: flex; justify-content: center; margin: 0 auto var(--space-3); }
.shelf-options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.shelf-option { width: clamp(76px, 22vw, 120px); padding: var(--space-2); }
.shelf-option .card__visual { aspect-ratio: 1 / 1; }
.shelf-option[aria-disabled="true"] { cursor: default; }
.shelf-option.is-chosen { box-shadow: 0 0 0 4px var(--green), var(--shadow-1); }

/* ---------- Follow Hoot ---------- */
.follow-status { min-height: 1.6em; margin: 0 auto var(--space-3); text-align: center; font-size: var(--fs-m); font-weight: 800; }
.follow-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: min(100%, 380px); margin: 0 auto var(--space-4); }
.follow-pad { display: grid; place-items: center; aspect-ratio: 1.25; min-height: var(--tap); border: 6px solid var(--ink); border-radius: var(--radius-m); color: var(--ink); font-size: 2.4rem; font-weight: 900; cursor: pointer; }
.follow-pad--red { background: #ffcdd2; }
.follow-pad--blue { background: #bbdefb; }
.follow-pad--green { background: #c8e6c9; }
.follow-pad--yellow { background: #fff9c4; }
.follow-pad[aria-disabled="true"] { cursor: default; }
.follow-pad.is-lit { font-size: 3.6rem; box-shadow: 0 0 0 5px #fff, 0 0 0 11px var(--ink); }
.follow-pad--red.is-lit { background: #c62828; color: #fff; }
.follow-pad--blue.is-lit { background: #1565c0; color: #fff; }
.follow-pad--green.is-lit { background: #2e7d32; color: #fff; }
.follow-pad--yellow.is-lit { background: #ffd600; color: var(--ink); }
.follow-controls { display: flex; justify-content: center; margin: 0 auto var(--space-3); }
.jump-controls--hops { max-width: 520px; }
.jump-controls--hops .btn { flex: 1 1 calc(50% - var(--space-3)); min-width: 0; padding-inline: var(--space-2); font-size: var(--fs-s); }
.jump-label--low { top: 48px; }
.jump-line { padding-bottom: 84px; }

/* Memory "Name it" (opt-in): three real name buttons under the cards once a pair is found */
.name-it { margin: var(--space-4) auto; padding: var(--space-3); max-width: 560px; border: 4px solid var(--sun-deep); border-radius: var(--radius-l); background: #fff; text-align: center; }
.name-it[hidden] { display: none; }
.name-it__ask { margin: 0 0 var(--space-2); font-size: var(--fs-m); font-weight: 900; }
.name-it__options { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.name-it__btn { min-height: var(--tap); min-width: 120px; }
.name-it__btn[aria-disabled="true"] { opacity: 0.5; }