.avatar-placeholder img[data-player-avatar] { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-placeholder [data-player-avatar-fallback] { position: relative; z-index: 1; }
.avatar-placeholder i { z-index: 2; }
.profile-portrait-collection { padding: clamp(20px, 3vw, 30px); }
.profile-portrait-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.profile-portrait-heading h2 { margin: 3px 0 6px; color: #fff; font: 900 clamp(1.4rem, 3vw, 2rem)/1.1 "Bungee", sans-serif; }
.profile-portrait-heading p:last-child { margin: 0; color: #aeb8dc; font-weight: 750; }
.profile-portrait-heading > span { padding: 8px 12px; border: 1px solid rgba(91, 228, 255, .42); border-radius: 999px; color: #86eeff; background: rgba(20, 90, 114, .26); font-size: .7rem; font-weight: 1000; }
.profile-portrait-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.profile-portrait-grid button, .profile-portrait-grid article { display: grid; gap: 10px; min-width: 0; padding: 10px; border: 1px solid rgba(124, 140, 205, .34); border-radius: 18px; color: #fff; background: rgba(7, 9, 38, .7); text-align: left; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.profile-portrait-grid button { cursor: pointer; }
.profile-portrait-grid button:hover, .profile-portrait-grid button:focus-visible { transform: translateY(-3px); border-color: rgba(84, 225, 255, .7); box-shadow: 0 10px 28px rgba(0, 0, 24, .38); }
.profile-portrait-grid button.is-selected, .profile-portrait-grid article.is-selected { border-color: #ffcf61; background: linear-gradient(145deg, rgba(86, 50, 104, .75), rgba(8, 49, 76, .8)); box-shadow: 0 0 24px rgba(255, 201, 89, .18); }
.profile-portrait-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.profile-portrait-grid button > span, .profile-portrait-grid article > span { display: grid; gap: 4px; }
.profile-portrait-grid strong { overflow-wrap: anywhere; font-size: .82rem; }
.profile-portrait-grid small { color: #9fadd5; font-size: .66rem; line-height: 1.25; }
.profile-portrait-grid b { justify-self: start; padding: 6px 9px; border-radius: 999px; color: #09102b; background: #72eaff; font-size: .63rem; }
.profile-portrait-grid .is-selected b { background: #ffd56b; }
.profile-portrait-status { margin: 16px 0 0; color: #b9c5e9; font-size: .78rem; font-weight: 800; }
.profile-collection-coming-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }

@media (max-width: 900px) { .profile-portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .profile-portrait-heading { align-items: flex-start; flex-direction: column; }
  .profile-portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-collection-coming-soon { grid-template-columns: 1fr; }
}

.profile-editor-portraits { min-width: 0; margin: 4px 0 2px; padding: 14px; border: 1px solid rgba(91, 226, 255, .28); border-radius: 16px; background: rgba(7, 10, 38, .58); }
.profile-editor-portraits legend { padding: 0 7px; color: #fff; font: 900 .78rem/1 "Bungee", sans-serif; }
.profile-editor-portraits > small { display: block; margin: 0 0 11px; color: #9eabd5; font-size: .68rem; line-height: 1.35; }
.profile-editor-portrait-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.profile-editor-portrait-grid button { position: relative; display: grid; gap: 5px; min-width: 0; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #fff; background: rgba(5, 7, 30, .72); cursor: pointer; }
.profile-editor-portrait-grid button:hover, .profile-editor-portrait-grid button:focus-visible { border-color: rgba(77, 226, 255, .66); }
.profile-editor-portrait-grid button.is-selected { border-color: #ffd263; box-shadow: 0 0 16px rgba(255, 200, 73, .18); }
.profile-editor-portrait-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.profile-editor-portrait-grid span { overflow: hidden; font-size: .55rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.profile-editor-portrait-grid b { padding: 4px; border-radius: 7px; color: #09102b; background: #72eaff; font-size: .53rem; }
.profile-editor-portrait-grid button.is-selected b { background: #ffd263; }

@media (max-width: 560px) {
  .profile-editor-portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}