body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: #0b0c3a; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    overflow: hidden; 
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: transparent; 
    transition: opacity 0.5s;
}

.hidden {
    display: none !important;
}

.screen.active {
    display: flex; 
}

.fade-target {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade-out {
    opacity: 0 !important; 
    transform: translateY(-20px); 
    pointer-events: none; 
}

/* --- PANTALLA DE INICIO --- */
#start-screen.active {
    background-image: url('images/fondo.png'); /* <--- RUTA DE TU FONDO DE INICIO */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================================= */
/* ⭐ MODIFICACIÓN CLAVE: Fondo Responsivo para Reglas (Logo Visible) */
/* ========================================================= */
#rules-screen.active {
    /* 🚨 RUTA DE LA IMAGEN DE FONDO DE LAS REGLAS (Reemplaza si es necesario) */
    background-image: url('images/fondo.png'); 
    
    /* Configuración para que el logo central sea visible sin recorte */
    background-size: cover; /* ¡CLAVE! Asegura que la imagen quepa completamente */
    background-position: center; 
    background-repeat: no-repeat; 
    
    /* Rellena el espacio no cubierto por 'contain' */
    background-color: #0b0c3a; 
    
    /* background-blend-mode: multiply; */ /* Opcional: Descomenta si deseas oscurecer la imagen */
}

#rules-screen .screen-content {
    /* Asegura que el contenido sea legible sobre el fondo */
    background-color: rgba(0, 0, 0, 0.85); /* Más opaco para el texto de las reglas */
    border: 3px solid #ffc107; 
    max-height: 80vh; 
    overflow-y: auto; 
}

/* Animación del Gradiente para el Borde */
@keyframes BorderGradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.screen-content {
    padding: 40px; 
    z-index: 10; 
    background-color: rgba(0, 0, 0, 0.1); 
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    max-width: 800px; 
    position: relative; 
    overflow: hidden; 

    /* Borde de gradiente animado para .screen-content */
    border: 3px solid transparent; 
    background-origin: border-box; 
    background-clip: padding-box, border-box; 
    
    /* El gradiente del borde */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.418), rgba(0, 0, 0, 0.473)), 
        linear-gradient(to right, #a006c76b, #02b5fc83, #e937e941, #0f202742); 
    
    background-size: 400% 400%; 
    animation: BorderGradientAnimation 10s ease infinite; 
}

/* ----------------------------------------------------------------- */

h1 {
    font-size: 3.5em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px rgba(0, 255, 255, 0.6); 
    color: white;
}

.input-group {
    margin: 20px 0;
    text-align: center;
}

.input-group label {
    display: block;
    font-size: 1.3em;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); 
}

#player-name {
    padding: 12px 20px;
    font-size: 1.1em;
    border-radius: 8px;
    border: 2px solid #5a5ac7; 
    background-color: rgba(26, 26, 92, 0.1); 
    color: #ffc107; 
    width: 80%;
    max-width: 350px;
    transition: all 0.3s;
    box-shadow: 0 0 10px rgba(90, 90, 199, 0.5); 
}

#player-name:focus {
    outline: none;
    border-color: #ffc107; 
    box-shadow: 0 0 15px #ffc107; 
    background-color: #1a1a5c;
}

.rules-box {
    background-color: rgba(26, 26, 92, 0.9);
    border: 2px solid #5a5ac7;
    border-radius: 15px;
    padding: 30px;
    max-width: 600px;
}

.rules-box h2 {
    margin-top: 0;
}

.rules-box ul {
    text-align: left;
    line-height: 1.6;
    list-style: disc;
}


.button-container {
    margin-top: 30px;
}

.btn, #reveal-btn, #next-btn {
    background-color: #ffc107;
    color: #0b0c3a;
    border: none;
    border-radius: 13px;
    padding: 15px 30px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s;
    margin: 10px;
    font-weight: bold;
}


#start-screen .btn, #rules-screen .btn {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); 
    background-color: #ffc107;
}

#start-screen .btn:hover, #rules-screen .btn:hover {
    background-color: #ffda6a;
    transform: scale(1.05);
    
    box-shadow: 0 0 15px #ffc107, 0 0 40px rgba(255, 193, 7, 0.8);
}


#reveal-btn:hover, #next-btn:hover {
    background-color: #ffda6a;
    transform: scale(1.05);
}


/* --- PANTALLA DE JUEGO (MODIFICADA) --- */
#game-screen {
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 50px;
    
    /* ⭐ MODIFICACIÓN: Imagen de fondo para la sección de juego */
    background-image: url('images/fondo.png'); /* ¡CAMBIA ESTA RUTA! */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    /* Oscurece la imagen de fondo para mejor legibilidad del texto */
    background-color: #0b0c3a62; 
    background-blend-mode: overlay; /* Combina la imagen con el color base, oscureciéndola */
}


#rounds-container {
    
    transition: transform 0.4s ease-in-out, width 0.4s ease-in-out; 
    
    overflow: visible; 
    
    
    background-color: rgba(11, 12, 58, 0.8);
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #5a5ac7;
    width: 250px;
    max-height: 80vh;
    overflow-y: auto;
}

#rounds-container.minimized {
 
    transform: translateX(-280px); 
}


#rounds-container.minimized #rounds-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out; 
}


#toggle-rounds-btn {
    padding: 8px 15px; 
    font-size: 0.9em;
    margin-bottom: 15px;
    background-color: #348cff; 
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 5px rgba(52, 140, 255, 0.5);
    transition: background-color 0.3s;
    display: block; 
}

#toggle-rounds-btn:hover {
    background-color: #5a9fff;
}


#rounds-content {
    transition: opacity 0.3s ease-in-out;
}

#rounds-content h2 {
    margin-top: 0;
}



#rounds-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#rounds-list li {
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 8px;
    background-color: #1a1a5c;
    display: flex;
    justify-content: space-between;
    transition: background-color 0.3s;
}

#rounds-list li.current-round {
    background-color: #ffa500;
    color: #0b0c3a;
    font-weight: bold;
}


.game-container {
    width: 60%;
    max-width: 800px;
    background-color: rgba(26, 26, 92, 0.7); 
    backdrop-filter: blur(5px); 
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.1); 
    border: 1px solid rgba(0, 255, 255, 0.2); 
    text-align: center;
}

#question-container, .answer-options, #controls {
    margin-bottom: 20px;
}

#question {
    font-size: 1.5em;
    padding: 15px;
    background-color: #2c2c8d;
    border-radius: 10px;
}

.answer-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.answer-btn {
    background-color: #2c2c8d;
    color: white;
    border: 2px solid #5a5ac7;
    border-radius: 10px;
    padding: 15px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s; 
}

.answer-btn:hover {
    background-color: #3e3e9e;
}

.answer-btn.selected {
    background-color: #ffa500;
    border-color: #ffc966;
    animation: pulse 0.5s infinite alternate; 
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.8);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
    }
    100% {
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(255, 165, 0, 1);
    }
}



.answer-btn.correct {
    background-color: #28a745;
    border-color: #72d68b;
}

.answer-btn.wrong {
    background-color: #dc3545;
    border-color: #f58c97;
}

#next-btn {
    display: none; 
}


#wildcards-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.wildcard-btn {
    background-color: #2c2c8d;
    color: white;
    border: 2px solid #5a5ac7;
    border-radius: 50%; 
    width: 80px;
    height: 80px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.5s ease-out; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.wildcard-btn:hover {
    background-color: #3e3e9e;
    border-color: #ffc107;
}

.wildcard-btn.used {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5) rotate(90deg); 
}


#audience-poll {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 120px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #5a5ac7;
    border-radius: 10px;
}

.poll-bar {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffc107;
}

.poll-percentage {
    background-color: #28a745;
    width: 100%;
    transition: height 0.5s ease-out;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 0.9em;
    padding-bottom: 5px;
}

#phone-timer {
    font-size: 2em;
    font-weight: bold;
    color: #ffc107;
    margin-bottom: 20px;
}

.timer-urgent {
    color: #dc3545; 
    animation: blink 0.5s steps(1, start) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}


.restart-btn-fail {
    background-color: #dc3545; 
    color: white;
    padding: 10px 20px;
    border: 2px solid #a71d2a;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.restart-btn-fail:hover {
    background-color: #a71d2a;
}

.back-to-start-fail-btn {
    background-color: #007bff; 
    color: white;
    padding: 10px 20px;
    border: 2px solid #0056b3;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    margin-left: 10px; 
    transition: background-color 0.3s;
}

.back-to-start-fail-btn:hover {
    background-color: #0056b3;
}


/* --- PANTALLA DE VICTORIA --- */
#win-screen {
    
    background-color: #000000; 
    background-image: radial-gradient(circle, #0b0c3a 1px, transparent 0); 
    background-size: 40px 40px; 
    animation: background-pulse 4s infinite alternate;
    position: relative; 
}


@keyframes background-pulse {
    0% {
        box-shadow: inset 0 0 50px rgba(0, 174, 255, 0.2); 
    }
    100% {
        box-shadow: inset 0 0 150px rgba(140, 0, 255, 0.82); 
    }
}

#win-screen h1 {
    
    font-size: 5em !important; 
    text-shadow: 0 0 20px #8f05ff, 
                0 0 40px #ff00c8, 
                0 0 60px #00a2ff; 
    animation: neon-flicker 1.5s infinite alternate; 
    font-weight: 900;
}

@keyframes neon-flicker {
    0%, 100% {
        text-shadow: 0 0 10px #07daff, 0 0 20px #b700ff;
    }
    50% {
        text-shadow: 0 0 5px #fff, 0 0 15px #0077ff;
    }
}

#final-score-display {
    color: #ffd700; 
    font-weight: bold;
    font-size: 2em !important; 
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.5), 
                0 0 10px rgba(255, 215, 0, 0.8);
    opacity: 0; 
    transition: opacity 0.8s ease-in;
}

#final-score-display.visible {
    opacity: 1;
}

#rotating-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px; 
    height: 300px;
    transform: translate(-50%, -50%); 
    border-radius: 50%;
    box-shadow: 0 0 30px #00a2ff, inset 0 0 30px #ff00c8;
    z-index: 5; 
    border: 5px solid transparent; 
    background-image: linear-gradient(#000000, #000000), 
                        linear-gradient(to right, #00a2ff, #ff00c8);
    background-origin: border-box;
    background-clip: content-box, border-box;
    

    animation: spin 8s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

#fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    overflow: hidden;
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
}

.star {
    position: absolute;
    border-radius: 50%;
    background-color: white; 
    box-shadow: 0 0 5px #fff, 0 0 10px #ff00c8, 0 0 15px #00a2ff;
}

.star:nth-child(1) { top: 10%; left: 80%; width: 2px; height: 2px; animation: twinkle 3s infinite alternate; }
.star:nth-child(2) { top: 35%; left: 15%; width: 3px; height: 3px; animation: twinkle 4.5s infinite alternate; animation-delay: 0.5s; }
.star:nth-child(3) { top: 60%; left: 90%; width: 1px; height: 1px; animation: twinkle 3.8s infinite alternate; animation-delay: 1s; }
.star:nth-child(4) { top: 85%; left: 5%; width: 4px; height: 4px; animation: twinkle 5s infinite alternate; animation-delay: 1.5s; }
.star:nth-child(5) { top: 5%; left: 40%; width: 2px; height: 2px; animation: twinkle 3.2s infinite alternate; animation-delay: 2s; }
.star:nth-child(6) { top: 70%; left: 75%; width: 3px; height: 3px; animation: twinkle 4s infinite alternate; animation-delay: 2.5s; }
.star:nth-child(7) { top: 20%; left: 5%; width: 1px; height: 1px; animation: twinkle 3.6s infinite alternate; animation-delay: 1.2s; }
.star:nth-child(8) { top: 55%; left: 25%; width: 2px; height: 2px; animation: twinkle 4.8s infinite alternate; animation-delay: 0.8s; }
.star:nth-child(9) { top: 90%; left: 60%; width: 3px; height: 3px; animation: twinkle 3.4s infinite alternate; animation-delay: 0.1s; }
.star:nth-child(10) { top: 15%; left: 60%; width: 2px; height: 2px; animation: twinkle 4.2s infinite alternate; animation-delay: 1.8s; }

.star:nth-child(11) { top: 45%; left: 85%; width: 1px; height: 1px; animation: twinkle 3.1s infinite alternate; animation-delay: 0.3s; }
.star:nth-child(12) { top: 75%; left: 10%; width: 2px; height: 2px; animation: twinkle 5.5s infinite alternate; animation-delay: 1.9s; }
.star:nth-child(13) { top: 25%; left: 95%; width: 3px; height: 3px; animation: twinkle 3.7s infinite alternate; animation-delay: 0.7s; }
.star:nth-child(14) { top: 80%; left: 40%; width: 1px; height: 1px; animation: twinkle 4.9s infinite alternate; animation-delay: 2.2s; }
.star:nth-child(15) { top: 50%; left: 5%; width: 2px; height: 2px; animation: twinkle 3.3s infinite alternate; animation-delay: 1.6s; }
.star:nth-child(16) { top: 5%; left: 90%; width: 3px; height: 3px; animation: twinkle 4.1s infinite alternate; animation-delay: 0.6s; }
.star:nth-child(17) { top: 95%; left: 20%; width: 1px; height: 1px; animation: twinkle 3.9s infinite alternate; animation-delay: 2.8s; }
.star:nth-child(18) { top: 65%; left: 50%; width: 2px; height: 2px; animation: twinkle 4.7s infinite alternate; animation-delay: 0.4s; }
.star:nth-child(19) { top: 30%; left: 70%; width: 3px; height: 3px; animation: twinkle 3.5s infinite alternate; animation-delay: 1.4s; }
.star:nth-child(20) { top: 70%; left: 30%; width: 1px; height: 1px; animation: twinkle 5.1s infinite alternate; animation-delay: 2.1s; }



#win-title {
    white-space: nowrap; 
    overflow: hidden; 
    width: 0; 
    border-right: 0.15em solid white; 
    
}

#win-title.typewriter-anim {

    width: 100%; 
    animation: 
        typewriter 2.5s steps(13) forwards, 
        blink-cursor 0.75s step-end infinite;
}

@keyframes typewriter {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-cursor {
    from, to { border-color: transparent }
    50% { border-color: white }
}


#footer-copyright {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 0; 
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7); 
    color: #888; 
    font-size: 0.8em;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 255, 255, 0.1); 
}

#footer-copyright p {
    margin: 0;
}


/* --- MEDIA QUERIES PARA RESPONSIVIDAD --- */
@media (max-width: 800px) {

    h1 {
        font-size: 2.2em; 
    }
    
    .rules-box {
        width: 90%; 
        padding: 20px;
    }

    #game-screen {
        flex-direction: column; 
        align-items: center;      
        padding-top: 20px;
        height: auto;        
    }

    #rounds-container {
        width: 90%; 
        max-height: 25vh; 
        order: -1; 
        margin-bottom: 20px;
        transform: none !important; 
        overflow-y: auto; 
    }
    
 
    #rounds-container.minimized #rounds-content {
        display: none;
        opacity: 1; 
        pointer-events: auto; 
    }

    #rounds-container.minimized {
        max-height: fit-content; 
        overflow-y: hidden; 
        width: 100%; 
    }
 
    .game-container {
        width: 90%; 
        max-width: none; 
        padding: 15px;
        max-height: 60vh; 
        overflow-y: auto; 
    }
    
    .answer-options {
        grid-template-columns: 1fr; 
        gap: 10px;
    }

    #wildcards-container {
        gap: 10px;
        flex-wrap: wrap; 
    }
    
    .wildcard-btn {
        width: 60px; 
        height: 60px;
        font-size: 0.7em;
    }

    #win-screen h1 {
        font-size: 3em !important;
    }
    
    #footer-copyright {
        font-size: 0.9em; 
        padding: 6px 0; 
    }
    
    /* Ajustes específicos para la pantalla de reglas en móviles */
    #rules-screen .screen-content {
        max-width: 95%; /* Da más espacio en los bordes para el contenido de las reglas */
        padding: 15px;
        font-size: 0.9em; /* Reduce el tamaño del texto si es necesario en móviles */
    }
}