:root{
      --bg:#080511;
      --bg2:#0d0818;
      --card:#120c22;
      --card2:#17102b;
      --line:rgba(151,117,255,.16);
      --line-strong:rgba(151,117,255,.28);
      --text:#f6f2ff;
      --muted-podium:#9A4BFF;
      --purple:#8b5cf6;
      --purple2:#6d28d9;
      --gold1:#facc15;
      --gold2:#f59e0b;
      --silver1:#e2e8f0;
      --silver2:#94a3b8;
      --bronze1:#fdba74;
      --bronze2:#f97316;
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --radius:28px;
    }

   
   

    .page-podium{
      padding:28px 0 40px;
    }

    .hero-podium{
      border:1px solid var(--line);
      border-radius:32px;
      padding:28px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
      margin-bottom:22px;
    }

    .hero-podium::before{
      content:"";
      position:absolute;
      right:-70px;
      top:-70px;
      width:220px;
      height:220px;
      background:radial-gradient(circle, rgba(139,92,246,.28), transparent 68%);
      pointer-events:none;
    }

    .badge-podium{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 14px;
      border-radius:999px;
      background:rgba(139,92,246,.14);
      color:#e6dcff;
      border:1px solid rgba(139,92,246,.22);
      font-size:13px;
      font-weight:700;
      margin-bottom:14px;
    }

    .hero-podium h1{
      margin:0;
      font-weight: bold;
      font-size:clamp(28px, 4vw, 46px);
      background: linear-gradient(135deg, #ffffff 0%, #bb86fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.15;
      letter-spacing:-0.03em;
    }


   

    .hero-podium p{
      margin:12px 0 0;
      color:var(--muted-podium);
      font-size:15px;
      line-height:1.7;
      max-width:760px;
    }

    .podium-wrap{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:18px;
}

.podium-card{
  border:1px solid rgba(151,117,255,.18);
  border-radius:24px;
  padding:16px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.podium-card.top1{
  background:linear-gradient( #facc1500, #f59e0b1f);
  border-color:rgba(250,204,21,.35);
}

.podium-card.top2{
  background: linear-gradient(#e5e7eb00, #9ca3af1f);
}

.podium-card.top3{
  background: linear-gradient(#fb923c00, #b453091f);
}

.podium-rank{
  font-size:13px;
  font-weight:800;
  margin-bottom:10px;
  opacity:.8;
}

.podium-avatar{
  width:150px;
  height:150px;
  border-radius:999px;
  margin:0 auto 10px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.1);
}


.podium-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

  .podium-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
    }

    .podium-stat{
      background: rgb(0 0 0 / 20%);
      border:1px solid rgba(151,117,255,.12);
      border-radius:18px;
      padding:10px;
      min-width:0;
    }

    .podium-stat.full{
      grid-column: 1 / -1;
    }

    .podium-name{
      font-size:25px;
      font-weight:800;
      margin-bottom:6px;
    }

    .podium-stat-label{
      font-size:14px;
      color:var(--muted-podium);
      margin-bottom:3px;
      font-weight: 900;
      line-height:1.3;
    }

    .podium-value-label{
      font-size:20px;
      line-height:1.1;
      font-weight:900;
      letter-spacing:-0.03em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

/* warna */
.top1 .podium-rank{
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #2a1800;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 900;
  border: 2px solid rgba(250,204,21,.6);
  margin: 0 auto 10px;
  box-shadow: 0 6px 20px rgba(250,204,21,.35),inset 0 1px 0 rgba(255,255,255,.4);
  margin: 0 auto 10px; 
  animation: crownBounce 2s infinite ease-in-out;
}



@keyframes crownBounce{
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}



.top2 .podium-rank{ 
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;

  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  color: #111827;

  border-radius: 30px;
  font-size: 20px;
  font-weight: 900;

  border: 2px solid rgba(255,255,255,.5);

  margin: 0 auto 10px;

  box-shadow: 
    0 6px 20px rgba(255,255,255,.25),
    inset 0 1px 0 rgba(255,255,255,.6);
  animation: crownBounce 2s infinite ease-in-out;


}

.top3 .podium-rank{  
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;

  background: linear-gradient(135deg, #fb923c, #b45309);
  color: #2a1800;

  border-radius: 30px;
  font-size: 20px;
  font-weight: 900;

  border: 2px solid rgba(251,146,60,.5);

  margin: 0 auto 10px;

  box-shadow: 
    0 6px 20px rgba(251,146,60,.35),
    inset 0 1px 0 rgba(255,255,255,.4);
      animation: crownBounce 2s infinite ease-in-out;

}

/* mobile */
@media(max-width:640px){
  .podium-wrap{
    grid-template-columns:1fr;
  }

  .podium-card.top1{
    transform:none;
  }
}

    .summary{
      margin-top:22px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
    }

    .summary-card{
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius:20px;
      padding:18px;
    }

    .summary-label{
      color:var(--muted-podium);
      font-size:13px;
      margin-bottom:8px;
    }

    .summary-value{
      font-size:clamp(19px,2vw,28px);
      font-weight:800;
      letter-spacing:-0.02em;
    }

    .board{
    }

    .board-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      margin-bottom:18px;
    }

    .board-title h2{
      font-weight: 800;
      margin: 0;
      font-size: 25px;
      background: linear-gradient(135deg, #ffffff 0%, #bb86fc 100%);
        background-clip: border-box;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.15;
      letter-spacing: -0.03em;
    }

    .board-title p{
      font-weight: bold;
      margin:8px 0 0;
      color:var(--muted-podium);
      font-size:14px;
    }

    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .tab-btn{
      appearance:none;
      border:none;
      outline:none;
      cursor:pointer;
      padding:13px 18px;
      border-radius:16px;
      font-size:14px;
      font-weight:800;
      color:#f3ebff;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      transition:.22s ease;
      min-width:110px;
    }

    .tab-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(151,117,255,.26);
    }

    .tab-btn.active{
      background:linear-gradient(90deg, #7a3cff, #9a4bff);
      border-color:transparent;
    }

    .leaderboard-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

        .leader-row{
      display:grid;
      grid-template-columns:minmax(240px, 1.2fr) minmax(0, 1fr);
      gap:18px;
      align-items:center;
      border:1px solid rgba(151,117,255,.14);
      border-radius:15px;
      padding:10px;
      transition:transform 0.3s ease;
    }

    .leader-row:hover{
      transform: scale(1.05);
    }


    .leader-left{
      display:flex;
      align-items:center;
      gap:16px;
      min-width:0;
    }
    .avatar-box{
      width:50px;
      height:50px;
      border-radius:999px;
      overflow:hidden;
      flex-shrink:0;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .avatar-box img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .avatar-fallback{
      font-size:22px;
      font-weight:900;
      color:#d9c8ff;
    }

    .rank-badge-podium{
      width:50px;
      height:50px;
      border-radius:999px;
      display:grid;
      place-items:center;
      flex-shrink:0;
      font-size:24px;
      font-weight:900;
      letter-spacing:-0.03em;
      color:#fff;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.06);
    }


    .rank-badge-podium.top-1{
      background:linear-gradient(135deg,var(--gold1),var(--gold2));
      color:#201200;
    }

    .rank-badge-podium.top-2{
      background:linear-gradient(135deg,var(--silver1),var(--silver2));
      color:#0f172a;
    }

    .rank-badge-podium.top-3{
      background:linear-gradient(135deg,var(--bronze1),var(--bronze2));
      color:#2b1205;
    }

    .buyer-info{
      min-width:0;
    }

    .buyer-name{
      font-size:25px;
      font-weight:900;
      letter-spacing:-0.03em;
      line-height:1.05;
      margin:0 0 6px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .buyer-id{
      font-weight: 800;
      color:var(--muted-podium);
      font-size:14px;
    }

    .stats-grid-podium{
      text-align:center;
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
    }

    .mini-stat{
      border-left: 1px solid #ffffff12;
      padding:10px;
      min-width:0;
    }

    .mini-stat-label{
      font-weight: 800;
      font-size:14px;
      color:var(--muted-podium);
      margin-bottom:8px;
      line-height:1.3;
    }

    .mini-stat-value{
      font-size:16px;
      line-height:1.1;
      font-weight:900;
      letter-spacing:-0.03em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .loading-state,
    .empty-state{
      padding:38px 20px;
      text-align:center;
      border-radius:24px;
      border:1px dashed rgba(151,117,255,.18);
      color:var(--muted-podium);
      background:rgba(255,255,255,.02);
    }

    .loading-dots{
      margin-top:12px;
      display:inline-flex;
      gap:6px;
    }

    .loading-dots span{
      width:8px;
      height:8px;
      border-radius:999px;
      background:#c8b3ff;
      animation:blink 1s infinite ease-in-out;
    }

    .loading-dots span:nth-child(2){ animation-delay:.15s; }
    .loading-dots span:nth-child(3){ animation-delay:.3s; }

    @keyframes blink{
      0%,80%,100%{ opacity:.25; transform:scale(.9); }
      40%{ opacity:1; transform:scale(1); }
    }

    .board-note{
      margin-top:16px;
      text-align:center;
      font-size:13px;
      color:var(--muted-podium);
    }

    @media (max-width: 980px){
      .summary{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }

      .leader-row{
        grid-template-columns:1fr;
      }

      .buyer-name{
        font-size:26px;
      }
    }

    @media (max-width: 768px){
  .container{
    width:min(100% - 16px, 100%);
  }


  .summary{
    grid-template-columns:1fr;
  }

  .tabs{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }

  .tab-btn{
    width:100%;
    min-width:unset;
  }


  .rank-badge{
    width:38px;
    height:38px;
    border-radius:999px;
    font-size:16px;
    flex-shrink:0;
  }

  .avatar-box{
    width:40px;
    height:40px;
    border-radius:999px;
    overflow:hidden;
    flex-shrink:0;
  }

  .buyer-name{
    font-size:12px;
    line-height:1.1;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:0;
  }
  .buyer-id{
    font-size: 12px;
  }


 .stats-grid{
  width:100%;
  display:flex;
  justify-content:flex-end; /* ⬅️ ini penting */
}

 .leader-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:12px 14px;
  }

  .leader-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .buyer-info{
    min-width:0;
  }

  .stats-grid{
    width:100%;
    min-width:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
  }

  .mini-stat{
    padding:0;
    border:none;
    background:transparent;
    width:auto;
    min-width:max-content;
  }

  .mini-stat:nth-child(1),
  .mini-stat:nth-child(3){
    display:none;
  }

  .mini-stat:nth-child(2){
    display:block;
    margin-left:auto;
  }

  .mini-stat-label{
    display:none;
  }

  .mini-stat:nth-child(2) .mini-stat-value{
    display:block;
    padding:0;
    margin:0;
    text-align:right;
    font-size:14px;
    font-weight:800;
    padding-left: 30px;
    white-space:nowrap;
  }

  .stats-grid-podium{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }

  .mini-stat.full{
    grid-column:1 / -1;
  }

  .mini-stat-value{
    font-size:14px;
  }
  .rank-badge-podium{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 14px;
  }

  
}