/* Shared with the game: a small emblem, never a turn-like border or avatar glow. */
.lendaAvatarHost {
    position: relative;
    overflow: visible;
}
.lendaAvatarImageHost {
    display: inline-block;
    width: fit-content;
    flex-shrink: 0;
}
.lendaAvatarImageHost > img.avtLenda {
    /* No inner line box: the wrapper keeps the IMG's bottom-margin baseline. */
    display: block;
    float: none !important;
    margin: 0 !important;
}
.lendaAvatarPositionedHost > img.avtLenda { position: static !important; }
/* Anchor both header badges to the photo, independent of the menu line height. */
.navegaUserAvatar {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.navegaUserAvatar #navegaUserImg { display: block; }
.navegaUserAvatar > .vipMenu {
    position: absolute;
    right: -5px;
    bottom: 0;
    margin: 0;
    z-index: 3;
}
/* Stats puts the trophy before the photo; preserve its overlay after wrapping. */
.statsAvatar > .trophy { z-index: 1; }
.lendaAvatarBadge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    min-width: 14px;
    max-width: 90px;
    aspect-ratio: 1 / 1;
    z-index: 2;
    pointer-events: none;
    background: url('/img/badges/lenda.png') center / contain no-repeat;
    transform: translate(-8%, 8%);
    transform-origin: center;
}
.lendaAvatarBadge::before,
.lendaAvatarBadge::after {
    content: '';
    position: absolute;
    opacity: 0;
    background: #fff4d4;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.lendaAvatarBadge::before { left: 19.5%; top: 16.5%; width: 17%; height: 17%; }
.lendaAvatarBadge::after { left: 68.5%; top: 54.5%; width: 13%; height: 13%; }
.lendaAvatarBadgeIntro { animation: lendaBadgeIntro 3600ms ease-out both; }
.lendaAvatarBadgeIntro::before { animation: lendaBadgeSpark 1600ms 100ms ease-out 2 both; }
.lendaAvatarBadgeIntro::after { animation: lendaBadgeSpark 1600ms 350ms ease-out 2 both; }
.lendaAvatarEmber {
    position: absolute;
    width: 18%;
    height: 18%;
    opacity: 0;
    border-radius: 50%;
    clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
    background: #fff4d4;
    box-shadow: 0 0 4px 1px #ffb52e;
    pointer-events: none;
}
.lendaAvatarBadgeIntro > .lendaAvatarEmber {
    animation: lendaBadgeEmber 1500ms var(--delay) ease-out both;
}
@keyframes lendaBadgeEmber {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    20%, 45% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.1); }
}
@keyframes lendaBadgeIntro {
    0% { transform: translate(-8%, 8%) scale(.72); opacity: 0; }
    8% { opacity: 1; filter: drop-shadow(0 0 8px #ffae21) brightness(1.45); }
    12% { transform: translate(-8%, 8%) scale(1.30); }
    38% { filter: drop-shadow(0 0 5px #ffae21) brightness(1.15); }
    58% { filter: drop-shadow(0 0 9px #ffae21) brightness(1.4); }
    70% { transform: translate(-8%, 8%) scale(1.16); }
    100% { transform: translate(-8%, 8%) scale(1); opacity: 1; filter: none; }
}
@keyframes lendaBadgeSpark {
    0%, 100% { opacity: 0; transform: scale(.3); }
    35% { opacity: 1; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
    .lendaAvatarBadgeIntro,
    .lendaAvatarBadgeIntro::before,
    .lendaAvatarBadgeIntro::after,
    .lendaAvatarBadgeIntro > .lendaAvatarEmber { animation: none; }
}