/* ============================================================
   LEADERBOARD — Game-style UI
   ============================================================ */

/* Flush under header */
.leaderboard-full .main-content-padding { padding-top: 0 !important; }

/* Search highlight */
.search-highlight { background: #1f6feb; color: #fff; padding: 0 4px; border-radius: 3px; }

/* Search responsive */
@media (max-width: 640px) { #leaderboardSearch { width: 100%; } }

/* Hide native select arrow */
#leaderboardLimit { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; }

/* Container hover depth */
#content-leaderboard .bg-dark-850 { transition: box-shadow .25s ease, border-color .25s ease; }
#content-leaderboard .bg-dark-850:hover { box-shadow: 0 4px 32px -4px rgba(0,0,0,.7); }

/* ---- Tier colour tokens ---- */
:root {
  --lb-t1:  #cd7f32; /* Bronze     */
  --lb-t2:  #a8a9ad; /* Silver     */
  --lb-t3:  #ffd700; /* Gold       */
  --lb-t4:  #40e0d0; /* Emerald    */
  --lb-t5:  #7b68ee; /* Amethyst   */
  --lb-t6:  #00bfff; /* Diamond    */
  --lb-t7:  #ff69b4; /* Master     */
  --lb-t8:  #ff4500; /* Grandmaster*/
  --lb-t9:  #9400d3; /* Challenger */
  --lb-t10: #ff0080; /* Legend     */
}

/* ---- Keyframes ---- */
@keyframes lb-glow-gold   { 0%,100%{box-shadow:0 0 8px 2px rgba(255,215,0,.3)} 50%{box-shadow:0 0 22px 7px rgba(255,215,0,.6)} }
@keyframes lb-glow-silver { 0%,100%{box-shadow:0 0 6px 2px rgba(168,169,173,.3)} 50%{box-shadow:0 0 16px 5px rgba(168,169,173,.5)} }
@keyframes lb-glow-bronze { 0%,100%{box-shadow:0 0 6px 2px rgba(205,127,50,.3)} 50%{box-shadow:0 0 16px 5px rgba(205,127,50,.5)} }
@keyframes lb-shimmer     { 0%{background-position:-300px 0} 100%{background-position:300px 0} }
@keyframes lb-legend-glow { 0%,100%{box-shadow:0 0 8px 2px rgba(255,0,128,.3)} 50%{box-shadow:0 0 20px 6px rgba(255,0,128,.6)} }

/* ============================================================
   ROW STYLES
   ============================================================ */
#leaderboardList li {
  position: relative;
  border-left: 3px solid transparent;
  transition: background .2s ease, border-left-color .2s ease;
}
#leaderboardList li:nth-child(odd)  { background: rgba(255,255,255,.02); }
#leaderboardList li:nth-child(even) { background: rgba(0,0,0,.08); }
#leaderboardList li:hover           { background: rgba(60,65,70,.35) !important; }

/* Top-3 row accents */
#leaderboardList li.lb-rank-1 { border-left-color: #ffd700; background: linear-gradient(90deg,rgba(255,215,0,.08) 0%,transparent 40%) !important; }
#leaderboardList li.lb-rank-2 { border-left-color: #a8a9ad; background: linear-gradient(90deg,rgba(168,169,173,.05) 0%,transparent 40%) !important; }
#leaderboardList li.lb-rank-3 { border-left-color: #cd7f32; background: linear-gradient(90deg,rgba(205,127,50,.05) 0%,transparent 40%) !important; }

/* Avatar glow for top 3 */
#leaderboardList li.lb-rank-1 .lb-avatar-wrap { border-radius: 9999px; animation: lb-glow-gold   2.5s ease-in-out infinite; }
#leaderboardList li.lb-rank-2 .lb-avatar-wrap { border-radius: 9999px; animation: lb-glow-silver 2.5s ease-in-out infinite; }
#leaderboardList li.lb-rank-3 .lb-avatar-wrap { border-radius: 9999px; animation: lb-glow-bronze 2.5s ease-in-out infinite; }

/* Rank badge for top 3: slightly larger emoji */
#leaderboardList li.lb-rank-1 .w-12.h-12,
#leaderboardList li.lb-rank-2 .w-12.h-12,
#leaderboardList li.lb-rank-3 .w-12.h-12 { font-size: 1.6rem; }

/* Rank badges refine (fallback) */
#leaderboardList li:nth-child(1) .w-12.h-12 { border: 2px solid rgba(255,215,0,.5); }
#leaderboardList li:nth-child(2) .w-12.h-12 { border: 2px solid rgba(180,180,190,.5); }
#leaderboardList li:nth-child(3) .w-12.h-12 { border: 2px solid rgba(255,140,0,.5); }

/* Current-user highlight */
#leaderboardList li.lb-current-user { background: linear-gradient(90deg,rgba(99,102,241,.12) 0%,transparent 60%) !important; border-left-color: #6366f1 !important; }

/* ---- Level badge base ---- */
#leaderboardList .level-badge {
  padding: .5rem .75rem;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(20,25,30,.85);
  backdrop-filter: blur(4px);
  transition: border-color .2s, box-shadow .2s;
}

/* Tier-coloured level badge borders */
.lb-tier-1  .level-badge { border-color: var(--lb-t1)  !important; }
.lb-tier-2  .level-badge { border-color: var(--lb-t2)  !important; }
.lb-tier-3  .level-badge { border-color: var(--lb-t3)  !important; }
.lb-tier-4  .level-badge { border-color: var(--lb-t4)  !important; }
.lb-tier-5  .level-badge { border-color: var(--lb-t5)  !important; }
.lb-tier-6  .level-badge { border-color: var(--lb-t6)  !important; }
.lb-tier-7  .level-badge { border-color: var(--lb-t7)  !important; }
.lb-tier-8  .level-badge { border-color: var(--lb-t8)  !important; }
.lb-tier-9  .level-badge { border-color: var(--lb-t9)  !important; }
.lb-tier-10 .level-badge { border-color: var(--lb-t10) !important; animation: lb-legend-glow 2s ease-in-out infinite; }

/* ---- Level progress bar ---- */
.lb-progress-wrap { margin-top: 4px; }
.lb-progress-bar-bg   { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; max-width: 120px; }
.lb-progress-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }

.lb-tier-1  .lb-progress-bar-fill { background: linear-gradient(90deg,#cd7f32,#e8a060); }
.lb-tier-2  .lb-progress-bar-fill { background: linear-gradient(90deg,#a8a9ad,#d0d1d5); }
.lb-tier-3  .lb-progress-bar-fill { background: linear-gradient(90deg,#ffd700,#ffed4a); }
.lb-tier-4  .lb-progress-bar-fill { background: linear-gradient(90deg,#40e0d0,#6ffcf4); }
.lb-tier-5  .lb-progress-bar-fill { background: linear-gradient(90deg,#7b68ee,#a090ff); }
.lb-tier-6  .lb-progress-bar-fill { background: linear-gradient(90deg,#00bfff,#40d4ff); }
.lb-tier-7  .lb-progress-bar-fill { background: linear-gradient(90deg,#ff69b4,#ff90c8); }
.lb-tier-8  .lb-progress-bar-fill { background: linear-gradient(90deg,#ff4500,#ff7040); }
.lb-tier-9  .lb-progress-bar-fill { background: linear-gradient(90deg,#9400d3,#bf00ff); }
.lb-tier-10 .lb-progress-bar-fill { background: linear-gradient(90deg,#ff0080,#ff40a0,#ff0080); background-size: 200% 100%; animation: lb-shimmer 1.5s linear infinite; }

/* Email readability */
#leaderboardList .athlete-email { color: #d1d5db; }

/* ============================================================
   PODIUM — Top 3 hero section
   ============================================================ */
#leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem 1rem 0;
}

.lb-podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  max-width: 155px;
  padding: 1rem 0.75rem 1.1rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(18,22,28,.75);
  backdrop-filter: blur(10px);
  position: relative;
  cursor: default;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lb-podium-card:hover { transform: translateY(-4px); }

.lb-podium-card.rank-1 {
  border-color: rgba(255,215,0,.4);
  background: linear-gradient(155deg,rgba(255,215,0,.1) 0%,rgba(18,22,28,.95) 55%);
  box-shadow: 0 0 28px -4px rgba(255,215,0,.3);
  padding-bottom: 1.4rem;
  /* elevated */
  margin-bottom: 28px;
}
.lb-podium-card.rank-2 {
  border-color: rgba(168,169,173,.3);
  background: linear-gradient(155deg,rgba(168,169,173,.07) 0%,rgba(18,22,28,.95) 55%);
  box-shadow: 0 0 18px -4px rgba(168,169,173,.2);
  margin-bottom: 10px;
}
.lb-podium-card.rank-3 {
  border-color: rgba(205,127,50,.3);
  background: linear-gradient(155deg,rgba(205,127,50,.07) 0%,rgba(18,22,28,.95) 55%);
  box-shadow: 0 0 18px -4px rgba(205,127,50,.2);
}

/* Podium rank crown icon */
.lb-podium-rank-icon { font-size: 1.9rem; line-height: 1; margin-bottom: .1rem; }

/* Podium avatar */
.lb-podium-avatar,
.lb-podium-avatar-fallback {
  width: 58px; height: 58px;
  border-radius: 9999px;
  border: 3px solid transparent;
  object-fit: cover;
}
.lb-podium-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; color: #fff;
}

.rank-1 .lb-podium-avatar,
.rank-1 .lb-podium-avatar-fallback { border-color: #ffd700; box-shadow: 0 0 18px 4px rgba(255,215,0,.45); animation: lb-glow-gold 2.5s ease-in-out infinite; }
.rank-2 .lb-podium-avatar,
.rank-2 .lb-podium-avatar-fallback { border-color: #a8a9ad; animation: lb-glow-silver 2.5s ease-in-out infinite; }
.rank-3 .lb-podium-avatar,
.rank-3 .lb-podium-avatar-fallback { border-color: #cd7f32; animation: lb-glow-bronze 2.5s ease-in-out infinite; }

.rank-1 .lb-podium-avatar-fallback { background: linear-gradient(135deg,#b8860b,#ffd700); }
.rank-2 .lb-podium-avatar-fallback { background: linear-gradient(135deg,#666,#b0b0b5); }
.rank-3 .lb-podium-avatar-fallback { background: linear-gradient(135deg,#6b3a10,#cd7f32); }

/* Podium text */
.lb-podium-name  { font-size: .78rem; font-weight: 600; color: #e5e7eb; text-align: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium-level { font-size: .7rem; color: #9ca3af; }
.rank-1 .lb-podium-level { color: #fbbf24; font-weight: 600; }
.rank-2 .lb-podium-level { color: #c0c0c8; }
.rank-3 .lb-podium-level { color: #c87c3a; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  #leaderboard-podium { gap: 0.5rem; padding: 0.5rem 0.4rem 0; }
  .lb-podium-card { padding: .75rem .5rem .9rem; max-width: 110px; border-radius: .85rem; }
  .lb-podium-avatar, .lb-podium-avatar-fallback { width: 44px; height: 44px; }
  .lb-podium-name { font-size: .68rem; max-width: 90px; }
  .lb-podium-rank-icon { font-size: 1.5rem; }
}

@media (max-width: 480px) { #leaderboardSearch::placeholder { font-size: 12px; } }

/* Responsive text */
#content-leaderboard #leaderboardList li { font-size: clamp(11px,1.9vw,14px); }
#content-leaderboard #leaderboardList li .font-semibold.text-white { font-size: clamp(12px,2.2vw,16px); }
#content-leaderboard #leaderboardList li .athlete-email { font-size: clamp(10px,1.8vw,13px); }

/* Header row */
#content-leaderboard .bg-dark-800\/95 { font-size: clamp(16px,3vw,20px); font-weight: 700; }

@media (max-width: 520px) {
  #content-leaderboard #leaderboardList li { gap: .75rem; padding-left: 1rem; padding-right: 1rem; }
  #content-leaderboard #leaderboardList li .w-12.h-12 { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  #content-leaderboard #leaderboardList .level-badge span:first-child { font-size: 1rem !important; }
  #content-leaderboard #leaderboardList .level-badge span:last-child  { font-size: 10px !important; }
}

@media (max-width: 400px) {
  #content-leaderboard { overflow-x: hidden; }
  #content-leaderboard #leaderboardList { overflow-x: hidden; }
  #content-leaderboard #leaderboardList li { font-size: 11px; flex-wrap: wrap; padding: .5rem; gap: .4rem; }
  #content-leaderboard #leaderboardList li .font-semibold.text-white { font-size: 12px; }
  #content-leaderboard #leaderboardList li .athlete-email { display: none; }
  #content-leaderboard #leaderboardList li .w-12.h-12 { width: 2rem; height: 2rem; font-size: .75rem; }
  #content-leaderboard #leaderboardList li .w-10.h-10 { width: 1.75rem; height: 1.75rem; }
  #content-leaderboard #leaderboardList .level-badge { padding: .35rem .5rem; margin-left: auto; }
  #content-leaderboard #leaderboardList .level-badge span:last-child { display: none; }
  #content-leaderboard #leaderboardList li > div.w-24 { display: none !important; }
  #content-leaderboard #leaderboardList li > div { min-width: 0; }
  .lb-progress-bar-bg { max-width: 80px; }
}

@media (max-width: 340px) {
  #content-leaderboard #leaderboardList li { padding: .4rem; }
  #content-leaderboard #leaderboardList li .w-12.h-12 { width: 2.25rem; height: 2.25rem; font-size: .85rem; }
}