/* =========================================================
 LEADERBOARD — Single Source of Truth
 Mobile-first & stabil lintas device
 Podium bertingkat + List-card mobile (≤480px)
 Tabel tetap untuk >480px. Scope hanya di #leaderboard-host.
========================================================= */
html{ -webkit-text-size-adjust: 100%; }
:root{
  --gold:#f5b942; --silver:#cfd3da; --bronze:#d48957;
  --lb-bg:#fff; --lb-border:#e7e7ea; --lb-chip:#fff; --lb-chip-border:#eaeaea;
  --text:#333; --muted:#6b7280; --brand:#D21F3C;
  /* Offset vertikal chip poin */
  --point-offset-desktop:-14px;
  --point-offset-mobile:-8px;
  --point-offset-tiny:-4px;
}

/* ====== JUDUL SEKSI berupa GAMBAR ====== */
#leaderboard-host .section-title-img{
  display:flex; align-items:center; justify-content:center;
  margin:0 0 10px;
}
#leaderboard-host .section-title-img picture{ display:block; }
#leaderboard-host .section-title-img img{
  display:block; height:auto;
  width:min(82%, 560px);
  margin-inline:auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.06));
}
@media (max-width:480px){
  #leaderboard-host .section-title-img img{ width:min(86%, 520px); }
}
@media (max-width:360px){
  #leaderboard-host .section-title-img img{ width:min(90%, 520px); }
}

/* ===== Host card ===== */
#leaderboard-host .lb-card{
  background:var(--lb-bg);
  border:1px solid var(--lb-border);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding:14px;
  overflow-x:hidden;
}

/* Controls */
#leaderboard-host .lb-controls{
  display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:8px;
}

/* Search result inline + tombol clear */
#leaderboard-host .search-wrap{ position:relative; }
#leaderboard-host .search-wrap input{ padding-right:42px; }
#leaderboard-host .clear-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:none; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:#f4f5f7; color:#777; cursor:pointer;
}
#leaderboard-host .clear-btn.visible{ display:flex; }
#leaderboard-host .clear-btn:hover{ background:#eceef2; color:#444; }
#leaderboard-host .clear-btn i{ font-size:16px; line-height:1; }

#leaderboard-host .lb-search-inline{
  display:none; margin:6px 0 10px; padding:10px 12px;
  border:1px solid var(--lb-border); border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#fafbff 100%);
  color:var(--text); box-shadow:0 8px 18px rgba(0,0,0,.06);
}
#leaderboard-host .lb-search-inline .hit{
  display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center;
}
#leaderboard-host .lb-search-inline .gap{
  margin-top:6px; color:#D21F3C; font-weight:700; font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
#leaderboard-host .rank-badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; background:#fff;
  border:1px solid var(--lb-border); box-shadow:0 4px 10px rgba(0,0,0,.06);
}

/* ===== Podium ===== */
#leaderboard-host .lb-podium{
  --bh: clamp(150px, 26vw, 220px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end; gap:16px; margin:6px 0 14px; position:relative;
}
#leaderboard-host .podium-col{ --step:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
#leaderboard-host .p-name{
  margin:0 6px 2px; text-align:center; font-weight:800;
  font-size:clamp(14px,3.6vw,16px); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-wrap:balance;
}
#leaderboard-host .p-member{ margin:0 0 8px; color:var(--muted); font-size:12.5px; }

/* Kotak juara / stage */
#leaderboard-host .stage{
  --ring:#e7e7ea;
  height: calc(var(--bh) * var(--step));
  width:100%;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(180deg, var(--tone1,#ffffff), var(--tone2,#fafbff));
  border:2.5px solid var(--ring);
  box-shadow: 0 12px 24px rgba(0,0,0,.06), inset 0 6px 12px rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  padding: 10px;               /* ruang aman dari border */
  margin-bottom:18px;
  overflow:hidden;             /* pengaman, tapi tidak akan terpakai dengan contain */
}

/* Gaya warna per juara */
#leaderboard-host .podium-col.first  { --step:1.00; }
#leaderboard-host .podium-col.second { --step:0.90; }
#leaderboard-host .podium-col.third  { --step:0.82; }
#leaderboard-host .podium-col.first  .stage{ --ring:var(--gold);  --tone1:#fff7d0; --tone2:#fffae6; }
#leaderboard-host .podium-col.second .stage{ --ring:var(--silver);--tone1:#f2f4f8; --tone2:#ffffff; }
#leaderboard-host .podium-col.third  .stage{ --ring:var(--bronze); --tone1:#fde6d2; --tone2:#fff2e6; }

/* ===== PNG karakter — isi penuh content box TANPA POTONG =====
   Kunci: width:100% + height:100% pada <img> + object-fit:contain
   -> Gambar selalu terlihat utuh dan proporsional di dalam stage. */
#leaderboard-host .podium-img{
  display:block;
  width:100%;
  height:100%;
  object-fit: contain;          /* tidak pernah crop */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

/* Penyesuaian kecil di layar sempit */
@media (max-width: 414px){
  #leaderboard-host .lb-podium{ gap:18px; }
  #leaderboard-host .p-point{
    margin-top: var(--point-offset-mobile);
    font-size:12.5px; gap:6px; max-width:90%;
  }
}
@media (max-width: 360px){
  #leaderboard-host .podium-col.first  { --step:1.00; }
  #leaderboard-host .podium-col.second { --step:0.88; }
  #leaderboard-host .podium-col.third  { --step:0.80; }
  #leaderboard-host .p-point{
    margin-top: var(--point-offset-tiny);
    font-size:11.5px; gap:5px; max-width:88%;
  }
}

/* ===== POIN (hilangkan chip/pill) ===== */
#leaderboard-host .p-point{
  margin-top: var(--point-offset-desktop);
  display:inline-flex; align-items:center; gap:6px;
  padding:0; min-height:auto; border-radius:0;
  background:transparent; border:0; box-shadow:none;
  font-size:13px; line-height:1.1; white-space:nowrap;
  max-width:92%;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
#leaderboard-host .p-point .num{ font-weight:800; }

/* ===== Kartu daftar/tabel ===== */
#leaderboard-host .lb-table-card{
  background:#fff; border:1px solid var(--lb-border); border-radius:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.06); padding:10px; margin-top:8px;
  overflow:hidden; contain:layout paint style;
}
#leaderboard-host .table-accent{ height:6px; border-radius:999px; background:linear-gradient(90deg,#D21F3C,#F75353); opacity:.22; margin:0 6px 8px }
#leaderboard-host #lb-meta{ display:none !important; }
#leaderboard-host .lb-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
#leaderboard-host .lb-table thead th{
  background:#f6f7f9; text-align:left; padding:10px;
  border-bottom:1px solid var(--lb-border);
  font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
#leaderboard-host .lb-table tbody td{
  padding:10px; border-bottom:1px solid var(--lb-border); vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#leaderboard-host .lb-table tbody tr:hover{ background:#fafbff }
#leaderboard-host .mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
#leaderboard-host .empty{ color:#888; text-align:center; padding:16px }

/* Mobile list-card (≤480px) */
#leaderboard-host .lb-list{ display:none; }
@media (max-width: 480px){
  #leaderboard-host .lb-table{ display:none; }
  #leaderboard-host .lb-list{ display:block; }
  #leaderboard-host .lb-li{
    display:grid;
    grid-template-columns:56px 1fr auto;
    gap:10px; align-items:center;
    padding:12px 14px; border-bottom:1px solid var(--lb-border);
    background:#fff;
  }
  #leaderboard-host .lb-li:last-child{ border-bottom:0; }
  #leaderboard-host .lb-li .rk{ width:56px; height:40px; display:grid; place-items:center; }
  #leaderboard-host .lb-li .rk .rank-badge{
    padding:6px 10px; border-radius:999px; font-weight:800; background:#fff;
    border:1px solid var(--lb-border); box-shadow:0 4px 10px rgba(0,0,0,.06);
    font-size:13px;
  }
  #leaderboard-host .lb-li .who{ min-width:0; }
  #leaderboard-host .lb-li .who .nm{
    font-weight:800; color:var(--text);
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:14px;
  }
  #leaderboard-host .lb-li .who .mb{
    color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
  }
  #leaderboard-host .lb-li .pt{
    font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
    margin-left:auto; text-align:right; min-width:72px;
  }
}
@media (max-width: 360px){
  #leaderboard-host .lb-li{ grid-template-columns:54px 1fr auto; gap:8px; padding:10px 10px; }
  #leaderboard-host .lb-li .rk .rank-badge{ font-size:12.5px; padding:5px 9px; }
  #leaderboard-host .lb-li .who .nm{ font-size:13.5px; }
  #leaderboard-host .lb-li .pt{ min-width:66px; font-size:13.5px; }
}