/*
 * 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; }

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;
}

/* --- 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; left: 0; right: 0;
  height: 12vmin;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 2vmin 4vmin;
}
.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;
}
.progress { display: -webkit-box; display: flex; }
.progress__dot {
  width: 2.4vmin; height: 2.4vmin;
  border-radius: 50%;
  background: #c5dbf0;
  margin-left: 1.4vmin;
}
.progress__dot.is-done { background: #69c779; }
.progress__dot.is-current { background: #3aa0ff; }

/* --- Imagen (emoji) + palabra modelo --- */
.prompt {
  text-align: center;
  margin-bottom: 3vmin;
}
.emoji {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 26vmin;
  line-height: 1;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}
.emoji:active { -webkit-transform: scale(0.94); transform: scale(0.94); }
.model-word {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin-top: 2vmin;
}
.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;
}

/* --- Banco de letras --- */
.letter-bank {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-lines: multiple;
  flex-wrap: wrap;
  max-width: 90vmin;
}
.letter {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 16vmin;
  height: 16vmin;
  margin: 1.4vmin;
  border-radius: 20px;
  background: #ffd166;       /* amarillo cálido y alegre */
  color: #5c3d00;
  font-size: 9vmin;
  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;
}

/* --- 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 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; }
}