/* ======================================================= */
/* 🗺️ CONTENEDOR PRINCIPAL (Se adapta como un guante)     */
/* ======================================================= */
#contenedor-mapa {
    position: relative;
    
    /* 1. TAMAÑO: Se ajusta al contenido. Ni más, ni menos. */
    width: fit-content;
    height: fit-content;
    
    /* Límites para que nunca se salga de la pantalla */
    max-width: 100%;
    max-height: 85vh;
    
    margin: 0 auto; /* Centrado */
    
    /* 2. ESTÉTICA DE TABLERO 3D */
    border: 8px  ;    
    border-radius: 40px; 
    
    /* Sombra profunda para realismo */
    box-shadow: 
        0 0 0 1px rgba(0,0,0,0.1),
        0 20px 50px -10px rgba(0, 0, 0, 0.4);
    
    /* Flexbox elimina espacios fantasma */
    display: flex; 
    justify-content: center;
    align-items: center;
    
    
    overflow: hidden;
}

/* ======================================================= */
/* 🖼️ LA IMAGEN (El cerebro del tamaño)                   */
/* ======================================================= */
#mapa-juego-visual {
    /* ⚠️ CAMBIO CRÍTICO AQUÍ: */
    
    /* Antes tenías 'height: 85vh'. Eso FORZABA la altura. */
    /* Ahora usamos 'max-height'. */
    
    max-height: 85vh; /* "No seas más alto que el 85% de la pantalla" */
    max-width: 100%;  /* "No seas más ancho que la pantalla" */
    
    /* "Calcula tu tamaño natural respetando los límites de arriba" */
    height: auto; 
    width: auto;  
    
    display: block; 
    object-fit: contain;
    
    /* Bloquear selección */
    pointer-events: none; 
    user-select: none;
    -webkit-user-drag: none;
}
/* ======================================================= */
/* 🎮 HUD: MINI CÁPSULA (ESTILO ULTRA COMPACTO)            */
/* ======================================================= */

/* Animación sutil (latido suave) */
@keyframes pulsoMini {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.6); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 5px rgba(33, 150, 243, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

#controles-mapa {
    position: absolute;
    /* ⬇️ MÁS ABAJO: Pegado a la esquina inferior */
    bottom: 10px; 
    right: 10px;
    z-index: 1000;

    /* Fondo "Glass" limpio */
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px; /* Bordes redondos pero compactos */
    
    /* 📐 TAMAÑO REDUCIDO */
    padding: 4px 8px; /* Relleno mínimo */
    gap: 8px;         /* Espacio entre elementos reducido */
    
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    
    /* Transición suave para cambios de tamaño */
    transition: all 0.3s ease;
}

/* ------------------------------------------------------- */
/* 📝 INFO JUGADOR (TEXTOS PEQUEÑOS)                       */
/* ------------------------------------------------------- */
.info-turno-mapa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    margin-left: 5px; /* Un pelín de margen izq */
}

/* Etiqueta "Turno" (Casi invisible pero legible) */
.info-turno-mapa span {
    font-size: 0.6rem; 
    color: #78909c;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

/* NOMBRE DEL JUGADOR */
.info-turno-mapa strong#nombre-jugador-turno {
    font-size: 0.85rem; /* Letra contenida */
    color: #0277bd;     /* Azul profesional */
    font-weight: 800;
    max-width: 100px;   /* Si el nombre es largo, que no rompa todo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------- */
/* 🎲 BOTÓN DADO (MINI)                                    */
/* ------------------------------------------------------- */
#boton-dado {
    /* Gradiente Azul Compacto */
    background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
    color: white;
    border: none;
    
    /* 📐 TAMAÑO BOTÓN: Pequeño */
    padding: 6px 12px;
    font-size: 0.7rem; /* Letra chiquita */
    
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(2, 136, 209, 0.3);
    white-space: nowrap;
    
    animation: pulsoMini 3s infinite;
}

#boton-dado:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #4fc3f7 0%, #039be5 100%);
}

#boton-dado:disabled {
    background: #e0e0e0;
    color: #9e9e9e;
    box-shadow: none;
    cursor: default;
    animation: none;
}

/* ======================================================= */
/* 📱 RESPONSIVE (CELULARES) - AÚN MÁS PEQUEÑO             */
/* ======================================================= */
@media (max-width: 480px) {
    #controles-mapa {
        /* En celular lo bajamos totalmente */
        bottom: 15px; 
        right: 5px; /* Casi pegado al borde derecho */
        
        padding: 3px 6px; /* Relleno mínimo absoluto */
        gap: 5px;
        border-radius: 25px;
    }

    /* Ocultamos "Turno de" para que solo se vea el nombre */
    .info-turno-mapa span {
        display: none;
    }

    .info-turno-mapa strong#nombre-jugador-turno {
        font-size: 0.75rem; /* Nombre muy discreto */
        max-width: 80px;    /* Cortamos nombres largos */
    }

    #boton-dado {
        padding: 5px 10px;
        font-size: 0.65rem; /* Botón mini */
    }
}


/* ======================================================= */
/* ♟️ FICHAS (CON NOMBRE ENCIMA)                            */
/* ======================================================= */

/* 1. EL CONTENEDOR (Se mueve y define el tamaño) */
.ficha-contenedor {
    /* Mantenemos tu tamaño inteligente clamp */
    width: clamp(24px, 5vw, 42px) !important;
    height: clamp(24px, 5vw, 42px) !important;
    
    position: absolute;
    z-index: 60;
    
    /* 🎯 CENTRADO: Esto asegura que la ficha esté EXACTA en la coordenada */
    transform: translate(-50%, -50%);
    
    /* La animación de movimiento va aquí */
   transition: top 0.25s linear, left 0.25s linear;
    
    /* Flexbox para alinear nombre e imagen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* IMPORTANTE: El contenedor NO tiene borde ni fondo, es invisible */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 2. EL NOMBRE (Flotando arriba) */
.etiqueta-nombre {
    position: absolute; /* Lo sacamos del flujo para no afectar la posición de la ficha */
    bottom: 110%;       /* Lo empujamos hacia arriba (100% + un poquito) */
    
    background-color: rgba(0, 0, 0, 0.75); /* Fondo oscuro semitransparente */
    color: #ffffff;
    
    font-size: 10px;    /* Letra pequeña y legible */
    font-weight: bold;
    font-family: sans-serif;
    
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap; /* Evita que el nombre se parta en dos líneas */
    
    /* Trucos visuales */
    text-shadow: 1px 1px 2px black;
    pointer-events: none; /* Para que los clicks pasen a través del texto */
    z-index: 61; /* Por encima de la ficha */
}

/* Triangulito opcional debajo del nombre (flechita) */
.etiqueta-nombre::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}

/* 3. LA IMAGEN (La estética de la ficha) */
.ficha-imagen-dentro {
    /* Ocupa todo el espacio del contenedor clamp */
    width: 100% !important;
    height: 100% !important;
    
    /* Tu estética original */
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #ffffff; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    
    object-fit: cover;
    display: block;
}

/* 4. AJUSTE PARA PANTALLAS MINI (Igual que tenías antes) */
@media (max-width: 380px) {
    .ficha-contenedor {
        width: 24px !important; 
        height: 24px !important;
    }
    
    .etiqueta-nombre {
        font-size: 8px; /* Texto más pequeño en móviles viejos */
        padding: 1px 3px;
        bottom: 120%;
    }
}







/* ======================================================= */
/* 🎯 CONTENEDOR PRINCIPAL (SIN CAMBIOS)                   */
/* ======================================================= */
#resultado-dado-display {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    z-index: 2000;
    perspective: 1000px; 
    display: none; 
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    pointer-events: none;
    gap: 40px; 
}
#resultado-dado-display.mostrando { display: flex !important; }



/* ======================================================= */
/* ✨ CARAS CUADRADAS (ESTILO SUAVE)                       */
/* ======================================================= */
.dado-cubo-3d .cara {
    position: absolute;
    width: 90px; height: 90px;
    
    /* Fondo blanco puro */
    background-color: #ffffff; 
    
    /* Cuadrado perfecto */
    border-radius: 0px; 
    
    /* Borde fino gris claro */
    border: 1px solid #d1d1d1;
    
    /* Sombra interna muy ligera */
    box-shadow: inset 0 0 15px rgba(0,0,0,0.02);
    
    box-sizing: border-box;
    backface-visibility: hidden;
}

/* ======================================================= */
/* ✨ CARAS DEL DADO (LADRILLO + PUNTOS BLANCOS VISIBLES)  */
/* ======================================================= */
.dado-cubo-3d .cara {
    position: absolute;
    width: 90px; height: 90px;
    
    /* 1. EL COLOR BASE (Ladrillo Imbabura) */
    /* Lo ponemos AQUÍ directo para que no se pierda */
    background-color: #7e4b4b; 
    
    /* 2. BORDE DE DEFINICIÓN */
    border: 2px solid #5a3535;
    
    /* 3. VOLUMEN */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
    
    box-sizing: border-box;
    backface-visibility: hidden;

    /* 4. DEFINICIÓN DE PUNTOS (BLANCO PURO) */
    --color-punto: #ffffff;    
    --radio-punto: 13%; 
    --punto: radial-gradient(circle at var(--pos-x, 50%) var(--pos-y, 50%), var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px));
}
/* ======================================================= */
/* 🔢 POSICIÓN DE LOS PUNTOS                               */
/* ======================================================= */

/* Cara 1 */
.cara-1 { transform: rotateY(0deg) translateZ(45px); background-image: var(--punto); }

/* Cara 2 */
.cara-2 { transform: rotateY(90deg) translateZ(45px);
    background-image: 
        radial-gradient(circle at 25% 25%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 75%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)); }

/* Cara 3 */
.cara-3 { transform: rotateY(180deg) translateZ(45px);
    background-image: 
        radial-gradient(circle at 25% 25%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        var(--punto),
        radial-gradient(circle at 75% 75%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)); }

/* Cara 4 */
.cara-4 { transform: rotateY(-90deg) translateZ(45px);
    background-image: 
        radial-gradient(circle at 25% 25%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 25%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 25% 75%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 75%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)); }

/* Cara 5 */
.cara-5 { transform: rotateX(90deg) translateZ(45px);
    background-image: 
        radial-gradient(circle at 25% 25%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 25%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        var(--punto),
        radial-gradient(circle at 25% 75%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 75%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)); }

/* Cara 6 */
.cara-6 { transform: rotateX(-90deg) translateZ(45px);
    background-image: 
        radial-gradient(circle at 25% 20%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 25% 50%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 25% 80%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 20%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 50%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)),
        radial-gradient(circle at 75% 80%, var(--color-punto) var(--radio-punto), transparent calc(var(--radio-punto) + 1px)); }

/* ======================================================= */
/* 🌀 ANIMACIÓN GIRO                                       */
/* ======================================================= */
@keyframes girarLoco {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}

/* ======================================================= */
/* 📱 RESPONSIVE (CELULARES)                               */
/* ======================================================= */
@media (max-width: 600px) {
    #resultado-dado-display { gap: 20px; }
    /* Dados más pequeños en móvil */
    .dado-cubo-3d { width: 60px; height: 60px; }
    .dado-cubo-3d .cara { width: 60px; height: 60px; border-radius: 0px; } /* Mantener cuadrado */
    
    /* Ajuste de profundidad (mitad de 60 = 30) */
    .cara-1 { transform: rotateY(0deg) translateZ(30px); }
    .cara-2 { transform: rotateY(90deg) translateZ(30px); }
    .cara-3 { transform: rotateY(180deg) translateZ(30px); }
    .cara-4 { transform: rotateY(-90deg) translateZ(30px); }
    .cara-5 { transform: rotateX(90deg) translateZ(30px); }
    .cara-6 { transform: rotateX(-90deg) translateZ(30px); }
}

/* ======================================================= */
/* 🔘 BOTÓN DADO (TU ESTILO ORIGINAL)                      */
/* ======================================================= */
#boton-dado:not(:disabled) {
    background-color: #2e7d32 !important; color: white !important; cursor: pointer; font-weight: 900; position: relative;
    animation: pulsoAtencion 2s infinite ease-in-out; box-shadow: 0 0 15px rgba(46, 125, 50, 0.4); border: 3px solid #ffffff; transform: scale(1); transition: all 0.3s ease;
}
@keyframes pulsoAtencion {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px 10px rgba(46, 125, 50, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}
#boton-dado:disabled {
    animation: none !important; background-color: #94a3b8 !important; transform: scale(1) !important; box-shadow: none !important; cursor: not-allowed; border: 2px solid #e2e8f0;
}
/* 2. AJUSTE RESPONSIVE (MÓVIL) - ¡AQUÍ ESTÁ LA SOLUCIÓN! */
@media (max-width: 768px) {
    #boton-dado {
        /* 🔥 1. PERMITIMOS QUE EL TEXTO BAJE DE LÍNEA */
        white-space: normal !important; 
        word-wrap: break-word !important;
        
        /* 🔥 2. REDUCIMOS LA LETRA PARA QUE QUEPA */
        font-size: 0.75rem !important; /* Letra pequeñita (~12px) */
        
        /* 🔥 3. AJUSTAMOS EL ESPACIO INTERNO */
        padding: 4px 8px !important; 
        
        /* 4. CONTROL DE TAMAÑO */
        width: 100%;       /* Que use el espacio disponible */
        max-width: 120px;  /* Pero que no se haga gigante */
        height: auto;      /* IMPORTANTE: Deja que crezca hacia abajo */
        min-height: 35px;
        
        /* 5. CENTRADO PERFECTO */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.1; /* Líneas pegaditas */
    }
}
/* ======================================================= */
/* 🎲 HUD: CONTENEDOR INVISIBLE (SOLO DADOS FLOTANDO)      */
/* ======================================================= */
#hud-dados-permanente {
    position: absolute;
    /* Ubicación en la pantalla */
    top: 20px; 
    right: 20px; 
    z-index: 1000;
    
    /* 🔥 1. SIN FONDO NI BORDES */
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    
    /* Layout */
    display: flex;
    gap: 30px; /* Un poco más de espacio entre ellos para que respiren */
    
    /* 🔥 2. PERSPECTIVA 3D (Vital para que se vean cubos y no cuadrados planos) */
    perspective: 800px; 
    transform: scale(0.7); /* Tamaño general */
    transform-origin: top right;
    
    /* Evita que el contenedor invisible bloquee clicks en el mapa (opcional) */
    pointer-events: none; 
}

/* Permitimos clicks en los dados si fuera necesario (aunque giran solos) */
#hud-dados-permanente > * {
    pointer-events: auto;
}

/* 📱 Ajuste Móvil */
@media (max-width: 768px) {
    #hud-dados-permanente {
        top: 10px;
        right: 10px;
        transform: scale(0.5);
        gap: 15px;
    }
}
/* ======================================================= */
/* 🧊 EL DADO (ESTADO INICIAL 3D)                          */
/* ======================================================= */
.dado-cubo-3d {
    width: 90px; height: 90px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* 🔥 AQUÍ ESTÁ EL TRUCO PARA EL INICIO: */
    /* Le ponemos la misma inclinación (-10) por defecto */
    /* Así, cuando cargues la página, ya se ven en 3D (Cara 1) */
    transform: rotateX(-10deg) rotateY(-10deg);
}

/* Cuando giran loco, ignoran la inclinación temporalmente */
.dado-cubo-3d.rodando {
    animation: girarLoco 0.15s infinite linear;
}

/* ======================================================= */
/* 🅰️ RESULTADO EN TEXTO (CENTRO DEL MAPA)                 */
/* ======================================================= */
.resultado-texto-letras {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    z-index: 3000; /* Encima de todo */
    
    font-family: 'Arial Black', 'Impact', sans-serif; /* Fuente gruesa */
    font-size: 5rem; /* ¡GIGANTE! Ajusta si es muy grande */
    font-weight: 900;
    
    /* Estilo colorido y llamativo */
    color: #FFD700; /* Dorado */
    -webkit-text-stroke: 3px #000; /* Borde negro grueso */
    text-shadow: 5px 5px 0px rgba(0,0,0,0.5); /* Sombra dura */
    
    pointer-events: none; /* Click traspasa */
    white-space: nowrap;
    
    /* Animación de entrada y salida */
    animation: popInOut 1.2s ease-in-out forwards;
}

/* 📱 En celular un poco más pequeño */
@media (max-width: 768px) {
    .resultado-texto-letras {
        font-size: 3.5rem;
        -webkit-text-stroke: 2px #000;
    }
}

/* Animación: Crece -> Se queda -> Se desvanece */
@keyframes popInOut {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ======================================================= */
/* 🏠 1. EL CONTENEDOR PRINCIPAL DEL MODAL                 */
/* ======================================================= */
.modal-imbabura {
    /* 🔑 Posicionamiento base (respetando header en modo normal) */
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Fondo oscuro base */
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    
    /* Flexbox para alineación */
    display: none; 
    justify-content: center !important;
    align-items: flex-start !important; /* Alineado arriba por defecto */
    
    z-index: 5000;
    padding-top: 20px; /* Espacio superior normal */
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    
    /* Transición suave de color de fondo */
    transition: background-color 0.3s ease;
}

/* Forzar visualización cuando JS lo activa */
.modal-imbabura[style*="display: block"],
.modal-imbabura[style*="display: flex"] {
    display: flex !important;
}

/* ======================================================= */
/* 🧩 TARJETA DEL MODAL (ESTILO TIERRA/CAFECITOS)          */
/* ======================================================= */
.modal-contenido {
    /* 1. Fondo crema cálido (Mismo de antes, funciona bien) */
    background: #fffcf5; 
    
    /* 🔥 2. BORDE COLOR TIERRA (Café medio elegante) */
    /* Antes era verde chillón (#43a047) */
    border: 4px solid #8c6e54; 
    
    /* El truco del doble borde blanco se mantiene */
    outline: 4px solid #ffffff; 
    outline-offset: -8px;       
    border-radius: 30px; 
    
    /* 🔥 3. SOMBRA 3D COLOR CHOCOLATE (Café oscuro) */
    /* Antes era verde oscuro (#2e7d32) */
    box-shadow: 
        0 10px 0px #5a4231,  /* Sombra sólida oscura abajo */
        0 20px 20px rgba(0,0,0,0.15); /* Sombra suave */
    
    /* Dimensiones y centrado (Igual que antes) */
    width: 90%;
    max-width: 600px;
    padding: 40px 30px 30px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* Animación de entrada (Pop) */
    animation: popEntrada 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 🔥 ADORNO SUPERIOR (La "cinta" decorativa) */
/* Cambiamos los colores vibrantes por un degradado de tonos tierra suaves */
.modal-contenido::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 60px;
    height: 6px;
    /* Degradado: Beige -> Terracota claro -> Café */
    background: linear-gradient(to right, #e0c39e, #bc9e82, #8c6e54);
    border-radius: 10px;
}

/* (La animación @keyframes popEntrada sigue siendo la misma de antes) */

/* Animación de entrada tipo "Pop" (Rebote) */
@keyframes popEntrada {
    0% { transform: scale(0.5) translateY(50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
/* ======================================================= */
/* 🖼️ 3. ELEMENTOS INTERNOS (IMAGEN COMPLETA)             */
/* ======================================================= */
#modalTitle {
    color: #2e7d32; /* Verde temático de Imbabura */
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

#modalImage {
    width: 100%;
    max-height: 300px;
    /* 🔑 Muestra la imagen completa sin cortes */
    object-fit: contain; 
    border-radius: 5px;
   
}

#modalDescription {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 5px 0;
}
@keyframes latidoGeoparque {
    0% { transform: scale(1); color: #2e7d32; } /* Verde */
    50% { transform: scale(1.05); color: #ef6c00; } /* Naranja atardecer/tierra */
    100% { transform: scale(1); color: #2e7d32; }
}


/* ======================================================= */
/* 🌀 5. ANIMACIÓN Y REGLAS DEL PADRE                      */
/* ======================================================= */
@keyframes aparecerDesdeArriba {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 🔑 IMPORTANTE: El main debe estar configurado así */
main {
    position: relative !important;
    overflow: hidden;
}
/* ======================================================= */
/* 📝 1. ÁREA DE LA PREGUNTA                               */
/* ======================================================= */
#modalTitle {
    color: #1b5e20;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-align: center;
}

#modalDescription {
    color: #424242;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 5px;
    text-align: center;
}

/* ======================================================= */
/* 🎴 ESTILO DE TARJETAS DE OPCIÓN (COMPACTO)              */
/* ======================================================= */

#modalOptionsContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Mantenemos un buen espacio entre botones para que no se peguen */
    gap: 10px; 
    margin-top: 10px;
}

.opcion-boton {
    width: 100%;
    display: flex;
    align-items: center;
    
    /* 🔻 CAMBIO CLAVE: Reducimos el padding vertical */
    /* Antes: 15px 20px -> Ahora: 8px arriba/abajo, 15px lados */
    padding: 8px 15px; 
    
    background: #ffffff;
    color: #333;
    
    /* Diseño tipo Tarjeta */
    border: 2px solid #e0e0e0;
    border-radius: 12px; /* Un poco menos redondeado para ahorrar espacio visual */
    
    /* 🔻 CAMBIO CLAVE: Ajustamos texto para que encaje mejor */
    font-size: 0.95rem; 
    line-height: 1.3;   /* Altura de línea compacta */
    font-weight: 600;
    text-align: left;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    
    /* Aseguramos que tenga una altura mínima cómoda para el dedo pero no gigante */
    min-height: 45px; 
}

/* --- ESTADOS INTERACTIVOS --- */
.opcion-boton:not(:disabled):hover {
    border-color: #2e7d32;
    background-color: #f1f8e9;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* --- 🛑 ESTADO BLOQUEADO --- */
.opcion-boton:disabled {
    cursor: default;
    opacity: 0.8;
    transform: none !important;
    box-shadow: none !important;
}

/* --- ✅ ESTADO CORRECTO --- */
.opcion-boton.opcion-correcta, 
.opcion-boton.respuesta-correcta-final {
    background-color: #e8f5e9 !important;
    border-color: #2e7d32 !important;
    color: #1b5e20 !important;
}

/* --- ❌ ESTADO INCORRECTO --- */
.opcion-boton.opcion-incorrecta {
    background-color: #ffebee !important;
    border-color: #d32f2f !important;
    color: #b71c1c !important;
}


/* ======================================================= */
/* 🔘 BOTÓN DE ACCIÓN (CONTINUAR / ENTENDIDO)              */
/* ======================================================= */
#contenedor-btn-accion, #contenedor-btn-pregunta, #contenedor-btn-dato {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.btn-modal-accion {
    background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.4);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-modal-accion:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(46, 125, 50, 0.5);
}

.btn-modal-accion:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(46, 125, 50, 0.4);
}

/* ======================================================= */
/* 📊 CONTENEDOR DEL SCOREBOARD (AJUSTE DE ESPACIO)        */
/* ======================================================= */
.marcador-partida-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    /* 🔥 CORRECCIÓN 1: Asegurar que el padding no sume al ancho */
    padding: 10px 5px; /* 10px arriba/abajo, 5px lados */
    box-sizing: border-box; 
    width: 100%;
    
    max-height: 450px; 
    overflow-y: auto; 
    overflow-x: hidden; /* Evitamos que salga barra horizontal */
}
/* ======================================================= */
/* 🪪 TARJETA DE JUGADOR (CENTRADA PARA VER BORDES)        */
/* ======================================================= */
.jugador-score-partida {
    /* 🔥 CORRECCIÓN 2: Ancho controlado para que no toque los bordes */
    width: 96%;        /* Un pelín menos del 100% */
    margin: 0 auto;    /* Se centra automáticamente */
    box-sizing: border-box; /* Vital para medidas exactas */
    
    border: 1px solid #e2e8f0;
    border-radius: 12px; 
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}
.jugador-score-partida.turno-activo {
    /* El borde es más grueso, así que el margen ayuda a que se vea entero */
    border: 2px solid #2e7d32; 
    background: #f0fdf4;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.1);
}
/* ======================================================= */
/* 🔝 FILA SUPERIOR (MÁS PEQUEÑA)                         */
/* ======================================================= */
.score-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ficha-wrapper {
    width: 32px; /* Reducido de 40px */
    height: 32px;
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.ficha-wrapper img {
    width: 22px; /* Ficha más pequeña */
    height: auto;
}

.info-jugador {
    display: flex;
    flex-direction: row; /* Nombre y Puntos en la misma línea para ganar espacio */
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nombre-jugador {
    font-weight: 800;
    font-size: 0.9rem; /* Fuente optimizada */
    color: #1e293b;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Corta nombres muy largos */
    max-width: 80px;
}

.puntos-badge {
    background: #2e7d32;
    color: white;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ======================================================= */
/* ✨ ANIMACIONES DE FEEDBACK (GANAR VS PERDER)            */
/* ======================================================= */

/* --- CASO 1: GANAR PUNTOS (Latido Dorado) --- */
.animacion-ganar {
    animation: latidoExito 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes latidoExito {
    0% { transform: scale(1); background-color: #2e7d32; }
    20% { 
        transform: scale(1.5); /* Crece mucho */
        background-color: #FFD700; /* DORADO */
        color: #000;
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
        border-color: #fff;
    }
    40% { transform: scale(1.2); }
    60% { transform: scale(1.4); } /* Segundo rebote */
    100% { transform: scale(1); background-color: #2e7d32; color: #fff; }
}

/* --- CASO 2: PERDER PUNTOS (Sacudida Roja) --- */
.animacion-perder {
    animation: sacudidaError 0.8s ease-in-out forwards;
}

@keyframes sacudidaError {
    0% { transform: translateX(0); background-color: #2e7d32; }
    15% { 
        transform: translateX(-8px); /* Se mueve a la izquierda */
        background-color: #D32F2F; /* ROJO FUERTE */
        box-shadow: 0 0 15px rgba(211, 47, 47, 0.8);
    }
    30% { transform: translateX(8px); } /* Derecha */
    45% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); background-color: #2e7d32; }
}

/* --- CASO 3: ITEM NUEVO (Entrada triunfal) --- */
.animacion-item {
    animation: entradaItem 1s bounce; 
}
@keyframes entradaItem {
    0% { opacity: 0; transform: translateY(-20px) scale(0.5); }
    60% { opacity: 1; transform: translateY(5px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
}
/* Animación para ITEMS NUEVOS (Entrada triunfal) */
.animacion-item-nuevo {
    /* Una animación de rebote y flash */
    animation: itemPop 1s ease-out;
}

@keyframes itemPop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 15px white; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); box-shadow: none; }
}


/* ======================================================= */
/* 🎒 FILA DE ÍTEMS MINIATURA                             */
/* ======================================================= */
.inventario-fila-inferior {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0;
}

.recompensa-item-wrapper {
    position: relative;
}

.recompensa-icono-miniatura {
    width: 28px; /* Reducido de 36px */
    height: 28px;
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.recompensa-contador-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #1e293b;
    color: white;
    font-size: 0.6rem;
    padding: 0px 4px;
    border-radius: 4px;
    font-weight: 900;
    border: 1px solid #ffffff;
}

#overlay-celebracion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* Fondo oscurecido pero transparente para ver el mapa */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000; /* Por encima de todo */
    backdrop-filter: blur(3px); /* Difumina un poco el mapa al fondo */
}

.celebracion-content {
    text-align: center;
    animation: zoomInCelebration 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.celebracion-content img {
    max-width: 400px;
    width: 80%;
    filter: drop-shadow(0 0 15px gold);
}

.texto-victoria {
    color: #FFD700;
    font-size: 4rem;
    font-weight: 900;
    text-shadow: 4px 4px 0 #000, 0 0 20px rgba(255, 215, 0, 0.8);
    margin-top: 20px;
    font-family: 'Arial Black', sans-serif;
}

/* Animaciones */
@keyframes zoomInCelebration {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}



/* ================================================= */
/* 🎬 ESTILOS PARA VIDEOS (MODO CINE IMPROVED)       */
/* ================================================= */

/* 1. EL FONDO (Oscuro y Centrado) */
#gameModal.modo-cine {
    background-color: rgba(0, 0, 0, 0.98) !important; /* Casi negro total */
    backdrop-filter: blur(5px); /* Desenfoca el juego de fondo */
    
    /* Centrado perfecto del video en la pantalla */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important; /* Quitamos padding del modal para usar todo el espacio */
}

/* 2. EL CONTENEDOR (Hacemos que crezca) */
#gameModal.modo-cine .modal-contenido {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    
    /* 🔥 AQUI ESTÁ EL CAMBIO DE TAMAÑO */
    width: 95% !important;   /* Ocupa casi todo el ancho en móviles */
    max-width: 1100px !important; /* En PC se ve GIGANTE (antes 800px) */
    
    /* Centramos contenido interno */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Animación de entrada suave */
    animation: zoomInVideo 0.5s ease-out;
}

/* 3. EL REPRODUCTOR DE VIDEO */
#modalVideo {
    width: 100%;
    height: auto;
    max-height: 80vh; /* Que no sea más alto que la pantalla */
    
    outline: none;
    background: #000;
    
    /* Bordes y Sombra de Cine */
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); /* Sombra negra intensa alrededor */
    border: 1px solid #333; /* Borde sutil gris oscuro */
}

/* Animación de entrada */
@keyframes zoomInVideo {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =========================================
   ESTILO BOTÓN SALTAR (TU DISEÑO + AJUSTES)
   ========================================= */
.btn-saltar-video {
    /* 1. CENTRADO PERFECTO */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px; /* Un poquito más de aire entre icono y texto */

    /* 2. TAMAÑO Y POSICIÓN */
    width: fit-content !important;
    min-width: 140px; 
    
    /* Margen arriba para separarlo del video */
    margin: 20px auto 0 auto !important; 
    padding: 10px 28px !important; /* Botón un pelín más grande */
    
    /* 3. TIPOGRAFÍA */
    font-family: 'Fredoka One', sans-serif; /* O tu fuente principal */
    font-size: 1rem !important; 
    line-height: 1 !important;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* 4. COLOR: Naranja Ladrillo */
    background: linear-gradient(135deg, #EF6C00 0%, #E65100 100%) !important; 
    color: #FFFFFF !important;
    border: 2px solid rgba(255,255,255,0.2) !important; /* Borde sutil brillante */
    border-radius: 50px !important;
    
    /* 5. DETALLES */
    box-shadow: 0 4px 15px rgba(239, 108, 0, 0.4); /* Resplandor naranja */
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

/* Efecto Hover (Brillo) */
.btn-saltar-video:hover {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.6);
}

.btn-saltar-video:active {
    transform: scale(0.95);
}

/* Icono */
.btn-saltar-video .icono-saltar {
    font-size: 1.1rem;
    margin-top: -2px;
}/* ================================================= */
/* 🎥 EXCEPCIÓN: MODO CINE PARA EL MODAL DEDICADO    */
/* (Pega esto AL FINAL de tu archivo CSS)            */
/* ================================================= */

/* 1. Cuando el overlay tiene la clase .modo-cine */
.modal-overlay-dedicado.modo-cine {
    background: rgba(0, 0, 0, 0.95) !important; /* Fondo casi negro */
    padding: 0 !important; /* Quitamos padding para aprovechar espacio */
}

/* 2. La caja blanca se transforma en "Pantalla de Cine" */
.modal-overlay-dedicado.modo-cine .caja-modal-dedicada {
    /* 🔥 ROMPEMOS EL LÍMITE DE 900PX */
    max-width: 1100px !important; 
    width: 98% !important;
    
    /* Quitamos el estilo "Madera/Papel" */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* Centramos el contenido (el video) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    height: auto !important;
}

/* 3. Aseguramos que el video dentro se vea bien */
.modal-overlay-dedicado.modo-cine video {
    width: 100%;
    max-height: 80vh;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
/* =========================================
   ⏱️ ESTILOS DEL RELOJ MODO FERIA (ESTILO IMBABURA)
   ========================================= */
.reloj-feria-box {
    /* Fondo crema suave en degradado (más cálido) */
    background: linear-gradient(145deg, #ffffff, #fff8e1);
    
    /* Borde naranja tierra (acorde a la identidad del juego) */
    border: 2px solid #FF8F00;
    border-radius: 15px; /* Bordes más redondeados */
    
    padding: 8px 15px;
    margin: 10px auto;
    
    /* Flexbox para alinear */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    /* Sombra suave para dar profundidad 3D */
    box-shadow: 0 4px 0 rgba(255, 143, 0, 0.2), 0 8px 10px rgba(0,0,0,0.1);
    
    width: 90%;
    animation: entradaRebote 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Entrada con rebote */
    position: relative;
    overflow: hidden;
}

/* Ícono del reloj */
.reloj-icono {
    font-size: 2rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    animation: ticTac 1s infinite ease-in-out; /* Animación de péndulo */
}

/* Contenedor del texto */
.reloj-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Los números del tiempo */
#timer-display {
    font-size: 1.6rem;
    font-weight: 900;
    color: #3E2723; /* Marrón oscuro (Tierra) en vez de negro */
    font-family: 'Consolas', 'Monaco', monospace; /* Monospaced para que no salten los números */
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 1px 1px 0px rgba(255,255,255,1);
}

/* Etiqueta pequeña "TIEMPO RESTANTE" */
.reloj-texto small {
    font-size: 0.65rem;
    color: #8D6E63; /* Marrón claro */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* =========================================
   🚨 ESTADO CRÍTICO (ÚLTIMO MINUTO)
   ========================================= */
.reloj-feria-box.peligro {
    background: #FFEBEE; /* Fondo rojizo muy suave */
    border-color: #D32F2F; /* Borde rojo alerta */
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.5); /* Resplandor rojo */
    animation: vibrarReloj 0.5s infinite; /* Tiembla ligeramente */
}

.reloj-feria-box.peligro #timer-display {
    color: #D32F2F; /* Números rojos */
    transform: scale(1.1); /* Un poco más grandes */
    transition: all 0.3s ease;
}

.reloj-feria-box.peligro .reloj-icono {
    animation: none; /* Quitamos el tic-tac suave */
    transform: scale(1.2); /* Icono fijo y grande */
}

/* =========================================
   🎬 ANIMACIONES
   ========================================= */

/* Efecto de péndulo suave para el icono */
@keyframes ticTac {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Entrada con rebote (más dinámica) */
@keyframes entradaRebote {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    60% { opacity: 1; transform: translateY(5px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Vibración de urgencia */
@keyframes vibrarReloj {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-2px, -1px); }
    100% { transform: translate(0, 0); }
}





/*-----------------------------------------------------------------------*/
/********* ANIMACION REDOMPENSA EN LUGAR EMBLEMATICO-------------------*****/
/* Animación de Súper Énfasis: Crece gigante y vuelve (Sin efectos de luz) */
.animacion-enfasis-recompensa {
    z-index: 9999; 
    position: relative;
    animation: pulsoRecompensa 1.8s ease-in-out forwards;
}

@keyframes pulsoRecompensa {
    0% {
        transform: scale(1);
    }
    50% {
        /* Se hace 6 veces más grande en el centro de la animación */
        transform: scale(6); 
    }
    100% {
        /* Regresa a su tamaño original de 30px o 35px */
        transform: scale(1);
    }
}