/* QUIZ INTERACTIVO OVIEDO - VERSIÓN TÓTEM 2.2
   Resolución nativa: 1080x1920
   Skyline: Controlado vía Elementor (.skyline-img)
*/

/* --- 0. MODO KIOSCO (Bloqueo Total de Scroll) --- */
body.page-id-194 {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}

/* --- 1. CONTENEDOR PRINCIPAL (Fullscreen Fixed) --- */
#quiz-stand {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100;
    background: transparent !important; /* IMPORTANTE: Transparencia total */
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 40px;
    pointer-events: none; /* Dejar pasar clicks al fondo si no tocas botones */
}

/* Permitir interacción solo en elementos del juego */
.quiz-header, .quiz-body-center, .header-top, .aviso-tiempo {
    pointer-events: auto;
}

/* --- 2. HEADER (Pregunta) --- */
.quiz-header {
    position: relative;
    margin-top: 250px;
    text-align: center;
    width: 100%;
    z-index: 10;
}

.quiz-header h2 {
    font-size: 3.2rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
    margin: 0 auto 30px;
}

/* --- 3. TIMER CIRCULAR --- */
.timer-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-fondo {
    fill: rgba(0, 0, 0, 0.3);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 8;
}

.timer-progreso {
    fill: none;
    stroke: #4caf50;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

.timer-progreso.timer-urgente { stroke: #ff3b30; }

.timer-texto {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffffff;
    z-index: 11;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* --- 4. ZONA CENTRAL (Respuestas) --- */
.quiz-body-center {
    flex-grow: 0;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 20;
    padding-bottom: 400px;
}

.respuestas {
    width: 100%;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Botones */
.boton-respuesta {
    background: #ffffff;
    color: #0B5288;
    border: 4px solid #fff;
    padding: 35px 40px;
    font-size: 2.2rem;
    border-radius: 100px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s ease, background-color 0.2s, color 0.2s;
    text-align: center;
    line-height: 1.1;
    white-space: normal;
}

.boton-respuesta:active { transform: scale(0.96); }

.boton-respuesta.correcta { background: #4caf50 !important; color: #fff !important; border-color: #4caf50 !important; }
.boton-respuesta.incorrecta { background: #d32f2f !important; color: #fff !important; border-color: #d32f2f !important; }
.boton-respuesta.correcta-highlight { background: #81c784 !important; color: #fff !important; }

/* --- 5. INDICADORES INFERIORES --- */
.header-top {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    text-align: center;



    backdrop-filter: blur(10px);
}

.pregunta-count {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 2px;
}

.puntos-indicador {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.punto {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
}

.punto.activo { background: #fff; transform: scale(1.2); box-shadow: 0 0 15px rgba(255,255,255,0.8); }
.punto.punto-correcta { background: #4caf50 !important; border-color: #4caf50; }
.punto.punto-incorrecta { background: #d32f2f !important; border-color: #d32f2f; }

/* --- 6. SKYLINE ELEMENTOR (Ajuste de Posición) --- */
/* Esto controla la imagen que pusiste en Elementor con clase 'skyline-img' */
.skyline-img {
    position: absolute !important;
    bottom: -200px !important; /* LA BAJAMOS AQUÍ */
    left: 0 !important;
    width: 100% !important;
    z-index: 1 !important; /* Detrás del juego */
    pointer-events: none;
}

.skyline-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 7. MODALES --- */
.aviso-tiempo {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.aviso-contenido {
    background: #ffffff;
    width: 85%;
    max-width: 800px;
    padding: 80px 40px;
    border-radius: 40px;
    text-align: center;
    border: 10px solid #0B5288;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    color: #333;
}

/* Animaciones */
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
.fade-out { animation: fadeOut 0.4s ease-in forwards; }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } }