/* 1. Solo colore e font, niente regole di posizionamento aggressive */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e8f5e9; /* Il verdino su tutto il gioco */
    margin: 0;
    padding: 0;
}

.screen { text-align: center; padding: 20px; }
.hidden { display: none !important; }

/* I box indizi */
.hint-box {
    background: #fff;
    border-left: 5px solid #007bff;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Griglia e Immagini */
.game-layout { display: flex; gap: 30px; justify-content: center; margin-top: 20px; }

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 600px; /* Larghezza griglia fissa */
}

.grid img {
    width: 150px; /* Larghezza fissa */
    height: auto;  /* Mantiene proporzioni */
    cursor: pointer;
    border: 3px solid transparent;
}

/* Indizi */
#hints-sidebar { width: 250px; text-align: left; background: turquoise; padding: 15px; border-radius: 10px; }
.hint-box { 
    background: white; margin-bottom: 10px; padding: 10px; 
    border-left: 5px solid #007bff; animation: fadeIn 0.5s;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#timer-display { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: red; }

/* Schermata Vittoria */
#screen-success {
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: flex-start; /* Sposta tutto verso l'alto */
    height: 100vh; /* 100% viewport height. */
}

/* Schermata Sconfitta */
#screen-fail {
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: flex-start; /* Sposta tutto verso l'alto */
    height: 100vh; /* 100% viewport height. */
}

.celebration-text {
    font-size: 3.5rem;
    color: #2e7d32;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.failure-text {
    font-size: 3.5rem;
    color: #2e7d32;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

#winning-image-preview {
    width: 450px !important; /* Larghezza fissa maggiore (contro i 150px della griglia) */
    height: auto;            /* Mantiene le proporzioni originali */
    display: block;
    margin: 0 auto;          /* Centra l'immagine nel contenitore */
    border: 8px solid #2e7d32;
    border-radius: 15px;
}

#failing-image-preview {
    width: 450px !important; /* Larghezza fissa maggiore (contro i 150px della griglia) */
    height: auto;            /* Mantiene le proporzioni originali */
    display: block;
    margin: 0 auto;          /* Centra l'immagine nel contenitore */
    border: 8px solid #2e7d32;
    border-radius: 15px;
}

.winning-card {
    padding: 20px;
    background: white; 
    border-radius: 20px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    margin: 10px 0; /* era 20px */
    text-align: center;
    animation: popIn 0.5s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

#success-text {
	font-size: 2.5rem;
    color: #1b5e20;
    margin-top: 15px;
    letter-spacing: 2px;
    max-width: 600px;
}

#fail-text {
	font-size: 2.5rem;
    color: #1b5e20;
    margin-top: 15px;
    letter-spacing: 2px;
    max-width: 600px;
}

.next-container { margin-top: 10px; } 

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.btn-link {
    background: #2e7d32;      /* Un bel verde scuro */
    color: white;             
    border: none;             /* Rimuove il bordo */
    padding: 15px 30px;       /* Spazio intorno al testo */
    font-size: 1.5rem;        
    font-weight: bold;
    border-radius: 50px;      /* Bordi arrotondati (stile "pillola") */
    cursor: pointer;          /* Fa comparire la manina al passaggio */
    transition: all 0.3s;     /* Animazione fluida */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-top: 20px;         
}

.btn-link:hover {
    background: #1b5e20;      /* Verde ancora più scuro quando ci passi sopra */
    transform: translateY(-3px); /* Effetto "salto" verso l'alto */
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn-link:active {
    transform: translateY(0);  /* Effetto "pressione" al click */
}

/* Stile per il tasto "Riprova" (Schermata Timeout) */
.btn-retry {
    background: #f39c12 !important; /* Arancione caldo */
}

.btn-retry:hover {
    background: #e67e22 !important; /* Arancione più scuro */
}

/* Stile per il tasto "Gioca Ancora" (Schermata Finale) */
.btn-restart {
    background: #3498db !important; /* blu vivace */
}

.btn-restart:hover {
    background: #2980b9 !important;
}