* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html, body {

    width: 100%;

    height: 100%;

    overflow: hidden; /* Impedisce lo scroll della pagina */

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #f0f0f0;

    font-family: 'Arial', sans-serif; /* Font più comune */

}



#gameCanvas {

    border: 1px solid black;

    background-color: #d0e0f0; /* Colore cielo semplice */

}



#ui {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 10;

    background-color: rgba(255, 255, 255, 0.7); /* Sfondo per tutta l'UI */

    padding: 8px 12px;

    border-radius: 5px;

    text-align: left; /* Allinea testo a sinistra */

}



/* NUOVE REGOLE PER IL TITOLO */

#gameTitle {

    font-size: 16px; /* Dimensione leggermente ridotta */

    font-weight: bold;

    color: #555; /* Colore grigio scuro */

    margin-bottom: 5px; /* Spazio sotto il titolo */

}



#scoreDisplay {

    font-size: 20px;

    color: #333;

    /* Rimosso sfondo individuale perché ora c'è quello dell'UI */

    /* background-color: rgba(255, 255, 255, 0.7); */

    /* padding: 5px 10px; */

    /* border-radius: 5px; */

}



#gameOverScreen {

    position: absolute;

    width: 300px;

    padding: 20px;

    background-color: rgba(0, 0, 0, 0.8);

    color: white;

    text-align: center;

    border-radius: 10px;

    z-index: 20;

    display: none; /* Nascondi per default */

    flex-direction: column; /* Necessario per display:flex */

    align-items: center; /* Centra bottone */

}



#gameOverScreen h1 {

    margin-bottom: 10px;

    color: #ff4d4d;

}



#gameOverScreen p {

    margin-bottom: 20px;

    font-size: 1.2em;

}



#restartButton {

    padding: 10px 20px;

    font-size: 1em;

    cursor: pointer;

    border: none;

    border-radius: 5px;

    background-color: #4CAF50;

    color: white;

}

/* ... (stili precedenti) ... */





#gameTitle {

    font-size: 16px;

    font-weight: bold;

    color: #555;

    margin-bottom: 5px;

}



#scoreDisplay {

    font-size: 20px;

    color: #333;

    margin-bottom: 8px; /* Aggiunto spazio sotto lo score */

}



/* --- NUOVI STILI PER IL PULSANTE AUDIO --- */

#soundToggleBtn {

    background-color: #6c757d; /* Grigio */

    color: white;

    border: none;

    border-radius: 4px;

    padding: 5px 10px;

    font-size: 12px;

    cursor: pointer;

    transition: background-color 0.2s ease;

}



#soundToggleBtn:hover {

    background-color: #5a6268; /* Grigio più scuro */

}

/* --- FINE NUOVI STILI --- */



/* ... (stili precedenti per *, html, body, gameCanvas) ... */



#ui {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 10;

    background-color: rgba(255, 255, 255, 0.7);

    padding: 8px 12px;

    border-radius: 5px;

    text-align: left;

}



#gameTitle {

    font-size: 16px;

    font-weight: bold;

    color: #555;

    margin-bottom: 5px;

}



#scoreDisplay {

    font-size: 20px;

    color: #333;

    margin-bottom: 8px;

}



/* --- NUOVO CONTENITORE PER PULSANTI AUDIO --- */

.audio-controls {

    display: flex; /* Affianca i pulsanti */

    gap: 8px;      /* Spazio tra i pulsanti */

}



/* --- STILI PER I PULSANTI AUDIO (SIMILI A PRIMA MA ORA APPLICATI A ENTRAMBI) --- */

.audio-controls button {

    background-color: #6c757d; /* Grigio */

    color: white;

    border: none;

    border-radius: 4px;

    padding: 5px 10px;

    font-size: 12px;

    cursor: pointer;

    transition: background-color 0.2s ease;

    white-space: nowrap; /* Impedisce al testo di andare a capo */

}



.audio-controls button:hover {

    background-color: #5a6268; /* Grigio più scuro */

}



.audio-controls button:disabled {

    background-color: #adb5bd; /* Grigio più chiaro per disabilitato */

    cursor: default;

}

/* --- FINE STILI AUDIO --- */





/* ... (stili per gameOverScreen, restartButton, ecc.) ... */

/* ... (stili per gameOverScreen, restartButton, ecc.) ... */

/* ... (stili precedenti) ... */



#gameOverScreen {

    position: absolute;

    width: 300px;

    padding: 20px;

    background-color: rgba(0, 0, 0, 0.8);

    color: white;

    text-align: center;

    border-radius: 10px;

    z-index: 20;

    display: none; /* Nascondi per default */

    flex-direction: column;

    align-items: center;

}



#gameOverScreen h1 {

    margin-bottom: 10px;

    color: #ff4d4d;

}



#gameOverScreen p {

    margin-bottom: 10px; /* Ridotto margine di default */

    font-size: 1.2em;

}



/* Stile specifico per il paragrafo High Score */

#gameOverScreen p:last-of-type { /* Seleziona l'ultimo paragrafo (quello dell'high score) */

     margin-bottom: 20px; /* Aggiunge spazio sotto l'high score, prima del pulsante */

     font-size: 1em; /* Opzionale: rendi l'high score leggermente più piccolo */

     color: #ccc;   /* Opzionale: colore diverso per distinguerlo */

}





#restartButton {

    padding: 10px 20px;

    font-size: 1em;

    cursor: pointer;

    border: none;

    border-radius: 5px;

    background-color: #4CAF50;

    color: white;

}



/* ... (altri stili) ... */

/* ... (stili precedenti) ... */



#ui {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 10;

    background-color: rgba(255, 255, 255, 0.7);

    padding: 8px 12px;

    border-radius: 5px;

    text-align: left;

}



#gameTitle {

    font-size: 16px;

    font-weight: bold;

    color: #555;

    margin-bottom: 3px; /* Ridotto spazio */

}



#scoreDisplay {

    font-size: 18px; /* Leggermente ridotto per far spazio */

    color: #333;

    margin-bottom: 3px; /* Ridotto spazio */

}



/* --- STILE PER HIGH SCORE NELLA UI --- */

#highScoreUI {

    font-size: 14px; /* Più piccolo */

    color: #444;    /* Colore diverso */

    margin: 0 0 8px 0; /* Rimuove margine sopra, aggiunge sotto prima dei bottoni */

    padding: 0;

    font-weight: bold;

}

/* --- FINE STILE HIGH SCORE --- */





.audio-controls {

    display: flex;

    gap: 8px;

}



.audio-controls button {

    background-color: #6c757d;

    color: white;

    border: none;

    border-radius: 4px;

    padding: 5px 10px;

    font-size: 12px;

    cursor: pointer;

    transition: background-color 0.2s ease;

    white-space: nowrap;

}

.audio-controls button:hover { background-color: #5a6268; }

.audio-controls button:disabled { background-color: #adb5bd; cursor: default; }



/* --- RIMUOVI O COMMENTA QUESTO BLOCCO ---

#gameOverScreen p:last-of-type {

     margin-bottom: 20px;

     font-size: 1em;

     color: #ccc;

}

*/



#gameOverScreen {

    /* ... stili gameOverScreen come prima ... */

    position: absolute; width: 300px; padding: 20px; background-color: rgba(0, 0, 0, 0.8); color: white; text-align: center; border-radius: 10px; z-index: 20; display: none; flex-direction: column; align-items: center;

}

#gameOverScreen h1 { margin-bottom: 10px; color: #ff4d4d; }

#gameOverScreen p { margin-bottom: 20px; /* Ripristinato margine per il solo Punteggio Finale */ font-size: 1.2em; }





#restartButton { /* ... stili restartButton come prima ... */ padding: 10px 20px; font-size: 1em; cursor: pointer; border: none; border-radius: 5px; background-color: #4CAF50; color: white; }



/* ... (altri stili) ... */