/* ============================================
   SPECIAL SOONIE TIERS - 5 Tier System
   ============================================ */

/* Base Special Soonie (shared properties) */
.special-soonie {
    position: fixed;
    width: 150px;
    z-index: 10000;
    cursor: pointer;
    transition: transform 0.1s;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, left, top;
}

.special-soonie:active {
    transform: scale(0.95) !important;
}

/* Bronze Tier - High Contrast Copper/Orange */
.special-soonie-bronze {
    filter: sepia(1) saturate(6) hue-rotate(-20deg) brightness(0.9) contrast(1.2) drop-shadow(0 0 15px #CD7F32) drop-shadow(0 0 30px rgba(205, 127, 50, 0.4));
}

/* Silver Tier - True Metallic Silver (Full Grayscale) */
.special-soonie-silver {
    filter: grayscale(1) brightness(1.5) contrast(1.2) drop-shadow(0 0 20px #E8E8E8) drop-shadow(0 0 40px rgba(232, 232, 232, 0.5));
}

/* Gold Tier - Hyper-Saturated Gold Glow */
.special-soonie-gold {
    filter: sepia(1) saturate(10) brightness(1.2) contrast(1.1) drop-shadow(0 0 20px gold) drop-shadow(0 0 40px rgba(255, 215, 0, 0.6));
    animation: goldPulse 1s ease-in-out infinite alternate;
}

/* Platinum Tier - High-Brightness Icy Cyan */
.special-soonie-platinum {
    filter: grayscale(0.1) brightness(1.8) saturate(1.2) hue-rotate(180deg) contrast(1.1) drop-shadow(0 0 25px #00DFFF) drop-shadow(0 0 50px rgba(0, 223, 255, 0.6));
    animation: platinumShimmer 1.5s ease-in-out infinite;
}

/* Diamond Tier - Maximum Prismatic Vibrancy */
.special-soonie-diamond {
    filter: brightness(2) contrast(1.3) drop-shadow(0 0 30px #B9F2FF) drop-shadow(0 0 60px rgba(255, 105, 180, 0.8));
    animation: diamondRainbow 2s linear infinite, diamondPulse 0.8s ease-in-out infinite alternate;
}

/* Tier Animations */
@keyframes goldPulse {
    from {
        filter: sepia(1) saturate(5) brightness(1.2) drop-shadow(0 0 20px gold);
    }

    to {
        filter: sepia(1) saturate(6) brightness(1.35) drop-shadow(0 0 35px gold);
    }
}

@keyframes platinumShimmer {

    0%,
    100% {
        filter: grayscale(0.2) brightness(1.4) saturate(0.8) hue-rotate(180deg) drop-shadow(0 0 25px #00DFFF);
    }

    50% {
        filter: grayscale(0.1) brightness(1.6) saturate(1) hue-rotate(190deg) drop-shadow(0 0 40px #00FFFF);
    }
}

@keyframes diamondRainbow {
    0% {
        filter: brightness(1.5) hue-rotate(0deg) drop-shadow(0 0 30px #ff6b6b);
    }

    25% {
        filter: brightness(1.5) hue-rotate(90deg) drop-shadow(0 0 30px #4ecdc4);
    }

    50% {
        filter: brightness(1.5) hue-rotate(180deg) drop-shadow(0 0 30px #45aaf2);
    }

    75% {
        filter: brightness(1.5) hue-rotate(270deg) drop-shadow(0 0 30px #a55eea);
    }

    100% {
        filter: brightness(1.5) hue-rotate(360deg) drop-shadow(0 0 30px #ff6b6b);
    }
}

@keyframes diamondPulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

/* ============================================
   SPECIAL PARTICLE EXPLOSIONS
   ============================================ */

.special-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    animation: specialExplode 1s ease-out forwards;
}

/* Tier-specific particle styling */
.special-particle-bronze {
    background: #CD7F32;
    box-shadow: 0 0 10px #CD7F32;
}

.special-particle-silver {
    background: #E8E8E8;
    box-shadow: 0 0 10px #C0C0C0, 0 0 20px rgba(192, 192, 192, 0.5);
}

.special-particle-gold {
    background: gold;
    box-shadow: 0 0 10px gold, 0 0 20px rgba(255, 215, 0, 0.5);
}

.special-particle-platinum {
    background: #00DFFF;
    box-shadow: 0 0 15px #00DFFF, 0 0 30px rgba(0, 223, 255, 0.6);
}

.special-particle-diamond {
    background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45aaf2, #a55eea, #ff6b6b);
    background-size: 200% 200%;
    animation: specialExplode 1s ease-out forwards, diamondParticleShine 0.5s linear infinite;
    box-shadow: 0 0 15px #FF69B4, 0 0 30px rgba(255, 105, 180, 0.6);
}

@keyframes specialExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

@keyframes diamondParticleShine {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 200% 200%;
    }
}

/* ============================================
   FLOATING TEXT TIER STYLES
   ============================================ */

.floating-text-bronze {
    font-size: 2rem;
    color: #CD7F32;
    text-shadow: 0 0 10px #CD7F32, 0 0 20px rgba(205, 127, 50, 0.5);
}

.floating-text-silver {
    font-size: 2.2rem;
    color: #E8E8E8;
    text-shadow: 0 0 10px #C0C0C0, 0 0 20px rgba(192, 192, 192, 0.6);
}

.floating-text-gold {
    font-size: 2.5rem;
    color: gold;
    text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px rgba(255, 215, 0, 0.5);
}

.floating-text-platinum {
    font-size: 2.8rem;
    color: #00DFFF;
    text-shadow: 0 0 15px #00DFFF, 0 0 25px #00FFFF, 0 0 40px rgba(0, 223, 255, 0.7);
}

.floating-text-diamond {
    font-size: 3.2rem;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #a55eea, #ff6b6b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: diamondTextShine 1s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.8));
}

@keyframes diamondTextShine {
    to {
        background-position: 200% center;
    }
}

/* Legacy support - keep golden-soonie class working */
.golden-soonie {
    position: fixed;
    width: 150px;
    z-index: 10000;
    cursor: pointer;
    filter: sepia(1) saturate(5) brightness(1.2) drop-shadow(0 0 20px gold);
    transition: transform 0.1s;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, left, top;
}

.golden-soonie:active {
    transform: scale(0.95);
}

.golden-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    background: gold;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    box-shadow: 0 0 10px gold;
    animation: specialExplode 1s ease-out forwards;
}