/* "Back to Games" link to the Digi Game Library: identical in every Digi game (this file is copied verbatim to
   time-quest/css/game-nav.css). Lives outside the game code; shown only on the game's start screen. Order in the corner: Back to Games first, then the ⓘ menu (moved here, on
   game pages only; the lobby keeps ⓘ in the corner). The button has a fixed width so ⓘ can sit right after it. */
.games-btn { --gb-w: 158px; position: fixed; top: 10px; left: 12px; z-index: 30; width: var(--gb-w); height: 34px; padding: 0 12px 0 10px; border-radius: 999px; justify-content: center; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; font: 800 15px/1 'Nunito', system-ui, sans-serif; color: #fff; text-decoration: none;
  background: rgba(10,14,40,.45); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .15s; }
.games-btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.games-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.games-btn:hover svg { transform: translateX(-3px); }
.games-btn:active { transform: scale(.97); }
.games-btn:focus-visible { outline: 3px solid #FFC83D; outline-offset: 3px; }
html[data-screen]:not([data-screen="menu"]) .games-btn { display: none; }
.games-btn ~ .info-btn, .games-btn ~ * .info-btn { left: calc(12px + 158px + 10px); }
@media (max-width: 340px) {
  .games-btn { --gb-w: 98px; }
  .games-btn .long { display: none; }
  .games-btn ~ .info-btn, .games-btn ~ * .info-btn { left: calc(12px + 98px + 10px); }
}
@media (prefers-reduced-motion: reduce) { .games-btn, .games-btn svg { transition: none; } }