/* --- style.css --- */

body {
    background-color: #050505; /* Un negro casi puro para el fondo exterior */
    margin: 0;
    padding: 0;
    height: 100vh; /* El cuerpo ocupa el 100% de la ventana */
    display: flex;
    justify-content: center; /* Centra el juego horizontalmente */
    align-items: center;     /* Centra el juego verticalmente */
    overflow: hidden;        /* Evita que salgan barras de scroll */
    font-family: 'Georgia', serif;
}

/* --- LAYOUT GLOBAL (CON 20PX DE MARGEN) --- */
#game-container {
    display: flex;
    flex-direction: column;
    /* Usamos calc() para restar exactamente 40px (20px por lado) al ancho y alto total */
    width: calc(100vw - 100px);  
    height: calc(100vh - 100px); 
    
    /* Le devolvemos su estética de "juego enmarcado" */
    border: 4px solid #3e2723; 
    border-radius: 12px;       
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    
    overflow: hidden;
    background-color: #000;
}

/* ZONA DE JUEGO (Arriba) */
#game-view {
    width: 100%;
    flex: 1; /* MAGIA: Esto hace que la imagen ocupe todo el espacio que sobra arriba */
    position: relative;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}


#bottom-inventory {
    width: 75%;            
    margin: 0 auto;        
    /* La altura ahora es un 15% de lo que mida tu pantalla de alto */
    height: 15vh; 
    min-height: 90px; /* Pero nunca más pequeño que esto */
    max-height: 150px; /* Ni más grande que esto */
    flex-shrink: 0; 
    background-color: #120b08; 
    border: 4px solid #5d4037;
    border-bottom: none;       
    border-radius: 20px 20px 0 0; 
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 2vw; 
    box-shadow: inset 0 15px 20px rgba(0,0,0,0.6), 0 -10px 20px rgba(0,0,0,0.7); 
    z-index: 100;
}

.inventory-slot {
    height: 75%; /* Ocupa el 75% de la barra */
    aspect-ratio: 1 / 1; /* ¡Magia! Se mantiene cuadrado automáticamente */
    background-color: rgba(255, 255, 255, 0.05); 
    border: 2px solid #3e2723;
    border-radius: 12px; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.2s;
}

.inventory-slot:hover {
    background-color: rgba(255, 200, 100, 0.15);
    border-color: #ffca28; 
    transform: scale(1.05);
}

.inventory-slot-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.8));
}

.inventory-slot-text {
    display: none; 
}

.slot-counter {
    position: absolute;
    bottom: 2px;
    right: 5px;
    color: #ffcc80;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: 1px 1px 2px black;
    font-family: sans-serif;
    pointer-events: none;
}

/* Contenedores de vistas */
.view-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    pointer-events: none; 
}
/* --- CONTINÚA AQUÍ TU CÓDIGO DE HOTSPOTS --- */

/* --- ESTILO GENERAL DE LOS HOTSPOTS (AHORA INVISIBLES) --- */
.hotspot {
    position: absolute;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer; 
    z-index: 10;
    
    /* NUEVO: Esto fuerza a que se puedan clicar siempre */
    pointer-events: auto; 
}

/* Quitamos también cualquier color de fondo que apareciera al pasar el ratón por encima */
.hotspot:hover {
    background-color: transparent !important;
    border: none !important;
    
    /* OPCIONAL: Si quieres que el ratón brille un poquitito al pasar por encima 
       puedes usar un filtro o dejarlo así para que sea 100% misterioso */
}

/* --- VISTA 1: CHIMENEA --- */
/* --- VISTA 1: CHIMENEA (cocina1.jpg) --- */
#jar-1 { 
top: 3%; 
left: 43%; 
width: 7%; 
height: 16%; 
border-radius: 50%; 
}
#jar-2 { 
top: 10%; 
left: 57%; 
width: 7%; 
height: 16%; 
border-radius: 50%;
 }
#jar-3 { 
top: 8%; 
left: 64%; 
width: 7%; 
height: 16%; 
border-radius: 50%; 
}
#candle-1 { top: 54%; left: 32%; width: 5%; height: 14%; }
#candle-2 { top: 61%; left: 79%; width: 5%; height: 14%; }
#central-hearth { top: 50%; left: 54%; width: 18%; height: 15%; }
#exit-cave { top: 25%; left: 0%; width: 15%; height: 60%; }
/* NUEVO: Coordenadas de la Cuchara de Madera (Vista 1) */
#wooden-spoon { 
    top: 40%; 
    left: 20%; 
    width: 10%; 
    height: 30%; 
    z-index: 55;
}
/* NUEVO: Coordenadas del Cuenco (Vista 5) */
#bowl { 
    top: 70%;     /* Altura sobre la encimera del mueble de madera */
    left: 22%;    /* Posición horizontal (ajústalo un poco si no cuadra exacto) */
    width: 8%; 
    height: 12%; 
    z-index: 55;
}
/* --- VISTA 2 Y 3: COMEDOR (cocina4.jpg y cocina5.jpg) --- */
#cupboard { top: 18%; left: 72%; width: 14%; height: 28%; }
/* Espaguetis por encima (z-index 50) */
#spaghetti { top: 18%; left: 72%; width: 14%; height: 28%; z-index: 50; } 
/* Botón de cerrar por debajo (z-index 40) */
#close-cupboard { top: 18%; left: 72%; width: 14%; height: 28%; z-index: 40; }

#grater { 
    top: 45%; 
    left: 0%; 
    width: 10%; 
    height: 35%; 
}

/* --- DRAG AND DROP (Velas) --- */
.draggable-candle {
    cursor: grab;
    border: 2px dashed rgba(255, 200, 100, 0.8) !important;
}
.draggable-candle:active { cursor: grabbing; }
.drag-over-hearth {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid white !important;
}
/* --- FUEGO ANIMADO --- */
@keyframes fireFlicker {
    0%   { box-shadow: inset 0 -20px 40px rgba(255, 80, 0, 0.8), 0 0 20px rgba(255, 60, 0, 0.4); background-color: rgba(255, 100, 0, 0.15); }
    50%  { box-shadow: inset 0 -30px 60px rgba(255, 110, 0, 0.9), 0 0 30px rgba(255, 90, 0, 0.6); background-color: rgba(255, 120, 0, 0.25); }
    100% { box-shadow: inset 0 -25px 45px rgba(255, 100, 0, 0.8), 0 0 25px rgba(255, 80, 0, 0.5); background-color: rgba(255, 110, 0, 0.2); }
}
.hearth-burning {
    animation: fireFlicker 0.2s infinite alternate;
    border: none !important;
    border-radius: 10px;
}

/* --- VISTA 5 Y 6: MUEBLE LATERAL Y ENTRADA AL TÚNEL --- */
#sideboard-cabinet { top: 75%; left: 63%; width: 8%; height: 16%; }
/* Queso por encima (z-index 50) */
#sideboard-cabinet-open { top: 75%; left: 63%; width: 8%; height: 16%; z-index: 50; } 
/* Botón de cerrar por debajo (z-index 40) */
#close-sideboard { top: 75%; left: 63%; width: 8%; height: 16%; z-index: 40; }
#cave-opening, #cave-opening-open { 
    top: 22%; 
    left: 75%; 
    width: 12%; 
    height: 30%; 
    z-index: 50; 
}
/* --- VISTA 10: CUEVA SUBTERRÁNEA (cocina10.jpg) --- */
#pot-cabinet { 
    top: 75%; left: 70%; width: 16%; height: 16%; 
    z-index: 50; /* Mueble y olla por encima */
}
/* Botón de cerrar por debajo */
#close-pot-cabinet { 
    top: 75%; left: 70%; width: 16%; height: 16%; 
    z-index: 40; 
}

#subterranean-fountain {
    top: 30%; left: 54%; width: 15%; height: 30%; z-index: 60; 
}
/* --- GANCHO PARA LA OLLA (Encima de los fogones en VISTA 1) --- */
#pot-hook {
    top: 40%;
    left: 60%;
    width: 10%;
    height: 15%;
    z-index: 65; 
}
/* --- ESTADO DE LA OLLA COLGADA --- */
.pot-hanging {
    background-image: url('texturas/olla2.png'); /* Cambiado a olla.png como pediste */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none !important;
    position: relative; /* Muy importante para anclar el vapor a la olla */
}
/* --- EFECTO ANIMADO DE VAPOR DE AGUA --- */
/* Creamos una "nube" directamente sobre la olla usando ::after */
.pot-hanging::after {
    content: '';
    position: absolute;
    top: -40%;          /* Sube por encima de la olla */
    left: 20%;
    width: 60%;
    height: 70%;
    /* Un gradiente radial que simula una nube de vapor blanca/azulada */
    background: radial-gradient(circle, rgba(220, 230, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    filter: blur(8px);  /* Difumina los bordes para que parezca gas */
    pointer-events: none; /* Evita que el humo bloquee el ratón */
    
    /* Llamamos a la animación que lo hace subir y desaparecer */
    animation: steamRise 2s infinite ease-in; 
}
/* La coreografía del vapor: sube, se expande y se desvanece */
@keyframes steamRise {
    0% { 
        transform: translateY(10px) scale(0.8); 
        opacity: 0; 
    }
    40% { 
        opacity: 0.7; /* Momento más visible */
    }
    100% { 
        transform: translateY(-40px) scale(1.5); /* Sube y se hace grande */
        opacity: 0; /* Desaparece en el aire */
    }
}
/* --- NAVEGACIÓN Y BOTONES DE INTERFAZ --- */
.nav-arrow:hover { color: #ffcc80; transform: scale(1.2); }
#nav-arrow-right { right: 20px; }
#nav-arrow-left { left: 20px; }
/* Reducimos también las flechas gigantes */
.nav-arrow {
    position: absolute;
    top: 45%;
    font-size: clamp(3rem, 6vw, 9rem);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
	z-index: 400;
    /* ... (resto igual) */
}
/* --- BOTÓN DE PISTAS --- */
.ui-button {
    position: absolute;
    background: rgba(15, 10, 5, 0.9);
    color: #ffcc80;
    border: 2px solid #5d4037;
    padding: 1.5vh 2vw; 
    border-radius: 12px;
    cursor: pointer;
    z-index: 40;
    font-size: clamp(1rem, 1.5vw, 2.5rem); 
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}
.ui-button:hover {
    transform: scale(1.05);
    background: rgba(30, 20, 10, 0.9);
}
#hints-button {
    top: 20px;  /* LO MOVEMOS A LA PARTE SUPERIOR */
    left: 20px; /* EN LA ESQUINA IZQUIERDA */
}

/* Animación de alerta para nuevas pistas */
@keyframes pulseAlert {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 200, 100, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 15px 10px rgba(255, 200, 100, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 200, 100, 0); }
}
.new-hint-alert {
    animation: pulseAlert 1.5s infinite;
    background: rgba(80, 50, 20, 0.9) !important;
    border-color: #ffcc80 !important;
    color: #fff !important;
}

/* ========================================= */
/* --- 3. CAJA DEL RATÓN FLUIDA --- */
/* ========================================= */
#dialogue-box {
    position: absolute;
    bottom: 2vh; 
    left: 50%; 
    transform: translateX(-50%); 
    
    /* El ancho es el 55% de la pantalla, pero con límites */
    width: 55vw; 
    max-width: 900px;
    min-width: 450px;
    
    /* ¡Magia 2! Forzamos a que la caja tenga la misma proporción que tu imagen */
    aspect-ratio: 900 / 350; 
    
    box-sizing: border-box; 
    background-image: url('texturas/pistas.png');
    background-size: 100% 100%; /* La imagen se estira exacto a la caja */
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    box-shadow: none;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* PADDINGS EN PORCENTAJE: Si la imagen se encoge, los márgenes también */
    padding-left: 21%;   /* Espacio izquierdo para el cuerpo del ratón */
    padding-right: 12%;   /* Margen derecho */
    padding-top: 3.5%;   /* Margen arriba */
    padding-bottom: 13.5%; /* Margen abajo (para librar el piquito) */
    
    z-index: 350; 
}
#dialogue-text {
    font-family: 'Georgia', serif; 
    /* El texto del ratón se ajusta solo */
    font-size: clamp(0.9rem, 1.6vw, 1.8rem); 
    color: #2b1a10; 
    text-align: center;
    margin: 0;
    font-weight: bold;
    width: 100%; 
}

#close-dialogue {
    position: absolute;
    /* La X se posiciona también con porcentajes */
    top: 10%; 
    right: 8%;
    color: #8b0000; 
    font-size: clamp(1rem, 2vw, 6em);
    font-weight: bold;
    cursor: pointer;
    z-index: 360;
}
#close-dialogue:hover {
    color: #ff0000;
}
/* El contador de luces (escondido abajo a la derecha del globo) */
#light-inventory {
    position: absolute;
    bottom: 60px; 
    right: 70px; 
    color: #555; /* Letra oscura */
    font-size: 1.2em !important;
    font-weight: bold;
}
.highlight { color: #ffcc80; font-weight: bold; }
.rústico { font-family: 'Times New Roman', serif; }

/* --- SECUENCIA DE RECOGIDA --- */
.pickup-sequence {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.6);
    z-index: 300;
}
#centered-item-img {
    max-width: 25%;
    max-height: 25%;
    opacity: 0;
    transform: scale(3);
    animation: pickupItem 3s ease-out forwards;
}
@keyframes pickupItem {
    0% { opacity: 0; transform: scale(3); }
    15% { opacity: 1; transform: scale(1.2); }
    30% { transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.1); }
}
/* --- REPRODUCTOR DE VÍDEO --- */
#source-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 85; 
    display: none;
    pointer-events: auto; 
    background-color: black;
}
/* --- VÍDEO DE INTRODUCCIÓN --- */
.intro-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Para que ocupe toda la pantalla sin deformarse */
    background-color: #000;
    z-index: 2000; /* Por encima de la pantalla de inicio y del juego */
    display: none; /* Empieza oculto */
}
/* Existing style.css content */
/* ... */
#mute-button {
    top: 2vh; 
    right: 2vw; /* Lo mandamos a la derecha */
    padding: 1.5vh 1.5vw; /* Un poco más cuadrado que el de pistas */
    z-index: 60;
}
/* === ESTILOS PARA LA PANTALLA DE INICIO === */
.start-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black; /* Fallback */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Asegura que esté por encima de todo */
}
.start-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el área sin deformar */
}
.play-button {
    position: relative;
    background: rgba(15, 10, 5, 0.9);
    color: #ffcc80;
    border: 4px solid #5d4037;
    /* Usamos 'vh' y 'vw' (porcentaje de la pantalla) en lugar de píxeles */
    padding: 3vh 5vw; 
    border-radius: 12px;
    cursor: pointer;
    /* clamp(mínimo, ideal, máximo): La letra se adapta a la pantalla */
    font-size: clamp(2rem, 4vw, 5rem); 
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: transform 0.2s, background 0.2s;
}
.play-button:hover {
    transform: scale(1.05);
    background: rgba(30, 20, 10, 0.9);
    box-shadow: 0 8px 20px rgba(0,0,0,0.9);
}
.play-button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 5px rgba(0,0,0,0.9);
}
/* --- BOTONES DEL MENÚ DE INICIO --- */
.start-buttons {
    display: flex;
    gap: 3vw; /* Espacio entre los botones */
    position: relative;
    z-index: 1001; /* Por encima de la imagen de fondo */
}
/* Estilo rojizo para el botón de salir */
.exit-style {
    background: rgba(80, 15, 10, 0.9);
    border-color: #7a2b20;
}
.exit-style:hover {
    background: rgba(120, 20, 15, 0.9);
}
/* =========================================== */
/* --- BARRA DE PROGRESO DE COCCIÓN --- */
#cooking-timer {
    position: absolute;
    top: 37%;     /* Justo encima de la olla */
    left: 63%;    /* Alineado con el gancho */
    width: 10%;
    height: 12px;
    background-color: rgba(20, 10, 5, 0.9);
    border: 2px solid #5d4037;
    border-radius: 6px;
    z-index: 70;
    box-shadow: 0 4px 8px rgba(0,0,0,0.7);
    overflow: hidden;
}
#cooking-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #ffca28; /* Naranja/Dorado brillante */
    box-shadow: 0 0 10px rgba(255, 200, 100, 0.8);
    transition: width 1s linear; /* Animación fluida cada segundo */
}
.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 10, 0.85); /* Oscuridad profunda con un toque azulado */
    pointer-events: none; /* SÚPER IMPORTANTE: Permite hacer clic en los hotspots a través de la sombra */
    z-index: 35; /* Justo por debajo de la caja de diálogo y el botón de pistas */
    transition: opacity 2.5s ease-in-out; /* La luz volverá suavemente en 2.5 segundos */
}
.magic-light {
    z-index: 50 !important;
}

/* --- VISTA 20: MAPA DEL PUEBLO --- */
/* Cruz Amarilla (Abajo Izquierda) */
#hs-lago { top: 70%; left: 5%; width: 25%; height: 25%; }
/* Cruz Negra (Abajo Centro) */
#hs-plaza { top: 65%; left: 35%; width: 25%; height: 25%; }
/* Cruz Blanca (Medio Izquierda) */
#hs-deportes { top: 40%; left: 5%; width: 25%; height: 20%; }
/* Cruz Verde (Centro) */
#hs-fuente { top: 40%; left: 35%; width: 20%; height: 20%; }
/* Cruz Azul (Medio Derecha) */
#hs-queseria { top: 45%; left: 60%; width: 25%; height: 25%; }
/* Cruz Roja (Arriba Izquierda) */
#hs-ayuntamiento { top: 10%; left: 5%; width: 25%; height: 25%; }

/* --- AYUNTAMIENTO: INVESTIGACIÓN --- */
/* Mesa central en la sala hall (vista-231) */
#hs-ayuntamiento-mesa-central {
    top: 60%; /* Ajusta esto según dónde esté la mesa en tu imagen */
    left: 35%;
    width: 30%;
    height: 25%;
    /* background-color: rgba(255, 0, 0, 0.4); */ /* Truco: Descomenta para ver la caja roja */
}

/* Pergamino en la mesa cerca (vista-2311 - ayuntamiento-mesa.png) */
#hs-ayuntamiento-pergamino {
    top: 40%; /* Ajusta esto sobre el pergamino en la imagen de cerca */
    left: 40%;
    width: 20%;
    height: 20%;
    /* background-color: rgba(0, 0, 255, 0.4); */ /* Truco: Descomenta para ver la caja azul */
}
/* Recoger el pergamino en primer plano (vista-2312) */
#pickup-pergamino {
    top: 20%;
    left: 15%;
    width: 70%;
    height: 60%;
}
/* Tarro colgando en el árbol derecho (vista-231) */
#hs-ayunt-jar {
    top: 12%; 
    left: 66%;
    width: 6%;
    height: 15%;
    border-radius: 50%;
    /* Descomenta la siguiente línea si necesitas ajustar la posición viendo la caja roja */
    /* background-color: rgba(255, 0, 0, 0.4) !important; */
}
/* Cruz Naranja (Arriba Centro) */
#hs-teatro { top: 15%; left: 35%; width: 25%; height: 25%; }

/* Cruz Rosa/Morada (Arriba Derecha) */
#hs-observatorio { top: 5%; left: 65%; width: 30%; height: 25%; }

/* --- Estilo verdoso para el botón del Pueblo --- */
.village-style {
    background: rgba(20, 80, 20, 0.9);
    border-color: #3e8e41;
}
.village-style:hover {
    background: rgba(30, 120, 30, 0.9);
}

/* --- PUERTAS DE LOS EDIFICIOS (PARTE 2) --- */

/* Puerta de entrada al Ayuntamiento */
#door-ayuntamiento { 
    top: 35%; 
    left: 35%; 
    width: 30%; 
    height: 45%; 
    border-radius: 40% 40% 0 0; 
    
    /* TRUCO: Quita las barras "/*" de la siguiente línea para ver la caja roja y ajustarla */
    /* background-color: rgba(255, 0, 0, 0.4) !important; */
}

/* Puerta de entrada al Observatorio */
#door-observatorio { 
    top: 45%; 
    left: 47%; 
    width: 15%; 
    height: 25%; 
    border-radius: 40% 40% 0 0;
    /* background-color: rgba(255, 0, 0, 0.4) !important; */
}
/* ========================================= */
/* --- PUZLE FINAL: PRISMA, POCIONES Y COFRE --- */
/* ========================================= */

/* El gran cristal morado (Prisma) */
#hs-ayunt-crystal {
    top: 35%; /* Ajusta estas coordenadas según tu imagen */
    left: 42%;
    width: 6%;
    height: 6%;
    /* Descomenta la siguiente línea para ver la caja roja y ajustarla */
    /* background-color: rgba(255, 0, 0, 0.4) !important; */
}

/* Efecto cuando arrastras el tarro de luz sobre el cristal */
.drag-over-crystal {
    /*background-color: rgba(200, 100, 255, 0.3) !important;*/
    border: 2px solid #d500f9 !important;
    border-radius: 20px;
    /*box-shadow: 0 0 20px rgba(213, 0, 249, 0.6);*/
}

/* La estantería con las pociones */
#hs-ayunt-potions {
    top: 25%;
    left: 48%;
    width: 15%;
    height: 15%;
    /* background-color: rgba(0, 255, 0, 0.4) !important; */
}

/* El cofre cerrado */
#hs-ayunt-chest {
    top: 55%;
    left: 75%;
    width: 15%;
    height: 15%;
    /* background-color: rgba(0, 0, 255, 0.4) !important; */
}

/* --- INTERFAZ DEL CANDADO NUMÉRICO --- */
#chest-padlock-ui {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('texturas/pistas.png'); /* Usamos tu fondo de pistas */
    background-size: 100% 100%;
    width: 40vw; 
    max-width: 600px; 
    min-width: 300px;
    height: 25vh;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    z-index: 450;
    filter: drop-shadow(0 0 30px black);
}

.padlock-dials {
    display: flex; 
    gap: 2vw; 
    margin-bottom: 2vh;
}

.padlock-dial {
    font-size: clamp(2rem, 4vw, 4rem); 
    width: 15%; 
    height: auto; 
    aspect-ratio: 1/1.2;
    text-align: center;
    background-color: #f4e4bc; 
    border: 3px solid #5d4037; 
    border-radius: 10px;
    color: #3e2723;
    font-weight: bold;
}

/* --- PRIMER PLANO DEL COFRE ABIERTO (vista-2313) --- */
#hs-chest-pergamino {
    top: 35%; 
    left: 20%;
    width: 60%;
    height: 30%;
    /* background-color: rgba(255, 0, 0, 0.4) !important; */ /* Descomenta para ajustar si es necesario */
}
/* --- Reloj en la repisa de la chimenea (vista-231) --- */
#hs-ayunt-reloj {
    top: 46%; 
    left: 13.5%;
    width: 4%;
    height: 6%;
    /* background-color: rgba(255, 0, 0, 0.4) !important; */ /* Descomenta para ver la caja roja y ajustarlo */
}
/* --- PUZLE DEL FUEGO (Sala general) --- */
#hs-ayunt-lena { top: 65%; left: 5%; width: 12%; height: 20%;  /*background-color: rgba(255,0,0,0.4) !important; */ }
#hs-ayunt-chimenea { top: 55%; left: 12%; width: 10%; height: 15%;  /*background-color: rgba(0,255,0,0.4) !important; */ }
#hs-ayunt-puerta-salida { top: 35%; left: 85%; width: 12%; height: 45%;  /*background-color: rgba(0,0,255,0.4) !important; */ }

/* --- PRIMER PLANO DE LA LEÑA (vista-2315 - ay.troncos.png) --- */
#hs-tronco-4 { top: 35%; left: 40%; width: 10%; height: 20%;  /*background-color: rgba(255,0,0,0.4) !important; */ }
#hs-tronco-8 { top: 60%; left: 45%; width: 10%; height: 20%;  /*background-color: rgba(0,0,255,0.4) !important; */ }
/* --- PRIMER PLANO DE LA CHIMENEA (vista-2316) --- */
#hs-chimenea-interior { 
    top: 30%; 
    left: 20%; 
    width: 60%; 
    height: 60%; 
     /*background-color: rgba(255, 100, 0, 0.2) !important; */ /* Descomenta para ver dónde cae la leña */
    border-radius: 20px;
}
.spark {
    position: absolute;
    background-color: #ffcc00;
    border-radius: 50%;
    /* Efecto de resplandor de fuego */
    box-shadow: 0 0 8px 2px #ff6600, 0 0 15px 3px #ffcc00;
    opacity: 0;
    pointer-events: none; /* Súper importante para que no bloquee los clics en los hotspots */
    z-index: 100; /* Para que pase por encima de los troncos */
    animation: burn-and-fade linear forwards;
}

@keyframes burn-and-fade {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}
/* ========================================= */
/* --- MENÚ BONUS DESPLEGABLE --- */
/* ========================================= */

.bonus-dropdown {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-block;
    z-index: 100;
}

.bonus-btn {
    background-color: #3e2723;
    color: #ffca28;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #ffca28;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

.bonus-btn:hover {
    background-color: #5d4037;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.4);
}

.bonus-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    right: 0;
    top: 110%;
    background-color: #2b1b17;
    min-width: 220px;
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.9);
    border: 1px solid #ffca28;
    border-radius: 8px;
    overflow: hidden;
}

.bonus-content a {
    color: #f1f1f1;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
    font-family: sans-serif;
    font-size: 15px;
    border-bottom: 1px solid #4e342e;
    transition: background-color 0.2s ease;
}

.bonus-content a:last-child {
    border-bottom: none;
}

.bonus-content a:hover {
    background-color: #ffca28;
    color: #3e2723;
    font-weight: bold;
}

/* Al pasar el ratón por el botón, se muestra el menú */
.bonus-dropdown:hover .bonus-content {
    display: block;
}
/* --- MODELO 3D SISTEMA SOLAR (Observatorio) --- */
/* --- HOTSPOT MAQUETA PLANETARIA (Observatorio vista-281) --- */
#hs-observatorio-maqueta {
    position: absolute; /* <--- ¡ESTA ERA LA LÍNEA QUE FALTABA! */
    top: 67%; 
    left: 80%;
    width: 25%;
    height: 15%;
    transform: translate(-50%, -50%);
    border-radius: 50%; 
    cursor: pointer;
    
    /* Vamos a encender la caja roja para ver dónde está exactamente */
    /*background-color: rgba(255, 0, 0, 0.5) !important; 
    z-index: 50; /* Para asegurarnos de que esté por encima de la imagen de fondo */
}
/* --- HOTSPOT BOTONERA (Observatorio Encendido) --- */
#hs-observatorio-botonera {
    position: absolute;
    top: 72%;
    left: 15%;
    width: 10%;
    height: 5%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    
    /*background-color: rgba(0, 255, 0, 0.4) !important;  /* Descomenta esto para ver la caja verde y encajarla en tu dibujo */
    z-index: 50; 
}
/* --- ANIMACIONES DEL INVENTARIO --- */
#inventory-icon:hover { transform: scale(1.15) !important; filter: drop-shadow(0px 0px 15px rgba(255, 204, 0, 0.9)) !important; }
#close-inventory-btn:hover { background: #ff0000 !important; transform: scale(1.15) !important; }
/* --- HOTSPOT TELESCOPIO (Observatorio - Ocular) --- */
#hs-observatorio-telescopio {
    position: absolute;
    top: 68%;
    left: 42%;
    width: 5%;
    height: 5%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: pointer;
    z-index: 50; 
    
    /* Quita las barras del inicio de la siguiente línea para ver la caja rosa y encajarla en tu dibujo */
    /* background-color: rgba(255, 0, 255, 0.4) !important; 
}