/**
 * NextBall - Badge Styles
 * 
 * Animated badge frames for player names in lobby
 * Each badge type has unique visual effects
 */

/* ============================================
   BASE BADGE CONTAINER
   ============================================ */
.player-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    overflow: visible;
}

.player-badge .badge-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-badge .badge-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   BASIC FRAMES (Static borders)
   ============================================ */
.badge-basic {
    border: 2px solid var(--badge-color, #FFD700);
}

/* ============================================
   GLOW FRAMES (Pulsing glow effect)
   ============================================ */
.badge-glow {
    border: 2px solid var(--badge-color, #00BFFF);
    box-shadow: 
        0 0 5px var(--badge-glow, var(--badge-color)),
        0 0 10px var(--badge-glow, var(--badge-color)),
        inset 0 0 5px rgba(255, 255, 255, 0.1);
    animation: badge-pulse var(--badge-speed, 2s) ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        box-shadow: 
            0 0 5px var(--badge-glow, var(--badge-color)),
            0 0 10px var(--badge-glow, var(--badge-color)),
            inset 0 0 5px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 10px var(--badge-glow, var(--badge-color)),
            0 0 20px var(--badge-glow, var(--badge-color)),
            0 0 30px var(--badge-glow, var(--badge-color)),
            inset 0 0 10px rgba(255, 255, 255, 0.2);
    }
}

/* ============================================
   NEON FRAMES (Bright neon effect)
   ============================================ */
.badge-neon {
    border: 2px solid var(--badge-color, #00FFFF);
    box-shadow: 
        0 0 5px var(--badge-color),
        0 0 10px var(--badge-color),
        0 0 20px var(--badge-color),
        0 0 40px var(--badge-glow, var(--badge-color)),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
    animation: badge-neon-flicker var(--badge-speed, 1.5s) ease-in-out infinite;
}

@keyframes badge-neon-flicker {
    0%, 100% {
        opacity: 1;
        box-shadow: 
            0 0 5px var(--badge-color),
            0 0 10px var(--badge-color),
            0 0 20px var(--badge-color),
            0 0 40px var(--badge-glow, var(--badge-color));
    }
    50% {
        opacity: 0.95;
        box-shadow: 
            0 0 10px var(--badge-color),
            0 0 20px var(--badge-color),
            0 0 40px var(--badge-color),
            0 0 60px var(--badge-glow, var(--badge-color));
    }
    52% {
        opacity: 0.8;
    }
    54% {
        opacity: 1;
    }
}

/* ============================================
   GRADIENT FRAMES (Animated gradient border)
   ============================================ */
.badge-gradient {
    border: 3px solid transparent;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)) padding-box,
        linear-gradient(var(--gradient-angle, 45deg), var(--badge-color), var(--badge-secondary)) border-box;
    animation: badge-gradient-rotate var(--badge-speed, 3s) linear infinite;
}

@keyframes badge-gradient-rotate {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}

@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ============================================
   CYBER FRAMES (Futuristic tech look)
   ============================================ */
.badge-cyber {
    border: 2px solid var(--badge-color, #FFD700);
    clip-path: polygon(
        0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px)
    );
    background: 
        linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        linear-gradient(45deg, rgba(0, 255, 255, 0.05) 0%, transparent 50%),
        rgba(0, 0, 0, 0.8);
    box-shadow: 
        0 0 10px var(--badge-color),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    animation: badge-cyber-scan var(--badge-speed, 2s) linear infinite;
}

.badge-cyber::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: badge-cyber-shine 3s linear infinite;
}

@keyframes badge-cyber-scan {
    0%, 100% {
        box-shadow: 
            0 0 10px var(--badge-color),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 15px var(--badge-color),
            0 0 30px var(--badge-secondary, #00FFFF),
            inset 0 0 30px rgba(0, 255, 255, 0.2);
    }
}

@keyframes badge-cyber-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ============================================
   FIRE FRAMES (Burning flame effect)
   ============================================ */
.badge-fire {
    border: 2px solid #FF4500;
    background: 
        radial-gradient(ellipse at bottom, rgba(255, 100, 0, 0.3) 0%, transparent 70%),
        rgba(0, 0, 0, 0.8);
    box-shadow: 
        0 0 10px #FF4500,
        0 0 20px #FF6600,
        0 0 30px #FF8800;
    animation: badge-fire-flicker var(--badge-speed, 0.5s) ease-in-out infinite alternate;
}

.badge-fire::before,
.badge-fire::after {
    content: '';
    position: absolute;
    bottom: -5px;
    width: 20px;
    height: 30px;
    background: linear-gradient(to top, #FF4500, #FFD700, transparent);
    filter: blur(3px);
    animation: badge-flame var(--badge-speed, 0.3s) ease-in-out infinite alternate;
    border-radius: 50% 50% 20% 20%;
}

.badge-fire::before {
    left: 20%;
    animation-delay: 0.1s;
}

.badge-fire::after {
    right: 20%;
    animation-delay: 0.2s;
}

@keyframes badge-fire-flicker {
    0% {
        box-shadow: 
            0 0 10px #FF4500,
            0 0 20px #FF6600,
            0 0 30px #FF8800;
    }
    100% {
        box-shadow: 
            0 0 15px #FF4500,
            0 0 30px #FF6600,
            0 0 45px #FF8800,
            0 0 60px #FFAA00;
    }
}

@keyframes badge-flame {
    0% {
        height: 25px;
        opacity: 0.8;
    }
    100% {
        height: 35px;
        opacity: 1;
    }
}

/* ============================================
   ICE FRAMES (Frozen crystal effect)
   ============================================ */
.badge-ice {
    border: 2px solid #00BFFF;
    background: 
        linear-gradient(135deg, rgba(135, 206, 235, 0.2) 0%, transparent 50%),
        linear-gradient(45deg, rgba(224, 255, 255, 0.1) 0%, transparent 50%),
        rgba(0, 20, 40, 0.9);
    box-shadow: 
        0 0 10px #87CEEB,
        0 0 20px rgba(135, 206, 250, 0.5),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    animation: badge-ice-shimmer var(--badge-speed, 3s) ease-in-out infinite;
}

.badge-ice::before {
    content: '❄';
    position: absolute;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    animation: badge-snowflake 4s linear infinite;
}

@keyframes badge-ice-shimmer {
    0%, 100% {
        box-shadow: 
            0 0 10px #87CEEB,
            0 0 20px rgba(135, 206, 250, 0.5);
    }
    50% {
        box-shadow: 
            0 0 15px #00BFFF,
            0 0 30px rgba(135, 206, 250, 0.7),
            0 0 40px rgba(255, 255, 255, 0.3);
    }
}

@keyframes badge-snowflake {
    0% { top: -20px; left: 10%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; left: 80%; opacity: 0; transform: rotate(360deg); }
}

/* ============================================
   ELECTRIC FRAMES (Lightning effect)
   ============================================ */
.badge-electric {
    border: 2px solid #FFFF00;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 
        0 0 5px #FFFF00,
        0 0 10px #00FFFF;
    animation: badge-electric-flash var(--badge-speed, 0.1s) steps(2) infinite;
}

.badge-electric::before {
    content: '⚡';
    position: absolute;
    font-size: 14px;
    color: #FFFF00;
    text-shadow: 0 0 10px #FFFF00;
    animation: badge-lightning 2s ease-in-out infinite;
    top: -5px;
    right: -5px;
}

@keyframes badge-electric-flash {
    0%, 90% {
        box-shadow: 
            0 0 5px #FFFF00,
            0 0 10px #00FFFF;
    }
    95% {
        box-shadow: 
            0 0 20px #FFFF00,
            0 0 40px #00FFFF,
            0 0 60px #FFFFFF;
    }
}

@keyframes badge-lightning {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
    52% { opacity: 0.3; }
    54% { opacity: 1; }
}

/* ============================================
   RAINBOW FRAMES (Color cycling)
   ============================================ */
.badge-rainbow {
    border: 3px solid transparent;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)) padding-box,
        linear-gradient(var(--rainbow-angle, 0deg), 
            #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000
        ) border-box;
    box-shadow: 
        0 0 10px rgba(255, 0, 0, 0.5),
        0 0 20px rgba(255, 127, 0, 0.3),
        0 0 30px rgba(255, 255, 0, 0.3);
    animation: badge-rainbow-rotate var(--badge-speed, 3s) linear infinite;
}

@keyframes badge-rainbow-rotate {
    0% { --rainbow-angle: 0deg; filter: hue-rotate(0deg); }
    100% { --rainbow-angle: 360deg; filter: hue-rotate(360deg); }
}

@property --rainbow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ============================================
   GALAXY FRAMES (Cosmic swirl effect)
   ============================================ */
.badge-galaxy {
    border: 2px solid #8A2BE2;
    background: 
        radial-gradient(ellipse at center, rgba(75, 0, 130, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse at 30% 30%, rgba(255, 0, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(138, 43, 226, 0.2) 0%, transparent 50%),
        rgba(10, 0, 20, 0.95);
    box-shadow: 
        0 0 15px #8A2BE2,
        0 0 30px rgba(138, 43, 226, 0.5);
    animation: badge-galaxy-swirl var(--badge-speed, 10s) linear infinite;
    overflow: hidden;
}

.badge-galaxy::before {
    content: '✦';
    position: absolute;
    font-size: 8px;
    color: white;
    text-shadow: 0 0 5px white;
    animation: badge-star-twinkle 2s ease-in-out infinite;
}

.badge-galaxy::after {
    content: '✧';
    position: absolute;
    font-size: 6px;
    color: rgba(255, 255, 255, 0.8);
    animation: badge-star-twinkle 3s ease-in-out infinite reverse;
    top: 30%;
    right: 20%;
}

@keyframes badge-galaxy-swirl {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

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

/* ============================================
   DRAGON FRAMES (Ancient fire)
   ============================================ */
.badge-dragon {
    border: 3px solid #8B0000;
    background: 
        linear-gradient(to top, rgba(139, 0, 0, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(255, 69, 0, 0.3) 0%, transparent 60%),
        rgba(20, 0, 0, 0.95);
    box-shadow: 
        0 0 10px #FF4500,
        0 0 20px #8B0000,
        inset 0 0 20px rgba(255, 69, 0, 0.2);
    animation: badge-dragon-breathe var(--badge-speed, 2s) ease-in-out infinite;
}

.badge-dragon::before {
    content: '🐉';
    position: absolute;
    font-size: 16px;
    top: -10px;
    left: -10px;
    filter: drop-shadow(0 0 5px #FF4500);
    animation: badge-dragon-hover 3s ease-in-out infinite;
}

@keyframes badge-dragon-breathe {
    0%, 100% {
        box-shadow: 
            0 0 10px #FF4500,
            0 0 20px #8B0000;
    }
    50% {
        box-shadow: 
            0 0 20px #FF4500,
            0 0 40px #FF6600,
            0 0 60px #8B0000;
    }
}

@keyframes badge-dragon-hover {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

/* ============================================
   VOID FRAMES (Dark energy)
   ============================================ */
.badge-void {
    border: 2px solid #4a0080;
    background: 
        radial-gradient(ellipse at center, rgba(74, 0, 128, 0.3) 0%, rgba(0, 0, 0, 0.95) 70%),
        rgba(10, 0, 20, 0.98);
    box-shadow: 
        0 0 10px #8B00FF,
        0 0 20px rgba(74, 0, 128, 0.5),
        inset 0 0 30px rgba(139, 0, 255, 0.1);
    animation: badge-void-pulse var(--badge-speed, 4s) ease-in-out infinite;
}

.badge-void::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(139, 0, 255, 0.1) 70%);
    transform: translate(-50%, -50%);
    animation: badge-void-swirl 6s linear infinite;
}

@keyframes badge-void-pulse {
    0%, 100% {
        box-shadow: 
            0 0 10px #8B00FF,
            0 0 20px rgba(74, 0, 128, 0.5);
    }
    50% {
        box-shadow: 
            0 0 5px #4a0080,
            0 0 10px rgba(74, 0, 128, 0.3);
    }
}

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

/* ============================================
   RARITY INDICATORS
   ============================================ */
.badge-rarity-common .badge-frame { border-color: #9CA3AF; }
.badge-rarity-rare .badge-frame { border-color: #3B82F6; }
.badge-rarity-epic .badge-frame { border-color: #A855F7; }
.badge-rarity-legendary .badge-frame { border-color: #F59E0B; }

/* Rarity glow */
.badge-rarity-legendary {
    animation: legendary-glow 2s ease-in-out infinite;
}

@keyframes legendary-glow {
    0%, 100% { filter: drop-shadow(0 0 5px #F59E0B); }
    50% { filter: drop-shadow(0 0 15px #F59E0B); }
}

/* ============================================
   SHOP PREVIEW STYLES
   ============================================ */
.badge-preview {
    transform: scale(1.5);
    margin: 20px;
}

.badge-preview:hover {
    transform: scale(1.6);
    transition: transform 0.3s ease;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .player-badge {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .badge-fire::before,
    .badge-fire::after {
        width: 15px;
        height: 20px;
    }
}