/* ═══════════════════════════════════════════════════════════════
   Game Detail — Layer 2 (The Film Room)
   Design rule: 70% vibe / 30% data. Breathe. Cinematic.
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay (slides up from bottom) ───────────────────────── */
.game-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  /* CSS transition uses the TARGET state's transition property.
     When CLOSING (→ this state): hide visibility after panel slides out (0.4s delay).
     When OPENING (→ .open state): .open has 0s → instant show. */
  visibility: hidden;
  transition: visibility 0s 0.4s;
}

.game-detail-overlay.open {
  pointer-events: all;
  visibility: visible;
  /* When OPENING (→ this state): instant show (0s). */
  transition: visibility 0s;
}

/* Dark backdrop — appears instantly on open, stays opaque during close */
.game-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  /* When CLOSING: stay opaque the entire 0.4s panel-slide, then disappear
     instantly — no main-screen flash while the panel is still on screen. */
  transition: opacity 0s 0.4s;
}

.game-detail-overlay.open .game-detail-backdrop {
  opacity: 1;
  /* Short fade-in (80ms) avoids compositor flash on first paint. */
  transition: opacity 0.08s;
}

/* The panel itself */
.game-detail-panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 40px;

  /* slide up animation — same duration for open and close */
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.game-detail-overlay.open .game-detail-panel {
  transform: translateY(0);
}

/* Drag handle */
.game-detail-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 14px auto 0;
  flex-shrink: 0;
}

/* ── Header ──────────────────────────────────────────────────── */
.gd-header {
  padding: 18px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.gd-back-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}

.gd-back-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.gd-score-block {
  text-align: center;
  flex: 1;
}

/* Crest, name, score, name, crest — the same left-to-right order as the card
   the reader tapped to get here, so the two screens agree about which club is
   on which side. */
.gd-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gd-club {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 2px;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  transition: background 0.15s, transform 0.15s;
}

.gd-club--tappable { cursor: pointer; }
.gd-club--tappable:hover  { background: var(--hover-bg, rgba(128,128,128,0.10)); }
.gd-club--tappable:active { transform: scale(0.96); }
.gd-club:disabled { cursor: default; }

.gd-club-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.gd-club-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.gd-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gd-score {
  font-family: "Anton", sans-serif;
  font-size: 32px;
  color: var(--text);
  line-height: 1;
  letter-spacing: 2px;
}

.gd-score-sep {
  color: var(--border);
  margin: 0 8px;
}

.gd-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Barlow Condensed", sans-serif;
  /* 11px condensed is fine for "FINAL"; it is not fine for a Hebrew date,
     which falls back to a non-condensed face and had no room to breathe. */
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 11px;
  border-radius: 20px;
  margin-top: 5px;
  text-transform: uppercase;
}

.gd-status-pill.live {
  background: rgba(200, 16, 46, 0.15);
  border: 1px solid rgba(200, 16, 46, 0.4);
  color: #ff4d6d;
}

.gd-status-pill.final {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--muted);
}

.gd-status-pill.upcoming {
  background: rgba(var(--accent1-rgb, 29,66,138), 0.15);
  border: 1px solid rgba(var(--accent1-rgb, 29,66,138), 0.35);
  /* Was --accent2 — the variable a favorite team overwrites with its own
     color. With Maccabi picked this date read as their yellow on a near-white
     tint: 1.36:1. --accent-ink keeps the accent and makes it legible. */
  color: var(--accent-ink);
}

.gd-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff4d6d;
  animation: blink 1.2s infinite;
}

/* placeholder — right side of header to balance layout */
.gd-header-spacer { width: 44px; }

/* ── Live Win Probability bar (under header, live games only) ── */
.gd-live-win-prob {
  padding: 4px 16px 8px;
  direction: ltr; /* bar always LTR: away on left, home on right */
}

.gd-lwp-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  background: rgba(255,255,255,0.08);
}

.gd-lwp-fill-away {
  height: 100%;
  background: #60a5fa;
  transition: width 0.8s ease;
  border-radius: 3px 0 0 3px;
}

.gd-lwp-fill-home {
  height: 100%;
  background: #f97316;
  transition: width 0.8s ease;
  border-radius: 0 3px 3px 0;
}

.gd-lwp-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.gd-lwp-pct-away { color: #60a5fa; }
.gd-lwp-pct-home { color: #f97316; }

.gd-lwp-center-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
}

/* ── Professor Narrative (THE HERO) ──────────────────────────── */
.gd-narrative {
  padding: 28px 24px 20px;
  text-align: center;
  position: relative;
}

/* subtle radial glow behind quote */
.gd-narrative::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(var(--accent1-rgb, 29,66,138), 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.gd-narrative-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 12px;
  position: relative;
}

.gd-narrative-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: 0.3px;
  position: relative;
  /* BiDi: plaintext lets each paragraph take direction from its first strong char.
     Hebrew-first text → RTL. Prevents browser guessing wrong on mixed Hebrew+English. */
  unicode-bidi: plaintext;
  text-align: start;
  /* subtle text glow */
  text-shadow: 0 0 40px rgba(var(--accent1-rgb, 29,66,138), 0.3);
}

/* Loading shimmer for narrative */
.gd-narrative-text.loading {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card2) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
  color: transparent;
  min-height: 60px;
}

/* ── Section label ───────────────────────────────────────────── */
.gd-section-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 20px 10px;
}

/* ── Story Cards (Player cards) ──────────────────────────────── */
.gd-players {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-card {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.story-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent1);
}

/* colored left accent strip */
.story-card::before {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 14px 14px 0;
  background: var(--tag-color, var(--accent1));
  transition: background var(--transition);
}

/* Avatar */
.story-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card2);
  border: 2px solid var(--tag-color, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Anton", sans-serif;
  font-size: 15px;
  color: var(--text);
  flex-shrink: 0;
  transition: border-color var(--transition);
}

/* Body */
.story-card-body {
  flex: 1;
  min-width: 0;
}

.story-card-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  /* Player names are English — force LTR so they display left-to-right */
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.story-card-team {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px;
  direction: ltr;
  text-align: left;
}

/* THE narrative tag — answers "why care NOW?" */
.story-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.tag-hot      { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.tag-cold     { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.tag-heating  { background: rgba(234,179,8,0.15);  color: #fde047; border: 1px solid rgba(234,179,8,0.3); }
.tag-clutch   { background: rgba(34,197,94,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.tag-warning  { background: rgba(249,115,22,0.15); color: #fdba74; border: 1px solid rgba(249,115,22,0.3); }
.tag-fading   { background: rgba(107,114,128,0.15);color: #9ca3af; border: 1px solid rgba(107,114,128,0.3);}
.tag-anchor   { background: rgba(var(--accent1-rgb,29,66,138),0.15); color: var(--accent2-ink); border: 1px solid rgba(var(--accent1-rgb,29,66,138),0.3); }

/* Fuel row inside card */
.story-card-fuel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.story-card-fuel-label {
  font-size: 10px;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.story-card-fuel-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.story-card-fuel-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-card-fuel-pct {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  min-width: 30px;
  text-align: left;
}

/* ── Deep Dive (Layer 3) ──────────────────────────────────────── */
.gd-deep-dive {
  margin: 20px 16px 0;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, padding 0.3s;
  overflow: hidden;
}

.gd-deep-dive:not(.expanded):hover {
  border-color: var(--accent1);
  background: rgba(var(--accent1-rgb, 29,66,138), 0.06);
}

.gd-deep-dive.expanded {
  border-style: solid;
  border-color: var(--border);
  text-align: left;
  cursor: default;
  padding: 0;
}

.gd-deep-dive-text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.gd-deep-dive:not(.expanded):hover .gd-deep-dive-text { color: var(--accent2-ink); }

/* Box score header */
.gd-bs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.gd-bs-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.gd-bs-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.gd-bs-close-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Teams container */
.gd-bs-teams {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Per-team block — the 16px horizontal inset lives HERE, not on the scroll
   container, so the sticky name column can stick flush to the scroll edge. */
.gd-bs-team {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.gd-bs-team:last-child { border-bottom: none; }

.gd-bs-team-label {
  /* This one showed the tricode until the box score started returning its
     Hebrew names again, so Anton — which has no Hebrew — had Latin to draw
     and looked fine. Now it says "מונאקו", and without Heebo behind it the
     label would fall to a different system face on every device. */
  font-family: "Anton", "Heebo", sans-serif;
  font-size: 13px;
  letter-spacing: .3px;
  /* Pulled toward the body text colour rather than used raw: the raw ink
     resolved to the DARK-theme orange (about 2.2:1) on the light drawer, so
     "מכבי תל אביב" sat faint above the table (reported live 2026-09-25).
     Mixing in --text keeps the club tint and follows whichever surface it is
     actually on. */
  color: color-mix(in srgb, var(--accent2-ink) 45%, var(--text));
  margin-bottom: 6px;
  padding: 0;
  text-transform: uppercase;
}

/* Horizontal scroll wrapper — full-width box score on mobile.
   RTL: name column sits on the right (Hebrew-natural + matches NBA app),
   stats scroll leftward. scrollLeft:0 in RTL = the right (name) side = start. */
.gd-bs-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* NO horizontal padding here. A `padding-right` would push the sticky name
     column (right:0) inward by that amount, leaving a gap on the far right
     where scrolling stat cells slide past and bleed "through" the column.
     The 16px visual inset is provided by the parent .gd-bs-team instead. */
  padding: 0 0 4px;
}
html[dir="rtl"] /* Horizontal scroll wrapper — full-width box score on mobile.
   RTL: name column sits on the right (Hebrew-natural + matches NBA app), html[dir="rtl"] stats scroll leftward. scrollLeft:0 in RTL = the right (name) side = start. */
.gd-bs-scroll-wrap { direction: rtl; }

/* Table */
.gd-bs-table {
  width: max-content;
  min-width: 100%;
  /* MUST be `separate` (not `collapse`): with collapsed borders, Chrome/WebKit
     fail to paint the background of position:sticky cells, so the scrolling
     stats bleed through the sticky player-name column. `separate` fixes it. */
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
}
html[dir="rtl"] /* Table */
.gd-bs-table { direction: rtl; }

.gd-bs-table thead th {
  border-bottom: 1px solid var(--border);
}

.gd-bs-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
}

.gd-bs-table th.gd-bs-name-col {
  text-align: start;
  padding-right: 0;
  min-width: 110px;
  position: sticky;
  right: 0;
  background: var(--bg);
  z-index: 6;
  box-shadow: -2px 0 8px rgba(0,0,0,0.5);
}

/* Visual separator columns (FG / 3P / FT) */
.gd-bs-table th.gd-bs-sep,
.gd-bs-table td.gd-bs-sep {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding-right: 8px;
}

/* Subdued sub-stats (OREB / DREB) */
.gd-bs-smart { margin-inline-start: 2px; font-size: 9px; font-weight: 700; color: var(--accent, #3b82f6); cursor: help; }
.gd-bs-smart-note { padding: 8px 16px 0; font-size: 12px; color: var(--muted); }
.gd-bs-table th.gd-bs-sub,
.gd-bs-table td.gd-bs-sub {
  color: var(--muted);
  font-size: 12px;
}

.gd-bs-table td {
  padding: 5px 6px;
  text-align: center;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}

.gd-bs-table tbody tr:last-child td { border-bottom: none; }

/* Player name column — fixed, sticky on scroll */
.gd-bs-table td.gd-bs-name-col {
  text-align: start;
  padding-right: 0;
  font-weight: 600;
  color: var(--text);
  max-width: 120px;
  min-width: 110px;
  overflow: hidden;
  white-space: nowrap;
  position: sticky;
  right: 0;
  background: var(--bg);
  z-index: 5;
  box-shadow: -2px 0 8px rgba(0,0,0,0.5);
}

/* Minutes column — muted */
.gd-bs-table td.gd-bs-mins { color: var(--muted); font-size: 12px; }

/* Points — bold */
.gd-bs-table td.gd-bs-pts strong { font-weight: 800; font-size: 15px; }

/* Section rows: חמישייה פותחת / ספסל */
.gd-bs-section-row td {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  text-align: start;
}
/* The section label is pinned to the right edge so it stays visible while the
   row scrolls horizontally (the row is a full-width colspan cell). */
.gd-bs-section-label {
  position: sticky;
  right: 0;
  display: inline-block;
  padding-right: 2px;
  background: var(--bg);
}

/* +/- colors */
.gd-bs-pm-pos { color: #4ade80; font-weight: 700; }
.gd-bs-pm-neg { color: #f87171; font-weight: 700; }

/* FG / 3P / FT efficiency colors */
.gd-bs-fg-hot  { color: #4ade80; }
.gd-bs-fg-cold { color: #f87171; }

/* ── Fuel Gauge (4px bar under player name) ───────────────────── */
.gd-bs-name-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.gd-bs-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.gd-tag-icon {
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
}
.gd-fuel-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  margin-top: 3px;
  overflow: hidden;
}
.gd-fuel-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* FG cell — tappable, opens popup. Dotted underline signals it's interactive. */
.gd-bs-fg-tap {
  cursor: pointer;
  white-space: nowrap;
}
/* Affordance: a link-blue dashed underline on the fraction signals the FG cell
   is tappable (opens the shot detail). The number keeps its hot/cold colour. */
.gd-bs-fg-frac {
  border-bottom: 1px dashed #63a3ff;
  padding-bottom: 1px;
}

/* Mini popup that appears when tapping an FG cell */
/* Full-screen invisible catcher behind the FG popup. Any tap/click anywhere on
   the screen (desktop or mobile) lands here and dismisses the popup. */
.gd-fg-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
}
.gd-fg-popup {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  background: #1e2d4a;
  border: 1px solid rgba(99,163,255,0.3);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  overflow: hidden;
}
.gd-fg-pop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 52px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.gd-fg-pop-btn:active { background: rgba(255,255,255,0.08); }
.gd-fg-pop-made .gd-fg-pop-num { color: #4ade80; }
.gd-fg-pop-all  .gd-fg-pop-num { color: #93c5fd; }
.gd-fg-pop-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.gd-fg-pop-lbl {
  font-family: "Heebo", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}
.gd-fg-pop-div {
  width: 1px;
  background: rgba(255,255,255,0.1);
  margin: 8px 0;
}

/* Dimmed row for true DNP only (0 minutes) */
.gd-bs-row-dnp td { opacity: 1; color: var(--muted); }
.gd-bs-dnp-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); white-space: nowrap; vertical-align: middle; }
/* The sticky name cell must stay FULLY opaque, otherwise the stats that scroll
   under it become visible through the dimmed (28% opacity) cell. Keep it solid
   and dim the name via muted color instead. */
.gd-bs-row-dnp td.gd-bs-name-col { opacity: 1; color: var(--muted); }

/* Shooting % sub-label inside cell */
.gd-bs-pct {
  display: block;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.1;
}

/* Muted dash */
.gd-bs-muted { color: var(--muted); }

/* Total rows */
.gd-bs-total-row td,
.gd-bs-total-grand td {
  font-weight: 700;
  border-top: 1px solid var(--border);
  border-bottom: none;
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  color: var(--muted);
}
.gd-bs-total-grand td {
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.gd-bs-total-grand td strong { font-size: 14px; }
.gd-bs-total-row td.gd-bs-name-col,
.gd-bs-total-grand td.gd-bs-name-col {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Loading / error states */
.gd-bs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
}

.gd-bs-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.gd-bs-error {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════
   Highlights card — gd-highlights
   ═══════════════════════════════════════════════════════════════ */
.gd-highlights {
  padding: 0 16px 4px;
}

.gd-hl-card {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.15s, border-color 0.15s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.gd-hl-card:active {
  transform: scale(0.98);
}

.gd-hl-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gd-hl-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gd-hl-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  font-size: 44px;
  color: #fff;
  transition: background 0.2s;
}

.gd-hl-card:hover .gd-hl-play {
  background: rgba(0,0,0,0.5);
}

.gd-hl-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px 2px;
}
html[dir="rtl"] .gd-hl-label { direction: rtl; }

.gd-hl-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 2px 14px 12px;
  direction: ltr;
  line-height: 1.4;
}

.gd-hl-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

.gd-hl-sport5 {
  display: block;
  margin: 8px 0 0;
  padding: 10px 0;
  background: #e8001c;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
}

.gd-hl-search-link {
  display: block;
  margin: 8px 0 0;
  padding: 12px 0;
  background: #ff0000;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════
   Post-Game Report — gd-report
   ═══════════════════════════════════════════════════════════════ */

.gd-report {
  margin: 0 16px 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
}

.gd-report-inner {
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Header row */
.gd-report-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gd-report-icon {
  font-size: 18px;
  line-height: 1;
}

.gd-report-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text);
  flex: 1;
}

.gd-report-badge {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* MVP / LVP pills row */
.gd-report-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gd-report-pill {
  flex: 1;
  min-width: 120px;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}

.gd-report-pill.mvp {
  background: rgba(250, 204, 21, 0.08);
  border-color: rgba(250, 204, 21, 0.2);
}

.gd-report-pill.lvp {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.2);
}

.pill-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.gd-report-pill.mvp .pill-label { color: #facc15; }
.gd-report-pill.lvp .pill-label { color: #f87171; }

.pill-name {
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.pill-stats {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* Narrative */
.gd-report-narrative {
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 14px;
  text-align: start;
}
html[dir="rtl"] /* Narrative */
.gd-report-narrative { direction: rtl; }

/* Share row */
.gd-report-share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}

.gd-report-copy-btn {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #0a0f1e;
  background: #f0f4ff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.gd-report-copy-btn:active {
  transform: scale(0.96);
}

.gd-report-copy-btn.copied {
  background: #4ade80;
  color: #0a0f1e;
}

.gd-report-share-hint {
  font-family: "Heebo", sans-serif;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* Loading skeleton */
.gd-report-loading {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gd-report-loading-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

.gd-report-loading-bar.short {
  width: 60%;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════
   Pre-Game Report — scheduled game CTA + card
   ═══════════════════════════════════════════════════════════════ */

/* The "מה חשוב הלילה?" button */
.gd-pregame-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Heebo", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0a0f1e;
  background: linear-gradient(135deg, #f0f4ff 0%, #c7d2fe 100%);
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  cursor: pointer;
  width: 100%;
  text-align: start;
  transition: opacity 0.15s, transform 0.1s;
  line-height: 1.3;
}
html[dir="rtl"] /* ═══════════════════════════════════════════════════════════════
   Pre-Game Report — scheduled game CTA + card
   ═══════════════════════════════════════════════════════════════ */

/* The "מה חשוב הלילה?" button */
.gd-pregame-btn { direction: rtl; }

.gd-pregame-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* Loading bars inside narrative area */
.gd-pregame-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

/* The rendered card */
.gd-pregame-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gd-pregame-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gd-pregame-records {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}

.gd-pregame-form {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  /* Was 1px, which was spacing out the W/L letters that used to live here.
     The club names that replaced them do not want it. */
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Last five games. In an RTL row the first mark sits rightmost, which is where
   the reader starts — so the newest game leads, and it is drawn larger to say
   which end "now" is. Win filled, loss a ring: the pair has to be tellable
   apart without colour. 8px is small for a graphic, so both tones are measured
   against the surfaces the card actually sits on at the 3:1 the standard asks
   for non-text — the shared --green fell to 2.83 on the light page ground. */
.gd-form-dots { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.gd-fd {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  flex: none;
}
.gd-fd.newest { width: 11px; height: 11px; }
.gd-fd.w { background: #16a34a; }
.gd-fd.l { border: 2px solid #ef4444; }
html[data-theme="light"] .gd-fd.w { background: #159e48; }

.gd-pregame-hot-badge {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: 20px;
  padding: 2px 10px;
}

/* Win Probability */
.gd-win-prob {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-win-prob-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-align: center;
}

.gd-win-prob-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gd-win-prob-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: rgba(255,255,255,0.08);
}

.gd-win-prob-fill-away {
  height: 100%;
  background: #60a5fa;
  border-radius: 4px 0 0 4px;
  transition: width 0.6s ease;
}

.gd-win-prob-fill-home {
  height: 100%;
  background: #f97316;
  border-radius: 0 4px 4px 0;
  transition: width 0.6s ease;
}

.gd-win-prob-pct {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  min-width: 36px;
  text-align: center;
}

.gd-win-prob-away { color: #60a5fa; text-align: start; }
.gd-win-prob-home { color: #f97316; text-align: left; }

.gd-win-prob-teams {
  display: flex;
  justify-content: space-between;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 0 44px;
}

/* Projected starters */
.gd-pregame-starters {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-pregame-starters-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.gd-pregame-starters-names {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  line-height: 1.5;
  direction: ltr;
  text-align: left;
}

.gd-pregame-backups {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.gd-pregame-narrative {
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  text-align: start;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 10px;
}
html[dir="rtl"] .gd-pregame-narrative { direction: rtl; }

/* Word-by-word streaming caret */
.gd-streaming::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  background: rgba(255, 255, 255, 0.7);
  animation: gd-caret-blink 1s steps(2, start) infinite;
}
@keyframes gd-caret-blink {
  to { visibility: hidden; }
}

/* ═══════════════════════════════════════════════════════════════
   Halftime Locker Room Report — gd-halftime
   ═══════════════════════════════════════════════════════════════ */

.gd-halftime {
  margin: 0 16px 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: linear-gradient(160deg,
    rgba(251, 191, 36, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

.gd-halftime-inner {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Header */
.gd-halftime-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gd-halftime-icon {
  font-size: 17px;
  line-height: 1;
}

.gd-halftime-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fbbf24;
  flex: 1;
}
/* The amber was picked for the dark panel and never got a light variant:
   1.40 on the light theme's halftime card. Darkened until it clears 4.5 on
   every light surface the panel can sit on, hue kept. */
html[data-theme="light"] .gd-halftime-title { color: #836313; }

.gd-halftime-score {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}
/* 70% white over a light card is 1.13 — the half-time score, unreadable. */
html[data-theme="light"] .gd-halftime-score { color: var(--text-muted); }

/* The "analysis opens at HH:MM" note, shown on a game more than three hours
   from tip-off. Was written as inline styles from game_detail.js with two
   fixed dark-theme greys in it; inline wins over every stylesheet, so it had
   no light-theme version and could not be given one. */
.gd-window-note {
  text-align: right;
  padding: 16px 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.gd-window-note strong { color: var(--accent-ink); }
.gd-window-note-sub    { font-size: 12px; }

/* Alert chips */
.gd-ht-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gd-ht-alert-chip {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
/* Same amber, same omission: 1.35 on the light panel. The 10% amber wash
   behind it stays — it is what makes the chip read as a warning. */
html[data-theme="light"] .gd-ht-alert-chip { color: #836313; }

/* Narrative */
.gd-halftime-narrative {
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(251, 191, 36, 0.1);
  padding-top: 12px;
  text-align: start;
}
html[dir="rtl"] /* Narrative */
.gd-halftime-narrative { direction: rtl; }

/* Loading skeleton (reuses gd-report-loading-bar shimmer) */
.gd-halftime-loading {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Deep Dive — Tab bar (Box Score | Shot Map)
   ───────────────────────────────────────────────────────────── */
.gd-dd-tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 4px;
  background: var(--bg-card, #1a2a40);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  z-index: 5;
}

.gd-dd-tab {
  flex: 1;
  padding: 7px 0;
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.gd-dd-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.gd-dd-panel {
  overflow-y: auto;
}

.gd-dd-panel.hidden {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   Team Stats Panel
   ───────────────────────────────────────────────────────────── */
.gd-ts-wrap {
  padding: 0 0 24px;
}
html[dir="rtl"] /* ─────────────────────────────────────────────────────────────
   Team Stats Panel
   ───────────────────────────────────────────────────────────── */
.gd-ts-wrap { direction: rtl; }

.gd-ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gd-ts-team-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  max-width: 40%;
  text-align: center;
}

.gd-ts-vs {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

.gd-ts-table {
  width: 100%;
  border-collapse: collapse;
}

.gd-ts-row td {
  padding: 8px 14px 2px;
  vertical-align: middle;
}

.gd-ts-bar-row td {
  padding: 0 14px 6px;
}

.gd-ts-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-align: center;
  white-space: nowrap;
}

.gd-ts-val {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-align: center;
  white-space: nowrap;
}

.gd-ts-val.gd-ts-win {
  font-weight: 800;
  font-size: 15px;
}

.gd-ts-bar {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.gd-ts-bar-fill {
  height: 100%;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.gd-ts-bar-fill.winner {
  background: var(--accent2, #4fc3f7);
}

.gd-ts-section-row td {
  padding: 16px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gd-ts-section-row:first-child td {
  border-top: none;
  padding-top: 8px;
}

/* ─────────────────────────────────────────────────────────────
   Shot Map
   ───────────────────────────────────────────────────────────── */
.sm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 6px;
}

.sm-filter-btn {
  padding: 5px 12px;
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.sm-filter-btn.active {
  color: #fff;
  background: rgba(99,163,255,0.2);
  border-color: rgba(99,163,255,0.5);
}

.sm-player-bar {
  padding-top: 2px;
  gap: 5px;
}

.sm-player-btn {
  font-size: 11px;
  padding: 4px 10px;
}

.sm-stats-row {
  display: flex;
  gap: 12px;
  padding: 4px 14px 6px;
}

/* Outcome filter bar (All / Made / Missed) */
.sm-outcome-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 14px 6px;
}

.sm-outcome-btn {
  padding: 4px 10px;
  font-family: "Heebo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.sm-outcome-btn.active {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}
.sm-outcome-made.active {
  color: #22c55e;
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.4);
}
.sm-outcome-miss.active {
  color: #ef4444;
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
}
.sm-outcome-bar .sm-stat {
  margin-right: auto;
}

.sm-stat {
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

.sm-stat-3 {
  color: rgba(99,163,255,0.85);
}

.sm-court-wrap {
  padding: 8px 12px 16px;
}

.sm-court-svg {
  width: 100%;
  max-width: var(--app-max-width);
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}

.sm-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding: 8px 0 4px;
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.sm-legend svg { vertical-align: middle; }

.sm-loading,
.sm-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: rgba(255,255,255,0.45);
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  text-align: center;
}

.sm-retry-btn {
  margin-top: 2px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sm-retry-btn:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.45);
}

.sm-unavail-icon {
  font-size: 32px;
}

/* ─────────────────────────────────────────────────────────────
   Desktop: keep the post-game report at a comfortable reading
   measure. Full-width lines are hard for the eye to track back.
   Centered (not flush to one side) so the empty space splits evenly
   left and right — room for ads on both sides later, and easier to
   read than text glued to one edge of a wide viewport in the
   meantime. Mobile is already a narrow column, so this only kicks
   in ≥760px.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .gd-report-inner {
    max-width: 720px;
    margin-inline: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   Mobile: the team-stats comparison table overflowed the viewport
   (long values + nowrap + wide cell padding pushed the side columns
   off-screen). Fix the layout to 3 even columns and tighten so it
   fits edge-to-edge.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .gd-ts-table {
    table-layout: fixed;
  }
  .gd-ts-row td,
  .gd-ts-bar-row td {
    padding-left: 7px;
    padding-right: 7px;
  }
  .gd-ts-label {
    font-size: 11px;
    white-space: normal;
    line-height: 1.25;
  }
  .gd-ts-val {
    font-size: 11.5px;
  }
  .gd-ts-val.gd-ts-win {
    padding: 2px 5px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT THEME (additive). The detail panel bg follows var(--bg) (light once
   unlocked); flip white-alpha surfaces to dark-alpha, pin light text to themed
   dark/muted, give active tabs an accent fill (so white text reads). Kept dark
   on purpose: the .gd-fg-popup tooltip, the play-button overlay on highlight
   thumbnails, Sport5/YouTube brand buttons, the win/green stat, and all
   semantic tag colors (hot/cold/clutch/etc.).
   ════════════════════════════════════════════════════════════════════════ */
/* Panels / cards / inputs */
html[data-theme="light"] :is(
  .gd-status-pill.final, .gd-bs-section-row td, .gd-bs-total-grand td,
  .gd-hl-card, .gd-report, .gd-win-prob, .gd-pregame-starters,
  .sm-filter-btn:not(.active), .sm-outcome-btn:not(.active)
) {
  background: rgba(20,26,40,0.05);
  border-color: var(--border);
}
/* Bar tracks need a touch more contrast on white */
html[data-theme="light"] :is(.gd-lwp-bar, .gd-fuel-bar, .gd-win-prob-bar, .gd-ts-bar) {
  background: rgba(20,26,40,0.1);
}
html[data-theme="light"] .gd-ts-bar-fill { background: rgba(20,26,40,0.3); }
html[data-theme="light"] .gd-streaming::after { background: rgba(20,26,40,0.4); }
/* Active tabs / filters: accent fill keeps the white label readable */
html[data-theme="light"] :is(.gd-dd-tab.active, .sm-filter-btn.active, .sm-outcome-btn.active) {
  background: var(--accent1);
}
/* Light text → themed dark / muted */
html[data-theme="light"] :is(
  .gd-hl-title, .gd-report-narrative, .gd-pregame-narrative, .gd-halftime-narrative,
  .gd-ts-team-name, .gd-ts-val, .sm-stat
) { color: var(--text); }
html[data-theme="light"] :is(
  .gd-hl-label, .gd-halftime-score, .gd-dd-tab, .gd-ts-vs, .gd-ts-label,
  .gd-ts-section-row td, .sm-legend, .sm-unavailable
) { color: var(--muted); }
/* Section row dividers — white border invisible on white bg */
html[data-theme="light"] .gd-ts-section-row td { border-top-color: var(--border); }
/* Report card — hardcoded whites invisible on light */
html[data-theme="light"] .gd-report-narrative { color: #000; border-top-color: var(--border); }
html[data-theme="light"] .gd-report-share { border-top-color: var(--border); }
html[data-theme="light"] .gd-report-pill.mvp .pill-label { color: #b45309; }
html[data-theme="light"] .gd-report-pill.lvp .pill-label { color: #dc2626; }
/* Narrative glow blurs text on white — remove it */
html[data-theme="light"] .gd-narrative-text { text-shadow: none; color: var(--text); }
/* Shot-map filter / outcome pill text (was white — invisible on light) */
html[data-theme="light"] :is(.sm-filter-btn:not(.active), .sm-outcome-btn:not(.active)) { color: var(--muted); }
/* Box-score grid dividers */
html[data-theme="light"] :is(.gd-bs-table th, .gd-bs-table td) { border-color: var(--border); }

/* ── "Plays" tab — tactical board glossary inside the game screen ── */
.gd-plays-intro {
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--muted, #94a3b8);
  line-height: 1.5;
}
.gd-plays-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gd-plays-pill {
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: transparent;
  color: var(--text, #e8ecf3);
  cursor: pointer;
}
.gd-plays-pill.active {
  background: var(--accent1, #1d428a);
  border-color: var(--accent1, #1d428a);
  color: var(--accent-fg, #fff);
}

/* ── Shot-map replay controls ──────────────────────────────────────────────
   Steps through the filtered shots in the real order they were taken. The
   sequence is genuine chronology from the play-by-play feed, not inference. */
.sm-replay-bar {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border, rgba(255,255,255,.12));
}
.sm-rp-note {
  font-size: .76rem;
  color: var(--muted, #94a3b8);
  margin-inline-start: 10px;
}
.sm-rp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.sm-rp-btn {
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: transparent;
  color: var(--text, #e8ecf3);
  cursor: pointer;
  flex: 0 0 auto;
}
.sm-rp-btn:disabled { opacity: .35; cursor: default; }
.sm-rp-exit { margin-inline-start: auto; }
.sm-rp-scrub { flex: 1 1 auto; min-width: 60px; }
.sm-rp-caption {
  margin-top: 8px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text, #e8ecf3);
}
.sm-rp-when { color: var(--muted, #94a3b8); font-size: .8rem; }
.sm-rp-made { color: #22c55e; }
.sm-rp-miss { color: #ef6b5b; }
.sm-rp-who  { font-weight: 700; }

/* League-tagged play context (EuroLeague only — see _smContextSummary) */
.sm-context {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  font-size: .84rem;
}
.sm-ctx-item b { font-size: 1.05rem; color: var(--accent-ink, #5b8def); }
.sm-ctx-src {
  margin-inline-start: auto;
  font-size: .7rem;
  color: var(--muted, #94a3b8);
  font-style: italic;
}
.sm-rp-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.sm-rp-tag {
  font-size: .7rem;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(91,141,239,.18);
  color: var(--accent-ink, #5b8def);
  white-space: nowrap;
}

/* ── Game Story — how a finished game was decided ─────────────────────────
   Sits between the header and the player cards. Reads as one quiet panel
   rather than a set of stat boxes: the summary is prose, and the chart is
   there to be glanced at, not measured against gridlines. */
.gd-story {
  margin: 14px 16px 4px;
  padding: 14px 16px 12px;
  background: var(--bg-card2, rgba(0,0,0,.03));
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
}

.gd-story-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  text-align: center;
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  color: var(--muted);
}

.gd-story-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gd-story-icon { font-size: 1rem; }
.gd-story-title {
  margin: 0;
  font-family: "Barlow Condensed", "Heebo", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #111);
}

/* Full width, fixed height — the shape of the game is the point, not exact
   values, which the quarter table underneath gives precisely. */
.gd-story-chart {
  display: block;
  width: 100%;
  /* The drawing code reads this height. It used to draw at 168 into a box
     styled 150, so every label and every peak was squashed by a tenth. */
  height: 180px;
  margin-bottom: 10px;
}

.gd-story-line {
  margin: 0 0 6px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text, #111);
}
.gd-story-line:last-child { margin-bottom: 0; }

/* Quarter table: the reader's way to check the narrative against the numbers,
   so it stays dense and quiet rather than competing with the prose. */
.gd-story-q {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.gd-story-q th {
  padding: 4px 6px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.gd-story-q td {
  padding: 5px 6px;
  text-align: center;
  color: var(--text, #111);
}
.gd-story-q-team {
  text-align: start !important;
  font-weight: 700;
  white-space: nowrap;
}
.gd-story-q-total { font-weight: 800; }

/* ── Question to the reader ──────────────────────────────────────────────────
   Lifted out of the narrative body: it's the one part of the report addressed
   to the reader rather than about the game, and it now leads somewhere. */
.gd-crowd-q {
  margin: .9rem 0 .2rem;
  padding: .8rem .9rem;
  border-radius: 12px;
  background: var(--accent-soft, rgba(26, 58, 107, .07));
  border: 1px solid var(--border, rgba(0, 0, 0, .07));
}
.gd-crowd-q-text {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-primary, #111);
  margin-bottom: .65rem;
}
.gd-crowd-q-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: .42rem .95rem;
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent-fg, #fff);
  background: var(--accent, #1a3a6b);
  transition: transform .12s, opacity .12s;
}
.gd-crowd-q-btn:hover  { opacity: .9; }
.gd-crowd-q-btn:active { transform: scale(.97); }

/* ── Story placeholder ───────────────────────────────────────────────────────
   The panel's data comes from the league's own feeds and takes a few seconds.
   It sits above the analysis, so arriving late used to shove the page down
   mid-read. The placeholder holds the slot from the first frame. */
.gd-story-skeleton { padding: .2rem 0 .4rem; }
.gd-story-skeleton > div {
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--bg-elevated, rgba(0,0,0,.05)) 25%,
    var(--bg-base, rgba(0,0,0,.09)) 37%,
    var(--bg-elevated, rgba(0,0,0,.05)) 63%);
  background-size: 400% 100%;
  animation: gd-sk 1.4s ease-in-out infinite;
}
.gd-story-skeleton .sk-title { height: 18px; width: 42%; margin: 0 0 .85rem; }
.gd-story-skeleton .sk-chart { height: 234px; margin-bottom: 1.1rem; }
.gd-story-skeleton .sk-line  { height: 13px; margin-bottom: .7rem; }
.gd-story-skeleton .sk-line.short { width: 68%; }
.gd-story-skeleton .sk-table { height: 118px; margin-top: 1rem; }
@keyframes gd-sk {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-story-skeleton > div { animation: none; }
}

/* Content fades into the slot the placeholder was holding. */
.gd-story-in { animation: gd-story-fade .28s ease-out; }
@keyframes gd-story-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reading the chart ───────────────────────────────────────────────────────
   The chart used to be a line crossing a rule with nothing saying whose side
   was whose, no scale, and no way to ask about a specific minute. */
.gd-story-key {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  margin: 0 0 .5rem;
  font-size: .76rem;
  color: var(--text-primary, #111);
}
.gd-story-key-item { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.gd-story-key-item em { font-style: normal; font-weight: 400; color: var(--text-secondary, #777); }
.gd-key-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.gd-key-swatch.home { background: #1d428a; }
.gd-key-swatch.away { background: #c8102e; }

.gd-story-readout {
  font-size: .78rem;
  color: var(--text-secondary, #777);
  margin-bottom: .3rem;
  min-height: 1.15rem;
}
.gd-story-readout.live { color: var(--text-primary, #111); }
.gd-story-readout b { font-weight: 700; }

.gd-story-chart { touch-action: none; cursor: crosshair; }

.gd-story-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin: .35rem 0 .2rem;
  font-size: .7rem;
  color: var(--text-secondary, #888);
}
.gd-story-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.gd-lg-band {
  width: 14px; height: 9px; border-radius: 2px;
  background: rgba(200, 16, 46, .16);
}
.gd-lg-dash {
  width: 14px; height: 0; border-top: 1px dashed var(--text-secondary, #888);
}
.gd-lg-swap {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-surface, #fff);
  border: 1.5px solid var(--text-secondary, #888);
}

/* ── The decisive run, on the floor ──────────────────────────────────────────
   The court is the shot map's, so a shot sits in the same place on both. */
.gd-run-board {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
}
.gd-run-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.gd-run-title { font-size: .92rem; font-weight: 700; margin: 0; color: var(--text-primary, #111); }
.gd-run-court { max-width: 520px; margin: 0 auto; }
.gd-run-court svg { width: 100%; height: auto; display: block; }

.gd-run-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: .5rem 0 .6rem;
}
.gd-run-btn, .gd-run-play {
  border: 1px solid var(--border, rgba(0,0,0,.12));
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #111);
  border-radius: 8px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .7rem;
  cursor: pointer;
}
.gd-run-btn { font-size: 1rem; line-height: 1; padding: .3rem .6rem; }
.gd-run-btn:hover, .gd-run-play:hover { background: var(--bg-base, #f2f2f2); }
.gd-run-counter { font-size: .74rem; color: var(--text-secondary, #888); min-width: 54px; text-align: center; }

.gd-run-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(0,0,0,.07));
  border-radius: 10px;
}
.gd-run-ev {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .34rem .6rem;
  font-size: .78rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.05));
}
.gd-run-ev:last-child { border-bottom: none; }
.gd-run-ev.current { background: rgba(200,16,46,.08); font-weight: 600; }
.gd-run-clock { font-variant-numeric: tabular-nums; color: var(--text-secondary, #888); min-width: 42px; }
.gd-run-what  { color: var(--text-primary, #111); min-width: 92px; }
.gd-run-who   { color: var(--text-secondary, #666); flex: 1; }
.gd-run-score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary, #111); }

/* Caption + team column for the run board (see _runBoardDraw). */
.gd-run-note {
  font-size: .74rem;
  color: var(--text-secondary, #888);
  margin: 0 0 .5rem;
}
.gd-run-caption {
  text-align: center;
  font-size: .82rem;
  color: var(--text-primary, #111);
  min-height: 1.2rem;
  margin: .45rem 0 .1rem;
}
.gd-run-cap-clock {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #888);
  margin-inline-end: .4rem;
}
.gd-run-cap-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.gd-run-team {
  font-size: .72rem;
  color: var(--text-secondary, #777);
  min-width: 68px;
}
/* The running team's plays carry a faint edge, so a glance shows whose run it
   was without reading every row. */
.gd-run-ev--run { border-inline-start: 3px solid rgba(200,16,46,.45); }
.gd-run-ev:focus-visible { outline: 2px solid var(--accent1, #1d428a); outline-offset: -2px; }

/* A play is one line. Checked at 375px: the clock, the score and the club name
   were each wrapping mid-value ("54-" / "53"), which turned a 26-play feed into
   a wall and made the score unreadable. */
.gd-run-clock, .gd-run-score, .gd-run-team { white-space: nowrap; }
.gd-run-who, .gd-run-what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 460px) {
  /* The club column goes: the coloured edge on the running team's plays
     already says whose run it is, and the name costs a third of the row. */
  .gd-run-team { display: none; }
  .gd-run-ev { gap: .4rem; padding: .32rem .5rem; font-size: .75rem; }
  .gd-run-what { min-width: 78px; }
  .gd-run-feed { max-height: 168px; }
  .gd-run-caption { font-size: .78rem; }
}

/* ── The tactical board's own screen ─────────────────────────────────────────
   The game drawer was already long enough that the board sat below three other
   sections. This is a layer of its own: it scrolls independently and is sized
   in viewport units, so nothing runs off the frame on a phone or a desktop. */
.gd-run-teaser { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border, rgba(0,0,0,.08)); }
.gd-run-built { font-size: .8rem; color: var(--text-secondary, #777); margin: .1rem 0 .6rem; }
.gd-run-open {
  border: 1px solid var(--border, rgba(0,0,0,.14));
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #111);
  border-radius: 10px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem .9rem;
  cursor: pointer;
}
.gd-run-open:hover { background: var(--bg-base, #f2f2f2); }

body.rb-open { overflow: hidden; }
.rb-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--bg-base, #f5f5f7);
  overscroll-behavior: contain;
}
.rb-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: max(.7rem, env(safe-area-inset-top)) .9rem .7rem;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--bg-surface, #fff);
  flex-shrink: 0;
}
.rb-title {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #111);
  /* Two lines rather than an ellipsis: the title carries the run, the team and
     the quarter, and cutting it at "ברבע ה…" loses the part that matters. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.rb-close {
  border: none;
  background: var(--bg-base, #eee);
  color: var(--text-primary, #111);
  border-radius: 8px;
  width: 32px; height: 32px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
/* The board, its controls and the caption stay put; only the play list scrolls.
   With the whole body scrolling, every played move scrolled the list into view
   and dragged the court off the top of the screen — reported live 2026-09-24
   ("the screen goes down and I can't see the board in action"). */
.rb-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: .8rem .9rem calc(1.2rem + env(safe-area-inset-bottom));
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
/* The court is capped by BOTH width and height: on a short laptop window a
   width-only cap pushed the controls and the feed below the fold. */
.rb-body .gd-run-court { max-width: min(560px, 100%); max-height: 46vh; }
.rb-body .gd-run-court svg { max-height: 46vh; }

.rb-players {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.rb-chip {
  border: 1px solid var(--border, rgba(0,0,0,.12));
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #111);
  border-radius: 999px;
  font-family: inherit;
  font-size: .74rem;
  padding: .28rem .7rem;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.rb-chip.active { background: #c8102e; border-color: #c8102e; color: #fff; font-weight: 700; }
.rb-body .gd-run-feed { max-height: none; flex: 1; min-height: 96px; overflow-y: auto; }
.rb-body .gd-run-court, .rb-body .rb-players, .rb-body .gd-run-caption, .rb-body .gd-run-controls { flex-shrink: 0; }


/* Same reasoning as the game card and the team profile: on the EuroLeague and
   National-Teams palettes the drawer header sits on #0b0907, and a near-black
   badge has nothing to separate it. See home.css .team-logo for the measured
   share of each crest that disappears. */
html[data-theme="dark"] body[data-league="EuroLeague"] .gd-club-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .gd-club-logo {
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
}

/* #gd-logo-away / #gd-logo-home are <img> elements in index.html that no
   longer load anything — game_detail.js paints the club colour on them and
   drops the src. Kept as <img> so every existing layout rule still matches;
   these three lines make one render as a disc. */
.gd-club-logo {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--crest-ring);
  box-sizing: border-box;
}

/* The back arrow points toward the screen edge it leaves by: right in Hebrew, left in English. */
html[dir="rtl"] .gd-back-btn { transform: scaleX(-1); }