/* Building and research details open above their catalog instead of extending the page. */
html.planet-detail-modal-enabled #view-planet :is(#buildingDetail,#technologyDetail):not(.is-modal-open){
  display:none!important;
}

body>.planet-detail-overlay{
  position:fixed;
  inset:0;
  z-index:23050;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:clamp(12px,2vw,34px);
  background:rgba(0,5,10,.78);
  backdrop-filter:blur(5px);
}

body>.planet-detail-overlay[hidden]{display:none!important}

body>.planet-detail-overlay .planet-detail-dialog{
  position:relative;
  width:min(1380px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  height:min(820px,calc(100dvh - 32px));
  box-sizing:border-box;
  overflow:hidden;
  border:18px solid transparent;
  border-image:url("../assets/ui/v4.1/frames/panel-sidebar.webp") 32 / 18px / 0 stretch;
  background:#020b13;
  box-shadow:0 26px 90px #000,0 0 0 1px rgba(86,203,244,.2);
}

body>.planet-detail-overlay .planet-detail-modal-heading{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

body>.planet-detail-overlay .planet-detail-close{
  position:absolute;
  z-index:20;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #a97a32;
  border-radius:2px;
  background:rgba(2,14,23,.94);
  color:#f1c968;
  font:700 25px/1 Georgia,"Times New Roman",serif;
  cursor:pointer;
  box-shadow:0 5px 15px #000;
}

body>.planet-detail-overlay .planet-detail-close:is(:hover,:focus-visible){
  border-color:#55d8ff;
  color:#fff;
  outline:1px solid rgba(85,216,255,.55);
}

#planetDetailOverlay .planet-detail-slot{
  min-width:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
}

#planetDetailOverlay .module-detail{
  position:relative;
  display:block!important;
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  box-sizing:border-box;
  margin:0!important;
  padding:24px 58px 24px 24px;
  overflow:auto;
  border:0;
  border-radius:0;
  background:#03101a;
  isolation:isolate;
}

#planetDetailOverlay[data-kind="research"] #technologyDetail{
  background:#03101a var(--research-detail-art,url("../assets/ui/v4.1/cards/buildings/lab.webp")) center/cover no-repeat;
}

#planetDetailOverlay .module-detail::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(1,8,15,.78) 0 34%,rgba(1,8,15,.48) 64%,rgba(1,8,15,.22)),linear-gradient(0deg,rgba(1,8,15,.68),transparent 52%);
  pointer-events:none;
}

#planetDetailOverlay .module-detail>*:not(.building-visual-card){position:relative;z-index:2}
#planetDetailOverlay .module-detail .building-visual-card{position:absolute;z-index:-2;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0}
#planetDetailOverlay .module-detail .building-visual-card::after{display:none}
#planetDetailOverlay .module-detail .building-visual-card img{width:100%;height:100%;object-fit:cover;opacity:.94}
#planetDetailOverlay :is(.construction-state-line,.construction-cost-grid,.construction-meta-grid,.building-prerequisite-list,.production-control-panel){max-width:720px;background-color:rgba(2,13,22,.62)}

body.planet-detail-modal-open{overflow:hidden!important}

@media(max-width:760px){
  body>.planet-detail-overlay{padding:7px}
  body>.planet-detail-overlay .planet-detail-dialog{
    width:calc(100vw - 10px);
    height:calc(100dvh - 10px);
    max-height:calc(100dvh - 10px);
    border-width:10px;
  }
  #planetDetailOverlay .planet-detail-slot{max-height:100%}
  #planetDetailOverlay .module-detail{
    min-height:0;
    max-height:100%;
    padding:18px 46px 18px 14px;
  }
  body>.planet-detail-overlay .planet-detail-close{top:5px;right:5px;width:34px;height:34px}
}