/* =========================================================
   2026 ETGL Match Play
   A responsive, March-Madness-style regional bracket.
   Loaded after the site-wide Augusta theme.
   ========================================================= */

/* ---- Tournament hero ---- */
.match-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 0 54px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(207, 232, 216, 0.2), transparent 32%),
    linear-gradient(135deg, #0f2f21 0%, #15543a 58%, #123c2b 100%) !important;
  border-bottom: 0;
}
.match-hero::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}
.match-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -210px;
  bottom: -360px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(255, 255, 255, 0.025),
    0 0 0 92px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}
.match-hero .page-hero__inner {
  position: relative;
  z-index: 1;
}
.match-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 64px;
  align-items: end;
}
.match-hero .crumbs,
.match-hero .crumbs a {
  color: rgba(255, 255, 255, 0.68);
}
.match-hero .crumbs a:hover { color: #fff; }
.match-hero .crumbs__sep { color: rgba(255, 255, 255, 0.25); }
.match-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #cfe8d8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.match-hero__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: #bc3b2e;
}
.match-hero .page-hero__title {
  max-width: 760px;
  color: #fff;
  font-size: clamp(48px, 6.5vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.match-hero .page-hero__title em {
  display: block;
  margin-top: 8px;
  color: #cfe8d8;
  font-size: 0.58em;
  font-weight: 500;
}
.match-hero .page-hero__lede {
  max-width: 650px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
}
.match-hero__status {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(6, 28, 18, 0.28);
  box-shadow: 0 24px 70px rgba(5, 24, 16, 0.18);
  backdrop-filter: blur(10px);
}
.match-hero__status-label {
  color: #cfe8d8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.match-hero__status-main {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 9px 0 18px;
}
.match-hero__status-num {
  color: #fff;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.8;
}
.match-hero__status-copy {
  max-width: 110px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.25;
}
.match-hero__watchlist {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.match-hero__watchline {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}
.match-hero__watchline strong {
  color: #cfe8d8;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Round status + quick navigation ---- */
.tournament-strip {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.tournament-strip__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.tournament-round {
  position: relative;
  min-height: 86px;
  padding: 20px 18px 18px 30px;
  border-left: 1px solid var(--rule);
}
.tournament-round:last-child { border-right: 1px solid var(--rule); }
.tournament-round::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 14px;
  width: 7px;
  height: 7px;
  border: 2px solid #aab1aa;
  border-radius: 50%;
  background: #fff;
}
.tournament-round.is-recorded::before {
  border-color: var(--green-deep);
  background: var(--green-deep);
}
.tournament-round.is-current::before {
  border-color: var(--red);
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(188, 59, 46, 0.1);
}
.tournament-round__name {
  color: var(--green-deepest);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tournament-round__date {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.bracket-jump {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--rule);
}
.bracket-jump__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bracket-jump__inner::-webkit-scrollbar { display: none; }
.bracket-jump__label {
  flex: none;
  margin-right: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bracket-jump__link {
  flex: none;
  padding: 7px 13px;
  color: var(--green-deep);
  border: 1px solid #d7ded8;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}
.bracket-jump__link:hover {
  color: #fff;
  border-color: var(--green-deep);
  background: var(--green-deep);
}
.bracket-jump__link--final {
  color: var(--red);
  border-color: rgba(188, 59, 46, 0.28);
}

/* ---- Bracket overview ---- */
.match-play-main {
  background:
    linear-gradient(90deg, transparent 50%, rgba(21, 84, 58, 0.02) 50%),
    #f7f6f1;
  background-size: 32px 32px;
}
.bracket-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}
.bracket-intro__title {
  color: var(--green-deepest);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 650;
}
.bracket-intro__title em {
  color: var(--green-deep);
  font-weight: 500;
}
.bracket-intro__copy {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.bracket-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
  color: var(--muted);
  font-size: 11px;
}
.bracket-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.bracket-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9cec9;
}
.bracket-legend .is-winner { background: var(--green-deep); }
.bracket-legend .is-open { background: var(--red); }

/* ---- Regional bracket cards ---- */
.regions-grid {
  display: grid;
  gap: 28px;
}
.region-card {
  --region-primary: var(--green-deep);
  --region-ink: var(--green-deepest);
  --region-accent: var(--red);
  --region-pale: var(--cream-soft);
  --region-wash: rgba(21, 84, 58, 0.06);
  --region-win: rgba(21, 84, 58, 0.075);
  --region-line: rgba(21, 84, 58, 0.65);
  scroll-margin-top: 92px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--region-primary) 20%, var(--rule));
  border-top: 4px solid var(--region-primary);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 40, 25, 0.04), 0 18px 52px rgba(20, 40, 25, 0.07);
}
.region-card--cypress {
  --region-primary: #285d49;
  --region-ink: #193d31;
  --region-accent: #9a633f;
  --region-pale: #edf3ef;
  --region-wash: rgba(40, 93, 73, 0.1);
  --region-win: rgba(40, 93, 73, 0.11);
  --region-line: rgba(40, 93, 73, 0.72);
}
.region-card--pebble {
  --region-primary: #276b87;
  --region-ink: #1c4c61;
  --region-accent: #b98948;
  --region-pale: #edf6f8;
  --region-wash: rgba(39, 107, 135, 0.1);
  --region-win: rgba(39, 107, 135, 0.11);
  --region-line: rgba(39, 107, 135, 0.72);
}
.region-card--augusta {
  --region-primary: #176b3c;
  --region-ink: #104c2b;
  --region-accent: #cf4f80;
  --region-pale: #f8f0f4;
  --region-wash: rgba(23, 107, 60, 0.09);
  --region-win: rgba(23, 107, 60, 0.11);
  --region-line: rgba(23, 107, 60, 0.72);
}
.region-card--bandon {
  --region-primary: #365d70;
  --region-ink: #284859;
  --region-accent: #b67e2d;
  --region-pale: #f7f1e5;
  --region-wash: rgba(54, 93, 112, 0.1);
  --region-win: rgba(54, 93, 112, 0.11);
  --region-line: rgba(54, 93, 112, 0.72);
}
.region-card__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, var(--region-wash) 0%, rgba(255, 255, 255, 0.96) 48%, var(--region-pale) 100%);
}
.region-card__head::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -1px;
  width: 82px;
  border-bottom: 3px solid var(--region-accent);
  opacity: 0.78;
}
.region-card__index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  border-radius: 50%;
  background: var(--region-primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--region-primary) 12%, transparent);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.region-card__eyebrow {
  margin-bottom: 3px;
  color: var(--region-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.region-card__title {
  color: var(--region-ink);
  font-size: 28px;
  font-weight: 650;
}
.region-card__course-flag {
  --flag-field: var(--region-primary);
  --flag-ink: #fff;
  --flag-accent: var(--region-accent);
  --flag-light: #fff;
  --flag-pole: var(--region-ink);
  width: 82px;
  height: 56px;
  color: var(--region-primary);
  filter: drop-shadow(0 7px 8px rgba(20, 40, 25, 0.17));
  transform-origin: 11px 4px;
  transition: transform 0.2s var(--ease);
}
.region-card:hover .region-card__course-flag { transform: rotate(-1.5deg) translateY(-1px); }
.region-card__course-flag svg { display: block; width: 100%; height: 100%; overflow: visible; }
.course-flag__photo-art { pointer-events: none; }
.course-flag__pole-shadow {
  fill: none;
  stroke: rgba(10, 23, 18, 0.28);
  stroke-width: 3.4;
  stroke-linecap: round;
}
.course-flag__pole {
  fill: none;
  stroke: var(--flag-pole);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.course-flag__pole-highlight {
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 0.55;
  stroke-linecap: round;
}
.course-flag__finial {
  fill: var(--flag-pole);
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 0.55;
}
.course-flag__cup { fill: var(--flag-pole); opacity: 0.28; }
.course-flag__cloth {
  filter: drop-shadow(1.3px 1.8px 1.1px rgba(10, 28, 20, 0.22));
  transform-box: fill-box;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .region-card:hover .course-flag__cloth { animation: course-flag-flutter 0.9s ease-in-out 1; }
}
@keyframes course-flag-flutter {
  0%, 100% { transform: skewY(0) scaleX(1); }
  32% { transform: skewY(-1.4deg) scaleX(0.985); }
  68% { transform: skewY(0.8deg) scaleX(1.008); }
}
.course-flag__field {
  fill: var(--flag-field);
  stroke: var(--flag-border, transparent);
  stroke-width: 0.7;
}
.course-flag__fabric-overlay { pointer-events: none; }
.course-flag__fold-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.75;
}
.course-flag__hem {
  fill: none;
  stroke: rgba(30, 31, 27, 0.3);
  stroke-width: 0.65;
}
.course-flag__outline {
  fill: none;
  stroke: var(--flag-border, transparent);
  stroke-width: 0.9;
}
.course-flag__stitch {
  fill: none;
  stroke: rgba(255, 255, 255, 0.68);
  stroke-width: 0.38;
  stroke-dasharray: 1.1 1.25;
  stroke-linecap: round;
}
.course-flag__grommet {
  fill: #c5af78;
  stroke: #68583a;
  stroke-width: 0.35;
  filter: drop-shadow(0.3px 0.5px 0.3px rgba(0, 0, 0, 0.35));
}
.course-flag__grommet-hole { fill: #3d3a31; }
.course-flag__embroidery {
  filter: drop-shadow(0 0.55px 0.25px rgba(0, 0, 0, 0.34)) drop-shadow(0 -0.35px 0.2px rgba(255, 255, 255, 0.38));
}
.course-flag__ink { fill: var(--flag-ink); }
.course-flag__accent { fill: var(--flag-accent); }
.course-flag__light { fill: var(--flag-light); }
.course-flag__eye { fill: #0d1814; }
.course-flag__seal {
  fill: none;
  stroke: var(--flag-ink);
  stroke-width: 0.8;
}
.course-flag__marker {
  stroke: var(--flag-accent);
  stroke-width: 0.8;
  stroke-linecap: round;
}
.course-flag__small-type,
.course-flag__wordmark {
  fill: var(--flag-ink);
  font-family: var(--font-sans);
  font-weight: 800;
  text-anchor: middle;
}
.course-flag__small-type {
  font-size: 3px;
  letter-spacing: 0.08em;
}
.course-flag__wordmark {
  font-size: 3.2px;
  letter-spacing: 0.06em;
}
.course-flag__monogram {
  fill: var(--flag-ink);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -0.04em;
  text-anchor: middle;
}
.region-card__course-flag--cypress {
  --flag-field: #f8f7ef;
  --flag-ink: #176245;
  --flag-accent: #176245;
  --flag-border: #135038;
}
.region-card__course-flag--pebble {
  --flag-field: #f7f5ed;
  --flag-ink: #15533d;
  --flag-accent: #b79552;
  --flag-border: #c8c4b6;
}
.region-card__course-flag--augusta {
  --flag-field: #f1d12f;
  --flag-ink: #075c3b;
  --flag-accent: #d42b33;
  --flag-border: #bda424;
}
.region-card__course-flag--bandon {
  --flag-field: #c9473b;
  --flag-ink: #102d24;
  --flag-accent: #f0a034;
  --flag-light: #fff4df;
  --flag-border: #8d302a;
}
.region-card__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  color: var(--region-accent);
  border: 1px solid color-mix(in srgb, var(--region-accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--region-accent) 7%, #fff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.region-card__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--region-accent);
}
.region-card__scroll-note {
  display: none;
  padding: 10px 18px 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.region-card__viewport {
  overflow-x: auto;
  padding: 22px 24px 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--region-pale) 48%, #fff), #fff 34%);
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--region-primary) transparent;
  scrollbar-width: thin;
}
.region-card__viewport::-webkit-scrollbar { height: 8px; }
.region-card__viewport::-webkit-scrollbar-thumb {
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--region-primary);
}
.region-card .bracket-round__number { color: var(--region-primary); }
.region-card .bracket-player a:hover { color: var(--region-accent); }
.region-card .bracket-player.is-winner { background: var(--region-win); }
.region-card .bracket-player__mark { background: var(--region-primary); }
.region-card .bracket-match--active {
  border-color: color-mix(in srgb, var(--region-accent) 58%, transparent);
  box-shadow: inset 3px 0 0 var(--region-accent), 0 6px 18px rgba(18, 45, 30, 0.08);
}
.region-card .bracket-match--active .bracket-player__mark { background: var(--region-accent); }
.region-bracket {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  gap: 52px;
  min-width: 854px;
}
.bracket-round__head {
  min-height: 52px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
}
.bracket-round__number {
  color: var(--green-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bracket-round__title {
  margin-top: 2px;
  color: var(--green-deepest);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 650;
}
.bracket-round__deadline {
  float: right;
  margin-top: -19px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.bracket-stage {
  position: relative;
  height: 394px;
  margin-top: 16px;
}
.bracket-match {
  position: absolute;
  left: 0;
  right: 0;
  height: 82px;
  overflow: visible;
  border: 1px solid #d9ded9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(18, 45, 30, 0.06);
}
.bracket-match--active {
  border-color: rgba(188, 59, 46, 0.5);
  box-shadow: inset 3px 0 0 var(--red), 0 6px 18px rgba(18, 45, 30, 0.08);
}
.bracket-match--waiting {
  border-style: dashed;
  background: var(--cream-soft);
  box-shadow: none;
}
.bracket-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px;
  padding: 0 11px;
  color: var(--ink-soft);
  font-size: 13px;
}
.bracket-player + .bracket-player { border-top: 1px solid var(--rule-soft); }
.bracket-player:first-child { border-radius: 8px 8px 0 0; }
.bracket-player:last-child { border-radius: 0 0 8px 8px; }
.bracket-player a {
  overflow: hidden;
  color: inherit;
  font-weight: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bracket-player a:hover { color: var(--red); }
.bracket-player.is-winner {
  color: var(--green-deepest);
  background: rgba(21, 84, 58, 0.075);
  font-weight: 800;
}
.bracket-player.is-eliminated {
  color: #8b938b;
  background: #fcfcfa;
}
.bracket-player.is-bye {
  color: #899087;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bracket-player.is-path { color: var(--muted); }
.bracket-player__path {
  margin-right: 6px;
  color: var(--green-deep);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bracket-player__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  color: #fff;
  border-radius: 50%;
  background: var(--green-deep);
  font-size: 9px;
  font-weight: 800;
}
.bracket-match--active .bracket-player__mark {
  width: 7px;
  height: 7px;
  background: var(--red);
  font-size: 0;
}

/* Match positions are based on the four first-round centers. */
.bracket-round--one .bracket-match:nth-of-type(1) { top: 0; }
.bracket-round--one .bracket-match:nth-of-type(2) { top: 104px; }
.bracket-round--one .bracket-match:nth-of-type(3) { top: 208px; }
.bracket-round--one .bracket-match:nth-of-type(4) { top: 312px; }
.bracket-round--two .bracket-match:nth-of-type(1) { top: 52px; }
.bracket-round--two .bracket-match:nth-of-type(2) { top: 260px; }
.bracket-round--three .bracket-match { top: 156px; }

/* Incoming lines for rounds two and three. */
.bracket-round--two .bracket-match::before,
.bracket-round--three .bracket-match::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -27px;
  width: 26px;
  border-top: 2px solid #cfd5cf;
}
.bracket-round--two .bracket-match.is-from-complete::before,
.bracket-round--three .bracket-match.is-from-complete::before {
  border-color: rgba(21, 84, 58, 0.65);
}
.region-card .bracket-round--two .bracket-match.is-from-complete::before,
.region-card .bracket-round--three .bracket-match.is-from-complete::before {
  border-color: var(--region-line);
}

/* Outgoing pair merges. */
.bracket-merge {
  position: absolute;
  right: -27px;
  width: 27px;
  pointer-events: none;
  border-top: 2px solid #cfd5cf;
  border-right: 2px solid #cfd5cf;
  border-bottom: 2px solid #cfd5cf;
}
.bracket-merge.is-complete {
  border-color: rgba(21, 84, 58, 0.65);
}
.region-card .bracket-merge.is-complete { border-color: var(--region-line); }
.bracket-round--one .bracket-merge--top { top: 41px; height: 104px; }
.bracket-round--one .bracket-merge--bottom { top: 249px; height: 104px; }
.bracket-round--two .bracket-merge { top: 93px; height: 208px; }

/* ---- Final Four / Championship stage ---- */
.final-four {
  scroll-margin-top: 92px;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(207, 232, 216, 0.16), transparent 29%),
    linear-gradient(145deg, #13251a, #0c3524 62%, #15543a);
  box-shadow: 0 22px 65px rgba(12, 42, 27, 0.2);
}
.final-four::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 0.8px, transparent 0.8px);
  background-size: 15px 15px;
  pointer-events: none;
}
.final-four__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 34px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.final-four__eyebrow {
  color: #cfe8d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.final-four__title {
  margin-top: 5px;
  color: #fff;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 650;
}
.final-four__meta {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final-four__board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 0.85fr) minmax(220px, 1fr);
  gap: 70px;
  align-items: center;
  padding: 44px 44px 50px;
}
.semifinal {
  position: relative;
}
.semifinal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 70px;
  border-top: 1px solid rgba(207, 232, 216, 0.5);
}
.semifinal--left::after { right: -70px; }
.semifinal--right::after { left: -70px; }
.semifinal__label,
.championship__label {
  margin-bottom: 10px;
  color: #cfe8d8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.final-four .bracket-match {
  position: relative;
  height: auto;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: none;
}
.final-four .bracket-player {
  min-height: 46px;
  color: rgba(255, 255, 255, 0.76);
}
.final-four .bracket-player + .bracket-player {
  border-top-color: rgba(255, 255, 255, 0.11);
}
.final-four .bracket-player__path { color: #cfe8d8; }
.championship {
  position: relative;
  text-align: center;
}
.championship__crest {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.025);
}
.championship__crest svg { width: 48px; height: 48px; }
.championship__match {
  border-color: rgba(207, 232, 216, 0.34) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.championship__winner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
}
.championship__winner::before,
.championship__winner::after {
  content: "";
  width: 18px;
  border-top: 1px solid rgba(207, 232, 216, 0.38);
}

/* ---- Source note and Events-page feature card ---- */
.bracket-source {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 900px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.bracket-source::before,
.bracket-source::after {
  content: "";
  flex: 1;
  min-width: 24px;
  margin-top: 9px;
  border-top: 1px solid var(--rule);
}
.match-play-teaser-section {
  padding: 32px 0 0;
}
.match-play-teaser {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  padding: 28px 32px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, #102d20, #15543a);
  box-shadow: 0 16px 44px rgba(15, 50, 33, 0.15);
}
.match-play-teaser::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: 130px;
  top: -150px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.025);
}
.match-play-teaser__copy,
.match-play-teaser__cta { position: relative; z-index: 1; }
.match-play-teaser__eyebrow {
  color: #cfe8d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.match-play-teaser__title {
  margin-top: 5px;
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 650;
}
.match-play-teaser__body {
  max-width: 650px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}
.match-play-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--green-deepest);
  border-radius: 999px;
  background: #cfe8d8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.match-play-teaser__cta:hover {
  color: #fff;
  background: var(--red);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .match-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .match-hero__status { max-width: 540px; }
  .tournament-strip__inner { overflow-x: auto; }
  .tournament-round { min-width: 170px; }
  .bracket-intro { grid-template-columns: 1fr; }
  .bracket-legend { justify-content: flex-start; }
  .final-four__board { gap: 34px; padding-inline: 30px; }
  .semifinal::after { width: 34px; }
  .semifinal--left::after { right: -34px; }
  .semifinal--right::after { left: -34px; }
}

@media (max-width: 720px) {
  .match-hero { padding: 42px 0 40px; }
  .match-hero .page-hero__title { font-size: clamp(44px, 14vw, 62px); }
  .match-hero .page-hero__lede { font-size: 15px; }
  .match-hero__status { padding: 20px; }
  .match-hero__watchline { grid-template-columns: 70px 1fr; }
  .tournament-strip__inner { padding: 0 16px; }
  .bracket-jump__inner { padding-inline: 16px; }
  .region-card__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 17px 18px;
  }
  .region-card__title { font-size: 24px; }
  .region-card__course-flag { width: 66px; height: 48px; }
  .region-card__state {
    grid-column: 2 / -1;
    justify-self: start;
    margin-left: 0;
  }
  .region-card__scroll-note { display: block; }
  .region-card__viewport { padding: 16px 18px 20px; }
  .region-bracket { grid-template-columns: repeat(3, 230px); min-width: 794px; }
  .bracket-player { font-size: 12px; }
  .final-four__head {
    display: block;
    padding: 26px 24px 22px;
  }
  .final-four__meta { margin-top: 9px; }
  .final-four__board {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 24px 36px;
  }
  .semifinal::after { display: none; }
  .championship { grid-row: 3; }
  .championship__crest { width: 72px; height: 72px; }
  .match-play-teaser-section { padding-top: 24px; }
  .match-play-teaser {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .match-play-teaser__cta { justify-self: start; }
  .bracket-source { text-align: left; }
  .bracket-source::before,
  .bracket-source::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .region-card__viewport { scroll-behavior: auto; }
}