:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#06101f;--panel:#0a1d3b;--line:#1b4f86;--text:#e8f4ff;--mute:#7f9bbb;--a1:#3b82f6;--a2:#22d3ee;--a3:#38bdf8;--live:#53fc18;--onAcc:#04202b;color-scheme:dark}


*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100%;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
background:radial-gradient(40% 40% at 20% 20%,color-mix(in srgb,var(--a1) 35%,transparent),transparent),
radial-gradient(35% 35% at 80% 30%,color-mix(in srgb,var(--a2) 28%,transparent),transparent),
radial-gradient(40% 40% at 60% 85%,color-mix(in srgb,var(--a3) 28%,transparent),transparent);
animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,-3%) scale(1.12) rotate(4deg)}}
main{max-width:1000px;margin:0 auto;padding:20px 16px 48px;display:grid;gap:18px}
.box{background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(6px)}

/* live banner */
.live{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-radius:14px;border:1px solid #2a2f2a;background:#000;color:#fff}
.live.on{border-color:var(--live);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{50%{box-shadow:0 0 24px rgba(83,252,24,.45)}}
.kick{height:36px;width:auto;flex:none}
.dot{width:12px;height:12px;border-radius:50%;background:#6b7280;flex:none}
.on .dot{background:var(--live);animation:ping 1.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--live)}100%{box-shadow:0 0 0 12px transparent}}
.live .msg{flex:1;min-width:180px}
.live b{font-size:17px;color:#fff}
.live small{display:block;color:#9ca3af}
.live .btn{background:var(--live);color:#000}
.live .btn:hover{box-shadow:0 6px 18px rgba(83,252,24,.4)}
.btn{background:linear-gradient(135deg,var(--a1),var(--a3));color:#fff;border:0;border-radius:9px;padding:11px 22px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px color-mix(in srgb,var(--a1) 50%,transparent)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mute);padding:6px 12px;font-weight:500;font-size:12px}
.btn:focus-visible,summary:focus-visible{outline:2px solid var(--a2);outline-offset:2px}

/* hero */
.hero{padding:26px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
h1{margin:0 0 4px;font-size:clamp(24px,5vw,34px);font-style:italic;letter-spacing:-.5px;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3),var(--a1));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:250% 0}}
.hero p{margin:0;color:var(--mute)}
code{background:var(--bg);border:1px solid var(--a1);border-radius:5px;padding:1px 7px;color:var(--a2);font-weight:700}

/* countdown */
.cd{display:flex;gap:10px;justify-content:center;padding:14px;flex-wrap:wrap}
.cd div{min-width:68px;text-align:center;padding:8px 6px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.cd b{display:block;font-size:24px;font-variant-numeric:tabular-nums;color:var(--a2)}
.cd span{font-size:11px;color:var(--mute)}
.cdlabel{text-align:center;color:var(--mute);font-size:13px;margin-bottom:-8px}

details{padding:16px 20px}
summary{cursor:pointer;font-weight:700}
details p{color:var(--mute);margin:10px 0 0}

/* podium */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
@media(max-width:720px){.podium{grid-template-columns:1fr}.podium .card{order:0!important}}
.card{padding:20px 16px;text-align:center;opacity:0;animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards;position:relative}
.card:nth-child(1){order:2;animation-delay:.35s;padding-bottom:30px;border-color:var(--a3);animation-name:rise,glow;animation-duration:.7s,3s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;animation-delay:.35s,1.2s}
.card:nth-child(2){order:1;animation-delay:.15s;border-color:var(--a2)}
.card:nth-child(3){order:3;animation-delay:.5s;border-color:var(--a1)}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}
@keyframes glow{50%{box-shadow:0 0 28px color-mix(in srgb,var(--a3) 55%,transparent)}}
.medal{position:absolute;top:10px;right:12px;font-size:20px}
.av{width:68px;height:68px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--c1)}
.first .av{width:80px;height:80px;font-size:28px}
.name{font-weight:700}
.tier{font-size:12px;color:var(--mute)}
.prizebig{font-size:26px;font-weight:800;margin:8px 0 2px;background:linear-gradient(90deg,var(--a2),var(--a1));-webkit-background-clip:text;background-clip:text;color:transparent}
.wag{color:var(--mute);font-size:13px}
.wag b{color:var(--text);font-variant-numeric:tabular-nums}

/* table */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:480px}
th{font-size:12px;color:var(--mute);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
td{padding:12px 16px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tbody tr{opacity:0;animation:slide .5s ease forwards;transition:background .2s}
tbody tr:hover{background:color-mix(in srgb,var(--a1) 14%,transparent)}
@keyframes slide{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
th:nth-child(3),td:nth-child(3),th:nth-child(4),td:nth-child(4){text-align:right}
.who{display:flex;gap:10px;align-items:center}
.who .av{width:34px;height:34px;font-size:14px;margin:0;box-shadow:none}
.pill{display:inline-block;border:1px solid var(--a2);color:var(--a2);border-radius:7px;padding:2px 10px;font-weight:700;transition:background .2s,color .2s}
tr:hover .pill{background:var(--a2);color:var(--onAcc)}
.rk{font-weight:700;color:var(--mute)}
.foot{text-align:center;color:var(--mute);font-size:12px;padding:12px}
.race{position:relative;overflow:hidden;text-align:center;padding:34px 18px 28px;border-radius:18px;border:1px solid #1e4f8f;color:#fff;background:linear-gradient(rgba(56,189,248,.07) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(56,189,248,.07) 1px,transparent 1px) 0 0/32px 32px,radial-gradient(70% 90% at 50% 0%,#12396b,#08142b)}
.vs{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;font-weight:900;font-size:clamp(24px,6vw,40px);letter-spacing:.14em}
.vs .brand{background:linear-gradient(90deg,#22d3ee,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs .x{color:#2a6aa8;font-weight:400}
/* header link: same gradient text, no link blue/underline, always uppercase, slight brighten on hover */
.vs{text-transform:uppercase}
.vs a.brand{text-decoration:none;text-transform:uppercase;cursor:pointer;transition:filter .2s}
@media (hover:hover){.vs a.brand:hover{filter:brightness(1.3)}}
.vs a.brand:focus-visible{filter:brightness(1.3);outline:2px solid var(--a2);outline-offset:4px;border-radius:4px}
.pool{font-size:clamp(56px,14vw,104px);font-weight:900;line-height:1;margin:22px 0 0;background:linear-gradient(#fff,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(34,211,238,.35))}
.wr{font-size:clamp(22px,5vw,38px);font-weight:800;letter-spacing:.2em;color:#6b87a8;margin:4px 0 24px}
.units{display:flex;gap:8px;justify-content:center;align-items:flex-start}
.u{text-align:center}
.num{min-width:clamp(58px,15vw,92px);padding:clamp(10px,3vw,18px) 0;font-size:clamp(28px,8vw,48px);font-weight:900;font-variant-numeric:tabular-nums;border-radius:12px;border:1px solid #1f5c99;background:linear-gradient(#0f2f5c,#0a1d3b);box-shadow:inset 0 0 18px rgba(34,211,238,.18),0 0 14px rgba(34,211,238,.12)}
.lbl{margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#22d3ee}
.sep{padding-top:clamp(14px,4vw,26px);font-size:28px;font-weight:700;color:#1f5c99}
.prog{max-width:560px;margin:28px auto 0;font-size:10px;font-weight:800;letter-spacing:.1em;color:#6b87a8}
.prog .meta{display:flex;justify-content:space-between;margin-bottom:6px}
.prog .meta em{font-style:normal;color:#22d3ee}
.track{height:7px;border-radius:99px;background:#0d2a52;overflow:hidden}
.fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0ea5e9,#22d3ee);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.sponsor{position:relative;padding:20px 22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;overflow:hidden}
.sponsor::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#0ea5e9,#6366f1,#d946ef);background-size:200% 100%;animation:shine 5s linear infinite}
.sponsor h2{margin:0;font-size:22px;font-weight:800;color:var(--a1)}
.sponsor h2 span{background:linear-gradient(90deg,#0ea5e9,#6366f1,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.sponsor p{margin:2px 0 0;color:var(--mute)}
.sponsor small{display:block;margin-top:6px;color:var(--mute);font-size:11px}
.sbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.codebtn{background:var(--bg);border:1px dashed var(--a1);color:var(--a1);border-radius:9px;padding:10px 16px;font-weight:800;font-size:14px;cursor:pointer;transition:background .15s}
.codebtn:hover{background:#dbeafe}
.codebtn:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
body{background-image:linear-gradient(rgba(56,189,248,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.05) 1px,transparent 1px);background-size:32px 32px}
body::before{background:radial-gradient(45% 45% at 20% 10%,rgba(37,99,235,.30),transparent),radial-gradient(40% 40% at 85% 40%,rgba(34,211,238,.14),transparent)}
.box{background:linear-gradient(#0d2447,#09162e);border-color:#1b4f86;box-shadow:inset 0 0 24px rgba(34,211,238,.05)}
.btn{background:linear-gradient(135deg,#2563eb,#0ea5e9)}
.codebtn:hover{background:#0d2a52}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.race{order:1}.sponsor{order:2}.live{order:3}details{order:4}.podium{order:5}main>.scroll{order:6}
.sponsor .alt{font-size:13px;margin-top:8px}
.sponsor .alt a{color:var(--a2);font-weight:700}
.live{text-transform:uppercase;letter-spacing:.04em}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){*,*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.card,tbody tr{opacity:1}}

/* ---- mobile fixes ---- */
/* keep content clear of the notch in landscape on iPhones */
main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* countdown: 4 boxes overflowed and the SECONDS box was cut off below ~390px wide */
@media (max-width:420px){
  .race{padding-left:12px;padding-right:12px}
  .units{gap:4px}
  .num{min-width:52px}
  .lbl{font-size:9px;letter-spacing:.06em}
  .sep{font-size:20px}
}
/* table: fit the screen when it can, scroll inside the box only if it must */
@media (max-width:520px){
  table{min-width:0}
  th,td{padding:10px 8px}
}

/* live stream player (only shown while live) */
.stream{order:3;border-radius:14px;overflow:hidden;border:1px solid var(--live);background:#000;aspect-ratio:16/9}
.stream[hidden]{display:none}
.stream iframe{display:block;width:100%;height:100%;border:0}