/* 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;
    line-height: 0;
    flex-shrink: 0;
}
.lendaAvatarImageHost > img.avtLenda {
    vertical-align: bottom;
    float: none !important;
    margin: 0 !important;
}
.lendaAvatarPositionedHost > img.avtLenda { position: static !important; }
.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 600ms ease-out both; }
.lendaAvatarBadgeIntro::before { animation: lendaBadgeSpark 330ms 90ms ease-out both; }
.lendaAvatarBadgeIntro::after { animation: lendaBadgeSpark 360ms 210ms ease-out both; }
@keyframes lendaBadgeIntro {
    0% { transform: translate(-8%, 8%) scale(.72); opacity: 0; }
    20% { opacity: 1; }
    60% { transform: translate(-8%, 8%) scale(1.08); }
    100% { transform: translate(-8%, 8%) scale(1); opacity: 1; }
}
@keyframes lendaBadgeSpark {
    0%, 100% { opacity: 0; transform: scale(.3); }
    35% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .lendaAvatarBadgeIntro,
    .lendaAvatarBadgeIntro::before,
    .lendaAvatarBadgeIntro::after { animation: none; }
}