/* Keep the complete research branch and selected details on the current sheet. */
#researchDialog[open]{gap:8px;overflow:hidden}
#researchBranches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;min-width:0}
#researchBranches button{min-width:0;padding:6px 3px!important;line-height:1.1;font-size:13px;min-height:44px;overflow-wrap:normal}
#researchNodes{overflow:hidden;min-height:0;min-width:0}
#researchNodes .research-branch{height:100%;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch}
#researchNodes .research-branch[hidden]{display:none!important}
#researchNodes .research-node{min-height:0!important;min-width:0;overflow:hidden;grid-template-columns:64px minmax(0,1fr);padding:7px!important;row-gap:3px!important;column-gap:6px!important}
#researchNodes .research-art{max-width:100%;width:64px;height:64px}
#researchDetail{max-height:none;overflow:visible;min-width:0}
#researchDetailText,#researchDetailNeeds{overflow-wrap:anywhere}
@media(max-width:430px) and (orientation:portrait){#researchBranches{grid-template-columns:repeat(3,minmax(0,1fr))}#researchBranches button{font-size:13px}#researchNodes .research-node{grid-template-columns:42px minmax(0,1fr);padding:5px!important}#researchNodes .research-art{width:42px;height:48px}#researchNodes .research-node b{font-size:12px}#researchNodes .research-status{font-size:11px}#researchDetailText,#researchDetailNeeds{font-size:12px;line-height:1.25}#researchBegin{font-size:12px;max-width:105px}}
@media(orientation:landscape) and (max-height:600px){#researchDialog[open]{grid-template-columns:minmax(0,1fr) 235px;gap:5px}#researchNodes .research-node{grid-template-columns:42px minmax(0,1fr);padding:4px!important}#researchNodes .research-art{width:42px;height:42px}#researchDetailText,#researchDetailNeeds{font-size:12px;line-height:1.2}#researchDetailName{font-size:14px}#researchBranches button{font-size:12px}#researchDetail{gap:4px;padding:5px}#researchBegin{min-height:44px;padding:4px}}
@media(max-height:350px){#researchNodes .research-node{grid-template-columns:1fr}#researchNodes .research-art{display:none}#researchNodes .research-node b,#researchNodes .research-cost{grid-column:1}#researchDetailText,#researchDetailNeeds{font-size:11px}#researchDetailName{font-size:13px}#researchBranches button{font-size:11px}}
/* Cards page horizontally with explicit controls, preserving touch-sized choices. */
#game.dock-open #cards{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px;gap:5px;overflow:hidden;padding:5px;align-items:stretch}
#cardPage{display:grid;gap:6px;min-width:0;min-height:0}
#cardPage .card{min-width:0!important;max-width:none!important;width:100%;min-height:0!important;margin:0;box-sizing:border-box;overflow:hidden;padding:5px}
#cardPage .card .art{height:40px;width:60px;max-width:100%}
#cardPage .card b{font-size:12px;line-height:1.12;overflow-wrap:anywhere}
#cardPage .card .cost{font-size:11px}
#cards .card-page-arrow{min-width:0;min-height:44px;padding:3px;font-size:14px;margin:0}
#cards .card-page-arrow:disabled{opacity:.35}
#game.has-building:not(.dock-open):not(.tools-open){grid-template-rows:52px minmax(0,1fr) auto}
#buildingActions{height:auto;min-height:52px;overflow:visible;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));align-items:stretch}
#buildingActions button,#buildingActions #buildingBack{min-width:0;max-width:none;white-space:normal;min-height:44px}
@media(max-width:600px){#game.has-building:not(.dock-open):not(.tools-open){grid-template-rows:48px minmax(0,1fr) auto}}
@media(max-height:430px){#game.has-building:not(.dock-open):not(.tools-open){grid-template-rows:44px minmax(0,1fr) auto}#cardPage .card .art{height:30px}#cardPage .card b{font-size:11px}}
/* Other menus turn pages when their contents exceed the available screen. */
.page-concealed,.page-empty{display:none!important}
.paged-sheet{display:flex!important;flex-direction:column!important;overflow:hidden!important;min-height:0;min-width:0;gap:8px;scrollbar-gutter:auto!important}
.paged-sheet>.sheet-page-content{flex:1 1 0!important;min-height:0!important;min-width:0;max-width:100%;overflow:hidden;display:block}
.paged-sheet>.sheet-pagination{flex:0 0 44px!important;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;padding:0;background:none}
.paged-sheet>.sheet-pagination[hidden]{display:none!important}
.sheet-pagination button{min-height:44px;min-width:80px;margin:0;padding:5px 8px;font-size:12px}
.sheet-pagination span{font-size:12px;white-space:nowrap}
.sheet-page-content *{min-width:0;max-width:100%;box-sizing:border-box}
.sheet-page-content .options-grid{margin:0;gap:8px}
.sheet-page-content .options-actions{position:static!important;margin:8px 0 0}
.sheet-page-content p{line-height:1.35}
.sheet-page-content #campaignUnlocks,.sheet-page-content #commanderUnits,.sheet-page-content #achievementWall{overflow:visible!important;max-height:none!important}
#campaignDialog .atlas-sidebar.paged-sheet{gap:6px;padding-bottom:4px}
#campaignDialog .atlas-sidebar>.sheet-page-content{display:flex;flex-direction:column;gap:8px}
#campaignDialog .atlas-sidebar>.sheet-page-content>*{flex-shrink:0}
#campaignDialog .sheet-pagination button{min-width:70px}
.page-tight p,.page-tight li{font-size:12px!important;line-height:1.25!important}
.page-tight h3{font-size:16px!important;margin:5px 0!important}
.page-tight .commander-banner{min-height:64px;padding:8px}
.page-tight .options-grid{gap:4px}
/* Old per-dialog dimensions must not override the fitted screen shell. */
dialog.screen-panel[open]{width:min(1000px,calc(100dvw - 16px))!important;max-width:calc(100dvw - 16px)!important;height:min(800px,calc(100dvh - 16px))!important;max-height:calc(100dvh - 16px)!important;padding:8px!important;gap:6px!important;overflow:hidden!important}
dialog.screen-panel[open]>.screen-panel-head{flex:0 0 44px!important;min-height:44px!important;margin:0!important;padding:0!important}
dialog.screen-panel[open]>.screen-panel-head h2,dialog.screen-panel[open]>h2.screen-panel-head{font-size:24px!important;line-height:1.1!important}
dialog.screen-panel[open]>.screen-panel-body.paged-sheet{padding:0!important;margin:0!important;flex:1 1 0!important}
dialog.screen-panel[open]>.screen-panel-foot{padding-top:4px;margin:0;min-height:44px}
.sheet-page-content #achievementWall{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))!important}
.sheet-page-content #commanderUnits{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important}
.sheet-page-content .honor{min-height:0!important;padding:7px!important}
.sheet-page-content .honor p{margin:3px 0!important}
.sheet-page-content .profile-slots{margin:0!important}
.sheet-page-content .profile-slots button{margin:0!important}
@media(orientation:landscape) and (max-height:600px){#researchBranches{grid-column:1/3}#researchSummary{display:none}#campaignDialog .world-brief{gap:4px}#campaignDialog .world-brief strong{font-size:18px}#campaignDialog .strategic-orders{padding-top:6px;margin-top:6px}#campaignDialog .strategic-orders p{margin:4px 0}#campaignDialog .strategic-orders button{margin:4px 0}}
#researchNodes .research-branch{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:430px) and (max-height:700px){#researchNodes .research-node{grid-template-rows:minmax(0,1fr) auto 5px}#researchNodes .research-status{display:none}#researchNodes .research-art{grid-row:1;grid-column:1}#researchNodes .research-node b{grid-row:1;grid-column:2}#researchNodes .research-cost{grid-column:1/-1;grid-row:2}#researchNodes progress{grid-column:1/-1;grid-row:3;height:4px;margin:0}#researchNodes .complete b::after{content:' ✓'}}
/* The manual, pause screen and debrief use the same paged paper layout. */
#veil .modal{box-sizing:border-box;display:flex;flex-direction:column;gap:5px;width:min(800px,calc(100dvw - 16px));max-width:calc(100dvw - 16px);height:min(780px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);padding:12px;overflow:hidden}
#veil #modalEyebrow{flex:0 0 auto;margin:0;font-size:10px}
#veil #modalTitle{font-size:26px;line-height:1.1;margin:0;flex:0 0 auto}
#veil #modalText{flex:1 1 0;min-height:0;margin:0;padding:0;overflow:hidden}
#veil .modal>button{min-height:40px;height:40px;padding:4px;margin:0;font-size:13px;flex:0 0 auto}
#veil .modal #sound{position:absolute;right:20px;top:14px;width:44px}
#veil .modal{position:relative}
#veil .modal #modalTitle{padding-right:44px}
@media(orientation:landscape) and (max-height:600px){#veil .modal{display:grid;grid-template-columns:minmax(0,1fr) 155px;grid-template-rows:14px 32px repeat(4,minmax(0,1fr));padding:8px;gap:5px}#veil #modalEyebrow,#veil #modalTitle{grid-column:1/-1}#veil #modalTitle{font-size:23px}#veil #modalText{grid-column:1;grid-row:3/7;align-self:stretch}#veil .modal>button{grid-column:2;height:auto;min-height:40px}#veil .modal #sound{top:8px;right:8px}}