/* ============================================================
   Leaderboard — live data from the `sales` table (see leaderboard.js)
   Reuses vars, fonts, and .page-top/.site-footer from style.css
   ============================================================ */

.lb-empty{
  padding: 14px 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.7;
  list-style: none;
}

.lb-updated{
  margin: 8px 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  opacity: 0.6;
}

.lb-layout{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 24px 96px;
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 28px;
  align-items: start;
}

.lb-blitz-wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 24px 0;
}

/* ---------- Daily (main column) ---------- */
.lb-daily{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 8px 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 36px -26px rgba(0,0,0,0.6);
  animation: fadeInUp .5s ease both;
}

.lb-daily-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.lb-daily-head h2{
  font-family: "slight-chance", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--red-glow);
}

.lb-date{
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.lb-list{
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}

.lb-row{
  display: grid;
  grid-template-columns: 32px 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .15s ease;
}

.lb-row:hover{
  background: rgba(255,255,255,0.03);
}

.lb-rank{
  font-family: "slight-chance", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.lb-rank-1 .lb-rank{ color: #ffd54a; text-shadow: 0 0 10px rgba(255,213,74,0.5); }
.lb-rank-2 .lb-rank{ color: #cfd4da; text-shadow: 0 0 8px rgba(207,212,218,0.4); }
.lb-rank-3 .lb-rank{ color: #d99a5b; text-shadow: 0 0 8px rgba(217,154,91,0.4); }

.lb-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "slight-chance", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

.lb-avatar--a{ background: linear-gradient(145deg, #ff6a5c, #c62a20); }
.lb-avatar--b{ background: linear-gradient(145deg, #d9b98a, var(--tan)); }
.lb-avatar--c{ background: linear-gradient(145deg, #4a4a52, #232327); }

.lb-avatar--lg{
  width: 52px;
  height: 52px;
  font-size: 0.92rem;
}

.lb-name{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-rank-1 .lb-name,
.lb-rank-2 .lb-name,
.lb-rank-3 .lb-name{
  font-weight: 700;
}

.lb-score{
  font-family: "slight-chance", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.lb-rank-1 .lb-score{ color: var(--red-glow); }

/* ---------- Side bubbles (Weekly / Monthly / Yearly) ---------- */
.lb-side{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lb-bubble{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  background:
    radial-gradient(ellipse 160px 90px at 25% 10%, var(--glow-1), transparent 70%),
    radial-gradient(ellipse 120px 80px at 95% 0%, var(--glow-2), transparent 65%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 36px -26px rgba(0,0,0,0.6);
  animation: fadeInUp .5s ease both;
}

.lb-side .lb-bubble:nth-child(1){ animation-delay: .08s; }
.lb-side .lb-bubble:nth-child(2){ animation-delay: .14s; }
.lb-side .lb-bubble:nth-child(3){ animation-delay: .2s; }

.lb-bubble-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.lb-bubble-label{
  font-family: "slight-chance", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red-glow);
}

.lb-bubble-range{
  font-size: 0.72rem;
  color: var(--text-muted);
}

.lb-bubble-leader{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.lb-bubble-leader-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-bubble-name{
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.lb-bubble-score{
  font-family: "slight-chance", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--red-glow);
}

.lb-bubble-mini{
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

.lb-bubble-mini li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.lb-bubble-mini li span:last-child{
  font-weight: 600;
  color: var(--text);
}

/* Weekly/Monthly/Yearly render as compact ranked lists (same row markup
   as the daily list, just tighter) that size to however many reps
   actually qualify — no fixed height, so a 5-rep week doesn't leave a
   card full of empty space. Caps at 10 rows regardless of period. */
.lb-list--compact{
  padding: 2px 2px;
}

.lb-list--compact .lb-row{
  grid-template-columns: 22px 30px 1fr auto;
  gap: 10px;
  padding: 7px 8px;
}

.lb-list--compact .lb-avatar--sm{
  width: 30px;
  height: 30px;
  font-size: 0.62rem;
}

.lb-list--compact .lb-rank{
  font-size: 0.82rem;
}

.lb-list--compact .lb-name{
  font-size: 0.85rem;
}

.lb-list--compact .lb-score{
  font-size: 0.85rem;
}

.lb-bubble-note{
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  opacity: 0.8;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .lb-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px){
  .lb-row{
    grid-template-columns: 26px 34px 1fr auto;
    gap: 10px;
    padding: 8px 8px;
  }
  .lb-avatar{ width: 34px; height: 34px; font-size: 0.68rem; }
}