/**
 * Wallet route (#/wallet) — Blue + Gold casino styling; per-vendor game grid hidden via CSS (split cards visible).
 * Targets Vue SFC output (scoped data-v-0dabd3fc); does not alter JS or APIs.
 * Quick-action titles: Orbitron (loaded from Google Fonts in index_live.html).
 */

body:has(#app .wallet-container) {
  --w-bg: #0b0f1a;
  --w-card: #111827;
  --w-blue-deep: #0b3c91;
  --w-blue: #1e90ff;
  --w-blue-btn: #2563eb;
  --w-gold: #ffd700;
  --w-gold-warm: #ffc107;
  --w-gold-dark: #ffb300;
  --w-text: #ffffff;
  --w-text-muted: #a0aec0;
  /* Align Vant tab bar tokens with neon (avoid green primary on Wallet) */
  --van-tabbar-item-active-color: #ffffff;
  --van-primary-color: #1e90ff;
}

/* --- Shell: full-bleed dark canvas --- */
html:has(#app .wallet-container),
body:has(#app .wallet-container) {
  background: var(--w-bg) !important;
}

#app .wallet-container[data-v-0dabd3fc] {
  background: var(--w-bg) !important;
  color: var(--w-text) !important;
  min-height: 100vh;
  box-sizing: border-box;
}

#app .wallet-container-content[data-v-0dabd3fc] {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 16px !important;
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0.28rem !important;
}

/* --- Top bar --- */
body:has(#app .wallet-container) #app .wallet-container-header[data-v-0dabd3fc] .navbar-fixed,
body:has(#app .wallet-container) #app .wallet-container-header .navbar .navbar-fixed {
  background: var(--w-bg) !important;
  background-image: none !important;
  box-shadow: 0 1px 0 rgba(30, 144, 255, 0.15) !important;
}

body:has(#app .wallet-container) #app .wallet-container-header[data-v-0dabd3fc] .van-nav-bar__title,
body:has(#app .wallet-container) #app .wallet-container-header[data-v-0dabd3fc] .van-nav-bar__text {
  color: var(--w-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body:has(#app .wallet-container) #app .wallet-container-header[data-v-0dabd3fc] .van-icon {
  color: var(--w-blue) !important;
}

/* Brand logo — header right (wallet route only). App NavBar uses .navbar/.navbar__content, not Vant .van-nav-bar__content. */
body:has(#app .wallet-container) #app .wallet-container-header[data-v-0dabd3fc] .navbar .navbar__content::after,
body:has(#app .wallet-container) #app .wallet-container-header .navbar .navbar__content::after {
  content: "";
  position: absolute;
  right: 0.28rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 0.58rem;
  background-color: transparent;
  background-image: url("/10xwinicon.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}

/* Fallback if a build ever uses Vant nav bar markup */
body:has(#app .wallet-container) #app .wallet-container-header[data-v-0dabd3fc] .van-nav-bar__content::after {
  content: "";
  position: absolute;
  right: 0.28rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 0.58rem;
  background-color: transparent;
  background-image: url("/10xwinicon.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}

#app .wallet-container-header[data-v-0dabd3fc] {
  background: transparent !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

/*
 * Total balance hero — 135° gradient + wallet1.png; cyan→gold gradient ring (mask border).
 */
#app .wallet-container-header-belly[data-v-0dabd3fc] {
  --wallet-bg-zoom: 1.1;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative !important;
  isolation: isolate !important;
  width: calc(100% - 32px) !important;
  margin: 12px 16px 22px !important;
  padding: 22px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-color: #0b0f1a !important;
  background-image:
    linear-gradient(135deg, rgba(11, 60, 145, 0.72) 0%, rgba(2, 6, 23, 0.88) 100%),
    url("images/background/wallet1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center, 78% center !important;
  background-size:
    100% 100%,
    calc(100% * var(--wallet-bg-zoom)) calc(100% * var(--wallet-bg-zoom)) !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  border: none !important;
  /* Soft glow on diagonal corners (cyan top-left, gold bottom-right) */
  box-shadow:
    -8px -8px 24px rgba(0, 207, 255, 0.2),
    8px 8px 24px rgba(255, 215, 0, 0.18) !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.5px !important;
  box-sizing: border-box !important;
  background: linear-gradient(
    135deg,
    #00cfff 0%,
    transparent 40%,
    transparent 60%,
    #ffd700 100%
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc]::after {
  content: none !important;
  display: none !important;
}

/* Bundled / optional wallet art (if present in DOM) */
#app .wallet-container-header-belly[data-v-0dabd3fc] img {
  opacity: 0.95 !important;
  filter: none !important;
}

/* .label */
#app .wallet-container-header-belly[data-v-0dabd3fc] > span[data-v-0dabd3fc] {
  order: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  padding-right: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--w-text-muted) !important;
  opacity: 1 !important;
  margin: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
}

/* .hero-top h1 — main balance GOLD */
#app .wallet-container-header-belly[data-v-0dabd3fc] > div:nth-of-type(1)[data-v-0dabd3fc] {
  order: 2 !important;
  position: relative !important;
  z-index: 2 !important;
  padding-right: 0 !important;
  margin-top: 6px !important;
  font-size: 32px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #ffd700 !important;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc] > svg[data-v-0dabd3fc] {
  display: none !important;
}

/* .hero-stats */
#app .wallet-container-header-belly[data-v-0dabd3fc] > div:nth-of-type(2)[data-v-0dabd3fc] {
  order: 3 !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  margin-top: 18px !important;
  gap: 14px !important;
  justify-content: stretch !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc] > div:nth-of-type(2) > div[data-v-0dabd3fc] {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc] > div:nth-of-type(2) > div:first-child[data-v-0dabd3fc]::before,
#app .wallet-container-header-belly[data-v-0dabd3fc] > div:nth-of-type(2) > div:last-child[data-v-0dabd3fc]::before {
  content: none !important;
  display: none !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc] .total[data-v-0dabd3fc] {
  margin: 8px 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--w-text) !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
}

#app .wallet-container-header-belly[data-v-0dabd3fc] > div:nth-of-type(2) p:not(.total)[data-v-0dabd3fc] {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--w-text-muted) !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
}

/* --- Main card stack --- */
#app .wallet-container-content .container[data-v-0dabd3fc] {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: unset !important;
  margin-top: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}

#app .wallet-container-content .container .progressBars[data-v-0dabd3fc] {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 0.28rem !important;
}

#app .wallet-container-content .container .progressBars > div[data-v-0dabd3fc] .van-circle[data-v-0dabd3fc],
#app .wallet-container-content .container .progressBars .van-circle[data-v-0dabd3fc] {
  display: none !important;
}

#app .wallet-container-content .container .progressBarsL[data-v-0dabd3fc],
#app .wallet-container-content .container .progressBarsR[data-v-0dabd3fc] {
  width: 50% !important;
  flex: 1 !important;
  min-height: 2.4rem !important;
  padding: 16px 12px !important;
  border-radius: 18px !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  background-color: #0b0f1a !important;
  background-image: linear-gradient(135deg, rgba(11, 60, 145, 0.45) 0%, rgba(2, 6, 23, 0.92) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  box-shadow:
    -4px -4px 18px rgba(0, 207, 255, 0.16),
    4px 4px 18px rgba(255, 215, 0, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.45) !important;
  justify-content: center !important;
  gap: 0.12rem !important;
}

/* Main wallet card — wallpaper + same tint as split cards for readable type */
#app .wallet-container-content .container .progressBarsL[data-v-0dabd3fc] {
  background-image:
    linear-gradient(135deg, rgba(11, 60, 145, 0.5) 0%, rgba(2, 6, 23, 0.9) 100%),
    url("images/background/mainwallet.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Third-party wallet card — wallpaper + tint for readable type */
#app .wallet-container-content .container .progressBarsR[data-v-0dabd3fc] {
  background-image:
    linear-gradient(135deg, rgba(11, 60, 145, 0.5) 0%, rgba(2, 6, 23, 0.9) 100%),
    url("images/background/3rdpartty.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Same cyan→gold gradient ring as total balance hero */
#app .wallet-container-content .container .progressBarsL[data-v-0dabd3fc]::after,
#app .wallet-container-content .container .progressBarsR[data-v-0dabd3fc]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.5px !important;
  box-sizing: border-box !important;
  background: linear-gradient(
    135deg,
    #00cfff 0%,
    transparent 40%,
    transparent 60%,
    #ffd700 100%
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#app .wallet-container-content .container .progressBarsL[data-v-0dabd3fc]::before,
#app .wallet-container-content .container .progressBarsR[data-v-0dabd3fc]::before {
  content: none !important;
  display: none !important;
}

#app .wallet-container .progressBarsL .wallet-lucide-split-slot,
#app .wallet-container .progressBarsR .wallet-lucide-split-slot {
  display: none !important;
}

body.wallet-lucide-icons #app .wallet-container .userDetail .imgD .wallet-lucide-inline,
body.wallet-lucide-icons #app .wallet-container .userDetail .imgD svg.lucide {
  color: var(--w-blue) !important;
}

#app .wallet-container-content .container .progressBars > div h3[data-v-0dabd3fc] {
  margin-top: 0 !important;
  font-size: 0.38rem !important;
  font-weight: 700 !important;
  color: var(--w-text) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
  position: relative !important;
  z-index: 2 !important;
}

#app .wallet-container-content .container .progressBars > div span[data-v-0dabd3fc] {
  font-size: 0.26rem !important;
  color: var(--w-text-muted) !important;
  position: relative !important;
  z-index: 2 !important;
}

@keyframes wallet-transfer-shine {
  0% {
    transform: translate3d(-120%, 0, 0) skewX(-16deg);
  }
  100% {
    transform: translate3d(350%, 0, 0) skewX(-16deg);
  }
}

/* Transfer CTA */
#app .wallet-container-content .container .recycleBtnD[data-v-0dabd3fc] {
  margin-bottom: 0.32rem !important;
}

#app .wallet-container-content .container .recycleBtnD .recycleBtn[data-v-0dabd3fc]:not(.disable) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  height: 1rem !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  background: linear-gradient(135deg, #ffd700, #ffb300) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  border: none !important;
}

#app .wallet-container-content .container .recycleBtnD .recycleBtn[data-v-0dabd3fc]:not(.disable)::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 38% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  ) !important;
  animation: wallet-transfer-shine 2.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#app .wallet-container-content .container .recycleBtnD .recycleBtn[data-v-0dabd3fc]:not(.disable)::after {
  content: "Transfer Balance →";
  position: relative !important;
  z-index: 2 !important;
  font-size: 0.38rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  #app .wallet-container-content .container .recycleBtnD .recycleBtn[data-v-0dabd3fc]:not(.disable)::before {
    animation: none !important;
  }
}

#app .wallet-container-content .container .recycleBtnD .recycleBtn.disable[data-v-0dabd3fc] {
  border-radius: 999px !important;
  color: var(--w-text-muted) !important;
  background: rgba(17, 24, 39, 0.9) !important;
  border: 1px solid rgba(30, 144, 255, 0.2) !important;
}

@keyframes wallet-action-slide-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wallet-action-glow-pulse {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(255, 215, 0, 0.55),
      0 0 16px rgba(255, 215, 0, 0.28),
      0 1px 2px rgba(0, 0, 0, 0.75);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255, 215, 0, 0.68),
      0 0 22px rgba(255, 215, 0, 0.38),
      0 1px 2px rgba(0, 0, 0, 0.75);
  }
}

/* Quick actions — stacked full-width cards; art left, headline right (no icons) */
#app .wallet-container-content .container .userDetail[data-v-0dabd3fc] {
  margin-top: 0.12rem !important;
  gap: 12px !important;
  grid-template-columns: 1fr !important;
}

#app .wallet-container-content .container .userDetail > div[data-v-0dabd3fc] {
  padding: 0 !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1)[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(2)[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(3)[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(4)[data-v-0dabd3fc] {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  padding: 18px 24px !important;
  min-height: 1.72rem !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(30, 144, 255, 0.4) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.12) inset !important;
  background-color: #0b0f1a !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: left center !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1)[data-v-0dabd3fc] {
  background-image:
    linear-gradient(
      90deg,
      rgba(2, 6, 23, 0.15) 0%,
      rgba(2, 6, 23, 0.5) 42%,
      rgba(11, 15, 26, 0.92) 72%,
      rgba(11, 15, 26, 0.97) 100%
    ),
    url("images/background/deposit-card-bg.png") !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(2)[data-v-0dabd3fc] {
  background-image:
    linear-gradient(
      90deg,
      rgba(2, 6, 23, 0.15) 0%,
      rgba(2, 6, 23, 0.5) 42%,
      rgba(11, 15, 26, 0.92) 72%,
      rgba(11, 15, 26, 0.97) 100%
    ),
    url("images/background/withdraw-card-bg.png") !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(3)[data-v-0dabd3fc] {
  background-image:
    linear-gradient(
      90deg,
      rgba(2, 6, 23, 0.15) 0%,
      rgba(2, 6, 23, 0.5) 42%,
      rgba(11, 15, 26, 0.92) 72%,
      rgba(11, 15, 26, 0.97) 100%
    ),
    url("images/background/deposit-history-card-bg.png") !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(4)[data-v-0dabd3fc] {
  background-image:
    linear-gradient(
      90deg,
      rgba(2, 6, 23, 0.15) 0%,
      rgba(2, 6, 23, 0.5) 42%,
      rgba(11, 15, 26, 0.92) 72%,
      rgba(11, 15, 26, 0.97) 100%
    ),
    url("images/background/withdrawal-history-card-bg.png") !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1) .imgD[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(2) .imgD[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(3) .imgD[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(4) .imgD[data-v-0dabd3fc] {
  display: none !important;
}

/* i18n label hidden; ::after shows fixed English headline */
#app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(2) span[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(3) span[data-v-0dabd3fc],
#app .wallet-container-content .container .userDetail > div:nth-child(4) span[data-v-0dabd3fc] {
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  overflow: visible !important;
  transform-origin: right center !important;
  animation: wallet-action-slide-in 0.45s ease forwards !important;
  transition: transform 0.15s ease !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc] {
  animation-delay: 0s !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(2) span[data-v-0dabd3fc] {
  animation-delay: 0.06s !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(3) span[data-v-0dabd3fc] {
  animation-delay: 0.12s !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(4) span[data-v-0dabd3fc] {
  animation-delay: 0.18s !important;
}

#app .wallet-container-content .container .userDetail > div[data-v-0dabd3fc]:active span[data-v-0dabd3fc] {
  animation: none !important;
  opacity: 1 !important;
  transform: translateX(0) scale(0.96) !important;
}

#app .wallet-container-content .container .userDetail > div[data-v-0dabd3fc]:active span[data-v-0dabd3fc]::after {
  letter-spacing: 2px !important;
  transition: letter-spacing 0.3s ease !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc]::after,
#app .wallet-container-content .container .userDetail > div:nth-child(2) span[data-v-0dabd3fc]::after,
#app .wallet-container-content .container .userDetail > div:nth-child(3) span[data-v-0dabd3fc]::after,
#app .wallet-container-content .container .userDetail > div:nth-child(4) span[data-v-0dabd3fc]::after {
  display: block !important;
  font-family: "Orbitron", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  line-height: 1.15 !important;
  text-align: right !important;
  transform: none !important;
  transform-origin: right center !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  color: #ffd700 !important;
  -webkit-text-fill-color: #ffd700 !important;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.75) !important;
  transition: letter-spacing 0.3s ease !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc]::after,
#app .wallet-container-content .container .userDetail > div:nth-child(2) span[data-v-0dabd3fc]::after {
  font-size: 0.58rem !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(3) span[data-v-0dabd3fc]::after,
#app .wallet-container-content .container .userDetail > div:nth-child(4) span[data-v-0dabd3fc]::after {
  font-size: 0.4rem !important;
  line-height: 1.18 !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc]::after {
  content: "DEPOSIT" !important;
  animation: wallet-action-glow-pulse 2.5s ease-in-out 0.55s infinite !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(1)[data-v-0dabd3fc]:active
  span[data-v-0dabd3fc]::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  #app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc],
  #app .wallet-container-content .container .userDetail > div:nth-child(2) span[data-v-0dabd3fc],
  #app .wallet-container-content .container .userDetail > div:nth-child(3) span[data-v-0dabd3fc],
  #app .wallet-container-content .container .userDetail > div:nth-child(4) span[data-v-0dabd3fc] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #app .wallet-container-content .container .userDetail > div:nth-child(1) span[data-v-0dabd3fc]::after {
    animation: none !important;
  }
}

#app .wallet-container-content .container .userDetail > div:nth-child(2) span[data-v-0dabd3fc]::after {
  content: "WITHDRAW" !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(3) span[data-v-0dabd3fc]::after {
  content: "DEPOSIT HISTORY" !important;
}

#app .wallet-container-content .container .userDetail > div:nth-child(4) span[data-v-0dabd3fc]::after {
  content: "WITHDRAWAL HISTORY" !important;
}

#app .wallet-container-content .container .userDetail > div .imgD[data-v-0dabd3fc] {
  width: 1.35rem !important;
  height: 1.35rem !important;
  border-radius: 14px !important;
  background: var(--w-card) !important;
  border: 1px solid rgba(30, 144, 255, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

#app .wallet-container-content .container .userDetail > div:active .imgD[data-v-0dabd3fc] {
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(30, 144, 255, 0.45) !important;
}

#app .wallet-container-content .container .userDetail > div span[data-v-0dabd3fc] {
  color: var(--w-text) !important;
  font-size: 0.26rem !important;
  font-weight: 600 !important;
}

/* Game wallets */
#app .wallet-container-content .gameList[data-v-0dabd3fc] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 0.2rem !important;
  margin-bottom: 0.5rem !important;
  padding-top: 0.44rem !important;
  align-items: stretch !important;
  text-align: left !important;
}

#app .wallet-container-content .gameList[data-v-0dabd3fc]::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.28rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-gold);
  content: "GAME WALLETS";
}

#app .wallet-container-content .gameList[data-v-0dabd3fc]::after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.24rem;
  font-weight: 600;
  color: var(--w-blue);
  content: "View All >";
}

/* Game cards: vendor name → icon → balance, vertically centered as a group */
#app .wallet-container-content .gameList > div[data-v-0dabd3fc] {
  width: 100% !important;
  min-height: 2.65rem !important;
  padding: 14px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(
    165deg,
    rgba(22, 30, 50, 0.98) 0%,
    rgba(11, 15, 26, 0.99) 55%,
    rgba(15, 23, 42, 0.96) 100%
  ) !important;
  border: 1px solid rgba(30, 144, 255, 0.3) !important;
  /* Gold corner glow only — same family as total balance hero (bottom-right) */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.38),
    8px 8px 24px rgba(255, 215, 0, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* DOM: 1=icon, 2=h3.money, 3=span — display as title, icon, amount */
#app .wallet-container-content .gameList > div[data-v-0dabd3fc] > *:nth-child(1) {
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#app .wallet-container-content .gameList > div[data-v-0dabd3fc] > *:nth-child(1) svg,
#app .wallet-container-content .gameList > div[data-v-0dabd3fc] > *:nth-child(1) .svg-icon,
#app .wallet-container-content .gameList > div[data-v-0dabd3fc] > *:nth-child(1) img {
  width: 100% !important;
  height: 100% !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
}

#app .wallet-container-content .gameList > div[data-v-0dabd3fc] > *:nth-child(2) {
  order: 3 !important;
  margin: 0 !important;
}

#app .wallet-container-content .gameList > div[data-v-0dabd3fc] > *:nth-child(3) {
  order: 1 !important;
  margin: 0 !important;
}

#app .wallet-container-content .gameList > div h3.money[data-v-0dabd3fc] {
  text-align: center !important;
  font-size: 0.32rem !important;
  font-weight: 800 !important;
  color: var(--w-gold) !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
  width: 100% !important;
  max-width: 100% !important;
}

#app .wallet-container-content .gameList > div > span[data-v-0dabd3fc]:not(.money) {
  text-align: center !important;
  font-size: 0.26rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--w-text) !important;
  line-height: 1.2 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app .wallet-container-content .gameList .box[data-v-0dabd3fc] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#app .wallet-container-content .gameList .money[data-v-0dabd3fc] {
  transform: none !important;
}

#app .wallet-container-content .gameList > div.select[data-v-0dabd3fc] {
  border-color: rgba(255, 215, 0, 0.45) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.38),
    8px 8px 28px rgba(255, 215, 0, 0.32),
    0 0 22px rgba(255, 215, 0, 0.12) !important;
  background: linear-gradient(
    165deg,
    rgba(26, 32, 55, 0.99) 0%,
    rgba(15, 23, 42, 0.99) 100%
  ) !important;
}

/*
 * Bottom tab bar on #/wallet — force same neon glass + cyan/gold active state as Promotion.
 * (Scoped/Vant primary can otherwise show green icons on the active tab.)
 */
body:has(#app .wallet-container) #app .tabbar__container {
  background:
    linear-gradient(180deg, rgba(11, 15, 26, 0.55), rgba(0, 0, 0, 0.96)) !important;
  border-top: 1px solid rgba(0, 207, 255, 0.22) !important;
  box-shadow:
    0 -10px 30px rgba(0, 0, 0, 0.5),
    0 -1px 0 rgba(255, 215, 0, 0.08) inset,
    0 0 0 1px rgba(0, 207, 255, 0.1) inset !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body:has(#app .wallet-container) #app .tabbar__container::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 207, 255, 0.35),
    rgba(255, 215, 0, 0.22),
    rgba(0, 229, 255, 0.3),
    transparent
  ) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

body:has(#app .wallet-container) #app .tabbar__container-item {
  color: rgba(166, 189, 212, 0.92) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  gap: 0.08rem !important;
  padding-bottom: 0.06rem !important;
  transition: transform 150ms ease, color 150ms ease, filter 150ms ease !important;
}

body:has(#app .wallet-container) #app .tabbar__container-item svg,
body:has(#app .wallet-container) #app .tabbar__container-item .svg-icon {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) !important;
  transition: transform 150ms ease, filter 150ms ease !important;
}

body:has(#app .wallet-container) #app .tabbar__container-item.active {
  color: #ffffff !important;
}

body:has(#app .wallet-container) #app .tabbar__container-item.active svg,
body:has(#app .wallet-container) #app .tabbar__container-item.active .svg-icon,
body:has(#app .wallet-container) #app .tabbar__container-item.active .svg-icon svg {
  color: #ffffff !important;
  fill: currentColor !important;
  transform: translateY(-1px) scale(1.06) !important;
  filter:
    drop-shadow(0 0 8px rgba(0, 207, 255, 0.35))
    drop-shadow(0 0 10px rgba(255, 215, 0, 0.15)) !important;
}

body:has(#app .wallet-container) #app .tabbar__container-item.active svg path,
body:has(#app .wallet-container) #app .tabbar__container-item.active svg circle,
body:has(#app .wallet-container) #app .tabbar__container-item.active svg rect,
body:has(#app .wallet-container) #app .tabbar__container-item.active svg polyline,
body:has(#app .wallet-container) #app .tabbar__container-item.active svg line {
  fill: currentColor !important;
  stroke: currentColor !important;
}

body:has(#app .wallet-container) #app .tabbar__container-item:nth-of-type(3) .promotionBg {
  background: linear-gradient(135deg, var(--w-blue), var(--w-blue-deep)) !important;
  border: none !important;
  box-shadow: none !important;
}

@media (min-width: 501px) {
  body:has(#app .wallet-container) #app .tabbar__container {
    border-radius: 0.28rem 0.28rem 0 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#app .wallet-container) #app .tabbar__container-item.active svg,
  body:has(#app .wallet-container) #app .tabbar__container-item.active .svg-icon {
    transform: none !important;
  }
}

/* --- Hide per-vendor game wallet grid only; main + Bdt (thirdParty) split cards stay visible (#/wallet) --- */
body:has(#app .wallet-container) #app .wallet-container-content .gameList[data-v-0dabd3fc] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* --- Press feedback --- */
#app .wallet-container .userDetail > div:active,
#app .wallet-container .gameList > div:active,
#app .wallet-container .recycleBtn:active,
#app .wallet-container .progressBarsL:active,
#app .wallet-container .progressBarsR:active {
  transform: scale(0.97);
  transition: transform 0.12s ease;
}