body {
  font-family: "Noto Sans Devanagari", "Poppins", sans-serif;
  background-color: #0f172a;
}
.gradient-bg {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.aviator-plane {
  animation: fly 3s infinite ease-in-out;
}
@keyframes fly {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.blink {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.aviator-plane {
  transition: transform 0.5s ease;
}
.group:hover .aviator-plane {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
@keyframes takeoff {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-100px) scale(1.2);
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}
.animate-takeoff {
  animation: takeoff 1.5s forwards;
}

.gradient-bg {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-float-delay {
  animation: float 6s ease-in-out 1s infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-20px) rotate(1deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes float-delay {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delay {
  animation: float-delay 7s ease-in-out infinite;
  animation-delay: 1s;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.gradient-bg {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.particle {
  animation: float 8s ease-in-out infinite;
}

.aviator-plane {
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7));
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.15;
  }
}
.animate-pulse {
  animation: pulse 6s infinite ease-in-out;
}
.animation-delay-1000 {
  animation-delay: 1s;
}
.animation-delay-1500 {
  animation-delay: 1.5s;
}

@keyframes underline {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  51% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.animate-underline {
  animation: underline 3s ease infinite;
}

@keyframes borderFlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.animate-borderFlow {
  animation: borderFlow 3s linear infinite;
}

.particle {
  animation: float 15s infinite linear;
}
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.bg-size-200 {
  background-size: 200% 100%;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.15;
  }
}
.animate-pulse {
  animation: pulse 6s infinite ease-in-out;
}
.animation-delay-1000 {
  animation-delay: 1s;
}
.animation-delay-1500 {
  animation-delay: 1.5s;
}

@keyframes underline {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  51% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.animate-underline {
  animation: underline 3s ease infinite;
}

@keyframes borderFlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.animate-borderFlow {
  animation: borderFlow 3s linear infinite;
}

.particle {
  animation: float 15s infinite linear;
}
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.bg-size-200 {
  background-size: 200% 100%;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.animate-pulse {
  animation: pulse 1.5s infinite ease-in-out;
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-1000 {
  animation-delay: 1s;
}
.animation-delay-1500 {
  animation-delay: 1.5s;
}

@keyframes underline {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  51% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.animate-underline {
  animation: underline 3s ease infinite;
}

@keyframes borderFlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.animate-borderFlow {
  animation: borderFlow 3s linear infinite;
}

.particle {
  animation: float 15s infinite linear;
}
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.bg-size-200 {
  background-size: 200% 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes countdown {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}
.animate-countdown {
  animation: countdown 10s linear forwards;
}
/* Show popup after delay using animation */
#popup-container {
  display: flex;
  opacity: 0;
  animation: fadeIn 0.3s 1s forwards;
}
/* Hide popup after countdown completes */
.animate-countdown:after {
  content: "";
  display: none;
}
/* Close functionality using target pseudo-class */
#popup-container:target {
  display: none !important;
}