/* Prop Edge Board page, v7. Design reference: design/board-v7 (built on the home page's v7 system). Tokens first, then
   components, then breakpoints.
   The home page's system carried into the tool: the capsule nav, the night arena with its one horizon light (short, so
   the bets come first), then the light body: white cards, hairlines, Instrument Sans for reading and Archivo condensed
   for every number. Cyan marks the logo, the active page, focus and the chart's handle; green means value only.
   State classes that script toggles all start with "is-" and are styled only together with their component, so a
   state can never restyle another component that happens to share a class name. */
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Variable.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/Archivo-Variable.ttf") format("truetype");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --night:#060910;--night-2:#0B1120;--day:#F5F7FA;--card:#FFFFFF;
  --ink:#0D1320;--ink-2:#4B566B;--ink-3:#7C869A;--line:rgba(13,19,32,.08);--line-2:rgba(13,19,32,.13);
  --ink-d:#EEF1F6;--ink-d2:#9BA5B7;--ink-d3:#687386;--line-d:rgba(255,255,255,.10);
  --cyan:#33E1FF;--cyan-day:#007A96;--pos:#0A7A4E;--pos-d:#3DD68C;--warn:#9A6100;--warn-d:#F0B44C;
  --sans:"Instrument Sans",ui-sans-serif,-apple-system,"SF Pro Text",system-ui,sans-serif;
  --num:"Archivo","Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);--ease-ui:cubic-bezier(.4,0,.2,1);
  --gut:clamp(16px,3vw,40px);--r-card:24px;--r-pane:20px;
  /* the working tokens: the light body by default, the night theme swaps them */
  --page:var(--day);--surface:#FFFFFF;--surface-2:#F7F9FC;--hover:#F9FAFC;--sel:#F2F5F9;
  --t1:var(--ink);--t2:var(--ink-2);--t3:var(--ink-3);--ln:var(--line);--ln2:var(--line-2);
  --accent:var(--cyan-day);--green:var(--pos);--green-soft:rgba(10,122,78,.08);--green-line:rgba(10,122,78,.4);
  --amber:var(--warn);--amber-soft:rgba(154,97,0,.08);--solid:var(--ink);--solid-ink:#FFFFFF;
  --win-top:#2BC47E;--win-bot:#0A7A4E;--off:#B9C1CE;--push:#1F2636;
  --shadow:0 1px 2px rgba(13,19,32,.04),0 18px 40px -30px rgba(13,19,32,.22);
  --frost:rgba(245,247,250,.76);color-scheme:light}
:root[data-theme="dark"]{
  --page:#070A12;--surface:#0D1321;--surface-2:#111829;--hover:rgba(255,255,255,.025);--sel:rgba(255,255,255,.05);
  --t1:var(--ink-d);--t2:var(--ink-d2);--t3:var(--ink-d3);--ln:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.12);
  --accent:var(--cyan);--green:var(--pos-d);--green-soft:rgba(61,214,140,.11);--green-line:rgba(61,214,140,.5);
  --amber:var(--warn-d);--amber-soft:rgba(240,180,76,.12);--solid:var(--ink-d);--solid-ink:var(--night);
  --win-top:#3DD68C;--win-bot:#2AA86C;--off:#465062;--push:#E6EAF1;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 50px -34px rgba(0,0,0,.8);
  --frost:rgba(6,9,16,.74);color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;color:var(--t1);background:var(--page);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.num{font-family:var(--num);font-stretch:78%;font-weight:600;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pos{color:var(--green)}
[hidden]{display:none!important}

/* ---------- nav: the home page's floating glass capsule, dark over the arena, light once the page turns ---------- */
.nav{position:fixed;top:16px;left:var(--gut);right:var(--gut);z-index:50;height:60px;border-radius:var(--r-pane);
  display:flex;align-items:center;gap:24px;padding:0 10px 0 22px;color:var(--ink-d);
  --nl:var(--line-d);--nf:rgba(255,255,255,.04);--nh:rgba(255,255,255,.09);--nc:rgba(255,255,255,.14);--nlogo:var(--cyan);
  background:rgba(8,12,22,.42);border:1px solid var(--line-d);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  transition:background .4s var(--ease-ui),color .4s var(--ease-ui),border-color .4s var(--ease-ui)}
:root:not([data-theme="dark"]) .nav.is-day{background:rgba(255,255,255,.72);color:var(--ink);border-color:var(--line);
  --nl:var(--line-2);--nf:rgba(255,255,255,.7);--nh:#fff;--nc:rgba(13,19,32,.07);--nlogo:var(--cyan-day)}
:root[data-theme="dark"] .nav.is-day{background:rgba(8,12,22,.72)}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:500 18px/1 var(--sans);letter-spacing:-.02em;flex:none}
.logo svg{width:21px;height:21px}.logo circle{fill:var(--nlogo,var(--cyan))}
.logo b{font-weight:700}.logo span{font-weight:400;margin-left:-9px}
.nav .links{display:flex;gap:26px;font-size:14px;margin-left:10px}
.nav .links a{text-decoration:none;opacity:.72;transition:opacity .2s}.nav .links a:hover{opacity:1}
.nav .links a[aria-current="page"]{opacity:1;color:var(--nlogo)}
.navr{display:flex;gap:8px;align-items:center;margin-left:auto}
.nb{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--nl);background:var(--nf);
  font:500 14px/1 var(--sans);cursor:pointer;white-space:nowrap;color:inherit;transition:background .2s var(--ease-ui)}
.nb:hover{background:var(--nh)}
.nb svg{width:16px;height:16px;flex:none}
.nb.icon{width:40px;padding:0;justify-content:center}
.count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--nc);font:600 12px/20px var(--num);font-stretch:85%;text-align:center}
.count.hot{background:var(--ink-d);color:var(--night)}
:root:not([data-theme="dark"]) .nav.is-day .count.hot{background:var(--ink);color:#fff}

/* ---------- the arena: the home hero's night and horizon light, cut to a band so the bets come first ---------- */
.arena{position:relative;color:var(--ink-d);background:var(--night);overflow:hidden;isolation:isolate}
.arena canvas,.arena .still{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.arena .still{background:
  radial-gradient(140% 110px at 50% 100%,var(--page) 45%,transparent 100%),
  radial-gradient(100% 170px at 50% 100%,rgba(51,225,255,.20),rgba(51,225,255,0) 80%),
  radial-gradient(70% 50% at 50% 70%,rgba(70,96,170,.32),rgba(6,9,16,0) 70%),var(--night)}
.arena .court{position:absolute;left:50%;top:60%;width:max(1500px,120vw);transform:translate(-50%,-50%) perspective(900px) rotateX(58deg);z-index:-2;opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 45%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 55% 60% at 50% 45%,#000 25%,transparent 75%)}
.arena .court *{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.2;vector-effect:non-scaling-stroke}
.arena .top{position:absolute;left:0;right:0;top:0;height:45%;z-index:-1;pointer-events:none;background:linear-gradient(var(--night),rgba(6,9,16,0))}
.arena .fade{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--page) 85%)}
.arena .inner{position:relative;padding-top:clamp(108px,13vh,128px);padding-bottom:72px}
.ahead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--ink-d2);margin:0 0 12px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pos-d);box-shadow:0 0 0 3px rgba(61,214,140,.16)}
.eyebrow .sep{opacity:.5}
h1{font:500 clamp(2.3rem,4.2vw,3.5rem)/1.02 var(--sans);letter-spacing:-.045em;margin:0}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:600 11px/1 var(--sans);white-space:nowrap;letter-spacing:0}

/* the four numbers, on one glass slab */
.stats{display:flex;border-radius:var(--r-pane);padding:16px 4px;background:linear-gradient(180deg,rgba(17,23,37,.72),rgba(11,16,28,.82));
  border:1px solid var(--line-d);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.stat{padding:0 24px;border-left:1px solid var(--line-d);min-width:0}
.stat:first-child{border-left:0}
.stat .l{color:var(--ink-d2);font-size:12.5px;white-space:nowrap}
.stat .v{font:600 34px/1.1 var(--num);font-stretch:76%;letter-spacing:-.015em;white-space:nowrap;margin-top:4px}
.stat .v.pos{color:var(--pos-d)}
.stat .v small{font:500 13px/1 var(--sans);color:var(--ink-d2);letter-spacing:0;margin-left:7px}

/* the scoreboard strip: tonight's games, each a filter */
.slate{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:12px;margin-top:28px;overflow-x:auto;scrollbar-width:none;padding:2px;margin-left:-2px;margin-right:-2px}
.slate::-webkit-scrollbar{display:none}
.tile{display:grid;gap:10px;align-content:start;text-align:left;padding:14px 16px 13px;border-radius:18px;cursor:pointer;color:var(--ink-d);
  background:rgba(14,20,33,.74);border:1px solid var(--line-d);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .25s var(--ease-ui),transform .4s var(--ease)}
.tile:hover{background:rgba(22,30,48,.78)}
.tile .m{display:flex;align-items:center;gap:8px;font:600 17px/1 var(--num);font-stretch:80%}
.tile .m .at{font:400 12px/1 var(--sans);color:var(--ink-d3)}
.tile .meta{display:flex;align-items:baseline;gap:0;font-size:12.5px;color:var(--ink-d2)}
.tile .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:20px;padding-top:10px;border-top:1px solid var(--line-d)}
.tile.is-on .foot{border-color:var(--line)}
.tile .meta b{font:600 14px/1 var(--num);font-stretch:82%;color:var(--ink-d);margin-right:6px}
.tile .n{font:600 13px/1 var(--num);font-stretch:85%;color:var(--pos-d);white-space:nowrap}
.tile .n.none{color:var(--ink-d3);font-weight:500}
.tile.is-on{background:var(--ink-d);color:var(--night);border-color:transparent}
.tile.is-on .meta,.tile.is-on .m .at{color:var(--ink-2)}.tile.is-on .meta b{color:var(--night)}.tile.is-on .n{color:var(--pos)}.tile.is-on .n.none{color:var(--ink-3)}
.tag.news{background:rgba(61,214,140,.12);color:var(--pos-d);border:1px solid rgba(61,214,140,.5)}
.tag.warn{background:rgba(240,180,76,.12);color:var(--warn-d)}
.tile.is-on .tag.news{background:rgba(10,122,78,.08);color:var(--pos);border-color:rgba(10,122,78,.4)}
.tile.is-on .tag.warn{background:rgba(154,97,0,.08);color:var(--warn)}
.badge{--tc:#5B6B8C;--tt:#fff;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tc);color:var(--tt);
  font:700 12px/1 var(--num);font-stretch:85%;letter-spacing:.02em}
.badge.sm{width:26px;height:26px;border-radius:8px;font-size:9.5px}
:root[data-theme="dark"] .badge,.arena .badge{background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 78%,#fff 0%),color-mix(in srgb,var(--tc) 52%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 60%,rgba(255,255,255,.18))}
.tile.is-on .badge{background:var(--tc);box-shadow:none}

/* ---------- the light body ---------- */
main.board{position:relative;padding-top:4px;padding-bottom:40px}
.gamenews{margin:0 0 16px;padding:16px 20px;border-radius:var(--r-pane);background:var(--surface);border:1px solid var(--ln);box-shadow:var(--shadow);font-size:14px;line-height:1.55}
.gamenews .rh{margin:0 0 6px;font-weight:600}
.gamenews ul{margin:0;padding-left:18px;color:var(--t2)}
.gamenews li.stale{color:var(--green)}

.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--ln)}
.seg button{border:0;background:none;height:34px;padding:0 16px;border-radius:999px;color:var(--t2);font:500 14px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--solid);color:var(--solid-ink)}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field-pill{position:relative}
.ctl{height:44px;border-radius:999px;border:1px solid var(--ln);background:var(--surface);font:500 14px/1 var(--sans);color:var(--t1);transition:border-color .2s}
.ctl:hover{border-color:var(--ln2)}
select.ctl{appearance:none;padding:0 38px 0 18px;cursor:pointer}
.field-pill.select:after{content:"";position:absolute;right:18px;top:17px;width:6px;height:6px;border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);transform:rotate(45deg);pointer-events:none}
.search svg{position:absolute;left:16px;top:14px;width:16px;height:16px;color:var(--t3)}
.search input{width:240px;padding:0 16px 0 40px;font-weight:400}
.search input::placeholder{color:var(--t3)}
button.ctl{display:inline-flex;align-items:center;gap:8px;padding:0 18px;cursor:pointer}
button.ctl svg{width:15px;height:15px;color:var(--t3)}
.pop{position:absolute;right:0;top:52px;z-index:30;width:280px;border-radius:var(--r-pane);background:var(--surface);border:1px solid var(--ln);box-shadow:0 30px 60px -30px rgba(13,19,32,.35);padding:8px;display:none}
.pop.is-open{display:block}
.pop p{margin:8px 12px 8px;color:var(--t2);font-size:13px}
.pop label{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;cursor:pointer;font-size:14px}
.pop label:hover{background:var(--hover)}
.pop input{accent-color:var(--solid);width:16px;height:16px}
.pop .acts{display:flex;justify-content:space-between;border-top:1px solid var(--ln);margin-top:6px;padding:10px 12px 4px}
.link{border:0;background:none;color:var(--t2);cursor:pointer;padding:0;font-weight:600;font-size:14px;text-decoration:none}
.link:hover{color:var(--t1)}

/* the bets: one white card */
.table{background:var(--surface);border:1px solid var(--ln);border-radius:var(--r-card);overflow:clip;box-shadow:var(--shadow)}
.cols{display:grid;grid-template-columns:minmax(250px,2.2fr) minmax(170px,1.5fr) minmax(130px,1fr) 88px 88px 44px;align-items:center;column-gap:18px;padding:0 14px 0 22px}
.thead{height:46px;color:var(--t3);font-size:12.5px;font-weight:500;border-bottom:1px solid var(--ln)}
.r{text-align:right;justify-self:end}
.info{display:inline-flex;align-items:center;gap:6px;cursor:help}
.info svg{width:13px;height:13px}
.group{padding:13px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--ln);background:var(--surface-2)}
.group .gm{display:flex;align-items:center;gap:8px;font:600 17px/1 var(--num);font-stretch:80%}
.group .gm .at{font:400 12px/1 var(--sans);color:var(--t3)}
.group .t{color:var(--t2);font-size:13px}
.row{min-height:76px;padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--ln);cursor:pointer;transition:background .2s var(--ease-ui)}
#rows>.row:last-child{border-bottom:0}
.row:hover{background:var(--hover)}
.row.is-sel{background:var(--sel)}
.who{display:flex;align-items:center;gap:14px;min-width:0}
.nm{display:flex;align-items:center;gap:8px;font-weight:500;font-size:15px;letter-spacing:-.01em;white-space:nowrap;min-width:0}
.nm .pn{overflow:hidden;text-overflow:ellipsis}
.tags{display:inline-flex;gap:6px}
.sub{color:var(--t3);font-size:12.5px;line-height:18px;margin-top:2px}
.bet .b1{font-weight:500;font-size:14.5px}
.book .b1{font-weight:500;font-size:14px}
.price{font:600 22px/1 var(--num);font-stretch:78%;letter-spacing:-.01em}
.edge{font:600 22px/1 var(--num);font-stretch:78%;letter-spacing:-.01em;color:var(--green)}
.pricec .sub{display:none}
.tag.new{background:var(--green-soft);color:var(--green)}
.tag.news,.board .tag.news,.focus .tag.news,.sheet .tag.news{background:var(--green-soft);color:var(--green);border:1px solid var(--green-line)}
.board .tag.warn,.focus .tag.warn,.sheet .tag.warn,.tag.lost{background:var(--amber-soft);color:var(--amber)}
.tag.thin{background:transparent;color:var(--t2);border:1px solid var(--ln2)}
.tag.sys{display:inline-block;line-height:20px;background:var(--surface-2);color:var(--t2);border:1px solid var(--ln2);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.trk{width:38px;height:38px;border-radius:999px;border:0;background:none;color:var(--t3);cursor:pointer;display:grid;place-items:center;justify-self:end;transition:background .2s,color .2s}
.trk:hover{background:var(--sel);color:var(--t1)}
.trk[aria-pressed="true"]{color:var(--t1)}
.trk svg{width:18px;height:18px}
.trk[aria-pressed="true"] svg path,.btn[aria-pressed="true"] svg path{fill:currentColor}
.empty{padding:72px 24px;text-align:center}
.empty b{display:block;font:500 20px/1.3 var(--sans);letter-spacing:-.02em;margin-bottom:6px}
.empty span{color:var(--t2)}

/* provenance: where every number comes from, docked to the card's foot while the bets are in view */
.statusbar{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 22px;padding:12px 22px;
  border-top:1px solid var(--ln);background:color-mix(in srgb,var(--surface-2) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12.5px;color:var(--t3)}
.statusbar b{color:var(--t2);font-weight:600}
.statusbar .live{display:inline-flex;align-items:center;gap:8px;color:var(--t2)}
.statusbar .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.testing{display:inline-flex;align-items:center;height:20px;font-weight:600;font-size:11px;color:var(--amber);background:var(--amber-soft);padding:0 8px;border-radius:999px;margin-right:6px}

/* the footer slab, from the home page */
footer.sitefoot{margin:0 var(--gut) var(--gut);border-radius:var(--r-pane);background:var(--night-2);color:var(--ink-d2);padding:36px clamp(20px,4vw,48px);display:grid;gap:24px;font-size:14px}
:root[data-theme="dark"] footer.sitefoot{border:1px solid var(--line-d)}
footer.sitefoot .top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer.sitefoot .rg{color:var(--ink-d)}footer.sitefoot .rg b{font-family:var(--num);font-stretch:85%;font-weight:600}
footer.sitefoot p{margin:0;max-width:62em;line-height:1.6}
footer.sitefoot nav{display:flex;gap:22px;flex-wrap:wrap}footer.sitefoot nav a{text-decoration:none;color:var(--ink-d)}
footer.sitefoot .logo{color:var(--ink-d)}

/* ---------- the bet view: white panes over the frosted board ---------- */
.focus{position:fixed;inset:0;z-index:60;display:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px;
  background:var(--frost);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);view-transition-name:focus-card}
.focus.is-open{display:grid}
.pane,.fhead,.fbody>section{background:var(--surface);border:1px solid var(--ln);box-shadow:var(--shadow)}
.fhead{border-radius:var(--r-pane)}
.ticks{display:flex;gap:3px;padding:10px 20px 0}
.ticks i{flex:1;height:3px;border-radius:2px;background:var(--ln2);transition:background .3s}
.ticks i.is-done{background:var(--t3)}
.ticks i.is-on{background:var(--t1)}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 10px 20px}
.crumb{color:var(--t2);display:flex;gap:12px;align-items:center;white-space:nowrap;min-width:0;overflow:hidden;font-size:13.5px}
.crumb b{color:var(--t1);font:600 16px/1 var(--num);font-stretch:82%}
.fbar .acts{display:flex;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--ln2);background:var(--surface);
  font:500 14px/1 var(--sans);cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--t1);transition:background .2s}
.btn:hover{background:var(--hover)}
.btn.icon{width:40px;padding:0;justify-content:center;color:var(--t2)}
.btn svg{width:16px;height:16px;flex:none}
.btn[aria-pressed="true"],.btn.solid{background:var(--solid);color:var(--solid-ink);border-color:transparent}
.btn.solid:hover{opacity:.9}
.fbody{min-height:0;display:grid;grid-template-columns:minmax(340px,min(29vw,420px)) minmax(0,1fr) minmax(296px,min(24vw,352px));gap:12px}
.fbody>section{min-height:0;overflow-y:auto;padding:28px;border-radius:var(--r-pane);scrollbar-width:thin}
.fbody.is-next>section{animation:inNext .4s var(--ease) both}
.fbody.is-prev>section{animation:inPrev .4s var(--ease) both}
.fbody>section:nth-child(2){animation-delay:.03s}.fbody>section:nth-child(3){animation-delay:.06s}
@keyframes inNext{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes inPrev{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.fwho{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.fwho .badge{width:46px;height:46px;font-size:13px;border-radius:14px}
.fwho .n{font-size:17px;font-weight:500;letter-spacing:-.015em}
.call{font:500 42px/1.04 var(--sans);letter-spacing:-.045em;margin:0 0 10px;text-wrap:balance}
.call .num{font-stretch:76%;letter-spacing:-.02em}
.call.long{font-size:36px}
.offerrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin:0 0 22px}
.offer{font-size:15px;color:var(--t2);margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.offer b{font:600 26px/1 var(--num);font-stretch:78%;color:var(--t1)}
.btn.betnow{height:42px;padding:0 18px;font-weight:600}
.evlabel{color:var(--t2);font-size:12.5px;margin:0 0 4px}
.edgebig{font:500 84px/.95 var(--num);font-stretch:74%;letter-spacing:-.025em;color:var(--green)}
.edgerow{display:flex;align-items:flex-end;gap:18px;margin:0 0 22px}
.edgecap{color:var(--t2);margin:0 0 7px;font-size:13.5px;line-height:1.45;max-width:13em}
.edgecap .evl2{display:none}.edgecap:first-letter{text-transform:uppercase}
.callout{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--amber-soft);margin:0 0 18px;font-size:13.5px;line-height:1.45}
.callout svg{width:16px;height:16px;flex:none;color:var(--amber);margin-top:2px}
.rotation{margin:0 0 20px;padding:13px 15px;border-radius:16px;background:var(--surface-2);border:1px solid var(--ln);font-size:13.5px;line-height:1.5}
.rotation .rh{margin:0 0 4px;font-weight:600}
.rotation ul{margin:0;padding-left:18px;color:var(--t2)}
.rotation li.thin{color:var(--t3)}
.rotation .news{margin:8px 0 0;color:var(--green)}
.rotation .inj{display:flex;gap:8px;margin:2px 0 6px;color:var(--t1)}.rotation .inj svg{width:15px;height:15px;flex:none;color:var(--amber);margin-top:3px}
h2{font:500 17px/1.3 var(--sans);letter-spacing:-.02em;margin:0 0 2px;color:var(--t1)}
.hint{color:var(--t2);font-size:13.5px;margin:0 0 16px;line-height:1.5}
table.math{width:100%;border-collapse:collapse;margin-top:8px}
.math td{padding:11px 0;border-bottom:1px solid var(--ln);vertical-align:baseline;font-size:14px}
.math td:last-child{text-align:right;font:600 17px/1 var(--num);font-stretch:80%;white-space:nowrap;padding-left:12px}
.math td .s{display:block;color:var(--t3);font-size:12.5px;margin-top:2px}
.math tr.total td{border-bottom:0;border-top:1px solid var(--ln2);font-weight:600;padding-top:13px}
.math tr.total td:last-child{color:var(--green);font-size:21px}
.size{margin:14px 0 0;color:var(--t3);font-size:13px}

.mid{display:flex;flex-direction:column;container-type:inline-size}
.readout{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.readout .p{font:500 54px/1 var(--num);font-stretch:74%;letter-spacing:-.02em}
.readout .t{color:var(--t2);flex:1;min-width:220px;font-size:14px;line-height:1.5}
.readout .t b{color:var(--t1);font-weight:600}
.stage{position:relative;flex:none;height:clamp(280px,min(34vw,56vh),580px);margin-top:6px;touch-action:none;user-select:none}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage text{font-family:var(--sans)}
.stage .ax{font-family:var(--num);font-stretch:82%;font-weight:600}
.stage .handle{cursor:ew-resize}
.bars path{transform-box:fill-box;transform-origin:bottom;animation:grow .7s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--t2);font-size:13px;margin-top:10px}
.legend .drag{margin-left:auto;color:var(--t3)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tipbox{position:absolute;pointer-events:none;border-radius:12px;padding:7px 11px;font-size:12.5px;white-space:nowrap;opacity:0;transform:translate(-50%,-118%);transition:opacity .12s;z-index:2;
  background:var(--solid);color:var(--solid-ink)}

/* the player card, under the chart */
.form{flex:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--ln)}
.formh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}.formh .hint{margin:0}
.formgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:end}
.avgs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.avgs div{padding:9px 0 8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--ln);text-align:center}
.avgs b{display:block;font:600 19px/1.1 var(--num);font-stretch:78%;color:var(--t2)}
.avgs small{font:500 11px/1 var(--sans);color:var(--t3)}
.avgs .is-key{background:var(--solid);border-color:transparent}.avgs .is-key b{color:var(--solid-ink)}.avgs .is-key small{color:var(--solid-ink);opacity:.7}
.splits{margin:10px 0 0;color:var(--t2);font-size:12.5px;line-height:1.5}.splits b{font-weight:600;color:var(--t1)}.splits b.pos{color:var(--green)}
.l10h{display:flex;justify-content:space-between;gap:8px;color:var(--t2);font-size:12.5px;margin-bottom:8px}
.l10h .tl{display:flex;gap:10px}.l10h b{color:var(--t1);font-weight:600}
.fbars{position:relative;height:56px;display:flex;align-items:flex-end;gap:3px;margin-bottom:18px}
.fb{flex:1;max-width:34px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.fb i{display:block;width:100%;border-radius:4px 4px 1px 1px;background:var(--off)}
.fb.hit i{background:linear-gradient(180deg,var(--win-top),var(--win-bot))}
.fb em{position:absolute;bottom:-16px;font:600 11px/1 var(--num);font-style:normal;font-stretch:85%;color:var(--t3)}
.fb.hit em{color:var(--t2)}
.fline{position:absolute;left:0;right:0;border-top:1px dashed var(--t3);z-index:1;pointer-events:none}

/* the market: every book on one scale, from the home page's dot plot */
.market{display:grid;gap:2px}
.mrow{display:grid;grid-template-columns:96px 1fr 48px;align-items:center;gap:12px;height:36px}
.mrow .bk{font-size:13.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .px{text-align:right;font:600 16px/1 var(--num);font-stretch:80%}
.mrow.off .px{color:var(--t3);font-weight:500}
.mrow.best .bk{color:var(--t1);font-weight:500}.mrow.best .px{color:var(--green)}
.mrow .trk2{position:relative;height:100%}
.mrow .trk2:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--ln)}
.mrow .dot2{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);background:var(--t3);transition:left 1s var(--ease)}
.mrow.better .dot2{background:var(--green)}
.mrow.best .dot2{width:13px;height:13px;box-shadow:0 0 0 4px var(--green-soft)}
.fairline{position:absolute;top:-4px;bottom:-4px;border-left:1px dashed var(--t3)}
.mhead{height:22px}.mhead .trk2:before{display:none}
.fairlbl{position:absolute;bottom:2px;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--t2);white-space:nowrap}
.mscale{display:grid;grid-template-columns:96px 1fr 48px;gap:12px;color:var(--t3);font-size:12px;margin:6px 0 0}
.mscale span:nth-child(2){display:flex;justify-content:space-between;white-space:nowrap}
.facts{color:var(--t3);font-size:12.5px;line-height:1.5;margin:16px 0 0}
.method{display:block;margin-top:20px;padding:14px 16px;border-radius:16px;text-decoration:none;color:var(--t1);background:var(--surface-2);border:1px solid var(--ln);transition:border-color .2s}
.method:hover{border-color:var(--ln2)}
.method b{display:block;font-weight:600;margin-bottom:2px;font-size:14px}
.method span{color:var(--t2);font-size:13px}
.fine{color:var(--t3);font-size:12.5px;line-height:1.55;margin:16px 0 0}
.side{display:flex;flex-direction:column}
.side .foot{margin-top:auto}

.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:1px}
.strip::-webkit-scrollbar{display:none}
.chip{flex:none;width:240px;padding:10px 12px;border-radius:16px;cursor:pointer;scroll-snap-align:center;text-align:left;display:flex;gap:10px;align-items:center;color:var(--t1);
  background:var(--surface);border:1px solid var(--ln);transition:border-color .2s}
.chip:hover{border-color:var(--ln2)}
.chip.is-on{background:var(--solid);color:var(--solid-ink);border-color:transparent}
.chip.is-on .b{color:inherit;opacity:.7}.chip.is-on .pos{color:var(--pos-d)}
:root[data-theme="dark"] .chip.is-on .pos{color:var(--pos)}
.chip .c{min-width:0;flex:1;display:block}
.chip .a{display:flex;justify-content:space-between;font-weight:500;font-size:13.5px}
.chip .a span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}
.chip .a .pos{font:600 15px/1 var(--num);font-stretch:80%}
.chip .b{display:block;color:var(--t3);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sheets: Alerts, My bets, Save, Your state */
.sheet{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:16px;background:color-mix(in srgb,var(--page) 55%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sheet.is-open{display:grid}
.sheetcard{width:min(470px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--ln);
  box-shadow:0 40px 80px -40px rgba(13,19,32,.4);animation:rise .35s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sheetcard.mine{width:min(640px,100%)}
.sheethead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.sheethead h2{font-size:22px;letter-spacing:-.03em;margin-bottom:4px}
.field{display:grid;gap:6px;margin-bottom:12px;color:var(--t2);font-size:13px}
.field select{width:100%}
.field input{height:44px;border-radius:14px;border:1px solid var(--ln2);background:var(--surface);padding:0 14px;font:600 18px/1 var(--num);font-stretch:82%;color:var(--t1)}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.towin{margin:2px 0 6px;color:var(--green);font-weight:600;min-height:20px}
.err{margin:0 0 10px;color:var(--amber);font-size:13px;min-height:18px}
.sheetcard .btn.betnow{width:100%;justify-content:center;margin:0}
.minesum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.minesum div{padding:13px 15px;border-radius:16px;background:var(--surface-2);border:1px solid var(--ln)}
.minesum small{display:block;color:var(--t2);font-size:12.5px}.minesum b{font:600 26px/1.25 var(--num);font-stretch:76%}
.minelist h3{font:500 13px/1 var(--sans);color:var(--t2);margin:18px 0 4px}
.betitem{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--ln)}
.betitem:last-child{border-bottom:0}
.betitem b{font-weight:500}
.alertitem{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid var(--ln);cursor:pointer;border-radius:0;transition:background .2s}
.alertitem:hover{background:var(--hover)}
.alertitem .who2{display:flex;align-items:center;gap:12px;min-width:0}
.alerttags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.muted{color:var(--t2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);padding:11px 20px;border-radius:999px;font-weight:500;font-size:14px;opacity:0;transition:all .3s var(--ease);z-index:80;pointer-events:none;
  background:var(--solid);color:var(--solid-ink)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
::view-transition-group(focus-card){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(focus-card),::view-transition-new(focus-card){height:100%;object-fit:cover;overflow:hidden}

/* motion: reveal on load, from the home page */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ---------- the bet view fits the screen: on shorter laptops type and spacing scale with height, no pane scrolls ---------- */
@media (min-width:821px) and (max-height:1000px){
  .fbody>section{padding:clamp(18px,2.6vh,28px)}
  .fwho{margin-bottom:clamp(10px,1.8vh,22px)}.fwho .badge{width:42px;height:42px}
  .call{font-size:clamp(28px,4.2vh,42px);margin-bottom:6px}.call.long{font-size:clamp(25px,3.6vh,36px)}
  .offerrow{margin-bottom:clamp(10px,2vh,22px)}.btn.betnow{height:clamp(36px,4.4vh,42px)}
  .edgebig{font-size:clamp(50px,7.4vh,84px)}.edgerow{margin-bottom:clamp(10px,2vh,22px)}
  .dense .call{font-size:clamp(26px,3.7vh,38px)}.dense .edgebig{font-size:clamp(44px,6.4vh,72px)}
  .dense .math td{padding:clamp(4px,.6vh,9px) 0}.dense .size{display:none}.dense .rotation{font-size:13px;line-height:1.45}
  .callout,.rotation{margin-bottom:clamp(8px,1.4vh,18px);padding:clamp(8px,1.2vh,13px) 14px}
  .math td{padding:clamp(5px,.95vh,11px) 0}.math tr.total td{padding-top:clamp(7px,1.1vh,13px)}.size{margin-top:8px}
  .hint{margin-bottom:clamp(6px,1.3vh,16px)}.readout .p{font-size:clamp(38px,5.6vh,54px)}
  .mrow{height:clamp(27px,3.6vh,36px)}.method{margin-top:12px;padding:10px 14px}.fine{margin-top:10px}
  .form{margin-top:clamp(10px,1.6vh,18px);padding-top:clamp(10px,1.6vh,16px)}
}
@media (min-width:821px) and (max-height:820px){
  .focus{padding:10px;gap:10px}
  .ticks{padding:8px 16px 0}.fbar{padding:6px 8px 8px 16px}.fbar .btn{height:36px}.fbar .btn.icon{width:36px}
  .chip{padding:7px 10px}.chip .a{font-size:13px}.chip .b{font-size:11.5px}
  .evlabel{display:none}.edgecap .evl2{display:inline}
  .math td{font-size:13.5px}.math td .s{font-size:12px;margin-top:0}.math tr:nth-child(2) .s,.math tr:nth-child(3) .s{display:none}.math td:last-child{font-size:16px}.size{display:none}
  .mid>.hint{display:none}.readout .t{font-size:13px}
  .mid .stage{min-height:120px}
  .avgs div{padding:6px 0 5px}.avgs b{font-size:16px}.fbars{height:40px}.splits{margin-top:6px}
  .mrow{height:28px}.method span{display:none}.facts{margin-top:10px}
}
@media (min-width:821px) and (max-height:700px){
  .fwho{margin-bottom:8px}.fwho .badge{width:36px;height:36px;border-radius:11px}.fwho .n{font-size:15.5px}
  .call,.dense .call{font-size:27px}.call.long{font-size:25px}.offer b{font-size:22px}.btn.betnow{height:34px}
  .edgebig,.dense .edgebig{font-size:46px}.math td{padding:4px 0}.math td .s{display:none}
  .form{margin-top:8px;padding-top:8px}.formh{margin-bottom:6px}
  .focus{grid-template-rows:auto minmax(0,1fr)}.strip{display:none}   /* the shortest laptops: flip with the arrows and the progress ticks */
}
@media (min-width:821px) and (max-height:720px){
  .fwho .sub{display:none}.offerrow,.edgerow{margin-bottom:10px}
  .dense .rotation{padding:8px 12px;font-size:12.5px;margin-bottom:8px}.dense .math td .s{display:none}.dense h2{font-size:15.5px}
  .dense .rotation .inj{margin-bottom:3px}.dense .rotation .news{margin-top:4px}.dense .math{margin-top:2px}
}

/* ---------- responsive ---------- */
@media (min-width:1181px){.mid .stage{flex:1 1 0;height:auto;min-height:170px;max-height:580px}}
@container (max-width:520px){.formgrid{gap:14px}.avgs{gap:4px}.avgs b{font-size:16px}.readout .p{font-size:42px}}
@media (max-width:1280px){.cols{grid-template-columns:minmax(220px,2fr) minmax(160px,1.5fr) minmax(110px,1fr) 80px 80px 40px}.stat{padding:0 18px}}
@media (max-width:1180px){
  .ahead{flex-direction:column;align-items:stretch}.stats{width:100%}.stat{flex:1}
  .fbody{grid-template-columns:minmax(300px,360px) minmax(0,1fr);overflow-y:auto;align-content:start}.fbody>section{overflow:visible;min-height:auto}
  .fbody .side{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
}
@media (max-width:1024px){.cols{grid-template-columns:minmax(200px,2fr) minmax(150px,1.5fr) 80px 80px 40px}.cols .book{display:none}.nav .links{gap:18px}}
@media (max-width:900px){.nav .links{display:none}}
@media (max-width:820px){
  .nav{gap:10px;padding:0 8px 0 18px}.navr .label{display:none}.navr{gap:6px}.nb{width:40px;padding:0;justify-content:center}
  .navr .count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;font-size:10.5px;line-height:18px;border:1px solid var(--night)}
  :root:not([data-theme="dark"]) .nav.is-day .navr .count{border-color:var(--day)}
  .arena .inner{padding-top:104px;padding-bottom:52px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 0;padding:16px 0}.stat{padding:0 18px}.stat:nth-child(3){border-left:0}
  .stat .v{font-size:30px}
  .slate{grid-auto-columns:minmax(196px,1fr);margin-top:20px;margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}
  .controls{flex-direction:column;align-items:stretch}.seg{align-self:flex-start}
  .filters{display:grid;grid-template-columns:1fr 1fr 1fr}.search{grid-column:1/-1}.search input{width:100%}
  .filters .ctl{width:100%}select.ctl{padding:0 30px 0 14px}.field-pill.select:after{right:14px}button.ctl{justify-content:center;padding:0 12px}
  .table{border-radius:var(--r-pane)}
  .thead{display:none}
  .row.cols{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"b w e" "b t p";column-gap:12px;row-gap:6px;padding:14px 16px;align-items:start}
  .row .who{display:contents}.row .who>.badge{grid-area:b}.row .who>.wtext{grid-area:w;min-width:0}
  .row .bet{grid-area:t;min-width:0}.row .bet .b1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .bet .sub{display:none}
  .row .edgec{grid-area:e;align-self:center}.row .pricec{grid-area:p;display:flex;align-items:baseline;gap:6px}
  .row .pricec .sub{display:inline;margin:0}.row .price{font-size:17px}.row .edge{font-size:21px}
  .row .book,.row .trk{display:none}
  .nm{flex-wrap:wrap;white-space:normal;row-gap:4px}
  .statusbar{position:static;padding:14px 16px;font-size:12px}
  .focus{grid-template-rows:auto minmax(0,1fr);padding:8px;gap:8px}
  .fbody{display:block;overflow-y:auto;border-radius:var(--r-pane)}.fbody>section{padding:22px 18px;overflow:visible;margin-bottom:8px}
  .fbody .side{display:block}
  .call{font-size:34px}.call.long{font-size:30px}.edgebig{font-size:66px}
  .stage{height:250px}.formgrid{grid-template-columns:1fr;gap:16px}
  .strip,.fbar .acts .wide,.crumb .mu,.crumb .tag{display:none}
  .fbar{padding-left:16px}
  .sheet{place-items:end center;padding:8px}.sheetcard{border-radius:24px 24px 18px 18px;padding:20px}
  .alertitem{flex-direction:column;align-items:flex-start;gap:8px}.alerttags{justify-content:flex-start;padding-left:38px}
  footer.sitefoot{margin:0 12px 12px}
}
@media (max-width:420px){.filters{grid-template-columns:1fr 1fr}.filters .field-pill:last-child{grid-column:1/-1}.stat{padding:0 14px}.minesum b{font-size:21px}}
@media (max-width:350px){#theme{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media (prefers-reduced-transparency:reduce){
  .nav,.stats,.tile,.statusbar,.focus,.sheet{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav,.stats,.tile{background:#0B1120}:root:not([data-theme="dark"]) .nav.is-day{background:#fff}
  .statusbar{background:var(--surface-2)}.focus{background:var(--page)}.sheet{background:color-mix(in srgb,var(--page) 92%,transparent)}}