/* Global act orientation: the historical guide belongs to the application header. */
.topbar-main{
  grid-template-columns:minmax(15rem,20rem) minmax(30rem,1.35fr) auto minmax(27rem,32rem) auto;
  gap:.65rem;
  padding:.65rem 1.2rem;
}
.topbar-main>.brand,
.topbar-main>.act-orientation,
.topbar-main>.world-date,
.topbar-main>.global-resources,
.topbar-main>.turn-control{min-width:0}
.brand h1,.brand small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.act-orientation.history-ribbon{
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  gap:.08rem;
  max-width:none;
  min-height:3.15rem;
  margin:0;
  padding:.28rem .7rem;
  overflow:hidden;
  border-left:3px solid var(--blue);
  background:linear-gradient(90deg,#17242bd9,#17242b73 72%,transparent);
  color:#c6d9e3;
}
.act-orientation.history-ribbon strong{
  min-width:0;
  overflow:hidden;
  color:#a9d2e9;
  font-size:.86rem;
  line-height:1.12;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.act-orientation.history-ribbon p{
  display:-webkit-box;
  min-width:0;
  margin:0;
  overflow:hidden;
  font-size:.72rem;
  line-height:1.18;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

@media(min-width:1101px){
  .world-column{--world-view-height:clamp(30rem,calc(100dvh - 17.7rem),47rem)!important}
}

@media(min-width:1101px) and (max-width:1550px){
  .topbar-main{
    grid-template-columns:minmax(12rem,15rem) minmax(19rem,1fr) auto minmax(22rem,27rem) minmax(8.2rem,9.5rem);
    gap:.42rem;
    padding:.55rem .75rem;
  }
  .act-orientation.history-ribbon{min-height:2.8rem;padding:.25rem .5rem}
  .act-orientation.history-ribbon p{-webkit-line-clamp:2}
  .act-orientation.history-ribbon strong{font-size:.78rem}
  .brand h1{font-size:1.08rem}
  .brand small{font-size:.68rem}
  .world-date{padding-left:.55rem}
  .global-resources{gap:.24rem}
  .resource{padding:.34rem}
  .turn-control button{padding:.58rem .62rem}
}

@media(min-width:1101px) and (max-width:1280px){
  .act-orientation.history-ribbon p{display:none}
}

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

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

@media(max-width:1100px){
  .topbar-main{grid-template-columns:minmax(0,1fr) auto;gap:.55rem}
  .topbar-main>.brand{grid-column:1;grid-row:1}
  .topbar-main>.world-date{grid-column:2;grid-row:1}
  .topbar-main>.act-orientation{grid-column:1/-1;grid-row:2}
  .topbar-main>.global-resources{grid-column:1/-1;grid-row:3;order:initial}
  .topbar-main>.turn-control{grid-column:1/-1;grid-row:4;order:initial;text-align:left}
  .act-orientation.history-ribbon p{display:none}
}

@media(max-width:700px){
  .topbar-main{grid-template-columns:minmax(0,1fr)}
  .topbar-main>.brand,
  .topbar-main>.world-date,
  .topbar-main>.act-orientation,
  .topbar-main>.global-resources,
  .topbar-main>.turn-control{grid-column:1}
  .topbar-main>.brand{grid-row:1}
  .topbar-main>.act-orientation{grid-row:2}
  .topbar-main>.world-date{grid-row:3}
  .topbar-main>.global-resources{grid-row:4}
  .topbar-main>.turn-control{grid-row:5}
}