/* Final mobile homepage layout repair.
   Important: .top-daily-spin / wallet / deposit / profile live INSIDE
   .lobby-actions, so the action wrapper is flattened on mobile. */
@media (max-width: 820px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body.lobby-app{--header-height:auto!important}

  body.lobby-app .lobby-frame,
  body.lobby-app .lobby-main{width:100%!important;max-width:100%!important;min-width:0!important}

  body.lobby-app .lobby-header{
    position:relative!important;
    top:auto!important;
    z-index:220!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 12px 9px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 96px 48px!important;
    grid-template-areas:
      "brand brand spin"
      "wallet deposit profile"
      "nav nav nav"!important;
    align-items:center!important;
    gap:8px 7px!important;
    overflow:visible!important;
  }

  body.lobby-app .lobby-brand{
    grid-area:brand!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    overflow:visible!important;
  }
  body.lobby-app .lobby-brand img{
    flex:0 0 auto!important;
    width:24px!important;
    height:28px!important;
  }
  body.lobby-app .lobby-brand strong{
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    color:#58d79a!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  /* Flatten the wrapper so each action can occupy a real header grid area. */
  body.lobby-app .lobby-actions{
    display:contents!important;
  }

  body.lobby-app .top-daily-spin{
    grid-area:spin!important;
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0 8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  body.lobby-app .top-daily-spin .mc-nav-icon{
    flex:0 0 auto!important;
    width:19px!important;
    height:19px!important;
  }
  body.lobby-app .top-daily-spin strong{
    display:inline!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }

  body.lobby-app .header-wallet{
    grid-area:wallet!important;
    justify-self:stretch!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0!important;
    padding:0 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  body.lobby-app .header-wallet .wallet-balance{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:6px!important;
  }
  body.lobby-app .header-wallet .mc-nav-icon{
    flex:0 0 auto!important;
    width:24px!important;
    height:24px!important;
  }
  body.lobby-app .header-wallet .wallet-copy{
    min-width:0!important;
    max-width:100%!important;
  }
  body.lobby-app .header-wallet small{
    display:block!important;
    font-size:7px!important;
    line-height:1!important;
  }
  body.lobby-app .header-wallet strong{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }
  body.lobby-app .header-wallet .wallet-cta{display:none!important}

  body.lobby-app .lobby-actions>.primary{
    grid-area:deposit!important;
    justify-self:stretch!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0!important;
    padding:0 7px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  body.lobby-app .header-withdraw{display:none!important}

  body.lobby-app .header-profile{
    grid-area:profile!important;
    justify-self:stretch!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0!important;
    padding:5px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  body.lobby-app .header-profile img{
    width:32px!important;
    height:32px!important;
    margin:0!important;
  }
  body.lobby-app .header-profile span{display:none!important}

  body.lobby-app .lobby-header nav{
    grid-area:nav!important;
    grid-column:auto!important;
    grid-row:auto!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:6px!important;
    overflow:visible!important;
  }
  body.lobby-app .lobby-header nav a{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:39px!important;
    min-height:39px!important;
    margin:0!important;
    padding:0 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    overflow:hidden!important;
    color:#bdc5c1!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  body.lobby-app .lobby-header nav svg{
    flex:0 0 auto!important;
    width:13px!important;
    height:13px!important;
  }

  body.lobby-app .lobby-content{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:11px 10px 74px!important;
    overflow:hidden!important;
  }
  body.lobby-app .page-title{
    width:100%!important;
    min-height:0!important;
    margin:2px 0 11px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  body.lobby-app .page-title h1{
    margin:0!important;
    font-size:22px!important;
    line-height:1.1!important;
  }
  body.lobby-app .fair-link{
    font-size:8px!important;
    white-space:nowrap!important;
  }

  body.lobby-app .welcome-grid{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.lobby-app .welcome-hero{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
  }
  body.lobby-app .welcome-copy{
    max-width:68%!important;
    padding:19px 16px 49px!important;
  }
  body.lobby-app .welcome-copy h2{font-size:32px!important}
  body.lobby-app .hero-treasure{
    right:-10%!important;
    width:63%!important;
  }
  body.lobby-app .spotlight{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
  }

  body.lobby-app .home-account-strip{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    padding:9px!important;
    overflow:hidden!important;
  }
  body.lobby-app .mini-profile{
    grid-column:1/-1!important;
    min-width:0!important;
    width:100%!important;
  }
  body.lobby-app .mini-profile>div{min-width:0!important}
  body.lobby-app .mini-profile strong,
  body.lobby-app .mini-profile small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.lobby-app .mini-balance{display:none!important}
  body.lobby-app .home-account-strip .home-profile-button,
  body.lobby-app .home-shiny-button{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:42px!important;
    margin:0!important;
  }

  body.lobby-app #bb-community{
    top:0!important;
    bottom:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    z-index:500!important;
  }
  body.lobby-app #communityToggle,
  body.lobby-app.community-collapsed #communityToggle{
    position:fixed!important;
    left:auto!important;
    right:12px!important;
    bottom:12px!important;
    z-index:230!important;
    box-sizing:border-box!important;
    width:54px!important;
    min-width:54px!important;
    height:42px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #35634d!important;
    border-radius:9px!important;
    background:#10221a!important;
    color:#7ce7ab!important;
    box-shadow:0 10px 26px rgba(0,0,0,.34)!important;
    font-size:0!important;
  }
  body.lobby-app #communityToggle::before,
  body.lobby-app.community-collapsed #communityToggle::before{
    content:"CHAT"!important;
    display:block!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.08em!important;
    filter:none!important;
  }
  body.lobby-app #communityToggle::after,
  body.lobby-app.community-collapsed #communityToggle::after{display:none!important}
  body.lobby-app.community-open #communityToggle{display:none!important}
}

@media (max-width: 520px){
  /* Put all wallet/account actions in the actual top bar on phones. */
  body.lobby-app .lobby-header{
    grid-template-columns:28px minmax(68px,1fr) 61px 61px 42px 42px!important;
    grid-template-areas:
      "brand wallet deposit withdraw profile spin"
      "nav nav nav nav nav nav"!important;
    padding:8px 8px 7px!important;
    gap:6px!important;
  }

  body.lobby-app .lobby-brand{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    overflow:hidden!important;
  }
  body.lobby-app .lobby-brand img{
    width:24px!important;
    height:28px!important;
  }
  body.lobby-app .lobby-brand strong{display:none!important}

  body.lobby-app .header-wallet{
    height:40px!important;
    min-width:0!important;
    padding:0 6px!important;
    gap:4px!important;
  }
  body.lobby-app .header-wallet .mc-nav-icon{
    width:19px!important;
    height:19px!important;
  }
  body.lobby-app .header-wallet small{display:none!important}
  body.lobby-app .header-wallet strong{
    font-size:10px!important;
    line-height:1!important;
  }

  body.lobby-app .lobby-actions>.primary{
    height:40px!important;
    min-width:0!important;
    padding:0 5px!important;
    font-size:9px!important;
  }

  body.lobby-app .header-withdraw{
    grid-area:withdraw!important;
    justify-self:stretch!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    margin:0!important;
    padding:0 4px!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:8px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  body.lobby-app .header-profile{
    height:40px!important;
    padding:4px!important;
  }
  body.lobby-app .header-profile img{
    width:30px!important;
    height:30px!important;
  }

  body.lobby-app .top-daily-spin{
    height:40px!important;
    padding:0!important;
  }
  body.lobby-app .top-daily-spin strong{display:none!important}
  body.lobby-app .top-daily-spin .mc-nav-icon{
    width:20px!important;
    height:20px!important;
  }

  body.lobby-app .lobby-header nav{
    margin-top:1px!important;
    gap:6px!important;
  }
  body.lobby-app .lobby-header nav a{
    height:37px!important;
    min-height:37px!important;
    font-size:8px!important;
    padding:0 3px!important;
  }
  body.lobby-app .lobby-header nav svg{display:none!important}

  body.lobby-app .fair-link{display:none!important}
  body.lobby-app .mini-profile small{display:none!important}
  body.lobby-app .home-shiny-button strong{display:none!important}
}