/* css/layout.css */

/* Container principale del gioco */
main#game-container {
    display: flex; /* Layout a colonne */
    max-width: 1200px; /* Larghezza massima per schermi grandi */
    width: 95%; /* Larghezza reattiva (95% della viewport) */
    height: 95vh; /* Altezza reattiva (95% dell'altezza viewport) */
    margin: auto; /* Centra il container orizzontalmente */
    border: 1px solid var(--border-dim-color); /* Bordo esterno */
    background-color: var(--bg-color); /* Sfondo nero */
    color: var(--fg-color); /* Colore testo predefinito */
    font-family: 'Courier New', Courier, monospace; /* Font monospaced */
    font-size: 16px; /* Dimensione font base (già definita in base.css, ripetuta per sicurezza) */
    box-sizing: border-box; /* Include padding e border nelle dimensioni */
    /* Transizione per l'effetto di oscuramento/sfocatura */
    transition: filter 0.3s ease-in-out;
}

/* Stili per i pannelli delle colonne (sinistra, centrale, destra) */
#left-panel,
#map-panel,
#right-panel { /* Corretto id da #info-panel a #right-panel */
    padding: 15px; /* Padding interno */
    border: 1px solid var(--border-dim-color); /* Bordo per ogni pannello (saranno modificati dai bordi del container) */
    display: flex; /* Layout interno verticale (le sezioni si impilano) */
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden; /* Nasconde contenuto che esce dai bordi */
}

#left-panel {
    width: 25%; /* Larghezza colonna sinistra (occupa 25% del container) */
    min-width: 200px; /* Larghezza minima per evitare che diventi troppo stretta */
    border-right: none; /* Rimuove bordo destro ridondante con il pannello centrale */
}

#map-panel {
    width: 50%; /* Larghezza colonna centrale (mappa e controlli) */
    min-width: 300px; /* Larghezza minima per la mappa */
    border-left: 1px solid var(--border-dim-color); /* Bordo sinistro */
    border-right: 1px solid var(--border-dim-color); /* Bordo destro */
    /* flex-grow: 1; /* Permette alla colonna centrale di crescere per riempire lo spazio */
    /* flex-shrink: 0; /* Impedisce alla colonna centrale di restringersi (potrebbe causare overflow) */
}

#right-panel { /* Corretto id da #info-panel a #right-panel */
    width: 25%; /* Larghezza colonna destra */
    min-width: 200px; /* Larghezza minima */
    border-left: none; /* Rimuove bordo sinistro ridondante */
}

/* Stili per le sezioni interne ai pannelli (survival, condition, inventory, messages, stats, legend, game-info) */
/* Usiamo "> section" e "> div" per selezionare solo i figli diretti che sono sezioni o div specifici */
#left-panel > section,
#right-panel > section, /* Corretto id */
#map-panel > div /* Div per mappa e div per controlli */
{
    margin-bottom: 15px; /* Spazio tra le sezioni */
    border: 1px dashed var(--border-dim-color); /* Bordo tratteggiato per separare le sezioni interne */
    padding: 10px; /* Padding interno */
    background-color: #050505; /* Sfondo leggermente diverso per le sezioni */
    overflow-y: auto; /* Abilita scroll verticale se il contenuto supera l'altezza */
    flex-shrink: 0; /* Evita che le sezioni si restringano troppo */
}

/* Sezioni con altezza flessibile (per ora solo il log messaggi) */
#messages-panel {
    flex-grow: 1; /* Permette al log di crescere verticalmente per riempire lo spazio disponibile */
    min-height: 100px; /* Altezza minima per il log */
}

/* Rimuove il margine inferiore dall'ultima sezione di ogni pannello per evitare spazio extra alla fine */
#left-panel > section:last-child,
#right-panel > section:last-child { /* Corretto id */
    margin-bottom: 0;
}

/* --- Stile per Oscurare Sfondo (Focus/Overlay) --- */
/* Classe da aggiungere al main container quando un overlay (evento, fine gioco) è attivo */
main#game-container.overlay-active {
    filter: brightness(0.6) blur(2px); /* Oscura e sfoca leggermente lo sfondo */
    pointer-events: none; /* Impedisce interazione con gli elementi sotto l'overlay */
    user-select: none; /* Impedisce la selezione del testo */
    transition: filter 0.3s ease-in-out;
}

/* Stile per la schermata di fine gioco e l'overlay degli eventi (div che coprono lo schermo intero) */
/* Questi stili sono anche definiti in events.css, ma li includiamo anche qui per chiarezza */
.overlay {
    position: absolute; /* Posizionato rispetto al viewport */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--overlay-bg); /* Sfondo scuro semi-trasparente */
    color: var(--fg-color);
    z-index: 50; /* Assicura che sia sopra il container di gioco */
    box-sizing: border-box;
    display: flex; /* Centra il popup/contenuto interno */
    align-items: center; /* Allinea verticalmente al centro */
    justify-content: center; /* Allinea orizzontalmente al centro */

    /* Stili per animazione fade-in/out, gestiti principalmente in events.css */
    opacity: 0; /* Inizia trasparente */
    visibility: hidden; /* Inizia nascosto */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Fade-in e ritardo visibility */
}

/* Classe da aggiungere con JS per rendere visibile l'overlay */
.overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Rimuove ritardo quando diventa visibile */
}

/* Stile per il popup centrale all'interno dell'overlay eventi */
.popup {
    background-color: var(--bg-color);
    border: 1px solid var(--border-dim-color);
    padding: 25px;
    width: 80%; /* Larghezza reattiva */
    max-width: 600px; /* Larghezza massima */
    max-height: 90vh; /* Altezza massima */
    overflow-y: auto; /* Scroll verticale se il contenuto è troppo alto */
    text-align: center; /* Allinea testo al centro (titolo, bottoni) */
    box-shadow: 0 0 15px var(--border-dim-color);
    font-family: inherit; /* Eredita il font monospaced */
    /* Stili per animazione di scala, gestiti in events.css */
}

/* Rimuovere i float e clear (se usati precedentemente) per evitare problemi con flexbox */
/* float: none; clear: both; */