/* 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;
}

.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;
  }
}