:root { --ink:#05070a; --panel:#0e1116; --line:#1e2530; --mist:#c7d0dd; --dim:#7c8797; --cyan:#22d3ee; --red:#ff3b30; --gold:#ffd76a; --green:#3ba55d; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--ink); color:var(--mist); font-family:Inter,system-ui,"Segoe UI",Roboto,sans-serif; min-height:100vh; }
.wrap { max-width:900px; margin:0 auto; padding:48px 18px 60px; }

.hero { margin-bottom:28px; }
.kicker { color:var(--cyan); font-weight:800; font-size:13px; letter-spacing:.22em; text-transform:uppercase; }
h1 { font-family:"Bebas Neue",Inter,sans-serif; font-size:clamp(3rem,9vw,6rem); line-height:.85; text-transform:uppercase; margin-top:8px; }
.accent { height:4px; width:72px; background:var(--red); margin:14px 0 18px; }
.lead { color:rgba(199,208,221,.75); max-width:620px; line-height:1.55; }

.list { display:flex; flex-direction:column; gap:12px; }
.row { position:relative; display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:16px; background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--c,#ff4d1c); border-radius:12px; padding:16px 18px; }
.row.leader { border-left-color:var(--gold); box-shadow:0 0 0 1px rgba(255,215,106,.25) inset; }
.row.finished { border-left-color:var(--green); }
.rank { font-family:"Bebas Neue",Inter,sans-serif; font-size:42px; text-align:center; color:#fff; opacity:.85; }
.row.leader .rank { color:var(--gold); opacity:1; }
.mid { min-width:0; }
.name { color:#fff; font-weight:800; font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar { height:9px; border-radius:99px; background:rgba(255,255,255,.08); margin-top:10px; overflow:hidden; position:relative; }
.fill { position:absolute; inset:0 auto 0 0; width:0; border-radius:99px; background:linear-gradient(90deg,var(--c,#ff4d1c),#ffffff22); transition:width .6s cubic-bezier(.22,1,.36,1); }
.right { text-align:right; }
.badge { font-family:"Bebas Neue",Inter,sans-serif; font-size:30px; color:#fff; line-height:1; letter-spacing:.03em; }
.badge .mp { color:var(--gold); }
.sub { font-size:12px; color:var(--dim); font-weight:700; margin-top:4px; }
.row.leader .sub { color:var(--gold); }
.foot { text-align:center; color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin-top:34px; }
.empty { color:var(--dim); text-align:center; padding:40px; border:1px dashed var(--line); border-radius:12px; }

@media (max-width:560px){ .row { grid-template-columns:40px 1fr auto; gap:10px; padding:13px; } .badge { font-size:24px; } .rank { font-size:32px; } }