html,body{margin:0;height:100%;overflow:hidden;background:#000}
body{font-family:Georgia,serif}
#hud{position:absolute;top:10px;left:10px;z-index:20;color:#fff;background:rgba(8,20,28,.78);border:1px solid rgba(195,164,97,.7);padding:10px 12px;line-height:1.35}
.panel{position:absolute;z-index:21;color:#e8e1c5;background:linear-gradient(180deg, rgba(20,36,48,.96), rgba(8,16,22,.96));border:1px solid rgba(195,164,97,.55);box-shadow:0 8px 18px rgba(0,0,0,.35)}
#battleFeet{display:none;padding:6px 8px;border-radius:8px;font-size:11px;pointer-events:none}
#battleFeet .bar{height:5px;background:rgba(255,255,255,.10);border-radius:4px;overflow:hidden;margin-top:3px}
#battleFeet .fill{height:100%;background:linear-gradient(90deg,#8bc34a,#d6d46a);width:0%}
#actionMenu{position:absolute;z-index:30;display:none;gap:10px;flex-direction:column;pointer-events:auto}
.action-btn{display:flex;align-items:center;gap:12px;min-width:240px;height:54px;padding:0 18px 0 14px;color:#e8e1c5;font-family:Georgia,serif;font-size:22px;background:linear-gradient(90deg, rgba(24,41,54,.96), rgba(18,32,44,.96));border:1px solid rgba(195,164,97,.55);clip-path:polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 7% 50%);box-shadow:0 6px 14px rgba(0,0,0,.28);cursor:pointer;user-select:none}
.action-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#e4c96e,#b78a2b);border:1px solid rgba(250,221,124,.55);color:#2b1d04;font-size:22px;font-weight:bold;box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.25)}
.action-mini{position:absolute;width:42px;height:42px;border-radius:50%;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,#c94c43,#88251f);border:1px solid rgba(255,180,180,.38);color:#fff4f4;font-size:22px;box-shadow:0 5px 12px rgba(0,0,0,.3);cursor:pointer;user-select:none;z-index:31}
#unitMenu{position:absolute;z-index:32;display:none;gap:10px;flex-direction:column}
#formationDock{left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:10px;padding:8px 12px;border-radius:12px}
#formationDock .dockBtn{padding:12px 18px;background:linear-gradient(180deg,#d3b36a,#8f6d2b);color:#211605;border:1px solid rgba(255,230,160,.45);cursor:pointer;border-radius:10px;font-weight:bold}
#formationPanel{display:none;left:50%;transform:translateX(-50%);bottom:84px;width:760px;padding:14px;border-radius:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.slot{padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04)}
.slot h4{margin:0 0 8px 0}
.slot input,.slot select,#commanderSelect,#guardStatus{width:100%;padding:8px;background:#13232d;color:#eee;border:1px solid rgba(195,164,97,.35);border-radius:8px}
.row{display:flex;gap:10px;align-items:center}
.report{padding:10px;margin-bottom:8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer}.report.active{outline:1px solid rgba(226,196,123,.85);background:rgba(226,196,123,.08)}
.win{border-left:4px solid #6ed97a}.loss{border-left:4px solid #d96666}.draw{border-left:4px solid #d9c666}
#toast{position:absolute;right:16px;bottom:16px;z-index:40;color:#fff;background:rgba(0,0,0,.75);padding:10px 12px;border-radius:10px;display:none}
small{color:#d8d3bc}

.formation-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.formation-card{position:relative;min-height:128px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.04);padding:12px;cursor:pointer;user-select:none;overflow:hidden}
.formation-card.active{outline:1px solid rgba(226,196,123,.85);background:rgba(226,196,123,.08)}
.formation-card.empty{display:flex;align-items:center;justify-content:center;font-size:42px;color:#d8c174}
.formation-card .f-title{font-size:18px;margin-bottom:8px}
.formation-card .f-sub{font-size:13px;color:#cfc7ad;line-height:1.35}
.f-controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:4}
.f-mini{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#d3b36a,#8f6d2b);color:#211605;border:1px solid rgba(255,230,160,.45);cursor:pointer}
.f-mini.delete{background:linear-gradient(180deg,#c94c43,#88251f);color:#fff}
.formation-power{font-size:28px;color:#e0c471;margin:6px 0}
.formation-units{display:flex;gap:6px;margin-top:8px}
.formation-unit-chip{flex:1;padding:4px 6px;border-radius:8px;background:rgba(255,255,255,.06);font-size:12px;text-align:center}
.formation-editor{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;background:rgba(255,255,255,.03)}
.formation-battle-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
.formation-commander-card{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:12px}
.formation-portrait{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#36505d,#15252e);font-size:30px;border:1px solid rgba(255,255,255,.12)}
.formation-slot-block{padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.04);margin-bottom:10px}
.slot-header{font-size:16px;margin-bottom:8px}
.troop-row{display:grid;grid-template-columns:1fr 120px;gap:10px}
.formation-preview-title,.formation-available-title{font-size:18px;margin-bottom:10px}
.formation-preview-stage{position:relative;min-height:260px;border-radius:14px;background:radial-gradient(circle at center, rgba(178,146,74,.14), rgba(14,24,31,.96) 62%);border:1px solid rgba(195,164,97,.20);overflow:hidden;margin-bottom:14px}
.preview-unit{position:absolute;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(31,52,64,.95),rgba(16,28,36,.95));border:1px solid rgba(195,164,97,.28);text-align:center;width:140px}
.preview-unit.commander{top:20px;right:20px}
.preview-unit.slot-a{left:26px;bottom:34px}
.preview-unit.slot-b{left:190px;bottom:94px}
.preview-unit.slot-c{right:26px;bottom:34px}
.preview-icon{width:54px;height:54px;border-radius:50%;margin:0 auto 8px auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1f4354,#10212b);border:1px solid rgba(255,255,255,.10)}
.preview-name{font-size:14px;margin-bottom:4px}
.preview-qty{font-size:20px;color:#e0c471}
.available-troops{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.available-chip{padding:10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-align:center}
.available-chip b{display:block;margin-bottom:4px}
.ui-stop{position:relative;z-index:80}
.report-portrait-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.report-portrait{width:72px;height:72px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#36505d,#15252e);font-size:30px;border:1px solid rgba(255,255,255,.10)}
.report-tabs{display:flex;gap:4px;margin-top:12px}
.report-tab{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);cursor:pointer}
.report-tab.active{background:rgba(226,196,123,.12);border-color:rgba(226,196,123,.45)}
.report-body{display:none}
.report-body.active{display:block}


.reportCloseBtn{padding:10px 14px;background:linear-gradient(180deg,#c94c43,#88251f);color:#fff4f4;border:1px solid rgba(255,180,180,.38);cursor:pointer;border-radius:10px;font-weight:bold}
.reportCloseBtn:hover{filter:brightness(1.05)}


#formationDock{z-index:120 !important; pointer-events:auto !important}
#formationDock .dockBtn{pointer-events:auto !important; position:relative; z-index:121 !important}
#reportWindow,#reportOverlay,#formationPanel{pointer-events:auto !important}



#formationOverlay{pointer-events:auto !important}
#formationPanel{
  display:none; left:0; top:0; right:0; bottom:0; width:auto; height:auto; transform:none;
  z-index:319 !important; padding:18px 20px 16px 20px; box-sizing:border-box;
  background:
    radial-gradient(circle at center, rgba(180,147,79,.10), rgba(18,28,36,.96) 38%),
    linear-gradient(180deg, rgba(17,31,43,.98), rgba(7,14,21,.98));
}
.army-header{display:grid;grid-template-columns:1.2fr 1fr auto;gap:16px;align-items:center;margin-bottom:14px}
.army-title-wrap{display:flex;align-items:center;gap:18px}
.army-title{font-size:34px;color:#e0c471;letter-spacing:.4px}
.army-title.small{font-size:28px}
.army-capacity{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(195,164,97,.25);padding:10px 14px;border-radius:12px}
.army-capacity-icon{font-size:26px}
.army-capacity-text{font-size:18px}
.army-capacity-bar{width:240px;height:12px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.army-capacity-bar div{height:100%;width:0%;background:linear-gradient(90deg,#5e7bdb,#6fd7a9,#d1cf62)}
.army-resources{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.res-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(195,164,97,.24);font-size:16px}
.formation-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.formation-card{min-height:118px;border-radius:16px;border:1px solid rgba(195,164,97,.22);background:linear-gradient(180deg, rgba(11,27,38,.95), rgba(7,18,26,.95));padding:14px;position:relative;cursor:pointer}
.formation-card.empty{display:flex;align-items:center;justify-content:center;font-size:44px;color:#e0c471}
.formation-card.active{outline:2px solid rgba(224,196,113,.65);box-shadow:0 0 0 2px rgba(0,0,0,.25) inset}
.f-controls{position:absolute;top:10px;right:10px;display:flex;gap:8px}
.f-mini{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#d3b36a,#8f6d2b);border:1px solid rgba(255,230,160,.40);color:#2b1d04;font-weight:bold}
.f-mini.delete{background:linear-gradient(180deg,#c94c43,#88251f);color:#fff}
.f-title{font-size:22px;margin-bottom:8px}
.formation-power{font-size:34px;color:#e0c471}
.f-sub{font-size:13px;color:#d7cfb5;line-height:1.35}
.formation-units{display:flex;gap:8px;margin-top:10px}
.formation-unit-chip{flex:1;padding:6px 4px;border-radius:10px;background:rgba(255,255,255,.05);text-align:center;font-size:12px}
.barracks-only-panel{border-radius:18px;border:1px solid rgba(195,164,97,.20);background:
 linear-gradient(180deg, rgba(12,24,35,.78), rgba(8,16,24,.90)),
 radial-gradient(circle at center, rgba(255,255,255,.06), rgba(0,0,0,0) 70%);
 padding:18px; height:calc(100% - 190px); overflow:auto; position:relative}
.barracks-scene-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.troop-scene-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:18px}

.troop-card{
  padding:8px 8px 12px 8px;
  border-radius:14px;
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:210px;
  position:relative;
  overflow:visible;
  box-shadow:none;
}
.troop-card.active{
  outline:none;
  box-shadow:none;
}
.troop-card.active .troop-scene-sprite{
  filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 16px rgba(224,196,113,.35));
}
.troop-scene-sprite{
  height:120px;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-size:72px;
  line-height:1;
  margin-bottom:8px;
  background:transparent;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.28));
  transform: translateY(0);
}
.troop-card-name{
  font-size:18px;
  color:#e8e1c5;
  text-align:center;
  line-height:1.05;
  margin-bottom:4px;
}
.troop-card-meta{
  font-size:12px;
  color:#d7cfb5;
  line-height:1.35;
  text-align:center;
  margin-top:2px;
  margin-bottom:8px;
}
.troop-card-slider{
  width:100%;
  margin-top:auto;
  padding-top:6px;
}

.sliderWrap{display:grid;grid-template-columns:1fr 70px;gap:8px;align-items:center}
.sliderWrap.wide{grid-template-columns:1fr 90px}
.troopSlider{width:100%}
.sliderLabel{height:38px;border-radius:10px;background:#13232d;color:#eee;border:1px solid rgba(195,164,97,.35);display:flex;align-items:center;justify-content:center}
.troop-detail-bar{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:center;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:16px;position:sticky;bottom:0}
.troop-detail-left{display:flex;gap:14px;align-items:center}
.troop-hero{width:108px;height:108px;border-radius:20px;background:linear-gradient(180deg,#223e4d,#101d25);border:1px solid rgba(195,164,97,.28);display:flex;align-items:center;justify-content:center;font-size:56px}
.troop-hero-name{font-size:28px;color:#e0c471;margin-bottom:6px}
.recruit-actions{display:flex;gap:12px;justify-content:flex-end}
.barracksBtn{min-width:150px;height:52px;border-radius:999px;border:1px solid rgba(195,164,97,.28);font-family:Georgia,serif;font-size:20px;cursor:pointer}
.barracksBtn.recruit{background:linear-gradient(180deg,#d3b36a,#8f6d2b);color:#211605}
.barracksBtn.dismiss{background:linear-gradient(180deg,#405766,#20323d);color:#f2ead1}
.reportCloseBtn{padding:10px 14px;background:linear-gradient(180deg,#c94c43,#88251f);color:#fff4f4;border:1px solid rgba(255,180,180,.38);cursor:pointer;border-radius:10px;font-weight:bold}
#closeFormation,#closeReports{pointer-events:auto !important; position:relative; z-index:1001 !important}
#formationPanel,#reportWindow{pointer-events:auto !important}
#formationOverlay,#reportOverlay{pointer-events:auto !important}

#formationPanel,#reportWindow{pointer-events:auto !important}
#formationOverlay,#reportOverlay{pointer-events:auto !important}


.barracks-only-panel{
  border-radius:18px;border:1px solid rgba(195,164,97,.20);
  background:linear-gradient(180deg, rgba(12,24,35,.72), rgba(8,16,24,.90));
  padding:18px; height:calc(100% - 190px); overflow:auto; position:relative
}
.barracks-stage{
  position:relative;
  min-height:520px;
  border-radius:22px;
  overflow:hidden;
  margin-bottom:18px;
  border:1px solid rgba(195,164,97,.18);
  background:
    linear-gradient(180deg, rgba(139,165,188,.18), rgba(22,26,31,.08) 35%, rgba(54,50,33,.14) 36%, rgba(32,33,22,.15) 100%),
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.16), rgba(255,255,255,0) 38%);
}
.barracks-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(102,120,136,.22), rgba(45,50,56,.08) 36%, rgba(129,115,85,.14) 37%, rgba(68,58,40,.18) 100%);
}
.wall-line{
  position:absolute; left:0; right:0; top:96px; height:120px;
  background:
    linear-gradient(180deg, rgba(163,170,173,.85), rgba(111,118,122,.88)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 14px, rgba(255,255,255,.05) 14px 28px);
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.22), inset 0 10px 18px rgba(255,255,255,.08);
}
.tower{ display:none;
  position:absolute; top:34px; width:78px; height:148px; border-radius:12px 12px 6px 6px;
  background:linear-gradient(180deg, rgba(170,175,179,.92), rgba(122,127,133,.94));
  box-shadow: inset 0 -12px 16px rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.14);
}
.tower:before{
  content:""; position:absolute; left:-10px; right:-10px; top:-18px; height:30px;
  background:linear-gradient(180deg, #5d4832, #3c2b1c); clip-path:polygon(0 100%,8% 18%,18% 0,28% 18%,38% 0,48% 18%,58% 0,68% 18%,78% 0,88% 18%,100% 100%);
  border-radius:8px;
}
.t1{left:8%}.t2{left:28%}.t3{right:28%}.t4{right:8%}
.yard-shadow{
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background:radial-gradient(circle at 50% 85%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
}
.troop-stage-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  padding:170px 24px 30px 24px;
  align-items:end;
}

.troop-card{
  padding:8px 8px 12px 8px;
  border-radius:14px;
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:210px;
  position:relative;
  overflow:visible;
  box-shadow:none;
}
.troop-card.active{
  outline:none;
  box-shadow:none;
}
.troop-card.active .troop-scene-sprite{
  filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 16px rgba(224,196,113,.35));
}
.troop-scene-sprite{
  height:120px;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-size:72px;
  line-height:1;
  margin-bottom:8px;
  background:transparent;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.28));
  transform: translateY(0);
}
.troop-card-name{
  font-size:18px;
  color:#e8e1c5;
  text-align:center;
  line-height:1.05;
  margin-bottom:4px;
}
.troop-card-meta{
  font-size:12px;
  color:#d7cfb5;
  line-height:1.35;
  text-align:center;
  margin-top:2px;
  margin-bottom:8px;
}
.troop-card-slider{
  width:100%;
  margin-top:auto;
  padding-top:6px;
}

.troop-detail-bar{
  display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:center;
  border-radius:16px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);padding:16px;position:sticky;bottom:0;
  backdrop-filter: blur(6px);
}
@media (max-width: 1200px){
  .troop-stage-grid{grid-template-columns:repeat(3,1fr)}
}


#closeFormation{
  pointer-events:auto !important;
  position:relative;
  z-index:1200 !important;
}
#formationPanel{
  pointer-events:auto !important;
}
#formationOverlay{
  pointer-events:auto !important;
}


#closeFormation{
  pointer-events:auto !important;
  position:relative !important;
  z-index:5000 !important;
}
#formationPanel{
  z-index:319 !important;
}
#formationPanel *{
  pointer-events:auto;
}


#formationOverlay,#reportOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:1200 !important;
  background:rgba(0,0,0,.45) !important;
}
#formationPanel,#reportWindow{
  position:fixed !important;
  inset:18px !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
  margin:0 !important;
  left:18px !important;
  top:18px !important;
  right:18px !important;
  bottom:18px !important;
  z-index:1201 !important;
  overflow:hidden !important;
}
#formationPanel{display:none}
#reportWindow{display:none}
#closeFormation,#closeReports{
  pointer-events:auto !important;
  position:relative !important;
  z-index:99999 !important;
}
.barracks-only-panel{
  height:calc(100% - 170px) !important;
}


.troop-stage-grid{
  position:relative;
  z-index:2;
}
.troop-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-height:220px !important;
  padding:6px 8px 10px 8px !important;
}
.troop-card.active{
  outline:none !important;
  box-shadow:none !important;
}
.troop-scene-sprite{
  height:132px !important;
  width:100% !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  margin-bottom:10px !important;
  background:transparent !important;
}
.troop-scene-sprite img{
  width:96px !important;
  height:96px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.30));
}
.troop-card-name,
.troop-card-meta{
  display:none !important;
}
.troop-card-slider{
  width:100% !important;
  margin-top:auto !important;
  padding-top:0 !important;
}
.troop-card-slider .sliderWrap{
  grid-template-columns:1fr 58px !important;
  gap:8px !important;
}
.troop-card-slider .sliderLabel{
  height:34px !important;
  font-size:13px !important;
}
.barracks-stage{
  background:
    linear-gradient(180deg, rgba(77,101,130,.35), rgba(31,41,53,.14) 34%, rgba(122,112,84,.10) 35%, rgba(59,54,37,.16) 100%) !important;
}
.barracks-bg{
  background:
    linear-gradient(180deg, rgba(94,118,144,.26), rgba(38,45,56,.10) 36%, rgba(143,132,103,.12) 37%, rgba(78,68,45,.20) 100%) !important;
}


#closeFormation{
  position:relative !important;
  z-index:999999 !important;
  pointer-events:auto !important;
}
#formationPanel{
  z-index:1201 !important;
}
#formationOverlay{
  z-index:1200 !important;
}
.barracks-stage{
  min-height:420px !important;
  background:
    linear-gradient(180deg, rgba(120,160,210,.35), rgba(120,160,210,.18) 26%, rgba(220,223,228,.10) 27%, rgba(220,223,228,.06) 100%),
    radial-gradient(circle at center, rgba(255,255,255,.08), rgba(255,255,255,0) 60%) !important;
}
.barracks-bg{
  background:
    linear-gradient(180deg, rgba(100,140,196,.30), rgba(66,82,103,.16) 32%, rgba(231,234,239,.04) 33%, rgba(120,124,133,.08) 100%) !important;
}
.wall-line{
  opacity:.88 !important;
}
.tower{ display:none;
  opacity:.92 !important;
}
.troop-stage-grid{
  background:transparent !important;
  padding:178px 26px 18px 26px !important;
}
.troop-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-height:180px !important;
  padding:0 6px 0 6px !important;
}
.troop-card.active{
  outline:none !important;
  box-shadow:none !important;
}
.troop-scene-sprite{
  height:94px !important;
  margin-bottom:14px !important;
}
.troop-scene-sprite img{
  width:78px !important;
  height:78px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.24)) !important;
}
.troop-card-slider{
  width:100% !important;
  padding-top:0 !important;
}
.troop-card-slider .sliderWrap{
  grid-template-columns:1fr 52px !important;
}
.troop-card-slider .sliderLabel{
  height:30px !important;
  font-size:12px !important;
  background:rgba(28,49,67,.88) !important;
}


/* V37.2 functional barracks */
#formationOverlay,#reportOverlay{position:fixed !important; inset:0 !important;}
#formationPanel,#reportWindow{
  position:fixed !important; inset:18px !important;
  width:auto !important; height:auto !important; max-width:none !important; max-height:none !important;
  left:18px !important; top:18px !important; right:18px !important; bottom:18px !important;
  transform:none !important; margin:0 !important;
}
#formationPanel{display:none; z-index:1201 !important}
#formationOverlay{display:none; z-index:1200 !important; background:rgba(0,0,0,.42) !important}
#closeFormation{position:absolute !important; right:22px !important; top:18px !important; z-index:99999 !important; pointer-events:auto !important;}
.barracks-only-panel{height:calc(100% - 168px) !important; background:linear-gradient(180deg, rgba(8,15,22,.92), rgba(8,15,22,.94)) !important;}
.barracks-stage{min-height:430px !important; border-radius:20px !important; overflow:hidden !important; border:1px solid rgba(195,164,97,.18) !important; background:url('../textures/exercito.png') center/cover no-repeat !important;}
.barracks-bg,.tower,.wall-line,.yard-shadow{display:none !important}
.troop-stage-grid{background:transparent !important; padding:260px 34px 24px 34px !important; align-items:end !important;}
.troop-card{background:transparent !important; border:none !important; box-shadow:none !important; min-height:140px !important; padding:0 8px !important;}
.troop-card.active .troop-scene-sprite img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.30)) drop-shadow(0 0 10px rgba(224,196,113,.35)) !important;}
.troop-scene-sprite{height:78px !important; margin-bottom:12px !important; background:transparent !important;}
.troop-scene-sprite img{width:72px !important; height:72px !important; object-fit:contain !important; display:block !important; filter:drop-shadow(0 10px 12px rgba(0,0,0,.28)) !important;}
.troop-card-name,.troop-card-meta{display:none !important}
.troop-card-slider .sliderWrap{grid-template-columns:1fr 54px !important}
.troop-card-slider .sliderLabel{height:28px !important; font-size:12px !important; background:rgba(27,48,67,.88) !important;}
.troop-detail-bar{backdrop-filter:blur(6px) !important; background:rgba(57,82,109,.30) !important;}


/* V38 mobile responsive */
*{box-sizing:border-box}
canvas{touch-action:none}
#rotateDeviceNotice{
  display:none;
  position:fixed;
  inset:0;
  z-index:5000;
  background:rgba(5,10,15,.96);
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}
.rotate-card{
  max-width:320px;
  border:1px solid rgba(195,164,97,.5);
  background:linear-gradient(180deg, rgba(20,36,48,.98), rgba(8,16,22,.98));
  color:#e8e1c5;
  border-radius:18px;
  padding:22px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.rotate-icon{font-size:40px;margin-bottom:12px}
.rotate-title{font-size:24px;color:#e0c471;margin-bottom:8px}
.rotate-text{font-size:16px;line-height:1.4}
@media (max-width: 900px){
  #hud{
    top:8px; left:8px; right:8px;
    max-width:calc(100vw - 16px);
    font-size:12px;
    line-height:1.2;
    padding:8px 10px;
  }
  #formationDock{
    left:50%;
    transform:translateX(-50%);
    bottom:10px;
    width:calc(100vw - 16px);
    justify-content:center;
    gap:8px;
    padding:6px 8px;
  }
  #formationDock .dockBtn{
    flex:1;
    min-width:0;
    padding:12px 10px;
    font-size:14px;
  }
  #actionMenu,#unitMenu{
    transform-origin:top left;
    scale:.82;
  }
  .action-btn{
    min-width:196px;
    height:48px;
    font-size:18px;
  }
  .action-icon{
    width:36px;height:36px;font-size:18px;
  }
  #battleFeet{
    font-size:10px;
    padding:5px 7px;
  }
  #toast{
    left:8px;
    right:8px;
    bottom:70px;
    text-align:center;
  }
  #formationPanel,#reportWindow{
    inset:8px !important;
    left:8px !important;
    right:8px !important;
    top:8px !important;
    bottom:8px !important;
    border-radius:12px !important;
  }
  .army-header{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding-right:84px;
  }
  .army-title{font-size:24px !important}
  .army-title.small{font-size:20px !important}
  .army-capacity{
    flex-wrap:wrap;
    gap:8px;
  }
  .army-capacity-bar{
    width:100% !important;
  }
  .army-resources{
    justify-content:flex-start !important;
    gap:6px !important;
  }
  .res-chip{
    font-size:12px !important;
    padding:6px 8px !important;
  }
  #closeFormation,#closeReports{
    right:10px !important;
    top:10px !important;
    font-size:13px !important;
    padding:8px 10px !important;
  }
  .formation-strip{
    grid-template-columns:repeat(5, minmax(110px, 1fr)) !important;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
    gap:8px !important;
  }
  .formation-card{
    min-height:106px !important;
    padding:10px !important;
  }
  .barracks-only-panel{
    height:calc(100% - 150px) !important;
    padding:10px !important;
  }
  .barracks-stage{
    min-height:280px !important;
  }
  .troop-stage-grid{
    grid-template-columns:repeat(5, minmax(90px, 1fr)) !important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px !important;
    padding:190px 12px 14px 12px !important;
  }
  .troop-card{
    min-height:120px !important;
  }
  .troop-scene-sprite{
    height:62px !important;
    margin-bottom:8px !important;
  }
  .troop-scene-sprite img{
    width:56px !important;
    height:56px !important;
  }
  .troop-card-slider .sliderWrap{
    grid-template-columns:1fr 42px !important;
    gap:6px !important;
  }
  .troop-card-slider .sliderLabel{
    height:24px !important;
    font-size:11px !important;
  }
  .troop-detail-bar{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:12px !important;
  }
  .troop-detail-left{
    gap:10px !important;
  }
  .troop-hero{
    width:72px !important;
    height:72px !important;
  }
  .troop-hero img{
    width:64px !important;
    height:64px !important;
  }
  .troop-hero-name{
    font-size:22px !important;
  }
  .recruit-actions{
    justify-content:stretch !important;
  }
  .barracksBtn{
    flex:1;
    min-width:0 !important;
    height:46px !important;
    font-size:16px !important;
  }
}


/* V39 mobile bottom nav + responsive panels */
#formationDock{
  display:flex;
  align-items:center;
}
#formationDock .dockBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  line-height:1;
}
#formationDock .dockBtn span{
  font-size:14px;
}
#formationDock .dockBtn{
  font-size:24px;
}
#reportWindow, #formationPanel{
  overflow:hidden !important;
}
#reportWindow .report-layout{
  height:100%;
}
#reportList{
  overflow:auto;
}
#reportDetail{
  overflow:auto;
}
@media (max-width: 900px){
  #hud{
    top:8px; left:8px; right:8px;
    max-width:calc(100vw - 16px);
    font-size:11px;
    padding:8px 10px;
    line-height:1.18;
  }
  #formationDock{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    transform:none !important;
    width:100vw !important;
    border-radius:16px 16px 0 0 !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) 10px !important;
    background:linear-gradient(180deg, rgba(10,23,34,.98), rgba(7,14,22,.99)) !important;
    border-top:1px solid rgba(195,164,97,.55) !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:none !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.35) !important;
    gap:10px !important;
    justify-content:space-evenly !important;
  }
  #formationDock .dockBtn{
    flex:1 1 0 !important;
    min-width:0 !important;
    height:58px !important;
    padding:6px 8px !important;
    border-radius:14px !important;
    font-size:24px !important;
    background:linear-gradient(180deg,#d3b36a,#8f6d2b) !important;
    color:#211605 !important;
  }
  #formationDock .dockBtn span{
    font-size:13px !important;
    font-weight:bold !important;
  }
  #toast{
    bottom:78px !important;
  }
  #formationPanel, #reportWindow{
    inset:8px 8px 76px 8px !important;
    left:8px !important;
    right:8px !important;
    top:8px !important;
    bottom:76px !important;
    border-radius:12px !important;
  }
  #closeFormation, #closeReports{
    top:8px !important;
    right:8px !important;
    padding:8px 10px !important;
    font-size:12px !important;
  }

  /* formations mobile */
  .army-header{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    align-items:start !important;
    margin-bottom:8px !important;
    padding-right:0 !important;
  }
  .army-title-wrap{
    display:block !important;
  }
  .army-title{
    font-size:22px !important;
    margin-bottom:6px !important;
  }
  .army-capacity{
    padding:8px 10px !important;
    gap:6px !important;
    flex-wrap:wrap !important;
  }
  .army-capacity-text{
    font-size:14px !important;
  }
  .army-capacity-bar{
    width:100% !important;
    height:10px !important;
  }
  .army-resources{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
    gap:5px !important;
  }
  .res-chip{
    font-size:11px !important;
    padding:5px 7px !important;
  }
  .formation-strip{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(94px, 1fr)) !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:4px !important;
    margin-bottom:8px !important;
  }
  .formation-card{
    min-height:94px !important;
    padding:8px !important;
    border-radius:10px !important;
  }
  .f-title{
    font-size:16px !important;
    margin-bottom:5px !important;
  }
  .formation-power{
    font-size:22px !important;
  }
  .f-sub{
    font-size:10px !important;
  }
  .formation-unit-chip{
    font-size:10px !important;
    padding:4px 2px !important;
  }
  .barracks-only-panel{
    height:calc(100% - 120px) !important;
    padding:8px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .barracks-scene-header{
    margin-bottom:6px !important;
    gap:6px !important;
  }
  .hint{
    font-size:11px !important;
    line-height:1.2 !important;
  }
  .barracks-stage{
    min-height:220px !important;
    flex:1 1 auto !important;
  }
  .troop-stage-grid{
    grid-template-columns:repeat(5, minmax(72px, 1fr)) !important;
    gap:4px !important;
    padding:136px 8px 10px 8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .troop-card{
    min-height:96px !important;
    padding:0 4px !important;
  }
  .troop-scene-sprite{
    height:48px !important;
    margin-bottom:8px !important;
  }
  .troop-scene-sprite img{
    width:44px !important;
    height:44px !important;
  }
  .troop-card-slider .sliderWrap{
    grid-template-columns:1fr 36px !important;
    gap:4px !important;
  }
  .troop-card-slider .sliderLabel{
    height:22px !important;
    font-size:10px !important;
    border-radius:6px !important;
  }
  .troop-detail-bar{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:8px !important;
    margin-top:8px !important;
  }
  .troop-detail-left{
    display:grid !important;
    grid-template-columns:56px 1fr !important;
    gap:8px !important;
    align-items:center !important;
  }
  .troop-hero{
    width:56px !important;
    height:56px !important;
    border-radius:12px !important;
  }
  .troop-hero-name{
    font-size:18px !important;
    line-height:1.05 !important;
  }
  .sliderWrap.wide{
    grid-template-columns:1fr 46px !important;
  }
  .recruit-actions{
    gap:8px !important;
  }
  .barracksBtn{
    min-width:0 !important;
    flex:1 !important;
    height:42px !important;
    font-size:15px !important;
  }

  /* reports mobile: fit without cutting */
  #reportWindow{
    padding:8px !important;
  }
  #reportWindow .report-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr !important;
    gap:8px !important;
    height:100% !important;
  }
  #reportWindow .report-sidebar{
    width:auto !important;
    max-width:none !important;
    display:grid !important;
    grid-template-rows:auto 1fr !important;
    min-height:0 !important;
  }
  #reportList{
    max-height:160px !important;
    min-height:0 !important;
  }
  #reportWindow .report-main{
    min-height:0 !important;
    overflow:auto !important;
    padding:12px !important;
  }
  #reportWindow .report-main-title{
    font-size:18px !important;
  }
  #reportWindow .report-big-title{
    font-size:34px !important;
    line-height:1 !important;
    margin-bottom:6px !important;
  }
  #reportWindow .report-row-split{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  #reportWindow .report-stats{
    font-size:13px !important;
    line-height:1.35 !important;
  }
  #reportWindow .report-portrait{
    width:54px !important;
    height:54px !important;
    font-size:28px !important;
  }
  #reportWindow .report-tabs{
    gap:6px !important;
    margin-top:8px !important;
  }
  #reportWindow .report-tab{
    padding:8px 10px !important;
    font-size:12px !important;
  }
  #reportWindow .report-body{
    font-size:12px !important;
    line-height:1.35 !important;
  }
  #reportWindow .report-body .logBox,
  #reportTurnLog{
    max-height:none !important;
  }
}


/* V40.1 mobile UI refined */
#formationDock{
  display:flex;
  align-items:center;
  gap:12px;
}
#formationDock .dockBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 10px;
  min-width:92px;
  height:78px;
  border-radius:22px;
  background:transparent;
  border:none;
  color:#ead69b;
  position:relative;
  font-family:Georgia,serif;
}
#formationDock .dockBtn::before{
  content:"";
  position:absolute;
  width:56px;
  height:56px;
  top:2px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,233,160,.26), rgba(255,233,160,.03) 28%, rgba(18,52,65,.95) 29%, rgba(12,34,44,.98) 100%);
  border:1px solid rgba(195,164,97,.55);
  box-shadow:0 8px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.15);
}
#formationDock .dockIcon{
  position:relative;
  z-index:1;
  font-size:26px;
  line-height:1;
  margin-top:2px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
#formationDock .dockLabel{
  position:relative;
  z-index:1;
  font-size:14px;
  line-height:1;
  margin-top:28px;
}
@media (max-width: 900px){
  #formationDock{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    transform:none !important;
    width:100vw !important;
    justify-content:center !important;
    gap:20px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg, rgba(10,23,34,.98), rgba(7,14,22,.99)) !important;
    border-top:1px solid rgba(195,164,97,.55) !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:none !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.35) !important;
  }
  #formationDock .dockBtn{
    flex:0 0 auto !important;
    min-width:98px !important;
    width:98px !important;
    height:74px !important;
    padding:4px 6px !important;
  }
  #formationDock .dockBtn::before{
    width:48px !important;
    height:48px !important;
  }
  #formationDock .dockIcon{
    font-size:22px !important;
    margin-top:0 !important;
  }
  #formationDock .dockLabel{
    font-size:12px !important;
    margin-top:24px !important;
  }

  #formationPanel,#reportWindow{
    inset:8px 8px 84px 8px !important;
    left:8px !important;
    right:8px !important;
    top:8px !important;
    bottom:84px !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  #closeFormation,#closeReports{
    top:8px !important;
    right:8px !important;
    padding:8px 10px !important;
    font-size:12px !important;
  }

  /* Army panel compact fit */
  .army-header{
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    margin-bottom:6px !important;
    align-items:start !important;
  }
  .army-title{font-size:20px !important}
  .army-title.small{font-size:17px !important}
  .army-title-wrap{display:block !important}
  .army-capacity{
    padding:6px 8px !important;
    gap:6px !important;
    flex-wrap:wrap !important;
  }
  .army-capacity-icon{font-size:18px !important}
  .army-capacity-text{font-size:12px !important}
  .army-capacity-bar{width:100% !important;height:8px !important}
  .army-resources{
    grid-column:1 / -1 !important;
    justify-content:flex-start !important;
    gap:4px !important;
  }
  .res-chip{
    padding:4px 6px !important;
    font-size:10px !important;
  }
  .formation-strip{
    grid-template-columns:repeat(5, minmax(86px, 1fr)) !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    margin-bottom:6px !important;
    padding-bottom:4px !important;
  }
  .formation-card{
    min-height:82px !important;
    padding:8px !important;
    border-radius:10px !important;
  }
  .f-title{font-size:14px !important;margin-bottom:4px !important}
  .formation-power{font-size:18px !important;margin:3px 0 !important}
  .f-sub{font-size:9px !important;line-height:1.15 !important}
  .formation-units{gap:4px !important;margin-top:5px !important}
  .formation-unit-chip{font-size:9px !important;padding:3px 2px !important}
  .barracks-only-panel{
    height:calc(100% - 108px) !important;
    padding:8px !important;
    display:grid !important;
    grid-template-rows:auto 1fr auto !important;
    gap:6px !important;
    overflow:hidden !important;
  }
  .barracks-scene-header{margin-bottom:0 !important}
  .hint{font-size:10px !important;line-height:1.15 !important}
  .barracks-stage{
    min-height:184px !important;
    height:auto !important;
  }
  .troop-stage-grid{
    grid-template-columns:repeat(5, minmax(64px, 1fr)) !important;
    gap:4px !important;
    padding:120px 6px 8px 6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .troop-card{min-height:86px !important;padding:0 2px !important}
  .troop-scene-sprite{height:44px !important;margin-bottom:6px !important}
  .troop-scene-sprite img{width:40px !important;height:40px !important}
  .troop-card-slider .sliderWrap{grid-template-columns:1fr 32px !important;gap:3px !important}
  .troop-card-slider .sliderLabel{height:20px !important;font-size:9px !important}
  .troop-detail-bar{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:8px !important;
    margin-top:0 !important;
  }
  .troop-detail-left{
    display:grid !important;
    grid-template-columns:44px 1fr !important;
    gap:8px !important;
  }
  .troop-hero{width:44px !important;height:44px !important;border-radius:10px !important}
  .troop-hero img{width:38px !important;height:38px !important}
  .troop-hero-name{font-size:15px !important;margin-bottom:3px !important}
  #selectedTroopMeta,#selectedTroopCosts,#recruitInfo{font-size:10px !important;line-height:1.15 !important}
  .sliderWrap.wide{grid-template-columns:1fr 40px !important;gap:4px !important}
  .sliderLabel{height:24px !important;font-size:10px !important}
  .recruit-actions{gap:6px !important}
  .barracksBtn{
    height:34px !important;
    font-size:12px !important;
    min-width:0 !important;
    flex:1 !important;
    padding:0 8px !important;
  }

  /* Reports fully responsive */
  #reportWindow{padding:10px !important}
  .report-layout{
    display:grid !important;
    grid-template-columns:34% 66% !important;
    gap:8px !important;
    height:100% !important;
  }
  .report-sidebar{
    width:auto !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    padding:10px !important;
  }
  .report-main{
    min-width:0 !important;
    min-height:0 !important;
    padding:10px !important;
    overflow:hidden !important;
  }
  #reportList{
    max-height:none !important;
    height:100% !important;
    overflow:auto !important;
  }
  .report{
    padding:8px !important;
    margin-bottom:6px !important;
    border-radius:8px !important;
    font-size:11px !important;
  }
  .report small{font-size:10px !important}
  #reportEmpty{
    font-size:20px !important;
    text-align:center !important;
    padding:12px !important;
  }
  #reportDetail{
    display:none;
    height:100% !important;
    overflow:hidden !important;
  }
  #reportDetail .row{
    gap:10px !important;
  }
  #reportDetailTitle.report-big-title{
    font-size:28px !important;
    line-height:1 !important;
    margin-bottom:4px !important;
  }
  #reportDetailMeta,#reportDetailCoords{font-size:12px !important}
  #reportPlayerCommander,#reportEnemyCommander{
    font-size:16px !important;
    margin-bottom:4px !important;
  }
  #reportPlayerArmy,#reportEnemyArmy{
    font-size:11px !important;
    line-height:1.25 !important;
  }
  #reportSummaryText{
    margin-bottom:8px !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }
  #reportTurnLog{
    height:140px !important;
    font-size:10px !important;
    line-height:1.25 !important;
    padding:8px !important;
  }
  .report-tabs{gap:6px !important;margin-top:6px !important}
  .report-tab{
    padding:6px 8px !important;
    font-size:11px !important;
  }
  .report-portrait{width:42px !important;height:42px !important;font-size:24px !important}
  .report-portrait-row{margin-bottom:8px !important}
}


/* V41 mobile layout rework */
.mobile-panel{overflow:hidden}
#formationDock{
  display:flex;
  align-items:center;
  gap:12px;
}
#formationDock .dockBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 10px;
  min-width:92px;
  height:78px;
  border-radius:22px;
  background:transparent;
  border:none;
  color:#ead69b;
  position:relative;
  font-family:Georgia,serif;
}
#formationDock .dockOrb{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(255,233,160,.28), 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:26px;line-height:1;margin:0}
#formationDock .dockLabel{margin-top:6px}
.report-layout{height:100%}
.report-sidebar,.report-main{min-width:0;min-height:0}
.mobile-army-panel .army-header{position:relative}
.mobile-report-panel{background:linear-gradient(180deg, rgba(18,34,45,.98), rgba(8,16,22,.98)) !important}

@media (max-width: 900px){
  #formationDock{
    left:0 !important;right:0 !important;bottom:0 !important;transform:none !important;
    width:100vw !important;
    justify-content:space-evenly !important;
    gap:24px !important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg, rgba(7,18,26,.98), rgba(6,12,20,.99)) !important;
    border-top:1px solid rgba(195,164,97,.45) !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -10px 28px rgba(0,0,0,.35) !important;
  }
  #formationDock .dockBtn{
    flex:0 0 auto !important;
    min-width:90px !important;width:90px !important;height:76px !important;
    padding:0 !important;gap:0 !important;color:#ead69b !important;
  }
  #formationDock .dockOrb{width:48px !important;height:48px !important}
  #formationDock .dockIcon{font-size:22px !important}
  #formationDock .dockLabel{font-size:12px !important;margin-top:6px !important;text-align:center !important}

  #formationPanel,#reportWindow{
    inset:8px 8px 84px 8px !important;
    left:8px !important;right:8px !important;top:8px !important;bottom:84px !important;
    width:auto !important;height:auto !important;border-radius:14px !important;overflow:hidden !important;
  }

  .mobile-army-panel{
    padding:8px !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    gap:8px !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:6px !important;margin-bottom: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-capacity{grid-area:capacity}
  .mobile-army-panel .army-resources{grid-area:resources}
  .mobile-army-panel .army-title{font-size:19px !important}
  .mobile-army-panel .army-title.small{font-size:16px !important}
  .mobile-army-panel .army-capacity{padding:6px 8px !important;gap:6px !important;flex-wrap:wrap !important;border-radius:10px !important}
  .mobile-army-panel .army-capacity-text{font-size:11px !important}
  .mobile-army-panel .army-capacity-bar{width:100% !important;height:8px !important}
  .mobile-army-panel .army-resources{display:grid !important;grid-template-columns:repeat(5, minmax(0,1fr)) !important;gap:4px !important}
  .mobile-army-panel .res-chip{min-width:0 !important;padding:4px 4px !important;font-size:10px !important;justify-content:center !important}

  .mobile-army-panel .formation-strip{
    display:grid !important;grid-template-columns:repeat(5, minmax(82px, 1fr)) !important;
    gap:6px !important;overflow-x:auto !important;overflow-y:hidden !important;padding-bottom:4px !important;margin-bottom:0 !important;
  }
  .mobile-army-panel .formation-card{min-height:78px !important;padding:7px !important;border-radius:10px !important}
  .mobile-army-panel .f-title{font-size:13px !important;margin-bottom:2px !important}
  .mobile-army-panel .formation-power{font-size:16px !important;margin:2px 0 !important}
  .mobile-army-panel .f-sub{font-size:8px !important;line-height:1.1 !important}
  .mobile-army-panel .formation-unit-chip{font-size:8px !important;padding:2px 1px !important}

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

  .mobile-report-panel{padding:8px !important;display:block !important}
  .mobile-report-panel .report-layout{
    display:grid !important;grid-template-columns:1fr !important;grid-template-rows:auto 1fr !important;
    gap:8px !important;height:100% !important;
  }
  .mobile-report-panel .report-sidebar{
    display:grid !important;grid-template-rows:auto auto 1fr !important;
    padding:8px !important;border-right:none !important;border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  .mobile-report-panel .report-main{padding:10px !important;overflow:auto !important}
  .mobile-report-panel .report-sidebar .row{margin-bottom:8px !important}
  .mobile-report-panel b[style*="font-size:22px"]{font-size:18px !important}
  .mobile-report-panel #reportList{height:96px !important;max-height:96px !important;overflow:auto !important}
  .mobile-report-panel .report{padding:8px !important;margin-bottom:5px !important;border-radius:8px !important;font-size:11px !important}
  .mobile-report-panel .report small{font-size:9px !important}
  .mobile-report-panel #reportEmpty{font-size:18px !important;padding:12px !important;height:auto !important;min-height:120px !important}
  .mobile-report-panel #reportDetail{height:auto !important;min-height:0 !important}
  .mobile-report-panel #reportDetail .row{gap:8px !important}
  .mobile-report-panel .report-big-title{font-size:24px !important;line-height:1 !important;margin-bottom:4px !important}
  .mobile-report-panel #reportDetailMeta,.mobile-report-panel #reportDetailCoords{font-size:11px !important}
  .mobile-report-panel #reportPlayerCommander,.mobile-report-panel #reportEnemyCommander{font-size:15px !important;margin-bottom:3px !important}
  .mobile-report-panel #reportPlayerArmy,.mobile-report-panel #reportEnemyArmy{font-size:10px !important;line-height:1.25 !important}
  .mobile-report-panel #reportSummaryText{font-size:10px !important;line-height:1.25 !important;margin-bottom:8px !important}
  .mobile-report-panel #reportTurnLog{height:120px !important;font-size:9px !important;line-height:1.2 !important;padding:8px !important}
  .mobile-report-panel .report-tab{padding:6px 8px !important;font-size:10px !important}
  .mobile-report-panel .report-portrait{width:38px !important;height:38px !important;font-size:20px !important}
}


/* V42 mobile overhaul */
#formationOverlay, #reportOverlay { display:none; pointer-events:none; }
#formationPanel, #reportWindow { display:none; pointer-events:none; }
#formationPanel.open, #reportWindow.open { display:block !important; pointer-events:auto !important; }
#formationOverlay.open, #reportOverlay.open { display:block !important; pointer-events:auto !important; }

#formationDock{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  z-index:2200;
}
#formationDock .dockBtn{
  cursor:pointer;
}
#formationDock .dockOrb{
  width:48px;
  height:48px;
  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:21px;line-height:1}
#formationDock .dockLabel{font-size:12px; line-height:1}

.mobile-army-panel, .mobile-report-panel{ overflow:hidden; }

@media (max-width: 900px){
  body{ font-size:11px; }

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

  #formationDock{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    transform:none !important;
    width:100vw !important;
    display:flex !important;
    justify-content:center !important;
    gap:26px !important;
    padding:6px 12px calc(6px + env(safe-area-inset-bottom)) !important;