/* ==========================================================================
   WinHouse Sportsbook — design system
   Colours sampled pixel-for-pixel from the reference screenshots.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* WinHouse shell — sampled from the live template at winhouse.bet */
  --shell:       #18222C;   /* left nav + top bar + search field        */
  --shell-line:  #1A2833;   /* divider between nav and content          */
  --nav-txt:     #FFFFFF;   /* section labels, 14px/600                 */
  --nav-sub:     #828690;   /* sub-items, 13px/400                      */
  --brand:       #00E61E;   /* WINHOUSE logo green                      */
  --blue:        #3F5CC0;   /* Log In                                   */
  --green:       #1BB078;   /* Sign Up / Deposit                        */

  /* board surfaces — BetProduct's tonal ladder, re-tinted to the shell */
  --bg:          #1B2934;   /* page / app background, cell gutters      */
  --surface:     #2C3D4B;   /* rows, sidebar cards, save-bar, inputs    */
  --surface-2:   #223140;   /* odds cells, betslip cards, banner frame  */
  --surface-3:   #1D2A35;   /* dimmed "Value" column, muted cells       */
  --border:      #2A3846;   /* 1px rules, panel edges, input borders    */
  --track:       #16212B;   /* scrollbar tracks, tab underline track    */
  --hover:       #35485A;   /* row / card hover                         */

  /* type */
  --text:        #E7EDF3;
  --text-2:      #A4B1BD;
  --text-dim:    #828690;
  --text-faint:  #5F6B76;

  /* accents */
  --accent:      #0074FF;   /* template's primary action blue           */
  --accent-ink:  #FFFFFF;
  --live:        #E5405E;
  --hl-pink:     #FF4778;
  --win-green:   #22DD95;
  --up:          #1BB078;
  --down:        #E5405E;
  --disabled:    #2E3A46;

  /* metrics */
  --nav-w:       280px;
  --top-h:       80px;
  --subbar-h:    80px;
  --sidebar-w:   280px;
  --slip-w:      315px;
  --row-h:       55px;
  --odd-w:       82px;
  --radius:      6px;
}

/* light theme ------------------------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;
  --shell:       #FFFFFF;
  --shell-line:  #E2E8ED;
  --nav-txt:     #17242B;
  --nav-sub:     #63727E;
  --bg:          #EFF3F8;   /* soft tint, not stark white */
  --surface:     #FFFFFF;
  --surface-2:   #F7FAFC;
  --surface-3:   #E9EFF5;
  --border:      #D8E0E7;
  --track:       #DCE4EA;
  --hover:       #E9EFF5;
  --text:        #17242B;
  --text-2:      #4A5C66;
  --text-dim:    #71838C;
  --text-faint:  #93A3AB;
  --disabled:    #C7D1DA;
}

/* ---------------------------------------------------------------- reset - */
*, *::before, *::after { box-sizing: border-box; }
/* #root must carry a definite height: without it .tpl's `height:100%` resolved
   to auto, the panes never clipped, and the whole iframe scrolled as one
   instead of the sidebar and board scrolling independently */
html, body, #root { height: 100%; }
body { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.35 "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

/* scrollbars ------------------------------------------------------------- */
/* styled globally, not just on .scroll — dropdown lists and the market rails
   were falling back to the browser's light default */
/* Thin, dark rails. Both mechanisms are declared on purpose: engines that
   support the standard properties (Firefox, Chrome 121+) honour those and
   ignore the pseudo-elements; older Chrome/Safari fall through to the webkit
   rules. Either path lands on the same thin dark bar.
   .strip-scroll / .lsports override with `scrollbar-width: none` to stay
   hidden — the more specific rule still wins. */
* { scrollbar-width: thin; scrollbar-color: var(--surface) var(--track); }
*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--track); }
*::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #3E5265; }
.scroll { overflow-y: auto; }

/* ======================================================= template shell === */
.tpl { display: flex; height: 100vh; overflow: hidden; }
/* embedded in the real site shell — the host page supplies nav + top bar */
.tpl.embedded { height: 100%; }
.tpl.embedded .app { border-radius: 0; }

/* ---------------------------------------------------------- left nav ---- */
.tpl-nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: var(--shell);
  border-right: 1px solid var(--shell-line);
  display: flex; flex-direction: column;
  height: 100%;
}
.tpl-nav.mini { width: 72px; flex-basis: 72px; }

.tpl-brand {
  height: var(--top-h); flex: 0 0 var(--top-h);
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 22px;
}
.tpl-brand .mark { width: 34px; height: 34px; flex: 0 0 34px; }
.tpl-brand .wm {
  font-size: 21px; font-weight: 800; letter-spacing: .4px; color: #fff;
  white-space: nowrap;
}
.tpl-brand .wm em { font-style: normal; color: var(--brand); }
.tpl-brand .collapse {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--nav-sub);
  display: flex; align-items: center; justify-content: center;
}
.tpl-brand .collapse:hover { background: rgba(255,255,255,.12); color: #fff; }
.tpl-brand .collapse svg { width: 15px; height: 15px; }
.tpl-nav.mini .wm, .tpl-nav.mini .collapse { display: none; }

.tpl-menu { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.tpl-menu::-webkit-scrollbar { width: 6px; }
.tpl-menu::-webkit-scrollbar-track { background: transparent; }
.tpl-menu::-webkit-scrollbar-thumb { background: #2A3745; border-radius: 3px; }

.tpl-sec {
  position: relative; width: 100%; height: 52px;
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  font-size: 14px; font-weight: 600; color: var(--nav-txt); text-align: left;
}
.tpl-sec:hover { background: rgba(255,255,255,.04); }
.tpl-sec .ico { width: 19px; height: 19px; flex: 0 0 19px; color: var(--nav-sub); }
.tpl-sec .lbl { flex: 1; min-width: 0; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.tpl-sec .chev { width: 15px; height: 15px; color: var(--nav-sub);
                 transition: transform .15s; }
.tpl-sec.open > .chev { transform: rotate(180deg); }
.tpl-sec.on { background: rgba(0,116,255,.10); }
.tpl-sec.on .ico { color: var(--accent); }
.tpl-sec.on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.tpl-nav.mini .tpl-sec { padding: 0 26px; }
.tpl-nav.mini .tpl-sec .lbl, .tpl-nav.mini .tpl-sec .chev { display: none; }

/* ---------------------------------------------------------- top bar ----- */
.tpl-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tpl-top {
  height: var(--top-h); flex: 0 0 var(--top-h);
  background: var(--shell); border-bottom: 1px solid var(--shell-line);
  display: flex; align-items: center; gap: 18px; padding: 0 24px;
}
.tpl-search {
  width: 415px; max-width: 42vw; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,.045);
  display: flex; align-items: center; gap: 11px; padding: 0 15px;
}
.tpl-search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--nav-sub); }
.tpl-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; color: #fff;
}
.tpl-search input::placeholder { color: var(--nav-sub); }

.tpl-top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tpl-btn {
  height: 36px; padding: 0 20px; border-radius: 6px;
  font-size: 14px; font-weight: 600; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.tpl-btn:hover { filter: brightness(1.08); }
.tpl-btn.login { background: var(--blue); }
.tpl-btn.signup, .tpl-btn.deposit { background: var(--green); }
.tpl-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; color: var(--nav-sub);
  display: flex; align-items: center; justify-content: center;
}
.tpl-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tpl-icon-btn svg { width: 18px; height: 18px; }

.balance {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2; padding-right: 2px;
}
.balance .amt { font-size: 15px; font-weight: 700; color: #fff; }
.balance .cur { font-size: 11px; font-weight: 600; color: var(--nav-sub); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* the sportsbook itself now sits in the template's content well */
.app { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* theme switch — yellow-ringed moon + sun pill */
.theme-sw {
  width: 62px; height: 26px; border-radius: 13px;
  background: var(--surface);
  display: flex; align-items: center; position: relative;
  padding: 0 4px; justify-content: space-between;
}
.theme-sw svg {
  flex: 0 0 16px; width: 16px; height: 16px;
  color: var(--text-2); position: relative; z-index: 1;
}
.theme-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--accent);
  transition: transform .18s ease;
}
:root[data-theme="light"] .theme-sw::after { transform: translateX(34px); }

/* language / dropdown trigger */
.drop { position: relative; }
.drop-btn {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text);
  height: 34px; padding: 0 2px;
}
.drop-btn .chev { width: 14px; height: 14px; color: var(--text-2); transition: transform .15s; }
.drop.open .drop-btn .chev { transform: rotate(180deg); }

.drop-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 176px; padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  display: none;
}
.drop.open .drop-menu { display: block; }
.drop-menu.wide { min-width: 232px; }
.drop-menu .mtitle {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 2px 6px 10px;
}
.drop-menu .mtitle.gap { padding-top: 14px; }
/* the settings panel sits darker than its rows, as in the reference */
.drop-menu.settings { background: var(--track); min-width: 244px; }
.drop-menu.settings .opt { background: var(--surface-2); }
.drop-menu.settings .opt:hover { background: var(--surface); }
.opt.as-input { padding: 0; background: var(--surface); }
.opt.as-input input {
  width: 100%; height: 100%; padding: 0 14px;
  background: none; border: 0; outline: none;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 38px; padding: 0 12px; margin-bottom: 6px;
  background: var(--surface); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--text);
  text-align: left;
}
.opt:last-child { margin-bottom: 0; }
.opt:hover { background: var(--hover); }
.opt .radio {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--text-faint);
}
.opt.on .radio { background: var(--accent); border-color: var(--accent); }
.opt .flag { margin-left: auto; }
.opt.scrollable { max-height: none; }
.drop-menu .optlist { max-height: 420px; overflow-y: auto; }

/* buttons */
.btn {
  height: 42px; padding: 0 30px; border-radius: 21px;
  font-size: 15px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; white-space: nowrap;
  transition: filter .12s, background .12s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 38px; padding: 0 22px; font-size: 14px; border-radius: 19px; }

/* ---------------------------------------------------------- sub header -- */
.subbar {
  height: var(--subbar-h); flex: 0 0 var(--subbar-h);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px 0 30px; gap: 20px;
}
.page-title { font-size: 34px; font-weight: 800; letter-spacing: -.6px; }
.page-title .count { color: var(--text-2); margin-left: 14px; font-weight: 700; }

.crumbs { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.crumbs a { color: var(--text-2); text-decoration: underline; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-faint); }
.crumbs .cur { color: var(--text); }

/* primary nav — Sports / Live / My Bets, on every view */
.mainnav { display: flex; align-items: center; gap: 26px; }
.mainnav a {
  font-size: 21px; font-weight: 600; color: var(--text-dim);
  letter-spacing: -.2px; white-space: nowrap; transition: color .12s;
}
.mainnav a:hover { color: var(--text-2); }
.mainnav a.on { color: var(--text); font-weight: 800; }

/* live sub-tabs — inline in the view now that the subbar carries the nav */
.ltabs { display: flex; align-items: center; gap: 8px; height: 100%; }
.ltabs.inline {
  height: 46px; gap: 4px; margin: -4px 0 16px;
  border-bottom: 1px solid var(--track);
}
.ltabs.inline a { height: 46px; padding: 0 18px; font-size: 13.5px; }
.ltabs a {
  position: relative; height: 100%; display: flex; align-items: center;
  padding: 0 22px; font-size: 15px; font-weight: 600; color: var(--text-dim);
}
.ltabs a:hover { color: var(--text-2); }
.ltabs a.on { color: var(--text); }
.ltabs a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
}

.subbar-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 20px; border-radius: 19px;
  border: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
}
.fav-chip svg { width: 15px; height: 15px; color: var(--accent); }
.fav-chip .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.clock { font-size: 14px; font-weight: 600; }

/* =============================================================== body === */
.shell { flex: 1; display: flex; min-height: 0; }

/* ------------------------------------------------------------ sidebar --- */
.side {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.side-search { padding: 20px; }
.search {
  height: 40px; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
.search svg { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 15px; }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; color: var(--text);
}
.search input::placeholder { color: var(--text-dim); }

/* no scrollbar-gutter: it reserved a permanent empty 15px lane even when the
   pane didn't overflow, which read as a stray scroller against the board's
   left edge. Bars now appear only where content actually overflows. */
.side-body { flex: 1; min-height: 0; padding: 0 20px 24px; }
.side-h {
  font-size: 15px; font-weight: 700; color: var(--text);
  padding: 4px 0 12px;
}
.side-h.gap { padding-top: 26px; }

/* top-league card — 51px tall, 2px gutter */
.tl {
  height: 51px; margin-bottom: 2px; border-radius: var(--radius);
  background: var(--surface); display: flex; align-items: center;
  padding: 0 12px 0 14px; gap: 11px; cursor: pointer;
  transition: background .12s;
}
.tl:hover { background: var(--hover); }
.tl .txt { flex: 1; min-width: 0; display: block; }
.tl .c { display: block; font-size: 13px; font-weight: 700; color: var(--text);
         line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .l { display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
         line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .arw { width: 16px; height: 16px; color: var(--text-2); flex: 0 0 16px; }

/* sport row — 40px tall */
.sp {
  height: 40px; margin-bottom: 2px; border-radius: var(--radius);
  background: var(--surface); display: flex; align-items: center;
  padding: 0 12px 0 13px; gap: 11px; cursor: pointer;
  transition: background .12s;
}
.sp:hover { background: var(--hover); }
.sp .ico { width: 19px; height: 19px; flex: 0 0 19px; color: var(--text); }
.sp .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp .ct { font-size: 12px; font-weight: 600; color: var(--text-2); }
.sp .chev { width: 15px; height: 15px; color: var(--text-2); flex: 0 0 15px;
            transition: transform .15s; }
.sp.open .chev { transform: rotate(180deg); }

/* country / league tree */
.tree { display: none; }
.sp.open + .tree { display: block; }
.cty {
  height: 41px; margin-bottom: 2px; border-radius: var(--radius);
  background: var(--surface); display: flex; align-items: center;
  padding: 0 12px 0 13px; gap: 10px; cursor: pointer;
}
.cty:hover { background: var(--hover); }
.cty .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cty .chev { width: 15px; height: 15px; color: var(--text-2); transition: transform .15s; }
.cty.open .chev { transform: rotate(180deg); }
.lgs { display: none; padding-left: 0; }
.cty.open + .lgs { display: block; }
.lg {
  height: 40px; margin-bottom: 2px; display: flex; align-items: center;
  padding: 0 13px; gap: 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.lg:hover { color: #fff; }
.lg .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg .box {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 2px;
  background: var(--surface-3); border: 1px solid var(--text-faint);
  display: flex; align-items: center; justify-content: center;
}
.lg .box svg { width: 11px; height: 11px; color: var(--accent-ink); opacity: 0; }
.lg.on .box { background: var(--accent); border-color: var(--accent); }
.lg.on .box svg { opacity: 1; }

/* --------------------------------------------------------------- main --- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-scroll { flex: 1; min-height: 0; padding: 24px 30px 40px; }

/* banner carousel — 300px */
.banner {
  position: relative; height: 300px; border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden; margin-bottom: 22px;
}
.banner-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.banner-slide {
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* stadium-ish backdrop, drawn in CSS so the banner costs no extra request */
.banner-slide::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 50% 118%, rgba(255,204,0,.20) 0%, transparent 62%),
    radial-gradient(52% 90% at 12% -12%, rgba(220,30,87,.24) 0%, transparent 60%),
    radial-gradient(52% 90% at 88% -12%, rgba(56,146,214,.22) 0%, transparent 60%),
    linear-gradient(160deg, #33454F 0%, #2B3A42 48%, #223037 100%);
}
.banner-slide::after {
  content: ""; position: absolute; left: 50%; bottom: -46%;
  width: 150%; height: 96%; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.045) 0 58px, rgba(255,255,255,.015) 58px 116px);
  border-top: 2px solid rgba(255,255,255,.09);
}
.banner-slide .art { position: relative; z-index: 1; }
.banner-slide h2 { text-shadow: 0 3px 22px rgba(0,0,0,.45); }
.banner-cta {
  margin-top: 8px; height: 40px; padding: 0 28px; border-radius: 20px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center;
}
.banner-cta:hover { filter: brightness(1.07); }
.banner-slide .art {
  width: 920px; max-width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
}
.banner-slide h2 { margin: 0; font-size: 56px; font-weight: 900; letter-spacing: -1.6px; }
.banner-slide h2 em { font-style: normal; color: var(--accent); }
.banner-slide p { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-2); }
.banner-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); background: rgba(38,50,56,.35);
}
.banner-nav:hover { color: var(--text); background: rgba(38,50,56,.6); }
.banner-nav.prev { left: 14px; }
.banner-nav.next { right: 14px; }
.banner-nav svg { width: 20px; height: 20px; }
.banner-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
               display: flex; gap: 6px; }
.banner-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(227,239,244,.35); }
.banner-dots i.on { background: var(--accent); }

/* sport strip */
.strip { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.strip-scroll {
  flex: 1; min-width: 0; display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.strip-scroll::-webkit-scrollbar { display: none; }
/* grab-drag feedback for the horizontal rails */
.strip-scroll.dragging, .lsports.dragging { cursor: grabbing; scroll-behavior: auto; }
.strip-scroll.dragging *, .lsports.dragging * { cursor: grabbing !important; }
.stab {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 11px;
  height: 62px; padding: 0 22px 0 4px; margin-right: 22px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.stab .ico { width: 24px; height: 24px; flex: 0 0 24px; }
.stab .nm { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.stab .sub { font-size: 12px; font-weight: 600; color: var(--text-dim); line-height: 1.3; }
.stab.on .ico { color: var(--accent); }
.stab.on::after {
  content: ""; position: absolute; left: 0; right: 22px; bottom: 0;
  height: 3px; background: var(--accent);
}
.strip-rule { height: 1px; background: var(--track); margin: 0 0 18px; }

.live-toggle {
  flex: 0 0 auto; margin-left: 18px;
  display: inline-flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 8px 0 26px; border-radius: 21px;
  background: var(--live); color: #fff; font-size: 15px; font-weight: 800;
}
.live-toggle .knob { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.live-toggle.off { background: var(--surface); color: var(--text-2); }
.live-toggle.off .knob { background: var(--text-dim); }

/* -------------------------------------------------------- odds tables --- */
.cols-head {
  display: flex; align-items: center; height: 34px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: var(--text); text-transform: uppercase;
}
.cols-head .spacer { flex: 1; min-width: 0; }
.cols-head .grp { text-align: center; }
.cols-head .grp.g3 { flex: 0 0 calc(var(--odd-w) * 3 + 2px); }
.cols-head .grp.g1 { flex: 0 0 calc(var(--odd-w) + 1px); }
.cols-head .grp.g2 { flex: 0 0 calc(var(--odd-w) * 2 + 1px); }

/* mirrors .row exactly so the labels sit dead-centre over their odds cells */
.lg-head { display: flex; align-items: stretch; height: 40px; gap: 1px; }
.lg-head .lead {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding-left: 9px;
}
.lg-head .nm { font-size: 13.5px; font-weight: 700; min-width: 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-head > .lb {
  flex: 0 0 var(--odd-w); display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}

/* collapsed league bar */
.lg-bar {
  height: 34px; margin-bottom: 2px; border-radius: var(--radius);
  background: var(--surface); display: flex; align-items: center;
  gap: 10px; padding: 0 12px 0 12px; cursor: pointer;
}
.lg-bar:hover { background: var(--hover); }
.lg-bar .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-bar .ct { font-size: 12px; font-weight: 600; color: var(--text-2); }
.lg-bar .chev { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-2); }
.lg-head { cursor: pointer; }
.lg-head:hover .nm { color: #fff; }

/* match row */
.row {
  display: flex; align-items: stretch; gap: 1px;
  min-height: var(--row-h); margin-bottom: 2px;
}
.row-main {
  flex: 1; min-width: 0; background: var(--surface);
  border-radius: var(--radius) 0 0 var(--radius);
  display: flex; align-items: center; gap: 12px; padding: 0 12px 0 14px;
  cursor: pointer; transition: background .12s;
}
.row-main:hover { background: var(--hover); }
.teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team .badge {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  font-size: 8px; font-weight: 800; line-height: 15px; text-align: center;
  overflow: hidden;
}
.team .nm { font-size: 13px; font-weight: 700; color: var(--text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-star { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-faint); }
.row-star:hover, .row-star.on { color: var(--accent); }
.when { flex: 0 0 auto; text-align: right; font-size: 12.5px;
        font-weight: 600; color: var(--text-2); line-height: 1.4; }
/* live score + clock, laid out as in the reference: per-team scores stacked in
   gold, a 1px rule, then the minute over the half */
.lscore, .ltime {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 3px; line-height: 1.2;
}
.lscore { min-width: 14px; font-size: 13px; font-weight: 700; color: #FFCC00;
          padding-right: 11px; border-right: 1px solid var(--surface-2); }
.ltime  { min-width: 40px; padding-left: 11px;
          font-size: 12.5px; font-weight: 600; color: var(--text); }

/* odds cell */
.odd {
  flex: 0 0 var(--odd-w); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; color: var(--text);
  cursor: pointer; transition: background .1s, color .1s;
  position: relative;
}
/* price movement: the previous price struck through above the new one */
.odd .was, .hl-odd .was {
  font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1;
  color: var(--text-faint); text-decoration: line-through;
  margin-bottom: 1px;
}
.odd.up   { background: rgba(27,176,120,.16); color: var(--up); }
.odd.down { background: rgba(229,64,94,.16); color: var(--down); }
.odd.up:hover   { background: rgba(27,176,120,.24); }
.odd.down:hover { background: rgba(229,64,94,.24); }
.odd.on.up, .odd.on.down { background: var(--accent); color: var(--accent-ink); }
.odd.on .was { color: rgba(255,255,255,.6); }
.odd:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.odd:hover { background: var(--hover); }
.odd.on { background: var(--accent); color: var(--accent-ink); }
/* the total line is informational, not a price — signal that with muted type,
   not a darker surface, which cut a visible band down the middle of every row */
.odd.dim { background: var(--surface-2); color: var(--text-dim); cursor: default; }
.odd.dim:hover { background: var(--surface-2); }
.odd.empty { color: var(--text-faint); cursor: default; }
.odd.empty:hover { background: var(--surface-2); }
.odd.lock { color: var(--text-faint); cursor: not-allowed; }
.odd .arrow {
  position: absolute; right: 7px; width: 9px; height: 9px;
}
.odd.up .arrow { color: var(--up); }
.odd.down .arrow { color: var(--down); }

/* live badge */
.live-tag {
  display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
  border-radius: 2px; background: var(--live); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
}

/* ------------------------------------------------------- match detail --- */
.md-hero {
  position: relative; min-height: 210px; border-radius: var(--radius);
  background:
    radial-gradient(120% 150% at 50% 40%, rgba(76,120,80,.55) 0%, rgba(30,44,40,.9) 70%),
    var(--surface-2);
  margin-bottom: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.md-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 44px, transparent 44px 88px);
}
/* the pitch backdrop is always dark, so the hero keeps light type in both
   themes rather than following the palette */
.md-hero, .md-hero .tn, .md-hero .ko { color: #F2F7F9; }
.md-hero .dt, .md-hero .sb-stat .top .c { color: rgba(242,247,249,.72); }
.md-hero .cap {
  position: absolute; top: 14px; left: 20px; z-index: 2;
  font-size: 12.5px; font-weight: 600; color: rgba(242,247,249,.72);
}
.md-hero .periods > span { color: #F2F7F9; }
.md-hero .periods .hd { color: rgba(242,247,249,.72); }
.md-hero .sb-tab { color: rgba(242,247,249,.72); }
.md-hero .sb-tab.on { color: #F2F7F9; }
.md-hero .acts { position: absolute; top: 12px; right: 16px; z-index: 2;
                 display: flex; gap: 10px; }
.md-hero .acts button { width: 20px; height: 20px; color: rgba(242,247,249,.72); }
.md-hero .acts button:hover, .md-hero .acts button.on { color: var(--accent); }
.md-hero .hero-in {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 0 20px;
}
.md-hero .vs {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 26px; width: 100%; padding: 0 26px; min-width: 0;
}
.md-hero .hteam {
  flex: 1 1 0; min-width: 0; flex-wrap: nowrap;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
/* row-reverse flips the main axis: flex-start is the RIGHT edge here, which
   pushed the away block to the far right instead of hugging the centre */
.md-hero .hteam.r { justify-content: flex-end; flex-direction: row-reverse; }
.md-hero .tn {
  font-size: 25px; font-weight: 800; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-hero .crest {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 30px; text-align: center;
}
.md-hero .mid { flex: 0 0 auto; text-align: center; }
.md-hero .ko { display: block; font-size: 25px; font-weight: 800; white-space: nowrap; }
.md-hero .dt { display: block; font-size: 13px; font-weight: 600;
               color: var(--text-2); margin-top: 4px; white-space: nowrap; }

/* market filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  height: 26px; padding: 0 11px; border-radius: 3px;
  background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center;
}
.chip:hover { background: var(--hover); }
.chip.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip svg { width: 12px; height: 12px; margin-right: 5px; }

.md-tools { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 14px; }
.md-tools button { width: 20px; height: 20px; color: var(--text-2); }
.md-tools button:hover, .md-tools button.on { color: var(--text); }

/* market grid */
/* full-width markets by default, matching the reference; the toolbar toggle
   switches to the two-column layout */
.mgrid { display: grid; grid-template-columns: 1fr; gap: 2px; align-items: start; }
/* two-column view keeps a real gutter between the columns; rows stay tight */
.mgrid.two { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 2px; }
.mkt { margin-bottom: 2px; }
.mkt-h {
  height: 40px; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
}
.mkt-h .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-h button { width: 15px; height: 15px; color: var(--text-2); }
.mkt-h button:hover, .mkt-h button.on { color: var(--accent); }
.mkt-body { display: grid; gap: 1px; background: var(--bg); }
.mkt-body.c1 { grid-template-columns: 1fr; }
.mkt-body.c2 { grid-template-columns: 1fr 1fr; }
.mkt-body.c3 { grid-template-columns: 1fr 1fr 1fr; }
.pick {
  height: 42px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 14px; cursor: pointer; transition: background .1s;
}
.pick:hover { background: var(--hover); }
.pick .lbl { font-size: 13px; font-weight: 600; color: var(--text-2);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .val { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pick.on { background: var(--accent); }
.pick.on .lbl, .pick.on .val { color: var(--accent-ink); }
.pick.lock { cursor: not-allowed; }
.pick.lock .lbl, .pick.lock .val { color: var(--text-faint); }
.pick.lock .val::before {
  content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 6px;
  vertical-align: -2px;
  -webkit-mask: var(--lock-svg) center/contain no-repeat;
  mask: var(--lock-svg) center/contain no-repeat;
  background: var(--text-faint);
}

/* ---------------------------------------------------------- live view --- */
.lsports { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--track);
           margin: 0 0 20px; overflow-x: auto; scrollbar-width: none;
           cursor: grab; -webkit-user-select: none; user-select: none; }
.lsports::-webkit-scrollbar { display: none; }
.lsport {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 20px 0 2px; margin-right: 22px; cursor: pointer;
}
.lsport .ico { width: 21px; height: 21px; color: var(--text-dim); }
.lsport .nm { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.lsport .ct { font-size: 12px; font-weight: 600; color: var(--text-dim); line-height: 1.25; }
.lsport.on .ico { color: var(--accent); }
.lsport.on::after {
  content: ""; position: absolute; left: 0; right: 20px; bottom: -1px;
  height: 3px; background: var(--accent);
}

.hfilters { display: flex; gap: 4px; border-bottom: 1px solid var(--track); margin-bottom: 18px; }
.hfilter {
  position: relative; height: 46px; padding: 0 18px;
  display: flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
}
.hfilter:hover { color: var(--text-2); }
.hfilter.on { color: var(--text); }
.hfilter.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
}

/* live left rail (event view) */
.rail { flex: 1; min-height: 0; padding: 20px; }
.rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rail-head .t { font-size: 15px; font-weight: 700; }
.rail-head .n { font-size: 15px; font-weight: 700; color: var(--text-2); }
.rail-head .sw { margin-left: auto; display: flex; align-items: center; gap: 9px;
                 font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-2); }
.toggle {
  width: 34px; height: 17px; border-radius: 9px; background: var(--surface-3);
  position: relative; flex: 0 0 34px;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--text-dim); transition: transform .16s, background .16s;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(17px); background: #fff; }

.rail-grp { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 14px 0 8px; }
.rail-card { background: var(--surface); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.rail-card .top { padding: 9px 12px 8px; cursor: pointer; }
.rail-card .ln { display: flex; align-items: center; gap: 8px; }
.rail-card .ln .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-card .ln .sc { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.rail-card .meta { display: flex; align-items: center; gap: 7px; margin-top: 5px;
                   font-size: 11px; font-weight: 600; color: var(--text-2); }
.rail-card .meta .sp { margin-left: auto; display: flex; gap: 7px; color: var(--text-faint); }
.rail-card .meta .sp svg { width: 12px; height: 12px; }
.rail-card .meta .sp .star:hover, .rail-card .meta .sp .star.on { color: var(--accent); }
.rail-odds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--bg); }
.rail-odd {
  height: 28px; background: var(--surface-2); display: flex; align-items: center;
  justify-content: center; gap: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.rail-odd:hover { background: var(--hover); }
.rail-odd .k { color: var(--text-dim); font-weight: 600; }
.rail-odd.on { background: var(--accent); }
.rail-odd.on .k { color: var(--accent-ink); }

/* live scoreboard */
.sb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; padding: 16px 20px; }
.sb-stat .top { display: flex; align-items: center; font-size: 12.5px; font-weight: 700; }
.sb-stat .top .l { width: 26px; }
.sb-stat .top .c { flex: 1; text-align: center; color: var(--text-2); font-weight: 600; }
.sb-stat .top .r { width: 26px; text-align: right; }
.sb-stat .bar { display: flex; gap: 2px; margin-top: 5px; height: 3px; }
.sb-stat .bar i { flex: 1; background: var(--surface-3); border-radius: 2px; }
.sb-stat .bar i.f { background: var(--live); }

.sb-tabs { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
.sb-tab {
  height: 30px; padding: 0 22px; background: rgba(38,50,56,.6);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; align-items: center; cursor: pointer;
}
.sb-tab.on { background: rgba(38,50,56,.92); color: var(--text); }

.periods {
  display: grid; grid-template-columns: 26px 74px 74px; gap: 2px;
  margin-top: 12px; justify-content: center;
}
.periods > span {
  height: 26px; background: rgba(38,50,56,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.periods .hd { background: none; color: var(--text-2); font-weight: 600; }

/* multi view */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mv-card { background: var(--bg); position: relative; min-width: 0; }
.mv-card .md-hero .tn { font-size: 19px; }
.mv-card .md-hero .ko { font-size: 20px; }
.mv-card .sb-stats { grid-template-columns: repeat(2, 1fr); gap: 10px 18px; padding: 14px 16px; }
.mv-card .mgrid { grid-template-columns: 1fr; }
.mv-close {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.mv-close:hover { background: var(--live); color: #fff; }

/* results */
.res-filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.sel {
  height: 40px; min-width: 190px; padding: 0 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.sel .chev { width: 15px; height: 15px; margin-left: auto; color: var(--text-2); }
.res-table { border-radius: var(--radius); overflow: hidden; }
.res-head, .res-row {
  display: grid; grid-template-columns: 96px 132px 118px minmax(0,1fr) minmax(0,1.45fr) 96px 30px;
  align-items: center; gap: 12px; padding: 0 16px; height: 42px;
}
.res-head { background: var(--surface); font-size: 12.5px; font-weight: 700; }
.res-row { background: var(--surface-2); border-top: 1px solid var(--bg);
           font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.res-head > span, .res-row > span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-row:hover { background: var(--hover); }
.res-row .ev { color: var(--text); font-weight: 600; }
.res-row .sc { color: var(--text); font-weight: 700; }
.res-row .chev { width: 15px; height: 15px; margin-left: auto; transition: transform .15s; }
.res-row.open .chev { transform: rotate(180deg); }
.res-detail { display: none; padding: 14px 16px; background: var(--surface-2);
              border-top: 1px solid var(--bg); }
.res-detail.on { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-stat {
  height: 38px; background: var(--surface); border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.res-stat b { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------ betslip --- */
.slip {
  width: var(--slip-w); flex: 0 0 var(--slip-w);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.slip-head {
  height: 46px; flex: 0 0 46px; border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch; padding: 0 20px; gap: 22px;
}
.sh-tab {
  position: relative; display: flex; align-items: center;
  font-size: 15px; font-weight: 700; color: var(--text-dim);
}
.sh-tab .n { margin-left: 6px; }
.sh-tab.on { color: var(--text); }
.sh-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* mode row: Single/Multiple selector + clear-all */
.slip-mode { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mode-sel { position: relative; cursor: pointer; }
.mode-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 148px; padding: 6px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.mode-sel.open .mode-menu { display: block; }
.mode-menu button {
  display: block; width: 100%; height: 34px; padding: 0 12px; text-align: left;
  border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--text);
}
.mode-menu button:hover { background: var(--surface); }
.mode-menu button.on { background: var(--surface); color: var(--accent); }
.slip-clear {
  margin-left: auto; width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.slip-clear svg { width: 16px; height: 16px; }
.slip-clear:hover { background: var(--surface); color: var(--live); }
.pickcard .ph .tag {
  margin-left: auto; height: 19px; padding: 0 9px; border-radius: 10px;
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
}
.slip-body { flex: 1; min-height: 0; padding: 16px 20px 24px; }

.slip-mode { margin-bottom: 18px; }
.mode-sel {
  height: 32px; width: 96px; padding: 0 10px; border-radius: 3px;
  border: 1px solid var(--border); background: none;
  display: flex; align-items: center; font-size: 13px; font-weight: 600;
}
.mode-sel .chev { width: 14px; height: 14px; margin-left: auto; color: var(--text-2); }

.slip-empty {
  height: 38px; background: var(--surface-2); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
}
.slip-save {
  height: 30px; background: var(--surface); border-radius: 2px;
  display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.slip-save:hover { background: var(--hover); }

/* selection card */
.pickcard { background: var(--surface-2); border-radius: var(--radius); margin-bottom: 10px; }
.pickcard .ph {
  height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 11px;
  border-bottom: 1px solid rgba(38,50,56,.55);
}
.pickcard .ph .ico { width: 15px; height: 15px; color: var(--text-2); flex: 0 0 15px; }
.pickcard .ph .lg { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickcard .ph button { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 15px; }
.pickcard .ph button:hover { color: var(--text); }
.pickcard .ph .del:hover { color: var(--live); }
.pickcard .pb { padding: 10px 11px 11px; }
.pickcard .mrow { display: flex; align-items: flex-start; gap: 10px; }
.pickcard .ev { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickcard .dt { flex: 0 0 auto; text-align: right; font-size: 11.5px; font-weight: 600;
                color: var(--text-2); line-height: 1.35; }
.pickcard .mk { font-size: 12px; font-weight: 600; color: var(--text-2); margin-top: 9px; }
.pickcard .sel-row { display: flex; align-items: center; gap: 9px; margin-top: 3px; }
.pickcard .sel-row .p { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oddchip {
  height: 18px; padding: 0 6px; border-radius: 2px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.oddchip.up { background: var(--up); color: #fff; }
.oddchip.down { background: var(--down); color: #fff; }

.stake-wrap { margin-top: 18px; }
.stake {
  height: 40px; background: var(--surface); border-radius: 3px;
  display: flex; align-items: center; padding: 0 14px;
}
.stake input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.quick button {
  height: 30px; background: var(--surface); border-radius: 3px;
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.quick button:hover { background: var(--hover); }
.quick button svg { width: 15px; height: 15px; color: var(--text-2); }

.totals { margin-top: 20px; }
.totals .t {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700; padding: 4px 0;
}
.totals .t .v { color: var(--accent); }

.notice {
  margin-top: 16px; background: var(--surface-2);
  border-left: 4px solid var(--accent); border-radius: 2px;
  padding: 13px 14px 13px 12px; display: flex; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5;
}
.notice svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); margin-top: 2px; }
.notice a { color: var(--accent); text-decoration: underline; }
.notice.good { border-left-color: var(--up); }
.notice.good svg { color: var(--up); }
.notice.bad { border-left-color: var(--live); }
.notice.bad svg { color: var(--live); }

.totals .t.bal { color: var(--text-2); font-weight: 600; }
.totals .t.bal span:last-child { color: var(--text); font-weight: 700; }

.place[disabled] { cursor: not-allowed; }
.place.ready[disabled] { opacity: .7; }

.place {
  width: 100%; height: 44px; margin-top: 16px; border-radius: var(--radius);
  background: var(--disabled); color: rgba(227,239,244,.55);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.place.ready { background: var(--accent); color: var(--accent-ink); }
.place.ready:hover { filter: brightness(1.07); }

/* ------------------------------------------------------ misc / states --- */
.empty-state {
  padding: 70px 20px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text-dim);
}
.skeleton { animation: pulse 1.15s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.sk-row { height: var(--row-h); margin-bottom: 2px; border-radius: var(--radius);
          background: var(--surface); }
.sk-card { height: 51px; margin-bottom: 2px; border-radius: var(--radius);
           background: var(--surface); }

.flag {
  width: 20px; height: 14px; flex: 0 0 20px; border-radius: 2px;
  object-fit: cover; background: var(--surface-3);
}
.flag-globe { width: 17px; height: 17px; flex: 0 0 17px; color: var(--text-2); }

/* floating "More info" tab, bottom-centre */
.moreinfo {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 40; height: 30px; padding: 0 18px;
  background: var(--surface); border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.moreinfo svg { width: 13px; height: 13px; color: var(--text-2); }

@media (max-width: 1600px) {
  :root { --slip-w: 300px; --sidebar-w: 260px; }
}
/* On the 1440px stage the board gets ~1160px — tighten the rails and the
   odds cells so both sidebars survive and team names keep room to breathe. */
@media (max-width: 1300px) {
  :root { --sidebar-w: 224px; --slip-w: 264px; --odd-w: 58px; }
  .main-scroll { padding: 20px 16px 32px; }
  .side-search { padding: 16px; }
  .side-body { padding: 0 16px 20px; }
  .slip-head, .slip-body { padding-left: 16px; padding-right: 16px; }
  .team .nm { font-size: 12.5px; }
  .odd { font-size: 12.5px; }
}
@media (max-width: 1120px) {
  :root { --sidebar-w: 204px; --slip-w: 248px; --odd-w: 52px; }
}
@media (max-width: 1400px) {
  .tpl-nav { width: 72px; flex-basis: 72px; }
  .tpl-nav .wm, .tpl-nav .collapse,
  .tpl-nav .tpl-sec .lbl, .tpl-nav .tpl-sec .chev { display: none; }
  .tpl-nav .tpl-sec { padding: 0 26px; }
}
@media (max-width: 1000px) {
  .side { display: none; }
  .tpl-search { width: 300px; }
}
@media (max-width: 900px) {
  .slip { display: none; }
  .mgrid { grid-template-columns: 1fr; }
  .mv { grid-template-columns: 1fr; }
  .page-title { font-size: 26px; }
  .main-scroll { padding: 16px; }
}


/* ------------------------------------------------------------- my bets -- */
.bets { display: flex; flex-direction: column; gap: 10px; }
.bet { background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.bet-h {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px;
  background: var(--surface); font-size: 12.5px; font-weight: 700;
}
.bet-h .code { color: var(--text); }
.bet-h .when { color: var(--text-2); font-weight: 600; }
.bet-h .tag {
  margin-left: auto; height: 20px; padding: 0 10px; border-radius: 10px;
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
}
.bet-h .tag.s1  { background: rgba(27,176,120,.18); color: var(--up); }
.bet-h .tag.s2  { background: rgba(229,64,94,.18); color: var(--live); }
.bet-h .tag.s0  { background: rgba(0,116,255,.16); color: var(--accent); }
.bet-picks { padding: 4px 0; }
.bet-pick {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  font-size: 13px;
}
.bet-pick .ev { flex: 1; min-width: 0; font-weight: 700; color: var(--text);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-pick .mk { flex: 0 1 auto; min-width: 0; color: var(--text-2); font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-pick .od { flex: 0 0 auto; font-weight: 700; color: var(--accent); }
.bet-f {
  display: flex; gap: 26px; padding: 10px 14px;
  border-top: 1px solid var(--bg); font-size: 12.5px; color: var(--text-2);
}
.bet-f b { color: var(--text); font-weight: 700; margin-left: 4px; }

/* ------------------------------------------------- live highlights ------ */
.hl { margin-bottom: 18px; }
.hl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hl-head .t { font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.hl-pill {
  height: 22px; padding: 0 11px; border-radius: 11px;
  display: inline-flex; align-items: center;
  background: rgba(255,71,120,.16); color: var(--hl-pink);
  font-size: 12px; font-weight: 700;
}
.hl-rail {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.hl-rail::-webkit-scrollbar { display: none; }
.hl-rail.dragging { cursor: grabbing; scroll-behavior: auto; }
.hl-rail.dragging * { cursor: grabbing !important; }

/* three across, the rest scroll */
.hl-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  background: var(--surface-2); border-radius: var(--radius); overflow: hidden;
}
.hl-top {
  height: 38px; display: flex; align-items: center; padding: 0 14px;
  background: var(--surface); font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-body { padding: 10px 14px 12px; }
.hl-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hl-min { font-size: 12.5px; font-weight: 700; color: var(--hl-pink); }
.hl-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.hl-more svg { width: 13px; height: 13px; }
.hl-more:hover { color: var(--text); }

.hl-main { display: flex; align-items: center; gap: 12px; }
.hl-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hl-team .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-team .sc { font-size: 13px; font-weight: 700; color: var(--hl-pink); }

.hl-odds { flex: 0 0 auto; display: flex; gap: 6px; }
.hl-odd {
  position: relative; width: 54px; height: 50px; border-radius: 4px;
  background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; transition: background .1s;
}
.hl-odd:hover { background: var(--hover); }
.hl-odd b { font-size: 13px; font-weight: 700; color: var(--text); }
.hl-odd span { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.hl-odd.empty { cursor: default; }
.hl-odd.empty:hover { background: var(--surface); }
.hl-odd.on { background: var(--accent); }
.hl-odd.on b, .hl-odd.on span { color: var(--accent-ink); }
/* movement between polls: the previous price struck through above the new one */
.hl-odd .was {
  font-size: 10px; font-style: normal; font-weight: 600;
  color: var(--text-faint); text-decoration: line-through; line-height: 1;
}
.hl-odd.up   { background: rgba(27,176,120,.16); }
.hl-odd.up b { color: var(--up); }
.hl-odd.down { background: rgba(229,64,94,.16); }
.hl-odd.down b { color: var(--down); }

@media (max-width: 1300px) {
  .hl-odd { width: 46px; height: 46px; }
  .hl-head .t { font-size: 18px; }
}

/* -------------------------------------------------- winning bets ------- */
.wb { margin-top: 26px; }
.wb-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.wb-head .ico { width: 18px; height: 18px; color: var(--text); }
.wb-head .t {
  font-size: 15px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text);
}
.wb-rail {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.wb-rail::-webkit-scrollbar { display: none; }
.wb-rail.dragging { cursor: grabbing; scroll-behavior: auto; }
.wb-rail.dragging * { cursor: grabbing !important; }

/* three across, the rest scroll */
.wb-card {
  flex: 0 0 calc((100% - 2 * 12px) / 3); min-width: 0;
  background: var(--surface-2); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.wb-sel { background: var(--surface); border-radius: 4px; overflow: hidden; }
.wb-ev {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  background: rgba(0,0,0,.16); font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.wb-ev .ico { width: 13px; height: 13px; flex: 0 0 13px; color: var(--text-dim); }
.wb-ev span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-line { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px 0; }
.wb-mk { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text-2);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-od { font-size: 14px; font-weight: 800; color: var(--win-green); }
.wb-pick {
  padding: 0 10px 9px; font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-foot { margin-top: auto; padding-top: 2px; }
.wb-last { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.wb-tot { display: flex; align-items: center; gap: 12px; }
.wb-tot span { font-size: 13px; font-weight: 700; color: var(--text); }
.wb-tot b { color: var(--win-green); font-weight: 800; margin-left: 4px; }
.wb-add {
  margin-left: auto; height: 32px; padding: 0 16px; border-radius: 5px;
  background: var(--win-green); color: #06231A;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.wb-add:hover { filter: brightness(1.07); }

@media (max-width: 1300px) {
  .wb-add { padding: 0 11px; font-size: 12px; }
  .wb-tot span { font-size: 12px; }
}

/* market search in the detail toolbar */
.md-tools { align-items: center; }
.mkt-find { display: flex; align-items: center; gap: 6px; }
.mkt-find button { width: 20px; height: 20px; color: var(--text-2); }
.mkt-find button:hover { color: var(--text); }
.mkt-find input {
  width: 0; padding: 0; border: 0; outline: none; background: none;
  font-size: 13px; color: var(--text); transition: width .18s, padding .18s;
}
.mkt-find.open input {
  width: 168px; padding: 0 10px; height: 28px;
  background: var(--surface); border-radius: 4px;
}
.chip.star { display: inline-flex; align-items: center; gap: 4px; }
.chip.star svg { width: 12px; height: 12px; margin: 0; }
.mkt-h .mfav.on { color: var(--accent); }

/* ===================================================== light theme fixes ==
   Anything painted with a hardcoded white/dark value needs a light-mode
   counterpart, or the shell reads as dark chrome on a light page. */
:root[data-theme="light"] .tpl-brand .wm { color: var(--text); }
:root[data-theme="light"] .tpl-sec:hover,
:root[data-theme="light"] .tpl-item:hover { background: rgba(0,0,0,.04); }
:root[data-theme="light"] .tpl-search { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tpl-search input { color: var(--text); }
:root[data-theme="light"] .tpl-icon-btn:hover { background: rgba(0,0,0,.07); color: var(--text); }
:root[data-theme="light"] .tpl-brand .collapse { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tpl-brand .collapse:hover { background: rgba(0,0,0,.1); color: var(--text); }
:root[data-theme="light"] .tpl-menu::-webkit-scrollbar-thumb { background: #C7D2DA; }
:root[data-theme="light"] .scroll::-webkit-scrollbar-thumb:hover,
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #A9B7C2; }

/* gold on a light surface is unreadable — darken the live score */
:root[data-theme="light"] .lscore { color: #B07A00; }
:root[data-theme="light"] .hl-odd .was, :root[data-theme="light"] .odd .was { color: #93A3AB; }
:root[data-theme="light"] .wb-ev { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .drop-menu,
:root[data-theme="light"] .mode-menu { box-shadow: 0 12px 28px rgba(20,40,60,.14); }
:root[data-theme="light"] .banner-slide::before {
  background:
    radial-gradient(70% 120% at 50% 118%, rgba(0,116,255,.12) 0%, transparent 62%),
    radial-gradient(52% 90% at 12% -12%, rgba(229,64,94,.10) 0%, transparent 60%),
    linear-gradient(160deg, #E8EEF4 0%, #DDE6EE 48%, #D3DEE8 100%);
}
:root[data-theme="light"] .banner-slide h2 { text-shadow: none; }
:root[data-theme="light"] .banner-slide::after { border-top-color: rgba(0,0,0,.06); }
:root[data-theme="light"] .banner-nav { background: rgba(255,255,255,.55); }
:root[data-theme="light"] .banner-nav:hover { background: rgba(255,255,255,.85); }
:root[data-theme="light"] .sb-tab { background: rgba(255,255,255,.5); }
:root[data-theme="light"] .periods > span { background: rgba(255,255,255,.5); }
:root[data-theme="light"] .tpl-sec.on { background: rgba(0,116,255,.08); }

/* ------------------------------------------------- my bets filters ------ */
.bets-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--track); margin-bottom: 16px;
}
.bets-tabs { display: flex; align-items: stretch; gap: 2px; }
.bets-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap;
}
.bets-tab:hover { color: var(--text-2); }
.bets-tab.on { color: var(--text); }
.bets-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
}
.bets-tab .n {
  min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2);
  font-size: 11.5px; font-weight: 700;
}
.bets-tab.on .n { background: var(--accent); color: var(--accent-ink); }
.bets-search {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 12px; margin-bottom: 6px;
  background: var(--surface); border-radius: var(--radius);
}
.bets-search svg { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 15px; }
.bets-search input {
  width: 190px; background: none; border: 0; outline: none;
  font-size: 13px; color: var(--text);
}
.bets-search input::placeholder { color: var(--text-dim); }
@media (max-width: 1300px) {
  .bets-tab { padding: 0 11px; font-size: 12.5px; }
  .bets-search input { width: 130px; }
}

/* suspended selections: padlock, not clickable */
.odd.lock, .hl-odd.lock, .rail-odd.lock {
  cursor: not-allowed; color: var(--text-faint);
  background: var(--surface-3);
}
.odd.lock:hover, .hl-odd.lock:hover, .rail-odd.lock:hover { background: var(--surface-3); }
.odd.lock svg, .hl-odd.lock svg, .rail-odd.lock svg {
  width: 13px; height: 13px; color: var(--text-faint);
}
.hl-odd.lock span { font-size: 11px; font-weight: 600; color: var(--text-faint); }

/* Kept last in the file on purpose: several desktop rules for the market
   search and tools row appear further down and would otherwise win on
   source order at equal specificity. */
/* =========================================================== phone ====== */
/* Below this width the desktop chrome cannot fit: the subbar nav, the league
   sidebar and the betslip column all go, replaced by the fixed tab bar and the
   betslip FAB the reference book uses. Everything that was a fixed-width flex
   track (odds cells, market grids) has to become fluid here or the page scrolls
   sideways — see .row below, which is the worst offender at six 58px cells. */
.tabbar, .slip-fab { display: none; }

@media (max-width: 760px) {
  :root { --odd-w: 54px; --row-h: 56px; }

  .app { position: relative; }
  .main-scroll { padding: 12px 10px calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* --- the fixed tab bar replaces the subbar's nav ---------------------- */
  .subbar { height: 48px; padding: 0 10px; gap: 10px; }
  .subbar .mainnav, .subbar-right .fav-chip, .subbar-right .drop { display: none; }
  .subbar .crumbs { font-size: 12.5px; min-width: 0; }
  /* only the event itself matters on a phone — the trail to it does not fit */
  .subbar .crumbs a, .subbar .crumbs .sep { display: none; }
  .subbar .crumbs .cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--track);
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-decoration: none;
    font-size: 10.5px; font-weight: 600; color: var(--text-2);
  }
  .tabbar .tab svg { width: 19px; height: 19px; }
  .tabbar .tab.on { color: var(--text); background: var(--surface-2); }

  /* --- betslip FAB ------------------------------------------------------ */
  .slip-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 14px; z-index: 61;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 6px 18px rgba(0,0,0,.42);
  }
  .slip-fab.empty { display: none; }
  .slip-fab svg { width: 21px; height: 21px; }
  .slip-fab .n {
    position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
    padding: 0 5px; border-radius: 10px; background: var(--surface);
    color: var(--text); font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  /* Opened from the FAB, the slip becomes a sheet over the board. On desktop it
     is a column with no background of its own — as a floating sheet it needs
     one, or the board reads straight through it. */
  .slip.sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    width: auto; flex-basis: auto; max-height: 84vh;
    border: 0; border-radius: 16px 16px 0 0;
    background: var(--surface-2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 30px rgba(0,0,0,.55);
  }
  .slip.sheet .slip-head { flex: 0 0 46px; padding: 0 16px; }
  .slip.sheet .slip-body { flex: 1; min-height: 0; overflow-y: auto; }
  /* dim the board so the sheet reads as a layer, not as part of the page */
  .slip.sheet::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(0,0,0,.45);
  }

  /* --- board ------------------------------------------------------------ */
  /* the reference shows 1 / X / 2 only; Value and the totals do not fit */
  .cols-head { display: none; }
  .row > .odd:nth-child(n+5), .lg-head > .lb:nth-child(n+5) { display: none; }
  .row-main { gap: 8px; padding: 0 8px 0 10px; }
  .row-star { display: none; }
  .team .nm { font-size: 12px; white-space: normal; line-height: 1.25; }
  .when { font-size: 11px; }
  .odd { font-size: 13px; }
  .lg-head { height: 34px; }
  .lg-head .nm, .lg-bar .nm { font-size: 12.5px; }

  .strip-scroll { gap: 18px; }
  .hl-rail { gap: 8px; }
  .banner { height: 150px; }

  /* --- event detail ----------------------------------------------------- */
  .md-hero { border-radius: var(--radius); }
  .md-hero .hero-in { padding: 18px 12px; }
  .md-hero .vs { gap: 8px; }
  .md-hero .tn { font-size: 14px; white-space: normal; line-height: 1.2; }
  .md-hero .ko { font-size: 19px; }
  .md-hero .dt { font-size: 11.5px; }
  .md-hero .crest { width: 26px; height: 26px; flex-basis: 26px; }

  /* one scrolling row, not a wrapping block that pushes the markets down */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -10px 12px; padding: 0 10px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  /* the search collapses behind an icon on desktop; on a phone there is room
     for it and the reference keeps it open */
  .md-tools { justify-content: space-between; gap: 10px; }
  .mkt-find { flex: 1; min-width: 0; }
  .mkt-find input, .mkt-find.open input {
    width: 100%; opacity: 1; pointer-events: auto; padding: 8px 10px;
  }
  .mkt-find button { display: none; }

  .mkt-h { height: 36px; }
  .mkt-h .nm { font-size: 12.5px; }
  .pick { padding: 0 9px; }
  .pick .lbl { font-size: 11.5px; }
  .pick .val { font-size: 12.5px; }

  .ltabs.inline { overflow-x: auto; scrollbar-width: none; }
  .ltabs.inline::-webkit-scrollbar { display: none; }
  .ltabs.inline a { flex: 0 0 auto; }
}

/* very narrow phones — three odds cells still have to fit beside the teams */
@media (max-width: 400px) {
  :root { --odd-w: 46px; }
  .pick .lbl { font-size: 11px; }
  .team .nm { font-size: 11.5px; }
}