:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1c2333;
  --muted: #6b7280;
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --success: #16a34a;
  --error: #dc2626;
  --border: #e5e7eb;
  --radius: 12px;
}

* { box-sizing: border-box; }

html {
  /* Safety net: no single element (nav, a fixed-width game stage, etc.)
     should ever be able to push the whole page into horizontal scroll —
     that's what lets a stray swipe/scroll shift a timed exercise
     off-screen mid-response. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--text);
}

.nav-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }

.bt-menu-btn {
  display: none;
  width: 36px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.bt-menu-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
}
.bt-menu-bars span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
}

@media (max-width: 768px) {
  .bt-menu-btn { display: block; }
  .nav-right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 1.5rem 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }
  .nav-right.is-open { display: flex; }
}
.nav-user { color: var(--muted); font-size: 0.9rem; }

.container { max-width: 900px; margin: 0 auto; padding: 1.5rem; }

.site-footer {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  font-size: 0.85rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.muted { color: var(--muted); }

.btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg); }
.btn-lg { padding: 0.7rem 1.5rem; font-size: 1.05rem; font-weight: 600; border-radius: 10px; }

/* Landing page */
.landing-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.landing-hero h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 1rem; max-width: 640px; margin-inline: auto; }
.landing-subhead { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin: 0 auto 1.5rem; }
.landing-cta { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.landing-proof { max-width: 680px; margin: 1.5rem auto; text-align: center; font-size: 1rem; }
.landing-proof strong { color: var(--primary); }
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.landing-feature h3 { margin-top: 0; }
.landing-feature p { margin-bottom: 0; color: var(--muted); }
.landing-domains { text-align: center; margin: 2.5rem 0; }
.landing-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 0.75rem;
  max-width: 700px;
  margin: 1.25rem auto;
}
.landing-domain-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.landing-final-cta { text-align: center; margin: 2.5rem 0 1.5rem; }
.landing-demo { text-align: center; margin: 2rem 0; }
.landing-demo h2 { margin-top: 0; }
.demo-picker { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }
.landing-demo .stage { margin-top: 1rem; text-align: left; }
.landing-body { margin: 2rem 0; }

/* Onboarding */
.onboarding-hero { text-align: center; padding: 2rem 0 1rem; }
.onboarding-hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.onboarding-lead { color: var(--muted); font-size: 1.1rem; max-width: 520px; margin: 0 auto; }
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.onboarding-step h3 { margin-top: 0; }
.onboarding-step p { margin-bottom: 0; }
.onboarding-cta { display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 2rem 0 1.5rem; }

/* Auth */
.auth-card { max-width: 400px; margin: 3rem auto; }
.auth-card form p { margin: 0 0 1rem; }
.auth-card label { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
.auth-card input,
.auth-card textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.auth-card textarea { min-height: 8rem; resize: vertical; }
.auth-card .helptext { font-size: 0.8rem; color: var(--muted); }
.auth-card ul { padding-left: 1.1rem; font-size: 0.8rem; color: var(--muted); }
.errorlist { color: var(--error); font-size: 0.85rem; padding-left: 1.1rem; }

/* Feedback */
.feedback-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* Workout card */
.workout-card { margin: 1rem 0; border-left: 4px solid var(--primary); }
.workout-head { display: flex; justify-content: space-between; align-items: baseline; }
.workout-head h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.streak-badge {
  font-size: 0.9rem;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}
.workout-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.workout-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.workout-item.done { color: var(--muted); }
.workout-item.done > span:last-child { text-decoration: line-through; }
.workout-check {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.workout-item.done .workout-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.workout-done-msg { color: var(--success); font-weight: 600; margin: 0; }
.workout-progress {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: #eef2ff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* Dashboard */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.stat { text-align: center; }
.stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 0.85rem; }

.domain h2 { margin: 1.5rem 0 0.75rem; font-size: 1.1rem; }
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}
.exercise-card h3 { margin: 0 0 0.25rem; }
.exercise-card p { margin: 0 0 1rem; font-size: 0.9rem; }
.exercise-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
/* The dashboard's badge cluster (New/Level/due) can now run to two badges
   — if it and the action buttons don't both fit on one line, the badges
   wrap down to their own row rather than squeezing the buttons, which
   used to force About above Train. */
.exercise-footer > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.exercise-footer > span:last-child { display: flex; flex-shrink: 0; gap: 0.5rem; }
.next-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: #eef2ff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.level-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: #eef2ff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.level-badge.new { color: var(--success); background: #f0fdf4; }
.due-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: #eef2ff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* More due than a single session's review cap clears — the point where
   playing a second session that day actually keeps the backlog from
   growing (see spaced.py's due_count / EXERCISE_DESIGN.md). */
.due-badge-heavy { color: #b45309; background: #fffbeb; }

/* Play stage */
.play-header h1 { margin-bottom: 0.25rem; }
.play-header p { margin-top: 0; }

.stage {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  margin-top: 1rem;
}

.hud {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.hud strong { color: var(--text); }

.stage-prompt { font-size: 1.05rem; font-weight: 600; min-height: 1.6rem; }

.grid {
  display: grid;
  gap: 8px;
}
.grid-cell {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.grid-cell.lit { background: var(--primary); border-color: var(--primary); }
.grid-cell.selected { background: #a5b4fc; border-color: var(--primary); }
.grid-cell.hit { background: var(--success); border-color: var(--success); }
.grid-cell.miss { background: var(--error); border-color: var(--error); }

/* Go/no-go */
.gonogo-area {
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.fixation {
  font-size: 2.5rem;
  color: var(--muted);
}
.stimulus {
  width: 130px;
  height: 130px;
  border-radius: 50%;
}
.stimulus.go { background: var(--success); }
.stimulus.nogo { background: var(--error); }
.go-word { color: var(--success); font-weight: 700; }
.nogo-word { color: var(--error); font-weight: 700; }
kbd {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.85em;
}

/* Symbol Match & Mental Math */
.symbol-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.symbol-row {
  font-size: 1.8rem;
  letter-spacing: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 1.2rem;
  font-variant-emoji: text;
}
.choice-row { display: flex; gap: 0.75rem; }
.choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 90px;
  padding: 0.6rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.choice-key { font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.choice-btn.choice-correct { border-color: var(--success); background: #f0fdf4; }
.choice-btn.choice-wrong { border-color: var(--error); background: #fef2f2; }
.math-expr { font-size: 2rem; font-weight: 700; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(110px, 100%), 1fr));
  gap: 0.75rem;
}

/* Digit span & word recall */
.span-display {
  font-size: 3.5rem;
  font-weight: 700;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.span-display.span-word { font-size: 2.2rem; }
.recall-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  width: min(22rem, 100%);
  resize: none;
}
.recall-form { align-items: flex-start; }
.recall-review { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.recall-hit { color: var(--success); font-weight: 600; }
.recall-miss { color: var(--error); font-weight: 600; text-decoration: underline; }

/* Assessment */
.assessment-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  border-left: 4px solid #b45309;
}
.assessment-banner p { margin: 0.15rem 0 0; font-size: 0.9rem; }
.assessment-instructions { max-width: 34rem; }
.assessment-results { margin: 0.75rem 0 1rem; }
.rt-arrow {
  font-size: 4rem;
  font-weight: 700;
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.rt-arrow.go { color: var(--text); }

/* Technique measurement */
.measure-card { margin-top: 1.25rem; border-left: 4px solid var(--success); }
.measure-card h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.measure-line { margin: 0 0 0.5rem; }
.measure-arrow { color: var(--muted); margin: 0 0.25rem; }
.delta-badge {
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  margin-left: 0.25rem;
}
.delta-badge.delta-up { background: #f0fdf4; color: var(--success); }

/* Memory palace */
.palace-form { max-width: 480px; }
.palace-name-label { display: block; font-size: 0.9rem; margin-bottom: 0.75rem; }
.palace-name-label input { display: block; width: 100%; margin-top: 0.25rem; }
.locus-list { padding-left: 1.5rem; margin: 0 0 0.75rem; }
.locus-list li { margin-bottom: 0.4rem; }
.locus-input { width: 100%; }
.form-notice {
  background: #eef2ff;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: var(--primary-dark);
}
.form-error { color: var(--error); font-weight: 600; }
.palace-card { text-align: center; min-height: 7rem; }
.palace-station { font-size: 1rem; color: var(--muted); font-weight: 600; min-height: 1.4rem; }
.palace-recall-form { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; width: min(420px, 100%); }
.palace-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: center; }
.palace-row-label { font-size: 0.9rem; color: var(--viz-secondary); text-align: right; }
/* input.palace-input (not just .palace-input): needs to outrank
   .anagram-input's width:12rem regardless of source order — both are
   single-class selectors of equal specificity, so whichever is declared
   later in the file would otherwise silently win. */
input.palace-input { width: 100%; min-width: 0; }
.input-hit { border-color: var(--success); background: #f0fdf4; }
.input-miss { border-color: var(--error); background: #fef2f2; }
.palace-recall-form .btn { margin-top: 0.5rem; }

/* Number Pegs guided practice */
.peg-recap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
.peg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  position: relative;
}
.peg-card-number {
  position: absolute;
  top: 0.4rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.75rem;
}
.peg-card-word { font-size: 0.85rem; }
.peg-icon { display: inline-flex; width: 2.75rem; height: 2.75rem; color: var(--primary); }
.peg-icon svg { width: 100%; height: 100%; }
.peg-reveal { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.5rem 0; }
.peg-continue { margin-top: 0.5rem; }

/* Names & Faces */
.face-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.face-box { width: 140px; height: 145px; }
.face-box svg { width: 100%; height: 100%; }
.face-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.face-name { font-size: 1.4rem; font-weight: 700; min-height: 2rem; }
.face-name.face-wrong { color: var(--error); }

/* Country Capitals */
.capital-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

/* World flags */
.flag-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.flag-big img {
  width: 220px;
  max-width: 80vw;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
}
.flag-country-name { font-size: 1.5rem; font-weight: 700; min-height: 2rem; }
.flag-region { font-size: 0.95rem; }
.flag-progress-line, .flag-hint { font-size: 0.9rem; text-align: center; }
.flag-reveal { font-weight: 600; color: var(--error); }
.flag-intro-counter { font-size: 0.85rem; }
.flag-intro-next, .flag-continue { margin-top: 0.5rem; }
.flag-typeahead-form { margin-top: 1rem; width: min(22rem, 100%); }
.flag-typeahead-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
  max-width: 26rem;
}
.flag-typeahead-option { padding: 0.4rem 0.9rem; }
.flag-hint-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.9rem; }
.flag-hook-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  text-align: center;
}
.flag-hook-lead { max-width: 26rem; }
.flag-find-hook-btn, .flag-hide-hook-btn { font-size: 0.85rem; }
.flag-own-hook-input {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  width: min(28rem, 100%);
  resize: vertical;
}
.flag-tip-body p { margin: 0.4rem 0; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--primary-dark); }
.flag-hook-dialog {
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  color: var(--text);
  background: var(--card);
}
.flag-hook-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.flag-hook-dialog h3 { margin-top: 0; }
.flag-hook-dialog ol { padding-left: 1.2rem; }
.flag-hook-dialog form { margin-top: 0.75rem; text-align: right; }
.flag-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(min(130px, 100%), 1fr));
  gap: 0.75rem;
}
.flag-choice {
  padding: 0.5rem;
  background: none;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  cursor: pointer;
}
.flag-choice img { width: 130px; max-width: 100%; border-radius: 4px; display: block; }
.flag-choice.choice-correct { border-color: var(--success); background: #f0fdf4; }
.flag-choice.choice-wrong { border-color: var(--error); background: #fef2f2; }
.region-row { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0; }
.region-name { width: 5.5rem; font-weight: 600; font-size: 0.95rem; }
.region-count { width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }
.region-bar {
  flex: 1;
  display: flex;
  height: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.region-fill { background: var(--success); }
.region-fill-learning { background: #f59e0b; }
.flags-region-card h2 { margin-top: 0; }
.flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr));
  gap: 0.75rem;
}
.flags-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  border-radius: 8px;
  border: 2px solid transparent;
}
.flags-grid-item img { width: 100%; max-width: 90px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); }
.flags-grid-name { font-size: 0.8rem; text-align: center; }
.flags-status-mastered { border-color: var(--success); }
.flags-status-learning { border-color: #f59e0b; }
.flags-status-unseen { opacity: 0.5; }

/* Matrix reasoning — cells and choices share one fixed pixel size (not
   independently-responsive tracks) so the same "size" attribute value
   always renders at the same absolute size in the grid and among the
   options; otherwise a medium in the grid could read as a large among the
   choices, or vice versa. */
:root { --matrix-cell: 84px; }
.matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--matrix-cell));
  grid-auto-rows: var(--matrix-cell);
  gap: 0.6rem;
  justify-content: center;
}
.matrix-cell {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
}
.matrix-cell svg { width: 100%; height: 100%; }
.matrix-cell-empty {
  border: 2px dashed rgba(0, 0, 0, 0.25);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--muted);
}
.matrix-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 420px;
  margin: 1rem auto 0;
}
.matrix-choice {
  width: var(--matrix-cell);
  height: var(--matrix-cell);
  padding: 6px;
  background: none;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  cursor: pointer;
}
.matrix-choice svg { width: 100%; height: 100%; }
.matrix-choice.choice-correct { border-color: var(--success); background: #f0fdf4; }
.matrix-choice.choice-wrong { border-color: var(--error); background: #fef2f2; }
.matrix-continue { display: block; margin: 1rem auto 0; }

/* Stroop */
.stroop-word { font-size: 3rem; font-weight: 800; text-align: center; margin: 1.5rem 0; }
.stroop-swatches {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.stroop-swatch {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.stroop-swatch-key {
  position: absolute;
  bottom: -1.3rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--muted);
}
.stroop-swatch-correct { outline: 3px solid var(--success); outline-offset: 2px; }
.stroop-swatch-wrong { outline: 3px solid var(--error); outline-offset: 2px; }

/* Trail making */
.trail-field {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1;
  margin: 1rem auto 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.trail-lines { position: absolute; top: 0; left: 0; pointer-events: none; }
.trail-lines polyline { fill: none; stroke: var(--primary); stroke-width: 2; }
.trail-target {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.trail-target-done { background: var(--success); border-color: var(--success); color: #fff; }
.trail-target-error { background: #fef2f2; border-color: var(--error); }

/* Vocabulary match */
.vocab-word { font-size: 2.2rem; font-weight: 700; text-align: center; margin: 1rem 0; }

/* Number sense */
.numsense-row { display: flex; width: 100%; justify-content: center; gap: 1rem; margin-top: 1rem; }
.numsense-box {
  flex: 0 1 150px;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  background: var(--card);
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.numsense-box svg { width: 100%; height: 100%; }
.numsense-hidden { background: var(--bg); }
.numsense-box.choice-correct { border-color: var(--success); background: #f0fdf4; }
.numsense-box.choice-wrong { border-color: var(--error); background: #fef2f2; }
.face-choices { margin-top: 0.75rem; }

/* Anagrams */
.letter-tiles { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.tile {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.tile:hover { border-color: var(--primary); }
.anagram-form { display: flex; gap: 0.5rem; }
.anagram-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.1rem;
  width: 12rem;
  text-transform: lowercase;
}

/* Confidence Call */
.score-line { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.dot-row { display: flex; width: 100%; gap: 1.5rem; justify-content: center; }
.dot-field {
  position: relative;
  flex: 0 1 200px;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--bg);
  border: 2px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dot-field:not(:disabled):hover { border-color: var(--primary); }
.dot-field.chosen { border-color: var(--primary); }
.dot-field.reveal-correct { border-color: var(--success); background: #f0fdf4; }
.dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
}
.dot-mask { font-size: 2.2rem; font-weight: 700; color: var(--muted); }
.confidence-row { display: flex; gap: 0.75rem; min-height: 3.5rem; }
.conf-btn { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.conf-btn:disabled { opacity: 0.5; }
.conf-odds { font-size: 0.75rem; color: var(--muted); }

.feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
}
.feedback.good { color: var(--success); }
.feedback.bad { color: var(--error); }

/* Progress page & charts */
:root {
  --viz-series: #2a78d6;
  --viz-series-hover: #1c5cab;
  --viz-grid: #e1e0d9;
  --viz-tick: #898781;
  --viz-ink: #1c2333;
  --viz-secondary: #52514e;
  --viz-surface: #ffffff;
}
.chart-card { margin-bottom: 1.25rem; }
.chart-card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.chart-card > p { margin-top: 0; font-size: 0.9rem; }
.chart-wrap { position: relative; }
.viz { width: 100%; height: auto; display: block; outline: none; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-line { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-dot { fill: var(--viz-series); }
.viz-dot-ring { fill: var(--viz-surface); }
.viz-bar { fill: var(--viz-series); }
.viz-bar.is-hover { fill: var(--viz-series-hover); }
.viz-hit { fill: transparent; }
.viz-crosshair { stroke: var(--viz-grid); stroke-width: 1; }
.viz-tick { font-size: 10px; fill: var(--viz-tick); }
.viz-label { font-size: 12px; fill: var(--viz-secondary); }
.viz-value { font-size: 12px; font-weight: 600; fill: var(--viz-ink); }
.viz-end-label { font-size: 12px; font-weight: 600; fill: var(--viz-ink); }
.viz-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.viz-tooltip strong { display: block; }
.viz-tooltip span { color: var(--muted); }
.chart-card details { margin-top: 0.5rem; }
.chart-card summary { font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.viz-table { border-collapse: collapse; margin-top: 0.5rem; font-size: 0.85rem; }
.viz-table th, .viz-table td {
  text-align: left;
  padding: 0.25rem 1rem 0.25rem 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.viz-table th { color: var(--muted); font-weight: 600; }

/* About pages */
.about-header { margin-bottom: 1rem; }
.about-header h1 { margin: 0.5rem 0 0.25rem; }
.about-header p { margin-top: 0; }
.prose h3 { margin: 1.25rem 0 0.4rem; font-size: 1.05rem; }
.prose h3:first-child { margin-top: 0; }
.prose h4 { margin: 1rem 0 0.3rem; font-size: 0.95rem; }
.prose p { margin: 0 0 0.75rem; }
.refs { font-size: 0.85rem; color: var(--muted); padding-left: 1.25rem; }
.refs li { margin-bottom: 0.4rem; }
.refs a { white-space: nowrap; }
.about-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }

.summary { text-align: center; }
.summary h2 { margin-bottom: 0.5rem; }
.summary .stat-value { font-size: 2.5rem; }
.cap-reached {
  max-width: 32rem;
  margin: 0.75rem auto 0;
  padding: 0.6rem 1rem;
  background: #eef2ff;
  color: var(--primary-dark);
  border-radius: 8px;
  font-size: 0.9rem;
}

.ready-screen {
  text-align: center;
  max-width: 26rem;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
}
.ready-screen h2 { margin-top: 0; }