/* ===== SUSTAINREWARDS — Sidebar Layout ===== */
:root {
  --sb-w: 218px;
  --sb-bg: #0f1624;
  --sb-line: rgba(255,255,255,.06);
  --bg-hero: #080e1a;
  --bg-main: #060b14;
  --txt: #e8e4ff;
  --txt-dim: #8a90a8;
  --accent: #4a9eff;
  --accent-2: #6db8ff;
  --accent-glow: rgba(74,158,255,.45);
  --gold: #ffd23f;
  --gold-glow: rgba(255,210,63,.5);
  --green: #53fc18;
  --card-bg: rgba(14,20,36,.9);
  --card-line: rgba(255,255,255,.08);
  --radius: 14px;
  --maxw: 1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%;font-family:'Outfit',system-ui,sans-serif;background:var(--bg-main);color:var(--txt);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
#root{width:100%}
h1,h2,h3{font-family:'Sora',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block}

/* ── APP SHELL ── */
.app-layout{display:flex;min-height:100vh;width:100%;position:relative}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sb-w);flex-shrink:0;
  background:linear-gradient(180deg,#111927 0%,#0c1320 100%);
  border-right:1px solid var(--sb-line);
  position:fixed;top:0;left:0;height:100vh;
  display:flex;flex-direction:column;z-index:50;
  overflow-y:auto;overflow-x:hidden}
.sb-logo{padding:20px 16px 16px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--sb-line)}
.sb-logo img{width:36px;height:36px;border-radius:9px;flex-shrink:0}
.sb-logo-name{font-family:'Sora';font-weight:800;font-size:15px;line-height:1.15}
.sb-logo-name .top{display:block;font-size:16px;color:#fff}
.sb-logo-name .vip{color:var(--accent-2);font-size:12px;letter-spacing:.06em}

/* nav section */
.sb-nav{padding:14px 10px 0;flex:1}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  cursor:pointer;transition:background .18s,color .18s;color:var(--txt-dim);
  font-size:14px;font-weight:500;position:relative;margin-bottom:3px;
  -webkit-user-select:none;user-select:none}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-item.active{background:rgba(74,158,255,.14);color:var(--accent-2)}
.sb-item.is-soon{cursor:default;opacity:.65}
.sb-item.is-soon:hover{background:transparent;color:var(--txt-dim)}
.sb-item svg{width:18px;height:18px;flex-shrink:0}
.sb-badge{margin-left:auto;background:var(--accent);color:#fff;
  font-family:'Sora';font-weight:700;font-size:10px;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;text-transform:uppercase}
.sb-badge.gold{background:var(--gold);color:#3a2c00}
.sb-badge.soon{background:rgba(255,255,255,.1);color:var(--txt-dim);border:1px solid var(--sb-line)}
.sb-badge.live{background:var(--green);color:#0a1a04}
.sb-badge.new{background:linear-gradient(135deg,#8b7bff,#4a9eff);color:#fff}

.sb-section-label{padding:16px 12px 8px;font-family:'Sora';font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);
  display:flex;align-items:center;justify-content:space-between}
.sb-section-label span{opacity:.5}

/* socials */
.sb-socials{padding:10px 10px 24px;border-top:1px solid var(--sb-line)}
.sb-social{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:var(--txt-dim);font-size:13px;transition:.18s;cursor:pointer;margin-bottom:2px}
.sb-social:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-social svg{width:16px;height:16px;flex-shrink:0}

/* ── MAIN ── */
.main{margin-left:var(--sb-w);width:calc(100% - var(--sb-w));flex:none;display:flex;flex-direction:column;min-width:0;position:relative}

/* ── FALLING BG ── */
.bg-root{position:fixed;left:var(--sb-w);right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 75% at 50% 0%,#1a3050 0%,#0d1e34 30%,#08111f 60%,var(--bg-hero) 100%)}
.bg-aurora{position:absolute;inset:0;
  background:
    radial-gradient(44% 40% at 20% 25%,rgba(30,90,200,.22) 0%,transparent 70%),
    radial-gradient(38% 34% at 80% 22%,rgba(60,40,160,.18) 0%,transparent 70%),
    radial-gradient(50% 44% at 50% 105%,rgba(20,60,180,.22) 0%,transparent 70%)}
.bg-dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(100,140,255,.10) 1.2px,transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(65% 60% at 50% 30%,#000,transparent 90%);
  mask-image:radial-gradient(65% 60% at 50% 30%,#000,transparent 90%)}
#fall-canvas{position:absolute;inset:0;width:100%;height:100%}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;width:100%;display:flex;align-items:center;
  justify-content:center;overflow:hidden;z-index:1}

/* characters */
.char{position:absolute;bottom:0;z-index:2;pointer-events:none;display:flex;align-items:flex-end}
.char-left{left:0;transform-origin:bottom left}
.char-right{right:0;transform-origin:bottom right}
.char img{max-height:min(78vh,700px);max-width:clamp(200px,28vw,400px);width:auto;height:auto;object-fit:contain;display:block}
@media(max-width:860px){.char img{max-height:min(62vh,480px);max-width:clamp(160px,22vw,280px)}}
@media(max-width:580px){.char{display:none}}

/* floating badges */
.float-badge{position:absolute;z-index:6;pointer-events:none}
.float-badge img{filter:drop-shadow(0 4px 16px rgba(0,0,0,.7))}
.badge-tl{top:26%;left:5%;width:96px;animation:fbob 3s ease-in-out infinite}
.badge-tr{top:24%;right:3%;width:86px;animation:fbob 3.4s ease-in-out infinite .5s}
@keyframes fbob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}
@media(max-width:860px){.float-badge{display:none}}

/* hero center */
.hero-center{position:relative;z-index:4;text-align:center;padding:0 20px 200px;
  max-width:580px;width:100%;margin:0 auto}
.stake-label{font-family:'Georgia','Times New Roman',serif;font-style:italic;
  font-size:28px;color:#fff;opacity:.9;margin-bottom:0;letter-spacing:.02em}
.hero-title{font-size:clamp(52px,9vw,120px);line-height:.9;text-transform:uppercase;
  color:#fff;text-shadow:0 0 60px rgba(74,158,255,.4),0 2px 0 rgba(0,0,0,.8);
  margin-bottom:4px}
.hero-title .blue{color:var(--accent-2);text-shadow:0 0 40px var(--accent-glow),0 0 80px rgba(74,158,255,.2)}
.hero-sub-text{font-size:clamp(13px,1.4vw,16px);color:var(--txt-dim);line-height:1.55;
  margin:18px auto 28px;max-width:460px;text-align:center}
.hero-sub-text .hl{color:var(--accent-2);font-weight:600}
.hero-sub-text b{color:#fff}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.chevrons{display:flex;gap:8px;justify-content:center;margin-top:28px;opacity:.5}
.chevrons svg{width:22px;height:22px;color:var(--accent-2);animation:chev-pop 1.8s ease-in-out infinite}
.chevrons svg:nth-child(1){animation-delay:0s}
.chevrons svg:nth-child(2){animation-delay:.2s}
.chevrons svg:nth-child(3){animation-delay:.4s}
@keyframes chev-pop{0%,60%,100%{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(6px)}}

/* mountain — sits ABOVE characters, full bleed */
.mountain-wrap{position:absolute;bottom:0;left:-2px;right:-2px;z-index:5;pointer-events:none;line-height:0}
.mountain-wrap svg{width:calc(100% + 4px);height:clamp(200px,34vh,340px);display:block}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
  font-family:'Sora';font-weight:700;font-size:14px;letter-spacing:.05em;
  padding:13px 24px;border-radius:12px;color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.15);
  transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.13)}
.btn:active{transform:translateY(0)}
.btn-blue{background:linear-gradient(160deg,var(--accent-2),#2b7fe0);
  box-shadow:0 6px 22px -4px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.2);color:#fff}
.btn-blue:hover{box-shadow:0 14px 32px -6px var(--accent-glow)}
.btn-gold{background:linear-gradient(160deg,#ffe07a,var(--gold));color:#3a2c00;
  box-shadow:0 6px 22px -4px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{box-shadow:0 14px 32px -6px var(--gold-glow)}
.btn-kick{background:linear-gradient(160deg,#7eff50,var(--green));color:#0a1a04;
  box-shadow:0 6px 22px -4px rgba(83,252,24,.45)}
.btn-lg{font-size:16px;padding:15px 30px;border-radius:13px}
.btn .stake{font-style:italic;font-family:'Outfit'}

/* ── CONTENT SECTIONS ── */
.content{position:relative;z-index:1;background:var(--bg-main)}
.section{padding:72px 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section-head{text-align:center;margin-bottom:48px}
.section-head .k{font-family:'Sora';letter-spacing:.3em;font-size:11px;
  color:var(--txt-dim);text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-size:clamp(26px,4vw,48px);text-transform:uppercase}
.section-head h2 em{font-style:normal;color:var(--accent-2)}
.section-head h2 .gold{color:var(--gold)}

/* perks */
.perks-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:720px){.perks-row{grid-template-columns:repeat(2,1fr)}}
.perk{background:var(--card-bg);border:1px solid var(--card-line);border-radius:13px;
  padding:20px 16px;text-align:center;backdrop-filter:blur(10px);
  transition:transform .22s,border-color .25s}
.perk:hover{transform:translateY(-5px);border-color:rgba(74,158,255,.4)}
.perk-big{font-family:'Sora';font-weight:800;font-size:34px;color:var(--accent-2);line-height:1}
.perk-small{margin-top:8px;font-size:13px;color:var(--txt-dim)}

/* bonus cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:80px}
@media(max-width:860px){.cards{grid-template-columns:1fr;max-width:420px;margin:0 auto;padding-top:70px}}
.card-v2{position:relative;background:#0e1624;border:1.5px solid rgba(255,200,50,.28);
  border-radius:16px;padding:56px 20px 22px;text-align:center;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.card-v2:hover{transform:translateY(-8px);box-shadow:0 28px 60px -16px rgba(255,180,40,.2)}
.card-v2.feat{border-color:rgba(74,158,255,.4);box-shadow:0 0 28px rgba(74,158,255,.1)}
.card-v2.feat:hover{box-shadow:0 28px 60px -16px rgba(74,158,255,.3)}
.card-float-icon{position:absolute;top:-58px;left:50%;transform:translateX(-50%);
  width:110px;height:110px;pointer-events:none;transition:transform .3s}
.card-v2:hover .card-float-icon{transform:translateX(-50%) translateY(-7px) scale(1.07)}
.card-v2-title{font-family:'Sora';font-weight:800;font-size:clamp(18px,2.4vw,26px);
  text-transform:uppercase;color:var(--gold);letter-spacing:.03em;margin-top:4px}
.card-v2.feat .card-v2-title{color:var(--accent-2)}
.card-v2-sub{font-size:12px;color:var(--txt-dim);margin-top:4px;margin-bottom:16px;letter-spacing:.04em}
.card-pills{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.card-pill{background:rgba(255,255,255,.05);border-radius:8px;padding:10px 13px;
  font-size:13.5px;color:#cdd0e8;line-height:1.3}
.card-v2.feat .card-pill{background:rgba(74,158,255,.07)}
.hi-gold{color:var(--gold);font-weight:700}
.hi-blue{color:var(--accent-2);font-weight:700}
.card-btn{display:flex;align-items:center;justify-content:center;
  width:100%;padding:12px;border-radius:10px;font-family:'Sora';font-weight:800;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:.18s;
  background:linear-gradient(160deg,#ffe07a,var(--gold));color:#3a2c00;
  box-shadow:0 4px 16px -4px var(--gold-glow)}
.card-v2.feat .card-btn{background:linear-gradient(160deg,#8ee8ff,#30b4ff);color:#002244;
  box-shadow:0 4px 16px -4px var(--accent-glow)}
.card-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* comparison table */
.comp-wrap{max-width:820px;margin:0 auto}
.comp-table{width:100%;border-collapse:collapse}
.comp-table thead th{padding-bottom:18px;font-family:'Sora';font-weight:700;
  font-size:16px;text-transform:uppercase;letter-spacing:.06em}
.comp-table thead th:first-child{text-align:left;width:48%}
.comp-table thead th:not(:first-child){text-align:center;width:26%}
.col-no{color:var(--txt-dim)}
.col-yes{color:var(--accent-2)}
.comp-table tbody tr{border-top:1px solid rgba(255,255,255,.06);transition:background .18s}
.comp-table tbody tr:hover{background:rgba(74,158,255,.04)}
.comp-table td{padding:14px 8px;font-size:14px;color:var(--txt-dim)}
.comp-table td:first-child{font-weight:500;color:var(--txt);padding-left:0}
.comp-table td:not(:first-child){text-align:center}
.ico-yes{color:var(--accent-2);font-size:19px;font-weight:700}
.ico-no{color:rgba(140,130,160,.3);font-size:17px}
.comp-cta{display:flex;justify-content:center;margin-top:36px}

/* kick */
.kick-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:820px){.kick-inner{grid-template-columns:1fr;gap:30px}}
.kick-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.k-ico{width:44px;height:44px;background:var(--green);border-radius:11px;
  display:grid;place-items:center}
.k-ico svg{width:26px;height:26px;color:#0a1a04}
.kick-left h2{font-size:clamp(24px,3.6vw,40px);text-transform:uppercase;margin-bottom:12px;line-height:1.05}
.kick-left h2 em{font-style:normal;color:var(--green)}
.kick-left p{font-size:15px;color:var(--txt-dim);line-height:1.6;max-width:460px;margin-bottom:24px}
.kick-card{background:var(--card-bg);border:1.5px solid rgba(83,252,24,.18);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;gap:16px}
.live-badge{display:flex;align-items:center;gap:7px;background:rgba(255,40,40,.18);
  border:1px solid rgba(255,80,80,.28);border-radius:999px;padding:5px 12px;
  font-family:'Sora';font-size:12px;font-weight:700;letter-spacing:.08em;
  color:#ff6060;text-transform:uppercase;width:fit-content}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff4444;
  animation:pdot 1.5s ease-in-out infinite}
@keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.kick-url{font-family:'Sora';font-size:14px;color:var(--green);font-weight:600;letter-spacing:.04em}
.kick-preview{background:rgba(83,252,24,.04);border:1px solid rgba(83,252,24,.1);
  border-radius:11px;aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;color:var(--txt-dim);cursor:pointer;
  transition:background .2s}
.kick-preview:hover{background:rgba(83,252,24,.08)}
.kick-play{width:52px;height:52px;border-radius:50%;background:rgba(83,252,24,.16);
  border:2px solid rgba(83,252,24,.35);display:grid;place-items:center;
  transition:transform .2s,background .2s}
.kick-preview:hover .kick-play{transform:scale(1.1);background:rgba(83,252,24,.28)}
.kick-play svg{width:22px;height:22px;color:var(--green);margin-left:3px}
.kick-preview span{font-size:12px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}
.kick-embed{width:100%;overflow:hidden;border-radius:11px}

/* code chip — johncs.gg / mrtreerewards style copyable promo code */
.code-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);
  border:1.5px dashed rgba(74,158,255,.4);border-radius:999px;padding:9px 8px 9px 18px;
  cursor:pointer;margin-bottom:26px;transition:background .2s,border-color .2s;font-family:'Sora'}
.code-chip:hover{background:rgba(74,158,255,.1);border-color:var(--accent-2)}
.cc-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim)}
.cc-code{font-weight:800;font-size:15px;color:#fff;letter-spacing:.04em}
.cc-copy{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#0a1a04;background:var(--green);padding:6px 12px;border-radius:999px}

/* VIP tier ladder — rewards-site staple */
.tiers-wrap{max-width:960px;margin:0 auto}
.tier-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:820px){.tier-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tier-row{grid-template-columns:1fr}}
.tier-card{position:relative;background:var(--card-bg);border:1.5px solid var(--card-line);
  border-radius:14px;padding:22px 16px;text-align:center;transition:transform .22s,border-color .25s}
.tier-card:hover{transform:translateY(-6px);border-color:var(--tier-c,var(--accent-2))}
.tier-card .tc-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:14px;
  background:color-mix(in srgb,var(--tier-c,var(--accent)) 18%,transparent);
  display:grid;place-items:center;transition:box-shadow .25s,transform .25s}
.tier-card .tc-star{width:32px;height:32px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));
  animation:tierFloat 3.4s ease-in-out infinite;transform-origin:center}
.tier-card .tc-img{width:48px;height:48px;object-fit:contain}
.tier-card .tc-icon:has(.tc-img){background:transparent}
.tier-card:nth-child(2) .tc-star{animation-delay:.3s}
.tier-card:nth-child(3) .tc-star{animation-delay:.6s}
.tier-card:nth-child(4) .tc-star{animation-delay:.9s}
.tier-card:nth-child(5) .tc-star{animation-delay:1.2s}
@keyframes tierFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-5deg)}}
.tier-card:hover .tc-icon{box-shadow:0 0 26px -4px var(--tier-c);transform:scale(1.06)}
.tier-card:hover .tc-star{animation-duration:1.1s}
.tier-card:hover .tc-img{filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)) drop-shadow(0 0 12px var(--tier-c))}
.tier-card .tc-name{font-family:'Sora';font-weight:800;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tier-c,#fff)}
.tier-card .tc-req{font-size:11.5px;color:var(--txt-dim);margin-top:5px}
.tier-card .tc-reward{margin-top:12px;font-family:'Sora';font-weight:700;font-size:13px;color:#fff;
  background:rgba(255,255,255,.05);border-radius:8px;padding:8px 6px}

/* footer */
.foot{border-top:1px solid rgba(255,255,255,.06);background:rgba(4,6,14,.8);
  padding:48px 0 24px}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:40px}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr;gap:24px}}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;
  font-family:'Sora';font-weight:800;font-size:17px}
.foot-brand img{width:34px;height:34px;border-radius:9px}
.foot-brand .vip{color:var(--accent-2)}
.foot p{font-size:12px;color:var(--txt-dim);line-height:1.65;max-width:380px}
.foot h4{font-family:'Sora';font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:14px}
.foot-links{display:flex;flex-direction:column;gap:10px}
.foot-links a{color:#bbb8d8;font-size:13.5px;transition:.2s;
  display:inline-flex;align-items:center;gap:8px}
.foot-links a:hover{color:var(--accent-2)}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:11px;letter-spacing:.1em;color:var(--txt-dim);text-transform:uppercase}

/* ── LEADERBOARD ── */
/* collab lockup (SUSTAIN × Stake image) */
.lb-collab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:40px 20px 4px}
.lb-collab-img{width:100%;max-width:560px;height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}

/* prize-pool hero */
.lb-pp-sec{position:relative;z-index:1;padding-top:20px}
.lb-prizepool{text-align:center}
.lb-pp-eyebrow{font-family:'Sora';font-weight:700;font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--txt-dim);margin-bottom:14px}
.lb-pp-sub{font-family:'Sora';font-weight:700;font-size:14px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:14px}
.lb-pp-sub::before,.lb-pp-sub::after{content:"◆";font-size:9px;color:var(--gold);opacity:.85}
.lb-pp-amount{font-family:'Sora';font-weight:800;font-size:clamp(60px,13vw,140px);line-height:.92;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffe9a8 0%,#ffd23f 46%,#e0a815 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 40px rgba(255,200,60,.25))}
.lb-pp-desc{font-size:15px;color:var(--txt-dim);line-height:1.6;max-width:520px;margin:18px auto 26px}
.lb-pp-desc b{color:#fff} .lb-pp-desc .hl{color:var(--gold);font-weight:700}
.lb-pp-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.lb-pp-note{display:flex;align-items:flex-start;gap:14px;text-align:left;max-width:640px;margin:0 auto;
  background:var(--card-bg);border:1px solid rgba(255,210,63,.2);border-radius:14px;padding:16px 18px}
.lb-pp-note-ico{width:40px;height:40px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,210,63,.14);color:var(--gold)}
.lb-pp-note h4{font-family:'Sora';font-weight:800;font-size:14px;color:#fff;margin-bottom:4px}
.lb-pp-note h4 em{font-style:normal;color:var(--gold)}
.lb-pp-note p{font-size:13px;color:var(--txt-dim);line-height:1.5}

/* leaderboard rules */
.lb-rules-sec{position:relative;z-index:1;padding:44px 0 8px}
.lb-rules-card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:16px;padding:22px}
.lb-rules-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.lb-rules-badge{width:40px;height:40px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,210,63,.14);color:var(--gold)}
.lb-rules-head h3{font-family:'Sora';font-weight:800;font-size:19px;color:#fff}
.lb-rules-head .k{font-family:'Sora';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);margin-top:2px}
.lb-rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lb-rule{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.03);
  border:1px solid var(--card-line);border-radius:12px;padding:16px 18px}
.lb-rule.gold{border-color:rgba(255,210,63,.22)}
.lb-rule.red{border-color:rgba(255,90,90,.22)}
.lb-rule-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.lb-rule-ico svg{width:18px;height:18px}
.lb-rule.gold .lb-rule-ico{background:rgba(255,210,63,.14);color:var(--gold)}
.lb-rule.red .lb-rule-ico{background:rgba(255,90,90,.14);color:#ff6b6b}
.lb-rule h4{font-family:'Sora';font-weight:800;font-size:15px;color:#fff;margin-bottom:5px}
.lb-rule p{font-size:13px;color:var(--txt-dim);line-height:1.5}
.lb-rtp{margin-top:16px;background:rgba(255,255,255,.03);border:1px solid var(--card-line);border-radius:12px;padding:18px}
.lb-rtp-head{font-family:'Sora';font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.lb-rtp-desc{font-size:13px;color:var(--txt-dim);margin:8px 0 16px;line-height:1.5}
.lb-rtp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lb-rtp-card{background:rgba(8,12,22,.6);border:1px solid var(--card-line);border-radius:12px;padding:16px 12px;text-align:center}
.rtp-label{font-family:'Sora';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:8px}
.rtp-badge{display:inline-block;font-family:'Sora';font-weight:700;font-size:12px;color:#cdd0e8;
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.rtp-pct{font-family:'Sora';font-weight:800;font-size:34px;color:#fff;line-height:1}
.rtp-sub{font-family:'Sora';font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);margin-top:6px}
@media(max-width:640px){
  .lb-rules-grid{grid-template-columns:1fr}
  .lb-rule{grid-column:span 1 !important}
  .lb-rtp-grid{grid-template-columns:1fr}
  .lb-pp-note{flex-direction:column}
}

/* loading skeleton */
.lb-skel{position:relative;overflow:hidden;background:rgba(255,255,255,.07)!important;
  border-radius:6px;color:transparent!important}
.lb-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  animation:lb-shimmer 1.3s infinite}
@keyframes lb-shimmer{100%{transform:translateX(100%)}}
.lb-skel-line{display:inline-block;height:13px;vertical-align:middle}
@media(prefers-reduced-motion:reduce){.lb-skel::after{animation:none}}

.lb-page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.lb-page > .section{flex:1}
.lb-wrap{max-width:var(--maxw)}
.lb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:34px;text-align:left}
.lb-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lb-brand-row img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0}
.lb-brand-row span{font-family:'Sora';font-weight:800;font-size:15px;color:#fff;letter-spacing:.02em}
.lb-brand-row span em{font-style:normal;color:var(--accent-2)}
.lb-eyebrow{font-family:'Sora';letter-spacing:.3em;font-size:11px;color:var(--txt-dim);
  text-transform:uppercase;margin-bottom:10px}
.lb-title{font-family:'Sora';font-weight:800;font-size:clamp(28px,4.2vw,48px);line-height:1;
  text-transform:uppercase;color:#fff;margin:0}
.lb-title .blue{color:var(--accent-2);text-shadow:0 0 40px var(--accent-glow)}
.lb-desc{font-size:14px;color:var(--txt-dim);line-height:1.55;margin:14px 0 0;max-width:460px}
.lb-desc .hl{color:var(--accent-2);font-weight:600}
.lb-updated{display:flex;align-items:center;gap:8px;font-family:'Sora';font-size:12px;color:var(--txt-dim)}
.lb-updated .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  display:inline-block;animation:pdot 1.5s ease-in-out infinite}
.lb-demo{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);
  border:1.5px dashed rgba(74,158,255,.4);border-radius:999px;padding:9px 16px;margin-bottom:28px;
  font-family:'Sora';font-size:12px;color:var(--txt-dim)}

/* countdown timer */
.lb-timer{display:flex;flex-direction:column;align-items:center;gap:12px;margin:4px 0 40px}
.lb-timer-label{font-family:'Sora';font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-dim)}
.lb-timer-grid{display:flex;gap:10px}
.lb-tb{min-width:74px;background:var(--card-bg);border:1px solid rgba(74,158,255,.22);border-radius:12px;
  padding:14px 10px 11px;text-align:center;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 8px 22px -14px rgba(74,158,255,.5)}
.lb-tb .n{font-family:'Sora';font-weight:800;font-size:30px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.lb-tb .u{font-family:'Sora';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.lb-timer-date{font-family:'Sora';font-size:11px;letter-spacing:.06em;color:var(--txt-dim)}
@media(max-width:640px){
  .lb-timer-grid{gap:8px}
  .lb-tb{min-width:0;flex:1;padding:12px 4px 10px}
  .lb-tb .n{font-size:24px}
  .lb-tb .u{font-size:9px;letter-spacing:.1em}
}

/* podium */
.lb-podium{display:flex;align-items:stretch;gap:16px;margin-bottom:44px;flex-wrap:wrap}
.lb-pod{flex:1;min-width:200px;background:var(--card-bg);border-radius:14px;
  padding:22px 16px 20px;text-align:center;position:relative;align-self:flex-end}
.lb-pod.silver{order:1;border:1.5px solid rgba(194,205,214,.35)}
.lb-pod.bronze{order:3;border:1.5px solid rgba(205,127,71,.35)}
.lb-pod.gold{order:2;flex:1.1;min-width:220px;align-self:auto;margin-top:-16px;
  padding:30px 18px 26px;border:1.5px solid rgba(255,210,63,.5);box-shadow:0 0 34px rgba(255,210,63,.18)}
.lb-rank-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:32px;height:32px;border-radius:50%;font-family:'Sora';font-weight:800;font-size:15px;
  display:grid;place-items:center}
.lb-pod.silver .lb-rank-badge{background:#c2cdd6;color:#111927}
.lb-pod.bronze .lb-rank-badge{background:#cd7f47;color:#2a1305}
.lb-pod.gold .lb-rank-badge{top:-16px;width:36px;height:36px;font-size:17px;background:var(--gold);color:#3a2c00}
.lb-av{width:52px;height:52px;border-radius:50%;font-family:'Sora';font-weight:800;font-size:18px;
  display:grid;place-items:center;margin:14px auto 12px}
.lb-pod.silver .lb-av{background:rgba(194,205,214,.16);color:#c2cdd6}
.lb-pod.bronze .lb-av{background:rgba(205,127,71,.16);color:#cd7f47}
.lb-pod.gold .lb-av{width:64px;height:64px;font-size:21px;margin:16px auto 14px;
  background:rgba(255,210,63,.16);color:var(--gold)}
.lb-name{font-family:'Sora';font-weight:700;font-size:15px;color:#fff}
.lb-pod.gold .lb-name{font-weight:800;font-size:18px}
.lb-amt{font-family:'Sora';font-weight:800;font-size:20px;margin-top:12px}
.lb-pod.silver .lb-amt{color:#c2cdd6}
.lb-pod.bronze .lb-amt{color:#cd7f47}
.lb-pod.gold .lb-amt{font-size:26px;margin-top:14px;color:var(--gold)}
.lb-prize{font-family:'Sora';font-weight:700;font-size:13px;color:var(--green);margin-top:6px}
.lb-pod.gold .lb-prize{font-size:14px;margin-top:8px}

/* table */
.lb-table{background:var(--card-bg);border:1px solid var(--card-line);border-radius:14px;overflow:hidden}
.lb-thead,.lb-tr{display:grid;grid-template-columns:60px 1fr 160px 100px;align-items:center;padding:14px 24px}
.lb-thead{padding:16px 24px;font-family:'Sora';font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-dim);border-bottom:1px solid rgba(255,255,255,.06)}
.lb-tr{border-top:1px solid rgba(255,255,255,.05);transition:background .18s}
.lb-tr:first-of-type{border-top:none}
.lb-tr:hover{background:rgba(74,158,255,.04)}
.lb-tr .r-rank{font-family:'Sora';font-weight:700;color:var(--txt-dim);font-size:14px}
.lb-tr .r-aff{display:flex;align-items:center;gap:12px;min-width:0}
.lb-tr .r-av{width:34px;height:34px;border-radius:50%;background:rgba(74,158,255,.14);
  color:var(--accent-2);font-family:'Sora';font-weight:700;font-size:12px;display:grid;place-items:center;flex-shrink:0}
.lb-tr .r-name{font-size:14px;color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-amt{text-align:right;font-family:'Sora';font-weight:700;font-size:14px;color:var(--txt)}
.r-prize{text-align:right;font-family:'Sora';font-weight:700;font-size:13px;color:var(--green)}
.lb-note{font-size:11px;color:var(--txt-dim);line-height:1.6;margin-top:28px;max-width:560px}
@media(max-width:640px){
  .lb-thead,.lb-tr{grid-template-columns:42px 1fr 92px}
  .h-prize,.lb-tr .r-prize{display:none}
}

/* ── MOBILE: sidebar becomes a top bar ── */
@media(max-width:760px){
  .app-layout{flex-direction:column}
  .sidebar{
    position:fixed;top:0;left:0;right:0;width:100%;height:56px;
    flex-direction:row;align-items:center;gap:6px;
    border-right:none;border-bottom:1px solid var(--sb-line);
    padding:0 8px;overflow:visible;z-index:60}
  .sb-logo{padding:0 2px;border-bottom:none;flex-shrink:0;gap:8px}
  .sb-logo img{width:30px;height:30px}
  .sb-logo-name{display:none}
  .sb-nav{display:flex;flex-direction:row;align-items:center;gap:2px;padding:0;
    margin-left:auto;flex:0 1 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sb-nav::-webkit-scrollbar{display:none}
  .sb-item{flex-direction:column;gap:3px;margin:0;padding:5px 9px;border-radius:9px;
    font-size:9px;letter-spacing:.02em;line-height:1;white-space:nowrap;text-align:center}
  .sb-item svg{width:20px;height:20px}
  .sb-badge{display:none}
  .sb-socials{display:none}
  .main{margin-left:0;width:100%;margin-top:56px}
  .bg-root{left:0}

  /* tighter content spacing */
  .wrap,.lb-wrap{padding-left:16px;padding-right:16px}
  .section{padding:48px 0}

  /* leaderboard podium stacks — winner first */
  .lb-podium{gap:12px}
  .lb-pod{min-width:0;flex:1 1 100%;align-self:auto}
  .lb-pod.gold{order:-1;margin-top:0}
  .lb-pod.silver{order:0}
  .lb-pod.bronze{order:1}
}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .chevrons svg,.live-dot,.float-badge img,.tc-star{animation:none}
}