/* Shared animated portrait and logo frame system. */
.avatar-frame {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(310px, 100%);
    aspect-ratio: 0.88;
    justify-self: end;
    overflow: visible;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 46% 46% 30% 30% / 32% 32% 24% 24%;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 45%),
        linear-gradient(135deg, rgba(var(--accent-1-rgb), 0.52), rgba(var(--accent-2-rgb), 0.24) 52%, rgba(var(--accent-3-rgb), 0.48));
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.46),
        inset 0 1px rgba(255, 255, 255, 0.11),
        0 0 80px rgba(var(--accent-2-rgb), 0.16);
}

.avatar-frame::before {
    position: absolute;
    z-index: 4;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.avatar-frame::after {
    position: absolute;
    z-index: 3;
    content: "";
    pointer-events: none;
}

.avatar-frame video {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    opacity: 0;
    transition: opacity 220ms ease;
}

.avatar-frame video.ready {
    opacity: 1;
}

.avatar-fallback {
    position: relative;
    z-index: 1;
    font-family: "Bungee", sans-serif;
    font-size: clamp(5rem, 11vw, 8rem);
    opacity: 0.28;
    text-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.avatar-orbit {
    position: absolute;
    z-index: 0;
    inset: -22px;
    border: 1px solid rgba(var(--accent-3-rgb), 0.3);
    border-radius: 50%;
    transform: rotate(-9deg);
}

.avatar-orbit::before,
.avatar-orbit::after {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 18px var(--accent-3);
    content: "";
}

.avatar-orbit::before {
    top: 18%;
    right: 3%;
}

.avatar-orbit::after {
    bottom: 15%;
    left: 5%;
}

.avatar-frame-ornament {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: none;
    border-radius: inherit;
    pointer-events: none;
}

.avatar-frame-ornament i {
    position: absolute;
    display: block;
}

/* None keeps the portrait crop but removes every decorative layer. */
.avatar-frame[data-frame="none"] {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(var(--accent-1-rgb), 0.44), rgba(var(--accent-2-rgb), 0.18) 52%, rgba(var(--accent-3-rgb), 0.4));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    animation: avatarFrameBreathe 5.8s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="none"]::before,
.avatar-frame[data-frame="none"]::after,
.avatar-frame[data-frame="none"] .avatar-frame-ornament,
.avatar-frame[data-frame="none"] .avatar-orbit {
    display: none;
}

/* Classic deliberately preserves the original V4 double-border treatment. */
.avatar-frame[data-frame="classic"] .avatar-frame-ornament {
    display: none;
}

.avatar-frame[data-frame="classic"] .avatar-orbit {
    animation: avatarFrameTurn 38s linear infinite;
}

/* Runebound uses a segmented outer seal and four theme-coloured rune stones. */
.avatar-frame[data-frame="runebound"] {
    border-color: rgba(var(--accent-3-rgb), 0.58);
    border-radius: 48% 48% 31% 31% / 34% 34% 23% 23%;
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.48),
        inset 0 0 34px rgba(var(--accent-1-rgb), 0.18),
        0 0 70px rgba(var(--accent-2-rgb), 0.24);
}

.avatar-frame[data-frame="runebound"]::before {
    inset: 7px;
    border-color: rgba(var(--accent-1-rgb), 0.6);
    box-shadow: inset 0 0 18px rgba(var(--accent-3-rgb), 0.16);
}

.avatar-frame[data-frame="runebound"]::after {
    inset: -12px;
    border-radius: inherit;
    background: repeating-conic-gradient(from -8deg, var(--accent-1) 0 2deg, transparent 2deg 12deg, var(--accent-3) 12deg 14deg, transparent 14deg 24deg);
    opacity: 0.72;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: avatarFrameTurn 46s linear infinite reverse;
}

.avatar-frame[data-frame="runebound"] .avatar-orbit {
    inset: -25px;
    border: 1px dashed rgba(var(--accent-2-rgb), 0.54);
    animation: avatarFrameTurn 34s linear infinite;
}

.avatar-frame[data-frame="runebound"] .avatar-frame-ornament {
    display: block;
}

.avatar-frame[data-frame="runebound"] .avatar-frame-ornament i {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.66);
    background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
    box-shadow: 0 0 18px rgba(var(--accent-3-rgb), 0.72);
    transform: rotate(45deg);
}

.avatar-frame[data-frame="runebound"] .avatar-frame-ornament i:nth-child(1) { top: 7%; left: 12%; }
.avatar-frame[data-frame="runebound"] .avatar-frame-ornament i:nth-child(2) { top: 7%; right: 12%; }
.avatar-frame[data-frame="runebound"] .avatar-frame-ornament i:nth-child(3) { right: 6%; bottom: 16%; }
.avatar-frame[data-frame="runebound"] .avatar-frame-ornament i:nth-child(4) { bottom: 16%; left: 6%; }

/* Ornate builds a heavier armour-like silhouette from CSS corner pieces. */
.avatar-frame[data-frame="ornate"] {
    border: 2px solid rgba(var(--accent-2-rgb), 0.78);
    border-radius: 42% 42% 24% 24% / 29% 29% 18% 18%;
    box-shadow:
        0 38px 92px rgba(0, 0, 0, 0.52),
        inset 0 0 0 3px rgba(255, 255, 255, 0.06),
        inset 0 0 32px rgba(var(--accent-3-rgb), 0.2),
        0 0 0 1px rgba(var(--accent-1-rgb), 0.38),
        0 0 74px rgba(var(--accent-2-rgb), 0.2);
}

.avatar-frame[data-frame="ornate"]::before {
    inset: 9px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(var(--accent-3-rgb), 0.34);
}

.avatar-frame[data-frame="ornate"]::after {
    inset: -8px;
    border: 1px solid rgba(var(--accent-1-rgb), 0.4);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 4px rgba(var(--accent-2-rgb), 0.08),
        0 0 30px rgba(var(--accent-3-rgb), 0.18);
    animation: avatarFrameGleam 5.6s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="ornate"] .avatar-orbit {
    display: none;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament {
    inset: -15px;
    display: block;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i {
    width: 54px;
    height: 54px;
    color: var(--accent-3);
    border-color: var(--accent-3);
    filter: drop-shadow(0 0 9px rgba(var(--accent-2-rgb), 0.54));
    animation: avatarFrameOrnatePulse 4.8s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(2),
.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(4) { animation-delay: -2.4s; }

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i::after {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: var(--accent-1);
    box-shadow: 0 0 14px rgba(var(--accent-3-rgb), 0.7);
    content: "";
    transform: rotate(45deg);
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(1) {
    top: 0;
    left: 0;
    border-top: 5px solid var(--accent-3);
    border-left: 5px solid var(--accent-3);
    border-radius: 22px 0 0;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(1)::after { top: -8px; left: -8px; }

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(2) {
    top: 0;
    right: 0;
    border-top: 5px solid var(--accent-3);
    border-right: 5px solid var(--accent-3);
    border-radius: 0 22px 0 0;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(2)::after { top: -8px; right: -8px; }

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(3) {
    right: 0;
    bottom: 0;
    border-right: 5px solid var(--accent-3);
    border-bottom: 5px solid var(--accent-3);
    border-radius: 0 0 18px;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(3)::after { right: -8px; bottom: -8px; }

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(4) {
    bottom: 0;
    left: 0;
    border-bottom: 5px solid var(--accent-3);
    border-left: 5px solid var(--accent-3);
    border-radius: 0 0 0 18px;
}

.avatar-frame[data-frame="ornate"] .avatar-frame-ornament i:nth-child(4)::after { bottom: -8px; left: -8px; }

/* Astral offsets two slow arcs and bright points around the portrait. */
.avatar-frame[data-frame="astral"] {
    border-color: rgba(var(--accent-1-rgb), 0.58);
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.46),
        inset 0 0 40px rgba(var(--accent-2-rgb), 0.15),
        0 0 94px rgba(var(--accent-3-rgb), 0.26);
}

.avatar-frame[data-frame="astral"]::before {
    border-color: rgba(var(--accent-3-rgb), 0.48);
}

.avatar-frame[data-frame="astral"]::after {
    inset: -14px -24px;
    border-top: 2px solid rgba(var(--accent-3-rgb), 0.7);
    border-right: 1px solid rgba(var(--accent-1-rgb), 0.3);
    border-bottom: 2px solid rgba(var(--accent-2-rgb), 0.58);
    border-left: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(var(--accent-3-rgb), 0.18);
    transform: rotate(-12deg);
    animation: avatarFrameTurn 52s linear infinite;
}

.avatar-frame[data-frame="astral"] .avatar-orbit {
    inset: -32px;
    border: 0;
    background: conic-gradient(from 40deg, transparent 0 12%, rgba(var(--accent-1-rgb), 0.76) 14% 24%, transparent 26% 56%, rgba(var(--accent-3-rgb), 0.7) 58% 72%, transparent 74%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    animation: avatarFrameTurn 42s linear infinite reverse;
}

.avatar-frame[data-frame="astral"] .avatar-frame-ornament {
    inset: -27px;
    display: block;
    animation: avatarFrameDrift 7s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="astral"] .avatar-frame-ornament i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px #fff, 0 0 20px var(--accent-3);
}

.avatar-frame[data-frame="astral"] .avatar-frame-ornament i:nth-child(1) { top: 10%; left: 14%; width: 5px; height: 5px; }
.avatar-frame[data-frame="astral"] .avatar-frame-ornament i:nth-child(2) { top: 3%; right: 24%; }
.avatar-frame[data-frame="astral"] .avatar-frame-ornament i:nth-child(3) { right: 2%; bottom: 28%; width: 5px; height: 5px; }
.avatar-frame[data-frame="astral"] .avatar-frame-ornament i:nth-child(4) { bottom: 8%; left: 9%; }

/* Portal forms a breathing aperture with two independently moving energy rings. */
.avatar-frame[data-frame="portal"] {
    border: 2px solid rgba(var(--accent-2-rgb), 0.72);
    border-radius: 49% 49% 35% 35% / 37% 37% 27% 27%;
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.48),
        inset 0 0 42px rgba(var(--accent-1-rgb), 0.2),
        0 0 88px rgba(var(--accent-2-rgb), 0.3);
    animation: avatarPortalBreathe 4.6s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="portal"]::before {
    inset: 6px;
    border: 2px solid rgba(var(--accent-3-rgb), 0.46);
    box-shadow: inset 0 0 24px rgba(var(--accent-2-rgb), 0.24);
}

.avatar-frame[data-frame="portal"]::after {
    inset: -15px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0 8%, var(--accent-3) 10% 24%, transparent 26% 42%, var(--accent-1) 44% 63%, transparent 65% 82%, var(--accent-2) 84% 96%, transparent 98%);
    opacity: 0.8;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: avatarFrameTurn 18s linear infinite;
}

.avatar-frame[data-frame="portal"] .avatar-orbit {
    inset: -27px;
    border: 2px solid rgba(var(--accent-1-rgb), 0.28);
    box-shadow: inset 0 0 28px rgba(var(--accent-3-rgb), 0.13), 0 0 22px rgba(var(--accent-2-rgb), 0.2);
    animation: avatarPortalRing 4.6s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="portal"] .avatar-frame-ornament {
    inset: -22px;
    display: block;
    animation: avatarFrameTurn 30s linear infinite reverse;
}

.avatar-frame[data-frame="portal"] .avatar-frame-ornament i {
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 16px var(--accent-3);
}

.avatar-frame[data-frame="portal"] .avatar-frame-ornament i:nth-child(1) { top: 1%; left: 48%; }
.avatar-frame[data-frame="portal"] .avatar-frame-ornament i:nth-child(2) { top: 49%; right: -1%; }
.avatar-frame[data-frame="portal"] .avatar-frame-ornament i:nth-child(3) { right: 48%; bottom: 0; }
.avatar-frame[data-frame="portal"] .avatar-frame-ornament i:nth-child(4) { top: 49%; left: -1%; }

/* Shardguard suspends four crystalline wards outside a quieter inner frame. */
.avatar-frame[data-frame="shardguard"] {
    border: 2px solid rgba(var(--accent-1-rgb), 0.65);
    border-radius: 44% 44% 27% 27% / 31% 31% 20% 20%;
    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(var(--accent-3-rgb), 0.15),
        0 0 68px rgba(var(--accent-1-rgb), 0.2);
}

.avatar-frame[data-frame="shardguard"]::before {
    inset: 8px;
    border-color: rgba(var(--accent-3-rgb), 0.46);
}

.avatar-frame[data-frame="shardguard"]::after {
    inset: -10px;
    border: 1px dashed rgba(var(--accent-2-rgb), 0.34);
    border-radius: inherit;
    animation: avatarFrameTurn 58s linear infinite reverse;
}

.avatar-frame[data-frame="shardguard"] .avatar-orbit {
    inset: -24px;
    border-color: rgba(var(--accent-1-rgb), 0.2);
    animation: avatarFrameTurn 46s linear infinite;
}

.avatar-frame[data-frame="shardguard"] .avatar-frame-ornament {
    inset: -25px;
    display: block;
}

.avatar-frame[data-frame="shardguard"] .avatar-frame-ornament i {
    width: 19px;
    height: 34px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), var(--accent-3) 24%, var(--accent-1) 74%);
    clip-path: polygon(50% 0, 100% 31%, 76% 100%, 24% 100%, 0 31%);
    filter: drop-shadow(0 0 12px rgba(var(--accent-3-rgb), 0.78));
    animation: avatarShardFloat 5.4s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="shardguard"] .avatar-frame-ornament i:nth-child(1) { top: 4%; left: 5%; transform: rotate(-32deg); }
.avatar-frame[data-frame="shardguard"] .avatar-frame-ornament i:nth-child(2) { top: 4%; right: 5%; transform: rotate(32deg); animation-delay: -2.7s; }
.avatar-frame[data-frame="shardguard"] .avatar-frame-ornament i:nth-child(3) { right: 0; bottom: 12%; transform: rotate(42deg); }
.avatar-frame[data-frame="shardguard"] .avatar-frame-ornament i:nth-child(4) { bottom: 12%; left: 0; transform: rotate(-42deg); animation-delay: -2.7s; }

/* Crowned uses sweeping crest pieces with a slow ceremonial shimmer. */
.avatar-frame[data-frame="crowned"] {
    border: 2px solid rgba(var(--accent-3-rgb), 0.76);
    border-radius: 45% 45% 22% 22% / 30% 30% 17% 17%;
    box-shadow:
        0 38px 94px rgba(0, 0, 0, 0.52),
        inset 0 0 0 3px rgba(255, 255, 255, 0.05),
        inset 0 0 36px rgba(var(--accent-2-rgb), 0.18),
        0 0 72px rgba(var(--accent-3-rgb), 0.22);
}

.avatar-frame[data-frame="crowned"]::before {
    inset: 8px;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.avatar-frame[data-frame="crowned"]::after {
    inset: -11px -19px;
    border-top: 5px double rgba(var(--accent-1-rgb), 0.7);
    border-bottom: 3px solid rgba(var(--accent-3-rgb), 0.5);
    border-radius: 50% 50% 24% 24%;
    filter: drop-shadow(0 0 12px rgba(var(--accent-2-rgb), 0.45));
    animation: avatarCrownShimmer 6.4s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="crowned"] .avatar-orbit {
    display: none;
}

.avatar-frame[data-frame="crowned"] .avatar-frame-ornament {
    inset: -24px -28px;
    display: block;
}

.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i {
    width: 72px;
    height: 28px;
    border-top: 4px solid var(--accent-3);
    filter: drop-shadow(0 0 9px rgba(var(--accent-3-rgb), 0.64));
    animation: avatarCrownWing 5.8s ease-in-out infinite alternate;
}

.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i:nth-child(1) { top: 3%; left: 4%; border-radius: 80% 0 0; transform: rotate(-24deg); }
.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i:nth-child(2) { top: 3%; right: 4%; border-radius: 0 80% 0 0; transform: rotate(24deg); animation-delay: -2.9s; }
.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i:nth-child(3),
.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i:nth-child(4) {
    width: 20px;
    height: 20px;
    bottom: 4%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: var(--accent-1);
    box-shadow: 0 0 16px var(--accent-3);
    transform: rotate(45deg);
}

.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i:nth-child(3) { right: 6%; }
.avatar-frame[data-frame="crowned"] .avatar-frame-ornament i:nth-child(4) { left: 6%; animation-delay: -2.9s; }

@keyframes avatarFrameTurn {
    to { transform: rotate(351deg); }
}

@keyframes avatarFrameDrift {
    from { transform: translate3d(-2px, 2px, 0); }
    to { transform: translate3d(3px, -3px, 0); }
}

@keyframes avatarFrameBreathe {
    from { filter: drop-shadow(0 0 4px rgba(var(--accent-2-rgb), 0.08)); }
    to { filter: drop-shadow(0 0 22px rgba(var(--accent-3-rgb), 0.28)); }
}

@keyframes avatarFrameGleam {
    from { opacity: 0.55; filter: brightness(0.86); }
    to { opacity: 1; filter: brightness(1.24); }
}

@keyframes avatarFrameOrnatePulse {
    from { opacity: 0.72; }
    to { opacity: 1; filter: drop-shadow(0 0 15px rgba(var(--accent-2-rgb), 0.78)); }
}

@keyframes avatarPortalBreathe {
    from { filter: saturate(0.92) brightness(0.96); }
    to { filter: saturate(1.16) brightness(1.06); }
}

@keyframes avatarPortalRing {
    from { opacity: 0.38; transform: rotate(-9deg) scale(0.985); }
    to { opacity: 0.85; transform: rotate(9deg) scale(1.025); }
}

@keyframes avatarShardFloat {
    from { translate: 0 3px; opacity: 0.7; }
    to { translate: 0 -5px; opacity: 1; }
}

@keyframes avatarCrownShimmer {
    from { opacity: 0.58; filter: brightness(0.82) drop-shadow(0 0 7px rgba(var(--accent-2-rgb), 0.3)); }
    to { opacity: 1; filter: brightness(1.28) drop-shadow(0 0 18px rgba(var(--accent-3-rgb), 0.62)); }
}

@keyframes avatarCrownWing {
    from { opacity: 0.64; }
    to { opacity: 1; }
}

.avatar-frame > img {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}