.matchplay-page,
.matchplay-page * {
  box-sizing: border-box;
}

.matchplay-page {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  width: min(1900px, 100%);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  color: #211827;
  background: #f7f3f8;
}

.matchplay-fragment-page {
  max-width: none;
}

.matchplay-fragment-page .matchplay-page {
  padding-inline: 0;
}

.matchplay-header {
  text-align: center;
  margin-bottom: 18px;
}

.matchplay-page h1 {
  margin: 0;
  color: #42104c;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 800;
  letter-spacing: 0;
}

.section-label {
  margin: 0 0 6px;
  color: #706078;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.matchplay-note {
  min-height: 20px;
  margin: 8px 0 0;
  color: #4d4053;
}

.matchplay-bracket {
  display: grid;
  grid-template-columns: minmax(var(--left-side-width, 992px), 1fr) minmax(210px, 260px) minmax(var(--right-side-width, 992px), 1fr);
  gap: 24px;
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  padding: 32px 28px;
  background: #ffffff;
  border: 1px solid #d5bddc;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(66, 16, 76, 0.08);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #8a5a94 #f4ecf6;
}

.matchplay-bracket.bracket-single {
  grid-template-columns: minmax(var(--left-side-width, 784px), max-content) minmax(210px, 260px);
  justify-content: center;
}

.matchplay-bracket.bracket-double {
  grid-template-columns: minmax(var(--double-side-width, 992px), max-content);
  grid-template-rows: auto auto auto;
  align-items: start;
  justify-content: center;
  padding-right: 28px;
  row-gap: 34px;
}

.bracket-region {
  display: grid;
  gap: 18px;
}

.bracket-double .bracket-region:first-child {
  grid-column: 1;
  grid-row: 1;
}

.bracket-double .bracket-region:last-child {
  grid-column: 1;
  grid-row: 3;
}

.bracket-label {
  margin: 0;
  color: #42104c;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.bracket-side {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: 48px;
  min-width: var(--left-side-width, 992px);
}

.bracket-right {
  min-width: var(--right-side-width, 992px);
}

.bracket-double .bracket-left,
.bracket-double .bracket-right {
  min-width: var(--double-side-width, 992px);
}

.bracket-center {
  display: grid;
  align-content: stretch;
  min-width: 210px;
  background: transparent;
}

.bracket-double .bracket-center {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  min-width: 240px;
  margin: 8px 0;
  place-items: stretch;
}

.bracket-double .bracket-center .round {
  display: grid;
  align-content: start;
  min-width: 240px;
}

.bracket-center.has-winner .round {
  width: 240px;
  min-width: 240px;
  padding: 16px;
  border: 1px solid #d5bddc;
  border-top: 5px solid #c7a847;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4ecf6 100%);
  box-shadow: 0 16px 34px rgba(66, 16, 76, 0.16);
}

.bracket-double .bracket-center .round-header {
  min-width: 170px;
  margin-bottom: 10px;
  background: #42104c;
  border-color: #5f146d;
  box-shadow: 0 4px 0 #c7a847, 0 10px 18px rgba(66, 16, 76, 0.14);
}

.bracket-double .bracket-center .round-dates {
  display: none;
}

.round {
  min-width: 160px;
  --pair-span: 100px;
}

.round-header {
  width: max-content;
  min-width: 132px;
  margin: 0 auto 24px;
  background: #5f146d;
  color: #ffffff;
  border: 1px solid #42104c;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 11px 18px;
  box-shadow: 0 4px 0 #c7a847, 0 10px 18px rgba(66, 16, 76, 0.14);
  text-transform: uppercase;
}

.round-dates {
  min-height: 18px;
  margin-top: -14px;
  color: #5a4b61;
  font-size: 12px;
  text-align: center;
}

.matches {
  display: grid;
  gap: 28px;
  padding: 28px 0;
}

.matches:empty {
  display: none;
  padding: 0;
}

.round[data-round="2"] .matches {
  padding-top: 78px;
  gap: 128px;
}

.round[data-round="3"] .matches {
  padding-top: 178px;
  gap: 328px;
}

.round[data-round="4"] .matches {
  padding-top: 378px;
  gap: 728px;
}

.round[data-round="5"] .matches,
.bracket-center .matches {
  padding-top: 778px;
}

.bracket-double .bracket-center .matches {
  padding-top: 0;
}

.round[data-round="1"] {
  --pair-span: 100px;
}

.round[data-round="2"] {
  --pair-span: 200px;
}

.round[data-round="3"] {
  --pair-span: 400px;
}

.round[data-round="4"] {
  --pair-span: 800px;
}

.match {
  min-height: 72px;
  display: grid;
  align-content: center;
  position: relative;
  filter: drop-shadow(0 5px 10px rgba(66, 16, 76, 0.12));
}

.match::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -48px;
  width: 48px;
  border-top: 3px solid #8a5a94;
}

.bracket-center .match::after {
  display: none;
}

.match.no-outgoing-connector::after {
  display: none !important;
  content: none;
  border: 0;
}

.round-semi .match::after {
  display: none !important;
  content: none;
  border: 0;
}

.round-terminal .match::after {
  display: none !important;
  content: none;
  border: 0;
}

.matchplay-bracket.bracket-single .bracket-left .round:last-child .match::after {
  display: none;
}

.matchplay-bracket.bracket-single .bracket-left .round:last-child .match:nth-child(odd):not(:last-child)::before {
  right: -24px;
}

.round:not(.round-final) .match:nth-child(odd):not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -48px;
  height: var(--pair-span);
  border-right: 3px solid #8a5a94;
  transform: translateY(0);
}

.round:not(.round-final) .match:nth-child(even)::after {
  top: calc(50% - 1px);
}

.slot,
.winner {
  min-height: 36px;
  border: 1px solid #d5bddc;
  border-left: 5px solid #5f146d;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  background: #ffffff;
  color: #211827;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.slot + .slot {
  border-top: 0;
  border-left-color: #c7a847;
}

.winner {
  font-weight: 700;
  background: #f4ecf6;
  color: #42104c;
}

.bracket-double .bracket-center .winner {
  min-height: 42px;
  border: 2px solid #c7a847;
  border-left-width: 5px;
  border-left-color: #c7a847;
  background: #5f146d;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 8px 18px rgba(66, 16, 76, 0.16);
}

.bracket-center.has-winner .winner {
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.25;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: #706078;
}

.loading-state,
.error-state {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
}

.error-state {
  color: #42104c;
}

.matchplay-mobile-summary {
  display: none;
}

@media (max-width: 1180px) {
  .matchplay-bracket {
    gap: 16px;
    padding: 12px;
  }

  .bracket-side {
    grid-auto-columns: 140px;
    gap: 30px;
  }

  .round {
    min-width: 140px;
  }

  .match::after {
    right: -30px;
    width: 30px;
  }

  .round:not(.round-final) .match:nth-child(odd):not(:last-child)::before {
    right: -30px;
  }

  .round-header,
  .round-dates,
  .slot,
  .winner {
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .matchplay-bracket {
    display: none;
  }

  .matchplay-mobile-summary {
    display: grid;
    gap: 12px;
  }

  .mobile-round {
    background: #ffffff;
    border: 1px solid #d5bddc;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(66, 16, 76, 0.07);
    overflow: hidden;
  }

  .mobile-round h2 {
    margin: 0;
    padding: 10px 12px;
    background: #5f146d;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-round p {
    margin: 0;
    padding: 8px 12px;
    background: #f4ecf6;
    border-bottom: 1px solid #d5bddc;
    color: #4d4053;
    font-size: 13px;
  }

  .mobile-match-list {
    display: grid;
  }

  .mobile-match-card {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid #efe7f2;
  }

  .mobile-match-card:last-child {
    border-bottom: 0;
  }

  .mobile-match-meta {
    color: #706078;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-match-players {
    display: grid;
    gap: 4px;
    color: #211827;
    font-size: 15px;
  }

  .mobile-match-players span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Compact desktop bracket: Left / Winners / Right. */
@media (min-width: 761px) {
  .matchplay-bracket.bracket-double {
    grid-template-columns: max-content 190px max-content;
    grid-template-rows: auto;
    justify-content: start;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }
  .bracket-double .bracket-region:first-child { grid-column: 1; grid-row: 1; }
  .bracket-double .bracket-region:last-child { grid-column: 3; grid-row: 1; }
  .bracket-double .bracket-center { grid-column: 2; grid-row: 1; justify-self: stretch; align-self: center; min-width: 0; }
  .bracket-double .bracket-center .round { width: 190px; min-width: 0; padding: 10px; }
  .bracket-double .bracket-center .round-header { min-width: 0; }
  .bracket-double .bracket-side { grid-auto-columns: 140px; gap: 24px; min-width: 0; }
  .bracket-double .round { min-width: 0; }
  .bracket-double .bracket-right { direction: rtl; }
  .bracket-double .bracket-right .round { direction: ltr; }
  .bracket-double .match::after { right: -24px; width: 24px; }
  .bracket-double .round:not(.round-final) .match:nth-child(odd):not(:last-child)::before { right: -24px; }
  .bracket-double .bracket-right .match::after { right: auto; left: -24px; }
  .bracket-double .bracket-right .round:not(.round-final) .match:nth-child(odd):not(:last-child)::before { right: auto; left: -24px; }
  .matchplay-page .slot, .matchplay-page .winner { font-size: 12px; padding: 8px 7px; text-transform: none; }
  .matchplay-page .round-header { font-size: 12px; }
  .matchplay-page .round-dates { font-size: 11px; }
  .matchplay-page .bracket-label { font-size: 13px; }
  .bracket-double .bracket-center.has-winner .winner { font-size: 13px; padding: 10px 7px; white-space: normal; }
}
@media (min-width: 761px) {
  .matchplay-bracket.bracket-shared-final { grid-template-columns: max-content max-content; }
  .bracket-shared-final .bracket-region:last-child { grid-column: 2; }
  .bracket-shared-final .bracket-center { display: block; margin: 28px 0 0; min-width: 0; }
  .bracket-shared-final .bracket-center .round { width: 140px; min-width: 0; padding: 8px; }
  .bracket-shared-final .bracket-center .round-header { padding: 8px 5px; }
  .bracket-shared-final .bracket-center .matches { padding: 0; }
  .matchplay-page .slot, .matchplay-page .winner,
  .bracket-double .bracket-center.has-winner .winner { font-size: 11px; }
  .matchplay-page .round-header { font-size: 11px; padding: 9px 12px; }
  .matchplay-page .round-dates { font-size: 10px; }
  .matchplay-page .bracket-label { font-size: 12px; }
}

/* Keep the shared winner level with the adjacent finalists. */
@media (min-width: 761px) {
  .bracket-double .bracket-label { display: none; }
  .bracket-double .bracket-region { gap: 0; }
  .bracket-shared-final .bracket-right .round-terminal > .round-dates,
  .bracket-shared-final .final-header-spacer { visibility: hidden; }
  .bracket-shared-final .bracket-right .round-terminal > .matches { padding-top: 378px; }
  .bracket-shared-final .bracket-center { margin-top: 414px; transform: translateY(-50%); }
}

/* Compact boxes, with round spacing based on a 64px first-round pitch. */
@media (min-width: 761px) {
  .matchplay-bracket.bracket-double { gap: 16px; padding: 12px; }
  .bracket-double .bracket-side { grid-auto-columns: 144px; gap: 16px; }
  .matchplay-page .round-header { min-width: 0; width: 100%; padding: 7px 5px; margin-bottom: 20px; }
  .matchplay-page .round-dates { font-size: 9px; }
  .matchplay-page .slot, .matchplay-page .winner { min-height: 24px; padding: 4px 5px; border-left-width: 3px; }
  .bracket-double .match { min-height: 48px; }
  .bracket-double .matches { padding: 16px 0; gap: 16px; }
  .bracket-double .round[data-round="1"] { --pair-span: 64px; }
  .bracket-double .round[data-round="2"] { --pair-span: 128px; }
  .bracket-double .round[data-round="3"] { --pair-span: 256px; }
  .bracket-double .round[data-round="4"] { --pair-span: 512px; }
  .bracket-double .round[data-round="2"] > .matches { padding-top: 48px; gap: 80px; }
  .bracket-double .round[data-round="3"] > .matches { padding-top: 112px; gap: 208px; }
  .bracket-double .round[data-round="4"] > .matches { padding-top: 240px; gap: 464px; }
  .bracket-double .round[data-round="5"] > .matches { padding-top: 496px; }
  .bracket-double .matches:empty { display: none; padding: 0; }
  .bracket-double .match::after { right: -16px; width: 16px; }
  .bracket-double .round:not(.round-final) .match:nth-child(odd):not(:last-child)::before { right: -16px; }
  .bracket-double .bracket-right .match::after { right: auto; left: -16px; }
  .bracket-double .bracket-right .round:not(.round-final) .match:nth-child(odd):not(:last-child)::before { right: auto; left: -16px; }
  .bracket-shared-final .bracket-center { margin-top: 264px; }
  .bracket-shared-final .bracket-center .round { width: 144px; padding: 6px; }
  .bracket-shared-final .bracket-center .matches { padding: 0; }
  .bracket-double .bracket-center.has-winner .winner { min-height: 34px; padding: 6px 4px; }
}

/* Scale the desktop bracket as a unit so every connector stays aligned. */
@media (min-width: 761px) {
  .matchplay-bracket {
    zoom: 0.85;
    width: max-content;
    max-width: calc(100% / 0.85);
    margin-inline: auto;
  }
}

.matchplay-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.matchplay-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid #5f146d;
  border-radius: 18px;
  background: #ffffff;
  color: #5f146d;
  font: 700 13px/1.2 Arial, Helvetica, sans-serif;
  text-decoration: none;
}

.matchplay-back:hover {
  background: #5f146d;
  color: #ffffff;
}

.matchplay-back:focus-visible {
  outline: 3px solid #c7a847;
  outline-offset: 3px;
}

/* Shared final: finalists flank the champion beneath matching headings. */
.matchplay-final-row .bracket-center .round-header {display:none;}
@media(min-width:761px){
 .bracket-shared-final .bracket-left{grid-template-columns:repeat(4,144px) 432px;}
 .bracket-shared-final .bracket-left > .round-terminal{width:432px;}
 .matchplay-final-headings,.matchplay-final-row{display:grid;grid-template-columns:144px 144px 144px;width:432px;gap:0;}
 .matchplay-final-headings .round-header{width:100%;border-left:4px solid #fff;border-right:4px solid #fff;}
 .matchplay-final-row{padding-top:232px;align-items:center;}
 .bracket-double .matchplay-final-row > .matches{padding:0!important;gap:0;}
 .bracket-shared-final .matchplay-final-row .bracket-center{margin:0;transform:none;}
 .bracket-shared-final .matchplay-final-row .bracket-center .matches{padding:0!important;gap:0;}
 .matchplay-final-row > .matches .match::before,.matchplay-final-row > .matches .match::after{display:none!important;}
}

@media(min-width:761px){.bracket-shared-final .round-semi .match::after{display:block!important;content:"";}}
@media(min-width:761px){.bracket-shared-final .round-semi .match::after{border-top:3px solid #8a5a94!important;width:16px!important;}}
@media(min-width:761px){
 .bracket-shared-final .round-semi .final-connector{padding:0!important;min-height:0!important;height:0;border:0;border-top:3px solid #8a5a94;background:transparent;box-shadow:none;}
}

@media(min-width:761px){
 .imported-results .round[data-round="2"] > .matches{padding-top:16px;gap:16px;}
 .imported-results .round[data-round="3"] > .matches{padding-top:48px;gap:80px;}
 .imported-results .round[data-round="4"] > .matches{padding-top:112px;gap:208px;}
 .imported-results .round[data-round="2"]{--pair-span:64px;}
 .imported-results .round[data-round="3"]{--pair-span:128px;}
 .imported-results .round[data-round="4"]{--pair-span:256px;}
 .imported-results .round[data-round="1"] .match::before{display:none!important;}
 .imported-results .round[data-round="1"] .match:nth-child(even)::after{transform:none;}
 .imported-results .round-semi .match::after{display:none!important;}
}

/* Keep wide brackets inside one scrolling panel, never the page viewport. */
html,body{max-width:100%;overflow-x:hidden;}
.matchplay-fragment-page{width:100%;min-width:0;margin:0;}
.matchplay-page{width:100%;max-width:100%;min-width:0;}
@media(min-width:761px){
 .matchplay-page .matchplay-bracket{width:100%;max-width:calc(100% / .85);margin-inline:0;overflow-x:auto;}
}