/* =========================================================================
   LEADERBOARD — perbaikan total (16 Sep 2026)
   Dimuat PALING AKHIR untuk mengalahkan 4 blok podium lama yang saling
   bertumpuk di app.css (baris ~1115, ~1874, ~2282).
   Struktur menjiplak konten.com; warna mengikuti brand Clypora/CMEDIA.
   ========================================================================= */

.lb{
  --lb-bg:transparent;
  --lb-card:#0c0c11;
  --lb-line:#22222c;
  --lb-line-soft:#1b1b24;
  --lb-txt:#fafafa;
  --lb-dim:#a1a1aa;
  --lb-gold:#e1d094;
  --lb-gold-2:#d4cfba;
  --lb-accent:#ff2e6a;
  --lb-accent-soft:rgba(255,46,106,.14);
  max-width:1180px;
  margin:0 auto;
  padding:4px 0 72px;
  font-family:'neue',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--lb-txt);
}

/* ---------- Toggle 7 Hari / All Time ---------- */
.lb .lb-toggle-wrap{display:flex;justify-content:center;margin:6px 0 26px;}
.lb .lb-toggle{
  display:inline-flex;gap:4px;padding:4px;
  background:#0c0c0c;border:1px solid var(--lb-line);
  border-radius:999px;
}
.lb .lb-toggle a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:86px;height:36px;padding:0 20px;
  font-size:14px;font-weight:500;line-height:1;
  color:var(--lb-dim);text-decoration:none;
  border-radius:999px;transition:color .18s,background .18s;
}
.lb .lb-toggle a:hover{color:var(--lb-txt);}
.lb .lb-toggle a.active{
  color:#ffffff;font-weight:600;
  background:linear-gradient(180deg,#ff6f9e 0%,var(--lb-accent) 52%,#8f04c4 100%);
  box-shadow:0 2px 10px rgba(255,46,106,.32);
}

/* ---------- Hero: judul + countdown ---------- */
.lb .lb-hero{text-align:center;margin-bottom:34px;}
.lb .lb-hero h1{
  margin:0;font-size:clamp(30px,5.4vw,46px);font-weight:700;
  letter-spacing:.14em;line-height:1.1;
  background:linear-gradient(180deg,#ffffff 0%,#cfd4d8 48%,#8b9196 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lb .lb-reset-label{margin:16px 0 10px;font-size:13px;color:var(--lb-dim);}
.lb .lb-timer{display:flex;align-items:flex-start;justify-content:center;gap:10px;}
.lb .lb-seg{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:56px;}
.lb .lb-seg strong{
  display:flex;align-items:center;justify-content:center;
  min-width:56px;height:52px;padding:0 10px;
  font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--lb-txt);background:var(--lb-card);
  border:1px solid var(--lb-line);border-radius:10px;
}
.lb .lb-seg small{font-size:11px;color:var(--lb-dim);letter-spacing:.04em;}
.lb .lb-sep{font-size:24px;line-height:52px;color:#3f3f46;}

/* ---------- Dropdown scope (All Time) ---------- */
.lb .lb-scope{position:relative;display:inline-block;margin-top:18px;}
.lb .lb-scope-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:42px;padding:0 16px;font-size:14px;color:var(--lb-txt);
  background:var(--lb-card);border:1px solid var(--lb-line);
  border-radius:10px;cursor:pointer;transition:border-color .18s;
}
.lb .lb-scope-btn:hover{border-color:#2d2d2d;}
.lb .lb-scope-btn svg{width:16px;height:16px;transition:transform .2s;}
.lb .lb-scope-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.lb .lb-scope-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:230px;padding:6px;z-index:40;text-align:left;
  background:#101010;border:1px solid var(--lb-line);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.lb .lb-scope-menu[hidden]{display:none;}
.lb .scope-option{
  display:block;padding:10px 12px;font-size:14px;
  color:var(--lb-dim);text-decoration:none;border-radius:8px;
}
.lb .scope-option:hover{background:#181818;color:var(--lb-txt);}
.lb .scope-option.is-selected{background:var(--lb-accent-soft);color:var(--lb-accent);font-weight:600;}

/* ---------- PODIUM (perbaikan inti: grid, bukan absolute) ---------- */
.lb .lb-podium{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;                /* dasar sejajar, tinggi berbeda */
  gap:18px;
  max-width:920px;
  margin:0 auto 46px;
  padding:0 8px;
}
.lb .lb-pod{
  position:static;                /* matikan absolute lama */
  display:flex;flex-direction:column;align-items:center;
  width:100%;margin:0;transform:none;float:none;
  background:none;border:0;
}
.lb .lb-pod-top{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  width:100%;padding:20px 14px 16px;
  background:var(--lb-card);
  border:1px solid var(--lb-line);
  border-radius:14px 14px 0 0;
  border-bottom:0;
}
.lb .lb-pod-avatar{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  font-size:24px;font-weight:600;color:#ffffff;
  background:linear-gradient(145deg,#ff6f9e,var(--lb-accent));
}
.lb .lb-pod-tier{display:inline-flex;align-items:center;gap:6px;}
.lb .lb-pod-tier img{width:18px;height:18px;object-fit:contain;}
.lb .lb-pod-tier em{font-style:normal;font-size:11px;color:var(--lb-dim);}
.lb .lb-pod-name{
  margin:0;max-width:100%;
  font-size:15px;font-weight:600;line-height:1.3;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb .lb-pod-payout{display:flex;flex-direction:column;align-items:center;gap:2px;}
.lb .lb-pod-payout small{font-size:11px;color:var(--lb-dim);}
.lb .lb-pod-payout strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}
.lb .lb-pod-prize{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 16px;
  background:#121212;border:1px solid var(--lb-line);border-top:0;
  font-size:13px;
}
.lb .lb-pod-prize span{color:var(--lb-dim);}
.lb .lb-pod-prize strong{color:var(--lb-gold);font-variant-numeric:tabular-nums;}
.lb .lb-pod-stand{width:100%;line-height:0;}
.lb .lb-pod-stand img{width:100%;height:auto;display:block;}

/* tinggi panggung: juara 1 tertinggi */
.lb .lb-pod-1 .lb-pod-stand{height:104px;}
.lb .lb-pod-2 .lb-pod-stand{height:74px;}
.lb .lb-pod-3 .lb-pod-stand{height:58px;}
.lb .lb-pod-stand img{height:100%;object-fit:fill;}

.lb .lb-pod-1 .lb-pod-avatar{
  width:76px;height:76px;font-size:28px;
  background:linear-gradient(145deg,#f5e6b0,var(--lb-gold));
  box-shadow:0 0 0 3px rgba(225,208,148,.22);
}
.lb .lb-pod-1 .lb-pod-top{border-color:rgba(225,208,148,.42);}
.lb .lb-pod-1 .lb-pod-name{font-size:17px;}

/* ---------- TABEL ---------- */
.lb .lb-table-card{
  overflow:hidden;
  background:var(--lb-card);
  border:1px solid var(--lb-line);
  border-radius:14px;
}
.lb .lb-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:14px;
}
.lb .lb-table th{
  padding:15px 16px;
  font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--lb-dim);text-align:left;
  background:#0b0b0b;
  border-bottom:1px solid var(--lb-line);
}
.lb .lb-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--lb-line-soft);
  vertical-align:middle;
}
.lb .lb-table tbody tr:last-child td{border-bottom:0;}
.lb .lb-row:hover td{background:#121212;}

.lb .lb-table .c-no{width:76px;}
.lb .lb-table .c-rank{width:92px;text-align:center;}
.lb .lb-table .c-payout{width:170px;text-align:right;}
.lb .lb-table .c-prize{width:150px;text-align:right;}

.lb .c-no strong{font-size:14px;font-weight:600;color:var(--lb-dim);font-variant-numeric:tabular-nums;}
.lb .c-user{display:flex;align-items:center;gap:10px;min-width:0;}
.lb .lb-mini-avatar{
  flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  font-size:13px;font-weight:600;color:#ffffff;
  background:linear-gradient(145deg,#ff6f9e,var(--lb-accent));
}
.lb .lb-user-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb .lb-rank-medal{width:26px;height:26px;object-fit:contain;display:inline-block;}
.lb .c-payout strong{font-weight:600;font-variant-numeric:tabular-nums;}
.lb .c-prize strong{color:var(--lb-gold);font-weight:600;font-variant-numeric:tabular-nums;}
.lb .lb-dash{color:#3f3f46;}

.lb .is-champion td{background:rgba(225,208,148,.05);}
.lb .is-champion .c-no strong{color:var(--lb-gold);}

.lb .lb-cutoff td{
  padding:9px 16px;
  font-size:11.5px;letter-spacing:.04em;color:var(--lb-dim);
  text-align:center;background:#0a0a0a;
  border-top:1px dashed #262626;border-bottom:1px dashed #262626;
}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .lb .lb-podium{gap:10px;max-width:100%;padding:0;}
  .lb .lb-pod-top{padding:14px 8px 12px;gap:7px;}
  .lb .lb-pod-avatar{width:48px;height:48px;font-size:19px;}
  .lb .lb-pod-1 .lb-pod-avatar{width:56px;height:56px;font-size:22px;}
  .lb .lb-pod-name{font-size:12px;}
  .lb .lb-pod-1 .lb-pod-name{font-size:13px;}
  .lb .lb-pod-payout strong{font-size:13px;}
  .lb .lb-pod-tier em{display:none;}
  .lb .lb-pod-prize{flex-direction:column;gap:1px;padding:8px 6px;font-size:11px;}
  .lb .lb-pod-1 .lb-pod-stand{height:72px;}
  .lb .lb-pod-2 .lb-pod-stand{height:52px;}
  .lb .lb-pod-3 .lb-pod-stand{height:40px;}

  .lb .lb-timer{gap:6px;}
  .lb .lb-seg,.lb .lb-seg strong{min-width:46px;}
  .lb .lb-seg strong{height:44px;font-size:20px;}
  .lb .lb-sep{line-height:44px;font-size:19px;}

  .lb .lb-table-card{overflow-x:auto;}
  .lb .lb-table{min-width:560px;}
  .lb .lb-table th,.lb .lb-table td{padding:12px 10px;}
  .lb .lb-table .c-no{width:56px;}
  .lb .lb-table .c-rank{width:66px;}
  .lb .lb-table .c-payout{width:132px;}
  .lb .lb-table .c-prize{width:118px;}
}

/* ---------- Perbaikan mobile lanjutan (16 Sep 2026) ---------- */
@media (max-width:860px){
  /* beri jarak dari tepi layar supaya kartu tidak mentok/terpotong */
  .lb{padding-left:12px;padding-right:12px;}

  /* podium: rapatkan supaya 3 kartu muat utuh */
  .lb .lb-podium{gap:7px;}
  .lb .lb-pod-top{padding:12px 6px 10px;}
  .lb .lb-pod-name{
    font-size:11px;line-height:1.25;
    white-space:normal;             /* boleh 2 baris, jangan dipotong */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:2.5em;
  }
  .lb .lb-pod-1 .lb-pod-name{font-size:12px;}
  .lb .lb-pod-payout small{font-size:10px;}
  .lb .lb-pod-payout strong{font-size:12px;}
  .lb .lb-pod-prize{padding:7px 4px;font-size:10px;}

  /* tabel: muat penuh tanpa perlu geser ke samping */
  .lb .lb-table{min-width:0;font-size:12.5px;table-layout:fixed;width:100%;}
  .lb .lb-table th,.lb .lb-table td{padding:11px 6px;}
  .lb .lb-table th{font-size:10px;letter-spacing:.02em;}
  .lb .lb-table .c-no{width:38px;}
  .lb .lb-table .c-rank{width:40px;}
  .lb .lb-table .c-payout{width:auto;min-width:96px;}
  .lb .lb-table .c-prize{width:auto;min-width:84px;}
  .lb .lb-mini-avatar{flex-basis:26px;width:26px;height:26px;font-size:11px;}
  .lb .c-user{gap:7px;}
  .lb .lb-user-name{font-size:12px;}
  .lb .lb-rank-medal{width:21px;height:21px;}
  .lb .c-payout strong,.lb .c-prize strong{font-size:12px;}
  .lb .lb-cutoff td{font-size:10px;padding:7px 6px;}
}

/* layar sangat sempit */
@media (max-width:400px){
  .lb{padding-left:9px;padding-right:9px;}
  .lb .lb-podium{gap:5px;}
  .lb .lb-pod-avatar{width:42px;height:42px;font-size:17px;}
  .lb .lb-pod-1 .lb-pod-avatar{width:50px;height:50px;font-size:20px;}
  .lb .lb-table th,.lb .lb-table td{padding:10px 4px;}
  .lb .lb-table .c-no{width:32px;}
  .lb .lb-table .c-rank{width:34px;}
  .lb .lb-user-name{font-size:11.5px;}
  .lb .c-payout strong,.lb .c-prize strong{font-size:11.5px;}
}

/* =========================================================================
   PODIUM 3D — aset asli konten.com (podium.png, dipotong 3 pilar)
   Proporsi asli: emas 242x551, perak 271x482, perunggu 271x363
   Tinggi pilar dibuat proporsional dan alas disejajarkan.
   ========================================================================= */

.lb .lb-pod-stand{
  width:100%;
  line-height:0;
  display:flex;
  align-items:flex-end;      /* alas rata bawah */
  justify-content:center;
  overflow:visible;
}
.lb .lb-pod-stand img{
  width:auto;                 /* jaga proporsi asli, jangan digepengkan */
  height:100%;
  object-fit:contain;
  display:block;
  max-width:100%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* tinggi mengikuti perbandingan asli 551 : 482 : 363 */
.lb .lb-pod-1 .lb-pod-stand{height:300px;}
.lb .lb-pod-2 .lb-pod-stand{height:262px;}
.lb .lb-pod-3 .lb-pod-stand{height:197px;}

/* kartu menempel rapat di atas pilar, tanpa celah */
.lb .lb-pod-prize{margin-bottom:0;}
.lb .lb-pod{justify-content:flex-end;}

@media (max-width:860px){
  .lb .lb-pod-1 .lb-pod-stand{height:178px;}
  .lb .lb-pod-2 .lb-pod-stand{height:155px;}
  .lb .lb-pod-3 .lb-pod-stand{height:117px;}
}
@media (max-width:400px){
  .lb .lb-pod-1 .lb-pod-stand{height:150px;}
  .lb .lb-pod-2 .lb-pod-stand{height:131px;}
  .lb .lb-pod-3 .lb-pod-stand{height:99px;}
}