/* ==========================================================================
   Site theme layer — dark navy / orange.
   Loaded after the original stylesheets; only restyles, never changes logic.
   ========================================================================== */

:root {
  --th-bg: #0f1421;
  --th-bg-2: #141b2d;
  --th-card: #19253f;
  --th-card-2: #1f2937;
  --th-card-3: #243352;
  --th-border: rgba(124, 147, 183, .45);
  --th-border-strong: #7c93b7;
  --th-text: #f1f7ff;
  --th-muted: #94a3b8;
  --th-dim: #64748b;
  --th-orange-1: #ffaf2d;
  --th-orange-2: #f97316;
  --th-orange: linear-gradient(180deg, #ffaf2d 0%, #f97316 100%);
  --th-grey: linear-gradient(180deg, #536177 0%, #43536c 50%, #374151 100%);
  --th-teal: #14b8a6;
  --th-green: #22c55e;
  --th-red: #ef4444;
  --th-violet: #a855f7;
  --th-radius: 12px;
  --th-radius-lg: 16px;
  --th-font: 'Poppins', 'Roboto', 'Inter', sans-serif;
  --th-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --th-glow: 0 0 18px rgba(249, 115, 22, .45);

  /* glass surfaces */
  --th-glass: linear-gradient(-2.34deg, rgba(69, 90, 116, .6) 2.49%, rgba(46, 60, 78, .6) 41.48%, rgba(31, 41, 55, .6) 100%);
  --th-glass-gold: linear-gradient(-2.34deg, rgba(246, 203, 65, .92) 2.49%, rgba(255, 175, 45, .92) 41.48%, rgba(249, 115, 22, .92) 100%);
  --th-glass-border: rgba(124, 147, 183, .85);
  --th-glass-blur: blur(13px);
}

/* --------------------------------------------------------------------------
   Glass surface: translucent gradient, blur, hairline border, inner light
   and a faint ornamental texture.
   -------------------------------------------------------------------------- */
.th-glass {
  position: relative;
  isolation: isolate;
  background: var(--th-glass);
  -webkit-backdrop-filter: var(--th-glass-blur);
  backdrop-filter: var(--th-glass-blur);
  border: 1px solid var(--th-glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .35);
}

.th-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url(/theme/img/ui/card-pattern.webp) center / cover;
  opacity: .06;
  pointer-events: none;
}

.th-glass--gold {
  background: var(--th-glass-gold);
  border-color: #ffce61;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px rgba(249, 115, 22, .35);
}

.th-glass--gold::before { opacity: .14; mix-blend-mode: overlay; }

html,
body.th {
  background: var(--th-bg) !important;
}

body.th {
  font-family: var(--th-font) !important;
  color: var(--th-text);
  -webkit-tap-highlight-color: transparent;
}

/* #app holds fixed-position sheets and popups, so it only fades (a transform
   would re-anchor them); the home wrapper has no fixed children and can slide */
body.th #app {
  animation: th-fade-in .4s ease-out backwards;
}

body.th .th-app {
  animation: th-page-in .45s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes th-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes th-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes th-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes th-shine {
  0% { transform: translateX(-120%) skewX(-20deg); }
  60%, 100% { transform: translateX(260%) skewX(-20deg); }
}

@keyframes th-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes th-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); }
  70% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@keyframes th-ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes th-pop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes th-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@keyframes th-tick {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); color: #fff; text-shadow: 0 0 12px rgba(239, 68, 68, .9); }
  100% { transform: scale(1); }
}

@keyframes th-spin {
  to { transform: rotate(360deg); }
}

@keyframes th-confetti-fall {
  0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), 105vh, 0) rotate(720deg); opacity: .9; }
}

/* --------------------------------------------------------------------------
   Generic building blocks
   -------------------------------------------------------------------------- */
.th-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  height: 40px;
  font: 600 14px/1 var(--th-font);
  color: var(--th-text);
  background: var(--th-orange);
  box-shadow: 0 4px 14px rgba(249, 115, 22, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  text-decoration: none;
}

.th-btn:active { transform: scale(.96); filter: brightness(.95); }
.th-btn--grey { background: var(--th-grey); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.th-btn--ghost { background: transparent; border: 1px solid var(--th-orange-2); color: var(--th-orange-1); box-shadow: none; }
.th-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.th-btn--block { display: flex; width: 100%; }

.th-card {
  background: var(--th-card);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
}

.th-shine {
  position: relative;
  overflow: hidden;
}

.th-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  animation: th-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.th-ripple-host { position: relative; overflow: hidden; }

.th-ripple-dot {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: th-ripple .55s ease-out forwards;
  pointer-events: none;
}

.th-reveal { opacity: 0; transform: translateY(16px); }
.th-reveal.is-in { animation: th-rise .55s cubic-bezier(.2, .8, .2, 1) both; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.th-toast {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 82vw;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(20, 27, 45, .96);
  border: 1px solid var(--th-border);
  box-shadow: var(--th-shadow);
  color: var(--th-text);
  font: 500 14px/1.4 var(--th-font);
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), opacity .2s ease;
}

.th-toast.is-show { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.th-toast i {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--th-orange);
  color: #fff;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Confetti
   -------------------------------------------------------------------------- */
.th-confetti {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  overflow: hidden;
}

.th-confetti span {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: th-confetti-fall linear forwards;
}

/* --------------------------------------------------------------------------
   Bottom tab bar (views/nav.ejs)
   -------------------------------------------------------------------------- */
.th-tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  max-width: 480px;
  height: 66px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 0 6px 7px;
  font-family: var(--th-font);
  filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, .5));
}

/* notched bar shape */
.th-tabbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/theme/img/ui/tab-bg.svg) center bottom / 100% 100% no-repeat;
}

.th-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #8a97ad;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, transform .15s ease;
}

.th-tabbar__item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: .75;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), opacity .2s ease, filter .2s ease;
}

.th-tabbar__item:active { transform: scale(.9); }
.th-tabbar__item.is-active { color: var(--th-orange-1); font-weight: 600; }

/* tint the grey icons orange when active (home has its own coloured icon) */
.th-tabbar__item.is-active img {
  opacity: 1;
  transform: translateY(-3px) scale(1.12);
  filter: brightness(0) saturate(100%) invert(67%) sepia(76%) saturate(1500%) hue-rotate(345deg) brightness(102%) drop-shadow(0 0 6px rgba(249, 115, 22, .6));
}

.th-tabbar__item.is-active img.is-own-color { filter: drop-shadow(0 0 6px rgba(249, 115, 22, .6)); }

.th-tabbar__item.is-active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--th-orange);
  box-shadow: 0 0 8px rgba(249, 115, 22, .8);
}

/* centre: animated treasure chest from a sprite sheet (6 frames) */
.th-tabbar__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.th-chest {
  --k: .42;
  position: relative;
  width: calc(162px * var(--k));
  height: calc(166px * var(--k));
  margin: -40px 0 2px;
  transition: transform .2s ease;
}

.th-tabbar__center:active .th-chest { transform: scale(.9); }

.th-chest__glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 77, .55) 0%, rgba(249, 115, 22, .18) 45%, transparent 70%);
  animation: th-chest-glow 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* the chest itself stays still; only the lid frames change */
.th-chest__box {
  position: absolute;
  inset: 0;
  background: url(/theme/img/ui/chest-anim.webp) no-repeat;
  background-size: calc(1024px * var(--k)) calc(647px * var(--k));
  background-position: calc(-427px * var(--k)) calc(-249px * var(--k));
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  animation: th-chest-frames 3.2s step-end infinite;
}

/* frame boxes measured from the sprite: closed → opening → full of jewels */
@keyframes th-chest-frames {
  0%   { background-position: calc(-427px * var(--k)) calc(-249px * var(--k)); }
  45%  { background-position: calc(-226px * var(--k)) calc(-249px * var(--k)); }
  50%  { background-position: calc(-24px * var(--k)) calc(-250px * var(--k)); }
  55%  { background-position: calc(-681px * var(--k)) calc(-7px * var(--k)); }
  60%  { background-position: calc(-482px * var(--k)) calc(-7px * var(--k)); }
  65%  { background-position: calc(-281px * var(--k)) calc(-7px * var(--k)); }
  92%  { background-position: calc(-482px * var(--k)) calc(-7px * var(--k)); }
  96%  { background-position: calc(-226px * var(--k)) calc(-249px * var(--k)); }
  100% { background-position: calc(-427px * var(--k)) calc(-249px * var(--k)); }
}

@keyframes th-chest-glow {
  0%, 100% { opacity: .45; }
  60% { opacity: .9; }
}

.th-tabbar__center.is-active span { color: var(--th-orange-1); }

/* spacing so page content is not hidden behind the bar */
body.th .th-tabbar-spacer { height: 80px; }

/* hide the old tab bar only on pages that include the themed one */
body.th-has-tabbar .tabbar__container { display: none !important; }

/* --------------------------------------------------------------------------
   Shared restyle of the original (Vant based) components
   -------------------------------------------------------------------------- */
body.th .navbar,
body.th .navbar-fixed,
body.th .van-nav-bar {
  background: rgba(15, 20, 33, .92) !important;
  border-bottom: 1px solid rgba(124, 147, 183, .2);
}

/* blur only on the bars that are themselves fixed: a backdrop-filter on the
   .navbar wrapper would un-pin the fixed header some pages nest inside it */
body.th .navbar-fixed,
body.th .van-nav-bar--fixed {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.th .van-nav-bar__title,
body.th .navbar-title,
body.th .navbar__content-title {
  color: var(--th-text) !important;
  font-family: var(--th-font) !important;
  font-weight: 600 !important;
}

body.th .van-popup,
body.th .van-dialog {
  background: var(--th-card) !important;
  border: 1px solid var(--th-border);
  font-family: var(--th-font) !important;
}

/* vant centres these with a transform, so animate opacity only */
body.th .van-popup--center,
body.th .van-dialog {
  animation: th-fade-in .3s ease-out backwards;
}

body.th .van-overlay { background: rgba(5, 8, 15, .72) !important; }

body.th .van-button--default,
body.th .van-dialog__confirm {
  background: var(--th-orange) !important;
  color: #fff !important;
  border: 0 !important;
}

body.th input,
body.th textarea,
body.th select {
  font-family: var(--th-font) !important;
}

/* text elements on the restyled pages use the theme font (icons keep their own) */
body.th-pages #app :is(div, p, h1, h2, h3, h4, h5, h6, a, button, li, td, th, label, input, textarea),
body.th-pages #app span:not([class*="icon"]):not([class*="fa-"]) {
  font-family: var(--th-font);
}

/* the pages reference Font Awesome Pro styles that never load; show the free solid glyph */
body.th .fa-light,
body.th .fa-thin,
body.th .fa-sharp,
body.th .fa-duotone {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* original full-screen loader: keep it, just themed */
body.th .Loading {
  background: rgba(15, 20, 33, .78) !important;
}

/* --------------------------------------------------------------------------
   Scene behind the restyled pages (wallet, account, promotion, activity…):
   casino room + soft glows, seen through the translucent page surfaces.
   -------------------------------------------------------------------------- */
html:has(body.th-pages) { background: var(--th-bg) !important; }
body.th-pages { background: transparent !important; }

body.th-pages::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(260px 260px at 0% 25%, rgba(249, 115, 22, .3), transparent 70%),
    radial-gradient(240px 240px at 100% 55%, rgba(20, 184, 166, .22), transparent 70%),
    radial-gradient(260px 260px at 30% 95%, rgba(124, 58, 237, .22), transparent 70%),
    linear-gradient(180deg, rgba(15, 20, 33, .15) 0%, rgba(15, 20, 33, .65) 60%, var(--th-bg) 100%),
    url(/theme/img/ui/login-bg.webp) center top / 100% auto no-repeat,
    var(--th-bg);
}

/* ==========================================================================
   Content pages — real glass panels + graphics
   ========================================================================== */
@keyframes th-coins-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* let the scene show through the page wrappers */
body.th-pages #app .mian,
body.th-pages #app .mian.page,
body.th-pages #app .menu-box,
body.th-pages #app .promotion {
  background: transparent !important;
}

body.th-pages #app .navbar,
body.th-pages #app .c-row.navbar {
  background: rgba(22, 31, 51, .45) !important;
  border-bottom: 1px solid rgba(124, 147, 183, .3);
}

/* shared glass panel look */
body.th-p-wallet #app :is(.balance, .box),
body.th-p-mian #app :is(.total-box, .settingPanel__container, .list),
body.th-p-promotion #app :is(.container, .info_content, .promote__cell-item, .btn.m-b-10),
body.th-p-activity #app :is(.content-title, .box),
body.th-p-wallet-recharge #app :is(.txtBox, .Recharge__container-intro),
body.th-p-wallet-withdrawal #app :is(.txtBox, .number-box, .box, .arCard, .features) {
  background: var(--th-glass) !important;
  -webkit-backdrop-filter: var(--th-glass-blur);
  backdrop-filter: var(--th-glass-blur);
  border: 1px solid var(--th-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px rgba(0, 0, 0, .35) !important;
}

/* balance cards: gold tint + floating coins */
body.th-p-wallet #app .balance,
body.th-p-mian #app .total-box,
body.th-p-wallet-recharge #app .txtBox,
body.th-p-wallet-withdrawal #app .txtBox {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(180px 140px at 100% 0%, rgba(255, 175, 45, .35), transparent 70%),
    var(--th-glass) !important;
}

body.th-p-wallet #app .balance::after,
body.th-p-mian #app .total-box::after,
body.th-p-wallet-recharge #app .txtBox::after,
body.th-p-wallet-withdrawal #app .txtBox::after {
  content: "";
  position: absolute;
  inset: -10% -6%;
  background: url(/images/coin-bonus.webp) center / cover no-repeat;
  opacity: .35;
  pointer-events: none;
  animation: th-coins-drift 4s ease-in-out infinite;
}

/* account header: chest + glow on the right */
body.th-p-mian #app .info {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(220px 160px at 85% 40%, rgba(255, 175, 45, .35), transparent 70%),
    linear-gradient(135deg, rgba(69, 90, 116, .55), rgba(31, 41, 55, .35)) !important;
  border-radius: 0 0 26px 26px;
}

body.th-p-mian #app .info::after,
body.th-p-activity #app .activity-banner::after {
  --k: .62;
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: calc(162px * var(--k));
  height: calc(166px * var(--k));
  background: url(/theme/img/ui/chest-anim.webp) no-repeat;
  background-size: calc(1024px * var(--k)) calc(647px * var(--k));
  background-position: calc(-281px * var(--k)) calc(-7px * var(--k));
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5));
  pointer-events: none;
  animation: th-float 3.4s ease-in-out infinite;
}

body.th-p-mian #app .info .van-image,
body.th-p-mian #app .info img:first-child {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 206, 97, .85), 0 0 16px rgba(255, 175, 45, .5);
}

/* activity banner */
body.th-p-activity #app .activity-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(220px 160px at 85% 50%, rgba(255, 175, 45, .35), transparent 70%),
    linear-gradient(135deg, rgba(69, 90, 116, .55), rgba(31, 41, 55, .3)) !important;
  border-bottom: 1px solid rgba(124, 147, 183, .3);
}

body.th-p-activity #app .activity-banner > * { position: relative; z-index: 1; max-width: 70%; }

/* promotion: commission card with coins (its ::after is already used) */
body.th-p-promotion #app .container { overflow: hidden; }

body.th-p-promotion #app .container::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  background:
    url(/images/coin-bonus.webp) center top / 120% auto no-repeat,
    radial-gradient(240px 140px at 50% 0%, rgba(255, 175, 45, .35), transparent 70%);
  opacity: .55;
  pointer-events: none;
  animation: th-coins-drift 4s ease-in-out infinite;
}

/* menu rows read as glass list items */
body.th-p-mian #app .list > *,
body.th-p-mian #app .settingPanel__container > * {
  border-color: rgba(124, 147, 183, .2) !important;
}

/* account header: smaller chest tucked top-right, text above it */
body.th-p-mian #app .info::after { --k: .48; top: 12px; bottom: auto; right: 6px; }
body.th-p-mian #app .info > * { position: relative; z-index: 1; }