/* Rainbow Text Animation */
@keyframes pulse-rainbow {
0% { color: #f87171; text-shadow: 0 0 10px #f87171, 0 0 20px #f87171; }
25% { color: #facc15; text-shadow: 0 0 10px #facc15, 0 0 20px #facc15; }
50% { color: #34d399; text-shadow: 0 0 10px #34d399, 0 0 20px #34d399; }
75% { color: #60a5fa; text-shadow: 0 0 10px #60a5fa, 0 0 20px #60a5fa; }
100% { color: #f87171; text-shadow: 0 0 10px #f87171, 0 0 20px #f87171; }
}
.pulse-rainbow {
  animation: pulse-rainbow 3s infinite;
}

@keyframes pulse-rainbow-border {
0% {  text-shadow: 0 0 10px #f87171, 0 0 20px #f87171; }
25% {  text-shadow: 0 0 10px #facc15, 0 0 20px #facc15; }
50% { text-shadow: 0 0 10px #34d399, 0 0 20px #34d399; }
75% {  text-shadow: 0 0 10px #60a5fa, 0 0 20px #60a5fa; }
100% {  text-shadow: 0 0 10px #f87171, 0 0 20px #f87171; }
}
.pulse-rainbow-border {
  animation: pulse-rainbow-border 3s infinite;
  pointer-events: none;
}

/* Rainbow Border Animation */
@keyframes rainbow-border {
  0% { border-color: #f87171; }
  25% { border-color: #facc15; }
  50% { border-color: #34d399; }
  75% { border-color: #60a5fa; }
  100% { border-color: #f87171; }
}
.rainbow-border {
  box-shadow: 0 0 10px #ec4899, 0 0 20px #ec4899;
  animation: rainbow-border 4s infinite;
}

/* Button Glow */
.btn-glow {
  box-shadow: 0 0 10px #ec4899, 0 0 20px #ec4899;
}
.btn-glow:hover {
  box-shadow: 0 0 15px #f472b6, 0 0 30px #f472b6;
  transform: scale(1.05);
}

/* Image Glow */
.glow-border {
  box-shadow: 0 0 12px 3px #22d3ee;
}

/* Animasi Api Biru Border */
@keyframes fire-border {
  0% {
    border-color: #1e90ff; /* Biru Lebih Gelap */
    box-shadow: 0 0 5px #1e90ff, 0 0 10px #1e90ff, 0 0 20px #4682b4;
  }
  50% {
    border-color: #00bfff; /* Biru Terang */
    box-shadow: 0 0 10px #00bfff, 0 0 15px #1e90ff, 0 0 25px #00bfff;
  }
  100% {
    border-color: #1e90ff; /* Kembali ke Biru Lebih Gelap */
    box-shadow: 0 0 5px #1e90ff, 0 0 10px #1e90ff, 0 0 20px #4682b4;
  }
}

.fire-border {
  border: 4px solid;
  animation: fire-border 3s infinite ease-in-out ;
}


@keyframes epic-score {
  0% { transform: scale(1) rotate(0deg); text-shadow: none; }
  20% { transform: scale(1.3) rotate(-2deg); text-shadow: 0 0 8px #fde047, 0 0 15px #facc15; }
  40% { transform: scale(1.4) rotate(2deg); }
  60% { transform: scale(1.2) rotate(-1deg); }
  80% { transform: scale(1.3) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); text-shadow: none; }
}

.epic-score-animate {
  animation: epic-score 0.8s ease-in-out;
  color: #fde047 !important; /* yellow-300 */
}

/* RESULT EFFECT: Cinematic Explosion Text */
@keyframes boom-result {
  0% {
    transform: scale(0.8) rotateX(90deg);
    opacity: 0;
    letter-spacing: 2px;
    text-shadow: none;
  }
  50% {
    transform: scale(1.4) rotateX(0deg);
    opacity: 1;
    text-shadow: 0 0 12px #00f7ff, 0 0 24px #38bdf8;
  }
  100% {
    transform: scale(1) rotateX(0deg);
    text-shadow: none;
  }
}

.boom-result-animate {
  animation: boom-result 0.9s ease-out;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes damageFlash {
  0% { box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.health-hit {
  animation: shake 0.4s ease, damageFlash 0.4s ease;
}

.health-glow {
  box-shadow: 0 0 10px 2px rgba(0, 255, 0, 0.7);
  transition: box-shadow 0.3s ease-in-out;
}

.glow-text {
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 15px #f0f;
  }
  to {
    color: #f0f;
    text-shadow: 0 0 10px #fff, 0 0 20px #0ff, 0 0 30px #0ff;
  }
}



footer {
  padding: 1rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease-in-out;
  cursor: none;
}

footer:hover {
  color: #1f2937; /* text-gray-800 */
}