/*!
 * Teamz Lab games — top-right leaderboard icon (paired with tz-game-leaderboard.js).
 * Only injected when the leaderboard is enabled. Safe-area aware; sits above the
 * game, below modals/ad overlays.
 */

.tz-leaderboard-btn {
  position: fixed;
  /* Sits clearly below the top-right scoreboard card (level + lives, ~64px tall)
     so they never overlap, even with taller localized level text. */
  top: calc(104px + max(env(safe-area-inset-top, 0px), var(--tz-ins-top, 0px), var(--tz-safe-top, 0px)));
  right: calc(10px + max(env(safe-area-inset-right, 0px), var(--tz-ins-right, 0px), var(--tz-safe-right, 0px)));
  z-index: 30;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--tz-game-menu-item-border, var(--border, rgba(0, 0, 0, 0.12)));
  background: var(--tz-game-menu-item-bg, var(--surface, #ffffff));
  /* Icon: light on the dark card (dark mode). The neon accent is illegible on
     the white card, so light mode gets a blue icon below — matches the dock. */
  color: var(--heading, #e8eef7);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Light mode: readable blue icon on the white card (like the dock icons). */
html[data-theme="light"] .tz-leaderboard-btn {
  color: #1d4ed8;
}

.tz-leaderboard-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.tz-leaderboard-btn:active {
  transform: translateY(0);
}

.tz-leaderboard-btn svg {
  width: 22px;
  height: 22px;
}