/* WARFRONT v4.89.1 — MOBILE ARMY BUILDER FLOATING HEADER REPAIR.
 * The screenshot comes from LEGACY #builder/#uiBuildNav (not WF394).
 * This layer targets ONLY the native legacy Army Builder when body.ui-build
 * at phone dimensions. Other game screens and approved artwork unaffected.
 * Existing native Home, faction, gold, Save, player/account buttons survive.
 */
@media (max-width:700px), (orientation:landscape) and (max-height:550px) and (max-width:1100px) {
  html body.ui-build {
    width:100%!important;max-width:100vw!important;min-width:0!important;
    overflow-x:hidden!important;
    background-color:#140d23!important;
  }
  /* Old top bar was position:sticky and covered cards for the whole scroll.
     Put that EXACT bar back in the flow, rather than placing an overlay over it. */
  html body.ui-build #uiBuildNav{
    position:relative!important;
    inset:auto!important;top:auto!important;right:auto!important;
    bottom:auto!important;left:auto!important;transform:none!important;
    float:none!important;clear:both!important;
    display:grid!important;
    grid-template-columns:clamp(70px,22vw,95px) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;align-content:start!important;
    width:100%!important;max-width:100vw!important;min-width:0!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    padding:calc(10px + env(safe-area-inset-top)) 12px 13px!important;
    margin:0 0 10px!important;gap:10px!important;
    overflow:visible!important;
    z-index:1!important;isolation:isolate!important;
    border:0!important;border-bottom:2px solid #cca369!important;
    border-radius:0!important;
    color:#ffe1aa!important;
    background:linear-gradient(125deg,#2d1a40f5,#160e28f4 80%)!important;
    box-shadow:0 5px 15px #0008!important;
  }
  html body.ui-build #uiBuildNav #uiBackHome{
    grid-column:1!important;grid-row:1!important;justify-self:stretch!important;
    position:relative!important;inset:auto!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    float:none!important;transform:none!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    height:54px!important;min-height:54px!important;max-height:none!important;
    margin:0!important;padding:7px 5px!important;
    background:linear-gradient(145deg,#244a69,#102a48)!important;
    border:2px solid #dfb779!important;border-radius:11px!important;
    box-shadow:0 2px 6px #0007!important;
    color:#ffe2aa!important;font:700 13px Georgia,serif!important;
    text-align:center!important;white-space:normal!important;
  }
  html body.ui-build #uiBuildNav > strong{
    position:relative!important;inset:auto!important;float:none!important;
    grid-column:2!important;grid-row:1!important;
    display:block!important;width:100%!important;min-width:0!important;
    text-align:right!important;white-space:normal!important;
    font:700 clamp(19px,6vw,29px)/1.1 Georgia,serif!important;
    color:#f9daa2!important;letter-spacing:.07em!important;
    text-shadow:0 3px 5px #06020e!important;
  }
  /* The original header elements are now normal responsive grid items. */
  html body.ui-build #uiBuildNav > .wf359-header-info {
    position:relative!important;inset:auto!important;transform:none!important;
    display:grid!important;grid-column:1/-1!important;grid-row:2!important;
    grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)!important;
    grid-template-areas:"faction gold" "save settings"!important;
    gap:9px!important;align-items:stretch!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;margin:0!important;padding:0!important;
    background:none!important;border:0!important;box-shadow:none!important;
  }
  html body.ui-build #uiBuildNav .wf359-faction,
  html body.ui-build #uiBuildNav .wf359-budget,
  html body.ui-build #uiBuildNav .wf359-save-top,
  html body.ui-build #uiBuildNav .wf4891-settings {
    box-sizing:border-box!important;
    position:relative!important;inset:auto!important;float:none!important;
    transform:none!important;display:flex!important;
    align-items:center!important;justify-content:center!important;
    min-width:0!important;max-width:100%!important;width:100%!important;
    height:auto!important;margin:0!important;
    border:1px solid #d4aa72!important;border-radius:9px!important;
    box-shadow:inset 0 0 0 1px #eed2a52b,0 2px 7px #0006!important;
    color:#ffe0ae!important;
  }
  html body.ui-build #uiBuildNav .wf359-faction {
    grid-area:faction!important;
    min-height:54px!important;padding:8px!important;
    background:linear-gradient(150deg,#17354b,#11172a)!important;
    font:700 clamp(12px,3.3vw,15px)/1.24 Georgia,serif!important;
    text-align:left!important;overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
  html body.ui-build #uiBuildNav .wf359-budget {
    grid-area:gold!important;
    min-height:54px!important;padding:8px 4px!important;
    background:linear-gradient(150deg,#17314c,#101325)!important;
    font:700 clamp(12px,3.4vw,17px)/1.2 Georgia,serif!important;
    text-align:center!important;white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  html body.ui-build #uiBuildNav .wf359-save-top {
    grid-area:save!important;
    min-height:47px!important;padding:9px 7px!important;
    font:700 15px/1.22 Georgia,serif!important;
    background:linear-gradient(#8144a2,#3c2159)!important;
    touch-action:manipulation!important;cursor:pointer!important;
  }
  html body.ui-build #uiBuildNav .wf4891-settings {
    grid-area:settings!important;
    min-height:47px!important;padding:9px 5px!important;
    font:700 15px/1.22 Georgia,serif!important;
    background:linear-gradient(#624073,#2b1b3c)!important;
    touch-action:manipulation!important;cursor:pointer!important;
  }
  html body.ui-build #uiBuildNav .wf4891-settings[hidden]{display:none!important}
  /* The original free-floating gear remains functional through the in-flow
     Settings button, but is not drawn over the commander/card section. */
  html body.ui-build #wf144SettingsOpen {
    display:none!important;visibility:hidden!important;pointer-events:none!important;
  }
  /* Any old overlay decoration from #uiBuildNav must not cover the builder. */
  html body.ui-build #uiBuildNav :is(button,span,strong){
    max-width:100%!important;overflow-wrap:anywhere!important;
  }
  /* The legacy builder and all its already working unit controls stay unchanged.
     Only ensure content starts AFTER the header and flows naturally. */
  html body.ui-build #builder {
    position:relative!important;inset:auto!important;
    transform:none!important;float:none!important;clear:both!important;
    z-index:0!important;
    box-sizing:border-box!important;
    width:calc(100% - 18px)!important;max-width:700px!important;
    min-width:0!important;height:auto!important;
    margin:12px auto 14px!important;padding:0!important;
    overflow:visible!important;
  }
  html body.ui-build #builder > .layout{
    position:relative!important;inset:auto!important;
    transform:none!important;min-width:0!important;max-width:100%!important;
  }
  /* The bottom player toolbar was fixed across the cards.
     v4.89.1 moves the SAME original toolbar after #builder and resets fixed
     positioning; its buttons, listeners and avatar node are never copied. */
  html body.ui-build #wf348Toolbar {
    position:relative!important;inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    float:none!important;clear:both!important;
    transform:none!important;
    width:calc(100% - 18px)!important;max-width:700px!important;
    min-width:0!important;height:auto!important;min-height:0!important;
    margin:12px auto calc(18px + env(safe-area-inset-bottom))!important;
    padding:9px 10px!important;
    display:flex!important;align-items:center!important;
    justify-content:center!important;flex-wrap:wrap!important;gap:7px!important;
    z-index:0!important;
    border-radius:12px!important;border:1px solid #d2ac73!important;
    background:linear-gradient(110deg,#2b1a38,#180e26)!important;
    box-shadow:inset 0 1px 0 #ffe1a326,0 5px 11px #0007!important;
  }
  html body.ui-build #wf348Toolbar[hidden]{display:none!important}
  html body.ui-build #wf348Toolbar :is(button,input,select) {
    position:relative!important;inset:auto!important;
    max-width:100%!important;min-width:0!important;
    min-height:44px!important;box-sizing:border-box!important;
    touch-action:manipulation!important;
  }
  html body.ui-build #wf348Toolbar #wf348Player {
    min-width:0!important;max-width:100%!important;overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body.ui-build #uiBuildNav :is(button,.wf4891-settings):focus-visible,
  html body.ui-build #wf348Toolbar button:focus-visible {
    outline:3px solid #ffe3a1!important;outline-offset:2px!important;
  }
}
@media (max-width:390px) and (orientation:portrait) {
  html body.ui-build #uiBuildNav {
    grid-template-columns:75px minmax(0,1fr)!important;
    padding-left:8px!important;padding-right:8px!important;gap:7px!important;
  }
  html body.ui-build #uiBuildNav > .wf359-header-info{gap:7px!important}
  html body.ui-build #uiBuildNav .wf359-faction,
  html body.ui-build #uiBuildNav .wf359-budget{
    padding:7px 5px!important;font-size:12px!important;
  }
}
@media(orientation:landscape) and (max-height:550px) and (max-width:1100px) {
  html body.ui-build #uiBuildNav{
    grid-template-columns:90px minmax(0,1fr)!important;
    padding:8px 12px!important;gap:7px 10px!important;
  }
  html body.ui-build #uiBuildNav > .wf359-header-info{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;
    gap:7px!important;
  }
  html body.ui-build #uiBuildNav #uiBackHome{
    min-height:46px!important;height:46px!important;
  }
  html body.ui-build #builder,
  html body.ui-build #wf348Toolbar{max-width:940px!important}
}