/* ZoraMath lesson play framework. Every visual state is a class (CSP blocks style="" attributes).
   Sizes: stage <= 720px with 16px gutters, every tap target >= 64px, gaps >= 8px. */

/* hero */
.zm-hero {
  padding: var(--space-5) var(--space-3) var(--space-4); text-align: center;
  background: linear-gradient(#4fa9da, #afeefa); color: #06324d;
}
.zm-hero h1 { font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; }
.zm-hero-label { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 600; }
.zm-hero-art { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.zm-hero-art svg { width: 3rem; height: 3rem; }

/* stage */
.zm-stage { width: min(100% - 32px, 720px); margin-inline: auto; padding-block: var(--space-4); }
.zm-play [hidden] { display: none !important; }
.zm-play :focus-visible { outline: 4px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-s); }
.zm-screen { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.zm-screen > * { max-width: 100%; }
.zm-title { font-size: clamp(1.5rem, 6vw, 2rem); }
.zm-lead { font-size: var(--text-body-kids); }

/* buttons */
.zm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 64px; min-height: 64px; padding: .6rem 1.75rem;
  border: 3px solid var(--brand-dark); border-radius: var(--radius-pill);
  background: var(--cta); color: var(--cta-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2;
  cursor: pointer; text-decoration: none;
}
.zm-btn-quiet { background: var(--white); color: var(--brand-dark); }
.zm-btn svg { width: 1.75rem; height: 1.75rem; }
.zm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* top bar: progress dots, replay, sound-off badge */
.zm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.zm-dots { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.zm-dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 3px solid var(--brand); background: var(--white); }
.zm-dot.is-done { background: var(--brand); }
.zm-dot.is-current { border-color: var(--cta); border-width: 5px; }
.zm-sound-off {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: .25rem .75rem;
  border-radius: var(--radius-pill); background: var(--ink); color: var(--white); font-weight: 700; font-size: 1rem;
}
.zm-sound-off.is-quiet { visibility: hidden; } /* keeps its row so the stage does not jump when it appears */
.zm-sound-off:not(.is-quiet) ~ .zm-replay { visibility: hidden; } /* no sound: "Hear again" would do nothing; keep its row so the stage never jumps */
.zm-sound-off svg { width: 1.25rem; height: 1.25rem; }
.zm-prompt { font-size: clamp(1.5rem, 6vw, 2.25rem); }
.zm-status { min-height: 2.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; }
.zm-status.is-good { color: #14663a; }
.zm-status.is-help { color: var(--brand-dark); }

/* objects the child counts, circles or matches */
.zm-field { width: 100%; padding: var(--space-1); border-radius: var(--radius-l); background: #effbff; border: 3px solid #afeefa; }
.zm-objects { display: grid; justify-content: center; gap: 6px; }
.zm-cols-1 { grid-template-columns: repeat(1, minmax(64px, 5rem)); }
.zm-cols-2 { grid-template-columns: repeat(2, minmax(64px, 5rem)); }
.zm-cols-3 { grid-template-columns: repeat(3, minmax(64px, 5rem)); }
.zm-cols-4 { grid-template-columns: repeat(4, minmax(64px, 5rem)); }
.zm-cols-5 { grid-template-columns: repeat(5, minmax(64px, 5rem)); }
@media (max-width: 479px) {
  /* narrow phones: as many 64px+ columns as fit, the rest wraps */
  .zm-objects { grid-template-columns: repeat(auto-fit, minmax(64px, 5rem)); }
}
.zm-obj {
  position: relative; display: grid; place-items: center; width: 100%; min-width: 64px; min-height: 64px; aspect-ratio: 1;
  padding: var(--space-1); border: 3px solid transparent; border-radius: var(--radius-m); background: transparent; cursor: pointer;
}
div.zm-obj { cursor: default; }
.zm-obj svg { width: 100%; height: 100%; pointer-events: none; }
.zm-obj.is-counted { background: #fff7d6; border-color: var(--cta); }
.zm-obj.is-glow { background: #fff7d6; border-color: var(--brand); }
.zm-obj.is-ringed { border-color: var(--brand); border-style: dashed; background: #e9e6ff; }
.zm-obj.is-ringed::after, .zm-card.is-correct::after {
  content: "\2713"; position: absolute; top: -6px; right: -6px; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--brand); color: var(--white); font-size: 1.1rem; font-weight: 800; line-height: 1.75rem; text-align: center;
}
.zm-badge {
  position: absolute; left: -4px; bottom: -4px; min-width: 1.75rem; height: 1.75rem; padding-inline: .35rem;
  border-radius: 50%; background: var(--cta); color: var(--cta-ink); border: 2px solid var(--brand-dark);
  font-family: var(--font-display); font-weight: 700; line-height: 1.5rem; text-align: center; pointer-events: none;
}

@media (min-width: 480px) {
  .zm-field { padding: var(--space-3); }
  .zm-objects { gap: var(--space-2); }
}

/* ten-frame */
.zm-frame { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.zm-cell {
  position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; /* display only: no 64px tap floor, so 5 columns fit a 320px phone */
  border: 3px solid var(--brand-dark); border-radius: var(--radius-s); background: var(--white); cursor: pointer;
}
.zm-cell.is-glow { background: #fff7d6; }
.zm-cell-dot { width: 70%; height: 70%; border-radius: 50%; background: transparent; }
.zm-cell.is-filled .zm-cell-dot { background: var(--cta); border: 3px solid var(--brand-dark); }
.zm-frame-static .zm-cell { cursor: default; }
@media (min-width: 480px) {
  .zm-frame { gap: var(--space-2); }
}

/* numeral cards */
.zm-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.zm-card {
  position: relative; min-width: 88px; min-height: 88px; padding: 0 var(--space-3);
  border: 3px solid var(--brand-dark); border-radius: var(--radius-m); background: var(--white); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 3rem; cursor: pointer;
}
.zm-card.is-correct { background: #d9f7e4; border-color: #14663a; }
.zm-card.is-try { background: #e9e6ff; border-style: dashed; }
.zm-card.is-try::after {
  content: "\21BB"; position: absolute; top: -6px; right: -6px; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--brand); color: var(--white); font-size: 1.1rem; font-weight: 800; line-height: 1.75rem; text-align: center;
}

/* numeral pad (1-10) under counted objects */
.zm-pad { gap: var(--space-2); }
.zm-pad .zm-card { min-width: 64px; min-height: 64px; padding: 0 var(--space-2); font-size: 2rem; }
.zm-activity.is-settled .zm-actions { display: none; } /* after an answer only Next is actionable */
.zm-activity { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; }

/* lesson done: sticker book */
.zm-earned { width: 7rem; height: 7rem; }
.zm-book { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: var(--space-3); list-style: none; width: 100%; border-radius: var(--radius-l); background: #effbff; border: 3px dashed #afeefa; }
.zm-book li { width: 4rem; height: 4rem; }
.zm-book svg { width: 100%; height: 100%; }
.zm-shelf { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; }
.zm-spark { position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--cta); pointer-events: none; z-index: 20; }

/* info sections below the player */
.zm-section { width: min(100% - 32px, 720px); margin-inline: auto; padding-block: var(--space-4); }
.zm-section > * + * { margin-top: var(--space-3); }
.zm-section h2 { font-size: 1.75rem; }
.zm-tag { display: inline-block; padding: .15rem .8rem; border-radius: var(--radius-pill); background: var(--earth-sky-bottom); color: var(--earth-text-on-sky); font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.zm-ws-card { padding: var(--space-4); border-radius: var(--radius-l); background: var(--white); box-shadow: 0 6px 20px var(--shadow-card); }

/* hub */
.zm-skills { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.zm-skill { padding: var(--space-3); border-radius: var(--radius-m); background: var(--white); box-shadow: 0 4px 14px var(--shadow-card); }
.zm-skill h3 { font-size: 1.375rem; margin-bottom: var(--space-2); }

/* motion: movement only when the visitor has not asked for less; otherwise state changes are fades or instant */
@media (prefers-reduced-motion: no-preference) {
  .zm-screen { animation: zm-in var(--motion-base) var(--ease-out) 1; }
  .zm-obj, .zm-card, .zm-cell, .zm-btn { transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast); }
  .zm-obj.is-counted, .zm-card.is-correct { animation: zm-pop var(--motion-base) var(--ease-out) 1; }
  .zm-btn:hover, .zm-card:hover, .zm-obj:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .zm-screen { animation: zm-fade var(--motion-base) linear 1; }
  .zm-play *, .zm-play *::before, .zm-play *::after { transition: none !important; }
}
@keyframes zm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes zm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zm-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }