/* Smart Auto Matches (public/js/sportsbook-popular.js): compact, horizontally scrolling rows of the existing live cards. */
.bc-sb-popular { margin: 0 0 .75em; min-width: 0; max-width: 100%; }
.bc-sb-popular[hidden] { display: none; }
.bc-sb-popular__title { margin: .6em .75em .4em; font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bc-sb-popular__row { display: flex; gap: .5em; overflow-x: auto; padding: 0 .75em .4em; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bc-sb-popular__row > .bc-sb-popular__card { flex: 0 0 min(88%, 20em); min-width: 0; margin: 0 !important; scroll-snap-align: start; cursor: pointer; }
.bc-sb-popular__foot { font-size: .7em; opacity: .7; padding: .1em .2em 0; }
.bc-sb-popular__odd--stale { opacity: .55; cursor: not-allowed; }
.bc-sb-popular__note { margin: 0 .75em .25em; font-size: .7em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .bc-sb-popular__row { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------------------------------------------------------------------
 * TOP MATCHES LIVE (public/js/sportsbook-popular.js, .tm-*): its own compact card. Two separate actions per card: the match area
 * (.tm-open) opens the match, each price (.tm-odd) is a distinct button (opens the same match only while the price is current).
 * Tokens come from the sportsbook palette (--sn-*) with literal fallbacks. Fixed row heights: a changing score / price never moves layout.
 * --------------------------------------------------------------------------------------------------------------------------------- */
.bc-sb-popular .tm-section { margin: 0 0 .5em; }
.bc-sb-popular .tm-head { display: flex; align-items: center; gap: .5em; margin: .7em .75em .45em; min-width: 0; }
.bc-sb-popular .tm-title { margin: 0; display: flex; align-items: center; gap: .5em; font-size: .8em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sn-text, #f5f3ec); min-width: 0; }
.bc-sb-popular .tm-dot { display: inline-block; flex: 0 0 auto; width: .5em; height: .5em; border-radius: 50%; background: var(--sn-live, #ff5a4f); box-shadow: 0 0 0 .18em rgba(255, 90, 79, .18); }
.bc-sb-popular .tm-count { margin-left: auto; min-width: 1.6em; padding: .1em .5em; border-radius: 999px; font-size: .7em; font-weight: 700; text-align: center; color: var(--sn-text-secondary, #b6b4ad); border: 1px solid var(--sn-border, rgba(244, 201, 93, .15)); }
.bc-sb-popular .tm-count[hidden], .bc-sb-popular .tm-empty[hidden] { display: none; }
.bc-sb-popular .tm-row { display: flex; gap: .55em; overflow-x: auto; padding: 0 .75em .45em; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bc-sb-popular .tm-card { flex: 0 0 min(86%, 19.5em); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: .5em; box-sizing: border-box; padding: .55em; border-radius: var(--sn-radius-lg, 13px); background: var(--sn-surface, #101111); border: 1px solid var(--sn-border, rgba(244, 201, 93, .15)); }
.bc-sb-popular .tm-open, .bc-sb-popular .tm-odd { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; margin: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.bc-sb-popular .tm-open { display: flex; flex-direction: column; gap: .45em; width: 100%; padding: .2em .25em; border: 0; border-radius: var(--sn-radius-md, 9px); background: transparent; min-width: 0; }
.bc-sb-popular .tm-open:hover { background: var(--sn-surface-hover, #1b1b19); }
.bc-sb-popular .tm-meta { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-width: 0; font-size: .7em; line-height: 1.2; color: var(--sn-text-muted, #8c8d85); }
.bc-sb-popular .tm-sport { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sn-text-secondary, #b6b4ad); }
.bc-sb-popular .tm-comp { display: block; min-width: 0; margin-top: -.15em; font-size: .72em; line-height: 1.2; color: var(--sn-text-muted, #8c8d85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-sb-popular .tm-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35em; font-weight: 800; letter-spacing: .05em; color: var(--sn-live, #ff5a4f); }
.bc-sb-popular .tm-clock { color: var(--sn-text, #f5f3ec); font-variant-numeric: tabular-nums; }
.bc-sb-popular .tm-teams { display: flex; flex-direction: column; gap: .3em; }
.bc-sb-popular .tm-team { display: flex; align-items: center; gap: .6em; min-height: 2.4em; }
.bc-sb-popular .tm-name { flex: 1 1 auto; min-width: 0; font-size: .92em; font-weight: 600; line-height: 1.2; color: var(--sn-text, #f5f3ec); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bc-sb-popular .tm-score { flex: 0 0 auto; min-width: 1.6em; text-align: right; font-size: 1.05em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sn-gold, #f4c95d); }
.bc-sb-popular .tm-odds { display: grid; gap: .4em; margin-top: auto; }
.bc-sb-popular .tm-odds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-sb-popular .tm-odds--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-sb-popular .tm-odd { display: flex; align-items: center; justify-content: space-between; gap: .4em; box-sizing: border-box; min-height: max(2.9em, 44px); padding: 0 .7em; border-radius: var(--sn-radius-md, 9px); background: var(--sn-surface-raised, #151616); border: 1px solid var(--sn-border, rgba(244, 201, 93, .15)); transition: background-color var(--sn-motion-fast, 160ms) ease, border-color var(--sn-motion-fast, 160ms) ease; }
.bc-sb-popular .tm-odd__label { font-size: .72em; color: var(--sn-text-muted, #8c8d85); white-space: nowrap; }
.bc-sb-popular .tm-odd__value { font-size: .95em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sn-gold, #f4c95d); }
.bc-sb-popular .tm-odd:hover[data-state="ok"] { border-color: var(--sn-border-strong, rgba(244, 201, 93, .35)); background: var(--sn-surface-hover, #1b1b19); }
.bc-sb-popular .tm-odd[data-state="stale"], .bc-sb-popular .tm-odd[data-state="unavailable"] { cursor: not-allowed; }
.bc-sb-popular .tm-odd[data-state="stale"] .tm-odd__value { color: var(--sn-text-muted, #8c8d85); text-decoration: line-through; text-decoration-thickness: 1px; }
.bc-sb-popular .tm-odd[data-state="unavailable"] { background: transparent; border-style: dashed; }
.bc-sb-popular .tm-odd[data-state="unavailable"] .tm-odd__value { color: var(--sn-text-muted, #8c8d85); }
.bc-sb-popular .tm-odd--up { background: var(--sn-up-tint, rgba(111, 217, 160, .16)); }
.bc-sb-popular .tm-odd--down { background: var(--sn-down-tint, rgba(255, 122, 112, .16)); }
.bc-sb-popular .tm-open:focus-visible, .bc-sb-popular .tm-odd:focus-visible { outline: 2px solid var(--sn-gold, #f4c95d); outline-offset: 2px; }
.bc-sb-popular .tm-empty { margin: 0 .75em .5em; padding: .8em; font-size: .8em; color: var(--sn-text-secondary, #b6b4ad); border: 1px dashed var(--sn-border, rgba(244, 201, 93, .15)); border-radius: var(--sn-radius-md, 9px); }
.bc-sb-popular .tm-card--skeleton { min-height: 9em; }
.bc-sb-popular .tm-sk { display: block; border-radius: 6px; background: var(--sn-surface-raised, #151616); }
.bc-sb-popular .tm-sk--meta { height: .8em; width: 55%; }
.bc-sb-popular .tm-sk--row { height: 1.1em; }
.bc-sb-popular .tm-sk--odds { height: 2.6em; margin-top: auto; }
@media (min-width: 768px) {
  .bc-sb-popular .tm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); overflow: visible; scroll-snap-type: none; }
  .bc-sb-popular .tm-card { flex: none; }
}
@media (min-width: 1440px) { .bc-sb-popular .tm-row { grid-template-columns: repeat(auto-fill, minmax(19em, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bc-sb-popular .tm-odd { transition: none; } }