/* --- ULTRA FRAMES SYSTEM --- */

:root {
    --frame-sz: 80px;
    /* Default size for user list */
}

/* Base Container */
.ultra-frame {
    position: relative;
    width: var(--frame-sz);
    height: var(--frame-sz);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Avatar Styling within Frame */
.ultra-frame .tdavatar,
.ultra-frame .avav,
.ultra-frame .acav,
.ultra-frame .avatar_profile,
.ultra-frame .pstyleavatar {
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    position: relative;
    z-index: 5;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes uf_rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes uf_float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes uf_pulse {
    0% {
        box-shadow: 0 0 0 0 var(--uf-c);
        opacity: 0.8;
    }

    100% {
        box-shadow: 0 0 0 20px transparent;
        opacity: 0;
    }
}

@keyframes uf_flyUp {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--uf-x), var(--uf-y)) rotate(20deg);
        opacity: 0;
    }
}

/* Common Components */
.uf-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: 1;
    -webkit-mask: radial-gradient(circle, transparent calc(var(--frame-sz) / 2), #000 calc(var(--frame-sz) / 2 + 1px));
    mask: radial-gradient(circle, transparent calc(var(--frame-sz) / 2), #000 calc(var(--frame-sz) / 2 + 1px));
}

.uf-top-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: var(--uf-c);
    z-index: 10;
    filter: drop-shadow(0 0 8px var(--uf-c));
    animation: uf_float 3s ease-in-out infinite;
}

.uf-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: var(--uf-c);
    border-radius: 50%;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 0 8px var(--uf-c);
}

.uf-badge i {
    color: #fff;
    font-size: 12px;
}

.uf-particle {
    position: absolute;
    font-size: 16px;
    color: var(--uf-c);
    opacity: 0;
    z-index: 6;
    pointer-events: none;
    animation: uf_flyUp 3s infinite;
}

/* Frame Templates */

/* Frame Templates per uframe ID */
.uframe1 {
    --uf-c: #FFD700;
    --uf-glow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.uframe2 {
    --uf-c: #00E5FF;
    --uf-glow: 0 0 15px rgba(0, 229, 255, 0.6);
}

.uframe3 {
    --uf-c: #FF1493;
    --uf-glow: 0 0 15px rgba(255, 20, 147, 0.6);
}

.uframe4 {
    --uf-c: #FF4500;
    --uf-glow: 0 0 15px rgba(255, 69, 0, 0.6);
}

.uframe5 {
    --uf-c: #32CD32;
    --uf-glow: 0 0 15px rgba(50, 205, 50, 0.6);
}

.uframe6 {
    --uf-c: #9D00FF;
    --uf-glow: 0 0 15px rgba(157, 0, 255, 0.6);
}

.uframe7 {
    --uf-c: #1E90FF;
    --uf-glow: 0 0 15px rgba(30, 144, 255, 0.6);
}

.uframe8 {
    --uf-c: #FFFF00;
    --uf-glow: 0 0 15px rgba(255, 255, 0, 0.6);
}

.uframe9 {
    --uf-c: #E0E0E0;
    --uf-glow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Diamond/White */
.uframe10 {
    --uf-c: #B0BEC5;
    --uf-glow: 0 0 15px rgba(176, 190, 197, 0.6);
}

/* Ghost/Silver */
.uframe11 {
    --uf-c: #A52A2A;
    --uf-glow: 0 0 15px rgba(165, 42, 42, 0.6);
}

/* Gavel/Brown */
.uframe12 {
    --uf-c: #FF8A65;
    --uf-glow: 0 0 15px rgba(255, 138, 101, 0.6);
}

/* Planet/Orange */
.uframe13 {
    --uf-c: #00FF41;
    --uf-glow: 0 0 15px rgba(0, 255, 65, 0.6);
}

/* Matrix/Green */
.uframe14 {
    --uf-c: #F06292;
    --uf-glow: 0 0 15px rgba(240, 98, 146, 0.6);
}

/* Heart/Pink */
.uframe15 {
    --uf-c: #263238;
    --uf-glow: 0 0 15px rgba(38, 50, 56, 1);
}

/* Dark/Shadow */
.uframe16 {
    --uf-c: #4DB6AC;
    --uf-glow: 0 0 15px rgba(77, 182, 172, 0.6);
}

/* Magic/Teal */
.uframe17 {
    --uf-c: #FBC02D;
    --uf-glow: 0 0 15px rgba(251, 192, 45, 0.6);
}

/* Sunset/Amber */
.uframe18 {
    --uf-c: #546E7A;
    --uf-glow: 0 0 15px rgba(84, 110, 122, 0.6);
}

/* Robot/Gray-Blue */
.uframe19 {
    --uf-c: #AED581;
    --uf-glow: 0 0 15px rgba(174, 213, 129, 0.6);
}

/* Spa/Light-Green */
.uframe20 {
    --uf-c: #9575CD;
    --uf-glow: 0 0 15px rgba(149, 117, 205, 0.6);
}

/* Gemstone/Lavender */
.uframe21 {
    --uf-c: #3F51B5;
    --uf-glow: 0 0 15px rgba(63, 81, 181, 0.6);
}

/* Moon/Indigo */
.uframe22 {
    --uf-c: #8D6E63;
    --uf-glow: 0 0 15px rgba(141, 110, 99, 0.6);
}

/* Tree/Cocoa */
.uframe23 {
    --uf-c: #E91E63;
    --uf-glow: 0 0 15px rgba(233, 30, 99, 0.6);
}

/* Music/Ruby */
.uframe24 {
    --uf-c: #43A047;
    --uf-glow: 0 0 15px rgba(67, 160, 71, 0.6);
}

/* Clover/Green */
.uframe25 {
    --uf-c: #F44336;
    --uf-glow: 0 0 15px rgba(244, 67, 54, 0.6);
}

.uframe26 {
    --uf-c: #9E9E9E;
    --uf-glow: 0 0 15px rgba(158, 158, 158, 0.6);
}

.uframe27 {
    --uf-c: #795548;
    --uf-glow: 0 0 15px rgba(121, 85, 72, 0.6);
}

.uframe28 {
    --uf-c: #607D8B;
    --uf-glow: 0 0 15px rgba(96, 125, 139, 0.6);
}

.uframe29 {
    --uf-c: #E91E63;
    --uf-glow: 0 0 15px rgba(233, 30, 99, 0.6);
}

.uframe30 {
    --uf-c: #FF9800;
    --uf-glow: 0 0 15px rgba(255, 152, 0, 0.6);
}

.uframe31 {
    --uf-c: #FFEB3B;
    --uf-glow: 0 0 15px rgba(255, 235, 59, 0.6);
}

.uframe32 {
    --uf-c: #2196F3;
    --uf-glow: 0 0 15px rgba(33, 150, 243, 0.6);
}

.uframe33 {
    --uf-c: #FF5722;
    --uf-glow: 0 0 15px rgba(255, 87, 34, 0.6);
}

.uframe34 {
    --uf-c: #9C27B0;
    --uf-glow: 0 0 15px rgba(156, 39, 176, 0.6);
}

.uframe35 {
    --uf-c: #FF80AB;
    --uf-glow: 0 0 15px rgba(255, 128, 171, 0.6);
}

.uframe36 {
    --uf-c: #A1887F;
    --uf-glow: 0 0 15px rgba(161, 136, 127, 0.6);
}

.uframe37 {
    --uf-c: #3F51B5;
    --uf-glow: 0 0 15px rgba(63, 81, 181, 0.6);
}

.uframe38 {
    --uf-c: #673AB7;
    --uf-glow: 0 0 15px rgba(103, 58, 183, 0.6);
}

.uframe39 {
    --uf-c: #00BCD4;
    --uf-glow: 0 0 15px rgba(0, 188, 212, 0.6);
}

.uframe40 {
    --uf-c: #009688;
    --uf-glow: 0 0 15px rgba(0, 150, 136, 0.6);
}

.uframe41 {
    --uf-c: #4CAF50;
    --uf-glow: 0 0 15px rgba(76, 175, 80, 0.6);
}

.uframe42 {
    --uf-c: #8BC34A;
    --uf-glow: 0 0 15px rgba(139, 195, 74, 0.6);
}

.uframe43 {
    --uf-c: #CDDC39;
    --uf-glow: 0 0 15px rgba(205, 220, 57, 0.6);
}

.uframe44 {
    --uf-c: #FFC107;
    --uf-glow: 0 0 15px rgba(255, 193, 7, 0.6);
}

.uframe45 {
    --uf-c: #FFEB3B;
    --uf-glow: 0 0 15px rgba(255, 235, 59, 0.6);
}

.uframe46 {
    --uf-c: #FF9800;
    --uf-glow: 0 0 15px rgba(255, 152, 0, 0.6);
}

.uframe47 {
    --uf-c: #FF5722;
    --uf-glow: 0 0 15px rgba(255, 87, 34, 0.6);
}

.uframe48 {
    --uf-c: #795548;
    --uf-glow: 0 0 15px rgba(121, 85, 72, 0.6);
}

.uframe49 { --uf-c: #00d2ff; --uf-glow: 0 0 15px rgba(0, 210, 255, 0.6); }
.uframe50 { --uf-c: #ff0055; --uf-glow: 0 0 15px rgba(255, 0, 85, 0.6); }
.uframe51 { --uf-c: #adff2f; --uf-glow: 0 0 15px rgba(173, 255, 47, 0.6); }
.uframe52 { --uf-c: #ffcc00; --uf-glow: 0 0 15px rgba(255, 204, 0, 0.6); }
.uframe53 { --uf-c: #9d00ff; --uf-glow: 0 0 15px rgba(157, 0, 255, 0.6); }
.uframe54 { --uf-c: #1e90ff; --uf-glow: 0 0 15px rgba(30, 144, 255, 0.6); }
.uframe55 { --uf-c: #ff4500; --uf-glow: 0 0 15px rgba(255, 69, 0, 0.6); }
.uframe56 { --uf-c: #00ff41; --uf-glow: 0 0 15px rgba(0, 255, 65, 0.6); }
.uframe57 {--uf-c: #655716;--uf-glow: 0 0 15px rgba(255, 0, 255, 0.6);}
.uframe58 { --uf-c: #ffffff; --uf-glow: 0 0 15px rgba(255, 255, 255, 0.6); }
.uframe59 { --uf-c: #f0e68c; --uf-glow: 0 0 15px rgba(240, 230, 140, 0.6); }
.uframe60 { --uf-c: #e91e63; --uf-glow: 0 0 15px rgba(233, 30, 99, 0.6); }
.uframe61 { --uf-c: #00ced1; --uf-glow: 0 0 15px rgba(0, 206, 209, 0.6); }
.uframe62 { --uf-c: #8b4513; --uf-glow: 0 0 15px rgba(139, 69, 19, 0.6); }
.uframe63 { --uf-c: #483d8b; --uf-glow: 0 0 15px rgba(72, 61, 139, 0.6); }
.uframe64 { --uf-c: #2f4f4f; --uf-glow: 0 0 15px rgba(47, 79, 79, 0.6); }

/* Apply unique animations to different frames for visual variety */
.uframe1 .uf-ring,
.uframe6 .uf-ring,
.uframe12 .uf-ring,
.uframe25 .uf-ring,
.uframe34 .uf-ring,
.uframe42 .uf-ring,
.uframe49 .uf-ring,
.uframe56 .uf-ring {
    background: conic-gradient(from 0deg, var(--uf-c), transparent, var(--uf-c));
    animation: uf_rotate 4s linear infinite;
}

.uframe2 .uf-ring,
.uframe8 .uf-ring,
.uframe11 .uf-ring,
.uframe26 .uf-ring,
.uframe31 .uf-ring,
.uframe39 .uf-ring,
.uframe51 .uf-ring,
.uframe59 .uf-ring {
    border: 2px dashed var(--uf-c);
    animation: uf_rotate 10s linear infinite;
}

.uframe3::before,
.uframe14::before,
.uframe23::before,
.uframe29::before,
.uframe35::before,
.uframe44::before,
.uframe50::before,
.uframe57::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--uf-c);
    animation: uf_pulse 2.5s infinite;
}

.uframe4 .uf-ring,
.uframe13 .uf-ring,
.uframe18 .uf-ring,
.uframe27 .uf-ring,
.uframe33 .uf-ring,
.uframe40 .uf-ring,
.uframe52 .uf-ring,
.uframe60 .uf-ring {
    background: linear-gradient(var(--uf-c), transparent);
    animation: uf_rotate 3s ease-in-out infinite alternate;
}

.uframe5 .uf-ring,
.uframe9 .uf-ring,
.uframe20 .uf-ring,
.uframe28 .uf-ring,
.uframe32 .uf-ring,
.uframe37 .uf-ring,
.uframe53 .uf-ring,
.uframe61 .uf-ring {
    border: 2px solid var(--uf-c);
    box-shadow: var(--uf-glow);
    animation: uf_pulse 3s infinite alternate;
}

.uframe7 .uf-ring,
.uframe16 .uf-ring,
.uframe24 .uf-ring,
.uframe30 .uf-ring,
.uframe38 .uf-ring,
.uframe46 .uf-ring,
.uframe54 .uf-ring,
.uframe62 .uf-ring {
    border: 2px double var(--uf-c);
    animation: uf_rotate 15s linear infinite reverse;
}

.uframe15 .uf-ring,
.uframe47 .uf-ring,
.uframe55 .uf-ring,
.uframe63 .uf-ring {
    background: radial-gradient(circle, transparent 60%, var(--uf-c) 100%);
    animation: uf_pulse 1.5s infinite;
}

.uframe10::after,
.uframe17::after,
.uframe21::after,
.uframe22::after,
.uframe36::after,
.uframe41::after,
.uframe43::after,
.uframe45::after,
.uframe48::after,
.uframe58::after,
.uframe64::after,
.uframe67::after,
.uframe74::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--uf-c);
    opacity: 0.5;
    animation: uf_rotate 20s linear infinite;
}

/* ... more will be added/refined based on usage ... */

/* Profile Specific Adjustments */
.profile_avatar .ultra-frame {
    --frame-sz: 130px;
    margin: 5px 0;
}

.profile_avatar .uf-top-icon {
    font-size: 38px;
    top: -35px;
}

.profile_avatar .uf-badge {
    width: 34px;
    height: 34px;
    border-width: 3px;
}

.profile_avatar .uf-badge i {
    font-size: 18px;
}

.profile_avatar .uf-ring {
    inset: -8px;
}

/* Member List Specific Adjustments */
.user_item_avatar .ultra-frame {
    --frame-sz: 60px;
    margin: 4px 0;
}

.user_item_avatar .uf-top-icon {
    font-size: 18px;
    top: -15px;
}

.user_item_avatar .uf-badge {
    width: 18px;
    height: 18px;
    border-width: 1.5px;
}

.user_item_avatar .uf-badge i {
    font-size: 10px;
}

.user_item_avatar .uf-ring {
    inset: -4px;
}