/* Upright tablets use the full card width and one reading order. The board is
   the scroll container; content, text and images keep their natural height. */
@media (orientation:portrait){
 body[data-view=game]:not(.dungeon-battle) #stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0}
 body[data-view=game]:not(.dungeon-battle) #stage>.play{min-width:0;min-height:0;overflow:hidden}
 body[data-view=game]:not(.dungeon-battle) #board{flex:1;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
 body[data-view=game]:not(.dungeon-battle) #qarea{display:grid;grid-template-columns:minmax(0,1fr);height:auto;max-height:none;min-width:0;overflow:visible}
 body[data-view=game] #qarea :is(.smart-question-grid,.fm-layout,.fm-lesson-wide){display:flex;flex-direction:column;gap:16px;height:auto;max-height:none;min-width:0}
 body[data-view=game] #qarea :is(.smart-question-stem,.smart-question-answers,.fm-question-pane,.fm-display-pane,.fd-deck-panel){position:relative;inset:auto;width:100%;min-width:0;min-height:0;height:auto;max-height:none;overflow:visible;box-sizing:border-box}
 body[data-view=game] #qarea .fm-lesson-wide>.fd-tabs{display:flex;flex-wrap:wrap}
 body[data-view=game] #qarea :is(.fm-acts,.fl-qbox>.fm-acts,.fm-qbox>.fm-acts){position:static;inset:auto;flex:none;flex-wrap:wrap;max-width:100%;box-sizing:border-box}
 body[data-view=game].focus-mode #qarea>.fm:is(.fm-qbox,.fl-qbox)>.fm-acts{position:static;inset:auto}
 body[data-view=game] #board .qhead{flex-wrap:wrap;min-width:0;align-items:flex-start}
 body[data-view=game] #board .qhead h2{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
 body[data-view=game] #qarea :is(.bk-wrap,.mt-wrap,.ms-wrap){min-width:0;max-width:100%}
 body[data-view=game] #qarea .zh-opt :is(svg,.hz){max-width:100%;height:auto;min-width:0}
 body[data-view=game] #qarea .md-observe{min-width:0;max-width:100%;box-sizing:border-box}
 body[data-view=game] #qarea .md-observe>svg{max-width:100%;height:auto}
 body[data-view=game] #qarea>.fm,
 body[data-view=game] #qarea>.fm.fm-ex,
 body[data-view=game] #qarea>.fm.fm-ex>.fm-ex-b{flex:none;min-height:auto;height:auto;max-height:none;overflow:visible}
 body[data-view=game] #qarea :is(.fm-question-pane,.fm-display-pane,.fd-deck-panel){flex:none}
 body[data-view=game] #qarea .mp-sort-task .mp-item :is(svg,.mp-ic){max-width:100%;height:auto}
 body[data-view=game] #qarea .mp-sort-task .mp-item .mp-3d.mini{width:64px;max-width:100%}
 body[data-view=game] #qarea .md-position .md-observe{display:flex;flex-direction:column}
 body[data-view=game] #qarea .md-position .md-picture{flex:1;min-height:0;width:100%}
 body[data-view=game] #qarea .md-position .md-picture svg{width:100%;height:100%;object-fit:contain}
 body[data-view=game] #qarea .md-position .md-observe>b{flex:none;font-size:12px;line-height:1.25;max-width:100%;overflow-wrap:anywhere}
 body[data-view=game] #qarea :is(.md-picture,.mp-vis,.mp-visc,.mp-3d){min-width:0;max-width:100%;box-sizing:border-box}
 body[data-view=game] #qarea .md-picture svg{max-width:100%;box-sizing:border-box}
 body[data-view=game] #qarea .md-cards>.md-observe:only-child{grid-column:1/-1}
 body[data-view=game] #qarea :is(.md-nested-figure,.md-piece-set){width:100%;min-width:0;max-width:100%;box-sizing:border-box}
 body[data-view=game] #qarea .md-piece{min-width:0;box-sizing:border-box}
 body[data-view=game] #qarea .md-compare .md-picture{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:190px auto;height:auto;justify-items:center;align-items:end}
 body[data-view=game] #qarea .md-compare .md-picture>span{font-size:14px;line-height:1.4;max-width:100%;overflow-wrap:anywhere}
 body[data-view=game] #qarea .fd-shift{grid-template-columns:repeat(6,minmax(78px,1fr));width:100%;min-width:468px}
 body[data-view=game] #qarea .fd-shift small{width:100%;height:4em;line-height:1.3;overflow-wrap:anywhere}
 body[data-view=game] #qarea .zh-bztext{line-height:2.6;padding-top:26px}
 body[data-view=game] #qarea .zh-bzc.fixed s{top:0}
 body[data-view=game] #stage:is(.with-sheet,.scratch-open) #board{overflow:auto}
}
@media (orientation:portrait) and (max-width:600px){
 body[data-view=game] #board .qhead{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px}
 body[data-view=game] #board #qno{grid-column:1;grid-row:1}
 body[data-view=game] #board #qtitle{grid-column:2;grid-row:1}
 body[data-view=game] #board .qhead>.tl-open{grid-column:2;justify-self:end}
}