/* ================================================
   MODERN GAMING PLATFORM THEME - 凯旋门娱乐
   Dark Neon Style | Version 2.0
   ================================================ */

:root {
  --c-bg:         #070b18;
  --c-surface:    #0d1430;
  --c-surface2:   #111936;
  --c-card:       rgba(255,255,255,0.055);
  --c-card-h:     rgba(255,255,255,0.10);
  --c-border:     rgba(255,255,255,0.08);
  --c-border-g:   rgba(255,193,7,0.30);

  --c-gold:       #ffc107;
  --c-gold2:      #ff9800;
  --c-gold-glow:  rgba(255,193,7,0.40);
  --c-cyan:       #00e5ff;
  --c-cyan-glow:  rgba(0,229,255,0.35);
  --c-purple:     #9c4dff;
  --c-green:      #00e676;
  --c-red:        #ff5252;

  --c-txt:        #ffffff;
  --c-txt-dim:    rgba(255,255,255,0.58);
  --c-txt-muted:  rgba(255,255,255,0.32);

  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-full:999px;

  --t-ease: all 0.2s ease;
  --t-spring: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--c-bg) !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(156,77,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 105%, rgba(0,130,255,0.09) 0%, transparent 55%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* ─── HEADER ────────────────────────────────────── */
.header {
  background: linear-gradient(100deg, #090e20 0%, #14093a 55%, #091420 100%) !important;
  border-bottom: 1px solid rgba(255,193,7,0.38) !important;
  box-shadow: 0 2px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(156,77,255,0.06) !important;
  height: 52px !important;
  line-height: 52px !important;
}
.header h4 {
  color: var(--c-gold) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 18px var(--c-gold-glow) !important;
}
.header h4.index {
  background: url(../images/logo.png) center no-repeat !important;
  background-size: contain !important;
}
.header a i { color: var(--c-gold) !important; }

/* ─── SCROLL BOX ────────────────────────────────── */
.scroll_box {
  background: transparent !important;
  margin-top: 52px !important;
  padding-bottom: 66px !important;
}

/* ─── BANNER SLIDER ─────────────────────────────── */
.slide {
  margin: 10px 10px 0 !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
}
.slide .bd { background: var(--c-surface) !important; }
.slide .bd li img { border-radius: var(--r-lg) !important; }
.slide .hd { bottom: 10px !important; }
.slide .hd li {
  background: rgba(255,255,255,0.28) !important;
  width: 6px !important; height: 6px !important; margin: 0 3px !important;
}
.slide .hd li.on {
  background: var(--c-gold) !important;
  box-shadow: 0 0 10px var(--c-gold-glow) !important;
  width: 18px !important; border-radius: 3px !important;
}
.slide.home-slide {
  position: relative !important;
  aspect-ratio: 2.28 / 1 !important;
  min-height: 150px !important;
  background: rgba(255,255,255,0.03) !important;
}
.slide.home-slide .bd {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 150px !important;
}
.slide.home-slide .bd li {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.45s ease, transform 0.45s ease !important;
  transform: scale(1.02) !important;
}
.slide.home-slide .bd li.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  transform: scale(1) !important;
}
.slide.home-slide .bd li a,
.slide.home-slide .bd li img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.slide.home-slide .bd li img {
  object-fit: cover !important;
}
.slide.home-slide .hd {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 10px !important;
  z-index: 2 !important;
}
.slide.home-slide .hd li {
  text-indent: -999px !important;
}

/* ─── ANNOUNCEMENT ──────────────────────────────── */
.m_ann {
  background: rgba(255,193,7,0.07) !important;
  border: 1px solid rgba(255,193,7,0.22) !important;
  border-radius: var(--r-sm) !important;
  margin: 8px 10px !important;
  width: calc(100% - 20px) !important;
  padding: 0 10px !important;
  height: 34px !important;
  line-height: 34px !important;
}
.m_ann i { color: var(--c-gold) !important; font-size: 16px !important; }
.m_ann marquee { color: rgba(255,255,255,0.75) !important; font-size: 13px !important; }

/* ─── BALANCE CARD ──────────────────────────────── */
.balance-card {
  margin: 8px 10px;
  padding: 16px 18px;
  background: linear-gradient(135deg,
    rgba(156,77,255,0.18) 0%,
    rgba(0,100,200,0.12) 100%);
  border: 1px solid rgba(156,77,255,0.28);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.balance-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,193,7,0.12), transparent 70%);
  pointer-events: none;
}
.balance-card .bal-info { flex: 1; }
.balance-card .bal-label {
  font-size: 12px;
  color: var(--c-txt-dim);
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}
.balance-card .bal-amount {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-gold);
  text-shadow: 0 0 20px var(--c-gold-glow);
  letter-spacing: 1px;
}
.balance-card .bal-actions { display: flex; gap: 8px; }
.balance-card .bal-btn {
  padding: 9px 16px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: var(--t-spring);
  white-space: nowrap;
}
.balance-card .bal-btn.deposit {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%);
  color: #000;
  box-shadow: 0 4px 16px rgba(255,193,7,0.42);
}
.balance-card .bal-btn.deposit:active { transform: scale(0.94); }
.balance-card .bal-btn.withdraw {
  background: transparent;
  color: var(--c-txt);
  border: 1px solid rgba(255,255,255,0.22);
}

/* ─── QUICK ACTIONS (4 buttons) ─────────────────── */
.section.four-btn {
  background: transparent !important;
  margin: 8px 10px !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
}
.section.four-btn > div {
  flex: 1 !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  padding: 13px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: var(--t-ease) !important;
}
.section.four-btn > div:active {
  transform: scale(0.93) !important;
  background: var(--c-card-h) !important;
  border-color: var(--c-border-g) !important;
}
.section.four-btn em {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
}
.section.four-btn em svg { width: 22px !important; height: 22px !important; }
.section.four-btn span {
  font-size: 11px !important;
  color: var(--c-txt-dim) !important;
  font-weight: 500 !important;
}

/* ─── SECTIONS (game categories) ───────────────── */
.section {
  background: transparent !important;
  margin: 4px 10px !important;
}
.section .flex.items-center {
  padding: 12px 2px 8px !important;
  margin-bottom: 0 !important;
}
.section .flex.items-center span {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--c-txt) !important;
}
.section .flex.items-center svg {
  fill: var(--c-gold) !important;
  filter: drop-shadow(0 0 6px var(--c-gold-glow)) !important;
}

/* ─── SECTION AD BANNER ─────────────────────────── */
.section .flex.px-2 { padding: 4px 0 !important; }
#top1 {
  border-radius: var(--r-md) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease !important;
}
#top1.is-pressed {
  transform: scale(0.985) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42) !important;
}

.section.four-btn > div,
.balance-card .bal-btn,
.foot_btn {
  position: relative !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.section.four-btn > div.is-pressed,
.balance-card .bal-btn.is-pressed,
.foot_btn.is-pressed {
  transform: scale(0.95) !important;
}

/* ─── GAME GRID ─────────────────────────────────── */
.c4-btns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 4px 0 18px !important;
  align-items: stretch !important;
}
.c4-btns > div {
  width: auto !important;
  min-width: 0 !important;
  min-height: 132px !important;
  justify-content: center !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 100%) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 18px !important;
  padding: 18px 14px 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s ease,
              box-shadow 0.32s ease,
              background 0.32s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.30),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.c4-btns > div::before {
  content: '' !important;
  position: absolute !important;
  top: -35% !important;
  left: -24% !important;
  width: 148% !important;
  height: 148% !important;
  background: radial-gradient(circle at center,
    rgba(255,193,7,0.22) 0%,
    rgba(0,229,255,0.10) 42%,
    rgba(0,229,255,0) 72%) !important;
  opacity: 0.58 !important;
  pointer-events: none !important;
  animation: cardGlowDrift 5.8s ease-in-out infinite !important;
}
.c4-btns > div:nth-child(2n)::before {
  animation-delay: 0.6s !important;
}
.c4-btns > div::after {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--c-gold), var(--c-cyan)) !important;
  opacity: 0.78 !important;
  transition: opacity 0.2s !important, transform 0.32s ease !important;
}
.c4-btns > div:active {
  transform: translateY(-3px) scale(0.97) !important;
  border-color: rgba(255,193,7,0.34) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.35),
              0 0 24px rgba(255,193,7,0.16) !important;
  background: var(--c-card-h) !important;
}
.c4-btns > div.is-pressed {
  transform: translateY(-4px) scale(0.985) !important;
  border-color: rgba(255,193,7,0.34) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.35),
              0 0 24px rgba(255,193,7,0.16) !important;
}
.c4-btns > div:active::after,
.c4-btns > div.is-pressed::after {
  opacity: 1 !important;
  transform: scaleX(1.04) !important;
}
.c4-btns > div img {
  width: 68px !important; height: 68px !important;
  max-width: 58% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.42)) !important;
  animation: iconBob 3.4s ease-in-out infinite !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}
.c4-btns > div:nth-child(2n) img {
  animation-delay: 0.45s !important;
}
.c4-btns > div:active img,
.c4-btns > div.is-pressed img {
  transform: scale(0.95) rotate(-4deg) !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.48)) !important;
}
.c4-btns > div span {
  font-size: 13px !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.28) !important;
  min-height: 38px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tap-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0) !important;
  background: radial-gradient(circle,
    rgba(255,193,7,0.42) 0%,
    rgba(0,229,255,0.22) 48%,
    rgba(0,229,255,0) 72%) !important;
  animation: rippleBurst 0.56s ease-out forwards !important;
}

body.motion-ready .balance-card,
body.motion-ready #top1,
body.motion-ready .section.four-btn > div,
body.motion-ready .c4-btns > div {
  opacity: 0 !important;
  transform: translateY(20px) scale(0.96) !important;
}
body.motion-ready .balance-card.is-visible,
body.motion-ready #top1.is-visible,
body.motion-ready .section.four-btn > div.is-visible,
body.motion-ready .c4-btns > div.is-visible {
  opacity: 1 !important;
  transform: none !important;
}
body.motion-ready .balance-card,
body.motion-ready #top1,
body.motion-ready .section.four-btn > div,
body.motion-ready .c4-btns > div {
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease,
              border-color 0.32s ease !important;
}
body.motion-ready #top1.is-visible.is-pressed {
  transform: scale(0.985) !important;
}
body.motion-ready .section.four-btn > div.is-visible.is-pressed,
body.motion-ready .balance-card .bal-btn.is-pressed,
body.motion-ready .foot_btn.is-pressed {
  transform: scale(0.95) !important;
}
body.motion-ready .c4-btns > div.is-visible.is-pressed,
body.motion-ready .c4-btns > div.is-visible:active {
  transform: translateY(-4px) scale(0.985) !important;
}

/* ─── FOOTER NAVIGATION ─────────────────────────── */
.footer.menu {
  background: rgba(7,11,24,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1px solid rgba(255,193,7,0.2) !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.55) !important;
  height: 58px !important;
}
.foot_btn {
  color: var(--c-txt-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  transition: var(--t-ease) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 58px !important;
  line-height: 1 !important;
  gap: 4px !important;
  padding: 0 !important;
}
.foot_btn i {
  color: var(--c-txt-muted) !important;
  font-size: 22px !important;
  display: block !important;
  transition: var(--t-ease) !important;
}
.foot_btn.a { color: var(--c-gold) !important; }
.foot_btn.a i {
  color: var(--c-gold) !important;
  text-shadow: 0 0 14px var(--c-gold-glow) !important;
}

/* ─── AUTH PAGES (Login / Register) ────────────── */
.login_box, .reg_box {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 50px;
}
.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}
.auth-brand .auth-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-purple) 100%);
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 0 36px var(--c-gold-glow), 0 0 60px rgba(156,77,255,0.2);
}
.auth-brand .auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-txt);
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.auth-brand .auth-sub {
  font-size: 13px;
  color: var(--c-txt-dim);
  margin-top: 4px;
}
.auth-panel {
  width: 100%;
  max-width: 390px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.auth-panel .form_div ul { list-style: none; padding: 0; margin: 0 0 16px; }
.auth-panel .form_div ul li { position: relative; margin-bottom: 12px; }

.inputxt {
  width: 100% !important;
  height: 48px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--r-md) !important;
  color: var(--c-txt) !important;
  font-size: 15px !important;
  padding: 0 16px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  -webkit-appearance: none !important;
}
.inputxt:focus {
  border-color: rgba(255,193,7,0.55) !important;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.12) !important;
  background: rgba(255,255,255,0.09) !important;
}
.inputxt::placeholder { color: var(--c-txt-muted) !important; }
.inputxt.yzm { padding-right: 104px !important; }
.auth-panel .form_div ul li .code {
  position: absolute !important;
  right: 5px !important; top: 50% !important;
  transform: translateY(-50%) !important;
}
.auth-panel .form_div ul li .code img {
  display: block !important;
  border-radius: var(--r-xs) !important;
  cursor: pointer !important;
}
.tp-btn {
  position: absolute !important;
  right: 14px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important; height: 22px !important;
  background: none !important;
  cursor: pointer !important;
  border: none !important;
  opacity: 0.45 !important;
}
.tp-btn.btn-on { opacity: 0.85 !important; }
.tp-btn::before { content: '👁'; font-size: 16px; }

.submit {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 !important;
}
.submit input[type="submit"] {
  width: 100% !important;
  height: 50px !important;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  letter-spacing: 3px !important;
  box-shadow: 0 6px 22px rgba(255,193,7,0.46) !important;
  transition: var(--t-spring) !important;
}
.submit input[type="submit"]:active {
  transform: scale(0.96) !important;
  box-shadow: 0 3px 12px rgba(255,193,7,0.30) !important;
}
.submit a {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--c-txt-dim) !important;
}
.submit a.reg, .submit a.login { color: var(--c-cyan) !important; font-weight: 600 !important; }
.submit a.pwd { color: var(--c-txt-muted) !important; }

/* ─── USER CENTER ───────────────────────────────── */
.user_box { padding: 0 !important; width: 100% !important; }

.user-hero {
  text-align: center;
  padding: 30px 20px 24px;
  background: linear-gradient(180deg, rgba(156,77,255,0.14) 0%, transparent 100%);
  border-bottom: 1px solid var(--c-border);
}
.user-hero img.pic {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,193,7,0.5) !important;
  box-shadow: 0 0 22px var(--c-gold-glow) !important;
  background: var(--c-surface) !important;
  object-fit: cover !important;
}
.user-hero h4 {
  color: var(--c-txt) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
}

.user_box .min_nav {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  margin: 14px 12px 0 !important;
  height: auto !important;
  padding: 6px 0 !important;
  display: flex !important;
}
.user_box .min_nav a {
  flex: 1 !important; height: 62px !important;
  width: auto !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--c-txt-dim) !important;
}
.user_box .min_nav a i { font-size: 23px !important; display: block !important; }
.user_box .min_nav a.n1 { color: #ff6b6b !important; }
.user_box .min_nav a.n1 i { color: #ff6b6b !important; }
.user_box .min_nav a.n2 { color: var(--c-green) !important; }
.user_box .min_nav a.n2 i { color: var(--c-green) !important; }
.user_box .min_nav a.n3 { color: var(--c-cyan) !important; }
.user_box .min_nav a.n3 i { color: var(--c-cyan) !important; }
.user_box .min_nav a.n4 { color: var(--c-gold) !important; }
.user_box .min_nav a.n4 i { color: var(--c-gold) !important; }
.user_box .min_nav a.n5 { color: var(--c-purple) !important; }
.user_box .min_nav a.n5 i { color: var(--c-purple) !important; }

.user_box .user_nav {
  overflow: hidden !important;
  padding: 8px 12px !important;
  position: static !important;
}
.user_box .user_nav a {
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-txt-dim) !important;
  font-size: 14px !important;
  height: 48px !important; line-height: 48px !important;
  margin: 6px 0 !important;
  padding: 0 16px 0 14px !important;
  display: flex !important; align-items: center !important;
  position: relative !important;
}
.user_box .user_nav a::after {
  content: '›' !important;
  position: absolute !important;
  right: 14px !important;
  color: var(--c-txt-muted) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.user_box .user_nav a i {
  color: var(--c-gold) !important;
  font-size: 20px !important; margin-right: 12px !important;
}
.user_box .user_btn {
  padding: 10px 12px 20px !important;
  border-top: 1px solid var(--c-border) !important;
  margin: 8px 12px 0 !important;
}
.user_box .user_btn a {
  display: block !important;
  background: rgba(255,82,82,0.12) !important;
  border: 1px solid rgba(255,82,82,0.28) !important;
  color: var(--c-red) !important;
  height: 46px !important; line-height: 46px !important;
  text-align: center !important;
  border-radius: var(--r-full) !important;
  font-size: 15px !important; font-weight: 600 !important;
}

/* ─── USER PIC (original .user_pic) ─────────────── */
.user_box .user_pic { display: none !important; }

/* ─── ANIMATIONS ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardGlowDrift {
  0%, 100% { transform: translate3d(-14%, -10%, 0) scale(1); }
  50% { transform: translate3d(10%, 12%, 0) scale(1.08); }
}
@keyframes iconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes rippleBurst {
  0% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}
.scroll_box > * { animation: fadeUp 0.35s ease both; }
.scroll_box > *:nth-child(1) { animation-delay: 0.00s; }
.scroll_box > *:nth-child(2) { animation-delay: 0.06s; }
.scroll_box > *:nth-child(3) { animation-delay: 0.12s; }
.scroll_box > *:nth-child(4) { animation-delay: 0.18s; }
.scroll_box > *:nth-child(5) { animation-delay: 0.22s; }
.scroll_box > *:nth-child(6) { animation-delay: 0.26s; }
.scroll_box > *:nth-child(7) { animation-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .scroll_box > *,
  .c4-btns > div::before,
  .c4-btns > div img,
  .tap-ripple {
    animation: none !important;
  }
  body.motion-ready .balance-card,
  body.motion-ready #top1,
  body.motion-ready .section.four-btn > div,
  body.motion-ready .c4-btns > div {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── PAY PAGE ─────────────────────────────────── */
/* 提示框 */
.tps {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,
    rgba(17,24,52,0.96) 0%,
    rgba(10,15,33,0.98) 100%) !important;
  border: 1px solid rgba(255,193,7,0.18) !important;
  border-radius: 18px !important;
  margin: 14px 10px 18px !important;
  padding: 16px 14px 14px !important;
  width: auto !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.8 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.30),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.tps::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  box-shadow: 0 0 14px rgba(255,193,7,0.38) !important;
}
.tps::after {
  content: '' !important;
  position: absolute !important;
  right: -30px !important;
  top: -30px !important;
  width: 120px !important;
  height: 120px !important;
  background: radial-gradient(circle, rgba(255,193,7,0.18) 0%, rgba(255,193,7,0) 68%) !important;
  pointer-events: none !important;
}
.tps h4 {
  font-size: 15px !important;
  color: var(--c-gold) !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}
.tps h4:last-of-type::before,
.tps h4:only-of-type::before {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  box-shadow: 0 0 10px rgba(255,193,7,0.42) !important;
  flex: 0 0 10px !important;
}
.tps h4:first-child:not(:last-child) {
  display: inline-flex !important;
  max-width: 100% !important;
  padding: 6px 10px !important;
  margin-bottom: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.tps h4:first-child:not(:last-child)::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: none !important;
  display: inline-block !important;
}
.tps h4:last-of-type {
  color: var(--c-gold) !important;
  font-size: 15px !important;
  margin-bottom: 8px !important;
}
.tps p {
  position: relative !important;
  z-index: 1 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.84) !important;
  padding: 10px 12px 10px 14px !important;
  line-height: 1.75 !important;
  margin: 8px 0 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.tps p::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,193,7,0.80) !important;
}
/* 数字序号特殊处理 */
.tps p:nth-child(n)::first-letter {
  color: var(--c-gold) !important;
  font-weight: 800 !important;
}

/* 充値页表单内元素 */
.user_box .form_div ul li .title {
  display: block !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: var(--r-md) !important;
  color: var(--c-txt-dim) !important;
  font-size: 14px !important;
}

/* 付款二维码区域 */
.pay_ewm {
  background: transparent !important;
}
.pay_ewm .ewm {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--r-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  padding: 12px !important;
  margin: 10px !important;
  width: auto !important;
}
.pay_ewm .ewm li {
  height: auto !important;
}
.pay_ewm .ewm li.a { display: block !important; }
.pay_ewm .ewm img {
  border-radius: var(--r-md) !important;
  border: 3px solid rgba(255,193,7,0.3) !important;
  box-shadow: 0 0 20px rgba(255,193,7,0.15) !important;
}

/* 支付方式 tab按鈕 */
.pay_ewm .btn {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 10px 0 !important;
  margin: 0 !important;
}
.pay_ewm .btn a {
  flex: 1 !important;
  height: 40px !important;
  line-height: 40px !important;
  text-align: center !important;
  background: var(--c-card) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-full) !important;
  color: var(--c-txt-dim) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: auto !important;
  margin: 0 !important;
  transition: var(--t-ease) !important;
}
.pay_ewm .btn a.a {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  border-color: transparent !important;
  color: #000 !important;
  box-shadow: 0 4px 14px rgba(255,193,7,0.38) !important;
}

/* BETTING PAGE */
.header h4 {
  padding: 0 92px 0 54px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.header h4.index {
  padding: 0 !important;
}
.scroll_box {
  overflow-x: hidden !important;
}
.main .lottery_box {
  width: auto !important;
  margin: 0 10px 10px !important;
  background: linear-gradient(180deg,
    rgba(13,20,48,0.96) 0%,
    rgba(8,12,28,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.34) !important;
  overflow: visible !important;
}
.lottery_box .lottery_top {
  height: auto !important;
  min-height: 86px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.lottery_top .lottery_now {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: var(--c-txt) !important;
}
.lottery_now #qishu_now,
.lottery_now #haoma,
.lottery_now #haoma_type {
  color: rgba(255,255,255,0.9) !important;
}
.lottery_now #qishu_now i {
  color: var(--c-gold) !important;
}
.lottery_now #haoma {
  height: auto !important;
  min-height: 24px !important;
}
.lottery_now #haoma i.zw,
.lottery_now #haoma_type i.zw,
.lottery_now #haoma_type i.s {
  color: rgba(255,255,255,0.78) !important;
}
.lottery_top .user {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
}
.lottery_top .user a {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,0.86) !important;
}
.lottery_top .user a i {
  color: var(--c-gold) !important;
}
.lottery_box .lottery_next {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.88) !important;
}
.lottery_next #qishu_next,
.lottery_next #time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.lottery_next #qishu_next i {
  color: rgba(255,255,255,0.96) !important;
}
.lottery_next #time i {
  margin-right: 0 !important;
}
.lottery_next a.go_more {
  position: static !important;
  right: auto !important;
  top: auto !important;
  margin-left: auto !important;
  color: var(--c-gold) !important;
  white-space: nowrap !important;
}
.lottery_next a.more {
  position: static !important;
  right: auto !important;
  top: auto !important;
  flex: 0 0 10px !important;
  margin-left: 2px !important;
  border-color: var(--c-gold) !important;
}
.val_box {
  padding: 6px 10px !important;
  color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.03) !important;
}
.lottery_box .haoma_box {
  left: 0 !important;
  width: 100% !important;
  padding: 10px 12px 12px !important;
  background: rgba(7,11,24,0.98) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top: none !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  box-shadow: 0 14px 24px rgba(0,0,0,0.32) !important;
}
.main .chat_box,
.main .game_box {
  width: auto !important;
  max-width: none !important;
  margin: 0 10px 12px !important;
  background: linear-gradient(180deg,
    rgba(13,20,48,0.96) 0%,
    rgba(8,12,28,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34) !important;
  overflow-x: hidden !important;
}
.game_box .games {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
  padding-bottom: 210px !important;
  border-bottom: none !important;
}
.games .title {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  width: 78px !important;
  max-width: 78px !important;
  flex: 0 0 78px !important;
  background: rgba(7,11,24,0.8) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(8px) !important;
}
.games .title a {
  min-height: 50px !important;
  padding: 12px 6px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  font-size: 13px !important;
  white-space: normal !important;
  word-break: break-all !important;
}
.games .title a.a {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
}
.games .line_box {
  float: none !important;
  width: calc(100% - 78px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.line_box .line h4 {
  line-height: 34px !important;
  color: var(--c-gold) !important;
  background: rgba(255,255,255,0.10) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 16px !important;
}
.line_box .line .tab {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  line-height: normal !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.02) !important;
}
.line_box .line .tab a {
  float: none !important;
  width: 33.3333% !important;
  min-height: 42px !important;
  padding: 8px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.04) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word !important;
  transition: var(--t-ease) !important;
}
.line_box .line .tab a:last-child {
  border-right: none !important;
}
.line_box .line .tab.n2 a {
  width: 50% !important;
}
.line_box .line .tab a i,
.line_box .line .tab a em,
.line_box .line .tab a o {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
.line_box .line .tab a i {
  width: auto !important;
  min-width: 18px !important;
  font-size: 14px !important;
}
.line_box .line .tab a i.m {
  width: auto !important;
  min-width: 16px !important;
}
.line_box .line .tab a em {
  height: auto !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.58) !important;
}
.line_box .line .tab a o {
  margin-right: 0 !important;
  font-size: 11px !important;
  color: rgba(255,193,7,0.88) !important;
}
.line_box .line .tab a.a {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  color: #000 !important;
}
.line_box .line .tab a.a em,
.line_box .line .tab a.a o {
  color: rgba(0,0,0,0.76) !important;
}
.line_box .line .tab.num a {
  justify-content: flex-start !important;
  padding-left: 10px !important;
}
.line_box .line .tab.num a i {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  margin: 0 6px 0 0 !important;
}
.line_box .line .tab.n2.num a i {
  margin-left: 0 !important;
}
.send_box {
  left: 50% !important;
  right: auto !important;
  bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  width: calc(100% - 16px) !important;
  max-width: 730px !important;
  padding: 14px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #ff7a00 0%, #ea5f00 100%) !important;
  box-shadow: 0 -10px 28px rgba(0,0,0,0.45) !important;
  border-radius: 18px 18px 0 0 !important;
}
.send_box h4 {
  margin: 0 40px 8px 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.send_box h5 {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 34px 12px 0 !important;
  padding: 6px 12px !important;
  line-height: 1.4 !important;
  font-size: 12px !important;
  border-radius: var(--r-full) !important;
  background: rgba(14,21,69,0.96) !important;
}
.send_box .fast_li {
  margin: 0 0 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}
.send_box .fast_li a {
  width: auto !important;
  min-width: 52px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background: rgba(100,82,0,0.88) !important;
  border-radius: var(--r-full) !important;
}
.send_box .btn_li {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 8px !important;
  line-height: normal !important;
}
.send_box .btn_li span {
  flex: 0 0 100% !important;
  text-align: left !important;
  font-size: 13px !important;
}
.send_box .btn_li input {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 120px !important;
  height: 38px !important;
}
.send_box .btn_li a {
  min-width: 72px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.send_box .btn_li a.cancel {
  min-width: 64px !important;
}
.send_box a.hide {
  top: 14px !important;
  right: 14px !important;
  width: 14px !important;
  height: 14px !important;
}
.game_box a.rules {
  left: 8px !important;
  bottom: calc(128px + env(safe-area-inset-bottom)) !important;
  z-index: 103 !important;
  width: 34px !important;
  min-height: 96px !important;
  height: auto !important;
  padding: 10px 7px !important;
  line-height: 1.25 !important;
  background: linear-gradient(180deg, #1ecf7e 0%, #09a65d 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.32) !important;
}
.game_box_shade {
  left: 10px !important;
  top: 0 !important;
  width: auto !important;
  height: 0 !important;
  border-radius: var(--r-lg) !important;
  background-color: rgba(3,8,20,0.56) !important;
}
.footer {
  background: rgba(7,11,24,0.94) !important;
  border-top: 1px solid rgba(255,193,7,0.20) !important;
  backdrop-filter: blur(10px) !important;
}
.footer a.game_btn {
  height: 40px !important;
  line-height: 40px !important;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold2) 100%) !important;
  color: #000 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(255,193,7,0.35) !important;
}
.footer a.game_btn.a {
  background: linear-gradient(135deg, #ff7a00 0%, #ff5200 100%) !important;
  color: #fff !important;
}
@media (max-width: 390px) {
  .games .title {
    width: 72px !important;
    max-width: 72px !important;
    flex-basis: 72px !important;
  }
  .games .line_box {
    width: calc(100% - 72px) !important;
  }
  .games .title a {
    min-height: 48px !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
  }
  .line_box .line h4 {
    font-size: 15px !important;
  }
  .line_box .line .tab a {
    min-height: 40px !important;
    padding: 8px 2px !important;
    font-size: 13px !important;
  }
  .send_box {
    width: calc(100% - 12px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .send_box .fast_li a {
    min-width: 48px !important;
    padding: 0 10px !important;
  }
  .send_box .btn_li a {
    min-width: 64px !important;
    padding: 0 12px !important;
  }
  .game_box a.rules {
    width: 30px !important;
    min-height: 86px !important;
    padding: 8px 5px !important;
  }
}

/* RULES PAGE */
.rules {
  margin: 10px !important;
  padding: 0 0 16px !important;
  background: linear-gradient(180deg,
    rgba(13,20,48,0.96) 0%,
    rgba(8,12,28,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34) !important;
}
.rules .title {
  height: auto !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  line-height: 1.5 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--c-gold) !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(255,193,7,0.18) !important;
  text-shadow: 0 0 16px rgba(255,193,7,0.18) !important;
}
.rules .msg {
  padding: 14px 14px 6px !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.88) !important;
}
.rules .msg h5 {
  margin: 12px 0 8px !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.96) !important;
}
.rules .msg p {
  margin: 0 0 8px !important;
  padding: 8px 12px !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.86) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
}
.rules .msg p span {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.rules .msg div {
  margin: 6px 0 12px 0 !important;
  padding-left: 10px !important;
  border-left: 2px solid rgba(255,193,7,0.24) !important;
  color: rgba(255,255,255,0.84) !important;
}
.rules .msg div p {
  color: rgba(255,255,255,0.82) !important;
}