@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&display=swap');

:root {
  --bg: #fff8ec;
  --card: #ffffff;
  --border: rgba(58,46,92,0.08);
  --border-strong: rgba(58,46,92,0.18);
  --text: #3a2e5c;
  --text-dim: #6e6390;
  --accent: #ffb703;
  --accent-text: #4a3200;
  --danger: #d64545;
  --success: #2e8b3d;
  --info: #2f6fd6;
}

body { font-family: 'Baloo 2', -apple-system, sans-serif; }
.heading, .sim-title, .lab-card h2, h1, h2 { font-family: 'Baloo 2', sans-serif; }

/* The base theme renders .sim-sub bold in --accent, which works as a
   bright highlight against a dark card but is a poor-contrast yellow-on-
   cream combination here. Keep it bold and prominent, just in the dark
   text color instead so it's actually legible. */
.sim-sub { color: var(--text); }

/* Rounder, softer shapes read as friendlier than Junior High's sharper cards */
.card, .sim-card, a.lab-card, div.lab-card {
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(58,46,92,0.08);
}
.sim-card { border: 1px solid var(--border); }
.btn-primary, .sim-next, .sim-btn { border-radius: 16px; }

/* A few components use a hardcoded color wash instead of a variable —
   redeclaring them here keeps the feedback colors on-theme too. */
.expr-chip.correct { background: rgba(76,175,80,0.15); }
.expr-chip.wrong { background: rgba(255,107,107,0.15); }
.sim-milestone { background: rgba(255,183,3,0.15); border-color: rgba(255,183,3,0.4); }

/* ---- Count-and-tap visual (Whole numbers up to 100) ---- */

.count-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  max-width: 320px;
  margin: 4px auto 20px;
  padding: 16px;
  background: rgba(255,183,3,0.08);
  border-radius: 16px;
}
.count-icon {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 4.5vw, 24px);
  line-height: 1;
}

.kid-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 4px 0 16px;
}
.kid-choice-btn {
  font-family: 'Baloo 2', sans-serif;
  font-size: 30px;
  font-weight: 700;
  padding: 18px;
  border-radius: 18px;
  border: 3px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.kid-choice-btn:active { transform: scale(0.97); }
.kid-choice-btn.correct { background: rgba(76,175,80,0.15); border-color: var(--success); color: var(--success); }
.kid-choice-btn.wrong { background: rgba(255,107,107,0.15); border-color: var(--danger); color: var(--danger); animation: expr-shake 0.3s ease; }
.kid-choice-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ---- Race track (Ordinal numbers): stacked lanes, each racer running
   left-to-right along its own row, with a per-lane dummy timer. ---- */

.race-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(255,183,3,0.06);
  border-radius: 16px;
  margin: 4px 0 16px;
}
.race-lane {
  position: relative;
  height: 48px;
  background: rgba(255,183,3,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.race-racer {
  position: absolute;
  left: 8px;
  top: 50%;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1;
  z-index: 2;
  will-change: transform;
}
.race-racer.target { animation: race-pulse 1.3s ease-in-out infinite; }
@keyframes race-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,183,3,0.45); }
  50% { box-shadow: 0 0 0 8px rgba(255,183,3,0); }
}
@media (prefers-reduced-motion: reduce) { .race-racer.target { animation: none; box-shadow: 0 0 0 4px rgba(255,183,3,0.45); } }
.race-racer.tappable { cursor: pointer; }
.race-racer.tappable:active { transform: translate(0, -50%) scale(0.9); }
.race-racer.correct { background: rgba(76,175,80,0.25); border-radius: 8px; }
.race-racer.wrong { background: rgba(214,69,69,0.25); border-radius: 8px; animation: expr-shake 0.3s ease; }
.race-racer.disabled { pointer-events: none; }

.race-rank {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Baloo 2', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  z-index: 1;
  min-width: 22px;
  text-align: center;
}
.race-finish-mini {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  z-index: 1;
}