: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}

/* site footer: wordmark, links, divider, notice, social icons, credit (all centered) */
.site-foot{max-width:1000px;margin:0 auto;text-align:center;padding:12px max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px))}
.fword{display:inline-block;font-weight:900;font-size:24px;letter-spacing:.16em;color:#fff;text-decoration:none;border-radius:6px;padding:2px 4px}
.fword span{background:linear-gradient(90deg,#22d3ee,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(34,211,238,.55))}
.fword:focus-visible{outline:2px solid var(--a2);outline-offset:4px}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin-top:10px}
.flinks a{color:var(--mute);text-decoration:none;font-size:14px;padding:6px 8px;border-radius:6px;transition:color .15s}
.flinks a:hover{color:#dbeafe}
.flinks a:focus-visible{color:#dbeafe;outline:2px solid var(--a2);outline-offset:1px}
.rg{max-width:760px;margin:0 auto 14px;font-size:13px;line-height:1.6;color:var(--mute)}
.rg b{color:#ff3b5c;font-weight:800}
.rg a{color:#fff;font-weight:600}
.rg a:focus-visible{outline:2px solid var(--a2);outline-offset:2px;border-radius:3px}
.social{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:10px;color:var(--mute);transition:color .15s,transform .15s}
.social svg{width:22px;height:22px;display:block}
@media (hover:hover){.social a:hover{color:var(--a2);transform:translateY(-2px)}}
.social a:focus-visible{color:var(--a2);outline:2px solid var(--a2);outline-offset:2px}
.foot-line{border:0;border-top:1px solid #1b3a63;margin:14px 0 16px}
.credit{margin:12px 0 0;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.credit b{font-weight:800;color:#dbeafe}

/* "How wagers are counted" list */
details .rtp{margin:8px 0 0;padding-left:20px;color:var(--mute)}
details .rtp li{margin:2px 0}
details .rtp b{color:var(--text)}

/* ---- sticky top navigation ---- */
:root{--nav-h:64px;padding-top:0} /* the bar now handles the iPhone notch spacing */
html{scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 14px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.topbar{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  background:rgba(6,16,31,.72);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid #1b3a63}
.topnav{max-width:1000px;margin:0 auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}

/* left: logo + name */
.navbrand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;color:var(--text);border-radius:10px;animation:navIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes navIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.navlogo{position:relative;width:40px;height:40px;flex:none;border-radius:50%;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.navlogo::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#22d3ee,#3b82f6,#22d3ee);animation:navSpin 6s linear infinite}
.navlogo::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 14px rgba(34,211,238,.55);animation:navGlow 3s ease-in-out infinite}
.navlogo img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--bg)}
@keyframes navSpin{to{transform:rotate(1turn)}}
@keyframes navGlow{0%,100%{opacity:.45}50%{opacity:1}}
.navbrand:hover .navlogo{transform:scale(1.08)}
.navname{font-weight:900;font-size:18px;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(110deg,var(--text) 42%,#a5f3fc 47%,#fff 50%,#a5f3fc 53%,var(--text) 58%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:navShimmer 4.5s ease-in-out 1s infinite}
@keyframes navShimmer{0%{background-position:100% 0}35%,100%{background-position:0 0}}

/* right: buttons */
.navlinks{position:relative;display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;min-width:0;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks li{flex:none}
.navlinks a{position:relative;display:inline-flex;flex-direction:column;align-items:center;padding:10px 12px;border-radius:8px;
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--mute);text-decoration:none;transition:color .2s}
.navlinks a::before{content:attr(data-label);font-weight:800;height:0;visibility:hidden;overflow:hidden} /* reserves bold width so the bar doesn't jump */
.navlinks a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#22d3ee,#3b82f6);box-shadow:0 0 8px rgba(34,211,238,.7);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.navlinks a.active{color:#fff;font-weight:800}
.navlinks a.active::after{transform:scaleX(1)}
@media (hover:hover){.navlinks a:hover{color:#dbeafe}.navlinks a:hover::after{transform:scaleX(1)}}
.navlinks a:focus-visible,.navbrand:focus-visible{outline:2px solid var(--a2);outline-offset:2px}

/* mobile */
@media (max-width:640px){
  :root{--nav-h:56px}
  .topnav{gap:8px}
  .navbrand{gap:9px}
  .navlogo{width:32px;height:32px}
  .navname{font-size:14px;letter-spacing:.05em}
  .navlinks{gap:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
  .navlinks a{font-size:10.5px;letter-spacing:.1em;padding:9px 8px}
  .navlinks a::after{left:8px;right:8px}
}

/* reduced motion: no ring spin, shimmer or slide-in */
@media (prefers-reduced-motion:reduce){
  .navbrand,.navlogo::before,.navlogo::after,.navname{animation:none!important}
  .navlogo::after{opacity:.7}
  .navname{background-position:100% 0}
}
/* very small phones: tighter so all three buttons fit in one row from ~375px up */
@media (max-width:420px){
  .navbrand{gap:8px}
  .navname{font-size:12.5px;letter-spacing:.03em}
  .navlinks a{font-size:10px;letter-spacing:.06em;padding:9px 6px}
  .navlinks a::after{left:6px;right:6px}
}

/* ---- How to enter ---- */
.howto{order:2} /* same order as the Rainbet banner, and it comes right after it in the HTML */
.howto h2{margin:6px 0 14px;text-align:center;font-size:clamp(20px,4vw,26px);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:20px 18px;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
.step .badge{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#22d3ee,#3b82f6);
  color:var(--onAcc);font-weight:900;font-size:16px;box-shadow:0 0 14px rgba(34,211,238,.3)}
.step h3{margin:14px 0 6px;font-size:16px;font-weight:800;color:var(--text)}
.step p{margin:0;font-size:14px;color:var(--mute)}
.step p b{color:var(--text)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.step:hover{transform:translateY(-4px)}}

/* ---- Social channels ---- */
.socials{order:7;text-align:center;padding-top:12px}
.sbar{display:block;width:56px;height:4px;margin:0 auto 14px;border-radius:4px;background:linear-gradient(90deg,#22d3ee,#3b82f6);box-shadow:0 0 12px rgba(34,211,238,.5)}
.socials h2{margin:0;font-size:clamp(20px,4vw,28px);font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.socials h2 .grad{background:linear-gradient(90deg,#22d3ee,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(34,211,238,.5))}
.ssub{margin:8px 0 18px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ssub span{color:var(--a2)}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}
@media (max-width:900px){.scards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.scards{grid-template-columns:1fr}}
.soc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 18px;color:var(--text);text-decoration:none;
  transition:border-color .25s,box-shadow .25s}
.soc .tile{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand-soft);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.soc .tile svg{width:36px;height:36px;display:block}
.soc .tile.insta{background:linear-gradient(135deg,rgba(242,85,127,.16),rgba(247,119,55,.16))}
.soc .sname{font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.soc .sdesc{font-size:14px;color:var(--mute);line-height:1.5;flex:1}
.soc .sbtn{margin-top:4px;padding:9px 16px;border-radius:9px;border:1px solid var(--brand);color:var(--brand);background:var(--brand-soft);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,color .25s}
.soc:hover,.soc:focus-visible{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 26px var(--brand-glow)}
.soc:hover .tile,.soc:focus-visible .tile{transform:scale(1.08) rotate(-6deg)}
.soc:hover .sbtn,.soc:focus-visible .sbtn{background:var(--brand);color:#06101f}
.soc:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (max-width:640px){.soc .tile{width:60px;height:60px;border-radius:15px}.soc .tile svg{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.soc:hover .tile,.soc:focus-visible .tile{transform:none}}
/* footer: keep phone numbers on one line; fit all four footer links in one row on small phones */
.nw{white-space:nowrap}
@media (max-width:420px){.flinks{gap:2px}.flinks a{font-size:13px;padding:6px 5px}}
/* leaderboard places nobody has reached yet */
.av.open{opacity:.35;filter:grayscale(.6)}
.card.open .name,tr.open .name{color:var(--mute);font-weight:600;font-style:italic}
tr.open td{color:var(--mute)}