/* Shared game top bar — consistent chrome for the Phaser unit games
 * (math/unit-N/games/*). Slim translucent overlay bar so it never resizes
 * the Phaser canvas (which uses Scale.FIT into #game-container). Matches the
 * teal site palette; tuned for the games' dark backdrops.
 * Title-only by design: games are self-contained, no links out of play.
 * Injected by tools/inject-game-topbar.js. */

.nt-game-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 44px;
  /* Title lives on the left; the right zone is left clear for the game-access
     controls (Language/Sound/Contrast/Controls) that float fixed top-right. */
  padding: 0 10px;
  background: rgba(10, 20, 32, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(127, 214, 200, 0.35);
  font-family: "Segoe UI", system-ui, sans-serif;
  pointer-events: auto;
}

.nt-game-topbar .ngt-title {
  min-width: 0;
  max-width: clamp(120px, 55vw, 440px);
  margin-left: 4px;
  text-align: left;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The old lone floating back-link (present on a few games) stays hidden —
   games are self-contained. */
.nt-back-hub {
  display: none !important;
}

@media (max-width: 540px) {
  .nt-game-topbar .ngt-title {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nt-game-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}