/* ============================================================
   STEAMPUNK MODE - Estilos para el modo Steampunk
   Tonos oscuros: #5c0000, #6e5a28, grises
   ============================================================ */

/* ============================================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ============================================================ */

body.steampunk-mode {
    --steam-primary: #5c0000;
    --steam-secondary: #6e5a28;
    --steam-gold: #6e5a28;
    --steam-bronze: #5a4a20;
    --steam-copper: #4d3d1a;
    --steam-iron: #4a4a4a;
    --steam-steel: #6e6e6e;
    --steam-dark: #1a0a0a;
    --steam-bg: #0d0505;
    --steam-text: #8a7a4a;
    --steam-text-secondary: #6e5a28;
    --steam-border: #5c0000;
    --steam-border-gold: #6e5a28;
    --steam-shadow: rgba(92, 0, 0, 0.4);
    --steam-shadow-gold: rgba(110, 90, 40, 0.3);
    --steam-shadow-strong: rgba(92, 0, 0, 0.6);
    --steam-shadow-gold-strong: rgba(110, 90, 40, 0.5);
    --steam-neon: rgba(92, 0, 0, 0.2);
    --steam-neon-gold: rgba(110, 90, 40, 0.15);
}

/* ============================================================
   2. FONDO Y OVERLAY
   ============================================================ */

body.steampunk-mode {
    background-color: var(--steam-bg) !important;
}

body.steampunk-mode::before {
    filter: grayscale(100%) brightness(0.5) contrast(1.3) 
            sepia(0.6) !important;
}

body.steampunk-mode::after {
    background-color: rgba(13, 5, 5, 0.90) !important;
}

body.steampunk-mode .header {
    background: rgba(92, 0, 0, 0.35) !important;
    border-bottom: 3px solid var(--steam-border-gold) !important;
    box-shadow: 0 4px 25px var(--steam-shadow) !important;
}

/* ============================================================
   3. COLORES GENERALES
   ============================================================ */

body.steampunk-mode * {
    filter: var(--steam-filter, none);
}

/* Textos principales - Dorado oscuro */
body.steampunk-mode h1,
body.steampunk-mode h2,
body.steampunk-mode h3,
body.steampunk-mode h4,
body.steampunk-mode .banda-info h2,
body.steampunk-mode .tab-btn::before,
body.steampunk-mode .release-title,
body.steampunk-mode .video-title,
body.steampunk-mode .juego-nombre,
body.steampunk-mode .footer {
    color: var(--steam-text) !important;
}

/* Textos secundarios - Bronce oscuro */
body.steampunk-mode p,
body.steampunk-mode span,
body.steampunk-mode li,
body.steampunk-mode strong,
body.steampunk-mode .track-icon .mic-btn i,
body.steampunk-mode .track-name,
body.steampunk-mode .release-year,
body.steampunk-mode .subtitulo,
body.steampunk-mode .juego-texto {
    color: var(--steam-secondary) !important;
}

/* H2 con borde dorado oscuro y sombra */
body.steampunk-mode h2 {
    border-bottom: 2px solid var(--steam-border-gold) !important;
    text-shadow: 0 0 30px var(--steam-shadow-gold) !important;
}

/* Enlaces - Dorado oscuro con hover a bronce */
body.steampunk-mode a {
    color: var(--steam-text) !important;
    text-shadow: 0 0 10px var(--steam-shadow-gold) !important;
}

body.steampunk-mode a:hover {
    color: var(--steam-bronze) !important;
    text-shadow: 0 0 30px var(--steam-shadow-gold-strong) !important;
}

/* ============================================================
   4. BORDES Y SOMBRAS - ESTILO STEAMPUNK
   ============================================================ */

/* Bordes principales - Rojo oscuro con sombra dorada oscura */
body.steampunk-mode .slider-container,
body.steampunk-mode .banda-imagen,
body.steampunk-mode .banda-info,
body.steampunk-mode .banda-content,
body.steampunk-mode .release-container,
body.steampunk-mode .lyrics-popup,
body.steampunk-mode .lyrics-popup-close,
body.steampunk-mode .lightbox-close,
body.steampunk-mode .lightbox-nav,
body.steampunk-mode .juego-container,
body.steampunk-mode .track-list,
body.steampunk-mode .info-hero,
body.steampunk-mode .info-gallery-item,
body.steampunk-mode .platform-menu {
    border-color: var(--steam-border) !important;
    box-shadow: 0 0 30px var(--steam-shadow) !important;
}

/* Slider con borde dorado oscuro */
body.steampunk-mode .slider-container {
    border: 2px solid var(--steam-border-gold) !important;
    box-shadow: 0 0 30px var(--steam-shadow-gold) !important;
}

/* Hover - Cambio a Dorado oscuro con sombra más fuerte */
body.steampunk-mode .video-thumbnail:hover,
body.steampunk-mode .release-container:hover,
body.steampunk-mode .release-cover:hover,
body.steampunk-mode .extras-section .carrusel-item:hover,
body.steampunk-mode .juego-imagen:hover,
body.steampunk-mode .juego-container:hover {
    border-color: var(--steam-border-gold) !important;
    box-shadow: 0 0 40px var(--steam-shadow-gold-strong) !important;
}

body.steampunk-mode .footer {
    border-top: 3px solid var(--steam-border-gold) !important;
}

/* ============================================================
   5. BOTONES Y CONTROLES - ESTILO STEAMPUNK
   ============================================================ */

/* Botones de reproducción (play) */
body.steampunk-mode .play-button,
body.steampunk-mode .play-button:hover,
body.steampunk-mode .juego-play-button,
body.steampunk-mode .juego-play-button:hover {
    background: rgba(13, 5, 5, 0.92) !important;
    border: 3px solid var(--steam-border-gold);
}

body.steampunk-mode .play-button,
body.steampunk-mode .juego-play-button {
    box-shadow: 0 0 40px var(--steam-shadow) !important;
}

body.steampunk-mode .play-button:hover,
body.steampunk-mode .juego-play-button:hover {
    box-shadow: 0 0 50px var(--steam-shadow-gold-strong) !important;
    border-color: var(--steam-border-gold) !important;
}

body.steampunk-mode .play-button i,
body.steampunk-mode .play-button i:hover,
body.steampunk-mode .juego-play-button i,
body.steampunk-mode .juego-play-button i:hover {
    color: var(--steam-text) !important;
}

/* Pestañas */
body.steampunk-mode .tab-btn {
    color: #3a1a1a !important;
}

body.steampunk-mode .tab-btn.active {
    color: var(--steam-text) !important;
    background: var(--steam-neon) !important;
    border-bottom: 2px solid var(--steam-border-gold) !important;
}

body.steampunk-mode .tab-btn.active::after {
    background: var(--steam-border-gold) !important;
    box-shadow: 0 0 20px var(--steam-shadow-gold-strong) !important;
}

body.steampunk-mode .tab-btn:hover {
    color: var(--steam-secondary) !important;
    background: var(--steam-neon-gold) !important;
}

/* Botones slider y carrusel */
body.steampunk-mode .slider-btn,
body.steampunk-mode .carrusel-arrow {
    border-color: var(--steam-border-gold) !important;
    color: var(--steam-text) !important;
    background: rgba(13, 5, 5, 0.92) !important;
    box-shadow: 0 0 20px var(--steam-shadow) !important;
}

body.steampunk-mode .slider-btn:hover,
body.steampunk-mode .carrusel-arrow:hover {
    background: var(--steam-border-gold) !important;
    color: #000000 !important;
    box-shadow: 0 0 40px var(--steam-shadow-gold-strong) !important;
    border-color: var(--steam-border-gold) !important;
}

/* Botón micrófono */
body.steampunk-mode .mic-btn {
    border-color: var(--steam-border-gold) !important;
    color: var(--steam-text) !important;
    background: rgba(13, 5, 5, 0.7) !important;
    box-shadow: 0 0 10px var(--steam-shadow) !important;
}

body.steampunk-mode .mic-btn:hover {
    background: var(--steam-border-gold) !important;
    color: #000000 !important;
    box-shadow: 0 0 30px var(--steam-shadow-gold-strong) !important;
    border-color: var(--steam-border-gold) !important;
}

body.steampunk-mode .mic-btn:hover i {
    color: #000000 !important;
}

/* Dropdown */
body.steampunk-mode .platform-btn {
    border-color: var(--steam-border-gold) !important;
    color: var(--steam-text) !important;
    background: rgba(13, 5, 5, 0.7) !important;
    box-shadow: 0 0 10px var(--steam-shadow) !important;
}

body.steampunk-mode .platform-btn:hover {
    background: var(--steam-border-gold) !important;
    color: #000000 !important;
    border-color: var(--steam-border-gold) !important;
    box-shadow: 0 0 30px var(--steam-shadow-gold-strong) !important;
}

body.steampunk-mode .platform-menu {
    border-color: var(--steam-border-gold) !important;
    background: var(--steam-bg) !important;
    box-shadow: 0 0 30px var(--steam-shadow) !important;
}

body.steampunk-mode .platform-menu li a {
    color: var(--steam-text) !important;
}

body.steampunk-mode .platform-menu li a:hover {
    background: var(--steam-border-gold) !important;
    color: #000000 !important;
}

/* ============================================================
   6. LYRICS Y LIGHTBOX - ESTILO STEAMPUNK
   ============================================================ */

body.steampunk-mode .lyrics-popup-close,
body.steampunk-mode .lightbox-close,
body.steampunk-mode .lightbox-nav {
    color: var(--steam-text) !important;
    border-color: var(--steam-border-gold) !important;
    box-shadow: 0 0 15px var(--steam-shadow) !important;
}

body.steampunk-mode .lightbox-counter {
    color: var(--steam-secondary) !important;
}

body.steampunk-mode .lyrics-popup-close:hover,
body.steampunk-mode .lightbox-close:hover,
body.steampunk-mode .lightbox-nav:hover {
    color: #000000 !important;
    background: var(--steam-border-gold) !important;
    box-shadow: 0 0 40px var(--steam-shadow-gold-strong) !important;
    border-color: var(--steam-border-gold) !important;
}

body.steampunk-mode .lyrics-popup {
    border-color: var(--steam-border-gold) !important;
    box-shadow: 0 0 50px var(--steam-shadow) !important;
}

body.steampunk-mode .lyrics-popup h3 {
    border-bottom: 2px solid var(--steam-border-gold) !important;
    color: var(--steam-text) !important;
    text-shadow: 0 0 20px var(--steam-shadow-gold) !important;
}

body.steampunk-mode .lyrics-popup .track-name {
    color: var(--steam-secondary) !important;
}

body.steampunk-mode .lyrics-content {
    color: var(--steam-text) !important;
}

/* ============================================================
   7. EFECTO VAPOR/STEAM
   ============================================================ */

.steam-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99998;
    opacity: 0.04;
    background: radial-gradient(
        ellipse at center,
        rgba(110, 90, 40, 0.08) 0%,
        transparent 70%
    );
    animation: steamPulse 4s ease-in-out infinite;
}

body.steampunk-mode .steam-overlay {
    display: block !important;
}

@keyframes steamPulse {
    0% { opacity: 0.02; transform: scale(1); }
    50% { opacity: 0.05; transform: scale(1.1); }
    100% { opacity: 0.02; transform: scale(1); }
}

/* ============================================================
   8. EFECTO BRUÑIDO/ENVEJECIDO
   ============================================================ */

.steam-vignette {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99997;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(92, 0, 0, 0.20) 100%
    );
}

body.steampunk-mode .steam-vignette {
    display: block !important;
}

/* ============================================================
   9. FILTROS DE IMÁGENES - STEAMPUNK
   ============================================================ */

/* Filtro base para todas las imágenes - Tonos más oscuros */
body.steampunk-mode img:not(.matrix-rain img) {
    filter: grayscale(100%) brightness(0.6) contrast(1.25) 
            sepia(0.7) 
            drop-shadow(0 0 8px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   9.1 IMAGEN DE PERFIL (banda-imagen)
   ============================================================ */

body.steampunk-mode .banda-imagen img {
    filter: grayscale(100%) brightness(0.65) contrast(1.25) 
            sepia(0.6) 
            drop-shadow(0 0 20px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .banda-imagen:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.35) 
            sepia(0.7) 
            drop-shadow(0 0 30px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.2 SLIDER
   ============================================================ */

body.steampunk-mode .slider-track .slide {
    filter: grayscale(100%) brightness(0.55) contrast(1.35) 
            sepia(0.6) 
            drop-shadow(0 0 20px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .slider-container:hover .slide {
    filter: grayscale(100%) brightness(0.4) contrast(1.45) 
            sepia(0.7) 
            drop-shadow(0 0 30px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.3 PORTADAS DE DISCOS
   ============================================================ */

body.steampunk-mode .release-cover img {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            sepia(0.5) 
            drop-shadow(0 0 10px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .release-cover:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.25) 
            sepia(0.6) 
            drop-shadow(0 0 20px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.4 SPOTIFY
   ============================================================ */

body.steampunk-mode .banda-spotify iframe {
    filter: grayscale(100%) brightness(0.65) contrast(1.15) 
            sepia(0.5) 
            drop-shadow(0 0 10px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .banda-spotify iframe:hover {
    filter: grayscale(100%) brightness(0.45) contrast(1.25) 
            sepia(0.6) 
            drop-shadow(0 0 25px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.5 CARRUSELES EXTRAS
   ============================================================ */

body.steampunk-mode .extras-section .carrusel-item img {
    filter: grayscale(100%) brightness(0.65) contrast(1.2) 
            sepia(0.6) 
            drop-shadow(0 0 8px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .extras-section .carrusel-item:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.3) 
            sepia(0.7) 
            drop-shadow(0 0 20px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.6 JUEGOS
   ============================================================ */

body.steampunk-mode .juego-imagen img {
    filter: grayscale(100%) brightness(0.65) contrast(1.2) 
            sepia(0.6) 
            drop-shadow(0 0 8px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .juego-imagen:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.3) 
            sepia(0.7) 
            drop-shadow(0 0 20px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.7 VIDEOS
   ============================================================ */

body.steampunk-mode .video-thumbnail img {
    filter: grayscale(100%) brightness(0.65) contrast(1.2) 
            sepia(0.6) 
            drop-shadow(0 0 8px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .video-thumbnail:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.3) 
            sepia(0.7) 
            drop-shadow(0 0 20px var(--steam-shadow-gold-strong)) !important;
}

/* ============================================================
   9.8 GALERÍA DE FOTOS
   ============================================================ */

body.steampunk-mode .info-gallery-item img {
    filter: grayscale(100%) brightness(0.65) contrast(1.2) 
            sepia(0.6) 
            drop-shadow(0 0 8px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

body.steampunk-mode .info-gallery-item:hover img {
    filter: grayscale(100%) brightness(0.45) contrast(1.3) 
            sepia(0.7) 
            drop-shadow(0 0 20px var(--steam-shadow-gold-strong)) !important;
}

body.steampunk-mode .info-hero img {
    filter: grayscale(100%) brightness(0.55) contrast(1.25) 
            sepia(0.6) 
            drop-shadow(0 0 15px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   9.9 LIGHTBOX
   ============================================================ */

body.steampunk-mode .lightbox-image {
    filter: grayscale(100%) brightness(0.65) contrast(1.2) 
            sepia(0.6) 
            drop-shadow(0 0 25px var(--steam-shadow)) !important;
    transition: filter 0.5s ease !important;
}

/* ============================================================
   10. SCROLLBAR STEAMPUNK
   ============================================================ */

body.steampunk-mode ::-webkit-scrollbar {
    width: 8px;
}

body.steampunk-mode ::-webkit-scrollbar-track {
    background: var(--steam-bg);
    box-shadow: inset 0 0 10px var(--steam-shadow);
}

body.steampunk-mode ::-webkit-scrollbar-thumb {
    background: var(--steam-border-gold);
    border-radius: 4px;
    box-shadow: 0 0 20px var(--steam-shadow-gold);
}

body.steampunk-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--steam-text);
    box-shadow: 0 0 30px var(--steam-shadow-gold-strong);
}

/* ============================================================
   11. INDICADOR - OCULTO
   ============================================================ */

.steam-indicator,
body.steampunk-mode .steam-indicator {
    display: none !important;
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    body.steampunk-mode .banda-imagen img {
        filter: grayscale(100%) brightness(0.6) contrast(1.15) 
                sepia(0.5) 
                drop-shadow(0 0 8px var(--steam-shadow)) !important;
    }
    
    body.steampunk-mode .lightbox-image {
        filter: grayscale(100%) brightness(0.6) contrast(1.15) 
                sepia(0.5) 
                drop-shadow(0 0 15px var(--steam-shadow)) !important;
    }
}

@media (max-width: 480px) {
    body.steampunk-mode .banda-imagen img {
        filter: grayscale(100%) brightness(0.5) contrast(1.1) 
                sepia(0.4) 
                drop-shadow(0 0 5px var(--steam-shadow)) !important;
    }
    
    body.steampunk-mode .lightbox-image {
        filter: grayscale(100%) brightness(0.5) contrast(1.1) 
                sepia(0.4) 
                drop-shadow(0 0 8px var(--steam-shadow)) !important;
    }
}