/* Shared chrome follows registered screen capabilities, including future modes. */
.app[data-mode-chrome="true"] :is(.platform-home-button, .settings-button, .credits-hud),
.app[data-mode-player="true"] .skin-button,
.app[data-mode-missions="true"] .mission-button,
.app[data-mode-leaderboard="true"] .leaderboard-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.app[data-game]:not([data-game="home"])[data-mode-chrome="false"] :is(.platform-home-button, .settings-button, .credits-hud),
.app[data-game]:not([data-game="home"])[data-mode-player="false"] .skin-button,
.app[data-game]:not([data-game="home"])[data-mode-missions="false"] .mission-button,
.app[data-game]:not([data-game="home"])[data-mode-leaderboard="false"] .leaderboard-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

.app[data-mode-chrome="true"][data-mode-missions="false"] .skin-button {
  left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + 2 * (var(--top-button-size) + var(--top-button-gap)));
}

.app[data-mode-chrome="true"][data-mode-missions="false"] .leaderboard-button {
  left: calc(max(var(--edge-pad), env(safe-area-inset-left)) + 3 * (var(--top-button-size) + var(--top-button-gap)));
}

.app[data-game]:not([data-game="classic"]):not([data-game="home"]) .game-canvas {
  visibility: hidden;
}

#profile-button {
  position: absolute;
  z-index: 12;
  top: calc(max(var(--edge-pad), env(safe-area-inset-top)) + var(--top-button-size) + 12px);
  left: max(var(--edge-pad), env(safe-area-inset-left));
  width: 250px;
  max-width: 30cqw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#profile-button[hidden] { display: none !important; }

.app[data-mode-chrome="true"]:not([data-tutorial="true"]) #profile-button,
.app[data-screen="home"] #profile-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app[data-mode-transition] #profile-button { visibility: hidden; pointer-events: none; }

.profile-player-link {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.profile-player-link:hover, .profile-player-link:focus-visible { color: var(--cyan); text-decoration: underline; }
.profile-player-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

#leaderboard-dialog[data-board="player_level"] .leaderboard-row {
  grid-template-columns: 90px minmax(220px, 1fr) 190px 300px;
}
#leaderboard-dialog[data-board="player_level"] .leaderboard-header > span:nth-child(3) { text-align: right; }
.leaderboard-player-level { color: var(--cyan); text-align: right; }
.leaderboard-player-level-row.is-self { --leaderboard-accent: var(--mint); }
.leaderboard-player-level-row.is-self::after { background: rgba(9, 31, 33, .96); }
.leaderboard-nearby-heading {
  padding: 20px 24px 8px;
  color: var(--violet);
  font-size: max(22px, var(--ui-font-body));
  font-weight: 950;
}