/* ============================================================
   MOBILE-PHASE-1 (2026-05-09) — global mobile foundation
   Goal: align every section to same gutter / spacing / type / touch grid
   Scope: doesn't redesign individual sections, only normalizes structure
   ============================================================ */

/* ── 1. Tokens (CSS vars) ──────────────────────────────────────── */
:root {
  --m-gut: 14px;            /* horizontal gutter on mobile */
  --m-gut-tab: 18px;
  --m-gut-desk: 24px;
  --m-section-gap: 28px;    /* vertical rhythm between sections */
  --m-card-gap: 12px;       /* between cards in a row */
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-touch: 44px;          /* min touch target */
  --m-shadow-1: 0 2px 8px rgba(0,0,0,0.25);
  --m-shadow-2: 0 4px 16px rgba(0,0,0,0.4);
  --m-shadow-3: 0 8px 24px rgba(0,0,0,0.5);
}

/* ── 2. Page container — consistent gutter all sections ───────── */
.bs-container,
body > main,
.section,
#hot-promo-strip,
#sec-popular-games,
#sec-promo,
#sec-dashboard {
  padding-left: var(--m-gut) !important;
  padding-right: var(--m-gut) !important;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .bs-container, body > main, .section,
  #hot-promo-strip, #sec-popular-games, #sec-promo, #sec-dashboard {
    padding-left: var(--m-gut-tab) !important;
    padding-right: var(--m-gut-tab) !important;
  }
}
@media (min-width: 1280px) {
  .bs-container, body > main, .section,
  #hot-promo-strip, #sec-popular-games, #sec-promo, #sec-dashboard {
    padding-left: var(--m-gut-desk) !important;
    padding-right: var(--m-gut-desk) !important;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 3. Section vertical rhythm — uniform gap ──────────────────── */
.section,
#hot-promo-strip,
#sec-popular-games,
#sec-promo,
#sec-dashboard {
  margin-top: 0 !important;
  margin-bottom: var(--m-section-gap) !important;
}

/* ── 4. Section title — uniform style across all sections ─────── */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px !important;
  padding-left: 0 !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.section-title::before {
  content: "";
  display: block;
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  flex-shrink: 0;
  position: static !important;
  transform: none !important;
  left: auto !important; top: auto !important;
}
.section-title span { color: inherit; }

/* ── 5. Typography baseline ─────────────────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 14px; line-height: 1.5; }
  h1, .h1 { font-size: 22px; line-height: 1.2; font-weight: 800; }
  h2, .h2 { font-size: 18px; line-height: 1.3; font-weight: 700; }
  h3, .h3 { font-size: 15px; line-height: 1.35; font-weight: 700; }
}

/* ── 6. Touch targets — iOS-grade ──────────────────────────────── */
button,
.btn-gold, .btn-ghost, .btn-primary, .btn-danger,
.bnav-item,
input[type="submit"], input[type="button"],
a.cta, a[role="button"] {
  min-height: var(--m-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  font-size: 16px !important;     /* prevent iOS auto-zoom */
  min-height: var(--m-touch);
  border-radius: var(--m-radius-sm);
  box-sizing: border-box;
}

/* ── 7. Body bottom padding for sticky bnav (~64px) ───────────── */
body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  body { padding-bottom: 0 !important; }
}

/* ── 8. Horizontal-scroll regions: hide scrollbars uniformly ──── */
.h-scroll, .promo-grid, .hot-promo-track, .games-grid-scroll, .feat-row,
.cat-row, .hot-promo-track, .vip-tiers {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.h-scroll::-webkit-scrollbar,
.promo-grid::-webkit-scrollbar,
.hot-promo-track::-webkit-scrollbar,
.games-grid-scroll::-webkit-scrollbar,
.feat-row::-webkit-scrollbar,
.cat-row::-webkit-scrollbar,
.vip-tiers::-webkit-scrollbar { display: none; }

/* ── 9. Universal card — soft surface ───────────────────────────── */
.card, .panel-card, .promo-card-static {
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--m-radius-md);
  box-shadow: var(--m-shadow-1);
}

/* ── 10. Image rendering quality ────────────────────────────────── */
img { -webkit-tap-highlight-color: transparent; }
img.lazy-load:not([src]) { opacity: 0; }

/* ── 11. Smooth scroll + scroll-behavior ───────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── 12. Selection color — brand gold ──────────────────────────── */
::selection { background: rgba(251,191,36,0.4); color: #fff; }

/* ── 13. Modal full-bleed on mobile ────────────────────────────── */
@media (max-width: 600px) {
  .modal .modal-body, .modal-content {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    margin-bottom: 0 !important;
    margin-top: auto !important;
  }
  .modal { align-items: flex-end !important; }
}

/* ── 14. Bottom nav (bnav) polish ──────────────────────────────── */
.bnav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.5);
}
.bnav-item {
  min-height: 56px;
  font-size: 10px;
  font-weight: 700;
  gap: 2px;
}

/* ── 15. Top nav padding-safe-area ─────────────────────────────── */
.top-nav, .top-bar, .bs-d-marquee {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── 16. Hero carousel: tighter on mobile ──────────────────────── */
@media (max-width: 600px) {
  .hero-wrap { margin-top: 12px !important; }
  .hero { aspect-ratio: 16/9 !important; border-radius: var(--m-radius-lg) !important; }
  .hero-amount.display { font-size: 28px !important; }
  .hero-eyebrow { font-size: 9.5px !important; letter-spacing: 1.5px; }
  .hero-subtxt { font-size: 11px !important; }
  .hero-cta .btn-gold { font-size: 11.5px; padding: 9px 18px; }
}

/* ── 17. Game tiles — uniform mobile grid ──────────────────────── */
@media (max-width: 600px) {
  .games-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--m-card-gap) !important;
  }
  .game-tile {
    aspect-ratio: 3/4 !important;
    border-radius: var(--m-radius-md) !important;
  }
  .cat-row {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 2px 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  .cat-btn {
    flex: 0 0 auto;
    padding: 8px 16px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    border-radius: 99px !important;
    white-space: nowrap;
  }
}

/* ── 18. Feature tiles ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .feat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--m-card-gap) !important;
  }
  .feat-tile {
    aspect-ratio: 1/1 !important;
    padding: 8px !important;
    border-radius: var(--m-radius-md) !important;
    min-height: 0 !important;
  }
  .feat-ico-wrap {
    width: 32px !important; height: 32px !important;
    border-radius: 8px !important;
  }
  .feat-lbl { font-size: 10px !important; margin-top: 4px !important; }
}

/* ── 19. VIP tiers strip ───────────────────────────────────────── */
@media (max-width: 600px) {
  .vip-tiers {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
  }
  .vip-tier {
    flex: 0 0 64px !important;
    min-height: 78px !important;
    border-radius: var(--m-radius-md) !important;
  }
  .vip-tier-ico { font-size: 16px !important; }
  .vip-tier-lbl { font-size: 9.5px !important; }
}

/* ── 20. Live transaction ticker ───────────────────────────────── */
@media (max-width: 600px) {
  .livetx-row, .live-tx-row {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  .live-tx, .livetx-strip {
    border-radius: var(--m-radius-md) !important;
  }
}

/* ── 21. FAQ accordion ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .faq-q {
    padding: 12px 14px !important;
    font-size: 13px !important;
    min-height: var(--m-touch);
  }
  .faq-a { font-size: 12px !important; padding: 8px 14px 14px !important; }
}

/* ── 22. Footer ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  footer, .footer {
    padding: 24px var(--m-gut) 32px !important;
    text-align: center;
    font-size: 11.5px;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
    text-align: left;
  }
}

/* ── 23. Trust badges row ──────────────────────────────────────── */
@media (max-width: 600px) {
  .trust-strip, .trust-row {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    padding: 8px 0;
  }
}

/* ── 24. Marquee on mobile (smaller) ───────────────────────────── */
@media (max-width: 600px) {
  .bs-d-marquee { font-size: 11px !important; }
  .bs-d-marquee-item { padding: 6px 8px !important; gap: 6px !important; }
  .bs-d-marquee-item .ico { font-size: 13px !important; }
  .bs-d-marquee-item .pill { font-size: 9px !important; padding: 2px 7px !important; }
}

/* ── 25. Universal anti-overflow ───────────────────────────────── */
* { -webkit-overflow-scrolling: touch; }
img, video, iframe { max-width: 100%; height: auto; }
.section > *, .bs-container > * { max-width: 100%; }

/* ── 26. Tap-feedback for cards ────────────────────────────────── */
.game-tile:active, .feat-tile:active, .vip-tier:active,
.hot-promo-card:active, .promo-card-static:active {
  transform: scale(0.97) !important;
  transition: transform .1s ease;
}

/* ── 27. Loading skeleton ──────────────────────────────────────── */
.is-loading::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: m-skeleton 1.5s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes m-skeleton { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }
/* ============================================================
   MOBILE-PHASE-2A · TOP NAV (2026-05-09)
   Goal: clean 56px sticky header · clear hierarchy · premium fintech
   Layout: [☰] [Logo Brand]    [Balance] [🔔] [👤] [Lang]
   ============================================================ */

/* ── Marquee ribbon — slim brand banner ────────────────────────── */
.marquee {
  height: 24px !important;
  background: linear-gradient(90deg, rgba(251,191,36,0.08), rgba(0,0,0,0) 50%, rgba(251,191,36,0.08)) !important;
  border-bottom: 1px solid rgba(251,191,36,0.15) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
  padding: 0 !important;
}
.marquee-track {
  font-size: 10.5px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  animation-duration: 35s !important;
}
.marquee-text {
  color: rgba(251,191,36,0.85) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* ── Top nav container ─────────────────────────────────────────── */
.top-nav {
  height: 56px;
  padding: 0 12px !important;
  gap: 10px !important;
  background: linear-gradient(180deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.93) 100%) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(251,191,36,0.12) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
@media (max-width: 374px) {
  .top-nav { padding: 0 10px !important; gap: 6px !important; }
}

/* ── Hamburger — compact 36x36 gold-tinted ─────────────────────── */
.hamburger {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  background: rgba(251,191,36,0.08) !important;
  border: 1px solid rgba(251,191,36,0.2) !important;
  color: #fbbf24 !important;
  flex-shrink: 0;
  transition: all .15s ease;
}
.hamburger:active { transform: scale(0.94); background: rgba(251,191,36,0.18) !important; }
.hamburger svg { width: 18px !important; height: 18px !important; }

/* ── Brand wrap ────────────────────────────────────────────────── */
.brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto;
  min-width: 0;
}
.brand-logo {
  width: 30px !important; height: 30px !important;
  flex: 0 0 30px !important;
  filter: drop-shadow(0 2px 8px rgba(251,191,36,0.4)) !important;
}
.brand-text {
  font-size: 17px !important;
  letter-spacing: 1.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800 !important;
}
@media (max-width: 374px) {
  .brand-text { font-size: 14px !important; letter-spacing: 1px !important; }
  .brand-logo { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
}

/* ── Right cluster: spread + tight ─────────────────────────────── */
.top-nav > div:last-of-type:not(.hidden),
.top-nav .flex.items-center.gap-2:not(.hidden) {
  margin-left: auto;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0;
}
/* 2026-05-09 fix: ensure .hidden wins over .flex specificity in top-nav */
.top-nav .hidden { display: none !important; }

/* ── Logged-out: Login / Daftar pills ──────────────────────────── */
#topnav-auth-out { gap: 6px !important; }
.topnav-btn-login,
.topnav-btn-register {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.topnav-btn-login {
  background: rgba(251,191,36,0.06) !important;
  border-color: rgba(251,191,36,0.3) !important;
  color: #fbbf24 !important;
}
.topnav-btn-login:active { background: rgba(251,191,36,0.18) !important; transform: scale(0.97); }
.topnav-btn-register {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #000 !important;
  box-shadow: 0 3px 10px rgba(251,191,36,0.35);
}
.topnav-btn-register:active { transform: scale(0.97); box-shadow: 0 2px 6px rgba(251,191,36,0.5); }
@media (max-width: 374px) {
  .topnav-btn-login, .topnav-btn-register { padding: 0 10px !important; font-size: 11px !important; }
}

/* ── Logged-in: Balance pill (most prominent) ──────────────────── */
.topnav-balance {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.08)) !important;
  border: 1px solid rgba(251,191,36,0.4) !important;
  color: #fbbf24 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
  font-variant-numeric: tabular-nums;
}
.topnav-balance:active { transform: scale(0.97); background: rgba(251,191,36,0.25) !important; }
.topnav-balance svg { width: 14px !important; height: 14px !important; opacity: 0.85; }
.topnav-balance #topnav-balance-amt { font-size: 13px !important; font-weight: 900 !important; color: #fff; }
@media (max-width: 374px) {
  .topnav-balance { padding: 0 9px !important; font-size: 11px !important; }
  .topnav-balance #topnav-balance-amt { font-size: 12px !important; }
}

/* ── Bell + Avatar: matching 36x36 round icon buttons ─────────── */
.topnav-bell,
.topnav-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #e5e7eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease;
  flex-shrink: 0;
  position: relative;
}
.topnav-bell:active,
.topnav-avatar:active { transform: scale(0.92); background: rgba(251,191,36,0.15) !important; border-color: rgba(251,191,36,0.4) !important; color: #fbbf24 !important; }
.topnav-bell svg,
.topnav-avatar svg { width: 16px !important; height: 16px !important; }
.topnav-bell-badge {
  position: absolute !important;
  top: -2px !important; right: -2px !important;
  min-width: 16px !important; height: 16px !important;
  padding: 0 4px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  font-size: 9.5px !important; font-weight: 800 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 2px solid rgba(10,14,26,1) !important;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(239,68,68,0.5);
}

/* ── Avatar dropdown ───────────────────────────────────────────── */
.topnav-dropdown {
  background: rgba(15,19,30,0.98) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.05) !important;
  min-width: 180px !important;
  overflow: hidden;
  margin-top: 8px !important;
  padding: 4px !important;
}
.topnav-dropdown-item {
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  transition: background .12s ease;
}
.topnav-dropdown-item:hover { background: rgba(251,191,36,0.08) !important; }
.topnav-dd-logout { border-top: 1px solid rgba(255,255,255,0.06) !important; margin-top: 4px; padding-top: 11px !important; }

/* ── Lang pill — compact icon-button group ─────────────────────── */
.lang-pill {
  height: 30px !important;
  padding: 2px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0;
}
.lang-btn {
  height: 26px !important;
  min-width: 28px !important;
  padding: 0 9px !important;
  border-radius: 99px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
  border: none !important;
  transition: all .12s ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lang-btn:active { transform: scale(0.92); }
.lang-btn.active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  box-shadow: 0 2px 6px rgba(251,191,36,0.4);
}
@media (max-width: 374px) {
  .lang-pill { display: none !important; } /* on tiny screens, lang lives in drawer */
}

/* ── Hide redundant desktop nav links on mobile (was already 'none') ── */
@media (max-width: 768px) {
  .top-nav-extra { display: none !important; }
  .partnership-btn { display: none !important; }
}

/* ── Override main.css legacy mobile sizing that was making icons tiny ── */
@media (max-width: 600px) {
  .topnav-btn-login, .topnav-btn-register {
    font-size: 12px !important;
    padding: 0 14px !important;
    height: 36px !important;
  }
  .topnav-balance {
    font-size: 12.5px !important;
    padding: 0 12px !important;
    height: 36px !important;
  }
  .topnav-bell, .topnav-avatar {
    width: 36px !important; height: 36px !important;
  }
  .topnav-bell svg, .topnav-avatar svg {
    width: 16px !important; height: 16px !important;
  }
}
@media (max-width: 480px) {
  .topnav-bell, .topnav-avatar { width: 36px !important; height: 36px !important; }
}

/* ── Ensure top-nav stays on top with drawer/modals ────────────── */
.top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

/* ── Logged-in cluster spacing tweak for crowded narrow screens ── */
@media (max-width: 414px) {
  #topnav-auth-in {
    gap: 5px !important;
  }
  /* Hide bell label badge on ultra-narrow if 0 (already styled display:none in HTML) */
}
/* ============================================================
   MOBILE-PHASE-2B · GAMES + CATEGORY (2026-05-09)
   Goal: premium tiles · clear category switcher · smooth tap
   ============================================================ */

/* ── Section title spacing ─────────────────────────────────────── */
#sec-popular-games .section-title {
  margin-bottom: 14px !important;
}

/* ── Category tabs row ─────────────────────────────────────────── */
.cat-row {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 2px 14px !important;
  margin: 0 -2px 12px !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8px, #000 calc(100% - 8px), transparent 100%);
}
.cat-row::-webkit-scrollbar { display: none; }

.cat-btn {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  scroll-snap-align: start;
  transition: all .15s ease;
}
.cat-btn:active {
  transform: scale(0.94);
  background: rgba(251,191,36,0.12) !important;
}
.cat-btn.active {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  border-color: #fbbf24 !important;
  color: #000 !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(251,191,36,0.35);
}
/* theme-d injects emoji via data-d-ico */
.cat-btn[data-d-ico]::before {
  content: attr(data-d-ico) !important;
  font-size: 14px !important;
  margin-right: 0 !important;
  filter: saturate(1.2);
}

/* ── Games grid — uniform responsive ───────────────────────────── */
.games-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
}
@media (min-width: 480px) {
  .games-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
}
@media (min-width: 768px) {
  .games-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; }
}
@media (min-width: 1100px) {
  .games-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 14px !important; }
}

/* ── Game tile — premium card ──────────────────────────────────── */
.game-tile {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(135deg, #1e1b4b, #0f172a);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease, border-color .2s ease;
  isolation: isolate;
}
.game-tile:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(251,191,36,0.4) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(251,191,36,0.25),
    inset 0 1px 0 rgba(251,191,36,0.15) !important;
}
.game-tile:active {
  transform: scale(0.96) !important;
  transition: transform .1s ease;
}

/* ── Background gradients (saturated) ─────────────────────────── */
.game-tile.pgsoft     { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #7c2d12 100%) !important; }
.game-tile.k918       { background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #7f1d1d 100%) !important; }
.game-tile.pragmatic  { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e3a8a 100%) !important; }
.game-tile.jili       { background: linear-gradient(135deg, #365314 0%, #84cc16 50%, #365314 100%) !important; }
.game-tile.jili100    { background: linear-gradient(135deg, #064e3b 0%, #06b6d4 50%, #064e3b 100%) !important; }
.game-tile.mega       { background: linear-gradient(135deg, #581c87 0%, #a855f7 50%, #581c87 100%) !important; }
.game-tile.pussy      { background: linear-gradient(135deg, #831843 0%, #ec4899 50%, #831843 100%) !important; }
.game-tile.spade      { background: linear-gradient(135deg, #0c4a6e 0%, #06b6d4 50%, #0c4a6e 100%) !important; }
.game-tile.epicwin    { background: linear-gradient(135deg, #422006 0%, #d97706 50%, #422006 100%) !important; }
.game-tile.mega888    { background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #4c1d95 100%) !important; }

/* Subtle radial highlight overlay */
.game-tile::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18) 0%, transparent 55%) !important;
  pointer-events: none;
  z-index: 1;
}

/* ── Logo container — bigger logo ──────────────────────────────── */
.game-bg, .game-bg-logo {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14% 12% !important;
  z-index: 2;
  background: transparent !important;
}
.game-bg-logo img, .game-bg img {
  max-width: 88% !important;
  max-height: 70% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)) !important;
  transition: transform .3s ease;
}
.game-tile:hover .game-bg-logo img,
.game-tile:hover .game-bg img {
  transform: scale(1.06);
}

/* ── Game badge (HOT / NEW / TOP) ─────────────────────────────── */
.game-badge {
  position: absolute !important;
  top: 6px !important; right: 6px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  z-index: 4 !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  line-height: 1;
}
.game-badge.hot { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #fff !important; }
.game-badge.new { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; }
.game-badge.top { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #000 !important; }

/* ── Wallet mode badge — bottom-left small ────────────────────── */
.wallet-mode-badge {
  position: absolute !important;
  bottom: 6px !important; left: 6px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  z-index: 4 !important;
  backdrop-filter: blur(8px);
  line-height: 1.2;
}
.wallet-mode-badge.seamless {
  background: rgba(16,185,129,0.85) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(16,185,129,0.4);
}
.wallet-mode-badge.transfer {
  background: rgba(59,130,246,0.85) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(59,130,246,0.4);
}

/* ── Play overlay (only visible on tap/hover) ─────────────────── */
.game-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.92) 100%) !important;
  padding-bottom: 10px !important;
  z-index: 3;
  opacity: 1;
  transition: opacity .2s;
}
.game-play-lbl {
  font-size: 10px !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.game-play-lbl::after {
  content: "▶" !important;
  font-size: 8px !important;
  color: #fbbf24 !important;
}

/* ── Coming-soon overlay — clean badge ────────────────────────── */
.game-tile.coming-soon::after {
  content: "SOON" !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0,0,0,0.78) !important;
  color: #fbbf24 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(251,191,36,0.4) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  z-index: 5 !important;
  backdrop-filter: blur(10px);
}

/* ── Mobile spacing tweaks ─────────────────────────────────────── */
@media (max-width: 600px) {
  .game-tile { border-radius: 12px !important; }
  .game-bg-logo img, .game-bg img { max-width: 84% !important; max-height: 64% !important; }
  .game-badge { font-size: 8.5px !important; padding: 2px 6px !important; }
  .wallet-mode-badge { font-size: 7.5px !important; padding: 2px 5px !important; }
  .game-play-lbl { font-size: 9px !important; }
}

/* ── Override mobile-phase1 aspect-ratio (3/4 → 1/1) ──────────── */
@media (max-width: 600px) {
  .games-grid .game-tile {
    aspect-ratio: 1 / 1 !important;
  }
}
/* ============================================================
   MOBILE-PHASE-2C · BOTTOM NAV (2026-05-09)
   Goal: premium iOS-grade tab bar · clear active state · pulse CTA
   Layout: Home · Promo · [Live·Sembang FAB] · Wallet · Me
   ============================================================ */

.bottom-nav {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 50 !important;
  height: 64px !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  background: rgba(8,11,20,0.94) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.55), 0 -1px 0 rgba(251,191,36,0.06) inset;
}

.bnav-inner {
  max-width: 540px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  height: 64px !important;
  align-items: center !important;
}

/* ── Each item ─────────────────────────────────────────────────── */
.bnav-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 100% !important;
  cursor: pointer;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: rgba(255,255,255,0.45) !important;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0 4px !important;
}
.bnav-item:active { transform: scale(0.92); transition: transform .08s ease; }
.bnav-item span {
  color: inherit !important;
  font-size: inherit !important;
}

/* ── Icon styling ──────────────────────────────────────────────── */
.bnav-ico {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor;
  transition: transform .15s ease, stroke .15s ease;
}

/* ── Active state ──────────────────────────────────────────────── */
.bnav-item.active {
  color: #fbbf24 !important;
}
.bnav-item.active .bnav-ico {
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 2px 6px rgba(251,191,36,0.5));
}
.bnav-item.active::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 0 0 3px 3px !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b) !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.6);
}

/* ── Badge dot ─────────────────────────────────────────────────── */
.bnav-badge {
  position: absolute !important;
  top: 8px !important;
  right: calc(50% - 22px) !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(8,11,20,1) !important;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(239,68,68,0.55);
  z-index: 1;
}

/* ── Center FAB (Sembang / Live) ───────────────────────────────── */
.bnav-item[data-nav="live"] {
  position: relative;
}
.bnav-item .bnav-center,
.bnav-item.bnav-center .bnav-center {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%) !important;
  border: 4px solid rgba(8,11,20,1) !important;
  margin-top: 0 !important;
  transform: translateY(-22px) !important;
  box-shadow:
    0 8px 22px rgba(251,191,36,0.55),
    0 2px 6px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #000 !important;
  animation: bnav-fab-pulse 2.4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.bnav-item .bnav-center svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #000 !important;
  stroke-width: 2.4 !important;
}
.bnav-item:active .bnav-center {
  transform: translateY(-22px) scale(0.94) !important;
}

/* Pulse ring around FAB */
.bnav-item .bnav-center::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.4) 0%, transparent 70%);
  z-index: -1;
  animation: bnav-fab-ring 2.4s ease-in-out infinite;
}

@keyframes bnav-fab-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(251,191,36,0.55), 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 10px 28px rgba(251,191,36,0.75), 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
}
@keyframes bnav-fab-ring {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.18); opacity: 0; }
}

/* Center item label sits below FAB */
.bnav-item[data-nav="live"] > span {
  position: absolute !important;
  bottom: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  white-space: nowrap;
}
.bnav-item[data-nav="live"].active > span { color: #fbbf24 !important; }
.bnav-item[data-nav="live"]::before { display: none !important; }  /* hide top stripe under FAB */

/* ── Hide on desktop ───────────────────────────────────────────── */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
}

/* ── Float buttons (livechat / 918KISS / WA) clear bnav ────────── */
.float-stack {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Disable old conflicting CSS ───────────────────────────────── */
.bnav-item:not(.active) .bnav-ico,
.bnav-item:not(.active) span:not(.bnav-badge) {
  color: inherit !important;
}
.bnav-item:hover .bnav-ico, .bnav-item:hover span:not(.bnav-badge) { color: inherit; }
/* ============================================================
   MOBILE-PHASE-2D · MODALS (2026-05-09)
   Goal: bottom-sheet on mobile · drag handle · clean form layouts
   ============================================================ */

/* ── Backdrop ──────────────────────────────────────────────────── */
.modal-backdrop {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0 !important;
  align-items: flex-end !important;
}
.modal-backdrop.show {
  animation: modal-fade-in .22s ease-out;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal card — bottom sheet on mobile, centered on desktop ──── */
.modal-backdrop .modal {
  width: 100% !important;
  max-width: 480px !important;
  max-height: 92vh !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(20,24,38,0.98) 0%, rgba(13,16,28,1) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: none !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  animation: modal-slide-up .28s cubic-bezier(0.32, 0.72, 0.18, 1.0);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(251,191,36,0.06);
  position: relative !important;
}
@keyframes modal-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (min-width: 768px) {
  .modal-backdrop { align-items: center !important; padding: 24px !important; }
  .modal-backdrop .modal {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    margin: auto !important;
    max-height: 86vh !important;
    animation: modal-pop-in .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes modal-pop-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
}

/* ── Drag handle (mobile only) ─────────────────────────────────── */
@media (max-width: 767px) {
  .modal-backdrop .modal::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.18);
    z-index: 10;
    pointer-events: none;
  }
  .modal-backdrop .modal {
    padding-top: 18px !important;
  }
}

/* ── Modal inner padding ───────────────────────────────────────── */
.modal-backdrop .modal > * {
  padding-left: 18px;
  padding-right: 18px;
}
.modal-backdrop .modal > h3,
.modal-backdrop .modal > div:first-child {
  padding-top: 4px;
}

/* ── Modal headers ─────────────────────────────────────────────── */
.modal-backdrop .modal h3,
.modal-backdrop .modal .modal-title,
.modal-backdrop .modal .text-xl {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  margin: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 0 !important;
}

/* Close button — clean circle */
.modal-backdrop .modal [data-close],
.modal-backdrop .modal button[aria-label="close"] {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !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.7) !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0;
  transition: all .15s ease;
}
.modal-backdrop .modal [data-close]:active,
.modal-backdrop .modal button[aria-label="close"]:active {
  transform: scale(0.92);
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
}

/* Back-to-wallet button */
.modal-backdrop .mw-back-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: rgba(251,191,36,0.1) !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  color: #fbbf24 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 6px !important;
  transition: all .15s ease;
}
.modal-backdrop .mw-back-btn:active {
  transform: scale(0.95);
  background: rgba(251,191,36,0.2) !important;
}

/* ── Inputs in modals ──────────────────────────────────────────── */
.modal-backdrop input[type="text"],
.modal-backdrop input[type="tel"],
.modal-backdrop input[type="email"],
.modal-backdrop input[type="password"],
.modal-backdrop input[type="number"],
.modal-backdrop select,
.modal-backdrop textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  transition: border-color .15s ease;
  box-sizing: border-box;
}
.modal-backdrop textarea { height: auto; min-height: 80px; padding: 10px 12px !important; }
.modal-backdrop input:focus,
.modal-backdrop select:focus,
.modal-backdrop textarea:focus {
  outline: none;
  border-color: rgba(251,191,36,0.5) !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.12);
}

/* ── Primary action buttons in modals ──────────────────────────── */
.modal-backdrop .btn-gold,
.modal-backdrop .btn-primary,
.modal-backdrop button[type="submit"]:not([data-close]) {
  height: 48px;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(251,191,36,0.35);
  transition: all .15s ease;
}
.modal-backdrop .btn-gold:active,
.modal-backdrop .btn-primary:active,
.modal-backdrop button[type="submit"]:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(251,191,36,0.5);
}

/* ── Deposit cards — premium ───────────────────────────────────── */
.deposit-card {
  position: relative;
  padding: 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(16,185,129,0.2) !important;
  cursor: pointer;
  transition: all .18s ease;
}
.deposit-card:active {
  transform: scale(0.985);
}
.deposit-card.dc-active {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(251,191,36,0.02)) !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,0.4), 0 4px 14px rgba(251,191,36,0.2) !important;
}
.deposit-card.dc-active::after {
  content: "✓";
  position: absolute;
  top: 12px; right: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fbbf24;
  color: #000;
  font-size: 13px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

.deposit-card-badges { gap: 5px !important; margin-bottom: 10px !important; }
.dc-badge {
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.deposit-card-logos { gap: 4px !important; margin-bottom: 10px !important; }
.dc-logo {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.deposit-card-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}
.dc-min {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  background: rgba(251,191,36,0.1) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.4px;
}
.deposit-card-sub {
  font-size: 11px !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* ── Drawer (side menu) polish ─────────────────────────────────── */
.drawer {
  background: linear-gradient(180deg, rgba(15,19,33,0.98), rgba(8,11,20,1)) !important;
  border-left: 1px solid rgba(251,191,36,0.15) !important;
  box-shadow: -4px 0 30px rgba(0,0,0,0.6);
  width: 300px !important;
  padding: 18px 14px !important;
}
.drawer-overlay {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Toast — top notification ──────────────────────────────────── */
.toast {
  top: 70px !important;
  background: linear-gradient(180deg, rgba(20,24,38,0.98), rgba(13,16,28,0.98)) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(251,191,36,0.4) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
.toast.error { border-color: rgba(239,68,68,0.5) !important; }


/* ============================================================
   MOBILE-PHASE-2E · VIP TIERS + FEATURE GRID (2026-05-09)
   ============================================================ */

/* ── VIP strip container ───────────────────────────────────────── */
.vip-strip {
  background: linear-gradient(135deg, rgba(251,191,36,0.04), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(251,191,36,0.15) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  position: relative;
  overflow: hidden;
}
.vip-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(251,191,36,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.vip-strip > * { position: relative; z-index: 1; }

/* ── 5-tier row ────────────────────────────────────────────────── */
.vip-tiers {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.vip-tier {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 4px !important;
  border-radius: 10px !important;
  min-height: 64px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: transform .15s ease;
}
.vip-tier:active { transform: scale(0.95); }
.vip-tier.bronze  { background: linear-gradient(180deg, rgba(146,64,14,0.18), rgba(146,64,14,0.04)) !important; border-color: rgba(217,119,6,0.4) !important; }
.vip-tier.silver  { background: linear-gradient(180deg, rgba(148,163,184,0.18), rgba(148,163,184,0.04)) !important; border-color: rgba(148,163,184,0.4) !important; }
.vip-tier.gold    { background: linear-gradient(180deg, rgba(251,191,36,0.2), rgba(251,191,36,0.04)) !important; border-color: rgba(251,191,36,0.55) !important; box-shadow: 0 4px 12px rgba(251,191,36,0.15); }
.vip-tier.platinum{ background: linear-gradient(180deg, rgba(228,228,231,0.18), rgba(228,228,231,0.04)) !important; border-color: rgba(228,228,231,0.4) !important; }
.vip-tier.diamond { background: linear-gradient(180deg, rgba(6,182,212,0.2), rgba(6,182,212,0.04)) !important; border-color: rgba(34,211,238,0.5) !important; box-shadow: 0 4px 12px rgba(34,211,238,0.15); }

.vip-tier-ico {
  font-family: "Oswald", "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}
.vip-tier-lbl {
  font-size: 9px !important;
  font-weight: 800 !important;
  margin-top: 4px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
}
.vip-tier.bronze .vip-tier-ico   { color: #f59e0b !important; }
.vip-tier.silver .vip-tier-ico   { color: #e2e8f0 !important; }
.vip-tier.gold .vip-tier-ico     { color: #fbbf24 !important; }
.vip-tier.platinum .vip-tier-ico { color: #f1f5f9 !important; }
.vip-tier.diamond .vip-tier-ico  { color: #22d3ee !important; }

/* Active tier highlight (for "current tier") */
.vip-tier.is-current {
  outline: 2px solid #fbbf24 !important;
  outline-offset: -1px;
  animation: vip-current-pulse 2s ease-in-out infinite;
}
@keyframes vip-current-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}

/* ── VIP progress bar ──────────────────────────────────────────── */
.vip-bar-wrap {
  height: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  margin: 8px 0 8px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
.vip-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%) !important;
  border-radius: 99px !important;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
  transition: width .4s ease;
  position: relative;
}
.vip-bar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5));
  filter: blur(1px);
}

/* ── VIP info row ──────────────────────────────────────────────── */
.vip-info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.vip-info span:last-child {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

/* ── Feature grid — utility tiles ──────────────────────────────── */
.feat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 480px) {
  .feat-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; }
}
@media (min-width: 768px) {
  .feat-grid { grid-template-columns: repeat(6, 1fr) !important; }
}

.feat-tile {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 6px !important;
  aspect-ratio: 1 / 1 !important;
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: all .18s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.feat-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,0.4) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(251,191,36,0.15);
}
.feat-tile:active { transform: scale(0.95); transition: transform .08s ease; }

.feat-ico-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06)) !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fbbf24 !important;
  flex-shrink: 0;
  transition: all .18s ease;
}
.feat-ico-wrap svg { width: 18px !important; height: 18px !important; }
.feat-tile:hover .feat-ico-wrap {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  transform: scale(1.05);
}

.feat-lbl {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.85) !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 374px) {
  .feat-tile { padding: 10px 4px !important; }
  .feat-ico-wrap { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .feat-ico-wrap svg { width: 16px !important; height: 16px !important; }
  .feat-lbl { font-size: 9.5px !important; }
}

/* Feature tile badge (e.g., NEW) */
.feat-tile .feat-badge {
  position: absolute !important;
  top: 4px !important; right: 4px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  z-index: 2;
}
/* ============================================================
   MOBILE-PHASE-2F · LIVE TRANSACTION (2026-05-09)
   Goal: clean ticker · clear in/out colors · readable on mobile
   ============================================================ */

.livetx-card {
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.livetx-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: linear-gradient(90deg, rgba(251,191,36,0.06), rgba(255,255,255,0.0)) !important;
}
.livetx-title {
  color: #fbbf24 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}
.livetx-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  background: rgba(239,68,68,0.12) !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}
.livetx-live .dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444;
  animation: livetx-blink 1.4s ease-in-out infinite;
}
@keyframes livetx-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #ef4444; }
  50%      { opacity: 0.4; box-shadow: 0 0 4px #ef4444; }
}

.livetx-subhead {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  background: rgba(0,0,0,0.35) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.livetx-subhead > div {
  padding: 8px 14px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  text-align: center;
}
.livetx-subhead > div:first-child {
  color: #34d399 !important;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.livetx-subhead > div:last-child {
  color: #f87171 !important;
}

#livetx-rows {
  max-height: 240px;
  overflow: hidden;
  position: relative;
}

.livetx-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .2s ease;
}
.livetx-row:hover { background: rgba(255,255,255,0.02); }
.livetx-row:last-child { border-bottom: none; }
.livetx-row > div { padding: 0 !important; }
.livetx-row .phone {
  color: rgba(255,255,255,0.55) !important;
  font-family: ui-monospace, "SF Mono", monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.3px;
}
.livetx-row .amt-in {
  color: #fcd34d !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}
.livetx-row .amt-out {
  color: #fca5a5 !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}
.livetx-row .game {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.8) !important;
  text-transform: uppercase;
}

/* New row flash (theme-d injects .bs-d-new class) */
.livetx-row.bs-d-new {
  background: linear-gradient(90deg, rgba(251,191,36,0.18), transparent) !important;
  animation: livetx-flash 1.6s ease-out;
}
@keyframes livetx-flash {
  0%   { background: linear-gradient(90deg, rgba(251,191,36,0.35), transparent); }
  100% { background: linear-gradient(90deg, rgba(251,191,36,0), transparent); }
}


/* ============================================================
   MOBILE-PHASE-2G · FAQ + TRUST + FOOTER + PAY METHODS + TESTIMONIALS
   ============================================================ */

/* ── Payment methods ───────────────────────────────────────────── */
.pay-cat-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 14px 0 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: rgba(255,255,255,0.85) !important;
}
.pay-cat-head:first-of-type { margin-top: 0 !important; }
.pay-cat-ico { font-size: 14px !important; line-height: 1; }
.pay-cat-lbl { color: rgba(255,255,255,0.85) !important; }

.pay-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
@media (min-width: 480px) { .pay-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; } }
@media (min-width: 768px) { .pay-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; } }

.pay-cell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 6px !important;
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  cursor: default;
  transition: all .18s ease;
  overflow: hidden;
}
.pay-cell::before, .pay-cell::after {
  display: none !important;
  content: none !important;
}
.pay-cell:hover {
  transform: translateY(-1px);
  border-color: rgba(251,191,36,0.3) !important;
  background: linear-gradient(180deg, rgba(28,32,46,0.96), rgba(15,19,32,0.98)) !important;
}

.pay-mono, .pay-mono-logo {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.92) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  margin-bottom: 4px !important;
}
.pay-mono img, .pay-mono-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.pay-name {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pay-tag {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: rgba(251,191,36,0.7) !important;
  letter-spacing: 0.4px;
  text-align: center;
}

/* ── Testimonials ──────────────────────────────────────────────── */
#testimonials-rail {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
@media (min-width: 600px) {
  #testimonials-rail { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
  #testimonials-rail { grid-template-columns: repeat(3, 1fr) !important; }
}

.test-card, .testimonial-card {
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  position: relative;
}
.test-stars {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  color: #fbbf24 !important;
}
.test-text {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
  margin: 8px 0 !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
}
.test-author {
  font-size: 11px !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ── FAQ accordion ─────────────────────────────────────────────── */
.faq-item {
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  transition: border-color .15s ease;
}
.faq-item.open {
  border-color: rgba(251,191,36,0.3) !important;
}
.faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  cursor: pointer;
  letter-spacing: 0.2px;
  min-height: 48px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-q::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: #fbbf24;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform .25s ease;
  line-height: 1;
}
.faq-item.open .faq-q::after {
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 16px 14px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.65) !important;
  display: none;
  font-weight: 500;
}
.faq-item.open .faq-a {
  display: block;
  animation: faq-expand .25s ease-out;
}
@keyframes faq-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Trust badges row ──────────────────────────────────────────── */
.trust-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 6px !important;
  background: linear-gradient(180deg, rgba(251,191,36,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(251,191,36,0.2) !important;
  border-radius: 12px !important;
  min-height: 76px;
  transition: all .18s ease;
}
.trust-badge:hover {
  border-color: rgba(251,191,36,0.4) !important;
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(251,191,36,0.1), rgba(255,255,255,0.04)) !important;
}
.trust-ico {
  width: 22px !important;
  height: 22px !important;
  color: #fbbf24 !important;
  filter: drop-shadow(0 1px 4px rgba(251,191,36,0.4));
}
.trust-lbl {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
}

/* ── Footer ────────────────────────────────────────────────────── */
.footer-copy {
  text-align: center;
  padding: 32px 14px 20px !important;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 16px;
}
.footer-copy p {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
}
.footer-copy p:first-child {
  color: rgba(251,191,36,0.65) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.4px;
}

/* ── Trust strip section heading caption ───────────────────────── */
.section [data-i18n="trustBadges"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: rgba(251,191,36,0.7) !important;
  text-transform: uppercase;
}
/* ============================================================
   MOBILE-PHASE-3 (2026-05-09) — drawer · auth modal · misc modals
   ============================================================ */

/* ── Drawer container ──────────────────────────────────────────── */
.drawer-overlay {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 60 !important;
  transition: opacity .25s ease;
}
.drawer-overlay:not(.show) { opacity: 0; pointer-events: none; }
.drawer-overlay.show { opacity: 1; }

.drawer {
  width: min(320px, 86vw) !important;
  right: -100vw !important;
  background: linear-gradient(180deg, rgba(15,19,33,0.99) 0%, rgba(8,11,20,1) 100%) !important;
  border-left: 1px solid rgba(251,191,36,0.18) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,0.65), inset 1px 0 0 rgba(251,191,36,0.06) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 70 !important;
  transition: right .28s cubic-bezier(0.32, 0.72, 0.18, 1.0) !important;
}
.drawer.show { right: 0 !important; }

/* Drawer header (brand + close) */
.drawer > .flex.justify-between {
  padding: 18px 18px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: linear-gradient(180deg, rgba(251,191,36,0.05), transparent) !important;
  flex-shrink: 0;
}
.drawer .brand-text { font-size: 18px !important; letter-spacing: 1.5px !important; }
#btn-close-drawer {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !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.7) !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all .15s ease;
  line-height: 1 !important;
}
#btn-close-drawer:active {
  transform: scale(0.92);
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
}

/* Drawer body — scrollable */
.drawer > *:not(.flex):not(#drawer-logout) {
  margin-left: 14px !important;
  margin-right: 14px !important;
}
.drawer { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.drawer::-webkit-scrollbar { display: none; }

/* Drawer auth pills (logged-out) */
.drawer-auth-pills {
  display: flex !important;
  gap: 8px !important;
  margin: 14px !important;
}
.drawer-auth-pills > button {
  flex: 1 !important;
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease !important;
}
.drawer-btn-login {
  background: rgba(251,191,36,0.06) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251,191,36,0.4) !important;
}
.drawer-btn-login:active {
  transform: scale(0.97);
  background: rgba(251,191,36,0.18) !important;
}
.drawer-btn-register {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 3px 10px rgba(251,191,36,0.3);
}
.drawer-btn-register:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(251,191,36,0.5);
}

/* Drawer user block (logged-in) */
#drawer-user-block {
  background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin: 14px !important;
  position: relative;
  overflow: hidden;
}
#drawer-user-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(251,191,36,0.12) 0%, transparent 60%);
  pointer-events: none;
}
#drawer-user-block > * { position: relative; z-index: 1; }
#drawer-user-balance { font-size: 18px !important; }

/* Drawer sections */
.drawer-section {
  margin: 0 14px 14px !important;
  padding: 0 !important;
}
.drawer-title {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: rgba(251,191,36,0.7) !important;
  margin-bottom: 6px !important;
  padding: 0 4px !important;
}

/* Drawer items */
.drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  cursor: pointer;
  transition: all .12s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  background: transparent !important;
}
.drawer-item:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #fbbf24 !important;
}
.drawer-item:active {
  transform: scale(0.98);
  background: rgba(251,191,36,0.1) !important;
  color: #fbbf24 !important;
}
.drawer-item svg {
  width: 18px !important;
  height: 18px !important;
  color: #fbbf24 !important;
  opacity: 0.85;
  flex-shrink: 0 !important;
}
.drawer-item:hover svg { opacity: 1; }

/* Drawer logout button */
#drawer-logout {
  margin: auto 14px 18px !important;
  height: 44px !important;
  background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.04)) !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease;
}
#drawer-logout:active {
  transform: scale(0.97);
  background: rgba(239,68,68,0.2) !important;
}

/* ── Auth modal (Login / Register) ─────────────────────────────── */
#modal-auth .modal {
  padding-bottom: 18px !important;
}
#modal-auth .auth-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#modal-auth h3 {
  text-align: center !important;
  padding: 8px 18px 4px !important;
}

/* Tabs (Login / Register) */
.auth-tab-bar {
  display: flex !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin: 14px 18px 18px !important;
}
[data-auth-tab] {
  flex: 1 !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer;
  transition: all .15s ease;
}
[data-auth-tab].active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(251,191,36,0.3);
}

/* Form labels */
#modal-auth label,
#modal-auth .form-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* Form rows */
#modal-auth form > div,
#modal-auth .form-row {
  margin-bottom: 14px !important;
}

/* Bottom links (forgot password / switch) */
#modal-auth .auth-switch,
#modal-auth a {
  display: inline-block !important;
  padding: 4px 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgba(251,191,36,0.85) !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
}
#modal-auth .auth-switch:hover,
#modal-auth a:hover { color: #fbbf24 !important; }

/* ── News modal ────────────────────────────────────────────────── */
#modal-news .news-modal {
  padding: 0 !important;
  border-radius: 18px 18px 0 0 !important;
}
@media (min-width: 768px) {
  #modal-news .news-modal { border-radius: 18px !important; }
}
#news-modal-cta {
  padding: 10px 22px !important;
  font-size: 12.5px !important;
  height: 44px !important;
  letter-spacing: 1px !important;
}

/* ── Promo modal full list ────────────────────────────────────── */
#modal-promo .modal {
  padding: 0 !important;
}
#modal-promo h3 { padding: 12px 18px 8px !important; }
#promo-list {
  padding: 8px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.promo-card-v2 {
  border-radius: 14px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
}

/* ── Profile modal ─────────────────────────────────────────────── */
#modal-profile .modal {
  padding: 0 !important;
}
#modal-profile h3 { padding: 12px 18px 8px !important; }

/* ── Notify popup ──────────────────────────────────────────────── */
.notify-sheet {
  position: fixed !important;
  bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  left: 14px !important;
  right: 14px !important;
  z-index: 55 !important;
  background: linear-gradient(180deg, rgba(20,24,38,0.98), rgba(13,16,28,0.98)) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(251,191,36,0.3) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
  display: none;
}
.notify-sheet.show { display: block; animation: notify-slide-up .3s ease-out; }
@keyframes notify-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notify-inner {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}
.notify-icon {
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06)) !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fbbf24 !important;
  flex-shrink: 0;
}
.notify-text { min-width: 0; }
.notify-title-txt {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}
.notify-desc {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.4;
  font-weight: 500;
}
.notify-btns {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.notify-btns button {
  flex: 1 !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer;
  transition: all .15s ease;
  border: none !important;
}
.notify-btns .cancel {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.notify-btns .agree {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  box-shadow: 0 3px 10px rgba(251,191,36,0.3);
}
.notify-btns button:active { transform: scale(0.97); }
/* ============================================================
   MOBILE-PHASE-4 (2026-05-09)
   Wallet · Withdraw · Provider modals · Livechat · Hero polish
   ============================================================ */

/* ── Form primitives (.bs-input / .bs-field / .bs-hint) ────────── */
.bs-input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-family: inherit !important;
}
.bs-input:focus {
  outline: none !important;
  border-color: rgba(251,191,36,0.6) !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
}
.bs-input::placeholder {
  color: rgba(255,255,255,0.35) !important;
  font-weight: 500 !important;
}
.bs-field {
  margin-bottom: 12px !important;
  position: relative;
}
.bs-hint {
  font-size: 10.5px !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 5px !important;
  line-height: 1.4;
  font-weight: 500;
  display: block;
}
.bs-hint.warn {
  color: #fbbf24 !important;
  font-weight: 600 !important;
  background: rgba(251,191,36,0.06);
  border-left: 2px solid #fbbf24;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 0 !important;
}
.bs-input-group { gap: 6px !important; margin-bottom: 12px !important; }
.bs-input-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.6) !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
}

/* ── Wallet modal action buttons (4-col) ──────────────────────── */
.mw-action-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 64px !important;
  padding: 8px 4px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer;
  transition: all .15s ease;
}
.mw-action-btn > div {
  font-size: 22px !important;
  line-height: 1 !important;
  color: #fbbf24 !important;
  font-weight: 900;
}
.mw-action-btn:hover {
  background: rgba(251,191,36,0.08) !important;
  border-color: rgba(251,191,36,0.35) !important;
  color: #fbbf24 !important;
}
.mw-action-btn:active {
  transform: scale(0.94);
  background: rgba(251,191,36,0.18) !important;
}

/* ── Wallet modal main hero (balance) ──────────────────────────── */
#modal-wallet .modal {
  background: linear-gradient(180deg, #1a1407 0%, #0a0e1a 60%) !important;
  border: 1px solid rgba(251,191,36,0.4) !important;
}

/* ── Provider tabs (kissw-tab / jw-tab / pussy-tab etc.) ───────── */
.kissw-tab, .jw-tab, .pussy-tab, [class*="-tab"]:not(.cat-btn):not(.bs-adm-tab):not(.aieo-tab):not(.ann-tab-btn):not(.a3-tab):not(.tab-btn):not([data-tab]) {
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(255,255,255,0.5) !important;
  cursor: pointer;
  transition: all .15s ease;
  flex: 1;
}
.kissw-tab.active { border-bottom-color: #ef4444 !important; color: #fff !important; }
.jw-tab.active    { border-bottom-color: #10b981 !important; color: #fff !important; }
.pussy-tab.active { border-bottom-color: #ec4899 !important; color: #fff !important; }

/* ── Wallet modal back button (mw-back-btn) ────────────────────── */
.mw-back-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

/* ── In-game wallet balance card ───────────────────────────────── */
#mw-ig-list > div {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
}

/* ── Livechat float button ─────────────────────────────────────── */
.float-stack {
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  right: 14px !important;
  gap: 10px !important;
  z-index: 50 !important;
}
.float-btn.live {
  height: 56px !important;
  padding: 0 18px 0 16px !important;
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%) !important;
  color: #000 !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  gap: 9px !important;
  border-radius: 99px !important;
  box-shadow:
    0 8px 24px rgba(251,191,36,0.55),
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.float-btn.live:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 12px 30px rgba(251,191,36,0.7),
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.float-btn.live .online-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981;
  animation: float-online-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes float-online-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #10b981; }
  50%      { opacity: 0.5; box-shadow: 0 0 4px #10b981; }
}
.float-btn.live .live-pulse {
  position: absolute !important;
  inset: 0;
  border-radius: 99px;
  background: rgba(251,191,36,0.5);
  animation: float-ring-pulse 2.4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes float-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 0; }
}
@media (max-width: 374px) {
  .float-btn.live { height: 50px !important; padding: 0 14px !important; font-size: 12.5px !important; }
}

/* ── Livechat modal (modal-chat / chat-window) ─────────────────── */
.chat-welcome-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
}
.chat-welcome-sub {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.6) !important;
  font-weight: 500;
}

/* ── Hero carousel — mobile polish ─────────────────────────────── */
@media (max-width: 600px) {
  .hero-wrap {
    padding: 12px 14px 0 !important;
    margin-top: 0 !important;
  }
  .hero {
    aspect-ratio: 16/9 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
  }
  .hero-slide {
    border-radius: 14px !important;
    overflow: hidden;
  }
  .hero-eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 1.6px !important;
    font-weight: 800 !important;
    background: rgba(0,0,0,0.4);
    padding: 3px 10px;
    border-radius: 99px;
    backdrop-filter: blur(6px);
  }
  .hero-amount.display {
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  }
  .hero-subtxt {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
  }
  .hero-cta { margin-top: 10px !important; }
  .hero-cta .btn-gold {
    font-size: 11.5px !important;
    padding: 9px 18px !important;
    height: 36px !important;
    border-radius: 99px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
  }
  .hero-side-logo {
    height: 22px !important;
    top: 8px !important;
    right: 10px !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  }
  .hero-dots {
    bottom: 6px !important;
    gap: 4px !important;
  }
  .hero-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,0.35) !important;
    transition: all .25s ease;
  }
  .hero-dot.active {
    width: 22px !important;
    background: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(251,191,36,0.6);
  }
}

/* ── Trust strip (header above hero) ───────────────────────────── */
@media (max-width: 600px) {
  .trust-strip { padding: 8px 14px !important; gap: 6px !important; }
  .trust-strip > * {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.7) !important;
    font-weight: 600 !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── Live now widget (above hero) ─────────────────────────────── */
@media (max-width: 600px) {
  .bs-live-now {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

/* ── Game lobby modals (kiss-lobby, jili100-lobby, pgsoft-lobby) ── */
.modal-backdrop[id$="-lobby"] .modal {
  max-width: 980px !important;
  width: 100% !important;
}
@media (max-width: 600px) {
  .modal-backdrop[id$="-lobby"] .modal {
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* ── Generic modal scrollbar (subtle) ──────────────────────────── */
.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.2); border-radius: 4px; }
.modal::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,0.35); }
/* ============================================================
   PHASE-5 (2026-05-09) — Desktop polish · Skeleton/Empty · Microinteractions · Perf
   ============================================================ */

/* ╔═════════════════════════════════════════════════════════╗
   ║ L. DESKTOP (≥769px) POLISH                              ║
   ╚═════════════════════════════════════════════════════════╝ */

@media (min-width: 769px) {

  /* Wider container with comfortable side gutter */
  .bs-container,
  body > main {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  @media (min-width: 1280px) {
    .bs-container, body > main {
      max-width: 1280px !important;
      padding-left: 32px !important;
      padding-right: 32px !important;
    }
  }

  /* Wider section spacing on desktop */
  .section { margin-bottom: 40px !important; }

  /* Section title bigger */
  .section-title {
    font-size: 14px !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
  }
  .section-title::before {
    width: 4px !important;
    height: 16px !important;
  }

  /* Hero a touch taller */
  .hero { aspect-ratio: 21/9 !important; }
  .hero-amount.display { font-size: 48px !important; }
  .hero-eyebrow { font-size: 11px !important; }
  .hero-subtxt { font-size: 13px !important; }

  /* Hot promo strip 4-col */
  .hot-promo-track,
  .promo-grid:not(.h-scroll) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  @media (min-width: 1100px) {
    .hot-promo-track,
    .promo-grid:not(.h-scroll) { grid-template-columns: repeat(4, 1fr) !important; }
  }

  /* Game tile bigger labels */
  .game-play-lbl { font-size: 11.5px !important; }

  /* Cat tabs slightly taller */
  .cat-btn { height: 40px !important; padding: 0 18px !important; font-size: 13px !important; }

  /* Live tx cards a bit roomier */
  .livetx-row { padding: 12px 18px !important; font-size: 12px !important; }

  /* FAQ items tighter horizontal */
  .faq-q { padding: 16px 20px !important; font-size: 14px !important; }
  .faq-a { padding: 0 20px 16px !important; font-size: 13px !important; }

  /* VIP strip wider */
  .vip-strip { padding: 22px 24px !important; }
  .vip-tier { min-height: 80px !important; }
  .vip-tier-ico { font-size: 22px !important; }
  .vip-tier-lbl { font-size: 10.5px !important; }

  /* Feature tiles bigger icon */
  .feat-ico-wrap { width: 44px !important; height: 44px !important; }
  .feat-ico-wrap svg { width: 22px !important; height: 22px !important; }
  .feat-lbl { font-size: 12px !important; }

  /* Pay grid: bigger cells */
  .pay-cell { padding: 14px 8px !important; }
  .pay-mono, .pay-mono-logo { width: 40px !important; height: 40px !important; }
  .pay-name { font-size: 12px !important; }

  /* Footer two-col layout on desktop (when content available) */
  .footer-copy { padding: 40px 28px 28px !important; }
  .footer-copy p { font-size: 12px !important; }

  /* Top nav: maybe show extra desktop nav links (.top-nav-extra) */
  .top-nav { height: 64px; padding: 0 24px !important; }
  .brand-text { font-size: 22px !important; }

  /* Modals centered, no bottom-sheet */
  .modal-backdrop { align-items: center !important; padding: 24px !important; }
  .modal-backdrop .modal {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    max-height: 86vh !important;
    margin: auto !important;
  }
  .modal-backdrop .modal::before { display: none !important; } /* no drag handle */

  /* Hover effects feel premium */
  .game-tile:hover,
  .feat-tile:hover,
  .hot-promo-card:hover,
  .vip-tier:hover {
    transition-duration: .25s !important;
  }

  /* Drawer on desktop = wider, slide from right */
  .drawer { width: 360px !important; }
}

/* ╔═════════════════════════════════════════════════════════╗
   ║ N. SKELETONS + EMPTY STATES                             ║
   ╚═════════════════════════════════════════════════════════╝ */

/* Generic skeleton block */
.skeleton {
  position: relative;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
  min-height: 16px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton variants */
.skeleton-text { height: 12px; border-radius: 4px; }
.skeleton-title { height: 18px; border-radius: 6px; width: 60%; }
.skeleton-card { aspect-ratio: 1/1; border-radius: 14px; }
.skeleton-pill { height: 36px; border-radius: 99px; width: 100px; }
.skeleton-row { height: 44px; border-radius: 10px; }
.skeleton-circle { width: 36px; height: 36px; border-radius: 50%; }

/* Empty state placeholders */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 40px 20px !important;
  text-align: center;
  color: rgba(255,255,255,0.5);
}
.empty-state-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.empty-state-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.2px;
}
.empty-state-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  font-weight: 500;
  max-width: 280px;
}
.empty-state-cta {
  margin-top: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border: none;
  cursor: pointer;
}

/* Loading text (auto-add shimmer to "Loading..." text) */
[id*="Loading"], div:has(> [data-loading]),
.is-loading-text {
  position: relative;
  background: linear-gradient(90deg,
    rgba(251,191,36,0.5) 0%,
    rgba(251,191,36,1) 50%,
    rgba(251,191,36,0.5) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: skeleton-shimmer 1.6s linear infinite;
}

/* ╔═════════════════════════════════════════════════════════╗
   ║ O. MICROINTERACTIONS                                    ║
   ╚═════════════════════════════════════════════════════════╝ */

/* Section reveal on scroll (auto-applied via .reveal class from JS) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(0.32,0.72,0.18,1.0),
              transform .5s cubic-bezier(0.32,0.72,0.18,1.0);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for tile grids */
.reveal[data-stagger="1"] { transition-delay: .04s; }
.reveal[data-stagger="2"] { transition-delay: .08s; }
.reveal[data-stagger="3"] { transition-delay: .12s; }
.reveal[data-stagger="4"] { transition-delay: .16s; }
.reveal[data-stagger="5"] { transition-delay: .20s; }
.reveal[data-stagger="6"] { transition-delay: .24s; }

/* Page-load entrance for hero + first sections */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-wrap { animation: page-fade-in .5s ease-out both; }
.section:first-of-type { animation: page-fade-in .5s ease-out .1s both; }

/* Ripple on tap (lightweight version) */
.btn-gold, .topnav-btn-register, .drawer-btn-register, .cat-btn,
.bnav-item, .feat-tile, .game-tile, .hot-promo-card,
.deposit-card, .pay-cell, .vip-tier, .mw-action-btn, .float-btn {
  position: relative;
  overflow: hidden;
}
.btn-gold::after, .topnav-btn-register::after, .drawer-btn-register::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn-gold:active::after,
.topnav-btn-register:active::after,
.drawer-btn-register:active::after {
  opacity: 1;
  transition-duration: .05s;
}

/* Number count-up reveal */
@keyframes num-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mw-main, #topnav-balance-amt, #drawer-user-balance,
.hpc-num, .hero-amount {
  display: inline-block;
  animation: num-count-up .4s ease-out;
}

/* Hover glow on premium buttons */
.btn-gold {
  position: relative;
  transition: all .2s ease, box-shadow .3s ease;
}
.btn-gold:hover {
  box-shadow: 0 6px 20px rgba(251,191,36,0.5), 0 0 30px rgba(251,191,36,0.15);
}

/* Smooth scroll-snap for horizontal carousels */
.cat-row, .vip-tiers, .promo-grid, .hot-promo-track {
  scroll-snap-type: x proximity;
  scroll-padding: 0 14px;
}
.cat-row > *, .vip-tiers > *,
.promo-grid > *, .hot-promo-track > * {
  scroll-snap-align: start;
}

/* Sticky section title shadow on scroll-stuck (when used as sticky) */
.section-title.is-stuck {
  background: rgba(10,14,26,0.95);
  backdrop-filter: blur(10px);
  z-index: 10;
}

/* ╔═════════════════════════════════════════════════════════╗
   ║ P. PERFORMANCE                                          ║
   ╚═════════════════════════════════════════════════════════╝ */

/* CSS containment for off-screen sections (skip layout when not visible) */
.section, #livetx-rows, .games-grid, .feat-grid {
  contain: layout style;
}

/* content-visibility: auto for below-fold heavy sections */
@supports (content-visibility: auto) {
  #sec-popular-games,
  .vip-strip,
  .feat-grid,
  #livetx-rows,
  .pay-grid,
  #testimonials-rail,
  .faq-item,
  .trust-row,
  .footer-copy {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
  }
}

/* Will-change hints for animated elements (GPU-accelerated) */
.hero-slide,
.bs-d-marquee-track,
.float-btn.live,
.bnav-item.bnav-center .bnav-center,
.livetx-live .dot {
  will-change: transform, opacity;
}

/* Image rendering hints (prevent CLS) */
img[loading], img.lazy-load, img[data-src] {
  background: rgba(255,255,255,0.03);
}
img:not([width]):not([style*="width"]) { max-width: 100%; }
img:not([height]):not([style*="height"]) { height: auto; }

/* Fonts: swap for fallback while loading custom fonts */
@font-face {
  font-family: "Oswald";
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-display: swap;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hot-promo-card:hover,
  .game-tile:hover,
  .feat-tile:hover,
  .vip-tier:hover {
    transform: none !important;
  }
}

/* High-DPI image rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img.brand-logo, .game-bg-logo img, .pay-mono img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Prevent FOUC during page load */
html { background: #0a0e1a; }
body { background: #0a0e1a; min-height: 100vh; }

/* Disable text selection on UI chrome (prevents accidental selects) */
.top-nav, .bottom-nav, .bnav-item, .cat-btn, .game-badge,
.wallet-mode-badge, .hpc-tag, .vip-tier-lbl, .lang-btn {
  user-select: none;
  -webkit-user-select: none;
}

/* Optimize font-rendering globally */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   PROMO-HUB-V2 styles (2026-05-09)
   ============================================================ */

/* Tabs bar */
.ph-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 12px 14px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  position: sticky;
  top: 0;
  background: rgba(10,14,26,0.92);
  backdrop-filter: blur(10px);
  z-index: 5;
}
.ph-tab {
  flex: 1 !important;
  padding: 10px 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all .15s ease;
}
.ph-tab span:first-child { font-size: 14px; }
.ph-tab:active { transform: scale(0.96); }
.ph-tab.active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #000 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 2px 10px rgba(251,191,36,0.4);
}

.ph-body { padding: 14px !important; }

/* Banner intro */
.ph-banner {
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  margin-bottom: 14px;
}
.ph-banner-success {
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
  border-color: rgba(16,185,129,0.4);
  color: #6ee7b7;
  font-weight: 700;
}

/* ── MISSION CARD ───────────────────────────────────────────── */
.ph-mission {
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 14%, rgba(20,24,38,0.95)), rgba(13,16,28,0.98));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-left: 3px solid var(--c);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.ph-mission-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.ph-mission-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
}
.ph-mission-meta { flex: 1; min-width: 0; }
.ph-mission-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.ph-mission-desc {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  line-height: 1.4;
  font-weight: 500;
}
.ph-mission-reward {
  flex: 0 0 auto;
  text-align: right;
}
.ph-mission-reward-amt {
  font-size: 18px;
  font-weight: 900;
  color: var(--c);
  line-height: 1;
  letter-spacing: -0.5px;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
}
.ph-mission-reward-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
  text-transform: uppercase;
}

.ph-mission-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ph-mission-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.ph-mission-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff));
  border-radius: 99px;
  transition: width .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent);
}
.ph-mission-counter {
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
  letter-spacing: 0.3px;
}

.ph-mission-claim {
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all .18s ease;
}
.ph-claim-ready {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4);
  animation: ph-claim-pulse 1.8s ease-in-out infinite;
}
@keyframes ph-claim-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(16,185,129,0.4); }
  50%      { box-shadow: 0 6px 20px rgba(16,185,129,0.7), 0 0 24px rgba(16,185,129,0.3); }
}
.ph-claim-ready:hover { transform: translateY(-1px); }
.ph-claim-ready:active { transform: scale(0.97); }

.ph-claim-done {
  background: rgba(16,185,129,0.1);
  color: #6ee7b7;
  border: 1px solid rgba(16,185,129,0.25);
  cursor: default;
}

.ph-mission-hint {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  letter-spacing: 0.2px;
}

/* ── PROMOSI CARD ───────────────────────────────────────────── */
.ph-promo-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 14%, rgba(20,24,38,0.95)), rgba(13,16,28,0.98));
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  border-left: 3px solid var(--c);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.ph-promo-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.ph-promo-card:active { transform: scale(0.99); }
.ph-promo-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 35%, transparent);
}
.ph-promo-body { flex: 1; min-width: 0; }
.ph-promo-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-promo-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--c);
  margin-top: 2px;
}
.ph-promo-desc {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  margin-top: 3px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-promo-action { flex-shrink: 0; }
.ph-promo-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c);
  color: var(--c);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all .15s ease;
}
.ph-promo-btn:hover { background: var(--c); color: #000; }

/* ── SAYA TAB ───────────────────────────────────────────────── */
.ph-saya-summary {
  text-align: center;
  padding: 22px 14px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(251,191,36,0.04));
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 14px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.ph-saya-summary::before {
  content: "";
  position: absolute; right: -20px; top: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.25), transparent 70%);
  pointer-events: none;
}
.ph-saya-summary-amt {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  line-height: 1;
}
.ph-saya-summary-lbl {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ph-saya-section { margin-bottom: 16px; }
.ph-saya-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: rgba(251,191,36,0.7);
  margin-bottom: 8px;
  padding-left: 4px;
  text-transform: uppercase;
}

.ph-saya-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20,24,38,0.96), rgba(13,16,28,0.98));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 8px;
}
.ph-saya-good { border-color: rgba(16,185,129,0.3); background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(13,16,28,0.98)); }
.ph-saya-warn { border-color: rgba(251,191,36,0.4); background: linear-gradient(180deg, rgba(251,191,36,0.08), rgba(13,16,28,0.98)); }
.ph-saya-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  flex-shrink: 0;
}
.ph-saya-meta { flex: 1; min-width: 0; }
.ph-saya-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}
.ph-saya-desc {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  font-weight: 500;
  line-height: 1.4;
}
.ph-saya-status {
  font-size: 16px;
  color: #10b981;
  flex-shrink: 0;
}
.ph-saya-cta {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  border: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s ease;
}
.ph-saya-cta:active { transform: scale(0.95); }

.ph-saya-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
}
.ph-saya-hist {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 6px 0;
  font-size: 11px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ph-saya-hist:last-child { border-bottom: none; }
.ph-saya-hist-type { color: rgba(255,255,255,0.85); font-weight: 700; }
.ph-saya-hist-amt { color: #fbbf24; font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-saya-hist-date { color: rgba(255,255,255,0.4); font-size: 10px; font-variant-numeric: tabular-nums; }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.ph-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.5);
}
.ph-empty-icon { font-size: 36px; margin-bottom: 10px; }
.ph-empty-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.ph-empty-desc { font-size: 12px; line-height: 1.5; max-width: 280px; margin: 0 auto; font-weight: 500; }

/* ── Mobile tighten ───────────────────────────────────────── */
@media (max-width: 600px) {
  .ph-tabs { padding: 10px 12px 12px !important; }
  .ph-tab { font-size: 11.5px !important; padding: 9px 6px !important; }
  .ph-mission { padding: 12px; }
  .ph-mission-icon { width: 40px; height: 40px; font-size: 20px; }
  .ph-mission-name { font-size: 13px; }
  .ph-mission-reward-amt { font-size: 16px; }
  .ph-saya-summary-amt { font-size: 32px; }
}

/* Spin Wheel modal (2026-05-09) */

#modal-spin-wheel .sw-modal {
  max-width: 420px !important;
  background: linear-gradient(180deg, #1a0e3a 0%, #0a0e1a 100%) !important;
  border: 1px solid rgba(168,85,247,0.4) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
#modal-spin-wheel .sw-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(168,85,247,0.18), transparent 60%);
  pointer-events: none;
}
.sw-modal-inner {
  padding: 24px 20px 20px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.sw-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}
.sw-close:active { transform: scale(0.92); background: rgba(239,68,68,0.18); color: #fca5a5; }

.sw-title {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg,#fbbf24,#a855f7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  margin: 0 0 4px;
}
.sw-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.4;
}

/* Wheel stage */
.sw-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 18px;
}
.sw-pointer {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: #fbbf24;
  text-shadow: 0 2px 8px rgba(251,191,36,0.6);
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.sw-wheel {
  position: relative;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a0e3a, #0a0e1a);
  border: 4px solid rgba(251,191,36,0.4);
  box-shadow: 0 0 30px rgba(168,85,247,0.4), inset 0 0 30px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: rotate(0deg);
}
.sw-seg {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 50%,
    calc(50% + 50% * cos(var(--start) - 90deg)) calc(50% + 50% * sin(var(--start) - 90deg)),
    calc(50% + 50% * cos(var(--start) + var(--span) - 90deg)) calc(50% + 50% * sin(var(--start) + var(--span) - 90deg))
  );
  background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 60%, #000));
  border: 1px solid rgba(255,255,255,0.1);
}
.sw-seg-text {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 0 0;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: none;
}
.sw-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 4px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(251,191,36,0.5);
}
.sw-center-icon { font-size: 24px; line-height: 1; }
.sw-center-spins {
  font-size: 11px;
  font-weight: 900;
  color: #000;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Credits */
.sw-credits {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.sw-credits b { color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }

/* Spin button */
.sw-spin-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(251,191,36,0.5);
  transition: all .15s ease;
  text-transform: uppercase;
}
.sw-spin-btn:active:not([disabled]) { transform: scale(0.98); }
.sw-spin-btn[disabled] {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
  box-shadow: none;
}

.sw-rules {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  text-align: left;
}

/* Result overlay */
.sw-result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: sw-fade .2s ease-out;
}
@keyframes sw-fade { from { opacity: 0; } to { opacity: 1; } }
.sw-result-card {
  background: linear-gradient(180deg, #1a0e3a, #0a0e1a);
  border: 2px solid rgba(168,85,247,0.5);
  border-radius: 18px;
  padding: 28px 32px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  min-width: 240px;
  animation: sw-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sw-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
.sw-result-card.sw-won {
  border-color: #10b981;
  box-shadow: 0 20px 50px rgba(16,185,129,0.4), 0 0 60px rgba(16,185,129,0.2);
}
.sw-result-close {
  margin-top: 18px;
  height: 44px;
  width: 100%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 480px) {
  .sw-stage { width: 250px; height: 250px; }
  .sw-wheel { width: 250px; height: 250px; }
  .sw-seg-text { transform: rotate(var(--span)) translateY(-100px) !important; font-size: 10px; }
}

/* ============================================================
   CHAT-V2 (2026-05-09) — platfound modal-chat polish
   F1: kill tigers · F2: compact welcome · F3: chip trim · F4: enter
   F5: typing indicator · F6: better bubbles
   ============================================================ */

/* F1: hide tiger images in chat */
.chat-modal-v2 .chat-avatar img,
.chat-modal-v2 .chat-welcome-mascot {
  display: none !important;
}

/* F1: replace with E avatar circle */
.chat-modal-v2 .chat-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  box-shadow: 0 4px 12px rgba(251,191,36,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  overflow: visible !important;
}
.chat-modal-v2 .chat-avatar::after {
  content: "E";
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #1a0e02;
  letter-spacing: 0.5px;
  line-height: 1;
}
.chat-modal-v2 .chat-avatar-dot {
  position: absolute !important;
  bottom: -2px; right: -2px;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 2px solid #0a0e1a !important;
  box-shadow: 0 0 8px #10b981;
  z-index: 2;
}

/* F2: compact welcome — tight padding, smaller mascot replacement */
.chat-modal-v2 .chat-welcome {
  padding: 18px 18px 12px !important;
  text-align: center;
}
.chat-modal-v2 .chat-welcome-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.2px !important;
  margin: 0 0 4px !important;
}
.chat-modal-v2 .chat-welcome-sub {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: 500;
}

/* F3: trim chips — hide vip/game on mobile, keep 4 main */
@media (max-width: 480px) {
  .chat-modal-v2 .chat-chip[data-chip="vip"],
  .chat-modal-v2 .chat-chip[data-chip="game"] {
    display: none !important;
  }
}
.chat-modal-v2 .chat-chips {
  padding: 10px 14px !important;
  gap: 6px !important;
}
.chat-modal-v2 .chat-chip {
  padding: 7px 12px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.85) !important;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.chat-modal-v2 .chat-chip:hover {
  background: rgba(251,191,36,0.12) !important;
  border-color: rgba(251,191,36,0.4) !important;
  color: #fbbf24 !important;
}
.chat-modal-v2 .chat-chip[data-chip="human"] {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
}

/* F5: typing indicator (3 dots animated) */
.chat-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 16px 4px;
  margin: 4px 18px 4px;
  width: fit-content;
}
.chat-typing-bubble span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(251,191,36,0.7);
  animation: chat-typing 1.4s infinite ease-in-out;
}
.chat-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* F6: improved message bubbles + timestamp */
.chat-modal-v2 .chat-msg {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 6px 18px !important;
  max-width: 78% !important;
}
.chat-modal-v2 .chat-msg.user {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
.chat-modal-v2 .chat-msg.ai,
.chat-modal-v2 .chat-msg.bot,
.chat-modal-v2 .chat-msg.cs {
  align-self: flex-start !important;
  align-items: flex-start !important;
}
.chat-modal-v2 .chat-msg-bubble {
  padding: 9px 13px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border-radius: 16px !important;
  font-weight: 500 !important;
  word-wrap: break-word;
  max-width: 100%;
}
.chat-modal-v2 .chat-msg.user .chat-msg-bubble {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #1a0e02 !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(251,191,36,0.25);
}
.chat-modal-v2 .chat-msg.ai .chat-msg-bubble,
.chat-modal-v2 .chat-msg.bot .chat-msg-bubble {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom-left-radius: 4px !important;
}
.chat-modal-v2 .chat-msg.cs .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(168,85,247,0.06)) !important;
  border: 1px solid rgba(168,85,247,0.4) !important;
  color: rgba(255,255,255,0.95) !important;
  border-bottom-left-radius: 4px !important;
}

/* Timestamp + read marker below bubble */
.chat-modal-v2 .chat-msg-meta {
  font-size: 9.5px !important;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
  font-variant-numeric: tabular-nums;
}
.chat-modal-v2 .chat-msg.user .chat-msg-meta {
  color: rgba(251,191,36,0.55) !important;
}
.chat-modal-v2 .chat-msg-tick {
  font-size: 10px !important;
  color: rgba(96,165,250,0.85) !important;
}

/* CS sender label inside bubble */
.chat-modal-v2 .chat-msg-from {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 3px;
}

/* ── BODY/HTML reset (2026-05-09 fix mobile asymmetry — default 8px margin shifted page right) ─────── */
html, body { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }


/* 2026-05-09 fix: login modal scrollable + safe-area bottom padding */
.modal-backdrop .modal {
  overflow-y: auto !important;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 768px) {
  .modal-backdrop .modal { padding: 22px 22px 26px !important; }
}
/* Auth card inner: extra breathing room above LOG MASUK button */
#modal-auth #mauth-form-login,
#modal-auth #mauth-form-register {
  padding-bottom: 8px;
}
#modal-auth #mauth-form-login button.btn-gold,
#modal-auth #mauth-form-register button.btn-gold {
  margin-top: 12px !important;
}