/* SubBoost Pro - Ultra-Modern Glassmorphism & Cyber Theme */

/* ==================== Custom Properties & Fonts ==================== */
:root {
  --bg-main: #060913;
  --bg-sidebar: #090e1a;
  --bg-card: rgba(15, 23, 42, 0.65);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(99, 102, 241, 0.35);
  --brand-primary: #6366f1;
  --brand-pink: #ec4899;
  --brand-gold: #f59e0b;
  --brand-emerald: #10b981;
}

/* ==================== Ambient Background Pattern ==================== */
body {
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(236, 72, 153, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

/* ==================== Glassmorphism Cards ==================== */
.glass-card {
  background: rgba(13, 19, 36, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.glass-card-interactive {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card-interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.glass-card-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.15), inset 0 1px 0 0 rgba(245, 158, 11, 0.2);
}

.glass-card-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 10px 30px -10px rgba(168, 85, 247, 0.15), inset 0 1px 0 0 rgba(168, 85, 247, 0.2);
}

.glass-card-emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.15), inset 0 1px 0 0 rgba(16, 185, 129, 0.2);
}

/* ==================== Animations & Keyframes ==================== */
@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.85; }
}

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

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

@keyframes floatCoinUp {
  0% { transform: translateY(0) scale(0.8); opacity: 1; }
  100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseBorderGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), inset 0 0 15px rgba(245, 158, 11, 0.3); }
}

.animate-pulse-glow {
  animation: pulseBorderGlow 2.5s infinite;
}

.animate-bounce-slow {
  animation: bounceSlow 3s ease-in-out infinite;
}

.shimmer-text {
  background: linear-gradient(90deg, #fff 0%, #cbd5e1 25%, #6366f1 50%, #cbd5e1 75%, #fff 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerGlow 4s linear infinite;
}

.shimmer-gold {
  background: linear-gradient(90deg, #fef08a 0%, #f59e0b 35%, #fbbf24 60%, #fef08a 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerGlow 3.5s linear infinite;
}

/* ==================== Sidebar Navigation Styling ==================== */
.sidebar-btn {
  color: #94a3b8;
  position: relative;
  transition: all 0.2s ease-out;
}

.sidebar-btn:hover {
  background: rgba(30, 41, 59, 0.7);
  color: #f8fafc;
  transform: translateX(3px);
}

.sidebar-btn.active-nav {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.18)) !important;
  color: #c7d2fe !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.sidebar-btn.active-nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 4px;
  background: linear-gradient(to bottom, #818cf8, #c084fc);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px #818cf8;
}

/* ==================== Platform Cards ==================== */
.platform-hover {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.platform-hover:hover {
  transform: translateY(-5px) scale(1.02);
}

/* ==================== Streak Ladder Progression ==================== */
.streak-card {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.streak-card:hover {
  transform: translateY(-3px);
}

/* ==================== Lucky Spin Wheel Canvas Decor ==================== */
.wheel-outer-ring {
  box-shadow: 0 0 0 8px rgba(15, 23, 42, 0.9), 0 0 0 10px rgba(245, 158, 11, 0.6), 0 15px 40px -5px rgba(236, 72, 153, 0.4);
}

/* ==================== Leaderboard Podium Styling ==================== */
.podium-rank-1 {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 2px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 20px 50px -10px rgba(245, 158, 11, 0.3), inset 0 1px 0 0 rgba(254, 240, 138, 0.4);
}

.podium-rank-2 {
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(203, 213, 225, 0.4);
  box-shadow: 0 15px 35px -10px rgba(203, 213, 225, 0.2);
}

.podium-rank-3 {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.18) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(217, 119, 6, 0.45);
  box-shadow: 0 15px 35px -10px rgba(217, 119, 6, 0.2);
}

/* ==================== Custom Sleek Scrollbar ==================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #060913;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* ==================== Toast Notifications ==================== */
.toast-slide-in {
  animation: slideInToast 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInToast {
  from {
    transform: translateX(100%) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* ==================== Mobile App Bottom Navigation & Drawer ==================== */
.mobile-bottom-nav {
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

.mobile-nav-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-btn:active {
  transform: scale(0.92);
}

.mobile-nav-btn.active-mobile-nav {
  color: #818cf8 !important;
}

.mobile-nav-btn.active-mobile-nav .nav-icon-container {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}

/* Mobile Drawer Transitions */
.mobile-drawer-open {
  transform: translateX(0%) !important;
}

.mobile-drawer-closed {
  transform: translateX(-100%) !important;
}

@media (max-width: 640px) {
  /* Prevent horizontal scroll bugs on tiny devices */
  body, html {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    -webkit-text-size-adjust: 100%;
  }

  /* Touch optimizations */
  button, a, div[onclick] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* Make canvas wheel responsive */
  #wheel-canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Sleek glass card for mobile */
  .glass-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Responsive ad containers */
  iframe {
    max-width: 100% !important;
  }
}