/* Warfront v4.89: Royal Violet Army Builder, APPROVED Design 1.
   CRITICAL: the ACTUAL builder is #wf394[data-page="army"], not legacy #builder.
   All existing WF394 buttons/listeners, prices, gold limits, commanders,
   formations, enemy and cloud accounts remain unchanged.
   Scoped exclusively to phone viewport and active WF394 Army page.
*/
@media (max-width:700px), (orientation:landscape) and (max-height:550px) and (max-width:1100px) {
  /* Legacy page chrome was visible THROUGH the preparation overlay.
     Make it invisible, preserving it in the DOM and its handlers. */
  html body:has(#wf394:not([hidden])) #uiBuildNav,
  html body:has(#wf394:not([hidden])) #wf348Toolbar,
  html body:has(#wf394:not([hidden])) #wf144SettingsOpen {
    visibility:hidden!important;pointer-events:none!important;
  }
  html body #wf394[data-page="army"]:not([hidden]){
    position:fixed!important;inset:0!important;
    width:100vw!important;height:100dvh!important;max-width:100vw!important;
    max-height:100dvh!important;min-width:0!important;
    margin:0!important;padding:0!important;z-index:2147481500!important;
    display:block!important;overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior-y:contain!important;scroll-behavior:smooth!important;
    background:linear-gradient(#1c0f2bee,#160e24f8),
      url('/wf487-citadel-background.webp') center top / cover no-repeat,#140b25!important;
    color:#fce3b4!important;font-family:Georgia,serif!important;
  }
  html body #wf394[data-page="army"] *,
  html body #wf394[data-page="army"] *::before,
  html body #wf394[data-page="army"] *::after{box-sizing:border-box!important}
  html body #wf394[data-page="army"] .wf-shell{
    box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
    gap:10px!important;position:relative!important;inset:auto!important;
    width:100%!important;max-width:700px!important;height:auto!important;
    min-height:100dvh!important;max-height:none!important;
    margin:0 auto!important;
    padding:calc(8px + env(safe-area-inset-top)) 10px
      calc(24px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;
  }
  /* Design 1: compact header, gold trim, clear Home and Warfront branding. */
  html body #wf394[data-page="army"] .wf-head{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    position:relative!important;top:auto!important;inset:auto!important;
    gap:6px!important;width:100%!important;min-width:0!important;
    margin:0!important;padding:9px!important;
    border:1px solid #d8b270!important;border-radius:12px!important;
    background:linear-gradient(115deg,#372145f5,#160e27ed 83%)!important;
    box-shadow:inset 0 0 0 1px #ac86523b,0 4px 13px #07020a8c!important;
  }
  html body #wf394[data-page="army"] .wf-head :is(h1,h2,strong){
    color:#ffe0a3!important;text-shadow:0 2px 4px #050109!important;
    font:700 clamp(17px,4.7vw,23px)/1.16 Georgia,serif!important;
    letter-spacing:.01em!important;overflow-wrap:anywhere!important;
    max-width:100%!important;
  }
  html body #wf394[data-page="army"] .wf-head :is(small,p){
    font:12px/1.4 system-ui,sans-serif!important;color:#e5c9d9!important;
    overflow-wrap:anywhere!important;
  }
  html body #wf394[data-page="army"] .wf489-quickbar{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:7px!important;align-items:center!important;
    width:100%!important;max-width:100%!important;padding:0!important;
    margin:0!important;
  }
  html body #wf394[data-page="army"] .wf489-quickbar button{
    display:flex!important;justify-content:center!important;align-items:center!important;
    box-sizing:border-box!important;min-width:0!important;min-height:45px!important;
    width:100%!important;padding:9px 5px!important;gap:6px!important;
    border:1px solid #e4b977!important;border-radius:8px!important;
    background:linear-gradient(#78429a,#351b55)!important;color:#ffe7b4!important;
    font:700 13px/1.2 Georgia,serif!important;text-align:center!important;
    cursor:pointer!important;white-space:normal!important;touch-action:manipulation!important;
  }
  html body #wf394[data-page="army"] .wf489-quickbar .wf489-home{
    background:linear-gradient(#24476c,#0c263e)!important;
  }
  html body #wf394[data-page="army"] .wf489-quickbar .wf489-save{
    background:linear-gradient(#8b439f,#441d65)!important;
  }
  html body #wf394[data-page="army"] .wf489-quickbar .wf489-settings{
    background:linear-gradient(#4f3268,#22142f)!important;
  }
  html body #wf394[data-page="army"] .wf489-headtitle{
    text-align:center!important;color:#ffe6ab!important;
    font:700 22px/1 Georgia,serif!important;letter-spacing:.10em!important;
    text-shadow:0 2px 3px #000!important;
  }
  html body #wf394[data-page="army"] .wf489-subbrand{
    display:block!important;text-align:center!important;color:#d6b47e!important;
    letter-spacing:.20em!important;font:700 9px Georgia,serif!important;
    margin:2px 0!important;
  }
  /* All existing content stays in document flow. No absolute-positioned HUD. */
  html body #wf394[data-page="army"] .wf-main,
  html body #wf394[data-page="army"] .wf-pane{
    display:flex!important;flex-direction:column!important;
    flex:0 0 auto!important;min-height:0!important;height:auto!important;
    max-height:none!important;width:100%!important;min-width:0!important;
    padding:0!important;margin:0!important;gap:10px!important;
    overflow:visible!important;position:relative!important;inset:auto!important;
  }
  html body #wf394[data-page="army"] .wf-pane>*{
    box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  }
  html body #wf394[data-page="army"] .wf-goldline{
    position:relative!important;display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:center!important;gap:8px!important;
    width:100%!important;max-width:100%!important;
    min-height:0!important;padding:12px!important;margin:0!important;
    border:1px solid #ddb26b!important;border-radius:12px!important;
    background:linear-gradient(130deg,#1a3149ee,#17132bee)!important;
    box-shadow:inset 0 1px #f3d1a447,0 4px 11px #0007!important;
    color:#ffe1a9!important;
  }
  html body #wf394[data-page="army"] .wf-goldline :is(strong,b,small,span){
    min-width:0!important;white-space:normal!important;
    overflow-wrap:anywhere!important;color:#ffe2a9!important;
    font-family:Georgia,serif!important;
  }
  html body #wf394[data-page="army"] .wf-goldline strong{font-size:13px!important}
  html body #wf394[data-page="army"] .wf-goldline b{font-size:16px!important}
  html body #wf394[data-page="army"] .wf-goldline small{
    grid-column:1/-1!important;text-align:center!important;font:12px/1.3 system-ui,sans-serif!important;
  }
  html body #wf394[data-page="army"] .wf-goldline .wf-bar{
    grid-column:1/-1!important;height:9px!important;width:100%!important;
    border-radius:10px!important;overflow:hidden!important;
    background:#110c19!important;border:1px solid #9e7a51!important;
  }
  html body #wf394[data-page="army"] .wf-goldline .wf-bar i{
    background:linear-gradient(90deg,#a765c8,#f3c76d)!important;
    height:100%!important;
  }
  html body #wf394[data-page="army"] .wf-goldline :is(button,select,input){
    min-height:44px!important;max-width:100%!important;min-width:0!important;
    border:1px solid #b98c5e!important;border-radius:8px!important;
  }
  html body #wf394[data-page="army"] .wf416-formations{
    width:100%!important;display:flex!important;flex-wrap:wrap!important;
    gap:7px!important;align-items:center!important;justify-content:flex-start!important;
    padding:10px!important;margin:0!important;
    border:1px solid #ae865e!important;border-radius:10px!important;
    background:linear-gradient(#382046,#1b102a)!important;
  }
  html body #wf394[data-page="army"] .wf416-formations button{
    flex:1 1 auto!important;min-height:44px!important;
    padding:7px!important;white-space:normal!important;
    font-size:12px!important;border-radius:8px!important;
  }
  /* All native role filters remain reachable; keep horizontal swipe if needed. */
  html body #wf394[data-page="army"] :is(.wf-filters,.wf-tabs,.wf-roles,.wf-categories){
    display:flex!important;gap:7px!important;width:100%!important;
    max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    flex-wrap:nowrap!important;padding:8px!important;scrollbar-width:thin!important;
  }
  html body #wf394[data-page="army"] :is(.wf-filters,.wf-tabs,.wf-roles,.wf-categories) button{
    flex:1 0 auto!important;min-width:80px!important;min-height:44px!important;
    padding:7px!important;font:700 13px Georgia,serif!important;white-space:nowrap!important;
  }
  html body #wf394[data-page="army"] .wf-scroll{
    display:block!important;flex:0 0 auto!important;
    min-height:0!important;height:auto!important;max-height:none!important;
    width:100%!important;max-width:100%!important;
    overflow:visible!important;padding:0!important;margin:0!important;
  }
  /* Exactly two compact cards per row; original +/- controls stay in place. */
  html body #wf394[data-page="army"] .wf-unitgrid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;align-items:stretch!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    gap:10px!important;padding:0!important;margin:0!important;
    overflow:visible!important;
  }
  html body #wf394[data-page="army"] .wf-unit{
    display:grid!important;position:relative!important;inset:auto!important;
    grid-template-columns:38% minmax(0,1fr)!important;
    grid-template-rows:minmax(120px,1fr) 53px!important;
    align-items:stretch!important;gap:0!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    height:auto!important;min-height:173px!important;margin:0!important;padding:0!important;
    border:1px solid #d1a369!important;border-radius:10px!important;
    background:linear-gradient(165deg,#27172f,#100c1e)!important;
    box-shadow:inset 0 0 0 1px #eac88235,0 3px 11px #0009!important;
    overflow:hidden!important;color:#f7e1b8!important;
  }
  html body #wf394[data-page="army"] .wf-unit[hidden]{display:none!important}
  html body #wf394[data-page="army"] .wf-unitpic{
    display:flex!important;grid-column:1!important;grid-row:1!important;
    width:100%!important;max-width:100%!important;height:100%!important;
    min-height:0!important;min-width:0!important;
    align-items:center!important;justify-content:center!important;
    padding:3px!important;margin:0!important;
    background:radial-gradient(ellipse at center,#4b3155,#10111b 78%)!important;
    border:0!important;overflow:hidden!important;
    object-fit:contain!important;
  }
  html body #wf394[data-page="army"] .wf-unitpic img,
  html body #wf394[data-page="army"] img.wf-unitpic{
    max-width:100%!important;max-height:100%!important;
    width:100%!important;height:100%!important;object-fit:contain!important;
    filter:drop-shadow(0 3px 4px #0009)!important;
  }
  html body #wf394[data-page="army"] .wf-unitinfo{
    display:flex!important;grid-column:2!important;grid-row:1!important;
    flex-direction:column!important;justify-content:center!important;
    gap:4px!important;min-width:0!important;min-height:0!important;
    height:auto!important;max-width:100%!important;
    padding:7px 5px!important;margin:0!important;text-align:left!important;
    background:linear-gradient(90deg,#151023,#181327)!important;
  }
  html body #wf394[data-page="army"] .wf-unitinfo b{
    font:700 clamp(11px,3.1vw,16px)/1.12 Georgia,serif!important;
    color:#ffdfa0!important;overflow-wrap:anywhere!important;
    display:block!important;white-space:normal!important;margin:0!important;
  }
  html body #wf394[data-page="army"] .wf-unitinfo small{
    color:#eccba0!important;display:block!important;
    font:10px/1.25 system-ui,sans-serif!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
    margin:0!important;padding:0!important;
  }
  html body #wf394[data-page="army"] .wf-qty{
    display:grid!important;grid-column:1/-1!important;grid-row:2!important;
    grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr)!important;
    align-items:center!important;justify-items:stretch!important;gap:4px!important;
    width:100%!important;height:53px!important;min-height:53px!important;
    padding:4px 6px!important;margin:0!important;
    background:linear-gradient(110deg,#321841,#4d285d)!important;
    border-top:1px solid #b88c76!important;
  }
  html body #wf394[data-page="army"] .wf-qty button{
    display:grid!important;place-items:center!important;
    width:100%!important;min-width:44px!important;max-width:100%!important;
    min-height:44px!important;height:44px!important;margin:0!important;padding:0!important;
    background:linear-gradient(#8444a5,#48205e)!important;
    color:#ffdfa9!important;border:1px solid #ad79bf!important;border-radius:8px!important;
    font:800 22px/1 system-ui,sans-serif!important;touch-action:manipulation!important;
  }
  html body #wf394[data-page="army"] .wf-qty button:disabled{
    opacity:.38!important;cursor:not-allowed!important;
  }
  html body #wf394[data-page="army"] .wf-qty strong{
    min-width:20px!important;max-width:40px!important;text-align:center!important;
    font:700 16px Georgia,serif!important;color:#fff0ca!important;
  }
  /* Commander, Saved Armies, Formation, Enemy, Specialization are all real native
     content blocks. Visual grouping only; do not remove/hide any controls. */
  html body #wf394[data-page="army"] :is(.wf-hero,.wf-herocard,.wf-preset,.wf-enemy,
      .wf-special,.wf-formation,.wf-card,.wf-panel,details){
    min-width:0!important;max-width:100%!important;
    border-radius:11px!important;
    overflow-wrap:anywhere!important;
  }
  html body #wf394[data-page="army"] details{
    width:100%!important;margin:0!important;
    border:1px solid #b99460!important;
    background:linear-gradient(130deg,#382348,#1b1028)!important;
    color:#f6daa5!important;
  }
  html body #wf394[data-page="army"] details > summary{
    cursor:pointer!important;padding:13px 14px!important;
    min-height:48px!important;color:#ffe2a3!important;
    font:700 16px/1.2 Georgia,serif!important;
  }
  html body #wf394[data-page="army"] details[open] > summary{
    border-bottom:1px solid #b08c5b!important;
  }
  html body #wf394[data-page="army"] :is(button,input,select,summary){
    max-width:100%!important;min-width:0!important;
    touch-action:manipulation!important;scroll-margin-top:12px!important;
  }
  html body #wf394[data-page="army"] :is(button,summary):focus-visible{
    outline:3px solid #ffe5ac!important;outline-offset:2px!important;
  }
  /* Footer is part of the page, never fixed over the bottom of unit cards. */
  html body #wf394[data-page="army"] .wf-bottom,
  html body #wf394[data-page="army"] #wf394-bottom{
    display:flex!important;position:relative!important;inset:auto!important;
    flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
    flex-wrap:wrap!important;gap:9px!important;width:100%!important;
    min-height:62px!important;height:auto!important;max-height:none!important;
    margin:5px 0 0!important;padding:12px!important;
    border:1px solid #d4ac76!important;border-radius:12px!important;
    background:linear-gradient(130deg,#352041,#191125)!important;
    box-shadow:0 2px 11px #0009!important;z-index:1!important;
  }
  html body #wf394[data-page="army"] #wf394-bottom button{
    min-height:44px!important;min-width:0!important;
    flex:1 1 auto!important;padding:9px!important;
    white-space:normal!important;font-size:13px!important;
  }
}
@media (max-width:390px) and (orientation:portrait) {
  html body #wf394[data-page="army"] .wf-shell{padding-left:7px!important;padding-right:7px!important}
  html body #wf394[data-page="army"] .wf-unitgrid{gap:7px!important}
  html body #wf394[data-page="army"] .wf-unit{grid-template-columns:36% minmax(0,1fr)!important}
  html body #wf394[data-page="army"] .wf-unitinfo{padding:5px 3px!important}
  html body #wf394[data-page="army"] .wf-unitinfo b{font-size:11px!important}
  html body #wf394[data-page="army"] .wf-qty{padding:4px!important;gap:2px!important}
}
@media (orientation:landscape) and (max-height:550px) and (max-width:1100px) {
  html body #wf394[data-page="army"] .wf-shell{max-width:940px!important;padding:6px 12px 16px!important}
  html body #wf394[data-page="army"] .wf-unitgrid{gap:9px!important}
  html body #wf394[data-page="army"] .wf-unit{grid-template-columns:35% minmax(0,1fr)!important}
  html body #wf394[data-page="army"] .wf-unitinfo b{font-size:14px!important}
}