/* Focus Trainer: alleen inhoudelijke afwijkingen bovenop de centrale Ookgaaf-standaard.
   Laadvolgorde: shared.css, game-tokens.css, daarna dit bestand. */
:root {
  --accent: #ffd166;
  --accent-hover: #ffdc8a;
  --accent-soft: #3a321d;
  --trainer-button-text: #29210f;
}

body.focus-theme {
  --trainer-bg-glow-color: rgba(80, 65, 25, .58);
}

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

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

body.focus-theme .focus-stage {
  display: grid;
  grid-template-rows: auto auto 36px var(--touch-target);
  gap: var(--space-keypad-gap);
  width: 100%;
  min-height: 0;
  align-content: start;
  text-align: center;
}

body.focus-theme .focus-stage > .eyebrow {
  align-self: center;
}

body.focus-theme .symbol-grid {
  --columns: 5;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--focus-grid-gap, 6px);
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
}

body.focus-theme .symbol-grid[data-columns="7"] {
  --focus-grid-gap: 4px;
}

body.focus-theme .symbol-grid[data-columns="9"] {
  --focus-grid-gap: 3px;
}

body.focus-theme .symbol {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: var(--trainer-border-width, 1px) solid var(--trainer-panel-border, rgba(255, 255, 255, .14));
  border-radius: var(--focus-symbol-radius, 8px);
  background: var(--trainer-key-bg, var(--color-panel));
  color: var(--text, var(--color-text));
  cursor: pointer;
}

body.focus-theme .focus-shape {
  width: 58%;
  height: 58%;
  display: block;
  overflow: visible;
}

body.focus-theme .focus-shape-shape {
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-linejoin: round;
}

body.focus-theme .symbol:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--trainer-key-bg-hover, var(--color-panel-raised));
}

body.focus-theme .symbol:focus-visible {
  outline: var(--trainer-focus-outline, 2px) solid var(--text, var(--color-text));
  outline-offset: 1px;
}

body.focus-theme .symbol:disabled {
  cursor: default;
}

body.focus-theme .symbol.selected-wrong {
  border-color: var(--danger, #ff7582);
}

body.focus-theme .symbol.target.revealed {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--color-panel));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

body.focus-theme .focus-feedback {
  min-height: 36px;
  margin: 0;
  align-items: center;
}

body.focus-theme .focus-feedback:empty {
  visibility: hidden;
}

body.focus-theme .focus-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-keypad-gap);
  min-height: var(--touch-target);
}

body.focus-theme .focus-actions .primary-button {
  width: 100%;
}

body.focus-theme .focus-actions .primary-button:not(.is-visible) {
  visibility: hidden;
  pointer-events: none;
}

body.focus-theme .focus-result {
  display: grid;
  grid-column: 1 / -1;
  height: 100%;
  padding: var(--space-card-padding);
  place-content: center;
  gap: var(--space-keypad-gap);
  border: var(--trainer-border-width, 1px) solid var(--line, var(--color-line));
  border-radius: var(--trainer-radius-xl, 16px);
  background: var(--trainer-card-bg, var(--color-panel));
  color: var(--muted, var(--color-muted));
  font-size: var(--font-size-body);
}

body.focus-theme .focus-result strong {
  color: var(--text, var(--color-text));
  font-size: clamp(32px, 9vw, 52px);
  font-variant-numeric: tabular-nums;
}

body.focus-theme .focus-game-stage {
  position: relative;
}

body.focus-theme .focus-pause {
  display: grid;
  grid-row: 2;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
  place-content: center;
  gap: var(--space-keypad-gap);
  border: var(--trainer-border-width, 1px) solid var(--line, var(--color-line));
  border-radius: var(--trainer-radius-xl, 16px);
  background: var(--trainer-card-bg, var(--color-panel));
  color: var(--muted, var(--color-muted));
  font-size: var(--font-size-body);
}

body.focus-theme .focus-pause strong {
  color: var(--text, var(--color-text));
  font-size: var(--font-size-result);
}

body.focus-theme.is-game-paused .focus-game-stage .symbol-grid,
body.focus-theme.is-game-paused .focus-game-stage .focus-feedback,
body.focus-theme.is-game-paused .focus-game-stage .focus-actions {
  visibility: hidden;
}

body.focus-theme.is-game-paused .focus-game-stage .focus-pause {
  visibility: visible;
}

@media (max-width: 767px) {
  body.focus-theme.is-training-playing .training-game-main {
    min-height: var(--mobile-standard-work-area-height);
    padding-top: 0;
    padding-bottom: var(--space-play-main-compact);
  }

  body.focus-theme .symbol-grid {
    width: min(100%, 318px);
  }

  body.focus-theme .focus-pause {
    width: min(100%, 318px);
  }

  body.focus-theme .symbol {
    --focus-symbol-radius: 7px;
    font-size: clamp(15px, 6vw, 24px);
  }
}

@media (max-width: 360px) {
  body.focus-theme .symbol-grid {
    width: min(100%, 306px);
  }

  body.focus-theme .focus-pause {
    width: min(100%, 306px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.focus-theme .symbol {
    transition: none;
  }
}