/* Import table view styles */
@import url('workbench-table.css');

/* ==========================================================================
   1. VARIABLES & BASE UTILITIES
   ========================================================================== */
:root {
  /* Page + Brand */
  --bg-0: #0a1628;
  --brand-teal: #00D3BD;
  --brand-teal-bright: #00F5D4;
  --brand-teal-dark: #00AD84;
  --accent-rgb: 0, 211, 189; /* #00D3BD */

  /* Surface Alphas (Cards vs Footer) */
  --panel-card: .012;
  --panel-card-hover: .028;
  --panel-footer: .024;
  --panel-footer-hover: .040;

  /* Glass Tokens */
  --line: rgba(255, 255, 255, .10);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-glow: 0 4px 20px rgba(0,211,189,0.12), 0 8px 32px rgba(0,0,0,0.25);
  --inset: 0 1px 0 rgba(255, 255, 255, .05) inset;
  --blur: 12px;
  --radius: 18px;
  --text: #e9f6f3;

  /* Gradient tokens */
  --gradient-primary: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(0,211,189,0.12) 0%, rgba(0,173,132,0.04) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-border: linear-gradient(135deg, rgba(0,245,212,0.3) 0%, rgba(0,211,189,0.15) 50%, rgba(0,173,132,0.1) 100%);

  /* State Colors */
  --danger: #D30000;
  --danger-bg: rgba(211, 0, 0, .12);
}

/* Hide scrollbar for Chrome/Safari/Opera */
::-webkit-scrollbar {
  display: none;
}

/* Base Button Style */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #1d3540;
  background: transparent;
  color: #bfe9e1;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .2s, filter .15s, transform .03s, border-color .15s;
}

/* ==========================================================================
   2. WORKBENCH LAYOUT (Columns & Containers)
   ========================================================================== */
#workbench-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

#workbench-columns {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 12px;
  align-items: start;
  padding: 0;
  margin: 0 auto;
}

/* Glass panels should fill their grid cells */
#workbench-columns > .glass-panel {
  width: 100%;
  max-width: none;
}

#your-parlay-column,
#suggested-legs-column {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

#suggested-legs-column {
  min-height: 800px;
  /* Divide by the workbench zoom (set on #workbench-section by workbenchScaleMLB.js,
     inherited here) so the vh-based cap fills the real viewport. CSS `zoom` scales
     `vh` down, so a plain calc(100vh - 120px) rendered ~zoom× short and left dead
     space at the bottom. var falls back to 1 when zoom is off (mobile / NBA / NFL). */
  max-height: calc((100vh - 120px) / var(--pb-wb-zoom, 1));
  padding: 20px;
  overflow-y: auto;
}

/* Building section - sticky sidebar */
#your-parlay-column {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
}

/* ==========================================================================
   FILTER SECTION (Mode Toggle + Game/Market Filters)
   ========================================================================== */
.props-filter-section {
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-align: center;
}

.filter-mode-toggle {
  display: inline-flex;
  position: relative;
  margin-bottom: 6px;
  background: rgba(0, 211, 189, 0.02);
  border: 1px solid rgba(0, 211, 189, 0.2);
  border-radius: 10px;
  padding: 0px;
  gap: 0;
}

.filter-mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(0, 211, 189, 0.7);
  border-radius: 7px;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 53px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex: 1;
  white-space: nowrap;
}

.filter-mode-btn:hover {
  color: #00F5D4;
}

.filter-mode-btn.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  font-weight: 700;
  border-radius: 16px;
}

/* MLB hides Position + Hit Rate from the mobile card filter strip — neither
   maps to MLB props (no positional split, no L5/H2H card data path). */
body.is-mlb-route .filter-mode-toggle .filter-mode-btn[data-mode="position"],
body.is-mlb-route .filter-mode-toggle .filter-mode-btn[data-mode="hitrate"] {
  display: none !important;
}

/* MLB hides the parlay container's "Customize" button entirely — the
   build-modal customization is NBA/NFL-specific (uses the build-state
   manager that MLB doesn't wire into; see syncGameChipsToBuild). The
   filter-container's inline `display: none` flips to visible when the
   parlay has legs; this rule overrides that flip so the button stays
   hidden in both empty and populated parlay states. */
body.is-mlb-route #mlb-filter-trigger,
body.is-mlb-route .filter-container:has(#mlb-filter-trigger) {
  display: none !important;
}

/* By Rate / By Form are MLB-only — they read per-prop-type fields from
   tableViewMLB column configs that don't exist for NBA/NFL. Hide them on
   non-MLB so the strip stays sport-appropriate. Inverse of the rule above. */
.filter-mode-toggle .filter-mode-btn.mlb-only { display: none; }
body.is-mlb-route .filter-mode-toggle .filter-mode-btn.mlb-only { display: inline-flex; }

/* ==========================================================================
   FILTER TOGGLE WRAPPER (for In Parlay + main toggle)
   ========================================================================== */
.filter-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.filter-toggle-wrapper .filter-mode-toggle {
  margin-bottom: 0; /* Remove margin since wrapper handles it */
}

/* ==========================================================================
   IN PARLAY FILTER (Wide screens only)
   ========================================================================== */
.in-parlay-filter {
  display: none; /* Hidden on mobile */
  align-items: center;
  justify-content: center;
  background: rgba(0, 211, 189, 0.15);
  border: 1px solid rgba(0, 211, 189, 0.3);
  color: #00D3BD;
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.in-parlay-filter:hover {
  background: rgba(0, 211, 189, 0.25);
  color: #00F5D4;
}

.in-parlay-filter.active {
  background: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%);
  border-color: #00D3BD;
  color: #0a1628;
  font-weight: 700;
}

/* Always show on wide screens */
@media (min-width: 1001px) {
  .in-parlay-filter {
    display: inline-flex;
  }
}

/* ==========================================================================
   RESET FILTERS BUTTON
   ========================================================================== */

/* ==========================================================================
   GAME FILTER
   ========================================================================== */
.props-game-filter {
  margin: 0;
  overflow: hidden; /* Clip content to prevent layout expansion */
}

.game-filter-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.game-filter-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.game-filter-chips {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding-bottom: 8px;
}

.game-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Consistent height across all filter buttons */
  min-height: 52px;
  box-sizing: border-box;
}

.game-chip .chip-matchup {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* MLB game chips: [logo] Tigers @ Royals [logo] — logos flank the short
   nicknames. Sized to match the chip's text height so the row stays
   visually consistent with NBA chips that don't show logos. */
.game-chip .chip-team-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.game-chip .chip-vs {
  opacity: 0.6;
  font-weight: 500;
}

.game-chip .chip-time {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 400;
}

.game-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.game-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
}

.game-chip.active .chip-matchup {
  font-weight: 700;
}

.game-chip.active .chip-time {
  opacity: 0.85;
}

.game-chip[data-game="all"],
.market-chip[data-market="all"],
.position-chip[data-position="all"] {
  font-weight: 700 !important;
}

.market-chip[data-market="all"] {
  padding-left: 20px;
  padding-right: 20px;
}

.game-chip.live {
  border-color: rgba(255, 200, 50, 0.6);
  box-shadow: 0 0 8px rgba(255, 200, 50, 0.3);
}

.game-chip.live .chip-matchup::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ffc832;
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse-live 1.5s infinite;
}

.game-chip.final {
  opacity: 0.5;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================================================
   MARKET FILTER
   ========================================================================== */
.props-market-filter {
  margin: 0;
}

.market-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.market-chip[data-market="3PM"] {
  display: none;
}

.market-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.market-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.market-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Position filter chips container */
.position-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Position filter chips */
.position-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 24px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.position-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.position-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Defense filter chips container */
.defense-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Defense filter chips */
.defense-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.defense-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.defense-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Hit rate filter chips container */
.hitrate-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Hit rate filter chips */
.hitrate-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.hitrate-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.hitrate-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

.grade-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Grade filter chips */
.grade-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(0, 245, 212, 0.9);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.grade-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.grade-chip.active {
  background: rgba(0, 211, 189, 0.12);
  color: rgba(0, 245, 212, 0.9);
  border-color: rgba(0, 211, 189, 0.35);
  font-weight: 600;
}

/* Hide filtered props */
.suggested-prop.game-filtered,
.suggested-prop.market-filtered,
.suggested-prop.position-filtered {
  display: none !important;
}

/* Live games are OFF by default. On NARROW screens the mobile game-chip filter
   drives visibility, so hide live CARDS via the body class until a live game is
   picked (the chip drill-down removes pb-live-hidden). On WIDE screens the
   table's own Matches dropdown filters both the table and the cards, so this
   must NOT apply there — otherwise a live game the user CHECKS in the dropdown
   could never show. */
@media (max-width: 1000px) {
  body.pb-live-hidden #suggested-props-container .suggested-prop[data-live="1"] {
    display: none !important;
  }
}
/* LIVE marker on a mobile Matches game chip. */
.game-chip.is-live .chip-live {
  color: #ff4d5e;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-left: 4px;
}

#suggested-props-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow-y: auto;
}

/* Workbench empty state — centered in both card and table columns */
/* ── "Slate wrapped" evening empty state (live props disabled: the board
   is legitimately empty once every game has started) ─────────────────── */
#pb-slate-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px 56px;
  min-height: 46vh;
}
#pb-slate-hero h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--theme-text, #eef4f6);
}
#pb-slate-hero .pb-sw-sub {
  color: #9aa4b2;
  font-size: 15px;
  max-width: 480px;
  line-height: 1.55;
}
#pb-slate-hero .pb-sw-strip {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 22px;
  font-size: 14px;
  color: #9aa4b2;
}
#pb-slate-hero .pb-sw-day { color: var(--theme-accent, #00d3bd); font-weight: 700; }
#pb-slate-hero .pb-sw-sep { color: rgba(255, 255, 255, 0.25); }
#pb-slate-hero .pb-sw-ctas {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
#pb-slate-hero .pb-sw-cta {
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#pb-slate-hero .pb-sw-cta--primary {
  background: var(--theme-accent, #00d3bd);
  color: #04231f;
  border-color: transparent;
}
#pb-slate-hero .pb-sw-cta--primary:hover { filter: brightness(1.08); }
#pb-slate-hero .pb-sw-cta--ghost {
  background: transparent;
  color: var(--theme-text, #eef4f6);
}
#pb-slate-hero .pb-sw-cta--ghost:hover {
  border-color: rgba(0, 211, 189, 0.5);
  color: var(--theme-accent, #00d3bd);
}
/* Hide the "Ask the assistant" CTA on the empty-board hero (all layouts). The
   chat has its own launcher. Delete this to bring the button back.
   Targeted at [data-sw="chat"], NOT at .pb-sw-cta--ghost: the intent was always
   "hide the chat button", but written against the ghost modifier it also hid
   every other secondary CTA added later (it swallowed the home-runs link). */
#pb-slate-hero .pb-sw-cta[data-sw="chat"] { display: none; }
/* An <a> styled as a CTA needs the button's box and no underline. */
#pb-slate-hero a.pb-sw-cta {
  display: inline-flex; align-items: center; text-decoration: none;
}
#pb-slate-hero .pb-sw-foot {
  margin-top: 30px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.35);
}
/* dead controls read as broken — grey them while the board is empty */
body.pb-board-empty #your-parlay-column,
body.pb-board-empty #props-filter-section,
body.pb-board-empty #table-filter-bar,
body.pb-board-empty #suggested-props-table {
  opacity: 0.38;
  filter: saturate(0.4);
  pointer-events: none;
}
@media (max-width: 1000px) {
  /* Board empty: on mobile, HIDE the build/parlay panel and the By-Game/By-Market/…
     filter strip entirely instead of just greying them (rule above). With no props
     there's nothing to build or filter, and stacked above the "board is a wrap"
     hero they're just dead space. Wide screens keep them greyed so the two-column
     grid stays balanced beside the hero. */
  body.pb-board-empty #your-parlay-column,
  body.pb-board-empty #props-filter-section { display: none; }
  #pb-slate-hero h1 { font-size: 44px; }
  #pb-slate-hero .pb-sw-sub { font-size: 28px; max-width: 860px; }
  #pb-slate-hero .pb-sw-strip {
    flex-direction: column;
    gap: 6px;
    font-size: 26px;
    padding: 22px 30px;
  }
  #pb-slate-hero .pb-sw-sep { display: none; }
  #pb-slate-hero .pb-sw-cta { font-size: 28px; padding: 20px 36px; border-radius: 18px; }
  #pb-slate-hero .pb-sw-foot { font-size: 22px; }
}

/* Board empty on wide screens: make the app fill the viewport so the page footer
   (socials + research links — a sibling AFTER #main-app-wrapper) is pushed below
   the fold. With the short "board is a wrap" hero the wrapper is otherwise too
   short and the footer floats up into the empty space under the hero; now it only
   appears on scroll. Scoped to the empty board so normal pages are unaffected. */
@media (min-width: 1001px) {
  body.pb-board-empty #main-app-wrapper { min-height: 100vh; }
}

.wb-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wb-empty-state__msg {
  font-size: 18px;
  color: #fff;
  text-align: center;
}

#your-parlay-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Ensure prop cards fill container width */
#suggested-props-container > .suggested-prop,
#your-parlay-container > .suggested-prop {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* ==========================================================================
   3. PARLAY PLACEHOLDER (Empty State)
   ========================================================================== */
#your-parlay-container .parlay-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  pointer-events: none;
  padding: 100px 20px;
  margin: 20px 0;
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}

#your-parlay-container .parlay-placeholder .placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

#your-parlay-container .parlay-placeholder .placeholder-icon svg {
  width: 24px;
  height: 24px;
  stroke: rgba(255, 255, 255, 0.4);
}

#your-parlay-container .parlay-placeholder .placeholder-title {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

#your-parlay-container .parlay-placeholder .placeholder-subtitle {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}

/* Desktop placeholder: visible by default */
#your-parlay-container .parlay-placeholder .placeholder-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Inline filters inside placeholder need pointer events */
#your-parlay-container .parlay-placeholder .inline-filters-container {
  pointer-events: auto;
}

/* When inline filters are present, adjust placeholder layout */
#your-parlay-container .parlay-placeholder.has-inline-filters {
  padding: 2px 20px 0px;
  border: none;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  margin: 8px 0;
}

#your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-desktop {
  flex: 1;
}

#your-parlay-container .parlay-placeholder.has-inline-filters .inline-filters-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Hide old mobile placeholder when inline filters are present */
#your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-mobile {
  display: none !important;
}

/* Mobile placeholder: hidden by default */
#your-parlay-container .parlay-placeholder .placeholder-mobile {
  display: none;
}

/* ==========================================================================
   4. GLASS PANELS & UI COMPONENTS
   ========================================================================== */
.glass-panel {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 4px 24px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: 0;
  background: none;
  pointer-events: none;
}

/* Gradient accent line at top of panel */
.glass-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: none;
  z-index: 2;
}

.glass-panel>* {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   5. REMOVE ALL SELECTIONS BUTTON
   ========================================================================== */
#reset-parlay-button {
  appearance: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  margin-top: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 94, 107, .9);
  font-size: 14px;
  font-weight: 500;
  transition: all .15s ease;
}

#reset-parlay-button:hover {
  color: rgba(255, 94, 107, 1);
}

#reset-parlay-button svg {
  width: 13px;
  height: 13px;
  opacity: .9;
  margin-top: -1px;
}

/* ==========================================================================
   5.5 PARLAY FOOTER - Summary section (V2 Layout)
   ========================================================================== */
#parlay-footer {
  margin-top: -4px;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  position: relative;
  background: transparent;
  padding: 16px;
  border-radius: 0 0 16px 16px;
}

/* Header row: leg count + odds */
.pf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.pf-leg-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.pf-odds {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: #00D3BD;
  font-variant-numeric: tabular-nums;
}

/* Stats row: contains payout box and grade box */
.pf-stats-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

/* Payout row: to-win on left, wager controls on right */
.pf-payout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  min-height: 70px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
}

.pf-payout-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-payout-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pf-payout-amount {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #00D3BD;
  font-variant-numeric: tabular-nums;
}

/* Parlay grade box (separate bubble) */
.pf-grade-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-height: 70px;
  padding: 6px 20px 2px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
}

.pf-grade-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.pf-grade-value {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #02d2a7;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

/* Wager controls */
.pf-wager-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-wager-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pf-wager-btn:hover {
  background: rgba(0, 211, 189, 0.15);
  border-color: rgba(0, 211, 189, 0.3);
  color: #00D3BD;
}

.pf-wager-btn:active {
  transform: scale(0.95);
}

.pf-wager-amount {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  min-width: 50px;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* CTA row: link / challenge / save buttons */
.pf-cta-row {
  display: flex;
  gap: 10px;
}

/* Challenge button — the PRIMARY (teal gradient) action of the row */
.pf-btn-challenge {
  flex: 1;
  position: relative;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--theme-text-on-accent, #0a1628);
  background: linear-gradient(
    135deg,
    rgba(var(--theme-accent-rgb, 0, 211, 189), .7) 0%,
    rgba(var(--theme-accent-rgb, 0, 211, 189), .9) 50%,
    rgba(var(--theme-accent-rgb, 0, 211, 189), .7) 100%
  );
  background-size: 200% 200%;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), .45);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: gradShift 3s ease infinite;
  transition: transform .2s;
  /* Backstop: a too-wide label (feedback text) clips inside the button
     instead of painting over Link/Save. */
  overflow: hidden;
}

.pf-btn-challenge:hover {
  transform: translateY(-2px) scale(1.03);
}

.pf-btn-challenge:active {
  transform: scale(.97);
}

.pf-challenge-label {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.pf-btn-challenge.feedback-shown {
  background: rgba(255, 107, 107, 0.25);
  animation: none;
  box-shadow: 0 4px 24px rgba(255, 107, 107, .3);
}

.pf-btn-challenge.feedback-shown .pf-challenge-label {
  color: #ff6b6b;
}

/* Teal teaser line under the CTA row — same action as Challenge */
.pf-challenge-teaser {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 2px 0 0;
  background: none;
  border: none;
  color: var(--theme-accent-bright, #00F5D4);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.pf-challenge-teaser:hover {
  text-decoration: underline;
}

/* Place bet button */
.pf-btn-place {
  flex: 1;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.45);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent-bright, #00F5D4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pf-btn-place:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pf-btn-place:active {
  transform: scale(0.98);
}

.pf-btn-place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pf-btn-logo {
  height: 16px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

/* Save button — quiet accent-outline secondary (the primary emphasis
   moved to the Challenge button) */
.pf-btn-save {
  flex: 1;
  position: relative;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.45);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent-bright, #00F5D4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  min-width: 80px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pf-btn-save:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pf-btn-save:active {
  transform: scale(0.98);
}

/* MLB save is live behind the per-user mlbParlays flag: the button reads
   muted only until the flag is known (authManager/authAPI toggle
   body.mlb-parlays-on from /user/me) or when the kill switch is off.
   Muted state still accepts clicks: a KNOWN-false flag surfaces "In
   Development"; an unknown flag re-fetches /user/me and proceeds — the
   save endpoint enforces the real gate (founder 2026-08-07).
   Scoped to pb-authed (authManager): LOGGED-OUT users see the button
   normal — their click goes to the requireAuth login prompt, same as the
   bottom-nav My Parlays fix (founder 2026-07-23). */
body.pb-authed.is-mlb-route:not(.mlb-parlays-on) .pf-btn-save,
body.pb-authed.is-mlb-route:not(.mlb-parlays-on) .pf-btn-challenge {
  opacity: 0.55;
  animation: none;
  cursor: not-allowed;
}
body.pb-authed.is-mlb-route:not(.mlb-parlays-on) .pf-btn-save:hover,
body.pb-authed.is-mlb-route:not(.mlb-parlays-on) .pf-btn-challenge:hover {
  transform: none;
  opacity: 0.7;
}

@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Saving state — shimmer pulse while waiting for API */
@keyframes saveShimmer {
  0%   { opacity: .85; }
  50%  { opacity: .5; }
  100% { opacity: .85; }
}

.pf-btn-save.saving {
  animation: saveShimmer 1s ease-in-out infinite;
  pointer-events: none;
}

/* Label crossfade */
.pf-save-label {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Hide CTA icons on desktop, show on mobile */
.pf-mobile-icon {
  display: none !important;
}

/* Save bookmark icon — hidden everywhere */
.pf-save-icon {
  display: none !important;
}

.pf-btn-save svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Feedback states */
.pf-btn-save.feedback-shown {
  background: rgba(255, 107, 107, 0.25);
  animation: none;
  box-shadow: 0 4px 24px rgba(255, 107, 107, .3);
}
.pf-btn-save.feedback-shown .pf-save-label {
  color: #ff6b6b;
}

.pf-btn-save.feedback-shown.feedback-success {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.25);
  box-shadow: 0 4px 24px rgba(var(--theme-accent-rgb, 0, 211, 189), .3);
}
.pf-btn-save.feedback-shown.feedback-success .pf-save-label {
  color: var(--theme-accent-bright, #00F5D4);
}

/* ==========================================================================
   6.5 COMPACT FOOTER FOR SIDEBAR (Desktop narrow layout)
   ========================================================================== */
/* Footer adjustments for narrow sidebar */
#your-parlay-column #reset-parlay-button {
  padding: 10px 12px;
  font-size: 12px;
}

#your-parlay-column #parlay-footer {
  padding: 0px 16px 16px 16px;
}

#your-parlay-column .pf-header {
  margin-bottom: 10px;
}

#your-parlay-column .pf-leg-count {
  font-size: 13px;
}

#your-parlay-column .pf-odds {
  font-size: 14px;
}

#your-parlay-column .pf-payout-row {
  padding: 10px 12px;
  margin-bottom: 10px;
}

#your-parlay-column .pf-payout-label {
  font-size: 10px;
}

#your-parlay-column .pf-payout-amount {
  font-size: 18px;
}

#your-parlay-column .pf-stats-row {
  gap: 8px;
  margin-bottom: 10px;
}

#your-parlay-column .pf-grade-box {
  padding: 10px 14px;
}

#your-parlay-column .pf-grade-label {
  font-size: 10px;
}

#your-parlay-column .pf-grade-value {
  font-size: 18px;
}

#your-parlay-column .pf-wager-amount {
  font-size: 14px;
  min-width: 44px;
}

#your-parlay-column .pf-wager-btn {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

#your-parlay-column .pf-btn-place,
#your-parlay-column .pf-btn-challenge,
#your-parlay-column .pf-btn-save {
  padding: 12px 14px;
  font-size: 13px;
}

/* ==========================================================================
   7. MOBILE / RESPONSIVE (Consolidated < 1000px)
   ========================================================================== */
@media (max-width: 1000px) {
  /* Remove gap between navbar and workbench */
  .main-content {
    margin-top: 0;
  }

  /* --- Layout Stacking --- */
  #workbench-section {
    padding: 0;
    max-width: 100%;
    /* box-sizing: border-box;
    overflow-x: hidden; */
  }

  #workbench-columns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0;
    margin: 0;
    width: 100%;
    /* max-width: 100%;
    box-sizing: border-box; */
  }

  /* Kill the subtle teal gradient at the top of the page */
  body::before {
    display: none;
  }

  /* Match nav to the same subtle glass as columns — only on workbench */
  body.workbench-active .landing-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.0);
  }

  /* Glass panels — fully transparent flat canvas */
  #workbench-columns > .glass-panel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    isolation: auto;
  }

  #workbench-columns > .glass-panel::before,
  #workbench-columns > .glass-panel::after {
    display: none !important;
  }

  #your-parlay-column,
  #suggested-legs-column {
    background: rgba(255, 255, 255, 0.008) !important;
  }

  .glass-panel {
    padding: 12px;
    border-radius: 0;
  }

  /* Reset column margins/widths for mobile */
  #your-parlay-column,
  #suggested-legs-column {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    /* overflow-x: hidden; */
  }

  /* Reset sticky and height for mobile */
  #your-parlay-column {
    position: relative;
    top: 0;
    height: auto !important;
    min-height: 400px;
    max-height: none;
    overflow-y: visible;
    padding: 12px;
  }

  /* CLS fix (MLB mobile only) — top-anchor the parlay placeholder. By default
     .parlay-placeholder is flex-centered with 100px top padding; when
     initMLBBuildFeature injects the inline build UI it adds .has-inline-filters
     which flips the layout to flex-start + 2px padding. That re-alignment jumped
     the placeholder content upward by ~100px after first paint (measured 0.213
     CLS). Matching the pre-injection layout to the injected layout anchors the
     content to the top in both states, so swapping in the build UI no longer
     repositions it. Scoped to body.is-mlb-route (added MLB-only at
     mlbWorkbenchCore.js:866, removed for other sports at tableView-core.js:1928)
     so NBA/NFL/World Cup are unaffected. */
  body.is-mlb-route #your-parlay-container .parlay-placeholder:not(.has-inline-filters) {
    justify-content: flex-start;
    padding: 2px 20px 0;
    margin: 8px 0;
    border: none;
  }

  /* CLS fix (MLB mobile only): reserve the parlay column at roughly its injected
     build-UI height (measured ~1063px on a full slate) so the inline build UI
     fills reserved space instead of growing the column after first paint — that
     growth otherwise pushes the props column / footer down (the .glass-panel
     shift). Relies on the server-emitted is-mlb-route body class so this is
     active at first paint, before the scaffold injects. */
  body.is-mlb-route #your-parlay-column {
    min-height: 1100px;
  }

  /* CLS fix (MLB mobile only): reserve the scaffold's height so the body-level
     footer stays below the fold from the very first paint. The scaffold injects
     after first paint (parlay build UI ~1063px + props column min 800px, stacked
     ≈ 1900px); without a reservation the empty section is short, the footer
     paints in-viewport, then the scaffold pushes it down (the footer shift). A
     plain 100vh was shorter than the scaffold, so it didn't fully cover it; a
     fixed 1900px does. A real MLB slate's card list far exceeds 1900px (so no
     whitespace) and the #loading-animation overlay masks the brief empty paint.
     Scoped to body.is-mlb-route — inert for NBA/NFL and World Cup. Excluded
     when a player/pitcher dashboard is open (body.mlb-dashboard-active): that
     state hides #workbench-columns but NOT #workbench-section, and the dashboard
     is appended after #workbench-section inside #content-section — so without
     this exclusion the 1900px reservation would leave a tall empty gap above
     the dashboard. */
  body.is-mlb-route:not(.mlb-dashboard-active) #workbench-section {
    min-height: 1900px;
  }

  /* CLS fix (NBA mobile only): same disease as MLB, but worse — the NBA workbench
     is built entirely client-side, so #workbench-section is genuinely EMPTY at
     first paint (MLB server-renders its scaffold to fill it). With nothing in the
     section the body-level footer paints near the top (~y=95), then the client
     build shoves it down ~1500px when content lands ≈9s → a ~0.97 CLS. Reserving
     height keeps the footer below the fold from the moment the workbench wrapper
     becomes visible. The fold at the no-viewport-meta scaled layout sits ≈2180px
     and the empty footer would otherwise sit at 95+min-height, so MLB's 1900 is
     too short here; 2600 clears the fold with margin. A real NBA slate's card
     list is ~26000px tall (so no whitespace), and on the landing this is inert —
     the content wrapper is display:none under cover-active (rect collapses to 0).
     Scoped to body.is-nba-shell, a server-emitted marker (see index.html) that is
     DISTINCT from the client-side `is-nba-route` class the table view toggles for
     multi-book mode (tableView-core.js). */
  body.is-nba-shell #workbench-section {
    min-height: 2600px;
  }

  #suggested-legs-column {
    height: auto !important;
    min-height: 800px;
    max-height: none;
    padding: 12px;
    overflow-y: visible;
  }

  /* Prop containers full width */
  #suggested-props-container,
  #your-parlay-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
    /* box-sizing: border-box; */
  }

  /* Prop cards MUST be full width on mobile */
  #suggested-props-container > .suggested-prop,
  #your-parlay-container > .suggested-prop {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* --- Filter Section Mobile --- */
  .props-filter-section {
    margin-bottom: 0px;
    padding-bottom: 0px;
    width: 100%;
    max-width: calc(100vw - 40px);
    overflow: visible;
    box-sizing: border-box;
  }

  .filter-mode-toggle {
    margin-bottom: 10px;
    padding: 0px;
    border-radius: 16px;
    border-width: 1px;
  }

  .filter-toggle-wrapper {
    margin-bottom: 0px;
  }

  /* Add spacing above secondary filter rows when expanded */
  .props-game-filter,
  .props-grade-filter,
  .props-market-filter,
  .props-position-filter,
  .props-defense-filter,
  .props-hitrate-filter,
  .props-rate-filter,
  .props-form-filter {
    margin-top: 18px;
  }

  .filter-mode-btn {
    padding: 22px 21px;
    font-size: 24px;
    min-height: 90px;
    border-radius: 12px;
  }

  /* --- Game Filter Mobile --- */
  .props-game-filter {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* MOBILE LAYOUT IS INCORRECT WITHOUT THIS */
  .game-filter-scroll-wrapper {
    max-width: 900px;
    width: 100%;
  }

  .game-filter-chips {
    gap: 8px;
  }

  .game-chip {
    padding: 16px 30px;
    font-size: 18px;
    border-radius: 14px;
    min-height: 58px;
  }

  .game-chip .chip-time {
    font-size: 13px;
  }

  /* --- Market Filter Mobile --- */
  .props-market-filter {
    width: 100;
    max-width: 100%;
    box-sizing: border-box;
  }

  .market-filter-chips {
    gap: 8px;
  }

  .market-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
    min-width: 120px;
  }

  .market-chip[data-market="all"] {
    padding-left: 24px;
    padding-right: 24px;
  }

  .position-filter-chips {
    gap: 12px;
  }

  .position-chip {
    padding: 24px 36px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 62px;
    min-width: 120px;
  }

  .defense-filter-chips {
    gap: 12px;
  }

  .defense-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
  }

  .hitrate-filter-chips {
    gap: 12px;
  }

  .hitrate-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
  }

  .grade-filter-chips {
    gap: 12px;
  }

  .grade-chip {
    padding: 24px 16px;
    font-size: 24px;
    border-radius: 14px;
    min-height: 58px;
  }

  /* --- Footer & Stake Mobile Adjustments --- */
  #reset-parlay-button {
    padding: 16px;
    font-size: 1.75rem !important;
    gap: 8px;
  }

  #reset-parlay-button svg {
    width: 24px;
    height: 24px;
    margin-top: 0px;
  }

  #parlay-footer {
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    padding: 14px 32px 24px 32px !important;
    border-radius: 0;
  }

  .pf-leg-count {
    font-size: 24px !important;
  }

  .pf-odds {
    font-size: 24px !important;
  }

  .pf-payout-row {
    padding: 16px 20px !important;
    min-height: 100px;
  }

  .pf-payout-label {
    font-size: 0.85rem !important;
  }

  .pf-payout-amount {
    font-size: 1.75rem !important;
  }

  .pf-grade-box {
    align-self: flex-start;
    max-height: none;
    min-height: 100px;
  }

  .pf-grade-label {
    font-size: 0.85rem !important;
  }

  .pf-grade-value {
    font-size: 1.75rem !important;
  }

  .pf-wager-btn {
    width: 100px !important;
    height: 64px !important;
    font-size: 1.75rem !important;
    border-radius: 12px;
  }

  .pf-wager-controls {
    gap: 12px;
  }

  .pf-wager-amount {
    font-size: 1.5rem !important;
    min-width: 70px !important;
  }

  .pf-mobile-icon {
    display: inline-block !important;
    margin-right: 4px;
  }

  .pf-cta-row {
    gap: 12px;
  }

  /* 19px + slim side padding is the largest size where "Challenge" fits
     the middle slot three-across at 375px (22px overflowed) */
  .pf-btn-place,
  .pf-btn-challenge,
  .pf-btn-save {
    padding: 18px 6px !important;
    font-size: 19px !important;
  }

  .pf-btn-save,
  .pf-btn-challenge {
    font-weight: 700 !important;
  }

  .pf-btn-logo {
    height: 24px;
    border-radius: 5px;
  }

  .pf-btn-place,
  .pf-btn-save,
  .pf-btn-challenge {
    gap: 8px !important;
  }

  .pf-challenge-teaser {
    margin-top: 22px;
    font-size: 18px;
  }

  /* --- Mobile Placeholder --- */
  #your-parlay-container .parlay-placeholder {
    padding: 60px 20px;
    margin: 20px 0;
    border: none;
    background: transparent;
  }

  /* When inline filters exist, show them on mobile too */
  #your-parlay-container .parlay-placeholder.has-inline-filters {
    padding: 4px 16px 20px;
    margin: 8px 0;
  }

  #your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Hide the old mobile text when inline filters are present */
  #your-parlay-container .parlay-placeholder.has-inline-filters .placeholder-mobile {
    display: none !important;
  }

  /* Original mobile placeholder (only shows when no inline filters) */
  #your-parlay-container .parlay-placeholder:not(.has-inline-filters) .placeholder-desktop {
    display: none;
  }

  #your-parlay-container .parlay-placeholder:not(.has-inline-filters) .placeholder-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -2px;
  }

  .placeholder-mobile-title,
  .placeholder-mobile-or,
  .placeholder-mobile-subtitle {
    font-weight: 600;
    color: rgba(0, 211, 189, 0.9);
  }

  .placeholder-mobile-title {
    font-size: 48px;
  }

  .placeholder-mobile-or,
  .placeholder-mobile-subtitle {
    font-size: 44px;
  }

  .placeholder-mobile-title,
  .placeholder-mobile-subtitle {
    position: relative;
  }

  .placeholder-arrow {
    position: absolute;
    width: 66px;
    height: auto;
    opacity: 1;
  }

  .placeholder-arrow.arrow-up {
    right: 100%;
    bottom: 65%;
    margin-right: -4px;
    transform: rotate(20deg);

  }

  .placeholder-arrow.arrow-down {
    left: 100%;
    top: 65%;
    margin-left: -8px;
    transform: rotate(210deg);
  }

  /* --- iOS / Blur Removal --- */
  .prop-card,
  .glass-panel::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ==========================================================================
   9a. DESKTOP - Parlay column scrolling (above mobile breakpoint)
   ========================================================================== */
@media (min-width: 1001px) {
  /* Kill the subtle teal gradient on desktop workbench too */
  body::before {
    display: none !important;
  }

  /* Override theme teal gradients on glass panels — keep glassy, remove teal */
  #workbench-columns > .glass-panel {
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
  #workbench-columns > .glass-panel::before {
    background: none !important;
  }
  #workbench-columns > .glass-panel::after {
    background: none !important;
  }

  /* Wide screens: table-only mode - hide card container */
  #suggested-props-container {
    display: none !important;
  }

  /* Hide card filter section on wide screens (use table filter bar instead) */
  #props-filter-section {
    display: none !important;
  }

  /* Cap parlay column height and use flex layout */
  /* Note: display uses !important only when not explicitly hidden via inline style */
  #your-parlay-column:not([style*="display: none"]):not([style*="display:none"]) {
    max-height: calc(100vh - 20px - var(--pb-bottom-nav-height, 64px) - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Props container takes remaining space and scrolls */
  #your-parlay-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Footer stays fixed at bottom */
  #your-parlay-column #parlay-footer {
    flex-shrink: 0 !important;
  }

  #workbench-section {
    max-width: 2200px;
  }

  #suggested-props-container > .suggested-prop {
    width: 100%;
  }
}

/* ==========================================================================
   PARLAY INFO POPUP
   ========================================================================== */

.parlay-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  z-index: 2;
  transition: color 0.15s;
}

.parlay-info-btn:hover {
  color: rgba(255, 255, 255, 0.5);
}

.parlay-info-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-bottom: 24px;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.parlay-info-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.parlay-info-step-icon {
  color: #00D3BD;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.parlay-info-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.parlay-info-step-text strong {
  color: #E6EDF3;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .parlay-info-btn {
    font-size: 32px;
    top: 12px;
    right: 12px;
  }

  #parlay-info-popup .duel-challenge-popup-subtitle {
    font-size: 26px;
  }

  .parlay-info-steps {
    gap: 24px;
    max-width: none;
    margin-bottom: 32px;
    padding: 0 24px;
  }

  .parlay-info-step-icon {
    font-size: 24px;
    margin-top: 4px;
  }

  .parlay-info-step-text {
    font-size: 22px;
  }

  .parlay-info-step-text strong {
    font-size: 24px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   PARLAY LEG — remove control (wide screens only)
   workbenchCore prepends <div class="remove-icon"> to every leg and has
   bound a click handler to it since forever, but the element had NO CSS
   anywhere in the codebase — a zero-size div, so the only way to drop a
   leg was the swipe gesture. With swipe now gated to touch widths, this
   is the removal path on desktop.
   ≤1000px is deliberately untouched: swipe still owns removal there, and
   an × over a card the thumb is about to drag invites mis-taps.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {
  #your-parlay-container .suggested-prop { position: relative; }

  /* Lives in the empty middle-row gap between the bet pill and the steppers,
     NOT in a corner: the top-right is the price and the bottom-right is the
     start time, so a corner badge lands on top of live information. Measured
     across a full slip that gap is a stable 159px–389px of a 537px card, and
     the card's horizontal centre (269px) sits inside it, so centring on the
     card is safe for every bet type.
     Vertically it is pinned to the steppers row (top 46px, height 30px) rather
     than the card's centre, so it reads as part of that row of controls. */
  #your-parlay-container .remove-icon {
    position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
    color: #94a3b8; cursor: pointer; opacity: 0; pointer-events: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: opacity .15s ease, color .15s ease,
                background .15s ease, border-color .15s ease;
  }
  /* The element ships from workbenchCore as an empty <div>; the label is CSS so
     no JS change is needed and ≤1000px keeps its bare, unstyled element. */
  #your-parlay-container .remove-icon::before { content: 'Remove Prop'; }

  /* Revealed on hover/focus of the leg — always-on labels down a full slip is a
     column of noise. Kept reachable by keyboard. */
  #your-parlay-container .suggested-prop:hover .remove-icon,
  #your-parlay-container .suggested-prop:focus-within .remove-icon,
  #your-parlay-container .remove-icon:focus-visible { opacity: 1; }
  #your-parlay-container .remove-icon:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
  }
}