/* Warfront v4.56 | Universal portrait + desktop layout.
 * Last stylesheet. Changes presentation only, never account, combat or earned XP.
 * Breakpoints respond to available width, not device user agents. */
html{width:100%;min-width:0;overflow-x:clip}
html body{width:100%;min-width:0;max-width:100%;overflow-x:clip}
body :is(#uiHome,#wf391-home,#wf394,#wf157Overlay,#wf440-campaign,#builder,#wf409-account,#wf443-pve-choice,#gc95){box-sizing:border-box}
body :is(#wf394,#wf157Overlay,#wf440-campaign,#wf409-account,#wf443-pve-choice,#wf348Gateway) :is(button,input,select,textarea){touch-action:manipulation}
body :is(#wf394,#wf157Overlay,#wf440-campaign,#wf409-account,#wf443-pve-choice,#wf348Gateway) :is(input,select,textarea){max-width:100%;min-width:0}
body :is(#wf394,#wf157Overlay,#wf440-campaign,#wf409-account,#wf443-pve-choice,#wf348Gateway) :is(h1,h2,h3,p,strong,small){overflow-wrap:break-word}
/* Legacy orientation dialogs are removed in the build. Protect cached JS fallbacks. */
#wf391-rotate-gate,#wf385-turn,#gc95canvaswrap>#wf385-turn{display:none!important;visibility:hidden!important;pointer-events:none!important}
#wf391-home{width:100%!important;min-height:100svh!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important}
#uiHome.wf391-ready{height:auto!important;min-height:100svh!important;overflow-y:auto!important}
#uiHome.wf391-ready #wf391-home .wf391-actions{
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 grid-template-rows:auto!important;
 grid-auto-flow:row!important;
 width:min(1040px,96%)!important;
}
#uiHome.wf391-ready #wf391-home .wf391-action{min-width:0!important}
#uiHome.wf391-ready #wf391-home .wf391-foot{max-width:100%!important}
#uiHome.wf391-ready #wf391-home .wf391-foot .wf391-version{white-space:normal!important}
#builder,#wf394,#wf157Overlay,#wf440-campaign,#wf409-account,#wf443-pve-choice{min-width:0}
#builder .layout{grid-template-columns:minmax(0,1fr) minmax(250px,330px)!important}
#builder .layout>*{min-width:0}
/* Fixed overlays must scroll internally instead of clipping their bottom actions. */
#wf348Gateway:not([hidden]){max-width:100vw;max-height:100dvh;overflow-y:auto!important;overscroll-behavior:contain}
#wf348Gateway #wf348Panel{box-sizing:border-box;max-width:calc(100vw - 18px);max-height:calc(100dvh - 18px);overflow-y:auto}
#wf443-pve-choice{box-sizing:border-box;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
#wf443-pve-panel{box-sizing:border-box;width:min(800px,100%)!important;max-width:100%!important;max-height:calc(100dvh - 18px)!important;overflow-y:auto!important}
#wf394{box-sizing:border-box;max-width:100vw!important;max-height:100dvh!important;overflow-x:hidden}
#wf394 .wf-shell{box-sizing:border-box;max-width:100%!important;min-width:0!important}
#wf394 .wf-main,#wf394 .wf-pane{min-width:0!important}
#wf394 .wf-bottom{flex-wrap:wrap!important}
#wf157Overlay{box-sizing:border-box;max-width:100vw!important;overflow-y:auto!important;overflow-x:hidden!important}
#wf157Overlay :is(.wf157-herohead,.wf157-tier,.wf157-tree-tabs,.wf157-nodes){max-width:100%!important;min-width:0!important}
#wf157Overlay .wf157-herohead>*{min-width:0}
#wf440-campaign.wf441{box-sizing:border-box;max-width:100vw!important;max-height:100dvh!important;overflow-x:hidden!important}
#wf440-campaign.wf441 #wf441-main{min-width:0!important;max-width:100%!important}
#wf440-campaign.wf441 :is(.wf441-missionActions,.wf448-comicNav,.wf448-posterNav){flex-wrap:wrap!important}
#wf440-campaign.wf441 :is(.wf448-comic,.wf448-posterIntro){min-width:0!important;max-width:100%!important}
#wf440-campaign.wf441 :is(.wf448-comicArt,.wf448-posterStage) img{max-width:100%!important;object-fit:contain!important}
#wf409-account{box-sizing:border-box!important;max-width:100vw!important;max-height:100dvh!important}
#wf409-account .wf409-dialog{max-width:100%!important;min-width:0!important}
#wf409-account :is(.wf409-side,.wf409-pane,.wf409-pane-group){min-width:0!important}
.wf363-feedback-panel{max-width:calc(100vw - 14px)!important}
#wf420-admin-players,#wf420-admin-players *{max-width:100%}
/* Victory/Defeat on both screen types, with actions always reachable. */
#gc95end:has(#wf342-result:not([hidden])){box-sizing:border-box;max-width:100vw!important;max-height:100dvh!important;overflow:hidden!important}
#wf342-result.wf420-result.wf455-themed{
 box-sizing:border-box!important;width:min(1280px,calc(100vw - 12px))!important;
 max-width:100%!important;max-height:calc(100dvh - 12px)!important;
 overflow:hidden!important;
}
#wf342-result.wf420-result.wf455-themed>.wf361-root{min-width:0!important;overflow-x:hidden!important;overflow-y:auto!important}
#wf342-result.wf420-result.wf455-themed>.wf361-bottom{flex:0 0 auto!important;min-width:0!important;z-index:6!important}
/* Desktop: preserve generous two-column game/formation screens. */
@media(min-width:1000px) and (min-height:700px){
 #uiHome.wf391-ready #wf391-home .wf391-actions{width:min(1120px,90%)!important}
 #uiHome.wf391-ready #wf391-home .wf391-action{min-height:120px!important}
 #wf391-home{justify-content:center!important;gap:clamp(13px,3vh,36px)!important}
 #wf342-result.wf420-result.wf455-themed>.wf361-root{
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;
 }
}
/* Intermediate windows: two-column menu, one-column side panels. */
@media(max-width:980px){
 #uiHome.wf391-ready #wf391-home .wf391-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #builder .layout{grid-template-columns:minmax(0,1fr)!important}
 #builder .layout>.aside{width:100%!important;max-width:none!important}
 #builder #factionTabs{max-width:100%!important;overflow-x:auto!important}
 #wf394 .wf-hubgrid,#wf394 .wf-grid,#wf394 .wf-cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #wf157Overlay .wf157-tree-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #wf409-account .wf409-main{grid-template-columns:160px minmax(0,1fr)!important}
}
/* Portrait phones and narrow desktop windows. This is the primary mobile layout. */
@media(max-width:650px){
 html,body{min-width:0!important}
 #uiHome.wf391-ready #wf391-home{
  width:100%!important;min-height:100svh!important;height:auto!important;max-height:none!important;
  justify-content:flex-start!important;gap:12px!important;
  padding:max(11px,env(safe-area-inset-top)) 10px max(14px,env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;overflow-x:hidden!important;
 }
 #wf391-home .wf391-brand{padding:5px 0!important}
 #wf391-home h1{font-size:clamp(28px,9vw,44px)!important;letter-spacing:.06em!important}
 #wf391-home .wf391-subtitle{font-size:10px!important;letter-spacing:.24em!important}
 #uiHome.wf391-ready #wf391-home .wf391-actions{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;gap:8px!important;flex:0 0 auto!important;
 }
 #uiHome.wf391-ready #wf391-home .wf391-action{
  display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;align-content:center!important;align-items:center!important;
  justify-content:start!important;gap:1px 12px!important;width:100%!important;
  min-height:66px!important;height:auto!important;max-height:none!important;
  padding:8px 12px!important;text-align:left!important;
 }
 #wf391-home .wf391-action .wf391-icon{grid-column:1;grid-row:1/span 2;font-size:29px!important;justify-self:center}
 #wf391-home .wf391-action strong{grid-column:2;grid-row:1;font-size:18px!important;text-align:left!important}
 #wf391-home .wf391-action small{grid-column:2;grid-row:2;font-size:12px!important;text-align:left!important}
 #wf391-home .wf391-foot{width:100%!important;gap:7px!important;justify-content:center!important}
 #wf391-home .wf391-foot .wf391-player{flex:1 0 100%;text-align:center;margin:0}
 #wf391-home .wf391-foot button{min-height:39px!important;padding:7px 8px!important;font-size:11px!important}
 #wf391-home .wf391-foot .wf391-version{flex:1 0 100%!important;text-align:center!important;line-height:1.3!important}
 #wf391-home .wf391-message{min-height:0!important}
 #wf348Gateway{padding:7px!important}
 #wf348Gateway #wf348Panel{margin:0 auto!important;max-height:calc(100dvh - 14px)!important}
 #uiBuildNav{width:100%!important;padding:9px!important;gap:7px!important}
 #uiBuildNav .wf359-header-info{margin:0!important;flex-wrap:wrap!important;max-width:100%!important}
 #uiBuildNav .wf359-faction,#uiBuildNav .wf359-budget{white-space:normal!important}
 #builder{width:calc(100vw - 16px)!important;margin:8px auto 25px!important;padding:0!important}
 #builder .layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
 #builder :is(.window,.inside,.wf359-saved-panel){min-width:0!important;max-width:100%!important}
 #builder .window :is(input,select,button){max-width:100%}
 #wf394{width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;padding:4px!important}
 #wf394 .wf-shell,#wf394[data-page="army"] .wf-shell{height:auto!important;min-height:min(100%,100dvh)!important;max-height:none!important;overflow:visible!important;padding:8px!important}
 #wf394 .wf-head{flex-wrap:wrap!important}
 #wf394 .wf-main,#wf394[data-page="army"] .wf-main{min-height:0!important;overflow:visible!important;max-height:none!important}
 #wf394 .wf-pane,#wf394[data-page="army"] .wf-pane{min-height:0!important;max-height:none!important;overflow:visible!important}
 #wf394 .wf-unitgrid,#wf394[data-page="army"] .wf-unitgrid{grid-template-columns:minmax(0,1fr)!important}
 #wf394 .wf-scroll,#wf394[data-page="army"] .wf-scroll{flex:0 1 auto!important;max-height:none!important;min-height:160px!important;overflow:visible!important}
 #wf394 .wf-unit{min-height:78px!important}
 #wf394 .wf-goldline{flex-wrap:wrap!important}
 #wf394 .wf-bottom,#wf394[data-page="army"] .wf-bottom{position:sticky!important;bottom:0!important;z-index:8!important;
  padding:8px 5px max(8px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(#20142ceb,#1a1028)!important}
 #wf394 .wf-bottom :is(button,input,select){min-height:40px!important;flex:1 1 auto!important}
 #wf394 .wf416-formations{flex-wrap:wrap!important;justify-content:center!important}
 #wf157Overlay{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;padding:6px!important;overflow-y:auto!important;overflow-x:hidden!important}
 #wf157Overlay .wf157-herohead{display:flex!important;flex-wrap:wrap!important;padding:12px!important;gap:9px!important}
 #wf157Overlay .wf157-herohead>img{width:70px!important;height:80px!important}
 #wf157Overlay .wf157-tree-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
 #wf157Overlay .wf157-tree-tabs button{min-height:69px!important;padding:12px 4px 7px!important;font-size:11px!important}
 #wf157Overlay .wf157-tree-tabs button:before{width:23px;height:23px;left:calc(50% - 12px);font-size:17px}
 #wf157Overlay .wf157-nodes{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
 #wf157Overlay .wf157-node{min-height:110px!important;padding:9px!important}
 #wf157Overlay .wf157-tier{padding:9px!important}
 #wf443-pve-choice{padding:7px!important}
 #wf443-pve-panel{max-height:calc(100dvh - 14px)!important;padding:13px!important}
 #wf443-pve-grid{grid-template-columns:minmax(0,1fr)!important}
 #wf443-pve-panel .wf443-mode{min-height:76px!important;padding:8px!important}
 #wf440-campaign.wf441{
  height:100dvh!important;max-height:100dvh!important;width:100vw!important;
  padding:5px!important;overflow-y:auto!important;overflow-x:hidden!important;
 }
 #wf440-campaign.wf441 #wf441-main{max-width:100%!important;overflow-x:hidden!important}
 #wf440-campaign.wf441 .wf450-factions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #wf440-campaign.wf441 .wf448-comic,
 #wf440-campaign.wf441 .wf448-posterIntro{height:auto!important;min-height:0!important}
 #wf440-campaign.wf441 .wf448-comicArt,
 #wf440-campaign.wf441 .wf448-posterStage{min-height:0!important;max-height:58dvh!important}
 #wf440-campaign.wf441 .wf448-comicArt img,
 #wf440-campaign.wf441 .wf448-posterStage img{max-height:58dvh!important}
 #wf440-campaign.wf441 :is(.wf448-comicNav,.wf448-posterNav){flex-wrap:wrap!important;gap:6px!important}
 #wf440-campaign.wf441 :is(.wf448-comicNav,.wf448-posterNav) button{min-height:42px!important;flex:1 1 auto}
 #wf409-account{padding:4px!important;overflow:hidden!important}
 #wf409-account .wf409-dialog{max-height:calc(100dvh - 8px)!important;height:auto!important}
 #wf409-account .wf409-main{display:flex!important;flex-direction:column!important;overflow-y:auto!important}
 #wf409-account .wf409-side{flex:0 0 auto!important;display:block!important;padding:6px!important;border:0!important}
 #wf409-account .wf409-emblem,#wf409-account .wf409-player,#wf409-account .wf409-sub{display:none!important}
 #wf409-account .wf409-nav{display:flex!important;flex-direction:row!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px!important;margin:0!important;scrollbar-width:thin}
 #wf409-account .wf409-nav button{flex:0 0 auto!important;min-height:42px!important;min-width:max-content!important}
 #wf409-account .wf409-pane-group{overflow-y:auto!important;min-height:100px!important}
 #wf409-account .wf409-pane{padding:10px!important}
 #wf409-account .wf409-grid{grid-template-columns:minmax(0,1fr)!important}
 .wf363-feedback-panel{display:flex!important;flex-direction:column!important;gap:7px!important;padding:10px!important;max-height:calc(100dvh - 10px)!important}
 .wf363-feedback-panel .wf363-rail{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;grid-column:auto!important;grid-row:auto!important;align-items:center!important}
 .wf363-feedback-panel>:not(.wf363-rail){grid-column:auto!important}
 .wf363-feedback-panel .wf363-profile{grid-column:auto!important;padding:8px!important}
 #wf342-result.wf420-result.wf455-themed>.wf361-root,
 #wf342-result.wf361-ready.wf373-awards.wf420-result.wf455-themed>.wf361-root{
  display:flex!important;flex-direction:column!important;gap:6px!important;
 }
 #wf342-result.wf420-result.wf455-themed :is(.wf361-main,.wf373-awards-root){width:100%!important}
 #wf342-result.wf420-result.wf455-themed .wf361-banner.wf455-banner{min-height:120px!important;padding:6px 35px!important}
 #wf342-result.wf420-result.wf455-themed .wf373-highlights{grid-template-columns:minmax(0,1fr)!important}
 #wf342-result.wf420-result.wf455-themed .wf373-highlight{min-height:62px!important}
 #wf342-result.wf420-result.wf455-themed .wf342-result-buttons{gap:5px!important}
 #wf342-result.wf420-result.wf455-themed .wf342-result-buttons button{font-size:13px!important;min-height:43px!important}
}
/* Portrait battlefield: no enforced rotation; camera & commands can be used vertically. */
@media(orientation:portrait) and (max-width:900px){
 #gc95{flex-direction:column!important;box-sizing:border-box!important;
  width:100vw!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
 #gc95:not([hidden]):is([style*="display: block"],[style*="display:block"],[style*="display: flex"],[style*="display:flex"],[style*="display: grid"],[style*="display:grid"]){display:flex!important}
 #gc95header{flex:0 0 auto!important;display:flex!important;flex-wrap:wrap!important;
  padding:5px!important;gap:5px!important;max-height:76px!important;overflow:auto!important}
 #gc95header strong{font-size:12px!important}
 #gc95back{min-height:34px!important;padding:4px 8px!important}
 #gc95canvaswrap{display:block!important;position:relative!important;flex:1 1 auto!important;
  width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important;background:#152a2a!important}
 #gc95canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  min-height:0!important;max-width:100%!important;touch-action:none!important}
 #gc95hint{display:none!important}
 #gc95canvaswrap>#wf362top{top:2px!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;width:calc(100% - 90px)!important;
  max-width:none!important;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr)!important;gap:2px!important}
 #wf362top .wf362-crest{display:none!important}
 #wf362top .wf362-teamname{padding:2px!important}
 #wf362top .wf362-teamname strong{font-size:9px!important;overflow-wrap:anywhere}
 #wf362top .wf362-center{padding:2px!important;font-size:10px!important}
 #wf362top .wf362-center small{font-size:8px!important}
 #gc95canvaswrap>#wf363HudControls{top:5px!important;right:4px!important;gap:3px!important;z-index:24!important}
 #gc95canvaswrap>#wf363HudControls button{min-width:34px!important;min-height:34px!important;font-size:12px!important}
 #gc95canvaswrap>#gc97portrait{left:6px!important;bottom:83px!important;
  width:49px!important;height:49px!important;z-index:18!important}
 #gc95canvaswrap>#gc95footer{left:59px!important;bottom:94px!important;max-width:calc(100% - 120px)!important;
  font-size:9px!important;z-index:19!important}
 #gc95canvaswrap>#gc97dock{position:absolute!important;left:50%!important;bottom:10px!important;
  right:auto!important;transform:translateX(-50%)!important;
  width:calc(100% - 10px)!important;max-width:100%!important;z-index:20!important}
 #gc95canvaswrap>#gc97dock #gc95buttons{display:flex!important;justify-content:center!important;
  flex-wrap:nowrap!important;gap:4px!important}
 #gc95canvaswrap>#gc97dock #gc95buttons button{flex:1 1 0!important;min-width:0!important;
  max-width:90px!important;width:auto!important;height:59px!important;min-height:59px!important;
  padding:3px!important}
 #gc95canvaswrap>#gc97dock #gc95buttons .gc96symbol{font-size:20px!important}
 #gc95canvaswrap>#gc97dock #gc95buttons .gc96name{font-size:9px!important}
 #gc95canvaswrap>#gc97dock #gc95buttons small{font-size:8px!important}
 #gc95canvaswrap>#gc111tools{position:absolute!important;top:auto!important;bottom:161px!important;
  right:4px!important;max-width:40%!important;z-index:21!important}
 #gc95canvaswrap>#gc111tools button{min-height:32px!important;min-width:32px!important}
 #gc95canvaswrap>#wf384-overview{display:none!important}
}
/* Landscape phones continue using the existing v3.85 arena HUD; fix short top bars only. */
@media(orientation:landscape) and (max-height:480px){
 #gc95header{overflow-x:auto!important}
 #wf342-result.wf420-result.wf455-themed .wf361-banner.wf455-banner{min-height:91px!important}
}
@media(max-width:390px){
 #uiHome.wf391-ready #wf391-home .wf391-action{min-height:62px!important;padding:6px 9px!important}
 #wf394 .wf-unit .wf-unitpic{width:52px!important;height:52px!important}
 #wf394 .wf-unit .wf-qty button{min-width:35px!important;min-height:40px!important}
}
@media(prefers-reduced-motion:reduce){#uiHome.wf391-ready #wf391-home *,#wf342-result.wf455-themed *{scroll-behavior:auto!important}}


/* Secondary screens: Faction Unlocks, admin, settings, PvP review and avatars. */
#wf416-unlock-dialog,#wf420-admin,#wf144Settings{box-sizing:border-box!important;max-width:100vw!important;max-height:100dvh!important}
#wf416-unlock-dialog .wf416-panel,#wf420-admin .wf420-dialog{box-sizing:border-box!important;max-width:100%!important;max-height:100%!important;min-width:0!important}
#wf416-unlock-dialog .wf416-content,#wf420-admin .wf420-main{min-width:0!important;overflow-y:auto!important}
#wf416-unlock-dialog .wf416-tabs{max-width:100%!important;overflow-x:auto!important}
#wf395-review{box-sizing:border-box!important;max-width:100vw!important;max-height:100dvh!important;overflow-x:hidden!important;overflow-y:auto!important}
#wf395-review :is(button,select,input){max-width:100%!important}
#wf144Settings{overflow-y:auto!important}
#wf409-account .wf410-avatar-grid{max-width:100%!important;min-width:0!important}
@media(max-width:650px){
 #wf416-unlock-dialog,#wf420-admin{padding:5px!important;overflow:hidden!important}
 #wf416-unlock-dialog .wf416-top,#wf420-admin .wf420-header{padding:8px!important;flex-wrap:wrap!important}
 #wf416-unlock-dialog .wf416-content{padding:8px!important}
 #wf416-unlock-dialog .wf416-level-list{grid-template-columns:minmax(0,1fr)!important}
 #wf416-unlock-dialog .wf416-level{grid-template-columns:37px minmax(0,1fr) auto!important;gap:4px!important;padding:6px!important}
 #wf416-unlock-dialog .wf416-level .wf416-smallgold{font-size:9px!important}
 #wf420-admin .wf420-dialog{height:calc(100dvh - 10px)!important;max-height:calc(100dvh - 10px)!important}
 #wf420-admin .wf420-summary{grid-template-columns:minmax(0,1fr)!important;gap:5px!important;padding:5px!important}
 #wf420-admin .wf420-main{grid-template-columns:minmax(0,1fr)!important;display:flex!important;flex-direction:column!important;padding:5px!important;overflow-y:auto!important}
 #wf420-admin .wf420-player-panel{flex:0 0 auto!important;max-height:215px!important}
 #wf420-admin .wf420-player-list{max-height:118px!important;overflow-y:auto!important}
 #wf420-admin .wf420-detail{flex:1 0 auto!important;overflow:visible!important}
 #wf420-admin .wf420-grid{grid-template-columns:minmax(0,1fr)!important}
 #wf395-review{padding:6px!important}
 #wf144Settings{width:100vw!important;max-height:100dvh!important;padding:8px!important}
}