/* Stable screens, large question selectors, and adjustable panes. */
.record-access{position:fixed;left:12px;bottom:70px;z-index:9996;max-width:calc(100vw - 24px);min-height:44px;border:3px solid var(--ink);border-radius:14px;background:#fff3ce;color:var(--ink);padding:10px 14px;box-shadow:0 4px 0 var(--ink);font:700 14px/1.4 var(--f-body);cursor:pointer}
body:has(#recordAccess) #recordStorage{bottom:134px}
.qprog{overflow:auto;scrollbar-width:thin;gap:5px;align-items:center;min-width:0;overscroll-behavior:contain}
.qprog button{position:relative;min-width:44px;height:44px;flex:none;border:3px solid var(--ink);border-radius:12px;background:#fff;font:800 20px var(--f-num);color:var(--ink);cursor:pointer}
.qprog button.done{background:#c5efc4}.qprog button.now{outline:3px solid #ed9b29;outline-offset:-6px;background:#fff1a5}.qprog button span{font-size:13px;margin-left:2px}.qprog button:focus-visible{outline:3px solid #2078b6;outline-offset:1px}
.answered-question{width:min(760px,100%);margin:auto;padding:clamp(12px,3vw,24px);background:#fffdf6;border:3px solid var(--ink);border-radius:22px;font:500 20px/1.6 var(--f-body);overflow-wrap:anywhere}
.answered-question img{display:block;max-width:100%;max-height:min(50dvh,480px);width:auto;object-fit:contain;object-position:center;margin:10px auto}.answered-badge{color:#2d7544;font-weight:900;margin:0 0 12px}.answered-text{white-space:pre-wrap;padding:14px;background:#edf8e5;border-radius:14px}.answered-question .btn{min-height:44px;margin:6px;font-size:16px}.answered-question h3{font-size:clamp(20px,3vw,28px)}
.answer-reading{margin:0;padding:10px;background:#edf8e5;border:2px solid #adca92;border-radius:12px;font:700 17px/1.6 var(--f-body);white-space:pre-wrap;overflow-wrap:anywhere}
.sp-connection{padding:10px;border-top:2px solid #d5b87e;background:#fff1d4;flex:none}.sp-connection p{margin:0 0 8px;font-size:14px}
body[data-view=game] #v-game{height:var(--learning-viewport-height,100dvh);bottom:auto}
#stage{transition:none;display:grid!important}
#stage .learning-divider{grid-area:split;display:grid;place-items:center;touch-action:none;user-select:none;cursor:col-resize;min-width:44px;min-height:44px;outline:none;z-index:31}
.learning-divider span{width:9px;height:64px;border:3px solid var(--ink);background:#ffe38a;border-radius:10px;box-shadow:2px 2px 0 var(--ink)}
.learning-divider:focus-visible span,.learning-divider:hover span{background:#7fe3f2}
#stage:is(.scratch-open,.with-sheet):not(.scratch-full){grid-template-columns:minmax(0,1fr) 44px var(--learning-panel-size,40%);grid-template-rows:minmax(0,1fr);grid-template-areas:'main split aside';gap:0;padding-right:var(--gutR);--coachW:0px}
#stage:is(.scratch-open,.with-sheet)>.coach{display:none!important}
#stage:is(.scratch-open,.with-sheet)>.play{grid-area:main;order:0;min-width:0;min-height:0;overflow:hidden}
#stage.scratch-open>.sp-panel{grid-area:aside;order:0}
#stage>#sheet{display:none}
#stage.with-sheet>#sheet{grid-area:aside;position:relative;display:flex;inset:auto;width:100%;height:100%;max-height:100%;margin:0;transform:none;opacity:0;transition:opacity .18s ease-out;box-shadow:3px 3px 0 var(--ink);min-width:0;min-height:0}
#stage.with-sheet>#sheet.in{opacity:1}
#stage.scratch-full{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);grid-template-areas:'aside'}
#stage.scratch-full .sp-panel{grid-area:aside}
#stage.resizing-panels #board,#stage.resizing-panels #sheet{animation:none;transition:none}
#stage:is(.with-sheet,.scratch-open) #board{min-height:0;max-height:100%;overflow:auto}
#stage[data-split-axis=y]:is(.scratch-open,.with-sheet):not(.scratch-full){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--learning-main-size,44%) 44px minmax(0,1fr);grid-template-areas:'main' 'split' 'aside';padding-bottom:max(12px,env(safe-area-inset-bottom))}
#stage[data-split-axis=y] .learning-divider{cursor:row-resize}.learning-divider[aria-orientation=horizontal] span{width:64px;height:9px}
@media(max-width:740px),(orientation:portrait){
 #stage>.coach{display:none!important}#stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .gbar{min-height:44px;gap:5px}.qprog{min-width:44px}.combo{display:none}.sp-entry{font-size:13px;padding:4px 6px}
 #stage:is(.scratch-open,.with-sheet) #qtitle{font-size:18px}#stage:is(.scratch-open,.with-sheet) #qtitle .src{display:none}
 #stage.with-sheet #sheet{padding:10px;border-width:3px;border-radius:18px;gap:8px}#stage.with-sheet #sheet .demo{min-height:110px;padding:8px}#stage.with-sheet #sheet .ptext{font-size:16px;line-height:1.55}#stage.with-sheet #sheet .badge{font-size:20px}#stage.with-sheet #sheet .btn{font-size:14px;padding:4px 10px;min-height:44px}.pbtns{gap:6px}
 .sp-toolbar{flex-wrap:nowrap;overflow-x:auto;min-height:60px}.sp-toolbar>div{flex:none;flex-wrap:nowrap}.sp-title small{display:none}.sp-title strong{font-size:18px}.sp-header{gap:5px}.sp-navigation{padding:2px 6px}.sp-settings>summary{font-size:13px}.sp-status{font-size:12px;min-height:26px}.answered-question img{max-height:130px}
}
@media(prefers-reduced-motion:reduce){#wipe.in,#wipe.out{animation-duration:.01s}.board.enter,.board.leave{animation:none}#sheet{transition:none}}

#sheet .sheet-content{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
#sheet .ph,#sheet .pbtns{flex:none}#sheet .demo{flex:none}#sheet .pbtns{padding-top:6px;border-top:2px solid #dacbad}
#sheet.saved .badge{background:#297d58}
.mz-writing:not(:has(.mz-write-picture)){grid-template-columns:minmax(0,1fr)}
@media(max-width:740px){#sheet .pbtns .btn{flex:1;font-size:13px;padding:4px 6px}#sheet .pbtns .primary{flex-basis:100%;order:-1}#sheet .pbtns{gap:5px}.sp-title strong{font-size:17px}.sp-status{font-size:11px;padding:4px 8px}}

.qprog button.miss{background:#ffd4bd}.answered-wrong{padding:12px;border-radius:12px;background:#fff0e6;color:#9b4329;font-size:17px}#sheet.saved-miss .badge{background:#8364bd}

/* One cover/uncover transition. Reversing a quick navigation keeps the current opacity. */
#wipe{clip-path:none;opacity:0;background:#fff3db;transition:opacity .18s ease-in-out}
#wipe.in{opacity:1;animation:none!important}#wipe.out{opacity:0;animation:none!important}
@media(prefers-reduced-motion:reduce){#wipe{transition:none}}

/* Compact spacing preserves legible text and 44px controls; long reading still scrolls. */
.explanation-guide{margin:0;padding:8px 10px;border-left:4px solid #65936d;background:#f0f6df;font-size:14px;line-height:1.5}
.tl-caption[role=button]{cursor:pointer;border-radius:10px}.tl-caption:focus-visible{outline:3px solid #3685a7;outline-offset:3px}
#board.fit-compact{padding:10px 14px}
#board.fit-compact .qhead{margin-bottom:6px;gap:8px}
#board.fit-compact .qhead h2{font-size:22px;line-height:1.25}
#board.fit-compact .qhead .src{font-size:12px}
#board.fit-compact #qarea{gap:4px}
#board.fit-compact .hw-launch{margin:0}
#board.fit-compact :is(.bk-opt,.mt-pickopt,.chip,.btn){min-height:44px}
@media(min-width:740px) and (orientation:landscape){
 body[data-view=game]:not(.dungeon-battle) #stage:not(.scratch-open):not(.with-sheet){--coachW:140px}
 #board.fit-compact :is(.bk-opts,.mt-pickopts){gap:6px}
 #board.fit-compact :is(.bk-pic,.mt-pic,.qt-picture){max-height:min(42dvh,360px)}
 #board.fit-compact :is(.bk-pic img,.mt-pic img,.qt-picture img){max-height:100%;object-fit:contain;object-position:center}
 #board.fit-compact :is(.mt-card,.bk-card){padding:10px}
 #board.fit-compact :is(.bk-text,.qt-context){font-size:20px;line-height:1.4}
}
@media(max-width:740px){#board.fit-compact .qhead h2{font-size:19px}.explanation-guide{font-size:12px;padding:5px 8px}}

#sceneMusic{font-size:13px;min-height:44px;min-width:44px}
@media(max-width:740px){#sceneMusic{font-size:12px;padding:4px 8px}}

#qarea .bk-speak{min-height:44px;min-width:44px}

/* CR-035: label for practice written for the app (not a publisher item) */
#qtitle .q-origin,.smart-question-title .q-origin{display:inline-block;margin:0 0 0 8px;padding:2px 9px;border-radius:999px;background:#e9f3ff;color:#245a8a;border:1px solid #9cc3e8;font:700 12px/1.6 var(--f-body,inherit);vertical-align:middle;white-space:nowrap}