/* ============================================================
   shared/nav.css — canonical floating top-bar
   ============================================================
   Ponytail: same shape across all 4 games (Home + Main Menu +
   game-specific pills). Anchored top-left or top-right with safe
   area insets so iPhone notches/dynamic island never clip pills.
   z-index 9999 keeps them above every game canvas/overlay.
   ============================================================ */

.top-bar-left,
.top-bar-right {
  position: fixed;
  z-index: 9999;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none; /* pills re-enable pointer-events themselves */
}

.top-bar-left {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
}

.top-bar-right {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
}
/* ponytail: boxing has a static #btnPauseGame pill fixed top-right
   (added before mountTopBar runs). When the right-side cluster appears,
   push it ~108px further left so Career sits LEFT of Pause instead of
   overlapping on top of it. (Pause width is ~97px + 8px gap + 12px
   safe-area cushion ≈ 117px; using 108 leaves a comfortable 12px gap
   to Pause's own 12px safe-area inset.) */
body.game-active .top-bar-right {
  right: calc(env(safe-area-inset-right, 0px) + 120px);
}

/* Pills: shared shape. Per-game CSS can still theme colors. */
.top-bar-left > *,
.top-bar-right > * {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 24, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f4f4f5;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang HK', sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}

.top-bar-left > *:active,
.top-bar-right > *:active {
  transform: scale(0.94);
  background: rgba(40, 40, 48, 0.92);
}

/* Home button: subtle accent so it reads as the "real" exit. */
.top-bar-left .btn-home {
  border-color: rgba(126, 232, 179, 0.45);
  color: #b8f5d6;
}

/* ponytail: left-arrow glyph prepended to the Home pill so it reads
   as a back/exit affordance (iOS convention). Inline display with
   a small right-margin so the arrow + text sit on one line. */
.btn-home-arrow {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.85;
}
.btn-home-text { display: inline-block; }

/* Hide bars on game pages that don't want them — each game
   toggles .hidden on its own pills, not on the bar itself. */
.hidden { display: none !important; }

/* ============================================================
   nav.mjs — standard pill + slide-down menu
   ============================================================ */
.nav-pill {
  /* ponytail: pill is 36px diameter, blank wall — fits inside the
     existing .top-bar-left wrapper so it inherits safe-area + z-index. */
  width: 36px; height: 36px;
  padding: 0;
  color: #f4f4f5;
}
.nav-pill[aria-expanded="true"] {
  background: rgba(40, 40, 48, 0.92);
  border-color: rgba(126, 232, 179, 0.45);
}

.nav-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  min-width: 200px;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 15, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang HK', sans-serif;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.nav-menu.open { display: flex; }

.nav-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #f4f4f5;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.nav-item:hover,
.nav-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  outline: none;
}
.nav-item:active { transform: scale(0.97); }
.nav-item .nav-icon { width: 18px; text-align: center; }
.nav-item .nav-label { flex: 1; }

.nav-item-action { width: 100%; }

.nav-lang { display: flex; }
.nav-lang-picker {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-lang-btn {
  pointer-events: auto;
  flex: 1;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f4f4f5;
  font: 600 13px/1 inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-lang-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #7ee8b3, #4dab87);
  color: #0a2e1f;
}