/* Reset, design tokens, theme variables, top-level layout primitives,
   en globale animations. Geen component-specifieke styling. */

/* Ensure the HTML [hidden] attribute beats any explicit display rules. */
[hidden] { display: none !important; }

:root {
  --radius:       18px;
  --radius-big:   28px;
  --radius-small: 10px;
  --shadow:         0 8px 30px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --shadow-pressed: 0 2px 10px rgba(0,0,0,.1);
  --transition:     200ms cubic-bezier(.2,.8,.2,1);
  --text:      #2B2B3D;
  --text-soft: #6B6B80;
  --success:   #47C474;
  --warn:      #F9B63F;
  --danger:    #E56E6E;
  --card:      #FFFFFF;
}

body[data-theme="boy"] {
  --primary:      #4FB8F0;
  --primary-dark: #2A8FC9;
  --accent:       #FFCE5B;
  --bg-grad-1:    #E8F4FF;
  --bg-grad-2:    #FFF7F0;
}

body[data-theme="girl"] {
  --primary:      #F277B8;
  --primary-dark: #C04892;
  --accent:       #FFCE5B;
  --bg-grad-1:    #FFEAF5;
  --bg-grad-2:    #FFF5F9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow-x: hidden;
}

button  { font-family: inherit; border: none; cursor: pointer; font-weight: 700; }
input   { font-family: inherit; }

/* ========== Screen layout ========== */
.screen {
  display: flex;
  flex-direction: column;
}

/* Welcome + game-screen vullen wél de viewport — welcome omdat 't een
   first-impression hero-scherm is, game omdat de header anders offscreen
   schuift bij lange content. Home-screen doet 't NIET: bij guest of
   weinig profielen leverde 100dvh een grote witte ruimte onder de content
   op (mei 2026 Naud-feedback). Home volgt z'n natuurlijke content-hoogte;
   body-gradient verzorgt de visuele backdrop voor de overgebleven ruimte. */
#welcome-screen,
#game-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Game-scherm vast op viewport-hoogte zonder scroll, zodat de header
   altijd zichtbaar is en het woord visueel gecentreerd staat — anders
   schuift mobiele Safari de header offscreen bij lange content. */
#game-screen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.container {
  width: min(560px, 92vw);
  margin: 0 auto;
  padding: 40px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Home-container compacter aan onderkant: geen extra ruimte na laatste
   content (profile-cards / guest-link / new-profile-form). De body-
   gradient toont onder, en de header-padding (40px) levert ademruimte
   bovenaan. */
#home-screen .container {
  padding-bottom: 24px;
}

/* ========== Globale keyframes (gebruikt door meerdere components) ========== */
@keyframes spin    { to { transform: rotate(360deg); } }
/* slideUp = animatie voor de toast, die met transform: translateX(-50%)
   horizontaal gecentreerd staat. translate(-50%, ...) houdt die X-centrering
   tijdens de verticale animatie. NIET gebruiken voor flex-gecentreerde
   modal-cards — die zouden 50% naar links offscreen schuiven. */
@keyframes slideUp {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
/* modalIn = animatie voor modal-cards die via flexbox in hun parent
   gecentreerd zijn (.modal als flex container). Géén horizontale translate
   want flex doet de centrering al — anders schuift de card half offscreen. */
@keyframes modalIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.8); opacity: 0;  }
}
@keyframes wordPop {
  0%   { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wordCorrect {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes wordShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-12px); }
  50%     { transform: translateX(10px); }
  75%     { transform: translateX(-6px); }
}
@keyframes fall {
  0%   { transform: translate3d(0, -60px, 0) rotate(0deg);   opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(720deg); opacity: 0; }
}