/* =========================================================
   CORE FRAME SYSTEM
========================================================= */

.profile-frame-shell {
    position: relative;
    width: 9rem;
    height: 9rem;
    padding: 8px;
    border-radius: 1.9rem;
    overflow: visible;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.profile-frame-shell:hover {
    transform: translateY(-2px) scale(1.01);
}

.profile-frame-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1.45rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);
}

.profile-frame-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.2rem;
}

.profile-frame-shell::before,
.profile-frame-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.9rem;
    pointer-events: none;
}

.frame-default {
    background: linear-gradient(145deg, #475569, #1e293b);
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.08),
        0 0 12px rgba(255,255,255,0.04);
}

/* =========================================================
   COMMON (4)
========================================================= */

.frame-common-stone {
    background: linear-gradient(145deg, #6b7280, #374151, #1f2937);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 0 0 2px rgba(255,255,255,0.10),
        0 0 12px rgba(255,255,255,0.04);
}

.frame-common-slate {
    background: linear-gradient(145deg, #94a3b8, #475569, #334155);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 0 2px rgba(255,255,255,0.10),
        0 0 14px rgba(148,163,184,0.07);
}

.frame-common-iron {
    background: linear-gradient(145deg, #d1d5db, #6b7280, #374151);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 0 0 2px rgba(255,255,255,0.12),
        0 0 10px rgba(209,213,219,0.07);
}

.frame-common-ash {
    background: linear-gradient(145deg, #78716c, #57534e, #292524);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 0 0 2px rgba(255,255,255,0.08),
        0 0 10px rgba(120,113,108,0.07);
}

/* =========================================================
   RARE (4)
========================================================= */

.frame-rare-cyan {
    background: linear-gradient(145deg, #164e63, #22d3ee, #0f172a);
    box-shadow:
        0 0 0 2px rgba(34,211,238,0.34),
        0 0 18px rgba(34,211,238,0.22),
        0 0 28px rgba(8,145,178,0.10);
}

.frame-rare-emerald {
    background: linear-gradient(145deg, #064e3b, #10b981, #052e2b);
    box-shadow:
        0 0 0 2px rgba(16,185,129,0.34),
        0 0 18px rgba(16,185,129,0.22),
        0 0 28px rgba(5,150,105,0.10);
}

.frame-rare-sapphire {
    background: linear-gradient(145deg, #1e3a8a, #3b82f6, #172554);
    box-shadow:
        0 0 0 2px rgba(59,130,246,0.36),
        0 0 20px rgba(59,130,246,0.24),
        0 0 30px rgba(30,64,175,0.10);
}

.frame-rare-rose {
    background: linear-gradient(145deg, #881337, #f43f5e, #4c0519);
    box-shadow:
        0 0 0 2px rgba(244,63,94,0.32),
        0 0 18px rgba(244,63,94,0.20),
        0 0 28px rgba(225,29,72,0.10);
}

/* =========================================================
   EPIC (4)
========================================================= */

.frame-epic-arcane {
    background: linear-gradient(145deg, #312e81, #7c3aed, #1e1b4b);
    box-shadow:
        0 0 0 2px rgba(168,85,247,0.40),
        0 0 24px rgba(168,85,247,0.26),
        0 0 38px rgba(139,92,246,0.14);
    animation: framePulseEpic 2.8s ease-in-out infinite;
}

.frame-epic-crystal {
    background: linear-gradient(145deg, #0f766e, #22d3ee, #164e63);
    box-shadow:
        0 0 0 2px rgba(34,211,238,0.42),
        0 0 22px rgba(34,211,238,0.26),
        0 0 38px rgba(56,189,248,0.14);
    animation: framePulseEpic 2.5s ease-in-out infinite;
}

.frame-epic-ember {
    background: linear-gradient(145deg, #7c2d12, #f97316, #431407);
    box-shadow:
        0 0 0 2px rgba(249,115,22,0.42),
        0 0 22px rgba(249,115,22,0.26),
        0 0 38px rgba(234,88,12,0.14);
    animation: framePulseEpic 2.7s ease-in-out infinite;
}

.frame-epic-void {
    background: linear-gradient(145deg, #3b0764, #9333ea, #111827);
    box-shadow:
        0 0 0 2px rgba(147,51,234,0.40),
        0 0 24px rgba(147,51,234,0.24),
        0 0 40px rgba(76,29,149,0.16);
    animation: frameVoidShift 3s ease-in-out infinite;
}

@keyframes framePulseEpic {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.025);
        filter: brightness(1.08);
    }
}

@keyframes frameVoidShift {
    0%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.12) saturate(1.08);
        transform: scale(1.03);
    }
}

/* =========================================================
   LEGENDARY (4)
========================================================= */

.frame-legendary-sunforge {
    background: linear-gradient(145deg, #78350f, #f59e0b, #92400e, #451a03);
    box-shadow:
        0 0 0 2px rgba(251,191,36,0.45),
        0 0 26px rgba(251,191,36,0.30),
        0 0 48px rgba(245,158,11,0.20);
    animation: frameLegendaryGlow 2.1s infinite ease-in-out;
}

.frame-legendary-royal {
    background: linear-gradient(145deg, #854d0e, #fde68a, #ca8a04, #713f12);
    box-shadow:
        0 0 0 2px rgba(253,224,71,0.42),
        0 0 28px rgba(250,204,21,0.30),
        0 0 54px rgba(234,179,8,0.22);
    animation: frameLegendaryGlow 2.2s infinite ease-in-out;
}

.frame-legendary-celestial {
    background: linear-gradient(145deg, #1e3a8a, #38bdf8, #a855f7, #0f172a);
    box-shadow:
        0 0 0 2px rgba(125,211,252,0.42),
        0 0 30px rgba(56,189,248,0.28),
        0 0 56px rgba(168,85,247,0.18);
    animation: frameCosmicGlow 2.4s infinite ease-in-out;
}

.frame-legendary-dragonsoul {
    background: linear-gradient(145deg, #7f1d1d, #ef4444, #f97316, #431407);
    box-shadow:
        0 0 0 2px rgba(239,68,68,0.46),
        0 0 30px rgba(239,68,68,0.28),
        0 0 56px rgba(249,115,22,0.18);
    animation: frameDragonFlare 2.2s infinite ease-in-out;
}

@keyframes frameLegendaryGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.14);
    }
}

@keyframes frameCosmicGlow {
    0%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.15) saturate(1.08);
        transform: scale(1.03);
    }
}

@keyframes frameDragonFlare {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.18) saturate(1.12);
    }
}

/* =========================================================
   SPECIAL (2)
========================================================= */

.frame-treasure-halo {
    background: linear-gradient(145deg, #78350f 0%, #fbbf24 35%, #f59e0b 55%, #451a03 100%);
    box-shadow:
        0 0 0 2px rgba(251,191,36,0.56),
        0 0 28px rgba(251,191,36,0.32),
        0 0 52px rgba(245,158,11,0.20);
    animation: frameTreasureGlow 2.3s infinite ease-in-out;
}

.frame-fortune-rift {
    background: linear-gradient(145deg, #4c1d95 0%, #a855f7 35%, #f59e0b 65%, #581c87 100%);
    box-shadow:
        0 0 0 2px rgba(168,85,247,0.50),
        0 0 28px rgba(168,85,247,0.30),
        0 0 50px rgba(245,158,11,0.16);
    animation: frameTreasureGlow 2.5s infinite ease-in-out;
}

@keyframes frameTreasureGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.18);
    }
}

/* =========================================================
   ONLY ASSIGNED (2)
========================================================= */

.frame-discord {
    background: linear-gradient(145deg, #312e81, #6366f1, #1e1b4b);
    box-shadow:
        0 0 0 2px rgba(99,102,241,0.50),
        0 0 22px rgba(99,102,241,0.28),
        0 0 40px rgba(79,70,229,0.18);
    animation: frameDiscordGlow 2.6s infinite ease-in-out;
}

.frame-founder {
    background: linear-gradient(145deg, #78350f, #f59e0b, #ec4899, #4a044e);
    box-shadow:
        0 0 0 2px rgba(251,191,36,0.50),
        0 0 24px rgba(236,72,153,0.24),
        0 0 44px rgba(245,158,11,0.20);
    animation: frameFounderGlow 2.8s infinite ease-in-out;
}

@keyframes frameDiscordGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.13);
    }
}

@keyframes frameFounderGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.16) saturate(1.08);
    }
}