/* MultiFoils Shimmer Effects CSS */

/* ==========================================
   1. BASE MULTI-FOILS RULES (NON-MASKED)
   ========================================== */

/* Clásico (Multi-color rainbow) */
.card-3d-container .card-3d.multi-foils .holo-layer,
.card-3d-container.multi-foils .card-3d .holo-layer,
.card-slot.multi-foils .holo-layer,
.wishlist-card-item.multi-foils .holo-layer,
.multi-foils-clasico .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.45) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 0, 0, 0.4) 0%,
            rgba(255, 255, 0, 0.4) 15%,
            rgba(0, 255, 0, 0.4) 30%,
            rgba(0, 255, 255, 0.4) 50%,
            rgba(0, 0, 255, 0.4) 70%,
            rgba(255, 0, 255, 0.4) 85%,
            rgba(255, 0, 0, 0.4) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
    transition: opacity 0.3s;
}

/* Rojo */
.multi-foils-rojo .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 200, 200, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 200, 200, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 0, 0, 0.85) 0%,
            rgba(180, 0, 0, 0.85) 50%,
            rgba(255, 0, 0, 0.85) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Dorado */
.multi-foils-dorado .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 235, 150, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 235, 150, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(212, 175, 55, 0.9) 0%,
            rgba(170, 130, 30, 0.9) 50%,
            rgba(212, 175, 55, 0.9) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Verde */
.multi-foils-verde .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(200, 255, 200, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(200, 255, 200, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(0, 255, 100, 0.85) 0%,
            rgba(0, 150, 40, 0.85) 50%,
            rgba(0, 255, 100, 0.85) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Azul */
.multi-foils-azul .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(200, 220, 255, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(200, 220, 255, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(0, 100, 255, 0.85) 0%,
            rgba(0, 40, 180, 0.85) 50%,
            rgba(0, 100, 255, 0.85) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Amarillo */
.multi-foils-amarillo .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 200, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 200, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 220, 0, 0.85) 0%,
            rgba(180, 150, 0, 0.85) 50%,
            rgba(255, 220, 0, 0.85) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Naranja */
.multi-foils-naranja .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 220, 180, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 220, 180, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 120, 0, 0.85) 0%,
            rgba(180, 60, 0, 0.85) 50%,
            rgba(255, 120, 0, 0.85) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Rosa */
.multi-foils-rosa .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 200, 230, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 200, 230, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 50, 150, 0.85) 0%,
            rgba(180, 20, 90, 0.85) 50%,
            rgba(255, 50, 150, 0.85) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Morado */
.multi-foils-morado .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 180, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 180, 255, 0.5) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(180, 0, 255, 0.95) 0%,
            rgba(110, 0, 180, 0.95) 50%,
            rgba(180, 0, 255, 0.95) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply !important;
    mix-blend-mode: screen !important;
    opacity: 1 !important;
}

/* Guinda */
.multi-foils-guinda .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 180, 180, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 180, 180, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(128, 0, 32, 0.9) 0%,
            rgba(70, 0, 15, 0.9) 50%,
            rgba(128, 0, 32, 0.9) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Gris */
.multi-foils-gris .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(220, 220, 220, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(220, 220, 220, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(100, 100, 100, 0.8) 0%,
            rgba(40, 40, 40, 0.8) 50%,
            rgba(100, 100, 100, 0.8) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply;
    mix-blend-mode: color-dodge;
    opacity: 0.95;
}

/* Negro */
.multi-foils-negro .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(0, 0, 0, 0.95) 0%,
            rgba(35, 35, 35, 0.9) 50%,
            rgba(0, 0, 0, 0.95) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: normal !important;
    mix-blend-mode: multiply !important;
    opacity: 0.95 !important;
}

/* Blanco */
.multi-foils-blanco .holo-layer {
    background-image:
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0.5) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0.95) 0%,
            rgba(235, 235, 235, 0.85) 50%,
            rgba(255, 255, 255, 0.95) 100%
        );
    background-size: 200% 200%, 400% 400%;
    background-blend-mode: multiply !important;
    mix-blend-mode: overlay !important;
    opacity: 1 !important;
}


/* ==========================================
   2. MASKED MULTI-FOILS RULES (PREPEND MASK)
   ========================================== */

/* Masked Clásico (Takes painted colors from the mask itself!) */
.card-3d-container .card-3d.masked.multi-foils .holo-layer,
.card-3d-container.multi-foils .card-3d.masked .holo-layer,
.card-slot.masked.multi-foils .holo-layer,
.wishlist-card-item.masked.multi-foils .holo-layer,
.masked.multi-foils-clasico .holo-layer,
.multi-foils-clasico.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.45) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 0, 0, 0.4) 0%,
            rgba(255, 255, 0, 0.4) 15%,
            rgba(0, 255, 0, 0.4) 30%,
            rgba(0, 255, 255, 0.4) 50%,
            rgba(0, 0, 255, 0.4) 70%,
            rgba(255, 0, 255, 0.4) 85%,
            rgba(255, 0, 0, 0.4) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Rojo */
.masked.multi-foils-rojo .holo-layer,
.multi-foils-rojo.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 200, 200, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 200, 200, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 0, 0, 0.85) 0%,
            rgba(180, 0, 0, 0.85) 50%,
            rgba(255, 0, 0, 0.85) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Dorado */
.masked.multi-foils-dorado .holo-layer,
.multi-foils-dorado.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 235, 150, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 235, 150, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(212, 175, 55, 0.9) 0%,
            rgba(170, 130, 30, 0.9) 50%,
            rgba(212, 175, 55, 0.9) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Verde */
.masked.multi-foils-verde .holo-layer,
.multi-foils-verde.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(200, 255, 200, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(200, 255, 200, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(0, 255, 100, 0.85) 0%,
            rgba(0, 150, 40, 0.85) 50%,
            rgba(0, 255, 100, 0.85) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Azul */
.masked.multi-foils-azul .holo-layer,
.multi-foils-azul.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(200, 220, 255, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(200, 220, 255, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(0, 100, 255, 0.85) 0%,
            rgba(0, 40, 180, 0.85) 50%,
            rgba(0, 100, 255, 0.85) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Amarillo */
.masked.multi-foils-amarillo .holo-layer,
.multi-foils-amarillo.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 200, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 200, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 220, 0, 0.85) 0%,
            rgba(180, 150, 0, 0.85) 50%,
            rgba(255, 220, 0, 0.85) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Naranja */
.masked.multi-foils-naranja .holo-layer,
.multi-foils-naranja.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 220, 180, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 220, 180, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 120, 0, 0.85) 0%,
            rgba(180, 60, 0, 0.85) 50%,
            rgba(255, 120, 0, 0.85) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Rosa */
.masked.multi-foils-rosa .holo-layer,
.multi-foils-rosa.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 200, 230, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 200, 230, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 50, 150, 0.85) 0%,
            rgba(180, 20, 90, 0.85) 50%,
            rgba(255, 50, 150, 0.85) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Morado */
.masked.multi-foils-morado .holo-layer,
.multi-foils-morado.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 180, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 180, 255, 0.5) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(180, 0, 255, 0.95) 0%,
            rgba(110, 0, 180, 0.95) 50%,
            rgba(180, 0, 255, 0.95) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
    background-blend-mode: multiply !important;
    mix-blend-mode: screen !important;
    opacity: 1 !important;
}

/* Masked Guinda */
.masked.multi-foils-guinda .holo-layer,
.multi-foils-guinda.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 180, 180, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 180, 180, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(128, 0, 32, 0.9) 0%,
            rgba(70, 0, 15, 0.9) 50%,
            rgba(128, 0, 32, 0.9) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Gris */
.masked.multi-foils-gris .holo-layer,
.multi-foils-gris.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(220, 220, 220, 0.4) 45%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(220, 220, 220, 0.4) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(100, 100, 100, 0.8) 0%,
            rgba(40, 40, 40, 0.8) 50%,
            rgba(100, 100, 100, 0.8) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
}

/* Masked Negro */
.masked.multi-foils-negro .holo-layer,
.multi-foils-negro.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(0, 0, 0, 0.95) 0%,
            rgba(35, 35, 35, 0.9) 50%,
            rgba(0, 0, 0, 0.95) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
    background-blend-mode: normal !important;
    mix-blend-mode: multiply !important;
    opacity: 0.95 !important;
}

/* Masked Blanco */
.masked.multi-foils-blanco .holo-layer,
.multi-foils-blanco.masked .holo-layer {
    background-image:
        var(--mask-url),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0.5) 55%,
            rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(
            var(--angle, 135deg),
            rgba(255, 255, 255, 0.95) 0%,
            rgba(235, 235, 235, 0.85) 50%,
            rgba(255, 255, 255, 0.95) 100%
        );
    background-size: 100% 100%, 200% 200%, 400% 400%;
    background-blend-mode: multiply !important;
    mix-blend-mode: overlay !important;
    opacity: 1 !important;
}


/* ==========================================
   3. CLIP MASKING SETUP
   ========================================== */

.card-3d-container .card-3d.masked.multi-foils .holo-layer,
.card-3d-container.multi-foils .card-3d.masked .holo-layer,
.card-slot.masked.multi-foils .holo-layer,
.wishlist-card-item.masked.multi-foils .holo-layer {
    -webkit-mask-image: var(--mask-url);
    mask-image: var(--mask-url);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* ==========================================
   4. FLOATING PALETTE STYLES
   ========================================== */

.multifoil-controls-lateral {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 999;
}

.btn-multifoil-trigger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    outline: none;
}

.btn-multifoil-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

.multifoil-palette-dropdown {
    display: none;
    flex-direction: column;
    gap: 8px;
    background: rgba(18, 18, 18, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 22px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.multifoil-palette-dropdown::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.multifoil-palette-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #333;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.multifoil-palette-color-btn:hover {
    transform: scale(1.25);
}

.multifoil-palette-color-btn.active {
    border-color: #00d2ff;
    transform: scale(1.15);
}


/* ==========================================
   5. GUIDE CONTROLS LATERAL STYLES
   ========================================== */

.guide-controls-lateral {
    position: absolute;
    left: 15px;
    top: 25%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 999;
}

#btn-guide-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

.guide-palette-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: 50px;
    background: rgba(18, 18, 18, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    z-index: 1000;
    width: 120px;
    flex-direction: column;
    gap: 6px;
}

.btn-guide-option {
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    color: #ccc;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-guide-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-guide-option.active {
    background: #00d2ff !important;
    color: #000 !important;
    font-weight: bold;
}