/* ============================================================
   v59-desktop-canvas — Mine-page style grey sides on ALL routes
   + first-deposit overlay shows page behind (not solid black)
   + hide home corner float icons
   Loads LAST. Rollback: remove link from index.html
   ============================================================ */

/* 0) html root also grey */
html {
  background: #8E919E !important;
  background-color: #8E919E !important;
}

/* 1) Grey desktop gutters */
html.html,
html body,
html body.v40-route-home,
html body.v40-route-mine,
html body.v40-route-activity,
html body.v40-route-earn,
html body.v40-route-gift,
html body.v40-route-game,
html body.v40-route-wallet,
html body.v40-route-withdraw,
html body.v40-route-withdraw-history,
html body.v40-route-recharge,
html body.v40-route-recharge-history,
html body.v40-wd-dialog-open,
html body.v33-auth-active,
html body.v90-auth-active,
html body:has(.history-wrapper),
html body:has(.rechargeh__container),
html body:has(main.recharge-history),
html body:has(.withdraw__container),
html body:has(.payment-container),
html body:has(.redeem-container) {
  background: #8E919E !important;
  background-color: #8E919E !important;
  background-image: none !important;
}

/* 2) Phone column */
html body #app {
  width: 10rem !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  background-color: #14082B !important;
}

@media screen and (max-width: 500px) {
  html body #app {
    width: 100% !important;
  }
}

/* 3) Overlay: show CURRENT page behind (not solid black).
   Full-viewport dim — same as original Vant behaviour.
   Do NOT paint opaque purple/black. */
html body .van-overlay,
html body .dialog__outside {
  background: rgba(0, 0, 0, 0.45) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  /* full viewport — page content stays visible through dim */
  max-width: none !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

@media (min-width: 501px) {
  /* Bottom sheets stay pinned to phone column */
  html body .van-popup.van-popup--bottom {
    max-width: 10rem !important;
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }

  /* Center dialogs stay in phone column — NOT toasts (Succeed must stay compact) */
  html body .van-popup.van-popup--center:not(.van-toast),
  html body .van-dialog,
  html body .firstSaveDialog,
  html body .van-popup.firstSaveDialog,
  html body .van-dialog.firstSaveDialog {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    max-width: calc(10rem - 0.4rem) !important;
    width: 8rem !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
  }

  /* Bet Succeed toast — compact pill like ref (not full phone width) */
  html body .van-toast.van-popup--center,
  html body .van-toast.van-toast--text,
  html body .van-toast.van-toast--html {
    width: auto !important;
    max-width: 4.2rem !important;
    min-width: 0 !important;
    padding: 0.2rem 0.36rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
  }
  html body .van-toast .van-toast__text {
    white-space: nowrap !important;
  }

  html body .v40-wd-underlay,
  html body .v40-wd-dialog-backdrop {
    max-width: 10rem !important;
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }
}

/* 4) First-deposit title black on gold */
html body .firstSaveDialog .header .title,
html body .van-dialog.firstSaveDialog .header .title,
html body .firstSaveDialog .van-dialog__header .title {
  color: #000 !important;
}

/* 5) Transaction history Bet title black */
html body .transRecord__container-content__card-top h3,
.transRecord__container-content__card-top h3 {
  color: #000 !important;
}

html body .transRecord__container-content__card-bot:has(textarea[value="0"]),
html body .transRecord__container-content__card-bot:has(textarea[value=""]) {
  display: none !important;
}

/* 7) COMPLETE REMOVE startup popups:
   - Extra first deposit bonus (.firstSaveDialog)
   - V84 / login tabbed banner popups
   - Add-to-desktop prompt masks */
html body .firstSaveDialog,
html body .van-dialog.firstSaveDialog,
html body .van-popup.firstSaveDialog,
html body #v84-login-popup-root,
html body .v84-popup-root,
html body .v84-shell,
html body .tab-popup-mask,
html body .popup-mask[data-v-26485d02],
html body .isAppForcedDownloadEnabled-dialog {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

html body .float,
html body .float-entry,
html body .rewardCenter.float-entry,
html body .turntable-lottery.float-entry,
html body .reBenefit.float-entry,
html body #customerId,
html body .customer#customerId,
html body div.customer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  left: -9999px !important;
  bottom: auto !important;
  right: auto !important;
}

/* Guest Register + Log in — top-right of home nav */
html body #app .p8-home__guest,
html body #app .p8-home__guest.v59-guest-in-nav,
html body #app .p8-home__nav .p8-home__guest {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-direction: row !important;
  gap: .16rem !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  overflow: visible !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Keep logo left, guest buttons flush right in the same nav row */
html body #app .p8-home__nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .2rem !important;
}

html body #app .p8-home__nav .p8-home__nav-left {
  flex: 0 0 auto !important;
}

html body #app .p8-home__nav .p8-home__guest-btn,
html body #app .p8-home__guest.v59-guest-in-nav .p8-home__guest-btn {
  height: .72rem !important;
  min-width: 1.7rem !important;
  padding: 0 .36rem !important;
  border-radius: 999px !important;
  font-size: .32rem !important;
  font-weight: 800 !important;
  flex: none !important;
  line-height: .72rem !important;
}

html body #app .p8-home__guest-btn--register {
  order: 1 !important;
  background: transparent !important;
  border: .02667rem solid #F5C24C !important;
  color: #F5C24C !important;
}

html body #app .p8-home__guest-btn--login {
  order: 2 !important;
  background: linear-gradient(135deg, #F8D169 0%, #E5A92C 60%, #B07A14 100%) !important;
  border: none !important;
  color: #1B0B36 !important;
}

/* Hide any leftover guest row still sitting under the banner area */
html body #app .p8-home > .p8-home__guest:not(.v59-guest-in-nav) {
  display: none !important;
}

/* All viewports: Succeed / text toasts stay compact (ref size), not full bar */
html body .van-toast.van-toast--text,
html body .van-toast.van-toast--html,
html body .van-toast.van-popup--center.van-toast--text {
  width: fit-content !important;
  width: -moz-fit-content !important;
  max-width: 4.2rem !important;
  min-width: 0 !important;
  padding: 0.2rem 0.36rem !important;
  box-sizing: border-box !important;
}
html body .van-toast.van-toast--text .van-toast__text,
html body .van-toast.van-toast--html .van-toast__text {
  white-space: nowrap !important;
}