/* One border value for the dark theme (owner 2026-09-28): 22 percent white on every screen, 35 on
   iOS, where the same line reads fainter ("more in iphone safari"). Every border on the site reads
   var(--bv-line) (or --bv-line-solid where a solid grey is needed), so this is the one place to move it. */
:root { --bv-line: rgba(255,255,255,0.15); --bv-line-solid: #35354f; --bv-lift: 0 1px 3px rgba(255,255,255,0.06); }
/* One value on every device (owner 2026-09-28): the stronger iPhone line of 2026-09-27 answered a Safari extension (Noir) darkening the page, not the phone. */
/* ============================================================
   Fixture Detail Page — Card Format
   ============================================================ */

.fixture-detail-page {
  padding-top: 80px;
}

/* --- Breadcrumb --- */
.fd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.fd-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.fd-breadcrumb a:hover {
  color: var(--brand-blue);
}

.fd-breadcrumb .crumb-league {
  color: var(--text-secondary);
}

/* --- Main Fixture Card (enlarged version of list card) --- */
.fd-fixture-card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
}

.fd-fixture-card.card-live {
  border-left-color: var(--live);
}

.fd-fixture-card.card-ft {
  border-left-color: var(--text-muted);
}

.fd-fixture-card.card-postponed {
  border-left-color: var(--brand-orange);
}

.fd-card-main {
  display: grid;
  grid-template-columns: 80px 1fr auto 1fr 60px;
  align-items: center;
  padding: 28px 32px;
  gap: 24px;
}

/* League column */
.fd-league-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-league-col img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* No-team fixtures (motorsport, combat, NFL Red Zone): same grid, same badge,
   same centre block, only the two team columns are gone. */
.fd-card-main.fd-card-solo { grid-template-columns: 80px 1fr 60px; }
.fd-center-solo { min-height: 72px; justify-content: center; }
.fd-solo-event {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
}

/* Teams */
.fd-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fd-team img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.fd-team-name {
  /* display:block, or the span inherits the body's 1.6 line box and a two-line
     name (LOS ANGELES / RAMS) opens up on a phone (owner 2026-09-27, S26 Ultra). */
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 160px;
  line-height: 1.15;
}
.fd-team > a { line-height: 1.15; display: block; }

/* Center (score / time) */
.fd-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}

.fd-score {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.05em;
  line-height: 1;
}

.fd-score.live {
  color: #fff;
}

.fd-time-display {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-family: var(--font-condensed);
}

.fd-date-display {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fd-live-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--live);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fd-final-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.fd-period {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
}

.fd-extra {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.fd-set-scores {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.fd-status-dot.cancelled {
  background: var(--brand-orange);
}

.fd-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.fd-status-badge.live {
  background: rgba(255,59,92,0.15);
  color: var(--live);
  animation: fd-pulse-live 2s ease infinite;
}

.fd-status-badge.live .live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  animation: fd-pulse-dot 1.5s ease infinite;
}

.fd-status-badge.ft {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
}

.fd-status-badge.upcoming {
  background: rgba(74,161,217,0.15);
  color: var(--brand-blue);
}

.fd-status-badge.postponed {
  background: rgba(243,147,34,0.15);
  color: var(--brand-orange);
}

@keyframes fd-pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0.3); }
  50% { box-shadow: 0 0 16px 4px rgba(255,59,92,0.15); }
}

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

/* Status column */
.fd-status-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}

.fd-status-dot.live {
  background: var(--live);
  animation: fd-pulse-dot 1.5s ease infinite;
}

.fd-status-dot.ft {
  background: var(--text-muted);
  opacity: 0.5;
}

/* --- Motorsport Card --- */
.fd-motorsport-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  gap: 8px;
}

.fd-motorsport-badge {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 8px;
}

.fd-motorsport-league {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.fd-motorsport-event {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.fd-motorsport-time {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-top: 4px;
}

.fd-motorsport-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.fd-motorsport-round {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

@media (min-width: 1024px) {
  .fd-motorsport-event { font-size: 1.6rem; }
  .fd-motorsport-time { font-size: 2.2rem; }
  .fd-motorsport-badge { width: 80px; height: 80px; }
}

@media (max-width: 768px) {
  .fd-motorsport-card { padding: 24px 16px; }
  .fd-motorsport-event { font-size: 1.1rem; }
  .fd-motorsport-time { font-size: 1.4rem; }
  .fd-motorsport-badge { width: 56px; height: 56px; }
}

/* --- Meta Row (below card) --- */
.fd-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.fd-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.fd-meta-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.fd-meta-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  flex-shrink: 0;
}

.fd-meta-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
}

/* --- Content Area --- */
.fd-content {
  padding-bottom: 80px;
}

/* --- Info Grid ---
   The grid lives INSIDE a single .fd-info-card and splits its content into two
   side-by-side .fd-info-col columns with a hair-line divider. */
.fd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.fd-info-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fd-info-col + .fd-info-col {
  border-left: 1px solid var(--border-glass);
  padding-left: 32px;
}
@media (max-width: 720px) {
  .fd-info-grid { grid-template-columns: 1fr; gap: 0; }
  /* Stacked columns flow seamlessly — NO border between Status (last row of
     left col) and Location (first row of right col). The natural gap from
     `.fd-info-row { padding: 12px 16px }` is enough separation. */
  .fd-info-col + .fd-info-col {
    border-left: 0;
    border-top: 0;
    padding-left: 0;
    margin-top: 0;
    padding-top: 0;
  }
}

.fd-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.2s;
}

.fd-info-card:hover {
  border-color: var(--bv-line);
}

.fd-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.fd-info-card .fd-section-heading {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.fd-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bv-line);
}

.fd-info-row:last-child {
  border-bottom: none;
}

.fd-info-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}

.fd-info-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand-blue);
}

.fd-info-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 60px;
}

.fd-info-value {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
  margin-left: auto;
  text-align: right;
}

/* League header */
.fd-league-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.fd-league-badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
}

.fd-league-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.fd-league-sport {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* --- Bars Section --- */
.fd-bars-section {
  margin-top: 8px;
  margin-bottom: 40px;
}

.fd-walkin-banner {
  color: var(--brand-orange);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: rgba(241, 131, 24, 0.08);
  border: 1px solid rgba(241, 131, 24, 0.2);
}

.fd-section-heading {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 48px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Reset margin-top ONLY for the very first heading in the page, not for
   headings that are the first child of a sub-container (e.g., the Next
   Fixtures heading inside #fdNextFixtures). */
.event-detail-page > .container > .fd-section-heading:first-of-type,
.fixture-detail-page > .container > .fd-section-heading:first-of-type { margin-top: 0; }

.fd-section-heading svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-blue);
}

.fd-section-heading .count-badge {
  background: var(--brand-blue);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
}

.fd-bar-card {
  display: flex;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color 0.2s, transform 0.2s;
}

.fd-bar-card:hover {
  border-color: rgba(74,161,217,0.3);
  transform: translateY(-2px);
}

.fd-bar-cover {
  width: 200px;
  min-height: 140px;
  background: var(--bg-glass);
  flex-shrink: 0;
  overflow: hidden;
}

.fd-bar-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fd-bar-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(74,161,217,0.1), rgba(124,58,237,0.08));
}

.fd-bar-cover-placeholder svg {
  width: 40px;
  height: 40px;
  stroke: var(--text-muted);
  opacity: 0.5;
}

.fd-bar-info {
  flex: 1;
  padding: 20px 20px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fd-bar-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.fd-bar-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.fd-bar-address svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  flex-shrink: 0;
}

.fd-bar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.fd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.fd-btn-primary {
  background: linear-gradient(135deg, var(--brand-blue), #00c4cc);
  color: #000;
  box-shadow: 0 0 20px rgba(74,161,217,0.2);
}

.fd-btn-primary:hover {
  box-shadow: 0 0 30px rgba(74,161,217,0.35);
  transform: translateY(-1px);
}

.fd-btn-secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bv-line);
  color: var(--text-secondary);
}

.fd-btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}

.fd-no-bars .fd-btn { align-self: center; }
.fd-error .fd-btn, .fd-empty .fd-btn { align-self: center; }

.fd-btn svg {
  width: 14px;
  height: 14px;
}

/* --- No Bars CTA --- */
.fd-no-bars {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--bv-line);
  border-radius: 16px;
}

.fd-no-bars-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(74,161,217,0.08);
}

.fd-no-bars-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--brand-blue);
}

.fd-no-bars h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.fd-no-bars p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* --- Description --- */
.fd-description {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
}

.fd-description p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- Video --- */
.fd-video {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.fd-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* The player takes no pointer events, so YouTube never draws its title bar
   or "Watch on YouTube" overlay. A transparent layer above it handles clicks
   and drives play/pause through the iframe API. No masks, full picture. */
.fd-video {
  position: relative;
  background: #000;
}

.fd-video-playing iframe { pointer-events: none; }

.fd-video-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}

/* Our own paused screen. YouTube paints its title and "More videos" grid
   whenever the player is paused or finished, so we cover it with the
   thumbnail instead. Hidden while the video is actually playing. */
.fd-video-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s linear;
}

.fd-video-paused .fd-video-cover {
  opacity: 1;
  visibility: visible;
}

.fd-video-cover .fd-video-poster { width: 100%; height: 100%; object-fit: cover; }

.fd-video-cover .fd-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  display: block;
}

/* --- Click-to-play facade --- */
.fd-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fd-video-facade { cursor: pointer; }

.fd-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.fd-video-play svg { width: 100%; height: 100%; display: block; }
.fd-video-play .yt-bg { fill: #f00; opacity: .92; transition: opacity .15s; }
.fd-video-play .yt-arrow { fill: #fff; }
.fd-video-facade:hover .fd-video-play .yt-bg { opacity: 1; }

/* --- Error State --- */
.fd-error {
  text-align: center;
  padding: 80px 24px;
}

.fd-error h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.fd-error p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* === RESPONSIVE === */

@media (min-width: 1024px) {
  .fd-card-main {
    padding: 32px 40px;
    gap: 28px;
  }

  .fd-team img {
    width: 80px;
    height: 80px;
  }

  .fd-league-col img {
    width: 64px;
    height: 64px;
  }

  .fd-team-name {
    font-size: 0.9rem;
  }

  .fd-score {
    font-size: 2.8rem;
  }

  .fd-time-display {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .fixture-detail-page {
    padding-top: 70px;
  }

  .fd-card-main {
    grid-template-columns: 48px 1fr auto 1fr 40px;
    padding: 18px 14px;
    gap: 10px;
  }

  .fd-league-col img {
    width: 40px;
    height: 40px;
  }

  .fd-team img {
    width: 52px;
    height: 52px;
  }

  .fd-team-name {
    font-size: 0.7rem;
    max-width: 90px;
  }

  .fd-score {
    font-size: 1.8rem;
  }

  .fd-time-display {
    font-size: 0.7rem;
  }

  .fd-center {
    min-width: 70px;
  }

  .fd-info-grid {
    grid-template-columns: 1fr;
  }

  .fd-meta-row {
    gap: 12px;
  }

  .fd-meta-divider {
    display: none;
  }

  .fd-bar-card {
    flex-direction: column;
  }

  .fd-bar-cover {
    width: 100%;
    min-height: 160px;
    max-height: 200px;
  }

  .fd-bar-info {
    padding: 16px;
  }

}

@media (max-width: 480px) {
  .fd-card-main {
    grid-template-columns: 36px 1fr auto 1fr 32px;
    padding: 14px 10px;
    gap: 6px;
  }

  .fd-league-col img {
    width: 32px;
    height: 32px;
  }

  .fd-team img {
    width: 44px;
    height: 44px;
  }

  .fd-team-name {
    font-size: 0.6rem;
    max-width: 70px;
  }

  .fd-score {
    font-size: 1.4rem;
  }

  .fd-time-display {
    font-size: 0.55rem;
  }

  .fd-section-heading {
    font-size: 1.1rem;
  }
}

/* ============================================================
   Watch This Game — venue list (Option A row design)
   ============================================================ */
.fd-venues-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Events page: separate each fixture group (fixture card + its venue rows) from the next */
.ev-fixture-venues {
  margin-bottom: 32px;
}
.ev-fixture-venues:last-child {
  margin-bottom: 0;
}

.fd-venue-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

/* New 3-row venue card layout: name+time / geo+local-tz / pills+book */
.fd-venue-card-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.fd-venue-card-v2:hover {
  border-color: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74,161,217,0.12);
}
.fd-venue-card-v2 .fd-venue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.fd-venue-card-v2 .fd-venue-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fd-venue-card-v2 .fd-venue-line > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-venue-card-v2 .fd-venue-line-name {
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
}
.fd-venue-card-v2 .fd-venue-line-name i {
  color: var(--brand-blue);
}
.fd-venue-card-v2 .fd-venue-line-geo {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.fd-venue-card-v2 .fd-venue-line-geo i {
  color: var(--text-muted);
  opacity: 0.8;
}
.fd-venue-card-v2 .fd-venue-time {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.fd-venue-card-v2 .fd-venue-tz {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fd-venue-card-v2 .fd-venue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fd-venue-card-v2 .fd-venue-row-pills {
  margin-top: 2px;
}
@media (max-width: 600px) {
  .fd-venue-card-v2 { padding: 12px 14px; gap: 6px; }
  .fd-venue-card-v2 .fd-venue-line-name { font-size: 0.92rem; }
  .fd-venue-card-v2 .fd-venue-time { font-size: 1rem; }
  .fd-venue-card-v2 .fd-venue-line-geo { font-size: 0.78rem; }
}

/* Legacy block kept for backward compat (currently unused) */
.fd-venue-card-legacy {
}

.fd-venue-card:hover {
  border-color: var(--brand-blue, #4aa1d9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.fd-venue-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-blue-dim, rgba(74,161,217,0.18));
  color: var(--brand-blue, #4aa1d9);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fd-venue-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fd-venue-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.fd-venue-area {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.fd-venue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.fd-venue-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bv-line);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
}

.fd-venue-pill i {
  font-size: 12px;
  line-height: 1;
  /* Push icon up slightly to compensate FA glyph descender area */
  position: relative;
  top: 1px;
}

.fd-venue-pill > span {
  /* Optical centering handled by .tb-trim utility in bookvelt-textcenter.css.
     Old `top:-1px` Inter cap-height-drift nudge removed 2026-06-14. */
}

.fd-venue-time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  flex-shrink: 0;
}

.fd-venue-time {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.fd-venue-tz {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fd-venue-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--brand-blue, #4aa1d9);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 38px;
  box-sizing: border-box;
}

.fd-venue-book i {
  font-size: 14px;
  line-height: 38px;
  display: inline-block;
}

.fd-venue-card:hover .fd-venue-book {
  background: var(--brand-blue-light, #5db3ed);
}

@media (max-width: 720px) {
  .fd-venue-card {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num info time"
      "num info book"
      "pills pills pills";
    gap: 12px;
    padding: 14px 16px;
  }
  .fd-venue-num { grid-area: num; }
  .fd-venue-info { grid-area: info; }
  .fd-venue-time-block { grid-area: time; align-self: start; }
  .fd-venue-book { grid-area: book; align-self: end; padding: 6px 12px; font-size: 0.7rem; }
  .fd-venue-pills { grid-area: pills; margin-top: 2px; }
  .fd-venue-time { font-size: 1.1rem; }
  .fd-venue-name { font-size: 0.95rem; }
}

/* ── Rich match data: timeline / lineups / statistics ── */
#fdRich { margin-bottom: 28px; }
.fd-timeline { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; }
.fd-ev { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--card-bg, #14141f); border-radius: 10px; }
.fd-ev.away { flex-direction: row-reverse; text-align: right; }
.fd-ev-min { min-width: 42px; font-weight: 700; font-size: .85rem; color: var(--accent, #4aa1d9); }
.fd-ev.away .fd-ev-min { text-align: right; }
.fd-ev-icon img { display: block; }
.fd-ev-body { display: flex; flex-direction: column; line-height: 1.25; font-size: .9rem; }
.fd-ev.away .fd-ev-body { align-items: flex-end; }
.fd-ev-assist, .fd-ev-sub { font-size: .78rem; color: var(--text-muted, #9aa0b4); }
.fd-ev-type { font-size: .72rem; color: var(--text-muted, #9aa0b4); text-transform: uppercase; letter-spacing: .04em; }
.fd-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.fd-lineup { background: var(--card-bg, #14141f); border-radius: 12px; padding: 14px 16px; }
.fd-lineup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fd-formation { font-size: .8rem; color: var(--accent, #4aa1d9); font-weight: 700; }
.fd-xi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.fd-xi li { display: flex; align-items: center; gap: 8px; }
.fd-shirt { min-width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.06);
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.fd-subs-label { margin: 12px 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #9aa0b4); }
.fd-xi.subs { opacity: .75; }
.fd-coach { margin-top: 10px; font-size: .8rem; color: var(--text-muted, #9aa0b4); }
.fd-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.fd-stat-row { display: flex; align-items: center; gap: 14px; }
.fd-stat-v { min-width: 46px; text-align: center; font-weight: 700; font-size: .9rem; }
.fd-stat-mid { flex: 1; }
.fd-stat-label { display: block; text-align: center; font-size: .74rem; color: var(--text-muted, #9aa0b4);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.fd-stat-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.fd-stat-bar span { display: block; height: 100%; background: var(--accent, #4aa1d9); }
@media (max-width: 720px) { .fd-lineups { grid-template-columns: 1fr; } }

/* Tabs per the approved mock: sticky pill bar, panels toggle */
.fd-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px;
  background: rgba(10,10,15,.9); backdrop-filter: blur(10px); padding: 10px 0; margin-bottom: 14px; }
.fd-tab { appearance: none; border: 1px solid var(--bv-line); background: var(--card-bg, #11151f);
  color: var(--text-muted, #9aa0b4); font: inherit; font-size: 13px; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.fd-tab:hover { color: var(--text, #e4e4e7); border-color: rgba(74,161,217,.4); }
.fd-tab[aria-selected="true"] { background: rgba(74,161,217,.14); color: var(--accent, #4aa1d9);
  border-color: rgba(74,161,217,.5); }
.fd-tab .n { display: inline-block; min-width: 17px; text-align: center; background: var(--chip, #1b2130);
  border-radius: 99px; font-size: 10.5px; padding: 1px 5px; margin-left: 6px; }
.fd-tab .n.hot { background: rgba(239,68,68,.16); color: #ef4444; }
.fd-panel { display: none; }
.fd-panel.on { display: block; }
.fd-ev-icon img, .fd-ev-sub img { vertical-align: middle; }

/* ═══ Approved mock, applied (fixture-mock.html) ═══ */
#fdRich { --mline: rgba(255,255,255,.07); --mchip: #1b2130; margin-bottom: 30px; }
.fd-mtabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px;
  background: rgba(10,10,15,.9); backdrop-filter: blur(10px); padding: 12px 0; margin: 22px 0 4px; overflow-x: auto; }
.fd-mtab { appearance: none; border: 1px solid var(--mline); background: var(--card-bg, #11151f);
  color: #94a3b8; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px;
  border-radius: 10px; cursor: pointer; white-space: nowrap; }
.fd-mtab:hover { color: #fff; border-color: rgba(74,161,217,.4); }
.fd-mtab[aria-selected="true"] { background: rgba(74,161,217,.14); color: var(--accent, #4aa1d9); border-color: rgba(74,161,217,.5); }
.fd-mtab .n { display: inline-block; min-width: 17px; text-align: center; background: var(--mchip);
  border-radius: 99px; font-size: 10.5px; padding: 1px 5px; margin-left: 6px; }
.fd-mtab .n.hot { background: rgba(255,59,92,.15); color: #ff3b5c; }
.fd-mpanel { display: none; animation: fdfade .25s ease; }
.fd-mpanel.on { display: block; }
@keyframes fdfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fd-km-title { display: flex; align-items: center; gap: 11px; margin: 34px 0 14px; font-size: 19px; font-weight: 700; }

/* events — mock .ev rows */
#fdRich .ev { display: grid; grid-template-columns: 34px 52px 34px 1fr; gap: 14px; align-items: center;
  padding: 13px 20px; margin-bottom: 10px; background: var(--card-bg, #11151f);
  border: 1px solid var(--mline); border-radius: 14px; }
#fdRich .ev.h { border-left: 3px solid var(--accent, #4aa1d9); }
#fdRich .ev .min { font-family: ui-monospace, monospace; font-size: 12px; color: #94a3b8;
  background: var(--mchip); border-radius: 8px; padding: 5px 0; text-align: center; font-variant-numeric: tabular-nums; }
#fdRich .ev .evic { display: flex; align-items: center; justify-content: center; }
#fdRich .ev .evic img { width: 26px; height: 26px; display: block; }
#fdRich .ev .who { font-size: 14px; font-weight: 700; }
#fdRich .ev .sub-t, #fdRich .tl2-ev .sub-t { font-size: 12px; color: #94a3b8; margin-top: 1px; }
#fdRich .who.goal-score { font-size: 19px; font-weight: 800; letter-spacing: .3px; }
#fdRich .ev .sub-t.scorer, #fdRich .tl2-ev .sub-t.scorer { font-size: 13px; font-weight: 700; }
#fdRich .sub-t .mut { color: #94a3b8; }
#fdRich .ev .sub-t .in, #fdRich .tl2-ev .sub-t .in { color: #10b981; }
#fdRich .ev .sub-t .out, #fdRich .tl2-ev .sub-t .out { color: #ff3b5c; }
#fdRich .runscore { font-size: 11.5px; color: #94a3b8; font-variant-numeric: tabular-nums; margin-top: 2px; }
#fdRich .tside img { display: block; }
.ev-period { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #5b6675;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.ev-period::before, .ev-period::after { content: ""; flex: 1; height: 1px; background: var(--mline); }

/* lineups — mock pitch */
#fdRich .card { background: var(--card-bg, #11151f); border: 1px solid var(--mline); border-radius: 14px; }
/* Two columns ALWAYS — the header never stacks into rows (owner). */
.lu-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--mline); }
.lu-team { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.lu-team.away { flex-direction: row-reverse; text-align: right; }
.lu-team .f { font-family: ui-monospace, monospace; font-size: 12px; background: var(--mchip); padding: 4px 10px; border-radius: 8px; }
.lu-team .c { font-size: 12px; color: #94a3b8; }
/* The field is its own standalone box (owner 2026-08-13): no wrapping card. The inner
   .pitch-in layer insets all %-positioned markings + players = padding inside the box. */
.lu-stack { display: flex; flex-direction: column; gap: 12px; }
.pitch { position: relative; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 60px, rgba(255,255,255,.035) 60px 120px),
    linear-gradient(180deg, #0d2418, #0b1e14);
  border: 1px solid rgba(120,180,140,.16); border-radius: 14px; aspect-ratio: 16/10.5; overflow: hidden; }
.pitch-in { position: absolute; inset: 16px 30px; }
@media (max-width: 640px) { .pitch-in { inset: 10px 16px; } }
.pitch-in .center { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); }
.pitch-in .circle { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px;
  border: 1px solid var(--bv-line); border-radius: 50%; transform: translate(-50%,-50%); }
.pitch-in .box { position: absolute; top: 27%; bottom: 27%; width: 9%; border: 1px solid var(--bv-line); }
.pitch-in .box.l { left: 0; border-left: 0; } .pitch-in .box.r { right: 0; border-right: 0; }
.pp { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column;
  align-items: center; gap: 3px; width: 64px; }
.pp .dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; border-width: 1.5px; border-style: solid;
  box-shadow: 0 3px 10px rgba(0,0,0,.5); }
/* FULL names on the pitch (owner): wrap to two lines, never ellipsize. */
.pp { width: 80px; }
.pp .pn { font-size: 9.5px; color: #cfe4d8; text-shadow: 0 1px 3px rgba(0,0,0,.9);
  max-width: 78px; white-space: normal; line-height: 1.15; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  background: rgba(8,14,10,.55); padding: 1px 4px; border-radius: 6px; }
@media (max-width: 900px) {
  .pp { width: 68px; }
  .pp .pn { font-size: 8.5px; max-width: 66px; }
  .pp .dot { width: 26px; height: 26px; font-size: 10px; }
}
@media (max-width: 560px) {
  .pp { width: 58px; }
  .pp .pn { font-size: 8px; max-width: 56px; }
  .pp .dot { width: 22px; height: 22px; font-size: 9px; }
}
.subs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 6px 20px 16px; }
@media (max-width: 640px) { .subs-grid { gap: 0 14px; padding: 6px 12px 14px; } .subs .sr { font-size: 12px; } }
.subs h3 { margin: 12px 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.subs .sr { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--mline); }
.subs .sr:last-child { border-bottom: 0; }
.subs .sr .num { font-family: ui-monospace, monospace; font-size: 11px; color: #5b6675; width: 20px; text-align: right; }
.subs .sr .pos { margin-left: auto; font-size: 11px; color: #5b6675; }

/* stats — mock dual track */
.stats-legend { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700;
  padding: 16px 20px 4px; letter-spacing: .05em; text-transform: uppercase; }
.stats-legend .l1 { color: var(--accent, #4aa1d9); } .stats-legend .l2 { color: #66b32e; }
.stat { padding: 11px 20px 13px; border-bottom: 1px solid var(--mline); }
.stat:last-child { border-bottom: 0; }
.stat .lbl { display: flex; align-items: center; gap: 11px; font-size: 13px; color: #94a3b8; margin-bottom: 8px; }
.stat .lbl b { color: #fff; font-variant-numeric: tabular-nums; font-size: 13.5px; min-width: 38px; }
.stat .lbl b.va { text-align: right; margin-left: auto; }
.stat .lbl .name { flex: 1; text-align: center; }
.stat .track { display: flex; gap: 3px; height: 7px; }
.stat .track .h, .stat .track .a { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.22,1,.36,1); }
.stat .track .h { background: var(--accent, #4aa1d9); } .stat .track .a { background: #66b32e; }

#fdRich img.mono { filter: brightness(0) invert(1); opacity: .92; }

#fdRich .sub-lines { display: flex; flex-direction: column; gap: 2px; }
#fdRich .sub-in { color: #22c069; font-weight: 700; font-size: 13.5px; }
#fdRich .sub-out { color: #ff3b5c; font-weight: 700; font-size: 13.5px; }

/* events — mock ev-group (grouped-by-type view) + view chips + away accent */
#fdRich .ev.a { border-left: 3px solid #66b32e; }  /* brand green vs home blue (owner 2026-08-13) */
#fdRich .ev-group { margin-bottom: 14px; padding: 0 0 6px; }
#fdRich .ev-group .gh { display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#fdRich .ev-group .gh img { border-radius: 50%; }
#fdRich .ev-group .gh .cnt { margin-left: auto; font-size: 12.5px; color: #94a3b8;
  display: flex; gap: 7px; align-items: center; font-variant-numeric: tabular-nums; }
#fdRich .yc-sq { width: 11px; height: 14px; border-radius: 2px; background: #fbbf24; display: inline-block; }
#fdRich .ev-group .ev { margin: 0 8px 8px; }
#fdRich .ev-views { display: flex; gap: 8px; margin: 0 0 14px; }
#fdRich .lu-head2 { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 20px; }
#fdRich .lu-head2 .t { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; min-width: 0; }
#fdRich .lu-head2 .t.h .tn > span { color: var(--accent, #4aa1d9); }
#fdRich .lu-head2 .t.a .tn > span { color: #66b32e; }
#fdRich .lu-head2 img { flex: none; width: 38px; height: 38px; object-fit: contain; }
#fdRich .lu-head2 .tn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#fdRich .lu-head2 .t.a .tn { align-items: flex-end; text-align: right; }
#fdRich .lu-head2 .tn .f { font-family: ui-monospace, monospace; font-style: normal; font-size: 10px;
  background: var(--mchip, #1b2130); padding: 2px 7px; border-radius: 6px; align-self: flex-start; }
#fdRich .lu-head2 .t.a .tn .f { align-self: flex-end; }
#fdRich .subs-head.sec { padding-bottom: 8px; }
#fdRich .lu-secs { display: inline-flex; gap: 8px; }
#fdRich .lu-sec { text-transform: capitalize; letter-spacing: normal; }
#fdRich .ev-view, #fdRich .lu-view, #fdRich .lu-sec { appearance: none; cursor: pointer; border: 1px solid var(--mline);
  background: var(--card-bg, #11151f); color: #94a3b8; border-radius: 99px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; }
#fdRich .ev-view:hover, #fdRich .lu-view:hover, #fdRich .lu-sec:hover { color: #fff; border-color: rgba(74,161,217,.4); }
#fdRich .ev-view[aria-selected="true"], #fdRich .lu-view[aria-selected="true"], #fdRich .lu-sec[aria-selected="true"] { background: rgba(74,161,217,.14);
  color: var(--accent, #4aa1d9); border-color: rgba(74,161,217,.5); }

/* linescore — quarter/inning/period box-score header on Overview */
#fdRich .linescore-card { padding: 0 16px; margin-bottom: 14px; overflow-x: auto; }
#fdRich .linescore { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#fdRich .linescore td { padding: 6px 8px; text-align: center; font-size: 13px; min-width: 30px; }
#fdRich .linescore thead td { color: #94a3b8; font-size: 11px; letter-spacing: .08em; font-weight: 700; }
#fdRich .linescore td.t { text-align: left; font-weight: 700; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
#fdRich .linescore td.tot { font-weight: 800; border-left: 1px solid var(--mline); }
#fdRich .linescore tbody tr { border-top: 1px solid var(--mline); }

/* player box scores — Top performers on the Stats tab */
#fdRich .ps-card { padding: 4px 0 10px; }
#fdRich .ps-gh { padding: 13px 20px 7px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; display: flex; align-items: center; justify-content: space-between; }
#fdRich .ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 0 20px; }
#fdRich .ps-player { display: flex; gap: 9px; align-items: center; padding: 6px 0; }
#fdRich .ps-name { font-size: 13px; font-weight: 700; }
#fdRich .ps-line { font-size: 11.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }

#fdRich .linescore .lst { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
#fdRich .linescore tr.h .lst span { color: var(--accent, #4aa1d9); }
#fdRich .linescore tr.a .lst span { color: #66b32e; }
#fdRich .linescore tr.h td { color: var(--accent, #4aa1d9); }
#fdRich .linescore tr.a td { color: #66b32e; }
#fdRich .linescore td { height: 52px; vertical-align: middle; }
#fdRich .linescore td { padding-top: 0; padding-bottom: 0; }

/* pitch player rating badge (mock parity) */
#fdRich .pp .rt { position: absolute; top: -7px; right: -14px; font-size: 8px; font-weight: 800;
  padding: 0 3px; border-radius: 4px; background: #1b2130; color: #e4e4e7; }
#fdRich .pp .rt.hi { background: #10b981; color: #04110b; }
#fdRich .pp .rt.mid { background: #f4d03f; color: #201b04; }
#fdRich .pp .rt.lo { background: #ff3b5c; color: #fff; }
#fdRich .ps-card { margin-top: 14px; }
#fdRich .stats-legend .l1, #fdRich .stats-legend .l2 { display: inline-flex; align-items: center; gap: 8px; }
#fdRich .ev .sub-t.play, #fdRich .tl2-ev .sub-t.play { color: #fff; }
#fdRich .ps-side.h .ps-name { color: var(--accent, #4aa1d9); }
#fdRich .ps-side.a .ps-name { color: #66b32e; }
#fdRich .ps-side.a { text-align: right; }
#fdRich .ps-side.a .ps-player { justify-content: flex-end; }
#fdRich .ev .sub-t .wn, #fdRich .tl2-ev .sub-t .wn { color: #fff; }
#fdRich .ev .who .mut, #fdRich .tl2-ev .who .mut { color: #94a3b8; font-weight: 600; }

/* center timeline — By minute view (owner 2026-08-13) */
#fdRich .tl2 { position: relative; padding: 6px 0; }
#fdRich .tl2::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--mline); transform: translateX(-50%); }
#fdRich .tl2-row { display: grid; grid-template-columns: 1fr 78px 1fr; align-items: center; margin: 9px 0; position: relative; }
#fdRich .tl2-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 1; }
#fdRich .tl2-node { font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 800;
  border-radius: 8px; padding: 4px 9px; color: #0b0e14; min-width: 44px; text-align: center; }
#fdRich .tl2-row.h .tl2-node { background: var(--accent, #4aa1d9); }
#fdRich .tl2-row.a .tl2-node { background: #66b32e; }
#fdRich .tl2-ev { display: inline-flex; gap: 10px; align-items: center; background: var(--card-bg, #11151f);
  border: 1px solid var(--mline); border-radius: 12px; padding: 9px 13px; max-width: 100%; }
#fdRich .tl2-ev img { width: 20px; height: 20px; }
#fdRich .tl2-side { min-width: 0; }
#fdRich .tl2-side.l { display: flex; justify-content: flex-end; }
#fdRich .tl2-side.l .tl2-ev { flex-direction: row-reverse; text-align: right; }
#fdRich .tl2-side.l .sub-lines { text-align: right; }
#fdRich .tl2-side.r { display: flex; justify-content: flex-start; }
#fdRich .tl2-ev .who { font-size: 13px; }
#fdRich .ev .who.goal-score, #fdRich .tl2-ev .who.goal-score { font-size: 17px; }
#fdRich .tl2-ev .sub-t { font-size: 11.5px; }
#fdRich .tl2-row.teams { margin: 0 0 14px; }
#fdRich .tl2-team { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; }
#fdRich .tl2-team.h { color: var(--accent, #4aa1d9); flex-direction: row-reverse; text-align: right; }
#fdRich .tl2-team.a { color: #66b32e; }
@media (max-width: 640px) { #fdRich .tl2-team { font-size: 12.5px; gap: 7px; } #fdRich .tl2-team img { width: 22px; height: 22px; } }
#fdRich .tl2-period { position: relative; text-align: center; margin: 16px 0; z-index: 1; }
#fdRich .tl2-period span { background: var(--mchip, #1b2130); color: #94a3b8; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
@media (max-width: 620px) {
  #fdRich .tl2-row { grid-template-columns: 1fr 58px 1fr; }
  #fdRich .tl2-ev { padding: 7px 9px; }
  #fdRich .tl2-ev .who { font-size: 12px; }
}
#fdRich .subs h3 { display: flex; align-items: center; }
#fdRich .subs h3.away { justify-content: flex-end; }
@media (max-width: 560px) { #fdRich .pp .rt { font-size: 7px; padding: 0 2px; right: -8px; } }

/* half chips on the Stats tab */
#fdRich .st-halves { display: flex; gap: 8px; padding: 12px 20px 2px; }
#fdRich .st-half { appearance: none; cursor: pointer; border: 1px solid var(--mline);
  background: transparent; color: #94a3b8; border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
#fdRich .st-half[aria-selected="true"] { background: rgba(74,161,217,.14); color: var(--accent, #4aa1d9); border-color: rgba(74,161,217,.5); }
/* player content rendered INSIDE the stats card via the Players chip — neutralize nested card chrome */
#fdStBars .card { background: transparent; border: 0; border-radius: 0; }
#fdRich .coach-names { display: flex; justify-content: space-between; padding: 8px 20px 16px; }
#fdRich .coach-names .h, #fdRich .coach-names .a { font-size: 15px; font-weight: 700; }
#fdRich .coach-names .h { color: var(--accent, #4aa1d9); }
#fdRich .coach-names .a { text-align: right; color: #66b32e; }
#fdRich .rtc { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 5px;
  background: #1b2130; color: #e4e4e7; margin-left: auto; flex: none; }
#fdRich .rtc.hi { background: #10b981; color: #04110b; }
#fdRich .rtc.mid { background: #f4d03f; color: #201b04; }
#fdRich .rtc.lo { background: #ff3b5c; color: #fff; }
#fdRich .subs .sr .rtc ~ .pos { margin-left: 8px; }
#fdRich .subs.h .nm { color: var(--accent, #4aa1d9); }
#fdRich .subs.a .nm { color: #66b32e; }
#fdRich .lu-views { padding: 0 0 0 2px; }
#fdRich .subs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 4px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
#fdRich .subs-grid.split > .subs:first-child { border-right: 1px solid var(--mline); padding-right: 16px; }
#fdRich .subs-grid.split > .subs:last-child { padding-left: 16px; }
#fdRich .subs-grid.split { gap: 0; }

/* F1 session results table */
#fdRich .res-card { padding: 4px 0 8px; overflow-x: auto; }
#fdRich .res-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#fdRich .res-table td { padding: 8px 10px; font-size: 13px; }
#fdRich .res-table thead td { color: #94a3b8; font-size: 11px; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; }
#fdRich .res-table tbody tr { border-top: 1px solid var(--mline); }
#fdRich .res-table .pos { font-weight: 800; width: 34px; text-align: center; }
#fdRich .res-table tbody tr:nth-child(1) .pos { color: #f4d03f; }
#fdRich .res-table tbody tr:nth-child(2) .pos { color: #cbd5e1; }
#fdRich .res-table tbody tr:nth-child(3) .pos { color: #c9793f; }
#fdRich .res-table .drv { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
#fdRich .res-table .drv img { border-radius: 50%; object-fit: cover; }
#fdRich .res-table .drv i { font-style: normal; color: #94a3b8; font-size: 11px; }
#fdRich .res-table .tm { color: #94a3b8; } #fdRich .res-table .tm img { vertical-align: middle; margin-right: 7px; }
#fdRich .res-table .t { text-align: right; color: #e4e4e7; }

/* MMA fight card */
#fdRich .fc-row { padding: 11px 18px; border-top: 1px solid var(--mline); }
#fdRich .fc-row:first-child { border-top: 0; }
#fdRich .fc-row.main { background: rgba(74,161,217,.05); }
#fdRich .fc-cat { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
#fdRich .fc-cat b { color: #f4d03f; font-size: 9.5px; letter-spacing: .12em; }
#fdRich .fc-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
#fdRich .fc-vs em { font-style: normal; color: #5b6675; font-size: 11px; font-weight: 700; }
#fdRich .fc-f { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #94a3b8; min-width: 0; }
#fdRich .fc-f.r { justify-content: flex-end; }
#fdRich .fc-f img { border-radius: 50%; object-fit: cover; }
#fdRich .fc-f.w { color: #fff; }
#fdRich .fc-f.w i { font-style: normal; color: #66b32e; font-weight: 800; }
#fdRich .pp .dotwrap { position: relative; display: inline-block; }
#fdRich .pp .rt { top: -7px; right: -10px; z-index: 2; }


/* ===== full-width icon button rows (owner 2026-08-13): every tab/chip row spans the
   line, buttons share it equally, rounded-RECTANGLE shape ===== */
#fdRich .fd-mtabs { display: flex; gap: 8px; }
#fdRich .fd-mtab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; border-radius: 11px; }
#fdRich .ev-views { display: flex; gap: 8px; }
#fdRich .ev-view { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 10px; }
#fdRich .st-halves { display: flex; gap: 8px; }
#fdRich .st-half { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 10px; }
#fdRich .subs-head.sec .lu-secs { flex: 1; display: inline-flex; gap: 8px; margin: 0 14px; }
#fdRich .lu-sec { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border-radius: 10px; }
#fdRich .fd-mtab img, #fdRich .ev-view img, #fdRich .st-half img, #fdRich .lu-sec img {
  width: 15px; height: 15px; opacity: .75;
  /* ui/ icons are fill="currentColor" → black inside <img>; force white */
  filter: brightness(0) invert(1); }
#fdRich .fd-mtab[aria-selected="true"] img, #fdRich .ev-view[aria-selected="true"] img,
#fdRich .st-half[aria-selected="true"] img, #fdRich .lu-sec[aria-selected="true"] img { opacity: 1; }
@media (max-width: 640px) {
  #fdRich .fd-mtab, #fdRich .ev-view, #fdRich .st-half, #fdRich .lu-sec { gap: 5px; }
  #fdRich .fd-mtab img, #fdRich .ev-view img, #fdRich .st-half img, #fdRich .lu-sec img { width: 13px; height: 13px; }
}

/* formation chips live on the field (owner 2026-08-13) */
#fdRich .pitch .pitch-form { position: absolute; top: 10px; z-index: 2;
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700;
  background: rgba(8,14,10,.6); padding: 3px 10px; border-radius: 8px; }
#fdRich .pitch .pitch-form.h { left: 12px; color: var(--accent, #4aa1d9); }
#fdRich .pitch .pitch-form.a { right: 12px; color: #66b32e; }

/* coach chips in the field's bottom corners (owner 2026-08-13) */
#fdRich .pitch .pitch-coach { position: absolute; bottom: 10px; z-index: 2;
  font-size: 11.5px; font-weight: 700; background: rgba(8,14,10,.6);
  padding: 3px 10px; border-radius: 8px; }
#fdRich .pitch .pitch-coach.h { left: 12px; color: var(--accent, #4aa1d9); }
#fdRich .pitch .pitch-coach.a { right: 12px; color: #66b32e; }

/* roster rows: number + position as square chips with rounded corners (owner 2026-08-13) */
#fdRich .subs .sr .num { width: 26px; min-width: 26px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--mchip, #1b2130);
  border-radius: 6px; font-size: 11px; color: #cbd5e1; text-align: center; }
#fdRich .subs .sr .pos { min-width: 26px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--mchip, #1b2130); border-radius: 6px;
  font-size: 10.5px; font-weight: 700; color: #cbd5e1; margin-left: auto; padding: 0 4px; }

/* number chips carry the team accent (owner 2026-08-13): bg accent, white text */
#fdRich .subs.h .sr .num { background: var(--accent, #4aa1d9); color: #fff; }
#fdRich .subs.a .sr .num { background: #66b32e; color: #fff; }

/* icons/colors guide button + popup (owner 2026-08-13) */
#fdRich .fd-legend-btn { margin-top: 12px; width: 100%; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; border-radius: 11px; border: 1px solid var(--mline);
  background: transparent; color: #94a3b8; padding: 11px; font-weight: 700; font-size: 13px; cursor: pointer; }
#fdRich .fd-legend-btn:hover { color: #fff; border-color: rgba(74,161,217,.4); }
#fdRich .fd-legend-btn img { width: 15px; height: 15px; filter: brightness(0) invert(1); opacity: .75; }
.fd-modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.fd-modal-card { background: var(--card-bg, #11151f); border: 1px solid var(--mline);
  border-radius: 16px; max-width: 460px; width: 100%; max-height: 82vh; overflow-y: auto; }
.fd-modal .lg-head { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--mline); font-weight: 800; font-size: 14px;
  color: #fff; position: sticky; top: 0; background: var(--card-bg, #11151f); }
.fd-modal .lg-close { background: none; border: 0; cursor: pointer; padding: 4px; line-height: 0; }
.fd-modal .lg-close img { filter: brightness(0) invert(1); opacity: .8; }
.fd-modal .lg-sec { padding: 14px 18px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.fd-modal .lg-row { display: flex; gap: 12px; align-items: center; padding: 8px 18px;
  font-size: 13px; color: #e4e4e7; }
.fd-modal .lg-row img { width: 20px; height: 20px; flex: none; }
.fd-modal .lg-sw { width: 18px; height: 18px; border-radius: 6px; flex: none; }
.fd-modal .lg-pos { width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--mchip, #1b2130); border-radius: 6px;
  font-size: 11px; font-weight: 700; font-style: normal; color: #cbd5e1; flex: none; }
.fd-modal .lg-row .rtc { flex: none; font-size: 10px; font-weight: 800; padding: 2px 6px;
  border-radius: 5px; background: #10b981; color: #04110b; }
.fd-modal .lg-form { flex: none; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  background: var(--mchip, #1b2130); padding: 3px 8px; border-radius: 6px; color: #cbd5e1; }
/* C chip on the field coach names */
#fdRich .pitch .pitch-coach { display: inline-flex; align-items: center; gap: 7px; }
#fdRich .pitch .pitch-coach i { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 5px; background: rgba(255,255,255,.16); color: #fff;
  font-style: normal; font-size: 9.5px; font-weight: 800; }

/* roster sub tabs sit OUTSIDE the card (owner): normalize spacing */
#fdRich .lu-stack .ev-views { margin: 0; }
#fdRich .lu-stack .card > .subs-grid.split { padding-top: 4px; }
#fdRich .subs-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 14px 20px 4px; }
#fdRich .subs-teams > span { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; min-width: 0; }
#fdRich .subs-teams .h { color: var(--accent, #4aa1d9); }
#fdRich .subs-teams .a { color: #66b32e; justify-content: flex-end; text-align: right; }
@media (max-width: 640px) { #fdRich .subs-teams { gap: 0 14px; padding: 12px 12px 2px; } }

/* player photos + match-stats modal (owner 2026-08-13) */
#fdRich .pp-face, .fd-modal .pp-face { width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; background: #1b2130; flex: none; }
#fdRich .subs .sr.has-pl { cursor: pointer; }
#fdRich .subs .sr.has-pl:hover .nm { text-decoration: underline; }
#fdRich .ps-player { display: flex; align-items: center; gap: 10px; }
.fd-modal .plm-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid var(--mline); }
.fd-modal .plm-top > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: #1b2130; flex: none; }
.fd-modal .plm-club img { width: 18px; height: 18px; border-radius: 0; background: none; }
.fd-modal .plm-top .plm-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fd-modal .plm-top .plm-meta b { font-size: 15px; }
.fd-modal .plm-top.h .plm-meta b { color: var(--accent, #4aa1d9); }
.fd-modal .plm-top.a .plm-meta b { color: #66b32e; }
.fd-modal .plm-top .plm-meta span { font-size: 12px; color: #94a3b8; }
.fd-modal .rtc { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  background: #1b2130; color: #e4e4e7; }
.fd-modal .rtc.hi { background: #10b981; color: #04110b; }
.fd-modal .rtc.mid { background: #f4d03f; color: #201b04; }
.fd-modal .rtc.lo { background: #ff3b5c; color: #fff; }
.fd-modal .plm-top .rtc { margin-left: auto; }
.fd-modal .plm-row { justify-content: space-between; }
.fd-modal .plm-row b { color: #fff; font-weight: 700; }
.fd-modal .plm-row:last-child { padding-bottom: 16px; }

/* photo dots on the field (owner 2026-08-13): team-color ring, number chip bottom-left */
#fdRich .pp .dot-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: #1b2130; border: 2px solid var(--accent, #4aa1d9); display: block;
  box-shadow: 0 3px 10px rgba(0,0,0,.5); }
#fdRich .pp .dot-num { position: absolute; right: -12px; top: -6px; z-index: 2;
  min-width: 17px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 5px; font-family: ui-monospace, monospace;
  font-size: 9.5px; font-weight: 800; color: #fff; }
#fdRich .pp.has-pl { cursor: pointer; }
@media (max-width: 900px) { #fdRich .pp .dot-img { width: 30px; height: 30px; } }
@media (max-width: 560px) { #fdRich .pp .dot-img { width: 26px; height: 26px; }
  #fdRich .pp .dot-num { min-width: 15px; height: 14px; font-size: 8.5px; right: -10px; top: -5px; } }

/* scorer faces in goal rows (owner 2026-08-13, reference-app style) */
#fdRich .ev-face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: #1b2130; flex: none; }
#fdRich .tl2-ev .ev-face { width: 34px; height: 34px; }
/* faces + icons hug the TIMELINE side (owner): left cards inner-right, right cards inner-left */
#fdRich .tl2-side.l .sub-t.scorer img, #fdRich .tl2-side.l .sub-t.assist img { order: 99; }
#fdRich .tl2-side.r .sub-t.scorer img, #fdRich .tl2-side.r .sub-t.assist img { order: -1; }
#fdRich .sub-t.scorer img { width: 15px; height: 15px; vertical-align: -3px; }
#fdRich .sub-t.assist img { width: 14px; height: 14px; vertical-align: -3px; }

/* scorer/assist lines are flex rows so the icons sit beside the names, never wrap under */
#fdRich .sub-t.scorer, #fdRich .sub-t.assist { display: flex; align-items: center; gap: 6px; }
#fdRich .tl2-side.l .sub-t.scorer, #fdRich .tl2-side.l .sub-t.assist { justify-content: flex-end; }

/* goal card 3-row spec (owner): [media 30px col][text], mirrored on the left timeline side */
#fdRich .g-row { display: flex; align-items: center; gap: 9px; margin-top: 3px; }
#fdRich .g-row:first-child { margin-top: 0; }
#fdRich .g-ic { width: 30px; display: inline-flex; justify-content: center; flex: none; }
#fdRich .g-ic .ev-face { width: 28px; height: 28px; }
#fdRich .g-row .wn { font-size: 13px; font-weight: 700; }
#fdRich .tl2-side.l .g-row { flex-direction: row-reverse; }

/* player modal v2: club line + explicit meta chips */
.fd-modal .plm-club { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  color: #94a3b8; font-weight: 600; }
.fd-modal .plm-num { display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700; }
.fd-modal .plm-num.h { background: var(--accent, #4aa1d9); }
.fd-modal .plm-num.a { background: #66b32e; }
.fd-modal .plm-posv { display: inline-flex; align-items: center; gap: 8px; }

/* modal stat pair bars */
.fd-modal .plm-bar { height: 5px; margin: -2px 18px 10px; border-radius: 999px;
  background: #1b2130; overflow: hidden; }
.fd-modal .plm-bar i { display: block; height: 100%; border-radius: 999px; }
.fd-modal .plm-bar i.h { background: var(--accent, #4aa1d9); }
.fd-modal .plm-bar i.a { background: #66b32e; }

/* player modal: single name (no lg-head), X floats top-right */
.fd-modal .plm-card { position: relative; }
.fd-modal .plm-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.fd-modal .plm-card .plm-top { border-bottom: 1px solid var(--mline); padding-right: 52px; }

/* player modal header = team badge + team name (owner) */
.fd-modal .plm-club.top { font-size: 13.5px; font-weight: 700; }
.fd-modal .plm-club.top.h { color: var(--accent, #4aa1d9); }
.fd-modal .plm-club.top.a { color: #66b32e; }
.fd-modal .plm-club.top img { width: 20px; height: 20px; }

/* modal v4: rating chip on the photo (field style), big accent shirt number at right */
.fd-modal .plm-ph { position: relative; flex: none; }
.fd-modal .plm-ph > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: #1b2130; display: block; }
.fd-modal .plm-ph .rtc { position: absolute; top: -9px; right: -17px; margin: 0;
  font-size: 11px; padding: 2px 6px; }
.fd-modal .plm-num-big { margin-left: auto; display: inline-flex; align-items: center;
  justify-content: center; min-width: 42px; height: 36px; padding: 0 11px; border-radius: 9px;
  font-size: 18px; font-weight: 800; font-style: normal; color: #fff; flex: none; }
.fd-modal .plm-num-big.h { background: var(--accent, #4aa1d9); }
.fd-modal .plm-num-big.a { background: #66b32e; }

/* position chip + word under the player name */
.fd-modal .plm-meta .plm-posv { font-size: 12.5px; font-weight: 600; color: #94a3b8; }

/* event-card players link to the player popup */
#fdRich [data-plm] { cursor: pointer; }
#fdRich span[data-plm]:hover { text-decoration: underline; }

/* mobile: the field grows TALLER so names/chips never overlap (owner: real proportions
   don't matter) */
@media (max-width: 900px) { .pitch { aspect-ratio: 16/14; } }
@media (max-width: 640px) { .pitch { aspect-ratio: 4/5; } .pitch-in { inset: 12px 12px; } }

/* popup head swap (owner): shirt number chip on the photo, rating in the big right slot */
.fd-modal .plm-ph .dot-num { position: absolute; top: -6px; right: -10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  height: 19px; padding: 0 5px; border-radius: 6px; color: #fff; font-size: 11px;
  font-weight: 800; border: 2px solid #12121e; }
.fd-modal .plm-num-big.rt-big { font-size: 17px; }
.fd-modal .plm-num-big.rt-big.hi { background: #10b981; color: #04110b; }
.fd-modal .plm-num-big.rt-big.mid { background: #f4d03f; color: #201b04; }
.fd-modal .plm-num-big.rt-big.lo { background: #ff3b5c; color: #fff; }

/* lineup names link to player pages */
.fd-xi .fd-plink{color:inherit;text-decoration:none}
.fd-xi .fd-plink:hover{color:var(--accent);text-decoration:underline}

/* american football: running score after a scoring play */
.fd-ev-score{margin-left:auto;background:var(--bg-glass);border:1px solid var(--border, var(--bv-line-solid));border-radius:6px;padding:1px 8px;font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums;align-self:center}

/* player modal -> athlete profile link */
.plm-profile{display:block;text-align:center;margin-top:10px;padding:9px;border-radius:10px;background:var(--bg-glass);border:1px solid var(--border, var(--bv-line-solid));color:var(--accent);font-weight:700;font-size:.85rem;text-decoration:none}
.plm-profile:hover{background:var(--bg-hover, rgba(255,255,255,.06))}

/* Motorsport classification: two-line card per driver (2026-09-21) */
#fdRich .mr-list { padding: 4px 0; }
#fdRich .mr-row { padding: 10px 12px; border-top: 1px solid var(--mline); }
#fdRich .mr-row:first-child { border-top: 0; }
#fdRich .mr-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
#fdRich .mr-l1 .pos { flex: none; width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: #e4e4e7; }
#fdRich .mr-row:nth-child(1) .pos { color: #f4d03f; }
#fdRich .mr-row:nth-child(2) .pos { color: #cbd5e1; }
#fdRich .mr-row:nth-child(3) .pos { color: #c9793f; }
#fdRich .mr-l1 img.ph { border-radius: 50%; object-fit: cover; flex: none; }
#fdRich .mr-l1 .drv { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#fdRich .mr-l1 .num { font-style: normal; color: #94a3b8; font-size: 11px; flex: none; }
#fdRich .mr-l1 .t { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: #e4e4e7; font-size: 13px; }
#fdRich .mr-l2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 34px; font-size: 12px; color: #94a3b8; min-width: 0; }
#fdRich .mr-l2 .tm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#fdRich .mr-l2 .tm img { object-fit: contain; flex: none; height: 16px; width: auto; max-width: 44px; }
#fdRich .mr-chips { margin-left: auto; display: inline-flex; gap: 10px; flex: none; font-variant-numeric: tabular-nums; }
#fdRich .mr-chip i { font-style: normal; text-transform: uppercase; font-size: 10px; letter-spacing: .06em; margin-right: 4px; color: #64748b; }
#fdRich .mr-l2 .tm > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#fdRich .tl-slot { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 16px; flex: none; margin-right: 2px; }
#fdRich .tl-slot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media(max-width:480px){#fdRich .mr-l2 .tm .tl-slot{width:30px}#fdRich .mr-chips{gap:7px}#fdRich .mr-l2{padding-left:30px}}
#fdRich .ph-slot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; }
#fdRich .tl-slot.on-light { background: #fff; border-radius: 4px; padding: 1px 3px; box-sizing: border-box; }
#fdRich .mr-l1 .tl-slot { margin-right: 2px; }
#fdRich .mr-l2 { padding-left: 122px; }
@media(max-width:480px){ #fdRich .mr-l1 .tl-slot { width: 30px; } #fdRich .mr-l2 { padding-left: 106px; } }
#fdRich .mr-l2 { padding-left: 34px; gap: 8px; }
#fdRich .mr-l2 .tl-slot { width: 28px; height: 16px; margin-right: 0; }
@media(max-width:480px){ #fdRich .mr-l2 { padding-left: 34px; } #fdRich .mr-l2 .tl-slot { width: 28px; } }
#fdRich .mr-l2 .tl-slot { width: 28px; height: 28px; margin-right: 0; }
#fdRich .mr-l2 .tl-slot img { max-width: 26px; max-height: 26px; }
#fdRich .tl-slot.on-light { padding: 2px; border-radius: 5px; }
#fdRich .mr-l2 { align-items: center; margin-top: 4px; }
@media(max-width:480px){ #fdRich .mr-l2 .tl-slot { width: 28px; height: 28px; } }
#fdRich .tl-slot.on-light { background: none; padding: 0; border-radius: 0; }
#fdRich a.ph-link, #fdRich a.tl-link { display: inline-flex; line-height: 0; text-decoration: none; flex: none; }
#fdRich a.drv-link, #fdRich a.tm-link { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#fdRich a.drv-link:hover .drv, #fdRich a.tm-link:hover { color: #4aa1d9; }

/* Driver number as a bubble on the photo, like the lineup dots (owner 2026-09-21: "same we did for players"). */
.drv-ph{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center}
.drv-num{position:absolute;right:-7px;top:-5px;z-index:2;min-width:20px;height:19px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:var(--brand-blue,#4aa1d9);color:#fff;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.45);white-space:nowrap}
.drv-num.md{min-width:26px;height:23px;font-size:13px;border-radius:8px;right:-6px;top:-2px}
.drv-num.lg{min-width:38px;height:32px;font-size:18px;border-radius:11px;right:-2px;top:4px;padding:0 8px}
/* Classification rows: bigger driver photo (owner 2026-09-21: "make the drivers badges bigger"), the number rides the photo. */
#fdRich .ph-slot{width:44px;height:44px;position:relative}
#fdRich .mr-l1 img.ph{width:44px;height:44px}
#fdRich .mr-l1 .num{display:none}
#fdRich .mr-l2 .tl-slot{width:44px;height:28px}
#fdRich .mr-l2 .tl-slot img{max-width:40px;max-height:26px}
@media(max-width:480px){ #fdRich .mr-l2 .tl-slot { width: 44px; height: 28px; } }

/* Location Details on the event page (owner 2026-09-22). The card IS the Event
   Details card: same .fd-info-card, same .fd-league-header for the venue's logo,
   name and short description, same .fd-info-row list. Only the map is new, and it
   carries no Maps and no Uber button: those belong to the venue page. */
.ed-loc-head .ed-loc-logo{width:56px;height:56px;object-fit:contain;border-radius:0;background:none}
.ed-loc-logo-link{display:inline-flex;flex:none;line-height:0}
.ed-loc-logo-link:hover{opacity:.85}
.ed-loc-name{color:inherit;text-decoration:none}
.ed-loc-name:hover{color:var(--accent,#4aa1d9)}
.ed-loc-desc{margin-top:2px}
.ed-loc-map{margin-top:14px;height:260px;border-radius:12px;overflow:hidden;background:var(--bg-glass,rgba(255,255,255,.04))}
@media (max-width:720px){.ed-loc-map{height:200px}.ed-loc-head .ed-loc-logo{width:46px;height:46px}}
.ed-loc-screens{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ed-loc-num{font-weight:800;font-variant-numeric:tabular-nums}
.bookvelt-pill.ed-loc-tv{color:#fff;font-size:.62rem;padding:2px 7px}
.bookvelt-pill.ed-loc-tv strong{color:#fff}
.ed-loc-kitchen{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ed-loc-yes{color:#22c55e;display:inline-flex}
.ed-loc-no{color:var(--text-muted,#64748b);display:inline-flex}
.ed-loc-food{color:var(--text-secondary,#94a3b8)}

/* Request Event block (owner 2026-09-23): WhatsApp Request Event on top in a
   request city, then the city and Near me side by side. */
.fd-req { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
.fd-req-label { margin-top: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.fd-req-row { display: flex; gap: 10px; }
.fd-req-row .fd-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-req .fd-btn { justify-content: center; }
.fd-no-bars .fd-req .fd-btn { align-self: auto; }
.fd-btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid var(--bv-line); color: var(--text); }
.fd-btn-ghost:hover { background: rgba(255,255,255,0.11); }
.fd-btn-wa { background: linear-gradient(135deg, #25d366, #1ebe5a); color: #04210f; box-shadow: 0 0 20px rgba(37,211,102,0.22); }
.fd-btn-wa:hover { box-shadow: 0 0 30px rgba(37,211,102,0.35); transform: translateY(-1px); }

/* Compact no-bars box when it carries the request buttons (owner 2026-09-23: too big). */
.fd-no-bars:has(.fd-req) { padding: 18px 16px; }
.fd-no-bars:has(.fd-req) .fd-no-bars-icon { display: none; }
.fd-no-bars:has(.fd-req) h3 { font-size: 1rem; margin-bottom: 12px; }
.fd-req { gap: 8px; max-width: 380px; }
.fd-req .fd-btn { padding: 8px 14px; }
.fd-req-label { margin-top: 4px; font-size: 0.72rem; }

/* Watch This Game box, city row (owner 2026-09-23 evening): the Locations
   page's own .loc-tabs row, sized for the box. */
.fd-req .fd-req-tabs { margin: 0; width: 100%; }
.fd-req .fd-req-tabs .loc-tab { flex: 1 1 50%; min-width: 0; padding: 11px 10px; font-size: 0.88rem; }
.fd-req .fd-req-tabs .loc-tab-search .loc-searchbar-input { text-overflow: ellipsis; }
.fd-req .fd-req-tabs #fdReqNear.active { background: rgba(102,179,46,0.20); border-color: rgba(102,179,46,0.65); }
.fd-req .fd-req-tabs #fdReqNear.active i { color: #66b32e; }
.fd-req .loc-searchbar-clear[hidden] { display: none; }
.fd-req-suggest { display: flex; flex-direction: column; background: var(--bg-card, #12121e); border: 1px solid var(--border-glass, var(--bv-line)); border-radius: 12px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.fd-req-suggest[hidden] { display: none; }
.fd-req-suggest-item { display: flex; align-items: baseline; gap: 8px; padding: 9px 10px; background: none; border: none; border-radius: 8px; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.fd-req-suggest-item:hover { background: rgba(255,255,255,0.07); }
.fd-req-suggest-item small { color: var(--text-muted); font-size: 0.78rem; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* City availability line + the city map (owner 2026-09-25, fixture.js renderBarsSection) */
.fd-city-avail { margin: 10px 0 0; font-size: 0.86rem; color: var(--text-muted); text-align: center; }
.fd-no-bars h3 .fd-city-link { font-size: inherit; font-weight: inherit; }
.fd-city-link { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-blue, #4aa1d9); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fd-city-link:hover { color: #fff; }
.fd-city-map-wrap { margin-top: 16px; text-align: left; }
.fd-city-map-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.fd-city-map { width: 100%; height: 340px; border-radius: 12px; overflow: hidden; background: #12121e; }
@media (max-width: 600px) { .fd-city-map { height: 280px; } }
.fd-pin-card { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; background: var(--bg-glass, rgba(255,255,255,0.04)); border: 1px solid var(--border-glass, var(--bv-line)); border-radius: 12px; }
.fd-pin-card[hidden] { display: none; }
.fd-pin-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.fd-pin-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-pin-txt b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-pin-txt small { font-size: 0.78rem; color: var(--text-muted); }
.fd-pin-go { flex-shrink: 0; padding: 8px 12px; }
.fd-pin-close { flex-shrink: 0; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 6px; }

.fd-city-avail-last { margin-top: 16px; font-size: 0.95rem; color: var(--text); }

/* ============================================================
   Demand row: Interested | Wish List | Notify me (owner 2026-09-27)
   Under the fixture card and under the team hero. Grey until used, then
   green (thumbs), red (heart), blue (bell). public/js/demand.js.
   Proper buttons (owner, second round): the site's condensed uppercase
   button type, an icon disc on the left, the count as a pill, and the ON
   state a solid colour fill with a glow.
   ============================================================ */
.dm { margin: -18px 0 28px; }
.dm-row { display: flex; gap: 12px; }
.dm-btn {
  --c: #94a3b8;
  --c-rgb: 148, 163, 184;
  flex: 1 1 0; min-width: 0;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), var(--bg-card, #161622);
  border: 1px solid var(--bv-line);
  border-radius: 10px;
  color: var(--text-secondary, #94a3b8);
  font-family: var(--font-condensed, 'Roboto Condensed'), 'Roboto', system-ui, sans-serif;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  cursor: pointer; white-space: nowrap; overflow: hidden; user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.dm-btn:hover { color: #fff; border-color: rgba(var(--c-rgb), 0.55); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); }
.dm-btn:hover .dm-ico { background: rgba(var(--c-rgb), 0.22); color: var(--c); }
.dm-btn:active { transform: translateY(0) scale(.98); }
.dm-btn:focus-visible { outline: 2px solid rgba(var(--c-rgb), 0.7); outline-offset: 2px; }
.dm-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary, #94a3b8);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.dm-ico i { font-size: 15px; line-height: 1; }
.dm-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 8px;
  border-radius: 11px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.dm-btn.skeleton { border: 0; box-shadow: none; }
.dm-btn.closed { cursor: default; opacity: .6; }
.dm-btn.closed:hover { transform: none; border-color: var(--bv-line); color: var(--text-secondary, #94a3b8); }
.dm-vote { --c: #4aa1d9; --c-rgb: 74, 161, 217; justify-content: flex-start; }  /* the account's heart: BRAND BLUE when voted (owner 2026-09-28, "red is too much colour"; red is LIVE on this site); content left (owner 2026-09-27) */
.dm-vote.dm-like { --c: #66b32e; --c-rgb: 102, 179, 46; }  /* a visitor's thumbs-up, green */
.dm-wish { --c: #4aa1d9; --c-rgb: 74, 161, 217; }
.dm-bell { --c: #4aa1d9; --c-rgb: 74, 161, 217; }
.dm-share { --c: #4aa1d9; --c-rgb: 74, 161, 217; }
.dm-cal { --c: #4aa1d9; --c-rgb: 74, 161, 217; }
.dm-btn.on {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)), var(--c);
  border-color: rgba(var(--c-rgb), 0.9);
  box-shadow: 0 6px 18px rgba(var(--c-rgb), 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.dm-btn.on:hover { color: #fff; border-color: rgba(var(--c-rgb), 1); box-shadow: 0 8px 22px rgba(var(--c-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
.dm-btn.on .dm-ico, .dm-btn.on:hover .dm-ico { background: var(--bv-line); color: #fff; }
.dm-btn.on .dm-n { background: rgba(0,0,0,0.25); color: #fff; }
.dm-btn.on .dm-ico { animation: dmPop 260ms ease; }
@keyframes dmPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dm-count { margin-top: 10px; font-size: 0.84rem; color: var(--text-muted, #64748b); text-align: center; }
.dm-closed { opacity: .8; }
.dm-closed::before { content: '·'; margin: 0 6px; }
@media (max-width: 600px) {
  /* The Interested button carries the city, so on a phone it takes the width and the other two keep their icon only (owner 2026-09-27). */
  .dm { margin: -12px 0 22px; }
  /* Smaller (owner 2026-09-28, "less padding inside the buttons"): 44 high, the icon
     squares 44 wide like the top bar buttons, so VOTE keeps its whole label beside
     NOTIFY and SHARE down to a 375px phone. */
  /* The row sizes itself to the vote label (owner 2026-09-29): demand.js fit() sets --sq (36 to
     44, the squares' side and the row's height) and --lbl-scale (1, down to 0.75 as a last
     resort). The vote label is never cut. */
  .dm-row { --sq: 44px; --lbl-scale: 1; gap: 6px; }
  .dm-btn { height: var(--sq); padding: 0 10px; font-size: calc(0.8rem * var(--lbl-scale)); gap: 8px; letter-spacing: 0.04em; }
  .dm-vote { flex: 1 1 auto; }
  .dm-wish, .dm-bell, .dm-cal, .dm-share { flex: 0 0 var(--sq); width: var(--sq); padding: 0; justify-content: center; }
  .dm-wish .dm-lbl, .dm-bell .dm-lbl, .dm-cal .dm-lbl, .dm-share .dm-lbl { display: none; }
  .dm-vote .dm-lbl, .dm-vote .dm-sub { overflow: visible; text-overflow: clip; }
  .dm-vote .dm-sub { font-size: calc(0.68rem * var(--lbl-scale)); }
  .dm-ico { width: 28px; height: 28px; }
  .dm-ico i { font-size: 13px; }
  .dm-n { min-width: 22px; height: 20px; font-size: 0.76rem; padding: 0 6px; }
}
.calendar-page .dm { margin: 14px 0 18px; }

/* The search box under the venue rows (owner 2026-09-27): same box as the empty state, no headline, tighter. */
.fd-req-under { margin-top: 16px; padding: 20px 16px 16px; }
.fd-req-under .fd-req { margin-top: 0; }
@media (max-width: 600px) { .fd-req-under { padding: 16px 12px 12px; } }

/* Watch This Game, one order for both states (owner 2026-09-27): small heading,
   label + city field + Near Me, rows or the none line, map, other cities. */
.fd-section-heading.fd-heading-sm { font-size: 1.05rem; margin-top: 8px; margin-bottom: 10px; }
.fd-watch { background: var(--bg-card); border: 1px solid var(--bv-line); border-radius: 16px; padding: 16px; }
.fd-watch .fd-req { margin-top: 0; }
.fd-watch .fd-req-label { margin-top: 0; }
.fd-watch .fd-venues-list { margin-top: 14px; }
.fd-none-line { margin: 16px 0 4px; text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.fd-watch .fd-city-map-wrap { margin-top: 14px; }
.fd-watch .fd-city-avail { margin-top: 12px; }
@media (max-width: 600px) { .fd-watch { padding: 12px; } }

/* Watch This Game, one order for both states (owner 2026-09-27): small heading,
   city field + Near Me, rows or the none line, map, other cities. No label. */
.fd-section-heading.fd-heading-sm { font-size: 1.05rem; margin-top: 8px; margin-bottom: 10px; }
.fd-watch { background: var(--bg-card); border: 1px solid var(--bv-line); border-radius: 16px; padding: 16px; }
.fd-watch .fd-req { margin-top: 0; }
.fd-watch .fd-req-label { display: none; }
.fd-watch .fd-venues-list { margin-top: 14px; }
.fd-none-line { margin: 16px 0 4px; text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.fd-watch .fd-city-map-wrap { margin-top: 14px; }
.fd-watch .fd-city-avail { margin-top: 12px; }
@media (max-width: 600px) { .fd-watch { padding: 12px; } }

/* Where to Watch, one order for both states (owner 2026-09-27): small heading,
   city field + Near Me, rows or the none line, map, other cities. No label. */
.fd-section-heading.fd-heading-sm { font-size: 1.05rem; margin-top: 8px; margin-bottom: 10px; }
.fd-watch { background: var(--bg-card); border: 1px solid var(--bv-line); border-radius: 16px; padding: 16px; }
.fd-watch .fd-req { margin-top: 0; }
.fd-watch .fd-req-label { display: none; }
.fd-watch .fd-venues-list { margin-top: 14px; }
.fd-none-line { margin: 16px 0 4px; text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.fd-watch .fd-city-map-wrap { margin-top: 14px; }
.fd-watch .fd-city-avail { margin-top: 12px; }
@media (max-width: 600px) { .fd-watch { padding: 12px; } }

/* The city row fills the box (owner 2026-09-27): the search field takes the
   width, Near Me is exactly as wide as its word in every language. */
.fd-watch .fd-req { max-width: none; }
.fd-watch .fd-req .fd-req-tabs .loc-tab-search { flex: 1 1 auto; min-width: 0; padding: 13px 12px; }
.fd-watch .fd-req .fd-req-tabs .loc-tab-search .loc-searchbar-input { font-size: 1.02rem; }
.fd-watch .fd-req .fd-req-tabs #fdReqNear { flex: 0 0 auto; width: auto; padding: 13px 16px; white-space: nowrap; }
.fd-watch .fd-req .fd-btn { align-self: stretch; }

/* No box around the row and the cards (owner 2026-09-27): only the map keeps a
   box, with its Pick a location for details label inside it. */
.fd-watch { background: none; border: 0; border-radius: 0; padding: 0; }
.fd-watch .fd-city-map-wrap { margin-top: 14px; background: var(--bg-card); border: 1px solid var(--bv-line); border-radius: 16px; padding: 14px; }
.fd-watch .fd-city-map-wrap .fd-city-map { border-radius: 10px; }
.fd-none-line { margin: 18px 0 6px; }
@media (max-width: 600px) { .fd-watch { padding: 0; } .fd-watch .fd-city-map-wrap { padding: 10px; } }

/* Interested: two lines inside the button (owner 2026-09-27). */
.dm-vote { padding-top: 0; padding-bottom: 0; }
.dm-txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; line-height: 1; gap: 1px; }  /* the two lines close together (owner 2026-09-29) */
.dm-txt .dm-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dm-sub { font-family: 'Roboto', system-ui, sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dm-btn.on .dm-sub { color: rgba(255,255,255,0.85); }
@media (max-width: 600px) {
  .dm-wish .dm-txt, .dm-bell .dm-txt, .dm-cal .dm-txt, .dm-share .dm-txt { display: none; }
}

/* No disc around the icons, bigger icons (owner 2026-09-27: the circle is space lost). */
.dm-ico, .dm-btn:hover .dm-ico, .dm-btn.on .dm-ico, .dm-btn.on:hover .dm-ico { width: auto; height: auto; background: none; border-radius: 0; }
.dm-ico { color: var(--text-secondary, #94a3b8); }
.dm-btn:hover .dm-ico { color: var(--c); }
.dm-btn.on .dm-ico, .dm-btn.on:hover .dm-ico { color: #fff; }
.dm-ico i { font-size: 22px; }
/* The icon buttons are SQUARES: 48 by 48 on desktop, 44 by 44 on a phone (24px icon box plus equal padding). */
.dm-wish, .dm-bell, .dm-cal, .dm-share { padding: 0 12px; }
@media (max-width: 600px) { .dm-wish, .dm-bell, .dm-cal, .dm-share { padding: 0; } }
/* The Share popup rows: a link each, the chevron at the right, Copied reads on the accent. */
.dm-share-row { text-decoration: none; color: inherit; }
.dm-share-row:hover { border-color: rgba(74,161,217,0.55); }
.dm-share-go { flex: 0 0 auto; color: var(--text-muted, #94a3b8); display: flex; align-items: center; }
.dm-share-row.on { border-color: #4aa1d9; background: rgba(74,161,217,0.14); }

/* The count as big as the icon (owner 2026-09-27). */
.dm-n { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 15px; font-size: 1.1rem; }
@media (max-width: 600px) { .dm-n { min-width: 30px; height: 28px; padding: 0 8px; font-size: 1rem; } }

.dm-ico i, .dm-ico svg { font-size: 24px !important; width: 24px; height: 24px; }
/* The icon is 45 percent of the square (20 at 44, 16 at 36). */
@media (max-width: 600px) { .dm-ico i, .dm-ico svg { font-size: calc(var(--sq, 44px) * 0.45) !important; width: calc(var(--sq, 44px) * 0.45); height: calc(var(--sq, 44px) * 0.45); } }

/* The pin card under the city map (owner 2026-09-27: not good): the full
   name on up to two lines, the distance or the area under it, one arrow
   button to the location, the X; a location showing the game gets its own
   venue row with BOOK instead. */
.fd-pin-card { align-items: center; gap: 12px; padding: 10px 10px 10px 12px; }
.fd-pin-logo { width: 46px; height: 46px; }
.fd-pin-txt { gap: 2px; }
.fd-pin-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.fd-pin-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-pin-go { width: 40px; height: 40px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.fd-pin-close { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.fd-pin-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.fd-pin-row { position: relative; display: block; padding: 0; background: none; border: 0; }
.fd-pin-row .fd-pin-close { position: absolute; top: 6px; right: 6px; }

.fd-pin-row > :first-child { padding-right: 52px !important; }
.fd-pin-row .fd-pin-close { top: 8px; right: 8px; }

/* The city map at the Locations page size, the location card over it (owner 2026-09-27). */
.fd-watch .fd-city-map-wrap { position: relative; overflow: hidden; }
.fd-city-map { height: clamp(320px, 44vh, 430px); }
@media (max-width: 720px) { .fd-city-map { height: 48vh; min-height: 320px; max-height: 520px; } }
@media (max-width: 600px) { .fd-city-map { height: 48vh; min-height: 320px; max-height: 520px; } }
.fd-watch .fd-city-map-wrap .map-location-info-box { left: 22px; right: 22px; bottom: 22px; }
@media (max-width: 600px) { .fd-watch .fd-city-map-wrap .map-location-info-box { left: 16px; right: 16px; bottom: 16px; } }

/* Chips are rounded rectangles on the site's radius (owner 2026-09-27), never pills. */
.dm-n { border-radius: var(--radius-sm, 8px); }
.fd-section-heading .count-badge { border-radius: var(--radius-sm, 8px); }

/* The boxes are centred to the pixel (measured 2026-09-27: 15/15, 19.6/19.6), but
   UPPERCASE text has no descenders, so its ink sits in the upper part of its em
   box and reads high (owner: more padding bottom than up). The label is nudged
   down by the half descender so the INK is centred, not the box. */
.dm-btn .dm-lbl { transform: translateY(0.09em); }
.dm-txt .dm-sub { transform: translateY(0.05em); }
.dm-btn .dm-n { transform: translateY(0.04em); }

/* Measured at 4x (owner 2026-09-27): the digit's ink sat 8px from the top and 10px
   from the bottom of its 30px chip; a full 0.1em brings the ink to the middle. */
.dm-btn .dm-n { transform: translateY(0.1em); }

/* Pixel-measured at 4x: 0.13em puts the digit's ink in the middle of the chip. */
.dm-btn .dm-n { transform: translateY(0.13em); }

/* The chip IS the .dm-n element, so a transform moved chip and digit together and
   changed nothing. The digit is a bare text node: it is centred through an
   asymmetric padding instead (pixel-measured: 1px high, so 2px more on top). */
.dm-btn .dm-n { transform: none; padding-top: 2px; }
.dm-vote.closed { cursor: default; }
.dm-vote.closed:hover { border-color: var(--border, var(--bv-line)); box-shadow: none; }
.dm-vote.closed:hover .dm-ico { color: var(--text-secondary, #94a3b8); }

/* ── The Notify me popup (owner 2026-09-27: "fix the popup", it had no styles) ──
   Rides the site's login modal shell; four switch rows, Save / Turn off, a link
   to the full settings. Every icon at the text's cap height, ink centred. */
.dm-modal { max-width: 440px; width: calc(100% - 32px); padding: 28px 24px 22px; text-align: center; }
.dm-modal-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(74,161,217,0.14); color: #4aa1d9; }
.dm-modal-ico i { font-size: 24px; line-height: 1; }
.dm-modal .login-modal-title { margin-bottom: 4px; }
.dm-modal .login-modal-subtitle { margin-bottom: 18px; }
.dm-opts { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.dm-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--bv-line); cursor: pointer; user-select: none; }
.dm-opt:hover { border-color: rgba(74,161,217,0.35); }
.dm-opt-ico { flex: 0 0 22px; width: 22px; display: flex; align-items: center; justify-content: center; color: #4aa1d9; }
.dm-opt-ico i { font-size: 16px; line-height: 1; }
.dm-opt-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-opt-txt > span { font-size: 0.95rem; font-weight: 600; color: #fff; line-height: 1.25; }
.dm-opt-txt > small { font-size: 0.78rem; color: var(--text-muted, #94a3b8); line-height: 1.3; }
.dm-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dm-switch { flex: 0 0 44px; width: 44px; height: 26px; border-radius: 13px; background: rgba(255,255,255,0.12); border: 1px solid var(--bv-line); position: relative; transition: background 0.15s ease; }
.dm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.dm-opt input:checked + .dm-switch { background: #4aa1d9; border-color: #4aa1d9; }
.dm-opt input:checked + .dm-switch::after { transform: translateX(18px); }
.dm-opt input:focus-visible + .dm-switch { outline: 2px solid rgba(74,161,217,0.6); outline-offset: 2px; }
.dm-modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.dm-modal-actions .bookvelt-btn { min-width: 140px; }
.dm-settings-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.85rem; color: var(--text-muted, #94a3b8); text-decoration: none; }
.dm-settings-link:hover { color: #4aa1d9; }
.dm-settings-link i { font-size: 12px; line-height: 1; }
@media (max-width: 600px) { .dm-modal { padding: 24px 16px 18px; } .dm-opt { padding: 10px 12px; } }

/* Borders on every object (owner 2026-09-27): the Notify me sheet, every part of it. */
.dm-modal { border: 1px solid var(--bv-line); }
.dm-modal-ico { border: 1px solid var(--bv-line); }
.dm-switch { border: 1px solid var(--bv-line); }
.dm-opt input:checked + .dm-switch { border-color: rgba(255,255,255,0.45); }
.dm-btn { border: 1px solid var(--bv-line); }
.dm-modal .login-modal-close, .dm-modal .modal-close, .dm-modal [data-dm="close"], .dm-modal button[aria-label] { border: 1px solid var(--bv-line); border-radius: 10px; }
.dm-settings-link { border: 1px solid var(--bv-line); border-radius: 999px; padding: 8px 14px; }

/* The switch knob (owner 2026-09-27, in capitals): a white disc with a BLUE border, on and off, and nothing
   on the page may recolour it (a phone rendered it dark), so the rule outranks everything. */
.dm-opt .dm-switch::after { background: #fff !important; border: 2px solid #4aa1d9 !important; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.dm-opt input:checked + .dm-switch::after { border-color: #4aa1d9 !important; background: #fff !important; }
.dm-opt input:checked + .dm-switch { background: #4aa1d9 !important; border-color: #4aa1d9 !important; }

/* A light shadow under every box that sits on the page background, so it lifts off it (owner 2026-09-28). One value, --bv-lift, declared at the top. */
.fd-fixture-card, .fd-city-map-wrap, .fd-info-card, .fd-venue-card, .dm-btn, .fd-req-row { box-shadow: var(--bv-lift); }

/* The WhatsApp request button under the "nobody has announced it" line (owner 2026-09-28). */
.fd-req-wa { margin: 10px 0 14px; }
.fd-req-wa .fd-btn-wa { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* The Lineups tab icon is the duotone-light pitch: white lines over a green field (owner 2026-09-29). */
.fa-court-sport.fa-duotone { --fa-primary-color: #fff; --fa-secondary-color: #66b32e; --fa-primary-opacity: 1; --fa-secondary-opacity: 1; }

/* The penalty word after a scorer's name (owner 2026-09-30) */
#fdRich .ev-tag { display: block; flex: 0 0 100%; width: 100%; font-size: 0.78em; line-height: 1.2; color: #94a3b8; font-weight: 500; margin-top: 1px; cursor: default; }
#fdRich .sub-t.scorer { flex-wrap: wrap; row-gap: 0; }
#fdRich .sub-t.scorer .wn { line-height: 1.25; }
#fdRich .sub-t.scorer .ev-tag { margin-top: 0; }
#fdRich .tl2-side.l .ev-tag, #fdRich .ev.h .ev-tag { text-align: right; }
#fdRich .ev-nm { display: flex; flex-direction: column; min-width: 0; }
#fdRich .g-row .ev-nm .wn { font-size: 13px; font-weight: 700; }
#fdRich .g-row .ev-nm .ev-tag { font-size: 10px; }
#fdRich .tl2-side.l .ev-nm, #fdRich .ev.h .ev-nm { align-items: flex-end; text-align: right; }

/* The assist name is smaller than the scorer (owner 2026-09-30, "assist name must be smaller") */
#fdRich .g-row.g-assist .wn { font-size: 12px; font-weight: 500; color: #d1d5db; }