/* Square player-supplied avatars sit alongside the existing agent cutouts. */
.squad-roster {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.squad-roster > div {
  padding-inline: 5px;
}
.squad-roster span {
  font-size: 13px;
}
.squad-roster img.profile-portrait {
  width: 72px;
  height: 72px;
  margin: 10px 0;
  object-fit: cover;
  border: 1px solid #98b1c1;
  border-radius: 3px;
}
.squad-roster > .roster-player {
  background: linear-gradient(180deg, #83c9ee12, #83c9ee05);
  box-shadow: inset 0 -2px var(--ct);
}
.squad-roster .roster-player img {
  object-position: center 20%;
}
.squad-roster .roster-player small {
  color: var(--ct);
}
.radio-avatar img.profile-portrait {
  width: calc(100% - 12px);
  height: auto;
  max-width: 78px;
  aspect-ratio: 1;
  margin: 5px 6px;
  transform: none;
  object-fit: cover;
  border: 1px solid #98b1c1;
  border-radius: 3px;
}
.intro-friend:not([hidden]),
.friend-reaction {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 14px;
  background: #17232d;
  border: 1px solid #33454f;
  border-left: 2px solid var(--ct);
  text-align: left;
}
.intro-friend[hidden] {
  display: none;
}
.intro-friend {
  margin-bottom: 15px;
}
.friend-reaction {
  margin: 18px 0 22px;
}
.intro-friend img,
.friend-reaction img {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid #98b1c1;
  border-radius: 3px;
}
.intro-friend > div,
.friend-reaction > div {
  min-width: 0;
}
.intro-friend span,
.friend-reaction span {
  color: #8cc9ea;
  font-size: 14px;
  font-weight: 600;
}
.intro-friend small,
.friend-reaction small {
  color: #8ea6b7;
  font-size: 11px;
  font-weight: 400;
  margin-left: 7px;
}
.intro-friend p,
.friend-reaction p {
  margin: 5px 0 0;
  color: #e2e8ed;
  font-size: 14px;
  line-height: 1.65;
}
.game-bottom > span:not(.player-avatar) {
  min-width: 0;
}
.game-bottom > span > b {
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .squad-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .squad-roster > .roster-player {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
    text-align: left;
  }
  .squad-roster .roster-player img.profile-portrait {
    width: 48px;
    height: 48px;
    margin: 0;
  }
  .squad-roster > div:nth-child(odd) {
    border-left: 0;
  }
  .squad-roster > div:nth-child(n + 3) {
    border-top: 1px solid #ffffff0e;
  }
  .squad-roster img.profile-portrait {
    width: 68px;
    height: 68px;
    margin-block: 8.5px;
  }
}
@media (max-width: 359px) {
  .squad-roster img.profile-portrait {
    width: 61px;
    height: 61px;
    margin-block: 7px;
  }
  .friend-reaction,
  .intro-friend:not([hidden]) {
    gap: 10px;
    padding: 11px;
  }
  .game-bottom > span > b {
    font-size: 12px;
  }
}