:root{color-scheme:light;--ink:#233d3d;--teal:#236d67;--line:#bdcec5;--paper:#fffef9;--pale:#eef4ed;--warm:#f6f2e8}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--warm);font-family:system-ui,"Yu Gothic",sans-serif;font-size:17px;line-height:1.7}main{max-width:1040px;margin:auto;padding:34px 24px 60px}h1,h2,h3,p{margin:0 0 14px}h1{font-size:clamp(30px,5vw,48px);line-height:1.3;letter-spacing:.02em}h1 span{display:block}h1 small{font-size:18px;font-weight:500}h2{font-size:25px;line-height:1.5}h3{font-size:21px}article{border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:26px}.intro{max-width:760px;padding:12px 0 26px}.eyebrow{font-size:14px;color:var(--teal);font-weight:700}.muted{font-size:14px;color:#586c67}.start-grid,.unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.featured{background:#e4efe4}.start-grid button{width:100%}.choose{margin:22px 0 30px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.filters button{grid-column:1/-1}label{display:block}button,select,summary{font:inherit}button,select{min-height:50px;padding:11px 17px;border:1px solid #94aaa0;border-radius:12px;background:#fffef9;color:var(--ink)}button{cursor:pointer;touch-action:manipulation}button:hover:enabled{background:#eef4ed}button.primary{background:var(--teal);border-color:var(--teal);color:white;font-weight:700}button.primary:hover:enabled{background:#18554f}button:disabled{opacity:.58;cursor:default}select{width:100%}:focus-visible{outline:3px solid #b65d16;outline-offset:4px}[hidden]{display:none!important}.check{display:flex;gap:12px;align-items:start;margin-top:16px;font-size:15px}.check input{width:22px;height:22px;flex-shrink:0;margin-top:3px}.totals{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}.stat{flex:1;min-width:130px;border-left:3px solid #78a799;padding:5px 14px}.stat strong{font-size:25px;display:block}.stat span{font-size:14px}.unit-grid article{padding:18px}.unit-grid h3{font-size:19px}.unit-grid p{font-size:14px;margin-bottom:5px}.unit-grid button{font-size:15px;margin-top:8px}.unit-mark{font-weight:700;color:var(--teal)}#last-result{margin-top:25px}.play-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:15px}.play-head strong{margin-left:auto}#mode-name{font-size:14px}progress{width:100%;height:9px;accent-color:var(--teal);margin-bottom:18px}.question-card{max-width:760px;margin:auto}#english{font-size:clamp(23px,4vw,30px);line-height:1.5;font-weight:650;overflow-wrap:anywhere}#target{font-size:19px;font-weight:600}.choices{display:grid;gap:10px;margin:20px 0}.choices button{width:100%;min-height:57px;text-align:left;font-size:20px;line-height:1.5;display:flex;gap:12px;align-items:center}.choice-key{font-size:13px;flex-shrink:0;width:23px;height:23px;text-align:center;border:1px solid var(--line);border-radius:50%}.choices button:disabled{opacity:1}.choices .correct{border:2px solid var(--teal);background:#e5f1e7}.choices .selected-wrong{border:2px dashed #a75b25;background:#fff0dd}#unknown{font-size:16px}#feedback{border-left:5px solid var(--teal);background:#e7f2e8;padding:19px;margin-top:22px;border-radius:10px}#feedback.wrong{background:#fff2de;border-color:#aa641f}#outcome{font-size:28px}#correct-answer{font-size:22px;font-weight:650}#translation{font-size:16px}#explanation{margin-bottom:0}details{border:1px solid var(--line);border-radius:10px;margin-top:14px;padding:14px}summary{cursor:pointer;min-height:28px;font-weight:600}details p{margin:14px 0 0;white-space:pre-line}.next-bar{position:sticky;bottom:0;max-width:760px;margin:14px auto 0;display:flex;gap:12px;align-items:center;padding:12px;background:#f6f2e8f5;border-top:1px solid var(--line);z-index:3}.next-bar #next{flex:1;min-width:100px}.next-bar #stop-auto{font-size:14px;max-width:230px}.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}#result-list details summary{font-size:17px}#save-status{padding:14px;background:var(--pale);border-radius:10px}#identity{padding:25px;border:1px solid var(--line);border-radius:16px;background:white}.system-status{margin-top:28px;font-size:14px}.system-status button{font-size:15px}footer{max-width:1040px;margin:auto;padding:20px 24px 40px;font-size:14px}footer a{margin-left:18px}a{color:var(--teal)}.answer-pop{animation:answer-pop .22s ease-out}@keyframes answer-pop{from{box-shadow:0 0 0 4px #95bdac}to{box-shadow:0 0 0 0 transparent}}@media(max-width:600px){main{padding:22px 14px 36px}.start-grid,.unit-grid{grid-template-columns:1fr}article{padding:19px}.filters{grid-template-columns:1fr}h2{font-size:22px}.choices button{font-size:19px;padding:13px 12px}.question-card{padding:18px 15px}.next-bar{gap:8px;padding:10px 0}.next-bar #stop-auto{max-width:150px;padding:9px;font-size:13px}.stat{min-width:105px}.play-head{gap:8px}.play-head button{font-size:15px}#result-title{font-size:26px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* Keep the English answer readable when Japanese feedback is added. */
.choices button{display:grid;grid-template-columns:23px minmax(0,1fr)}.choice-state{grid-column:2;font-size:15px;font-weight:600}.choices button>span:nth-child(2){min-width:0;overflow-wrap:anywhere}

/* Keep the next action within reach, including before the explanation is scrolled. */
@media(max-width:600px){
 #play[data-answered="true"]{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 #feedback,#details{scroll-margin-bottom:calc(128px + env(safe-area-inset-bottom,0px))}
 .next-bar{position:fixed;left:0;right:0;bottom:0;max-width:none;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--warm);box-shadow:0 -3px 12px #233d3d12}
}

#question-toggle{display:none}
#chosen-answer{font-size:16px;overflow-wrap:anywhere}
@media(max-width:600px){
 body[data-screen="play"] main{padding:8px 12px 12px}
 body[data-screen="play"] footer,body[data-screen="play"][data-store-status="ready"] .system-status{display:none}
 #play{overflow-anchor:none}
 .play-head{margin-bottom:6px;gap:6px}
 .play-head button{min-height:44px;padding:6px 10px}
 #play progress{display:block;margin:0 0 8px;height:6px}
 .question-card{padding:12px}
 #question-meta{font-size:12px;line-height:1.4;margin-bottom:6px}
 #prompt{font-size:20px;line-height:1.45;margin-bottom:8px}
 #english{font-size:23px;line-height:1.4;margin-bottom:8px}
 #target{font-size:17px;line-height:1.4;margin-bottom:8px}
 .choices{margin:10px 0;gap:7px}
 .choices button{min-height:48px;padding:8px 10px;font-size:18px;line-height:1.4;gap:8px}
 #unknown{min-height:44px;padding:7px 12px}
 #play[data-answered="true"]:not([data-show-question="true"]) #question-content{display:none}
 #question-toggle{display:block;width:100%;min-height:44px;padding:7px 10px;font-size:15px;margin-bottom:10px}
 #feedback{margin-top:10px;padding:12px;line-height:1.5}
 #feedback p{margin-bottom:8px}
 #feedback #explanation{margin-bottom:0}
 #outcome{font-size:24px;line-height:1.4;margin-bottom:8px}
 #correct-answer{font-size:21px}
 #details{margin-top:10px;padding:10px;font-size:16px;line-height:1.5}
 #details summary{min-height:32px}
 body[data-screen="result"] main{padding-top:12px}
 #result-title{font-size:23px}
 #result-counts{margin:12px 0;gap:8px}
 #result-counts .stat{min-width:85px;padding:4px 8px}
 .result-actions{margin:14px 0;gap:8px}
}

.filters{grid-template-columns:1fr;align-items:start}.filters .dm-choice-buttons .dm-choice-buttons__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}