/* ============================================================
   Platfound · Theme D (混合) — 2026-05-08
   GK9 系绿 + 金 + 深底；马来虎 mascot;
   live ticker / 7-day check-in / mobile 5-tab nav;
   game category icon row 加大加亮；顶部 marquee.
   Loaded AFTER main.css — overrides only what we want to upgrade.
   ============================================================ */

/* ---------- 1. design tokens override ---------- */
:root {
  /* Brand: GK9-ish 深绿 + 金，区别 BK8 蓝海 */
  --d-green:        #0d7a3e;
  --d-green-dark:   #0a5e30;
  --d-green-light:  #14b067;
  --d-green-glow:   rgba(13,122,62,0.55);
  --d-gold:         #f5c842;
  --d-gold-light:   #ffe082;
  --d-gold-dark:    #c08e1a;
  --d-bg-deep:      #0e1b14;
  --d-bg-deeper:    #07120c;
  --d-surface:      #122a1d;
  --d-surface-2:    #1a3a28;
  --d-border:       #1f4530;
  --d-border-bright:#2c633f;

  /* Map onto existing tokens so legacy rules pick up new palette */
  --bg:           var(--d-bg-deep);
  --bg-2:         var(--d-bg-deeper);
  --surface:      var(--d-surface);
  --surface-2:    var(--d-surface-2);
  --border:       var(--d-border);
  --border-bright:var(--d-border-bright);
  --gold:         var(--d-gold);
  --gold-light:   var(--d-gold-light);
  --gold-dark:    var(--d-gold-dark);
  --green:        var(--d-green-light);
}

html, body {
  background: var(--d-bg-deep);
}
body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(245,200,66,0.07), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(13,122,62,0.18), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(20,176,103,0.04), transparent 70%);
}
.bs-container {
  background: linear-gradient(180deg, rgba(13,122,62,0.18), transparent 240px);
}

/* Top nav — make it deep green/gold instead of dark blue */
.top-nav {
  background: linear-gradient(180deg, var(--d-bg-deeper) 0%, var(--d-bg-deep) 100%);
  border-bottom: 1px solid rgba(245,200,66,0.18);
}

/* ---------- 2. Top marquee (welcome bonus + payment) ---------- */
.bs-d-marquee {
  position: relative;
  background:
    linear-gradient(90deg,
      var(--d-green-dark) 0%,
      var(--d-green) 25%,
      var(--d-green-light) 50%,
      var(--d-green) 75%,
      var(--d-green-dark) 100%);
  background-size: 200% 100%;
  animation: bs-d-marquee-shimmer 8s ease-in-out infinite;
  border-bottom: 2px solid var(--d-gold);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 36;
}
.bs-d-marquee::before,
.bs-d-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 50px;
  z-index: 2; pointer-events: none;
}
.bs-d-marquee::before { left: 0; background: linear-gradient(90deg, var(--d-green-dark), transparent); }
.bs-d-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--d-green-dark), transparent); }
@keyframes bs-d-marquee-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.bs-d-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding-left: 100%;
  animation: bs-d-marquee-scroll 70s linear infinite;
}
@keyframes bs-d-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.bs-d-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.bs-d-marquee-item .pill {
  display: inline-block;
  background: var(--d-gold);
  color: #0e1b14;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  box-shadow: 0 2px 6px rgba(245,200,66,0.4);
}
.bs-d-marquee-item .ico {
  font-size: 14px; line-height: 1;
}
.bs-d-marquee-sep { color: var(--d-gold); opacity: 0.6; font-size: 14px; }

/* ---------- 3. Game category icon row 加大加亮 ---------- */
#sec-popular-games .cat-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 4px 14px;
  scrollbar-width: none;
}
#sec-popular-games .cat-btn {
  flex: 0 0 auto;
  min-width: 84px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px 9px !important;
  background: linear-gradient(180deg, var(--d-surface-2) 0%, var(--d-surface) 100%) !important;
  border: 1.5px solid var(--d-border) !important;
  border-radius: 14px !important;
  color: #d8e8de !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#sec-popular-games .cat-btn::before {
  content: attr(data-d-ico);
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
#sec-popular-games .cat-btn:hover {
  transform: translateY(-2px);
  border-color: var(--d-gold);
  box-shadow: 0 6px 18px rgba(245,200,66,0.18);
}
#sec-popular-games .cat-btn.active {
  background: linear-gradient(180deg, var(--d-gold-light) 0%, var(--d-gold) 60%, var(--d-gold-dark) 100%) !important;
  border-color: var(--d-gold) !important;
  color: #0e1b14 !important;
  box-shadow: 0 6px 22px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(-1px);
}
#sec-popular-games .cat-btn.active::before { filter: none; }

/* Game tile glow on hover */
.game-tile { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.game-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(245,200,66,0.28),
              0 0 0 1.5px rgba(245,200,66,0.6);
}

/* ---------- 4. Hero polish — gold framing, mascot float ---------- */
.hero-wrap { position: relative; }
.hero-slide {
  position: relative;
}
.hero-slide.active::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(245,200,66,0.35);
}
.bs-d-hero-mascot {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 110px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  animation: bs-d-mascot-bob 3.6s ease-in-out infinite;
}
@keyframes bs-d-mascot-bob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-6px) rotate(2deg); }
}
.btn-gold {
  background: linear-gradient(180deg, var(--d-gold-light) 0%, var(--d-gold) 50%, var(--d-gold-dark) 100%);
  color: #0e1b14;
  font-weight: 900;
  letter-spacing: 0.6px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(245,200,66,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245,200,66,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
  filter: brightness(1.06);
}

/* ---------- 5. Live transaction ticker beautify ---------- */
.livetx-card {
  border: 1px solid var(--d-border-bright);
  background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-bg-deep) 100%);
  /* 2026-05-11 v4: cap width on desktop so withdraw column doesn't have
     yawning empty middle (matches Mz sample density). */
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.livetx-header { background: linear-gradient(90deg, var(--d-green-dark), var(--d-green)); }
.livetx-title  { color: var(--d-gold-light) !important; }
.livetx-live   { color: #fff; }
.livetx-live .dot { background: #34d399; box-shadow: 0 0 8px #34d399; }
/* 2026-05-11 UI v4 (Playwright-verified) — match Mz sample.
   IMPORTANT: mobile-phase1.css forces `.livetx-row { grid-template-columns: 1fr auto auto !important }`
   AND loads AFTER theme-d.css, so plain `.livetx-row` selectors lose the cascade.
   Use `.livetx-card .livetx-row` (2-class) to beat their 1-class specificity. */
.livetx-card .livetx-row {
  display: grid !important;
  grid-template-columns: 30fr 70fr !important;
  gap: 0 !important;
  padding: 0 !important;  /* mobile-phase1.css forces 12px 18px → kill it */
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  min-height: 36px !important;
  position: relative !important;
  transition: background 0.18s ease;
}
.livetx-card .livetx-row:hover { background: rgba(255,255,255,0.03) !important; }
.livetx-card .livetx-row:last-child { border-bottom: none !important; }

/* Use `.livetx-card`-prefixed selectors throughout so mobile-phase1.css's
   !important rules (it loads after theme-d.css) can't override. */
.livetx-card .livetx-row .livetx-side {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.livetx-card .livetx-row .livetx-side.topup {
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  justify-content: space-between !important;
}
.livetx-card .livetx-row .livetx-side.withdraw {
  /* 2026-05-12 Mz: switch to grid so provider pill has fixed slot
     and amount always right-aligned (was shifting based on prov width) */
  display: grid !important;
  grid-template-columns: minmax(60px, 1fr) 92px minmax(72px, auto) !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: initial !important;
}
.livetx-card .livetx-row .livetx-side.withdraw .lt-name { justify-self: start !important; }
.livetx-card .livetx-row .livetx-side.withdraw .lt-game { justify-self: center !important; margin-left: 0 !important; }
.livetx-card .livetx-row .livetx-side.withdraw .lt-amt-out { justify-self: end !important; margin-left: 0 !important; }

.livetx-card .livetx-row .lt-name {
  display: inline-flex !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
}

.livetx-card .livetx-row .lt-amt-in {
  display: inline-flex !important;
  color: #22c55e !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Withdraw column order: [name left] [provider middle] [amount right]
   2026-05-11 Mz: provider goes in the middle, amount sits at far right. */
.livetx-card .livetx-row .livetx-side.withdraw .lt-game {
  display: inline-flex !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: var(--pc, #94a3b8) !important;
  background: color-mix(in srgb, var(--pc, #94a3b8) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pc, #94a3b8) 38%, transparent) !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;  /* sits right after name */
}

.livetx-card .livetx-row .livetx-side.withdraw .lt-amt-out {
  display: inline-flex !important;
  color: var(--d-gold-light, #fbbf24) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;  /* push amount to far right end */
}

/* Flash only the updated side. Topup = green, Withdraw = gold. */
.livetx-row .livetx-side.bs-d-flash {
  animation: bs-d-side-flash-in 1.4s ease-out;
}
.livetx-row .livetx-side.withdraw.bs-d-flash {
  animation-name: bs-d-side-flash-out;
}
@keyframes bs-d-side-flash-in {
  0%   { background: rgba(34,197,94,0.20); }
  60%  { background: rgba(34,197,94,0.08); }
  100% { background: transparent; }
}
@keyframes bs-d-side-flash-out {
  0%   { background: rgba(251,191,36,0.20); }
  60%  { background: rgba(251,191,36,0.08); }
  100% { background: transparent; }
}

/* Slide-in for the freshly-prepended row */
#livetx-rows > .livetx-row:first-child {
  animation: bs-d-row-slide-in 0.45s ease-out;
}
@keyframes bs-d-row-slide-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2026-05-11 Mz: VIP strip — use emoji icons big enough to read, plus
   subtle gradient bg per tier to feel premium. */
.vip-tier { padding: 14px 8px !important; }
.vip-tier-ico {
  font-size: 32px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) !important;
}
.vip-tier-lbl { font-size: 10px !important; margin-top: 6px !important; }
.vip-tier.bronze   { background: radial-gradient(circle at 50% 0%, rgba(217,119,6,0.25), rgba(146,64,14,0.05) 70%) !important; }
.vip-tier.silver   { background: radial-gradient(circle at 50% 0%, rgba(203,213,225,0.20), rgba(100,116,139,0.05) 70%) !important; }
.vip-tier.gold     { background: radial-gradient(circle at 50% 0%, rgba(251,191,36,0.25), rgba(180,83,9,0.05) 70%) !important; }
.vip-tier.platinum { background: radial-gradient(circle at 50% 0%, rgba(228,228,231,0.20), rgba(161,161,170,0.05) 70%) !important; }
.vip-tier.diamond  { background: radial-gradient(circle at 50% 0%, rgba(34,211,238,0.25), rgba(6,182,212,0.05) 70%) !important; }
.vip-tier:hover { transform: translateY(-2px); transition: transform 0.18s ease; }

/* ============================================================
   LUCKY WHEEL — 2026-05-11 Mz: full visual overhaul
   ============================================================ */
.lucky-wheel-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lucky-wheel-svg {
  width: 100%;
  height: 100%;
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.21, 1.0);
  filter: drop-shadow(0 8px 28px rgba(251,191,36,0.35)) drop-shadow(0 0 1px rgba(255,255,255,0.4));
}
.lucky-pointer {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 26px solid #fbbf24;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  z-index: 3;
  pointer-events: none;
}
.lucky-pointer::after {
  content: "";
  position: absolute;
  top: -28px; left: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde68a, #fbbf24, #b45309);
  box-shadow: 0 0 12px #fbbf24, inset 0 -3px 4px rgba(0,0,0,0.25);
}
.lucky-spin-btn {
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0a0e1a;
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 50%, #d97706 100%);
  border: 2px solid #b45309;
  border-radius: 999px;
  box-shadow: 0 8px 22px -4px rgba(251,191,36,0.6),
              0 2px 0 rgba(255,255,255,0.4) inset,
              0 -2px 0 rgba(0,0,0,0.18) inset;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: "Oswald", system-ui, sans-serif;
}
.lucky-spin-btn:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 32px -4px rgba(251,191,36,0.75),
              0 2px 0 rgba(255,255,255,0.5) inset,
              0 -2px 0 rgba(0,0,0,0.18) inset;
}
.lucky-spin-btn:not(:disabled):active { transform: translateY(0); }
.lucky-spin-btn:disabled {
  background: linear-gradient(135deg, #475569, #334155);
  border-color: #1e293b;
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
  box-shadow: none;
}
.lucky-info-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.lucky-info-tile {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.lucky-info-tile .label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.lucky-info-tile .value {
  font-size: 20px;
  font-weight: 900;
  color: #fbbf24;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.lucky-prize-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.lucky-prize-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  white-space: nowrap;
}
@keyframes lucky-pulse {
  0%, 100% { box-shadow: 0 8px 22px -4px rgba(251,191,36,0.6), 0 2px 0 rgba(255,255,255,0.4) inset, 0 -2px 0 rgba(0,0,0,0.18) inset; }
  50%      { box-shadow: 0 12px 32px -2px rgba(251,191,36,0.9), 0 2px 0 rgba(255,255,255,0.5) inset, 0 -2px 0 rgba(0,0,0,0.18) inset; }
}
.lucky-spin-btn:not(:disabled) { animation: lucky-pulse 2.5s ease-in-out infinite; }

/* 2026-05-11 Mz fix: Tailwind .flex / .items-center / .justify-between not
   loaded, so modal headers (`<div class="flex items-center justify-between">`)
   render as block → title + X stack vertically. Explicitly style the header
   pattern used across all modals. */
.modal-backdrop .modal .flex.items-center.justify-between {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}
.modal-backdrop .modal .flex.items-center {
  display: flex !important;
  align-items: center !important;
}

/* Mobile (< 480px): 30/70 cramps TOP UP amount → switch to 40/60 +
   smaller fonts + tighter padding so RM amounts don't truncate. */
@media (max-width: 480px) {
  .livetx-card .livetx-row,
  .livetx-card .livetx-subhead { grid-template-columns: 40fr 60fr !important; }
  .livetx-card .livetx-row { min-height: 32px !important; }
  .livetx-card .livetx-row .livetx-side { padding: 6px 8px !important; gap: 6px !important; min-height: 32px !important; }
  .livetx-card .livetx-row .lt-name    { font-size: 9.5px !important; letter-spacing: 0.2px !important; }
  .livetx-card .livetx-row .lt-amt-in,
  .livetx-card .livetx-row .livetx-side.withdraw .lt-amt-out { font-size: 10.5px !important; }
  .livetx-card .livetx-row .livetx-side.withdraw .lt-game {
    font-size: 8px !important; padding: 1px 4px !important; letter-spacing: 0.2px !important;
  }
}

/* Subhead labels (DEPOSIT / WITHDRAW) — same split as rows. Higher specificity wins. */
.livetx-card .livetx-subhead {
  display: grid !important;
  grid-template-columns: 30fr 70fr !important;
}

/* Legacy back-compat */
.livetx-row .amt-in  { color: var(--d-green-light) !important; }
.livetx-row .amt-out { color: var(--d-gold-light) !important; }

/* Bottom-edge fixed live ticker — show last big win */
.bs-d-bigwin-strip {
  position: fixed;
  left: 0; right: 0;
  bottom: 60px;          /* sits above bottom-nav (which is ~60px) */
  z-index: 25;
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: 0 8px;
}
@media (min-width: 768px) { .bs-d-bigwin-strip { bottom: 12px; } }
.bs-d-bigwin {
  background: linear-gradient(90deg, rgba(13,122,62,0.92), rgba(20,176,103,0.92));
  border: 1px solid var(--d-gold);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 3px rgba(245,200,66,0.12);
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(80px); opacity: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.3,1.1), opacity 0.45s;
  pointer-events: auto;
}
.bs-d-bigwin.show { transform: translateY(0); opacity: 1; }
.bs-d-bigwin .ico { font-size: 14px; }
.bs-d-bigwin .amt { color: var(--d-gold-light); font-weight: 900; }

/* ---------- 6. 7-day check-in modal beautified ---------- */
.checkin-day {
  position: relative;
  background: linear-gradient(180deg, var(--d-surface-2), var(--d-surface));
  border: 1.5px solid var(--d-border);
  border-radius: 12px;
  padding: 10px 4px 9px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #b8d0c1;
  transition: transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.checkin-day::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(245,200,66,0.0), transparent);
  transition: background 0.3s;
}
.checkin-day.claimed {
  background: linear-gradient(180deg, var(--d-green-dark), #052817);
  border-color: var(--d-green-light);
  color: var(--d-green-light);
}
.checkin-day.claimed::after {
  content: "✓";
  position: absolute;
  top: 4px; right: 6px;
  color: var(--d-green-light);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 4px var(--d-green-glow);
}
.checkin-day.today {
  background: linear-gradient(180deg, var(--d-gold-light), var(--d-gold) 65%, var(--d-gold-dark));
  border-color: var(--d-gold);
  color: #0e1b14;
  box-shadow: 0 0 0 3px rgba(245,200,66,0.18), 0 6px 16px rgba(245,200,66,0.3);
  animation: bs-d-today-pulse 2s ease-in-out infinite;
}
@keyframes bs-d-today-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(245,200,66,0.18), 0 6px 16px rgba(245,200,66,0.3); }
  50%     { box-shadow: 0 0 0 6px rgba(245,200,66,0.32), 0 8px 24px rgba(245,200,66,0.55); }
}

/* check-in container hint */
.bs-d-checkin-info {
  background: rgba(13,122,62,0.14);
  border: 1px solid rgba(20,176,103,0.3);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
  color: #c9e0d2;
  margin-bottom: 12px;
}
.bs-d-checkin-info b { color: var(--d-gold-light); }

/* ---------- 7. Bottom nav 5-tab refresh ---------- */
.bottom-nav {
  background: linear-gradient(180deg, rgba(7,18,12,0.95), rgba(7,18,12,1));
  border-top: 1px solid rgba(245,200,66,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bnav-item.active { color: var(--d-gold-light); }
.bnav-item.active .bnav-ico,
.bnav-item.active span:not(.bnav-badge) { color: var(--d-gold-light); }
.bnav-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--d-gold-light), var(--d-gold));
  box-shadow: 0 0 8px var(--d-gold);
}
.bnav-item { position: relative; }
.bnav-center {
  background: linear-gradient(180deg, var(--d-gold-light) 0%, var(--d-gold) 60%, var(--d-gold-dark) 100%) !important;
  box-shadow: 0 0 0 4px var(--d-bg-deep), 0 6px 20px rgba(245,200,66,0.55);
}
.bnav-item.active .bnav-center {
  animation: bs-d-center-pulse 2.4s ease-in-out infinite;
}
@keyframes bs-d-center-pulse {
  0%,100% { box-shadow: 0 0 0 4px var(--d-bg-deep), 0 6px 20px rgba(245,200,66,0.55); }
  50%     { box-shadow: 0 0 0 4px var(--d-bg-deep), 0 8px 28px rgba(245,200,66,0.85); }
}
.bnav-badge {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 2px 6px rgba(239,68,68,0.5);
}

/* ---------- 8. Promo card mascot illustration ---------- */
.promo-card, .hot-promo-card {
  position: relative;
  overflow: hidden;
}
.bs-d-promo-mascot {
  position: absolute;
  right: -10px;
  bottom: -12px;
  width: 78px;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  pointer-events: none;
  z-index: 0;
}
.hot-promo-card .bs-d-promo-mascot { width: 56px; right: -6px; bottom: -8px; opacity: 0.85; }
.promo-card > *, .hot-promo-card > * { position: relative; z-index: 1; }

/* ---------- 9. Section headers — gold accent ---------- */
.section-title {
  position: relative;
  padding-left: 12px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--d-gold-light), var(--d-gold-dark));
  box-shadow: 0 0 8px var(--d-gold-glow, rgba(245,200,66,0.4));
}

/* ---------- 10. VIP strip — restyle ---------- */
.vip-strip {
  background: linear-gradient(135deg, var(--d-surface-2) 0%, var(--d-surface) 60%, var(--d-bg-deep) 100%);
  border: 1px solid var(--d-border-bright);
}
.vip-tier.gold .vip-tier-ico,
.vip-tier.platinum .vip-tier-ico,
.vip-tier.diamond .vip-tier-ico {
  background: linear-gradient(180deg, var(--d-gold-light), var(--d-gold-dark));
  color: #0e1b14;
}

/* ---------- 11. Trust strip color refresh ---------- */
#bs-trust-strip {
  background: linear-gradient(90deg, rgba(13,122,62,0.18), rgba(245,200,66,0.12)) !important;
  border-bottom: 1px solid rgba(245,200,66,0.25) !important;
}

/* ---------- 12. Coin shower sparkle (already present, just refresh hue) ---------- */
.hero-coin-shower::before,
.hero-coin-shower::after {
  filter: hue-rotate(-10deg) brightness(1.05);
}

/* ---------- 13. Mobile-only bottom nav margin (already handled, ensure) ---------- */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bs-d-bigwin-strip { bottom: 16px; }
}

/* ============================================================
   HOT-PROMO-CARD V4 (2026-05-09) — uniform premium offer card
   All cards same dark base; only thin left-stripe + number color vary
   No redundant titles, no overpowering tints
   ============================================================ */

.hot-promo-card .bs-d-promo-mascot { display: none !important; }

.hot-promo-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 18px 18px 14px 22px !important;
  border-radius: 14px !important;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  min-height: 168px !important;
  /* Uniform dark base — same for all cards */
  background: linear-gradient(180deg, rgba(20,24,38,0.96) 0%, rgba(13,16,28,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid var(--c) !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.45),
    inset 1px 0 0 color-mix(in srgb, var(--c) 22%, transparent) !important;
  overflow: hidden !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hot-promo-card::before, .hot-promo-card::after { display: none !important; content: none !important; }

.hot-promo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.12) !important;
  border-left-color: var(--c) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--c) 50%, transparent) !important;
}
.hot-promo-card:active { transform: scale(0.985) translateY(-1px); }
.hot-promo-card > * { position: relative !important; z-index: 1 !important; }

/* ── Header: dot + tag · time ─────────────────────────────────── */
.hot-promo-card .hpc-head {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
  flex: 0 0 auto !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.hot-promo-card .hpc-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--c) !important;
  box-shadow: 0 0 8px var(--c) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.hot-promo-card .hpc-tag {
  color: var(--c) !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
}
.hot-promo-card .hpc-sep {
  color: rgba(255,255,255,0.25) !important;
}
.hot-promo-card .hpc-time {
  color: rgba(255,255,255,0.5) !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
}

/* ── Hero figure ──────────────────────────────────────────────── */
.hot-promo-card .hpc-fig {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 0 8px !important;
  letter-spacing: -2px !important;
  flex: 0 0 auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif !important;
}
.hot-promo-card .hpc-num {
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--c) 65%, #ffffff) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: inherit !important;
}
.hot-promo-card .hpc-unit {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--c) !important;
  letter-spacing: 0 !important;
  font-family: inherit !important;
}
.hot-promo-card .hpc-fig[data-kind="amount"] .hpc-num { font-size: 38px !important; }
.hot-promo-card .hpc-fig[data-kind="amount"] .hpc-unit { font-size: 16px !important; align-self: flex-start !important; margin-top: 4px !important; }
.hot-promo-card .hpc-fig[data-kind="icon"] .hpc-num {
  font-size: 40px !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: inherit !important;
}
.hot-promo-card .hpc-fig[data-kind="icon"] .hpc-unit { display: none !important; }

/* ── Description (single source of truth — no redundant title) ── */
.hot-promo-card .hpc-desc {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.78) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  letter-spacing: 0.1px !important;
  display: block !important;
}

/* ── CTA — 2026-05-11 UI fix: real pill button with depth/glow ───────── */
.hot-promo-card .hpc-cta {
  margin-top: auto !important;
  padding: 10px 14px !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.3px !important;
  color: #0a0e1a !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #1a1f2e)) !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 14px -3px color-mix(in srgb, var(--c) 55%, transparent),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset !important;
  font-family: inherit !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}
.hot-promo-card:hover .hpc-cta {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 8px 22px -4px color-mix(in srgb, var(--c) 65%, transparent),
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 -1px 0 rgba(0,0,0,0.22) inset !important;
}
.hot-promo-card:active .hpc-cta { transform: translateY(0) !important; }
.hot-promo-card .hpc-cta::after {
  content: "→" !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0a0e1a !important;
  transition: transform .22s ease;
  background: none !important;
  border: none !important;
  width: auto !important; height: auto !important;
  position: static !important;
  display: inline !important;
}
.hot-promo-card:hover .hpc-cta::after { transform: translateX(4px); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hot-promo-card { min-height: 154px !important; padding: 16px 16px 12px 20px !important; }
  .hot-promo-card .hpc-num { font-size: 44px !important; }
  .hot-promo-card .hpc-fig[data-kind="amount"] .hpc-num { font-size: 34px !important; }
}
@media (min-width: 1280px) {
  .hot-promo-card { min-height: 176px !important; padding: 20px 20px 16px 24px !important; }
  .hot-promo-card .hpc-num { font-size: 52px !important; }
  .hot-promo-card .hpc-fig[data-kind="amount"] .hpc-num { font-size: 42px !important; }
}

/* ── V4 promo-grid layout (3-col homepage section) ─────────────── */
.promo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  padding: 4px 0 !important;
}
@media (max-width: 1023px) {
  .promo-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .promo-grid {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .promo-grid::-webkit-scrollbar { display: none; }
  .promo-grid > .hot-promo-card {
    flex: 0 0 78% !important;
    min-width: 240px !important;
    max-width: 300px !important;
    scroll-snap-align: start;
  }
}

/* When unit is "RM" (amount kind), render unit before num via flex order */
.hot-promo-card .hpc-fig[data-kind="amount"] .hpc-unit { order: -1 !important; }

/* Kill any old .promo-card legacy CSS that might still target the new cards via cascade */
.promo-card-static .urgency-badge,
.promo-card-static .countdown-badge,
.promo-card-static .promo-icon,
.promo-card-static .promo-text,
.promo-card-static .promo-claim,
.promo-card .bs-d-promo-mascot,
.promo-card-static .bs-d-promo-mascot {
  display: none !important;
}