/* ==========================================================================
   Pequeños Exploradores — estilos
   Diseño para niños de 2 años: colores vivos, botones enormes,
   animaciones suaves, cero texto complejo.
   ========================================================================== */

:root {
  --rojo:     #FF5252;
  --azul:     #448AFF;
  --amarillo: #FFD740;
  --verde:    #69F0AE;
  --naranja:  #FFAB40;
  --morado:   #B388FF;
  --rosa:     #FF80AB;
  --turquesa: #4ECDC4;
  --crema:    #FFF9E6;
  --sombra:   0 8px 0 rgba(0, 0, 0, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;          /* evita zoom con doble toque */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  font-family: "Comic Sans MS", "Chalkboard SE", "Baloo 2", system-ui, sans-serif;
}

body {
  background: linear-gradient(180deg, #AEE9FF 0%, #FFF9E6 70%, #C8F7C5 100%);
}

/* ---------- Pantalla de inicio ---------- */

.start-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--turquesa), var(--azul));
}

.start-card {
  text-align: center;
  background: #fff;
  border-radius: 48px;
  padding: 6vmin 10vmin;
  box-shadow: var(--sombra);
}

.start-emoji { font-size: 20vmin; line-height: 1; }

.start-title {
  color: #444;
  font-size: 5vmin;
  margin: 2vmin 0 4vmin;
}

.btn-start {
  width: 24vmin; height: 24vmin;
  min-width: 96px; min-height: 96px;
  border: none; border-radius: 50%;
  background: var(--verde);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.15s ease;
  animation: pulse 1.6s ease-in-out infinite;
}
.btn-start:active { transform: scale(0.92); }

.play-icon { font-size: 10vmin; color: #fff; margin-left: 1vmin; }

/* ---------- Layout general ---------- */

.app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3vmin;
  padding: 4vmin;
}

.home-btn {
  position: fixed; top: 2vmin; left: 2vmin; z-index: 40;
  width: 14vmin; height: 14vmin;
  min-width: 64px; min-height: 64px;
  font-size: 7vmin;
  border: none; border-radius: 50%;
  background: #fff;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.home-btn:active { transform: scale(0.9); }

/* ---------- Menú principal ---------- */

.menu-title { font-size: 6vmin; color: #555; }

.menu-grid {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 5vmin;
}

.menu-card {
  width: 34vmin; height: 34vmin;
  min-width: 130px; min-height: 130px;
  border: none; border-radius: 36px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1vmin;
  font-size: 15vmin;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.menu-card:active { transform: scale(0.93); }
.menu-card.c-rojo     { background: var(--rojo); }
.menu-card.c-azul     { background: var(--azul); }
.menu-card.c-amarillo { background: var(--amarillo); }
.menu-card.c-verde    { background: var(--verde); }

/* ---------- Juego: animales ---------- */

.animal-grid {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 5vmin;
}

.animal-btn {
  width: 36vmin; height: 36vmin;
  min-width: 120px; min-height: 120px;
  border: 1.2vmin solid rgba(255,255,255,0.9);
  border-radius: 40px;
  font-size: 22vmin;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.2s ease;
  animation: float 3.5s ease-in-out infinite;
}
.animal-btn:nth-child(2) { animation-delay: 0.7s; }
.animal-btn:nth-child(3) { animation-delay: 1.4s; }
.animal-btn:nth-child(4) { animation-delay: 2.1s; }
.animal-btn:active { transform: scale(0.9); }
.animal-btn.talking { animation: bounce 0.5s ease infinite; }

/* ---------- Juego: formas y colores ---------- */

.shapes-board {
  display: flex; flex-direction: column;
  align-items: center; gap: 8vmin;
  width: 100%;
}

.shape-slots, .shape-pieces {
  display: flex; align-items: center; justify-content: center;
  gap: 7vmin; width: 100%;
}

.shape-slot {
  width: 24vmin; height: 24vmin;
  min-width: 90px; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
}
.shape-slot svg { width: 100%; height: 100%; }
.shape-slot.filled svg .outline { stroke: transparent; }

.shape-piece {
  width: 22vmin; height: 22vmin;
  min-width: 84px; min-height: 84px;
  touch-action: none;
  cursor: grab;
  transition: transform 0.15s ease;
  animation: pulse 2.5s ease-in-out infinite;
}
.shape-piece svg { width: 100%; height: 100%; pointer-events: none; }
.shape-piece.dragging {
  position: fixed; z-index: 60;
  animation: none;
  transform: scale(1.15);
  cursor: grabbing;
}
.shape-piece.placed { animation: none; opacity: 0; pointer-events: none; }

/* ---------- Juego: números ---------- */

.numbers-stage {
  display: flex; flex-direction: column;
  align-items: center; gap: 6vmin;
}

.big-number {
  font-size: 24vmin;
  font-weight: bold;
  color: var(--azul);
  text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
  animation: pulse 2s ease-in-out infinite;
}

.count-row {
  display: flex; align-items: center; justify-content: center;
  gap: 5vmin;
}

.count-item {
  width: 26vmin; height: 26vmin;
  min-width: 96px; min-height: 96px;
  border: none; border-radius: 50%;
  background: #fff;
  font-size: 16vmin;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.2s ease;
  animation: float 3s ease-in-out infinite;
}
.count-item:nth-child(2) { animation-delay: 0.5s; }
.count-item:nth-child(3) { animation-delay: 1s; }
.count-item:active { transform: scale(0.88); }
.count-item.counted {
  background: var(--verde);
  animation: bounce 0.6s ease;
}

/* ---------- Celebración ---------- */

.celebration { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }

.confetti {
  position: absolute; top: -8vmin;
  font-size: 6vmin;
  animation: fall linear forwards;
}

/* ---------- Animaciones ---------- */

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5vmin); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-4vmin) scale(1.08); }
}

@keyframes wiggle-kf {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.wiggle { animation: wiggle-kf 2.4s ease-in-out infinite; }

@keyframes fall {
  to { transform: translateY(115vh) rotate(540deg); opacity: 0.8; }
}

@keyframes pop-kf {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop-kf 0.45s ease forwards; }

/* Reduce motion si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}