/* Answers use one neutral state on every new question. Hover applies only to mice. */
.answer:not(.correct):not(.wrong){background:#f6f5fc;border-color:#efecfa;color:#4e4a71}
@media(hover:hover) and (pointer:fine){.answer:not(:disabled):not(.correct):not(.wrong):hover{background:#eeebff}}
.answer:focus{outline:none}.answer:focus-visible{outline:3px solid #b6a7f6;outline-offset:2px}
.difficulty-picker{text-align:left;margin:9px 0 12px}
.difficulty-title{font-size:12px;font-weight:900;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.difficulty-title span{font-weight:600;color:#aaa4bc;font-size:10px}
.difficulty-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.difficulty-choices button{min-width:0;background:#fff;border:2px solid #eae7f6;border-radius:13px;color:#6d6b85;padding:8px 3px;font-size:13px;font-weight:900;line-height:1.3}
.difficulty-choices button small{display:block;color:#aaa5b9;font-size:10px;font-weight:600;margin-top:3px}
.difficulty-choices button.active{background:#f0edff;border-color:#9784ed;color:#7966d6}
.difficulty-choices button.active small{color:#8778c7}
.difficulty-choices button:focus-visible{outline:3px solid #b6a7f6;outline-offset:2px}

@media(max-height:1024px){
 .app{padding-top:12px;padding-bottom:6px}header{padding-bottom:12px}
 #home .home-top h1{font-size:30px;margin:5px 0 12px}
 .hero-card{padding:15px 24px 17px}.hero-slime-wrap{height:180px}
 .hero-slime-wrap .slime.big{transform:scale(.82)}.hero-card h2{font-size:21px;margin-bottom:15px}
 .stat-row{margin:12px 0}.stat{padding:12px 5px}
 .difficulty-picker{margin:7px 0 9px}.difficulty-choices button{padding:6px 3px}
 .primary.large{padding:15px 20px}.under-btn{margin:8px 0 0}.text-button{margin:12px auto 0}
 footer{padding-top:10px}
}

/* Fit core actions within typical phone and laptop viewports. */
@media(max-height:860px){
 .app{padding-top:12px;padding-bottom:8px;min-height:100dvh}
 header{padding-bottom:10px}.logo{font-size:18px}.logo-icon{width:34px;height:34px}
 #home .home-top h1{font-size:clamp(24px,3.5vh,31px);margin:5px 0 10px}
 .home-top .eyebrow{font-size:10px}.hero-card{padding:13px 22px 15px}
 .hero-slime-wrap{height:clamp(135px,23vh,190px)}.hero-slime-wrap .slime.big{transform:scale(.78)}
 .hero-card h2{font-size:20px;margin-bottom:12px}.hero-card p{margin-top:6px}
 .stat-row{margin:10px 0}.stat{padding:9px 5px}.stat strong{font-size:19px;margin-top:3px}
 .primary.large{padding:14px 20px}.under-btn{margin-top:7px}.text-button{margin:10px auto 0}
 .question-progress{margin:10px 0}.quiz-info{padding-bottom:8px}.quiz-info strong{font-size:23px}
 .question-panel{padding:12px 18px 14px}.timer-ring{margin:12px auto 2px;width:55px;height:55px}
 .question-panel h2{margin:12px 0 2px}.question-panel p{margin-bottom:14px}.answer{min-height:64px}
 .feedback{margin-top:8px}.quiz-friend{padding:15px 0}
 .result-header h1{font-size:29px}.result-card{margin:12px 0;padding:17px}
 .result-card>.slime{transform:scale(.65);margin:-25px 0}.result-score{font-size:36px;margin:0 0 12px}
 .result-grid>div{padding:10px 4px}footer{padding-top:12px}
}
@media(max-width:760px) and (max-height:760px){
 .app{padding:9px 14px 5px}header{padding-bottom:7px}
 #welcome{gap:10px;margin:0 auto}.intro h1{font-size:27px;margin:5px 0}.intro p{margin:0;font-size:12px;line-height:1.5}
 .setup-card{padding:13px}.step-label{margin-bottom:6px}.color-grid{margin-bottom:12px}.color-option{padding:4px 2px}
 .color-option .slime{transform:scale(.65)}.selected-preview{padding:8px;margin:10px 0}
 #home .home-top h1{font-size:23px;margin:3px 0 8px}.hero-card{padding:10px 15px}
 .hero-slime-wrap{height:clamp(113px,20vh,160px)}.hero-slime-wrap .slime.big{transform:scale(.66)}
 .hero-card h2{font-size:18px;margin-bottom:8px}.hero-meta{font-size:11px}
 .stat{padding:7px 3px}.stat strong{font-size:17px}.primary.large{padding:12px 17px}
 .difficulty-picker{margin:5px 0 7px}.difficulty-title{font-size:11px;margin-bottom:4px}.difficulty-choices{gap:5px}.difficulty-choices button{padding:5px 2px;font-size:12px}.difficulty-choices button small{font-size:9px;margin-top:2px}
 .question-panel{padding:10px 14px 12px}.question-panel h2{font-size:31px;margin:8px 0 2px}
 .timer-ring{margin:9px auto 0;width:49px;height:49px}.answers{gap:8px}.answer{min-height:56px;font-size:22px}
 .question-panel p{margin-bottom:10px}.quiz-friend{padding:10px 0}
 .result-header h1{font-size:26px}.result-header p{margin:3px 0}.result-card{margin:7px 0;padding:10px}
 footer{font-size:8px;padding-top:8px}
}