/* Menu Color Classes */
.menu-item-green {
    color: #00ff00 !important;
    font-weight: bold;
}

.menu-item-red {
    color: #ff3333 !important;
    font-weight: bold;
}

.menu-item-purple {
    color: #d670ff !important;
    font-weight: bold;
}

.menu-item-light-purple {
    color: #e6a8ff !important;
    font-weight: bold;
}

.menu-item-gold {
    color: #ffd700 !important;
    font-weight: bold;
}

/* Red Glow Effect */
@keyframes glowRed {
    from { text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; }
    to { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }
}

.menu-item-glow-red {
    color: #ff0000 !important;
    animation: glowRed 1.5s infinite alternate;
    font-weight: bold;
}

/* RGB Glow Effect (using existing piscarBrilho animation if available, or redefining) */
@keyframes piscarBrilho {
    0% { text-shadow: 0 0 6px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000; }
    20% { text-shadow: 0 0 6px #ff9900, 0 0 10px #ff9900, 0 0 20px #ff9900; }
    40% { text-shadow: 0 0 6px #ffff00, 0 0 10px #ffff00, 0 0 20px #ffff00; }
    60% { text-shadow: 0 0 6px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00; }
    80% { text-shadow: 0 0 6px #0000ff, 0 0 10px #0000ff, 0 0 20px #0000ff; }
    100% { text-shadow: 0 0 6px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
}

.menu-item-glow-rgb {
    color: #f6f609 !important; /* Yellow base color like DemoWiki */
    animation: piscarBrilho 7.0s infinite alternate;
    font-weight: bold;
}

/* Helper for Overlay centering */
.menu-overlay-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.menu-overlay-bg {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    /* Center it */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7; /* Optional: adjust opacity if needed */
}

.menu-text-content {
    position: relative;
    z-index: 2;
}

/* Responsividade do Menu Lateral */
@media (max-width: 768px) {
    #MenuColumn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px;
    }
    #Menu {
        width: 100% !important;
    }
    .menuitem {
        margin-bottom: 8px;
    }
    .MenuButton, .Button {
        background-size: cover !important;
    }
}