/* Readable type on a cheerful stationery palette. Keep gameplay layout intact. */
.choiceHint{font-size:15px;color:#425d53;line-height:1.5}
.levelCard h2{color:#214f46}
.upgradeBtn.item-selected,#merchantPopup button.item-selected{outline:3px solid #2666b0;outline-offset:3px;border-color:#2666b0;background:#e6f3ff;box-shadow:0 4px 0 #aac8e3}
body.simple-play #answerAccess button.item-selected,#popupOptions button.item-selected,#continueQuestion.item-selected,#popupContinue.item-selected{outline:3px solid #2666b0;outline-offset:-3px;border-color:#2666b0;background:#e6f3ff;color:#253e3b}
.answerKeyHint{font-size:13px;line-height:1.4;color:#425d53;margin:3px 0}
#startPanel button.item-selected,#startPanel summary.item-selected,#startPanel a.item-selected,#playMenu button.item-selected,#playMenu summary.item-selected{outline:3px solid #2666b0;outline-offset:3px}
:root{--ink:#253e3b;--teal:#126358;--paper:#fffdf7}
body{background:radial-gradient(circle at 12% 12%,#ffe4cd,transparent 42%),radial-gradient(circle at 90% 80%,#d4eee2,transparent 48%),#f5f1e7;line-height:1.55}
button,input,select,textarea{font-weight:650;letter-spacing:0;text-shadow:none}
h1,h2,h3{letter-spacing:0;line-height:1.35}
.panel{background:#f2f4ebe8;backdrop-filter:none}
.card{border:2px solid #c4d6cd;border-radius:28px;box-shadow:0 8px 0 #d6e2d8,0 16px 34px #294d3918}
summary{color:#304f46;font-weight:700}
.subtitle,.small,.info,.history,.playPolicy,.copyright{color:#425d53}
.small,.info,.history,.playPolicy{font-size:16px;line-height:1.65}
button{border:2px solid #dfb964;border-radius:16px;background:#ffe4a3;color:#3c3c29;box-shadow:0 3px 0 #dfbd73;font-size:16px}
button:focus-visible,summary:focus-visible,input:focus-visible,.selectField:focus-within{outline:3px solid #2666b0;outline-offset:3px}
.selectField{border:2px solid #93b5a7;border-radius:16px;background:#fff;color:#253e3b}
.selectValue{font-size:17px;font-weight:650}
#startPanel .card{position:relative;padding:24px;background:radial-gradient(circle at 100% 0,#fff0d6,transparent 36%),#fffdf7}
#startPanel .titleRow{gap:10px;align-items:center}
#startPanel h1{font-size:clamp(29px,6.5vw,42px);color:#214f46;letter-spacing:0}
#startPanel .edition{background:#e5edcc;color:#39562c;border:1px solid #bccf9b;padding:3px 10px;font-family:'Pretendard Variable','Malgun Gothic',sans-serif;font-weight:750}
#startPanel .subtitle{font-size:17px;font-weight:500;color:#425d53;margin:12px 0 20px}
#startPanel .installChip{background:#fff;color:#24594e;border:1px solid #aac9bb;box-shadow:0 3px 0 #dce7df;font-size:14px;min-height:40px}
#startPanel #quickStart{gap:10px;margin-bottom:18px}
#quickStart .quickPrompt{font-size:18px;font-weight:700;color:#253e3b}
#quickStart>label{font-size:17px;font-weight:700}
#quickSummary{font-size:15px;color:#425d53;font-weight:550}
#startPanel #quickStart #startBtn{border:2px solid #0e574c;background:#126358;box-shadow:0 4px 0 #0b493f;border-radius:20px;color:#fff;font-size:25px;font-weight:750;min-height:62px;letter-spacing:.03em}
#startPanel .card>details{border:2px solid #c8d9ce;border-radius:18px;margin:10px 0;background:#eef5ec;padding:0 14px;box-shadow:0 2px 0 #e1e9df}
#startPanel .card>details:nth-of-type(2){background:#fff2e4;border-color:#e3cbb1;box-shadow:0 2px 0 #f2e4d5}
#startPanel .card>details:nth-of-type(3){background:#eff0fa;border-color:#d2d3e7;box-shadow:0 2px 0 #e5e5ef}
#startPanel .card>details>summary{font-size:17px;font-weight:650;min-height:52px;padding:10px 0;color:#304f46}
#startPanel .card>details>summary::after{font-weight:500;color:#42695c;font-size:22px;line-height:1}
#startPanel .copyright{font-size:13px;font-weight:500;line-height:1.65;margin:20px 0 0;color:#425d53}
#startPanel .copyright a{color:#304f46;text-underline-offset:3px}
#startPanel .setupGrid label,#startPanel .preferences,#startPanel .originalHelp{font-size:16px}
.characterCard strong{font-size:16px}.characterCard small,.catalogEntry small,.upgradeBtn .desc{font-size:14px;color:#425d53;line-height:1.6}
.resultStats div,.domainResult,.reviewRow p{font-size:16px}.reviewRow small{font-size:14px;color:#425d53}
body.simple-play #hud .hudBox{font-size:15px;font-weight:650;border:1px solid #b9cdbf;border-radius:14px;color:#253e3b;background:#fffdf7}
body.simple-play #levelStatus>.hudBox{border:0;background:none;border-radius:0}
body.simple-play #levelStatus>.hudBox,#compactEnergy{font-size:13px;font-weight:600}
#questionText{font-weight:750;color:#253e3b;letter-spacing:0}
#questionBox{background:#fff7de;border:2px solid #e2c57d}
body.simple-play #answerAccess button{font-size:calc(18px * var(--reading-scale));font-weight:700;color:#253e3b;background:#fff9e9;border:2px solid #d5c28d;border-radius:14px}
#questionVisual{font-family:inherit;font-size:14px}
body.simple-play #toast{font-size:16px;font-weight:600;background:#164f44;color:#fff;box-shadow:0 2px 8px #08251a44}
.exports .exportChoice{flex:1 1 230px;min-width:0}
.exports .exportChoice button{width:100%;white-space:normal}
.exports .exportChoice p{margin:10px 4px 0;font-size:15px;line-height:1.6;color:#405c53;overflow-wrap:anywhere}
#playMenu{border:2px solid #b6cdbd;background:#fffdf7}
body.simple-play.mobile-play #skillBtn{font-size:15px;color:#253e3b;border:2px solid #94b4a3}
body.simple-play.mobile-play #dashBtn{font-weight:750;color:#38381f;background:#ffdc84;border:2px solid #fff1c4}
@media(max-width:600px){
 #startPanel .card{padding:18px;border-radius:24px}
 #startPanel .subtitle{margin:10px 0 16px;font-size:16px}
 #startPanel .titleRow{gap:8px}
 #startPanel .card>details>summary{font-size:16px}
 #quickStart .quickPrompt{font-size:17px}
 body.simple-play #hud .hudBox{font-size:14px;padding:4px 6px}
 body.simple-play #levelStatus>.hudBox,#compactEnergy{font-size:12px}
}
@media(max-width:360px){
 #startPanel .card{padding:16px}
 #startPanel h1{font-size:29px}
 #startPanel .installChip{font-size:13px;min-height:36px;padding:5px 9px}
 #startPanel .subtitle{margin-bottom:14px}
}
/* 휴대폰: 앱 설치·QR을 카드 맨 윗줄 오른쪽에 (제목은 그 아래) */
@media(max-width:520px){
 #startPanel .titleRow{flex-wrap:wrap;row-gap:6px}
 #startPanel .topChips{order:-1;width:100%;justify-content:flex-end}
}

/* Larger question and feedback text, plus a visible cue when a new question appears. */
#questionText{font-size:calc(clamp(22px,1.2vw + 17px,34px) * var(--reading-scale));font-weight:850;line-height:1.3}
#explanation{font-size:calc(clamp(18px,.4vw + 15px,22px) * var(--reading-scale));line-height:1.45}
#explanation[data-result=correct]{background:#e8f7ec;border:2px solid #6cbf86;color:#1f5a35}
#explanation[data-result=wrong]{background:#fdecec;border:2px solid #e29a9a;color:#7a2a2a}
#newQuestionBadge{display:none;margin:0 auto 4px;width:max-content;padding:2px 12px;border-radius:999px;background:#f5b31f;color:#3b2a00;font-weight:850;font-size:calc(clamp(13px,.3vw + 11px,16px) * var(--reading-scale))}
#questionBox.newQuestion #newQuestionBadge{display:block}
/* No flashing: the box eases in once, then keeps a steady highlighted border while the badge shows. */
#questionBox.newQuestion{border-color:#f5b31f;box-shadow:0 0 0 3px #f5b31f66;animation:newQuestionIn .4s ease-out 1}
@keyframes newQuestionIn{from{opacity:.4;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.reduce-motion #questionBox.newQuestion{animation:none}
@media(prefers-reduced-motion:reduce){#questionBox.newQuestion{animation:none}}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-height:640px){#newQuestionBadge{margin-bottom:2px;padding:0 8px;line-height:1.25;font-size:calc(12px * var(--reading-scale))}}
.upgradeBtn .tip{display:block;margin-top:6px;padding:4px 8px;border-radius:10px;background:#fff4d6;color:#7a5a1e;font-size:12px;font-weight:700;line-height:1.4}
/* Keyboard tips only help on computers; touch screens hide them. */
@media(hover:none){.choiceHint,.keyboardOnly,.answerKeyHint{display:none}}
/* Read-aloud sits at the side of the question so it doesn't make the question area taller. */
.readAloud{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;min-width:44px;padding:4px 10px;border:2px solid #d9ab43;border-radius:999px;background:#fffdf3;color:#5b4613;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
#questionBox .readAloud{float:right;margin:0 0 2px 6px;padding:2px 4px;min-height:36px;min-width:40px}#questionBox .readAloud .readLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.readAloud .readIcon{font-size:20px;line-height:1}
.readAloud[hidden]{display:none!important}
/* Results: play-again buttons come right after the score so students don't scroll to find them. */
#gameOverPanel .resultActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
#gameOverPanel .resultActions button{min-height:52px;font-size:18px;font-weight:800}
@media(max-width:600px){#gameOverPanel .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#gameOverPanel .info{padding:10px 12px}}
/* Graph questions with the read-aloud button need a little more room on small phones. */
@media(orientation:portrait){body.simple-play #learningArea:has(#questionVisual:not([hidden])){max-height:36dvh}}