/* Homepage target-match corrections.
   The base homepage is the restored pre-redesign version; this only locks the
   desktop geometry/header/community rail to the supplied reference. */

body.lobby-app{
  --header-height:86px!important;
  --chat-width:330px!important;
  background:#171c1f!important;
}

/* Exact homepage top bar */
body.lobby-app .lobby-header{
  position:sticky!important;
  top:0!important;
  z-index:220!important;
  width:100%!important;
  height:86px!important;
  min-height:86px!important;
  padding:0 32px!important;
  display:flex!important;
  align-items:center!important;
  gap:34px!important;
  border-bottom:1px solid #323735!important;
  background:#202426!important;
  box-shadow:none!important;
}
body.lobby-app .lobby-brand{
  min-width:210px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  flex:0 0 auto!important;
}
body.lobby-app .lobby-brand img{
  width:28px!important;
  height:34px!important;
  object-fit:contain!important;
}
body.lobby-app .lobby-brand strong{
  margin:0!important;
  color:#58d79a!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.045em!important;
}
body.lobby-app .lobby-header nav{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
body.lobby-app .lobby-header nav a{
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid #3a4442!important;
  border-radius:7px!important;
  background:#292e30!important;
  color:#bdc5c1!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body.lobby-app .lobby-header nav a:hover{
  color:#f2f5f3!important;
  background:#303638!important;
}
body.lobby-app .lobby-header nav svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  flex:0 0 auto!important;
}
body.lobby-app .lobby-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
body.lobby-app .top-daily-spin{
  height:44px!important;
  min-width:116px!important;
  padding:0 15px!important;
  border:1px solid #456b53!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#2b4937,#263e31)!important;
  color:#f2fff7!important;
  font-size:11px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
body.lobby-app .top-daily-spin .mc-nav-icon{
  width:19px!important;height:19px!important;
}
body.lobby-app .header-wallet{
  height:44px!important;
  min-width:118px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid #2e4554!important;
  border-radius:5px!important;
  background:#111c23!important;
  color:#edf3f0!important;
}
body.lobby-app .header-wallet .mc-nav-icon{
  width:19px!important;height:19px!important;
}
body.lobby-app .header-wallet strong{
  color:#f4f6f5!important;
  font-size:14px!important;
  font-weight:900!important;
}
body.lobby-app .header-wallet small{
  display:inline!important;
  color:#9ba6a0!important;
  font-size:9px!important;
}
body.lobby-app .lobby-actions>.primary{
  height:40px!important;
  padding:0 15px!important;
  border-radius:5px!important;
  background:#27c77d!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
}
body.lobby-app .header-profile{
  height:46px!important;
  max-width:145px!important;
  padding:0 12px 0 7px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid #2e4657!important;
  border-radius:5px!important;
  background:#111a21!important;
  color:#fff!important;
}
body.lobby-app .header-profile img{
  width:32px!important;
  height:32px!important;
  border-radius:4px!important;
  image-rendering:pixelated!important;
}
body.lobby-app .header-profile span{
  display:block!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

/* Permanent left rail on desktop, exactly like the reference */
@media(min-width:961px){
  body.lobby-app #bb-community{
    position:fixed!important;
    top:86px!important;
    bottom:0!important;
    left:0!important;
    right:auto!important;
    width:330px!important;
    height:auto!important;
    padding:16px 13px!important;
    display:flex!important;
    flex-direction:column!important;
    transform:none!important;
    border:0!important;
    border-right:1px solid #2b3033!important;
    background:#191d1f!important;
    box-shadow:none!important;
    z-index:180!important;
  }
  body.lobby-app #communityToggle,
  body.lobby-app #closeCommunity{
    display:none!important;
  }
  body.lobby-app .community-rain{
    padding:14px 12px!important;
    gap:11px!important;
    border-radius:9px!important;
    border-bottom:3px solid #3cbe85!important;
    background:linear-gradient(130deg,#26332d,#222729)!important;
  }
  body.lobby-app .community-rain strong{
    margin:7px 0!important;
    font-size:26px!important;
  }
  body.lobby-app #joinRain{
    min-height:40px!important;
  }
  body.lobby-app #rainDonateAmount,
  body.lobby-app #rainDonateButton{
    height:40px!important;
  }
  body.lobby-app .chat-heading{
    padding:23px 5px 17px!important;
  }
  body.lobby-app #communityMessages article{
    padding:12px!important;
    margin:0 0 8px!important;
  }
  body.lobby-app .discord-footer{
    margin-top:9px!important;
    padding:13px!important;
  }

  body.lobby-app .lobby-content{
    width:auto!important;
    max-width:none!important;
    margin-left:330px!important;
    padding:28px 28px 56px!important;
  }
}

/* Lock the reference desktop card geometry */
@media(min-width:1101px){
  body.lobby-app .welcome-grid{
    grid-template-columns:2fr 1fr 1fr!important;
    gap:14px!important;
  }
  body.lobby-app .welcome-hero,
  body.lobby-app .spotlight{
    min-height:270px!important;
  }
  body.lobby-app .games-and-rewards{
    grid-template-columns:minmax(0,1fr) 245px!important;
    gap:16px!important;
  }
  body.lobby-app .game-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:13px!important;
  }
  body.lobby-app .game-card{
    min-height:202px!important;
  }
  body.lobby-app .reward-card{
    min-height:202px!important;
  }
}

/* Make the first visible game row match the reference order. */
body.lobby-app .game-card[href="/games/chicken/"]{order:1!important}
body.lobby-app .game-card[href="/games/rps/"]{order:2!important}
body.lobby-app .game-card[href="/games/uno/"]{order:3!important}
body.lobby-app .game-card[href="/games/dice/"]{order:4!important}
body.lobby-app .game-card[href="/games/hilo/"]{order:5!important}
body.lobby-app .game-card[href="/games/wheel/"]{order:6!important}
body.lobby-app .game-card[href="/games/keno/"]{order:7!important}
body.lobby-app .game-card:not(.new-game-card){order:20!important}

/* Reference uses a compact rakeback tile in the first row. */
body.lobby-app .reward-card{
  background:linear-gradient(145deg,#303327,#242726)!important;
  border-color:#4a4d34!important;
}
body.lobby-app .reward-card .overline{color:#a9b98d!important}

/* Final visible rakeback composition from the reference */
@media(min-width:1101px){
  body.lobby-app .reward-card{
    min-height:240px!important;
    padding:22px 20px!important;
    display:block!important;
    position:relative!important;
  }
  body.lobby-app .reward-card h2{
    margin:46px 0 0!important;
    font-size:25px!important;
    line-height:1!important;
  }
  body.lobby-app .reward-gift{
    position:absolute!important;
    top:43px!important;
    right:18px!important;
    width:96px!important;
    margin:0!important;
  }
  body.lobby-app .reward-card p,
  body.lobby-app .reward-card button{
    display:none!important;
  }
}


/* 2026-09-24 lower-lobby continuation + slightly tighter top section */

/* Make the top area only a little more compact so more of the games section is visible. */
body.lobby-app{
  --header-height:80px!important;
}
body.lobby-app .lobby-header{
  height:80px!important;
  min-height:80px!important;
  padding:0 30px!important;
  gap:30px!important;
}
body.lobby-app .lobby-brand strong{
  font-size:24px!important;
}
body.lobby-app .lobby-header nav a{
  height:40px!important;
  min-height:40px!important;
  padding:0 13px!important;
}
body.lobby-app .top-daily-spin,
body.lobby-app .header-wallet{
  height:42px!important;
}
body.lobby-app .lobby-actions>.primary{
  height:38px!important;
}
body.lobby-app .header-profile{
  height:44px!important;
}

@media(min-width:961px){
  body.lobby-app #bb-community{
    top:80px!important;
  }
  body.lobby-app .lobby-content{
    margin-left:330px!important;
    padding:22px 28px 56px!important;
  }
}

body.lobby-app .page-title{
  margin:2px 0 20px!important;
}
body.lobby-app .page-title h1{
  font-size:27px!important;
}

@media(min-width:1101px){
  body.lobby-app .welcome-hero,
  body.lobby-app .spotlight{
    min-height:245px!important;
  }
  body.lobby-app .welcome-copy{
    padding:24px 23px 46px!important;
  }
  body.lobby-app .welcome-copy h2{
    font-size:35px!important;
    margin:9px 0 10px!important;
  }
  body.lobby-app .welcome-copy p{
    margin-bottom:18px!important;
  }
  body.lobby-app .hero-treasure{
    width:45%!important;
    bottom:28px!important;
  }
  body.lobby-app .promo-sprite{
    width:min(86%,205px)!important;
    top:24px!important;
  }
  body.lobby-app .spotlight h2{
    font-size:34px!important;
  }
}
body.lobby-app .home-account-strip{
  margin:14px 0 25px!important;
  padding:11px 15px!important;
}
body.lobby-app .games-heading{
  margin-bottom:15px!important;
}

/* Keep the complete games section from the reference: every row remains visible. */
@media(min-width:1101px){
  body.lobby-app .game-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.lobby-app .game-card{
    min-height:238px!important;
  }
  body.lobby-app .game-card .game-sprite{
    width:min(100%,170px)!important;
  }
  body.lobby-app .game-card .extra-game-art{
    width:76%!important;
  }
}

/* Restore the full right-hand reward stack shown in the reference:
   Rakeback + Daily Spin + Vault. */
body.lobby-app .reward-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}
body.lobby-app .reward-card{
  min-height:252px!important;
  padding:21px!important;
  display:block!important;
  position:relative!important;
  background:linear-gradient(145deg,#303327,#242726)!important;
  border:1px solid #505338!important;
}
body.lobby-app .reward-card .overline{
  display:block!important;
  color:#a9b98d!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:1.4px!important;
}
body.lobby-app .reward-card h2{
  margin:34px 0 14px!important;
  font-size:25px!important;
  line-height:1.1!important;
}
body.lobby-app .reward-gift{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  width:88px!important;
  margin:0!important;
}
body.lobby-app .reward-card p{
  display:block!important;
  max-width:175px!important;
  margin:0 0 17px!important;
  color:#aaafa1!important;
  font-size:11px!important;
  line-height:1.5!important;
}
body.lobby-app .reward-card button{
  display:block!important;
  width:100%!important;
  min-height:40px!important;
  padding:11px 13px!important;
  border:0!important;
  border-radius:5px!important;
  background:#f2c948!important;
  color:#322b12!important;
  font-size:11px!important;
  font-weight:800!important;
}

body.lobby-app .daily-spin-bar{
  display:flex!important;
  min-height:102px!important;
  padding:17px 15px!important;
}
body.lobby-app .vault-promo{
  display:block!important;
  min-height:188px!important;
  padding:19px!important;
}
body.lobby-app .vault-promo h3{
  margin:10px 0!important;
  font-size:20px!important;
}
body.lobby-app .vault-promo p{
  margin:0 0 13px!important;
  font-size:11px!important;
  line-height:1.55!important;
}
body.lobby-app .vault-promo button{
  display:block!important;
  width:100%!important;
  min-height:40px!important;
  padding:10px 12px!important;
  border:1px solid #42674f!important;
  border-radius:5px!important;
  background:#293c30!important;
  color:#70d3a0!important;
  text-align:left!important;
  font-size:11px!important;
  font-weight:700!important;
}


/* Stable final fixes: compact rain without changing page geometry. */
@media(min-width:961px){
  body.lobby-app .community-rain{
    padding:10px 11px!important;
    gap:6px!important;
  }
  body.lobby-app .rain-label{
    font-size:8px!important;
  }
  body.lobby-app .community-rain strong{
    margin:4px 0!important;
    font-size:22px!important;
  }
  body.lobby-app .community-rain small{
    font-size:9px!important;
    line-height:1.3!important;
  }
  body.lobby-app .community-rain .rain-phase{
    margin:6px 0 0!important;
    font-size:9px!important;
    line-height:1.35!important;
  }
  body.lobby-app #joinRain{
    min-height:32px!important;
    height:32px!important;
    padding:5px 8px!important;
    font-size:9px!important;
  }
  body.lobby-app #rainDonateAmount,
  body.lobby-app #rainDonateButton{
    height:33px!important;
    min-height:33px!important;
    font-size:9px!important;
  }
}

/* The homepage header should contain ONLY these four marked nav buttons.
   If an old cached script injects extras, hide them without touching layout. */
body.lobby-app .lobby-header nav > a:not([data-home-nav]){
  display:none!important;
}


/* payment-header-actions-v2 */
body.lobby-app .header-withdraw{
  height:40px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #3a4442!important;
  border-radius:5px!important;
  background:#292e30!important;
  color:#d2d9d5!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body.lobby-app .header-withdraw:hover{background:#32383a!important;color:#fff!important}
@media(max-width:1180px){
  body.lobby-app .header-withdraw{display:none!important}
}