/* Shared fixed-screen layout: only the learning frame fills the visible viewport.
   Content and controls occupy separate grid rows, including reverse wait controls. */
.fullscreen-shell:fullscreen,.fullscreen-shell.is-page-fullscreen{
 max-width:none;min-width:0;box-sizing:border-box;background:#fffaf0;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
.fullscreen-shell.is-page-fullscreen{
 /* Match the business lesson: let CSS follow the browser's usable viewport. */
 inset:0;width:100%;height:100vh;height:100dvh;
}
.fullscreen-shell:fullscreen>.transport,.fullscreen-shell.is-page-fullscreen>.transport,
.fullscreen-shell:fullscreen>.voice-controls,.fullscreen-shell.is-page-fullscreen>.voice-controls,
.fullscreen-shell:fullscreen>#userNotice,.fullscreen-shell.is-page-fullscreen>#userNotice{display:none!important}
.fullscreen-shell:fullscreen>.stage,.fullscreen-shell.is-page-fullscreen>.stage,
.fullscreen-shell:fullscreen>.stage[data-mode],.fullscreen-shell.is-page-fullscreen>.stage[data-mode],
.fullscreen-shell:fullscreen>.stage:has(#audioNotice:not([hidden])),.fullscreen-shell.is-page-fullscreen>.stage:has(#audioNotice:not([hidden])){
 flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;align-content:stretch;
 width:100%;height:100%;min-height:0;max-height:none;margin:0;border-radius:0;
 padding:82px 7% 12px;overflow:hidden;background-size:100% 100%;
}
.fullscreen-shell:fullscreen #stageContent,.fullscreen-shell.is-page-fullscreen #stageContent{
 grid-row:1;min-height:0;max-height:100%;overflow:auto;justify-content:safe center;
}
.fullscreen-shell:fullscreen #stageContent.reverse-layout,.fullscreen-shell.is-page-fullscreen #stageContent.reverse-layout{
 grid-template-rows:auto minmax(0,1fr);align-content:stretch;overflow:hidden;
}
.fullscreen-shell:fullscreen .reverse-slots,.fullscreen-shell.is-page-fullscreen .reverse-slots{
 grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-content:stretch;min-height:0;
}
.fullscreen-shell:fullscreen .reverse-ja-slot,.fullscreen-shell.is-page-fullscreen .reverse-ja-slot,
.fullscreen-shell:fullscreen .reverse-answer-slot,.fullscreen-shell.is-page-fullscreen .reverse-answer-slot{align-items:safe center}
.fullscreen-shell:fullscreen .frame-ratings,.fullscreen-shell.is-page-fullscreen .frame-ratings{
 grid-row:2;position:static;left:auto;right:auto;bottom:auto;display:block;width:100%;min-width:0;margin:0;
}
.fullscreen-shell:fullscreen .frame-rating-actions,.fullscreen-shell.is-page-fullscreen .frame-rating-actions{display:flex;gap:5px;justify-content:center}
.fullscreen-shell:fullscreen .frame-ratings button,.fullscreen-shell.is-page-fullscreen .frame-ratings button{min-height:44px;min-width:0}
@media(orientation:landscape) and (max-height:600px){
 .fullscreen-shell:fullscreen>.stage,.fullscreen-shell.is-page-fullscreen>.stage,
 .fullscreen-shell:fullscreen>.stage[data-mode],.fullscreen-shell.is-page-fullscreen>.stage[data-mode],
 .fullscreen-shell:fullscreen>.stage:has(#audioNotice:not([hidden])),.fullscreen-shell.is-page-fullscreen>.stage:has(#audioNotice:not([hidden])){padding:78px 5% 8px;gap:4px}
 .fullscreen-shell:fullscreen .frame-ratings,.fullscreen-shell.is-page-fullscreen .frame-ratings{display:grid;grid-template-columns:1fr 1.15fr;align-items:end;gap:4px 12px}
 .fullscreen-shell:fullscreen .stage[data-mode=normal] .frame-ratings,.fullscreen-shell.is-page-fullscreen .stage[data-mode=normal] .frame-ratings{display:block}
 .fullscreen-shell:fullscreen #stageContent .tag,.fullscreen-shell.is-page-fullscreen #stageContent .tag{font-size:10px!important;margin:0!important}
 .fullscreen-shell:fullscreen #stageContent h3.text-en,.fullscreen-shell.is-page-fullscreen #stageContent h3.text-en{font-size:clamp(18px,3.2vh,24px);line-height:1.3;margin:2px 0}
 .fullscreen-shell:fullscreen #stageContent h3.text-ja,.fullscreen-shell.is-page-fullscreen #stageContent h3.text-ja,
 .fullscreen-shell:fullscreen #stageContent p,.fullscreen-shell.is-page-fullscreen #stageContent p{font-size:18px;line-height:1.3;margin:2px 0}
 .fullscreen-shell:fullscreen #stageContent .reverse-response,.fullscreen-shell.is-page-fullscreen #stageContent .reverse-response{font-size:18px;line-height:1.3}
}

/* Shared readable-width layout: maximize the reading width and retain readable English in landscape.
   The frame itself remains stretched to the safe viewport, as in the business lesson. */
.fullscreen-shell:fullscreen>.stage,.fullscreen-shell.is-page-fullscreen>.stage,
.fullscreen-shell:fullscreen>.stage[data-mode],.fullscreen-shell.is-page-fullscreen>.stage[data-mode],
.fullscreen-shell:fullscreen>.stage:has(#audioNotice:not([hidden])),.fullscreen-shell.is-page-fullscreen>.stage:has(#audioNotice:not([hidden])){grid-template-columns:minmax(0,1fr);justify-content:stretch;padding-left:5%;padding-right:5%}
@media(orientation:landscape) and (max-height:600px){
 .fullscreen-shell:fullscreen>.stage,.fullscreen-shell.is-page-fullscreen>.stage,
 .fullscreen-shell:fullscreen>.stage[data-mode],.fullscreen-shell.is-page-fullscreen>.stage[data-mode],
 .fullscreen-shell:fullscreen>.stage:has(#audioNotice:not([hidden])),.fullscreen-shell.is-page-fullscreen>.stage:has(#audioNotice:not([hidden])){padding-left:4%;padding-right:4%}
 .fullscreen-shell:fullscreen #stageContent h3.text-en,.fullscreen-shell.is-page-fullscreen #stageContent h3.text-en{font-size:24px;line-height:1.35}
}

/* Stop document scroll chaining; permit vertical reading inside the text slots. */
.fullscreen-shell.is-page-fullscreen,.fullscreen-shell:fullscreen{overscroll-behavior:none}
.fullscreen-shell.is-page-fullscreen>.stage,.fullscreen-shell:fullscreen>.stage{overscroll-behavior:none}
.fullscreen-shell.is-page-fullscreen #stageContent,.fullscreen-shell:fullscreen #stageContent,
.fullscreen-shell.is-page-fullscreen .reverse-ja-slot,.fullscreen-shell:fullscreen .reverse-ja-slot,
.fullscreen-shell.is-page-fullscreen .reverse-answer-slot,.fullscreen-shell:fullscreen .reverse-answer-slot{overscroll-behavior:contain;overflow-anchor:none;-webkit-overflow-scrolling:touch}

/* Keep both languages inside the undecorated centre, without shrinking the frame. */
.fullscreen-shell:fullscreen>.stage,.fullscreen-shell.is-page-fullscreen>.stage,
.fullscreen-shell:fullscreen>.stage[data-mode],.fullscreen-shell.is-page-fullscreen>.stage[data-mode],
.fullscreen-shell:fullscreen>.stage:has(#audioNotice:not([hidden])),.fullscreen-shell.is-page-fullscreen>.stage:has(#audioNotice:not([hidden])){padding-left:14%;padding-right:14%}
@media(orientation:landscape){
 .fullscreen-shell:fullscreen>.stage,.fullscreen-shell.is-page-fullscreen>.stage,
 .fullscreen-shell:fullscreen>.stage[data-mode],.fullscreen-shell.is-page-fullscreen>.stage[data-mode],
 .fullscreen-shell:fullscreen>.stage:has(#audioNotice:not([hidden])),.fullscreen-shell.is-page-fullscreen>.stage:has(#audioNotice:not([hidden])){padding-left:9%;padding-right:9%}
}