/* ─── Profile cosmetics ──────────────────────────────────────────────────────
   Shared by every place an avatar appears (topbar, friends list, rooms, profile).
   Keys match Models/Profile/ProfileCatalog.cs.                                 */

/* ── Shop avatars: animated gradients by rarity ── */
.av-tier { background-size: 300% 300% !important; }
.av-tier-rare      { animation: avShift 6s ease-in-out infinite; }
.av-tier-epic      { animation: avShift 4s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 12px rgba(168,85,247,.45); }
.av-tier-legendary { animation: avShift 3s linear infinite; box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 16px rgba(251,191,36,.7), 0 0 30px rgba(249,115,22,.4); }
.av-tier .av-emoji { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

@keyframes avShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Frames: a ring drawn around the avatar without changing its footprint ── */
.av-frame, .av-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

    /* The ring paints under the avatar (z 0), decorations like 🔥 / ✦ above it (z 2) */
    .av-frame > .db-avatar, .av-shell > .db-avatar { width: 100% !important; height: 100% !important; position: relative; z-index: 1; }

    /* Rings are deliberately bold: ~15% of the avatar's size (the wrapper's font-size is the
       avatar size, see avatars.js), a white inner keyline, and a coloured glow. */
    .av-frame::before {
        content: '';
        position: absolute;
        inset: -0.15em;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 3px 10px rgba(15,23,42,.35);
    }

    .av-frame::after {
        content: '';
        position: absolute;
        inset: -0.15em;
        border-radius: 50%;
        pointer-events: none;
        z-index: 2;
    }

.av-frame-frame_silver::before  { background: conic-gradient(#f8fafc, #94a3b8, #ffffff, #64748b, #f8fafc, #cbd5e1, #f8fafc); box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 0 .3em rgba(148,163,184,.9); }
.av-frame-frame_gold::before    { background: conic-gradient(#fff7d6, #f59e0b, #fde68a, #b45309, #fff7d6, #d97706, #fff7d6); box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 0 .35em rgba(245,158,11,.95), 0 0 .8em rgba(245,158,11,.5); }
.av-frame-frame_ice::before     { background: conic-gradient(#ffffff, #38bdf8, #e0f2fe, #0ea5e9, #ffffff, #7dd3fc, #ffffff); box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 .4em rgba(56,189,248,1), 0 0 .9em rgba(56,189,248,.5); }
.av-frame-frame_ice::after      { inset: -0.3em; border-radius: 50%; background: none; content: '❄'; color: #fff; font-size: .42em; line-height: 1; display: flex; align-items: flex-start; justify-content: flex-end; text-shadow: 0 0 6px #38bdf8; }
.av-frame-frame_laurel::before  { background: conic-gradient(#bbf7d0, #15803d, #86efac, #14532d, #bbf7d0, #22c55e, #bbf7d0); box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 0 .35em rgba(34,197,94,.8); }
.av-frame-frame_laurel::after   { inset: -0.3em; border-radius: 50%; background: none; content: '🌿'; font-size: .5em; line-height: 1; display: flex; align-items: flex-start; justify-content: center; }
.av-frame-frame_rainbow::before { background: conic-gradient(#ef4444, #f59e0b, #facc15, #22c55e, #3b82f6, #a855f7, #ef4444); animation: frameSpin 4s linear infinite; box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 .4em rgba(168,85,247,.7), 0 0 .8em rgba(59,130,246,.5); }
.av-frame-frame_neon::before    { background: conic-gradient(#22d3ee, #a855f7, #22d3ee, #a855f7, #22d3ee); box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 .4em #22d3ee, 0 0 1em rgba(168,85,247,.9); animation: frameSpin 3s linear infinite; }
.av-frame-frame_sparkle::before { background: conic-gradient(#fff, #fbbf24, #fff, #f472b6, #fff, #60a5fa, #fff); animation: frameSpin 5s linear infinite; box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 .5em rgba(251,191,36,.9); }
.av-frame-frame_sparkle::after  { inset: -0.34em; border-radius: 50%; background: none; content: '✦'; color: #fbbf24; font-size: .5em; line-height: 1; display: flex; align-items: flex-start; justify-content: flex-end; text-shadow: 0 0 6px #fff, 0 0 12px #fbbf24; animation: sparkleBlink 1.4s ease-in-out infinite; }
.av-frame-frame_flame::before   { background: conic-gradient(#fbbf24, #f97316, #ef4444, #fbbf24, #f97316, #ef4444, #fbbf24); animation: frameSpin 1.6s linear infinite; box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 .4em rgba(249,115,22,1), 0 0 1em rgba(239,68,68,.7); }
.av-frame-frame_flame::after    { inset: -0.4em; border-radius: 50%; background: none; content: '🔥'; font-size: .5em; line-height: 1; display: flex; align-items: flex-start; justify-content: center; animation: flameBob 1s ease-in-out infinite; }

@keyframes frameSpin { to { transform: rotate(360deg); } }
@keyframes sparkleBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
@keyframes flameBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ── Avatar animations (shop "אנימציית אווטאר"): the whole shell moves, ring included ── */
.av-anim { transform-origin: 50% 60%; }
.av-anim-anim_bounce    { animation: avBounce 1.3s cubic-bezier(.3,.8,.4,1) infinite; }
.av-anim-anim_wiggle    { animation: avWiggle 1.1s ease-in-out infinite; }
.av-anim-anim_float     { animation: avFloat 3s ease-in-out infinite; }
.av-anim-anim_heartbeat { animation: avHeartbeat 1.5s ease-in-out infinite; }
.av-anim-anim_jelly     { animation: avJelly 1.8s ease-in-out infinite; }
.av-anim-anim_spin      { animation: avFlip 3.2s ease-in-out infinite; }
.av-anim-anim_orbit     { animation: avFloat 3s ease-in-out infinite; }
    .av-orbit { position: absolute; inset: -0.22em; border-radius: 50%; pointer-events: none; z-index: 3; animation: frameSpin 2.6s linear infinite; }
    .av-orbit::before { content: '⭐'; position: absolute; top: -0.2em; left: 50%; transform: translateX(-50%); font-size: .4em; line-height: 1; filter: drop-shadow(0 0 4px #fbbf24); }

@keyframes avBounce    { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-14%) scaleY(1.04); } 55% { transform: translateY(0) scaleY(.96); } 70% { transform: translateY(-5%); } }
@keyframes avWiggle    { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes avFloat     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@keyframes avHeartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 60% { transform: scale(1); } }
@keyframes avJelly     { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.12, .88); } 50% { transform: scale(.9, 1.1); } 75% { transform: scale(1.05, .95); } }
@keyframes avFlip      { 0%, 60%, 100% { transform: rotateY(0); } 80% { transform: rotateY(360deg); } }

/* ── Pet badge on the avatar's lower corner (lists, topbar); the profile card has its own big pet ── */
.av-pet { position: absolute; bottom: -0.16em; left: -0.2em; font-size: .5em; line-height: 1; z-index: 4; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); animation: namePetBob 2.4s ease-in-out infinite; }
.name-pet { display: inline-block; animation: namePetBob 2.4s ease-in-out infinite; }
@keyframes namePetBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg); } }

/* ── Profile-card backgrounds ── */
/* Default (nothing bought): one calm indigo→violet gradient, no spots, no motion */
.pf-bg { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #9333ea 100%); }
.pf-bg-bg_sky    { background: linear-gradient(160deg, #7dd3fc 0%, #bae6fd 45%, #ffffff 100%); }
.pf-bg-bg_sunset { background: linear-gradient(160deg, #7c2d12 0%, #ea580c 40%, #fbbf24 80%, #fde68a 100%); }
.pf-bg-bg_geo    { background: linear-gradient(135deg, #312e81, #4338ca); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px), repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px), linear-gradient(135deg, #312e81, #4338ca); }
.pf-bg-bg_forest { background: linear-gradient(160deg, #052e16 0%, #166534 45%, #4ade80 100%); }
.pf-bg-bg_ocean  { background: linear-gradient(160deg, #0c4a6e 0%, #0284c7 45%, #67e8f9 100%); background-size: 200% 200%; animation: avShift 8s ease-in-out infinite; }
.pf-bg-bg_neon   { background: linear-gradient(135deg, #0f172a, #1e1b4b); background-image: radial-gradient(circle at 20% 30%, rgba(34,211,238,.55), transparent 40%), radial-gradient(circle at 80% 70%, rgba(168,85,247,.55), transparent 40%), linear-gradient(135deg, #0f172a, #1e1b4b); background-size: 200% 200%; animation: avShift 6s ease-in-out infinite; }
.pf-bg-bg_space  { background: #020617; background-image: radial-gradient(circle at 15% 25%, #fff 1px, transparent 1.5px), radial-gradient(circle at 65% 15%, #fff 1.2px, transparent 1.7px), radial-gradient(circle at 85% 60%, #fff 1px, transparent 1.5px), radial-gradient(circle at 35% 75%, #fff 1.4px, transparent 1.9px), radial-gradient(circle at 50% 45%, #fff 0.8px, transparent 1.3px), radial-gradient(ellipse at 70% 80%, rgba(139,92,246,.45), transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(14,165,233,.35), transparent 50%), linear-gradient(180deg, #020617, #0f172a); }

@media (prefers-reduced-motion: reduce) {
    .av-tier, .av-frame::before, .av-frame::after, .av-anim, .av-orbit, .av-pet, .name-pet, .pf-bg-bg_ocean, .pf-bg-bg_neon { animation: none !important; }
}