/* ── NeuroDinoWorld Accessibility Modes ───────────────────────────────── */

/* Large Text */
body.a11y-large-text { font-size: 120% !important; }
body.a11y-large-text .sec, body.a11y-large-text p,
body.a11y-large-text div { line-height: 1.7 !important; }

/* Dyslexia-friendly font */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700;800&display=swap');
body.a11y-dyslexia,
body.a11y-dyslexia p,
body.a11y-dyslexia div,
body.a11y-dyslexia button,
body.a11y-dyslexia input,
body.a11y-dyslexia label {
  font-family: 'Lexend', sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
  line-height: 1.8 !important;
}

/* Reduced Motion */
body.a11y-reduced-motion *,
body.a11y-reduced-motion *::before,
body.a11y-reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Low Stimulation — muted colours, no gradients */
body.a11y-low-stim {
  filter: saturate(0.4) brightness(0.95);
}
body.a11y-low-stim [style*="animation"],
body.a11y-low-stim .float,
body.a11y-low-stim .pulse {
  animation: none !important;
}

/* No Characters — hide character portraits and emoji decorations */
body.a11y-no-chars .char-portrait,
body.a11y-no-chars .char-emoji,
body.a11y-no-chars [class*="portrait"],
body.a11y-no-chars img[alt*="character"],
body.a11y-no-chars img[alt*="Rex"],
body.a11y-no-chars img[alt*="Marina"],
body.a11y-no-chars img[alt*="Aurora"],
body.a11y-no-chars img[alt*="Duke"] {
  display: none !important;
}

/* Focus visible for keyboard users */
body *:focus-visible {
  outline: 3px solid #4cc9f0 !important;
  outline-offset: 3px !important;
}

/* A11y settings panel */
.a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.a11y-sheet {
  background: linear-gradient(145deg,#0d1a2e,#111d35);
  border-radius: 28px 28px 0 0;
  padding: 28px 22px calc(32px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
}
.a11y-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--fg-07);
}
.a11y-toggle-row:last-child { border-bottom: none; }
.a11y-toggle-label { flex: 1; }
.a11y-toggle-label b { display: block; font-size: 0.9rem; color: var(--fg-100); font-weight: 800; margin-bottom: 2px; }
.a11y-toggle-label span { font-size: 0.78rem; color: var(--fg-45); line-height: 1.4; }

/* Toggle switch */
.a11y-switch { position: relative; width: 48px; height: 27px; flex-shrink: 0; margin-left: 14px; }
.a11y-switch input { opacity: 0; width: 0; height: 0; }
.a11y-slider {
  position: absolute; inset: 0;
  background: var(--fg-15);
  border-radius: 27px;
  cursor: pointer;
  transition: background 0.2s;
}
.a11y-slider::before {
  content: '';
  position: absolute;
  width: 21px; height: 21px;
  left: 3px; top: 3px;
  background: var(--fg-100);
  border-radius: 50%;
  transition: transform 0.2s;
}
.a11y-switch input:checked + .a11y-slider { background: #52b788; }
.a11y-switch input:checked + .a11y-slider::before { transform: translateX(21px); }

/* ── REDUCED MOTION ───────────────────────────────────────────────────────
   Added 2026-08-26. index.html carried a comment asserting "Both already
   inherit the app-wide prefers-reduced-motion override (css/main.css,
   css/a11y.css)". That was false — neither file contained a single such block,
   and a live check with the browser set to `reduce` found 13 elements still
   animating (splashFloat, aurora1/2/3, twinkle, float, fadeIn).

   That matters more here than in most apps: this is a sensory-friendly app for
   neurodivergent kids, and for part of that audience reduced motion is THE
   accessibility setting. Honouring it is on-mission, not a nicety.

   Durations are collapsed to ~0 rather than set to `none`, deliberately: any
   animation whose END STATE matters (a fade-in that leaves opacity:1, an
   overlay that transitions into view) still lands correctly — it just gets
   there instantly. `animation: none` would leave some of those stuck at their
   starting frame, i.e. invisible. Same reason iteration-count is pinned to 1:
   it stops infinite loops without cancelling them mid-way. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}