/* ==========================================================================
   0. IMPORTACIÓN DE FUENTES & RESET
   ========================================================================== */
/* Fuente divertida para títulos (Luckiest Guy) y legible para textos (Montserrat) */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Montserrat:wght@400;600;800&display=swap');

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

/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN
   ========================================================================== */
:root {
    /* Paleta "Te Vivo Imbabura" */
    --color-bosque-profundo: #2E7D32;
    --color-bosque-claro: #81C784;
    --color-tierra-oscura: #4E342E;
    --color-tierra-clara: #8D6E63;
    --color-arena: #F1F8E9;
    --color-blanco-cristal: rgba(255, 255, 255, 0.95);
    --color-oro: #FFD700;
    --color-accent: #FF7043; /* Naranja para llamadas a la acción */

    /* Configuración UI */
    --radio-borde: 16px;
    --sombra-fuerte: 0 10px 30px rgba(0, 0, 0, 0.4);
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Tipografías */
    --fuente-titulo: 'Luckiest Guy', cursive;
    --fuente-principal: 'Montserrat', sans-serif;

    /* Capas (Z-Index) */
    --z-fondo: 1;
    --z-ui: 100;
    --z-header: 3000; /* Header siempre visible */
    --z-modal: 4000;
}

/* ==========================================================================
   2. ESTILOS GENERALES Y SCROLLBAR
   ========================================================================== */
html, body {
    height: auto;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background-color: var(--color-arena);
    /* Asegúrate de que la ruta sea correcta desde tu CSS */
    background-image: url('../assets/imagenes/generales/portada_tvi.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--color-tierra-oscura);
    font-family: var(--fuente-principal);
    display: flex;
    flex-direction: column;
}

/* --- SCROLLBAR PERSONALIZADO (Estilo Madera/Naturaleza) --- */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #3E2723; /* Fondo oscuro */
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-bosque-profundo); /* Barra verde */
    border-radius: 6px;
    border: 2px solid #3E2723;
}

/* ==========================================================================
   3. HEADER (BANNER SIEMPRE CENTRADO Y PERFECTO)
   ========================================================================== */
header {
    /* Altura automática: La madera crece si el banner baja */
    height: auto; 
    min-height: 70px;
    width: 100%;
    
    /* Fondo Madera */
    background: linear-gradient(180deg, #5D4037 0%, #3E2723 100%);
    
    /* Borde 3D */
    border-bottom: 5px solid #281815; 
    border-top: 1px solid #8D6E63;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
    
    /* LAYOUT FLEXIBLE */
    display: flex;
    flex-wrap: wrap; /* Permite bajar elementos si falta espacio */
    align-items: center;
    justify-content: space-between; /* Distribuye Izq y Der a los extremos */
    
    padding: 5px 15px; 
    box-sizing: border-box;
    
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* --- ZONAS (CONFIGURACIÓN GENERAL) --- */
/* --- ZONAS (CONFIGURACIÓN GENERAL) --- */
.zona-logo {
    display: flex;
    align-items: center;
    height: 50px; /* Altura base PC */
    margin-left: 30px; /* 🔥 Agrega el margen aquí (puedes subir o bajar este número) */
}
/* IZQUIERDA: Logos UNESCO/ITCA */
/* IZQUIERDA: Logos UNESCO/ITCA */
.zona-logo.izquierda {
    flex: 1; 
    justify-content: flex-start; 
    gap: 15px; /* 🔥 Ajustado: Antes era 30px. Ahora están más justos. */
    order: 1;
    display: flex; 
}

/* 🎨 EFECTO PARA VOLVER LOS LOGOS BLANCOS */
.zona-logo.izquierda img {
    filter: brightness(0) invert(1);
    
    /* 🔥 Ajustes de tamaño para equilibrarlos */
    height: 32px; /* Antes era 40px. Un poco más pequeños. */
    max-width: 110px; /* NUEVO: Si un logo es muy ancho, esto evita que se vea gigante al lado de los otros. */
    
    width: auto;
    object-fit: contain;
    opacity: 0.9; 
}
/* DERECHA: Botones */
.zona-logo.derecha {
    flex: 1; /* Toma mismo espacio que la izquierda para equilibrar */
    justify-content: flex-end; /* Alineado a la derecha */
    gap: 10px;
    order: 3; /* En PC va al final */
}

/* CENTRO: Banner "Te Vivo Imbabura" */
.zona-logo.centro {
    flex: 2; /* En PC es el más ancho */
    justify-content: center; /* CENTRADO PERFECTO */
    order: 2; /* En PC va en medio */
}

/* --- IMÁGENES Y BOTONES --- */
.zona-logo img {
    height: 100%; 
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
    transition: transform 0.2s;
    cursor: pointer;
}

/* Banner un poco más grande en PC para lucirse */
.zona-logo.centro img { height: 110%; }
.zona-logo img:hover { transform: scale(1.1); }

/* ==========================================================================
   📱 MODO RESPONSIVE (TABLETS Y MÓVILES - APILADO Y CENTRADO)
   ========================================================================== */
/* Aumentamos a 992px para que se arregle antes de que se amontone */
@media (max-width: 992px) {
    
    header {
        flex-direction: column; 
        align-items: center; /* Centra todo el bloque transversalmente */
        height: auto !important; 
        padding: 15px 10px; 
        gap: 15px; 
    }

    /* Reseteamos todas las zonas para que no peleen por el ancho */
    .zona-logo {
        flex: unset; 
        width: 100%;
        height: auto !important; 
        order: unset; 
    }

    /* 1. FILA 1: LOGOS (Forzamos centrado) */
    .zona-logo.izquierda { 
        order: 1; 
        justify-content: center !important; /* Anula el flex-start de PC */
        gap: 25px !important;
    }
    
    .zona-logo.izquierda img {
        height: 35px !important; 
        width: auto;
    }

    /* 2. FILA 2: BANNER MADERA (Forzamos centrado) */
    .zona-logo.centro { 
        order: 2; 
        justify-content: center !important; 
        margin-top: 5px; 
    }

    .zona-logo.centro img { 
        height: auto !important; 
        width: 90%; /* Un poco más ancho para que luzca bien en tablet */
        max-width: 350px; 
    }

    /* 3. FILA 3: BOTONES (Forzamos centrado) */
    .zona-logo.derecha { 
        order: 3; 
        justify-content: center !important; /* Anula el flex-end de PC */
        flex-wrap: wrap; /* Si hay muchos botones, bajan a otra línea sin romper nada */
    }

    /* 4. BOTONES (Mantenemos el formato circular para ahorrar espacio) */
    .btn-header-texto {
        width: 45px;
        height: 45px;
        padding: 0;
        justify-content: center;
        border-radius: 50%; 
        gap: 0;
        background-color: rgba(33, 33, 33, 0.95);
    }
    
    .btn-header-texto .texto-btn {
        display: none;
    }
}


/* ======================================================= */
/* 🏷️ BOTONES HEADER (ESTILO DARK GLASS / HUD)             */
/* ======================================================= */
.btn-header-texto {
    /* 1. FORMA Y TAMAÑO */
    border-radius: 50px; /* Cápsula perfecta */
    padding: 0 18px; 
    height: 42px; 
    
    /* 2. COLOR (Negro suave semitransparente) */
    /* Esto asegura que se lea bien sobre cualquier parte del mapa */
    background-color: rgba(33, 33, 33, 0.85);
    backdrop-filter: blur(4px); /* Efecto borroso detrás */
    
    /* 3. BORDE FINO */
    /* Un borde gris muy sutil para definirlo */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 4. TEXTO */
    color: #ffffff;      /* Blanco puro */
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;    /* Letra fina y elegante */
    
    /* Alineación */
    display: flex;
    align-items: center;
    gap: 10px; 
    
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Sombra elegante */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Estilo del texto */
.btn-header-texto .texto-btn {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px; /* Espaciado moderno */
}

/* 🔥 EFECTO HOVER (AL PASAR EL MOUSE) */
.btn-header-texto:hover {
    /* Se "enciende" con el color de Imbabura */
    background-color: #2e7d32; 
    border-color: #43a047;
    
    /* Brillo externo */
    box-shadow: 0 0 15px rgba(46, 125, 50, 0.6);
    
    transform: translateY(-2px);
}

/* 🔥 EFECTO ACTIVE (CLICK) */
.btn-header-texto:active {
    transform: scale(0.95);
    background-color: #1b5e20;
}

/* 📱 CELULARES (Responsive) */
@media (max-width: 768px) {
    .btn-header-texto {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%; /* Círculo */
        gap: 0;
        background-color: rgba(33, 33, 33, 0.95); /* Más oscuro en celular */
    }
    
    /* Ocultamos texto */
    .btn-header-texto .texto-btn {
        display: none;
    }
}
/* ======================================================= */
/* 🧭 ESTILOS DEL MODAL DE AYUDA / CÓMO JUGAR              */
/* ======================================================= */

/* Título */
.titulo-guia {
    color: #2e7d32;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

/* Contenedor Principal */
.guia-contenido {
    text-align: left;
    color: #5d4037;
    padding: 0 5px;
}

.guia-intro {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 25px;
}

/* Lista de Pasos */
.guia-lista-pasos {
    list-style: none;
    padding: 0;
    font-size: 0.95rem;
}

.guia-paso {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.paso-icono {
    font-size: 1.2rem;
    margin-right: 12px;
    min-width: 25px; /* Para alinear si el texto es largo */
}

.paso-info strong {
    color: #2e7d32;
    display: block;
    margin-bottom: 2px;
}

.paso-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #6D4C41;
}

/* Link al Documento */
.guia-footer-link {
    text-align: center;
    margin-top: 30px;
    border-top: 1px dashed #BCAAA4;
    padding-top: 15px;
}

.btn-ver-reglas {
    display: inline-block;
    text-decoration: none;
    background-color: #EFEBE9;
    color: #5D4037;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    border: 1px solid #D7CCC8;
    transition: all 0.3s ease;
}

.btn-ver-reglas:hover {
    background-color: #D7CCC8;
    transform: scale(1.02);
}
/* ==========================================================================
   4. LAYOUT PRINCIPAL (GRID RESPONSIVE SEGURO)
   ========================================================================== */
main {
    flex-grow: 1;
    
    /* 🔥 AQUÍ ESTÁ EL CAMBIO: */
    /* Antes tenías: padding: 20px; (eso daba 20px arriba) */
    /* Ahora usamos: Arriba 5px, Derecha 20px, Abajo 20px, Izquierda 20px */
    padding: 5px 20px 20px 20px; 
    
    /* Aseguramos que no haya margen externo empujando */
    margin-top: 0; 
    
    display: grid;
    /* Grid Desktop */
    grid-template-columns: 280px 1fr 280px; 
    grid-template-rows: auto; 
    grid-template-areas: "left center right";
    gap: 20px;
    align-items: start;
}
/* 🔥 CLAVE: Evita que el contenido reviente las columnas del Grid */
main > * {
    min-width: 0; /* Obliga al contenido a respetara el ancho de la columna */
}

/* --- RESPONSIVE: TABLETS (Modo Vertical) --- */
@media (max-width: 1024px) {
    main {
        grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
        grid-template-rows: auto auto;
        grid-template-areas: 
            "center center"  /* El tablero ocupa todo el ancho arriba */
            "left right";    /* Los paneles abajo compartiendo espacio */
    }
}

/* --- RESPONSIVE: MÓVILES --- */
@media (max-width: 768px) {
    header { height: 60px; padding: 0 10px; }
    .zona-logo.centro { flex: 3; }
    .zona-logo.izquierda, .zona-logo.derecha { flex: 1; }
    
    main {
        grid-template-columns: 1fr; /* Una sola columna */
        grid-template-rows: auto;
        grid-template-areas: 
            "center"  /* Primero lo importante (Juego) */
            "left"    /* Luego inventario/perfil */
            "right";  /* Al final acciones */
        padding: 10px;
        gap: 30px; /* Más espacio entre paneles en móvil */
    }
}

/* =========================================================================================== */
/* 🎵 BOTÓN AUDIO             */
/* ========================================= */
#btn-musica {
    transition: all 0.4s ease; /* Hace que el cambio de color sea suave */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid transparent;
}

#btn-musica:hover {
    transform: translateY(-2px); /* Pequeño salto al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
/* ==========================================================================
   5. PANELES Y CONTENEDORES (CONTENIDO SEGURO)
   ========================================================================== */
/* ======================================================= */
/* 🪵 PANELES LATERALES (COMPACTOS)                        */
/* ======================================================= */
.panel {
    /* 1. Fondo Cristal */
    background: var(--color-blanco-cristal, rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* 2. ESTILO MADERA 3D */
    border: 4px solid #5D4037; 
    border-radius: 20px;       
    
    /* Sombra 3D Completa */
    box-shadow: 
        inset 0 0 20px rgba(93, 64, 55, 0.2), 
        0 8px 0 #3E2723, 
        0 15px 30px rgba(0,0,0,0.4);
    
    /* 3. PADDING MÍNIMO */
    padding: 10px; 
    
    height: auto; 
    min-height: 200px;
    
    /* 4. Distribución (AQUÍ ESTÁ EL CAMBIO) */
    display: flex;
    flex-direction: column;
    
    /* 🔥 ESTO HACE LA MAGIA: */
    justify-content: flex-start; /* Empieza desde arriba (Vertical) */
    align-items: center;         /* Centrado horizontalmente */
    
    gap: 10px;
    
    /* 5. Seguridad */
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    overflow-x: hidden;
    overflow-y: auto; 
}

/* Asegura que ninguna imagen dentro de un panel se salga */
.panel img {
    max-width: 100%;
    height: auto;
}
/* =========================================
   PANEL IZQUIERDO (LEADERBOARD)
   ========================================= */

#panel-izquierdo {
    background-color: #ffffff;
    border: 4px solid #4A362A; /* Borde oscuro estilo madera/tierra */
    border-radius: 16px;
    padding: 20px 15px;
    width: 280px; /* Ajusta este ancho según necesites */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

#panel-izquierdo h3 {
    color: #3E2723;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* --- ESTRUCTURA FLEX PARA LAS FILAS --- */
.jugador-score-item {
    display: flex;
    justify-content: space-between; /* ✨ LA MAGIA: Separa izquierda y derecha */
    align-items: center;
    padding: 8px 5px;
}

/* --- ENCABEZADO ("Nombre Puntaje") --- */
#panel-izquierdo > .jugador-score-item {
    color: #888888;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #eeeeee; /* Línea separadora sutil */
    margin-bottom: 10px;
    padding-bottom: 8px;
}

/* =========================================
   CLASES PARA EL JS (Los datos inyectados)
   ========================================= */

/* Para el número o la medalla (#4, 🥇) */
.score-rango {
    width: 25px; /* Ancho fijo para que todos los nombres empiecen igual */
    text-align: left;
    font-weight: bold;
    color: #757575;
}

/* Para el nombre del jugador */
.score-nombre {
    flex: 1; /* Toma todo el espacio sobrante del centro */
    text-align: left;
    padding-left: 10px;
    font-weight: 700;
    color: #6D4C41; 
    text-transform: uppercase;
    /* Si un nombre es gigante, le pone "..." en vez de dañar la tabla */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* Para colorear a los Top 3 (opcional) */
.score-nombre.top-tier {
    color: #D84315; /* Naranja/Óxido para los ganadores */
}

/* Para los puntos */
.score-puntos {
    font-weight: 800;
    color: #2E7D32; /* Verde Imbabura */
    text-align: right;
    white-space: nowrap; /* Impide que "pts" se caiga a la línea de abajo */
}
#panel-izquierdo { grid-area: left; }
#panel-derecho { grid-area: right; }
/* OPCIÓN 1: Verde Fresco y Moderno */
.panel h2 {
    
    
    /* Degradado Café intenso */
    background: linear-gradient(to bottom, #5D4037, #3E2723);
    color: #ffffff; /* Blanco puro */
    
    text-align: center;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    padding: 10px 20px;
    border-radius: 12px;
    
   
    
    
    width: 100%;
    margin-bottom: 15px;
}




/* ======================================================= */
/* 🏷️ TÍTULO Y SUBTÍTULO (ESTILO DIARIO DE CAMPO)          */
/* ======================================================= */
#panel-derecho h3 {
    /* SIN FONDO DE COLOR (Mucho más limpio) */
    background: transparent;
    
    /* Color Café Oscuro (Tierra Volcánica) */
    color: #4e342e;
    
    margin: 0 15px; /* Un poco de margen a los lados */
    padding: 15px 0 5px 0;
    text-align: center;
    
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 800; /* Letra bien gruesa */
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* 🔥 DETALLE CLAVE: Línea punteada abajo (Parece mapa o costura) */
    border-bottom: 2px dashed #a1887f;
}

#panel-derecho small {
    /* Sin fondo, texto integrado */
    background: transparent;
    
    /* Color Café más suave */
    color: #8d6e63;
    
    display: block;
    text-align: center;
    padding: 5px 0 10px 0;
    
    font-size: 0.8rem;
    font-weight: 600;
    font-style: italic; /* Un toque elegante */
}





/* 1. EL CONTENEDOR PADRE (TABLERO CENTRAL - ESTILO MADERA) */
#tablero-central {
    /* --- Layout y Scroll (Se mantiene igual) --- */
    width: 100%;
    height: 100%;
    overflow-y: auto !important; 
    overflow-x: hidden;          
    
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 

    /* --- Fondo Cristal --- */
    background-color: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    
    /* --- 🔥 AQUÍ ESTÁ EL CAMBIO: BORDE DE MADERA 3D --- */
    
    /* 1. Borde grueso color tierra */
    border: 4px solid #5D4037; 
    
    /* 2. Esquinas redondeadas */
    border-radius: 20px;
    
    /* 3. El efecto 3D completo: */
    box-shadow: 
        inset 0 0 20px rgba(93, 64, 55, 0.2), /* Sombra interna (efecto hundido/viejo) */
        0 10px 0 #3E2723,                     /* Borde sólido inferior (Volumen 3D) */
        0 20px 40px rgba(0,0,0,0.4);          /* Sombra difusa para que flote sobre el fondo */
}
/* ==========================================================================
   6. UI DE JUEGO (BOTONES Y BARRAS)
   ========================================================================== */

/* Botón Genérico Estilo RPG */
.btn-juego {
    background: linear-gradient(to bottom, #66BB6A, #2E7D32);
    border: none;
    border-bottom: 5px solid #1B5E20; /* Efecto 3D */
    border-radius: 12px;
    color: white;
    padding: 12px 24px;
    font-family: var(--fuente-titulo);
    font-size: 1.2rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.1s;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
    width: 100%; /* Ocupa ancho disponible en paneles */
}

.btn-juego:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    border-bottom-width: 7px;
}

.btn-juego:active {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

/* Variante: Botón de Acción (Rojo/Naranja) */
.btn-juego.accion {
    background: linear-gradient(to bottom, #FF7043, #D84315);
    border-bottom-color: #BF360C;
}

/* Barra de Progreso / Experiencia */
.contenedor-barra {
    width: 100%;
    margin-top: 10px;
}

.etiqueta-barra {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.barra-fondo {
    width: 100%;
    height: 20px;
    background: #3E2723;
    border-radius: 10px;
    padding: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

.barra-progreso {
    height: 100%;
    width: 50%; /* Cambiar con JS según el juego */
    background: linear-gradient(90deg, #FFEB3B, #FFC107);
    border-radius: 8px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}


/* ======================================================= */
/* 🚀 PANTALLA JUGADORES - VERSIÓN COMPACTA UNIFICADA      */
/* ======================================================= */
#pantalla-jugadores {
    width: 100%;
    /* Ocupa el 100% del alto disponible de su contenedor padre */
    height: 100%; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    
    /* 🔥 CLAVE 1: Evita que esta capa principal haga scroll y rompa el alto */
    overflow: hidden; 
}

/* --- CONTENEDOR PRINCIPAL --- */
.panel-juego-unificado {
    width: 100%;
    max-width: 100%; 
    /* 🔥 CLAVE 2: Le decimos que intente ocupar el 100%, pero NUNCA se pase del 100% */
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column; 
    align-items: center;
    
    /* 🔥 CLAVE 3: Distribuye los elementos (cabecera, botones, pie) aprovechando el espacio 
       disponible, en lugar de empujarlos hacia abajo */
    justify-content: space-evenly; 
    
    padding: 20px; /* Padding un poco más ajustado */
    gap: 15px; /* Reducimos el gap fijo para que no fuerce el crecimiento */
    
    box-sizing: border-box;
    
    /* 🔥 CLAVE 4: "A menos que sea necesario". 
       Si el celular es minúsculo, este panel permitirá bajar con el dedo internamente, 
       sin romper el fondo del juego. */
    overflow-y: auto; 
    
    /* Oculta el scrollbar estético en algunos navegadores para que se vea más limpio */
    scrollbar-width: thin; 
}

/* --- 1. CABECERA (Tamaños reducidos) --- */
.cabecera-juego {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.emoji-flotante {
    position: absolute;
    /* 🔥 Ajuste de posición por el menor tamaño */
    top: -35px; 
    left: 50%;
    transform: translateX(-50%); 
    /* 🔥 REDUCCIÓN: Emoji más pequeño */
    font-size: 2.2rem; 
    animation: rebote 2s infinite;
}

@keyframes rebote { 
    0%, 100% { transform: translate(-50%, 0); } 
    50% { transform: translate(-50%, -8px); } 
}

.titulo-principal {
    font-family: 'Luckiest Guy', cursive;
    /* 🔥 REDUCCIÓN: Título mucho más controlado */
    font-size: clamp(1.8rem, 4vw, 2.8rem); 
    line-height: 1.1;
    color: #3E2723;
    margin: 0;
    text-transform: uppercase;
}

.resaltado { 
    color: #2E7D32; 
    text-shadow: 1px 1px 0px #fff; /* Sombra más sutil */
}

.linea-decorativa { 
    width: 60px; /* Más corta */
    height: 3px; /* Más fina */
    background: #FFC107; 
    margin: 12px auto; 
    border-radius: 2px; 
}

.subtitulo-corto {
    font-family: 'Montserrat', sans-serif;
    /* 🔥 REDUCCIÓN: Fuente más pequeña */
    font-size: 0.95rem; 
    color: #444;
    font-weight: 600;
    margin: 0;
}

/* --- 2. SELECCIÓN DE JUGADORES (Estilo Videojuego Mejorado) --- */
.bloque-control {
    width: 100%;
    text-align: center;
    padding: 10px; /* Margen de seguridad para móviles */
}

.etiqueta-control {
    font-family: 'Montserrat', sans-serif;
    color: #2E7D32; /* Un verde más acorde al tema de naturaleza/geoparque */
    font-size: clamp(1rem, 4vw, 1.2rem); /* 🔥 RESPONSIVO: Se adapta al tamaño de pantalla */
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8); /* Ligero relieve */
}

.grid-jugadores {
    display: flex;
    justify-content: center;
    gap: 15px; 
    flex-wrap: wrap; /* 🔥 RESPONSIVO: Si la pantalla es muy pequeña, los baja de línea automáticamente */
}

/* 🔥 BOTONES CON EFECTO 3D AVANZADO */
.btn-jugador {
    /* Layout en columna (Número arriba, texto abajo) */
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
    
    /* Tamaño responsivo */
    min-width: 90px;
    max-width: 120px;
    flex: 1; /* Permite que crezcan un poco para llenar el espacio */
    padding: 12px 10px; 
    
    /* Colores y texturas (Estilo App/Juego) */
    background: linear-gradient(135deg, #f1f8e9 0%, #a5d6a7 100%); /* Degradado más dinámico */
    border: 2px solid #81C784;
    border-bottom: 6px solid #2E7D32; /* Base 3D más gruesa */
    border-radius: 18px; /* Bordes un poco más suaves */
    
    /* Sombras para volumen */
    box-shadow: 
        0 6px 15px rgba(0,0,0,0.15), /* Sombra exterior */
        inset 0 2px 0 rgba(255,255,255,0.6); /* Brillo interior en la parte superior */
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animación con rebote sutil */
}

/* Efecto al pasar el mouse */
.btn-jugador:hover { 
    transform: translateY(-4px); /* Flota un poco más */
    background: linear-gradient(135deg, #ffffff 0%, #c8e6c9 100%); /* Se ilumina */
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.2), 
        inset 0 2px 0 rgba(255,255,255,0.8);
    border-color: #66BB6A;
}

/* Efecto al hacer clic (Se hunde) */
.btn-jugador:active { 
    transform: translateY(4px); /* Baja simulando presión */
    border-bottom-width: 2px; /* Se aplasta la base 3D */
    margin-bottom: 4px; /* Evita que el layout salte al cambiar el borde */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.1),
        inset 0 3px 5px rgba(0,0,0,0.1); /* Sombra interna para dar profundidad */
}

/* --- TIPOGRAFÍA DENTRO DEL BOTÓN --- */

/* Estilo para el número */
.texto-jugador {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(2.5rem, 8vw, 3rem); /* 🔥 RESPONSIVO: El número crece/achica según pantalla */
    color: #1B5E20;
    line-height: 1; 
    /* Efecto "Sticker" en el número */
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0px  3px 5px rgba(0,0,0,0.2); 
}

/* Estilo para la palabra (Jugador/Jugadores) */
.subtitulo-corto {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #1B5E20;
    text-transform: uppercase;
    margin-top: 6px; 
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.5); /* Fondo semitransparente para que se lea mejor */
    padding: 2px 8px;
    border-radius: 10px;
}

/* --- 3. PIE DE OPCIONES (Compacto) --- */
.pie-opciones {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.08); 
    padding-top: 20px; /* Menos padding */
    gap: 15px;
}
/* --- Botón Perfil Discreto (Acción Secundaria) --- */
.btn-perfil {
    background: transparent; /* Sin fondo sólido */
    color: #2E7D32; /* Texto verde oscuro para mantener la temática */
    border: 1.5px solid #a5d6a7; /* Borde fino y sutil */
    border-radius: 25px;
    padding: 8px 18px; /* Un poco más compacto */
    font-size: 0.9rem; 
    font-family: inherit;
    font-weight: 600; /* Menos grueso que el anterior */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: none; /* Quitamos la sombra pesada */
    transition: all 0.2s ease;
}

.icono-perfil { 
    font-size: 1.1rem; 
    opacity: 0.8; /* Lo hace ver un poco más suave */
}

/* Efecto muy suave al pasar el mouse */
.btn-perfil:hover {
    background: rgba(46, 125, 50, 0.08); /* Un fondo verde súper transparente */
    border-color: #81C784;
    transform: translateY(-1px); /* Un levante casi imperceptible */
}

/* Efecto al hacer clic */
.btn-perfil:active {
    transform: translateY(0);
    background: rgba(46, 125, 50, 0.15); /* Se oscurece apenitas el fondo */
}/* --- TARJETA APP INFORMATIVA (ESTILO TEXTO PLANO) --- */
.tarjeta-app-estatica {
    background: transparent; /* 🔥 Eliminamos el fondo por completo */
    padding: 10px 0; /* Reducimos el padding lateral ya que no hay caja */
    display: flex;
    align-items: center;
    gap: 15px;
    border: none; /* 🔥 Quitamos todos los bordes */
    box-shadow: none; 
    
    /* Comportamiento de texto estático */
    cursor: default; 
    pointer-events: none; /* Asegura que no reaccione al ratón */
}

/* El logo se verá como un icono informativo que acompaña al texto */
.img-qr-estatica { 
    width: 55px; 
    height: 55px; 
    border-radius: 10px; 
    object-fit: cover;
    border: 1px solid #ddd; /* Le dejamos un borde sutil solo a la imagen para que resalte */
    filter: grayscale(10%); /* Un toque sobrio */
}

/* Estilos tipográficos del texto */
.texto-qr-estatico { 
    display: flex; 
    flex-direction: column; 
    text-align: left; 
}

.texto-qr-estatico strong { 
    color: #1B5E20; 
    font-size: 0.95rem; 
    margin-bottom: 2px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.texto-qr-estatico span { 
    color: #555; 
    font-size: 0.75rem; 
    font-weight: 500; 
    line-height: 1.3;
}

/* Color naranja para resaltar a Cati */
.texto-qr-estatico .destaque-cati-estatico {
    color: #E65100; 
    font-weight: 700;
}
/* ======================================================= */
/* 📱 AJUSTES MÓVIL (PANTALLAS PEQUEÑAS)                   */
/* ======================================================= */
@media (max-width: 680px) { /* Punto de quiebre ajustado */
    .pie-opciones {
        flex-direction: column; 
        justify-content: center;
        gap: 20px;
    }
    .btn-perfil { width: 100%; justify-content: center; }
    .area-qr-mini { width: 100%; justify-content: center; }
}
/*===================================================
   4. PANTALLA DE REGISTRO (OPTIMIZADA Y VISIBLE)
   ========================================================================== */
#pantalla-registro {
    width: 100%;
    /* Si hay mucho contenido, la página crece */
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}


#pantalla-registro .subtitulo {
    font-weight: bold;
    color: #555;
    margin-bottom: 25px;
}

/* --- CONTENEDOR DE TARJETAS (GRID INTELIGENTE) --- */
#contenedor-inputs {
    display: grid;
    /* CAMBIO: Bajamos de 320px a 260px para que quepa en cualquier celular */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* --- TARJETA DE JUGADOR --- */
.ficha-jugador {
    background-color: #ffffff;
    border: 2px solid var(--color-tierra-clara);
    border-radius: 15px;
    padding: 20px;
    
    /* Sombra para resaltar */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    
    /* Asegurar que el contenido se vea */
    color: #333;
}

.ficha-jugador:hover {
    border-color: var(--color-bosque-profundo);
    transform: translateY(-5px);
}

.titulo-ficha {
    color: var(--color-bosque-profundo);
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Estado cuando la ficha ya fue seleccionada por otro jugador */
.btn-ficha:disabled {
    opacity: 0.4;
    filter: grayscale(1); /* Se ve a blanco y negro */
    cursor: not-allowed;
    border: 2px solid #ccc !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Efecto de selección actual */
.btn-ficha.seleccionada {
    border-color: var(--color-bosque-profundo) !important;
    background-color: #e8f5e9;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(46, 125, 50, 0.4);
}
/* Inputs Visibles */
.input-imbabura {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-size: 1rem;
    color: #000;
}
.input-imbabura::placeholder { color: #666; opacity: 1; }
.input-imbabura:focus {
    background-color: #fff;
    border-color: var(--color-bosque-profundo);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}

/* Grupo de Búsqueda */
.grupo-busqueda {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* Grid interno del formulario (Nombre, edad, etc) */
.grid-formulario {
    display: grid;
    grid-template-columns: 1fr; /* Una columna dentro de la tarjeta */
    gap: 10px;
}

/* Botones al pie de la página */
.footer-botones {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 30px; /* Espacio al final de la página */
}

/* Botones Generales */
.btn-imbabura {
    background: var(--color-bosque-profundo);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
}
.btn-imbabura.secundario {
    background: white;
    border: 2px solid var(--color-tierra-clara);
    color: var(--color-tierra-clara);
}



/* ==========================================================================
   5. RESPONSIVE (MÓVIL)
   ========================================================================== */
@media (max-width: 1000px) {
    main {
        /* Apilamos todo en una columna */
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Orden para móvil: Mapa/Registro primero */
    #tablero-central { order: 2; }
    #panel-izquierdo { order: 3; }
    #panel-derecho { order: 1; }
    
    /* El mapa se adapta a la altura de pantalla en móvil */
    #tablero-central {
        min-height: 60vh;
    }
}

/* ======================================================= */
/* 📜 MODAL TÉRMINOS (CORREGIDO: FONDO PERFECTO)           */
/* ======================================================= */

#modal-terminos {
    position: fixed;
    /* 🏆 CLAVE: Empieza desde el borde real de la pantalla */
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    
    /* Fondo oscuro que cubre TODO (incluso detrás del header) */
    background-color: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(5px);
    
    /* 🏆 CLAVE: Z-Index menor que el Header (3000) pero mayor que el juego (100) */
    z-index: 2500; 
    
    display: none; /* JS usa flex */
    justify-content: center;
    align-items: flex-start; /* Alineamos arriba para controlar la bajada */
    
    /* 🏆 CLAVE: Empujamos el contenido hacia abajo para que no pegue con el header */
    padding-top: 90px; 
    padding-bottom: 20px;
    
    overflow-y: auto; /* Scroll si la pantalla es pequeña */
}

#modal-terminos.mostrar {
    display: flex !important;
    animation: fadeIn 0.3s ease-out;
}

/* La Tarjeta de Papel */
#modal-terminos .contenido-modal {
    background-color: white;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    
    /* Borde superior verde institucional */
    border-top: 6px solid var(--color-bosque-profundo); 
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    
    /* Animación de entrada hacia arriba */
    animation: slideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}


/* Área de Texto con Scroll */
.scroll-terminos {
    max-height: 40vh; /* Altura controlada para que quepa en laptops */
    overflow-y: auto;
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
    text-align: left;
}

/* Botones alineados */
.grupo-botones-modal {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.grupo-botones-modal button {
    padding: 12px 30px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-weight: bold;
    transition: transform 0.2s;
}

.grupo-botones-modal button:active {
    transform: scale(0.95);
}

/* Botón Aceptar (Verde) */
#btn-aceptar-terminos {
    background-color: var(--color-bosque-profundo);
    color: white;
    box-shadow: 0 4px 0 #1b5e20;
}

/* Botón Rechazar (Blanco) */
#btn-rechazar-terminos {
    background-color: white;
    border: 2px solid #ccc;
    color: #666;
}
#btn-rechazar-terminos:hover {
    border-color: #999;
    color: #333;
}

/* Animación */
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Responsive Móvil */
@media (max-width: 600px) {
    /* En móvil bajamos un poco más el modal para asegurar espacio */
    #modal-terminos {
        padding-top: 100px; 
    }
    .grupo-botones-modal {
        flex-direction: column-reverse; /* Botones uno sobre otro */
    }
    .grupo-botones-modal button {
        width: 100%;
    }
}

/* ==========================================================================
   6. MODALES Y TOAST (Siempre encima)
   ========================================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: var(--z-modal);
    display: none; /* JS lo activa */
    justify-content: center; align-items: center;
    padding: 20px;
    overflow-y: auto; /* El modal sí puede tener scroll si es gigante */
}
.modal-contenido {
    background: white; padding: 25px; border-radius: 20px;
    width: 100%; max-width: 500px;
    margin: auto; /* Centrado en scroll */
}
.toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); color: white; padding: 15px; border-radius: 30px;
    z-index: var(--z-modal); display: none;
}
/* ======================================================= */
/* 🗺️ PANTALLA DE NIVELES - ESTILO "TE VIVO IMBABURA"      */
/* ======================================================= */

/* Fuente sugerida (opcional, si no tienes una definida) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

#pantalla-niveles {
    width: 100%;
  
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Poppins', sans-serif; /* O la fuente de tu juego */
}



/* --- GRID PRINCIPAL --- */
.grid-niveles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adaptable automáticamente */
    gap: 25px;
    width: 100%;
    justify-content: center;
}

/* --- TARJETA BASE --- */
.card-nivel {
    background: #ffffff;
    border-radius: 24px;
    padding: 25px;
    /* Eliminamos aspect-ratio fijo para que se adapte al contenido, 
       pero mantenemos una altura mínima para consistencia */
    min-height: 220px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribuye espacio: info arriba, botón abajo */
    text-align: center;
    
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Sombra suave */
    border: 2px solid transparent; /* Preparamos borde para hover */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    position: relative;
    overflow: hidden;
    background-size: cover;      /* 🌟 ESTA ES LA MAGIA */
    background-position: center; /* Centra la imagen para que se vea la mejor parte */
    background-repeat: no-repeat;
}

/* --- ESTADO: ACTIVO (JUGABLE) 🟢 --- */
.card-nivel.activo {
    cursor: pointer;
    border-color: #e8f5e9;
}

.card-nivel.activo:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.2);
    border-color: #4caf50;
}

/* Efecto de fondo sutil al pasar el mouse */
.card-nivel.activo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.card-nivel.activo:hover::before {
    opacity: 1;
}

/* --- ESTADO: BLOQUEADO 🔒 --- */
.card-nivel.bloqueado {
    background: #f5f5f5;
    cursor: not-allowed;
    filter: grayscale(0.8); /* Lo hace ver gris/apagado */
    opacity: 0.7;
    border: 1px dashed #ccc;
    box-shadow: none;
}

/* --- ELEMENTOS INTERNOS --- */

/* Badge del Número */
.nivel-numero {
   
    color: #2e7d32;
    font-weight: 800;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    margin-bottom: 15px;
   
    z-index: 1;
}

.nivel-info {
    z-index: 1;
    margin-bottom: 20px;
}

.nivel-info h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #2c3e50;
    font-weight: 700;
    line-height: 1.3;
}

.nivel-info span {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-top: 8px;
    display: block;
    font-weight: 500;
}

/* Botón de Acción ("JUGAR" o Candado) */
.nivel-accion {
    z-index: 1;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Por defecto (para activos) */
    background: #2e7d32;
    color: white;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}

.card-nivel.activo:hover .nivel-accion {
    background: #6b9c6e;
    transform: scale(1.05);
}

/* Estilo botón para bloqueado */
.card-nivel.bloqueado .nivel-accion {
    background: #cfd8dc;
    color: #78909c;
    box-shadow: none;
    font-size: 1.2rem; /* Icono del candado más grande */
    padding: 5px 15px;
}
/* ======================================================= */
/* ⛰️ ESTILOS DE NIVELES CON PALETA "TE VIVO IMBABURA"     */
/* ======================================================= */

.card-nivel.activo {
    cursor: pointer;
}

.card-nivel.activo:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-fuerte);
}



.nivel-info {
    z-index: 1;
    margin-bottom: 20px;
}

.nivel-info h3 {
    font-family: var(--fuente-titulo); /* Fuente divertida para el título */
    margin: 0;
    font-size: 1.4rem;
    font-weight: normal; /* Luckiest Guy ya es gruesa */
    letter-spacing: 1px;
    line-height: 1.2;
}

.nivel-info span {
    font-family: var(--fuente-principal);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 8px;
    display: block;
}

/* Botón 3D Base */
.nivel-accion {
    font-family: var(--fuente-principal);
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 10px 28px;
    border-radius: 50px;
    transition: all 0.1s ease;
}

.card-nivel.activo .nivel-accion:active {
    transform: translateY(5px);
    /* La sombra se reduce al presionar (se configura en cada tema) */
}

/* --- NIVEL 1: NORTE (Acción y Tierra) --- */
.card-nivel.tema-norte {
    background-color: var(--color-arena) ; 
    
    /* 🔥 AQUÍ ESTÁ EL VELO: Un degradado negro semi-transparente (0.5) SOBRE tu imagen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                      url("../assets/imagenes/fondosniveles/fondonivel1cati.png");
                      
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px; 
    width: 100%;
    display: block;
    border-radius: 15px; /* Para que los bordes se vean suaves */
}

/* ============================================================== */
/* RESTO DE TU CÓDIGO INTACTO */
/* ============================================================== */

.tema-norte .nivel-numero { 
    background-color: var(--color-tierra-oscura); 
    color: var(--color-blanco-cristal);
    border: 3px solid var(--color-blanco-cristal);
    display: flex;               
    justify-content: center;     
    align-items: center;         
    margin: 0 auto;              
    padding: 8px 40px; 
    border-radius: 30px; 
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; 
}

.tema-norte .nivel-info h3 { 
    color: var(--color-blanco-cristal); 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
}

.tema-norte .nivel-info span { 
    color: var(--color-accent); 
}

.tema-norte .nivel-accion { 
    background-color: var(--color-accent); 
    color: var(--color-blanco-cristal);
    box-shadow: 0 5px 0 var(--color-tierra-oscura); 
}

.tema-norte.activo:hover { 
    border-color: var(--color-accent); 
}

.tema-norte.activo .nivel-accion:active { 
    box-shadow: 0 0px 0 var(--color-tierra-oscura); 
    transform: translateY(5px); 
}
/* --- NIVEL 2: VALLES (Bosque y Naturaleza) --- */
.card-nivel.tema-valles {
    background-color: var(--color-arena);
    border-color: var(--color-bosque-claro);
    
    /* 🔥 EL VELO: El degradado negro semi-transparente sobre la imagen del Nivel 2 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                      url("../assets/imagenes/fondosniveles/fondonivel2cati.png");
                      
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px; 
    width: 100%;
    display: block;
    border-radius: 15px; /* Igual que el nivel 1 */
}

.tema-valles .nivel-numero { 
    background-color: var(--color-bosque-claro); 
    color: var(--color-bosque-profundo); /* Contraste verde sobre verde */
    border: 3px solid var(--color-arena);
    
    /* 🔥 Estructura copiada del Nivel 1 para que queden idénticos */
    display: flex;               
    justify-content: center;     
    align-items: center;         
    margin: 0 auto;              
    padding: 8px 40px; 
    border-radius: 30px; 
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; 
}

.tema-valles .nivel-info h3 { 
    /* Cambiado a cristal/blanco con sombra para que resalte sobre el velo oscuro */
    color: var(--color-blanco-cristal); 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
}

.tema-valles .nivel-info span { 
    color: var(--color-tierra-clara); 
}

.tema-valles .nivel-accion { 
    background-color: var(--color-bosque-profundo); 
    color: var(--color-arena);
    box-shadow: 0 5px 0 var(--color-tierra-oscura); 
}

.tema-valles.activo:hover { 
    border-color: var(--color-bosque-profundo); 
}

.tema-valles.activo .nivel-accion:active { 
    box-shadow: 0 0px 0 var(--color-tierra-oscura); 
    transform: translateY(5px); /* Movimiento de botón igual al nivel 1 */
}
/* --- NIVEL 3: AGUAS Y SABORES (Oro y Bosque) --- */
.card-nivel.tema-aguas {
    background-color: var(--color-arena);
    border-color: var(--color-oro);
    
    /* 🔥 EL VELO OSCURO: Degradado semi-transparente sobre la imagen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                      url("../assets/imagenes/fondosniveles/fondonivel3cati.png");
                      
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px; 
    width: 100%;
    display: block;
    border-radius: 15px; /* Bordes redondeados estandarizados */
}

.tema-aguas .nivel-numero { 
    background-color: var(--color-oro); 
    color: var(--color-tierra-oscura);
    border: 3px solid var(--color-blanco-cristal);
    
    /* 🔥 ESTRUCTURA ESTANDARIZADA (Igual al Nivel 1 y 2) */
    display: flex;               
    justify-content: center;     
    align-items: center;         
    margin: 0 auto;              
    padding: 8px 40px; 
    border-radius: 30px; 
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; 
}

.tema-aguas .nivel-info h3 { 
    /* Texto en blanco con sombra para resaltar sobre el fondo oscurecido */
    color: var(--color-blanco-cristal); 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
}

.tema-aguas .nivel-info span { 
    color: var(--color-bosque-profundo); 
    /* 💡 Tip: Si notas que este verde no se lee bien sobre el velo oscuro, 
       cámbialo a var(--color-oro) o var(--color-arena) */
}

.tema-aguas .nivel-accion { 
    background-color: var(--color-oro); 
    color: var(--color-tierra-oscura);
    box-shadow: 0 5px 0 var(--color-tierra-clara); 
}

.tema-aguas.activo:hover { 
    border-color: var(--color-tierra-oscura); 
}

.tema-aguas.activo .nivel-accion:active { 
    box-shadow: 0 0px 0 var(--color-tierra-clara); 
    transform: translateY(5px); /* Movimiento del botón al hacer clic */
}
/* --- NIVEL 4: CIMA (Bloqueado - Tonos Tierra Apagados) --- */
.card-nivel.tema-cima {
    background-color: #f7f5f4; 
    border-color: #d7ccc8; 
    filter: grayscale(0.8); /* Le subí un pelín el gris para que se note bien que está bloqueado */
    
    /* 🔥 EL VELO OSCURO: Degradado semi-transparente sobre la imagen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
                      url("../assets/imagenes/fondosniveles/fondonivel4cati.png");
                      
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px; 
    width: 100%;
    display: block;
    border-radius: 15px; /* Bordes redondeados estandarizados */
}

.tema-cima .nivel-numero { 
    background-color: var(--color-tierra-clara); 
    color: var(--color-arena);
    
    /* 🔥 ESTRUCTURA ESTANDARIZADA */
    display: flex;               
    justify-content: center;     
    align-items: center;         
    margin: 0 auto;              
    padding: 8px 40px; 
    border-radius: 30px; 
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; 
}

.tema-cima .nivel-info h3 { 
    /* Texto claro apagado para el estado bloqueado */
    color: #d7ccc8; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
}

.tema-cima .nivel-info span { color: #a1887f; }

.tema-cima .nivel-accion { 
    background-color: #d7ccc8; 
    color: #8d6e63;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); /* Efecto hundido */
}


/* ======================================================= */
/* 🌋 NIVEL 4: CIMA (ESTADO ACTIVO / DESBLOQUEADO)         */
/* ======================================================= */

.card-nivel.tema-cima.activo {
    background-color: var(--color-blanco-cristal, #ffffff);
    border-color: var(--color-volcan, #d35400); 
    filter: none; /* 🔥 Fundamental: elimina el grayscale, pero el velo de la imagen SE MANTIENE */
    cursor: pointer;
    transition: all 0.3s ease;
}

.tema-cima.activo .nivel-numero { 
    background-color: var(--color-volcan, #d35400); 
    color: var(--color-blanco-cristal, #ffffff);
    border: 3px solid var(--color-arena, #f4f1ea);
}

.tema-cima.activo .nivel-info h3 { 
    /* 🔥 Cambiado a blanco brillante con sombra profunda para resaltar espectacular */
    color: var(--color-blanco-cristal, #ffffff); 
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
}

.tema-cima.activo .nivel-info span { 
    color: var(--color-volcan, #d35400); 
    font-weight: bold;
}

.tema-cima.activo .nivel-accion { 
    background-color: var(--color-volcan, #d35400); 
    color: var(--color-blanco-cristal, #ffffff);
    box-shadow: 0 5px 0 var(--color-volcan-oscuro, #a04000); 
    transition: all 0.1s ease;
}

/* Efectos Hover (Al pasar el ratón) */
.tema-cima.activo:hover { 
    border-color: var(--color-roca-oscura, #2c3e50); 
    transform: translateY(-2px); 
}

.tema-cima.activo:hover .nivel-accion {
    background-color: var(--color-roca-oscura, #2c3e50);
    box-shadow: 0 5px 0 #1a252f;
}

/* Efectos Active (Al hacer clic) */
.tema-cima.activo .nivel-accion:active { 
    box-shadow: 0 0px 0 var(--color-volcan-oscuro, #a04000); 
    transform: translateY(5px); 
}
/* ======================================================= */
/* 📱 MODO RESPONSIVE (CELULARES)                          */
/* ======================================================= */

@media (max-width: 600px) {
    #pantalla-niveles {
        padding: 10px;
        margin-top: 10px;
    }
    
    #pantalla-niveles h2 {
        font-size: 1.5rem;
    }

    .grid-niveles {
        /* En móvil forzamos 1 columna */
        grid-template-columns: 1fr;
        max-width: 340px; 
    }

    .card-nivel {
        min-height: auto; /* Dejamos que el texto defina la altura */
        padding: 20px;
        flex-direction: row; /* 🔥 Cambio importante: En móvil, diseño horizontal */
        align-items: center;
        text-align: left;
        gap: 15px;
    }
    
    .card-nivel.bloqueado {
         flex-direction: row;
    }

    /* Reajuste para diseño horizontal en móvil */
    .nivel-numero {
        margin-bottom: 0;
        min-width: 40px; /* Evita que se aplaste */
    }
    
    .nivel-info {
        margin-bottom: 0;
        flex-grow: 1; /* Ocupa el espacio central */
    }
    
    .nivel-info h3 {
        font-size: 1rem;
    }
    
    .nivel-accion {
        padding: 8px 12px;
        font-size: 0.75rem;
        min-width: fit-content;
    }
}
/* ======================================================= */
/* ⏳ PANTALLA DE CARGA (CENTRADO, LIMPIO, IMAGEN FIJA)    */
/* ======================================================= */

#pantalla-interstitial {
    /* 1. POSICIONAMIENTO */
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 9999;
    
    /* 2. TRANSPARENCIA TOTAL */
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    
    /* 3. 🎯 ALINEACIÓN CENTRADA */
    display: none; /* JS pone flex */
    flex-direction: column;
    justify-content: center; /* Vertical */
    align-items: center;     /* Horizontal */
    
    text-align: center;
    overflow: hidden; 
    padding: 20px;
    box-sizing: border-box;
}

#pantalla-interstitial[style*="flex"] {
    display: flex !important;
}

/* --- IMAGEN (GRANDE, CENTRADA Y FIJA) --- */
#imagen-interstitial {
    width: auto;
    max-width: 90%;
    
    /* Altura grande */
    height: auto;
    max-height: 60vh; 
    
    flex-shrink: 1; 
    object-fit: contain;
    
    /* Diseño limpio sin bordes */
    background: transparent;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    /* Centrado */
    margin: 0 auto 20px auto; 
    display: block;
    
    /* 🚫 ANIMACIÓN ELIMINADA */
    /* animation: zoomIn 0.5s ease; */
}


/* --- BARRA DE CARGA (Centrada) --- */
.barra-carga {
    width: 80%;
    max-width: 450px;
    height: 10px;
    
    background-color: rgba(200, 200, 200, 0.5); 
    border: none;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    margin: 0 auto; 
}

.barra-carga::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    
    /* Color Verde plano */
    background: var(--color-bosque-profundo); 
    border-radius: 10px;
    
    /* Animación 3s (Solo la barra se mueve) */
    animation: llenarBarra 3s linear forwards;
}

/* --- ANIMACIONES --- */
@keyframes llenarBarra {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Ajuste móvil */
@media (max-height: 500px) {
    #imagen-interstitial { max-height: 45vh; }
}

/* ======================================================= */
/* 👤 SELECCIÓN DE PERSONAJE (VITRINA MEJORADA)            */
/* ======================================================= */

#pantalla-personaje {
    /* 1. LAYOUT FLEXIBLE Y SEGURO */
    position: relative !important;
    top: auto; left: auto;
    width: 100%;
    min-height: 100%; 
    height: auto !important; 
    
    display: none; /* JS lo activa */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    
    padding: 30px 20px;
    box-sizing: border-box;
    
    background: transparent !important;
    
    z-index: 90;
    overflow-y: auto; 
    overflow-x: hidden;
    
    animation: fadeInScale 0.5s ease-out;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
/* --- TÍTULO PRINCIPAL CON ANIMACIÓN DE "LATIDO AVENTURA" --- */
#titulo-seleccion {
    /* Mantenemos el estilo base */
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    flex-shrink: 0;
    
    /* Aseguramos que la transición sea suave */
    transition: all 0.3s ease;

    /* 🔥 NUEVA ANIMACIÓN: Latido rítmico */
    /* Es más rápida (2s) para que se sienta vivo, como un corazón */
    animation: latidoAventura 2s infinite ease-in-out;
}

/* Animación: LATIDO (PULSACIÓN)
   - No cambia colores ni luces.
   - Solo cambia el TAMAÑO (Scale) para mantener el texto nítido.
*/
@keyframes latidoAventura {
    0% {
        transform: scale(1);
    }
    50% {
        /* Crece un 5% */
        transform: scale(1.05);
        /* Opcional: Si tienes sombra negra en el texto original, aquí la alejamos un poco 
           para dar efecto 3D, pero siempre NEGRA para que se lea. */
        filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3)); 
    }
    100% {
        transform: scale(1);
    }
}

/* --- SUBTÍTULO / INSTRUCCIONES --- */
#pantalla-personaje .subtitulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #4E342E;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    padding: 8px 20px;
    border-radius: 20px;
    margin-bottom: 30px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 600px;
}

/* --- GRID DE FICHAS (CONTENEDOR) --- */
.grid-fichas {
    display: grid;
    /* Escritorio: 3 columnas obligatorias */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
    
    justify-items: center; 
    
    width: 100%;
    max-width: 600px; /* Ancho controlado para escritorio */
    margin: 0 auto; 
    padding-bottom: 40px; 
}

/* ======================================================= */
/* 📱 RESPONSIVE (MÓVIL)                                   */
/* ======================================================= */
@media (max-width: 768px) {
    .grid-fichas {
        /* 🔥 CAMBIO CLAVE: En celular bajamos a 2 columnas */
        /* Así se ven más grandes y ordenadas (quedarán 3 filas de 2) */
        grid-template-columns: repeat(2, 1fr); 
        
        gap: 25px; /* Reducimos un poco el espacio */
        max-width: 350px; /* Hacemos el contenedor más angosto para centrarlo bien */
    }

    /* Ajuste opcional para que la ficha no sea tan gigante si el celular es muy pequeño */
    .btn-ficha {
        width: 90px;
        height: 90px;
    }
}
/* --- TARJETA DE FICHA INDIVIDUAL --- */
.btn-ficha {
    width: 100px;
    height: 100px;
    
    background: linear-gradient(135deg, #ffffff 0%, #f1f8e9 100%);
    border-radius: 50%;
    border: 3px solid #AED581; 
    
    position: relative;
    cursor: pointer;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    
    /* Quitamos el margin-bottom porque 'gap' en el grid ya hace ese trabajo */
    margin-bottom: 0; 
}

/* Imagen dentro de la ficha */
.btn-ficha img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2)); 
    transition: transform 0.2s;
}

/* --- NOMBRE DE LA FICHA (ETIQUETA FLOTANTE CON LETRA NORMAL) --- */
.nombre-ficha {
    position: absolute;
    bottom: -35px; 
    left: 50%;
    transform: translateX(-50%);
    
    background: rgba(255, 255, 255, 0.9);
    color: #33691E; 
    
    /* 🔥 CAMBIO: Quitamos 'Luckiest Guy' y ponemos la fuente normal */
    font-family: sans-serif; 
    font-weight: 700; /* Negrita para que se lea bien */
    
    font-size: 0.9rem;
    white-space: nowrap;
    
    padding: 4px 12px;
    border-radius: 12px;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    opacity: 0.8; 
    transition: all 0.2s ease;
    pointer-events: none;
}
/* --- ESTADOS INTERACTIVOS --- */

.btn-ficha:hover {
    transform: translateY(-8px) scale(1.1);
    border-color: #7CB342;
    background: #fff;
    box-shadow: 0 15px 25px rgba(46, 125, 50, 0.2);
    z-index: 10;
}

.btn-ficha:hover img {
    transform: rotate(5deg) scale(1.1);
}

.btn-ficha:hover .nombre-ficha {
    opacity: 1;
    background: #2E7D32;
    color: #fff;
    border-color: #1B5E20;
    bottom: -40px; 
}

/* Seleccionada */
.btn-ficha.seleccionada {
    background: #DCEDC8; 
    border-color: #2E7D32;
    border-width: 4px;
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.2); 
}

.btn-ficha.seleccionada .nombre-ficha {
    background: #2E7D32;
    color: #fff;
    font-weight: bold;
    opacity: 1;
}

/* Badge de Check ✔ */
.btn-ficha.seleccionada::after {
    content: '✔';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #2E7D32;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    animation: popCheck 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popCheck {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 600px) {
    /* Mantenemos el ajuste de tamaño para móvil */
    #titulo-seleccion { font-size: 1.5rem; margin-bottom: 15px; }
    
    .grid-fichas { gap: 20px; }
    
    .btn-ficha {
        width: 80px; 
        height: 80px;
        margin-bottom: 25px;
    }
    
    .nombre-ficha {
        font-size: 0.8rem;
        bottom: -25px;
        padding: 2px 8px;
    }
    
    .btn-ficha:hover .nombre-ficha { bottom: -30px; }
}

/* ======================================================= */
/* 🧩 ESTILOS DEL QUIZ (MODO AVENTURA IMBABURA)            */
/* ======================================================= */

/* Solo cuando JS le pone la clase "mostrar", se vuelve flexible */
#pantalla-quiz.mostrar {
    display: flex !important;
}

/* 1. La Tarjeta Central (Panel de Juego) */
.quiz-container {
    
    
    /* Tamaño y Forma */
    width: 90%;
   
    border-radius: 25px; 
    padding: 30px;
    
    /* Centrado Flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    
    position: relative;
    animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Decoración Base (Escritorio) */
.quiz-container::before {
  
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    
    /* Degradado Naranja */
    background: linear-gradient(to right, #FF9800, #F57C00);
    color: white;
    
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    white-space: nowrap; /* Evita que el texto se parta en 2 líneas */
    
    /* Pastilla ancha */
    padding: 10px 30px;
    border-radius: 50px;
    width: auto;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    border: 3px solid #fff;
    box-shadow: 0 4px 0 #E65100, 0 8px 15px rgba(0,0,0,0.1);
    
    z-index: 10;
}

/* 📱 RESPONSIVE PARA TABLETS (Pantallas medianas) */
@media (max-width: 768px) {
    .quiz-container::before {
        font-size: 16px;      /* Texto un poco más pequeño */
        padding: 8px 25px;    /* Menos relleno */
        top: -20px;           /* Ajuste de altura */
    }
}

/* 📲 RESPONSIVE PARA MÓVILES (Pantallas pequeñas) */
@media (max-width: 480px) {
    .quiz-container::before {
        font-size: 14px;      /* Texto compacto */
        padding: 6px 20px;    /* Relleno ajustado */
        top: -18px;           /* Más pegado al borde */
        border-width: 2px;    /* Borde más fino para que se vea delicado */
        box-shadow: 0 3px 0 #E65100, 0 5px 10px rgba(0,0,0,0.1); /* Sombra más suave */
    }
}

/* 2. Títulos */
.modal-titulo {
    font-family: var(--fuente-titulo, 'Luckiest Guy', cursive); /* Usamos tu fuente principal */
    font-size: 1.8rem;
    color: #5D4037;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    margin-top: 20px;
    margin-bottom: 15px;
    
    /* Línea decorativa verde (Naturaleza) */
    border-bottom: 3px dashed #AED581; 
    width: 100%;
    text-align: center;
    padding-bottom: 15px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

/* 3. Pregunta */
.texto-pregunta {
    font-family: 'Montserrat', sans-serif; /* Fuente legible para leer */
    font-size: 1.5rem;
    color: #3E2723; /* Marrón oscuro */
    text-align: center;
    margin: 10px 0 30px 0;
    font-weight: 700; 
    line-height: 1.4;
    
    /* Fondo sutil detrás de la pregunta */
    background: rgba(255, 255, 255, 0.6);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(141, 110, 99, 0.2);
}

/* 4. Grid de Opciones (2 Columnas) */
.opciones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* Más espacio */
    width: 100%;
}

/* 5. BOTONES DE RESPUESTA (Estilo Piedra/Madera Pulida) */
.btn-quiz-opcion {
    /* Gradiente suave hueso/blanco */
    background: linear-gradient(to bottom, #ffffff, #f5f5f5);
    
    /* 🔥 EFECTO 3D SUAVE */
    border: 2px solid #8D6E63;       /* Borde madera clara */
    border-bottom: 5px solid #5D4037; /* Base madera oscura */
    border-radius: 18px;
    
    padding: 15px 20px;
    min-height: 80px; /* Botones grandecitos */
    
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #4E342E;
    font-weight: 700;
    
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Hover: Se ilumina con verde naturaleza */
@media (hover: hover) {
    .btn-quiz-opcion:hover:not(:disabled) {
        transform: translateY(-3px);
        border-color: #AED581;      
        border-bottom-color: #689F38; 
        background: #F1F8E9;
        color: #33691E;
    }
}

/* Active */
.btn-quiz-opcion:active:not(:disabled) {
    transform: translateY(3px); 
    border-bottom-width: 2px;   
    box-shadow: none;
}

/* 6. ESTADOS DE RESPUESTA (Feedback Visual) */

/* ✅ CORRECTA: Verde Bosque Intenso */
.btn-quiz-opcion.correcta {
    background: linear-gradient(to bottom, #66BB6A, #43A047) !important;
    border-color: #2E7D32 !important;
    border-bottom-color: #1B5E20 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    transform: translateY(2px);
    border-bottom-width: 2px;
}

/* ❌ INCORRECTA: Rojo Volcánico */
.btn-quiz-opcion.incorrecta {
    background: linear-gradient(to bottom, #EF5350, #E53935) !important;
    border-color: #C62828 !important;
    border-bottom-color: #B71C1C !important;
    color: #ffffff !important;
    opacity: 1; /* Quitamos transparencia para que se vea sólido */
    animation: shake 0.4s;
}

/* FEEDBACK FANTASMA (La que era correcta) */
.btn-quiz-opcion.correcta-feedback {
    border: 3px dashed #43A047 !important;
    background-color: rgba(67, 160, 71, 0.1) !important;
    color: #2E7D32 !important;
    border-bottom: 3px dashed #43A047 !important; /* Sin efecto 3D */
    opacity: 0.7;
}

/* 7. Resultados */
.resultado-quiz {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.puntaje-grande {
    font-family: 'Luckiest Guy', cursive;
    font-size: 5rem;
    color: #FFCA28; /* Amarillo Dorado */
    
    /* Borde grueso al texto (estilo cartoon) */
    -webkit-text-stroke: 3px #E65100; 
    
    margin: 10px 0;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.15);
    
    animation: bounceIn 0.8s infinite alternate; /* Palpita de emoción */
}

.mensaje-final {
    font-size: 1.3rem;
    color: #5D4037;
    margin-bottom: 20px;
    font-weight: bold;
}

/* 📱 RESPONSIVE (Móvil) */
@media (max-width: 768px) {
    .quiz-container { width: 95%; padding: 25px 15px; }
    .opciones-grid { grid-template-columns: 1fr; gap: 12px; } /* 1 Columna en vertical */
    .texto-pregunta { font-size: 1.3rem; margin-bottom: 20px; }
    .btn-quiz-opcion { min-height: 65px; font-size: 1rem; padding: 10px 15px; }
    .modal-titulo { font-size: 1.5rem; margin-top: 10px; }
    .quiz-container::before { width: 50px; height: 50px; top: -25px; font-size: 24px; }
}

/* Animaciones */
@keyframes bounceIn { 
    0% { transform: scale(0.3); opacity: 0; } 
    50% { transform: scale(1.05); opacity: 1; } 
    70% { transform: scale(0.9); } 
    100% { transform: scale(1); } 
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* ======================================================= */
/* 🚪 ESTILOS EXCLUSIVOS PARA EL MODAL DE SALIDA           */
/* (Usamos #modal-salida para que no afecte a nada más)    */
/* ======================================================= */

/* Caja de advertencia (La que ya tenías bien) */
#modal-salida .caja-advertencia {
    background-color: #FFF3E0;
    border-left: 4px solid #FF9800;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    text-align: left;
    font-size: 0.9rem;
    color: #5D4037;
}

#modal-salida .caja-advertencia strong { color: #E65100; }
#modal-salida .modal-icono { font-size: 3rem; margin-bottom: 10px; display: block; text-align: center; }

/* Contenedor de botones */
#modal-salida .modal-botones {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    width: 100%;
}

/* --- ESTILO BASE (Forma y Tamaño) SOLO PARA ESTOS BOTONES --- */
#modal-salida .btn-modal {
    padding: 12px 20px;
    border-radius: 50px;       /* Forma redonda tipo píldora */
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    border: none;              /* Quitamos bordes feos por defecto */
    transition: all 0.3s ease;
    flex: 1;                   /* Que ocupen el mismo ancho */
    max-width: 180px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

/* --- BOTÓN CANCELAR (Gris) --- */
#modal-salida .btn-cancelar {
    background-color: #ECEFF1;
    color: #546E7A;
    border: 1px solid #CFD8DC; /* Borde sutil */
}

#modal-salida .btn-cancelar:hover {
    background-color: #CFD8DC;
    color: #37474F;
    transform: translateY(-2px);
}

/* --- BOTÓN SALIR (Rojo) --- */
#modal-salida .btn-salir {
    background-color: #D32F2F;
    color: white;
}

#modal-salida .btn-salir:hover {
    background-color: #B71C1C;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(211, 47, 47, 0.3);
}



/* ======================================================= */
/* 🏠 ESTRUCTURA DEL PANEL DERECHO                        */
/* ======================================================= */
#panel-derecho {
    background: #ffffff;
    border-left: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 0; /* Quitamos padding para que las pestañas toquen los bordes */
    box-shadow: -4px 0 15px rgba(0,0,0,0.05);
    z-index: 100;
}

/* ======================================================= */
/* 📑 CONTROL DE PESTAÑAS (TABS)                          */
/* ======================================================= */
/* ======================================================= */
/* 📑 CONTROL DE PESTAÑAS (DISEÑO CURVO)                  */
/* ======================================================= */
.tabs-control {
    display: flex;
    /* 🔑 Fondo transparente para que no se vea un bloque recto arriba */
    background: transparent; 
    padding: 10px 10px 0 10px;
    gap: 8px;
    /* Eliminamos el borde inferior grueso que genera esquinas rectas */
    border-bottom: none; 
}

.tab-button {
    flex: 1;
    padding: 12px 5px;
    border: none;
    background: rgba(255, 255, 255, 0.3); /* Pestaña inactiva muy sutil */
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    
    /* 🔑 REDONDEADO: Solo en las esquinas superiores */
    border-radius: 20px 20px 0 0; 
    
    /* Pequeña separación visual */
    border: 1px solid transparent;
}

.tab-button.activo {
    color: #2e7d32; /* Verde Bosque de Imbabura */
    background: #ffffff; /* Se une al fondo del contenido */
    
    /* 🔑 Sombra suave para resaltar la pestaña seleccionada */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    
    /* Aseguramos que el redondeado sea perfecto */
    border-radius: 20px 20px 0 0; 
    border: 1px solid #e2e8f0;
    border-bottom: none; /* Abre el camino hacia el tab-content */
}

/* ======================================================= */
/* 📦 CONTENIDO (CONEXIÓN REDONDEADA)                     */
/* ======================================================= */
/* Asegura que el contenedor de las pestañas no deje espacios muertos */
.tab-content {
    display: none; /* Oculto por defecto */
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 20px;
    overflow-y: auto;
    flex-direction: column;
    
    /* Mantiene tu diseño redondeado intacto */
    border-radius: 20px 0 0 20px; 
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.05);
    margin-top: -1px; 
    z-index: 1;
}

/* Solo se muestra cuando la pestaña es seleccionada */
.tab-content.activo {
    display: flex; /* Se activa en su lugar exacto */
    animation: fadeIn 0.3s ease;
}

/* ======================================================= */
/* 📊 MARCADOR DE PUNTOS (SCOREBOARD)                     */
/* ======================================================= */
.marcador-partida-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0;
}

/* Estilo para cada jugador inyectado por JS */
.jugador-score-card {
   
    padding: 12px;
    border-radius: 12px;
    border-left: 5px solid #2e7d32;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ======================================================= */
/* 📜 LISTA DE REGLAS (ICONOS Y TEXTO)                    */
/* ======================================================= */
#tab-info ul li {
   
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

#tab-info strong {
    display: block;
    margin-bottom: 2px;
}




/* ======================================================= */
/* 🌀 ANIMACIONES                                         */
/* ======================================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}



/* ======================================================= */
/* 🏆 OVERLAY: TOTALMENTE TRANSPARENTE (DENTRO DEL PANEL)  */
/* ======================================================= */
.overlay-final-web {
    position: absolute; /* 🔑 Obligatorio para no salirse del contenedor del juego */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent; 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 🔑 Bloquea cualquier desborde fuera del panel */
}

.limitador-espacio-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%; 
    max-width: 800px; /* 🔑 Ancho máximo para el video grande */
    max-height: 98%;
    padding: 15px;
    text-align: center;
}

/* ======================================================= */
/* 🎬 VIDEO: CINEMÁTICO PERO CONTROLADO                   */
/* ======================================================= */
.video-final-ajustado {
    width: 100%; /* Se adapta al limitador de 800px */
    max-width: 800px;
    aspect-ratio: 16 / 9; 
    background: transparent;
    border: none;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    margin-bottom: 15px;
}

.gif-limpio-final {
    max-width: 70%;
    height: auto;
    background: transparent;
    border: none;
    margin-bottom: 10px;
}

/* ======================================================= */
/* 🏆 TÍTULO GANADOR (ESTILO WEB REDUCIDO)                */
/* ======================================================= */
.ganador-display-texto {
    font-size: 2.2rem; /* Tamaño optimizado para no empujar el score fuera */
    color: #2e7d32;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(255, 255, 255, 1);
    margin: 5px 0 15px 0; 
    letter-spacing: -1px;
    line-height: 1.1;
}

/* ======================================================= */
/* 📊 SCORE FINAL: TABLA PROFESIONAL TRANSPARENTE         */
/* ======================================================= */
.tarjeta-blanca-puntos {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 2px solid #ffffff;
    width: 100%;
    max-width: 500px;
}

.tarjeta-blanca-puntos h3 {
    font-size: 1.3rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 3px solid #2e7d32;
    display: inline-block;
}

#resumen-puntuaciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fila-puntos-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 15px;
}

/* Resaltado del Ganador */
.fila-puntos-final:first-child {
    background: linear-gradient(90deg, #fff9c4, #ffffff);
    border: 1.5px solid #FFD700;
}

.final-nombre {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2e7d32;
    flex: 1;
    text-align: left;
}

.final-pts {
    font-size: 1.4rem;
    font-weight: 900;
    color: #1e293b;
}

.final-pts span {
    font-size: 0.8rem;
    color: #64748b;
    margin-left: 3px;
}

/* ======================================================= */
/* 🔘 BOTÓN DE REINICIO 3D                                */
/* ======================================================= */
.btn-web-reinicio {
    margin-top: 25px;
    padding: 15px 50px;
    background: #2e7d32;
    color: white;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 0px #1b5e20;
    transition: all 0.2s ease;
}

.btn-web-reinicio:active {
    transform: translateY(4px);
    box-shadow: none;
}







/* ======================================================= */
/* 🍞 NOTIFICACIONES (ESQUINA INFERIOR IZQUIERDA)          */
/* ======================================================= */

#toast-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    pointer-events: none;
}

.toast-mensaje {
    background: rgba(255, 255, 255, 0.98);
    color: #333;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 6px solid #2e7d32;
    animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.4s ease;
    max-width: 320px;
}

.toast-mensaje.warning {
    border-left-color: #ff9800;
    background: #fff8f0;
}

.toast-mensaje.error {
    border-left-color: #d32f2f; 
    background: #fff5f5;
}

@keyframes slideInLeft {
    from { transform: translateX(-150%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

/* ======================================================= */
/* 🏆 MODAL DE VICTORIA (TEMA: IMAGEN OSCURA + CAFÉ/NATURA) */
/* ======================================================= */

.modal-victoria-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Fondo muy oscuro */
    background: rgba(10, 20, 15, 0.95); 
    backdrop-filter: blur(5px);
    z-index: 9999;
    /* CENTRADO PERFECTO DE LA VENTANA */
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.5s ease;
    overflow-y: auto; /* Permite scroll solo si la pantalla es muy pequeña en altura */
}

.modal-victoria-content {
    /* 🔥 FONDO: Imagen con velo negro para contraste */
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(30,30,30,0.1) 100%),
                url('../assets/imagenes/generales/portada_tvi.webp'); 

    background-size: cover;         
    background-position: center;    
    background-repeat: no-repeat;   
    background-blend-mode: normal; 

    /* Estructura */
    width: 95%; max-width: 1000px; /* Un poco más ancho para que quepan 3 */
    border-radius: 15px; padding: 30px;
    
    /* Sombra y Borde Café para combinar */
    box-shadow: 0 20px 60px rgba(0,0,0,0.7); 
    border: 3px solid #8D6E63; 
    
    /* Altura máxima inteligente */
    max-height: 90vh; 
    overflow-y: auto; /* Scroll interno solo si el contenido se desborda verticalmente */
    
    /* Alineación interna */
    display: flex; flex-direction: column; align-items: center;
}

/* --- CABECERA (ADAPTADA PARA FONDO OSCURO) --- */
.victoria-header { width: 100%; text-align: center; margin-bottom: 20px; }

.victoria-header h1 { 
    color: #FFF8E1; 
    margin: 0; font-size: 1.8rem; 
    text-transform: uppercase; letter-spacing: 1px; font-weight: 800;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8); 
}

.victoria-header p { 
    color: #D7CCC8; 
    margin-top: 5px; font-size: 0.95rem; 
}

/* ======================================================= */
/* 🔳 GRID FLEXIBLE PERFECTO (LA MAGIA ESTÁ AQUÍ)          */
/* ======================================================= */
.victoria-grid { 
    width: 100%;
    display: flex; 
    justify-content: center; /* Centra horizontalmente siempre */
    align-items: center; /* Centra verticalmente si hay espacio */
    flex-wrap: wrap; /* Permite que bajen a otra fila si no caben */
    gap: 20px; /* Espacio uniforme entre tarjetas */
    margin-bottom: 20px;
}

/* --- TARJETA INDIVIDUAL (TAMAÑO FIJO PERO FLEXIBLE) --- */
.vic-card {
    background: #FFFFFF; 
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #BCAAA4; 
    
    display: flex; flex-direction: column; 
    overflow: hidden; 
    transition: transform 0.2s;

    /* 🔥 AJUSTE CLAVE: Ancho fijo ideal para que entren 3 */
    /* flex: 0 1 auto; NO, mejor usamos width fijo con max-width */
    width: 280px; 
    max-width: 100%; /* Para móviles */
    
    /* Altura mínima para que se vean uniformes */
    min-height: 380px; 
}

/* --- TARJETA GANADOR (Un poco más grande) --- */
.vic-card.ganador {
    background: #F1F8E9; 
    border: 3px solid #2E7D32; 
    transform: scale(1.05); /* Lo hace resaltar */
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    
    /* 🔥 TRUCO: Si hay wrap, el ganador suele quedar mejor al medio o arriba */
    order: -1; 
}

/* 1. Parte Superior (Avatar) */
.vic-col-left {
    display: flex; flex-direction: row;
    align-items: center; justify-content: center;
    padding: 10px; background: #FAFAFA;
    border-bottom: 1px solid #D7CCC8; gap: 10px;
}
.vic-card.ganador .vic-col-left { background: #DCEDC8; border-bottom-color: #AED581; }

.vic-posicion { font-size: 1.4rem; color: #795548; font-weight: bold; }
.vic-card.ganador .vic-posicion { color: #2E7D32; }

.vic-avatar img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #eee; object-fit: cover; }
.vic-card.ganador .vic-avatar img { border-color: #2E7D32; width: 55px; height: 55px; }

/* 2. Parte Central (Detalles - CUERPO PRINCIPAL) */
.vic-info-detallada {
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    padding: 10px; 
    text-align: center; 
    width: 100%;
    display: flex; flex-direction: column;
}
.vic-info-detallada h3 { 
    margin: 0 0 8px 0; font-size: 1rem; color: #5D4037; 
    border-bottom: 1px solid #D7CCC8; padding-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Evita nombres largos rompan todo */
}
.vic-card.ganador .vic-info-detallada h3 { color: #1B5E20; border-bottom-color: #C5E1A5; font-size: 1.1rem; }

/* Tabla de items */
.tabla-desglose { font-size: 0.8rem; color: #6D4C41; text-align: left; width: 100%; }
.grupo-items { background: #FFFFFF; border: 1px dashed #BCAAA4; border-radius: 6px; padding: 5px; margin-bottom: 5px; }
.titulo-grupo { font-size: 0.65rem; color: #8D6E63; text-transform: uppercase; margin-bottom: 4px; font-weight: bold; }

.item-subfila { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.it-left { display: flex; align-items: center; gap: 5px; width: 75%; }
.it-left img { width: 16px; height: 16px; object-fit: contain; }
.it-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; }
.it-pts { font-weight: bold; color: #2E7D32; font-size: 0.75rem; }

.subtotal-grupo { text-align: right; font-size: 0.7rem; border-top: 1px solid #eee; color: #795548; padding-top: 2px; margin-top: 2px;}

.fila-resumen { display: flex; justify-content: space-between; margin-top: 2px; padding: 2px 0; }
.fila-resumen.meta { background: #E8F5E9; border: 1px solid #C8E6C9; border-radius: 4px; padding: 2px 4px; }

/* 3. Parte Inferior (TOTAL - PIE DE TARJETA) */
.vic-total-container {
    background: #8D6E63; color: white;
    padding: 8px 12px; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; /* Empuja siempre al fondo */
}
.vic-card.ganador .vic-total-container { background: #2E7D32; }
.vic-puntos-final { font-size: 1.3rem; font-weight: 800; }
.vic-total-container small { font-size: 0.65rem; letter-spacing: 1px; opacity: 0.9; text-transform: uppercase; }

/* Botón Final */
.btn-reiniciar-victoria {
    background: #4E342E; 
    color: white; border: none; padding: 12px 30px;
    font-size: 1rem; border-radius: 50px; cursor: pointer; 
    font-weight: bold; transition: 0.3s; margin-top: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    border: 1px solid #FFF8E1;
}
.btn-reiniciar-victoria:hover { background: #3E2723; transform: scale(1.05); }

/* ======================================================= */
/* 📱 RESPONSIVE REAL (MÓVIL Y TABLET)                     */
/* ======================================================= */
@media (max-width: 900px) {
    /* En tablets, si son 3, probablemente 2 arriba y 1 abajo centrado */
    .victoria-grid { justify-content: center; }
}

@media (max-width: 600px) {
    /* En móviles, uno debajo del otro */
    .modal-victoria-content { padding: 15px; width: 95%; max-height: 95vh; }
    .victoria-grid { flex-direction: column; align-items: center; gap: 15px; }
    .vic-card { width: 100%; max-width: 320px; min-height: auto; } 
    .vic-card.ganador { transform: scale(1); border-width: 2px; order: -1;} /* Quitar zoom en móvil para que no se salga */
}


footer {
    background-color: var(--color-tierra-oscura);
    color: var(--color-arena);
    font-family: var(--fuente-principal);
    
    /* Relleno drásticamente reducido para hacerlo delgado */
    padding: 10px 20px; 
    
    /* Borde superior más fino */
    border-top: 2px solid var(--color-bosque-claro); 
    
    box-shadow: var(--sombra-suave);
    position: relative;
    z-index: var(--z-ui);
}

/* Contenedor Flex para alinear todo horizontalmente */
.footer-contenido {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre el saludo y el texto */
    flex-wrap: wrap; /* Si la pantalla es muy pequeña, baja a la siguiente línea */
}

footer .destaque {
    font-family: var(--fuente-titulo);
    color: var(--color-oro);
    font-size: 1.1rem; /* Tamaño más discreto */
    letter-spacing: 1px;
}

footer p {
    margin: 0; /* Quitamos márgenes para no crear altura extra */
    font-size: 0.85rem; /* Texto un poco más pequeño */
    opacity: 0.8;
}




/* =========================================
   FONDO ANIMADO EXCLUSIVO PARA VIDEO FINAL
   ========================================= */
#gameModal.fondo-gif-final {
    /* El !important asegura que sobreescriba el fondo marrón normal del modal */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('../assets/imagenes/gif/gif_victoria.gif') center/cover repeat !important;
    
    animation: fadeInCine 1s ease-in-out;
}

@keyframes fadeInCine {
    from { opacity: 0; }
    to { opacity: 1; }
}