#pageScreen.castlePage{
  position:fixed !important;
  inset:0 !important;
  overflow:hidden !important;
  background:#05070c !important;
  z-index:140 !important;
}
#pageScreen.castlePage .castle-build-page{
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  background:#05070c !important;
}
#pageScreen.castlePage .castle-fit{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  place-items:center !important;
  padding:8px !important;
}
#pageScreen.castlePage .castle-frame{
  position:relative !important;
  width:calc(var(--castle-frame-w, 1280) * 1px) !important;
  height:calc(var(--castle-frame-h, 720) * 1px) !important;
  overflow:hidden !important;
  background:#091018 !important;
}
#pageScreen.castlePage .castle-scene{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:1280px !important;
  height:720px !important;
  transform-origin:top left !important;
  overflow:hidden !important;
  background:#091018 !important;
  color:#f4e4bf !important;
}
#pageScreen.castlePage .castle-scene,
#pageScreen.castlePage .castle-scene *{box-sizing:border-box !important;}
#pageScreen.castlePage .castle-bg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.10) 32%, rgba(0,0,0,.18) 100%),
    url('../textures/castle_enter_bg.png') center/cover no-repeat !important;
}
#pageScreen.castlePage .castle-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.10) 18%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}
#pageScreen.castlePage .castle-close,
#pageScreen.castlePage .castle-overlay-close{
  appearance:none !important;
  border:none !important;
  border-radius:50% !important;
  background:rgba(13,20,32,.78) !important;
  color:#e2c872 !important;
  box-shadow:0 0 0 2px rgba(221,189,95,.35),0 8px 22px rgba(0,0,0,.34) !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
}
#pageScreen.castlePage .castle-close{
  position:absolute !important;
  left:36px !important;
  top:28px !important;
  width:58px !important;
  height:58px !important;
  font:400 28px/1 Georgia,serif !important;
  z-index:40 !important;
}
#pageScreen.castlePage .castle-title{
  position:absolute !important;
  left:50% !important;
  top:22px !important;
  transform:translateX(-50%) !important;
  font:400 28px/1.1 Georgia,serif !important;
  color:#f1dfaa !important;
  text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 4px 10px rgba(0,0,0,.7) !important;
  z-index:30 !important;
}
#pageScreen.castlePage .castle-queue-top{
  position:absolute !important;
  left:822px !important;
  top:22px !important;
  min-width:228px !important;
  padding:10px 16px !important;
  border-radius:6px !important;
  background:rgba(16,28,38,.72) !important;
  color:#f2e8c9 !important;
  font:400 18px/1.1 Georgia,serif !important;
  text-align:center !important;
  z-index:30 !important;
}
#pageScreen.castlePage .castle-side{
  position:absolute !important;
  left:112px !important;
  top:190px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  z-index:25 !important;
}
#pageScreen.castlePage .castle-sidebtn,
#pageScreen.castlePage .castle-menu-lines{
  width:60px !important;
  height:60px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:#ead38c !important;
  background:radial-gradient(circle at 35% 30%, rgba(106,113,93,.58), rgba(57,63,49,.52) 58%, rgba(19,28,31,.56) 100%) !important;
  box-shadow:0 0 0 2px rgba(226,194,105,.38), inset 0 0 20px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(1px) !important;
  font-size:28px !important;
}
#pageScreen.castlePage .castle-sidebtn{cursor:pointer !important; padding:0 !important; border:none !important;}
#pageScreen.castlePage .castle-sidebtn img{width:34px !important; height:34px !important; object-fit:contain !important; display:block !important; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
#pageScreen.castlePage .castle-sidebtn.active{box-shadow:0 0 0 3px rgba(240,219,141,.42), inset 0 0 20px rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.28) !important; background:radial-gradient(circle at 35% 30%, rgba(134,141,115,.68), rgba(68,74,58,.66) 58%, rgba(24,34,37,.72) 100%) !important;}
#pageScreen.castlePage .castle-menu-lines{
  margin-top:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  width:60px !important;
  height:42px !important;
  font-size:34px !important;
}
#pageScreen.castlePage .castle-content{
  position:absolute !important;
  left:250px !important;
  top:72px !important;
  width:936px !important;
  height:608px !important;
  z-index:20 !important;
}
#pageScreen.castlePage .castle-mainhall-wrap{
  position:absolute !important;
  left:109px !important;
  top:0 !important;
  width:700px !important;
  height:176px !important;
}
#pageScreen.castlePage .castle-grid-scroll{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:188px !important;
  bottom:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-left:10px !important;
  padding-right:8px !important;
  scrollbar-width:none !important;
}
#pageScreen.castlePage .castle-grid-scroll::-webkit-scrollbar{display:none !important;}
#pageScreen.castlePage .castle-grid-inner{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  padding:0 0 30px 0 !important;
}
#pageScreen.castlePage .castle-grid-row{
  display:grid !important;
  grid-template-columns:68px repeat(3, 1fr) !important;
  gap:16px !important;
  align-items:center !important;
}
#pageScreen.castlePage .castle-grid-row.row-4{
  grid-template-columns:68px 1fr 1fr 1fr !important;
}
#pageScreen.castlePage .castle-grid-row.row-4 .castle-card-wrap{
  grid-column:2 / span 3 !important;
  display:flex !important;
  justify-content:center !important;
}
#pageScreen.castlePage .castle-row-num{
  width:58px !important;
  height:58px !important;
  margin:0 auto 0 6px !important;
  display:grid !important;
  place-items:center !important;
  color:#e5cd88 !important;
  font:400 26px/1 Georgia,serif !important;
  border:1px solid rgba(220,187,93,.48) !important;
  transform:rotate(45deg) !important;
  background:rgba(9,18,30,.18) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.18) !important;
}
#pageScreen.castlePage .castle-row-num span{transform:rotate(-45deg) !important; display:block !important;}
#pageScreen.castlePage .castle-card-wrap{
  width:100% !important;
}
#pageScreen.castlePage .castle-card{
  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
  border-radius:18px !important;
  box-shadow:0 0 0 1px rgba(216,177,78,.48), inset 0 0 0 1px rgba(255,248,214,.10), 0 10px 24px rgba(0,0,0,.34) !important;
  cursor:pointer !important;
  background:#111 !important;
}
#pageScreen.castlePage .castle-card.large{height:176px !important;}
#pageScreen.castlePage .castle-card.small{height:136px !important;}
#pageScreen.castlePage .castle-card.warhall{width:230px !important;}
#pageScreen.castlePage .castle-card > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
}
#pageScreen.castlePage .castle-card-shade{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18) 50%, rgba(0,0,0,.48) 100%) !important;
}
#pageScreen.castlePage .castle-card-level,
#pageScreen.castlePage .castle-card-queued{
  position:absolute !important;
  right:12px !important;
  top:10px !important;
  min-width:70px !important;
  padding:6px 10px !important;
  border-radius:0 0 8px 8px !important;
  background:rgba(15,52,79,.84) !important;
  color:#fff3d0 !important;
  font:400 16px/1 Georgia,serif !important;
  text-align:center !important;
  z-index:3 !important;
}
#pageScreen.castlePage .castle-card-queued{top:auto !important; bottom:10px !important; border-radius:8px !important; min-width:auto !important;}
#pageScreen.castlePage .castle-card-name{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:14px !important;
  text-align:center !important;
  color:#efe1bd !important;
  font:400 18px/1.12 Georgia,serif !important;
  text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 3px 10px rgba(0,0,0,.9) !important;
  z-index:3 !important;
}
#pageScreen.castlePage .castle-card.large .castle-card-name{font-size:22px !important; bottom:18px !important;}
#pageScreen.castlePage .castle-upgrade-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:200 !important;
  display:none !important;
  background:rgba(5,10,18,.96) !important;
  backdrop-filter:none !important;
}
#pageScreen.castlePage .castle-upgrade-overlay.active{display:block !important;}
#pageScreen.castlePage .castle-upgrade-modal{
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:linear-gradient(180deg, rgba(6,11,18,.92), rgba(5,10,16,.96)) !important;
}
#pageScreen.castlePage .castle-upgrade-modal::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('../textures/castle_enter_bg.png') center/cover no-repeat;
  opacity:.38;
}
#pageScreen.castlePage .castle-upgrade-modal::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,10,18,.32), rgba(5,10,18,.54) 40%, rgba(5,10,18,.88) 100%);
}
#pageScreen.castlePage .castle-overlay-close{z-index:230 !important;}
#pageScreen.castlePage .castle-upgrade-close{
  display:none !important;
}
#pageScreen.castlePage .castle-upgrade-hero{
  position:absolute !important;
  left:34px !important;
  right:34px !important;
  top:28px !important;
  height:250px !important;
  min-height:250px !important;
  overflow:hidden !important;
  border-radius:22px !important;
  box-shadow:0 0 0 1px rgba(214,177,78,.42), 0 18px 40px rgba(0,0,0,.34) !important;
  z-index:2 !important;
}
#pageScreen.castlePage .castle-upgrade-hero-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
#pageScreen.castlePage .castle-upgrade-hero-dim{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16) 42%, rgba(7,12,18,.72) 100%) !important;
}
#pageScreen.castlePage .castle-upgrade-hero-content{
  position:absolute !important;
  left:32px !important;
  right:32px !important;
  bottom:28px !important;
  z-index:3 !important;
}
#pageScreen.castlePage .castle-upgrade-kicker{
  font:700 16px/1.1 Georgia,serif !important;
  color:#e0bf73 !important;
  margin-bottom:8px !important;
}
#pageScreen.castlePage .castle-detail-title{
  font:400 38px/1.1 Georgia,serif !important;
  color:#f2e3bb !important;
  text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 4px 14px rgba(0,0,0,.8) !important;
}
#pageScreen.castlePage .castle-detail-sub{
  margin-top:10px !important;
  max-width:720px !important;
  font:400 18px/1.45 Georgia,serif !important;
  color:#dfd2b0 !important;
}
#pageScreen.castlePage .castle-upgrade-body{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:302px !important;
  overflow:auto !important;
  padding:24px 34px 36px !important;
  scrollbar-width:none !important;
  z-index:2 !important;
}
#pageScreen.castlePage .castle-upgrade-body::-webkit-scrollbar{display:none !important;}
#pageScreen.castlePage .castle-upgrade-columns{
  display:grid !important;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap:22px !important;
}
#pageScreen.castlePage .castle-upgrade-section{
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) !important;
  padding:20px !important;
}
#pageScreen.castlePage .castle-section-title{
  font:400 24px/1.1 Georgia,serif !important;
  color:#efd690 !important;
  margin-bottom:14px !important;
}
#pageScreen.castlePage .castle-section-title.with-gap{margin-top:18px !important;}
#pageScreen.castlePage .castle-resource-list,
#pageScreen.castlePage .castle-queue-list{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
}
#pageScreen.castlePage .castle-resource-item,
#pageScreen.castlePage .castle-queue-item,
#pageScreen.castlePage .castle-help,
#pageScreen.castlePage .castle-status-help{
  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 !important;
  color:#dccfae !important;
  font:400 15px/1.45 Georgia,serif !important;
}
#pageScreen.castlePage .castle-resource-item b,
#pageScreen.castlePage .castle-queue-item b{font-size:18px !important; color:#f4e7c4 !important;}
#pageScreen.castlePage .castle-upgrade-btn{
  display:block !important;
  width:100% !important;
  margin-top:16px !important;
  padding:16px 18px !important;
  border:none !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#e0c475,#8f6f2f) !important;
  color:#211705 !important;
  font:700 26px/1 Georgia,serif !important;
  cursor:pointer !important;
}
#pageScreen.castlePage .castle-upgrade-btn[disabled]{opacity:.55 !important; cursor:not-allowed !important;}
#pageScreen.castlePage .img-missing{background:linear-gradient(180deg,#172430,#0d151d) !important;}

#pageScreen.castlePage #castleUpgradeOverlay.castle-upgrade-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:300 !important;
  display:none !important;
  background:rgba(4,8,14,.88) !important;
  backdrop-filter:none !important;
}
#pageScreen.castlePage #castleUpgradeOverlay.castle-upgrade-overlay.active{display:block !important;}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-modal{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-modal::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('../textures/castle_enter_bg.png') center center / cover no-repeat;
  opacity:1;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-modal::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,11,18,.18), rgba(6,11,18,.38) 36%, rgba(5,10,18,.76) 100%);
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-hero{
  position:absolute !important;
  left:56px !important;
  right:56px !important;
  top:72px !important;
  height:292px !important;
  min-height:292px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:0 0 0 1px rgba(214,177,78,.46), 0 22px 46px rgba(0,0,0,.34) !important;
  z-index:2 !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-hero-content{
  position:absolute !important;
  left:34px !important;
  right:34px !important;
  bottom:26px !important;
  max-width:900px !important;
  z-index:3 !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-body{
  position:absolute !important;
  left:34px !important;
  right:34px !important;
  top:390px !important;
  bottom:28px !important;
  overflow:auto !important;
  padding:0 !important;
  z-index:3 !important;
  scrollbar-width:none !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-body::-webkit-scrollbar{display:none !important;}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-columns{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:24px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-section{
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(8,14,22,.78), rgba(8,14,22,.64)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(3px) !important;
  padding:22px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-resource-list,
#pageScreen.castlePage #castleUpgradeOverlay .castle-queue-list{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-resource-item,
#pageScreen.castlePage #castleUpgradeOverlay .castle-queue-item,
#pageScreen.castlePage #castleUpgradeOverlay .castle-help,
#pageScreen.castlePage #castleUpgradeOverlay .castle-status-help{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-overlay-close{
  position:absolute !important;
  right:28px !important;
  top:28px !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  border:1px solid rgba(223,191,101,.65) !important;
  background:linear-gradient(180deg, rgba(14,28,48,.96), rgba(8,16,28,.96)) !important;
  color:#e5ca7e !important;
  box-shadow:0 10px 28px rgba(0,0,0,.3) !important;
  z-index:5 !important;
}
@media (max-width: 900px){
  #pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-hero{left:28px !important; right:28px !important; top:72px !important; height:220px !important; min-height:220px !important;}
  #pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-body{left:20px !important; right:20px !important; top:312px !important; bottom:20px !important;}
  #pageScreen.castlePage #castleUpgradeOverlay .castle-upgrade-columns{grid-template-columns:1fr !important;}
  #pageScreen.castlePage #castleUpgradeOverlay .castle-detail-title{font-size:30px !important;}
  #pageScreen.castlePage #castleUpgradeOverlay .castle-detail-sub{font-size:16px !important; max-width:none !important;}
}

body.castle-open #bottomUI,
body.castle-open #btnFullscreen,
body.castle-open #resourceBar,
body.castle-open #formationDock,
body.castle-open .reports-float-btn-wrap,
body.castle-open .reportsFloatingButton{display:none !important; visibility:hidden !important; pointer-events:none !important;}

/* =====================================================================
 * Upgrade modal - new compact layout (inline player resources next to
 * the cost, color-coded). Replaces the old two-column "cost here / your
 * resources there" design which was cramped and duplicated information.
 * ===================================================================== */

#pageScreen.castlePage #castleUpgradeOverlay .castle-level-strip{
  display:flex !important; align-items:center !important; gap:12px !important;
  margin:6px 0 14px !important; flex-wrap:wrap !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-pill{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  padding:8px 16px !important; border:1px solid rgba(201,162,75,.38) !important;
  background:linear-gradient(180deg, rgba(22,18,13,.90), rgba(12,10,7,.94)) !important;
  border-radius:10px !important; min-width:96px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 4px 10px rgba(0,0,0,.22) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-pill.next{
  border-color:rgba(118,192,120,.55) !important;
  box-shadow:inset 0 0 0 1px rgba(118,192,120,.12), 0 4px 10px rgba(0,0,0,.22) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-pill b{
  font-size:18px !important; color:#f3e9cf !important; margin-top:2px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-arrow{
  font-size:22px !important; color:#c9a24b !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-time{
  margin-left:auto !important; display:flex !important; flex-direction:column !important;
  align-items:flex-end !important; padding:8px 14px !important;
  border:1px solid rgba(110,170,255,.42) !important; border-radius:10px !important;
  background:rgba(14,22,34,.85) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-time b{
  font-size:16px !important; color:#dbe9ff !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-level-label{
  font-size:10px !important; letter-spacing:.18em !important; text-transform:uppercase !important;
  color:#b6a678 !important;
}

#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-list{
  display:flex !important; flex-direction:column !important; gap:6px !important;
  margin-bottom:14px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row{
  display:grid !important;
  grid-template-columns: 28px 1fr auto !important;
  align-items:center !important; gap:10px !important;
  padding:7px 12px !important;
  border:1px solid rgba(201,162,75,.25) !important;
  background:linear-gradient(180deg, rgba(22,18,13,.92), rgba(10,8,6,.94)) !important;
  border-radius:8px !important;
  transition:border-color .18s ease, background .18s ease !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row.ok{
  border-color:rgba(118,192,120,.42) !important;
  background:linear-gradient(180deg, rgba(20,32,22,.92), rgba(10,16,12,.94)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row.missing{
  border-color:rgba(208,90,74,.50) !important;
  background:linear-gradient(180deg, rgba(34,18,16,.94), rgba(20,10,8,.94)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-icon{
  font-size:18px !important; text-align:center !important; line-height:1 !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-label{
  font-size:14px !important; color:#d6c99c !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-values{
  display:flex !important; align-items:baseline !important; gap:4px !important;
  font-family:Georgia,serif !important; font-size:15px !important;
  white-space:nowrap !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-have{
  color:#f3e9cf !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row.missing .castle-cost-have{
  color:#f4a89c !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row.ok .castle-cost-have{
  color:#c4e0a6 !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-need{
  color:#b6a678 !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-sep{
  color:#7b6f52 !important; font-weight:normal !important; margin:0 2px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-mark{
  margin-left:6px !important; font-weight:bold !important; font-size:14px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row.ok .castle-cost-mark{
  color:#8fd38f !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-cost-row.missing .castle-cost-mark{
  color:#e78470 !important;
}

/* Requirement pills (same compact visual as cost rows) */
#pageScreen.castlePage #castleUpgradeOverlay .castle-req-list{
  display:flex !important; flex-direction:column !important; gap:6px !important;
  margin-bottom:10px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-req-item{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  padding:7px 12px !important; border-radius:8px !important;
  border:1px solid rgba(201,162,75,.25) !important;
  background:linear-gradient(180deg, rgba(22,18,13,.92), rgba(10,8,6,.94)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-req-item.ok{
  border-color:rgba(118,192,120,.42) !important;
  background:linear-gradient(180deg, rgba(20,32,22,.92), rgba(10,16,12,.94)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-req-item.missing{
  border-color:rgba(208,90,74,.45) !important;
  background:linear-gradient(180deg, rgba(34,18,16,.94), rgba(20,10,8,.94)) !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-req-name{
  color:#e1d2a0 !important; font-size:14px !important;
}
#pageScreen.castlePage #castleUpgradeOverlay .castle-req-values{
  display:flex !important; align-items:baseline !important; gap:4px !important;
  font-family:Georgia,serif !important; font-size:15px !important;
}

#pageScreen.castlePage #castleUpgradeOverlay .castle-section-subtitle{
  font-family:Georgia,serif !important; font-size:12px !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color:#b6a678 !important; margin:14px 0 8px !important;
  padding-bottom:4px !important; border-bottom:1px solid rgba(201,162,75,.15) !important;
}