* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top right, rgba(249, 135, 62, 0.12), transparent 28%),
    radial-gradient(circle at top left, rgba(86, 184, 176, 0.14), transparent 32%),
    var(--color-surface);
  color: var(--color-text-primary);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }

.app-shell {
  min-height: 100vh;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) calc(var(--nav-height) + var(--space-8));
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.topbar__meta { display: flex; flex-direction: column; gap: 6px; }
.eyebrow { color: var(--color-text-secondary); font-size: var(--text-label); font-weight: 700; }
.page-title { margin: 0; font-size: var(--text-headline-lg); line-height: 1.1; }
.subtle { color: var(--color-text-secondary); }
.tiny-meta { color: var(--color-text-muted); font-size: 13px; font-weight: 700; }

.surface-panel,
.ui-card {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-surface-low);
  box-shadow: var(--shadow-ambient);
}
.surface-panel { border-radius: var(--radius-panel); padding: var(--space-6); }
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 1px 1px 0 var(--glass-border), var(--shadow-ambient);
}

.ui-button {
  min-height: var(--cta-height);
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}
.ui-button--primary { background: var(--gradient-primary); color: var(--color-white); }
.ui-button--secondary { background: var(--color-secondary-soft); color: var(--color-secondary-deep); }
.ui-button--tertiary { background: transparent; color: var(--color-primary-deep); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.7);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
}

.progress {
  width: 100%;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-high);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: var(--value, 50%);
  border-radius: inherit;
  background: var(--gradient-secondary);
}

.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-4); }
.hero__title { margin: 0; font-size: var(--text-display-lg); line-height: 1.02; }
.hero__desc { margin: 0; font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-text-secondary); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__art {
  min-height: 260px;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.22));
  position: relative;
  overflow: visible;
}
.hero__blob, .hero__star, .hero__face { position: absolute; }
.hero__blob {
  inset: 12% 12% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 46% 54% 52% 48%;
  background: linear-gradient(180deg, #ffd76a, #f9873e);
  box-shadow: 0 24px 48px rgba(164, 74, 0, 0.18);
}
.hero__face {
  width: 128px; height: 128px; left: 18px; bottom: -18px;
  background: var(--color-white);
  border-radius: 42px;
  display: grid; place-items: center;
  font-size: 56px;
  box-shadow: var(--shadow-floating);
}
.hero__star { right: 18px; bottom: 18px; font-size: 40px; }

.stats-strip,
.card-grid,
.player-options,
.completion-grid,
.parent-panel { display: grid; gap: var(--space-4); }
.stats-strip { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--space-6); }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parent-panel { grid-template-columns: 1.4fr 1fr; }
.completion-grid { grid-template-columns: 1.1fr 0.9fr; }
.player-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ui-card { padding: var(--space-6); display: grid; gap: var(--space-4); }
.ui-card--interactive { background: var(--color-surface-mid); }
.ui-card--floating { background: var(--color-surface-contrast); }
.stat-card { padding: 20px 22px; background: var(--color-surface-mid); }
.stat-card strong { display: block; font-size: 28px; margin-bottom: 8px; }
.card-icon,
.player-option__emoji {
  width: 56px; height: 56px; border-radius: 20px; display: grid; place-items: center;
  background: rgba(255,255,255,0.7); font-size: 28px;
}
.meta-row,
.section__header,
.list-item,
.player-topbar,
.route-links { display: flex; align-items: center; gap: var(--space-4); }
.meta-row, .route-links { flex-wrap: wrap; }
.section { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.section__header { justify-content: space-between; }
.section__title { margin: 0; font-size: var(--text-headline-md); }
.list { display: grid; gap: var(--space-3); }
.list-item {
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.64);
}

.lesson-header,
.player-screen,
.completion-screen { margin-bottom: var(--space-6); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.filter-chip {
  min-height: 42px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--color-surface-mid); color: var(--color-text-secondary); font-weight: 700;
}
.filter-chip.is-active { background: var(--gradient-primary); color: var(--color-white); }

.player-screen {
  display: grid;
  gap: var(--space-6);
}
.player-topbar { justify-content: space-between; }
.player-board {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
}
.player-prompt {
  font-size: var(--text-display-md);
  line-height: 1.08;
  max-width: 14ch;
}
.player-helper { font-size: var(--text-body-lg); color: var(--color-text-secondary); }
.player-option {
  min-height: 180px;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface-mid);
  box-shadow: var(--shadow-ambient);
  display: grid;
  align-content: start;
  gap: var(--space-4);
}
.player-option.is-correct { outline: 3px solid rgba(123, 198, 123, 0.35); }
.feedback-banner {
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(123, 198, 123, 0.18);
  color: var(--color-text-primary);
  font-weight: 700;
}

.completion-hero {
  padding: var(--space-8);
  min-height: 340px;
  display: grid;
  align-content: center;
  gap: var(--space-4);
}
.reward-list { display: grid; gap: var(--space-3); }
.reward-item {
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  font-weight: 700;
}

.route-links { margin-top: var(--space-4); }
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 720px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 32px;
  z-index: 20;
}
.bottom-nav__item {
  min-height: 64px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 700;
}
.bottom-nav__item.is-active { background: rgba(255,255,255,0.8); color: var(--color-primary-deep); }

@media (max-width: 920px) {
  .hero,
  .parent-panel,
  .card-grid,
  .stats-strip,
  .player-options,
  .completion-grid { grid-template-columns: 1fr; }
  .completion-hero { min-height: auto; }
}

@media (max-width: 640px) {
  .app-shell { padding-inline: 12px; }
  .surface-panel, .ui-card, .player-option { border-radius: 28px; }
  .hero, .player-board, .completion-hero { padding: var(--space-6); }
  .hero__art { min-height: 210px; }
  .hero__blob { width: 170px; height: 170px; }
  .hero__face { width: 96px; height: 96px; font-size: 44px; }
  .bottom-nav { width: calc(100% - 16px); bottom: 8px; }
  .bottom-nav__item { font-size: 13px; }
  .player-prompt { max-width: none; font-size: 32px; }
}