/* css/responsive.css */

/* Questo file gestisce l'adattabilità del layout e delle dimensioni font su diverse dimensioni dello schermo */
/* Utilizza le media queries CSS */

/* --- Media Queries per Responsività --- */

/* NOTA: Il layout a 3 colonne di base definito in layout.css funziona già fluidamente */
/* per schermi larghi (>= 1200px) fino a schermi medi. */
/* Le media query che seguono intervengono per schermi PIÙ PICCOLI */


/* Media Query per schermi medi (es. tablet in orizzontale o piccoli laptop, tipicamente sotto i 1024px o 900px) */
/* Applichiamo modifiche più lievi prima di impilare le colonne */
@media (max-width: 1024px) {
    /* Esempio: Aggiustamenti per pannelli per evitare che siano troppo stretti */
    #left-panel {
        min-width: 180px; /* Larghezza minima aumentata leggermente */
    }
    #right-panel { /* Corretto id */
        min-width: 180px; /* Larghezza minima aumentata leggermente */
    }
    #map-panel {
        min-width: 250px; /* Larghezza minima aumentata leggermente */
    }

    /* Riduci leggermente la dimensione font generale se necessario per far stare più contenuto */
     body { font-size: 15px; }
     #map-display { font-size: 16px; line-height: 1.15; }
     #legend li { font-size: 0.85em; }
     #messages { font-size: 0.75em; }
     #controls button { padding: 6px 10px; margin: 3px; font-size: 0.9em;} /* Pulsanti controlli leggermente più piccoli */
     .popup { padding: 20px; } /* Padding popup */
     .popup h2 { font-size: 1.2em; } /* Titolo popup */
     .popup button { padding: 8px 15px; font-size: 0.95em; margin: 6px;} /* Bottoni popup */
}


/* Media Query per schermi piccoli (es. tablet in verticale, smartphone grandi, tipicamente sotto i 768px) */
/* Qui impiliamo le colonne verticalmente */
@media (max-width: 768px) {
    /* Impila le colonne verticalmente */
    main#game-container {
        flex-direction: column; /* Cambia la direzione del layout principale da riga a colonna */
        width: 100%; /* Occupano tutta la larghezza della viewport */
        height: auto; /* Altezza automatica (le sezioni si impilano e determinano l'altezza totale) */
        border: none; /* Rimuove i bordi esterni del container principale */
        margin: 0; /* Rimuove i margini esterni */
        overflow-y: auto; /* Aggiunge scroll verticale al container principale se il contenuto impilato supera l'altezza della viewport */
        max-height: 100vh; /* Assicura che non vada oltre l'altezza della viewport */
    }

    /* Imposta le colonne (ora impilate) per occupare tutta la larghezza e rimuove i bordi interni */
    #left-panel,
    #map-panel,
    #right-panel { /* Corretto id */
        width: 100%; /* Ogni colonna occupa il 100% della larghezza del suo container (main) */
        min-width: unset; /* Rimuove la larghezza minima definita in precedenza */
        border: none; /* Rimuove i bordi specifici delle colonne (left, right) */
        border-bottom: 1px solid var(--border-dim-color); /* Aggiunge un bordo inferiore per separare visivamente le sezioni impilate */
        padding: 10px; /* Riduci padding */
        height: auto; /* Altezza automatica (si basa sul contenuto) */
        overflow: visible; /* Permette overflow verticale visibile, lo scroll sarà gestito dalle sezioni interne */
        /* Le sezioni interne gestiranno il loro scroll se necessario */
    }

    /* Rimuove il bordo inferiore dall'ultima sezione impilata (quella della colonna destra) */
    #right-panel { /* L'ultima colonna impilata */
        border-bottom: none;
    }

    /* Aggiusta le dimensioni della mappa per non occupare troppo spazio verticale quando le sezioni sono impilate */
    #map-panel {
        flex-grow: 0; /* Non far crescere la mappa più del necessario */
        height: auto; /* Altezza automatica */
        /* La mappa display all'interno avrà un max-height */
    }
    #map-display {
        max-height: 40vh; /* Limita l'altezza massima della mappa al 40% dell'altezza viewport */
        font-size: 15px; /* Riduci la dimensione font della mappa */
        line-height: 1.1; /* Interlinea ridotta */
    }


    /* Aggiusta l'altezza del log messaggi (flex-grow: 1 in #messages-panel manterrà la sua altezza flessibile nel left-panel) */
    #messages-panel {
        max-height: 150px; /* Limita l'altezza massima del log */
        min-height: 80px; /* Altezza minima ridotta */
    }

    /* Riduci leggermente la dimensione font generale se necessario per far stare più contenuto */
    body { font-size: 14px; }


    /* Rendi i pulsanti interattivi più grandi e con margini adattati per facilitare il tocco su dispositivi mobili */
    #controls button, /* Controlli mappa */
    #event-choices button, /* Bottoni scelta evento */
    #event-popup button.continue-button, /* Bottone Continua nel popup evento */
    #end-screen button /* Bottone Riavvia nella schermata di fine gioco */
    {
        padding: 12px 15px; /* Padding aumentato */
        font-size: 1em; /* Dimensione font normale */
        margin: 5px; /* Riduci margine tra bottoni */
    }

    /* Riduci la larghezza dei bottoni nei popup per schermi piccoli */
    #event-choices button { width: 90%; } /* Larghezza dei bottoni di scelta evento */
    #event-popup button.continue-button { width: 60%; } /* Larghezza del bottone Continua */


    /* Aggiusta padding e dimensioni del popup evento */
    .popup { padding: 15px; width: 95%; } /* Riduci padding e aumenta larghezza popup */
    .popup h2 { font-size: 1.1em; } /* Riduci dimensione titolo popup */
    #event-content { font-size: 0.95em; } /* Riduci dimensione font descrizione popup */

    /* Potresti voler nascondere o semplificare elementi non essenziali su schermi molto piccoli in futuro */
    /* Esempio: Nascondere la legenda dettagliata di default */
    /* #legend-panel { display: none; } */
}

/* Media Query per schermi molto piccoli (es. smartphone piccoli, tipicamente sotto i 480px) */
@media (max-width: 480px) {
     /* Ulteriore aggiustamento font e layout se necessario */
     body { font-size: 13px; }
     #map-display { font-size: 13px; line-height: 1; } /* Riduci ancora dimensione e interlinea mappa */
     #controls button { padding: 8px 10px; font-size: 0.9em;} /* Riduci dimensione bottoni controlli */
     .popup { padding: 10px; } /* Riduci padding popup */
     .popup h2 { font-size: 1em; } /* Riduci dimensione titolo popup */
     #event-content { font-size: 0.9em; } /* Riduci dimensione font descrizione popup */
     #event-choices button { width: 95%; margin: 4px;} /* Riduci margine bottoni scelta */
     #event-popup button.continue-button { width: 80%; } /* Riduci larghezza bottone continua */
}

/* Schermi Molto Larghi (opzionale, per ottimizzare lo spazio) */
/* @media (min-width: 1600px) { ... } */
/* Qui potresti voler dare più spazio ad alcune aree, es. aumentando il flex-grow di #map-panel o #messages-panel */
/*
@media (min-width: 1600px) {
     main#game-container {
         max-width: 1600px; // Aumenta la larghezza massima del container
     }
     #map-panel {
          flex-grow: 2; // Fai crescere di più il pannello mappa rispetto agli altri
     }
     #messages-panel {
        max-height: 400px; // Aumenta l'altezza massima del log
     }
}
*/