/*
 * Canonical GameFinder.pro in-game header.
 * Bubble Shooter is the visual reference. Keep game-specific layout rules out
 * of this file; titles, player names and button IDs remain owned by each game.
 */
header.topbar,
header.game-topbar{
  box-sizing:border-box;
  display:flex;
  height:71px;
  min-height:71px;
  max-height:71px;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
  border:1px solid #e8c87645;
  border-radius:18px;
  padding:9px 10px;
  background:#09080be8;
  box-shadow:0 8px 24px #0008;
  overflow:hidden;
}
header:is(.topbar,.game-topbar) .game-identity{
  display:block;
  height:51px;
  min-width:0;
  flex:1 1 auto;
  overflow:visible;
}
header:is(.topbar,.game-topbar) .game-identity>:is(h1,.wordmark),
header.game-topbar>h1{
  display:block;
  margin:0;
  color:#f0d794;
  overflow:hidden;
  font:normal 34px/34px Georgia,serif;
  letter-spacing:-1px;
  text-overflow:ellipsis;
  text-shadow:none;
  white-space:nowrap;
}
header:is(.topbar,.game-topbar) .game-identity>.player-name{
  display:block;
  min-height:13px;
  height:13px;
  max-width:100%;
  margin-top:4px;
  overflow:hidden;
  color:#b8aa8c;
  font:700 9px/13px Arial,sans-serif;
  letter-spacing:.11em;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap;
}
header:is(.topbar,.game-topbar) .game-identity>.player-name:empty{display:block}
header:is(.topbar,.game-topbar)>.top-actions{
  display:flex;
  min-width:0;
  flex:0 0 auto;
  align-items:center;
  gap:5px;
}
header:is(.topbar,.game-topbar)>.top-actions>.icon-button{
  display:grid;
  width:39px;
  min-width:39px;
  height:39px;
  flex:0 0 39px;
  place-items:center;
  border:1px solid #65552e;
  border-radius:50%;
  padding:0;
  background:#15130e;
  box-shadow:none;
  color:#f0d794;
  font:normal 21px/1 Arial,sans-serif;
  cursor:pointer;
}
header:is(.topbar,.game-topbar)>.top-actions>.icon-button.info-icon{
  font:italic bold 19px/1 Georgia,serif;
}
header:is(.topbar,.game-topbar)>.top-actions>.icon-button:hover{
  border-color:#d6b866;
  background:#292319;
}
header:is(.topbar,.game-topbar)>.top-actions>.icon-button:active{transform:scale(.93)}
header:is(.topbar,.game-topbar)>.top-actions>.icon-button:focus-visible{
  outline:3px solid #f0d794;
  outline-offset:3px;
}

@media(max-width:370px){
  header:is(.topbar,.game-topbar)>.top-actions{gap:3px}
  header:is(.topbar,.game-topbar)>.top-actions>.icon-button{
    width:35px;
    min-width:35px;
    height:38px;
    flex-basis:35px;
  }
}

@media(max-width:699px){
  header:is(.topbar,.game-topbar){height:62px;min-height:62px;max-height:62px}
  header:is(.topbar,.game-topbar) .game-identity{height:42px}
  header:is(.topbar,.game-topbar) .game-identity>:is(h1,.wordmark),
  header.game-topbar>h1{font-size:25px;line-height:25px}
  header:is(.topbar,.game-topbar) .game-identity>.header-title-medium{font-size:21px}
  header:is(.topbar,.game-topbar) .game-identity>[data-i18n="fourInARow.name"]{font-size:18px}
  html[lang="de"] header:is(.topbar,.game-topbar) .game-identity>[data-i18n="battleship.name"]{font-size:17px}
  html[lang="en"] header:is(.topbar,.game-topbar) .game-identity>[data-i18n="morris.name"]{font-size:17px}
}

@media(min-width:700px) and (orientation:portrait){
  header:is(.topbar,.game-topbar){height:79px;min-height:79px;max-height:79px}
  header:is(.topbar,.game-topbar) .game-identity{height:59px}
  header:is(.topbar,.game-topbar) .game-identity>:is(h1,.wordmark),
  header.game-topbar>h1{font-size:42px;line-height:42px}
}