/* Elexitech: a B2B gambling solution provider. Layout: corporate top navigation with a solutions mega menu, split
   page heroes (message left, painted art in a slanted frame with real product screens floating on it), sections that
   alternate navy tones with slanted edges, corporate footer. Rabona vivacity: crimson, electric yellow, painted art. */
:root{
  --navy0:#0A1019; --navy1:#111A28; --navy2:#182334; --navy3:#223047; --line:#26344B; --line2:#36476A;
  --text:#FFFFFF; --muted:#A5B1C4; --dim:#8A98AF;
  --red:#E3002B; --red2:#B30022; --red3:#7A0017; --yellow:#F1FF1A; --yellow2:#D9E600; --on-yellow:#0A1019;
  --live:#19D37A; --violet:#A98BFF; --amber:#FFB547; --shade:rgba(0,0,0,.6);
  --f-cond:"Saira","Arial Narrow",Arial,sans-serif;
  --f-body:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hdr:76px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy0);color:var(--text);font:400 16.5px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--navy0)}
h1,h2,h3,h4{margin:0;font-family:var(--f-cond);font-weight:800;font-stretch:88%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
p{margin:0} ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit} button{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
[hidden]{display:none!important}
section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }
.wrap{max-width:1280px;margin-inline:auto;padding-left:max(18px, env(safe-area-inset-left,0px));padding-right:max(18px, env(safe-area-inset-right,0px))}
@media (min-width:760px){ .wrap{padding-left:max(36px, env(safe-area-inset-left,0px));padding-right:max(36px, env(safe-area-inset-right,0px))} }

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:color-mix(in srgb, var(--navy0) 86%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:30px;height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand i{display:grid;place-items:center;width:36px;height:36px;background:var(--red);clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);font:900 italic 20px/1 var(--f-cond);font-style:italic;color:var(--yellow)}
.brand b{font:800 21px/1 var(--f-cond);letter-spacing:.08em}
.brand b span{color:var(--yellow)}
.menu{display:flex;align-items:center;gap:6px;margin-left:auto}
.menu > a,.menu > .dd > button{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;background:transparent;font:500 15.5px/1 var(--f-body);color:var(--muted);text-decoration:none;cursor:pointer;border-radius:4px;transition:color .2s, background .2s}
.menu > a:hover,.menu > .dd > button:hover,.menu > a.on,.dd.open > button{color:var(--text);background:var(--navy2)}
.dd{position:relative}
.dd > button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-38%);width:min(860px, 92vw);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--navy1);border:1px solid var(--line2);box-shadow:0 40px 80px -30px var(--shade);opacity:0;visibility:hidden;translate:0 8px;transition:opacity .2s, translate .2s, visibility .2s}
.dd.open .mega{opacity:1;visibility:visible;translate:0 0}
.mega-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:18px}
.mega-list a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;padding:12px;text-decoration:none;border-radius:4px;transition:background .2s}
.mega-list a:hover{background:var(--navy2)}
.mega-list svg{grid-row:span 2;width:40px;height:40px;padding:9px;background:var(--navy3);fill:none;stroke:var(--yellow);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega-list b{font:700 15px/1.2 var(--f-body)}
.mega-list span{font-size:13.5px;color:var(--muted);line-height:1.35}
.mega-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:22px;min-height:260px;background:var(--red) center/cover;text-decoration:none;isolation:isolate;overflow:hidden}
.mega-feat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg, var(--red3) 10%, color-mix(in srgb, var(--red3) 30%, transparent) 70%)}
.mega-feat small{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.mega-feat b{font:800 24px/1.05 var(--f-cond);text-transform:uppercase}
.mega-feat span{font-size:14px}
.cta-s{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;background:var(--yellow);color:var(--on-yellow);font:700 15px/1 var(--f-body);text-decoration:none;border-radius:4px;white-space:nowrap;transition:filter .2s, transform .2s}
.cta-s:hover{filter:brightness(1.06);transform:translateY(-1px)}
.burger{display:none;width:46px;height:46px;margin-left:auto;border:1px solid var(--line2);background:transparent;cursor:pointer;place-items:center;border-radius:4px}
.burger i,.burger i::before,.burger i::after{display:block;width:20px;height:2px;background:var(--text);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0} .burger i::before{top:-6px} .burger i::after{top:6px}
.mob{position:fixed;inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 0 0;z-index:59;overflow-y:auto;padding:16px max(18px, env(safe-area-inset-right,0px)) 40px max(18px, env(safe-area-inset-left,0px));background:var(--navy0);display:grid;align-content:start;gap:4px}
.mob a{display:flex;justify-content:space-between;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line);font:700 18px/1 var(--f-cond);text-transform:uppercase;text-decoration:none}
.mob .cap{padding:18px 4px 6px;font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
@media (max-width:1060px){ .menu{display:none} .burger{display:grid} .hdr .cta-s{display:none} }
@media (min-width:1061px){ .mob{display:none!important} }

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;background:var(--yellow);color:var(--on-yellow);font:700 16px/1 var(--f-body);text-decoration:none;border:0;border-radius:4px;cursor:pointer;transition:transform .2s, filter .2s, box-shadow .2s;box-shadow:0 12px 30px -14px color-mix(in srgb, var(--yellow) 80%, transparent)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--text) 45%, transparent)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--yellow);color:var(--yellow)}
.btn.red{background:var(--red);color:var(--text);box-shadow:0 12px 30px -14px var(--red)}

/* page hero: message left, painted art right */
.phero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(48px,6vw,90px) clamp(56px,7vw,100px);background:radial-gradient(800px 500px at 85% 20%, color-mix(in srgb, var(--red) 22%, transparent), transparent 70%), var(--navy0)}
.phero::before{content:"";position:absolute;right:-6%;top:-10%;bottom:-10%;width:40%;z-index:-1;background:repeating-linear-gradient(100deg, transparent 0 46px, color-mix(in srgb, var(--yellow) 7%, transparent) 46px 60px)}
.ph-grid{display:grid;gap:44px;align-items:center}
@media (min-width:1040px){ .ph-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.ph-copy{display:grid;gap:22px;min-width:0}
.kick{display:inline-flex;align-items:center;gap:10px;font:800 italic 15px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;color:var(--yellow)}
.kick::before{content:"";width:26px;height:4px;background:var(--red);transform:skewX(-20deg)}
.phero h1{font-size:clamp(36px,4.5vw,66px);line-height:.96}
.phero h1 em{font-style:normal;color:var(--yellow)}
.ph-lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--muted);max-width:56ch}
.ph-cta{display:flex;flex-wrap:wrap;gap:12px}
.ph-pills{display:flex;flex-wrap:wrap;gap:8px}
.ph-pills span{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:var(--navy2);border:1px solid var(--line);font:600 13.5px/1 var(--f-body);color:var(--muted)}
.ph-pills span::before{content:"";width:7px;height:7px;background:var(--live);border-radius:50%}
.ph-art{position:relative;min-height:clamp(320px, 38vw, 520px);perspective:1500px}
.pframe{position:absolute;inset:0 0 0 8%;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);background:var(--red);overflow:hidden;box-shadow:0 40px 80px -30px var(--shade)}
.pframe img,.pframe video{width:100%;height:100%;object-fit:cover}
.float{position:absolute;transition:transform .3s ease-out;transform:translate3d(var(--fx,0px), var(--fy,0px), 0)}
.float.f1{left:0;bottom:-4%;width:32%}
.float.f2{right:-2%;top:6%;width:44%}
@media (max-width:1039px){ .ph-art{min-height:auto;aspect-ratio:4/3.2} }
@media (max-width:560px){ .float.f2{display:none} .float.f1{width:40%} }

/* sections */
main{display:block;overflow-x:clip}
main > .sec{position:relative;isolation:isolate;max-width:1280px;margin-inline:auto;padding-block:clamp(56px,7vw,104px) 0;padding-left:max(18px, env(safe-area-inset-left,0px));padding-right:max(18px, env(safe-area-inset-right,0px))}
@media (min-width:760px){ main > .sec{padding-left:max(36px, env(safe-area-inset-left,0px));padding-right:max(36px, env(safe-area-inset-right,0px))} }
main > .sec.alt{margin-top:clamp(56px,7vw,104px);padding-block:clamp(70px,8vw,120px)}
main > .sec.alt::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:var(--navy1);clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%)}
main > .sec.alt + .sec{padding-top:clamp(40px,5vw,72px)}
.sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:26px}
.sec-h h2{font-size:clamp(28px,3.2vw,46px);line-height:1;max-width:22ch}
.sec-h > span,.sec-h > a{font:800 italic 14.5px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow);text-decoration:none}
.sec-h .k{display:block;font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow);margin-bottom:12px}
.sh{display:grid;gap:16px;margin-bottom:clamp(30px,4vw,52px);max-width:820px}
.sh.c{margin-inline:auto;text-align:center;justify-items:center}
.sh h2{font-size:clamp(30px,3.6vw,52px);line-height:1}
.sh h2 em{font-style:normal;color:var(--yellow)}
.sh p{font-size:clamp(16px,1.25vw,18px);color:var(--muted);max-width:64ch}
.lead{font-size:clamp(15.5px,1.25vw,17.5px);color:var(--muted);max-width:70ch;margin-bottom:24px}

/* reveal + page wipe */
.rv{transition:opacity .6s ease, transform .6s ease}
.rv.pre{opacity:0;transform:translateY(26px)}
.wipe{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;grid-template-columns:1fr 1fr 1fr;visibility:hidden}
.wipe.out,.wipe.in{visibility:visible}
.wipe i{transform:translateY(-101%);background:var(--red)}
.wipe i:nth-child(2){background:var(--yellow)} .wipe i:nth-child(3){background:var(--navy3)}
.wipe.out i{animation:wout .5s cubic-bezier(.7,0,.3,1) forwards}
.wipe.in i{transform:translateY(0);animation:win .55s cubic-bezier(.7,0,.3,1) forwards}
.wipe i:nth-child(2){animation-delay:.05s} .wipe i:nth-child(3){animation-delay:.1s}
@keyframes wout{from{transform:translateY(-101%)}to{transform:translateY(0)}}
@keyframes win{from{transform:translateY(0)}to{transform:translateY(101%)}}
@keyframes blink{50%{opacity:.25}}
@keyframes run{to{transform:translateX(-50%)}}

/* footer */
.ftr{margin-top:clamp(40px,6vw,80px);background:var(--navy1);border-top:4px solid var(--red)}
.ftr-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:52px 34px}
@media (max-width:900px){ .ftr-in{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ftr-in{grid-template-columns:1fr} }
.ftr p{color:var(--muted);font-size:14.5px;max-width:36ch;margin-top:14px}
.ftr h4{font:800 italic 15px/1 var(--f-cond);color:var(--yellow);margin-bottom:14px}
.ftr ul{display:grid;gap:9px}
.ftr li a{font-size:14.5px;color:var(--muted);text-decoration:none}
.ftr li a:hover{color:var(--text)}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:18px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}

/* tokens for the embedded back office and phone (same palette) */
:root{
  --c-bg:#0B111B; --c-side:#101826; --c-panel:#141D2C; --c-panel2:#1B2637; --c-line:#2A3850; --c-ink:#FFFFFF; --c-mut:#A3AFC2; --c-dim:#6E7C93;
  --c-green:#19D37A; --c-green2:#E3002B; --c-red:#FF4D5E; --c-amber:#F1FF1A; --c-blue:#6FB0FF; --c-violet:#A98BFF; --c-on:#0D1420; --c-white:#FFFFFF;
  --p-edge:#05080D; --p-bg:#0D1420; --p-card:#141D2C; --p-card2:#1B2637; --p-line:#2A3850; --p-brand:#F1FF1A; --p-on:#0D1420;
  --shadow:0 50px 100px -40px rgba(0,0,0,.85);
  --f-display:var(--f-cond);
}
/* numbered top rows */
.top6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1100px){ .top6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .top6{grid-template-columns:minmax(0,1fr)} }
.t6{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);min-height:190px;background:var(--navy1);border:1px solid var(--line);overflow:hidden;text-decoration:none;transition:transform .25s, border-color .25s}
.t6:hover{transform:translateY(-4px);border-color:var(--red)}
.t6 .n{position:relative;display:grid;place-items:center;font:900 italic 92px/1 var(--f-cond);color:var(--text);isolation:isolate}
.t6 .n::before{content:"";position:absolute;inset:auto 0 0 0;height:48%;background:var(--red);clip-path:polygon(0 20%,100% 0,100% 100%,0 100%);z-index:-1}
.t6 .c{display:grid;gap:8px;align-content:center;padding:18px 18px 18px 6px}
.t6 h3{font-size:21px;font-style:italic;line-height:1.05}
.t6 p{font-size:14.5px;color:var(--muted)}
.t6 .go{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.t6 img{position:absolute;right:-30px;top:0;height:100%;width:42%;object-fit:cover;opacity:.18;mask-image:linear-gradient(90deg, transparent, #000 60%);pointer-events:none}

/* painted sport cards */
.sports{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1100px){ .sports{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .sports{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sp{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--red);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end}
.sp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .7s ease}
.sp:hover img{transform:scale(1.06)}
.sp::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg, color-mix(in srgb, var(--red3) 92%, transparent), transparent);z-index:-1}
.sp b{padding:0 14px;font:900 italic clamp(22px,2vw,30px)/1 var(--f-cond);text-transform:uppercase}
.sp span{padding:4px 14px 14px;font:600 13.5px/1.3 var(--f-body);color:color-mix(in srgb, var(--text) 85%, transparent)}
.sp em{position:absolute;top:10px;left:10px;font:800 italic 12px/1 var(--f-cond);padding:5px 8px;background:var(--yellow);color:var(--on-yellow);font-style:italic}

/* stats */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--navy1);border:1px solid var(--line)}
.stats div{padding:20px 18px;display:grid;gap:6px;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0}
.stats b{font:900 italic clamp(28px,2.8vw,42px)/1 var(--f-cond);color:var(--yellow);font-variant-numeric:tabular-nums}
.stats span{font-size:13.5px;color:var(--muted)}
@media (max-width:1000px){ .stats{grid-template-columns:repeat(3,minmax(0,1fr))} .stats div:nth-child(4){border-left:0} .stats div:nth-child(n+4){border-top:1px solid var(--line)} }
@media (max-width:520px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stats div{border-left:0!important;border-top:1px solid var(--line)} .stats div:nth-child(-n+2){border-top:0} .stats div:nth-child(even){border-left:1px solid var(--line)!important} }

/* device frames */
.browser{position:relative;border-radius:10px;overflow:hidden;background:var(--navy1);border:1px solid var(--line2);box-shadow:0 50px 90px -40px var(--shade)}
.browser .bbar{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--navy2);border-bottom:1px solid var(--line)}
.browser .bbar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.browser .bbar span{margin-left:10px;font:500 11px/1 var(--f-mono);color:var(--dim)}
.device{position:relative;aspect-ratio:9/19.3;border-radius:34px;border:7px solid var(--p-edge);background:var(--p-edge);overflow:hidden;box-shadow:0 50px 90px -30px var(--shade), 0 0 0 1px var(--line2)}
.device img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px}
.swap{position:relative;width:100%;height:100%}
.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .45s ease}
.swap img.off{opacity:0}
.bsw{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:end}
@media (max-width:980px){ .bsw{grid-template-columns:minmax(0,1fr)} .bsw .device{width:min(270px, 72vw);justify-self:center} }
.bsw .browser .swap{aspect-ratio:16/10}
.tabs2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabs2 button{height:46px;padding:0 20px;border:1px solid var(--line2);background:var(--navy2);font:800 italic 15px/1 var(--f-cond);text-transform:uppercase;cursor:pointer;color:var(--muted)}
.tabs2 button[aria-pressed="true"],.tabs2 button[aria-selected="true"]{color:var(--on-yellow);background:var(--yellow);border-color:var(--yellow)}
.tabs2 .gap{flex:1}

/* panels and tools */
.panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--navy1);border:1px solid var(--line)}
@media (max-width:980px){ .panel{grid-template-columns:minmax(0,1fr)} }
.pc{padding:clamp(18px,2.6vw,30px);display:grid;gap:20px;align-content:start;min-width:0}
.pc + .pc{border-left:1px solid var(--line)}
@media (max-width:980px){ .pc + .pc{border-left:0;border-top:1px solid var(--line)} }
.lbl{display:flex;justify-content:space-between;gap:10px;font:700 italic 13.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.lbl b{color:var(--yellow)}
.fld{display:grid;gap:10px}
input[type=range]{width:100%;accent-color:var(--yellow);margin:0}
.segs{display:flex;flex-wrap:wrap;gap:6px}
.segs button{flex:1;min-width:70px;height:44px;border:1px solid var(--line2);background:var(--navy2);font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;cursor:pointer;color:var(--muted)}
.segs button[aria-pressed="true"]{color:var(--on-yellow);background:var(--yellow);border-color:var(--yellow)}
.stepper{display:grid;grid-template-columns:46px 1fr 46px;border:1px solid var(--line2)}
.stepper button{height:46px;border:0;background:var(--navy2);font:800 20px/1 var(--f-cond);cursor:pointer}
.stepper output{display:grid;place-items:center;font:900 italic 24px/1 var(--f-cond)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.huge{font:900 italic clamp(44px,5.5vw,76px)/.95 var(--f-cond);color:var(--yellow);font-variant-numeric:tabular-nums}
.gauge{height:12px;background:var(--navy3);overflow:hidden}
.gauge i{display:block;height:100%;background:linear-gradient(90deg, var(--red), var(--yellow));transition:width .35s ease}
.rws{display:grid;border-top:1px solid var(--line)}
.rws div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.rws span{color:var(--muted)}
.rws b{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}
.rws b.pos{color:var(--live)} .rws b.neg{color:var(--c-red)}
.tiny{font:500 12.5px/1.5 var(--f-mono);color:var(--dim)}
.chart{width:100%;height:130px;display:block}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){ .feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .feats{grid-template-columns:minmax(0,1fr)} }
.ft{padding:20px;background:var(--navy1);border:1px solid var(--line);border-top:3px solid var(--red);display:grid;gap:8px;align-content:start}
.ft h3{font-size:20px;font-style:italic;line-height:1.1}
.ft p{font-size:14.5px;color:var(--muted)}
.ft .tag{justify-self:start;font:800 italic 12px/1 var(--f-cond);padding:5px 8px;background:var(--navy3);color:var(--yellow);text-transform:uppercase}
.ft .tag.g{background:var(--live);color:var(--on-yellow)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
@media (max-width:980px){ .split{grid-template-columns:minmax(0,1fr)} }
.feed{display:grid;gap:6px;align-content:start}
.feed li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;padding:10px 12px;background:var(--navy1);border-left:3px solid var(--line2);font-size:14px;animation:slin .5s ease}
.feed li b{font:600 12px/1.5 var(--f-mono);color:var(--dim)}
.feed li.g{border-left-color:var(--live)} .feed li.r{border-left-color:var(--red)} .feed li.v{border-left-color:var(--violet)} .feed li.y{border-left-color:var(--yellow)}
@keyframes slin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.code{margin:0;padding:18px;background:var(--navy0);border:1px solid var(--line);font:500 13px/1.6 var(--f-mono);color:var(--muted);overflow-x:auto;white-space:pre;min-height:120px}
.code .k{color:var(--yellow)} .code .s{color:var(--live)} .code .n{color:var(--c-blue)}
.steps6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:s}
.steps6 li{position:relative;padding:18px 16px;background:var(--navy1);border:1px solid var(--line);display:grid;gap:6px;align-content:start}
.steps6 li::before{counter-increment:s;content:counter(s);font:900 italic 46px/1 var(--f-cond);color:var(--red)}
.steps6 b{font:800 italic 17px/1.1 var(--f-cond);text-transform:uppercase}
.steps6 span{font-size:14px;color:var(--muted)}
@media (max-width:1100px){ .steps6{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .steps6{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(40px,5vw,64px);padding:26px clamp(20px,4vw,40px);background:var(--red);position:relative;overflow:hidden;isolation:isolate}
.cta-band::before{content:"";position:absolute;right:12%;top:-20%;bottom:-20%;width:70px;background:var(--yellow);transform:skewX(-14deg);z-index:-1;box-shadow:110px 0 0 var(--yellow)}
.cta-band h3{font-size:clamp(22px,2.6vw,34px);font-style:italic;max-width:24ch}

/* carousel */
.carousel{position:relative}
.carousel .dots{position:absolute;left:clamp(22px,5vw,84px);bottom:22px;z-index:3}
@media (max-width:640px){ .arrows{display:none} .b-copy{padding-bottom:56px} }

/* "cash-out never sleeps" duel */
.duel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:760px){ .duel{grid-template-columns:minmax(0,1fr)} }
.dside{background:var(--navy1);border:1px solid var(--line);display:grid;gap:14px;padding:20px;align-content:start}
.dside.us{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset}
.dside h3{font-size:20px;font-style:italic}
.dside .who{font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;padding:5px 8px;justify-self:start;background:var(--navy3);color:var(--muted)}
.dside.us .who{background:var(--yellow);color:var(--on-yellow)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:12px;background:var(--navy2);border:1px solid var(--line)}
.mrow b{font-size:14.5px}
.mrow small{grid-column:1 / -1;font:500 12.5px/1.3 var(--f-mono);color:var(--dim)}
.oddbox{min-width:72px;text-align:center;padding:10px 8px;background:var(--navy3);font:700 16px/1 var(--f-mono);transition:background .3s, color .3s}
.oddbox.gone{background:repeating-linear-gradient(45deg, var(--navy3) 0 6px, var(--navy2) 6px 12px);color:var(--dim)}
.oddbox.lock{color:var(--amber)}
.cobtn{height:52px;border:0;font:900 italic 19px/1 var(--f-cond);text-transform:uppercase;background:var(--yellow);color:var(--on-yellow);transition:background .3s, color .3s}
.cobtn[disabled]{background:var(--navy3);color:var(--dim)}
.cobtn.safe{background:var(--amber)}
.why{min-height:40px;font-size:14px;color:var(--muted)}
.clockline{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.clockline .mm{font:900 italic 34px/1 var(--f-cond);min-width:84px}
.clockline .st{font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;padding:7px 10px;background:var(--navy3);color:var(--muted)}
.clockline .st.r{background:var(--red);color:var(--text)} .clockline .st.y{background:var(--yellow);color:var(--on-yellow)} .clockline .st.a{background:var(--amber);color:var(--on-yellow)}
.split-ticket{display:grid;grid-template-columns:var(--cut,50%) 1fr;height:64px;border:1px solid var(--line2);overflow:hidden;transition:grid-template-columns .4s ease}
.split-ticket div{display:grid;place-items:center;font:800 italic 15px/1.2 var(--f-cond);text-transform:uppercase;text-align:center;padding:4px}
.split-ticket div:first-child{background:var(--yellow);color:var(--on-yellow)}
.split-ticket div:last-child{background:var(--navy2);color:var(--text)}

/* scrubber + VAR + API */
.mk{display:grid;border-top:1px solid var(--line)}
.mk div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mk div b{font-size:14.5px}
.mk div small{font:500 12px/1.4 var(--f-mono);color:var(--dim)}
.mk div i{grid-row:1 / span 2;grid-column:2;font:800 italic normal 12.5px/1 var(--f-cond);text-transform:uppercase;padding:6px 9px;background:var(--navy3);color:var(--muted);font-style:italic}
.mk div i.w{background:var(--live);color:var(--on-yellow)} .mk div i.l{background:var(--red);color:var(--text)}
.mk div.flash{animation:fl 1.1s ease}
@keyframes fl{0%{background:color-mix(in srgb, var(--live) 20%, transparent)}100%{background:transparent}}
.marks{position:relative;height:16px;margin-top:6px}
.marks span{position:absolute;transform:translateX(-50%);font:600 10.5px/1 var(--f-mono);color:var(--dim);white-space:nowrap}
.marks span.g{color:var(--yellow)}
.vtl{display:grid;gap:8px}
.vtl li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:11px 12px;background:var(--navy2);border-left:4px solid var(--line2);font-size:14.5px;opacity:.3;transition:opacity .4s, border-color .4s}
.vtl li.on{opacity:1}
.vtl li.on.g{border-color:var(--yellow)} .vtl li.on.v{border-color:var(--violet)} .vtl li.on.w{border-color:var(--live)}
.vtl li b{font:700 12.5px/1.5 var(--f-mono);color:var(--yellow)}
.wal{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;background:var(--navy2);border:1px solid var(--line)}
.wal span{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.wal b{font:900 italic 30px/1 var(--f-cond);font-variant-numeric:tabular-nums;transition:color .4s}
.wal b.p{color:var(--live)} .wal b.m{color:var(--c-red)}

/* widgets */
.wprev{position:relative;display:grid;place-items:center;min-height:360px;padding:24px;background:repeating-linear-gradient(135deg, var(--navy1) 0 18px, var(--navy0) 18px 36px);border:1px solid var(--line)}
.wg{--wc:var(--yellow);--wbg:#141D2C;--wfg:#FFFFFF;--wmut:#A3AFC2;--wline:#2A3850;width:min(100%, var(--ww,360px));background:var(--wbg);color:var(--wfg);border:1px solid var(--wline);border-top:4px solid var(--wc);box-shadow:0 30px 60px -30px var(--shade);transition:width .3s}
.wg.light{--wbg:#FFFFFF;--wfg:#0D1420;--wmut:#5C6A80;--wline:#DCE2EA}
.wg-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--wline);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase}
.wg-h i{font-style:normal;color:var(--c-red)}
.wg-b{padding:12px;display:grid;gap:10px}
.wg-teams{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-weight:600;font-size:14px}
.wg-teams b{font:900 italic 20px/1 var(--f-cond)}
.wg-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wg-odds span{display:flex;justify-content:space-between;padding:9px;border:1px solid var(--wline);font:600 13px/1 var(--f-mono);color:var(--wmut);transition:background .3s}
.wg-odds span b{color:var(--wfg)}
.wg-odds span.up{background:color-mix(in srgb, var(--live) 18%, transparent)} .wg-odds span.down{background:color-mix(in srgb, var(--c-red) 18%, transparent)}
.wg-cta{height:42px;border:0;background:var(--wc);color:var(--on-yellow);font:900 italic 16px/1 var(--f-cond);text-transform:uppercase;cursor:pointer}
.wg-pitch{position:relative;height:120px;background:linear-gradient(90deg, #1F6B3A, #258046 50%, #1F6B3A);overflow:hidden}
.wg-pitch svg{position:absolute;inset:0;width:100%;height:100%}
.wg-ball{position:absolute;width:10px;height:10px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 10px #FFFFFF;transform:translate(-50%,-50%);transition:left .9s ease, top .9s ease}
.wg-zone{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--wc) 45%, transparent));transition:left .6s}
.wg-lbl{position:absolute;left:8px;bottom:8px;font:800 italic 12px/1 var(--f-cond);text-transform:uppercase;background:rgba(0,0,0,.55);color:#FFFFFF;padding:4px 6px}
.wg-leg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--wline);font-size:13.5px}
.wg-leg small{color:var(--wmut);font-size:12px}
.wg-leg b{font-family:var(--f-mono)}
.wg-win{display:grid;gap:6px;height:178px;overflow:hidden}
.wg-win div{display:flex;justify-content:space-between;padding:8px 10px;background:color-mix(in srgb, var(--wc) 10%, transparent);font-size:13.5px;animation:slin .5s ease}
.wg-win b{color:var(--wc);font-family:var(--f-mono)}
.wg.light .wg-win b{color:#0D1420}
.swatch{display:flex;gap:8px}
.swatch button{width:40px;height:40px;border:2px solid transparent;cursor:pointer}
.swatch button[aria-pressed="true"]{border-color:var(--text)}
.funnel{display:grid;gap:8px}
.funnel div{display:grid;grid-template-columns:120px minmax(0,1fr) 80px;gap:12px;align-items:center;font:800 italic 14px/1 var(--f-cond);text-transform:uppercase}
.funnel i{display:block;height:28px;background:linear-gradient(90deg, var(--red), var(--yellow));transform-origin:left;transition:width 1s ease}
.funnel b{font:700 15px/1 var(--f-mono);text-align:right}
.copy{justify-self:start;height:40px;padding:0 16px;border:1px solid var(--yellow);background:transparent;color:var(--yellow);font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;cursor:pointer}

/* compare */
.cmp{width:100%;border-collapse:collapse;background:var(--navy1);border:1px solid var(--line)}
.cmp th{padding:14px 16px;text-align:left;font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;color:var(--muted);background:var(--navy2);border-bottom:1px solid var(--line)}
.cmp th.us{background:var(--yellow);color:var(--on-yellow)}
.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
.cmp td small{display:block;color:var(--dim);font-size:13px;margin-top:2px}
.cmp td.c{text-align:center;font:900 italic 18px/1 var(--f-cond);white-space:nowrap}
.yes{color:var(--live)} .no{color:var(--c-red)} .plan{color:var(--amber)}
.cmp-wrap{overflow-x:auto}

/* configurator */
.cfg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}
@media (max-width:980px){ .cfg{grid-template-columns:minmax(0,1fr)} }
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){ .picks{grid-template-columns:minmax(0,1fr)} }
.pick{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;text-align:left;padding:15px;background:var(--navy1);border:1px solid var(--line);cursor:pointer;transition:border-color .2s, background .2s}
.pick i{width:22px;height:22px;border:2px solid var(--line2);display:grid;place-items:center}
.pick[aria-pressed="true"]{border-color:var(--yellow);background:var(--navy2)}
.pick[aria-pressed="true"] i{background:var(--yellow);border-color:var(--yellow)}
.pick[aria-pressed="true"] i::after{content:"";width:10px;height:5px;border-left:2px solid var(--on-yellow);border-bottom:2px solid var(--on-yellow);transform:rotate(-45deg) translate(1px,-1px)}
.pick b{display:block;font:800 italic 16px/1.15 var(--f-cond);text-transform:uppercase}
.pick span{font-size:13.5px;color:var(--muted)}
.sum{position:sticky;top:calc(var(--topb) + 16px);padding:22px;background:var(--red);display:grid;gap:14px}
.sum h3{font-size:26px;font-style:italic}
.sum ul{display:grid;gap:6px}
.sum li{position:relative;padding-left:18px;font-size:14.5px}
.sum li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--yellow)}
.fi{display:grid;gap:6px}
.fi label{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase}
.fi input,.fi textarea{width:100%;font:400 16px/1.4 var(--f-body);color:var(--on-yellow);background:#FFFFFF;border:0;padding:12px}
.fi textarea{min-height:80px;resize:vertical}
.sum .ybtn{justify-self:stretch;justify-content:center}
.okn{font:700 13px/1.4 var(--f-mono);color:var(--yellow)}

/* sportsbook phone page */
.live-split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){ .live-split{grid-template-columns:minmax(0,1fr)} .live-split .phone{margin-inline:auto} }
.marquee{overflow:hidden;mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.mq{display:flex;gap:16px;width:max-content;animation:run 40s linear infinite}
.mq .device{width:190px;flex:none}
.bo-wrap .console{box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px var(--red)}

/* ---------- corporate layout additions ---------- */
.ybtn{justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;background:var(--yellow);color:var(--on-yellow);font:700 15.5px/1 var(--f-body);text-decoration:none;border:0;border-radius:4px;cursor:pointer;transition:transform .15s, filter .15s}
.ybtn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ybtn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.cta-band .ybtn.ghost{background:var(--navy0);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.cta-band .ybtn.ghost:hover{background:var(--navy2)}
/* painted art band (inside a section) */
.band{position:relative;min-height:clamp(260px,28vw,360px);overflow:hidden;isolation:isolate;background:var(--red);display:grid;align-items:center;clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,0 100%)}
.band .art{position:absolute;inset:0;z-index:-1}
.band .art img,.band .art video{width:100%;height:100%;object-fit:cover;object-position:right center}
.band .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--red) 0%, color-mix(in srgb, var(--red) 75%, transparent) 36%, transparent 62%)}
.band .b-copy{display:grid;gap:14px;max-width:600px;padding:30px clamp(22px,5vw,64px)}
.band h2{font-size:clamp(28px,3.6vw,48px);line-height:1}
.band p{color:color-mix(in srgb, var(--text) 90%, transparent);max-width:52ch}
.band .b-kick{font:800 italic 15px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
/* solutions grid */
.sol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){ .sol{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .sol{grid-template-columns:minmax(0,1fr)} }
.sc{position:relative;display:flex;flex-direction:column;min-height:360px;background:var(--navy1);border:1px solid var(--line);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .3s, border-color .3s}
.sc:hover{transform:translateY(-6px);border-color:var(--yellow)}
.sc .im{position:relative;height:170px;overflow:hidden;background:var(--red);clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
.sc .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.sc:hover .im img{transform:scale(1.07)}
.sc .tx{display:grid;gap:8px;padding:16px 20px 22px;align-content:start;flex:1}
.sc small{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.sc h3{font-size:22px;line-height:1.05}
.sc p{font-size:14.5px;color:var(--muted)}
.sc .more{margin-top:auto;font:700 14px/1 var(--f-body);color:var(--text)}
.sc .more::after{content:" →";color:var(--yellow)}
.sc.big{grid-column:span 2;min-height:360px;background:var(--red)}
.sc.big .im{position:absolute;inset:0;height:auto;clip-path:none;z-index:-1}
.sc.big .im::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--red3) 0%, color-mix(in srgb, var(--red3) 70%, transparent) 45%, transparent 75%)}
.sc.big .tx{justify-content:end;align-content:end;max-width:60%}
.sc.big h3{font-size:clamp(26px,2.6vw,36px)}
.sc.big p{color:var(--text)}
@media (max-width:560px){ .sc.big{grid-column:span 1} .sc.big .tx{max-width:100%} }
/* how it works */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.flow::before{content:"";position:absolute;left:4%;right:4%;top:34px;height:2px;background:linear-gradient(90deg, var(--red), var(--yellow))}
.flow li{position:relative;display:grid;gap:8px;justify-items:start;padding:0 14px 0 0}
.flow li i{display:grid;place-items:center;width:68px;height:68px;background:var(--navy0);border:2px solid var(--yellow);font:900 italic 24px/1 var(--f-cond);font-style:italic;color:var(--yellow);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.flow li b{font:800 19px/1.1 var(--f-cond);text-transform:uppercase;margin-top:6px}
.flow li span{font-size:14.5px;color:var(--muted)}
.flow li small{font:600 12.5px/1.3 var(--f-mono);color:var(--yellow)}
.pulse{position:absolute;top:30px;left:4%;right:5%;height:10px;pointer-events:none}
.pulse::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--yellow),var(--yellow)) right/10px 10px no-repeat;filter:drop-shadow(0 0 8px var(--yellow));animation:pf 4s linear infinite;will-change:transform}
@keyframes pf{from{transform:translateX(calc(10px - 100%))}to{transform:none}}
@media (max-width:900px){ .flow{grid-template-columns:minmax(0,1fr);gap:22px} .flow::before{left:33px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg, var(--red), var(--yellow))} .flow li{grid-template-columns:68px minmax(0,1fr);column-gap:16px} .flow li i{grid-row:span 3} .flow li b{margin-top:0} .pulse{display:none} }
/* proof strip */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:center}
@media (max-width:980px){ .proof{grid-template-columns:minmax(0,1fr)} }
.proof ul{display:grid;gap:10px}
.proof li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:15.5px;color:var(--muted)}
.proof li::before{content:"";width:22px;height:22px;background:var(--yellow);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.proof li b{color:var(--text)}

/* three ways to work */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){ .ways{grid-template-columns:minmax(0,1fr)} }
.way{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px;background:var(--navy1);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.way::after{content:attr(data-n);position:absolute;right:-6px;top:-24px;font:900 italic 150px/1 var(--f-cond);color:color-mix(in srgb, var(--text) 5%, transparent);z-index:-1}
.way.hot{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset}
.way .tag{align-self:flex-start;font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;padding:6px 9px;background:var(--red);color:var(--text)}
.way.hot .tag{background:var(--yellow);color:var(--on-yellow)}
.way h3{font-size:clamp(26px,2.4vw,34px);line-height:1}
.way > p{color:var(--muted);font-size:15.5px}
.way ul{display:grid;gap:8px}
.way li{position:relative;padding-left:24px;font-size:15px}
.way li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--yellow);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.way .best{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line2);font-size:14.5px;color:var(--muted)}
.way .best b{color:var(--text)}

/* signature products */
.sig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){ .sig{grid-template-columns:minmax(0,1fr)} }
.sg{display:grid;gap:12px;align-content:start;background:var(--navy1);border:1px solid var(--line);padding:16px;text-decoration:none;transition:transform .3s, border-color .3s}
.sg:hover{transform:translateY(-5px);border-color:var(--yellow)}
.sg .shot{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--navy0);border:1px solid var(--line)}
.sg .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s ease}
.sg:hover .shot img{transform:scale(1.04)}
.sg small{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.sg h3{font-size:24px;line-height:1.05}
.sg p{font-size:14.5px;color:var(--muted)}
.sg ul{display:flex;flex-wrap:wrap;gap:6px}
.sg li{font:600 12.5px/1 var(--f-body);padding:6px 8px;background:var(--navy2);color:var(--muted)}

.sig.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
@media (max-width:760px){ .sig.two{grid-template-columns:minmax(0,1fr)} }

/* the live brand's My Bets show, mounted in a shadow root by mbshow/mbshow.js */
.show-frame{overflow:hidden}
.mbshow{display:block;width:100%;min-height:200px;background:#0D0D0D}
/* stacked layout below ~620 px: its contents scale with the width, so the height does too */
@media (max-width:655px){ .mbshow{aspect-ratio:0.86} }
.show-cap{margin:14px 0 0;font-size:15px;color:var(--muted);max-width:90ch}
.show-cap b{color:var(--text)}
.show-cap a{color:var(--yellow);font-weight:600;text-decoration:none;white-space:nowrap}
.show-ch{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:14px}
@media (max-width:1100px){ .show-ch{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .show-ch{grid-template-columns:repeat(2,minmax(0,1fr))} }
.show-ch li{display:flex}
.show-ch button{position:relative;display:grid;align-content:start;gap:4px;width:100%;text-align:left;padding:12px 12px 16px;background:var(--navy1);border:1px solid var(--line);cursor:pointer;overflow:hidden;transition:border-color .2s, background .2s}
.show-ch button:hover{border-color:var(--line2)}
.show-ch b{font:800 15px/1.1 var(--f-cond);text-transform:uppercase}
.show-ch span{font-size:12.5px;line-height:1.3;color:var(--muted)}
.show-ch i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--navy3)}
.show-ch button.done i{background:var(--yellow)}
.show-ch button.on{border-color:var(--yellow);background:var(--navy2)}
.show-ch button.on b{color:var(--yellow)}
.show-ch button.on i::after{content:"";position:absolute;inset:0;background:var(--yellow);transform-origin:left;animation:chfill var(--dur,3s) linear both}
@keyframes chfill{from{transform:scaleX(0)}}
/* live shows inside product cards */
.sg .shot.shot-live{background:#0e1812}
.shot-live > span{position:absolute;inset:0;display:block}
.shot-live > .trkshow{left:50%;right:auto;width:auto;height:100%;aspect-ratio:400 / 220;transform:translateX(-50%)}
.sig.two .shot{aspect-ratio:400 / 220}
/* the live tracker on the experience page */
.trk-live{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){ .trk-live{grid-template-columns:minmax(0,1fr)} }
.trkshow{display:block;width:100%;aspect-ratio:400 / 220;background:#0e1812}
.trk-side{display:grid;gap:14px}
.crop-one{margin:0;display:grid;gap:10px}
.crop-one img{width:100%;border:1px solid var(--line2);box-shadow:0 30px 60px -30px var(--shade)}
.crop-one figcaption{font-size:14.5px;color:var(--muted)}
.crop-one figcaption b{display:block;color:var(--text);font:800 18px/1.15 var(--f-cond);text-transform:uppercase;margin-bottom:4px}
.trk-mb{display:grid;gap:6px;padding:18px;background:var(--navy1);border:1px solid var(--line);border-left:4px solid var(--yellow);text-decoration:none;transition:border-color .2s, transform .2s}
.trk-mb:hover{transform:translateY(-3px);border-color:var(--yellow)}
.trk-mb b{font:800 18px/1.15 var(--f-cond);text-transform:uppercase}
.trk-mb span{font-size:14.5px;color:var(--muted)}
.trk-mb em{font-style:normal;font-weight:600;color:var(--yellow)}

/* real time: one event, every screen */
.rt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:center}
@media (max-width:1000px){ .rt{grid-template-columns:minmax(0,1fr)} }
.rt-ev{display:grid;gap:10px;justify-items:start;padding:24px;background:var(--red);clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.rt-ev small{font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.rt-ev b{font:900 clamp(34px,4vw,56px)/.95 var(--f-cond);font-stretch:88%;text-transform:uppercase}
.rt-ev span{font-size:15px}
.rt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){ .rt-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rt-c{position:relative;display:grid;gap:6px;align-content:start;padding:16px;min-height:118px;background:var(--navy1);border:1px solid var(--line);transition:border-color .3s, background .3s, transform .3s}
.rt-c i{font:700 11.5px/1 var(--f-mono);font-style:normal;color:var(--dim)}
.rt-c b{font:800 17px/1.15 var(--f-cond);text-transform:uppercase}
.rt-c span{font-size:13.5px;color:var(--muted)}
.rt-c.on{border-color:var(--yellow);background:color-mix(in srgb, var(--yellow) 8%, var(--navy1));transform:translateY(-3px)}
.rt-c.on i{color:var(--yellow)}

/* operator checklist */
.ck-sum{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.ck-sum button{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--navy1);border:1px solid var(--line2);font:700 15px/1 var(--f-body);color:var(--text);cursor:pointer;transition:border-color .2s, background .2s}
.ck-sum button b{font:700 15px/1 var(--f-mono);color:var(--yellow)}
.ck-sum button[aria-pressed="true"]{border-color:var(--yellow);background:var(--navy2);box-shadow:0 0 0 1px var(--yellow) inset}
.ck{columns:2 400px;column-gap:16px}
.ck-g{break-inside:avoid;margin-bottom:16px;background:var(--navy1);border:1px solid var(--line)}
.ck-g h3{padding:14px 18px;font-size:19px;background:var(--navy2);border-bottom:1px solid var(--line)}
.ck-g ul{display:grid}
.ck-g li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);font-size:15px}
.ck-g li:last-child{border-bottom:0}
.ck-g li b{grid-column:1;font-weight:600}
.ck-g li small{grid-column:1;color:var(--dim);font-size:13px}
.st2{grid-row:1 / span 2;grid-column:2;font:800 italic 12px/1 var(--f-cond);text-transform:uppercase;padding:6px 9px;white-space:nowrap}
.st2.r{background:var(--live);color:var(--on-yellow)} .st2.p{background:var(--amber);color:var(--on-yellow)} .st2.m{background:var(--navy3);color:var(--muted)}

/* My Bets tour */
.tourwrap{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"phone ctl" "phone list" "phone demo" "phone feed";gap:14px 28px;align-items:start}
.tourwrap > .phone{grid-area:phone}
.tourwrap > .tour-ctl{grid-area:ctl;margin-bottom:0}
.tourwrap > .tour{grid-area:list;min-width:0}
.tourwrap > .tour-demo{grid-area:demo}
.tourwrap > .tour-feed{grid-area:feed;min-width:0}
/* on a phone: the active step sits right above the phone it points into */
@media (max-width:900px){
  .tourwrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"ctl" "list" "phone" "demo" "feed"}
  .tourwrap .phone{margin-inline:auto}
  .tour li:not(.on){display:none}
}
.phone{position:relative}
.hl{position:absolute;z-index:20;pointer-events:none;border:3px solid var(--yellow);box-shadow:0 0 0 9999px rgba(5,8,13,.55), 0 0 30px var(--yellow);border-radius:10px;transition:all .45s cubic-bezier(.2,.8,.2,1);opacity:0}
.hl.on{opacity:1}
.tour{display:grid;gap:8px}
.tour li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:16px;background:var(--navy1);border:1px solid var(--line);cursor:pointer;transition:border-color .25s, background .25s}
.tour li:hover{border-color:var(--line2)}
.tour li.on{border-color:var(--yellow);background:color-mix(in srgb, var(--yellow) 6%, var(--navy1))}
.tour li > i{grid-row:span 3;display:grid;place-items:center;width:44px;height:44px;font:900 italic 22px/1 var(--f-cond);font-style:italic;background:var(--red);color:var(--text);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.tour li.on > i{background:var(--yellow);color:var(--on-yellow)}
.tour b{font:800 19px/1.1 var(--f-cond);text-transform:uppercase}
.tour p{font-size:14.5px;color:var(--muted)}
.tour p em{font-style:normal;color:var(--yellow);font-weight:600}
.tour .more{display:none}
.tour li.on .more{display:block}
.tour-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* gallery */
.gal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gal-tabs button{height:44px;padding:0 18px;border:1px solid var(--line2);background:var(--navy2);font:700 14.5px/1 var(--f-body);cursor:pointer;color:var(--muted)}
.gal-tabs button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.gal-cap{margin:14px 0 0;font-size:15px;color:var(--muted);max-width:80ch}
.gal-cap b{color:var(--text)}
.crop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){ .crop{grid-template-columns:minmax(0,1fr)} }
.crop figure{margin:0;display:grid;gap:10px;align-content:start}
.crop img{width:100%;border:1px solid var(--line2);box-shadow:0 30px 60px -30px var(--shade)}
.crop figcaption{font-size:14.5px;color:var(--muted)}
.crop figcaption b{display:block;color:var(--text);font:800 18px/1.15 var(--f-cond);text-transform:uppercase;margin-bottom:4px}
.speed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .speed{grid-template-columns:repeat(2,minmax(0,1fr))} }
.speed div{padding:18px;background:var(--navy1);border:1px solid var(--line);display:grid;gap:6px}
.speed b{font:900 italic clamp(26px,2.6vw,38px)/1 var(--f-cond);color:var(--yellow)}
.speed span{font-size:14px;color:var(--muted)}
/* eight stats */
.stats.s8{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats.s8 div{border-left:1px solid var(--line);border-top:0}
.stats.s8 div:nth-child(4n+1){border-left:0}
.stats.s8 div:nth-child(n+5){border-top:1px solid var(--line)}
@media (max-width:760px){ .stats.s8{grid-template-columns:repeat(2,minmax(0,1fr))} .stats.s8 div{border-left:0;border-top:1px solid var(--line)} .stats.s8 div:nth-child(-n+2){border-top:0} .stats.s8 div:nth-child(even){border-left:1px solid var(--line)} }
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the header's live demo link carries a live dot */
.menu > a.live-link i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.menu > a.live-link i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:livedot 1.6s ease-out infinite}
@keyframes livedot{from{transform:scale(1);opacity:.6}70%,to{transform:scale(2.75);opacity:0}}

/* brand studio: the live phone in any look */
.studio{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"phone ctl" "phone notes";gap:18px 28px;align-items:start}
.studio > .phone{grid-area:phone}
.studio > .sk-pane{grid-area:ctl}
.studio > .sk-notes{grid-area:notes}
@media (max-width:900px){
  .studio{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"ctl" "phone" "notes"}
  .studio .phone{margin-inline:auto}
  .studio .sk-pane .sk{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .studio .sk-pane .sk button{flex-direction:column;justify-content:center;gap:6px;min-height:66px;padding:8px 2px;font-size:12px;text-align:center}
}
.studio .cbt:not(.confirm):not([disabled]){color:var(--sk-on2,var(--p-on))}
.sk-pane{display:grid;gap:22px;min-width:0;padding:clamp(18px,2.4vw,28px);background:var(--navy1);border:1px solid var(--line)}
.sk-in{width:100%;height:52px;padding:0 14px;background:var(--navy0);border:1px solid var(--line2);color:var(--text);font:800 22px/1 var(--f-cond);font-stretch:110%;letter-spacing:.04em;text-transform:uppercase}
.sk-in:focus{border-color:var(--yellow);outline:0}
.sk-pane .sk{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.sk-pane .sk button{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border:1px solid var(--line2);background:var(--navy2);color:var(--muted);font:700 14px/1.15 var(--f-body);text-align:left;cursor:pointer;transition:border-color .2s, color .2s}
.sk-pane .sk button i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);box-shadow:0 0 0 1px var(--line2)}
.sk-pane .sk button:hover{color:var(--text)}
.sk-pane .sk button[aria-pressed="true"]{border-color:var(--yellow);color:var(--text);box-shadow:0 0 0 1px var(--yellow) inset}
.sk-col{width:100%;height:44px;padding:3px;border:1px solid var(--line2);background:var(--navy2);cursor:pointer}
.sk-notes{display:grid;gap:12px;padding:clamp(18px,2.4vw,26px);background:var(--navy1);border:1px solid var(--line);border-left:4px solid var(--yellow)}
.sk-notes li{position:relative;padding-left:24px;font-size:14.5px;color:var(--muted)}
.sk-notes li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--yellow);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.sk-notes b{color:var(--text)}

/* offer: find your way */
.fit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:stretch}
@media (max-width:980px){ .fit{grid-template-columns:minmax(0,1fr)} }
.fit-q{display:grid;gap:22px;align-content:center;padding:clamp(18px,2.6vw,30px);background:var(--navy1);border:1px solid var(--line)}
.fit-q .fld{transition:opacity .3s}
.fit-q .fld.off{opacity:.38}
.fit-r{position:relative;display:grid;gap:12px;align-content:center;justify-items:start;min-height:300px;padding:clamp(22px,3vw,38px);background:var(--red);clip-path:polygon(0 0,100% 0,100% 86%,92% 100%,0 100%);overflow:hidden;isolation:isolate}
.fit-r::after{content:attr(data-n);position:absolute;right:14px;bottom:-34px;font:900 italic 210px/1 var(--f-cond);color:color-mix(in srgb, var(--text) 11%, transparent);z-index:-1}
.fit-r small{font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.fit-r b{font:900 clamp(40px,5vw,68px)/.92 var(--f-cond);font-stretch:88%;text-transform:uppercase}
.fit-r b.flip{animation:flip .5s ease}
@keyframes flip{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fit-r p{font-size:16px;max-width:46ch}

/* offer: three ways side by side */
.cmp3{min-width:720px;table-layout:fixed}
.cmp3 th:first-child{width:31%}
.cmp3 td.c{font:500 14.5px/1.35 var(--f-body);text-align:left;white-space:normal}
.cmp3 td.c.yes{font:800 italic 16px/1 var(--f-cond);text-transform:uppercase}
.cmp3 th,.cmp3 td{transition:background .35s, color .35s}
.cmp3 th.fitcol{background:var(--yellow);color:var(--on-yellow)}
.cmp3 td.fitcol{background:color-mix(in srgb, var(--yellow) 8%, var(--navy1))}

/* offer: API modules */
.apix{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--navy1);border:1px solid var(--line)}
@media (max-width:980px){ .apix{grid-template-columns:minmax(0,1fr)} }
.api-list{display:grid;align-content:start;border-right:1px solid var(--line)}
@media (max-width:980px){ .api-list{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line)} }
.api-list button{display:grid;gap:4px;text-align:left;padding:16px 20px;border:0;border-bottom:1px solid var(--line);border-left:4px solid transparent;background:transparent;cursor:pointer;transition:background .2s, border-color .2s}
.api-list button b{font:800 18px/1.1 var(--f-cond);text-transform:uppercase}
.api-list button span{font-size:14px;color:var(--muted)}
.api-list button:hover{background:var(--navy2)}
.api-list button[aria-pressed="true"]{background:var(--navy2);border-left-color:var(--yellow)}
.api-list button[aria-pressed="true"] b{color:var(--yellow)}
.api-pane{display:grid;gap:16px;align-content:start;padding:clamp(18px,2.6vw,30px);min-width:0}
.api-pane h3{font-size:clamp(24px,2.4vw,32px);font-style:italic}
.api-pane > p{color:var(--muted)}
.api-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){ .api-g{grid-template-columns:minmax(0,1fr)} }
.api-g li{position:relative;padding:10px 12px 10px 34px;background:var(--navy2);font-size:14.5px}
.api-g li::before{content:"";position:absolute;left:12px;top:14px;width:12px;height:12px;background:var(--yellow);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.api-pane .code{min-height:260px;white-space:pre-wrap;word-break:break-word}
.api-pane .lbl b{display:inline-flex;align-items:center;gap:6px;color:var(--live)}
.api-pane .lbl b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.code .ev{display:block;animation:evin .4s ease}
@keyframes evin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* offer: questions */
.faq{display:grid;gap:8px;max-width:920px}
.faq details{background:var(--navy1);border:1px solid var(--line);border-left:4px solid var(--red);transition:border-color .2s}
.faq details[open]{border-left-color:var(--yellow)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none;font:800 18px/1.2 var(--f-cond);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:900 26px/1 var(--f-cond);color:var(--yellow);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--muted);max-width:75ch}

/* back office map */
.bomap-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.bomap-bar input{flex:1 1 280px;min-width:0;height:50px;padding:0 16px;background:var(--navy1);border:1px solid var(--line2);color:var(--text);font:500 16px/1 var(--f-body)}
.bomap-bar input:focus{outline:0;border-color:var(--yellow)}
.bm-chips{display:flex;flex-wrap:wrap;gap:6px}
.bm-chips button{height:44px;padding:0 14px;border:1px solid var(--line2);background:var(--navy2);color:var(--muted);font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;cursor:pointer}
.bm-chips button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.bomap-bar output{font:700 14px/1 var(--f-mono);color:var(--yellow)}
.bomap{columns:3 290px;column-gap:14px}
.bm-g{break-inside:avoid;margin-bottom:14px;background:var(--navy1);border:1px solid var(--line)}
.bm-g h3{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:17px;background:var(--navy2);border-bottom:1px solid var(--line)}
.bm-g h3 small{font:700 12.5px/1 var(--f-mono);color:var(--yellow)}
.bm-g li{display:grid;gap:2px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.bm-g li:last-child{border-bottom:0}
.bm-g li b{font-weight:600}
.bm-g li span{font-size:13px;color:var(--dim)}

/* Backgrounds, the approved mix (background lab, 24 Oct 2026). js/bg.js puts ONE layer behind each section:
   A floodlights on page heroes, B live pitch on sportsbook / tracker / live demo sections, C Rabona stripes on
   alternate sections and red bands, D data pulse on real-time and data sections. Layers sit behind the content,
   animate only while on screen (.on) and stay still with reduced motion. */
.bgx{position:absolute;pointer-events:none;overflow:hidden;z-index:-1}
.phero > .bgx{inset:0}
main > .sec > .bgx{inset:0 calc(50% - 50vw)}
main > .sec.alt > .bgx{clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%)}
main > .sec:not(.alt) > .bgx{-webkit-mask:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);mask:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent)}
.cta-band > .bgx{inset:0}
.bgx:not(.on) *, .bgx:not(.on)::before, .bgx:not(.on)::after{animation-play-state:paused !important}

/* ---------- A: floodlights (heroes) ---------- */
.bgx-flood{background:radial-gradient(110% 60% at 50% 120%, color-mix(in srgb, #12263f 80%, transparent) 0%, transparent 62%)}
.bgx-flood .stands{position:absolute;left:0;right:0;top:0;height:30%;background:radial-gradient(circle at 50% 50%, rgba(165,177,196,.12) 1px, transparent 1.7px) 0 0/10px 10px;-webkit-mask:linear-gradient(180deg,#000 10%,transparent);mask:linear-gradient(180deg,#000 10%,transparent)}
.bgx-flood .lamp{position:absolute;top:16px;width:96px;height:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;transform:rotate(-4deg)}
.bgx-flood .lamp i{border-radius:3px;background:#FFFEF2;box-shadow:0 0 10px 3px rgba(255,255,236,.85), 0 0 40px 12px rgba(255,255,220,.2)}
.bgx-flood .lamp.l{left:2.5%} .bgx-flood .lamp.r{right:2.5%;transform:rotate(4deg)}
.bgx-flood .beam{position:absolute;top:26px;width:160vmax;height:160vmax;margin-left:-80vmax;transform-origin:50% 0;will-change:transform;background:conic-gradient(from 162deg at 50% 0%, transparent 0deg, rgba(255,255,236,.045) 9deg, rgba(255,255,236,.11) 17deg, rgba(255,255,236,.045) 25deg, transparent 34deg);animation:bgx-sweep 17s ease-in-out infinite alternate}
.bgx-flood .beam.l{left:calc(2.5% + 48px)} .bgx-flood .beam.r{left:calc(97.5% - 48px);animation-delay:-9s;animation-direction:alternate-reverse}
@keyframes bgx-sweep{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
.bgx-flood .haze{position:absolute;inset:-12%;background:radial-gradient(30% 20% at 28% 48%, rgba(255,255,255,.045), transparent 70%), radial-gradient(26% 18% at 74% 60%, rgba(241,255,26,.03), transparent 70%);animation:bgx-drift 26s ease-in-out infinite alternate}
@keyframes bgx-drift{from{transform:translate3d(-3%,1%,0)}to{transform:translate3d(3%,-2%,0)}}
.bgx-flood .flash{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;animation:bgx-flash 6s infinite}
@keyframes bgx-flash{0%,90%,100%{opacity:0;box-shadow:none}92%{opacity:1;box-shadow:0 0 10px 4px rgba(255,255,255,.85)}95%{opacity:0}}
@media (max-width:760px){ .bgx-flood .lamp{width:64px;height:12px;gap:3px} .bgx-flood .beam.l{left:calc(2.5% + 32px)} .bgx-flood .beam.r{left:calc(97.5% - 32px)} }

/* ---------- B: live pitch (sportsbook, trackers, live demo) ---------- */
.bgx-pitch{background:radial-gradient(90% 55% at 50% 100%, color-mix(in srgb, #0d2a22 85%, transparent) 0%, transparent 66%)}
.bgx-pitch .plane{position:absolute;left:50%;bottom:-2%;width:min(1900px,220vw);aspect-ratio:105/68;transform:translateX(-50%) perspective(1000px) rotateX(56deg);transform-origin:50% 100%}
.bgx-pitch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bgx-pitch .ln{fill:none;stroke:rgba(241,255,26,.2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.bgx-pitch.on .ln{animation:bgx-draw 2.6s cubic-bezier(.3,.7,.2,1) both}
@keyframes bgx-draw{from{stroke-dashoffset:1}}
.bgx-pitch .zone{position:absolute;top:0;bottom:0;left:50%;width:50%;background:linear-gradient(90deg, transparent, rgba(227,0,43,.2));transition:left .9s ease, background .9s ease}
.bgx-pitch .zone.away{left:0;background:linear-gradient(270deg, transparent, rgba(241,255,26,.16))}
.bgx-pitch .ball{position:absolute;left:50%;top:50%;width:1.1%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgba(255,255,255,.65);transform:translate(-50%,-50%);transition:left .95s cubic-bezier(.3,.7,.3,1), top .95s cubic-bezier(.3,.7,.3,1)}
.bgx-pitch .trail{position:absolute;width:.7%;aspect-ratio:1;border-radius:50%;background:var(--yellow);transform:translate(-50%,-50%);opacity:0;transition:opacity 1.2s ease}
.bgx-pitch .goalfx{position:absolute;left:0;right:0;top:34%;text-align:center;font:900 italic clamp(90px,16vw,220px)/1 var(--f-cond);color:var(--yellow);opacity:0;text-shadow:0 0 60px color-mix(in srgb, var(--yellow) 60%, transparent)}
.bgx-pitch .goalfx.go{animation:bgx-goal 2.4s ease}
@keyframes bgx-goal{0%{opacity:0;transform:scale(.6)}15%{opacity:.5;transform:scale(1.04)}70%{opacity:.25}100%{opacity:0;transform:scale(1.2)}}

/* ---------- C: Rabona stripes (alternate sections, red bands) ---------- */
.bgx-stripes .field{position:absolute;inset:-10% -160px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none'%3E%3Cpath d='M-40 40L40 -40M-40 200L200 -40M120 200L200 120' stroke='%23E3002B' stroke-opacity='.12' stroke-width='30'/%3E%3Cpath d='M-40 120L120 -40M40 200L200 40' stroke='%23F1FF1A' stroke-opacity='.07' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px;animation:bgx-stripes 8s linear infinite;will-change:transform;-webkit-mask:linear-gradient(100deg, transparent 28%, #000 72%);mask:linear-gradient(100deg, transparent 28%, #000 72%)}
@keyframes bgx-stripes{to{transform:translate3d(160px,0,0)}}
.bgx-stripes .slab{position:absolute;left:0;top:28px;width:min(78%,1100px);height:min(270px,44%);background:linear-gradient(100deg, var(--red3), var(--red) 72%);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);transform:translate3d(-45%,0,0);opacity:0;transition:transform 1.3s cubic-bezier(.2,.8,.2,1), opacity .8s ease}
.bgx-stripes .slab::after{content:"";position:absolute;top:0;bottom:0;right:3%;width:14px;background:var(--yellow);transform:skewX(-12deg)}
/* header text that sits on the red slab reads in near-white */
.has-slab > .sh p, .has-slab > .sec-h > span{color:rgba(255,255,255,.9)}
.bgx-stripes.on .slab,.bgx-stripes.seen .slab{transform:none;opacity:.86}
.bgx-stripes .word{position:absolute;bottom:2%;left:0;white-space:nowrap;font:900 italic clamp(100px,15vw,230px)/1 var(--f-cond);font-stretch:88%;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.05);animation:bgx-marq 52s linear infinite}
@keyframes bgx-marq{to{transform:translate3d(-50%,0,0)}}
/* phones: the slab spans the width (its yellow edge would cross the header text) and ends on a slanted yellow line */
@media (max-width:760px){
  .bgx-stripes .slab{width:100%;height:min(250px,36%);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
  .bgx-stripes .slab::after{top:auto;left:0;right:0;bottom:3px;width:auto;height:26px;transform:none;background:linear-gradient(to bottom right, transparent calc(50% - 3px), var(--yellow) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px))}
  .bgx-stripes .word{display:none}
}
.bgx-band .field{position:absolute;inset:-20% -120px;background:repeating-linear-gradient(120deg, transparent 0 22px, rgba(10,16,25,.12) 22px 26px, transparent 26px 60px);animation:bgx-band 6s linear infinite}
@keyframes bgx-band{to{transform:translate3d(69.3px,0,0)}}
.bgx-band::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:22%;background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);transform:translateX(-160%) skewX(-18deg);animation:bgx-sheen 6s ease-in-out infinite}
@keyframes bgx-sheen{0%,55%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(560%) skewX(-18deg)}}

/* ---------- D: data pulse (real-time and data sections) ---------- */
.bgx-data canvas{position:absolute;inset:0;width:100%;height:100%}

@media (prefers-reduced-motion: reduce){
  .bgx *, .bgx::before, .bgx::after{animation:none !important;transition:none !important}
  .bgx-stripes .slab{transform:none;opacity:.86}
}

/* back office page: the console on real matches (js/bo.js): replay bar, moment banner, counters, live hero */

/* the brand studio's .sk grid (d-more.css) also matches the ticker's stake column: keep that a plain cell */
.tk .sk{display:block}
/* a real goal in the settlement stream */
.res.goal{background:var(--yellow);color:var(--on-yellow)}
/* the console's small labels read on its dark panels (same dim tone as the rest of the site) */
.bo-wrap .console{--c-dim:#8A98AF}

/* a replay, not a live feed: a circular arrow instead of a pulsing dot (label, hero feed, console header) */
.bo-label,.hb-live,.bo-wrap .c-live{--rp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 1-4.33 2.5' fill='none' stroke='%23000' stroke-width='2.3'/%3E%3Cpath d='M5.1 3 8.9.3v5.4z'/%3E%3C/svg%3E")}

/* real or simulated, said before anything moves */
.bo-label{display:flex;align-items:flex-start;gap:12px;margin:-8px 0 16px;font:600 15px/1.45 var(--f-body);color:var(--text)}
.bo-label i{position:relative;flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--muted)}
.bo-label.rp i{width:16px;height:16px;margin-top:3px;border-radius:0;background:var(--yellow);-webkit-mask:var(--rp-ico) center/contain no-repeat;mask:var(--rp-ico) center/contain no-repeat}

/* replay bar */
.rbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:14px 16px;background:var(--navy1);border:1px solid var(--line);border-bottom:0}
.rb-play{display:grid;place-items:center;width:52px;height:48px;border:0;background:var(--yellow);color:var(--on-yellow);cursor:pointer;clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);transition:transform .15s}
.rb-play:hover{transform:scale(1.05)}
/* the yellow outline would be cut by the slanted shape (and yellow on yellow): focus turns the button white instead */
.rb-play:focus-visible{outline:none;background:var(--text);box-shadow:inset 0 0 0 3px var(--navy0)}
.rb-play svg{width:20px;height:20px;fill:currentColor}
.rb-play .i-play,.rbar.paused .rb-play .i-pause{display:none}
.rbar.paused .rb-play .i-play{display:block}
.rb-time{display:grid;gap:4px}
.rb-time b{font:700 24px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rb-time span{font:600 11px/1 var(--f-mono);color:var(--dim);white-space:nowrap}
.rb-line{position:relative;min-width:0;display:grid;gap:8px;padding-top:6px}
.rb-track{position:relative;height:10px;background:var(--navy3)}
.rb-fill{position:absolute;inset:0;background:linear-gradient(90deg, var(--red), var(--yellow));transform-origin:left center;transform:scaleX(0)}
.rbar.ff .rb-fill{background:repeating-linear-gradient(115deg, var(--yellow) 0 10px, var(--red) 10px 20px)}
.rb-marks i{position:absolute;top:-5px;width:3px;height:20px;margin-left:-1.5px;background:var(--yellow);box-shadow:0 0 0 1px var(--navy1)}
.rb-marks i.b{top:-8px;height:26px;background:var(--violet)}
.rb-marks i{opacity:.38;transition:opacity .4s} .rb-marks i.on{opacity:1}
.rb-marks i.hit{animation:mk-hit 1s cubic-bezier(.2,.9,.25,1)}
@keyframes mk-hit{0%{transform:scaleY(2.4)}100%{transform:none}}
.rb-line input{position:absolute;left:0;right:0;top:0;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.rb-line input::-webkit-slider-runnable-track{height:22px;background:transparent}
.rb-line input::-moz-range-track{height:22px;background:transparent}
.rb-line input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;background:var(--text);border:0;box-shadow:0 0 12px color-mix(in srgb, var(--yellow) 70%, transparent);clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
.rb-line input::-moz-range-thumb{width:14px;height:22px;background:var(--text);border:0;border-radius:0}
.rb-line input:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.rb-ends{display:flex;justify-content:space-between;gap:10px;font:600 11px/1 var(--f-mono);color:var(--dim)}
.rb-key{display:inline-flex;align-items:center;gap:6px}
.rb-key i{width:3px;height:11px;background:var(--yellow)}
.rb-key i.b{margin-left:8px;background:var(--violet)}
.rb-sp{flex-wrap:nowrap}
.rb-sp button{min-width:50px;height:46px}
.rb-next{min-width:196px;height:46px;padding:0 18px;border:1px solid var(--yellow);background:transparent;color:var(--yellow);font:800 italic 15px/1 var(--f-cond);text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .2s, color .2s}
.rb-next:hover:not([disabled]){background:var(--yellow);color:var(--on-yellow)}
.rb-next[disabled]{opacity:.7;cursor:default}
@media (max-width:1100px){
  .rbar{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"play time sp" "line line line" "next next next"}
  .rb-play{grid-area:play} .rb-time{grid-area:time} .rb-line{grid-area:line} .rb-sp{grid-area:sp;justify-self:end} .rb-next{grid-area:next}
}
@media (max-width:520px){
  .rbar{gap:12px;padding:12px}
  .rb-time b{font-size:20px}
  .rb-sp button{min-width:42px}
  .rb-key{display:none}
}

/* moment banner: the last real event, in the same second as the console (two lines, never cut mid-fact) */
.moment{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:62px;padding-right:16px;margin-bottom:14px;background:var(--navy2);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.moment b{align-self:stretch;display:grid;place-items:center;min-width:150px;padding:0 26px 0 18px;font:900 italic 21px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.01em;background:var(--navy3);color:var(--muted);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.moment span{min-width:0;padding-block:8px;font:600 15.5px/1.35 var(--f-body);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.moment time{font:600 12.5px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.moment[data-k="goal"] b{background:var(--yellow);color:var(--on-yellow)}
.moment[data-k="back"] b{background:var(--violet);color:var(--navy0)}
.moment[data-k="ft"] b{background:var(--text);color:var(--navy0)}
.moment[data-k="ht"] b{background:var(--amber);color:var(--navy0)}
.moment[data-k="replay"] b{background:var(--red);color:var(--text)}
.moment[data-k="back"]{border-color:color-mix(in srgb, var(--violet) 55%, var(--line))}
.moment::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:-1;pointer-events:none;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--yellow) 26%, transparent), transparent);transform:translateX(-110%) skewX(-18deg);opacity:0}
.moment[data-k="back"]::after{background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 34%, transparent), transparent)}
.moment.pop::after{animation:mo-sweep 1.2s ease-out}
.moment.pop b{animation:mo-in .5s cubic-bezier(.2,.9,.25,1.15)}
.moment.pop span,.moment.pop time{animation:mo-up .55s ease}
@keyframes mo-sweep{0%{transform:translateX(-110%) skewX(-18deg);opacity:1}100%{transform:translateX(400%) skewX(-18deg);opacity:0}}
@keyframes mo-in{from{transform:translateX(-105%)}to{transform:none}}
@keyframes mo-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){ .moment span{-webkit-line-clamp:3} .moment b{min-width:124px;padding:0 22px 0 14px;font-size:19px} }
@media (max-width:640px){
  .moment{grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:0 12px 0 0}
  .moment b{grid-row:span 2;min-width:0;padding:0 20px 0 12px;font-size:16px}
  .moment span{padding:9px 0 0;font-size:14px;-webkit-line-clamp:4}
  .moment time{padding-bottom:9px;font-size:11.5px}
}

/* the replay bar and the banner stay on screen while the console scrolls under them (wide screens) */
.bo-stage{position:relative}
@media (min-width:1101px) and (min-height:700px){
  .bo-dock{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:6;padding-bottom:14px;background:var(--navy0)}
  .bo-dock .moment{margin-bottom:0}
  .bo-dock::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;background:linear-gradient(180deg, color-mix(in srgb, var(--navy0) 85%, transparent), transparent)}
}

/* the console lights up on a real goal (yellow) and on a goal taken back (violet) */
.bo-wrap .console{position:relative}
.bo-wrap .console::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 3px var(--yellow), inset 0 0 110px color-mix(in srgb, var(--yellow) 30%, transparent)}
.bo-wrap .console.fx-goal::after{animation:con-fl 1.8s ease-out}
.bo-wrap .console.fx-back::after{box-shadow:inset 0 0 0 3px var(--violet), inset 0 0 120px color-mix(in srgb, var(--violet) 36%, transparent);animation:con-fl 2.4s ease-out}
@keyframes con-fl{0%{opacity:1}100%{opacity:0}}
/* the settlement row a real goal writes pops in, with a yellow sweep */
.bo-wrap .sr.goal{position:relative;animation:sr-pop .7s cubic-bezier(.2,.9,.25,1.2)}
.bo-wrap .sr.goal::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, color-mix(in srgb, var(--yellow) 26%, transparent), transparent 75%);opacity:0;animation:con-fl 1.8s ease-out}
@keyframes sr-pop{0%{opacity:0;transform:translateX(-18px) scale(.97)}60%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:none}}
/* the scoring match in the liability card, for a few replay seconds */
.bo-wrap .lb.goal{position:relative;box-shadow:inset 3px 0 0 var(--yellow)}
.bo-wrap .lb.goal .lb-h span{color:var(--yellow)}
.bo-wrap .lb.goal .lb-h span::before{content:"GOAL · "}
.bo-wrap .lb.pop{animation:lb-pop .6s cubic-bezier(.2,.9,.25,1.2)}
@keyframes lb-pop{from{opacity:.3;transform:scale(.97)}to{opacity:1;transform:none}}
/* the VAR window card: new wins enter the 3-minute hold on a goal, a take-back cancels or reverses them */
.bo-wrap .kpi{position:relative}
.bo-wrap .kpi::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 2px var(--yellow), 0 0 26px color-mix(in srgb, var(--yellow) 45%, transparent)}
.bo-wrap .kpi.fx-up::after{animation:con-fl 1.6s ease-out}
.bo-wrap .kpi.fx-down::after{box-shadow:0 0 0 2px var(--violet), 0 0 26px color-mix(in srgb, var(--violet) 55%, transparent);animation:con-fl 2.2s ease-out}
/* a replay, not live: the console's header pill and the status chips */
.bo-wrap .c-live.rp{color:var(--yellow)}
.bo-wrap .c-live.rp i{width:11px;height:11px;border-radius:0;background:currentColor;animation:none;-webkit-mask:var(--rp-ico) center/contain no-repeat;mask:var(--rp-ico) center/contain no-repeat}
.bo-wrap #tk-card .cpill{background:color-mix(in srgb, var(--yellow) 14%, transparent);color:var(--yellow)}
/* phones: the ticker's time column fits a whole HH:MM:SS (the platform's 48 px let it run into the bet) */
@media (max-width:700px){ .bo-wrap .tk{grid-template-columns:58px minmax(0,1fr) 62px minmax(0,auto)} }
@media (max-width:420px){ .bo-wrap .card-h b{flex:none} .bo-wrap .card-h span{white-space:normal;text-align:right;line-height:1.35} }
/* phones: the money-by-mechanism table fits its card (the platform's 14 px cell padding pushed the OK column out) */
@media (max-width:420px){ .bo-wrap .mtable td{padding:10px 6px;font-size:12px} .bo-wrap .mtable td:first-child{padding-left:12px} .bo-wrap .mtable td:last-child{padding-right:10px} }
/* phones: what is real and what is simulated stays said in the console header, on its own line */
@media (max-width:760px){
  .bo-wrap .c-chrome{flex-wrap:wrap;height:auto;min-height:42px;padding-block:9px;row-gap:6px}
  .bo-wrap .c-right{display:contents}
  .bo-wrap .c-live{margin-left:auto}
  .bo-wrap #c-clock{font:500 11px/1 var(--f-mono);color:var(--c-mut)}
  .bo-wrap .c-demo{display:block;order:3;flex:1 1 100%;font:500 11px/1.4 var(--f-mono);white-space:normal}
}

/* this replay so far */
.rc-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;margin:18px 0 8px}
.rcount{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.rcount div{display:grid;gap:5px;align-content:start;padding:14px 16px 12px;background:var(--navy1);min-width:0}
.rcount span{font:700 italic 13px/1.15 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.rcount b{font:900 italic clamp(26px,2.4vw,34px)/1 var(--f-cond);font-variant-numeric:tabular-nums;color:var(--yellow)}
.rcount .b b{color:var(--violet)}
.rcount small{font:500 11.5px/1 var(--f-mono);color:var(--dim)}
.rcount i{display:block;height:3px;margin-top:4px;background:var(--navy3);overflow:hidden}
.rcount u{display:block;height:100%;background:var(--yellow);transform-origin:left center;transform:scaleX(0);transition:transform .45s ease}
.rcount .b u{background:var(--violet)}
@media (max-width:860px){ .rcount{grid-template-columns:repeat(2,minmax(0,1fr))} .rcount div:last-child{grid-column:span 2} }

/* real and simulated, in two short lists */
.bo-note{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;margin-top:12px}
.bo-note > div{display:grid;gap:6px;align-content:start;padding:14px 18px 16px;background:var(--navy1);border:1px solid var(--line);border-left:4px solid var(--yellow)}
.bo-note .bn-sim{border-left-color:var(--muted)}
.bo-note b{font:800 italic 17px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.bo-note .bn-sim b{color:var(--text)}
.bo-note small{font:500 12px/1.35 var(--f-mono);color:var(--dim)}
.bo-note ul{display:grid;gap:4px;margin-top:4px}
.bo-note li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--muted)}
.bo-note li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:3px;background:var(--yellow);transform:skewX(-20deg)}
.bo-note .bn-sim li::before{background:var(--muted)}
@media (max-width:760px){ .bo-note{grid-template-columns:minmax(0,1fr)} }

/* one real day on the engine */
.bo-day{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
.bo-day > div{position:relative;display:grid;gap:8px;align-content:start;padding:20px 18px;background:var(--navy1);border:1px solid var(--line);border-top:3px solid var(--red);overflow:hidden;isolation:isolate}
.bo-day > div::before{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;z-index:-1;background:repeating-linear-gradient(100deg, transparent 0 9px, color-mix(in srgb, var(--yellow) 8%, transparent) 9px 13px)}
.bo-day b{font:900 italic clamp(28px,2.7vw,40px)/1 var(--f-cond);color:var(--yellow);font-variant-numeric:tabular-nums}
.bo-day b small{font-size:.5em;color:var(--muted);margin-left:6px}
.bo-day > div > span{font-size:14px;line-height:1.45;color:var(--muted)}
#bo-day-src{margin-top:10px;max-width:110ch}
@media (max-width:980px){ .bo-day{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .bo-day{grid-template-columns:minmax(0,1fr)} }

/* the data pulse behind this section stays behind the words: a soft navy backing under the plain text blocks */
#room > .sec-h,#room > .bo-label,#room > .rc-h,#room > #bo-day-src{position:relative}
#room > .sec-h::before,#room > .bo-label::before,#room > .rc-h::before,#room > #bo-day-src::before{content:"";position:absolute;inset:-10px -14px;z-index:-1;pointer-events:none;background:color-mix(in srgb, var(--navy0) 88%, transparent);-webkit-mask:radial-gradient(farthest-side, #000 72%, transparent);mask:radial-gradient(farthest-side, #000 72%, transparent)}

/* the cards under the console open its views */
.bo-views{margin-top:16px}
.bo-views .ft{position:relative;grid-template-rows:auto auto 1fr auto;transition:transform .25s ease, border-color .25s ease}
.bo-views .ft:hover{transform:translateY(-4px);border-top-color:var(--yellow)}
.bo-views .ft:has(.ft-go:focus-visible){outline:2px solid var(--yellow);outline-offset:3px}
.ft-go{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:0;border:0;background:none;color:var(--yellow);font:800 italic 15px/1.2 var(--f-cond);text-transform:uppercase;cursor:pointer}
@supports selector(:has(a)){ .ft-go:focus-visible{outline:none} }
.ft-go::before{content:"";position:absolute;inset:0} /* the whole card answers the click */
.ft-go::after{content:"›";font-size:20px;line-height:.7;transition:transform .25s ease}
.bo-views .ft:hover .ft-go::after{transform:translateX(5px)}

/* hero: the settlement feed and the VAR net on the painted art, docked on the plain red half so the trader's face
   and headset stay in view */
.bo-hero .float.f2{width:52%;left:-6%;right:auto;top:4%}
.bo-hero .float.f1{width:40%;left:auto;right:-3%;bottom:2%}
.hb .bbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:12px 14px 8px}
.hb-top b{font:700 22px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.hb-top span{font:600 10.5px/1 var(--f-mono);color:var(--dim)}
.hb-top .hb-live{display:inline-flex;align-items:center;gap:6px;color:var(--yellow);text-transform:uppercase;letter-spacing:.06em}
.hb-live i{position:relative;width:11px;height:11px;background:var(--yellow);-webkit-mask:var(--rp-ico) center/contain no-repeat;mask:var(--rp-ico) center/contain no-repeat}
.hb-feed{display:grid;gap:5px;align-content:start;min-height:236px;padding:2px 12px 10px}
/* two lines per event: the tag and its second, then the whole line (team names are never cut on desktop) */
.hb-feed li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 9px;align-items:center;padding:7px 9px 8px;background:var(--navy2);border-left:3px solid var(--line2);animation:hb-in .55s cubic-bezier(.2,.9,.25,1.1)}
.hb-feed b{grid-column:2;grid-row:1;font:600 10.5px/1 var(--f-mono);color:var(--dim)}
.hb-feed em{grid-column:1;grid-row:1;justify-self:start;font:800 italic 11px/1 var(--f-cond);font-style:italic;text-transform:uppercase;padding:4px 6px;background:var(--navy3);color:var(--muted);white-space:nowrap}
.hb-feed span{grid-column:1 / -1;min-width:0;font:600 13px/1.25 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-feed .k-goal{border-left-color:var(--yellow)} .hb-feed .k-goal em{background:var(--yellow);color:var(--on-yellow)}
.hb-feed .k-back{border-left-color:var(--violet)} .hb-feed .k-back em{background:var(--violet);color:var(--navy0)}
.hb-feed .k-ft{border-left-color:var(--text)} .hb-feed .k-ft em{background:var(--text);color:var(--navy0)}
.hb-feed .k-ht em{background:var(--amber);color:var(--navy0)}
@keyframes hb-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.hb-src{padding:0 14px 12px;font:500 10.5px/1.3 var(--f-mono);color:var(--dim)}
.hn{display:grid;gap:5px;padding:14px 16px;background:color-mix(in srgb, var(--navy1) 94%, transparent);border:1px solid color-mix(in srgb, var(--violet) 60%, var(--line2));border-left:5px solid var(--violet);box-shadow:0 34px 70px -26px var(--shade)}
.hn small{font:700 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.hn b{font:900 italic 19px/1.05 var(--f-cond);text-transform:uppercase}
.hn span{font-size:12.5px;line-height:1.4;color:var(--muted)}
.hn.pop{animation:hn-pop .6s cubic-bezier(.2,.9,.25,1.15)}
@keyframes hn-pop{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@media (min-width:1040px) and (max-width:1279px){ .bo-hero .float.f2{width:58%} }
@media (max-width:1039px){ .bo-hero .float.f2{width:56%;left:1%} }
/* phones: the base hides f2, here the live feed matters more than the note, so it shows in compact form instead */
@media (max-width:560px){
  .bo-hero .float.f2{display:block;width:90%;left:auto;right:0;top:auto;bottom:-7%}
  .bo-hero .float.f1{display:none}
  .hb-top{padding:10px 12px 6px}
  .hb-top b{font-size:18px}
  .hb-feed{min-height:0;padding:2px 10px 10px}
  .hb-feed li:nth-child(n+3){display:none}
  .hb-feed li{grid-template-columns:auto auto minmax(0,1fr);padding:8px 9px}
  .hb-feed b{grid-column:auto;grid-row:auto} .hb-feed em{grid-column:auto;grid-row:auto} .hb-feed span{grid-column:auto;font-size:12.5px}
  .hb-src{padding:0 12px 9px}
}
/* small phones: the feed sits lower so it stops under the trader's mouth, still inside the hero */
@media (max-width:400px){ .bo-hero .float.f2{bottom:-15%} }

/* reduced motion: nothing pulses or pops */
@media (prefers-reduced-motion: reduce){
  .bo-wrap .console::after,.bo-wrap .kpi::after,.bo-wrap .sr.goal::after,.moment::after{animation:none!important;opacity:0}
  .bo-wrap .sr.goal,.bo-wrap .lb.pop,.hb-feed li,.hn.pop,.moment.pop b,.moment.pop span,.moment.pop time,.rb-marks i.hit{animation:none!important}
  .bo-views .ft,.bo-views .ft:hover{transform:none}
}

/* cash-out page (pages/cashout.html, js/cash.js). Everything is prefixed co- so it never touches other pages. */

/* ---------- hero: the painted frame with a live line monitor and the 1-in-5 card ---------- */
.co-art .float.f2.co-monf{top:auto;bottom:-7%;right:-3%;width:68%;z-index:2}
.co-art .float.f1.co-onef{left:0;top:6%;bottom:auto;width:30%;z-index:3}
.co-mon{background:var(--navy1)}
.co-mh{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.co-mh b{flex:1;min-width:0;font:800 13px/1.2 var(--f-cond);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-mh b em{font-style:normal;color:var(--yellow);padding:0 3px}
.co-mh b em.hit{display:inline-block;animation:copop .6s ease}
.co-rec{display:inline-flex;align-items:center;gap:5px;flex:none;padding:4px 6px;background:var(--red);font:800 italic 10.5px/1 var(--f-cond);text-transform:uppercase}
.co-rec i{width:6px;height:6px;border-radius:50%;background:var(--text);animation:blink 1.1s infinite}
.co-mc{flex:none;font:700 12px/1 var(--f-mono);color:var(--live)}
.co-bars{position:relative;height:clamp(120px,11vw,150px);margin:8px 10px 0;overflow:hidden;background:var(--navy0);border:1px solid var(--line)}
.co-bars svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.co-bars rect{fill:var(--live);opacity:.78}
.co-bars rect.fl{fill:var(--amber);opacity:0}
.co-bars rect.fl.go{animation:coflash 1.1s ease-out}
@keyframes coflash{0%{opacity:.85}100%{opacity:0}}
.co-fut{position:absolute;inset:0;background:color-mix(in srgb, var(--navy0) 78%, transparent);transform:translateX(0%);will-change:transform}
.co-ph{position:absolute;inset:0;transform:translateX(0%);will-change:transform;pointer-events:none}
.co-ph::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--yellow);box-shadow:0 0 12px var(--yellow)}
.co-ax{position:relative;height:17px;margin:3px 10px 0}
.co-ax span{position:absolute;top:2px;transform:translateX(-50%);font:600 10.5px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.co-ax span:last-child{transform:translateX(-100%)}
.co-tk1{margin:4px 10px 0;height:calc(3 * 1.4em);overflow:hidden;font:500 11.5px/1.4 var(--f-mono);color:var(--text)}
.co-tk1 b{color:var(--amber);margin-right:6px;font-weight:700}
.co-tk1.goal b{color:var(--live)} .co-tk1.back b,.co-tk1.var b{color:var(--violet)} .co-tk1.book b{color:var(--c-red)}
.co-tk1.in{animation:slin .45s ease}
.co-mf,.co-mvs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 10px 0}
.co-mf span{display:flex;align-items:baseline;gap:6px;padding:7px 8px;background:var(--navy2);font-size:11.5px;line-height:1.2;color:var(--muted)}
.co-mf b{font:900 italic 21px/1 var(--f-cond);color:var(--live);font-variant-numeric:tabular-nums}
.co-mf .p b{color:var(--amber)}
.co-mvs{margin-top:6px}
.co-mvs span{display:grid;gap:3px;padding:6px 8px;border:1px solid var(--line);font-size:11.5px;line-height:1.2;color:var(--muted)}
.co-mvs b{font:800 italic 13px/1.1 var(--f-cond);text-transform:uppercase}
.co-mvs .a b{color:var(--c-red)} .co-mvs .b b{color:var(--yellow)}
.co-mvs .a b.co-ok{color:var(--live)} .co-mvs .b b.co-sf{color:var(--amber)}
.co-msrc{margin:7px 10px 9px;font:500 11.5px/1.4 var(--f-mono);color:var(--muted)}
.co-one{display:grid;gap:5px;padding:16px 16px 14px;background:var(--navy1);border:1px solid var(--line2);border-top:4px solid var(--yellow);box-shadow:0 30px 60px -30px var(--shade)}
.co-one small{font:800 italic 12px/1.1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.co-one b{font:900 italic clamp(30px,3vw,44px)/1 var(--f-cond);font-variant-numeric:tabular-nums}
.co-one b em{font-style:normal;color:var(--muted);padding:0 4px}
.co-one > span{font-size:13.5px;line-height:1.35}
.co-one i{font:500 11.5px/1.35 var(--f-mono);font-style:normal;color:var(--muted)}
@keyframes copop{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}
@media (max-width:1039px){ .co-art .float.f1.co-onef{width:34%} }
/* phones: the frame becomes a banner and the monitor sits under it, full width */
@media (max-width:560px){
  .co-art{aspect-ratio:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
  .co-art .pframe{position:relative;inset:auto;height:150px;margin-left:10%}
  .co-hero .ph-pills{display:none}
  .co-art .float.f2.co-monf{display:block;position:relative;inset:auto;width:auto;min-width:0;margin-top:-48px;transform:none}
  .co-art .float.f1.co-onef{display:none}
}

/* ---------- the duel ---------- */
.co-intro{margin-top:-8px}
/* the section header sits on the red slab of the stripes background: the intro under it reads in near-white */
.co-dsec.has-slab .co-intro{color:rgba(255,255,255,.9)}
.co-epbar{display:flex;gap:10px;align-items:stretch;margin-bottom:16px}
.co-eps{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;scroll-margin-top:calc(var(--hdr) + 16px)}
.co-ep{position:relative;display:grid;align-content:start;gap:5px;text-align:left;padding:12px 12px 16px;background:var(--navy0);border:1px solid var(--line);cursor:pointer;overflow:hidden;transition:border-color .2s, background .2s, transform .2s}
.co-ep:hover{border-color:var(--line2);transform:translateY(-2px)}
.co-ep small{font:700 11px/1 var(--f-mono);color:var(--muted)}
.co-ep b{font:800 15.5px/1.1 var(--f-cond);text-transform:uppercase}
.co-ep span{font-size:12.5px;line-height:1.3;color:var(--muted)}
.co-ep em{min-height:13px;font:700 11.5px/1.25 var(--f-mono);font-style:normal;color:var(--live)}
.co-ep > i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--navy3)}
.co-ep > i::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(var(--p,0));transform-origin:left}
.co-ep[aria-pressed="true"]{border-color:var(--yellow);background:var(--navy2)}
.co-ep[aria-pressed="true"] b{color:var(--yellow)}
.co-auto{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;padding:0 14px;border:1px solid var(--line2);background:var(--navy0);color:var(--muted);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;cursor:pointer}
.co-auto i{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.co-auto[aria-pressed="true"]{color:var(--text);border-color:var(--yellow)}
.co-auto[aria-pressed="true"] i{width:9px;height:10px;border:0;border-left:3px solid var(--yellow);border-right:3px solid var(--yellow)}
@media (max-width:900px){
  .co-epbar{flex-direction:column}
  .co-eps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .co-ep{flex:0 0 min(78%, 260px);scroll-snap-align:start}
  .co-auto{align-self:flex-start}
}
.co-stage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){ .co-stage{grid-template-columns:minmax(0,1fr)} }
.co-trk{position:relative;display:block;width:100%;aspect-ratio:400 / 220;background:#0e1812}
.co-trk0{position:absolute;inset:0;display:grid;place-items:center;font:600 12px/1 var(--f-mono);color:var(--muted)}
.co-ev{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:10px 0 0}
.co-ev b{font:800 16px/1.2 var(--f-cond);text-transform:uppercase}
.co-ev span{font:700 13px/1 var(--f-mono);color:var(--live)}
.co-ev em{font-style:normal;font-size:13.5px;color:var(--muted)}
.co-ev b.hit{animation:copop .6s ease}
.co-watch{display:grid;gap:10px;min-width:0;padding:16px;background:var(--navy0);border:1px solid var(--line)}
.co-sw{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.co-sw > div{display:grid;gap:8px;min-width:0}
.co-sw b{font:900 italic clamp(44px,4.6vw,66px)/.9 var(--f-cond);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.co-sw b.on{color:var(--amber)}
.co-sw b.done{color:var(--text)}
.co-sw b.lead{color:var(--yellow);text-transform:uppercase}
.co-sx{flex:none;padding:6px 9px;background:var(--navy3);color:var(--muted);font:800 italic 13px/1 var(--f-cond);font-style:italic;text-transform:uppercase}
.co-sx.ff{background:var(--yellow);color:var(--on-yellow)}
.co-when{min-height:36px;font:500 12.5px/1.45 var(--f-mono);color:var(--muted)}
.co-when b{color:var(--text);font-weight:600}
.co-chart{position:relative;height:clamp(230px,22vw,270px);background:var(--navy1);border:1px solid var(--line);overflow:hidden}
.co-plot{position:absolute;left:46px;right:96px;top:16px;bottom:30px}
.co-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.co-plot .gl{stroke:var(--line);stroke-width:1}
.co-plot .zl{stroke:var(--c-red);stroke-width:2.5;stroke-dasharray:7 6}
.co-plot .wl{stroke:var(--yellow);stroke-width:2.5;stroke-dasharray:3 5;stroke-linecap:round}
.co-yl{position:absolute;left:-44px;width:38px;transform:translateY(-50%);text-align:right;font:600 11.5px/1 var(--f-mono);color:var(--muted)}
/* the live floor: our live price never goes below the feed's last price, so never into the hatched zone */
.co-flz{position:absolute;left:0;right:0;bottom:0;border-top:2px solid var(--yellow);background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--yellow) 13%, transparent) 0 2px, transparent 2px 9px);transform:scaleX(0);transform-origin:left}
.co-flzl{position:absolute;left:6px;bottom:9px;font:800 italic 11px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow);white-space:nowrap;opacity:0;transition:opacity .4s}
.co-flzl.on{opacity:1}
.co-band{position:absolute;top:0;bottom:0;opacity:0;transition:opacity .4s}
.co-band.on{opacity:1}
.co-band.ht{background:color-mix(in srgb, var(--muted) 12%, transparent)}
.co-band.shut{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--amber) 26%, transparent) 0 5px, transparent 5px 10px);border-left:1px solid var(--amber)}
.co-band.off{background:color-mix(in srgb, var(--amber) 16%, transparent);border-left:1px solid color-mix(in srgb, var(--amber) 60%, transparent)}
.co-gf{position:absolute;bottom:-26px;transform:translateX(-50%);padding:3px 5px;background:var(--live);color:var(--on-yellow);font:800 italic 11px/1 var(--f-cond);text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s}
.co-gf::after{content:"";position:absolute;left:50%;bottom:100%;height:8px;border-left:1px dashed var(--live)}
.co-gf.r{transform:translateX(-100%)} .co-gf.r::after{left:auto;right:0}
.co-gf.l{transform:none} .co-gf.l::after{left:0}
.co-gf.on{opacity:1}
.co-gf.back{background:var(--violet)} .co-gf.back::after{border-left-color:var(--violet)}
.co-np{position:absolute;left:0;right:0;bottom:-4px;height:6px;background:repeating-linear-gradient(135deg, var(--c-red) 0 4px, transparent 4px 8px);transform:scaleX(0);transform-origin:left;opacity:.9}
.co-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--navy1);opacity:0;transform:scale(.3);transition:opacity .35s, transform .45s cubic-bezier(.2,1.6,.4,1)}
.co-dot.on{opacity:1;transform:none}
.co-dot.f{background:var(--live)} .co-dot.w{background:var(--yellow)} .co-dot.b{background:var(--live);box-shadow:0 0 0 6px color-mix(in srgb, var(--live) 25%, transparent)}
.co-dl{position:absolute;transform:translate(10px,-50%);padding:2px 5px;background:color-mix(in srgb, var(--navy1) 86%, transparent);font:700 12px/1.15 var(--f-mono);white-space:nowrap;opacity:0;transition:opacity .35s}
.co-dl.on{opacity:1}
.co-dl.l{transform:translate(-12px,-50%);text-align:right}
.co-dl.l small{white-space:normal;max-width:min(170px, 34vw);margin-left:auto}
.co-dl.up{transform:translate(6px,-128%)}
.co-dl small{display:block;font:500 11.5px/1.25 var(--f-mono);color:var(--muted)}
.co-dl small i{font-style:normal;opacity:0;transition:opacity .4s}
.co-plot.back .co-dl small i{opacity:1;color:var(--yellow)}
.co-dl .co-chip{display:block;width:max-content;margin:0 0 3px auto}
.co-dl.f{color:var(--live)} .co-dl.w{color:var(--yellow)} .co-dl.b{color:var(--live)}
.co-brk{position:absolute;width:8px;border:2px solid;border-left:0;transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.co-brk.on{transform:none}
.co-brk.z{border-color:var(--c-red)} .co-brk.w{border-color:var(--yellow)}
.co-brk b{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:900 italic 16px/1 var(--f-cond);white-space:nowrap}
.co-brk b small{display:block;width:82px;margin-top:3px;font:600 11px/1.2 var(--f-mono);font-style:normal;white-space:normal;color:var(--muted)}
.co-brk.z b{color:var(--c-red)} .co-brk.w b{color:var(--yellow)}
.co-cph{position:absolute;inset:-16px 0 -30px 0;transform:translateX(0%);pointer-events:none;will-change:transform}
.co-cph::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:color-mix(in srgb, var(--text) 70%, transparent)}
/* inline chips: in test (violet), live floor (yellow) */
.co-chip{display:inline-block;padding:3px 6px;margin-right:7px;font:800 italic 11px/1.1 var(--f-cond);font-style:italic;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;vertical-align:1px}
.co-chip.t{background:var(--violet);color:var(--on-yellow)}
.co-chip.f{background:var(--yellow);color:var(--on-yellow)}
/* the values of the end of the chart, for narrow screens */
.co-end{display:none;flex-wrap:wrap;gap:6px 14px;font:500 12px/1.35 var(--f-mono);color:var(--muted);opacity:0;transition:opacity .4s}
.co-end.on{opacity:1}
.co-end span{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.co-end b{font-weight:700}
.co-end .f b{color:var(--live)} .co-end .z b{color:var(--c-red)} .co-end .w b{color:var(--yellow)}
.co-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.co-leg li{display:inline-flex;align-items:center;gap:6px}
.co-leg li::before{content:"";width:14px;height:0;border-top:3px solid}
.co-leg .f::before{width:9px;height:9px;border:0;border-radius:50%;background:var(--live)}
.co-leg .z::before{border-top:2px dashed var(--c-red)}
.co-leg .fl::before{height:9px;border-top:2px solid var(--yellow);background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--yellow) 40%, transparent) 0 2px, transparent 2px 5px)}
.co-leg .w::before{border-top:3px dotted var(--yellow)}
.co-leg .n::before{height:6px;border:0;background:repeating-linear-gradient(135deg, var(--c-red) 0 3px, transparent 3px 6px)}
.co-leg .h::before{height:10px;border:0;background:color-mix(in srgb, var(--muted) 30%, transparent)}
.co-leg .o::before{height:10px;border:0;background:color-mix(in srgb, var(--amber) 32%, transparent)}
.co-leg .r::before{height:10px;border:0;background:repeating-linear-gradient(135deg, var(--amber) 0 3px, transparent 3px 6px)}
.co-cn{margin-top:-4px;font:500 12px/1.45 var(--f-mono);color:var(--muted)}
/* phones: the duel in one strip under the stopwatch (the cards below keep the explanations and results) */
.co-mini{display:none}
.co-duel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;row-gap:16px;margin-top:16px}
@media (max-width:1100px){ .co-duel{column-gap:44px} }
@media (max-width:760px){ .co-duel{grid-template-columns:minmax(0,1fr)} }
.co-side{position:relative;display:grid;gap:12px;align-content:start;min-width:0;padding:18px;background:var(--navy0);border:1px solid var(--line)}
.co-us{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset}
.co-who{justify-self:start;padding:5px 8px;background:var(--navy3);color:var(--muted);font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase}
.co-us .co-who{background:var(--yellow);color:var(--on-yellow)}
.co-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;background:var(--navy2);border:1px solid var(--line)}
.co-ln{font-size:14.5px;font-weight:600;line-height:1.3}
.co-odd{display:grid;justify-items:center;align-content:center;gap:5px;min-width:112px;min-height:62px;padding:8px 10px;background:var(--navy3);perspective:400px;transition:box-shadow .3s}
.co-odd b{display:block;font:700 23px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.co-odd small{max-width:128px;text-align:center;font:600 10.5px/1.2 var(--f-mono);color:var(--muted)}
.co-odd.flip b{animation:coflip .5s ease}
@keyframes coflip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg);opacity:.2}100%{transform:rotateX(0);opacity:1}}
.co-odd.gone{background:repeating-linear-gradient(45deg, var(--navy3) 0 6px, var(--navy2) 6px 12px)}
.co-odd.gone b{font:800 italic 16px/1 var(--f-cond);text-transform:uppercase;color:var(--c-red)}
.co-odd.model{box-shadow:0 0 0 2px var(--yellow) inset}
.co-odd.model b{font:900 italic 19px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.co-odd.model small{color:var(--text)}
.co-odd.hold b{font:900 italic 18px/1 var(--f-cond);text-transform:uppercase;color:var(--amber)}
.co-st{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;background:var(--live);color:var(--on-yellow);font:900 italic 19px/1 var(--f-cond);text-transform:uppercase;transition:background .3s, color .3s}
.co-st i{flex:none;width:10px;height:10px;border-radius:50%;background:currentColor}
.co-st.shut{background:var(--navy3);color:var(--c-red)}
.co-st.shut i{border-radius:2px;width:12px;height:12px;background:transparent;border:2.5px solid currentColor}
.co-st.safe{background:var(--amber);color:var(--on-yellow)}
.co-st.live i{animation:blink 1s infinite}
.co-st.jolt{animation:cojolt .45s ease}
@keyframes cojolt{0%{transform:none}30%{transform:translateX(-5px)}60%{transform:translateX(4px)}100%{transform:none}}
.co-why{min-height:42px;font-size:14px;color:var(--muted)}
.co-rule{padding-left:10px;border-left:2px solid var(--yellow);font:500 12.5px/1.45 var(--f-mono);color:var(--muted)}
.co-rule b{color:var(--text)}
/* results: row 1 = what each platform did (live), row 2 = the price comparison, each number with its own label */
.co-res{position:relative;display:grid;gap:10px;align-content:start;min-height:68px;padding:12px 14px;background:var(--navy1);border:1px solid var(--line);overflow:hidden}
.co-r1{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.co-r1 b{font:900 italic 42px/1 var(--f-cond);font-variant-numeric:tabular-nums;white-space:nowrap}
.co-r1 b small{margin-left:7px;font-size:15px;color:var(--muted);text-transform:uppercase}
.co-r1 > span{flex:1 1 180px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.co-them .co-r1 b{color:var(--c-red)} .co-us .co-r1 b{color:var(--yellow)}
.co-res.shut .co-r1 b{color:var(--amber)}
.co-r2{padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--muted)}
.co-r2:empty{display:none}
.co-r2 b{font:900 italic 19px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.co-them .co-r2 b{color:var(--c-red)} .co-us .co-r2 b{color:var(--yellow)}
.co-r2 .co-chip + .co-chip{margin-left:4px}
.co-res.wait{align-items:center;border-style:dashed;background:transparent}
.co-res.wait b{display:none}
.co-res.wait .co-r1 > span{color:var(--muted);font:500 12.5px/1.4 var(--f-mono)}
.co-res.wait::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:2px;background:linear-gradient(90deg, transparent, var(--yellow), transparent);animation:coscan 1.8s linear infinite;animation-play-state:paused}
.co-them .co-res.wait::after{background:linear-gradient(90deg, transparent, var(--c-red), transparent)}
.co-dsec.run .co-res.wait::after{animation-play-state:running}
@keyframes coscan{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.co-res.on{animation:coin .55s cubic-bezier(.2,.8,.2,1)}
@keyframes coin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.co-vs{position:absolute;left:50%;top:50%;z-index:2;padding:8px 12px;background:var(--red);font:900 italic 20px/1 var(--f-cond);transform:translate(-50%,-50%) skewX(-12deg);box-shadow:0 10px 30px -10px var(--red)}
@media (max-width:760px){
  .co-vs{display:none}
  .co-mini{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:stretch}
  .co-mln{grid-column:1 / -1;font:600 13px/1.3 var(--f-body);color:var(--text)}
  .co-ms{display:grid;gap:5px;align-content:start;min-width:0;padding:7px;background:var(--navy1);border:1px solid var(--line)}
  .co-ms.b{border-color:var(--yellow)}
  .co-mwho{font:800 italic 11px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
  .co-ms.b .co-mwho{color:var(--yellow)}
  .co-ms .co-odd{min-width:0;min-height:44px;padding:5px 6px;gap:3px}
  .co-ms .co-odd b{font-size:17px}
  .co-ms .co-odd.gone b,.co-ms .co-odd.model b,.co-ms .co-odd.hold b{font-size:15px}
  .co-ms .co-odd small{font-size:10.5px;max-width:none}
  .co-ms .co-st{min-height:32px;padding:0 8px;gap:6px;font-size:12.5px;line-height:1.05}
  .co-ms .co-st i{width:8px;height:8px}
  .co-mvsb{align-self:center;padding:5px 7px;background:var(--red);font:900 italic 13px/1 var(--f-cond);transform:skewX(-12deg)}
  /* the cards keep the explanations and results; their price box and status stay for screen readers */
  .co-side .co-pr,.co-side .co-st{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* a wider chart: the values of its end move under it */
  .co-plot{left:40px;right:14px}
  .co-yl{left:-38px;width:32px}
  .co-plot .co-dl.w,.co-plot .co-dl.b,.co-brk b{display:none}
  .co-end{display:flex}
  .co-r1 b{font-size:36px}
}
.co-srcl{margin-top:14px;font:500 12.5px/1.55 var(--f-mono);color:var(--muted);max-width:120ch}
.co-all{margin-top:16px;background:var(--navy0);border:1px solid var(--line);border-left:4px solid var(--red)}
.co-all[open]{border-left-color:var(--yellow)}
.co-all summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;cursor:pointer;list-style:none;font:800 17px/1.2 var(--f-cond);text-transform:uppercase}
.co-all summary::-webkit-details-marker{display:none}
.co-all summary::after{content:"+";flex:none;font:900 24px/1 var(--f-cond);color:var(--yellow);transition:transform .25s}
.co-all[open] summary::after{transform:rotate(45deg)}
.co-tw{overflow-x:auto;border-top:1px solid var(--line)}
.co-tbl{width:100%;min-width:980px;border-collapse:collapse;font-size:13.5px}
.co-tbl th{padding:10px 12px;text-align:left;vertical-align:bottom;background:var(--navy2);color:var(--muted);font:800 italic 12px/1.2 var(--f-cond);text-transform:uppercase}
.co-tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
.co-tbl td.n,.co-tbl th.n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.co-tbl th .co-chip{display:block;width:max-content;margin:0 0 5px auto;font-family:var(--f-cond)}
.co-tbl td.zz{color:var(--c-red)} .co-tbl td.ww{color:var(--yellow)} .co-tbl td.fb{color:var(--yellow);font-weight:600}
.co-tbl tr.co-fr td:first-child{box-shadow:inset 3px 0 0 var(--yellow)}
.co-tbl button{height:32px;padding:0 10px;border:1px solid var(--yellow);background:transparent;color:var(--yellow);font:800 italic 12px/1 var(--f-cond);text-transform:uppercase;cursor:pointer;white-space:nowrap}
.co-tnote{padding:12px 18px 16px;color:var(--muted)}

/* ---------- proof band ---------- */
.co-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){ .co-proof{grid-template-columns:minmax(0,1fr)} }
.co-pt{position:relative;display:grid;gap:12px;align-content:start;padding:22px;background:var(--navy1);border:1px solid var(--line);border-top:4px solid var(--red);overflow:hidden}
.co-p3{border-top-color:var(--violet)}
.co-big{display:block;font:900 italic clamp(42px,4.4vw,62px)/1 var(--f-cond);color:var(--yellow);font-variant-numeric:tabular-nums}
.co-big small{margin:0 8px;font-size:.42em;color:var(--muted)}
.co-pt > p{font-size:15px;color:var(--muted)}
.co-pt > p strong{color:var(--text)}
.co-pt > p.co-src,.co-src{font:500 12px/1.5 var(--f-mono);color:var(--muted)}
.co-waf{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:2px}
.co-waf i{aspect-ratio:1;background:var(--navy3);transform:scale(.55);transition:transform .35s ease, background .35s ease}
.co-waf.go i{transform:none}
.co-waf.go i.on{background:var(--yellow)}
/* the pulls of the duel's match on its clock: a sweep plays them, each bar lights up as it passes */
.co-pulls{position:relative;height:46px;overflow:hidden;border-bottom:1px solid var(--line2)}
.co-pulls i{position:absolute;bottom:0;width:2px;margin-left:-1px;background:var(--live);opacity:.85;transform-origin:bottom;animation:copflash 7s linear infinite;animation-delay:calc(var(--x, 0) * 7s - 7s);animation-play-state:paused}
.co-pulls::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;border-left:2px solid var(--yellow);transform:translateX(0);animation:cosweep 7s linear infinite;animation-play-state:paused}
.co-proof.run .co-pulls i,.co-proof.run .co-pulls::after{animation-play-state:running}
@keyframes copflash{0%{background:var(--amber);opacity:1;transform:scaleY(1.12)}7%,100%{background:var(--live);opacity:.85;transform:none}}
@keyframes cosweep{to{transform:translateX(100%)}}
.co-pt > p.co-pcap{margin-top:-4px;font:500 11.5px/1.45 var(--f-mono);color:var(--muted)}
.co-test{justify-self:start;padding:6px 9px;background:var(--violet);color:var(--on-yellow);font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase}
.co-bars2{display:grid;gap:12px;margin-top:4px}
.co-bars2 div{display:grid;grid-template-columns:132px minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.co-bars2 i{height:16px;background:var(--navy3);overflow:hidden}
.co-bars2 u{display:block;height:100%;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.co-bars2 .w u{background:var(--yellow)} .co-bars2 .z u{background:var(--c-red)}
.co-bars2 b{text-align:right;font:900 italic 24px/1 var(--f-cond);color:var(--text)}
.co-bars2 b small{font-size:12px;color:var(--muted);margin-left:2px}
@media (max-width:420px){ .co-bars2 div{grid-template-columns:104px minmax(0,1fr) 50px} }

/* ---------- pricer ---------- */
.co-cst{font-style:italic}
.co-cst.p{color:var(--yellow)} .co-cst.a{color:var(--amber)} .co-cst.s{color:var(--muted)}
.co-gauge{height:12px;background:var(--navy3);overflow:hidden}
.co-gauge i{display:block;height:100%;background:linear-gradient(90deg, var(--red), var(--yellow));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.co-pchart{position:relative}
.co-leg2{margin-top:-8px}
.co-leg2 .w::before{border-top:3px solid var(--yellow)}
.co-leg2 .f2::before{border-top:2px dashed var(--muted)}
.co-leg2 .a::before{height:10px;border:0;background:color-mix(in srgb, var(--amber) 35%, transparent)}
.huge.dim{color:var(--muted)}

/* ---------- partial cash-out ticket ---------- */
.co-tick{position:relative;display:grid;grid-template-columns:max(var(--cut,50%), 7.6rem) minmax(0,1fr);min-height:132px;transition:grid-template-columns .5s cubic-bezier(.2,.8,.2,1)}
.co-tp,.co-tr{position:relative;display:grid;align-content:center;gap:5px;min-width:0;padding:14px 16px;overflow:hidden}
.co-tp{background:var(--yellow);color:var(--on-yellow);z-index:1}
.co-tr{background:var(--navy2);border:1px solid var(--line2);border-left:0}
.co-tick small{font:800 italic 12px/1.15 var(--f-cond);text-transform:uppercase}
.co-tick b{font:900 italic clamp(26px,2.6vw,36px)/1 var(--f-cond);font-variant-numeric:tabular-nums}
.co-tick span{font-size:12.5px;line-height:1.3}
.co-tr span,.co-tr small{color:var(--muted)}
.co-perf{position:absolute;top:-8px;bottom:-8px;left:max(var(--cut,50%), 7.6rem);z-index:2;border-left:2px dashed var(--text);transition:left .5s cubic-bezier(.2,.8,.2,1)}
.co-perf::before{content:"";position:absolute;left:-7px;top:-2px;width:12px;height:12px;border-radius:50%;background:var(--navy1)}
.co-stamp{position:absolute;right:8px;bottom:10px;padding:4px 7px;border:2px solid var(--on-yellow);font:900 italic 13px/1 var(--f-cond);text-transform:uppercase;font-style:italic;opacity:0;transform:rotate(-10deg) scale(1.8)}
.co-tick.sep .co-tp{transform:translate(-4px,-5px) rotate(-1deg);box-shadow:0 18px 30px -18px var(--shade)}
.co-tick.sep .co-stamp{opacity:1;transform:rotate(-10deg)}
.co-tick.tear .co-tp{animation:cotear .7s cubic-bezier(.2,.8,.2,1)}
.co-tick.tear .co-stamp{animation:costamp .55s .2s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cotear{0%{transform:none}45%{transform:translate(-9px,-12px) rotate(-2.5deg)}100%{transform:translate(-4px,-5px) rotate(-1deg)}}
@keyframes costamp{from{opacity:0;transform:rotate(-10deg) scale(1.8)}to{opacity:1;transform:rotate(-10deg)}}
.co-tick.full .co-tr,.co-tick.full .co-perf{display:none}
.co-tick.full{grid-template-columns:100% 0}
.co-tick.off .co-tp{background:var(--navy3);color:var(--muted)}
.co-tick.off .co-stamp{display:none}
@media (max-width:560px){ .co-tp,.co-tr{padding:12px 10px} }

/* ---------- rules ---------- */
.co-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1100px){ .co-rules{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .co-rules{grid-template-columns:minmax(0,1fr)} }
.co-r{display:grid;gap:8px;align-content:start;padding:20px;background:var(--navy1);border:1px solid var(--line);border-top:3px solid var(--red)}
.co-r h3{font-size:20px;font-style:italic;line-height:1.1}
.co-r p{font-size:14.5px;color:var(--muted)}
.co-r .tag{justify-self:start;padding:5px 8px;background:var(--navy3);color:var(--yellow);font:800 italic 12px/1 var(--f-cond);text-transform:uppercase}
.co-ri{position:relative;display:block;width:60px;height:42px;margin-bottom:4px}
.co-ri u,.co-ri s{position:absolute;display:block;text-decoration:none}
.co-ri *{animation-play-state:paused!important}
.co-rules.run .co-ri *{animation-play-state:running!important}
.ri-floor u{left:2px;right:2px;bottom:6px;height:3px;background:var(--yellow)}
.ri-floor s{left:24px;bottom:9px;width:12px;height:12px;border-radius:50%;background:var(--live);animation:cobounce 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes cobounce{0%,100%{transform:translateY(-24px)}50%{transform:translateY(0) scaleY(.8)}}
.ri-end u{left:10px;top:1px;width:40px;height:40px;border-radius:50%;background:conic-gradient(var(--amber) 0 48deg, var(--navy3) 48deg 360deg);-webkit-mask:radial-gradient(circle, transparent 13px, #000 14px);mask:radial-gradient(circle, transparent 13px, #000 14px)}
.ri-end s{left:29px;top:5px;width:2px;height:16px;background:var(--text);transform-origin:50% 100%;animation:cospin 3.2s linear infinite}
@keyframes cospin{to{transform:rotate(360deg)}}
.ri-susp u{left:18px;top:18px;width:24px;height:20px;background:var(--amber);border-radius:3px;animation:copulse 1.6s ease-in-out infinite}
.ri-susp s{left:22px;top:4px;width:16px;height:18px;border:3px solid var(--amber);border-bottom:0;border-radius:9px 9px 0 0}
@keyframes copulse{0%,100%{transform:none}50%{transform:scale(1.08)}}
.ri-e u{left:6px;top:10px;width:48px;height:24px;border:3px solid var(--violet);border-radius:12px}
.ri-e s{left:37px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--live);animation:blink 1s steps(2) infinite}
.ri-check u,.ri-check s{top:12px;width:20px;height:11px;border-left:4px solid var(--live);border-bottom:4px solid var(--live);transform:rotate(-45deg) scale(0);animation:cocheck 2.4s ease infinite}
.ri-check u{left:4px} .ri-check s{left:30px;animation-delay:.5s}
@keyframes cocheck{0%,8%{transform:rotate(-45deg) scale(0);opacity:0}20%,80%{transform:rotate(-45deg) scale(1);opacity:1}100%{transform:rotate(-45deg) scale(1);opacity:0}}
.ri-ladder u{left:4px;bottom:4px;width:14px;height:10px;background:var(--line2);box-shadow:18px -10px 0 var(--line2), 36px -20px 0 var(--line2)}
.ri-ladder s{left:7px;bottom:15px;width:9px;height:9px;border-radius:50%;background:var(--yellow);animation:costep 2.4s ease-in-out infinite}
@keyframes costep{0%,20%{transform:none}40%,60%{transform:translate(18px,-10px)}80%,100%{transform:translate(36px,-20px)}}
.ri-split u{left:4px;top:10px;width:26px;height:22px;background:var(--yellow);animation:cosplit 2.2s ease-in-out infinite}
.ri-split s{left:30px;top:10px;width:26px;height:22px;background:var(--line2);border-left:2px dashed var(--navy1)}
@keyframes cosplit{0%,25%,100%{transform:none}50%,75%{transform:translate(-4px,-6px) rotate(-6deg)}}
.ri-switch u{left:6px;top:11px;width:46px;height:22px;border-radius:11px;background:var(--navy3);border:2px solid var(--line2)}
.ri-switch s{left:10px;top:15px;width:18px;height:18px;border-radius:50%;background:var(--c-red);animation:coknob 2.6s ease-in-out infinite}
@keyframes coknob{0%,35%{transform:none}50%,85%{transform:translateX(20px)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){ .co-ri *{animation:none!important} .co-waf i{transition:none} .co-pulls i,.co-pulls::after{animation:none!important} .co-flz{transition:none} }

/* Live demo: the match-day control room (pages/live.html, js/live.js). Everything moves with transform and opacity;
   status colours: up = live green, down = red, pulled or suspended = amber, VAR and taken back = violet. */

/* compact hero: on a desktop screen the room's bar and scoreboard are in the first view */
.lv-hero{padding-block:clamp(26px,3vw,40px) clamp(28px,3.2vw,44px)}
.lv-hero .ph-lead b{color:var(--text);font-weight:600}
.lv-hero .ph-pills b{color:var(--text);font-weight:700}
.lv-hero .ph-copy{gap:16px}
@media (min-width:900px){
  .lv-hero{padding-block:40px clamp(18px,1.6vw,26px)}  /* the top clears the floodlight lamps of the background */
  .lv-hero .ph-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
  .lv-hero .ph-copy{gap:13px}
  .lv-hero h1{font-size:clamp(36px,3.6vw,54px)}
  .lv-hero .ph-lead{font-size:clamp(15.5px,1.12vw,17px);line-height:1.5;max-width:62ch}
  .lv-hero .ph-art{min-height:clamp(240px,23vw,330px);aspect-ratio:auto}
  .lv-hero .btn{height:48px;padding:0 22px}
}
.lv-src{margin-top:-3px}
/* the hero score card follows the same player; it grows with its text and never spills its time or digits */
.lv-hero .float.f1{left:0;bottom:4%;width:auto;min-width:40%;max-width:60%;z-index:2}
.lv-mini{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 14px 12px;background:color-mix(in srgb, var(--navy0) 90%, transparent);border:1px solid var(--line2);border-top:3px solid var(--yellow);box-shadow:0 34px 70px -26px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lv-mini-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;min-width:0;font:800 italic 12px/1.1 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.lv-mini-h i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.lv-mini.on .lv-mini-h i{background:var(--red);animation:blink 1s infinite}
.lv-mini-h em{flex-basis:100%;font:600 11.5px/1.2 var(--f-mono);font-style:normal;color:var(--yellow);font-variant-numeric:tabular-nums}
.lv-mini-r{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.lv-mini-r b{flex:1 1 auto;min-width:0;font:700 14px/1.15 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-mini-r strong{flex:none;font:900 italic 26px/1 var(--f-cond);min-width:1ch;text-align:right}
.lv-mini-e{padding-top:7px;border-top:1px solid var(--line);font:500 11.5px/1.35 var(--f-mono);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){ .lv-hero .float.f1{min-width:58%;max-width:76%;bottom:3%} .lv-mini{padding:9px 10px;gap:5px} .lv-mini-h{font-size:10.5px;letter-spacing:.02em} .lv-mini-h em{font-size:10px} .lv-mini-r b{font-size:12.5px} .lv-mini-r strong{font-size:20px} .lv-mini-e{font-size:10.5px} }

/* the room */
main > .sec.lv-sec{padding-top:clamp(18px,2vw,28px)}
.lv-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-bottom:12px}
.lv-cap h2{font:800 italic 16px/1 var(--f-cond);font-stretch:88%;letter-spacing:.05em;color:var(--yellow);max-width:none}
.lv-cap span{font:600 12.5px/1.3 var(--f-mono);color:var(--muted)}
.lv-room{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--navy1);border:1px solid var(--line);box-shadow:0 60px 120px -60px rgba(0,0,0,.95), 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent)}
.lv-room::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.lv-glow{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(55% 45% at 32% 18%, color-mix(in srgb, var(--live) 30%, transparent), transparent 72%)}
.lv-glow.v{background:radial-gradient(55% 45% at 32% 18%, color-mix(in srgb, var(--violet) 36%, transparent), transparent 72%)}

/* the score strip: sticks under the site header once the scoreboard has scrolled away, so the coupon and the
   operator view still show the score and the clock */
.lv-stk{position:sticky;top:var(--hdr);z-index:9;height:0}
.lv-stk-in{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;background:color-mix(in srgb, #070B12 94%, transparent);border-bottom:2px solid var(--yellow);box-shadow:0 14px 30px -16px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(-110%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s;pointer-events:none}
.lv-stk.on .lv-stk-in{transform:none;opacity:1}
.lv-stk-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.lv-room.on .lv-stk-dot{background:var(--red);animation:blink 1s infinite}
.lv-stk-in > b{font:800 15px/1 var(--f-cond);font-stretch:88%;letter-spacing:.04em}
.lv-stk-s{display:inline-flex;gap:5px;padding:4px 8px;background:var(--navy0);border:1px solid var(--line2);font:900 italic 18px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.lv-stk-in > em{flex:none;font:900 italic 17px/1 var(--f-cond);font-style:italic;color:var(--yellow);font-variant-numeric:tabular-nums}
.lv-stk-e{min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* top bar */
.lv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;background:#070B12;border-bottom:1px solid var(--line)}
.lv-rec{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 14px;background:var(--navy3);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.08em;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background .3s}
.lv-rec i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.lv-rec.on{background:var(--red)}
.lv-rec.on i{background:#FFFFFF;animation:blink 1s infinite}
.lv-bar-m{font:800 18px/1.1 var(--f-cond);font-stretch:88%;text-transform:uppercase}
.lv-bar-l{font-size:13.5px;color:var(--muted)}
.lv-bar-r{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.lv-utc{font:700 16px/1 var(--f-mono);color:var(--yellow);font-variant-numeric:tabular-nums}
.lv-utc::after{content:" UTC";font-size:11px;color:var(--muted)}
.lv-x{font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;padding:6px 8px;background:var(--navy2);border:1px solid var(--line2);color:var(--muted)}
@media (max-width:640px){ .lv-bar{padding:10px 12px;gap:8px 10px} .lv-bar-m{order:3;flex-basis:100%;font-size:16px} .lv-bar-l{display:none} }

/* main grid: score and prices side by side down to 900 px */
.lv-main{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.lv-left{display:grid;gap:12px;align-content:start;padding:14px;border-right:1px solid var(--line);min-width:0}
.lv-odds{display:grid;gap:11px;align-content:start;padding:14px;min-width:0;container-type:inline-size}
@media (max-width:1099px){ .lv-main{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
@media (max-width:899px){ .lv-main{grid-template-columns:minmax(0,1fr)} .lv-left{border-right:0;border-bottom:1px solid var(--line)} }
@media (max-width:560px){ .lv-left,.lv-odds{padding:10px} }

/* scoreboard */
.lv-sb{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 14px;padding:14px 16px 12px;background:linear-gradient(180deg, var(--navy2), var(--navy1));border:1px solid var(--line2)}
.lv-tm{display:flex;align-items:center;gap:12px;min-width:0}
.lv-tm.a{justify-content:flex-end;text-align:right}
.lv-tm > span{display:grid;gap:5px;min-width:0}
.lv-tm small{font:800 italic 11.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.lv-tm b{font:800 clamp(17px,1.9vw,27px)/1 var(--f-cond);font-stretch:88%;text-transform:uppercase;overflow-wrap:anywhere}
.lv-kit{flex:none;width:14px;height:54px;background:var(--kit,#FFFFFF);transform:skewX(-14deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 22px -6px var(--kit,#FFFFFF)}
.lv-sc{position:relative;display:flex;align-items:center;gap:6px;perspective:420px}
.lv-d{display:grid;place-items:center;min-width:66px;height:78px;padding:0 8px;background:#070B12;border:1px solid var(--line2);font:900 italic 62px/1 var(--f-cond);transition:color .4s, border-color .4s, background .4s, box-shadow .4s;will-change:transform}
.lv-d.g{color:var(--live);border-color:var(--live);box-shadow:0 0 30px -6px var(--live)}
.lv-d.v{color:var(--violet);border-color:var(--violet);background:color-mix(in srgb, var(--violet) 16%, #070B12);box-shadow:0 0 30px -6px var(--violet)}
.lv-colon{font:900 italic 40px/1 var(--f-cond);color:var(--dim)}
/* "Taken back": a small tag on the top edge of the corrected digit, the new score stays readable under it */
.lv-stamp{position:absolute;left:50%;top:-10px;z-index:4;padding:3px 7px;border:2px solid var(--violet);color:var(--violet);font:900 italic 12px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:#070B12;box-shadow:0 8px 18px -8px rgba(0,0,0,.9);transform:translateX(-50%) rotate(-6deg);opacity:0;pointer-events:none}
.lv-meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;padding-top:11px;border-top:1px solid var(--line)}
.lv-clk{display:inline-flex;align-items:center;gap:9px;min-width:3.6ch;font:900 italic 28px/1 var(--f-cond);color:var(--yellow);font-variant-numeric:tabular-nums}
.lv-clk::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--dim)}
.lv-room.on .lv-clk::before{background:var(--red);animation:blink 1s infinite}
.lv-ph{font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;padding:6px 9px;background:var(--navy3);color:var(--muted)}
.lv-ph.ht{background:var(--amber);color:var(--on-yellow)}
.lv-ph.ft{background:var(--yellow);color:var(--on-yellow)}
.lv-ev{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;color:var(--text)}
.lv-ev i{flex:none;width:10px;height:14px;transform:skewX(-14deg);background:var(--dim);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.lv-ban{position:absolute;left:-4%;right:-4%;top:14px;z-index:3;display:flex;align-items:center;justify-content:center;gap:16px;height:78px;background:var(--yellow);color:var(--on-yellow);transform:translateX(-112%) skewX(-12deg);pointer-events:none;box-shadow:0 20px 40px -18px rgba(0,0,0,.8)}
.lv-ban b{font:900 italic 46px/1 var(--f-cond);font-stretch:88%;text-transform:uppercase;transform:skewX(12deg);white-space:nowrap}
.lv-ban span{font:800 italic 16px/1.15 var(--f-cond);text-transform:uppercase;transform:skewX(12deg);max-width:44%}
.lv-ban.v{background:var(--violet)}
.lv-ban.w{background:#FFFFFF}
.lv-ban.y{background:var(--yellow)}
@media (max-width:560px){
  .lv-sb{gap:8px;padding:12px 10px 10px}
  .lv-tm{gap:8px}
  .lv-tm b{font-size:15px}
  .lv-kit{width:9px;height:40px}
  .lv-d{min-width:44px;height:56px;font-size:42px;padding:0 4px}
  .lv-colon{font-size:28px}
  .lv-stamp{top:-9px;padding:2px 5px;font-size:10.5px;border-width:1.5px}
  .lv-clk{font-size:23px}
  .lv-ev{font-size:13px;flex-basis:100%;justify-content:center}
  .lv-ban{left:-6%;right:-6%;flex-direction:column;gap:4px;height:70px;top:8px}
  .lv-ban b{font-size:25px}
  .lv-ban span{max-width:70%;font-size:11px;line-height:1.15;text-align:center}
}

/* the real tracker */
.lv-trk{position:relative;border:1px solid var(--line2);background:#0e1812;overflow:hidden;container-type:inline-size}
.lv-trk-host{display:block;width:100%;aspect-ratio:400 / 220;background:#0e1812}
.lv-trk-tag{position:absolute;right:8px;top:8px;z-index:2;display:grid;gap:3px;justify-items:end;font:800 italic 11px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;padding:5px 7px;background:rgba(0,0,0,.66);color:var(--text);pointer-events:none;text-align:right}
.lv-trk-tag small{font:500 10.5px/1.1 var(--f-mono);text-transform:none;letter-spacing:0;color:var(--muted)}
/* a narrow tracker (phones, small laptops): the caption leaves the picture, where the tracker's own score box and
   cards sit in the corners, and runs under it */
@container (max-width:600px){ .lv-trk-tag{position:static;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:3px 10px;padding:6px 8px;background:#070B12;border-top:1px solid var(--line2);font-size:10.5px;text-align:left} .lv-trk-tag small{font-size:10px} }

/* timeline */
.lv-tl{display:grid;gap:10px;padding:12px 14px 14px;background:var(--navy0);border:1px solid var(--line);min-width:0}
.lv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lv-pp{display:grid;place-items:center;width:50px;height:42px;border:0;background:var(--yellow);color:var(--on-yellow);cursor:pointer;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);transition:filter .2s}
.lv-pp:hover{filter:brightness(1.08)}
.lv-pp:focus-visible{clip-path:none;outline-offset:2px}
.lv-pp i{display:block;width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.lv-pp[aria-pressed="true"] i{width:12px;height:15px;border:0;margin:0;background:linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px)}
.lv-spd{display:flex;gap:4px}
.lv-spd button{height:42px;min-width:48px;padding:0 10px;border:1px solid var(--line2);background:var(--navy2);color:var(--muted);font:800 italic 15px/1 var(--f-cond);cursor:pointer;transition:background .2s, color .2s, border-color .2s}
.lv-spd button:hover{color:var(--text)}
.lv-spd button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.lv-now{margin-left:auto;font:600 13px/1.2 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.lv-track{position:relative;height:86px;margin-top:22px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.lv-tl.lv-tl2 .lv-track{margin-top:34px}
.lv-track:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.lv-zones{position:absolute;left:0;right:0;top:24px;bottom:16px;background:color-mix(in srgb, var(--navy2) 60%, transparent)}
.lv-zones i{position:absolute;top:0;bottom:0}
.lv-zones i.pre{background:color-mix(in srgb, var(--navy3) 55%, transparent)}
.lv-zones i.ht{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--amber) 16%, transparent) 0 4px, transparent 4px 9px);border-inline:1px solid var(--line2)}
.lv-zones i.hold{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--yellow) 34%, transparent) 0 3px, transparent 3px 7px);border-left:1px solid var(--yellow)}
.lv-hist{position:absolute;left:0;top:30px;width:100%;height:38px;display:block;fill:color-mix(in srgb, var(--muted) 32%, transparent)}
.lv-hist.on{fill:var(--yellow);opacity:.85}
.lv-rev{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform:translateX(-100%);will-change:transform}
.lv-rev-in{position:absolute;inset:0;transform:translateX(100%);will-change:transform}
.lv-pticks{position:absolute;left:0;bottom:0;width:100%;height:14px;display:block;stroke:var(--amber);stroke-width:1.2px;opacity:.85;overflow:visible}
.lv-mks{position:absolute;inset:0;pointer-events:none}
.lv-mk{position:absolute;top:0;width:0;height:100%}
.lv-mk i,.lv-mk s{position:absolute;left:-6px;top:6px;width:12px;height:12px;border-radius:50%}
.lv-mk i{background:var(--live);box-shadow:0 0 0 2px var(--navy0)}
.lv-mk s{border:2px solid var(--live);opacity:0;text-decoration:none}
.lv-mk.x i{background:var(--navy0);box-shadow:inset 0 0 0 2px var(--violet), 0 0 0 2px var(--navy0)}
.lv-mk.x s{border-color:var(--violet)}
.lv-mk.b i{top:auto;bottom:20px;left:-5px;width:10px;height:10px;border-radius:0;background:var(--violet);transform:rotate(45deg)}
.lv-mk.b s{top:auto;bottom:18px;border-color:var(--violet)}
/* marker minutes sit above the playhead's triangle, so the head never covers them */
.lv-mk b{position:absolute;left:0;top:-21px;transform:translateX(-50%);font:600 10.5px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.lv-mk.r2 b{top:-33px}
.lv-mk.r2 b::after{content:"";position:absolute;left:50%;top:12px;width:1px;height:9px;background:var(--line2)}
.lv-head{position:absolute;inset:0;pointer-events:none;transform:translateX(0);will-change:transform}
.lv-head i{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--yellow);box-shadow:0 0 14px var(--yellow)}
.lv-head i::before{content:"";position:absolute;left:-6px;top:-9px;width:14px;height:10px;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%)}
.lv-hov{position:absolute;left:0;top:-46px;z-index:3;pointer-events:none;opacity:0;transition:opacity .15s;will-change:transform}
.lv-hov span{display:block;transform:translateX(-50%);white-space:nowrap;padding:6px 9px;background:var(--navy3);border:1px solid var(--line2);font:600 11.5px/1.2 var(--f-mono);color:var(--text);box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
@media (hover:hover){ .lv-track:hover .lv-hov{opacity:1} }
.lv-track.drag .lv-hov{opacity:1}
.lv-axis{position:relative;height:14px;margin-top:-2px;font:600 10.5px/1 var(--f-mono);color:var(--muted)}
.lv-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.lv-axis span.l{transform:none}
.lv-axis span.r{transform:translateX(-100%)}
@media (max-width:419px){ .lv-axis span.m{display:none} }
/* timeline legend */
.lv-tleg{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:12px;line-height:1.3;color:var(--muted)}
.lv-tleg span{display:inline-flex;align-items:center;gap:6px}
.lv-tleg i{flex:none;position:relative;width:12px;height:12px}
.lv-tleg i.h{background:linear-gradient(90deg, color-mix(in srgb, var(--muted) 50%, transparent) 0 3px, transparent 3px 4.5px, color-mix(in srgb, var(--muted) 50%, transparent) 4.5px 7.5px, transparent 7.5px 9px, color-mix(in srgb, var(--muted) 50%, transparent) 9px 12px);clip-path:polygon(0 50%,25% 50%,25% 20%,62% 20%,62% 0,75% 0,75% 35%,100% 35%,100% 100%,0 100%)}
.lv-tleg i.p{width:2px;margin-inline:5px;background:var(--amber)}
.lv-tleg i.g{border-radius:50%;background:var(--live)}
.lv-tleg i.x{border-radius:50%;box-shadow:inset 0 0 0 2px var(--violet)}
.lv-tleg i.b{width:9px;height:9px;margin:1.5px;background:var(--violet);transform:rotate(45deg)}
.lv-jump{display:grid;gap:8px;margin-top:2px;min-width:0}
.lv-jl{font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.lv-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.lv-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 9px;border:1px solid var(--line2);background:var(--navy2);color:var(--muted);font:500 12.5px/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:border-color .2s, color .2s, background .2s}
.lv-chip i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live)}
.lv-chip.v i{background:var(--violet)} .lv-chip.w i{background:#FFFFFF} .lv-chip.y i{background:var(--yellow)}
.lv-chip b{font:800 italic 14px/1 var(--f-cond);color:var(--text)}
.lv-chip:hover{border-color:var(--yellow);color:var(--text)}
.lv-chip.done{color:var(--text)}
.lv-chip.now{border-color:var(--yellow);background:color-mix(in srgb, var(--yellow) 12%, var(--navy2));color:var(--text);box-shadow:inset 0 -2px 0 var(--yellow)}
@media (max-width:760px){
  .lv-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .lv-now{flex-basis:100%;margin-left:0;text-align:left}
  .lv-mk b{display:none}
  .lv-track{margin-top:8px}
  .lv-tleg{font-size:11.5px;gap:4px 10px}
}

/* odds board */
.lv-oh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lv-oh > b{font:800 italic 19px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.02em}
.lv-real,.lv-sim{display:inline-flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid;font:700 10.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lv-real{color:var(--live);border-color:color-mix(in srgb, var(--live) 45%, transparent)}
.lv-real i{width:6px;height:6px;border-radius:50%;background:var(--live)}
.lv-sim{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 50%, transparent);white-space:normal;text-align:right;line-height:1.25}
.lv-feed{position:relative;display:grid;gap:7px;padding:10px 12px;background:var(--navy0);border:1px solid var(--line);transition:border-color .3s}
.lv-feed-fl{position:absolute;inset:-1px;opacity:0;pointer-events:none;box-shadow:inset 0 0 0 2px var(--amber), inset 0 0 26px color-mix(in srgb, var(--amber) 35%, transparent);text-decoration:none}
.lv-feed-t{display:flex;justify-content:space-between;gap:10px;font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.lv-feed-t b{font:700 12.5px/1 var(--f-mono);font-style:normal;text-transform:none;color:var(--text);white-space:nowrap}
.lv-feed-bar{position:relative;height:10px;overflow:hidden;background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--amber) 42%, transparent) 0 3px, color-mix(in srgb, var(--amber) 12%, transparent) 3px 7px)}
.lv-feed-bar i{position:absolute;inset:0;background:var(--live);transform-origin:left;transform:scaleX(0);transition:transform .35s ease}
.lv-feed.away{border-color:var(--amber)}
.lv-feed.away .lv-feed-t span{color:var(--amber)}
.lv-cnt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--navy0);border:1px solid var(--line)}
.lv-cnt div{display:grid;gap:4px;padding:10px 10px 9px;border-left:1px solid var(--line);min-width:0}
.lv-cnt div:first-child{border-left:0}
.lv-cnt b{justify-self:start;font:900 italic 24px/1 var(--f-cond);color:var(--yellow);font-variant-numeric:tabular-nums;transform-origin:left center}
.lv-cnt .v b{color:var(--violet)}
.lv-cnt span{font-size:11.5px;line-height:1.2;color:var(--muted)}
.lv-mkts{display:grid;gap:9px}
.lv-m{display:grid;gap:5px}
.lv-mh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.lv-mh b{font:800 13.5px/1.1 var(--f-cond);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.lv-mh small{font:500 11px/1.2 var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lv-r{display:grid;grid-template-columns:46px repeat(var(--n,3),minmax(0,1fr));gap:4px}
.lv-r.nl{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.lv-ln{display:grid;place-items:center;font:700 12px/1 var(--f-mono);background:var(--navy3);color:var(--yellow)}
.lv-c{position:relative;display:flex;justify-content:space-between;align-items:center;gap:6px;height:36px;padding:0 9px;background:var(--navy2);border:1px solid var(--line);overflow:hidden;transition:border-color .25s}
.lv-c > i{min-width:0;font:600 11.5px/1 var(--f-body);font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.lv-c > b{position:relative;display:inline-flex;align-items:center;gap:5px;font:700 14.5px/1 var(--f-mono);font-variant-numeric:tabular-nums;transition:color .3s, opacity .3s}
.lv-c[data-d="1"] > b::before,.lv-c[data-d="-1"] > b::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
.lv-c[data-d="1"] > b::before{border-bottom:6px solid var(--live)}
.lv-c[data-d="-1"] > b::before{border-top:6px solid var(--c-red)}
.lv-c > u{position:absolute;inset:0;opacity:0;pointer-events:none;text-decoration:none}
.lv-c > u.up{background:color-mix(in srgb, var(--live) 50%, transparent)}
.lv-c > u.dn{background:color-mix(in srgb, var(--c-red) 50%, transparent)}
.lv-c > u.bk{background:color-mix(in srgb, var(--yellow) 42%, transparent);box-shadow:inset 0 0 0 2px var(--yellow)}
/* PULLED / LOCKED stamp: sits on the selection label (the column says which selection it is), never on the price,
   so the struck price stays whole and readable */
.lv-c > em{position:absolute;left:7px;top:50%;padding:2px 5px;border:1.5px solid var(--amber);background:var(--navy0);color:var(--amber);font:800 italic 9.5px/1 var(--f-cond);font-style:italic;letter-spacing:.06em;text-transform:uppercase;transform:translateY(-50%) rotate(-7deg) scale(1.8);opacity:0;pointer-events:none;transition:opacity .2s, transform .3s cubic-bezier(.2,1.5,.4,1)}
.lv-c.pul{background:repeating-linear-gradient(135deg, var(--navy2) 0 5px, color-mix(in srgb, var(--navy1) 70%, var(--navy0)) 5px 10px);border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.lv-c.pul > b{opacity:.55;text-decoration:line-through}
.lv-c.pul > i,.lv-c.blk > i{opacity:0}
.lv-c.pul > em,.lv-c.blk > em{opacity:1;transform:translateY(-50%) rotate(-7deg) scale(.92)}
.lv-c.blk{border-color:var(--amber)}
.lv-c.blk > b{color:var(--amber)}
.lv-c.none > b{color:var(--muted)}
/* narrow board (two columns on a small laptop): three-way rows put the label over the price */
@container (max-width:430px){
  .lv-r.n3 .lv-c{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;height:42px;padding:0 7px}
  .lv-r.n3 .lv-c > i{font-size:10.5px}
  .lv-r.n3 .lv-c > em{left:auto;right:2px;top:3px;transform-origin:100% 0;transform:rotate(-7deg) scale(1.6)}
  .lv-r.n3 .lv-c.pul > em,.lv-r.n3 .lv-c.blk > em{transform:rotate(-7deg) scale(.72)}
  .lv-r.n3 .lv-c.pul > i,.lv-r.n3 .lv-c.blk > i{opacity:.6}
  .lv-odds #lv-mv li span{white-space:normal;line-height:1.25}
}
/* the smallest phones: three-way cells are too narrow for label and stamp, the hatching and the struck price say it */
@container (max-width:300px){ .lv-r.n3 .lv-c > em{display:none} }
/* biggest moves, last minute of play */
.lv-mv{display:grid;gap:7px;padding:10px 12px;background:var(--navy0);border:1px solid var(--line)}
.lv-mvh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.lv-mvh span{font:500 11px/1 var(--f-mono);font-style:normal;text-transform:none;color:var(--muted)}
#lv-mv{display:grid;gap:4px;align-content:start;min-height:104px}
#lv-mv li{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;gap:10px;align-items:center;padding:7px 9px;background:var(--navy2);border-left:3px solid var(--line2);font-size:13px}
#lv-mv li span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lv-mv li b{font:600 12.5px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
#lv-mv li i{font:700 12.5px/1 var(--f-mono);font-style:normal;text-align:right}
#lv-mv li.u{border-left-color:var(--live)} #lv-mv li.u i{color:var(--live)}
#lv-mv li.d{border-left-color:var(--c-red)} #lv-mv li.d i{color:var(--c-red)}
#lv-mv li.q{grid-template-columns:minmax(0,1fr);color:var(--muted)}
@media (max-width:560px){ #lv-mv li{grid-template-columns:minmax(0,1fr) 42px;gap:4px 8px} #lv-mv li b{grid-row:2;font-size:11.5px} #lv-mv li i{grid-row:1 / span 2;grid-column:2} }
.lv-oleg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.lv-oleg span{display:inline-flex;align-items:center;gap:6px}
.lv-oleg i{width:12px;height:12px}
.lv-oleg i.u{background:color-mix(in srgb, var(--live) 70%, transparent)}
.lv-oleg i.d{background:color-mix(in srgb, var(--c-red) 70%, transparent)}
.lv-oleg i.p{background:repeating-linear-gradient(135deg, var(--amber) 0 2px, transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--amber)}
.lv-oleg i.b{background:color-mix(in srgb, var(--yellow) 50%, transparent);box-shadow:inset 0 0 0 1px var(--yellow)}
@media (max-width:560px){
  .lv-r{grid-template-columns:38px repeat(var(--n,3),minmax(0,1fr));gap:3px}
  .lv-c{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;height:42px;padding:0 7px}
  .lv-c > em{left:auto;right:2px;top:3px;transform-origin:100% 0;transform:rotate(-7deg) scale(1.6)}
  .lv-c.pul > em,.lv-c.blk > em{transform:rotate(-7deg) scale(.72)}
  .lv-c.pul > i,.lv-c.blk > i{opacity:.6}
  .lv-c > i{font-size:10.5px}
  .lv-c > b{font-size:13.5px}
  .lv-cnt b{font-size:20px}
  .lv-cnt div{padding:8px 7px}
  .lv-cnt span{font-size:10.5px}
  .lv-mh small{display:none}
}

/* the three panels */
.lv-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lv-p{display:grid;gap:12px;align-content:start;padding:14px;min-width:0;border-left:1px solid var(--line)}
.lv-p:first-child{border-left:0}
@media (max-width:1099px){ .lv-panels{grid-template-columns:repeat(2,minmax(0,1fr))} .lv-op{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)} }
@media (max-width:760px){ .lv-panels{grid-template-columns:minmax(0,1fr)} .lv-p{border-left:0;border-top:1px solid var(--line)} .lv-p:first-child{border-top:0} }
@media (max-width:560px){ .lv-p{padding:12px 10px} }
.lv-pt{display:flex;align-items:center;justify-content:space-between;gap:8px 10px}
.lv-pt > b{font:800 italic 19px/1 var(--f-cond);text-transform:uppercase;white-space:nowrap}

/* engine log */
.lv-log{display:grid;gap:4px;align-content:start;min-height:430px}
.lv-log li{display:grid;grid-template-columns:58px 38px minmax(0,1fr);gap:8px;align-items:baseline;padding:7px 9px;background:var(--navy2);border-left:3px solid var(--line2);font-size:13.5px;line-height:1.3}
.lv-log li > b{font:600 11.5px/1.3 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.lv-log li > i{font:800 italic 13px/1.1 var(--f-cond);color:var(--muted)}
.lv-log li small{font-size:12px;color:var(--muted)}
.lv-lk{display:inline-block;width:7px;height:13px;margin-right:8px;vertical-align:-1px;background:var(--kit,#FFFFFF);transform:skewX(-14deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.lv-log li.g{border-left-color:var(--live);background:color-mix(in srgb, var(--live) 10%, var(--navy2))}
.lv-log li.g > span{font-weight:700}
.lv-log li.v{border-left-color:var(--violet);background:color-mix(in srgb, var(--violet) 16%, var(--navy2))}
.lv-log li.v > span{font-weight:700}
.lv-log li.g small,.lv-log li.v small{font-weight:500;color:color-mix(in srgb, var(--text) 82%, var(--muted))}
.lv-log li.v2{border-left-color:color-mix(in srgb, var(--violet) 60%, var(--line2))}
.lv-log li.a{border-left-color:var(--amber)}
.lv-log li.y{border-left-color:var(--yellow)}
.lv-log li.b{border-left-color:var(--c-blue)}
.lv-log li.y2{border-left-color:#F5D90A}
.lv-log li.w{border-left-color:#FFFFFF}
.lv-log li.new{animation:lvin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes lvin{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* the player's coupon: two singles, each with its own cash-out */
.lv-tk{position:relative;display:grid;background:var(--navy0);border:1px solid var(--line2);overflow:hidden}
.lv-tk::before{content:"";height:4px;background:var(--yellow)}
.lv-tk-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 14px 10px;border-bottom:1px dashed var(--line2)}
.lv-tk-h > b{margin-right:auto;font:900 italic 22px/1 var(--f-cond);text-transform:uppercase}
.lv-tk-h span{font-size:13px;color:var(--muted)}
.lv-tk-h span b{font:700 14px/1 var(--f-mono);color:var(--text)}
.lv-leg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding:12px 14px 13px;border-bottom:1px dashed var(--line2);transition:background .45s}
.lv-leg > b{font-size:14.5px;font-weight:700;min-width:0}
.lv-leg > small{grid-column:2 / -1;font:500 11.5px/1.4 var(--f-mono);color:var(--muted)}
.lv-leg.r{background:color-mix(in srgb, var(--violet) 18%, transparent)}
.lv-leg.r > small{color:var(--text)}
.lv-leg.w{background:color-mix(in srgb, var(--live) 9%, transparent)}
.lv-st{grid-row:span 2;align-self:start;min-width:72px;padding:5px 7px;font:800 italic 11.5px/1 var(--f-cond);text-transform:uppercase;text-align:center;background:var(--navy3);color:var(--muted);transition:background .3s, color .3s}
.lv-st.w{background:var(--live);color:var(--on-yellow)}
.lv-st.l{background:var(--c-red);color:#FFFFFF}
.lv-st.r{background:var(--violet);color:var(--on-yellow)}
.lv-st.pre{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.lv-lp{grid-row:1;grid-column:3;font:700 15px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.lv-lco{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;margin-top:5px;padding:9px 12px;background:var(--yellow);color:var(--on-yellow);transition:background .35s, color .35s}
.lv-co-l{font:900 italic 15px/1.1 var(--f-cond);text-transform:uppercase;min-width:0}
.lv-co-v{font:900 italic 27px/1 var(--f-cond);transform-origin:right center;font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-co-tag{grid-column:1 / -1;justify-self:start;padding:4px 7px;background:var(--on-yellow);color:var(--amber);font:800 italic 11.5px/1.15 var(--f-cond);font-style:italic;text-transform:uppercase;letter-spacing:.03em}
.lv-lco.off{background:var(--navy3);color:var(--muted)}
.lv-lco.off .lv-co-v{color:var(--text);font-size:20px}
.lv-lco.sus{background:var(--amber)}
.lv-lco.rep{background:var(--navy3);color:var(--text)}
.lv-lco.rep .lv-co-v{font-size:17px;color:var(--amber)}
.lv-lco.rep .lv-co-tag{background:var(--navy0)}
.lv-lco.won,.lv-lco.paid{background:var(--live)}
.lv-lco.lost{background:var(--navy3);color:var(--muted)}
.lv-hold{grid-column:1 / -1;height:6px;background:rgba(0,0,0,.22);overflow:hidden}
.lv-hold i{display:block;height:100%;background:var(--on-yellow);transform-origin:left;transform:scaleX(1)}
.lv-tk-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--muted)}
.lv-tk-f small{margin-left:6px;font:500 11.5px/1 var(--f-mono);color:var(--muted)}
.lv-tk-f b{font:700 14px/1 var(--f-mono);color:var(--text)}
.lv-tk-stamp{position:absolute;left:50%;top:46%;z-index:3;padding:9px 15px;border:3px solid var(--violet);background:color-mix(in srgb, var(--navy0) 90%, transparent);color:var(--violet);font:900 italic 23px/1 var(--f-cond);text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%) rotate(-7deg);opacity:0;pointer-events:none;box-shadow:0 20px 50px -20px rgba(0,0,0,.9)}
.lv-tk-stamp.paid{border-color:var(--live);color:var(--live)}
.lv-cpn{margin-top:-2px}

/* the operator view */
.lv-lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.lv-lab span{font:500 11px/1 var(--f-mono);font-style:normal;text-transform:none;color:var(--muted)}
.lv-var{position:relative;display:grid;gap:6px;padding:12px 14px;background:var(--navy2);border:1px solid var(--line2);border-left:4px solid var(--line2);overflow:hidden;min-height:118px;align-content:start;transition:background .4s, border-color .4s}
.lv-var small{font:800 italic 12px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.lv-var b{font:900 italic 21px/1.05 var(--f-cond);text-transform:uppercase}
.lv-var p{font-size:13.5px;line-height:1.4;color:var(--muted)}
.lv-var p span{color:var(--violet);font-weight:600}
.lv-var.on{background:color-mix(in srgb, var(--violet) 20%, var(--navy2));border-color:var(--violet)}
.lv-var.on::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg, transparent 0 16px, color-mix(in srgb, var(--violet) 9%, transparent) 16px 32px)}
.lv-var.on small,.lv-var.on p span{color:color-mix(in srgb, var(--violet) 70%, #FFFFFF)}  /* lighter violet: 5:1 on the tinted, striped card */
.lv-var.on p{color:var(--text)}
.lv-var.q b{font-size:17px;color:var(--muted)}
.lv-set{display:grid;gap:4px;align-content:start;min-height:254px}
.lv-set li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:8px 10px;background:var(--navy2);border-left:3px solid var(--line2);overflow:hidden}
.lv-set li > b{font-size:13.5px;font-weight:600;min-width:0}
.lv-set li > small{grid-column:1;font:500 11px/1.35 var(--f-mono);color:var(--muted)}
.lv-set li > i{grid-row:1 / span 2;grid-column:2;padding:5px 7px;font:800 italic 11.5px/1 var(--f-cond);font-style:italic;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.lv-set li > u{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--amber);transform-origin:left;text-decoration:none}
.lv-set li.h{border-left-color:var(--amber)} .lv-set li.h > i{background:var(--amber);color:var(--on-yellow)}
.lv-set li.p{border-left-color:var(--live)} .lv-set li.p > i{background:var(--live);color:var(--on-yellow)}
.lv-set li.n{border-left-color:var(--violet)} .lv-set li.n > i{box-shadow:inset 0 0 0 1px var(--violet);color:var(--violet)}
.lv-set li.r{border-left-color:var(--violet);background:color-mix(in srgb, var(--violet) 14%, var(--navy2))} .lv-set li.r > i{background:var(--violet);color:var(--on-yellow)}
.lv-set li.r > small{color:color-mix(in srgb, var(--text) 82%, var(--muted))}
.lv-set li.q{grid-template-columns:minmax(0,1fr)} .lv-set li.q > b{color:var(--muted)}
.lv-set li.new{animation:lvin .45s cubic-bezier(.2,.8,.2,1)}
.lv-liab{display:grid;gap:7px}
.lv-lb{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 36px auto;gap:8px;align-items:center;font-size:13px}
.lv-lb > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.lv-lb > i{position:relative;height:10px;background:var(--navy3);overflow:hidden}
.lv-lb > i u{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);transition:transform .5s ease;text-decoration:none}
.lv-lb.neg > i u{background:var(--c-red)}
.lv-lb.pos > i u{background:var(--live)}
.lv-lb > em{font:600 11.5px/1 var(--f-mono);font-style:normal;color:var(--muted);text-align:right}
.lv-lb > b{min-width:78px;font:700 12.5px/1 var(--f-mono);text-align:right}
.lv-lb.neg > b{color:var(--c-red)}
.lv-lb.pos > b{color:var(--live)}
.lv-lbn{font-size:12px;line-height:1.45;color:var(--muted)}
.lv-ev2{font-size:13.5px;color:var(--muted)}
.lv-ev2 b{font:700 14px/1 var(--f-mono)}
.lv-ev2 b.neg{color:var(--c-red)}
.lv-ev2 b.pos{color:var(--live)}
.lv-foot{margin-top:12px;max-width:110ch}

/* what you just watched */
.lv-fig b{font-stretch:88%}
.lv-fig div{align-content:start}
.lv-watch{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-top:2px;padding:4px 0;border:0;background:none;color:var(--yellow);font:700 13.5px/1.2 var(--f-body);text-align:left;cursor:pointer}
.lv-watch::after{content:"\203A";font-size:17px;line-height:1;transition:transform .2s}
.lv-watch:hover::after{transform:translateX(3px)}
.lv-s2{margin-top:10px}
.lv-day{display:grid;gap:18px;margin-top:clamp(40px,5vw,64px)}
.lv-day-h{display:grid;gap:12px;max-width:820px}
.lv-day-h h3{font-size:clamp(24px,2.6vw,36px);line-height:1.02}
.lv-day-h p{color:var(--muted);font-size:clamp(15.5px,1.2vw,17px)}
.lv-day-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px}
@media (max-width:980px){ .lv-day-g{grid-template-columns:minmax(0,1fr)} }
.lv-day-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--navy0);border:1px solid var(--line)}
.lv-day-s div{display:grid;gap:6px;align-content:start;padding:18px 16px;border-left:1px solid var(--line)}
.lv-day-s div:nth-child(3n+1){border-left:0}
.lv-day-s div:nth-child(n+4){border-top:1px solid var(--line)}
.lv-day-s b{font:900 italic clamp(24px,2.4vw,36px)/1 var(--f-cond);color:var(--yellow)}
.lv-day-s .v b{color:var(--violet)}
.lv-day-s span{font-size:13.5px;color:var(--muted)}
@media (max-width:560px){ .lv-day-s{grid-template-columns:repeat(2,minmax(0,1fr))} .lv-day-s div{border-left:0!important;border-top:1px solid var(--line)} .lv-day-s div:nth-child(-n+2){border-top:0} .lv-day-s div:nth-child(even){border-left:1px solid var(--line)!important} }
.lv-sport{display:grid;gap:14px;align-content:center;padding:18px 20px;background:var(--navy0);border:1px solid var(--line)}
.lv-sp-h{display:flex;justify-content:space-between;font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.lv-sp-h span{font:500 11px/1 var(--f-mono);font-style:normal;text-transform:none;color:var(--muted)}
.lv-sp{display:grid;grid-template-columns:86px minmax(0,1fr) auto 44px;gap:10px;align-items:center}
.lv-sp > span{font:700 14px/1 var(--f-body)}
.lv-sp > i{position:relative;height:18px;background:var(--navy2)}
.lv-sp > i u{position:absolute;inset:0;background:linear-gradient(90deg, var(--red), var(--yellow));transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);text-decoration:none;border-radius:0 4px 4px 0}
.lv-sp > b{font:700 13.5px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.lv-sp > em{font:600 12px/1 var(--f-mono);font-style:normal;color:var(--muted);text-align:right}
@media (max-width:560px){ .lv-sp{grid-template-columns:74px minmax(0,1fr) auto} .lv-sp > em{display:none} .lv-sp-h span{display:none} }

@media (prefers-reduced-motion: reduce){
  .lv-rec.on i,.lv-mini.on .lv-mini-h i,.lv-room.on .lv-clk::before,.lv-room.on .lv-stk-dot{animation:none}
  .lv-feed-bar i,.lv-lb > i u,.lv-sp > i u,.lv-stk-in,.lv-c,.lv-c > i,.lv-c > b,.lv-c > em,.lv-lco,.lv-st,.lv-leg,.lv-var,.lv-d,.lv-rec{transition:none}
}

/* settlement page: the take-back story on the real match, real figures, live scrubber, API. Every class starts with sx-
   (this file is bundled into site.css for every page). Motion is transform and opacity only. */

/* ---------- hero: a live monitor of the real replay ---------- */
.ph-art .float.f2.sx-f2{top:auto;bottom:-5%;right:-3%;width:min(62%,420px)}
@media (max-width:1039px){ .ph-art .float.f2.sx-f2{width:min(58%,400px);bottom:-4%} }
@media (max-width:560px){ .ph-art .float.f2.sx-f2{display:block;width:90%;right:-1%;bottom:-16%} }
.sx-hero{padding-bottom:clamp(76px,8vw,110px)}
.sx-mon{display:grid;gap:8px;padding:12px 14px 13px;background:color-mix(in srgb, var(--navy0) 94%, transparent);border:1px solid var(--line2);border-top:3px solid var(--yellow);box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.sx-mh{display:flex;justify-content:space-between;gap:10px;font:600 10.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.sx-dot{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.sx-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:sxblink 1.2s ease-in-out infinite}
.sx-mrow{display:grid;grid-template-columns:6px minmax(0,1fr) auto;gap:10px;align-items:center}
.sx-kit{display:block;width:6px;height:22px;transform:skewX(-12deg);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.sx-mn{font:800 italic 18px/1.05 var(--f-cond);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-mg{min-width:32px;padding:4px 6px;text-align:center;background:var(--navy2);font:900 italic 26px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.sx-mg.sx-bump{animation:sxbump .6s cubic-bezier(.2,.9,.3,1.3)}
.sx-mc{display:flex;align-items:center;gap:12px;font:600 12.5px/1 var(--f-mono);color:var(--muted)}
.sx-mc span:first-child{font:900 italic 17px/1 var(--f-cond);color:var(--live)}
.sx-mlg{margin-left:auto;min-width:0;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-ms{display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 10px;background:var(--navy2);border-left:4px solid var(--line2)}
.sx-ms b{flex:none;font:900 italic 17px/1 var(--f-cond);text-transform:uppercase}
.sx-ms span{font-size:12.5px;line-height:1.25;color:var(--muted)}
.sx-ms.g{border-color:var(--yellow)} .sx-ms.g b{color:var(--yellow)}
.sx-ms.v{border-color:var(--violet);background:color-mix(in srgb, var(--violet) 20%, var(--navy2))} .sx-ms.v b{color:var(--violet)}
.sx-ms.f{border-color:var(--amber)} .sx-ms.f b{color:var(--amber)}
.sx-ms.sx-pop{animation:sxpop .45s ease}

/* ---------- the stage: one box, picker on top, sized to fit a laptop screen and never growing ---------- */
.sx-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);background:var(--navy1);border:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 12px)}
.sx-stage::before,.sx-stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}
.sx-stage::after{background:radial-gradient(70% 70% at 32% 38%, color-mix(in srgb, var(--violet) 42%, transparent), transparent 70%)}
.sx-stage::before{background:radial-gradient(55% 60% at 82% 45%, color-mix(in srgb, var(--live) 30%, transparent), transparent 70%)}
.sx-stage.sx-varflash::after{animation:sxflash 1.3s ease}
.sx-stage.sx-paidflash::before{animation:sxflash 1.2s ease}

/* the three goals, as tabs of the stage, each with a to-scale meter */
.sx-pick{display:grid;grid-template-columns:minmax(0,1fr) 178px;background:var(--navy0);border-bottom:1px solid var(--line)}
.sx-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-case{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:2px 12px;align-items:center;min-height:44px;padding:7px 14px 9px;text-align:left;background:transparent;border:0;border-right:1px solid var(--line);color:var(--text);cursor:pointer;overflow:hidden;transition:background .2s}
.sx-case:hover{background:var(--navy1)}
.sx-case[aria-pressed="true"]{background:color-mix(in srgb, var(--yellow) 7%, var(--navy1));box-shadow:inset 0 3px 0 var(--yellow)}
.sx-cm{grid-row:1 / span 3;font:900 italic 36px/.9 var(--f-cond);font-stretch:88%;color:var(--violet);white-space:nowrap}
.sx-case[aria-pressed="true"] .sx-cm{color:var(--yellow)}
.sx-cx{font:800 italic 16.5px/1.05 var(--f-cond);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-hold{font:500 12.5px/1.25 var(--f-body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-meter{position:relative;height:8px;margin-top:3px;background:var(--navy3)}
.sx-mz{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb, var(--yellow) 42%, transparent);border-right:2px solid var(--yellow)}
.sx-mt{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-1px;background:var(--violet);box-shadow:0 0 12px var(--violet)}
.sx-cprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.sx-case[aria-pressed="false"] .sx-cprog{opacity:0}
.sx-ckey{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 12px;font:500 12px/1.3 var(--f-mono);color:var(--muted)}
.sx-ckey > span{white-space:nowrap}
.sx-ckey i{display:inline-block;width:14px;height:8px;margin-right:6px;vertical-align:1px}
.sx-ckey i.h{background:color-mix(in srgb, var(--yellow) 55%, transparent);border-right:2px solid var(--yellow)}
.sx-ckey i.v{width:4px;height:13px;margin-left:5px;margin-right:11px;vertical-align:-2px;background:var(--violet)}
@media (max-width:1199px){
  .sx-pick{grid-template-columns:minmax(0,1fr)}
  .sx-ckey{flex-direction:row;flex-wrap:wrap;gap:4px 14px;padding:7px 14px;border-top:1px solid var(--line)}
}

/* the head: score, clock, playback */
.sx-head{display:flex;align-items:center;gap:10px 16px;min-width:0;padding:7px 16px;border-bottom:1px solid var(--line)}
.sx-real{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid color-mix(in srgb, var(--live) 55%, transparent);font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;color:var(--live);white-space:nowrap}
.sx-real::before{content:"";width:7px;height:7px;background:var(--live);transform:rotate(45deg)}
.sx-sb{display:flex;align-items:center;gap:10px;min-width:0}
.sx-tn{display:inline-flex;align-items:center;gap:8px;min-width:0;font:800 italic 18px/1 var(--f-cond);text-transform:uppercase;white-space:nowrap}
.sx-tn .sx-kit{height:24px}
.sx-short{display:none}
.sx-sbs{display:inline-flex;gap:3px}
.sx-sbs b{position:relative;isolation:isolate;display:grid;place-items:center;width:36px;height:36px;background:var(--yellow);color:var(--on-yellow);font:900 italic 28px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.sx-sbs b::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--violet);opacity:0}
.sx-sbs.sx-up{animation:sxbump .6s cubic-bezier(.2,.9,.3,1.3)}
.sx-sbs.sx-dn{animation:sxshake .5s ease}
.sx-sbs.sx-dn b::after{animation:sxhold 2.2s ease}
.sx-min{min-width:66px;font:900 italic 24px/1 var(--f-cond);color:var(--live);white-space:nowrap}
.sx-utc{font:600 12px/1 var(--f-mono);color:var(--dim);white-space:nowrap}
.sx-utc b{font:700 20px/1 var(--f-mono);color:var(--text);font-variant-numeric:tabular-nums}
.sx-spd{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:7px 10px;background:var(--navy3);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:background .25s, color .25s}
.sx-spd[data-s="f"]{background:var(--yellow);color:var(--on-yellow)}
.sx-spd[data-s="r"]{background:var(--live);color:var(--on-yellow)}
.sx-spd[data-s="v"]{background:var(--violet);color:var(--on-yellow)}
.sx-spd[data-s="m"]{background:var(--navy3);color:var(--text)}
@media (max-width:1100px) and (min-width:641px){ .sx-real{display:none} }
@media (max-width:860px){ .sx-tn b{display:none} .sx-short{display:inline} }

.sx-main{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
.sx-left{display:grid;gap:7px;align-content:start;min-width:0;padding:12px;border-right:1px solid var(--line)}
.sx-pitch{position:relative;aspect-ratio:400 / 220;overflow:hidden;background:#0e1812}
.sx-trk{position:absolute;inset:0;display:block;background:#0e1812}
.sx-fb{position:absolute;inset:0;overflow:hidden;background:radial-gradient(70% 90% at 50% 50%, rgba(255,255,255,.07), transparent 70%), repeating-linear-gradient(90deg, #1d6a39 0 8.33%, #227a42 8.33% 16.66%);transition:opacity .5s}
.trk-on .sx-fb{opacity:0;visibility:hidden}
.sx-fb svg{position:absolute;inset:0;width:100%;height:100%}
.sx-ball{position:absolute;inset:0;pointer-events:none;transition:transform .9s ease}
.sx-ball::after{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 14px #FFFFFF}
.sx-fbev{position:absolute;left:10px;bottom:10px;max-width:70%;padding:5px 8px;background:rgba(0,0,0,.6);font:800 italic 13px/1.1 var(--f-cond);text-transform:uppercase}
.sx-fbev:empty{display:none}
.sx-ov{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.sx-ov::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--yellow) 34%, transparent), transparent 62%);opacity:0}
.sx-ov.sx-goal::before{animation:sxflash 1.1s ease}
.sx-stamp{grid-area:1 / 1;display:grid;justify-items:center;gap:6px;padding:14px 26px 12px;opacity:0;transform:scale(1.4) rotate(-4deg)}
.sx-stamp b{font:900 italic clamp(24px,3.4vw,46px)/1 var(--f-cond);font-stretch:88%;text-transform:uppercase;white-space:nowrap}
.sx-stamp span{font:700 12px/1 var(--f-mono)}
.sx-stamp span:empty{display:none}
.sx-st-v{background:var(--violet);color:var(--on-yellow);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.sx-ov::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,16,25,.42);opacity:0;transition:opacity .35s}
.sx-ov:has(.sx-st-v.on)::after{opacity:1}
.sx-st-v b{text-shadow:-3px 0 0 rgba(227,0,43,.55), 3px 0 0 rgba(241,255,26,.45)}
.sx-st-g{background:var(--yellow);color:var(--on-yellow);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.sx-stamp.on{animation:sxstamp 4.2s cubic-bezier(.2,.9,.3,1) forwards}
.sx-st-g.on{animation-duration:2.4s}
.sx-ff{position:absolute;top:10px;right:10px;padding:6px 9px;background:var(--yellow);color:var(--on-yellow);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:opacity .25s, transform .25s}
.sx-ff.on{opacity:1;transform:none}

.sx-lines-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-top:2px;font:700 italic 12.5px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.sx-lk{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:500 12px/1 var(--f-mono);text-transform:none;color:var(--muted)}
.sx-lk > span{white-space:nowrap}
.sx-lk i{display:inline-block;width:9px;height:9px;margin-right:5px}
.sx-lk i.w{background:var(--live)} .sx-lk i.l{background:var(--c-red)} .sx-lk i.p{background:var(--amber)} .sx-lk i.v{background:var(--violet)}
.sx-lines{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 6px;padding-top:4px;perspective:600px}
.sx-ln{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 4px 7px;background:var(--navy2);border:1px solid var(--line);font:600 12px/1 var(--f-body);color:var(--muted)}
.sx-ln b{display:block;height:16px;font:700 16px/1 var(--f-mono);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.sx-ln i{position:absolute;top:-8px;right:4px;z-index:1;display:none;padding:3px 5px;background:var(--yellow);color:var(--on-yellow);font:800 italic 10.5px/1 var(--f-cond);font-style:italic;text-transform:uppercase}
.sx-ln::after{content:"";position:absolute;inset:0;background:var(--live);opacity:0;pointer-events:none}
.sx-ln.bet{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset}
.sx-ln.bet i{display:block}
.sx-ln.s-won{background:color-mix(in srgb, var(--live) 16%, var(--navy2));border-color:color-mix(in srgb, var(--live) 55%, transparent)}
.sx-ln.s-won b{color:var(--live);font:900 italic 16px/1 var(--f-cond);text-transform:uppercase}
.sx-ln.s-lost{background:color-mix(in srgb, var(--red) 14%, var(--navy2));border-color:color-mix(in srgb, var(--c-red) 50%, transparent)}
.sx-ln.s-lost b{color:var(--c-red);font:900 italic 16px/1 var(--f-cond);text-transform:uppercase}
.sx-ln.s-pull,.sx-ln.s-off{background:repeating-linear-gradient(45deg, var(--navy3) 0 6px, var(--navy2) 6px 12px)}
.sx-ln.s-pull b,.sx-ln.s-off b{color:var(--amber);font:800 italic 14px/1 var(--f-cond);text-transform:uppercase}
.sx-ln.s-off b{color:var(--dim)}
.sx-ln.s-reop{background:color-mix(in srgb, var(--violet) 18%, var(--navy2));border-color:var(--violet)}
.sx-ln.s-reop b{color:var(--violet)}
.sx-ln.up::after{animation:sxfl .8s ease}
.sx-ln.dn::after{background:var(--c-red);animation:sxfl .8s ease}
.sx-ln.sx-flip{animation:sxflip .5s ease}

/* the money column: coupon, status, wallet, a ledger of fixed height (four lines, newest on top) */
.sx-money{display:grid;gap:6px;align-content:start;min-width:0;padding:12px}
.sx-cp{display:grid;gap:4px;padding:9px 12px 10px;background:var(--navy2);border:1px solid var(--line);border-left:4px solid var(--yellow)}
.sx-cp-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 12px/1 var(--f-mono);color:var(--muted)}
.sx-sim{padding:4px 7px;border:1px dashed var(--amber);font:800 italic 12px/1 var(--f-cond);text-transform:uppercase;color:var(--amber)}
.sx-cp-sel{font:800 italic 19px/1.1 var(--f-cond);text-transform:uppercase}
.sx-cp-ev{font-size:13.5px;line-height:1.3;color:var(--muted)}
.sx-cp-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:2px}
.sx-cp-n span{display:grid;gap:5px;font:600 12px/1 var(--f-mono);text-transform:uppercase;color:var(--muted)}
.sx-cp-n b{font:700 16px/1 var(--f-mono);color:var(--text);font-variant-numeric:tabular-nums}
.sx-cp-real{font:500 12px/1.4 var(--f-mono);color:var(--muted)}
.sx-stt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:7px 12px;background:var(--navy0);border:1px solid var(--line)}
.sx-ring{position:relative;display:grid;place-items:center;width:56px;height:56px}
.sx-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sx-ring circle{fill:none;stroke-width:6}
.sx-ring .bg{stroke:var(--navy3)}
.sx-ring .fg{stroke:var(--yellow);transition:stroke .3s}
.sx-ring[data-r="p"] .fg{stroke:var(--live)}
.sx-ring[data-r="v"] .fg{stroke:var(--violet)}
.sx-ring[data-r="o"] .fg{stroke:var(--line2)}
.sx-ring b{position:relative;font:700 13.5px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.sx-ring[data-r="p"] b{color:var(--live)} .sx-ring[data-r="v"] b{color:var(--violet)}
.sx-ring.sx-burst{animation:sxbump .6s cubic-bezier(.2,.9,.3,1.3)}
.sx-stx{display:grid;gap:6px;min-width:0}
.sx-chip{justify-self:start;padding:6px 10px;background:var(--navy3);color:var(--text);font:900 italic 17px/1 var(--f-cond);text-transform:uppercase}
.sx-chip[data-c="w"]{background:var(--yellow);color:var(--on-yellow)}
.sx-chip[data-c="p"]{background:var(--live);color:var(--on-yellow)}
.sx-chip[data-c="v"]{background:var(--violet);color:var(--on-yellow)}
.sx-chip.sx-pop{animation:sxpop .5s ease}
.sx-stx span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em;font-size:13.5px;line-height:1.3;color:var(--muted)}
@media (min-width:1200px){ .sx-stx span{-webkit-line-clamp:1;min-height:1.3em} }
.sx-wal{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 12px;background:var(--navy2);border:1px solid var(--line)}
.sx-fly{position:absolute;right:14px;top:-24px;z-index:2;font:900 italic 22px/1 var(--f-cond);font-style:italic;opacity:0;pointer-events:none}
.sx-fly.p{color:var(--live)} .sx-fly.m{color:var(--c-red)}
.sx-fly.on.p{animation:sxflyup 1.6s ease forwards} .sx-fly.on.m{animation:sxflydn 1.6s ease forwards}
.sx-wal span{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--muted)}
.sx-wal em{margin-left:4px;font:600 12px/1 var(--f-mono);font-style:normal;text-transform:none;color:var(--amber)}
.sx-wal b{font:900 italic 26px/1 var(--f-cond);font-variant-numeric:tabular-nums;transition:color .4s}
.sx-wal b.p{color:var(--live)} .sx-wal b.m{color:var(--c-red)}
.sx-led{display:grid;grid-template-rows:repeat(4,25px);gap:3px;height:109px;overflow:hidden;background:repeating-linear-gradient(180deg, color-mix(in srgb, var(--navy0) 45%, transparent) 0 25px, transparent 25px 28px)}
.sx-led li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:8px;align-items:center;padding:0 10px;background:var(--navy0);border-left:3px solid var(--line2);font-size:13.5px;line-height:1;white-space:nowrap}
.sx-led li span{font:600 12px/1 var(--f-mono);color:var(--muted)}
.sx-led li b{overflow:hidden;text-overflow:ellipsis}
.sx-led li em{font:700 14px/1 var(--f-mono);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.sx-led li.p{border-color:var(--live)} .sx-led li.p em{color:var(--live)}
.sx-led li.v{border-color:var(--violet)} .sx-led li.v em{color:var(--c-red)} .sx-led li.v b{color:var(--violet)}
.sx-led li.sx-new{animation:sxledin .6s cubic-bezier(.2,.9,.3,1.2)}

/* the caption: what happens now (left) and what the engine does (right); its height is set from the longest moment */
.sx-cap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6px 26px;align-items:start;align-content:start;padding:10px 18px;border-top:1px solid var(--line);background:linear-gradient(90deg, var(--navy0), var(--navy1))}
.sx-cap-a{display:grid;gap:8px;min-width:0}
.sx-cap-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sx-ck{font:600 12.5px/1 var(--f-mono);color:var(--muted)}
.sx-kind{padding:6px 9px;background:var(--navy3);color:var(--text);font:900 italic 13px/1 var(--f-cond);text-transform:uppercase;white-space:nowrap}
.sx-kind[data-k="goal"]{background:var(--yellow);color:var(--on-yellow)}
.sx-kind[data-k="back"],.sx-kind[data-k="var"]{background:var(--violet);color:var(--on-yellow)}
.sx-kind[data-k="paid"]{background:var(--live);color:var(--on-yellow)}
.sx-kind[data-k="pull"],.sx-kind[data-k="pen"]{background:var(--amber);color:var(--on-yellow)}
.sx-kind[data-k="bet"]{background:var(--text);color:var(--on-yellow)}
.sx-kind[data-k="quote"]{background:var(--navy3);color:var(--yellow)}
.sx-ttl{font:800 italic clamp(19px,1.75vw,24px)/1.1 var(--f-cond);font-stretch:88%;text-transform:uppercase}
.sx-act{display:grid;gap:5px;align-content:start;padding-top:2px}
.sx-act li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.sx-act li::before{content:"";position:absolute;left:0;top:.36em;width:12px;height:12px;background:var(--yellow);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.sx-cap.in .sx-ttl{animation:sxcapin .5s ease both}
.sx-cap.in .sx-act li{animation:sxcapin .45s ease both;animation-delay:calc(.25s + var(--i) * .35s)}
.sx-probe{position:absolute!important;left:0;top:0;visibility:hidden;pointer-events:none;min-height:0!important}

/* controls beside the timeline of the goal */
.sx-bar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:center;padding:5px 18px 4px;border-top:1px solid var(--line);background:var(--navy0)}
.sx-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;max-width:312px}
.sx-ctl .ybtn{height:38px;padding:0 14px;font-size:14.5px}
.sx-ctl .tiny{flex-basis:100%;font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap}
.sx-track{position:relative;height:58px}
.sx-rail{position:absolute;left:24px;right:24px;top:30px;height:4px;background:var(--navy3)}
.sx-fill{position:absolute;inset:0;background:linear-gradient(90deg, var(--red), var(--yellow));transform:scaleX(0);transform-origin:left}
.sx-holds{position:absolute;left:24px;right:24px;top:8px;height:14px}
.sx-holds i{position:absolute;top:0;height:14px;background:color-mix(in srgb, var(--yellow) 22%, transparent);border-left:2px solid var(--yellow);border-right:2px solid var(--yellow)}
.sx-holds i.x{background:color-mix(in srgb, var(--violet) 26%, transparent);border-color:var(--violet)}
.sx-holds b{position:absolute;left:6px;top:0;font:700 10.5px/14px var(--f-mono);white-space:nowrap;color:var(--yellow)}
.sx-holds i.nar b{left:calc(100% + 6px)}
.sx-holds i.nl b{left:auto;right:calc(100% + 6px)}
.sx-holds i.x b{color:var(--violet)}
.sx-ph{position:absolute;left:24px;right:24px;top:22px;height:20px;pointer-events:none;transition:transform .1s linear}
.sx-ph i{position:absolute;left:-2px;top:0;width:4px;height:20px;background:var(--text);box-shadow:0 0 12px var(--text)}
.sx-marks{position:absolute;left:24px;right:24px;top:21px}
.sx-marks li{position:absolute;top:0;transform:translateX(-50%)}
.sx-mk{display:grid;justify-items:center;gap:5px;min-width:44px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.sx-mk i{display:block;width:20px;height:20px;background:var(--navy1);border:2px solid var(--line2);transform:rotate(45deg) scale(.72);transition:transform .25s, background .25s}
.sx-mk span{font:600 10.5px/1 var(--f-mono);white-space:nowrap}
.sx-mk.k-goal i{border-color:var(--yellow)} .sx-mk.k-back i,.sx-mk.k-var i{border-color:var(--violet)} .sx-mk.k-paid i{border-color:var(--live)}
.sx-mk.k-pull i,.sx-mk.k-pen i{border-color:var(--amber)} .sx-mk.k-bet i,.sx-mk.k-ft i,.sx-mk.k-quote i{border-color:var(--muted)}
.sx-mk.past i{background:var(--navy3)}
.sx-mk.k-goal.past i{background:var(--yellow)} .sx-mk.k-back.past i,.sx-mk.k-var.past i{background:var(--violet)} .sx-mk.k-paid.past i{background:var(--live)}
.sx-mk.on i{transform:rotate(45deg) scale(1.08);background:var(--text)}
.sx-mk.on span,.sx-mk:hover span{color:var(--text)}

/* the rules the stage shows, lit when the story reaches them */
.sx-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.sx-rules li{position:relative;display:grid;gap:3px;align-content:start;padding:9px 12px 10px;background:var(--navy1);border:1px solid var(--line);border-left:3px solid var(--line2);transition:border-color .3s, background .3s}
.sx-rules b{font:800 italic 14.5px/1.1 var(--f-cond);text-transform:uppercase;color:var(--muted);transition:color .3s}
.sx-rules span{font-size:13px;line-height:1.35;color:var(--muted)}
.sx-rules li.on{background:var(--navy2)}
.sx-rules li.on b{color:var(--text)}
.sx-rules li[data-r="pull"].on{border-left-color:var(--amber)} .sx-rules li[data-r="goal"].on{border-left-color:var(--yellow)}
.sx-rules li[data-r="paid"].on{border-left-color:var(--live)} .sx-rules li[data-r="back"].on{border-left-color:var(--violet)}
.sx-rules li.now{box-shadow:0 0 0 1px var(--yellow) inset}
.sx-rules li.now b{color:var(--yellow)}
.sx-rules li.sx-pop{animation:sxpop .45s ease}
@media (max-width:980px){ .sx-rules{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sx-src{margin-top:12px;max-width:118ch;font-size:13.5px;color:var(--muted)}
.sx-src b{color:var(--text)}

/* short laptop screens (1366x768 and the like): the whole stage still fits under the header */
@media (min-width:981px) and (max-height:820px){
  .sx-stage{scroll-margin-top:calc(var(--hdr) + 6px)}
  .sx-case{padding:5px 14px 7px}
  .sx-head{padding:5px 16px}
  .sx-main{grid-template-columns:minmax(0,.94fr) minmax(0,1fr)}
  .sx-left{padding:10px;gap:6px}
  .sx-money{padding:10px}
  .sx-cp-ev{display:none}
  .sx-cap{padding:9px 18px}
  .sx-ttl{font-size:21px}
  .sx-act li{font-size:14px;line-height:1.35}
  .sx-ctl .tiny{display:none}
  .sx-bar{padding:3px 18px 2px}
  .sx-track{height:44px}
  .sx-holds{top:2px} .sx-rail{top:22px} .sx-ph{top:14px} .sx-marks{top:13px}
  .sx-mk span{display:none} .sx-mk{min-width:34px}
}

@media (min-width:981px) and (max-width:1199px) and (max-height:820px){ .sx-ckey{display:none} }
/* narrow desktops: the money column is narrow, so status and wallet sit side by side */
@media (min-width:981px) and (max-width:1199px){
  .sx-money{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sx-cp,.sx-led{grid-column:1 / -1}
  .sx-stt{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:7px 10px}
  .sx-ring{width:48px;height:48px}
  .sx-ring b{font-size:12px}
  .sx-wal{flex-direction:column;align-items:flex-start;justify-content:center;gap:7px}
  .sx-fly{top:-12px}
}

/* tablets and phones: one column; the money status right under the pitch, coupon and ledger after the lines */
@media (max-width:980px){
  .sx-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-main,.sx-left,.sx-money{display:contents}
  .sx-stage > *,.sx-left > *,.sx-money > *{grid-column:1 / -1}
  .sx-pick{order:0} .sx-head{order:1}
  .sx-case{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:3px;padding:9px 12px 11px}
  .sx-cm{grid-row:auto;font-size:30px}
  .sx-cx{font-size:15px;white-space:normal}
  .sx-gl{display:block;font-size:11.5px;color:var(--muted)}
  .sx-hold{font-size:12px;white-space:normal}
  .sx-hx{display:none}
  .sx-pitch{order:2;margin:12px 12px 0}
  .sx-stt{order:3;grid-column:1;margin:10px 0 0 12px} .sx-wal{order:3;grid-column:2;margin:10px 12px 0 0;align-items:center}
  .sx-cap{order:4;margin-top:10px;grid-template-columns:minmax(0,1fr);gap:8px}
  .sx-bar{order:5;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 12px 4px}
  .sx-ctl{max-width:none}
  .sx-lines-h{order:6;margin:14px 12px 0} .sx-lines{order:7;margin:8px 12px 0}
  .sx-cp{order:8;grid-column:1;margin:16px 0 14px 12px;align-self:start} .sx-led{order:8;grid-column:2;margin:16px 12px 14px 0}
}
@media (max-width:640px){
  .sx-stage{grid-template-columns:minmax(0,1fr)}
  .sx-stt,.sx-wal,.sx-cp,.sx-led{grid-column:1 / -1}
  .sx-stt{margin:10px 12px 0} .sx-wal{margin:8px 12px 0}
  .sx-cp{margin:14px 12px 0} .sx-led{order:9;margin:8px 12px 14px}
  .sx-case{padding:8px 8px 10px}
  .sx-cm{font-size:24px}
  .sx-cx{font-size:13.5px}
  .sx-ckey{font-size:11.5px;padding:6px 10px}
  .sx-head{gap:8px 10px;padding:9px 12px}
  .sx-real{display:none}
  .sx-tn b{display:none} .sx-short{display:inline}
  .sx-tn{font-size:17px}
  .sx-sbs b{width:32px;height:34px;font-size:25px}
  .sx-min{font-size:20px;min-width:56px}
  .sx-utc{display:none}
  .sx-spd{display:none}
  .sx-spd[data-s="f"],.sx-spd[data-s="v"]{display:inline-block;font-size:12px;padding:6px 8px}
  .sx-ff{display:none}
  .sx-stt{grid-template-columns:52px minmax(0,1fr);padding:8px 12px}
  .sx-ring{width:52px;height:52px}
  .sx-ring b{font-size:12.5px}
  .sx-lines{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-lk{display:none}
  .sx-cap{padding:12px}
  .sx-bar{grid-template-columns:minmax(0,1fr);padding:10px 12px 4px}
  .sx-ctl{max-width:none}
  .sx-ctl .ybtn{flex:1 1 auto;padding:0 10px}
  .sx-ctl .tiny{display:none}
  .sx-track{margin:0 -6px}
  .sx-mk span{display:none}
  .sx-mk{min-width:32px;padding:0}
  .sx-holds b{font-size:10px}
}
@media (max-width:380px){ .sx-gl{display:none} }

/* ---------- real figures ---------- */
.sx-fg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:14px}
@media (max-width:1060px){ .sx-fg{grid-template-columns:repeat(2,minmax(0,1fr))} .sx-fvar{grid-column:1 / -1;order:3} }
@media (max-width:640px){ .sx-fg{grid-template-columns:minmax(0,1fr)} .sx-fvar{order:0} }
.sx-fc{position:relative;display:grid;gap:12px;align-content:start;padding:22px;background:var(--navy0);border:1px solid var(--line);border-top:3px solid var(--violet);overflow:hidden}
.sx-fk{font:800 italic 13.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em;color:var(--violet)}
.sx-fc h3{font-size:clamp(20px,1.8vw,24px);font-style:italic;line-height:1.05}
.sx-big{font:900 italic clamp(58px,6.2vw,92px)/.88 var(--f-cond);font-stretch:88%;font-variant-numeric:tabular-nums;color:var(--text)}
.sx-fc > p{font-size:15.5px;color:var(--muted)}
.sx-fc > p.sx-fnote{font-size:14.5px;color:var(--text)}
.sx-fsrc{margin-top:auto;font:500 12px/1.45 var(--f-mono);color:var(--muted)}
.sx-balls{display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:5px;max-width:420px}
.sx-balls i{position:relative;display:block;aspect-ratio:1;border-radius:50%;background:var(--navy3)}
.sx-balls i.v{background:var(--violet)}
.sx-balls i.v::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--violet);opacity:0}
.sx-pre .sx-balls i{opacity:0;transform:scale(.3)}
.sx-on .sx-balls i{opacity:1;transform:none;transition:opacity .4s ease, transform .4s ease;transition-delay:calc(var(--i) * 18ms)}
.sx-on .sx-balls i.v::after{animation:sxring 1.8s 1.4s ease-out infinite}
.sx-bars{display:grid;gap:12px}
.sx-bars li{display:grid;grid-template-columns:minmax(118px,.8fr) minmax(0,1.6fr) 68px;gap:12px;align-items:center;font-size:14.5px}
.sx-bt{position:relative;height:18px;overflow:hidden;background:var(--navy2)}
.sx-bt i{position:absolute;inset:0;background:var(--violet);transform:scaleX(var(--w));transform-origin:left}
.sx-pre .sx-bt i{transform:scaleX(0)}
.sx-on .sx-bt i{transform:scaleX(var(--w));transition:transform 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k) * .12s)}
.sx-bars b{font:700 15px/1 var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:420px){ .sx-bars li{grid-template-columns:minmax(0,1fr) 64px;gap:6px 10px} .sx-bt{grid-column:1 / -1;grid-row:2} }
/* the queue: its resting frame shows the stamp, and the loop spends most of its time on it */
.sx-q{display:grid;gap:8px;padding:14px;background:var(--navy1);border:1px dashed var(--line2)}
.sx-qk{font:600 12px/1 var(--f-mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sx-qr{display:flex;flex-wrap:wrap;gap:8px}
.sx-qa,.sx-qb{position:relative;padding:8px 10px;font:800 italic 13px/1 var(--f-cond);text-transform:uppercase}
.sx-qa{background:var(--navy3);color:var(--text);opacity:.45}
.sx-qa::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:var(--c-red);transform-origin:left}
.sx-qb{background:var(--violet);color:var(--on-yellow)}
.sx-qx{justify-self:start;padding:5px 8px;border:2px solid var(--c-red);color:var(--c-red);font:900 italic 14px/1 var(--f-cond);font-style:italic;text-transform:uppercase;transform:rotate(-3deg)}
.sx-run .sx-qa{animation:sxqa 6s ease -3.4s infinite}
.sx-run .sx-qa::after{animation:sxqs 6s ease -3.4s infinite}
.sx-run .sx-qb{animation:sxqb 6s ease -3.4s infinite}
.sx-run .sx-qx{animation:sxqx 6s ease -3.4s infinite}
.sx-fwatch{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;text-align:left;line-height:1.15;background:transparent;border:1.5px solid var(--violet);color:var(--text);font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;cursor:pointer;transition:background .2s}
.sx-fwatch::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--violet)}
.sx-fwatch:hover{background:color-mix(in srgb, var(--violet) 18%, transparent)}

/* ---------- the scrubber on the real match ---------- */
.sx-scl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.sx-scm{min-width:96px;font:900 italic 40px/1 var(--f-cond);font-stretch:88%;color:var(--live);white-space:nowrap}
.sx-scs{display:grid;gap:5px}
.sx-scs b{font:900 italic 30px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.sx-scs span{font:600 12px/1 var(--f-mono);color:var(--muted)}
.sx-scl .ybtn{margin-left:auto;height:46px;padding:0 20px}
.sx-strip{position:relative;height:112px;margin-top:4px}
.sx-sbar{position:absolute;left:0;right:0;top:52px;height:14px;display:grid;grid-template-columns:var(--fa,48%) var(--ht,4%) minmax(0,1fr);background:var(--navy3);overflow:hidden}
.sx-sbar i{position:relative;z-index:1;display:block}
.sx-sbar .sx-sht{background:repeating-linear-gradient(45deg, var(--navy2) 0 3px, var(--navy1) 3px 6px)}
.sx-sbar .sx-sfill{position:absolute;inset:0;z-index:0;display:block;background:color-mix(in srgb, var(--yellow) 42%, transparent);transform:scaleX(0);transform-origin:left}
.sx-halves{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:var(--fa,48%) var(--ht,4%) minmax(0,1fr);pointer-events:none}
.sx-halves span{grid-column:1;text-align:center;font:600 11.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sx-halves .sx-h2{grid-column:3}
.sx-gm{position:absolute;inset:0;z-index:2;pointer-events:none}
.sx-gm span{position:absolute;display:grid;justify-items:center;gap:3px;transform:translateX(-50%)}
.sx-gm span.e0{justify-items:start;transform:translateX(-6px)}
.sx-gm span.e1{justify-items:end;transform:translateX(calc(-100% + 6px))}
.sx-gm span.g{top:20px}
.sx-gm span.g.hi em{transform:translateY(-15px)}
.sx-gm span.v{top:60px}
.sx-gm span.v.hi em{transform:translateY(15px)}
.sx-gm span i{width:12px;height:12px;background:var(--yellow);transform:rotate(45deg)}
.sx-gm span.v i{background:var(--violet)}
.sx-gm span.g i{order:2} .sx-gm span.g em{order:1}
.sx-gm em{padding:1px 3px;background:var(--navy1);font:700 11px/1 var(--f-mono);font-style:normal;color:var(--muted);white-space:nowrap}
.sx-gm span.v em{color:var(--violet)}
.sx-tl{position:absolute;top:57px;height:4px;background:var(--violet);box-shadow:0 0 8px var(--violet)}
.sx-strip input[type=range]{position:absolute;left:0;right:0;top:39px;z-index:1;width:100%;height:40px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.sx-strip input[type=range]::-webkit-slider-runnable-track{height:40px;background:transparent;border:0}
.sx-strip input[type=range]::-moz-range-track{height:40px;background:transparent;border:0}
.sx-strip input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:40px;margin-top:0;background:var(--text);border:0;box-shadow:0 0 0 2px var(--navy0), 0 0 16px var(--yellow)}
.sx-strip input[type=range]::-moz-range-thumb{width:10px;height:40px;background:var(--text);border:0;border-radius:0;box-shadow:0 0 0 2px var(--navy0), 0 0 16px var(--yellow)}
.sx-strip input[type=range]:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sx-sleg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted)}
.sx-sleg li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sx-sleg i{width:10px;height:10px;transform:rotate(45deg);background:var(--yellow)}
.sx-sleg i.v{background:var(--violet)}
@media (max-width:640px){ .sx-halves{display:none} .sx-strip{height:96px} .sx-scm{font-size:34px;min-width:84px} }
.sx-legs{display:grid;border-top:1px solid var(--line)}
.sx-lg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sx-lg b{font-size:14.5px}
.sx-lg i{grid-row:1 / span 2;grid-column:2;padding:6px 9px;background:var(--navy3);color:var(--muted);font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase}
.sx-lg i[data-c="w"]{background:var(--live);color:var(--on-yellow)}
.sx-lg i[data-c="l"]{background:var(--red);color:var(--text)}
.sx-lg i[data-c="v"]{background:var(--violet);color:var(--on-yellow)}
.sx-lg small{font:500 12.5px/1.4 var(--f-mono);color:var(--muted)}
.sx-lg::after{content:"";position:absolute;inset:0;background:var(--live);opacity:0;pointer-events:none}
.sx-lg.fl::after{animation:sxfl 1.1s ease}
.sx-lg.flv::after{background:var(--violet);animation:sxfl 1.5s ease}

.sx-dl{display:grid;gap:8px}
.sx-dl ol{display:grid;gap:5px;min-height:150px;align-content:start}
.sx-dl li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;padding:8px 10px;background:var(--navy0);border-left:3px solid var(--line2);font-size:13.5px;line-height:1.35}
.sx-dl li span{font:600 12px/1.5 var(--f-mono);color:var(--muted)}
.sx-dl li.g{border-color:var(--yellow)} .sx-dl li.v{border-color:var(--violet)} .sx-dl li.f{border-color:var(--live)}
.sx-dl li.v b{color:var(--violet)} .sx-dl li.g b{color:var(--yellow)} .sx-dl li.f b{color:var(--live)}
.sx-dl li.sx-new{animation:sxledin .5s ease}
.sx-dl li.sx-none{display:block;color:var(--muted);border-left-color:var(--line)}

/* ---------- API ---------- */
.sx-api .code{white-space:pre-wrap;word-break:break-word}
.sx-api .sx-res{min-height:330px}
.sx-api .sx-cb{min-height:0}
.sx-l{display:block;padding-left:4ch;text-indent:-4ch}
.sx-l.sx-in{animation:sxlin .3s ease both}
.sx-hl{background:color-mix(in srgb, var(--yellow) 12%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--yellow) 35%, transparent)}
.sx-api .segs button{min-width:0;font-size:13.5px}
.sx-apin{margin-top:12px}
@media (max-width:640px){ .sx-api .code{font-size:12px;padding:14px} }

/* ---------- the rulebook, each rule with this match as the example ---------- */
.sx-book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;counter-reset:sxr}
.sx-book li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.sx-book li > b{justify-self:start;padding:7px 10px;background:var(--navy3);color:var(--yellow);font:900 italic 14px/1 var(--f-cond);text-transform:uppercase;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.sx-book li.r-g > b{background:var(--yellow);color:var(--on-yellow)}
.sx-book li.r-v > b{background:var(--violet);color:var(--on-yellow)}
.sx-book li.r-l > b{background:var(--live);color:var(--on-yellow)}
.sx-book h3{font-size:19px;font-style:italic;line-height:1.1}
.sx-book p{margin-top:4px;font-size:14.5px;color:var(--muted)}
.sx-book small{display:block;margin-top:8px;padding-left:10px;border-left:2px solid var(--violet);font:500 12.5px/1.45 var(--f-mono);color:var(--text)}
.sx-book small:empty{display:none}
@media (max-width:760px){ .sx-book{grid-template-columns:minmax(0,1fr)} .sx-book li{grid-template-columns:minmax(0,1fr);gap:8px} }
.sx-rb .cta-band{margin-top:28px}
.cta-band.sx-cta .ybtn.ghost{background:var(--navy0);color:var(--text);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.cta-band.sx-cta .ybtn.ghost:hover{background:var(--navy2)}

/* ---------- motion ---------- */
@keyframes sxblink{50%{opacity:.3}}
@keyframes sxbump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes sxpop{0%{transform:scale(.86);opacity:.4}60%{transform:scale(1.05);opacity:1}100%{transform:none;opacity:1}}
@keyframes sxshake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes sxhold{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes sxstamp{0%{opacity:0;transform:scale(1.6) rotate(-8deg)}8%{opacity:1;transform:scale(.95) rotate(-4deg)}12%{transform:scale(1) rotate(-4deg)}14%{transform:translate(-6px,2px) rotate(-4deg)}16%{transform:translate(5px,-2px) rotate(-4deg)}18%{transform:translate(-2px,1px) rotate(-4deg)}20%{transform:rotate(-4deg)}84%{opacity:1;transform:rotate(-4deg)}100%{opacity:0;transform:scale(.96) rotate(-4deg)}}
@keyframes sxflash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
@keyframes sxfl{0%{opacity:.3}100%{opacity:0}}
@keyframes sxflip{0%{transform:rotateX(90deg)}100%{transform:none}}
@keyframes sxcapin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sxledin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes sxflyup{0%{opacity:0;transform:translateY(-22px) scale(.9)}18%{opacity:1;transform:translateY(-12px) scale(1.08)}70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
@keyframes sxflydn{0%{opacity:0;transform:translateY(6px) scale(.9)}18%{opacity:1;transform:translateY(0) scale(1.08)}70%{opacity:1;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-24px)}}
@keyframes sxlin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes sxring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
/* the queue loop: leg queued (0 to 10 %), goal taken back (16 to 24 %), struck (26 to 32 %), "Never written" from 34 % to 94 % */
@keyframes sxqa{0%{opacity:0;transform:translateX(-14px)}8%,24%{opacity:1;transform:none}32%,94%{opacity:.45;transform:none}100%{opacity:0}}
@keyframes sxqs{0%,25%{transform:scaleX(0)}32%,94%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes sxqb{0%,14%{opacity:0;transform:translateX(14px)}22%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sxqx{0%,32%{opacity:0;transform:scale(1.5) rotate(-3deg)}38%,94%{opacity:1;transform:rotate(-3deg)}100%{opacity:0;transform:rotate(-3deg)}}
@media (prefers-reduced-motion: reduce){
  .sx-run .sx-qa,.sx-run .sx-qb,.sx-run .sx-qx,.sx-run .sx-qa::after{animation:none!important}
  .sx-qa::after{transform:scaleX(1)}
  .sx-stamp.on{animation:none!important;opacity:1;transform:rotate(-4deg)}
  .sx-stage.sx-varflash::after,.sx-stage.sx-paidflash::before,.sx-ov.sx-goal::before,.sx-sbs.sx-dn,.sx-sbs.sx-up,.sx-sbs.sx-dn b::after,.sx-dot::before{animation:none!important}
}

/* home page: the live engine wall (real slate replayed), the real-time chain fired by real goals, the engine pulse.
   Prefixes: wl- (wall and hero cue), rtx- (chain additions), pz- (engine pulse). Motion = transform and opacity. */

/* rolling digits (wall counters and pulse band): each digit is a strip of 0 to 9 moved with transform only */
.wl-od{display:inline-flex;align-items:flex-start;height:1em;line-height:1em;font-variant-numeric:tabular-nums;vertical-align:top}
.wl-od-d{display:inline-block;height:1em;line-height:1em;clip-path:inset(0 -.35em)}
.wl-od-s{display:block;white-space:pre;line-height:1em;will-change:transform}
.wl-od-c{display:inline-block;height:1em;line-height:1em}

/* live dots: a ring that grows and fades (transform + opacity), paused with the replay */
.wl-dot{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.wl-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:wl-ping 1.6s ease-out infinite}
@keyframes wl-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.8);opacity:0}}
.wl-paused .wl-dot::after,.wl-paused .wl-clk i::after{animation-play-state:paused;opacity:0}
/* "how it works": the pulse runs along the flow with transform only, and only while the section is on screen */
.wl-flowdot{position:absolute;top:30px;left:4%;right:5%;height:10px;pointer-events:none}
.wl-flowdot i{position:absolute;inset:0;animation:wl-flow 4s linear infinite}
.wl-flowdot i::after{content:"";position:absolute;left:0;top:0;width:10px;height:10px;background:var(--yellow);box-shadow:0 0 18px var(--yellow)}
.wl-flowdot.wl-paused i{animation-play-state:paused}
@keyframes wl-flow{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media (max-width:900px){ .wl-flowdot{display:none} }

/* hero: a cue to the wall below */
.wl-tease{display:inline-grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;justify-self:start;max-width:100%;padding:11px 16px 11px 13px;background:color-mix(in srgb, var(--navy2) 86%, transparent);border:1px solid var(--line2);border-left:3px solid var(--red);text-decoration:none;color:var(--muted);font:500 14px/1.35 var(--f-body);transition:border-color .2s, transform .2s}
.wl-tease:hover{border-color:var(--yellow);transform:translateY(-2px)}
.wl-tease b{font:800 italic 13.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em;color:var(--text);white-space:nowrap}
.wl-tease em{font:800 18px/1 var(--f-body);font-style:normal;color:var(--yellow)}
@media (max-width:560px){ .wl-tease{grid-template-columns:auto minmax(0,1fr) auto} .wl-tease span{grid-column:1 / -1;grid-row:2} .wl-tease em{grid-column:3;grid-row:1} }

/* ---------- the wall ---------- */
main > .sec.alt.wl-sec{padding-block:clamp(58px,6vw,96px)}
main > .sec.alt.wl-sec::before{background:
  linear-gradient(90deg, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(0deg, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px) 0 0 / 56px 56px,
  radial-gradient(900px 460px at 8% 0%, color-mix(in srgb, var(--red) 30%, transparent), transparent 70%),
  radial-gradient(760px 420px at 96% 100%, color-mix(in srgb, var(--yellow) 9%, transparent), transparent 70%),
  #060A11}
.wl-head{margin-bottom:20px}
.wl-head h2{font-size:clamp(30px,3.7vw,54px);line-height:.97;margin-top:14px}
.wl-head h2 em{font-style:normal;color:var(--yellow)}
.wl-head p{margin-top:12px;color:var(--muted);font-size:clamp(15px,1.15vw,17px);max-width:68ch}

/* the desk strip: replay clock, progress, live counters, controls, source */
.wl{position:relative}
.wl-bar{display:grid;grid-template-columns:auto minmax(110px,1fr) auto auto;grid-template-areas:"now prog cnt ctl" "src src src src";align-items:center;gap:12px 22px;padding:14px 16px 12px;background:linear-gradient(180deg, var(--navy2), var(--navy1));border:1px solid var(--line2);border-left:4px solid var(--red);box-shadow:0 30px 60px -40px #000}
.wl-now{grid-area:now;display:flex;align-items:center;gap:10px;white-space:nowrap}
.wl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;background:var(--red);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em}
.wl-chip .wl-dot{width:7px;height:7px;background:var(--text)}
.wl-now time{font:700 20px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.wl-now small{font:600 11px/1 var(--f-mono);color:var(--dim)}
.wl-prog{grid-area:prog;display:grid;gap:6px;min-width:0}
.wl-track{position:relative;height:6px;background:var(--navy3);overflow:hidden}
.wl-track i{position:absolute;inset:0;background:linear-gradient(90deg, var(--red), var(--yellow));transform-origin:left;transform:scaleX(0)}
.wl-prog span{display:flex;justify-content:space-between;font:600 10.5px/1 var(--f-mono);color:var(--dim)}
.wl-cnt{grid-area:cnt;display:grid;grid-template-columns:repeat(4,auto)}
.wl-cnt li{position:relative;display:grid;gap:5px;align-content:start;padding:0 16px;border-left:1px solid var(--line)}
.wl-cfl{position:absolute;inset:-6px 4px;background:var(--live);opacity:0;pointer-events:none}
.wl-cv .wl-cfl{background:var(--violet)}
.wl-cnt li:first-child{border-left:0;padding-left:0}
.wl-cnt b{font:900 italic 28px/1 var(--f-cond);font-stretch:88%}
.wl-cnt li > span{font:700 italic 11.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
/* what each counter covers: all matches, or only the two markets the slate carries (one line under the tiles on phones) */
.wl-cnt li > small{font:500 10.5px/1.15 var(--f-mono);color:var(--muted);white-space:nowrap}
.wl-scope{display:none}
.wl-cnt .wl-cg b{color:var(--live)} .wl-cnt .wl-cv b{color:var(--violet)} .wl-cnt .wl-cy b{color:var(--yellow)} .wl-cnt .wl-cp b{color:var(--text)}
.wl-ctl{grid-area:ctl;display:flex;gap:8px}
.wl-ctl button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 14px;border:1px solid var(--line2);background:var(--navy3);color:var(--text);font:800 italic 14px/1 var(--f-cond);text-transform:uppercase;cursor:pointer;transition:background .2s, border-color .2s, color .2s}
.wl-ctl button:hover{border-color:var(--yellow)}
/* paused by the visitor: the button turns into a yellow Play */
.wl-ctl button.wl-isp{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.wl-ctl svg{flex:none;width:12px;height:12px;fill:currentColor}
#wl-pause{min-width:106px}
#wl-pause .wl-iy,#wl-pause.wl-isp .wl-ip{display:none}
#wl-pause.wl-isp .wl-iy{display:block}
.wl-src > span{min-width:0}
.wl-src{grid-area:src;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding-top:10px;border-top:1px solid var(--line);font:500 12.5px/1.5 var(--f-mono);color:var(--muted)}
.wl-src b{color:var(--live);font-weight:700}
.wl-src a{font:800 italic 14px/1.4 var(--f-cond);text-transform:uppercase;color:var(--yellow);text-decoration:none;white-space:nowrap}
.wl-toast{position:absolute;left:50%;top:-14px;z-index:4;padding:7px 12px;background:var(--yellow);color:var(--on-yellow);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,6px);pointer-events:none}
@media (max-width:1179px){
  .wl-bar{grid-template-columns:auto minmax(110px,1fr) auto;grid-template-areas:"now prog ctl" "cnt cnt cnt" "src src src"}
  .wl-cnt{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:12px;border-top:1px solid var(--line)}
}
/* phones: clock and the two controls (icons, their names kept for screen readers) on one row, the four counters as
   one row of small tiles, the source in small type: the first card shows sooner */
@media (max-width:640px){
  .wl-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"now ctl" "prog prog" "cnt cnt" "scp scp" "src src";gap:10px 10px;padding:10px 12px 10px}
  .wl-scope{display:block;grid-area:scp;margin-top:-2px;font:500 11px/1.4 var(--f-mono);color:var(--muted)}
  .wl-cnt li > small{display:none}
  .wl-now{gap:8px}
  .wl-now time{font-size:17px}
  .wl-now small{display:none}
  .wl-ctl{gap:6px}
  .wl-ctl button,#wl-pause{width:42px;min-width:0;height:40px;padding:0}
  .wl-ctl svg{width:13px;height:13px}
  .wl-ctl button span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wl-cnt{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:10px}
  .wl-cnt li{gap:4px;padding:0 6px}
  .wl-cnt b{font-size:21px}
  .wl-cnt li > span{font-size:10px;letter-spacing:.02em;white-space:normal;line-height:1.05}
  .wl-cnt li > small{font-size:10px;white-space:normal;line-height:1.1}
  .wl-src{font-size:11.5px;line-height:1.45;padding-top:8px}
  .wl-src a{font-size:13px}
}

/* the event tape: goals, goals taken back, pulled lines and phases of the 32 matches, price moves in between */
.wl-tape{display:flex;align-items:stretch;height:38px;margin-top:10px;background:#05080D;border:1px solid var(--line);overflow:hidden;contain:layout paint}
.wl-tape-l{flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 12px;background:var(--red);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);padding-right:20px}
.wl-tape-l .wl-dot{width:7px;height:7px;background:var(--text)}
.wl-tape-v{position:relative;flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);mask:linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent)}
.wl-tape-in{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;will-change:transform}
.wl-ti{flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 14px;font:500 12.5px/1 var(--f-mono);color:var(--muted);border-right:1px solid var(--line)}
.wl-ti time{color:var(--muted)}
.wl-ti b{font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em;padding:4px 6px;background:var(--navy3);color:var(--text)}
.wl-ti em{font-style:normal;color:var(--text)}
.wl-ti.wl-tg b{background:var(--live);color:var(--on-yellow)} .wl-ti.wl-tv b{background:var(--violet);color:var(--on-yellow)}
.wl-ti.wl-tp b{background:repeating-linear-gradient(45deg, var(--navy3) 0 5px, var(--navy2) 5px 10px);color:var(--muted)}
.wl-ti.wl-tf b{background:var(--navy3);color:var(--muted)}
.wl-ti .wl-tup{color:var(--live)} .wl-ti .wl-tdn{color:var(--c-red)}
@media (max-width:640px){ .wl-tape-l{font-size:12px;padding:0 16px 0 10px} .wl-ti{font-size:12px} }

/* the cards */
.wl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(192px,auto);gap:10px;margin-top:10px}
@media (max-width:1179px){ .wl-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:899px){ .wl-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.wl-card{position:relative;min-width:0;display:flex}
.wl-in{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto auto minmax(28px,1fr) auto;grid-template-areas:"hd hd" "t1 s1" "t2 s2" "mo mo" "ev ev" "sp sp" "px px";gap:7px 10px;padding:11px 12px 12px;background:var(--navy1);border:1px solid var(--line);overflow:hidden;transition:border-color .3s, background .3s}
.wl-card:hover .wl-in{border-color:var(--line2)}
/* each card and the strip lay out on their own: a ticking clock never re-lays out the page */
.wl-in{contain:layout paint}
.wl-bar{contain:layout}
.wl-hd{grid-area:hd;display:flex;align-items:center;gap:8px;min-width:0}
.wl-lg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 italic 11.5px/1.25 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.wl-tag{flex:none;padding:4px 7px;background:var(--yellow);color:var(--on-yellow);font:800 italic 11.5px/1 var(--f-cond);text-transform:uppercase}
.wl-clk{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.wl-clk i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--red)}
.wl-clk i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:wl-ping 1.6s ease-out infinite}
.wl-clk.wl-cht{color:var(--amber)} .wl-clk.wl-cht i{background:var(--amber)}
.wl-clk.wl-cft{color:var(--muted)} .wl-clk.wl-cft i{background:var(--dim)}
.wl-clk.wl-cpre{color:var(--c-blue)} .wl-clk.wl-cpre i{background:var(--c-blue)}
.wl-clk.wl-cht i::after,.wl-clk.wl-cft i::after,.wl-clk.wl-cpre i::after{animation:none;opacity:0}
.wl-t{display:flex;align-items:center;gap:8px;min-width:0}
.wl-t1{grid-area:t1} .wl-t2{grid-area:t2}
.wl-kit{flex:none;width:9px;height:16px;transform:skewX(-14deg);background:var(--navy3);box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent)}
.wl-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14.5px/1.25 var(--f-body)}
.wl-s{position:relative;display:grid;place-items:center;min-width:24px;font:900 italic 25px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.wl-s1{grid-area:s1} .wl-s2{grid-area:s2}
.wl-s .wl-sn{display:block;transform-origin:50% 60%}
.wl-s .wl-bst{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 6deg, var(--live) 0 7deg, transparent 7deg 30deg);-webkit-mask:radial-gradient(circle, transparent 0 30%, #000 31% 68%, transparent 69%);mask:radial-gradient(circle, transparent 0 30%, #000 31% 68%, transparent 69%)}
.wl-s .wl-bst.wl-kv{background:repeating-conic-gradient(from 6deg, var(--violet) 0 7deg, transparent 7deg 30deg)}
/* a thin pitch: the ball sits where the real event puts it (drawn from the event type) */
.wl-mo{grid-area:mo;position:relative;height:18px;overflow:hidden;border:1px solid color-mix(in srgb, var(--live) 16%, transparent);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.2' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpath d='M50 0V20M0 4.5H11V15.5H0M100 4.5H89V15.5H100'/%3E%3Cellipse cx='50' cy='10' rx='5' ry='5.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(90deg, #102a1b, #15392a 50%, #102a1b)}
.wl-mo::after{content:"";position:absolute;top:0;bottom:0;right:0;width:36%;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--yellow) 42%, transparent));opacity:0;transition:opacity .35s}
.wl-mo.wl-dzr::after{opacity:1}
.wl-mo.wl-dzl::after{left:0;right:auto;background:linear-gradient(270deg, transparent, color-mix(in srgb, var(--yellow) 42%, transparent));opacity:1}
.wl-mo b{position:absolute;inset:0;transform:translate(50%,50%);transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.wl-mo b::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 9px 2px rgba(255,255,255,.65)}
.wl-ev{grid-area:ev;align-self:start;display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden}
/* the price line: home chance minus away chance, read from the Fulltime Result prices, last 8 minutes of tape */
.wl-sp{grid-area:sp;position:relative;min-height:28px;border-top:1px dashed color-mix(in srgb, var(--line2) 70%, transparent);border-bottom:1px dashed color-mix(in srgb, var(--line2) 70%, transparent)}
.wl-sp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wl-sp .wl-mid{stroke:var(--line2);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.wl-sp .wl-area{fill:url(#wl-spf)}
.wl-sp .wl-line{fill:none;stroke:var(--yellow);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wl-sp .wl-gk{stroke:var(--live);stroke-width:2;vector-effect:non-scaling-stroke}
.wl-sp .wl-gk.wl-kv{stroke:var(--violet)}
.wl-sp b{position:absolute;inset:0;transition:transform .6s ease-out, opacity .3s}
.wl-sp b::after{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px 1px color-mix(in srgb, var(--yellow) 70%, transparent)}
.wl-card.wl-feat .wl-sp{display:none}
.wl-ev i{flex:none;width:7px;height:12px;transform:skewX(-14deg);box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent)}
.wl-ev i.wl-off{visibility:hidden;width:0;margin-right:-7px}
.wl-ev b{flex:none;font:800 italic 12.5px/1.2 var(--f-cond);text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.wl-ev span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--muted)}
.wl-ev.wl-ehot b{color:var(--yellow)} .wl-ev.wl-egoal b{color:var(--live)} .wl-ev.wl-evar b{color:var(--violet)} .wl-ev.wl-ecard b{color:var(--amber)} .wl-ev.wl-ered b,.wl-ev.wl-epen b{color:var(--c-red)} .wl-ev.wl-ecor b{color:var(--text)}
.wl-px{grid-area:px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;align-self:end}
.wl-p{position:relative;display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:0;padding:9px 6px 8px;background:var(--navy2);border:1px solid var(--line);overflow:hidden}
.wl-p .wl-fl{position:absolute;inset:0;background:var(--live);opacity:0;pointer-events:none}
.wl-p.wl-dn .wl-fl{background:var(--c-red)}
.wl-p small{position:absolute;left:4px;top:3px;font:600 10px/1 var(--f-mono);color:var(--muted)}
.wl-p b{position:relative;font:600 13.5px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.wl-p .wl-ar{position:absolute;right:2px;top:1px;font:700 8px/1 var(--f-mono);font-style:normal;opacity:0}
.wl-p.wl-up .wl-ar{color:var(--live)} .wl-p.wl-dn .wl-ar{color:var(--c-red)}
.wl-p.wl-pul{background:repeating-linear-gradient(45deg, var(--navy3) 0 6px, var(--navy1) 6px 12px);border-style:dashed;border-color:var(--line2)}
.wl-p.wl-pul b{color:var(--muted);text-decoration:line-through}
.wl-p.wl-blk{border-color:color-mix(in srgb, var(--amber) 65%, transparent)} .wl-p.wl-blk b{color:var(--amber)}
/* all three prices pulled: the stripes stay, the struck numbers make room for one label on its own navy chip */
.wl-px.wl-allpul .wl-p b,.wl-px.wl-allpul .wl-p small{visibility:hidden}
.wl-px.wl-allpul::after{content:"Pulled by the feed";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 9px;background:var(--navy0);border:1px solid var(--line2);font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.03em;color:var(--text);white-space:nowrap;pointer-events:none}
/* moments: a slanted ribbon, a glow around the card */
.wl-fx{position:absolute;left:-10%;right:-10%;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;height:34px;margin-top:-17px;padding:0 14%;background:var(--live);color:var(--on-yellow);transform:translateX(-130%) skewY(-4deg);pointer-events:none}
.wl-fx b{flex:none;font:900 italic 20px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.02em}
.wl-fx span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px/1 var(--f-body)}
.wl-fx.wl-kv{background:var(--violet)} .wl-fx.wl-ky{background:var(--yellow)}
.wl-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px var(--live), inset 0 0 28px color-mix(in srgb, var(--live) 45%, transparent)}
.wl-glow.wl-kv{box-shadow:inset 0 0 0 2px var(--violet), inset 0 0 28px color-mix(in srgb, var(--violet) 50%, transparent)}
.wl-card.wl-isft .wl-in{background:color-mix(in srgb, var(--navy1) 55%, var(--navy0))}
.wl-card.wl-isft .wl-nm,.wl-card.wl-isft .wl-p b{color:var(--muted)}
.wl-cap{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:110ch}
/* the featured match: two columns, two rows, the real tracker of our live brand on top */
.wl-card.wl-feat{grid-column:span 2;grid-row:span 2}
.wl-card.wl-feat .wl-in{grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto auto 1fr;grid-template-areas:"hd hd hd hd" "trk trk trk trk" "tkc tkc tkc tkc" "t1 s1 s2 t2" "ev ev ev ev" "pxt pxt pxt pxt" "px px go go" "tl tl tl tl";gap:9px 10px;border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow), 0 30px 70px -44px color-mix(in srgb, var(--yellow) 60%, transparent)}
.wl-trkc{grid-area:tkc;margin-top:-4px;font:500 11.5px/1.35 var(--f-mono);color:var(--muted)}
/* the featured price row has a title; when the feed had pulled the line for the whole window, the boxes show its
   last prices struck, like any pulled line */
.wl-pxt{grid-area:pxt;margin-bottom:-4px;font:800 italic 12px/1.2 var(--f-cond);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.wl-pxt.wl-frz{color:var(--amber)}
.wl-card.wl-feat .wl-mo{display:none}
.wl-trk{grid-area:trk;position:relative;width:100%;aspect-ratio:400 / 220;border:1px solid var(--line);overflow:hidden;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='1.5'%3E%3Crect x='14' y='14' width='372' height='192'/%3E%3Cpath d='M200 14V206M14 62H70V158H14M386 62H330V158H386'/%3E%3Ccircle cx='200' cy='110' r='30'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(180deg, #10241a, #0b1711)}
.wl-trk::before{content:"Loading the real tracker";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb, var(--text) 45%, transparent);white-space:nowrap}
.wl-trk.wl-on::before{content:none}
/* the marker that asks js/show.js to fetch the tracker bundle early (never mounted, never seen) */
.trkshow.wl-pre,.wl-pre{position:absolute;left:0;top:0;width:1px;height:1px;aspect-ratio:auto;background:none;opacity:0;pointer-events:none}
.wl-card.wl-feat .wl-t2{flex-direction:row-reverse;text-align:right}
.wl-card.wl-feat .wl-nm{font-size:16px}
.wl-card.wl-feat .wl-s{min-width:40px;height:44px;font-size:34px;background:var(--navy2)}
.wl-card.wl-feat .wl-s1{background:var(--yellow);color:var(--on-yellow)}
.wl-card.wl-feat .wl-ev{justify-content:center}
.wl-card.wl-feat .wl-px{align-self:center}
.wl-go{grid-area:go;align-self:center;justify-self:end;font:800 italic 14.5px/1.15 var(--f-cond);text-transform:uppercase;color:var(--yellow);text-decoration:none;text-align:right}
.wl-go:hover{text-decoration:underline}
/* one row of chips that scrolls to the latest: the card keeps its height for the whole replay */
.wl-tl{grid-area:tl;align-self:end;display:flex;flex-wrap:nowrap;gap:6px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.wl-tl::-webkit-scrollbar{display:none}
.wl-tl li{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 8px;background:var(--navy2);border-left:3px solid var(--live);font:600 12px/1 var(--f-mono);color:var(--text);white-space:nowrap}
.wl-tl li b{font:800 italic 12.5px/1 var(--f-cond);text-transform:uppercase;color:var(--live)}
.wl-tl li.wl-kv{border-left-color:var(--violet)} .wl-tl li.wl-kv b{color:var(--violet)}
.wl-tl li.wl-st{border-left-color:var(--line2);color:var(--muted)} .wl-tl li.wl-st b{color:var(--muted)}
/* phones: the featured match on top, then a live list (prices beside the teams), like a player's live page */
@media (max-width:699px){
  .wl-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:8px}
  .wl-card.wl-feat{grid-column:auto;grid-row:auto}
  .wl-card:not(.wl-feat) .wl-in{grid-template-columns:minmax(0,1fr) auto 148px;grid-template-rows:auto auto auto auto;grid-template-areas:"hd hd hd" "t1 s1 px" "t2 s2 px" "ev ev ev";gap:6px 10px;padding:10px 12px 13px}
  .wl-card:not(.wl-feat) .wl-mo{position:absolute;left:0;right:0;bottom:0;height:3px;border:0;background:color-mix(in srgb, var(--live) 22%, transparent)}
  .wl-card:not(.wl-feat) .wl-mo::after{width:30%}
  .wl-card:not(.wl-feat) .wl-mo b::after{left:-3px;top:-1.5px;width:6px;height:6px}
  .wl-card:not(.wl-feat) .wl-px{gap:4px;align-self:center}
  .wl-card:not(.wl-feat) .wl-p{flex-direction:column;align-items:center;gap:4px;padding:6px 2px 7px}
  .wl-card:not(.wl-feat) .wl-p b{font-size:13px}
  .wl-card:not(.wl-feat) .wl-p small{position:static;font-size:10px}
  .wl-card:not(.wl-feat) .wl-sp{display:none}
  .wl-nm{font-size:14px}
  .wl-s{font-size:22px}
  .wl-card.wl-feat .wl-in{grid-template-areas:"hd hd hd hd" "trk trk trk trk" "tkc tkc tkc tkc" "t1 s1 s2 t2" "ev ev ev ev" "pxt pxt pxt pxt" "px px px px" "go go go go" "tl tl tl tl";grid-template-rows:none;padding:10px}
  .wl-card:not(.wl-feat) .wl-px.wl-allpul::after{padding:4px 6px;font-size:11px}
  .wl-card.wl-feat .wl-nm{font-size:14px}
  .wl-card.wl-feat .wl-s{min-width:34px;height:38px;font-size:28px}
  .wl-go{justify-self:start;text-align:left}
}

/* ---------- real-time chain: fired by real goals of the wall ---------- */
.rtx{display:grid;gap:14px}
.rtx-side{display:grid;gap:12px;min-width:0}
.rt-ev{transition:background .45s}
.rt-ev.rtx-back{background:color-mix(in srgb, var(--violet) 34%, var(--navy0))}
.rt-ev.rtx-back small{color:var(--violet)}
.rt-ev b{max-width:100%}
.rt-ev span{max-width:44ch}
.rtx-live{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px;font:600 12.5px/1.4 var(--f-mono);color:var(--muted)}
.rtx-live .wl-dot{background:var(--live)}
.rtx-live time{color:var(--text)}
/* paused on the wall: the chain says so and has its own Play */
.rtx .rtx-off,.rtx.wl-upause .rtx-on{display:none}
.rtx.wl-upause .rtx-off{display:inline}
.rtx.wl-upause .rtx-live .wl-dot{background:var(--amber)}
.rtx-play{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--yellow);background:var(--yellow);color:var(--on-yellow);font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;cursor:pointer}
.rtx-play:hover{filter:brightness(1.06)}
.rtx-play svg{width:11px;height:11px;fill:currentColor}
.rtx-log{display:grid;gap:5px}
.rtx-log li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 10px;background:var(--navy1);border-left:3px solid var(--live);font-size:13.5px}
.rtx-log li.rtx-v{border-left-color:var(--violet)}
.rtx-log time{font:600 11.5px/1 var(--f-mono);color:var(--muted)}
.rtx-log b{font:800 italic 13px/1 var(--f-cond);text-transform:uppercase;color:var(--live);white-space:nowrap}
.rtx-log li.rtx-v b{color:var(--violet)}
.rtx-log span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.rt-c{overflow:hidden}
.rt-c::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rt-c.on::before{transform:scaleX(1)}
.rt-c.rtx-v::before{background:var(--violet)}
.rt-c.rtx-v.on{border-color:var(--violet);background:color-mix(in srgb, var(--violet) 11%, var(--navy1))}
.rt-c.rtx-v.on i{color:var(--violet)}
.rtx-note{margin-top:14px;max-width:110ch}
.rtx-note b{color:var(--live)}
.rtx-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
@media (max-width:760px){ .rtx-proof{grid-template-columns:minmax(0,1fr)} }
.rtx-proof div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 16px;background:var(--navy1);border:1px solid var(--line);border-left:4px solid var(--violet)}
.rtx-proof b{grid-row:span 2;font:900 italic clamp(30px,3vw,42px)/1 var(--f-cond);color:var(--violet);font-variant-numeric:tabular-nums}
.rtx-proof span{font-size:14.5px}
.rtx-proof small{font:500 11.5px/1.45 var(--f-mono);color:var(--muted)}

/* ---------- engine pulse: one real day, on a crimson band ---------- */
main > .sec.alt.pz::before{background:
  repeating-linear-gradient(100deg, transparent 0 60px, color-mix(in srgb, var(--text) 4%, transparent) 60px 74px),
  radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 70%),
  var(--red)}
.pz .kick::before{background:var(--navy0)}
.pz-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px 44px;align-items:end;margin-bottom:clamp(28px,3.4vw,46px)}
@media (max-width:900px){ .pz-head{grid-template-columns:minmax(0,1fr)} }
.pz-head h2{font-size:clamp(32px,4.2vw,60px);line-height:.95;margin-top:14px}
.pz-head h2 em{font-style:normal;color:var(--yellow)}
.pz-head p{font-size:clamp(15.5px,1.2vw,17.5px);color:color-mix(in srgb, var(--text) 92%, transparent);max-width:56ch}
.pz-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr) minmax(0,1fr) minmax(0,.8fr)}
.pz-n{display:grid;gap:10px;align-content:start;padding:4px 22px;border-left:2px solid color-mix(in srgb, var(--text) 24%, transparent);min-width:0}
.pz-n:first-child{border-left:0;padding-left:0}
.pz-n > b{font:900 italic clamp(38px,4.6vw,70px)/1 var(--f-cond);font-stretch:88%;color:var(--yellow);white-space:nowrap}
.pz-n > span{font:600 15px/1.35 var(--f-body)}
.pz-n > small{font:600 12.5px/1.35 var(--f-mono);color:color-mix(in srgb, var(--text) 82%, transparent)}
@media (max-width:1000px){ .pz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0} .pz-n:nth-child(3){border-left:0;padding-left:0} }
@media (max-width:560px){ .pz-grid{grid-template-columns:minmax(0,1fr);gap:22px} .pz-n{border-left:0;padding:0 0 18px;border-bottom:2px solid color-mix(in srgb, var(--text) 20%, transparent)} .pz-n:last-child{border-bottom:0;padding-bottom:0} .pz-n > b{font-size:54px} }
.pz-sp{display:grid;gap:12px;margin-top:clamp(28px,3.4vw,44px)}
.pz-sp h3{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font:800 italic 15px/1.2 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.pz-sp h3 span{font:600 12.5px/1.3 var(--f-mono);text-transform:none;color:color-mix(in srgb, var(--text) 85%, transparent)}
.pz-bar{display:flex;gap:3px;height:18px}
.pz-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.pz.pz-go .pz-bar i{transform:none}
.pz-leg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
@media (max-width:760px){ .pz-leg{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pz-leg li{display:grid;gap:4px;padding-left:12px;border-left:5px solid var(--sc, var(--yellow))}
.pz-leg b{font:800 italic 17px/1 var(--f-cond);text-transform:uppercase}
.pz-leg span{font:600 12.5px/1.35 var(--f-mono);color:color-mix(in srgb, var(--text) 88%, transparent)}
.pz-s-soccer{--sc:var(--yellow)} .pz-s-basketball{--sc:#FFFFFF} .pz-s-tennis{--sc:var(--navy0)} .pz-s-volleyball{--sc:var(--live)}
.pz-bar .pz-s-soccer{background:var(--yellow)} .pz-bar .pz-s-basketball{background:#FFFFFF} .pz-bar .pz-s-tennis{background:var(--navy0)} .pz-bar .pz-s-volleyball{background:var(--live)}
.pz-src{margin-top:18px;font:500 12.5px/1.5 var(--f-mono);color:color-mix(in srgb, var(--text) 86%, transparent)}
.pz-src b{color:var(--yellow)}
.pz-facts{margin-top:clamp(30px,3.6vw,48px);display:grid;gap:12px}
.pz-facts h3{font:800 italic 15px/1 var(--f-cond);text-transform:uppercase;color:var(--yellow)}
.pz-facts .stats{box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}

/* widget lab: the real match's states */
.wg-odds span.lock{background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--amber) 22%, transparent) 0 6px, transparent 6px 12px);color:var(--amber)}
.wg-odds span.lock b{color:var(--amber)}
.wg-teams b.hit{animation:wghit 1.1s ease}
@keyframes wghit{0%{transform:scale(1.7);color:var(--wc);text-shadow:0 0 18px var(--wc)}100%{transform:none}}
.wg-ball{transition:left .7s cubic-bezier(.3,.7,.3,1), top .7s cubic-bezier(.3,.7,.3,1)}
#w-src{margin-top:10px;text-align:center}


/* back office console (platform build) */

/* console: always dark, like a product screenshot */
.console{background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);font:400 13px/1.45 var(--f-body);min-width:0}
.c-chrome{display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:var(--c-side);border-bottom:1px solid var(--c-line)}
.c-dots{display:flex;gap:6px;flex:none}
.c-dots i{width:10px;height:10px;border-radius:50%;background:var(--c-line)}
.c-url{font:500 11.5px/1 var(--f-mono);color:var(--c-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-right{margin-left:auto;display:flex;align-items:center;gap:12px;font:500 11px/1 var(--f-mono);color:var(--c-mut);white-space:nowrap}
.c-demo{color:var(--c-amber)}
.c-live{display:inline-flex;align-items:center;gap:6px;color:var(--c-green);font-weight:600}
.c-live i{width:7px;height:7px;border-radius:50%;background:var(--c-green);animation:cpulse 1.6s infinite}
@keyframes cpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--c-green) 60%, transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:760px){ .c-demo,.c-url{display:none} }
.c-body{display:grid;grid-template-columns:172px minmax(0,1fr)}
.c-side{background:var(--c-side);border-right:1px solid var(--c-line);padding:14px 10px;display:flex;flex-direction:column;gap:12px}
.c-org{display:flex;align-items:center;gap:10px;padding:4px 8px;font-weight:600}
.c-org i{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg, var(--c-green), var(--c-green2))}
.c-sec{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-dim);padding:6px 10px 0}
.c-nav{display:grid;gap:2px}
.c-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--c-mut);font:500 13px/1 var(--f-body);cursor:pointer;text-align:left;white-space:nowrap}
.c-nav button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c-nav button:hover{background:var(--c-panel);color:var(--c-ink)}
.c-nav button.on{background:var(--c-panel2);color:var(--c-ink)}
.c-nav em{margin-left:auto;font:600 10.5px/1 var(--f-mono);font-style:normal;background:var(--c-red);color:var(--c-white);border-radius:999px;padding:3px 6px}
.c-nav em[hidden]{display:none}
.c-me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 2px;border-top:1px solid var(--c-line);font-size:12px;color:var(--c-mut)}
.c-me i{width:28px;height:28px;border-radius:50%;background:var(--c-panel2);display:grid;place-items:center;font:600 11px/1 var(--f-mono);font-style:normal;color:var(--c-ink)}
@media (max-width:900px){
  .c-body{grid-template-columns:minmax(0,1fr)}
  .c-side{flex-direction:row;padding:8px;border-right:0;border-bottom:1px solid var(--c-line);overflow-x:auto}
  .c-org,.c-sec,.c-me{display:none}
  .c-nav{display:flex;gap:4px}
  .c-nav button{width:auto}
}
.c-main{padding:16px;display:grid;gap:12px;align-content:start;min-width:0}
.c-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.c-head h4{font:700 18px/1.15 var(--f-display);font-stretch:112%;letter-spacing:-.01em}
.c-head p{font-size:12px;color:var(--c-mut)}
.c-filt{display:flex;flex-wrap:wrap;gap:6px}
.c-filt span{font:500 11.5px/1 var(--f-mono);padding:7px 10px;border:1px solid var(--c-line);border-radius:7px;color:var(--c-mut)}
.c-view{display:grid;gap:12px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.kpi{background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;padding:11px 12px 10px;display:grid;gap:5px;min-width:0}
.kpi span{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font:650 18px/1.1 var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b.bump{animation:bump .7s ease}
@keyframes bump{0%{color:var(--c-green)}100%{color:var(--c-ink)}}
.kpi small{font:500 11px/1.2 var(--f-mono);color:var(--c-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi svg{width:100%;height:22px;display:block}
@media (max-width:1180px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.abar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:color-mix(in srgb, var(--c-red) 9%, var(--c-panel));border:1px solid color-mix(in srgb, var(--c-red) 35%, var(--c-line));font-size:12.5px;min-width:0}
.abar.warn{background:color-mix(in srgb, var(--c-amber) 8%, var(--c-panel));border-color:color-mix(in srgb, var(--c-amber) 30%, var(--c-line))}
.abar.info{background:color-mix(in srgb, var(--c-blue) 8%, var(--c-panel));border-color:color-mix(in srgb, var(--c-blue) 30%, var(--c-line))}
.abar b{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;white-space:nowrap}
.abar .tx{color:var(--c-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.abar button{border:1px solid var(--c-line);background:var(--c-panel2);color:var(--c-ink);border-radius:6px;padding:6px 9px;font:500 11.5px/1 var(--f-body);cursor:pointer;white-space:nowrap}
.c-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px}
@media (max-width:1000px){ .c-grid{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;min-width:0;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .4s}
.card.ping{box-shadow:0 0 0 1px var(--c-green), 0 0 34px color-mix(in srgb, var(--c-green) 30%, transparent)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--c-line)}
.card-h b{font-weight:600;font-size:13px}
.card-h span{font:500 11px/1 var(--f-mono);color:var(--c-dim);white-space:nowrap}
.cpill{font:600 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:color-mix(in srgb, var(--c-red) 16%, transparent);color:var(--c-red)}
@keyframes rowin{from{background:color-mix(in srgb, var(--c-green) 16%, transparent);transform:translateY(-4px);opacity:.25}to{background:transparent;transform:none;opacity:1}}
.tk-list{display:grid;height:380px;overflow:hidden;align-content:start}
.tk{display:grid;grid-template-columns:52px 88px minmax(0,1fr) 66px minmax(0,auto);gap:10px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--c-line);font-size:12.5px;white-space:nowrap;animation:rowin .6s ease}
.tk .t,.tk .od,.tk .sk{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tk .t{color:var(--c-dim);font-size:11.5px}
.tk .pl,.tk .bt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tk .pl em,.tk .bt i{display:block;font-style:normal;font-size:10.5px;color:var(--c-dim);overflow:hidden;text-overflow:ellipsis}
.tk .bt i{color:var(--c-mut)}
.tk .od{text-align:right;color:var(--c-mut)}
.tk .sk{text-align:right;font-weight:600}
.tk .fl{display:flex;gap:4px;justify-content:flex-end}
.tk.you{background:color-mix(in srgb, var(--c-green) 9%, transparent)}
@media (max-width:700px){ .tk{grid-template-columns:48px minmax(0,1fr) 62px minmax(0,auto)} .tk .pl{display:none} }
.flag{font:600 9.5px/1 var(--f-mono);letter-spacing:.05em;padding:4px 5px;border-radius:4px;text-transform:uppercase;white-space:nowrap}
.flag.big{background:color-mix(in srgb, var(--c-amber) 16%, transparent);color:var(--c-amber)}
.flag.long{background:color-mix(in srgb, var(--c-blue) 16%, transparent);color:var(--c-blue)}
.flag.vel{background:color-mix(in srgb, var(--c-violet) 18%, transparent);color:var(--c-violet)}
.flag.link{background:color-mix(in srgb, var(--c-red) 16%, transparent);color:var(--c-red)}
.flag.you{background:var(--c-green);color:var(--c-on)}
.flag.co{border:1px solid var(--c-amber);color:var(--c-amber)}
.lb{padding:10px 14px;border-bottom:1px solid var(--c-line);display:grid;gap:6px}
.lb-h{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;min-width:0}
.lb-h b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-h span{font:500 11px/1.4 var(--f-mono);color:var(--c-mut);white-space:nowrap}
.lb.susp .lb-h span{color:var(--c-amber)}
.lb-r{display:grid;grid-template-columns:16px minmax(0,1fr) 62px;gap:8px;align-items:center;font:500 11px/1 var(--f-mono)}
.lb-r span{color:var(--c-dim)}
.lb-r b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:3px;background:var(--c-panel2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--c-blue);transition:width .5s ease}
.bar i.hot{background:var(--c-amber)}
.sr-list{display:grid;height:330px;overflow:hidden;align-content:start}
.sr{display:grid;grid-template-columns:56px minmax(0,1fr) auto 84px 78px;gap:4px 10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--c-line);font-size:12.5px;animation:rowin .6s ease}
.sr .t{font:500 11.5px/1 var(--f-mono);color:var(--c-dim)}
.sr .m{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.sr .m i{display:block;font-style:normal;font-size:11px;color:var(--c-mut);overflow:hidden;text-overflow:ellipsis}
.sr .lg,.sr .at{font:500 11px/1.3 var(--f-mono);color:var(--c-mut);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .det{grid-column:2 / -1;font:500 11px/1.4 var(--f-mono);color:var(--c-violet);white-space:normal}
.sr.var{background:color-mix(in srgb, var(--c-violet) 9%, transparent)}
.sr.you{box-shadow:inset 3px 0 0 var(--c-green)}
@media (max-width:700px){ .sr{grid-template-columns:minmax(0,1fr) auto 70px} .sr .t,.sr .at{display:none} .sr .det{grid-column:1 / -1} }
.res{font:600 9.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:4px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.res.won{background:color-mix(in srgb, var(--c-green) 16%, transparent);color:var(--c-green)}
.res.lost{background:color-mix(in srgb, var(--c-red) 16%, transparent);color:var(--c-red)}
.res.edge{background:color-mix(in srgb, var(--c-blue) 16%, transparent);color:var(--c-blue)}
.res.var{background:color-mix(in srgb, var(--c-violet) 22%, transparent);color:var(--c-violet)}
.res.paid{background:var(--c-green);color:var(--c-on)}
.chart-box{padding:10px 14px 4px}
.chart-box svg{width:100%;height:172px;display:block}
.mini{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--c-line)}
.mini div{padding:10px 14px;display:grid;gap:3px}
.mini div+div{border-left:1px solid var(--c-line)}
.mini span{font:500 10px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-dim)}
.mini b{font:600 15px/1.1 var(--f-body);font-variant-numeric:tabular-nums}
.c-status{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 2px 0;border-top:1px solid var(--c-line);font:500 11px/1.4 var(--f-mono);color:var(--c-mut)}
.c-status span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-green);margin-right:6px;vertical-align:1px}
.c-status b{color:var(--c-ink);font-weight:500}
/* other console views */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--c-panel);border:1px solid var(--c-line);border-radius:9px;padding:9px 12px;font-size:12px;color:var(--c-mut)}
.chip b{display:block;font:600 17px/1.2 var(--f-body);color:var(--c-ink);font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
.ftable{width:100%;border-collapse:collapse;font-size:12.5px}
.ftable th{text-align:left;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-dim);padding:10px 14px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.ftable td{padding:9px 14px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.ftable .r{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ftable .pos{color:var(--c-green)} .ftable .neg{color:var(--c-red)}
.ftable tr.hot td{animation:rowin .8s ease}
.ftable tr.you td{background:color-mix(in srgb, var(--c-green) 9%, transparent)}
.chan{font:500 10.5px/1 var(--f-mono);padding:3px 6px;border-radius:4px;background:var(--c-panel2);color:var(--c-mut)}
.risk-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
@media (max-width:1000px){ .risk-grid{grid-template-columns:minmax(0,1fr)} }
.al-list{display:grid;align-content:start}
.al{display:grid;grid-template-columns:62px 110px minmax(0,1fr);gap:10px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--c-line);font-size:12.5px}
.al .t{font:500 11px/1 var(--f-mono);color:var(--c-dim)}
.al b{font:600 10.5px/1.3 var(--f-mono);letter-spacing:.06em}
.al.crit b{color:var(--c-red)} .al.warn b{color:var(--c-amber)} .al.info b{color:var(--c-blue)}
.al .x{color:var(--c-mut);min-width:0}
@media (max-width:560px){ .al{grid-template-columns:90px minmax(0,1fr)} .al .t{display:none} }
.mtable{width:100%;border-collapse:collapse;font-size:12.5px}
.mtable td{padding:10px 14px;border-bottom:1px solid var(--c-line)}
.mtable td:first-child{font-weight:600}
.mtable td.r{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ok{font:600 9.5px/1 var(--f-mono);letter-spacing:.06em;padding:4px 6px;border-radius:4px;background:color-mix(in srgb, var(--c-green) 16%, transparent);color:var(--c-green)}
.sys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .sys-grid{grid-template-columns:minmax(0,1fr)} }
.feeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;padding:12px 14px}
.fd{background:var(--c-panel2);border-radius:8px;padding:10px;display:grid;gap:3px}
.fd b{font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:6px}
.fd b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-green)}
.fd span{font:600 16px/1.1 var(--f-mono);font-variant-numeric:tabular-nums}
.fd small{font:500 10px/1 var(--f-mono);color:var(--c-dim)}
.cells{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;padding:14px}
.cells i,.shr i{display:block;aspect-ratio:1;border-radius:3px;background:var(--c-green);opacity:.2}
.shr{display:grid;grid-template-columns:52px repeat(16,1fr);gap:4px;align-items:center;padding:8px 14px;font:500 10.5px/1 var(--f-mono);color:var(--c-dim)}
.sys-dl{display:grid}
.sys-dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--c-line);font-size:12.5px}
.sys-dl dt{color:var(--c-mut)}
.sys-dl dd{font-family:var(--f-mono);font-variant-numeric:tabular-nums}


/* phone (platform build) */

.phone{position:relative;width:336px;max-width:100%;aspect-ratio:9/19;border-radius:46px;border:9px solid var(--p-edge);background:var(--p-bg);overflow:hidden;box-shadow:var(--shadow), 0 0 0 1px var(--line2);color:var(--c-ink)}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:92px;height:24px;border-radius:20px;background:var(--p-edge);z-index:9}
.p-screen{position:absolute;inset:0;display:flex;flex-direction:column;font:400 13px/1.4 var(--f-body)}
.p-sbar{display:flex;justify-content:space-between;padding:13px 24px 4px;font:600 11.5px/1 var(--f-mono)}
.p-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 8px}
.p-logo{display:inline-flex;align-items:center;gap:7px;font:800 14px/1 var(--f-display);font-stretch:122%;letter-spacing:.03em}
.p-logo i{width:11px;height:11px;border-radius:3px;background:var(--p-brand)}
.p-bal{font:500 10.5px/1.2 var(--f-mono);color:var(--c-mut);text-align:right}
.p-bal b{display:block;font-size:13px;color:var(--c-ink);transition:color .4s}
.p-bal b.up{color:var(--p-brand)}
.p-body{flex:1;overflow-y:auto;padding:2px 10px 10px;scrollbar-width:none;min-height:0}
.p-body::-webkit-scrollbar{display:none}
.p-view{display:grid;gap:8px;align-content:start}
.p-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-top:1px solid var(--p-line);padding:8px 8px 20px;background:var(--p-bg)}
.p-tabs button{border:0;background:transparent;color:var(--c-mut);font:600 12px/1 var(--f-body);padding:10px 4px;border-radius:9px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:6px}
.p-tabs button.on{color:var(--p-brand);background:var(--p-card)}
.p-tabs em{font:700 10px/1 var(--f-mono);font-style:normal;min-width:17px;padding:3px 4px;border-radius:999px;background:var(--p-brand);color:var(--p-on);text-align:center}
.p-tabs em.zero{background:var(--p-line);color:var(--c-mut)}
.p-banner{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid color-mix(in srgb, var(--p-brand) 45%, transparent);background:color-mix(in srgb, var(--p-brand) 10%, var(--p-card));color:var(--c-ink);border-radius:11px;padding:10px 12px;font:600 12px/1.2 var(--f-body);cursor:pointer;text-align:left}
.p-banner span{color:var(--p-brand);font-weight:700}
.pm{background:var(--p-card);border:1px solid var(--p-line);border-radius:12px;padding:10px;display:grid;gap:8px;transition:border-color .3s}
.pm-top{display:flex;justify-content:space-between;font:500 10.5px/1 var(--f-mono);color:var(--c-mut);text-transform:uppercase;letter-spacing:.06em}
.pm-top .clk{color:var(--c-red)}
.pm-teams{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-weight:600;font-size:13px}
.pm-teams b{font-variant-numeric:tabular-nums;text-align:right}
.pm-mk{font:500 10px/1 var(--f-mono);color:var(--c-dim);text-transform:uppercase;letter-spacing:.06em}
.pm-odds{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px}
.ob{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:9px;border-radius:8px;border:1px solid var(--p-line);background:var(--p-card2);font:500 11.5px/1 var(--f-mono);color:var(--c-mut);cursor:pointer;transition:background .2s, border-color .2s}
.ob b{color:var(--c-ink);font-weight:600}
.ob:hover:not([disabled]){border-color:var(--p-brand)}
.ob.sel{background:var(--p-brand);border-color:var(--p-brand);color:var(--p-on)}
.ob.sel b{color:var(--p-on)}
.ob.up b{animation:oup 1.2s ease}
.ob.down b{animation:odown 1.2s ease}
@keyframes oup{0%,40%{color:var(--c-green)}}
@keyframes odown{0%,40%{color:var(--c-red)}}
.ob[disabled]{cursor:default;opacity:.4}
.pm.susp{border-color:color-mix(in srgb, var(--c-amber) 50%, transparent)}
.pm .slock{display:none;font:600 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-amber)}
.pm.susp .slock{display:block}
.p-empty{display:grid;gap:6px;text-align:center;padding:40px 16px;color:var(--c-mut)}
.p-empty b{color:var(--c-ink);font-size:14px}
.sl{display:grid;grid-template-columns:minmax(0,1fr) auto 26px;gap:8px;align-items:center;background:var(--p-card);border:1px solid var(--p-line);border-radius:11px;padding:10px}
.sl div{min-width:0}
.sl div b{display:block;font-size:13px}
.sl div span{display:block;font-size:11px;color:var(--c-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl .so{font:600 13px/1 var(--f-mono)}
.sx{border:0;background:var(--p-card2);color:var(--c-mut);border-radius:6px;height:26px;cursor:pointer}
.sl-type{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-dim);padding:4px 2px 0}
.stakes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stakes button{border:1px solid var(--p-line);background:var(--p-card);border-radius:8px;padding:10px 0;font:600 12.5px/1 var(--f-mono);cursor:pointer;color:var(--c-mut)}
.stakes button.on{border-color:var(--p-brand);color:var(--p-brand)}
.sl-sum{display:grid;grid-template-columns:1fr auto;gap:6px;padding:10px 12px;border-radius:11px;background:var(--p-card)}
.sl-sum span{color:var(--c-mut);font-size:12px}
.sl-sum b{font:600 13px/1.2 var(--f-mono);text-align:right}
.place{width:100%;border:0;border-radius:11px;padding:14px;background:var(--p-brand);color:var(--p-on);font:700 14px/1 var(--f-body);cursor:pointer}
.place[disabled]{background:var(--p-line);color:var(--c-mut);cursor:default}
.sl-note{font-size:11px;color:var(--c-dim);text-align:center}
.bc{background:var(--p-card);border:1px solid var(--p-line);border-radius:12px;padding:11px;display:grid;gap:8px}
.bc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bc-h b{font-size:12.5px}
.bst{font:600 9.5px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;padding:4px 6px;border-radius:4px;white-space:nowrap}
.bst.open{background:color-mix(in srgb, var(--c-blue) 18%, transparent);color:var(--c-blue)}
.bst.held{background:color-mix(in srgb, var(--c-amber) 18%, transparent);color:var(--c-amber)}
.bst.won{background:var(--p-brand);color:var(--p-on)}
.bst.lost{background:color-mix(in srgb, var(--c-red) 18%, transparent);color:var(--c-red)}
.bst.cash{border:1px solid var(--c-amber);color:var(--c-amber)}
.bl{display:grid;grid-template-columns:12px minmax(0,1fr);gap:9px;align-items:start}
.bd{width:10px;height:10px;border-radius:50%;margin-top:4px;border:2px solid var(--c-blue)}
.bd.open{animation:bdp 1.4s infinite}
@keyframes bdp{50%{opacity:.35}}
.bd.won{background:var(--p-brand);border-color:var(--p-brand)}
.bd.lost{background:var(--c-red);border-color:var(--c-red)}
.bl b{display:block;font-size:12.5px}
.bl b i{font-style:normal;font-family:var(--f-mono);color:var(--c-mut);font-weight:500}
.bl span{display:block;font:500 10.5px/1.4 var(--f-mono);color:var(--c-mut)}
.bc-n{display:flex;justify-content:space-between;gap:6px;font:500 10.5px/1.3 var(--f-mono);color:var(--c-mut);padding-top:6px;border-top:1px solid var(--p-line)}
.bc-n b{color:var(--c-ink);font-weight:600}
.hold{display:grid;gap:6px;padding:9px;border-radius:9px;background:color-mix(in srgb, var(--c-amber) 10%, var(--p-card2))}
.hold span{font:500 11px/1.3 var(--f-mono);color:var(--c-amber)}
.hbar{height:4px;border-radius:2px;background:var(--p-line);overflow:hidden}
.hbar i{display:block;height:100%;width:0;background:var(--c-amber);transition:width .25s linear}
.cbt{width:100%;border:0;border-radius:9px;padding:11px;background:var(--c-amber);color:var(--p-on);font:700 13px/1 var(--f-body);cursor:pointer}
.cbt.confirm{background:var(--p-brand)}
.cbt[disabled]{background:var(--p-line);color:var(--c-mut);cursor:default}
.bc-done{font:600 11.5px/1.3 var(--f-mono);color:var(--c-amber)}
.bc-done.ok{color:var(--p-brand)}
.p-toast{position:absolute;left:10px;right:10px;top:40px;z-index:8;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;padding:10px 12px;border-radius:14px;background:var(--p-card2);border:1px solid var(--p-line);box-shadow:0 14px 30px rgba(0,0,0,.5);transform:translateY(-170%);transition:transform .45s cubic-bezier(.2,.9,.25,1.1)}
.p-toast.on{transform:none}
.p-toast i{grid-row:span 2;width:28px;height:28px;border-radius:8px;background:var(--p-brand)}
.p-toast b{font-size:12.5px}
.p-toast span{font-size:11.5px;color:var(--c-mut)}