/* css/events.css */

/* Stile Base per gli Overlay (sia Evento che Fine Gioco) */
/* Questo stile è applicato alla classe 'overlay' che è sul #event-overlay e #end-screen */
.overlay {
    position: absolute; /* Posizionato rispetto al viewport */
    top: 0; left: 0;
    width: 100%; height: 100%; /* Copre l'intera area del genitore (body) */
    background-color: var(--overlay-bg); /* Sfondo scuro semi-trasparente (colore definito in base.css) */
    color: var(--fg-color); /* Colore testo predefinito */
    z-index: 50; /* Assicura che sia sopra il container di gioco (che potrebbe avere z-index default 0) */
    box-sizing: border-box; /* Include padding e border nelle dimensioni */
    display: flex; /* Usa flexbox per centrare il contenuto interno (il popup) */
    align-items: center; /* Allinea verticalmente al centro */
    justify-content: center; /* Allinea orizzontalmente al centro */

    /* Stili per animazione fade-in/out */
    opacity: 0; /* Inizia completamente trasparente */
    visibility: hidden; /* Inizia nascosto (non occupa spazio nel layout e non è interattivo) */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Transizione sull'opacità, ritardo sulla visibilità per far finire la transizione */
}

/* Classe 'visible' aggiunta con JS per rendere visibile l'overlay */
.overlay.visible {
    opacity: 1 !important; /* Rende completamente opaco */
    visibility: visible !important; /* Rende visibile */
    transition-delay: 0s; /* Rimuove il ritardo quando si rende visibile (transizione immediata) */
}

/* Stile specifico per la Schermata di Fine Gioco (sul div #end-screen) */
#end-screen {
     /* Eredita stili .overlay (display: flex, centrato) */
     /* Assicuriamoci che abbia uno sfondo (anche se ereditato) e padding */
     /* background-color: var(--overlay-bg); /* Già ereditato */
     padding: 40px; /* Aggiungi padding interno */
     /* display: none; */ /* Nascosto inizialmente tramite JS (verrà mostrato impostando display: flex) */
     flex-direction: column; /* Impila gli elementi interni (#end-title, #end-message, button) in una colonna */
     text-align: center; /* Allinea il testo (e gli elementi in-line) al centro */
}

#end-screen h1 { /* Titolo "VITTORIA" o "SCONFITTA" */
     color: var(--accent-color); /* Colore accento (giallo) */
     margin-bottom: 30px; /* Spazio sotto il titolo */
     font-size: 2em; /* Dimensione font maggiore */
}

#end-screen #end-message { /* Messaggio di fine gioco */
     white-space: pre-wrap; /* Mantiene i caratteri di a capo (\n) e gli spazi nel testo impostato da JS */
     color: var(--fg-color); /* Colore esplicito per sicurezza (verde brillante) */
     max-height: 60%; /* Limita l'altezza massima del messaggio per evitare overflow su schermi piccoli */
     overflow-y: auto; /* Aggiunge una scrollbar se il messaggio è troppo lungo */
     margin-bottom: 20px; /* Spazio sotto il messaggio */
     font-size: 1.1em; /* Dimensione font leggermente maggiore */
     line-height: 1.4; /* Interlinea migliorata per la leggibilità */
     text-align: left; /* Allinea il testo a sinistra all'interno del blocco messaggio */
     padding: 0 10%; /* Padding sui lati per non attaccare ai bordi del popup */
     width: 80%; /* Larghezza del blocco messaggio (80% del suo container flessibile) */
}

#end-screen button { /* Bottone "Ricomincia" */
     background-color: var(--border-dim-color); /* Usa un verde scuro per distinguerlo */
     color: var(--fg-color); /* Testo verde */
     border: 2px solid var(--border-color); /* Bordo verde più spesso */
     padding: 10px 20px; /* Padding */
     font-family: inherit; /* Eredita il font monospaced */
     font-size: 1.1em; /* Dimensione font */
     cursor: pointer; /* Cambia cursore */
     margin-top: 20px; /* Spazio sopra il bottone */
     transition: background-color 0.2s, color 0.2s; /* Transizione fluida per effetti hover */
}
#end-screen button:hover {
     background-color: var(--highlight-bg); /* Sfondo evidenziato */
     color: var(--highlight-fg); /* Testo evidenziato */
     border-color: var(--highlight-bg); /* Cambia anche colore bordo su hover */
}


/* Stile specifico per il Popup Eventi (sul div #event-popup) */
#event-popup {
    /* Eredita stili .popup (background, border, padding, max-width, max-height, overflow-y, box-shadow, font-family, text-align) */
}

#event-overlay h2#event-title { /* Titolo nel popup evento (sul tag h2) */
    margin-top: 0;
    border-bottom: 1px dashed var(--border-dim-color); /* Linea tratteggiata sotto il titolo */
    padding-bottom: 10px; /* Spazio sotto la linea */
    margin-bottom: 20px; /* Spazio sotto il titolo e la linea */
    font-size: 1.3em; /* Dimensione font maggiore */
    color: var(--accent-color); /* Colore accento */
    font-family: inherit; /* Eredita il font monospaced */
}

#event-content { /* Contenuto / Descrizione dell'evento (sul tag p) */
    margin-bottom: 20px; /* Spazio sotto la descrizione */
    text-align: left; /* Allinea testo a sinistra (per descrizioni multi-riga) */
    white-space: pre-wrap; /* Mantiene i caratteri di a capo e gli spazi */
    font-size: 1em; /* Dimensione font normale */
    line-height: 1.5; /* Interlinea migliorata per la leggibilità */
    color: var(--fg-color); /* Colore testo standard */
    font-family: inherit; /* Eredita il font monospaced */
}

/* Stili per il container dei pulsanti di scelta/azione nell'overlay (sul div #event-choices) */
#event-choices {
    margin-top: 15px; /* Spazio sopra i bottoni */
    text-align: center; /* Centra i bottoni nel container */
}

/* Stili per i pulsanti di scelta/azione negli eventi (aggiunti da JS) */
#event-choices button {
    background-color: #111; /* Sfondo scuro */
    color: var(--fg-color); /* Testo verde */
    border: 1px solid var(--border-color); /* Bordo verde */
    padding: 10px 18px; /* Padding */
    font-family: inherit; /* Eredita font monospaced */
    font-size: 1em; /* Dimensione font normale */
    cursor: pointer; /* Cambia cursore */
    margin: 8px; /* Margine tra i bottoni */
    display: block; /* Ogni bottone su una nuova riga */
    width: 80%; /* Larghezza reattiva */
    margin-left: auto; margin-right: auto; /* Centra i bottoni blocco */
    transition: background-color 0.2s, color 0.2s; /* Transizione fluida per effetti hover */
}

/* Stili per i pulsanti di scelta/azione su hover (quando non disabilitati) */
#event-choices button:hover:not(:disabled) {
    background-color: var(--highlight-bg); /* Sfondo evidenziato */
    color: var(--highlight-fg); /* Testo evidenziato */
}

/* Stile specifico per azioni di ricerca (indica costo tempo) */
/* Classe 'search-action' aggiunta da JS al bottone scelta */
#event-choices button.search-action {
    border-color: var(--warning-color); /* Bordo giallo/arancio per indicare costo */
}

/* Stile specifico per azioni pericolose (es. Lascia Item, alcuni esiti fallimento?) */
/* Classe 'danger-action' aggiunta da JS al bottone scelta */
#event-choices button.danger-action {
    border-color: var(--danger-color); /* Bordo rosso */
    color: var(--danger-color); /* Testo rosso */
}
#event-choices button.danger-action:hover:not(:disabled) {
    background-color: var(--danger-color); /* Sfondo rosso su hover */
    color: var(--bg-color); /* Testo nero su hover */
}


/* Pulsante Continua (mostrato quando non ci sono scelte interattive) */
/* Questo bottone ha un ID (continue-button) ma non è dentro #event-choices nel HTML */
/* È un bottone diretto nel popup, gestito da JS */
#event-popup button.continue-button { /* Selettore corretto per il bottone continua */
    background-color: #111; /* Sfondo scuro */
    color: var(--fg-color); /* Testo verde */
    border: 1px solid var(--border-color); /* Bordo verde */
    padding: 10px 20px; /* Padding */
    font-family: inherit; /* Eredita font monospaced */
    font-size: 1em; /* Dimensione font normale */
    cursor: pointer; /* Cambia cursore */
    margin-top: 20px; /* Spazio sopra */
    display: block; /* Blocco per larghezza reattiva */
    width: 50%; /* Larghezza reattiva */
    margin-left: auto; margin-right: auto; /* Centra il bottone */
    transition: background-color 0.2s, color 0.2s; /* Transizione fluida per effetti hover */
 }

 /* Stile bottone Continua su hover (quando non disabilitato) */
 #event-popup button.continue-button:hover:not(:disabled) {
     background-color: var(--highlight-bg); /* Sfondo evidenziato */
     color: var(--highlight-fg); /* Testo evidenziato */
 }

/* Stile per i pulsanti di scelta/azione e Continua quando disabilitati (classe 'disabled' aggiunta da JS) */
#event-choices button:disabled,
#event-popup button.continue-button:disabled /* Aggiunto anche per il bottone continua */
{
    color: var(--border-dim-color); /* Colore testo spento */
    border-color: var(--border-dim-color); /* Colore bordo spento */
    cursor: not-allowed; /* Cursore non permesso */
    opacity: 0.5; /* Rendi semi-trasparente */
}

/* Stili per il Popup Azioni Oggetto (CORRETTO) */

/* Stile per il contenitore dei bottoni azioni oggetto per layout verticale */
#item-action-choices {
    display: flex;
    flex-direction: column; /* Dispone i bottoni verticalmente */
    gap: 8px; /* Spazio tra i bottoni (simile a margin in event-choices) */
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center; /* Centra i bottoni se il container è più largo */
}

/* Stile base per i bottoni nel popup azioni oggetto - IDENTICO a #event-choices button */
#item-action-popup .action-button {
    background-color: #111; /* Sfondo scuro */
    color: var(--fg-color); /* Testo verde */
    border: 1px solid var(--border-color); /* Bordo verde standard */
    padding: 10px 18px; /* Padding */
    font-family: inherit; /* Eredita font monospaced */
    font-size: 1em; /* Dimensione font normale */
    cursor: pointer; /* Cambia cursore */
    /* margin: 8px; */ /* Il gap nel flex container gestisce lo spazio verticale */
    display: block; /* Già garantito da flex-direction, ma per sicurezza */
    width: 80%; /* Larghezza reattiva (come eventi) */
    /* margin-left: auto; margin-right: auto; -> gestito da align-items sul container */
    text-align: center; /* MODIFICATO: da left a center */
    transition: background-color 0.2s, color 0.2s; /* Transizione fluida per effetti hover */
    box-sizing: border-box;
}

/* Stile hover - IDENTICO a #event-choices button:hover */
#item-action-popup .action-button:hover:not(:disabled) {
    background-color: var(--highlight-bg); /* Sfondo evidenziato */
    color: var(--highlight-fg); /* Testo evidenziato */
    /* Il bordo può rimanere del colore specifico o cambiare anch'esso */
     border-color: var(--highlight-bg); /* Cambiamo anche il bordo su hover come per gli eventi */
}

/* Stili specifici per tipo di azione (solo colore bordo) */

/* Azione "Lascia" -> Bordo Rosso (come .danger-action) */
#item-action-popup .action-button.action-drop {
    border-color: var(--danger-color, #f44336); /* Usa variabile danger se definita, altrimenti rosso */
}
#item-action-popup .action-button.action-drop:hover:not(:disabled) {
     background-color: var(--danger-color, #f44336); /* Sfondo rosso su hover */
     color: var(--bg-color, #000); /* Testo nero/scuro su hover */
     border-color: var(--danger-color, #f44336); /* Mantiene bordo rosso */
}

/* Bottone Chiudi -> Stile base standard */
#item-action-close-button {
    background-color: #111;
    color: var(--fg-color);
    border: 1px solid var(--border-color);
    padding: 10px 18px;
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
    margin-top: 15px; /* Spazio sopra */
    display: block;
    width: 50%; /* Più stretto? O 80% come gli altri? */
    margin-left: auto; margin-right: auto; /* Centra */
    text-align: center; /* Centra testo */
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
}

#item-action-close-button:hover:not(:disabled) {
    background-color: var(--highlight-bg);
    color: var(--highlight-fg);
    border-color: var(--highlight-bg);
}

/* Stile disabilitato (se mai implementeremo azioni disabilitate qui) */
#item-action-popup .action-button:disabled,
#item-action-close-button:disabled {
    color: var(--border-dim-color);
    border-color: var(--border-dim-color);
    cursor: not-allowed;
    opacity: 0.5;
}

/* NUOVI STILI PER IL POPUP CRAFTING */
#crafting-popup {
    /* Stili base del popup se non ereditati o per sovrascrivere */
    background-color: #000000; /* Nero puro, come da richiesta per massima oscurità */
    border: 1px solid var(--border-color);
    padding: 20px;
    max-width: 700px; /* Larghezza massima popup crafting */
    width: 90%;
    max-height: 80vh; /* Altezza massima */
    overflow-y: auto;
    box-shadow: 0 5px 25px rgba(0,0,0,0.7);
    text-align: left; /* Allineamento testo default a sinistra per i contenuti */
    display: none; /* Nascosto di default, .visible lo mostrerà */
}

#crafting-popup.visible {
    display: flex !important; /* Usa flex per il layout interno principale */
    flex-direction: column; /* Impila titolo, contenuto, bottone chiusura */
    /* Aggiungiamo anche visibility e opacity per sicurezza, sebbene controllate dall'overlay */
    visibility: visible !important;
    opacity: 1 !important;
}

#crafting-popup h2 {
    text-align: center;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-dim-color);
}

#crafting-main-content {
    display: flex;
    flex-direction: row;
    gap: 20px; /* Spazio tra lista ricette e dettagli */
    margin-bottom: 20px;
    flex-grow: 1; /* Permette a questo contenuto di espandersi */
    overflow-y: hidden; /* Evita doppio scrollbar se le sezioni interne scrollano */
}

#crafting-recipe-list-panel, #crafting-details-panel {
    flex-basis: 50%;
    padding: 10px;
    border: 1px solid var(--border-dim-color);
    overflow-y: auto; /* Permette scroll indipendente per queste sezioni */
    display: flex;
    flex-direction: column;
}

#crafting-recipe-list-panel h3, #crafting-details-panel h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: var(--fg-color);
    border-bottom: 1px solid var(--border-dim-color);
    padding-bottom: 5px;
}

#crafting-recipe-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#crafting-recipe-list li button {
    display: block;
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
    text-align: left;
    background-color: #222;
    color: var(--fg-dim-color);
    border: 1px solid #333;
    cursor: pointer;
    font-family: inherit;
}

#crafting-recipe-list li button.craftable {
    color: var(--fg-color);
    border-color: var(--border-color);
}
#crafting-recipe-list li button.not-craftable {
    color: #666;
    border-color: #444;
    cursor: not-allowed;
}

#crafting-recipe-list li button.selected {
    background-color: var(--border-color);
    color: var(--bg-color);
}

#crafting-recipe-name {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1em;
}

#crafting-recipe-description {
    font-size: 0.9em;
    margin-bottom: 15px;
    color: var(--fg-dim-color);
}

#crafting-ingredient-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 0.9em;
}
#crafting-ingredient-list li {
    margin-bottom: 3px;
}
.has-ingredient { color: var(--fg-color); }
.missing-ingredient { color: var(--danger-color); font-weight: bold; }

#crafting-requirements {
    font-size: 0.8em;
    font-style: italic;
    color: var(--warning-color);
    margin-bottom: 15px;
}

#crafting-popup button#craft-item-button {
    /* Stile ereditato da .action-button se applicata quella classe, o definito qui */
    padding: 10px 20px;
    font-size: 1em;
    margin: 10px auto 0 auto; 
}

#crafting-popup button#crafting-close-button {
    display: block !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    padding: 10px 18px; /* Allineato con item-action-close-button */
    font-size: 1em;     /* Allineato */
    font-family: inherit;
    width: 50%;         /* Allineato */
    margin-left: auto;  /* Per centrare */
    margin-right: auto; /* Per centrare */
    text-align: center; /* Allineato */
    margin-top: 20px;   /* Spazio sopra, coerente o aggiustabile */
    box-sizing: border-box; /* Buona pratica */
    /* align-self: center; Rimosso, gestito da margin auto */
}

/* Ripristino e definizione esplicita per i pulsanti del popup di crafting */
#crafting-popup .action-button,
#crafting-popup .close-button { /* La classe .close-button ora si applica a #crafting-close-button */
    background-color: #111;
    color: var(--fg-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s, color 0.2s;
}

#crafting-popup .action-button:hover:not(:disabled),
#crafting-popup .close-button:hover:not(:disabled) {
    background-color: var(--highlight-bg);
    color: var(--highlight-fg);
}

#crafting-popup .action-button:disabled {
    color: #555;
    border-color: #444;
    background-color: #222;
    cursor: not-allowed;
}