/* Game page header: House of Turns first, the game's own badge beside it. Loaded after each page's own styles. */
.game-topbar { justify-content: flex-start; }
.game-topbar .top-actions { margin-left: auto; }
.game-topbar .brand { text-decoration: none; color: inherit; }
.game-topbar .brand-mark.house { display: block; position: relative; padding: 0; background: var(--ink); box-shadow: 0 3px 0 var(--ink-shadow); }
.game-topbar .brand-mark.house svg { width: 100%; height: 100%; display: block; }
.game-topbar .house-roof { fill: none; stroke: var(--on-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.game-topbar .house-red { fill: var(--red); }
.game-topbar .house-yellow { fill: var(--yellow); }

.game-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 700 .9rem/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.game-badge img { width: 26px; height: 26px; border-radius: 8px; transform: rotate(-6deg); transition: transform .3s; }
.game-badge:hover img, .game-badge:focus-visible img { transform: rotate(6deg) scale(1.08); }

.game-topbar .nav-icon { display: none; width: 20px; height: 20px; }

@media (max-width: 640px) {
  /* Two tidy rows on phones: House of Turns + account, then the game badge + tools. */
  .game-topbar { flex-wrap: wrap; column-gap: 4px; row-gap: 4px; padding-bottom: 14px; }
  .game-topbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .game-topbar .top-actions { display: contents; }
  .game-topbar .brand { order: 0; }
  .game-topbar .hot-account-button { order: 1; margin-left: auto; }
  .game-topbar .game-badge { order: 3; margin-right: auto; font-size: .84rem; }
  /* Leave room for up to four tool icons, so a long name (Ultimate Noughts & Crosses) shortens instead of pushing one onto a new line. */
  .game-topbar .game-badge { min-width: 0; max-width: calc(100% - 172px); }
  .game-topbar .game-badge span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .game-topbar .top-actions > :not(.hot-account-button) { order: 4; }
  .game-topbar .nav-icon { display: block; }
  .game-topbar .nav-label { display: none; }
  .game-topbar .top-actions .nav-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }
}

/* Phones, during a game: one header row (logo, game icon, tools, account) so the table starts higher.
   The game's name is in the tab title and the turn banner, so the badge shrinks to its icon. */
@media (max-width: 640px) {
  body:has(#game:not([hidden]), #gameView:not([hidden]), #room:not([hidden])) .game-topbar { flex-wrap: nowrap; padding-bottom: 8px; }
  body:has(#game:not([hidden]), #gameView:not([hidden]), #room:not([hidden])) .game-topbar::after { display: none; }
  body:has(#game:not([hidden]), #gameView:not([hidden]), #room:not([hidden])) .game-topbar .brand-name { display: none; }
  body:has(#game:not([hidden]), #gameView:not([hidden]), #room:not([hidden])) .game-topbar .game-badge { order: 0; flex: none; max-width: none; margin-right: auto; padding: 4px; }
  body:has(#game:not([hidden]), #gameView:not([hidden]), #room:not([hidden])) .game-topbar .game-badge span { display: none; }
  body:has(#game:not([hidden]), #gameView:not([hidden]), #room:not([hidden])) .game-topbar .hot-account-button { order: 9; min-width: 0; max-width: 110px; margin-left: 0; padding: 6px 12px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}