/* Narrow and embedded viewports keep controls readable and content inside its own scroller. */
:root body .sz-drawer :is(.modal-body,.settings-section,.standard-rules,#rg-text){min-width:0;overflow-wrap:break-word}
:root body .sz-drawer :is(input,select){max-width:100%;box-sizing:border-box}
:root body .sz-drawer .standard-rules table{width:100%;table-layout:fixed;font-size:12px}
:root body .sz-drawer .standard-rules :is(th,td){overflow-wrap:anywhere;padding:8px 6px}
:root body .player-name-dialog{overflow:auto;overscroll-behavior:contain}
@media(max-width:360px){
 :root body #rule-page .rg-toolbar{gap:4px;padding-inline:8px}
 :root body #rule-page #rg-switch{flex:none}
 :root body #rule-page #rg-switch button{min-width:40px;padding-inline:5px}
 :root body #rule-page #rg-progress{min-width:0;gap:0;flex:1}
 :root body #rule-page #rg-progress button{min-width:0;padding-inline:3px;font-size:12px}
 :root body #ranks-modal #hr-panel :is(th,td){font-size:12px}
}
@media(max-height:480px){
 :root body .player-name-dialog .modal-head{padding:12px 16px 8px}
 :root body .player-name-body{padding:0 16px 16px;gap:6px}
}
/* Very small landscape phones need narrower hands and a single combat row. */
@media(min-width:480px) and (max-width:639px) and (max-height:480px){
 :root body .app-main{--handw:36px;--handh:50px;--handstep:16px;--handrank:18px;--woundw:22px;--woundh:30px;--woundrank:13px}
 :root body .table{grid-template-columns:minmax(0,1fr) minmax(194px,1.35fr) minmax(0,1fr);column-gap:4px}
 :root body .table .battle{--combatw:21px;--combath:32px;--combatrank:15px;padding-inline:3px}
 :root body .table .combat-sides{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);gap:2px}
 :root body .table .pile-indicator{grid-column:2;grid-row:1;width:60px;gap:4px}
 :root body .table .pile{width:28px;gap:4px}
 :root body .table .pile-label{font-size:9px}
 :root body .table .combat-title{font-size:10px;line-height:14px}
 :root body .table .combat-title b{white-space:normal;font-size:9px;line-height:12px}
 :root body .table .combat-cards .card{padding-inline:1px}
 :root body .table .combat-cards:has(.card:nth-child(4)){gap:0}
 :root body .table .combat-cards:has(.card:nth-child(4)) .card+.card{margin-left:-4px}
 :root body .table .combat-cards:has(.card:nth-child(5)) .card+.card{margin-left:-6px}
 :root body .table #action-panel{column-gap:4px;padding-inline:4px}
 :root body .table #action-panel #action-buttons button{min-width:44px;font-size:11px}
 :root body .table #action-panel :is(#action-title,#selection-preview,#formula){font-size:11px;line-height:14px}
 :root body.table-stage-layout .opponent-heading{align-items:start;flex-direction:column;gap:0}
}
/* Mid-height laptops/tablets need room for two wound racks as well as the hands. */
@media(min-width:1100px) and (min-height:801px) and (max-height:899px){
 :root body.table-stage-layout .app-main:not(.is-replay){--handw:80px;--handh:112px;--handstep:44px;--handrank:32px;--woundw:32px;--woundh:44px;--woundrank:14px}
}
:root body #rule-page.sz-drawer>.modal-head{flex:0 0 var(--drawer-head);height:var(--drawer-head);min-height:var(--drawer-head);max-height:var(--drawer-head)}
@media(max-height:500px) and (min-width:480px) and (max-width:1000px){:root body #rule-page.sz-drawer>.modal-head{padding-block:1px}}