.header{
  position: sticky;
  top: 0;
  z-index: 150;
  height: var(--header-h);
  background: transparent;
}
.header .header-bg{
  position:absolute;
  inset:0;
  background: url("https://sinyalplay-rtp.pacmanlink.bio/assets/images/header-bg.webp")
    center top / cover no-repeat;
  z-index:1;
}
@media (max-width:768px){
  .header{ height: var(--header-h-m); }
  .header .header-bg{ background-position: center 0px; }
}
.header .header-bar{ position:relative; z-index:2; height:100%; }
.header .header-bar .container{ height:100%; display:flex; align-items:center; }
.header .row{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}
.header .brand{ grid-column:2; justify-self:center; }
.header .brand img{
  height:60px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
.header .h-actions{
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:10px;
  white-space:nowrap;
}
.header .btn{
  appearance:none;
  border:0;
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
  color:#fff;
  background:#ffd644;
  box-shadow:0 6px 16px #fff42c, inset 0 -2px 0 #0004;
  text-decoration:none;
  font-weight:800;
}
.header .btn.alt{ background:#fff42c; color:#1a1400; }

@media (max-width:768px){
  .header .brand img{ height:34px; }
  .header .h-actions .btn{ padding:8px 12px; }
}