/* ==========================================================================
   style.css (CORRECCIÓN DE ALTA FIDELIDAD - PANEL FLOTANTE)
   UBICACIÓN: play/client/css/style.css
   ========================================================================== */

/* Importación de la tipografía oficial */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;800;900&display=swap');

/* ==========================================
   1. LIENZO GLOBAL (PANTALLAS 1440x900 A 2K)
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    min-height: 100%;
    /* Permite scroll vertical libre para ver el footer en pantallas 1440x900 */
    overflow-x: hidden;
    overflow-y: auto;          
    background-color: #a89081; /* El color marrón tropical suave de fondo */
    font-family: 'Nunito', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 20px 0 0 0; 
}

/* Límite estructural para pantallas 2K */
@media (min-width: 2560px) {
    body, html {
        max-width: 2560px;
        margin: 0 auto;
        border-left: 4px solid #361f11;
        border-right: 4px solid #361f11;
    }
}

/* ==========================================
   2. LA NAVBAR FLOTANTE
   ========================================== */
.site-header {
    width: 92%;           
    max-width: 1200px;    
    height: 50px;
    background-color: #5a4436; 
    border-radius: 25px;  
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;      
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
}

.btn-inicio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;              
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    color: #ffffff;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.35); 
    padding: 6px 20px;
    border-radius: 25px;   
    background: linear-gradient(to bottom, #fbc053 0%, #e5933a 100%);
    border: 2px solid #361f11;
    box-shadow: 0 2.5px 0 #361f11; 
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    cursor: pointer;
}

.btn-inicio:hover { filter: brightness(1.06); }
.btn-inicio:active { transform: translateY(2px); box-shadow: 0 0.5px 0 #361f11; }

.header-center {
    display: flex;
    gap: 35px;             
    align-items: center;
}

.header-center a {
    color: #ffffff;
    text-decoration: none; 
    font-family: 'Nunito', sans-serif;
    font-weight: 800;      
    font-size: 0.95rem;
    letter-spacing: 0.5px; 
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.35); 
    transition: color 0.15s ease, transform 0.1s ease;
    display: inline-block;
}

.header-center a:hover { color: #fbc053; transform: scale(1.05); }

/* Selector de Idiomas Split-Pill */
.custom-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
}

.dropdown-trigger {
    display: flex;
    align-items: stretch;
    background-color: #f2f2f2;    
    border: 2px solid #361f11;     
    border-radius: 50px;           
    height: 36px;
    overflow: hidden;              
    box-shadow: 0 2px 0px #361f11; 
}

.dropdown-text {
    color: #000000;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    text-align: center;
}

.dropdown-arrow-box {
    background-color: #361f11;     
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-left: 2px solid #361f11;
}

.dropdown-arrow {
    color: #ffffff;
    font-size: 0.65rem;
    transform: scaleX(1.2);       
}

.dropdown-menu {
    position: absolute;
    top: 115%;                     
    right: 0;
    width: 100%;                   
    min-width: 140px;
    background-color: #7c6354;     
    border: 2px solid #361f11;     
    border-radius: 16px;           
    list-style: none;
    padding: 6px 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}

.dropdown-menu li a {
    display: block;
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.55);    
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.65rem;
    text-align: center;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.custom-dropdown:hover .dropdown-menu,
.custom-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu li a:hover { background-color: #fbc053; color: #361f11; }

/* ==========================================
   3. MARCO DEL LAUNCHER (16:9 RESPONSIVO)
   ========================================== */
.launcher-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; 
}

.launcher-frame {
    width: 92%;
    max-width: 1280px;     
    aspect-ratio: 16 / 9;  /* Candado estricto de proporción HD */
    background-color: #705746; /* El fondo marrón medio de tu lona */ 
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    position: relative;    
    overflow: hidden;
}

/* ==========================================
   4. ESTADO A: START SCREEN (UI CAPA FLOTANTE)
   ========================================== */
#start-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

/* Lona del mapa base */
.start-graphics {
    width: 100%;
    height: 100%;
    background-color: #705746; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* "WEB LAUNCHER" centrado perfectamente en el arte */
.launcher-title {
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3.2rem); 
    letter-spacing: 1px;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.35);
}

/* 🟢 EL AJUSTE MAESTRO: PANEL FLOTANTE EN SUSPENSIÓN (FIGMA CLON) */
.start-controls {
    position: absolute;
    bottom: 30px;            /* 🟢 Separado limpiamente de la base */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal automático */
    width: 92%;              /* 🟢 Reducido para que flote a los lados */
    max-width: 1180px;
    height: 85px;            /* Altura fija estilizada para los botones */
    
    background-color: #361f11; 
    border: 2px solid #361f11; 
    border-radius: 16px;     /* Esquinas totalmente redondeadas en los 4 costados */
    
    /* 🟢 Sombra 3D sólida gruesa debajo de la barra igual que en tu Figma */
    box-shadow: 0 6px 0px #21130a, 0 12px 25px rgba(0,0,0,0.3);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;         
    z-index: 10;
}

/* Botones del Lanzador (Estética unificada de 2px) */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    white-space: nowrap;     
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem); 
    color: #ffffff;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.35);
    border-radius: 50px;
    background: linear-gradient(to bottom, #fbc053 0%, #e5933a 100%);
    border: 2px solid #361f11;
    box-shadow: 0 2.5px 0 #1f110a;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    cursor: pointer;
}

.btn-action:hover { filter: brightness(1.06); }
.btn-action:active { transform: translateY(2px); box-shadow: 0 0.5px 0 #1f110a; }

/* ==========================================
   5. CONTENEDOR DEL CANVAS (Detrás de escena)
   ========================================== */
#game-container {
    width: 100%;
    height: 100%;
    background-color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;             
}

#canvas { width: 100%; height: 100%; display: block; }
.active-state { display: flex !important; opacity: 1 !important; pointer-events: auto !important; z-index: 10 !important; }
.hidden-state { display: none !important; opacity: 0 !important; pointer-events: none !important; z-index: 1 !important; }

/* ==========================================
   6. FOOTER ORGÁNICO VECTORIAL
   ========================================== */
.site-footer {
    width: 100%;
    background-color: #361f11;     
    position: relative;
    padding-top: 25px;             
    padding-bottom: 35px;
    margin-top: auto;              /* Imanta el footer abajo en monitores grandes */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

.footer-wave {
    position: absolute;
    top: -58px;                    
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 0;
    overflow: hidden;
}

.footer-wave svg { width: 100%; height: 100%; display: block; }
.footer-wave .wave-fill { fill: #361f11; }

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;                     
    width: 90%;
    max-width: 600px;
}

.footer-logo {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 1px;
    display: flex;
    gap: 2px;
}
.logo-text-green { color: #2ecc71; text-shadow: 2px 2px 0px #1f110a; }
.logo-text-orange { color: #e67e22; text-shadow: 2px 2px 0px #1f110a; }

.footer-slogan { color: #bfaea2; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.2px; }

.footer-links { display: flex; justify-content: center; gap: 28px; margin: 4px 0; flex-wrap: wrap; }
.footer-links a { color: #a38c7e; text-decoration: none; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.5px; transition: color 0.12s ease; }
.footer-links a:hover { color: #ffffff; }

.footer-copyright { color: #6e5647; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 0.75rem; margin-top: 5px; }

/* ==========================================
   7. SECCIÓN DE ADAPTABILIDAD RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .site-header { width: 95%; }
    .header-center { gap: 20px; }
    .header-center a { font-size: 0.85rem; }
    .launcher-frame { width: 95%; }
}

@media (max-width: 768px) {
    body, html { padding: 10px 0 0 0; }
    .site-header { height: auto; padding: 12px 20px; flex-direction: column; gap: 12px; border-radius: 20px; }
    .header-center { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .launcher-section { padding: 20px 10px; }
    
    /* En celulares removemos la proporción fija para que se adapte al alto de la pantalla */
    .launcher-frame { width: 100%; border-radius: 16px; aspect-ratio: auto; min-height: 420px; }
    #start-screen { display: flex; flex-direction: column; position: relative; height: auto; }
    .start-graphics { height: auto; padding-bottom: 20px; }
    .launcher-title { position: static; transform: none; padding-top: 30px; font-size: 2rem; }
    
    /* En móvil el panel flotante colapsa elegantemente */
    .start-controls { 
        width: 90%; 
        position: relative; 
        bottom: auto; 
        left: auto; 
        transform: none; 
        margin: 30px auto; 
        height: auto;
        padding: 15px 20px;
        flex-direction: row;
        border-radius: 12px;
        box-shadow: 0 4px 0px #21130a;
    }
    .btn-action { padding: 10px 16px; font-size: 0.85rem; width: 48%; text-align: center; }
    .footer-wave { top: -38px; height: 40px; }
    .footer-links { gap: 15px; }
}

@media (max-width: 480px) {
    .header-center { gap: 10px; }
    .header-center a { font-size: 0.75rem; }
    .start-controls { flex-direction: column; gap: 12px; }
    .btn-action { width: 90%; }
}

/* ==========================================
   🟢 DOMANDO EL MOTOR DE GODOT
   Fuerza al lienzo del juego a respetar el marco elegante
========================================== */
canvas {
    display: block !important;
    margin: 0 auto !important; /* Lo centra horizontalmente pase lo que pase */
    width: 100% !important;    /* Obliga a llenar el ancho del contenedor */
    height: 100% !important;   /* Obliga a llenar el alto del contenedor */
    outline: none !important;  /* Quita el borde feo al hacer clic */
    box-sizing: border-box;
}

/* Asegurarnos de que el contenedor padre no intente hacer scroll interno */
.launcher-section {
    overflow: hidden; 
}