/* Premium UI/UX Enhancements for JargonBet v2.0 */

/* 1. Global Glassmorphism & Depth */
.glass-panel, .game-card, .live-card {
  background: rgba(26, 34, 51, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease;
}

/* 2. Premium Hover Effects with Neon Glow */
.game-card:hover, .live-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 40px rgba(184, 150, 62, 0.3),
              0 0 20px rgba(184, 150, 62, 0.1);
  border-color: rgba(184, 150, 62, 0.5);
  z-index: 10;
}

/* 3. Smooth Page Transitions */
.page-inner {
  animation: smoothFadeIn 0.5s ease-out backwards;
}

@keyframes smoothFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. Elegant Typography Enhancements */
h1, h2, h3 {
  letter-spacing: -0.02em;
}

.text-gradient {
  background: linear-gradient(135deg, #B8963E, #F9E596, #B8963E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 5. Dynamic Interactive Elements */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}
.btn-primary:hover::after {
  left: 150%;
}

/* 6. Glowing Active Nav Links */
.nav-link.active {
  color: #F9E596 !important;
  text-shadow: 0 0 10px rgba(249, 229, 150, 0.5);
  border-bottom: 2px solid #F9E596;
}