/* ============================================================
   NeoPolymarket — Leaderboard CSS
   Place at: neopolymarket/assets/css/ranking.css
   ============================================================ */

:root {
    --bg:#080B10; --bg2:#0F1319; --bg3:#161C26; --card:#111722;
    --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
    --gold:#F0B429; --gold2:#FFD97D; --green:#0ECB81; --red:#F6465D;
    --blue2:#4D9FFF;
    --text:#E8ECF4; --text2:#A0AAB8; --text3:#606878;
    --font-display:'Fraunces',Georgia,serif;
    --font-body:'Syne',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body);
       font-size:15px; line-height:1.65; overflow-x:hidden; }
body::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); opacity:.5; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }

/* ── HERO ── */
.lb-hero {
    background:var(--bg2); border-bottom:1px solid var(--border);
    position:relative; overflow:hidden;
}
.lb-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(240,180,41,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(240,180,41,.03) 1px,transparent 1px);
    background-size:48px 48px;
}
.lb-hero-inner {
    position:relative; z-index:1; max-width:900px; margin:0 auto;
    padding:56px 24px 48px; text-align:center;
}
.lb-hero-badge {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(240,180,41,.1); border:1px solid rgba(240,180,41,.25);
    border-radius:100px; padding:5px 16px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:2px;
    text-transform:uppercase; color:var(--gold); margin-bottom:20px;
}
.lb-hero-title {
    font-family:var(--font-display); font-size:clamp(36px,5vw,56px);
    font-weight:900; letter-spacing:-2px; line-height:1.05; margin-bottom:16px;
}
.lb-hero-title span { color:var(--gold); }
.lb-hero-sub { font-size:15px; color:var(--text2); max-width:520px; margin:0 auto 32px; line-height:1.7; }

.lb-hero-stats {
    display:flex; align-items:center; justify-content:center;
    gap:0; flex-wrap:wrap;
}
.lhs-item { padding:0 32px; text-align:center; }
.lhs-val  { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--gold); }
.lhs-label{ font-size:12px; color:var(--text3); margin-top:3px; font-family:var(--font-mono); letter-spacing:1px; text-transform:uppercase; }
.lhs-divider { width:1px; height:40px; background:var(--border2); }

/* ── MY RANK BANNER ── */
.my-rank-banner {
    background:rgba(240,180,41,.06); border-bottom:1px solid rgba(240,180,41,.15);
}
.mrb-inner {
    max-width:900px; margin:0 auto; padding:16px 24px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.mrb-left  { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.mrb-avatar{ font-size:28px; }
.mrb-name  { font-size:12px; color:var(--text3); font-family:var(--font-mono); letter-spacing:1px; text-transform:uppercase; }
.mrb-username { font-weight:700; color:var(--text); font-size:15px; }
.mrb-rank  { font-family:var(--font-display); font-size:36px; font-weight:900; color:var(--gold); flex-shrink:0; }
.mrb-right { text-align:right; }
.mrb-earned { font-weight:700; color:var(--green); font-size:14px; }
.mrb-traded { font-size:12px; color:var(--text3); margin-top:2px; }

/* ── WRAPPER ── */
.lb-wrap { max-width:900px; margin:0 auto; padding:36px 24px 80px; }

/* ── PODIUM TOP 3 ── */
.lb-podium {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:16px; align-items:end; margin-bottom:32px;
}
.podium-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:18px; padding:28px 20px 24px;
    text-align:center; cursor:pointer;
    transition:transform .2s, border-color .2s; position:relative;
    display:flex; flex-direction:column; align-items:center; gap:6px;
}
.podium-card:hover { transform:translateY(-4px); border-color:var(--border2); }
.podium-1 { border-color:rgba(240,180,41,.35); background:rgba(240,180,41,.05); order:2; }
.podium-2 { order:1; }
.podium-3 { order:3; }

.pod-crown { font-size:28px; margin-bottom:4px; }
.pod-rank-badge {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:12px; font-weight:900;
    margin-bottom:8px;
}
.pod-gold   { background:var(--gold); color:#000; }
.pod-silver { background:#A0AAB8; color:#000; }
.pod-bronze { background:#CD7F32; color:#fff; }

.pod-avatar   { font-size:40px; margin-bottom:4px; }
.pod-name     { font-weight:700; font-size:14px; }
.pod-district { font-size:11px; color:var(--text3); display:flex; align-items:center; gap:4px; }
.pod-earned   { font-family:var(--font-display); font-size:18px; font-weight:900; color:var(--green); margin-top:6px; }
.pod-acc      { font-size:11px; color:var(--text3); display:flex; align-items:center; gap:4px; }

/* ── FULL TABLE ── */
.lb-table-wrap {
    background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden;
}
.lb-table-head {
    display:grid; grid-template-columns:56px 1fr 140px 120px 100px;
    padding:10px 20px; border-bottom:1px solid var(--border);
    font-family:var(--font-mono); font-size:10px; letter-spacing:2px;
    text-transform:uppercase; color:var(--text3);
}
.lth-rank    { text-align:center; }
.lth-trader  { }
.lth-stat    { text-align:right; }

.lb-row {
    display:grid; grid-template-columns:56px 1fr 140px 120px 100px;
    padding:14px 20px; border-bottom:1px solid var(--border);
    align-items:center; cursor:pointer; transition:background .15s;
}
.lb-row:last-child { border-bottom:none; }
.lb-row:hover      { background:rgba(255,255,255,.025); }
.lb-row-mine       { background:rgba(240,180,41,.06); }

.ltr-rank  { text-align:center; }
.rank-badge {
    display:inline-block; font-family:var(--font-mono); font-size:12px;
    font-weight:700; color:var(--text3);
}
.rank-badge.rank-top { color:var(--gold); }

.ltr-trader { display:flex; align-items:center; gap:12px; }
.ltr-avatar { font-size:24px; }
.ltr-name   { font-weight:700; font-size:14px; }
.ltr-district { font-size:11px; color:var(--text3); margin-top:2px; display:flex; align-items:center; gap:3px; }

.ltr-stat  { text-align:right; font-size:13px; font-weight:600; }

.you-badge {
    display:inline-block; background:rgba(240,180,41,.15);
    border:1px solid rgba(240,180,41,.3); color:var(--gold);
    font-size:10px; font-weight:700; padding:1px 7px; border-radius:100px;
    margin-left:6px; font-family:var(--font-mono); letter-spacing:1px;
}

.acc-bar-wrap {
    display:inline-block; width:48px; height:4px; border-radius:2px;
    background:rgba(255,255,255,.07); vertical-align:middle; margin-right:5px; overflow:hidden;
}
.acc-bar-fill { display:block; height:100%; border-radius:2px; background:var(--green); }

/* ── CTA STRIP ── */
.lb-cta {
    margin-top:24px; background:rgba(240,180,41,.06);
    border:1px solid rgba(240,180,41,.2); border-radius:14px; overflow:hidden;
}
.lb-cta-inner {
    padding:24px; display:flex; align-items:center;
    justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.lb-cta-title { font-family:var(--font-display); font-size:18px; font-weight:700; }
.lb-cta-sub   { font-size:13px; color:var(--text2); margin-top:4px; }
.btn-lb-cta {
    background:var(--gold); color:#000; font-weight:800; font-size:14px;
    padding:12px 24px; border-radius:10px; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    transition:all .2s;
}
.btn-lb-cta:hover { background:var(--gold2); transform:translateY(-2px); }

@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp .4s ease both; }

@media (max-width:700px) {
    .lb-podium { grid-template-columns:1fr; }
    .podium-1,.podium-2,.podium-3 { order:unset; }
    .lb-table-head { grid-template-columns:44px 1fr 110px; }
    .lb-table-head .lth-stat:nth-child(3),
    .lb-table-head .lth-stat:nth-child(5) { display:none; }
    .lb-row { grid-template-columns:44px 1fr 110px; }
    .lb-row .ltr-stat:nth-child(3),
    .lb-row .ltr-stat:nth-child(5) { display:none; }
    .lb-wrap { padding:24px 16px 80px; }
    .lhs-item { padding:0 16px; }
}