.league-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(33px, 5.8vw, 72px) 0;
  color: var(--cream);
  background: var(--ink);
}
.league-header::after {
  position: absolute;
  z-index: -1;
  right: var(--pad);
  bottom: 0;
  width: min(42vw, 360px);
  aspect-ratio: 1.3;
  background: url('mark-cream.svg') center / contain no-repeat;
  content: '';
  opacity: .14;
}
.league-header .kicker { margin-bottom: 13px; }
.league-header h1 {
  max-width: 14ch;
  font-size: clamp(40px, 7vw, 89px);
  font-weight: 900;
  letter-spacing: -.065em;
}
.league-header .hero-intro { margin-top: 12px; }
.league-header .hero-actions { margin-top: 17px; }
.league-content { padding-block: clamp(25px, 4.8vw, 62px); }
.league-data-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 11px; color: var(--muted); }
.league-data-state p { font-size: 14px; }
.league-data-state:not([data-ready]) {
  align-items: start;
  flex-direction: column;
  min-height: 100px;
  background: #fff7eb;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  padding: 22px;
}
.league-data-state:not([data-ready]) p { color: var(--text); }
.league-data-state button { min-height: 40px; }
.league-season-info { margin: 12px 0 0; border-top: 1px solid var(--stroke); padding-top: 12px; }
.league-season-info dl { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 7px; margin: 0; }
.league-season-info dt { font-size: 11px; font-weight: 800; color: var(--muted); }
.league-season-info dd { margin: 0; font-size: 14px; }
.league-season-info p { margin-top: 8px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.league-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 0 22px;
}
.league-controls label { min-width: 0; font-weight: 800; font-size: 12px; }
.league-controls select {
  width: 100%;
  min-height: 44px;
  display: block;
  margin-top: 4px;
  padding: 7px 9px;
  background: #fff8ee;
  border: 1px solid #c9b9c6;
  border-radius: 5px;
  font-size: 16px;
}
.league-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
}
.league-panel-grid > * { min-width: 0; }
.league-panel .column-title { align-items: baseline; flex-wrap: wrap; }
.league-content h2 { font-size: clamp(23px, 3vw, 30px); font-weight: 900; letter-spacing: -.04em; }
.league-empty { color: var(--muted); font-size: 14px; }
.league-fixture-link { display: block; border-radius: 5px; padding: 11px 4px 8px; }
.league-fixture-link:hover { background: #f4e6dc; }
.league-fixture-link .fixture-meta { gap: 7px; flex-wrap: wrap; line-height: 1.45; }
.league-fixture-link .fixture-body { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); font-size: 15px; }
.league-fixture-link .fixture-body strong { overflow-wrap: anywhere; }
.league-fixture-link .fixture-meta span:last-child { margin-left: auto; }
.league-fixture-link .text-link { margin-top: 6px; min-height: 22px; }
.league-table-wrap { overflow-x: auto; }
.league-standing.league-panel :is(th,td) { padding-inline: 5px; }
.league-standing.league-panel tbody th { white-space: normal; min-width: 68px; overflow-wrap: anywhere; }
.league-side > section + section { margin-top: 14px; }
.league-team-list { display: flex; list-style: none; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.league-team-list li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.league-time-note { margin-top: 15px; color: var(--muted); font-size: 12px; }
.league-recap { margin: 17px 0 25px; padding: clamp(16px, 4vw, 32px); }
.league-recap .text-link { min-height: 44px; }
.league-recap .column-title { margin-top: 4px; }
.league-recap-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 13px; text-align: center; margin-block: 18px; }
.league-recap-score strong:not(.fixture-score) { overflow-wrap: anywhere; font-size: clamp(15px, 2.7vw, 24px); }
.league-recap-score .fixture-score { font-size: clamp(27px, 6vw, 64px); line-height: 1; }
.league-recap-score .is-winner { color: #7f4239; }
.league-recap dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 13px; margin: 14px 0; }
.league-recap dl div { min-width: 0; }
.league-recap dt { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.league-recap dd { overflow-wrap: anywhere; margin: 1px 0 0; font-size: 14px; font-weight: 700; }
.league-gates { margin-top: 22px; }
.league-gates h3 { font-size: 19px; margin-bottom: 11px; }
.league-gates ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.league-gates li:last-child { border-color: #887094; }
.league-gates li strong { font-size: clamp(15px, 4vw, 32px); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.league-gates li span { margin-top: 4px; }
.league-gates li small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.league-share-result { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.league-share-result input { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--stroke); border-radius: 4px; padding: 6px; background: #fffdf8; font-size: 16px; }
.league-share { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.league-recap h2:focus { outline: none; }
@media (max-width: 740px) {
  .league-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-panel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 365px) {
  .league-recap-score { gap: 6px; }
  .league-recap .button { white-space: normal; }
  .league-standing.league-panel :is(th,td) { padding-inline: 3px; }
}