/* v0.9.74 · homescreen spacing, equal panel height, leaderboard alignment and menu badge */

/* Give the home content a clear gap below the sticky menu bar. */
@media (min-width: 821px) {
  body.home-screen #homeApp.home-app:not(.hidden) {
    margin-top: 16px !important;
    margin-bottom: 40px !important;
    align-items: stretch !important;
    grid-auto-rows: minmax(0, auto) !important;
  }

  body.home-screen #homeApp > .home-panel,
  body.home-screen #homeApp > .leaderboard-panel {
    align-self: stretch !important;
    height: min(720px, calc(100dvh - 118px)) !important;
    min-height: 560px !important;
    box-sizing: border-box !important;
  }

  /* Both columns end at exactly the same lower edge. */
  body.home-screen #homeApp > .home-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  body.home-screen #homeApp > .leaderboard-panel {
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important;
  }

  body.home-screen #homeApp > .leaderboard-panel .leaderboard-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* The game menu becomes the internal scrolling area when the viewport is short. */
  body.home-screen #homeApp .v072-game-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    padding: 2px 12px 10px 2px !important;
  }
}

/* Version plaque protrudes from the upper-right corner of the menu bar. */
.topbar-v046 {
  overflow: visible !important;
}
.topbar-v046 .topbar-version {
  position: absolute !important;
  top: -11px !important;
  right: -10px !important;
  left: auto !important;
  z-index: 120 !important;
  margin: 0 !important;
  transform: rotate(3deg) !important;
  transform-origin: center !important;
  padding: 6px 10px !important;
  border: 3px solid var(--wf-ink, #071116) !important;
  border-radius: 9px !important;
  background: var(--wf-lime, #b8ff35) !important;
  color: var(--wf-ink, #071116) !important;
  box-shadow: 4px 4px 0 var(--wf-ink, #071116) !important;
}

/* Developer Center uses the same blue and black text as the Settings button. */
#v072Developer,
#developerCenterButton {
  background: #73d7ff !important;
  color: #111 !important;
}
#v072Developer > span,
#v072Developer > small,
#developerCenterButton > span {
  color: #111 !important;
  text-shadow: none !important;
}

/* Leaderboard: large avatar and name grouped left, chips stay right. */
#leaderboardPanel .leaderboard-row {
  grid-template-columns: 34px 52px minmax(0, 1fr) auto !important;
  column-gap: 6px !important;
  row-gap: 0 !important;
  min-height: 66px !important;
  padding: 7px 10px !important;
  text-align: left !important;
}
#leaderboardPanel .leaderboard-rank {
  justify-self: start !important;
  text-align: left !important;
}
#leaderboardPanel .leaderboard-avatar {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  justify-self: start !important;
  font-size: 1.65rem !important;
  line-height: 1 !important;
}
#leaderboardPanel .leaderboard-player {
  justify-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}
#leaderboardPanel .leaderboard-player b,
#leaderboardPanel .leaderboard-player small {
  text-align: left !important;
}
#leaderboardPanel .leaderboard-chips {
  justify-self: end !important;
  margin-left: 10px !important;
  white-space: nowrap !important;
}

/* Shared internal Webfix scrollbar for the game menu and game surfaces. */
#homeApp .v072-game-menu,
#gameApp,
#multiplayerApp,
#pokerApp,
#rouletteApp,
#slotsApp,
.poker-sidebar,
.multi-sidebar,
.roulette-sidebar,
.slots-payouts {
  scrollbar-width: auto;
  scrollbar-color: var(--wf-lime, #b8ff35) #111827;
}
#homeApp .v072-game-menu::-webkit-scrollbar,
#gameApp::-webkit-scrollbar,
#multiplayerApp::-webkit-scrollbar,
#pokerApp::-webkit-scrollbar,
#rouletteApp::-webkit-scrollbar,
#slotsApp::-webkit-scrollbar,
.poker-sidebar::-webkit-scrollbar,
.multi-sidebar::-webkit-scrollbar,
.roulette-sidebar::-webkit-scrollbar,
.slots-payouts::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
#homeApp .v072-game-menu::-webkit-scrollbar-track,
#gameApp::-webkit-scrollbar-track,
#multiplayerApp::-webkit-scrollbar-track,
#pokerApp::-webkit-scrollbar-track,
#rouletteApp::-webkit-scrollbar-track,
#slotsApp::-webkit-scrollbar-track,
.poker-sidebar::-webkit-scrollbar-track,
.multi-sidebar::-webkit-scrollbar-track,
.roulette-sidebar::-webkit-scrollbar-track,
.slots-payouts::-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);
}
#homeApp .v072-game-menu::-webkit-scrollbar-thumb,
#gameApp::-webkit-scrollbar-thumb,
#multiplayerApp::-webkit-scrollbar-thumb,
#pokerApp::-webkit-scrollbar-thumb,
#rouletteApp::-webkit-scrollbar-thumb,
#slotsApp::-webkit-scrollbar-thumb,
.poker-sidebar::-webkit-scrollbar-thumb,
.multi-sidebar::-webkit-scrollbar-thumb,
.roulette-sidebar::-webkit-scrollbar-thumb,
.slots-payouts::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid #071116;
  border-radius: 999px;
  background: var(--wf-lime, #b8ff35);
  box-shadow: 2px 2px 0 #071116;
}
#homeApp .v072-game-menu::-webkit-scrollbar-thumb:hover,
#gameApp::-webkit-scrollbar-thumb:hover,
#multiplayerApp::-webkit-scrollbar-thumb:hover,
#pokerApp::-webkit-scrollbar-thumb:hover,
#rouletteApp::-webkit-scrollbar-thumb:hover,
#slotsApp::-webkit-scrollbar-thumb:hover,
.poker-sidebar::-webkit-scrollbar-thumb:hover,
.multi-sidebar::-webkit-scrollbar-thumb:hover,
.roulette-sidebar::-webkit-scrollbar-thumb:hover,
.slots-payouts::-webkit-scrollbar-thumb:hover {
  background: #d6ff6a;
}

@media (max-width: 820px) {
  body.home-screen #homeApp.home-app:not(.hidden) {
    margin-top: 14px !important;
  }
  .topbar-v046 .topbar-version {
    top: -8px !important;
    right: -6px !important;
    padding: 5px 7px !important;
    font-size: .6rem !important;
  }
  #leaderboardPanel .leaderboard-row {
    grid-template-columns: 30px 46px minmax(0, 1fr) auto !important;
    column-gap: 5px !important;
  }
  #leaderboardPanel .leaderboard-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.45rem !important;
  }
}