/* ==========================================================================
   === GAME CARD FRAME (all team sports) — delete this block to revert ===
   --------------------------------------------------------------------------
   Wraps every team-sport game-detail view (baseball, hockey, basketball,
   soccer) in a single ESPN-style scorecard: one white panel on the grey
   page, rounded corners, soft drop-shadow, and a BOLD colored top strip that
   signals game state — red (pulsing) LIVE, green FINAL, grey upcoming — plus
   a prominent red "LIVE" pill in the scoreboard.

   Targets .gd-view:not(.gd-tennis) so it covers all TEAM sports at once and
   leaves the dedicated tennis card (css/tennis-card-frame.css) alone.

   State color is driven by .is-live / .is-final / .is-pre on the container
   (added in render.js: `gd-view gd-${league.sport} is-${st}`). With no state
   class it still renders with a neutral grey strip.

   NOTE: filename stays baseball-card-frame.css so no HTML relink is needed;
   it now covers all team sports, not baseball alone.
   ========================================================================== */

.gd-view:not(.gd-tennis) {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  padding: 0 20px 20px;
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* BOLD status strip across the top edge. Default grey; state overrides below. */
.gd-view:not(.gd-tennis)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--muted);
  border-radius: 14px 14px 0 0;
}
.gd-view:not(.gd-tennis).is-live::before  { background: #e5352b; animation: gdBbPulse 1.6s ease-in-out infinite; }
.gd-view:not(.gd-tennis).is-final::before { background: var(--brand); }
.gd-view:not(.gd-tennis).is-pre::before   { background: var(--muted); }

@keyframes gdBbPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Breadcrumb trail bleeds to the card edges and clears the top strip. */
.gd-view:not(.gd-tennis) .gd-trail {
  margin: 0 -20px 4px;
  padding: 12px 20px 0;
}

/* Scoreboard gets a faint tinted header band, bled to the card edges. */
.gd-view:not(.gd-tennis) .gd-scoreboard {
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  background: rgba(127, 127, 127, .05);
  border-bottom: 1px solid var(--line);
}
.gd-view:not(.gd-tennis).is-live  .gd-scoreboard { background: rgba(229, 53, 43, .06); }
.gd-view:not(.gd-tennis).is-final .gd-scoreboard { background: rgba(0, 180, 90, .06); }

/* Venue line shares the header band. */
.gd-view:not(.gd-tennis) .gd-venue {
  margin: 0 -20px;
  padding: 10px 20px 12px;
  margin-top: -1px;
  background: rgba(127, 127, 127, .05);
}
.gd-view:not(.gd-tennis).is-live  .gd-venue { background: rgba(229, 53, 43, .06); }
.gd-view:not(.gd-tennis).is-final .gd-venue { background: rgba(0, 180, 90, .06); }

/* Breathing room under the header band before the tabs/pills. */
.gd-view:not(.gd-tennis) .gd-tabs,
.gd-view:not(.gd-tennis) .gd-pills:first-of-type { margin-top: 16px; }

@media (max-width: 720px) {
  .gd-view:not(.gd-tennis) { padding: 0 14px 16px; border-radius: 12px; }
  .gd-view:not(.gd-tennis) .gd-trail { margin: 0 -14px 4px; padding: 14px 14px 0; }
  .gd-view:not(.gd-tennis) .gd-scoreboard { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .gd-view:not(.gd-tennis) .gd-venue { margin: 0 -14px; padding: 10px 14px 12px; }
}

/* Prominent LIVE badge — red pill so live is unmistakable, not just the strip.
   Shown in the scoreboard center only when live. Shared by all team sports. */
.gd-live-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #e5352b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: gdBbPulse 1.6s ease-in-out infinite;
}

/* Football live down-and-distance line under the status ("1st & 10 at LV 48"). */
.gd-down-distance {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
}

/* NFL Player Stats — team tabs (show one team's tables at a time). */
.nflp-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}
.nflp-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text, #1a1f27);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.nflp-tab:hover { border-color: var(--brand); }
.nflp-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.nflp-tab-logo { width: 20px; height: 20px; object-fit: contain; }
.nflp-tab.active .nflp-tab-logo { filter: brightness(0) invert(1); }
.nflp-panel { display: none; }
.nflp-panel.active { display: block; }

/* Down-and-distance in the live NFL feed row, under the quarter/clock. */
.m-down-distance {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Head-to-head tab: summary record between the two teams. */
.gd-h2h { padding: 8px 4px 4px; }
.h2h-record {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  max-width: 520px;
  margin: 0 auto;
}
.h2h-team {
  flex: 1 1 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.h2h-logo { width: 46px; height: 46px; object-fit: contain; }
.h2h-team-name { font-size: 13px; font-weight: 700; color: var(--text, #1a1f27); line-height: 1.2; }
.h2h-wins { font-size: 34px; font-weight: 900; color: var(--brand); line-height: 1; }
.h2h-wins-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.h2h-mid {
  flex: 0 0 auto;
  align-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 40px;
}
.h2h-draws { font-size: 12px; font-weight: 700; color: var(--text, #1a1f27); }
.h2h-meetings { font-size: 11px; color: var(--muted); white-space: nowrap; }
.h2h-note {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
}
/* === end game card frame block === */