.play-match__error {
  padding: var(--s-4);
  background-color: var(--bg-lighter);
  border-radius: var(--rounded);
  color: var(--theme-warning);
}

.play-match__waves {
  padding: var(--s-8);
  background: url("/svg/background-pattern.svg");
  background-color: var(--bg-lighter);
  border-radius: var(--rounded);
  margin-block-start: var(--s-4);
}

.play-match__teams {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
}

.play-match__waves-section {
  padding: var(--s-4);
  background-color: var(--bg-darker);
  border-radius: var(--rounded);
  font-size: var(--fonts-sm);
  text-align: center;
}

.play-match__info {
  margin-block-start: var(--s-8);
}

.play-match__played-map-list {
  display: grid;
  justify-content: center;
  font-size: var(--fonts-sm);
  font-weight: var(--semi-bold);
  gap: var(--s-2);
  grid-template-columns: 4rem max-content 4rem;
  margin-block-start: var(--s-4);
  text-align: center;
}

.play-match__checkmark {
  display: grid;
  width: 2rem;
  color: var(--theme-success);
  place-items: center;
}

.play-match__checkmark.left {
  margin-left: auto;
}

.play-match__played-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-1);
  background-color: var(--bg-darker);
  border-radius: var(--rounded);
  padding-inline: var(--s-3);
}

.play-match__played-mode {
  width: 1.5rem;
}

.play-match__team-info {
  display: grid;
  max-width: 14rem;
  flex: 1;
  gap: var(--s-4);
  grid-template-columns: 1fr 1fr;
}

.play-match__player-name {
  font-size: var(--fonts-xs);
  font-weight: var(--semi-bold);
  margin-block-start: 1px;
  white-space: nowrap;
}

.play-match__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fonts-xs);
}

.play-match__score {
  border-radius: var(--rounded);
  font-size: var(--fonts-lg);
  font-weight: var(--bold);
  grid-column: 1 / 3;
}

.play-match__score.winner {
  background-color: var(--theme-transparent);
}

.play-match__waves-button {
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-4);
}

.play-match__select {
  width: 4rem;
  margin-inline-end: var(--s-4);
}

.play-match__select-column-header {
  width: 6rem;
  padding: var(--s-1-5);
  color: var(--theme);
  font-size: var(--fonts-xs);
  font-weight: var(--bold);
  list-style: none;
  text-align: center;
}

.play-match__stages {
  max-width: max-content;
  padding: var(--s-4);
  margin: 0 auto;
  background-color: var(--bg-lighter);
  border-radius: var(--rounded);
  font-size: var(--fonts-sm);
  margin-block-start: var(--s-4);
}

.play-match__map-list-header {
  background-color: var(--bg-darker);
  border-radius: var(--rounded);
  font-size: var(--fonts-sm);
  font-weight: var(--semi-bold);
  text-align: center;
}

.play-match__best-of {
  color: var(--text-lighter);
  font-size: var(--fonts-xs);
  font-weight: var(--semi-bold);
  text-align: center;
}

.play-match__mode {
  width: 1.5rem;
  margin-inline-end: var(--s-2);
}

.play-match__stage {
  display: flex;
  align-items: center;
  padding: var(--s-1-5);
}

.play-match__stage-name {
  font-weight: var(--bold);
  margin-inline: 4px;
  text-overflow: clip;
  white-space: nowrap;
}

.play-match__error-text {
  color: var(--theme-warning);
  margin-block-start: var(--s-4);
  text-align: center;
}

.play-match__score-submit-button {
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-4);
}
