.following-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.following-hero > .leaderboards-ghost-button {
  position: relative;
  z-index: 1;
  justify-self: end;
}

.following-players-panel,
.following-empty {
  margin-top: 1rem;
  padding: 1rem;
}

.following-roster-toolbar,
.following-sort-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.following-roster-toolbar {
  justify-content: flex-end;
  gap: 0.45rem 0.8rem;
}

.following-player-count {
  white-space: nowrap;
}

.following-sort-controls {
  gap: 0.35rem;
  color: rgba(235, 222, 193, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.following-sort-controls label {
  margin-right: 0.05rem;
}

.following-sort-form {
  margin: 0;
}

.following-sort-form select,
.following-sort-direction {
  min-height: 2rem;
  border: 1px solid rgba(219, 188, 118, 0.17);
  border-radius: 0.22rem;
  background: rgba(3, 11, 20, 0.62);
  color: rgba(237, 229, 211, 0.74);
  font: inherit;
}

.following-sort-form select {
  width: auto;
  min-width: 7.4rem;
  padding: 0.3rem 1.75rem 0.3rem 0.58rem;
  cursor: pointer;
}

.following-sort-direction {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}

.following-sort-form select:hover,
.following-sort-form select:focus,
.following-sort-direction:hover,
.following-sort-direction:focus-visible {
  outline: none;
  border-color: rgba(226, 186, 97, 0.56);
  color: #f3d38e;
  background: rgba(226, 186, 97, 0.1);
  box-shadow: 0 0 0 0.16rem rgba(245, 204, 120, 0.12);
}

.following-page .stats-player-collection-head {
  min-height: 2.45rem;
  padding-top: 0.46rem;
  padding-bottom: 0.46rem;
  border-bottom-width: 1px;
  border-bottom-color: rgba(219, 174, 84, 0.4);
  background: rgba(11, 23, 35, 0.82);
  color: rgba(232, 200, 127, 0.78);
}

.following-player-identity {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.following-player-link {
  min-width: 0;
  color: rgba(246, 238, 219, 0.96);
  text-decoration: none;
}

.following-player-link:hover,
.following-player-link:focus-visible {
  color: #ffe0a0;
}

.following-presence-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 0.22rem rgba(255, 255, 255, 0.18));
}

.following-inline-status {
  color: rgba(228, 219, 202, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

[data-presence-state="in_game"] .following-inline-status { color: #efb0a5; }
[data-presence-state="lobby"] .following-inline-status { color: #f0d28b; }
[data-presence-state="skirmish"] .following-inline-status { color: #e8c66f; }
[data-presence-state="main_menu"] .following-inline-status { color: #b9d9b1; }
[data-presence-state="offline"] .following-inline-status { color: #aeb7bc; }
[data-presence-state="unavailable"] .following-inline-status { color: #7f8b94; }

.following-copy-match,
.following-player-row .leaderboards-primary-button,
.following-player-row .leaderboards-ghost-button {
  min-height: 2.2rem;
  padding: 0.43rem 0.62rem;
  flex: 0 1 auto;
  font-size: 0.7rem;
  line-height: 1.1;
}

.following-action-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
}

.retold-action-icon {
  width: 1.34rem;
  height: 1.34rem;
  flex: 0 0 auto;
  background: center / contain no-repeat var(--retold-icon-off);
}

a:hover > .retold-action-icon,
a:focus-visible > .retold-action-icon,
button:hover > .retold-action-icon,
button:focus-visible > .retold-action-icon,
.is-copied > .retold-action-icon {
  background-image: var(--retold-icon-on);
}

.retold-view-profile-icon {
  --retold-icon-off: url("../assets/optimized/images/following/Button_ViewProfile_Off.0e391750bca8.webp");
  --retold-icon-on: url("../assets/optimized/images/following/Button_ViewProfile_On.0e6cc9edeb5c.webp");
}

.retold-copy-icon {
  --retold-icon-off: url("../assets/optimized/images/ui/Button_Copy_Off.4bac8433a21d.webp");
  --retold-icon-on: url("../assets/optimized/images/ui/Button_Copy_On.12ecd09d2f9f.webp");
}

.retold-friend-add-icon {
  --retold-icon-off: url("../assets/optimized/images/following/Button_FriendAdd_Off.0197835dfe99.webp");
  --retold-icon-on: url("../assets/optimized/images/following/Button_FriendAdd_On.8c70df6f42c1.webp");
}

.retold-friend-remove-icon {
  --retold-icon-off: url("../assets/optimized/images/following/Button_FriendRemove_Off.f0a8a1cb81f6.webp");
  --retold-icon-on: url("../assets/optimized/images/following/Button_FriendRemove_On.ca2cd891ed99.webp");
}

.following-profile-action {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border: 1px solid rgba(220, 188, 117, 0.24);
  border-radius: 0.22rem;
  background: rgba(7, 16, 27, 0.76);
}

.following-profile-action:hover,
.following-profile-action:focus-visible {
  border-color: rgba(232, 195, 111, 0.64);
  background: rgba(232, 195, 111, 0.1);
}

.following-unfollow {
  min-height: 2.2rem;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(181, 188, 190, 0.18);
  border-radius: 0.22rem;
  background: rgba(5, 13, 22, 0.52);
  color: rgba(220, 226, 228, 0.72);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
}

.following-unfollow:hover,
.following-unfollow:focus-visible {
  border-color: rgba(226, 188, 104, 0.44);
  color: #f2d28c;
}

.following-clan-member {
  padding: 0.3rem 0.15rem;
  color: rgba(212, 220, 220, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.following-copy-label {
  min-width: 5.9rem;
  text-align: left;
}

.following-copy-match.is-copied .following-copy-label {
  color: #dfeab9;
}

.following-empty-copy {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.following-empty-copy p {
  margin: 0;
  color: rgba(236, 226, 207, 0.8);
}

.player-profile-follow-control {
  margin-top: 0.75rem;
}

.player-profile-follow-control button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.player-profile-follow-control small {
  color: inherit;
  opacity: 0.72;
}

@media (max-width: 1040px) {
  .following-inline-status {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.72rem;
    white-space: normal;
  }

  .following-copy-label {
    min-width: 0;
  }

  .following-player-row .leaderboards-primary-button,
  .following-player-row .leaderboards-ghost-button,
  .following-unfollow {
    padding-right: 0.46rem;
    padding-left: 0.46rem;
  }
}

@media (max-width: 700px) {
  .following-hero {
    grid-template-columns: 1fr;
  }

  .following-hero > .leaderboards-ghost-button {
    justify-self: start;
  }

  .following-roster-toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .following-player-row .leaderboards-primary-button,
  .following-player-row .leaderboards-ghost-button {
    width: auto;
  }
}

@media (max-width: 430px) {
  .following-players-panel {
    padding: 0.65rem;
  }

  .following-player-row {
    padding: 0.7rem;
  }

  .following-roster-toolbar {
    align-items: flex-end;
    gap: 0.4rem;
  }

  .following-sort-controls {
    margin-left: auto;
  }

  .following-sort-form select {
    min-width: 6.9rem;
  }

  .following-presence-icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .stats-player-avatar {
    width: 2.2rem;
    height: 2.2rem;
  }
}