/* ==========================================================================
   === TENNIS MATCH CARD FRAME — delete this whole block to revert ===
   --------------------------------------------------------------------------
   Wraps the tennis game-detail view (.gd-tennis) 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 the match state —
   red (pulsing) when LIVE, green when FINAL, grey when upcoming.

   Self-contained: only ADDS rules, doesn't modify the existing .gd-tn-*
   styles. The live/final/pre color is driven by a state class on the
   container (.is-live / .is-final / .is-pre) added via a one-line change
   in render.js (see note at bottom). With no state class present the card
   still renders correctly with a neutral grey strip.
   ========================================================================== */

/* The card itself — white panel floating on the grey page. */
.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;
  overflow: hidden;               /* clip the top strip to the rounded corners */
}

/* BOLD status strip across the entire top edge of the card. Default grey;
   overridden by the state classes below. Sits flush to the top, full width. */
.gd-tennis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--muted);
  border-radius: 14px 14px 0 0;
}
.gd-tennis.is-live::before  { background: #e5352b; animation: gdTnPulse 1.6s ease-in-out infinite; }
.gd-tennis.is-final::before { background: var(--brand); }
.gd-tennis.is-pre::before   { background: var(--muted); }

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

/* Push the content down clear of the top strip. The summary head gets a
   faint tinted band so it reads as a card header rather than floating text. */
.gd-tennis .gd-tn-summary-head {
  margin: 0 -20px 0;              /* bleed to the card edges */
  padding: 16px 20px 12px;
  background: rgba(127, 127, 127, .05);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Prominent LIVE badge — a red pill so live is unmistakable, not just the
   thin top strip. Sits at the right of the "Match Summary" header. */
.gd-live-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: #e5352b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: gdTnPulse 1.6s ease-in-out infinite;
}

/* A little breathing room under the header band before the meta/rows. */
.gd-tennis .gd-tn-head { padding-top: 14px; }

/* Tint the header band to match the state, very faintly, so live/final is
   legible even at a glance without relying on the thin strip alone. */
.gd-tennis.is-live  .gd-tn-summary-head { background: rgba(229, 53, 43, .06); }
.gd-tennis.is-final .gd-tn-summary-head { background: rgba(0, 180, 90, .06); }

/* The breadcrumb trail sits ABOVE the card (it's inside .gd-tennis in the
   markup), so lift it out visually: no card padding influence, sits on the
   grey page like a normal breadcrumb. Top padding clears the 6px strip so
   the crumb text doesn't overlap the colored strip. */
.gd-tennis .gd-trail {
  margin: 0 -20px 12px;
  padding: 14px 20px 0;
}

@media (max-width: 720px) {
  .gd-tennis { padding: 0 14px 16px; border-radius: 12px; }
  .gd-tennis .gd-tn-summary-head { margin: 0 -14px 0; padding: 14px 14px 11px; }
  .gd-tennis .gd-trail { margin: 0 -14px 10px; padding: 16px 14px 0; }
}
/* === end tennis match card frame block ===

   ONE-LINE render.js CHANGE required for the live/final color (without it,
   the card still works but the top strip stays neutral grey):

   In gameDetailView's tennis branch, the return currently opens:
       <div class="detail-view gd-view gd-tennis">
   Change it to add the state class:
       <div class="detail-view gd-view gd-tennis is-${st}">
   (st is already computed at the top of gameDetailView as statusOf(match.status)
    → 'live' | 'final' | 'pre', giving is-live / is-final / is-pre.)
*/