/* styles.css */

/* Fuentes personalizadas */
.font-fredoka {
    font-family: 'Fredoka', sans-serif;
}

/* Animación de salto para las letras al acertar */
@keyframes letterPop {
    0% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.4) translateY(-10px); text-shadow: 0 0 15px rgba(16, 185, 129, 0.8); }
    80% { transform: scale(0.9) translateY(2px); }
    100% { transform: scale(1) translateY(0); }
}

.letter-pop {
    animation: letterPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Efecto neón para el SVG del ahorcado */
.hangman-drawing svg path,
.hangman-drawing svg line,
.hangman-drawing svg circle {
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

.hangman-neon-base {
    stroke: #a5b4fc; /* Indigo 300 */
    filter: drop-shadow(0 0 8px #6366f1); /* Indigo 500 glow */
}

.hangman-neon-lose {
    stroke: #fda4af; /* Rose 300 */
    filter: drop-shadow(0 0 10px #f43f5e); /* Rose 500 glow */
}

/* Animación de revelación al perder */
.reveal-lost {
    animation: fadeInShake 0.8s ease;
}

@keyframes fadeInShake {
    0% { opacity: 0; transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    40% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    80% { transform: translateX(-1px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Animación de temblor para el contenedor principal al perder */
.shake-container {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Utilidad para degradados de texto */
.text-gradient-to-r {
    -webkit-background-clip: text;
    background-clip: text;
}