/* ═══════════════════════════════════════════════════════════
   VFS Studio — Profile Flare Cosmetic Effects
   All CSS-only avatar effects. Applied via <span class="avatar-flare flare-{slug}">
   Zero layout impact — no padding on wrapper, effects are purely visual.
   ═══════════════════════════════════════════════════════════ */

/* ── Base wrapper ── */
.avatar-flare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    /* Creates stacking context so ::before z-index:-1 stays behind avatar, not behind page */
    isolation: isolate;
    overflow: visible;
}
.avatar-flare > img,
.avatar-flare > div,
.avatar-flare > .avatar,
.avatar-flare > .card-avatar,
.avatar-flare > .detail-avatar,
.avatar-flare > .profile-avatar,
.avatar-flare > .chat-row-avatar,
.avatar-flare > .msg-row-avatar,
.avatar-flare > .row-avatar,
.avatar-flare > .inbox-avatar,
.avatar-flare > .user-avatar,
.avatar-flare > .auth-avatar {
    border-radius: 50%;
    border: none !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   COMMON (60%) — Solid colored rings (outline — no layout impact)
   ═══════════════════════════════════════════════════════════ */

.flare-teal-ring    { outline: 2px solid #5DCAA5; outline-offset: 1px; }
.flare-crimson-ring { outline: 2px solid #f38ba8; outline-offset: 1px; }
.flare-gold-ring    { outline: 2px solid #f9e2af; outline-offset: 1px; }
.flare-silver-ring  { outline: 2px solid #bac2de; outline-offset: 1px; }
.flare-purple-ring  { outline: 2px solid #cba6f7; outline-offset: 1px; }
.flare-white-ring   { outline: 2px solid #cdd6f4; outline-offset: 1px; }
.flare-emerald-ring { outline: 2px solid #a6e3a1; outline-offset: 1px; }
.flare-cobalt-ring  { outline: 2px solid #89b4fa; outline-offset: 1px; }
.flare-coral-ring   { outline: 2px solid #fab387; outline-offset: 1px; }
.flare-slate-ring   { outline: 2px solid #6c7086; outline-offset: 1px; }
.flare-amber-ring   { outline: 2px solid #f5c691; outline-offset: 1px; }
.flare-rose-ring    { outline: 2px solid #f5c2e7; outline-offset: 1px; }
.flare-mint-ring    { outline: 2px solid #94e2d5; outline-offset: 1px; }
.flare-peach-ring   { outline: 2px solid #f2cdcd; outline-offset: 1px; }
.flare-sky-ring     { outline: 2px solid #74c7ec; outline-offset: 1px; }

/* ═══════════════════════════════════════════════════════════
   UNCOMMON (25%) — Animated glows (box-shadow only — no layout impact)
   ═══════════════════════════════════════════════════════════ */

.flare-pulse-gold {
    animation: flare-pulse-gold 2s ease-in-out infinite;
}
@keyframes flare-pulse-gold {
    0%, 100% { box-shadow: 0 0 4px 2px rgba(249, 226, 175, 0.3); }
    50%      { box-shadow: 0 0 12px 4px rgba(249, 226, 175, 0.7); }
}

.flare-pulse-teal {
    animation: flare-pulse-teal 2s ease-in-out infinite;
}
@keyframes flare-pulse-teal {
    0%, 100% { box-shadow: 0 0 4px 2px rgba(148, 226, 213, 0.3); }
    50%      { box-shadow: 0 0 12px 4px rgba(148, 226, 213, 0.7); }
}

.flare-pulse-crimson {
    animation: flare-pulse-crimson 2s ease-in-out infinite;
}
@keyframes flare-pulse-crimson {
    0%, 100% { box-shadow: 0 0 4px 2px rgba(243, 139, 168, 0.3); }
    50%      { box-shadow: 0 0 12px 4px rgba(243, 139, 168, 0.7); }
}

.flare-shimmer-silver {
    animation: flare-shimmer-silver 2.5s linear infinite;
}
@keyframes flare-shimmer-silver {
    0%   { box-shadow: 0 0 6px 2px rgba(186, 194, 222, 0.2); }
    50%  { box-shadow: 0 0 14px 4px rgba(186, 194, 222, 0.6); }
    100% { box-shadow: 0 0 6px 2px rgba(186, 194, 222, 0.2); }
}

.flare-shimmer-blue {
    animation: flare-shimmer-blue 2.5s linear infinite;
}
@keyframes flare-shimmer-blue {
    0%   { box-shadow: 0 0 6px 2px rgba(137, 180, 250, 0.2); }
    50%  { box-shadow: 0 0 14px 4px rgba(137, 180, 250, 0.6); }
    100% { box-shadow: 0 0 6px 2px rgba(137, 180, 250, 0.2); }
}

.flare-breathing-purple {
    animation: flare-breathing-purple 3s ease-in-out infinite;
}
@keyframes flare-breathing-purple {
    0%, 100% { box-shadow: 0 0 3px 1px rgba(203, 166, 247, 0.2); }
    50%      { box-shadow: 0 0 10px 5px rgba(203, 166, 247, 0.5); }
}

.flare-neon-green {
    animation: flare-neon-green 1.5s ease-in-out infinite;
}
@keyframes flare-neon-green {
    0%, 100% { box-shadow: 0 0 6px 2px rgba(64, 255, 64, 0.3), 0 0 0 1px rgba(64, 255, 64, 0.5); }
    50%      { box-shadow: 0 0 16px 6px rgba(64, 255, 64, 0.7), 0 0 0 1px rgba(64, 255, 64, 0.8); }
}

.flare-neon-pink {
    animation: flare-neon-pink 1.5s ease-in-out infinite;
}
@keyframes flare-neon-pink {
    0%, 100% { box-shadow: 0 0 6px 2px rgba(255, 64, 255, 0.3), 0 0 0 1px rgba(255, 64, 255, 0.5); }
    50%      { box-shadow: 0 0 16px 6px rgba(255, 64, 255, 0.7), 0 0 0 1px rgba(255, 64, 255, 0.8); }
}

.flare-rainbow-spin::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(#f38ba8, #f9e2af, #a6e3a1, #89b4fa, #cba6f7, #f38ba8);
    animation: flare-rainbow-rotate 3s linear infinite;
}
@keyframes flare-rainbow-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gradient effects use ::before as an underlay ring — no padding needed */
.flare-gradient-sunset::before,
.flare-gradient-ocean::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: -1;
}
.flare-gradient-sunset::before {
    background: linear-gradient(135deg, #f38ba8, #fab387, #f9e2af);
    background-size: 200% 200%;
    animation: flare-gradient-rotate 4s linear infinite;
}
.flare-gradient-ocean::before {
    background: linear-gradient(135deg, #89dceb, #89b4fa, #74c7ec);
    background-size: 200% 200%;
    animation: flare-gradient-rotate 4s linear infinite;
}
@keyframes flare-gradient-rotate {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════════
   RARE (10%) — Corner badge + glow ring (box-shadow — no layout impact)
   ═══════════════════════════════════════════════════════════ */

.flare-fire-badge {
    box-shadow: 0 0 0 2px #f38ba8, 0 0 8px 2px rgba(243, 139, 168, 0.4);
}
.flare-fire-badge::after {
    content: '\1F525';
    position: absolute;
    top: -9px;
    right: -2px;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(243, 139, 168, 0.8));
    z-index: 1;
}

.flare-crown-badge {
    box-shadow: 0 0 0 2px #f9e2af, 0 0 8px 2px rgba(249, 226, 175, 0.4);
}
.flare-crown-badge::after {
    content: '\1F451';
    position: absolute;
    top: -9px;
    right: -2px;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(249, 226, 175, 0.8));
    z-index: 1;
}

.flare-star-badge {
    box-shadow: 0 0 0 2px #f9e2af, 0 0 8px 2px rgba(249, 226, 175, 0.4);
}
.flare-star-badge::after {
    content: '\2B50';
    position: absolute;
    top: -9px;
    right: -2px;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(249, 226, 175, 0.8));
    z-index: 1;
}

.flare-lightning-badge {
    box-shadow: 0 0 0 2px #89b4fa, 0 0 8px 2px rgba(137, 180, 250, 0.4);
}
.flare-lightning-badge::after {
    content: '\26A1';
    position: absolute;
    top: -9px;
    right: -2px;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(137, 180, 250, 0.8));
    z-index: 1;
}

.flare-skull-badge {
    box-shadow: 0 0 0 2px #cba6f7, 0 0 8px 2px rgba(203, 166, 247, 0.4);
}
.flare-skull-badge::after {
    content: '\1F480';
    position: absolute;
    top: -9px;
    right: -2px;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(203, 166, 247, 0.8));
    z-index: 1;
}

.flare-diamond-badge {
    box-shadow: 0 0 0 2px #89dceb, 0 0 8px 2px rgba(137, 220, 235, 0.4);
}
.flare-diamond-badge::after {
    content: '\1F48E';
    position: absolute;
    top: -9px;
    right: -2px;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(137, 220, 235, 0.8));
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   EPIC (4%) — Combo effects (animated glow + badge)
   ═══════════════════════════════════════════════════════════ */

.flare-inferno-aura {
    animation: flare-inferno 1.5s ease-in-out infinite;
}
.flare-inferno-aura::after {
    content: '\1F525';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 1.5s ease-in-out infinite;
    z-index: 1;
}
@keyframes flare-inferno {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(243, 139, 168, 0.4), 0 0 0 2px #f38ba8; }
    50%      { box-shadow: 0 0 16px 6px rgba(250, 179, 135, 0.6), 0 0 0 2px #fab387; }
}
@keyframes flare-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}

.flare-royal-presence {
    animation: flare-royal 2s ease-in-out infinite;
}
.flare-royal-presence::after {
    content: '\1F451';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes flare-royal {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(249, 226, 175, 0.3), 0 0 0 2px #f9e2af; }
    50%      { box-shadow: 0 0 18px 6px rgba(249, 226, 175, 0.6), 0 0 0 2px #f9e2af; }
}

.flare-electric-storm {
    animation: flare-electric 0.8s steps(3) infinite;
}
.flare-electric-storm::after {
    content: '\26A1';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 0.8s steps(3) infinite;
    z-index: 1;
}
@keyframes flare-electric {
    0%   { box-shadow: 0 0 6px 2px rgba(137, 180, 250, 0.3), 0 0 0 2px #89b4fa; }
    33%  { box-shadow: 0 0 16px 5px rgba(137, 180, 250, 0.7), 0 0 0 2px #74c7ec; }
    66%  { box-shadow: 0 0 4px 1px rgba(137, 180, 250, 0.2), 0 0 0 2px #89b4fa; }
    100% { box-shadow: 0 0 12px 4px rgba(137, 180, 250, 0.5), 0 0 0 2px #89dceb; }
}

.flare-void-pulse {
    animation: flare-void 2s ease-in-out infinite;
}
.flare-void-pulse::after {
    content: '\1F573\FE0F';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes flare-void {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(88, 91, 112, 0.5), 0 0 0 2px #45475a, inset 0 0 6px rgba(88, 91, 112, 0.3); }
    50%      { box-shadow: 0 0 20px 8px rgba(108, 112, 134, 0.7), 0 0 0 2px #6c7086, 0 0 30px 4px rgba(203, 166, 247, 0.2), inset 0 0 10px rgba(88, 91, 112, 0.5); }
}

/* ═══════════════════════════════════════════════════════════
   LEGENDARY (1%) — Full animated aura
   Uses ::before for gradient ring underlay — zero layout impact.
   ::after reserved for orbiting emoji.
   ═══════════════════════════════════════════════════════════ */

.flare-prismatic-lord {
    animation: flare-prismatic-spin 3s linear infinite;
}
.flare-prismatic-lord::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(
        #f38ba8, #fab387, #f9e2af, #a6e3a1,
        #89dceb, #89b4fa, #cba6f7, #f5c2e7, #f38ba8
    );
}
.flare-prismatic-lord::after {
    content: '\2728'; /* sparkles */
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-orbit-spin 3s linear infinite;
    z-index: 1;
}
@keyframes flare-prismatic-spin {
    0%   { filter: hue-rotate(0deg); box-shadow: 0 0 12px 4px rgba(203, 166, 247, 0.5); }
    50%  { filter: hue-rotate(180deg); box-shadow: 0 0 20px 6px rgba(137, 180, 250, 0.6); }
    100% { filter: hue-rotate(360deg); box-shadow: 0 0 12px 4px rgba(203, 166, 247, 0.5); }
}
@keyframes flare-orbit-spin {
    0%   { top: -9px; right: 50%; transform: translateX(50%); }
    25%  { top: 50%; right: -10px; transform: translateY(-50%); }
    50%  { top: calc(100% + 4px); right: 50%; transform: translateX(50%); }
    75%  { top: 50%; right: calc(100% + 4px); transform: translateY(-50%); }
    100% { top: -9px; right: 50%; transform: translateX(50%); }
}

.flare-shadow-monarch {
    animation: flare-shadow 2.5s ease-in-out infinite;
}
.flare-shadow-monarch::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: -1;
    background: #313244;
}
.flare-shadow-monarch::after {
    content: '\1F480'; /* skull */
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-orbit-spin 4s linear infinite;
    z-index: 1;
}
@keyframes flare-shadow {
    0%, 100% {
        box-shadow: 0 0 10px 4px rgba(69, 71, 90, 0.5),
                    0 0 20px 8px rgba(108, 112, 134, 0.3),
                    0 0 0 2px #585b70;
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(108, 112, 134, 0.6),
                    0 0 35px 12px rgba(203, 166, 247, 0.3),
                    0 0 0 2px #cba6f7;
    }
}

.flare-celestial-nova {
    animation: flare-celestial 2.5s ease-in-out infinite;
}
.flare-celestial-nova::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(#f9e2af, #cdd6f4, #f9e2af, #cdd6f4, #f9e2af);
    animation: flare-rainbow-rotate 4s linear infinite;
}
.flare-celestial-nova::after {
    content: '\2B50';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-orbit-spin 2.5s linear infinite;
    z-index: 1;
}
@keyframes flare-celestial {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 10px 4px rgba(249, 226, 175, 0.4), 0 0 20px 8px rgba(205, 214, 244, 0.2); }
    50%      { filter: brightness(1.1); box-shadow: 0 0 24px 8px rgba(249, 226, 175, 0.7), 0 0 40px 14px rgba(205, 214, 244, 0.3); }
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL — Admin-only flares (not in crate drop pool)
   ═══════════════════════════════════════════════════════════ */

.flare-admin-flare {
    animation: flare-admin 2.5s ease-in-out infinite;
}
.flare-admin-flare::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(#5e00ab, #ffffff, #5e00ab, #ffffff, #5e00ab);
    animation: flare-rainbow-rotate 2s linear infinite;
}
.XXflare-admin-flare::after {
    content: '\1F346';
    position: absolute;
    top: -9px;
    right: 50%;
    transform: translateX(50%);
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-admin-orbit 3s linear infinite;
    z-index: 1;
}
@keyframes flare-admin {
    0%, 100% {
        box-shadow: 0 0 10px 4px rgba(94, 0, 171, 0.5),
                    0 0 25px 2px rgba(94, 0, 171, 0.15);
    }
    50% {
        box-shadow: 0 0 22px 8px rgba(255, 255, 255, 0.5),
                    0 0 40px 6px rgba(94, 0, 171, 0.3);
    }
}
@keyframes flare-admin-orbit {
    0%   { top: -8px;  right: 50%; transform: translateX(50%); }
    25%  { top: 50%;   right: -10px; transform: translateY(-50%); }
    50%  { top: calc(100% + 4px); right: 50%; transform: translateX(50%); }
    75%  { top: 50%;   right: calc(100% + 4px); transform: translateY(-50%); }
    100% { top: -8px;  right: 50%; transform: translateX(50%); }
}



.flare-mod-flare {
    animation: flare-mod 2s ease-in-out infinite;
}
.flare-mod-flare::after {
    content: '\1F6E1\FE0F';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes flare-mod {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(148, 226, 213, 0.4), 0 0 0 2px #94e2d5; }
    50%      { box-shadow: 0 0 18px 6px rgba(186, 194, 222, 0.5), 0 0 0 2px #bac2de; }
}

.flare-pioneer-flare {
    animation: flare-pioneer 2s ease-in-out infinite;
}
.flare-pioneer-flare::after {
    content: '\1F680';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes flare-pioneer {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(250, 179, 135, 0.4), 0 0 0 2px #fab387; }
    50%      { box-shadow: 0 0 18px 6px rgba(245, 198, 145, 0.6), 0 0 0 2px #f5c691; }
}

.flare-patreon-flare {
    animation: flare-patreon 1.8s ease-in-out infinite;
}
.flare-patreon-flare::after {
    content: '\2764\FE0F';
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 0.8rem;
    line-height: 1;
    animation: flare-badge-pulse 1.8s ease-in-out infinite;
    z-index: 1;
}
@keyframes flare-patreon {
    0%, 100% { box-shadow: 0 0 8px 3px rgba(245, 194, 231, 0.4), 0 0 0 2px #f5c2e7; }
    50%      { box-shadow: 0 0 18px 6px rgba(243, 139, 168, 0.5), 0 0 0 2px #f38ba8; }
}

/* ═══════════════════════════════════════════════════════════
   Rarity colors for crate animation UI
   ═══════════════════════════════════════════════════════════ */
.rarity-common    { --rarity-color: #bac2de; }
.rarity-uncommon  { --rarity-color: #a6e3a1; }
.rarity-rare      { --rarity-color: #89b4fa; }
.rarity-epic      { --rarity-color: #cba6f7; }
.rarity-legendary { --rarity-color: #f9e2af; }