/* 1. El Contenedor (La ventana de visualización) */
#contenedor-mapa.modo-scroll-horizontal {
    width: 100%;
    height: 100vh !important; 
    height: 100dvh !important; 
    overflow: hidden;
    position: relative;
    background-color: transparent !important;
}

/* 2. El Tablero (La "cinta" larga que contiene el mapa) */
.modo-scroll-horizontal #tablero-visual-juego {
    height: 100% !important;
    /* QUITAMOS el min-width: 250% fijo */
    width: max-content !important; 
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;

    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 3. La Imagen del Mapa (EL CAMBIO CLAVE) */
.modo-scroll-horizontal #mapa-juego-visual {
    height: 100% !important; /* Mantiene el alto de la pantalla */
    width: auto !important;   /* El ancho se ajusta proporcionalmente al alto */
    
    /* 'contain' asegura que se vea toda la imagen sin estirarse */
    /* 'cover' asegura que llene el alto sin dejar espacios, sacrificando un poco de bordes si es necesario */
    object-fit: contain; 
    
    display: block;
}

/* 4. Las Fichas */
.modo-scroll-horizontal #contenedor-fichas {
    /* El contenedor de fichas debe ser exactamente igual de ancho que el tablero */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
}



/*--------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/
/*-------------------- FICHA PASA POR TUNEL---------------------------*/
/* Clase para cuando la ficha entra al túnel */
.ficha-en-tunel {
    opacity: 0 !important;
    transform: scale(0.5); /* Se achica al entrar */
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

/* Asegúrate de que tu ficha normal tenga transición de opacidad también */
.ficha-jugador {
    /* Tus estilos actuales... */
    transition: top 0.8s, left 0.8s, opacity 0.5s, transform 0.5s;
    z-index: 20; /* Siempre encima del mapa */
}
/* --- MENSAJE DE TÚNEL: ESTILO "AVENTURA MODERNA" --- */
.mensaje-tunel-centro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* FONDO: Negro semitransparente limpio y plano */
    /* Permite ver la ficha moverse detrás perfectamente */
    background: rgba(10, 10, 10, 0.65); 
    
    /* EFECTO: Un poco de desenfoque para suavizar el mapa de atrás */
    backdrop-filter: blur(4px);
    
    /* TEXTO */
    color: #FFFFFF;
    font-family: sans-serif;
    text-align: center;
    
    /* TAMAÑO Y FORMA */
    padding: 20px 40px;
    border-radius: 8px; /* Bordes ligeramente redondeados, más serio */
    min-width: 320px;
    
    /* ACENTO DE COLOR "IMBABURA" (Barra inferior) */
    /* Un degradado sutil de Verde (Montaña) a Azul (Lagos) */
    border-bottom: 4px solid;
    border-image: linear-gradient(to right, #4CAF50, #00BCD4) 1;
    /* Si el border-image da problemas en algunos móviles, usa este fallback: */
    border-bottom-color: #4CAF50; 
    
    z-index: 9999;
    
    /* SOMBRA SUAVE */
    box-shadow: 0 10px 25px rgba(0,0,0, 0.5);
    
    /* ANIMACIÓN */
    opacity: 0;
    animation: aparecerSuave 0.5s ease-out forwards;
    pointer-events: none;
}

/* TÍTULO PRINCIPAL */
.mensaje-tunel-centro {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* SUBTÍTULO (Descripción pequeña) */
.mensaje-tunel-subtitulo {
    display: block;
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    color: #cfd8dc; /* Gris muy claro para no competir con el título */
    text-transform: none;
    letter-spacing: normal;
}

/* ANIMACIÓN: Entrada deslizante suave desde abajo */
@keyframes aparecerSuave {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -40%); /* Empieza un poco más abajo */
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%); /* Termina en el centro */
    }
}



/* --- -------------------------------LEYENDA----------- --- */
/* =======================================================
   ESTILOS EXCLUSIVOS: LEYENDA TIPO BÚSQUEDA (CARAS/HOJAS)
   No afecta a ningún otro modal del juego.
   ======================================================= */

/* El contenedor solo para las 3 cartas de la leyenda */
.contenedor-leyenda-busqueda {
    display: flex !important;
    flex-direction: row !important; /* Fuerza horizontal */
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
    flex-wrap: wrap; /* Para que baje si no cabe en pantallas muy pequeñas */
}

/* Las cartas individuales (Hojas/Iconos) */
.item-leyenda-busqueda {
    width: 85px;
    height: 95px;
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%); /* Verde muy suave */
    border: 3px solid #81c784;
    border-radius: 12px;
    
    /* Centrado del emoji */
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 2.8rem; /* Tamaño del icono */
    cursor: pointer;
    box-shadow: 0 5px 0 #689f38, 0 8px 10px rgba(0,0,0,0.1); /* Efecto 3D */
    transition: all 0.2s ease;
    user-select: none;
}

/* Efectos de interacción SOLO para estas cartas */
.item-leyenda-busqueda:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
}

.item-leyenda-busqueda:active {
    transform: translateY(3px); /* Se hunde */
    box-shadow: 0 2px 0 #689f38, 0 2px 5px rgba(0,0,0,0.1);
}

/* Estado de Ganador (Verde fuerte) */
.item-leyenda-busqueda.ganador {
    background: #c8e6c9 !important;
    border-color: #2e7d32 !important;
    box-shadow: inset 0 0 10px rgba(46, 125, 50, 0.2) !important;
    transform: none !important;
}

/* Estado de Perdedor (Rojo suave) */
.item-leyenda-busqueda.perdedor {
    background: #ffcdd2 !important;
    border-color: #c62828 !important;
    box-shadow: inset 0 0 10px rgba(198, 40, 40, 0.2) !important;
    transform: none !important;
}

/* --- Responsive solo para este elemento --- */
@media (max-width: 480px) {
    .item-leyenda-busqueda {
        width: 70px;
        height: 80px;
        font-size: 2.2rem;
        box-shadow: 0 4px 0 #689f38, 0 5px 5px rgba(0,0,0,0.1);
    }
}