/* A bounded game screen for phones with their browser bars still visible. */
:root{--screen-height:100vh}
@supports(height:100dvh){:root{--screen-height:100dvh}}
.fullscreen{font-size:22px;line-height:1;min-width:44px;padding:6px}
h1,h2{word-break:keep-all;overflow-wrap:anywhere}
.review-answer>.primary{width:100%}
.home-story,.home-entry,.feedback-body,.review-reading,.review-answer,.ending-reading,.ending-actions{min-width:0}
.stage-selection{display:none}

@media(orientation:landscape) and (max-height:600px){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
 body{font-size:14px}
 #app{height:var(--screen-height);overflow:hidden}
 .app-shell{height:100%;min-height:0;overflow:hidden;display:grid;grid-template-rows:44px minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .app-shell>*{min-width:0;min-height:0}
 .topbar{height:44px;padding:0 16px;gap:8px}
 .brand{font-size:15px;gap:9px;min-height:44px;padding:4px 0}
 .seal{width:25px;height:28px;font-size:17px}
 .top-actions{gap:5px}
 .small{min-height:40px;padding:5px 10px;font-size:12px}
 .sound,.fullscreen{min-width:44px}
 .fullscreen{font-size:22px}
 .primary,.secondary{min-height:44px;padding:8px 14px;font-size:14px}
 .link-button{min-height:40px;font-size:12px;padding:7px 0}
 .small-note{font-size:11px;line-height:1.5;margin-top:8px}
 .eyebrow{font-size:10px;letter-spacing:.1em}

 /* Title and controls share the available width instead of stacking below it. */
 .phase-home{grid-template-rows:44px minmax(0,1fr) 28px}
 .home-hero{min-height:0;height:100%;display:flex;flex-direction:row;overflow:hidden}
 .hero-art{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(90deg,#071b24f5,#071b24b0 45%,#071b2480),url('assets/palace.png') 70% 44%/cover}
 .home-copy{width:100%;height:100%;margin:0;padding:12px 5vw;display:grid;grid-template-columns:1.2fr 1fr;gap:5vw;align-items:center;align-self:stretch}
 .home-story,.home-entry{min-height:0}
 .home-copy h1{font-size:clamp(28px,10dvh,52px);line-height:1.18;margin:10px 0 12px;letter-spacing:-.055em}
 .home-copy .eyebrow{font-size:11px}
 .home-copy .lead{font-size:14px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
 .home-buttons{margin:0;display:flex;flex-wrap:nowrap;gap:8px}
 .home-copy .primary{min-width:0;flex:1;min-height:48px;font-size:16px}
 .home-buttons .secondary{flex:0 0 auto}
 .home-tools{margin-top:8px;gap:18px;flex-wrap:nowrap}
 .home-tools .link-button{font-size:13px}
 .home-copy .small-note{display:block;margin-top:5px;font-size:11px}
 .home-copy .small-note br{display:none}
 .update-note{margin-top:6px;padding:0;border:0;font-size:11px;line-height:1.4}
 .update-note>span{display:none}
 .update-note .link-button{min-height:36px;padding:5px 0;font-size:12px}
 .chapter-ribbon{padding:0 5vw;gap:24px;align-items:center;font-size:10px;justify-content:space-between;overflow:hidden}
 .chapter-ribbon b{font-size:14px;margin-right:7px}

 /* Each introduction keeps its action anchored below the readable story. */
 .intro-layout,.ending-layout{height:100%;min-height:0;display:grid;grid-template-columns:.7fr 1.3fr;overflow:hidden}
 .chapter-art,.ending-art{height:100%;min-height:0;background-position:68% center}
 .intro-copy{align-self:stretch;min-height:0;padding:12px 22px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:6px}
 .intro-copy h1{font-size:24px;line-height:1.35;margin:0}
 .intro-text{min-height:0;font-size:14px;line-height:1.75;overflow:auto;overscroll-behavior:contain}
 .mission-note{margin:0;padding:3px 10px;gap:2px}
 .mission-note span{font-size:11px}.mission-note strong{font-size:14px;line-height:1.6}
 .intro-copy>.small-note{display:none}
 .intro-copy>.primary{margin:0;width:100%}

 /* A compact status row and two panels fill the remaining viewport. */
 .phase-play,.phase-feedback{grid-template-rows:44px 34px minmax(0,1fr)}
 .mission{max-width:none;width:100%;height:34px;margin:0;padding:0 16px;gap:10px}
 .mission>div:first-child{display:flex;align-items:baseline;gap:12px;min-width:0}
 .mission h1{font-size:16px;line-height:1.4;margin:0;white-space:nowrap}
 .mission .eyebrow{font-size:10px;white-space:nowrap}
 .risk{flex-direction:row;gap:7px;align-items:center}.risk>span{font-size:10px}.risk>div{gap:4px}.risk i{width:7px;height:7px}
 .play-layout{display:grid;width:100%;max-width:none;height:100%;margin:0;padding:0 14px 10px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;align-items:stretch;overflow:hidden}
 .stage{height:100%;min-height:0;position:static;display:flex;flex-direction:column;border-radius:6px}
 .scene-art{flex:0 1 clamp(30px,15dvh,90px);min-height:24px;height:auto;background-position:70% 43%}
 .art-tag{left:10px;bottom:7px;font-size:10px;padding:2px 6px}
 .scene-progress{flex:none;padding:6px 10px;gap:8px;line-height:1.4}
 .scene-progress>span{gap:4px;font-size:10px}.scene-progress em{font-size:10px}
 .dialogue{flex:1;min-height:0;overflow:auto;padding:8px 12px 2px;overscroll-behavior:contain}
 .speaker{font-size:11px;gap:8px}.speaker small{font-size:10px}
 .dialogue>p{font-size:16px;line-height:1.65;margin-top:5px}
 .stage-tools{flex:none;padding:0 12px;gap:20px}
 .stage-tools .link-button{min-height:38px;font-size:11px}
 .decision{height:100%;min-height:0;margin:0;display:flex;flex-direction:column;overflow:hidden}
 .decision-heading{flex:none;margin:0 0 6px;gap:0;min-height:17px;line-height:1.5}
 .decision-heading .eyebrow{font-size:10px}.decision-heading>p,.decision>.small-note{display:none}
 .choices{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
 .speech-choice{min-height:0;padding:8px 11px;gap:9px;align-items:center;border-radius:6px;overflow:auto;overscroll-behavior:contain}
 .choice-number{font-size:19px;width:18px}.arrow{font-size:16px}
 .speech-choice strong{font-size:14px;line-height:1.45;margin-bottom:3px}
 .quote{font-size:13px;line-height:1.5}

 /* The source list scrolls; the selected statement and submit stay in place. */
 .play-layout:has(.evidence-list) .stage-tools{display:flex}
 .play-layout:has(.evidence-list) .scene-art,.play-layout:has(.evidence-list) .scene-progress{display:none}
 .play-layout:has(.evidence-list) .dialogue{flex:1;padding-bottom:5px}
 .stage-selection{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 12px;padding:7px 0;border-top:1px solid var(--line)}
 .stage-selection>span{font-size:10px;color:var(--gold)}.stage-selection p{font:14px/1.65 var(--serif);margin-top:4px}
 .decision:has(.evidence-list) .decision-heading{flex-direction:row;justify-content:space-between;align-items:center;margin:0 0 4px}
 .decision-heading .link-button{min-height:34px;padding:3px 0;font-size:12px}
 .selected-speech{display:none}
 .selected-speech>span{display:none}.selected-speech p{font-size:14px;line-height:1.5;margin:0}
 .decision>.prompt{display:none}
 .evidence-list{flex:1;min-height:0;overflow:auto;grid-auto-rows:max-content;gap:8px;padding:3px 5px 5px;scrollbar-gutter:stable;overscroll-behavior:contain;align-content:start}
 .evidence-choice,.source-summary{padding:10px 12px;gap:5px}
 .source-card{flex:none}.source-card strong{font-size:13px}.source-label{font-size:12px}
 .modern{font-size:15px;line-height:1.75}.select-mark{font-size:11px}
 .original summary{font-size:11px;padding:9px 12px;min-height:40px}
 .submit-bar{position:static;flex:none;padding:6px 0 0;margin:4px 0 0;gap:0;border-top:1px solid var(--line)}
 .submit-bar .primary{min-height:44px;width:100%;padding:6px 12px}.submit-bar>span{display:none}

 /* Long feedback never pushes the next button below the screen. */
 .feedback-layout{display:grid;height:100%;width:100%;max-width:none;min-height:0;grid-template-columns:.65fr 1.35fr;gap:20px;margin:0;padding:0 16px 10px;overflow:hidden}
 .feedback-art{min-height:0;height:100%;background-position:68% center}
 .feedback-copy{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
 .feedback-body{flex:1;min-height:0;overflow:auto;padding-right:8px;overscroll-behavior:contain}
 .reply{font-size:21px;line-height:1.65;margin:7px 0 12px}
 .my-previous{font-size:12px;margin-bottom:8px}.reading-note{padding:10px 12px;margin:10px 0}.reading-note p{font-size:14px;line-height:1.8}
 .feedback-footer{flex:none;margin:6px 0 0}.feedback-footer>.primary{width:100%;min-height:44px}
 .center-sheet{max-width:760px;width:calc(100% - 32px);height:calc(100% - 16px);min-height:0;margin:8px auto;padding:16px 22px;overflow:auto;overscroll-behavior:contain}
 .center-sheet .large-seal{display:none}.center-sheet h1{font-size:24px;margin:6px 0 10px}
 .center-sheet .button-row{position:sticky;bottom:-16px;padding:8px 0;background:#0d2730;margin:8px 0 0}

 /* Reading and answering stay side by side, including after feedback. */
 .review-sheet{max-width:none;width:100%;height:100%;min-height:0;margin:0;padding:10px 16px;display:grid;grid-template-columns:1fr 1fr;gap:20px;border:0;border-radius:0;overflow:hidden}
 .review-reading{min-height:0;overflow:auto;padding-right:6px;overscroll-behavior:contain}
 .review-heading{margin-bottom:10px}.review-heading h1{font-size:20px;line-height:1.5;margin:4px 0 8px}.review-heading>p{font-size:14px;line-height:1.8}
 .review-answer{min-height:0;display:flex;flex-direction:column;gap:6px}
 .review-response{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:2px}
 .review-choices{margin:0;gap:7px}.answer-choice{min-height:44px;padding:9px 11px;font-size:14px;line-height:1.7}
 .review-answer>.primary{flex:none}.review-answer>.small-note{flex:none;margin:0;font-size:10px}

 .ending-copy{align-self:stretch;min-height:0;padding:12px 22px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
 .ending-reading{min-height:0;flex:1;overflow:auto;padding-right:6px;overscroll-behavior:contain}
 .ending-copy h1{font-size:26px;line-height:1.45;margin:8px 0 12px}
 .journey-summary{margin:14px 0}.journey-summary>div{padding:6px 0}.scope-note{font-size:11px;margin:12px 0 0;padding:10px}
 .ending-actions{flex:none}.ending-actions .button-row{margin:0;flex-wrap:nowrap;gap:8px}.ending-actions .button-row>*{flex:1;width:auto;padding:8px;font-size:12px}
 .ending-actions .home-tools{margin:0;justify-content:space-between}.ending-actions .link-button{font-size:12px;min-height:36px}

 /* Dialog headers stay visible while their own contents scroll. */
 .dialog{max-height:calc(var(--screen-height) - 16px);width:min(760px,calc(100% - 32px));margin:auto;padding:0;overflow:hidden}
 .dialog[open]{display:flex;flex-direction:column}
 .modal-header{position:static;flex:none;padding:0 16px;min-height:44px}.modal-header h2{font-size:18px}
 .modal-body{min-height:0;overflow:auto;padding:14px 18px;overscroll-behavior:contain}
 .modal-foot{margin-top:15px}.setting-row{padding:9px 0}.setting-row h3{font-size:16px}.practice-list{margin:12px 0 0;gap:8px}
 .toast{bottom:8px;padding:7px 14px;font-size:12px;pointer-events:none}
}

@media(orientation:landscape) and (max-height:360px){
 .home-copy{padding:8px 5vw;gap:4vw;grid-template-columns:1.15fr 1fr}
 .home-copy h1{font-size:clamp(27px,10dvh,36px);margin:6px 0 8px}
 .home-copy .lead{font-size:13px;line-height:1.55}
 .home-copy .eyebrow{font-size:10px}.home-copy .small-note{display:none}
 .home-copy .primary{font-size:15px;min-height:44px}.home-buttons .secondary{font-size:12px;padding:8px 10px}
 .home-tools{gap:16px;margin-top:6px}.home-tools .link-button{font-size:12px}
 .chapter-ribbon{font-size:10px;gap:12px}
 .mission h1{font-size:14px}.mission>div:first-child{gap:9px}
 .scene-art{flex-basis:28px;min-height:24px}.scene-art .art-tag{display:none}
 .scene-progress{padding:5px 8px;gap:6px}.scene-progress em{font-size:9px}
 .dialogue{padding:6px 10px 0}.dialogue>p{font-size:15px;line-height:1.55}
 .stage-tools{padding:0 10px;gap:15px}.stage-tools .link-button{min-height:34px;font-size:10px}
 .speech-choice{padding:6px 9px;gap:7px}.speech-choice strong{display:none}.quote{font-size:14px;line-height:1.45}
 .intro-copy{padding:8px 16px;gap:4px}.intro-copy h1{font-size:21px}.intro-text{font-size:13px;line-height:1.65}.mission-note strong{font-size:13px}.mission-note span{font-size:10px}
}

@media(orientation:landscape) and (max-height:600px){.stage-tools{gap:12px;justify-content:space-between}.stage-tools .link-button{font-size:10px;white-space:nowrap}}
/* Dialogue confirmation and paired close reading, 2.1 */
.speech-preview{padding:24px;border:1px solid var(--line);border-radius:8px;background:#102b34;margin:12px 0}
.speech-preview>span{font-size:12px;color:var(--gold)}
.speech-preview>p:not(.small-note){font:24px/1.8 var(--serif);margin:12px 0;word-break:keep-all;overflow-wrap:anywhere}
.confirm-actions,.intro-actions{display:flex;gap:10px;flex-wrap:wrap}.confirm-actions>*{flex:1}.intro-actions{margin-top:18px}.intro-actions>*{flex:1;font-size:14px;padding:12px}
.compare-sources{display:grid;gap:16px}.compare-label{display:block;font-size:12px;color:var(--gold);margin:8px 0}
.thought-block{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.thought-block h3{color:var(--gold);margin-bottom:8px}.thought-block>p{line-height:1.8}.thought-block summary{cursor:pointer;min-height:44px;padding:12px 0}.thought-block .source-card{margin:12px 0}
@media(max-width:700px){.speech-preview{padding:18px}.speech-preview>p:not(.small-note){font-size:20px}.intro-actions{flex-direction:column}.intro-actions>*{width:100%}}
@media(orientation:landscape) and (max-height:600px){
 .confirming .stage-selection{display:none}.confirming .speech-preview{flex:1;min-height:0;overflow:auto;margin:0 0 8px;padding:12px}.speech-preview>p:not(.small-note){font-size:18px;line-height:1.65;margin:6px 0}.confirm-actions{flex:none;flex-wrap:nowrap}.confirm-actions>*{padding:7px;font-size:13px;min-height:44px}.intro-actions{flex-direction:row;flex-wrap:nowrap;margin:0;gap:6px}.intro-actions>*{padding:7px 9px;font-size:12px;min-height:44px;width:auto}.compare-sources{gap:8px}.compare-label{font-size:10px;margin:4px 0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(orientation:landscape) and (max-height:600px){.ending-actions .link-button,.stage-tools .link-button{min-height:44px}.small{min-height:44px}}
/* Keep the evidence beside the judgment on larger classroom screens. */
@media(min-width:1000px) and (min-height:601px){
 .review-sheet{max-width:1160px;display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:start}
 .review-answer{position:sticky;top:24px;align-self:start;min-width:0}
 .review-choices{margin-top:0}.review-answer>.primary{margin-top:18px}
 .review-heading h1{font-size:27px}.review-heading>p{font-size:17px}
}