/* Animations for QuickyGame */

/* - - - EFFECTS SYSTEM OVERRIDES - - - */

/* Effect Variables */
:root {
    /* Default Effect (Neon) */
    --effect-border: 2px solid var(--primary-color);
    --effect-glow: 0 0 10px var(--primary-color), inset 0 0 10px var(--secondary-color);
    --effect-bg: transparent;
    --effect-text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--secondary-color);
}

/* Effect Classes */
.effect-neon {
    --effect-border: 2px solid var(--primary-color);
    --effect-glow: 0 0 10px var(--primary-color), inset 0 0 10px var(--secondary-color);
    --effect-bg: transparent;
    --effect-text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--secondary-color);
}

.effect-metal {
    --effect-border: 2px solid color-mix(in srgb, var(--secondary-color), #888 60%);
    --effect-glow: 0 0 8px color-mix(in srgb, var(--secondary-color), transparent 70%),
        0 0 3px rgba(255, 255, 255, 0.4),
        inset 0 0 15px rgba(0, 0, 0, 0.8),
        inset 0 0 30px color-mix(in srgb, var(--secondary-color), transparent 85%);
    --effect-bg: linear-gradient(135deg,
            color-mix(in srgb, var(--secondary-color), #333 80%) 0%,
            #111 30%,
            color-mix(in srgb, var(--secondary-color), #222 85%) 50%,
            #111 70%,
            color-mix(in srgb, var(--secondary-color), #444 75%) 100%);
    --effect-text-shadow: 1px 1px 0 #000, 0 0 8px color-mix(in srgb, var(--secondary-color), transparent 60%);
}


/* Updated Components - GLOBAL TARGETS */
.neon-btn,
.game-card,
.score-container,
.lives-container,
.tap-target,
.skin-card,
.neon-input,
#timer-fill {
    background: var(--effect-bg);
    border: var(--effect-border);
    box-shadow: var(--effect-glow);
}

h1,
h2,
.subtitle {
    text-shadow: var(--effect-text-shadow) !important;
}

/* --- FIRE EFFECT --- */
@keyframes fire-flicker {

    0%,
    100% {
        background-size: 85% 90%, 60% 70%, 60% 70%, 100% 100%;
        background-position: 50% 100%, 20% 100%, 80% 100%, 0% 0%;
    }

    20% {
        background-size: 80% 95%, 55% 65%, 65% 75%, 100% 100%;
        background-position: 52% 100%, 25% 100%, 75% 100%, 0% 0%;
    }

    40% {
        background-size: 90% 85%, 65% 75%, 55% 65%, 100% 100%;
        background-position: 48% 100%, 15% 100%, 85% 100%, 0% 0%;
    }

    60% {
        background-size: 85% 92%, 60% 70%, 58% 72%, 100% 100%;
        background-position: 51% 100%, 22% 100%, 78% 100%, 0% 0%;
    }

    80% {
        background-size: 82% 98%, 58% 68%, 62% 74%, 100% 100%;
        background-position: 49% 100%, 18% 100%, 82% 100%, 0% 0%;
    }
}

@keyframes fire-flicker-2 {

    0%,
    100% {
        background-size: 88% 88%, 62% 68%, 58% 72%, 100% 100%;
        background-position: 50% 100%, 22% 100%, 78% 100%, 0% 0%;
    }

    25% {
        background-size: 84% 94%, 58% 72%, 60% 68%, 100% 100%;
        background-position: 48% 100%, 20% 100%, 80% 100%, 0% 0%;
    }

    50% {
        background-size: 90% 85%, 64% 65%, 56% 75%, 100% 100%;
        background-position: 52% 100%, 24% 100%, 76% 100%, 0% 0%;
    }

    75% {
        background-size: 86% 92%, 60% 70%, 62% 70%, 100% 100%;
        background-position: 49% 100%, 21% 100%, 79% 100%, 0% 0%;
    }
}

@keyframes flame-glow-pulse {

    0%,
    100% {
        box-shadow:
            0 0 10px color-mix(in srgb, var(--secondary-color), transparent 30%),
            0 0 20px color-mix(in srgb, var(--secondary-color), transparent 50%),
            0 0 40px color-mix(in srgb, var(--primary-color), transparent 70%),
            inset 0 0 15px color-mix(in srgb, var(--secondary-color), transparent 60%);
    }

    50% {
        box-shadow:
            0 0 15px color-mix(in srgb, var(--secondary-color), transparent 20%),
            0 0 30px color-mix(in srgb, var(--secondary-color), transparent 40%),
            0 0 50px color-mix(in srgb, var(--primary-color), transparent 60%),
            inset 0 0 20px color-mix(in srgb, var(--secondary-color), transparent 50%);
    }
}

@keyframes flame-border-shift {

    0%,
    100% {
        border-color: var(--secondary-color);
    }

    50% {
        border-color: color-mix(in srgb, var(--primary-color), var(--secondary-color) 40%);
    }
}

.effect-fire .neon-btn,
.effect-fire .game-card,
.effect-fire .score-container,
.effect-fire .lives-container,
.effect-fire .tap-target,
.effect-fire .skin-card,
.effect-fire .neon-input,
.effect-fire #timer-fill {
    /* Effet Feu: Flammes vacillantes à l'intérieur */
    background-image:
        /* Flamme 1 - Centre (Principal) */
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--primary-color), transparent 20%) 0%, transparent 70%),
        /* Flamme 2 - Gauche (Secondaire) */
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--secondary-color), transparent 40%) 0%, transparent 70%),
        /* Flamme 3 - Droite (Secondaire) */
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--secondary-color), transparent 40%) 0%, transparent 70%),
        /* Fond global */
        linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.95) 40%,
            rgba(0, 0, 0, 1) 100%);

    background-repeat: no-repeat;

    /* Animation combinée */
    animation:
        fire-flicker 3s infinite ease-in-out,
        flame-glow-pulse 4s ease-in-out infinite,
        flame-border-shift 6s ease-in-out infinite;

    border: 2px solid var(--secondary-color);
}

/* Randomisation de l'effet Feu pour chaque bloc */
.effect-fire .game-card:nth-child(2n),
.effect-fire .neon-btn:nth-child(2n) {
    animation-name: fire-flicker-2, flame-glow-pulse, flame-border-shift !important;
    animation-delay: -1.2s, -2.5s, -3.5s;
    animation-duration: 3.8s, 4.5s, 6.5s;
}

.effect-fire .game-card:nth-child(3n),
.effect-fire .neon-btn:nth-child(3n) {
    animation-name: fire-flicker, flame-glow-pulse, flame-border-shift !important;
    animation-delay: -0.8s, -1.2s, -0.5s;
    animation-duration: 3.1s, 3.9s, 5.7s;
}

.effect-fire .game-card:nth-child(5n),
.effect-fire .neon-btn:nth-child(5n) {
    animation-name: fire-flicker-2, flame-glow-pulse, flame-border-shift !important;
    animation-delay: -2.5s, -3.8s, -1.5s;
    animation-duration: 3.6s, 4.3s, 6.8s;
}

.effect-fire .game-card:nth-child(7n),
.effect-fire .neon-btn:nth-child(7n) {
    animation-name: fire-flicker, flame-glow-pulse, flame-border-shift !important;
    animation-delay: -1.9s, -0.2s, -4.5s;
    animation-duration: 3.3s, 4.0s, 6.0s;
}

/* --- WATER EFFECT --- */
@keyframes bubbles-rise {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.effect-water .neon-btn,
.effect-water .game-card,
.effect-water .score-container,
.effect-water .lives-container,
.effect-water .tap-target,
.effect-water .skin-card,
.effect-water .neon-input,
.effect-water #timer-fill {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.2) 2px, transparent 2.5px),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 3px, transparent 3.5px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 2px, transparent 2.5px),
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 90%) 0%, color-mix(in srgb, var(--secondary-color), transparent 80%) 100%) !important;
    background-size: 100% 200% !important;
    background-repeat: repeat !important;
    animation: bubbles-rise 4s linear infinite !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px var(--primary-color), inset 0 0 15px var(--secondary-color) !important;
}

/* Randomization for Water Effect */
.effect-water .game-card:nth-child(odd),
.effect-water .neon-btn:nth-child(odd) {
    animation-duration: 5s !important;
    animation-delay: 0.5s;
    background-size: 110% 210% !important;
}

.effect-water .game-card:nth-child(even),
.effect-water .neon-btn:nth-child(even) {
    animation-duration: 6s !important;
    animation-delay: 1.2s;
    background-size: 90% 190% !important;
}

.effect-water .game-card:nth-child(3n),
.effect-water .neon-btn:nth-child(3n) {
    animation-duration: 4.5s !important;
    animation-delay: -2s;
    background-size: 120% 220% !important;
}

.effect-water .game-card:nth-child(4n),
.effect-water .neon-btn:nth-child(4n) {
    animation-duration: 7s !important;
    animation-delay: -1s;
    background-size: 80% 180% !important;
}

.effect-water .game-card:nth-child(5n),
.effect-water .neon-btn:nth-child(5n) {
    animation-duration: 5.5s !important;
    animation-delay: 0s;
    background-size: 100% 200% !important;
}

/* --- CYBERPUNK EFFECT --- */
@keyframes cyberpunk-glitch {
    0% {
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }

    5% {
        clip-path: inset(10% 0 85% 0);
        transform: translate(-2px, 2px);
    }

    10% {
        clip-path: inset(85% 0 5% 0);
        transform: translate(2px, -2px);
    }

    15% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(-1px, -1px);
    }

    20% {
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
}

.effect-cyberpunk .neon-btn,
.effect-cyberpunk .game-card,
.effect-cyberpunk .score-container,
.effect-cyberpunk .lives-container,
.effect-cyberpunk .tap-target,
.effect-cyberpunk .skin-card,
.effect-cyberpunk .neon-input,
.effect-cyberpunk #timer-fill {
    border: 2px solid var(--secondary-color) !important;
    box-shadow: 2px 2px var(--primary-color), -2px -2px var(--secondary-color) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    position: relative;
    animation: cyberpunk-glitch 4s infinite linear alternate-reverse !important;
}

.effect-cyberpunk .neon-btn:hover {
    box-shadow: 4px 4px var(--primary-color), -4px -4px var(--secondary-color) !important;
}

/* --- GALAXY EFFECT --- */
@keyframes galaxy-spin {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.effect-galaxy .neon-btn,
.effect-galaxy .game-card,
.effect-galaxy .score-container,
.effect-galaxy .lives-container,
.effect-galaxy .tap-target,
.effect-galaxy .skin-card,
.effect-galaxy .neon-input,
.effect-galaxy #timer-fill {
    background-image:
        radial-gradient(1px 1px at 10% 10%, white, transparent),
        radial-gradient(1px 1px at 20% 20%, white, transparent),
        radial-gradient(2px 2px at 30% 30%, white, transparent),
        radial-gradient(1px 1px at 40% 40%, white, transparent),
        radial-gradient(2px 2px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 60% 60%, white, transparent),
        radial-gradient(2px 2px at 70% 70%, white, transparent),
        radial-gradient(1px 1px at 80% 80%, white, transparent),
        radial-gradient(1px 1px at 90% 90%, white, transparent),
        linear-gradient(135deg, color-mix(in srgb, var(--primary-color), #000 85%) 0%, color-mix(in srgb, var(--secondary-color), #000 70%) 50%, #000000 100%);
    background-size: 200% 200%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px color-mix(in srgb, var(--secondary-color), #000 50%), inset 0 0 20px color-mix(in srgb, var(--primary-color), #000 50%);
    animation: galaxy-spin 20s linear infinite;
    color: white;
}

/* Galaxy Randomization */
.effect-galaxy .game-card:nth-child(2n),
.effect-galaxy .neon-btn:nth-child(2n) {
    background-image:
        radial-gradient(1px 1px at 15% 85%, white, transparent),
        radial-gradient(2px 2px at 25% 15%, white, transparent),
        radial-gradient(1px 1px at 35% 65%, white, transparent),
        radial-gradient(2px 2px at 45% 45%, white, transparent),
        radial-gradient(1px 1px at 55% 25%, white, transparent),
        radial-gradient(2px 2px at 65% 55%, white, transparent),
        radial-gradient(1px 1px at 85% 35%, white, transparent),
        radial-gradient(1px 1px at 95% 75%, white, transparent),
        linear-gradient(135deg, color-mix(in srgb, var(--primary-color), #000 85%) 0%, color-mix(in srgb, var(--secondary-color), #000 70%) 50%, #000000 100%);
    animation-duration: 25s;
}

.effect-galaxy .game-card:nth-child(3n),
.effect-galaxy .neon-btn:nth-child(3n) {
    background-image:
        radial-gradient(2px 2px at 5% 50%, white, transparent),
        radial-gradient(1px 1px at 15% 90%, white, transparent),
        radial-gradient(1px 1px at 33% 33%, white, transparent),
        radial-gradient(2px 2px at 58% 12%, white, transparent),
        radial-gradient(1px 1px at 70% 80%, white, transparent),
        radial-gradient(2px 2px at 88% 44%, white, transparent),
        radial-gradient(1px 1px at 92% 10%, white, transparent),
        linear-gradient(135deg, color-mix(in srgb, var(--primary-color), #000 85%) 0%, color-mix(in srgb, var(--secondary-color), #000 70%) 50%, #000000 100%);
    animation-duration: 22s;
    animation-direction: reverse;
}

.effect-galaxy .game-card:nth-child(5n),
.effect-galaxy .neon-btn:nth-child(5n) {
    background-image:
        radial-gradient(1px 1px at 8% 8%, white, transparent),
        radial-gradient(2px 2px at 90% 90%, white, transparent),
        radial-gradient(1px 1px at 20% 80%, white, transparent),
        radial-gradient(1px 1px at 80% 20%, white, transparent),
        radial-gradient(2px 2px at 50% 10%, white, transparent),
        radial-gradient(1px 1px at 10% 50%, white, transparent),
        linear-gradient(135deg, color-mix(in srgb, var(--primary-color), #000 85%) 0%, color-mix(in srgb, var(--secondary-color), #000 70%) 50%, #000000 100%);
    animation-duration: 28s;
}

/* --- MATRIX EFFECT --- */
@keyframes matrix-rain {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}

.effect-matrix .neon-btn,
.effect-matrix .game-card,
.effect-matrix .score-container,
.effect-matrix .lives-container,
.effect-matrix .tap-target,
.effect-matrix .skin-card,
.effect-matrix .neon-input,
.effect-matrix #timer-fill {
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 0 5px var(--secondary-color) !important;
    background-color: black !important;
    background-image: linear-gradient(0deg, transparent 24%, color-mix(in srgb, var(--primary-color), transparent 70%) 25%, color-mix(in srgb, var(--secondary-color), transparent 70%) 26%, transparent 27%, transparent 74%, color-mix(in srgb, var(--primary-color), transparent 70%) 75%, color-mix(in srgb, var(--secondary-color), transparent 70%) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, color-mix(in srgb, var(--primary-color), transparent 70%) 25%, color-mix(in srgb, var(--secondary-color), transparent 70%) 26%, transparent 27%, transparent 74%, color-mix(in srgb, var(--primary-color), transparent 70%) 75%, color-mix(in srgb, var(--secondary-color), transparent 70%) 76%, transparent 77%, transparent) !important;
    background-size: 30px 30px !important;
    animation: matrix-rain 2s linear infinite !important;
    color: var(--primary-color) !important;
    text-shadow: 0 0 5px var(--secondary-color) !important;
    font-family: 'Courier New', monospace !important;
}

/* --- ICE EFFECT --- */
@keyframes ice-shimmer {
    0% {
        background-position: -200% -200%;
    }

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

.effect-ice .neon-btn,
.effect-ice .game-card,
.effect-ice .score-container,
.effect-ice .lives-container,
.effect-ice .tap-target,
.effect-ice .skin-card,
.effect-ice .neon-input,
.effect-ice #timer-fill {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color), transparent 80%) 0%, rgba(255, 255, 255, 0.4) 50%, color-mix(in srgb, var(--secondary-color), transparent 80%) 100%) !important;
    border: 2px solid color-mix(in srgb, var(--primary-color), white 50%) !important;
    box-shadow: 0 0 10px var(--primary-color), inset 0 0 10px var(--secondary-color) !important;
    backdrop-filter: blur(5px);
    color: white !important;
    text-shadow: 0 0 5px var(--primary-color) !important;
}

/* --- ELECTRIC EFFECT --- */
@keyframes electric-pulse {
    0% {
        box-shadow: 0 0 5px var(--primary-color), inset 0 0 5px var(--primary-color);
        border-color: var(--primary-color);
    }

    50% {
        box-shadow: 0 0 20px var(--secondary-color), inset 0 0 20px var(--secondary-color);
        border-color: var(--secondary-color);
    }

    100% {
        box-shadow: 0 0 5px var(--primary-color), inset 0 0 5px var(--primary-color);
        border-color: var(--primary-color);
    }
}

.effect-electric .neon-btn,
.effect-electric .game-card,
.effect-electric .score-container,
.effect-electric .lives-container,
.effect-electric .tap-target,
.effect-electric .skin-card,
.effect-electric .neon-input,
.effect-electric #timer-fill {
    background: transparent !important;
    border: 2px dashed var(--primary-color) !important;
    animation: electric-pulse 0.2s infinite alternate !important;
    color: var(--primary-color) !important;
}

/* --- RAINBOW EFFECT --- */
@keyframes rainbow-border {
    0% {
        border-color: var(--primary-color);
        box-shadow: 0 0 10px var(--primary-color);
        color: var(--primary-color);
    }

    33% {
        border-color: var(--secondary-color);
        box-shadow: 0 0 10px var(--secondary-color);
        color: var(--secondary-color);
    }

    66% {
        border-color: var(--accent-color);
        box-shadow: 0 0 10px var(--accent-color);
        color: var(--accent-color);
    }

    100% {
        border-color: var(--primary-color);
        box-shadow: 0 0 10px var(--primary-color);
        color: var(--primary-color);
    }
}

.effect-rainbow .neon-btn,
.effect-rainbow .game-card,
.effect-rainbow .score-container,
.effect-rainbow .lives-container,
.effect-rainbow .tap-target,
.effect-rainbow .skin-card,
.effect-rainbow .neon-input,
.effect-rainbow #timer-fill {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 3px solid var(--primary-color) !important;
    animation: rainbow-border 4s linear infinite !important;
    text-shadow: 0 0 5px currentColor !important;
}

/* --- HOLOGRAM EFFECT --- */
@keyframes hologram-scan {
    0% {
        background-position: 0% 0%;
        opacity: 0.9;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        background-position: 0% 100%;
        opacity: 0.9;
    }
}

.effect-hologram .neon-btn,
.effect-hologram .game-card,
.effect-hologram .score-container,
.effect-hologram .lives-container,
.effect-hologram .tap-target,
.effect-hologram .skin-card,
.effect-hologram .neon-input,
.effect-hologram #timer-fill {
    background: repeating-linear-gradient(0deg,
            color-mix(in srgb, var(--primary-color), transparent 90%),
            color-mix(in srgb, var(--primary-color), transparent 90%) 1px,
            transparent 1px,
            transparent 2px) !important;
    border: 1px solid color-mix(in srgb, var(--secondary-color), transparent 40%) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--secondary-color), transparent 70%), inset 0 0 5px color-mix(in srgb, var(--primary-color), transparent 80%) !important;
    color: var(--primary-color) !important;
    text-shadow: 0 0 2px var(--secondary-color) !important;
    animation: hologram-scan 4s linear infinite !important;
    background-size: 100% 10px !important;
}

/* --- GOLD EFFECT --- */
@keyframes gold-shine {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.effect-gold .neon-btn,
.effect-gold .game-card,
.effect-gold .score-container,
.effect-gold .lives-container,
.effect-gold .tap-target,
.effect-gold .skin-card,
.effect-gold .neon-input,
.effect-gold #timer-fill {
    background: linear-gradient(120deg,
            color-mix(in srgb, var(--secondary-color), black 30%) 0%,
            var(--secondary-color) 40%,
            #ffffff 50%,
            var(--secondary-color) 60%,
            color-mix(in srgb, var(--secondary-color), black 30%) 100%) !important;
    background-size: 200% 100% !important;
    border: 2px solid var(--secondary-color) !important;
    box-shadow: 0 0 10px var(--secondary-color) !important;
    color: color-mix(in srgb, var(--secondary-color), black 80%) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    animation: gold-shine 3s linear infinite !important;
    font-weight: bold;
}

/* --- TOXIC EFFECT --- */
@keyframes toxic-ooze {
    0% {
        box-shadow: 0 0 10px var(--primary-color);
    }

    50% {
        box-shadow: 0 0 25px var(--secondary-color), inset 0 0 15px var(--secondary-color);
    }

    100% {
        box-shadow: 0 0 10px var(--primary-color);
    }
}

.effect-toxic .neon-btn,
.effect-toxic .game-card,
.effect-toxic .score-container,
.effect-toxic .lives-container,
.effect-toxic .tap-target,
.effect-toxic .skin-card,
.effect-toxic .neon-input,
.effect-toxic #timer-fill {
    background: radial-gradient(circle at 50% 50%, var(--primary-color) 10%, color-mix(in srgb, var(--secondary-color), black 80%) 90%) !important;
    border: 3px solid var(--secondary-color) !important;
    color: black !important;
    font-weight: bold;
    animation: toxic-ooze 1.5s infinite ease-in-out !important;
    text-shadow: 0 0 2px var(--primary-color) !important;
}

/* --- ARCADE EFFECT --- */
@keyframes arcade-blink {
    0% {
        opacity: 1;
        text-shadow: 4px 4px 0px var(--secondary-color);
    }

    50% {
        opacity: 0.8;
        text-shadow: 2px 2px 0px var(--secondary-color);
    }

    100% {
        opacity: 1;
        text-shadow: 4px 4px 0px var(--secondary-color);
    }
}

.effect-arcade .neon-btn,
.effect-arcade .game-card,
.effect-arcade .score-container,
.effect-arcade .lives-container,
.effect-arcade .tap-target,
.effect-arcade .skin-card,
.effect-arcade .neon-input,
.effect-arcade #timer-fill {
    background: color-mix(in srgb, var(--primary-color), black 90%) !important;
    border: 4px solid var(--primary-color) !important;
    box-shadow: 5px 5px 0px 0px var(--secondary-color) !important;
    color: var(--primary-color) !important;
    font-family: 'Courier New', monospace !important;
    text-transform: uppercase;
    animation: arcade-blink 0.5s steps(2) infinite !important;
    border-radius: 0 !important;
    /* Force square corners for 8-bit look */
}

/* --- CRYSTAL EFFECT --- */
.effect-crystal .neon-btn,
.effect-crystal .game-card,
.effect-crystal .score-container,
.effect-crystal .lives-container,
.effect-crystal .tap-target,
.effect-crystal .skin-card,
.effect-crystal .neon-input,
.effect-crystal #timer-fill {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.1) 100%),
        conic-gradient(from 45deg at 50% 50%,
            color-mix(in srgb, var(--primary-color), transparent 80%),
            color-mix(in srgb, var(--secondary-color), transparent 80%),
            color-mix(in srgb, var(--primary-color), transparent 80%)) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 15px color-mix(in srgb, var(--primary-color), transparent 50%) !important;
    backdrop-filter: blur(3px);
    clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%) !important;
    text-shadow: 0 0 5px white !important;
}

/* --- CIRCUIT EFFECT --- */
@keyframes circuit-flow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 50px 50px;
    }
}

.effect-circuit .neon-btn,
.effect-circuit .game-card,
.effect-circuit .score-container,
.effect-circuit .lives-container,
.effect-circuit .tap-target,
.effect-circuit .skin-card,
.effect-circuit .neon-input,
.effect-circuit #timer-fill {
    background-color: #050505 !important;
    background-image:
        radial-gradient(var(--primary-color) 15%, transparent 16%),
        radial-gradient(var(--secondary-color) 15%, transparent 16%),
        linear-gradient(0deg, transparent 48%, var(--primary-color) 49%, var(--primary-color) 51%, transparent 52%),
        linear-gradient(90deg, transparent 48%, var(--secondary-color) 49%, var(--secondary-color) 51%, transparent 52%) !important;
    background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px !important;
    background-position: 0 0, 10px 10px, 0 0, 0 0 !important;
    border: 2px solid var(--primary-color) !important;
    box-shadow: inset 0 0 10px var(--primary-color) !important;
    animation: circuit-flow 10s linear infinite !important;
    font-family: 'Courier New', monospace !important;
}

/* --- HAZARD EFFECT --- */
@keyframes hazard-slide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 0;
    }
}

.effect-hazard .neon-btn,
.effect-hazard .game-card,
.effect-hazard .score-container,
.effect-hazard .lives-container,
.effect-hazard .tap-target,
.effect-hazard .skin-card,
.effect-hazard .neon-input,
.effect-hazard #timer-fill {
    background: repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--primary-color), black 40%),
            color-mix(in srgb, var(--primary-color), black 40%) 10px,
            color-mix(in srgb, var(--secondary-color), black 80%) 10px,
            color-mix(in srgb, var(--secondary-color), black 80%) 20px) !important;
    border: 3px solid var(--primary-color) !important;
    box-shadow: 0 5px 0 var(--secondary-color) !important;
    animation: hazard-slide 2s linear infinite !important;
    text-shadow: 2px 2px 0 black !important;
    font-weight: 900 !important;
}

/* --- PHANTOM EFFECT --- */
@keyframes phantom-pulse {
    0% {
        opacity: 0.8;
        transform: scale(1);
        filter: blur(0px);
        box-shadow: 0 0 5px var(--primary-color);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.98);
        filter: blur(1px);
        box-shadow: 0 0 20px var(--primary-color);
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
        filter: blur(0px);
        box-shadow: 0 0 5px var(--primary-color);
    }
}

.effect-phantom .neon-btn,
.effect-phantom .game-card,
.effect-phantom .score-container,
.effect-phantom .lives-container,
.effect-phantom .tap-target,
.effect-phantom .skin-card,
.effect-phantom .neon-input,
.effect-phantom #timer-fill {
    background: transparent !important;
    border: 2px double var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    box-shadow: 0 0 10px var(--primary-color) !important;
    animation: phantom-pulse 3s infinite ease-in-out !important;
}

/* --- SOAP EFFECT --- */
@keyframes soap-swirl {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.effect-soap .neon-btn,
.effect-soap .game-card,
.effect-soap .score-container,
.effect-soap .lives-container,
.effect-soap .tap-target,
.effect-soap .skin-card,
.effect-soap .neon-input,
.effect-soap #timer-fill {
    background: linear-gradient(45deg,
            color-mix(in srgb, var(--primary-color), transparent 80%),
            color-mix(in srgb, var(--secondary-color), transparent 80%),
            color-mix(in srgb, var(--accent-color), transparent 80%)) !important;
    background-size: 200% 200% !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.2) !important;
    animation: soap-swirl 5s ease infinite !important;
}

/* --- SKETCH EFFECT --- */
@keyframes sketch-wiggle {
    0% {
        border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
        transform: rotate(0deg);
    }

    25% {
        border-radius: 20px 225px 15px 225px / 225px 15px 225px 15px;
        transform: rotate(-0.5deg);
    }

    50% {
        border-radius: 225px 15px 225px 20px / 15px 225px 15px 255px;
        transform: rotate(0.5deg);
    }

    75% {
        border-radius: 15px 225px 20px 225px / 225px 20px 225px 15px;
        transform: rotate(0deg);
    }

    100% {
        border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
        transform: rotate(0deg);
    }
}

.effect-sketch .neon-btn,
.effect-sketch .game-card,
.effect-sketch .score-container,
.effect-sketch .lives-container,
.effect-sketch .tap-target,
.effect-sketch .skin-card,
.effect-sketch .neon-input,
.effect-sketch #timer-fill {
    background: transparent !important;
    border: 3px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: 3px 3px 0 var(--secondary-color) !important;
    animation: sketch-wiggle 4s ease-in-out infinite !important;
    text-shadow: none !important;
}

/* --- GRID EFFECT --- */
@keyframes grid-move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 40px;
    }
}

.effect-grid .neon-btn,
.effect-grid .game-card,
.effect-grid .score-container,
.effect-grid .lives-container,
.effect-grid .tap-target,
.effect-grid .skin-card,
.effect-grid .neon-input,
.effect-grid #timer-fill {
    background-image:
        linear-gradient(var(--primary-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--secondary-color) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 0 10px var(--secondary-color), inset 0 0 20px black !important;
    animation: grid-move 2s linear infinite !important;
    background-color: #000 !important;
}

/* --- MAGMA EFFECT --- */
@keyframes magma-pulse {
    0% {
        box-shadow: inset 0 0 10px var(--primary-color);
        border-color: var(--secondary-color);
    }

    50% {
        box-shadow: inset 0 0 30px var(--primary-color);
        border-color: var(--primary-color);
    }

    100% {
        box-shadow: inset 0 0 10px var(--primary-color);
        border-color: var(--secondary-color);
    }
}

.effect-magma .neon-btn,
.effect-magma .game-card,
.effect-magma .score-container,
.effect-magma .lives-container,
.effect-magma .tap-target,
.effect-magma .skin-card,
.effect-magma .neon-input,
.effect-magma #timer-fill {
    background: black !important;
    border: 3px solid var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--secondary-color) !important;
    /* Cracks illusion using localized gradients */
    background-image:
        radial-gradient(circle at 30% 30%, transparent 10%, var(--primary-color) 11%, transparent 12%),
        radial-gradient(circle at 70% 60%, transparent 10%, var(--primary-color) 11%, transparent 12%),
        linear-gradient(45deg, transparent 48%, var(--primary-color) 49%, var(--primary-color) 51%, transparent 52%) !important;
    background-size: 100% 100%, 100% 100%, 20px 20px !important;
    animation: magma-pulse 3s infinite alternate !important;
}

/* --- SCANNER EFFECT --- */
@keyframes scanner-sweep {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 300% 0;
    }
}

.effect-scanner .neon-btn,
.effect-scanner .game-card,
.effect-scanner .score-container,
.effect-scanner .lives-container,
.effect-scanner .tap-target,
.effect-scanner .skin-card,
.effect-scanner .neon-input,
.effect-scanner #timer-fill {
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--primary-color), transparent 50%) 45%,
            var(--secondary-color) 50%,
            color-mix(in srgb, var(--primary-color), transparent 50%) 55%,
            transparent 100%) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--secondary-color) !important;
    box-shadow: 0 0 5px var(--primary-color), inset 0 0 5px var(--secondary-color) !important;
    animation: scanner-sweep 3s ease-in-out infinite !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* --- STATIC EFFECT --- */
@keyframes static-noise {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100px 100px;
    }
}

.effect-static .neon-btn,
.effect-static .game-card,
.effect-static .score-container,
.effect-static .lives-container,
.effect-static .tap-target,
.effect-static .skin-card,
.effect-static .neon-input,
.effect-static #timer-fill {
    background-image: repeating-radial-gradient(circle,
            var(--primary-color),
            var(--primary-color) 2px,
            transparent 3px,
            transparent 5px) !important;
    background-size: 10px 10px !important;
    border: 2px solid var(--secondary-color) !important;
    animation: static-noise 0.5s linear infinite !important;
    opacity: 0.9 !important;
}