/* Neon layer — uses tokens from global-theme.css (icy blue + gold; no purple). */


html,
body {
  background-color: var(--bg_color_L1) !important;
  color: var(--text_color_L1);
  letter-spacing: 0.02em;
}

/* Headings / high emphasis */
h1, h2, h3, h4, h5, h6,
.navbar__content-center,
.timer-label,
.main-title {
  font-family: "Bebas Neue", "Teko", system-ui, sans-serif;
  letter-spacing: 1px;
}

/* Subtle animated neon grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 600px at 15% 20%, rgba(0, 207, 255, 0.07), transparent 55%),
    radial-gradient(900px 520px at 85% 12%, rgba(30, 144, 255, 0.06), transparent 58%),
    radial-gradient(800px 500px at 50% 88%, rgba(0, 229, 255, 0.04), transparent 55%),
    radial-gradient(700px 480px at 0% 60%, rgba(0, 100, 160, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(5, 10, 20, 0.5), rgba(0, 0, 0, 0.94)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.028) 0px,
      rgba(255, 255, 255, 0.028) 1px,
      transparent 1px,
      transparent 22px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0px,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 26px
    );
  opacity: 0.38;
  pointer-events: none;
  z-index: -1;
  transform: translateZ(0);
}

/* New index look: deeper vignette + scanline */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(0, 207, 255, 0.05), transparent 60%),
    radial-gradient(900px 520px at 12% 22%, rgba(30, 144, 255, 0.05), transparent 55%),
    radial-gradient(900px 520px at 88% 20%, rgba(255, 215, 0, 0.04), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(11, 15, 26, 0.92)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 6px);
  mix-blend-mode: soft-light;
  opacity: 0.28;
}

/* Improve contrast for inputs/fields */
input,
textarea,
select {
  background: rgba(0, 0, 0, 0.88) !important;
  color: var(--text_color_L1) !important;
  border: 1px solid rgba(0, 207, 255, 0.28) !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(0, 207, 255, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(0, 207, 255, 0.18),
    0 0 18px rgba(0, 229, 255, 0.12) !important;
}

/* “Game-like” buttons */
button,
.van-button {
  border-radius: 999px !important;
}

.van-button--primary,
button.primary,
.btn-primary {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-deep)) !important;
  border-color: rgba(0, 207, 255, 0.42) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0, 207, 255, 0.25),
    0 12px 28px rgba(0, 207, 255, 0.2),
    0 8px 22px rgba(30, 144, 255, 0.12);
}

/* Cards / surfaces */
.van-popup,
.van-dialog,
.van-cell,
.van-action-sheet__content,
.first_list-item,
.noticeBar__container,
.Wallet__C-balance,
.GameList__C,
.content {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 207, 255, 0.14),
    0 18px 50px rgba(0, 0, 0, 0.45);
}

/* Links */
a {
  color: var(--neon-cyan);
}
a:active,
a:hover {
  color: var(--neon-pink);
}

/* Tabbar — icy blue + gold edge */
body #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 #app .tabbar__container::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 207, 255, 0.35),
    rgba(255, 215, 0, 0.22),
    rgba(0, 229, 255, 0.3),
    transparent
  );
  opacity: 0.55;
}

body #app .tabbar__container-item {
  color: rgba(166, 189, 212, 0.92) !important;
  gap: .08rem !important;
  padding-bottom: .06rem;
  transition: transform 150ms ease, color 150ms ease, filter 150ms ease;
}

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

body #app .tabbar__container-item.active {
  color: #ffffff !important;
}

body #app .tabbar__container-item.active svg,
body #app .tabbar__container-item.active .svg-icon {
  transform: translateY(-1px) scale(1.06);
  filter:
    drop-shadow(0 0 8px rgba(0, 207, 255, 0.35))
    drop-shadow(0 0 10px rgba(255, 215, 0, 0.15));
}

/* Center (promotion) pill — icy blue → gold */
body #app .tabbar__container-item:nth-of-type(3) .promotionBg {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-deep)) !important;
  box-shadow:
    0 0 0 1px rgba(0, 207, 255, 0.25) inset,
    0 16px 30px rgba(0, 100, 180, 0.25),
    0 8px 20px rgba(255, 215, 0, 0.12);
}

/* user request: remove frame/border from tabbar items */
body #app .tabbar__container-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important
}

body #app .tabbar__container-item .promotionBg {
  box-shadow: none !important;
  border: none !important
}

/* Slightly lift the whole tabbar on desktop */
@media (min-width: 501px) {
  body #app .tabbar__container {
    border-radius: .28rem .28rem 0 0;
  }
}

/* Ensure home header logo always shows (some pages use a background sprite) */
.FD__C-head-logo,
.navbar__content-center .headLogo {
  background-image: url(/10xwinicon.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter:
    drop-shadow(0 0 10px rgba(0, 207, 255, 0.25))
    drop-shadow(0 0 8px rgba(255, 215, 0, 0.12));
}

/* Navbar: single center logo (headLogo); no duplicate left logo */
.navbar__content {
  position: relative;
  /* Symmetric horizontal padding so flex center matches viewport center */
  padding-left: 2.9rem;
  padding-right: 2.9rem;
}

.navbar__content::before {
  content: none !important;
  display: none !important;
}

/* Pin logo/title to true horizontal center (avoids flexbox drift vs side slots) */
.navbar__content-center {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: auto !important;
  max-width: 58% !important;
  z-index: 2;
  pointer-events: none;
  text-align: center;
}

.navbar__content-center .headLogo,
.navbar__content-center img {
  pointer-events: auto;
}

.navbar__content-left,
.navbar__content-right {
  z-index: 3;
}

/* Make thin separators visible on dark */
hr,
[class*="hairline"]:after,
.ar-1px-t:before,
.ar-1px-b:after,
.ar-1px-l:before,
.ar-1px-r:after {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* /main account cleanup: neutralize neon-glass surfaces inside account */
body #app:has(.userInfo__container[data-v-5bd44e74]) .van-popup,
body #app:has(.userInfo__container[data-v-5bd44e74]) .van-dialog,
body #app:has(.userInfo__container[data-v-5bd44e74]) .van-action-sheet__content,
body #app:has(.userInfo__container[data-v-5bd44e74]) .first_list-item,
body #app:has(.userInfo__container[data-v-5bd44e74]) .noticeBar__container,
body #app:has(.userInfo__container[data-v-5bd44e74]) .Wallet__C-balance,
body #app:has(.userInfo__container[data-v-5bd44e74]) .GameList__C {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important
}

/* /main background image override */
body #app:has(.userInfo__container[data-v-5bd44e74]) {
  background: url(/background.png) center top / cover no-repeat !important;
  background-color: transparent !important
}

body #app:has(.userInfo__container[data-v-5bd44e74]) .userInfo__container[data-v-5bd44e74] {
  background: url(/background.png) center top / cover no-repeat !important;
  background-image: url(/background.png) !important;
  background-color: transparent !important
}

/* /main tabbar boxed-item cleanup: remove boxed backgrounds/borders inside items */
body #app:has(.userInfo__container[data-v-5bd44e74]) .tabbar__container-item,
body #app:has(.userInfo__container[data-v-5bd44e74]) .tabbar__container-item::before,
body #app:has(.userInfo__container[data-v-5bd44e74]) .tabbar__container-item::after {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  content: none !important
}

body #app:has(.userInfo__container[data-v-5bd44e74]) .tabbar__container-item :not(.promotionBg) {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important
}

/* Activity: top inset = safe area + fixed bar (~1.23rem) + small gap (compact header, no hero) */
body #app .navbar.main[data-v-214b87c9] + .container.activity-wrapper[data-v-4a7709f3],
body #app .container.activity-wrapper[data-v-4a7709f3] {
  padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 52px)) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-bottom: 96px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 0 !important;
}

/*
 * Whole navbar column (not only .navbar-fixed) must stack above Activity content.
 * Activity route renders <NavBar/> + <div.activity-wrapper/> as fragment siblings under #app.
 */
body #app .navbar.main[data-v-214b87c9],
body #app .navbar[data-v-12a80a3e] {
  position: relative;
  z-index: 9998 !important;
}

/*
 * Fixed bar MUST sit above scrolling content on all phones (no :has() — many Android WebViews lack it).
 * Popups use z-index ~10000 in site_popup.css — keep nav below popups.
 */
body #app .navbar .navbar-fixed[data-v-12a80a3e],
body #app .navbar-fixed[data-v-12a80a3e] {
  position: fixed !important;
  top: 0 !important;
  z-index: 9998 !important;
  isolation: isolate !important;
  background-color: var(--bg-main) !important;
  background-image: var(
    --main_gradient-color,
    linear-gradient(90deg, #000000 0%, var(--bg-main) 35%, var(--blue-deep) 55%, #000000 100%)
  ) !important;
  padding-top: constant(safe-area-inset-top, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

body #app .container.activity-wrapper[data-v-4a7709f3] .activity-center-header[data-v-4a7709f3] {
  position: relative !important;
  z-index: auto !important;
}

body #app .container.activity-wrapper[data-v-4a7709f3] .activity-panel[data-v-4a7709f3] {
  position: relative !important;
  z-index: auto !important;
}

body #app .container.activity-wrapper[data-v-4a7709f3] > .van-list {
  position: relative !important;
  z-index: 0 !important;
  margin-top: 20px !important;
}

body #app .container.activity-wrapper[data-v-4a7709f3] .scroll .box:hover,
body #app .container.activity-wrapper[data-v-4a7709f3] .scroll .box:active {
  z-index: 1 !important;
}

@supports (-webkit-touch-callout: none) {
  body #app .navbar.main[data-v-214b87c9] + .container.activity-wrapper[data-v-4a7709f3],
  body #app .container.activity-wrapper[data-v-4a7709f3] {
    padding-top: max(56px, calc(constant(safe-area-inset-top, 0px) + 52px)) !important;
    padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 52px)) !important;
    padding-bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 88px)) !important;
  }
}

/*
 * Vant overlay / popup (van-dialog, firstSaveDialog, etc.): fixed navbar uses z-index 9998.
 * Default Vant stack is often ~2000 or inherits low --van-overlay-z-index, so the bar paints
 * on top of the modal. Keep overlays above the nav; below van-toast (~10050+) if present.
 */
body .van-overlay {
  z-index: 10020 !important;
}
body .van-popup {
  z-index: 10021 !important;
}