/* =====================================================================
   PROP CARDS — REDESIGNED (Based on new-props.html spec)
   ===================================================================== */

/* ==============================================
   DESIGN TOKENS
   ============================================== */
:root {
  /* Colors */
  --pc-color-bg-primary: #0a0f14;
  --pc-color-bg-card: linear-gradient(165deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  --pc-color-bg-subtle: rgba(255, 255, 255, 0.02);
  --pc-color-bg-element: rgba(255, 255, 255, 0.04);

  --pc-color-border: rgba(255, 255, 255, 0.08);
  --pc-color-border-light: rgba(255, 255, 255, 0.06);
  --pc-color-border-input: rgba(255, 255, 255, 0.10);

  --pc-color-text-primary: #fff;
  --pc-color-text-secondary: #667;
  --pc-color-text-muted: #556;
  --pc-color-text-matchup: #889;
  --pc-color-text-teams: #aab;

  --pc-color-accent: var(--theme-accent, #00D3BD);
  --pc-color-accent-bg: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.15);
  --pc-color-accent-border: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.3);

  --pc-color-hit: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  --pc-color-miss: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  --pc-color-hit-text: #4ade80;
  --pc-color-miss-text: #f87171;

  /* Typography */
  --pc-font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Spacing - compact for desktop */
  --pc-card-padding: 12px;
  --pc-card-radius: 10px;
  --pc-element-radius: 6px;

  /* Transitions */
  --pc-transition-fast: 0.15s ease;
  --pc-transition-normal: 0.2s ease;

  /* Good/Bad colors */
  --pc-good: #4ade80;
  --pc-bad: #f87171;
  --pc-good-rgb: 74, 222, 128;
  --pc-bad-rgb: 248, 113, 113;
}

/* =====================================================================
   CONTAINER + LAYOUT NORMALIZATION
   ===================================================================== */
#suggested-props-container,
#your-parlay-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 8px;
}

#your-parlay-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* 2-column grid for suggested props on wider screens */
@media (min-width: 2150px) {
  #suggested-props-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

#your-parlay-container {
  overflow: visible !important;
}

#suggested-props-container > .suggested-prop,
#your-parlay-container > .suggested-prop {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100%;
  box-sizing: border-box;
}

/* Skip layout/paint for off-screen suggested cards.
   Dramatically reduces rendering cost when 600+ props are in the DOM,
   keeping swipe gestures on the parlay smooth regardless of total prop count. */
#suggested-props-container > .suggested-prop {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* =====================================================================
   PROP CARD CONTAINER
   ===================================================================== */
.prop-card {
  position: relative;
  width: 100%;
  background: var(--pc-color-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-card-radius);
  overflow: hidden;
  font-family: var(--pc-font-primary);
  color: var(--pc-color-text-primary);
  box-sizing: border-box;
  margin: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Linked prop highlight animation (when clicking parlay counterpart) */
@keyframes parlayLinkPulse {
  0% {
    border-color: var(--pc-color-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  40% {
    border-color: rgba(0, 211, 189, 0.6);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 211, 189, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  100% {
    border-color: var(--pc-color-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
}

.prop-card.parlay-link-highlight {
  animation: parlayLinkPulse 1.2s ease-out;
}

/* kill any spotlight overlays */
.prop-card::before,
.prop-card::after {
  display: none !important;
}

/* =====================================================================
   MATCHUP ROW (Top bar with teams + time)
   ===================================================================== */
.prop-card .prop-card__matchup,
.prop-card .matchup-line {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px var(--pc-card-padding) 0;
  background: transparent;
  font-size: 0.7rem;
  color: #ddd;
  text-align: center;
}

.prop-card .prop-card__matchup-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.prop-card .prop-card__teams,
.prop-card .matchup-line .prop-card__teams {
  color: var(--pc-color-text-teams);
  font-weight: 500;
}

.prop-card .prop-card__dot,
.prop-card .matchup-line .pc-dot {
  color: var(--pc-color-text-muted);
}

.prop-card .prop-card__time,
.prop-card .matchup-line .game-time {
  color: #778;
}

/* =====================================================================
   CARD BODY
   ===================================================================== */
.prop-card .prop-card__body {
  padding: var(--pc-card-padding);
}

/* =====================================================================
   HEADER (Player info + Line toggle)
   ===================================================================== */
.prop-card .prop-card__header,
.prop-card .pc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pc-card-padding);
  padding-top: 0px;
}

/* Header row styling */
.prop-card .prop-card__header,
.prop-card .pc-row {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: none;
}

/* =====================================================================
   PLAYER INFO (Left side of header)
   ===================================================================== */
.prop-card .prop-card__player,
.prop-card .title-col {
  flex: 1;
  min-width: 0;
}

.prop-card .prop-card__player-name,
.prop-card .player-name {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pc-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-card .pc-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-right: 6px;
}

.prop-card .pc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: none;
}

.prop-card .pc-team-badge {
  position: absolute;
  bottom: -3px;
  right: -5px;
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 50%;
  background: none;
  border: 0px solid var(--pc-color-border, #2a3040);
  padding: 1px;
  z-index: 1;
}

.prop-card .pc-name {
  font-weight: 700;
}

.prop-card .prop-card__player-meta,
.prop-card .pc-team,
.prop-card .pc-pos {
  color: var(--pc-color-text-secondary);
  font-weight: 400;
  font-size: 0.85rem;
}

.prop-card .pc-dot {
  opacity: 0.65;
}

/* =====================================================================
   BET TYPE PILLS (PTS / AST / REB toggle)
   ===================================================================== */
.prop-card .prop-card__bet-types {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.prop-card .prop-card__bet-type,
.prop-card .bettype-pill {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--pc-font-primary);
  color: var(--pc-color-text-muted);
  background: var(--pc-color-bg-element);
  border: 1px solid var(--pc-color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--pc-transition-fast);
}

.prop-card .prop-card__bet-type:hover,
.prop-card .bettype-pill:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: #888;
}

.prop-card .prop-card__bet-type.active,
.prop-card .bettype-pill.active {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  border-color: var(--pc-color-accent-border);
  color: var(--pc-color-accent);
}

.prop-card .bettype-pill .bt-line {
  font-weight: 700;
  color: var(--pc-color-text-primary);
}

.prop-card .bettype-pill .bt-lbl {
  color: var(--pc-color-text-secondary);
}

/* =====================================================================
   DESKTOP TYPE PILL (shows current line + stat, clickable for selector)
   ===================================================================== */
.prop-card .type-pill--desktop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--pc-font-primary);
  color: var(--pc-color-accent);
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  border: 1px solid var(--pc-color-accent-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--pc-transition-fast);
  margin-right: 4px;
}

.prop-card .type-pill--desktop:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.2);
}

.prop-card .type-pill--desktop .chevron {
  font-size: 0.6rem;
  color: var(--pc-color-text-muted);
  margin-left: 2px;
  transition: transform 0.2s ease;
}

/* Hide chevron when no alternative bet types */
.prop-card[data-has-alt-bets="false"] .type-pill--desktop .chevron {
  display: none;
}

/* Rotate chevron when selector is open */
.prop-card.bettype-selector-open .type-pill--desktop .chevron {
  transform: rotate(180deg);
}

/* Desktop bet type selector dropdown */
.prop-card .desktop-bettype-selector {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  margin-top: 4px;
  background: #1a2530;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-element-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 200px;
}

/* Make bet-types container relative for dropdown positioning */
.prop-card .prop-card__bet-types {
  position: relative;
}

/* =====================================================================
   OVER/UNDER TOGGLE (Desktop - in bet types row)
   ===================================================================== */
.prop-card .ou-toggle--desktop {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--pc-color-border);
  margin-right: 4px;
}

.prop-card .ou-toggle--desktop.ou-toggle--over-only {
  border: none;
  margin-right: 0;
}

.prop-card .ou-toggle--desktop .ou-pill {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--pc-color-text-muted);
  background: var(--pc-color-bg-element);
  cursor: pointer;
  transition: all var(--pc-transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.prop-card .ou-toggle--desktop.ou-toggle--over-only .ou-pill {
  background: transparent;
  color: var(--pc-color-accent);
  cursor: default;
  padding: 2px 4px;
}

.prop-card .ou-toggle--desktop .ou-pill:first-child {
  border-right: 1px solid var(--pc-color-border);
}

.prop-card .ou-toggle--desktop.ou-toggle--over-only .ou-pill:first-child {
  border-right: none;
}

.prop-card .ou-toggle--desktop .ou-pill:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pc-color-text-secondary);
}

.prop-card .ou-toggle--desktop .ou-pill.active {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  color: var(--pc-color-accent);
}

.prop-card .ou-toggle--desktop .ou-pill--over.active {
  color: #22c55e; /* Green for Over */
}

.prop-card .ou-toggle--desktop .ou-pill--under.active {
  color: #ef4444; /* Red for Under */
}

/* Hide line increment/decrement controls when Under is selected */
.prop-card[data-side="under"] .line-toggle,
.prop-card[data-side="under"] .steppers {
  display: none !important;
}

/* =====================================================================
   PROP SECTION (Line toggle + Odds) - Right side of header
   ===================================================================== */
.prop-card .prop-card__prop-section,
.prop-card .prop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Line Toggle (- value +) */
.prop-card .prop-card__line-toggle,
.prop-card .line-toggle {
  display: flex;
  align-items: center;
  background: var(--pc-color-bg-element);
  border: 1px solid var(--pc-color-border-input);
  border-radius: var(--pc-element-radius);
  overflow: hidden;
}

.prop-card .prop-card__line-btn,
.prop-card .line-toggle button {
  all: unset;
  width: 28px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--pc-color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--pc-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prop-card .prop-card__line-btn:hover,
.prop-card .line-toggle button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--pc-color-text-primary);
}

.prop-card .prop-card__line-value,
.prop-card .line-toggle .line-val {
  padding: 0 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--pc-color-text-primary);
  min-width: 50px;
  text-align: center;
  border-left: 1px solid var(--pc-color-border);
  border-right: 1px solid var(--pc-color-border);
}

/* Odds Badge */
.prop-card .prop-card__odds,
.prop-card .odds-pill {
  background: var(--pc-color-accent-bg);
  border: 1px solid var(--pc-color-accent-border);
  color: var(--pc-color-accent);
  font-family: var(--pc-font-mono);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.prop-card .odds-pill .odds-line {
  margin: 0;
  color: inherit;
  font-weight: inherit;
}

/* =====================================================================
   DATA SECTION (Stats + Chart + Actions) - Always visible
   ===================================================================== */
.prop-card .prop-card__data,
.prop-card .expand {
  display: block;
  padding: 0 var(--pc-card-padding) var(--pc-card-padding);
  margin: 0;
}

.prop-card .prop-card__content-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* =====================================================================
   STATS GROUP (Chart + Stat Boxes inline)
   ===================================================================== */
.prop-card .prop-card__stats,
.prop-card .stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: 10px;
}

.prop-card .prop-card__stat,
.prop-card .stat-box {
  background: var(--pc-color-bg-element);
  border: 1px solid var(--pc-color-border-light);
  border-radius: var(--pc-element-radius);
  padding: 8px 12px;
  text-align: center;
  min-width: 70px;
  flex: 0 0 auto;
}

.prop-card .prop-card__stat-value,
.prop-card .stat-box .stat-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pc-color-text-primary);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Hit Rate vs Opp Color Coding */
.prop-card .vs-stat .stat-value {
  font-weight: 700;
  transition: color var(--pc-transition-fast);
}

.prop-card .vs-stat[data-hit-tier="great"] .stat-value {
  color: #22c55e; /* 80-100% hit rate */
}
.prop-card .vs-stat[data-hit-tier="good"] .stat-value {
  color: #4ade80; /* 60-79% hit rate */
}
.prop-card .vs-stat[data-hit-tier="neutral"] .stat-value {
  color: #fbbf24; /* 40-59% hit rate */
}
.prop-card .vs-stat[data-hit-tier="poor"] .stat-value {
  color: #f87171; /* 20-39% hit rate */
}
.prop-card .vs-stat[data-hit-tier="bad"] .stat-value {
  color: #ef4444; /* 0-19% hit rate */
}

/* Hide vs-chart on desktop (only shown on mobile when expanded) */
.prop-card .vs-stat .vs-chart {
  display: none;
}

/* Last 5 Hit Rate Color Coding (same as vs Opp Hit) */
.prop-card .last5-stat[data-hit-tier="great"] .stat-value {
  color: #22c55e;
}
.prop-card .last5-stat[data-hit-tier="good"] .stat-value {
  color: #4ade80;
}
.prop-card .last5-stat[data-hit-tier="neutral"] .stat-value {
  color: #fbbf24;
}
.prop-card .last5-stat[data-hit-tier="poor"] .stat-value {
  color: #f87171;
}
.prop-card .last5-stat[data-hit-tier="bad"] .stat-value {
  color: #ef4444;
}

/* Defense Rank Color Coding */
.prop-card .def-rank-stat .rank-value {
  font-weight: 700;
  transition: color var(--pc-transition-fast);
}

/* Green tier: #1-10 (favorable - opponent allows most) */
.prop-card .def-rank-stat[data-rank-tier="elite"] .rank-value {
  color: #22c55e; /* Brightest green for ranks 1-3 */
}
.prop-card .def-rank-stat[data-rank-tier="great"] .rank-value {
  color: #4ade80; /* Medium green for ranks 4-7 */
}
.prop-card .def-rank-stat[data-rank-tier="good"] .rank-value {
  color: #86efac; /* Light green for ranks 8-10 */
}

/* Yellow tier: #11-20 (neutral) */
.prop-card .def-rank-stat[data-rank-tier="neutral"] .rank-value {
  color: #fbbf24; /* Yellow */
}

/* Red tier: #21-30+ (unfavorable - opponent allows least) */
.prop-card .def-rank-stat[data-rank-tier="poor"] .rank-value {
  color: #f87171; /* Light red for ranks 21-25 */
}
.prop-card .def-rank-stat[data-rank-tier="bad"] .rank-value {
  color: #ef4444; /* Darker red for ranks 26-30+ */
}

.prop-card .prop-card__stat-label,
.prop-card .stat-box .stat-label {
  color: var(--pc-color-text-muted);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Grade stat box (mobile only — hidden on desktop) */
.prop-card .grade-stat {
  display: none;
}

/* =====================================================================
   LEGACY DEFENSE PILL (Removed - now using stat boxes)
   ===================================================================== */
.prop-card .def-pill {
  display: none !important;
}

/* =====================================================================
   INFO ICON (Tooltip trigger)
   ===================================================================== */
.prop-card .prop-card__info-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #888;
  font-size: 0.55rem;
  font-style: italic;
  font-family: Georgia, serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  position: relative;
  flex-shrink: 0;
}

.prop-card .prop-card__info-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--pc-color-text-primary);
}

/* Tooltip */
.prop-card .prop-card__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2530;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--pc-element-radius);
  padding: 10px 12px;
  width: 200px;
  font-family: var(--pc-font-primary);
  font-style: normal;
  font-size: 0.75rem;
  color: #ccc;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: all var(--pc-transition-normal);
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.prop-card .prop-card__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a2530;
}

.prop-card .prop-card__info-icon:hover .prop-card__tooltip {
  opacity: 1;
  visibility: visible;
}

.prop-card .prop-card__tooltip-title {
  font-weight: 600;
  color: var(--pc-color-text-primary);
  margin-bottom: 4px;
}

.prop-card .prop-card__tooltip-highlight {
  color: var(--pc-color-hit-text);
  font-weight: 600;
}

/* Defense rank tooltip - position below and to the right */
.prop-card .def-rank-stat .prop-card__tooltip {
  bottom: auto;
  top: calc(100% + 8px);
  left: 0;
  transform: none;
}

.prop-card .def-rank-stat .prop-card__tooltip::after {
  top: auto;
  bottom: 100%;
  left: 16px;
  transform: none;
  border-top-color: transparent;
  border-bottom-color: #1a2530;
}

/* Hide mobile details element by default */
.prop-card .def-rank-stat .def-rank-details {
  display: none;
}

/* Mobile: click to toggle between rank and details */
@media (max-width: 1000px) {
  .prop-card .def-rank-stat {
    cursor: pointer;
    min-height: 88px;
    min-width: 100px;
    padding: 18px 16px;
  }

  /* Hide tooltip popup on mobile */
  .prop-card .def-rank-stat .prop-card__tooltip {
    display: none !important;
  }

  /* When showing details, hide the rank value and label */
  .prop-card .def-rank-stat.show-details .stat-value,
  .prop-card .def-rank-stat.show-details .stat-label {
    display: none;
  }

  /* Show details content when active */
  .prop-card .def-rank-stat.show-details .def-rank-details {
    display: block;
    font-size: 1.65rem;
    line-height: 1.6;
    text-align: center;
    color: var(--pc-color-text-primary);
    padding: 10px;
  }
}

/* =====================================================================
   CHART (inline with stat boxes)
   ===================================================================== */
.prop-card .prop-card__chart,
.prop-card .chart-box {
  flex: 1 1 auto;
  background: var(--pc-color-bg-element);
  border: 1px solid var(--pc-color-border-light);
  border-radius: var(--pc-element-radius);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.prop-card .prop-card__chart-header,
.prop-card .chart-box .chart-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.prop-card .prop-card__chart-label,
.prop-card .chart-box .chart-label {
  font-size: 0.55rem;
  color: var(--pc-color-text-muted);
}

.prop-card .prop-card__bar-chart,
.prop-card .bar-chart {
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 28px;
  position: relative;
}

.prop-card .prop-card__bar,
.prop-card .bar-chart .bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease, background 0.3s ease;
}

.prop-card .prop-card__bar--hit,
.prop-card .bar-chart .bar.hit {
  background: var(--pc-color-hit);
}

.prop-card .prop-card__bar--miss,
.prop-card .bar-chart .bar.miss {
  background: var(--pc-color-miss);
}

.prop-card .prop-card__bar-line,
.prop-card .bar-chart .line-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transition: bottom 0.3s ease;
}

/* Bar Chart Value Labels */
.prop-card .bar-chart .bar {
  position: relative;
}

.prop-card .bar-chart .bar .bar-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  margin-bottom: 2px;
  z-index: 10;
}

/* =====================================================================
   LEGACY CHIPS (Removed - now using stat boxes and bar chart)
   ===================================================================== */
.prop-card .chips {
  display: none !important;
}

.prop-card .chip {
  display: none !important;
}

/* =====================================================================
   ALT LINES
   ===================================================================== */
.prop-card .alt-title {
  color: var(--pc-color-text-muted);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.prop-card .alt-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.prop-card .alt-strip::-webkit-scrollbar {
  height: 3px;
}

.prop-card .alt-strip::-webkit-scrollbar-thumb {
  background: var(--pc-color-border);
  border-radius: 3px;
}

.prop-card .alt-btn {
  all: unset;
  scroll-snap-align: start;
  flex: 0 0 auto;
  cursor: pointer;
  background: var(--pc-color-bg-element);
  border: 1px solid var(--pc-color-border);
  padding: 6px 10px;
  border-radius: var(--pc-element-radius);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--pc-color-text-primary);
  transition: all var(--pc-transition-fast);
}

.prop-card .alt-btn span {
  color: var(--pc-color-text-secondary);
  font-weight: 500;
  font-size: 0.7rem;
}

.prop-card .alt-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.prop-card .alt-btn.active {
  background: var(--pc-color-accent-bg);
  border-color: var(--pc-color-accent-border);
  color: var(--pc-color-accent);
}

.prop-card .alt-btn.active span {
  color: var(--pc-color-accent);
}

/* =====================================================================
   ACTIONS
   ===================================================================== */
.prop-card .prop-card__actions,
.prop-card .ou {
  display: flex;
  gap: 8px;
}

.prop-card .prop-card__btn,
.prop-card .ou button {
  all: unset;
  flex: 1;
  padding: 8px 12px;
  font-family: var(--pc-font-primary);
  font-weight: 600;
  font-size: 0.75rem;
  border: none;
  border-radius: var(--pc-element-radius);
  cursor: pointer;
  transition: all var(--pc-transition-normal);
  text-align: center;
}

.prop-card .prop-card__btn--primary {
  background: #1a2a3a;
  color: var(--pc-color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.prop-card .prop-card__btn--primary:hover {
  background: #243444;
}

.prop-card .prop-card__btn--secondary,
.prop-card .view-stats {
  background: var(--pc-color-accent-bg);
  color: var(--pc-color-accent);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.2);
}

.prop-card .prop-card__btn--secondary:hover,
.prop-card .view-stats:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.25);
}

.prop-card .prop-card__btn--danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.prop-card .prop-card__btn--danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* Hide remove button in suggested props, show add button */
#suggested-props-container .prop-card .remove-from-parlay-expanded {
  display: none !important;
}

/* Wide screen: Show remove button when card is in-parlay (in suggested container) */
@media (min-width: 1001px) {
  #suggested-props-container .prop-card.in-parlay .remove-from-parlay-expanded {
    display: block !important;
  }
  #suggested-props-container .prop-card.in-parlay .add-to-parlay-expanded {
    display: none !important;
  }

  /* In Parlay Filter: Hide props that are NOT in parlay when filter is active */
  #suggested-props-container.in-parlay-filter-active .suggested-prop:not(.in-parlay) {
    display: none !important;
  }
}

/* Hide props without Under data when global Under mode is active */
.suggested-prop.hidden-no-under {
  display: none !important;
}

/* Hide parlay props when global mode doesn't match their side */
/* e.g., if prop is in parlay as Over, hide when viewing Under mode */
.suggested-prop.hidden-parlay-side-mismatch {
  display: none !important;
}

/* Hide add button in parlay, show remove button */
#your-parlay-container .prop-card .add-to-parlay-expanded {
  display: none !important;
}

/* Hide Over/Under buttons */
.prop-card .ou .over,
.prop-card .ou .under {
  display: none;
}

/* =====================================================================
   EXPAND INDICATOR - Hidden (props always expanded)
   ===================================================================== */
.prop-card .prop-card__expand {
  display: none !important;
}

/* =====================================================================
   LEGACY STEPPER (Removed - now using line-toggle)
   ===================================================================== */
.prop-card .stepper {
  display: none !important;
}

/* Lock toggle - hidden by default, shown only in parlay container */
.prop-card .lock-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.prop-card .lock-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.prop-card .lock-toggle .lock-icon {
  width: 14px;
  height: 14px;
}

/* Show unlocked icon by default, hide locked icon */
.prop-card .lock-toggle .lock-icon--unlocked {
  display: block;
}

.prop-card .lock-toggle .lock-icon--locked {
  display: none;
}

/* When locked: show locked icon, hide unlocked */
.prop-card .lock-toggle.locked .lock-icon--unlocked {
  display: none;
}

.prop-card .lock-toggle.locked .lock-icon--locked {
  display: block;
}

/* Locked state styling */
.prop-card .lock-toggle.locked {
  background: rgba(2, 210, 167, 0.2);
  color: #02d2a7;
}

.prop-card .lock-toggle.locked:hover {
  background: rgba(2, 210, 167, 0.3);
}


/* Steppers + Lock wrapper - keeps them adjacent */
.prop-card .steppers-lock-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Show lock toggle only in parlay container */
#your-parlay-container .prop-card .lock-toggle {
  display: flex;
  margin-left: 4px;
}

/* Locked prop card styling - desktop only */
@media (min-width: 1001px) {
  #your-parlay-container .prop-card.locked-prop {
    border-color: rgba(2, 210, 167, 0.4);
    box-shadow: 0 0 0 1px rgba(2, 210, 167, 0.2);
  }

  #your-parlay-container .prop-card.locked-prop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 210, 167, 0.05) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
  }
}

/* =====================================================================
   LEGACY CTA BUTTONS (Removed from header - using expanded section only)
   ===================================================================== */
.prop-card .parlay-ctas {
  display: none !important;
}

/* =====================================================================
   SUGGESTED LIST SPECIFIC STYLES
   ===================================================================== */
#suggested-props-container .prop-card .pc-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#suggested-props-container .prop-card .title-col {
  flex: 1;
  min-width: 0;
}

#suggested-props-container .prop-card .prop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =====================================================================
   SUGGESTED PROPS CONTAINER
   ===================================================================== */
#suggested-props-container .prop-card .pc-row {
  padding-bottom: 10px;
}

/* =====================================================================
   PARLAY LIST SPECIFIC STYLES
   ===================================================================== */
#your-parlay-container .prop-card .pc-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Hide "Add to Parlay" button in expanded section when in parlay */
#your-parlay-container .prop-card .add-to-parlay-expanded {
  display: none !important;
}

/* =====================================================================
   COMPACT BUTTONS & MOBILE-ONLY ELEMENTS - Hidden on desktop
   ===================================================================== */
.prop-card .add-to-parlay-compact,
.prop-card .remove-from-parlay-compact {
  display: none;
}

/* Last 5 hit rate stat box - hidden on desktop, shown on mobile */
.prop-card .last5-stat {
  display: none;
}

/* Hit bars - hidden on desktop, shown on mobile */
.prop-card .last5-stat .hit-bars {
  display: none;
}

/* View stats button in stats row - hidden on desktop, shown on mobile */
.prop-card .view-stats-box {
  display: none;
}

/* MLB hides the Last 5 hit-rate box on cards — MLB props show a numeric
   Matchup grade + a Grade ring in the stats row instead. The bar-chart
   summary doesn't carry useful signal next to the model-driven grades. */
body.is-mlb-route .prop-card .last5-stat {
  display: none !important;
}

/* MLB Matchup + Score + Rate + Form boxes are all click-to-open-popup on
   mobile (handlers wired in propCardsMLB.js, popup HTML reused from the
   tableViewMLB bundle). The pointer cursor signals interactivity so the
   affordance reads as a button. */
body.is-mlb-route .prop-card .def-rank-stat,
body.is-mlb-route .prop-card .grade-stat,
body.is-mlb-route .prop-card .rate-stat,
body.is-mlb-route .prop-card .form-stat {
  cursor: pointer;
}

/* MLB Score / Rate / Form boxes mirror the Matchup box: tier-colored
   number, no SVG ring. The .rate-stat and .form-stat boxes are injected
   per-card by propCardsMLB.js using the same .stat-value > .rank-value
   structure as the Matchup pill, so this single block colors all four. */
body.is-mlb-route .prop-card .grade-stat .rank-value,
body.is-mlb-route .prop-card .rate-stat  .rank-value,
body.is-mlb-route .prop-card .form-stat  .rank-value {
  font-weight: 700;
  transition: color var(--pc-transition-fast);
}
body.is-mlb-route .prop-card .grade-stat[data-rank-tier="elite"]   .rank-value,
body.is-mlb-route .prop-card .rate-stat[data-rank-tier="elite"]    .rank-value,
body.is-mlb-route .prop-card .form-stat[data-rank-tier="elite"]    .rank-value { color: #22c55e; }
body.is-mlb-route .prop-card .grade-stat[data-rank-tier="great"]   .rank-value,
body.is-mlb-route .prop-card .rate-stat[data-rank-tier="great"]    .rank-value,
body.is-mlb-route .prop-card .form-stat[data-rank-tier="great"]    .rank-value { color: #4ade80; }
body.is-mlb-route .prop-card .grade-stat[data-rank-tier="good"]    .rank-value,
body.is-mlb-route .prop-card .rate-stat[data-rank-tier="good"]     .rank-value,
body.is-mlb-route .prop-card .form-stat[data-rank-tier="good"]     .rank-value { color: #86efac; }
body.is-mlb-route .prop-card .grade-stat[data-rank-tier="neutral"] .rank-value,
body.is-mlb-route .prop-card .rate-stat[data-rank-tier="neutral"]  .rank-value,
body.is-mlb-route .prop-card .form-stat[data-rank-tier="neutral"]  .rank-value { color: #fbbf24; }
body.is-mlb-route .prop-card .grade-stat[data-rank-tier="poor"]    .rank-value,
body.is-mlb-route .prop-card .rate-stat[data-rank-tier="poor"]     .rank-value,
body.is-mlb-route .prop-card .form-stat[data-rank-tier="poor"]     .rank-value { color: #f87171; }
body.is-mlb-route .prop-card .grade-stat[data-rank-tier="bad"]     .rank-value,
body.is-mlb-route .prop-card .rate-stat[data-rank-tier="bad"]      .rank-value,
body.is-mlb-route .prop-card .form-stat[data-rank-tier="bad"]      .rank-value { color: #ef4444; }

/* 6 visible boxes (Stats / Score / Rate / Form / Matchup / Add) won't fit
   side-by-side at the default 90px min-width on a phone. Tighten the box
   sizing on MLB so the row stays one line; the value font also shrinks a
   notch so longer formatted strings (e.g. "31.5%") don't wrap. Mobile-only
   override — desktop view is hidden anyway. */
@media (max-width: 1000px) {
  body.is-mlb-route .prop-card.expanded .stats-row {
    gap: 8px;
  }
  body.is-mlb-route .prop-card.expanded .stat-box {
    min-width: 0;
    padding: 10px 6px;
  }
  body.is-mlb-route .prop-card.expanded .stat-box .stat-value {
    font-size: 1.1rem;
  }
  body.is-mlb-route .prop-card.expanded .stat-box .stat-label {
    font-size: 0.95rem;
  }

  /* Visual order on MLB: Stats / Score / Rate / Form / Matchup / Add.
     Markup order stays as the shared common-card template defines it; we
     just rearrange visually via flex `order` so we don't have to fork the
     template. Hidden boxes (vs-stat, last5-stat) keep order:0 — they're
     `display:none` so position is irrelevant. */
  body.is-mlb-route .prop-card.expanded .view-stats-box     { order: 1; }
  body.is-mlb-route .prop-card.expanded .grade-stat         { order: 2; }
  body.is-mlb-route .prop-card.expanded .rate-stat          { order: 3; }
  body.is-mlb-route .prop-card.expanded .form-stat          { order: 4; }
  body.is-mlb-route .prop-card.expanded .def-rank-stat      { order: 5; }
  body.is-mlb-route .prop-card.expanded .add-parlay-stat-box { order: 6; }
}

/* Mobile odds pill - hidden on desktop */
.prop-card .odds-pill-mobile {
  display: none;
}

/* Mobile control bar - hidden on desktop */
.prop-card .control-bar {
  display: none;
}

/* Mobile card actions - hidden on desktop */
.prop-card .card-actions {
  display: none;
}

/* Mobile remove button inline - hidden on desktop */
.prop-card .remove-btn-inline {
  display: none;
}

/* Mobile add button inline - hidden on desktop */
.prop-card .add-btn-inline {
  display: none;
}

/* Mobile circular remove button - hidden on desktop */
.prop-card .remove-btn-circle {
  display: none;
}

/* Mobile circular add button - hidden on desktop */
.prop-card .add-btn-circle {
  display: none;
}

/* Mobile row 1 (player + odds) - hidden on desktop */
.prop-card .mobile-row-1 {
  display: none;
}

/* Mobile matchup row - hidden on desktop */
.prop-card .matchup-row-mobile {
  display: none;
}

/* Mobile bet type selector - hidden on desktop */
.prop-card .mobile-bettype-selector {
  display: none;
}

/* Mobile content wrapper - on desktop, display contents normally */
.prop-card .mobile-content-wrapper {
  display: contents;
}

/* Card player row - on desktop, display as block (player info only) */
.prop-card .card-player-row {
  display: block;
}

/* Hide mobile double tap hint on desktop */
.mobile-double-tap-hint {
  display: none;
}

/* =====================================================================
   MOBILE RESPONSIVE - Matching mobileprops-v2.html demo design
   Clean, minimal prop cards with connecting lines
   ===================================================================== */
@media (max-width: 1000px) {
  :root {
    --pc-card-padding: 16px 0;
    --pc-card-radius: 0;
    --pc-element-radius: 6px;
  }

  /* Container - vertical list with no gaps (lines connect) */
  #suggested-props-container,
  #your-parlay-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ===== CARD BASE - No border/background, just content ===== */
  .prop-card {
    display: flex;
    flex-direction: column; /* Stack pc-row and expand section vertically */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 0;
    position: relative;
    overflow: visible !important; /* Allow connecting lines to extend beyond card */
  }

  #your-parlay-container {
    overflow: visible !important;
  }

  /* Hide matchup line at top (moved to bottom row) */
  .prop-card .matchup-line.game {
    display: none !important;
  }

  /* ===== MAIN ROW LAYOUT: Remove button + Content ===== */
  .prop-card .pc-row,
  #suggested-props-container .prop-card .pc-row,
  #your-parlay-container .prop-card .pc-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  /* ===== LEFT COLUMN: Remove circle + connecting lines ===== */
  .prop-card .remove-btn-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #00d3bd;
    color: #00d3bd;
    cursor: pointer;
    position: relative;
    margin: 52px 16px 0 8px; /* top margin to align with row 2 (control bar) */
    overflow: visible;
    font-size: 1.2rem;
    z-index: 1001 !important;
  }

  .prop-card .remove-btn-circle:active {
    background: #1a1f2a;
  }

  /* Show remove button in parlay container */
  #your-parlay-container .prop-card .remove-btn-circle {
    display: flex;
  }

  /* Hide remove button in suggested props */
  #suggested-props-container .prop-card .remove-btn-circle {
    display: none;
  }

  /* ===== LEFT COLUMN: Add circle (for suggested props) ===== */
  .prop-card .add-btn-circle {
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #00d3bd;
    color: #00d3bd;
    cursor: pointer;
    position: relative;
    margin: 48px 14px 0 6px;
    overflow: visible;
    font-size: 2rem;
    font-weight: 600;
    z-index: 1001 !important;
    padding-bottom: 4px; /* Push plus sign up slightly */
    transition: transform 0.1s ease, background 0.15s ease;
  }

  .prop-card .add-btn-circle:active {
    background: rgba(0, 211, 189, 0.2);
    transform: scale(0.95);
  }

  /* Show add button in suggested props */
  #suggested-props-container .prop-card .add-btn-circle {
    display: flex;
  }

  /* When card is in parlay, show checkmark instead of + */
  #suggested-props-container .prop-card.in-parlay .add-btn-circle {
    display: flex;
    font-size: 0; /* Hide the + */
  }

  /* Change the + to a checkmark when in parlay */
  #suggested-props-container .prop-card.in-parlay .add-btn-circle::before {
    content: '✓';
    font-size: 1.6rem;
    font-weight: bold;
  }

  /* Default state - subtle border and background for cards NOT in parlay */
  #suggested-props-container .prop-card:not(.in-parlay) {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    margin: 8px 4px;
    padding: 13px 9px !important; /* Slightly more padding to account for thinner border */
  }

  /* Teal border indicator when prop is in parlay */
  #suggested-props-container .prop-card.in-parlay {
    border: 2px solid rgba(0, 211, 189, 0.7) !important;
    border-radius: 12px !important;
    background: rgba(0, 211, 189, 0.05) !important;
    margin: 8px 4px;
    padding: 12px 8px !important;
  }

  /* Double tap hint text - hidden (feature removed) */
  .mobile-double-tap-hint {
    display: none;
  }

  /* Hide add button in parlay container */
  #your-parlay-container .prop-card .add-btn-circle {
    display: none;
  }

  /* ===== CONNECTING LINE BETWEEN PROPS ===== */
  /* Line extends upward from remove button to connect to previous prop */
  #your-parlay-container .prop-card .remove-btn-circle::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(0, 211, 189, 0.3);
    z-index: -1 !important;
  }

  /* Line height connecting remove btns */
  #your-parlay-container .prop-card .remove-btn-circle::before {
    bottom: 108%;
    height: 146px;
  }

  /* Extend line when bet type selector is open */
  #your-parlay-container .prop-card.bettype-selector-open + .prop-card .remove-btn-circle::before {
    height: 232px;
  }

  /* Extend line when card above is expanded (showing stats row) */
  #your-parlay-container .prop-card.expanded + .prop-card .remove-btn-circle::before {
    height: 254px;
  }

  /* Extend line when card above has both selector open AND expanded */
  #your-parlay-container .prop-card.bettype-selector-open.expanded + .prop-card .remove-btn-circle::before {
    height: 338px;
  }

  /* Hide line on first prop (nothing above to connect to) */
  #your-parlay-container .prop-card:first-child .remove-btn-circle::before {
    display: none;
  }

  /* ===== CONTENT AREA ===== */
  .prop-card .mobile-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0;
    gap: 2px;
    padding: 0 12px;
  }

  /* ===== ROW 1: Player Name + Odds (Mobile) ===== */
  .prop-card .mobile-row-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
  }

  .prop-card .mobile-player-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    overflow: visible;
  }

  .prop-card .mobile-player-info .pc-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 10px;
    align-self: center;
  }

  .prop-card .mobile-player-info .pc-avatar-clip {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: none;
  }

  .prop-card .mobile-player-info .pc-avatar {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none;
    transform: scale(1.3) translateY(10%);
  }

  .prop-card .mobile-player-info .pc-team-badge {
    bottom: -8px;
    right: -10px;
    width: 28px;
    height: 28px;
    padding: 2px;
  }

  .prop-card .mobile-player-name {
    font-size: 1.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
  }

  .prop-card .mobile-dot {
    width: 6px;
    height: 6px;
    background: #667;
    border-radius: 50%;
    margin: 0 10px;
    flex-shrink: 0;
    align-self: center;
  }

  .prop-card .mobile-team {
    font-size: 1.9rem;
    color: #999;
    white-space: nowrap;
  }

  .prop-card .mobile-pos {
    font-size: 1.9rem;
    color: #999;
    white-space: nowrap;
  }

  .prop-card .mobile-odds {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    margin-left: 0px;
  }

  /* Grade stat box visible on mobile */
  .prop-card .grade-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Mobile grade circle (in expanded stats row) */
  .prop-card .mobile-grade-circle {
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
  }

  .prop-card .grade-ring {
    width: 100%;
    height: 100%;
  }

  .prop-card .grade-ring-bg {
    stroke: rgba(255, 255, 255, 0.1);
  }

  .prop-card .grade-ring-fill {
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
  }

  .prop-card .mobile-grade-circle .grade-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
  }

  /* Grade circle colors by tier */
  .prop-card .mobile-grade-circle[data-tier="excellent"] .grade-ring-fill {
    stroke: #00F5D4;
  }
  .prop-card .mobile-grade-circle[data-tier="excellent"] .grade-value {
    color: #00F5D4;
  }

  .prop-card .mobile-grade-circle[data-tier="good"] .grade-ring-fill {
    stroke: #4ade80;
  }
  .prop-card .mobile-grade-circle[data-tier="good"] .grade-value {
    color: #4ade80;
  }

  .prop-card .mobile-grade-circle[data-tier="average"] .grade-ring-fill {
    stroke: #fbbf24;
  }
  .prop-card .mobile-grade-circle[data-tier="average"] .grade-value {
    color: #fbbf24;
  }

  .prop-card .mobile-grade-circle[data-tier="poor"] .grade-ring-fill {
    stroke: #f97316;
  }
  .prop-card .mobile-grade-circle[data-tier="poor"] .grade-value {
    color: #f97316;
  }

  .prop-card .mobile-grade-circle[data-tier="bad"] .grade-ring-fill {
    stroke: #ef4444;
  }
  .prop-card .mobile-grade-circle[data-tier="bad"] .grade-value {
    color: #ef4444;
  }

  /* Hide desktop player row on mobile */
  .prop-card .card-player-row {
    display: none !important;
  }

  /* Hide bet type pills row (we use type-pill in control bar) */
  .prop-card .prop-card__bet-types {
    display: none !important;
  }

  .prop-card .player-line {
    display: none !important;
  }

  /* Hide old odds elements */
  .prop-card .odds-pill-mobile {
    display: none !important;
  }

  /* Hide remove button inline */
  .prop-card .remove-btn-inline {
    display: none !important;
  }

  /* Hide add button inline on mobile (using circular button instead) */
  .prop-card .add-btn-inline {
    display: none !important;
  }

  /* ===== ROW 2: Prop Type + Steppers ===== */
  .prop-card .control-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 2px;
    gap: 12px;
  }

  /* Static positioning for steppers in suggested props only (not parlay container) - always right-aligned */
  #suggested-props-container .suggested-prop .control-bar .steppers {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Hide over-label and line-num, odds-badge in control bar */
  .prop-card .stat-odds {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
  }

  .prop-card .stat-odds .over-label,
  .prop-card .stat-odds .line-num,
  .prop-card .stat-odds .odds-badge {
    display: none !important;
  }

  /* ===== OVER/UNDER TOGGLE ===== */
  .prop-card .ou-toggle {
    display: flex;
    gap: 0;
    margin-right: 12px;
    border-radius: 123px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .prop-card .ou-toggle--over-only {
    border: none;
  }

  .prop-card .ou-pill {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #667;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .prop-card .ou-toggle--over-only .ou-pill {
    background: transparent;
    color: #2dd4bf;
    cursor: default;
    padding: 12px 18px;
  }

  .prop-card .ou-pill:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .prop-card .ou-toggle--over-only .ou-pill:first-child {
    border-right: none;
  }

  .prop-card .ou-pill:active:not(.active) {
    background: rgba(45, 212, 191, 0.1);
  }

  .prop-card .ou-pill.active {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
  }

  .prop-card .ou-pill--over.active {
    color: #22c55e; /* Green for Over */
  }

  .prop-card .ou-pill--under.active {
    color: #ef4444; /* Red for Under */
  }

  /* Type pill with Over + Line + Stat */
  .prop-card .type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 123px;
    font-size: 1.5em;
    font-weight: 600;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
  }

  .prop-card .type-pill:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .prop-card .type-pill .chevron {
    font-size: 1.5rem;
    color: #667;
    margin-left: 6px;
  }

  /* Hide chevron when no alternative bet types */
  .prop-card[data-has-alt-bets="false"] .type-pill .chevron {
    display: none;
  }

  /* Steppers - right aligned, larger touch targets */
  .prop-card .steppers {
    display: flex;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 123px;
    overflow: hidden;
    width: auto;
  }

  .prop-card .steppers .step {
    width: 125px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #889;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .prop-card .steppers .step:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .prop-card .steppers .step:active {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
  }

  /* ===== MOBILE BET TYPE SELECTOR ===== */
  .prop-card .mobile-bettype-selector {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 0;
    margin-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Force flex display when shown via jQuery */
  .prop-card.bettype-selector-open .mobile-bettype-selector {
    display: flex !important;
  }

  .prop-card .mobile-bettype-selector .bettype-pill {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #889;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 123px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }

  .prop-card .mobile-bettype-selector .bettype-pill:active {
    background: rgba(45, 212, 191, 0.15);
  }

  .prop-card .mobile-bettype-selector .bettype-pill.active {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(45, 212, 191, 0.4);
    color: #2dd4bf;
  }

  .prop-card .mobile-bettype-selector .bettype-pill .bt-lbl {
    color: inherit;
  }

  /* Rotate chevron when selector is open */
  .prop-card.bettype-selector-open .type-pill .chevron {
    transform: rotate(180deg);
  }

  .prop-card .type-pill .chevron {
    transition: transform 0.2s ease;
  }

  /* ===== ROW 3: Matchup + Game Time ===== */
  /* We need to create/show the matchup info at the bottom */
  .prop-card .mobile-content-wrapper::after {
    content: attr(data-matchup-display);
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #667;
  }

  /* Create matchup row element styling */
  .prop-card .matchup-row-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.75rem;
    color: #889;
    margin-top: 4px;
  }

  .prop-card .matchup-row-mobile .matchup-text {
    color: #889;
  }

  .prop-card .matchup-row-mobile .game-time-mobile {
    color: #889;
    text-align: right;
    min-width: 72px;
    flex-shrink: 0;
  }

  /* Hide old prop controls on mobile */
  .prop-card .prop-controls {
    display: none !important;
  }

  /* ===== EXPANDED STATE - Hidden by default on mobile ===== */
  .prop-card .expand {
    display: none !important;
  }

  /* Show expand section when card is expanded */
  .prop-card.expanded .expand {
    display: block !important;
    padding: 6px 12px 0px 76px; /* 76px left aligns with content */
    margin-top: 4px;
  }

  /* Stats row as single horizontal line (row 4) */
  .prop-card.expanded .stats-row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 0;
  }

  /* Stat boxes - touch-friendly cards (reduced height by 10%) */
  .prop-card.expanded .stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
    min-width: 90px;
    min-height: 79px;
  }

  .prop-card.expanded .stat-box .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .prop-card.expanded .stat-box .stat-label {
    font-size: 1.25rem;
    color: #889;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  /* Hide info icon and extra details on mobile expanded */
  .prop-card.expanded .stat-box .prop-card__info-icon,
  .prop-card.expanded .stat-box .def-rank-details {
    display: none;
  }

  /* Show last5-stat on mobile expanded */
  .prop-card.expanded .last5-stat {
    display: flex !important;
  }

  /* Last 5 Hit visual bars on mobile */
  .prop-card.expanded .last5-stat .stat-value {
    display: none; /* Hide numeric value on mobile */
  }

  .prop-card.expanded .last5-stat .hit-bars {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: flex-end;
    height: 28px;
    margin-bottom: 4px;
  }

  .prop-card.expanded .last5-stat .hit-bars .bar {
    width: 8px;
    height: 24px;
    border-radius: 3px;
    background: var(--pc-color-border-light, #444);
    transition: background 0.2s ease;
  }

  .prop-card.expanded .last5-stat .hit-bars .bar.hit {
    background: #22c55e; /* Green for hit */
  }

  .prop-card.expanded .last5-stat .hit-bars .bar.miss {
    background: #ef4444; /* Red for miss */
  }

  /* Last 5 Hit - default: show compact view, hide chart */
  .prop-card.expanded .last5-stat .last5-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .prop-card.expanded .last5-stat .last5-chart {
    display: none;
    width: 100%;
  }

  /* Last 5 Hit - expanded chart view */
  .prop-card.expanded .stats-row.last5-chart-expanded .def-rank-stat,
  .prop-card.expanded .stats-row.last5-chart-expanded .vs-stat,
  .prop-card.expanded .stats-row.last5-chart-expanded .view-stats-box,
  .prop-card.expanded .stats-row.last5-chart-expanded .grade-stat,
  .prop-card.expanded .stats-row.last5-chart-expanded .add-parlay-stat-box,
  #suggested-props-container .prop-card.expanded .stats-row.last5-chart-expanded .add-parlay-stat-box {
    display: none !important;
  }

  .prop-card.expanded .stats-row.last5-chart-expanded .last5-stat {
    flex: 1 1 auto;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }

  .prop-card.expanded .stats-row.last5-chart-expanded .last5-stat .last5-compact {
    display: none;
  }

  .prop-card.expanded .stats-row.last5-chart-expanded .last5-stat .last5-chart {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  /* Transparent header text for Last 5 Hit expanded */
  .prop-card.expanded .stats-row.last5-chart-expanded .last5-stat .chart-header-mobile {
    color: transparent;
  }

  .prop-card.expanded .stats-row.last5-chart-expanded .last5-stat .chart-header-mobile .chart-line-label {
    color: transparent;
  }

  .prop-card.expanded .stats-row.last5-chart-expanded .last5-stat .bar-chart-mobile .bar .bar-tooltip {
    color: #fff;
  }

  /* Mobile bar chart header */
  .prop-card .last5-stat .chart-header-mobile {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.75rem;
    color: #889;
    margin-bottom: 4px;
    padding: 0 4px;
    flex-shrink: 0;
  }

  .prop-card .last5-stat .chart-header-mobile .chart-label {
    display: none;
  }

  .prop-card .last5-stat .chart-header-mobile .chart-line-label {
    color: #00d3bd;
    font-weight: 600;
  }

  /* Mobile bar chart container */
  .prop-card .last5-stat .bar-chart-mobile {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    height: 50px;
    max-height: 50px;
    position: relative;
    padding: 0 4px;
    gap: 3px;
    overflow: visible;
  }

  .prop-card .last5-stat .bar-chart-mobile .line-marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px dashed #000;
    background: transparent;
    z-index: 3;
  }

  .prop-card .last5-stat .bar-chart-mobile .bar {
    flex: 1;
    max-width: none;
    border-radius: 4px 4px 0 0;
    background: #444;
    position: relative;
    z-index: 2;
    transition: height 0.2s ease;
  }

  .prop-card .last5-stat .bar-chart-mobile .bar.hit {
    background: #22c55e;
  }

  .prop-card .last5-stat .bar-chart-mobile .bar.miss {
    background: #ef4444;
  }

  .prop-card .last5-stat .bar-chart-mobile .bar .bar-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: black;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 0px;
  }

  /* ==================== VS OPP HIT - EXPANDED CHART VIEW ==================== */

  /* vs-stat structure: vs-compact (default) and vs-chart (expanded) */
  .prop-card.expanded .vs-stat .vs-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .prop-card.expanded .vs-stat .vs-chart {
    display: none;
    width: 100%;
  }

  /* VS Opp Hit - expanded chart view */
  .prop-card.expanded .stats-row.vs-opp-chart-expanded .def-rank-stat,
  .prop-card.expanded .stats-row.vs-opp-chart-expanded .last5-stat,
  .prop-card.expanded .stats-row.vs-opp-chart-expanded .view-stats-box,
  .prop-card.expanded .stats-row.vs-opp-chart-expanded .grade-stat,
  .prop-card.expanded .stats-row.vs-opp-chart-expanded .add-parlay-stat-box,
  #suggested-props-container .prop-card.expanded .stats-row.vs-opp-chart-expanded .add-parlay-stat-box {
    display: none !important;
  }

  .prop-card.expanded .stats-row.vs-opp-chart-expanded .vs-stat {
    flex: 1 1 auto;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }

  .prop-card.expanded .stats-row.vs-opp-chart-expanded .vs-stat .vs-compact {
    display: none;
  }

  .prop-card.expanded .stats-row.vs-opp-chart-expanded .vs-stat .vs-chart {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  /* Transparent header text for Vs Opp Hit expanded */
  .prop-card.expanded .stats-row.vs-opp-chart-expanded .vs-stat .chart-header-mobile {
    color: transparent;
  }

  .prop-card.expanded .stats-row.vs-opp-chart-expanded .vs-stat .chart-header-mobile .chart-line-label {
    color: transparent;
  }

  .prop-card.expanded .stats-row.vs-opp-chart-expanded .vs-stat .bar-chart-vs-opp .bar .bar-tooltip {
    color: #fff;
  }

  /* Mobile vs-opp bar chart header */
  .prop-card .vs-stat .chart-header-mobile {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.75rem;
    color: #889;
    margin-bottom: 4px;
    padding: 0 4px;
    flex-shrink: 0;
  }

  .prop-card .vs-stat .chart-header-mobile .chart-label {
    display: none;
  }

  .prop-card .vs-stat .chart-header-mobile .chart-line-label {
    color: #00d3bd;
    font-weight: 600;
  }

  /* Mobile vs-opp bar chart container */
  .prop-card .vs-stat .bar-chart-vs-opp {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    height: 50px;
    max-height: 50px;
    position: relative;
    padding: 0 4px;
    gap: 3px;
    overflow: visible;
  }

  .prop-card .vs-stat .bar-chart-vs-opp .line-marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px dashed #000;
    background: transparent;
    z-index: 3;
  }

  .prop-card .vs-stat .bar-chart-vs-opp .bar {
    flex: 1;
    max-width: none;
    border-radius: 4px 4px 0 0;
    background: #444;
    position: relative;
    z-index: 2;
    transition: height 0.2s ease;
  }

  .prop-card .vs-stat .bar-chart-vs-opp .bar.hit {
    background: #22c55e;
  }

  .prop-card .vs-stat .bar-chart-vs-opp .bar.miss {
    background: #ef4444;
  }

  .prop-card .vs-stat .bar-chart-vs-opp .bar .bar-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: black;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 0px;
  }

  /* Opp Def Rank - expanded details view */
  .prop-card.expanded .stats-row.def-rank-expanded .last5-stat,
  .prop-card.expanded .stats-row.def-rank-expanded .vs-stat,
  .prop-card.expanded .stats-row.def-rank-expanded .view-stats-box,
  .prop-card.expanded .stats-row.def-rank-expanded .grade-stat,
  .prop-card.expanded .stats-row.def-rank-expanded .add-parlay-stat-box,
  #suggested-props-container .prop-card.expanded .stats-row.def-rank-expanded .add-parlay-stat-box {
    display: none !important;
  }

  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat {
    flex: 1 1 auto;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }

  /* Hide rank value and label, show details text when expanded */
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat .stat-value,
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat .stat-label {
    display: none !important;
  }

  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat .def-rank-details {
    display: block !important;
    font-size: 1.25rem;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding: 16px 8px;
  }


  /* Tier colors for ordinal number in expanded def-rank details */
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat[data-rank-tier="elite"] .rank-ordinal {
    color: #22c55e;
  }
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat[data-rank-tier="great"] .rank-ordinal {
    color: #4ade80;
  }
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat[data-rank-tier="good"] .rank-ordinal {
    color: #86efac;
  }
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat[data-rank-tier="neutral"] .rank-ordinal {
    color: #fbbf24;
  }
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat[data-rank-tier="poor"] .rank-ordinal {
    color: #f87171;
  }
  .prop-card.expanded .stats-row.def-rank-expanded .def-rank-stat[data-rank-tier="bad"] .rank-ordinal {
    color: #ef4444;
  }

  /* Mobile stat box order: view-stats, grade, def-rank, last5, vs-opp, add-parlay */
  .prop-card.expanded .view-stats-box {
    order: 1;
  }
  .prop-card.expanded .grade-stat {
    order: 2;
  }
  .prop-card.expanded .def-rank-stat {
    order: 3;
  }
  .prop-card.expanded .last5-stat {
    order: 4;
  }
  .prop-card.expanded .vs-stat {
    order: 5;
  }
  .prop-card.expanded .add-parlay-stat-box {
    order: 6;
  }

  /* Show view-stats-box on mobile expanded (reduced height by 10%) */
  .prop-card.expanded .view-stats-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
    min-width: 90px;
    min-height: 79px;
    flex: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }

  .prop-card.expanded .view-stats-box:active {
    background: rgba(255, 255, 255, 0.18);
  }

  .prop-card.expanded .view-stats-box .view-stats-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #14b8a6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Add to Parlay button in stats row (mobile only) */
  .prop-card.expanded .add-parlay-stat-box {
    display: none; /* Hidden by default, shown only in suggested-props */
  }

  #suggested-props-container .prop-card.expanded .add-parlay-stat-box {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border: 2px solid #00d3bd;
    background: rgba(0, 211, 189, 0.08);
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
  }

  #suggested-props-container .prop-card.expanded .add-parlay-stat-box:active {
    background: rgba(0, 211, 189, 0.2);
    transform: scale(0.97);
  }

  #suggested-props-container .prop-card.expanded .add-parlay-stat-box .stat-label {
    color: #00d3bd;
    font-size: 1.25rem;
    font-weight: 600;
  }

  /* When prop is in parlay, change to "Added" state */
  #suggested-props-container .prop-card.in-parlay .add-parlay-stat-box {
    border-color: rgba(0, 211, 189, 0.5);
    background: rgba(0, 211, 189, 0.15);
  }

  #suggested-props-container .prop-card.in-parlay .add-parlay-stat-box .stat-label {
    font-size: 0; /* Hide "Add" */
  }

  #suggested-props-container .prop-card.in-parlay .add-parlay-stat-box .stat-label::before {
    content: 'Added';
    font-size: 1.25rem;
  }

  /* Hide the circular + button in suggested props (now using stats row button) */
  #suggested-props-container .prop-card .add-btn-circle {
    display: none !important;
  }

  /* Hide chart box on mobile - using stat boxes instead */
  .prop-card.expanded .chart-box {
    display: none !important;
  }

  /* Hide action buttons on mobile (use circular buttons instead) */
  .prop-card .prop-card__actions,
  .prop-card .card-actions {
    display: none !important;
  }

  /* Hide alt lines on mobile */
  .prop-card .alt-title,
  .prop-card .alt-strip {
    display: none !important;
  }

  /* Force suggested props to always show expanded content on mobile */
  #suggested-props-container .prop-card .expand {
    display: block !important;
  }

  #suggested-props-container .prop-card .stats-row {
    display: flex !important;
  }

  /* ===== SUGGESTED PROPS: Inline + button layout ===== */

  /* Content wrapper full width for suggested props */
  #suggested-props-container .prop-card .mobile-content-wrapper {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Grade circle in expanded stats row for suggested props */
  #suggested-props-container .prop-card .mobile-grade-circle {
    width: 38px;
    height: 38px;
  }

  #suggested-props-container .prop-card .mobile-grade-circle .grade-value {
    font-size: 0.8rem;
  }

  /* Control bar layout for suggested props */
  #suggested-props-container .prop-card .control-bar {
    padding-left: 0;
    justify-content: flex-start;
  }

  /* O/U toggle and type pill stay left */
  #suggested-props-container .prop-card .control-bar .stat-odds {
    margin-left: 0;
    margin-right: 0;
  }

  /* Push steppers to the far right */
  #suggested-props-container .prop-card .control-bar .steppers {
    margin-left: auto;
  }

  /* Adjust expanded section padding to align with content */
  #suggested-props-container .prop-card.expanded .expand {
    padding-left: 12px;
    padding-right: 12px;
  }

  .prop-card .lock-toggle {
    width: 58px;
    height: 58px;
  }

  .prop-card .lock-toggle .lock-icon {
    width: 20px;
    height: 20px;
  }

  #your-parlay-container .prop-card .lock-toggle {
    margin-left: 10px; /* Counteract parent gap to sit closer to steppers */
    display: none;
  }

  #your-parlay-container .prop-card.expanded .lock-toggle {
    display: flex;
  }

  /* Mobile cards are always expanded → taller intrinsic size hint */
  #suggested-props-container > .suggested-prop {
    contain-intrinsic-size: auto 240px;
  }
}

@media (max-width: 480px) {
  /* Smaller screens - still very touch friendly */
  .prop-card {
    padding: 14px 0;
  }

  .prop-card .mobile-player-name {
    font-size: 1.35rem;
  }

  .prop-card .mobile-odds {
    font-size: 1.3rem;
  }

  /* Over/Under toggle - smaller on small screens */
  .prop-card .ou-pill {
    padding: 10px 14px;
    font-size: 1.1rem;
  }

  .prop-card .type-pill {
    font-size: 1.25rem;
    padding: 14px 18px;
  }

  .prop-card .steppers .step {
    width: 84px;
    height: 56px;
    font-size: 1.9rem;
  }

  .prop-card .matchup-row-mobile {
    font-size: 1.3rem;
  }

  /* Stat boxes - touch-friendly size on small screens (reduced by 10%) */
  .prop-card.expanded .stat-box {
    padding: 16px 12px;
    min-height: 72px;
    min-width: 80px;
    gap: 5px;
  }

  .prop-card.expanded .stat-box .stat-value {
    font-size: 1.85rem;
  }

  .prop-card.expanded .stat-box .stat-label {
    font-size: 1.35rem;
  }

  /* Defensive rank stat touch target */
  .prop-card .def-rank-stat {
    min-height: 72px;
    min-width: 88px;
    padding: 14px 12px;
  }

  .prop-card .def-rank-stat.show-details .def-rank-details {
    font-size: 1.45rem;
  }

  .prop-card.expanded .view-stats-box {
    min-height: 72px;
    padding: 16px 12px;
  }

  .prop-card.expanded .view-stats-box .view-stats-text {
    font-size: 1.6rem;
  }

  /* Stats row gap */
  .prop-card.expanded .stats-row {
    gap: 10px;
  }

  /* Suggested props: grade circle in stats row for small screens */
  #suggested-props-container .prop-card .mobile-grade-circle {
    width: 34px;
    height: 34px;
  }

  #suggested-props-container .prop-card .mobile-grade-circle .grade-value {
    font-size: 0.7rem;
  }

  /* Add parlay button text smaller on small screens */
  #suggested-props-container .prop-card.expanded .add-parlay-stat-box .stat-label {
    font-size: 1.1rem;
  }

  #suggested-props-container .prop-card.in-parlay .add-parlay-stat-box .stat-label::before {
    font-size: 1.1rem;
  }
}


/* =====================================================================
   HIDDEN UTILITY ELEMENTS
   ===================================================================== */
.prop-card .player-line {
  display: none;
}

/* =====================================================================
   ENSURE PROP CONTROLS VISIBILITY
   ===================================================================== */
.prop-card .prop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Show line toggle by default in prop controls */
.prop-card .prop-controls .line-toggle {
  display: flex;
}

/* =====================================================================
   ACTIONS ROW LAYOUT
   ===================================================================== */
.prop-card .prop-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.prop-card .add-to-parlay-expanded {
  all: unset;
  flex: 1;
  padding: 14px;
  font-family: var(--pc-font-primary);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--pc-element-radius);
  cursor: pointer;
  transition: all var(--pc-transition-normal);
  text-align: center;
  background: #1a2a3a;
  color: var(--pc-color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.prop-card .add-to-parlay-expanded:hover {
  background: #243444;
}

/* Hide expanded Add to Parlay when already in parlay */
.prop-card.in-parlay .add-to-parlay-expanded {
  display: none;
}

/* =====================================================================
   STATS ROW CONTENT
   ===================================================================== */
.prop-card .stats-row + .chart-box {
  margin-top: 0;
}

/* =====================================================================
   CONTENT ROW (Stats + Chart side by side)
   ===================================================================== */
.prop-card .expand > .chart-box {
  margin-bottom: 16px;
}

/* =====================================================================
   MATCHUP LINE TEXT STYLING
   ===================================================================== */
.prop-card .matchup-line .prop-card__teams {
  color: var(--pc-color-text-teams);
  font-weight: 500;
}

/* =====================================================================
   PARLAY CONTAINER - MOBILE LAYOUT ON WIDE SCREENS
   Props added to parlay use mobile-style layout even on desktop
   ===================================================================== */
@media (min-width: 1001px) {
  /* Container setup - vertical list with no gaps for connecting lines */
  #your-parlay-container {
    gap: 0 !important;
  }

  /* Card base - transparent background like mobile */
  #your-parlay-container .prop-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    overflow: visible !important;
  }

  /* Hide desktop matchup line at top */
  #your-parlay-container .prop-card .matchup-line.game {
    display: none !important;
  }

  /* Main row layout */
  #your-parlay-container .prop-card .pc-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Show remove button circle */
  #your-parlay-container .prop-card .remove-btn-circle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #00d3bd;
    color: #00d3bd;
    cursor: pointer;
    position: relative;
    margin: 26px 10px 0 6px;
    overflow: visible;
    font-size: 1.1rem;
    z-index: 1001;
  }

  #your-parlay-container .prop-card .remove-btn-circle:hover {
    background: rgba(0, 211, 189, 0.15);
  }

  /* Connecting lines between props */
  #your-parlay-container .prop-card .remove-btn-circle::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(0, 211, 189, 0.3);
    z-index: -1;
    bottom: 108%;
    height: 76px;
  }

  #your-parlay-container .prop-card.bettype-selector-open + .prop-card .remove-btn-circle::before {
    height: 138px;
  }

  #your-parlay-container .prop-card.expanded + .prop-card .remove-btn-circle::before {
    height: 140px;
  }

  #your-parlay-container .prop-card.bettype-selector-open.expanded + .prop-card .remove-btn-circle::before {
    height: 190px;
  }

  #your-parlay-container .prop-card:first-child .remove-btn-circle::before {
    display: none;
  }

  /* Show mobile content wrapper */
  #your-parlay-container .prop-card .mobile-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0;
    gap: 2px;
    padding: 0 12px;
  }

  /* Show mobile row 1 (player + odds) */
  #your-parlay-container .prop-card .mobile-row-1 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  #your-parlay-container .prop-card .mobile-player-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    overflow: visible;
  }

  #your-parlay-container .prop-card .mobile-player-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
  }

  #your-parlay-container .prop-card .mobile-dot {
    width: 4px;
    height: 4px;
    background: #667;
    border-radius: 50%;
    margin: 0 6px;
    flex-shrink: 0;
    align-self: center;
  }

  #your-parlay-container .prop-card .mobile-team {
    font-size: 0.85rem;
    color: #999;
    white-space: nowrap;
  }

  #your-parlay-container .prop-card .mobile-pos {
    font-size: 0.85rem;
    color: #999;
    white-space: nowrap;
  }

  #your-parlay-container .prop-card .mobile-odds {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
  }

  /* Hide mobile grade circle on desktop - grade is shown in table mode instead */
  #your-parlay-container .prop-card .mobile-grade-circle,
  #suggested-props-container .prop-card .mobile-grade-circle {
    display: none !important;
  }

  /* Hide desktop player row and related elements */
  #your-parlay-container .prop-card .card-player-row {
    display: none !important;
  }

  /* Hide duplicate text elements - "Over X.X" text and extra odds badge */
  /* Note: type-pill is inside stat-odds, so we hide siblings not the container */
  #your-parlay-container .prop-card .player-line,
  #your-parlay-container .prop-card .pc-line,
  #your-parlay-container .prop-card .line-display,
  #your-parlay-container .prop-card .mobile-content-wrapper > .player-line,
  #your-parlay-container .prop-card .stat-odds > .over-label,
  #your-parlay-container .prop-card .stat-odds > .line-num,
  #your-parlay-container .prop-card .stat-odds > .odds-badge {
    display: none !important;
  }

  /* Hide desktop bet type pills */
  #your-parlay-container .prop-card .prop-card__bet-types {
    display: none !important;
  }

  /* Show control bar (type pill + steppers) */
  #your-parlay-container .prop-card .control-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 2px;
    gap: 12px;
  }

  /* Hide Over/Under toggle in parlay on wide screens */
  #your-parlay-container .prop-card .ou-toggle {
    display: none !important;
  }

  /* Type pill styling */
  #your-parlay-container .prop-card .type-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
  }

  #your-parlay-container .prop-card .type-pill:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  #your-parlay-container .prop-card .type-pill .chevron {
    display: none !important;
  }

  /* Show Over/Under indicator in type-pill based on data-side */
  #your-parlay-container .prop-card[data-side="over"] .type-pill::before {
    content: "OVER ";
    color: #22c55e;
  }

  #your-parlay-container .prop-card[data-side="under"] .type-pill::before {
    content: "UNDER ";
    color: #ef4444;
  }

  #your-parlay-container .prop-card[data-has-alt-bets="false"] .type-pill .chevron {
    display: none;
  }

  #your-parlay-container .prop-card.bettype-selector-open .type-pill .chevron {
    transform: rotate(180deg);
  }

  /* Steppers styling */
  #your-parlay-container .prop-card .steppers {
    display: flex !important;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    overflow: hidden;
  }

  #your-parlay-container .prop-card .steppers .step {
    width: 48px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #889;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
  }

  #your-parlay-container .prop-card .steppers .step:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  #your-parlay-container .prop-card .steppers .step:hover {
    background: rgba(45, 212, 191, 0.1);
    color: #2dd4bf;
  }

  /* Hide steppers in parlay when Under is selected */
  #your-parlay-container .prop-card[data-side="under"] .steppers {
    display: none !important;
  }

  /* Mobile bet type selector */
  #your-parlay-container .prop-card.bettype-selector-open .mobile-bettype-selector {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 0;
    margin-top: 6px;
    overflow-x: auto;
  }

  #your-parlay-container .prop-card .mobile-bettype-selector .bettype-pill {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #889;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }

  #your-parlay-container .prop-card .mobile-bettype-selector .bettype-pill:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  #your-parlay-container .prop-card .mobile-bettype-selector .bettype-pill.active {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(45, 212, 191, 0.4);
    color: #2dd4bf;
  }

  /* Show mobile matchup row */
  #your-parlay-container .prop-card .matchup-row-mobile {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #889;
    margin-top: 2px;
  }

  /* Hide desktop prop controls */
  #your-parlay-container .prop-card .prop-controls {
    display: none !important;
  }

  /* Hide expand section by default, show when expanded */
  #your-parlay-container .prop-card .expand {
    display: none !important;
  }

  #your-parlay-container .prop-card.expanded .expand {
    display: block !important;
    padding: 6px 12px 0px 58px;
    margin-top: 4px;
  }

  /* Stats row in expanded state */
  #your-parlay-container .prop-card.expanded .stats-row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0;
  }

  #your-parlay-container .prop-card.expanded .stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-align: center;
    min-width: 70px;
    min-height: 70px;
  }

  #your-parlay-container .prop-card.expanded .stat-box .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
  }

  #your-parlay-container .prop-card.expanded .stat-box .stat-label {
    font-size: 0.7rem;
    color: #889;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Show last5-stat and view-stats-box on expanded */
  #your-parlay-container .prop-card.expanded .last5-stat {
    display: flex !important;
  }

  /* Last 5 Hit visual bars in parlay container */
  #your-parlay-container .prop-card.expanded .last5-stat .stat-value {
    display: none;
  }

  #your-parlay-container .prop-card.expanded .last5-stat .hit-bars {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: flex-end;
    height: 22px;
    margin-bottom: 3px;
  }

  #your-parlay-container .prop-card.expanded .last5-stat .hit-bars .bar {
    width: 6px;
    height: 18px;
    border-radius: 2px;
    background: var(--pc-color-border-light, #444);
  }

  #your-parlay-container .prop-card.expanded .last5-stat .hit-bars .bar.hit {
    background: #22c55e;
  }

  #your-parlay-container .prop-card.expanded .last5-stat .hit-bars .bar.miss {
    background: #ef4444;
  }

  #your-parlay-container .prop-card.expanded .view-stats-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 70px;
    min-height: 70px;
    flex: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }

  #your-parlay-container .prop-card.expanded .view-stats-box:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }

  #your-parlay-container .prop-card.expanded .view-stats-box .view-stats-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #14b8a6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Hide chart and alt lines in parlay on desktop */
  #your-parlay-container .prop-card .chart-box,
  #your-parlay-container .prop-card .alt-title,
  #your-parlay-container .prop-card .alt-strip {
    display: none !important;
  }

  /* Hide expanded action buttons (using circular button instead) */
  #your-parlay-container .prop-card .prop-card__actions {
    display: none !important;
  }
}

/* ── Live in-play prop cards ── */
.suggested-prop .grade-stat.is-live-chip .live-chip-text {
  color: #ff4d5e;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  animation: pb-live-pulse 1.6s ease-in-out infinite;
}
@keyframes pb-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* Suspended: the book pulled this line mid-game — last known numbers stay
   visible but unmistakably not placeable. */
.suggested-prop.live-suspended .ou-pill,
.suggested-prop.live-suspended .odds-badge,
.suggested-prop.live-suspended .line-num {
  opacity: 0.45;
}
.suggested-prop.live-suspended .ou-pill {
  pointer-events: none;
}
/* Game over (left the odds feed) — chip flips to FINAL, stops pulsing. */
.suggested-prop.live-ended .grade-stat.is-live-chip .live-chip-text {
  color: #9aa0a6;
  animation: none;
}
.suggested-prop.live-ended .ou-pill {
  pointer-events: none;
  opacity: 0.45;
}