@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');
:root { --colore-primario: #007BFF; --colore-secondario: #FFA500; --colore-successo: #20C997; --colore-errore: #E84A5F; --colore-sfondo: #E9F5FF; --colore-testo: #2C3E50; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background-color: var(--colore-sfondo); color: var(--colore-testo); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.quiz-container { width: 100%; max-width: 800px; background-color: white; border-radius: 20px; padding: 40px; box-shadow: 0 10px 30px rgba(0, 123, 255, 0.15); text-align: center; position: relative; }
.back-to-menu { position: absolute; top: 15px; left: 20px; text-decoration: none; color: var(--colore-primario); font-weight: 700; }
.screen h1, .screen h2 { color: var(--colore-primario); margin-bottom: 20px; }
.screen p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 30px; }
.btn-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 20px; }
@media (min-width: 768px) { .btn-grid { grid-template-columns: 1fr 1fr; } }
.btn { background-color: var(--colore-primario); color: white; border: none; border-radius: 10px; padding: 15px 20px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.btn.btn-start { background-color: var(--colore-secondario); }
.btn.correct { background-color: var(--colore-successo); }
.btn.wrong { background-color: var(--colore-errore); }
.btn:disabled { cursor: not-allowed; opacity: 0.7; }
.hide { display: none; }