/* P53 league competition surfaces: Standings, Schedule, and The Game Book.
   Broadcast-board composition on the P68 neutral base: strong typography,
   team marks and team colors as accents, no full-page team fields. */

/* ---------------------------------------------------------------- */
/* Shared toolbar / segmented controls                              */
/* ---------------------------------------------------------------- */

.lg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pd-space-5);
  margin-bottom: var(--pd-space-5);
}

.lg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-3);
}

.lg-segmented {
  display: inline-flex;
  padding: 3px;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface-base);
}

.lg-segmented button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--pd-text-secondary);
  font: inherit;
  font-size: var(--pd-text-sm);
  font-weight: 700;
  padding: 0.42rem 0.95rem;
  border-radius: var(--pd-radius-pill);
  cursor: pointer;
}

.lg-segmented button.is-active {
  background: var(--pd-gray-900);
  color: var(--pd-gray-50);
}

:root[data-theme="dark"] .lg-segmented button.is-active {
  background: var(--pd-gray-100);
  color: var(--pd-gray-900);
}

.lg-direction {
  appearance: none;
  border: var(--pd-border-width) solid var(--pd-border);
  background: var(--pd-surface-base);
  color: var(--pd-text-primary);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--pd-radius-md);
  font-size: var(--pd-text-md);
  font-weight: 800;
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Standings broadcast board                                        */
/* ---------------------------------------------------------------- */

.lg-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-space-5);
}

.lg-boards.is-league {
  grid-template-columns: minmax(0, 1fr);
}

.lg-board {
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
}

.lg-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pd-space-4);
  padding: var(--pd-space-4) var(--pd-space-5);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
  background: var(--pd-surface-elevated);
}

.lg-board-head h3 {
  margin: 0;
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lg-board-head span {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.lg-board-rows {
  display: flex;
  flex-direction: column;
}

.lg-stand-row {
  display: grid;
  grid-template-columns: 2.1rem 2.5rem minmax(0, 1fr) 4.6rem 3.6rem 3.6rem 3.6rem;
  align-items: center;
  gap: var(--pd-space-3);
  padding: 0.55rem var(--pd-space-5);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
  color: var(--pd-text-primary);
  text-decoration: none;
}

.lg-stand-row:last-child { border-bottom: 0; }
.lg-stand-row:hover { background: var(--pd-surface-interactive); }

.lg-rank {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-md);
  font-weight: 800;
  color: var(--pd-text-secondary);
  text-align: center;
}

.lg-stand-row .team-mark { width: 2.1rem; height: 2.1rem; }

.lg-team {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lg-team strong {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-md);
  letter-spacing: 0.03em;
}

.lg-team small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-record,
.lg-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.lg-record strong,
.lg-stat strong {
  font-family: var(--pd-font-mono);
  font-size: var(--pd-text-md);
  font-weight: 700;
}

.lg-record small,
.lg-stat small {
  color: var(--pd-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.lg-diff.pos strong { color: #1c7a4a; }
.lg-diff.neg strong { color: #b02a37; }
:root[data-theme="dark"] .lg-diff.pos strong { color: #6ed49d; }
:root[data-theme="dark"] .lg-diff.neg strong { color: #ff9ba4; }

.lg-stand-row.is-cpu .lg-team small,
.lg-stand-row.is-open .lg-team small { color: var(--pd-text-secondary); font-style: italic; }

.lg-boards.is-league .lg-stand-row {
  grid-template-columns: 2.4rem 2.6rem minmax(0, 1fr) minmax(7rem, 12rem) 3.6rem 3.6rem 3.6rem;
}

/* ---------------------------------------------------------------- */
/* Schedule broadcast board                                         */
/* ---------------------------------------------------------------- */

.lg-weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-4);
  margin-bottom: var(--pd-space-4);
}

.lg-weekstep {
  appearance: none;
  border: var(--pd-border-width) solid var(--pd-border);
  background: var(--pd-surface-base);
  color: var(--pd-text-primary);
  font: inherit;
  font-size: var(--pd-text-sm);
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  border-radius: var(--pd-radius-md);
  cursor: pointer;
  white-space: nowrap;
}

.lg-weekstep:disabled { opacity: 0.45; cursor: default; }
.lg-weekstep:not(:disabled):hover { background: var(--pd-surface-interactive); }

.lg-weekcurrent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lg-weekcurrent small {
  color: var(--pd-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.lg-weekcurrent strong {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-xl);
  letter-spacing: 0.04em;
}

.lg-schedule {
  display: flex;
  flex-direction: column;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
}

.lg-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--pd-space-4);
  padding: 0.7rem var(--pd-space-5);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
  color: var(--pd-text-primary);
  text-decoration: none;
}

.lg-game:last-child { border-bottom: 0; }
.lg-game:hover { background: var(--pd-surface-interactive); }
.lg-game.is-final .lg-game-side.is-winner strong { color: var(--pd-text-primary); }
.lg-game.is-final .lg-game-side:not(.is-winner) { opacity: 0.72; }

.lg-game-side {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: var(--pd-space-4);
  min-width: 0;
}

.lg-game-side.is-home { grid-template-columns: 2.6rem minmax(0, 1fr) 2.3rem; }
.lg-game-side .team-mark { width: 2rem; height: 2rem; }

.lg-game-side > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lg-game-side strong {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-lg);
  letter-spacing: 0.04em;
}

.lg-game-side small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-game-side.is-home { text-align: right; }
.lg-game-side.is-home > span { align-items: flex-end; }

.lg-game-score {
  font-family: var(--pd-font-mono);
  font-size: var(--pd-text-xl);
  font-weight: 800;
  min-height: 1.4em;
}

.lg-game-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lg-game-mid b {
  font-size: var(--pd-text-xs);
  font-weight: 800;
  letter-spacing: var(--pd-tracking-label);
  padding: 0.2rem 0.6rem;
  border-radius: var(--pd-radius-pill);
  white-space: nowrap;
}

.lg-game-final { background: var(--pd-status-final-bg); color: var(--pd-status-final-text); }
.lg-game-live { background: var(--pd-status-live-bg); color: var(--pd-status-live-text); }
.lg-game-sched { background: var(--pd-status-upcoming-bg); color: var(--pd-status-upcoming-text); }

.lg-game-mid small {
  color: var(--pd-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.lg-schedule.is-archive .lg-game-mid small { display: none; }

/* ---------------------------------------------------------------- */
/* The Game Book                                                    */
/* ---------------------------------------------------------------- */

.game-book-page {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
}

.gb-hero {
  position: relative;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  box-shadow: var(--pd-shadow-md);
  overflow: hidden;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .gb-hero {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--away-primary, #333) 12%, transparent), transparent 55%),
      linear-gradient(225deg, color-mix(in srgb, var(--home-primary, #333) 12%, transparent), transparent 55%),
      var(--pd-surface-base);
  }
}

.gb-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-4);
  padding: var(--pd-space-4) var(--pd-space-5);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
}

.gb-state {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gb-state b { padding: 0.2rem 0.6rem; border-radius: var(--pd-radius-pill); margin-left: 0.35rem; }
.gb-state-final { background: var(--pd-status-final-bg); color: var(--pd-status-final-text); }
.gb-state-live { background: var(--pd-status-live-bg); color: var(--pd-status-live-text); }
.gb-state-scheduled { background: var(--pd-status-upcoming-bg); color: var(--pd-status-upcoming-text); }

.gb-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pd-space-5);
  padding: var(--pd-space-6);
}

.gb-team {
  display: flex;
  align-items: center;
  gap: var(--pd-space-4);
  min-width: 0;
  color: var(--pd-text-primary);
  text-decoration: none;
}

.gb-team.is-home { flex-direction: row-reverse; text-align: right; }
.gb-team .team-mark { width: 4.4rem; height: 4.4rem; flex-shrink: 0; }

.gb-team > span { display: flex; flex-direction: column; min-width: 0; }
.gb-team.is-home > span { align-items: flex-end; }

.gb-team small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.gb-team strong {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-xl);
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.gb-team em {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-sm);
  font-style: normal;
}

.gb-team.is-winner strong { color: var(--pd-accent-strong); }

.gb-score {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: var(--pd-space-4);
}

.gb-score > span {
  font-family: var(--pd-font-mono);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
}

.gb-score > span.is-winner { color: var(--pd-text-primary); }
.gb-score > span:not(.is-winner) { color: var(--pd-text-secondary); }

.gb-score > b {
  font-size: var(--pd-text-xs);
  font-weight: 800;
  letter-spacing: var(--pd-tracking-label);
  padding: 0.25rem 0.65rem;
  border-radius: var(--pd-radius-pill);
  background: var(--pd-status-final-bg);
  color: var(--pd-status-final-text);
  white-space: nowrap;
}

.gb-score.is-preview { grid-template-columns: auto; }
.gb-score .gb-vs {
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-2xl);
  color: var(--pd-text-secondary);
}

.gb-score.is-preview em {
  font-style: normal;
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-sm);
  text-align: center;
}

.gb-disposition-note {
  margin: 0;
  padding: 0.65rem var(--pd-space-5) var(--pd-space-5);
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-sm);
}

.gb-tabs {
  display: flex;
  gap: var(--pd-space-2);
  border-bottom: var(--pd-border-width) solid var(--pd-border);
}

.gb-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--pd-text-secondary);
  font: inherit;
  font-size: var(--pd-text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.7rem 1rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.gb-tab.is-active {
  color: var(--pd-text-primary);
  border-bottom-color: var(--pd-accent);
}

.gb-panel {
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface-base);
  padding: var(--pd-space-5);
  box-shadow: var(--pd-shadow-sm);
}

.gb-panel .section-head { margin-bottom: var(--pd-space-4); }

.gb-glance {
  display: flex;
  flex-direction: column;
}

.gb-glance-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pd-space-4);
  padding: 0.55rem 0;
  border-bottom: var(--pd-border-width) solid var(--pd-border);
}

.gb-glance-row:last-child { border-bottom: 0; }

.gb-glance-row strong {
  font-family: var(--pd-font-mono);
  font-size: var(--pd-text-md);
  font-weight: 700;
}

.gb-glance-row strong:first-child { text-align: left; }
.gb-glance-row strong:last-child { text-align: right; }
.gb-glance-row strong.is-better { color: var(--pd-accent-strong); }

.gb-glance-row span {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
  text-align: center;
}

.gb-glance-teams {
  display: flex;
  justify-content: space-between;
  margin: var(--pd-space-3) 0 0;
}

.gb-glance-teams span {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  font-family: var(--pd-font-display);
  font-weight: 800;
}

.gb-stars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--pd-space-4);
}

.gb-star {
  display: flex;
  align-items: center;
  gap: var(--pd-space-4);
  padding: var(--pd-space-4);
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  border-left: 4px solid var(--home-primary, var(--pd-border-strong));
  background: var(--pd-surface-elevated);
  color: var(--pd-text-primary);
  text-decoration: none;
}

.gb-star:hover { border-color: var(--pd-border-strong); }

.gb-star > span { display: flex; flex-direction: column; min-width: 0; }

.gb-star small {
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 700;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.gb-star strong { font-size: var(--pd-text-md); }
.gb-star em { color: var(--pd-text-secondary); font-size: var(--pd-text-sm); font-style: normal; }

.gb-team-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--pd-space-5);
}

.gb-team-stats > h2 {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  margin: 0 0 var(--pd-space-4);
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-xl);
  letter-spacing: 0.03em;
}

.gb-stat-group { margin-bottom: var(--pd-space-5); }
.gb-stat-group:last-child { margin-bottom: 0; }

.gb-stat-group h3 {
  margin: 0 0 var(--pd-space-2);
  color: var(--pd-text-secondary);
  font-size: var(--pd-text-xs);
  font-weight: 800;
  letter-spacing: var(--pd-tracking-label);
  text-transform: uppercase;
}

.gb-stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pd-text-sm);
}

.gb-stat-table th {
  padding: 0.35rem 0.45rem;
  border-bottom: var(--pd-border-width) solid var(--pd-border);
  color: var(--pd-text-secondary);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: var(--pd-tracking-label);
  text-align: right;
  text-transform: uppercase;
}

.gb-stat-table td {
  padding: 0.4rem 0.45rem;
  border-bottom: var(--pd-border-width) solid var(--pd-border);
  text-align: right;
  font-family: var(--pd-font-mono);
}

.gb-stat-table tr:last-child td { border-bottom: 0; }
.gb-stat-table .gb-player-col { text-align: left; font-family: var(--pd-font-body); min-width: 8.5rem; }

.gb-stat-table .gb-player-col a {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  color: var(--pd-text-primary);
  text-decoration: none;
}

.gb-stat-table .gb-player-col span { display: flex; flex-direction: column; min-width: 0; }
.gb-stat-table .gb-player-col small { color: var(--pd-text-secondary); font-size: 0.65rem; }

.gb-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
}

.gb-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--pd-space-5);
  align-items: center;
}

.gb-highlight-media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pd-space-4);
  min-height: 12rem;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background: var(--pd-surface-premium);
  overflow: hidden;
}

.gb-highlight-media video { width: 100%; display: block; }

.gb-highlight-copy h3 {
  margin: var(--pd-space-2) 0 var(--pd-space-3);
  font-family: var(--pd-font-display);
  font-size: var(--pd-text-lg);
}

.gb-highlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-3);
}

.gb-highlight-tags a {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  border: var(--pd-border-width) solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface-elevated);
  color: var(--pd-text-primary);
  font-size: var(--pd-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.gb-source { margin-top: var(--pd-space-2); }

/* ---------------------------------------------------------------- */
/* Responsive                                                       */
/* ---------------------------------------------------------------- */

@media (max-width: 960px) {
  .lg-boards { grid-template-columns: minmax(0, 1fr); }
  .gb-hero-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--pd-space-4); padding: var(--pd-space-5) var(--pd-space-4); }
  .gb-team { flex-direction: column; text-align: center; gap: var(--pd-space-3); }
  .gb-team.is-home { flex-direction: column; text-align: center; }
  .gb-team > span, .gb-team.is-home > span { align-items: center; }
  .gb-team .team-mark { width: 3.4rem; height: 3.4rem; }
  .gb-highlight { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .lg-toolbar { align-items: flex-start; }
  .lg-controls { width: 100%; }
  .lg-segmented { width: 100%; justify-content: space-between; }
  .lg-segmented button { flex: 1; padding: 0.45rem 0.4rem; }
  .lg-stand-row {
    grid-template-columns: 1.7rem 2.2rem minmax(0, 1fr) 3.9rem 3.4rem;
    gap: var(--pd-space-2);
    padding: 0.55rem var(--pd-space-4);
  }
  .lg-stand-row .lg-secondary { display: none; }
  .lg-stand-row .team-mark { width: 1.9rem; height: 1.9rem; }
  .lg-boards.is-league .lg-stand-row { grid-template-columns: 2rem 2.3rem minmax(0, 1fr) 3.9rem 3.4rem; }
  .lg-weeknav { flex-wrap: wrap; justify-content: center; }
  .lg-weekstep { padding: 0.5rem 0.6rem; font-size: var(--pd-text-xs); }
  .lg-weekcurrent { order: -1; width: 100%; }
  .lg-game {
    grid-template-columns: minmax(0, 1fr) 4.6rem minmax(0, 1fr);
    gap: var(--pd-space-2);
    padding: 0.6rem var(--pd-space-4);
  }
  .lg-game-side { grid-template-columns: 1.9rem minmax(0, 1fr) 2rem; gap: var(--pd-space-2); }
  .lg-game-side.is-home { grid-template-columns: 2rem minmax(0, 1fr) 1.9rem; }
  .lg-game-side .team-mark { width: 1.7rem; height: 1.7rem; }
  .lg-game-side strong { font-size: var(--pd-text-md); }
  .lg-game-side small { font-size: 0.68rem; }
  .lg-game-score { font-size: var(--pd-text-lg); }
  .gb-hero-top { flex-wrap: wrap; gap: var(--pd-space-2); }
  .gb-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-4); }
  .gb-score { justify-content: center; }
  .gb-team { flex-direction: row; text-align: left; }
  .gb-team.is-home { flex-direction: row; text-align: right; }
  .gb-team > span { align-items: flex-start; }
  .gb-team.is-home > span { align-items: flex-end; }
  .gb-score > span { font-size: 3rem; }
  .gb-stat-table th, .gb-stat-table td { padding: 0.35rem 0.3rem; font-size: 0.78rem; }
  .gb-glance-row span { font-size: 0.62rem; }
  .gb-glance-row strong { font-size: var(--pd-text-sm); }
  .gb-team-stats-grid { grid-template-columns: minmax(0, 1fr); }
}