/* 
 * LEADERBOARD ENHANCED CSS
 * Push Arena-inspired design system for leaderboard pages
 * Features: Glassmorphism, gradients, animations, and premium visual effects
 */

/* ========================================
 * ROOT VARIABLES & DESIGN TOKENS
 * ======================================== */
:root {
  /* Primary gradients matching push_arena */
  --leaderboard-primary-gradient: linear-gradient(135deg, #601efa 0%, #fa05d9 100%);
  --leaderboard-secondary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --leaderboard-gold-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --leaderboard-silver-gradient: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
  --leaderboard-bronze-gradient: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  
  /* Colors */
  --leaderboard-primary: #601efa;
  --leaderboard-secondary: #fa05d9;
  --leaderboard-accent: #fbbf24;
  --leaderboard-dark: #1a1a2e;
  --leaderboard-light: rgba(255, 255, 255, 0.95);
  
  /* Glassmorphism effects - backdrop-filter removed for GPU performance at 12k+ users */
  --glass-bg: rgba(20, 20, 35, 0.95);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --glass-blur: none;
  
  /* Spacing */
  --navbar-height: 60px;
  --section-padding: 2rem;
  
  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes heroGrid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(4px, 4px); }
}

/* PB-KEYFRAME-COLLISIONS: a different `titlePulse` (brightness + glow) stood here, used by no rule —
   it only overrode the page titles' own titlePulse wherever this file loaded after theirs. */
@keyframes tabShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.enhanced-tab-button.active {
  background: var(--leaderboard-primary-gradient);
  border-color: transparent;
  color: white;
  box-shadow: 0 0 25px rgba(96, 30, 250, 0.5);
  animation: tabGlow 2s ease-in-out infinite;
  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes tabGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(96, 30, 250, 0.5); }
  50% { box-shadow: 0 0 35px rgba(250, 5, 217, 0.6); }
}

@keyframes cardTopGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes stickySlideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stickyShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes medalSpin {
  to { transform: rotate(360deg); }
}

.enhanced-medal.gold {
  background: var(--leaderboard-gold-gradient);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(251, 191, 36, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

.enhanced-medal.silver {
  background: var(--leaderboard-silver-gradient);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(229, 231, 235, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

.enhanced-medal.bronze {
  background: var(--leaderboard-bronze-gradient);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(217, 119, 6, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes youBadgePulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(96, 30, 250, 0.5);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(250, 5, 217, 0.7);
    transform: scale(1.05);
  }
}

@keyframes youBadgeShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.enhanced-you-badge .sparkle {
  animation: sparkleRotate 3s linear infinite;
  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes sparkleRotate {
  to { transform: rotate(360deg); }
}

@keyframes scoreGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2) drop-shadow(0 0 10px rgba(251, 191, 36, 0.5)); }
}

@keyframes enhancedSkeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes skeletonShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.enhanced-nav-btn.active {
  background: var(--leaderboard-primary-gradient);
  border-color: transparent;
  color: white;
  box-shadow: 0 0 20px rgba(96, 30, 250, 0.4);
}

/* ========================================
 * RESPONSIVE DESIGN
 * ======================================== */
@media (max-width: 768px) {
  .leaderboard-title-glow {
    font-size: 2.5rem;
  }
  
  .enhanced-leaderboard-card {
    padding: 1.5rem;
    border-radius: 20px;
  }
  
  .enhanced-medal {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .enhanced-tab-button {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }
  
  .sticky-user-top {
    top: calc(var(--navbar-height) + 0.5rem);
    margin-bottom: 1rem;
  }
  
  .enhanced-you-badge {
    padding: 0.25rem 0.625rem;
    font-size: var(--font-min);
  }
}

@media (max-width: 480px) {
  .leaderboard-title-glow {
    font-size: 2rem;
  }
  
  .enhanced-leaderboard-card {
    padding: 1rem;
    border-radius: 16px;
  }
  
  .enhanced-entry {
    padding: 0.75rem;
    border-radius: 12px;
  }
  
  .enhanced-medal {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }
  
  .enhanced-score {
    font-size: 1rem;
  }
  
  .enhanced-score-label {
    font-size: var(--font-min);
  }
}

/* ========================================
 * ANIMATION UTILITIES
 * ======================================== */
.fade-in {
  animation: enhanced-fadeIn 0.5s ease-out forwards;
  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes enhanced-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.scale-in {
  animation: scaleIn 0.3s ease-out forwards;
  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ========================================
 * SPECIAL EFFECTS
 * ======================================== */




@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ========================================
 * HOVER STATES & MICRO-INTERACTIONS
 * ======================================== */






/* Floating animation for special elements */
.float-animation {
  animation: float 3s ease-in-out infinite;
  /* GPU acceleration */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

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

/* Removed unused @keyframes pulse - duplicate, not referenced */