/* Matchup and score presentation for guild territory best-of-three battles. */
.pvp-intro-rosters {
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  margin: 8px auto 0;
}

.pvp-intro-side {
  min-width: 0;
  padding: 10px;
  border: 1px solid #bca6e055;
  background: #101423b8;
}

.pvp-intro-side h3 {
  margin: 0;
  color: #f3d99f;
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.pvp-intro-side .pvp-intro-opponents {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 6px;
  max-width: none;
  margin: 8px 0 0;
}

.pvp-intro-side .pvp-intro-opponents:has(article:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.pvp-intro-side .pvp-intro-opponents img {
  border-radius: 3px;
  border-color: #d8c69b88;
}

.pvp-intro-side.enemy-team .pvp-intro-opponents img {
  border-color: #e39b8988;
}

.pvp-intro-rosters .pvp-intro-versus {
  margin: 0;
}

.pvp-series-score {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 10px;
  margin: 6px 0;
  color: #eee5ff;
  font-variant-numeric: tabular-nums;
}

.pvp-series-score strong { color: #d7c3ff; }
.pvp-series-score span { color: #f8cc97; font-weight: 900; }

.pvp-series-result {
  margin: 6px 0 !important;
  color: #f3d99f !important;
}

.pvp-intro.pvp-intermission {
  background: radial-gradient(ellipse at 50% 42%, #7453a833, transparent 72%);
}

@media (max-width: 700px) {
  .pvp-intro-rosters {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .pvp-intro-rosters .pvp-intro-versus {
    font-size: 1.25rem;
    line-height: 1;
  }

  .pvp-intro-side { padding: 8px; }
  .pvp-intro-side .pvp-intro-opponents { gap: 6px 4px; }
  .pvp-intro-side .pvp-intro-opponents strong { font-size: .7rem; }
  .pvp-intro-side .pvp-intro-opponents small { font-size: .58rem; }
}