/*
 * Estilos de "Las palabras de Santi".
 *
 * Principios de diseño para un niño de 5 años con TEA:
 *  - Targets MUY grandes (fáciles de tocar con el dedo).
 *  - Colores calmados, alto contraste, fondo claro y sereno.
 *  - Sin elementos que distraigan ni que lo saquen de la pantalla.
 *  - Animaciones suaves y predecibles, nunca bruscas.
 *
 * Nota: se evitan funciones de CSS demasiado nuevas para que funcione
 * en el WebKit de iOS 10 (iPad 4). Se usan prefijos -webkit- donde toca.
 */

* { box-sizing: border-box; }

/* Quita el retardo de 300ms y el zoom por doble toque en iOS: respuesta
   inmediata al tocar, clave para que Santi sienta que reacciona. */
button {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* sin flash gris al tocar */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;               /* sin menú al mantener pulsado */
  overflow: hidden;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: #eaf4ff; /* azul muy suave y calmado */
  color: #243b53;
}

#app { height: 100%; width: 100%; position: relative; }

/* --- Pantallas --- */
.screen {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.is-active { display: -webkit-box; display: flex; }

/* --- Inicio --- */
.home-title {
  font-size: 8vmin;
  margin: 0 0 6vmin 0;
  text-align: center;
  color: #2a6fb0;
  padding: 0 6vmin;
}

.home-subtitle {
  font-size: 5vmin;
  margin: 0 0 5vmin 0;
  color: #5b7896;
  text-align: center;
}

/* --- Botones de categoría en el inicio --- */
.category-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-lines: multiple;
  flex-wrap: wrap;
  max-width: 92vmin;
}
.category {
  -webkit-appearance: none;
  appearance: none;
  border: 5px solid transparent;
  border-radius: 28px;
  background: #fff;
  color: #2a6fb0;
  width: 34vmin;
  height: 34vmin;
  margin: 2vmin;
  box-shadow: 0 6px 0 #c5dbf0;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.category:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0 2px 0 #c5dbf0; }
.category__emoji { font-size: 16vmin; line-height: 1; }
.category__name { font-size: 5vmin; font-weight: 700; margin-top: 1.5vmin; }
/* Resaltado al navegar con el teclado (flechas) */
.category.is-focus {
  border-color: #3aa0ff;
  background: #eaf4ff;
}

/* Menú principal: 2 filas de 3. En una sola fila los 6 botones quedaban
   diminutos (108px); así caben a 28vmin (~215px), el doble de grandes.
   96vmin = exactamente 3 por fila (3 x 32vmin); el 4º no cabe (128vmin). */
#menu-list {
  -webkit-box-lines: multiple;
  flex-wrap: wrap;
  max-width: 96vmin;
}
#menu-list .category {
  width: 28vmin;
  height: 28vmin;
  margin: 2vmin;
}
#menu-list .category__emoji { font-size: 13vmin; }
#menu-list .category__name { font-size: 4vmin; margin-top: 1.2vmin; }

/* En la sección Escribir hay varias categorías: más pequeñas para que entren
   todas (incluida "Todas") en un máximo de 2 filas. */
#category-list .category {
  width: 24vmin;
  height: 24vmin;
  margin: 1.4vmin;
}
#category-list .category__emoji { font-size: 11vmin; }
#category-list .category__name { font-size: 3.4vmin; margin-top: 1vmin; }

/* Sílabas tiene 8 categorías: 2 filas de 4 (arriba los silabarios, abajo las
   palabras de cada grupo). 96vmin = exactamente 4 por fila (4 x 24vmin);
   la quinta no cabe (120vmin), así que la rejilla no se descuadra. */
#category-list.is-silabas { max-width: 96vmin; }
#category-list.is-silabas .category {
  width: 21vmin;
  height: 21vmin;
  margin: 1.5vmin;
}
#category-list.is-silabas .category__emoji { font-size: 9vmin; }
#category-list.is-silabas .category__name { font-size: 2.6vmin; margin-top: 0.8vmin; }


/* --- Botones de esquina: ⬅️ (volver al menú) y 🏠 (volver a las categorías) ---
   Comparten UNA SOLA regla para que estén en el MISMO sitio exacto en todas
   las pantallas. Antes el 🏠 vivía dentro de una cabecera de 12vmin siendo él
   de 13vmin: no cabía y acababa en top:-4px, 27px más arriba que el ⬅️. */
.back-button,
.icon-button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: rgba(255,255,255,0.7);
  border-radius: 20px;
  font-size: 6vmin;
  width: 13vmin;
  height: 13vmin;
  cursor: pointer;
  position: absolute;
  top: 3vmin;
  left: 4vmin;
  z-index: 2;
}

/* --- Sección LEER: la palabra arriba, dos dibujos para elegir --- */
/* La palabra ocupa el sitio que en Escribir ocupa el dibujo: es el estímulo.
   Tamaño FIJO, mandado por la palabra más larga ("diecinueve", 10 letras),
   igual que las letras del juego de escribir: así no cambia de una palabra a
   otra y la pantalla no se mueve. Medido con el iPad en VERTICAL, que es donde
   menos sitio hay: a 12vmin ocupa 686px de los 722 disponibles; a 13vmin ya se
   salía. */
.read-word {
  font-size: 12vmin;
  font-weight: 700;
  color: #243b53;
  text-transform: uppercase;
  letter-spacing: 0.8vmin;
  text-align: center;
  padding: 0 4vmin;
  margin-bottom: 4vmin;
  white-space: nowrap;
}
.read-options {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}
/* 4 opciones en una fila: 4 x 22.4vmin = 89.6vmin, por debajo de los 100vmin
   del lado corto, así que entra igual en horizontal y en vertical.
   20vmin son ~154px en el iPad: el doble de grande que las letras del juego
   de escribir. */
.read-option {
  -webkit-appearance: none;
  appearance: none;
  border: 5px solid transparent;
  border-radius: 28px;
  background: #fff;
  width: 20vmin;
  height: 20vmin;
  margin: 0 1.2vmin;
  box-shadow: 0 6px 0 #c5dbf0;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.read-option:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0 2px 0 #c5dbf0; }
.read-option__emoji { font-size: 12vmin; line-height: 1; }
.read-option__swatch {
  display: block;
  width: 13vmin;
  height: 13vmin;
  border-radius: 50%;
  border: 0.8vmin solid rgba(0,0,0,0.15);
}
.read-option.is-right { border-color: #69c779; background: #eafbee; }
.read-option.is-focus { border-color: #3aa0ff; }
.read-option.is-nudge {
  -webkit-animation: nudge 0.35s ease;
  animation: nudge 0.35s ease;
}

/* --- Sección SÍLABAS: el silabario --- */
.sil-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-lines: multiple;
  flex-wrap: wrap;
  align-content: center;
  /* 98vmin = exactamente 5 sílabas por fila (5 x 19.4vmin = 97vmin): una
     columna por vocal, como en el silabario de toda la vida. */
  max-width: 98vmin;
  /* Alto FIJO de 3 filas: así "Vocales" (1 fila) y los grupos (3 filas) dejan
     la pantalla exactamente igual, sin saltos al cambiar de grupo. */
  height: 60vmin;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.sil-item {
  -webkit-appearance: none;
  appearance: none;
  border: 4px solid transparent;
  border-radius: 20px;
  background: #fff;
  color: #243b53;
  width: 17vmin;
  height: 17vmin;
  margin: 1.2vmin;
  box-shadow: 0 5px 0 rgba(0,0,0,0.12);
  cursor: pointer;
  font-size: 7vmin;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3vmin;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.sil-item:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.sil-item.is-focus { border-color: #3aa0ff; }
/* Un color por consonante: ayuda a "leer" el silabario por filas. */
.sil-item.sil-c0 { background: #ffe39a; }
.sil-item.sil-c1 { background: #c7ebb0; }
.sil-item.sil-c2 { background: #bfe1f0; }
/* Se ilumina un momento al tocarla, para saber cuál sonó. */
.sil-item.is-said { border-color: #69c779; background: #eafbee; }

/* --- Sección NÚMEROS: el problema con dibujos contables --- */
.mate-problem {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-lines: single;
  flex-wrap: nowrap;
  /* Alto FIJO para 2 filas de dibujos. Sin esto, las sumas (con el signo, más
     alto) o los problemas de 2 filas empujaban la fila de números hacia abajo
     y la pantalla se movía de un problema a otro. */
  /* 36vmin: 2 filas de dibujos más la cifra de debajo. Fijo para las tres
     categorías, aunque Conjuntos no lleve cifra, para que la fila de números
     no se mueva al cambiar de tipo de problema. */
  height: 36vmin;
  margin-bottom: 4vmin;
}
/* Cada sumando: los dibujos arriba y su cifra debajo. */
.mate-bloque {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.mate-num {
  font-size: 8vmin;
  font-weight: 700;
  color: #2a6fb0;
  line-height: 1;
  margin-top: 1.5vmin;
}
/* Los dibujos se reparten en VARIAS FILAS en vez de apretarse en una sola: así
   caben mucho más grandes (10vmin en vez de 6) y además de 5 en 5 se cuentan
   mejor, como en los cuadros de diez del cole. */
.mate-group {
  display: -webkit-box;
  display: flex;
  -webkit-box-lines: multiple;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  justify-content: center;
  /* Las filas arrancan ARRIBA y el grupo mide SIEMPRE dos filas (una fila con
     sus márgenes son 10,2vmin). Sin esto, un grupo de 1 dibujo se centraba
     verticalmente y su dibujo caía en el hueco ENTRE las dos filas del otro:
     en "6 − 1" quedaba 39px más abajo, y las cifras a distinta altura. */
  -webkit-align-content: flex-start;
  align-content: flex-start;
  height: 21vmin;
}
/* Medido: cada dibujo ocupa 13.5vmin de ancho y 10,2vmin de alto, márgenes
   incluidos. */
.mate-group.is-5 { max-width: 69vmin; }   /* contar y restar: 5 por fila */
.mate-group.is-3 { max-width: 42vmin; }   /* cada sumando: 3 por fila */
/* 9vmin (~69px) es lo máximo que deja caber, en VERTICAL, un sumando de 3 +
   el signo + otro de 3 (6 x 13.5 + 8 = 89vmin de los 94 disponibles). Antes,
   con todo en una sola fila, no pasaban de 6vmin: ahora son un 50% mayores. */
.mate-item {
  font-size: 9vmin;
  line-height: 1;
  margin: 0.6vmin;
}
.mate-op {
  font-size: 9vmin;
  font-weight: 700;
  color: #2a6fb0;
  margin: 0 1.5vmin;
}
.read-option__num {
  font-size: 11vmin;
  font-weight: 700;
  color: #243b53;
}

/* --- Botón de nivel de ayuda (esquina derecha de la lista de categorías) ---
   Los puntitos son "cuánta ayuda queda": ●●● copiar ... ○○○ sin pista. */
.level-button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: rgba(255,255,255,0.7);
  border-radius: 20px;
  height: 13vmin;
  min-width: 28vmin;
  padding: 0 3vmin;
  cursor: pointer;
  position: absolute;
  top: 3vmin;
  right: 4vmin;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* Se llena mientras se mantiene pulsado: feedback de "sigue apretando". */
.level-button__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #cfe4f7;
}
.level-button.is-holding .level-button__fill {
  width: 100%;
  -webkit-transition: width 1.2s linear;
  transition: width 1.2s linear;
}
.level-button__dots {
  position: relative;
  font-size: 3.4vmin;
  letter-spacing: 0.6vmin;
  color: #3aa0ff;
  line-height: 1;
}
.level-button__name {
  position: relative;
  font-size: 2.8vmin;
  font-weight: 700;
  color: #5b7896;
  margin-top: 0.8vmin;
  white-space: nowrap;
}

/* --- Sección HABLAR: tablero de comunicación --- */
.aac-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-lines: multiple;
  flex-wrap: wrap;
  /* 92vmin = exactamente 6 pictogramas por fila (6 x 15.2vmin = 91.2vmin).
     Con 24 items salen 4 filas de 6, sin huérfanos. El 7º no cabría
     (106.4vmin), así que la rejilla no se descuadra nunca. */
  max-width: 92vmin;
  -webkit-box-flex: 0;
  flex: 0 0 auto;   /* el tablero NUNCA se encoge ni se desplaza por la tira */
}
.aac-item {
  -webkit-appearance: none;
  appearance: none;
  border: 4px solid transparent;
  border-radius: 20px;
  background: #fff;
  color: #243b53;
  /* 13vmin (~100px en el iPad) para que quepan 6 por fila TAMBIÉN en
     vertical: 6 x 15.2vmin = 91.2vmin, por debajo de los 100vmin del lado
     corto de la pantalla. Sigue siendo un objetivo enorme para el dedo
     (el mínimo cómodo son ~44px). */
  width: 13vmin;
  height: 13vmin;
  margin: 1.1vmin;
  box-shadow: 0 5px 0 rgba(0,0,0,0.12);
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.aac-item:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.aac-item__emoji { font-size: 7vmin; line-height: 1; }
.aac-item__word {
  font-size: 2.3vmin;
  font-weight: 700;
  margin-top: 0.6vmin;
  white-space: nowrap;   /* "plim plim" en una sola línea */
}
.aac-item.is-focus { border-color: #3aa0ff; }

/* Colores por tipo de palabra (estándar de CAA, ayuda a "leer" el tablero) */
.aac-item.aac-persona { background: #ffe39a; } /* personas  */
.aac-item.aac-accion  { background: #c7ebb0; } /* acciones  */
.aac-item.aac-cosa    { background: #ffd3a8; } /* cosas     */
.aac-item.aac-social  { background: #f7c4d8; } /* respuestas*/
.aac-item.aac-senti   { background: #bfe1f0; } /* sentimientos */

/* --- Tira de frase (lo que Santi arma para decir) --- */
/* Alto FIJO: la tira no puede crecer. Antes crecía con cada toque hasta
   688px y empujaba el tablero fuera de la pantalla (10 de 15 pictogramas
   quedaban inalcanzables, y sin scroll porque body es overflow:hidden). */
.aac-strip {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  /* 89vmin = el ancho VISIBLE del tablero de arriba: 6 pictogramas de 13vmin
     + los 5 huecos de 2.2vmin que quedan entre ellos. Así los bordes de la
     caja caen justo debajo de los bordes de los pictogramas. */
  width: 89vmin;
  height: 15vmin;
  margin-top: 2.5vmin;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.aac-message {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  height: 15vmin;
  background: #fff;
  border: 3px solid #d7e6f5;
  border-radius: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-lines: single;
  flex-wrap: nowrap;          /* una sola fila, siempre */
  padding: 0 1.5vmin;
  margin-right: 2vmin;
  overflow: hidden;
}
.aac-message__hint { color: #9fb3c8; font-size: 3.2vmin; }
.aac-chip {
  background: #eef5fc;
  border-radius: 12px;
  margin: 0 0.4vmin;
  padding: 0.4vmin 0.7vmin;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  align-items: center;
  flex-direction: column;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.aac-chip__emoji { font-size: 5.5vmin; line-height: 1; }
.aac-chip__word {
  font-size: 2vmin;
  font-weight: 700;
  color: #243b53;
  white-space: nowrap;
}
.aac-strip__btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  /* 12vmin (92px) siguen siendo botones enormes, y dejan sitio para que los
     5 pictogramas de la frase quepan enteros incluso con "plim plim", que es
     el más ancho. */
  width: 11vmin;
  height: 11vmin;
  border-radius: 20px;
  font-size: 5.5vmin;
  cursor: pointer;
  margin-left: 1.5vmin;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.aac-strip__btn:active { -webkit-transform: translateY(3px); transform: translateY(3px); }
.aac-strip__btn--speak { background: #69c779; box-shadow: 0 5px 0 #4fa85f; }
.aac-strip__btn--clear { background: #ffd166; box-shadow: 0 4px 0 #e0ad3e; }

/* --- Botón grande (Jugar / Otra) --- */
.big-button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 28px;
  background: #3aa0ff;
  color: #fff;
  padding: 4vmin 8vmin;
  font-size: 6vmin;
  font-weight: 700;
  box-shadow: 0 6px 0 #2a78c2;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.big-button:active { -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: 0 2px 0 #2a78c2; }
.big-button__emoji { font-size: 7vmin; margin-right: 3vmin; }

/* --- Cabecera del juego --- */
.play-header {
  position: absolute;
  /* top:0 a propósito: el 🏠 de dentro se posiciona con top:3vmin RESPECTO A
     esta cabecera, así que si la cabecera también bajara 3vmin se sumarían y
     el botón quedaría 3vmin por debajo del ⬅️ de las otras pantallas.
     El alto (3 + 13 + 3 = 19vmin) centra el contador en el eje del botón. */
  top: 0; left: 0; right: 0;
  height: 19vmin;
  /* Solo lleva el contador, que no se toca. Sin esto, esta banda invisible
     tapaba los 19px de arriba de la imagen y ahí no respondía el toque. */
  pointer-events: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  padding: 0 4vmin;
}
/* Contador "⭐ 3 / 10". Antes era un puntito por palabra, pero con tandas
   largas se salían de la pantalla; un número no crece nunca. */
.progress {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(255,255,255,0.7);
  border-radius: 20px;
  padding: 1vmin 3vmin;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}
.progress__star { font-size: 5vmin; line-height: 1; margin-right: 1.5vmin; }
.progress__count {
  font-size: 4.5vmin;
  font-weight: 700;
  color: #2a6fb0;
  white-space: nowrap;
}

/* --- Imagen (emoji) + palabra modelo --- */
.prompt {
  text-align: center;
  margin-bottom: 3vmin;
}
/* Alto FIJO de 26vmin: así el emoji de texto y el círculo de color (Colores)
   ocupan EXACTAMENTE lo mismo y la pantalla no se mueve ni un píxel al cambiar
   de categoría. Sin esto, el glifo medía 202px y el círculo 200px. */
.emoji {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 26vmin;
  line-height: 1;
  cursor: pointer;
  margin: 0 auto;
  padding: 0;
  width: 26vmin;
  height: 26vmin;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.emoji:active { -webkit-transform: scale(0.94); transform: scale(0.94); }
/* Círculo de color (categoría Colores): se ve igual en cualquier iPad,
   sin depender de emojis de color que iOS 10 no tiene. */
.emoji.is-swatch {
  width: 26vmin;
  height: 26vmin;
  border-radius: 50%;
  border: 0.8vmin solid rgba(0,0,0,0.15);
}
.model-word {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 2vmin;
}
/* La palabra modelo se oculta con visibility, NUNCA con display:none: así
   conserva su hueco exacto y la pantalla se ve idéntica con pista y sin ella.
   Con display:none se recolocaría todo hacia arriba. */
.model-word__letter.is-hidden { visibility: hidden; }
/* Nivel 2: se desvanece cuando coloca la primera letra. */
.model-word.is-faded {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
/* Las sílabas se separan más que las letras, para que se vean como piezas. */
.model-word__letter.is-silaba { margin: 0 1.6vmin; }
.model-word__letter {
  font-size: 7vmin;
  font-weight: 700;
  color: #9fb3c8;       /* gris suave: es solo la guía a copiar */
  letter-spacing: 0.2vmin;
  margin: 0 0.6vmin;
  text-transform: uppercase;
}

/* --- Huecos donde se forma la palabra --- */
.slots {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-bottom: 5vmin;
}
.slot {
  width: 13vmin;
  height: 15vmin;
  margin: 0 1vmin;
  border-radius: 16px;
  background: #fff;
  border: 3px dashed #b9d2ea;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  font-size: 9vmin;
  font-weight: 700;
  color: #243b53;
  text-transform: uppercase;
}
.slot.is-filled {
  border-style: solid;
  border-color: #69c779;
  background: #eafbee;
  -webkit-animation: pop 0.25s ease;
  animation: pop 0.25s ease;
}
/* Al fallar: el hueco que toca ahora late suave. Señala DÓNDE mirar, sin
   marcar el error en rojo ni regañar. */
.slot.is-hint {
  border-color: #3aa0ff;
  -webkit-animation: hint 0.7s ease;
  animation: hint 0.7s ease;
}

/* --- Banco de letras --- */
.letter-bank {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-lines: single;
  flex-wrap: nowrap;   /* todo en una sola fila */
  width: 100%;
}
.letter {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 13vmin;
  height: 13vmin;
  margin: 1vmin;
  border-radius: 18px;
  background: #ffd166;       /* amarillo cálido y alegre */
  color: #5c3d00;
  font-size: 7vmin;
  font-weight: 700;
  box-shadow: 0 5px 0 #e0ad3e;
  cursor: pointer;
  text-transform: uppercase;
}
.letter:active { -webkit-transform: translateY(3px); transform: translateY(3px); box-shadow: 0 2px 0 #e0ad3e; }
.letter.is-used { visibility: hidden; }  /* desaparece pero mantiene el hueco */
.letter.is-nudge {
  -webkit-animation: nudge 0.35s ease;
  animation: nudge 0.35s ease;
}

/* --- Celebración --- */
.celebrate {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(234,244,255,0.92);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.celebrate.is-active { display: -webkit-box; display: flex; }
.celebrate__star {
  font-size: 40vmin;
  -webkit-animation: star 0.6s ease;
  animation: star 0.6s ease;
  margin-bottom: 4vmin;
}

/* --- Fin de la tanda --- */
.done__trophy {
  font-size: 30vmin;
  line-height: 1;
  -webkit-animation: star 0.6s ease;
  animation: star 0.6s ease;
}
.done__title {
  font-size: 7vmin;
  color: #2a6fb0;
  margin: 2vmin 0 1vmin 0;
  text-align: center;
}
.done__stars {
  font-size: 4.5vmin;
  letter-spacing: 0.4vmin;
  margin-bottom: 4vmin;
  text-align: center;
  max-width: 80vmin;
}

/* --- Animaciones suaves --- */
@-webkit-keyframes pop { 0% { -webkit-transform: scale(0.6); } 100% { -webkit-transform: scale(1); } }
@keyframes pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

@-webkit-keyframes hint {
  0%,100% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.08); }
}
@keyframes hint {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@-webkit-keyframes nudge {
  0%,100% { -webkit-transform: translateX(0); }
  25% { -webkit-transform: translateX(-2vmin); }
  75% { -webkit-transform: translateX(2vmin); }
}
@keyframes nudge {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2vmin); }
  75% { transform: translateX(2vmin); }
}

@-webkit-keyframes star {
  0% { -webkit-transform: scale(0) rotate(-30deg); opacity: 0; }
  100% { -webkit-transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes star {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}