/* Rank rewards share a clear avatar opening; ornaments scale from 32px upward. */
.profile-frame[data-frame='rank-unranked'] {
    --rank-frame-color: #94a3b8;
    --rank-frame-art: url('/assets/frames/rank-unranked.svg');
}
.profile-frame[data-frame='rank-bronze'] {
    --rank-frame-color: #d39a60;
    --rank-frame-art: url('/assets/frames/rank-bronze.svg');
}
.profile-frame[data-frame='rank-silver'] {
    --rank-frame-color: #c9d7e5;
    --rank-frame-art: url('/assets/frames/rank-silver.svg');
}
.profile-frame[data-frame='rank-gold'] {
    --rank-frame-color: #e7bf59;
    --rank-frame-art: url('/assets/frames/rank-gold.svg');
}
.profile-frame[data-frame='rank-platinum'] {
    --rank-frame-color: #80e3d8;
    --rank-frame-art: url('/assets/frames/rank-platinum.svg');
}
.profile-frame[data-frame='rank-diamond'] {
    --rank-frame-color: #9dcaff;
    --rank-frame-art: url('/assets/frames/rank-diamond.svg');
}
.profile-frame[data-frame='rank-ruby'] {
    --rank-frame-color: #fb8da6;
    --rank-frame-art: url('/assets/frames/rank-ruby.svg');
}
.profile-frame[data-frame='rank-ultimate'] {
    --rank-frame-color: #d0a0ff;
    --rank-frame-art: url('/assets/frames/rank-ultimate.svg');
}

:root .profile-frame[data-frame^='rank-'][data-frame] {
    --frame-a: var(--rank-frame-color);
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    border: 0 !important;
    border-image: none !important;
    outline: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

:root .profile-frame[data-frame^='rank-'][data-frame]::before {
    content: '' !important;
    position: absolute !important;
    z-index: 4 !important;
    inset: -16% !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--rank-frame-art) center / contain no-repeat !important;
    box-shadow: none !important;
    mask: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    pointer-events: none;
}

:root .profile-frame[data-frame^='rank-'][data-frame]::after {
    display: none !important;
}

:root .profile-frame[data-frame='rank-ultimate'][data-frame]::before {
    filter: drop-shadow(0 0 3px #b47aee65) !important;
}

.frame-item:has([data-frame^='rank-']) {
    border-color: #91a9c43d;
}

.frame-item:has([data-frame^='rank-']) .frame-preview {
    margin: 12px 0 14px;
}

.frame-item:has([data-frame^='rank-']) small {
    color: #c8d8ec;
}