[x-cloak] {
  display: none !important;
}

/* Pantalla de carga / Preloader */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #e0e7ff 0%, #faf5ff 50%, #fce7f3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-pulse {
  animation: preloaderPulse 1.2s ease-in-out infinite alternate;
}

@keyframes preloaderPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

body {
  font-family: 'Fredoka', cursive, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Emojis vectoriales SVG generados por Twemoji para Smart TV y cualquier pantalla */
img.emoji {
  height: 1.15em;
  width: 1.15em;
  margin: 0 0.08em;
  vertical-align: -0.16em;
  display: inline-block;
  pointer-events: none;
}

/* Emojis gigantes en feedback y celebraciones */
.emoji-wobble {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.emoji-wobble img.emoji {
  height: 1.1em;
  width: 1.1em;
  margin: 0 0.1em;
  vertical-align: -0.1em;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
}

/* En móvil (menos de 640px), solo mostrar 4 emojis para que entren perfectamente en 1 sola fila */
@media (max-width: 639px) {
  .emoji-wobble img.emoji:nth-of-type(n+5) {
    display: none !important;
  }
}

/* Animación de entrada suave y rebote para las figuras */
.shape-pop {
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animación de pulso para cuando el audio está hablando */
.speaking-pulse {
  animation: speakPulse 1s infinite alternate;
}

@keyframes speakPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 0 0 14px rgba(245, 158, 11, 0);
  }
}

/* Animación de balanceo para emojis de resultado */
.emoji-wobble {
  animation: wobble 1.2s ease-in-out infinite alternate;
}

@keyframes wobble {
  0% {
    transform: rotate(-8deg) scale(1);
  }
  100% {
    transform: rotate(8deg) scale(1.1);
  }
}