/* Site additions on top of legacy/sheet.html, loaded at the end of <body> so they win over the
   page's own styles: compact pick tiles, the goal-alerts bell, and the phone layout (≤640px). */

/* ---------- pick tiles: half height, one line per pick, at most 3 picks ----------
   Header row holds the name, the slip's odds, "+ Add bet" and ↻; the picks sit under it. */
/* more than 3 picks on the slip: keep its "4-leg odds" label so the price makes sense */
@media (max-width:1300px){#pkrow .pkh em{display:none}}

/* ---------- goal alerts bell ---------- */
.mdbell{flex:none;order:98;position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:var(--sb-panel2);color:var(--sb-text);cursor:pointer}
.mdbell:hover{background:var(--sb-line)}
.mdbell.muted{opacity:.55}
.mdbell.muted::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
.mdbell.ring svg{animation:mdring .9s ease-in-out 2;transform-origin:50% 10%}
@keyframes mdring{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.mdal{position:fixed;z-index:700;top:calc(56px + env(safe-area-inset-top,0px));right:12px;width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 80px);overflow:auto;padding:12px 14px 14px;border-radius:14px;background:#101b3a;border:1px solid #25366a;box-shadow:0 14px 40px rgba(0,0,0,.6);color:#eef2fb;font:13px/1.35 "IBM Plex Sans",system-ui,sans-serif}
.mdal[hidden]{display:none}
.mdal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mdal-h b{font-size:15px}
.mdal-x{border:0;background:none;color:#97a3c4;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.mdal-l{margin:10px 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#97a3c4}
.mdal-snd{display:flex;flex-direction:column;gap:4px}
.mdal-snd label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;border:1px solid #25366a;cursor:pointer}
.mdal-snd label.on{border-color:#fdb927;background:rgba(253,185,39,.1)}
.mdal-snd input{accent-color:#fdb927;margin:0}
.mdal-snd span{flex:1}
.mdal-p{width:28px;height:28px;border-radius:50%;border:0;background:#152349;color:#fdb927;font-size:11px;cursor:pointer}
.mdal-p:hover{background:#25366a}
.mdal-v{width:100%;accent-color:#fdb927}
.mdal-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid #25366a;border-radius:9px;overflow:hidden}
.mdal-seg button{border:0;padding:8px 6px;background:none;color:#eef2fb;font:600 12px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
.mdal-seg button.on{background:#fdb927;color:#1a1300}
.mdal-n{display:flex;gap:8px;align-items:flex-start;margin-top:12px;cursor:pointer}
.mdal-n input{accent-color:#fdb927;margin-top:2px}
.mdal-s{margin:6px 0 0;font-size:11px;color:#97a3c4}
.mdal-cap{margin:0 0 10px}
.mdal-warn{color:#ffb4a8}
.mdal-tg{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid #25366a;border-radius:9px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mdal-tg:disabled{opacity:.6;cursor:default}
.mdal-tg b{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.mdal-tg small{font-weight:400;font-size:11px;color:#97a3c4}
.mdal-sw{flex:none;position:relative;width:40px;height:22px;border-radius:999px;background:#25366a;transition:background .15s}
.mdal-sw>i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#eef2fb;transition:transform .15s}
.mdal-tg[aria-checked=true] .mdal-sw{background:#fdb927}
.mdal-tg[aria-checked=true] .mdal-sw>i{transform:translateX(18px);background:#1a1300}
.mdgoal{position:fixed;z-index:130;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:calc(100vw - 24px);padding:10px 16px;border-radius:12px;background:#3ecf8e;color:#03150c;font:700 14px "IBM Plex Sans",system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:mdgin .3s ease-out;transition:opacity .5s,transform .5s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdgoal.out{opacity:0;transform:translate(-50%,-10px)}
body.mxfoc .mdgoal,body.mxfoc .mdal{filter:none!important}
body.mxfoc .mdal *{pointer-events:auto!important}
@keyframes mdpulse{50%{opacity:.35}}
@keyframes mdgin{from{opacity:0;transform:translate(-50%,-12px)}}

/* ---------- phone layout ---------- */
.mdtabs,.mdlive{display:none}
@media (max-width:640px){
  /* bottom tabs */
  .mdtabs{display:flex;position:fixed;z-index:95;left:0;right:0;bottom:0;padding:0 2px calc(6px + env(safe-area-inset-bottom,0px));background:var(--sb-bg)}
  /* Jason 14 Oct: sized by their names, so the gaps between them look even (Playbook sat far from Tips) */
  .mdtabs button{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:5px 0 4px;border:0;background:none;color:var(--sb-muted);font:500 10px Roboto,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mdtabs button.on{color:var(--sb-accent)}
  /* an opened match takes over the screen: hide the tabs so its Collapse button shows */
  body.mxfoc .mdtabs{display:none}
  /* ...and everything else steps aside, so scrolling an opened match shows no blurred empty page */
  body.mxfoc .mxblr:not(.mdgoal):not(.mdal){display:none!important}
  /* Jason 15 Oct: the Matches rows' own display:grid (matches.css) outweighed that, so an opened match on a phone
     could still scroll far up and down through the blurred list; now only the match is left, like desktop */
  html body.mxfoc .tablewrap #list>.row.mxblr[data-id],html body.mxfoc .tablewrap #list>.mxblr{display:none!important}
  body.mxfoc #list>.row.mxsel{margin-top:6px}
  body.mxfoc #list>.detail.mxsel{margin-bottom:60px}
  body.nba .mdtabs{display:none}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  body.nba{padding-bottom:0}
  #toTop{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
  #slip{bottom:calc(68px + env(safe-area-inset-bottom,0px))!important}
  #ladchip{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
  body.has-slip #toTop,body.has-slip #ladchip{bottom:calc(132px + env(safe-area-inset-bottom,0px))!important}

  /* header (runtime/topbar.ts, the rules at the end of this file): Shrimpy and the sport ball on the left, the wordmark in the middle, search and alerts on the right */
  .sportbar .sbin{flex-wrap:nowrap!important;gap:6px!important;min-height:56px;padding:0 8px!important}
  .sbin>#hamb,.sbin>.sbtabs,.sbin>.mdacct{display:none!important}
  .sbin>#mybets{flex:0 0 0!important;width:0!important;min-width:0!important;margin:0!important;padding:0!important}
  .sbin>#mybets .mbbtn{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
  .mdlive{display:inline-flex;order:1;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:var(--sb-text,#F0F0F2);font:600 13px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mdlive i{width:8px;height:8px;border-radius:50%;background:var(--sb-muted,#A3A7AE)}
  .mdlive.on{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 14%,transparent);color:#fff}
  .mdlive.on i{background:var(--sb-accent,#FF7A2E);animation:mdpulse 1.6s ease-in-out infinite}
  .mdlive b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sb-accent,#FF7A2E);color:#0b1440;font-size:11px;line-height:18px;text-align:center}
  .sbin>#hsearch{order:2!important;margin:0!important}
  .sbin>.mdbell{order:3!important}
  .sbin>.mdacct{order:4!important}
  body.nba .mdlive{visibility:hidden}

  /* menu sections in one plain style, grouped like the bottom bar */
  #hambm .mdhm-list{display:flex;flex-direction:column;gap:10px}
  #hambm .mdhm-gt{margin:0 2px 4px;font:700 10.5px Roboto,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-accent)}
  #hambm .mdhm-g{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden}
  #hambm :is(button,a).mdhm-it{display:flex!important;justify-content:space-between!important;min-height:44px;padding:0 14px!important;border-radius:0!important;border:0!important;background:rgba(255,255,255,.05)!important;color:var(--sb-text,#F0F0F2)!important;font:600 14px "IBM Plex Sans",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-align:left!important;box-shadow:none!important}
  #hambm :is(button,a).mdhm-it span{color:var(--sb-muted,#A3A7AE);font-size:18px}
  #hambm :is(button,a).mdhm-it:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 12%,transparent)!important}
  #hambm .hmx{border-top:1px solid rgba(255,255,255,.1)!important}
  #hambm .hmx button{border:0!important;background:rgba(255,255,255,.05)!important;color:var(--sb-text,#F0F0F2)!important;font:600 12.5px "IBM Plex Sans",system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important}

  /* the ☰ menu ("More") fills the page between the header and the bottom bar (Jason 12 Oct) */
  #hambm{top:var(--mdtop,54px)!important;bottom:var(--mdbot,60px)!important;left:0!important;right:0!important;max-height:none!important;border-radius:0!important;border:0!important;box-shadow:none!important;padding:14px 16px 20px!important;background:var(--sb-bg)!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.nba #hambm{bottom:auto!important;top:calc(var(--sbh,60px) + 6px)!important}
  body.nba .sbin>#hamb{display:inline-flex!important}

  #hambm .mdhm{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
  #hambm .mdhm button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #hambm .hmx{display:none!important}
  /* the profile editor, opened from the menu: the page's own panel, shown as a sheet */
  .sbin>#prof{display:block!important;position:absolute;width:0;height:0;overflow:visible}
  .sbin>#prof>.pfbtn{display:none!important}
  /* a page of its own, like More (sized by height: the top bar's blur makes it the panel's frame), so nothing underneath shows through or overlaps */
  #prof .pfpanel{position:fixed!important;left:0!important;right:0!important;top:var(--mdtop,54px)!important;bottom:auto!important;height:calc(100dvh - var(--mdtop,54px) - var(--mdbot,60px))!important;width:auto!important;max-height:none!important;overflow-y:auto;z-index:650!important;transform:none!important;border-radius:0!important;margin:0!important;background:var(--sb-bg)!important;border:0!important;box-shadow:none!important;padding:14px 16px 24px!important}
  /* More stays lit while its page, or the profile opened from it, is showing */
  body:is(.hambon,.mdpfm) .mdtabs button.on{color:var(--sb-muted);background:none!important}
  body:is(.hambon,.mdpfm) .mdtabs button[data-more]{color:var(--sb-accent)}
  #hambm .mdhm-hd{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 10px}
  #hambm .mdhm-hd b{font:700 18px "IBM Plex Sans",system-ui,sans-serif;color:#fff}
  #hambm .mdhm button.mdhm-x{display:grid!important;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--sb-text,#F0F0F2)}
  #hambm .mdhm button.mdhm-x:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 20%,transparent)}
  #hambm .mdhm button.mdhm-out{display:flex!important;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:9px!important;border-radius:12px;background:rgba(255,255,255,.04);color:var(--sb-muted,#A3A7AE);font:600 12px "IBM Plex Sans",system-ui,sans-serif}
  #hambm .mdhn{position:absolute;top:4px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--sb-accent,#FF7A2E);color:#0b1440;font-size:10px;line-height:16px}

  /* one tab at a time */
  html[data-mdtab="home"] #soccerview>[data-mdt]:not([data-mdt~="home"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="matches"] #soccerview>[data-mdt]:not([data-mdt~="matches"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="tips"] #soccerview>[data-mdt]:not([data-mdt~="tips"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="bets"] #soccerview>[data-mdt]:not([data-mdt~="bets"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="tables"] #soccerview>[data-mdt]:not([data-mdt~="tables"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="hub"] #soccerview>[data-mdt]:not([data-mdt~="hub"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="call"] #soccerview>[data-mdt]:not([data-mdt~="call"]):not([data-mdt="all"]){display:none!important}
  /* #tips holds tips, the challenges and the league tables: show the part for this tab */
  html[data-mdtab="tips"] #tips .tcol-lad,html[data-mdtab="tips"] #tips .tcol-side,html[data-mdtab="tips"] #tips .ladders{display:none!important}
  html[data-mdtab="bets"] #tips>:not(.tipgrid):not(.rcpt),html[data-mdtab="bets"] #tips .tipgrid>:not(.tcol-lad):not(.tcol-side){display:none!important}
  html[data-mdtab="tables"] #tips>:not(.ladders){display:none!important}

  /* tighter page */
  #soccerview.wrap{padding:6px 8px 0}
  #soccerview>#pkhero{margin-top:0}
  #soccerview>section,#soccerview>div{margin-top:8px}

  /* live scores: compact cards, tap one for stats */
  #livebox .lvc.lvscb:not(.mdopen) .lvslot.st,#livebox .lvc.lvscb:not(.mdopen) .lvinc2{display:none}
  #livebox .lvgrid2{gap:8px}
  #livebox .lvsec{margin-top:8px}

  /* day strip and filters: one short row each, swipe sideways for more */
  /* time and league chips: smaller, swipe sideways; arrows show when there is more (runtime/mobile.ts) */
  #filters{flex-wrap:nowrap!important;overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:none;justify-content:flex-start!important;padding:4px 0!important;gap:6px!important;scroll-behavior:smooth}
  #filters::-webkit-scrollbar{display:none}
  #filters>*{flex:none!important}
  #filters .chip{padding:4px 10px!important;font-size:12px!important;border-radius:8px}
  #filters .chip small{font-size:10px}
  .mdscr{position:relative;flex:1 1 100%;min-width:0;max-width:100%}
  .mdscr>button{position:absolute;top:50%;z-index:3;width:28px;height:28px;margin-top:-14px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:color-mix(in srgb,var(--sb-bg,#1A1B1E) 92%,transparent);color:#fff;font:700 16px/1 system-ui,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mdscr>button[hidden]{display:none}
  .mdscr>.l{left:-2px}
  .mdscr>.r{right:-2px}
  .dayrow{gap:6px!important}

  .tablewrap{margin-top:0!important}
  .dayrow{margin-bottom:0!important;padding-bottom:0!important}
  .dayhead{padding:6px 12px!important;font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dayhead small{font-size:11px!important}

  /* match rows: kickoff, teams and verdict; tap a row for the full numbers */
  .tablewrap .row{padding-top:8px;padding-bottom:8px;row-gap:4px}
  .tablewrap .row:not(:has(+ .detail))>:is(.form,.elo,.probs,.goals){display:none}
  .tablewrap .row:not(:has(+ .detail))>.verdict>.cell-lab{display:none}

  /* bet tracker: smaller numbers, one-line unit chips, shorter calendar */
  #bt .bth{gap:6px;padding-bottom:6px}
  /* Pocketed: a small box at the far right of Money In (Jason 12 Oct) */
  #bt .btout{position:relative}
  #bt .btout .btpk{position:absolute!important;top:10px;right:10px;display:block;min-width:0!important;margin:0!important;padding:5px 10px!important;text-align:right}
  #bt .btout .btpk span{font-size:9.5px!important;letter-spacing:.06em!important}
  #bt .btout .btpk b{font-size:17px!important;line-height:1.15}
  #bt .btout .btpk small{display:none}
  #bt .btunit{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #bt .btunit::-webkit-scrollbar{display:none}
  #bt .btpre{flex-wrap:nowrap}
  #bt .btk{gap:6px}
  #bt .btk>div{padding:6px 8px}
  #bt .btk b{font-size:18px}
  #bt .btc{min-height:30px!important;padding:2px!important}
  #bt .btbody{gap:8px}
}

/* Phone: every tab in one look (Jason 12 Oct). The tips/tables/challenges wrapper loses its green
   frame, and the main boxes share one panel colour and a thin grey edge. The 50/50 and Slip
   challenge cards keep their own colours inside. */
@media (max-width:640px){
  html.mdm{--mdpanel:var(--sb-panel);--mdline:var(--sb-line)}
  html.mdm body:not(.nba) #tips{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
  html.mdm body:not(.nba) :is(#livebox,#bt,#tips .tcard:not(.ladder),.ladders,.tablewrap,#datebar .dhd){background:var(--mdpanel)!important;border:0!important;box-shadow:none!important}
  html.mdm body:not(.nba) #tips .tcard.ladder{border:0!important;box-shadow:none!important}
  /* lines inside the tips and tables boxes: grey, not green */
  html.mdm body:not(.nba) :is(#tips .tcard:not(.ladder),.ladders){--tline:var(--mdline);--glow:none}
  /* 50/50 worked example: fit the six columns without overlapping */
  html.mdm .lex{display:table;width:100%;table-layout:auto;font-size:10.5px}
  html.mdm .lex th{font-size:9px;letter-spacing:0;padding:4px 2px;white-space:normal;vertical-align:bottom}
  html.mdm .lex td{padding:4px 2px;white-space:nowrap}
  html.mdm .lex td:nth-child(4){white-space:normal;font-size:9.5px;line-height:1.25}
}

/* Phone: My bets jump row (Bet tracker / 50/50 / Slip challenge), sticky under the header */
.mdsubw{display:none}
@media (max-width:640px){
  html.mdm .mdsubw{display:block;position:sticky;top:calc(var(--mdtop,54px) + var(--mdup,0px));z-index:20;margin:0 -8px 2px;padding:6px 8px;background:var(--sb-bg);border-bottom:0}
  .mdsub{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;justify-content:safe center}
  .mdsub::-webkit-scrollbar{display:none}
  .mdsub button{flex:none;padding:7px 12px;border:0;border-radius:8px;background:var(--mdpanel);color:var(--sb-text,#F0F0F2);font:600 13px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
  .mdsub button.on{background:var(--sb-accent-fill);border-color:var(--sb-accent-fill);color:var(--sb-on-accent)}
}

body:not(.nba) #bt .bth h2 span{color:var(--sb-accent)!important;text-shadow:none!important}
/* Tip of the day and Match previews in the blue accent: title, tips record, odds (Jason 12 Oct) */
/* league badges in search sit on a white tile, like in the league tables */
.btcomp img[src^="logos/"]{background:#fff;border-radius:6px;padding:2px;box-sizing:border-box}

/* ---------- My bets (Jason 12 Oct): the Slip Challenge is gone; the Bet tracker and the 50/50 sit side
   by side on desktop, the 50/50 a shade darker than the tracker, in the site's blue ---------- */
body:not(.nba) #tips .tcol-side,body:not(.nba) #tips .tcard.slipx,body:not(.nba) .scxroot,#jump [data-go=".tcard.slipx"]{display:none!important}
@media (min-width:860px){
  /* a wrapping flex row (not a grid), so the pinned upcoming row stays stuck down the whole page */
  html[data-mdtab="bets"] body:not(.nba) #soccerview{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:16px;align-items:stretch}
  html[data-mdtab="bets"] body:not(.nba) #soccerview>*{flex:0 0 100%;min-width:0}
  /* one part at a time on every width now (Jason 30/10/2026: "3 separate tabs like on the mobile"), each the full width */
  html[data-mdtab="bets"] body:not(.nba) #soccerview>#bt{flex:1 1 100%;margin:0!important}
  html[data-mdtab="bets"] body:not(.nba) #soccerview>#tips{flex:1 1 100%;margin:0!important;padding:0!important;display:flex!important;flex-direction:column}
  html[data-mdtab="bets"] body:not(.nba) #tips>.tipgrid{flex:1;display:flex!important;flex-direction:column;gap:0!important;margin:0!important}
  html[data-mdtab="bets"] body:not(.nba) #tips .tcol-lad{flex:1;display:flex!important;flex-direction:column;width:auto!important;max-width:none!important}
  html[data-mdtab="bets"] body:not(.nba) #tips .tcol-lad>.tcard.ladder{flex:1;margin:0!important}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk>.btout{grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk>.btout>.btpk{grid-column:2;grid-row:1/span 3}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk>.btout>:not(.btpk,.btcash,.btcnote){grid-column:1}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk>.btout>.btcash{justify-content:flex-start!important}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk>.btout>.btcash>.btcb{flex:0 0 auto!important;width:auto!important}
  html[data-mdtab="bets"] body:not(.nba) #bt .btk>.btout>:is(.btcash,.btcnote){grid-column:1/-1}
  html[data-mdtab="bets"] body:not(.nba) #bt .btbody{grid-template-columns:minmax(0,1fr)!important}
  html[data-mdtab="bets"] body:not(.nba) #bt .bth{flex-wrap:wrap!important}
}

/* ---------- NBA, layout B "Scoreboard" (runtime/nba.ts) ---------- */
/* the NBA tabs replace Soccer's when NBA is on; the old jump row and ☰ give way to them */
.mdtabs.nbt{display:none!important}
html.mdm body.nba .mdtabs.nbt{display:flex!important}
html.mdm body.nba .mdtabs:not(.nbt){display:none!important}
html.mdm body.nba .sbin>:is(#njump,#hamb){display:none!important}
/* same header as Soccer */
html.mdm .sportbar{background:var(--sb-bg)!important;border-bottom:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#nbaview iframe{background:var(--sb-bg)!important}
@media (max-width:640px){
  body.nba #nbaview{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
/* NBA More (Jason 12 Oct, round 2): the same full-page menu as Soccer, above the NBA bar */
html.mdm body.nba #hambm{top:var(--mdtop,54px)!important;bottom:calc(62px + env(safe-area-inset-bottom,0px))!important;left:0!important;right:0!important}


/* Tables: the chosen league gets a blue ring instead of the filled box (Jason 12 Oct) */
.lgtabs .lgtb.lgtile[aria-selected="true"],.lgtabs .lgtb.lgtile[aria-selected="true"]:hover{background:none!important;box-shadow:none!important}
.lgtabs .lgtb.lgtile[aria-selected="true"] .lglogo{box-shadow:0 0 0 3px var(--sb-accent,#FF7A2E),0 0 14px color-mix(in srgb,var(--sb-accent,#FF7A2E) 55%,transparent)!important}

.bt .btc.today{border:2px solid var(--sb-accent)!important}
.bt .btc.today i{color:var(--sb-accent)!important}

/* Live: "Coming up" row of every game still to come (runtime/mobile.ts) */
/* pinned under the header on every tab (Jason 12 Oct: "keep it pinned"); the jump rows stick under it */
#mdup{display:flex;flex-direction:column;gap:6px;padding:8px;margin:0 -8px 4px;background:var(--sb-bg);border-bottom:0;order:-1;position:sticky;top:var(--mdtop,54px);z-index:22}
@media (min-width:641px){#mdup{margin:0 0 4px;padding:8px 0}}
#mdup .mdupr{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:2px 2px 4px}
#mdup .mdupr::-webkit-scrollbar{display:none}
#mdup .mdupc{flex:0 0 152px;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:var(--sb-panel);color:var(--sb-text,#F0F0F2);text-align:left;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
#mdup .mdupc:hover{border-color:var(--sb-accent,#FF7A2E)}
#mdup .mdupw{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--sb-muted,#A3A7AE)}
#mdup .mdupw b{font-size:13px;color:#7b96ff}
#mdup .mdupt{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:600}
#mdup .mdupt em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mdup .mdupt .lvlg{flex:none;width:18px;height:18px;display:grid;place-items:center}
#mdup .mdupt .lvlg svg{width:18px;height:18px}
#mdup small{font-size:10.5px;color:var(--sb-muted,#A3A7AE);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mdup .mdupn{margin:0;padding:8px;color:var(--sb-muted,#A3A7AE);font-size:12px}
body.nba #mdup{display:none!important}
/* the Tips and Bet tabs keep to their own content: no games row and no day row there (Jason 29/10/2026: too much on one screen) */
/* no Up next or day row on Tips, Bet, or an open match (Jason 30/10/2026: they took too much space above the match tabs) */
html:is([data-mdtab=tips],[data-mdtab=bets],[data-mdtab=hub],[data-mdtab=tables]) #mdup,html:is([data-mdtab=tips],[data-mdtab=bets],[data-mdtab=hub],[data-mdtab=tables]) #soccerview>.dayrow{display:none!important}
/* Jason 14 Oct: bigger Banker / Double / Multi tiles in Tips, every leg shown, with the hit chance */
/* phones: the pinned row a little shorter */
@media (max-width:640px){#mdup{padding-top:6px;padding-bottom:6px}#mdup .mdupc{flex-basis:132px;padding:5px 8px;gap:2px;border-radius:10px}#mdup .mdupr{padding-bottom:0}#mdup small{display:none}#mdup .mdupt{font-size:12px}#mdup .mdupt .lvlg,#mdup .mdupt .lvlg svg{width:15px;height:15px}}
/* phones, Matches (Jason 12 Oct): each game in three columns split by lines: kick-off (smaller),
   the two teams, and the prediction */
@media (max-width:640px){
  body:not(.nba) .tablewrap #list .row[data-id]{grid-template-columns:46px minmax(0,1fr) 108px!important;column-gap:0!important;align-items:stretch!important}
  body:not(.nba) .tablewrap #list .row[data-id]>.time{grid-column:1!important;grid-row:1!important;align-self:center;padding-right:6px;font-size:12px!important;line-height:1.2}
  body:not(.nba) .tablewrap #list .row[data-id]>.time small{font-size:9.5px!important}
  body:not(.nba) .tablewrap #list .row[data-id]>.tm{grid-column:2!important;grid-row:1!important;border-left:1px solid var(--sb-line);padding:0 8px!important;align-self:stretch;justify-content:center;min-width:0}
  body:not(.nba) .tablewrap #list .row[data-id]>.tm .tl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
  body:not(.nba) .tablewrap #list .row[data-id]>.tm .ha{display:none!important}
  body:not(.nba) .tablewrap #list .row[data-id]>.verdict{grid-column:3!important;grid-row:1!important;border-left:1px solid var(--sb-line);padding:0 0 0 8px!important;margin:0!important;align-self:stretch;flex-direction:column!important;justify-content:center;align-items:flex-start!important;gap:4px!important;font-size:12.5px!important;line-height:1.25;min-width:0}
  body:not(.nba) .tablewrap #list .row[data-id]>.verdict .sel{font-size:12.5px!important}
  body:not(.nba) .tablewrap #list .row[data-id]>.verdict .sel .b-mute{display:block;font-size:11px}
  body:not(.nba) .tablewrap #list .row[data-id]>.verdict .badges,body:not(.nba) .tablewrap #list .row[data-id]>.verdict>:is(span,div):not(.sel,.cell-lab){display:flex;flex-wrap:wrap;gap:3px;font-size:9.5px}
}
/* NBA: the same search as Soccer in the top bar, for NBA teams and games (Jason 12 Oct) */
body.nba .sportbar .hsearch{display:block!important}

html body:not(.nba) #bt.bt{--gold:var(--sb-accent);background:var(--sb-panel)!important;border:0!important;box-shadow:none!important;border-radius:14px!important;padding:12px 14px!important}
html body:not(.nba) #bt .bth{gap:8px 12px!important;margin-bottom:10px}
html body:not(.nba) #bt .bth h2{font-style:normal!important;font-size:19px!important;letter-spacing:.01em!important}
html body:not(.nba) #bt .bth h2::before{display:none!important}
html body:not(.nba) #bt .bth h2 span:not(.ico){color:inherit!important}
html body:not(.nba) #bt .btchip button,html body:not(.nba) #bt .btghost{font-size:12.5px!important}
html body:not(.nba) #bt .btchip.on{background:color-mix(in srgb,var(--sb-accent) 14%,transparent)!important}
html body:not(.nba) #bt .btk{gap:8px!important}
html body:not(.nba) #bt .btk>div,html body:not(.nba) #bt .btk>.btout,html body:not(.nba) #bt .btpk{background:var(--sb-bg)!important;border:0!important;box-shadow:none!important;padding:8px 10px!important}
html body:not(.nba) #bt .btk span,html body:not(.nba) #bt .btk small,html body:not(.nba) #bt .btpk span,html body:not(.nba) #bt .btpk small{color:var(--sb-muted,#A3A7AE)!important}
html body:not(.nba) #bt .btk b{font-size:20px!important;color:var(--sb-text,#F0F0F2)}
html body:not(.nba) #bt .btk .btol .btod b{font-family:var(--body)!important;font-size:13px!important;font-weight:600!important;font-style:normal!important;text-transform:none!important;letter-spacing:0!important;line-height:1.25!important}
html body:not(.nba) #bt .btpk b{color:var(--sb-win,#22C55E)!important}
html body:not(.nba) #bt .btcb,html body:not(.nba) #bt .btcb.co{font-size:12.5px!important;color:var(--sb-text,#F0F0F2)!important;border-color:transparent!important;background:transparent!important}
html body:not(.nba) #bt .btcal,html body:not(.nba) #bt .btday,html body:not(.nba) #bt .btside,html body:not(.nba) #bt .btsearch,html body:not(.nba) #bt .btform{background:var(--sb-bg)!important;border-color:transparent!important;box-shadow:none!important}
html body:not(.nba) #bt .btmh b{font-size:15px!important}
html body:not(.nba) #bt .btc{background:var(--sb-panel)!important;border-color:transparent!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;padding:3px 5px 10px!important;font-size:12px!important}
html body:not(.nba) #bt .btc.x{background:transparent!important;border-color:transparent!important}
html body:not(.nba) #bt .btc.today{border:2px solid var(--sb-accent)!important}
html body:not(.nba) #bt .btc.today i{color:var(--sb-accent)!important}
html body:not(.nba) #bt .btc.sel{border-color:var(--sb-accent)!important;box-shadow:0 0 0 1px var(--sb-accent)!important}
html body:not(.nba) #bt .btgo,html body:not(.nba) #bt .btsl button.on{background:var(--sb-accent-fill)!important;border-color:var(--sb-accent-fill)!important;color:var(--sb-on-accent)!important}
html body:not(.nba) #bt .btmin{background:var(--sb-bg)!important;border-color:transparent!important}
html body:not(.nba) #bt .btw50 input{accent-color:var(--sb-accent)}
html body:not(.nba) #bt .pos{color:var(--sb-win,#22C55E)!important}html body:not(.nba) #bt .neg{color:var(--sb-loss,#F25C5C)!important}
html body:not(.nba) #bt .bth{align-items:center}
html body:not(.nba) #bt .btchip.on{border-color:var(--sb-accent)!important}html body:not(.nba) #bt .btchip.on button{color:var(--sb-text,#F0F0F2)!important}
/* NBA search (Jason 12 Oct): team logos beside the names; no gap under the NBA button when nothing is listed */
.nblg{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:5px}
body.nba .hspanel:not(:has(.btsr,.btsm,.btnone)) .hscomp{margin-bottom:0}
.nbtm{white-space:nowrap}
/* phones: one team a line, away above home */
@media (max-width:639.9px){.btsr button b:has(.nbtm){display:flex;flex-direction:column;gap:3px}.btsr button b:has(.nbtm) .btv{display:none}}
body.nba .btsr button{gap:8px}

/* Jason 12 Oct: FotMob-style scrollable day row; the big date bar and the Show only switches are gone */
#datebar,#vtog{display:none!important}
.daystrip#daystrip{display:flex!important;grid-template-columns:none!important;gap:2px!important;overflow-x:auto!important;overflow-y:hidden;scrollbar-width:none;padding:0 4px!important;margin:0!important;border-bottom:0;-webkit-overflow-scrolling:touch}
.daystrip#daystrip::-webkit-scrollbar{display:none}
/* ‹ the picked day › (Jason 2/11/2026, phones and computers): an arrow at each end steps a day, the day sits in the middle */
.daystrip#daystrip{align-items:center!important;justify-content:space-between!important;overflow:visible!important}
#daystrip .dstep{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:2px;padding:0;border-radius:50%;color:var(--sb-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
#daystrip .dstep:hover{background:var(--sb-panel2)}#daystrip .dstep:focus-visible{outline:2px solid var(--sb-focus);outline-offset:-2px}
#daystrip .dpill.drow.dcur{display:flex!important;flex-direction:column;align-items:center;gap:1px;padding:7px 18px!important}
#daystrip .dcur small{font:500 10.5px var(--body,system-ui);color:var(--sb-muted)}
#daystrip .dpill.drow{flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important;display:block!important;padding:10px 14px!important;margin:5px 1px!important;border:0!important;border-radius:999px!important;background:none!important;box-shadow:none!important;color:var(--sb-muted)!important;font:500 14px/1.2 Roboto,system-ui,sans-serif!important;white-space:nowrap;cursor:pointer;margin:0!important}
#daystrip .dpill.drow:hover{color:var(--sb-text)!important}
#daystrip .dpill.drow.none{opacity:.55}
#daystrip .dpill.drow[aria-pressed="true"]{color:var(--sb-text)!important;background:var(--sb-panel2)!important;font-weight:700!important}
#daystrip .dpill.drow.today:not([aria-pressed="true"]){color:var(--sb-text)!important}
.dayrow{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
.dayrow>#daystrip{flex:none!important;width:100%!important;max-width:100%!important}
/* phones: the date row snug under the top bar (Jason 2/11/2026: "such a big gap") */
@media (max-width:640px){html body #soccerview.wrap{padding-top:0!important;padding-block-start:0!important}html body #soccerview>.dayrow{margin-top:0!important}html body #daystrip .dstep{margin:0 2px}}
/* phones, Live and Matches (Jason 2/11/2026): the date row stays pinned just under the mascot bar as you scroll, and the games
   strip (#mdup) scrolls away with the page, back above the date row when you return to the top; the row is slimmer, with
   less space above and below */
@media (max-width:640px){
  html body #mdup{position:relative!important;top:auto!important}
  html body #soccerview>.dayrow{position:sticky!important;top:var(--mdtop,56px);z-index:23;margin:0 -8px!important;padding:2px 8px!important;background:var(--sb-bg)}
  html:is([data-mdtab=home],[data-mdtab=matches]) body #soccerview.wrap{row-gap:8px!important} /* the sections sit closer on these two pages */
  html body #daystrip .dstep{height:32px}
  html body #daystrip .dpill.drow.dcur{padding:4px 16px!important}
}
/* Jason 22 Oct: the row of days shows on every tab; its filters stay on Matches, and More › Customise › Day and date bar
   can turn it back to Matches only */
html:not([data-mdtab=matches]) #soccerview>.dayrow>#filters,html[data-czd=hide]:not([data-mdtab=matches]) #soccerview>.dayrow{display:none!important}
@media (max-width:639.9px){#daystrip .dpill.drow{padding:9px 11px!important;font-size:13px!important}#daystrip .dmo{display:none}}

/* Jason 12 Oct: My bets shows one part at a time, picked with the buttons at the top; on every width since 30/10/2026
   (desktop too: "3 separate tabs like on the mobile version") */
/* My bets first, then the Ladder, then the tracker (Jason 29/10/2026); My bets shows until a button picks another part */
html[data-mdtab="bets"]:not([data-mdp-bets="ladderchallenge"]) #tips .tcard.ladder:not(.slipx){display:none!important}
html[data-mdtab="bets"]:not([data-mdp-bets="bettracker"]) #bt{display:none!important}
html[data-mdtab="bets"]:is([data-mdp-bets="ladderchallenge"],[data-mdp-bets="bettracker"]) #sb{display:none!important}

/* NBA on phones (Jason 13 Oct): Stats is back in the bottom bar as its own tab; seven buttons share the
   width evenly, with slimmer icons and labels so none of them feel cramped */
@media (max-width:639.9px){
  .mdtabs.nbt{padding-left:2px!important;padding-right:2px!important}
  .mdtabs.nbt button{flex:1 1 auto;min-width:0;gap:3px;padding:7px 0 5px;font-size:10px;letter-spacing:0;white-space:nowrap}
  .mdtabs.nbt button svg{width:20px;height:20px}
  .mdtabs.nbt button span{max-width:100%;overflow:hidden;text-overflow:clip}
}

/* profile page (Jason 12 Oct): one centred column, a smaller name box, tight spacing (the ranks and avatars came out 29/10/2026, plan PR 24a) */
#prof .pfpanel{display:block!important;padding:16px!important}
#prof .pfwrap{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
#prof .pfwrap .pfhd{margin:0 0 6px}
#prof .pfwrap .pfl{margin:8px 0 0!important;padding:0!important}
#prof .pfwrap .pfin{height:auto!important;min-height:0!important;padding:8px 12px!important;font-size:14px!important;margin:0!important;width:100%;box-sizing:border-box}
@media (min-width:641px){#prof .pfwrap .pfin{max-width:340px}}
#prof .pfwrap .pfft{margin-top:8px}
/* day row arrows at both ends (Jason 12 Oct) */
/* day row: drag with the mouse */
/* Live scores (Jason 12 Oct): the phone's dark navy panel on every screen size, with darker cards */
html body:not(.nba) #livebox{background:var(--sb-panel)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important;--sb:var(--sb-panel);--sbl:var(--sb-line);--sbb:var(--sb-line)}
html body:not(.nba) #livebox .lvc{background:var(--sb-bg)!important;border-color:transparent!important}
html body:not(.nba) #livebox .lvc.live{border-color:rgba(123,150,255,.45)!important}
/* no zooming on phones (Jason 12 Oct): pans only, no pinch or double-tap zoom */
html,body{touch-action:pan-x pan-y}
/* Jason 15 Oct: a sideways swipe only moves between tabs (runtime/swipe.ts). Without this Chrome also ran its own
   swipe-to-go-back on the same swipe, so every swipe stepped back a page too, and once those ran out it left the app
   (touch screens only, so a laptop's two-finger swipe back still works) */
/* Jason 15 Oct: sideways finger moves on the page belong to the tab swipe (rows that scroll sideways still scroll), and
   the bottom bar shows no focus ring after a swipe or Back on a phone */
@media (pointer:coarse){html,body{overscroll-behavior-x:none;touch-action:pan-y}}
/* Jason 15 Oct, again: the keyboard-focus ring rule further down weighs more than this did (and the accent picker
   copies it in his accent, the red box), so the bar's ring still showed. Repeated classes give this one more weight */
@media (pointer:coarse){html body .mdtabs.mdtabs.mdtabs button:is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}}
html body #prof .pfpanel{background:linear-gradient(165deg,#1d2850 0%,#151d3a 45%,#10162b 100%)!important}
html body #prof .pfwrap span.pfl{margin-top:16px!important}
/* soccer boxes in the live-scores navy: var(--sb-panel) panels, var(--sb-bg) inner cards (Jason 12 Oct) */
html body:not(.nba) :is(#tips .tcard:not(.ladder),section.ladders,.tablewrap){background:var(--sb-panel)!important;background-image:none!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important}
html body:not(.nba) .tablewrap .thead{background:var(--sb-bg)!important;border-color:transparent!important}
html body:not(.nba) .tablewrap .dayhead{background:var(--sb-bg)!important}
html body:not(.nba) #tips .tcard.totd .rank{background:var(--sb-bg)!important;border-color:transparent!important}
/* tables: no grey line across the top, league tiles on one row so the table sits higher (Jason 12 Oct) */
html body:not(.nba) #tips.tips::before{display:none!important}
html body:not(.nba) section.ladders{margin-top:0!important}
@media(min-width:640px){html body:not(.nba) #tips section.ladders .lgtabs{flex-wrap:nowrap!important;justify-content:center!important;gap:6px!important;overflow:visible!important}html body:not(.nba) #tips section.ladders .lgtabs>.lgtb.lgtile{width:78px!important;padding:6px!important;flex:0 0 auto!important}html body:not(.nba) #tips section.ladders .lgtabs .lglogo{width:100%!important;height:auto!important}}
@keyframes lvgoalpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}6%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}10%{transform:translate(-50%,-50%) scale(1)}90%{opacity:1}100%{opacity:0}}
/* soccer page background: solid dark, no green glow at the top (Jason 12 Oct) */
html body:not(.nba){background:var(--sb-bg)!important;background-image:none!important}
/* match centre: centred on screen on desktop; margin:auto keeps a tall one scrollable from the top (Jason 12 Oct) */
@media(min-width:641px){html body #mcbox.mcwrap:not([hidden]){align-items:flex-start!important}html body #mcbox.mcwrap>*{margin:auto!important}}
/* compact bet tracker phone */
@media(max-width:639.9px){html[data-mdtab=bets] body:not(.nba) .mdsubw{margin-top:0!important;padding-top:2px!important;padding-bottom:2px!important}}
html:root body:not(#zz) #bt.bt .bth{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:6px 8px!important;margin:0 0 8px!important;padding:0!important}
html:root body:not(#zz) #bt.bt .bth>h2{grid-column:1!important;grid-row:1!important;font-size:17px!important;margin:0!important;line-height:1.1!important}
html:root body:not(#zz) #bt.bt .bth>.btbtn{grid-column:2!important;grid-row:1!important;margin:0!important;width:auto!important}
html:root body:not(#zz) #bt.bt .bth>.btbtn .btghost{padding:4px 10px!important;font-size:11.5px!important;width:auto!important;min-height:0!important}
html:root body:not(#zz) #bt.bt .bth>.btunit{grid-column:1/-1!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important;margin:0!important;overflow-x:auto;scrollbar-width:none}
html:root body:not(#zz) #bt.bt .btunit label{display:flex!important;align-items:center!important;gap:5px!important;margin:0!important;flex:0 0 auto}
html:root body:not(#zz) #bt.bt .btunit label>span:first-child{font-size:10px!important}
html:root body:not(#zz) #bt.bt .btunit .btin{width:66px!important;padding:3px 6px!important;min-height:0!important}
html:root body:not(#zz) #bt.bt .btunit .btin input{font-size:14px!important;padding:0!important;height:auto!important}
html:root body:not(#zz) #bt.bt .btpre{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;margin:0!important;flex:0 0 auto}
html:root body:not(#zz) #bt.bt .btpre .btchip,html:root body:not(#zz) #bt.bt .btpre .btchip button,html:root body:not(#zz) #bt.bt .btpre>button{flex:0 0 auto!important;min-width:0!important;width:auto!important;max-width:none!important}
html:root body:not(#zz) #bt.bt .btpre button{padding:4px 9px!important;font-size:12px!important;min-height:0!important;width:auto!important}
html:root body:not(#zz) #bt.bt .btjump{display:none!important}
@media(max-width:639.9px){
html:root body:not(#zz) #bt.bt{padding:10px 10px 12px!important;margin-top:6px!important}
html:root body:not(#zz) #bt.bt .btk{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;margin:0 0 8px!important}
html:root body:not(#zz) #bt.bt .btk>div{padding:5px 6px!important;min-height:0!important;border-radius:9px!important}
html:root body:not(#zz) #bt.bt .btk>div>span{font-size:9px!important;letter-spacing:.04em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
html:root body:not(#zz) #bt.bt .btk>div>b{font-size:14px!important;line-height:1.2!important;white-space:nowrap}
html:root body:not(#zz) #bt.bt .btk>div>small,html:root body:not(#zz) #bt.bt .btk .btcnote{display:none!important}
html:root body:not(#zz) #bt.bt .btk>.btout{grid-column:1/-1!important;display:grid!important;grid-template-columns:auto auto minmax(0,1fr)!important;align-items:center!important;column-gap:12px!important;row-gap:6px!important;padding:7px 8px!important}
html:root body:not(#zz) #bt.bt .btk>.btout>span{grid-column:1!important;grid-row:1!important}
html:root body:not(#zz) #bt.bt .btk>.btout>b{grid-column:1!important;grid-row:2!important;font-size:16px!important}
html:root body:not(#zz) #bt.bt .btk>.btout>.btpk{position:static!important;grid-column:2!important;grid-row:1/span 2!important;display:block!important;padding:0!important;border:0!important;background:none!important;margin:0!important}
html:root body:not(#zz) #bt.bt .btk>.btout>.btpk{align-self:stretch!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important}
html:root body:not(#zz) #bt.bt .btk>.btout>.btpk>span{font-size:9px!important;display:block}
html:root body:not(#zz) #bt.bt .btk>.btout>.btpk>b{font-size:16px!important}
html:root body:not(#zz) #bt.bt .btk>.btout>.btpk>small{display:none!important}
html:root body:not(#zz) #bt.bt .btk>.btout>.btcash{grid-column:3!important;grid-row:1/span 2!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;margin:0!important}
html:root body:not(#zz) #bt.bt .btk>.btout>.btcash>.btcb{padding:4px 3px!important;font-size:10.5px!important;width:auto!important}
html:root body:not(#zz) #bt.bt .btk>.btout>:not(span):not(b):not(small):not(.btpk):not(.btcash){grid-column:1/-1!important}
html:root body:not(#zz) #bt.bt .btcal{padding:6px 8px!important}
html:root body:not(#zz) #bt.bt .btmh{margin:0 0 4px!important;min-height:0!important}
html:root body:not(#zz) #bt.bt .btmh .btnav{width:26px!important;height:26px!important;padding:0!important}
html:root body:not(#zz) #bt.bt .btgrid{gap:2px!important}
html:root body:not(#zz) #bt.bt .btgrid .btc{min-height:0!important;height:33px!important;aspect-ratio:auto!important;padding:2px 3px!important;overflow:hidden!important;position:relative!important}
html:root body:not(#zz) #bt.bt .btgrid .btc>.rdl{display:none!important}
html:root body:not(#zz) #bt.bt .btgrid .btc>b{font-size:9.5px!important;line-height:1.1!important;white-space:nowrap}
html:root body:not(#zz) #bt.bt .btgrid .btc>.pk{all:unset!important;position:absolute!important;top:3px!important;right:3px!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#fdb927!important;font-size:0!important;overflow:hidden!important}
html:root body:not(#zz) #bt.bt .btmf{margin-top:5px!important;padding:4px 8px!important}
html:root body:not(#zz) #bt.bt .btmf b{font-size:14px!important}
}

/* end compact bet tracker phone */

/* top bar results (Jason 13 Oct) */
#mdup .mdupr{cursor:grab}#mdup .mdupr.dragging{cursor:grabbing}#mdup .mdupr.dragging .mdupc{pointer-events:none}
#mdup .mdupc.res .mdupt i{margin-left:auto;font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;color:var(--sb-text,#F0F0F2);padding-left:6px}
#mdup .mdupc.res .mdupt.lose{color:var(--sb-muted,#A3A7AE)}#mdup .mdupc.res .mdupt.lose i{color:var(--sb-muted,#A3A7AE);font-weight:600}
#mdup .mdupc.res .mdupw b.ft{color:var(--sb-muted,#A3A7AE);font-weight:800}
#mdup .mdupc.res.live{border-color:color-mix(in srgb,var(--sb-win,#22C55E) 45%,transparent)}
#mdup .mdupc.res.live .mdupw b.lv{color:var(--sb-win,#22C55E)}#mdup .mdupc.res.live .mdupt i{color:var(--sb-win,#22C55E)}
#mdup .mdupc.res+.mdupc:not(.res){margin-left:10px}
#mdup .mdupc.res+.mdupc:not(.res)::before{content:"";position:absolute;left:-10px;top:12%;bottom:12%;border-left:1px dashed var(--sb-line)}
#mdup .mdupc{position:relative}
/* Jason 13 Oct: on the Live tab the top bar shows only games still to come (results stay on the other tabs) */
html[data-mdtab="home"] #mdup .mdupc.res{display:none}
html[data-mdtab="home"] #mdup .mdupc.res+.mdupc:not(.res){margin-left:0}
html[data-mdtab="home"] #mdup .mdupc.res+.mdupc:not(.res)::before{display:none}
/* Jason 13 Oct: league tiles matte, the Live boxes' var(--sb-bg), no gloss, glow or lift */
html body .lgtabs .lgtb.lgtile .lglogo{background:#1c1d20!important;border:1px solid #2b2d31!important;box-shadow:none!important;filter:none!important;transform:none!important}
html body .lgtabs .lgtb.lgtile:hover .lglogo{border-color:rgba(255,255,255,.22)!important;box-shadow:none!important}
html body .lgtabs .lgtb.lgtile[aria-selected="true"] .lglogo{box-shadow:none!important;border:2px solid var(--sb-accent,#FF7A2E)!important}
/* Jason 13 Oct: Matches day headers fold their games away */
#list>.dhid{display:none!important}
#list .dayhead.dfold{cursor:pointer;user-select:none;-webkit-user-select:none}
#list .dayhead.dfold:hover{color:var(--text,var(--sb-text,#F0F0F2))}
#list .dayhead .dfc{display:inline-block;width:1.1em;color:var(--sb-accent)}
#list .dayhead.shut{opacity:.8}
/* Appearance switch in More (runtime/theme.ts): a quiet two-way segment, its own colours in each theme */
#hambm .mdhm-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 8px 8px 14px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--sb-text,#F0F0F2);font:600 13.5px "IBM Plex Sans",system-ui,sans-serif}
/* Tables: team crest tiles in matte black too (Jason 13 Oct) */
html body .ladders .lr .flag.lgo{background:#1c1d20!important;border:1px solid #2b2d31!important}
html body .lgtabs .lgtb.lgtile[title] .lglogo{background:#1c1d20!important;border:1px solid #2b2d31!important}

/* ---- Jason 13 Oct: Tables and Tips polish ---- */
/* the league you picked lights up blue */
html body .lgtabs .lgtb.lgtile[title][aria-selected="true"] .lglogo,html body .lgtabs .lgtb.lgtile[aria-selected="true"] .lglogo{background:#2a47c9!important;border:2px solid #8aa0ff!important;box-shadow:0 0 14px color-mix(in srgb,var(--sb-accent,#FF7A2E) 55%,transparent)!important}
/* one won/lost badge everywhere in Tips: green won, red lost */
html body .pill2.won{background:#1f9d55!important;color:#fff!important}
html body .pill2.lost{background:#d64541!important;color:#fff!important}
html body .pill2.won,html body .pill2.lost,html body .pill2.push{font:700 10px "IBM Plex Sans",system-ui,sans-serif!important;letter-spacing:.08em;padding:2px 8px!important;border-radius:999px!important;margin-left:8px;vertical-align:middle}
/* Tip of the day: a two-team pick uses the same tile as a one-team pick, a crest in each half */
html body #tips .rank .flag.duo,html body #tips .rank .flag.duo.lgo,html body #tips .rank .flag.duo.txt{display:grid!important;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;width:46px!important;height:34px!important;box-sizing:border-box;padding:2px!important;gap:0!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:5px!important;box-shadow:none!important;overflow:hidden}
html body #tips .rank .flag.duo>i,html body #tips .rank .flag.duo>b{display:grid!important;place-items:center;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-width:0}
html body #tips .rank .flag.duo>*+*{margin-left:0!important;border-left:1px solid rgba(255,255,255,.1)!important}
html body #tips .rank .flag.duo>i .tlg{width:100%!important;height:100%!important;max-width:20px;max-height:26px;object-fit:contain}
html body #tips .rank .flag.duo>b.tcl{font-size:8px!important;border-radius:3px!important;height:auto!important;padding:1px 0!important}
/* Banker, Double of the day and Multi slip: bigger, all in the site blue */
/* preview write-up */
#tips .pvcase p{margin:0 0 8px;font:400 13.5px/1.55 "IBM Plex Sans",system-ui,sans-serif;color:#d6dde6}
#tips .pvcase p:last-child{margin-bottom:0}
/* tiles: odds at the far right, small Add bet and refresh under them (Jason 13 Oct) */
@media (max-width:1500px){#pkrow .pkh em{display:none!important}}
/* Banker, Double of the day and Multi slip, redesigned (Jason 14 Oct): header (name, tag, legs, start time, ↻),
   every leg with its price then +, and a footer of odds, hit chance and Add bet pinned to the bottom so the
   three tiles in a row end flush however many legs each has. No "$10 returns" line. */
html body:not(.nba) #pkhero .pkrow{align-items:stretch!important}
/* Readable small print (audit 13 Oct, Jason: "text, fonts, names of players are visible"): labels that carry
   information and were 9.5-10px are 11px. Letters inside form boxes and badges keep their box size. */
html body :is(.cst,.onnow,.lvcomp,.lvwhen2 small,.chd,.hc small,.trecb small,.lnewin>b i){font-size:11px!important}
/* Bet tracker "Total staked": the Settled / Riding split was cut off ("$39(", "$20.(") because the card's big figure
   font reached into it; the split keeps its own small figure and stacks its label over the amount */
html body #bt.bt .btk .stsplit span{flex-direction:column;align-items:flex-start;gap:1px;max-width:100%;min-width:0}
html body #bt.bt .btk .stsplit span b{font:600 13.5px/1.2 "IBM Plex Sans",system-ui,sans-serif!important;letter-spacing:0!important;white-space:nowrap}
/* Keyboard focus (audit 13 Oct, phase 6): a ring on whatever the keyboard reaches. Buttons and links show it on
   Tab only (:focus-visible); text boxes show it once the keyboard is in use (html.mdkbd, runtime/a11y.ts), so taps
   and clicks look the same as before */
html body :is(button,a[href],summary,select,[role=button],[role=tab],[role=radio],[tabindex]:not([tabindex="-1"])):focus-visible,
html body #hambm .mdhm button:focus-visible,
html.mdkbd body :is(input,textarea,select):focus{outline:2px solid var(--sb-accent,#FF7A2E)!important;outline-offset:2px!important}
html[data-theme=light] body :is(button,a[href],summary,select,[role=button],[role=tab],[role=radio],[tabindex]:not([tabindex="-1"])):focus-visible,
html[data-theme=light] body #hambm .mdhm button:focus-visible,
html.mdkbd[data-theme=light] body :is(input,textarea,select):focus{outline-color:#C2410C!important}
/* bigger tap areas for the small add / refresh / team buttons, without changing how they look */
html body :is(.pkadd .pkla,.pkadd .addall,.lr .tmlink,.lpopb){position:relative}
/* the refresh button is absolute on the cards (already holds its hit area) but static in the tips row, where the hit area
   would otherwise stretch over the whole card and take the taps meant for the + buttons */
html body #pkrow .pkrf{position:relative;inset:auto}
html body :is(.pkadd .pkla,.pkrf)::before{content:"";position:absolute;inset:-4px}
html body :is(.pkadd .addall,.lr .tmlink,.lpopb)::before{content:"";position:absolute;inset:-3px 0}
/* motion: the looping shimmer and pulse effects stop for people who ask their device for less motion */
@media (prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* a pop-up itself takes focus when it opens (runtime/a11y.ts): no ring round the whole box */
html body :is([aria-modal="true"],#mcbox,#askbox,.pfpanel,#hambm,.mdal,.mbpanel,.selpop)[tabindex="-1"]:focus{outline:none!important}
/* ---------- Light | Dark switch (Jason 13 Oct): a bordered pill, light first, with a highlight that slides to the side picked ---------- */
html body :is(#hambm,#prof) .mdth-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
html body :is(#hambm,#prof) .mdth-seg .mdth-th{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--sb-accent,#FF7A2E);box-shadow:0 2px 8px color-mix(in srgb,var(--sb-accent,#FF7A2E) 45%,transparent);transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .2s;pointer-events:none}
html body :is(#hambm,#prof) .mdth-seg[data-on=dark] .mdth-th{transform:translateX(100%)}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth]{all:unset;position:relative;z-index:1;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-width:84px;padding:7px 12px;border-radius:999px;font:600 13px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-muted,#A3A7AE);background:none!important;box-shadow:none!important;border:0!important;transition:color .2s}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth]:hover{color:var(--sb-text,#F0F0F2)}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth][aria-pressed=true]{color:#fff;background:none!important}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth=light][aria-pressed=true] svg{color:#ffd23d}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth]:active svg{transform:scale(.85)}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth] svg{transition:transform .15s}
html body :is(#hambm,#prof) .mdth-seg.mdth-mini button[data-mdth]{min-width:0;width:34px;height:28px;padding:0}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth]:focus-visible{outline:2px solid var(--sb-accent,#FF7A2E);outline-offset:2px}
:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg{border-color:#1A1B1E;background:#FFFFFF}
:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg .mdth-th{background:#1A1B1E;box-shadow:0 2px 8px rgba(26,27,30,.3)}
:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg button[data-mdth]{color:#1A1B1E}
:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg button[data-mdth][aria-pressed=true]{color:#FFFFFF}
:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg button[data-mdth=light][aria-pressed=true] svg{color:#ffd23d}
:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg button[data-mdth]:focus-visible{outline-color:#C2410C}
html body #hambm .mdhm-theme{padding:8px 8px 8px 14px}
/* More ends at Sign out (Jason 13 Oct): the section list under it is gone (the bottom bar or sidebar has those) */
html body #hambm>:not(.mdhm){display:none!important}
html body #hambm .mdhm{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* ---------- profile: goal alerts and the Light | Dark switch in the username row (Jason 13 Oct) ---------- */
/* the bell is back in the header, between My Bets and search (Jason 18 Oct), drawn like the search button */
html body .sportbar .sbin>.mdbell{display:inline-grid!important;order:3!important;width:40px;height:40px;border:0;background:var(--sb-panel2);box-shadow:none;color:var(--sb-text)}
/* a 44 px hit area round the 36 px buttons on phones (audit U8) */
html body .sportbar .sbin>.mdbell::before,html body #hsearch .hsbar::before{content:"";position:absolute;inset:-6px}
html body .sportbar .sbin>.mdbell:hover,html body .sportbar .sbin>.mdbell[aria-expanded=true]{background:var(--sb-line)}
html body .sportbar .sbin>.mdbell svg{width:20px;height:20px}
@media (max-width:640.5px){html body .sportbar .sbin>.mdbell{width:32px;height:32px}}
:root[data-theme=light] body .sportbar .sbin>.mdbell{border-color:#1A1B1E;background:#FFFFFF;color:#1A1B1E;box-shadow:none}
:root[data-theme=light] body .sportbar .sbin>.mdbell:hover,:root[data-theme=light] body .sportbar .sbin>.mdbell[aria-expanded=true]{background:#EAEAE7}
html body #prof .pfurow{display:flex;align-items:flex-end;gap:10px}
html body #prof .pfuname{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
html body #prof .pfutool{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
html body #prof .pfapp{margin-left:auto}
html body #prof .pfurow .pfl{margin:8px 0 0!important}
html body #prof .pfbell{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.18);color:#fff;cursor:pointer}
html body #prof .pfbell:hover{background:rgba(255,255,255,.14)}
html body #prof .pfbell[aria-expanded=true]{border-color:var(--sb-accent,#FF7A2E)}
:root.mdalmute body #prof .pfbell{opacity:.55}
:root.mdalmute body #prof .pfbell::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
html body #prof .pfbell.ring svg{animation:mdring .9s ease-in-out 2;transform-origin:50% 10%}
:root[data-theme=light] body #prof .pfbell{border-color:#1A1B1E;background:#FFFFFF;color:#1A1B1E}
:root[data-theme=light] body #prof .pfbell:hover{background:#EAEAE7}
:root[data-theme=light] body #prof .pfbell[aria-expanded=true]{border-color:#C2410C;background:#EAEAE7}
@media (min-width:641px){html body #prof .pfwrap .pfuname .pfin{max-width:none}html body #prof .pfuname{max-width:340px}}

/* ---------- light mode in light blue, cream and navy (Jason 13 Oct), the rest is turned round by runtime/theme.ts ---------- */
:root[data-theme=light] body .sportbar,:root[data-theme=light] body.nba .sportbar{background:#FFFFFF!important;border-bottom:1px solid rgba(26,27,30,.14)!important;box-shadow:none!important}
:root[data-theme=light] body .mdtabs{background:#FFFFFF!important;border-color:rgba(26,27,30,.14)!important}
:root[data-theme=light] body .mdtabs button{color:#5E6168!important}
:root[data-theme=light] body .mdtabs button.on,:root[data-theme=light] body:is(.hambon,.mdpfm) .mdtabs button[data-more]{color:#1A1B1E!important}
:root[data-theme=light] body .mdtabs button.on svg{filter:none!important}
@media (min-width:641px){
  :root[data-theme=light] body .mdtabs{background:#EAEAE7!important;border-right:1px solid rgba(26,27,30,.12)!important}
  :root[data-theme=light] body .mdtabs button:hover{background:rgba(26,27,30,.06)!important}
  :root[data-theme=light] body .mdtabs button.on,:root[data-theme=light] body:is(.hambon,.mdpfm) .mdtabs button[data-more]{background:#DCDCD8!important}
  :root[data-theme=light] body:is(.hambon,.mdpfm) .mdtabs button.on{background:none!important;color:#5E6168!important}
}
/* 640.5, not 640: scripts/desktop-css.mjs copies max-width:640px blocks onto desktop, and this one is the phone bar only */
@media (max-width:640.5px){
  :root[data-theme=light] body .mdtabs button.on{color:var(--sb-accent)!important}
  :root[data-theme=light] body .mdtabs button.on::before{content:"";position:absolute;inset:3px 14% auto;height:3px;border-radius:2px;background:var(--sb-accent)}
  :root[data-theme=light] body .mdtabs button{position:relative}
}
/* the More menu and profile: cream page, light blue rows, navy text */
:root[data-theme=light] body #hambm{background:#F3F3F1!important}
:root[data-theme=light] body #hambm .mdhm-hd b{color:#1A1B1E}
:root[data-theme=light] body #hambm .mdhm button.mdhm-x{background:#EAEAE7;color:#1A1B1E}
:root[data-theme=light] body #hambm .mdhm-theme{background:#EAEAE7;color:#1A1B1E}
:root[data-theme=light] body #hambm .mdhm button.mdhm-out{background:#EAEAE7;color:#1A1B1E}
:root[data-theme=light] body #hambm .mdhm button.mdhm-out:hover{background:#DCDCD8}
:root[data-theme=light] body #prof .pfpanel{background:linear-gradient(165deg,#EAEAE7 0%,#F3F3F1 60%)!important}
:root[data-theme=light] body #prof .pfpanel :is(.pfhd b,.pfl){color:#1A1B1E!important}
/* goal alerts panel */
:root[data-theme=light] body .mdal{background:#FFFFFF;border-color:rgba(26,27,30,.2);color:#1A1B1E;box-shadow:0 14px 40px rgba(26,27,30,.25)}
/* light mode readability (13 Oct contrast check, WCAG AA) */
:root[data-theme=light] body #prof .pfsave{background:#1A1B1E!important;color:#FFFFFF!important}
:root[data-theme=light] body #prof .pfsave:hover{background:#1A1B1E!important}
:root[data-theme=light] body .btc u.pk{background:#fff1cc!important;border-color:#c9962e!important;color:#0b6830!important;box-shadow:none!important}
:root[data-theme=light] body .btc u.pk::after{display:none!important}
:root[data-theme=light] body .gb.na{opacity:.85}
:root[data-theme=light] body .gb.na b{color:#5E6168}
/* league table zones with white figures on a bright fill: navy figures read on those fills (5:1) */
:root[data-theme=light] body .lr>span.pos[style*="color:#fff"]{color:#1A1B1E!important}
/* My Bets panel on a light page (its tickets keep their own white paper look, runtime/theme.ts) */
:root[data-theme=light] body .mbpanel{background:#F3F3F1;border-color:rgba(26,27,30,.25)}

/* ---------- phase 7: table views, top scorers, best price ---------- */
.ladders .ladvw{flex-wrap:wrap}
.ladders .lsc .tmlink{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.2;gap:1px}
.ladders .lsc .tmlink b{font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ladders .lsc .tmlink small{font-size:11px;font-weight:600;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ladders .lsc .pos{background:transparent}
.auodds .obp td{white-space:nowrap}
.auodds .omv{display:inline-block;margin-left:3px;font-size:10px;vertical-align:1px}
.auodds .omv.up{color:var(--sb-win,#22C55E)}.auodds .omv.dn{color:#ff6b7a}
.auodds .omvx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.auodds .omg{color:var(--muted);font-size:12px}
.auodds .obest td{font-weight:700;border-top:1px solid var(--line)}
.auodds .obest small{display:block;font-size:10px;font-weight:600;color:var(--muted)}
:root[data-theme=light] body .auodds .omv.up{color:#0d6b33}
:root[data-theme=light] body .auodds .omv.dn{color:#b3261e}
/* the Results view (Matches) */
.resq{display:flex;gap:8px;align-items:center;margin:8px 0 4px}
.resq input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg)}
.resmore{display:block;margin:12px auto;font:inherit;font-weight:700;font-size:13px;padding:8px 16px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
@media (min-width:641px){.ladders .lt.ltsc{grid-template-columns:40px 18px 40px minmax(160px,1fr) repeat(4,48px);min-width:0}}
.ladders .lsc .pos:empty{visibility:hidden}
/* More › Customise › Homescreen layout (Jason 14 Oct, runtime/customise.ts): settings rows and a page per
   setting with a back arrow, like an app's settings. The page covers the rest of More while it's open. */
html body #hambm.mdczon>:not(.mdcz){display:none!important}
html body #hambm>.mdcz{display:flex!important}
#hambm .mdcz-more{display:flex;flex-direction:column;gap:6px;margin-top:12px}
#hambm .mdcz-more .mdhm-gt{margin:6px 2px 0}
#hambm .mdhm :is(button,a).mdcz-row{display:flex!important;align-items:center;gap:12px;justify-content:flex-start!important;min-height:48px;padding:0 14px!important;background:rgba(255,255,255,.05)!important;color:var(--sb-text,#F0F0F2)!important;font:600 14px "IBM Plex Sans",system-ui,sans-serif}
#hambm .mdhm :is(button,a).mdcz-row span{color:var(--sb-muted,#A3A7AE);font-size:18px}
#hambm .mdhm :is(button,a).mdcz-row:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 12%,transparent)!important}
#hambm .mdhm :is(button,a).mdcz-row svg{flex:none;color:var(--sb-accent,#FF7A2E)}
#hambm .mdhm .mdcz-row img{flex:none;width:22px;height:22px} /* App icon's row: the face picked now */
#hambm :is(.mdcz-icon,.mdcz-tzg){margin-top:10px}
#hambm .mdhm :is(button,a).mdcz-row b{flex:1;font-weight:600}
#hambm .mdcz{display:flex;flex-direction:column;gap:8px;font:400 14px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
#hambm .mdcz-hd{display:flex;align-items:center;gap:10px;margin:-4px 0 4px}
#hambm .mdcz-hd b{font:700 18px "IBM Plex Sans",system-ui,sans-serif;color:#fff}
#hambm .mdcz .mdcz-back{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--sb-text,#F0F0F2)}
#hambm .mdcz-sp{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);align-self:flex-start}
#hambm .mdcz-sp button{padding:6px 16px;border-radius:999px;font:600 13px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz-sp button[aria-pressed=true]{background:var(--sb-accent-fill);color:var(--sb-on-accent)}
#hambm .mdcz-cap{margin:2px 2px 4px;font-size:12.5px;line-height:1.45;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz-gt{margin:6px 2px 0;font:700 10.5px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-accent,#FF7A2E)}
#hambm .mdcz-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#hambm .mdcz-it{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 6px 0 4px;border-radius:14px;background:rgba(255,255,255,.06);transition:transform .15s}
#hambm .mdcz-it.drag{z-index:2;transition:none;background:#1c2433;box-shadow:0 8px 20px rgba(0,0,0,.45)}
#hambm .mdcz-it.off{opacity:.6}
#hambm .mdcz .mdcz-h{display:grid;place-items:center;flex:none;width:36px;height:44px;color:var(--sb-muted,#A3A7AE);touch-action:none;cursor:grab}
#hambm .mdcz-ic{display:grid;place-items:center;flex:none;color:var(--sb-accent,#FF7A2E)}
#hambm .mdcz-it b{flex:1;min-width:0;font-weight:600;font-size:14.5px;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz-mv{display:flex;gap:2px}
#hambm .mdcz .mdcz-mv button{display:grid;place-items:center;width:30px;height:36px;border-radius:8px;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz .mdcz-mv button:disabled{opacity:.25;cursor:default}
#hambm .mdcz .mdcz-eye{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz .mdcz-eye[aria-pressed=false]{color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz .mdcz-eye:disabled{opacity:.3;cursor:default}
#hambm .mdcz .mdcz-star{font-size:20px;line-height:1}#hambm .mdcz .mdcz-star.on{color:#FFD60A}
#hambm .mdcz .mdcz-eye:active,#hambm .mdcz .mdcz-mv button:active,#hambm .mdcz .mdcz-back:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 20%,transparent)}
#hambm .mdcz .mdcz-reset{display:flex;align-items:center;gap:12px;margin-top:10px;min-height:52px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.06);font-weight:600;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz .mdcz-reset:disabled{opacity:.4;cursor:default}
:root[data-theme=light] body #hambm .mdcz button{border:0!important;background:transparent!important;box-shadow:none!important;color:#1A1B1E!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-it{background:rgba(26,27,30,.06)!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-it.drag{background:#FFFFFF!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-back,:root[data-theme=light] body #hambm .mdcz .mdcz-reset{background:rgba(26,27,30,.08)!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-sp{background:rgba(26,27,30,.08)!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-sp button[aria-pressed=true]{background:#1A1B1E!important;color:#fff!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-eye[aria-pressed=false],:root[data-theme=light] body #hambm .mdcz .mdcz-h,:root[data-theme=light] body #hambm .mdcz .mdcz-mv button{color:#5E6168!important}
/* More › Customise settings (runtime/prefs.ts) */
html[data-czt=s] :is(#soccerview,#nbaview,#hambm){zoom:.92}
html[data-czt=l] :is(#soccerview,#nbaview,#hambm){zoom:1.08}
html[data-czt=xl] :is(#soccerview,#nbaview,#hambm){zoom:1.16}
html[data-czm=reduce] *,html[data-czm=reduce] *::before,html[data-czm=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-czs=hide] #mdup{display:none!important}
@media (max-width:640px){
  html[data-czl=none] .mdtabs button span,html[data-czl=on] .mdtabs button:not(.on) span{display:none!important}
  html[data-czl=none] .mdtabs button,html[data-czl=on] .mdtabs button{justify-content:center}
}
/* More › Customise › Tips: parts switched off (PR 23: the sections carry data-part, Today's picks is #pkhero) */
html[data-czoff~=tipoftheday] #tips [data-part=tipoftheday],
html[data-czoff~=bankermultis] #pkhero,
html[data-czoff~=matchpreviews] #tips [data-part=matchpreviews] :is(.tdsc,.tpcard>:not(.pvsum)),
html[data-czoff~=quicksummary] #tips .pvsum{display:none!important}
html[data-czoff~=matchpreviews][data-czoff~=quicksummary] #tips [data-part=matchpreviews]{display:none!important}
/* Customise pages: option chips and switches */
#hambm .mdcz-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:rgba(255,255,255,.06)}
#hambm .mdcz-card>b{font-size:14.5px;font-weight:600;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz-card>small{margin-top:-6px;font-size:12px;line-height:1.4;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz-ch{display:flex;flex-wrap:wrap;gap:6px}
#hambm .mdcz .mdcz-ch button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.14);font:600 13px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz .mdcz-ch button[aria-pressed=true]{border-color:var(--sb-accent,#FF7A2E);background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 18%,transparent);color:#fff}
#hambm .mdcz .mdcz-ch button svg{width:16px;height:16px}
/* App icon (Jason 2/11/2026): every look of the mascot in a grid, the chosen one lit in the accent; no outlines */
#hambm .mdcz .mdcz-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:4px 0 14px}
#hambm .mdcz .mdcz-looks button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:0;border-radius:14px;background:rgba(255,255,255,.06);font:600 12px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2);cursor:pointer}
#hambm .mdcz .mdcz-looks button[aria-pressed=true]{background:rgba(255,122,61,.24);color:#fff}
#hambm .mdcz .mdcz-looks img{width:55px;height:60px;display:block;object-fit:contain}
#hambm .mdcz .mdcz-looks img[src*="/looks/rage."]{flex:none;width:77.2px;height:76.2px;max-width:none;margin:-14.4px -10.9px -1.8px} /* Raging as big as the rest (see .mdshr) */
/* Time zone (Jason 2/11/2026): one row per country with its time now, the chosen one lit; no outlines */
#hambm .mdcz .mdcz-tz{display:flex;flex-direction:column;gap:4px;margin:4px 0 14px}
#hambm .mdcz .mdcz-tz button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:0;border-radius:12px;background:rgba(255,255,255,.06);font:600 14px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2);text-align:left;cursor:pointer}
#hambm .mdcz .mdcz-tz button small{flex:none;font-weight:500;font-size:13px;color:#8a97a8}
#hambm .mdcz .mdcz-tz button[aria-pressed=true]{background:rgba(255,122,61,.24);color:#fff}
:root[data-theme=light] body #hambm .mdcz .mdcz-tz button{background:rgba(26,27,30,.06);color:#1a1b1e}
:root[data-theme=light] body #hambm .mdcz .mdcz-tz button[aria-pressed=true]{background:rgba(255,122,61,.22);color:#1a1b1e}
:root[data-theme=light] body #hambm .mdcz .mdcz-looks button{background:rgba(26,27,30,.06);color:#1a1b1e}
:root[data-theme=light] body #hambm .mdcz .mdcz-looks button[aria-pressed=true]{background:rgba(255,122,61,.22);color:#1a1b1e}
#hambm .mdcz-sec{margin:8px 2px 0;font:700 10.5px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-accent,#FF7A2E)}
#hambm .mdcz-grp{display:flex;flex-direction:column;gap:2px;border-radius:14px;overflow:hidden}
#hambm .mdcz .mdcz-nav{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;background:rgba(255,255,255,.06)}
#hambm .mdcz .mdcz-nav svg{flex:none;color:var(--sb-accent,#FF7A2E)}
#hambm .mdcz-nav span{display:flex;flex-direction:column;min-width:0;flex:1}
#hambm .mdcz-nav span b{font-size:14.5px;font-weight:600;color:var(--sb-text,#F0F0F2)}
#hambm .mdcz-nav span small{font-size:12px;color:var(--sb-muted,#A3A7AE);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hambm .mdcz-nav>i{font-style:normal;font-size:18px;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz .mdcz-nav:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 12%,transparent)}
#hambm .mdcz-prev{display:flex;justify-content:space-around;padding:8px 4px;border-radius:12px;background:#0b0f15;border:1px solid rgba(255,255,255,.08)}
#hambm .mdcz-prev span{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 10.5px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz-prev span.on{color:var(--sb-accent,#FF7A2E)}
#hambm .mdcz-prev[data-l=none] span em,#hambm .mdcz-prev[data-l=on] span:not(.on) em{display:none}
#hambm .mdcz-prev em{font-style:normal}
:root[data-theme=light] body #hambm .mdcz .mdcz-nav,:root[data-theme=light] body #hambm .mdcz-card{background:rgba(26,27,30,.06)!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-ch button{border:1.5px solid rgba(26,27,30,.2)!important}
:root[data-theme=light] body #hambm .mdcz .mdcz-ch button[aria-pressed=true]{border-color:#1A1B1E!important;background:#1A1B1E!important;color:#fff!important}
:root[data-theme=light] body #hambm .mdcz-prev{background:#FFFFFF!important;border-color:rgba(26,27,30,.12)!important}
#hambm .mdhm :is(button,a).mdcz-row b{display:flex;flex-direction:column;min-width:0;gap:1px}
#hambm .mdhm :is(button,a).mdcz-row b small,#hambm .mdcz-it b small.mdcz-sub{font-size:11.5px;font-weight:400;color:var(--sb-muted,#A3A7AE);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hambm .mdcz-it b{display:flex;flex-direction:column;gap:1px}
#hambm .mdcz-it .mdcz-ic:first-child{margin-left:12px}
/* ---- a tab opened from More, as its own page (Jason 14 Oct, runtime/swipe.ts) ---- */
#mdov{display:none}
@media (max-width:640px){
  html.mdov #mdov:not([hidden]){display:flex;align-items:center;gap:10px;position:fixed;z-index:94;left:0;right:0;top:var(--mdtop,54px);height:48px;padding:0 8px 0 16px;background:var(--sb-bg);border-bottom:0;color:var(--sb-text,#F0F0F2);box-shadow:0 6px 14px rgba(0,0,0,.35)}
  #mdov .mdov-ic{display:grid;place-items:center;color:var(--sb-accent,#FF7A2E)}
  #mdov b{flex:1;font:700 17px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:0}
  #mdov button{all:unset;display:grid!important;place-items:center;width:38px;height:38px;border-radius:50%!important;background:rgba(255,255,255,.07)!important;color:var(--sb-text,#F0F0F2)!important;cursor:pointer}
  #mdov button:active{background:rgba(255,255,255,.16)!important}
  html.mdov body:not(.nba) #soccerview{padding-top:48px!important}
  html.mdov body:not(.nba) #mdup{display:none!important}
  html.mdov body:not(.nba) .mdsubw{top:calc(var(--mdtop,54px) + 48px)!important}
  html.mdov body.nba #nbaview{top:calc(var(--sbh,49px) + 48px)!important}
  html.mdov .mdtabs button[data-k]{opacity:.75}
}
:root[data-theme=light] #mdov{background:#F3F3F1!important;border-color:rgba(0,0,0,.12)!important;color:#1A1B1E!important;box-shadow:0 6px 14px rgba(0,0,0,.08)!important}
:root[data-theme=light] #mdov button{background:rgba(0,0,0,.06)!important;color:#1A1B1E!important}
:root[data-theme=light] #mdov .mdov-ic{color:#1A1B1E}
/* a swipe slides the new tab in from the side it came from */
@keyframes mdswl{from{transform:translateX(-28px);opacity:.35}to{transform:none;opacity:1}}
@keyframes mdswr{from{transform:translateX(28px);opacity:.35}to{transform:none;opacity:1}}
html[data-mdsw=l] :is(body:not(.nba) #soccerview,body.nba #nbaview iframe){animation:mdswl .24s ease-out}
html[data-mdsw=r] :is(body:not(.nba) #soccerview,body.nba #nbaview iframe){animation:mdswr .24s ease-out}
/* the colour cut out of Jason's pitch, basketball and ball icons (runtime/navprefs.ts) */
.mdtabs,.sportbar{--mdko:var(--sb-bg)}
#hambm{--mdko:var(--sb-panel)}
#mdov{--mdko:var(--sb-bg)}
:root[data-theme=light] #mdov{--mdko:#F3F3F1}
@media (min-width:641px){.mdtabs{--mdko:var(--sb-bg)}}
:root[data-theme=light] :is(.mdtabs,.sportbar){--mdko:#FFFFFF}
:root[data-theme=light] #hambm{--mdko:#F3F3F1}

/* accent colours under Appearance in More (Jason 14 Oct, runtime/accent.ts) */
#hambm .mdhm-theme:has(.mdacc){flex-wrap:wrap}
#hambm .mdacc{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 2px;border-top:1px solid rgba(255,255,255,.07);margin-top:6px}
#hambm .mdacc>span{font-size:13px;color:var(--sb-muted,#A3A7AE)}
/* ten colours (Jason 15 Oct): two rows of five beside the label */
#hambm .mdacc{align-items:flex-start}
#hambm .mdacc>span{padding-top:7px}
#hambm .mdacc-sw{display:grid;grid-template-columns:repeat(5,30px);gap:10px 12px}
html body #hambm .mdacc button{all:unset;box-sizing:border-box;width:30px;height:30px;border-radius:50%!important;background:var(--sw)!important;border:0!important;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);position:relative}
html body #hambm .mdacc button[aria-checked="true"]{box-shadow:0 0 0 2px var(--sb-panel),0 0 0 4px var(--sw)}
#hambm .mdacc button[aria-checked="true"]::after{content:"";position:absolute;left:10px;top:7px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
#hambm .mdacc button:focus-visible{outline:2px solid var(--sb-text,#F0F0F2);outline-offset:3px}
:root[data-theme=light] #hambm .mdacc{border-top-color:rgba(26,27,30,.12)}
:root[data-theme=light] #hambm .mdacc>span{color:#5E6168}
:root[data-theme=light] html body #hambm .mdacc button[aria-checked="true"]{box-shadow:0 0 0 2px #EAEAE7,0 0 0 4px var(--sw)}

/* Jason 15 Oct: the slim bar for an open match or preview (replaces the floating Collapse button) and no Back to top
   arrow (tap the tab you're on to go back to the top) */
#toTop{display:none!important}
.mxsb{position:fixed;z-index:56;display:flex;align-items:stretch;box-sizing:border-box;height:44px;background:var(--pgcard);color:var(--pgink);
  border:0;border-radius:0 0 12px 12px;box-shadow:0 6px 18px rgba(0,0,0,.28);font:inherit}
.mxsb[hidden]{display:none}
.mxsb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mxsb-go{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 8px 0 14px;font-weight:700;font-size:14px}
.mxsb-go span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mxsb-go b{flex:none;font-weight:800;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:6px;background:var(--pgchip)}
.mxsb-x{flex:none;width:48px;font-size:17px;font-weight:700;color:var(--pgmut)!important;border-left:0!important}
.mxsb-x:hover,.mxsb-go:hover{background:var(--pgchip)}
.mxsb button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
/* Jason 15 Oct: the league-table button beside every prediction's game, and the game line itself, open the table
   with both teams lit up (the sheet's data-golad jump) */
html body .tblgo{display:inline-grid;place-items:center;vertical-align:middle;width:24px;height:24px;margin:-4px 0 -4px 4px;padding:0;border:0;border-radius:6px;background:none;color:inherit;opacity:.7;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body .tblgo:hover{opacity:1;background:rgba(127,127,127,.16)}
html body .tblgo svg{width:16px;height:16px}
html body .tbllink{cursor:pointer}
html body .tbllink:hover{text-decoration:underline;text-underline-offset:2px}

/* Install ShrimpPicks (runtime/install.ts): the how-to card for phones where the site can't open the install dialog itself */
#hambm .mdinst-g{margin-top:10px}
#mdinst{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(1,4,9,.6)}
#mdinst .mdinst-card{width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow:auto;padding:20px 18px 16px;border-radius:18px;background:var(--sb-panel);border:1px solid rgba(255,255,255,.1);color:var(--sb-text,#F0F0F2);font:400 14px/1.45 "IBM Plex Sans",system-ui,sans-serif;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#mdinst img{display:block;margin:0 auto 10px;border-radius:14px}
#mdinst .mdinst-card>b{display:block;font-size:17px;font-weight:700}
#mdinst ol{margin:14px 0 16px;padding:0 0 0 22px;text-align:left}
#mdinst li{margin:0 0 8px}
#mdinst li b{color:#fff}
#mdinst [data-mdinst-x]{width:100%;min-height:44px;border:0;border-radius:12px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font:700 14px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
#mdinst .mdinst-now{width:100%;min-height:44px;margin:0 0 10px;border:0;border-radius:12px;background:var(--sb-panel2);color:var(--sb-text);font:700 14px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
#mdinst .mdfaq{margin:12px 0 10px;text-align:left}
#mdinst .mdfaq details{border-top:1px solid var(--sb-line)}
#mdinst .mdfaq summary{padding:11px 2px;font-size:14px;font-weight:600;cursor:pointer}
#mdinst .mdfaq p{margin:0 2px 12px;font-size:13.5px;line-height:1.45;color:var(--sb-muted)}
#mdinst a{color:var(--sb-accent)}
html body #hambm .mdhm button.mdhm-del{background:none;color:var(--sb-loss,#F25C5C)}
#mdinst .mddel-t{margin:12px 0;font-size:14px;line-height:1.45;text-align:left}
#mdinst .mddel-l{display:block;margin:0 0 6px;font-size:13px;font-weight:600;text-align:left}
#mdinst .mddel-i{box-sizing:border-box;width:100%;height:44px;margin:0 0 10px;padding:0 12px;border:1px solid var(--sb-line);border-radius:10px;background:var(--sb-panel2);color:var(--sb-text);font:600 16px "IBM Plex Sans",system-ui,sans-serif}
#mdinst .mddel-e{margin:0 0 10px;font-size:13px;color:var(--sb-loss,#F25C5C);text-align:left}
#mdinst .mddel-b{width:100%;min-height:44px;margin:0 0 10px;border:0;border-radius:12px;background:#DC2626;color:#fff;font:700 14px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
#mdinst .mddel-b:disabled{opacity:.4;cursor:default}
@media (min-width:641px){#mdinst{align-items:center}}
:root[data-theme=light] body #mdinst .mdinst-card{background:#FFFFFF;border-color:rgba(26,27,30,.15);color:#1A1B1E}
:root[data-theme=light] body #mdinst li b{color:#1A1B1E}
:root[data-theme=light] body #mdinst [data-mdinst-x]{background:#1A1B1E}
#mdinst .mdinst-note{margin:-6px 0 14px;font-size:12.5px;color:var(--sb-muted,#A3A7AE);text-align:left}
#mdinst a.mdinst-apk{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--sb-text,#F0F0F2);text-decoration:none;text-align:left;font-weight:600}
#mdinst a.mdinst-apk svg{flex:none;color:var(--sb-accent,#FF7A2E)}
#mdinst a.mdinst-apk span{display:flex;flex-direction:column;gap:2px}
#mdinst a.mdinst-apk small{font-weight:400;font-size:12px;color:var(--sb-muted,#A3A7AE)}
:root[data-theme=light] body #mdinst a.mdinst-apk{background:rgba(26,27,30,.07);color:#1A1B1E}

/* iPhone home-screen app (Jason 16 Oct): the status bar is see-through (black-translucent) and sits over the page,
   so the sticky header stops just below it and a strip in the header's colour fills the space behind the clock.
   Elsewhere the inset is 0 and nothing changes. */
.sportbar{top:env(safe-area-inset-top,0px)!important}
html::before{content:"";position:fixed;z-index:96;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:#06090c;pointer-events:none}
:root[data-theme=light]::before{background:#FFFFFF}
#hambm a.mdinst-w{text-decoration:none;cursor:pointer}
#hambm .mdtip-g{margin-top:10px}
/* Support ShrimpPicks in the heart eyes pink, whatever the accent or theme (Jason 3/11/2026) */
html body #hambm .mdtip-g .mdhm-gt,html body #hambm .mdtip-a>svg{color:#FF4D6D!important}
#hambm .mdtip-a>svg path{fill:#FF4D6D}
#hambm .mdfaq-g{margin-top:10px}
#hambm a.mdtip-a{text-decoration:none;cursor:pointer}
#hambm .mdtip-n{margin:8px 2px 0;font:400 11px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-muted,#A3A7AE)}
/* More › Suggestions and feedback (runtime/feedback.ts, Jason 20 Oct): three taps, then the box to write in */
#hambm .mdfb-g{margin-top:10px}
#hambm>.mdfb{width:100%;max-width:600px}
#hambm .mdfb-pr{display:flex;align-items:center;gap:10px;margin:0 2px;font:600 12px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-muted,#A3A7AE)}
#hambm .mdfb-pr>i{flex:1;display:flex;gap:4px}
#hambm .mdfb-pr>i>i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
#hambm .mdfb-pr>i>i.on{background:var(--sb-accent,#FF7A2E)}
#hambm .mdfb-q{margin:8px 2px 2px;font:700 16px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2)}
#hambm .mdfb-ops{display:flex;flex-direction:column;gap:8px}
#hambm .mdcz .mdfb-op{display:flex;align-items:center;gap:14px;min-height:64px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1.5px solid transparent}
#hambm .mdcz .mdfb-op svg{flex:none;color:var(--sb-accent,#FF7A2E)}
#hambm .mdfb-op span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#hambm .mdfb-op span b{font-size:15px;font-weight:600;color:var(--sb-text,#F0F0F2)}
#hambm .mdfb-op span small{font-size:12px;color:var(--sb-muted,#A3A7AE)}
#hambm .mdfb-op>i{font-style:normal;font-size:18px;color:var(--sb-muted,#A3A7AE)}
#hambm .mdcz .mdfb-op[aria-pressed=true]{border-color:var(--sb-accent,#FF7A2E);background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 14%,transparent)}
#hambm .mdcz .mdfb-op:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 18%,transparent)}
#hambm .mdfb-sum{display:flex;flex-wrap:wrap;gap:6px}
#hambm .mdcz .mdfb-sum button{padding:6px 12px;border-radius:999px;border:1.5px solid var(--sb-accent,#FF7A2E);background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 14%,transparent);font:600 12.5px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2)}
#hambm .mdfb-tx{box-sizing:border-box;width:100%;min-height:150px;resize:vertical;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--sb-text,#F0F0F2);font:400 15px/1.45 "IBM Plex Sans",system-ui,sans-serif;outline:none}
#hambm .mdfb-tx:focus{border-color:var(--sb-accent,#FF7A2E)}
#hambm .mdfb-tx::placeholder{color:#6e7681}
#hambm .mdfb-ft{display:flex;justify-content:space-between;gap:10px;margin:0 2px;font-size:11.5px;line-height:1.4;color:var(--sb-muted,#A3A7AE)}
#hambm .mdfb-ct{flex:none}
#hambm .mdcz .mdfb-send{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:4px;border-radius:14px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font:700 15px "IBM Plex Sans",system-ui,sans-serif}
#hambm .mdcz .mdfb-send:disabled{opacity:.4;cursor:default}
#hambm .mdfb-done{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 8px 0;text-align:center}
#hambm .mdfb-done>svg{color:var(--sb-win,#22C55E)}
#hambm .mdfb-done b{font:700 18px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-text,#F0F0F2)}
#hambm .mdfb-done p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--sb-muted,#A3A7AE)}
#hambm .mdfb-done .mdfb-send{align-self:stretch}
#hambm a.mdfb-own{margin:6px 2px 0;font:600 13px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-accent,#FF7A2E);text-decoration:none}
:root[data-theme=light] body #hambm .mdcz .mdfb-op,:root[data-theme=light] body #hambm .mdfb-tx{background:rgba(26,27,30,.06)!important}
:root[data-theme=light] body #hambm .mdcz .mdfb-op[aria-pressed=true]{border:1.5px solid #1A1B1E!important}
:root[data-theme=light] body #hambm .mdfb-op span b,:root[data-theme=light] body #hambm .mdfb-q,:root[data-theme=light] body #hambm .mdfb-done b,:root[data-theme=light] body #hambm .mdfb-tx{color:#1A1B1E}
:root[data-theme=light] body #hambm .mdfb-tx{border-color:rgba(26,27,30,.2)}
:root[data-theme=light] body #hambm .mdfb-pr>i>i:not(.on){background:rgba(26,27,30,.14)}
:root[data-theme=light] body #hambm .mdcz .mdfb-sum button{border:1.5px solid #1A1B1E!important;background:#1A1B1E!important;color:#fff!important}
:root[data-theme=light] body #hambm .mdcz .mdfb-send{background:#1A1B1E!important;color:#fff!important}
/* Top games row switch in More › Customise (runtime/customise.ts, Jason 16 Oct) */
#hambm .mdcz-sw{flex:none;position:relative;width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .15s}
#hambm .mdcz-sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
#hambm .mdcz-tg[aria-checked=true] .mdcz-sw{background:var(--sb-accent,#FF7A2E)}
#hambm .mdcz-tg[aria-checked=true] .mdcz-sw i{transform:translateX(18px)}
:root[data-theme=light] body #hambm .mdcz-tg:not([aria-checked=true]) .mdcz-sw{background:#DCDCD8}
/* Statistics tab (runtime/react/MatchHub.tsx, Jason 16 Oct): the game picker above the open match */
#mxhub{margin:8px 0 24px}
/* the game picker stays pinned with the teams and the tabs under it (Jason 29/10/2026) */
#mxhub .hubbar{position:sticky;top:calc(var(--mdtop,54px) + var(--mdup,0px));z-index:16;display:flex;align-items:center;gap:8px;margin:0;padding:0 0 8px;background:var(--sb-bg)}
#mxhub .hubsel{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 12px;height:44px;border-radius:12px;background:var(--sb-panel,#232529);border:1px solid #2a2f36;font:600 13px "IBM Plex Sans",system-ui,sans-serif;color:var(--sb-muted,#A3A7AE)}
#mxhub .hubsel select{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:100%;padding-right:22px;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/16px;color:var(--sb-text,#F0F0F2);font:600 14px "IBM Plex Sans",system-ui,sans-serif;outline:none;cursor:pointer}
#mxhub .hubsel select option,#mxhub .hubsel select optgroup{background:var(--sb-panel,#232529);color:var(--sb-text,#F0F0F2)}
#mxhub .hubsel:focus-within{border-color:var(--sb-accent,#FF7A2E)}
#mxhub .hubstep{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid #2a2f36;background:var(--sb-panel,#232529);color:var(--sb-text,#F0F0F2);font:600 22px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
#mxhub .hubstep:disabled{opacity:.35;cursor:default}
#mxhub .hubx{display:grid;place-items:center}
/* a phone page opened from More already has its own X in the #mdov header */
html.mdov #mxhub .hubx{display:none}
#mxhub .hubbar .hubnone{flex:1}
#mxhub .hubnone{padding:24px 4px;color:var(--sb-muted,#A3A7AE);font:400 14px "IBM Plex Sans",system-ui,sans-serif}
html body #mxhub .detail.pgd{display:block!important;min-width:0!important;padding:0!important;margin:0!important;background:var(--pgbg)!important;border:0!important;border-radius:8px;overflow:clip;color:var(--pgink);font-family:var(--body);grid-template-columns:none!important}
:root[data-theme=light] #mxhub :is(.hubsel,.hubstep){background:#fff;border-color:#DCDCD8;color:#1A1B1E}
:root[data-theme=light] #mxhub .hubsel select{background-color:#fff;color:#1A1B1E}
:root[data-theme=light] #mxhub .hubsel select :is(option,optgroup){background:#fff;color:#1A1B1E}

/* ---- Accessibility quick wins (audit U3, U9, U11; plan PR 19) ---- */
/* text box borders 3:1 or better on every panel (they were about 1.4:1); boxes drawn without a border stay without one */
:is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,textarea){border-color:var(--sb-field-line)}
/* skip link (runtime/a11y.ts): out of sight until a keyboard reaches it */
.mdskip{position:fixed;left:12px;top:-60px;z-index:100000;padding:10px 16px;border-radius:10px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font:600 14px "IBM Plex Sans",system-ui,sans-serif;text-decoration:none}
.mdskip:focus{top:calc(12px + env(safe-area-inset-top,0px));outline:2px solid var(--sb-focus);outline-offset:2px}
.mdsr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* placeholder rows while the fixtures load */
.mdskel{height:52px;margin:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--sb-panel) 0,var(--sb-panel2) 50%,var(--sb-panel) 100%) 0 0/200% 100%;animation:mdskel 1.4s linear infinite}
@keyframes mdskel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.mdskel{animation:none}}

/* ---- the logo in the top bar (Jason 2/11/2026: his mascot, public/icons/mascot.png): still at rest; a goal or a settled
   bet plays Shrimpy's old move on it, then it's back to rest ---- */
/* 40 px tall beside the 44 px ball and its name: the pixel SB's 26 px would lose the boy's face */
.mdshr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:37px;height:40px;order:0;margin:0}
.mdshr img{width:37px;height:40px;display:block;object-fit:contain}
/* Raging (Jason 2/11/2026: as big as the others): its picture is him plus the fire round him (aura.cjs: he is 71.4% of
   its width, 78.7% of its height, 18.9% down), so it's drawn bigger and pulled back to sit him in the same 37 x 40 spot;
   the flames spill out round it */
.mdshr img[src*="/looks/rage."]{flex:none;width:51.5px;height:50.8px;max-width:none;margin:-9.6px -7.25px -1.2px} /* flex:none, or the spot squeezes it back */
/* small phones: Shrimpy takes the room the words "Sign in" had; the person icon stays (the button keeps its name) */
@media (prefers-reduced-motion:no-preference){
  .mdshr[data-mood=cheer] img{animation:shr-jump .8s cubic-bezier(.34,1.5,.64,1) 4;transform-origin:50% 80%}
  .mdshr[data-mood=nervous] img{animation:shr-shiver .25s ease-in-out 12;transform-origin:50% 60%}
  .mdshr[data-mood=sad] img{animation:shr-sway 3.2s ease-in-out 1;transform-origin:50% 90%}
}
@keyframes shr-jump{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.06,.95)}70%{transform:translateY(0) scale(.97,1.04)}}
@keyframes shr-shiver{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-1px) rotate(-1.5deg)}75%{transform:translateX(1px) rotate(1.5deg)}}
@keyframes shr-sway{0%,100%{transform:rotate(-3deg) translateY(1px)}50%{transform:rotate(3deg) translateY(2px)}}
@keyframes shr-drip{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes shr-sweat{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(2px);opacity:1}}

/* ---- a phone on its side (audit U14): a shorter bar with the icon beside the label, and less of the screen under it ---- */
@media (max-width:640px) and (orientation:landscape){
  .mdtabs button{flex-direction:row;gap:6px;min-height:44px;padding:3px 0}
  .mdtabs button span{font-size:11px}
  body{padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))}
  .sportbar .sbin{min-height:48px}
}

/* the header search button in graphite (its green ring and gold icon came from the sheet) */
html body #hsearch .hsbar{background:var(--sb-panel2)!important;border:0!important;box-shadow:none!important;position:relative}
html body #hsearch .hsbar svg{color:var(--sb-text)!important}
html body #hsearch .hsbar:focus-within{background:var(--sb-line)!important}

/* ---- no borders anywhere (Jason 28/10/2026): until each tab is rebuilt, every box the sheet outlines keeps its
   width (so nothing moves) with the line made invisible; the dividers between rows stay ---- */
html.mdm :is(#livebox,#livebox .lvc,#livebox .lvchip2,#livebox .lvlegs,#mdup .mdupc,#bt,#bt .btk>div,#tips .tcard,.ladders,.tablewrap,.tablewrap .thead,#mxhub,#pkhero .pk,#favs){border-color:transparent!important;box-shadow:none!important}
html.mdm body .tablewrap:has(#list){border-color:transparent!important}

/* ---------- the tour for new users (runtime/tour.ts, plan PR 21a): a dim layer with the step's element cut out, and a card ---------- */
.mdtour{position:fixed;inset:0;z-index:1200;font:14px/1.5 Roboto,system-ui,sans-serif;color:var(--sb-text)}
.mdtour-dim{position:absolute;inset:0;width:100%;height:100%;fill:rgba(26,27,30,.82)}
/* a circle round each name, one colour on every step whatever the accent or theme (Jason 3/11/2026) */
.mdtour-rings i{position:fixed;box-sizing:border-box;border:3px solid #FFD400;border-radius:999px;box-shadow:0 0 14px 3px rgba(255,212,0,.6);pointer-events:none}
.mdtour-card{position:fixed;left:12px;right:12px;bottom:calc(var(--mdbot,64px) + 12px);max-width:440px;margin:0 auto;padding:16px;border-radius:12px;background:var(--sb-panel)}
.mdtour.welcome .mdtour-card{top:50%;bottom:auto;transform:translateY(-50%);text-align:center;padding:22px 18px}
.mdtour.welcome .mdtour-card>svg{width:96px;height:96px;overflow:visible}
.mdtour-k{font-size:12px;color:var(--sb-muted);font-weight:600;margin-top:6px}
.mdtour-card h3{margin:4px 0 6px;font-size:20px;font-weight:700;line-height:1.2}
.mdtour-card p{margin:0;color:var(--sb-muted)}
.mdtour-card{max-height:calc(100dvh - var(--mdbot,64px) - 40px);overflow-y:auto}
.mdtour-a{display:inline-block;margin-top:8px;color:var(--sb-accent);font-weight:600}
.mdtour-fig{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;align-items:start}
.mdtour-fig figure{margin:0;min-width:0}
.mdtour-fig figcaption{margin-bottom:5px;font-size:12px;font-weight:600;color:var(--sb-text)}
.mdtour-fig .lvc{background:var(--sb-panel2);padding:8px;gap:6px;cursor:default;pointer-events:none}
/* the green a live tile turns with a bet placed (runtime/live.css), which is only set inside the Live page */
.mdtour-fig .lvc.mybet{background:#0F3D2E;--sb-text:#F0F0F2;--sb-muted:#A3A7AE;--sb-panel2:rgba(240,240,242,.18);color:#F0F0F2}
.mdtour-fig .lvbig{font-size:24px}
.mdtour-fig .lvs .lvbig+.lvbig::before{margin:0 3px}
.mdtour-fig .lvt{font-size:11px;gap:3px}
.mdtour-fig .lvlg{width:24px;height:24px}
.mdtour-fig .lvleg2{font-size:11px;gap:2px 5px}
.mdtour-fig .lvleg2 small{font-size:10px}
/* the heart eyes mascot on the plain pages of the tour (Jason 3/11/2026) */
.mdtour-logo img{display:block;width:auto;height:96px;margin:0 auto}
/* the My Bets panel's look without its place on the page */
html body .mdtour-slip.mbpanel{position:static;width:auto;max-height:none;overflow:visible;margin:10px 0 0;padding:0;background:none;border:0;box-shadow:none;transform:none;z-index:auto}
html body .mdtour-slip .svcard{margin:0}
.mdtour-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 12px}
.mdtour-dots i{width:6px;height:6px;border-radius:3px;background:var(--sb-line)}
.mdtour-dots i.on{width:18px;background:var(--sb-accent)}
.mdtour-btns{display:flex;gap:8px}
.mdtour-btn{flex:1;height:44px;border:0;border-radius:8px;background:var(--sb-panel2);color:var(--sb-text);font:600 13px Roboto,system-ui,sans-serif;cursor:pointer}
.mdtour-btn.main{flex:1.4;background:var(--sb-accent);color:var(--sb-on-accent)}
.mdtour-btn:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
@media (min-width:641px){
  .mdtour-card{left:calc(var(--sbw,208px) + 24px);right:auto;bottom:24px;width:420px;margin:0}
  .mdtour.welcome .mdtour-card{left:50%;transform:translate(-50%,-50%)}
}
@media (prefers-reduced-motion:no-preference){
  .mdtour:not(.welcome) .mdtour-card{animation:mdtour-in .25s ease-out}
  .mdtour.welcome .mdtour-card{animation:mdtour-fade .25s ease-out}
}
@keyframes mdtour-in{from{opacity:0;transform:translateY(12px)}}
@keyframes mdtour-fade{from{opacity:0}}

/* ---- the top bar (plan PR 24a, Jason 29/10/2026): Shrimpy is the sport switch, the chosen sport's ball sits at his right, the
   ShrimpPicks wordmark is in the middle, search and goal alerts at the right, all one size. The avatar, ranks and leaderboard
   are gone; My Bets left the bar (More and the Bet tab's "+ Add a bet" open its panel, which is still in #mybets). ---- */
html body .sportbar .sbin{position:relative;flex-wrap:nowrap;gap:6px;min-height:56px}
html body .sportbar .sbin>#mybets{display:block!important;flex:0 0 0!important;width:0!important;min-width:0!important;margin:0!important;padding:0!important}
html body .sportbar .sbin>#mybets .mbbtn{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
/* Shrimpy, a button: his mood moves stay (runtime/shrimpy.ts) */
.mdsw{all:unset;box-sizing:border-box;order:0;flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:auto;min-width:52px;height:44px;padding:0 4px;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.mdsw:hover,.mdsw[aria-expanded=true]{background:var(--sb-panel2)}
.mdsw:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
.mdsw .mdshr{margin:0}
/* the ball at his right, white like the soccer ball, with the sport's name under it (Jason 29/10/2026) */
.mdball{all:unset;box-sizing:border-box;order:0;flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:38px;height:44px;padding-top:8px;margin-left:-2px;perspective:160px;color:var(--sb-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* ball and label sit 4px lower, the label's foot level with the mascot's (Jason 2/11/2026: "they're so high up") */
.mdball small{font:700 9px/1 "Roboto Condensed",Roboto,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-muted);white-space:nowrap}
.mdball:focus-visible{outline:2px solid var(--sb-focus);outline-offset:-2px;border-radius:8px}
.mdball svg{display:block;width:24px;height:24px} /* the logo's height (Jason 1/11/2026: the ball looked bigger) */
/* out of Shrimpy: the soccer ball bounces across and settles, the basketball spins like a globe on its way */
.mdball.go[data-sp=soccer] svg{animation:mdbounce .85s cubic-bezier(.3,.6,.3,1) both}
.mdball.go[data-sp=nba] svg{animation:mdspin .9s cubic-bezier(.2,.7,.3,1) both}
.mdball.go small{animation:mdlabel .85s cubic-bezier(.3,.6,.3,1) both}
@keyframes mdlabel{0%{transform:translateX(-34px);opacity:0}40%{opacity:0}100%{transform:none;opacity:1}}
@keyframes mdbounce{0%{transform:translate(-34px,0) rotate(0) scale(.3);opacity:0}10%{opacity:1}28%{transform:translate(-22px,-18px) rotate(130deg) scale(1)}50%{transform:translate(-10px,0) rotate(250deg)}70%{transform:translate(-3px,-8px) rotate(330deg)}86%{transform:translate(0,0) rotate(370deg)}93%{transform:translate(0,-2px) rotate(374deg)}100%{transform:translate(0,0) rotate(376deg)}}
@keyframes mdspin{0%{transform:translateX(-34px) rotateY(0) scale(.3);opacity:0}10%{opacity:1}100%{transform:translateX(0) rotateY(900deg) scale(1)}}
/* the ball moves even under reduced motion (Jason 29/10/2026): it is short and only ever follows his own tap; everything else on the site
   still keeps still. The site-wide rule above cuts every animation to .01ms, so the ball gets its length back here, after it */
@media (prefers-reduced-motion:reduce){html body .mdball.go svg,html body .mdball.go small{animation-duration:.85s!important}html body .mdball.go[data-sp=nba] svg{animation-duration:.9s!important}}
/* the picker, under Shrimpy */
.mdsp{position:absolute;z-index:120;left:8px;top:calc(100% + 4px);display:flex;flex-direction:column;gap:2px;min-width:168px;padding:6px;border-radius:12px;background:var(--sb-panel);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.mdsp[hidden]{display:none}
.mdsp button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:8px;color:var(--sb-text);font:500 14px Roboto,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mdsp button:hover,.mdsp button[aria-checked=true]{background:var(--sb-panel2)}
.mdsp button[aria-checked=true]::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--sb-accent)}
.mdsp button:focus-visible{outline:2px solid var(--sb-focus)}
.mdsp button svg{width:24px;height:24px}
/* the ShrimpPicks lettering at the top of the sport menu (Jason 2/11/2026) */
/* the wordmark */
.mdwm{order:1;flex:1;min-width:0;margin:0 4px;text-align:center;font:700 20px/1 Sora,Roboto,system-ui,sans-serif;letter-spacing:-.02em;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;-webkit-user-select:none}
.mdwm b{font-weight:700;color:#FF6B2C}
/* search, then goal alerts, both 40 px round */
html body .sportbar .sbin>#hsearch{order:3!important;margin:0!important}
html body .sportbar .sbin>.mdbell{order:4!important;width:32px;height:32px}
/* search (Jason 29/10/2026: it had no close and slid to the far left): shut, a round button; open on a phone it takes the whole bar with its close
   button; open on a desktop it grows to the left where it is */
html body #hsearch .hsbar{min-width:32px;height:32px;padding:0;justify-content:center;gap:0;border-radius:999px}
html body #hsearch .hs:not(.open) .hsbar input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html body #hsearch .hs.open .hsbar{width:100%;justify-content:flex-start;gap:8px;padding:0 6px 0 12px}
html body #hsearch .hs.open .hsbar input{position:static;flex:1;min-width:0;width:auto;height:auto;opacity:1;pointer-events:auto;font:500 15px Roboto,system-ui,sans-serif}
html body #hsearch .hs.open .hsx{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--sb-line);color:var(--sb-text);font-size:14px}
@media (max-width:640px){html body .sportbar .sbin:has(#hsearch .hs.open)>:is(.mdsw,.mdball,.mdwm,.mdbell,.mdcal,.mdmyb){display:none!important}html body .sportbar .sbin:has(#hsearch .hs.open)>#hsearch{flex:1 1 auto!important;min-width:0}}
@media (min-width:641px){html body #hsearch .hs.open .hsbar{width:380px}}
/* the calendar, search and alerts: one size, 18 px icons (the bell read bigger) */
html body .sportbar .sbin>.mdbell svg,html body #hsearch .hsbar>svg,.mdcal svg,.mdmyb svg{width:16px;height:16px}
/* the Matches filters (today, next 3 days, all upcoming, results, the leagues) live behind the calendar button */
:is(.mdcal,.mdmyb){all:unset;box-sizing:border-box;order:2;flex:none;display:inline-grid;place-items:center;position:relative;width:32px;height:32px;border-radius:999px;background:var(--sb-panel2);color:var(--sb-text);cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(.mdcal,.mdmyb):hover,:is(.mdcal,.mdmyb)[aria-expanded=true]{background:var(--sb-line)}:is(.mdcal,.mdmyb):focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
body.nba .mdcal{display:none}
.mdcalp{position:absolute;z-index:120;right:8px;top:calc(100% + 4px);width:min(380px,calc(100vw - 16px));max-height:min(70vh,560px);overflow:auto;padding:12px;border-radius:12px;background:var(--sb-panel);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.mdcalp[hidden]{display:none}
/* the month grid (Jason 1/11/2026): numbers only, a dot on days with games, today in orange, the picked day filled */
.mdcg{margin:0 0 14px}
.mdcgh{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.mdcgh b{font:700 15px Roboto,system-ui,sans-serif;color:var(--sb-text)}
.mdcgh button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sb-panel2);color:var(--sb-text);font:700 18px/1 Roboto,system-ui,sans-serif;cursor:pointer}
.mdcgw,.mdcgd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.mdcgw span{padding:2px 0 4px;font:700 10.5px Roboto,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--sb-muted)}
.mdcgd button{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;height:40px;border-radius:10px;font:600 14px Roboto,system-ui,sans-serif;color:var(--sb-text);cursor:pointer}
.mdcgd button:hover:not(:disabled){background:var(--sb-panel2)}
.mdcgd button.has::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--sb-muted)}
.mdcgd button.today{color:var(--sb-accent);font-weight:800}
.mdcgd button.on{background:var(--sb-accent-fill);color:var(--sb-on-accent)}.mdcgd button.on.has::after{background:currentColor}
.mdcgd button:disabled{opacity:.3;cursor:default}
:is(.mdcgh,.mdcgd) button:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* a day from the results archive on Matches */
.arcd{display:grid;gap:10px}.arcl{background:var(--sb-panel);border-radius:10px;overflow:hidden}
.arch{margin:0;padding:9px 12px;font:700 12px Roboto,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--sb-muted);background:var(--sb-panel2)}
.arcr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;font:600 14px Roboto,system-ui,sans-serif;color:var(--sb-text)}
.arcr+.arcr{border-top:1px solid var(--sb-line)}.arcr .h{text-align:right}.arcr b{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.arcr :is(.h,.a){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arcn{margin:0;font:400 12px Roboto,system-ui,sans-serif;color:var(--sb-muted)}
.mdcalp h4{margin:0 0 8px;font:700 11px Roboto,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-muted)}
html body .mdcalp #filters{display:flex!important;flex-wrap:wrap!important;gap:6px!important;overflow:visible!important;padding:0!important;margin:0!important}
html body .mdcalp #filters .chip{display:inline-flex!important;flex-direction:column;align-items:flex-start;padding:8px 12px!important;border:0!important;border-radius:8px!important;background:var(--sb-panel2)!important;color:var(--sb-text)!important;font:600 13px Roboto,system-ui,sans-serif!important;line-height:1.2;box-shadow:none!important}
html body .mdcalp #filters .chip .chd{font-size:10.5px;opacity:.75}
html body .mdcalp #filters .chip[aria-pressed=true]{background:var(--sb-accent-fill)!important;color:var(--sb-on-accent)!important}
html body .mdcalp #filters .sep{flex-basis:100%;height:6px;background:none!important;border:0!important;margin:0!important}
/* Tips as four parts on sticky tabs (Jason 29/10/2026): Tip of the day (with today's tips and the lists), Match previews, Today's picks, Playbook; one at a time on every width */
html[data-mdtab=tips]:not([data-mdp-tips=playbook]) #pbhero,html[data-mdtab=tips]:not([data-mdp-tips=todayspicks]) #pkhero,html[data-mdtab=tips]:not([data-mdp-tips=matchpreviews]) #tips .tps[data-part=matchpreviews]{display:none!important}
html[data-mdtab=tips]:is([data-mdp-tips=playbook],[data-mdp-tips=todayspicks],[data-mdp-tips=matchpreviews]) #tips .tps:not([data-part=matchpreviews]){display:none!important}
html body:not(.nba) #tips{overflow:visible!important}
html body .sportbar .sbin>.sbtabs,html body .sportbar .sbin>.mdacct,html body .sportbar .sbin>#hamb{display:none!important}
/* the sheet sizes the shut search 34 px with !important on phones: back to the bar's 40 px and an 18 px icon */
html body #hsearch .hs:not(.open) .hsbar{width:32px!important;height:32px!important}
html body #hsearch .hsbar>svg{width:16px!important;height:16px!important}
/* open, the field stays in the bar row (the sheet used to drop it under the header at the far left on phones) */
html body #hsearch .hs.open .hsbar{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0!important;max-width:none!important}
/* smaller buttons (Jason 29/10/2026: they took too much of the bar): 32 px with 16 px icons, the 44 px hit area kept by the ring round each */
:is(.mdcal,.mdmyb)::before{content:"";position:absolute;inset:-6px}
html body #hsearch .hs.open .hsbar{height:36px}
/* the search box (Jason 29/10/2026 evening): its own close button at the top right, and the box right under the field */
html body #hsearch .hspanel .hsx2{position:sticky;top:0;z-index:2;display:grid;place-items:center;width:32px;height:32px;margin:0 0 4px auto;padding:0;border:0;border-radius:50%;background:var(--sb-line);color:var(--sb-text);font-size:14px;cursor:pointer}
html body #hsearch .hs.open .hspanel{top:var(--hsPanel,calc(var(--hsTop,60px) - 2px))}
/* the Tips tabs: the fourth was off the edge of a phone; Playbook sits centred on its own row, in gold */
/* the Tips tabs in one row (Jason 30/10/2026); Playbook in gold: an outline and gold text, solid bright gold when open */
.mdsubw[data-tab=tips] .mdsub{flex-wrap:nowrap;justify-content:center!important;gap:5px}
.mdsubw[data-tab=tips] .mdsub button{padding:7px 10px}
.mdsubw[data-tab=tips] .mdsub button[data-part=playbook]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sb-gold,#F59E0B);color:var(--sb-gold,#F59E0B)}
.mdsubw[data-tab=tips] .mdsub button[data-part=playbook].on{background:var(--sb-gold,#F59E0B);box-shadow:none;color:#1A1B1E}
html[data-theme=light] .mdsubw[data-tab=tips] .mdsub button[data-part=playbook]{box-shadow:inset 0 0 0 1.5px #B88A00;color:#8A6400}
html[data-theme=light] .mdsubw[data-tab=tips] .mdsub button[data-part=playbook].on{background:var(--sb-gold,#F59E0B);color:#1A1B1E}
/* no blue flash on a tap anywhere (Jason 30/10/2026); keyboard focus keeps its outline */
html{-webkit-tap-highlight-color:transparent}
/* League Tables (Jason 30/10/2026): the league picker as small shield badges, the picked one on an orange tile, no outlines */
/* every badge on screen, no swiping (Jason 30/10/2026): a grid that wraps */
.lgpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:2px;margin:4px 0 8px;padding:0}
.lgpick::-webkit-scrollbar{display:none}
.lgbd{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 1px;border:0;border-radius:10px;background:none;color:var(--sb-muted);cursor:pointer;font:600 10px/1.15 Roboto,system-ui,sans-serif;text-align:center}
.lgbd span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;font-size:9.5px}
.lgbd .lgsh{flex:none;display:block}
.lgbd[aria-selected=true]{background:var(--sb-accent-fill);color:var(--sb-on-accent)}
.lgbd:focus-visible{outline:2px solid var(--sb-focus);outline-offset:-2px}
@media (min-width:900px){.lgpick{grid-template-columns:repeat(14,minmax(0,1fr))}}
/* the match's two teams in the table: a flat tint, no outline or side bar (Jason 30/10/2026) */
html body .ladders .lr.mhl{box-shadow:none!important;outline:0!important;border:0!important;background:color-mix(in srgb,var(--sb-accent) 18%,transparent)!important;border-radius:6px}
/* the league table as the match page's Table (.pgtab in matches.css) with each team's last five (Jason 30/10/2026) */
.ladders .lgtw{overflow-x:auto;margin:4px 0 8px;padding:6px;border-radius:8px;background:var(--pgcard)}
.ladders .lgt{color:var(--pgink)}
.ladders .lgt td.tl{gap:8px;min-width:0}
.ladders .lgt .tmlink{all:unset;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ladders .lgt .tmlink b{display:block;font-weight:600}.ladders .lgt .tmlink small{display:block;font-size:11px;color:var(--pgmut)}
.ladders .lgt .flag{flex:none;width:20px;height:20px;margin:0}.ladders .lgt .flag img{width:20px;height:20px}
.ladders .lgt td.l5{white-space:nowrap}.ladders .lgt .lf5{display:inline-flex;gap:2px;transform:scale(.85);transform-origin:right center}
.ladders .lgt tr.ltr.mhl td{background:color-mix(in srgb,var(--sb-accent) 18%,transparent);font-weight:700}
.ladders .lgt tr.ltr.mhl td:first-child{border-radius:6px 0 0 6px}.ladders .lgt tr.ltr.mhl td:last-child{border-radius:0 6px 6px 0}
/* a phone: every column, smaller (Jason 30/10/2026) */
@media (max-width:639.9px){html body .ladders table.lgt :is(td,th){font-size:10.5px;padding:5px 2px}html body .ladders table.lgt th{font-size:9.5px;letter-spacing:0}html body .ladders table.lgt td b{font-size:11px!important}.ladders .lgt td.tl{max-width:74px;gap:3px}.ladders .lgt .flag,.ladders .lgt .flag img{width:16px;height:16px}.ladders .lgtw{padding:4px 2px;margin:4px -14px 8px}.ladders .lgt .zn{margin-right:3px}.ladders .lgt .lf5{transform:none}.ladders .lgt .fs{width:auto;height:auto;display:inline-flex;gap:1px}.ladders .lgt .fs i{width:12px;height:12px;min-width:0;font-size:7.5px;line-height:12px;border-radius:2px;margin:0}.ladders .lgt td.tl{max-width:84px}}
/* the team pop-up (Jason 30/10/2026: it ran past the screen and the page moved under a finger): the visible height, no sideways movement, the page behind locked */
html body .mdl .mdlbox{max-height:calc(100dvh - 32px);overflow-x:hidden;overscroll-behavior:contain}
html:has(body.mdlon),body.mdlon{overflow:hidden}
.mdl{overscroll-behavior:contain;touch-action:pan-y}
/* older Tables rules make tables a grid and blow up bold numbers; the league table stays a plain table */
html body .ladders table.lgt{display:table!important;width:100%!important;table-layout:auto}
html body .ladders table.lgt thead{display:table-header-group!important}html body .ladders table.lgt tbody{display:table-row-group!important}
html body .ladders table.lgt :is(td,th){white-space:nowrap;font-size:13px;line-height:1.3}html body .ladders table.lgt th{font-size:11px}
html body .ladders table.lgt td b{font:700 13px var(--body)!important;color:var(--pgink)}
/* the table's view buttons (Overall, Home, Away, Form, Top scorers) as the Markets filter chips: the picked one orange */
html body .ladders .ladvw .ladtab{height:28px;padding:0 12px!important;border:0!important;border-radius:999px!important;background:var(--pgcard)!important;color:var(--pgmut)!important;box-shadow:none!important;font:600 12px var(--body)!important;letter-spacing:0!important;text-transform:none!important}
html body .ladders .ladvw .ladtab[aria-pressed=true]{background:var(--sb-accent-fill)!important;color:var(--sb-on-accent)!important}
/* the Tables page title, small and upright (Jason 30/10/2026), and the one league block under the badges */
html body .ladders .lgtitle{margin:2px 0 6px;font:700 16px var(--body)!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important;color:var(--pgink);text-shadow:none!important}
.ladders .lgsum{display:flex;flex-direction:column;gap:2px;margin:0 0 8px;padding:8px 10px;border-radius:8px;background:var(--pgcard);font:400 12px/1.35 var(--body);color:var(--pgmut)}
.ladders .lgsum b{font:700 14px var(--body);color:var(--pgink)}
/* the league picker: five and an All button in one row, all of them when open (Jason 30/10/2026) */
html body .ladders .lgpick{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.lgmore i{display:grid;place-items:center;width:30px;height:32px;border-radius:8px;background:var(--pgcard);color:var(--pgink);font-style:normal;font-size:14px}
/* More (Jason 30/10/2026): no title, only the close button; the name row small with a 16 px icon; Appearance compact */
html body #hambm .mdhm-hd{justify-content:flex-end;margin:-4px 0 0}
html body #hambm .mdhm-me{display:flex;align-items:center;gap:8px;padding:6px 2px}
html body #hambm .mdhm-me svg{width:16px;height:16px;flex:none}
html body #hambm .mdhm-me b{font:600 15px var(--body)}html body #hambm .mdhm-me small{margin-left:6px;font-size:12px}
html body #hambm .mdhm-theme{padding:6px 6px 6px 12px;font-size:13px;margin-top:4px}
html body :is(#hambm,#prof) .mdth-seg{padding:2px}
html body :is(#hambm,#prof) .mdth-seg .mdth-th{top:2px;bottom:2px;left:2px;width:calc(50% - 2px)}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth]{min-width:0;padding:4px 10px;gap:4px;font-size:12px}
html body :is(#hambm,#prof) .mdth-seg button[data-mdth] svg{width:13px;height:13px}
html body #hambm .mdacc{padding:6px 0 0;margin-top:4px;align-items:center}html body #hambm .mdacc>span{padding-top:0;font-size:12px}
html body #hambm .mdacc-sw{grid-template-columns:repeat(10,20px);gap:8px}
html body #hambm .mdacc button{width:20px;height:20px}
html body #hambm .mdacc button[aria-checked="true"]::after{left:7px;top:4px;width:4px;height:8px;border-width:0 2px 2px 0}
@media (max-width:380px){html body #hambm .mdacc-sw{grid-template-columns:repeat(5,20px)}}
/* More > App icon: the twelve looks, on dark tiles in dark mode and light tiles in light mode */
html body #hambm .mdhm-icon{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding:8px 10px 10px 12px;border-radius:12px;background:var(--sb-panel);font-size:13px;color:var(--sb-text)}
html body #hambm .mdhm-icon>span{font-weight:600}
html body #hambm .mdic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
html body #hambm .mdic button{all:unset;box-sizing:border-box;cursor:pointer;border-radius:12px;aspect-ratio:1;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
html body #hambm .mdic button svg{display:block;width:100%;height:auto;max-width:48px;box-shadow:0 0 0 1px var(--sb-line);border-radius:10px}
html body #hambm .mdic button[aria-pressed=true] svg{box-shadow:0 0 0 2.5px var(--sb-accent-fill)}
html body #hambm .mdic button:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
html body #hambm .mdhm-icon small{font-size:11.5px;line-height:1.35;color:var(--sb-muted)}
/* the alerts box (bell): the raised graphite card with its yellow kept (Jason 30/10/2026: the navy didn't sit with the theme) */
html body .mdal{background:var(--sb-panel2);border:0;color:var(--sb-text);box-shadow:0 16px 40px rgba(0,0,0,.45)}
html body .mdal :is(.mdal-x,.mdal-l,.mdal-s){color:var(--sb-muted)}
html body .mdal :is(.mdal-snd label,.mdal-seg){border-color:var(--sb-line)}
html body .mdal .mdal-p{background:var(--sb-panel)}html body .mdal .mdal-p:hover{background:var(--sb-line)}
html body .mdal .mdal-seg button{color:var(--sb-text)}html body .mdal .mdal-seg button.on{color:#1A1B1E}
/* the bell and the calendar open over the page as it is, no blur (Jason 1/11/2026; was blurred since 30/10) */
/* More (Jason 30/10/2026): no empty row for the X; it sits at the right of the name row, and the page starts at the top */
html body #hambm .mdhm-top{display:flex;align-items:center;gap:8px;margin:-4px 0 6px}
html body #hambm .mdhm-top .mdhm-me{flex:1;min-width:0;margin:0}
html body #hambm .mdhm-top .mdhm-x{flex:none;width:34px;height:34px}
html body #hambm .mdhm-nm{flex:1;display:flex;gap:6px;min-width:0}
html body #hambm .mdhm-nm[hidden]{display:none}
html body #hambm .mdhm-nm input{flex:1;min-width:0;height:36px;padding:0 10px;border:0;border-radius:10px;background:var(--sb-panel2);color:var(--sb-text);font:500 16px var(--body,Roboto,system-ui,sans-serif)}
html body #hambm .mdhm-nm input:focus{outline:2px solid var(--sb-accent-fill);outline-offset:0}
html body #hambm .mdhm-nm button{height:36px;padding:0 14px;border:0;border-radius:10px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font:700 13px var(--body,Roboto,system-ui,sans-serif);cursor:pointer}
/* the page's profile panel stays out of sight while a name saves from More */
body.mdpfq #prof .pfpanel{display:none!important}
/* App icon inside the Appearance box, under the accent colours */
html body #hambm .mdhm-theme .mdacc{order:2}
html body #hambm .mdhm-theme .mdhm-icon{order:3;flex:1 0 100%;margin:6px 0 0;padding:8px 0 2px;border-radius:0;background:none;font-size:12px;color:var(--sb-muted)}
html body #hambm .mdhm-theme .mdhm-icon>span{font-weight:500}
/* a short note at the bottom (a call made) */
.mdtoast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:900;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:12px;background:var(--sb-text);color:var(--sb-bg);font:600 13px/1.3 var(--body,Roboto,system-ui,sans-serif);box-shadow:0 8px 24px rgba(0,0,0,.35)}
/* My bets: no outer box round the section (an older rule draws one) */
html body #soccerview #sb.bt{border:0!important;outline:0!important;box-shadow:none!important;background:none!important}
/* Bet icon sits close under the accent colours, and the accent row loses its divider line */
html body #hambm .mdhm-theme .mdacc{border-top:0;padding-bottom:0}
html body #hambm .mdhm-theme .mdhm-icon{margin-top:0;padding-top:2px}
/* the call note is a button now */
.mdtoast{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;cursor:pointer;text-align:center}
.mdtoast b{font-size:12px;color:var(--sb-accent)}
/* My bets: the empty state without its old dashed outline; the title and + New bet on one line */
html body #soccerview #sb .sbnone{border:0!important;outline:0!important}
html body #soccerview #sb .bth h2{flex:1 1 auto!important;width:auto!important;min-width:0}
html body #soccerview #sb .bth .sbgo{margin-left:auto!important}
/* the My bets card: its small labels white like the figures, no outline round the tiles inside it */
html body #soccerview #sb .btk span{color:rgba(255,255,255,.85)!important}
html body #soccerview #sb .btk>div{border:0!important;outline:0!important;box-shadow:none!important}
/* Jason 30/10/2026: the ShrimpPicks logo keeps its own colours whatever the accent (orange and white in dark,
   orange and Shrimpy's light belly orange in light) */
html body .mdwm b{color:#FF6B2C!important} /* "shrimp", the logo's orange; "bet" is the bar's text colour */

/* the name in More: no button box */
html[data-theme] body #hambm .mdhm-me{border:0!important;background:none!important;box-shadow:none!important}
/* the Light / Dark pill, the switches: the accent itself in both themes */
html body :is(#hambm,#prof) .mdth-seg .mdth-th,:root[data-theme=light] body :is(#hambm,#prof) .mdth-seg .mdth-th{background:var(--sb-accent-fill);box-shadow:none}
html body #hambm .mdcz-tg[aria-checked=true] .mdcz-sw{background:var(--sb-accent-fill)!important}
/* the section names in More stay readable on white whichever accent is on */
:root[data-theme=light] body #hambm .mdhm-gt{color:#5E6168}
/* Jason 30/10/2026: the top bar and the bottom bar stay orange whatever the accent (only the Bet tab's Shrimpy changes look) */
html body :is(.sportbar,.mdtabs){--sb-accent:#FF7A3D!important;--sb-accent-fill:#FF7A3D!important;--pgred:#FF7A3D!important}
html body .mdtabs button.on,:root[data-theme=light] body .mdtabs button.on{color:#FF7A3D!important}
:root[data-theme=light] body .mdtabs button.on::before{background:#FF7A3D!important}
/* More: the Feedback links without an underline */
html body #hambm a.mdhm-it,html body #hambm a.mdhm-it *{text-decoration:none!important}
/* the Grey Bet icon in light mode: darker greys, so it shows on the white bar like the other tab icons (Jason 30/10/2026) */
html[data-theme=light] .shr-grey [fill="#9AA0A8"]{fill:#5E6168}
html[data-theme=light] .shr-grey [stroke="#9AA0A8"]{stroke:#5E6168}
html[data-theme=light] .shr-grey [fill="#E6E7EA"]{fill:#9AA0A8}
html[data-theme=light] .shr-grey path[fill="#FFFFFF"]{fill:#D4D7DC}
/* desktop (Jason 30/10/2026 "stuck in the NBA"): the open sport picker sat under the side rail (z 95), so the bar lifts above it while open */
html body .sportbar:has(.mdsp:not([hidden])){z-index:130}
/* games you've bet on have their own colour (Jason 30/10/2026): a warm tint over the card */
html body:not(.nba) #livebox .lvc.mybet{background-image:linear-gradient(rgba(255,122,61,.16),rgba(255,122,61,.16))!important}
/* no line above the picked bottom-bar tab in light mode (Jason 30/10/2026: no lines on any buttons); it stays orange */
:root[data-theme=light] body .mdtabs button.on::before{display:none!important}
/* ---- Bet slip (Jason 30/10/2026, colours 31/10/2026: "green and red buttons, red to cancel"), phone and desktop: a graphite
   card and a lighter graphite inside it, green for what's picked, the returns and the main button, red to clear or cancel.
   No lines. The game's two badges head each game. ---- */
/* Jason 1/11/2026: the slip is now white like a placed bet's ticket (My Bets in the header): ink and pick names as the ticket,
   a pale footer with the stake, odds and returns, black where it was orange. The two slips differ only in their green:
   the Ladder slip white with a green outline and green text, My Bets the ticket's solid green. */
html body #slip{background:#fff!important;color:#1c2b22!important;border:0!important;border-radius:14px!important;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.55)!important}
html body #slip :is(.slbar,.slkind,.slmode,.slbody,.slg,.slleg,.slsum,.slstk,.slday,.slbtns){background:transparent!important;color:#1c2b22!important;border-color:transparent!important}
html body #slip :is(.slt b,.slo,.slgh b,.slgh em,.slsum b,.slsum span b,.slleg em){color:#1c2b22!important}
html body #slip :is(.slt small,.slch,.slx,.slnote,.slsum>span,.slstk label,.slstk label span,.slret small,.slday span,small,.slfind){color:#6b7c72!important}
html body #slip .slleg .sls b{color:#0f7b4a!important;font-weight:800}
html body #slip .slleg .sls small{color:#1c2b22!important;font-weight:600}
html body #slip .slleg em{font-family:var(--mono,ui-monospace,monospace)}
html body #slip .slret,html body #slip .btin em{color:#1c2b22!important}
html body #slip .slret b{color:#0f7b4a!important}
html body #slip .slg{border-radius:0!important;border-bottom:1px solid #e3ece6!important}
html body #slip .slg:last-child{border-bottom:0!important}
html body #slip :is(.sgt,.sgmt){background:transparent!important;color:var(--sb-win,#22C55E)!important}
html body #slip .slsp.slcr{display:inline-flex;align-items:center;gap:3px}html body #slip .slsp.slcr :is(.fe,svg,img){width:18px;height:18px;margin:0}
html body #slip .slfoot{background:#f6faf7!important;border-top:1px solid #e3ece6!important;color:#1c2b22!important}
html body #slip :is(.btghost,.btin,.btq button,input){background:#fff!important;color:#1c2b22!important;border:1px solid #d6e4da!important}
html body #slip .btq button{background:#eef3ef!important;border-color:transparent!important}
html body #slip :is(.btgo,.btgo.sbgo,.slbtns .btgo){background:var(--sb-win,#22C55E)!important;color:#fff!important;border:0!important}
html body #slip :is(.btgo,.btgo.sbgo) small{color:rgba(255,255,255,.8)!important}
html body #slip button.btghost[data-sl=clear]{background:#D9363E!important;color:#fff!important;border:0!important}
html body #slip .slct{background:var(--sb-win,#22C55E)!important;color:#fff!important}
/* the two slips: the Ladder slip white with a green outline and green text, My Bets the ticket's solid green; the one in use
   full strength with a tick, the other faded */
html body #slip .slkind>button{border-radius:10px!important;opacity:.55}
html body #slip .slkind>button[aria-selected=true]{opacity:1}
html body #slip .slkind>button[data-slk="5050"]{background:#fff!important;color:var(--sb-win,#22C55E)!important;border:2px solid var(--sb-win,#22C55E)!important}
html body #slip .slkind>button[data-slk="side"]{background:var(--sb-win,#22C55E)!important;color:#fff!important;border:2px solid var(--sb-win,#22C55E)!important}
html body #slip .slkind>button[data-slk="5050"] small{color:var(--sb-win,#22C55E)!important;opacity:.85}
html body #slip .slkind>button[data-slk="side"] small{color:#fff!important;opacity:.85}
html body #slip .slkind>button[aria-selected=true]::before{content:"✓ "}
html body #slip .slmode>button{background:#fff!important;color:#1c2b22!important;border:1px solid #d6e4da!important}
html body #slip .slmode>button[aria-selected=true]{background:#e8f3ec!important;color:var(--sb-win,#22C55E)!important;border-color:var(--sb-win,#22C55E)!important}
html body #slip .slmode>button small{color:#6b7c72!important}
/* the bar along the top says which slip: My Bets in its green, the Ladder slip white with green text */
html body #slip.side .slbar{background:var(--sb-win,#22C55E)!important}
html body #slip.side .slbar :is(b,.slo,small,.slch){color:#fff!important}
html body #slip.side .slbar .slct{background:#fff!important;color:var(--sb-win,#22C55E)!important}
html body #slip:not(.side) .slbar{background:#fff!important;box-shadow:inset 0 -2px 0 var(--sb-win,#22C55E)}
html body #slip:not(.side) .slbar :is(b,.slo){color:var(--sb-win,#22C55E)!important}
html body #slip.side .slsidex{color:#fff!important}
/* My Bets: a pick turns green or red as its result comes in; the slip's own small Won / Lost / Clear (Jason 1/11/2026) */
html body .mbpanel .mbres{display:flex;justify-content:flex-end;gap:5px;padding:6px 10px 8px;background:#f6faf7}
html body .mbpanel .mbres button{height:20px;padding:0 9px;border:0;border-radius:999px;font:700 10px Roboto,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;color:#fff}
html body .mbpanel .mbres .won{background:var(--sb-win,#22C55E)}html body .mbpanel .mbres .lost{background:#dc2626}html body .mbpanel .mbres :is(.clear,.void){background:#e3ece6;color:#1c2b22}
html body .mbpanel .mbres button:focus-visible{outline:2px solid var(--sb-win,#22C55E);outline-offset:2px}
html body .mbpanel .svp.won{background:#ecfdf3;border-radius:8px}html body .mbpanel .svp.lost{background:#fef2f2;border-radius:8px}
html body .mbpanel .svp.won .svpt b{color:#15803d}html body .mbpanel .svp.lost .svpt b{color:#b91c1c}
html body #askbox .askin{background:#303338!important;border:0!important;box-shadow:0 12px 30px rgba(0,0,0,.5)!important;color:#F0F0F2!important}
html body #askbox .tbtn{background:#D9363E!important;border:0!important;color:#fff!important}
html body #askbox .askyes{background:#22A355!important;color:#fff!important}
/* a clear or delete question: the button that wipes red, Cancel green (Jason 1/11/2026) */
html body #askbox .askyes.danger{background:#D9363E!important}
html body #askbox .askin:has(.danger) .tbtn[data-ask=no]{background:#22A355!important}
/* league tables: each club badge sits whole and centred in its box (Jason 31/10/2026: they were cut off at the bottom and sat left) */
html body .flag.lgo{display:inline-grid!important;place-items:center;box-sizing:border-box!important}
html body .flag.lgo>img.tlg{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;margin:0!important}
/* Back to the page you came from (Jason 31/10/2026, runtime/swipe.ts): bottom right (his second ask), above the bar on phones, inside the page column on wide screens; a filled pill, no outline */
#mdback{position:fixed;z-index:96;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px 0 10px;border:0;border-radius:999px;background:var(--sb-panel);color:var(--sb-text);font:600 14px Roboto,system-ui,sans-serif;box-shadow:0 6px 22px rgba(0,0,0,.4);cursor:pointer;-webkit-tap-highlight-color:transparent}
#mdback[hidden]{display:none}
#mdback svg{flex:none;color:var(--sb-accent)}
#mdback:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
:root[data-theme=light] #mdback{background:#fff;color:#1A1B1E;box-shadow:0 6px 18px rgba(0,0,0,.14)}
@media (min-width:1024px){#mdback{right:max(16px,calc((100vw - var(--dw,1240px)) / 2 + 16px))}}
/* an open match preview's orange close button sits bottom right too: the Back button goes up above it */
body:has(details.pv[open] .pvup) #mdback{transform:translateY(-52px)}

/* My Bets from the header's slip icon (Jason 1/11/2026): the panel on the site's look, no outlines, and one slip at a time
   with 1/3 and arrows at the top right */
html body .mbpanel{background:var(--sb-panel);border:0;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:12px}
html body .mbh b{font:700 15px Roboto,system-ui,sans-serif;font-style:normal;text-transform:none;color:var(--sb-text)}
html body .mbh>span{color:var(--sb-muted)}
html body .mbx{display:grid;place-items:center;background:var(--sb-panel2);color:var(--sb-text)}
html body .mbnav{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 13px Roboto,system-ui,sans-serif;color:var(--sb-text);font-variant-numeric:tabular-nums}
html body .mbnav+.mbx{margin-left:0}
html body .mbnav button{all:unset;box-sizing:border-box;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sb-panel2);color:var(--sb-text);font-size:20px;line-height:1;cursor:pointer}
html body .mbnav button:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
html body .mbpanel .svcard{border:0}

/* the game search (Jason 1/11/2026: "keep the yellow, but change the background colour to something nicer"): graphite like
   the rest of the site, no outlines, the prices still yellow; a button that clears what you typed; and which slip a
   tapped price goes to, the Ladder slip in orange or My Bets in emerald */
/* navy, so the search stands apart from the graphite page (Jason 1/11/2026: "it looks almost the same as the main page") */
html body #hsearch .hspanel{background:var(--sb-panel,#232529)!important;border:0!important;box-shadow:0 18px 44px rgba(0,0,0,.55)!important}
html body #hsearch .hspanel :is(.btsl button,.btgl>button,.btsr button,.btcomp){background:var(--sb-panel2,#2C2E33)!important;border-color:transparent!important;color:#F0F0F2}
html body #hsearch .hspanel :is(.btsl button,.btgl>button,.btsr button,.btcomp):hover{background:#2A3854!important}
html body #hsearch .hspanel .btgl .btln{display:grid;place-items:center;border-radius:8px;background:#0E1420!important;color:#F0F0F2!important;font-weight:700}
html body #hsearch .hspanel .btsl button b,html body #hsearch .hspanel .btgl>button b{color:var(--sb-gold,#F59E0B)}
html body #hsearch .hsclr{all:unset;box-sizing:border-box;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--sb-muted);cursor:pointer}
html body #hsearch .hsclr[hidden]{display:none}
/* above the bar's bigger tap area (.hsbar::before), which took every tap on them (Jason 1/11/2026: the clear button did nothing) */
html body #hsearch .hsbar>:is(.hsclr,.hsx){position:relative;z-index:1}
html body #hsearch .hsclr:hover{color:var(--sb-text)}
html body #hsearch .hsclr:focus-visible{outline:2px solid var(--sb-focus);outline-offset:1px}
html body #hsearch .hs:not(.open) .hsclr{display:none}
/* Add to: a bar pinned right across the top of the box, nothing showing above or beside it, the X at its end (Jason 1/11/2026) */
html body #hsearch .hspanel{padding:0 12px 12px}
html body #hsearch .hsdest{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;box-sizing:border-box;min-height:48px;margin:0 -12px 10px;padding:8px 54px 8px 12px;background:var(--sb-panel,#232529)}
html body #hsearch .hspanel .hsx2{top:8px;z-index:3;margin:8px 8px -40px auto}
@media (max-width:520px){html body #hsearch .hspanel{padding:0 10px 10px}html body #hsearch .hsdest{margin:0 -10px 10px;padding-left:10px}}
html body #hsearch .hsdest>span{font:700 11px Roboto,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-muted)}
html body #hsearch .hsdest button{all:unset;box-sizing:border-box;padding:7px 14px;border-radius:999px;background:var(--sb-panel2,#2C2E33);color:var(--sb-text);font:600 13px Roboto,system-ui,sans-serif;cursor:pointer}
html body #hsearch .hsdest button:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
html body #hsearch .hsdest button[data-hsdest="5050"][aria-pressed=true]{background:#fff;color:var(--sb-win,#22C55E);box-shadow:inset 0 0 0 1px var(--sb-win,#22C55E)}
html body #hsearch .hsdest button[data-hsdest="side"]{box-shadow:inset 0 0 0 1px #fff}
html body #hsearch .hsdest button[data-hsdest="side"][aria-pressed=true]{background:#0F3D2E;color:#F0F0F2}
html[data-theme=light] body:not(#zz) #hsearch .hsdest button[data-hsdest="side"][aria-pressed=true]{background:#0F3D2E!important;color:#F0F0F2!important}
html[data-theme=light] body:not(#zz) #hsearch .hspanel .btsl button b,html[data-theme=light] body:not(#zz) #hsearch .hspanel .btgl>button b{color:#9A6B00!important}
html body #slip .slfind{margin:4px 0 10px;font-size:13px;color:#5f6368}
/* the empty My Bets slip's close button, at the right of its bar beside the arrow */
html body #slip .slsidex{position:absolute;top:12px;right:40px;z-index:1}
html body #hsearch .hspanel .hsx2{background:var(--sb-panel2,#2C2E33)!important;color:#F0F0F2!important}
html body #hsearch .hspanel :is(.btsrh,.btsg h6,small){color:#9AA6BC}
/* a picked price lights in the colours of the slip it went to (Jason 1/11/2026: "it didn't highlight my select"): the Ladder
   slip white with a green outline and green text, My Bets solid green */
html body #hsearch .hspanel :is(.btsl button,.btgl>button,.btsr button).on{background:#fff!important;color:var(--sb-win,#22C55E)!important;box-shadow:inset 0 0 0 2px var(--sb-win,#22C55E)}
html body #hsearch .hspanel :is(.btsl button,.btgl>button,.btsr button).on :is(b,span,small){color:var(--sb-win,#22C55E)!important}
html body #hsearch .hs.hsside .hspanel :is(.btsl button,.btgl>button,.btsr button).on{background:var(--sb-win,#22C55E)!important;color:#fff!important;box-shadow:inset 0 0 0 2px var(--sb-win,#22C55E)}
html body #hsearch .hs.hsside .hspanel :is(.btsl button,.btgl>button,.btsr button).on :is(b,span,small){color:#fff!important}
html body #hsearch .hspanel .btcomp:is(.on,[aria-pressed=true],[aria-selected=true]){background:#2A3854!important;box-shadow:inset 0 0 0 2px var(--sb-gold,#F59E0B)}
/* a placed bet open: the slip icon underlined in emerald (Jason 1/11/2026); the tiles' own #0F3D2E vanished on the dark bar, so a brighter shade of it */
html body .mdmyb.has::after{content:"";position:absolute;left:7px;right:7px;bottom:-6px;height:3px;border-radius:2px;background:#2BA36E}
html[data-theme=light] body:not(#zz) .mdmyb.has::after{background:#1F8A5B}
/* the search's Pick a game box (games for a placed bet): plain, a step lighter than the search, no gold wash (it shared the
   Playbook card's class, .pb, and took its gradient; Jason 1/11/2026: "keep it simple but easy to tell apart") */
html body #hsearch .hsadd .pb{background:#1B2537!important;border:0!important;border-radius:12px;padding:12px;color:#F0F0F2}
html body #hsearch .hsadd .pbgh{color:#9AA6BC}
html body #hsearch .hsadd .pbgm{background:#243049!important;border:0!important;color:#F0F0F2}
html body #hsearch .hsadd .pbgm small{color:#9AA6BC}
html body #hsearch .hsadd .pbgm:hover{background:#2C3A57!important}
html body #hsearch .hsadd .pbgm.on{background:#2C3A57!important;box-shadow:inset 0 0 0 2px var(--sb-gold,#F59E0B)}
/* the league chips carry their league's shield, as on the tables (lib/tables/badge.ts) */
html body #hsearch .btcomp .lgsh{flex:none;display:block}
/* the search's Markets: a picked price in its slip's colours too, as the rest of the search */
html body:not(#zz) #hsearch .hsmk .mp.on{background:#fff!important;color:var(--sb-win,#22C55E)!important;box-shadow:inset 0 0 0 2px var(--sb-win,#22C55E)!important}
html body:not(#zz) #hsearch .hs.hsside .hsmk .mp.on{background:var(--sb-win,#22C55E)!important;color:#fff!important;box-shadow:none!important}
/* the markets box is the match page's, whose own three-column grid squeezed the markets into its first column */
html body #hsearch .detail.hsmkd{display:block!important;min-width:0!important;width:auto!important;padding:0!important;margin:0!important}
html body #hsearch .hsmk .mkbar:empty{display:none}
/* a game's markets on desktop: a wider box, two columns, the market tabs across the top (Jason 1/11/2026) */
@media(min-width:761px){html body #hsearch .hs.open .hspanel:has(.hsmk){width:min(960px,calc(100vw - 24px))}html body #hsearch .hsmk .mkcols{display:block;columns:2;column-gap:10px}html body #hsearch .hsmk .mkcols.one{columns:1}html body #hsearch .hsmk .mkcols>.mg{break-inside:avoid;margin-bottom:10px}}

/* phone design shared with desktop: generated by scripts/desktop-css.mjs */
@media (min-width:641px) {
  .mdtabs{display:flex;position:fixed;z-index:95;left:0;right:0;bottom:0;padding:0 2px calc(6px + env(safe-area-inset-bottom,0px));background:var(--sb-bg)}
  .mdtabs button{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:5px 0 4px;border:0;background:none;color:var(--sb-muted);font:500 10px Roboto,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mdtabs button.on{color:var(--sb-accent)}
  body.mxfoc .mdtabs{display:none}
  body.mxfoc .mxblr:not(.mdgoal):not(.mdal){display:none!important}
  body.mxfoc #list>.row.mxsel{margin-top:6px}
  body.mxfoc #list>.detail.mxsel{margin-bottom:60px}
  body.nba .mdtabs{display:none}
  .sportbar .sbin{flex-wrap:nowrap!important;gap:6px!important;min-height:56px;padding:0 8px!important}
  .sbin>#hamb,.sbin>.sbtabs,.sbin>.mdacct{display:none!important}
  .sbin>#mybets{flex:0 0 0!important;width:0!important;min-width:0!important;margin:0!important;padding:0!important}
  .sbin>#mybets .mbbtn{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
  .mdlive{display:inline-flex;order:1;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:var(--sb-text,#F0F0F2);font:600 13px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mdlive i{width:8px;height:8px;border-radius:50%;background:var(--sb-muted,#A3A7AE)}
  .mdlive.on{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 14%,transparent);color:#fff}
  .mdlive.on i{background:var(--sb-accent,#FF7A2E);animation:mdpulse 1.6s ease-in-out infinite}
  .mdlive b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sb-accent,#FF7A2E);color:#0b1440;font-size:11px;line-height:18px;text-align:center}
  .sbin>#hsearch{order:2!important;margin:0!important}
  .sbin>.mdbell{order:3!important}
  .sbin>.mdacct{order:4!important}
  body.nba .mdlive{visibility:hidden}
  #hambm .mdhm-list{display:flex;flex-direction:column;gap:10px}
  #hambm .mdhm-gt{margin:0 2px 4px;font:700 10.5px Roboto,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-accent)}
  #hambm .mdhm-g{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden}
  #hambm :is(button,a).mdhm-it{display:flex!important;justify-content:space-between!important;min-height:44px;padding:0 14px!important;border-radius:0!important;border:0!important;background:rgba(255,255,255,.05)!important;color:var(--sb-text,#F0F0F2)!important;font:600 14px "IBM Plex Sans",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-align:left!important;box-shadow:none!important}
  #hambm :is(button,a).mdhm-it span{color:var(--sb-muted,#A3A7AE);font-size:18px}
  #hambm :is(button,a).mdhm-it:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 12%,transparent)!important}
  #hambm .hmx{border-top:1px solid rgba(255,255,255,.1)!important}
  #hambm .hmx button{border:0!important;background:rgba(255,255,255,.05)!important;color:var(--sb-text,#F0F0F2)!important;font:600 12.5px "IBM Plex Sans",system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important}
  #hambm{top:var(--mdtop,54px)!important;bottom:var(--mdbot,60px)!important;left:0!important;right:0!important;max-height:none!important;border-radius:0!important;border:0!important;box-shadow:none!important;padding:14px 16px 20px!important;background:var(--sb-bg)!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.nba #hambm{bottom:auto!important;top:calc(var(--sbh,60px) + 6px)!important}
  body.nba .sbin>#hamb{display:inline-flex!important}

  #hambm .mdhm{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
  #hambm .mdhm button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #hambm .hmx{display:none!important}
  .sbin>#prof{display:block!important;position:absolute;width:0;height:0;overflow:visible}
  .sbin>#prof>.pfbtn{display:none!important}
  #prof .pfpanel{position:fixed!important;left:0!important;right:0!important;top:var(--mdtop,54px)!important;bottom:auto!important;height:calc(100dvh - var(--mdtop,54px) - var(--mdbot,60px))!important;width:auto!important;max-height:none!important;overflow-y:auto;z-index:650!important;transform:none!important;border-radius:0!important;margin:0!important;background:var(--sb-bg)!important;border:0!important;box-shadow:none!important;padding:14px 16px 24px!important}
  body:is(.hambon,.mdpfm) .mdtabs button.on{color:var(--sb-muted);background:none!important}
  body:is(.hambon,.mdpfm) .mdtabs button[data-more]{color:var(--sb-accent)}
  #hambm .mdhm-hd{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 10px}
  #hambm .mdhm-hd b{font:700 18px "IBM Plex Sans",system-ui,sans-serif;color:#fff}
  #hambm .mdhm button.mdhm-x{display:grid!important;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--sb-text,#F0F0F2)}
  #hambm .mdhm button.mdhm-x:active{background:color-mix(in srgb,var(--sb-accent,#FF7A2E) 20%,transparent)}
  #hambm .mdhm button.mdhm-out{display:flex!important;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:9px!important;border-radius:12px;background:rgba(255,255,255,.04);color:var(--sb-muted,#A3A7AE);font:600 12px "IBM Plex Sans",system-ui,sans-serif}
  #hambm .mdhn{position:absolute;top:4px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--sb-accent,#FF7A2E);color:#0b1440;font-size:10px;line-height:16px}
  html[data-mdtab="home"] #soccerview>[data-mdt]:not([data-mdt~="home"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="matches"] #soccerview>[data-mdt]:not([data-mdt~="matches"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="tips"] #soccerview>[data-mdt]:not([data-mdt~="tips"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="bets"] #soccerview>[data-mdt]:not([data-mdt~="bets"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="tables"] #soccerview>[data-mdt]:not([data-mdt~="tables"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="hub"] #soccerview>[data-mdt]:not([data-mdt~="hub"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="call"] #soccerview>[data-mdt]:not([data-mdt~="call"]):not([data-mdt="all"]){display:none!important}
  html[data-mdtab="tips"] #tips .tcol-lad,html[data-mdtab="tips"] #tips .tcol-side,html[data-mdtab="tips"] #tips .ladders{display:none!important}
  html[data-mdtab="bets"] #tips>:not(.tipgrid):not(.rcpt),html[data-mdtab="bets"] #tips .tipgrid>:not(.tcol-lad):not(.tcol-side){display:none!important}
  html[data-mdtab="tables"] #tips>:not(.ladders){display:none!important}
  #filters{flex-wrap:nowrap!important;overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:none;justify-content:flex-start!important;padding:4px 0!important;gap:6px!important;scroll-behavior:smooth}
  #filters::-webkit-scrollbar{display:none}
  #filters>*{flex:none!important}
  #filters .chip{padding:4px 10px!important;font-size:12px!important;border-radius:8px}
  #filters .chip small{font-size:10px}
  .mdscr{position:relative;flex:1 1 100%;min-width:0;max-width:100%}
  .mdscr>button{position:absolute;top:50%;z-index:3;width:28px;height:28px;margin-top:-14px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:color-mix(in srgb,var(--sb-bg,#1A1B1E) 92%,transparent);color:#fff;font:700 16px/1 system-ui,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mdscr>button[hidden]{display:none}
  .mdscr>.l{left:-2px}
  .mdscr>.r{right:-2px}
  html.mdm{--mdpanel:var(--sb-panel);--mdline:var(--sb-line)}
  html.mdm body:not(.nba) #tips{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
  html.mdm body:not(.nba) #tips .tcard.ladder{border:0!important;box-shadow:none!important}
  html.mdm body:not(.nba) :is(#tips .tcard:not(.ladder),.ladders){--tline:var(--mdline);--glow:none}
  html.mdm .mdsubw{display:block;position:sticky;top:calc(var(--mdtop,54px) + var(--mdup,0px));z-index:20;margin:0 -8px 2px;padding:6px 8px;background:var(--sb-bg);border-bottom:0}
  .mdsub{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;justify-content:safe center}
  .mdsub::-webkit-scrollbar{display:none}
  .mdsub button{flex:none;padding:7px 12px;border:0;border-radius:8px;background:var(--mdpanel);color:var(--sb-text,#F0F0F2);font:600 13px "IBM Plex Sans",system-ui,sans-serif;cursor:pointer}
  .mdsub button.on{background:var(--sb-accent-fill);border-color:var(--sb-accent-fill);color:var(--sb-on-accent)}
  body.nba #nbaview{bottom:calc(62px + env(safe-area-inset-bottom,0px))}#mdup{padding-top:6px;padding-bottom:6px}#mdup .mdupc{flex-basis:132px;padding:5px 8px;gap:2px;border-radius:10px}#mdup .mdupr{padding-bottom:0}#mdup small{display:none}#mdup .mdupt{font-size:12px}#mdup .mdupt .lvlg,#mdup .mdupt .lvlg svg{width:15px;height:15px}html body #soccerview.wrap{padding-top:0!important;padding-block-start:0!important}
  html body #mdup{position:relative!important;top:auto!important}
  html:is([data-mdtab=home],[data-mdtab=matches]) body #soccerview.wrap{row-gap:8px!important}
  html[data-czl=none] .mdtabs button span,html[data-czl=on] .mdtabs button:not(.on) span{display:none!important}
  html[data-czl=none] .mdtabs button,html[data-czl=on] .mdtabs button{justify-content:center}
  html.mdov #mdov:not([hidden]){display:flex;align-items:center;gap:10px;position:fixed;z-index:94;left:0;right:0;top:var(--mdtop,54px);height:48px;padding:0 8px 0 16px;background:var(--sb-bg);border-bottom:0;color:var(--sb-text,#F0F0F2);box-shadow:0 6px 14px rgba(0,0,0,.35)}
  #mdov .mdov-ic{display:grid;place-items:center;color:var(--sb-accent,#FF7A2E)}
  #mdov b{flex:1;font:700 17px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:0}
  #mdov button{all:unset;display:grid!important;place-items:center;width:38px;height:38px;border-radius:50%!important;background:rgba(255,255,255,.07)!important;color:var(--sb-text,#F0F0F2)!important;cursor:pointer}
  #mdov button:active{background:rgba(255,255,255,.16)!important}
  html.mdov body:not(.nba) #soccerview{padding-top:48px!important}
  html.mdov body:not(.nba) #mdup{display:none!important}
  html.mdov body:not(.nba) .mdsubw{top:calc(var(--mdtop,54px) + 48px)!important}
  html.mdov body.nba #nbaview{top:calc(var(--sbh,49px) + 48px)!important}
  html.mdov .mdtabs button[data-k]{opacity:.75}
  .mdtabs button{flex-direction:row;gap:6px;min-height:44px;padding:3px 0}
  .mdtabs button span{font-size:11px}
  .sportbar .sbin{min-height:48px}html body .sportbar .sbin:has(#hsearch .hs.open)>:is(.mdsw,.mdball,.mdwm,.mdbell,.mdcal,.mdmyb){display:none!important}html body .sportbar .sbin:has(#hsearch .hs.open)>#hsearch{flex:1 1 auto!important;min-width:0}
}
/*
 * Desktop layout "A" (Jason 12 Oct): the phone's bottom bar becomes a left sidebar and the page
 * shows one section at a time across the rest of the width. The header, More menu, jump rows
 * and switches come from the phone styles (see scripts/desktop-css.mjs).
 */
@media (min-width:641px){
  /* the header spans the whole width: sports far left, search, alerts and you far right (Jason 12 Oct) */
  .sportbar .sbin{max-width:none!important;padding:0 20px!important}
  /* desktop has the room: both sports named */
  #jump{display:none!important}
  .sportbar .sbin{padding:0 20px!important}
  .mdtabs{top:var(--mdtop,55px)!important;bottom:0!important;left:0!important;right:auto!important;width:var(--sbw)!important;height:auto!important;flex-direction:column!important;justify-content:flex-start!important;gap:2px!important;padding:14px 10px!important;border-top:0!important;border-right:0!important;background:var(--sb-bg)!important}
  .mdtabs button{flex:none!important;flex-direction:row!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;height:44px!important;padding:0 14px!important;border-radius:10px!important}
  .mdtabs button span{font-size:14px!important}
  .mdtabs button:hover{background:var(--sb-panel)!important}
  .mdtabs button.on{background:var(--sb-panel2)!important}
  .mdtabs button[data-more]{margin-top:auto!important}
  #soccerview.wrap{margin-left:var(--sbw)!important;max-width:none!important;padding:16px 28px 48px!important}
  html.mdm .mdsubw{top:calc(var(--mdtop,55px) + var(--mdup,0px));margin:0 0 4px;padding:8px 0}
  .mdsub{justify-content:flex-start!important}
  /* an opened match takes the page: no sidebar, so centre it */
  body.mxfoc #soccerview.wrap{margin-left:auto!important;margin-right:auto!important;max-width:1300px!important}
  /* the More menu fills the page beside the sidebar; the profile editor opens on the right */
  #hambm{position:fixed!important;z-index:400!important;left:var(--sbw)!important;padding:20px 28px!important}
  #hambm .mdhm,#hambm .mdhm-list{max-width:720px}
  #hambm button.mdhm-it{align-items:center!important}
  #prof .pfpanel{left:var(--sbw)!important;height:calc(100dvh - var(--mdtop,54px))!important}
  #prof .pfpanel>*{max-width:720px}
  body:is(.hambon,.mdpfm) .mdtabs button[data-more]{background:var(--sb-panel2)!important}
  /* League tables (Jason 12 Oct): smaller title, leagues in centred rows that wrap however many there are, table up higher */
  .ladders{gap:8px!important;padding:14px 18px!important}
  .ladhead{gap:8px!important}
  .ladhead h3{font-size:34px!important}
  #ladtabs.lgtabs{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;padding:2px 0 4px!important;margin:0!important}
  .lgtabs .lgtb.lgtile{flex:0 0 84px!important;width:84px!important;padding:6px!important;border:0!important;border-radius:14px!important}
  .lgtabs .lgtb.lgtile .lglogo{border-radius:12px}
}
@media (min-width:641px){
  /* NBA: the page sits beside the sidebar, like Soccer */
  body.nba #nbaview{left:var(--sbw);bottom:0}
}
@media (min-width:641px){
  /* NBA More: beside the sidebar, down to the bottom */
  html.mdm body.nba #hambm{left:var(--sbw)!important;bottom:0!important}
}
@media (min-width:641px){
  /* the sidebar shrinks to its icons and grows back with the arrow above More (runtime/sidebar.ts, Jason 16 Oct) */
  :root{--sbw:208px}
  html[data-sb=mini]{--sbw:68px}
  html[data-sb=mini] .mdtabs{padding:14px 8px!important}
  html[data-sb=mini] .mdtabs button{justify-content:center!important;padding:0!important;gap:0!important}
  html[data-sb=mini] .mdtabs button span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
  /* styled like More's Sign out button, inside the sidebar just above More, on its right (Jason 16 Oct) */
  #mdsbx{all:unset;box-sizing:border-box;position:fixed;z-index:96;bottom:66px;left:calc(var(--sbw) - 46px);display:grid;place-items:center;width:36px;height:32px;border-radius:12px;background:var(--sb-panel);color:var(--sb-muted,#A3A7AE);cursor:pointer}
  #mdsbx:hover{background:var(--sb-panel2);color:var(--sb-text,#F0F0F2)}
  #mdsbx:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
  #mdsbx svg{transition:transform .15s}
  html[data-sb=mini] #mdsbx{left:16px}
  html[data-sb=mini] #mdsbx svg{transform:rotate(180deg)}
  body.mxfoc #mdsbx{display:none}
  :root[data-theme=light] #mdsbx{background:#EAEAE7;color:#1A1B1E}
  :root[data-theme=light] #mdsbx:hover{background:#DCDCD8}
}
@media (max-width:640px){#mdsbx{display:none!important}}

/* Desktop layout "B" (Jason 30/10/2026, from FotMob's centred page with Sofascore's score strip on top): from 1024px
   the page sits in a centred column, the tabs move into the header row after the logo (runtime/mobile.ts) and a slim
   strip of the matchday's scores runs above it. Narrower screens keep the sidebar; the NBA keeps it until its makeover. */
#mdstrip{display:none}
@media (min-width:1024px){
  :root{--dw:1240px}
  html body:not(.nba) #mdstrip{display:block;background:var(--sb-bg,#1A1B1E)}
  html[data-czs=hide] body #mdstrip{display:none!important} /* More > Customise > Top games row off */
  /* the games scroll between the two arrows, never behind them (Jason 31/10/2026) */
  #mdstrip .mdscr{max-width:var(--dw);margin:0 auto;padding:6px 50px}
  #mdstrip .mdscr>.l{left:14px}#mdstrip .mdscr>.r{right:14px}
  #mdstrip .mdscr>button{border:0;box-shadow:none;background:var(--sb-panel2)}
  #mdstrip .mdstr{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
  #mdstrip .mdstr::-webkit-scrollbar{display:none}
  .mdsd{flex:none;padding:0 4px 0 10px;font:700 12px Roboto,system-ui,sans-serif;color:var(--sb-text)}
  .mdsd:first-child{padding-left:0}
  .mdsc{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--sb-panel);color:var(--sb-text);font:500 12px Roboto,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
  .mdsc:hover{background:var(--sb-panel2)}
  .mdsc:focus-visible{outline:2px solid var(--sb-focus);outline-offset:1px}
  .mdsc>b{font-weight:600;color:var(--sb-muted)}.mdsc>b.lv{color:var(--sb-loss,#F25C5C)}
  .mdsc>i{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
  .mdsc .lvkit,.mdsc .lvkit svg{display:inline-flex;width:16px;height:16px}

  /* the header: logo, tabs, then search, alerts and you, all inside the centred column */
  html body:not(.nba) .sportbar .sbin{max-width:var(--dw)!important;margin:0 auto!important;padding:0 16px!important;gap:10px!important}
  html body:not(.nba) .sportbar .mdwm{flex:none;order:0;text-align:left;margin:0 8px 0 2px}
  html body .sportbar .sbin>.mdtabs{position:static!important;inset:auto!important;order:0;flex:1 1 auto!important;display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:2px!important;width:auto!important;height:auto!important;min-width:0;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important;z-index:auto!important}
  html body .sportbar .sbin>.mdtabs button{flex:none!important;flex-direction:row!important;justify-content:center!important;gap:7px!important;width:auto!important;height:36px!important;padding:0 12px!important;border-radius:999px!important;background:none!important}
  html body .sportbar .sbin>.mdtabs button svg{width:18px!important;height:18px!important}
  html body .sportbar .sbin>.mdtabs button span{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;font:600 13px Roboto,system-ui,sans-serif!important;white-space:nowrap}
  html body .sportbar .sbin>.mdtabs button:hover{background:var(--sb-panel)!important}
  html body .sportbar .sbin>.mdtabs button.on{background:var(--sb-panel2)!important}
  html body .sportbar .sbin>.mdtabs button::before{display:none!important}
  html body .sportbar .sbin>.mdtabs button[data-more]{margin:0!important}
  :root[data-theme=light] body .sportbar .sbin>.mdtabs button.on{background:#EAEAE7!important}
  /* the sidebar's parts go */
  html body:not(.nba) #mdsbx,html body:not(.nba) #mdup{display:none!important}

  /* the page: one centred column */
  html body:not(.nba) #soccerview.wrap{margin-left:auto!important;margin-right:auto!important;max-width:var(--dw)!important;padding:16px 16px 48px!important}
  /* More and your profile open as a panel at the right of the column */
  html body:not(.nba) #hambm{left:auto!important;right:max(16px,calc((100vw - var(--dw)) / 2 + 16px))!important;width:min(460px,calc(100vw - 32px))!important;bottom:16px!important;border-radius:16px!important}
  html body:not(.nba) #prof .pfpanel{left:auto!important;right:max(16px,calc((100vw - var(--dw)) / 2 + 16px))!important;width:min(460px,calc(100vw - 32px))!important;border-radius:16px}
}
@media (min-width:1024px) and (max-width:1199px){
  /* a little less room: the tab names stay, their icons go */
  html body .sportbar .sbin>.mdtabs button svg{display:none!important}
}
/* Desktop layout "B", part two (Jason 30/10/2026) */
.mdside{display:none}
@media (min-width:1024px){
  /* the score strip names both teams */
  .mdsc>em{font-style:normal;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  /* Live: the games down the left half as the phone's cards, the picked game's league table on the right half;
     Matches: the games in two thirds, the picked game's prices in the last third */
  html:is([data-mdtab=home],[data-mdtab=matches]) body:not(.nba) #soccerview.wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;align-items:start}
  html[data-mdtab=matches] body:not(.nba) #soccerview.wrap{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  html body:not(.nba) #soccerview.wrap>*{grid-column:1/-1}
  html body:not(.nba) #soccerview.wrap>:is(#livebox,.tablewrap){grid-column:1;min-width:0}
  html body:not(.nba) #soccerview.wrap>.mdside{display:block;grid-column:2;min-width:0;position:sticky;top:calc(var(--mdtop,96px) + var(--mdsubh,0px) + 12px);max-height:calc(100vh - var(--mdtop,96px) - 24px);overflow:auto;scrollbar-width:thin;border-radius:14px}
  html.mdm body:not(.nba) #livebox{background:var(--mdpanel)!important;border-radius:18px!important}
  html body:not(.nba) #livebox .lvlist{grid-template-columns:minmax(0,1fr)!important}
  html body:not(.nba) #livebox .lvr{cursor:pointer;border-radius:8px}
  html body:not(.nba) #livebox .lvr:hover{background-color:var(--sb-panel2)!important}
  html body:not(.nba) #livebox .lvr.mdsel{background-color:var(--sb-panel2)!important}
  html body:not(.nba) #list .pgr.mdsel{background-color:var(--sb-panel2)}
  html body .mdside .detail.pgd.mdsidei{display:block!important;min-width:0!important;width:auto!important;max-width:none!important;grid-template-columns:none!important;margin:0!important;padding:12px!important;border:0!important;border-radius:14px;background:var(--mdpanel,var(--sb-panel))!important;color:var(--pgink);font-family:var(--body)}
  .mdside .mdsh{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px 8px;margin:0 0 10px}
  .mdside .mdsht{display:flex;align-items:center;gap:6px;min-width:0;font:700 14px Roboto,system-ui,sans-serif;color:var(--sb-text)}
  .mdside .mdsht b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mdside .mdsht.r{justify-content:flex-end;text-align:right}
  .mdside .mdshm{font:700 14px Roboto,system-ui,sans-serif;color:var(--sb-muted)}
  .mdside .mdsh small{grid-column:1/-1;text-align:center;font:400 12px Roboto,system-ui,sans-serif;color:var(--sb-muted)}
  .mdside .mdsh .pgbt{grid-column:1/-1;justify-self:center;margin:0}
  .mdside .pgc{margin:0}
  /* Tips: every part in the middle */
  html[data-mdtab=tips] body:not(.nba) #soccerview.wrap>:is(#pbhero,#pkhero,#tips){max-width:1000px;margin-left:auto!important;margin-right:auto!important}
}
/* NBA on wide screens (Jason 30/10/2026, its makeover): the same header and centred column as Soccer */
@media (min-width:1024px){
  html body.nba .sportbar .sbin{max-width:var(--dw)!important;margin:0 auto!important;padding:0 16px!important;gap:10px!important}
  html body.nba .sportbar .mdwm{flex:none;order:0;text-align:left;margin:0 8px 0 2px}
  html body.nba #mdsbx{display:none!important}
  html body.nba #nbaview{left:max(0px,calc((100vw - var(--dw)) / 2))!important;right:auto!important;width:min(100vw,var(--dw))!important}
  html.mdm body.nba #hambm{left:auto!important;right:max(16px,calc((100vw - var(--dw)) / 2 + 16px))!important;width:min(460px,calc(100vw - 32px))!important;bottom:16px!important;border-radius:16px!important}
}
/* Desktop round 2 (Jason 30/10/2026) */
@media (min-width:1024px){
  /* the score strip runs the whole width */
  #mdstrip .mdscr{max-width:none}
  /* the Tables tab's highlight on the panel's table */
  .mdside .pgtab tr.me td{background:color-mix(in srgb,var(--sb-accent) 18%,transparent)!important;font-weight:700}
  .mdside .pgtab tr.me td:first-child{border-radius:6px 0 0 6px}.mdside .pgtab tr.me td:last-child{border-radius:0 6px 6px 0}
  /* Last 5: above the table, opened and closed by its heading */
  .mdside .mdsideg{display:flex;flex-direction:column;gap:12px}
  .mdside .l5{order:-1}
  .mdside .l5>summary{cursor:pointer;font:700 15px Roboto,system-ui,sans-serif;color:var(--sb-text);margin:0 0 6px}
  .mdside .l5t{margin-top:8px}
  .mdside .l5t h5{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:700 13px Roboto,system-ui,sans-serif;color:var(--sb-text)}
  .mdside .l5t h5 small{margin-left:auto;font:600 12px Roboto,system-ui,sans-serif;color:var(--sb-muted)}
  .mdside .l5 .pgfg{grid-template-columns:52px minmax(0,1fr) auto!important}
  .mdside .l5 .pgfg .sc{min-width:44px;padding:3px 8px;box-sizing:border-box} /* the numbers touched the edges (Jason 30/10/2026) */
  /* Playbook: every slip at once */
  #pbhero .pbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
  #pbhero .pbgrid .pbo{margin:0}
}
@media (min-width:1024px){
  /* the Matches day headings had a fixed 1120px width, so their counts ran under the prices panel */
  html body #soccerview>.tablewrap .dayhead{width:auto!important;min-width:0!important;max-width:100%!important}
}
/* only the open sport's tabs in the header (the NBA makeover put both bars there; the header rule above showed both) */
@media (min-width:1024px){html body:not(.nba) .sportbar .sbin>.mdtabs.nbt,html body.nba .sportbar .sbin>.mdtabs:not(.nbt){display:none!important}}
/* the tracker as it was in October, kept to the no-lines rule: buttons and the month box filled instead of outlined,
   only the picked unit and today keep their orange ring */
html body:not(.nba) #bt :is(.btin,.btchip:not(.on),.btghost,.btnav,.btmf){border-color:transparent!important}
html body:not(.nba) #bt :is(.btghost,.btchip:not(.on)){background:var(--sb-bg)!important}
html body:not(.nba) #bt :is(.btnav,.btcb){background:var(--sb-panel)!important}
html body:not(.nba) #bt .btcb{border-radius:999px!important;padding:5px 12px!important}
/* phones: + Add a bet, Stats and Profit graph on their own row under the title, so the title never gets squashed */
@media (max-width:639.9px){
html:root body:not(#zz):not(.nba) #bt.bt .bth>.btbtn{grid-column:1/-1!important;grid-row:2!important;display:flex!important;gap:6px!important}
html:root body:not(#zz):not(.nba) #bt.bt .bth>.btbtn>button{flex:1 1 0;white-space:nowrap}
html:root body:not(#zz):not(.nba) #bt.bt .bth>.btunit{grid-row:3!important}
}
/* desktop: a 900px column in the middle so nothing stretches */
@media (min-width:1024px){html[data-mdtab="bets"] body:not(.nba) #soccerview>#bt{max-width:900px!important;margin-left:auto!important;margin-right:auto!important}}
/* My bets on desktop: a narrower column in the middle (Jason 31/10/2026: "too long") */
@media (min-width:1024px){html[data-mdtab="bets"] body:not(.nba) #soccerview>#sb{max-width:820px!important;margin-left:auto!important;margin-right:auto!important}}
/* desktop Live (Jason 31/10/2026): the games in play across the top, above the list and the table */
#lvnow{display:none}
@media (min-width:1024px){
  html[data-mdtab=home] body:not(.nba) #soccerview.wrap>#lvnow:not(:empty){display:block;padding:12px 14px;border-radius:18px;background:var(--mdpanel,var(--sb-panel))}
  html body:not(.nba) #lvnow .lvsec{margin-top:0}
  html body:not(.nba) #lvnow .lvgrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px} /* four a row (Jason 31/10/2026) */
  html body:not(.nba) #lvnow .lvc{background:var(--sb-bg)!important;border-color:transparent!important}
  html body:not(.nba) #lvnow .lvc.mybet{background-image:linear-gradient(rgba(255,122,61,.16),rgba(255,122,61,.16))!important}
}
/* the Bet tab's row of parts in the middle, as on Tips (Jason 31/10/2026) */
html body .mdsubw[data-tab="bets"] .mdsub{justify-content:safe center!important}
/* the Live Scores heading over the row of games in play (Jason 31/10/2026) */
@media (min-width:1024px){html body:not(.nba) #lvnow .lvhead{margin:0 0 10px}}

/* computers, Live and Matches (Jason 2/11/2026, as on phones): the date row stays pinned just under the top bar as you scroll,
   on the page colour; the Live side panel sticks just below it */
@media (min-width:641px){
  html:is([data-mdtab=home],[data-mdtab=matches]) body #soccerview>.dayrow{position:sticky!important;top:var(--mdtop,100px);z-index:23;padding:4px 0!important;margin-top:-4px!important;background:var(--sb-bg,#1A1B1E)}
  /* the side panel (Live's game, Matches' prices) sticks right at the date row's bottom edge, level with the list beside it,
     and fits the screen (Jason 2/11/2026: "uneven" on Live, "cut out" on Matches) */
  html:is([data-mdtab=home],[data-mdtab=matches]) body:not(.nba) #soccerview.wrap>.mdside{top:calc(var(--mdtop,96px) + 52px)!important;max-height:calc(100vh - var(--mdtop,96px) - 52px - 64px)!important} /* short enough to fit between the date row and the page's bottom padding, so at the bottom of the page it never slides up under the date row (Jason 2/11/2026: team names cut off) */
}


/* blue accent in Live, Matches and the menu: generated by scripts/blue-scope.mjs */
#tips.tips:is(#livebox *,#livebox,#datebar *,#datebar,#vtog *,#vtog,#filters *,#filters,#favs *,#favs,.dayrow *,.dayrow,.tablewrap *,.tablewrap,#mxfloat *,#mxfloat,#hambm *,#hambm,#hsearch *,#hsearch,#toTop *,#toTop,#tips .tcard.totd *,#tips .tcard.totd,#tips .tcard.c-prev *,#tips .tcard.c-prev) {
    --neon: #7b96ff;
    background: radial-gradient(rgba(123,150,255,.07) 1px,transparent 1.4px) 0 0/14px 14px,radial-gradient(120% 70% at 50% -10%,rgba(123,150,255,.10),transparent 60%),#0a0f0c !important;
    border-color: rgba(123,150,255,.28)
}
#tips .tcard.totd:is(#livebox *,#livebox,#datebar *,#datebar,#vtog *,#vtog,#filters *,#filters,#favs *,#favs,.dayrow *,.dayrow,.tablewrap *,.tablewrap,#mxfloat *,#mxfloat,#hambm *,#hambm,#hsearch *,#hsearch,#toTop *,#toTop,#tips .tcard.totd *,#tips .tcard.totd,#tips .tcard.c-prev *,#tips .tcard.c-prev) {
    background: linear-gradient(160deg,rgba(123,150,255,.07),transparent 50%),var(--tile);
    box-shadow: 0 0 0 1px rgba(123,150,255,.28)
}
#tips .rank .rr.top:is(#livebox *,#livebox,#datebar *,#datebar,#vtog *,#vtog,#filters *,#filters,#favs *,#favs,.dayrow *,.dayrow,.tablewrap *,.tablewrap,#mxfloat *,#mxfloat,#hambm *,#hambm,#hsearch *,#hsearch,#toTop *,#toTop,#tips .tcard.totd *,#tips .tcard.totd,#tips .tcard.c-prev *,#tips .tcard.c-prev) {
    background: linear-gradient(90deg,rgba(123,150,255,.12),rgba(255,255,255,.02));
    border-color: rgba(123,150,255,.55)
}
#tips .rank .rr:hover:is(#livebox *,#livebox,#datebar *,#datebar,#vtog *,#vtog,#filters *,#filters,#favs *,#favs,.dayrow *,.dayrow,.tablewrap *,.tablewrap,#mxfloat *,#mxfloat,#hambm *,#hambm,#hsearch *,#hsearch,#toTop *,#toTop,#tips .tcard.totd *,#tips .tcard.totd,#tips .tcard.c-prev *,#tips .tcard.c-prev) {
    box-shadow: 0 0 0 1px rgba(123,150,255,.35)
}
.mxclose:is(#livebox *,#livebox,#datebar *,#datebar,#vtog *,#vtog,#filters *,#filters,#favs *,#favs,.dayrow *,.dayrow,.tablewrap *,.tablewrap,#mxfloat *,#mxfloat,#hambm *,#hambm,#hsearch *,#hsearch,#toTop *,#toTop,#tips .tcard.totd *,#tips .tcard.totd,#tips .tcard.c-prev *,#tips .tcard.c-prev) {
    color: #dbe3ff
}
/* Matches in the Graphite look (plan PR 22, from the approved mock-up of 28/10/2026; design B "Matchday programme",
   Jason 13 Oct, underneath): three background steps, no borders, the one orange for our call. Scoped to pg* classes;
   its colours (--pg..., dark and light) are in runtime/tokens.css. The sheet's own .row rules are still there, so
   the rules that beat them keep their weight. Body font only. */
html[data-theme=light] body .detail.pgd .mxtabs.pgtabs .mxtb{opacity:1!important}

/* the old table header and its fixed width go */
html body .tablewrap:has(#list .pgr) .thead{display:none!important}
html body .tablewrap:has(#list .pgr){background:var(--pgbg)!important;border:0!important;border-radius:0!important;overflow:visible;color:var(--pgink)}
html body .tablewrap #list .dayhead{display:flex!important;align-items:baseline;gap:6px;background:var(--pgbg)!important;color:var(--pgink)!important;font:700 15px var(--body)!important;letter-spacing:0!important;text-transform:none!important;border:0!important;padding:14px 12px 2px!important;margin:0!important}
html body .tablewrap #list .dayhead small{margin-left:auto;color:var(--pgmut)!important;font:400 12px var(--body)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* a league's games: a raised strip, then its rows on the panel */
.pgband{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 12px 0;padding:8px 12px;background:var(--pgband);color:var(--pgmut);border-radius:8px 8px 0 0;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase}
.pgband .pgbn{color:var(--pgink)}
.pgband .pgbc{font-weight:500;letter-spacing:0;text-transform:none;font-size:11px;white-space:nowrap}

/* row: kick-off | the two teams | our call or the score | table; the chance bar under */
html body .tablewrap #list .row.pgr[data-id]{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto 30px!important;column-gap:10px!important;row-gap:6px!important;align-items:center!important;
  min-width:0!important;min-height:0!important;padding:11px 12px!important;margin:0 12px!important;background:var(--pgcard)!important;border:0!important;border-top:1px solid var(--pgrule)!important;border-radius:0!important;box-shadow:none!important;color:var(--pgink);font-family:var(--body);cursor:pointer}
html body .tablewrap #list .pgband+.row.pgr[data-id]{border-top:0!important}
html body .tablewrap #list :is(.row.pgr,.detail.pgd):is(:last-child,:has(+.pgband),:has(+.dayhead),:has(+.dhid)){border-radius:0 0 8px 8px!important}
html body .tablewrap #list .row.pgr[aria-expanded=true]{border-radius:0!important}
html body .tablewrap #list .row.pgr[data-id]:hover{background:color-mix(in srgb,var(--pgcard) 92%,var(--pgink))!important}
html body .tablewrap #list .row.pgr[data-id]:focus-visible{outline:2px solid var(--sb-focus);outline-offset:-2px}
html body .tablewrap #list .row.pgr[aria-expanded=true]{background:var(--pgband)!important}
html body .tablewrap #list .row.pgr.dhid[data-id],html body .tablewrap #list .pgband.dhid{display:none!important}
html body .tablewrap #list .row.pgr[data-id]>*{border:0!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important;text-align:left!important;justify-self:stretch!important;min-width:0}
html body .tablewrap #list .row.pgr[data-id]>*::before,html body .tablewrap #list .row.pgr[data-id]>*::after,html body .tablewrap #list .row.pgr[data-id]::before,html body .tablewrap #list .row.pgr[data-id]::after{content:none!important;display:none!important}
html body .tablewrap #list .row.pgr[data-id]>.pgtime{grid-column:1;grid-row:1}
html body .tablewrap #list .row.pgr[data-id]>.pgteams{grid-column:2;grid-row:1;display:grid!important;gap:5px;align-content:center!important}
html body .tablewrap #list .row.pgr[data-id]>.pgright{grid-column:3;grid-row:1;justify-self:end!important;text-align:right!important;max-width:46vw}
html body .tablewrap #list .row.pgr[data-id]>.pgtb{grid-column:4;grid-row:1;justify-self:end!important;display:grid!important;place-items:center;width:30px;height:30px;border-radius:8px!important;color:var(--pgmut);cursor:pointer}
html body .tablewrap #list .row.pgr[data-id]>.pgcb{grid-column:2/5;grid-row:2}
html body .tablewrap #list .row.pgr[data-id]>.pgcalls{grid-column:2/5;grid-row:3}
.pgtb:not(.none):hover{color:var(--pgink);background:var(--pgchip)!important}
.pgtime{font:700 15px/1.05 var(--body);font-variant-numeric:tabular-nums;color:var(--pgink)}
.pgtime small{display:block;font:400 10px var(--body);color:var(--pgmut);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.pgtime.live,.pgtime.live small{color:var(--pgred)}
.pgtm{display:flex;align-items:center;gap:8px;font:500 14px var(--body);min-width:0}
.pgtn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgpos{margin-left:auto;font:400 11px var(--body);color:var(--pgmut);white-space:nowrap}
.pglg{width:22px;height:22px;object-fit:contain;flex:none}
.pglg.pgab{display:inline-grid;place-items:center;border-radius:50%;background:var(--tc1);color:var(--tci,#fff);font:700 8.5px var(--body);letter-spacing:-.02em}
.pglg.sm{width:20px;height:20px}.pglg.xs{width:17px;height:17px}.pglg.lg{width:56px;height:56px}.pglg.lg.pgab{font-size:15px}
.pgsc{display:block;font:800 22px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--pgink);white-space:nowrap}
.pgsc small{display:block;font:500 10px var(--body);color:var(--pgmut);margin-top:3px}
/* our call: one orange tag; quiet with a tick or a cross once the pick has settled */
.pgtag{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:22px;padding:0 8px;border-radius:999px;font:700 11px var(--body);background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.pgtag.q{background:var(--pgband);color:var(--pgink)}
.pgtag.ok{background:var(--pgband);color:var(--pgred)}
.pgtag.none{background:var(--pgband);color:var(--pgmut);font-weight:500}
/* the chance bar: home, draw, away in the teams' colours and gold (Jason 29/10/2026: orange was hard to focus on); the call's chances bold */
/* a plain grid track: the sheet centres a row's children, which would shrink the bar to its labels */
.pgcb{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:5px;min-width:0}
.pgbar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden}
.pgbar b{display:block;height:100%;min-width:2px;background:var(--pgchip)}
.pgbar b.d{background:var(--pgd)}
.pgbl{display:flex;justify-content:space-between;gap:6px;font:500 11px var(--body);font-variant-numeric:tabular-nums;color:var(--pgmut)}
.pgbl .on{color:var(--pgink);font-weight:700}
/* the bottom line of a row: your call or Make a call on the left, our call as plain words on the right (Jason 29/10/2026) */
.pgcalls{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.pgcalls .pgour{margin-left:auto}
.pgour{display:inline-flex;align-items:center;gap:4px;max-width:100%;font:500 12px var(--body);color:var(--pgmut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgour b{font-weight:700;color:var(--pgink)}.pgour.won b{color:var(--pgw)}.pgour.lost b{color:var(--pgl)}

/* open match */
html body .tablewrap #list .detail.pgd{display:block!important;min-width:0!important;padding:0 0 12px!important;margin:0 12px!important;background:var(--pgbg)!important;border:0!important;color:var(--pgink);font-family:var(--body);grid-template-columns:none!important}
.pghead{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;background:var(--pgcard);color:var(--pgink);padding:16px 14px 14px;text-align:center}
.pghead .t{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 14px var(--body);line-height:1.2;min-width:0}
.pghead .t span{max-width:100%}
.pghead .t.r{flex-direction:column-reverse}
.pghead .mid{display:grid;gap:2px;align-self:center}
.pghead .mid b{font:800 36px/1 var(--body);font-variant-numeric:tabular-nums}
.pghead .mid small{font:500 12px var(--body);color:var(--pgmut)}
.pghead .mid small.ko{font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--pgmut)}
/* Jason 15 Oct: opens the match centre (timeline, stats, players, lineups) during a game and after it */
html body .detail.pgd .pghead .mid .pgmc{justify-self:center;margin:8px 0 0!important;font:600 12.5px var(--body)!important;letter-spacing:0;text-transform:none;color:var(--pgink)!important;background:var(--pgband)!important;border:0!important;border-radius:999px!important;padding:7px 14px!important;cursor:pointer}
html body .detail.pgd .pghead .mid .pgmc:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* the tabs: one segmented pill row, the open tab raised; it stays in view while you scroll (Jason 16 Oct) */
html body .detail.pgd .mxtabs.pgtabs{display:flex!important;gap:4px!important;padding:3px!important;margin:8px 0 0!important;background:var(--pgcard)!important;border:0!important;border-radius:10px!important;overflow-x:auto;scrollbar-width:none;position:sticky!important;top:calc(var(--mdtop,54px) + var(--mdup,0px))!important;z-index:15!important;box-shadow:none!important}
html.mdov body:not(.nba) .detail.pgd .mxtabs.pgtabs{top:calc(var(--mdtop,54px) + 48px)!important}
html.mxsbon #list .detail.pgd .mxtabs.pgtabs{top:calc(var(--mdtop,54px) + var(--mdup,0px) + 44px)!important}
html body #mxhub .detail.pgd .pgstick{position:sticky;top:calc(var(--mdtop,54px) + var(--mdup,0px) + 52px);z-index:15;background:var(--pgbg)}
html body #mxhub .detail.pgd .pgstick .mxtabs.pgtabs{position:static!important}
html.mdov body:not(.nba) #mxhub .detail.pgd .pgstick{top:calc(var(--mdtop,54px) + 48px + 52px)}
html body .detail.pgd .mxtabs.pgtabs .mxtb{flex:1 0 auto!important;font:600 13px var(--body)!important;letter-spacing:0!important;text-transform:none!important;padding:8px 10px!important;margin:0!important;color:var(--pgmut)!important;background:none!important;border:0!important;border-radius:8px!important;box-shadow:none!important;white-space:nowrap;cursor:pointer}
/* the open tab in the orange (Jason 30/10/2026: grey on grey was hard to tell apart) */
html body .detail.pgd .mxtabs.pgtabs .mxtb[aria-selected=true]{color:var(--sb-on-accent)!important;background:var(--sb-accent-fill)!important}
html body .detail.pgd .mxtabs.pgtabs .mxtb:focus-visible{outline:2px solid var(--sb-focus);outline-offset:-2px}
html body .detail.pgd .mxp.pgp{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:10px 0 0!important;margin:0!important;background:none!important;border:0!important}
html body .detail.pgd .mxp.pgp[hidden]{display:none!important}
.pgc{background:var(--pgcard);border:0;border-radius:8px;padding:14px;min-width:0}
.pgc h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font:700 15px var(--body);color:var(--pgink);margin:0 0 10px;padding:0;border:0;letter-spacing:0;text-transform:none}
.pgc h3 small{margin-left:auto;font:500 12px var(--body);color:var(--pgmut)}
.pgc h3 .pgour{margin-left:auto}
.pgwhy{font:400 13px/1.45 var(--body);color:var(--pgmut);margin:10px 0 0}
.pgwhy b{color:var(--pgink);font-weight:600}
.pgh4{display:flex;align-items:baseline;gap:10px;font:700 14px var(--body);margin:16px 0 4px;color:var(--pgink)}.pgh4 small{margin-left:auto;font:500 12px var(--body);color:var(--pgmut)}
.pgnote{font:400 13px var(--body);color:var(--pgmut);margin:4px 0}
.pg2{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.pgkv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pgkv>div{border:0;background:var(--pgchip);border-radius:6px;padding:9px 11px;display:grid;gap:3px}
.pgkv span{font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut)}
.pgkv b{font:700 15px var(--body);font-variant-numeric:tabular-nums}.pgkv em{font-style:normal;color:var(--pgred)}
.pgbars{margin-top:12px}.pglab{font:600 12px var(--body);color:var(--pgmut);margin:8px 0 4px}
.pgval{font:400 13px var(--body);margin:10px 0 0;color:var(--pgink)}
.pgfm{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 13px var(--body);margin-bottom:10px}
.pgfm>span{display:flex;align-items:center;gap:7px}
.pgst{align-self:center}.pgst.pred,.pgst.conf,.pgfm .pred,.pgfm .conf{font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:0;background:var(--pgchip);color:var(--pgmut)}
.pgst.conf,.pgfm .conf{background:var(--pgw);color:var(--pgonw)}
/* line-ups: each starter a shirt in the kit's colours with the number, the name under */
.pglu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px) minmax(0,1fr);gap:20px;align-items:start}
.pgsq h5{display:flex;align-items:center;gap:8px;font:700 13px var(--body);margin:0 0 4px;padding-bottom:5px;border:0}
.pgsq h5 small{margin-left:auto;font-weight:500;color:var(--pgmut)}
.pgsq h6{font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--pgmut);margin:10px 0 3px}
.pgsq ul{list-style:none;margin:0;padding:0;font:400 13px var(--body);line-height:1.8}
.pgsq ul.bn{font-size:12.5px;color:var(--pgmut);line-height:1.6}
.pgsq li b{display:inline-block;width:26px;font-weight:600;color:var(--pgred);font-variant-numeric:tabular-nums}
.pgsq li.out{text-decoration:line-through;color:var(--pgmut)}.pgsq li em{font-style:normal;font-size:11px;color:var(--pgl);text-decoration:none;display:inline-block}
.pgsq li.doubt em{color:var(--pgd)}
.pgsq p{font:400 13px var(--body);margin:0}
.pgpitch{position:relative;aspect-ratio:68/105;width:100%;background:var(--pgpitch);border:0;border-radius:8px;overflow:hidden}
.pgpitch .ln{position:absolute;border:1px solid var(--pgline)}
.pgpitch .half{left:0;right:0;top:50%;height:0;border-width:1px 0 0}
.pgpitch .circ{left:50%;top:50%;width:26%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.pgpitch .box{left:21%;right:21%;height:15%}.pgpitch .box.t{top:-1px}.pgpitch .box.b{bottom:-1px}
.pgpitch .six{left:37%;right:37%;height:5.5%}.pgpitch .six.t{top:-1px}.pgpitch .six.b{bottom:-1px}
.pgpl{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;width:96px;z-index:1}
.pgpl i{position:relative;width:40px;height:40px;display:block;font-style:normal}
.pgpl i svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pgpl i u{position:absolute;right:-4px;top:-2px;width:15px;height:15px;border-radius:50%;background:var(--pgl);color:#fff;font:800 9px var(--body);text-decoration:none;display:grid;place-items:center}
.pgpl i u.q{background:var(--pgd);color:var(--pgonw)}
.pgpl.out{opacity:.55}.pgpl.out i{filter:grayscale(1)}
.pgpl span{font:600 11.5px var(--body);color:#F0F0F2;text-shadow:0 1px 2px rgba(0,0,0,.6);max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme=light] .pgpl span{color:var(--pgink);text-shadow:none}
.pgij{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border:0}
.pgij .x{flex:none;width:17px;height:17px;border-radius:50%;background:var(--pgl);color:#fff;font:800 12px/17px var(--body);text-align:center;margin-top:2px}
.pgij .x.q{background:var(--pgd);color:var(--pgonw)}
.pgij b{display:block;font:600 13.5px var(--body)}.pgij small{font:400 12px var(--body);color:var(--pgmut)}
.pg2 h5{display:flex;align-items:center;gap:8px;font:700 14px var(--body);margin:0 0 4px}.pg2 h5 small{margin-left:auto;font-weight:500;color:var(--pgmut)}
/* form strips: one row a team, newest on the right, the Ink palette (Jason 28/10/2026) */
.pgft h5 .pgfd{margin-left:auto}
.pgfd{display:inline-flex;gap:3px}
.pgfd i{width:20px;height:20px;border-radius:4px;display:inline-grid;place-items:center;font:700 10px var(--body);font-style:normal;background:var(--pgchip);color:var(--pgmut)}
.pgfd i.W{background:var(--pgw);color:var(--pgonw)}.pgfd i.D{background:var(--pgd);color:var(--pgonw)}.pgfd i.L{background:var(--pgl);color:#fff}
.pgfd em{font:500 11.5px var(--body);color:var(--pgmut);font-style:normal}
.pgfs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 6px}
.pgfs div{border:0;background:var(--pgchip);border-radius:6px;text-align:center;padding:7px 2px;display:grid;gap:1px}
.pgfs b{font:700 15px var(--body);font-variant-numeric:tabular-nums}.pgfs span{font:600 9.5px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--pgmut)}
.pgsub{font:500 12px var(--body);color:var(--pgmut);margin:4px 0}
.pgtr{width:100%;height:34px;display:block;margin:2px 0 4px}
.pgtr line{stroke:var(--pgrule);stroke-dasharray:3 3}.pgtr polyline{fill:none;stroke-width:2.5;stroke:var(--pgd)}.pgtr polyline.a{stroke:var(--pgred)}
.pgfg,.pgh2{display:grid;grid-template-columns:50px 60px minmax(0,1fr) 50px;align-items:center;gap:8px;padding:7px 0;border:0;font:400 13.5px var(--body)}
.pgfg .dt,.pgh2 .dt{font-size:12px;color:var(--pgmut)}.pgfg .cp,.pgh2 .cp{font:600 10.5px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--pgmut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgfg .op{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pgfg .op em{font-style:normal;font-size:12px;color:var(--pgmut)}
.pgfg .sc{font:700 13px var(--body);font-variant-numeric:tabular-nums;text-align:center;border-radius:5px;padding:3px 0;color:#fff}
.pgfg .sc.W{background:var(--pgw);color:var(--pgonw)}.pgfg .sc.D{background:var(--pgd);color:var(--pgonw)}.pgfg .sc.L{background:var(--pgl)}
.pgh2{grid-template-columns:72px 90px minmax(0,1fr) 50px minmax(0,1fr)}
.pgh2 .l{text-align:right}.pgh2 .w{font-weight:700}.pgh2>b{text-align:center;background:var(--pgchip);border-radius:5px;padding:3px 0;font-variant-numeric:tabular-nums}
/* H2H */
.pghh{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:8px 0}
.pghh .t{display:flex;align-items:center;gap:8px}.pghh .t.a{justify-content:flex-end}.pghh .t.d{flex-direction:column;gap:0}
.pghh b{font:700 26px var(--body);font-variant-numeric:tabular-nums}.pghh span{font:500 12px var(--body);color:var(--pgmut)}
.pghh+.pgbar b.h,.pghh+.pgbar b.a{background:var(--pgchip)}
.pghh+.pgbar b.d{background:var(--pgd)}
.pghst{margin:12px 0 4px}
.pghs{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;padding:5px 0;font:400 13px var(--body)}
.pghs span{text-align:center;color:var(--pgmut)}.pghs b{font-weight:700;font-variant-numeric:tabular-nums}.pghs b:last-child{text-align:right}
/* table */
.pgtab{width:100%;border-collapse:collapse;font:400 13px var(--body);font-variant-numeric:tabular-nums}
.pgtab th{font:600 11px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--pgmut);padding:6px 4px;text-align:center;border:0}
.pgtab td{padding:7px 4px;text-align:center;border:0}
.pgtab .tl{text-align:left}.pgtab td.tl{display:flex;align-items:center;gap:7px}
.pgtab tr.me td{background:var(--pgchip);font-weight:700}
.pgtab .zn{display:inline-block;width:3px;height:14px;border-radius:2px;margin-right:6px;vertical-align:middle;background:transparent}
.pgtab td.gd.up{color:var(--pgw);font-weight:600}.pgtab td.gd.dn{color:var(--pgl);font-weight:600}.pgtab td.gd.eq{color:var(--pgink)}
.pgc .pgbt{margin-top:10px;font:600 13px var(--body);color:var(--pgred);background:none;border:0;cursor:pointer;padding:0}
/* the old panels shown inside the new tabs (bet buttons, team stats) pick up the body font and the panel */
.detail.pgd .mxs{font-family:var(--body);background:var(--pgcard);border:0!important;border-radius:8px;padding:14px}
.detail.pgd .mxs h4{font:700 15px var(--body)!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important}
.detail.pgd .mxst th,.detail.pgd .mxst td{border:0!important}
.detail.pgd .gbets,.detail.pgd .gbets *,.detail.pgd .gmodel,.detail.pgd .gmodel *,.detail.pgd .auodds,.detail.pgd .auodds *{font-family:var(--body)!important}
.detail.pgd .gbets h5{font-weight:700!important;color:var(--pgink)!important}
.detail.pgd .gb b{color:var(--pgred)!important;font-variant-numeric:tabular-nums}
/* a ticked price (on the slip or the ladder) keeps the dark text of the filled box */
.detail.pgd .gb.on b{color:#2a0718!important}

/* a wide row: the bar stays readable at the teams' width until the desktop columns come (PR 26) */
@media (min-width:901px){html body .tablewrap #list .row.pgr[data-id]>.pgcb{max-width:560px}}
@media (max-width:900px){.pglu{grid-template-columns:1fr}.pglu .pgpitch{order:-1;max-width:460px;margin:0 auto}.pglu{gap:14px}.pglu .pgsq{display:inline-block}}
@media (max-width:640px){
  html body .tablewrap #list .row.pgr[data-id]{padding:10px!important;margin:0!important}
  html body .tablewrap #list .detail.pgd{margin:0!important}
  .pgband{margin:8px 0 0;padding:7px 10px}
  html body .tablewrap #list .dayhead{padding:12px 2px 2px!important}
  .pgtime{font-size:14px}.pgtm{font-size:14px;gap:7px}.pgpos{display:none}.pgsc{font-size:20px}
  .pghead{padding:14px 10px 12px;gap:6px}.pghead .t{font-size:13px}.pglg.lg{width:48px;height:48px}
  .pghead .mid b{font-size:30px}
  .pgc{padding:12px}
  .pg2{grid-template-columns:1fr;gap:16px}
  .pgkv{grid-template-columns:1fr 1fr}
  .pgfs{grid-template-columns:repeat(3,1fr)}
  .pglu{grid-template-columns:1fr 1fr}.pglu .pgpitch{grid-column:1/-1}.mxp[data-p="0"] .pglu .pgsq{display:none}
  .pgh2{grid-template-columns:50px minmax(0,1fr) 44px minmax(0,1fr);font-size:12.5px;gap:6px}.pgh2 .cp{display:none}
  .pgfg{grid-template-columns:44px 46px minmax(0,1fr) 44px;font-size:13px;gap:6px}
  .pghs{grid-template-columns:44px 1fr 44px}
  .pgtab{font-size:12px}.pgtab th,.pgtab td{padding:6px 2px}
  .pgpl{width:70px}.pgpl i{width:32px;height:32px}.pgpl span{font-size:10px;max-width:70px}
}

/* ---- Your call (plan PR 22a, brief 2d): the "Make a call" pill under a row's bar, the viewer's call as a chip,
   the markets in the open match and the Your call tab ---- */
.pgmk{height:24px;padding:0 10px;border:0;border-radius:999px;background:var(--pgband);color:var(--pgred);font:700 12px var(--body);cursor:pointer;white-space:nowrap}
.pgtag.ok.won{background:var(--pgw);color:var(--pgonw)}.pgtag.ok.lost{background:var(--pgband);color:var(--pgmut);text-decoration:line-through}
.ycmk{margin-top:14px}
.ych{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 14px var(--body);color:var(--pgink)}
.ych small{font:400 11px var(--body);color:var(--pgmut);text-align:right}
.ycl{font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut);margin:10px 0 4px}
.ycps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.ycb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:0;border-radius:8px;background:var(--pgchip);color:var(--pgink);font:600 13px var(--body);line-height:1.2;cursor:pointer;min-width:0}
.ycb b{font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ycb span{font:500 11px var(--body);color:var(--pgmut);font-variant-numeric:tabular-nums;white-space:nowrap}
.ycb.on{background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E)}.ycb.on span{color:var(--sb-on-accent,#1A1B1E)}
.ycb.na{opacity:.5;cursor:default}
.ycb:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* the tab */
#yourcall{font-family:var(--body);color:var(--pgink)}
#yourcall .pgc{margin:0 0 10px}
#yourcall h3.ycsec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 8px;font:700 15px var(--body);color:var(--pgink);letter-spacing:0;text-transform:none}
#yourcall h3.ycsec small{font:400 12px var(--body);color:var(--pgmut)}
.ychead{display:flex;align-items:center;gap:14px}.ychead .ycbig:last-child{margin-left:auto;text-align:right}
.ycbig{font:800 30px/1 var(--body);font-variant-numeric:tabular-nums}.ycbig small{display:block;font:400 11px var(--body);color:var(--pgmut);margin-top:4px}
.ycnote{font:400 13px var(--body);color:var(--pgmut);margin:10px 0 0;line-height:1.45}
.ycrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--pgrule)}.ycrow:first-child{border-top:0;padding-top:0}
.ycrow .t{display:grid;gap:3px;min-width:0}.ycrow .t span{display:flex;align-items:center;gap:8px;font:500 14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ycrow img{width:18px;height:18px;flex:none}
.ycrow .r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0;max-width:55%}
.ycrow .r small{font:400 11px var(--body);color:var(--pgmut)}
.yclad div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--pgrule);font:500 13px var(--body)}
.yclad div:first-child{border-top:0;padding-top:0}
.yclad .me{color:var(--pgred);font-weight:700}.yclad b{font-variant-numeric:tabular-nums}
.yclad span:nth-child(2){display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ycbtn{height:40px;padding:0 14px;border:0;border-radius:8px;background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E);font:600 13px var(--body);cursor:pointer}
.ycrow .lvkit{display:inline-flex;width:18px;height:18px;flex:none}.ycrow .lvkit svg{width:18px;height:18px}

/* ---- Markets tab (plan PR 22b, brief 2k): every market a bookie prices, TAB and Sportsbet side by side, best price in
   the accent, a price adds to the slip and the circle makes it your call ---- */
.mkts{display:grid;gap:10px;min-width:0}
.mkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 12px var(--body);color:var(--pgmut);min-height:22px}.mkbar .sp{margin-left:auto;white-space:nowrap}
.mkchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}.mkchips::-webkit-scrollbar{display:none}
.mkchips button{flex:none;height:28px;padding:0 12px;border:0;border-radius:999px;background:var(--pgcard);color:var(--pgmut);font:600 12px var(--body);cursor:pointer}
.mkchw{position:relative;min-width:0}
.mkarr{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;padding:0 0 2px;border:0;border-radius:50%;background:var(--pgband);color:var(--pgink);font:700 20px/1 var(--body);box-shadow:0 2px 10px rgba(0,0,0,.45);cursor:pointer}
.mkarr.l{left:0}.mkarr.r{right:0}.mkarr:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
.mkchips{cursor:grab;user-select:none;-webkit-user-select:none}.mkchips.dragging,.mkchips.dragging *{cursor:grabbing}
.mg .mh .mkfav{all:unset;margin-left:6px;padding:0 4px;cursor:pointer;color:var(--pgmut);font-size:15px;line-height:1}.mg .mh .mkfav.on{color:#FFD60A}.mg .mh .mkfav:focus-visible{outline:2px solid var(--sb-focus);border-radius:4px}
.mkchips button.on{background:var(--sb-accent-fill);color:var(--sb-on-accent)} /* the picked filter in orange, as the open tab (Jason 30/10/2026) */
.mkchips button:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
.mg{background:var(--pgcard);border-radius:8px;overflow:hidden;min-width:0}
.mg .mh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px;background:var(--pgband);font:700 13px var(--body);color:var(--pgink)}
.mg .mh small{font:700 10px var(--body);color:var(--pgmut);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mr{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--mkn,2),56px);gap:6px;align-items:center;padding:6px 12px;border-top:1px solid var(--pgrule)}
.mr:nth-child(2){border-top:0}
.mr .mn{font:500 13px var(--body);color:var(--pgink);min-width:0;overflow-wrap:anywhere}.mr .mn small{display:block;font:500 11px var(--body);color:var(--pgmut);font-variant-numeric:tabular-nums}
.mp{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:34px;padding:0;border:0;border-radius:8px;background:var(--pgchip);color:var(--pgink);font:600 13px var(--body);font-variant-numeric:tabular-nums;cursor:pointer}
.mp.best{color:var(--pgred)}.mp.on,.mp.on.best{background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E)}
.mp.na{background:none;color:var(--pgmut);cursor:default}.mp:disabled{opacity:.5;cursor:default}
.mp .omv{font-style:normal;font-size:9px}.mp .omv.up{color:var(--pgw)}.mp .omv.dn{color:var(--pgl)}.mp.on .omv{color:inherit}
.mp:focus-visible,.mk3:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
.mk3{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--pgchip);color:var(--pgmut);display:grid;place-items:center;cursor:pointer}
.mk3.on{background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E)}.mk3.na{background:none}
.mnote{margin:0;padding:6px 12px 10px;font:500 11px var(--body);color:var(--pgmut)}
/* the boxes in columns that each fill from the top, so a short box never leaves a gap beside a long one (Jason 1/11/2026) */
.mkcols{display:grid;gap:10px;min-width:0}
@media(min-width:901px){.mkcols{display:block;columns:360px;column-gap:10px}.mkcols>.mg{break-inside:avoid;margin-bottom:10px}}
/* drag ≡ to move a box; the one moving lifts */
.mg .mh .mkgrip{all:unset;margin-right:6px;padding:0 4px;cursor:grab;touch-action:none;color:var(--pgmut);font-size:16px;line-height:1}
.mg .mh .mkgrip:focus-visible{outline:2px solid var(--sb-focus);border-radius:4px}
.mg.drag{opacity:.75;box-shadow:0 0 0 2px var(--sb-accent-fill)}.mg.drag .mkgrip{cursor:grabbing}
/* Over/Under (or a handicap's two teams) side by side, and players in two columns under their teams (Jason 1/11/2026);
   --mkk is the prices on each side: every bookie when the box has the width to itself, else the best one */
.mpg{padding:2px 0 6px}
.mph,.mpr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:6px 12px}
.mpr+.mpr{border-top:1px solid var(--pgline,rgba(255,255,255,.06))}
.mps{display:flex;gap:6px;width:calc(var(--mkk,1) * 56px + (var(--mkk,1) - 1) * 6px);justify-content:flex-end}
.mph .mps{flex-wrap:wrap;justify-content:center;row-gap:2px}.mph .mps b{flex:0 0 100%;text-align:center;font:700 12px var(--body);color:var(--pgink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mps>.mp{flex:none;width:56px;box-sizing:border-box;margin:0}
.mph .mps small{flex:none;width:56px;text-align:center;font:700 9.5px var(--body);color:var(--pgmut);overflow:hidden;text-overflow:ellipsis}
.mpr .mn small{display:block}
.mpl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;padding:6px 12px 8px}
.mpl h6{margin:4px 0 6px;font:700 12px var(--body);color:var(--pgink)}
.mpn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}.mpn>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px var(--body);color:var(--pgink)}
.mplo{grid-column:1/-1}.mplo .mpl{padding:0}
.mkcols.one{columns:auto}
.mkfavbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.mkfavbar small{color:var(--pgmut);font:500 12px var(--body)}
.mkfavbar button{flex:none;height:28px;padding:0 12px;border:0;border-radius:999px;background:var(--pgcard);color:var(--pgink);font:600 12px var(--body);cursor:pointer}
.mkfavbar button:disabled{opacity:.45;cursor:default}.mkfavbar button:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* the Markets filter row, 2 px under the header so no sub-pixel sliver shows the prices through (All, Result, Double chance...) stays pinned under the match header and tabs (Jason 30/10/2026); --pgsh is the header's height, set by MatchDetail */
html body #mxhub .detail.pgd .mkchw{position:sticky;top:calc(var(--mdtop,54px) + var(--mdup,0px) + 52px + var(--pgsh,0px) - 2px);box-shadow:0 -4px 0 var(--pgbg);z-index:14;margin:0 -2px;padding:6px 2px;background:var(--pgbg)}
html.mdov body:not(.nba) #mxhub .detail.pgd .mkchw{top:calc(var(--mdtop,54px) + 48px + 52px + var(--pgsh,0px) - 2px)}
/* Your call rows (Jason 30/10/2026: the pick was cut off, and there was no way to change or cancel it) */
#yourcall .ycrow .r{max-width:62%}
#yourcall .ycrow .r .pgtag{white-space:normal;text-align:right;line-height:1.3}
#yourcall .ycacts{display:flex;gap:6px;margin-top:2px}
#yourcall .ycacts button{height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--pgband);color:var(--pgink);font:600 12px var(--body);cursor:pointer}
#yourcall .ycacts button[data-ycdel]{color:var(--pgl)}
/* Call it on the match rows: a clear orange button (Jason 30/10/2026) */
html body .pgcalls .pgmk{height:28px;padding:0 14px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font-weight:800}
/* the Call it picker: Home, Draw, Away with price and points, under the row */
.ycq{position:fixed;left:12px;right:12px;z-index:800;max-width:420px;margin:0 auto;padding:12px;border-radius:16px;background:var(--pgcard);color:var(--pgink);box-shadow:0 18px 44px rgba(0,0,0,.45);font-family:var(--body)}
.ycqh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}.ycqh b{font:800 15px var(--body)}.ycqh span{flex:1;min-width:0;font:400 12px var(--body);color:var(--pgmut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ycqx{border:0;background:var(--pgband);color:var(--pgink);width:28px;height:28px;border-radius:50%;cursor:pointer}
.ycqo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ycqo button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:0;border-radius:12px;background:var(--pgband);color:var(--pgink);cursor:pointer;min-width:0}
.ycqo button b{font:700 13px var(--body);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ycqo button span{font:800 16px var(--body);font-variant-numeric:tabular-nums}.ycqo button small{font:600 11px var(--body);color:var(--sb-accent)}
.ycqo button:active{background:var(--sb-accent-fill);color:var(--sb-on-accent)}
.ycqm{display:block;width:100%;margin-top:8px;padding:8px;border:0;background:none;color:var(--pgmut);font:600 12.5px var(--body);cursor:pointer}
/* the Your call card on Live */
/* last week's result */
.ycres{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:24px;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ycresb{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 18px 16px;border-radius:20px;background:var(--pgcard);color:var(--pgink);text-align:center;font-family:var(--body)}
.ycresb small{font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--pgmut)}
.ycrank{font:800 44px/1 var(--body);color:var(--sb-accent)}.ycrank span{font:600 15px var(--body);color:var(--pgmut)}
.ycresb p{margin:4px 0 8px;font:500 14px/1.45 var(--body)}
.ycresa{display:flex;gap:8px;width:100%}.ycresa .ycbtn{flex:1}
.ycresx{height:40px;padding:0 16px;border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);font:600 13px var(--body);cursor:pointer}
/* the Your call card's Shrimpy: the oomph lines pulse out from him */
@media (prefers-reduced-motion:no-preference){.ychead .shr-rays{animation:shr-oomph 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}}
@keyframes shr-oomph{0%,100%{opacity:.35;transform:scale(.9)}40%{opacity:1;transform:scale(1.06)}}
/* the form score boxes open the same floating result as the Tables tab's pills */
.pgfg .sc[data-g]{cursor:pointer}.pgfg .sc[data-g]:focus-visible{outline:2px solid var(--sb-focus);outline-offset:1px}
/* Markets: each bookie's name sits over its own prices (Jason 31/10/2026), on the rows' grid */
.mg .mh{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--mkn,2),56px);gap:6px;align-items:center}
.mg .mh small{text-align:center;font-size:9.5px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
/* the match you clicked stays lit, in the hover's grey (Jason 31/10/2026) */
html body .tablewrap #list .row.pgr[data-id].mdsel{background:color-mix(in srgb,var(--pgcard) 92%,var(--pgink))!important}
/* The Live Scores box (#livebox, runtime/react/LiveBox.tsx) in the Graphite look (plan PR 22): hero cards for the
   games on now, fixture rows for the rest, no borders (Jason 28/10/2026). These replace the sheet's own lv* rules.
   The tag and chance bar classes (.pgtag, .pgcb) are the Matches page's, in runtime/matches.css. */
html body:not(.nba) #livebox{padding:12px 14px 14px!important;background:none!important}
.lvhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.lvhead h2{margin:0;display:flex;align-items:center;gap:8px;font:700 15px var(--body);color:var(--sb-text);letter-spacing:0;text-transform:none}
.lvhead h2 span:not(.lvdot){font-weight:400;color:var(--sb-muted)}
.lvdot{width:9px;height:9px;border-radius:50%;background:var(--sb-loss,#F25C5C);box-shadow:0 0 6px color-mix(in srgb,var(--sb-loss,#F25C5C) 80%,transparent)} /* always a bright red (Jason 31/10/2026) */
.lvdot.on{animation:lvdot 1.4s ease-out infinite}@keyframes lvdot{0%{box-shadow:0 0 6px color-mix(in srgb,var(--sb-loss,#F25C5C) 80%,transparent),0 0 0 0 color-mix(in srgb,var(--sb-loss,#F25C5C) 60%,transparent)}100%{box-shadow:0 0 6px color-mix(in srgb,var(--sb-loss,#F25C5C) 80%,transparent),0 0 0 8px color-mix(in srgb,var(--sb-loss,#F25C5C) 0%,transparent)}}@media (prefers-reduced-motion:reduce){.lvdot.on{animation:none}}
.lvsub{font:400 12px var(--body);color:var(--sb-muted)}
.lvsec{margin-top:10px}
.lvsec h3{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;font:700 15px var(--body);color:var(--sb-text);letter-spacing:0;text-transform:none}
.lvsec h3 span{font:400 12px var(--body);color:var(--sb-muted)}
.lvnone{margin:6px 0;font:400 13px var(--body);color:var(--sb-muted)}
.lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:10px}
.lvc{position:relative;background:var(--sb-panel);border-radius:8px;color:var(--sb-text);font-family:var(--body);cursor:pointer}
.lvc:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}

/* the hero card: emblems either side of the big score, the minute under it */
.lvscb{padding:12px 14px;display:grid;gap:10px;min-width:0}
.lvstop{display:flex;align-items:center;justify-content:space-between;min-height:14px;position:relative;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--sb-muted)}
.lvhero{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;text-align:center}
.lvt{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;font:600 13px var(--body);line-height:1.2}
.lvt .lvsn{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;hyphens:auto;-webkit-hyphens:auto}
.lvlg{width:44px;height:44px;object-fit:contain;display:inline-flex;align-items:center;justify-content:center;flex:none}
.lvkit svg{width:100%;height:100%}
/* the two numbers on a line and the clock under them, as a grid so the clock line never widens the score column (Jason 1/11/2026: the team names were squeezed to 41px and cut) */
.lvs{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;padding-top:4px}
.lvbig{font:800 40px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--sb-text)}
/* the sheet's old goals-list rule (.gl) made a scored number a 3-column grid 56px wide, squeezing the team names */
.lvs .lvbig{display:block}
.lvs .lvbig+.lvbig::before{content:"–";margin:0 6px;font-weight:600;color:var(--sb-muted)}
.lvs .lvclk{grid-column:1/-1;text-align:center;margin-top:5px;font:700 12px var(--body);color:var(--sb-accent)}
.lvscb.pre .lvbig{font-size:28px;color:var(--sb-muted)}
.lvscb:is(.pre,.ft,.wait) .lvclk{color:var(--sb-muted);font-weight:500}
.lvrc{display:inline-grid;place-items:center;width:10px;height:14px;border-radius:2px;background:var(--pgl);color:#fff;font:700 9px var(--body);font-style:normal}
.lvflag{font:700 10px var(--body);font-style:normal;letter-spacing:.06em;color:var(--sb-accent)}
.lvtags{display:flex;gap:6px;flex-wrap:wrap}
.lvinc2{display:flex;gap:6px;align-items:baseline;font:400 13px var(--body)}
.lvinc2 small{color:var(--sb-muted);font-size:12px}
.lvinc2 .mu{color:var(--sb-muted)}
.lvsh{display:flex;justify-content:space-between;font:700 12px var(--body);color:var(--sb-muted);margin-bottom:4px}
.lvleg2{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding:4px 0;font:500 13px var(--body)}
.lvleg2 i{width:8px;height:8px;border-radius:50%;background:var(--sb-line)}
.lvleg2.on i,.lvleg2.won i{background:var(--sb-win)}
.lvleg2.off i{background:var(--sb-gold)}
.lvleg2.lost i{background:var(--sb-loss)}
.lvleg2 .lvlt2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvleg2 small{color:var(--sb-muted);font-size:12px;white-space:nowrap}
.lvmb{grid-column:2/4;height:4px;border-radius:2px;background:var(--sb-panel2);overflow:hidden}
.lvmb u{display:block;height:100%;background:var(--sb-accent)}
.lvkey{display:flex;justify-content:space-between;font:700 11px var(--body);margin-bottom:4px}
.lvkey .h{color:var(--kh)}.lvkey .a{color:var(--ka)}
.lvln{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:3px 8px;font:600 12px var(--body);padding:3px 0;font-variant-numeric:tabular-nums}
.lvln small{text-align:center;color:var(--sb-muted);font:400 11px var(--body)}
.lvln b.a{text-align:right}
.lvlb{grid-column:1/-1;display:flex;gap:2px;height:4px;border-radius:2px;overflow:hidden;background:var(--sb-panel2)}
.lvlb i{display:block;height:100%}.lvlb .h{background:var(--kh)}.lvlb .a{background:var(--ka)}
.lvms0{margin:0;font:400 12px var(--body);color:var(--sb-muted)}
.lvsfoot{margin-top:10px;font:600 12px var(--body);color:var(--sb-muted);text-align:right}
.lvsfoot b{color:var(--sb-accent)}

/* a goal: the card washes orange for a few seconds, the scorer's side lights up, the pop says who */
.lvscb.goal{background:color-mix(in srgb,var(--sb-accent) 14%,var(--sb-panel))}
.lvt.hit .lvsn{color:var(--sb-accent)}
.lvt .lvflag.gl{display:none}
.lvgpop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:baseline;gap:6px;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;font:800 13px/1 var(--body);font-style:normal;letter-spacing:.06em;color:var(--sb-on-accent);background:var(--sb-accent);border-radius:999px;padding:5px 12px;animation:lvgoalpop 9s ease-out both}
.lvgpop small{font:700 11px var(--body);letter-spacing:0;text-transform:none;overflow:hidden;text-overflow:ellipsis}

/* the fixture rows: kick-off, the two teams, our call, the chance bar under */
.lvlist{display:grid;gap:6px}
@media (min-width:901px){.lvlist{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}}
.lvr{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:10px 12px}
.lvwhen2{display:flex;flex-direction:column;font:700 15px/1.05 var(--body);font-variant-numeric:tabular-nums}
.lvwhen2 small{font:400 10px var(--body);color:var(--sb-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.lvmatch{display:grid;gap:5px;min-width:0}
.lvtm{display:flex;align-items:center;gap:8px;min-width:0;font:500 14px var(--body)}
.lvtm>b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvr .lvlg{width:20px;height:20px}
.lvsc2{margin-left:auto;font:700 14px var(--body);font-style:normal;font-variant-numeric:tabular-nums}
.lvcomp{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:400 11px var(--body);color:var(--sb-muted)}
.lvright{align-self:center;min-width:0}
.lvr .lvour{grid-column:2/-1;justify-self:end;min-width:0}
.lvr .pgcb{grid-column:2/-1}
/* your bet, our tip and the early-payout chips on a row (lib/live/box.ts lvChips) */
.lvtm [class*="lvch"],.lvcomp [class*="lvch"]{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font:700 10px var(--body);background:var(--sb-panel2);color:var(--sb-text);white-space:nowrap}
.lvtm .you,.lvcomp .you{color:var(--sb-accent)}
.lvtm .won,.lvcomp .won{background:var(--sb-win);color:var(--sb-on-accent)}
.lvtm .lost,.lvcomp .lost{background:var(--sb-loss);color:#fff}
@media (prefers-reduced-motion:reduce){.lvgpop{animation:none}}

/* games on now (Jason 31/10/2026, his pick of ten: "9. Emerald, pop out effect"; 1/11/2026: emerald only for a game you've
   bet on, the others in the Up next tiles' colour, and the same emerald in light mode): the score of a side that has
   scored in yellow, and a goal pops a yellow pill out at the top middle for a few seconds naming the scorer */
:root{--lvem:#0F3D2E;--lvgoal:#FFD60A}
html body:not(.nba) :is(#livebox,#lvnow) .lvc.lvscb.mybet:is(.live,.ht,.wait){background:var(--lvem)!important;background-image:none!important}
.lvbig.gl{color:var(--lvgoal)}
.lvt.hit .lvsn{color:var(--lvgoal)}
/* light mode: runtime/theme.ts would turn the emerald above white, and it leaves rules that name the theme alone, so these
   do: the emerald with dark mode's light text and bars on it, and a deeper yellow on the pale tiles */
html[data-theme=light] body:not(#zz) .lvbig.gl,html[data-theme=light] body:not(#zz) .lvt.hit .lvsn{color:#B88A00!important}
html[data-theme=light] body:not(.nba):not(#zz) :is(#livebox,#lvnow) .lvc.lvscb.mybet:is(.live,.ht,.wait){background:#0F3D2E!important;background-image:none!important;color:#F0F0F2!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) :is(.lvlg2,.lvsh,.lvsh b,.lvsh span,.lvinc2 small,.lvleg2 small,.pgbl span,.lvsfoot,.lvms0){color:#A3A7AE!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) :is(.lvsn,.lvbig,.lvlt2,.lvinc2>span,.pgbl span.on,.lvsfoot b){color:#F0F0F2!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) :is(.lvbig.gl,.lvt.hit .lvsn){color:#FFD60A!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) .lvs .lvbig+.lvbig::before{color:#A3A7AE!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) .lvmb{background:rgba(240,240,242,.18)!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) :is(.lvmb u,.lvmb .lvmt){background:#F0F0F2!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) .lvmb .lvmt::after{color:#F0F0F2!important}
html[data-theme=light] body:not(#zz) .lvc.lvscb.mybet:is(.live,.ht,.wait) .lvmb .lvmn{background:#F0F0F2!important;color:#1A1B1E!important}
.lvgpop{transform:translate(-50%,-50%) scale(0);align-items:center;color:#412402;background:#FFD60A;font:700 13px/1 var(--body);letter-spacing:.12em;padding:5px 14px;animation:lvpop 4s forwards}
.lvgpop small{color:inherit;font:600 12px var(--body)}
.lvc.goal .lvlg2{animation:lvhide 4s forwards}
@keyframes lvpop{0%{transform:translate(-50%,-50%) scale(0);opacity:0;animation-timing-function:cubic-bezier(.2,1.6,.4,1)}12%{transform:translate(-50%,-50%) scale(1.15);opacity:1}18%,86%{transform:translate(-50%,-50%) scale(1);opacity:1;animation-timing-function:ease-in}100%{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes lvhide{0%,88%{opacity:0}100%{opacity:1}}
/* less motion (the phone's setting or the site's own): the pill just shows, still, while the goal flash lasts */
@media (prefers-reduced-motion:reduce){.lvgpop{animation:none!important;transform:translate(-50%,-50%);opacity:1}.lvc.goal .lvlg2{animation:none!important;opacity:0}}
html[data-czm=reduce] .lvgpop{animation:none!important;transform:translate(-50%,-50%);opacity:1}html[data-czm=reduce] .lvc.goal .lvlg2{animation:none!important;opacity:0}


/* a goals bet's bar carries its numbers, as Bet365 (Jason 31/10/2026): the goals so far in a bubble that moves along it,
   the line marked with its number above */
.lvleg2 .lvmb{position:relative;overflow:visible;height:4px;margin:16px 10px 30px;background:color-mix(in srgb,var(--sb-text) 18%,transparent)}
.lvmb u{border-radius:2px;background:var(--sb-text)}
.lvmb .lvmt{position:absolute;top:-4px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--sb-text);font-style:normal}
/* the line's number under the bar, clear of the leg's name and count above it (Jason 1/11/2026: they touched) */
.lvmb .lvmt::after{content:attr(data-l);position:absolute;top:16px;left:50%;transform:translateX(-50%);font:600 11px var(--body);color:var(--sb-text);white-space:nowrap}
.lvmb .lvmn{position:absolute;top:50%;transform:translate(-50%,-50%);min-width:22px;height:18px;padding:0 6px;border-radius:9px;display:grid;place-items:center;background:#F0F0F2;color:#1A1B1E;font:700 12px/1 var(--body);box-sizing:border-box}

/* desktop's live row (Jason 1/11/2026: "keep it the same size as the tile on the bottom row"): a tile with your bets is
   no taller than one with stats; each bet on one line with its state at the right, the goals bar close under it, and
   no "No incidents yet" line */
html body:not(.nba) #lvnow .lvscb{gap:8px}
html body:not(.nba) #lvnow .lvc.mybet .lvinc2:has(.mu){visibility:hidden} /* kept for its room, so the rows still line up */
/* each tile in a row shares the row's lines (Jason 1/11/2026: "every text, bar, shield, scoreline aligned, every single time"):
   the league, the crests and score, the chance bar, the last incident, the bet or the stats, and Match centre each start
   level with the same part of the tiles beside it, whatever each one holds. Desktop's four-a-row grid only: phones hide rows */
@media (min-width:1024px){@supports (grid-template-rows:subgrid){
  html body:not(.nba) #lvnow .lvgrid{row-gap:10px}
  html body:not(.nba) #lvnow .lvgrid>.lvc.lvscb{grid-row:span 6;grid-template-rows:subgrid;row-gap:8px;align-content:start}
  html body:not(.nba) #lvnow .lvgrid>.lvc.lvscb>.lvsfoot{align-self:end}
}}
html body:not(.nba) #lvnow .lvslot.bet .lvsh{margin:0}
html body:not(.nba) #lvnow .lvleg2{padding:1px 0;gap:0 8px}
html body:not(.nba) #lvnow .lvleg2 small{grid-row:1;grid-column:3}
html body:not(.nba) #lvnow .lvleg2 .lvmb{margin:16px 10px 30px}
/* ---- Tips in Graphite (plan PR 23, brief 2e and 2o): the Playbook hero (#pbhero, the sheet's playbookHTML), Today's picks
   (#pkhero, runtime/react/PickTiles.tsx), then in #tips (runtime/react/TipsCards.tsx) the previews, Tip of the day with
   the list under it, and the Banker, Double and Multi cards. No borders: panels on the ground, raised chips, dividers
   between rows only. The one gold moment on the site is the Playbook hero. ---- */

/* the Playbook hero */
#pbhero{min-width:0}
/* the gold lives in --pg custom properties: runtime/theme.ts leaves those alone when it makes the light page, so the wash and the chip keep their colours */
/* no divider lines above or below boxes anywhere on Tips (Jason 29/10/2026): rows sit on their own tile instead */
.pb{--pgwash:#4A3610;--pggold:#F59E0B;--pggold2:#FBBF24;--pgglow:#FBBF24;--pgongold:#1A1B1E;position:relative;border-radius:8px;padding:14px;background:linear-gradient(180deg,var(--pgwash) 0,var(--pgcard) 120px);color:var(--pgink)}
html[data-theme=light] .pb{--pgwash:#F6DFA8;--pgglow:#B45309}
.pbh{display:flex;align-items:center;gap:10px}.pbh h2{margin:0;font:800 22px/1.1 var(--body);letter-spacing:-.01em;color:var(--pgink)}.pbh small{margin-left:auto;font:500 12px/1.35 var(--body);color:var(--pgmut);text-align:right}
.goldchip{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:linear-gradient(135deg,var(--pggold2),var(--pggold));color:var(--pgongold);font:800 11px var(--body);letter-spacing:.04em;text-transform:uppercase}
.pbp{margin:8px 0 0;font:400 13px/1.5 var(--body);color:var(--pgink)}
.pbwait{margin:12px 0 0;padding:12px;border-radius:8px;background:var(--pgband);font:400 13px var(--body);color:var(--pgmut)}.pbwait b{color:var(--pgink);font-size:15px}
.pbbar{display:block;height:6px;margin:10px 0 8px;border-radius:3px;background:var(--pgchip);overflow:hidden}.pbbar i{display:block;height:100%;background:var(--pggold);border-radius:3px}.pbwait small{display:block;font-size:12px}
/* every slip shows, in rows (Jason 29/10/2026: a sideways row hid all but two on a phone) */
.slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin:12px 0 0}
.slip{min-width:0;padding:9px 10px;border:0;border-radius:8px;background:var(--pgbg);color:var(--pgink);text-align:left;cursor:pointer;font-family:var(--body)}
.slip b{display:block;font:700 13px var(--body)}.slip .ch{display:block;font:800 22px/1.15 var(--body);margin-top:2px;font-variant-numeric:tabular-nums}.slip small{display:block;color:color-mix(in srgb,var(--pgmut) 45%,var(--pgink));font:400 11.5px var(--body)}
/* the chosen slip is solid orange (Jason 29/10/2026 evening: no line above it) */
.slip.on{background:var(--sb-accent-fill);color:var(--sb-on-accent)}.slip.on b,.slip.on .ch{color:inherit}.slip.on small{color:inherit;opacity:.8}.slip:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* each slip in its own box with a gold edge, so every price plainly belongs to its slip (Jason 2/11/2026: "create lines or
   make the box more obvious", the one place on Tips with a line, at his ask) */
.pbo{margin-top:12px;padding:10px 12px 12px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--pggold) 60%,transparent);background:color-mix(in srgb,var(--pgbg) 45%,transparent)}
/* a past day's slips with their results (Jason 2/11/2026): a won slip's edge goes green, a lost one red; Won / Lost chips on
   the slip and each leg, in the Tips win and loss colours */
.pbo.won{border-color:var(--pgw)}.pbo.lost{border-color:color-mix(in srgb,var(--pgl) 70%,transparent)}
.pbr{display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 8px;border-radius:999px;background:var(--pgband);color:var(--pgmut);font:700 11px var(--body);vertical-align:2px}
.pbr.won{background:var(--pgw);color:var(--pgonw)}.pbr.lost{background:var(--pgband);color:var(--pgl)}
.slip.won:not(.on) .ch{color:var(--pgw)}.slip.lost:not(.on) .ch{color:var(--pgl)}.pboh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:400 12px var(--body);color:var(--pgmut)}.pboh b{font:700 14px var(--body);color:var(--pgink)}
.pbleg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:4px;padding:9px 10px;border-radius:6px;background:var(--pgbg);font:500 13.5px var(--body);color:var(--pgink)}
.tpsel small .lko{margin-left:6px;white-space:nowrap;color:var(--pgmut);font-weight:600}.tpsel small .lko::before{content:"· "}
.pbleg small{display:block;color:color-mix(in srgb,var(--pgmut) 45%,var(--pgink));font:400 12px var(--body);margin-top:2px}.pbleg .p{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--pgred)}
.pbe{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center}.pbe .fe{display:inline-flex}.pbe svg,.pbe img{width:20px;height:20px}
.pbf{display:flex;gap:10px;align-items:center;margin-top:10px}.pbf>span{font:500 13px var(--body);color:var(--pgmut);font-variant-numeric:tabular-nums}
.pbf .addall{flex:1;height:40px;margin:0;padding:0 14px;border:0;border-radius:8px;background:linear-gradient(135deg,var(--pggold2),var(--pggold));color:var(--pgongold);font:600 13px var(--body);cursor:pointer}
.pbf .addall.on{background:var(--pgband);color:var(--pgink)}.pbf .addall:disabled{opacity:.5;cursor:default}
.rec{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.rec span{font:400 12px var(--body);padding:4px 9px;border-radius:999px;background:var(--pgband);color:var(--pgink)}.rec span b{color:var(--pgglow)}
.rec span.no{color:var(--pgmut);text-decoration:line-through}.rec span.no b{color:inherit}
.pbnone{margin:10px 0 0;font:400 13px/1.45 var(--body);color:var(--pgmut)}
.pbx{margin-top:10px}.pbx summary{cursor:pointer;list-style:none;font:600 12px var(--body);color:var(--pgmut)}.pbx summary::-webkit-details-marker{display:none}.pbx summary::before{content:"▸ "}.pbx[open] summary::before{content:"▾ "}.pbx[open] summary{margin-bottom:6px}
.pb .sttab{width:100%;border-collapse:collapse;font:400 13px var(--body)}.pb .sttab th{text-align:left;font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut);padding:4px 8px}
.pb .sttab td{padding:7px 8px;vertical-align:top}.pb .sttab .stn{font-variant-numeric:tabular-nums;white-space:nowrap}
.pb tr.stgood td:first-child b{color:var(--pgw)}.pb tr.stbad td:first-child b{color:var(--pgl)}.pb .stsum{margin:8px 0 0;font:400 13px/1.5 var(--body)}.pb .stw{overflow-x:auto}

/* Today's picks: the three tiles */
html body .pkhero{display:block!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html body .pkhero .pkbar{display:flex!important;align-items:baseline;gap:6px 8px;flex-wrap:wrap;margin:0 0 8px;font:400 12px var(--body);letter-spacing:0;text-transform:none;color:var(--pgmut)}
.pkbar b{font:700 15px var(--body);color:var(--pgink);letter-spacing:0;text-transform:none}.pkbar small{font:400 12px var(--body);color:var(--pgmut)}
.pkbar #pkupd{margin-left:auto;font:400 11px var(--body);color:var(--pgmut)}.pkbar .stamp{flex-basis:100%;margin:0;font:400 11px var(--body);letter-spacing:0;text-transform:none;color:var(--pgmut)}
.tdsc{display:none;flex-basis:100%;margin:2px 0 0;font:400 11px/1.4 var(--body);color:var(--pgmut)}html:not(.mdin) .tdsc{display:block}
.pkrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
#pkrow .pkx{--c:var(--pgred);position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border:0;border-radius:8px;background:var(--pgcard);box-shadow:none}
#pkrow .pxh{display:flex;align-items:flex-start;gap:6px;min-width:0}
#pkrow .pxn{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}#pkrow .pxn b{font:700 11px var(--body);color:var(--pgmut);text-transform:uppercase;letter-spacing:.05em}#pkrow .pxn small{font:400 11px var(--body);color:var(--pgmut);white-space:normal}
#pkrow .pkrf{flex:none;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:0;border-radius:999px;background:var(--pgband);color:var(--pgmut);font:600 11px var(--body);cursor:pointer}
#pkrow .pkrf svg{width:12px;height:12px}#pkrow .pkrf:disabled{opacity:.5;cursor:default}#pkrow .pkrf:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
#pkrow .tdsc{margin:0;flex:none}
/* the "refresh for the next" hints: phones only, the only place with a refresh button (Jason 2/11/2026) */
@media (min-width:761px){.pkhero .pkph{display:none}}
/* up to four picks a column (Jason 2/11/2026 "give each 3 to 4... a proper border and table to separate each pick, same colour
   for each border, nothing too bright"): the column and each pick boxed in one soft line, a line between legs */
#pkrow{--pkline:color-mix(in srgb,var(--pgmut) 30%,transparent)}
html body #pkrow .pkx{border:1px solid var(--pkline)}
#pkrow .pxb{display:flex;flex-direction:column;min-width:0;border:1px solid var(--pkline);border-radius:8px}
#pkrow .pxs{padding:7px 10px;font:400 11px var(--body);color:var(--pgmut)}
#pkrow .pxb .pxl{gap:0;flex:none}#pkrow .pxb .pxl li{padding:7px 10px;border-top:1px solid var(--pkline)}
#pkrow .pxb .pxf{padding:8px 10px;margin:0;border-top:1px solid var(--pkline)}
#pkrow .pxl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}#pkrow .pxl li{display:flex;align-items:center;gap:6px;min-width:0;padding:0}
#pkrow .pxm{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}#pkrow .pxm b{font:600 13px var(--body);color:var(--pgink);overflow-wrap:anywhere}#pkrow .pxm small{font:400 11px var(--body);color:var(--pgmut);overflow-wrap:anywhere}
#pkrow .pxp{flex:none;font:800 14px var(--body);color:var(--pgink);font-variant-numeric:tabular-nums;font-style:normal}
#pkrow .pxl .pkla{width:22px;height:22px}#pkrow .pxl .pkadd .addmenu{top:calc(100% + 6px);bottom:auto;right:-8px;left:auto}
#pkrow .pxf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px;margin-top:auto}
#pkrow .pxo,#pkrow .pxc{display:flex;flex-direction:column;gap:1px;line-height:1.1}#pkrow .pxf small{font:400 10px var(--body);color:var(--pgmut);letter-spacing:0;text-transform:none}
#pkrow .pxo b{font:800 18px var(--body);color:var(--pgink);font-variant-numeric:tabular-nums}#pkrow .pxc b{font:700 13px var(--body);color:var(--pgred);font-variant-numeric:tabular-nums}#pkrow .pxbar{display:none}
#pkrow .pxf .pkadd{margin-left:auto}#pkrow .pkx .pkadd .addall{margin:0;height:28px;padding:0 10px!important;border:0;border-radius:999px;background:var(--pgband);color:var(--pgink);font:600 12px var(--body)!important}
#pkrow .pkx .pkadd .addall.on{background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E)}
#pkrow .pxe{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:6px 0}#pkrow .pxe b{font:600 13px var(--body);color:var(--pgink)}#pkrow .pxe p{margin:0;font:400 12px/1.45 var(--body);color:var(--pgmut)}
.pkempty{grid-column:1/-1;padding:16px;border-radius:8px;background:var(--pgcard);color:var(--pgmut);font:400 13px var(--body)}
/* phones: the three tiles stacked (Jason 29/10/2026) */
@media (max-width:760px){.pkrow{grid-template-columns:1fr}}

/* the sections in #tips: a heading line, then a panel */
#tips .tps{display:block;min-width:0;margin:0 0 12px}
.tph{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 8px;padding-left:2px;font:700 16px var(--body);color:var(--pgink);letter-spacing:0;text-transform:none}
#tips .tps:first-child .tph:first-child{margin-top:0}.tph small{font:400 12px var(--body);color:var(--pgmut);text-align:right}
/* Tip of the day (Jason 29/10/2026 evening): the record at the top right of the heading line, its table dropping down from there */
.tph>h3{margin:0;font:inherit;color:inherit}html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec{margin:0;position:relative;white-space:nowrap}
:is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trecb{position:absolute;right:0;top:calc(100% + 6px);z-index:6;width:min(340px,calc(100vw - 32px));margin:0;background:var(--pgband)}
html body #tips .tpcard{--neon:var(--pgink);--neon2:var(--pgmut);--tile:var(--pgcard);--tline:var(--pgrule);--glow:none;background:var(--pgcard);border:0;border-radius:8px;padding:14px;box-shadow:none;color:var(--pgink)}
html body #tips .tpcard::before,html body #tips .tpcard::after{display:none}
#tips .tpcard .cap{margin:0 0 8px;font:400 12px/1.45 var(--body);color:var(--pgmut)}
/* bet cards inside (the sheet's betHTML markup) */
#tips .tpcard .bet{gap:8px}#tips .tpcard .btitle{font:700 14px var(--body);text-transform:none;color:var(--pgink);font-style:normal}#tips .tpcard .btitle .bko{font-size:12px;color:var(--pgmut)}
#tips .tpcard .leg{grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;margin-top:4px;padding:7px 10px;border-radius:6px;background:var(--pgbg)}
#tips .tpcard .leg .sel{font:600 13px/1.3 var(--body);text-transform:none;color:var(--pgink)}#tips .tpcard .leg .mt{font:400 12px var(--body);color:var(--pgmut)}
#tips .tpcard .leg .pr{font:800 14px var(--body);font-style:normal;color:var(--pgink);padding:0;border:0;background:none;font-variant-numeric:tabular-nums}
#tips .tpcard .leg .flag{width:28px;height:28px}#tips .tpcard .leg .flag.txt{font:700 10px var(--body);color:var(--pgmut)}
#tips .tpcard .betfoot{padding:8px 10px;border:0;border-radius:8px;background:var(--pgband);box-shadow:none}
#tips .tpcard .betfoot .ol{font:400 11px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--pgmut);font-style:normal}#tips .tpcard .betfoot .odds{font:800 24px/1.1 var(--body);font-style:normal;color:var(--pgink);text-shadow:none}
#tips .tpcard .betfoot .meta{font:400 12px var(--body);color:var(--pgmut)}#tips .tpcard .betfoot .meta b{font:700 14px var(--body);color:var(--pgink)}
#tips .tpcard .why{margin:0;padding-left:10px;border-left:2px solid var(--pgchip);font:400 13px/1.45 var(--body);color:var(--pgmut)}
#tips .tpcard .mstyle{align-self:flex-start;padding:2px 8px;border:0;border-radius:999px;background:var(--pgband);color:var(--pgmut);font:700 10px var(--body);letter-spacing:.06em;text-transform:uppercase}
#tips .tpcard .multigrid .bet+.bet{margin-top:10px}
#tips .tpcard .addall,#tips .tpcard .addlad{border:0;border-radius:999px;background:var(--pgband);color:var(--pgink);font:600 12px var(--body)}#tips .tpcard .addall.on,#tips .tpcard .addlad.on{background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E)}
/* Tip of the day: the hero card */
.tpline{font:400 12px var(--body);color:var(--pgmut)}
.tpteams{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font:700 15px var(--body);color:var(--pgink)}
.tpteams span{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-align:center;min-width:0}.tpteams i{font:600 14px var(--body);color:var(--pgmut);font-style:normal}
.tpteams .fe{display:inline-flex;margin:0}.tpteams .fe svg,.tpteams .fe img{width:40px;height:40px}
.tppick{display:flex;align-items:center;gap:8px;margin-top:12px}.tppick>b{margin-left:auto;font:800 20px var(--body);color:var(--pgink);font-variant-numeric:tabular-nums}
.tpbar{height:8px;border-radius:4px;background:var(--pgchip);overflow:hidden;margin-top:10px}.tpbar i{display:block;height:100%;background:var(--sb-accent-fill);border-radius:4px}
#tips .kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0 0;font:400 13px var(--body);color:var(--pgmut)}#tips .kv b{color:var(--pgink);font-weight:600;text-align:right}
.tpbtns{display:flex;gap:8px;margin-top:12px;align-items:center;justify-content:flex-end} /* + Add bottom right (Jason 2/11/2026) */.tpbtns .ycbtn{flex:1}
.tpbtns .addlad{height:40px;padding:0 14px;border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);font:600 13px var(--body);cursor:pointer}
/* the rest of the list */
.tplist{display:grid;gap:4px;margin-top:8px;background:var(--pgcard);border-radius:8px;padding:8px}
.tprow{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;align-items:center;padding:9px 10px;border-radius:6px;background:var(--pgbg)}
.tpsel{min-width:0}.tpsel>b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:600 13px var(--body);color:var(--pgink)}
.tpsel small{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font:400 12px var(--body);color:var(--pgmut);margin-top:3px}.tpsel .fe{display:inline-flex;margin:0}.tpsel .fe svg,.tpsel .fe img{width:16px;height:16px}
.tpsel .tpwhy{display:block;font-size:11px}.tprow .addlad{height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--pgband);color:var(--pgink);font:600 11px var(--body)}.tprow .addlad.on{background:var(--sb-accent-fill);color:var(--sb-on-accent,#1A1B1E)}
/* the chance and price at the top right, + Add at the bottom right of each pick: phones since 30/10/2026, every screen since
   2/11/2026 (Jason: "move all the + Add button to the bottom right") */
#tips .tprow{grid-template-columns:minmax(0,1fr) auto auto;grid-auto-flow:row;row-gap:6px}#tips .tprow>.tpsel{grid-row:1/3;grid-column:1}
#tips .tprow>.tpch{grid-row:1;grid-column:2;align-self:start}#tips .tprow>.tppr{grid-row:1;grid-column:3;align-self:start}#tips .tprow>.addlad{grid-row:2;grid-column:2/4;justify-self:end;align-self:end}
.tpch{font:700 13px var(--body);color:var(--pgred);font-variant-numeric:tabular-nums}.tppr{font:800 14px var(--body);color:var(--pgink);font-variant-numeric:tabular-nums}
.tphot{display:inline-block;padding:1px 6px;border-radius:999px;background:var(--pgband);color:var(--pgred);font:700 10px var(--body)}
#tips .pill2{font:700 10px var(--body);text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:999px;background:var(--pgband);color:var(--pgmut)}
#tips .pill2.won,#tips .pill2.top{background:var(--pgw);color:var(--pgonw)}#tips .pill2.lost{background:var(--pgband);color:var(--pgl)}
/* the Tips record */
html body :is(#tips,#pbhero,#pkhero) .trec{margin-top:10px;font:600 13px var(--body);font-style:normal;text-transform:none;letter-spacing:0;color:var(--pgmut)}:is(#tips,#pbhero,#pkhero) .trec b{color:var(--pgink);font-size:14px}
:is(#tips,#pbhero,#pkhero) .trecb{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--pgcard)}:is(#tips,#pbhero,#pkhero) .trecb .lex th,:is(#tips,#pbhero,#pkhero) .trecb .lex td{font:400 12px var(--body);color:var(--pgmut)}:is(#tips,#pbhero,#pkhero) .trecb .lex th[scope=row]{color:var(--pgink)}
:is(#tips,#pbhero,#pkhero) .trecb .lex td.pos{color:var(--pgw)}:is(#tips,#pbhero,#pkhero) .trecb .lex td.neg{color:var(--pgl)}:is(#tips,#pbhero,#pkhero) .trecb small{font:400 11px var(--body);color:var(--pgmut)}
/* match previews */
#tips .tpcard .pvi{font:400 13px/1.55 var(--body);color:var(--pgink)}#tips .tpcard .pvs{font:400 11px var(--body);color:var(--pgmut)}
#tips .tpcard .pv{border:0;border-radius:8px;background:var(--pgband)}#tips .tpcard .pv>summary{padding:10px 12px}#tips .tpcard .pv>summary::after{color:var(--pgmut)}
#tips .tpcard .pvtime{border-right:0;width:56px}#tips .tpcard .pvtime b{font:700 13px var(--body);color:var(--pgink)}#tips .tpcard .pvtime small{font:400 11px var(--body);color:var(--pgmut)}
#tips .tpcard .pvt b{font:700 14px var(--body);color:var(--pgink)}#tips .tpcard .pvt small{font:400 11px var(--body);color:var(--pgmut)}#tips .tpcard .pvt em{font:400 13px/1.45 var(--body);color:var(--pgmut)}
#tips .tpcard .pvpk{font:600 13px var(--body);color:var(--pgink)}#tips .tpcard .pvo{font:600 13px var(--body);color:var(--pgink)}#tips .tpcard .pvo.na{color:var(--pgmut)}#tips .tpcard .pvp{font:500 12px var(--body);color:var(--pgred);background:none;padding:0}
#tips .tpcard .pvc{border:0;padding:0;font:400 12px var(--body);letter-spacing:0;text-transform:none;color:var(--pgmut);background:none}
#tips .tpcard .pv2t{border:0;padding:0;color:var(--pgmut)}
#tips .tpcard .pvb{font:400 13px/1.55 var(--body);color:var(--pgink)}#tips .tpcard .pvb li::marker{color:var(--pgmut)}#tips .tpcard .pvlean{border-left:2px solid var(--pgred);background:var(--pgchip);border-radius:0 8px 8px 0}#tips .tpcard .pvlean b{color:var(--pgred)}
#tips .tpcard .pvsum{margin-top:10px}#tips .tpcard .pvsum>summary{cursor:pointer;font:600 12px var(--body);color:var(--pgmut)}#tips .tpcard .pvtw{overflow-x:auto;margin-top:6px}
#tips .tpcard .pvsum table{font:400 12px var(--body);color:var(--pgink)}#tips .tpcard .pvsum th{font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut)}#tips .tpcard .pvsum td{padding-top:5px}
.tpmore{display:block;width:100%;margin-top:8px;height:36px;border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);font:600 13px var(--body);cursor:pointer}.tpmore:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* the Banker, Double and Multi lists show for today as well (Jason 29/10/2026: "hardly any predictions"): the tiles hold the first picks, the lists every pick with its odds */
/* the empty message */
#tips .tempty{padding:14px;border-radius:8px;background:var(--pgcard);font:400 13px/1.45 var(--body);color:var(--pgmut);border:0}
@media (min-width:901px){#pbhero,#pkhero,#tips .tps,#tips .tempty{max-width:760px}}
/* the Tip of the day card at half its size (Jason 30/10/2026) */
html body #tips .tphero{padding:10px 12px}
#tips .tphero .tpline{font-size:11px}
#tips .tphero .tpteams{margin-top:4px;font-size:13px}#tips .tphero .tpteams span{flex-direction:row;justify-content:center;gap:6px}
#tips .tphero .tpteams .fe svg,#tips .tphero .tpteams .fe img{width:22px;height:22px}
#tips .tphero .tppick{margin-top:6px}#tips .tphero .tppick>b{font-size:17px}
#tips .tphero .tpbar{height:6px;margin-top:6px}
#tips .tphero .kv{padding-top:3px;font-size:12px}
#tips .tphero .why{margin-top:4px;font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#tips .tphero .tpbtns{margin-top:8px}#tips .tphero .tpbtns .ycbtn{height:34px;font-size:13px}#tips .tphero .tpbtns .addlad{height:34px}
/* the Tips record, made to stand out (Jason 30/10/2026: "make it flashy"): a gold to orange pill that glows, with a sweep of light */
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;list-style:none;cursor:pointer;
  font:800 12.5px var(--body);letter-spacing:.01em;
}
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary::-webkit-details-marker{display:none}
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary::before{content:"";width:14px;height:14px;flex:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v4a5 5 0 0 1-10 0zM5 4H3v2a3 3 0 0 0 3 3M19 4h2v2a3 3 0 0 1-3 3M12 12v4M8 21h8M9 17h6v4H9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v4a5 5 0 0 1-10 0zM5 4H3v2a3 3 0 0 0 3 3M19 4h2v2a3 3 0 0 1-3 3M12 12v4M8 21h8M9 17h6v4H9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary b{font-size:13.5px}
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary::after{content:"";position:absolute;inset:0}
/* half size for real: the card keeps the game, the pick and price, the chance and the buttons; the 30-day line and the write-up go */
#tips .tphero .kv+.kv,#tips .tphero .why{display:none}
/* the record pill alone, no ring round it */
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec{border:0;background:none;box-shadow:none;padding:0;outline:0}
/* tighter still, to about half the old card */
html body #tips .tphero{padding:8px 10px}
#tips .tphero .tpteams{margin-top:2px}#tips .tphero .tppick{margin-top:4px}#tips .tphero .tpbar{margin-top:5px;height:5px}
#tips .tphero .kv{padding-top:2px}#tips .tphero .tpbtns{margin-top:6px}
#tips .tphero .tpbtns .ycbtn,#tips .tphero .tpbtns .addlad{height:30px}
#tips .tphero .tppick .pgtag{padding:2px 8px;font-size:11px}
/* the Tips record, edges blending into the page (Jason 30/10/2026: "not a pill shape, a fading look") */
html body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary{border-radius:12px;padding:8px 22px;box-shadow:none;
  -webkit-mask-image:radial-gradient(ellipse 100% 140% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 100% 140% at 50% 50%,#000 58%,transparent 100%)}
/* the Tips record as fire (Jason 30/10/2026): no pill, just a top and a bottom line that flicker and burn out at both ends; same colours in light and dark */
html:not([data-theme=x]) body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary{overflow:visible;padding:7px 20px;border-radius:0;background:none;box-shadow:none;color:var(--pgink);-webkit-mask-image:none;mask-image:none}
html:not([data-theme=x]) body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary b{background:linear-gradient(90deg,var(--sb-gold,#F59E0B),#FF7A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
html:not([data-theme=x]) body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary::before{background:linear-gradient(180deg,var(--sb-gold,#F59E0B),#FF7A3D)}
html:not([data-theme=x]) body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary::after{inset:0;transform:none;pointer-events:none;
  background:linear-gradient(90deg,#FF7A3D,var(--sb-gold,#F59E0B),#FF3D00,#FFB000,#FF7A3D) 0 0/200% 2px repeat-x,linear-gradient(90deg,#FF3D00,#FFB000,#FF7A3D,var(--sb-gold,#F59E0B),#FF3D00) 0 100%/200% 2px repeat-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
  filter:drop-shadow(0 0 3px rgba(255,140,0,.85))}
@media (prefers-reduced-motion:no-preference){html:not([data-theme=x]) body :is(#tips .tph,#pbhero .pbh,#pkhero .pkbar) .trec>summary::after{animation:trec-fire 2.6s linear infinite}}
@keyframes trec-fire{0%{background-position:0 0,0 100%;opacity:.85}50%{opacity:1}100%{background-position:200% 0,-200% 100%;opacity:.85}}
/* Today's picks: the tile names in the accent */
#pkrow .pxn b{color:var(--sb-accent)}
/* match previews: the analysis as bullets, and an arrow at the bottom right that folds the preview back up */
#tips .pvcase ul{margin:0;padding-left:18px;display:grid;gap:4px}
#tips .pvup{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:8px 0 0 auto;border:0;border-radius:50%;background:var(--sb-accent-fill);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#tips .pvup svg{width:18px;height:18px}
#tips .pvup:focus-visible{outline:2px solid var(--sb-focus);outline-offset:2px}
/* a record on every Tips tab (Jason 30/10/2026): beside the count in Match previews, after the Playbook's line and Today's picks' Updated */
#tips .tph>.tphs{margin-left:auto}#pbhero .pbh>.pbrec,#pkhero .pkbar>#pkrec{flex:none}
/* phones: the record stays on the title row, as TOTD's does, and the count or "refresh for the next" drops below */
@media (max-width:520px){#tips .tph:has(>.tphs){flex-wrap:wrap}#tips .tph>.tphs{order:3;flex-basis:100%;margin-left:0;text-align:left}#tips .tph:has(>.tphs)>.trec{margin-left:auto}
  #pkhero .pkbar>#pkrec{order:1;margin-left:auto}#pkhero .pkbar>small{order:2;flex-basis:50%}#pkhero .pkbar>#pkupd{order:3}#pkhero .pkbar>.tdsc{order:4}}
/* the tile's "1/4" (Jason 30/10/2026: it spilled out of its round button): the button grows with its count */
html body #pkrow .pkrf{width:auto;min-width:24px;white-space:nowrap}
/* Playbook: the slip's total odds, big, on the returns line beside Add bet (Jason 31/10/2026) */
#pbhero .pbret{display:flex;align-items:center;gap:12px;margin-left:auto}
#pbhero .pbodd{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
#pbhero .pbodd small{font:600 10px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--pgmut)}
#pbhero .pbodd b{font:800 26px var(--body);color:var(--pgink);font-variant-numeric:tabular-nums}
/* ---- Bet in Graphite (plan PR 24, brief 2e): the tracker (#bt, runtime/react/BetTracker.tsx) as a clean ledger with the
   profit as its hero, the Ladder card (#tips .tcard.ladder, the sheet's ladderHTML and renderTk), Side bets (#sb, the
   sheet's renderSB) and the stats and graph pop-ups. No borders: panels on the ground, raised chips, dividers between
   rows only. The colours are the --pg tokens (runtime/tokens.css), which carry their own light values, so light mode
   needs no rewriting here. Money: wins in the Ink green, losses in the seal red, riding money gold (the Tips record
   uses the same three), the one orange for actions and the Ladder's rungs. The bet slip and the tickets keep the white
   paper Jason picked (14 and 18 Oct); only a ticket's header turns graphite. ---- */
:root{--num:"Roboto Condensed",Roboto,system-ui,sans-serif;--pgpaper:#1A1B1E;--pgpaperink:#F0F0F2}

/* ---------- the tracker ----------
   Its page is back to how it was while Jason used it, 5 to 26 Oct (Jason 31/10/2026): the old rules in runtime/site.css.
   Only its forms and pop-ups keep this file's look. */
/* every form in the tracker and in Side bets: a raised panel, fields on the card step */
html body:not(.nba) :is(#bt,#sb) :is(.btform,.btfix,.btco,.btcf,.btcop,.btov,.btedit,.sbed,.btsearch){border:0;border-radius:8px;background:var(--pgband);box-shadow:none;padding:10px}
html body:not(.nba) #bt .btedit .btform{padding:0;background:none}
html body:not(.nba) :is(#bt,#sb) :is(.btform,.btfix,.btco,.btcf,.btov,.sbed,.btsearch) label{font:600 10.5px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--pgmut)}
html body:not(.nba) :is(#bt,#sb) :is(.btform,.btfix,.btco,.btcf,.btov,.sbed,.btsearch) :is(input,select){border:0;border-radius:8px;background:var(--pgcard);color:var(--pgink);font:600 14px var(--body);padding:7px 9px;color-scheme:dark}
html[data-theme=light] body:not(.nba) :is(#bt,#sb) :is(.btform,.btfix,.btco,.btcf,.btov,.sbed,.btsearch) :is(input,select){color-scheme:light}
html body:not(.nba) :is(#bt,#sb) :is(.btform,.btfix,.btco,.btcf,.btov,.sbed,.btsearch) :is(input,select):focus-visible{outline:2px solid var(--sb-focus);outline-offset:1px}
html body:not(.nba) :is(#bt,#sb) :is(.btform,.btfix,.btco,.btcf,.btov,.sbed) :is(p,small,.btfh,.btcoh){font:400 12px/1.45 var(--body);color:var(--pgmut);letter-spacing:0;text-transform:none}
html body:not(.nba) #bt .btfb{display:flex;flex-wrap:wrap;gap:6px}
html body:not(.nba) #bt .btcod b{font:600 13px var(--body);color:var(--pgink)}html body:not(.nba) #bt .btcod small{display:block;font:400 11.5px var(--body);color:var(--pgmut)}
html body:not(.nba) #bt .btq button{height:28px;padding:0 9px;border:0;border-radius:999px;background:var(--pgcard);color:var(--pgmut);font:600 11.5px var(--num)}

/* the Stats and Profit graph pop-ups */
html body:not(.nba) #bt .btmodal{background:rgba(0,0,0,.6)}
html body:not(.nba) #bt .btmin{padding:14px;border:0;border-radius:12px;background:var(--pgbg);color:var(--pgink);box-shadow:0 24px 70px rgba(0,0,0,.5);gap:10px}
html body:not(.nba) #bt .btmin .btdh b{font:700 16px var(--body);letter-spacing:0;text-transform:none;color:var(--pgink)}html body:not(.nba) #bt .btmin .btdh b span{color:inherit}
html body:not(.nba) #bt .bsr{display:flex;flex-wrap:wrap;gap:6px}
html body:not(.nba) #bt .gstats{gap:8px}html body:not(.nba) #bt .gstats>div{padding:10px 12px;border:0;border-radius:8px;background:var(--pgcard);box-shadow:none}
html body:not(.nba) #bt .gstats span{font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut)}
html body:not(.nba) #bt .gstats b{font:800 20px/1.1 var(--num);font-variant-numeric:tabular-nums;color:var(--pgink)}
html body:not(.nba) #bt .gstats small{font:400 11.5px var(--body);color:var(--pgmut)}
html body:not(.nba) #bt .bst h6{margin:10px 0 4px;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut)}
html body:not(.nba) #bt .bstw{padding:4px 10px;border-radius:8px;background:var(--pgcard);overflow-x:auto}
html body:not(.nba) #bt .lex{font-family:var(--num);font-size:12.5px;color:var(--pgink)}
html body:not(.nba) #bt .lex th{font:700 10.5px var(--body);letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #bt .lex td{border-top:0;color:var(--pgink)}html body:not(.nba) #bt .lex th[scope=row]{font:600 12.5px var(--body);color:var(--pgink)}
html body:not(.nba) #bt .lex td.pos{color:var(--pgw)}html body:not(.nba) #bt .lex td.neg{color:var(--pgl)}
html body:not(.nba) #bt .gwrap{padding:4px 0}
html body:not(.nba) #bt .btsvg text{fill:var(--pgmut);font:500 11px var(--num)}
html body:not(.nba) #bt .btsvg .gg{stroke:var(--pgrule)}html body:not(.nba) #bt .btsvg .g0{stroke:var(--pgmut)}
html body:not(.nba) #bt .btsvg .gbar{stroke:none;opacity:.6}html body:not(.nba) #bt .btsvg .gbar.up{fill:var(--pgw)}html body:not(.nba) #bt .btsvg .gbar.dn{fill:var(--pgl)}
html body:not(.nba) #bt .btsvg .gl3{stroke:var(--pgred);filter:none}html body:not(.nba) #bt .btsvg .ga3{opacity:1}
html body:not(.nba) #bt .btsvg .gp3{stroke:var(--pgbg);stroke-width:2;filter:none}html body:not(.nba) #bt .btsvg .gp3.up{fill:var(--pgw)}html body:not(.nba) #bt .btsvg .gp3.dn{fill:var(--pgl)}
html body:not(.nba) #bt .btsvg .gring{fill:none;stroke:var(--pgred);stroke-width:2}
html body:not(.nba) #bt .btsvg .gend{fill:var(--pgink);font:700 13px var(--num)}
html body:not(.nba) #bt .btsvg .gx{stroke:var(--pgmut)}
html body:not(.nba) #bt .gtip{border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);box-shadow:none;font-family:var(--body)}html body:not(.nba) #bt .gtip b{color:var(--pgink)}
html body:not(.nba) #bt .gtab summary{cursor:pointer;font:600 12.5px var(--body);color:var(--pgmut)}

/* ---------- the Ladder card ---------- */
/* the Ladder card: on the graphite card like the rest (Jason 29/10/2026 evening: the light orange was too bright) */
html body:not(.nba) #tips .tcard.ladder.lc2{--neon:var(--pgred);--neon2:var(--pgmut);--tline:var(--pgrule);--tile:var(--pgcard);--glow:none;--gold:var(--pggold);--ink:var(--sb-on-accent);
  background:var(--pgcard);background-image:none;border:0;box-shadow:none;border-radius:8px;color:var(--pgink);font-family:var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 *{text-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2::before,html body:not(.nba) #tips .tcard.ladder.lc2::after{display:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lhead>h3{font-family:var(--body);font-weight:700;font-style:normal;letter-spacing:0;text-transform:none;color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lhead>h3 span{color:inherit}
html body:not(.nba) #tips .tcard.ladder.lc2 .lhead>h3 .ico{display:none}
/* the rungs: ten flat steps, the ones climbed orange, today's half lit, take-out days with a gold line under */
html body:not(.nba) #tips .tcard.ladder.lc2 .rung i{border-radius:2px;background:var(--pgchip);transform:none;box-shadow:none;outline:0}
html body:not(.nba) #tips .tcard.ladder.lc2 .rung i.on{background:var(--sb-accent-fill)}
html body:not(.nba) #tips .tcard.ladder.lc2 .rung i.now{background:color-mix(in srgb,var(--pgred) 45%,var(--pgchip))}
html body:not(.nba) #tips .tcard.ladder.lc2 .rung i.sp{box-shadow:inset 0 -3px 0 var(--pggold)}
/* the streak rank chip goes (ranks and the leaderboard come out for good in PR 24a) */
html body:not(.nba) #tips .tcard.ladder.lc2 .lrank{display:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lsub{border-top:0;font-family:var(--body);font-weight:700;font-style:normal;text-transform:uppercase;color:var(--pgmut)}
/* choosing the day's pick: chips on the ground, the chosen one raised */
html body:not(.nba) #tips .tcard.ladder.lc2 .lpick{padding:0;border:0;background:none;box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lpkt{font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut);font-style:normal}
html body:not(.nba) #tips .tcard.ladder.lc2 .lpkmore{border:0;background:none;color:var(--pgred);font:600 12px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lchip{border:0;border-radius:8px;background:var(--pgbg);color:var(--pgmut);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lchip.on{background:var(--pgband);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lchip b{color:inherit}html body:not(.nba) #tips .tcard.ladder.lc2 .lchip small{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lck{border:0;background:var(--pgchip);color:var(--pgink)}html body:not(.nba) #tips .tcard.ladder.lc2 .lchip.on .lck{background:var(--sb-accent-fill);color:var(--sb-on-accent)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lopt{border:0;border-radius:8px;background:var(--pgbg);color:var(--pgink);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lopt.on{background:var(--pgband)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lokind{background:var(--pgchip);color:var(--pgink);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lochk{background:var(--sb-accent-fill);color:var(--sb-on-accent)}
html body:not(.nba) #tips .tcard.ladder.lc2 .locap{color:var(--pgmut);font:400 12.5px/1.45 var(--body)}
/* the pick itself (the sheet's betHTML), as on the Tips tab */
html body:not(.nba) #tips .tcard.ladder.lc2 .bet{gap:8px}
html body:not(.nba) #tips .tcard.ladder.lc2 .btitle{font:700 14px var(--body);text-transform:none;font-style:normal;color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .btitle .bko{font-size:12px;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .leg{grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;margin-top:4px;padding:7px 10px;border-radius:6px;background:var(--pgbg)}
html body:not(.nba) #tips .tcard.ladder.lc2 .leg .sel{font:600 13px/1.3 var(--body);text-transform:none;color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .leg .mt{font:400 12px var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .leg .pr{font:800 14px var(--num);font-style:normal;color:var(--pgink);padding:0;border:0;background:none;font-variant-numeric:tabular-nums}
html body:not(.nba) #tips .tcard.ladder.lc2 .leg .flag{width:28px;height:28px}
html body:not(.nba) #tips .tcard.ladder.lc2 .leg .flag.txt{font:700 10px var(--body);color:var(--pgmut);background:var(--pgband)}
html body:not(.nba) #tips .tcard.ladder.lc2 .betfoot{padding:8px 10px;border:0;border-radius:8px;background:var(--pgband);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .betfoot .ol{font:400 11px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--pgmut);font-style:normal}
html body:not(.nba) #tips .tcard.ladder.lc2 .betfoot .odds{font:800 24px/1.1 var(--num);font-style:normal;color:var(--pgink);text-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .betfoot .meta{font:400 12px var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .betfoot .meta b{font:700 14px var(--num);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .why{margin:0;padding-left:10px;border-left:2px solid var(--pgchip);font:400 13px/1.45 var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lstats div{border:0;border-radius:8px;background:var(--pgband)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lstats span{font-family:var(--body);font-weight:700;letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lstats b{font-family:var(--num);font-weight:800;color:var(--pgink);font-variant-numeric:tabular-nums}
html body:not(.nba) #tips .tcard.ladder.lc2 .lplan{padding:10px 12px;border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);font:400 13px/1.45 var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lplan b{color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lplacedd{border:0;border-radius:8px;background:var(--pgband);padding:8px 10px}
html body:not(.nba) #tips .tcard.ladder.lc2 .lplacedd summary{cursor:pointer;font:600 13px var(--body);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lplacedd summary small{display:block;font:400 12px var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 :is(.tempty,.lonote2){border:0;border-radius:8px;background:var(--pgband);color:var(--pgmut);font:400 13px/1.45 var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .twarn{border:0;border-radius:8px;background:var(--pgband);color:var(--pggold);font:400 12.5px/1.45 var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .laddx{color:var(--pgmut);font:400 12px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 :is(.laddrm,.laddclr){border:0;border-radius:999px;background:var(--pgband);color:var(--pgink);font:600 11.5px var(--body);padding:4px 10px}
/* Your run: the day's stake, odds and what came back, Submit on the orange, the plan under */
html body:not(.nba) #tips .tcard.ladder.lc2 .trk{border:0;border-radius:8px;background:var(--pgbg)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ttog .tt{font:700 14px var(--body);text-transform:none;font-style:normal;color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ttog .chev{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ttog .tday{border:0;border-radius:999px;background:var(--pgband);color:var(--pgink);font:700 11px var(--body);letter-spacing:.04em}
html body:not(.nba) #tips .tcard.ladder.lc2 .ttog .tday i{color:var(--pggold)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ttog .tout{color:var(--pgmut);font:400 12.5px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ttog .tout b{color:var(--pgink);font-family:var(--num);font-weight:700}
html body:not(.nba) #tips .tcard.ladder.lc2 .tf>span:first-child{font:600 10px var(--body);letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tin{border:0;border-radius:8px;background:var(--pgcard);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .tin:focus-within{outline:2px solid var(--sb-focus);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .tin em{color:var(--pgmut);font-weight:600}
html body:not(.nba) #tips .tcard.ladder.lc2 .trk .tin input[type=number]{font:700 17px var(--num);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .trk input[type=number]{border:0;border-radius:8px;background:var(--pgcard);color:var(--pgink);font:600 13px var(--num);color-scheme:dark}
html[data-theme=light] body:not(.nba) #tips .tcard.ladder.lc2 .trk input[type=number]{color-scheme:light}
html body:not(.nba) #tips .tcard.ladder.lc2 .trk input[type=number]:focus-visible{outline:2px solid var(--sb-focus);outline-offset:1px}
html body:not(.nba) #tips .tcard.ladder.lc2 .tex{color:var(--pgmut);font-style:normal;font-size:10px}
html body:not(.nba) #tips .tcard.ladder.lc2 .trk .tsub{border:0;border-radius:8px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font:600 13px var(--body);text-transform:none;letter-spacing:0}
html body:not(.nba) #tips .tcard.ladder.lc2 .trk .tsub.on{background:var(--pgband);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tsubnote{margin:0;font:400 12.5px var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tpanel{border-top:0;padding-top:8px}
html body:not(.nba) #tips .tcard.ladder.lc2 .trk label.u{font:600 10px var(--body);letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tbtn{border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);font:600 12px var(--body);transition:background .15s}
html body:not(.nba) #tips .tcard.ladder.lc2 .tbtn:hover:not(:disabled){border:0;color:var(--pgink);background:color-mix(in srgb,var(--pgband) 85%,var(--pgink))}
html body:not(.nba) #tips .tcard.ladder.lc2 .tbtn.tip{color:var(--pgred)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s{font:500 10px var(--num);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s i{border-radius:2px;background:var(--pgchip);transform:none;box-shadow:none;outline:0;animation:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s.done i{background:var(--sb-accent-fill);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s.now i{background:color-mix(in srgb,var(--pgred) 45%,var(--pgchip))}
html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s.sp i,html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s.done.sp i{box-shadow:inset 0 -3px 0 var(--pggold)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tprog .s.now small{color:var(--pgink);font-weight:700}
html body:not(.nba) #tips .tcard.ladder.lc2 .tkv{font:400 12.5px var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tkv b{color:var(--pgink);font-family:var(--num);font-weight:700}
html body:not(.nba) #tips .tcard.ladder.lc2 .tkv b.pos{color:var(--pgw)}html body:not(.nba) #tips .tcard.ladder.lc2 .tkv b.neg{color:var(--pgl)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan th{font:700 10px var(--body);letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan td{font:400 12.5px var(--num);color:var(--pgink);border-top:0}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan td.do{font:400 12px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan tr.done td{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan tr.now td{background:var(--pgband);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan tr.sp td.do{color:var(--pggold)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tplan tr.done.sp td.do{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 :is(.thist,.tnote){font:400 12px/1.45 var(--body);color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .thist b{color:var(--pgink)}
/* the run log */
html body:not(.nba) #tips .tcard.ladder.lc2 .runlog{border:0;border-radius:8px;background:var(--pgbg)}
html body:not(.nba) #tips .tcard.ladder.lc2 .runlog>summary{font:600 13px var(--body);color:var(--pgink);text-transform:none;font-style:normal}
html body:not(.nba) #tips .tcard.ladder.lc2 .runlog>summary::before{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .runlog>summary span{color:var(--pgmut);font:400 12px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex{font-family:var(--num);font-size:12px}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex th{font:700 10px var(--body);letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex td{border-top:0;color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex tr.won td{color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex tr.lost td{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex tr.split td{color:var(--pggold)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex tr.pend td{color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex.trail.mine tr.editing td{background:var(--pgband)}
html body:not(.nba) #tips .tcard.ladder.lc2 .runlog tr.lsbr td{background:var(--pgband);box-shadow:none}
html body:not(.nba) #tips .tcard.ladder.lc2 .lsbt{background:var(--pgchip);color:var(--pgink)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lres{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--pgband);font:700 10.5px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lres.w{color:var(--pgw)}html body:not(.nba) #tips .tcard.ladder.lc2 .lres.p{color:var(--pggold)}html body:not(.nba) #tips .tcard.ladder.lc2 .lres.n{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .tko{color:#2A1C00;font:700 11px var(--body)} /* dark on its yellow pill (Jason 2/11/2026: gold on yellow was unreadable) */
html body:not(.nba) #tips .tcard.ladder.lc2 :is(.ledit-b,.ldel){border:0;border-radius:6px;background:var(--pgband);color:var(--pgink);font:600 11px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ldel{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 :is(.lactin,.lnewin){border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);font-family:var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lnewin b{color:var(--pgink)}html body:not(.nba) #tips .tcard.ladder.lc2 .lnewin b i{color:var(--pggold);font-style:normal}
html body:not(.nba) #tips .tcard.ladder.lc2 .lnewin label>span:first-child{font:600 10px var(--body);letter-spacing:.06em;color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 :is(.lsubm,.lwin){border:0;border-radius:8px;background:var(--sb-accent-fill);color:var(--sb-on-accent);font:600 13px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .llose{border:0;border-radius:8px;background:var(--pgchip);color:var(--pgl);font:600 13px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lunsub{border:0;border-radius:8px;background:var(--pgchip);color:var(--pgmut);font:600 12px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .led{border:0;border-radius:8px;background:var(--pgband)}
html body:not(.nba) #tips .tcard.ladder.lc2 .led>b{color:var(--pgink)}html body:not(.nba) #tips .tcard.ladder.lc2 .led label{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .led .tin{border:0;background:var(--pgcard)}html body:not(.nba) #tips .tcard.ladder.lc2 .led .tin em{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lex.trail.mine .led input{color:var(--pgink);font-family:var(--num)}
html body:not(.nba) #tips .tcard.ladder.lc2 .led p{color:var(--pgmut)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ledb .lsave{border:0;background:var(--sb-accent-fill);color:var(--sb-on-accent)}
html body:not(.nba) #tips .tcard.ladder.lc2 .ledb .lclr{border:0;color:var(--pgl)}
/* History and How to play */
html body:not(.nba) #tips .tcard.ladder.lc2 .lpopb{color:var(--pgmut);font:600 12px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lpopc{border:0;border-radius:8px;background:var(--pgband);color:var(--pgink);box-shadow:0 12px 32px rgba(0,0,0,.4)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lpopt{color:var(--pgink);font:700 13px var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lpopc :is(p,li,td){color:var(--pgink);font:400 12.5px/1.45 var(--body)}
html body:not(.nba) #tips .tcard.ladder.lc2 .lpopc td.pos{color:var(--pgw)}html body:not(.nba) #tips .tcard.ladder.lc2 .lpopc td.neg{color:var(--pgl)}

/* ---------- Side bets ---------- */
html body:not(.nba) #sb.bt{display:flex;flex-direction:column;gap:12px;padding:0;background:none;background-image:none;border:0;box-shadow:none;border-radius:0;color:var(--pgink);font-family:var(--body)}
html body:not(.nba) #sb .pos{color:var(--pgw)}html body:not(.nba) #sb .neg{color:var(--pgl)}
html body:not(.nba) #sb .bth{gap:8px 10px;align-items:center}
html body:not(.nba) #sb .bth h2{margin:0;font:700 15px var(--body);letter-spacing:0;text-transform:none;font-style:normal;color:var(--pgink)}
html body:not(.nba) #sb .bth h2 span{color:inherit}html body:not(.nba) #sb .bth h2::before{display:none}
html body:not(.nba) #sb .sbsub{flex-basis:100%;order:3;font:400 12.5px var(--body);color:var(--pgmut)}
html body:not(.nba) #sb .btgo.sbgo{margin-left:auto;background:var(--sb-accent-fill);color:var(--sb-on-accent)}
html body:not(.nba) #sb .btk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html body:not(.nba) #sb .btk>div{padding:10px 12px;border:0;border-radius:8px;background:var(--pgcard);box-shadow:none;display:flex;flex-direction:column;gap:2px;min-width:0}
html body:not(.nba) #sb .btk span{font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--pgmut)}
html body:not(.nba) #sb .btk b{font:800 22px/1.1 var(--num);font-variant-numeric:tabular-nums;color:var(--pgink)}
html body:not(.nba) #sb .btk small{font:400 11.5px var(--body);color:var(--pgmut);white-space:normal}
html body:not(.nba) #sb .sbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px;margin:0}
html body:not(.nba) #sb :is(.sbnone,.sbnote){margin:0;padding:12px;border-radius:8px;background:var(--pgcard);font:400 13px/1.45 var(--body);color:var(--pgmut)}
html body:not(.nba) #sb .sbnone b{color:var(--pgink)}
html body:not(.nba) #sb .sbdone summary{cursor:pointer;font:600 13px var(--body);color:var(--pgmut)}
/* the tickets keep the white paper; their header turns graphite */
@media (max-width:640px){html body:not(.nba) #sb .btk{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* desktop: the tracker and the Ladder sit side by side (runtime/site.css); Side bets runs the full width under them */
@media (min-width:860px){
  /* My bets across the top, then the Ladder and the tracker side by side (Jason 29/10/2026) */
  html[data-mdtab="bets"] body:not(.nba) #soccerview>#sb{order:-2;flex-basis:100%;margin:0 0 16px}
  html[data-mdtab="bets"] body:not(.nba) #soccerview>#tips{order:-1}
  html[data-mdtab="bets"] body:not(.nba) #soccerview>#bt{order:0}
  /* the three buttons above them (Jason 30/10/2026) */
  html[data-mdtab="bets"] body:not(.nba) #soccerview>.mdsubw[data-tab="bets"]{order:-3;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){html body:not(.nba) :is(#bt,#sb) *{transition:none}}

/* ---------- My bets with some colour (Jason 29/10/2026): the profit tile first and big, tinted green or red ---------- */
html body:not(.nba) #sb .btk{grid-template-columns:repeat(3,minmax(0,1fr))}
html body:not(.nba) #sb .btk>div:nth-child(3){order:-1;grid-column:1/-1;padding:14px;background:color-mix(in srgb,var(--pgw) 18%,var(--pgcard))}
html body:not(.nba) #sb .btk>div:nth-child(3):has(b.neg){background:color-mix(in srgb,var(--pgl) 16%,var(--pgcard))}
html body:not(.nba) #sb .btk>div:nth-child(3) b{font-size:36px}
html body:not(.nba) #sb .btk>div:nth-child(3) small{font-size:12.5px;color:var(--pgink)}
@media (max-width:640px){html body:not(.nba) #sb .btk{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the tickets: the My Bets slip's look, its green header on white paper (Jason 1/11/2026: not orange) */
html body:not(.nba) #sb .svcard.sbc{background:#fff;color:#1c2b22;border:0;box-shadow:none}
html body:not(.nba) #sb .svcard.sbc .svtop{background:var(--sb-win,#22C55E);color:#fff;border-bottom:0}
html body:not(.nba) #sb .svcard.sbc .svtop :is(.svtt,.svkind){color:#fff}
html body:not(.nba) #sb .svcard.sbc .svx{border-top:0}
html body:not(.nba) #sb .svcard.sbc .sbr.won.on{background:var(--sb-win,#22C55E);color:#fff;border-color:var(--sb-win,#22C55E)}
html body:not(.nba) #sb .svcard.sbc .sbr.lost.on{background:#dc2626;color:#fff;border-color:#dc2626}
html body:not(.nba) #sb .svcard.sbc .sbr.void.on{background:#6b7c72;color:#fff;border-color:#6b7c72}
html body:not(.nba) #sb .svcard.sbc .sbr.clear{background:#e3ece6;color:#1c2b22;border-color:#e3ece6}
/* Edit at the left, Won / Lost / Clear at the right, on one line (Jason 1/11/2026) */
html body:not(.nba) #sb .svcard.sbc .sba{flex-wrap:nowrap;gap:6px}html body:not(.nba) #sb .svcard.sbc .sba :is(.sbr,.btghost){flex:none;height:28px;padding:0 10px;font-size:12px}
html body:not(.nba) #sb .svcard.sbc .sbed{background:#f6faf7}
/* the bet slip: white paper, orange ink (Jason 29/10/2026) */
html body #slip{--fg:#C8471F;--muted:#D9552A;--line:#FFD9C4;--good:#FF7A3D;--gold:#C8471F;--bad:#C8471F;background:#fff;border-color:#FFD9C4}
html body #slip .slct{background:#FF7A3D;color:#1A1B1E}
html body #slip :is(.slt b,.slo,.sls b,.slret b,.slsum b,.slgh b,.slhand b){color:#C8471F}
html body #slip :is(.slt small,.sls small,.slmsg,.slnote,.slret small,.slhand small,.slhno){color:#D9552A}
html body #slip :is(.btgo,.btgo.sbgo,.slbtns .btgo){background:#FF7A3D;color:#1A1B1E}
html body #slip .slkind button{background:#fff;border-color:#FFD9C4;color:#C8471F}
html body #slip :is(.slkind button[aria-selected="true"],.slkind button[data-slk="side"],.slmode button[aria-selected="true"]){background:#FF7A3D;border-color:#FF7A3D;color:#1A1B1E}
html body #slip .slg{background:#FFF7F2;border-color:#FFD9C4}html body #slip .slg.sg{border-left-color:#FF7A3D}html body #slip .sgt{color:#C8471F;border-color:#C8471F}
html body #slip :is(.slbody,.slfoot,.slkind){background:#fff}
html body #slip.side{border-color:#FFD9C4;box-shadow:0 10px 34px rgba(0,0,0,.35)}html body #slip.side .slct{background:#FF7A3D}
html body #slip .slhand{border-color:#FFD9C4}html body #slip .slhg button.on{border-color:#FF7A3D}
/* ---------- My bets, redesigned (Jason 30/10/2026: "add some life to it, make it look sleek") ----------
   The title and + New bet on one line, one profit card in green (red when down) with Open, Record and Bets as chips
   inside it, a friendly empty state, and the note as plain small text. No outer box, no outlines. */
html body:not(.nba) #soccerview #sb.bt{gap:10px}
html body:not(.nba) #soccerview #sb .bth{display:flex;flex-wrap:wrap;align-items:center}
html body:not(.nba) #soccerview #sb .bth h2{font:800 20px var(--body)}
html body:not(.nba) #soccerview #sb .sbsub{order:3;flex-basis:100%;font-size:12px}
html body:not(.nba) #soccerview #sb .btgo.sbgo{order:2;height:34px;padding:0 16px;border-radius:999px;font-weight:700;box-shadow:0 4px 14px color-mix(in srgb,var(--sb-accent-fill) 35%,transparent)}
html body:not(.nba) #soccerview #sb .btk{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,var(--sb-win,#22C55E) 0%,var(--sb-win,#22C55E) 55%,#22C55E 100%);color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--sb-win,#22C55E) 28%,transparent)}
html body:not(.nba) #soccerview #sb .btk:has(b.neg){background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,#9F1239 0%,#DC2626 60%,#F25C5C 100%);box-shadow:0 10px 26px rgba(220,38,38,.25)}
html body:not(.nba) #soccerview #sb .btk>div{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.14);gap:1px}
html body:not(.nba) #soccerview #sb .btk>div:nth-child(3){order:-1;grid-column:1/-1;padding:0 0 6px;background:none}
html body:not(.nba) #soccerview #sb .btk span{color:rgba(255,255,255,.82)}
html body:not(.nba) #soccerview #sb .btk b,html body:not(.nba) #soccerview #sb .btk b.pos,html body:not(.nba) #soccerview #sb .btk b.neg{color:#fff;font-size:20px}
html body:not(.nba) #soccerview #sb .btk small{color:rgba(255,255,255,.78);font-size:11px}
html body:not(.nba) #soccerview #sb .btk>div:nth-child(3) b{font-size:40px;letter-spacing:-.01em}
html body:not(.nba) #soccerview #sb .btk>div:nth-child(3) small{color:rgba(255,255,255,.85)}
html body:not(.nba) #soccerview #sb .sbnone{position:relative;padding:14px;border-radius:14px;background:var(--pgcard)}
html body:not(.nba) #soccerview #sb .sbnote{padding:0 4px;background:none;font-size:11.5px}
/* light mode: the same green card (it turned teal) */
html[data-theme=light] body:not(.nba) #soccerview #sb .btk{background:linear-gradient(135deg,#15803D 0%,var(--sb-win,#22C55E) 55%,#22C55E 100%);color:#fff}
html[data-theme=light] body:not(.nba) #soccerview #sb .btk:has(b.neg){background:linear-gradient(135deg,#B91C1C 0%,#DC2626 60%,#F25C5C 100%)}
html[data-theme=light] body:not(.nba) #soccerview #sb .btk>div{background:rgba(255,255,255,.18)}
html[data-theme=light] body:not(.nba) #soccerview #sb .btk :is(b,span,small){color:#fff}