/* ==========================================================================
   🏆 NEXTSTEP REVOLUTIONARY NEXUS-THEMED LEADERBOARD ENGINE
   ========================================================================== */

/* --- CORE GRAPHICS TOKENS --- */
:root {
  --bg-primary: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
  --bg-secondary: rgba(255, 255, 255, 0.85);
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  --accent-primary: #2563eb;
  --accent-secondary: #3b82f6;
  --border-color: rgba(226, 232, 240, 0.8);
  
  /* High-fidelity Neon Glow Effects */
  --gold-glow: 0 20px 50px -10px rgba(245, 158, 11, 0.35), 0 0 30px rgba(251, 191, 36, 0.15);
  --silver-glow: 0 16px 40px -10px rgba(100, 116, 139, 0.2), 0 0 20px rgba(148, 163, 184, 0.1);
  --bronze-glow: 0 16px 40px -10px rgba(180, 83, 9, 0.2), 0 0 20px rgba(217, 119, 6, 0.1);
  --card-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] {
  --bg-primary: linear-gradient(145deg, #020617 0%, #0b1329 60%, #020617 100%);
  --bg-secondary: rgba(15, 23, 42, 0.65);
  --bg-tertiary: #020617;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-primary: #3b82f6;
  --accent-secondary: #60a5fa;
  --border-color: rgba(30, 41, 59, 0.7);
  
  --gold-glow: 0 25px 60px -12px rgba(245, 158, 11, 0.25), 0 0 40px rgba(251, 191, 36, 0.2);
  --silver-glow: 0 20px 45px -12px rgba(30, 41, 59, 0.6);
  --bronze-glow: 0 20px 45px -12px rgba(120, 53, 4, 0.3);
  --card-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

/* --- THE STAGGERED 3D ELEVATION PODIUM VIEW --- */
.lb-podium {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: end !important;
  gap: 24px;
  max-width: 800px;
  margin: 4.5rem auto 3.5rem auto;
  padding: 0 16px;
}

.podium-card {
  background: var(--bg-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 28px;
  padding: 2.5rem 1.25rem 2rem;
  text-align: center;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

.podium-card:hover {
  transform: translateY(-12px) scale(1.02);
}

.podium-card.rank-1 {
  grid-column: 2;
  order: 2;
  min-height: 330px;
  border: 2px solid #fbbf24 !important;
  box-shadow: var(--gold-glow);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(251, 191, 36, 0.04) 100%);
}

.podium-card.rank-2 {
  grid-column: 1;
  order: 1;
  min-height: 275px;
  border: 1px solid #cbd5e1;
  box-shadow: var(--silver-glow);
}

.podium-card.rank-3 {
  grid-column: 3;
  order: 3;
  min-height: 245px;
  border: 1px solid #d97706;
  box-shadow: var(--bronze-glow);
}

.podium-crown {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 44px;
  filter: drop-shadow(0 6px 12px rgba(245, 158, 11, 0.5));
  animation: hyperCrownFloat 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hyperCrownFloat {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  50% { transform: translate(-50%, -10px) rotate(3deg); }
}

.podium-rank-badge {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #ffffff !important;
  border: 3px solid var(--bg-secondary);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.rank-1 .podium-rank-badge { background: linear-gradient(135deg, #d97706, #fbbf24); }
.rank-2 .podium-rank-badge { background: linear-gradient(135deg, #475569, #cbd5e1); }
.rank-3 .podium-rank-badge { background: linear-gradient(135deg, #92400e, #f59e0b); }

.podium-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 3px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.rank-1 .podium-avatar {
  width: 96px;
  height: 96px;
  font-size: 32px;
  border-color: #fbbf24;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.2);
}
.rank-2 .podium-avatar { border-color: #cbd5e1; }
.rank-3 .podium-avatar { border-color: #f59e0b; }

.podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podium-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.rank-1 .podium-name { font-size: 18px; font-weight: 800; }

.podium-score {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent-primary);
  line-height: 1;
}
.rank-1 .podium-score { font-size: 34px; color: #fbbf24; text-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
[data-theme="light"] .rank-1 .podium-score { color: #d97706; }

.podium-score-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
}

/* --- 🔥 NEW REVOLUTIONARY VERTICAL LIST FOR RANKS 4-50 --- */
div#lb-list.lb-list {
  display: flex !important;
  flex-direction: column !important; /* Stack rows vertically instead of horizontal scrolling */
  gap: 12px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 10px 16px 40px 16px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Premium full-width horizontal rows */
div#lb-list.lb-list .lb-row {
  flex: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important; /* Internal elements sit side-by-side */
  align-items: center !important;
  text-align: left !important;
  background: var(--bg-secondary) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 18px !important;
  padding: 14px 24px !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid var(--border-color) !important;
  position: relative !important;
  margin: 0 !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: default;
}

div#lb-list.lb-list .lb-row:hover {
  transform: translateX(4px) !important; /* Shifts slightly to the right on hover */
  border-color: var(--accent-primary) !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1) !important;
}

/* Stable static rank numerical badge */
div#lb-list.lb-list .lb-row-rank {
  position: static !important;
  transform: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 45px !important;
  min-width: 45px !important;
  text-align: left !important;
  padding: 0 !important;
}

div#lb-list.lb-list .lb-row-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-tertiary) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  margin: 0 16px 0 0 !important; /* Clean right-margin separation */
}

div#lb-list.lb-list .lb-row-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

div#lb-list.lb-list .lb-row-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  margin-bottom: 0 !important;
  flex-grow: 1 !important; /* Let text area claim remaining spatial row width */
}

div#lb-list.lb-list .lb-row-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0px !important;
}

div#lb-list.lb-list .lb-row-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 600;
}

/* Relocated score structure to float neatly on the right side */
div#lb-list.lb-list .lb-row-score-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  width: auto !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
}

div#lb-list.lb-list .lb-row-score {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--accent-primary) !important;
  text-align: right !important;
  line-height: 1;
}

div#lb-list.lb-list .lb-row-score-label {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: right !important;
  margin-top: 3px;
  font-weight: 700;
}

/* User Card Profile Highlight Rigs (Is-Me) */
div#lb-list.lb-list .lb-row.is-me {
  border: 2px solid var(--accent-primary) !important;
  background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(59,130,246,0.02)) !important;
}

div#lb-list.lb-list .lb-row.is-me .lb-row-name::after {
  content: ' (You)';
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 800;
  display: inline-block;
  margin-left: 4px;
}

/* Adaptive Responsiveness Modifications */
@media (max-width: 680px) {
  .lb-podium { gap: 12px; margin-top: 3.5rem; }
  .podium-card.rank-1 { min-height: 270px; padding-top: 1.75rem; }
  .podium-card.rank-2 { min-height: 230px; }
  .podium-card.rank-3 { min-height: 210px; }
  .podium-avatar { width: 58px; height: 58px; font-size: 20px; }
  .rank-1 .podium-avatar { width: 74px; height: 74px; font-size: 24px; }
  .podium-crown { top: -28px; font-size: 38px; }
  .podium-score { font-size: 20px; }
  .rank-1 .podium-score { font-size: 26px; }
  
  div#lb-list.lb-list .lb-row { padding: 12px 16px !important; }
  div#lb-list.lb-list .lb-row-score { font-size: 17px !important; }
}