/* One shared presentation for public and private player profiles. */
body.account-layout .account-side-profile[aria-current="page"] {
  background: #45404f;
  color: #e1d0ff;
  box-shadow: inset 3px 0 #b497ef;
}
.profile-unified { min-width: 0; }
.profile-unified .public-avatar-look {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, calc(270px - 1.5cm)) minmax(0, 1fr);
  gap: 28px;
}
.profile-unified .public-avatar-look > div { min-width: 0; overflow-wrap: anywhere; }
.profile-unified .public-avatar-full { width: 100%; max-width: calc(270px - 1.5cm); justify-self: center; }
.profile-unified .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-unified .stat-card > span { font-size: 11px; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; }
.profile-unified .public-result-card { min-width: 0; }
.profile-unified .public-result-card h3 { overflow-wrap: anywhere; }
.profile-unified .public-result-card dl > div { min-width: 0; }
.profile-unified .public-result-card dt { min-width: 0; overflow-wrap: anywhere; }
.profile-unified .public-result-card dd { max-width: 60%; overflow-wrap: anywhere; white-space: normal; }
@container account-main (max-width: 940px) {
  .profile-unified .profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container account-main (max-width: 680px) {
  .profile-unified .public-results-grid { grid-template-columns: minmax(0, 1fr); }
}
@container account-main (max-width: 600px) {
  .profile-unified .public-avatar-look { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; }
  .profile-unified .public-avatar-full { max-width: calc(240px - 1.5cm); }
}
@container account-main (max-width: 540px) {
  .profile-unified .profile-main { display: block; }
  .profile-unified .profile-main h1 { font-size: 26px; }
  .profile-unified .public-profile-label { margin-bottom: 8px; }
  .profile-unified .public-profile-address { margin-bottom: 12px; }
  .profile-unified .member-since { margin: 18px 0 0; }
  .profile-unified .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-unified .avatar-change-button { width: 100%; padding: 8px 4px; font-size: 12px; }
  .profile-unified .public-result-card { padding: 18px; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 761px) and (max-width: 1284px) {
    .profile-unified .profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 761px) and (max-width: 1024px), (max-width: 680px) {
    .profile-unified .public-results-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (min-width: 761px) and (max-width: 944px), (max-width: 600px) {
    .profile-unified .public-avatar-look { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; }
    .profile-unified .public-avatar-full { max-width: calc(240px - 1.5cm); }
  }
  @media (max-width: 540px) {
    .profile-unified .profile-main { display: block; }
    .profile-unified .profile-main h1 { font-size: 26px; }
    .profile-unified .public-profile-address { margin-bottom: 12px; }
    .profile-unified .member-since { margin: 18px 0 0; }
    .profile-unified .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-unified .avatar-change-button { width: 100%; padding: 8px 4px; font-size: 12px; }
  }
}

/* Exact account rating, displayed in gold without additional data requests. */
.profile-unified .account-profile-rating {
  margin:24px 0 0;
  color:#ffd76a;
  font-size:clamp(32px,3.2vw,46px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 1px #6b460d,0 0 24px #ffd15b33;
  overflow-wrap:anywhere;
}
.profile-unified .public-avatar-look--rating-only {
  grid-template-columns:minmax(0,1fr);
  min-height:180px;
}
.profile-unified .public-avatar-look--rating-only .account-profile-rating { margin:0; }
@container account-main (max-width:600px) {
  .profile-unified .account-profile-rating { font-size:32px; }
}
@media(max-width:600px) {
  .profile-unified .account-profile-rating { font-size:32px; }
}

/* A 1.5 cm width reduction keeps the 3:4 avatar proportional and shortens the banner by 2 cm. */

/* The private profile identity meets the cover; the square portrait crosses its edge. */
.profile-unified .profile-card {
  --profile-card-inset:28px;
  --profile-avatar-overlap:28px;
  --profile-avatar-size:146px;
  grid-template-columns:var(--profile-avatar-size) minmax(0,1fr);
  padding:var(--profile-card-inset);
  align-items:start;
  row-gap:14px;
}
.profile-unified .profile-account-bio {
  grid-column:1/-1;
  min-width:0;
}
.profile-unified .public-avatar-look + .profile-card {
  position:relative;
  z-index:1;
  margin-top:-28px;
}
.profile-unified .public-avatar-look + .profile-card > .profile-avatar {
  position:relative;
  margin-top:calc(-1 * (var(--profile-card-inset) + var(--profile-avatar-overlap) + 1px));
}
.profile-unified .profile-card > .profile-avatar > .avatar {
  display:grid;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  box-sizing:border-box;
  border:4px solid #292b2f;
  border-radius:12px;
  background:#292b2f;
  box-shadow:0 5px 18px #0004;
}
@container account-main (max-width:600px) {
  .profile-unified .profile-card {
    --profile-card-inset:20px;
    --profile-avatar-size:104px;
    gap:18px;
  }
}
@supports not (container-type:inline-size) {
  @media (min-width:761px) and (max-width:944px), (max-width:600px) {
    .profile-unified .profile-card {
      --profile-card-inset:20px;
      --profile-avatar-size:104px;
      gap:18px;
    }
  }
}

/* Keep profile and avatar editors at the far end of the private name row. */
.profile-unified .profile-name-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 20px;
  margin-bottom:8px;
  min-width:0;
}
.profile-unified .profile-name-row h1 {
  flex:1 1 180px;
  min-width:0;
  margin:0;
}
.profile-unified .profile-edit-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  flex:0 1 auto;
  gap:10px;
  margin-left:auto;
  min-width:0;
  max-width:100%;
}
.profile-unified .profile-edit-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  max-width:100%;
  min-height:44px;
  padding:10px 18px;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Accepted friends count below the small avatar; no polling or extra request. */
.profile-unified .profile-friends-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:100%;
  min-height:40px;
  margin-top:10px;
  padding:7px 12px;
  border:1px solid #54565f;
  border-radius:999px;
  background:#3c3e45;
  color:#cfd1da;
  font-size:14px;
  line-height:1.4;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.profile-unified .profile-friends-count strong {
  color:#f1f2f7;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.profile-unified .profile-friends-count:hover {
  background:#494b55;
  border-color:#a691d9;
  color:#fff;
}

/* Center the two-line rating near the cover's upper-third line; keep the avatar centered. */
.profile-unified .account-profile-rating-actions {
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding-top:28px;
  margin-inline-start:clamp(12px,2.1vw,36px);
  max-width:100%;
  box-sizing:border-box;
}
.profile-unified .account-profile-rating-actions .account-profile-rating { margin:0; }
.profile-unified .account-profile-earn-points {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:46px;
  padding:11px 18px;
  box-sizing:border-box;
  border:1px solid #a782ed;
  border-radius:10px;
  background:linear-gradient(135deg,#8051d6,#6040b2);
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
}
.profile-unified .account-profile-earn-points:hover { background:linear-gradient(135deg,#9260e9,#7350c8);border-color:#c1a1fc; }
.profile-unified .account-profile-earn-points:focus-visible { outline:3px solid #dbc5ff;outline-offset:4px; }
.profile-unified .public-avatar-look--rating-only .account-profile-rating-actions { padding-top:0; }
@container account-main (max-width:800px) {
  .profile-unified .public-avatar-look { grid-template-columns:minmax(0,1fr);gap:18px;text-align:center; }
  .profile-unified .account-profile-rating-actions { align-items:center;padding-top:0;margin-inline-start:0; }
}
@supports not (container-type:inline-size) {
  @media (min-width:761px) and (max-width:1144px), (max-width:800px) {
    .profile-unified .public-avatar-look { grid-template-columns:minmax(0,1fr);gap:18px;text-align:center; }
    .profile-unified .account-profile-rating-actions { align-items:center;padding-top:0;margin-inline-start:0; }
  }
}

/* Public profiles use the same container breakpoints without an account sidebar. */
body[data-page="profile"] .main-content { container-type:inline-size;container-name:account-main; }
.profile-unified .profile-friend-actions { display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-left:auto;max-width:100%; }
.profile-unified .profile-friend-actions .friends-status { flex-basis:100%;margin:0; }
.profile-unified .profile-friend-actions .button { min-height:44px;font-size:16px; }