/* Question scenes retain their full frame so every clue stays visible. */
.question-illustration{margin:0;background:#eef7ff;display:flex;align-items:center;justify-content:center;height:300px;overflow:hidden;border-radius:16px}
.question-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.question-illustration img[hidden],.question-illustration figcaption[hidden]{display:none}
.question-illustration figcaption{padding:16px;line-height:1.5;color:#163671}
.feedback-box{white-space:normal;overflow-wrap:anywhere}
.option:disabled{opacity:1;cursor:default}
@media(max-width:700px){
 .quiz-screen .question-illustration{height:clamp(150px,25dvh,230px);min-height:130px;flex-shrink:0}
 .quiz-screen .q-card-left{overflow-y:auto}
 .quiz-screen .options{flex:0 0 auto}
 .quiz-screen .option{min-height:40px}
 .quiz-screen .q-actions{position:sticky;bottom:0;background:white;padding-top:4px;margin-top:auto}
 .quiz-screen .feedback-box{line-height:1.3;font-size:13px;max-height:27dvh;overflow-y:auto;flex-shrink:1}
 .quiz-screen .nav-btn{flex-shrink:0}
}
body:has(.modal-backdrop.quiz-screen){overflow:hidden}
.quiz-screen .modal-card{max-width:100%;min-width:0}
.quiz-screen .q-actions{min-width:0}
.quiz-screen .feedback-box{min-width:0}
@media(min-width:701px) and (max-width:1180px){
 .quiz-screen .q-side{display:none}
 .quiz-screen .quiz-top{gap:8px}
 .quiz-screen .q-card-left h3{font-size:28px}
 .quiz-screen .question-title{font-size:21px}
}
@media(min-width:701px) and (max-width:1050px){
 #app .topbar{flex-wrap:wrap}
 #app .tabs{flex-wrap:wrap;min-width:0;max-width:100%}
}
@media(min-width:701px){
 .quiz-screen .question-illustration{height:clamp(170px,22dvh,280px)}
 .quiz-screen .option{padding:12px 16px}
 .quiz-screen .q-card-left h3{font-size:28px}
 .quiz-screen .question-title{font-size:21px}
}

.quiz-screen .q-actions{flex-wrap:wrap}
.question-navigation{display:flex;gap:8px;flex:1;min-width:0}
.question-navigation .nav-btn{flex:1;min-width:0;font-size:clamp(13px,1.5vw,20px);padding:12px}
.question-navigation .nav-btn:disabled{opacity:.45;cursor:default}
@media(max-width:700px){
 .quiz-screen .q-actions{align-items:stretch}
 .quiz-screen .question-navigation{flex:none;width:100%;gap:6px}
 .quiz-screen .question-navigation .nav-btn{font-size:13px;padding:8px 5px;min-height:42px}
 .quiz-screen .text-meta{gap:6px;line-height:1.3}
}