.following-page.ps-page {
  background:
    radial-gradient(100% 72% at 50% -10%, rgba(57, 108, 141, 0.27), transparent 64%),
    linear-gradient(180deg, #102036, #0b1625);
}

.following-page .ps-panel {
  background: linear-gradient(180deg, #17283d, #112035);
}

.following-page .ps-phero {
  width: min(100%, 70rem);
  margin-inline: auto;
}

.following-page .following-sync-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  width: min(100%, 65rem);
  margin-inline: auto;
  padding: 1rem 1.35rem;
  border-color: rgba(232, 196, 111, 0.38);
  background: linear-gradient(145deg, #1b3048, #13243a);
}

.following-sync-prompt-copy h2 {
  margin: 0 0 0.2rem;
  color: #f4d28a;
  font: 700 1.12rem / 1.25 "Cinzel", serif;
}

.following-sync-prompt-copy p {
  margin: 0;
  color: #efe4ce;
  font-size: 0.95rem;
  line-height: 1.35;
}

.following-sync-prompt .friends-sync-start {
  flex: 0 0 auto;
}

.following-page .following-roster-frame {
  padding: 6px;
  border: 1px solid rgba(232, 196, 111, 0.65);
  border-radius: 12px;
  background: linear-gradient(160deg, #29425d, #0d1b2e);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 214, 0.24);
}

.following-roster-frame > .ps-surface-in {
  border: 1px solid rgba(213, 177, 101, 0.3);
  border-radius: 7px;
  background: #13243a;
}

.following-roster-frame > .ps-surface-in > .ps-panel {
  border: 0;
  border-radius: 7px;
  box-shadow: none;
}

.following-page .stats-player-collection {
  border-color: rgba(219, 188, 118, 0.32);
  background: #112034;
}

.following-page .following-player-row {
  border-bottom-color: rgba(219, 188, 118, 0.2);
  background: #16273d;
}

.following-page .following-player-row:nth-child(odd) {
  background: #192a42;
}

.following-page .following-player-row:hover {
  background: #233a53;
}

.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-page .stats-player-collection-head,
.following-page .following-player-row {
  grid-template-columns: minmax(12rem, 1.5fr) minmax(3.1rem, 0.32fr) minmax(7.5rem, 0.74fr) minmax(14.75rem, 1.16fr) minmax(7.2rem, 0.66fr);
}

.following-player-row {
  height: 4.4rem;
}

.following-page .following-sort-mobile {
  display: none;
}

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

.following-roster-toolbar {
  justify-content: flex-start;
  gap: 0.6rem 0.8rem;
}

.following-roster-frame .ps-band h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.following-roster-frame .ps-band .following-player-count {
  align-self: flex-start;
  margin-top: 0.12rem;
  margin-left: auto;
  color: #e9d4a3;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: none;
  white-space: nowrap;
}

.following-search {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: max-content;
  align-items: end;
  gap: 0.25rem;
  width: min(100%, 23rem);
  min-width: 0;
  color: #e8c87f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.following-search label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}

.following-search > .sov-action {
  min-height: 2.5rem;
  justify-content: center;
}

.following-search input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(232, 196, 111, 0.38);
  border-radius: 5px;
  background: #0e1b2b;
  color: #f6ead0;
  font: 400 0.95rem / 1.2 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}

.following-search input::placeholder {
  color: #b4bbbf;
}

.following-search input:focus-visible {
  outline: 2px solid #f4d28a;
  outline-offset: 2px;
}

.following-page .following-player-row[hidden],
.following-search-empty[hidden] {
  display: none;
}

.following-search-empty {
  margin: 0;
  padding: 1.4rem;
  color: #f1e4c8;
  text-align: center;
}

.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-sort-header {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.following-sort-header span {
  font-size: 0.85rem;
  opacity: 0.55;
}

.following-sort-header:hover,
.following-sort-header:focus-visible,
.following-sort-header.is-active {
  color: #ffe2a3;
}

.following-sort-header:focus-visible {
  outline: 2px solid #ffe2a3;
  outline-offset: 3px;
}

.following-sort-header.is-active span {
  opacity: 1;
}

.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;
  flex: 1 1 auto;
  overflow: hidden;
  flex-wrap: nowrap;
  color: rgba(246, 238, 219, 0.96);
  text-decoration: none;
}

.following-player-link .stats-player-identity-copy {
  overflow: hidden;
  flex: 1 1 auto;
}

.following-player-link .stats-player-identity-copy strong,
.following-player-link .stats-player-identity-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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,
[data-presence-state="searching"] .following-inline-status { color: #f0d28b; }
[data-presence-state="skirmish"] .following-inline-status,
[data-presence-state="campaign"] .following-inline-status { color: #e8c66f; }
[data-presence-state="main_menu"] .following-inline-status,
[data-presence-state="online"] .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 0 auto;
  font-size: 0.77rem;
  line-height: 1.2;
}

.following-page .stats-player-live {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.35rem;
}

.following-page .stats-player-live > a,
.following-page .stats-player-live > button {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding-inline: 0.47rem;
  white-space: nowrap;
  text-align: center;
}

.following-page .stats-player-live .retold-action-icon {
  width: 1.08rem;
  height: 1.08rem;
}

.following-page .stats-player-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.following-page .stats-player-actions > .following-self-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.43rem 0.62rem;
}

.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-action-spacer {
  display: block;
  width: 5.9rem;
  height: 2.2rem;
  flex: 0 0 5.9rem;
}

.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-self-indicator {
  color: var(--text-muted, #aeb7bc);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

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

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

.friends-sync-body {
  padding: 0.9rem 1rem;
}

.friends-authorization-body {
  justify-items: center;
  text-align: center;
}

.friends-authorization-qr {
  display: block;
  width: min(18rem, 100%);
  height: auto;
  padding: 0.7rem;
  border: 1px solid rgba(232, 196, 111, 0.5);
  border-radius: 0.45rem;
  background: #fff;
}

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

.following-page .friends-sync-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.8rem;
  padding-inline: 0.85rem;
  border-color: rgba(232, 196, 111, 0.72);
  background: linear-gradient(180deg, #29445d, #15283d);
  box-shadow: inset 0 1px 0 rgba(255, 243, 204, 0.16);
  color: #fff1cd;
  font-size: 0.9rem;
}

.following-page .friends-sync-start:hover,
.following-page .friends-sync-start:focus-visible {
  border-color: #f6d48d;
  background: linear-gradient(180deg, #34546e, #1a3149);
  color: #fff6dd;
}

.friends-sync-start img {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.following-page .friends-sync-body p {
  max-width: 72ch;
  color: #eee4d1;
  font-size: 1rem;
  line-height: 1.55;
}

.friends-sync-dialog {
  width: min(48rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  margin: auto;
  padding: 6px;
  border: 1px solid rgba(232, 196, 111, 0.65);
  border-radius: 12px;
  background: linear-gradient(160deg, #29425d, #0d1b2e);
  color: #f6ead0;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 244, 214, 0.24);
}

.friends-sync-dialog::backdrop {
  background: rgba(3, 9, 18, 0.76);
}

.friends-sync-dialog-content {
  padding: clamp(1.15rem, 3vw, 1.5rem);
  padding-block: clamp(1.5rem, 3vw, 1.85rem);
  text-align: center;
  border: 1px solid rgba(213, 177, 101, 0.3);
  border-radius: 7px;
  background: #13243a;
}

.friends-sync-dialog h2 {
  margin: 0 0 0.7rem;
  color: #f4d28a;
  font: 700 clamp(1.3rem, 4vw, 1.7rem) / 1.2 "Cinzel", serif;
}

.friends-sync-dialog p {
  margin: 0 0 0.55rem;
  line-height: 1.4;
}

.friends-sync-warning {
  margin: 1rem auto 0.8rem !important;
  color: #ffe3a0;
  font: 700 clamp(1.2rem, 3vw, 1.55rem) / 1.2 "Cinzel", serif;
}

.friends-sync-dialog-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.friends-sync-dialog-actions form {
  margin: 0;
}

.following-page .friends-sync-dialog-actions button {
  box-sizing: border-box;
  width: clamp(6.5rem, 25vw, 9.5rem);
  min-height: 2.85rem;
  border: 1px solid rgba(232, 196, 111, 0.65);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.28), 0 5px 12px rgba(0, 0, 0, 0.35);
  font-size: 0.88rem;
}

.following-page .friends-sync-dialog-actions .leaderboards-ghost-button {
  background: linear-gradient(180deg, #263b52, #142338);
  color: #f6ead0;
}

.following-page .friends-sync-dialog-actions .leaderboards-primary-button {
  background: linear-gradient(180deg, #ffe2a0, #c4913f);
  color: #1b2734;
}

.following-page .friends-sync-dialog-actions button:hover,
.following-page .friends-sync-dialog-actions button:focus-visible {
  border-color: #ffe2a0;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.4), 0 6px 16px rgba(0, 0, 0, 0.48);
}

.following-page .friends-sync-dialog-actions button:focus-visible {
  outline: 2px solid #ffe2a0;
  outline-offset: 3px;
}

.friends-sync-flow .ps-phero-body {
  padding-bottom: 1.4rem;
}

.friends-preview-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.friends-preview-counts li {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(213, 177, 101, 0.36);
  background: rgba(20, 34, 58, 0.65);
}

.friends-preview-counts strong {
  color: #fff6dd;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.friends-preview-counts span {
  color: #eee4d1;
  font-size: 0.9rem;
  line-height: 1.35;
}

.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-page .stats-player-collection-head,
  .following-page .following-player-row {
    grid-template-columns: minmax(9rem, 1.5fr) minmax(3rem, 0.32fr) minmax(7rem, 0.74fr) minmax(17rem, 1.16fr) minmax(7rem, 0.66fr);
  }

  .following-inline-status {
    font-size: 0.72rem;
  }

  .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: 800px) {
  .following-page .following-sync-prompt {
    flex-direction: column;
    text-align: center;
    padding: 1.2rem;
  }

  .following-search {
    width: 100%;
  }

  .following-page .stats-player-collection-head {
    display: none;
  }

  .following-page .following-player-row {
    display: grid;
    height: auto;
    min-height: 4.4rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity metric" "last-seen last-seen" "live actions";
    gap: 0.55rem 0.8rem;
    padding: 0.8rem;
  }

  .following-page .stats-player-identity { grid-area: identity; }
  .following-page .stats-player-metric { grid-area: metric; text-align: right; }
  .following-page .stats-player-last-seen { grid-area: last-seen; }
  .following-page .stats-player-live { grid-area: live; }
  .following-page .stats-player-actions { grid-area: actions; }
  .following-page .stats-player-mobile-label { display: block; }

  .following-page .following-sort-mobile {
    display: flex;
  }

  .friends-sync-flow .ps-phero-body {
    padding: 1.25rem 1.35rem 1.35rem;
  }

  .friends-sync-flow .ps-phero-title {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .friends-sync-body {
    padding: 1rem 0.8rem;
  }

  .friends-preview-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .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: 620px) {
  .following-page .following-player-row {
    grid-template-areas: "identity metric" "last-seen last-seen" "live live" "actions actions";
  }
}

@media (max-width: 430px) {
  .following-roster-frame .ps-band .following-player-count {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  .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;
  }
}