/* Gold Stars Theme - For Light Mode */

/* Gold color palette - Enhanced */
:root {
    --gold-primary: #FFD700;
    --gold-light: #FFE55C;
    --gold-dark: #B8860B;
    --gold-glow: rgba(255, 215, 0, 0.6);
    --gold-bright: #FFF8DC;
    --gold-shimmer: rgba(255, 236, 139, 0.8);
}

/* Gold theme class - add to body or html */
[data-gold-theme="true"] .star,
[data-gold-theme="true"][data-theme="light"] .star {
    background: radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold-light), var(--gold-primary)) !important;
    box-shadow: 
        0 0 4px var(--gold-glow),
        0 0 8px var(--gold-primary),
        inset 0 0 2px rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
}

[data-gold-theme="true"] .star.bright,
[data-gold-theme="true"][data-theme="light"] .star.bright {
    background: radial-gradient(circle at 30% 30%, #FFFFFF, var(--gold-bright), var(--gold-light)) !important;
    box-shadow: 
        0 0 10px var(--gold-primary),
        0 0 20px var(--gold-glow),
        0 0 40px var(--gold-light),
        inset 0 0 4px rgba(255, 255, 255, 0.9) !important;
}

/* Enhanced shooting star */
[data-gold-theme="true"] .shooting-star,
[data-gold-theme="true"][data-theme="light"] .shooting-star {
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--gold-dark) 20%,
        var(--gold-primary) 40%,
        var(--gold-light) 60%,
        var(--gold-bright) 80%,
        transparent 100%) !important;
    box-shadow: 
        0 0 10px var(--gold-glow),
        0 0 20px var(--gold-primary),
        0 0 40px var(--gold-light) !important;
    filter: blur(0.5px) !important;
}

/* Shooting star head glow */
[data-gold-theme="true"] .shooting-star::before,
[data-gold-theme="true"][data-theme="light"] .shooting-star::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, var(--gold-bright), var(--gold-light), transparent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--gold-bright), 0 0 30px var(--gold-light);
}

[data-gold-theme="true"] .particle,
[data-gold-theme="true"][data-theme="light"] .particle {
    background: radial-gradient(circle, var(--gold-light) 0%, var(--gold-shimmer) 50%, transparent 70%) !important;
    box-shadow: 0 0 10px var(--gold-glow) !important;
}

/* Override default star colors for ALL themes when gold is enabled */
[data-gold-theme="true"] {
    --star-cyan: var(--gold-primary);
    --star-yellow: var(--gold-light);
    --star-purple: var(--gold-dark);
}

[data-gold-theme="true"][data-theme="light"] {
    --star-cyan: var(--gold-primary);
    --star-yellow: var(--gold-light);
    --star-purple: var(--gold-dark);
}

/* Gold theme toggle button styles - Enhanced */
.gold-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-primary) 50%, var(--gold-light) 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 0 20px var(--gold-glow),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.gold-toggle-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-primary), var(--gold-dark));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gold-toggle-btn:hover {
    transform: scale(1.15) rotate(15deg);
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.4),
        0 0 30px var(--gold-glow),
        0 0 60px var(--gold-light),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.gold-toggle-btn:hover::before {
    opacity: 0.5;
}

.gold-toggle-btn i {
    color: #1a1a2e;
    font-size: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.gold-toggle-btn.active {
    background: linear-gradient(135deg, var(--gold-light) 0%, #FFF8DC 50%, var(--gold-light) 100%);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 30px var(--gold-primary),
        0 0 50px var(--gold-glow),
        inset 0 2px 4px rgba(255, 255, 255, 0.5);
    animation: goldPulse 2s ease-in-out infinite;
}

.gold-toggle-btn.active i {
    color: var(--gold-dark);
    filter: drop-shadow(0 0 8px var(--gold-primary));
}

@keyframes goldPulse {
    0%, 100% { 
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.3),
            0 0 30px var(--gold-primary),
            0 0 50px var(--gold-glow),
            inset 0 2px 4px rgba(255, 255, 255, 0.5);
    }
    50% { 
        box-shadow: 
            0 4px 25px rgba(0, 0, 0, 0.4),
            0 0 40px var(--gold-primary),
            0 0 70px var(--gold-glow),
            0 0 100px var(--gold-light),
            inset 0 2px 4px rgba(255, 255, 255, 0.5);
    }
}

/* Sparkle effect on hover */
.gold-toggle-btn::after {
    content: '✨';
    position: absolute;
    font-size: 14px;
    top: -5px;
    right: -5px;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 4px var(--gold-primary));
}

.gold-toggle-btn:hover::after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Animation enhancements for gold stars */
@keyframes goldTwinkle {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1);
        box-shadow: 0 0 4px var(--gold-glow), 0 0 8px var(--gold-primary);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
        box-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-light);
    }
}

[data-gold-theme="true"] .star {
    animation: goldTwinkle 4s ease-in-out infinite !important;
}

[data-gold-theme="true"] .star.bright {
    animation: goldTwinkle 2s ease-in-out infinite !important;
}