/* Responsive reference contract: 1920x1080 at 100%, safe content area 1900x850. */
:root{
  --desktop-content-max:160rem;
  --desktop-inspector-min:34rem;
  --desktop-inspector-max:46rem;
}

@media(min-width:1101px){
  .main-menu,.topbar-main,.game-shell{
    width:100%;
    max-width:var(--desktop-content-max);
    margin-inline:auto;
  }

  .game-shell{
    grid-template-columns:minmax(0,1fr) clamp(var(--desktop-inspector-min),35vw,var(--desktop-inspector-max));
  }

  .world-column{
    --world-view-height:clamp(30rem,calc(100dvh - 20.5rem),44rem)!important;
  }

  #world-view-relationships .relationship-command{
    overflow-y:hidden!important;
    scrollbar-gutter:auto;
  }

  #world-view-relationships .relationship-network{
    height:100%;
    min-height:0!important;
  }

  #world-view-relationships .relation-node{
    top:clamp(4rem,var(--actor-y),calc(100% - 6rem));
    width:clamp(15rem,29%,19rem);
    min-height:5.75rem;
    grid-template-columns:3.5rem minmax(0,1fr) auto;
    gap:.7rem;
    padding:.7rem .8rem;
  }

  #world-view-relationships .relation-monogram{
    width:3.45rem;
    height:3.45rem;
    font-size:1.05rem;
  }

  #world-view-relationships .relation-copy small{font-size:.58rem}
  #world-view-relationships .relation-copy strong{margin:.18rem 0;font-size:.96rem}
  #world-view-relationships .relation-copy em{font-size:.69rem;line-height:1.34}
  #world-view-relationships .relation-score b{font-size:1.15rem}
  #world-view-relationships .relation-score small{font-size:.62rem}
  #world-view-relationships .dynasty-network-center{width:13.5rem;padding:1rem}
  #world-view-relationships .dynasty-network-center strong{font-size:1.25rem}
  #world-view-relationships .relation-legend{bottom:.75rem}
  #world-view-relationships .relation-node[data-relation="authorities"]{
    top:min(78%,calc(100% - 6.5rem));
  }

  #world-view-estate .industrial-site-scene{
    min-height:40rem;
    overflow:hidden;
  }

  #world-view-estate .industrial-facility{
    display:block;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }

  #world-view-estate .industrial-facility:hover,
  #world-view-estate .industrial-facility:focus-visible,
  #world-view-estate .industrial-facility.selected{
    border:0;
    background:transparent;
    outline:0;
  }

  #world-view-estate .industrial-facility-motif{
    box-sizing:border-box;
    width:100%;
    height:100%;
    overflow:hidden;
    border:2px solid #765936;
    background:#19130dbf;
    box-shadow:0 8px 18px #0008;
  }

  #world-view-estate .industrial-facility-motif img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
  }

  #world-view-estate .industrial-facility-copy{
    position:absolute;
    z-index:4;
    top:calc(100% + .35rem);
    left:50%;
    width:max(100%,13rem);
    padding:.42rem .5rem;
    border:1px solid #765936;
    background:#17110df2;
    box-shadow:0 7px 14px #0009;
    transform:translateX(-50%);
  }

  #world-view-estate .industrial-facility[data-map-slot="3"] .industrial-facility-copy,
  #world-view-estate .industrial-facility[data-map-slot="5"] .industrial-facility-copy{
    top:auto;
    bottom:calc(100% + .35rem);
  }

  #world-view-estate .industrial-facility.state-blocked .industrial-facility-motif{border-color:#8b6044}
  #world-view-estate .industrial-facility.state-developing .industrial-facility-motif,
  #world-view-estate .industrial-facility.state-under-construction .industrial-facility-motif{border-color:#799aad}
  #world-view-estate .industrial-facility.state-acquired .industrial-facility-motif,
  #world-view-estate .industrial-facility.state-planned .industrial-facility-motif{border-color:#c39749}
  #world-view-estate .industrial-facility.state-operational .industrial-facility-motif{border-color:#659366}
  #world-view-estate .industrial-facility:hover .industrial-facility-motif,
  #world-view-estate .industrial-facility:focus-visible .industrial-facility-motif,
  #world-view-estate .industrial-facility.selected .industrial-facility-motif{
    border-color:#e2b65a;
    outline:2px solid #f1d181;
    outline-offset:2px;
    filter:brightness(1.08);
  }
}

@media(min-width:1101px) and (max-height:900px){
  .world-column{
    --world-view-height:clamp(28rem,calc(100dvh - 20.5rem),36rem)!important;
  }
}

@media(min-width:1101px) and (max-height:820px){
  .world-column{
    --world-view-height:clamp(25rem,calc(100dvh - 17.5rem),31rem)!important;
  }
}

@media(min-width:1101px) and (max-width:1500px){
  #world-view-relationships .relationship-command{
    overflow-y:scroll!important;
    scrollbar-gutter:stable;
  }

  #world-view-relationships .relationship-network{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:.85rem;
    height:auto!important;
    min-height:0!important;
    padding:1rem;
    overflow:visible!important;
  }

  #world-view-relationships .relationship-network::before{inset:0}
  #world-view-relationships .relation-lines{display:none}
  #world-view-relationships .dynasty-network-center,
  #world-view-relationships .relation-node{
    position:relative;
    left:auto;
    top:auto!important;
    width:100%;
    transform:none;
  }

  #world-view-relationships .dynasty-network-center{grid-column:1/-1}
  #world-view-relationships .relation-node:hover,
  #world-view-relationships .relation-node:focus-visible,
  #world-view-relationships .relation-node.selected{transform:translateY(-2px)}
  #world-view-relationships .relation-legend{
    position:relative;
    left:auto;
    bottom:auto;
    grid-column:1/-1;
    justify-content:center;
    transform:none;
  }
}

@media(min-width:2561px){
  body{
    background:
      linear-gradient(90deg,#090704 0,transparent 16%,transparent 84%,#090704 100%),
      #100d09;
  }
}