background:linear-gradient(180deg, rgba(7,18,26,.96), rgba(6,12,20,.98)) !important;
    border-top:1px solid rgba(195,164,97,.32) !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.3) !important;
    border-radius:12px 12px 0 0 !important;
  }
  #formationDock .dockBtn{
    width:88px !important;
    min-width:88px !important;
    height:62px !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    color:#e4cf95 !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
  }
  #formationDock .dockOrb{
    width:40px !important;
    height:40px !important;
  }
  #formationDock .dockIcon{ font-size:18px !important; }
  #formationDock .dockLabel{ font-size:11px !important; margin-top:2px !important; }

  #toast{
    bottom:62px !important;
    left:8px !important;
    right:8px !important;
    text-align:center !important;
    font-size:11px !important;
    padding:8px 10px !important;
  }

  #formationPanel, #reportWindow{
    position:fixed !important;
    inset:6px 6px 64px 6px !important;
    left:6px !important;
    right:6px !important;
    top:6px !important;
    bottom:64px !important;
    width:auto !important;
    height:auto !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }

  #closeFormation, #closeReports{
    position:absolute !important;
    top:6px !important;
    right:6px !important;
    z-index:5000 !important;
    padding:6px 8px !important;
    font-size:11px !important;
    border-radius:10px !important;
  }

  .mobile-army-panel{
    padding:8px !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:6px !important;
  }
  .mobile-army-panel .army-header{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:"title close" "capacity capacity" "resources resources";
    gap:5px !important;
    margin:0 !important;
    align-items:start !important;
  }
  .mobile-army-panel .army-title-wrap{ grid-area:title; min-width:0; }
  .mobile-army-panel .army-title{ font-size:16px !important; margin:0 0 2px 0 !important; }
  .mobile-army-panel .army-title.small{ font-size:13px !important; }
  .mobile-army-panel #closeFormation{ grid-area:close; justify-self:end; position:static !important; }
  .mobile-army-panel .army-capacity{
    grid-area:capacity;
    padding:5px 6px !important;
    gap:5px !important;
    flex-wrap:wrap !important;
    border-radius:8px !important;
  }
  .mobile-army-panel .army-capacity-text{ font-size:10px !important; }
  .mobile-army-panel .army-capacity-bar{ width:100% !important; height:7px !important; }
  .mobile-army-panel .army-resources{
    grid-area:resources;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:3px !important;
  }
  .mobile-army-panel .res-chip{
    min-width:0 !important;
    font-size:9px !important;
    padding:3px 4px !important;
    justify-content:center !important;
  }

  .mobile-army-panel .formation-strip{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(72px, 1fr)) !important;
    gap:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:2px !important;
    margin:0 !important;
  }
  .mobile-army-panel .formation-card{
    min-height:68px !important;
    padding:6px !important;
    border-radius:9px !important;
  }
  .mobile-army-panel .f-title{ font-size:11px !important; margin-bottom:2px !important; }
  .mobile-army-panel .formation-power{ font-size:14px !important; margin:2px 0 !important; }
  .mobile-army-panel .f-sub{ font-size:7px !important; line-height:1.05 !important; }
  .mobile-army-panel .formation-units{ gap:3px !important; margin-top:3px !important; }
  .mobile-army-panel .formation-unit-chip{ font-size:7px !important; padding:2px 1px !important; }

  .mobile-army-panel .barracks-only-panel{
    min-height:0 !important;
    height:auto !important;
    padding:6px !important;
    display:grid !important;
    grid-template-rows:auto 1fr auto !important;
    gap:6px !important;
    overflow:hidden !important;
  }
  .mobile-army-panel .barracks-scene-header{ margin:0 !important; }
  .mobile-army-panel .hint{ font-size:9px !important; line-height:1.1 !important; }
  .mobile-army-panel .barracks-stage{
    min-height:0 !important;
    height:auto !important;
    border-radius:10px !important;
  }
  .mobile-army-panel .troop-stage-grid{
    grid-template-columns:repeat(5, minmax(56px, 1fr)) !important;
    gap:2px !important;
    padding:98px 4px 6px 4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .mobile-army-panel .troop-card{ min-height:70px !important; padding:0 1px !important; }
  .mobile-army-panel .troop-scene-sprite{ height:34px !important; margin-bottom:4px !important; }
  .mobile-army-panel .troop-scene-sprite img{ width:30px !important; height:30px !important; }
  .mobile-army-panel .troop-card-slider .sliderWrap{ grid-template-columns:1fr 24px !important; gap:2px !important; }
  .mobile-army-panel .troop-card-slider .sliderLabel{ height:16px !important; font-size:8px !important; border-radius:5px !important; }

  .mobile-army-panel .troop-detail-bar{
    grid-template-columns:1fr !important;
    gap:5px !important;
    padding:6px !important;
    margin:0 !important;
    border-radius:10px !important;
  }
  .mobile-army-panel .troop-detail-left{
    display:grid !important;
    grid-template-columns:34px 1fr !important;
    gap:6px !important;
    align-items:center !important;
  }
  .mobile-army-panel .troop-hero{ width:34px !important; height:34px !important; border-radius:8px !important; }
  .mobile-army-panel .troop-hero img{ width:28px !important; height:28px !important; }
  .mobile-army-panel .troop-hero-name{ font-size:11px !important; margin-bottom:1px !important; line-height:1.05 !important; }
  .mobile-army-panel #selectedTroopMeta,
  .mobile-army-panel #selectedTroopCosts,
  .mobile-army-panel #recruitInfo{ font-size:8px !important; line-height:1.05 !important; }
  .mobile-army-panel .sliderWrap.wide{ grid-template-columns:1fr 30px !important; gap:3px !important; }
  .mobile-army-panel .recruit-actions{ gap:5px !important; }
  .mobile-army-panel .barracksBtn{
    height:28px !important;
    font-size:9px !important;
    min-width:0 !important;
    flex:1 !important;
    border-radius:8px !important;
    padding:0 6px !important;
  }

  .mobile-report-panel{
    padding:6px !important;
    display:block !important;
  }
  .mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:82px 1fr !important;
    gap:6px !important;
    height:100% !important;
  }
  .mobile-report-panel .report-sidebar{
    padding:6px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    display:grid !important;
    grid-template-rows:auto 1fr !important;
    gap:4px !important;
    min-height:0 !important;
  }
  .mobile-report-panel .report-main{
    padding:8px !important;
    overflow:hidden !important;
    min-height:0 !important;
  }
  .mobile-report-panel #closeReports{
    position:absolute !important;
    top:6px !important;
    right:6px !important;
  }
  .mobile-report-panel #reportList{
    height:44px !important;
    max-height:44px !important;
    overflow:auto !important;
  }
  .mobile-report-panel .report{
    padding:6px 8px !important;
    margin:0 !important;
    border-radius:7px !important;
    font-size:10px !important;
  }
  .mobile-report-panel .report small{ display:none !important; }
  .mobile-report-panel #reportEmpty{
    font-size:14px !important;
    padding:10px !important;
    min-height:80px !important;
  }
  .mobile-report-panel #reportDetail{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .mobile-report-panel .report-big-title{
    font-size:18px !important;
    line-height:1 !important;
    margin-bottom:2px !important;
  }
  .mobile-report-panel #reportDetailMeta,
  .mobile-report-panel #reportDetailCoords{
    font-size:9px !important;
    line-height:1.05 !important;
  }
  .mobile-report-panel .row{
    gap:6px !important;
  }
  .mobile-report-panel .report-portrait-row{ margin-bottom:6px !important; }
  .mobile-report-panel .report-portrait{
    width:28px !important;
    height:28px !important;
    font-size:16px !important;
  }
  .mobile-report-panel #reportPlayerCommander,
  .mobile-report-panel #reportEnemyCommander{
    font-size:11px !important;
    margin-bottom:2px !important;
  }
  .mobile-report-panel #reportPlayerArmy,
  .mobile-report-panel #reportEnemyArmy{
    font-size:8px !important;
    line-height:1.1 !important;
  }
  .mobile-report-panel #reportSummaryText{
    font-size:8px !important;
    line-height:1.1 !important;
    margin-bottom:5px !important;
  }
  .mobile-report-panel .report-tabs{
    gap:4px !important;
    margin-top:4px !important;
    margin-bottom:4px !important;
  }
  .mobile-report-panel .report-tab{
    padding:4px 6px !important;
    font-size:8px !important;
    border-radius:6px !important;
  }
  .mobile-report-panel #reportTurnLog{
    height:78px !important;
    font-size:7px !important;
    line-height:1.05 !important;
    padding:6px !important;
  }
}


/* V43 mobile real fix */
#formationOverlay,#reportOverlay{
  display:none;
  pointer-events:none;
}
#formationPanel,#reportWindow{
  display:none;
  pointer-events:none;
}
#formationOverlay.open,#reportOverlay.open{
  display:block !important;
  pointer-events:auto !important;
}
#formationPanel.open,#reportWindow.open{
  display:block !important;
  pointer-events:auto !important;
}
#formationDock{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  z-index:2200;
  display:flex;
  gap:18px;
  align-items:flex-end;
}
#formationDock .dockBtn{
  border:none;
  background:transparent;
  color:#e7d49b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  cursor:pointer;
  padding:0;
}
#formationDock .dockOrb{
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(255,233,160,.22), rgba(255,233,160,.04) 28%, rgba(16,49,63,.96) 29%, rgba(9,28,37,.99) 100%);
  border:1px solid rgba(195,164,97,.58);
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
}
#formationDock .dockIcon{
  font-size:22px;
  line-height:1;
}
#formationDock .dockLabel{
  font-size:12px;
  line-height:1;
}

@media (max-width:900px){
  #hud{
    top:6px !important;
    left:6px !important;
    right:6px !important;
    max-width:calc(100vw - 12px) !important;
    padding:6px 8px !important;
    font-size:10px !important;
    line-height:1.1 !important;
    border-radius:8px !important;
  }

  #formationDock{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    transform:none !important;
    width:100vw !important;
    justify-content:center !important;
    gap:34px !important;
    padding:6px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg, rgba(7,18,26,.96), rgba(6,12,20,.98)) !important;
    border-top:1px solid rgba(195,164,97,.28) !important;
    border-radius:12px 12px 0 0 !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.28) !important;
  }
  #formationDock .dockBtn{
    width:74px !important;
    min-width:74px !important;
    height:54px !important;
    gap:4px !important;
  }
  #formationDock .dockOrb{
    width:34px !important;
    height:34px !important;
  }
  #formationDock .dockIcon{
    font-size:16px !important;
  }
  #formationDock .dockLabel{
    font-size:10px !important;
  }

  #toast{
    bottom:54px !important;
    left:8px !important;
    right:8px !important;
    font-size:10px !important;
    padding:7px 9px !important;
    text-align:center !important;
  }

  #formationPanel,#reportWindow{
    position:fixed !important;
    inset:6px 6px 58px 6px !important;
    left:6px !important;
    right:6px !important;
    top:6px !important;
    bottom:58px !important;
    width:auto !important;
    height:auto !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }

  #closeFormation,#closeReports{
    position:absolute !important;
    top:6px !important;
    right:6px !important;
    z-index:5000 !important;
    padding:5px 7px !important;
    font-size:10px !important;
    border-radius:10px !important;
  }

  /* Army compact real mobile */
  .mobile-army-panel{
    padding:6px !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:5px !important;
  }
  .mobile-army-panel .army-header{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "title close"
      "capacity capacity"
      "resources resources";
    gap:4px !important;
    margin:0 !important;
    align-items:start !important;
  }
  .mobile-army-panel .army-title-wrap{grid-area:title; min-width:0}
  .mobile-army-panel .army-title{font-size:14px !important; margin:0 !important}
  .mobile-army-panel .army-title.small{font-size:11px !important}
  .mobile-army-panel #closeFormation{grid-area:close; position:static !important; justify-self:end}
  .mobile-army-panel .army-capacity{
    grid-area:capacity;
    padding:4px 5px !important;
    gap:4px !important;
    border-radius:7px !important;
    flex-wrap:wrap !important;
  }
  .mobile-army-panel .army-capacity-text{font-size:9px !important}
  .mobile-army-panel .army-capacity-bar{width:100% !important; height:6px !important}
  .mobile-army-panel .army-resources{
    grid-area:resources;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:2px !important;
  }
  .mobile-army-panel .res-chip{
    min-width:0 !important;
    padding:2px 3px !important;
    font-size:8px !important;
    justify-content:center !important;
  }

  .mobile-army-panel .formation-list,
  .mobile-army-panel .formation-strip{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(60px,1fr)) !important;
    gap:3px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:2px !important;
    margin:0 !important;
  }
  .mobile-army-panel .formation-card{
    min-height:56px !important;
    padding:4px !important;
    border-radius:8px !important;
  }
  .mobile-army-panel .f-controls{top:4px !important; right:4px !important; gap:3px !important}
  .mobile-army-panel .f-mini{width:18px !important; height:18px !important; font-size:10px !important}
  .mobile-army-panel .f-title{font-size:9px !important; margin-bottom:1px !important}
  .mobile-army-panel .formation-power{font-size:11px !important; margin:1px 0 !important}
  .mobile-army-panel .f-sub{font-size:6px !important; line-height:1.0 !important}
  .mobile-army-panel .formation-units{gap:2px !important; margin-top:2px !important}
  .mobile-army-panel .formation-unit-chip{font-size:6px !important; padding:1px !important; border-radius:4px !important}

  .mobile-army-panel .barracks-only-panel{
    min-height:0 !important;
    height:auto !important;
    padding:5px !important;
    display:grid !important;
    grid-template-rows:auto 1fr auto !important;
    gap:5px !important;
    overflow:hidden !important;
  }
  .mobile-army-panel .barracks-scene-header{
    margin:0 !important;
  }
  .mobile-army-panel .hint{font-size:8px !important; line-height:1.0 !important}
  .mobile-army-panel .barracks-stage{
    min-height:0 !important;
    height:auto !important;
    border-radius:9px !important;
  }
  .mobile-army-panel .troop-stage-grid{
    grid-template-columns:repeat(5, minmax(48px,1fr)) !important;
    gap:2px !important;
    padding:84px 3px 4px 3px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .mobile-army-panel .troop-card{
    min-height:58px !important;
    padding:0 1px !important;
  }
  .mobile-army-panel .troop-scene-sprite{
    height:28px !important;
    margin-bottom:3px !important;
  }
  .mobile-army-panel .troop-scene-sprite img{
    width:24px !important;
    height:24px !important;
  }
  .mobile-army-panel .troop-card-slider .sliderWrap{
    grid-template-columns:1fr 20px !important;
    gap:1px !important;
  }
  .mobile-army-panel .troop-card-slider .sliderLabel{
    height:14px !important;
    font-size:7px !important;
    border-radius:4px !important;
  }

  .mobile-army-panel .troop-detail-bar{
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:5px !important;
    border-radius:8px !important;
  }
  .mobile-army-panel .troop-detail-left{
    display:grid !important;
    grid-template-columns:28px 1fr !important;
    gap:5px !important;
    align-items:center !important;
  }
  .mobile-army-panel .troop-hero{
    width:28px !important;
    height:28px !important;
    border-radius:6px !important;
  }
  .mobile-army-panel .troop-hero img{
    width:22px !important;
    height:22px !important;
  }
  .mobile-army-panel .troop-hero-name{
    font-size:9px !important;
    margin-bottom:1px !important;
    line-height:1 !important;
  }
  .mobile-army-panel #selectedTroopMeta,
  .mobile-army-panel #selectedTroopCosts,
  .mobile-army-panel #recruitInfo{
    font-size:7px !important;
    line-height:1.0 !important;
  }
  .mobile-army-panel .sliderWrap.wide{
    grid-template-columns:1fr 24px !important;
    gap:2px !important;
  }
  .mobile-army-panel .sliderLabel{
    height:15px !important;
    font-size:7px !important;
  }
  .mobile-army-panel .recruit-actions{
    gap:4px !important;
  }
  .mobile-army-panel .barracksBtn{
    height:24px !important;
    font-size:8px !important;
    min-width:0 !important;
    flex:1 !important;
    padding:0 4px !important;
    border-radius:7px !important;
  }

  /* Report compact real mobile */
  .mobile-report-panel{
    padding:5px !important;
    display:block !important;
  }
  .mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:56px 1fr !important;
    gap:4px !important;
    height:100% !important;
  }
  .mobile-report-panel .report-sidebar{
    display:grid !important;
    grid-template-rows:auto 1fr !important;
    gap:4px !important;
    padding:5px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    min-height:0 !important;
  }
  .mobile-report-panel .report-main{
    padding:6px !important;
    overflow:hidden !important;
    min-height:0 !important;
  }
  .mobile-report-panel b[style*="font-size:22px"]{
    font-size:14px !important;
  }
  .mobile-report-panel #reportList{
    height:30px !important;
    max-height:30px !important;
    overflow:auto !important;
  }
  .mobile-report-panel .report{
    padding:4px 6px !important;
    margin:0 !important;
    border-radius:6px !important;
    font-size:8px !important;
  }
  .mobile-report-panel .report small{display:none !important}
  .mobile-report-panel #reportEmpty{
    font-size:11px !important;
    padding:8px !important;
    min-height:40px !important;
  }
  .mobile-report-panel #reportDetail{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .mobile-report-panel .report-big-title{
    font-size:13px !important;
    line-height:1 !important;
    margin-bottom:1px !important;
  }
  .mobile-report-panel #reportDetailMeta,
  .mobile-report-panel #reportDetailCoords{
    font-size:7px !important;
    line-height:1 !important;
  }
  .mobile-report-panel .row{gap:4px !important}
  .mobile-report-panel .report-portrait-row{margin-bottom:4px !important}
  .mobile-report-panel .report-portrait{
    width:20px !important;
    height:20px !important;
    font-size:12px !important;
  }
  .mobile-report-panel #reportPlayerCommander,
  .mobile-report-panel #reportEnemyCommander{
    font-size:8px !important;
    margin-bottom:1px !important;
  }
  .mobile-report-panel #reportPlayerArmy,
  .mobile-report-panel #reportEnemyArmy{
    font-size:6px !important;
    line-height:1 !important;
  }
  .mobile-report-panel #reportSummaryText{
    font-size:6px !important;
    line-height:1 !important;
    margin-bottom:3px !important;
  }
  .mobile-report-panel .report-tabs{
    gap:2px !important;
    margin-top:2px !important;
    margin-bottom:2px !important;
  }
  .mobile-report-panel .report-tab{
    padding:3px 4px !important;
    font-size:6px !important;
    border-radius:4px !important;
  }
  .mobile-report-panel #reportTurnLog{
    height:56px !important;
    font-size:6px !important;
    line-height:1 !important;
    padding:4px !important;
  }
}


/* V44 hard reset mobile panels */
#formationOverlay,#reportOverlay,#formationPanel,#reportWindow{display:none !important;pointer-events:none !important}
#formationOverlay.open,#reportOverlay.open,#formationPanel.open,#reportWindow.open{display:block !important;pointer-events:auto !important}
body.army-open #formationDock,
body.report-open 


#formationDock{display:none !important}

#bottomUI{
  /* legacy decorative skin removed — actual nav is #navBar */
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  width:auto;
  height:auto;
  background:none;
  z-index:30;
  pointer-events:none;
  margin:0;
  padding:0;
}

.bottom-btn{
  position:absolute;
  pointer-events:auto;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  margin:0;
  border-radius:50%;
}

/*
  Ordem correta da nova barra inferior:
  1) Items
  2) Fellowship
  3) Commander
  4) Mathom House (ícone maior no fim)
  Ajuste: hotspots desceram para encostar mais no limite inferior real da arte.
*/
#btnItems{
  right:292px;
  bottom:18px;
  width:54px;
  height:54px;
}
#btnFellowship{
  right:220px;
  bottom:20px;
  width:56px;
  height:56px;
}
#btnCommander{
  right:148px;
  bottom:22px;
  width:58px;
  height:58px;
}
#btnMathom{
  right:60px;
  bottom:12px;
  width:78px;
  height:78px;
}

.bottom-btn:hover{ filter:brightness(1.06); }
.bottom-btn:active{ transform:scale(.985); }

@media (max-width: 900px){
  #bottomUI{
    width:auto;
    height:auto;
    right:0;
    bottom:0;
  }

  #btnItems{
    right:56.15%;
    bottom:11.25%;
    width:10.38%;
    height:33.75%;
  }
  #btnFellowship{
    right:42.30%;
    bottom:12.50%;
    width:10.76%;
    height:35.00%;
  }
  #btnCommander{
    right:28.46%;
    bottom:13.75%;
    width:11.15%;
    height:36.25%;
  }
  #btnMathom{
    right:11.53%;
    bottom:7.50%;
    width:15.00%;
    height:48.00%;
  }
}


  #btnItems{
    right:56.15%;
    bottom:23.75%;
    width:10.38%;
    height:33.75%;
  }
  #btnFellowship{
    right:42.30%;
    bottom:25.00%;
    width:10.76%;
    height:35.00%;
  }
  #btnArmy{
    right:28.46%;
    bottom:26.25%;
    width:11.15%;
    height:36.25%;
  }
  #btnCommander{
    right:14.03%;
    bottom:28.75%;
    width:12.30%;
    height:40.00%;
  }
}

}

  #closeFormation,#closeReports{
    position: absolute !important; top: 6px !important; right: 6px !important; z-index: 5001 !important;
    padding: 5px 7px !important; font-size: 10px !important; border-radius: 9px !important; pointer-events: auto !important;
  }
  .mobile-army-panel{padding: 5px !important; display: grid !important; grid-template-rows: auto auto 1fr !important; gap: 4px !important;}
  .mobile-army-panel .army-header{
    display: grid !important; grid-template-columns: 1fr auto !important;
    grid-template-areas:"title close" "capacity capacity" "resources resources" !important;
    gap: 3px !important; margin: 0 !important; align-items: start !important;
  }
  .mobile-army-panel .army-title-wrap{grid-area:title}
  .mobile-army-panel #closeFormation{grid-area:close; position:static !important; justify-self:end}
  .mobile-army-panel .army-title{font-size: 12px !important; margin:0 !important}
  .mobile-army-panel .army-title.small{font-size: 10px !important}
  .mobile-army-panel .army-capacity{grid-area:capacity; padding: 3px 4px !important; gap: 3px !important; border-radius: 7px !important; flex-wrap: wrap !important;}
  .mobile-army-panel .army-capacity-text{font-size: 8px !important}
  .mobile-army-panel .army-capacity-bar{width:100% !important; height:5px !important}
  .mobile-army-panel .army-resources{grid-area:resources; display:grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; gap: 2px !important;}
  .mobile-army-panel .res-chip{min-width:0 !important; padding: 2px 3px !important; font-size: 7px !important; justify-content: center !important;}
  .mobile-army-panel .formation-list,.mobile-army-panel .formation-strip{
    display:grid !important; grid-template-columns: repeat(5, minmax(54px,1fr)) !important; gap: 2px !important;
    overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 2px !important; margin: 0 !important;
  }
  .mobile-army-panel .formation-card{min-height: 48px !important; padding: 3px !important; border-radius: 7px !important;}
  .mobile-army-panel .f-controls{top:3px !important; right:3px !important; gap:2px !important}
  .mobile-army-panel .f-mini{width:14px !important; height:14px !important; font-size:8px !important}
  .mobile-army-panel .f-title{font-size: 7px !important; margin-bottom:1px !important}
  .mobile-army-panel .formation-power{font-size: 9px !important; margin:1px 0 !important}
  .mobile-army-panel .f-sub{font-size: 5px !important; line-height:1 !important}
  .mobile-army-panel .formation-units{gap:2px !important; margin-top:2px !important}
  .mobile-army-panel .formation-unit-chip{font-size: 5px !important; padding:1px !important; border-radius:3px !important}
  .mobile-army-panel .barracks-only-panel{min-height:0 !important; height:auto !important; padding:4px !important; display:grid !important; grid-template-rows:auto 1fr auto !important; gap:4px !important; overflow:hidden !important;}
  .mobile-army-panel .barracks-scene-header{margin:0 !important}
  .mobile-army-panel .hint{font-size:7px !important; line-height:1 !important}
  .mobile-army-panel .barracks-stage{min-height:0 !important; height:auto !important; border-radius:8px !important;}
  .mobile-army-panel .troop-stage-grid{grid-template-columns: repeat(5, minmax(40px,1fr)) !important; gap: 2px !important; padding: 72px 3px 4px 3px !important; overflow-x: auto !important; overflow-y: hidden !important;}
  .mobile-army-panel .troop-card{min-height: 48px !important; padding:0 1px !important}
  .mobile-army-panel .troop-scene-sprite{height: 22px !important; margin-bottom:2px !important}
  .mobile-army-panel .troop-scene-sprite img{width: 18px !important; height:18px !important}
  .mobile-army-panel .troop-card-slider .sliderWrap{grid-template-columns:1fr 16px !important; gap:1px !important}
  .mobile-army-panel .troop-card-slider .sliderLabel{height:12px !important; font-size:6px !important; border-radius:3px !important}
  .mobile-army-panel .troop-detail-bar{grid-template-columns:1fr !important; gap: 3px !important; padding:4px !important; border-radius:7px !important;}
  .mobile-army-panel .troop-detail-left{display:grid !important; grid-template-columns: 22px 1fr !important; gap:4px !important; align-items:center !important;}
  .mobile-army-panel .troop-hero{width:22px !important; height:22px !important; border-radius:5px !important}
  .mobile-army-panel .troop-hero img{width:16px !important; height:16px !important}
  .mobile-army-panel .troop-hero-name{font-size:7px !important; margin-bottom:1px !important; line-height:1 !important}
  .mobile-army-panel #selectedTroopMeta,.mobile-army-panel #selectedTroopCosts,.mobile-army-panel #recruitInfo{font-size:5px !important; line-height:1 !important}
  .mobile-army-panel .sliderWrap.wide{grid-template-columns:1fr 18px !important; gap:2px !important}
  .mobile-army-panel .sliderLabel{height:12px !important; font-size:6px !important}
  .mobile-army-panel .recruit-actions{gap:3px !important}
  .mobile-army-panel .barracksBtn{height: 20px !important; font-size: 6px !important; min-width: 0 !important; flex: 1 !important; padding: 0 4px !important; border-radius: 6px !important;}
  .mobile-report-panel{padding: 4px !important; display:block !important;}
  .mobile-report-panel .report-layout{display:grid !important; grid-template-columns: 1fr !important; grid-template-rows: 42px 1fr !important; gap: 3px !important; height:100% !important;}
  .mobile-report-panel .report-sidebar{display:grid !important; grid-template-rows:auto 1fr !important; gap: 3px !important; padding:4px !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,.08) !important; min-height:0 !important;}
  .mobile-report-panel .report-main{padding: 5px !important; overflow:auto !important; min-height:0 !important;}
  .mobile-report-panel b[style*="font-size:22px"]{font-size:11px !important}
  .mobile-report-panel #reportList{height:20px !important; max-height:20px !important; overflow:auto !important}
  .mobile-report-panel .report{padding:3px 5px !important; margin:0 !important; border-radius:5px !important; font-size:7px !important}
  .mobile-report-panel .report small{display:none !important}
  .mobile-report-panel #reportEmpty{font-size:9px !important; padding:6px !important; min-height:32px !important}
  .mobile-report-panel .report-big-title{font-size:10px !important; line-height:1 !important; margin-bottom:1px !important}
  .mobile-report-panel #reportDetailMeta,.mobile-report-panel #reportDetailCoords{font-size:6px !important; line-height:1 !important}
  .mobile-report-panel .row{gap:3px !important}
  .mobile-report-panel .report-portrait-row{margin-bottom:3px !important}
  .mobile-report-panel .report-portrait{width:16px !important; height:16px !important; font-size:10px !important}
  .mobile-report-panel #reportPlayerCommander,.mobile-report-panel #reportEnemyCommander{font-size:7px !important; margin-bottom:1px !important}
  .mobile-report-panel #reportPlayerArmy,.mobile-report-panel #reportEnemyArmy{font-size:5px !important; line-height:1 !important}
  .mobile-report-panel #reportSummaryText{font-size:5px !important; line-height:1 !important; margin-bottom:2px !important}
  .mobile-report-panel .report-tabs{gap:2px !important; margin-top:2px !important; margin-bottom:2px !important}
  .mobile-report-panel .report-tab{padding:2px 3px !important; font-size:5px !important; border-radius:3px !important}
  .mobile-report-panel #reportTurnLog{height:46px !important; font-size:5px !important; line-height:1 !important; padding:3px !important}
}


/* V50 mobile compact + report split */
body.army-open #formationDock,
body.report-open #formationDock{display:none !important;}

#formationDock,
#formationDock::before,
#formationDock::after,
#formationDock .dockBtn,
#formationDock .dockBtn::before,
#formationDock .dockBtn::after,
#formationDock .dockOrb{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
}
#formationDock{
  position:fixed !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:6px !important;
  width:auto !important;
  padding:0 !important;
  gap:22px !important;
  z-index:3200 !important;
}
#formationDock .dockBtn{
  width:58px !important;
  min-width:58px !important;
  height:50px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:1px !important;
  padding:0 !important;
  color:#ead69b !important;
  touch-action:manipulation !important;
  user-select:none !important;
  cursor:pointer !important;
}
#formationDock .dockImg{
  width:32px !important;
  height:32px !important;
  display:block !important;
  object-fit:contain !important;
  pointer-events:none !important;
}
#formationDock .dockLabel{
  font-size:10px !important;
  line-height:1 !important;
  margin-top:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.6) !important;
  pointer-events:none !important;
}

#formationOverlay,#reportOverlay{z-index:3290 !important;}
#formationPanel,#reportWindow{z-index:3300 !important;}
#closeFormation,#closeReports{pointer-events:auto !important; cursor:pointer !important;}

@media (max-width:900px){
  #formationPanel,#reportWindow{
    position:fixed !important;
    left:6px !important;
    right:6px !important;
    top:6px !important;
    bottom:54px !important;
    width:auto !important;
    height:auto !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }
  #closeFormation,#closeReports{
    position:absolute !important;
    top:4px !important;
    right:4px !important;
    z-index:5002 !important;
    padding:4px 6px !important;
    font-size:9px !important;
    border-radius:8px !important;
  }

  /* Army much smaller */
  .mobile-army-panel{
    padding:4px !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:3px !important;
  }
  .mobile-army-panel .army-header{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:"title close" "capacity capacity" "resources resources" !important;
    gap:2px !important;
    margin:0 !important;
  }
  .mobile-army-panel .army-title-wrap{grid-area:title}
  .mobile-army-panel #closeFormation{grid-area:close; position:static !important; justify-self:end}
  .mobile-army-panel .army-title{font-size:10px !important; margin:0 !important}
  .mobile-army-panel .army-title.small{font-size:8px !important}
  .mobile-army-panel .army-capacity{
    grid-area:capacity;
    padding:2px 3px !important;
    gap:2px !important;
    border-radius:6px !important;
    flex-wrap:wrap !important;
  }
  .mobile-army-panel .army-capacity-icon{font-size:12px !important}
  .mobile-army-panel .army-capacity-text{font-size:7px !important}
  .mobile-army-panel .army-capacity-bar{width:100% !important; height:4px !important}
  .mobile-army-panel .army-resources{
    grid-area:resources;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:2px !important;
  }
  .mobile-army-panel .res-chip{
    min-width:0 !important;
    padding:2px !important;
    font-size:6px !important;
    justify-content:center !important;
    border-radius:5px !important;
  }

  .mobile-army-panel .formation-list,
  .mobile-army-panel .formation-strip{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(46px,1fr)) !important;
    gap:2px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:2px !important;
    margin:0 !important;
  }
  .mobile-army-panel .formation-card{
    min-height:40px !important;
    padding:2px !important;
    border-radius:6px !important;
  }
  .mobile-army-panel .f-controls{top:2px !important;right:2px !important;gap:2px !important}
  .mobile-army-panel .f-mini{width:12px !important;height:12px !important;font-size:7px !important}
  .mobile-army-panel .f-title{font-size:6px !important;margin:0 !important}
  .mobile-army-panel .formation-power{font-size:8px !important;margin:0 !important}
  .mobile-army-panel .f-sub{font-size:4px !important;line-height:1 !important}
  .mobile-army-panel .formation-units{gap:1px !important;margin-top:1px !important}
  .mobile-army-panel .formation-unit-chip{font-size:4px !important;padding:1px !important;border-radius:2px !important}

  .mobile-army-panel .barracks-only-panel{
    min-height:0 !important;
    padding:3px !important;
    display:grid !important;
    grid-template-rows:auto 1fr auto !important;
    gap:3px !important;
    overflow:hidden !important;
  }
  .mobile-army-panel .barracks-scene-header{margin:0 !important}
  .mobile-army-panel .hint{font-size:6px !important;line-height:1 !important}
  .mobile-army-panel .barracks-stage{
    min-height:0 !important;
    border-radius:7px !important;
  }
  .mobile-army-panel .troop-stage-grid{
    grid-template-columns:repeat(5,minmax(32px,1fr)) !important;
    gap:2px !important;
    padding:58px 2px 2px 2px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .mobile-army-panel .troop-card{min-height:36px !important;padding:0 1px !important}
  .mobile-army-panel .troop-scene-sprite{height:16px !important;margin-bottom:1px !important}
  .mobile-army-panel .troop-scene-sprite img{width:14px !important;height:14px !important}
  .mobile-army-panel .troop-card-slider .sliderWrap{grid-template-columns:1fr 14px !important;gap:1px !important}
  .mobile-army-panel .troop-card-slider .sliderLabel{height:10px !important;font-size:5px !important;border-radius:3px !important}
  .mobile-army-panel .troop-detail-bar{
    grid-template-columns:1fr !important;
    gap:2px !important;
    padding:3px !important;
    border-radius:6px !important;
  }
  .mobile-army-panel .troop-detail-left{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    gap:3px !important;
    align-items:center !important;
  }
  .mobile-army-panel .troop-hero{width:18px !important;height:18px !important;border-radius:4px !important}
  .mobile-army-panel .troop-hero img{width:14px !important;height:14px !important}
  .mobile-army-panel .troop-hero-name{font-size:6px !important;line-height:1 !important;margin:0 !important}
  .mobile-army-panel #selectedTroopMeta,
  .mobile-army-panel #selectedTroopCosts,
  .mobile-army-panel #recruitInfo{font-size:4px !important;line-height:1 !important}
  .mobile-army-panel .sliderWrap.wide{grid-template-columns:1fr 14px !important;gap:1px !important}
  .mobile-army-panel .sliderLabel{height:10px !important;font-size:5px !important}
  .mobile-army-panel .recruit-actions{gap:2px !important}
  .mobile-army-panel .barracksBtn{
    height:16px !important;
    font-size:5px !important;
    min-width:0 !important;
    padding:0 3px !important;
    border-radius:5px !important;
  }

  /* Reports 30/70 split */
  .mobile-report-panel{
    padding:4px !important;
    display:block !important;
  }
  .mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:30% 70% !important;
    grid-template-rows:1fr !important;
    gap:3px !important;
    height:100% !important;
  }
  .mobile-report-panel .report-sidebar{
    display:grid !important;
    grid-template-rows:auto 18px 1fr !important;
    gap:3px !important;
    padding:4px !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-bottom:none !important;
    min-height:0 !important;
  }
  .mobile-report-panel .report-main{
    padding:4px !important;
    overflow:auto !important;
    min-height:0 !important;
  }
  .mobile-report-panel b[style*="font-size:22px"]{font-size:9px !important}
  .mobile-report-panel #reportList{
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
  }
  .mobile-report-panel .report{
    padding:3px 4px !important;
    margin-bottom:2px !important;
    border-radius:4px !important;
    font-size:6px !important;
  }
  .mobile-report-panel .report small{
    display:block !important;
    font-size:5px !important;
    line-height:1 !important;
  }
  .mobile-report-panel #reportEmpty{
    font-size:8px !important;
    padding:4px !important;
    min-height:0 !important;
  }
  .mobile-report-panel .report-big-title{font-size:9px !important;line-height:1 !important;margin-bottom:1px !important}
  .mobile-report-panel #reportDetailMeta,
  .mobile-report-panel #reportDetailCoords{font-size:5px !important;line-height:1 !important}
  .mobile-report-panel .row{gap:2px !important}
  .mobile-report-panel .report-portrait-row{margin-bottom:2px !important}
  .mobile-report-panel .report-portrait{width:14px !important;height:14px !important;font-size:8px !important}
  .mobile-report-panel #reportPlayerCommander,
  .mobile-report-panel #reportEnemyCommander{font-size:6px !important;margin-bottom:1px !important}
  .mobile-report-panel #reportPlayerArmy,
  .mobile-report-panel #reportEnemyArmy{font-size:4px !important;line-height:1 !important}
  .mobile-report-panel #reportSummaryText{font-size:4px !important;line-height:1 !important;margin-bottom:2px !important}
  .mobile-report-panel .report-tabs{gap:2px !important;margin-top:2px !important;margin-bottom:2px !important}
  .mobile-report-panel .report-tab{padding:2px 3px !important;font-size:4px !important;border-radius:3px !important}
  .mobile-report-panel #reportTurnLog{height:44px !important;font-size:4px !important;line-height:1 !important;padding:3px !important}
}


/* V51 mobile scale + clickable fix */
@media (max-width:900px){
  #formationPanel,#reportWindow{
    overflow:auto !important;
  }

  .mobile-army-panel{
    zoom:0.58 !important;
    width:172% !important;
    min-height:168% !important;
    transform-origin:top left !important;
  }

  .mobile-report-panel{
    zoom:0.68 !important;
    width:146% !important;
    min-height:146% !important;
    transform-origin:top left !important;
  }

  .mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:30% 70% !important;
    grid-template-rows:1fr !important;
    gap:6px !important;
    height:100% !important;
  }
  .mobile-report-panel .report-sidebar{
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-bottom:none !important;
  }
  .mobile-report-panel .report-main{
    overflow:auto !important;
  }
  .mobile-report-panel #reportList{
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
  }

  #closeFormation,#closeReports,
  #reportList .report,
  #formationList .formation-card,
  #formationList .f-mini,
  #recruitBtn,#dismissBtn,
  #openFormation,#openReports{
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }
}


/* V52 force reports list left, details right */
@media (max-width:900px){
  #reportWindow.mobile-report-panel{
    overflow:hidden !important;
  }
  #reportWindow.mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:30% 70% !important;
    grid-template-rows:1fr !important;
    gap:4px !important;
    height:100% !important;
    align-items:stretch !important;
  }
  #reportWindow.mobile-report-panel .report-sidebar{
    grid-column:1 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:4px !important;
    min-height:0 !important;
    min-width:0 !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-bottom:none !important;
    padding:4px !important;
    overflow:hidden !important;
  }
  #reportWindow.mobile-report-panel .report-main{
    grid-column:2 !important;
    grid-row:1 !important;
    min-height:0 !important;
    min-width:0 !important;
    padding:4px !important;
    overflow:auto !important;
  }
  #reportWindow.mobile-report-panel #reportList{
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    height:100% !important;
    max-height:none !important;
    overflow:auto !important;
    min-height:0 !important;
  }
  #reportWindow.mobile-report-panel .report{
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:4px !important;
    border-radius:4px !important;
    font-size:6px !important;
  }
  #reportWindow.mobile-report-panel .report small{
    display:block !important;
    font-size:5px !important;
    line-height:1 !important;
  }
  #reportWindow.mobile-report-panel #reportEmpty{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:100% !important;
    font-size:8px !important;
    padding:4px !important;
    text-align:center !important;
  }
  #reportWindow.mobile-report-panel #reportDetail{
    display:block !important;
    min-height:0 !important;
  }
}


/* V53 report detail viewport fix + final compact mobile */
@media (max-width:900px){
  #reportWindow.mobile-report-panel{
    overflow:hidden !important;
  }
  #reportWindow.mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:30% 70% !important;
    grid-template-rows:1fr !important;
    gap:4px !important;
    height:100% !important;
    align-items:stretch !important;
  }
  #reportWindow.mobile-report-panel .report-sidebar{
    grid-column:1 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:4px !important;
    min-height:0 !important;
    min-width:0 !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-bottom:none !important;
    padding:4px !important;
    overflow:hidden !important;
  }
  #reportWindow.mobile-report-panel .report-main{
    grid-column:2 !important;
    grid-row:1 !important;
    min-height:0 !important;
    min-width:0 !important;
    padding:4px !important;
    overflow:hidden !important;
    position:relative !important;
  }
  #reportWindow.mobile-report-panel #reportList{
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    height:100% !important;
    max-height:none !important;
    overflow:auto !important;
    min-height:0 !important;
  }
  #reportWindow.mobile-report-panel #reportDetail{
    display:block !important;
    height:100% !important;
    min-height:0 !important;
    overflow:auto !important;
    position:relative !important;
  }
  #reportWindow.mobile-report-panel #reportEmpty{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:8px !important;
    padding:4px !important;
    text-align:center !important;
    z-index:2 !important;
    background:transparent !important;
    pointer-events:none !important;
  }
}


/* V54 mobile army scale + robust report split */
@media (max-width:900px){
  /* make army actually fit */
  #formationPanel.mobile-army-panel{
    overflow:auto !important;
  }
  #formationPanel.mobile-army-panel{
    zoom:0.42 !important;
    width:238% !important;
    min-height:238% !important;
    transform-origin:top left !important;
  }

  /* reports must remain split */
  #reportWindow.mobile-report-panel{
    overflow:hidden !important;
  }
  #reportWindow.mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:30% 70% !important;
    grid-template-rows:1fr !important;
    gap:4px !important;
    height:100% !important;
    align-items:stretch !important;
  }
  #reportWindow.mobile-report-panel .report-sidebar{
    grid-column:1 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:4px !important;
    min-height:0 !important;
    min-width:0 !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    border-bottom:none !important;
    padding:4px !important;
    overflow:hidden !important;
  }
  #reportWindow.mobile-report-panel .report-main{
    grid-column:2 !important;
    grid-row:1 !important;
    min-height:0 !important;
    min-width:0 !important;
    padding:4px !important;
    overflow:hidden !important;
    position:relative !important;
  }
  #reportWindow.mobile-report-panel #reportList{
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    height:100% !important;
    max-height:none !important;
    overflow:auto !important;
    min-height:0 !important;
  }
  #reportWindow.mobile-report-panel .report{
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    padding:4px !important;
    border-radius:4px !important;
    font-size:6px !important;
  }
  #reportWindow.mobile-report-panel .report small{
    display:block !important;
    font-size:5px !important;
    line-height:1 !important;
  }
  #reportWindow.mobile-report-panel #reportDetail{
    display:block !important;
    height:100% !important;
    min-height:0 !important;
    overflow:auto !important;
    position:relative !important;
  }
  #reportWindow.mobile-report-panel.has-selection #reportEmpty{
    display:none !important;
  }
  #reportWindow.mobile-report-panel #reportEmpty{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:8px !important;
    padding:4px !important;
    text-align:center !important;
    z-index:1 !important;
    background:transparent !important;
    pointer-events:none !important;
  }
}


/* V56 full-page menu mode */
body.army-open canvas,
body.army-open #actionMenu,
body.army-open #unitMenu,
body.army-open #battleFeet,
body.army-open #formationDock,
body.report-open canvas,
body.report-open #actionMenu,
body.report-open #unitMenu,
body.report-open #battleFeet,
body.report-open #formationDock{
  visibility:hidden !important;
  pointer-events:none !important;
}

body.army-open #formationPanel,
body.report-open #reportWindow{
  display:block !important;
  pointer-events:auto !important;
}

body.army-open #formationPanel{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  transform:none !important;
  border-radius:0 !important;
  z-index:5000 !important;
  overflow:auto !important;
}

body.report-open #reportWindow{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  transform:none !important;
  border-radius:0 !important;
  z-index:5000 !important;
  overflow:hidden !important;
}

body.army-open #formationOverlay,