/* Keep complete public profile text inside each card at every viewport size. */
#player-profile-modal :is(.player-profile-content, .player-profile-header,
  .player-profile-identity, .player-profile-badges, .player-profile-rank-strip,
  .player-profile-section, .player-profile-highlights, .player-profile-highlight,
  .player-profile-record-grid, .player-profile-record, .player-profile-owner-tools,
  .player-profile-owner-copy) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#player-profile-modal #player-profile-content {
  min-width: 0;
  max-width: 100%;
}

#player-profile-modal .player-profile-header {
  align-items: start;
}

#player-profile-modal .player-profile-username {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.18;
}

#player-profile-modal :is(.player-profile-status, .player-profile-og-badge,
  .player-profile-rank-badge) {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.3;
  justify-content: center;
  text-align: center;
}

#player-profile-modal :is(.player-profile-meta-list, .player-profile-meta-list li,
  .player-profile-highlight strong, .player-profile-highlight span,
  .player-profile-owner-copy strong, .player-profile-owner-copy span,
  .player-profile-privacy) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.3;
}

#player-profile-modal .player-profile-record {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}

#player-profile-modal .player-profile-record span {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

#player-profile-modal .player-profile-record strong {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-inline-start: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: right;
  line-height: 1.3;
}

#player-profile-modal .player-profile-section-title {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

#player-profile-modal .player-profile-section-title::after {
  min-width: 0;
}

#player-profile-modal .player-profile-edit-own {
  height: auto;
  padding: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

#player-profile-modal #player-profile-title {
  padding-right: 76px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

@media (max-width: 520px) {
  #player-profile-modal #player-profile-title {
    padding-right: 64px;
  }

  /* Give the name and location the full card width on phones. */
  #player-profile-modal .player-profile-identity {
    display: contents;
  }

  #player-profile-modal .player-profile-photo {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  #player-profile-modal .player-profile-badges {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  #player-profile-modal .player-profile-username {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    text-align: center;
  }

  #player-profile-modal .player-profile-meta-list {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
  }

  #player-profile-modal .player-profile-rank-strip {
    grid-row: 4;
  }
}