.matches {
  background-image: radial-gradient(ellipse farthest-side at center, 
    hsl(from var(--key-color) h s l / 0.1) 50%, 
    transparent 80%);
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;

  h3 {
    font-size: clamp(1.8rem, 3vw + 1rem, 2rem);
  }
}

.matches-ui {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 1rem;

  label {
    padding: 0.5em;
  }

  /* Moved Select and Input to core */
}

.spoiler-toggle {
  display: flex;
  align-items: center;
}

.content .match-players {
  display: none!important;
  visibility: hidden;
}


/* SPECIFIC TO PAGE DESIGN */
/* Toggle for standings list for spoiler protection and page declutter. */
.content.matches:has( .matches-ui .spoiler-toggle input:checked ) .match-players,
.match-block-wrapper:has( .spoiler-toggle input:checked ) .match-players {
  display: grid !important;
  visibility: visible;
}
/* Hide the Matches UI Spoiler Toggle element if .match-players does not exist */
.content.matches:not(:has(.match-players)) .spoiler-toggle {
  display: none;
  visibility: hidden;
}
/* Hide the Match Block Wrapper Spoiler Toggle element (per row) if .match-ui exists */
.content.matches:has(.matches-ui) .match-block-wrapper .spoiler-toggle {
  display: none;
  visibility: hidden;
}



.content .matches-tables:not(.is-active) {
  display: none;
}

.content .match-block {
  --border-image: var(--frame-matchblock);
}

.selection .match-block {
  --border-image: var(--frame-matchvote);
}

.match-block-wrapper {
  --match-block-width: 20rem;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--match-block-width)), 1fr));
  gap: 20px;
  margin: 0 auto;
  border-top: 1px solid hsl(from var(--esports-nav-base-color) h s 25%);
  padding-block: 1rem;
}

/* 260609-CSS-F START*/
.match-block-wrapper {
  --columns: 3;
  grid-template-columns: repeat(var(--columns),1fr);
}
@media (width <= 1080px) {
  .match-block-wrapper {
    --columns:2
  }
}
@media (width <= 760px) {
  .match-block-wrapper {
    --columns:1
  }
}
/* 260609-CSS-F END*/

.match-block-wrapper:not(:last-child) {
  margin-block-end: 2rem;
}

.content .match-block-wrapper:not(:has(.spoiler-toggle)) .match-label {
  grid-column: 1/ -1;
}

.content .match-label,
.selection .match-label {
  grid-column: 1/ 3;
}

.content.matches .countdown-ui,
.selection.matches .countdown-ui {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: fit-content;
  justify-self: flex-end;
  
  p {
    font-size: 1rem;
    text-transform: uppercase;
  }

  .timer,.countdown {
    display: flex;
    gap: 0.25em;
  }
}

.content .match-block-wrapper .spoiler-toggle,
.content.matches .countdown-ui,
.selection.matches .countdown-ui {
  grid-column: 3/-1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  gap: 0.5em;
}

.selection .match-label,
.selection .match-countdown {
  font-size: 1.25rem;
}

@media (width <= 1200px) {
  .selection .match-label,
  .content.matches .countdown-ui,
  .selection.matches .countdown-ui,
  .content .match-label,
  .content .match-block-wrapper .spoiler-toggle {
    grid-column: 1/ -1;
    text-align: center;
  }
  .content .match-block-wrapper .spoiler-toggle,
  .content.matches .countdown-ui,
  .selection.matches .countdown-ui {
    font-size: 1.5rem;
    justify-content: center;
  }
  .content.matches .countdown-ui,
  .selection.matches .countdown-ui {
    justify-self: center;
  }
}

.match-block {
  background-color: var(--background-color);
  position: relative;
  padding: 0.5rem;

  --border-slice: 30;
  --border-width: 1.875rem;

  background-image:
    var(--background-matchblock),
    radial-gradient(circle at var(--bg-gradient-pos),
      hsl(from var(--key-color) h s l / 0.4),
      transparent 75%);
  background-size: 100% 100%;
  background-position: center;
}

.match-block.break {
  grid-column-start: 1;
}

.content .match-block {
  display: grid;
  grid-template-columns: 3ch auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "matchnumber teamA scoreA"
    "matchnumber teamB scoreB"
    "players players players";
  
  --bg-gradient-pos: bottom;
}

.selection .match-block {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "teamA matchnumber teamB"
    "scoreA matchnumber scoreB"
    "players players players";
  
  --bg-gradient-pos: top;
}


.match-block > figure {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  figcaption {
    text-align: center;
  }
  img {
    aspect-ratio: 1/1;
    height: auto;
    object-fit: contain;
  }
}
.content .match-block > figure {
  padding: 0.125rem;
  img {
    width: 2rem;
  }
}
.content .match-block > figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid hsl(from var(--esports-nav-base-color) h s 25%);
  inset: 0;
}
.selection .match-block > figure {
  flex-direction: column;
  padding: 0.5rem;
  figcaption {
    font-size: 0.8rem;
  }
  img {
    width: max(30%,7rem);
  }
}

.match-block .matchNumber {
  grid-area: matchnumber;
  display: flex;
  justify-self: flex-end;
  align-items: center;
}
.content .match-block .matchNumber::after {
  content: "";
  display: block;
  border: 1px solid hsl(from var(--esports-nav-base-color) h s 25%);
  border-right: 0;
  height: 2.5rem;
  width: 0.5rem;
  margin-inline-start: 0.25rem;
}
.selection .match-block .matchNumber {
  font-size: 0;
}
.selection .match-block .matchNumber::before {
  content: 'VS';
  font-size: 2rem;
  font-family: var(--font-family);
  font-weight: 700;
}

.match-block .teamA.teamBlock {
  grid-area: teamA;
}
.content .match-block .teamA.teamBlock::before {
  grid-area: 1 / 2 / 2 / 4;
  border-bottom: none;
}

.match-block .teamA.teamScore {
  grid-area: scoreA;
}

.match-block .teamB.teamBlock {
  grid-area: teamB;
}
.content .match-block > .teamB.teamBlock::before {
  grid-area: 2 / 2 / 3 / 4;
}

.match-block .teamB.teamScore {
  grid-area: scoreB;
}

.match-block .teamScore {
  padding: 0.5em;
  text-align: right;
}

.selection .match-block .teamScore {
  text-align: center;
  font-size: 2.5rem;
  text-align: center;
  width: 4ch;
  height: 2.5ch;
  justify-self: center;
  align-self: flex-end;
  margin-block-end: 0.5rem;
}





.match-block .winner,
.match-block .winner+p {
  filter: drop-shadow(0 0 10px var(--key-color));
  background-color: var(--key-color);
  color: var(--key-color-reverse);
}

.match-block .winner {
  background-image: linear-gradient(to right,
      hsl(from var(--key-color) h s 75%),
      var(--key-color));

  img {
    border-radius: var(--border-radius);
    background-color: color-mix(in srgb, var(--key-color), black 55%);
  }
}

.match-block .winner::before {
  display: none;
}






.match-players {
  grid-area: players;
  padding: 1rem;
  gap: 0.5rem;
}

.content .match-players {
  --column-size: 8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--column-size)), 1fr));
  grid-template-rows: auto;
  gap: 1rem;

  --border-image: var(--frame-tinylabel);
  --border-slice: 10;
  --border-width: 0.625rem;

  p, figcaption {
    text-align: center;
  }

  p {
    padding: 0.2rem 1rem;
    background-color: hsl(from var(--esports-nav-base-color) h s 30% / 0.5);
  }

  figcaption {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: hsl(from var(--esports-nav-base-color) h s 75%);
  }

  figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
  }

  img {
    width: min(100%, 4rem);
    border-radius: var(--border-radius);
    background-color: hsl(from var(--key-color) h 20% 10%);
  }
}

@media (width <= 600px) {
  .content .match-players {
    --column-size: 6rem;
  }
}

.selection .match-players {
  display: flex;
  flex-direction: column;

  label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: hsl(from var(--esports-nav-base-color) h s 65%);
  }

  span {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }

  select {
    padding: 0.5em;
  }
}






.match-vote-ui {
  grid-column: 1/-1;
  padding: 0.5rem;
  display: flex;
  justify-self: flex-start;
  align-items: center;
  gap: 1rem;
  
  button {
    flex: 0 0 auto;
    width: auto;
  }

  p {
    flex: 1 0 auto;
  }
}

@media (width <= 760px) {
  .match-vote-ui {
    flex-direction: column;
  }
  .match-vote-ui button {
    width: 100%;
  }
  .match-vote-ui p {
    text-align: center;
  }
}


.matches.noimages .match-players img  {
  display: none;
  visibility: hidden;
}
.content.matches.noimages .teamBlock figcaption {
  padding-inline-start: 0.5rem;
}
.selection.matches.noimages .teamBlock figcaption  {
  font-size: 1.5rem;
}


/* Locked/Expired U260605-A */
.locked.match-block input[type=number],
.locked.match-block select,
.expired.match-block input[type=number],
.expired.match-block select {
  pointer-events: none;
  background-color: hsl(from var(--key-color) h 10% calc(l - 50) / 0.35);
  background-image: none;
  border: none;
}
.expired.match-block input[type=number],
.expired.match-block select {
  background-color: hsl(from var(--background-color) h 10% calc(l - 30) / 0.35);
  opacity: 0.6667;
}
.locked.match-block select,
.expired.match-block select {
  appearance: none;
  text-align: center;
}
.match-block:not(.locked) select:invalid,
.match-block:not(.locked) input[type=number]::placeholder,
.match-block:not(.locked) input[type=text]::placeholder {
  color: hsl(from var(--esports-nav-base-color) h s 80%);
}

/* 260609-CSS-E START */
/* main:has(.matches:not(:empty)) .events-message {
  display: none;
  visibility: hidden;
}
.matches:empty {
  display: none;
  visibility: hidden;
} */
body.no-results .matches {
  display: none;
  visibility: hidden;
}
body:not(.no-results) .events-message {
  display: none;
  visibility: hidden;
}
.events-message {
  text-align: center;
  font-size: 1.5rem;
  padding: calc(2rem + 4vw) 1vw;
  background-image: linear-gradient(to bottom, transparent, var(--background-color) 90%);
}
/* 260609-CSS-E END */