/* One Breath menu bar, shared by every One Breath page: a way back to Kelken Studios, then the game's own pages.
   Always the deep-sea navy, so it looks the same on the light support and privacy pages. */
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fonts/Fredoka-SemiBold.ttf) format("truetype"); }

.gamebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; background: #030A18; border-bottom: 1px solid #1D3A63;
  padding: 12px max(16px, calc((100% - 1080px) / 2)); font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.gamebar a { text-decoration: none; }
.gamebar a:focus-visible { outline: 2px solid #7FF3FF; outline-offset: 3px; }

.studio-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid #1D3A63; border-radius: 999px;
  color: #A9C4D2; font-size: 14px; }
.studio-link img { width: 22px; height: 22px; }
.studio-link:hover { color: #EEF7FA; border-color: #7FF3FF; }

.game-name { display: inline-flex; align-items: center; gap: 10px; color: #EEF7FA; font: 600 21px/1 Fredoka, -apple-system, sans-serif; }
.game-name img { width: 30px; height: 30px; border-radius: 8px; }

.game-menu { display: flex; gap: 4px; margin-left: auto; }
.game-menu a { padding: 8px 14px; border-radius: 999px; color: #A9C4D2; }
.game-menu a:hover { color: #EEF7FA; background: #0B2147; }
.game-menu a[aria-current="page"] { color: #050A12; background: #7FF3FF; }

@media (max-width: 640px) {
  .game-menu { margin-left: 0; width: 100%; }
  .game-menu a { flex: 1; text-align: center; }
}