/* FigureFlex stylesheet — visual language carried over from PhonicQuest:
   rounded glass panels, sage/teal palette, big tappable buttons, a floating
   bubble background. Maths-specific activity classes added below the shared
   base rules. */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
               Arial, sans-serif;
  background: linear-gradient(135deg, #f6fafd 0%, #e2f0ff 100%);
  color: #2b2d42;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0 0 .4em 0;
  font-weight: 700;
}

/* ---------- motion tokens ----------
   One place for the app's timing, so a change here moves every screen the same
   way. The values are deliberately short: this is a 4-8 year old tapping a
   tablet, and feedback that arrives later than about 150ms reads as "nothing
   happened". `celebrate` is the one slow value — the sticker moment is the
   only thing in the app allowed to take its time. */
:root {
  --motion-instant: 90ms;
  --motion-fast: 140ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;
  --motion-celebrate: 720ms;
  --ease-standard: cubic-bezier(.2, .7, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --press-scale: .95;
}

button {
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  /* Every control acknowledges the tap with a press. On a tablet there is no
     hover: the 16 :hover rules in this sheet never fire on the real device, so
     before this the app showed no reaction to a touch at all until the round
     resolved more than a second later. */
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
button:active:not(:disabled) {
  transform: scale(var(--press-scale));
}
button:disabled { cursor: default; }
/* Switch-access and keyboard users get the same "where am I" feedback. */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #4361ee;
  outline-offset: 2px;
}

input[type="text"] {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid #cfd8dc;
  outline: none;
}

input[type="text"]:focus {
  border-color: #4cc9f0;
}

/* ---------- layout ---------- */

#app-viewport {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 48px 16px;
}

.screen { display: none; }
.screen.active { display: block; }

.bubble-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(76,201,240,0.18), rgba(67,97,238,0.05) 60%);
  filter: blur(2px);
  opacity: .9;
}
.bg-bubble:nth-child(1) { width: 260px; height: 260px; top: -60px; left: -40px; }
.bg-bubble:nth-child(2) { width: 200px; height: 200px; top: 30%; right: -40px; background: radial-gradient(circle at 30% 30%, rgba(255,193,204,0.5), rgba(255,193,204,0.05) 60%); }
.bg-bubble:nth-child(3) { width: 320px; height: 320px; bottom: -80px; left: 30%; background: radial-gradient(circle at 30% 30%, rgba(168,230,164,0.4), rgba(168,230,164,0.05) 60%); }
.bg-bubble:nth-child(4) { width: 180px; height: 180px; top: 60%; left: 8%; background: radial-gradient(circle at 30% 30%, rgba(255,217,160,0.55), rgba(255,217,160,0.05) 60%); }

.glass-panel {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(43, 45, 66, 0.12);
  backdrop-filter: blur(8px);
}

/* ---------- splash ---------- */

#screen-splash .logo-title {
  font-size: 2.6rem;
  margin: 8px 0 0 0;
  letter-spacing: -0.02em;
  text-align: center;
}
#screen-splash .logo-title span { color: #4361ee; }
#screen-splash .logo-gorilla {
  display: block;
  width: 104px;
  height: auto;
  margin: 2px auto 2px;
  filter: drop-shadow(0 8px 14px rgba(43, 45, 66, 0.18));
}
#screen-splash .logo-mascot-name {
  text-align: center;
  margin: 0 0 2px 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2b2d42;
  opacity: 0.7;
}
@media (min-width: 520px) {
  #screen-splash .logo-gorilla { width: 132px; }
}
#screen-splash .logo-subtitle {
  text-align: center;
  color: #5b6478;
  margin: 0 0 24px 0;
}

.parent-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: rgba(43, 45, 66, 0.06);
  border-radius: 14px;
  margin-bottom: 16px;
}
.parent-controls-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  color: #7c8599;
  letter-spacing: 0.06em;
  padding: 0 6px;
}
.parent-control-btn {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(43,45,66,0.08);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: #2b2d42;
}
.parent-control-btn:hover { background: rgba(255,255,255,1); }
.parent-control-btn svg { display: block; }

.profile-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 16px 0;
  min-height: 60px;
}
/* No saved explorers yet? Then do not reserve the row: on a tablet this gap was
   the most visible piece of dead space on the first screen. */
.profile-chooser:empty {
  display: none;
  margin: 0;
  min-height: 0;
}
.profile-card {
  background: rgba(255,255,255,0.95);
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 12px 16px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 84px;
  box-shadow: 0 4px 10px rgba(43,45,66,0.08);
}
.profile-card:hover { border-color: #4cc9f0; }
/* The explorer the app is set up as. Without this the splash showed a row of
   identical cards and gave no sign which one "Let's count!" was about — and it
   was about none of them, it made a new one. */
.profile-card.active {
  border-color: #4361ee;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15), 0 4px 10px rgba(43,45,66,0.08);
}
.profile-card-avatar { display: block; width: 44px; height: 44px; }
.profile-card-name { font-weight: 700; font-size: 14px; }

.avatar-selector { margin-top: 12px; }
.avatar-options {
  /* auto-fit keeps the eight buddies evenly sized: one row on a tablet, a neat
     4x2 on a phone, rather than a ragged 6+2 wrap. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.avatar-option {
  background: rgba(255,255,255,0.9);
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color .12s, transform .12s, background .12s;
}
.avatar-option:hover { transform: translateY(-2px); border-color: #b9d4f5; }
.avatar-option.active { border-color: #4361ee; background: white; }

/* Character art replaces the old emoji avatars. */
.avatar-option .avatar-img { width: 64px; height: 64px; object-fit: contain; }
.profile-card-avatar .avatar-img { width: 44px; height: 44px; object-fit: contain; }
.manage-profile-avatar .avatar-img { width: 36px; height: 36px; object-fit: contain; }
.map-hud-avatar .avatar-img { width: 36px; height: 36px; object-fit: contain; }
.avatar-img { display: block; }

/* Only ever used for a profile saved before the character cast existed. */
.avatar-emoji { font-size: 24px; line-height: 1; }
.profile-card-avatar .avatar-emoji,
.manage-profile-avatar .avatar-emoji,
.map-hud-avatar .avatar-emoji { font-size: 28px; }

.avatar-name { font-size: 12px; color: #5b6478; font-weight: 700; }

/* Maximus speaking on the splash — he is the host, not a decoration. */
.maximus-line {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0 0; padding: 8px 14px 8px 8px;
  background: rgba(67, 97, 238, 0.06);
  border: 2px solid rgba(67, 97, 238, 0.14);
  border-radius: 999px;
}
.maximus-line-avatar { width: 40px; height: 40px; object-fit: contain; flex: none; }
.maximus-line-text { font-size: 13px; color: #35405c; margin: 0; font-weight: 600; }
.maximus-line-text.pop { animation: maximus-pop .38s ease-out; }
@keyframes maximus-pop {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.profile-setup h3 { margin: 16px 0 8px 0; font-size: 14px; color: #5b6478; }

.primary-btn {
  background: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%);
  color: white;
  border: none;
  border-radius: 16px;
  padding: 14px 24px;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
  margin-top: 16px;
  width: 100%;
}
.primary-btn:hover { transform: translateY(-1px); }
.primary-btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
/* The Next button while the tutor is still talking. It was a plain grey
   disabled button with nothing else: no reason, no end in sight. Now it carries
   a travelling sheen (something is happening) and the bubble above it carries
   the listening bars (here is what), then it pops when it becomes tappable. */
.lesson-next-btn-waiting {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #cfd8dc, #b0bec5);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9);
}
.lesson-next-btn-waiting::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: waiting-sheen 1.5s linear infinite;
}
@keyframes waiting-sheen { to { transform: translateX(100%); } }
@keyframes next-ready {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.lesson-next-btn-ready { animation: next-ready var(--motion-slow) var(--ease-pop); }
.primary-btn:disabled,
.primary-btn[disabled] {
  background: linear-gradient(135deg, #cfd8dc, #b0bec5);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

.track-link-row {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
  flex-wrap: wrap;
}
.track-link-btn {
  background: rgba(43,45,66,0.06);
  color: #5b6478;
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}
.track-link-btn:hover { background: rgba(43,45,66,0.12); }
/* Which build this device is running. Small and quiet, but visible on the first
   screen so a support question ("is the unlock fix in your copy?") is answered by
   looking rather than guessing. Updated by npm run bump. */
.build-tag {
  align-self: center;
  color: #9aa4b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0 4px;
  user-select: none;
}

/* ---------- map screen ---------- */
#screen-map .map-hud {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 16px;
  padding: 8px 14px;
}
.map-hud-avatar { font-size: 28px; }
.map-hud-name { font-weight: 700; }

.island {
  width: 100%;
  background: rgba(255,255,255,0.95);
  border: 3px solid transparent;
  border-radius: 24px;
  padding: 18px 16px;
  margin-bottom: 12px;
  display: flex; gap: 16px; align-items: center;
  box-shadow: 0 4px 12px rgba(43,45,66,0.08);
  position: relative;
}
.island:hover:not(:disabled) { transform: translateY(-2px); }
.island:disabled { opacity: .55; }

/* ---------- the trail ----------
   Seventy islands used to be a plain list. They now hang off a rail down the
   left, with a node per island and Maximus standing at the one the child should
   head for, so the map reads as a journey with a you-are-here rather than a
   menu. The gutter is small on purpose: it costs a phone about thirty pixels of
   card width, and the cards themselves are the tap targets. */
#islands-container { position: relative; padding-left: 30px; }
#islands-container::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 30px;
  width: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, #cfd8dc 0 8px, transparent 8px 16px);
}
.island::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #cfd8dc;
}
.island.unlocked::after { border-color: #4cc9f0; }
.island.passed::after { border-color: #4cd97b; }
.island.island-next::after {
  border-color: #ff9f1c;
  box-shadow: 0 0 0 6px rgba(255, 159, 28, 0.18);
}
/* Maximus, stood on the trail at the next island. */
.island-walker {
  position: absolute;
  left: -34px;
  top: -16px;
  width: 38px; height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(43, 45, 66, 0.25));
}
.island-next { border-color: rgba(255, 159, 28, 0.55); }
.island-emoji {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f6fafd, #e2f0ff);
  border-radius: 20px;
  overflow: hidden;
}
/* The friend who fronts this island, replacing the old emoji marker. */
.island-character { width: 72px; height: 72px; object-fit: contain; }
.island:disabled .island-character { filter: grayscale(.65); opacity: .8; }

/* Maximus as the map's trail guide -- the same host idea as the splash. */
.map-guide {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px 0; padding: 8px 16px 8px 8px;
  background: rgba(67, 97, 238, 0.06);
  border: 2px solid rgba(67, 97, 238, 0.14);
  border-radius: 999px;
}
.map-guide-avatar { width: 44px; height: 44px; object-fit: contain; flex: none; }
.map-guide-text { font-size: 14px; color: #35405c; margin: 0; font-weight: 700; }
.island-title { font-size: 1.2rem; font-weight: 700; }
.island-stars { font-size: 18px; margin-top: 4px; }
/* Earned against not-yet-earned, the same way the victory screen shows them. */
.island-stars .star.empty { filter: grayscale(1); opacity: 0.3; }
.island-lock {
  position: absolute; top: 12px; right: 12px;
  font-size: 22px;
}

/* ---------- lesson screen ---------- */
.lesson-part {
  background: rgba(255,255,255,0.95);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(43,45,66,0.12);
  margin-top: 16px;
  position: relative;
  animation: popIn .35s ease;
}
@keyframes popIn {
  0% { transform: scale(.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.lesson-instruction { text-align: center; }
.lesson-instruction-mascot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 132px; height: 132px;
  margin-bottom: 12px;
  animation: bobbing 3s ease-in-out infinite;
}
/* The tutor's own art, so no coloured disc behind him any more. */
.lesson-mascot-img { width: 100%; height: 100%; object-fit: contain; }
@keyframes bobbing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.lesson-instruction-bubble {
  position: relative;
  background: white;
  border: 2px solid #e2f0ff;
  border-radius: 18px;
  padding: 16px;
  margin: 12px auto;
  max-width: 480px;
  font-size: 1.05rem;
  transition: transform var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
/* Tapping the tutor repeats him, so a child who missed the line — or could not
   read it over a noisy classroom — does not have to leave the lesson to hear it
   again. The speaker icon makes the affordance visible rather than a hidden
   gesture. */
.lesson-instruction-bubble.is-replayable { cursor: pointer; padding-right: 54px; }
.lesson-instruction-bubble.is-replayable:active { transform: scale(.985); }
.lesson-instruction-bubble.is-replayable:hover { border-color: #b9d4f5; }
.replay-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(67, 97, 238, 0.10);
  color: #4361ee;
}
/* It pops when it is replayed, so the child sees that the tap landed even
   before the voice starts. */
@keyframes bubble-replay {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.lesson-instruction-bubble.is-speaking { animation: bubble-replay var(--motion-slow) var(--ease-pop); }

/* Three bars riding the tutor's voice. Without this, "Next" sat grey and
   silent for several seconds — a dead end with no reason and no end in sight,
   which is exactly the state a 5-year-old reads as "broken". They sit beside
   the speaker glyph rather than under the text, so a two-line blurb does not
   push them onto their own stray-looking line. */
.tts-bars {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 16px;
}
.tts-bars i {
  width: 3px; border-radius: 2px; background: #4361ee;
  transform-origin: bottom;
  animation: tts-bar .9s ease-in-out infinite;
}
.tts-bars i:nth-child(1) { height: 7px;  animation-delay: 0s; }
.tts-bars i:nth-child(2) { height: 13px; animation-delay: .15s; }
.tts-bars i:nth-child(3) { height: 9px;  animation-delay: .3s; }
@keyframes tts-bar {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1.1); }
}
.lesson-instruction-visual { margin: 16px 0; }

.number-walk, .number-line-recap {
  display: flex; gap: 4px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
/* A row of number sentences — one pill each, with a gap between them, so
   "9 + 1 = 10" and "8 + 2 = 10" cannot read as one wrong sum. */
.equation-walk, .plenary-ppw {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.number-walk-cell, .number-line-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #4cc9f0, #4361ee);
  color: white; border-radius: 12px;
  font-weight: 700; font-size: 1.2rem;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.number-walk-cell-active {
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  color: white;
  transform: scale(1.18);
  box-shadow: 0 8px 20px rgba(255, 159, 28, 0.45);
}
/* The count is the one thing in the app that loops, and it used to loop by
   animating box-shadow: a full repaint of the cell 60 times a second on a
   low-end tablet, for the whole walk. The pulse is now a ring that scales and
   fades, which the compositor can do without repainting. */
.number-walk-cell-active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 3px solid rgba(255, 159, 28, 0.8);
  pointer-events: none;
  animation: walkPulse 0.9s ease-in-out infinite alternate;
}
@keyframes walkPulse {
  0%   { transform: scale(1); opacity: .45; }
  100% { transform: scale(1.2); opacity: .95; }
}
.number-walk-arrow, .number-line-arrow {
  font-size: 1.2rem;
  color: #4cc9f0;
}

/* The pill belongs to the sentence, not to the row. It used to be on the
   container (.plenary-ppw) while the pieces — .plenary-ppw-piece — had no rule
   at all, so "9 + 1 = 10", "8 + 2 = 10", "7 + 3 = 10" and "6 + 4 = 10" rendered
   as one unbroken "9 + 1 = 108 + 2 = 107 + 3 = 106 + 4 = 10": three number
   sentences that are simply false. Lessons 03, 06 and 07 show this on their
   instruction and plenary screens. */
.plenary-ppw-piece, .equation-walk-piece {
  display: inline-block;
  background: rgba(76,201,240,0.16);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 700;
}

.lesson-plenary-cap {
  text-align: center;
  font-style: italic;
  color: #5b6478;
  margin: 12px 0;
}
/* The tutor closing the lesson, in his thumbs-up pose. */
.lesson-plenary-tutor {
  display: block;
  width: 116px; height: 116px;
  margin: 0 auto 4px;
  object-fit: contain;
  animation: popIn var(--motion-slow) var(--ease-pop) both;
}

.lesson-reward {
  text-align: center;
}

/* ---------- lesson progress ----------
   The engines have always reported per-round progress and the runner dropped
   it, so a child had no way to tell how much of the lesson was left. The bar
   fills with transform: scaleX (compositor, no layout) from one element that
   lives for the whole lesson, so it animates continuously from the first round
   to the sticker instead of snapping at each part boundary. */
.lesson-progress {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(43, 45, 66, 0.10);
  overflow: hidden;
}
.lesson-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #4cc9f0, #4361ee);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform var(--motion-slow) var(--ease-standard);
}
.lesson-progress-done .lesson-progress-fill {
  background: linear-gradient(90deg, #ffd166, #4cd97b);
}

/* ---------- reward: the one moment allowed to take its time ---------- */
.lesson-reward { position: relative; }
.reward-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 8px;
}
.reward-buddy-img {
  width: 104px; height: 104px;
  object-fit: contain;
  animation: reward-buddy-in var(--motion-celebrate) var(--ease-pop) both;
}
@keyframes reward-buddy-in {
  0%   { transform: translateY(16px) scale(.7); opacity: 0; }
  60%  { transform: translateY(0) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.reward-badge {
  position: relative;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff7de, #ffd166 62%, #ff9f1c);
  box-shadow: 0 12px 26px rgba(255, 159, 28, 0.38),
              inset 0 -6px 0 rgba(180, 110, 0, 0.16);
  animation: stickerPop var(--motion-celebrate) var(--ease-pop) both;
}
/* One shine sweep across the sticker as it lands. */
.reward-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: reward-shine 1.1s ease-out .5s 1 forwards;
  pointer-events: none;
}
@keyframes reward-shine { to { transform: translateX(120%); } }
.reward-badge-star { font-size: 74px; line-height: 1; }
.reward-confetti-field {
  position: absolute;
  inset: -24px 0 0 0;
  overflow: hidden;
  pointer-events: none;
}
.reward-confetti {
  position: absolute;
  top: -16px;
  width: 9px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 1.6s var(--ease-standard) forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(240px) rotate(340deg); opacity: 0; }
}
@keyframes stickerPop {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.lesson-skip { text-align: center; padding: 32px 16px; }
.lesson-skip h2 { color: #4361ee; }

.lesson-activity-frame { }
.lesson-activity-header h2 { color: #2b2d42; }
.lesson-activity-header p { color: #5b6478; margin: 0 0 16px 0; }
.lesson-activity-container { margin-top: 12px; }

/* ---------- activity shared ---------- */
.activity-container { padding: 8px; }
.activity-header h2 { font-size: 1.4rem; }
.activity-counter {
  text-align: center;
  margin-top: 16px;
  color: #5b6478;
  font-size: 13px;
}
.animate-pop { animation: popIn .35s ease; }

/* count_objects */
.count-objects-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #f6fafd, #e2f0ff);
  border-radius: 18px;
  margin-bottom: 16px;
  min-height: 100px;
}
.count-objects-item {
  font-size: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
}
/* The counting objects are drawn in-app (js/counting_art.js) rather than taken
   from the device's emoji font, so they are identical everywhere and each one
   can be animated on its own. */
.count-objects-item .art-object { width: 100%; height: 100%; display: block; }
.count-objects-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.count-objects-option-btn,
.ten-frame-option-btn,
.compare-option-btn,
.order-number-btn,
.ppw-option-btn,
.make-option-btn,
.missing-option-btn,
.story-option-btn {
  border: 3px solid #e2f0ff;
  background: white;
  border-radius: 18px;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 18px;
  color: #2b2d42;
  /* Keeps the global press transition, and animates the border/colour that the
     correct/incorrect states change. (The state *fills* are gradients, which
     CSS cannot interpolate — that is why the reveal also moves: the motion, not
     the fade, is what tells the child the state changed.) */
  transition: transform var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.count-objects-option-btn:hover,
.ten-frame-option-btn:hover,
.compare-option-btn:hover,
.order-number-btn:hover,
.ppw-option-btn:hover,
.make-option-btn:hover,
.missing-option-btn:hover,
.story-option-btn:hover { transform: scale(1.04); }
.count-objects-option-btn.correct,
.ten-frame-option-btn.correct,
.compare-option-btn.correct,
.order-number-btn.correct,
.ppw-option-btn.correct,
.make-option-btn.correct,
.missing-option-btn.correct,
.story-option-btn.correct {
  background: linear-gradient(135deg, #a8e6a3, #4cd97b);
  border-color: #4cd97b;
  color: white;
}
.count-objects-option-btn.incorrect,
.ten-frame-option-btn.incorrect,
.compare-option-btn.incorrect,
.order-number-btn.incorrect,
.ppw-option-btn.incorrect,
.make-option-btn.incorrect,
.missing-option-btn.incorrect,
.story-option-btn.incorrect {
  background: linear-gradient(135deg, #ffb4b4, #ff5a5f);
  border-color: #ff5a5f;
  color: white;
}

/* ---------- answer feedback motion ----------
   Colour alone is a weak signal for a 4-8 year old, and no signal at all to a
   colour-blind child (about 1 in 12 boys). These classes add the movement half
   of the feedback: the wrong tap shakes, the right answer is then revealed on
   screen, and the count-along lights the objects one at a time. Everything
   animates transform/opacity only, so it stays on the compositor on a cheap
   Android tablet. Applied from activities/_base.js, so all ~48 engines get it. */
@keyframes feedback-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  35% { transform: translateX(6px); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(3px); }
}
.feedback-shake { animation: feedback-shake var(--motion-slow) var(--ease-standard); }

@keyframes feedback-spark {
  0%   { transform: scale(.85); opacity: .85; }
  100% { transform: scale(1.5); opacity: 0; }
}
.feedback-spark { position: relative; }
.feedback-spark::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 4px solid rgba(76, 217, 123, 0.9);
  pointer-events: none;
  animation: feedback-spark var(--motion-slow) var(--ease-standard) forwards;
}

@keyframes feedback-reveal {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* What the right answer was, on screen. Until now a wrong round ended with a
   red button and the answer spoken only, so a child who could not decode the
   word never saw the correction.
   The colour half of this rule lives at the END of the stylesheet, on purpose:
   engines style their own correct state with two-class rules, and equal
   specificity is settled by document order. */

/* Counting, as motion: each object lights up in turn, in the order a child
   counts. The stagger delay is set per element from _base.js. */
@keyframes count-tick {
  0%   { transform: translateY(0) scale(.86); opacity: .35; }
  45%  { transform: translateY(-10px) scale(1.18); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.count-along { animation: count-tick var(--motion-base) var(--ease-pop) both; }

/* ---------- the cast, reacting (www/js/scene.js) ----------
   Maximus and the child's friend, on screen DURING a lesson rather than only
   at the start and the end of it. Two moments: the friend picks the child up
   after two misses in a row, and Maximus beats his chest when a set is
   finished. See docs/MOTION_PLAN.md for the ladder.

   Every rule here animates transform and opacity only, so it stays on the
   compositor — the same rule the rest of this file follows. */

.scene-root {
  /* Fixed to the VIEWPORT, not to the activity container.
     Docking inside the container put the cast on top of the bottom row of
     answer buttons — exactly where a child taps — and moved them around
     whenever the round's content changed height. Pinned to the bottom corners
     of the screen they are in the same place every round, out of the way of
     the answers, and they read as the app talking rather than as part of the
     question. */
  position: fixed;
  inset: 0;
  pointer-events: none; /* the cast never eats a tap meant for an answer */
  z-index: 40;
}

/* The friend, docked in the corner. 100px: big enough to read an expression
   on a tablet at arm's length, small enough not to crowd the answer buttons,
   which are the things the child actually has to hit. */
.scene-actor {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.scene-actor-buddy {
  right: 12px;
  bottom: 12px;
  width: 100px;
  height: 100px;
}
/* Maximus is the tutor and takes the other corner, so the two of them frame
   the activity rather than stacking on top of each other.
   108px normally. The two emotional peaks — the sad beat and the chest-beat —
   double him (see .scene-actor-big), because those are the moments the child is
   meant to READ his face, and at 108px in the corner they were easy to miss. */
.scene-actor-tutor {
  left: 12px;
  bottom: 12px;
  width: 108px;
  height: 108px;
}
/* Twice the size for the beats that carry the emotional weight. Scaling the BOX
   rather than the image keeps the transform free for the slump and chest-beat
   animations, and the actor stays anchored to the corner so the bigger figure
   grows up and inward, not off-screen. */
.scene-actor-big {
  width: 216px;
  height: 216px;
}
.scene-actor-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(43, 45, 66, .22));
}

.scene-enter { animation: scene-enter var(--motion-slow) var(--ease-pop) both; }
@keyframes scene-enter {
  0%   { opacity: 0; transform: translateY(18px) scale(.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.scene-leave { animation: scene-leave var(--motion-base) var(--ease-standard) both; }
@keyframes scene-leave {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(14px) scale(.86); }
}

/* Maximus registers the miss. A slow slump, not a flinch: this is sympathy,
   not a buzzer. */
.reaction-slump { animation: reaction-slump var(--motion-slow) var(--ease-standard) both; }
@keyframes reaction-slump {
  0%   { transform: translateY(-10px) scale(1.04); }
  55%  { transform: translateY(4px) scale(.97) rotate(-1.5deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

/* The friend arrives with energy. */
.reaction-pop { animation: reaction-pop var(--motion-slow) var(--ease-pop) both; }
@keyframes reaction-pop {
  0%   { opacity: 0; transform: translateY(24px) scale(.7); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The chest-thump: the one piece of motion in the app that is pure celebration
   rather than information, so it is short and it lands twice. Driven from the
   chest pose that already ships — no new art, and no new bytes. */
.chest-beat { animation: chest-beat var(--motion-celebrate) var(--ease-pop) both; }
@keyframes chest-beat {
  0%   { transform: scale(1) translateY(0); }
  18%  { transform: scale(1.07) translateY(-6px); }
  34%  { transform: scale(.98) translateY(2px); }
  50%  { transform: scale(1.05) translateY(-4px); }
  66%  { transform: scale(.99) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}

/* ten_frame */
.ten-frame-grid {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: white;
  border-radius: 12px;
  border: 2px solid #cfd8dc;
  margin: 0 auto 16px auto;
  width: max-content;
}
.ten-frame-cell {
  width: 56px; height: 56px;
  background: #f6fafd;
  border: 2px solid #e2f0ff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.ten-frame-dot {
  width: 36px; height: 36px;
  background: radial-gradient(circle at 30% 30%, #ff7b7b, #d6404b);
  border-radius: 50%;
}
.ten-frame-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* compare_groups */
/* Two groups side by side, and nothing between them: the old layout put "=" in
   the middle exactly when the groups were equal, which handed the child the
   answer to "are these equal?" without counting. */
.compare-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 12px;
  margin: 12px 0;
}
.compare-group {
  padding: 16px;
  background: linear-gradient(135deg, #fff8d1, #ffe896);
  border-radius: 16px;
  text-align: center;
  border: 3px solid transparent;
  font-family: inherit;
  color: inherit;
}
.compare-group-b { background: linear-gradient(135deg, #d1f0ff, #9ed5ff); }
/* The tapped group in the same green and red every other activity uses.
   Without this the card the child tapped stayed yellow — the engine set
   .correct/.incorrect and nothing in the stylesheet rendered either, so a wrong
   tap was acknowledged only by the shake and a right one only by the spark. */
.compare-group.correct,
.compare-group.incorrect { color: #fff; }
.compare-group.correct {
  background: linear-gradient(135deg, #a8e6a3, #4cd97b);
  border-color: #4cd97b;
}
.compare-group.incorrect {
  background: linear-gradient(135deg, #ffb4b4, #ff5a5f);
  border-color: #ff5a5f;
}
/* In a "which has more?" round the card IS the answer, so it is a button: a big
   tap target, a press state, and reachable by keyboard or a switch. */
.compare-group-tap { cursor: pointer; }
.compare-group-tap:hover { border-color: rgba(67, 97, 238, 0.35); }
.compare-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 60px; }
.compare-dot { font-size: 28px; color: #2b2d42; }
.compare-label { font-weight: 700; margin-top: 8px; }
.compare-vs { font-size: 28px; font-weight: 700; color: #5b6478; }
.compare-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* order_numbers */
.order-numbers-stage { margin: 12px 0; }
.order-numbers-choices {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.order-number-btn:disabled, .order-number-btn.picked {
  background: rgba(43,45,66,0.06);
  color: #5b6478;
  border-color: rgba(43,45,66,0.06);
  transform: none;
}
.order-numbers-preview {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin-top: 12px;
}
.order-slot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 700;
  background: white;
  border: 2px dashed #cfd8dc;
  color: #5b6478;
}
.order-slot.filled { background: linear-gradient(135deg, #a8e6a3, #4cd97b); color: white; border: none; }
.order-arrow { color: #4cc9f0; font-size: 1.4rem; }

/* part-part-whole */
.ppw-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f6fafd;
  border-radius: 16px;
  margin-bottom: 12px;
}
.ppw-half { background: white; border-radius: 12px; padding: 8px; text-align: center; }
.ppw-half-title { font-weight: 700; margin-bottom: 6px; }
.ppw-grid {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 4px;
  justify-content: center;
}
.ppw-cell {
  width: 28px; height: 28px;
  background: #f0f4f8;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.ppw-dot { width: 18px; height: 18px; border-radius: 50%; }
.ppw-dot-red { background: radial-gradient(circle at 30% 30%, #ff7b7b, #d6404b); }
.ppw-dot-blue { background: radial-gradient(circle at 30% 30%, #7bb5ff, #406ad6); }
.ppw-total {
  font-size: 2.2rem;
  font-weight: 700;
  color: #5b6478;
  text-align: center;
}
.ppw-question { text-align: center; font-size: 1.1rem; font-weight: 700; margin: 12px 0; }
.ppw-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* pattern_builder */
.pat-strip {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.pat-cell {
  width: 44px; height: 44px;
  background: #f0f4f8;
  border-radius: 10px;
  border: 2px dashed #c9d4e0;
  display: flex; align-items: center; justify-content: center;
}
.pat-cell.pat-q {
  border-color: #f0a833;
  background: #fff7e8;
  font-size: 1.4rem;
  font-weight: 700;
  color: #8a6d1f;
}
.pat-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-block; }
.pat-dot-c0 { background: radial-gradient(circle at 30% 30%, #ff7b7b, #d6404b); }
.pat-dot-c1 { background: radial-gradient(circle at 30% 30%, #7bb5ff, #406ad6); }
.pat-dot-c2 { background: radial-gradient(circle at 30% 30%, #8fdc8f, #2f9e44); }
.pat-dot-c3 { background: radial-gradient(circle at 30% 30%, #ffe066, #e8b931); }
.pat-hint { text-align: center; color: #5b6478; font-size: 0.95rem; margin: 6px 0 12px; }
.pat-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}
.pat-option-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px;
  border-radius: 14px;
  font-size: 1rem;
}
.pat-option-word { text-transform: capitalize; }

/* shape_picker */
.shp-svg { width: 64px; height: 64px; }
/* The shape recap strip (lessons 10, 28, 42). Neither the row nor its cards had
   a rule, so each card filled the width and they stacked: a "walk" of shapes
   came out as a column of four full-width boxes. */
.shape-walk {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: stretch; justify-content: center;
}
.shape-walk-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 96px;
  padding: 10px 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2b2d42;
  text-transform: capitalize;
}
.shp-stage { text-align: center; margin: 8px 0 12px; }
.shp-stage .shp-svg { width: 96px; height: 96px; }
.shp-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}
.shp-option-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px;
  border-radius: 14px;
  font-size: 0.95rem;
}
.shp-option-btn .shp-svg { width: 52px; height: 52px; }
.shp-option-word { text-transform: capitalize; }
.shp-scene {
  position: relative;
  height: 150px;
  margin: 10px auto 12px;
  max-width: 260px;
  background: linear-gradient(#eaf3fb 70%, #dceadf 70%);
  border-radius: 12px;
  border: 2px solid #c9d4e0;
}
.shp-table {
  position: absolute;
  left: 50%; bottom: 40px;
  transform: translateX(-50%);
  width: 180px; height: 14px;
  background: #b07d4f;
  border-radius: 4px;
  text-align: center;
  font-size: 0.65rem;
  color: #fff;
  line-height: 14px;
}
.shp-toy { position: absolute; font-size: 34px; line-height: 1; }
.shp-toy-on { left: 66px; bottom: 58px; }
.shp-toy-under { left: 110px; bottom: 12px; }
.shp-toy-beside { right: 12px; bottom: 60px; }
.shp-option-toy .shp-toy-emoji { font-size: 30px; }

/* skip_count */
.skip-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.skip-chip {
  min-width: 44px; height: 44px;
  padding: 0 8px;
  background: #eef3fb;
  border-radius: 10px;
  border: 2px solid #c9d4e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #2b2d42;
}
.skip-chip-q {
  border-color: #f0a833;
  background: #fff7e8;
  color: #8a6d1f;
}
.skip-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 14px auto 0;
}
.skip-option-btn {
  padding: 12px;
  border-radius: 14px;
  font-size: 1.15rem;
}

/* make_number */
.make-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f6fafd;
  border-radius: 16px;
  margin-bottom: 12px;
}
.make-half {
  background: white; border-radius: 12px; padding: 18px;
  text-align: center; font-size: 1.6rem; font-weight: 700;
}
.make-half-unknown { background: rgba(76,201,240,0.16); }
.make-plus, .make-equals {
  font-size: 1.6rem; font-weight: 700; color: #5b6478; text-align: center;
}
.make-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* missing_number */
.missing-line {
  display: flex; justify-content: center; gap: 6px;
  padding: 16px;
  background: #f6fafd; border-radius: 16px;
  margin-bottom: 16px;
}
.missing-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: white; border-radius: 12px;
  font-size: 1.4rem; font-weight: 700;
}
.missing-slot {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  color: white;
  font-size: 1.6rem;
  font-weight: 700;
  border: none;
}
.missing-slot.revealed {
  background: linear-gradient(135deg, #a8e6a3, #4cd97b);
}
.missing-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* story_problem */
.story-scene {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  font-size: 36px;
  margin: 12px 0;
  padding: 12px;
  background: #f6fafd;
  border-radius: 16px;
}
.story-item.story-taken { opacity: 0.3; text-decoration: line-through; }
.story-question {
  text-align: center; font-size: 1.05rem; font-weight: 700; margin: 12px 0;
}
.story-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ---------- victory modal ---------- */
.victory-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(43,45,66,0.55);
  z-index: 1000;
}
.victory-modal.active { display: flex; }
.victory-content {
  width: min(520px, 92vw);
  text-align: center;
}
.victory-crown { font-size: 56px; }
/* Maximus hands over the win, rather than a trophy emoji doing it. */
.victory-mascot {
  width: 132px; height: 132px; object-fit: contain;
  display: block; margin: 0 auto;
  animation: bobbing 3s ease-in-out infinite;
}
.victory-title { font-size: 1.6rem; }
.victory-stars { margin: 12px 0; }
.victory-star { font-size: 36px; }
.victory-star.earned { filter: none; }
.victory-star.empty { filter: grayscale(0.7); opacity: 0.55; }

/* unlock gate modal */
.unlock-gate-question {
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}
.unlock-gate-input { width: 80px; text-align: center; font-size: 1.2rem; }
.unlock-gate-error { color: #d6404b; min-height: 20px; margin: 4px 0; }
.unlock-gate-actions { display: flex; gap: 8px; justify-content: center; }

/* parents' options panel */
.parents-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.parents-actions .primary-btn,
.parents-actions .track-link-btn { width: 100%; }
.status-line {
  margin: 10px 0 0;
  min-height: 20px;
  font-size: 0.95rem;
  color: #3c7a4e;
  text-align: center;
}

/* manage profiles */
.manage-profiles-list { margin: 12px 0; }
.manage-profile-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.9);
  border-radius: 12px; padding: 8px 12px; margin-bottom: 8px;
}
.manage-profile-avatar { font-size: 28px; }
.manage-profile-name { flex: 1; font-weight: 700; }
.manage-profile-delete-btn {
  background: rgba(255,90,95,0.15);
  color: #d6404b; border: none; border-radius: 10px;
  padding: 6px 12px; font-weight: 700;
}

.backup-panel {
  margin-top: 16px;
  text-align: left;
}
.backup-title { font-size: 14px; }
.backup-hint { font-size: 12px; color: #5b6478; }
.profile-transfer-text { width: 100%; min-height: 60px; font-family: monospace; }
.backup-actions { display: flex; gap: 8px; }

/* ---------- sticker book ---------- */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.sticker-cell {
  background: rgba(255,255,255,0.85);
  border-radius: 16px; padding: 12px;
  text-align: center;
}
.sticker-cell.earned { background: linear-gradient(135deg, #fff3c4, #ffd166); }
/* Every sticker is a badge holding the lesson's own buddy — the same character
   that fronts that lesson's island on the map — so no two stickers look alike
   and the book is a record of who you met, not a wall of identical stars. */
.sticker-badge {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff, #eef4fb 68%, #dbe6f3);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9), 0 4px 10px rgba(43,45,66,0.10);
}
.sticker-cell.earned .sticker-badge {
  background: radial-gradient(circle at 34% 28%, #fff8e2, #ffd166 66%, #ff9f1c);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.85), 0 6px 14px rgba(255,159,28,0.36);
}
.sticker-friend { width: 58px; height: 58px; object-fit: contain; }
/* A locked sticker shows the friend as a silhouette: the shape of what is
   coming, rather than a "?" that says nothing. */
.sticker-cell.locked .sticker-friend { filter: grayscale(1) opacity(.38); }
.sticker-label { font-weight: 700; margin-top: 4px; font-size: 13px; line-height: 1.25; }
.sticker-cell.locked .sticker-label { color: #7c8599; font-weight: 600; }
.sticker-locked-tag { font-size: 11px; color: #9aa4b8; font-weight: 700; letter-spacing: 0.04em; }
@keyframes sticker-arrive {
  0%   { transform: scale(.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sticker-arrive { animation: sticker-arrive var(--motion-slow) var(--ease-pop) both; }

/* ---------- report ---------- */
.report-section { padding: 10px 0; border-bottom: 1px solid rgba(43,45,66,0.08); }
.report-section:last-child { border-bottom: none; }
.report-section h3 { font-size: 14px; color: #5b6478; text-transform: uppercase; letter-spacing: 0.04em; }

.legal-body { background: rgba(255,255,255,0.9); border-radius: 16px; padding: 18px; margin-top: 12px; }
.legal-body h1 { font-size: 1.4rem; }
.legal-body h2 { font-size: 1.05rem; color: #4361ee; margin-top: 18px; }

.hud-header {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.9);
  border-radius: 14px; padding: 8px 12px; margin-bottom: 12px;
}
.circle-btn {
  background: rgba(43,45,66,0.08);
  color: #2b2d42;
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 16px;
}
.hud-level-info h2 { font-size: 1.1rem; margin: 0; }
.hud-controls { flex: 1; }

@media (max-width: 600px) {
  #app-viewport { padding: 12px; }
  .count-objects-options { grid-template-columns: repeat(2, 1fr); }
  .ppw-options, .make-options, .missing-options, .story-options, .ten-frame-options {
    grid-template-columns: repeat(4, 1fr);
  }
  .compare-stage { grid-template-columns: 1fr; }
  .ppw-stage, .make-stage { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .ppw-total, .make-plus, .make-equals { grid-column: span 2; }
}

/* place_value_builder */
.pv-stage { text-align: center; margin: 8px 0 12px; }
.pv-picture {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  padding: 12px;
  background: #f6fafd;
  border-radius: 12px;
  border: 2px solid #c9d4e0;
}
.pv-ten-block {
  width: 44px; height: 34px;
  background: #406ad6;
  color: #fff;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.pv-ones { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; max-width: 90px; }
.pv-one-dot { width: 16px; height: 16px; border-radius: 50%; background: #d6404b; }
.pv-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.pv-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
.pv-build-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 340px;
  margin: 12px auto 0;
}
.pv-build-option { padding: 10px; border-radius: 14px; }
.pv-build-option .pv-picture { background: transparent; border: none; padding: 0; }
/* Three-digit pictures (lesson 31): a hundred is one labelled tile, taller and
   warmer than a ten so the column reads at a glance. */
.pv-hundred-block {
  width: 58px; height: 58px;
  background: #f0a833;
  color: #4a3308;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}
.pv-picture-3 { row-gap: 10px; }

/* clock_face */
.clock-stage { text-align: center; margin: 6px 0 12px; }
.clock-face { width: 150px; height: 150px; }
.clock-question { text-align: center; font-size: 1.15rem; font-weight: 700; margin: 10px 0; }
.clock-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}
.clock-option-btn { padding: 12px 8px; border-radius: 14px; font-size: 1rem; text-transform: capitalize; }

/* measure */
.ms-compare { display: flex; gap: 14px; justify-content: center; margin: 10px 0 14px; }
.ms-card {
  flex: 1; max-width: 150px;
  background: #f6fafd;
  border-radius: 12px;
  border: 2px solid #c9d4e0;
  padding: 10px;
  text-align: center;
}
.ms-card-visual { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.ms-card-label { margin-top: 6px; font-size: 0.9rem; color: #5b6478; }
.ms-bar { display: flex; align-items: flex-end; gap: 2px; }
.ms-block { width: 18px; height: 18px; border-radius: 3px; }
.ms-bar-a .ms-block { background: #406ad6; }
.ms-bar-b .ms-block { background: #2f9e44; }
.ms-emoji { font-size: 40px; }
.ms-jug {
  width: 56px; height: 90px;
  border: 3px solid #2b2d42;
  border-top: none;
  border-radius: 0 0 12px 12px;
  position: relative;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #fff;
}
.ms-jug-fill { width: 100%; }
.ms-jug-a { background: #7bb5ff; }
.ms-jug-b { background: #8fdc8f; }
.ms-units-stage { text-align: center; margin: 12px 0; min-height: 40px; }
.ms-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.ms-option-btn { padding: 12px; border-radius: 14px; font-size: 1.1rem; }

/* coins */
.coins-stage { text-align: center; margin: 8px 0 12px; }
.coins-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.coin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.95rem;
  color: #2b2d42;
  border: 4px solid #2b2d42;
  box-shadow: inset 0 0 0 3px #fff;
  background: #e7c55e;
}
.coin-c5 { background: #c9b27e; }
.coin-c10 { background: #d4c48f; }
.coin-c20 { background: #c9b27e; }
.coin-c50 { background: #d7d7d7; }
.coin-c100 { background: #f4d478; }
.coin-c200 { background: #d4d0e8; }
.coin.picked { opacity: 0.45; }
/* A drawn coin brings its own size, shape and metal, so the wrapper drops the
   old uniform disc: the value is inside the SVG, and the size is the real coin's
   (see js/money_art.js). The wrapper keeps the `.coin`/`.picked` hooks the
   layout and the test harness use. */
.coin.coin-drawn {
  width: auto; height: auto;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.coin.coin-drawn svg { display: block; }
.coins-question { text-align: center; font-size: 1.05rem; font-weight: 600; margin: 10px 0; }
.coins-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 0 auto;
}
.coin-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; }

/* fraction_slicer */
.fr-stage { text-align: center; margin: 8px 0 12px; }
.fr-shape { width: 120px; height: 120px; }
.fr-set-stage { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 280px; margin: 10px auto; }
.fr-set-item { font-size: 30px; }
.fr-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}
.fr-option-btn { padding: 12px 8px; border-radius: 14px; font-size: 1rem; text-transform: capitalize; }

/* hundred_chart */
.hc-chart {
  display: grid;
  gap: 2px;
  margin: 10px auto;
  max-width: 480px;
  padding: 8px;
  background: #eef3fb;
  border-radius: 10px;
}
.hc-cell {
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #2b2d42;
  display: flex; align-items: center; justify-content: center;
  min-height: 22px;
  cursor: pointer;
  user-select: none;
}
.hc-blank {
  border-color: #f0a833;
  background: #fff7e8;
  color: #8a6d1f;
  font-weight: 700;
  cursor: default;
}
.hc-cell.hc-found { background: #c9efc9; outline: 2px solid #2f9e44; }
.hc-cell.incorrect { background: #ffd9d9; }
.hc-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 10px auto 0;
}
.hc-option-btn { padding: 12px; border-radius: 14px; font-size: 1.1rem; }

/* equal_groups */
.eg-stage { text-align: center; margin: 10px 0 12px; }
.eg-groups-visual {
  display: grid;
  gap: 12px;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 12px;
  background: #f6fafd;
}
.eg-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 6px;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
  background: #fff;
  align-content: center;
}
.eg-share {
  display: grid;
  gap: 12px;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 12px;
  background: #f6fafd;
}
.eg-share-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 6px;
  border: 2px dashed #c9d4e0;
  border-radius: 10px;
  background: #fff;
}
.eg-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7bb5ff, #406ad6);
}
.eg-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 10px auto 0;
}
.eg-option-btn { padding: 12px; border-radius: 14px; font-size: 1.1rem; }

/* direction_maze */
.dm-grid {
  display: grid;
  gap: 4px;
  max-width: 300px;
  margin: 10px auto;
}
.dm-cell {
  aspect-ratio: 1;
  background: #f0f4f8;
  border: 2px solid #c9d4e0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
}
.dm-start { background: #fff7e8; border-color: #f0a833; }
.dm-star { background: #fffbe6; }
.dm-moves { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dm-move-chip {
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.95rem;
  text-transform: capitalize;
}
.dm-arrow { color: #5b6478; font-weight: 700; }
.dm-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 10px auto 0;
}
.dm-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; text-transform: capitalize; }

/* data_pictograph */
.dp-graph {
  max-width: 380px;
  margin: 10px auto;
  background: #f6fafd;
  border-radius: 12px;
  border: 2px solid #c9d4e0;
  padding: 10px;
}
.dp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
}
.dp-row-btn { cursor: pointer; }
.dp-row-btn:hover { background: #eaf3fb; }
.dp-label { min-width: 90px; font-size: 0.95rem; font-weight: 600; text-transform: capitalize; }
.dp-pics { display: flex; gap: 4px; flex-wrap: wrap; }
.dp-pic { font-size: 26px; }
/* A drawn object fills the space its emoji used to take, so swapping one for the
   other does not move anything else on the row. Sizes are the emoji they
   replace: 26px in a pictograph row, a shade smaller in a table or a column
   label. See js/counting_art.js. */
.dp-pic .art-object { width: 26px; height: 26px; display: block; }
.ts-vote .art-object { width: 26px; height: 26px; display: block; }
.ts-table-choice .art-object { width: 20px; height: 20px; display: inline-block; vertical-align: -3px; }
.bg-col-label .art-object { width: 22px; height: 22px; display: block; margin: 0 auto; }
.bg-table-row .art-object { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }
.dp-question { text-align: center; font-size: 1.1rem; font-weight: 700; margin: 10px 0; }
.dp-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 10px auto 0;
}
.dp-option-btn { padding: 12px; border-radius: 14px; font-size: 1.1rem; }

/* number_line_hunt */
.nlh-track { max-width: 420px; margin: 14px auto; padding: 4px 6px 0; }
.nlh-line {
  position: relative;
  height: 40px;
  background: linear-gradient(#406ad6, #406ad6) no-repeat center / 100% 6px;
  display: flex;
  cursor: pointer;
}
.nlh-zone { flex: 1; height: 100%; }
.nlh-marker {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  background: #d6404b;
  color: #fff;
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  display: none;
}
.nlh-marker.shown { display: block; }
.nlh-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #5b6478;
  margin-top: 4px;
}
.nlh-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 460px;
  margin: 14px auto 8px;
}
.nlh-chip {
  min-width: 42px;
  padding: 8px 6px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 8px;
  text-align: center;
  font-size: 0.85rem;
  color: #2b2d42;
}
.nlh-missing-chip { border-color: #f0a833; background: #fff7e8; color: #8a6d1f; font-weight: 700; }
.nlh-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.nlh-option-btn { padding: 12px; border-radius: 14px; font-size: 1.1rem; }

/* column_add */
.column-add-activity { text-align: center; }
.ca-board {
  display: inline-block;
  margin: 6px auto 4px;
  padding: 12px 16px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.ca-heads, .ca-row { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 6px; }
.ca-heads { margin-bottom: 2px; }
.ca-head {
  width: 54px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b6478;
  font-weight: 700;
}
.ca-cell {
  width: 54px;
  padding: 6px 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2b2d42;
}
.ca-sum-row {
  border-top: 3px solid #2b2d42;
  padding-top: 8px;
  margin-top: 2px;
  margin-bottom: 0;
}
.ca-sum-row .ca-cell { color: #8a6d1f; }
.ca-sum-row .ca-cell.filled { color: #2f7d4f; }
.ca-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 14px auto 0;
}
.ca-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
.ca-caption {
  margin: 10px auto 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2f7d4f;
  min-height: 1.2em;
}

/* take_2digit */
.take-2digit-activity { text-align: center; }
.td-board {
  display: inline-block;
  margin: 6px auto 4px;
  padding: 12px 16px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.td-heads, .td-row { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 6px; }
.td-heads { margin-bottom: 2px; }
.td-head {
  width: 54px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b6478;
  font-weight: 700;
}
.td-cell {
  width: 54px;
  padding: 6px 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2b2d42;
}
/* The amount being taken away: dashed, so "this is leaving" reads instantly. */
.td-taken-row .td-cell {
  color: #a4545c;
  border: 2px dashed #e2b8bc;
  border-radius: 8px;
  padding: 4px 0;
}
.td-sum-row {
  border-top: 3px solid #2b2d42;
  padding-top: 8px;
  margin-top: 2px;
  margin-bottom: 0;
}
.td-sum-row .td-cell { color: #8a6d1f; }
.td-sum-row .td-cell.filled { color: #2f7d4f; }
.td-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 14px auto 0;
}
.td-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
.td-caption {
  margin: 10px auto 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2f7d4f;
  min-height: 1.2em;
}

/* array_builder */
.array-builder-activity { text-align: center; }
.ab-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  margin: 4px auto 8px;
  max-width: 420px;
  overflow-x: auto;
}
.ab-array {
  display: grid;
  gap: 6px;
  justify-content: center;
}
.ab-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #406ad6;
}
.ab-demo-array .ab-dot { width: 16px; height: 16px; background: #f0a833; }
.ab-caption {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #2f7d4f;
}
.ab-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.ab-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
.ab-array-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 12px auto 0;
}
.ab-array-option {
  padding: 10px;
  border-radius: 14px;
  overflow-x: auto;
}
.ab-array-option .ab-array { justify-content: center; }

/* double_half */
.double-half-activity { text-align: center; }
.dh-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  margin: 6px auto 10px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  max-width: 420px;
  flex-wrap: wrap;
}
.dh-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-content: flex-start;
  min-width: 74px;
  max-width: 120px;
  min-height: 74px;
  padding: 8px;
  background: #fff;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
}
.dh-group-hidden { border-style: dashed; border-color: #f0a833; background: #fff7e8; }
.dh-dot { width: 16px; height: 16px; border-radius: 50%; background: #406ad6; }
.dh-unknown { font-size: 1.6rem; font-weight: 800; color: #8a6d1f; line-height: 74px; }
.dh-plus { font-size: 1.5rem; font-weight: 800; color: #2b2d42; }
.dh-total { font-size: 1.6rem; font-weight: 800; color: #8a6d1f; min-width: 42px; }
.dh-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.dh-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
/* double_walk demo (instruction/plenary) */
.dh-demo { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 8px 0; }
.dh-demo-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dh-demo-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  font-weight: 700;
  color: #2b2d42;
  font-size: 0.95rem;
}

/* number_patterns */
.number-patterns-activity { text-align: center; }
.np-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 8px;
}
.np-chip {
  min-width: 52px;
  padding: 12px 8px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2b2d42;
}
.np-chip-q { border-color: #f0a833; background: #fff7e8; color: #8a6d1f; }
.np-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.np-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
.np-demo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0; }
.np-caption { font-size: 0.9rem; font-weight: 700; color: #2f7d4f; }

/* turns */
.turns-activity { text-align: center; }
.turn-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 132px;
  margin: 8px auto 6px;
  padding: 8px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.turn-svg { width: 74px; height: 74px; }
.turn-now { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6478; font-weight: 700; }
.turn-prompt { font-size: 0.9rem; color: #5b6478; margin-bottom: 4px; }
.turn-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 10px auto 0;
}
.turn-option { padding: 6px; border-radius: 12px; }
.turn-option .turn-svg { width: 52px; height: 52px; }
/* turn_demo (instruction/plenary) */
.turn-demo { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.turn-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.turn-demo-arrow { font-size: 1.6rem; }
.turn-demo-cap { font-size: 0.75rem; font-weight: 700; color: #5b6478; }

/* calendar_days */
.calendar-days-activity { text-align: center; }
.cal-stage { display: flex; justify-content: center; margin: 8px 0; }
.cal-week { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cal-day {
  min-width: 52px;
  padding: 10px 6px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
  font-weight: 700;
  color: #2b2d42;
}
.cal-day-name { font-size: 0.85rem; }
.cal-day-from { background: #d9e6ff; border-color: #406ad6; }
.cal-day-to { background: #ffe9c7; border-color: #f0a833; }
.cal-day-between { background: #f6fafd; border-style: dashed; }
.cal-day-between.cal-counted { background: #e2f6e6; border-color: #2f7d4f; border-style: solid; }
.cal-month {
  padding: 10px 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  max-width: 420px;
}
.cal-month-head { font-weight: 800; color: #2b2d42; margin-bottom: 8px; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-date {
  padding: 6px 0;
  border-radius: 8px;
  background: #eef3fb;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2b2d42;
}
.cal-date.cal-day-from { background: #d9e6ff; border: 2px solid #406ad6; }
.cal-date.cal-day-to { background: #ffe9c7; border: 2px solid #f0a833; }
.cal-date.cal-day-between { background: #fff; border: 2px dashed #c9d4e0; }
.cal-date.cal-day-between.cal-counted { background: #e2f6e6; border: 2px solid #2f7d4f; }
.cal-hint { font-size: 0.85rem; color: #5b6478; margin: 4px 0 0; }
.cal-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.cal-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }

/* solid_picker */
.solid-picker-activity { text-align: center; }
.sol-svg { width: 78px; height: 78px; }
.sol-stage {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  max-width: 200px;
  margin: 8px auto;
}
.sol-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 340px;
  margin: 12px auto 0;
}
.sol-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
}
.sol-option-word { font-size: 0.8rem; font-weight: 700; color: #5b6478; }
.sol-number-options { max-width: 300px; }
.sol-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }
/* solid_walk demo (instruction/plenary) */
.sol-walk { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.sol-walk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5b6478;
}
.sol-walk-card .sol-svg { width: 56px; height: 56px; }

/* grid_map */
.grid-map-activity { text-align: center; }
.gm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  max-width: 420px;
  margin: 10px auto;
}
.gm-corner, .gm-colhead, .gm-rowhead {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #5b6478;
}
.gm-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 8px;
  cursor: pointer;
}
.gm-ref {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.55rem;
  color: #9aa3b2;
  font-weight: 700;
}
.gm-landmark { font-size: 1.3rem; }
.gm-landmark.gm-found { filter: drop-shadow(0 0 6px #2f7d4f); }
.gm-cell.gm-start { border-color: #406ad6; background: #d9e6ff; }
.gm-cell.gm-reveal { border-color: #f0a833; background: #fff7e8; }
.gm-cell.correct { border-color: #2f7d4f; background: #e2f6e6; }
.gm-cell.incorrect { border-color: #d6404b; background: #fde8ea; }
.gm-prompt { font-size: 0.95rem; font-weight: 700; color: #2b2d42; margin-top: 6px; }
.gm-dirs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 10px auto 0;
}
.gm-dir { padding: 12px 0; border-radius: 14px; font-size: 1.3rem; }

/* data_pictograph — build and compare flavours (lesson 42) */
.dp-add-btn {
  margin-left: 8px;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}
.dp-tally { font-size: 0.9rem; font-weight: 700; color: #2f7d4f; margin-top: 6px; }
.dp-reference {
  padding: 8px;
  border: 2px dashed #406ad6;
  border-radius: 12px;
  margin-bottom: 8px;
}
.dp-compare-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dp-compare-option { padding: 8px; border-radius: 12px; }
.dp-compare-option .dp-graph { font-size: 0.85rem; }

/* coins — two-item shop (lesson 43) */
.shop-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.shop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  min-width: 84px;
}
.shop-emoji { font-size: 1.7rem; }
.shop-word { font-size: 0.8rem; font-weight: 700; color: #5b6478; }
.shop-price { font-size: 1rem; font-weight: 800; color: #2b2d42; }
.shop-plus { font-size: 1.4rem; font-weight: 800; color: #2b2d42; }
.shop-pay {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #5b6478;
}

/* chance_sort */
.chance-sort-activity { text-align: center; }
.cs-events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 420px;
  margin: 12px auto 0;
}
.cs-event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  min-height: 132px;
  justify-content: center;
}
.cs-event-emoji { font-size: 2rem; }
.cs-event-text { font-size: 0.85rem; font-weight: 700; color: #2b2d42; }
.cs-verdict {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2f7d4f;
  text-align: center;
}
.cs-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0; }
.cs-stage-cap { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6478; font-weight: 700; }
.cs-container { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.cs-bag {
  padding: 14px 16px;
  background: #f6fafd;
  border: 3px solid #c9d4e0;
  border-radius: 0 0 18px 18px;
  min-width: 120px;
  min-height: 76px;
}
.cs-counter { width: 26px; height: 26px; border-radius: 50%; display: inline-block; }
.cs-counter-red, .cs-sector-red { background: #d6404b; }
.cs-counter-blue, .cs-sector-blue { background: #406ad6; }
.cs-counter-green, .cs-sector-green { background: #2f9e5a; }
.cs-counter-yellow, .cs-sector-yellow { background: #f0a833; }
.cs-spinner {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #2b2d42;
  background: #fff;
}
.cs-sector {
  position: absolute;
  left: 50%; top: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%;
}
.cs-spinner-pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #2b2d42;
}
.cs-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 12px auto 0;
}
.cs-options-two { grid-template-columns: repeat(2, 1fr); max-width: 380px; }
.cs-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
}
.cs-option-emoji { font-size: 1.1rem; }

/* chance_sort's answer buttons and cards: they were the browser's own buttons —
   grey face, outset border, black text — and neither answer state was styled at
   all, so a right answer never turned green and a wrong one never turned red.
   The only feedback this engine gave was the error sound. These match the option
   buttons every other activity uses. */
.cs-option,
.cs-option-btn {
  border: 3px solid #e2f0ff;
  background: white;
  color: #2b2d42;
}
.cs-option.correct,
.cs-option-btn.correct,
.cs-event.correct {
  background: linear-gradient(135deg, #a8e6a3, #4cd97b);
  border-color: #4cd97b;
  color: #fff;
}
.cs-option.incorrect,
.cs-option-btn.incorrect,
.cs-event.incorrect {
  background: linear-gradient(135deg, #ffb4b4, #ff5a5f);
  border-color: #ff5a5f;
  color: #fff;
}
.cs-event.correct .cs-event-text,
.cs-event.incorrect .cs-event-text,
.cs-option.correct .cs-option-word,
.cs-option.incorrect .cs-option-word { color: #fff; }
/* chance_line_demo (instruction/plenary) */
.cs-demo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0; }
.cs-demo-cards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cs-demo-card {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  border: 2px solid #c9d4e0;
  background: #eef3fb;
  color: #2b2d42;
}
.cs-demo-low { background: #fde8ea; border-color: #e2b8bc; }
.cs-demo-mid { background: #fff7e8; border-color: #f0c85a; }
.cs-demo-high { background: #e2f6e6; border-color: #8fd08f; }
.cs-demo-note { font-size: 0.85rem; font-weight: 700; color: #5b6478; }

/* chance_sort — Foundation and Year 1 flavours (lessons 11 and 31) */
.cs-game {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: #f6fafd;
  border: 3px solid #c9d4e0;
  border-radius: 14px;
  min-width: 140px;
}
.cs-game-dice .cs-game-item { font-size: 1.9rem; }
.cs-game-item { font-size: 1.5rem; }
.cs-game-unknown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff7e8;
  border: 2px dashed #f0a833;
  color: #8a6d1f;
  font-weight: 800;
}
.cs-event-lead { font-size: 0.9rem; font-weight: 700; color: #2b2d42; margin-bottom: 6px; }
.cs-event-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 16px 18px;
  background: #f6fafd;
  border: 3px solid #c9d4e0;
  border-radius: 14px;
  max-width: 340px;
}
.cs-event-card-emoji { font-size: 2.2rem; }
.cs-event-card-text { font-size: 0.95rem; font-weight: 700; color: #2b2d42; }
.cs-options-three { grid-template-columns: 1fr; max-width: 340px; }
.cs-demo-will { background: #e2f6e6; border-color: #8fd08f; }
.cs-demo-wont { background: #fde8ea; border-color: #e2b8bc; }
.cs-demo-maybe { background: #fff7e8; border-color: #f0c85a; }

/* big_number_builder (and the pv4_picture demo) */
.big-number-activity { text-align: center; }
.bn4-table {
  display: inline-block;
  margin: 6px auto 4px;
  padding: 12px 14px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  max-width: 100%;
}
.bn4-heads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}
.bn4-head {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b6478;
  font-weight: 800;
}
.bn4-picture {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bn4-thousand-block {
  width: 62px; height: 62px;
  background: #7b4bd6;
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}
.bn4-hundred-block {
  width: 50px; height: 50px;
  background: #f0a833;
  color: #4a3308;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.bn4-ten-block {
  width: 40px; height: 32px;
  background: #406ad6;
  color: #fff;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.bn4-ones { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; max-width: 90px; }
.bn4-one-dot { width: 15px; height: 15px; border-radius: 50%; background: #d6404b; }
.bn4-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 14px auto 0;
}
.bn4-option-btn { padding: 12px; border-radius: 14px; font-size: 1.15rem; }
.bn4-build-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 12px auto 0;
}
.bn4-build-option { padding: 8px; border-radius: 14px; }
.bn4-build-option .bn4-table { background: transparent; border: none; padding: 0; margin: 0; }
.bn4-build-option .bn4-heads { display: none; }
.bn4-stage { margin: 6px 0; }

/* rounding_line (and the round_line_demo) */
.rounding-line-activity { text-align: center; }
.rl-stage { margin: 10px auto; max-width: 460px; }
.rl-line {
  position: relative;
  height: 96px;
  margin: 0 10px;
}
.rl-track {
  position: absolute;
  left: 0; right: 0; top: 58px;
  height: 4px;
  background: #c9d4e0;
  border-radius: 2px;
}
.rl-mark {
  position: absolute;
  top: 42px;
  width: 2px; height: 24px;
  background: #5b6478;
}
.rl-mark span {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  color: #2b2d42;
  white-space: nowrap;
}
.rl-mark-low { left: 20%; }
.rl-mark-mid { left: 50%; background: #f0a833; }
.rl-mark-mid span { color: #8a6d1f; }
.rl-mark-high { left: 80%; }
.rl-number {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: #d9e6ff;
  border: 2px solid #406ad6;
  font-weight: 800;
  color: #1f3a7a;
  font-size: 0.95rem;
}
.rl-pile {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.rl-pile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 340px;
  justify-content: center;
}
.rl-item { font-size: 1.05rem; color: #406ad6; }
.rl-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.rl-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }

/* column_add — the carried ten (lesson 49) */
.ca-carry-row {
  justify-content: flex-end;
  margin-bottom: 2px;
  min-height: 22px;
}
.ca-carry {
  width: 54px;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #7b4bd6;
  text-align: center;
}
.td-cell.td-tens.opened { color: #8a6d1f; }

/* fact_family (and the family_walk demo) */
.fact-family-activity { text-align: center; }
.ff-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 10px 0; }
.ff-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 380px;
}
.ff-whole {
  width: 100%;
  padding: 10px 0;
  background: #d9e6ff;
  border: 3px solid #406ad6;
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1f3a7a;
}
.ff-parts { display: flex; width: 100%; gap: 4px; }
.ff-part {
  flex: 1;
  padding: 10px 0;
  background: #fff7e8;
  border: 3px solid #f0a833;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #8a6d1f;
}
.ff-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 380px;
  margin: 12px auto 0;
}
.ff-options-sentences { grid-template-columns: 1fr; max-width: 320px; }
.ff-option-btn { padding: 12px; border-radius: 14px; font-size: 1.15rem; }
.ff-sentences { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ff-sentence {
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  font-weight: 700;
  color: #2b2d42;
  font-size: 0.95rem;
}

/* jump_strategy (and the jump_line_demo) */
.jump-strategy-activity { text-align: center; }
.jp-stage { margin: 12px auto; max-width: 460px; }
.jp-line { position: relative; height: 110px; margin: 0 10px; }
.jp-track {
  position: absolute;
  left: 0; right: 0; top: 62px;
  height: 3px;
  background: #c9d4e0;
  border-radius: 2px;
}
.jp-start, .jp-landing {
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
}
.jp-start { left: 8%; background: #d9e6ff; border: 2px solid #406ad6; color: #1f3a7a; }
.jp-landing { left: 92%; background: #e2f6e6; border: 2px solid #2f7d4f; color: #235f3c; }
.jp-jump {
  position: absolute;
  top: 36px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff7e8;
  border: 2px dashed #f0a833;
  font-size: 0.8rem;
  font-weight: 800;
  color: #8a6d1f;
}
.jp-caption { font-size: 0.9rem; font-weight: 700; color: #5b6478; }
.jp-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.jp-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }

/* times_grid */
.times-grid-activity { text-align: center; }
.tg-stage { display: flex; justify-content: center; margin: 12px 0 4px; }
.tg-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  padding: 10px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.tg-cell {
  min-width: 40px;
  padding: 8px 4px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2b2d42;
}
.tg-cell-q { border-color: #f0a833; background: #fff7e8; color: #8a6d1f; }
.tg-caption {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b6478;
  font-weight: 700;
}
.tg-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.tg-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }

/* divide_facts */
.divide-facts-activity { text-align: center; }
.dv-stage {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  max-width: 420px;
  margin: 10px auto;
  overflow-x: auto;
}
.dv-array { display: grid; gap: 6px; justify-content: center; }
.dv-dot { width: 17px; height: 17px; border-radius: 50%; background: #406ad6; }
.dv-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.dv-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }

/* partition_multiply */
.partition-multiply-activity { text-align: center; }
.pm-stage {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
  max-width: 460px;
  margin: 10px auto;
  overflow-x: auto;
}
.pm-array-rows { display: flex; flex-direction: column; gap: 5px; }
.pm-row { display: flex; align-items: center; justify-content: center; gap: 0; }
.pm-block {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #1f3a7a;
  border: 2px solid #406ad6;
  border-radius: 6px;
}
.pm-block-tens { width: 82px; background: #d9e6ff; }
.pm-block-ones { width: 34px; background: #e2f6e6; border-color: #2f7d4f; color: #235f3c; }
.pm-gap { width: 12px; }
.pm-block-q { background: #fff7e8; border-color: #f0a833; color: #8a6d1f; }
.pm-caption { font-size: 0.9rem; font-weight: 700; color: #2f7d4f; margin-top: 6px; }
.pm-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 12px auto 0;
}
.pm-option-btn { padding: 12px; border-radius: 14px; font-size: 1.2rem; }

/* divide_facts — remainders (lesson 56) */
.dv-leftover {
  display: flex;
  gap: 6px;
  margin-left: 14px;
  padding: 6px 8px;
  border: 2px dashed #f0a833;
  border-radius: 10px;
  background: #fff7e8;
  align-self: center;
}
.dv-dot-left { background: #f0a833; }
.dv-options-two { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
.dv-option-division { font-size: 1.1rem; }
.dv-caption { font-size: 0.9rem; font-weight: 700; color: #8a6d1f; margin-top: 6px; }

/* fraction_strip (and the frac_strip_demo) */
.fraction-strip-activity { text-align: center; }
.fs-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 12px 0; }
.fs-strip {
  display: flex;
  width: 100%;
  max-width: 420px;
  height: 54px;
  border: 3px solid #2b2d42;
  border-radius: 10px;
  overflow: hidden;
}
.fs-part {
  flex: 1;
  background: #fdf8ee;
  border-right: 2px solid #2b2d42;
}
.fs-part:last-child { border-right: none; }
.fs-part-on { background: #7bb5ff; }
.fs-caption { font-size: 0.9rem; font-weight: 700; color: #5b6478; }
.fs-stage-two { flex-direction: row; gap: 24px; justify-content: center; flex-wrap: wrap; }
.fs-compare { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 190px; }
.fs-compare .fs-strip { height: 40px; }
.fs-compare-label { font-size: 0.95rem; font-weight: 800; color: #2b2d42; }
.fs-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 12px auto 0;
}
.fs-option-btn { padding: 12px; border-radius: 14px; font-size: 1.15rem; }

/* fraction_line (and the frac_line_demo) */
.fraction-line-activity { text-align: center; }
.fl-stage { margin: 18px auto; max-width: 460px; }
.fl-stage-stack { display: flex; flex-direction: column; gap: 26px; }
.fl-compare-row { display: flex; align-items: center; gap: 10px; }
.fl-compare-label { font-size: 0.9rem; font-weight: 800; color: #2b2d42; min-width: 54px; }
.fl-compare-row .fl-line { flex: 1; }
.fl-line { position: relative; height: 64px; margin: 0 12px; }
.fl-track {
  position: absolute;
  left: 0; right: 0; top: 30px;
  height: 4px;
  background: #2b2d42;
  border-radius: 2px;
}
.fl-label {
  position: absolute;
  top: 42px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #2b2d42;
}
.fl-label-zero { left: 0; }
.fl-label-one { right: 0; }
.fl-tick {
  position: absolute;
  top: 20px;
  width: 3px;
  height: 24px;
  margin-left: -1.5px;
  background: #5b6478;
  border-radius: 2px;
}
.fl-tick-tap { width: 34px; height: 44px; margin-left: -17px; top: 10px; background: transparent; cursor: pointer; }
.fl-tick-tap::after {
  content: "";
  position: absolute;
  left: 50%; top: 10px;
  width: 3px; height: 24px;
  margin-left: -1.5px;
  background: #5b6478;
  border-radius: 2px;
}
.fl-tick-tap:hover::after { background: #406ad6; }
.fl-tick-on::after, .fl-tick-on { background: #2f7d4f; }
.fl-tick-reveal::after, .fl-tick-reveal { background: #f0a833; }
.fl-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 12px auto 0;
}
.fl-option-btn { padding: 12px; border-radius: 14px; font-size: 1.15rem; }

/* coins — the three-item basket (lesson 59) */
.shop-basket { flex-wrap: wrap; }
.coin-option-wide { font-size: 1rem; }

/* algorithm_machine (and the machine_demo) */
.algorithm-machine-activity { text-align: center; }
.am-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 12px 0; }
.am-machine {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 12px;
}
.am-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 58px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid #c9d4e0;
}
.am-slot-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6478; font-weight: 800; }
.am-slot-value { font-size: 1.25rem; font-weight: 800; color: #2b2d42; }
.am-slot-in { border-color: #406ad6; }
.am-slot-out { border-color: #2f7d4f; background: #e2f6e6; }
.am-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: #7b4bd6;
  color: #fff;
}
.am-rule { font-size: 0.95rem; font-weight: 800; }
.am-sequence { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.am-term {
  min-width: 46px;
  padding: 10px 8px;
  background: #eef3fb;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2b2d42;
}
.am-term-q { border-color: #f0a833; background: #fff7e8; color: #8a6d1f; }
.am-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 340px;
  margin: 12px auto 0;
}
.am-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; }

/* coins — $5 and $10 notes (lesson 59) */
.coin-c500, .coin-c1000 {
  width: auto;
  min-width: 74px;
  height: 44px;
  border-radius: 8px;
  background: #e8f0ff;
  border: 2px solid #406ad6;
  color: #1f3a7a;
  font-weight: 800;
}
.coin-c1000 { background: #f3ecff; border-color: #7b4bd6; color: #4a2b86; }

/* coins — notation, sets and equiv (lesson 61) */
.money-amount {
  font-size: 1.9rem;
  font-weight: 800;
  color: #2b2d42;
  letter-spacing: 0.02em;
}
.coin-set-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 12px auto 0;
}
.coin-set-option {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  min-height: 62px;
}
.coin-set-option .coin { font-size: 0.7rem; min-width: 34px; height: 30px; }

/* read_scale (and the scale_demo) */
.read-scale-activity { text-align: center; }
.rs-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 12px 0; }
.rs-ruler {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 82px;
  background: #fffdf5;
  border: 3px solid #2b2d42;
  border-radius: 10px;
}
.rs-pencil {
  position: absolute;
  top: 14px;
  height: 18px;
  background: #f0a833;
  border: 2px solid #8a6d1f;
  border-radius: 4px;
}
.rs-mark {
  position: absolute;
  top: 40px;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  background: #2b2d42;
}
.rs-mark-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: #2b2d42;
}
.rs-note { font-size: 0.85rem; font-weight: 700; color: #a4545c; }
.rs-object {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  background: #f6fafd;
  border: 2px solid #c9d4e0;
  border-radius: 14px;
}
.rs-object-emoji { font-size: 2.4rem; }
.rs-object-word { font-size: 0.9rem; font-weight: 700; color: #5b6478; }
.rs-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 340px;
  margin: 12px auto 0;
}
.rs-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; }

/* duration_line */
.duration-line-activity { text-align: center; }
.dl-stage { margin: 14px auto; max-width: 440px; }
.dl-line { position: relative; height: 84px; margin: 0 12px; }
.dl-track { position: absolute; left: 0; right: 0; top: 46px; height: 4px; background: #c9d4e0; border-radius: 2px; }
.dl-tick { position: absolute; top: 30px; width: 3px; height: 34px; background: #2b2d42; border-radius: 2px; }
.dl-tick span {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 0.9rem; font-weight: 800; color: #2b2d42; white-space: nowrap;
}
.dl-tick-start { left: 6%; }
.dl-tick-end { right: 6%; }
.dl-gap {
  position: absolute; left: 12%; right: 12%; top: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #fff7e8; border: 2px dashed #f0a833;
  font-size: 0.85rem; font-weight: 800; color: #8a6d1f;
}
.dl-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 360px; margin: 12px auto 0;
}
.dl-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; }

/* right_angle_hunt */
.right-angle-activity { text-align: center; }
.rah-svg { width: 80px; height: 80px; }
.rah-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 420px; margin: 12px auto 0;
}
.rah-options-two { grid-template-columns: 1fr; max-width: 340px; }
.rah-option { padding: 8px; border-radius: 14px; }
.rah-option-btn { padding: 12px; border-radius: 14px; font-size: 1rem; }
.rah-stage { display: flex; justify-content: center; margin: 12px 0; }
.rah-shape {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 22px; background: #f6fafd; border: 2px solid #c9d4e0; border-radius: 14px;
}
.rah-shape-emoji { font-size: 3rem; }
.rah-shape-word { font-size: 0.9rem; font-weight: 700; color: #5b6478; }
.rah-note { font-size: 0.9rem; font-weight: 700; color: #2f7d4f; margin-top: 8px; }

/* solid_features */
.solid-features-activity { text-align: center; }
.sf-svg { width: 84px; height: 84px; }
.sf-stage {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px; margin: 12px auto; max-width: 220px;
  background: #f6fafd; border: 2px solid #c9d4e0; border-radius: 14px;
}
.sf-word { font-size: 0.85rem; font-weight: 700; color: #5b6478; }
.sf-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 340px; margin: 12px auto 0;
}
.sf-options-solids { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
.sf-option-btn { padding: 12px; border-radius: 14px; font-size: 1.15rem; }
.sf-solid-option {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px; border-radius: 14px;
}
.sf-solid-option .sf-word { font-size: 0.75rem; }

/* grid_map — the plan view (lesson 66) */
.gm-plan {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 300px;
  margin: 10px auto;
  background: #fbfdff;
  border: 4px solid #2b2d42;
  border-radius: 12px;
}
.gm-plan-item {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 8px;
  background: #fff;
  border: 2px solid #c9d4e0;
  border-radius: 10px;
  cursor: pointer;
}
.gm-plan-door { background: #ffe9c7; border-color: #f0a833; }
.gm-plan-wall { background: #eef3fb; }
.gm-plan-floor { background: #f1efe9; border-style: dashed; }
.gm-plan-emoji { font-size: 1.4rem; }
.gm-plan-label { font-size: 0.66rem; font-weight: 800; color: #5b6478; }
.gm-plan-item.correct { border-color: #2f7d4f; background: #e2f6e6; }
.gm-plan-item.incorrect { border-color: #d6404b; background: #fde8ea; }
.gm-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 340px; margin: 12px auto 0;
}
.gm-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; }

/* tally_survey */
.tally-survey-activity { text-align: center; }
.ts-stage { margin: 12px 0; }
.ts-votes, .ts-votes-wrap .ts-votes {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  max-width: 420px; margin: 0 auto;
  padding: 10px; background: #f6fafd; border: 2px solid #c9d4e0; border-radius: 12px;
}
.ts-vote { font-size: 1.3rem; }
.ts-caption { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6478; font-weight: 800; margin: 8px 0 4px; }
.ts-table {
  display: inline-block; min-width: 260px;
  background: #f6fafd; border: 2px solid #c9d4e0; border-radius: 12px; padding: 10px 12px;
}
.ts-table-head, .ts-table-row {
  display: grid; grid-template-columns: 1.4fr 1.2fr 0.6fr; gap: 8px; align-items: center;
  padding: 5px 0;
}
.ts-table-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6478; font-weight: 800; }
.ts-table-row { border-top: 1px solid #e3e9f0; font-size: 0.95rem; font-weight: 700; color: #2b2d42; }
.ts-table-number { font-weight: 800; }
.ts-table-q { color: #8a6d1f; background: #fff7e8; border-radius: 6px; }
.ts-tally { display: inline-flex; gap: 6px; align-items: flex-end; }
.ts-group { display: inline-flex; gap: 3px; align-items: flex-end; position: relative; padding-right: 4px; }
.ts-group span { display: block; width: 2px; height: 18px; background: #2b2d42; border-radius: 1px; }
.ts-group-five { position: relative; }
.ts-group-five::after {
  content: ""; position: absolute; left: -2px; right: 2px; top: 8px;
  height: 2px; background: #2b2d42; transform: rotate(-18deg);
}
.ts-question-card {
  display: inline-block; padding: 12px 16px; background: #fff;
  border: 2px solid #406ad6; border-radius: 12px; font-weight: 800; color: #1f3a7a;
}
.ts-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 400px; margin: 14px auto 0;
}
.ts-option-btn { padding: 12px; border-radius: 14px; font-size: 1rem; }

/* bar_graph */
.bar-graph-activity { text-align: center; }
.bg-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 10px 0; }
.bg-table {
  display: inline-block; min-width: 220px;
  background: #f6fafd; border: 2px solid #c9d4e0; border-radius: 12px; padding: 8px 12px;
}
.bg-table-head, .bg-table-row { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 10px; padding: 4px 0; }
.bg-table-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5b6478; font-weight: 800; }
.bg-table-row { border-top: 1px solid #e3e9f0; font-size: 0.95rem; font-weight: 700; color: #2b2d42; }
.bg-graph {
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  height: 150px; padding: 10px 12px 0;
  background: #fff; border: 2px solid #c9d4e0; border-bottom: 3px solid #2b2d42; border-radius: 10px;
}
.bg-col { display: flex; flex-direction: column; align-items: center; height: 100%; width: 46px; }
.bg-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.bg-bar { width: 100%; background: #406ad6; border-radius: 6px 6px 0 0; min-height: 4px; }
.bg-bar[data-blank] { background: #fff7e8; border: 2px dashed #f0a833; }
.bg-col-label { font-size: 1rem; margin-top: 4px; }
.bg-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 340px; margin: 14px auto 0;
}
.bg-option-btn { padding: 12px; border-radius: 14px; font-size: 1.05rem; }
.bg-compare-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 460px; margin: 12px auto 0; }
.bg-compare-option { padding: 8px; border-radius: 12px; }
.bg-compare-option .bg-graph { height: 110px; gap: 6px; padding: 6px 8px 0; }
.bg-compare-option .bg-col { width: 26px; }
.bg-compare-option .bg-col-label { font-size: 0.8rem; }
.bg-numbers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bg-number {
  min-width: 42px; padding: 10px 8px; background: #eef3fb; border: 2px solid #c9d4e0;
  border-radius: 10px; font-weight: 800; color: #2b2d42;
}

/* bar_graph — conclusions (lesson 69) */
.bg-options-sentences { grid-template-columns: 1fr; max-width: 380px; }

/* chance_sort — runs of spins (lesson 70) */
.cs-run { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 380px; }
.cs-run-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cs-run-label { font-size: 0.8rem; font-weight: 800; color: #5b6478; min-width: 46px; }
.cs-spin { font-size: 1rem; }
.cs-option-btn { padding: 12px; border-radius: 14px; font-size: 1.15rem; }
.cs-options .cs-option-btn { padding: 12px; }

/* curriculum links preference (parents' panel) and report section */
.curriculum-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 4px;
}
.curriculum-choice {
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid #c9d4e0;
  background: #f6fafd;
  color: #2b2d42;
  font-weight: 700;
  font-size: 0.9rem;
}
.curriculum-choice.active {
  background: #d9e6ff;
  border-color: #406ad6;
  color: #1f3a7a;
}
.curriculum-section .curriculum-note {
  font-size: 0.85rem;
  color: #5b6478;
  margin: 2px 0 8px;
}
.curriculum-subhead {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b6478;
  margin: 12px 0 6px;
}
.curriculum-details { margin-top: 14px; }
.curriculum-details summary {
  cursor: pointer;
  font-weight: 700;
  color: #406ad6;
  font-size: 0.9rem;
}
.curriculum-lesson { margin: 10px 0 0; }
.curriculum-lesson h4 {
  font-size: 0.9rem;
  margin: 0 0 2px;
  color: #2b2d42;
}
.curriculum-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: #3c4356;
}
.curriculum-list li { margin-bottom: 3px; }

/* ---------- large screens: 7-inch and 10-inch tablets ----------
   The phone layout fills a phone. On a tablet held in portrait it left content
   pinned to the top with the bottom third of the screen empty (measured on the
   real app: a 7-inch 540x960 CSS viewport and a 10-inch 720x1280 one, where the
   lesson card ended at around 38% of the height). These rules only apply when
   there is clearly more room than a phone, so the phone layout is untouched —
   verified by re-shooting the phone screenshots after the change.

   The map, sticker book and report stay top-aligned on purpose: they are lists
   and documents that should start where the eye expects them. */
@media (min-width: 520px) and (min-height: 880px) {
  /* Splash: centre the panel so the gorilla sits in the middle of the screen. */
  #screen-splash.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 72px);
  }

  /* Lesson: keep the header where it is, centre the card in the space left
     over, so the activity is not stranded at the top of a tall screen. */
  #screen-lesson.active {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
  }
  #screen-lesson > .lesson-part {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Buddy chooser: eight characters now, so the column count is set explicitly
   rather than left to wrap. Phones fall back to the auto-fit grid above. */
@media (min-width: 520px) {
  .avatar-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* two tidy rows of four */
    align-items: stretch;
  }
  .avatar-option { min-width: 0; }
}
@media (min-width: 720px) {
  /* 7-inch and up: all eight across in a single row. */
  .avatar-options { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------- reduced motion ----------
   This app ignored the OS setting until now (no prefers-reduced-motion rule
   existed anywhere). Collapsing duration rather than removing the rules is
   deliberate: every piece of feedback still
   arrives — the shake becomes a still, the spark becomes a ring that appears
   and goes, the revealed answer still turns green — it just stops moving,
   which is what the setting asks for and what a motion-sensitive child needs.
   animation-delay is left alone, so the count-along still counts one object at
   a time; the sequence, not the movement, is the part that teaches. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  button:active:not(:disabled) { transform: none; }
  .lesson-instruction-bubble.is-replayable:active { transform: none; }
  /* The cast still arrives and the pose still changes — the sad face must
     reach a motion-sensitive child just as clearly as anyone else, because
     the expression IS the feedback. Only the movement goes: the scale/rotate
     transforms are pinned to their resting state so nothing lurches. */
  .scene-enter, .scene-leave, .reaction-slump, .reaction-pop { transform: none !important; }
  .scene-enter, .scene-leave { opacity: 1 !important; }
  .chest-beat { transform: none !important; }
}

/* ---------- the revealed answer, deliberately last ----------
   A wrong answer turns the right one green wherever it is on screen. This sits
   at the end of the sheet because the engines style their own states with
   two-class rules (`.gm-plan-item.correct`, `.count-objects-option-btn.correct`)
   and a single-class rule earlier in the file loses that specificity race
   regardless of how specific it looks. Equal specificity is settled by order,
   and last wins. Same reason the ✓ is a pseudo-element: it must not become part
   of the element's text, which the test harness reads to find answers. */
.reveal-correct,
[class].reveal-correct {
  animation: feedback-reveal var(--motion-slow) var(--ease-pop);
  background: linear-gradient(135deg, #a8e6a3, #4cd97b);
  border-color: #4cd97b;
  color: white;
}
.reveal-correct::before { content: "✓ "; }