/* =========================================================================
   1. CONFIGURACIÓN BASE
   ========================================================================= */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    -webkit-tap-highlight-color: transparent; 
}

body, html {
    width: 100%; 
    height: 100%;
    background: #4e342e url('../icons/wood.png') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: white; 
    overflow: hidden;
}

#app { 
    width: 100%; 
    max-width: min(112.5vmin, 450px); 
    margin: 0 auto; 
    height: 100%; 
    position: relative; 
    overflow: hidden; /* Mantiene la ventana principal fija */
}

/* =========================================================================
   2. HEADER (Fila 1: Logo + Textos centrados | Fila 2: Texto 100% centrado)
   ========================================================================= */
header { 
    padding: min(3.75vmin, 15px) min(2.5vmin, 10px) min(2.5vmin, 10px) min(2.5vmin, 10px); 
    width: 100%;
    display: flex;
    flex-direction: column; /* Apila la Fila 1 y la Fila 2 en vertical */
}

/* --- FILA 1: Disposición horizontal (Logo + Caja de Texto) --- */
.header-main-row {
    display: flex;
    align-items: center;    /* Centra verticalmente el logo con la caja de texto */
    justify-content: flex-start;
    width: 100%;
    gap: min(3vmin, 12px);              /* Espacio mínimo para que el texto no pegue con el logo */
}

/* Contenedor del logo y su versión */
.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;         /* Impide que el logo se encoja */
}

/* 🎯 La caja de texto derecha: Se estira y centra todo su contenido */
.header-text-block { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;    /* Centra los textos horizontalmente DENTRO de su caja */
    flex: 1;                /* Se estira para ocupar todo el espacio restante */
    min-width: 0;           
}

/* --- REGLAS DE FUENTES (Todo en BOLD y jerarquía de tamaños) --- */
h1 { 
    font-size: min(6.25vmin, 25px);        /* 👑 Primera línea: El más grande */
    font-weight: bold;      /* 💪 En negrita */
    margin: 0; 
    text-shadow: min(0.5vmin, 2px) min(0.5vmin, 2px) min(1vmin, 4px) black; 
    line-height: 1.1; 
    text-align: center;     /* Centrado en su caja */
    white-space: nowrap;    /* Evita que se parta el nombre del hotel */
    width: 100%;
}

h2 { 
    font-size: min(5vmin, 20px);        /* 🚀 Segunda línea: Igual que la tercera, más pequeña que h1 */
    font-weight: bold;      /* 💪 En negrita */
    margin: min(1.25vmin, 5px) 0 0 0; 
    text-shadow: min(0.5vmin, 2px) min(0.5vmin, 2px) min(1vmin, 4px) black; 
    line-height: 1.1; 
    text-align: center;     /* Centrado en su caja */
    opacity: 0.95;
    width: 100%;
}

/* --- FILA 2: Descripción inferior a pantalla completa --- */
.header-description { 
    font-size: min(5vmin, 20px);        /* 🚀 Tercera línea: Mismo tamaño que h2 */
    color: #aed581; 
    font-weight: bold;      /* 💪 En negrita */
    margin: min(3vmin, 12px) 0 0 0;     /* Separación respecto a la fila de arriba */
    text-shadow: min(0.5vmin, 2px) min(0.5vmin, 2px) min(1vmin, 4px) black; 
    line-height: 1.3; 
    text-align: center;     /* Centrado en su caja (ancho completo) */
    width: 100%;
}

h4 { 
    font-size: min(5vmin, 20px); 
    color: #aed581; 
    text-shadow: min(0.25vmin, 1px) min(0.25vmin, 1px) min(0.5vmin, 2px) black; 
    text-align: center; 
    font-weight: bold;
}

.app-version-text {
    font-size: min(3.5vmin, 14px);        
    font-family: inherit;
    color: #FFFFFF; 
    font-weight: bold; 
    margin-top: calc(-1 * min(0.75vmin, 3px));  /* 🎯 Margen negativo sutil para succionar el texto hacia arriba y pegarlo al logo */
    letter-spacing: min(0.2vmin, 0.8px);
    line-height: 1;    /* Fuerza a que la caja de texto no tenga aire extra por arriba */
    text-shadow: 0 min(0.25vmin, 1px) min(0.75vmin, 3px) rgba(0, 0, 0, 0.8); 
    opacity: 0.8; 
}

/* =========================================================================
   3. MENU PRINCIPAL
   ========================================================================= */
.menu-principal { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: min(2.5vmin, 10px); 
}

.bloque-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    width: 100%; 
    max-width: min(95vmin, 380px); 
    gap: min(3.75vmin, 15px); 
    margin-bottom: min(3.75vmin, 15px); 
    justify-items: center; 
}

.bloque-flex { 
    display: flex; 
    gap: min(3.75vmin, 15px); 
    margin-bottom: min(3.75vmin, 15px); 
}

.btn-circle { 
    width: min(22.5vmin, 90px); 
    height: min(22.5vmin, 90px); 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    transition: transform 0.1s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* BLOQUEO DE EFECTOS NATIVOS */
    
    /* 1. Evita el menú emergente y el efecto lupa al mantener pulsado en iOS */
    -webkit-touch-callout: none;
    
    /* 2. Evita que el usuario seleccione el botón como si fuera texto */
    user-select: none;
    -webkit-user-select: none;
    
    /* 3. Anula el comportamiento de arrastrar y soltar (drag) */
    -webkit-user-drag: none;
    
    /* 4. Desactiva el doble toque para hacer zoom, mejorando la respuesta del click */
    touch-action: manipulation;
}

.btn-circle:active { 
    transform: scale(0.92); 
}

.btn-circle .pwa-icon { 
    width: 100% !important; 
    height: 100% !important; 
    display: block; 
    background-size: contain !important; 
    background-repeat: no-repeat !important; 
    background-position: center !important; 
    filter: drop-shadow(0 min(1vmin, 4px) min(1.5vmin, 6px) rgba(0,0,0,0.5)); 
    /* Hace que el icono ignore los eventos táctiles y de ratón, 
       asegurando que el arrastre no se inicie desde el elemento hijo */
    pointer-events: none;
}

/* =========================================================================
   4. MARCO MAESTRO Y VENTANA CIRCULAR (ESTILO BRÚJULA MAXIMIZADO)
   ========================================================================= */
.nav-container {
    width: 100%;
    height: 100vh;            
    max-width: min(112.5vmin, 450px);        
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    padding: min(1.25vmin, 5px) 0 min(3.75vmin, 15px) 0;  /* 📐 Reducimos aire superior e inferior */
    box-sizing: border-box;
}

/* 🧭 LA MÁSKARA CIRCULAR: Integración limpia directa sobre la madera */
.map-window-frame {
    width: 96vw;             
    height: 96vw;            
    max-width: min(105vmin, 420px);        
    max-height: min(105vmin, 420px);       
    margin: min(1.25vmin, 5px) auto;        
    
    /* 🧼 CAMBIO CLAVE: Eliminamos el borde por completo */
    border: none !important; 
    border-radius: 50% !important; 
    
    /* 📐 Ajustamos la sombra externa para que el círculo flote suavemente sobre las vetas de madera */
    box-shadow: 0 min(2vmin, 8px) min(6vmin, 24px) rgba(0, 0, 0, 0.45); 
    
    overflow: hidden !important; /* Sigue manteniendo el recorte circular perfecto de Leaflet */
    position: relative;
    flex-shrink: 0;          
}

/* El mapa se adapta al nuevo tamaño ampliado */
#nav-map {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    background: #f4ecd8 !important; 
}

/* Ajustamos la holgura de la botonera inferior para aprovechar la compresión */
.nav-row-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100%;
    max-width: min(102.5vmin, 410px);        /* Sube a juego con el tamaño del mapa */
    padding: min(1.25vmin, 5px) 0 0 0;
    gap: min(1vmin, 4px);
    justify-items: center;
    align-items: center;
    flex-shrink: 0;
}

/* =========================================================================
   5. BOTONERAS DE NAVEGACIÓN Y TELEMETRÍA
   ========================================================================= */
.btn-circle1 {
    width: min(15vmin, 60px) !important;
    height: min(15vmin, 60px) !important;
    background: none !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* BLOQUEO DE EFECTOS NATIVOS */
    
    /* 1. Evita el menú emergente y el efecto lupa al mantener pulsado en iOS */
    -webkit-touch-callout: none;
    
    /* 2. Evita que el usuario seleccione el botón como si fuera texto */
    user-select: none;
    -webkit-user-select: none;
    
    /* 3. Anula el comportamiento de arrastrar y soltar (drag) */
    -webkit-user-drag: none;
    
    /* 4. Desactiva el doble toque para hacer zoom, mejorando la respuesta del click */
    touch-action: manipulation;
}

.btn-circle1 .pwa-icon {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Hace que el icono ignore los eventos táctiles y de ratón, 
       asegurando que el arrastre no se inicie desde el elemento hijo */
    pointer-events: none;
}

.nav-controls-wrapper {
    width: 100%;
    max-width: min(112.5vmin, 450px);
    height: min(25vmin, 100px);
    display: flex;
    justify-content: center;
    gap: min(7.5vmin, 30px);
    padding-bottom: min(5vmin, 20px);
    background: transparent;
}

/* =========================================================================
   📊 BARRA DE TELEMETRÍA SUPERIOR UNIFICADA
   ========================================================================= */
.nav-data-bar {
    display: flex;
    width: 90%;
    max-width: min(95vmin, 380px);
    background: rgba(0, 0, 0, 0.25); /* Mismo fondo translúcido sobre la madera */
    border-radius: min(3vmin, 12px);
    margin: min(1.25vmin, 5px) auto;                /* Pegadito al mapa circular */
    padding: min(1.5vmin, 6px) 0;
    justify-content: space-around;
    align-items: center;
    box-shadow: inset 0 min(0.25vmin, 1px) min(0.75vmin, 3px) rgba(255,255,255,0.1), 0 min(1vmin, 4px) min(2.5vmin, 10px) rgba(0,0,0,0.3);
}

.data-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 33.33%; /* Dividido en 3 columnas perfectas */
}

.data-box.border-left {
    border-left: min(0.25vmin, 1px) solid rgba(255, 255, 255, 0.15); /* Separadores internos idénticos */
}

.data-number {
    font-family: 'Courier New', Courier, monospace, sans-serif;
    font-size: min(8vmin, 32px);         /* Tamaño elegante y súper legible */
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 min(0.5vmin, 2px) min(1vmin, 4px) rgba(0,0,0,0.5);
}

/* Color verde sutil exclusivo para el valor del GPS como tenías antes */
#GPS-Precision {
    color: #81c784; 
}

.data-label {
    font-family: sans-serif;
    font-size: min(3.5vmin, 14px);
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-weight: 600;
    margin-top: min(1.25vmin, 5px);
    letter-spacing: min(0.125vmin, 0.5px);
}

.mic-container { 
    margin-top: min(1.25vmin, 5px); 
    text-align: center; 
}

#mic-status { 
    font-size: min(3.25vmin, 13px); 
    font-weight: bold; 
    color: white; 
    margin-top: min(2vmin, 8px); 
    height: min(4.5vmin, 18px); 
    text-shadow: min(0.25vmin, 1px) min(0.25vmin, 1px) min(0.5vmin, 2px) black; 
}

/* =========================================================================
   6. PANTALLAS Y LISTAS DE RUTAS
   ========================================================================= */
.screen {
    width: 100%;
    height: 100%; /* Sustituye a 100vh para evitar recortes con las barras del navegador móvil */
    overflow-y: auto; /* SCROLL AUTOMÁTICO: Solo aparece si el contenido no cabe */
    overflow-x: hidden; /* Bloquea desplazamientos laterales accidentales */
    position: relative;
    -webkit-overflow-scrolling: touch; /* Suavidad nativa en dispositivos iOS */
}

.hidden { 
    display: none !important; 
}

#map-container { 
    width: 100%; 
    height: 100vh; 
    z-index: 1; 
}

#list-container { 
    padding: min(15vmin, 60px) min(3.75vmin, 15px) min(5vmin, 20px); 
    height: 100vh; 
    overflow-y: auto; 
    background: rgba(0,0,0,0.2); 
}

.lista-titulo { 
    text-align: center; 
    margin-bottom: min(6.25vmin, 25px); 
    text-shadow: min(0.5vmin, 2px) min(0.5vmin, 2px) min(1vmin, 4px) black; 
    font-size: min(7vmin, 28px); 
}

.lista-item {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: min(3.75vmin, 15px) min(3.75vmin, 15px); 
    border-radius: min(3.75vmin, 15px); 
    margin-bottom: min(3.75vmin, 15px);
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: min(3.75vmin, 15px); 
    box-shadow: 0 min(1vmin, 4px) min(2.5vmin, 10px) rgba(0,0,0,0.3);
    min-height: min(23.75vmin, 95px); 
}

.lista-acciones-left { 
    display: flex; 
    gap: min(1.5vmin, 8px); 
    flex-shrink: 0; 
    align-items: center; 
}

/* BLINDAJE UNIFICADO PARA TODOS LOS BOTONES DE ACCIÓN */
.btn-accion, .btn-accion1, .btn-accion2 { 
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important; 
    border: none !important; 
    padding: 0 !important;
    margin: 0;
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;               /* 👈 OBLIGATORIO: Evita que Flexbox los aplaste si falta espacio */
    min-width: 0 !important;      /* 👈 OBLIGATORIO: Evita que exploten de tamaño en PC */
    min-height: 0 !important;     
    overflow: hidden !important;  
    transition: transform 0.1s ease;
    
    /* BLOQUEO DE EFECTOS NATIVOS */
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
}

/* Tamaños específicos para cada variante */
.btn-accion  { width: min(12.5vmin, 50px) !important; height: min(12.5vmin, 50px) !important; }
.btn-accion1 { width: min(10vmin, 40px) !important; height: min(10vmin, 40px) !important; }
.btn-accion2 { width: min(13vmin, 50px) !important; height: min(13vmin, 50px) !important; }

/* Efecto pulsación para todos */
.btn-accion:active, .btn-accion1:active, .btn-accion2:active {
    transform: scale(0.92);
}

.btn-accion .pwa-icon, .btn-accion1 .pwa-icon, .btn-accion2 .pwa-icon {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain !important;
    pointer-events: none;
}

.lista-info { 
    flex-grow: 1; 
    cursor: pointer; 
    padding-left: min(1.25vmin, 5px); 
}

.lista-info span { 
    font-weight: bold; 
    font-size: min(5.6vmin, 1.4em); 
    color: #1b5eff; 
    line-height: 1.2; 
    display: block; 
}

/* =========================================================================
   7. JUEGO DUENDES
   ========================================================================= */
#game-screen { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

#game-header { 
    height: min(20vmin, 80px); 
    text-align: center; 
    padding-top: min(2.5vmin, 10px); 
    color: white; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.2); 
}

#closest-info { 
    font-size: min(6vmin, 24px); 
    font-weight: bold; 
}

#duende-name { 
    font-size: min(4.5vmin, 18px); 
    opacity: 0.9; 
}

#game-map { 
    width: 100%; 
    height: 45vh; 
    border-top: min(0.5vmin, 2px) solid #222; 
    border-bottom: min(0.5vmin, 2px) solid #222; 
}

#game-controls { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    width: 100%; 
    padding: min(5vmin, 20px) min(2.5vmin, 10px); 
    background: rgba(0, 0, 0, 0.2); 
}

#video-container { 
    width: min(45vmin, 180px); 
    height: min(45vmin, 180px); 
    border: min(3.75vmin, 15px) solid #000; 
    background: #000; 
    overflow: hidden; 
    border-radius: min(5vmin, 20px); 
}

.game-flex-container {
    display: flex;
    flex-direction: column;
    height: 100vh;          
    width: 100%;
    overflow: hidden;        
    justify-content: space-between;
}

.game-map-flush {
    flex: 1;                
    width: 100%;
    min-height: min(50vmin, 200px);      
    border-bottom: min(0.5vmin, 2px) solid rgba(255, 255, 255, 0.2);
}

#game-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* =========================================================================
   8. PANTALLA FIJADA GPS Y ELEMENTOS EMERGENTES
   ========================================================================= */
#nav-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

#toast-aviso {
    position: fixed; 
    bottom: min(12.5vmin, 50px);             /* 📐 Ajustamos la altura para que no flote en medio de la pantalla */
    left: 50%; 
    transform: translateX(-50%); /* 🎯 Centrado horizontal milimétrico en el eje del teléfono */
    
    /* 📐 Ajustes maestros de ancho */
    width: 85%;                /* Ocupa el 85% de la pantalla del móvil, muy elegante */
    max-width: min(105vmin, 420px);          /* No se desproporciona si abres la app en tablets o PC */
    box-sizing: border-box;    /* Evita que el padding rompa el cálculo del ancho total */
    
    /* 🎨 Estilizado visual (Verde original restaurado con un toque de opacidad) */
    background: rgba(27, 94, 32, 0.95); /* El verde bosque original de tu app */
    color: white; 
    padding: min(3.5vmin, 14px) min(6vmin, 24px);        /* Mayor acolchado interno para dar aire al texto */
    border-radius: min(6.25vmin, 25px);       /* Bordes completamente circulares */
    z-index: 100000;           /* Prioridad absoluta por encima de mapas o capas de juego */
    box-shadow: 0 min(1.25vmin, 5px) min(3.75vmin, 15px) rgba(0, 0, 0, 0.5);
    
    /* 🎯 Alineación interna del texto */
    display: flex;
    justify-content: center;   /* Centra horizontalmente el texto dentro del bocadillo */
    align-items: center;       /* Centra verticalmente en caso de que ocupe dos líneas */
}

/* Regla complementaria para asegurar el comportamiento simétrico del texto */
#toast-text {
    text-align: center;        /* Fuerza el centrado del texto si la frase es larga y salta de línea */
    display: block;
    width: 100%;
    font-size: min(3.75vmin, 15px);
    font-weight: bold;
    line-height: 1.4;
}

/* =========================================================================
   9. PANEL DE INSTRUMENTACIÓN (Velocímetro y Rumbo)
   ========================================================================= */
.nav-instrument-panel {
    display: flex;
    width: 90%;
    max-width: min(95vmin, 380px);
    background: rgba(0, 0, 0, 0.25); /* Un sutil fondo oscuro translúcido integrado en la madera */
    border-radius: min(3vmin, 12px);
    margin: min(2.5vmin, 10px) auto;
    padding: min(2vmin, 8px) 0;
    justify-content: space-around;
    align-items: center;
    box-shadow: inset 0 min(0.25vmin, 1px) min(0.75vmin, 3px) rgba(255,255,255,0.1), 0 min(1vmin, 4px) min(2.5vmin, 10px) rgba(0,0,0,0.3);
}

.instrument-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.instrument-box.border-left {
    border-left: min(0.25vmin, 1px) solid rgba(255, 255, 255, 0.15); /* Separador sutil en el medio */
}

.instrument-number {
    font-family: 'Courier New', Courier, monospace, sans-serif; /* Estilo marcador digital premium */
    font-size: min(20vmin, 80px);         /* ¡Bien grande para que se lea en movimiento! */
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 min(0.5vmin, 2px) min(1.25vmin, 5px) rgba(0,0,0,0.5);
    letter-spacing: calc(-1 * min(0.25vmin, 1px));
}

/* Color especial verdoso o naranja para el rumbo para que destaque */
#bearing-value {
    color: #ffd54f; /* Un tono ámbar clásico de instrumentación de cabina */
}

.instrument-label {
    font-family: sans-serif;
    font-size: min(3.5vmin, 14px);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-weight: 600;
    margin-top: min(1vmin, 4px);
    letter-spacing: min(0.25vmin, 1px);
}

/* =========================================================================
   10. PANTALLA EXCLUSIVA DEL JUEGO DE PUZLES (MODO PORTRAIT SEGURO)
   ========================================================================= */

/* Contenedor Base del Puzle - Forzado Estricto en Retrato */
#puzzle-game-container.puzzle-layout-vertical {
    position: absolute; /* 🌟 CAMBIO: De fixed a absolute para que se limite al tamaño de #app */
    top: 0;
    left: 0;
    width: 100%;       /* 🌟 CAMBIO: Toma el 100% de #app (máx 450px), no del viewport total */
    height: 100%;      /* 🌟 CAMBIO: Toma el 100% de #app */
    background: #3a2212 url('../icons/wood.png') repeat; 
    z-index: 9999;
    box-sizing: border-box;
    padding: min(5vmin, 20px);
    font-family: sans-serif;
    user-select: none;
    -webkit-user-select: none;
    
    display: flex !important; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: min(3.75vmin, 15px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablero común del corcho - Mantiene tus dimensiones fijas verticales */
#puzzle-board {
    display: grid;
    width: min(85vmin, 340px);
    height: min(125vmin, 500px);
    margin-top: min(6.25vmin, 25px);
    border: min(0.75vmin, 3px) solid #1c0f07;
    box-shadow: 0 min(2vmin, 8px) min(4vmin, 16px) rgba(0,0,0,0.6);
    border-radius: min(1vmin, 4px);
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Contenedor del menú inferior */
#puzzle-menu-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: min(100vmin, 400px);
    gap: min(3.75vmin, 15px);
}

/* --- SOLUCIÓN ANTICONFLICTOS: SCROLL HORIZONTAL VS DRAG --- */
#puzzle-pieces-pool-scrollbar {
    width: 100%;
    height: min(31.25vmin, 125px);
    background: rgba(0,0,0,0.2);
    border-radius: min(2vmin, 8px);
    overflow-x: auto; /* Deslizamiento lateral fluido */
    overflow-y: hidden;
    padding: min(1.25vmin, 5px) 0;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;
}

#puzzle-pieces-pool {
    display: flex;
    flex-direction: row;
    gap: 0px; 
    width: max-content;
    height: 100%;
    align-items: center;
    padding: 0 min(2.5vmin, 10px);
}

/* MARGEN TÁCTIL SEGURO: Cojín acolchado neutro alrededor de cada foto para poder deslizar */
.puzzle-piece-touch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(2.5vmin, 10px) min(4vmin, 16px); /* Espaciado reactivo óptimo */
    height: 100%;
    box-sizing: border-box;
}

/* --- COMPONENTES GENÉRICOS DE INTERFAZ --- */
.puzzle-zone {
    border: min(0.25vmin, 1px) dashed rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
    display: flex;          
    align-items: center;
    justify-content: center;
    overflow: hidden;        
}

.puzzle-piece {
    display: block;         
    object-fit: fill;       
    cursor: grab;
    box-shadow: 0 min(0.5vmin, 2px) min(1.25vmin, 5px) rgba(0,0,0,0.4);
    max-height: min(20vmin, 80px);
    width: auto;            
    transition: transform 0.15s ease-out; 
    
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.puzzle-piece:active {
    cursor: grabbing;
}

/* Ajuste proporcional exacto para piezas al encajar - Al estar rotadas desde el Canvas, 
   tanto las verticales como las horizontales rellenan la celda de forma idéntica con object-fit fill */
.placed-correctly {
    display: block !important;
    width: 100% !important;  
    height: 100% !important; 
    max-height: 100% !important; 
    box-shadow: none !important;
    cursor: default !important;
    opacity: 1 !important;   
    transform: none !important;
    object-fit: fill !important;
}

.wrong-drop {
    background-color: rgba(255, 0, 0, 0.3);
}

#puzzle-stars-container {
    display: flex;
    gap: min(3vmin, 12px);
    padding: min(1.25vmin, 5px);
}

.puzzle-star {
    font-size: min(10.5vmin, 42px);
    cursor: pointer;
    color: #4a4a4a;
    text-shadow: 0 min(0.5vmin, 2px) min(1vmin, 4px) rgba(0,0,0,0.6);
    transition: transform 0.1s ease, color 0.2s;
}

.puzzle-star:hover {
    transform: scale(1.1);
}

.puzzle-star.active {
    color: #81c784; 
}

/* =========================================================
   PANTALLA DE SETAS - MAPA Y CONTROLES (ESTÉTICA NATIVA ENDP)
   ========================================================= */

.seta-row-grid {
    width: 100% !important;
    max-width: min(112.5vmin, 450px) !important;
    height: min(25vmin, 100px) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important; /* 👈 AHORA SÍ: Espaciado perfecto y simétrico */
    align-items: center !important;
    padding-bottom: min(5vmin, 20px) !important;
    background: transparent !important;
    margin: 0 auto !important;
}

.btn-circle2 {
    width: min(15vmin, 55px) !important;
    height: min(15vmin, 55px) !important;
    background: none !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0; /* Impide que los botones se deformen por falta de espacio */
    transition: transform 0.1s ease;
    /* BLOQUEO DE EFECTOS NATIVOS */
    
    /* 1. Evita el menú emergente y el efecto lupa al mantener pulsado en iOS */
    -webkit-touch-callout: none;
    
    /* 2. Evita que el usuario seleccione el botón como si fuera texto */
    user-select: none;
    -webkit-user-select: none;
    
    /* 3. Anula el comportamiento de arrastrar y soltar (drag) */
    -webkit-user-drag: none;
    
    /* 4. Desactiva el doble toque para hacer zoom, mejorando la respuesta del click */
    touch-action: manipulation;
}

/* Pequeño feedback visual al tocar el botón */
.btn-circle2:active {
    transform: scale(0.92);
}

.btn-circle2 .pwa-icon {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    object-fit: contain;
    /* Hace que el icono ignore los eventos táctiles y de ratón, 
       asegurando que el arrastre no se inicie desde el elemento hijo */
    pointer-events: none;
}

/* Contenedor del spinner */
#spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que esté por encima de todo */
}

/* Ocultar el elemento */
#spinner-overlay.hidden {
    display: none;
}

/* Diseño del círculo animado */
.spinner-loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db; /* Color principal */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================================
   TUTORIAL INTERACTIVO 2.0 (MODO FOCO SOBRE IMAGEN)
========================================================================= */
.tuto-modal-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85); z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.tuto-card {
    background: #e3d5b8; 
    border: 3px solid #4a5d23;
    border-radius: 12px;
    width: 90%; 
    max-width: 400px;
    /* ⚡ NUEVO: Evita que la tarjeta sea más grande que la pantalla */
    max-height: 95vh; 
    overflow-y: auto; /* Si sobra algo, que haga un pequeño scroll interno */
    padding: 15px; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.tuto-image-wrapper {
    position: relative;
    width: 100%;
    /* ⚡ NUEVO: Alineación centrada para la imagen contenida */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    border-radius: 8px;
    border: 2px solid #3a2212;
    background: #000;
    margin-bottom: 15px;
}

.tuto-image {
    width: 100%;
    /* ⚡ NUEVO: Obligamos a la imagen a no ocupar más del 50% del alto de la pantalla */
    max-height: 50vh; 
    /* ⚡ NUEVO: Hace que la imagen se escale sin deformarse para encajar en la caja */
    object-fit: contain; 
    display: block;
    transition: filter 0.3s ease;
}

/* Sombra base cuando empieza a explicar zonas */
.tuto-image.darkened {
    filter: brightness(0.6);
}

/* El recuadro luminoso (Spotlight) */
.tuto-spotlight {
    position: absolute;
    border: 2px solid #81c784; /* Verde llamativo */
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.65); /* Esto oscurece el resto de la imagen */
    transition: all 0.4s ease;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}
.tuto-spotlight.visible { opacity: 1; }

/* El bocadillo que apunta a la zona */
.tuto-tooltip {
    position: absolute;
    background: #3a2212;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
    width: 84%;
    left: 8%;
    max-height: 45%;           /* 👈 Evita que crezca infinitamente si el texto es muy largo */
    overflow-y: auto;          /* 👈 Scroll interno si excede la altura máxima */
    transition: all 0.4s ease;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    z-index: 3;
    border: 1px solid #81c784;
}
.tuto-tooltip.visible { opacity: 1; }

.tuto-text-area {
    text-align: center;
    color: #3a2212;
    font-weight: bold;
    font-size: 16px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tuto-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.tuto-btn {
    background: #4a5d23; 
    color: white; 
    border: none; 
    font-size: 28px; /* Flecha grande y visible */
    line-height: 0; /* ⚡ EL TRUCO: Evita que el tamaño de la letra agrande la caja verde */
    padding: 16px 14px; /* Damos forma al botón controlando nosotros el espacio */
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 🍏 Limpieza de estilos nativos de iOS */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* Reducimos el tamaño de la fuente para el botón de "Cerrar" para que no quede enorme */
.tuto-btn-skip {
    font-size: 14px;
    padding: 10px;
    background: transparent; 
    color: #666; 
    text-decoration: underline; 
}