/* ═══════════════════════════════════════════════════
   TrackLab — Individual Race Page (v2 card layout)
   Loaded only on /races/<venue>/<date>/<time>/
   ═══════════════════════════════════════════════════ */

.race-page { padding-bottom: 80px; }

/* ═══ Race Header ═══ */
.race-header {
  margin-bottom: 18px;
  animation: v2fadeSlide 0.4s ease;
}

.rh-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.rh-venue {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: 28px; letter-spacing: -0.03em; line-height: 1.05;
}
.rh-datetime { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.rh-datetime time { font-weight: 600; color: var(--text-primary); }
.rh-race-name {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--accent-amber); margin-top: 4px;
  line-height: 1.3;
}

/* Status / countdown */
.rh-status { text-align: right; flex-shrink: 0; }
.rh-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 8px; letter-spacing: 0.04em;
}
.rh-badge.upcoming {
  background: rgba(200,255,0,0.08); border: 1px solid rgba(200,255,0,0.2);
  color: var(--accent-lime);
}
.rh-badge.live {
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
  color: var(--accent-red);
}
.rh-badge.live .dot {
  width: 5px; height: 5px; background: var(--accent-red);
  border-radius: 50%; animation: pulse 1.5s ease-in-out infinite;
}
.rh-badge.resulted {
  background: rgba(148,163,184,0.08); border: 1px solid var(--border);
  color: var(--text-secondary);
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.rh-countdown {
  font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700;
  color: var(--text-primary); margin-top: 4px; line-height: 1;
}

/* Meta pills */
.rh-meta {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.rh-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 4px 10px; font-size: 11px;
  color: var(--text-secondary);
}
.rh-pill strong { color: var(--text-primary); font-weight: 600; }
.rh-type-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(34,197,94,0.1); color: var(--accent-green);
  display: inline-flex; align-items: center; line-height: 1;
}

/* Festival link */
.rh-festival {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--accent-amber);
  text-decoration: none; margin-top: 8px;
  padding: 5px 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.12);
  border-radius: 6px; transition: all 0.15s;
}
.rh-festival:hover { background: rgba(245,158,11,0.12); }

.rh-course-note {
  font-size: 12px; color: var(--accent-amber); font-style: italic; margin-top: 8px;
}


/* ═══ Top Pick Callout (pre-race) ═══ */
.top-pick {
  background: var(--bg-card);
  border: 1px solid rgba(0,255,65,0.15);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  position: relative; overflow: hidden;
  animation: v2fadeSlide 0.4s ease 0.05s backwards;
}
.top-pick::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--score-great), var(--accent-lime));
}

.tp-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--score-great); margin-bottom: 10px;
}
.tp-body {
  display: flex; align-items: center; gap: 12px;
}
.tp-silk {
  width: 48px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 16px; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.tp-silk img { width: 100%; height: 100%; object-fit: contain; }
.tp-info { flex: 1; min-width: 0; }
.tp-name {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em;
}
.tp-name a { color: inherit; text-decoration: none; }
.tp-name a:hover { color: var(--accent-lime); }
.tp-connections { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.tp-connections a { color: var(--text-secondary); text-decoration: none; }
.tp-connections a:hover { color: var(--text-primary); }

.tp-score-block { text-align: center; flex-shrink: 0; }
.tp-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 36px;
  line-height: 1;
}
.tp-score-tier {
  font-size: 10px; font-weight: 600; margin-top: 2px;
}
.tp-score.s-great, .tp-score.s-great + .tp-score-tier { color: var(--score-great); }
.tp-score.s-good, .tp-score.s-good + .tp-score-tier { color: var(--score-good); }
.tp-score.s-mid, .tp-score.s-mid + .tp-score-tier { color: var(--score-mid); }
.tp-score.s-low, .tp-score.s-low + .tp-score-tier { color: var(--score-low); }

.tp-tags {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px;
}
.tp-tag {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px;
}
.tp-tag.green {
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.15);
  color: var(--accent-green);
}
.tp-tag.value {
  background: rgba(200,255,0,0.08); border: 1px solid rgba(200,255,0,0.15);
  color: var(--accent-lime);
}


/* ═══ Accuracy Banner (post-race) ═══ */
.accuracy-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--radius);
  margin-bottom: 18px; font-size: 14px; font-weight: 600;
}
.accuracy-banner.won {
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
  color: var(--accent-green);
}
.accuracy-banner.placed {
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2);
  color: var(--accent-amber);
}
.accuracy-banner.missed {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15);
  color: var(--accent-red);
}
.accuracy-banner .ab-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
}
.accuracy-banner.won .ab-icon { background: rgba(34,197,94,0.2); }
.accuracy-banner.placed .ab-icon { background: rgba(245,158,11,0.2); }
.accuracy-banner.missed .ab-icon { background: rgba(239,68,68,0.15); }
.accuracy-banner.won .ab-icon::before { content: "✓"; }
.accuracy-banner.placed .ab-icon::before { content: "P"; }
.accuracy-banner.missed .ab-icon::before { content: "✗"; }


/* ═══ Section Heading ═══ */
.race-page .section-heading {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.race-page .section-heading::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.race-page .section-heading .tl-feedback {
  order: 1; flex-shrink: 0;
}


/* ═══ Runner Cards ═══ */
.runner-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 24px;
}

.runner-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
  animation: v2fadeSlide 0.3s ease backwards;
}
.runner-card:nth-child(1) { animation-delay: 0.02s; }
.runner-card:nth-child(2) { animation-delay: 0.04s; }
.runner-card:nth-child(3) { animation-delay: 0.06s; }
.runner-card:nth-child(4) { animation-delay: 0.08s; }
.runner-card:nth-child(5) { animation-delay: 0.10s; }
.runner-card:nth-child(6) { animation-delay: 0.12s; }
.runner-card:hover { border-color: rgba(255,255,255,0.06); }
.runner-card.top-scored { border-color: rgba(0,255,65,0.12); }
.runner-card.top-scored:hover { border-color: rgba(0,255,65,0.2); }

/* Compact row — always visible */
.rc-compact {
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}

.rc-silk {
  width: 40px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.rc-silk img { width: 100%; height: 100%; object-fit: contain; }

.rc-main { min-width: 0; flex: 1; }
.rc-horse-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cloth-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px;
  color: var(--text-muted); margin-right: 4px;
}
.rc-horse-name a { color: inherit; text-decoration: none; }
.rc-horse-name a:hover { color: var(--accent-lime); }
.rc-meta-line {
  font-size: 11px; color: var(--text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-meta-line a { color: var(--text-secondary); text-decoration: none; }
.rc-meta-line a:hover { color: var(--text-primary); }

/* Inline tags — 1-2 most important */
.rc-inline-tags {
  display: flex; gap: 3px; flex-shrink: 0;
}
.rc-itag {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; letter-spacing: 0.02em; white-space: nowrap;
}
.rc-itag.good { background: rgba(34,197,94,0.1); color: var(--accent-green); }
.rc-itag.ok { background: rgba(245,158,11,0.08); color: var(--accent-amber); }
.rc-itag.poor { background: rgba(239,68,68,0.08); color: var(--accent-red); }

/* Score */
.rc-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px;
  text-align: center; min-width: 36px; flex-shrink: 0;
}
.rc-score.s-great { color: var(--score-great); }
.rc-score.s-good { color: var(--score-good); }
.rc-score.s-mid { color: var(--score-mid); }
.rc-score.s-low { color: var(--score-low); }

/* Bet CTA */
.rc-bet-main {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-green); color: #000;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px;
  border: none; border-radius: 6px;
  padding: 7px 10px; cursor: pointer;
  transition: all 0.15s; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.rc-bet-main:hover { filter: brightness(1.1); }
.rc-bet-main .odds {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
}

/* Bookmaker brand colours on bet button */
.rc-bet-main.bookie-bet365 { background: #127B3D; color: #fff; }
.rc-bet-main.bookie-william-hill { background: #2D3E50; color: #fff; }
.rc-bet-main.bookie-coral { background: #FFD700; color: #000; }
.rc-bet-main.bookie-paddy-power { background: #004833; color: #fff; }
.rc-bet-main.bookie-ladbrokes { background: #D32F2F; color: #fff; }
.rc-bet-main.bookie-betfred { background: #0A4FA3; color: #fff; }
.rc-bet-main.bookie-sky-bet { background: #0C2340; color: #fff; }
.rc-bet-main.bookie-bet-victor { background: #CC0000; color: #fff; }
.rc-bet-main.bookie-boylesports, .rc-bet-main.bookie-boyle-sports { background: #006B3F; color: #fff; }
.rc-bet-main.bookie-betway { background: #00A826; color: #fff; }
.rc-bet-main.bookie-unibet { background: #147B45; color: #fff; }

/* Value badge */
.rc-value-label {
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; margin-bottom: 6px; display: inline-block;
}
.rc-value-label.super { background: rgba(200,255,0,0.15); color: var(--accent-lime); }
.rc-value-label.good-v { background: rgba(34,197,94,0.12); color: var(--accent-green); }


/* ═══ Expanded Detail ═══ */
.rc-detail {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}
.runner-card.expanded .rc-detail { display: block; }

/* All form tags */
.rc-all-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-top: 12px;
}
.rc-tag {
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 5px; display: inline-flex; align-items: center; gap: 4px;
}
.rc-tag.good {
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.15);
  color: var(--accent-green);
}
.rc-tag.ok {
  background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.12);
  color: var(--accent-amber);
}
.rc-tag.poor {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.12);
  color: var(--accent-red);
}

/* Insight text */
.rc-insight {
  background: rgba(59,130,246,0.04);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px; margin-top: 10px;
}
.rc-insight-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent-blue); margin-bottom: 3px;
}
.rc-insight-text {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
  font-style: italic;
}

/* Stable tour */
.rc-stable-tour { margin-top: 10px; }
.rc-st-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px;
}
.rc-st-item {
  display: flex; gap: 8px; font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.rc-st-item:last-child { border-bottom: none; }
.rc-st-date {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  color: var(--text-muted); min-width: 55px; flex-shrink: 0; padding-top: 1px;
}
.rc-st-quote {
  color: var(--text-secondary); font-style: italic; line-height: 1.5;
}

/* Bookmaker comparison */
.rc-bookie-list { margin-top: 10px; }
.rc-bl-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px;
}
.rc-bl-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.rc-bl-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.02); cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px;
  font-size: 12px; text-decoration: none; color: var(--text-secondary);
  transition: all 0.15s;
}
.rc-bl-item:hover { border-color: var(--accent-green); color: var(--text-primary); }
.rc-bl-item .bl-name { font-weight: 500; }
.rc-bl-item .bl-odds {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
  color: var(--text-primary);
}
.rc-bl-item.best {
  border-color: rgba(34,197,94,0.2); background: rgba(34,197,94,0.04);
}


/* ═══ Post-Race Result Cards ═══ */
.result-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 24px;
}

.res-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  animation: v2fadeSlide 0.3s ease backwards;
}
.res-card:nth-child(1) { animation-delay: 0.02s; }
.res-card:nth-child(2) { animation-delay: 0.04s; }
.res-card:nth-child(3) { animation-delay: 0.06s; }

.res-winner {
  border-color: rgba(245,158,11,0.2);
  background: rgba(245,158,11,0.02);
  text-align: left; /* override main.css .res-winner { text-align: center } */
}

/* Row 1: main grid */
.res-row {
  display: grid;
  grid-template-columns: auto 40px 1fr auto;
  align-items: start;
  gap: 10px;
}

.race-page .res-pos {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 15px; text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1;
  white-space: nowrap;
  width: auto; height: auto; /* override main.css 22x22 */
  display: block;
}
.race-page .res-pos.p1 { color: var(--accent-amber); border-color: rgba(245,158,11,0.2); background: rgba(245,158,11,0.06); }
.race-page .res-pos.p2 { color: var(--text-secondary); background: rgba(200,200,200,0.04); }
.race-page .res-pos.p3 { color: #c8956c; background: rgba(205,127,50,0.04); }
.race-page .res-pos.other { color: var(--text-muted); }
.race-page .res-pos.dnf { color: var(--accent-red); border-color: rgba(239,68,68,0.15); background: rgba(239,68,68,0.04); }

.res-silk {
  width: 40px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.res-silk img { width: 100%; height: 100%; object-fit: contain; }
.res-dnf .res-silk { opacity: 0.5; }

.res-info { min-width: 0; }

.res-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-name a { color: inherit; text-decoration: none; }
.res-name a:hover { color: var(--accent-lime); }
.res-dnf .res-name { color: var(--text-muted); }

.res-meta {
  font-size: 11px; color: var(--text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-meta a { color: var(--text-secondary); text-decoration: none; }
.res-meta a:hover { color: var(--text-primary); }

.res-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 20px;
  text-align: right; min-width: 36px;
}
.res-score.s-great { color: var(--score-great); }
.res-score.s-good { color: var(--score-good); }
.res-score.s-mid { color: var(--score-mid); }
.res-score.s-low { color: var(--score-low); }
.res-dnf .res-score { opacity: 0.5; }

.res-beaten {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-align: right;
  margin-left: auto;
}

/* Row 2: extras — always visible */
.res-extras {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  padding: 8px 0 0 100px; /* indent past position + silk columns (40+10+32) */
  font-size: 11px;
}
.res-sp {
  color: var(--text-secondary);
}
.res-sp strong {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  color: var(--text-primary);
}
.res-or {
  color: var(--text-muted);
}
.res-tag {
  font-weight: 600; padding: 2px 8px; border-radius: 4px;
}
.res-tag.good { background: rgba(34,197,94,0.08); color: var(--accent-green); }
.res-tag.ok { background: rgba(245,158,11,0.06); color: var(--accent-amber); }
.res-tag.poor { background: rgba(239,68,68,0.06); color: var(--accent-red); }

/* Row 3: comment — hidden by default, show on click */
.res-comment-wrap {
  display: none;
  padding: 8px 0 0 100px;
  cursor: pointer;
}
.res-card.expanded .res-comment-wrap { display: block; }
.res-comment {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  line-height: 1.5;
}

/* TOP PICK badge */
.tp-badge-inline {
  font-size: 8px; font-weight: 700;
  background: rgba(59,130,246,0.12); color: var(--accent-blue);
  padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em;
  margin-left: 4px; vertical-align: middle;
}

@media (max-width: 640px) {
  .res-row {
    grid-template-columns: auto 34px 1fr auto;
    gap: 8px;
  }
  .res-card { padding: 10px 12px; }
  .race-page .res-pos { font-size: 13px; padding: 5px 6px; }
  .res-score { font-size: 18px; }
  .res-extras { padding-left: 80px; } /* 38+8+34 */
  .res-comment-wrap { padding-left: 80px; }
}


/* ═══ Related Races ═══ */
.related-section { margin-bottom: 24px; }

.related-strip {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin-bottom: 8px;
}
.related-strip::-webkit-scrollbar { display: none; }

.rel-card {
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  min-width: 180px; cursor: pointer;
  transition: all 0.15s;
  text-decoration: none; color: inherit;
}
.rel-card:hover { border-color: rgba(200,255,0,0.15); }
.rel-card.current {
  border-color: var(--accent-lime);
  background: rgba(200,255,0,0.03);
}

.rel-time {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  color: var(--accent-lime); margin-bottom: 2px;
}
.rel-name {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.rel-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px;
  margin-top: 4px;
}



/* ═══ Detail Level Overrides ═══ */
.detail-core .rc-detail { display: none !important; }
.detail-core .rc-compact { cursor: default; }

/* Core: hide extras and comment on result cards */
.detail-core .res-extras { display: none; }
.detail-core .res-comment-wrap { display: none !important; }

.detail-deep .runner-card.top-scored .rc-detail { display: block; }


/* ═══ Responsive ═══ */
@media (max-width: 640px) {
  .rh-top { flex-direction: column; }
  .rh-status { text-align: left; }
  .rh-venue { font-size: 22px; }

  .rc-inline-tags { display: none; }

  .rc-compact {
    grid-template-columns: 34px 1fr auto auto;
    gap: 8px; padding: 10px 12px;
  }
  .rc-score { font-size: 18px; }
  .rc-bet-main { padding: 6px 8px; font-size: 10px; }
  .rc-bet-main .odds { font-size: 11px; }



  .tp-body { flex-wrap: wrap; }
  .tp-score { font-size: 28px; }
  .tp-silk { width: 40px; height: 30px; font-size: 14px; }
}

@media (max-width: 480px) {
  .rc-bet-main span:not(.odds) { display: none; }
}


/* ═══ Runner Overflow (show more) ═══ */
.rc-overflow {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
}
.js .rc-overflow { display: none; }
.js .rc-overflow.open { display: flex; }

.rc-show-more {
  display: none;
  width: auto; max-width: 240px;
  margin: 8px auto 24px;
  padding: 8px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.js .rc-show-more { display: block; }
.rc-show-more:hover {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.08);
}


/* ═══ Related Strip Scroll Arrows ═══ */
.related-strip-wrap {
  position: relative;
}
.related-strip-wrap .strip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  opacity: 0; pointer-events: none;
}
.related-strip-wrap .strip-arrow.visible {
  opacity: 1; pointer-events: auto;
}
.related-strip-wrap .strip-arrow:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--accent-lime);
}
.related-strip-wrap .strip-arrow.left { left: -6px; }
.related-strip-wrap .strip-arrow.right { right: -6px; }

/* Fade edges when scrollable */
.related-strip-wrap::before,
.related-strip-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 4px;
  width: 32px; z-index: 1; pointer-events: none;
  transition: opacity 0.2s;
}
.related-strip-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-deep), transparent);
  opacity: 0;
}
.related-strip-wrap.scrolled-start::before { opacity: 0; }
.related-strip-wrap.scrolled-mid::before,
.related-strip-wrap.scrolled-end::before { opacity: 1; }
.related-strip-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-deep), transparent);
  opacity: 0;
}
.related-strip-wrap.scrolled-end::after { opacity: 0; }
.related-strip-wrap.scrolled-start::after,
.related-strip-wrap.scrolled-mid::after { opacity: 1; }