/* ============================================================
   Brand League — arcade-dark theme v2
   logos · animations · hover micro-interactions everywhere
   ============================================================ */
:root {
  --bg: #0a0d13;
  --panel: #111722;
  --panel2: #0e141d;
  --line: #1d2634;
  --txt: #e8eef7;
  --dim: #8b98ab;
  --acc: #7c5cff;
  --acc2: #22d3ee;
  --gold: #f5c044;
  --silver: #c9d4e3;
  --bronze: #d0925f;
  --pos: #34d399;
  --neg: #f87171;
  --glow-acc: rgba(124,92,255,.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  position: relative;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(900px 400px at 10% -10%, rgba(34,211,238,.10), transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- drifting aurora blobs ---- */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .16;
  pointer-events: none;
}
body::before {
  width: 480px; height: 480px;
  left: -140px; top: 18%;
  background: radial-gradient(circle, var(--acc), transparent 65%);
  animation: drift1 16s ease-in-out infinite alternate;
}
body::after {
  width: 420px; height: 420px;
  right: -120px; bottom: -80px;
  background: radial-gradient(circle, var(--acc2), transparent 65%);
  animation: drift2 20s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,-60px) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px,-50px) scale(.9); } }

a { color: var(--acc2); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, .strong { font-variant-numeric: tabular-nums; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px;
  background: rgba(10,13,19,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.logo-brand { font-size: 20px; color: var(--txt); font-weight: 400; letter-spacing:.3px; white-space: nowrap;}
.logo-brand b { background: linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;}
.searchbox { flex: 1; max-width: 420px; }
.searchbox input {
  width: 100%; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--txt); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.searchbox input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(124,92,255,.18); }
.topnav { margin-left: auto; display: flex; gap: 10px; }
.topnav a {
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
  color: var(--txt); background: var(--panel); font-size: 14px;
  transition: transform .15s ease, border-color .2s, box-shadow .2s;
}
.topnav a:hover { border-color: var(--acc); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,92,255,.25); }

/* ---- scrolling movers ticker ---- */
.ticker {
  overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(124,92,255,.08), rgba(34,211,238,.06));
  padding: 7px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tickertrack {
  display: inline-flex; align-items: center; gap: 26px;
  padding-left: 26px;
  animation: tickerscroll 38s linear infinite;
  will-change: transform;
}
.ticker:hover .tickertrack { animation-play-state: paused; }
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.titem {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer; color: var(--dim);
  transition: color .15s, transform .15s;
}
.titem:hover { color: var(--txt); transform: translateY(-1px); }
.titem b.pos { color: var(--pos); } .titem b.neg { color: var(--neg); }
.tsep { color: #2a3547; }

/* ---- layout / hero ---- */
.wrap { max-width: 1800px; width: min(100% - 36px, 1800px); margin: 0 auto; padding: 20px 4px 60px; }
.hero { padding: 26px 4px 18px; animation: rise .5s ease-out both; text-align:center; }
.hero h1 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; letter-spacing:-.5px; }
.hero h1 .grad {
  background: linear-gradient(90deg,var(--acc),var(--acc2),var(--acc));
  background-size: 200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.hero p { color: var(--dim); margin-top: 6px; font-size: 15px; max-width: 720px; margin-left:auto; margin-right:auto; line-height:1.55; }
.updated { margin-top: 8px; font-size: 13px; color: var(--dim); display:flex; gap:8px; justify-content:center; align-items:center;}
.sourcesstrip { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; font-size:12px; }
.srcchip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel2); color:var(--dim); cursor:default;
  transition:border-color .2s, transform .15s;
}
.srcchip:hover { border-color:#33405a; transform:translateY(-1px); }
.srcchip .sdot { width:7px;height:7px;border-radius:50%; }
.srcchip.live .sdot { background:var(--pos); box-shadow:0 0 8px var(--pos);}
.srcchip.public .sdot { background:var(--acc2); box-shadow:0 0 8px var(--acc2);}
.srcchip.demo .sdot { background:#fbbf24; }
.srcchip.disabled .sdot { background:var(--dim); }
.srcchip b { color:var(--txt); font-weight:600; }

.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:2.5px 9px; border-radius:999px; font-size:11.5px;
  border:1px solid var(--line); background:var(--panel2); color:var(--dim); vertical-align: middle;
}
.pill.demo { color:#fbbf24; border-color:#713f12; }
.pill.live { color:var(--pos); border-color:#14532d; }
.pill.live::before, .pulse-demo::before {
  content:""; width:7px; height:7px; border-radius:50%; background: currentColor;
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 0%,100%{opacity:1; box-shadow:0 0 0 0 currentColor;} 50%{opacity:.45; box-shadow:0 0 0 4px rgba(255,255,255,0);} }

/* ---- filters: tabs & chips ---- */
.controls { display:flex; flex-direction:column; flex-wrap: wrap; gap: 10px; align-items:center; justify-content:center; margin: 8px 0 16px; animation: rise .5s .05s ease-out both; }
.tabs { display:flex; gap:8px; flex-wrap: wrap; }
.tab {
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 18px; border-radius: 999px; cursor:pointer; font-size:14px;
  border:1px solid var(--line); background: var(--panel); color: var(--dim);
  user-select:none; position:relative;
  transition: transform .16s ease, box-shadow .2s, color .2s, border-color .2s;
}
.tab:hover { color: var(--txt); transform: translateY(-2px); border-color:#33405a; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.tab:active { transform: translateY(0) scale(.97); }
.tab.active {
  color:#fff; border-color: transparent;
  background: linear-gradient(90deg,var(--acc),#5b8cff);
  background-size: 150% auto;
  font-weight:600;
  box-shadow: 0 6px 22px var(--glow-acc);
  animation: tabglow 3s ease-in-out infinite;
}
@keyframes tabglow { 0%,100%{box-shadow:0 6px 22px rgba(124,92,255,.35);} 50%{box-shadow:0 6px 30px rgba(34,211,238,.35);} }

/* click feedback shared by tabs, chips and metric segment */
.pop { animation: segbounce .38s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes segbounce {
  0% { transform: scale(.88); }
  55% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* dim the board while a filter fetch is in flight */
.panel.loading tbody { opacity:.4; filter:saturate(.5); transition:opacity .25s; }
.tablewrap.panel tbody { transition:opacity .25s; }
.tab .ticon { font-size:15px; }
.tab .tcount {
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px;
  background:rgba(255,255,255,.12); color:inherit;
}
.filters { display:flex; gap:12px; align-items:center; justify-content:center; margin-left:auto; margin-right:auto; flex-wrap:wrap; }
.filters label { font-size:13px; color:var(--dim); display:flex; gap:6px; align-items:center;}
select {
  background: var(--panel); color: var(--txt); border:1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; outline:none; font-size:14px;
  transition: border-color .2s;
}
select:hover, select:focus { border-color: var(--acc); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  padding: 6px 13px; font-size:12.5px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel2); color:var(--dim);
  user-select:none;
  transition: all .16s ease;
}
.chip:hover { color:#fff; transform: translateY(-1px) scale(1.04); border-color: var(--acc2); }
.chip.active { color:#fff; border-color: var(--acc2); background: rgba(34,211,238,.14); box-shadow: 0 4px 14px rgba(34,211,238,.2); }

/* ---- movers cards ---- */
.movers { display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin: 6px 0 18px; }
.mover {
  position:relative; border-radius: 14px; padding: 14px 16px; text-align:left;
  background: var(--panel); border: 1px solid var(--line); overflow:hidden; cursor:pointer;
  transition: transform .18s ease, box-shadow .25s, border-color .25s;
}
.mover::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg,var(--pos),var(--acc2));
  background-size: 200% auto; animation: shimmer 4s linear infinite;
}
.mover::after {  /* shine sweep on hover */
  content:""; position:absolute; top:0; left:-70%;
  width:45%; height:100%;
  background:linear-gradient(105deg,transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-18deg); transition:left .55s ease;
}
.mover:hover::after { left:135%; }
.mover:hover { transform: translateY(-4px) rotate(-.4deg); border-color:#2b3650; box-shadow: 0 14px 34px rgba(52,211,153,.14); }
.mrow1 { display:flex; align-items:center; justify-content:space-between; }
.mover .mrank { font-size:11px; color:var(--dim); letter-spacing:1px; text-transform:uppercase;}
.mover .mname { font-weight:700; font-size:17px; margin-top:2px;}
.mover .mval { color:var(--pos); font-weight:700; font-size:14.5px; margin-top:4px;}
.moverlogo { width:40px !important; height:40px !important; border-radius:11px !important; }

/* ---- panels & board table ---- */
.panel { background: var(--panel); border:1px solid var(--line); border-radius: 16px; overflow:hidden; }
.tablewrap { overflow-x:auto; }
table.board { width:100%; border-collapse: collapse; min-width: 0; }
.board thead th {
  position: sticky; top:0; z-index:2;
  text-align:left; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--dim); background:#0d121b; padding: 11px 12px; border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none; white-space:nowrap;
  transition: color .15s, background .15s;
}
.board thead th.nosort{cursor:default;}
.board thead th:hover:not(.nosort){color:var(--txt); background:#111827;}
.board thead th .arrow{opacity:.95; margin-left:4px; color:var(--acc2); display:inline-block; animation: rise .25s ease-out;}
.board tbody tr { cursor:pointer; position:relative; transition: background .15s; }
.board tbody tr::after {   /* left accent reveal on hover */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--acc),var(--acc2));
  opacity:0; transition:opacity .18s;
}
.board tbody tr:hover::after { opacity:1; }
.board tbody tr:hover { background: rgba(124,92,255,.09); }
tr.r1 { background: rgba(245,192,68,.06);}
tr.r1:hover { background: rgba(245,192,68,.11)!important; }
tr.r2 { background: rgba(201,212,227,.04);}
tr.r2:hover{background:rgba(201,212,227,.08)!important;}
tr.r3 { background: rgba(208,146,95,.05);}
tr.r3:hover{background:rgba(208,146,95,.09)!important;}

/* staggered entrance */
.rowin { animation: rowIn .38s cubic-bezier(.21,.75,.35,1) both; }
@keyframes rowIn { from { opacity:0; transform: translateY(9px); } to { opacity:1; transform:none; } }
@keyframes rise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

.rank { font-weight: 800; font-size: 16px; width: 56px; }
.medal { font-size: 20px; display:inline-block; animation: medalPop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes medalPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.delta { width:64px; font-weight:700; font-size:13px;}
.delta.up{color:var(--pos);} .delta.down{color:var(--neg);} .delta.same{color:var(--dim);}
.newtag { font-size:10.5px; padding:2px 7px; border-radius:999px; background:rgba(34,211,238,.15); color:var(--acc2); border:1px solid rgba(34,211,238,.4); animation: blinkNew 1.4s ease-in-out 3;}
@keyframes blinkNew { 50% { background: rgba(34,211,238,.35); } }

.board tbody td { padding: 11px 9px; border-bottom: 1px solid var(--line); font-size:14px; vertical-align:middle;}
.brandcell { display:flex; align-items:center; gap:10px; min-width:150px; }
.avatar {
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#fff;flex-shrink:0;letter-spacing:.5px;
  transition: transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .2s;
}
.avatar.big{width:64px;height:64px;border-radius:16px;font-size:22px;}
.bname { line-height:1.25; transition: transform .15s; }
.bname small { display:block; color:var(--dim); font-size:12px; font-weight:400;}
tr:hover .avatar, .brandcell:hover .avatar { transform: scale(1.12) rotate(-2deg); box-shadow: 0 4px 14px rgba(0,0,0,.4); }

/* company logos (img with initials fallback) */
img.logo {
  object-fit: contain; flex-shrink: 0;
  background:#fff; border-radius:10px; padding:3px;
  width:36px; height:36px;
  transition: transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .2s;
}
img.logo.big { width:72px; height:72px; border-radius:18px; padding:6px; }
img.logo.tickerlogo { width:22px; height:22px; border-radius:6px; padding:1px; }
tr:hover img.logo:not(.tickerlogo), .brandcell:hover img.logo { transform: scale(1.14) rotate(-2deg); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
img.logo.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(.4); opacity:0; } to { transform: scale(1); opacity:1; } }

.plats { white-space:nowrap; }
.dot { width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px; transition: transform .15s, box-shadow .15s;}
tr:hover .dot { transform: scale(1.35); }
.growth-pos{color:var(--pos);font-weight:700;} .growth-neg{color:var(--neg);font-weight:700;}
.growpill {
  display:inline-block; padding:3px 9px; border-radius:8px; font-size:13px;
  background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.18);
  transition: transform .15s;
}
tr:hover .growpill { transform: scale(1.06); }
tr:has(.growth-neg) .growpill { background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.2); }

.pscore {
  position:relative; width:120px; height:22px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.pscore i {
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  background-size: 200% auto; animation: shimmer 3s linear infinite;
  transition: width .9s cubic-bezier(.22,.9,.35,1);
}
.pscore b { position:relative; z-index:1; font-size:12.5px; line-height:21px; padding-left:8px; text-shadow:0 1px 2px rgba(0,0,0,.6);}
tr:hover .pscore i { filter:brightness(1.2); }

.badges { white-space:nowrap; max-width:120px; overflow:hidden; }
.badge.mini {
  padding:2px 6px; font-size:13.5px; margin-right:3px; cursor:default;
}
.badge.mini i { font-style:normal; font-size:10px; margin-left:2px; opacity:.85; }
.badge.mini.more { background:var(--panel2); color:var(--dim); font-size:11px; padding:3px 6px; }
tr:hover .badge.mini { transform: translateY(-2px) scale(1.12); }

/* responsive column hiding keeps the board scroll-free */
@media (max-width:1150px){ th.col-freq, td.col-freq { display:none; } }

.badge {
  display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; margin-right:4px;
  border:1px solid var(--line); background:var(--panel2); color:var(--dim);
  transition: transform .15s, box-shadow .2s; cursor:default;
}
.badge:hover { transform: translateY(-2px) scale(1.08); box-shadow:0 6px 14px rgba(0,0,0,.35); }
.badge.champion{background:rgba(245,192,68,.12);border-color:#f5c044;color:#f5c044;}
.badge.top10{background:rgba(124,92,255,.12);border-color:var(--acc);color:#b9a8ff;}
.badge.mover{background:rgba(52,211,153,.1);border-color:var(--pos);color:var(--pos);}
.badge.streak{background:rgba(248,113,113,.1);border-color:var(--neg);color:#fca5a5;}

.empty { padding: 30px; color: var(--dim); text-align:center; }

/* ---- profile page ---- */
.backlink { display:inline-block; margin-bottom:14px; color:var(--dim); font-size:14px; transition: color .15s, transform .15s;}
.backlink:hover { color:var(--txt); transform: translateX(-3px); text-decoration:none;}
.profhead { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin: 10px 0 20px; animation: rise .4s ease-out both;}
.profhead h1 { font-size: 30px; letter-spacing:-.5px;}
.tagrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.handles { display:flex; gap:8px; flex-wrap:wrap;}
.handlelink {
  font-size:12.5px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel2); color:var(--dim);
  transition: all .15s ease;
}
.handlelink:hover { color:var(--txt); border-color:var(--acc); transform:translateY(-1px); text-decoration:none;}
.handlelink b{color:var(--txt);font-weight:600;}

.statcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px;}
.statcard {
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  transition: transform .18s ease, border-color .25s, box-shadow .25s;
  animation: rise .45s ease-out both;
}
.statcard:nth-child(2){animation-delay:.05s} .statcard:nth-child(3){animation-delay:.1s}
.statcard:nth-child(4){animation-delay:.15s} .statcard:nth-child(5){animation-delay:.2s}
.statcard:nth-child(6){animation-delay:.25s}
.statcard:hover { transform: translateY(-4px); border-color:#33405a; box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.statcard .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);}
.statcard .v{font-size:24px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;}
.statcard .v.pos{color:var(--pos);} .statcard .v.neg{color:var(--neg);}

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; margin-bottom:18px;
  transition:border-color .25s;
}
.card:hover { border-color:#2a3547; }
.card h2 { font-size:15px; letter-spacing:.4px; margin-bottom:10px;}
.card h2 small{color:var(--dim);font-weight:400;}

.chartwrap{position:relative;}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.legend label{
  display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);cursor:pointer;
  padding:3px 8px;border-radius:8px;transition:background .15s,color .15s;
}
.legend label:hover{background:var(--panel2);color:var(--txt);}
.legend input{accent-color:var(--acc);}
.tooltip{
  pointer-events:none;position:absolute;z-index:5;display:none;
  background:#05070b;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap;
  animation:rise .15s ease-out;
}
.tooltip b{display:block;margin-bottom:2px;}
svg.chart text{fill:var(--dim);font-size:11px;}
svg.chart .gridline{stroke:var(--line);stroke-width:1;}

.platgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;}
.platcard{
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  transition:transform .18s ease, border-color .25s, box-shadow .25s;
}
.platcard:hover{transform:translateY(-4px);border-color:#33405a;box-shadow:0 12px 26px rgba(0,0,0,.4);}
.platcard .phead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.platcard .pname{font-weight:700;}
.platcard .pnum{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;}
.platcard .rows{margin-top:8px;font-size:13px;color:var(--dim);display:grid;gap:4px;}
.platcard .rows div{display:flex;justify-content:space-between;gap:8px;padding:1px 0;}
.platcard .rows div:hover span:first-child{color:var(--txt);}
.platcard .rows span:last-child{color:var(--txt);font-variant-numeric:tabular-nums;}

.postlist{display:grid;gap:10px;}
.postitem{
  display:flex;gap:12px;align-items:flex-start;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:transform .16s ease, border-color .2s;
  animation:rise .4s ease-out both;
}
.postitem:nth-child(2){animation-delay:.07s}.postitem:nth-child(3){animation-delay:.14s}
.postitem:nth-child(4){animation-delay:.21s}.postitem:nth-child(5){animation-delay:.28s}
.postitem:nth-child(6){animation-delay:.35s}
.postitem:hover{transform:translateX(4px);border-color:#33405a;}
.postitem .ptext{flex:1;}
.postitem .pmeta{font-size:12px;color:var(--dim);margin-top:3px;}
.postitem .stats{font-size:12.5px;color:var(--dim);white-space:nowrap;text-align:right;line-height:1.7;}

/* ---- compare page ---- */
.cmpbar{height:10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin-top:5px;}
.cmpbar i{
  display:block;height:100%;width:0;border-radius:999px;
  transition:width .9s cubic-bezier(.22,.9,.35,1);
}
.winner{outline:1px solid rgba(245,192,68,.55); box-shadow:0 0 34px rgba(245,192,68,.10); animation:winnerPulse 2.6s ease-in-out infinite;}
@keyframes winnerPulse { 0%,100%{box-shadow:0 0 24px rgba(245,192,68,.08);} 50%{box-shadow:0 0 44px rgba(245,192,68,.18);} }
.crown{margin-left:6px;display:inline-block;animation:crownBob 2.2s ease-in-out infinite;}
@keyframes crownBob { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-4px) rotate(4deg);} }
.cmp-grid{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:14px;align-items:start;}
@media (max-width:900px){.cmp-grid{grid-template-columns:1fr;}}
.cmpside{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center;transition:transform .2s ease;}
.cmpside:hover{transform:translateY(-3px);}
.cmpside h2{margin-top:10px;}
.cmpmid{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;}
.metricrow{padding:10px 0;border-bottom:1px solid var(--line);transition:background .15s;}
.metricrow:hover{background:rgba(255,255,255,.02);}
.metricrow:last-child{border-bottom:none;}
.metricrow .mk{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);text-align:center;}
.metricrow .vals{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin-top:4px;font-variant-numeric:tabular-nums;}
.metricrow .vals .winc{color:var(--gold);}
.plattable{width:100%;border-collapse:collapse;margin-top:6px;}
.plattable td,.plattable th{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13.5px;text-align:right;}
.plattable tbody tr{cursor:default;transition:background .15s;}
.plattable tbody tr:hover{background:rgba(124,92,255,.06);}
.plattable th:first-child,.plattable td:first-child{text-align:left;}
.plattable th{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;}

/* ---- admin ---- */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.field label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px;letter-spacing:.4px;}
.field input,.field select{
  width:100%;padding:9px 12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);outline:none;font-size:14px;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{border-color:var(--acc); box-shadow:0 0 0 3px rgba(124,92,255,.15);}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:none;
  cursor:pointer;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(90deg,var(--acc),#5b8cff);
  background-size:150% auto;
  transition:filter .2s, transform .15s, box-shadow .2s, background-position .4s;
}
.btn:hover{filter:brightness(1.15); transform:translateY(-2px); box-shadow:0 8px 22px var(--glow-acc); background-position:right center;}
.btn:active{transform:translateY(0) scale(.97);}
.btn.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line);font-weight:600;}
.btn.small{padding:6px 12px;font-size:12.5px;}
.btn.danger{background:rgba(248,113,113,.12);color:var(--neg);border:1px solid rgba(248,113,113,.4);}
.btn.danger:hover{box-shadow:0 8px 22px rgba(248,113,113,.25);}
.status{font-size:13.5px;color:var(--dim);margin-top:10px;min-height:18px;}
.status.ok{color:var(--pos);} .status.err{color:var(--neg);}

.foot{margin-top:26px;color:var(--dim);font-size:12.5px;line-height:1.7;border-top:1px solid var(--line);padding-top:16px;}
.sectiontitle{margin:26px 0 10px;font-size:16px; text-align:center; animation:rise .5s .1s ease-out both;}
.foot{text-align:center;}

code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.92em;}

/* scrollbars */
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#232e42;border-radius:8px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#31405c;}

@media (max-width:760px){
  .topbar{flex-wrap:wrap;}
  .filters{margin-left:0;}
  .hero{padding-top:14px;}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .tickertrack { animation:none; }
}

/* ============================================================
   Wide layout: board + league-leaders sidebar fills the sides
   ============================================================ */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.maincol { min-width:0; }
.sidebar { position:sticky; top:78px; display:flex; flex-direction:column; gap:12px; }
.miniwidget {
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.miniwidget:hover { border-color:#2a3547; box-shadow:0 10px 26px rgba(0,0,0,.3); }
.mw-head {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--dim);
  border-bottom:1px solid var(--line); background:var(--panel2);
}
.mw-head .mh-ic { font-size:14px; }
.mw-row {
  display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer;
  border-bottom:1px solid var(--line); transition:background .13s, transform .13s;
  animation: rise .35s ease-out both;
}
.mw-row:last-child { border-bottom:none; }
.mw-row:hover { background:rgba(124,92,255,.08); transform:translateX(3px); }
.mw-row:nth-child(2){animation-delay:.05s} .mw-row:nth-child(3){animation-delay:.1s}
.mw-row:nth-child(4){animation-delay:.15s} .mw-row:nth-child(5){animation-delay:.2s}
.mw-rank { width:16px; font-weight:800; color:var(--dim); font-size:12px; text-align:center; flex-shrink:0;}
.mw-row:first-of-type .mw-rank { color:var(--gold); }
.mw-name { flex:1; font-size:13px; font-weight:600; line-height:1.2; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mw-name small { display:block; color:var(--dim); font-size:10.5px; font-weight:400;}
.mw-val { font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.mw-val.c-acc { color:var(--acc2); } .mw-val.c-gold { color:var(--gold); } .mw-val.c-pos { color:var(--pos); }
img.logo.sm-logo { width:26px !important; height:26px !important; border-radius:7px !important; padding:2px !important; }
@media (max-width:1280px){
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; flex-direction:row; flex-wrap:wrap; }
  .sidebar .miniwidget { flex:1 1 250px; }
}

/* ============================================================
   Platform identity icons (real logos as app-icon tiles)
   ============================================================ */
.picon {
  width:22px; height:22px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:#333; flex-shrink:0;
}
.picon svg { width:13px; height:13px; display:block; }
.picon.pi-youtube   { background:#ff0033; }
.picon.pi-x         { background:#0f1419; box-shadow: inset 0 0 0 1px #39424d; }
.picon.pi-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.picon.pi-tiktok    { background:#010101; box-shadow: inset 0 0 0 1px #30363f; }
.picon.pi-facebook  { background:#1877f2; }

.picon.sm { width:18px; height:18px; border-radius:5px; vertical-align:-4px; }
.picon.sm svg { width:11px; height:11px; }
.picon.lg { width:28px; height:28px; border-radius:8px; }
.picon.lg svg { width:16px; height:16px; }
.picon.xl { width:36px; height:36px; border-radius:10px; }
.picon.xl svg { width:21px; height:21px; }

a.piconlink { display:inline-flex; line-height:0; border-radius:inherit; }
a.piconlink .picon { transition: transform .16s cubic-bezier(.3,1.5,.5,1), box-shadow .2s; }
a.piconlink:hover .picon {
  transform: translateY(-2px) scale(1.22);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 12px rgba(255,255,255,.15);
}
a.piconlink:active .picon { transform: scale(.95); }
.plats a.piconlink { margin-right:2px; }

/* profile platform-card header */
.platcard .phead .picon { width:26px; height:26px; border-radius:7px; }
.platcard .phead .picon svg { width:15px; height:15px; }
.openbtn {
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .15s, color .15s, transform .15s;
  display:inline-block;
}
a.piconlink:hover .openbtn { border-color:var(--acc); color:#fff; transform:translateY(-1px); }

/* compare side account rows */
.sideiconsrow { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin:8px 0 10px; }

/* legend uses mini icons */
.legend .picon.sm { margin-right:2px; }

/* ---- segmented metric control (replaces dropdown) ---- */
.metricseg { display:flex; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px; flex-wrap:wrap; }
.msegb {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; font-size:13px; border-radius:999px; border:none;
  background:transparent; color:var(--dim); cursor:pointer;
  transition:background .18s, color .18s, transform .14s, box-shadow .2s;
  white-space:nowrap;
}
.msegb:hover { color:#fff; background:rgba(124,92,255,.12); transform:translateY(-1px); }
.msegb.active {
  color:#fff; font-weight:700;
  background:linear-gradient(90deg,var(--acc),#5b8cff);
  box-shadow:0 4px 14px rgba(124,92,255,.35);
}
.msegb .mi { font-size:14px; line-height:1; }
@media (max-width:900px){ .msegb .mt { display:none; } .msegb { padding:7px 11px; } }

/* ============================================================
   Metric dropdown + platform-icon chips
   ============================================================ */
.controls { position:relative; z-index:30; }
.chips .chip { display:inline-flex; align-items:center; gap:7px; }
.chips .chip .allglyph { font-size:13px; line-height:1; }
.chips .chip.active .picon { box-shadow: 0 0 0 2px rgba(34,211,238,.5); }

.dropdown { position:relative; display:inline-block; margin-top:2px; }
.dd-toggle {
  min-width:210px;
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line);
}
.dd-toggle:hover { transform:none; box-shadow:none; border-color:var(--acc); filter:none; }
.dd-toggle.pop { animation: segbounce .38s cubic-bezier(.3,1.6,.5,1); }
.dd-toggle .dd-ic { font-size:15px; line-height:1; }
.dd-toggle .dd-label { flex:1; text-align:left; font-weight:400; color:var(--dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dd-toggle .dd-label b { color:#fff; font-weight:700; margin-left:4px; }
.dd-caret { transition:transform .2s ease; color:var(--dim); font-size:12px; }
.dropdown.open .dd-caret { transform:rotate(180deg); color:var(--acc2); }

.dd-menu {
  position:absolute; top:calc(100% + 8px); left:50%;
  min-width:240px; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 0 3px rgba(124,92,255,.08);
  z-index:60;
  opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(-8px) scale(.97);
  transform-origin:top center;
  transition:opacity .18s ease, transform .22s cubic-bezier(.25,1.2,.4,1);
}
.dropdown.open .dd-menu {
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.dd-item {
  display:flex; align-items:center; gap:11px;
  width:100%; padding:10px 12px;
  border:none; border-radius:9px; background:transparent;
  color:var(--dim); cursor:pointer; font-size:13.5px; text-align:left;
  font-family:inherit;
  transition:background .15s, color .15s, transform .14s;
}
.dd-item:hover { background:rgba(124,92,255,.13); color:#fff; transform:translateX(2px); }
.dd-item.active { color:#fff; font-weight:700; background:linear-gradient(90deg,rgba(124,92,255,.28),rgba(34,211,238,.16)); }
.dd-item .mi { font-size:15px; width:20px; text-align:center; }
.dd-item .check { margin-left:auto; opacity:0; color:var(--acc2); font-weight:900; transition:opacity .15s, transform .2s; transform:scale(.6);}
.dd-item.active .check { opacity:1; transform:scale(1); }

/* ============================================================
   UI Polish: improved footer, subtle enhancements
   ============================================================ */
.foot-main { font-size: 14px; font-weight: 600; color: var(--txt); margin-bottom: 4px; }
.foot-sub { font-size: 12px; color: var(--dim); }
.foot-sub strong { color: var(--acc2); }

/* Skeleton loading shimmer */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--panel2) 25%, var(--line) 50%, var(--panel2) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Improved board row hover with glow */
.board tbody tr:hover {
  background: rgba(124,92,255,.09);
  box-shadow: inset 0 0 0 1px rgba(124,92,255,.08);
}

/* Better mobile layout */
@media (max-width:600px) {
  .topbar { padding: 10px 14px; gap: 10px; }
  .topnav a { padding: 6px 10px; font-size: 12px; }
  .hero h1 { font-size: 22px; }
  .controls { gap: 8px; }
  .tab { padding: 7px 12px; font-size: 12.5px; }
  .chip { padding: 5px 10px; font-size: 11.5px; }
  .board tbody td { padding: 8px 6px; font-size: 12.5px; }
  .mover { padding: 10px 12px; }
  .wrap { padding: 14px 2px 40px; }
  .statcards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Smooth page transitions */
main { animation: pageIn .4s ease-out both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }