/**
 * Avatar Rendering System
 * CSS-based cosmetic effects for user avatars.
 */

/* ── Container ─────────────────────────────────────────── */

.avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ── Circle ────────────────────────────────────────────── */

.avatar-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-stats);
    color: #fff;
    text-transform: uppercase;
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* ── Sizes ─────────────────────────────────────────────── */

.avatar-sm .avatar-circle {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.avatar-md .avatar-circle {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.avatar-lg .avatar-circle {
    width: 96px;
    height: 96px;
    font-size: 40px;
}

/* ── Hat (above circle) ────────────────────────────────── */

.avatar-hat {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.avatar-sm .avatar-hat {
    top: -12px;
    font-size: 16px;
}

.avatar-md .avatar-hat {
    top: -16px;
    font-size: 20px;
}

.avatar-lg .avatar-hat {
    top: -28px;
    font-size: 36px;
}

/* ── Glasses (over the eyes of the DiceBear face) ─────────── */
/* DiceBear "adventurer" places the eyes at ~40 % from the top,
 * not at geometric centre. Positioning glasses at 50 % dropped
 * them on the mouth/nose and students on 2026-04-13 reported
 * "Brille saß halb im Auge" (#722). Move the emoji up to 42 %
 * and scale it so it spans most of the face instead of hovering
 * as a tiny accessory. */

.avatar-glasses {
    position: absolute;
    left: 50%;
    top: 36%;
    transform: translate(-50%, -50%);
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

.avatar-sm .avatar-glasses {
    font-size: 18px;
}

.avatar-md .avatar-glasses {
    font-size: 26px;
}

.avatar-lg .avatar-glasses {
    font-size: 52px;
}

/* ── Title (below avatar) ──────────────────────────────── */
/* Font choice: use the regular body font in italic so the title
 * reads like a subtitle instead of Orbitron "code look". Tobias
 * in 8a reported "Titel steht in Programmiersprache unter dem
 * Avatar" (#740) on 2026-04-14 — the old Orbitron stat font made
 * words like "Meister" look like a monospaced label. */

.avatar-title {
    font-family: var(--font-body, inherit);
    font-style: italic;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-muted, #888);
    text-align: center;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-lg .avatar-title {
    font-size: 14px;
    max-width: 140px;
}

/* ── Background Classes ────────────────────────────────── */

.avatar-bg-default {
    background: var(--primary-light);
}

.avatar-bg-sky {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.avatar-bg-forest {
    background: linear-gradient(135deg, #55efc4, #00b894);
}

.avatar-bg-space {
    background: linear-gradient(135deg, #6c5ce7, #2d1b69);
}

.avatar-bg-rainbow {
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
}

.avatar-bg-galaxy {
    background: linear-gradient(135deg, #0c0032, #190061, #6c5ce7, #240046);
}

/* ── Border Classes ────────────────────────────────────── */

.avatar-border-none .avatar-circle {
    box-shadow: none;
}

.avatar-border-silver .avatar-circle {
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.7), 0 0 16px rgba(192, 192, 192, 0.3);
}

.avatar-border-gold .avatar-circle {
    box-shadow: 0 0 8px rgba(253, 203, 110, 0.8), 0 0 16px rgba(253, 203, 110, 0.4);
}

.avatar-border-fire .avatar-circle {
    animation: borderPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(225, 112, 85, 0.8), 0 0 20px rgba(255, 71, 87, 0.5);
}

.avatar-border-diamond .avatar-circle {
    animation: borderPulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(84, 160, 255, 0.8), 0 0 24px rgba(116, 185, 255, 0.5);
}

.avatar-border-dichter-gold .avatar-circle {
    border: 3px solid #fdcb6e;
    box-shadow: 0 0 12px rgba(253, 203, 110, 0.9), 0 0 24px rgba(253, 203, 110, 0.5), inset 0 0 8px rgba(253, 203, 110, 0.2);
}

/* ── Keyframes ─────────────────────────────────────────── */

@keyframes borderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.04);
        opacity: 0.85;
    }
}

/* ── Dark Mode ─────────────────────────────────────────── */

[data-theme="dark"] .avatar-bg-default {
    background: var(--primary-dark, #4834d4);
}

[data-theme="dark"] .avatar-border-silver .avatar-circle {
    box-shadow: 0 0 10px rgba(220, 220, 220, 0.5), 0 0 20px rgba(220, 220, 220, 0.2);
}

[data-theme="dark"] .avatar-border-gold .avatar-circle {
    box-shadow: 0 0 10px rgba(253, 203, 110, 0.6), 0 0 20px rgba(253, 203, 110, 0.3);
}

[data-theme="dark"] .avatar-title {
    color: var(--text-muted, #aaa);
}