/* =============================================================================
   DASHBOARD - PARLAY STYLES
   Parlay cards, legs, results, progress bars, scoreboards, and related controls
   ============================================================================= */

/* =============================================================================
   MY PARLAYS SECTION
   ============================================================================= */

/* Parlays wrapper — no container chrome, sits directly on the page */
.parlays-control-card {
  margin-bottom: 20px;
}

.parlays-section-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.parlays-section-header .section-title {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--theme-accent, #00D3BD);
}

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

/* Status toggle (Active/History) */
.dashboard-status-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-status-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink-50, #9ab8a8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.dashboard-status-btn:hover {
  color: var(--ink-80, #e8ffe9);
}

.dashboard-status-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-100, #ffffff);
}

/* Live button special styling */
.dashboard-status-btn[data-status="live"].active {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.dashboard-status-btn[data-status="live"]::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2ecc71;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.dashboard-status-btn[data-status="live"].active::before {
  animation: live-pulse 1.5s ease-in-out infinite;
}

/* Filter tabs with icons and counts */
.dashboard-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Parlays list inside control card */
.parlays-control-card .dashboard-parlays {
  margin-top: 16px;
  max-height: 900px;
  overflow-y: auto;
}

/* Custom scrollbar for parlays list */
.parlays-control-card .dashboard-parlays::-webkit-scrollbar {
  width: 6px;
}

.parlays-control-card .dashboard-parlays::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

.parlays-control-card .dashboard-parlays::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.parlays-control-card .dashboard-parlays::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.parlays-control-card .parlay-card {
  border-color: rgba(255, 255, 255, 0.05);
}

.parlays-control-card .parlay-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.dashboard-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-60, #b4d7c4);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.dashboard-filter-btn i {
  font-size: 11px;
  opacity: 0.7;
}

.dashboard-filter-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.dashboard-filter-btn.active {
  background: var(--theme-accent, #00D3BD);
  border-color: var(--theme-accent, #00D3BD);
  color: #000;
}

.dashboard-filter-btn.active i {
  opacity: 1;
}

/* Filter count badge */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 10px;
  font-weight: 700;
}

.dashboard-filter-btn.active .filter-count {
  background: rgba(0, 0, 0, 0.15);
}

/* Parlays list */
.dashboard-parlays {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-50, #9ab8a8);
}

/* Centered empty state with Build Parlay CTA */
.dashboard-no-results-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
}

.dashboard-no-results-centered p {
  font-size: 20px;
}

.dashboard-build-parlay-btn {
  margin-top: 12px;
  font-weight: 900 !important;
}

/* =============================================================================
   PARLAY CARD
   ============================================================================= */

.parlay-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 14px;
  transition: all 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.parlay-card:hover {
  border-color: rgba(0, 211, 189, 0.3);
}

.parlay-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.parlay-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.parlay-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.parlay-rr-indicator {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.parlay-rr-indicator.rr-positive { color: #4CAF50; background: rgba(76, 175, 80, 0.12); }
.parlay-rr-indicator.rr-negative { color: #F44336; background: rgba(244, 67, 54, 0.12); }

.parlay-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.parlay-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-100, #ffffff);
}

.parlay-live-dot {
  display: none;
}

/* The LIVE chip ships at EVERY width (createParlayCard emits it whenever the
   slip is live), so it needs a base style too — without one the desktop card
   rendered the bare word glued to the name: "LIVE4 Leg Parlay". The phone
   block below re-sizes it for the 980 canvas. */
.parlay-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(231, 76, 60, 0.16);
  border: 1px solid rgba(231, 76, 60, 0.45);
  color: #ff8071;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Inside the chip the dot is a bullet, so it shows at every width — the
   standalone `display: none` above is what keeps it phone-only elsewhere. */
.parlay-live-chip .parlay-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e74c3c;
  margin-right: 0;
  top: 0;
  animation: parlay-live-pulse 1.5s ease-in-out infinite;
}

@media (max-width: 1000px) {
  .parlay-live-dot {
    display: inline-block;
    /* 12px was ~4.8 optical — the only live affordance a card header has, and
       it vanished beside the name. Colour and pulse deliberately unchanged. */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e74c3c;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;               /* re-centres against the 32px .parlay-name */
    animation: parlay-live-pulse 1.5s ease-in-out infinite;
  }

}

/* =============================================================================
   UNSTAKED SAVE
   =============================================================================
   A slip that was saved and never staked. It carries no money, so it gets no
   payout footer — which used to leave the card trailing off into its timestamp
   with nothing to say what it was. Marked instead: a SAVED chip, a one-line
   note, per-leg state, and a four-cell status strip.
   ============================================================================= */
.parlay-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(0, 211, 189, 0.12);
  border: 1px solid rgba(0, 211, 189, 0.40);
  color: var(--theme-accent, #00D3BD);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}


/* Per-leg state. "Upcoming" is a chip because it marks a leg that has nothing
   else to show; "Final" is plain muted text, matching the "· Final" the matchup
   chip uses, so the word means one thing wherever it appears. */
.leg-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  width: fit-content;
}
.leg-status-upcoming {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-50, #9ab8a8);
}
.leg-status-final {
  color: var(--ink-50, #9ab8a8);
  font-weight: 500;
}

.parlay-card-footer-saved {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.parlay-saved-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  align-items: center;
}
.parlay-saved-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-50, #9ab8a8);
}
.parlay-saved-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-100, #ffffff);
}
.parlay-saved-odds .parlay-saved-value {
  color: var(--theme-accent, #00D3BD);
}

/* Top level, not inside the phone block: the LIVE chip's dot pulses at every
   width now, and an @keyframes declared inside a media query does not resolve
   outside it. */
@keyframes parlay-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.parlay-odds {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent, #00D3BD);
}

/* Legs summary in header */
.parlay-legs-summary {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}

/* Clickable header row for expand/collapse */
.parlay-header-toggle {
  cursor: pointer;
}

.parlay-header-toggle:hover {
  opacity: 0.9;
}

/* Toggle icon next to legs summary */
.parlay-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-accent, #00D3BD);
  font-size: 12px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
  margin-top: 4px;
}

.parlay-toggle-icon:hover {
  opacity: 0.7;
}

.parlay-toggle-icon i {
  transition: transform 0.2s ease;
}

/* Collapsed state - hide legs */
.parlay-card.parlay-collapsed .parlay-card-legs {
  display: none;
}

.parlay-card.parlay-collapsed .parlay-card-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.parlay-card.parlay-collapsed .parlay-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.parlay-card.parlay-collapsed .parlay-card-actions {
  padding-top: 12px;
}

.parlay-card.parlay-collapsed .parlay-toggle-icon i {
  transform: rotate(0deg);
}

/* Expanded state - show legs, rotate chevron */
.parlay-card:not(.parlay-collapsed) .parlay-toggle-icon i {
  transform: rotate(180deg);
}

/* Progress indicator */
.parlay-progress {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* =============================================================================
   PARLAY CARD FOOTER (Stake/Payout)
   ============================================================================= */

.parlay-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.parlay-footer-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.parlay-footer-label {
  /* The footer icons are emitted by templates.js at every width, but the
     desktop label is 11px and an icon beside it is cramped. Phone turns them
     back on where the label is 20px. */
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-50, #9ab8a8);
}

.parlay-footer-label i {
  display: none;
}

.parlay-footer-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-100, #ffffff);
}

.parlay-footer-towin,
.parlay-footer-won,
.parlay-footer-lost {
  align-items: flex-end;
}

.parlay-footer-towin .parlay-footer-label {
  color: var(--theme-accent, #00D3BD);
}

.parlay-footer-towin .parlay-footer-value {
  color: var(--theme-accent, #00D3BD);
}

.parlay-footer-won .parlay-footer-label {
  color: #2ecc71;
}

.parlay-footer-won .parlay-footer-value {
  color: #2ecc71;
}

.parlay-footer-lost .parlay-footer-label {
  color: #e74c3c;
}

.parlay-footer-lost .parlay-footer-value {
  color: #e74c3c;
}

/* =============================================================================
   PARLAY LEGS
   ============================================================================= */

.parlay-card-legs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.parlay-leg {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  /* background: rgba(0, 0, 0, 0.2); */
  /* border: 1px solid rgba(0, 211, 189, 0.15); */
  border-radius: 8px;
  gap: 8px;
}

.leg-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leg-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.leg-player {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-90, #f0fff1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leg-player.pd-player-link {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.leg-player.pd-player-link:hover {
  opacity: 0.7;
}

.leg-details {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Side labels — same color as player name */
.leg-side-over {
  color: var(--ink-90, #f0fff1);
  font-weight: 600;
}

.leg-side-under {
  color: var(--ink-90, #f0fff1);
  font-weight: 600;
}

/* Player avatar */
.leg-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  align-self: flex-start;
  margin-top: 2px;
}


.leg-avatar-clip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.leg-avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transform: scale(1.3) translateY(10%);
}

.leg-game-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.leg-matchup {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leg-time {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* =============================================================================
   GAME SCOREBOARD (grouped legs display)
   ============================================================================= */

.game-scoreboard {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  margin: 18px 0 0 0;
}

.pd-game-link {
  cursor: pointer;
  transition: opacity 0.15s ease;
  border-radius: 6px;
}
.pd-game-link:hover {
  opacity: 0.7;
}

.game-scoreboard:first-child {
  margin-top: 0;
}

.game-teams {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 4px 16px;
  align-items: center;
  flex: 1;
}

.game-team-row {
  display: contents;
}

/* Holds .game-team-crest + .game-team-label (templates.js buildGameScoreboard).
   The crest lives INSIDE this cell because .game-teams is a 4-column grid whose
   rows are display:contents — a sibling would become a fifth column. */
.game-team-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.game-team-crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

/* The club name is the only thing in this grid column that can outgrow its
   track, so it is the only thing that may truncate. */
.game-team-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-quarters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.game-qtr {
  display: inline-block;
  min-width: 20px;
  text-align: right;
}

.game-team-pts {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  min-width: 24px;
  text-align: right;
}

.game-status-cell {
  text-align: right;
  white-space: nowrap;
}

.game-status-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
}

.game-status-badge.live {
  background: #e74c3c;
  color: #fff;
}

.game-status-badge.final {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.game-clock {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* Upcoming game matchup header - centered, matching parlayImageShare style */
.game-matchup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 6px;
  margin: 4px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.game-matchup-header:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}


/* "Live" inside the matchup chip. Same red as the card's LIVE chip and the
   scoreboard badge, so one game state has one colour wherever it appears. */
.game-matchup-live {
  color: #ff8071;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.game-matchup-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
}

/* Legacy classes kept for backward compatibility */
.game-matchup-teams {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.game-matchup-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Live score display (legacy - keeping for backward compatibility) */
.leg-live-score {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--ink-10, rgba(0, 0, 0, 0.2));
  border-radius: 6px;
  font-size: 11px;
}

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

.leg-team {
  font-weight: 600;
  color: var(--ink-70, #c8e8d8);
  min-width: 32px;
}

.leg-quarters {
  color: var(--ink-muted);
  font-size: 10px;
  flex: 1;
}

.leg-pts {
  font-weight: 700;
  color: var(--ink-80, #e8ffe9);
  min-width: 24px;
  text-align: right;
}

.leg-clock {
  font-size: 10px;
  color: var(--theme-accent, #00D3BD);
  margin-top: 2px;
  text-align: center;
}

.leg-odds {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent, #00D3BD);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hidden legs (expandable) */
.parlay-leg.leg-hidden {
  display: none;
}

.parlay-card.expanded .parlay-leg.leg-hidden {
  display: flex;
}

/* Expand button */
.parlay-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--ink-60, #b4d7c4);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.parlay-expand-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-80, #e8ffe9);
}

.parlay-expand-btn i {
  transition: transform 0.2s ease;
}

.parlay-card.expanded .parlay-expand-btn i {
  transform: rotate(180deg);
}

/* =============================================================================
   PARLAY CARD ACTIONS
   ============================================================================= */

.parlay-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 4px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.parlay-placed-at {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

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

.parlay-action-btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.15);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.parlay-action-btn:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ink-70, #c8e6d0);
}

.parlay-copy-image-btn {
  padding: 10px 20px;
  font-size: 14px;
}

.parlay-copy-image-btn i {
  position: relative;
  top: -1px;
}

.parlay-copy-image-btn:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Reuse selections button style */
.parlay-reuse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.parlay-reuse-btn:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

.parlay-reuse-btn i {
  font-size: 11px;
  margin-top: 2px;
}

/* Send an upcoming saved parlay to a sportsbook (2026-09-20). Wears the
   parlay container's Link button: FanDuel crest + the word "Link", so the
   same action reads the same in the workbench and on a saved card. The crest
   carries the colour, so the chrome stays neutral like its row-mates rather
   than competing with it. */
.parlay-link-btn {
  color: var(--ink-70, #c8e6d0);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
}

/* .pf-btn-logo is the workbench's own class, carried over on the img. Its
   rules live in workbench.css, which is not guaranteed to win here, so the
   height is pinned locally — the crest must not set the button's height. */
.parlay-link-btn .pf-btn-logo {
  height: 16px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.parlay-link-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* In-flight: parlayLink.js swaps the icon for a spinner while the board
   round-trip is out. Kept visible rather than hidden so the row doesn't
   reflow mid-tap. */
.parlay-link-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.parlay-delete-btn {
  color: #b05a5a;
  border-color: rgba(231, 76, 60, 0.1);
  padding: 10px 20px;
  font-size: 14px;
}

.parlay-delete-btn:hover {
  border-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  background: rgba(255, 255, 255, 0.15);
}

/* DELETE in flight (_deleteParlay): the trash shows a spinner and the card
   dims and stops taking taps until the server answers. */
.parlay-delete-btn:disabled {
  cursor: default;
}

.parlay-card.parlay-card--deleting {
  opacity: 0.5;
  pointer-events: none;
}

/* Remove button for history parlays */
.parlay-remove-btn {
  gap: 6px;
  font-size: 13px;
}

/* =============================================================================
   PARLAY RESULT STYLES
   ============================================================================= */

/* Parlay result badge */
.parlay-result-badge {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.parlay-result-badge.result-won {
  background: rgba(39, 174, 96, 0.25);
  color: #2ecc71;
}

.parlay-result-badge.result-lost {
  background: rgba(231, 76, 60, 0.25);
  color: #e74c3c;
}

.parlay-result-badge.result-push {
  background: rgba(241, 196, 15, 0.25);
  color: #f1c40f;
}

.parlay-result-badge.result-pending {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-50, #9ab8a8);
}

/* Card border colors based on result */
.parlay-card.parlay-won,
.parlay-card.parlay-lost,
.parlay-card.parlay-push {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Leg result indicators */
.parlay-leg.leg-settled {
  position: relative;
}

.leg-result {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  flex-shrink: 0;
}

.leg-result.leg-hit {
  background: rgba(0, 153, 135, 0.25);
  color: #009987;
}

.leg-result.leg-miss {
  background: rgba(231, 76, 60, 0.25);
  color: #e74c3c;
}

.leg-result.leg-push {
  background: rgba(241, 196, 15, 0.25);
  color: #f1c40f;
}

.leg-result.leg-void {
  background: rgba(149, 165, 166, 0.25);
  color: #95a5a6;
}


/* Leg styling based on result */
.parlay-leg.leg-miss {
  opacity: 0.7;
}

.parlay-leg.leg-void {
  opacity: 0.6;
}

/* Actual value display */
.leg-actual {
  color: var(--ink-40, #7a9f8c);
  font-size: inherit;
  margin-left: 2px;
}

.parlay-leg.leg-hit .leg-actual {
  color: #009987;
}

.parlay-leg.leg-miss .leg-actual {
  color: #e74c3c;
}

/* =============================================================================
   LIVE PROGRESS BAR
   ============================================================================= */

.leg-progress-bar {
  --side-width: 64px;
  position: relative;
  height: 20px;
  margin-top: 4px;
  margin-bottom: -2px;
  margin-left: -44px;
}

/* Grey background track - connects to side indicator */
.leg-progress-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: var(--side-width);
  height: 4px;
  transform: translateY(-50%);
  background: #3a3a3a;
  border-radius: 2px 0 0 2px;
}

/* Progress fill line. Carries the side colour rather than a neutral grey: the
   filled part of the bar IS the progress, so it should read as progress. The
   grey .leg-progress-track behind it is what is left to go. */
.leg-progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px 0 0 2px;
  background: #009987;
  transition: width 0.5s ease-out, background 0.3s ease-out;
  z-index: 1;
}

.leg-progress-bar.side-over .leg-progress-fill { background: #009987; }
.leg-progress-bar.side-under .leg-progress-fill { background: #e74c3c; }

/* Oval with actual value */
.leg-progress-oval {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  z-index: 2;
  white-space: nowrap;
  min-width: 20px;
  text-align: center;
}

/* Threshold value - positioned below the bar end */
.leg-progress-target {
  position: absolute;
  right: var(--side-width);
  top: calc(50% + 5px);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-50, #9ab8a8);
  transform: translateX(50%);
}

/* THE LINE, marked (2026-09-21).
   A tick at the threshold's own position, directly above the number that names
   it, so "has it passed?" is one glance instead of a comparison between a fill
   edge and a colour change. Same x as .leg-progress-target above — right:
   var(--side-width), centred by the 50% translate — so the mark and the number
   can never drift apart, whatever --side-width is on the surface in question
   (64px here, 100px on a phone slip, 67px on a phone duel side, 72px on the
   desktop console).

   z-index 3 puts it OVER the value pill (z-index 2). That is deliberate: the
   pill is nearly as tall as the bar, so anything beneath it is invisible, and a
   leg sitting on its line is exactly when the reader needs to see where the
   line is. The 1px dark ring is what lets a thin white mark read over the
   pill's #2a2a2a as well as over the grey track and the coloured fill. */
.leg-progress-bar::after {
  content: '';
  position: absolute;
  right: var(--side-width);
  top: 50%;
  transform: translate(50%, -50%);
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  z-index: 3;
}

/* Side indicator line - connected to track */
.leg-side-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--side-width);
  height: 4px;
  border-radius: 0 2px 2px 0;
}

/* Over bet = teal indicator */
.leg-progress-bar.side-over .leg-side-indicator {
  background: #009987;
}

/* Under bet = red indicator */
.leg-progress-bar.side-under .leg-side-indicator {
  background: #e74c3c;
}

/* Live leg styling - no background change */
.parlay-leg.leg-live {
  /* intentionally no background */
}

/* Structural backstop: a card with a terminal result can never render live
   chrome, whatever the JS decided. The class comes from createParlayCard
   (`parlay-${parlayResult}`). Primary defence is the id-exact game binding in
   getGameKeyForLeg + the isLegInPlay gate; this just makes a future JS
   regression impossible to see. */
.parlay-card.parlay-won .leg-progress-bar,
.parlay-card.parlay-lost .leg-progress-bar,
.parlay-card.parlay-push .leg-progress-bar,
.parlay-card.parlay-void .leg-progress-bar,
.parlay-card.parlay-cashed_out .leg-progress-bar,
.parlay-card.parlay-won .game-status-badge.live,
.parlay-card.parlay-lost .game-status-badge.live,
.parlay-card.parlay-push .game-status-badge.live,
.parlay-card.parlay-void .game-status-badge.live,
.parlay-card.parlay-cashed_out .game-status-badge.live {
  display: none !important;
}

/* Oval styling when value exceeds threshold (inside side indicator) */
.leg-progress-bar.exceeded.side-over .leg-progress-oval {
  border-color: #009987;
}

.leg-progress-bar.exceeded.side-under .leg-progress-oval {
  border-color: #e74c3c;
}

/* =============================================================================
   GRADIENT TRACKER (Staked Parlay Payout Bar — inside footer)
   ============================================================================= */

/* Footer variant: inline layout — wager | gradient bar | payout */
.parlay-card-footer-gradient {
  align-items: flex-start;
  gap: 12px;
}

/* Gradient bar fills the space between wager and payout */
.gradient-tracker-bar {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

/* Settled label below the bar */
.gradient-tracker-settled {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Bar container */
.gradient-bar-container {
  position: relative;
  height: 14px;
}

/* Track: smooth continuous gradient bar */
.gradient-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #c0392b, #c96a1e, #d4a90d, #27ae60);
  opacity: 0.80;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Dot indicator — color set inline via JS */
.gradient-bar-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================================
   PARLAY SIZE CHART (Analytics)
   ============================================================================= */

.parlay-size-chart {
  padding: 8px 0;
}

.size-chart-bars {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding-top: 20px;
}

.size-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 80px;
}

.size-bar-wrapper {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.size-bar {
  width: 100%;
  max-width: 50px;
  background: var(--theme-gradient-primary, linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%));
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 8px;
  transition: height 0.3s ease;
}

.size-bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-accent, #00D3BD);
  white-space: nowrap;
}

.size-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-80, #e8ffe9);
  margin-top: 8px;
}

.size-bar-count {
  font-size: 11px;
  color: var(--ink-50, #9ab8a8);
  margin-top: 2px;
}

.size-bar-profit {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.size-bar-profit.profit-positive {
  color: #2ecc71;
}

.size-bar-profit.profit-negative {
  color: #e74c3c;
}

/* =============================================================================
   LIVE SUMMARY CARD
   ============================================================================= */

.live-summary-card {
  grid-column: span 2;
}

.live-summary-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px 0;
}

.live-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.live-summary-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-50, #9ab8a8);
}

.live-summary-value {
  font-size: 28px;
  font-weight: 700;
}

.live-summary-value.at-stake {
  color: var(--ink-80, #e8ffe9);
}

.live-summary-value.to-win {
  color: #2ecc71;
}

.live-summary-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
}

.live-summary-count {
  text-align: center;
  font-size: 12px;
  color: var(--ink-50, #9ab8a8);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =============================================================================
   RESPONSIVE - Small screens (max-width: 1000px) - Parlay overrides
   ============================================================================= */

@media (max-width: 1000px) {

  /* Hide the status toggle and sport filters — replaced by mobile tabs */
  .parlays-section-header {
    display: none;
  }

  .parlays-control-card {
    margin-bottom: 0;
  }

  /* Parlays section header responsive (desktop fallback) */
  .parlays-section-header .section-title {
    font-size: 22px;
  }

  .dashboard-status-btn {
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Filter buttons responsive */
  .dashboard-filter-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .dashboard-filter-btn i {
    font-size: 12px;
  }

  .filter-count {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
  }

  /* Parlays list on mobile — no inner scroll container, let page scroll naturally */
  .parlays-control-card .dashboard-parlays {
    max-height: none;
    overflow-y: visible;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }

  /* The card's phone surface, gutter and padding now live in the PHONE CARD
     SURFACE block at the end of dashboard.css, which paints the house glass
     pane instead of stripping the card back to black-on-black. */

  .parlay-card-header {
    gap: 10px;
  }

  /* The card level moves; the row level below does not. .parlay-name,
     .parlay-odds, .leg-player and .leg-odds were all 26px AND weight 600 —
     byte-identical — so nothing marked where one card ended and the next
     began except a 1px hairline. Opening a rung above the row is the fix; the
     rows themselves are already right at ~10.4 optical. */
  .parlay-name {
    font-size: 32px;          /* ~12.8 optical */
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .parlay-odds {
    font-size: 30px;          /* ~12 optical */
    font-weight: 700;
  }

  .parlay-legs-summary {
    font-size: 22px;
    margin-top: 8px;
  }

  /* Parlay card header mobile */
  .parlay-card-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .parlay-toggle-icon {
    font-size: 24px;
    margin-top: 12px;
  }

  .parlay-card.parlay-collapsed .parlay-card-header {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .parlay-card.parlay-collapsed .parlay-card-footer {
    padding-top: 16px;
    margin-top: 16px;
  }

  .parlay-card.parlay-collapsed .parlay-card-actions {
    padding-top: 16px;
  }

  /* Footer section mobile */
  .parlay-card-footer {
    padding-top: 16px;
    margin-top: 16px;
  }

  /* 13px is ~5.2 optical — below the floor, and this is the settled-outcome
     word (Wager / To Win / Won / Lost / Cashed Out). 20px = ~8 optical, the
     app's caption rung. */
  .parlay-footer-label {
    font-size: 20px;
    letter-spacing: 0.06em;
  }

  /* was 20px, only 7px above its own label. 26px puts the money number on the
     card's row rung (.leg-player / .leg-odds are 26px) and restores a step. */
  .parlay-footer-value {
    font-size: 26px;
  }

  /* Actions section mobile */
  .parlay-card-actions {
    padding: 16px 0 8px;
    margin-top: 16px;
    gap: 24px;
  }

  .parlay-reuse-btn {
    padding: 14px 18px;
    font-size: 18px;
    gap: 10px;
  }

  .parlay-reuse-btn i {
    font-size: 16px;
    margin-top: 0px;
  }

  .parlay-action-btn {
    padding: 13px 18px;
    font-size: 18px;
    gap: 10px;
  }

  .parlay-action-btn i {
    font-size: 18px;
  }

  .parlay-actions-row {
    gap: 12px;
  }

  .parlay-placed-at {
    font-size: 20px;        /* ~7.2 -> ~8.0 optical */
  }

  .parlay-card-actions {
    padding: 12px 8px 4px;
  }

  .parlay-actions-row {
    gap: 16px;
  }

  .parlay-copy-image-btn {
    font-size: 24px;
    padding: 14px 32px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
  }

  .parlay-delete-btn {
    padding: 14px 32px;
  }

  .parlay-delete-btn i {
    font-size: 24px;
  }

  /* Third pill in the row. Slightly tighter horizontal padding than its
     icon-only siblings because this one carries a crest AND a word; the
     phone canvas is 980px wide (no meta viewport), so the three still clear
     the "Saved <date> · #id" caption on the left without wrapping it. */
  .parlay-link-btn {
    padding: 14px 22px;
    font-size: 22px;
    gap: 10px;
  }

  .parlay-link-btn .pf-btn-logo {
    height: 26px;
  }

  .parlay-copy-image-btn i {
    font-size: 24px;
    position: relative;
    top: -1px;
  }

  /* Legs responsive */
  .parlay-leg {
    gap: 10px;
    padding: 8px 24px;
  }

  .parlay-leg.leg-settled {
    padding-left: 14px;
  }

  .leg-content {
    flex: 1;
    min-width: 0;
  }

  .leg-player {
    font-size: 26px;
  }

  .leg-odds {
    font-size: 26px;
  }

  .leg-details {
    font-size: 21px;        /* ~7.6 -> ~8.4 optical */
  }

  .leg-avatar-wrap {
    width: 56px;
    height: 56px;
  }

  .game-matchup-text {
    font-size: 20px;
  }

  .leg-matchup,
  .leg-time {
    font-size: 20px;
  }

  .leg-result {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .parlay-progress {
    font-size: 16px;
  }

  .leg-progress-bar {
    --side-width: 100px;
    /* was -66px, i.e. -(56px avatar + 10px leg gap), to pull the track flush to
       the card's padding edge. The avatar is 64px now, so that number was stale
       by 8px — and the track reads better aligned with the player name it
       belongs to than bleeding out under the portrait. 0 removes the coupling
       to the avatar size entirely. Desktop's -44px at :1072 is untouched. */
    margin-left: 0;
    margin-top: 8px;
    margin-bottom: 2px;
    height: 28px;
  }

  .leg-progress-track {
    height: 7px;
  }

  .leg-progress-fill {
    height: 7px;
  }

  .leg-side-indicator {
    height: 7px;
  }

  .leg-progress-oval {
    font-size: 17px;
    padding: 3px 12px;
    min-width: 30px;
    border-radius: 14px;
  }

  .leg-progress-target {
    font-size: 15px;
  }

  /* The phone draws on a 980px canvas, so every part of this bar is bigger: a
     28px bar over a 7px track. 2px of mark would read as a speck against that,
     so it widens — but it does NOT scale with the bar. 20px (the same
     tick-to-track ratio desktop uses) read as a fence post here, because the
     phone's bar is the tallest thing in the leg rather than a 16px strip under
     two lines of text. 14px is twice the track and half the bar: still
     unmissable, no longer a column. */
  .leg-progress-bar::after {
    width: 3px;
    height: 14px;
    border-radius: 1.5px;
  }

  /* Game scoreboard responsive */
  .game-scoreboard {
    padding: 8px 24px;
    margin: 24px 0 0 0;
  }

  .game-teams {
    gap: 6px 32px;
  }

  .game-team-name {
    font-size: 24px;
    gap: 14px;
  }

  /* 36px = ~14.3 optical, a shade above the cap height of the 24px name beside
     it. The -v2 rim was measured at the 52px build tile, so this is well inside
     the size the asset was drawn for. */
  .game-team-crest {
    width: 36px;
    height: 36px;
  }

  /* Full club names run ~3x the width of a code, and this is column 1 of an
     `auto 1fr auto auto` grid: uncapped, a long pair (Tampa Bay Buccaneers)
     starves the quarters column. 470px = ~187 optical, just under half. */
  .game-team-label {
    max-width: 470px;
  }

  .game-quarters {
    font-size: 22px;
    gap: 12px;
  }

  .game-qtr {
    min-width: 32px;
  }

  .game-team-pts {
    font-size: 24px;
  }

  .game-status-badge {
    font-size: 18px;
    padding: 4px 10px;
  }

  .game-clock {
    font-size: 20px;
  }

  /* Parlay size chart responsive */
  .size-chart-bars {
    height: 220px;
    gap: 12px;
  }

  .size-bar-wrapper {
    height: 140px;
  }

  .size-bar-value {
    font-size: 14px;
    top: -24px;
  }

  .size-bar-label {
    font-size: 14px;
  }

  .size-bar-count,
  .size-bar-profit {
    font-size: 13px;
  }

  /* Gradient tracker responsive */
  .gradient-tracker-settled {
    font-size: 20px;        /* ~5.2 -> ~8.0 optical */
  }

  .gradient-bar-container {
    height: 20px;
  }

  .gradient-bar-track {
    height: 10px;
    border-radius: 5px;
  }

  .gradient-bar-dot {
    width: 20px;
    height: 20px;
    border-width: 3px;
  }

  /* padding was 0px 20px — no vertical air at all, and TWO of these can stack
     (the parlays and duels empty states are appended separately,
     dashboardPage.js:1063-1078). Deliberately NO card surface: an empty state
     is an instruction, and the house rule is that instructions do not wear card
     chrome (cf. #parlay-swipe-hint, prop-cards.css:3678-3684). */
  .dashboard-no-results-centered {
    padding: 56px 20px;     /* 0 -> ~22 optical px */
    gap: 8px;
  }

  .dashboard-no-results-centered p {
    font-size: 30px;
    margin: 0;
  }

  .dashboard-build-parlay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 110px !important;   /* ~22.8 -> 44 optical, the house floor */
    padding: 0 40px !important;
    font-size: 26px !important;
    border-radius: 22px;
    margin-top: 20px;
  }

}


/* =============================================================================
   STAKE BUTTON
   ============================================================================= */

/* Footer variant: centers the stake button in the wager/to-win area */
.parlay-card-footer-stake {
  justify-content: center;
}

.parlay-stake-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid rgba(0, 211, 189, 0.3);
  background: linear-gradient(135deg, rgba(0, 211, 189, 0.15), rgba(0, 211, 189, 0.08));
  color: var(--theme-accent-bright, #00F5D4);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.parlay-stake-btn:hover {
  background: linear-gradient(135deg, rgba(0, 211, 189, 0.25), rgba(0, 211, 189, 0.15));
  border-color: rgba(0, 211, 189, 0.5);
}

.parlay-stake-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1000px) {
  .parlay-stake-btn {
    padding: 14px 32px;
    font-size: 18px;
    gap: 10px;
  }
}

/* Outstanding challenge invite: quiet "waiting" state replaces the
   Stake/Challenge buttons (staking would break the invite) */
.parlay-card-footer-challenge-wait {
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.challenge-wait-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-accent-bright, #00F5D4);
  opacity: 0.85;
}

.challenge-wait-label i {
  font-size: 12px;
  opacity: 0.8;
}

.challenge-copy-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-70, #c8e6d0);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.challenge-copy-link-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1000px) {
  .challenge-wait-label {
    font-size: 16px;
  }

  .challenge-copy-link-btn {
    padding: 10px 20px;
    font-size: 15px;
  }
}

/* Unstake / pre-game cash out button */
.parlay-unstake-btn {
  color: var(--ink-muted);
  border-color: rgba(255, 255, 255, 0.08);
}

.parlay-unstake-btn:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ink-70, #c8e6d0);
}

/* =============================================================================
   CASHED-OUT STATE (historical display)
   ============================================================================= */

/* Cashed-out card: orange left border */
.parlay-cashed_out .parlay-card-header {
  border-left: 3px solid #f39c12;
}

/* Cashed-out footer value: orange text */
.parlay-footer-cashout .parlay-footer-value {
  color: #f39c12;
}

.parlay-footer-cashout .parlay-footer-label {
  color: rgba(243, 156, 18, 0.7);
}

/* Frozen gradient tracker for cashed-out parlays */
.gradient-tracker-bar.gradient-tracker-frozen {
  opacity: 0.75;
}

.gradient-tracker-bar.gradient-tracker-frozen .gradient-bar-dot {
  animation: none;
}

/* =============================================================================
   PHONE CARD INTERIOR
   =============================================================================
   Everything here is spacing that was inherited from desktop and rounds to
   nothing at the 0.398x downscale, plus the nested gutters that only become
   visible once the card has a rim (see the PHONE CARD SURFACE block at the end
   of dashboard.css). Direct-child scope on the rules that need it, so the two
   .parlay-card elements a duel nests inside .duel-parlay-side keep duel.css's
   own geometry — .duel-parlay-side:first-child .parlay-leg{padding-left:24px}
   (:2331-2340) and .duel-parlay-side .parlay-leg{min-height:148px} (:2287).
   ============================================================================= */
@media (max-width: 1000px) {

  /* ONE inner gutter per card: the card's own 22px padding. The 24px on the leg
     and the scoreboard was a SECOND, nested gutter and the 8px on the actions
     row a third, so nothing inside a card shared a left edge. Same discipline
     as the NFL/MLB phone game pages, where the row carries vertical padding
     only and the card supplies the side gutter (nfl-game-detail.css:2343-2347,
     mlb-game-phone.css:734). NOTE the longhands: a `padding` shorthand would
     clobber duel.css's padding-bottom override through a different match path. */
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg {
    padding-left: 0;
    padding-right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg.leg-settled {
    padding-left: 0;
  }

  /* Now a TILE, not a bare row, so it gets its own padding back — the "one
     inner gutter" rule above applies to rows. House nesting tint: flat fill, a
     thinner rim than the card, and no second shadow (prop-cards.css:4306-4315). */
  #dashboard-content .tab-parlays-content > .parlay-card .game-scoreboard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 18px;
    margin-top: 20px;
  }

  /* Resolves the :1454 / :1489 double-declaration AND drops the 8px offset. */
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-card-actions {
    padding: 12px 0 4px;
  }

  /* Five desktop gaps that land between 0.8 and 2.4 optical px. A leg's player
     line and its detail line were literally touching.
     .leg-progress-bar's phone margin-left used to be -(avatar + leg gap), which
     made this gap load-bearing; it is 0 now, so the coupling is gone. */
  /* 6px was already a fix from 2px, but the matchup chip no longer doubles as a
     divider between legs, so the rows have to separate themselves. */
  .parlay-card-legs    { gap: 12px; margin-bottom: 10px; } /* 0.8 -> 4.8 optical */
  .leg-content         { gap: 4px; }                       /* 0.8 -> 1.6 optical */
  .parlay-header-left  { gap: 8px; }                       /* 1.6 -> 3.2 optical */
  .parlay-header-right { gap: 12px; }                      /* 2.4 -> 4.8 optical */

  /* Direct-child scope: duel columns are half-width and re-lay this row out
     themselves (duel.css:2155-2163), so leave those at 8px. */
  #dashboard-content .tab-parlays-content > .parlay-card .leg-header-row {
    gap: 16px;
  }

  /* The only separator between two games inside a multi-game parlay, and it had
     no phone override at all: 10px/6px padding = 4.0/2.4 optical. Its TEXT was
     uprated 11px -> 20px at :1551; its box was not, so a 20px line sat in four
     optical px of air. Spacing only — colour, weight and centring untouched. */
  #dashboard-content .tab-parlays-content > .parlay-card .game-matchup-header {
    padding: 18px 0 12px;
    margin-top: 6px;
  }
  #dashboard-content .tab-parlays-content > .parlay-card .game-matchup-header:first-child {
    padding-top: 4px;
    margin-top: 0;
  }

  /* A centred chip with the rule running out to either side of it, instead of
     one 1px line across the whole card with text sitting on top of it.
     Phone only, and scoped OFF duel cards: compact mode embeds this same row
     inside each leg (buildLegHtml's gameHeaderHtml), where a pill is wrong —
     there it is the leg's third line, not a separator between games. */
  #dashboard-content .tab-parlays-content > .parlay-card .game-matchup-header {
    border-top: none;
    gap: 16px;
  }
  #dashboard-content .tab-parlays-content > .parlay-card .game-matchup-header::before,
  #dashboard-content .tab-parlays-content > .parlay-card .game-matchup-header::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
  }
  #dashboard-content .tab-parlays-content > .parlay-card .game-matchup-text {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 22px;
    flex: none;
  }

  /* The score and the game state are two different readings, so a rule sits
     between them. Both rows carry it, and because .game-team-row is
     display:contents the two segments stack into one continuous line. */
  .game-teams .game-status-cell {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 16px;
  }

  /* Rounded square rather than a circle: a headshot is a portrait, and the
     circle cropped the top of every player's head. The headshots are cut-outs
     on transparency, so the square needs a fill behind them or the player
     floats — same nesting tint every other tile in the card uses. */
  /* Full height of the row rather than a 64px square pinned to the top: the
     portrait then reads as the row's left edge instead of floating beside it.
     .parlay-leg is the flex row, so stretch does the work and the height
     follows whatever the leg holds (a leg with a live bar is taller). */
  /* Portrait — DUEL legs keep the values they had, on purpose. Everything below
     is scoped to a top-level parlay card so the duel card is untouched. */
  .leg-avatar-wrap {
    height: auto;
    min-height: 64px;
    align-self: stretch;
    margin-top: 0;
  }
  .leg-avatar-clip {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
  }
  .leg-avatar {
    transform: scale(1.08) translateY(3%);
  }

  /* 104px wide (~41 optical). At 64 the portrait was a tall slot and the player
     was squeezed edge to edge; the space comes off .leg-content, which had the
     full card width for a name, a stat and a bar and did not need it. */
  #dashboard-content .tab-parlays-content > .parlay-card .leg-avatar-wrap {
    width: 104px;
    min-height: 84px;
  }
  /* Mirrors the workbench card's portrait tile: a cool slate, not a white wash.
     Sampled off that tile — it sits ~10 above its own ground with blue over
     green over red, which is what keeps it from reading as grey haze. */
  #dashboard-content .tab-parlays-content > .parlay-card .leg-avatar-clip {
    border-radius: 18px;
    background: #141A22;
  }
  /* The base 1.3 zoom was tuned for a 36px square. At 104px the frame is
     generous enough to show the player without cropping into them. */
  #dashboard-content .tab-parlays-content > .parlay-card .leg-avatar {
    transform: none;
  }
  /* Graded state is the ring around the portrait, nothing else. The check /
     cross / dash badge kept its own 26px column on EVERY leg, settled or not,
     and said the same thing the ring says. Hidden only where the ring replaces
     it: a leg with no headshot has no ring, so it keeps the badge. */
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg:has(.leg-avatar-wrap) .leg-result {
    display: none;
  }
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg.leg-hit  .leg-avatar-clip { box-shadow: inset 0 0 0 3px #009987; }
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg.leg-miss .leg-avatar-clip { box-shadow: inset 0 0 0 3px #e74c3c; }
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg.leg-push .leg-avatar-clip { box-shadow: inset 0 0 0 3px #f1c40f; }
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg.leg-void .leg-avatar-clip { box-shadow: inset 0 0 0 3px #95a5a6; }

  /* Air between the portrait and the text it belongs to. Safe to change now:
     the .leg-progress-bar margin that used to be keyed to this is 0. */
  #dashboard-content .tab-parlays-content > .parlay-card .parlay-leg {
    gap: 18px;
  }

  /* SAVED chip + note, at phone scale. */
  .parlay-saved-chip {
    gap: 9px;
    padding: 5px 16px;
    margin-right: 14px;
    font-size: 20px;
    top: -3px;
  }
  .leg-status {
    font-size: 19px;
    gap: 8px;
    margin-top: 2px;
  }
  .leg-status-upcoming {
    padding: 5px 16px;
  }

  #dashboard-content .tab-parlays-content > .parlay-card .parlay-card-footer-saved {
    gap: 14px;
    padding: 18px 14px;
  }
  .parlay-saved-label {
    font-size: 19px;
  }
  .parlay-saved-value {
    font-size: 26px;
  }

  /* LIVE chip in the card header. */
  .parlay-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 12px;
    margin-right: 14px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.16);
    border: 1px solid rgba(231, 76, 60, 0.45);
    color: #ff8071;
    font-size: 20px;          /* ~8 optical */
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
  /* Inside the chip the dot is a bullet, not a standalone marker. */
  .parlay-live-chip .parlay-live-dot {
    width: 14px;
    height: 14px;
    margin-right: 0;
    top: 0;
  }

  /* The money footer is ONE tile with a rule down the middle, not two
     separate tiles — the two figures are a pair and read as one statement. */
  .parlay-card-footer {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 22px;
    align-items: center;
  }
  /* Each figure centres in its own half, as a pair, rather than one shoved
     left and one shoved right. flex:1 splits the tile evenly; the base rules
     at :431-435 pin the payout to flex-end, which has to be undone here. */
  .parlay-footer-item,
  .parlay-footer-towin,
  .parlay-footer-won,
  .parlay-footer-lost,
  .parlay-footer-cashout {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    text-align: center;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  /* The divider only belongs where the footer IS the pair. `:last-child` that
     is also `:nth-child(2)` means exactly two children — so a footer carrying
     Reuse / Cash Out, or the live gradient bar, never draws one. */
  .parlay-card-footer > .parlay-footer-item:last-child:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Bigger tap targets without moving the tile: the money items are 65px tall
     and set the footer's height, so the buttons have room up to 64px before
     anything grows. Measured footer height is unchanged at 103px. */
  .parlay-card-footer .parlay-reuse-btn,
  .parlay-card-footer .parlay-unstake-btn {
    height: 64px;
    padding: 0 26px;
    font-size: 22px;
    border-radius: 14px;
    gap: 12px;
  }
  .parlay-card-footer .parlay-reuse-btn i,
  .parlay-card-footer .parlay-unstake-btn i {
    font-size: 20px;
    margin-top: 0;
  }
  .parlay-footer-actions {
    align-items: center;
  }
  .parlay-footer-label i {
    display: inline;
    margin-right: 6px;
    opacity: 0.75;
  }

  /* Both action buttons carry background: rgba(0,0,0,0.15) — black at 15% over
     a #000 card is #000, so the fill was a literal no-op and only a hairline
     said "button". Over the card's new 4.5%->2% pane a .22 black reads one step
     BELOW the surface, which is what dashboard.css:1713-1716 predicted.
     Scoped to .parlay-card-actions so the FOOTER buttons (.parlay-reuse-btn /
     .parlay-unstake-btn, which also carry .parlay-action-btn but live in
     .parlay-footer-actions) keep their own sizing. */
  #dashboard-content .parlay-card-actions .parlay-action-btn {
    position: relative;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 16px;
  }
  #dashboard-content .parlay-card-actions .parlay-copy-image-btn {
    border-color: rgba(255, 255, 255, 0.12);
  }
  /* 44-optical-pt hit box with ZERO visual change — the pattern at
     nfl-game-detail.css:2862-2869. Drawn box stays ~54px; 54 + 56 = 110 canvas
     px = ~44 physical. The overhang lands on the non-interactive money footer
     above and inside the 20px inter-card gap below, so it reaches no other
     control. */
  #dashboard-content .parlay-card-actions .parlay-action-btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    bottom: -28px;
  }
}