/* ===========================================================================
   Leaderboard — ported from design/leaderboard.html (source of truth).
   Dark hero with your own standing, discipline chips + season selector,
   the top-3 podium and the full table.
   =========================================================================== */

.lb-hero{
  background:linear-gradient(135deg, var(--ink), #2E3133);
  color:#fff; border-radius:var(--r-lg); padding:22px;
  margin-bottom:16px; position:relative; overflow:hidden;
}
.lb-hero::before{
  content:""; position:absolute; left:-50px; top:-50px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,185,79,.16), transparent);
}
.lb-hero h1{ position:relative; }
.lb-hero .you{
  display:flex; align-items:center; gap:12px; position:relative;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:12px;
}
.lb-hero .you .avatar{ flex-shrink:0; border:2px solid #FFD089; }
.lb-hero .you .body{ flex:1; min-width:0; }
.lb-hero .you .nm{ font-size:14px; font-weight:700; margin-bottom:2px; }
.lb-hero .you .sub{ font-size:11px; opacity:.7; }
.lb-hero .you .pos{ text-align:center; flex-shrink:0; padding-inline-start:8px; }
.lb-hero .you .pos .v{ font-size:24px; font-weight:800; color:#FFD089; }
.lb-hero .you .pos .k{ font-size:10px; opacity:.7; }
.lb-hero .you-empty{
  position:relative; font-size:12px; opacity:.8; line-height:1.9;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:12px;
}

/* چیپ رشته‌ها + انتخاب فصل */
.t-filters{ display:flex; align-items:center; gap:10px; padding:4px 0 16px; flex-wrap:wrap; }
.t-filter-bar{ display:flex; gap:8px; overflow-x:auto; flex:1; min-width:0; scrollbar-width:none; }
.t-filter-bar::-webkit-scrollbar{ display:none; }
.t-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; color:var(--ink-2);
  cursor:pointer; white-space:nowrap; flex-shrink:0; text-decoration:none;
}
.t-chip.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* These chips sit in a horizontal scroller, so an oversized invisible ::after
   would leak into its scroll area. Real padding is the safe way to reach the
   44px touch height here. */
@media (max-width: 767px) {
  .t-chip{ padding-top:12px; padding-bottom:12px; }
}

.lb-filter-group{
  display:inline-flex; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:3px; flex-shrink:0;
}
.lb-filter-group a{
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; color:var(--muted);
  text-decoration:none; white-space:nowrap;
}
.lb-filter-group a.is-on{ background:var(--ink); color:#fff; }
/* 30px tall as drawn. The pill itself keeps its size — only the area that
   answers a tap grows to 44px, so the group's shape is untouched. */
@media (max-width: 767px) {
  .lb-filter-group a{ position:relative; }
  .lb-filter-group a::after{
    content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:100%; height:100%; min-width:44px; min-height:44px;
  }
}

/* پودیوم */
.lb-podium{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  align-items:end; margin-bottom:16px;
}
.lb-pod{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 10px; text-align:center;
  position:relative; text-decoration:none; color:inherit;
}
.lb-pod .medal{
  width:40px; height:40px; border-radius:50%; margin:0 auto 8px;
  display:grid; place-items:center; color:#fff;
  font-size:16px; font-weight:800;
}
.lb-pod.gold{ background:linear-gradient(180deg, #FFFBF2, #FFF); border-color:#FFD089; }
.lb-pod.gold .medal{ background:linear-gradient(135deg, #FFD089, #F5A623); width:48px; height:48px; font-size:20px; }
.lb-pod.silver{ background:linear-gradient(180deg, #F5F6F8, #FFF); border-color:#C5CBD2; margin-top:18px; }
.lb-pod.silver .medal{ background:linear-gradient(135deg, #D8DDE3, #9AA3AB); }
.lb-pod.bronze{ background:linear-gradient(180deg, #FFF4ED, #FFF); border-color:#D6A887; margin-top:24px; }
.lb-pod.bronze .medal{ background:linear-gradient(135deg, #E8B388, #B97645); }
.lb-pod .nm{ font-size:12px; font-weight:800; line-height:1.4; margin-bottom:4px; min-height:32px; }
.lb-pod .pts{ font-size:13px; font-weight:800; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.lb-pod .badge{
  position:absolute; top:8px; inset-inline-start:8px;
  font-size:9px; font-weight:800; padding:2px 7px;
  border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-deep);
}
.lb-pod.gold .badge{ background:#FFE9B5; color:#8C5A0F; }

/* جدول */
.lb-table{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:4px 14px;
}
.lb-row{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.lb-row+.lb-row{ border-top:1px solid var(--line); }
.lb-row.is-you{ background:var(--accent-tint); margin-inline:-14px; padding-inline:14px; }
.lb-row .pos{
  width:26px; flex-shrink:0; text-align:center;
  font-size:13px; font-weight:800; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.lb-row .avatar{ width:38px; height:38px; flex-shrink:0; }
.lb-row .body{ flex:1; min-width:0; }
.lb-row .nm{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lb-row .sub{ font-size:11px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.lb-row .stats{ display:flex; gap:12px; flex-shrink:0; }
.lb-row .stats .v{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.lb-row .stats .k{ font-size:9px; color:var(--muted); }
.lb-row .stats > div{ text-align:center; }
.lb-row .pts{
  font-size:14px; font-weight:800; color:var(--accent-deep);
  flex-shrink:0; min-width:52px; text-align:left;
  font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
  .lb-row .stats{ display:none; }
}