/* ── Standardized game-page nav buttons ──────────────────────────────
   One source of truth for the home + instructions buttons that appear
   on every game page. Overrides per-game CSS via !important on visual
   properties so each game's styles can't bleed through.
*/

.lol-nav-btn {
  position: fixed !important;
  top: max(clamp(14px, 2.2vw, 22px), env(safe-area-inset-top)) !important;
  width: clamp(36px, 4vw, 44px) !important;
  height: clamp(36px, 4vw, 44px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(30, 24, 46, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(230, 220, 245, 0.78) !important;
  cursor: pointer !important;
  z-index: 30 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  filter: none !important;
}

.lol-nav-btn:hover {
  color: #c4a1ff !important;
  border-color: rgba(196, 161, 255, 0.45) !important;
  background: rgba(40, 32, 62, 0.7) !important;
  transform: scale(1.05) !important;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(196, 161, 255, 0.18) !important;
  filter: none !important;
}

.lol-nav-btn:active {
  transform: scale(0.94) !important;
}

.lol-nav-btn svg {
  width: 58% !important;
  height: 58% !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}

.lol-nav-btn:hover svg {
  filter: none !important;
  transform: none !important;
}

/* Hide any lingering <img> inside the button (e.g. old hamburger PNG) */
.lol-nav-btn img {
  display: none !important;
}

/* Right-edge positioning ─────────────────────────────────────────────
   Home button sits at the right edge.
   Info (instructions) button, when present, sits to its left. */

.lol-nav-btn--home {
  right: max(clamp(18px, 3vw, 26px), env(safe-area-inset-right)) !important;
}

.lol-nav-btn--info {
  right: calc(max(clamp(18px, 3vw, 26px), env(safe-area-inset-right)) + clamp(36px, 4vw, 44px) + 10px) !important;
}