/* Add floating bubbles with animation */

@keyframes homeBtnPulse {
  0% {
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3),
      0 4px 15px rgba(238, 90, 36, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4),
      0 5px 18px rgba(238, 90, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3),
      0 4px 15px rgba(238, 90, 36, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

@keyframes floatingBubbles {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(5px, -8px) rotate(45deg);
  }
  50% {
    transform: translate(-3px, 5px) rotate(90deg);
  }
  75% {
    transform: translate(8px, -3px) rotate(135deg);
  }
}

@keyframes sparkle {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 1;
  }
  25% {
    transform: translateY(-100px) translateX(50px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-200px) translateX(-30px);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-300px) translateX(20px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-400px) translateX(0px);
    opacity: 0;
  }
}
@keyframes subtleGlow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes cardGlow {
  0%,
  100% {
    background-position: 0% 50%;
    box-shadow: 0 4px 20px rgba(132, 250, 176, 0.4),
      0 2px 8px rgba(1, 87, 155, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 6px 25px rgba(143, 211, 244, 0.5),
      0 3px 12px rgba(1, 87, 155, 0.3);
  }
}

@keyframes cardRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes hoverPulse {
  0% {
    transform: scale(1.04) rotate(-2deg);
  }
  50% {
    transform: scale(1.12) rotate(-4deg);
  }
  100% {
    transform: scale(1.08) rotate(-3deg);
  }
}
@keyframes answerReveal {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes answerGlow {
  0%,
  100% {
    background-position: 0% 50%;
    box-shadow: 0 8px 30px rgba(76, 175, 80, 0.4);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 10px 35px rgba(76, 175, 80, 0.6);
  }
}

@keyframes fadeInAnswer {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes showAnswerPulse {
  0%,
  100% {
    background-position: 0% 50%;
    transform: scale(1);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.02);
  }
}

@keyframes magnifyPulse {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.2);
  }
}
@keyframes iskosRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
@keyframes shatter-card {
  0% {
    transform: scale(1) rotate(0deg);
    filter: none;
  }

  40% {
    transform: scale(1.08) rotate(-2deg) skewX(2deg);
    filter: brightness(1.2) blur(0.5px);
  }

  60% {
    transform: scale(0.97) rotate(2deg) skewY(-2deg);
    filter: brightness(0.95) blur(1px);
  }

  100% {
    transform: scale(1) rotate(0deg);
    filter: none;
  }
}
@keyframes celebrationPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes encouragementShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@keyframes emojiPop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-90deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes titleGlow {
  0%,
  100% {
    text-shadow: 0 2px 4px rgba(21, 101, 192, 0.2);
  }
  50% {
    text-shadow: 0 2px 8px rgba(21, 101, 192, 0.4),
      0 0 15px rgba(21, 101, 192, 0.2);
  }
}

@keyframes encouragementPulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* Game Setup Modal Animations */
@keyframes titleShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes backgroundShift {
  0%,
  100% {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  }
  25% {
    background: linear-gradient(135deg, #f093fb 0%, #667eea 50%, #764ba2 100%);
  }
  50% {
    background: linear-gradient(135deg, #764ba2 0%, #f093fb 50%, #667eea 100%);
  }
  75% {
    background: linear-gradient(135deg, #667eea 0%, #f093fb 50%, #764ba2 100%);
  }
}

@keyframes setupFloatingDots {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 0.6;
  }
}

@keyframes setupFloatingBubbles {
  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.3;
  }
  25% {
    transform: scale(1.1) translateY(-15px);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.9) translateY(-10px);
    opacity: 0.2;
  }
  75% {
    transform: scale(1.05) translateY(-20px);
    opacity: 0.4;
  }
}

@keyframes setupContentSparkles {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.3;
  }
  25% {
    transform: translateX(5px) translateY(-5px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-3px) translateY(-2px);
    opacity: 0.2;
  }
  75% {
    transform: translateX(8px) translateY(-8px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 0.3;
  }
}

/* Background gradient animation */
@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Sparkle floating animation */
@keyframes sparkleFloating {
  0% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-10px) translateX(5px);
  }
  50% {
    transform: translateY(-5px) translateX(-5px);
  }
  75% {
    transform: translateY(-15px) translateX(10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

/* Floating Background Elements Animations */
@keyframes floatUpDown {
  0%,
  100% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
    transform: scale(1);
  }
  90% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    transform: translateY(-100px) scale(0);
    opacity: 0;
  }
}

@keyframes floatRotate {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10%,
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes floatSideways {
  0%,
  100% {
    transform: translateX(-50px) translateY(100vh);
    opacity: 0;
  }
  50% {
    transform: translateX(50px) translateY(50vh);
    opacity: 0.3;
  }
}

@keyframes sparkleEffect {
  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 255, 255, 0.4);
  }
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(100vh) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    transform: translateY(50vh) translateX(20px);
    opacity: 0.5;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100px) translateX(-20px);
    opacity: 0;
  }
}

/* Winner Screen Animations */
@keyframes winnerSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes winnerTrophyBounce {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-5deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(5deg);
  }
}

/* Celebration and Confetti Animations */
@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotateZ(0deg) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(-80vh) rotateZ(72deg) scale(1);
  }
  90% {
    opacity: 0.8;
    transform: translateY(80vh) rotateZ(648deg) scale(1);
  }
  100% {
    transform: translateY(100vh) rotateZ(720deg) scale(0);
    opacity: 0;
  }
}

@keyframes sparkBurst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes balloonFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(-2deg);
  }
  25% {
    transform: translateY(-20px) rotate(2deg);
  }
  50% {
    transform: translateY(-10px) rotate(-1deg);
  }
  75% {
    transform: translateY(-30px) rotate(1.5deg);
  }
}

@keyframes fireworkBurst {
  0% {
    transform: scale(0);
    opacity: 1;
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 0 20px transparent, 0 0 0 40px transparent,
      0 0 0 60px transparent;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
    box-shadow: 0 0 0 25px transparent, 0 0 0 50px transparent,
      0 0 0 75px transparent;
  }
}

@keyframes winnerPulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

@keyframes winnerGlow {
  0%,
  100% {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(102, 126, 234, 0.8), 0 0 30px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(102, 126, 234, 0.8), 0 0 50px rgba(255, 255, 255, 0.6),
      0 0 70px rgba(240, 147, 251, 0.4);
  }
}

@keyframes celebrationShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-5px) rotate(-1deg);
  }
  20% {
    transform: translateX(5px) rotate(1deg);
  }
  30% {
    transform: translateX(-3px) rotate(-0.5deg);
  }
  40% {
    transform: translateX(3px) rotate(0.5deg);
  }
  50% {
    transform: translateX(-2px);
  }
  60% {
    transform: translateX(2px);
  }
  70% {
    transform: translateX(-1px);
  }
  80% {
    transform: translateX(1px);
  }
  90% {
    transform: translateX(0);
  }
}
@keyframes sparkleRotate {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

/* New Epic Winner Modal Animations */
@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes winnerGrandEntrance {
  0% {
    opacity: 0;
    transform: scale(0.3) rotateY(180deg) translateZ(-1000px);
    filter: blur(20px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) rotateY(90deg) translateZ(-200px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg) translateZ(0px);
    filter: blur(0px);
  }
}

@keyframes winnerFloatPulse {
  0%,
  100% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3),
      0 20px 40px rgba(255, 255, 255, 0.2) inset,
      0 0 60px rgba(255, 215, 0, 0.3);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.4),
      0 25px 50px rgba(255, 255, 255, 0.25) inset,
      0 0 80px rgba(255, 215, 0, 0.5);
  }
}

@keyframes rainbowBorder {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes sparkleEffect {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: rotate(90deg) scale(1.1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1);
    opacity: 0.7;
  }
  75% {
    transform: rotate(270deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.8;
  }
}

@keyframes trophySpectacular {
  0%,
  100% {
    transform: translateY(0px) scale(1) rotateZ(0deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))
      drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
  }
  25% {
    transform: translateY(-15px) scale(1.1) rotateZ(5deg);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 50px rgba(255, 215, 0, 0.8));
  }
  50% {
    transform: translateY(-25px) scale(1.15) rotateZ(0deg);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6))
      drop-shadow(0 0 60px rgba(255, 215, 0, 1));
  }
  75% {
    transform: translateY(-15px) scale(1.1) rotateZ(-5deg);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 50px rgba(255, 215, 0, 0.8));
  }
}

@keyframes sparkleOrbit {
  0% {
    transform: rotate(0deg) translateX(60px) rotate(0deg);
    opacity: 1;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    transform: rotate(180deg) translateX(60px) rotate(-180deg);
    opacity: 1;
  }
  75% {
    opacity: 0.7;
  }
  100% {
    transform: rotate(360deg) translateX(60px) rotate(-360deg);
    opacity: 1;
  }
}

@keyframes rainbowText {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes titleBounce {
  0% {
    transform: scale(0.3) translateY(100px);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) translateY(-20px);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateY(5px);
    opacity: 1;
  }
  85% {
    transform: scale(1.05) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

/* Text shine animation for gradient text */
@keyframes textShine {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Push Me Button Animation */
@keyframes pushMePulse {
  0%,
  100% {
    transform: scale(1);
    background-position: 0% 50%;
    box-shadow: 0 0 0 4px rgba(255, 23, 68, 0.3),
      0 0 0 8px rgba(255, 23, 68, 0.2), 0 0 0 12px rgba(255, 23, 68, 0.1),
      0 8px 25px rgba(213, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  }
  25% {
    transform: scale(1.05);
    background-position: 25% 75%;
  }
  50% {
    transform: scale(1.1);
    background-position: 100% 50%;
    box-shadow: 0 0 0 6px rgba(255, 23, 68, 0.4),
      0 0 0 12px rgba(255, 23, 68, 0.3), 0 0 0 18px rgba(255, 23, 68, 0.2),
      0 12px 35px rgba(213, 0, 0, 0.8), inset 0 3px 0 rgba(255, 255, 255, 0.4),
      inset 0 -3px 0 rgba(0, 0, 0, 0.3);
  }
  75% {
    transform: scale(1.05);
    background-position: 75% 25%;
  }
}

/* Loading Spinner Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Playful choice animations */
@keyframes choiceBounce {
  0% {
    transform: scale(0.8) translateY(10px);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) translateY(-5px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes choiceHover {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.02) rotate(-0.5deg);
  }
  50% {
    transform: scale(1.04) rotate(0deg);
  }
  75% {
    transform: scale(1.02) rotate(0.5deg);
  }
  100% {
    transform: scale(1.04) rotate(0deg);
  }
}

@keyframes choiceWiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  75% {
    transform: rotate(1deg);
  }
}