body.report-open #reportOverlay{
  display:none !important;
}

@media (max-width:900px){
  body.army-open #formationPanel{
    zoom:0.58 !important;
    width:172% !important;
    min-height:172% !important;
    transform-origin:top left !important;
  }

  body.report-open #reportWindow.mobile-report-panel{
    overflow:hidden !important;
  }
  body.report-open #reportWindow.mobile-report-panel .report-layout{
    display:grid !important;
    grid-template-columns:30% 70% !important;
    grid-template-rows:1fr !important;
    gap:4px !important;
    height:100vh !important;
    align-items:stretch !important;
  }
  body.report-open #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;
  }
  body.report-open #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;
  }
  body.report-open #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;
  }
  body.report-open #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;
  }
  body.report-open #reportWindow.mobile-report-panel .report small{
    display:block !important;
    font-size:5px !important;
    line-height:1 !important;
  }
  body.report-open #reportWindow.mobile-report-panel #reportDetail{
    display:block !important;
    height:100% !important;
    min-height:0 !important;
    overflow:auto !important;
    position:relative !important;
  }
  body.report-open #reportWindow.mobile-report-panel.has-selection #reportEmpty{
    display:none !important;
  }
  body.report-open #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;
  }
}


/* V57 full-page screens and touch-safe layout */
body.army-open,
body.report-open{
  background: linear-gradient(180deg, rgba(17,31,43,1), rgba(7,14,21,1)) !important;
}

body.army-open #formationPanel,
body.report-open #reportWindow{
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 5000 !important;
  pointer-events: auto !important;
}

body.army-open #formationPanel{
  overflow: auto !important;
}
body.report-open #reportWindow{
  overflow: hidden !important;
}

body.army-open #closeFormation,
body.report-open #closeReports{
  position: fixed !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 7000 !important;
  pointer-events: auto !important;
}

body.army-open #formationOverlay,
body.report-open #reportOverlay{
  display: none !important;
}

@media (max-width:900px){
  body.army-open #formationPanel.mobile-army-panel{
    zoom: 0.50 !important;
    width: 200% !important;
    min-height: 200% !important;
    transform-origin: top left !important;
    overflow: visible !important;
  }

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


/* V69 page-mode UI */
#formationPanel,#reportWindow,#formationOverlay,#reportOverlay{display:none !important}
#pageScreen{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,#132331,#0b141c);color:#e8e1c5;display:none}
#pageScreen.active{display:block}
.pageLayout{display:grid;grid-template-columns:300px 1fr;height:100%}
.pageSidebar{border-right:1px solid rgba(255,255,255,.1);padding:12px;overflow:auto;background:linear-gradient(180deg,#172a38,#0d1822)}
.pageMain{padding:12px;overflow:auto;background:radial-gradient(circle at center, rgba(180,140,70,.14), transparent 180px), linear-gradient(180deg,#162633,#0b151e)}
.pageBtn{padding:10px 14px;background:linear-gradient(180deg,#d3b36a,#8f6d2b);color:#211605;border:1px solid rgba(255,230,160,.45);border-radius:8px;cursor:pointer;font-weight:bold}
.reportCard,.armyCard{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.04);cursor:pointer}
.reportCard.active{outline:1px solid rgba(226,196,123,.85);background:rgba(226,196,123,.08)}
@media (max-width:900px){
  .pageLayout{grid-template-columns:30% 70%}
  .pageSidebar,.pageMain{padding:8px}
  .reportCard,.armyCard{padding:6px;font-size:12px}
  .pageBtn{padding:8px 10px;font-size:12px}
}


/* V71 Army visual */
.armyLayout{
  display:grid;
  grid-template-columns:320px 1fr;
  height:100%;
  background:linear-gradient(180deg,#132331,#0b141c);
}
.armyLeft{
  background:linear-gradient(180deg,#1a2e3d,#10202d);
  border-right:1px solid rgba(255,255,255,.1);
  overflow:auto;
  padding:12px;
  box-sizing:border-box;
}
.armyRight{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,240,180,.08), transparent 220px),
    url('../textures/army_bg.png') center/cover no-repeat;
}
.armyBackdrop{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,20,28,.12), rgba(0,0,0,.04));
}
.armyWall{ display:none;
  position:absolute;
  left:0; right:0; top:0;
  height:36%;
  background:
    linear-gradient(180deg,#7f7f81,#5f5f62 42%, #49494b 100%);
  border-bottom:4px solid rgba(0,0,0,.22);
}
.armyWall:before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.08) 10% 12%, transparent 12% 20%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%);
  opacity:.5;
}
.tower{ display:none;
  position:absolute;
  top:4%;
  width:10%;
  height:28%;
  background:linear-gradient(180deg,#8f8f92,#666669);
  border:2px solid rgba(0,0,0,.15);
  box-sizing:border-box;
}
.tower:before{
  content:"";
  position:absolute; left:-4%; right:-4%; top:-10%;
  height:16%;
  background:#54463a;
  clip-path:polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.t1{left:12%}.t2{left:33%}.t3{left:58%}.t4{left:80%}
.armyGate{ display:none;
  position:absolute;
  top:16%;
  left:42%;
  width:16%;
  height:20%;
  background:linear-gradient(180deg,#574839,#2e241c);
  border-radius:12px 12px 0 0;
  border:2px solid rgba(0,0,0,.18);
}
.armyPreviewInner{
  position:absolute;
  inset:0;
}
.armyCommanderBadge{
  position:absolute;
  top:12px;
  right:18px;
  min-width:220px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(16,58,73,.9),rgba(11,34,42,.9));
  border:1px solid rgba(255,235,170,.25);
  color:#e8dfc2;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.armyCommanderName{font-size:26px;font-weight:700;color:#f0df9e;line-height:1}
.armyCommanderStats{font-size:13px;margin-top:6px;color:#d7ceb0}
.slot{
  position:absolute;
  min-width:120px;
}
.slot.front{ left:50%; top:62%; transform:translate(-50%,-50%); }
.slot.back.left{ left:28%; top:72%; transform:translate(-50%,-50%); }
.slot.back.right{ right:18%; top:72%; transform:translate(0,-50%); }
.unitGroup{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.unitSpriteLarge{
  width:116px;
  height:116px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  filter: drop-shadow(0 12px 8px rgba(0,0,0,.25));
  animation: troopFloat 3.2s ease-in-out infinite;
}
@keyframes troopFloat{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-4px); }
}
.unitBanner{
  min-width:130px;
  background:rgba(35,35,35,.55);
  color:#efe6c9;
  padding:8px 10px;
  border-left:6px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.unitBannerIcon{
  width:34px;
  height:34px;
  border-radius:4px;
  background:rgba(10,48,60,.85);
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:#e9deb9;
}
.unitBannerCount{
  font-size:15px;
  font-weight:700;
}
.armyPageClose{
  position:absolute;
  top:12px;
  left:12px;
  z-index:20;
}

.armyPanelTitle{
  font-size:22px;
  color:#e8dfbf;
  margin:0 0 12px 0;
}
.armyCard{
  padding:10px;
  margin-bottom:10px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(44,67,83,.95),rgba(28,45,58,.95));
  border:1px solid rgba(255,255,255,.08);
  color:#ece4c8;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.armyCard.active{
  outline:2px solid rgba(239,208,120,.95);
  background:linear-gradient(180deg,rgba(56,84,103,.98),rgba(33,54,69,.98));
}
.armyCard.empty{
  text-align:center;
  font-size:32px;
  color:#d9c57d;
}
.armyCmdRow{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:10px;
  align-items:center;
}
.armyPortrait{
  width:58px;
  height:58px;
  border-radius:8px;
  background:linear-gradient(180deg,#35546a,#233848);
  border:1px solid rgba(255,255,255,.15);
  color:#efe6cb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
}
.armyCmdName{font-size:16px;font-weight:700;color:#f1de98}
.armyPower{font-size:12px;color:#ddd2ae;margin-top:3px}
.armyMiniUnits{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.unitMini{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:1;
}
.unitMiniSprite{
  width:30px;
  height:30px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));
}
.unitMiniCount{font-size:12px;color:#efe6c9}

@media (max-width:900px){
  .armyLayout{grid-template-columns:34% 66%}
  .armyLeft{padding:8px}
  .armyPanelTitle{font-size:16px;margin-bottom:8px}
  .armyCard{padding:6px;margin-bottom:6px}
  .armyCmdRow{grid-template-columns:40px 1fr;gap:6px}
  .armyPortrait{width:40px;height:40px;font-size:18px}
  .armyCmdName{font-size:11px}
  .armyPower{font-size:9px}
  .armyMiniUnits{gap:4px;margin-top:6px}
  .unitMiniSprite{width:18px;height:18px}
  .unitMiniCount{font-size:9px}
  .armyCommanderBadge{top:8px;right:8px;min-width:140px;padding:6px 8px}
  .armyCommanderName{font-size:16px}
  .armyCommanderStats{font-size:9px;margin-top:4px}
  .unitSpriteLarge{width:70px;height:70px}
  .unitBanner{min-width:82px;padding:5px 6px;gap:5px}
  .unitBannerIcon{width:20px;height:20px;font-size:9px}
  .unitBannerCount{font-size:10px}
  .slot.front{top:60%}
  .slot.back.left{left:30%;top:70%}
  .slot.back.right{right:12%;top:70%}
}


/* V74 commander portraits + rich report view */
.cmdPortraitImg{
  width:58px;height:58px;border-radius:8px;object-fit:cover;
  border:1px solid rgba(255,255,255,.16);background:#203342;display:block;
}
.armyCommanderPhoto{
  position:absolute;top:12px;right:14px;width:72px;height:72px;border-radius:10px;
  border:1px solid rgba(255,245,186,.28);object-fit:cover;box-shadow:0 8px 18px rgba(0,0,0,.22)
}
.armyCommanderBadge{padding-right:92px}

.reportHeroRow{
  display:grid;grid-template-columns:1fr 170px 1fr;align-items:start;gap:14px;margin-bottom:12px;
}
.reportSide{
  min-width:0;
}
.reportCommander{
  display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;
}
.reportCommanderPhoto{
  width:84px;height:104px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.14);background:#1d3140;
  box-shadow:0 8px 18px rgba(0,0,0,.18)
}
.reportCommanderName{font-size:28px;font-weight:700;color:#f1de98;line-height:1}
.reportCommanderSub{font-size:13px;color:#d8cfb0;margin-top:6px}
.reportVs{
  align-self:center;justify-self:center;font-size:40px;font-weight:700;color:#e5c774;text-align:center;
}
.reportTroops{
  display:flex;gap:8px;margin-top:10px;flex-wrap:wrap
}
.reportTroopCard{
  min-width:104px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px
}
.reportTroopTop{
  display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:center;margin-bottom:6px
}
.reportTroopSprite{
  width:36px;height:36px;background-size:contain;background-repeat:no-repeat;background-position:center
}
.reportTroopName{font-size:12px;color:#efe5c9}
.reportTroopQty{font-size:11px;color:#c7bea3}
.hpWrap{
  height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden
}
.hpFill{
  height:100%;background:linear-gradient(90deg,#c6e9ff,#7fd4ff,#77dd77)
}
.reportTabs{display:flex;gap:8px;margin:8px 0 10px 0}
.reportTab{
  padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);cursor:pointer
}
.reportTab.active{
  background:linear-gradient(180deg,#d3b36a,#8f6d2b);color:#211605;border-color:rgba(255,230,160,.45);font-weight:700
}
.reportSectionTitle{font-size:24px;color:#f0df9d;margin:0 0 8px 0}
@media (max-width:900px){
  .cmdPortraitImg{width:40px;height:40px}
  .armyCommanderPhoto{width:44px;height:56px;top:8px;right:8px}
  .armyCommanderBadge{padding-right:58px}
  .reportHeroRow{grid-template-columns:1fr;gap:8px}
  .reportVs{font-size:18px}
  .reportCommander{grid-template-columns:44px 1fr;gap:6px}
  .reportCommanderPhoto{width:44px;height:56px}
  .reportCommanderName{font-size:16px}
  .reportCommanderSub{font-size:9px;margin-top:4px}
  .reportTroops{gap:4px}
  .reportTroopCard{min-width:74px;padding:5px}
  .reportTroopTop{grid-template-columns:20px 1fr;gap:4px;margin-bottom:4px}
  .reportTroopSprite{width:20px;height:20px}
  .reportTroopName{font-size:8px}
  .reportTroopQty{font-size:7px}
  .reportTabs{gap:4px;margin:6px 0 8px 0}
  .reportTab{padding:4px 7px;font-size:10px}
  .reportSectionTitle{font-size:14px;margin-bottom:5px}
}


/* V75 report comparison layout */
.reportCompareRow{
  display:grid;
  grid-template-columns:1fr 220px 1fr;
  align-items:center;
  gap:18px;
  margin-bottom:12px;
}
.reportArmyPanel{
  min-width:0;
}
.reportCommanderTop{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:start;
  margin-bottom:10px;
}
.reportHpWide{
  margin-top:10px;
}
.reportHpLabel{
  font-size:12px;
  color:#d9cfaa;
  margin-bottom:4px;
}
.reportHpTrack{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.reportHpBar{
  height:100%;
  background:linear-gradient(90deg,#d8f0ff,#95d9ff,#77dd77);
}
.reportVsWrap{
  position:relative;
  width:220px;
  height:220px;
  justify-self:center;
  align-self:center;
}
.reportVsBg{
  position:absolute;
  inset:0;
  background:url('../textures/report_vs.png') center/contain no-repeat;
  opacity:.95;
}
.reportVsText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:44px;
  font-weight:700;
  color:#f2dea0;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
@media (max-width:900px){
  .reportCompareRow{
    grid-template-columns:1fr 110px 1fr;
    gap:8px;
    margin-bottom:8px;
  }
  .reportCommanderTop{
    grid-template-columns:44px 1fr;
    gap:6px;
    margin-bottom:6px;
  }
  .reportVsWrap{width:110px;height:110px}
  .reportVsText{font-size:20px}
  .reportHpLabel{font-size:8px;margin-bottom:3px}
  .reportHpTrack{height:8px}
}


/* V76 bust portraits */
.cmdPortraitImg{
  width:58px;height:78px;border-radius:8px;object-fit:cover;
  border:none;background:transparent;display:block;
  box-shadow:none;
}
.armyPortrait{
  width:58px;height:78px;background:transparent !important;border:none !important;
}
.armyCommanderPhoto{
  width:94px;height:118px;border-radius:10px;object-fit:cover;border:none;background:transparent;box-shadow:none
}
.reportCommanderPhoto{
  width:94px;height:118px;border-radius:10px;object-fit:cover;border:none;background:transparent;box-shadow:none
}
@media (max-width:900px){
  .cmdPortraitImg{width:40px;height:54px}
  .armyPortrait{width:40px;height:54px}
  .armyCommanderPhoto{width:56px;height:74px}
  .reportCommanderPhoto{width:56px;height:74px}
}


#pageScreen.castlePage{position:absolute;inset:0;z-index:80;display:flex}
.castle-enter-page{position:absolute;inset:0;background:url('../textures/castle_enter_bg.png') center/cover no-repeat;display:flex;flex-direction:column;justify-content:space-between}
.castle-enter-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,16,.18),rgba(7,12,16,.34))}
.castle-enter-header{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 22px 0 22px;z-index:2}
.castle-enter-title{color:#f2e7c2;font-size:42px;line-height:1.05;text-shadow:0 3px 18px rgba(0,0,0,.5)}
.castle-enter-sub{margin-top:8px;color:#f1e8cf;font-size:18px;max-width:560px;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.castle-enter-close{padding:12px 22px;border-radius:12px;border:1px solid rgba(255,228,169,.45);background:linear-gradient(180deg,#c94c43,#88251f);color:#fff6f3;font:700 22px Georgia,serif;cursor:pointer}
.castle-enter-footer{position:relative;z-index:2;padding:0 22px 28px 22px;color:#efe6cc;font-size:18px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.castle-enter-card{max-width:540px;padding:18px 22px;border-radius:18px;border:1px solid rgba(237,214,153,.30);background:linear-gradient(180deg,rgba(12,23,30,.55),rgba(8,16,22,.72));box-shadow:0 14px 40px rgba(0,0,0,.32)}


.castle-build-page{position:absolute;inset:0;background:linear-gradient(180deg,#071118,#0a1720);color:#efe4bf}
.castle-build-page::before{content:'';position:absolute;inset:0;background:url('../textures/castle_enter_bg.png') center/cover no-repeat;opacity:.26}
.castle-ui{position:relative;display:grid;grid-template-columns:104px 1fr 360px;gap:0;height:100%}
.castle-sidebar{border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(6,12,16,.88),rgba(8,17,24,.92));padding-top:44px;display:flex;flex-direction:column;align-items:center;gap:10px}
.castle-sidebtn{width:66px;height:66px;border-radius:50%;border:1px solid rgba(227,199,114,.38);background:radial-gradient(circle at 30% 30%,rgba(235,213,128,.26),rgba(24,34,42,.96));display:flex;align-items:center;justify-content:center;color:#e7d596;font-size:30px;box-shadow:0 8px 16px rgba(0,0,0,.25)}
.castle-sidebtn.active{box-shadow:0 0 0 2px rgba(232,208,124,.36),0 8px 16px rgba(0,0,0,.25);background:radial-gradient(circle at 30% 30%,rgba(235,213,128,.48),rgba(24,34,42,.96))}
.castle-menu-lines{margin-top:auto;margin-bottom:18px;font-size:36px;color:#dbc278}
.castle-main{padding:18px 18px 18px 22px;overflow:auto}
.castle-topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.castle-title{font-size:30px;color:#e8d08a}
.castle-queue{font-size:18px;color:#f2ecdc;background:linear-gradient(180deg,rgba(11,25,34,.68),rgba(7,16,22,.82));padding:12px 18px;border-radius:0 0 0 14px;border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.castle-mainhall-wrap{display:flex;justify-content:center;margin:2px 0 16px}
.castle-card{position:relative;border:2px solid rgba(211,178,89,.78);background:rgba(4,9,14,.72);box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.castle-card.large{width:min(520px,68vw);height:180px}
.castle-card.small{width:240px;height:132px}
.castle-card img{width:100%;height:100%;object-fit:cover;display:block}
.castle-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.68))}
.castle-card-name{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:20px;color:#f0ead8;text-shadow:0 3px 12px rgba(0,0,0,.65);z-index:2}
.castle-card-level{position:absolute;right:8px;top:6px;min-width:64px;text-align:center;background:rgba(14,34,44,.88);color:#e8f0e8;padding:2px 8px;border-radius:0 0 0 10px;font-size:18px;z-index:2}
.castle-card-queued{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(180deg,#9ec160,#73a343);display:flex;align-items:center;justify-content:center;color:#f2f5dc;font-size:18px;z-index:3}
.castle-grid-row{display:grid;grid-template-columns:54px repeat(3,240px);gap:24px;align-items:center;margin:16px 0}
.castle-row-num{width:44px;height:44px;transform:rotate(45deg);border:1px solid rgba(212,184,97,.5);display:flex;align-items:center;justify-content:center;color:#e5cf8a;background:rgba(9,20,28,.55)}
.castle-row-num span{transform:rotate(-45deg);font-size:22px}
.castle-detail{border-left:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(7,14,20,.92),rgba(8,17,24,.92));padding:24px 18px;overflow:auto}
.castle-detail-title{font-size:28px;color:#e8d08a;margin-bottom:10px}
.castle-detail-sub{font-size:16px;color:#d8ccb0;line-height:1.5;margin-bottom:14px}
.castle-resource-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.castle-resource-item{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#ece4cc}
.castle-upgrade-btn,.castle-close-btn{display:block;width:100%;padding:14px 18px;border-radius:12px;border:1px solid rgba(255,228,169,.35);cursor:pointer;font:700 22px Georgia,serif}
.castle-upgrade-btn{background:linear-gradient(180deg,#d2b66a,#8d6e2b);color:#1f1806;margin-top:14px}
.castle-upgrade-btn[disabled]{opacity:.45;cursor:not-allowed}
.castle-close-btn{background:linear-gradient(180deg,#c94c43,#88251f);color:#fff6f3;margin-top:16px}
.castle-queue-list{margin-top:14px}
.castle-queue-item{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:10px;color:#ece4cc}
.castle-help{font-size:14px;color:#cfbf96;line-height:1.45}
@media (max-width: 1200px){
  .castle-ui{grid-template-columns:86px 1fr 300px}
  .castle-grid-row{grid-template-columns:48px repeat(3,minmax(0,1fr))}
  .castle-card.small{width:100%}
}
@media (max-width: 860px){
  .castle-ui{grid-template-columns:74px 1fr}
  .castle-detail{position:absolute;right:0;top:0;bottom:0;width:min(74vw,320px);z-index:3;box-shadow:-10px 0 20px rgba(0,0,0,.3)}
  .castle-grid-row{grid-template-columns:40px repeat(3,minmax(0,1fr));gap:10px}
  .castle-card.small{height:104px}
  .castle-card.large{width:100%;height:150px}
}


.castle-upgrade-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:6;background:rgba(0,0,0,.38)}
.castle-upgrade-overlay.active{display:flex}
.castle-upgrade-modal{width:min(760px,88vw);max-height:min(82vh,760px);overflow:auto;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(7,14,20,.97),rgba(8,17,24,.97));box-shadow:0 24px 60px rgba(0,0,0,.42);border-radius:18px;padding:22px 20px 20px 20px;position:relative}
.castle-upgrade-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,228,169,.35);background:linear-gradient(180deg,#c94c43,#88251f);color:#fff6f3;font:700 18px Georgia,serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.castle-upgrade-modal .castle-detail-title{padding-right:42px}


/* V114 castle usability fixes */
.castle-build-page{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.castle-ui{
  min-height:100%;
  height:auto;
  align-items:start;
}
.castle-sidebar{
  position:sticky;
  top:0;
  align-self:start;
  min-height:100dvh;
  padding-bottom:32px;
}
.castle-main{
  min-height:100dvh;
  padding-bottom:120px;
  overflow:visible;
}
#castleGridRows{
  padding-bottom:140px;
}
.castle-mainhall-wrap{
  padding-top:4px;
}
.castle-upgrade-overlay{
  position:fixed;
  inset:0;
}
[data-building]{
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width: 860px){
  .castle-build-page{
    padding-bottom:72px;
  }
  .castle-ui{
    grid-template-columns:74px 1fr;
    min-height:auto;
  }
  .castle-sidebar{
    min-height:100dvh;
  }
  .castle-main{
    min-height:auto;
    padding:16px 12px 160px 12px;
  }
  #castleGridRows{
    padding-bottom:180px;
  }
  .castle-grid-row{
    margin:12px 0 20px 0;
  }
}






#resourceTopBar{
  position:absolute;
  left:50%;
  top:6px;
  transform:translateX(-50%);
  z-index:26;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font:700 10px Georgia,serif;
  color:#f4ecd2;
}

.resource-bar-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.resource-chip{
  display:flex;
  align-items:center;
  gap:4px;
  background:transparent;
  border:none;
}

.resource-chip img{
  width:12px;
  height:12px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

.resource-chip span{
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.resource-power-icon{
  display:inline-block;
  width:12px;
  height:12px;
  text-align:center;
  font-size:14px;
  line-height:12px;
  color:#f4d782;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 4px rgba(244,215,130,.4);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.resource-chip-power .resource-value{ color:#f7e2a3 }
.resource-chip-power .resource-rate{ color:#d8b568 }

.resource-bar-row.sub{
  gap:18px;
  font-size:9px;
  opacity:.85;
}
@media (max-width: 860px){
  #resourceTopBar{
    left:6px; right:6px; transform:none; top:3px; font-size:8px;
  }
  .resource-bar-shell{
    width:calc(100vw - 12px);
    padding:2px 4px 3px 4px;
  }
  .resource-chip{
    height:11px; font-size:8px;
  }
  .resource-chip img{
    width:8px; height:8px;
  }
  .resource-chip.subchip{
    height:8px; font-size:7px;
  }
}





#resourceTopBar{
  position:absolute; left:50%; top:var(--topbar-top); transform:translateX(-50%);
  z-index:26; color:#f3ebd2; font:700 15px Georgia,serif;
}
.resource-bar-shell{
  min-width:var(--topbar-width);
  padding:var(--topbar-padding-top) var(--topbar-padding-right) var(--topbar-padding-bottom) var(--topbar-padding-left);
  background:url('../textures/resource_bar_bg.png') center/100% 100% no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.resource-bar-row{
  display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:nowrap;
}
.resource-bar-row.sub{
  margin-top:8px;
}
.resource-chip{
  min-width:118px; height:40px; padding:0 10px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; color:#f4edd6;
  background:linear-gradient(180deg,rgba(34,49,61,.84),rgba(16,23,29,.90));
  border:1px solid rgba(221,190,106,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.resource-chip img{
  width:22px; height:22px; display:block;
}
.resource-chip.subchip{
  min-width:144px; height:34px; font-size:13px;
  background:linear-gradient(180deg,rgba(17,28,36,.80),rgba(10,16,21,.90));
}
.castle-resource-top .resource-bar-shell{
  min-width:0; width:100%;
}
.castle-resource-top{
  display:block; margin:10px 0 14px 0;
}
@media (max-width: 860px){
  #resourceTopBar{
    left:8px; right:8px; transform:none; top:8px;
  }
  .resource-bar-shell{
    min-width:0; width:calc(100vw - 16px); padding:8px 8px 10px 8px;
    background-size:100% 100%;
  }
  .resource-bar-row{
    gap:6px; justify-content:flex-start; overflow-x:auto; padding-bottom:2px;
  }
  .resource-chip{
    min-width:92px; height:34px; font-size:13px; gap:6px;
  }
  .resource-chip img{
    width:18px; height:18px;
  }
  .resource-chip.subchip{
    min-width:126px; height:30px; font-size:12px;
  }
}






#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%;
  }
}

}

}



#resourceTopBar{
  position:absolute;
  left:50%;
  top:4px;
  transform:translateX(-50%);
  width:min(920px, calc(100vw - 16px));
  z-index:26;
  pointer-events:none;
}

.resource-bar-shell{
  position:relative;
  width:100%;
  min-height:78px;
  background:url('../textures/resource_top_bar.png') no-repeat center top;
  background-size:100% 100%;
  padding:20px 86px 22px 64px;
  box-sizing:border-box;
}

.resource-bar-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--topbar-main-gap);
  padding-right:var(--topbar-main-padding-right);
}

.resource-chip{
  display:flex;
  align-items:center;
  gap:var(--topbar-chip-gap);
  min-width:var(--topbar-chip-min-width);
  justify-content:flex-start;
  background:transparent;
  border:none;
  color:#f2e7ca;
  text-shadow:0 1px 3px rgba(0,0,0,.88);
  font:700 14px Georgia,serif;
}

.resource-chip img{
  width:var(--topbar-chip-icon-size);
  height:var(--topbar-chip-icon-size);
  display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75));
}

.resource-chip .resource-col{
  display:flex;
  flex-direction:column;
  line-height:1.02;
}

.resource-chip .resource-value{ font-size:var(--topbar-chip-font-size); }
.resource-chip .resource-rate{ font-size:var(--topbar-rate-font-size); opacity:var(--topbar-rate-opacity); }

.resource-tiles{
  position:absolute;
  right:var(--topbar-tiles-right);
  top:var(--topbar-tiles-top);
  display:flex;
  align-items:center;
  gap:var(--topbar-tiles-gap);
  color:#f2e7ca;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  font:700 var(--topbar-tiles-font-size) Georgia,serif;
}
.resource-tiles img{
  width:var(--topbar-tiles-icon-size);
  height:var(--topbar-tiles-icon-size);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75));
}

.castle-resource-top #resourceTopBar,
.castle-resource-top .resource-bar-shell{
  width:100%;
}
.castle-resource-top{
  margin:6px 0 10px 0;
}

@media (max-width: 900px){
  
#resourceTopBar{
  position:absolute;
  left:50%;
  top:var(--topbar-mobile-top);
  transform:translateX(-50%);
  width:var(--topbar-mobile-width);
  z-index:26;
  pointer-events:none;
}

.resource-bar-shell{
  position:relative;
  width:100%;
  min-height:var(--topbar-mobile-shell-min-height);
  background:url('../textures/resource_top_bar.png') no-repeat center top;
  background-size:100% 100%;
  padding:var(--topbar-mobile-padding-top) var(--topbar-mobile-padding-right) var(--topbar-mobile-padding-bottom) var(--topbar-mobile-padding-left);
  box-sizing:border-box;
}

.resource-bar-main{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:var(--topbar-mobile-main-gap);
  padding-right:var(--topbar-mobile-main-padding-right);
  padding-left:var(--topbar-mobile-main-padding-left);
  margin-top:var(--topbar-mobile-main-margin-top);
}

.resource-chip{
  display:flex;
  align-items:flex-start;
  gap:var(--topbar-mobile-chip-gap);
  min-width:var(--topbar-mobile-chip-min-width);
  justify-content:flex-start;
  background:transparent;
  border:none;
  color:#f2e7ca;
  text-shadow:0 1px 3px rgba(0,0,0,.88);
  font:700 13px Georgia,serif;
}

.resource-chip img{
  width:18px;
  height:18px;
  display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75));
}

.resource-chip .resource-col{
  display:flex;
  flex-direction:column;
  line-height:1.0;
  transform:translateY(-2px);
}

.resource-chip .resource-value{ font-size:13px; }
.resource-chip .resource-rate{ font-size:9px; opacity:.88; margin-top:2px; }

.resource-tiles{
  position:absolute;
  right:20px;
  top:22px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#f2e7ca;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  font:700 13px Georgia,serif;
}
.resource-tiles img{
  width:17px;
  height:17px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75));
}

.castle-resource-top #resourceTopBar,
.castle-resource-top .resource-bar-shell{
  width:100%;
}
.castle-resource-top{
  margin:6px 0 10px 0;
}

@media (max-width: 900px){
  #resourceTopBar{
    width:calc(100vw - 14px);
    top:2px;
  }
  .resource-bar-shell{
    min-height:66px;
    padding:11px 54px 18px 24px;
  }
  .resource-bar-main{
    gap:5px;
    padding-right:70px;
    padding-left:10px;
    margin-top:-1px;
  }
  .resource-chip{
    min-width:60px;
    gap:3px;
    font-size:10px;
  }
  .resource-chip img{
    width:12px;
    height:12px;
  }
  .resource-chip .resource-col{
    transform:translateY(-1px);
  }
  .resource-chip .resource-value{ font-size:var(--topbar-mobile-chip-font-size); }
  .resource-chip .resource-rate{ font-size:7px; margin-top:1px; }
  .resource-tiles{
    right:14px;
    top:14px;
    gap:3px;
    font-size:10px;
  }
  .resource-tiles img{
    width:12px;
    height:12px;
  }
}


/* ===== Commander Page ===== */
.commander-page{
  position:absolute; inset:0; color:#f0e7d0; overflow:hidden;
  background:#081018;
}
.commander-bg{
  position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.86);
}
.commander-dim{
  position:absolute; inset:0; background:
    radial-gradient(circle at 42% 16%, rgba(255,248,220,.18), transparent 18%),
    linear-gradient(90deg, rgba(4,8,14,.74) 0%, rgba(4,8,14,.28) 22%, rgba(4,8,14,.10) 42%, rgba(4,8,14,.50) 68%, rgba(4,8,14,.84) 100%);
}
.commander-top{
  position:absolute; left:0; top:0; right:0; height:68px;
  display:flex; align-items:center; gap:18px; padding:0 20px; box-sizing:border-box;
  background:transparent; z-index:4;
}
.commander-back{
  width:54px; height:54px; border:none; border-radius:50%;
  background:transparent; color:#d9b56d; font-size:30px; cursor:pointer;
}
.commander-title{ font-size:24px; color:#d8bc72; }

.commander-left{
  position:absolute; left:12px; top:80px; bottom:16px; width:104px;
  display:flex; flex-direction:column; gap:12px; overflow:auto; align-items:center;
  background:transparent; z-index:4;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.commander-left::-webkit-scrollbar{ display:none; width:0; height:0; }
.commander-left::-webkit-scrollbar-thumb{ background:rgba(214,176,98,.25); border-radius:999px; }

.commander-icon{
  position:relative; width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(224,198,134,.72); background-size:cover; background-position:center;
  box-shadow:0 8px 18px rgba(0,0,0,.42), inset 0 0 0 3px rgba(18,22,30,.45);
  cursor:pointer; flex:0 0 auto;
}
.commander-icon::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(255,226,155,.55);
  pointer-events:none;
}
.commander-icon.active{ outline:3px solid rgba(140,255,160,.28); transform:scale(1.03); }
.commander-lv{
  position:absolute; right:-6px; top:-6px; min-width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#e4c468,#bb8d25); color:#fff7de; font-weight:bold; font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.commander-respect{
  position:absolute; left:-6px; bottom:8px; min-width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#6fd74d,#249325); color:#fff; font-weight:bold; font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.commander-list-footer{
  display:flex; align-items:center; justify-content:center; gap:16px;
  color:#d5be8c; opacity:.9; margin-top:2px;
}
.commander-list-footer .fbtn{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(214,176,98,.3);
  display:flex; align-items:center; justify-content:center; background:rgba(18,24,32,.45);
}

.commander-center{
  position:absolute; left:110px; right:316px; top:78px; bottom:18px;
  display:flex; align-items:flex-end; justify-content:center;
}
.commander-stage{
  width:min(100%, 470px); height:100%;
  display:flex; align-items:flex-end; justify-content:center; position:relative;
}
.commander-stage video, .commander-stage img{
  max-height:96%; max-width:100%; object-fit:contain; filter:drop-shadow(0 20px 24px rgba(0,0,0,.5));
}
.commander-stage .stage-fallback{
  position:absolute; bottom:26px; font-size:11px; color:#d5c39c; opacity:.85;
  background:rgba(0,0,0,.26); padding:6px 10px; border-radius:12px;
}

.commander-right{
  position:absolute; right:72px; top:56px; bottom:18px; width:292px;
  display:flex; flex-direction:column; gap:8px;
}
.commander-header-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.commander-name-wrap{ min-width:0; }
.commander-name{ font-size:24px; color:#e6cb74; line-height:1; font-family:Georgia,serif; }
.commander-role{
  display:flex; align-items:center; gap:8px; color:#d6c08b; font-size:13px; margin-top:5px;
}
.commander-role-badge{ display:inline-flex; align-items:center; gap:4px; color:#d8c588; }
.commander-small-portrait{
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(214,176,98,.35);
  background:rgba(255,255,255,.05); background-size:cover; background-position:center; flex:0 0 auto;
}
.commander-side-tabs{
  position:absolute; right:-62px; top:18px; display:flex; flex-direction:column; gap:10px; z-index:5;
}
.commander-vtab{
  width:62px; min-height:86px; border-radius:12px 0 0 12px; border:1px solid rgba(214,176,98,.26);
  background:rgba(10,14,20,.50); color:#eee0b8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; font-size:11px; text-align:center; cursor:pointer;
  padding:8px 6px;
}
.commander-vtab.active{ background:linear-gradient(180deg,#dfc068,#8e6a24); color:#211606; }
.commander-vtab .ico{ font-size:20px; line-height:1; }

.commander-respect-line{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.commander-respect-num{ font-size:36px; color:#f0d37a; min-width:30px; text-align:center; line-height:1; }
.commander-progress{ flex:1; height:7px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
.commander-progress > div{ height:100%; background:linear-gradient(90deg,#ffda82,#b98c34); width:0%; }
.commander-progress-text{ font-size:11px; color:#f0e3c2; min-width:70px; text-align:right; }
.commander-level-line{ display:flex; align-items:center; justify-content:space-between; color:#f0e3c2; font-size:11px; margin-top:10px; }
.commander-level-label{ font-size:10px; color:#d1c099; margin-top:4px; }
.commander-stamina-line{ display:flex; align-items:center; justify-content:space-between; color:#f0e3c2; font-size:11px; margin-top:12px; }
.commander-stamina-label{ font-size:11px; color:#e7d4aa; margin-bottom:4px; }
.commander-plus{ color:#f3d67e; font-weight:bold; font-size:16px; margin-left:6px; }

.commander-card{
  flex:1; background:transparent; border:none; border-radius:0; padding:0; overflow:auto;
  box-shadow:none;
}
.commander-card::-webkit-scrollbar{ width:8px; }
.commander-card::-webkit-scrollbar-thumb{ background:rgba(214,176,98,.25); border-radius:999px; }

.commander-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--cmd-stat-grid-gap);
  margin-top:12px;
}
.commander-stat{
  text-align:center;
  padding:4px 1px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.commander-stat .ico,
.commander-stat img,
.commander-stat .icon{
  width:var(--cmd-stat-icon-size);
  height:var(--cmd-stat-icon-size);
  margin:0 0 6px 0;
  display:block;
}
.commander-stat .v{
  font-size:var(--cmd-stat-value-size);
  color:#e4c86f;
  line-height:1.05;
  margin:0;
}
.commander-stat .l{
  font-size:var(--cmd-stat-label-size);
  color:#ddd0ad;
  margin-top:3px;
  line-height:1.05;
}

.commander-mid-sep{
  margin-top:10px; height:1px; background:linear-gradient(90deg, transparent, rgba(214,176,98,.38), transparent);
}
.commander-equips-title{ margin-top:10px; color:#e6d2a6; font-size:14px; text-align:center; }
.equipment-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.equip-slot{
  border:1px solid rgba(223,191,115,.22); border-radius:8px; min-height:74px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ead7ab; background:rgba(255,255,255,.02);
  font-size:10px;
}
.equip-slot .icon{ font-size:22px; margin-bottom:4px; }
.equip-slot .only-plus{ font-size:24px; line-height:1; margin-bottom:6px; }

.skills-overlay{
  position:absolute; left:var(--cmd-skills-left); width:var(--cmd-skills-width); top:var(--cmd-skills-top); bottom:var(--cmd-skills-bottom);
  background:linear-gradient(90deg, rgba(8,12,18,.03), rgba(8,12,18,.18) 14%, rgba(8,12,18,.42));
  border-radius:var(--cmd-skills-radius);
  padding:var(--cmd-skills-padding-top) var(--cmd-skills-padding-right) var(--cmd-skills-padding-bottom) var(--cmd-skills-padding-left);
  overflow:hidden;
  z-index:6;
  border:1px solid rgba(214,176,98,.05);
  pointer-events:auto;
}
.skills-wrap{ display:block; height:100%; margin-top:0; }
.skills-stage{ display:none; }
.skill-tree{
  position:relative; width:100%; height:100%; min-height:100%;
  border-radius:var(--cmd-skill-tree-radius);
  background:transparent;
  overflow:hidden;
}
.skill-lanes{
  position:relative; width:100%; min-height:100%;
  height:100%;
}
.skill-col{
  position:absolute; top:var(--cmd-skill-col-top); bottom:var(--cmd-skill-col-bottom); width:var(--cmd-skill-col-width);
}
.skill-col.c0{ left:var(--cmd-skill-col0-left); }
.skill-col.c3{ left:var(--cmd-skill-col3-left); }
.skill-col.c5{ left:var(--cmd-skill-col5-left); }

.skill-col-title{
  position:absolute; left:var(--cmd-skill-title-left); top:var(--cmd-skill-title-top); font-size:var(--cmd-skill-title-font-size); color:#d8c06f; font-family:Georgia,serif;
}
.skill-col-lock{
  position:absolute; left:var(--cmd-skill-lock-left); top:var(--cmd-skill-lock-top); width:var(--cmd-skill-lock-size); height:var(--cmd-skill-lock-size); border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #241d18, #080a0f);
  border:3px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:#e8d29a; font-size:var(--cmd-skill-lock-font-size);
}
.skill-col-lock small{
  position:absolute; bottom:var(--cmd-skill-lock-label-bottom); left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.35); padding:2px 8px; border-radius:999px; font-size:var(--cmd-skill-lock-label-font-size); white-space:nowrap;
}

.skill-main{
  position:absolute; left:var(--cmd-skill-main-left); top:var(--cmd-skill-main-top); width:var(--cmd-skill-main-size); height:var(--cmd-skill-main-size); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:var(--cmd-skill-main-border) solid rgba(205,170,95,.85); box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.skill-main.unlocked{ background:radial-gradient(circle at 30% 30%, #f8de85, #8f671d); color:#24180a; }
.skill-main.locked{ background:radial-gradient(circle at 30% 30%, #1d222b, #070a0f); color:#ccc; border-color:rgba(255,255,255,.14); }
.skill-main .lvl{ font-size:var(--cmd-skill-main-level-font-size); font-weight:bold; }
.skill-main .nm{ font-size:var(--cmd-skill-main-name-font-size); line-height:1.05; margin-top:var(--cmd-skill-main-name-margin-top); width:var(--cmd-skill-main-name-width); }

.skill-sub{


/* V363 castle visual refresh */
#pageScreen.castlePage{position:fixed !important;inset:0 !important;z-index:9999 !important;display:block !important}
.castle-build-page{
  position:absolute !important;
  inset:0 !important;
  min-height:100dvh !important;
  background:
    radial-gradient(circle at 74% 18%, rgba(222,183,84,.12), rgba(0,0,0,0) 24%),
    linear-gradient(180deg, rgba(4,10,16,.92), rgba(5,12,18,.86));
  overflow:hidden;
}
.castle-build-page::before{
  content:'';
  position:absolute;
  inset:-2%;
  background:url('../textures/castle_enter_bg.png') center center / cover no-repeat;
  opacity:.42 !important;
  transform:scale(1.04);
  filter:saturate(1.05) blur(1px);
}
.castle-build-page::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(4,8,12,.84) 0%, rgba(4,8,12,.58) 18%, rgba(4,8,12,.24) 40%, rgba(4,8,12,.52) 100%),
    linear-gradient(180deg, rgba(4,8,12,.12) 0%, rgba(4,8,12,.38) 100%);
  pointer-events:none;
}
.castle-ui{position:relative;display:grid;grid-template-columns:104px 1fr;gap:0;height:100%;min-height:100dvh;z-index:1}
.castle-sidebar{position:relative;z-index:2;padding-top:72px !important;padding-bottom:16px;background:linear-gradient(180deg,rgba(5,11,16,.84),rgba(6,13,18,.78)) !important;backdrop-filter:blur(10px)}
.castle-global-close{
  position:absolute;
  top:18px;
  left:18px;
  z-index:7;
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,230,170,.34);
  background:linear-gradient(180deg,#cb5347,#7e1f18);
  color:#fff8f3;
  font:700 28px Georgia,serif;
  box-shadow:0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.castle-main{position:relative;z-index:2;padding:18px 22px 18px 22px !important;overflow:auto}
.castle-topbar{padding-left:62px}
.castle-title{font-size:34px !important;text-shadow:0 4px 22px rgba(0,0,0,.45)}
.castle-queue{background:linear-gradient(180deg,rgba(12,25,33,.68),rgba(8,17,24,.84)) !important;border:1px solid rgba(255,255,255,.08);border-radius:16px !important;padding:14px 18px !important}
.castle-mainhall-wrap{margin:8px 0 18px !important}
.castle-grid-row{grid-template-columns:54px repeat(4,minmax(0,240px));gap:18px !important;margin:14px 0 !important}
.castle-card{border:1px solid rgba(226,192,104,.68) !important;border-radius:16px !important;background:linear-gradient(180deg,rgba(10,16,22,.92),rgba(6,12,18,.92)) !important;box-shadow:0 16px 34px rgba(0,0,0,.34) !important;transform:translateZ(0)}
.castle-card.large{width:min(560px,72vw) !important;height:210px !important}
.castle-card.small{height:152px !important}
.castle-card img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.castle-card.img-missing{background:
  radial-gradient(circle at 24% 22%, rgba(222,190,108,.14), rgba(0,0,0,0) 34%),
  linear-gradient(180deg, rgba(19,33,44,.96), rgba(7,16,24,.98)) !important}
.castle-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,12,.10) 0%, rgba(5,8,12,.26) 50%, rgba(5,8,12,.82) 100%);z-index:1}
.castle-card::after{display:none !important}
.castle-card-level,.castle-card-name,.castle-card-queued{z-index:2 !important}
.castle-card-level{right:10px !important;top:8px !important;padding:4px 10px !important;border-radius:0 0 0 12px !important;background:rgba(13,35,46,.92) !important}
.castle-card-name{bottom:14px !important;padding:0 8px;font-size:22px !important}
.castle-card-queued{height:36px !important;background:linear-gradient(180deg,#8eb254,#6d9637) !important}
.castle-upgrade-overlay{padding:24px;background:rgba(2,6,10,.56) !important;backdrop-filter:blur(10px)}
.castle-upgrade-modal{
  width:min(1040px,96vw) !important;
  max-height:min(88vh,900px) !important;
  padding:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  border:1px solid rgba(239,215,150,.20) !important;
  background:linear-gradient(180deg,rgba(6,12,18,.98),rgba(8,16,24,.98)) !important;
  box-shadow:0 40px 100px rgba(0,0,0,.54) !important;
}
.castle-upgrade-hero{position:relative;min-height:248px;background:linear-gradient(180deg,rgba(14,24,34,.88),rgba(7,14,20,.96));overflow:hidden}
.castle-upgrade-hero.img-missing{background:
  radial-gradient(circle at 18% 18%, rgba(227,188,95,.18), rgba(0,0,0,0) 26%),
  linear-gradient(135deg, rgba(18,37,52,.98), rgba(8,16,24,.98))}
.castle-upgrade-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.castle-upgrade-hero-dim{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(6,12,18,.34) 0%, rgba(6,12,18,.42) 34%, rgba(6,12,18,.76) 100%),
  linear-gradient(180deg, rgba(6,12,18,.10), rgba(6,12,18,.82))}
.castle-upgrade-hero-content{position:relative;z-index:1;padding:26px 26px 22px 26px;max-width:72%}
.castle-upgrade-kicker{display:inline-flex;padding:6px 12px;border-radius:999px;margin-bottom:12px;background:rgba(255,230,170,.12);border:1px solid rgba(255,230,170,.18);color:#f4deb0;font:700 13px Georgia,serif;letter-spacing:.3px}
.castle-upgrade-close{top:16px !important;right:16px !important;width:44px !important;height:44px !important;font-size:22px !important;background:linear-gradient(180deg,#cb5347,#7e1f18) !important;z-index:2}
.castle-detail-title{font-size:38px !important;margin-bottom:10px !important;text-shadow:0 4px 18px rgba(0,0,0,.42)}
.castle-detail-sub{font-size:18px !important;color:#e3d6bb !important;max-width:720px !important}
.castle-upgrade-body{padding:24px}
.castle-upgrade-columns{display:grid;grid-template-columns:1.12fr .88fr;gap:18px}
.castle-upgrade-section{border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:18px;background:linear-gradient(180deg,rgba(13,24,32,.84),rgba(8,16,22,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.castle-section-title{font-size:24px;color:#efd690;margin-bottom:14px}
.castle-section-title.with-gap{margin-top:18px}
.castle-resource-list{gap:12px !important}
.castle-resource-item,.castle-queue-item{border-radius:14px !important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)) !important;border:1px solid rgba(255,255,255,.06) !important;padding:14px 14px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.castle-resource-item b,.castle-queue-item b{font-size:18px}
.castle-upgrade-btn{margin-top:16px !important;padding:16px 18px !important;border-radius:16px !important;font-size:28px !important;box-shadow:0 12px 26px rgba(0,0,0,.22)}
.castle-status-help{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.castle-help{font-size:15px !important;line-height:1.55 !important;color:#d6c7a2 !important}
@media (max-width: 980px){
  .castle-main{padding:14px 14px 18px 14px !important}
  .castle-topbar{padding-left:56px}
  .castle-grid-row{grid-template-columns:42px repeat(3,minmax(0,1fr)) !important}
  .castle-upgrade-columns{grid-template-columns:1fr}
  .castle-upgrade-hero-content{max-width:100%;padding-right:72px}
}
@media (max-width: 760px){
  .castle-ui{grid-template-columns:88px 1fr !important}
  .castle-sidebar{padding-top:72px !important}
  .castle-grid-row{grid-template-columns:36px repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .castle-card.large{width:100% !important;height:180px !important}
  .castle-card.small{height:128px !important}
  .castle-card-name{font-size:18px !important}
  .castle-upgrade-overlay{padding:10px}
  .castle-upgrade-modal{width:100% !important;max-height:92vh !important;border-radius:22px !important}
  .castle-upgrade-hero{min-height:210px}
  .castle-detail-title{font-size:30px !important}
  .castle-upgrade-body{padding:14px}
}

/* ===========================================================================
   V367 — ajustes mínimos em cima do V363 existente.
   NÃO removemos nada. Apenas corrigimos 3 problemas pontuais:
   1) modal de upgrade cortado (overflow);
   2) X global cobrindo o modal (z-index);
   3) War Hall sem numeração (resolvido no JS, row 4 ganha sua linha).
   =========================================================================== */

/* Modal com scroll real quando conteúdo ultrapassa a altura. */
#pageScreen.castlePage .castle-upgrade-modal{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin;
}
#pageScreen.castlePage .castle-upgrade-modal::-webkit-scrollbar{width:8px}
#pageScreen.castlePage .castle-upgrade-modal::-webkit-scrollbar-thumb{background:rgba(239,215,150,.35);border-radius:8px}

/* Overlay do modal acima do X global; X global abaixo do overlay. */
#pageScreen.castlePage .castle-upgrade-overlay{z-index:10000 !important}
#pageScreen.castlePage .castle-global-close{z-index:4 !important}

/* Esconder o X global quando o modal está aberto (via classe no body). */
body.castle-modal-open #pageScreen.castlePage .castle-global-close{display:none !important}

/* Grade de 3 colunas (War Hall na linha 4 ganha sua numeração e fica do
   mesmo tamanho dos outros cards pequenos). */
#pageScreen.castlePage .castle-grid-row{
  grid-template-columns:54px repeat(3, minmax(0, 1fr)) !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}