/**
 * NextBall - Player Banner System
 * 
 * Premium decorative name banners/frames for players
 * From simple elegant borders to animated cyber-tech masterpieces
 */

/* ============================================
   BASE BANNER STYLES
   ============================================ */
.player-banner {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 14px 6px 10px;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s ease;
    overflow: visible;
}

.player-banner .preview-name {
    position: relative;
    z-index: 2;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ============================================
   COMMON BANNERS (100-300 coins)
   Clean, minimal, elegant borders
   ============================================ */

/* Steel Frame - Industrial simplicity */
.banner-basic-steel {
    border: 2px solid #71797E;
    background: linear-gradient(90deg, rgba(113, 121, 126, 0.15) 0%, rgba(113, 121, 126, 0.05) 50%, transparent 100%);
    border-radius: 3px;
}

/* Bronze Frame - Warm classic */
.banner-basic-bronze {
    border: 2px solid #CD7F32;
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.2) 0%, rgba(205, 127, 50, 0.08) 50%, transparent 100%);
    box-shadow: inset 0 0 10px rgba(205, 127, 50, 0.1);
}

/* Silver Frame - Cool elegance */
.banner-basic-silver {
    border: 2px solid #C0C0C0;
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.2);
}

/* Gold Frame - Luxurious */
.banner-basic-gold {
    border: 2px solid #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.08) 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

/* Emerald Frame - Nature's gem */
.banner-basic-emerald {
    border: 2px solid #50C878;
    background: linear-gradient(90deg, rgba(80, 200, 120, 0.2) 0%, rgba(80, 200, 120, 0.08) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(80, 200, 120, 0.15);
}

/* Ruby Frame - Passionate red */
.banner-basic-ruby {
    border: 2px solid #E0115F;
    background: linear-gradient(90deg, rgba(224, 17, 95, 0.2) 0%, rgba(224, 17, 95, 0.08) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(224, 17, 95, 0.15);
}

/* ============================================
   RARE BANNERS (400-700 coins)
   Gradient borders with ambient glow
   ============================================ */

/* Ocean Wave - Deep sea vibes */
.banner-ocean {
    border: 2px solid transparent;
    background: 
        linear-gradient(rgba(20, 25, 45, 0.95), rgba(20, 25, 45, 0.9)) padding-box,
        linear-gradient(135deg, #0066FF 0%, #00CED1 50%, #0066FF 100%) border-box;
    box-shadow: 
        0 0 15px rgba(0, 102, 255, 0.4),
        inset 0 0 20px rgba(0, 206, 209, 0.1);
    border-radius: 5px;
}

/* Sunset Blaze - Warm horizon */
.banner-sunset {
    border: 2px solid transparent;
    background: 
        linear-gradient(rgba(30, 20, 20, 0.95), rgba(30, 20, 20, 0.9)) padding-box,
        linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FF4500 100%) border-box;
    box-shadow: 
        0 0 15px rgba(255, 107, 53, 0.4),
        inset 0 0 20px rgba(247, 147, 30, 0.1);
    border-radius: 5px;
}

/* Aurora Borealis - Northern lights */
.banner-aurora {
    border: 2px solid transparent;
    background: 
        linear-gradient(rgba(15, 30, 25, 0.95), rgba(15, 30, 25, 0.9)) padding-box,
        linear-gradient(135deg, #00FF87 0%, #60EFFF 50%, #00FF87 100%) border-box;
    box-shadow: 
        0 0 15px rgba(0, 255, 135, 0.35),
        0 0 30px rgba(96, 239, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 135, 0.08);
    border-radius: 5px;
}

/* Violet Dream - Mystical purple */
.banner-violet {
    border: 2px solid transparent;
    background: 
        linear-gradient(rgba(25, 15, 35, 0.95), rgba(25, 15, 35, 0.9)) padding-box,
        linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #8B5CF6 100%) border-box;
    box-shadow: 
        0 0 15px rgba(139, 92, 246, 0.4),
        0 0 25px rgba(236, 72, 153, 0.2),
        inset 0 0 20px rgba(139, 92, 246, 0.1);
    border-radius: 5px;
}

/* Blood Moon - Ominous crimson */
.banner-bloodmoon {
    border: 2px solid transparent;
    background: 
        linear-gradient(rgba(30, 10, 10, 0.95), rgba(20, 5, 5, 0.95)) padding-box,
        linear-gradient(135deg, #DC2626 0%, #7C2D12 50%, #DC2626 100%) border-box;
    box-shadow: 
        0 0 20px rgba(220, 38, 38, 0.5),
        inset 0 0 25px rgba(220, 38, 38, 0.15);
    border-radius: 5px;
}

/* ============================================
   EPIC BANNERS (1000-1500 coins)
   Animated glows, pulses, and effects
   ============================================ */

/* Neon Cyan - Electric pulse */
.banner-neon-cyan {
    border: 2px solid #00FFFF;
    background: 
        linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 255, 255, 0.05) 30%, transparent 60%),
        linear-gradient(rgba(10, 25, 30, 0.95), rgba(10, 25, 30, 0.9));
    box-shadow: 
        0 0 10px rgba(0, 255, 255, 0.6),
        0 0 20px rgba(0, 255, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.2),
        inset 0 0 15px rgba(0, 255, 255, 0.1);
    animation: neon-pulse-cyan 2s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes neon-pulse-cyan {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2), inset 0 0 15px rgba(0, 255, 255, 0.1);
        border-color: #00FFFF;
    }
    50% { 
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.3), inset 0 0 25px rgba(0, 255, 255, 0.15);
        border-color: #80FFFF;
    }
}

/* Neon Pink - Synthwave vibes */
.banner-neon-pink {
    border: 2px solid #FF00FF;
    background: 
        linear-gradient(90deg, rgba(255, 0, 255, 0.15) 0%, rgba(255, 0, 255, 0.05) 30%, transparent 60%),
        linear-gradient(rgba(30, 10, 30, 0.95), rgba(25, 5, 25, 0.9));
    box-shadow: 
        0 0 10px rgba(255, 0, 255, 0.6),
        0 0 20px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(255, 0, 255, 0.2),
        inset 0 0 15px rgba(255, 0, 255, 0.1);
    animation: neon-pulse-pink 2s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes neon-pulse-pink {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.6), 0 0 20px rgba(255, 0, 255, 0.4), 0 0 40px rgba(255, 0, 255, 0.2), inset 0 0 15px rgba(255, 0, 255, 0.1);
    }
    50% { 
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6), 0 0 60px rgba(255, 0, 255, 0.3), inset 0 0 25px rgba(255, 0, 255, 0.15);
    }
}

/* Electric Gold - Royal power */
.banner-electric-gold {
    border: 2px solid #FFD700;
    background: 
        linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.08) 30%, transparent 60%),
        linear-gradient(rgba(30, 25, 10, 0.95), rgba(25, 20, 5, 0.9));
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.7),
        0 0 30px rgba(255, 215, 0, 0.4),
        0 0 50px rgba(255, 215, 0, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    animation: electric-gold-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes electric-gold-pulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 215, 0, 0.2);
        border-color: #FFD700;
    }
    50% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6), 0 0 70px rgba(255, 215, 0, 0.3);
        border-color: #FFEA00;
    }
}

/* Frozen Ice - Arctic chill */
.banner-frozen {
    border: 2px solid #87CEEB;
    background: 
        linear-gradient(90deg, rgba(135, 206, 235, 0.25) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(135, 206, 235, 0.1) 60%, transparent 100%),
        linear-gradient(rgba(15, 25, 35, 0.95), rgba(10, 20, 30, 0.9));
    box-shadow: 
        0 0 15px rgba(135, 206, 235, 0.5),
        0 0 30px rgba(255, 255, 255, 0.3),
        inset 0 0 25px rgba(135, 206, 235, 0.15);
    animation: frozen-shimmer 3s ease-in-out infinite;
    border-radius: 4px;
}

.banner-frozen::before {
    content: '❄';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.6;
    animation: snowflake-spin 4s linear infinite;
}

@keyframes frozen-shimmer {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(135, 206, 235, 0.5), 0 0 30px rgba(255, 255, 255, 0.3), inset 0 0 25px rgba(135, 206, 235, 0.15);
    }
    50% { 
        box-shadow: 0 0 25px rgba(135, 206, 235, 0.7), 0 0 50px rgba(255, 255, 255, 0.4), inset 0 0 35px rgba(135, 206, 235, 0.2);
    }
}

@keyframes snowflake-spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Inferno - Hell's flames */
.banner-inferno {
    border: 2px solid #FF4500;
    background: 
        linear-gradient(90deg, rgba(255, 69, 0, 0.25) 0%, rgba(255, 165, 0, 0.15) 30%, rgba(255, 69, 0, 0.1) 60%, transparent 100%),
        linear-gradient(rgba(35, 15, 10, 0.95), rgba(25, 10, 5, 0.9));
    box-shadow: 
        0 0 15px rgba(255, 69, 0, 0.7),
        0 0 30px rgba(255, 165, 0, 0.4),
        0 0 50px rgba(255, 0, 0, 0.2),
        inset 0 0 20px rgba(255, 69, 0, 0.15);
    animation: inferno-flicker 0.15s ease-in-out infinite alternate;
    border-radius: 4px;
}

.banner-inferno::before {
    content: '🔥';
    position: absolute;
    left: -2px;
    top: -8px;
    font-size: 12px;
    animation: flame-dance 0.3s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 3px rgba(255, 100, 0, 0.8));
}

@keyframes inferno-flicker {
    0% { 
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.7), 0 0 30px rgba(255, 165, 0, 0.4), 0 0 50px rgba(255, 0, 0, 0.2);
        border-color: #FF4500;
    }
    100% { 
        box-shadow: 0 0 20px rgba(255, 69, 0, 0.9), 0 0 40px rgba(255, 165, 0, 0.6), 0 0 60px rgba(255, 0, 0, 0.3);
        border-color: #FF6600;
    }
}

@keyframes flame-dance {
    0% { transform: translateY(0) scale(1) rotate(-5deg); }
    100% { transform: translateY(-2px) scale(1.1) rotate(5deg); }
}

/* ============================================
   LEGENDARY BANNERS (2000-3500 coins)
   Full animations, complex effects, tech frames
   ============================================ */

/* Cyber Tech - Futuristic masterpiece */
.banner-cyber-tech {
    position: relative;
    border: 2px solid #FFD700;
    background: 
        linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 255, 255, 0.1) 100%),
        linear-gradient(rgba(15, 15, 25, 0.98), rgba(10, 10, 20, 0.95));
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.1),
        inset -50px 0 30px rgba(0, 255, 255, 0.05);
    animation: cyber-glow 3s ease-in-out infinite;
    clip-path: polygon(
        0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
    );
}

.banner-cyber-tech::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.1) 45%,
        rgba(255, 215, 0, 0.15) 50%,
        rgba(0, 255, 255, 0.1) 55%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: cyber-scan 2s linear infinite;
    pointer-events: none;
}

.banner-cyber-tech::after {
    content: '⚡';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #00FFFF;
    text-shadow: 0 0 5px #00FFFF;
    animation: cyber-bolt 1s ease-in-out infinite;
}

@keyframes cyber-glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.1);
        border-color: #FFD700;
    }
    50% { 
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(0, 255, 255, 0.5), inset 0 0 40px rgba(255, 215, 0, 0.15);
        border-color: #00FFFF;
    }
}

@keyframes cyber-scan {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

@keyframes cyber-bolt {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
}

/* Rainbow Prism - Chromatic beauty */
.banner-rainbow {
    border: 3px solid transparent;
    background: 
        linear-gradient(rgba(20, 20, 30, 0.95), rgba(15, 15, 25, 0.9)) padding-box,
        linear-gradient(90deg, 
            #ff0000 0%, #ff7f00 14%, #ffff00 28%, #00ff00 42%, 
            #0000ff 57%, #4b0082 71%, #9400d3 85%, #ff0000 100%
        ) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 
        0 0 20px rgba(255, 0, 0, 0.3),
        0 0 30px rgba(0, 255, 0, 0.2),
        0 0 40px rgba(0, 0, 255, 0.2);
    animation: rainbow-shift 3s linear infinite, rainbow-glow 2s ease-in-out infinite;
    border-radius: 5px;
}

.banner-rainbow::before {
    content: '✨';
    position: absolute;
    left: -4px;
    top: -4px;
    font-size: 10px;
    animation: sparkle 1s ease-in-out infinite;
}

.banner-rainbow::after {
    content: '✨';
    position: absolute;
    right: -4px;
    bottom: -4px;
    font-size: 8px;
    animation: sparkle 1s ease-in-out infinite 0.5s;
}

@keyframes rainbow-shift {
    0% { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, 300% 0; }
}

@keyframes rainbow-glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3), 0 0 30px rgba(0, 255, 0, 0.2), 0 0 40px rgba(0, 0, 255, 0.2);
    }
    33% { 
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.3), 0 0 30px rgba(0, 0, 255, 0.2), 0 0 40px rgba(255, 0, 255, 0.2);
    }
    66% { 
        box-shadow: 0 0 20px rgba(0, 0, 255, 0.3), 0 0 30px rgba(255, 0, 255, 0.2), 0 0 40px rgba(255, 0, 0, 0.2);
    }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Galaxy - Cosmic wonder */
.banner-galaxy {
    border: 2px solid #8B00FF;
    background: 
        radial-gradient(ellipse at 15% 50%, rgba(139, 0, 255, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 50%, rgba(255, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 30%),
        linear-gradient(rgba(10, 5, 20, 0.98), rgba(5, 0, 15, 0.95));
    box-shadow: 
        0 0 30px rgba(139, 0, 255, 0.7),
        0 0 60px rgba(255, 0, 255, 0.4),
        0 0 90px rgba(139, 0, 255, 0.2),
        inset 0 0 40px rgba(139, 0, 255, 0.2);
    animation: galaxy-pulse 4s ease-in-out infinite;
    border-radius: 5px;
    overflow: visible;
}

.banner-galaxy::before {
    content: '★';
    position: absolute;
    font-size: 6px;
    color: white;
    top: 2px;
    right: 12px;
    animation: star-twinkle 1.5s ease-in-out infinite;
    text-shadow: 0 0 3px white;
}

.banner-galaxy::after {
    content: '✦';
    position: absolute;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.8);
    bottom: 2px;
    left: 10px;
    animation: star-twinkle 2s ease-in-out infinite 0.7s;
    text-shadow: 0 0 5px rgba(139, 0, 255, 0.8);
}

@keyframes galaxy-pulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(139, 0, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.4), 0 0 90px rgba(139, 0, 255, 0.2);
        border-color: #8B00FF;
    }
    50% { 
        box-shadow: 0 0 40px rgba(139, 0, 255, 0.9), 0 0 80px rgba(255, 0, 255, 0.6), 0 0 120px rgba(139, 0, 255, 0.3);
        border-color: #FF00FF;
    }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Dragon Fire - Ancient power */
.banner-dragon {
    border: 2px solid #FF4500;
    background: 
        linear-gradient(90deg, rgba(255, 69, 0, 0.35) 0%, rgba(139, 0, 0, 0.2) 30%, rgba(255, 69, 0, 0.15) 60%, transparent 100%),
        linear-gradient(rgba(30, 10, 5, 0.98), rgba(20, 5, 0, 0.95));
    box-shadow: 
        0 0 25px rgba(255, 69, 0, 0.8),
        0 0 50px rgba(255, 165, 0, 0.5),
        0 0 75px rgba(255, 0, 0, 0.3),
        inset 0 0 30px rgba(255, 69, 0, 0.2);
    animation: dragon-breathe 2.5s ease-in-out infinite;
    border-radius: 5px;
}

.banner-dragon::before {
    content: '🐉';
    position: absolute;
    font-size: 14px;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.8));
    animation: dragon-head 2s ease-in-out infinite;
}

.banner-dragon::after {
    content: '🔥';
    position: absolute;
    font-size: 10px;
    right: 4px;
    top: -6px;
    animation: dragon-flame 0.4s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 3px rgba(255, 100, 0, 0.8));
}

@keyframes dragon-breathe {
    0%, 100% { 
        box-shadow: 0 0 25px rgba(255, 69, 0, 0.8), 0 0 50px rgba(255, 165, 0, 0.5), 0 0 75px rgba(255, 0, 0, 0.3);
        border-color: #FF4500;
    }
    50% { 
        box-shadow: 0 0 35px rgba(255, 69, 0, 1), 0 0 70px rgba(255, 165, 0, 0.7), 0 0 100px rgba(255, 0, 0, 0.4);
        border-color: #FF6600;
    }
}

@keyframes dragon-head {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.1); }
}

@keyframes dragon-flame {
    0% { transform: scale(1) rotate(-10deg); opacity: 0.8; }
    100% { transform: scale(1.2) rotate(10deg); opacity: 1; }
}

/* Void - The abyss */
.banner-void {
    border: 2px solid #4B0082;
    background: 
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(75, 0, 130, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%),
        linear-gradient(rgba(5, 0, 10, 0.98), rgba(0, 0, 5, 0.98));
    box-shadow: 
        0 0 30px rgba(75, 0, 130, 0.9),
        0 0 60px rgba(138, 43, 226, 0.5),
        0 0 90px rgba(75, 0, 130, 0.3),
        inset 0 0 50px rgba(0, 0, 0, 0.9);
    animation: void-consume 3s ease-in-out infinite;
    border-radius: 5px;
    overflow: hidden;
}

.banner-void::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(138, 43, 226, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 70% 70%, rgba(75, 0, 130, 0.3) 0%, transparent 30%);
    animation: void-swirl 6s linear infinite;
    pointer-events: none;
}

.banner-void::after {
    content: '👁';
    position: absolute;
    font-size: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: void-eye 4s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.8));
}

@keyframes void-consume {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(75, 0, 130, 0.9), 0 0 60px rgba(138, 43, 226, 0.5), 0 0 90px rgba(75, 0, 130, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.9);
        border-color: #4B0082;
    }
    50% { 
        box-shadow: 0 0 40px rgba(75, 0, 130, 1), 0 0 80px rgba(138, 43, 226, 0.7), 0 0 120px rgba(75, 0, 130, 0.4), inset 0 0 60px rgba(0, 0, 0, 0.95);
        border-color: #8B00FF;
    }
}

@keyframes void-swirl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes void-eye {
    0%, 40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    45%, 55% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
}

/* ============================================
   LOBBY PLAYER ITEM INTEGRATION
   ============================================ */
.player-item.has-banner {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.player-item.has-banner .player-banner {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-item.has-banner .player-rank {
    position: relative;
    z-index: 2;
}

.player-item.has-banner .player-name {
    position: relative;
    z-index: 2;
    flex: 1;
}

.player-item.has-banner .player-ping {
    position: relative;
    z-index: 2;
}

/* ============================================
   SHOP PREVIEW STYLES
   ============================================ */
.banner-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px 8px 0 0;
    min-height: 60px;
}

.banner-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    min-width: 180px;
}

.banner-preview .preview-rank {
    font-size: 16px;
    position: relative;
    z-index: 2;
}

.banner-preview .preview-name {
    color: white;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    z-index: 2;
}

/* ============================================
   STAFF BADGE STYLING
   ============================================ */
.staff-badge {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    vertical-align: middle;
}

.staff-badge.admin-badge {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.staff-badge.mod-badge {
    background: linear-gradient(135deg, #00d4aa, #00a080);
    color: #000;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.4);
}

/* Banner wrapper styling */
.banner-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* Contain glow effects */
    border-radius: 4px;
}

/* Limit banner effects in lobby */
.player-item .banner-wrapper {
    max-width: 100%;
}

/* Scale down effects for lobby display - smaller, controlled glow */
.player-item .banner-wrapper[class*="banner-"] {
    /* Override will be applied per-banner below */
}

/* Re-apply controlled glow effects - visible but contained */

/* LEGENDARY - Nice glow, 15-20px spread max */
.player-item .banner-wrapper.banner-cyber-tech {
    border: 2px solid #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 255, 255, 0.1) 100%), rgba(15, 15, 25, 0.95);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.15) !important;
}

.player-item .banner-wrapper.banner-galaxy {
    border: 2px solid #8B00FF;
    background: linear-gradient(90deg, rgba(139, 0, 255, 0.2) 0%, rgba(255, 0, 255, 0.15) 100%), rgba(10, 5, 20, 0.95);
    box-shadow: 0 0 15px rgba(139, 0, 255, 0.6), 0 0 25px rgba(255, 0, 255, 0.3), inset 0 0 12px rgba(139, 0, 255, 0.2) !important;
}

.player-item .banner-wrapper.banner-void {
    border: 2px solid #4B0082;
    background: radial-gradient(ellipse at center, rgba(75, 0, 130, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%), rgba(5, 0, 10, 0.95);
    box-shadow: 0 0 15px rgba(75, 0, 130, 0.7), 0 0 25px rgba(138, 43, 226, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

.player-item .banner-wrapper.banner-dragon {
    border: 2px solid #FF4500;
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.2) 0%, rgba(139, 0, 0, 0.15) 100%), rgba(30, 10, 5, 0.95);
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.6), 0 0 20px rgba(255, 165, 0, 0.3), inset 0 0 10px rgba(255, 69, 0, 0.2) !important;
}

.player-item .banner-wrapper.banner-rainbow {
    border: 2px solid;
    border-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3) 1;
    background: rgba(20, 20, 30, 0.95);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3), 0 0 15px rgba(0, 255, 0, 0.2), 0 0 20px rgba(0, 0, 255, 0.2) !important;
}

/* EPIC - Medium glow, 10-15px spread */
.player-item .banner-wrapper.banner-neon-cyan {
    border: 2px solid #00FFFF;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, transparent 50%), rgba(10, 25, 30, 0.95);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5), 0 0 18px rgba(0, 255, 255, 0.3), inset 0 0 8px rgba(0, 255, 255, 0.15) !important;
}

.player-item .banner-wrapper.banner-neon-pink {
    border: 2px solid #FF00FF;
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.15) 0%, transparent 50%), rgba(30, 10, 30, 0.95);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 18px rgba(255, 0, 255, 0.3), inset 0 0 8px rgba(255, 0, 255, 0.15) !important;
}

.player-item .banner-wrapper.banner-electric-gold {
    border: 2px solid #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, transparent 50%), rgba(30, 25, 10, 0.95);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 18px rgba(255, 215, 0, 0.3), inset 0 0 8px rgba(255, 215, 0, 0.15) !important;
}

.player-item .banner-wrapper.banner-frozen {
    border: 2px solid #87CEEB;
    background: linear-gradient(90deg, rgba(135, 206, 235, 0.2) 0%, transparent 50%), rgba(15, 25, 35, 0.95);
    box-shadow: 0 0 10px rgba(135, 206, 235, 0.4), 0 0 18px rgba(255, 255, 255, 0.2), inset 0 0 8px rgba(135, 206, 235, 0.15) !important;
}

.player-item .banner-wrapper.banner-inferno {
    border: 2px solid #FF4500;
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.2) 0%, transparent 50%), rgba(35, 15, 10, 0.95);
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5), 0 0 18px rgba(255, 165, 0, 0.3), inset 0 0 8px rgba(255, 69, 0, 0.15) !important;
}

/* Disable large animations in lobby */
.player-item .banner-wrapper::before,
.player-item .banner-wrapper::after {
    display: none !important;
}

/* Common banners in lobby */
.player-item .banner-wrapper.banner-basic-steel {
    border: 2px solid #71797E;
    background: linear-gradient(90deg, rgba(113, 121, 126, 0.15) 0%, transparent 50%), rgba(30, 30, 35, 0.9);
    box-shadow: none !important;
}

.player-item .banner-wrapper.banner-basic-bronze {
    border: 2px solid #CD7F32;
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, transparent 50%), rgba(30, 25, 20, 0.9);
    box-shadow: none !important;
}

.player-item .banner-wrapper.banner-basic-silver {
    border: 2px solid #C0C0C0;
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, transparent 50%), rgba(30, 30, 35, 0.9);
    box-shadow: none !important;
}

.player-item .banner-wrapper.banner-basic-gold {
    border: 2px solid #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, transparent 50%), rgba(30, 28, 20, 0.9);
    box-shadow: none !important;
}

.player-item .banner-wrapper.banner-basic-emerald {
    border: 2px solid #50C878;
    background: linear-gradient(90deg, rgba(80, 200, 120, 0.15) 0%, transparent 50%), rgba(20, 30, 25, 0.9);
    box-shadow: none !important;
}

.player-item .banner-wrapper.banner-basic-ruby {
    border: 2px solid #E0115F;
    background: linear-gradient(90deg, rgba(224, 17, 95, 0.15) 0%, transparent 50%), rgba(30, 20, 25, 0.9);
    box-shadow: none !important;
}

/* RARE - Subtle glow, 8-12px spread */
.player-item .banner-wrapper.banner-ocean {
    border: 2px solid #0066FF;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2) 0%, rgba(0, 206, 209, 0.15) 100%), rgba(20, 25, 45, 0.9);
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.4), 0 0 12px rgba(0, 206, 209, 0.25) !important;
}

.player-item .banner-wrapper.banner-sunset {
    border: 2px solid #FF6B35;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(247, 147, 30, 0.15) 100%), rgba(30, 20, 20, 0.9);
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.4), 0 0 12px rgba(247, 147, 30, 0.25) !important;
}

.player-item .banner-wrapper.banner-aurora {
    border: 2px solid #00FF87;
    background: linear-gradient(135deg, rgba(0, 255, 135, 0.2) 0%, rgba(96, 239, 255, 0.15) 100%), rgba(15, 30, 25, 0.9);
    box-shadow: 0 0 8px rgba(0, 255, 135, 0.4), 0 0 12px rgba(96, 239, 255, 0.25) !important;
}

.player-item .banner-wrapper.banner-violet {
    border: 2px solid #8B5CF6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(236, 72, 153, 0.15) 100%), rgba(25, 15, 35, 0.9);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), 0 0 12px rgba(236, 72, 153, 0.25) !important;
}

.player-item .banner-wrapper.banner-bloodmoon {
    border: 2px solid #DC2626;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(124, 45, 18, 0.15) 100%), rgba(30, 10, 10, 0.9);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5), 0 0 12px rgba(220, 38, 38, 0.3) !important;
}

.banner-wrapper .player-rank {
    position: relative;
    z-index: 2;
}

.banner-wrapper .player-name {
    position: relative;
    z-index: 2;
    flex: 1;
}

.banner-wrapper .player-ping {
    position: relative;
    z-index: 2;
    margin-left: auto;
}

.banner-wrapper .staff-badge {
    position: relative;
    z-index: 3;
}