/* css/controls.css */

/* Contenitore dei controlli (sotto la mappa, è un div nel #map-panel) */
#controls {
    text-align: center; /* Centra gli elementi al suo interno */
    flex-shrink: 0; /* Non far restringere l'area controlli quando la mappa si espande */
    /* margin-top: 10px; */ /* Già gestito dal margin-bottom delle sezioni in layout.css */
}

/* Stile specifico per il pannello controlli (è un div nel #map-panel) */
/* Usiamo questa classe per applicare stili specifici a quest'area */
.panel-map-controls {
    border: none; /* Rimuove il bordo extra dato dalle regole generali delle sezioni in layout.css */
    padding: 10px 0 0 0; /* Padding solo sopra per separare dalla mappa, 0 sui lati e sotto */
    margin-top: 10px; /* Spazio sopra per separare dalla mappa */
    background-color: transparent; /* Sfondo trasparente per fondersi con il pannello mappa */
    border-top: 1px dashed var(--border-dim-color); /* Separatore tratteggiato dalla mappa */
    flex-shrink: 0; /* Mantenuto per sicurezza */
}

.panel-map-controls h2 {
    margin-bottom: 8px; /* Spazio sotto il titolo dei controlli */
    text-align: center; /* Allinea il titolo al centro */
}

/* Stili per i controlli di gioco (movimento, azioni, ecc.) */

/* Stile condiviso per i pulsanti di azione principali del gioco */
.action-button {
    background-color: #2c2c2c; /* Sfondo scuro leggermente più chiaro del pannello */
    color: var(--fg-color, #00FF00);
    border: 1px solid var(--border-color, #008000); /* Bordo verde standard */
    padding: 10px 15px;
    font-family: 'Courier New', Courier, monospace; /* O il tuo font principale */
    font-size: 1em; /* Dimensione base per i pulsanti */
    cursor: pointer;
    text-align: center;
    text-transform: uppercase; /* Opzionale: per un look più da "controllo" */
    letter-spacing: 1px;   /* Opzionale */
    min-width: 100px; /* Larghezza minima per garantire leggibilità */
    margin: 5px; /* Margine attorno ai bottoni */
    box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
    transition: background-color 0.15s ease-in-out, transform 0.1s ease, box-shadow 0.15s ease-in-out;
}

.action-button:hover:not(:disabled) {
    background-color: var(--border-color, #009000); /* Verde più scuro su hover */
    color: var(--bg-color, #000000);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    transform: translateY(-1px);
}

.action-button:active:not(:disabled) {
    background-color: var(--accent-color, #00FF00); /* Verde brillante quando premuto */
    color: #000000;
    transform: translateY(1px);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
}

.action-button:disabled {
    background-color: #222;
    color: #555;
    border-color: #444;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

/* Stili specifici se i bottoni sono in una griglia */
.control-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* TRE colonne per layout D-pad */
    grid-template-rows: repeat(2, auto);
    gap: 5px;
    max-width: 280px; /* Aumentata leggermente per 3 colonne */
    margin: 10px auto;
}

.control-grid .action-button {
    width: 100%; /* Fa espandere i bottoni per riempire la cella della griglia */
    padding: 12px 5px; /* Padding ottimizzato per griglia */
    font-size: 0.9em;
    margin: 0; /* Rimuove il margine per i bottoni in griglia */
}

/* Assicurati che il pulsante Salva Partita e il pulsante Crafting (se non in griglia) abbiano un margine adeguato 
   e centrati se sono diretti figli di #controls o #stats-panel ul li */
#controls > .action-button:not(.control-grid .action-button),
#stats-panel ul li > .action-button {
    display: block; /* Per centrare con margin auto */
    margin: 15px auto;
    width: 80%; /* Larghezza rispetto al contenitore */
    max-width: 200px;
}

/* Posizionamento specifico dei bottoni nella griglia (D-PAD) */
#btn-up { grid-column: 2; grid-row: 1; }      /* Centro, Riga 1 */
#btn-left { grid-column: 1; grid-row: 2; }    /* Sinistra, Riga 2 */
#btn-down { grid-column: 2; grid-row: 2; }    /* Centro, Riga 2 */
#btn-right { grid-column: 3; grid-row: 2; }   /* Destra, Riga 2 */
/* #btn-inventory { grid-column: 1 / -1; grid-row: 3; width: 80%; margin-top: 5px;} /* Esempio per un bottone a larghezza intera nella riga 3 */

/* Stile Base per i Bottoni di Controllo (all'interno dell'area #controls) */
#controls button {
    background-color: #111; /* Sfondo scuro */
    color: var(--fg-color); /* Testo verde brillante */
    border: 1px solid var(--border-color); /* Bordo verde brillante */
    padding: 8px 12px; /* Padding interno per dimensione del bottone */
    margin: 4px; /* Margine esterno (potrebbe essere ridotto con gap della griglia) */
    font-family: inherit; /* Eredita il font monospaced dalla body */
    font-size: 1em; /* Dimensione font come testo base */
    cursor: pointer; /* Cambia cursore al passaggio del mouse */
    transition: background-color 0.2s, color 0.2s; /* Transizione fluida per effetti hover */
}

/* Stile bottoni di controllo su hover (quando non disabilitati) */
#controls button:hover:not(:disabled) {
    background-color: var(--highlight-bg); /* Sfondo evidenziato (verde) */
    color: var(--highlight-fg); /* Testo evidenziato (nero) */
}

/* Stile bottoni di controllo quando disabilitati (classe 'disabled' aggiunta da JS) */
#controls button:disabled {
    color: var(--border-dim-color); /* Colore testo spento */
    border-color: var(--border-dim-color); /* Colore bordo spento */
    cursor: not-allowed; /* Cursore non permesso (simbolo divieto) */
    opacity: 0.5; /* Rendi semi-trasparente */
}