/* =========================================
   PREMIUM CIRCULAR RANK FRAMES
   18 Unique Tiers with High-Energy Effects
   ========================================= */

/* Base Container */
.profile-layer-container {
    position: relative;
    z-index: 10;
    display: inline-block;
    border-radius: 50%;
    margin: 15px;
    /* More space for glows */
    vertical-align: middle;
}

/* Image Container (The Face) */
.profile-layer-container>div:first-child {
    position: relative;
    z-index: 20;
    border-radius: 50%;
    background: #1a1a2e;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* Tiny gap to separate image from frame */
    margin: 2px;
}

/* Base Orb Elements */
.orb-ring,
.orb-ring-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    box-sizing: border-box;
}

.orb-ring {
    inset: -6px;
    border: 3px solid transparent;
    border-top-color: var(--frame-color, #4CAF50);
    border-right-color: rgba(255, 255, 255, 0.4);
    z-index: 25;
    /* On top of image edge */
    animation: spin 8s linear infinite;
    filter: drop-shadow(0 0 5px var(--frame-color, #4CAF50));
}

.orb-ring-2 {
    inset: -12px;
    border: 2px solid transparent;
    border-bottom-color: var(--frame-color, #4CAF50);
    border-left-color: rgba(255, 255, 255, 0.2);
    z-index: 15;
    /* Behind image */
    animation: spin-reverse 12s linear infinite;
    opacity: 0.7;
}

.orb-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color, rgba(76, 175, 80, 0.4)) 0%, transparent 70%);
    z-index: 5;
    /* Behind everything */
    opacity: 0.6;
    animation: pulse 3s infinite ease-in-out;
}

/* CSS Particles Simulation */
.particles-container {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 26;
}

/* Generate stars using box-shadow */
.particles-container::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    top: 50%;
    left: 50%;
    background: transparent;
    border-radius: 50%;
    box-shadow:
        -20px -30px 0 var(--frame-color),
        20px 30px 0 #fff,
        -30px 10px 0 var(--frame-color),
        30px -10px 0 #fff;
    opacity: 0;
    animation: particles-spin 10s linear infinite;
}

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

@keyframes spin-reverse {
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes particles-spin {
    0% {
        transform: rotate(0deg);
        opacity: 0.8;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.8;
    }
}

@keyframes shake {

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

    25% {
        transform: translate(-1px, 1px);
    }

    75% {
        transform: translate(1px, -1px);
    }
}

/* =========================================
   LEVEL 1: BEGINNER (Nature/Growth - Green)
   ========================================= */
.rank-frame-circle {
    /* Color variables removed to enforce inline style from PHP */
    /* --frame-color: ... */
    /* --glow-color: ... */
}

.rank-frame-circle .orb-ring {
    border-width: 2px;
    border-style: solid;
}

.rank-frame-circle .orb-ring-2 {
    display: none;
}

/* Simple */

.rank-frame-shadow-circle {
    --frame-color: #22c55e;
    /* green-500 */
    --glow-color: rgba(34, 197, 94, 0.5);
}

.rank-frame-thin-ring {
    --frame-color: #16a34a;
    /* green-600 */
    --glow-color: rgba(22, 163, 74, 0.5);
}

.rank-frame-thin-ring .orb-ring {
    border-style: dashed;
}

/* =========================================
   LEVEL 2: INTERMEDIATE (Energy - Blue/Cyan)
   ========================================= */
.rank-frame-single-ring {
    /*  --frame-color: #38bdf8;
    --glow-color: rgba(56, 189, 248, 0.5); */
}

.rank-frame-double-ring {
    /*  --frame-color: #3b82f6;
    --glow-color: rgba(59, 130, 246, 0.5); */
}

.rank-frame-double-ring .orb-ring {
    border-width: 4px;
}

.rank-frame-double-ring .orb-ring-2 {
    border-style: dotted;
}

.rank-frame-thick-ring {
    /*  --frame-color: #2563eb;
    --glow-color: rgba(37, 99, 235, 0.6); */
}

.rank-frame-thick-ring .orb-ring {
    border: 4px solid var(--frame-color);
    border-bottom-color: transparent;
}

/* =========================================
   LEVEL 3: ADVANCED (Tech/Magic - Purple)
   ========================================= */
.rank-frame-two-rings {
    --frame-color: #a855f7;
    /* purple-500 */
    --glow-color: rgba(168, 85, 247, 0.5);
}

.rank-frame-two-rings .particles-container::before {
    opacity: 0.6;
}

.rank-frame-star-ring {
    --frame-color: #d946ef;
    /* fuchsia-500 */
    --glow-color: rgba(217, 70, 239, 0.5);
}

.rank-frame-star-ring .orb-ring {
    border-style: double;
    border-width: 5px;
}

.rank-frame-bevel-frame {
    --frame-color: #c026d3;
    /* fuchsia-700 */
    --glow-color: rgba(192, 38, 211, 0.6);
}

.rank-frame-bevel-frame .orb-ring-2 {
    animation-duration: 4s;
    /* Faster spin */
}

/* =========================================
   LEVEL 4: ELITE (Wealth/Glory - Gold/Amber)
   ========================================= */
.rank-frame-ornate-frame {
    --frame-color: #f59e0b;
    /* amber-500 */
    --glow-color: rgba(245, 158, 11, 0.6);
}

.rank-frame-ornate-frame .orb-ring {
    box-shadow: 0 0 15px var(--frame-color);
}

.rank-frame-royal-ring {
    --frame-color: #d97706;
    /* amber-600 */
    --glow-color: rgba(217, 119, 6, 0.7);
}

.rank-frame-royal-ring .orb-ring {
    border-top: 4px dotted var(--frame-color);
    border-bottom: 4px dotted var(--frame-color);
}

.rank-frame-diamond-frame {
    --frame-color: #06b6d4;
    /* cyan-500 */
    --glow-color: rgba(6, 182, 212, 0.7);
}

.rank-frame-diamond-frame .orb-ring {
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px var(--frame-color);
}

.rank-frame-diamond-frame .orb-ring-2 {
    border-color: var(--frame-color);
}

/* =========================================
   LEVEL 5: LEGENDARY (Power - Platinum/Gold)
   ========================================= */
.rank-frame-multi-frame {
    --frame-color: #e2e8f0;
    /* slate-200 */
    --glow-color: rgba(226, 232, 240, 0.6);
}

.rank-frame-multi-frame .orb-ring {
    border-color: #fff;
    filter: drop-shadow(0 0 10px #fff);
}

.rank-frame-triple-ring {
    --frame-color: #fcd34d;
    /* amber-300 */
    --glow-color: rgba(252, 211, 77, 0.8);
}

.rank-frame-triple-ring .orb-ring,
.rank-frame-triple-ring .orb-ring-2 {
    border-width: 3px;
    box-shadow: inset 0 0 10px var(--frame-color);
}

.rank-frame-heavy-frame {
    --frame-color: #94a3b8;
    /* slate-400 */
    --glow-color: rgba(148, 163, 184, 0.8);
}

.rank-frame-heavy-frame .orb-ring {
    border: 6px solid var(--frame-color);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    /* Full circle but clipped? No, just thick */
}

/* =========================================
   LEVEL 6: IMPERIAL (Godlike - Rainbow/Fire)
   ========================================= */
.rank-frame-crown-frame {
    /* Emperor */
    --frame-color: #facc15;
    /* yellow-400 */
    --glow-color: rgba(250, 204, 21, 0.9);
}

.rank-frame-crown-frame .orb-ring {
    border: 4px solid var(--frame-color);
    box-shadow: 0 0 30px var(--frame-color), inset 0 0 20px var(--frame-color);
}

.rank-frame-crown-frame::after {
    /* Crown Icon Simulation */
    content: '👑';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    animation: pulse 2s infinite;
    z-index: 30;
}

.rank-frame-moving-frame {
    /* Living Legend */
    --frame-color: #ef4444;
    /* red-500 */
    --glow-color: rgba(239, 68, 68, 0.9);
}

.rank-frame-moving-frame .orb-ring {
    animation-duration: 2s;
    /* Furious speed */
    border-width: 4px;
    border-style: double;
}

.rank-frame-moving-frame .orb-glow {
    background: radial-gradient(circle, #ef4444 0%, #f97316 40%, transparent 70%);
}

.rank-frame-legendary-frame {
    /* Health King */
    --frame-color: #eab308;
    /* yellow-500 */
    --glow-color: rgba(234, 179, 8, 1);
}

.rank-frame-legendary-frame .orb-ring {
    inset: -10px;
    border: 5px solid transparent;
    border-top-color: #eab308;
    border-bottom-color: #ef4444;
    border-left-color: #3b82f6;
    border-right-color: #a855f7;
    animation: spin 3s linear infinite;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

.rank-frame-legendary-frame .orb-ring-2 {
    inset: -18px;
    border: 2px dashed #fff;
    animation: spin-reverse 8s linear infinite;
}

.rank-frame-legendary-frame .particles-container::before {
    box-shadow:
        -30px -40px 0 gold, 30px 40px 0 red,
        -40px 20px 0 blue, 40px -20px 0 purple;
    opacity: 1;
}