:root {
  /* Paleta extraída del banner inicial.app (azul + naranja + dorado). */
  --fonolee-primary: #1E7AE8;   /* azul marca (logo / remera del niño) */
  --fonolee-accent:  #FFC02E;   /* dorado (letras / estrella) */
  --inicial-orange:  #F2884A;   /* naranja acento (el puntito de la "i") */
  --fonolee-bg:      #F0F5FF;   /* celeste muy claro (fondo de la imagen) */
  --fonolee-ok:      #2ECC71;
  --fonolee-err:     #FF6B6B;
  --fonolee-dark:    #21364B;   /* azul-tinta para textos (antes gris) */
}

/* ============ Imagen del hero fundida con el degradado ============
   La imagen vive ARRIBA del hero (full-bleed). Su fondo celeste coincide con
   el tope del degradado del hero, y su borde inferior se difumina (mask) para
   derretirse en el azul: no se ve como un recuadro pegado. */
.inicial-hero-art {
  position: relative;
  width: 100%;
  margin-bottom: -7%;          /* solapa el contenido para fundir la transición */
  z-index: 0;
  /* franja de color que acompaña a la imagen y se desvanece hacia el azul */
  background: linear-gradient(180deg, #EAF3FF 0%, #DCEBFF 42%, rgba(220,235,255,0) 100%);
}
.inicial-hero-art picture {
  display: block;
  max-width: 1040px;           /* imagen centrada, no pegada a los bordes */
  margin: 0 auto;
}
.inicial-hero-art-img {
  display: block;
  width: 100%;
  height: auto;
  /* Difuminar los CUATRO bordes para que la imagen no tenga forma rectangular:
     se desvanece por los lados, arriba (suave) y abajo (fuerte), fundiéndose
     con el degradado. Dos máscaras (horizontal + vertical) que se intersectan. */
  --mask-h: linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%);
  --mask-v: linear-gradient(to bottom, transparent 0%, #000 6%, #000 58%, transparent 100%);
  -webkit-mask-image: var(--mask-h), var(--mask-v);
          mask-image: var(--mask-h), var(--mask-v);
  -webkit-mask-composite: source-in;   /* Safari/Chrome viejo: intersección */
          mask-composite: intersect;   /* estándar moderno */
  transform-origin: center bottom;
  animation:
    inicial-art-in 1s cubic-bezier(.2,.75,.25,1) both,
    inicial-float 6.5s ease-in-out 1.1s infinite;
  will-change: transform;
}
@keyframes inicial-art-in {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes inicial-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (max-width: 575.98px) {
  .inicial-hero-art { margin-bottom: -4%; }
  .inicial-hero-art picture { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .inicial-hero-art-img { animation: inicial-art-in .01s both; }
}

/* Twemoji: emojis renderizados como imagenes para que se vean iguales en todo SO */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -.1em;
  display: inline-block;
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

/* Altura real del viewport: dvh para móvil (descuenta barra del navegador),
   con fallback a vh para navegadores viejos. */
html {
  height: 100vh;
  height: 100dvh;
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.fonolee-body {
  background: var(--fonolee-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fonolee-dark);
  overscroll-behavior: none;
}

/* Modo dislexia: fuente Lexend (diseñada para mejorar la legibilidad de
   lectores con dislexia — mayor trazado, letras distinguibles),
   más espacio entre letras y líneas. */
.fonolee-dyslexia-font {
  font-family: 'Lexend', system-ui, sans-serif !important;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.fonolee-dyslexia-font .fonolee-option,
.fonolee-dyslexia-font .fonolee-letter-display,
.fonolee-dyslexia-font .fonolee-fill-fixed,
.fonolee-dyslexia-font .fonolee-fill-slot,
.fonolee-dyslexia-font .fonolee-sentence-display,
.fonolee-dyslexia-font .fonolee-story-word,
.fonolee-dyslexia-font .fonolee-sw-option {
  font-family: 'Lexend', system-ui, sans-serif !important;
  letter-spacing: 0.05em;
}

.fonolee-nav {
  background: #13539E;   /* más oscuro que el hero para separar visualmente */
  color: #fff;
  flex-shrink: 0;
  height: 56px;
  min-height: 56px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  position: relative;
  z-index: 50;
}
.fonolee-nav .navbar-brand {
  color: #fff; font-size: 1.25rem;
  font-weight: 800; letter-spacing: -.01em;
}
.fonolee-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
.fonolee-nav .btn-light {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  font-weight: 600;
  transition: all .2s;
}
.fonolee-nav .btn-light:hover {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.fonolee-nav .btn-warning {
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 201, 60, .4);
}
.fonolee-nav .btn-outline-light:hover {
  background: rgba(255,255,255,.2);
}

/* Main ocupa TODO el espacio restante.
   Por defecto permite scroll vertical (páginas normales como /padres, landing, etc).
   Las páginas de pantalla completa (juego, mapa, álbum...) usan un hijo con
   overflow propio (.fonolee-play, .fonolee-map-page, etc.) y para que ese
   contenedor reciba la altura disponible, el main pasa a overflow:hidden
   cuando detecta uno de esos hijos.
 */
.fonolee-main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.fonolee-main:has(> .fonolee-play),
.fonolee-main:has(> .fonolee-map-page),
.fonolee-main:has(> .fonolee-album-page),
.fonolee-main:has(> .fonolee-story-page),
.fonolee-main:has(> .fonolee-sw-page),
.fonolee-main:has(> .fonolee-onboarding),
.fonolee-main:has(> .fonolee-flappy),
.fonolee-main:has(> .fonolee-angry),
.fonolee-main:has(> .fonolee-steal) {
  overflow: hidden;
}

.fonolee-hero {
  background: #1E7AE8;
  color: #fff;
  min-height: 60vh;
  display: flex; align-items: center;
}

/* ============================================
   LANDING V2 (claro y directo)
   ============================================ */

/* Las secciones viven dentro de .fonolee-main que es flex column;
   sin flex-shrink:0 se encogen al padding mínimo y se oculta el contenido. */
.fonolee-v2-hero,
.fonolee-v2-how,
.fonolee-v2-timeline-section,
.fonolee-v2-diff,
.fonolee-v2-for,
.fonolee-v2-faq,
.fonolee-v2-cta-final {
  flex-shrink: 0;
}

/* === 1. HERO === */
.fonolee-v2-hero {
  /* Tema CLARO: el fondo es el mismo celeste de la imagen, así el rectángulo
     desaparece (claro sobre claro + bordes difuminados). El texto va oscuro. */
  background: linear-gradient(180deg,
    #EEF5FF 0%,
    #E6F0FF 50%,
    #D7E8FF 100%);
  color: #21364B;        /* navy: títulos y textos del hero */
  padding: 0 0 4rem;     /* sin padding arriba: la imagen toca el borde superior */
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* crea stacking context para z-index local */
}
/* El contenido (texto + mockup) necesita su propio aire ahora que el hero no
   tiene padding superior (lo ocupa la imagen). */
.fonolee-v2-hero > .container { padding-top: 1rem; }
/* Blobs decorativos suaves — mandados AL FONDO con z-index negativo */
.fonolee-v2-hero::before,
.fonolee-v2-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fonolee-v2-hero::before {
  top: -120px; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,217,60,.18) 0%, transparent 70%);
}
.fonolee-v2-hero::after {
  bottom: -100px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
}
/* Container y row ENCIMA de los blobs */
.fonolee-v2-hero > .container {
  position: relative;
  z-index: 1;
}
/* Orden en mobile: primero mockup, después texto (oculta la tablet al scroll con menos altura) */
.fonolee-v2-hero-text   { order: 2; }
.fonolee-v2-hero-mockup { order: 1; }
@media (min-width: 992px) {
  .fonolee-v2-hero-text   { order: 0; }
  .fonolee-v2-hero-mockup { order: 0; }
}
@media (max-width: 992px) {
  .fonolee-v2-hero { padding: 2rem 0 3.5rem; text-align: center; }
  .fonolee-v2-hero-mockup { margin-bottom: 1.5rem; }
  .fonolee-v2-title { font-size: 2rem !important; }
  .fonolee-tablet { max-width: 260px; }
  .fonolee-tablet-caption { font-size: .9rem; margin: 0 0 .8rem !important; }
}
.fonolee-v2-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff;
  border: 1px solid #BBD3F5;
  color: #1559B0;
  box-shadow: 0 4px 14px rgba(30,122,232,.12);
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 700;
  margin-bottom: 1.5rem;
}
.fonolee-v2-badge span { font-size: 1.1rem; }
.fonolee-v2-title {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1.2rem;
  letter-spacing: -.02em;
}
.fonolee-v2-title-accent {
  color: #EE7A2E;        /* naranja de la imagen: pop sobre el fondo claro */
  position: relative;
  display: inline-block;
}
.fonolee-v2-title-accent::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.15em;
  height: .12em;
  background: rgba(238, 122, 46, .35);
  border-radius: 4px;
}
.fonolee-v2-sub {
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: .92;
  margin-bottom: 2rem;
}
.fonolee-v2-ctas {
  display: flex; gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
@media (max-width: 992px) {
  .fonolee-v2-ctas { justify-content: center; }
  .fonolee-v2-trust { justify-content: center; }
}
.fonolee-v2-btn-primary {
  display: inline-block;
  background: #FFD93C;
  color: #2D3436;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 1rem 2rem;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(255, 201, 60, .45);
  transition: all .2s;
  border: none;
  cursor: pointer;
}
.fonolee-v2-btn-primary:hover,
.fonolee-v2-btn-primary:active {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 201, 60, .55);
  color: #2D3436;
}
.fonolee-v2-btn-secondary {
  display: inline-block;
  background: #fff;
  color: #1559B0;
  border: 2px solid #9CC2F2;
  text-decoration: none;
  font-weight: 700;
  padding: 1rem 1.6rem;
  border-radius: 14px;
  transition: all .2s;
}
.fonolee-v2-btn-secondary:hover {
  background: #EAF2FF;
  border-color: #1E7AE8;
  color: #1559B0;
}
.fonolee-v2-trust {
  display: flex; gap: 1.2rem;
  flex-wrap: wrap;
  opacity: .85;
  font-size: .95rem;
}
.fonolee-v2-secondary-link {
  margin: .8rem 0 1.2rem;
}
.fonolee-v2-secondary-link a {
  color: #1559B0;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
}
.fonolee-v2-secondary-link a:hover { color: #21364B; }

/* ===========================
   Tablet / phone mockup
   =========================== */
.fonolee-tablet {
  max-width: 320px;
  margin: 0 auto;
  position: relative;
}
.fonolee-tablet-screen {
  background: #F7F5FF;
  border-radius: 32px;
  border: 8px solid #2D3436;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 25px 60px rgba(0,0,0,.4),
    0 10px 20px rgba(0,0,0,.15);
  overflow: hidden;
  color: var(--fonolee-dark);
  display: flex; flex-direction: column;
  position: relative;
}
/* Brillo sutil del vidrio */
.fonolee-tablet-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.15) 0%,
    transparent 40%);
  pointer-events: none;
  z-index: 2;
}
/* Notch */
.fonolee-tablet-screen::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 14px;
  background: #2D3436;
  border-radius: 0 0 10px 10px;
  z-index: 3;
}

.fonolee-tablet-header {
  display: flex; align-items: center; gap: .5rem;
  padding: 1.2rem 1rem .6rem;
  background: #fff;
  border-bottom: 1px solid #EEE8FF;
  font-weight: 700;
  font-size: .9rem;
}
.fonolee-tablet-avatar { font-size: 1.5rem; line-height: 1; }
.fonolee-tablet-name { flex: 1; color: var(--fonolee-dark); }
.fonolee-tablet-stars {
  background: #FFD93C;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
  color: #2D3436;
}

.fonolee-tablet-body {
  flex: 1;
  padding: 1rem .8rem;
  display: flex; flex-direction: column; align-items: center;
  gap: .8rem;
}
.fonolee-tablet-prompt {
  background: #fff;
  padding: .5rem .9rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  color: var(--fonolee-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.fonolee-tablet-speaker {
  width: 68px; height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1E7AE8 0%, #4A93F0 100%);
  color: #fff;
  border: none;
  font-size: 1.7rem;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(30, 122, 232, .4);
  transition: transform .15s;
  animation: fonolee-v2-pulse 2s ease-in-out infinite;
}
.fonolee-tablet-speaker:hover,
.fonolee-tablet-speaker:active {
  transform: scale(1.06);
}
@keyframes fonolee-v2-pulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(30, 122, 232, .4), 0 0 0 0 rgba(30, 122, 232, .45); }
  50%      { box-shadow: 0 6px 16px rgba(30, 122, 232, .4), 0 0 0 12px rgba(30, 122, 232, 0); }
}
.fonolee-tablet-options {
  display: flex; gap: .5rem;
  justify-content: center;
}
.fonolee-tablet-option {
  width: 54px; height: 54px;
  border-radius: 14px;
  border: 2px solid #DDD4FF;
  background: #fff;
  color: var(--fonolee-primary);
  font-size: 1.7rem; font-weight: 900;
  cursor: pointer;
  transition: all .15s;
}
.fonolee-tablet-option:hover,
.fonolee-tablet-option:active {
  border-color: var(--fonolee-primary);
  background: #F7F5FF;
  transform: translateY(-2px);
}
.fonolee-tablet-option.correct {
  border-color: var(--fonolee-ok);
  background: #D8F8DF;
  color: var(--fonolee-ok);
  animation: fonolee-v2-pop .5s ease;
}
.fonolee-tablet-option.wrong {
  border-color: var(--fonolee-err);
  background: #FFE0E0;
  animation: fonolee-v2-shake .4s ease;
}
@keyframes fonolee-v2-pop {
  0%  { transform: scale(1); }
  50% { transform: scale(1.15); }
  100%{ transform: scale(1); }
}
@keyframes fonolee-v2-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.fonolee-tablet-feedback {
  min-height: 22px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--fonolee-primary);
}
.fonolee-tablet-bottom {
  padding: .6rem .8rem .8rem;
  background: #fff;
  border-top: 1px solid #EEE8FF;
}
.fonolee-tablet-progress {
  height: 6px;
  background: #EEE8FF;
  border-radius: 999px;
  overflow: hidden;
}
.fonolee-tablet-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1E7AE8, #FFD93C);
  width: 0%;
  transition: width .5s ease;
}
.fonolee-tablet-caption {
  text-align: center;
  margin: 0 0 1rem;
  color: #FFD93C;
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
@media (min-width: 992px) {
  /* Desktop: caption DEBAJO del tablet */
  .fonolee-v2-hero-mockup { display: flex; flex-direction: column-reverse; align-items: center; }
  .fonolee-tablet-caption { margin: 1.2rem 0 0; }
}

/* === Títulos de sección comunes === */
.fonolee-v2-section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  text-align: center;
  margin-bottom: .5rem;
  color: var(--fonolee-dark);
  letter-spacing: -.01em;
}
.fonolee-v2-section-sub {
  text-align: center;
  color: #666;
  font-size: 1.15rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
}

/* === 2. CÓMO FUNCIONA (3 pasos) === */
.fonolee-v2-how {
  padding: 5rem 0;
  background: #fff;
}
.fonolee-v2-how .fonolee-v2-section-title { margin-bottom: 3rem; }
.fonolee-v2-steps > div { position: relative; }
.fonolee-v2-step-num {
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--fonolee-primary);
  color: #fff;
  font-weight: 900;
  font-size: 1.3rem;
  align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.fonolee-v2-step-emoji {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.fonolee-v2-how h3 {
  font-weight: 800;
  color: var(--fonolee-dark);
  margin-bottom: .6rem;
}
.fonolee-v2-how p {
  color: #666;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

/* === 3. TIMELINE === */
.fonolee-v2-timeline-section {
  padding: 5rem 0;
  background: linear-gradient(180deg, #F7F5FF 0%, #fff 100%);
}
.fonolee-v2-timeline {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: .5rem;
  margin: 3rem 0 2rem;
  flex-wrap: wrap;
}
.fonolee-v2-tl-step {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem 1rem 1.2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(30, 122, 232, .08);
  position: relative;
}
.fonolee-v2-tl-time {
  display: inline-block;
  background: #EEE8FF;
  color: var(--fonolee-primary);
  font-weight: 800;
  font-size: .9rem;
  padding: .2rem .8rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}
.fonolee-v2-tl-time.highlight {
  background: #FFD93C;
  color: #2D3436;
}
.fonolee-v2-tl-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: .5rem;
}
.fonolee-v2-tl-text {
  font-size: .95rem;
  color: var(--fonolee-dark);
  line-height: 1.5;
}
.fonolee-v2-tl-text strong {
  color: var(--fonolee-primary);
}
.fonolee-v2-tl-line {
  flex: 0 0 20px;
  align-self: center;
  height: 3px;
  background: linear-gradient(90deg, #DDD4FF, #FFD93C);
  border-radius: 2px;
  min-width: 15px;
}
@media (max-width: 768px) {
  .fonolee-v2-tl-line { display: none; }
}
.fonolee-v2-timeline-note {
  text-align: center;
  color: #888;
  font-size: .95rem;
  font-style: italic;
}

/* === 4. DIFERENCIALES === */
.fonolee-v2-diff {
  padding: 5rem 0;
  background: #fff;
}
.fonolee-v2-diff .fonolee-v2-section-title { margin-bottom: 3rem; }
.fonolee-v2-diff-card {
  background: #F7F5FF;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  height: 100%;
  border-left: 5px solid var(--fonolee-primary);
  transition: all .2s;
}
.fonolee-v2-diff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(30, 122, 232, .15);
}
.fonolee-v2-diff-icon {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: .8rem;
}
.fonolee-v2-diff-card h4 {
  font-weight: 800;
  color: var(--fonolee-dark);
  margin-bottom: .6rem;
}
.fonolee-v2-diff-card p {
  color: #555;
  margin: 0;
  line-height: 1.6;
}

/* === 5. PARA QUIÉN / NO PARA QUIÉN === */
.fonolee-v2-for {
  padding: 5rem 0;
  background: #F7F5FF;
}
.fonolee-v2-for-card {
  background: #fff;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  height: 100%;
}
.fonolee-v2-for-card.good {
  border-top: 6px solid var(--fonolee-ok);
}
.fonolee-v2-for-card.bad {
  border-top: 6px solid #aaa;
  opacity: .92;
}
.fonolee-v2-for-head {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  color: var(--fonolee-dark);
}
.fonolee-v2-for-mark { font-size: 1.6rem; }
.fonolee-v2-for-card ul {
  list-style: none;
  padding: 0; margin: 0;
}
.fonolee-v2-for-card li {
  padding: .5rem 0 .5rem 1.8rem;
  position: relative;
  color: #555;
  line-height: 1.5;
}
.fonolee-v2-for-card.good li::before {
  content: "•";
  position: absolute; left: .5rem;
  color: var(--fonolee-ok);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
}
.fonolee-v2-for-card.bad li::before {
  content: "—";
  position: absolute; left: .4rem;
  color: #aaa;
}

/* === 6. FAQ === */
.fonolee-v2-faq {
  padding: 5rem 0;
  background: #fff;
}
.fonolee-v2-faq-item {
  border: none !important;
  border-radius: 16px !important;
  margin-bottom: .8rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  overflow: hidden;
}
.fonolee-v2-faq-item .accordion-button {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1.2rem 1.5rem;
}
.fonolee-v2-faq-item .accordion-button:not(.collapsed) {
  background: #EEE8FF;
  color: var(--fonolee-primary);
}
.fonolee-v2-faq-item .accordion-button:focus { box-shadow: none; }
.fonolee-v2-faq-item .accordion-body {
  padding: 1.2rem 1.5rem;
  color: #555;
  line-height: 1.6;
}

/* === 7. CTA FINAL === */
.fonolee-v2-cta-final {
  background: linear-gradient(135deg, #1E7AE8 0%, #4A93F0 100%);
  color: #fff;
  padding: 5rem 0;
}
.fonolee-v2-cta-emoji {
  font-size: 5rem;
  margin-bottom: 1rem;
  animation: fonolee-mascot-bounce 2.2s ease-in-out infinite;
}
.fonolee-v2-cta-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  margin-bottom: 1rem;
}
.fonolee-v2-cta-sub {
  font-size: 1.2rem;
  opacity: .92;
  margin-bottom: 2rem;
  line-height: 1.6;
}
.fonolee-v2-btn-big {
  font-size: 1.3rem !important;
  padding: 1.2rem 2.5rem !important;
}
.fonolee-v2-cta-foot {
  margin-top: 1.5rem;
  opacity: .7;
  font-size: .95rem;
}

/* Footer */
.fonolee-v2-footer {
  flex-shrink: 0;
  background: #2D3436;
  color: #fff;
  padding: 2rem 1rem;
}
.fonolee-v2-footer-links {
  display: flex; gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .95rem;
}
.fonolee-v2-footer-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.fonolee-v2-footer-links a:hover { text-decoration: underline; }
.fonolee-v2-footer-links span { opacity: .4; }
.fonolee-v2-footer p { color: rgba(255,255,255,.6) !important; }

/* Zona peligrosa (eliminar cuenta) */
.fonolee-danger-zone {
  border: 2px dashed #FF6B6B;
  border-radius: 16px;
  padding: 1.5rem;
  background: #FFF8F8;
}

/* Páginas legales */
.fonolee-legal h1 { color: var(--fonolee-primary); font-weight: 800; }
.fonolee-legal h3 {
  color: var(--fonolee-primary);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: .8rem;
}
.fonolee-legal h5 {
  color: var(--fonolee-dark);
  font-weight: 700;
  margin-top: 1rem;
}
.fonolee-legal p, .fonolee-legal li {
  line-height: 1.7;
  color: #333;
}
.fonolee-legal code {
  background: #F7F5FF;
  padding: .1rem .4rem;
  border-radius: 4px;
  color: var(--fonolee-primary);
  font-size: .9em;
}

/* Fin Landing V2 */

.fonolee-feature {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(30, 122, 232, 0.08);
}

/* ---- Selector de nino ---- */
.fonolee-child-card {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .25rem;
  background: #fff; border-radius: 24px;
  padding: 2rem 1rem; min-height: 200px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  color: var(--fonolee-dark);
  transition: transform .15s, box-shadow .15s;
}
.fonolee-child-card:hover,
.fonolee-child-card:active {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(30, 122, 232, 0.2);
}
.fonolee-child-new { border: 3px dashed #ccc; }
.fonolee-child-card { position: relative; }
.fonolee-child-edit {
  position: absolute; top: .5rem; right: .5rem;
  background: rgba(30, 122, 232, .1);
  color: var(--fonolee-primary);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all .15s;
  z-index: 2;
}
.fonolee-child-edit:hover {
  background: rgba(30, 122, 232, .25);
  color: var(--fonolee-primary);
  transform: rotate(30deg);
}

.fonolee-avatar-pick input { display: none; }
.fonolee-avatar-pick {
  border: 3px solid transparent; border-radius: 16px;
  padding: .5rem 1rem; cursor: pointer;
}
.fonolee-avatar-pick:has(input:checked) {
  border-color: var(--fonolee-primary);
  background: #eee8ff;
}

/* Imagen de avatar del niño (boy.png / girl.png) — circular. */
.fonolee-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  background: #f3eeff;
  vertical-align: middle;
}
.fonolee-avatar-pick-img {
  display: block;
  transition: transform .12s ease;
}
.fonolee-avatar-pick:has(input:checked) .fonolee-avatar-pick-img {
  transform: scale(1.06);
}
.fonolee-avatar-topbar {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.fonolee-avatar-lg {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* ---- Pantalla de juego (tablet) ---- */
.fonolee-play {
  display: flex; flex-direction: column;
  flex: 1 1 0;             /* llena todo el main, se adapta */
  min-height: 0;
  padding: .5rem;
  touch-action: manipulation;
  user-select: none;
  overflow: hidden;
}

.fonolee-play-header {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .25rem; flex-shrink: 0;
}
.fonolee-play-header .btn { font-size: 1.3rem; padding: .3rem .7rem; }
.fonolee-stars {
  background: var(--fonolee-accent); color: #000;
  padding: .4rem 1rem; border-radius: 999px;
  font-weight: 700; font-size: 1.2rem;
}
.fonolee-streak {
  margin-left: auto;
  background: #fff;
  color: #888;
  padding: .4rem 1rem;
  border-radius: 999px;
  font-weight: 700; font-size: 1.1rem;
  border: 2px solid #eee;
  transition: all .2s;
}
.fonolee-streak.hot {
  color: #FF6B35;
  border-color: #FFB199;
  background: #FFF4EC;
  animation: fonolee-flame 1.2s ease-in-out infinite;
}
@keyframes fonolee-flame {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ---- Botón del premio (aventura) ---- */
.fonolee-reward-btn {
  border: none;
  font-size: 1.8rem;
  width: 60px; height: 60px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s;
}
.fonolee-reward-btn:active { transform: scale(.9); }
.fonolee-reward-btn.locked {
  background: #ddd; color: #888; opacity: .6;
}
.fonolee-reward-btn.needs-practice {
  background: #FFE8B0;
  box-shadow: 0 0 0 3px #FFC93C inset;
  filter: grayscale(.5);
  animation: fonolee-pulse-soft 2s ease-in-out infinite;
}
.fonolee-reward-btn.ready {
  background: linear-gradient(135deg, #FFC93C, #FF9A3C);
  box-shadow: 0 4px 14px rgba(255, 154, 60, .6);
  animation: fonolee-pulse-ready 1.2s ease-in-out infinite;
}
@keyframes fonolee-pulse-soft {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
@keyframes fonolee-pulse-ready {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.fonolee-reward-modal .modal-content {
  border-radius: 24px; border: none;
}

/* ---- Botón ayuda ❓ (explicación para padres) ---- */
.fonolee-help-btn {
  border: none;
  background: rgba(30, 122, 232, 0.12);
  color: var(--fonolee-primary);
  font-size: 1.4rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.fonolee-help-btn:hover,
.fonolee-help-btn:active {
  background: rgba(30, 122, 232, 0.25);
}
.fonolee-help-modal .modal-content {
  border-radius: 24px; border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.fonolee-help-icon {
  font-size: 3.5rem;
  line-height: 1;
}
.fonolee-help-modal h4 {
  color: var(--fonolee-primary);
  font-weight: 800;
}
.fonolee-help-modal p {
  font-size: .95rem;
  line-height: 1.5;
}

/* ---- Barra de progreso ---- */
.fonolee-progress {
  background: #fff;
  border-radius: 14px;
  padding: .5rem .75rem;
  margin-bottom: .25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  flex-shrink: 0;
}
.fonolee-progress-meta {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .5rem; flex-wrap: wrap;
}
.fonolee-stage-label {
  font-weight: 700; color: var(--fonolee-primary);
  font-size: 1.05rem; white-space: nowrap;
}
.fonolee-letters-row {
  display: flex; gap: .35rem; flex-wrap: wrap;
}
.fonolee-letter-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 .5rem;
  border-radius: 10px; font-weight: 800; font-size: 1rem;
  background: #eee; color: #999;
  transition: background .3s, color .3s, transform .2s;
}
.fonolee-letter-chip.lvl-1 { background: #FFE8B0; color: #8a6a00; }
.fonolee-letter-chip.lvl-2 { background: #FFD166; color: #5c4200; }
.fonolee-letter-chip.lvl-3 { background: #B8E6C1; color: #1f6a33; }
.fonolee-letter-chip.lvl-4 { background: #74D48A; color: #0b4a1b; }
.fonolee-letter-chip.lvl-5 {
  background: linear-gradient(135deg, #2ECC71, #27AE60);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 204, 113, .4);
}
.fonolee-progress-bar {
  position: relative;
  height: 14px; background: #EFEAFF;
  border-radius: 999px; overflow: hidden;
}
.fonolee-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1E7AE8, #4A93F0);
  border-radius: 999px;
  /* La barra crece suave cuando hay progreso, pero no brilla en loop:
     evita distraer al niño mientras lee/decodifica. */
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* Celebracion al desbloquear nivel */
.fonolee-celebrate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 122, 232, .85); color: #fff;
  font-size: 3rem; font-weight: 800;
  z-index: 9999; pointer-events: none;
  animation: fonolee-celebrate-in .4s ease-out;
}
.fonolee-celebrate span { margin: 0 1rem; }
@keyframes fonolee-celebrate-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

.fonolee-stage {
  flex: 1 1 0;
  min-height: 0;              /* permite encogerse dentro del flex */
  background: #fff;
  border-radius: 20px;
  padding: 1rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow-y: auto;            /* scroll interno si aún no entra */
}

.fonolee-prompt {
  font-size: 1.3rem; color: #555; text-align: center;
}

.fonolee-play-big-btn {
  background: var(--fonolee-primary);
  color: #fff; border: none;
  font-size: 3rem;
  padding: 1.5rem 3rem;
  border-radius: 24px;
  box-shadow: 0 8px 0 #1559B0;
  transition: transform .08s, box-shadow .08s;
}
.fonolee-play-big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #1559B0;
}

.fonolee-options {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
  width: 100%; max-width: 720px;
}
.fonolee-options.n-2 { grid-template-columns: repeat(2, 1fr); }
.fonolee-options.n-4 { grid-template-columns: repeat(2, 1fr); }

.fonolee-option {
  --c: #1E7AE8; --cd: #b7abff;
  background: #fff;
  border: 4px solid var(--c);
  border-radius: 24px;
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--fonolee-dark);
  min-height: 140px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 7px 0 var(--cd), 0 10px 18px rgba(0,0,0,.08);
  transition: transform .08s, box-shadow .08s;
  animation: fonolee-opt-pop .35s both;
}
/* Colores rotativos estilo quiz (igual lenguaje que matemáticas) */
.fonolee-options .fonolee-option:nth-child(1) { --c:#1E7AE8; --cd:#b7abff; }
.fonolee-options .fonolee-option:nth-child(2) { --c:#FF6BD6; --cd:#ffb0e9; }
.fonolee-options .fonolee-option:nth-child(3) { --c:#19C3B2; --cd:#8fe7df; }
.fonolee-options .fonolee-option:nth-child(4) { --c:#FF9F43; --cd:#ffd0a0; }
.fonolee-option:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--cd); }
.fonolee-option.correct { --c: var(--fonolee-ok); --cd:#b6efce; background:#F0FFF6; animation: fonolee-opt-bounce .55s; }
.fonolee-option.wrong   { --c: var(--fonolee-err); --cd:#ffc9c9; background:#FFF1F1; animation: fonolee-opt-shake .45s; }

@keyframes fonolee-opt-pop    { from{opacity:0; transform:scale(.6) translateY(8px)} to{opacity:1; transform:scale(1) translateY(0)} }
@keyframes fonolee-opt-bounce { 0%{transform:scale(1)} 30%{transform:scale(1.12)} 50%{transform:scale(.95)} 70%{transform:scale(1.05)} 100%{transform:scale(1)} }
@keyframes fonolee-opt-shake  { 10%,90%{transform:translateX(-3px)} 20%,80%{transform:translateX(5px)} 30%,50%,70%{transform:translateX(-9px)} 40%,60%{transform:translateX(9px)} }

/* Capa de celebración compartida (Juice.celebrate) */
#fonolee-juice-layer { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.fonolee-juice-confetti { position:absolute; top:42%; left:50%; font-size:1.9rem;
  animation: fonolee-juice-burst 1s ease-out forwards; }
@keyframes fonolee-juice-burst {
  0%   { transform:translate(-50%,0) scale(.5); opacity:0; }
  25%  { opacity:1; }
  100% { transform:translate(calc(-50% + var(--dx,0)), var(--dy,-120px)) scale(1.1) rotate(var(--rot,90deg)); opacity:0; }
}

/* Entrada animada de las tarjetas/paneles de fin de minijuego */
.go-pop { animation: fonolee-go-pop .5s cubic-bezier(.18,.89,.32,1.28); }
@keyframes fonolee-go-pop { 0%{ transform:scale(.5); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

/* Cartas de memoria que no coinciden: sacudida de error */
.fonolee-memory-card.mismatch { animation: fonolee-opt-shake .4s; }

/* Loader con spinner (compartido por complete / memory / phono) */
.fonolee-complete-loading::before {
  content:''; display:block; width:46px; height:46px; margin:0 auto 14px;
  border:5px solid #E8E3FF; border-top-color:var(--fonolee-primary);
  border-radius:50%; animation: fonolee-spin .8s linear infinite;
}
@keyframes fonolee-spin { to { transform:rotate(360deg); } }

/* Estrellas de puntuación (Angry) */
.fonolee-stars-row { display:flex; gap:10px; justify-content:center; margin:6px 0; }
.fonolee-score-star { font-size:2.6rem; filter:grayscale(1) opacity(.35); transform:scale(.6); }
.fonolee-score-star.on { filter:none; animation: fonolee-star-pop .5s both; }
.fonolee-score-star.on:nth-child(2) { animation-delay:.18s; }
.fonolee-score-star.on:nth-child(3) { animation-delay:.36s; }
@keyframes fonolee-star-pop { 0%{transform:scale(.2) rotate(-40deg); opacity:0} 60%{transform:scale(1.3) rotate(8deg)} 100%{transform:scale(1) rotate(0); opacity:1} }
@media (prefers-reduced-motion: reduce) {
  .fonolee-option { animation: none; }
  .fonolee-option.correct, .fonolee-option.wrong { animation: none; }
}

.fonolee-letter-display {
  font-size: 10rem; font-weight: 800; color: var(--fonolee-primary);
  line-height: 1;
}

.fonolee-syllable-slots {
  display: flex; gap: 1rem; justify-content: center;
}
.fonolee-slot {
  width: 100px; height: 120px; border-radius: 20px;
  border: 4px dashed #c4b9ff; background: #f6f3ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; font-weight: 800;
}
.fonolee-slot.filled { border-style: solid; background: #fff; }

.fonolee-pool {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
}
.fonolee-chip {
  background: var(--fonolee-primary); color: #fff;
  font-size: 2.5rem; font-weight: 800;
  padding: .5rem 1.5rem; border-radius: 16px;
  cursor: pointer; user-select: none;
  box-shadow: 0 6px 0 #1559B0;
}
.fonolee-chip:active { transform: translateY(3px); box-shadow: 0 3px 0 #1559B0; }
.fonolee-chip.used { opacity: .3; pointer-events: none; }

.fonolee-feedback {
  text-align: center; font-size: 2rem; min-height: 2.5rem;
  margin-top: .25rem; flex-shrink: 0;
}

/* ---- Conciencia fonológica (pre-lectura) ---- */
.fonolee-phono-emoji {
  font-size: 6rem;
  line-height: 1;
  text-align: center;
}
.fonolee-phono-emoji img.emoji {
  width: 6rem; height: 6rem;
  vertical-align: middle;
}
.fonolee-phono-hint {
  font-size: 1.4rem;
  font-weight: 700;
  color: #444;
  text-align: center;
  margin-top: .25rem;
}
.fonolee-phono-hint-letter {
  font-size: 7rem !important;
}
.fonolee-syllables-opts {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 460px;
}
.fonolee-syl-number {
  font-size: 4rem !important;
  min-height: 110px !important;
  color: var(--fonolee-primary);
}

/* Rimas: target arriba */
.fonolee-rhyme-target {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  background: #FFF9D0;
  border: 3px solid var(--fonolee-accent);
  padding: .75rem 1.25rem;
  border-radius: 999px;
  margin-bottom: .25rem;
}
.fonolee-rhyme-emoji { font-size: 3.5rem; line-height: 1; }
.fonolee-rhyme-emoji img.emoji { width: 3.5rem; height: 3.5rem; }
.fonolee-rhyme-word {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--fonolee-dark);
  letter-spacing: 1px;
}
@media (min-width: 768px) {
  .fonolee-phono-emoji { font-size: 8rem; }
  .fonolee-phono-emoji img.emoji { width: 8rem; height: 8rem; }
  .fonolee-phono-hint-letter { font-size: 10rem !important; }
  .fonolee-syl-number { font-size: 5rem !important; min-height: 150px !important; }
  .fonolee-rhyme-emoji { font-size: 4.5rem; }
  .fonolee-rhyme-emoji img.emoji { width: 4.5rem; height: 4.5rem; }
  .fonolee-rhyme-word { font-size: 3rem; }
}

/* ---- Leer oración ---- */
.fonolee-sentence-display {
  font-size: 2rem;
  font-weight: 800;
  color: var(--fonolee-dark);
  text-align: center;
  line-height: 1.4;
  padding: .5rem 1rem;
  background: #FFF9D0;
  border: 3px solid var(--fonolee-accent);
  border-radius: 16px;
  max-width: 90%;
}
@media (min-width: 768px) {
  .fonolee-sentence-display { font-size: 2.8rem; }
}

/* ---- Blend (unir sonidos) ---- */
.fonolee-blend-parts {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.fonolee-blend-part {
  font-size: 2.5rem; font-weight: 800;
  color: var(--fonolee-primary);
  background: #F0ECFF;
  border: 3px solid var(--fonolee-primary);
  border-radius: 16px;
  padding: .4rem 1.2rem;
  cursor: pointer;
  transition: transform .1s;
}
.fonolee-blend-part:active { transform: scale(.95); }
.fonolee-blend-sep {
  font-size: 2rem; color: #bbb; font-weight: 800;
  letter-spacing: 2px;
}
@media (min-width: 768px) {
  .fonolee-blend-part { font-size: 3.5rem; }
}

/* ---- Fill Word: completar la palabra (tap-to-select) ---- */
.fonolee-fill-emoji {
  font-size: 6rem;
  line-height: 1;
  text-align: center;
  margin-bottom: .25rem;
}
.fonolee-fill-emoji img.emoji {
  width: 6rem;
  height: 6rem;
  vertical-align: middle;
}
.fonolee-fill-speaker {
  margin: .25rem auto .5rem;
  padding: .6rem 1.2rem !important;
  font-size: 2rem !important;
}
.fonolee-fill-word {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin: .5rem 0 1.25rem;
  flex-wrap: wrap;
}
.fonolee-fill-fixed {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--fonolee-dark);
  padding: .2rem .4rem;
  letter-spacing: 1px;
}
.fonolee-fill-slot {
  width: 3.6rem;
  height: 4.3rem;
  border-radius: 14px;
  border: 3px dashed #4A93F0;
  background: #F2EEFF;
  color: var(--fonolee-primary);
  font-size: 2.6rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s, border-style .2s, background .2s;
}
.fonolee-fill-slot:active { transform: scale(.95); }
.fonolee-fill-slot.filled {
  border-style: solid;
  background: #fff;
  border-color: var(--fonolee-primary);
}
.fonolee-fill-slot.correct {
  border-color: var(--fonolee-ok);
  background: #E8FFF1;
  color: #1b5e20;
  animation: fonolee-fill-correct .5s ease-out;
}
.fonolee-fill-slot.wrong {
  border-color: var(--fonolee-err);
  background: #FFECEC;
  color: #a02020;
  animation: fonolee-fill-shake .5s;
}
@keyframes fonolee-fill-correct {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes fonolee-fill-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.fonolee-fill-pool {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
  padding: .75rem;
  background: rgba(30,122,232,0.08);
  border-radius: 20px;
}
.fonolee-fill-chip {
  width: 3.2rem;
  height: 3.8rem;
  border-radius: 12px;
  border: 2px solid #3A2008;
  background: linear-gradient(to bottom, #F3D09A, #B07A3A);
  color: #1A0F04;
  font-size: 2rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .2s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fonolee-fill-chip:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }
.fonolee-fill-chip.selected {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0,0,0,0.25), 0 0 0 4px var(--fonolee-primary);
  background: linear-gradient(to bottom, #FFE156, #FFC93C);
}
.fonolee-fill-chip.used {
  opacity: .25;
  pointer-events: none;
}

@media (min-width: 768px) {
  .fonolee-fill-emoji { font-size: 8rem; }
  .fonolee-fill-emoji img.emoji { width: 8rem; height: 8rem; }
  .fonolee-fill-fixed { font-size: 4.5rem; }
  .fonolee-fill-slot  { width: 4.8rem; height: 5.8rem; font-size: 3.5rem; }
  .fonolee-fill-chip  { width: 4rem; height: 4.8rem; font-size: 2.5rem; }
}

/* Palabras: botones mas anchos, texto en vez de letra gigante */
.fonolee-options-words { grid-template-columns: 1fr !important; max-width: 520px; }
.fonolee-word-option {
  font-size: 2.8rem;
  font-weight: 700;
  min-height: 90px;
  letter-spacing: 2px;
}
.fonolee-word-display {
  font-size: 5rem;
  font-weight: 800;
  color: var(--fonolee-primary);
  letter-spacing: 3px;
  text-align: center;
}
.fonolee-image-option {
  font-size: 5rem;
  min-height: 150px;
}

@media (min-width: 768px) {
  .fonolee-word-option   { font-size: 4rem; min-height: 120px; }
  .fonolee-word-display  { font-size: 8rem; }
  .fonolee-image-option  { font-size: 7rem; min-height: 200px; }
}

/* ---- Hub de juegos ---- */
.fonolee-hub {
  flex: 1 1 0; min-height: 0;
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, #1E7AE8 0%, #4EC0CA 100%);
}
.fonolee-hub-header {
  display: flex; align-items: center; gap: 1rem;
  max-width: 960px; margin: 0 auto 2rem;
}
.fonolee-hub-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 960px; margin: 0 auto;
}
.fonolee-hub-card {
  background: #fff; border-radius: 24px;
  padding: 1rem 1rem 1.25rem; text-align: center;
  color: var(--fonolee-dark); text-decoration: none;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
}
.fonolee-hub-card:active { transform: translateY(-3px); }
.fonolee-hub-card h3 { margin: 1rem 0 .25rem; }
.fonolee-hub-card p  { margin: 0; color: #666; font-size: .95rem; }

.fonolee-hub-preview {
  position: relative; height: 160px; border-radius: 18px; overflow: hidden;
}
.fonolee-hub-preview .sky {
  position: absolute; inset: 0 0 32% 0;
  background: linear-gradient(to bottom, #70C5CE, #A7E0E4);
}
.fonolee-hub-preview .ground {
  position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(to bottom, #5FA849 0 12%, #DED895 12% 100%);
}
/* preview flappy */
.fonolee-hub-preview.flappy { background: none; }
.fonolee-hub-preview.flappy .bird {
  position: absolute; top: 38%; left: 26%;
  width: 46px; height: 36px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #FFF4A3 0 15%, transparent 16%),
    radial-gradient(circle at 50% 50%, #FFF28A 0 20%, #FFE135 22% 78%, #E8B820 79%);
  border: 2px solid #000;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
  animation: fonolee-bird-float 1.1s ease-in-out infinite;
}
/* ojo */
.fonolee-hub-preview.flappy .bird::before {
  content: ''; position: absolute;
  top: 6px; right: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset -3px -1px 0 #7A4E2B, inset -5px -3px 0 #000, inset -6px -4px 0 #fff;
}
/* pico */
.fonolee-hub-preview.flappy .bird::after {
  content: ''; position: absolute;
  right: -10px; top: 12px;
  width: 16px; height: 10px;
  background: linear-gradient(to bottom, #FFA23C 50%, #E56B0E 50%);
  border: 2px solid #000;
  border-radius: 0 50% 50% 0 / 0 50% 50% 0;
}
.fonolee-hub-preview.flappy .pipe {
  position: absolute; width: 36px; left: 62%;
  background: linear-gradient(90deg, #3E8F2A, #8AD876, #5EB844, #255F1C);
  border: 2px solid #1F5318;
}
.fonolee-hub-preview.flappy .pipe-top { top: 0; height: 50px; }
.fonolee-hub-preview.flappy .pipe-bot { bottom: 32%; height: 38px; }
@keyframes fonolee-bird-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}

/* preview phono (conciencia fonologica) */
.fonolee-hub-preview.phono {
  background: linear-gradient(135deg, #F5E6FF 0%, #C7DEF9 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .25rem;
  padding: 10px 0; position: relative;
}
.fonolee-hub-preview.phono .musical {
  font-size: 1.5rem;
  animation: fonolee-hub-hop 1.2s ease-in-out infinite;
}
.fonolee-hub-preview.phono .phono-emoji {
  font-size: 3.5rem;
  line-height: 1;
}
.fonolee-hub-preview.phono .claps {
  font-size: 1rem;
  letter-spacing: 4px;
}

/* preview memoria */
.fonolee-hub-preview.memory {
  background: linear-gradient(135deg, #FFE4A3 0%, #FFB88C 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px;
  place-items: center;
}
.fonolee-hub-preview.memory .mini-card {
  width: 38px; height: 48px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800;
  border: 2px solid #5A3A18;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.fonolee-hub-preview.memory .mini-card.back {
  background: linear-gradient(to bottom, #A0672F, #6F3F15);
  border-color: #3A2008;
}
.fonolee-hub-preview.memory .c3 span { font-size: .75rem; color: #1A0F04; }

/* preview complete */
.fonolee-hub-preview.complete {
  background: linear-gradient(135deg, #A6D9EF 0%, #D4F0D4 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 10px 0;
}
.fonolee-hub-preview.complete .emoji {
  font-size: 3rem;
  line-height: 1;
  animation: fonolee-bird-float 1.6s ease-in-out infinite;
}
.fonolee-hub-preview.complete .word-row {
  display: flex; gap: 6px; align-items: center;
}
.fonolee-hub-preview.complete .letter {
  font-size: 1.4rem; font-weight: 800; color: var(--fonolee-primary);
}
.fonolee-hub-preview.complete .blank {
  width: 18px; height: 24px;
  border: 2px dashed var(--fonolee-primary);
  border-radius: 5px;
  background: #fff;
}
.fonolee-hub-preview.complete .chip-row {
  display: flex; gap: 4px;
}
.fonolee-hub-preview.complete .chip {
  background: linear-gradient(to bottom, #F3D09A, #B07A3A);
  color: #1A0F04;
  font-weight: 800; font-size: .9rem;
  width: 22px; height: 28px;
  border: 2px solid #3A2008;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* preview angry */
.fonolee-hub-preview.angry { background: none; }
.fonolee-hub-preview.angry .sling {
  position: absolute; bottom: 32%; left: 18%;
  width: 10px; height: 40px;
  background: #6B3F17; border: 2px solid #000;
}
.fonolee-hub-preview.angry .sling::before,
.fonolee-hub-preview.angry .sling::after {
  content: ''; position: absolute;
  top: -8px; width: 14px; height: 8px;
  background: #6B3F17; border: 2px solid #000;
}
.fonolee-hub-preview.angry .sling::before { left: -10px; transform: rotate(-25deg); }
.fonolee-hub-preview.angry .sling::after  { right: -10px; transform: rotate(25deg); }
.fonolee-hub-preview.angry .redbird {
  position: absolute; bottom: 42%; left: 22%;
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #F5D6CC 0 15%, #E03A2F 20%);
  border: 2px solid #000;
  animation: fonolee-bird-float 1.2s ease-in-out infinite;
}
.fonolee-hub-preview.angry .pig {
  position: absolute; bottom: 32%; right: 20%;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9CE35A 0 15%, #74CB3F 20%);
  border: 2px solid #000;
}
.fonolee-hub-preview.angry .box {
  position: absolute; width: 24px; height: 24px;
  background: linear-gradient(to right, #A0672F, #C7883F, #7A4A1F);
  border: 2px solid #000;
}
.fonolee-hub-preview.angry .box-1 { bottom: 32%; right: 12%; }
.fonolee-hub-preview.angry .box-2 { bottom: 32%; right: 32%; }

/* ---- Ladrón de palabras (top-down) ---- */
.fonolee-steal {
  position: fixed; inset: 0;
  z-index: 100;             /* sobre el nav (que tiene z-index 50) */
  background: #2D241A;
  display: flex; flex-direction: column; align-items: center;
  user-select: none; touch-action: none;
  overflow: hidden;
}
.fonolee-steal-hud {
  width: 100%;
  min-height: 64px;
  display: flex; align-items: center;
  flex-wrap: wrap;
  padding: .5rem .75rem;
  gap: .5rem;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 2;
  flex-shrink: 0;
}
.fonolee-steal-hud .btn {
  font-size: 1.3rem;
  padding: .3rem .7rem;
  flex-shrink: 0;
}
.fonolee-steal-back { flex-shrink: 0; }

.fonolee-steal-quest {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700;
  background: #FFE156;
  color: #2A1505;
  padding: .25rem .5rem .25rem .8rem;
  border-radius: 999px;
  border: 2px solid #2A1505;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  flex: 1 1 auto;            /* crece y ocupa lo disponible */
  min-width: 0;
  max-width: 100%;
  justify-content: center;
}
.fonolee-steal-quest .quest-label {
  font-size: .9rem;
  white-space: nowrap;
}
.fonolee-steal-quest .quest-emoji {
  background: #fff;
  border: 2px solid #2A1505;
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 0;
}
.fonolee-steal-quest .quest-emoji img.emoji {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  vertical-align: middle;
}

.fonolee-steal-stats {
  display: flex; align-items: center; gap: .4rem;
  flex-shrink: 0;
  margin-left: auto;
}
.fonolee-steal-score {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  background: #F5F5F5;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.fonolee-steal-timer {
  font-weight: 800; font-size: .95rem;
  background: #D4F0D4; color: #1f6a33;
  padding: .3rem .7rem; border-radius: 999px;
  border: 2px solid #1f6a33;
  transition: background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.fonolee-steal-timer.warn {
  background: #FFF3C4; color: #8a6a00;
  border-color: #8a6a00;
}
.fonolee-steal-timer.danger {
  background: #FFD6D6; color: #A02020;
  border-color: #A02020;
  animation: fonolee-danger-pulse .6s ease-in-out infinite;
}
@keyframes fonolee-danger-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.fonolee-steal-time-bar-wrap {
  height: 8px;
  width: 100%;
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}
.fonolee-steal-time-bar {
  height: 100%;
  background: linear-gradient(90deg, #2ECC71, #3BE57D);
  transition: width .2s linear, background .3s;
}
.fonolee-steal-time-bar.warn {
  background: linear-gradient(90deg, #F5C63B, #FFD93C);
}
.fonolee-steal-time-bar.danger {
  background: linear-gradient(90deg, #FF6B6B, #FF3B3B);
}

.fonolee-steal-streak {
  font-weight: 800; font-size: .95rem;
  background: #F1F1F1; color: #777;
  padding: .3rem .7rem; border-radius: 999px;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  white-space: nowrap;
}
.fonolee-steal-streak.active {
  background: linear-gradient(135deg, #FF6B35, #FFD23F);
  color: #fff;
  border-color: #C93F00;
  animation: fonolee-streak-pulse 1.2s ease-in-out infinite;
}
@keyframes fonolee-streak-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Mobile: HUD en dos filas — primera con volver+stats, segunda con quest grande */
@media (max-width: 600px) {
  .fonolee-steal-hud {
    flex-direction: column;
    align-items: stretch;
    padding: .5rem;
  }
  .fonolee-steal-hud-top {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
  }
  .fonolee-steal-stats {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .fonolee-steal-quest {
    width: 100%;
    font-size: 1rem;
    padding: .4rem .8rem;
  }
  .fonolee-steal-quest .quest-label { font-size: 1rem; }
  .fonolee-steal-quest .quest-emoji {
    width: 2.6rem; height: 2.6rem;
    font-size: 1.5rem;
  }
  .fonolee-steal-timer, .fonolee-steal-score, .fonolee-steal-streak {
    font-size: .85rem;
    padding: .25rem .55rem;
  }
  .fonolee-steal-hud .btn { font-size: 1.1rem; padding: .2rem .55rem; }
}

.fonolee-steal-canvas {
  display: block;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
}
.fonolee-joystick {
  position: absolute;
  left: 28px; bottom: 28px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 3px solid rgba(255,255,255,.35);
  touch-action: none;
  z-index: 3;
}
.fonolee-joystick-inner {
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin-left: -26px; margin-top: -26px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .05s;
}
.fonolee-steal-toast {
  position: absolute; top: 90px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: .5rem 1.2rem; border-radius: 999px;
  font-weight: 700;
  pointer-events: none; opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 4;
}
.fonolee-steal-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fonolee-steal-toast.good { background: #2ECC71; color: #fff; }
.fonolee-steal-toast.bad  { background: #FF6B6B; color: #fff; }

.fonolee-steal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: fonolee-fade-in .2s ease-out;
}
@keyframes fonolee-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fonolee-steal-card {
  background: #fff; border-radius: 28px;
  padding: 2rem 1.5rem 1.5rem; text-align: center;
  max-width: 420px; width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
  animation: fonolee-modal-pop .3s cubic-bezier(.2, 1.2, .5, 1);
}
@keyframes fonolee-modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Preview en hub: ladrón de palabras */
.fonolee-hub-preview.steal { background: #A97F50; position: relative; overflow: hidden; }
.fonolee-hub-preview.steal .floor {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, #A97F50 0 10px, #9B7048 10px 20px);
}
.fonolee-hub-preview.steal .steal-quest {
  position: absolute; top: 10px; right: 10px;
  background: #FFE156; border: 2px solid #2A1505;
  border-radius: 999px; padding: 2px 8px;
  font-size: 1.4rem;
  z-index: 3;
}
.fonolee-hub-preview.steal .steal-chest {
  position: absolute; right: 20%; top: 40%;
  width: 36px; height: 32px;
  background: linear-gradient(to bottom, #A86A2A, #6F3F15);
  border: 2px solid #3A2008;
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.fonolee-hub-preview.steal .steal-chest::before {
  content: ''; position: absolute;
  left: 4px; right: 4px; top: 12px; height: 4px;
  background: #2A1505;
}
.fonolee-hub-preview.steal .steal-kid {
  position: absolute; left: 22%; top: 38%;
  width: 24px; height: 30px;
  background: radial-gradient(circle at 50% 30%, #FFD166 0 25%, #2E8BCB 30% 70%, #1E5E8F 80%);
  border: 2px solid #000; border-radius: 50% 50% 30% 30%;
  animation: fonolee-bird-float 1.4s ease-in-out infinite;
}
.fonolee-hub-preview.steal .steal-word {
  position: absolute;
  background: linear-gradient(to bottom, #E8C28A, #B07A3A);
  border: 2px solid #5A3A18;
  padding: 2px 8px;
  font-size: .8rem; font-weight: 800;
  color: #2A1505;
  border-radius: 4px;
}
.fonolee-hub-preview.steal .w1 { left: 44%; top: 28%; }
.fonolee-hub-preview.steal .w2 { left: 58%; top: 68%; }

/* ---- Juego standalone: Conciencia fonologica ---- */
.fonolee-phono {
  flex: 1 1 0; min-height: 0;
  background: linear-gradient(135deg, #F5E6FF 0%, #C7DEF9 100%);
  display: flex; flex-direction: column;
}
.fonolee-phono-hud {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; gap: .5rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2;
}
.fonolee-phono-hud .btn { font-size: 1.5rem; padding: .3rem .8rem; }
.fonolee-phono-title {
  font-weight: 800; font-size: 1.1rem;
  color: #1E7AE8;
  flex: 1; text-align: center;
}
.fonolee-phono-streak, .fonolee-phono-score {
  font-weight: 800; font-size: 1.05rem; white-space: nowrap;
}
.fonolee-phono-streak {
  background: #F1F1F1; color: #777;
  padding: .35rem .85rem; border-radius: 999px;
  border: 2px solid transparent;
}
.fonolee-phono-streak.active {
  background: linear-gradient(135deg, #FF6B35, #FFD23F);
  color: #fff; border-color: #C93F00;
}
.fonolee-phono-stage {
  flex-grow: 1;
  padding: 1.25rem 1rem 2rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: .5rem;
  max-width: 700px; margin: 0 auto; width: 100%;
}
.fonolee-phono-toast {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: .6rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: 1.1rem;
  pointer-events: none; opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 4;
}
.fonolee-phono-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fonolee-phono-toast.good { background: #2ECC71; color: #fff; }
.fonolee-phono-toast.bad  { background: #FF6B6B; color: #fff; }

/* ---- Juego standalone: Memoria de Palabras ---- */
.fonolee-memory {
  flex: 1 1 0; min-height: 0;
  background: linear-gradient(135deg, #FFE4A3 0%, #FFB88C 100%);
  display: flex; flex-direction: column;
}
.fonolee-memory-hud {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; gap: .5rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2; flex-wrap: nowrap;
}
.fonolee-memory-hud .btn { font-size: 1.5rem; padding: .3rem .8rem; }
.fonolee-memory-title {
  font-weight: 800; font-size: 1.1rem;
  color: #A03B00;
  flex: 1 1 auto; text-align: center;
}
.fonolee-memory-progress {
  font-weight: 800; font-size: 1.05rem;
  background: #fff; color: #A03B00;
  padding: .35rem .85rem; border-radius: 999px;
  border: 2px solid #A03B00;
  white-space: nowrap;
}
.fonolee-memory-streak, .fonolee-memory-score {
  font-weight: 800; font-size: 1.05rem; white-space: nowrap;
}
.fonolee-memory-streak {
  background: #F1F1F1; color: #777;
  padding: .35rem .85rem; border-radius: 999px;
  border: 2px solid transparent;
}
.fonolee-memory-streak.active {
  background: linear-gradient(135deg, #FF6B35, #FFD23F);
  color: #fff; border-color: #C93F00;
}

.fonolee-memory-stage {
  flex-grow: 1;
  padding: 1.5rem 1rem 2rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
}
.fonolee-memory-grid {
  display: grid;
  gap: .75rem;
  margin: 0 auto;
  width: 100%;
}

/* Cartas con flip 3D */
.fonolee-memory-card {
  background: transparent;
  border: none;
  cursor: pointer;
  perspective: 1000px;
  aspect-ratio: 3 / 4;
  padding: 0;
}
.fonolee-memory-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  border-radius: 12px;
}
.fonolee-memory-card.open .fonolee-memory-inner,
.fonolee-memory-card.matched .fonolee-memory-inner {
  transform: rotateY(180deg);
}
.fonolee-memory-back,
.fonolee-memory-face {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #3A2008;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
}
/* Dorso: crate de Sokoban */
.fonolee-memory-back {
  background: linear-gradient(135deg, #D89652 0%, #8B4F1C 100%);
  background-image: url('../img/sokoban/crate_target.png'), linear-gradient(135deg, #D89652, #8B4F1C);
  background-size: 70% 70%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  image-rendering: pixelated;
}
.fonolee-memory-back::after {
  content: '?';
  position: absolute;
  color: rgba(255,255,255,0.85);
  font-size: 1.8rem; font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
/* Frente: cara visible cuando voltea */
.fonolee-memory-face {
  background: #fff;
  transform: rotateY(180deg);
  color: var(--fonolee-dark);
}
.fonolee-memory-face.is-emoji {
  font-size: 2.8rem;
}
.fonolee-memory-face.is-emoji img.emoji {
  width: 3.2rem; height: 3.2rem;
}
.fonolee-memory-face.is-word {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fonolee-primary);
  letter-spacing: 1px;
  padding: 4px;
  text-align: center;
  word-break: break-word;
}
.fonolee-memory-card.matched .fonolee-memory-face {
  background: #E8FFF1;
  border-color: var(--fonolee-ok);
  animation: fonolee-fill-correct .5s ease-out;
}

@media (min-width: 768px) {
  .fonolee-memory-face.is-emoji { font-size: 3.5rem; }
  .fonolee-memory-face.is-emoji img.emoji { width: 4rem; height: 4rem; }
  .fonolee-memory-face.is-word  { font-size: 1.5rem; }
}

.fonolee-memory-toast {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: .6rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: 1.1rem;
  pointer-events: none; opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 4;
}
.fonolee-memory-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fonolee-memory-toast.good { background: #2ECC71; color: #fff; }
.fonolee-memory-toast.bad  { background: #FF6B6B; color: #fff; }

.fonolee-memory-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: fonolee-fade-in .2s ease-out;
}
.fonolee-memory-card-win {
  background: #fff; border-radius: 28px;
  padding: 2rem 1.5rem 1.5rem; text-align: center;
  max-width: 420px; width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
  animation: fonolee-modal-pop .3s cubic-bezier(.2, 1.2, .5, 1);
}

/* ---- Juego standalone: Completar Palabras ---- */
.fonolee-complete {
  flex: 1 1 0; min-height: 0;
  background: linear-gradient(135deg, #A6D9EF 0%, #D4F0D4 100%);
  display: flex; flex-direction: column;
}
.fonolee-complete-hud {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; gap: .75rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2;
}
.fonolee-complete-hud .btn { font-size: 1.5rem; padding: .3rem .8rem; }
.fonolee-complete-title {
  font-weight: 800; font-size: 1.2rem;
  color: var(--fonolee-primary);
  flex: 1; text-align: center;
}
.fonolee-complete-streak, .fonolee-complete-score {
  font-weight: 800; font-size: 1.1rem;
  white-space: nowrap;
}
.fonolee-complete-streak {
  background: #F1F1F1; color: #777;
  padding: .35rem .9rem; border-radius: 999px;
  border: 2px solid transparent;
  transition: background .2s, color .2s;
}
.fonolee-complete-streak.active {
  background: linear-gradient(135deg, #FF6B35, #FFD23F);
  color: #fff; border-color: #C93F00;
}

.fonolee-complete-stage {
  flex-grow: 1;
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem;
  max-width: 700px; margin: 0 auto; width: 100%;
}
.fonolee-complete-loading {
  font-size: 1.2rem; color: #666; padding: 2rem;
}
.fonolee-complete-toast {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: .6rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: 1.1rem;
  pointer-events: none; opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 4;
}
.fonolee-complete-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fonolee-complete-toast.good { background: #2ECC71; color: #fff; }
.fonolee-complete-toast.bad  { background: #FF6B6B; color: #fff; }

/* ---- Angry Birds ---- */
.fonolee-angry {
  position: fixed; inset: 0;
  z-index: 100;
  background: #87CEEB;
  display: flex; flex-direction: column;
  user-select: none; touch-action: none;
}
.fonolee-angry-hud {
  height: 70px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; gap: .75rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 2;
}
.fonolee-angry-hud .btn { font-size: 1.5rem; padding: .3rem .8rem; }
.fonolee-angry-stats {
  display: flex; gap: 1.25rem; font-weight: 700; font-size: 1.15rem;
}
.fonolee-angry-canvas { flex-grow: 1; display: block; width: 100%; cursor: grab; touch-action: none; }
.fonolee-angry-canvas:active { cursor: grabbing; }
.fonolee-angry-hint {
  position: absolute; top: 90px; left: 0; right: 0; text-align: center;
  font-size: 1.2rem; font-weight: 600;
  color: #333; pointer-events: none;
  animation: fonolee-blink 1.4s ease-in-out infinite;
}
.fonolee-angry-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.fonolee-angry-card {
  background: #fff; border-radius: 28px;
  padding: 1.5rem 1.5rem 1.25rem; text-align: center;
  max-width: 420px; width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* ---- Flappy Bird ---- */
.fonolee-flappy {
  position: fixed; inset: 0;
  z-index: 100;
  background: #4EC0CA;
  display: flex; flex-direction: column;
  user-select: none; touch-action: manipulation;
}
.fonolee-flappy-hud {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 2;
}
.fonolee-flappy-hud .btn { font-size: 1.5rem; padding: .3rem .8rem; }
.fonolee-flappy-score {
  font-size: 2.2rem; font-weight: 900; color: #fff;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  letter-spacing: 2px;
}
.fonolee-flappy-best { font-weight: 600; color: #333; }
.fonolee-flappy-canvas { flex-grow: 1; display: block; width: 100%; cursor: pointer; }

.fonolee-flappy-gameover {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.fonolee-flappy-card {
  background: #fff; border-radius: 28px;
  padding: 1.5rem 1.5rem 1.25rem; text-align: center;
  max-width: 420px; width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.fonolee-flappy-card .medal { line-height: 1; }

/* ---- Guía pedagógica (visual) ---- */
.fonolee-guide { background: var(--fonolee-bg); }
.fonolee-guide h2 { color: var(--fonolee-primary); }
.fonolee-guide-banner {
  background: linear-gradient(135deg, #FFF9D0 0%, #FFE8B0 100%) !important;
  border: 2px solid var(--fonolee-accent) !important;
  border-radius: 16px;
}

/* Hero */
.fonolee-guide-hero {
  background: linear-gradient(135deg, #1E7AE8, #4A93F0);
}

/* Secciones alternas con fondo */
.fonolee-guide-section {
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* Camino de aprendizaje (5 pasos visuales) */
.fonolee-road {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem;
}
.fonolee-road-step {
  flex: 1 1 150px; max-width: 200px;
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  border-left: 5px solid var(--step-color, #1E7AE8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  text-align: center;
}
.fonolee-road-icon { font-size: 2.5rem; margin-bottom: .35rem; }
.fonolee-road-label strong { display: block; font-size: .95rem; }
.fonolee-road-label span  { display: block; font-size: .78rem; color: #666; margin-top: .2rem; }
.fonolee-road-arrow {
  font-size: 1.6rem; color: #bbb; font-weight: 800;
}
@media (max-width: 767px) {
  .fonolee-road { flex-direction: column; }
  .fonolee-road-arrow { transform: rotate(90deg); }
  .fonolee-road-step  { max-width: 100%; }
}

/* Nivel cards */
.fonolee-guide-levels { display: flex; flex-direction: column; gap: .75rem; }
.fonolee-guide-level-card {
  display: flex; align-items: center; gap: 1rem;
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid #eee;
}
.fonolee-guide-level-num {
  font-size: 1.8rem;
  font-weight: 900;
  min-width: 60px;
  text-align: center;
}
.fonolee-guide-level-body h4 { margin: 0 0 .15rem; font-size: 1.1rem; }
.fonolee-guide-level-body p  { font-size: .85rem; color: #666; }
.fonolee-guide-level-letters {
  font-size: 1.3rem; font-weight: 800; letter-spacing: 2px; color: var(--fonolee-primary);
}

/* Categorías de actividades */
.fonolee-guide-cat-title {
  font-size: 1.3rem; font-weight: 700;
  color: #333; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.fonolee-guide-cat-title span { font-size: 1.6rem; }
.fonolee-guide-cat-title small { color: #888; font-weight: 400; }

/* Activity cards */
.fonolee-guide-act-card {
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  height: 100%;
  border-top: 4px solid var(--act-color, #1E7AE8);
}
.fonolee-guide-act-preview {
  background: #F7F5FF;
  border-radius: 12px;
  padding: .75rem;
  text-align: center;
  margin-bottom: .75rem;
  min-height: 80px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.fonolee-guide-act-card h5 { font-size: 1rem; margin-bottom: .35rem; }
.fonolee-guide-act-card p  { font-size: .82rem; color: #555; }
.fonolee-guide-act-badge {
  background: #F0ECFF; color: var(--fonolee-primary);
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  display: inline-block; margin-top: .25rem;
}

/* Game cards (guía) */
.fonolee-guide-game {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1rem;
  text-align: center;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-top: 4px solid var(--game-color, #95A5A6);
}
.fonolee-guide-game-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.fonolee-guide-game h5 { font-size: .95rem; margin-bottom: .35rem; }

/* Tips */
.fonolee-guide-tip {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1rem;
  text-align: center;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.fonolee-guide-tip-icon { font-size: 2.5rem; margin-bottom: .5rem; }

/* Panel nivel actual en parent detail */
.fonolee-current-level {
  border-radius: 16px;
  border: 2px solid var(--fonolee-primary);
  background: linear-gradient(135deg, #F7F5FF 0%, #EEE8FF 100%);
}
.fonolee-current-level-badge {
  background: var(--fonolee-primary);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* Gestionar niveles en parent detail */
.fonolee-level-actions {
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* ---- Dashboard padres ---- */
.fonolee-progress-card { border: none; border-radius: 20px; }
.fonolee-mastery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}
.fonolee-mastery-cell {
  background: #fff; border-radius: 16px; padding: 1rem;
  text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.fonolee-mastery-cell .letter { font-size: 2.5rem; font-weight: 800; }
.fonolee-level-bar { display: flex; gap: 3px; justify-content: center; margin-top: .5rem; }
.fonolee-level-bar span {
  width: 16px; height: 10px; border-radius: 4px; background: #eee;
}
.fonolee-level-bar span.on { background: var(--fonolee-ok); }

/* ---- English module ---- */
.fonolee-english {
  display: flex; flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  padding: .5rem;
  touch-action: manipulation; user-select: none;
  overflow: hidden;
}
.fonolee-english-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .5rem;
}
.fonolee-english-header .btn { font-size: 1.5rem; padding: .5rem 1rem; }
.fonolee-english-badge {
  background: linear-gradient(135deg, #2ECC71, #27AE60);
  color: #fff; padding: .4rem 1rem;
  border-radius: 999px; font-weight: 700; font-size: 1rem;
}
.fonolee-english-progress {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border-radius: 18px;
  padding: .6rem 1rem; margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.fonolee-english-stage {
  font-weight: 700; color: #27AE60; font-size: 1rem;
  white-space: nowrap;
}
.fonolee-english-word-display {
  font-size: 5rem; font-weight: 800;
  color: #27AE60; text-align: center;
  letter-spacing: 3px; line-height: 1;
}
.fonolee-english-translate-target {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: #FFF9D0; border: 3px solid #FFC93C;
  padding: .75rem 1.5rem; border-radius: 999px;
  margin-bottom: .5rem;
}
.fonolee-english-translate-target .emoji-big { font-size: 3rem; }
.fonolee-english-translate-target .spanish-word {
  font-size: 2.2rem; font-weight: 800; color: #2D3436;
}
.fonolee-english-opt {
  color: #27AE60 !important;
  border-color: #27AE60 !important;
}
@media (min-width: 768px) {
  .fonolee-english-word-display { font-size: 8rem; }
}

/* --- Responsive: encajar en viewport sin scroll --- */

/* --- Responsive: todo en 1 pantalla, escalado por vh --- */

/* Base adaptativa: tamaños relativos al viewport height */
.fonolee-prompt { font-size: clamp(.85rem, 2.5vh, 1.3rem); }
.fonolee-letter-display { font-size: clamp(4rem, 14vh, 14rem) !important; }
.fonolee-play-big-btn {
  font-size: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(.4rem, 1.5vh, 1.5rem) clamp(.8rem, 3vh, 3rem);
  box-shadow: 0 clamp(3px, 1vh, 8px) 0 #1559B0;
}
.fonolee-options { gap: clamp(.4rem, 1.2vh, 1.25rem); }
.fonolee-option {
  min-height: clamp(50px, 12vh, 180px);
  font-size: clamp(2rem, 6vh, 6rem);
  border-radius: clamp(12px, 2vh, 24px);
}
.fonolee-image-option {
  font-size: clamp(2.5rem, 8vh, 7rem);
  min-height: clamp(55px, 13vh, 200px);
}

/* Fonológica */
.fonolee-phono-emoji { font-size: clamp(3rem, 9vh, 8rem); }
.fonolee-phono-emoji img.emoji { width: clamp(3rem, 9vh, 8rem); height: clamp(3rem, 9vh, 8rem); }
.fonolee-phono-hint { font-size: clamp(.9rem, 2.5vh, 1.4rem); }
.fonolee-phono-hint-letter { font-size: clamp(3.5rem, 10vh, 10rem) !important; }
.fonolee-syl-number { font-size: clamp(2rem, 6vh, 5rem) !important; min-height: clamp(45px, 10vh, 150px) !important; }

/* Rimas */
.fonolee-rhyme-target { padding: clamp(.3rem, 1vh, .75rem) clamp(.5rem, 2vh, 1.25rem); }
.fonolee-rhyme-emoji { font-size: clamp(1.8rem, 5vh, 4.5rem); }
.fonolee-rhyme-emoji img.emoji { width: clamp(1.8rem, 5vh, 4.5rem); height: clamp(1.8rem, 5vh, 4.5rem); }
.fonolee-rhyme-word { font-size: clamp(1.2rem, 3.5vh, 3rem); }

/* Oraciones */
.fonolee-sentence-display { font-size: clamp(1.2rem, 3.5vh, 2.8rem); padding: clamp(.3rem, 1vh, .5rem) clamp(.5rem, 2vh, 1rem); }

/* Blend */
.fonolee-blend-part { font-size: clamp(1.5rem, 4vh, 3.5rem); padding: clamp(.2rem, .8vh, .4rem) clamp(.5rem, 2vh, 1.2rem); }
.fonolee-blend-sep { font-size: clamp(1.2rem, 3vh, 2rem); }

/* Fill word / Spell */
.fonolee-fill-emoji { font-size: clamp(3rem, 8vh, 8rem); }
.fonolee-fill-emoji img.emoji { width: clamp(3rem, 8vh, 8rem); height: clamp(3rem, 8vh, 8rem); }
.fonolee-fill-fixed { font-size: clamp(1.5rem, 4.5vh, 4.5rem); }
.fonolee-fill-slot {
  width: clamp(2rem, 5vh, 4.8rem);
  height: clamp(2.4rem, 6vh, 5.8rem);
  font-size: clamp(1.3rem, 3.5vh, 3.5rem);
}
.fonolee-fill-chip {
  width: clamp(1.8rem, 4.5vh, 4rem);
  height: clamp(2.2rem, 5.5vh, 4.8rem);
  font-size: clamp(1.1rem, 3vh, 2.5rem);
}
.fonolee-fill-pool { gap: clamp(.3rem, .8vh, .75rem); padding: clamp(.3rem, 1vh, .75rem); }

/* Palabras */
.fonolee-word-option { font-size: clamp(1.5rem, 4vh, 4rem); min-height: clamp(40px, 8vh, 120px); }
.fonolee-word-display { font-size: clamp(2.5rem, 7vh, 8rem); }

/* English */
.fonolee-english-word-display { font-size: clamp(2.5rem, 8vh, 8rem); }
.fonolee-english-translate-target .emoji-big { font-size: clamp(1.5rem, 5vh, 3rem); }
.fonolee-english-translate-target .spanish-word { font-size: clamp(1.2rem, 3.5vh, 2.2rem); }


/* ==========================================================
   KID-FRIENDLY OVERRIDES: colores solidos, sin degradados.
   Mas facil de procesar para niños de 4-5 años.
   ========================================================== */

/* --- Fondos de pagina: solidos --- */
.fonolee-hero,
.fonolee-guide-hero             { background: #1E7AE8 !important; }
.fonolee-hub                    { background: #5B50D6 !important; }
.fonolee-phono                  { background: #E8D8FF !important; }
.fonolee-memory                 { background: #FFD9A0 !important; }
.fonolee-complete               { background: #C8E8D8 !important; }
.fonolee-steal                  { background: #3A2E1A !important; }

/* --- Barras de progreso: solidas --- */
.fonolee-progress-fill          { background: #1E7AE8 !important; }
.fonolee-steal-time-bar         { background: #2ECC71 !important; }
.fonolee-steal-time-bar.warn    { background: #F5C63B !important; }
.fonolee-steal-time-bar.danger  { background: #FF6B6B !important; }

/* --- Botones y badges: solidos --- */
.fonolee-reward-btn.ready       { background: #FFC93C !important; }
.fonolee-letter-chip.lvl-5      { background: #2ECC71 !important; }
.fonolee-english-badge           { background: #2ECC71 !important; }

/* Streaks activos */
.fonolee-steal-streak.active,
.fonolee-complete-streak.active,
.fonolee-memory-streak.active,
.fonolee-phono-streak.active    { background: #FF6B35 !important; }

/* --- Fichas de madera: solidas, color crema calido --- */
.fonolee-fill-chip              { background: #D4A05A !important; }
.fonolee-fill-chip.selected     { background: #FFC93C !important; }

/* --- Hub previews: solidos --- */
.fonolee-hub-preview .sky        { background: #87CEEB !important; }
.fonolee-hub-preview .ground     { background: #5FA849 !important; }
.fonolee-hub-preview.flappy .pipe{ background: #4A9C38 !important; }
.fonolee-hub-preview.phono       { background: #E8D8FF !important; }
.fonolee-hub-preview.memory      { background: #FFD9A0 !important; }
.fonolee-hub-preview.complete    { background: #C8E8D8 !important; }
/* Miniatura de Ladrón de palabras con los sprites reales del juego (Sokoban) */
.fonolee-hub-preview.steal .floor { background: url('../img/sokoban/ground_grass.png') repeat !important; background-size: 40px 40px !important; }
.fonolee-hub-preview.steal .steal-chest { background: url('../img/sokoban/crate_open.png') center/contain no-repeat !important; border: none !important; }
.fonolee-hub-preview.steal .steal-kid { background: url('../img/sokoban/player.png') 0% 0% / 800% 100% no-repeat !important; border: none !important; }
.fonolee-hub-preview.steal .steal-word  { background: #D4A05A !important; }
.fonolee-hub-preview.memory .mini-card.back { background: #8B5A2B !important; }
/* Miniatura de Angry con los sprites reales (Kenney) */
.fonolee-hub-preview.angry .box     { background: url('../img/angry/wood.png')  center/contain no-repeat !important; border: none !important; }
.fonolee-hub-preview.angry .box-2   { background: url('../img/angry/stone.png') center/contain no-repeat !important; }
.fonolee-hub-preview.angry .redbird { background: url('../img/angry/bird.png')  center/contain no-repeat !important; border: none !important; }
.fonolee-hub-preview.angry .pig     { background: url('../img/angry/pig.png')   center/contain no-repeat !important; border: none !important; }

/* --- Flappy bird preview: sprite real --- */
.fonolee-hub-preview.flappy .bird {
  background: url('../img/flappy/bird.png') center/contain no-repeat !important;
  border: none !important;
}

/* --- Memory card back: solida --- */
.fonolee-memory-back {
  background-color: #A0672F !important;
  background-image: url('../img/sokoban/crate_target.png') !important;
  background-size: 70% 70% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- Guia pedagogica: fondos solidos --- */
.fonolee-guide-banner     { background: #FFF3C4 !important; }
.fonolee-current-level    { background: #F0ECFF !important; }

/* --- Translate target: solido --- */
.fonolee-english-translate-target { background: #FFF3C4 !important; }

/* --- Boxes y shadows mas suaves (menos ruido visual) --- */
.fonolee-stage {
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}
.fonolee-child-card {
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}
.fonolee-hub-card {
  box-shadow: 0 6px 16px rgba(0,0,0,.1) !important;
}

/* --- Bordes mas gruesos y redondeados para niños --- */
.fonolee-option {
  border-width: 4px !important;
  border-radius: clamp(14px, 3vh, 24px) !important;
}
.fonolee-fill-slot {
  border-width: 3px !important;
  border-radius: clamp(10px, 2vh, 14px) !important;
}

/* --- Feedback text mas grande y colorido --- */
.fonolee-feedback {
  font-weight: 800;
}

/* --- Fix juegos fullscreen (position:fixed) para que usen dvh --- */
.fonolee-flappy,
.fonolee-angry,
.fonolee-steal {
  height: 100vh;
  height: 100dvh;     /* descuenta barra del navegador en móvil */
}
.fonolee-flappy .fonolee-flappy-canvas,
.fonolee-angry .fonolee-angry-canvas {
  height: calc(100vh - 70px);
  height: calc(100dvh - 70px);
}

/* ============================================================
   CELULARES (≤480px): escala los componentes de juego pensados
   para tablet, para que quepan y se vean bien en pantallas chicas.
   ============================================================ */
@media (max-width: 480px) {
  .fonolee-stage       { padding: .55rem; gap: .5rem; }
  .fonolee-prompt      { font-size: 1.05rem; margin: .3rem 0 .5rem; }
  .fonolee-prompt-text { font-size: 1.02rem; }
  .fonolee-feedback    { font-size: 1.4rem; min-height: 1.8rem; }
  .fonolee-play-big-btn { font-size: 2.1rem; padding: .8rem 1.6rem; }

  .fonolee-options  { gap: .65rem; }
  .fonolee-option   { font-size: 2.4rem; min-height: 84px; }

  .fonolee-letter-display { font-size: 4.8rem; }

  .fonolee-syllable-slots { gap: .5rem; }
  .fonolee-slot { width: 58px; height: 70px; font-size: 2.2rem; }
  .fonolee-pool { gap: .45rem; }
  .fonolee-chip { font-size: 1.65rem; padding: .3rem .9rem; }

  .fonolee-phono-emoji            { font-size: 4.2rem; }
  .fonolee-phono-emoji img.emoji  { width: 4.2rem; height: 4.2rem; }
  .fonolee-fill-emoji             { font-size: 3.4rem; }

  .fonolee-hub-grid    { gap: .7rem; }
  .fonolee-hub-card h3 { font-size: 1.05rem; }
  .fonolee-hub-card p  { font-size: .8rem; }
}

/* ============================================
   Prompt con botón de repetir (P1.1)
   ============================================ */
.fonolee-prompt {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; flex-wrap: wrap;
  margin: .5rem 0 .8rem;
}
.fonolee-prompt-text {
  font-size: 1.2rem; font-weight: 600;
  color: var(--fonolee-dark);
  text-align: center;
}
.fonolee-prompt-replay {
  border: none;
  background: rgba(30, 122, 232, .12);
  color: var(--fonolee-primary);
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer;
  transition: transform .15s, background .15s;
}
.fonolee-prompt-replay:hover,
.fonolee-prompt-replay:active {
  background: rgba(30, 122, 232, .25);
  transform: scale(1.1);
}

/* Pista visual tras 2 errores (P1.4) */
.fonolee-hint-flash {
  animation: fonolee-hint-pulse 0.6s ease-in-out 3;
  box-shadow: 0 0 0 4px #FFD93C, 0 0 20px #FFD93C !important;
  position: relative; z-index: 2;
}
@keyframes fonolee-hint-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ============================================
   Onboarding (P1.2)
   ============================================ */
.fonolee-onboarding {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1rem; min-height: 0;
}
.fonolee-onb-step {
  display: none;
  flex-direction: column; align-items: center;
  text-align: center;
  max-width: 500px; width: 100%;
  animation: fonolee-onb-in .4s ease;
}
.fonolee-onb-step.active { display: flex; }
@keyframes fonolee-onb-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fonolee-onb-mascot {
  font-size: 6rem; line-height: 1;
  margin-bottom: 1rem;
  animation: fonolee-mascot-bounce 2s ease-in-out infinite;
}
@keyframes fonolee-mascot-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.fonolee-onb-title {
  font-size: 2.2rem; font-weight: 800;
  color: var(--fonolee-primary);
  margin-bottom: 1rem;
}
.fonolee-onb-text {
  font-size: 1.2rem;
  color: var(--fonolee-dark);
  margin-bottom: 1rem;
}
.fonolee-onb-icon {
  display: inline-block;
  background: rgba(30, 122, 232, .15);
  padding: .2rem .6rem; border-radius: 999px;
}
.fonolee-onb-next,
.fonolee-onb-done,
.fonolee-onb-start {
  font-size: 1.4rem; padding: .8rem 2rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(30, 122, 232, .25);
  margin-top: 1rem;
}
.fonolee-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: .6rem;
  max-width: 480px; width: 100%;
  margin: 1rem auto;
}
.fonolee-diag-letter {
  font-size: 2rem; font-weight: 800;
  background: #fff;
  border: 3px solid #e9e5ff;
  border-radius: 14px;
  padding: .4rem;
  aspect-ratio: 1;
  color: var(--fonolee-dark);
  cursor: pointer;
  transition: all .15s;
}
.fonolee-diag-letter.selected {
  background: var(--fonolee-primary);
  color: #fff;
  border-color: var(--fonolee-primary);
  box-shadow: 0 4px 14px rgba(30, 122, 232, .35);
}
.fonolee-onb-actions {
  display: flex; flex-direction: column; align-items: center;
  gap: .3rem; margin-top: 1rem;
}

/* ============================================
   Mapa de ruta (P2.1)
   ============================================ */
.fonolee-map-page,
.fonolee-album-page,
.fonolee-story-page {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  background: var(--fonolee-bg);
}
.fonolee-map-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem; gap: .5rem;
  background: var(--fonolee-primary);
  color: #fff; flex-shrink: 0;
}
.fonolee-map-header .btn { font-weight: 600; }
.fonolee-map-title {
  margin: 0; display: flex; align-items: center; gap: .5rem;
  font-size: 1.2rem;
}
.fonolee-map {
  padding: 1.5rem 1rem; max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch;
}
.fonolee-map-step {
  display: flex; align-items: center; gap: 1rem;
  background: #fff;
  border: 3px solid var(--step-color, var(--fonolee-primary));
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .15s;
}
.fonolee-map-step-locked {
  opacity: .5;
  filter: grayscale(.6);
}
.fonolee-map-step-done {
  background: linear-gradient(135deg, #E8F8EA, #fff);
}
.fonolee-map-step-current {
  animation: fonolee-pulse-ready 2s ease-in-out infinite;
}
/* Niveles jugables: el paso es un enlace tocable */
a.fonolee-map-step-playable {
  text-decoration: none; color: inherit; cursor: pointer;
}
a.fonolee-map-step-playable:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
a.fonolee-map-step-playable:active { transform: translateY(0); }
.fonolee-map-cta {
  margin-top: .55rem;
  display: inline-block;
  font-weight: 800; font-size: .92rem;
  color: var(--step-color);
}
.fonolee-map-step-locked .fonolee-map-cta { color: #999; }
.fonolee-map-dot {
  font-size: 2.5rem; line-height: 1;
  background: var(--step-color); color: #fff;
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.fonolee-map-body { flex: 1; min-width: 0; }
.fonolee-map-name {
  font-size: 1.2rem; font-weight: 700;
  color: var(--fonolee-dark);
  display: flex; align-items: center; gap: .5rem;
}
.fonolee-map-num {
  background: var(--step-color); color: #fff;
  padding: .1rem .5rem; border-radius: 6px;
  font-size: .85rem;
}
.fonolee-map-stats {
  font-size: .9rem; color: #666; margin-top: .2rem;
}
.fonolee-map-progress {
  height: 10px; background: #eee; border-radius: 999px;
  margin-top: .5rem; overflow: hidden;
}
.fonolee-map-progress-fill {
  height: 100%;
  background: var(--step-color);
  transition: width .4s;
}
.fonolee-map-conn {
  width: 4px; height: 26px;
  background: #ddd;
  margin: 0 auto;
  border-radius: 2px;
}
.fonolee-map-loading {
  text-align: center; padding: 2rem; color: #888;
}

/* ============================================
   Álbum de palabras (P2.4)
   ============================================ */
.fonolee-album {
  padding: 1rem; max-width: 900px; margin: 0 auto;
}
.fonolee-album-section { margin-bottom: 1.5rem; }
.fonolee-album-stage {
  font-size: 1.2rem; color: var(--fonolee-primary);
  padding-bottom: .4rem; border-bottom: 2px dashed #e9e5ff;
  margin-bottom: 1rem;
}
.fonolee-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .8rem;
}
.fonolee-album-card {
  background: #fff; border: none;
  border-radius: 18px;
  padding: .8rem .4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  text-align: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.fonolee-album-card:hover,
.fonolee-album-card:active {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30, 122, 232, .25);
}
.fonolee-album-emoji { font-size: 2.4rem; }
.fonolee-album-word {
  font-size: 1rem; font-weight: 700;
  color: var(--fonolee-dark);
  margin-top: .2rem;
}
.fonolee-album-stars {
  font-size: .8rem; margin-top: .2rem;
}

/* ============================================
   Cuentos + karaoke (P3.3)
   ============================================ */
.fonolee-story-list { padding: 1rem; max-width: 900px; margin: 0 auto; width: 100%; }
.fonolee-story-section { margin-bottom: 1.5rem; }
.fonolee-story-stage {
  font-size: 1.2rem; color: var(--fonolee-primary);
  padding-bottom: .4rem; border-bottom: 2px dashed #e9e5ff;
  margin-bottom: 1rem;
}
.fonolee-story-intro { margin-bottom: .5rem; }
.fonolee-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.fonolee-story-card {
  background: #fff; border: 3px solid #e9e5ff;
  border-radius: 20px; padding: 1rem .6rem;
  cursor: pointer; text-align: center;
  transition: all .15s;
}
.fonolee-story-card:hover,
.fonolee-story-card:active {
  border-color: var(--fonolee-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(30, 122, 232, .2);
}
.fonolee-story-emoji { font-size: 3rem; line-height: 1; }
.fonolee-story-title {
  font-weight: 700; color: var(--fonolee-dark);
  margin-top: .4rem;
}
.fonolee-story-sub { font-size: .85rem; color: #888; }

.fonolee-story-reader {
  padding: 1rem; max-width: 700px; margin: 0 auto; width: 100%;
}
.fonolee-story-reader-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0 1rem; gap: .5rem;
}
.fonolee-story-reader-title {
  font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; gap: .4rem;
}
.fonolee-story-content {
  background: #fff; border-radius: 20px;
  padding: 1.5rem 1.2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  margin-bottom: 1rem;
}
.fonolee-story-line {
  font-size: 1.7rem; line-height: 1.9;
  color: var(--fonolee-dark);
  margin-bottom: .3rem;
  padding: .3rem .5rem; border-radius: 10px;
  transition: background .3s;
}
.fonolee-story-line.active {
  background: #FFF7D6;
}
.fonolee-story-word {
  display: inline-block;
  padding: 0 .1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.fonolee-story-word.active {
  background: var(--fonolee-accent);
  color: #000; font-weight: 700;
  transform: scale(1.08);
}
.fonolee-story-controls {
  display: flex; justify-content: center; gap: .5rem;
  flex-wrap: wrap;
}

/* Preguntas de comprensión */
.fonolee-quiz {
  margin-top: 2rem;
  animation: fonolee-fade-in .4s ease;
}
.fonolee-quiz-title {
  font-size: 1.4rem;
  text-align: center;
  color: var(--fonolee-primary);
  margin-bottom: 1rem;
}
.fonolee-quiz-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(30, 122, 232, .12);
  text-align: center;
  margin-bottom: 1rem;
}
.fonolee-quiz-counter {
  font-size: .9rem;
  color: #888;
  margin-bottom: .5rem;
}
.fonolee-quiz-question {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--fonolee-dark);
  margin-bottom: 1rem;
}
.fonolee-quiz-replay {
  background: rgba(30, 122, 232, .1);
  border: none;
  border-radius: 999px;
  padding: .5rem 1.2rem;
  color: var(--fonolee-primary);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1rem;
}
.fonolee-quiz-replay:hover { background: rgba(30, 122, 232, .2); }
.fonolee-quiz-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 1rem;
}
.fonolee-quiz-option {
  background: #F7F5FF;
  border: 3px solid transparent;
  border-radius: 16px;
  padding: 1rem .5rem;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  transition: all .15s;
}
.fonolee-quiz-option:hover:not(.done) {
  border-color: var(--fonolee-primary);
  transform: translateY(-3px);
}
.fonolee-quiz-option.done { cursor: default; }
.fonolee-quiz-option.correct {
  background: #D8F8DF;
  border-color: var(--fonolee-ok);
  animation: fonolee-hint-pulse .5s ease 2;
}
.fonolee-quiz-option.wrong {
  background: #FFE0E0;
  border-color: var(--fonolee-err);
}
.fonolee-quiz-emoji { font-size: 2.5rem; line-height: 1; }
.fonolee-quiz-label { font-weight: 700; font-size: .9rem; color: var(--fonolee-dark); }
.fonolee-quiz-result {
  text-align: center;
  background: linear-gradient(135deg, #fff 0%, #F7F5FF 100%);
}

/* ============================================
   Sight words (palabras rápidas)
   ============================================ */
.fonolee-sw-page {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--fonolee-bg);
  min-height: 100%;
  overflow-y: auto;
}
.fonolee-sw-intro {
  text-align: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(180deg, #fff 0%, #F7F5FF 100%);
}
.fonolee-sw-stage {
  padding: 2rem 1rem;
  max-width: 520px; margin: 0 auto;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  width: 100%;
}
.fonolee-sw-counter {
  background: rgba(30, 122, 232, .15);
  color: var(--fonolee-primary);
  padding: .3rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
}
.fonolee-sw-speaker {
  width: 100px; height: 100px;
  border-radius: 30px;
  background: linear-gradient(135deg, #1E7AE8 0%, #4A93F0 100%);
  color: #fff;
  border: none;
  font-size: 2.4rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(30, 122, 232, .4);
  animation: fonolee-v2-pulse 2s ease-in-out infinite;
}
.fonolee-sw-prompt {
  font-size: 1.1rem;
  color: var(--fonolee-dark);
  font-weight: 600;
}
.fonolee-sw-options {
  display: flex; gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.fonolee-sw-option {
  min-width: 110px;
  padding: 1.3rem 1.5rem;
  background: #fff;
  border: 4px solid #E3DDFF;
  border-radius: 20px;
  color: var(--fonolee-dark);
  font-size: 1.8rem; font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.fonolee-sw-option:hover,
.fonolee-sw-option:active {
  border-color: var(--fonolee-primary);
  transform: translateY(-3px);
}
.fonolee-sw-option.correct {
  background: #D8F8DF;
  border-color: var(--fonolee-ok);
  color: var(--fonolee-ok);
}
.fonolee-sw-option.wrong {
  background: #FFE0E0;
  border-color: var(--fonolee-err);
  animation: fonolee-v2-shake .4s ease;
}
.fonolee-sw-toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: #fff;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  opacity: 0;
  transition: all .25s;
  pointer-events: none;
  z-index: 100;
}
.fonolee-sw-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.fonolee-sw-toast.good { background: #D8F8DF; color: var(--fonolee-ok); }
.fonolee-sw-toast.bad  { background: #FFE0E0; color: var(--fonolee-err); }
.fonolee-sw-result {
  text-align: center;
  padding: 2rem;
}

/* ============================================
   Overlay "Toca para empezar" (desbloquea autoplay)
   ============================================ */
.fonolee-start-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 122, 232, .92);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .3s;
}
.fonolee-start-overlay.fade-out { opacity: 0; pointer-events: none; }
.fonolee-start-card {
  background: #fff; color: var(--fonolee-dark);
  border-radius: 28px;
  padding: 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-width: 380px; width: 90%;
  animation: fonolee-onb-in .35s ease;
}
.fonolee-start-mascot {
  font-size: 4.5rem;
  animation: fonolee-mascot-bounce 2s ease-in-out infinite;
}
.fonolee-start-title {
  color: var(--fonolee-primary);
  font-weight: 800;
  margin: .4rem 0;
}
.fonolee-start-text {
  font-size: 1.1rem; color: #666;
  margin-bottom: 1rem;
}
.fonolee-start-btn {
  font-size: 1.4rem; font-weight: 700;
  padding: .8rem 2rem;
  box-shadow: 0 6px 20px rgba(255, 193, 7, .4);
}
.fonolee-preload-bar {
  margin-top: 1rem;
  height: 12px;
  background: #EEE8FF;
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}
.fonolee-preload-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1E7AE8, #FFD93C);
  transition: width .3s ease;
}
.fonolee-preload-caption {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--fonolee-primary);
  font-weight: 600;
}

/* ============================================
   Traza la letra (P3.1)
   ============================================ */
.fonolee-trace-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: .8rem;
  margin: 1rem 0;
}
.fonolee-trace-canvas {
  background: #fff;
  border: 3px dashed var(--fonolee-primary);
  border-radius: 24px;
  touch-action: none;
  max-width: 90vw;
  cursor: crosshair;
}
.fonolee-trace-progress {
  font-size: 1.1rem; font-weight: 600;
  color: var(--fonolee-primary);
}