/* ---------- Resets ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  min-height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", sans-serif;
  background: radial-gradient(circle at top left, #020617, #000);
  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tokens ---------- */

:root {
  --bg: #020617;
  --bg-elevated: #020b16;
  --bg-panel: #020a13;
  --bg-panel-soft: #020815;
  --border-subtle: rgba(148, 163, 184, 0.25);
  --border-strong: rgba(148, 163, 184, 0.6);
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.18);
  --accent-strong: rgba(56, 189, 248, 0.85);
  --accent-glow: 0 0 0 1px rgba(56, 189, 248, 0.8),
    0 0 16px rgba(8, 47, 73, 0.9);
  --danger: #f97373;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --control-height: 22px;
}

/* ---------- Layout ---------- */

body {
  flex-direction: column;
  background: radial-gradient(circle at top left, #020617, #000);
}

.app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top banner / header */

.app-header {
  flex: 0 0 auto;
  border-bottom: 1px solid #ffffff;
  background: radial-gradient(circle at top left, #020617, #020b16);
  padding: 8px 24px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo img {
  height: 32px;
  width: auto;
}

.app-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-logo-title {
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.app-logo-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.app-nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nav buttons & league pills */

.btn-nav {
  height: var(--control-height);
  min-width: 72px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-nav.active {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95));
  box-shadow: var(--accent-glow);
  color: #e0f2fe;
}

.btn-nav:hover {
  border-color: rgba(148, 163, 184, 0.7);
}

/* League strip & scoreboard */

.app-league-strip {
  flex: 0 0 auto;
  border-bottom: 1px solid #ffffff;
  background: linear-gradient(90deg, #020b16, #02101e, #020b16);
  padding: 0 24px;
}

.app-league-inner {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 32px;
}


.league-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ls-league-pill {
  height: var(--control-height);
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ls-league-pill.is-active {
  border-color: transparent;
  box-shadow: var(--accent-glow);
  color: #e0f2fe;
}

.ls-league-pill:hover {
  border-color: rgba(148, 163, 184, 0.7);
}

/* Live scoreboard */

.live-scoreboard {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 4px;
}

#scoreboardSummary {
  font-size: 12px;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main layout */

.app-main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* Sidebar */

.sidebar {
  width: 260px;
  flex: 0 0 auto;
  border-right: 1px solid #ffffff;
  background: radial-gradient(circle at top left, #020617, #020b16);
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.sidebar-games {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: radial-gradient(circle at top left, #020617, #020b16);
}

/* Game cards */

.game-card {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  padding: 8px 10px;
  margin-bottom: 8px;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), #020617);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.08s ease;
}

.game-card:last-child {
  margin-bottom: 0;
}

.game-card:hover {
  border-color: rgba(148, 163, 184, 0.9);
  transform: translateY(-1px);
}

.game-card.active {
  box-shadow: var(--accent-glow);
  border-color: transparent;
}

.game-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.game-card-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.game-card-team {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
}

.team-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.4);
  object-fit: contain;
}

.team-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.team-name {
  font-size: 12px;
}

.team-code {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.team-score {
  font-size: 14px;
  font-weight: 600;
}

.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
}

.game-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.game-line .label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.game-line .value {
  font-weight: 500;
}

.game-book .book-logo {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  object-fit: contain;
}

/* Main content panel */

.main-panel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 20px 24px;
}

/* Toolbar & controls */

.props-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.props-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.props-toolbar-row .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-right: 4px;
}

.props-toolbar-row .spacer {
  flex: 1 1 auto;
}

.tdc-control,
.tdc-select,
.tdc-input {
  height: var(--control-height);
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  padding: 0 8px;
  font-size: 11px;
}

.tdc-select {
  padding-right: 20px;
}

.tdc-input::placeholder {
  color: var(--text-muted);
}

/* Toggle buttons */

.tdc-toggle-pill {
  height: var(--control-height);
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tdc-toggle-pill.is-active {
  border-color: transparent;
  box-shadow: var(--accent-glow);
  color: #e0f2fe;
}

.tdc-toggle-pill:hover {
  border-color: rgba(148, 163, 184, 0.7);
}

/* Advanced filters row */

.props-advanced-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.props-advanced-row .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.props-advanced-row .btn-ghost {
  height: var(--control-height);
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 10px;
  cursor: pointer;
}

.props-advanced-row .btn-ghost.is-active {
  box-shadow: var(--accent-glow);
  border-color: transparent;
}

/* Table vs cards toggle */

.view-toggle {
  display: inline-flex;
  border-radius: 10px;
  border: 1px solid #ffffff;
  overflow: hidden;
}

.view-toggle button {
  height: var(--control-height);
  padding: 0 12px;
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.view-toggle button.is-active {
  background: rgba(15, 23, 42, 0.96);
  box-shadow: var(--accent-glow);
}

/* Pager */

.props-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.props-pager button {
  height: var(--control-height);
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.props-pager button[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* Table */

.props-table-wrapper {
  border-radius: 14px;
  border: 1px solid #ffffff;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), #020617);
}

.props-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.props-table thead {
  background: rgba(15, 23, 42, 0.96);
}

.props-table th,
.props-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.props-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.props-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.9);
}

/* Empty state */

.empty-state {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state.error {
  color: var(--danger);
}

/* --- Scoreboard summary dividers + fade animation --- */
#scoreboardSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #e5e7eb;
}
#scoreboardSummary .sb-divider {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
}
#scoreboardSummary .sb-status {
  color: #9ca3af;
}
#scoreboardSummary.sb-fade {
  animation: sbFade 0.9s ease-out;
}
@keyframes sbFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* --- Scoreboard summary dividers + fade animation --- */
#scoreboardSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #e5e7eb;
}
#scoreboardSummary .sb-divider {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
}
#scoreboardSummary .sb-status {
  color: #9ca3af;
}
#scoreboardSummary.sb-fade {
  animation: sbFade 0.9s ease-out;
}
@keyframes sbFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   TDC PROPZ – Header + scoreboard tidy + home-only game cards
   (2025-12-04)
   ========================================================= */

/* Keep banner compact: logo + brand left, nav + space to the right */
.appbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 24px;
  min-height: 56px;
}

/* Logo should NOT be a giant hero – cap its size */
.app-logo {
  display: block;
  width: 64px;
  max-height: 64px;
  height: auto;
}

/* Make sure brand text sits tight next to logo */
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Scoreboard bar spans the width under the banner */
.live-scoreboard {
  margin: 4px 16px 10px;
  width: auto;
}

/* Slightly tighten scoreboard contents on large screens */
@media (min-width: 900px) {
  .live-scoreboard {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* On small screens, let scoreboard elements wrap nicely */
@media (max-width: 768px) {
  .live-scoreboard {
    flex-wrap: wrap;
  }

  .live-scoreboard .ls-left,
  .live-scoreboard .ls-center,
  .live-scoreboard .nav-row {
    flex: 1 0 100%;
    justify-content: flex-start;
  }

  .live-scoreboard .ls-center {
    margin-top: 4px;
  }
}

/* ---------------------------------------------------------
   Game cards: ONLY on Home (view = "games")
   --------------------------------------------------------- */

/* On PROPS, hide sidebar + game cards completely */
body[data-view="props"] .sidebar,
body[data-view="props"] #gamesList {
  display: none !important;
}

/* On HOME, show the sidebar game cards column */
body[data-view="games"] .sidebar {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

body[data-view="games"] #gamesList {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

/* =========================================================
   TDC PROPZ — Banner / Scoreboard polish + 3-wide game cards
   (2025-12-04 nightly)
   ========================================================= */

/* --- Banner --- */
.appbar {
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  position: relative;
  z-index: 5;
}

.appbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 20px;
  height: 60px;
  background: #000;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #0ff, #0077ff) 1;
}

/* --- Scoreboard bar under banner --- */
.live-scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 20px;
  background: #000;
  border-bottom: 1px solid #fff;
}

/* --- Shared button theme --- */
button,
.btn-nav,
.ls-league-pill,
.tdc-toggle-pill,
.props-toggle,
.props-toolbar button {
  height: 22px;
  min-width: 64px;
  border-radius: 8px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

button:hover,
.ls-league-pill:hover {
  border-color: rgba(56,189,248,0.8);
}

/* Active (blue glow) */
button.active,
.btn-nav.active,
.ls-league-pill.is-active,
.tdc-toggle-pill.is-active {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.6),
    0 0 10px rgba(56,189,248,0.6);
  color: #e0f2fe;
}

/* --- League & nav buttons inline --- */
.nav-row,
.ls-leagues {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Game cards: 3-across grid on Home --- */
body[data-view="games"] #gamesList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 10px 16px;
}

.game-card {
  flex: 1 1 30%;
  min-width: 260px;
  max-width: 400px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.4);
  background: radial-gradient(circle at top left, #020617, #000);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 6px rgba(56,189,248,0.6);
}

/* --- Responsive tweaks --- */
@media (max-width: 900px) {
  body[data-view="games"] #gamesList {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .appbar-inner {
    flex-wrap: wrap;
    height: auto;
  }
}

/* =========================================================
   TDC PROPZ — Banner, scoreboard, active states, spacing
   ========================================================= */

/* Banner background + blue speckled gradient border */
.appbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  height: 62px;
  background: #000;
  position: relative;
  border-bottom: 2px solid transparent;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0,122,255,0.35) 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(0,245,255,0.25) 1px, transparent 1px),
    linear-gradient(90deg, #0077ff 0%, #00eaff 100%);
  background-size: 4px 4px, 4px 4px, 100% 2px;
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 100%, 0 100%, 0 100%;
}

/* Scoreboard spacing and divider */
.live-scoreboard {
  background: #000;
  border-bottom: 1px solid #fff;
  padding: 10px 24px 14px;
  margin-top: 4px;   /* moves it below blue border */
}

/* Button base */
button,
.btn-nav,
.ls-league-pill {
  height: 24px;
  border-radius: 8px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0 12px;
  transition: all 0.25s ease;
}

/* Active + hover glow — richer blue */
button:hover,
.ls-league-pill:hover {
  border-color: rgba(0, 191, 255, 0.6);
  box-shadow: 0 0 6px rgba(0,191,255,0.4);
}
button.active,
.btn-nav.active,
.ls-league-pill.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #001a33 0%, #004c80 100%);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.8),
    0 0 10px rgba(0,191,255,0.8);
  color: #e0f8ff;
}

/* Keep all scoreboard buttons one line */
.nav-row,
.ls-leagues {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Add breathing room below scoreboard before cards */
body[data-view="games"] #gamesList {
  margin-top: 20px;
}

/* Game cards: 3-across grid with new header row */
body[data-view="games"] #gamesList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 0 24px 40px;
}

/* Game card header: time left + league logo right */
.game-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.game-card-header .game-card-league {
  order: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.game-card-header .league-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Card look */
.game-card {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: radial-gradient(circle at top left, #010a1a, #000);
  padding: 10px 12px 12px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 6px rgba(0,191,255,0.5);
}

/* =========================================================
   TDC PROPZ — Banner / scoreboard refinements (2025-12-04B)
   ========================================================= */

/* Banner: black background, bold title, special bottom border */
.appbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  height: 62px;
  background: #000;
}

/* Blue gradient bottom border with white specks */
.appbar-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.8) 0.6px, transparent 0.6px),
    radial-gradient(circle at 40% 30%, rgba(255,255,255,0.7) 0.6px, transparent 0.6px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.6) 0.6px, transparent 0.6px),
    linear-gradient(90deg, #0077ff 0%, #00eaff 50%, #0077ff 100%);
  background-size: 8px 8px, 8px 8px, 8px 8px, 100% 100%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  opacity: 0.9;
}

/* Scoreboard strip sits clearly below the border */
.scorebar {
  margin-top: 8px;             /* breathing room below logo/border */
  padding: 8px 20px 10px;
  background: #000;
  border-bottom: 1px solid #fff;  /* thin white bottom border */
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
}

/* Left/center/right zones on a single horizontal line */
.scorebar-left,
.scorebar-center,
.scorebar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Home/Props + league pills inline horizontally */
.scorebar-left .nav-row,
.scorebar-left .ls-leagues {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* On narrow screens, allow wrapping gracefully */
@media (max-width: 900px) {
  .scorebar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .scorebar-left {
    flex-wrap: wrap;
  }
}

/* Button base: black with white text */
button,
.btn-nav,
.ls-league-pill {
  height: 24px;
  border-radius: 8px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Hover */
button:hover,
.ls-league-pill:hover,
.btn-nav:hover {
  border-color: rgba(0, 191, 255, 0.7);
  box-shadow: 0 0 6px rgba(0, 191, 255, 0.4);
}

/* Active: stronger blue fill + glow */
button.active,
.btn-nav.active,
.ls-league-pill.is-active,
.props-toggle.active {
  border-color: transparent;
  background: linear-gradient(180deg, #001c33 0%, #0066cc 100%);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.9),
    0 0 10px rgba(0,191,255,0.8);
  color: #e0f7ff;
}

/* Extra breathing room between scoreboard and cards */
body[data-view="games"] #gamesList {
  margin-top: 18px;
}

/* === TDC PROPZ — header fine-tuning (logo, title, divider) === */

/* Shrink logo so it clears the gradient border comfortably */
.app-logo {
  width: 44px;
  max-height: 44px;
  height: auto;
}

/* Make the main title nice and bold */
.brand .title {
  font-weight: 700;
}

/* Visual divider between Home/Props and league buttons */
.scorebar-left .nav-row {
  padding-right: 16px;
  margin-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* Keep league buttons snug to the divider on the same line */
.scorebar-left .ls-leagues {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* === TDC PROPZ — final header tweaks === */

/* Make the HOME/PROPS vs leagues divider stand out more */
.scorebar-left .nav-row {
  padding-right: 18px;
  margin-right: 14px;
  border-right: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 1px 0 4px rgba(0, 191, 255, 0.6);
}

/* Title bigger than subtitle */
.brand .title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.brand .subtitle {
  font-size: 12px;
  opacity: 0.85;
}

/* === TDC PROPZ — second scoreboard divider (after leagues) === */

.scorebar-center {
  padding-left: 18px;
  margin-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: -1px 0 4px rgba(0, 191, 255, 0.6);
}

/* === TDC PROPZ — scoreboard divider placement clean-up === */

/* First divider: after HOME/PROPS (no blue glow) */
.scorebar-left .nav-row {
  padding-right: 16px;
  margin-right: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: none !important;
}

/* Second divider: after league buttons (right of MLB) */
.scorebar-left .ls-leagues {
  padding-right: 16px;
  margin-right: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: none !important;
}

/* Summary section: no divider/glow on its left */
.scorebar-center {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* =========================================================
   TDC PROPZ — Game Card Redesign (Header + Stats + Odds)
   ========================================================= */

.game-card {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: radial-gradient(circle at top left, #010a1a, #000);
  padding: 10px 12px 12px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 6px rgba(0,191,255,0.5);
}

/* Header row: time left, league logo right */
.game-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.game-card-header .game-time {
  font-size: 13px;
  font-weight: 600;
  color: #e0f7ff;
}

.game-card-header .league-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Teams row */
.game-card-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.game-card-teams .team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #fff;
}

.game-card-teams .team img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Divider line */
.game-card-divider {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin: 6px 0 8px;
}

/* Stats & odds section placeholder */
.game-card-extra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #c9d1d9;
}

.game-card-extra .stat-row,
.game-card-extra .odds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-card-extra .odds-value {
  font-weight: 600;
  color: #00bfff;
}

/* =========================================================
   TDC PROPZ – Odds heat map + stats panel
   ========================================================= */

/* Odds rows inside cards */
.game-card-extra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #cbd5f5;
}

.game-card-extra .odds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.game-card-extra .odds-side-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Base pill for odds values, with heat background driven by inline style */
.odds-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #f9fafb;
  border: 1px solid rgba(15,23,42,0.7);
  background: radial-gradient(circle at top left, #0f172a, #020617);
  box-shadow: 0 0 4px rgba(15,23,42,0.9);
}

/* When JS sets a heat color, we keep the border subtle so color pops */
.odds-pill[data-has-heat="1"] {
  border-color: rgba(15,23,42,0.4);
}

/* Book logo */
.odds-pill .book-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}

/* Small label for OU or team code in pills */
.odds-pill .pill-label {
  font-weight: 500;
  opacity: 0.9;
}

/* -------------- Stats panel below each game card -------------- */

.game-stats {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: radial-gradient(circle at top left, rgba(15,23,42,0.95), #020617);
  font-size: 11px;
  color: #e5e7eb;
  display: none;
}

.game-stats.open {
  display: block;
  animation: tdcStatsFade 0.25s ease-out;
}

@keyframes tdcStatsFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.stats-header-title {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  color: #a5b4fc;
}

.stats-toggle {
  background: transparent;
  border: 1px solid rgba(148,163,184,0.6);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.stats-toggle span {
  font-size: 9px;
}

.stats-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}

.stats-metric-label {
  opacity: 0.8;
}

.stats-metric-value {
  font-weight: 600;
}

/* TDC – Home vs Props scoreboard pills synced to view (2025-12-04) */

/* Active pill: blue glow */
body[data-view="games"] #navHome,
body[data-view="games"] #nav-games,
body[data-view="props"] #navProps,
body[data-view="props"] #nav-props {
  background: transparent !important;
  color: #e5f5ff !important;
  border-color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(7, 238, 255, 0.9),
    0 0 18px rgba(7, 238, 255, 0.45) !important;
}

/* Inactive pill: neutral white */
body[data-view="games"] #navProps,
body[data-view="games"] #nav-props,
body[data-view="props"] #navHome,
body[data-view="props"] #nav-games {
  background: rgba(248, 250, 252, 0.9) !important;
  color: #020617 !important;
  border-color: rgba(248, 250, 252, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4) !important;
}

/* === Override .nav-btn.is-active to sync Home/Props === */
body[data-view="games"] #navGames.is-active,
body[data-view="games"] #navHome.is-active {
  background: transparent !important;
  color: #e5f5ff !important;
  border-color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(7, 238, 255, 0.9),
    0 0 18px rgba(7, 238, 255, 0.45) !important;
}

body[data-view="props"] #navProps.is-active {
  background: transparent !important;
  color: #e5f5ff !important;
  border-color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(7, 238, 255, 0.9),
    0 0 18px rgba(7, 238, 255, 0.45) !important;
}

body[data-view="games"] #navProps,
body[data-view="props"] #navGames {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

/* =========================================================
   TDC PROPZ – Props edge heat map (table + cards)
   ========================================================= */

.props-edge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #f9fafb;
  border: 1px solid rgba(15,23,42,0.8);
  box-shadow: 0 0 4px rgba(15,23,42,0.9);
  background: radial-gradient(circle at top left, #0f172a, #020617);
}

/* Edge heat colors based on best_edge_bps magnitude */
.props-edge-hot {
  background: linear-gradient(90deg, #b91c1c, #f97316);
}
.props-edge-warm {
  background: linear-gradient(90deg, #ea580c, #facc15);
}
.props-edge-neutral {
  background: linear-gradient(90deg, #0f766e, #22c55e);
}
.props-edge-cool {
  background: linear-gradient(90deg, #1d4ed8, #22d3ee);
}

/* Props book logo inside pill */
.props-edge-pill .book-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}
.props-edge-pill .pill-side {
  font-weight: 500;
  opacity: 0.9;
}
.props-edge-pill .pill-edge {
  font-variant-numeric: tabular-nums;
}

/* --- Unified active button styling (2025-12-04) --- */

/* base look is already set elsewhere; this just unifies the "on" state */
.btn-nav.is-active,
.ls-league-pill.is-active,
.props-toggle.active {
  background: linear-gradient(180deg, #00b4ff 0%, #0040ff 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(0, 180, 255, 0.85);
}

/* keep hover glow consistent too */
.btn-nav.is-active:hover,
.ls-league-pill.is-active:hover,
.props-toggle.active:hover {
  box-shadow: 0 0 8px rgba(0, 220, 255, 0.95);
}

/* --- Unified active styles for nav, leagues, and toggles --- */
.btn-nav.is-active,
.ls-league-pill.is-active,
.props-toggle.active {
  background: linear-gradient(180deg, #00b4ff 0%, #0040ff 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.85);
}

/* --- League pill active fix (2025-12-04) --- */
.ls-league-pill.is-active {
  background: linear-gradient(180deg, #00b4ff 0%, #0040ff 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.85);
}

/* --- Game Grid Layout --- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  justify-items: center;
  padding: 12px;
}
.game-card {
  width: 280px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  padding: 8px 10px;
  transition: transform .2s;
}
.game-card:hover { transform: scale(1.02); }

/* --- Live Ticker Animation --- */
.ticker {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  color: #8de7eb;
  margin-top: 4px;
}
.ticker-item {
  display: inline-block;
  padding: 0 24px;
  animation: tickerScroll 25s linear infinite;
}
@keyframes tickerScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* --- Live scoreboard ticker (logos + white text) --- */
.ticker {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  font-size: 13px;
  color: #fff;
  margin-top: 4px;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 28px;
  animation: tickerScroll 25s linear infinite;
}

.ticker-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}

.ticker-team {
  font-weight: 600;
}

.ticker-score {
  font-weight: 500;
}

.ticker-sep {
  opacity: 0.8;
  padding: 0 4px;
}

/* keep existing keyframes, just ensure they exist */
@keyframes tickerScroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* --- Grid layout 3 across --- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  padding: 20px;
  justify-items: center;
}
.game-card {
  width: 320px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  padding: 10px 12px;
  transition: transform .2s;
}
.game-card:hover { transform: scale(1.02); }
.game-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 13px;
  margin-bottom: 4px;
}
.team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 500;
}
.team-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.vs {
  text-align: center;
  color: #8de7eb;
  margin: 6px 0;
  font-size: 12px;
  font-weight: 600;
}

/* --- Header league pills inline --- */
.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ls-leagues {
  display: flex;
  gap: 6px;
}
.ls-league-pill {
  padding: 4px 10px;
  border: 1px solid #fff;
  border-radius: 6px;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.ls-league-pill.is-active {
  background: linear-gradient(90deg,#08f,#0ff);
  color: #000;
  font-weight: 600;
}

/* --- Smooth ticker fade + scroll override (final) --- */
.ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  color: #fff;
  margin-top: 4px;

  /* fade edges (Safari + others) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.95) 8%,
    rgba(0,0,0,0.95) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.95) 8%,
    rgba(0,0,0,0.95) 92%,
    transparent 100%
  );

  animation: tickerFadeIn 0.35s ease-out;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 28px;
  animation: tickerScroll 25s linear infinite;
}

.ticker-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}

.ticker-sep {
  opacity: 0.8;
  padding: 0 4px;
}

/* fade-in when rebuilt */
@keyframes tickerFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* keep scroll animation */
@keyframes tickerScroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* --- Clamp league logo size in game cards --- */
.league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* --- Unified scoreboard + nav row --- */
.appbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  gap: 16px;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ls-leagues {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ls-league-pill {
  background: transparent;
  border: 1px solid #555;
  color: #fff;
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ls-league-pill.is-active {
  background: #05f;
  border-color: #0af;
  color: #fff;
  box-shadow: 0 0 6px #05f;
}

#liveScoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 20px;
  border-bottom: 1px solid #fff;
  padding: 6px 20px 8px;
  margin-top: 4px;
}

/* --- 3-across game card layout --- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 12px 20px;
}

.game-card {
  background: rgba(0,0,0,0.4);
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: all 0.2s ease;
}

.game-card:hover {
  border-color: #05f;
  box-shadow: 0 0 10px rgba(0,153,255,0.4);
  transform: translateY(-2px);
}

.game-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.vs {
  text-align: center;
  font-size: 12px;
  color: #08f;
  margin: 4px 0;
}

/* === Header unified row === */
.appbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 6px;
  gap: 20px;
}

.appbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo {
  height: 36px;
  width: auto;
}

.brand .title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.brand .subtitle {
  font-size: 11px;
  opacity: 0.75;
}

.appbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: flex-end;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scoreboard-summary {
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.header-divider {
  height: 2px;
  background: linear-gradient(90deg, #00b4ff, #00ffd9);
}

/* Buttons already styled earlier; just ensure inline look */
.ls-leagues {
  display: flex;
  gap: 6px;
}

/* === Layout: full-width cards on HOME (games view) === */
body[data-view="games"] .layout {
  display: block;           /* sidebar spans full width */
}

body[data-view="games"] .sidebar {
  width: 100%;
  max-width: 100%;
  border-right: none;
}

body[data-view="games"] .content {
  display: none;            /* hide props panel on Home */
}

/* 3-across game grid on Home */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 16px 24px 24px;
}

.game-card {
  background: rgba(0,0,0,0.45);
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.game-card:hover {
  border-color: #05f;
  box-shadow: 0 0 10px rgba(0,153,255,0.4);
  transform: translateY(-2px);
}

/* Clamp league logo inside card */
.league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Existing team-row / vs styles are kept from earlier patches */

/* --- Force 3-across game cards on desktop --- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 16px 24px 24px;
}

/* Drop to 2 across on medium screens */
@media (max-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Single column on narrow / mobile */
@media (max-width: 700px) {
  .games-grid {
    grid-template-columns: 1fr;
  }
}

/* === Banner (top strip) === */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 10px;
  background: #000;
  border-bottom: 2px solid #00b4ff;
}

.app-logo {
  height: 42px;
  margin-right: 10px;
}

.brand .title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

.brand .subtitle {
  font-size: 11px;
  color: #bbb;
}

/* === Scoreboard + nav bar BELOW banner === */
.scoreboard-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #090909;
  padding: 8px 20px;
  border-bottom: 1px solid #1e1e1e;
  position: relative;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ls-leagues {
  display: flex;
  gap: 6px;
}

.ls-league-pill {
  background: transparent;
  border: 1px solid #555;
  color: #fff;
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ls-league-pill.is-active {
  background: #05f;
  border-color: #0af;
  box-shadow: 0 0 6px #05f;
}

/* ticker area still appended dynamically */
.ticker {
  position: absolute;
  bottom: -26px;
  left: 0;
  width: 100%;
  text-align: center;
}

/* === Games grid (3-across) === */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 24px 40px;
}

@media (max-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}
@media (max-width: 700px) {
  .games-grid {
    grid-template-columns: 1fr;
  }
}

.game-card {
  background: rgba(0,0,0,0.4);
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: all 0.2s ease;
}

.game-card:hover {
  border-color: #05f;
  box-shadow: 0 0 10px rgba(0,153,255,0.4);
  transform: translateY(-2px);
}

/* --- Odds + expandable stats --- */
.odds-row {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  font-size:13px;
  gap:8px;
  margin-top:8px;
  border-top:1px solid #222;
  padding-top:6px;
}
.odds-row label{color:#0af;font-size:11px;margin-right:4px;}
.best-book img{width:20px;height:20px;object-fit:contain;}

.toggle-stats{
  margin-top:6px;
  background:transparent;
  border:none;
  color:#0af;
  font-size:12px;
  cursor:pointer;
  text-align:left;
}
.stats-block{
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  color:#ccc;
  border-top:1px solid #222;
  padding-top:4px;
}
.hidden{display:none;}

/* --- Odds + Best-Book row --- */
.odds-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  font-size:13px;
  gap:8px;
  margin-top:8px;
  border-top:1px solid #222;
  padding-top:6px;
}
.odds-row label{color:#0af;font-size:11px;margin-right:4px;}
.best-book img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 3px rgba(0,0,0,0.8));}

.toggle-stats{
  margin-top:6px;
  background:transparent;
  border:none;
  color:#0af;
  font-size:12px;
  cursor:pointer;
  text-align:left;
}
.stats-block{
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  color:#ccc;
  border-top:1px solid #222;
  padding-top:4px;
}
.hidden{display:none;}

/* =========================================================
   TDC – Auto-refresh countdown (2025-12-05)
   ========================================================= */
.refresh-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

.refresh-timer .timer-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}

.refresh-timer .ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.15);
  stroke-width: 2.5;
}

.refresh-timer .ring-fg {
  fill: none;
  stroke: #06b6d4;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s linear;
}

.refresh-timer .timer-text {
  position: relative;
  font-size: 11px;
  color: #9befff;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* TDC 7.5 – Banner strip under header (top + bottom blue lines) */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 8px;
  background: #000;
  position: relative;
}

/* thin gradient lines above + below the banner */
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}

.banner::before {
  top: 0;
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.0),
    rgba(56, 189, 248, 0.9),
    rgba(56, 189, 248, 0.0)
  );
}

.banner::after {
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.0),
    rgba(56, 189, 248, 0.9),
    rgba(56, 189, 248, 0.0)
  );
}

/* TDC 7.6 – header + banner tweaks */
/* keep app logo hard-left */
.appbar-inner {
  justify-content: flex-start;
}

/* banner strip under header – no solid border, bottom gradient only */
.banner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 32px 8px;
  background: #000;
  position: relative;
  border: none;
  border-bottom: none;
}

/* kill any previous top gradient */
.banner::before {
  content: none;
}

/* single thin gradient line on the bottom edge of the banner */
.banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.0),
    rgba(56, 189, 248, 0.9),
    rgba(56, 189, 248, 0.0)
  );
}

/* TDC 7.7 – compact scoreboard bar height */
#liveScoreboard {
  padding: 3px 20px 4px !important;  /* was ~6px / 8px */
  min-height: 52px;
}

/* TDC 7.8 – compact scoreboard bar row */
.scoreboard-bar {
  padding: 4px 20px !important;   /* was ~6–8px */
  min-height: 52px;               /* tighten vertical footprint */
}

/* make inner content sit tighter vertically */
.scoreboard-bar .nav-row,
.scoreboard-bar .ls-leagues,
.scoreboard-bar .ls-summary-chip {
  margin-top: 0;
  margin-bottom: 0;
}

/* TDC 8.0 – scoreboard ticker (animated scroller) */
.ls-ticker {
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ls-ticker-inner {
  display: inline-block;
  padding-left: 100%;
}

.ls-ticker-inner.is-animating {
  animation: tdc-ticker-scroll 40s linear infinite;
}

@keyframes tdc-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* TDC 8.1 – lock game cards to 3-up on desktop */
@media (min-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* TDC 8.2 – scoreboard ticker (animated scroller) */
.ls-ticker {
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ls-ticker-inner {
  display: inline-block;
  padding-left: 100%;
}

.ls-ticker-inner.is-animating {
  animation: tdc-ticker-scroll 40s linear infinite;
}

@keyframes tdc-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* TDC 8.3 – lock game cards to 3-up on desktop */
@media (min-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* TDC – tighten scoreboard band height (2025-12-06) */
#liveScoreboard.scoreboard-bar {
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 0;
}
/* TDC – 2025-12-06: Scoreboard breathing room */
#liveScoreboard {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Keep summary nicely separated from the buttons row */
#liveScoreboard .ls-center {
  margin-top: 4px;
}
/* TDC – 2025-12-06: Scoreboard band height & padding */
.scoreboard-bar,
#liveScoreboard.scoreboard-bar {
  box-sizing: border-box;
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* TDC – 2025-12-06: Wider game cards, 3 across on desktop */
@media (min-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* TDC – 2025-12-06: bump scoreboard band height again */
.scoreboard-bar,
#liveScoreboard.scoreboard-bar {
  box-sizing: border-box;
  min-height: 56px;      /* was ~40px */
  padding-top: 12px;     /* was 8px */
  padding-bottom: 12px;
}
/* TDC – 2025-12-06: wider game cards, still 3 across */
@media (min-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(340px, 1fr));
  }
}

.game-card {
  width: 100%;
  max-width: none;  /* allow card to fully fill its grid cell */
}
/* === 2025-12-06 – scoreboard height tweak === */
#liveScoreboard {
  height: 40px;
  min-height: 40px;
  padding: 6px 24px 8px;
}
/* === 2025-12-06 – games grid: lock to 3 columns on desktop === */
@media (min-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ===== TDC: scoreboard + game-card tuning 2025-12-06 ===== */

/* Scoreboard band under the banner – give it some height */
.scoreboard-bar {
  min-height: 48px;
  padding: 10px 18px;
}

/* Slightly reduce the vertical gap before the cards */
.games-section {
  margin-top: 10px;
}

/* Let cards fill the width more cleanly on desktop */
.games-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* Odds area: ML / Spread / Total in one horizontal row of three groups */
.game-card-odds {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.game-card-odds .odds-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font-size: 12px;
}

/* Label vs value styling inside each odds block */
.game-card-odds .odds-label {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tdc-accent-soft, rgba(5,182,255,0.85));
}

.game-card-odds .odds-line {
  color: #fff;
}
/* === TDC UI patch 2025-12-06: scoreboard + game-card layout === */

/* Make scoreboard bar a bit taller with breathing room */
#liveScoreboard.scoreboard-bar,
.scoreboard-bar#liveScoreboard {
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Wide three-across game cards on desktop */
@media (min-width: 1200px) {
  .games-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Odds row styling inside each card */
.game-card-body {
  padding-bottom: 6px;
}

.game-card .odds-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 6px 18px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

/* Keep ML / Spread / Total labels lined up in a single row */
.game-card .odds-row span {
  white-space: nowrap;
}

/* === TDC PROPZ – 2025-12-06 layout + odds tweaks === */

/* Scoreboard bar: a bit taller */
#liveScoreboard {
  min-height: 48px !important;
  padding: 10px 24px !important;
}

/* Games grid: cards a bit wider but still 3 across on desktop */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
}

/* White vertical divider between PROPS and first league button */
.nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-row button:nth-child(2) {
  position: relative;
}

.nav-row button:nth-child(2)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #ffffff;
  opacity: 0.85;
}

/* Compact odds row inside game card body */
.odds-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
}

.odds-row > div {
  display: flex;
  flex-direction: column;
}

.odds-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.8;
  padding-bottom: 2px;
}

.odds-row span {
  font-size: 13px;
}
/* === 2025-12-06 TDC: header divider & game card polish === */

/* Vertical divider between PROPS and league pills */
#scoreboardLeagues {
  border-left: 1px solid rgba(255,255,255,0.85);
  padding-left: 14px;
  margin-left: 10px;
}
/* Team row: logo + name left, record right on same line */
.game-card .team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.game-card .team-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-card .record {
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
}
/* Details button: white border instead of blue */
.game-card .toggle-stats {
  border-color: #ffffff !important;
}
/* Soft divider between odds row and DETAILS */
.game-card .odds-row {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
/* === 2025-12-06 TDC tweaks === */

/* 1) Only ONE divider between PROPS and leagues:
   - Remove extra on #scoreboardLeagues
   - Put it on the PROPS button side */
#scoreboardLeagues {
  border-left: none !important;
  padding-left: 14px;   /* keep a little spacing */
  margin-left: 10px;
}

#navProps {
  border-right: 1px solid rgba(255,255,255,0.85);
}

/* 2) Move team labels closer to the logos */
.game-card .team-row,
.game-card .team-name {
  gap: 4px !important;
}

.game-card .team-name {
  padding-left: 0 !important;
}

.game-card .team-logo,
.game-card img.team-logo {
  margin-right: 4px !important;
}

/* 3) Move the soft divider a bit lower (more space before DETAILS) */
.game-card .odds-row {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* 4) DETAILS / HIDE STATS button: white border, no blue outline */
button.toggle-stats,
.game-card .toggle-stats {
  border-color: #ffffff !important;
}

button.toggle-stats:focus,
button.toggle-stats:focus-visible {
  outline: none !important;
}
/* ==== TDC GAME NAV & GAME-CARD TWEAKS (Dec 6) ==== */

/* MAIN NAV: single centered divider between PROPS and league pills */
body[data-view="games"] .nav-row {
  display: flex;
  align-items: center;
}

/* Kill any old borders that were creating the double divider or odd NFL border */
body[data-view="games"] .nav-row button {
  border-left: none !important;
  border-right: none !important;
}

/* Draw a single vertical divider after the PROPS button */
body[data-view="games"] .nav-row #navProps {
  position: relative;
}

body[data-view="games"] .nav-row #navProps::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: -14px;           /* visually centered between PROPS and NHL */
  width: 1px;
  background: rgba(255,255,255,0.65);
}

/* Make sure the first league pill (NHL) has no stray borders from old rules */
body[data-view="games"] .nav-row button[data-league] {
  border: 1px solid rgba(255,255,255,0.35) !important;
}

/* Active league pill keeps the glow but uses the same border logic */
body[data-view="games"] .nav-row button[data-league].is-active {
  border-color: #05b6ff !important;
}

/* GAME CARDS: team name + record on the same row, closer to logo */
.games-list .game-card .team-row {
  display: flex;
  align-items: center;
  gap: 10px !important;
}

/* container that holds name + record */
.games-list .game-card .team-row .vs {
  display: flex !important;
  align-items: center;
  gap: 6px !important;
}

/* pull the team text closer to the logo */
.games-list .game-card .team-row .team-name {
  padding-left: 0 !important;
}

/* record on same row, slightly muted */
.games-list .game-card .team-row .record {
  font-size: 11px;
  opacity: 0.7;
}

/* ODDS ROW / SOFT DIVIDER: push divider down a bit */
.games-list .game-card .odds-row {
  margin-bottom: 6px !important;
}

/* Add a neutral separation line above the DETAILS / HIDE STATS button */
.games-list .game-card .toggle-stats {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 4px;
  padding-top: 8px;
}

/* DETAILS / HIDE STATS button outline should be white, not blue */
.games-list .game-card .toggle-stats,
.games-list .game-card .toggle-stats:focus,
.games-list .game-card .toggle-stats:hover {
  border-color: #ffffff !important;
}

/* Just in case there are other card-level buttons using the same style */
.games-list .game-card button.toggle-stats {
  border-color: #ffffff !important;
}
/* ==== TDC GAME CARD TWEAKS: logos + odds alignment ==== */

/* Slightly larger team logos in the game cards */
.games-list .game-card .team-logo {
  width: 30px !important;
  height: 30px !important;
}

/* Center text inside the Moneyline / Spread / Total row */
.games-list .game-card .odds-row {
  display: flex;              /* ensure flex layout */
  align-items: center;
}

.games-list .game-card .odds-row > div {
  flex: 1 1 0;                /* three even columns */
  text-align: center !important;
}
/* ==== TDC GAME CARD: logo size, odds centering, VS centering ==== */

/* Bigger team logos in game cards */
.games-list .game-card .team-row .team-logo {
  width: 30px !important;
  height: 30px !important;
}

/* Center VS text perfectly between the teams */
.games-list .game-card .team-row .vs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Make the odds row 3 equal centered columns */
.games-list .game-card .odds-row {
  display: flex !important;
  align-items: center !important;
}

.games-list .game-card .odds-row > div {
  flex: 1 1 0 !important;
  text-align: center !important;
}

/* === TDC: game card logo + odds alignment (2025-12-06) === */
body[data-view="games"] #gamesList .game-card .team-logo {
  width: 28px !important;
  height: 28px !important;
}

/* Center the VS label perfectly between teams */
body[data-view="games"] #gamesList .game-card .vs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 4px 0 !important;
}

/* Center ML / SPREAD / TOTAL text in their row */
body[data-view="games"] #gamesList .game-card .odds-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  text-align: center !important;
}
/* --- TDC: scoreboard info left-aligned --- */
.scoreboard-bar .scoreboard-info {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  padding-left: 24px;
}

/* --- TDC: game card tweaks: logos + VS + odds row --- */
body[data-view="games"] .game-card .team-logo {
  width: 30px !important;
  height: 30px !important;
}

body[data-view="games"] .game-card .vs {
  justify-content: center !important;
  text-align: center !important;
}

/* Center the ML / SPREAD / TOTAL text & values */
body[data-view="games"] .game-card .odds-row {
  display: flex;
  justify-content: space-evenly !important;
  text-align: center !important;
}

body[data-view="games"] .game-card .odds-row > div {
  flex: 1 1 0 !important;
}

/* Make sure the Details / Hide Stats buttons use white borders */
body[data-view="games"] .game-card .toggle-stats,
body[data-view="games"] .game-card .details {
  border-color: #ffffff !important;
}

/* === TDC: Scoreboard summary alignment override === */
.scoreboard-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scoreboard-bar .scoreboard-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding-left: 32px;
  text-align: left;
}

@media (max-width: 900px) {
  .scoreboard-bar .scoreboard-info {
    padding-left: 16px;
  }
}

/* === TDC: Scoreboard summary alignment (override) === */
#liveScoreboard {
  text-align: left !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#liveScoreboard .ls-leagues {
  flex: 0 0 auto;
}

#liveScoreboard #scoreboardSummary,
#liveScoreboard .scoreboard-info {
  /* whichever element holds "NHL · 0 games" */
  margin-left: 32px;
  margin-right: auto;
  text-align: left !important;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  opacity: 0.9;
}

#liveScoreboard .refresh-time {
  flex: 0 0 auto;
}

/* === TDC: scoreboard summary alignment override === */
body[data-view="games"] #liveScoreboard .scoreboard-info {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 24px !important;
  text-align: left !important;
}

/* === TDC: scoreboard summary layout override === */
body[data-view="games"] #liveScoreboard {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

body[data-view="games"] #liveScoreboard .scoreboard-info {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  padding-left: 24px !important;
}

/* keep the timer hugged to the right edge */
body[data-view="games"] #liveScoreboard .refresh-time {
  margin-left: auto !important;
}

/* === TDC – Scoreboard summary layout === */
body[data-view="games"] #liveScoreboard.scoreboard-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* keep content flowing left → right */
  gap: 16px;
}

/* keep the nav & league pills grouped on the left */
body[data-view="games"] #liveScoreboard .nav-row {
  margin-right: 16px;
}

body[data-view="games"] #liveScoreboard #scoreboardLeagues {
  margin-right: 16px;
}

/* summary text just to the right of the league pills */
body[data-view="games"] #liveScoreboard .scoreboard-info {
  font-size: 12px;
  opacity: 0.85;
  text-align: left;
}

/* auto-refresh timer stays docked on the far right */
body[data-view="games"] #liveScoreboard .refresh-timer {
  margin-left: auto;
}
/* === TDC SCOREBOARD: keep bar compact for every league === */
body[data-view="games"] #liveScoreboard.scoreboard-bar {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 52px !important;
  max-height: 88px !important;
  overflow: hidden;
}

/* League row + summary label alignment */
body[data-view="games"] #liveScoreboard .ls-row,
body[data-view="games"] #liveScoreboard .scoreboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-view="games"] #liveScoreboard .scoreboard-info {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 12px;
  opacity: 0.9;
}

/* === Game-card polish === */
body[data-view="games"] .game-card .team-logo {
  width: 26px !important;
  height: 26px !important;
}

body[data-view="games"] .game-card .team-row {
  align-items: center !important;
}

body[data-view="games"] .game-card .vs {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
}

body[data-view="games"] .game-card .odds-row {
  justify-content: center !important;
  text-align: center !important;
}
/* --- TDC: game card polish 2025-12-05 --- */

/* Slightly larger team logos + tighter spacing */
body[data-view="games"] .game-card .team-logo {
  width: 26px;
  height: 26px;
}

body[data-view="games"] .game-card .team-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

body[data-view="games"] .game-card .team-name {
  padding-left: 0;
}

/* Center the VS label between teams */
body[data-view="games"] .game-card .vs-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Center ML / SPREAD / TOTAL rows */
body[data-view="games"] .game-card .odds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-view="games"] .game-card .odds-row > div {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* keep book logo from stretching like the others */
body[data-view="games"] .game-card .odds-row > .best-book {
  flex: 0 0 auto;
}

/* Stats block tuning */
body[data-view="games"] .game-card .stats-block {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #222;
  font-size: 12px;
  color: #ccc;
}

body[data-view="games"] .game-card .stats-block .stat-line {
  display: flex;
  justify-content: space-between;
}

/* TDC: keep odds text on a single line in game cards */
body[data-view="games"] .game-card .odds-row > div {
  white-space: nowrap;
}
/* TDC PATCH 2025-12-07: live game summary inside scoreboard bar */
body[data-view="games"] #liveScoreboard .scoreboard-live-row {
  flex: 0 0 100%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 24px 6px;
  color: var(--text-muted);
  opacity: 0.9;
}

/* === TDC HOME 2025-12-07C – league button live scores line === */
.toolbar-leagues [data-league] {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.toolbar-leagues [data-league] .nav-live-line {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* Fallback if toolbar-leagues wrapper isn't used */
[data-league].nav-league-pill .nav-live-line {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* === TDC 2025-12-07: scoreboard bar layout + animated ticker === */

#liveScoreboardBar {
  overflow: hidden;
}

#liveScoreboardBar .nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* League pills back on the left */
#liveScoreboardBar .ls-leagues {
  margin-left: 0 !important;
}

/* Ticker container */
#liveScoreboardBar .nav-live-line {
  flex: 1 1 auto;
  overflow: hidden;
}

/* Ticker structure */
.scoreboard-ticker-shell {
  width: 100%;
  overflow: hidden;
}

.scoreboard-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  padding-right: 64px;
  animation: tdc-scoreboard-marquee 36s linear infinite;
}

/* Pause scroll on hover so people can read */
#liveScoreboardBar:hover .scoreboard-ticker-track {
  animation-play-state: paused;
}

.ticker-league,
.ticker-abbr,
.ticker-score,
.ticker-separator {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, #e5ecff);
}

.ticker-game {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ticker-team {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ticker-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(5, 182, 255, 0.7));
}

.ticker-empty {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Simple marquee-style scroll */
@keyframes tdc-scoreboard-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* === TDC 2025-12-07: scoreboard ticker v3 (logos + animation) === */
.scoreboard-bar {
  position: relative;
  overflow: hidden;
}

/* make sure the scoreboard row uses flex */
.scoreboard-bar .nav-row,
.scoreboard-bar .scoreboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* league pills: left side */
#scoreboardLeagues,
.scoreboard-bar .ls-leagues {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-right: 16px;
}

/* ticker rail */
.scoreboard-bar .nav-live-line {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

/* individual game in the ticker */
.scoreboard-bar .nav-live-line .sb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* tiny team logos in the ticker */
.scoreboard-bar .nav-live-line .sb-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

/* small status badge (FINAL, EO1, etc.) */
.scoreboard-bar .nav-live-line .sb-status {
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.75;
}

/* bullet between games */
.scoreboard-bar .nav-live-line .sb-separator {
  display: inline-block;
  padding-inline: 12px;
  opacity: 0.5;
}

/* right-side meta: "NHL · 8 games" */
.scoreboard-info {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

/* marquee animation */
.scoreboard-bar.is-animating .nav-live-line {
  animation: tdc-scoreboard-scroll 40s linear infinite;
}

@keyframes tdc-scoreboard-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* === TDC 2025-12-07: scoreboard ticker layout + animation === */
.scoreboard-bar {
  position: relative;
  overflow: hidden;
}

/* nav row: leagues on left, ticker fills, meta on right */
.scoreboard-bar .nav-row {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
}

/* league pills container on the far left */
.scoreboard-bar #scoreboardLeagues,
.scoreboard-bar .ls-leagues {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-right: 16px;
}

/* ticker rail */
.scoreboard-bar .nav-live-line {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

/* each game in the ticker */
.scoreboard-bar .nav-live-line .sb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* small team logos */
.scoreboard-bar .nav-live-line .sb-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}

/* FINAL / EO1 etc. */
.scoreboard-bar .nav-live-line .sb-status {
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.75;
}

/* bullet separator */
.scoreboard-bar .nav-live-line .sb-separator {
  display: inline-block;
  padding-inline: 12px;
  opacity: 0.5;
}

/* right side meta text: "NHL · 8 games" */
.scoreboard-bar .scoreboard-info {
  margin-left: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

/* marquee animation */
.scoreboard-bar.is-animating .nav-live-line {
  animation: tdc-scoreboard-scroll 40s linear infinite;
}

@keyframes tdc-scoreboard-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* TDC 2025-12-07: remove solid blue background from scoreboard bar */
.scoreboard-bar {
  background: transparent !important;
  background-image: none !important;
}
/* TDC 2025-12-07: scoreboard bar — remove solid blue &
   keep ticker from covering the league buttons */

/* no solid blue panel behind the bar */
.scoreboard-bar {
  background: transparent !important;
  background-color: transparent !important;
}

/* layout: buttons left, ticker on its own row */
.scoreboard-bar .nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
}

/* Home/Props + league pills stay on the left in the first row */
.scoreboard-bar .nav-pags,
.scoreboard-bar .ls-leagues {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scoreboard-bar .nav-pags { order: 0; }
.scoreboard-bar .ls-leagues { order: 1; }

/* ticker line goes BELOW the buttons, full width */
.scoreboard-bar .nav-live-line {
  order: 2;
  flex: 1 1 100%;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;

  /* remove the blue fill, keep a subtle glow outline */
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(5, 182, 255, 0.35);
  box-shadow: 0 0 12px rgba(5, 182, 255, 0.25);

  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* scrolling inner content (if ticker uses a span) */
.scoreboard-bar .nav-live-line span {
  display: inline-block;
  padding-left: 100%;
}
/* TDC 2025-12-07: fix scoreboard ticker overlay & blue bar */

.scoreboard-bar .nav-row .nav-live-line {
  /* stop covering everything */
  position: static !important;
  inset: auto !important;
  z-index: 0 !important;

  /* layout next to the league buttons */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;

  /* make it a slim pill, not a full bar */
  padding: 2px 10px;
  max-width: 100%;
  border-radius: 999px;

  /* kill the solid blue background */
  background: transparent !important;
  background-color: transparent !important;

  /* subtle blue outline glow */
  border: 1px solid rgba(5, 182, 255, 0.35);
  box-shadow: 0 0 12px rgba(5, 182, 255, 0.25);

  overflow: hidden;
  white-space: nowrap;
}

/* === TDC FIX: Home scoreboard strip – no blue fill (2025-12-07) === */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="games"] #liveScoreboard.scoreboard-bar.is-animating {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 18px 4px;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: 0;
  border-bottom: 1px solid rgba(5, 182, 255, 0.55);
}

/* thin neon accent only on the bottom edge */
body[data-view="games"] #liveScoreboard.scoreboard-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(5, 182, 255, 0.2),
    rgba(5, 182, 255, 0.9),
    rgba(5, 182, 255, 0.2)
  );
  pointer-events: none;
}

/* leagues hard-left */
body[data-view="games"] #liveScoreboard .ls-leagues {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
}

/* ticker stays in its own lane, not over the pills */
body[data-view="games"] #liveScoreboard .nav-live-line {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* chunk out each matchup a bit so it reads cleanly */
body[data-view="games"] #liveScoreboard .nav-live-line span {
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
}

/* info + timer on the right */
body[data-view="games"] #liveScoreboard .scoreboard-info,
body[data-view="games"] #liveScoreboard .scoreboard-refresh-timer {
  flex: 0 0 auto;
}

/* === TDC HOTFIX: remove blue scoreboard fill (2025-12-07) === */
body[data-view="games"] #liveScoreboard,
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="games"] #liveScoreboard.scoreboard-bar.is-animating {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* make the ticker row transparent too */
body[data-view="games"] #scoreboardLiveRow,
body[data-view="games"] #scoreboardLiveRow.scoreboard-live-row {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* kill any gradient frame that was drawn via ::before */
body[data-view="games"] #liveScoreboard.scoreboard-bar::before,
body[data-view="games"] #scoreboardLiveRow::before {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* === TDC 2025-12-07: scoreboard bar & ticker fixes === */

/* Scoreboard bar: column layout, transparent, no blue fill */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="games"] #liveScoreboard.scoreboard-bar.is-animating {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 16px 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Nav row inside scoreboard: Home/Props + league pills + info */
body[data-view="games"] #liveScoreboard .nav-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* League pills cluster stays on the left of the bar */
body[data-view="games"] #liveScoreboard #scoreboardLeagues.ls-leagues {
  display: inline-flex !important;
  gap: 8px !important;
  margin-left: 16px !important;
}

/* Kill the old underline bar if it’s still around */
body[data-view="games"] #liveScoreboard .nav-live-line {
  display: none !important;
}

/* Ticker row: own line under the nav row, no overlay */
body[data-view="games"] #scoreboardLiveRow.scoreboard-live-row {
  position: static !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding: 0 0 2px !important;
  background: transparent !important;
}

/* Extra safety: any inner ticker container */
body[data-view="games"] #liveScoreboard .scoreboard-ticker-inner {
  background: transparent !important;
}

/* === TDC: scoreboard ticker v3 (2025-12-07) === */
body[data-view="games"] #liveScoreboard.scoreboard-bar {
  overflow: hidden;
}

body[data-view="games"] #scoreboardLiveRow {
  display: none;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  will-change: transform;
}

body[data-view="games"] #scoreboardLiveRow .sb-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 32px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

body[data-view="games"] #scoreboardLiveRow .sb-team-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

body[data-view="games"] #scoreboardLiveRow .sb-score {
  font-weight: 600;
  padding: 0 4px;
}

body[data-view="games"] #scoreboardLiveRow .sb-status {
  font-size: 11px;
  margin-right: 4px;
  opacity: 0.8;
}

body[data-view="games"] #scoreboardLiveRow .sb-ticker-item.is-live .sb-status {
  color: #05b6ff;
}

body[data-view="games"] #scoreboardLiveRow .sb-ticker-item.is-final .sb-status {
  color: rgba(255, 255, 255, 0.7);
}

/* Scroll animation for both live + final rows */
body[data-view="games"] #liveScoreboard.is-animating #scoreboardLiveRow {
  display: block;
  animation: tdc-ticker-scroll 42s linear infinite;
}

@keyframes tdc-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* === TDC 2025-12-07: live scoreboard bar borders === */
body[data-view="games"] #liveScoreboard.scoreboard-bar {
  border-top: 1px solid #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
  border-image: none !important;
  box-shadow: none !important;
}

/* kill any gradient pseudo-borders that might still be applied */
body[data-view="games"] #liveScoreboard.scoreboard-bar::before,
body[data-view="games"] #liveScoreboard.scoreboard-bar::after {
  background: none !important;
  border: 0 !important;
}

/* === TDC: live scoreboard layout cleanup (2025-12-07) === */

/* Remove top border + tighten padding */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="games"] #liveScoreboard.scoreboard-bar.is-animating {
  border-top: none !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}

/* Hide the "NHL · 8 games" style label */
body[data-view="games"] #liveScoreboard .scoreboard-info {
  display: none !important;
}

/* Make nav row nice and tight */
body[data-view="games"] #liveScoreboard .nav-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Anchor the timer up on the same row as the nav buttons */
body[data-view="games"] #liveScoreboard {
  position: relative !important;
}

body[data-view="games"] #liveScoreboard .refresh-timer {
  position: absolute !important;
  top: 4px !important;
  right: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

/* Keep ticker lane snug under the nav row */
body[data-view="games"] #liveScoreboard .scoreboard-live-row {
  margin-top: 6px !important;
}


/* === TDC: live scoreboard polish (2025-12-07) === */

/* Remove top border, keep clean white bottom border under ticker */
body[data-view="games"] #liveScoreboard.scoreboard-bar {
  border-top: none !important;
  border-bottom: 1px solid #ffffff !important;
  padding-top: 0 !important;
  padding-bottom: 4px !important;
  flex-direction: row !important; /* keep everything on one row */
  align-items: center !important;
}

/* Make all ticker / scoreboard text white */
body[data-view="games"] #liveScoreboard,
body[data-view="games"] #liveScoreboard * {
  color: #ffffff !important;
}

/* Hide the "NHL - 8 games" / "NBA - X games" label */
body[data-view="games"] #liveScoreboard .scoreboard-info {
  display: none !important;
}

/* Keep refresh timer on same row as Home / Props / league buttons */
body[data-view="games"] #liveScoreboard .nav-row {
  align-items: center !important;
}

/* Ticker row sizing + alignment */
body[data-view="games"] #scoreboardLiveRow {
  display: flex;
  align-items: center;
  min-height: 24px;
}

/* A little spacing for each ticker item */
body[data-view="games"] #scoreboardLiveRow .sb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body[data-view="games"] #scoreboardLiveRow .sb-logo {
  width: 16px;
  height: 16px;
}

body[data-view="games"] #scoreboardLiveRow .sb-separator {
  opacity: 0.8;
}

/* === TDC: scoreboard spacing + colors v2 (2025-12-07) === */

/* Main bar: white bottom border only + vertical padding */
body[data-view="games"] #liveScoreboard.scoreboard-bar {
  border-top: none !important;
  border-bottom: 1px solid #ffffff !important;
  padding-top: 6px !important;      /* breathing room above ticker */
  padding-bottom: 6px !important;   /* breathing room below ticker */
}

/* Force all text in the scoreboard bar to white */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="games"] #liveScoreboard.scoreboard-bar * {
  color: #ffffff !important;
}

/* Space between Home/Props/league buttons and ticker */
body[data-view="games"] #liveScoreboard .nav-row {
  margin-bottom: 4px !important;
}

/* Ticker row sizing */
body[data-view="games"] #scoreboardLiveRow {
  margin-top: 0 !important;
  min-height: 24px !important;
}

/* Completely remove the league info strip (NHL - 8 games, etc.) and its gap */
body[data-view="games"] #liveScoreboard .scoreboard-info {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border: 0 !important;
}

/* === TDC PATCH: scoreboard live row + mobile alignment (2025-12-08) === */

/* Desktop / tablet: center the live row and give it clean breathing room */
#scoreboardLiveRow.scoreboard-live-row {
  max-width: 1600px;
  margin: 8px auto 18px;   /* space under the banner + above main */
  padding: 0 32px;         /* align with main layout padding */
}

/* Make sure the first row of game tiles doesn't jam into the ticker area */
#scoreboardLiveRow .games-grid {
  margin-top: 4px;
}

/* Only keep a subtle bottom divider, no top border */
#scoreboardLiveRow.scoreboard-live-row {
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 900px) {
  /* pull the live row in a bit on small screens */
  #scoreboardLiveRow.scoreboard-live-row {
    padding: 0 12px;
    margin: 4px auto 14px;
  }

  /* tighten vertical gaps between the mobile cards */
  #scoreboardLiveRow .games-grid {
    gap: 14px;
  }

  /* ensure cards are full-width and aligned edge-to-edge */
  #scoreboardLiveRow .game-card {
    width: 100%;
  }
}

/* === TDC PATCH: mobile league button alignment (2025-12-08) === */
@media (max-width: 900px) {
  #liveScoreboard .ls-leagues,
  .nav-row button[data-league],
  .ls-league-pill {
    margin-left: -4px !important;   /* small left nudge */
  }

  /* keep overall row centered and tight */
  #liveScoreboard .ls-leagues {
    justify-content: flex-start !important;
    gap: 6px !important;
  }
}

/* === TDC PATCH: mobile league button alignment (2025-12-08) === */
@media (max-width: 900px) {
  /* tighten + nudge league pills row on mobile */
  #liveScoreboard .ls-leagues {
    justify-content: flex-start !important;
    gap: 6px !important;
    padding-left: 4px !important;   /* subtle left nudge */
  }

  /* make sure each pill itself doesn't add extra left padding */
  #liveScoreboard .ls-league-pill {
    margin-left: 0 !important;
  }
}

/* === TDC PATCH: ticker visibility + game card stats (2025-12-08) === */

/* Keep the scoreboard ticker from disappearing after a few seconds */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="games"] #liveScoreboard.scoreboard-bar.is-animating {
  animation: none !important;
  opacity: 1 !important;
}

/* Collapsible team stats block inside each game card */
.game-card-stats {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  margin-top: 8px;
  padding: 6px 10px 8px;
  font-size: 11px;
  color: #e5e7eb;
}

.game-card-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.game-card-stats-header .label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  color: #9ca3af;
}

.game-card-stats-toggle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: none;
  background: transparent;
  color: #f9fafb;
  padding: 0;
}

.game-card-stats-inner {
  margin-top: 6px;
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 4px;
  column-gap: 16px;
  max-height: 400px;
  overflow: hidden;
  transition: max-height 160ms ease-out, opacity 160ms ease-out;
  opacity: 1;
}

.game-card-stats-row {
  display: flex;
  justify-content: space-between;
}

.game-card-stats-row .label {
  color: #9ca3af;
}

.game-card-stats-row .value {
  font-variant-numeric: tabular-nums;
}

/* collapsed state */
.game-card-stats.is-collapsed .game-card-stats-inner {
  max-height: 0;
  opacity: 0;
}

@media (max-width: 900px) {
  .game-card-stats-inner {
    grid-template-columns: 1fr;
  }
}

/* === TDC PATCH: keep ticker visible + collapsible game-card stats (2025-12-08B) === */

/* Kill ALL animations on the scoreboard bar so it never scrolls off or vanishes */
#liveScoreboard.scoreboard-bar,
#liveScoreboard.scoreboard-bar.is-animating {
  animation: none !important;
  opacity: 1 !important;
}

#liveScoreboard.scoreboard-bar *,
#liveScoreboard.scoreboard-bar.is-animating * {
  animation: none !important;
  transform: none !important;
}

/* ----- Collapsible stats section inside game cards ----- */

.game-card-stats-wrap {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  margin-top: 8px;
  padding: 6px 10px 8px;
  font-size: 11px;
  color: #e5e7eb;
}

.game-card-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.game-card-stats-header .label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  color: #9ca3af;
}

.game-card-stats-toggle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: none;
  background: transparent;
  color: #f9fafb;
  padding: 0;
}

.game-card-stats-inner {
  margin-top: 6px;
  max-height: 400px;
  overflow: hidden;
  transition: max-height 160ms ease-out, opacity 160ms ease-out;
  opacity: 1;
}

.game-card-stats-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

.game-card-stats-line .label {
  color: #9ca3af;
}

.game-card-stats-line .value {
  font-variant-numeric: tabular-nums;
}

/* collapsed state */
.game-card-stats-wrap.is-collapsed .game-card-stats-inner {
  max-height: 0;
  opacity: 0;
}

@media (max-width: 900px) {
  .game-card-stats-wrap {
    padding: 6px 8px 8px;
  }
}

/* === TDC PATCH: game card layout + league logo (2025-12-08C) === */

/* Game card team rows: [logo + name]   [record]   [score] */
.game-card .team-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 8px;
}

/* Left chunk: logo + name */
.game-card .team-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-card .team-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
}

/* Record on the right side */
.game-card .team-record {
  font-size: 11px;
  color: #9ca3af;
}

/* Keep score tight to far right */
.game-card .team-score {
  text-align: right;
}

/* Header: league logo before date/time */
.game-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-time {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-time .league-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
}

/* === TDC PATCH: global text + ticker animation kill (2025-12-08D) === */

/* Make all text in the app white */
body,
body * {
  color: #ffffff !important;
}

/* Hard kill any CSS-driven ticker animation so it never scrolls/fades away */
#liveScoreboard.scoreboard-bar,
#liveScoreboard.scoreboard-bar.is-animating,
#liveScoreboard.scoreboard-bar *,
#liveScoreboard.scoreboard-bar.is-animating * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* === TDC PATCH: game-card layout + ticker visibility (2025-12-08F) === */

/* Team row: [logo + name]   [record]   [score] */
body[data-view="games"] .game-card .team-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 8px;
}

/* logo left of name */
body[data-view="games"] .game-card .team-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
}

/* team name */
body[data-view="games"] .game-card .team-name {
  font-size: 14px;
}

/* record (when present) – sits just before score */
body[data-view="games"] .game-card .team-record {
  font-size: 11px;
  opacity: 0.82;
}

/* score pinned to far right */
body[data-view="games"] .game-card .team-score {
  justify-self: end;
  font-weight: 600;
}

/* league logo before date/time in header */
body[data-view="games"] .game-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-view="games"] .game-card-header .game-time {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-view="games"] .game-card-header .league-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
}

/* make sure ticker row never hides itself */
body[data-view="games"] #liveScoreboard,
body[data-view="games"] #scoreboardLiveRow {
  display: block !important;
  opacity: 1 !important;
}

/* === TDC PATCH: static scoreboard row layout (2025-12-08G) === */
#scoreboardLiveRow.scoreboard-live-row,
#scoreboardLiveRow[data-tdc-static="true"],
#scoreboardLiveRow {
  display: flex !important;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 4px 0 6px;
}

.tdc-sb-game {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tdc-sb-meta {
  opacity: 0.85;
}

.tdc-sb-teams {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tdc-sb-team {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tdc-sb-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}

.tdc-sb-name {
  font-size: 10px;
}

.tdc-sb-score {
  font-weight: 600;
}

.tdc-sb-sep {
  opacity: 0.7;
}

/* === TDC PATCH: static scoreboard row (2025-12-08H) === */

/* Hide legacy JS-controlled ticker row completely */
#scoreboardLiveRow {
  display: none !important;
}

/* Our static row */
#tdcStaticScoreboardRow {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 4px 0 6px;
}

/* Each game chunk in the row */
.tdc-sb-game {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.tdc-sb-team {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tdc-sb-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
}

.tdc-sb-name {
  font-size: 11px;
}

.tdc-sb-score {
  font-weight: 600;
}

.tdc-sb-sep {
  opacity: 0.7;
}

/* === TDC DEV: force white text for games + props (2025-12-08) === */
body[data-view="games"],
body[data-view="props"] {
  color: #ffffff;
}

body[data-view="games"] .game-card,
body[data-view="games"] .game-card *,
body[data-view="props"] .props-toolbar,
body[data-view="props"] .props-toolbar *,
body[data-view="props"] .props-table,
body[data-view="props"] .props-table * {
  color: #ffffff !important;
}

/* ========== TDC HOME v4 game-card layout ========== */

body[data-view="games"] .game-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}

body[data-view="games"] .game-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

body[data-view="games"] .game-card-time {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-view="games"] .game-status {
  font-size: 11px;
  opacity: 0.7;
}

body[data-view="games"] .game-card-league .league-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(5, 182, 255, 0.6);
  color: #ffffff;
}

/* Teams row */

body[data-view="games"] .game-card-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 24px;
  align-items: center;
  margin-bottom: 8px;
}

body[data-view="games"] .team-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

body[data-view="games"] .team-select {
  width: 20px;
  display: flex;
  justify-content: center;
}

body[data-view="games"] .team-checkbox {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

body[data-view="games"] .team-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body[data-view="games"] .team-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
}

body[data-view="games"] .team-name {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-view="games"] .team-record {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

body[data-view="games"] .game-vs-pill {
  font-size: 11px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* Stats toggle + panel */

body[data-view="games"] .game-card-meta-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

body[data-view="games"] .game-card-stats-toggle {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(5, 182, 255, 0.6);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

body[data-view="games"] .game-card-stats {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

body[data-view="games"] .game-card-stats.is-open {
  max-height: 160px;
  opacity: 1;
}

body[data-view="games"] .game-card-stats-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-view="games"] .game-card-stats-col {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}

body[data-view="games"] .game-card-stats-col.h2h {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 8px;
}

body[data-view="games"] .stats-label {
  font-weight: 600;
  margin-bottom: 2px;
}

body[data-view="games"] .stats-line {
  font-size: 11px;
}

/* Empty state */

body[data-view="games"] .games-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  padding: 16px 8px;
}

/* ========== end HOME v4 game-card layout ========== */

/* TDC HOME: odds strip on game cards */
body[data-view="games"] .game-card-odds {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
}

body[data-view="games"] .game-card-odds .odds-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-view="games"] .game-card-odds .odds-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

body[data-view="games"] .game-card-odds .odds-line span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* === TDC HOME: game card tweaks (2025-12-08) ========================= */

/* Center the stats toggle row under the matchup */
body[data-view="games"] .game-card-meta-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Make the stats toggle button "edgy" instead of a pill */
body[data-view="games"] .game-card-stats-toggle {
  border-radius: 8px !important;
  padding: 3px 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* If team / league logos exist in the markup, size + align them */
.game-card .team-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
}

.game-card .team-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-card .team-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}

.game-card .league-pill,
.game-card .game-card-league-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 8px;
}

.game-card .league-pill img,
.game-card .game-league-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Slightly tighten the stats columns so they feel like one strip */
.game-card-stats-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.game-card-stats-col {
  border-radius: 8px;
  padding: 6px 8px;
}


/* === TDC PROPS: scoreboard + toolbar layout (2025-12-08) ============= */

/* Keep the scoreboard bar compact on Props just like Home */
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 56px;
  max-height: 110px;
  padding-top: 6px;
  padding-bottom: 6px;
  align-items: center;
}

/* Ensure the inner row stays tight */
body[data-view="props"] #liveScoreboard .nav-row,
body[data-view="props"] #liveScoreboard .ls-leagues,
body[data-view="props"] #liveScoreboard .scoreboard-info {
  align-items: center;
}

/* Toolbar (League / Date / Markets / Teams / Players / Min %) */
body[data-view="props"] #filtersForm.toolbar {
  margin-top: 16px;
}

body[data-view="props"] #filtersForm.toolbar > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Each field block */
body[data-view="props"] #filtersForm.toolbar .field,
body[data-view="props"] #filtersForm.toolbar .field-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Inputs / selects smaller & edgy */
body[data-view="props"] #filtersForm.toolbar select,
body[data-view="props"] #filtersForm.toolbar input,
body[data-view="props"] #filtersForm.toolbar button.tdc-btn {
  border-radius: 8px !important;
  min-height: 22px;
}

/* GO button hugs its label nicely */
body[data-view="props"] #filtersForm.toolbar .field-go {
  margin-left: 4px;
}

/* Actions bar: [Show/Hide adv] [Table/Cards] etc, even horizontal spacing */
body[data-view="props"] #actionsBar.actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* Wrap for left side controls if you have one */
body[data-view="props"] #actionsBar .actions-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Table / Cards toggle – same edgy corners + spacing */
body[data-view="props"] #actionsBar .view-toggle,
body[data-view="props"] #actionsBar .view-toggle button {
  border-radius: 8px !important;
}

/* === TDC 2025-12-08: Home + Props polish === */

/* 1) HOME: details toggle – softer blue border */
body[data-view="games"] .game-card-meta-toggle {
  border-radius: 999px;
  border: 1px solid rgba(5, 182, 255, 0.65);
  box-shadow:
    0 0 0 1px rgba(5, 182, 255, 0.25),
    0 0 18px rgba(5, 182, 255, 0.55);
  background: radial-gradient(circle at 50% 0,
    rgba(5, 182, 255, 0.12),
    rgba(5, 182, 255, 0.02),
    transparent 70%);
}

body[data-view="games"] .game-card-meta-toggle:hover {
  background: radial-gradient(circle at 50% 0,
    rgba(5, 182, 255, 0.22),
    rgba(5, 182, 255, 0.04),
    transparent 70%);
}

/* 2) PROPS: scoreboard bar – same height look as Home */
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 46px;
}

/* 3) PROPS: top toolbar – spread across width, soft blue edges */
body[data-view="props"] #filtersForm.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  justify-content: space-between;
}

body[data-view="props"] #filtersForm .field {
  flex: 1 1 0;
  min-width: 130px;
}

body[data-view="props"] #filtersForm select,
body[data-view="props"] #filtersForm input,
body[data-view="props"] #filtersForm button[type="button"],
body[data-view="props"] #filtersForm button[type="submit"] {
  border-radius: 8px;
  border: 1px solid rgba(5, 182, 255, 0.55);
}

/* GO button = neon-green fill, white border/text */
body[data-view="props"] #filtersForm button[type="submit"] {
  background: rgba(0, 255, 120, 0.18);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 255, 120, 0.45);
  font-weight: 500;
}

body[data-view="props"] #filtersForm button[type="submit"]:hover {
  background: rgba(0, 255, 120, 0.32);
}

/* 4) PROPS: actions bar (Show/Hide advanced, Table/Cards) –
      even spacing, neon-green theme on the buttons */
body[data-view="props"] #actionsBar.actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

body[data-view="props"] #actionsBar.actions-bar button {
  flex: 1 1 0;
  min-width: 120px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  background: rgba(0, 255, 120, 0.16);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 255, 120, 0.4);
}

body[data-view="props"] #actionsBar.actions-bar button.is-active,
body[data-view="props"] #actionsBar.actions-bar button.active {
  background: rgba(0, 255, 140, 0.32);
}

/* 5) PROPS: table header + body borders, full-width */
body[data-view="props"] #propsTable {
  width: 100%;
  border-collapse: collapse;
}

body[data-view="props"] #propsTable thead th {
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  font-weight: 400; /* remove bold */
}

body[data-view="props"] #propsTable tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body[data-view="props"] #propsTable tbody tr:last-child td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
}

/* 6) PROPS: pager – prev/next on right, same row as rows-per-page */
body[data-view="props"] .props-table-footer,
body[data-view="props"] .props-table-pager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

body[data-view="props"] .props-table-footer .pager,
body[data-view="props"] .props-table-pager-row .pager,
body[data-view="props"] .props-table-footer .props-pager {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 7) PROPS: cards view – make player cards echo game-card style */
body[data-view="props"] .cards-deck .prop-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(5, 182, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(5, 182, 255, 0.28),
    0 0 20px rgba(5, 182, 255, 0.45);
}

body[data-view="props"] .cards-deck .prop-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-view="props"] .cards-deck .prop-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-view="props"] .cards-deck .prop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  opacity: 0.85;
}
/* === TDC 2025-12-08: home + props polish pass ===================== */

/* 1) HOME – game stats toggle border in soft blue theme */
body[data-view="games"] .game-card-stats-toggle {
  border-color: rgba(5, 182, 255, 0.7) !important;
  background: rgba(5, 182, 255, 0.12);
  color: #ffffff !important;
}

/* 2) PROPS – top toolbar: spread controls across width + neon GO */
body[data-view="props"] #filtersForm .row-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-view="props"] #filtersForm .row-main .field {
  flex: 1 1 0;
}

body[data-view="props"] #filtersForm .row-main .field-go {
  flex: 0 0 140px;
  display: flex;
  justify-content: flex-start;
}

body[data-view="props"] #filtersForm .row-main .field-go .btn-go {
  width: 100%;
  background: #00f27a;          /* neon green fill */
  border-color: #ffffff;
  color: #ffffff;
}

/* 3) PROPS – actions bar buttons: black fill, white text */
body[data-view="props"] .actions-bar button {
  background: #000000;
  color: #ffffff;
}

/* keep active/tabbed buttons with a soft blue/green edge + glow */
body[data-view="props"] .actions-bar button.active,
body[data-view="props"] .actions-bar button.btn--primary {
  border-color: rgba(5, 182, 255, 0.85);
  box-shadow: 0 0 10px rgba(5, 182, 255, 0.55);
}

/* 4) PROPS – advanced toolbar lined up horizontally under actions bar */
body[data-view="props"] #advancedBar .adv-toolbar,
body[data-view="props"] #advancedBar .row-adv {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 5) PROPS – table: full-width white rails + non-bold header text */
body[data-view="props"] #tableWrap {
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  padding-top: 4px;
  padding-bottom: 4px;
}

body[data-view="props"] table.main-table thead th {
  font-weight: 400;
}

/* 6) PROPS – pager: prev/next aligned on the right */
body[data-view="props"] #pagerWrap .pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-view="props"] #pagerWrap .pager-left {
  flex: 0 0 auto;
}

body[data-view="props"] #pagerWrap .pager-right {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* === TDC PATCH 2025-12-08: home + props alignment + theming === */

/* 1) HOME – game stats toggle border = soft blue theme */
body[data-view="games"] .game-card-stats-toggle {
  border: 1px solid rgba(5, 182, 255, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(5, 182, 255, 0.3) inset !important;
}

/* 2) PROPS – top filters toolbar should span full width */
body[data-view="props"] #filtersForm.toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

/* main row of filters across the app width */
body[data-view="props"] #filtersForm.toolbar .row-main {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
}

/* each field (League / Date / Markets / Teams / Players / Min%) flex evenly */
body[data-view="props"] #filtersForm.toolbar .row-main .field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* GO field kept tight on the right */
body[data-view="props"] #filtersForm.toolbar .row-main .field-go {
  flex: 0 0 150px !important;
}

/* soft blue themed border + dark fill on all filter controls */
body[data-view="props"] #filtersForm select,
body[data-view="props"] #filtersForm input,
body[data-view="props"] #filtersForm button {
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid rgba(5, 182, 255, 0.55) !important;
  background: rgba(3, 10, 22, 0.95) !important;
  color: #ffffff !important;
}

/* GO button = neon green pill with white text + border */
body[data-view="props"] #goBtn,
body[data-view="props"] #goBtn.btn-go {
  background: #00ff88 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* 3) PROPS – actions bar buttons (Show/Hide / Table / Cards) */

/* bar layout */
body[data-view="props"] #actionsBar.actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
}

/* center container for Show/Hide + advanced pills */
body[data-view="props"] #actionsBar .actions-center {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* right side for TABLE / CARDS */
body[data-view="props"] #actionsBar .actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* base style: black fill, white text */
body[data-view="props"] #actionsBar button {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff !important;
  padding: 4px 18px !important;
}

/* active TABLE / CARDS = neon green glow, same as existing home theme */
body[data-view="props"] #actionsBar button.active,
body[data-view="props"] #actionsBar button.is-active {
  background: #00ff88 !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.7) !important;
  color: #000000 !important;
}

/* 4) PROPS – advanced toolbar row inline under Show/Hide / Table / Cards */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* make all advanced pills line up horizontally */
body[data-view="props"] #advancedBar.adv-toolbar .row-adv {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

/* 5) PROPS – main table width + header / body borders */

body[data-view="props"] table.main-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

/* thin white line above & below header, no bold labels */
body[data-view="props"] table.main-table thead th {
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-weight: 400 !important;
  padding: 6px 10px !important;
}

/* thin white border for each body row */
body[data-view="props"] table.main-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* 6) PROPS – pager: prev/next on the right side */

body[data-view="props"] #pagerWrap #pager {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
}

body[data-view="props"] #pager-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-view="props"] #pager-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
}

/* pager buttons match black/white style */
body[data-view="props"] #pager-right button {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff !important;
  padding: 2px 14px !important;
}

/* 7) PROPS – make PROPS nav pill share same active style as HOME */
body[data-view="props"] .appbar-nav button#navProps,
body[data-view="props"] .appbar-nav button#navProps.active {
  background: rgba(5, 182, 255, 0.3) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 16px rgba(5, 182, 255, 0.9) !important;
}
/* === TDC PATCH 2025-12-08 (v2): props polish === */

/* 1) HOME – game stats toggle border already blue; keep but slightly softer */
body[data-view="games"] .game-card-stats-toggle {
  border-color: rgba(5, 182, 255, 0.5) !important;
}

/* 2) PROPS – advanced toolbar hidden until toggled */
body[data-view="props"] #advancedBar[hidden],
body[data-view="props"] #advancedBar.is-hidden {
  display: none !important;
}

/* When visible, keep horizontal layout */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 3) PROPS – scoreboard height mirror HOME */
body[data-view="props"] #liveScoreboard,
body[data-view="props"] #liveScoreboard .scoreboard-bar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}

/* 4) PROPS – HOME/PROPS nav buttons share same active look */
.appbar-nav button#navHome.active,
.appbar-nav button#navProps.active {
  background: #00ff88 !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.7) !important;
  color: #000000 !important;
}

/* 5) PROPS – actions bar: black fills, blue active for TABLE/CARDS */

/* Base style remains black + white */
body[data-view="props"] #actionsBar button {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff !important;
}

/* TABLE / CARDS (right side) active = same vibe as league pills (blue) */
body[data-view="props"] #actionsBar .actions-right button.active,
body[data-view="props"] #actionsBar .actions-right button.is-active {
  background: rgba(5, 182, 255, 0.3) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 16px rgba(5, 182, 255, 0.9) !important;
  color: #ffffff !important;
}

/* 6) PROPS – breathing room around table + pager */
body[data-view="props"] #tableWrap,
body[data-view="props"] .table-wrap {
  margin-top: 10px !important;
}

body[data-view="props"] #pagerWrap #pager {
  margin-top: 12px !important;
}

/* 7) PROPS – compact labels (filters + advanced + table header) */
body[data-view="props"] #filtersForm label,
body[data-view="props"] #advancedBar label,
body[data-view="props"] table.main-table thead th {
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
}

/* Keep table header rails & full width (from previous patch) */
body[data-view="props"] table.main-table {
  width: 100% !important;
}

body[data-view="props"] table.main-table thead th {
  border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-weight: 400 !important;
}

/* 8) PROPS – body row bottom rail */
body[data-view="props"] table.main-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}
/* === TDC PATCH 2025-12-08 (v3): props polish 2 === */

/* 1) PROPS – scoreboard bar height to mirror HOME */
body[data-view="props"] #liveScoreboard,
body[data-view="props"] #liveScoreboard .scoreboard-bar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 32px !important;
}

/* 2) Top nav HOME / PROPS – shared active theme */
#navHome.active,
#navProps.active {
  background: rgba(5, 182, 255, 0.18) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 16px rgba(5, 182, 255, 0.9) !important;
  color: #ffffff !important;
}

/* 3) PROPS – Hide Advanced + TABLE / CARDS = league pill active style */
body[data-view="props"] #toggleAdvanced.active,
body[data-view="props"] #toggleAdvanced.is-active,
body[data-view="props"] #actionsBar .actions-right button.active,
body[data-view="props"] #actionsBar .actions-right button.is-active {
  background: rgba(5, 182, 255, 0.25) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 16px rgba(5, 182, 255, 0.9) !important;
  color: #ffffff !important;
}

/* Non-active actions bar buttons stay black */
body[data-view="props"] #actionsBar button:not(.active):not(.is-active) {
  background: #000000 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* 4) PROPS – advanced toolbar hidden unless "open" */
body[data-view="props"] #advancedBar:not(.is-open):not(.adv-open) {
  display: none !important;
}

body[data-view="props"] #advancedBar.is-open,
body[data-view="props"] #advancedBar.adv-open {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 5) PROPS – shorten width of top toolbar buttons a bit */
body[data-view="props"] #filtersForm .row-main {
  display: flex;
  justify-content: center;
  gap: 10px;
}

body[data-view="props"] #filtersForm .row-main .field {
  flex: 0 0 15%;
  max-width: 240px;
}
/* === TDC PATCH 2025-12-08 v4: props polish === */

/* 1) PROPS – scoreboard bar height to mirror HOME */
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  height: 44px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
}

/* 2) Top nav HOME / PROPS – same active theme */
#navHome.active,
#navProps.active {
  background: rgba(5, 182, 255, 0.18) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(5, 182, 255, 0.95) !important;
  color: #ffffff !important;
}

/* 3) PROPS – Hide + TABLE/CARDS active = league pill style */
body[data-view="props"] #toggleAdvanced.active,
body[data-view="props"] #toggleAdvanced.is-active,
body[data-view="props"] #actionsBar .actions-right button.active,
body[data-view="props"] #actionsBar .actions-right button.is-active {
  background: rgba(5, 182, 255, 0.18) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(5, 182, 255, 0.95) !important;
  color: #ffffff !important;
}

/* Non-active Hide / TABLE / CARDS buttons = black pill */
body[data-view="props"] #actionsBar button,
body[data-view="props"] #toggleAdvanced {
  background: #000000 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* 4) Advanced toolbar – hidden unless “open” */
body[data-view="props"] #advancedBar {
  display: none !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

body[data-view="props"] #advancedBar.is-open,
body[data-view="props"] #advancedBar.adv-open {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 5) Give main table + pager breathing room */
body[data-view="props"] #tableWrap,
body[data-view="props"] .table-wrap {
  margin-top: 10px !important;
}

body[data-view="props"] #pagerWrap {
  margin-top: 10px !important;
}

/* 6) Props labels a bit smaller */
body[data-view="props"] #filtersForm label,
body[data-view="props"] #advancedBar label,
body[data-view="props"] .main-table thead th {
  font-size: 11px !important;
}

/* 7) Top toolbar fields slightly narrower + centered */
body[data-view="props"] #filtersForm.toolbar .row-main {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

body[data-view="props"] #filtersForm.toolbar .row-main .field {
  flex: 0 0 14% !important;
  max-width: 220px !important;
}
/* === TDC PATCH 2025-12-08 v5: props polish hard override === */

/* 1) Global scoreboard bar – single consistent height (HOME + PROPS) */
#liveScoreboard.scoreboard-bar {
  height: 44px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
}

/* 2) Top nav: HOME / PROPS active pills all identical */
header.appbar .nav-main button.active,
header.appbar .nav-main button.is-active {
  background: rgba(5, 182, 255, 0.18) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(5, 182, 255, 0.95) !important;
  color: #ffffff !important;
}

/* 3) PROPS: Hide + TABLE/CARDS default look = black pill */
body[data-view="props"] #toggleAdvanced,
body[data-view="props"] #btnTable,
body[data-view="props"] #btnCards {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

/* 4) PROPS: Hide + TABLE/CARDS active = same as league pills */
body[data-view="props"] #toggleAdvanced.active,
body[data-view="props"] #toggleAdvanced.is-active,
body[data-view="props"] #btnTable.active,
body[data-view="props"] #btnTable.is-active,
body[data-view="props"] #btnCards.active,
body[data-view="props"] #btnCards.is-active {
  background: rgba(5, 182, 255, 0.18) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(5, 182, 255, 0.95) !important;
  color: #ffffff !important;
}

/* 5) Advanced toolbar hidden unless “open” */
body[data-view="props"] #advancedBar {
  display: none !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body[data-view="props"] #advancedBar.is-open,
body[data-view="props"] #advancedBar.adv-open {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 6) Props labels a bit smaller */
body[data-view="props"] #filtersForm label,
body[data-view="props"] #advancedBar label,
body[data-view="props"] .main-table thead th {
  font-size: 11px !important;
}

/* 7) Top toolbar fields slightly narrower so everything breathes */
body[data-view="props"] #filtersForm.toolbar .row-main {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

body[data-view="props"] #filtersForm.toolbar .row-main .field {
  flex: 0 0 13% !important;
  max-width: 210px !important;
}

/* 8) Spacing: main table + pager breathing room */
body[data-view="props"] #tableWrap,
body[data-view="props"] .table-wrap {
  margin-top: 10px !important;
}

body[data-view="props"] #pagerWrap {
  margin-top: 10px !important;
}
/* === TDC PATCH 2025-12-08 v6: scoreboard + actions bar === */

/* 1) Scoreboard bar height identical on HOME + PROPS */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  height: 44px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
}

/* 2) PROPS: Show/Hide + TABLE/CARDS baseline = black pill */
body[data-view="props"] .actions-bar button {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

/* 2b) PROPS: any active action-bar button = SAME as league active */
body[data-view="props"] .actions-bar button.is-active,
body[data-view="props"] .actions-bar button.active {
  background: rgba(5, 182, 255, 0.18) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(5, 182, 255, 0.95) !important;
  color: #ffffff !important;
}

/* 3) Advanced filters toolbar: always visible again (we hid it too hard) */
body[data-view="props"] #advancedBar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* === TDC • Dec 8 2025 – props polish + shared scoreboard height === */

/* 1) Scoreboard bar: same compact height on HOME + PROPS */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 54px !important;
}

/* 2) PROPS nav button: same blue active theme as HOME nav / league buttons */
body[data-view="props"] header .nav-main button#navProps {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
}

body header .nav-main button.is-active,
body header .nav-main button.active,
body .ls-league-pill.is-active,
body .ls-league-pill.active,
body[data-view="props"] header .nav-main button#navProps.is-active,
body[data-view="props"] header .nav-main button#navProps.active {
  background: var(--tdc-accent-soft) !important;
  border-color: var(--tdc-accent) !important;
  box-shadow: 0 0 24px rgba(5, 182, 255, 0.9) !important;
}

/* 3) PROPS actions bar: Show/Hide + TABLE/CARDS black by default,
      blue-glow when active (same as league pills) */
body[data-view="props"] #actionsBar button,
body[data-view="props"] #actionsBar button.btn,
body[data-view="props"] #actionsBar .btn {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-view="props"] #toggleAdvanced.is-active,
body[data-view="props"] #toggleAdvanced.active,
body[data-view="props"] #btnTableView.is-active,
body[data-view="props"] #btnTableView.active,
body[data-view="props"] #btnCardsView.is-active,
body[data-view="props"] #btnCardsView.active {
  background: var(--tdc-accent-soft) !important;
  border-color: var(--tdc-accent) !important;
  box-shadow: 0 0 24px rgba(5, 182, 255, 0.9) !important;
}

/* 4) Advanced filters toolbar: hidden by default, flex row when opened */
body[data-view="props"] #advancedBar {
  display: none;
  gap: 8px;
}

body[data-view="props"] #advancedBar.is-open {
  display: flex;
  align-items: center;
}

/* 5) Slightly shorten the top toolbar fields so they don't feel edge-to-edge */
body[data-view="props"] #filtersForm.toolbar .field,
body[data-view="props"] #filtersForm.toolbar .field > * {
  max-width: 240px;
}

/* === TDC PROPS: actions bar + advanced filters (2025-12-08) === */

/* Align toolbar + actions bar with same horizontal padding */
body[data-view="props"] #filtersForm,
body[data-view="props"] #actionsBar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Advanced filters row: hidden by default; JS will flip display */
body[data-view="props"] #advancedBar {
  display: none;
  margin-top: 8px;
  gap: 8px;
}

/* Base style for Show/Hide + Table/Cards buttons (match app chrome) */
body[data-view="props"] #actionsBar .actions-left button,
body[data-view="props"] #actionsBar .actions-right button {
  min-width: 80px;
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 14px !important;
}

/* Active state – mirror league buttons, but with softer glow */
body[data-view="props"] #actionsBar .actions-left button.is-active,
body[data-view="props"] #actionsBar .actions-right button.is-active {
  border-color: rgba(5, 182, 255, 0.75) !important;
  background: radial-gradient(circle at 50% 130%, rgba(5, 182, 255, 0.24), transparent) !important;
  box-shadow: 0 0 10px rgba(5, 182, 255, 0.55) !important; /* softer glow */
}

/* Slightly reduce overall nav/league glow as well */
.btn-nav.is-active,
.ls-league-pill.is-active {
  box-shadow: 0 0 10px rgba(5, 182, 255, 0.55) !important;
}

/* Make TABLE / CARDS active style match league pills even if they use .active */
body[data-view="props"] #actionsBar .actions-right button.active {
  border-color: rgba(5, 182, 255, 0.75) !important;
  background: radial-gradient(circle at 50% 130%, rgba(5, 182, 255, 0.24), transparent) !important;
  box-shadow: 0 0 10px rgba(5, 182, 255, 0.55) !important;
}

/* Normalized scoreboard height on props to mirror home */
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 32px !important;
}

/* === TDC: unified pill styles (nav + leagues + props actions) === */

/* Base (inactive) style for all pills */
.btn-nav,
.ls-league-pill,
body[data-view="props"] #actionsBar button {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Shared ACTIVE look:
   - Home / Props / league nav (.btn-nav.is-active)
   - Scoreboard league pills (.ls-league-pill.is-active)
   - Show/Hide / Table / Cards on props (.is-active or .active)
*/
.btn-nav.is-active,
.ls-league-pill.is-active,
body[data-view="props"] #actionsBar .actions-left button.is-active,
body[data-view="props"] #actionsBar .actions-right button.is-active,
body[data-view="props"] #actionsBar .actions-right button.active {
  border-color: rgba(5, 182, 255, 0.75) !important;
  background: radial-gradient(
    circle at 50% 130%,
    rgba(5, 182, 255, 0.24),
    transparent
  ) !important;
  box-shadow: 0 0 14px rgba(5, 182, 255, 0.65) !important;
}
/* === TDC: shared active pill theme (nav / leagues / props / table-cards / show-hide) === */

/* Base pill look for nav + controls (keeps your existing layout but normalizes borders) */
.nav-row button,
.ls-league-pill,
#actionsBar button,
#toggleAdvanced {
  border-radius: 999px;
  border: 1px solid rgba(5, 182, 255, 0.35);
  background: transparent;
  color: #ffffff;
}

/* Unified active glow – match the Show/Hide advanced filters button */
.nav-row button.active,
.nav-row button.is-active,
.ls-league-pill.is-active,
#toggleAdvanced.is-active,
#actionsBar button.is-active,
#actionsBar button.active {
  background: radial-gradient(circle at 50% 0, rgba(5, 182, 255, 0.35), rgba(5, 182, 255, 0.05));
  border-color: rgba(5, 182, 255, 0.95);
  box-shadow: 0 0 10px rgba(5, 182, 255, 0.55);
  color: #ffffff;
}

/* Make sure the PROPS nav pill uses the same active styling as HOME */
body[data-view="props"] #navProps {
  /* base pill */
  border-radius: 999px;
}
body[data-view="props"] #navProps.active {
  /* active state already covered by .nav-row button.active above */
}

/* Advanced bar hidden state */
#advancedBar.is-hidden {
  display: none !important;
}

/* Props scoreboard height – match Home page */
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* === TDC 2025-12-08: unify active pill theme & scoreboard height === */

/* Scoreboard bar height consistent on Home + Props */
#liveScoreboard .scoreboard-bar {
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 36px;
}

body[data-view="props"] #liveScoreboard .scoreboard-bar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Shared neon-blue active look for:
   - HOME / PROPS
   - TABLE / CARDS
   - league pills
   - Show / Hide button
*/
body .nav-row button.active,
body .ls-league-pill.is-active,
body #toggleAdvanced.is-active,
body #viewTableBtn.is-active,
body #viewCardsBtn.is-active {
  background: rgba(0, 0, 0, 0.85) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(7, 238, 255, 0.9) !important;
  color: #ffffff !important;
}

/* Explicitly keep HOME / PROPS matching that theme */
body[data-view="props"] #navProps,
body[data-view="games"] #navHome {
  background: rgba(0, 0, 0, 0.85) !important;
  border-color: #05b6ff !important;
  box-shadow: 0 0 18px rgba(7, 238, 255, 0.9) !important;
  color: #ffffff !important;
}
/* === TDC 2025-12-08: props polish v2 === */

/* 1) Fix scoreboard bar height ONLY on Props page */
body[data-view="props"] #liveScoreboard .scoreboard-bar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 36px !important;
}

/* 2) One glow style for all active pills:
      - #navHome / #navProps (top nav)
      - .ls-league-pill.is-active (NHL/NBA/NFL/MLB)
      - #viewTableBtn.is-active / #viewCardsBtn.is-active (TABLE / CARDS)
      - #toggleAdvanced.is-active (Show / Hide advanced filters)
*/
body #navHome.active,
body #navProps.active,
body .ls-league-pill.is-active,
body #viewTableBtn.is-active,
body #viewCardsBtn.is-active,
body #toggleAdvanced.is-active {
  background: rgba(0, 0, 0, 0.9) !important;
  border-color: #05b6ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(7, 238, 255, 0.9) !important;
}
/* === TDC 2025-12-08: nav glow + props pills + advanced toggle === */

/* Shared active pill theme (soft blue) */
:root {
  --tdc-pill-active-bg: rgba(7, 238, 255, 0.12);
  --tdc-pill-active-border: #07e8ff;
  --tdc-pill-active-shadow: 0 0 14px rgba(7, 238, 255, 0.45);
}

/* Top nav + league pills (HOME / PROPS / NHL / NBA / NFL / MLB) */
button#navHome.active,
button#navProps.active,
button#navNHL.active,
button#navNhl.active,
button#navNBA.active,
button#navNba.active,
button#navNFL.active,
button#navNfl.active,
button#navMLB.active,
button#navMlb.active {
  background-color: var(--tdc-pill-active-bg) !important;
  border-color: var(--tdc-pill-active-border) !important;
  box-shadow: var(--tdc-pill-active-shadow) !important;
}

/* Props actions bar: Show/Hide + TABLE / CARDS active look */
body[data-view="props"] .actions-bar button.btn.is-active,
body[data-view="props"] .actions-bar button.btn.active {
  background-color: var(--tdc-pill-active-bg) !important;
  border-color: var(--tdc-pill-active-border) !important;
  box-shadow: var(--tdc-pill-active-shadow) !important;
}

/* Make sure non-active versions don't carry a big glow */
body[data-view="props"] .actions-bar button.btn:not(.active):not(.is-active),
button#navHome:not(.active),
button#navProps:not(.active),
button#navNHL:not(.active),
button#navNhl:not(.active),
button#navNBA:not(.active),
button#navNba:not(.active),
button#navNFL:not(.active),
button#navNfl:not(.active),
button#navMLB:not(.active),
button#navMlb:not(.active) {
  box-shadow: none !important;
}

/* Advanced filters bar: respect the hidden attribute so Show/Hide works */
body[data-view="props"] #advancedBar[hidden] {
  display: none !important;
}

body[data-view="props"] #advancedBar:not([hidden]) {
  display: flex !important;
}

/* === TDC HOTFIX (2025-12-08): active pill glow + adv bar === */

:root {
  --tdc-pill-active-bg: rgba(5, 182, 255, 0.18);
  --tdc-pill-active-border: rgba(5, 182, 255, 0.85);
  --tdc-pill-active-glow: 0 0 10px rgba(5, 182, 255, 0.28);
}

/* All primary "pill" buttons share the same active look */
body[data-view="games"] #navHome.active,
body[data-view="props"] #navProps.active,
.nav-row button.active,
.ls-league-pill.is-active,
body[data-view="props"] .btn-view.is-active,
body[data-view="props"] #toggleAdvanced.is-active {
  background-color: var(--tdc-pill-active-bg) !important;
  border-color: var(--tdc-pill-active-border) !important;
  box-shadow: var(--tdc-pill-active-glow) !important;
  color: #ffffff !important;
}

/* Advanced filters bar hidden state */
body[data-view="props"] #advancedBar.tdc-is-hidden {
  display: none !important;
}

/* Tiny bump so table has breathing room below adv bar */
body[data-view="props"] #advancedBar {
  margin-bottom: 6px;
}

/* === TDC HOTFIX v2 (2025-12-08) === */

/* Hide state for advanced filters bar */
body[data-view="props"] #advancedBar.tdc-is-hidden {
  display: none !important;
}

/* Slight breathing room when bar is visible */
body[data-view="props"] #advancedBar {
  margin-bottom: 6px;
}

/* Unified, softer active pill glow */
body button#navHome.active,
body button#navProps.active,
body .nav-row button.active,
body .ls-league-pill.is-active,
body .btn-view.is-active,
body button#toggleAdvanced.is-active {
  background-color: rgba(5, 182, 255, 0.16) !important;
  border-color: rgba(5, 182, 255, 0.85) !important;
  box-shadow: 0 0 6px rgba(5, 182, 255, 0.25) !important;
  color: #ffffff !important;
}

/* === TDC hotfix: active states + softer glow (2025-12-08) ================= */

:root {
  /* softer single-ring glow */
  --tdc-active-glow-soft: 0 0 14px rgba(5, 182, 255, 0.45);
}

/* HOME / PROPS nav buttons */
.banner .nav-row button#navHome.active,
.banner .nav-row button#navProps.active {
  background-color: rgba(5, 182, 255, 0.08) !important;
  box-shadow: var(--tdc-active-glow-soft) !important;
}

/* Scoreboard league pills (NHL / NBA / NFL / MLB) */
.scoreboard-bar .ls-league-pill.is-active {
  background-color: rgba(5, 182, 255, 0.08) !important;
  box-shadow: var(--tdc-active-glow-soft) !important;
}

/* Props: Show / Hide advanced + TABLE / CARDS active buttons */
body[data-view="props"] #toggleAdvanced.btn.is-active,
body[data-view="props"] .btn-view.is-active {
  background-color: rgba(5, 182, 255, 0.08) !important;
  box-shadow: var(--tdc-active-glow-soft) !important;
}

/* Generic safety net for any other “pill” we mark as is-active */
.pill.is-active {
  background-color: rgba(5, 182, 255, 0.08) !important;
  box-shadow: var(--tdc-active-glow-soft) !important;
}

/* === TDC PROPZ: scoreboard + glow + props actions alignment (2025-12-08) === */

/* 1. Same scoreboard height on Home & Props */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 54px !important;   /* match Home */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 2. Softer, shared active glow for all main buttons */
:root {
  --tdc-glow-color: rgba(5, 182, 255, 0.45);
}

/* Home / Props nav buttons */
#navHome.active,
#navProps.active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* League pills in scoreboard */
.ls-league-pill.is-active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* Table / Cards view toggle */
.btn-view.is-active,
button#btnTable.btn-view.is-active,
button#btnCards.btn-view.is-active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* Show / Hide advanced filters button */
#toggleAdvanced.btn.is-active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* Make sure all these active states share the same border/text treatment */
#navHome.active,
#navProps.active,
.ls-league-pill.is-active,
.btn-view.is-active,
#toggleAdvanced.btn.is-active {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* 3. Props actions bar (Show/Hide | Table/Cards) horizontally aligned
      with the top filters row */
body[data-view="props"] #filtersForm.toolbar,
body[data-view="props"] .actions-bar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Keep advanced filters row visually inside the Hide button area */
body[data-view="props"] #advancedBar.adv-toolbar {
  padding-top: 6px;
}
/* === TDC PROPZ: scoreboard + glow + props actions alignment (2025-12-08) === */

/* 1. Same scoreboard height on Home & Props */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 54px !important;   /* match Home */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 2. Softer, shared active glow for all main buttons */
:root {
  --tdc-glow-color: rgba(5, 182, 255, 0.45);
}

/* Home / Props nav buttons */
#navHome.active,
#navProps.active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* League pills in scoreboard */
.ls-league-pill.is-active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* Table / Cards view toggle */
.btn-view.is-active,
button#btnTable.btn-view.is-active,
button#btnCards.btn-view.is-active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* Show / Hide advanced filters button */
#toggleAdvanced.btn.is-active {
  box-shadow: 0 0 12px var(--tdc-glow-color) !important;
}

/* Make sure all these active states share the same border/text treatment */
#navHome.active,
#navProps.active,
.ls-league-pill.is-active,
.btn-view.is-active,
#toggleAdvanced.btn.is-active {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* 3. Props actions bar (Show/Hide | Table/Cards) horizontally aligned
      with the top filters row */
body[data-view="props"] #filtersForm.toolbar,
body[data-view="props"] .actions-bar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Keep advanced filters row visually inside the Hide button area */
body[data-view="props"] #advancedBar.adv-toolbar {
  padding-top: 6px;
}

/* === TDC FIX: Props scoreboard + toolbar alignment (2025-12-09) === */

/* 2a. Make scoreboard height the same on Home & Props */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 54px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 2b. Line up Show/Hide + Table/Cards row with the top toolbar */
body[data-view="props"] #filtersForm.toolbar,
body[data-view="props"] #actionsBar.actions-bar {
  max-width: 1160px;
  margin: 0 auto;
}

/* 2c. Soften the active glow so it matches but isn’t blast-your-eyes bright */
.btn-nav.is-active,
.ls-league-pill.is-active,
body[data-view="props"] #actionsBar .actions-left button.is-active,
body[data-view="props"] #actionsBar .actions-right .btn-view.active {
  box-shadow:
    0 0 0 1px rgba(5, 182, 255, 0.75),
    0 0 12px rgba(5, 182, 255, 0.28),
    0 0 30px rgba(5, 182, 255, 0.20);
}

/* === TDC HOTFIX 2025-12-09: global black bg, scoreboard height, softer glow === */

/* Global background: kill any gradients */
html,
body,
body[data-view="games"],
body[data-view="props"] {
  background: #000 !important;
  background-color: #000 !important;
}

/* Keep main layout transparent so the black body shows through */
main.layout,
.layout,
section.content,
section.games-section {
  background: transparent !important;
}

/* Scoreboard height: make games + props match */
body[data-view="games"]  #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 54px !important;   /* mirrors Home height */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Softer active glow for nav + league + actions buttons */
.btn-nav.is-active,
.ls-league-pill.is-active,
body[data-view="props"] #toggleAdvanced.btn.is-active,
body[data-view="props"] .btn-view.active {
  box-shadow: 0 0 10px rgba(5, 182, 255, 0.5) !important;
  background: radial-gradient(
      circle at 50% 130%,
      rgba(5, 182, 255, 0.18),
      rgba(5, 182, 255, 0.05)
  ) !important;
}

/* === TDC HOTFIX: props toolbar + advanced row full-width & even spacing === */

/* Props top toolbar: make inputs share the full width */
body[data-view="props"] #filtersForm.toolbar {
  padding: 0 24px !important;        /* same inset as rest of app */
}

body[data-view="props"] #filtersForm.toolbar .row-main {
  display: flex !important;
  gap: 12px !important;
}

body[data-view="props"] #filtersForm.toolbar .row-main .field {
  flex: 1 1 0 !important;            /* each field grows evenly */
  min-width: 0;
}

/* Actions / advanced row: line up with toolbar and stretch full width */
body[data-view="props"] .actions-bar {
  padding: 0 24px 4px !important;    /* match toolbar left/right */
  display: flex !important;
  align-items: center;
  gap: 16px;
}

body[data-view="props"] .actions-bar .actions-left {
  flex: 0 0 auto;
}

body[data-view="props"] .actions-bar .actions-center {
  flex: 1 1 0;
}

body[data-view="props"] .actions-bar .actions-right {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

/* Advanced filters toolbar itself: full-width and evenly spaced fields */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex !important;
  width: 100%;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

body[data-view="props"] #advancedBar.adv-toolbar .field {
  flex: 1 1 0;
  min-width: 0;
}
/* === TDC HOTFIX: background, scoreboard height, props rows (2025-12-09) === */

/* Solid black background everywhere */
html, body {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Same scoreboard height on Home & Props */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 54px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Props: toolbar + advanced rows aligned with table header */
body[data-view="props"] #filtersForm.toolbar,
body[data-view="props"] .actions-bar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body[data-view="props"] #filtersForm.toolbar .row-main,
body[data-view="props"] .actions-bar {
  display: flex !important;
  gap: 12px !important;
  align-items: center;
}

/* Make fields share the width nicely */
body[data-view="props"] #filtersForm.toolbar .field,
body[data-view="props"] #advancedBar.adv-toolbar .field {
  flex: 1 1 0 !important;
  min-width: 0;
}

/* Keep advanced toolbar inline when visible */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex;
  gap: 12px;
}

/* === TDC HOTFIX (2025-12-09) : background, scoreboard, advanced row === */

/* Whole app background solid black */
html,
body {
  background-color: #000000 !important;
}

/* Same scoreboard height on Home + Props */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  min-height: 54px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Top toolbar + actions bar full width and aligned */
body[data-view="props"] #filtersForm.toolbar,
body[data-view="props"] #actionsBar.actions-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-view="props"] #actionsBar {
  display: flex !important;
  align-items: center !important;
}

body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-right {
  flex: 0 0 auto;
}

body[data-view="props"] #actionsBar .actions-center {
  flex: 1 1 auto;
  display: flex !important;
  justify-content: center !important;
}

/* Advanced filters bar layout + visibility */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body[data-view="props"] #advancedBar.adv-toolbar.is-hidden {
  display: none !important;
}

/* Softer active glow for nav / SHOW-HIDE / TABLE-CARDS */
.btn-nav.is-active,
.ls-league-pill.is-active,
body[data-view="props"] #actionsBar button.is-active {
  box-shadow: 0 0 8px rgba(5, 182, 255, 0.45) !important;
}

/* === TDC FIX 2025-12-09: background, scoreboard, props layout === */

/* 0) Whole app background solid black */
html,
body {
  background: #000000 !important;
}

/* 1) Scoreboard same height on Home + Props */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 54px !important;
}

/* 2) Props top toolbar spans full width and is centered */
body[data-view="props"] #filtersFormToolbar,
body[data-view="props"] #filtersFormToolbar .row-main {
  width: 100% !important;
  max-width: 100% !important;
}

body[data-view="props"] #filtersFormToolbar .row-main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
}

/* 3) Actions bar (Show/Hide + Table/Cards) spans width and lines up */
body[data-view="props"] #actionsBar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 20px 0 !important;
}

/* 4) Advanced row layout + visibility controlled only by .is-hidden */
body[data-view="props"] #advancedBar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body[data-view="props"] #advancedBar.is-hidden {
  display: none !important;
}
/* === TDC FIX: scoreboard + layout v2 (2025-12-09) === */

/* Make the whole app background solid black */
html,
body,
main.layout {
  background: #000000 !important;
}

/* Unify scoreboard height for Home and Props */
body[data-view="games"] #liveScoreboard,
body[data-view="props"] #liveScoreboard {
  min-height: 54px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Top filters row + advanced row full-width & aligned */
body[data-view="props"] form#filtersForm.toolbar .row-main,
body[data-view="props"] #advancedBar.adv-toolbar {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-view="props"] #advancedBar.adv-toolbar {
  margin-top: 4px;
}
/* === TDC FIX: scoreboard + layout v2 (2025-12-09) === */

/* Make the whole app background solid black */
html,
body,
main.layout {
  background: #000000 !important;
}

/* Unify scoreboard height for Home and Props */
body[data-view="games"] #liveScoreboard,
body[data-view="props"] #liveScoreboard {
  min-height: 54px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Top filters row + advanced row full-width & aligned */
body[data-view="props"] form#filtersForm.toolbar .row-main,
body[data-view="props"] #advancedBar.adv-toolbar {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-view="props"] #advancedBar.adv-toolbar {
  margin-top: 4px;
}

/* === TDC FIX: Live scoreboard bar cleanup (2025-12-07) === */

body[data-view="games"] #liveScoreboard {
  /* kill any old top gradient / borders */
  border-top: none !important;
  background: transparent !important;

  /* single thin white bottom line */
  border-bottom: 1px solid #ffffff !important;

  padding-top: 4px;
  padding-bottom: 4px;
}

/* countdown text */
body[data-view="games"] #liveScoreboard .scoreboard-refresh-timer {
  color: #ffffff !important;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ticker row container */
body[data-view="games"] #liveScoreboard .scoreboard-live-row {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

/* inner scrolling content that we’ll inject */
body[data-view="games"] #liveScoreboard .scoreboard-live-inner {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-inline: 16px;
}

/* one game in the ticker */
body[data-view="games"] #liveScoreboard .sb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: #ffffff;
}

/* tiny logos in ticker */
body[data-view="games"] #liveScoreboard .sb-team-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* scoreboard “•” separators between games */
body[data-view="games"] #liveScoreboard .sb-dot {
  margin-inline: 10px;
  opacity: 0.6;
}

/* little extra breathing room between nav row and ticker */
body[data-view="games"] .appbar + #liveScoreboard {
  margin-top: 6px;
}

/* === Mobile tweaks === */
@media (max-width: 768px) {
  body[data-view="games"] #liveScoreboard {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  body[data-view="games"] #liveScoreboard .scoreboard-live-inner {
    gap: 16px;
  }

  /* keep nav row + league pills tight with the bar */
  body[data-view="games"] .nav-row {
    margin-bottom: 0;
  }
}

/* === TDC FIX: Live scoreboard bar cleanup (2025-12-07) === */

body[data-view="games"] #liveScoreboard {
  /* kill any old top gradient / borders */
  border-top: none !important;
  background: transparent !important;

  /* single thin white bottom line */
  border-bottom: 1px solid #ffffff !important;

  padding-top: 4px;
  padding-bottom: 4px;
}

/* countdown text */
body[data-view="games"] #liveScoreboard .scoreboard-refresh-timer {
  color: #ffffff !important;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ticker row container */
body[data-view="games"] #liveScoreboard .scoreboard-live-row {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

/* inner scrolling content that we’ll inject */
body[data-view="games"] #liveScoreboard .scoreboard-live-inner {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-inline: 16px;
}

/* one game in the ticker */
body[data-view="games"] #liveScoreboard .sb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: #ffffff;
}

/* tiny logos in ticker */
body[data-view="games"] #liveScoreboard .sb-team-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* scoreboard “•” separators between games */
body[data-view="games"] #liveScoreboard .sb-dot {
  margin-inline: 10px;
  opacity: 0.6;
}

/* little extra breathing room between nav row and ticker */
body[data-view="games"] .appbar + #liveScoreboard {
  margin-top: 6px;
}

/* === Mobile tweaks === */
@media (max-width: 768px) {
  body[data-view="games"] #liveScoreboard {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  body[data-view="games"] #liveScoreboard .scoreboard-live-inner {
    gap: 16px;
  }

  /* keep nav row + league pills tight with the bar */
  body[data-view="games"] .nav-row {
    margin-bottom: 0;
  }
}

/* ===== TDC 2025-12-09 – props layout + scoreboard fix ===== */

/* 1) Scoreboard: same height on Home + Props */
#liveScoreboard,
.live-scoreboard {
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 2) Props toolbar + actions row share the same columns
      (League ↕ Show/Hide, GO ↕ Cards) */
body[data-view="props"] .toolbar .row-main {
  display: grid !important;
  grid-template-columns:
    minmax(150px, 0.9fr)          /* League  */
    repeat(4, minmax(0, 1fr))     /* Date / Markets / Teams / Players */
    140px;                        /* GO      */
  column-gap: 12px;
  row-gap: 8px;
  align-items: flex-end;
}

body[data-view="props"] .actions-bar {
  display: grid !important;
  grid-template-columns:
    minmax(150px, 0.9fr)  /* Show/Hide (under League) */
    1fr                   /* advanced bar / spacer    */
    140px;                /* TABLE / CARDS (under GO) */
  column-gap: 12px;
  align-items: center;
  margin-top: 8px;
}

body[data-view="props"] .actions-bar .actions-left {
  grid-column: 1;
}

body[data-view="props"] .actions-bar .actions-center {
  grid-column: 2;
}

body[data-view="props"] .actions-bar .actions-right {
  grid-column: 3;
  justify-content: flex-end;
}

/* 3) Advanced filters bar – respect Show/Hide and keep fully clickable */
body[data-view="props"] #advancedBar {
  margin-top: 8px;
}

body[data-view="props"] #advancedBar[hidden] {
  display: none !important;
}

body[data-view="props"] #advancedBar:not([hidden]) {
  display: block !important;
}

body[data-view="props"] #advancedBar:not([hidden]) .row-adv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
  align-items: flex-end;
}

/* 4) Visual active state for "Show advanced filters" button */
#toggleAdvanced.is-active {
  border-width: 2px !important;
  border-color: #5ef3ff !important;
  box-shadow:
    0 0 0 1px rgba(94,243,255,0.85),
    0 0 14px rgba(94,243,255,0.45) !important;
}

/* === TDC HOTFIX 2025-12-09: advanced bar + scoreboard + props toolbar === */

/* SCOREBOARD — same look on Home + Props, white text, clean spacing */
body[data-view] #liveScoreboard.scoreboard-bar {
  display: flex;
  align-items: center;
  padding: 6px 16px 4px;
  min-height: 52px;
  max-height: 52px;
  box-sizing: border-box;
  border-top: none;
  border-bottom: 1px solid #ffffff;
}

/* scoreboard text white */
body[data-view] #liveScoreboard.scoreboard-bar,
body[data-view] #liveScoreboard.scoreboard-bar * {
  color: #fff;
}

/* kill any old top border decoration */
body[data-view] #liveScoreboard::before {
  display: none !important;
}

/* a little breathing room between nav row and ticker */
body[data-view] .nav-row {
  margin-bottom: 4px;
}

/* PROPS – advanced toolbar visibility */
body[data-view="props"] #advancedBar {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

body[data-view="props"].tdc-adv-open #advancedBar {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}

/* make sure pills/buttons are clickable */
body[data-view="props"].tdc-adv-open #advancedBar .pill,
body[data-view="props"].tdc-adv-open #advancedBar button {
  cursor: pointer;
}

/* PROPS – main toolbar alignment (League / Show-Hide / GO / Cards) */
body[data-view="props"] form#filtersForm .row-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-view="props"] form#filtersForm .row-main .field {
  display: flex;
  align-items: center;
}

/* force all controls to the same 22px / 8px spec */
body[data-view="props"] form#filtersForm select,
body[data-view="props"] form#filtersForm input,
body[data-view="props"] form#filtersForm button {
  height: 22px;
  line-height: 22px;
  border-radius: 8px;
}

/* actions bar (GO + Table/Cards) vertical alignment */
body[data-view="props"] .actions-bar .actions-left,
body[data-view="props"] .actions-bar .actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === TDC 2025-12-09: scoreboard + props toolbar tidy === */

/* Scoreboard bar: same on Home + Props, only thin white bottom border */
body[data-view="games"] #liveScoreboard.scoreboard-bar,
body[data-view="props"] #liveScoreboard.scoreboard-bar {
  border-top: 0 !important;
  border-bottom: 1px solid #ffffff !important;
}

/* Ticker / summary text bright white */
#liveScoreboard,
#liveScoreboard .scoreboard-row,
#liveScoreboard .scoreboard-info,
#scoreboardSummary {
  color: #ffffff !important;
}

/* A little extra breathing room between nav row and ticker row */
body[data-view="games"] #liveScoreboard .scoreboard-row,
body[data-view="props"] #liveScoreboard .scoreboard-row {
  padding: 6px 20px 8px !important;
  margin-top: 6px !important;
}

/* Props toolbar: League / Show-Hide / GO / TABLE-CARDS same 22px / 8px */
body[data-view="props"] #filtersForm.toolbar .field select,
body[data-view="props"] #filtersForm.toolbar .field input,
body[data-view="props"] #filtersForm.toolbar .btn,
body[data-view="props"] #actionsBar .btn,
body[data-view="props"] #actionsBar .view-toggle button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Align the three actions-bar groups vertically */
body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-center,
body[data-view="props"] #actionsBar .actions-right {
  display: flex;
  align-items: center;
}

/* Advanced bar: show when body says it's open */
body[data-view="props"].tdc-adv-open #advancedBar {
  display: flex !important;
}

/* === TDC 2025-12-09: force advanced bar visible when open === */
body[data-view="props"].tdc-adv-open #advancedBar.adv-toolbar.is-hidden {
  display: flex !important;
}

/* === TDC 2025-12-09 FINAL: advanced bar + toolbar spacing === */

/* Advanced bar: only [hidden] controls visibility */
body[data-view="props"] #advancedBar {
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body[data-view="props"] #advancedBar[hidden] {
  display: none !important;
}

body[data-view="props"] #advancedBar:not([hidden]) {
  display: flex !important;
}

/* Pills row inside advanced bar */
body[data-view="props"] #advancedBar:not([hidden]) .row-adv {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 12px;
  align-items: center;
}

/* Make fields in the top toolbar share width evenly */
body[data-view="props"] #filtersForm.toolbar > .row-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

body[data-view="props"] #filtersForm.toolbar .field {
  flex: 1 1 0 !important;
  min-width: 0;
}

/* Match control height with pager buttons */
body[data-view="props"] #filtersForm.toolbar select,
body[data-view="props"] #filtersForm.toolbar input,
body[data-view="props"] #filtersForm.toolbar button,
body[data-view="props"] .props-table-footer .pager button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === TDC 2025-12-09: advanced bar horizontal layout === */
body[data-view="props"] #advancedBar {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 8px 24px 4px;
}

body[data-view="props"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 18px !important;
  align-items: center;
}

/* Each advanced pill (Span, Custom span, Vs probable, Starters | Lineups) */
body[data-view="props"] #advancedBar .row-adv > * {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Keep the controls themselves on brand (22px / 8px) */
body[data-view="props"] #advancedBar select,
body[data-view="props"] #advancedBar button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === TDC 2025-12-09: pager strip tidy === */
body[data-view="props"] .props-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 24px 10px;
}

/* Left: "Rows per page" + select */
body[data-view="props"] .props-table-footer > :first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

/* Right: Prev / Page X of Y / Next */
body[data-view="props"] .props-table-footer > :last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

/* Pager select + buttons match app controls */
body[data-view="props"] .props-table-footer select,
body[data-view="props"] .props-table-footer button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === TDC 2025-12-09: advanced bar horizontal + pager tidy === */

/* Advanced bar container: one horizontal row (wrapping if needed) */
body[data-view="props"] #advancedBar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px 24px;
  padding: 8px 24px 4px;
}

/* Each advanced group (Span, Custom span, Vs probable, Starters|Lineups) */
body[data-view="props"] #advancedBar > * {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
}

/* Labels inline, small */
body[data-view="props"] #advancedBar label {
  margin: 0 4px 0 0;
  font-size: 11px;
}

/* Controls match app sizing */
body[data-view="props"] #advancedBar select,
body[data-view="props"] #advancedBar button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Pager strip: rows-per-page + pager inline and on brand */
body[data-view="props"] .props-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 24px 10px;
  font-size: 11px;
  color: #ffffff;
}

/* Left "Rows per page" + select, right "Prev / Page X of Y / Next" */
body[data-view="props"] .props-table-footer > * {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pager controls same size as other controls */
body[data-view="props"] .props-table-footer select,
body[data-view="props"] .props-table-footer button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* === TDC 2025-12-09: adv bar inline pills + pager polish (FINAL) === */

/* Advanced bar: make the 4 filters sit side-by-side as pills */
body[data-view="props"] #advancedBar .row-adv {
  display: block !important;
  text-align: left;
  padding: 4px 0;
}

/* Each advanced filter = inline pill (label + control) */
body[data-view="props"] #advancedBar .row-adv .field {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-right: 18px;
  margin-bottom: 4px;
  width: auto !important;
  flex: 0 0 auto !important;
}

body[data-view="props"] #advancedBar .row-adv .field label {
  margin: 0 4px 0 0;
  font-size: 11px;
}

/* Keep the controls on brand: 22px tall, 8px corners */
body[data-view="props"] #advancedBar .row-adv .field select,
body[data-view="props"] #advancedBar .row-adv .field input {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Pager strip: match the rest of the app */
body[data-view="props"] #pagerWrap .pager {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 6px 24px 10px;
  font-size: 11px;
  color: #ffffff;
}

/* Left: "Rows per page" + input, Right: Prev / Page / Next */
body[data-view="props"] #pagerWrap .pager-left,
body[data-view="props"] #pagerWrap .pager-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-view="props"] #pagerWrap .pager-left label {
  margin-right: 4px;
}

/* Pager controls same 22px / 8px look */
body[data-view="props"] #pagerWrap input#rowsPerPage,
body[data-view="props"] #pagerWrap button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === TDC 2025-12-09: force advanced bar into a single horizontal row === */
body[data-view="props"] #advancedBar .row-adv {
  display: grid !important;
  grid-template-columns: repeat(4, max-content);
  column-gap: 18px;
  row-gap: 4px;
  justify-content: center;
  align-items: end;
}

/* Each pill group (Span / Custom / Vs probable / Starters) */
body[data-view="props"] #advancedBar .row-adv .field {
  width: auto !important;
  max-width: none !important;
}

/* Keep labels + controls tight and on-brand */
body[data-view="props"] #advancedBar .row-adv .field label {
  margin: 0 0 2px 0;
  font-size: 11px;
}

body[data-view="props"] #advancedBar .row-adv .field select,
body[data-view="props"] #advancedBar .row-adv .field input {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* === TDC 2025-12-09: final props layout hammer === */

/* 1) Advanced bar – one horizontal row of pill groups */
body[data-view="props"] #advancedBar {
  padding: 8px 24px 6px;
}

/* Direct child (usually the row wrapper) becomes the flex row */
body[data-view="props"] #advancedBar > * {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 18px;
}

/* Each advanced group (Span, Custom span, Vs probable, Starters | Lineups) */
body[data-view="props"] #advancedBar .field {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Label small and tight above the control */
body[data-view="props"] #advancedBar .field label {
  margin: 0 0 2px 0;
  font-size: 11px;
}

/* Controls on-brand */
body[data-view="props"] #advancedBar .field select,
body[data-view="props"] #advancedBar .field input {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Main toolbar + actions bar – uniform height & alignment */

/* Make main toolbar row + actions row share alignment */
body[data-view="props"] #filtersForm.toolbar .row-main,
body[data-view="props"] #actionsBar.actions-bar {
  display: flex;
  align-items: center !important;
}

/* Fields across the top toolbar share space evenly */
body[data-view="props"] #filtersForm.toolbar .row-main > .field {
  flex: 1 1 0 !important;
  min-width: 0;
}

/* Buttons in actions bar (Show/Hide, GO, TABLE, CARDS) same size as filters */
body[data-view="props"] #actionsBar .btn,
body[data-view="props"] #actionsBar .view-toggle button,
body[data-view="props"] #filtersForm.toolbar select,
body[data-view="props"] #filtersForm.toolbar input {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 11px;
}

/* === TDC 2025-12-09: adv bar flatten + table font === */

/* Make #advancedBar a flex row that wraps */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 18px;
  padding: 8px 24px 6px;
}

/* FLATTEN the inner wrapper so its children behave as direct flex items */
body[data-view="props"] #advancedBar .row-adv {
  display: contents !important;
}

/* Each advanced filter group (Span, Custom span, Vs probable, Starters) */
body[data-view="props"] #advancedBar .row-adv > * {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}

/* Label tight above control */
body[data-view="props"] #advancedBar .row-adv > * label {
  margin: 0 0 2px 0;
  font-size: 11px;
}

/* Controls on-brand */
body[data-view="props"] #advancedBar .row-adv > * select,
body[data-view="props"] #advancedBar .row-adv > * input {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Top toolbar + actions bar: same control height */
body[data-view="props"] #filtersForm.toolbar select,
body[data-view="props"] #filtersForm.toolbar input,
body[data-view="props"] #filtersForm.toolbar .btn,
body[data-view="props"] #actionsBar .btn,
body[data-view="props"] #actionsBar .view-toggle button {
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  border-radius: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 11px;
}

/* Tighten table body font */
body[data-view="props"] #mainTable tbody td,
body[data-view="props"] #mainTable tbody th {
  font-size: 11px;
  line-height: 1.3;
}
/* === TDC 2025-12-09: props table font tighten === */

body[data-view="props"] .props-table {
  font-size: 11px !important;
}

body[data-view="props"] .props-table tbody td,
body[data-view="props"] .props-table tbody th {
  font-size: 11px !important;
  line-height: 1.3;
}
/* === TDC 2025-12-09: adv bar theme + GO polish === */

/* Advanced filters bar: blue theme border + toned background */
body[data-view="props"] #advancedBar.adv-toolbar {
  background: rgba(3, 7, 18, 0.95);             /* deep slate instead of bright white */
  border-radius: 12px;
  border: 1px solid rgba(7, 232, 255, 0.8);     /* same blue theme */
  box-shadow: 0 0 18px rgba(7, 232, 255, 0.35);
  padding: 8px 24px 10px;
  margin-top: 8px;
}

/* Advanced pills: darker inputs to knock down the white */
body[data-view="props"] #advancedBar .field select,
body[data-view="props"] #advancedBar .field input {
  background: rgba(15, 23, 42, 1);
  color: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.9);
}

/* GO button – same color, softer glow, ready for loading state */
body[data-view="props"] #filtersForm button[type="submit"] {
  background: rgba(0, 255, 120, 0.10) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(0, 255, 120, 0.30) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Hover: a bit brighter, still not blinding */
body[data-view="props"] #filtersForm button[type="submit"]:hover {
  background: rgba(0, 255, 120, 0.22) !important;
  box-shadow: 0 0 12px rgba(0, 255, 120, 0.40) !important;
}

/* Loading state for GO */
body[data-view="props"] #filtersForm button[type="submit"].is-loading {
  background: rgba(0, 255, 120, 0.06) !important;
  box-shadow: 0 0 6px rgba(0, 255, 120, 0.25) !important;
  cursor: default;
}

/* Tiny spinner next to GO text when loading */
body[data-view="props"] #filtersForm button[type="submit"].is-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: transparent;
  display: inline-block;
  animation: tdc-go-spin 0.6s linear infinite;
}

/* Spinner animation */
@keyframes tdc-go-spin {
  to { transform: rotate(360deg); }
}
/* === TDC 2025-12-09: final adv-bar visibility controlled by body flag === */
body[data-view="props"] #advancedBar {
  display: none !important;
}

body[data-view="props"][data-adv-open="1"] #advancedBar {
  display: flex !important;
}
/* === TDC 2025-12-09: props adv toggle + layout + softer GO === */

/* Show/Hide advanced filters button: no all-caps, blue text */
body[data-view="props"] #toggleAdvanced {
  text-transform: none !important;
  color: #0fe8ff !important;        /* blue theme */
  font-weight: 500;
}

body[data-view="props"] #toggleAdvanced:hover,
body[data-view="props"] #toggleAdvanced.is-active {
  color: #0fe8ff !important;
}

/* Advanced filters pills: keep them in a horizontal row */
body[data-view="props"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 24px;
}

/* Each pill group sits as its own column, not full-width */
body[data-view="props"] #advancedBar .row-adv .field {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* GO button: softer green fill + glow */
body[data-view="props"] #filtersForm button[type="submit"] {
  background: rgba(0, 255, 120, 0.08) !important;
  box-shadow: 0 0 6px rgba(0, 255, 120, 0.25) !important;
}

body[data-view="props"] #filtersForm button[type="submit"]:hover {
  background: rgba(0, 255, 120, 0.16) !important;
  box-shadow: 0 0 10px rgba(0, 255, 120, 0.35) !important;
}
/* === TDC 2025-12-09: props adv toggle + layout + GO polish (FINAL) === */

/* A) Show/Hide advanced filters button: normal case, blue text */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  color: #0fe8ff !important;           /* blue theme */
  font-weight: 500;
}

/* Keep it blue when active/hovered */
body[data-view="props"] #actionsBar #toggleAdvanced.is-active,
body[data-view="props"] #actionsBar #toggleAdvanced:hover {
  color: #0fe8ff !important;
}

/* B) Advanced bar visibility – respect body[data-adv-open] */
/* Hide ONLY when body does NOT have data-adv-open="1" */
body[data-view="props"]:not([data-adv-open="1"]) #advancedBar.adv-toolbar.is-hidden,
body[data-view="props"]:not([data-adv-open="1"]) #advancedBar.adv-toolbar.tdc-is-hidden {
  display: none !important;
}

/* When data-adv-open="1", always show the bar, even if .is-hidden is still present */
body[data-view="props"][data-adv-open="1"] #advancedBar {
  display: flex !important;
}

/* C) Advanced pills horizontal when bar is open */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 24px;
}

body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv .field {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* D) GO button – soften the green fill / glow (override .btn-go rule) */
body[data-view="props"] #filtersForm.toolbar .row-main .field-go #goBtn.btn-go {
  background: rgba(0, 255, 120, 0.12) !important;
  box-shadow: 0 0 6px rgba(0, 255, 120, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body[data-view="props"] #filtersForm.toolbar .row-main .field-go #goBtn.btn-go:hover {
  background: rgba(0, 255, 120, 0.20) !important;
  box-shadow: 0 0 10px rgba(0, 255, 120, 0.35) !important;
}
/* === TDC 2025-12-09: toggle colors (Show vs Hide) === */

/* Base state = SHOW (closed) */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  color: rgba(15, 232, 255, 0.7) !important; /* slightly darker blue */
  font-weight: 500;
}

/* HIDE (open) state: button has .is-active */
body[data-view="props"] #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;                 /* full white */
}
/* === TDC 2025-12-09: adv toggle colors + visibility override === */

/* Base state (SHOW) – slightly darker blue */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  color: rgba(15, 232, 255, 0.7) !important; /* darker blue */
  font-weight: 500;
}

/* HIDE state – when button has .is-active make it white */
body[data-view="props"] #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;
}

/* If body says adv is open, bar MUST be visible (even with is-hidden classes) */
body[data-view="props"][data-adv-open="1"] #advancedBar.adv-toolbar.is-hidden,
body[data-view="props"][data-adv-open="1"] #advancedBar.adv-toolbar.tdc-is-hidden,
body[data-view="props"][data-adv-open="1"] #advancedBar {
  display: flex !important;
}

/* Keep pills horizontal when open */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 24px;
}

body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv .field {
  flex: 0 0 auto !important;
  width: auto !important;
}
/* === TDC 2025-12-09: adv toggle, visibility, GO brightness (hard override) === */

/* Base toggle styling */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  font-weight: 500;
}

/* SHOW state (closed) – slightly darker blue */
body[data-view="props"]:not([data-adv-open="1"]) #actionsBar #toggleAdvanced {
  color: rgba(15, 232, 255, 0.7) !important;
}

/* HIDE state (open) – white */
body[data-view="props"][data-adv-open="1"] #actionsBar #toggleAdvanced {
  color: #ffffff !important;
}

/* Visibility: ONLY data-adv-open controls the bar now */
/* Closed = hide */
body[data-view="props"]:not([data-adv-open="1"]) #advancedBar {
  display: none !important;
}

/* Open = show, even if old classes say is-hidden */
body[data-view="props"][data-adv-open="1"] #advancedBar,
body[data-view="props"][data-adv-open="1"] #advancedBar.adv-toolbar.is-hidden,
body[data-view="props"][data-adv-open="1"] #advancedBar.tdc-is-hidden {
  display: flex !important;
}

/* Keep pills horizontal when open */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px 24px;
}

body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv .field {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* GO button – brighten back up a bit */
body[data-view="props"] #filtersForm .field-go #goBtn.btn-go {
  background: rgba(0, 255, 120, 0.35) !important;
  box-shadow: 0 0 8px rgba(0, 255, 120, 0.35) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body[data-view="props"] #filtersForm .field-go #goBtn.btn-go:hover {
  background: rgba(0, 255, 120, 0.45) !important;
  box-shadow: 0 0 12px rgba(0, 255, 120, 0.45) !important;
}

/* === TDC 2025-12-09 – final advanced toggle + GO tuning === */

/* Base Show/Hide label: not all caps, blue theme text */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  font-weight: 500 !important;
  color: rgba(5, 182, 255, 0.85) !important; /* "Show advanced filters" */
}

/* When active ("Hide advanced filters"): keep text white */
body[data-view="props"] #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;
}

/* GO button – brighten back up a bit (between neon + dark) */
body[data-view="props"] #filtersForm .row-main .field-go .btn-go {
  background: #00e06f !important;                 /* softer neon green */
  border-color: #ffffff !important;
  color: #000000 !important;                      /* readable on the green */
  box-shadow: 0 0 12px rgba(0, 224, 111, 0.45) !important;
}

/* Safety: keep advanced pills row horizontal whenever it is shown */
body[data-view="props"] #advancedBar.adv-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

body[data-view="props"] #advancedBar.adv-toolbar .field {
  display: flex !important;
  flex-direction: column !important;
  min-width: 140px;
}


/* === TDC 2025-12-09 – FINAL props advanced + GO overrides === */

/* Advanced bar: only show when data-adv-open="1", and keep it horizontal */
body[data-view="props"][data-adv-open="1"] main.layout #advancedBar.adv-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

body[data-view="props"]:not([data-adv-open="1"]) main.layout #advancedBar.adv-toolbar {
  display: none !important;
}

/* Make sure the inner fields sit side-by-side (and wrap nicely on smaller screens) */
body[data-view="props"] main.layout #advancedBar.adv-toolbar .field {
  flex: 0 1 150px;
}

/* Show/Hide label colors (higher specificity than older rules) */
body[data-view="props"] main.layout #actionsBar #toggleAdvanced {
  text-transform: none !important;
  font-weight: 500 !important;
  color: rgba(56, 189, 248, 0.85) !important;  /* SHOW = slightly darker blue */
}

/* Active = HIDE, keep white */
body[data-view="props"] main.layout #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;
}

/* GO button – brighten vs current dark look (same selector but more specific) */
body[data-view="props"] main.layout #filtersForm.toolbar .row-main .field-go #goBtn.btn-go {
  background: rgba(16, 185, 129, 0.30) !important;   /* a bit lighter than now */
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Slight lift on hover */
body[data-view="props"] main.layout #filtersForm.toolbar .row-main .field-go #goBtn.btn-go:hover {
  background: rgba(34, 197, 94, 0.45) !important;
}

/* === TDC 2025-12-09: GO + advanced filters polish === */

/* GO button – a bit brighter but not nuclear */
body[data-view="props"] main.layout #filtersForm.toolbar .row-main .field-go #goBtn.btn-go {
  background: rgba(16, 185, 129, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 180, 0.9),
    0 10px 26px rgba(0, 255, 180, 0.55) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Advanced filters bar – driven ONLY by data-adv-open */
body[data-view="props"] #advancedBar {
  display: none !important;
}

/* When open, bar is visible + horizontal */
body[data-view="props"][data-adv-open="1"] #advancedBar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Row inside advanced bar stays horizontal, wraps on small screens */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Individual fields behave like compact pills */
body[data-view="props"][data-adv-open="1"] #advancedBar .field {
  flex: 0 1 auto;
}

/* Extra safety: make sure inputs/selects are visible on the dark panel */
body[data-view="props"][data-adv-open="1"] #advancedBar .field input,
body[data-view="props"][data-adv-open="1"] #advancedBar .field select {
  background: #05070f;
  border-color: rgba(132, 192, 255, 0.75);
  color: #ffffff;
}


/* === TDC PROPZ – Props GO button + advanced bar final tune (2025-12-09) === */

/* GO: toned neon green, no glow */
body[data-view="props"] main.layout #filtersForm.toolbar .row-main .field-go #goBtn.btn-go,
body[data-view="props"] #filtersForm .field-go #goBtn.btn-go {
  background: #13c96a !important;        /* toned neon green */
  border-color: #7dffc1 !important;      /* softer neon border */
  box-shadow: none !important;           /* kill the glow */
  color: #ffffff !important;
}

/* Advanced bar container visuals (dark panel, blue edge) */
body[data-view="props"] #advancedBar.adv-toolbar {
  background: #020812 !important;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.40);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.40);
  padding: 16px 32px;
  max-width: 1120px;
  margin: 0 auto 8px auto;
}

/* Layout when advanced filters are open */
body[data-view="props"][data-adv-open="1"] #advancedBar.adv-toolbar {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Keep the inner fields horizontal and tidy */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv,
body[data-view="props"][data-adv-open="1"] #advancedBar .row-main {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 18px;
  width: 100%;
  justify-content: center;
}

body[data-view="props"][data-adv-open="1"] #advancedBar .field {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}

/* === TDC FIX: Props advanced row layout v3 (2025-12-09) === */

/* Turn the advanced bar into a centered flex row */
body[data-view="props"][data-adv-open="1"] #advancedBar.adv-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 24px !important;
}

/* Make the inner row horizontal */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Labels + fields inline, no 100% width */
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv > .label,
body[data-view="props"][data-adv-open="1"] #advancedBar .row-adv > .field {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Label styling: no caps, blue theme */
body[data-view="props"] #advancedBar .label {
  margin: 0 4px 0 0 !important;
  text-transform: none !important;
  color: var(--tdc-blue, #21d4ff) !important;
  font-weight: 500 !important;
}

/* Small spacing on fields */
body[data-view="props"] #advancedBar .field {
  margin-right: 12px !important;
}

/* Match control height to main toolbar */
body[data-view="props"] #advancedBar select,
body[data-view="props"] #advancedBar input {
  height: var(--tdc-control-height, 22px) !important;
  min-height: var(--tdc-control-height, 22px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* === TDC PROPZ: FINAL props advanced filters bar fix (2025-12-09 v3) === */

/* 1) Ignore old is-hidden / hidden logic and key purely off data-adv-open */
body[data-view="props"][data-adv-open="1"] #advancedBar {
  display: flex !important;
}

body[data-view="props"][data-adv-open="0"] #advancedBar {
  display: none !important;
}

/* 2) Advanced bar container */
body[data-view="props"] #advancedBar.adv-toolbar {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  margin: 10px auto 0;
  padding: 12px 32px !important;
  background: rgba(2, 10, 24, 0.96);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0, 190, 255, 0.45);
}

/* 3) Row inside the advanced bar */
body[data-view="props"] #advancedBar .row-adv {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 24px;
}

/* 4) Individual fields */
body[data-view="props"] #advancedBar .row-adv .field {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Labels */
body[data-view="props"] #advancedBar .row-adv .field label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(173, 214, 255, 0.9);
  margin-bottom: 2px;
}

/* Inputs / selects in advanced bar */
body[data-view="props"] #advancedBar .row-adv .field select,
body[data-view="props"] #advancedBar .row-adv .field input {
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 8px !important;
  padding: 0 8px !important;
}


/* === TDC FIX: Advanced filters v5 (2025-12-09) ======================= */
body[data-view="props"] #advancedBar.adv-toolbar {
  background: radial-gradient(circle at top,
    rgba(0, 200, 255, 0.12),
    rgba(0, 0, 0, 0.95)
  );
  border: 1px solid rgba(0, 224, 255, 0.40);
  border-radius: 12px;
  padding: 18px 28px 20px;
  margin-top: 10px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* When hidden via toggle */
body[data-view="props"] #advancedBar.adv-toolbar.is-hidden {
  display: none !important;
}

/* Inner layout */
body[data-view="props"] #advancedBar.adv-toolbar .tdc-adv-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}

/* Each advanced field */
body[data-view="props"] #advancedBar.adv-toolbar .tdc-adv-field {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

/* Labels */
body[data-view="props"] #advancedBar.adv-toolbar .tdc-adv-field label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(200, 220, 255, 0.85);
  margin-bottom: 4px;
}

/* Inputs/selects */
body[data-view="props"] #advancedBar.adv-toolbar .tdc-adv-field .tdc-adv-input {
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(0, 224, 255, 0.35);
  background: rgba(4, 16, 28, 0.95);
  color: #ffffff;
  padding: 0 8px;
  font-size: 12px;
}

/* Number input spinner tweaks (WebKit) */
body[data-view="props"] #advancedBar.adv-toolbar .tdc-adv-field .tdc-adv-input[type="number"]::-webkit-inner-spin-button,
body[data-view="props"] #advancedBar.adv-toolbar .tdc-adv-field .tdc-adv-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* === TDC ADV BAR CONTENT v7 (2025-12-09) ========================= */
body[data-view="props"] #advancedBar.tdc-adv-v7 {
  background: radial-gradient(circle at top,
    rgba(0, 220, 255, 0.12),
    rgba(0, 0, 0, 0.96)
  );
  border: 1px solid rgba(0, 224, 255, 0.45);
  border-radius: 12px;
  padding: 18px 28px 20px;
  margin-top: 10px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

body[data-view="props"] #advancedBar.tdc-adv-v7 .tdc-adv-v7-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px 18px;
  width: 100%;
}

body[data-view="props"] #advancedBar.tdc-adv-v7 .tdc-adv-v7-field {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

body[data-view="props"] #advancedBar.tdc-adv-v7 .tdc-adv-v7-field label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(200, 220, 255, 0.86);
  margin-bottom: 4px;
}

body[data-view="props"] #advancedBar.tdc-adv-v7 .tdc-adv-v7-input {
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(0, 224, 255, 0.35);
  background: rgba(4, 16, 28, 0.95);
  color: #ffffff;
  padding: 0 8px;
  font-size: 12px;
}

/* WebKit number spinner tweak */
body[data-view="props"] #advancedBar.tdc-adv-v7 .tdc-adv-v7-input[type="number"]::-webkit-inner-spin-button,
body[data-view="props"] #advancedBar.tdc-adv-v7 .tdc-adv-v7-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* === TDC ADVANCED FILTERS PANEL v8 (2025-12-09) ================== */

/* Show/hide based on data-adv-open on body */
body[data-view="props"][data-adv-open="0"] #actionsBar .tdc-adv-panel {
  display: none !important;
}

body[data-view="props"][data-adv-open="1"] #actionsBar .tdc-adv-panel {
  display: flex !important;
}

body[data-view="props"] #actionsBar .tdc-adv-panel {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px 18px;
  width: 100%;
  max-width: 1120px;
  margin: 10px auto 0;
  padding: 16px 24px 18px;
  border-radius: 12px;
  background: radial-gradient(circle at top,
    rgba(0, 210, 255, 0.12),
    rgba(0, 0, 0, 0.96)
  );
  border: 1px solid rgba(0, 224, 255, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}

/* Field blocks inside the panel */
body[data-view="props"] #actionsBar .tdc-adv-field {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

body[data-view="props"] #actionsBar .tdc-adv-field label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.04em;
  color: rgba(200, 220, 255, 0.86);
  margin-bottom: 4px;
}

/* Inputs/selects inside panel */
body[data-view="props"] #actionsBar .tdc-adv-input {
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(0, 224, 255, 0.35);
  background: rgba(4, 16, 28, 0.95);
  color: #ffffff;
  padding: 0 8px;
  font-size: 12px;
}

/* Make the toggle label mixed case + blue theme */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  color: rgba(0, 200, 255, 0.9) !important;
}

/* Active state a bit brighter */
body[data-view="props"] #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;
}

body[data-view="props"][data-adv-open="0"] #actionsBar .tdc-adv-panel {
  display: none !important;
}
body[data-view="props"][data-adv-open="1"] #actionsBar .tdc-adv-panel {
  display: flex !important;
}
body[data-view="props"] #actionsBar .tdc-adv-panel {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px 18px;
  width: 100%;
  max-width: 1120px;
  margin: 10px auto 0;
  padding: 16px 24px 18px;
  border-radius: 12px;
  background: radial-gradient(circle at top,
    rgba(0, 210, 255, 0.12),
    rgba(0, 0, 0, 0.96)
  );
  border: 1px solid rgba(0, 224, 255, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}
body[data-view="props"] #actionsBar .tdc-adv-field {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}
body[data-view="props"] #actionsBar .tdc-adv-field label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.04em;
  color: rgba(200, 220, 255, 0.86);
  margin-bottom: 4px;
}
body[data-view="props"] #actionsBar .tdc-adv-input {
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(0, 224, 255, 0.35);
  background: rgba(4, 16, 28, 0.95);
  color: #ffffff;
  padding: 0 8px;
  font-size: 12px;
}
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;
  color: rgba(0, 200, 255, 0.9) !important;
}
body[data-view="props"] #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;
}

/* === TDC ADV PANEL COMPACT TUNING (2025-12-09) === */
body[data-view="props"] #actionsBar .tdc-adv-panel {
  padding: 12px 22px 14px !important;
  gap: 12px 18px !important;
  max-width: 1080px !important;
}

/* slightly smaller label / inputs for a cleaner row */
body[data-view="props"] #actionsBar .tdc-adv-field label {
  font-size: 10px !important;
  margin-bottom: 3px !important;
}
body[data-view="props"] #actionsBar .tdc-adv-input {
  height: 22px !important;
  font-size: 12px !important;
}

/* === TDC ADV TOGGLE COLORS (2025-12-09) === */
body[data-view="props"] #actionsBar #toggleAdvanced {
  text-transform: none !important;               /* no ALL CAPS */
  color: rgba(0, 190, 255, 0.85) !important;     /* blue theme when "Show" */
}

/* when active (Hide advanced filters) make text white */
body[data-view="props"] #actionsBar #toggleAdvanced.is-active {
  color: #ffffff !important;
}
/* === TDC FIX: props advanced filters layout polish (2025-12-09 v3) === */

/* Keep the actions bar hugging the top; adv panel lives under the toggle row */
body[data-view="props"] #actionsBar.actions-bar {
  align-items: flex-start !important;
}

/* OPEN: show the panel as a single centered row */
body[data-view="props"][data-adv-open="1"] #tdcAdvPanel.tdc-adv-panel {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}

/* CLOSED: completely hide the panel, no empty blue slab */
body[data-view="props"][data-adv-open="0"] #tdcAdvPanel.tdc-adv-panel {
  display: none !important;
}

/* Field sizing so they don’t stretch weirdly */
body[data-view="props"] #tdcAdvPanel .tdc-adv-field {
  flex: 0 0 auto;
  min-width: 180px;
}

/* Label polish (already mostly good, just locking it in) */
body[data-view="props"] #tdcAdvPanel .tdc-adv-label {
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* === TDC ADV PANEL BORDER OVERRIDE (2025-12-09) === */
body[data-view="props"] #tdcAdvPanel,
body[data-view="props"] #advancedBar .tdc-adv-panel {
  border: 1px solid #ffffff !important;
}


/* === TDC PROPZ • Props actions bar alignment (2025-12-09) === */

/* Make the actions bar one clean horizontal row */
body[data-view="props"] #actionsBar.actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

/* Left / center / right chunks participate in that row */
body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-center,
body[data-view="props"] #actionsBar .actions-right {
  display: flex !important;
  align-items: center !important;
}

/* Center (advanced filters) stretches, left/right hug content */
body[data-view="props"] #actionsBar .actions-left {
  flex: 0 0 auto !important;
}

body[data-view="props"] #actionsBar .actions-center {
  flex: 1 1 auto !important;
}

body[data-view="props"] #actionsBar .actions-right {
  flex: 0 0 auto !important;
}

/* Advanced filters panel: sit on the same line, no extra offset */
body[data-view="props"] #advancedBar {
  width: 100% !important;
  margin: 0 !important;
}

/* TABLE / CARDS group: remove any stray vertical offset */
body[data-view="props"] #viewToggle {
  margin: 0 !important;
}


/* === TDC PROPZ – props actions bar spacing tidy (2025-12-09) === */

/* Tighten vertical spacing + gaps on the Show/Hide + ADV + TABLE/CARDS row */
body[data-view="props"] #actionsBar.actions-bar {
  margin-top: 4px !important;      /* was taller */
  margin-bottom: 6px !important;
  gap: 10px !important;            /* space between left / center / right */
}

/* Make sure the three zones hug the center cleanly */
body[data-view="props"] #actionsBar.actions-bar .actions-left,
body[data-view="props"] #actionsBar.actions-bar .actions-center,
body[data-view="props"] #actionsBar.actions-bar .actions-right {
  align-items: center !important;
}

/* Advanced panel: less top/bottom air + tighter internal gaps */
body[data-view="props"] #tdcAdvPanel.tdc-adv-panel {
  padding: 8px 20px !important;    /* slimmer than before */
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

/* Space between the individual advanced fields */
body[data-view="props"] #tdcAdvPanel.tdc-adv-panel .tdc-adv-row {
  gap: 10px !important;            /* was wider */
}

/* Label / control stack inside each advanced field */
body[data-view="props"] #tdcAdvPanel.tdc-adv-panel .tdc-adv-field label {
  margin-bottom: 2px !important;
}

/* === TDC PROPZ – props toolbar spacing compress v3 (2025-12-09) === */

/* Tighten space between scoreboard and main filters row */
body[data-view="props"] #filtersForm.toolbar {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

/* Main filters row: no extra padding below */
body[data-view="props"] #row-main,
body[data-view="props"] #row-main.row-main {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Actions bar row: reduce top/bottom space + internal gap */
body[data-view="props"] #actionsBar.actions-bar {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 8px !important;              /* less space between left / center / right */
}

/* Left (Show/Hide), center (adv panel), right (TABLE/CARDS) wrappers */
body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-center,
body[data-view="props"] #actionsBar .actions-right {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* Advanced panel card: pull it closer and shrink vertical padding */
body[data-view="props"] #tdcAdvPanel {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Tighten gap between advanced panel and the table header */
body[data-view="props"] .table-wrap,
body[data-view="props"] .tableWrap {
  margin-top: 4px !important;
}

/* === TDC: tighten props actions bar vertical spacing (2025-12-09 v2) === */

/* Kill extra padding/margins on the whole row */
body[data-view="props"] #actionsBar.actions-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* Make the three segments hug the buttons with no extra vertical margin */
body[data-view="props"] #actionsBar.actions-bar > .actions-left,
body[data-view="props"] #actionsBar.actions-bar > .actions-center,
body[data-view="props"] #actionsBar.actions-bar > .actions-right {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Slightly tighten the gap between the actions bar and the table header */
body[data-view="props"] #actionsBar.actions-bar + #tableWrap,
body[data-view="props"] #actionsBar.actions-bar + .table-wrap {
  margin-top: 4px !important;
}


/* === TDC PROPZ – props actions bar tight layout (2025-12-09 v4) === */

/* Main actions bar: no extra vertical padding, compact, centered */
body[data-view="props"] #actionsBar.actions-bar {
  display: flex !important;
  align-items: center !important;      /* vertically center Show/Hide + TABLE/CARDS */
  justify-content: space-between !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: var(--tdc-control-height) !important;
  gap: 16px !important;
}

/* Three columns: left = Show/Hide, center = adv panel, right = TABLE/CARDS */
body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-center,
body[data-view="props"] #actionsBar .actions-right {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-right {
  flex: 0 0 auto !important;
}

body[data-view="props"] #actionsBar .actions-center {
  flex: 1 1 auto !important;
  justify-content: center !important;
}

/* Advanced panel box itself – slimmer + centered under the filter row */
body[data-view="props"][data-adv-open="1"] #tdcAdvPanel {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto !important;
  padding: 6px 16px 8px 16px !important;   /* trims top/bottom */
}

/* Keep advanced fields in a single tight row with small gaps */
body[data-view="props"][data-adv-open="1"] #tdcAdvPanel .tdc-adv-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Less space below the actions bar before the table header */
body[data-view="props"] .game-section #actionsBar.actions-bar + #tableWrap,
body[data-view="props"] .game-section #actionsBar.actions-bar + .tableWrap {
  margin-top: 4px !important;
}

/* Less space between the top filter toolbar and the actions bar */
body[data-view="props"] #filtersForm.toolbar,
body[data-view="props"] #filtersForm .toolbar {
  margin-bottom: 4px !important;
}

/* === TDC PROPZ: Props toolbar + advanced spacing hard clamp (2025-12-09 v4) === */

/* 1) Main actions bar row (Show/Hide / Table / Cards) */
body[data-view="props"] #actionsBar.actions-bar {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Left / center / right zones: keep tight and centered */
body[data-view="props"] #actionsBar .actions-left,
body[data-view="props"] #actionsBar .actions-center,
body[data-view="props"] #actionsBar .actions-right {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Thin advanced toolbar strip directly under the main row */
body[data-view="props"][data-adv-open="1"] #advancedBar.adv-toolbar {
  margin-top: 4px !important;   /* tiny gap under Show / Table / Cards */
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Advanced pill panel (big rounded box with Span / Vs / Starters) */
body[data-view="props"][data-adv-open="1"] #tdcAdvPanel.tdc-adv-panel {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;

  /* squeeze it vertically */
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Inner rows inside the panel should also be tight */
body[data-view="props"][data-adv-open="1"] #tdcAdvPanel .tdc-adv-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}