/* Rekenen Trainer: alleen afwijkingen bovenop de centrale Ookgaaf-standaard.
   Laadvolgorde: shared.css, game-tokens.css, daarna dit bestand. */
:root {
  /* Rekenen-accent */
  --accent: #ff6f7d;
  --accent-hover: #ff9da6;
  --accent-soft: #2a2025;
  --trainer-button-text: #2a1014;

  /* Rekenen vrije training: de som blijft in dezelfde centrale actieve ruimte. */
  --trainer-free-playfield-height: 450px;
  --trainer-free-playfield-min-height: 450px;
}

body.rekenen-theme {
  --trainer-bg-glow-color: rgba(55, 31, 38, .65);
}

body.rekenen-theme.training-play-page,
body.rekenen-theme.training-intro-page {
  --trainer-bg-glow-x: 15%;
}

body.rekenen-theme.game-page {
  --trainer-bg-glow-x: 85%;
  --trainer-bg-glow-size-mobile: 25rem;
  --trainer-bg-glow-size-game-desktop: 40rem;
}

body.rekenen-theme .adaptive-settings {
  min-width: min(156px, 42vw);
}

body.rekenen-theme .adaptive-settings label {
  display: block;
}

body.rekenen-theme .adaptive-settings select {
  width: 100%;
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: var(--trainer-border-width, 1px) solid var(--line, var(--color-line));
  border-radius: var(--trainer-radius-sm, 10px);
  appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aeb5c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
      right 11px center / 16px 16px no-repeat,
    var(--trainer-input-bg, #111419);
  color: var(--muted, var(--color-muted));
  font-size: 13px;
  font-weight: 400;
}

body.rekenen-theme .adaptive-note {
  min-height: 0;
  margin: 0;
  color: #c8cdd6;
  font-size: 13px !important;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity .18s;
}

body.rekenen-theme .adaptive-note.is-visible {
  margin: 0 0 var(--space-mode-after-play);
  opacity: 1;
}

body.rekenen-theme .sum {
  color: var(--text, var(--color-text));
  font-size: clamp(50px, 15vw, 72px);
  font-weight: var(--font-weight-sequence);
  letter-spacing: -.055em;
  white-space: nowrap;
}

body.rekenen-theme .sum.sum-long {
  font-size: clamp(38px, 12vw, 48px);
}

body.rekenen-theme .sum.sum-very-long {
  font-size: clamp(32px, 10vw, 40px);
}

body.rekenen-theme .number-card.shows-answer .sum,
body.rekenen-theme .play-field.shows-answer .sum {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .28em;
  color: var(--text, var(--color-text));
  font-size: clamp(30px, 7vw, 48px);
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}

body.rekenen-theme .number-card.shows-answer .sum span,
body.rekenen-theme .play-field.shows-answer .sum span {
  color: var(--accent);
}

body.rekenen-theme .play-screen .sequence.sum {
  color: var(--text, var(--color-text));
  font-size: clamp(50px, 15vw, 72px);
}

body.rekenen-theme .play-screen .sequence.sum.sum-long {
  font-size: clamp(38px, 12vw, 48px);
}

body.rekenen-theme .play-screen .sequence.sum.sum-very-long {
  font-size: clamp(32px, 10vw, 40px);
}

@media (max-width: 767px) {
  body.rekenen-theme .adaptive-settings {
    min-width: min(148px, 44vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rekenen-theme .adaptive-note {
    transition: none;
  }
}