/* Pearto Kids final visual/accessibility polish.
 * This layer intentionally overrides only Kids-mode presentation.
 */
:root {
  --kids-muted: #53657a;
  --kids-purple-ink: #5d3fb5;
  --kids-pink-ink: #b8326a;
  --kids-primary-a: #6847e0;
  --kids-primary-b: #376bd0;

  /* Text-safe game accents. They also tint cards at low percentages, so the
     experience stays colorful without using low-contrast pastel text. */
  --kids-accent-sky: #1f5fbf;
  --kids-accent-grape: #6840bd;
  --kids-accent-mint: #13785a;
  --kids-accent-orange: #a84c16;
  --kids-accent-blue: #315cad;
  --kids-accent-teal: #0c7272;
  --kids-accent-pink: #a83a68;
  --kids-focus: #4931a8;
}

.kids-mode {
  color-scheme: light;
}

.kids-mode :focus-visible {
  outline: 4px solid var(--kids-focus) !important;
  outline-offset: 4px !important;
}

.kids-brand strong,
.kids-kicker {
  color: var(--kids-purple-ink);
}

.kids-wiggle-word {
  color: var(--kids-pink-ink);
}

.kids-float-word,
.kids-word-lab button {
  color: var(--kids-purple-ink);
}

.kids-button-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--kids-primary-a), var(--kids-primary-b));
  box-shadow: 0 12px 28px rgba(55, 107, 208, .24);
}

.kids-button-primary:hover {
  box-shadow: 0 16px 32px rgba(55, 107, 208, .3);
}

.kids-level-picker a.is-active,
.kids-stage-levels a.is-active {
  color: #fff;
  background: var(--kids-purple-ink);
  border-color: transparent;
}

.kids-stage-levels a.is-active {
  background: var(--game-accent);
}

.kids-accent-sky { --game-accent: var(--kids-accent-sky); }
.kids-accent-grape { --game-accent: var(--kids-accent-grape); }
.kids-accent-mint { --game-accent: var(--kids-accent-mint); }
.kids-accent-orange { --game-accent: var(--kids-accent-orange); }
.kids-accent-blue { --game-accent: var(--kids-accent-blue); }
.kids-accent-teal { --game-accent: var(--kids-accent-teal); }
.kids-accent-pink { --game-accent: var(--kids-accent-pink); }

/* Kids mode deliberately uses larger controls than the adult product. */
.kids-nav-links a,
.kids-grownups-link,
.kids-exit,
.kids-icon-button,
.kids-button,
.kids-level-picker a,
.kids-stage-levels a,
.kids-sentence-builder button,
.kids-word-lab button {
  min-height: 48px;
}

.kids-icon-button {
  width: 48px;
  height: 48px;
}

.kids-level-picker a,
.kids-stage-levels a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
}

.kids-game-card,
.kids-choice,
.kids-button,
.kids-level-picker a,
.kids-stage-levels a,
.kids-nav a,
.kids-icon-button,
.kids-word-lab button,
.kids-sentence-builder button,
.kids-letter,
.kids-memory-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hover may enhance an interaction, but focus and touch never depend on it. */
@media (hover: hover) and (pointer: fine) {
  .kids-nav-links a:hover,
  .kids-grownups-link:hover,
  .kids-exit:hover,
  .kids-level-picker a:hover,
  .kids-stage-levels a:hover {
    background-color: #edf1ff;
  }

  .kids-game-card:hover {
    transform: translateY(-5px);
  }
}

.kids-game-card:focus-visible,
.kids-choice:focus-visible,
.kids-memory-card:focus-visible {
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--kids-focus), var(--kids-shadow);
}

/* Correct/wrong states have shape/text reinforcement as well as color. */
.kids-choice.is-correct::after {
  content: " ✓";
  font-weight: 950;
}

.kids-choice.is-wrong::after {
  content: " · try again";
  font-size: .82em;
  font-weight: 800;
}

.kids-choice.is-correct {
  background: #e7f8ef;
  border-color: #167454;
}

.kids-choice.is-wrong {
  background: #fff0f0;
  border-color: #b94a4a;
}

.kids-game-feedback {
  border: 1px solid #d7deef;
}

.kids-game-tip {
  border: 1px solid #eadc9e;
  color: #5f4c1f;
}

.kids-memory-card.is-matched {
  outline-color: #167454;
}

.kids-letter:disabled {
  opacity: .45;
}

.kids-star-counter,
.kids-game-card,
.kids-grownups-grid section,
.kids-grownups-panel,
.kids-button-soft,
.kids-float-card,
.kids-word-lab button,
.kids-sentence-builder button {
  border-color: rgba(36, 48, 77, .14);
}

.kids-nav {
  /* Keep text readable when backdrop-filter is unsupported. */
  background: rgba(255, 253, 248, .96);
}

@supports (backdrop-filter: blur(1px)) {
  .kids-nav {
    background: rgba(255, 253, 248, .9);
  }
}

/* At narrow widths, preserve breathing room instead of cramming actions. */
@media (max-width: 720px) {
  .kids-nav-inner {
    gap: 8px;
  }

  .kids-nav-actions {
    margin-left: auto;
  }

  .kids-exit {
    min-height: 44px;
  }

  .kids-hero-actions .kids-button {
    min-width: min(100%, 180px);
  }

  .kids-level-picker,
  .kids-stage-levels {
    gap: 9px;
  }
}

@media (max-width: 420px) {
  .kids-brand .kids-spark {
    display: none;
  }

  .kids-icon-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .kids-exit {
    font-size: .82rem;
    padding-inline: 9px;
  }

  .kids-game-card {
    min-height: 270px;
  }
}

/* More-contrast users get simple, stronger surfaces rather than subtle tint. */
@media (prefers-contrast: more) {
  .kids-game-card,
  .kids-stage,
  .kids-grownups-grid section,
  .kids-grownups-panel,
  .kids-create-card,
  .kids-stop-card {
    border-width: 2px;
    border-color: var(--kids-ink);
  }

  .kids-button-primary,
  .kids-memory-card {
    background: var(--kids-focus);
  }
}

@media (forced-colors: active) {
  .kids-mode :focus-visible {
    outline-color: Highlight !important;
  }

  .kids-button-primary,
  .kids-memory-card,
  .kids-game-card,
  .kids-stage,
  .kids-choice {
    forced-color-adjust: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kids-wiggle-word,
  .kids-word-lab button,
  .kids-mascot,
  .kids-game-card,
  .kids-button {
    transform: none !important;
  }
}