/* Hide Alpine x-show/x-cloak elements until Alpine boots (prevents a flash) */
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* Playful rounded face for Kids mode (loaded when body has .theme-kids) */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('https://fonts.bunny.net/baloo-2/files/baloo-2-latin-700-normal.woff2') format('woff2');
}

/* ---- Theme tokens: swapped by mode. Tailwind handles layout; these carry the accent. ---- */
.theme-adult {
    --accent: #4f46e5;        /* indigo — calm, explanatory */
    --accent-ink: #ffffff;
    --accent-soft: #eef2ff;
    --accent-ring: #c7d2fe;
}
.theme-kids {
    --accent: #f97316;        /* orange — warm, playful */
    --accent-ink: #ffffff;
    --accent-soft: #fff7ed;
    --accent-ring: #fed7aa;
    font-family: 'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
}

/* Accent helpers used across the screens */
.btn-accent   { background: var(--accent); color: var(--accent-ink); }
.text-accent  { color: var(--accent); }
.bg-soft      { background: var(--accent-soft); }
.ring-accent  { box-shadow: 0 0 0 2px var(--accent); }
.border-accent{ border-color: var(--accent); }

/* Kids mode gets chunkier, bouncier tiles */
.theme-kids .tile { border-width: 2px; }
.theme-kids .tile:active { transform: scale(0.92); }

/* Highlighted letters inside example words (the sound being taught) */
.hl { color: #dc2626; font-weight: 800; }

/* Mic pulse while listening */
@keyframes pa-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.is-listening { animation: pa-pulse 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .is-listening { animation: none; }
    * { scroll-behavior: auto !important; }
}