/* Shared edge spacing for React headers and the embedded games. */
:root {
  --game-nav-edge: 16px;
  --game-nav-top: calc(env(safe-area-inset-top, 0px) + 8px);
}
@media (max-width: 359px) {
  :root { --game-nav-edge: 8px; }
}
.game-nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: var(--game-nav-edge);
}

/* Iframe games keep their own rendering and menus, but share the same
   44px control row, 8px top inset and responsive viewport edge spacing. */
[data-game-navigation="contrail-game"] .topbar,
[data-game-navigation="flyover-game"] .topbar,
[data-game-navigation="railpass-game"] #topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  padding: var(--game-nav-top) var(--game-nav-edge) 8px;
}
[data-game-navigation="flyover-game"] .topbar .more-games,
[data-game-navigation="railpass-game"] #moregames,
[data-game-navigation="railpass-game"] #moregames-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
[data-game-navigation="railpass-game"] #moregames-link { display: none; }
@media (min-width: 1024px) {
  [data-game-navigation="railpass-game"] #moregames-link { display: inline-flex; }
  [data-game-navigation="railpass-game"] #moregames { display: none; }
}
[data-game-navigation="flyover-game"] .topbar .wordmark { font-size: 18px; }
[data-game-navigation="airportq-game"] .topbar {
  top: var(--game-nav-top);
  left: var(--game-nav-edge);
  right: var(--game-nav-edge);
  min-height: 44px;
  align-items: center;
}
[data-game-navigation="airportq-game"] .brand-lockup {
  top: 50%;
  transform: translate(-50%, -50%);
}
[data-game-navigation="airportq-game"] .topbar .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
}
[data-game-navigation="airportq-game"] .header-actions {
  top: var(--game-nav-top);
  right: var(--game-nav-edge);
  left: auto;
}
[data-game-navigation="airportq-game"] .profile-link { width: 44px; height: 44px; }
[data-game-navigation="airportq-game"] .profile-link svg { width: 20px; height: 20px; }

/* Phone layouts reserve the controls' real widths before the wordmark.
   Font metrics differ across platforms; equal side tracks can overlap
   More Games even at 390px on Android/Linux. */
@media (max-width: 429px) {
  .game-nav-row { grid-template-columns: max-content minmax(0, 1fr) 44px; }
}
@media (max-width: 359px) {
  .game-nav-row > :nth-child(2) .text-lg { font-size: 16px; letter-spacing: 0.1em; }
}