body{
  background-color: black;
  color: aliceblue;
  font-family: Arial, Helvetica, sans-serif;
  position: relative; /* Añade esto para que los emojis absolutos se posicionen correctamente dentro del body */
  min-height: 100vh; /* Asegura que el body tenga altura para que los emojis puedan caer */
  overflow-x: hidden; /* Evita barras de desplazamiento horizontales si un emoji aparece muy a la derecha */
}
button{
  height: 50px;
  width: 75px;
}
/* Animación de glitch completa y agresiva */
@keyframes glitchEffect {
  0% {
    text-shadow: 2px 2px 0px red, -2px -2px 0px blue; /* Desplazamiento de canales de color */
    filter: hue-rotate(0deg) brightness(1);
    clip-path: inset(0 0 0 0); /* No hay recorte */
  }
  20% {
    text-shadow: -4px -4px 0px cyan, 4px 4px 0px magenta;
    filter: hue-rotate(120deg) brightness(1.2);
    clip-path: inset(10% 0 10% 0); /* Recorte superior e inferior */
  }
  40% {
    text-shadow: 6px 6px 0px lime, -6px -6px 0px purple;
    filter: hue-rotate(240deg) brightness(0.8);
    clip-path: inset(30% 0 30% 0); /* Recorte más agresivo */
  }
  60% {
    text-shadow: -3px -3px 0px orange, 3px 3px 0px navy;
    filter: hue-rotate(300deg) brightness(1.1);
    clip-path: inset(5% 0 5% 0); /* Recorte leve */
  }
  80% {
    text-shadow: 5px 5px 0px yellow, -5px -5px 0px darkgreen;
    filter: hue-rotate(60deg) brightness(0.9);
    clip-path: inset(20% 0 20% 0); /* Otro recorte */
  }
  100% {
    transform: translateX(0) skewX(0deg); /* No usa transform para no mover el elemento base */
    text-shadow: 2px 2px 0px red, -2px -2px 0px blue;
    filter: hue-rotate(0deg) brightness(1);
    clip-path: inset(0 0 0 0); /* Vuelve al estado normal */
  }
}
.glitch-mode-active h1,
.glitch-mode-active #button-wrapper button { /* Aplica a los botones y al h1 en modo activo */
  animation: glitchEffect 0.3s linear infinite alternate;
}

.transient-glitch { /* Para el glitch momentáneo en el body */
  animation: glitchEffect 0.3s ease-out forwards;
}

.button-transient-glitch { /* Para el glitch momentáneo en el botón clickeado */
  animation: glitchEffect 0.3s ease-out forwards;
}
/* Estilos para los emojis que caen */
.falling-emoji {
  position: absolute; /* Permite posicionamiento libre */
  top: -50px; /* Empieza por encima de la pantalla */
  font-size: 2em; /* Tamaño base, puede ser sobrescrito por JS */
  opacity: 1;
  pointer-events: none; /* Ignorar eventos de ratón */
  animation: fall 3s ease-in forwards; /* Animación de caída */
  z-index: 9999; /* Asegura que estén por encima de otros elementos */
}

@keyframes fall {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) scale(0.5); /* Cae hasta el final de la pantalla y se encoge */
    opacity: 0; /* Se desvanece al caer */
  }
}

/* Estilos para resaltar el botón objetivo en modo glitch */
.glitch-target-highlight {
  /* Puedes elegir cómo quieres que se vea resaltado */
  border: 3px solid cyan; /* Un borde brillante */
  box-shadow: 0 0 15px cyan, 0 0 25px cyan; /* Una sombra de resplandor */
  transform: scale(1.1); /* Ligeramente más grande */
  transition: all 0.1s ease-in-out; /* Transición suave para el cambio */
}