/* css/topbar-scene.css — presentation-only upper-row scene. Load AFTER bank-panorama-modal.css.
   All art lives inside #top-row-1's clipped .tb-bank-panorama; Row 2 stays opaque cream. */
body:not(.crime-mode) #screen-game > .tb-header #top-row-1{
  position:relative;
  isolation:isolate;
  min-height:84px;
  overflow:visible;
  flex-wrap:wrap;
}
body:not(.crime-mode) #screen-game > .tb-header #top-row-1 .tb-bank-panorama{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  background:none;
  overflow:hidden;
  contain:paint;
  pointer-events:none;
  z-index:-1;
}
body:not(.crime-mode) #screen-game > .tb-header #top-row-1 .tb-bank-panorama::before,
body:not(.crime-mode) #screen-game > .tb-header #top-row-1 .tb-bank-panorama::after{
  content:none!important;
  display:none!important;
}
body:not(.crime-mode) #screen-game > .tb-header #top-row-1 .tb-bank-panorama > span{
  position:absolute;
  display:block;
  pointer-events:none;
  background-repeat:no-repeat;
  filter:saturate(.9);
}
/* name: small architectural hint around the gold empire name */
body:not(.crime-mode) #screen-game > .tb-header .ts-name{
  background-image:url("../img/topbar-bank-panorama-v2.png");
  background-size:auto 174px;
  background-position:left center;
  opacity:.42;
  border-radius:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 55%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 55%,transparent 100%);
}
/* bridge: cohesive palace cluster between speed and History */
body:not(.crime-mode) #screen-game > .tb-header .ts-bridge{
  background-image:url("../img/topbar-bank-panorama-v3.png");
  background-size:auto 108px;
  background-position:center center;
  opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%);
}
/* history: tiny town hint fading softly at its right edge */
body:not(.crime-mode) #screen-game > .tb-header .ts-history{
  background-image:url("../img/topbar-bank-panorama-v2.png");
  background-size:auto 130px;
  background-position:right center;
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 62%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 62%,transparent 100%);
}
/* speed shade: radial dark sage depth behind the real button, not a rectangle */
body:not(.crime-mode) #screen-game > .tb-header .ts-speed-shade{
  background-image:radial-gradient(ellipse at center,rgba(31,74,58,.20) 0%,rgba(31,74,58,0) 72%);
  opacity:1;
}
/* gold title only on the empire name, restrained */
body:not(.crime-mode) #screen-game > .tb-header #empire-name-top-text{
  color:#906316;
  text-shadow:0 1px 0 rgba(255,253,245,.7);
}
/* optional ivory backing so a hint shows behind the real History button */
body:not(.crime-mode) #screen-game > .tb-header .tb-quickactions .tb-qa:first-child{
  background-color:rgba(255,253,245,.82);
}
/* Row 2: opaque cream, no image below the boundary */
body:not(.crime-mode) #screen-game > .tb-header #top-row-2{
  position:relative;
  background:#fffdf5!important;
  background-image:none!important;
}
@media (max-width:600px){
  body:not(.crime-mode) #screen-game > .tb-header .ts-name,
  body:not(.crime-mode) #screen-game > .tb-header .ts-bridge,
  body:not(.crime-mode) #screen-game > .tb-header .ts-history{
    opacity:.32;
  }
}