/* ============================================================================
   temp1 DARK SKIN — black + red/gold. Scoped to html[data-cms-scheme="dark"]
   (cms.js sets that when the merchant bg colour is dark). Overrides temp1's
   ~277 hard-coded light colours so every section, card, popup, button, game
   card and font is legible and on-brand. Loaded AFTER styles.css.
   ========================================================================== */
html[data-cms-scheme="dark"]{
  --d-bg:#0b0b0e; --d-bg2:#0e0e13;
  --d-surface:#16161d; --d-surface-2:#1e1e27; --d-raise:#242430;
  --d-line:#2b2b37; --d-line-2:#3a3a48;
  --d-text:#f5f5f7; --d-text-2:#d7d7de; --d-muted:#9b9bab; --d-dim:#6f6f7e;
  --d-red:#e11d2a; --d-red-2:#ff2b3b; --d-red-deep:#7f0d15;
  --d-gold:#f5c518; --d-gold-2:#ffd84d; --d-gold-deep:#a9790a;
  --d-glow-red:0 8px 24px rgba(225,29,42,.35); --d-shadow:0 14px 34px rgba(0,0,0,.5);
  /* re-point temp1's own tokens so the cascade is coherent */
  --ink:var(--d-text); --ink-2:var(--d-text-2); --muted:var(--d-muted); --muted-2:var(--d-dim);
  --line:var(--d-line); --line-2:var(--d-line-2);
  --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-deep:var(--d-raise);
  --bg-3:var(--d-bg); --card:var(--d-surface);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 24px rgba(0,0,0,.45); --shadow-lg:var(--d-shadow);
}
html[data-cms-scheme="dark"] body{
  background:
    radial-gradient(900px 460px at 12% -8%,rgba(225,29,42,.15),transparent 60%),
    radial-gradient(740px 520px at 92% 2%,rgba(245,197,24,.07),transparent 60%),
    linear-gradient(180deg,#0a0a0d,#050506) !important;
  color:var(--d-text) !important;
}

/* ---- default text legibility ---- */
html[data-cms-scheme="dark"]{ color:var(--d-text); }
html[data-cms-scheme="dark"] h1,html[data-cms-scheme="dark"] h2,html[data-cms-scheme="dark"] h3,
html[data-cms-scheme="dark"] h4,html[data-cms-scheme="dark"] b,html[data-cms-scheme="dark"] strong,
html[data-cms-scheme="dark"] .title,html[data-cms-scheme="dark"] .name,html[data-cms-scheme="dark"] .count,
html[data-cms-scheme="dark"] .head,html[data-cms-scheme="dark"] .who,html[data-cms-scheme="dark"] .unit,
html[data-cms-scheme="dark"] .section-title,html[data-cms-scheme="dark"] label{ color:var(--d-text) !important; }
html[data-cms-scheme="dark"] .sub,html[data-cms-scheme="dark"] .muted,html[data-cms-scheme="dark"] small,
html[data-cms-scheme="dark"] p{ color:var(--d-muted) !important; }

/* ---- every card / panel / section surface ---- */
html[data-cms-scheme="dark"] .card,
html[data-cms-scheme="dark"] .panel,
html[data-cms-scheme="dark"] .brand-card,
html[data-cms-scheme="dark"] .welfare-card,
html[data-cms-scheme="dark"] .asset-card,
html[data-cms-scheme="dark"] .service-card,
html[data-cms-scheme="dark"] .promo-item,
html[data-cms-scheme="dark"] .promo-list,
html[data-cms-scheme="dark"] .live-entry,
html[data-cms-scheme="dark"] .info-panel,
html[data-cms-scheme="dark"] .info-article,
html[data-cms-scheme="dark"] .info-rich,
html[data-cms-scheme="dark"] .info-about-brand,
html[data-cms-scheme="dark"] .info-hero,
html[data-cms-scheme="dark"] .info-contact-grid > *,
html[data-cms-scheme="dark"] .seo-discovery,
html[data-cms-scheme="dark"] .notice-strip,
html[data-cms-scheme="dark"] .app-strip,
html[data-cms-scheme="dark"] .profile-balance-card,
html[data-cms-scheme="dark"] .profile-menu-card,
html[data-cms-scheme="dark"] .profile-settings,
html[data-cms-scheme="dark"] .profile-guest,
html[data-cms-scheme="dark"] .vip-section,
html[data-cms-scheme="dark"] .vip-tier,
html[data-cms-scheme="dark"] .vip-threshold,
html[data-cms-scheme="dark"] .vip-guest{
  background:linear-gradient(180deg,var(--d-surface),var(--d-surface-2)) !important;
  border:1px solid var(--d-line) !important;
  color:var(--d-text) !important;
  box-shadow:var(--d-shadow);
}

/* Reward Center / promo / welfare hero cards → dark with gold hairline instead of light blue */
html[data-cms-scheme="dark"] .welfare-card,
html[data-cms-scheme="dark"] .vip-hero,
html[data-cms-scheme="dark"] .vip-banner,
html[data-cms-scheme="dark"] .hero-banner,
html[data-cms-scheme="dark"] .profile-vip-card{
  background:
    radial-gradient(120% 120% at 100% 0,rgba(245,197,24,.16),transparent 55%),
    linear-gradient(120deg,#20120a,#0f0f14) !important;
  border:1px solid rgba(245,197,24,.28) !important; color:var(--d-text) !important;
}
html[data-cms-scheme="dark"] .vip-title,html[data-cms-scheme="dark"] .hot-game-label{ color:var(--d-gold-2) !important; }

/* inner rows / sub-surfaces */
html[data-cms-scheme="dark"] .it,
html[data-cms-scheme="dark"] .item,
html[data-cms-scheme="dark"] .more-item,
html[data-cms-scheme="dark"] .row4,
html[data-cms-scheme="dark"] .action-row > *,
html[data-cms-scheme="dark"] .vip-member-top,
html[data-cms-scheme="dark"] .brand-list .item{
  background:var(--d-surface-2) !important; border-color:var(--d-line) !important; color:var(--d-text) !important;
}

/* ---- popups / modals (the white ones) ---- */
html[data-cms-scheme="dark"] .modal,
html[data-cms-scheme="dark"] .modal-light,
html[data-cms-scheme="dark"] .sheet,
html[data-cms-scheme="dark"] .dialog,
html[data-cms-scheme="dark"] .drawer,
html[data-cms-scheme="dark"] .popup{
  background:linear-gradient(180deg,var(--d-surface),#101015) !important;
  border:1px solid var(--d-line) !important; color:var(--d-text) !important; box-shadow:var(--d-shadow);
}
html[data-cms-scheme="dark"] .modal-backdrop-light,
html[data-cms-scheme="dark"] .modal-backdrop{ background:rgba(0,0,0,.66) !important; backdrop-filter:blur(3px); }
html[data-cms-scheme="dark"] .modal *,html[data-cms-scheme="dark"] .modal-light *{ border-color:var(--d-line); }
html[data-cms-scheme="dark"] .modal .sub,html[data-cms-scheme="dark"] .modal-light .sub,
html[data-cms-scheme="dark"] .modal small,html[data-cms-scheme="dark"] .modal-light small{ color:var(--d-muted) !important; }

/* ---- form fields ---- */
html[data-cms-scheme="dark"] .field,
html[data-cms-scheme="dark"] .field-light,
html[data-cms-scheme="dark"] input,
html[data-cms-scheme="dark"] select,
html[data-cms-scheme="dark"] textarea{
  background:var(--d-bg) !important; border:1px solid var(--d-line) !important; color:var(--d-text) !important;
}
html[data-cms-scheme="dark"] input::placeholder,html[data-cms-scheme="dark"] textarea::placeholder{ color:var(--d-dim) !important; }
html[data-cms-scheme="dark"] .field:focus,html[data-cms-scheme="dark"] input:focus,html[data-cms-scheme="dark"] select:focus{
  border-color:var(--d-gold) !important; box-shadow:0 0 0 3px rgba(245,197,24,.15) !important; outline:none;
}

/* ---- buttons ---- */
html[data-cms-scheme="dark"] .btn-blue,
html[data-cms-scheme="dark"] .btn.primary,
html[data-cms-scheme="dark"] button.primary{
  background:linear-gradient(180deg,var(--d-red-2),var(--d-red)) !important; color:#fff !important;
  border:none !important; box-shadow:var(--d-glow-red) !important;
}
html[data-cms-scheme="dark"] .btn-light{
  background:var(--d-surface-2) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important;
}
html[data-cms-scheme="dark"] .btn-light:hover{ background:var(--d-raise) !important; }
/* gold utility (claim / vip / bonus) */
html[data-cms-scheme="dark"] .btn.gold,html[data-cms-scheme="dark"] .claim,html[data-cms-scheme="dark"] .btn-gold{
  background:linear-gradient(180deg,var(--d-gold-2),var(--d-gold-deep)) !important; color:#1a1200 !important; border:none !important;
}

/* ---- chips / tabs / tags / category rail ---- */
html[data-cms-scheme="dark"] .chip,
html[data-cms-scheme="dark"] .tab,
html[data-cms-scheme="dark"] .cat,
html[data-cms-scheme="dark"] .tag,
html[data-cms-scheme="dark"] .info-tab,
html[data-cms-scheme="dark"] .promo-tabs > *,
html[data-cms-scheme="dark"] .cat-rail > *{
  background:var(--d-surface-2) !important; color:var(--d-muted) !important; border:1px solid var(--d-line) !important;
}
html[data-cms-scheme="dark"] .chip.active,html[data-cms-scheme="dark"] .tab.active,
html[data-cms-scheme="dark"] .cat.active,html[data-cms-scheme="dark"] .info-tab.active,
html[data-cms-scheme="dark"] .cat-rail > .active{
  background:linear-gradient(180deg,var(--d-red-2),var(--d-red)) !important; color:#fff !important;
  border-color:transparent !important; box-shadow:var(--d-glow-red);
}

/* ---- game cards / grid ---- */
html[data-cms-scheme="dark"] .grid .it,
html[data-cms-scheme="dark"] .grid .item,
html[data-cms-scheme="dark"] .figure,
html[data-cms-scheme="dark"] .has-provider-art,
html[data-cms-scheme="dark"] .featured{
  background:var(--d-surface) !important; border:1px solid var(--d-line) !important;
}
html[data-cms-scheme="dark"] .figure .name,html[data-cms-scheme="dark"] .it .name,html[data-cms-scheme="dark"] .item .name{ color:var(--d-text) !important; }

/* ---- header (login prompt) + bottom nav ---- */
html[data-cms-scheme="dark"] .profile-head,
html[data-cms-scheme="dark"] .profile-identity,
html[data-cms-scheme="dark"] .who{ color:var(--d-text) !important; }
html[data-cms-scheme="dark"] .site-footer-nav{
  background:rgba(12,12,16,.96) !important; border-top:1px solid var(--d-line) !important; backdrop-filter:blur(10px);
}
html[data-cms-scheme="dark"] .site-footer-nav .active,html[data-cms-scheme="dark"] .site-footer-nav a.active{ color:var(--d-gold) !important; }

/* ---- misc pills / badges / toasts ---- */
html[data-cms-scheme="dark"] .url-chip,html[data-cms-scheme="dark"] .notice-strip{
  background:var(--d-surface-2) !important; color:var(--d-text) !important; border-color:var(--d-line) !important;
}
html[data-cms-scheme="dark"] .ui-toast{ background:#101015 !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; }
html[data-cms-scheme="dark"] hr,html[data-cms-scheme="dark"] .divider{ border-color:var(--d-line) !important; }
html[data-cms-scheme="dark"] a{ color:var(--d-gold-2); }

/* ---- refinements (user feedback) ---- */
/* quick actions: colored icon only, no box behind */
html[data-cms-scheme="dark"] .action-row .item{ background:transparent !important; border:none !important; box-shadow:none !important; }
html[data-cms-scheme="dark"] .action-row .item .ic-wrap{ box-shadow:0 6px 16px -6px rgba(0,0,0,.6) !important; }

/* category rail: dark tiles instead of white */
html[data-cms-scheme="dark"] .cat-rail .cat{ background:var(--d-surface-2) !important; border:1px solid var(--d-line) !important; color:var(--d-text-2) !important; box-shadow:none !important; }
html[data-cms-scheme="dark"] .cat-rail .cat .ic{ background:var(--d-raise) !important; color:var(--d-gold-2) !important; }
html[data-cms-scheme="dark"] .cat-rail .cat:hover{ border-color:rgba(245,197,24,.4) !important; color:var(--d-gold-2) !important; }
html[data-cms-scheme="dark"] .cat-rail .cat.active{ background:linear-gradient(160deg,rgba(225,29,42,.24),rgba(245,197,24,.12)) !important; border-color:rgba(245,197,24,.45) !important; color:var(--d-gold-2) !important; }
html[data-cms-scheme="dark"] .cat-rail .cat.active .ic{ background:linear-gradient(135deg,var(--d-red),var(--d-gold-deep)) !important; color:#fff !important; }

/* bottom tab bar: dark, active = gold text (no full red block) */
html[data-cms-scheme="dark"] #bottomtab{ background:rgba(12,12,16,.95) !important; border-top:1px solid var(--d-line) !important; }
html[data-cms-scheme="dark"] .bt-item{ color:var(--d-dim) !important; background:transparent !important; }
html[data-cms-scheme="dark"] .bt-item.active{ background:transparent !important; color:var(--d-gold) !important; }
html[data-cms-scheme="dark"] .bt-item.active .ic{ color:var(--d-gold) !important; }
html[data-cms-scheme="dark"] .bt-item.active::before{ background:linear-gradient(90deg,transparent,var(--d-gold),transparent) !important; }

/* ---- refinements 2 (VIP perks pills + Reward Center bar) ---- */
html[data-cms-scheme="dark"] .perks .perk{
  background:var(--d-surface-2) !important; color:var(--d-text-2) !important;
  border:1px solid var(--d-line) !important;
}
html[data-cms-scheme="dark"] .welfare-card .head{
  background:linear-gradient(120deg,#20130b,#14101a) !important;
  border-bottom:1px solid rgba(245,197,24,.22) !important;
}
html[data-cms-scheme="dark"] .welfare-card .head .lbl{ color:var(--d-gold-2) !important; }
html[data-cms-scheme="dark"] .welfare-card .head .right{ color:var(--d-gold-2) !important; }
/* the "Join VIP" card title row */
html[data-cms-scheme="dark"] .profile-vip-card .row span,
html[data-cms-scheme="dark"] .profile-vip-card .row{ color:var(--d-text) !important; }

/* ---- refinements 3: reward-center menu icons — no tile behind ---- */
html[data-cms-scheme="dark"] .welfare-card .grid .it{
  background:transparent !important; border:none !important; box-shadow:none !important; padding-top:.2rem !important;
}
html[data-cms-scheme="dark"] .welfare-card .grid .it .ic{ box-shadow:0 6px 16px -6px rgba(0,0,0,.55) !important; }

/* ---- refinements 4: remove the tile/box behind EVERY colored-icon shortcut ---- */
/* Modern browsers: any list item whose direct child is a colored icon = icon shortcut → no box */
html[data-cms-scheme="dark"] .item:has(> .ic),
html[data-cms-scheme="dark"] .item:has(> .ic-wrap),
html[data-cms-scheme="dark"] .it:has(> .ic){
  background:transparent !important; border:none !important; box-shadow:none !important;
}
/* explicit fallbacks for the known icon grids */
html[data-cms-scheme="dark"] .asset-card .row4 .item,
html[data-cms-scheme="dark"] .row4 .item,
html[data-cms-scheme="dark"] .action-row .item,
html[data-cms-scheme="dark"] .welfare-card .grid .it{
  background:transparent !important; border:none !important; box-shadow:none !important;
}

/* ---- refinements 5: More panel dark + items boxless ---- */
html[data-cms-scheme="dark"] #morePanel{ background:linear-gradient(180deg,var(--d-surface),#101015) !important; border:1px solid var(--d-line) !important; box-shadow:var(--d-shadow) !important; }
html[data-cms-scheme="dark"] .more-item{ background:transparent !important; border:none !important; box-shadow:none !important; color:var(--d-text) !important; }
html[data-cms-scheme="dark"] .more-item span{ color:var(--d-text) !important; }

/* keep More badges colorful (inline gradient wins) */
html[data-cms-scheme="dark"] .more-badge{ color:#fff !important; }

/* ---- refinements 6: header round buttons (settings / support) ---- */
html[data-cms-scheme="dark"] .header-actions .ic-btn,
html[data-cms-scheme="dark"] .ic-btn{
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(245,197,24,.28) !important; color:var(--d-gold-2) !important;
}
html[data-cms-scheme="dark"] .header-actions .ic-btn i,
html[data-cms-scheme="dark"] .ic-btn i{ color:var(--d-gold-2) !important; }
html[data-cms-scheme="dark"] .header-actions .ic-btn:hover{ background:rgba(245,197,24,.14) !important; }