body{
background:#f5f5f5;
font-family:Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.quiz-container{
/*max-width:1200px;*/
margin:auto;
}
.question-card{
margin-bottom:24px;
width:100%;
border-radius: 16px;
}

.question-ad-card{
margin-bottom:24px;
width:100%;
border-radius: 16px;
}

.mdl-card__title{
background:#fafafa;
padding:20px;
}
.mdl-card__title-text{
font-size:22px;
font-weight:500;
}
.mdl-card__supporting-text{
font-size:16px;
padding:20px;
}
.option{
display:block;
margin:8px 0;
padding:12px 16px;
border-radius:16px;
background:#fff;
border:1px solid #ddd;
cursor:pointer;
transition:background 0.2s;
}
.option:hover{
background:#f9f9f9;
}
.option.correct{
border:1px solid #2e7d32;
background:#e8f5e9;
color:#2e7d32;
font-weight:500;
}
.option.incorrect{
border:1px solid #c62828;
background:#ffebee;
color:#c62828;
}
.explanation{
margin-top:16px;
padding:12px;
border-left:6px solid #3f51b5;
border-top-right-radius:16px;
border-bottom-right-radius:16px;

background:#f0f0ff;
font-size:15px;
color:#333;
display:none;
}
.explanation.show{
display:block;
}
.result{
margin-top:10px;
font-weight:500;
font-size:15px;
display:none;
}
.result.correct{
color:#2e7d32;
}
.result.incorrect{
color:#c62828;
}

.soundToggleBtn{
    /*position: fixed;*/
    /*bottom: 24px;*/
    /*right: 24px;*/
    z-index: 1000;
}