/* Herbruikbare components: buttons, choice-rows, modals, loading, toast. */

/* ========== Choice buttons ========== */
.choice-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.choice {
  flex: 1;
  min-width: 100px;
  padding: 14px 16px;
  font-size: 18px;
  border-radius: var(--radius);
  background: #F3F3F8;
  color: var(--text);
  border: 3px solid transparent;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.choice:hover  { transform: translateY(-2px); }
.choice:active { transform: translateY(0); }
.choice.selected {
  background: var(--primary);
  color: white;
  border-color: var(--primary-dark);
}
.choice .swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
.choice.theme-boy  .swatch { background: #4FB8F0; }
.choice.theme-girl .swatch { background: #F277B8; }

/* Mode-keuze (Losse woorden / Korte zinnen) — twee gelijkwaardige knoppen
   met emoji-icoon. Expliciete .selected om specificity-conflicten met
   andere .choice-varianten te voorkomen. */
.choice.mode {
  flex-direction: row;
  gap: 8px;
  font-size: 17px;
  padding: 14px 12px;
}
.choice.mode.selected {
  background: var(--primary);
  color: white;
  border-color: var(--primary-dark);
}
.choice.mode .mode-icon {
  font-size: 22px;
  line-height: 1;
}

/* 9-level keuze in een 3x3 grid. */
.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.choice.level {
  flex-direction: column;
  gap: 2px;
  padding: 12px 6px;
  min-width: 0;
  min-height: 72px;
  text-align: center;
}
.choice.level .lvl-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.choice.level .lvl-desc {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.15;
  white-space: normal;
}
.choice.level.selected .lvl-desc { color: white; }

/* Gender-keuze: outline-stijl als geselecteerd, zodat "Blauw" niet in
   de blauwe primary-tint verdrinkt en de swatch zichtbaar blijft. */
.choice.theme-boy.selected,
.choice.theme-girl.selected {
  background: white;
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79,184,240,.18);
}
body[data-theme="girl"] .choice.theme-girl.selected {
  box-shadow: 0 0 0 4px rgba(242,119,184,.22);
}
.choice.theme-boy.selected  .swatch,
.choice.theme-girl.selected .swatch {
  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--primary);
}

/* ========== Buttons ========== */
.btn {
  padding: 14px 28px;
  font-size: 18px;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); }
.btn-primary:active               { transform: translateY(0); box-shadow: var(--shadow-pressed); }
.btn-primary:disabled             { opacity: .5; cursor: not-allowed; }
.btn-large { font-size: 24px; padding: 18px 40px; }

.btn-secondary {
  background: var(--text);
  color: white;
}
.btn-secondary:hover { filter: brightness(1.15); }
.btn-text {
  background: transparent;
  color: var(--text-soft);
  padding: 10px;
}
.btn-stop {
  background: #FFE8E8;
  color: var(--danger);
  padding: 10px 18px;
  font-size: 16px;
  border-radius: var(--radius);
}
/* Pauze-knop in game-header — neutrale gele/oranje tint (matcht thinking-state
   visueel: "wachten" suggestie zonder rood/stop-betekenis). */
.btn-pause {
  background: #FFF3D9;
  color: #8B5E14;
  padding: 10px 18px;
  font-size: 16px;
  border-radius: var(--radius);
}
.game-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
/* Default: text-label tonen, icoon verbergen (desktop-affordance is duidelijke
   tekst). Mobile responsive switcht naar icon-only — zie responsive.css. */
.game-actions .btn-pause .btn-icon,
.game-actions .btn-stop  .btn-icon { display: none; }

/* ========== Loading overlay ========== */
.loading {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #E4E4EC;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

/* ========== Toast ========== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: white;
  padding: 14px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
  max-width: 90vw;
  font-weight: 700;
  animation: slideUp 300ms ease;
}

/* ========== Modal (microfoon-hulp, Kind-hub, etc.) ========== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 40, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  /* clamp: 20px op smal, 6vw als ademruimte, max 40px op groot scherm.
     Vermijdt dat modal-card edge-to-edge plakt op mobile. */
  padding: clamp(20px, 6vw, 40px);
}
/* ========== Resume-overlay (iPad lock recovery) ========== */
/* Full-screen tap-target: gehele scherm = user-gesture-vanger voor iOS
   audio-resume. Daarom GEEN aparte knop — elke tap werkt. */
.resume-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  cursor: pointer;
  padding: 20px;
}
.resume-overlay-card {
  background: var(--card);
  padding: 32px 28px;
  border-radius: var(--radius-big);
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.resume-overlay-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 10px;
}
.resume-overlay-card h2 {
  margin: 0 0 10px;
  font-size: 26px;
  color: var(--text);
}
.resume-overlay-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 17px;
}

.modal-card {
  position: relative;        /* anchor voor absolute close-knoppen (bv. auth-modal-close) */
  background: var(--card);
  border-radius: var(--radius-big);
  padding: 28px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow);
  /* modalIn (niet slideUp) — slideUp doet translate(-50%, ...) wat
     bedoeld is voor de horizontaal-gecentreerde toast. Modal-card wordt
     via flexbox gecentreerd, dus -50% X-translate zou 'm half offscreen
     schuiven tijdens de animatie. */
  animation: modalIn 260ms ease;
}
.modal-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  color: var(--text);
}
.modal-card p {
  margin: 0 0 16px;
  color: var(--text-soft);
  font-size: 17px;
}
.mic-steps {
  padding-left: 20px;
  margin: 0 0 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
.mic-steps li { margin: 6px 0; }
.mic-steps kbd {
  background: #F3F3F8;
  border-radius: 6px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: .95em;
  font-weight: 700;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========== Settings-modal rows ========== */
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
}
.settings-row + .settings-row { /* niet eerste */ }
.settings-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.settings-row-desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
.settings-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

/* ========== Kind-hub modal — mode-keuze (woorden / zinnen / boek) ========== */
/* 3-tile rij die "Wat oefenen?" laat kiezen. De boek-tile heeft een extra
   pijl-affordance want klikken ervan navigeert (opent Kind-boekenkast) i.p.v.
   alleen toggelt zoals woorden/zinnen. */
.kid-hub-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.kid-hub-mode-grid .choice {
  position: relative;
  flex-direction: column;
  gap: 4px;
  padding: 14px 8px;
  min-height: 72px;
  font-size: 13px;
}
.kid-hub-mode-grid .choice .mode-icon {
  font-size: 24px;
  line-height: 1;
}
.kid-hub-mode-grid .mode-book .mode-arrow {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}

/* Spacing tussen .field-secties binnen Kind-hub: het tweede + derde veld
   krijgen extra lucht boven zich zodat "Wat oefenen?" niet plakt tegen
   de niveau-grid. Buiten Kind-hub blijven .field-stacks ongewijzigd. */
#kid-hub-modal .field + .field { margin-top: 22px; }

/* Settings-sectie binnen Kind-hub — geen border-top meer (was visueel
   te zware scheiding). Wel ademruimte boven. */
.kid-hub-settings {
  margin-top: 22px;
}
.kid-hub-settings-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Extra marge tussen settings en Start-knop blok */
#kid-hub-modal .modal-actions { margin-top: 24px; }

/* Kid-hub past niet altijd in viewport-hoogte op mobiel (iPhone met Safari
   chrome ≈ 600px effectieve hoogte; modal heeft niveau-grid + mode-grid +
   settings + actions = ~700px content). Interne scroll zodat Start-knop
   altijd bereikbaar is.
   100dvh = dynamic viewport height (modern standard, accountert voor mobile
   browser-chrome). Fallback naar 100vh op oude browsers. Marge 80px aan boven
   + onder samen zodat modal nooit onder Safari URL-bar of bottom-toolbar
   verdwijnt. */
#kid-hub-modal .modal-card {
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
}

@media (max-width: 420px) {
  .kid-hub-mode-grid {
    grid-template-columns: 1fr;
  }
  .kid-hub-mode-grid .choice {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 56px;
    padding: 12px 14px;
    font-size: 15px;
  }
  .kid-hub-mode-grid .choice .mode-icon { font-size: 22px; }
}

/* ========== Feedback overlay (confetti) ========== */
.feedback-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.confetti {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  animation: fall 1.4s ease-in forwards;
}