/* ── SosyalKampüs Cosmetics System ──────────────────────────────────── */

/* ===================================================================
   PROFILE FRAMES  — Steam style
   Avatar sits cleanly inside. The frame IS the gradient border.
   Usage: <div class="cosmetic-frame frame-gold"><img ...></div>
   =================================================================== */
.cosmetic-frame {
    display: inline-flex;
    border-radius: 16px;
    padding: 3px;
    background-size: 250% 250%;
    animation: frame-shift 4s ease infinite;
    flex-shrink: 0;
}
.cosmetic-frame img {
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

.frame-silver {
    background: linear-gradient(135deg, #d4d4d4, #f0f0f0, #a8a8a8, #e0e0e0, #c8c8c8);
    box-shadow: 0 0 14px rgba(180,180,180,.6), 0 0 28px rgba(180,180,180,.2);
}
.frame-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500, #B8860B, #FFD700, #FFC200);
    box-shadow: 0 0 18px rgba(255,180,0,.65), 0 0 40px rgba(255,160,0,.25);
}
.frame-ice {
    background: linear-gradient(135deg, #bae6fd, #38bdf8, #e0f2fe, #7dd3fc, #0ea5e9);
    box-shadow: 0 0 18px rgba(56,189,248,.55), 0 0 36px rgba(14,165,233,.2);
}
.frame-neon {
    background: linear-gradient(135deg, #7c3aed, #a855f7, #06b6d4, #7c3aed);
    box-shadow: 0 0 20px rgba(124,58,237,.7), 0 0 40px rgba(6,182,212,.3);
    animation-duration: 2.5s;
}
.frame-rainbow {
    background: linear-gradient(135deg, #ef4444, #f97316, #fbbf24, #22c55e, #06b6d4, #7c3aed, #ec4899);
    box-shadow: 0 0 22px rgba(236,72,153,.5), 0 0 44px rgba(124,58,237,.2);
    animation-duration: 3s;
}
.frame-fire {
    background: linear-gradient(135deg, #ef4444, #f97316, #fbbf24, #dc2626, #f97316);
    box-shadow: 0 0 22px rgba(239,68,68,.7), 0 0 44px rgba(249,115,22,.35);
    animation-duration: 1.8s;
}
.frame-hacker {
    background: linear-gradient(135deg, #00ff41, #00b32d, #003b10, #00ff41, #39ff14);
    box-shadow: 0 0 20px rgba(0,255,65,.8), 0 0 50px rgba(0,255,65,.3);
    animation-duration: 2s;
}
.frame-diamond {
    background: linear-gradient(135deg, #e0f2fe, #fff, #bae6fd, #f0f9ff, #7dd3fc, #fff, #e0f2fe);
    box-shadow: 0 0 20px rgba(186,230,253,.9), 0 0 50px rgba(125,211,252,.5), 0 0 80px rgba(56,189,248,.2);
    animation-duration: 3.5s;
}
.frame-cyber {
    background: linear-gradient(135deg, #facc15, #fbbf24, #f472b6, #facc15, #a3e635, #facc15);
    box-shadow: 0 0 22px rgba(250,204,21,.8), 0 0 44px rgba(244,114,182,.4);
    animation-duration: 1.5s;
}
.frame-confetti {
    background: linear-gradient(135deg, #ef4444, #f97316, #fbbf24, #22c55e, #06b6d4, #7c3aed, #ec4899, #ef4444);
    box-shadow: 0 0 18px rgba(236,72,153,.5), 0 0 40px rgba(250,204,21,.3);
    animation-duration: 1.2s;
}
.frame-cosmic {
    background: linear-gradient(135deg, #7c3aed, #c026d3, #4f46e5, #9333ea, #e879f9, #7c3aed);
    box-shadow: 0 0 22px rgba(192,38,211,.75), 0 0 50px rgba(124,58,237,.4);
    animation-duration: 3s;
}
.frame-aurora {
    background: linear-gradient(135deg, #10b981, #06b6d4, #7c3aed, #10b981, #34d399, #0891b2);
    box-shadow: 0 0 22px rgba(16,185,129,.65), 0 0 50px rgba(6,182,212,.35);
    animation-duration: 4s;
}
.frame-rose {
    background: linear-gradient(135deg, #fda4af, #fb7185, #f43f5e, #fecdd3, #fb7185, #e11d48);
    box-shadow: 0 0 18px rgba(251,113,133,.7), 0 0 40px rgba(244,63,94,.3);
    animation-duration: 3s;
}
.frame-plasma {
    background: linear-gradient(135deg, #fff, #c4b5fd, #818cf8, #fff, #a5f3fc, #fff);
    box-shadow: 0 0 28px rgba(255,255,255,.9), 0 0 56px rgba(196,181,253,.7), 0 0 90px rgba(129,140,248,.4);
    animation-duration: 2s;
}

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

/* ===================================================================
   PROFILE BANNERS — rich visual effects, scoped + legacy selectors
   =================================================================== */
.profile-banner-area { width: 100%; overflow: hidden; position: relative; }

/* ── SUNSET — warm sky, drifting sun glow, shimmer sweep ── */
.profile-banner-area.banner-gradient-sunset,
.banner-gradient-sunset {
    background: linear-gradient(135deg, #ff4500 0%, #f97316 20%, #ec4899 60%, #7c3aed 100%);
    background-size: 200% 200%;
    animation: sunset-shift 6s ease infinite;
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-gradient-sunset::before,
.banner-gradient-sunset::before {
    content: '';
    position: absolute; width: 80%; height: 180%;
    top: -40%; left: 5%;
    background: radial-gradient(ellipse at center, rgba(255,220,80,.55) 0%, rgba(255,120,50,.25) 40%, transparent 70%);
    animation: sun-drift 5s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-gradient-sunset::after,
.banner-gradient-sunset::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 10%, rgba(255,255,255,.14) 45%, transparent 80%);
    animation: shimmer-sweep 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sunset-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes sun-drift { from{transform:translateX(-18%) scaleY(.9)} to{transform:translateX(18%) scaleY(1.1)} }
@keyframes shimmer-sweep { 0%{opacity:0;transform:translateX(-120%)} 40%{opacity:1} 60%{opacity:1} 100%{opacity:0;transform:translateX(120%)} }

/* ── OCEAN — deep sea, animated wave crest, foam shimmer ── */
.profile-banner-area.banner-gradient-ocean,
.banner-gradient-ocean {
    background: linear-gradient(180deg, #0369a1 0%, #0284c7 30%, #075985 65%, #0f2744 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-gradient-ocean::before,
.banner-gradient-ocean::before {
    content: '';
    position: absolute; bottom: -35%; left: -25%;
    width: 150%; height: 90%;
    background: radial-gradient(ellipse 65% 55% at 50% 100%, rgba(56,189,248,.55) 0%, rgba(14,165,233,.2) 50%, transparent 100%);
    border-radius: 50%;
    animation: wave-bob 3.5s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-gradient-ocean::after,
.banner-gradient-ocean::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 28% 22% at 18% 72%, rgba(255,255,255,.2) 0%, transparent 100%),
        radial-gradient(ellipse 18% 14% at 72% 62%, rgba(255,255,255,.15) 0%, transparent 100%),
        radial-gradient(ellipse 12% 10% at 48% 80%, rgba(255,255,255,.12) 0%, transparent 100%);
    animation: foam-drift 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes wave-bob { from{transform:translateY(0) scaleX(1)} to{transform:translateY(-14%) scaleX(1.06)} }
@keyframes foam-drift { from{opacity:.6;transform:translateX(-6%)} to{opacity:1;transform:translateX(6%)} }

/* ── FOREST — deep forest, glowing firefly bokeh, mist ── */
.profile-banner-area.banner-gradient-forest,
.banner-gradient-forest {
    background: linear-gradient(160deg, #022c16 0%, #064e29 40%, #0d5c33 70%, #0a3d22 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-gradient-forest::before,
.banner-gradient-forest::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle 14px at 10% 38%, rgba(74,222,128,.75) 0%, transparent 100%),
        radial-gradient(circle  8px at 28% 72%, rgba(134,239,172,.6) 0%, transparent 100%),
        radial-gradient(circle 16px at 50% 22%, rgba(34,197,94,.65) 0%, transparent 100%),
        radial-gradient(circle  9px at 70% 62%, rgba(74,222,128,.6) 0%, transparent 100%),
        radial-gradient(circle 11px at 86% 35%, rgba(134,239,172,.55) 0%, transparent 100%),
        radial-gradient(circle  6px at 60% 85%, rgba(52,211,153,.5) 0%, transparent 100%),
        radial-gradient(circle  7px at 38% 50%, rgba(16,185,129,.45) 0%, transparent 100%);
    animation: firefly-glow 3.5s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-gradient-forest::after,
.banner-gradient-forest::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(2,28,16,.65) 0%, transparent 55%);
    pointer-events: none;
}
@keyframes firefly-glow { from{opacity:.45;transform:scale(.94)} to{opacity:1;transform:scale(1.06)} }

/* ── GOLD — metallic, animated light streak ── */
.profile-banner-area.banner-gradient-gold,
.banner-gradient-gold {
    background: linear-gradient(135deg, #6b2d00 0%, #92400e 15%, #b45309 30%, #d97706 48%, #fbbf24 58%, #f59e0b 68%, #b45309 82%, #78350f 100%);
    background-size: 300% 100%;
    animation: gold-flow 4s ease-in-out infinite;
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-gradient-gold::before,
.banner-gradient-gold::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 35%; height: 100%;
    background: linear-gradient(108deg, transparent 0%, rgba(255,255,255,.0) 28%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 72%, transparent 100%);
    animation: gold-streak 3.2s ease-in-out 0.4s infinite;
    pointer-events: none;
}
.profile-banner-area.banner-gradient-gold::after,
.banner-gradient-gold::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(251,191,36,.2) 0%, transparent 100%);
    pointer-events: none;
}
@keyframes gold-flow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes gold-streak { 0%{transform:translateX(-130%) skewX(-12deg);opacity:0} 15%{opacity:1} 75%{opacity:1} 100%{transform:translateX(400%) skewX(-12deg);opacity:0} }

/* ── GALAXY — deep space, twinkling stars, nebula clouds ── */
.profile-banner-area.banner-galaxy,
.banner-galaxy {
    background: radial-gradient(ellipse at 28% 50%, #1e1b4b 0%, #030712 55%, #0c0a20 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-galaxy::before,
.banner-galaxy::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at  8% 18%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 21% 55%, rgba(255,255,255,.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 36% 14%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 53% 44%, rgba(255,255,255,.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 64% 78%, rgba(200,200,255,.9) 0%, transparent 100%),
        radial-gradient(2px 2px at 77% 24%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 87% 62%, rgba(255,255,255,.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 14% 88%, rgba(167,139,250,.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 44% 70%, rgba(255,255,255,.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 94% 36%, rgba(196,181,253,.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 32% 32%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.5) 0%, transparent 100%);
    animation: star-twinkle 3s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-galaxy::after,
.banner-galaxy::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 75% 55% at 22% 50%, rgba(124,58,237,.38) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 80% 42%, rgba(6,182,212,.22) 0%, transparent 60%),
        radial-gradient(ellipse 35% 65% at 52% 82%, rgba(236,72,153,.16) 0%, transparent 60%);
    animation: nebula-drift 7s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes star-twinkle { from{opacity:.5} to{opacity:1} }
@keyframes nebula-drift { from{transform:scale(1) translate(0,0)} to{transform:scale(1.06) translate(2%,-1%)} }

/* ── DARK MATRIX — black, scrolling binary code, scan line ── */
.profile-banner-area.banner-dark-matrix,
.banner-dark-matrix {
    background: #020d02;
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-dark-matrix::before,
.banner-dark-matrix::before {
    content: '10110 01010 11001 00101 10100 11010 01101 10011 01001 11010 00110 10101 01110 11000 10010 01011';
    position: absolute; inset: 0;
    color: rgba(0,255,65,.28);
    font-family: 'Courier New', monospace; font-size: 7px;
    letter-spacing: 2px; line-height: 1.7; padding: 4px 8px;
    word-break: break-all; overflow: hidden;
    animation: code-scroll 3s linear infinite;
    pointer-events: none;
}
.profile-banner-area.banner-dark-matrix::after,
.banner-dark-matrix::after {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 35%; top: -35%;
    background: linear-gradient(to bottom, transparent, rgba(0,255,65,.1), rgba(0,255,65,.06), transparent);
    animation: scan-line 2.5s linear infinite;
    pointer-events: none;
}
@keyframes code-scroll { from{transform:translateY(0)} to{transform:translateY(-44px)} }
@keyframes scan-line { from{top:-35%} to{top:130%} }

/* ── CYBERPUNK — neon pink/yellow grid ── */
.profile-banner-area.banner-cyberpunk,
.banner-cyberpunk {
    background: linear-gradient(160deg, #0d0d0d 0%, #1a0533 50%, #0d0d0d 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-cyberpunk::before,
.banner-cyberpunk::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(250,204,21,.4) 50%, transparent 50.5%),
        linear-gradient(0deg,  transparent 49.5%, rgba(250,204,21,.12) 50%, transparent 50.5%);
    background-size: 22px 22px;
    animation: grid-pulse 2s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-cyberpunk::after,
.banner-cyberpunk::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 20% 50%, rgba(244,114,182,.45) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 80% 50%, rgba(250,204,21,.35) 0%, transparent 65%),
        linear-gradient(to bottom, rgba(0,0,0,.3) 0%, transparent 40%, rgba(0,0,0,.4) 100%);
    pointer-events: none;
}
@keyframes grid-pulse { from{opacity:.5} to{opacity:1} }

/* ── CONFETTI — colorful floating dots ── */
.profile-banner-area.banner-confetti,
.banner-confetti {
    background: linear-gradient(135deg, #fdf4ff 0%, #f0f9ff 50%, #fefce8 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-confetti::before,
.banner-confetti::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle 5px at  7% 30%, #ef4444 0%, transparent 100%),
        radial-gradient(circle 4px at 14% 70%, #f97316 0%, transparent 100%),
        radial-gradient(circle 6px at 22% 20%, #fbbf24 0%, transparent 100%),
        radial-gradient(circle 3px at 30% 80%, #22c55e 0%, transparent 100%),
        radial-gradient(circle 5px at 38% 45%, #06b6d4 0%, transparent 100%),
        radial-gradient(circle 4px at 47% 15%, #7c3aed 0%, transparent 100%),
        radial-gradient(circle 6px at 55% 65%, #ec4899 0%, transparent 100%),
        radial-gradient(circle 3px at 63% 35%, #ef4444 0%, transparent 100%),
        radial-gradient(circle 5px at 71% 75%, #f97316 0%, transparent 100%),
        radial-gradient(circle 4px at 79% 25%, #fbbf24 0%, transparent 100%),
        radial-gradient(circle 6px at 87% 55%, #22c55e 0%, transparent 100%),
        radial-gradient(circle 3px at 94% 40%, #7c3aed 0%, transparent 100%),
        radial-gradient(circle 4px at 18% 50%, #06b6d4 0%, transparent 100%),
        radial-gradient(circle 5px at 44% 88%, #ec4899 0%, transparent 100%),
        radial-gradient(circle 3px at 68% 12%, #ef4444 0%, transparent 100%),
        radial-gradient(circle 4px at 84% 82%, #fbbf24 0%, transparent 100%);
    animation: confetti-drift 3s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-confetti::after,
.banner-confetti::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle 3px at 10% 60%, #f97316 0%, transparent 100%),
        radial-gradient(circle 5px at 35% 25%, #7c3aed 0%, transparent 100%),
        radial-gradient(circle 4px at 58% 82%, #ef4444 0%, transparent 100%),
        radial-gradient(circle 6px at 76% 48%, #22c55e 0%, transparent 100%),
        radial-gradient(circle 3px at 91% 18%, #ec4899 0%, transparent 100%);
    animation: confetti-drift 3s ease-in-out .8s infinite alternate-reverse;
    pointer-events: none;
}
@keyframes confetti-drift { from{transform:translateY(0) rotate(0deg)} to{transform:translateY(-8px) rotate(3deg)} }

/* ── AURORA — northern lights ── */
.profile-banner-area.banner-aurora,
.banner-aurora {
    background: linear-gradient(180deg, #020a14 0%, #061a2e 60%, #030d1a 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-aurora::before,
.banner-aurora::before {
    content: '';
    position: absolute; inset: -20% 0;
    background:
        radial-gradient(ellipse 90% 55% at 30% 60%, rgba(16,185,129,.55) 0%, transparent 60%),
        radial-gradient(ellipse 70% 45% at 65% 55%, rgba(6,182,212,.45) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 48%, rgba(124,58,237,.4) 0%, transparent 60%);
    animation: aurora-wave 5s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-aurora::after,
.banner-aurora::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 15% 25%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 15%, rgba(255,255,255,.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 62% 35%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 83% 18%, rgba(255,255,255,.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 42%, #fff 0%, transparent 100%);
    animation: star-twinkle 2.5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes aurora-wave { from{transform:skewX(-5deg) scaleY(.9)} to{transform:skewX(5deg) scaleY(1.1)} }

/* ── CANDY — soft pastel / bubblegum ── */
.profile-banner-area.banner-candy,
.banner-candy {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 25%, #f9a8d4 50%, #f0abfc 75%, #ddd6fe 100%);
    background-size: 200% 200%;
    animation: candy-shift 4s ease infinite;
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-candy::before,
.banner-candy::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle 40px at 15% 50%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(circle 25px at 50% 30%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(circle 35px at 82% 60%, rgba(255,255,255,.35) 0%, transparent 100%);
    animation: candy-bubbles 3s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-candy::after,
.banner-candy::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.2) 55%, transparent 80%);
    animation: shimmer-sweep 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes candy-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes candy-bubbles { from{transform:scale(.95) translate(-3%,0)} to{transform:scale(1.05) translate(3%,0)} }

/* ── LAVA — molten rock ── */
.profile-banner-area.banner-lava,
.banner-lava {
    background: radial-gradient(ellipse at 40% 50%, #7f1d1d 0%, #1c0000 60%, #0d0000 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-lava::before,
.banner-lava::before {
    content: '';
    position: absolute; inset: -10% 0;
    background:
        radial-gradient(ellipse 70% 50% at 25% 65%, rgba(239,68,68,.75) 0%, rgba(234,88,12,.5) 35%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 72% 58%, rgba(249,115,22,.7) 0%, rgba(239,68,68,.4) 35%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 50% 80%, rgba(251,191,36,.5) 0%, transparent 60%);
    animation: lava-flow 3s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-lava::after,
.banner-lava::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(251,191,36,.15) 0%, transparent 40%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
}
@keyframes lava-flow { from{transform:scaleX(1) translateY(0)} to{transform:scaleX(1.08) translateY(-8%)} }

/* ── EMOJI — floating emoji characters ── */
.profile-banner-area.banner-emoji,
.banner-emoji {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-emoji::before,
.banner-emoji::before {
    content: '🚀 ⭐ 🎯 💎 🔥 ⚡ 🎨 🏆 💡 🎪 🌈 🎭 🦄 💫 🎮 🕹️';
    position: absolute; inset: 0;
    font-size: 14px; line-height: 1.6;
    padding: 4px 8px; letter-spacing: 4px;
    word-break: break-all; overflow: hidden;
    opacity: .65;
    animation: emoji-float 4s ease-in-out infinite alternate;
    pointer-events: none;
}
.profile-banner-area.banner-emoji::after,
.banner-emoji::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(30,27,75,.5) 0%, transparent 30%, transparent 70%, rgba(30,27,75,.5) 100%);
    pointer-events: none;
}
@keyframes emoji-float { from{transform:translateY(0) translateX(-4px)} to{transform:translateY(-6px) translateX(4px)} }

/* ── NEON CITY — dark purple with neon lines ── */
.profile-banner-area.banner-neon-city,
.banner-neon-city {
    background: linear-gradient(180deg, #020008 0%, #0d0022 50%, #120033 100%);
    position: relative; overflow: hidden;
}
.profile-banner-area.banner-neon-city::before,
.banner-neon-city::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, transparent, rgba(168,85,247,.5) 30%, rgba(168,85,247,.8) 31%, rgba(168,85,247,.5) 32%, transparent),
        linear-gradient(to right, transparent, rgba(6,182,212,.4) 58%, rgba(6,182,212,.7) 59%, rgba(6,182,212,.4) 60%, transparent),
        linear-gradient(to right, transparent, rgba(244,114,182,.35) 80%, rgba(244,114,182,.6) 81%, rgba(244,114,182,.35) 82%, transparent);
    animation: neon-flicker 2.5s ease-in-out infinite;
    pointer-events: none;
}
.profile-banner-area.banner-neon-city::after,
.banner-neon-city::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
    background:
        radial-gradient(ellipse 80% 100% at 50% 100%, rgba(168,85,247,.25) 0%, transparent 70%),
        linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 100%);
    pointer-events: none;
}
@keyframes neon-flicker {
    0%,100%{opacity:1} 4%{opacity:.85} 8%{opacity:1} 15%{opacity:.9} 19%{opacity:1} 60%{opacity:1} 62%{opacity:.75} 64%{opacity:1}
}

/* ===================================================================
   PROFILE BADGES — X/Twitter verified SEAL shape
   SVG is the full seal icon (shape + checkmark combined).
   Color is applied via currentColor — no circular background needed.
   Usage: <span class="cosmetic-badge badge-star"><svg …/></span>
   =================================================================== */
.cosmetic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
}
.cosmetic-badge svg { width: 22px; height: 22px; }

/* Colors via currentColor */
.badge-star    { color: #1d9bf0; }
.badge-pioneer { color: #10b981; }
.badge-creator { color: #7c3aed; }
.badge-mvp     { color: #f59e0b; }
.badge-legend  {
    color: #ef4444;
    animation: badge-legend-glow 2s ease-in-out infinite alternate;
}

@keyframes badge-legend-glow {
    from { filter: drop-shadow(0 0 4px rgba(239,68,68,.55)); }
    to   { filter: drop-shadow(0 0 10px rgba(239,68,68,.95)) drop-shadow(0 0 22px rgba(239,68,68,.45)); }
}

/* ===================================================================
   XP BOOSTER INDICATOR
   =================================================================== */
.xp-boost-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: white;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
    animation: boost-pulse 1.5s ease-in-out infinite;
}
@keyframes boost-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.05); opacity: 0.9; }
}