/**
 * Love Legend — единый компонент аватара с рамкой и декором.
 *
 * Слои (z-index):
 *   0 — .ll-avatar-decor   (glow/aura ПОД аватаром, расходится наружу)
 *   1 — .ll-avatar-img     (сам аватар, круглый, обрезан)
 *   2 — .ll-avatar-frame   (рамка ПОВЕРХ аватара, не блокирует клики)
 *
 * Размер задаётся через inline-style на родителе .ll-avatar (width/height в px).
 * Дочерние элементы — относительные (% от родителя), масштабируются автоматически.
 */

.ll-avatar {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 0; /* убираем baseline-щель под img */
    text-decoration: none;
    isolation: isolate; /* z-index стек ограничен этим компонентом */
}

.ll-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    background: #1a0b2e; /* fallback пока грузится */
}

/* Decor: glow/aura под аватаром. Чуть шире (130%), чтобы свечение
 * выходило за края avatar и было видимо. */
.ll-avatar-decor {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    /* css_style из БД задаёт box-shadow + animation */
}

/* Frame ПОВЕРХ avatar. 125% от avatar — чтобы внутренний прозрачный
 * круг PNG'шной рамки точно охватывал avatar без обрезки.
 * Math: avatar 100% / frame 125% = 80% — типичный диаметр прозрачного
 * центра у ornate-рамок Leonardo. Если кадрировать аккуратнее — можно
 * уменьшить до 120% (см. AVATAR_RENDERER_PLAN.md). */
.ll-avatar-frame {
    position: absolute;
    top: -12.5%;
    left: -12.5%;
    width: 125%;
    height: 125%;
    pointer-events: none;
    z-index: 2;
    border-radius: 50%;
}

/* Frame через CSS (без PNG): стиль из css_style — это border + box-shadow.
 * Тогда нам нужно НЕ выходить за пределы avatar, а наоборот — рамка
 * должна точно совпадать с avatar по размеру, иначе border будет «вокруг
 * пустоты». Compensate: для CSS-frames inset 0 (совпадение с avatar). */
.ll-avatar-frame.ll-frame-css {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Эффекты по rarity для PNG-рамок (PNG идёт «сверху», CSS-эффекты
 * подкручивают visibility и оживляют легендарки) */
.ll-avatar-frame.ll-frame-rarity-legendary {
    animation: ll-frame-rotate-slow 24s linear infinite;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.55));
}
.ll-avatar-frame.ll-frame-rarity-epic {
    animation: ll-frame-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
}
.ll-avatar-frame.ll-frame-rarity-rare {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

/* CSS-rarity вариант — анимация box-shadow (border остаётся on top
 * через z-index, drop-shadow не нужен) */
.ll-avatar-frame.ll-frame-css.ll-frame-rarity-legendary {
    animation: ll-frame-pulse 3s ease-in-out infinite;
}

@keyframes ll-frame-rotate-slow {
    to { transform: rotate(360deg); }
}
@keyframes ll-frame-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* hover-state для кликабельных аватаров */
a.ll-avatar:hover .ll-avatar-img {
    filter: brightness(1.05);
    transition: filter 0.2s ease;
}

/* Title-badge: текстовая плашка с цветом из user_titles. Рендерится
 * НЕ внутри .ll-avatar (титул — это про имя, не про аватар), а
 * рядом — через TitleRenderer. */
.ll-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
    /* color и background-color приходят inline из БД */
}
.ll-title-badge .ll-title-icon {
    font-size: 14px;
    line-height: 1;
}

/* Title rarity-glow для legendary и epic */
.ll-title-badge.ll-title-rarity-legendary {
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.ll-title-badge.ll-title-rarity-epic {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.45);
}