/* ─── Odds Comparison Tool ──────────────────────────────────────────
   Design direction: dark trading-floor. DrRoto's own brand tokens
   (near-black + indigo) carried over from the rest of the site, not a
   bolted-on admin-table palette. Every number sets in JetBrains Mono
   (tabular) so odds actually line up and read like a live feed. The
   signature move: the BEST column glows mint when a price wins — the
   whole point of the tool is finding that price, so it's the one thing
   allowed to glow.
──────────────────────────────────────────────────────────────────── */

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  --bt-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bt-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bt-bg:        #f4f5f7;
  --bt-surface:   #ffffff;
  --bt-panel:     #ffffff;
  --bt-border:    #e5e7eb;
  --bt-border2:   #d4d7dd;
  --bt-head-bg:   #14141b;
  --bt-head-tx:   #8b8fa3;
  --bt-text:      #16181d;
  --bt-text2:     #5c6070;
  --bt-text3:     #9297a8;

  --bt-brand:     #3052d1;
  --bt-brand-tx:  #ffffff;
  --bt-brand-dim: rgba(48,82,209,.10);

  --bt-mint:      #00c896;
  --bt-mint-tx:   #04412f;
  --bt-mint-glow: rgba(0,200,150,.35);

  --bt-amber:     #f59e0b;
  --bt-red:       #ef4444;

  --bt-edge-str:  #00c896;
  --bt-edge-pos:  #0f9d72;
  --bt-edge-neg:  #ef4444;

  --bt-row-alt:   #fafafb;
  --bt-row-hover: rgba(48,82,209,.05);
  --bt-chrome:    calc(var(--ticker-h, 34px) + var(--topbar-h, 36px) + var(--header-h, 64px));

  --tile-bg:      #f1f2f5;
  --tile-border:  #e2e4e9;
}

/* Dark mode (default for this page) */
html[data-theme="dark"] {
  --bt-bg:        #0a0a0d;
  --bt-surface:   #131318;
  --bt-panel:     #131318;
  --bt-border:    #232329;
  --bt-border2:   #33343d;
  --bt-head-bg:   #000000;
  --bt-head-tx:   #6b6f80;
  --bt-text:      #f0f0f2;
  --bt-text2:     #9497a8;
  --bt-text3:     #64677a;

  --bt-brand:     #5677f0;
  --bt-brand-dim: rgba(86,119,240,.14);

  --bt-mint:      #00e5a8;
  --bt-mint-tx:   #04120d;
  --bt-mint-glow: rgba(0,229,168,.45);

  --bt-edge-str:  #00e5a8;
  --bt-edge-pos:  #4fd8ab;
  --bt-edge-neg:  #ff6b6b;

  --bt-row-alt:   #17171d;
  --bt-row-hover: rgba(86,119,240,.08);

  --tile-bg:      #1c1c23;
  --tile-border:  #2c2d36;
}
html[data-theme="dim"] {
  --bt-bg:        #13161f;
  --bt-surface:   #1a1e2a;
  --bt-panel:     #1a1e2a;
  --bt-border:    #2a2f40;
  --bt-border2:   #3a4156;
  --bt-head-bg:   #0a0c13;
  --bt-head-tx:   #6b7290;
  --bt-text:      #e6e8f0;
  --bt-text2:     #9498b0;
  --bt-text3:     #656b85;

  --bt-brand:     #5677f0;
  --bt-brand-dim: rgba(86,119,240,.14);
  --bt-mint:      #00e5a8;
  --bt-mint-tx:   #04120d;
  --bt-mint-glow: rgba(0,229,168,.4);
  --bt-edge-str:  #00e5a8;
  --bt-edge-pos:  #4fd8ab;
  --bt-edge-neg:  #ff7a7a;

  --bt-row-alt:   #171b26;
  --bt-row-hover: rgba(86,119,240,.08);
  --tile-bg:      #212636;
  --tile-border:  #323952;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--bt-font); background: var(--bt-bg); color: var(--bt-text); font-size: 14px; }

/* ── Page wrapper ─────────────────────────────────────────────────── */
.bt-page {
  margin-top: var(--bt-chrome);
  height: calc(100vh - var(--bt-chrome));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bt-bg);
}

/* ── Control bar — a single row: type tabs, sub-filters, then tools ── */
.bt-controls {
  flex-shrink: 0;
  z-index: 100;
  background: var(--bt-panel);
  border-bottom: 1px solid var(--bt-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.bt-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  flex-wrap: wrap;
  row-gap: 7px;
}

/* ── Sport picker — slim inline pills, left-aligned ───────────────── */
.bt-sport-picker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bt-head-bg);
  border-bottom: 1px solid var(--bt-border);
  overflow-x: auto;
}
.bt-sp-tile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
  position: relative;
}
.bt-sp-tile:hover  { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.bt-sp-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bt-sp-logo img { width: 17px; height: 17px; object-fit: contain; }
.bt-sp-label {
  font-family: var(--bt-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--bt-head-tx);
  transition: color .15s;
}
.bt-sp-tile.active {
  background: var(--bt-brand-dim);
  border-color: var(--bt-brand);
  box-shadow: 0 0 0 1px var(--bt-brand) inset;
}
.bt-sp-tile.active .bt-sp-label { color: #fff; }
.bt-sp-tile.no-data .bt-sp-logo { filter: grayscale(1); opacity: .5; }
.bt-sp-tile.no-data .bt-sp-label { opacity: .5; }
.bt-sp-tile.bt-sp-soon { cursor: default; opacity: .5; }
.bt-sp-tile.bt-sp-soon:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); }
.bt-sp-badge {
  position: absolute;
  top: -6px; right: -5px;
  background: var(--bt-amber);
  color: #1a1200;
  font-family: var(--bt-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 20px;
}

/* Type segmented control */
.bt-type-seg {
  display: flex;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.bt-type-btn {
  padding: 4px 11px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--bt-text2);
  font-family: var(--bt-font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
}
.bt-type-btn:hover  { color: var(--bt-text); }
.bt-type-btn.active { background: var(--bt-surface); color: var(--bt-text); font-weight: 700;
                       box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px var(--bt-border2); }

/* Divider between the tab cluster and the filter cluster */
.bt-sub-group::before {
  content: '';
  width: 1px;
  height: 18px;
  background: var(--bt-border2);
  margin-right: 4px;
}

.bt-bar-right {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.bt-date-input {
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--bt-border2);
  border-radius: 7px;
  background: var(--bt-bg);
  color: var(--bt-text);
  font-family: var(--bt-font);
  font-size: 12.5px;
  cursor: pointer;
}
.bt-date-input:focus-visible { outline: 2px solid var(--bt-brand); outline-offset: 1px; }

/* Week navigator — swaps in for the date input on week-scheduled sports (NFL) */
.bt-week-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 28px;
  padding: 0 3px;
  border: 1px solid var(--bt-border2);
  border-radius: 7px;
  background: var(--bt-bg);
}
.bt-week-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--bt-text2);
  font-size: 9px;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.bt-week-btn:hover:not(:disabled) { background: var(--tile-bg); color: var(--bt-text); }
.bt-week-btn:disabled { opacity: .3; cursor: default; }
.bt-week-label {
  min-width: 92px;
  text-align: center;
  font-family: var(--bt-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bt-text);
  white-space: nowrap;
}

.bt-search-wrap { position: relative; display: flex; align-items: center; }
.bt-search-icon {
  position: absolute; left: 8px;
  width: 13px; height: 13px;
  color: var(--bt-text3);
  pointer-events: none;
}
.bt-search-input {
  height: 28px;
  padding: 0 8px 0 25px;
  border: 1px solid var(--bt-border2);
  border-radius: 7px;
  background: var(--bt-bg);
  color: var(--bt-text);
  font-family: var(--bt-font);
  font-size: 12.5px;
  width: 126px;
  transition: width .2s, border-color .15s;
}
.bt-search-input:focus-visible { outline: 2px solid var(--bt-brand); outline-offset: 1px; width: 180px; }
.bt-search-input::placeholder { color: var(--bt-text3); }
.bt-count {
  font-family: var(--bt-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bt-text3);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

.bt-sub-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.bt-sub-tab {
  padding: 4px 11px;
  border: 1px solid var(--bt-border2);
  border-radius: 20px;
  background: transparent;
  color: var(--bt-text2);
  font-family: var(--bt-font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .13s;
  white-space: nowrap;
}
.bt-sub-tab:hover  { border-color: var(--bt-brand); color: var(--bt-text); }
.bt-sub-tab.active { background: var(--bt-brand); border-color: var(--bt-brand); color: var(--bt-brand-tx); }

.bt-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--bt-border2);
  border-radius: 7px;
  background: var(--bt-bg);
  color: var(--bt-text);
  font-family: var(--bt-font);
  font-size: 12.5px;
  cursor: pointer;
  max-width: 170px;
}
.bt-select:focus-visible { outline: 2px solid var(--bt-brand); }
.bt-sort { min-width: 96px; }

.bt-side-seg {
  display: flex;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 7px;
  padding: 2px;
  gap: 1px;
}
.bt-side-btn {
  padding: 3px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--bt-text2);
  font-family: var(--bt-font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.bt-side-btn.active { background: var(--bt-surface); color: var(--bt-text);
                       box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* ── Book filter shelf — compact branded chips ────────────────────── */
.bt-books-wrap { display: flex; align-items: center; gap: 6px; }
.bt-book-chips { display: flex; align-items: center; gap: 4px; }
.bt-book-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--tile-border);
  border-radius: 7px;
  background: var(--tile-bg);
  cursor: pointer;
  transition: all .13s;
  position: relative;
  overflow: hidden;
}
.bt-book-chip img {
  width: 16px; height: 16px;
  object-fit: contain;
}
.bt-book-chip .chip-fallback {
  font-family: var(--bt-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.bt-book-chip:hover  { border-color: var(--bt-brand); }
.bt-book-chip.on     { border-color: var(--bt-border2); }
.bt-book-chip.off    { opacity: .3; filter: grayscale(1); }
.bt-book-chip.off:hover { opacity: .6; }

/* ── Table wrapper ────────────────────────────────────────────────── */
.bt-table-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
  background: var(--bt-bg);
  padding: 18px clamp(12px, 3vw, 44px) 36px;
}

/* Shell hugs the table's natural width and centres it, so a narrow table
   (game lines) sits in the middle of the page with real margin either
   side instead of stretching edge to edge. A wide table (props, many
   books) simply fills and the wrapper scrolls as before. */
.bt-table-shell {
  width: fit-content;
  min-width: 100%;
  margin: 0 auto;
}

.bt-table {
  min-width: max-content;
  margin: 0 auto;
  border: 1px solid var(--bt-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.bt-table--games { width: auto; max-width: 1060px; }
.bt-table--games.has-books { max-width: none; }

/* ── Sticky header ────────────────────────────────────────────────── */
.bt-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bt-head-bg);
  color: var(--bt-head-tx);
  font-family: var(--bt-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 8px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: default;
}
.bt-table thead th.sortable { cursor: pointer; }
.bt-table thead th.sortable:hover { color: #fff; }

/* Book logo tile in th — bigger, branded, image-or-initials */
.th-book { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 34px; }
.th-book-tile {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 2px solid transparent;
  background: rgba(255,255,255,.04);
}
.th-book-logo { width: 16px; height: 16px; object-fit: contain; }
.th-book-badge {
  font-family: var(--bt-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.th-book-name { font-family: var(--bt-mono); font-size: 9px; letter-spacing: .04em; color: var(--bt-head-tx); }

/* book brand colors — tile bottom-accent + fallback text color */
.bk-dk  { border-bottom-color: #53d337; } .bk-dk  .th-book-badge, .bk-dk  .chip-fallback { color: #53d337; }
.bk-fd  { border-bottom-color: #1493ff; } .bk-fd  .th-book-badge, .bk-fd  .chip-fallback { color: #1493ff; }
.bk-mgm { border-bottom-color: #d4af37; } .bk-mgm .th-book-badge, .bk-mgm .chip-fallback { color: #d4af37; }
.bk-czr { border-bottom-color: #ffc94a; } .bk-czr .th-book-badge, .bk-czr .chip-fallback { color: #ffc94a; }
.bk-br  { border-bottom-color: #ff5a5a; } .bk-br  .th-book-badge, .bk-br  .chip-fallback { color: #ff5a5a; }
.bk-fan { border-bottom-color: #ff6b8a; } .bk-fan .th-book-badge, .bk-fan .chip-fallback { color: #ff6b8a; }
.bk-bov { border-bottom-color: #ff4747; } .bk-bov .th-book-badge, .bk-bov .chip-fallback { color: #ff4747; }
.bk-bol { border-bottom-color: #ff7043; } .bk-bol .th-book-badge, .bk-bol .chip-fallback { color: #ff7043; }
.bk-myb { border-bottom-color: #4ade80; } .bk-myb .th-book-badge, .bk-myb .chip-fallback { color: #4ade80; }
.bk-wh  { border-bottom-color: #a3e635; } .bk-wh  .th-book-badge, .bk-wh  .chip-fallback { color: #a3e635; }

/* ── Sticky left column ──────────────────────────────────────────── */
.bt-table th.col-pin,
.bt-table td.col-pin { position: sticky; left: 0; z-index: 10; }
.bt-table th.col-pin { z-index: 25; }
.bt-table td.col-pin { background: var(--bt-surface); border-right: 1px solid var(--bt-border); }

/* ── Sticky right columns ─────────────────────────────────────────── */
.bt-table th.col-right,
.bt-table td.col-right { position: sticky; background: var(--bt-surface); border-left: 1px solid var(--bt-border); }
.bt-table th.col-right { background: var(--bt-head-bg); z-index: 20; }

/* ── Body rows ────────────────────────────────────────────────────── */
.bt-table tbody tr:nth-child(odd)  td { background: var(--bt-surface); }
.bt-table tbody tr:nth-child(even) td { background: var(--bt-row-alt); }
.bt-table tbody tr:nth-child(even) td.col-pin   { background: var(--bt-row-alt); }
.bt-table tbody tr:nth-child(even) td.col-right { background: var(--bt-row-alt); }
.bt-table tbody tr:hover td,
.bt-table tbody tr:hover td.col-pin,
.bt-table tbody tr:hover td.col-right { background: var(--bt-row-hover) !important; }

.bt-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--bt-border);
  vertical-align: middle;
  white-space: nowrap;
  background: var(--bt-surface);
}

/* ── Match cell — bigger team logo bubbles ───────────────────────── */
.match-cell { min-width: 150px; padding: 0 !important; }
.match-inner { display: flex; flex-direction: column; }
.match-team-row { display: flex; align-items: center; gap: 7px; padding: 4px 9px; }
.match-team-row + .match-team-row { border-top: 1px solid var(--bt-border); }
.match-logo-wrap {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  /* Ring + lift so a dark team plate still separates from a near-black row */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 1px 3px rgba(0,0,0,.4);
}
.match-logo-wrap .match-logo { width: 19px; height: 19px; object-fit: contain; }
.match-logo-init { font-family: var(--bt-mono); font-size: 10px; font-weight: 800; letter-spacing: -.02em; }
.match-team-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.match-side-label {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--bt-text3); line-height: 1;
}
.match-alias { font-size: 13px; font-weight: 700; color: var(--bt-text); letter-spacing: -.01em; line-height: 1.3; }

/* ── Player cell — bigger team badge ("player logo") ─────────────── */
.player-cell { min-width: 168px; }
.player-inner { display: flex; align-items: center; gap: 8px; border-left: 3px solid transparent; padding-left: 7px; }
.team-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px;
  border-radius: 6px;
  font-family: var(--bt-mono);
  font-size: 9.5px; font-weight: 800; letter-spacing: -.02em;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.player-name-text { font-size: 13px; font-weight: 600; color: var(--bt-text); }

/* ── Numeric cells — mono, tabular ───────────────────────────────── */
.cell-num {
  text-align: center;
  font-family: var(--bt-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-text);
}
.cell-num.pos { color: var(--bt-edge-str); }
.cell-num.neg { color: var(--bt-text2); }
.cell-num.nil { color: var(--bt-text3); font-weight: 400; opacity: .5; }

/* ── Odds cells ───────────────────────────────────────────────────── */
.odds-best {
  background: color-mix(in srgb, var(--bt-mint) 16%, transparent) !important;
  color: var(--bt-edge-str) !important;
  font-weight: 800 !important;
  position: relative;
  font-family: var(--bt-mono);
}
.odds-near  { color: var(--bt-text); font-family: var(--bt-mono); }
.odds-std   { color: var(--bt-text2); font-family: var(--bt-mono); }
.odds-nil, .cell-num.nil { opacity: .45; }
.odds-poor  { color: var(--bt-text3); opacity: .8; font-family: var(--bt-mono); }
.odds-nil   { color: var(--bt-text3); opacity: .28; text-align: center; }

/* ── BEST / FAIR / EDGE — the signature glow lives here ──────────── */
.best-cell-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  margin: 2px auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bt-mint) 14%, transparent);
  box-shadow: 0 0 10px var(--bt-mint-glow);
  width: fit-content;
}
.best-odds-val {
  font-family: var(--bt-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--bt-edge-str);
  text-shadow: 0 0 12px var(--bt-mint-glow);
}
.best-book-label {
  font-family: var(--bt-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--bt-text3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fair-val { font-family: var(--bt-mono); font-size: 12.5px; color: var(--bt-text3); }
.edge-strong { color: var(--bt-edge-str); font-weight: 700; }
.edge-pos    { color: var(--bt-edge-pos); font-weight: 600; }
.edge-neutral{ color: var(--bt-text3); }
.edge-neg    { color: var(--bt-edge-neg); }

/* ── Weather cell ─────────────────────────────────────────────────── */
.wx-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 12px; line-height: 1.35; }
.wx-temp  { font-family: var(--bt-mono); font-weight: 600; color: var(--bt-text); }
.wx-wind  { color: var(--bt-text2); font-size: 11px; }
.wx-dome  { color: var(--bt-brand); font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.wx-rain  { color: var(--bt-brand); font-size: 11px; }

/* ── Implied totals cell ──────────────────────────────────────────── */
.totals-inner { display: flex; align-items: center; gap: 5px; font-family: var(--bt-mono); font-size: 12.5px; }
.total-team { font-weight: 700; font-size: 10.5px; }
.total-val  { font-weight: 600; color: var(--bt-text); }
.total-sep  { color: var(--bt-text3); font-size: 10px; font-family: var(--bt-font); }

/* ── Empty / loading state ────────────────────────────────────────── */
.bt-empty-cell { text-align: center; padding: 44px 20px; color: var(--bt-text3); font-size: 13.5px; line-height: 1.6; }

.bt-table th.col-divider-l,
.bt-table td.col-divider-l { border-left: 2px solid var(--bt-border2) !important; }



/* ── Game-lines table: two stacked rows per game ──────────────────────
   Away sits directly above Home and shares one column per metric, so
   MONEYLINE is a single column read down rather than an AWAY ML /
   HOME ML pair read across. Banding runs per GAME (both rows), not per
   row, so a matchup reads as one block. */
.team-cell { min-width: 180px; padding: 0 !important; }
.team-inner {
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid transparent;
  padding: 5px 12px 5px 9px;
}
.team-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html:not([data-theme="dark"]):not([data-theme="dim"]) .match-logo-wrap {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.22);
}

.team-side {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--bt-text2); line-height: 1;
}
.team-alias { font-size: 13.5px; font-weight: 700; color: var(--bt-text); letter-spacing: -.01em; line-height: 1.25; }

/* Per-game banding beats the generic per-row nth-child striping */
.bt-table--games tbody tr.g-base td,
.bt-table--games tbody tr.g-base td.col-pin { background: var(--bt-surface); }
.bt-table--games tbody tr.g-alt td,
.bt-table--games tbody tr.g-alt td.col-pin { background: var(--bt-row-alt); }
.bt-table--games tbody tr:hover td,
.bt-table--games tbody tr:hover td.col-pin { background: var(--bt-row-hover) !important; }

/* Hairline between the two teams of a game; solid rule between games */
.bt-table--games tbody tr.g-first  td { border-bottom: 1px solid var(--bt-border); }
.bt-table--games tbody tr.g-second td { border-bottom: 2px solid var(--bt-border2); }
.bt-table--games tbody tr.g-first td.game-span { border-bottom: 2px solid var(--bt-border2); }

.bt-table--games tbody tr:last-child td { border-bottom: none; }

/* Game-level cells span both team rows and get a calmer treatment */
.bt-table--games td.game-span { vertical-align: middle; }
.bt-table--games td.game-span.cell-num { font-weight: 700; }
.bt-table--games .wx-inner { align-items: center; }


/* ── Per-book cells on the Game Lines table ───────────────────────────
   Moneyline is a single price; spread stacks its number over its price;
   a total stacks the number over both sides. All three keep the price on
   the mono baseline so a column of odds still lines up when scanned. */
.bt-table--games td.bk-cell {
  text-align: center;
  font-family: var(--bt-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  padding: 3px 6px;
}
.bk-cell .bk-line,
.bk-cell .bk-price,
.bk-cell .bk-ou { display: block; }
.bk-cell .bk-line  { font-size: 10px; color: var(--bt-text3); font-weight: 600; }
.bk-cell .bk-price { font-size: 12.5px; font-weight: 700; }
.bk-cell .bk-ou    { font-size: 11px; font-weight: 600; }
.bt-table--games td.bk-empty { color: var(--bt-text3); opacity: .28; }

/* Best price wins the mint treatment, matching the props table's BEST column */
.bt-table--games td.bk-cell.odds-best {
  background: color-mix(in srgb, var(--bt-mint) 16%, transparent) !important;
}
.bt-table--games td.bk-cell.odds-best .bk-price,
.bk-cell .bk-ou.odds-best { color: var(--bt-edge-str); font-weight: 800; }
.bt-table--games td.bk-cell.odds-near  .bk-price { color: var(--bt-text); }
.bt-table--games td.bk-cell.odds-std   .bk-price { color: var(--bt-text2); }
.bt-table--games td.bk-cell.odds-poor  .bk-price { color: var(--bt-text3); }
.bk-cell .bk-ou.odds-near { color: var(--bt-text); }
.bk-cell .bk-ou.odds-std  { color: var(--bt-text2); }
.bk-cell .bk-ou.odds-poor { color: var(--bt-text3); }

/* brand accents for the game-market-only books */
.bk-bus { border-bottom-color: #2f80ed; } .bk-bus .th-book-badge, .bk-bus .chip-fallback { color: #2f80ed; }
.bk-lv  { border-bottom-color: #9ca3af; } .bk-lv  .th-book-badge, .bk-lv  .chip-fallback { color: #9ca3af; }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bt-sp-tile, .bt-book-chip { transition: none; }
}

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bt-bar { padding-left: 10px; padding-right: 10px; }
  .bt-search-input, .bt-search-input:focus-visible { width: 100px; }
  .bt-sub-group::before { display: none; }
}

/* ══ Phone layout ════════════════════════════════════════════════════
   This board compares 14 sportsbooks, so it is legitimately wider than a
   phone — hiding books would defeat the page. The team column is already
   pinned (.col-pin), so the only problem on a phone is its width: at 230px
   it left room for barely one book. */
@media (max-width: 700px) {
  .bt-table-wrap { padding: 12px 0 28px; }

  /* The cell sizes to this inner flex row, so constrain it here — a width on
     the <td> is only a suggestion under table-layout: auto. */
  .team-inner { width: 96px; padding: 4px 6px 4px 7px; gap: 5px; }
  .team-inner img { width: 17px; height: 17px; }
  .team-text { min-width: 0; }

  /* The header cell carries an inline `min-width:230px`, so only an
     !important declaration can shrink the column on a phone. */
  .bt-table th.col-pin { min-width: 104px !important; padding-left: 8px !important; }
  .bt-table td.team-cell { min-width: 104px !important; }

  .bt-table th, .bt-table td { padding: 6px 7px; font-size: 12px; }
  .bt-sport-picker { gap: 4px; }
}