/* Header: brand logo and campaign badge, pinned at a fixed screen position on
   every screen — outside the scaled game canvas so it never moves or resizes
   with it. --br-header-h is the space layout.css reserves below it.
   `absolute`, not `fixed`: at the top of the page (the only state most
   screens are ever in) it renders identically, but on the rare screen tall
   enough to need scrolling, it scrolls away with the page instead of
   staying glued on top of — and overlapping — the content underneath it. */
:root {
  --br-header-h: 140px;
}

.br-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--br-header-h);
  z-index: 60;
  pointer-events: none;
}
.br-header > * {
  pointer-events: auto;
}
/* Toggled while any popup is open (see br_render()) - the header sits above
   every popup's z-index and outside .br-stage, so nothing else can block
   clicks/hover on it (e.g. the logo link) except making it inert directly. */
.br-header.br-is-inert > * {
  pointer-events: none;
}

.br-brand-logo {
  position: absolute;
  left: 52px;
  top: 51px;
  width: 332px;
  height: 48px;
  background: url("../images/logo-thienlong.png") center / contain no-repeat;
}

.br-campaign-badge {
  position: absolute;
  right: 38px;
  top: 34px;
  width: 232px;
  height: 82px;
  background: url("../images/badge-viet-net-rieng.png") center / contain no-repeat;
}

@media (max-width: 720px) {
  :root {
    --br-header-h: 84px;
  }
  .br-brand-logo {
    left: 20px;
    top: 30px;
    width: 152px;
    height: 26px;
  }
  .br-campaign-badge {
    right: 18px;
    top: 18px;
    width: 128px;
    height: 48px;
  }
}