/* Layout: one centered axis. A full European roulette table sits at the center in 3D perspective; players are chips on it. */
:root{
  --bg:#0a0908; --bg-2:#12100d; --bg-3:#1a160f; --line:rgba(214,182,110,.16); --line-2:rgba(214,182,110,.34);
  --fg:#ece6d8; --fg-2:#a69e8c; --fg-3:#6f685b;
  --gold:#d6b66e; --gold-hi:#f3dc9f; --gold-lo:#8f6c33; --silver:#c9ccd1; --bronze:#c48a5a; --ivory:#efe6cf;
  --red:#a8202a; --black:#141414; --green:#12704a; --felt:#0f5a3b; --emerald:#3a9b72; --ruby:#c9575f;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --mx:50vw; --my:40vh; --shx:50%;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.has-cursor,body.has-cursor *{cursor:none!important}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.light{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(900px 600px at var(--mx) var(--my),rgba(214,182,110,.07),transparent 62%),radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(0,0,0,.6) 100%)}

/* cursor chip */
#cchip{position:fixed;left:0;top:0;width:54px;height:54px;z-index:60;pointer-events:none;will-change:transform;display:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
#cchip .cc-spin{position:absolute;inset:0;will-change:transform,filter}
#cchip svg,#cchip img{width:100%;height:100%;display:block}
#cchip .cc-glare{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(circle at var(--gx,30%) var(--gy,28%),rgba(255,250,230,.85),rgba(255,226,160,.25) 24%,transparent 52%)}
#cchip .cc-glint{position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;background:conic-gradient(from var(--ga,0deg),transparent 0deg 30deg,rgba(255,252,235,.9) 48deg,transparent 66deg 200deg,rgba(255,252,235,.5) 218deg,transparent 236deg)}
body.has-cursor #cchip{display:block}

.wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(10,9,8,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg)}
.brand svg{width:clamp(30px,6vw,38px);height:clamp(30px,6vw,38px);flex:none;filter:drop-shadow(0 0 10px rgba(243,220,159,.35))}
.bn{display:flex;align-items:baseline;gap:.32em;overflow:hidden;padding-block:.06em;font-family:var(--f-display);font-size:clamp(26px,6.4vw,38px);line-height:1.05;white-space:nowrap}
.bn-1,.bn-2{display:inline-block;background:linear-gradient(100deg,#8f6c33 0%,#d6b66e 18%,#f3dc9f 32%,#fffaea 40%,#f3dc9f 48%,#d6b66e 64%,#8f6c33 80%,#d6b66e 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite;filter:drop-shadow(0 2px 14px rgba(214,182,110,.28))}
.bn-1,.bn-2{font-weight:600;letter-spacing:.045em;text-transform:uppercase;font-size:.78em}
.bn-2{animation-delay:-.6s}
@keyframes sheen{from{background-position:120% 0}to{background-position:-130% 0}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-meta{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:12px;color:var(--fg-2);letter-spacing:.08em;text-transform:uppercase}
.live{display:inline-flex;align-items:center;gap:6px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--emerald);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,155,114,.6)}70%{box-shadow:0 0 0 8px rgba(58,155,114,0)}100%{box-shadow:0 0 0 0 rgba(58,155,114,0)}}

.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0}
.metal{background:linear-gradient(105deg,var(--gold-lo) 0%,var(--gold) 22%,var(--gold-hi) 40%,#fff6dc 50%,var(--gold-hi) 60%,var(--gold) 78%,var(--gold-lo) 100%);background-size:260% 100%;background-position:var(--shx) 0;-webkit-background-clip:text;background-clip:text;color:transparent}

.hero{display:grid;justify-items:center;text-align:center;gap:14px;padding-block:44px 8px}
.hero h1{font-size:clamp(36px,6vw,72px);line-height:1;letter-spacing:-.01em}
.hero h1 em{font-style:italic}
.hero p{margin:0;color:var(--fg-2);max-width:52ch}

/* ================= photoreal 3D wheel ================= */
.wheel-stage{position:relative;width:100%;max-width:1120px;margin:18px auto 0;aspect-ratio:16/10;max-height:78vh}
.wheel-stage::before{content:"";position:absolute;inset:4% 2% -2%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,170,.05),transparent 75%);pointer-events:none}
#wheel{position:relative;width:100%;height:100%;display:block;touch-action:manipulation;outline:none}
#wheel.post{-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 80%,transparent 100%)}
#wheel.flat{width:min(100%,520px);height:auto;aspect-ratio:1;margin:0 auto}
.wheel-stage .loading{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}
@media (max-width:700px){.wheel-stage{aspect-ratio:1/1.02}}
/* floating props: SVG faces with real thickness built from CSS 3D layers */
.props{position:absolute;inset:0;pointer-events:none;perspective:1000px;transform-style:preserve-3d}
.prop{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h,var(--w));margin:calc(var(--h,var(--w)) / -2) 0 0 calc(var(--w) / -2);transform-style:preserve-3d;pointer-events:auto;will-change:transform}
.fchip .lay{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 15deg,var(--e1) 0 30deg,var(--e2) 30deg 45deg,var(--e1) 45deg 60deg)}
.fchip .lay.last{box-shadow:0 22px 34px rgba(0,0,0,.65),0 6px 10px rgba(0,0,0,.5)}
.fchip .face,.fchip .back{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.fchip .face svg,.fchip .back svg{width:100%;height:100%;display:block}
.fchip .face::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(circle at var(--gx,30%) var(--gy,25%),rgba(255,248,225,.55),rgba(255,236,190,.12) 30%,transparent 55%)}
.dice .f{position:absolute;inset:0;border-radius:17%;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;gap:4%;
  background:radial-gradient(circle at 28% 22%,#fffdf7 0%,#efe9dc 55%,#d6ccb6 100%);box-shadow:inset 0 0 0 1px rgba(120,95,60,.25),inset -3px -4px 8px rgba(120,95,60,.28)}
.dice .f i{border-radius:50%;align-self:center;justify-self:center;width:78%;aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#3a3a3a,#050505 70%);box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.6)}
.dice .f i.r{background:radial-gradient(circle at 35% 30%,#b3202a,#4a0508 70%)}
.dice .core{position:absolute;inset:3%;background:#e2dacb;border-radius:12%}
.dice .shadow{position:absolute;left:10%;right:10%;top:110%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transform:translateZ(-60px)}
.card .cf,.card .cb{position:absolute;inset:0;border-radius:7%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 30px rgba(0,0,0,.55)}
.card .cb{transform:rotateY(180deg)}
.card svg{width:100%;height:100%;display:block}
.card .cf::after,.card .cb::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--sa,120deg),rgba(255,255,255,0) 30%,rgba(255,250,235,.32) 48%,rgba(255,255,255,0) 62%)}

.under{display:grid;justify-items:center;gap:12px;text-align:center}
.hint{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.result{display:flex;align-items:center;justify-content:center;gap:16px;min-height:52px;flex-wrap:wrap}
.pocket{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 18px var(--f-body);color:#fff;border:2px solid var(--gold);background:var(--bg-3)}
.pocket.red{background:var(--red)} .pocket.black{background:var(--black)} .pocket.green{background:var(--green)}
.result .label{font-family:var(--f-display);font-size:21px;text-align:left}
.result .label small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.history{display:flex;gap:6px;justify-content:center;min-height:24px;flex-wrap:wrap}
.history span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--f-body);color:#fff;border:1px solid var(--line-2)}
.history .red{background:var(--red)} .history .black{background:var(--black)} .history .green{background:var(--green)}

/* top three */
.top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;justify-items:center;width:100%;max-width:720px;margin:44px auto 0;padding-top:64px}
.tchip{display:grid;justify-items:center;text-align:center;gap:10px;perspective:800px;min-width:0}
.tchip .disc{--d:min(25vw,128px);position:relative;width:var(--d);height:var(--d);perspective:900px;cursor:pointer}
.tchip.t1 .disc{--d:min(31vw,158px)}
.coin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.coin .lay{position:absolute;inset:.6%;border-radius:50%;background:repeating-conic-gradient(from 9deg,#0c0c0c 0 18deg,var(--m) 18deg 30deg)}
.coin .cf,.coin .cb{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.coin .cf img,.coin .cb img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.coin .cf::after,.coin .cb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(var(--sa,115deg),transparent 30%,rgba(255,246,222,.0) 38%,rgba(255,246,222,var(--sv,.28)) 50%,rgba(255,246,222,0) 62%,transparent 70%)}
.coin-shadow{position:absolute;left:12%;right:12%;bottom:-16%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);transform-origin:50% 50%;pointer-events:none}
.tchip .info{display:grid;gap:1px;min-width:0}
.tchip .rk{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.t1 .rk{color:var(--gold)} .t2 .rk{color:var(--silver)} .t3 .rk{color:var(--bronze)}
.tchip .nm{font-family:var(--f-display);font-size:clamp(17px,2.4vw,26px);line-height:1.15}
.tchip .sc{font-family:var(--f-mono);font-size:13px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.tchip .pz{font-family:var(--f-mono);font-size:12px;color:var(--fg-3)}
.t1{order:2;position:relative;top:-64px} .t2{order:1} .t3{order:3}

/* sign-up call to action under the wheel: the one filled gold button on the page */
.join{display:grid;justify-items:center;gap:12px;margin:44px 0 40px;text-align:center}
.join-btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;border-radius:999px;text-decoration:none;
  font:600 16px var(--f-body);color:#1a1307;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  box-shadow:0 10px 30px -10px rgba(214,182,110,.6),inset 0 1px 0 rgba(255,255,255,.45);will-change:transform;transition:box-shadow .25s,filter .25s}
.join-btn .arr{transition:transform .25s}
.join-btn:hover{filter:brightness(1.06);box-shadow:0 14px 40px -10px rgba(243,220,159,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.join-btn:hover .arr{transform:translateX(4px)}
.join-btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
@media (max-width:420px){.join-btn{padding:14px 22px;font-size:15px}}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 56px;margin-top:22px}
.stat{text-align:center}
.stat .k{font-family:var(--f-mono);font-size:12px;color:var(--fg-3);letter-spacing:.12em;text-transform:uppercase}
.stat .v{font-family:var(--f-display);font-size:clamp(30px,4.4vw,46px);font-variant-numeric:tabular-nums;line-height:1.15}
.stat .v.mono{font-family:var(--f-mono);font-size:clamp(22px,3.2vw,32px);color:var(--fg)}


section{padding-block:56px}
.sec-head{display:grid;justify-items:center;gap:14px;text-align:center;margin-bottom:30px}
.sec-head h2{font-size:clamp(34px,5.2vw,54px);line-height:1}
.narrow{max-width:860px;margin-inline:auto}
.orn{display:flex;align-items:center;gap:14px;color:var(--gold);opacity:.7;max-width:860px;margin-inline:auto}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2))}
.orn::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.orn svg{width:46px;height:14px}

.filters{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;position:relative}
.filters button{position:relative;z-index:1;background:none;border:0;color:var(--fg-2);font:600 13px var(--f-body);letter-spacing:.16em;padding:9px 26px;border-radius:999px;transition:color .25s}
.filters button[aria-pressed="true"]{color:var(--bg)}
.filters .pill{position:absolute;z-index:0;top:3px;left:3px;bottom:3px;border-radius:999px;background:var(--gold)}
.filters button:focus-visible,.cta:focus-visible,summary:focus-visible,.brand:focus-visible,#wheel:focus-visible,.cell:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

.board{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:48px 44px minmax(0,1fr) auto 64px;align-items:center;gap:16px;padding:14px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;isolation:isolate}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(280px circle at var(--rx,-300px) 50%,rgba(214,182,110,.15),transparent 70%);opacity:0;transition:opacity .25s}
.row:hover::before{opacity:1}
.row .r{font-family:var(--f-display);font-size:22px;color:var(--fg-2);text-align:center}
.row .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--f-mono);color:var(--gold-hi);border:1px solid var(--line-2);background:var(--bg-3)}
.row .nm{min-width:0;display:grid;gap:5px}
.row .nm b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm .on{font-family:var(--f-mono);font-size:12px;color:var(--fg-3)}
.bar{display:block;height:2px;background:var(--line);max-width:260px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform-origin:left}
.row .sc{font-family:var(--f-mono);font-size:16px;text-align:right}
.row .dl{font-family:var(--f-mono);font-size:12px;text-align:right}
.dl.up{color:var(--emerald)} .dl.dn{color:var(--ruby)} .dl.eq{color:var(--fg-3)}


.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 4px;font-size:18px;font-family:var(--f-display)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--f-mono);color:var(--gold)}
.acc details[open] summary::after{content:"–"}
.acc details p{margin:0 4px 20px;color:var(--fg-2);max-width:68ch}
.rules ol{margin:0 4px 22px;padding-left:22px;display:grid;gap:10px;color:var(--fg-2);max-width:72ch;font-size:15px;line-height:1.6}
.rules ol li::marker{color:var(--gold);font-family:var(--f-mono);font-size:12px}
.rules b{color:var(--fg);font-weight:600}
.rules .faq{margin:0 4px 22px;display:grid;gap:4px 0;max-width:72ch;font-size:15px;line-height:1.6}
.rules .faq dt{color:var(--fg);font-weight:600;margin-top:10px}
.rules .faq dd{margin:0;color:var(--fg-2)}
.acc details > p + ol{margin-top:-6px}
.row .nm .on{font-family:var(--f-mono);font-size:12px;color:var(--fg-3)}
.row .nm .on.warn{color:var(--ruby)}
.cta-wrap{display:flex;justify-content:center;margin-top:36px}
.cta{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--gold);color:var(--gold-hi);background:none;border-radius:999px;padding:14px 26px;font:500 15px var(--f-body);text-decoration:none;will-change:transform}
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:28px 40px;color:var(--fg-3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;text-align:center}

@media (max-width:640px){
  .row{grid-template-columns:30px 36px minmax(0,1fr) auto;gap:10px;padding:12px 6px}
  .row .av{width:36px;height:36px;font-size:12px}
  .row .dl{display:none}
  .nav-meta .hide-sm{display:none}
  .tchip .pz{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ================= Stake races: two boards side by side, each crowned by its prize ================= */
/* header social buttons: gold pills, the icon takes the platform colour */
.nav-meta.social{gap:10px}
.soc{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 13px;border:1px solid var(--line-2);border-radius:999px;color:var(--gold-hi);text-decoration:none;
  background:rgba(26,22,15,.6);transition:border-color .25s,background .25s,box-shadow .25s;will-change:transform}
.soc svg{width:17px;height:17px;flex:none;fill:currentColor;transition:color .25s}
.soc.kick svg{color:#53fc18}
.soc.tg svg{color:#2aabee}
.soc:hover{border-color:var(--gold);background:rgba(214,182,110,.1);box-shadow:0 0 18px rgba(214,182,110,.18)}
.soc:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
@media (max-width:640px){.soc{width:38px;padding:0;justify-content:center}}
.top3[hidden]{display:none}
.lb{max-width:1120px;margin-inline:auto}
.races{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin-top:120px}
.races[hidden]{display:none}
.race{position:relative;border:1px solid var(--line);border-radius:12px;padding:0 22px 14px;background:linear-gradient(180deg,rgba(26,22,15,.9),rgba(10,9,8,.92) 46%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(243,220,159,.06)}
.race::before{content:"";position:absolute;inset:-1px;border-radius:12px;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(214,182,110,.42),rgba(214,182,110,.06) 34%,transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* prize stage: the object rises out of the card's top edge */
.prize{--ph:clamp(190px,22vw,250px);position:relative;height:var(--ph);margin:calc(var(--ph) * -.52) auto 6px;width:min(100%,280px);perspective:900px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.prize:focus-visible{outline:2px solid var(--gold-hi);outline-offset:6px;border-radius:12px}
.prize-glow{position:absolute;left:50%;bottom:4%;width:120%;height:70%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(243,220,159,.20),rgba(214,182,110,.06) 55%,transparent 75%);filter:blur(6px)}
.prize-obj{position:absolute;left:50%;bottom:9%;height:88%;aspect-ratio:var(--ar,.52);transform-style:preserve-3d;will-change:transform;translate:-50% 0}
#race-ps5 .prize-obj{--ar:.52}
#race-gta .prize-obj{--ar:1.778;height:auto;width:72%;bottom:20%}
/* the GTA VI card is a real box: artwork in front, gold edges, an EK plate on the back */
#race-gta .prize-obj > .pf,#race-gta .prize-obj .psheen{object-fit:cover;border-radius:3px;-webkit-mask:none;mask:none}
#race-gta .prize-obj .pf{box-shadow:0 0 0 1px rgba(243,220,159,.35)}
.prize-obj .pwall{position:absolute;top:0;height:100%;display:block;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.prize-obj .pside{position:absolute;display:block;background:linear-gradient(90deg,#5e4520,#e8c97e 45%,#fff0c4 55%,#7a5a28);backface-visibility:hidden}
.prize-obj .pside[style*="rotateX"]{background:linear-gradient(180deg,#5e4520,#e8c97e 45%,#fff0c4 55%,#7a5a28)}
.prize-obj .pback{position:absolute;inset:0;display:grid;place-items:center;border-radius:3px;border:1px solid rgba(243,220,159,.5);
  background:radial-gradient(circle at 50% 45%,#2a2115,#0d0b08 70%);backface-visibility:hidden}
.prize-obj .pback img{position:static;width:46%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.prize-obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.prize-obj .pf{transform:translateZ(0);filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}
/* no blend mode here: a blended child makes the browser flatten the whole 3D object */
.prize-obj .psheen{position:absolute;inset:0;pointer-events:none;transform:translateZ(.5px);
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;
  background:linear-gradient(var(--sa,115deg),transparent 32%,rgba(255,246,222,var(--sv,.1)) 50%,transparent 68%)}
.prize-shadow{position:absolute;left:22%;right:22%;bottom:3%;height:9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent)}

.race-head{display:grid;justify-items:center;text-align:center;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.race-head h3{font-size:clamp(30px,3.4vw,40px);line-height:1.05}
.race-dates{margin:0;font-family:var(--f-mono);font-size:12px;color:var(--fg-2);letter-spacing:.04em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:10px 0 0}
.facts div{display:grid;gap:2px;padding:9px 6px;border:1px solid var(--line);border-radius:8px;background:rgba(10,9,8,.5);min-width:0}
.facts dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.facts dd{margin:0;font-size:14px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.facts dd.mono{font-family:var(--f-mono);font-size:13px}
.race[data-state="live"] [data-status]{color:var(--emerald)}
.race[data-state="live"] [data-status]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--emerald);margin-right:7px;vertical-align:1px;animation:pulse 2s infinite}
.race[data-state="soon"] [data-status]{color:var(--gold-hi)}
.race[data-state="done"] [data-status]{color:var(--fg-2)}

.rboard{list-style:none;margin:0;padding:0}
.rrow{position:relative;display:grid;grid-template-columns:30px 36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;isolation:isolate}
.rrow:last-of-type{border-bottom:0}
.rrow::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(240px circle at var(--rx,-300px) 50%,rgba(214,182,110,.14),transparent 70%);opacity:0;transition:opacity .25s}
.rrow:hover::before{opacity:1}
.rrow .r{font-family:var(--f-display);font-size:19px;color:var(--fg-2);text-align:center}
.rrow .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--f-mono);color:var(--gold-hi);border:1px solid var(--line-2);background:var(--bg-3)}
.rrow .nm{min-width:0;display:grid;gap:4px}
.rrow .nm b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .on{font-family:var(--f-mono);font-size:11px;color:var(--fg-3)}
.rrow .on.win{color:var(--gold-hi)}
.rrow .on.warn{color:var(--ruby)}
.rrow .bar{max-width:none}
.rrow .sc{font-family:var(--f-mono);font-size:15px;text-align:right}
.rrow.first{margin:4px -10px 6px;padding:14px 16px;border:1px solid var(--line-2);border-radius:10px;background:linear-gradient(90deg,rgba(214,182,110,.13),rgba(214,182,110,.03))}
.rrow.first .r{color:var(--gold-hi);font-size:24px}
.rrow.first .av{border-color:var(--gold);box-shadow:0 0 18px rgba(214,182,110,.25)}
.rrow.first .nm b{font-size:17px}
.rrow.first .sc{color:var(--gold-hi);font-size:16px}
.rboard .more{padding:12px 6px 4px;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.rboard .empty{padding:20px 6px 12px;text-align:center;font-family:var(--f-display);font-style:italic;font-size:20px;color:var(--fg-2)}
.rboard .ghost{display:grid;grid-template-columns:30px 36px minmax(0,1fr) 80px;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);opacity:.5}
.rboard .ghost:last-child{border-bottom:0}
.rboard .ghost span{height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(214,182,110,.06),rgba(214,182,110,.14),rgba(214,182,110,.06));background-size:200% 100%;animation:shimmer 2.4s linear infinite}
.rboard .ghost span:nth-child(2){height:36px;border-radius:50%;width:36px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

.soon-panel{display:grid;justify-items:center;gap:10px;text-align:center;margin:48px auto 0;max-width:560px;padding:44px 24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.soon-panel[hidden]{display:none}
.soon-title{margin:0;font-family:var(--f-display);font-style:italic;font-size:clamp(34px,5vw,52px);line-height:1}
.soon-text{margin:0;color:var(--fg-2);max-width:42ch}
.data-note{margin:22px 0 0;text-align:center;font-family:var(--f-mono);font-size:12px;color:var(--fg-3);letter-spacing:.04em}

@media (max-width:900px){
  .races{grid-template-columns:minmax(0,1fr);gap:110px;max-width:560px;margin-inline:auto}
}
@media (max-width:520px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:first-child{grid-column:1 / -1}
}
@media (max-width:420px){
  .race{padding-inline:14px}
  .rrow{grid-template-columns:24px 32px minmax(0,1fr) auto;gap:9px}
  .rrow .av{width:32px;height:32px}
  .rrow.first{margin-inline:-6px;padding-inline:10px}
}

/* ================= Prize pool bar ================= */
.pool{width:100%;max-width:760px;margin:28px auto 0;display:grid;gap:10px}
/* fill level: one big number over the bowl */
.pool-pct{margin:0;display:grid;justify-items:center;gap:2px;text-align:center}
.pool-pct b{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,7vw,64px);line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(243,220,159,.25)}
.pool-pct span{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
/* the pool as a crystal bowl that fills with Eser Karaeski chips */
.bowl{position:relative;width:100%;max-width:560px;margin:0 auto}
.bowl-cv{display:block;width:100%;height:auto}
.pool-note{margin:0;text-align:center;font-size:13px;color:var(--fg-3)}

/* race rows: points first, wager underneath */
.rrow .sc{display:grid;justify-items:end;gap:2px}
.rrow .sc small{font-size:10px;color:var(--fg-3);letter-spacing:.02em;white-space:nowrap}
.rrow .on.lock{color:var(--fg-3)}
.rrow.slot{background:linear-gradient(90deg,rgba(214,182,110,.07),transparent 70%)}
.rrow.slot .r{color:var(--gold)}
.rboard .cut{display:flex;align-items:center;gap:10px;padding:12px 4px 6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rboard .cut::before,.rboard .cut::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo),transparent)}
.race[data-open="true"] [data-prize-state]{color:var(--gold-hi)}
.race[data-open="false"] [data-prize-state]{color:var(--fg-2)}