/* Shared layout for browser, touch devices and future desktop shells.
   Game rules and turn advancement must never depend on the viewport. */
html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
body>header{padding-top:env(safe-area-inset-top,0px)}
dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain}
.commands-dialog.command-wide{max-width:100%;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.commands-dialog .agency-close{top:calc(8px + env(safe-area-inset-top,0px));right:10px;min-width:44px;min-height:44px}
button,a,summary,input,select{touch-action:manipulation}
.resources .resource{min-width:0}
.resources .resource>div{min-width:0}
.resources .resource b{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:600px){
 .resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .resources .resource{min-width:0;padding:10px 12px;gap:8px}
 .resources .resource b{font-size:15px}
 .resources .resource small{font-size:9px;letter-spacing:.6px}
 .resources .resource>span{flex:0 0 28px;text-align:center}
 input,select,textarea{font-size:16px}
 button,summary,[role="button"]:not(path){min-height:44px}
 .agency-close,.signup-close,#world-in,#world-out,#world-reset{min-width:44px;min-height:44px}
}
@media(max-height:500px){
 .resources{position:static}
 .command-wide .front-detail-map{height:55dvh;min-height:180px}
 dialog:not(.command-wide){margin:8px auto;max-height:calc(100dvh - 16px)}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .troop-motion{display:none}
}
@media(max-width:380px){
 body:not(.onboarding-active)>header{height:auto;min-height:68px;flex-wrap:wrap;gap:8px;padding:10px 12px}
 body:not(.onboarding-active)>header .top-controls{width:100%;min-width:0;display:flex;justify-content:flex-end;gap:6px}
 body:not(.onboarding-active)>header .top-controls>*{min-width:0;flex:1}
}