/* ============================================================
   styles/leaderboard.css — Leaderboard Page
   ============================================================ */

.leaderboard-page {
  padding-top: calc(var(--navbar-h) + var(--sp-8));
}

/* ── Podium ─────────────────────────────────────────────────── */
.podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--sp-4); margin-bottom: var(--sp-10);
}
.podium-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  flex: 1; max-width: 200px;
}
.podium-avatar-wrap { position: relative; }
.podium-crown {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 22px; animation: floatCrown 3s ease-in-out infinite;
}
@keyframes floatCrown { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-5px);} }

.podium-rank {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.podium-name   { font-size: var(--text-sm); font-weight: 600; text-align: center; }
.podium-points { font-size: var(--text-xs); color: var(--gold); font-weight: 700; }
.podium-block  {
  width: 100%; border-radius: var(--r-md) var(--r-md) 0 0;
  position: relative; overflow: hidden;
}
.podium-item:nth-child(1) .podium-block { height: 120px; background: linear-gradient(180deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); border: 1px solid rgba(245,158,11,0.3); }
.podium-item:nth-child(2) .podium-block { height: 90px;  background: linear-gradient(180deg, rgba(124,58,237,0.2), rgba(124,58,237,0.05)); border: 1px solid rgba(124,58,237,0.3); }
.podium-item:nth-child(3) .podium-block { height: 70px;  background: linear-gradient(180deg, rgba(168,85,247,0.15), rgba(168,85,247,0.03)); border: 1px solid rgba(168,85,247,0.25); }

/* Reorder: 2nd, 1st, 3rd */
.podium { flex-direction: row; }
.podium .podium-item:first-child { order: 2; }
.podium .podium-item:nth-child(2) { order: 1; }
.podium .podium-item:nth-child(3) { order: 3; }

/* ── Rank list ───────────────────────────────────────────────── */
.rank-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.rank-item {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  transition: var(--t-base);
}
.rank-item:hover { border-color: var(--border-brand); transform: translateX(4px); }
.rank-item.my-rank {
  border-color: var(--border-brand);
  background: rgba(124,58,237,0.08);
}
.rank-number {
  width: 36px; font-size: var(--text-md); font-weight: 800;
  color: var(--text-muted); text-align: center; flex-shrink: 0;
}
.rank-number.top-3 { color: var(--gold); }
.rank-medal { font-size: 22px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name   { font-size: var(--text-sm); font-weight: 600; }
.rank-badges { display: flex; gap: var(--sp-1); margin-top: 3px; }
.rank-points { font-size: var(--text-md); font-weight: 800; color: var(--gold); white-space: nowrap; }

/* ── My rank card ────────────────────────────────────────────── */
.my-rank-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(168,85,247,0.05));
  border: 1px solid rgba(124,58,237,0.3); border-radius: var(--r-xl);
  padding: var(--sp-6); display: flex; align-items: center;
  gap: var(--sp-6); margin-bottom: var(--sp-8);
}
.my-rank-number { font-size: 56px; font-weight: 900; line-height: 1; }
.my-rank-label  { color: var(--text-secondary); font-size: var(--text-sm); }
.my-rank-points { font-size: var(--text-3xl); font-weight: 800; }
.my-rank-sub    { color: var(--text-muted); font-size: var(--text-xs); }

/* ── Mobile Responsive Leaderboard ────────────────────────────── */
@media (max-width: 768px) {
  .leaderboard-page {
    padding-top: calc(var(--navbar-h) + var(--sp-4));
  }
  .my-rank-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: var(--sp-3) var(--sp-4) !important;
    padding: var(--sp-5) !important;
  }
  .my-rank-card > div[style*="width:1px"] {
    display: none !important;
  }
  .my-rank-card .avatar-xl {
    width: 64px !important;
    height: 64px !important;
    grid-row: span 2;
  }
  .my-rank-card .my-rank-number {
    font-size: 36px !important;
  }
  .my-rank-card .my-rank-points {
    font-size: var(--text-xl) !important;
  }
}

@media (max-width: 600px) {
  .podium {
    gap: 6px !important;
    margin-bottom: var(--sp-6) !important;
  }
  .podium-item {
    gap: 6px !important;
    max-width: none !important;
  }
  .podium-avatar-wrap .avatar-lg {
    width: 46px !important;
    height: 46px !important;
  }
  .podium-crown {
    top: -14px !important;
    font-size: 16px !important;
  }
  .podium-rank {
    font-size: 10px !important;
  }
  .podium-name {
    font-size: 11.5px !important;
    max-width: 84px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .podium-points {
    font-size: 10.5px !important;
  }
  .podium-item:nth-child(1) .podium-block { height: 85px !important; }
  .podium-item:nth-child(2) .podium-block { height: 65px !important; }
  .podium-item:nth-child(3) .podium-block { height: 45px !important; }

  .rank-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .rank-number {
    width: 24px !important;
    font-size: var(--text-sm) !important;
  }
  .rank-points {
    font-size: var(--text-sm) !important;
  }
}