/*
 * All-Star Champions stats site.
 * Look: night-sky ground, the logo's gold as the one accent, team colours where teams are, pixel
 * headings that match the star logo and the game. Players' skins carry the pages.
 */
:root {
  --ground:#0c0d12; --ground-2:#101219; --panel:#14161f; --panel-2:#1b1e2a; --line:#252938; --line-2:#323748;
  --fg:#f1efe8; --muted:#9a9cab; --faint:#5f6274;
  --gold:#f4c64e; --gold-2:#ffe39a; --gold-deep:#b8861f; --silver:#c9cfdb; --bronze:#d08a4e;
  --up:#5fd38a; --down:#f2787a;
  --pixel:"Pixelify Sans","Segoe UI",sans-serif; --numf:"Barlow","Segoe UI",system-ui,sans-serif; --body:"Barlow","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",Consolas,monospace;
  color-scheme:dark;
}
* { box-sizing:border-box }
html, body { margin:0 }
body { background:var(--ground); color:var(--fg); font:15px/1.5 var(--body); min-height:100vh; display:flex; flex-direction:column;
  background-image:radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.18) 50%, transparent 51%), radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.12) 50%, transparent 51%), radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,.1) 50%, transparent 51%);
  background-size:180px 180px, 240px 240px, 310px 310px }
a { color:inherit }
img { max-width:100% }
.sr { position:absolute; left:-9999px }
.muted { color:var(--muted) } .faint { color:var(--faint) } .up { color:var(--up) } .down { color:var(--down) } .gold { color:var(--gold) }
.wrap { max-width:1200px; margin:0 auto; width:100%; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)) }
button, select, input { font:inherit }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline:2px solid var(--gold); outline-offset:2px }

/* ---------- top bar ---------- */
.top { position:sticky; top:0; z-index:9; background:rgba(12,13,18,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.top .wrap { display:flex; align-items:center; gap:22px; height:64px }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex:none }
.logo img { width:34px; height:34px; image-rendering:pixelated }
.logo b { font:700 20px/1 var(--pixel); color:var(--gold); letter-spacing:.02em }
.logo small { display:block; font:600 10px/1 var(--body); letter-spacing:.32em; color:var(--muted); margin-top:3px }
.nav { display:flex; gap:2px; height:100% }
.nav a { display:flex; align-items:center; padding:0 12px; text-decoration:none; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px }
.nav a:hover { color:var(--fg) }
.nav a[aria-current="page"] { color:var(--fg); border-bottom-color:var(--gold) }
.top .right { margin-left:auto; display:flex; align-items:center; gap:10px }
.search { position:relative }
.search input { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:8px 12px 8px 34px; width:210px }
.search::before { content:""; position:absolute; left:12px; top:50%; width:12px; height:12px; margin-top:-7px; border:2px solid var(--faint); border-radius:50%; pointer-events:none }
.search::after { content:""; position:absolute; left:23px; top:50%; width:6px; height:2px; margin-top:4px; background:var(--faint); transform:rotate(45deg); pointer-events:none }
.suggest { position:absolute; right:0; top:calc(100% + 6px); min-width:100%; width:280px; list-style:none; margin:0; padding:6px; background:var(--panel); border:1px solid var(--line-2); border-radius:10px; z-index:20; box-shadow:0 12px 30px rgba(0,0,0,.5) }
.suggest a { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px; text-decoration:none; white-space:nowrap }
.suggest a:hover, .suggest a[aria-selected="true"] { background:var(--panel-2) }
.suggest .elo { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums }
.ip { display:flex; align-items:center; gap:8px; background:var(--gold); color:#1d1606; border:0; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; white-space:nowrap }
.ip:hover { background:var(--gold-2) }
.ip small { font-weight:600; opacity:.7 }
@media (max-width:860px) { .top .wrap { height:auto; padding-block:10px; flex-wrap:wrap; gap:10px } .nav { height:auto; order:3; width:100%; overflow-x:auto } .nav a { padding:6px 10px } .search input { width:150px } .ip small { display:none } }

/* ---------- page ---------- */
main { flex:1; padding-block:28px 72px }
main > .wrap { display:grid; gap:28px }
.foot { border-top:1px solid var(--line); color:var(--muted); font-size:14px }
.foot .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:18px }
.loading { color:var(--muted); padding:60px 0; text-align:center; font-family:var(--pixel) }
h1, h2, h3 { margin:0; font-weight:400; text-wrap:balance }
h1 { font:700 clamp(30px,5vw,48px)/1.05 var(--pixel) }
h2 { font:600 22px/1.2 var(--pixel) }
h3 { font:600 16px/1.3 var(--body) }
p { margin:0 }
.eyebrow { font:700 12px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--gold) }
.head-row { display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap }
.head-row .more { font-weight:600; color:var(--muted); text-decoration:none } .head-row .more:hover { color:var(--gold) }
.num { font-family:var(--numf); font-weight:700; font-variant-numeric:tabular-nums }
.empty { color:var(--muted); padding:28px; text-align:center; border:1px dashed var(--line-2); border-radius:12px }
.err { color:var(--down) }

/* shared bits */
.tier { display:inline-grid; place-items:center; width:24px; height:24px; font:700 13px/1 var(--numf); color:#15120a; background:#cbd5e1; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); flex:none }
.tS { background:var(--gold) } .tA { background:#c4b5fd } .tB { background:#7dd3fc } .tC { background:#86efac } .tD { background:#cbd5e1 } .tQ { background:var(--line-2); color:var(--muted) }
.swatch { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:baseline }
.face { width:32px; height:32px; image-rendering:pixelated; border-radius:4px; background:var(--panel-2); flex:none }
.stack { display:flex } .stack img { width:26px; height:26px; image-rendering:pixelated; border-radius:4px; border:2px solid var(--ground); margin-left:-6px; background:var(--panel-2) } .stack img:first-child { margin-left:0 }
.who { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; min-width:0 }
.who:hover span { color:var(--gold) }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--muted); background:var(--panel-2); border-radius:6px; padding:3px 7px; white-space:nowrap }
.chip svg { width:12px; height:12px }
.gicon { flex:none; display:inline-grid; place-items:center; border-radius:8px; color:var(--g); background:color-mix(in srgb, var(--g) 13%, transparent); border:1px solid color-mix(in srgb, var(--g) 34%, transparent); transition:transform .2s ease, background .2s ease }
.gicon.bare { background:none; border:0; border-radius:0 }
.gicon svg { display:block }

/* ---------- home: the reigning champions ---------- */
.stage { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); min-height:380px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  background:linear-gradient(180deg, color-mix(in srgb, var(--team) 26%, #0c0d12) 0%, #0c0d12 85%) }
.stage::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:24px 24px; mask-image:linear-gradient(180deg, #000, transparent 90%) }
.stage .copy { position:relative; padding:36px 32px; display:grid; align-content:center; gap:14px }
.stage .team-name { font:700 clamp(38px,6vw,64px)/.95 var(--pixel); color:var(--team); text-shadow:0 3px 0 rgba(0,0,0,.35) }
.stage .meta { color:var(--muted); display:flex; gap:8px 14px; flex-wrap:wrap }
.stage .meta b { color:var(--fg); font-weight:600 }
.stage .pts { font:700 22px var(--numf); color:var(--fg) }
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--fg); color:#111; text-decoration:none; font-weight:700; border-radius:8px; padding:10px 16px; justify-self:start }
.btn:hover { background:var(--gold) }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line-2) } .btn.ghost:hover { border-color:var(--gold); color:var(--gold); background:transparent }
.stage .bodies { position:relative; display:flex; align-items:flex-end; justify-content:center; gap:4px; padding:24px 20px 0 }
.stage .bodies a { display:grid; justify-items:center; gap:0; text-decoration:none; position:relative }
.stage .bodies img { height:250px; width:auto; image-rendering:pixelated; filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)) }
.stage .bodies span { font-weight:700; font-size:13px; background:rgba(0,0,0,.55); padding:3px 8px; border-radius:5px; margin:6px 0 16px; white-space:nowrap }
.stage .bodies a:hover span { color:var(--gold) }
.stage .floor { position:absolute; left:8%; right:8%; bottom:0; height:46px; background:radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--team) 45%, transparent), transparent) }
@media (max-width:860px) { .stage { grid-template-columns:minmax(0,1fr) } .stage .bodies img { height:170px } .stage .copy { padding:26px 20px 6px } }
.stage.empty-stage { --team:var(--gold); grid-template-columns:minmax(0,1fr) }
.stage.empty-stage .copy { justify-items:center; text-align:center; padding:48px 24px }
.stage.empty-stage img.big-logo { width:120px; height:120px; image-rendering:pixelated }

.strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden }
.strip > div { background:var(--ground-2); padding:16px 18px; display:grid; gap:4px }
.strip .k { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.strip .v { font:700 20px var(--numf) }
.live-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--up); margin-right:8px; vertical-align:middle; animation:blink 1.4s infinite }
@keyframes blink { 50% { opacity:.25 } }
@media (max-width:700px) { .strip { grid-template-columns:minmax(0,1fr) } }

.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:28px; align-items:start }
@media (max-width:960px) { .two { grid-template-columns:minmax(0,1fr) } }
.block { display:grid; gap:14px; min-width:0 }

/* the ranked list (home top 10, leaderboard from 4th) */
.ranks { list-style:none; margin:0; padding:0; display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--ground-2) }
.ranks li + li { border-top:1px solid var(--line) }
.ranks a.row { display:grid; grid-template-columns:44px 36px minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 16px 10px 12px; text-decoration:none }
.ranks a.row:hover { background:var(--panel) }
.ranks .pos { font:700 18px var(--numf); color:var(--faint); text-align:center }
.ranks li:nth-child(1) .pos { color:var(--gold) } .ranks li:nth-child(2) .pos { color:var(--silver) } .ranks li:nth-child(3) .pos { color:var(--bronze) }
.ranks .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ranks .sub { display:block; font-size:12px; color:var(--muted); font-weight:500 }
.ranks .val { font:700 18px var(--numf); text-align:right; min-width:64px }
.ranks.from4 li:nth-child(n) .pos { color:var(--faint) }

/* event cards */
.events { display:grid; gap:10px }
.ecard { display:grid; grid-template-columns:6px 76px minmax(0,1fr) auto; gap:0 16px; align-items:center; text-decoration:none; background:var(--ground-2); border:1px solid var(--line); border-radius:12px; overflow:hidden; min-height:84px }
.ecard:hover { border-color:var(--line-2); background:var(--panel) }
.ecard .band { align-self:stretch; background:var(--team) }
.ecard .id { font:700 22px var(--numf); color:var(--muted); text-align:center }
.ecard .id small { display:block; font:600 11px var(--body); letter-spacing:.1em; color:var(--faint) }
.ecard .body { display:grid; gap:6px; padding:12px 0; min-width:0 }
.ecard .title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:700 }
.ecard .title b { color:var(--team) }
.ecard .chips { display:flex; gap:6px; flex-wrap:wrap }
.ecard .side { padding-right:16px; text-align:right; display:grid; gap:4px; justify-items:end }
@media (max-width:640px) { .ecard { grid-template-columns:6px minmax(0,1fr); } .ecard .id { display:none } .ecard .side { grid-column:2; padding:0 0 12px; justify-items:start; text-align:left } }

/* ---------- leaderboard ---------- */
.controls { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.seg { display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:3px; flex-wrap:wrap }
.seg button { border:0; background:transparent; color:var(--muted); font-weight:600; padding:7px 12px; border-radius:7px; cursor:pointer }
.seg button[aria-pressed="true"] { background:var(--gold); color:#1d1606 }
.select { position:relative } .select select { appearance:none; background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:9px 34px 9px 12px; font-weight:600; cursor:pointer }
.select::after { content:""; position:absolute; right:13px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none }
.podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end }
.podium a { text-decoration:none; display:grid; justify-items:center; position:relative }
.podium img.body { height:200px; width:auto; image-rendering:pixelated; filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)); position:relative; z-index:1 }
.podium .plinth { width:100%; border-radius:10px 10px 0 0; display:grid; justify-items:center; align-content:start; gap:4px; padding:16px 10px 14px; margin-top:-4px; border:1px solid var(--line); border-bottom:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--medal) 22%, var(--panel)) 0%, var(--ground-2) 100%) }
.podium .p1 .plinth { min-height:170px } .podium .p2 .plinth { min-height:130px } .podium .p3 .plinth { min-height:105px }
.podium .p1 { order:2; --medal:var(--gold) } .podium .p2 { order:1; --medal:var(--silver) } .podium .p3 { order:3; --medal:var(--bronze) }
.podium .place { font:700 30px/1 var(--numf); color:var(--medal) }
.podium .pname { font-weight:700; font-size:16px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.podium .pval { font:700 22px var(--numf) }
.podium a:hover .pname { color:var(--gold) }
@media (max-width:640px) { .podium img.body { height:130px } .podium .place { font-size:22px } .podium .pval { font-size:17px } }

/* ---------- event page ---------- */
.ev-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end }
.back { color:var(--muted); text-decoration:none; font-weight:600 } .back:hover { color:var(--gold) }
.standings { display:grid; gap:8px }
.srow { display:grid; grid-template-columns:34px minmax(110px,170px) minmax(0,1fr) auto; gap:14px; align-items:center; background:var(--ground-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px }
.srow .pos { font:700 18px var(--numf); color:var(--faint); text-align:center }
.srow:nth-child(1) .pos { color:var(--gold) }
.srow .tname { font-weight:700; color:var(--team) }
.srow .track { height:10px; background:var(--panel-2); border-radius:6px; overflow:hidden } .srow .track i { display:block; height:100%; background:var(--team); border-radius:6px }
.srow .pts { font:700 17px var(--numf); text-align:right; min-width:70px }
.srow .members { grid-column:2 / -1; display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted) }
.srow .members a { text-decoration:none; display:inline-flex; gap:6px; align-items:center } .srow .members a:hover { color:var(--gold) }
.srow .members img { width:18px; height:18px; image-rendering:pixelated; border-radius:3px }
@media (max-width:640px) { .srow { grid-template-columns:28px minmax(0,1fr) auto } .srow .track { display:none } }
.timeline { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px }
.gtile { background:var(--ground-2); border:1px solid var(--line); border-top:3px solid var(--team); border-radius:10px; padding:12px; display:grid; gap:6px }
.gtile .n { font:600 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--faint) }
.gtile .g { display:flex; align-items:center; gap:8px; font-weight:700 }
.gtile .w { font-size:13px; color:var(--muted) } .gtile .w b { color:var(--team) }
.gtile .x { font:700 13px var(--numf); color:var(--gold) }
.awards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px }
.award { background:var(--ground-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 12px; align-items:center; text-decoration:none }
.award img { width:40px; height:40px; image-rendering:pixelated; border-radius:6px; grid-row:span 2 }
.award .t { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold) }
.award .nm { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .award .vl { color:var(--muted); font-size:13px; grid-column:2 }
.award:hover { border-color:var(--line-2) }

/* tables (event players, player recent, per game) */
.table { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--ground-2) }
.table .scroll { overflow-x:auto }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--panel) }
td { padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap }
tr:last-child td { border-bottom:0 }
td.n, th.n { text-align:right }
tbody tr.link { cursor:pointer } tbody tr.link:hover td { background:var(--panel) }

/* ---------- stats ---------- */
.totals { display:flex; gap:10px 28px; flex-wrap:wrap; color:var(--muted) } .totals b { color:var(--fg); font:700 18px var(--numf); margin-right:6px }
.records { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px }
.record { background:var(--ground-2); border:1px solid var(--line); border-radius:12px; padding:16px; display:grid; gap:12px }
.record .top-line { display:flex; align-items:center; gap:10px } .record .top-line h3 { font:600 18px var(--pixel) } .record .top-line span { margin-left:auto; color:var(--muted); font-size:13px }
.record .holder { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; text-decoration:none; padding:8px; border-radius:8px; background:var(--panel) }
.record .holder:hover { background:var(--panel-2) }
.record .holder .lbl { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700 }
.record .holder .val { font:700 16px var(--numf); color:var(--gold) }
.tierbar { display:flex; height:30px; border-radius:8px; overflow:hidden; border:1px solid var(--line) }
.tierbar div { display:flex; align-items:center; justify-content:center; font:700 13px var(--numf); color:#15120a; min-width:0 }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted) }

/* ---------- player ---------- */
.profile-top { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px }
@media (max-width:900px) { .profile-top { grid-template-columns:minmax(0,1fr) } }
.pname { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.pname img { width:72px; height:72px; image-rendering:pixelated; border-radius:8px }
.pname h1 { font-size:clamp(32px,5vw,48px) }
.bar { height:10px; background:var(--panel-2); border-radius:6px; overflow:hidden } .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-2)) }
.kv { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.kv .k { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.kv .v { font:700 30px/1.1 var(--numf) }
.panel { background:var(--ground-2); border:1px solid var(--line); border-radius:12px; padding:18px; min-width:0 }
.chart { position:relative; height:240px } .chart.tall { height:300px }
.card { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg,#1a1730,#0c0d12 80%); display:grid; grid-template-rows:1fr auto; min-height:420px }
.card::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:20px 20px; mask-image:linear-gradient(180deg,#000,transparent 75%) }
.card .rank { position:absolute; inset:16px 0 auto; text-align:center; font:700 104px/1 var(--pixel); color:transparent; -webkit-text-stroke:2px rgba(244,198,78,.55) }
.card .skin { position:relative; display:grid; place-items:end center; padding-top:64px }
.card .skin img { height:250px; width:auto; image-rendering:pixelated; filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) }
.card .facts { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; padding:16px 18px; background:rgba(0,0,0,.45); border-top:1px solid var(--line) }
.card .facts .k { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.card .facts b { display:block; font:700 20px var(--numf); font-weight:600 }
.badges { display:flex; flex-wrap:wrap; gap:8px }
.badge { display:flex; gap:8px; align-items:center; padding:7px 11px; border-radius:8px; background:var(--panel); border:1px solid var(--line); font-size:13px; font-weight:600 }
.badge svg { width:16px; height:16px }
.badge.locked { opacity:.4 }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important } }

/* ---------- leaderboard: The Climb ---------- */
/* movement only: never hidden, even if a browser holds the animation at its start */
@keyframes rise { from { transform:translateY(18px) } to { transform:none } }
@keyframes grow { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes shine { to { background-position:200% 0 } }
@keyframes bob { 0%, 100% { transform:translateY(0) } 50% { transform:translateY(-4px) } }
@keyframes glow { 0%, 100% { box-shadow:0 0 0 1px rgba(244,198,78,.25), 0 0 24px rgba(244,198,78,.08) } 50% { box-shadow:0 0 0 1px rgba(244,198,78,.55), 0 0 34px rgba(244,198,78,.18) } }
/* motion only once the page is really being looked at (html.anim): at rest everything is visible */
.anim .rise { animation:rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 35ms) }
.lb-head { display:grid; gap:14px }
.lb-head h1 { font-size:clamp(36px,6vw,58px) }
.lb-head .controls { margin-top:4px }

.spot { position:relative; display:grid; grid-template-columns:minmax(220px,340px) minmax(0,1fr); align-items:center; border-radius:18px; overflow:hidden; border:1px solid rgba(244,198,78,.35);
  background:radial-gradient(60% 90% at 22% 60%, rgba(244,198,78,.22), transparent 70%), linear-gradient(180deg,#1a1709,#0e0f15 75%) }
.anim .spot { animation:rise .55s both, glow 4s ease-in-out infinite }
.spot::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:22px 22px; mask-image:radial-gradient(70% 90% at 25% 60%, #000, transparent) }
.spot-skin { position:relative; height:380px; display:grid; place-items:end center }
.spot-skin canvas { width:100%; height:100%; display:block; cursor:grab }
.spot-skin canvas:active { cursor:grabbing }
.spot-fallback { height:300px; width:auto; image-rendering:pixelated; margin-bottom:30px; filter:drop-shadow(0 14px 18px rgba(0,0,0,.6)) }
.spot-skin::after { content:""; position:absolute; left:15%; right:15%; bottom:18px; height:28px; background:radial-gradient(50% 50% at 50% 50%, rgba(244,198,78,.35), transparent 70%); pointer-events:none }
.spot-copy { position:relative; padding:32px 36px 32px 8px; display:grid; gap:12px; align-content:center }
.spot-rank { position:absolute; right:24px; top:6px; font:700 150px/1 var(--pixel); color:transparent; -webkit-text-stroke:2px rgba(244,198,78,.35); pointer-events:none; user-select:none }
.spot-name { font:700 clamp(36px,5.4vw,60px)/1 var(--pixel); text-decoration:none; justify-self:start; position:relative }
.shine { background:linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 30%, #fff6d6 45%, var(--gold) 60%, var(--gold-deep) 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 3.5s linear infinite }
.spot-value { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.spot-value .num { font-size:44px; line-height:1 }
.spot-value small { color:var(--muted); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px }
.spot-facts { display:flex; gap:10px 26px; flex-wrap:wrap; margin:6px 0 4px }
.spot-facts > div { display:grid; gap:4px; justify-items:start }
.spot-facts .k { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.spot-facts b { font-size:20px }
@media (max-width:760px) { .spot { grid-template-columns:minmax(0,1fr) } .spot-skin { height:300px } .spot-copy { padding:0 22px 26px } .spot-rank { font-size:96px; top:-300px; right:10px } }

.chg { font:700 13px var(--numf); white-space:nowrap; font-variant-numeric:tabular-nums }

.contenders { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
@media (max-width:900px) { .contenders { grid-template-columns:repeat(2,minmax(0,1fr)) } }
.cont { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"img img" "name name" "val tier" "meter meter"; gap:6px 8px; padding:14px 14px 16px; border-radius:14px; text-decoration:none; overflow:hidden;
  background:linear-gradient(180deg, var(--panel) 0%, var(--ground-2) 100%); border:1px solid var(--line); transition:transform .2s, border-color .2s }
.cont:hover { transform:translateY(-4px); border-color:var(--line-2) }
.cont img { grid-area:img; justify-self:center; height:150px; width:auto; image-rendering:pixelated; filter:drop-shadow(0 10px 12px rgba(0,0,0,.5)) }
.cont .cont-rank { position:absolute; left:12px; top:8px; font:700 26px var(--numf); color:var(--faint) }
.cont:nth-child(1) .cont-rank { color:var(--silver) } .cont:nth-child(2) .cont-rank { color:var(--bronze) }
.cont-name { grid-area:name; font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cont:hover .cont-name { color:var(--gold) }
.cont-val { grid-area:val; display:flex; gap:8px; align-items:baseline } .cont-val .num { font-size:22px }
.cont .tier { grid-area:tier; align-self:center }
.cont .meter { grid-area:meter }
.meter { display:block; height:6px; border-radius:4px; background:var(--panel-2); overflow:hidden }
.meter i { display:block; height:100%; width:var(--w); border-radius:4px; background:linear-gradient(90deg, var(--gold-deep), var(--gold)); transform-origin:left }
.anim .meter i { animation:grow .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:.25s }
.bob { transition:transform .2s }
a:hover > .bob, a:hover .bob { animation:bob .9s ease-in-out infinite }

.ladder { display:grid; gap:18px }
.find input { background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:8px 12px; width:220px }
.band { border-radius:14px; border:1px solid var(--line); background:var(--ground-2); overflow:hidden; --tc:var(--line-2) }
.band-S { --tc:var(--gold); border-color:rgba(244,198,78,.4) }
.anim .band-S { animation:glow 4s ease-in-out infinite }
.band-A { --tc:#c4b5fd } .band-B { --tc:#7dd3fc } .band-C { --tc:#86efac } .band-D { --tc:#cbd5e1 } .band-Q, .band-R { --tc:var(--line-2) }
.band-head { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, transparent), transparent 60%) }
.band-head .tier { width:30px; height:30px; font-size:15px }
.band-head h3 { font:600 18px var(--pixel); color:var(--tc) }
.band-head .faint { margin-left:auto; font-size:13px }
.rungs { list-style:none; margin:0; padding:0 }
.rungs li + li { border-top:1px solid var(--line) }
.rung { display:grid; grid-template-columns:40px 34px minmax(0,1.2fr) minmax(80px,1fr) auto 58px; gap:12px; align-items:center; padding:10px 16px 10px 10px; text-decoration:none; transition:background .15s }
.rung:hover { background:var(--panel) }
.rung .pos { font:700 16px var(--numf); color:var(--faint); text-align:center }
.rung .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rung:hover .name { color:var(--gold) }
.rung .sub { display:block; font-size:12px; color:var(--muted); font-weight:500 }
.rung .val { font-size:17px; text-align:right; min-width:56px }
.rung .chg { text-align:right }
@media (max-width:700px) { .rung { grid-template-columns:30px 30px minmax(0,1fr) auto 48px } .rung .meter { display:none } .find input { width:150px } }
@media (prefers-reduced-motion: reduce) { .rise, .meter i, .spot, .band-S, .shine { animation:none !important } .shine { color:var(--gold); -webkit-text-fill-color:var(--gold) } }

.band .meter i { background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, #000), var(--tc)) }

/* ---------- small phones: logo + Copy IP on top, search full width, tabs spread out ---------- */
.nav { scrollbar-width:none } .nav::-webkit-scrollbar { display:none }
@media (max-width:520px) {
  .top .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-block:10px }
  .top .right { display:contents }
  .ip { grid-column:2; grid-row:1; justify-self:end; padding:8px 10px }
  .ip .ip-host { display:none }
  .ip small { display:inline; opacity:1 }
  .search { grid-column:1 / -1; grid-row:2 }
  .search input { width:100%; max-width:none }
  .suggest { left:0; right:0; width:auto }
  .nav { grid-column:1 / -1; grid-row:3; display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; width:100% }
  .nav a { padding:6px 4px }
  .lb-head h1 { font-size:36px }
  .spot-rank { font-size:80px; top:auto; bottom:auto; right:12px }
}
@media (max-width:860px) and (min-width:521px) { .ip small { display:inline } }
/* the 3D skin only grabs the mouse on computers; on phones a swipe over it scrolls the page */
@media (pointer:coarse) { .spot-skin canvas { cursor:default; touch-action:pan-y } }

/* tier badges: the server's pixel art, kept crisp */
img.tier { width:30px; height:18px; image-rendering:pixelated; clip-path:none; background:none; display:inline-block; vertical-align:middle; flex:none }
.band-head img.tier { width:40px; height:24px }
.spot-facts img.tier { width:40px; height:24px }


/* ==================================================================================================
 * BROADCAST: the site-wide look (an esports scoreboard): black and gold, condensed bold italic
 * capitals for names, headings and numbers, slanted shapes. The leaderboard's #2-#5 and its tier
 * ladder keep their own look.
 * ================================================================================================== */
:root { --cond:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif; --pixel:var(--cond); --numf:var(--cond); --ground:#070708; --ground-2:#0f0f12; --panel:#141417; --panel-2:#1d1d22; --line:#24242a; --line-2:#33333b }
body { background:var(--ground); background-image:none }
h1, h2, .team-name, .spot-name, .eyebrow + h1 { font-family:var(--cond); font-style:italic; text-transform:uppercase; letter-spacing:-.005em }
h1 { font-weight:800; font-size:clamp(40px,6vw,66px); line-height:.92 }
h2 { font-weight:800; font-size:26px }
.eyebrow { letter-spacing:.3em }
.num, .ranks .val, .ranks .pos, .rung .val, .rung .pos, .podium .pval, .srow .pts, .srow .pos, .ecard .id, .strip .v, .stage .pts, .kv .v, .card .facts b, .record .holder .val, .totals b, .cont-val .num, .cont .cont-rank, .spot-value .num, .spot-facts b, .chg { font-family:var(--cond); font-style:italic; font-weight:800 }

/* top bar */
.top { background:#000; border-bottom:3px solid var(--gold) }
.logo b { font:800 italic 24px var(--cond); color:var(--fg); letter-spacing:.01em }
.logo i { font:800 italic 24px var(--cond); color:var(--gold); font-style:italic }
.logo small { display:none }
.nav a { font:700 italic 17px var(--cond); text-transform:uppercase; letter-spacing:.05em; border-bottom-width:3px; margin-bottom:-3px }
.nav a[aria-current="page"] { border-bottom-color:var(--gold) }
.ip { border-radius:0; font:800 italic 16px var(--cond); letter-spacing:.03em; text-transform:uppercase; padding:9px 20px; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%) }
.ip small { font:700 13px var(--body); text-transform:none; letter-spacing:0 }
.search input { border-radius:0 }
@media (max-width:520px) { .logo i { display:none } }

/* buttons and the stat tabs: slanted */
.btn { border-radius:0; font:800 italic 17px var(--cond); text-transform:uppercase; letter-spacing:.04em; padding:11px 22px; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); background:var(--gold); color:#000 }
.btn:hover { background:var(--gold-2) }
.btn.ghost { background:var(--panel-2); color:var(--fg); border:0 } .btn.ghost:hover { background:var(--line-2); color:var(--gold) }
.seg { background:transparent; border:0; padding:0; gap:4px }
.seg button { border-radius:0; font:700 italic 16px var(--cond); text-transform:uppercase; letter-spacing:.04em; padding:9px 18px; background:var(--panel); color:var(--muted); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%) }
.seg button:hover { color:var(--fg) }
.seg button[aria-pressed="true"] { background:var(--gold); color:#000 }
.select select { border-radius:0; font:700 italic 16px var(--cond); text-transform:uppercase; letter-spacing:.04em }

/* ---------- leaderboard #1: the broadcast spotlight ---------- */
.spot { border:0; border-radius:0; background:linear-gradient(105deg,#1d1606 0%,#0e0e10 58%); clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%); grid-template-columns:minmax(220px,320px) minmax(0,1fr) }
.anim .spot { animation:rise .55s both }
.spot::before { display:none }
.spot-skin { background:linear-gradient(0deg, rgba(244,198,78,.32), transparent 62%) }
.spot-skin::after { display:none }
.spot-copy { padding:34px 34px 34px 30px; gap:10px; z-index:1 }
.spot-rank { right:24px; top:auto; bottom:-70px; font:800 italic 400px/1 var(--cond); -webkit-text-stroke:2px rgba(244,198,78,.22); z-index:0 }
.spot-name { font:800 italic clamp(48px,7vw,84px)/.88 var(--cond); text-transform:uppercase; color:var(--fg); background:none; -webkit-text-fill-color:currentColor }
.spot-name:hover { color:var(--gold) }
.spot-value .num { font-size:56px; color:var(--gold) }
.spot-value small { font:700 13px var(--body); letter-spacing:.24em }
.spot-facts { gap:0; margin:4px 0 6px }
.spot-facts > div { padding:4px 22px 4px 0; margin-right:22px; border-right:2px solid var(--line-2) }
.spot-facts > div:last-child { border-right:0; margin-right:0 }
.spot-facts .k { letter-spacing:.2em }
.spot-facts b { font-size:30px; line-height:1.05 }
@media (max-width:760px) { .spot-copy { padding:4px 22px 34px } .spot-rank { font-size:220px; bottom:auto; top:20px; right:8px } .spot-facts > div { margin-bottom:8px } }

/* ---------- home and event stage ---------- */
.stage { border:0; border-radius:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);
  background:linear-gradient(105deg, color-mix(in srgb, var(--team) 34%, #070708) 0%, #0e0e10 62%) }
.stage::before { display:none }
.stage .team-name { font:800 italic clamp(52px,8vw,96px)/.88 var(--cond); text-shadow:none }
.stage .pts { font-size:30px; color:var(--gold) }
.stage .bodies span { border-radius:0; font:700 italic 15px var(--cond); text-transform:uppercase; letter-spacing:.04em; background:#000c }
.stage .floor { background:linear-gradient(0deg, color-mix(in srgb, var(--team) 40%, transparent), transparent) ; left:0; right:0; height:120px }
.strip { border-radius:0; gap:2px; background:transparent; border:0 }
.strip > div { background:var(--ground-2); border-left:3px solid var(--gold) }
.strip .v { font-size:24px; text-transform:uppercase }

/* lists and cards: square, scoreboard rows */
.ranks, .events .ecard, .table, .record, .award, .gtile, .srow, .panel, .card, .empty, .band, .cont { border-radius:0 }
.ranks a.row .pos { font-size:24px }
.ranks .val { font-size:24px }
.ranks .name { font:700 italic 19px var(--cond); text-transform:uppercase; letter-spacing:.02em }
.ecard { grid-template-columns:8px 86px minmax(0,1fr) auto }
.ecard .id { font-size:28px; color:var(--fg) }
.ecard .title { font:700 italic 19px var(--cond); text-transform:uppercase; letter-spacing:.02em }
.ecard .side .num { font-size:24px !important }
.chip { border-radius:0 }
.srow .tname { font:800 italic 20px var(--cond); text-transform:uppercase }
.srow .pts, .srow .pos { font-size:24px }
.srow .track, .srow .track i { border-radius:0 }
.gtile { border-top-width:4px }
.gtile .g { font:700 italic 19px var(--cond); text-transform:uppercase }
.award .nm { font:700 italic 19px var(--cond); text-transform:uppercase }
.record .top-line h3 { font:800 italic 22px var(--cond); text-transform:uppercase }
.record .holder { border-radius:0 }
.totals b { font-size:24px }
th { font-family:var(--body) }
.pname h1 { font-size:clamp(44px,6vw,72px) }
.kv .v { font-size:38px }
.card .rank { font:800 italic 120px/1 var(--cond) }
.card .facts b { font-size:26px }
.badge { border-radius:0 }
.foot { background:#000 }
/* phones: the spotlight stacks (skin on top, details under it) */
@media (max-width:760px) {
  .spot { grid-template-columns:minmax(0,1fr) }
  .spot-skin { height:280px }
  .spot-copy { padding:6px 20px 36px }
  .spot-name { font-size:clamp(40px,12vw,60px); overflow-wrap:anywhere }
  .spot-rank { font-size:200px; top:10px; bottom:auto; right:6px }
  .spot-facts > div { margin-bottom:8px }
}

/* long names wrap instead of running off the page */
.pname > div { min-width:0 } .pname h1, .spot-name, .team-name, .podium .pname { overflow-wrap:anywhere }

/* ---------- player: teammates and rivals ---------- */
.people { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:12px }
.people-col { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px }
.people-col h3 { margin:0 0 10px; font:italic 700 18px/1 var(--cond); text-transform:uppercase; letter-spacing:.02em }
.people-col ol { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.people-col li { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0 }
.people-col li a { display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none; font-weight:600 }
.people-col li a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.people-col li a:hover span { text-decoration:underline }
.people-col .face { border-radius:4px; flex:none; image-rendering:pixelated }
.people-col .val { color:var(--muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums }

.tierbar-empty { flex:1; display:grid; place-items:center; color:var(--muted); font-size:13px }