/* GoalBet v2 — responsive App Shell + high-density board. Scoped under .gbx.
   Layout mechanics (header + 3 regions, drawers/sheets) re-position the SAME
   nav/board/betslip per breakpoint:
     desktop >=1280  -> 3-col grid, nav & betslip sticky
     tablet 1024-1279-> 2-col grid, betslip = right slide-in drawer
     mobile  <1024   -> single col, nav = left off-canvas drawer,
                        betslip = bottom bar -> full bottom sheet
   State = two attributes on .gbx-shell (data-nav-open / data-slip-open),
   flipped by gbx-shell.js. All transitions use --dur* tokens, which
   variables.css zeroes under prefers-reduced-motion. */

/* ---- Shell + body scroll lock ---- */
.gbx-shell { min-height: 100vh; background: var(--c-bg); --gbx-head-offset: var(--header-h); }
/* Live-rollout control bar: sits under the production header; carries the
   nav/betslip toggles below desktop (the production header keeps its own controls). */
.gbx-livebar { display: none; }
@media (max-width: 1279.98px) {
  .gbx-livebar {
    position: sticky; top: var(--gbx-head-offset); z-index: var(--z-header);
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 6px var(--sp-3); background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  }
  .gbx-livebar .gbx-icon-btn { color: var(--c-text); width: auto; gap: 6px; padding: 0 8px; }
  .gbx-livebar .gbx-icon-btn:hover { background: var(--c-surface-2); }
  .gbx-livebar__lbl { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
}
.gbx-board__banner { margin-bottom: var(--sp-2); }
body.gbx-scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ---- Header ---- */
.gbx-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--c-brand); color: #fff;
  box-shadow: var(--sh-2);
}
.gbx-header__spacer { flex: 1 1 auto; }
.gbx-logo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-black); font-size: var(--fs-xl); letter-spacing: -.02em; color: #fff;
}
.gbx-logo .gbx-logo__dot { color: var(--c-primary); }

.gbx-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: transparent; color: #fff; border: 1px solid transparent;
  font-size: 18px; cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.gbx-icon-btn:hover { background: rgba(255,255,255,.12); }
.gbx-slip-count {
  position: absolute; top: 1px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-black); line-height: 1;
  background: var(--c-primary); color: var(--c-primary-ink);
  border-radius: var(--r-pill); border: 2px solid var(--c-brand);
}

/* ---- Toggle / bottom-bar visibility (overridden per breakpoint) ---- */
.gbx-nav-toggle, .gbx-slip-toggle, .gbx-slip-bar, .gbx-panel__close { display: none; }

/* ---- Backdrop ---- */
.gbx-scrim {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(7,26,51,.55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}

/* ---- Layout grid ---- */
.gbx-layout {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: var(--sp-3); padding: var(--sp-3);
  align-items: start;
}

/* ---- Region shells ---- */
.gbx-nav, .gbx-betslip {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.gbx-betslip { display: flex; flex-direction: column; }
.gbx-board { min-width: 0; }

/* Sticky head inside scrollable nav / betslip */
.gbx-panel__head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-weight: var(--fw-bold);
}
.gbx-panel__close {
  width: 34px; height: 34px; border-radius: var(--r-md);
  align-items: center; justify-content: center;
  background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border);
  cursor: pointer; font-size: 15px;
}
.gbx-panel__close:hover { border-color: var(--c-primary); color: var(--c-primary-hover); }

/* ===== DESKTOP >=1280 : 3-col grid, sticky rails ===== */
@media (min-width: 1280px) {
  .gbx-layout { grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--slip-w); }
  .gbx-nav, .gbx-betslip {
    position: sticky; top: calc(var(--gbx-head-offset) + var(--sp-3));
    max-height: calc(100vh - var(--gbx-head-offset) - var(--sp-3) * 2);
    overflow: auto;
  }
}

/* ===== TABLET 1024-1279 : 2-col grid, betslip = right drawer ===== */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .gbx-layout { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .gbx-nav {
    position: sticky; top: calc(var(--gbx-head-offset) + var(--sp-3));
    max-height: calc(100vh - var(--gbx-head-offset) - var(--sp-3) * 2);
    overflow: auto;
  }
  .gbx-slip-toggle { display: inline-flex; }
  .gbx-betslip {
    position: fixed; top: 0; right: 0; z-index: var(--z-betslip);
    width: min(380px, 94vw); height: 100%;
    border-radius: 0; border: 0; border-left: 1px solid var(--c-border);
    overflow: auto;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .gbx-shell[data-slip-open] .gbx-betslip { transform: translateX(0); box-shadow: var(--sh-3); }
  .gbx-betslip .gbx-panel__close { display: inline-flex; }
  .gbx-shell[data-slip-open] .gbx-scrim { opacity: 1; pointer-events: auto; }
}

/* ===== MOBILE <1024 : single col; nav drawer (L); betslip bottom sheet ===== */
@media (max-width: 1023.98px) {
  .gbx-layout { grid-template-columns: minmax(0, 1fr); padding: var(--sp-2); }
  .gbx-nav-toggle { display: inline-flex; }

  .gbx-nav {
    position: fixed; top: 0; left: 0; z-index: var(--z-betslip);
    width: min(300px, 88vw); height: 100%;
    border-radius: 0; border: 0; border-right: 1px solid var(--c-border);
    overflow: auto;
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .gbx-shell[data-nav-open] .gbx-nav { transform: translateX(0); box-shadow: var(--sh-3); }
  .gbx-nav .gbx-panel__close { display: inline-flex; }

  .gbx-betslip {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-betslip);
    width: 100%; height: 88vh; max-height: 88vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border: 0;
    overflow: auto;
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .gbx-shell[data-slip-open] .gbx-betslip { transform: translateY(0); box-shadow: var(--sh-3); }
  .gbx-betslip .gbx-panel__close { display: inline-flex; }

  .gbx-slip-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    height: 56px; padding: 0 var(--sp-4); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--c-brand); color: #fff; border: 0; cursor: pointer;
    box-shadow: 0 -6px 20px rgba(10,37,64,.18);
  }
  .gbx-slip-bar__count { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }
  .gbx-slip-bar__count [data-gbx-slip-count] {
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary); color: var(--c-primary-ink);
    border-radius: var(--r-pill); font-size: 12px; font-weight: var(--fw-black);
  }
  .gbx-slip-bar__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); }
  .gbx-board { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .gbx-shell[data-nav-open] .gbx-scrim,
  .gbx-shell[data-slip-open] .gbx-scrim { opacity: 1; pointer-events: auto; }
  .gbx-shell[data-slip-open] .gbx-slip-bar { opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); }
}

/* ---- Reduced-motion safety net ---- */
@media (prefers-reduced-motion: reduce) {
  .gbx-nav, .gbx-betslip, .gbx-scrim, .gbx-slip-bar { transition: none !important; }
}

/* =====================================================================
   HIGH-DENSITY COMPONENTS (Tier-1 trading-terminal look)
   ===================================================================== */

/* ---- Header: section tabs + balance (extra nav layer) ---- */
.gbx-header__tabs { display: flex; height: 100%; margin-left: var(--sp-2); }
.gbx-htab {
  display: inline-flex; align-items: center; padding: 0 13px; height: 100%;
  color: rgba(255,255,255,.7); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.gbx-htab:hover { color: #fff; }
.gbx-htab.is-active { color: #fff; border-bottom-color: var(--c-primary); }
.gbx-htab__live { margin-left: 5px; font-size: 10px; color: var(--c-live); font-weight: var(--fw-black); }
.gbx-balance {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.08); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.gbx-balance .gbx-num { color: var(--c-primary); }
.gbx-balance__btn {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-primary); color: var(--c-primary-ink); font-weight: var(--fw-black); font-size: 15px;
}
@media (max-width: 1023.98px) { .gbx-header__tabs { display: none; } .gbx-balance { padding: 5px 8px; } .gbx-balance__lbl { display: none; } }

/* ---- Flags + horizontal scrollers ---- */
.gbx-flag {
  width: 18px; height: 18px; border-radius: 4px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: var(--fw-black); color: #fff; background: var(--navy-600); letter-spacing: -.02em;
}
.gbx-hscroll { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.gbx-hscroll::-webkit-scrollbar { height: 6px; }
.gbx-hscroll::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); }
.gbx-hscroll > * { scroll-snap-align: start; }

/* ============ LEFT NAV (extreme density) ============ */
.gbx-nav__search {
  position: sticky; top: 0; z-index: 4;
  padding: 8px 10px; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
}
.gbx-nav__search i { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); font-size: 12px; pointer-events: none; }
.gbx-nav__search input {
  width: 100%; padding: 7px 10px 7px 28px; font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text);
}
.gbx-nav__search input::placeholder { color: var(--c-text-muted); }
.gbx-nav__search input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; background: var(--c-surface); }

/* ---- smart search dropdown ---- */
.gbx-search__clear { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--c-text-muted); cursor: pointer; border-radius: 50%; font-size: 11px; }
.gbx-search__clear:hover { background: var(--c-surface-2); color: var(--c-text); }
.gbx-search__panel {
  position: absolute; top: calc(100% - 1px); left: 10px; right: 10px; z-index: 30;
  max-height: min(62vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-surface); border: 1px solid var(--c-border-strong); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--sh-3);
}
.gbx-search__grp { position: sticky; top: 0; background: var(--c-surface-2); color: var(--c-text-muted);
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-bottom: 1px solid var(--c-border); }
.gbx-search__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--c-border); background: transparent; color: var(--c-text); cursor: pointer; }
.gbx-search__row:last-child { border-bottom: 0; }
.gbx-search__row.is-active { background: var(--c-surface-2); }
.gbx-search__ico { flex: 0 0 18px; text-align: center; color: var(--c-text-muted); font-size: 13px; }
.gbx-search__txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gbx-search__txt b { font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbx-search__txt b em { font-style: normal; color: var(--c-text-muted); font-weight: 400; margin: 0 3px; }
.gbx-search__txt small { color: var(--c-text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbx-search__row mark { background: rgba(245,197,24,.30); color: inherit; border-radius: 2px; padding: 0 1px; }
.gbx-search__live { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #fff; background: var(--c-live, #e0314a); padding: 2px 6px; border-radius: 99px; }
.gbx-search__cnt { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--c-text-muted); }
.gbx-search__loading, .gbx-search__empty { padding: 14px 12px; color: var(--c-text-muted); font-size: var(--fs-sm); text-align: center; }

.gbx-nav__sec { border-bottom: 1px solid var(--c-border); padding-bottom: 3px; }

/* Quick time filter — same look & feel as the Sports menu: a muted section header (.gbx-nav__sec-head)
   over a row of chips that mirror the board's day/time tabs (.gbx-day). */
.gbx-navfilter {
  display: flex; gap: 6px; padding: 3px 12px 8px;
  overflow-x: auto; scrollbar-width: none;
}
.gbx-navfilter::-webkit-scrollbar { display: none; }
.gbx-nf {
  flex: 0 0 auto; padding: 5px 11px; border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text-muted);
  font-size: 12px; font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.gbx-nf:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.gbx-nf.is-active { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }

/* In-menu Odds format selector — styled exactly like a Sports-menu section: a muted .gbx-nav__sec-head
   header + flat rows (like .gbx-navsport/.gbx-lea) whose selected item goes --c-primary-hover, NOT a
   gold bar or boxed chips. Collapsible via the header chevron. */
.gbx-oddsec__head {
  display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 3px;
  font-size: 10px; font-weight: var(--fw-black); letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-text-muted); cursor: pointer; user-select: none;
}
.gbx-oddsec__title { display: inline-flex; align-items: center; }
.gbx-oddsec__title i { margin-right: 6px; }
.gbx-oddsec__chev { font-size: 10px; color: var(--c-text-muted); transition: transform .2s; }
.gbx-oddsec.is-collapsed .gbx-oddsec__opts { display: none; }
.gbx-oddsec.is-collapsed .gbx-oddsec__chev { transform: rotate(180deg); }
.gbx-oddsec__opts { display: flex; flex-direction: column; }
.gbx-oddsec__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 7px 12px; border: 0; background: transparent;
  color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.gbx-oddsec__opt:hover { background: var(--c-surface-2); }
.gbx-oddsec__opt.is-on { color: var(--c-primary-hover); }
.gbx-oddsec__mk { opacity: 0; font-size: 12px; color: var(--c-primary-hover); }
.gbx-oddsec__opt.is-on .gbx-oddsec__mk { opacity: 1; }
.gbx-nav__sec-head {
  display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 3px;
  font-size: 10px; font-weight: var(--fw-black); letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-muted);
}
.gbx-nav__sec-head i { margin-right: 6px; }
.gbx-nav__sec-head a { font-size: 10px; font-weight: var(--fw-bold); color: var(--c-primary-hover); text-transform: none; letter-spacing: 0; }

.gbx-lea { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.gbx-lea:hover { background: var(--c-surface-2); }
.gbx-lea__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-lea__count { margin-left: auto; font-size: 11px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-lea__star { color: var(--warn); font-size: 12px; flex: none; }

.gbx-navsport { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.gbx-navsport:hover { background: var(--c-surface-2); }
.gbx-navsport > i.sport { width: 16px; text-align: center; color: var(--c-text-muted); }
.gbx-navsport.is-active { color: var(--c-primary-hover); }
.gbx-navsport.is-active > i.sport { color: var(--c-primary-hover); }
.gbx-navsport .meta { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.gbx-navsport .live { font-size: 9px; font-weight: var(--fw-black); color: #fff; background: var(--c-live); border-radius: 3px; padding: 1px 4px; letter-spacing: .03em; }
.gbx-navsport .cnt { font-size: 10px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-navsport .chev { font-size: 10px; color: var(--c-text-muted); }

/* ============ CENTER BOARD ============ */
/* Day-of-week selector */
.gbx-daybar { margin-bottom: var(--sp-2); }
.gbx-day {
  flex: none; min-width: 60px; text-align: center; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.25;
}
.gbx-day b { display: block; font-size: 10px; font-weight: var(--fw-bold); color: var(--c-text-muted); }
.gbx-day.is-active { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.gbx-day.is-active b { color: var(--c-primary-ink); opacity: .8; }

/* "Time" filter — events starting within the next N hours */
.gbx-timebar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.gbx-timebar__lbl { flex: none; font-size: 11px; font-weight: var(--fw-black); letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-muted); }
.gbx-timebar__chips { display: flex; gap: 6px; min-width: 0; }
.gbx-time {
  flex: none; padding: 5px 12px; cursor: pointer; line-height: 1.25;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text);
  transition: border-color .14s, background .14s;
}
.gbx-time:hover { border-color: var(--c-primary); }
.gbx-time.is-active { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }

/* Sports icon carousel */
.gbx-sportscar { margin-bottom: var(--sp-3); }
.gbx-sport {
  flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; cursor: pointer; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gbx-sport i { font-size: 17px; color: var(--c-text); }
.gbx-sport span { font-size: 11px; font-weight: var(--fw-semibold); }
.gbx-sport small { font-size: 10px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-sport:hover { border-color: var(--c-border-strong); }
.gbx-sport.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-glow); }
.gbx-sport.is-active i { color: var(--c-primary-hover); }

/* Live highlights rail */
.gbx-rail-title { display: flex; align-items: center; gap: 8px; margin: var(--sp-2) 0; font-size: var(--fs-sm); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .04em; }
.gbx-rail-title .gbx-badge--live { text-transform: none; letter-spacing: 0; }
.gbx-live-rail { margin-bottom: var(--sp-3); }
.gbx-livecard {
  flex: none; width: 224px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-1);
}
.gbx-livecard__top { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--c-text-muted); }
.gbx-livecard__min { color: var(--c-live); font-weight: var(--fw-black); }
.gbx-livecard__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.gbx-livecard__row .gbx-num { font-weight: var(--fw-black); color: var(--c-primary-hover); }
.gbx-livecard__odds { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 2px; }
.gbx-livecard__odds .gbx-oc { padding: 4px 2px; }

/* Section header bar + sport sub-tabs + market dropdown bar */
.gbx-sechead {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 6px;
  background: var(--c-brand); color: #fff; border-radius: var(--r-md); font-weight: var(--fw-black); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .03em;
}
.gbx-subtabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--c-border); margin-bottom: 6px; scrollbar-width: none; }
.gbx-subtabs::-webkit-scrollbar { display: none; }
.gbx-subtab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.gbx-subtab.is-active { color: var(--c-text); border-bottom-color: var(--c-primary); }

.gbx-mktbar {
  position: sticky; top: var(--gbx-head-offset); z-index: 5;
  display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto;
  padding: var(--sp-2) 0; margin-bottom: var(--sp-2); background: var(--c-bg); scrollbar-width: none;
}
.gbx-mktbar::-webkit-scrollbar { display: none; }
.gbx-mkt-dd {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
.gbx-mkt-dd i { font-size: 9px; opacity: .6; }
.gbx-mkt-dd.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* ---- The dense odds grid (frozen team col + scrollable markets) ---- */
.gbx-lg {
  --frozen1: 50px;
  /* Track templates — SINGLE source. The row, the column header, and the two
     market-group sub-grids all derive their columns from these, so everything
     stays aligned without display:contents. */
  --mrow-primary: 50px 50px 50px;                                              /* 1 · X · 2 */
  --mrow-more: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;              /* every odds + the goals-line: identical 50px (mathematically uniform) */
  --mrow: var(--frozen1) 224px var(--mrow-primary) var(--mrow-more) 28px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
  overflow: hidden; margin-bottom: var(--sp-2);
  /* offscreen league tables skip layout+paint -> keeps 60fps with long lists */
  content-visibility: auto; contain-intrinsic-size: 0 360px;
}
.gbx-lg__head {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer;
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.gbx-lg__head .gbx-lea__count { margin-left: 0; }
.gbx-lg__head .gbx-lg__chev { margin-left: auto; color: var(--c-text-muted); font-size: 11px; transition: transform .2s; }
/* Collapse a competition's matches via the header chevron (up = open, rotates down when collapsed). */
.gbx-lg.is-collapsed .gbx-lg__scroll { display: none; }
.gbx-lg.is-collapsed .gbx-lg__chev { transform: rotate(180deg); }
.gbx-lg.is-collapsed { contain-intrinsic-size: 0 42px; }
.gbx-lg__scroll { overflow-x: auto; scrollbar-width: thin; }
.gbx-lg__scroll::-webkit-scrollbar { height: 8px; }
.gbx-lg__scroll::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); }

.gbx-cols, .gbx-mrow { display: grid; grid-template-columns: var(--mrow); min-width: max-content; gap: 3px; }
.gbx-cols {
  align-items: center; padding: 4px 0; border-bottom: 1px solid var(--c-border); background: var(--c-surface);
  font-size: 10px; font-weight: var(--fw-black); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .03em;
}
.gbx-cols > span { display: flex; align-items: center; justify-content: center; text-align: center; }
.gbx-mrow { align-items: stretch; padding: 3px 0; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.gbx-mrow:last-child { border-bottom: 0; }
.gbx-mrow:hover { background: var(--c-surface-2); }

/* frozen first two columns (desktop horizontal-scroll only) */
@media (min-width: 1024px) {
  .gbx-cols .gbx-c-status, .gbx-cols .gbx-c-teams,
  .gbx-mrow .gbx-c-status, .gbx-mrow .gbx-c-teams { position: sticky; z-index: 2; background: inherit; }
  .gbx-c-status { left: 0; }
  .gbx-c-teams { left: var(--frozen1); box-shadow: 1px 0 0 var(--c-border); }
}

.gbx-c-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 6px; font-size: 10px; line-height: 1.2; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-c-status .gbx-live-tag { color: #fff; background: var(--c-live); border-radius: 3px; padding: 0 4px; font-size: 8px; font-weight: var(--fw-black); letter-spacing: .03em; }
.gbx-c-status .min { color: var(--c-live); font-weight: var(--fw-black); }
.gbx-c-teams { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 8px; min-width: 0; }
.gbx-c-teams .gbx-lg-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-c-teams .gbx-team { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); min-width: 0; }
.gbx-c-teams .gbx-team__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-c-teams .gbx-team__score { margin-left: auto; padding-left: 8px; font-weight: var(--fw-black); color: var(--c-primary-hover); font-variant-numeric: tabular-nums; }

/* odds cell */
.gbx-oc {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 100%; box-sizing: border-box; padding: 0 2px;   /* fill the rigid grid cell exactly; identical padding for numbers & padlocks */
  border-radius: var(--r-sm); border: 1px solid var(--c-border); background: var(--c-surface-2);
  font-size: 13px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--c-text);
  cursor: pointer; min-width: 0; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.gbx-oc:hover { border-color: var(--c-primary); background: var(--c-surface); }
.gbx-oc.is-selected { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-glow); }
.gbx-oc.is-locked { cursor: not-allowed; background: var(--c-surface); color: var(--c-text-muted); border-style: dashed; }
.gbx-oc.is-locked::before { content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; opacity: .55; }
.gbx-oc.gbx-grp { box-shadow: inset 2px 0 0 -1px var(--c-border-strong); }  /* zero-width separator (no margin -> stays aligned) */
.gbx-oc__mv { font-size: 8px; line-height: 1; }
.gbx-oc__mv.up { color: var(--up); } .gbx-oc__mv.down { color: var(--down); }
.gbx-cols .gbx-grp { margin-left: 0; }

/* goals-line selector + expand */
.gbx-line { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; box-sizing: border-box; border-radius: var(--r-sm); border: 1px solid var(--c-border); background: var(--c-surface); font-size: 11px; font-weight: var(--fw-bold); color: var(--c-text-muted); cursor: pointer; }
.gbx-line i { font-size: 8px; }
.gbx-mrow__exp { display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); cursor: pointer; background: transparent; border: 0; }
.gbx-mrow__exp:hover { color: var(--c-primary-hover); }

/* Robust grid — NO display:contents (some engines refuse to flatten a contents
   wrapper into a grid, collapsing each group into a single track). Instead the
   row's direct children are EXPLICITLY placed on the 16-track grid, and each
   market group is a real nested grid whose column template mirrors the parent
   (var(--mrow-primary) / var(--mrow-more)). Header labels and odds align on every
   browser. On mobile these same wrappers become the card's stacked grids. */
@media (min-width: 1024px) {
  .gbx-mrow > .gbx-c-status    { grid-column: 1; }
  .gbx-mrow > .gbx-c-teams     { grid-column: 2; }
  .gbx-mrow > .gbx-mg--primary { grid-column: 3 / span 3; display: grid; grid-template-columns: var(--mrow-primary); gap: 3px; }
  .gbx-mrow > .gbx-mg--more    { grid-column: 6 / span 10; display: block; }
  .gbx-mg--more > .gbx-mg__inner { display: grid; grid-template-columns: var(--mrow-more); gap: 3px; width: 100%; height: 100%; }
  .gbx-mrow > .gbx-mrow__exp   { grid-column: 16; }
}
.gbx-mg__cap { display: none; }
.gbx-oc__lbl { display: none; }
.gbx-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* ===== MOBILE (<1024): expandable card layout (native-app UX) =====
   Same DOM as desktop. The league table sheds its grid/scroll chrome and each
   .gbx-mrow becomes a vertical card: stacked teams (scores left), primary 1X2
   only, then a wide chevron that accordions the secondary markets open. */
@media (max-width: 1023.98px) {
  .gbx-header__tabs { display: none; }

  .gbx-lg { border: 0; background: transparent; overflow: visible; margin-bottom: 0; content-visibility: visible; }
  .gbx-lg__scroll { overflow: visible; }
  .gbx-cols { display: none; }                       /* no column header in card mode */

  .gbx-mrow {
    display: block; min-width: 0; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: 8px 10px; margin-bottom: 8px;
  }
  .gbx-mrow:hover { background: var(--c-surface); }

  /* status row + (frozen cells become normal flow) */
  .gbx-c-status {
    position: static; left: auto; box-shadow: none;
    flex-direction: row; align-items: center; gap: 6px; padding: 0 0 6px;
  }
  /* teams stacked, scores on the LEFT */
  .gbx-c-teams { position: static; left: auto; box-shadow: none; padding: 0 0 8px; gap: 4px; }
  .gbx-c-teams .gbx-team { font-size: 14px; gap: 8px; }
  .gbx-c-teams .gbx-team__score { order: -1; margin-left: 0; min-width: 16px; color: var(--c-text); }

  /* primary market = 3 large boxes */
  .gbx-mg--primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .gbx-mg--primary .gbx-oc { height: 46px; font-size: 15px; }

  /* secondary markets = accordion (animate grid rows 0fr -> 1fr; GPU-cheap, no JS height math) */
  .gbx-mg--more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
  .gbx-mg__inner {
    overflow: hidden; min-height: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding-top: 0; transition: padding-top var(--dur-slow) var(--ease-out);
  }
  .gbx-mrow.is-open .gbx-mg--more { grid-template-rows: 1fr; }
  .gbx-mrow.is-open .gbx-mg__inner { padding-top: 8px; }

  /* market captions span the row as group headers */
  .gbx-mg__cap {
    display: block; grid-column: 1 / -1; margin-top: 2px;
    font-size: 10px; font-weight: var(--fw-black); letter-spacing: .04em;
    text-transform: uppercase; color: var(--c-text-muted);
  }
  .gbx-mg__inner .gbx-oc { height: 42px; flex-direction: column; gap: 1px; }
  .gbx-mg__inner .gbx-oc__lbl { display: block; font-size: 9px; color: var(--c-text-muted); }
  .gbx-line { margin-left: 0; height: 42px; }
  .gbx-grp { margin-left: 0 !important; box-shadow: none !important; }

  /* wide accordion chevron at the bottom of the card */
  .gbx-mrow__exp {
    display: flex; width: 100%; height: auto; margin-top: 8px; padding: 7px 0;
    border-top: 1px solid var(--c-border); color: var(--c-text-muted);
  }
  .gbx-mrow__exp i { transition: transform var(--dur) var(--ease-out); }
  .gbx-mrow.is-open .gbx-mrow__exp i { transform: rotate(180deg); }
}

/* ============ RIGHT RAIL (widgets + pro betslip) ============ */
.gbx-rail { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); }
.gbx-widget { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
.gbx-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.gbx-widget__head .gbx-widget__ic { color: var(--c-primary-hover); margin-right: 6px; }
.gbx-widget__head .gbx-badge { font-size: 11px; font-weight: var(--fw-black); color: var(--c-primary-ink); background: var(--c-primary); border-radius: var(--r-pill); padding: 1px 8px; }
.gbx-widget__body { padding: 11px 12px; }
.gbx-widget__note { font-size: 11px; color: var(--c-text-muted); margin-top: 6px; }

.gbx-fastcode { display: flex; gap: 6px; }
.gbx-fastcode input { flex: 1; min-width: 0; padding: 9px 10px; font: inherit; font-size: var(--fs-sm); letter-spacing: .04em; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface-2); text-transform: uppercase; }
.gbx-fastcode input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.gbx-fastcode .gbx-btn { padding: 9px 14px; }

.gbx-slip__bartop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 11px; color: var(--c-text-muted); }
.gbx-slip__forplayer { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--c-primary); border-radius: var(--r-md); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.gbx-slip__forplayer label { display: block; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 5px; }
.gbx-slip__forplayer .gbx-forplayer { width: 100%; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font-size: 13px; font-weight: var(--fw-bold); }
.gbx-slip__payagent { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 9px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; transition: border-color .15s, background .15s; }
.gbx-slip__payagent.is-on { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.gbx-slip__payagent label { margin: 0; }
.gbx-slip__payagent input { margin-top: 1px; accent-color: var(--c-primary); width: 15px; height: 15px; flex: none; cursor: pointer; }
.gbx-slip__payagent-txt { display: flex; flex-direction: column; gap: 1px; text-transform: none; letter-spacing: 0; }
.gbx-slip__payagent-txt b { font-size: 12px; font-weight: var(--fw-bold); color: var(--c-text); text-transform: none; letter-spacing: 0; }
.gbx-slip__payagent-txt em { font-size: 10px; font-style: normal; color: var(--c-text-muted); }
.gbx-slip__fmt { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); cursor: pointer; font-weight: var(--fw-bold); color: var(--c-text); }
.gbx-slip__tabs { display: flex; gap: 2px; padding: 4px; margin-bottom: 10px; background: var(--c-surface-2); border-radius: var(--r-md); }
.gbx-slip__tab { flex: 1; text-align: center; padding: 6px 4px; cursor: pointer; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text-muted); }
.gbx-slip__tab.is-active { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }
.gbx-slip-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.gbx-slip-row__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gbx-slip-row__pick { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.gbx-slip-row__rm { background: none; border: 0; cursor: pointer; color: var(--c-text-muted); font-size: 13px; }
.gbx-slip-row__rm:hover { color: var(--c-down); }
.gbx-slip-row__meta { font-size: 11px; color: var(--c-text-muted); }
.gbx-slip-row__odd { display: flex; align-items: center; justify-content: space-between; }
.gbx-slip-row__odd .gbx-num { font-weight: var(--fw-black); font-size: var(--fs-md); }
.gbx-stake { width: 100%; padding: 10px 12px; margin: 4px 0 8px; font: inherit; font-variant-numeric: tabular-nums; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); }
.gbx-stake:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.gbx-quickstake { display: flex; gap: 6px; margin-bottom: 10px; }
.gbx-quickstake button { flex: 1; padding: 6px 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface-2); }
.gbx-quickstake button:hover { border-color: var(--c-primary); color: var(--c-primary-hover); }
.gbx-slip__line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: var(--fs-sm); }
.gbx-slip__line strong { font-variant-numeric: tabular-nums; }
.gbx-slip__line .boost { color: var(--up); font-weight: var(--fw-bold); }
.gbx-slip__line--big { font-size: var(--fs-md); font-weight: var(--fw-bold); padding-top: 6px; border-top: 1px dashed var(--c-border); margin-top: 4px; }
.gbx-slip__line--big strong { color: var(--c-primary-hover); }
.gbx-slip__actions { display: flex; gap: 6px; margin-top: 8px; }
.gbx-slip__actions .gbx-btn--primary { flex: 2; }
.gbx-slip__actions .gbx-btn--ghost { flex: 1; }

.gbx-pop { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.gbx-pop:last-child { border-bottom: 0; }
.gbx-pop__desc { min-width: 0; }
.gbx-pop__desc b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-pop__desc small { color: var(--c-text-muted); font-size: 11px; }
.gbx-pop__odds { margin-left: auto; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.gbx-pop__add { flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); background: var(--c-surface); cursor: pointer; color: var(--c-primary-hover); font-weight: var(--fw-black); font-size: 15px; line-height: 1; }
.gbx-pop__add:hover { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-primary-ink); }

/* =====================================================================
   STEP 4 — BETSLIP ENGINE (selection sync, errors, inline receipt)
   ===================================================================== */
.gbx-slip__accept { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--c-text-muted); cursor: pointer; }
.gbx-slip__accept input { accent-color: var(--c-primary); width: 13px; height: 13px; }

.gbx-slip__system { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gbx-slip__system label { font-size: 11px; font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); }
.gbx-slip__sysk { flex: 1; padding: 7px 10px; font: inherit; font-size: var(--fs-sm); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text); cursor: pointer; }
.gbx-slip__sysk:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

.gbx-slip__rows { margin-bottom: 4px; }
.gbx-slip-row.is-locked { opacity: .65; }
.gbx-slip-row__was { text-decoration: line-through; color: var(--c-text-muted); font-weight: var(--fw-semibold); margin-right: 5px; }
.gbx-slip-row__price.up { color: var(--up); }
.gbx-slip-row__price.down { color: var(--down); }

.gbx-slip__note { font-size: 11px; color: var(--c-text-muted); margin: 6px 0; }
.gbx-slip__note--cap { color: var(--c-warn, #e0a415); font-weight: 600; }
.gbx-slip__note.is-hidden { display: none; }
.gbx-slip__hint { font-size: 11px; color: var(--c-text-muted); text-align: right; margin: 2px 2px 6px; opacity: .85; }
.gbx-slip__line.is-hidden { display: none; }

.gbx-slip__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-text-muted); }
.gbx-slip__empty i { font-size: 28px; color: var(--c-border-strong); }
.gbx-slip__empty p { font-weight: var(--fw-bold); color: var(--c-text); }
.gbx-slip__empty span { font-size: 11px; }

.gbx-slip__err { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--down); background: var(--down-glow); border: 1px solid var(--down); }
.gbx-slip__err--ok { color: var(--up); background: var(--up-glow); border-color: var(--up); }

/* inline success receipt (no modal — keeps the trading flow) */
.gbx-receipt { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; animation: gbxReceiptIn var(--dur-slow) var(--ease-out); }
.gbx-receipt__icon { align-self: center; font-size: 38px; color: var(--up); margin-bottom: 2px; }
.gbx-receipt__title { align-self: center; font-size: var(--fs-lg); font-weight: var(--fw-black); margin-bottom: 6px; }
@keyframes gbxReceiptIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- printable ticket (agent shop) ---- */
.gbx-ticket { border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; color: #111; padding: 12px 14px; }
.gbx-ticket__logo { text-align: center; margin-bottom: 8px; }
.gbx-ticket__logo img { max-height: 46px; max-width: 70%; object-fit: contain; }
.gbx-ticket__logo--wm { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.gbx-ticket__head { text-align: center; border-bottom: 1px dashed #bbb; padding-bottom: 8px; margin-bottom: 8px; }
.gbx-ticket__title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.gbx-ticket__id { font-size: 13px; font-weight: 700; margin-top: 2px; }
.gbx-ticket__meta { font-size: 10px; color: #555; margin-top: 3px; }
.gbx-ticket__legs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.gbx-ticket__leg { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 12px; border-bottom: 1px dotted #ddd; padding-bottom: 5px; }
.gbx-ticket__leg-main { display: flex; flex-direction: column; gap: 1px; }
.gbx-ticket__leg-main b { font-weight: 700; }
.gbx-ticket__leg-main span { color: #555; font-size: 11px; }
.gbx-ticket__v { color: #999; font-weight: 400; }
.gbx-ticket__leg em { font-style: normal; font-weight: 800; white-space: nowrap; }
.gbx-ticket__figs { border-top: 1px dashed #bbb; padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.gbx-ticket__figs > div { display: flex; justify-content: space-between; font-size: 12px; }
.gbx-ticket__figs > div span { color: #555; }
.gbx-ticket__figs > div b { font-weight: 800; }
.gbx-ticket__figs--big { border-top: 1px solid #ccc; margin-top: 4px; padding-top: 5px; font-size: 14px !important; }
.gbx-ticket__foot { margin-top: 8px; text-align: center; font-size: 10px; color: #666; }

/* ---- agent quick-cancel (trash-can + countdown) ---- */
.gbx-cancel-wrap { margin-top: 8px; }
.gbx-cancel-row { margin-top: 6px; }
.gbx-cancel-row.is-done { font-size: 12px; color: var(--c-text-muted); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px dashed var(--c-border); border-radius: var(--r-sm); }
.gbx-btn--danger { background: color-mix(in srgb, var(--down, #e5484d) 14%, transparent); color: var(--down, #e5484d); border: 1px solid color-mix(in srgb, var(--down, #e5484d) 45%, transparent); width: 100%; }
.gbx-btn--danger:hover { background: var(--down, #e5484d); color: #fff; }
.gbx-cd { font-variant-numeric: tabular-nums; font-weight: 800; opacity: .9; }
.gbx-cancel-err { color: var(--down, #e5484d); font-size: 11px; margin-top: 6px; }

/* ---- print isolation: only the ticket prints ---- */
@media print {
  body.gbx-printing * { visibility: hidden !important; }
  body.gbx-printing #gbxTicket, body.gbx-printing #gbxTicket * { visibility: visible !important; }
  body.gbx-printing #gbxTicket { position: fixed; left: 0; top: 0; width: 100%; max-width: 380px; margin: 0 auto; border: none; }
  body.gbx-printing .no-print { display: none !important; }
}

/* shake on placement error */
@keyframes gbxShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.gbx-shake { animation: gbxShake .4s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .gbx-shake, .gbx-receipt { animation: none !important; } }

/* =====================================================================
   LIVE-ROLLOUT FIXES — nav accordion + mobile betslip FAB
   ===================================================================== */

/* ---- Left-nav category accordion (sport -> leagues sub-list) ---- */
.gbx-navsport { cursor: pointer; }
.gbx-navsport .cnt { font-size: 10px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-navsport .chev { transition: transform var(--dur) var(--ease-out); }
.gbx-navsport.is-open .chev { transform: rotate(180deg); }
.gbx-navsport.is-open { color: var(--c-primary-hover); background: var(--c-surface-2); }
.gbx-nav__sub { display: none; padding: 2px 0 4px; background: var(--c-surface-2); }
.gbx-nav__sub.is-open { display: block; }
.gbx-nav__sub .gbx-lea { padding-left: 30px; }
.gbx-lea { cursor: pointer; }
.gbx-lea.is-active { background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-primary); }
.gbx-lea.is-active .gbx-lea__name { color: var(--c-primary-hover); }

/* ---- Mobile betslip Floating Action Button ----
   The production bottom-nav is fixed at bottom:0 / z-index:45. The old full-width
   slip-bar collided with it; this FAB floats ABOVE it (offset + high z-index) and
   triggers the existing bottom-sheet via data-gbx-toggle="slip". */
.gbx-fab { display: none; }
@media (max-width: 1023.98px) {
  .gbx-fab {
    position: fixed; right: 14px; z-index: 1200;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));   /* clears the ~72px bottom-nav */
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--c-primary); color: var(--c-primary-ink); font-size: 20px;
    box-shadow: 0 8px 22px var(--c-primary-glow), 0 4px 12px rgba(10,37,64,.28);
    transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);
  }
  .gbx-fab[hidden] { display: none; }
  .gbx-fab:active { transform: scale(.92); }
  .gbx-fab__count {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-brand); color: #fff; border: 2px solid var(--c-surface);
    border-radius: var(--r-pill); font-size: 12px; font-weight: var(--fw-black); line-height: 1;
  }
  .gbx-fab--bump { animation: gbxFabBump .4s var(--ease-spring); }
  /* sheet open: hide the FAB (the sheet itself covers the screen) */
  .gbx-shell[data-slip-open] .gbx-fab { opacity: 0; pointer-events: none; }
  /* BOTH drawers (nav + bottom sheet) sit ABOVE the scrim; the scrim clears the
     bottom-nav (z 45). NOTE: .gbx-nav must be here too — when only .gbx-betslip
     was bumped, the nav stayed at --z-betslip (210) and was buried under the
     scrim (1250), so the open menu was unreachable behind the blur. */
  .gbx-nav, .gbx-betslip { z-index: 1300; }
  .gbx-scrim { z-index: 1250; }
}
@keyframes gbxFabBump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gbx-fab--bump { animation: none; } }

/* =====================================================================
   EVENT VIEW (event-v2): breadcrumb · hero · market-group accordions
   ===================================================================== */
.gbx-layout--event { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .gbx-layout--event { grid-template-columns: minmax(0, 1fr) var(--slip-w); } }
.gbx-evcol { min-width: 0; }

.gbx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 2px 10px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.gbx-crumb a { color: var(--c-primary-hover); }
.gbx-crumb__sep { opacity: .5; }
.gbx-crumb__cur { color: var(--c-text); font-weight: var(--fw-semibold); }

.gbx-evhero {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-3);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.gbx-evhero__team { font-size: var(--fs-lg); font-weight: var(--fw-bold); text-align: center; min-width: 0; }
.gbx-evhero__team:first-child { text-align: right; }
.gbx-evhero__team:last-child  { text-align: left; }
.gbx-evhero__mid { text-align: center; min-width: 120px; }
.gbx-evhero__score { font-size: 34px; font-weight: var(--fw-black); color: var(--c-primary-hover); line-height: 1; font-variant-numeric: tabular-nums; }
.gbx-evhero__score--pop { animation: gbxEvScorePop .5s ease; }
@keyframes gbxEvScorePop { 30% { transform: scale(1.25); } }
.gbx-evhero__min { margin-top: 4px; font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--c-live); letter-spacing: .04em; }
.gbx-evhero__time { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* market-group accordion (same GPU grid-rows technique as the mobile cards) */
.gbx-mg-grp { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; margin-bottom: var(--sp-2); }
.gbx-mg-grp__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 11px 12px; background: var(--c-surface-2); border: 0; cursor: pointer;
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text);
}
.gbx-mg-grp__meta { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-mg-grp__meta i { transition: transform var(--dur) var(--ease-out); }
.gbx-mg-grp.is-open .gbx-mg-grp__meta i { transform: rotate(180deg); }
.gbx-mg-grp__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.gbx-mg-grp.is-open .gbx-mg-grp__body { grid-template-rows: 1fr; }
.gbx-mg-grp__inner { overflow: hidden; min-height: 0; }

.gbx-market { padding: 9px 12px; border-top: 1px solid var(--c-border); }
.gbx-market:first-child { border-top: 0; }
.gbx-market__name { margin-bottom: 7px; font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.gbx-market__odds { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }

/* event outcome cell — label always shown (no shared column header here) */
.gbx-oc--ev { flex-direction: column; gap: 1px; height: 48px; padding: 4px 6px; }
.gbx-oc--ev .gbx-oc__lbl { display: block; max-width: 100%; font-size: 10px; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-oc--ev.is-selected .gbx-oc__lbl { color: var(--c-primary-ink); opacity: .85; }
.gbx-oc--ev[disabled] { cursor: not-allowed; }

/* =====================================================================
   LIVE HIGHLIGHTS + POPULAR widgets — 1X2 cells show their label
   (no column header in cards) and live-patch via gbx-board.js
   ===================================================================== */
.gbx-livecard .gbx-oc, .gbx-pop .gbx-oc { flex-direction: column; gap: 0; height: 38px; padding: 3px 4px; }
.gbx-livecard .gbx-oc__lbl, .gbx-pop .gbx-oc__lbl { display: block; font-size: 9px; color: var(--c-text-muted); }
.gbx-livecard .gbx-oc.is-selected .gbx-oc__lbl, .gbx-pop .gbx-oc.is-selected .gbx-oc__lbl { color: var(--c-primary-ink); opacity: .85; }

.gbx-pop--ev { flex-direction: column; align-items: stretch; gap: 6px; }
.gbx-pop--ev .gbx-pop__desc b { font-size: var(--fs-sm); }
.gbx-pop--ev .gbx-pop__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

/* =====================================================================
   CANARY BETA BAR — dismissible "you're previewing V2 / return to classic"
   strip injected by header.php just inside <main>. Self-contained.
   ===================================================================== */
.gbx-betabar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 0 10px;
  font-size: var(--fs-sm); color: var(--c-text);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,24,40,.06));
}
.gbx-betabar__tag {
  flex: none; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: var(--fw-black); letter-spacing: .05em;
  color: var(--c-primary-ink, #052e2b); background: var(--c-primary);
}
.gbx-betabar__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-betabar__back {
  flex: none; font-weight: var(--fw-bold, 600); text-decoration: none;
  color: var(--c-primary-strong, var(--c-primary)); white-space: nowrap;
}
.gbx-betabar__back:hover { text-decoration: underline; }
.gbx-betabar__x {
  flex: none; width: 26px; height: 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; border: 0; border-radius: 7px;
  background: transparent; color: var(--c-text-muted);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.gbx-betabar__x:hover { background: var(--c-surface-2, rgba(16,24,40,.06)); color: var(--c-text); }
@media (max-width: 640px) { .gbx-betabar__txt { white-space: normal; } }

/* =====================================================================
   LIVE MATCH TRACKER — skeleton shell (lazy-hydrated by gbx-tracker.js).
   Container + tab chrome + loading/empty/error states. Renderers (pitch,
   stat bars, timeline) are layered on in the next increment.
   ===================================================================== */
.gbx-trk {
  margin: 0 0 var(--sp-3);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,24,40,.06));
  overflow: hidden;
}
/* "Match en direct" — Sportradar LMT Plus panel */
.gbx-trk--sr { padding: 0; }
.gbx-trk__srhead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: var(--fs-sm); font-weight: var(--fw-black, 800); letter-spacing: .03em; text-transform: uppercase; color: var(--c-text); border-bottom: 1px solid var(--c-border); }
.gbx-trk__srdot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: gbxSrPulse 1.4s infinite; }
@keyframes gbxSrPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.gbx-trk__srbox { width: 100%; min-height: 260px; }
.gbx-trk__srbox > div, .gbx-trk__srbox iframe { width: 100% !important; max-width: 100%; }
/* Custom data tracker (gismo feed) */
.gbx-trk--srdata { padding: 0; }
.gbx-srt { padding: 14px 16px 16px; }
.gbx-srt__load { padding: 26px; text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
.gbx-srt__score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.gbx-srt__team { font-weight: var(--fw-black, 800); font-size: 15px; line-height: 1.15; }
.gbx-srt__team:last-child { text-align: right; }
.gbx-srt__nums { display: flex; align-items: center; gap: 7px; font-size: 27px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gbx-srt__nums i { opacity: .45; }
.gbx-srt__statusrow { text-align: center; font-size: 12px; font-weight: 700; color: var(--c-text-muted); margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gbx-srt__min { color: var(--c-primary); }
.gbx-srt__livedot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: gbxSrPulse 1.4s infinite; }
.gbx-srt__poss { display: flex; align-items: center; justify-content: space-between; margin: 15px 0 5px; font-size: 12px; }
.gbx-srt__poss b { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; color: var(--c-text-muted); }
.gbx-srt__poss span { font-weight: 800; font-variant-numeric: tabular-nums; }
.gbx-srt__stats { margin-top: 13px; display: flex; flex-direction: column; gap: 10px; }
.gbx-srt__row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.gbx-srt__n { color: var(--c-text-muted); font-weight: 600; }
.gbx-srt__v { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 26px; }
.gbx-srt__v:last-child { text-align: right; }
.gbx-srt__bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 4px; gap: 2px; }
.gbx-srt__barh { background: var(--c-primary, #f5c518); border-radius: 3px 0 0 3px; min-width: 2px; }
.gbx-srt__bara { background: #ef4444; border-radius: 0 3px 3px 0; min-width: 2px; }
.gbx-srt__bar--empty { opacity: .25; }
/* Canvas animated pitch tracker */
.gbx-cvt { padding: 12px 14px 14px; }
.gbx-cvt__hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.gbx-cvt__team { font-weight: var(--fw-black, 800); font-size: 14px; }
.gbx-cvt__team--a { text-align: right; }
.gbx-cvt__sc { display: flex; flex-direction: column; align-items: center; }
.gbx-cvt__sc b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gbx-cvt__sc { font-size: 24px; font-weight: 900; }
.gbx-cvt__sc i { opacity: .4; margin: 0 4px; }
.gbx-cvt__sc em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--c-text-muted); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.gbx-cvt__dot, .gbx-cvt__tl .gbx-cvt__dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: gbxSrPulse 1.4s infinite; }
/* timeline */
.gbx-cvt__tl { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.gbx-cvt__ab { font-size: 10px; font-weight: 800; color: var(--c-text-muted); width: 30px; flex: none; }
.gbx-cvt__ab--a { text-align: right; }
.gbx-cvt__track { position: relative; flex: 1; height: 26px; }
.gbx-cvt__line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--c-border); transform: translateY(-50%); }
.gbx-cvt__tick { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 8.5px; color: var(--c-text-muted); background: var(--c-surface); padding: 0 2px; }
.gbx-cvt__mk { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.gbx-cvt__mk--goal { font-size: 12px; margin-top: -9px; }
.gbx-cvt__mk--goal.is-top { margin-top: 9px; }
.gbx-cvt__mk--card { width: 5px; height: 8px; border-radius: 1px; margin-top: -9px; }
.gbx-cvt__mk--card.is-top { margin-top: 9px; }
.gbx-cvt__prog { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 30%, transparent); }
/* pitch */
.gbx-cvt__pitchwrap { border-radius: 10px; overflow: hidden; background: #1c7a43; }
.gbx-cvt__pitch { display: block; width: 100%; }
/* stats under pitch */
.gbx-cvt__stats { margin-top: 12px; }
.gbx-cvt__poss, .gbx-cvt__srow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 9px; }
.gbx-cvt__poss b, .gbx-cvt__srow b { font-weight: 700; color: var(--c-text-muted); }
.gbx-cvt__poss span, .gbx-cvt__srow span { font-weight: 800; font-variant-numeric: tabular-nums; }
.gbx-cvt__pbar, .gbx-cvt__sbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 4px; gap: 2px; }
.gbx-cvt__pbar i, .gbx-cvt__sbar i { background: var(--c-primary, #f5c518); border-radius: 3px 0 0 3px; min-width: 2px; }
.gbx-cvt__pbar u, .gbx-cvt__sbar u { background: #ef4444; border-radius: 0 3px 3px 0; min-width: 2px; }

/* ── Premium LMT-class live tracker (.gbx-lmt) — dark-luxury neon theme ── */
.gbx-trk--sr { padding: 0; background: linear-gradient(180deg, #0f141d 0%, #0a0e15 100%); border: 1px solid rgba(39,219,25,.13); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03); }
.gbx-trk--sr .gbx-trk__srhead { display: flex; align-items: center; gap: 9px; padding: 11px 15px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #e8edf4; border-bottom: 1px solid rgba(255,255,255,.05); }
.gbx-trk--sr .gbx-trk__srdot { width: 8px; height: 8px; border-radius: 50%; background: #27db19; box-shadow: 0 0 10px #27db19, 0 0 3px #27db19; animation: gbxSrPulse 1.4s infinite; }
.gbx-trk--sr .gbx-srt { padding: 0; }

.gbx-lmt { --ng: #27db19; --ngl: #7bff63; --ngd: #159c0c; --aw: #ff3860; --awl: #ff8aa0; --awd: #c81742;
  --bg2: #151d29; --bg3: #1c2532; --line: rgba(255,255,255,.06); --txt: #e9eef6; --mut: #8a95a8;
  color: var(--txt); font-family: 'Inter','SF Pro Display',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }

.gbx-lmt__sb { padding: 14px 15px 11px; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.gbx-lmt__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.gbx-lmt__team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gbx-lmt__team--a { flex-direction: row-reverse; text-align: right; }
.gbx-lmt__badge { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; }
.gbx-lmt__badge--h { background: linear-gradient(140deg, var(--ngl), var(--ngd)); box-shadow: 0 0 14px rgba(39,219,25,.4), inset 0 1px 0 rgba(255,255,255,.35); color: #07240b; }
.gbx-lmt__badge--a { background: linear-gradient(140deg, var(--awl), var(--awd)); box-shadow: 0 0 14px rgba(255,56,96,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.gbx-lmt__tn { font-weight: 800; font-size: 13px; line-height: 1.12; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.01em; }
.gbx-lmt__cards { display: inline-flex; gap: 3px; flex: none; }
.gbx-lmt__cc { font-style: normal; font-size: 9px; font-weight: 800; color: var(--txt); background: rgba(255,255,255,.08); padding: 1px 4px; border-radius: 4px; }
.gbx-lmt__cy, .gbx-lmt__cr { font-style: normal; font-size: 9px; font-weight: 800; color: #111; padding: 1px 4px; border-radius: 4px; }
.gbx-lmt__cy { background: #f5c518; } .gbx-lmt__cr { background: var(--aw); color: #fff; }
.gbx-lmt__cn { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.gbx-lmt__score { display: flex; align-items: center; gap: 7px; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.gbx-lmt__score i { opacity: .3; font-style: normal; }
.gbx-lmt__score.pop { animation: gbxScorePop .6s ease; }
@keyframes gbxScorePop { 30% { transform: scale(1.4); color: var(--ng); text-shadow: 0 0 20px var(--ng); } }
.gbx-lmt__st { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--mut); margin-top: 4px; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.gbx-lmt__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ng); box-shadow: 0 0 8px var(--ng); animation: gbxSrPulse 1.4s infinite; }
.gbx-lmt__ht { font-size: 10px; color: var(--mut); opacity: .75; margin-top: 2px; }
.gbx-lmt__var { display: inline-block; margin-top: 4px; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; color: #fff; background: linear-gradient(90deg, #7c3aed, #a855f7); padding: 2px 7px; border-radius: 5px; box-shadow: 0 0 12px rgba(168,85,247,.5); animation: gbxSitPulse 1s infinite; }
.gbx-lmt__sit { margin-top: 10px; padding: 6px 11px; border-radius: 9px; font-size: 11.5px; font-weight: 800; text-align: center; animation: gbxSitIn .3s ease; }
.gbx-lmt__sit--atk { background: rgba(39,219,25,.12); color: var(--ngl); border: 1px solid rgba(39,219,25,.25); }
.gbx-lmt__sit--atk.gbx-lmt__sit--a { background: rgba(255,56,96,.12); color: var(--awl); border-color: rgba(255,56,96,.25); }
.gbx-lmt__sit--dng { background: linear-gradient(90deg, rgba(255,56,96,.3), rgba(255,56,96,.12)); color: #ffd0d8; border: 1px solid rgba(255,56,96,.4); box-shadow: 0 0 16px rgba(255,56,96,.25); animation: gbxSitPulse 1s infinite; }
@keyframes gbxSitIn { from { opacity: 0; transform: translateY(-3px); } }
@keyframes gbxSitPulse { 50% { filter: brightness(1.3); } }

.gbx-lmt__extra { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.gbx-lmt__scside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--mut); }
.gbx-lmt__scside--a { align-items: flex-end; text-align: right; }
.gbx-lmt__scg, .gbx-lmt__cdg { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.gbx-lmt__scside--a .gbx-lmt__scg, .gbx-lmt__scside--a .gbx-lmt__cdg { flex-direction: row-reverse; }
.gbx-lmt__scg i { font-style: normal; font-size: 11px; flex: none; }
.gbx-lmt__scg b, .gbx-lmt__cdg b { color: var(--txt); font-weight: 700; }
.gbx-lmt__cdi { width: 8px; height: 11px; border-radius: 2px; flex: none; }

/* ── Sport scoreboard (serve dot · sets/points label · current game · per-set grid) ── */
.gbx-lmt__srv { width: 8px; height: 8px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff, #d6ff3a 60%, #9bcc1a); box-shadow: 0 0 8px rgba(214,255,58,.85); animation: gbxSrPulse 1.4s infinite; }
.gbx-lmt__sclbl { font-size: 8.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); opacity: .7; margin-bottom: 3px; }
.gbx-lmt__cur { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gbx-lmt__cur span { font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.gbx-lmt__cur i { opacity: .4; font-style: normal; }
.gbx-lmt__cur b:first-of-type { color: var(--ngl); } .gbx-lmt__cur b:last-of-type { color: var(--awl); }
.gbx-lmt__setg { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.gbx-lmt__setr { display: grid; grid-template-columns: 40px repeat(var(--n), minmax(0, 1fr)); align-items: center; gap: 2px; }
.gbx-lmt__setr span, .gbx-lmt__setr b { text-align: center; font-variant-numeric: tabular-nums; }
.gbx-lmt__setr--hd span { font-size: 8.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--mut); opacity: .72; }
.gbx-lmt__setr b { font-size: 13px; font-weight: 800; color: var(--txt); padding: 2px 0; border-radius: 5px; }
.gbx-lmt__setr b.is-cur { background: rgba(39,219,25,.14); color: var(--ngl); box-shadow: inset 0 0 0 1px rgba(39,219,25,.3); }
.gbx-lmt__setlbl { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-align: left; color: var(--mut); }
.gbx-lmt__setr--h .gbx-lmt__setlbl { color: var(--ngl); } .gbx-lmt__setr--a .gbx-lmt__setlbl { color: var(--awl); }
.gbx-lmt__srow--txt { margin-top: 13px; }
.gbx-lmt__srow--txt span { min-width: 56px; font-size: 11px; font-variant-numeric: normal; }
@media (max-width: 640px) { .gbx-lmt__setr { grid-template-columns: 30px repeat(var(--n), minmax(0, 1fr)); } .gbx-lmt__setr b { font-size: 11.5px; } }
/* sport-identity chip above the score */
.gbx-lmt__sport { width: fit-content; max-width: 100%; margin: 0 auto 11px; display: flex; align-items: center; gap: 7px; padding: 3px 13px 3px 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.gbx-lmt__sport > span:last-child { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--txt); }
.gbx-lmt__spem { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.28), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 12px; line-height: 1; }
/* country flag inside a team row */
.gbx-lmt__flag { width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.16); }
/* per-stat icon */
.gbx-lmt__sic { display: inline-flex; align-items: center; justify-content: center; width: 16px; margin-right: 6px; font-size: 11px; line-height: 1; opacity: .92; }
/* set/period grid winner + current emphasis */
.gbx-lmt__setr--h b.is-win { color: var(--ngl); } .gbx-lmt__setr--a b.is-win { color: var(--awl); }
.gbx-lmt__setr b.is-win { position: relative; }

.gbx-lmt__stage { position: relative; margin: 0 12px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(39,219,25,.08); }
.gbx-lmt__stage canvas { display: block; width: 100%; }

.gbx-lmt__mom { position: relative; padding: 12px 14px 6px; }
.gbx-lmt__momhd { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.gbx-lmt__momlbl { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--mut); flex: none; }
.gbx-lmt__meter { position: relative; flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.gbx-lmt__meter i { position: absolute; right: 50%; top: 0; height: 100%; background: linear-gradient(90deg, transparent, var(--ng)); box-shadow: 0 0 10px var(--ng); transition: width .7s ease; }
.gbx-lmt__meter u { position: absolute; left: 50%; top: 0; height: 100%; background: linear-gradient(90deg, var(--aw), transparent); box-shadow: 0 0 10px var(--aw); transition: width .7s ease; }
.gbx-lmt__meter b { position: absolute; top: 50%; width: 3px; height: 13px; margin-left: -1.5px; background: #fff; border-radius: 2px; transform: translateY(-50%); transition: left .7s ease; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.gbx-lmt__mom canvas { display: block; width: 100%; cursor: crosshair; }
.gbx-lmt__momtip { display: none; position: absolute; top: 28px; background: var(--bg3); border: 1px solid rgba(39,219,25,.2); border-radius: 7px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; line-height: 1.35; pointer-events: none; white-space: nowrap; z-index: 4; box-shadow: 0 6px 16px rgba(0,0,0,.5); }

.gbx-lmt__tabs { display: flex; gap: 3px; padding: 5px 10px; margin-top: 5px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gbx-lmt__tabs::-webkit-scrollbar { display: none; }
.gbx-lmt__tab { flex: none; padding: 8px 13px; border: 0; background: transparent; cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--mut); border-radius: 8px; transition: .16s; }
.gbx-lmt__tab:hover { color: var(--txt); background: rgba(255,255,255,.04); }
.gbx-lmt__tab.is-on { color: var(--ng); background: rgba(39,219,25,.12); box-shadow: inset 0 0 0 1px rgba(39,219,25,.3), 0 0 12px rgba(39,219,25,.15); }
.gbx-lmt__body { padding: 13px 15px 15px; }

.gbx-lmt__stats { display: flex; flex-direction: column; }
.gbx-lmt__srow { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin-top: 11px; }
.gbx-lmt__srow b { font-weight: 600; color: var(--mut); }
.gbx-lmt__srow span { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 22px; }
.gbx-lmt__srow span:first-child { color: var(--ngl); } .gbx-lmt__srow span:last-child { text-align: right; color: var(--awl); }
.gbx-lmt__sbar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; margin-top: 5px; gap: 3px; background: rgba(255,255,255,.04); }
.gbx-lmt__sbar i { background: linear-gradient(90deg, var(--ngd), var(--ng)); border-radius: 4px; min-width: 2px; transition: width .5s ease; box-shadow: 0 0 8px rgba(39,219,25,.4); }
.gbx-lmt__sbar u { background: linear-gradient(90deg, var(--aw), var(--awd)); border-radius: 4px; min-width: 2px; transition: width .5s ease; box-shadow: 0 0 8px rgba(255,56,96,.35); }

.gbx-lmt__events { position: relative; padding: 6px 0; }
.gbx-lmt__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(39,219,25,.35), rgba(255,56,96,.35), transparent); transform: translateX(-50%); }
.gbx-lmt__ev { position: relative; display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; margin: 5px 0; }
.gbx-lmt__evs { min-width: 0; font-size: 12px; }
.gbx-lmt__evs--l { text-align: right; padding-right: 7px; }
.gbx-lmt__evs--r { text-align: left; padding-left: 7px; }
.gbx-lmt__evbox { display: inline-block; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); max-width: 100%; }
.gbx-lmt__ev--goal .gbx-lmt__evbox { background: rgba(39,219,25,.1); border-color: rgba(39,219,25,.3); box-shadow: 0 0 14px rgba(39,219,25,.12); }
.gbx-lmt__evbox b { font-weight: 800; }
.gbx-lmt__evbox span { color: var(--mut); font-size: 11px; }
.gbx-lmt__evbox em { font-style: normal; font-weight: 900; margin-left: 5px; font-variant-numeric: tabular-nums; color: var(--ng); }
.gbx-lmt__evm { display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 1; font-size: 10px; font-weight: 800; color: var(--mut); }
.gbx-lmt__evi { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg2); border: 1px solid rgba(255,255,255,.1); font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.gbx-lmt__ev--goal .gbx-lmt__evi { border-color: rgba(39,219,25,.5); box-shadow: 0 0 10px rgba(39,219,25,.35); }
.gbx-lmt__evcard { display: inline-block; width: 8px; height: 11px; border-radius: 2px; }

.gbx-lmt__forms { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 12px; font-weight: 800; }
.gbx-lmt__form--h { color: var(--ng); } .gbx-lmt__form--a { color: var(--aw); }
.gbx-lmt__lineup { position: relative; width: 100%; padding-top: 62%; border-radius: 12px; background: repeating-linear-gradient(90deg, #218a44 0 10%, #279a4c 10% 20%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), inset 0 0 50px rgba(0,0,0,.35); overflow: hidden; }
.gbx-lmt__lineup::before { content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 2px; background: rgba(255,255,255,.25); transform: translateX(-50%); }
.gbx-lmt__lineup::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border: 2px solid rgba(255,255,255,.25); border-radius: 50%; transform: translate(-50%,-50%); }
.gbx-lmt__pl { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; width: 46px; cursor: pointer; z-index: 1; }
.gbx-lmt__pl:hover .gbx-lmt__jer { outline: 2px solid #fff; }
.gbx-lmt__jer { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.gbx-lmt__pl--home .gbx-lmt__jer { background: radial-gradient(circle at 35% 30%, var(--ngl), var(--ngd)); color: #06220a; }
.gbx-lmt__pl--away .gbx-lmt__jer { background: radial-gradient(circle at 35% 30%, var(--awl), var(--awd)); }
.gbx-lmt__pl em { font-style: normal; font-size: 8.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); margin-top: 2px; line-height: 1; max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-lmt__coach { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11px; color: var(--mut); font-weight: 700; }
.gbx-lmt__subs { margin-top: 13px; }
.gbx-lmt__subs h5 { margin: 0 0 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); font-weight: 900; }
.gbx-lmt__subcol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.gbx-lmt__subp { display: flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 2px 0; }
.gbx-lmt__subp i { font-style: normal; font-weight: 800; color: var(--mut); min-width: 18px; }
.gbx-lmt__subcol > div:last-child .gbx-lmt__subp { flex-direction: row-reverse; text-align: right; }

.gbx-lmt__comm { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.gbx-lmt__cm { display: flex; gap: 10px; padding: 8px 5px; border-bottom: 1px solid var(--line); }
.gbx-lmt__cm:last-child { border-bottom: 0; }
.gbx-lmt__cm.is-imp { background: rgba(39,219,25,.08); border-radius: 9px; border: 1px solid rgba(39,219,25,.2); }
.gbx-lmt__cmi { flex: none; width: 20px; text-align: center; font-size: 12px; }
.gbx-lmt__cmm { flex: none; font-size: 11px; font-weight: 800; color: var(--ng); font-variant-numeric: tabular-nums; min-width: 26px; }
.gbx-lmt__cm p { margin: 0; font-size: 12.5px; line-height: 1.4; color: #d3dae6; }

.gbx-lmt__modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; text-align: center; padding: 16px; background: rgba(4,8,14,.6); backdrop-filter: blur(3px); z-index: 3; }
.gbx-lmt__modal.is-on { display: flex; animation: gbxModalIn .32s cubic-bezier(.2,1.3,.4,1); }
.gbx-lmt__mbig { font-size: clamp(21px, 6.2vw, 32px); font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.gbx-lmt__modal.is-goal { background: radial-gradient(circle at 50% 40%, rgba(39,219,25,.25), rgba(4,8,14,.78)); }
.gbx-lmt__modal.is-goal .gbx-lmt__mbig { color: var(--ng); text-shadow: 0 0 22px rgba(39,219,25,.8), 0 2px 10px rgba(0,0,0,.5); }
.gbx-lmt__modal b { font-size: 16px; font-weight: 800; color: #fff; }
.gbx-lmt__modal span { font-size: 12px; color: #c3cddb; }
.gbx-lmt__modal em { font-style: normal; font-weight: 900; font-size: 14px; color: var(--ng); font-variant-numeric: tabular-nums; margin-top: 2px; text-shadow: 0 0 10px rgba(39,219,25,.5); }
.gbx-lmt__cardgfx { position: relative; width: 42px; height: 58px; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); animation: gbxCardIn .55s cubic-bezier(.2,1.4,.4,1); transform-origin: center; }
.gbx-lmt__cardgfx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-130%); animation: gbxCardShine 1.15s .35s ease-in-out infinite; }
.gbx-lmt__modal.is-red { background: radial-gradient(circle at 50% 42%, rgba(255,56,96,.22), rgba(4,8,14,.78)); }
.gbx-lmt__modal.is-yellow { background: radial-gradient(circle at 50% 42%, rgba(245,197,24,.2), rgba(4,8,14,.78)); }
.gbx-lmt__modal.is-red .gbx-lmt__cardgfx { box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 22px rgba(255,56,96,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.gbx-lmt__modal.is-yellow .gbx-lmt__cardgfx { box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 22px rgba(245,197,24,.55), inset 0 1px 0 rgba(255,255,255,.3); }
@keyframes gbxCardIn { from { transform: rotateY(85deg) rotate(-12deg) scale(.6); opacity: 0; } 60% { transform: rotateY(0) rotate(6deg) scale(1.08); } to { transform: none; } }
@keyframes gbxCardShine { to { transform: translateX(130%); } }
.gbx-lmt__min { color: var(--ng) !important; text-shadow: 0 0 10px rgba(39,219,25,.5); } .gbx-lmt__mout { color: var(--awl) !important; font-size: 14px !important; }
@keyframes gbxModalIn { from { opacity: 0; transform: scale(.8); } }

/* Reference-style incident card (white pill, card/goal icon + team + label, top-centre of the pitch) */
.gbx-lmt__modal.is-incident { inset: auto; top: 7%; left: 50%; transform: translateX(-50%); flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; text-align: left; width: auto; max-width: 88%; padding: 8px 15px 8px 10px; background: #fff; backdrop-filter: none; border-radius: 13px; box-shadow: 0 16px 40px rgba(0,0,0,.5); border-right: 4px solid #22c55e; animation: gbxIncIn .34s cubic-bezier(.2,.9,.3,1.15); }
@keyframes gbxIncIn { from { opacity: 0; transform: translate(-50%, -9px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.gbx-lmt__itx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gbx-lmt__modal.is-incident .gbx-lmt__itx b { font-size: 13.5px; font-weight: 800; color: #10131a; line-height: 1.15; text-shadow: none; }
.gbx-lmt__modal.is-incident .gbx-lmt__itx span { font-size: 11.5px; font-weight: 600; color: #58616f; }
.gbx-lmt__icard { position: relative; width: 22px; height: 30px; border-radius: 3px; flex: none; transform: rotate(-7deg); box-shadow: 0 3px 9px rgba(0,0,0,.28); }
.gbx-lmt__icard.is-yellow { background: linear-gradient(158deg, #ffe14d, #f3c113); }
.gbx-lmt__icard.is-red { background: linear-gradient(158deg, #ff5670, #e11d38); }
.gbx-lmt__icard::before { content: ""; position: absolute; left: -6px; top: 2px; width: 22px; height: 30px; border-radius: 3px; background: #dfe4ec; transform: rotate(-4deg); z-index: -1; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gbx-lmt__iico { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 17px; background: #eef1f6; }
.gbx-lmt__iico--goal { background: #dff5e1; }

.gbx-lmt__pop { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: 170px; background: var(--bg3); border: 1px solid rgba(39,219,25,.25); border-radius: 10px; padding: 8px 10px; box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 16px rgba(39,219,25,.1); text-align: center; animation: gbxModalIn .18s ease; }
.gbx-lmt__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg3); }
.gbx-lmt__pop b { display: block; font-size: 11.5px; color: var(--txt); white-space: nowrap; }
.gbx-lmt__pop > span { display: block; font-size: 10px; color: var(--mut); margin-top: 1px; }
.gbx-lmt__popst { display: flex; gap: 9px; justify-content: center; margin-top: 6px; }
.gbx-lmt__popst i { font-style: normal; font-size: 11px; font-weight: 800; }

/* bottom icon nav */
.gbx-lmt__nav { display: flex; border-top: 1px solid var(--line); background: linear-gradient(0deg, rgba(0,0,0,.22), transparent); }
.gbx-lmt__navbtn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; border: 0; background: transparent; cursor: pointer; color: var(--mut); font-size: 10px; font-weight: 700; letter-spacing: .02em; transition: color .15s; }
.gbx-lmt__navi { width: 20px; height: 20px; }
.gbx-lmt__navi svg { width: 100%; height: 100%; display: block; }
.gbx-lmt__navbtn:hover { color: var(--txt); }
.gbx-lmt__navbtn.is-on { color: var(--ng); }
.gbx-lmt__navbtn.is-on .gbx-lmt__navi { filter: drop-shadow(0 0 5px rgba(39,219,25,.6)); }

/* H2H */
.gbx-lmt__vs { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.gbx-lmt__vsteam { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gbx-lmt__vsteam b { font-size: 13px; font-weight: 800; }
.gbx-lmt__shirt { width: 42px; height: 38px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.gbx-lmt__vslbl { font-size: 13px; font-weight: 900; color: var(--mut); letter-spacing: .06em; }
.gbx-lmt__h2hsub { display: flex; gap: 4px; margin-bottom: 12px; }
.gbx-lmt__sst { flex: 1; padding: 7px; border: 0; background: rgba(255,255,255,.04); color: var(--mut); font-size: 12px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: .15s; }
.gbx-lmt__sst.is-on { background: rgba(39,219,25,.14); color: var(--ng); box-shadow: inset 0 0 0 1px rgba(39,219,25,.3); }
.gbx-lmt__wdl { margin-bottom: 14px; }
.gbx-lmt__wdlbar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; gap: 2px; }
.gbx-lmt__wdlbar i { background: linear-gradient(90deg, var(--ngd), var(--ng)); min-width: 2px; box-shadow: 0 0 8px rgba(39,219,25,.4); }
.gbx-lmt__wdlbar s { background: rgba(255,255,255,.22); min-width: 2px; }
.gbx-lmt__wdlbar u { background: linear-gradient(90deg, var(--aw), var(--awd)); min-width: 2px; box-shadow: 0 0 8px rgba(255,56,96,.35); }
.gbx-lmt__wdlk { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }
.gbx-lmt__wh { color: var(--ngl); } .gbx-lmt__wa { color: var(--awl); }
.gbx-lmt__h2hh { margin: 14px 0 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); font-weight: 900; }
.gbx-lmt__mrow { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.03); margin-bottom: 5px; font-size: 12px; }
.gbx-lmt__mdate { font-size: 10px; color: var(--mut); white-space: nowrap; }
.gbx-lmt__mt { font-weight: 700; } .gbx-lmt__mt--r { text-align: right; }
.gbx-lmt__msc { font-weight: 900; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 6px; font-size: 12px; text-align: center; }
.gbx-lmt__msc--h { background: rgba(39,219,25,.18); color: var(--ngl); }
.gbx-lmt__msc--a { background: rgba(255,56,96,.18); color: var(--awl); }
.gbx-lmt__msc--d { background: rgba(255,255,255,.08); color: var(--txt); }
.gbx-lmt__formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gbx-lmt__formcol { display: flex; flex-direction: column; gap: 6px; }
.gbx-lmt__formt { font-size: 12px; font-weight: 800; margin-bottom: 2px; }
.gbx-lmt__formrow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.gbx-lmt__formrow span { font-weight: 800; font-variant-numeric: tabular-nums; }
.gbx-lmt__formrow em { font-style: normal; color: var(--mut); }
.gbx-lmt__fb { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 10px; font-weight: 900; color: #fff; flex: none; }
.gbx-lmt__fb--w { background: var(--ng); color: #06220a; } .gbx-lmt__fb--d { background: rgba(255,255,255,.2); } .gbx-lmt__fb--l { background: var(--aw); }

/* incidents */
.gbx-lmt__inchd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.gbx-lmt__imp { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid var(--line); background: transparent; color: var(--mut); border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; }
.gbx-lmt__impdot { width: 18px; height: 11px; border-radius: 6px; background: rgba(255,255,255,.15); position: relative; transition: .15s; }
.gbx-lmt__impdot::after { content: ""; position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; border-radius: 50%; background: #fff; transition: .15s; }
.gbx-lmt__imp.is-on { color: var(--ng); border-color: rgba(39,219,25,.4); }
.gbx-lmt__imp.is-on .gbx-lmt__impdot { background: var(--ng); }
.gbx-lmt__imp.is-on .gbx-lmt__impdot::after { left: 8px; }
.gbx-lmt__incs { display: flex; flex-direction: column; gap: 3px; max-height: 380px; overflow-y: auto; }
.gbx-lmt__inc { display: flex; align-items: flex-start; gap: 9px; padding: 8px; border-radius: 9px; }
.gbx-lmt__inc--k { background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.gbx-lmt__incm { flex: none; font-size: 11px; font-weight: 800; color: var(--ng); min-width: 26px; font-variant-numeric: tabular-nums; }
.gbx-lmt__inci { flex: none; width: 22px; text-align: center; font-size: 13px; }
.gbx-lmt__incx { flex: 1; font-size: 12.5px; min-width: 0; }
.gbx-lmt__incx b { font-weight: 800; }
.gbx-lmt__incx span { color: var(--mut); }
.gbx-lmt__incx em { font-style: normal; font-weight: 900; color: var(--ng); margin-left: 4px; font-variant-numeric: tabular-nums; }
.gbx-lmt__incx p { margin: 0; color: #c9d2df; line-height: 1.35; }
.gbx-lmt__empty { text-align: center; color: var(--mut); font-size: 12px; padding: 24px; }

/* ── mobile ── */
@media (max-width: 560px) {
  .gbx-lmt__sb { padding: 12px 8px 9px; }
  .gbx-lmt__row { gap: 6px; }
  .gbx-lmt__team { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .gbx-lmt__team--a { flex-direction: column; text-align: center; }
  .gbx-lmt__badge { width: 30px; height: 30px; border-radius: 8px; }
  .gbx-lmt__tn { -webkit-line-clamp: 2; font-size: 11px; text-align: center; max-width: 100%; letter-spacing: 0; }
  .gbx-lmt__cards { justify-content: center; }
  .gbx-lmt__cn { min-width: 74px; max-width: 44%; }
  .gbx-lmt__score { font-size: 25px; gap: 5px; }
  .gbx-lmt__st { font-size: 10px; white-space: nowrap; letter-spacing: .01em; flex-wrap: wrap; justify-content: center; }
  .gbx-lmt__per { flex-basis: 100%; font-size: 9px; opacity: .9; }
  .gbx-lmt__stage { margin: 0 8px; }
  .gbx-lmt__mom { padding: 10px 10px 4px; }
  .gbx-lmt__body { padding: 12px 12px 14px; }
  .gbx-lmt__navbtn { font-size: 9px; padding: 8px 1px 7px; gap: 2px; }
  .gbx-lmt__navi { width: 18px; height: 18px; }
  .gbx-lmt__vs { gap: 12px; padding: 12px 6px; }
  .gbx-lmt__shirt { width: 36px; height: 33px; }
  .gbx-lmt__formgrid { gap: 10px; }
  .gbx-lmt__mrow { gap: 5px; padding: 7px; font-size: 11.5px; }
  .gbx-lmt__mdate { font-size: 9px; }
  .gbx-lmt__sst { font-size: 11px; padding: 6px; }
}
.gbx-trk__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--c-border);
}
.gbx-trk__title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-black); letter-spacing: .02em; }
.gbx-trk__title i { color: var(--c-primary); }
.gbx-trk__status { font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

.gbx-trk__tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--c-border); }
.gbx-trk__tab {
  flex: none; padding: 7px 12px; border: 0; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--c-text-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); border-radius: var(--r-sm, 8px);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.gbx-trk__tab:hover { background: var(--c-surface-2, rgba(16,24,40,.05)); color: var(--c-text); }
.gbx-trk__tab.is-active { background: var(--c-primary); color: var(--c-primary-ink, #052e2b); }

.gbx-trk__body { min-height: 220px; padding: 12px; }

/* skeleton shimmer */
.gbx-trk__skel { display: flex; flex-direction: column; gap: 10px; }
.gbx-trk__skel span { display: block; height: 16px; border-radius: 6px; background:
  linear-gradient(90deg, var(--c-surface-2, #eef1f5) 25%, var(--c-border, #e3e8ef) 37%, var(--c-surface-2, #eef1f5) 63%);
  background-size: 400% 100%; animation: gbxTrkShimmer 1.4s ease infinite; }
.gbx-trk__skel span:nth-child(1) { width: 60%; }
.gbx-trk__skel span:nth-child(2) { width: 90%; }
.gbx-trk__skel span:nth-child(3) { width: 75%; }
@keyframes gbxTrkShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .gbx-trk__skel span { animation: none; } }

/* empty / error state */
.gbx-trk__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 180px; text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm);
}
.gbx-trk__empty i { font-size: 22px; color: var(--c-text-muted); opacity: .7; }

/* stub placeholder (temporary — removed when real renderers land) */
.gbx-trk__ph-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: var(--fs-sm); }
.gbx-trk__ph-row span { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-trk__ph-row em { color: var(--c-warn, #b45309); font-style: normal; font-weight: var(--fw-bold); }
.gbx-trk__ph-json {
  margin: 0; max-height: 320px; overflow: auto; padding: 10px;
  background: var(--c-surface-2, #f6f8fb); border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5; color: var(--c-text);
}

/* =====================================================================
   LIVE MATCH TRACKER — renderers (stats · lineups · timeline · tables)
   ===================================================================== */
.gbx-trk { --trk-home: var(--c-primary); --trk-away: #ef4444; --trk-pitch1: #1f8a4c; --trk-pitch2: #1b7d45;
           --trk-ease: cubic-bezier(.4, 0, .2, 1); --trk-pulse: rgba(34, 197, 94, .14); }

/* ---- STATS: possession + comparative bars ---- */
.gbx-trk-poss { display: flex; height: 32px; border-radius: 99px; overflow: hidden; font-size: 11px; font-weight: var(--fw-black, 800); }
.gbx-trk-poss__seg { display: flex; align-items: center; min-width: 0; color: #fff; transition: width .8s var(--trk-ease); will-change: width; }
.gbx-trk-poss__seg--h { background: var(--trk-home); justify-content: flex-start; padding-left: 12px; }
.gbx-trk-poss__seg--a { background: var(--trk-away); justify-content: flex-end; padding-right: 12px; }
.gbx-trk-poss__cap { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); margin: 6px 0 14px; }

.gbx-trk-cmp { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; column-gap: 10px; padding: 8px 0 13px; }
.gbx-trk-cmp + .gbx-trk-cmp { border-top: 1px solid var(--c-border); }
.gbx-trk-cmp__v { font-size: var(--fs-sm); font-weight: var(--fw-black, 800); font-variant-numeric: tabular-nums; text-align: center; }
.gbx-trk-cmp__track { display: flex; height: 8px; }
.gbx-trk-cmp__half { flex: 1; display: flex; min-width: 0; }
.gbx-trk-cmp__half--h { justify-content: flex-end; }
.gbx-trk-cmp__half--a { justify-content: flex-start; }
.gbx-trk-cmp__bar { height: 8px; max-width: 100%; transition: width .8s var(--trk-ease); will-change: width; }
.gbx-trk-cmp__half--h .gbx-trk-cmp__bar { background: var(--trk-home); border-radius: 99px 0 0 99px; }
.gbx-trk-cmp__half--a .gbx-trk-cmp__bar { background: var(--trk-away); border-radius: 0 99px 99px 0; }
.gbx-trk-cmp__lbl { grid-column: 1 / -1; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); margin-top: 6px; }
/* a changed stat row flashes a soft tint once (new shot/corner registered) */
.gbx-trk-cmp[data-pulse] { animation: gbxStatPulse .8s var(--trk-ease) 1; border-radius: 8px; }
@keyframes gbxStatPulse { 0% { background: transparent; } 28% { background: var(--trk-pulse); } 100% { background: transparent; } }

/* ---- LINEUPS: pitch + markers + popover ---- */
.gbx-trk-formrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 10px; font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: var(--fw-bold, 600); }
.gbx-trk-formrow__h { color: var(--trk-home); } .gbx-trk-formrow__a { color: var(--trk-away); }
.gbx-trk-formrow__vs { color: var(--c-text-muted); font-weight: var(--fw-bold, 600); }

.gbx-trk-pitch {
  position: relative; width: 100%; aspect-ratio: 10 / 14; isolation: isolate;
  border-radius: var(--r-sm, 8px); overflow: hidden;
  background: repeating-linear-gradient(0deg, var(--trk-pitch1) 0 9%, var(--trk-pitch2) 9% 18%);
}
.gbx-trk-pitch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,.32); }
.gbx-trk-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.28); border-radius: 50%; }

.gbx-trk-pm { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(40px, 11vw, 58px); border: 0; background: none; cursor: pointer; z-index: 2; transition: transform var(--dur) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.gbx-trk-pm:hover { transform: translate(-50%,-50%) scale(1.12); z-index: 4; }
.gbx-trk-pm__dot { width: clamp(24px, 6.5vw, 32px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: var(--fw-black, 800); color: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.gbx-trk-pm--h .gbx-trk-pm__dot { background: var(--trk-home); }
.gbx-trk-pm--a .gbx-trk-pm__dot { background: var(--trk-away); }
.gbx-trk-pm__name { max-width: 100%; padding: 1px 5px; font-size: 10px; font-weight: var(--fw-bold, 600); color: #fff; background: rgba(0,0,0,.45); border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* staggered entry — each marker fades/slides in after its own --delay */
.gbx-trk-pitch.is-in .gbx-trk-pm { animation: gbxPmIn .4s var(--ease-out) both; animation-delay: var(--delay, 0ms); }
@keyframes gbxPmIn { from { opacity: 0; transform: translate(-50%,-38%) scale(.82); } }

.gbx-trk-pop { position: absolute; z-index: 6; min-width: 150px; max-width: 200px; padding: 8px 10px; transform: translate(-50%,-118%) scale(.96); opacity: 0; pointer-events: none; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px); box-shadow: var(--shadow-md, 0 8px 24px rgba(16,24,40,.2)); transition: opacity .14s var(--ease-out), transform .14s var(--ease-out); }
.gbx-trk-pop.is-open { opacity: 1; transform: translate(-50%,-118%) scale(1); }
.gbx-trk-pop--below { transform: translate(-50%, 28%) scale(.96); } .gbx-trk-pop--below.is-open { transform: translate(-50%, 28%) scale(1); }
.gbx-trk-pop__h { font-size: var(--fs-sm); font-weight: var(--fw-black, 800); }
.gbx-trk-pop__h b { color: var(--c-primary); }
.gbx-trk-pop__pos { font-size: 11px; color: var(--c-text-muted); margin-top: 1px; }
.gbx-trk-pop__st { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-border); font-size: 11px; font-variant-numeric: tabular-nums; }

.gbx-trk-bench { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.gbx-trk-bench__hd { font-size: 10px; font-weight: var(--fw-black, 800); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); margin-bottom: 5px; }
.gbx-trk-bench__col ul { list-style: none; margin: 0; padding: 0; }
.gbx-trk-bench__col li { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--c-border); }
.gbx-trk-bench__n { flex: none; min-width: 18px; text-align: center; font-size: 10px; font-weight: var(--fw-black, 800); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* ---- TIMELINE: dual-sided incidents ---- */
/* render in API (chronological) order; column-reverse shows newest on top without JS sorting */
.gbx-trk-tl { list-style: none; margin: 0; padding: 4px 0; position: relative; display: flex; flex-direction: column-reverse; }
.gbx-trk-tl::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--c-border) 12%, var(--c-border) 88%, transparent); }
.gbx-trk-tl__item { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 6px; padding: 5px 0; }
.gbx-trk-tl__min { grid-column: 2; justify-self: center; z-index: 1; min-width: 34px; text-align: center; padding: 2px 0; font-size: 11px; font-weight: var(--fw-black, 800); font-variant-numeric: tabular-nums; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 99px; }
.gbx-trk-tl__card { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.gbx-trk-tl__item[data-side="h"] .gbx-trk-tl__card { grid-column: 1; grid-row: 1; flex-direction: row-reverse; justify-self: end; text-align: right; }
.gbx-trk-tl__item[data-side="a"] .gbx-trk-tl__card { grid-column: 3; grid-row: 1; justify-self: start; }
.gbx-trk-tl__ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; color: #fff; position: relative; }
.gbx-trk-tl__ic b { position: absolute; bottom: -4px; right: -4px; font-size: 8px; line-height: 1; padding: 1px 3px; border-radius: 6px; background: var(--c-text); color: var(--c-surface); }
.gbx-trk-tl__ic--goal { background: #16a34a; border-radius: 50%; }
.gbx-trk-tl__ic--owngoal { background: var(--trk-away); border-radius: 50%; }
.gbx-trk-tl__ic--yellow { background: #f5c518; color: #3a2e00; }
.gbx-trk-tl__ic--red { background: var(--trk-away); }
.gbx-trk-tl__ic--sub { background: var(--c-text-muted); border-radius: 50%; }
.gbx-trk-tl__ic--var, .gbx-trk-tl__ic--miss, .gbx-trk-tl__ic--other { background: var(--c-text-muted); border-radius: 50%; }
/* a freshly-arrived goal / red card pops once */
.gbx-trk-tl__ic[data-pop] { animation: gbxIconPop .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) 1; }
@keyframes gbxIconPop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
.gbx-trk-tl__txt { min-width: 0; font-size: var(--fs-sm); line-height: 1.25; }
.gbx-trk-tl__txt b { font-weight: var(--fw-bold, 600); }
.gbx-trk-tl__txt small { display: block; font-size: 11px; color: var(--c-text-muted); }
.gbx-trk-tl__sub { display: inline-flex; align-items: center; gap: 4px; }
.gbx-trk-tl__sub .fa-arrow-up { color: #16a34a; } .gbx-trk-tl__sub .fa-arrow-down { color: var(--trk-away); }

/* ---- PLAYERS ---- */
.gbx-trk-pl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gbx-trk-pl__hd { font-size: 10px; font-weight: var(--fw-black, 800); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); margin-bottom: 6px; }
.gbx-trk-pl__col ul { list-style: none; margin: 0; padding: 0; }
.gbx-trk-pl__row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--c-border); }
.gbx-trk-pl__n { flex: none; min-width: 18px; text-align: center; font-size: 10px; font-weight: var(--fw-black, 800); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.gbx-trk-pl__nm { flex: 1; min-width: 0; font-size: var(--fs-sm); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbx-trk-pl__nm small { display: block; font-size: 10px; color: var(--c-text-muted); }
.gbx-trk-pl__rt { flex: none; min-width: 30px; text-align: center; padding: 2px 5px; border-radius: 5px; font-size: 11px; font-weight: var(--fw-black, 800); font-variant-numeric: tabular-nums; color: #fff; }
.gbx-trk-pl__rt[data-rt="hi"] { background: #16a34a; } .gbx-trk-pl__rt[data-rt="mid"] { background: #d97706; } .gbx-trk-pl__rt[data-rt="lo"] { background: var(--c-text-muted); }

/* ---- TABLES: H2H + standings ---- */
.gbx-trk-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gbx-trk-tbl th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); font-weight: var(--fw-black, 800); padding: 6px 6px; text-align: center; border-bottom: 1px solid var(--c-border); }
.gbx-trk-tbl td { padding: 7px 6px; border-bottom: 1px solid var(--c-border); text-align: center; font-variant-numeric: tabular-nums; }
.gbx-trk-tbl__t { text-align: left; display: flex; align-items: center; gap: 6px; min-width: 0; }
.gbx-trk-tbl__t img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.gbx-trk-tbl__t--a { justify-content: flex-end; text-align: right; }
.gbx-trk-tbl__s { font-weight: var(--fw-black, 800); white-space: nowrap; }
.gbx-trk-tbl__d { color: var(--c-text-muted); font-size: 11px; white-space: nowrap; }
.gbx-trk-tbl__r, .gbx-trk-tbl__pts { font-weight: var(--fw-black, 800); }
.gbx-trk-tbl--h2h td:first-child, .gbx-trk-tbl--stand td:first-child { width: 1%; }
.gbx-trk-tbl__form { white-space: nowrap; }
.gbx-trk-pill { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 1px; border-radius: 4px; font-size: 9px; font-style: normal; font-weight: var(--fw-black, 800); color: #fff; }
.gbx-trk-pill--w { background: #16a34a; } .gbx-trk-pill--l { background: var(--trk-away); } .gbx-trk-pill--d { background: var(--c-text-muted); }

@media (max-width: 560px) {
  .gbx-trk-pl { grid-template-columns: 1fr; }
  .gbx-trk-tbl__d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gbx-trk-poss__seg, .gbx-trk-cmp__bar, .gbx-trk-pop { transition: none; }
  .gbx-trk-pitch.is-in .gbx-trk-pm, .gbx-trk-cmp[data-pulse], .gbx-trk-tl__ic[data-pop] { animation: none; }
}

/* =====================================================================
   BOARD POLISH — real flags, team monograms, live pulse, stats badge
   + infinite-scroll loader and the "new events" pill
   ===================================================================== */

/* country/league flag — real image (flagcdn) with a text fallback */
.gbx-flag {
  width: 20px; height: 14px; border-radius: 2px; flex: none; padding: 0;
  background-color: var(--c-surface-2); background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.12);
}
.gbx-flag--txt {
  width: auto; min-width: 20px; height: 14px; padding: 0 3px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-600); color: #fff; font-size: 9px; font-weight: var(--fw-black); letter-spacing: -.02em; box-shadow: none;
}

/* team monogram avatar (logo stand-in) */
.gbx-mono {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 9px; font-weight: var(--fw-black); color: #fff; background: var(--mc, #64748b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
@media (min-width: 1024px) { .gbx-mono { width: 18px; height: 18px; font-size: 8px; } }

/* live pulse dot inside the LIVE tag */
.gbx-live-tag { display: inline-flex; align-items: center; gap: 4px; }
.gbx-pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: gbxPulse 1.6s ease-out infinite; }
@keyframes gbxPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 5px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* "live stats available" badge in the status cell */
.gbx-mrow__stat { margin-left: 4px; font-size: 10px; color: var(--c-primary); opacity: .85; }

/* ---- infinite-scroll loader (CSS-only circular spinner) ---- */
.gbx-board-more { min-height: 4px; display: flex; align-items: center; justify-content: center; padding: 0; transition: padding var(--dur) var(--ease-out); }
.gbx-board-more.is-loading { padding: 18px 0 24px; }
.gbx-spinner { display: none; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--c-border); border-top-color: var(--c-primary); animation: gbxSpin .7s linear infinite; }
.gbx-board-more.is-loading .gbx-spinner { display: block; }
@keyframes gbxSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gbx-spinner { animation-duration: 1.6s; } .gbx-pulse { animation: none; } }

/* ---- "new events" pill (sticky under the sticky header) ---- */
.gbx-board-new {
  position: sticky; top: calc(var(--gbx-head-offset) + 8px); z-index: 6;
  display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 8px; left: 50%; transform: translateX(-50%);
  padding: 7px 16px; border: 0; cursor: pointer; border-radius: var(--r-pill, 999px);
  background: var(--c-primary); color: var(--c-primary-ink, #052e2b);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-black);
  box-shadow: 0 4px 14px var(--c-primary-glow, rgba(19,179,214,.4));
  animation: gbxPillIn .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.gbx-board-new[hidden] { display: none; }
.gbx-board-new i { animation: gbxSpin 1.2s linear infinite; }
@keyframes gbxPillIn { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .gbx-board-new, .gbx-board-new i { animation: none; } }

/* =====================================================================
   LIVE MATCH TRACKER — DARK PREMIUM REDESIGN (supersedes earlier .gbx-trk
   light rules via the cascade). Always-dark Altenar-style surface; 3-column
   on desktop, tabbed on mobile.
   ===================================================================== */
.gbx-trk--premium {
  --trk-bg: #0e1726; --trk-bg2: #142036; --trk-line: #243349; --trk-text: #e8eef7; --trk-muted: #93a6c2;
  --trk-home: #19e3b4; --trk-away: #ff5d6c; --trk-ease: cubic-bezier(.4, 0, .2, 1);
  --trk-pitch-a: #0d4131; --trk-pitch-b: #0a3527; --trk-pitch-line: rgba(255,255,255,.22);
  --trk-glow-goal: #1fd97e; --trk-glow-red: #ff5d6c; --trk-glow-yellow: #f6c945; --trk-glow-live: #ff3145;
  background: linear-gradient(180deg, var(--trk-bg2), var(--trk-bg)); color: var(--trk-text);
  border: 1px solid var(--trk-line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(2, 8, 20, .45), inset 0 1px 0 rgba(255,255,255,.04);
}
.gbx-trk--premium * { border-color: var(--trk-line); }

/* ---- live status header (breathing glow) ---- */
.gbx-trk__statusbar {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  font-weight: var(--fw-black, 800); letter-spacing: .04em; text-transform: uppercase; font-size: 12px;
  border-bottom: 1px solid var(--trk-line); background: rgba(255,255,255,.015);
}
.gbx-trk__st-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--trk-muted); flex: none; }
.gbx-trk__st-lbl { font-variant-numeric: tabular-nums; }
.gbx-trk__st-score { margin-left: auto; font-size: 16px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff; }
.gbx-trk__st-score i { color: var(--trk-muted); margin: 0 4px; font-style: normal; }
.gbx-trk__statusbar.is-live { color: #ffd9dd; box-shadow: inset 0 0 0 9999px rgba(255,49,69,.04); }
.gbx-trk__statusbar.is-live .gbx-trk__st-dot { background: var(--trk-glow-live); animation: gbxBreathe 2.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes gbxBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,49,69,.55), 0 0 6px 1px rgba(255,49,69,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(255,49,69,0),   0 0 14px 4px rgba(255,49,69,.85); }
}
.gbx-trk__statusbar.is-fin .gbx-trk__st-dot { background: var(--trk-muted); }

/* ---- tabs (mobile) + segmented control (desktop) ---- */
.gbx-trk--premium .gbx-trk__tabs { padding: 8px; gap: 4px; border-bottom: 1px solid var(--trk-line); background: rgba(0,0,0,.12); }
.gbx-trk--premium .gbx-trk__tab { padding: 8px 13px; border-radius: 9px; background: transparent; color: var(--trk-muted); font-weight: var(--fw-bold, 700); font-size: var(--fs-sm); white-space: nowrap; border: 0; cursor: pointer; transition: background .18s, color .18s; }
.gbx-trk--premium .gbx-trk__tab:hover { color: var(--trk-text); background: rgba(255,255,255,.05); }
.gbx-trk--premium .gbx-trk__tab.is-active { color: #04201a; background: var(--trk-home); box-shadow: 0 4px 14px rgba(25,227,180,.35); }

.gbx-trk__seg { display: none; gap: 4px; padding: 4px; margin: 2px 0 8px; background: rgba(0,0,0,.22); border: 1px solid var(--trk-line); border-radius: 10px; }
.gbx-trk__segbtn { flex: 1; padding: 6px 8px; border: 0; cursor: pointer; border-radius: 7px; background: transparent; color: var(--trk-muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-black, 800); text-transform: uppercase; letter-spacing: .03em; transition: background .16s, color .16s; }
.gbx-trk__segbtn:hover { color: var(--trk-text); }
.gbx-trk__segbtn.is-active { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--trk-line); }

/* ---- responsive layout: 3-col desktop / single active slot mobile ---- */
/* SELF-AWARE LAYOUT: the tracker is its own query container, so the 3-column
   grid is governed by ITS width — independent of viewport, zoom, or OS scaling. */
.gbx-trk--premium { container: trk / inline-size; }
.gbx-trk__grid { padding: 10px; }
.gbx-trk__slot { min-height: 60px; }

/* TABS — only on a genuinely tiny container (<600px) */
@container trk (max-width: 599.98px) {
  .gbx-trk--premium .gbx-trk__tabs { display: flex; }
  .gbx-trk__seg { display: none !important; }
  .gbx-trk__grid { display: block; }
  .gbx-trk__slot { display: none; }
  .gbx-trk__slot.is-active { display: block; }
}

/* GRID (2-col OR 3-col): >=600 — tabs gone, every panel visible, spacing squeezed */
@container trk (min-width: 600px) {
  .gbx-trk--premium .gbx-trk__tabs { display: none; }
  .gbx-trk__seg { display: flex; grid-area: seg; }
  .gbx-trk__slot { display: block; }
  .gbx-trk__grid { display: grid; gap: 8px; align-items: start; }
  .gbx-trk__slot--live      { grid-area: live; max-height: 520px; overflow: auto; }
  .gbx-trk__slot--secondary { grid-area: secondary; max-height: 230px; overflow: auto; }
  .gbx-trk__slot::-webkit-scrollbar { width: 6px; }
  .gbx-trk__slot::-webkit-scrollbar-thumb { background: var(--trk-line); border-radius: 9px; }
  /* squeeze so it fits narrower desktops */
  .gbx-trk-cap { margin: 6px 0; } .gbx-trk-cap__bubble { padding: 8px 10px; gap: 9px; }
  .gbx-trk-cap__txt b { font-size: 12.5px; } .gbx-trk-cap__ic { width: 32px; height: 32px; font-size: 14px; }
  .gbx-trk-mom { padding: 7px 10px 9px; } .gbx-trk-cmp { padding: 6px 0 11px; }
}

/* 2-COLUMN (600–859): Timeline left · Stats + 3D Pitch + Table stacked right */
@container trk (min-width: 600px) and (max-width: 859.98px) {
  .gbx-trk__grid {
    grid-template-columns: 1fr 1.18fr;
    grid-template-areas: "live stats" "live lineups" "live seg" "live secondary";
  }
  .gbx-trk__slot--stats   { grid-area: stats; }
  .gbx-trk__slot--lineups { grid-area: lineups; }
  .gbx-trk--premium { font-size: 13px; }
  .gbx-trk__grid { padding: 8px; }
}

/* 3-COLUMN (>=860): Timeline · Stats(+seg+table) · Pitch */
@container trk (min-width: 860px) {
  .gbx-trk__grid {
    grid-template-columns: 1.05fr 1fr 1.05fr;
    grid-template-areas: "live stats lineups" "live seg lineups" "live secondary lineups";
  }
  .gbx-trk__slot--lineups { grid-area: lineups; }
  .gbx-trk__slot--stats { grid-area: stats; border-left: 1px solid var(--trk-line); border-right: 1px solid var(--trk-line); padding: 0 10px; }
  .gbx-trk__slot::-webkit-scrollbar { width: 7px; }
}

/* ---- POSSESSION & STAT BARS — recessed track + raised fill (box-shadow depth) ---- */
.gbx-trk--premium .gbx-trk-poss {
  height: 34px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px var(--trk-line);     /* recessed track */
}
.gbx-trk--premium .gbx-trk-poss__seg { transition: width .8s var(--trk-ease); will-change: width; color: #03241c; text-shadow: 0 1px 0 rgba(255,255,255,.18); }
.gbx-trk--premium .gbx-trk-poss__seg--h { background: linear-gradient(180deg, #2ff5c6, var(--trk-home)); box-shadow: 0 2px 8px rgba(25,227,180,.45), inset 0 1px 0 rgba(255,255,255,.4); }   /* raised fill */
.gbx-trk--premium .gbx-trk-poss__seg--a { background: linear-gradient(180deg, #ff7a86, var(--trk-away)); color: #2a0810; box-shadow: 0 2px 8px rgba(255,93,108,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.gbx-trk--premium .gbx-trk-poss__cap { color: var(--trk-muted); }

.gbx-trk--premium .gbx-trk-cmp { border-color: var(--trk-line); }
.gbx-trk--premium .gbx-trk-cmp__v { color: var(--trk-text); }
.gbx-trk--premium .gbx-trk-cmp__lbl { color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk-cmp__track { height: 9px; }
.gbx-trk--premium .gbx-trk-cmp__half { background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.gbx-trk--premium .gbx-trk-cmp__half--h { border-radius: 99px 0 0 99px; } .gbx-trk--premium .gbx-trk-cmp__half--a { border-radius: 0 99px 99px 0; }
.gbx-trk--premium .gbx-trk-cmp__bar { transition: width .8s var(--trk-ease); box-shadow: 0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.gbx-trk--premium .gbx-trk-cmp__half--h .gbx-trk-cmp__bar { background: linear-gradient(180deg, #2ff5c6, var(--trk-home)); }
.gbx-trk--premium .gbx-trk-cmp__half--a .gbx-trk-cmp__bar { background: linear-gradient(180deg, #ff7a86, var(--trk-away)); }
.gbx-trk--premium .gbx-trk-cmp[data-pulse] { animation: gbxStatPulse .8s var(--trk-ease) 1; }

/* ---- PITCH — dark, high-contrast, GPU-isolated glow markers ---- */
.gbx-trk--premium .gbx-trk-pitch {
  contain: strict; aspect-ratio: 10 / 14; border: 1px solid var(--trk-line); border-radius: 10px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(0deg, var(--trk-pitch-a) 0 8%, var(--trk-pitch-b) 8% 16%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}
.gbx-trk--premium .gbx-trk-pitch::before { background: var(--trk-pitch-line); }      /* halfway line */
.gbx-trk--premium .gbx-trk-pitch::after { border-color: var(--trk-pitch-line); }     /* centre circle */
/* penalty boxes + goal areas (top & bottom) */
.gbx-trk--premium .gbx-trk-pitch { position: relative; }
.gbx-trk--premium .gbx-trk-pitch .gbx-trk-pm { z-index: 3; }
.gbx-trk-pitch-box { position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid var(--trk-pitch-line); border-top: 0; }
/* drawn via box-shadows on the pitch pseudo? simpler: extra gradient lines */
.gbx-trk--premium .gbx-trk-pitch { background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    /* top penalty box */ linear-gradient(transparent 0, transparent 13%, var(--trk-pitch-line) 13%, var(--trk-pitch-line) calc(13% + 1px), transparent calc(13% + 1px)),
    /* bottom penalty box */ linear-gradient(transparent 0, transparent 87%, var(--trk-pitch-line) 87%, var(--trk-pitch-line) calc(87% + 1px), transparent calc(87% + 1px)),
    repeating-linear-gradient(0deg, var(--trk-pitch-a) 0 8%, var(--trk-pitch-b) 8% 16%);
}
.gbx-trk--premium .gbx-trk-pm__dot {
  width: clamp(24px, 6vw, 30px); border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 12px 2px var(--mc-glow, rgba(25,227,180,.6)), 0 2px 5px rgba(0,0,0,.5);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 55%), var(--pm-c, var(--trk-home));
}
.gbx-trk--premium .gbx-trk-pm--h .gbx-trk-pm__dot { --pm-c: var(--trk-home); --mc-glow: rgba(25,227,180,.65); }
.gbx-trk--premium .gbx-trk-pm--a .gbx-trk-pm__dot { --pm-c: var(--trk-away); --mc-glow: rgba(255,93,108,.6); }
.gbx-trk--premium .gbx-trk-pm:hover .gbx-trk-pm__dot { box-shadow: 0 0 18px 4px var(--mc-glow), 0 3px 8px rgba(0,0,0,.55); }
.gbx-trk--premium .gbx-trk-pm__name { background: rgba(0,0,0,.62); color: #fff; }
.gbx-trk--premium .gbx-trk-formrow { color: var(--trk-muted); } .gbx-trk--premium .gbx-trk-formrow__vs { color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk-bench__col li { border-color: var(--trk-line); }
.gbx-trk--premium .gbx-trk-bench__hd, .gbx-trk--premium .gbx-trk-bench__n { color: var(--trk-muted); }

/* ---- TIMELINE — larger, centred, soft-glow icons ---- */
.gbx-trk--premium .gbx-trk-tl::before { background: linear-gradient(180deg, transparent, var(--trk-line) 12%, var(--trk-line) 88%, transparent); }
.gbx-trk--premium .gbx-trk-tl__min { background: var(--trk-bg2); border-color: var(--trk-line); color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk-tl__txt { color: var(--trk-text); } .gbx-trk--premium .gbx-trk-tl__txt small { color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk-tl__item { grid-template-columns: 1fr 46px 1fr; }
.gbx-trk--premium .gbx-trk-tl__ic { width: 30px; height: 30px; font-size: 14px; box-shadow: 0 0 0 4px var(--trk-bg2); }
.gbx-trk--premium .gbx-trk-tl__ic--goal    { background: #16a34a; box-shadow: 0 0 14px 2px var(--trk-glow-goal), 0 0 0 4px var(--trk-bg2); }
.gbx-trk--premium .gbx-trk-tl__ic--owngoal { background: var(--trk-away); box-shadow: 0 0 14px 2px var(--trk-glow-red), 0 0 0 4px var(--trk-bg2); }
.gbx-trk--premium .gbx-trk-tl__ic--red     { background: var(--trk-away); box-shadow: 0 0 14px 2px var(--trk-glow-red), 0 0 0 4px var(--trk-bg2); }
.gbx-trk--premium .gbx-trk-tl__ic--yellow  { background: #f6c945; color: #2a2200; box-shadow: 0 0 12px 1px var(--trk-glow-yellow), 0 0 0 4px var(--trk-bg2); }
.gbx-trk--premium .gbx-trk-tl__ic--sub, .gbx-trk--premium .gbx-trk-tl__ic--var,
.gbx-trk--premium .gbx-trk-tl__ic--other, .gbx-trk--premium .gbx-trk-tl__ic--miss { background: #33445e; box-shadow: 0 0 0 4px var(--trk-bg2); }

/* ---- tables + players + empties (dark) ---- */
.gbx-trk--premium .gbx-trk-tbl th { color: var(--trk-muted); border-color: var(--trk-line); }
.gbx-trk--premium .gbx-trk-tbl td { border-color: var(--trk-line); color: var(--trk-text); }
.gbx-trk--premium .gbx-trk-tbl__d { color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk-pl__row { border-color: var(--trk-line); } .gbx-trk--premium .gbx-trk-pl__nm small, .gbx-trk--premium .gbx-trk-pl__n, .gbx-trk--premium .gbx-trk-pl__hd { color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk__empty { color: var(--trk-muted); }
.gbx-trk--premium .gbx-trk__skel span { background: linear-gradient(90deg, #18233a 25%, #223150 37%, #18233a 63%); background-size: 400% 100%; }
.gbx-trk--premium .gbx-trk-pop { background: #18233a; color: var(--trk-text); border-color: var(--trk-line); }
.gbx-trk--premium .gbx-trk-pop__h b { color: var(--trk-home); } .gbx-trk--premium .gbx-trk-pop__pos { color: var(--trk-muted); }

/* ---- typography polish ---- */
.gbx-trk--premium { font-variant-numeric: tabular-nums; }
.gbx-trk--premium .gbx-trk-cmp__v, .gbx-trk--premium .gbx-trk-pl__rt, .gbx-trk--premium .gbx-trk-tbl__pts { font-weight: var(--fw-black, 800); letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
  .gbx-trk__statusbar.is-live .gbx-trk__st-dot { animation: none; }
}

/* =====================================================================
   TRACKER — PREMIUM RENDERERS (Altenar-grade pitch + event capsules)
   Supersedes the earlier .gbx-trk-pitch / .gbx-trk-tl rules via cascade.
   ===================================================================== */

/* tab-switch feel: each freshly-painted slot child fades/slides in */
.gbx-trk__slot > * { animation: gbxSlotIn .26s var(--trk-ease) both; }
@keyframes gbxSlotIn { from { opacity: 0; transform: translateY(5px); } }

/* ---- THE PITCH — dark-emerald, SVG markings, GPU-isolated ---- */
.gbx-trk--premium .gbx-trk-pitch {
  contain: strict; position: relative; aspect-ratio: 68 / 105; border: 0; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.06), transparent 55%),
    repeating-linear-gradient(0deg, #0e4a37 0 7.1%, #0b3d2d 7.1% 14.2%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.55), inset 0 0 0 1px var(--trk-line);
}
.gbx-trk--premium .gbx-trk-pitch::before, .gbx-trk--premium .gbx-trk-pitch::after { content: none; }   /* SVG replaces the old pseudo-lines */
.gbx-trk-pitch__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.gbx-trk--premium .gbx-trk-pm { z-index: 3; }

/* glowing white avatars (jersey number inside, team-tinted glow ring) */
.gbx-trk--premium .gbx-trk-pm__dot {
  width: clamp(26px, 6.6vw, 32px); height: clamp(26px, 6.6vw, 32px); border: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #0c1622;
  background: radial-gradient(circle at 38% 30%, #ffffff, #dde7f4 72%);
  box-shadow: 0 0 0 2px var(--pm-ring), 0 0 14px 2px var(--pm-glow), 0 3px 6px rgba(0,0,0,.5);
}
.gbx-trk--premium .gbx-trk-pm--h .gbx-trk-pm__dot { --pm-ring: var(--trk-home); --pm-glow: rgba(25,227,180,.6); }
.gbx-trk--premium .gbx-trk-pm--a .gbx-trk-pm__dot { --pm-ring: var(--trk-away); --pm-glow: rgba(255,93,108,.55); }
.gbx-trk--premium .gbx-trk-pm:hover .gbx-trk-pm__dot { box-shadow: 0 0 0 2px var(--pm-ring), 0 0 20px 5px var(--pm-glow), 0 4px 9px rgba(0,0,0,.55); }
.gbx-trk--premium .gbx-trk-pm__name { background: rgba(4,10,20,.66); color: #fff; font-weight: 700; }

/* lineup header (formation + shirts) */
.gbx-trk-lhead { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 10px; font-size: 12px; }
.gbx-trk-lhead__t { display: inline-flex; align-items: center; gap: 6px; color: var(--trk-muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.gbx-trk-lhead__t b { color: var(--trk-text); font-weight: 900; }
.gbx-trk-lhead__t--h i { color: var(--trk-home); } .gbx-trk-lhead__t--a i { color: var(--trk-away); }

/* ---- EVENT CAPSULES — glass bubbles glowing in the incident colour ---- */
.gbx-trk-caps { list-style: none; margin: 0; padding: 8px 2px; position: relative; display: flex; flex-direction: column-reverse; }
/* vibrant, glowing gradient spine */
.gbx-trk-caps::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 3px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--trk-home) 10%, #3aa0ff 48%, var(--trk-away) 90%, transparent);
  box-shadow: 0 0 12px rgba(58,160,255,.45); }
.gbx-trk-cap { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; margin: 9px 0;
  animation: gbxCapIn .42s var(--trk-ease) both; animation-delay: var(--delay, 0ms); }
@keyframes gbxCapIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.gbx-trk-cap__min { z-index: 1; text-align: center; font-size: 11px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #1b2942, #131e30); padding: 4px 0; border-radius: 8px;
  box-shadow: 0 0 0 3px var(--trk-bg), inset 0 1px 0 rgba(255,255,255,.08); }

/* GLASSMORPHISM bubble — translucent + blur + border-glow + layered shadow depth */
.gbx-trk-cap__bubble {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 14px; border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(2,8,20,.5), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3);
}
.gbx-trk-cap__ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; color: #fff; background: #2a3a54; position: relative; }
.gbx-trk-cap__ic b { position: absolute; bottom: -4px; right: -4px; font-size: 8px; line-height: 1; padding: 1px 3px; border-radius: 6px; background: #0b1422; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.gbx-trk-cap__txt { min-width: 0; line-height: 1.3; }
.gbx-trk-cap__txt b { font-size: 13.5px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.gbx-trk-cap__txt small { display: block; font-size: 11px; color: var(--trk-muted); margin-top: 1px; }
.gbx-trk-cap__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff; }
.gbx-trk-cap__sub .fa-arrow-up { color: #2ff5c6; } .gbx-trk-cap__sub .fa-arrow-down { color: var(--trk-away); }

/* per-type vivid border-glow + COLOR-PULSING icon */
.gbx-trk-cap--goal .gbx-trk-cap__bubble { border-color: rgba(31,217,126,.5); box-shadow: 0 10px 26px rgba(2,8,20,.5), 0 0 24px rgba(31,217,126,.3), inset 0 1px 0 rgba(255,255,255,.16); }
.gbx-trk-cap--goal .gbx-trk-cap__ic { background: radial-gradient(circle at 35% 30%, #46f0a0, #12a866); animation: gbxIcoGoal 2.2s var(--trk-ease) infinite; }
@keyframes gbxIcoGoal { 0%,100% { box-shadow: 0 0 0 0 rgba(31,217,126,.55), 0 0 14px 2px rgba(31,217,126,.5); } 50% { box-shadow: 0 0 0 7px rgba(31,217,126,0), 0 0 22px 6px rgba(31,217,126,.9); } }
.gbx-trk-cap--owngoal .gbx-trk-cap__bubble, .gbx-trk-cap--red .gbx-trk-cap__bubble { border-color: rgba(255,93,108,.5); box-shadow: 0 10px 26px rgba(2,8,20,.5), 0 0 24px rgba(255,93,108,.3), inset 0 1px 0 rgba(255,255,255,.14); }
.gbx-trk-cap--owngoal .gbx-trk-cap__ic, .gbx-trk-cap--red .gbx-trk-cap__ic { background: radial-gradient(circle at 35% 30%, #ff8893, #e23b4c); animation: gbxIcoRed 2.2s var(--trk-ease) infinite; }
@keyframes gbxIcoRed { 0%,100% { box-shadow: 0 0 0 0 rgba(255,93,108,.55), 0 0 14px 2px rgba(255,93,108,.5); } 50% { box-shadow: 0 0 0 7px rgba(255,93,108,0), 0 0 22px 6px rgba(255,93,108,.9); } }
.gbx-trk-cap--yellow .gbx-trk-cap__bubble { border-color: rgba(246,201,69,.45); }
.gbx-trk-cap--yellow .gbx-trk-cap__ic { background: radial-gradient(circle at 35% 30%, #ffe07a, #e0a917); color: #2a2200; box-shadow: 0 0 14px 2px rgba(246,201,69,.6); }
.gbx-trk-cap--sub .gbx-trk-cap__ic, .gbx-trk-cap--var .gbx-trk-cap__ic, .gbx-trk-cap--other .gbx-trk-cap__ic { background: linear-gradient(135deg, #33445e, #243349); }
.gbx-trk-cap[data-pop] .gbx-trk-cap__ic { animation: gbxIconPop .6s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) 1; }
@media (prefers-reduced-motion: reduce) { .gbx-trk-cap, .gbx-trk__slot > *, .gbx-trk-cap__ic { animation: none !important; } }

/* ---- LIVE MOMENTUM wave (honest pressure graph, glowing line) ---- */
.gbx-trk__momentum:empty { display: none; }
.gbx-trk-mom { padding: 9px 14px 11px; border-bottom: 1px solid var(--trk-line); background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12)); animation: gbxSlotIn .35s var(--trk-ease) both; }
.gbx-trk-mom__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.gbx-trk-mom__h { color: var(--trk-home); } .gbx-trk-mom__a { color: var(--trk-away); }
.gbx-trk-mom__t { color: var(--trk-muted); display: inline-flex; align-items: center; gap: 5px; }
.gbx-trk-mom__plot { position: relative; height: 48px; }
.gbx-trk-mom__svg { display: block; width: 100%; height: 100%; }
.gbx-trk-mom__mid { stroke: rgba(255,255,255,.16); stroke-width: .4; stroke-dasharray: 1.6 1.6; vector-effect: non-scaling-stroke; }
.gbx-trk-mom__area { fill: url(#gbxMomGrad); }
.gbx-trk-mom__line {
  fill: none; stroke: #eafff9; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(90,210,255,.85)) drop-shadow(0 0 6px rgba(25,227,180,.35));
  stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: gbxMomDraw 1s var(--trk-ease) forwards;
}
@keyframes gbxMomDraw { to { stroke-dashoffset: 0; } }
.gbx-trk-mom__dot { position: absolute; right: 0; width: 8px; height: 8px; border-radius: 50%; transform: translate(50%, -50%);
  background: #eafff9; box-shadow: 0 0 9px 2px rgba(90,210,255,.9), 0 0 3px 1px rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) { .gbx-trk-mom, .gbx-trk-mom__line { animation: none; stroke-dashoffset: 0; } }

/* ---- ANALYTICAL PITCH: pressure zones (smooth) + pitchPulse triggers ---- */
/* registering --pressure lets it TRANSITION, so the glow flows between polls, not jumps */
@property --pressure { syntax: '<number>'; inherits: true; initial-value: 0; }
.gbx-trk--premium .gbx-trk-pitch { --pressure: 0; transition: --pressure .9s var(--trk-ease); }
.gbx-trk-zone { position: absolute; left: 0; right: 0; height: 44%; pointer-events: none; z-index: 1; mix-blend-mode: screen;
  animation: gbxZoneBreathe 3.2s var(--trk-ease) infinite; }
.gbx-trk-zone--top { top: 0;    background: radial-gradient(80% 100% at 50% 0%,   rgba(25,227,180,.34), transparent 72%); opacity: max(0, var(--pressure)); }
.gbx-trk-zone--bot { bottom: 0; background: radial-gradient(80% 100% at 50% 100%, rgba(255,93,108,.34), transparent 72%); opacity: max(0, calc(-1 * var(--pressure))); }
@keyframes gbxZoneBreathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

.gbx-trk-fx { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 4; mix-blend-mode: screen; }
.gbx-trk-fx--shot { height: 38%; background: radial-gradient(75% 100% at 50% var(--edge,0%), rgba(90,210,255,.55), transparent 70%); animation: gbxFxFade 1.1s ease-out forwards; }
.gbx-trk-fx--shot.gbx-trk-fx--h { top: 0; --edge: 0%; } .gbx-trk-fx--shot.gbx-trk-fx--a { bottom: 0; --edge: 100%; }
.gbx-trk-fx--corner { height: 22%; background:
    radial-gradient(15px 15px at 8% var(--c,0%), rgba(31,217,126,.85), transparent 70%),
    radial-gradient(15px 15px at 92% var(--c,0%), rgba(31,217,126,.85), transparent 70%);
  animation: gbxFxPulse 1.3s ease-out forwards; }
.gbx-trk-fx--corner.gbx-trk-fx--h { top: 0; --c: 7%; } .gbx-trk-fx--corner.gbx-trk-fx--a { bottom: 0; --c: 93%; }
.gbx-trk-fx--goal { height: 48%; background: radial-gradient(58% 80% at 50% var(--g,0%), rgba(31,217,126,.9), rgba(31,217,126,.22) 48%, transparent 75%); animation: gbxFxGoal 1.7s var(--trk-ease) forwards; }
.gbx-trk-fx--goal.gbx-trk-fx--h { top: 0; --g: 0%; } .gbx-trk-fx--goal.gbx-trk-fx--a { bottom: 0; --g: 100%; }
@keyframes gbxFxFade  { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gbxFxPulse { 0% { opacity: .2; transform: scale(.85); } 40% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes gbxFxGoal  { 0% { opacity: 0; transform: scale(.92); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .gbx-trk-zone { animation: none; } .gbx-trk-fx { display: none; } }

/* =====================================================================
   3D BROADCAST PITCH — perspective field + stadium backdrop + upright markers
   (overrides the flat 2D pitch; same SVG markings, same marker positions/data)
   ===================================================================== */
.gbx-trk--premium .gbx-trk-pitch--3d {
  contain: layout paint; aspect-ratio: 16 / 11; border: 0; border-radius: 12px; overflow: hidden; position: relative;
  perspective: 880px; perspective-origin: 50% 24%; background: #05080e;
}
/* ---- LAYER 1: real stadium blurred into atmosphere (bokeh lights + crowd, no second pitch) ---- */
.gbx-trk-stadium { position: absolute; inset: 0; z-index: 0; }
.gbx-trk-stadium__photo { position: absolute; inset: -9%; background: #05080e url(../../img/stadium-night.jpg) center 32% / cover;
  filter: blur(6px) brightness(.62) saturate(1.12); transform: scale(1.05); }
.gbx-trk-stadium__veil { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5,8,14,.55) 0%, rgba(5,8,14,.18) 26%, rgba(5,8,14,0) 40%, rgba(5,8,14,.65) 82%, rgba(5,8,14,.92) 100%),
  radial-gradient(120% 80% at 50% 30%, transparent 42%, rgba(2,4,9,.6) 100%); }
.gbx-trk-stadium__boards { position: absolute; left: 26%; right: 26%; top: 30%; height: 2.2%; border-radius: 2px; opacity: .8;
  background: linear-gradient(90deg, #1b3fd0, #2a86ff, #13c2c2, #2a86ff, #1b3fd0); box-shadow: 0 0 16px rgba(40,134,255,.7); }

/* ---- LAYER 2: ONE crisp pitch — striped, lit, edges blended (no card border) ---- */
.gbx-trk-pitch__field {
  position: absolute; left: 3%; right: 3%; top: 40%; bottom: 3%; z-index: 2;
  transform-style: preserve-3d; transform: rotateX(57deg); transform-origin: 50% 100%; border-radius: 3px;
  background:
    radial-gradient(82% 76% at 50% 92%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(0deg, #218a58 0 9%, #1a6f47 9% 18%);
  box-shadow: 0 26px 60px rgba(0,0,0,.6);
  -webkit-mask: linear-gradient(0deg, #000 78%, rgba(0,0,0,.35) 93%, transparent 100%);
          mask: linear-gradient(0deg, #000 78%, rgba(0,0,0,.35) 93%, transparent 100%);
}
.gbx-trk-pitch__field .gbx-trk-pitch__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
/* upright tokens — small jersey dots; names hidden in 3D (click opens the player popover) */
.gbx-trk--premium .gbx-trk-pitch--3d .gbx-trk-pm { width: auto; gap: 0; transform: translate(-50%, -50%) rotateX(-57deg); }
.gbx-trk--premium .gbx-trk-pitch--3d .gbx-trk-pm:hover { transform: translate(-50%, -50%) rotateX(-57deg) scale(1.18); z-index: 6; }
.gbx-trk--premium .gbx-trk-pitch--3d .gbx-trk-pm__dot {
  width: 18px; height: 18px; aspect-ratio: 1; font-size: 9.5px; font-weight: 800; color: #fff; border: 0;
  box-shadow: 0 0 0 1.4px rgba(255,255,255,.92), 0 2px 5px rgba(0,0,0,.55);
}
.gbx-trk--premium .gbx-trk-pitch--3d .gbx-trk-pm--h .gbx-trk-pm__dot { background: var(--trk-home); }
.gbx-trk--premium .gbx-trk-pitch--3d .gbx-trk-pm--a .gbx-trk-pm__dot { background: var(--trk-away); }
.gbx-trk--premium .gbx-trk-pitch--3d .gbx-trk-pm__name { display: none; }
.gbx-trk-pitch--3d.is-in .gbx-trk-pm { animation: gbxPm3d .4s var(--ease-out) both; animation-delay: var(--delay, 0ms); }
@keyframes gbxPm3d { from { opacity: 0; } }

/* "ATTACK · TEAM" broadcast label (counter-rotated, faces the camera) */
.gbx-trk-atk { position: absolute; left: 50%; transform: translate(-50%, -50%) rotateX(-57deg); text-align: center; z-index: 5; animation: gbxAtkIn .3s var(--ease-out) both; }
.gbx-trk-atk--h { top: 30%; } .gbx-trk-atk--a { top: 70%; }
.gbx-trk-atk__l { display: block; font-size: 12px; font-weight: 900; letter-spacing: .09em; color: #ffd23f; text-shadow: 0 2px 5px #000, 0 0 10px rgba(255,210,63,.6); white-space: nowrap; }
.gbx-trk-atk__d { display: block; width: 10px; height: 10px; border-radius: 50%; margin: 4px auto 0; background: var(--ad, #ff3145); box-shadow: 0 0 14px 4px var(--ag, rgba(255,49,69,.9)); animation: gbxAtkDot 1.2s ease-out infinite; }
.gbx-trk-atk--h .gbx-trk-atk__d { --ad: #19e3b4; --ag: rgba(25,227,180,.85); }
@keyframes gbxAtkIn  { from { opacity: 0; transform: translate(-50%, -28%) rotateX(-57deg); } }
@keyframes gbxAtkDot { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.8); opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .gbx-trk-atk__d, .gbx-trk-pitch--3d.is-in .gbx-trk-pm { animation: none; } }