.teams {
  background-image:
    linear-gradient(to bottom,
      hsl(from var(--key-color) h s l / 0.3),
      transparent 100%
    ),
    var(--background-teams);
  background-position: top center;
  background-size: auto;
  background-repeat: repeat-x;
}

.contents.teams {
  border-block-start: 1px solid var(--key-color);
}

.selection.teams {
  border: 1px solid var(--key-color);
  padding-inline: 0;
}

.teams div figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 8.75rem);
  grid-template-rows: auto;
  gap: 2rem;
  justify-content: center;
  margin-inline: auto;
}

/* Probably unnecessary because CFWL/BL/OL are supposed to cap at 8 teams */
.teams-grid:has( .teamConfirmButton:nth-child(9) ) {
  width: min(100%, 62.5rem);
}

.teams-grid .team {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  height: 100%;


  img {
    aspect-ratio: 1/1;
    object-fit: contain;
    width: 8.75rem;
  }

  figcaption {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8em;
    background-color: hsl(from var(--esports-nav-base-color) h s 30% / 0.5);
    backdrop-filter: blur(5px);
    padding: 0.4em 0.75em 0.25rem;
    border-radius: var(--border-radius);
    text-shadow: 0 1px 1px black;

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

.teams-grid .team::before {
  justify-self: center;
  translate: 0 -10%;
}

@media (width <=1410px) {
  .teams-grid {
    width: min(100%, 980px);
  }
}

@media (width <=940px) {
  .teams-grid {
    width: min(100%, 760px);
  }
}

@media (width <=770px) {
  .teams-grid {
    width: min(100%, 980px);
  }
}

@media (width <=600px) {
  .container-grid .breakout.selection.teams {
    grid-column: fluid;
    border-inline: none;
    padding-inline: 5vw;
  }

  .teams-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 0.5rem;
  }

  .teams-grid .team img {
    max-width: 6.25rem;
  }
}

.teams-ui {
  margin-block: 1rem;

  label {
    padding: 0.5em;
  }

  input, label {
    cursor: pointer;
  }
}

.teams-standings {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: hsl(from var(--esports-nav-base-color) h s 20%);
  width: 100%;
  padding: 0.5rem;
  border-radius: var(--border-radius);

  li {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    align-content: center;
  }

  p:first-child {
    font-size: 0.8em;
    text-transform: uppercase;
    align-self: center;
    color: hsl(from var(--esports-nav-base-color) h s 70%);
  }

  p:last-child {
    text-align: right;
  }
}


.selection .team {
  --glow-mask: var(--glow-teams); /* CDN HERE */
  --glow-scale: 160%;
}

@media (hover) {
  .selection .team:hover {
    img {
      filter: drop-shadow(0 0 10px var(--key-color));
      scale: 1.1;
      transition-duration: var(--transition-duration);
      transition-timing-function: var(--transition-timing-function);
      transition-property: filter,scale;
    }
  }
}

.team.active {
  pointer-events: none;
}

.team.active::after {
  /* content: var(--myteam); */
  position: absolute;
  inset-block-end: -1.25rem;
  background-color: black;
  color: var(--key-color);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
}

.teamConfirm figure {
  position: relative;
  width: fit-content;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  --glow-mask: var(--glow-teams);
  --glow-scale: 140%;

  img {
    background-color: transparent;
    width: 8.75rem;
  }

  figcaption {
    background-color: hsl(from var(--esports-nav-base-color) h s 10%);
    padding: 0.2em 1em;
    border-radius: var(--border-radius);

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

  figcaption span {
    font-size: 1.2em;
  }
}


.inactive .teams-grid {
  display: flex;
  flex-direction: column;

  .timer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
    row-gap: 0;
    column-gap: 1rem;
    width: fit-content;
    margin-inline: auto;
  }

  .timer span {
    font-family: var(--font-family);
    font-weight: 700;
    text-align: right;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";

    display: block;
    width: 2.5ch;
  }

  .timer span::after {
    font-size: 0.4em;
  }

  p {
    font-size: 1.25rem;
    grid-column: span 3;
    text-align: center;
  }
}

.team-details {
  display: block;
  width: fit-content;
  margin-block-start: 2rem;
  margin-inline: auto;
  .button {
    width: fit-content;
  }
}