* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    font-family: 'Courier New', Courier, monospace;
    color: white;
    overflow: hidden;
    height: 100vh;
}

/* ==================================================
   PANTALLA PREVIA DE TERMINAL
   ================================================== */
.startup-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    cursor: pointer;
}

.startup-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('Photos/jaipo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto; /* Mantiene la resolución original */
    opacity: 0.4; 
    filter: url(#water-effect) contrast(200%) saturate(120%) brightness(0.9) blur(1px);
    transform: scale(1.1) translateZ(0); /* translateZ(0) fuerza la aceleración por tarjeta de video */
    will-change: filter, transform; /* Le avisa al navegador que debe optimizar estos procesos */
    z-index: -1; 
    pointer-events: none;
}

.startup-message {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #fff;
    opacity: 0.9;
}

.startup-cursor {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 1.5rem;
    color: #fff;
}

.blink {
    animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==================================================
   PANTALLA COMPLETA CRT
   ================================================== */
.crt-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0; 
    overflow: hidden;
    position: relative;
    background-color: #000;
    
    /* Inicia apagada/invisible */
    transform: scale(0, 0);
    transform-origin: center center;
}

/* Esta clase se añade por JS al hacer click en la terminal */
.crt-screen.turned-on {
    animation: tv-turn-on 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes tv-turn-on {
    0% { transform: scale(0, 0); filter: brightness(10) contrast(3); }
    30% { transform: scale(0.01, 0.01); filter: brightness(10) contrast(3); }
    75% { transform: scale(1.02, 1.02); filter: brightness(2) contrast(1.2); }
    100% { transform: scale(1, 1); filter: brightness(1) contrast(1); }
}

/* Animación inversa para apagar la terminal */
.startup-screen.turning-off {
    animation: tv-turn-off 0.4s cubic-bezier(0.8, 0, 1, 1) forwards;
}

@keyframes tv-turn-off {
    0% { transform: scale(1, 1); filter: brightness(1); }
    20% { transform: scale(1.05, 1.05); filter: brightness(2); } /* Pequeña anticipación */
    80% { transform: scale(0.01, 0.01); filter: brightness(10); } /* Se encoge a un punto */
    100% { transform: scale(0, 0); filter: brightness(10); } /* Desaparece */
}

.crt-screen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.crt-screen::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 50%);
    background-size: 100% 4px;
    z-index: 9998;
    pointer-events: none;
}

.static-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    filter: url(#static-noise);
    mix-blend-mode: screen;
    opacity: 0.02; 
    z-index: 9997;
    pointer-events: none;
}

.album-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #000;
}

/* ==================================================
   GLITCHES Y ESTÁTICA
   ================================================== */
.glitch-effect-1 { animation: glitch-anim-1 0.15s ease-in-out; }
.glitch-effect-2 { animation: glitch-anim-2 0.1s steps(2); }
.glitch-effect-3 { animation: glitch-anim-3 0.2s ease-in-out; }
.glitch-effect-4 { animation: glitch-anim-4 0.15s ease-out; }
.glitch-effect-5 { animation: glitch-anim-5 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.glitch-effect-6 { animation: glitch-anim-6 0.15s steps(2); }

@keyframes glitch-anim-1 { 0%, 100% { transform: translate(0, 0) skew(0deg); } 50% { transform: translate(-3px, 1px) skew(-1deg); filter: hue-rotate(10deg); } }
@keyframes glitch-anim-2 { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scaleX(1.01) skewX(2deg); filter: brightness(1.1); } }
@keyframes glitch-anim-3 { 0%, 100% { transform: translateY(0); filter: grayscale(0); } 50% { transform: translateY(-1vh); filter: grayscale(0.3); } }
@keyframes glitch-anim-4 { 0%, 100% { transform: scale(1); filter: invert(0); } 50% { transform: scale(1.01); filter: invert(0.1) hue-rotate(10deg); } }
@keyframes glitch-anim-5 { 0%, 100% { transform: translate(0) skew(0); } 50% { transform: translate(-2px, -1px) skew(1deg, 0deg); filter: sepia(0.2); } }
@keyframes glitch-anim-6 { 0%, 100% { transform: translate(0); filter: blur(0); } 50% { transform: translate(-2px, 0); filter: blur(1px); } }

.static-flash-1 { animation: flash-1 0.15s; }
.static-flash-2 { animation: flash-2 0.1s; }
.static-flash-3 { animation: flash-3 0.2s; }
.static-flash-4 { animation: flash-4 0.15s; }
.static-flash-5 { animation: flash-5 0.2s; }
.static-flash-6 { animation: flash-6 0.15s; }

@keyframes flash-1 { 0%, 100%{ opacity: 0.02; } 50%{ opacity: 0.1; } }
@keyframes flash-2 { 0%, 100%{ opacity: 0.02; } 50%{ opacity: 0.15; } }
@keyframes flash-3 { 0%, 100%{ opacity: 0.02; } 50%{ opacity: 0.08; } }
@keyframes flash-4 { 0%, 100%{ opacity: 0.02; } 50%{ opacity: 0.12; transform: scale(1.01); } }
@keyframes flash-5 { 0%, 100%{ opacity: 0.02; } 50%{ opacity: 0.1; } }
@keyframes flash-6 { 0%, 100%{ opacity: 0.02; } 50%{ opacity: 0.15; } }

/* ==================================================
   BARRAS Y CONTENIDO
   ================================================== */
.row { display: flex; width: 100%; }
.row-top { flex: 65; }
.row-mid { flex: 10; }
.row-bot { flex: 25; }

.item {
    flex: 1; 
    transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    z-index: 1;
}


.sub-container { display: flex; flex-direction: row; padding: 0; }
.sub-item { flex: 1; height: 100%; position: relative; overflow: hidden; z-index: 1; }

@keyframes breathe {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.item::before, .sub-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; 
    z-index: -1;
    background-color: var(--bg-color, transparent);
    background-image: var(--bg-img, none);
    background-size: cover;
    background-position: center;
    transition: transform 1s ease;
}

.item.hovered::before, .sub-item.hovered::before {
    animation: breathe 6s ease-in-out infinite;
    transform: scale(1.15); 
}

.content {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    transition: all 0.5s ease;
    text-align: center;
    background: transparent !important;
    padding: 0;
    width: 90%;
    pointer-events: none;
    z-index: 5;
}
.bg-top-1 .content { color: white; }
.item.hovered.revealed > .content, .sub-item.hovered.revealed > .content { opacity: 1; transform: translate(-50%, -50%); }
.item.revealed > .content, .sub-item.revealed > .content { pointer-events: auto !important; }

.content h2 { font-size: 1.2rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; }
.content p { font-size: 0.85rem; opacity: 0.9; }

/* ==================================================
   VARIABLES DE COLORES
   ================================================== */
.bg-top-1 { --bg-color: #d4d4d4; --bg-img: url('Photos/colorbar detail/Row 1/1-1.png'); }
.bg-top-2 { --bg-color: #d1c000; --bg-img: url('Photos/colorbar detail/Row 1/1-2.png'); }
.bg-top-3 { --bg-color: #00c3c3; --bg-img: url('Photos/colorbar detail/Row 1/1-3.png'); }
.bg-top-4 { --bg-color: #1c901c; --bg-img: url('Photos/colorbar detail/Row 1/1-4.png'); }
.bg-top-5 { --bg-color: #c400c4; --bg-img: url('Photos/colorbar detail/Row 1/1-5.png'); }
.bg-top-6 { --bg-color: #d30000; --bg-img: url('Photos/colorbar detail/Row 1/1-6.png'); }
.bg-top-7 { --bg-color: #0000d3; --bg-img: url('Photos/colorbar detail/Row 1/1-7.png'); }

.bg-mid-1 { --bg-color: #0000a0; --bg-img: url('Photos/colorbar detail/Row 2/2-1.png'); }
.bg-mid-2 { --bg-color: #222222; --bg-img: url('Photos/colorbar detail/Row 2/2-2.png'); }
.bg-mid-3 { --bg-color: #c400c4; --bg-img: url('Photos/colorbar detail/Row 2/2-3.png'); }
.bg-mid-4 { --bg-color: #111111; --bg-img: url('Photos/colorbar detail/Row 2/2-4.png'); }
.bg-mid-5 { --bg-color: #00c3c3; --bg-img: url('Photos/colorbar detail/Row 2/2-5.png'); }
.bg-mid-6 { --bg-color: #555555; --bg-img: url('Photos/colorbar detail/Row 2/2-6.png'); }
.bg-mid-7 { --bg-color: #999999; --bg-img: url('Photos/colorbar detail/Row 2/2-7.png'); }

.bg-bot-1 { --bg-color: #1a4b8c; --bg-img: url('Photos/colorbar detail/Row 3/3-1.png'); }
.bg-bot-2 { --bg-color: #e0e0e0; --bg-img: url('Photos/colorbar detail/Row 3/3-2.png'); }
.bg-bot-3 { --bg-color: #3b0066; --bg-img: url('Photos/colorbar detail/Row 3/3-3.png'); }
.bg-bot-4 { --bg-color: #1a1a1a; --bg-img: url('Photos/colorbar detail/Row 3/3-4.png'); }
.bg-bot-5-1 { --bg-color: #151515; --bg-img: url('Photos/colorbar detail/Row 3/3-5.png'); }
.bg-bot-5-2 { --bg-color: #4a4a4a; --bg-img: url('Photos/colorbar detail/Row 3/3-6.png'); }
.bg-bot-5-3 { --bg-color: #0a0a0a; --bg-img: url('Photos/colorbar detail/Row 3/3-7.png'); }
.bg-bot-6 { --bg-color: #151515; --bg-img: url('Photos/colorbar detail/Row 3/3-8.png'); }



/* Estado Activo: Canción Reproduciéndose */
.item.playing, .sub-item.playing {
    z-index: 10;
    transform: scale(var(--beat-scale, 1));
    transition: transform 0.05s ease-out; /* suavizado rapido para los frames de audio */
}
.item.playing::after, .sub-item.playing::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    /* La animacion automatica se apaga porque ahora es controlada por la musica */
    animation: none !important;
    box-shadow: 0 0 var(--beat-glow, 15px) rgba(255, 255, 255, var(--beat-opacity, 0.8)), inset 0 0 20px rgba(255, 255, 255, 0.4);
    transition: box-shadow 0.05s ease-out;
}
.item.playing, .sub-item.playing { flex: 2; z-index: 10; }
.item.playing > .content, .sub-item.playing > .content { background: transparent !important; opacity: 1; transform: translate(-50%, -50%); }
.item.playing > .content h2, .sub-item.playing > .content h2 {
    color: #fffae6;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
@keyframes pulse-border {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ==================================================
   MECÁNICA DE REVELADO DE FOTOS
   ================================================== */
.item, .sub-item {
    background-color: var(--bg-color, transparent);
}
.item::before, .sub-item::before {
    background-color: transparent !important;
    opacity: 0;
    transition: transform 1s ease, opacity 0.5s ease !important;
}
.item.revealed, .sub-item.revealed { flex: 1.2; }
.item.hovered, .sub-item.hovered { flex: 1.8; filter: brightness(1.15); z-index: 10; }
.item.revealed::before, .sub-item.revealed::before {
    opacity: 1;
}


/* ==================================================
   REPRODUCTOR OLD WEB (WIN95 STYLE)
   ================================================== */
.retro-modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.retro-modal.active { opacity: 1; pointer-events: auto; }

.retro-modal-content {
    background: #c0c0c0;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
    border-right: 2px solid #000000; border-bottom: 2px solid #000000;
    box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080, 2px 2px 5px rgba(0,0,0,0.5);
    width: 90%; max-width: 450px;
    padding: 3px;
    color: #000;
    font-family: 'Tahoma', 'Arial', sans-serif !important;
    position: relative;
    /* Animacion de despliegue calculada */
    transform: translate(var(--start-x, 40vw), var(--start-y, 0)) scale(0.01);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

.retro-modal.active .retro-modal-content {
    transform: translate(0, 0) scale(1);
    opacity: 1;
}

.retro-header { 
    display: flex; justify-content: space-between; align-items: center;
    background: #000080;
    padding: 3px 3px 3px 5px; margin-bottom: 10px; 
}
.retro-header h3 { 
    margin: 0; font-weight: bold; font-size: 0.95rem !important;
    letter-spacing: 0 !important; color: #fff; text-shadow: none;
    font-family: 'Tahoma', 'Arial', sans-serif !important;
}
.header-left {
    display: flex; align-items: center; gap: 8px;
}
.play-pause-btn-small {
    background: #c0c0c0;
    border-top: 2px solid #fff; border-left: 2px solid #fff;
    border-right: 2px solid #808080; border-bottom: 2px solid #808080;
    color: #000;
    font-size: 0.8rem; cursor: pointer; padding: 2px 6px;
    display: flex; align-items: center; justify-content: center;
    text-shadow: none !important;
}
.play-pause-btn-small:active {
    border-top: 2px solid #808080; border-left: 2px solid #808080;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: none !important;
}
.retro-header button#close-player { 
    background: #c0c0c0; color: #000; 
    border-top: 2px solid #fff; border-left: 2px solid #fff;
    border-right: 2px solid #808080; border-bottom: 2px solid #808080;
    font-weight: bold; font-family: 'Tahoma', sans-serif !important;
    font-size: 0.8rem; display: flex; justify-content: center; align-items: center;
    cursor: pointer; padding: 2px 6px; width: 22px; height: 20px;
}
.retro-header button#close-player:active { 
    border-top: 2px solid #808080; border-left: 2px solid #808080;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}

.retro-playlist { 
    list-style: none; padding: 0; margin: 0; 
    background: #fff; 
    border-top: 2px solid #808080; border-left: 2px solid #808080;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    height: auto; max-height: 250px; overflow-y: auto;
}
.retro-playlist li {
    font-size: 0.9rem !important; padding: 4px 8px; 
    border-bottom: none;
    cursor: default; transition: none;
    border-radius: 0; margin-bottom: 0;
    letter-spacing: 0 !important; color: #000;
    font-family: 'Tahoma', 'Arial', sans-serif !important;
}
.retro-playlist li:hover { 
    background: #000080; color: #fff; padding-left: 8px;
}
.retro-playlist li.active-track { 
    background: #000080; color: #fff; font-weight: normal;
    box-shadow: none; border: 1px dotted #fff;
}

.player-controls {
    display: flex; justify-content: center; margin-bottom: 10px;
}
.play-pause-btn {
    background: #c0c0c0; color: #000;
    border-top: 2px solid #fff; border-left: 2px solid #fff;
    border-right: 2px solid #808080; border-bottom: 2px solid #808080;
    border-radius: 0; padding: 6px 20px;
    font-size: 0.9rem; cursor: pointer; transition: none;
    font-family: 'Tahoma', 'Arial', sans-serif !important;
    font-weight: normal !important;
}
.play-pause-btn:active {
    border-top: 2px solid #808080; border-left: 2px solid #808080;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: none !important;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.play-pause-btn-small {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.play-pause-btn-small:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.play-pause-btn-small:active {
    transform: scale(0.9);
}

.retro-modal-content {
    filter: invert(1);
    font-family: 'VT323', monospace !important;
}
.retro-header h3 {
    font-family: 'VT323', monospace !important;
    font-size: 1.8rem !important;
    letter-spacing: 2px !important;
}
.retro-playlist li {
    font-family: 'VT323', monospace !important;
    font-size: 1.4rem !important;
}

/* ==================================================
   TIPOGRAFÍA GLOBAL
   ================================================== */
body, h1, h2, h3, p, a, div, span, li, button {
    font-family: 'VT323', monospace !important;
}
.content h2 {
    font-size: 2rem !important;
    letter-spacing: 3px !important;
}
.content p {
    font-size: 1.2rem !important;
}
.startup-message {
    font-size: 1.8rem !important;
    letter-spacing: 2px !important;
}
.startup-cursor {
    font-size: 2rem !important;
}




.startup-screen.turning-on {
    animation: tv-turn-on 0.4s forwards;
}
@keyframes tv-turn-on {
    0% { transform: scale(0, 0); opacity: 0; }
    50% { transform: scale(1, 0.01); opacity: 1; }
    100% { transform: scale(1, 1); opacity: 1; }
}

.crt-screen.turning-off {
    animation: tv-turn-off 0.4s forwards;
}



.content h2, .content p {
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0px 2px 10px rgba(0,0,0,0.9) !important;
}

@keyframes barrel-roll {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.do-barrel-roll {
    animation: barrel-roll 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Asegurar que la X se vea en bot-6 sin necesidad de hover */
.bot-6.show-x .content {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}





/* ==================================================
   POPUP DE CANCIONES BLOQUEADAS
   ================================================== */
.locked-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: repeating-linear-gradient(0deg, #1c1c1c, #1c1c1c 2px, #0a0a0a 3px, #0a0a0a 4px);
    padding: 20px 40px;
    border-radius: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.locked-popup-text {
    font-family: 'Arial', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -2px;
    background: repeating-linear-gradient(0deg, #ffffff, #ffffff 2px, #cccccc 3px, #cccccc 4px);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    margin: 0;
}

@keyframes popup-float {
    0% { opacity: 0; transform: translate(-50%, 20px); }
    15% { opacity: 1; transform: translate(-50%, -10px); }
    80% { opacity: 1; transform: translate(-50%, -50px); }
    100% { opacity: 0; transform: translate(-50%, -70px); }
}

.locked-popup.show {
    animation: popup-static 2.1s step-end forwards;
}

/* ==================================================
   OPTIMIZACION PARA CELULARES (MOBILE RESPONSIVE)
   ================================================== */
@media (max-width: 768px) {
    /* 1. Comportamiento elástico agresivo en pantallas angostas */
    /* Cuando se toca una barra, debe crecer mucho más para que se vea la foto y el texto */

    .startup-screen::before {
        background-size: 100% auto !important; /* Más pequeño en el centro para móviles */
        background-position: center !important;
    }
    .item.revealed, .sub-item.revealed { flex-grow: 2.5 !important; }
    .item.hovered, .sub-item.hovered { flex-grow: 3.0 !important; }
    .item.playing, .sub-item.playing { flex-grow: 3.5 !important; }

    /* 2. Reducir la tipografía gigante para que quepa en las barras verticales de un celular */
    .content h2 { 
        font-size: 1.2rem !important; 
        letter-spacing: 1px !important; 
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 1px 5px rgba(0,0,0,0.9) !important;
    }
    .content p { font-size: 0.85rem !important; }
    
    /* Achicar íconos gigantes */
    #grid-player-icon { font-size: 2.5rem !important; }
    .bot-6 .content div { font-size: 2.5rem !important; } /* La X de emergencia */

    /* 3. Ajustes de la Terminal de Recepción */
    .startup-message { font-size: 1.2rem !important; letter-spacing: 1px !important; }
    .click-prompt { font-size: 0.9rem !important; }
    #water-offset { /* Reducir aún más la distorsión del agua en pantallas chicas */ }
    
    /* 4. Ajustes del Pop-up de Bloqueo */
    .locked-popup { 
        padding: 15px 20px !important; 
        width: max-content !important; /* Que el cuadro se ajuste al centro y no abarque el 85% */
        max-width: 85%; /* Limite por si acaso */
        text-align: center;
    }
    .locked-popup-text {
        font-size: 1.8rem !important;
    }

    /* 5. Ajustes del Reproductor Win95 */
    .retro-modal-content { 
        width: 95% !important; 
        padding: 2px !important; 
    }
    .retro-header h3 { font-size: 0.85rem !important; }
    .retro-playlist { height: auto !important; max-height: 40vh !important; }
    .retro-playlist li { font-size: 0.85rem !important; padding: 10px 8px !important; }
    .play-pause-btn { padding: 8px 20px !important; }
    /* Centrar la grilla y hacerla más cuadrada en celular */    body {
        display: block !important;
    }
    .crt-screen {
        display: block !important;
        position: absolute !important;
        top: 50% !important; 
        left: 50% !important;
        width: 100vw !important;
        height: 133.33vw !important;
        transform: translate(-50%, -50%) !important;
        overflow: hidden !important;
    }
    .album-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* Solución radical al problema de pantalla negra: 
       Los navegadores móviles Android colapsan con el scale(0,0) y los filtros extremos. 
       Reemplazamos con una animación simple de opacidad y escala vertical */
    /* Arreglar SVG en mobile */
    #water-bg {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    /* Quitar completamente la animación en mobile para ver si el DOM se renderiza */
    /* Hemos restaurado la animación de encendido en versión segura para móviles */
    .crt-screen.turned-on {
        animation: tv-turn-on-mobile 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
        display: flex !important;
    }
}

@keyframes tv-turn-on-mobile {
    0% { transform: scale(0.01, 0.01); filter: brightness(5) contrast(2); opacity: 0; }
    50% { transform: scale(1, 0.02); filter: brightness(3) contrast(1.5); opacity: 1; }
    100% { transform: scale(1, 1); filter: brightness(1) contrast(1); opacity: 1; }
}





/* ==================================================
   KILL SWITCH STYLIZED X (3-8)
   ================================================== */
.stylized-x {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    font-size: 3.5rem;
    font-family: 'VT323', monospace;
    font-weight: bold;
    background: repeating-linear-gradient(0deg, #ffffff, #ffffff 4px, #cccccc 5px, #cccccc 8px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    line-height: 1;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: inline-block;
}

.item.show-x .stylized-x {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* El stage-2 (Segundo Clic de la X) */
.bot-6.stage-2 .stylized-x {
    background: repeating-linear-gradient(0deg, #00ff00, #00ff00 4px, #00aa00 5px, #00aa00 8px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: 
        barrelRoll-x 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        breathing-x-green 1s ease-in-out 0.5s infinite alternate !important;
}

@keyframes barrelRoll-x {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.1); filter: drop-shadow(0 0 15px rgba(0,255,0,0.8)); }
}

@keyframes breathing-x-green {
    0% { filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.8)); transform: translate(-50%, -50%) scale(1.1); }
    100% { filter: drop-shadow(0 0 40px rgba(0, 255, 0, 1)); transform: translate(-50%, -50%) scale(1.3); }
}

/* UTILIDAD GLOBAL PARA TEXTOS RETRO HUD (BLANCO) */
.retro-hud-text-white {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    background: repeating-linear-gradient(0deg, #ffffff, #ffffff 2px, #cccccc 3px, #cccccc 4px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    display: inline-block;
}

/* UTILIDAD GLOBAL PARA TEXTOS RETRO HUD */
.retro-hud-text {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    background: repeating-linear-gradient(0deg, #00ff00, #00ff00 2px, #00aa00 3px, #00aa00 4px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.8));
    display: inline-block;
}



/* ==================================================
   VOLUME SLIDER (2-6)
   ================================================== */
#global-volume-slider {
    pointer-events: auto !important;
    -webkit-appearance: none;
    background: transparent;
    outline: none;
}
#global-volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #fff;
}
#global-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 12px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    margin-top: -9px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}


/* ==================================================
   TOP AUDIO PROGRESS BAR
   ================================================== */
#top-progress-bar-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 25px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid #555;
    z-index: 100000;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Área de colisión extendida para el hover (así detecta el mouse antes de tocar el borde) */
#top-progress-bar-container::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0; width: 100%; height: 30px;
    background: transparent;
}

#top-progress-bar-container:hover {
    transform: translateY(0);
}

#top-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1a4b8c, #00ffff);
    transition: width 0.1s linear;
}

#top-progress-time {
    position: relative;
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'Tahoma', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
    letter-spacing: 2px;
}

/* ==================================================
   WAVE UP ANIMATION (EASTER EGG 3-6)
   ================================================== */
@keyframes wave-up {
    0% { transform: translateY(0); }
    50% { transform: translateY(-50px); box-shadow: 0 50px 20px rgba(0,0,0,0.5); z-index: 100; }
    100% { transform: translateY(0); }
}
.wave-up {
    animation: wave-up 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* ==================================================
   CRT VOLUME OVERLAY (FLOATING OVER ROW 3)
   ================================================== */
#crt-volume-container {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 60%; /* Ligeramente más reducido */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}
#crt-volume-container.show {
    opacity: 1;
    pointer-events: auto;
}
.vol-label {
    font-family: 'Arial', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    text-transform: capitalize;
    letter-spacing: -2px;
    background: repeating-linear-gradient(0deg, #00ff00, #00ff00 2px, #00aa00 3px, #00aa00 4px);
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.8));
}
#vol-bars-display {
    display: flex;
    align-items: center;
    gap: 3px; /* Espacio mínimo para que se vean divididos pero juntos */
    height: 45px;
    pointer-events: none;
    flex-grow: 1;
}
.vol-block {
    flex: 1;
    height: 100%;
    background: repeating-linear-gradient(0deg, #00ff00, #00ff00 2px, #005500 3px, #005500 4px);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}
.vol-dot {
    flex: 1;
    height: 30%; /* Cuadrados pequeños */
    border-radius: 0; /* Totalmente cuadrados, sin bordes redondeados */
    background: repeating-linear-gradient(0deg, #00ff00, #00ff00 2px, #005500 3px, #005500 4px);
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.6);
}
#global-volume-slider {
    position: absolute;
    right: 0;
    width: calc(100% - 140px);
    height: 40px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}






/* ==================================================
   CRT CHANNEL INDICATOR
   ================================================== */
#crt-channel-indicator {
    position: fixed;
    top: 5vh;
    right: 5vw;
    left: auto;
    font-family: 'Arial', sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    letter-spacing: -2px;
    background: repeating-linear-gradient(0deg, #00ff00, #00ff00 2px, #00aa00 3px, #00aa00 4px);
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.8));
    z-index: 100000;
    pointer-events: none;
    user-select: none;
}

/* ==================================================
   REAL GENERATED STATIC SCREEN (CANVAS)
   ================================================== */
#channel-04-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s linear;
}
#channel-04-canvas.active {
    opacity: 1;
    pointer-events: auto;
    /* Un ligero parpadeo para darle más realismo de tubo CRT */
    animation: crt-flicker 0.1s infinite alternate;
}

@keyframes crt-flicker {
    0% { filter: brightness(1) contrast(1.2); }
    100% { filter: brightness(0.9) contrast(1.4); }
}

/* Modificamos el indicador de canal para que sea interactivo */
#crt-channel-indicator {
    pointer-events: auto !important;
    cursor: pointer;
}



/* ==================================================
   CH 03: RPG ANIMATION (SNES)
   ================================================== */
#channel-03-rpg {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 50000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s linear;
    background-color: #000;
    overflow: hidden;
}
#channel-03-rpg.active {
    opacity: 1;
    pointer-events: auto;
}

/* Fondo de Mapa Dark Fantasy 16-bits (Abstracto y Amplio) */
.rpg-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image: url('Photos/rpg-dark-map-v2.jpg');
    background-size: cover;
    background-position: center 0%;
    image-rendering: pixelated;
    animation: rpg-pan-vertical 40s linear infinite alternate;
    filter: brightness(0.9) contrast(1.1);
}
@keyframes rpg-pan-vertical {
    0% { background-position: center 0%; }
    100% { background-position: center 100%; }
}

.press-start {
    position: absolute;
    bottom: 25vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    color: #fff;
    font-size: 1.8rem;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 3px 3px 0 #000;
    animation: press-start-blink 1.2s steps(2, start) infinite;
    pointer-events: none;
}

@keyframes press-start-blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* Caja de dialogo clasica Final Fantasy / Dragon Quest */
.rpg-dialog {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 180px;
    background: linear-gradient(180deg, #000088, #000033);
    border: 6px solid #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 0 0 4px #000, inset 0 0 0 4px #000;
    display: flex;
    flex-direction: column;
}
.rpg-dialog p {
    font-family: 'Press Start 2P', monospace;
    color: #fff;
    font-size: 1.2rem;
    line-height: 2rem;
    text-shadow: 2px 2px 0 #000;
    margin: 0;
    white-space: pre-wrap; /* Respeta los saltos de linea */
}
.rpg-cursor {
    font-family: 'Press Start 2P', monospace;
    color: #fff;
    font-size: 1.5rem;
    align-self: flex-end;
    margin-top: auto;
    animation: rpg-bounce 0.5s infinite alternate;
}
@keyframes rpg-bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

.rpg-character {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    filter: drop-shadow(8px 8px 0 #000);
    animation: rpg-float 2s ease-in-out infinite alternate;
    image-rendering: pixelated;
}
@keyframes rpg-float {
    0% { transform: translate(-50%, -40%); }
    100% { transform: translate(-50%, -60%); }
}














@media (max-width: 768px) {
    /* Ajustes específicos para el Overlay de Volumen en Móvil */
    #crt-volume-container {
        bottom: 22vh !important; /* Levantar la barra significativamente para que quede en la Fila 3 y esquive la interfaz del navegador */
        width: 95vw !important; /* Aprovechar todo el ancho para que quepan las 50 rayitas */
        flex-direction: column !important; /* Etiqueta arriba, rayitas abajo */
        gap: 5px !important;
    }
    .vol-label {
        font-size: 2.2rem !important;
    }
    #vol-bars-display {
        width: 100% !important;
        height: 35px !important;
    }
}





/* Variaciones de Error (Sin Señal) */
/* V1: Suave 3 pulsos */
.album-container.error-fade-1 { animation: fade-anim-1 2s ease-in-out forwards; }
#channel-04-canvas.error-static-1 { mix-blend-mode: screen; pointer-events: none; animation: static-anim-1 2s ease-in-out forwards; }
@keyframes fade-anim-1 {
    0% { opacity: 1; } 5% { opacity: 0.1; } 10% { opacity: 1; }
    15% { opacity: 1; } 22% { opacity: 0.15; } 30% { opacity: 1; }
    40% { opacity: 1; } 50% { opacity: 0.05; } 75% { opacity: 0.05; } 100% { opacity: 1; }
}
@keyframes static-anim-1 {
    0% { opacity: 0; } 5% { opacity: 0.5; } 10% { opacity: 0; }
    15% { opacity: 0; } 22% { opacity: 0.4; } 30% { opacity: 0; }
    40% { opacity: 0; } 50% { opacity: 0.6; } 75% { opacity: 0.6; } 100% { opacity: 0; }
}

/* V2: Un golpe masivo y apagado lento */
.album-container.error-fade-2 { animation: fade-anim-2 2s ease-out forwards; }
#channel-04-canvas.error-static-2 { mix-blend-mode: screen; pointer-events: none; animation: static-anim-2 2s ease-out forwards; }
@keyframes fade-anim-2 { 0% { opacity: 0.05; } 30% { opacity: 0.15; } 100% { opacity: 1; } }
@keyframes static-anim-2 { 0% { opacity: 0.6; } 30% { opacity: 0.4; } 100% { opacity: 0; } }

/* V3: Violento (5 latigazos directos) */
.album-container.error-fade-3 { animation: fade-anim-3 2s step-end forwards; }
#channel-04-canvas.error-static-3 { mix-blend-mode: screen; pointer-events: none; animation: static-anim-3 2s step-end forwards; }
@keyframes fade-anim-3 {
    0% { opacity: 0.05; } 10% { opacity: 1; } 20% { opacity: 0.1; } 30% { opacity: 1; }
    40% { opacity: 0.05; } 50% { opacity: 1; } 60% { opacity: 0.1; } 80% { opacity: 1; }
    90% { opacity: 0.2; } 100% { opacity: 1; }
}
@keyframes static-anim-3 {
    0% { opacity: 0.6; } 10% { opacity: 0; } 20% { opacity: 0.5; } 30% { opacity: 0; }
    40% { opacity: 0.7; } 50% { opacity: 0; } 60% { opacity: 0.6; } 80% { opacity: 0; }
    90% { opacity: 0.4; } 100% { opacity: 0; }
}

/* V4: Dos golpes suaves (uno largo, uno corto al final) */
.album-container.error-fade-4 { animation: fade-anim-4 2s ease-in-out forwards; }
#channel-04-canvas.error-static-4 { mix-blend-mode: screen; pointer-events: none; animation: static-anim-4 2s ease-in-out forwards; }
@keyframes fade-anim-4 {
    0% { opacity: 1; } 10% { opacity: 0.05; } 50% { opacity: 0.2; }
    60% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0.1; } 100% { opacity: 1; }
}
@keyframes static-anim-4 {
    0% { opacity: 0; } 10% { opacity: 0.6; } 50% { opacity: 0.4; }
    60% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 0.5; } 100% { opacity: 0; }
}




@keyframes popup-static {
    0%   { opacity: 1; transform: translate(-50%, -50%); }
    99%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}