:root{color-scheme:dark;--ink:#f4f6ff;--muted:#aab6db;--panel:#111a3b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% -10%,#293682,transparent 30%),#090e25;color:var(--ink);font:16px system-ui,sans-serif}.race-shell{max-width:1200px;margin:auto;padding:32px 24px 80px}.race-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}.brand{color:#f4f6ff;text-decoration:none;font-weight:1000;letter-spacing:.12em}.brand span{color:#e5b3ff}.tag-pill{border:1px solid #344275;border-radius:999px;padding:.55rem .8rem;color:#b8c4ee;font-size:.85rem}.race-hero{padding:34px;border:1px solid #354784;border-radius:28px;background:linear-gradient(120deg,#142665,#2c205f);display:flex;justify-content:space-between;align-items:center;gap:2rem}.brawler-mark{display:flex;gap:22px;align-items:center}.brawler-mark img{width:104px;height:104px;object-fit:cover;border-radius:24px;background:#101a42;border:2px solid #8ab3ff}.eyebrow{color:#9baeff;font-weight:800;font-size:.75rem;letter-spacing:.13em;margin:0}.race-hero h1{font-size:clamp(2.8rem,6vw,5.8rem);line-height:.95;margin:.08em 0}.race-hero p{color:#bfcaee}.hero-stat{background:#0c1334aa;padding:18px 24px;border-radius:18px;text-align:right;min-width:160px}.hero-stat small,.hero-stat span{display:block;color:#aab7e4;font-weight:800}.hero-stat strong{font-size:2.6rem}.race-actions{margin:24px 0;display:flex;justify-content:space-between;align-items:end;gap:18px;padding:22px 26px;background:var(--panel);border-radius:20px;border:1px solid #26345f}.entry-row{display:flex;gap:10px;margin-top:8px}input,button{border:0;border-radius:11px;padding:.85rem 1rem;font:inherit}input{background:#202d58;color:white;min-width:280px}button{background:linear-gradient(135deg,#ff4b9a,#7d70ff);color:#fff;font-weight:900;cursor:pointer}.race-actions #race-status{margin:0;color:var(--muted)}.race-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:20px}.chart-panel,.leaderboard-panel,.nearby-panel{padding:24px;background:var(--panel);border:1px solid #28375f;border-radius:22px}.panel-heading{display:flex;justify-content:space-between;gap:10px}.panel-heading h2{margin:.15rem 0;font-size:1.55rem}.demo-badge{font-size:.75rem;background:#32264f;color:#e5c7ff;padding:.35rem .55rem;border-radius:99px}.chart-wrap{margin-top:12px;padding:10px 0;overflow:hidden}.chart-wrap svg{width:100%;height:auto}.gridline{stroke:#29365e;stroke-width:1}.axis{fill:#7583ab;font-size:12px}.race-line{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.race-line.you,.dot.you{stroke:#ff4b9a;fill:#ff4b9a}.race-line.luk,.dot.luk{stroke:#8e78ff;fill:#8e78ff}.legend{display:flex;gap:22px;color:#b6c1e4;font-size:.9rem}.legend i{display:inline-block;width:22px;height:3px;vertical-align:middle;margin-right:7px;border-radius:5px}.line-you{background:#ff4b9a}.line-luk{background:#8e78ff}.leaderboard{padding:0;margin:16px 0 0;list-style:none}.leaderboard li{display:grid;grid-template-columns:24px 34px 1fr auto auto;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid #26345f}.place{font-weight:900;color:#c6d0ee}.avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#344577;color:white;font-weight:900}.avatar.you{background:#ff4b9a}.avatar.luk{background:#8e78ff}.player b,.player small{display:block}.player small,.leaderboard em,.muted{color:#92a0c8;font-size:.78rem}.leaderboard strong{font-size:1.08rem}.leaderboard em{font-style:normal}.nearby-panel{margin-top:20px}.text-button{background:transparent;border:1px solid #465d9c;padding:.55rem .8rem}.nearby-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.nearby-player{display:flex;align-items:center;gap:10px;padding:12px;background:#162046;border-radius:14px}.nearby-player b,.nearby-player small{display:block}.nearby-player small{color:#aab6db;font-size:.78rem}.nearby-player button{padding:.45rem .65rem;margin-left:auto;font-size:.82rem}@media(max-width:760px){.race-hero,.race-actions{display:block}.hero-stat{margin-top:18px;text-align:left}.race-grid{grid-template-columns:1fr}.nearby-list{grid-template-columns:1fr}.entry-row{display:block}.entry-row input{min-width:0;width:100%}.entry-row button{margin-top:8px}}

body.race-page { position: relative; min-height: 100vh; overflow-x: hidden; isolation: isolate; background: #090e25; }
body.race-page::before { content: ""; position: fixed; z-index: -2; inset: -20%; pointer-events: none; background: repeating-linear-gradient(105deg, transparent 0 150px, rgba(130,109,255,.055) 150px 153px, transparent 153px 300px), repeating-linear-gradient(0deg, transparent 0 92px, rgba(255,255,255,.035) 92px 94px), radial-gradient(circle at 18% 12%, #3448a0 0, transparent 30%), radial-gradient(circle at 88% 30%, #59237f 0, transparent 27%), #090e25; animation: race-background-drift 18s linear infinite; }
body.race-page::after { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 9% 22%, rgba(255,75,154,.6) 0 3px, transparent 4px), radial-gradient(circle at 92% 18%, rgba(255,212,105,.68) 0 4px, transparent 5px), radial-gradient(circle at 78% 76%, rgba(45,206,190,.45) 0 3px, transparent 4px), linear-gradient(90deg, transparent 48%, rgba(142,120,255,.06) 50%, transparent 52%); background-size: 240px 240px, 310px 310px, 270px 270px, 100% 100%; animation: race-lights-drift 12s ease-in-out infinite alternate; }
.race-shell { position: relative; z-index: 1; }
.race-header-left { display: flex; align-items: center; gap: 18px; }
.race-back { padding: .52rem .72rem; border: 1px solid #3c4d82; border-radius: 999px; background: rgba(11,18,48,.72); color: #c9d4f9; font-size: .78rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.race-back:hover,.race-back:focus-visible { transform: translateX(-3px); border-color: #8e78ff; background: #17234c; outline: 2px solid rgba(142,120,255,.35); outline-offset: 2px; }
.race-intro { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: radial-gradient(circle at center, rgba(92,55,183,.9), rgba(9,14,37,.97) 58%); animation: race-intro-overlay 2.4s ease-out both; }
.race-intro-burst { position: absolute; width: min(74vw,620px); aspect-ratio: 1; border: 4px solid rgba(255,212,105,.8); border-radius: 50%; box-shadow: 0 0 0 24px rgba(142,120,255,.2),0 0 0 54px rgba(255,75,154,.12); animation: race-intro-burst 1.85s cubic-bezier(.16,.8,.2,1) both; }
.race-intro-burst::before,.race-intro-burst::after { content:""; position:absolute; inset:48%; background:#ffd469; box-shadow:0 -260px #ff4b9a,184px -184px #2dcebe,260px 0 #ffd469,184px 184px #8e78ff,0 260px #ff4b9a,-184px 184px #2dcebe,-260px 0 #ffd469,-184px -184px #8e78ff; transform:rotate(45deg); }
.race-intro-burst::after { transform:rotate(67deg) scale(.62); opacity:.7; }
.race-intro-lockup { position: relative; display: grid; justify-items: center; filter: drop-shadow(0 18px 28px rgba(0,0,0,.38)); }
.race-intro-lockup img { width: clamp(120px,18vw,190px); height: clamp(120px,18vw,190px); object-fit: cover; border: 7px solid #fff; border-radius: 34%; background:#111a3b; box-shadow:0 0 0 8px #8e78ff,0 0 42px rgba(255,75,154,.7); animation: race-brawler-launch 1.45s cubic-bezier(.16,.86,.18,1.08) both; }
.race-intro-lockup strong { margin-top:.2rem; color:#fff; font:1000 clamp(3rem,8vw,6rem)/.9 system-ui,sans-serif; font-style:italic; letter-spacing:-.08em; text-shadow:0 6px #ff4b9a,0 11px #34226e; transform:skewX(-7deg); animation:race-title-slam .9s .42s cubic-bezier(.16,.86,.18,1.15) both; }
.race-intro-lockup span { margin-top:.75rem; color:#ffd469; font-size:clamp(.8rem,2vw,1.15rem); font-weight:1000; letter-spacing:.18em; text-transform:uppercase; animation:race-title-slam .8s .65s ease-out both; }
.race-page.is-entering-race .race-shell { animation: race-page-enter .95s 1.25s cubic-bezier(.18,.78,.2,1) both; }
.race-page.is-entering-race .brawler-mark img { animation: race-hero-brawler-enter .82s 1.48s cubic-bezier(.18,.85,.2,1.12) both; }
.race-page.is-entering-race .race-metrics article { animation: race-card-enter .65s calc(1.48s + var(--race-card-index,0) * 90ms) cubic-bezier(.18,.8,.2,1) both; }
.race-page.is-entering-race .race-metrics article:nth-child(1){--race-card-index:0}.race-page.is-entering-race .race-metrics article:nth-child(2){--race-card-index:1}.race-page.is-entering-race .race-metrics article:nth-child(3){--race-card-index:2}.race-page.is-entering-race .race-metrics article:nth-child(4){--race-card-index:3}
.race-page.is-leaving-race .race-shell { pointer-events: none; animation: race-page-exit .3s cubic-bezier(.4,0,.7,.2) both; }
@keyframes race-background-drift { from { transform: translate3d(-2%,0,0); } to { transform: translate3d(8%,-4%,0); } }
@keyframes race-lights-drift { from { transform: translate3d(-8px,7px,0); opacity: .72; } to { transform: translate3d(10px,-9px,0); opacity: 1; } }
@keyframes race-page-enter { from { opacity: 0; transform: translateX(30px) scale(.985); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes race-page-exit { to { opacity: 0; transform: translateX(28px) scale(.985); filter: blur(5px); } }
@keyframes race-intro-overlay { 0%,58%{opacity:1} 100%{opacity:0;visibility:hidden} }
@keyframes race-intro-burst { from{opacity:0;transform:scale(.1) rotate(-25deg)} 45%{opacity:1} to{opacity:0;transform:scale(1.35) rotate(12deg)} }
@keyframes race-brawler-launch { 0%{opacity:0;transform:translate3d(-90px,100px,0) scale(.12) rotate(-22deg)} 62%{opacity:1;transform:translate3d(8px,-10px,0) scale(1.12) rotate(4deg)} 100%{opacity:1;transform:none} }
@keyframes race-title-slam { from{opacity:0;transform:translateY(35px) scale(1.8) skewX(-7deg)} to{opacity:1;transform:skewX(-7deg)} }
@keyframes race-hero-brawler-enter { from{opacity:0;transform:translateX(-35px) rotate(-10deg) scale(.72)} to{opacity:1;transform:none} }
@keyframes race-card-enter { from{opacity:0;transform:translateY(24px) scale(.94)} to{opacity:1;transform:none} }
@media(max-width:760px){.race-header-left{gap:10px}.race-header-left .brand{font-size:.78rem;letter-spacing:.07em}.race-back{padding:.46rem .58rem}.tag-pill{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:480px){.race-shell{padding-inline:24px}.race-hero{padding:24px 20px}.brawler-mark{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px}.brawler-mark>div{min-width:0}.brawler-mark img{width:80px;height:80px;border-radius:20px}.race-hero h1{font-size:2.2rem;overflow-wrap:anywhere}.race-hero p{font-size:.9rem}.hero-stat{margin-top:22px}.race-header{gap:8px}.race-header-left .brand{max-width:92px;line-height:1.2}.tag-pill{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.race-intro{display:none}body.race-page::before,body.race-page::after,.race-page.is-entering-race .race-shell,.race-page.is-entering-race .brawler-mark img,.race-page.is-entering-race .race-metrics article,.race-page.is-leaving-race .race-shell{animation:none!important}.home-page.is-leaving-for-race .site-shell,.home-page.is-returning-from-race .site-shell{animation:none!important}}