/* v0.9.74 · requested topbar, home position and custom in-game scrollbars */

/* Keep the complete game selection area directly below the top bar. */
body.home-screen #homeApp.home-app:not(.hidden) {
  margin-top: 4px !important;
  margin-bottom: 32px !important;
  align-items: start !important;
}
body.home-screen #homeApp > .home-panel {
  padding-top: 14px !important;
  align-content: start !important;
}
body.home-screen #homeApp .v072-game-menu {
  margin-top: 0 !important;
}

/* Version is part of the menu bar instead of floating in the home content. */
.topbar-v046 .brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.topbar-version {
  flex: 0 0 auto;
  align-self: center;
  padding: 5px 8px;
  border: 2px solid var(--wf-ink, #071116);
  border-radius: 8px;
  color: var(--wf-ink, #071116);
  background: var(--wf-lime, #b8ff35);
  box-shadow: 2px 2px 0 var(--wf-ink, #071116);
  font-size: .68rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* The Home button only uses the space needed by its label. */
@media (min-width: 801px) {
  .topbar-v046 #homeNavigationButton {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    flex: 0 0 auto !important;
  }
}

/* Larger profile image, still fully contained by the account card. */
.topbar-v046 .account-badge {
  min-height: 52px !important;
  padding: 4px 10px 4px 4px !important;
  gap: 9px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.topbar-v046 .account-badge .account-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 12px !important;
  font-size: 26px !important;
  line-height: 1 !important;
}
.topbar-v046 .account-badge .account-copy {
  min-width: 84px !important;
  align-self: center !important;
}

/* Shared Webfix-style internal scrollbar. */
#leaderboardPanel .leaderboard-list,
#botManagementPane,
#botManagementPane .bot-roster {
  scrollbar-width: auto;
  scrollbar-color: var(--wf-lime, #b8ff35) #111827;
}
#leaderboardPanel .leaderboard-list::-webkit-scrollbar,
#botManagementPane::-webkit-scrollbar,
#botManagementPane .bot-roster::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
#leaderboardPanel .leaderboard-list::-webkit-scrollbar-track,
#botManagementPane::-webkit-scrollbar-track,
#botManagementPane .bot-roster::-webkit-scrollbar-track {
  margin-block: 3px;
  border: 2px solid #071116;
  border-radius: 999px;
  background: #111827;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.06);
}
#leaderboardPanel .leaderboard-list::-webkit-scrollbar-thumb,
#botManagementPane::-webkit-scrollbar-thumb,
#botManagementPane .bot-roster::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid #071116;
  border-radius: 999px;
  background: var(--wf-lime, #b8ff35);
  box-shadow: 2px 2px 0 #071116;
}
#leaderboardPanel .leaderboard-list::-webkit-scrollbar-thumb:hover,
#botManagementPane::-webkit-scrollbar-thumb:hover,
#botManagementPane .bot-roster::-webkit-scrollbar-thumb:hover {
  background: #d6ff6a;
}
#leaderboardPanel .leaderboard-list::-webkit-scrollbar-corner,
#botManagementPane::-webkit-scrollbar-corner,
#botManagementPane .bot-roster::-webkit-scrollbar-corner {
  background: transparent;
}

/* The leaderboard and bot manager scroll inside their own game surfaces. */
#leaderboardPanel .leaderboard-list {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 8px !important;
}
#accountCenterOverlay .account-center-panel:has(#botManagementPane:not(.hidden)) {
  overflow: hidden !important;
}
#botManagementPane:not(.hidden) {
  display: block !important;
  height: calc(100dvh - 154px) !important;
  max-height: calc(100dvh - 154px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  padding-right: 12px !important;
}

@media (max-width: 820px) {
  body.home-screen #homeApp.home-app:not(.hidden) {
    margin-top: 4px !important;
  }
  .topbar-version {
    padding: 4px 6px;
    font-size: .62rem;
  }
  .topbar-v046 .account-badge .account-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
  }
  #botManagementPane:not(.hidden) {
    height: calc(100dvh - 170px) !important;
    max-height: calc(100dvh - 170px) !important;
  }
}

/* Flex sizing keeps the bot tabs/header fixed while only the bot content scrolls. */
#accountCenterOverlay .account-center-panel:has(#botManagementPane:not(.hidden)) {
  display: flex !important;
  flex-direction: column !important;
}
#accountCenterOverlay .account-center-panel:has(#botManagementPane:not(.hidden)) > .account-center-head,
#accountCenterOverlay .account-center-panel:has(#botManagementPane:not(.hidden)) > .account-center-tabs {
  flex: 0 0 auto !important;
}
#botManagementPane:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}