/* Shared top bar for the standalone game pages.
   Game-specific styles keep their colors; this file only standardizes the
   navigation, title hierarchy, language control, spacing, and mobile layout. */
:is(header.game-topbar:not(.game-topbar--immersive)) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  min-height: 84px;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--game-line, var(--line, #ccd6d2));
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  color: var(--game-muted, var(--muted, #6d7b7c));
  text-decoration: none;
  font-weight: 750;
  white-space: nowrap;
  transition: color .16s ease, transform .16s ease;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-back:hover,
:is(header.game-topbar:not(.game-topbar--immersive)) .game-back:focus-visible {
  color: var(--game-accent, var(--accent, #bd6244));
  transform: translateX(-2px);
  outline: none;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-brand {
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: max-content;
  color: var(--game-ink, var(--ink, #24363a));
  line-height: 1.08;
  text-align: center;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-eyebrow {
  margin: 0;
  color: var(--game-accent, var(--accent, #bd6244));
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .19em;
  line-height: 1;
  text-transform: uppercase;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-title {
  margin: 0;
  color: inherit;
  font: 600 1.2rem/1.15 Georgia, "Songti SC", "Microsoft YaHei", serif;
  letter-spacing: .01em;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-subtitle {
  margin: 1px 0 0;
  color: var(--game-muted, var(--muted, #6d7b7c));
  font-size: .75rem;
  line-height: 1.35;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-language,
:is(header.game-topbar:not(.game-topbar--immersive)) .game-language-wrap,
:is(header.game-topbar:not(.game-topbar--immersive)) #gameLanguageSelect,
:is(header.game-topbar:not(.game-topbar--immersive)) #languageSelect {
  grid-column: 3;
  justify-self: end;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-language,
:is(header.game-topbar:not(.game-topbar--immersive)) #gameLanguageSelect,
:is(header.game-topbar:not(.game-topbar--immersive)) #languageSelect,
:is(header.game-topbar:not(.game-topbar--immersive)) .game-language-wrap select {
  min-height: 38px;
  max-width: 150px;
  padding: 8px 30px 8px 13px;
  border: 1px solid var(--game-line, var(--line, #ccd6d2));
  border-radius: 999px;
  color: var(--game-ink, var(--ink, #24363a));
  background: color-mix(in srgb, var(--game-paper, var(--paper, #fffdf8)) 78%, transparent);
  font: 750 .78rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-language-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--game-muted, var(--muted, #6d7b7c));
  font-size: .76rem;
}

:is(header.game-topbar:not(.game-topbar--immersive)) .game-language-wrap select {
  grid-column: auto;
}

/* Existing page classes remain available to their game scripts. */
:is(header.game-topbar:not(.game-topbar--immersive)) .game-language-picker {
  grid-column: 3;
  justify-self: end;
}

@media (max-width: 640px) {
  :is(header.game-topbar:not(.game-topbar--immersive)) {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 9px;
    min-height: 66px;
    padding: 8px 0 12px;
  }

  :is(header.game-topbar:not(.game-topbar--immersive)) .game-back {
    grid-column: 1;
    font-size: .78rem;
  }

  :is(header.game-topbar:not(.game-topbar--immersive)) .game-brand {
    grid-column: 2;
    min-width: 0;
  }

  :is(header.game-topbar:not(.game-topbar--immersive)) .game-eyebrow {
    display: none;
  }

  :is(header.game-topbar:not(.game-topbar--immersive)) .game-title {
    max-width: 25vw;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(header.game-topbar:not(.game-topbar--immersive)) .game-subtitle,
  :is(header.game-topbar:not(.game-topbar--immersive)) .game-language-wrap > span {
    display: none;
  }

  :is(header.game-topbar:not(.game-topbar--immersive)) .game-language,
  :is(header.game-topbar:not(.game-topbar--immersive)) #gameLanguageSelect,
  :is(header.game-topbar:not(.game-topbar--immersive)) #languageSelect,
  :is(header.game-topbar:not(.game-topbar--immersive)) .game-language-wrap select {
    max-width: 90px;
    min-height: 36px;
    padding: 7px 25px 7px 9px;
    font-size: .72rem;
  }
}

/* The card roguelike has a dense in-game HUD. Its own dark layout stays intact,
   but its exit link uses the same wording and visual affordance. */
:is(header.game-topbar.game-topbar--immersive) .game-back {
  order: -1;
}

:is(header.game-topbar.game-topbar--immersive) .game-back:focus-visible {
  outline: 2px solid #f2bd74;
  outline-offset: 3px;
}

/* Compatibility selectors for pages that still use their original header
   class. This keeps the visual contract shared without changing game scripts
   that query .top, .brand, .language, or .language-select. */
:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  min-height: 84px;
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--game-line, var(--line, #ccd6d2));
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) > :is(.back, .site-back, .back-link) {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  color: var(--game-muted, var(--muted, #6d7b7c));
  text-decoration: none;
  font-weight: 750;
  white-space: nowrap;
  transition: color .16s ease, transform .16s ease;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) > :is(.back, .site-back, .back-link):is(:hover, :focus-visible) {
  color: var(--game-accent, var(--accent, #bd6244));
  transform: translateX(-2px);
  outline: none;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) > :is(.brand, .header-title, div:first-of-type) {
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: max-content;
  color: var(--game-ink, var(--ink, #24363a));
  line-height: 1.08;
  text-align: center;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) :is(.brand span, .brand p, .brand small, .header-title .eyebrow) {
  margin: 0;
  color: var(--game-accent, var(--accent, #bd6244));
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .19em;
  line-height: 1;
  text-transform: uppercase;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) :is(.brand strong, .header-title h1) {
  margin: 0;
  color: inherit;
  font: 600 1.2rem/1.15 Georgia, "Songti SC", "Microsoft YaHei", serif;
  letter-spacing: .01em;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) :is(.header-title > p:last-child) {
  margin: 1px 0 0;
  color: var(--game-muted, var(--muted, #6d7b7c));
  font-size: .75rem;
  line-height: 1.35;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) > :is(.language, .language-select, #languageSelect, #gameLanguageSelect) {
  grid-column: 3;
  justify-self: end;
  min-height: 38px;
  max-width: 150px;
  padding: 8px 30px 8px 13px;
  border: 1px solid var(--game-line, var(--line, #ccd6d2));
  border-radius: 999px;
  color: var(--game-ink, var(--ink, #24363a));
  background: color-mix(in srgb, var(--game-paper, var(--paper, #fffdf8)) 78%, transparent);
  font: 750 .78rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) > .language-picker {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--game-muted, var(--muted, #6d7b7c));
  font-size: .76rem;
}

:is(
  body[data-game-page="gomoku"] header.top,
  body[data-game-page="maze"] header.top,
  body[data-game-page="memory"] header.top,
  body[data-game-page="minesweeper"] header.top,
  body[data-game-page="nonogram"] header.top,
  body[data-game-page="sudoku"] header.top,
  body[data-game-page="sokoban"] header.topbar,
  body[data-game-page="perler-beads"] header.game-header,
  body[data-game-page="tetris"] header.topbar
) > .language-picker select {
  min-height: 38px;
  max-width: 150px;
  padding: 8px 30px 8px 13px;
  border: 1px solid var(--game-line, var(--line, #ccd6d2));
  border-radius: 999px;
  color: var(--game-ink, var(--ink, #24363a));
  background: color-mix(in srgb, var(--game-paper, var(--paper, #fffdf8)) 78%, transparent);
  font: 750 .78rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}

@media (max-width: 640px) {
  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 9px;
    min-height: 66px;
    padding: 8px 0 12px;
  }

  /* Keep every compact header on one visual row: back | title | language.
     Some older pages used a two-row mobile header; the shared rule wins so
     the control does not disappear below the fold. */
  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > :is(.back, .site-back, .back-link) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > :is(.brand, .header-title, div:first-of-type) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > :is(.language, .language-select, #languageSelect, #gameLanguageSelect, .language-picker) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > :is(.back, .site-back, .back-link) { font-size: .78rem; }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > :is(.brand, .header-title, div:first-of-type) { min-width: 0; }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) :is(.brand span, .brand p, .brand small, .header-title .eyebrow) { display: none; }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) :is(.brand strong, .header-title h1) {
    max-width: 25vw;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > :is(.language, .language-select, #languageSelect, #gameLanguageSelect),
  :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > .language-picker select { max-width: 90px; min-height: 36px; padding: 7px 25px 7px 9px; font-size: .72rem; }

   :is(
    body[data-game-page="gomoku"] header.top,
    body[data-game-page="maze"] header.top,
    body[data-game-page="memory"] header.top,
    body[data-game-page="minesweeper"] header.top,
    body[data-game-page="nonogram"] header.top,
    body[data-game-page="sudoku"] header.top,
    body[data-game-page="sokoban"] header.topbar,
    body[data-game-page="perler-beads"] header.game-header,
    body[data-game-page="tetris"] header.topbar
  ) > .language-picker > span { display: none; }
}