/* ===========================================================================
   eBingo888 - brand theme tokens (multi-brand 4.9)
   Template folder for ebingo888.betrixlab.com. The brand uses the DEFAULT
   BetrixLab skin (shipped css/), so these tokens equal the default palette
   and override nothing visible. Restyle the brand by changing the tokens
   here (or in Brand Content > Theme & Copy) and adding
   html[data-brand="ebingo888"] rules below.
   =========================================================================== */

:root[data-brand="ebingo888"] {
  --brand-page-bg: #0a0f1e;
  --brand-header-bg: #0e1428;
  --brand-card-bg: #141b34;
  --brand-card-border: #232c52;
  --brand-primary: #ffd257;
  --brand-primary-deep: #ffb01f;
  --brand-accent: #ffd257;
  --brand-cta: #ffb01f;
  --brand-cta-hover: #ffd257;
  --brand-text: #eef2ff;
  --brand-text-muted: #8b93b5;
  --brand-display-font: inherit;
}

/* Header wordmark (the brand logo replaces the BetrixLab icon + wordmark pair) */
html[data-brand="ebingo888"] .cz-logo-word { height: 32px; width: auto; max-width: 230px; object-fit: contain; }
@media (max-width: 767px) {
  html[data-brand="ebingo888"] .cz-logo-word { height: 28px; max-width: 170px; }
}
@media (max-width: 380px) {
  html[data-brand="ebingo888"] .cz-logo-word { height: 24px; max-width: 140px; }
}

/* No PAGCOR seal / licence number on the login and registration pages (tagged .auth-pagcor) */
html[data-brand="ebingo888"] .auth-pagcor { display: none !important; }

/* ===========================================================================
   QuickPlay888 - CHINESE FESTIVE player theme (owner 2026-10-05)
   Imperial red + gold, like a lucky red-envelope poster: deep red page, red
   lacquer cards with gold hairlines, gold headings, gold CTAs with dark-red
   labels. Appended to asset/brands/quickplay888/theme.css by
   tools/slot-factory/gen-brand-assets.mjs (themeFile), so a logo rebuild
   keeps it. Loaded ONLY on html[data-brand="ebingo888"].

   Contrast (WCAG AA, checked): cream text #fff4dc >= 9.3:1 on every surface,
   soft-gold sub text #f6cf98 >= 6.9:1, gold #ffcc33 >= 6.8:1, placeholders
   #d6a18a >= 4.5:1, CTA label #4a0508 on gold 10.6:1, white on red CTA 5.9:1.
   =========================================================================== */

:root[data-brand="ebingo888"],
html[data-brand="ebingo888"] {
  --brand-page-bg: #3a0508;
  --brand-header-bg: #4c070b;
  --brand-card-bg: #6a0c12;
  --brand-card-border: rgba(255, 204, 51, 0.30);
  --brand-primary: #ffcc33;
  --brand-primary-deep: #f59e0b;
  --brand-accent: #ffcc33;
  --brand-cta: #ffcc33;
  --brand-cta-hover: #ffe08a;
  --brand-text: #fff4dc;
  --brand-text-muted: #f6cf98;
  --brand-display-font: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', Georgia, 'Times New Roman', serif;

  /* shared casino.css tokens: navy -> imperial red, blue accents -> gold / red */
  --cz-bg: #3a0508;
  --cz-bg2: #2a0306;
  --cz-card: #6a0c12;
  --cz-card2: #82121a;
  --cz-line: rgba(255, 204, 51, 0.18);
  --cz-line2: rgba(255, 204, 51, 0.32);
  --cz-text: #fff4dc;
  --cz-sub: #f6cf98;
  --cz-gold: #ffcc33;
  --cz-gold2: #f59e0b;
  --cz-blue: #c8151f;
  --cz-green: #ffe08a;
  --cz-red: #ffb4a2;
  --qp-ink: #4a0508;            /* dark-red label on gold */
  --qp-cream2: #f8dcc0;         /* was the lavender #c6d0ea secondary text */
  --qp-placeholder: #d6a18a;
  --qp-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffcc33' stroke-opacity='0.07' stroke-width='1.5'%3E%3Cpath d='M0 28h12V12h16v16h-8v-8h-4v12h12V4H4v24'/%3E%3Cpath d='M56 28H44v16H28V28h8v8h4V24H28v28h24V28'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Page background: deep red, warm gold glow, faint fret (hui wen) lattice ---- */
html[data-brand="ebingo888"] body.cz-body,
html[data-brand="ebingo888"] [data-theme="casino"],
html[data-brand="ebingo888"] body.cz-auth-page {
  background:
    radial-gradient(1100px 480px at 50% -12%, rgba(255, 196, 64, 0.22), transparent 62%),
    radial-gradient(800px 420px at 100% 0%, rgba(255, 90, 40, 0.16), transparent 58%),
    radial-gradient(700px 380px at 0% 100%, rgba(255, 196, 64, 0.08), transparent 60%),
    var(--qp-lattice),
    var(--cz-bg) !important;
  color: var(--cz-text);
}

/* ---- Top bar / bottom nav / footer: red lacquer with a gold rule ---- */
html[data-brand="ebingo888"] .cz-topbar {
  background: linear-gradient(180deg, rgba(110, 10, 16, 0.97), rgba(76, 7, 11, 0.97)) !important;
  border-bottom: 1px solid rgba(255, 204, 51, 0.55) !important;
  box-shadow: 0 1px 0 rgba(255, 204, 51, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
}
html[data-brand="ebingo888"] .cz-bottomnav {
  background: linear-gradient(0deg, rgba(58, 5, 8, 0.99), rgba(90, 8, 13, 0.99)) !important;
  border-top: 1px solid rgba(255, 204, 51, 0.55) !important;
}
html[data-brand="ebingo888"] .cz-footer {
  /* opaque: the shared footer is translucent, which turns brown over the light player theme */
  background: linear-gradient(180deg, #4c070b, #2a0306) !important;
  border-top: 1px solid rgba(255, 204, 51, 0.40) !important;
  color: var(--cz-sub) !important;
}
html[data-brand="ebingo888"] .cz-footer a { color: var(--cz-sub); }
html[data-brand="ebingo888"] .cz-footer a:hover { color: var(--cz-gold); }
html[data-brand="ebingo888"] .cz-logo-word { height: 34px; max-width: 250px; }

/* ---- Display type: gold serif headings ---- */
html[data-brand="ebingo888"] .cz-sec-title,
html[data-brand="ebingo888"] .cz-auth-title,
html[data-brand="ebingo888"] .cz-hero-title,
html[data-brand="ebingo888"] [data-theme="casino"] h1,
html[data-brand="ebingo888"] [data-theme="casino"] h2 {
  font-family: var(--brand-display-font);
  letter-spacing: 0.02em;
}
html[data-brand="ebingo888"] .cz-sec-title,
html[data-brand="ebingo888"] [data-theme="casino"] h1,
html[data-brand="ebingo888"] [data-theme="casino"] h2 { color: var(--cz-gold); }
html[data-brand="ebingo888"] .cz-sec-title i { color: var(--cz-gold); }

/* ---- Buttons: gold with dark-red label; "blue" buttons become festive red ---- */
html[data-brand="ebingo888"] .cz-btn,
html[data-brand="ebingo888"] .cz-chip.active,
html[data-brand="ebingo888"] .cz-cat-item.active,
html[data-brand="ebingo888"] .cz-wallet-add,
html[data-brand="ebingo888"] .cz-bottomnav a.cz-nav-main .cz-nav-fab {
  background: linear-gradient(180deg, #fff1b0 0%, #ffcc33 45%, #f59e0b 100%) !important;
  color: var(--qp-ink) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html[data-brand="ebingo888"] .cz-btn i,
html[data-brand="ebingo888"] .cz-chip.active i,
html[data-brand="ebingo888"] .cz-cat-item.active i { color: var(--qp-ink) !important; }
html[data-brand="ebingo888"] .cz-bottomnav a.cz-nav-main .cz-nav-fab { box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45), 0 0 0 5px var(--cz-bg) !important; }
html[data-brand="ebingo888"] .cz-btn-ghost {
  background: transparent !important;
  color: var(--cz-text) !important;
  border: 1px solid var(--cz-line2) !important;
  box-shadow: none !important;
}
html[data-brand="ebingo888"] .cz-btn-ghost i { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] .cz-btn-ghost:hover { background: rgba(255, 204, 51, 0.08) !important; }
html[data-brand="ebingo888"] .cz-btn-blue {
  background: linear-gradient(180deg, #e8323a 0%, #c8151f 60%, #9c0d15 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 204, 51, 0.55) !important;
  box-shadow: 0 6px 18px rgba(200, 21, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
html[data-brand="ebingo888"] .cz-btn-blue i { color: #ffffff !important; }

/* ---- Balance chip, icon buttons, chips, nav ---- */
html[data-brand="ebingo888"] .cz-balance {
  background: linear-gradient(180deg, rgba(255, 204, 51, 0.22), rgba(255, 204, 51, 0.08)) !important;
  border: 1px solid rgba(255, 204, 51, 0.55) !important;
}
html[data-brand="ebingo888"] .cz-balance b,
html[data-brand="ebingo888"] .cz-wallet-amt,
html[data-brand="ebingo888"] .cz-jstrip-amt { color: #ffe08a !important; }
html[data-brand="ebingo888"] .cz-iconbtn { background: var(--cz-card); border-color: var(--cz-line2); color: var(--cz-text); }
html[data-brand="ebingo888"] .cz-topnav a.active { background: rgba(255, 204, 51, 0.12); }

/* ---- Cards: red lacquer with a gold hairline ---- */
html[data-brand="ebingo888"] .cz-side-card,
html[data-brand="ebingo888"] .cz-jstrip,
html[data-brand="ebingo888"] .cz-features,
html[data-brand="ebingo888"] .cz-wins,
html[data-brand="ebingo888"] .cz-jackpot,
html[data-brand="ebingo888"] [data-theme="casino"] .theme-panel {
  border-color: rgba(255, 204, 51, 0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.10), 0 10px 26px rgba(0, 0, 0, 0.30);
}
html[data-brand="ebingo888"] .cz-gcard { border-color: rgba(255, 204, 51, 0.32); }
html[data-brand="ebingo888"] .cz-gcard-body { border-top-color: rgba(255, 204, 51, 0.24); }
html[data-brand="ebingo888"] .cz-gcard-tag { color: #ffd98a; }
html[data-brand="ebingo888"] .cz-gcard-play span { background: rgba(58, 5, 8, 0.92); color: #ffe08a; border-color: rgba(255, 204, 51, 0.65); }
html[data-brand="ebingo888"] .cz-gcard-fav { background: rgba(58, 5, 8, 0.6); color: var(--qp-cream2); }
html[data-brand="ebingo888"] .cz-gcard-badge { background: linear-gradient(180deg, #ff5a4f, #c8151f); color: #ffffff; }

/* ---- Hero banner: red-envelope panel ---- */
html[data-brand="ebingo888"] .cz-hero { border-color: rgba(255, 204, 51, 0.40); }
html[data-brand="ebingo888"] .cz-hero-slide::before {
  background:
    radial-gradient(560px 230px at 84% 100%, rgba(255, 204, 51, 0.22), transparent 62%),
    var(--qp-lattice),
    linear-gradient(100deg, #9c0d15 0%, #74090f 55%, #520609 100%) !important;
}
html[data-brand="ebingo888"] .cz-hero-sub,
html[data-brand="ebingo888"] .cz-wins-item .cz-wins-game,
html[data-brand="ebingo888"] .cz-field label { color: var(--qp-cream2) !important; }
html[data-brand="ebingo888"] .cz-hero-kicker { color: #ffe08a; background: rgba(255, 204, 51, 0.14); border-color: rgba(255, 204, 51, 0.45); }

/* ---- Inputs ---- */
html[data-brand="ebingo888"] .cz-input::placeholder,
html[data-brand="ebingo888"] [data-theme="casino"] input::placeholder,
html[data-brand="ebingo888"] [data-theme="casino"] textarea::placeholder,
html[data-brand="ebingo888"] body.cz-auth-page input::placeholder { color: var(--qp-placeholder) !important; }

/* ---- Player pages (theme-* + light Tailwind utilities) ---- */
html[data-brand="ebingo888"] [data-theme="casino"] .text-gray-700,
html[data-brand="ebingo888"] [data-theme="casino"] .text-gray-600,
html[data-brand="ebingo888"] body.cz-auth-page .text-gray-700,
html[data-brand="ebingo888"] body.cz-auth-page .text-gray-600 { color: var(--qp-cream2) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .text-indigo-500,
html[data-brand="ebingo888"] [data-theme="casino"] .text-blue-600,
html[data-brand="ebingo888"] [data-theme="casino"] .text-blue-700,
html[data-brand="ebingo888"] [data-theme="casino"] .text-blue-800 { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .bg-blue-100 { background: rgba(255, 204, 51, 0.14) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .bg-black { background-color: rgba(30, 2, 4, 0.75) !important; }

/* Wallet: the "selected" method / amount state was theme blue -> gold on red */
html[data-brand="ebingo888"] [data-theme="casino"] .bg-green-50,
html[data-brand="ebingo888"] [data-theme="casino"] .border-amber-500.bg-amber-50 {
  background: linear-gradient(180deg, rgba(255, 204, 51, 0.26), rgba(255, 204, 51, 0.10)) !important;
}
html[data-brand="ebingo888"] [data-theme="casino"] .border-green-500,
html[data-brand="ebingo888"] [data-theme="casino"] .border-amber-500.bg-amber-50 { border-color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .bg-green-50.text-green-700,
html[data-brand="ebingo888"] [data-theme="casino"] .border-green-500.text-green-700,
html[data-brand="ebingo888"] [data-theme="casino"] .border-amber-500.bg-amber-50,
html[data-brand="ebingo888"] [data-theme="casino"] .border-amber-500.bg-amber-50 *,
html[data-brand="ebingo888"] [data-theme="casino"] .border-amber-500.bg-amber-50.text-amber-700 { color: #fff4dc !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .deposit-amt-btn:hover,
html[data-brand="ebingo888"] [data-theme="casino"] .hover\:bg-green-50:hover {
  background: rgba(255, 204, 51, 0.16) !important;
  border-color: var(--cz-gold) !important;
  color: #fff4dc !important;
}
html[data-brand="ebingo888"] [data-theme="casino"] .focus\:ring-green-500:focus { --tw-ring-color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] input[type="checkbox"] { accent-color: var(--cz-gold); }

/* Status colors that must stay readable on red (no red-on-red, no green-on-red) */
html[data-brand="ebingo888"] [data-theme="casino"] .bg-red-100,
html[data-brand="ebingo888"] [data-theme="casino"] .bg-red-50,
html[data-brand="ebingo888"] body.cz-auth-page .bg-red-50 { background: rgba(255, 180, 162, 0.14) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .text-red-800,
html[data-brand="ebingo888"] [data-theme="casino"] .text-red-700,
html[data-brand="ebingo888"] [data-theme="casino"] .text-red-600,
html[data-brand="ebingo888"] [data-theme="casino"] .text-red-500,
html[data-brand="ebingo888"] body.cz-auth-page .text-red-700,
html[data-brand="ebingo888"] body.cz-auth-page .text-red-800 { color: var(--cz-red) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .border-red-200,
html[data-brand="ebingo888"] [data-theme="casino"] .border-red-300 { border-color: rgba(255, 180, 162, 0.45) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .bg-green-100 { background: rgba(255, 224, 138, 0.16) !important; }
html[data-brand="ebingo888"] [data-theme="casino"] .text-green-800,
html[data-brand="ebingo888"] [data-theme="casino"] .text-green-700,
html[data-brand="ebingo888"] [data-theme="casino"] .text-green-600,
html[data-brand="ebingo888"] body.cz-auth-page .text-green-700,
html[data-brand="ebingo888"] body.cz-auth-page .text-green-800 { color: #ffe08a !important; }

/* ---- Auth / login shell ---- */
html[data-brand="ebingo888"] .cz-auth-card,
html[data-brand="ebingo888"] body.cz-auth-page .bg-white.rounded-2xl,
html[data-brand="ebingo888"] body.cz-auth-page .auth-card {
  background: linear-gradient(180deg, #82121a 0%, #5a0a0f 100%) !important;
  border: 1.5px solid rgba(255, 204, 51, 0.65) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 196, 64, 0.14) !important;
}
html[data-brand="ebingo888"] body.cz-auth-page .drop-zone { border-color: rgba(255, 204, 51, 0.45) !important; background: rgba(42, 3, 6, 0.6) !important; }

/* ---- Footer links (inline lavender in layout.js) ---- */
html[data-brand="ebingo888"] .cz-footer a[href$=".html"] { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"] .cz-footer a[href$=".html"]:hover { color: var(--cz-gold) !important; }

/* ---- Disabled / read-only inputs: still readable ---- */
html[data-brand="ebingo888"] [data-theme="casino"] input:disabled,
html[data-brand="ebingo888"] [data-theme="casino"] input[readonly],
html[data-brand="ebingo888"] [data-theme="casino"] select:disabled {
  background: #4c070b !important; color: var(--cz-sub) !important; opacity: 1 !important;
  border-color: rgba(255, 204, 51, 0.22) !important;
}

/* ---- Page-specific panels that hardcode the navy / lavender palette ----
   Skipped when the player switched the header toggle to the LIGHT theme (those pages
   then use their own light styles); embedded pages (?embed=1) have no toggle and are themed. */
/* shared red-lacquer panel */
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-tab,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tab,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-gate,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-card,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-hero,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .lg-card,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-card {
  background:
    radial-gradient(80% 70% at 50% -20%, rgba(255, 204, 51, 0.12), transparent 55%),
    linear-gradient(160deg, #7a0e15 0%, #5a0a0f 100%) !important;
  border-color: rgba(255, 204, 51, 0.30) !important;
  color: var(--cz-text);
}
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-card::after,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-side::after { background: linear-gradient(90deg, transparent 55%, #5a0a0f 100%) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-tab,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tab { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-tab i,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tab i { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-tab:hover,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tab:hover { border-color: rgba(255, 204, 51, 0.55) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-tab.wt-active,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tab.on {
  color: #ffe08a !important;
  border-color: rgba(255, 204, 51, 0.75) !important;
  background: linear-gradient(160deg, rgba(255, 204, 51, 0.22), rgba(255, 204, 51, 0.04)), linear-gradient(160deg, #8f121a, #640b11) !important;
  box-shadow: 0 6px 16px rgba(255, 204, 51, 0.16) !important;
}
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-tab.wt-active i { color: var(--qp-ink) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tab.on i { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-tabs { background: linear-gradient(180deg, #3a0508 82%, rgba(58, 5, 8, 0)) !important; }

/* wallet quick-amount pills, pager, request filters, type chips */
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-amt-btn {
  color: var(--cz-text) !important; border-color: rgba(255, 204, 51, 0.35) !important;
  background: linear-gradient(180deg, #8f121a, #640b11) !important;
  box-shadow: 0 2px 0 #2a0306, 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-amt-btn:hover { color: #ffe08a !important; border-color: var(--cz-gold) !important; }
/* selected amount / payment method: solid gold, dark-red label (must stay obvious) */
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-amt-btn.sel {
  color: var(--qp-ink) !important; border-color: transparent !important;
  background: linear-gradient(180deg, #fff1b0 0%, #ffcc33 50%, #f59e0b 100%) !important;
  box-shadow: 0 2px 0 #a86a00, 0 4px 12px rgba(255, 204, 51, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* mobile wallet balance card (hardcoded navy in casino.css) */
html[data-brand="ebingo888"] .cz-mob-balance {
  background: radial-gradient(80% 90% at 100% 0%, rgba(255, 204, 51, 0.16), transparent 60%), linear-gradient(160deg, #82121a, #5a0a0f) !important;
  border-color: rgba(255, 204, 51, 0.45) !important;
}
html[data-brand="ebingo888"] .cz-mob-balance .mb-amt { color: #ffe08a !important; }
html[data-brand="ebingo888"] .cz-mob-balance .mb-add { background: linear-gradient(180deg, #fff1b0 0%, #ffcc33 50%, #f59e0b 100%) !important; color: var(--qp-ink) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-pg,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .myreq-status-tab { background: rgba(255, 204, 51, 0.08) !important; border-color: rgba(255, 204, 51, 0.22) !important; color: var(--cz-sub) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-pg.on { background: linear-gradient(180deg, #ffe08a, #ffcc33) !important; color: var(--qp-ink) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .myreq-status-tab.on { background: rgba(255, 204, 51, 0.18) !important; color: #ffe08a !important; border-color: rgba(255, 204, 51, 0.55) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-t-indigo,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-t-purple,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .wt-t-gray { background: rgba(255, 204, 51, 0.14) !important; color: #ffe08a !important; }

/* VIP / promotions / rewards text that was lavender or blue-grey */
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-sub,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-turn,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-perk,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-table th,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-sub,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-hist th,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-gate p,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-gate-note,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-loading,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-card p,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-term,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-hero-txt p,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-banner-txt p,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .lg-stat { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-next,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-table,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-hist { color: var(--qp-cream2) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .rwc-gate h3 { color: var(--cz-text) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-table th { border-bottom-color: rgba(255, 204, 51, 0.30) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-table td,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-hist td,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-hist th { border-bottom-color: rgba(255, 204, 51, 0.16) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-login-note,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-login-note { background: rgba(42, 3, 6, 0.6) !important; border-color: rgba(255, 204, 51, 0.35) !important; color: var(--cz-sub) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .vp-progress-track,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .lg-ms-track,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-progress-track { background: #2a0306 !important; border-color: rgba(255, 204, 51, 0.30) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .lg-box,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-term { background: rgba(42, 3, 6, 0.55) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-status.COMPLETED { background: rgba(255, 204, 51, 0.16) !important; color: #ffe08a !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-status.ACTIVE { background: rgba(255, 224, 138, 0.16) !important; color: #ffe08a !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-status.FORFEITED,
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-status.EXPIRED { background: rgba(0, 0, 0, 0.3) !important; color: var(--cz-red) !important; }
html[data-brand="ebingo888"]:not(:has([data-theme="light"])) .pr-forfeit { border-color: rgba(255, 180, 162, 0.5) !important; color: var(--cz-red) !important; }

/* ---- login.html (own inline navy skin; scoped by its .card-inner so backoffice pages are untouched) ---- */
html[data-brand="ebingo888"] body:has(.card-inner) {
  background:
    radial-gradient(1100px 480px at 50% -12%, rgba(255, 196, 64, 0.22), transparent 62%),
    radial-gradient(800px 420px at 100% 0%, rgba(255, 90, 40, 0.16), transparent 58%),
    var(--qp-lattice),
    #3a0508 !important;
  background-attachment: fixed !important;
  color: var(--cz-text);
}
html[data-brand="ebingo888"] .card-inner { background: linear-gradient(180deg, #82121a 0%, #5a0a0f 100%) !important; }
html[data-brand="ebingo888"] .card-inner .text-gray-600,
html[data-brand="ebingo888"] .card-inner .text-gray-500,
html[data-brand="ebingo888"] .otp-countdown,
html[data-brand="ebingo888"] .lg-feat .s { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"] .card-inner .border-gray-200 { border-color: rgba(255, 204, 51, 0.25) !important; }
html[data-brand="ebingo888"] .card-inner input[type="text"],
html[data-brand="ebingo888"] .card-inner input[type="password"],
html[data-brand="ebingo888"] .card-inner input[type="number"],
html[data-brand="ebingo888"] .otp-inputs input { background: #2a0306 !important; border-color: rgba(255, 204, 51, 0.30) !important; color: var(--cz-text) !important; }
html[data-brand="ebingo888"] .card-inner input::placeholder { color: var(--qp-placeholder) !important; }
html[data-brand="ebingo888"] .input-icon { color: var(--qp-placeholder) !important; }
html[data-brand="ebingo888"] .btn-sign-in { color: var(--qp-ink) !important; }
html[data-brand="ebingo888"] .btn-register,
html[data-brand="ebingo888"] body.cz-auth-page button[type="submit"].btn-register {
  background: linear-gradient(180deg, #e8323a 0%, #c8151f 55%, #9c0d15 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 0 #5a0609, 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  outline: 1px solid rgba(255, 204, 51, 0.55);
}
html[data-brand="ebingo888"] .lg-feat {
  background: linear-gradient(160deg, #7a0e15, #5a0a0f) !important;
  border-color: rgba(255, 204, 51, 0.28) !important;
}
html[data-brand="ebingo888"] .lg-feat .ic { background: rgba(255, 204, 51, 0.16) !important; color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] .lg-feat .t { color: var(--cz-text) !important; }
html[data-brand="ebingo888"] .lg-license { color: var(--qp-cream2) !important; }

/* links / text buttons in indigo or blue (Terms & Conditions etc.) */
html[data-brand="ebingo888"] [data-theme="casino"] .text-indigo-400,
html[data-brand="ebingo888"] [data-theme="casino"] .text-indigo-300,
html[data-brand="ebingo888"] [data-theme="casino"] .hover\:text-indigo-300:hover,
html[data-brand="ebingo888"] [data-theme="casino"] .text-blue-400,
html[data-brand="ebingo888"] [data-theme="casino"] .text-blue-500 { color: #ffe08a !important; }
/* inline lavender footnotes (vip.html etc.) */
html[data-brand="ebingo888"] [data-theme="casino"] [style*="color:#8b93b5"],
html[data-brand="ebingo888"] [data-theme="casino"] [style*="color: #8b93b5"],
html[data-brand="ebingo888"] [data-theme="casino"] [style*="color:#97a3c2"],
html[data-brand="ebingo888"] [data-theme="casino"] [style*="color:#a5b4fc"] { color: var(--cz-sub) !important; }

/* ---- Info pages (how-to, FAQ, terms, privacy, site policy): red lacquer cards instead of the default navy ---- */
html[data-brand="ebingo888"] .lg-doc,
html[data-brand="ebingo888"] .ht-card,
html[data-brand="ebingo888"] .fq-item {
  background: linear-gradient(160deg, #7a0e15, #5a0a0f) !important;
  border-color: rgba(255, 204, 51, 0.28) !important;
  color: var(--qp-cream2) !important;
}
html[data-brand="ebingo888"] .lg-doc-title,
html[data-brand="ebingo888"] .ht-title,
html[data-brand="ebingo888"] .fq-title { color: var(--cz-gold) !important; font-family: var(--brand-display-font); }
html[data-brand="ebingo888"] .lg-doc-sub,
html[data-brand="ebingo888"] .ht-sub,
html[data-brand="ebingo888"] .fq-sub,
html[data-brand="ebingo888"] .lg-doc-links,
html[data-brand="ebingo888"] .ht-links,
html[data-brand="ebingo888"] .fq-links { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"] .lg-doc h3,
html[data-brand="ebingo888"] .ht-card h3,
html[data-brand="ebingo888"] .fq-cat { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] .ht-card h3 .num { background: var(--cz-gold) !important; color: var(--qp-ink) !important; }
html[data-brand="ebingo888"] .ht-step,
html[data-brand="ebingo888"] .fq-a { color: var(--qp-cream2) !important; }
html[data-brand="ebingo888"] .ht-step .dot { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] .ht-step b,
html[data-brand="ebingo888"] .fq-q,
html[data-brand="ebingo888"] .lg-doc strong { color: var(--cz-text) !important; }
html[data-brand="ebingo888"] .fq-q:hover { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] .fq-q i { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"] .ht-tip {
  background: rgba(42, 3, 6, 0.55) !important;
  border-color: rgba(255, 204, 51, 0.32) !important;
  color: var(--qp-cream2) !important;
}
html[data-brand="ebingo888"] .ht-tip b { color: #ffe08a !important; }
html[data-brand="ebingo888"] .lg-doc .border-t { border-top-color: rgba(255, 204, 51, 0.25) !important; }
html[data-brand="ebingo888"] .lg-doc .legal-contact-box,
html[data-brand="ebingo888"] .lg-doc [class*="bg-gray-50"],
html[data-brand="ebingo888"] .lg-doc [class*="bg-gray-800"] {
  background: rgba(42, 3, 6, 0.6) !important;
  border-color: rgba(255, 204, 51, 0.32) !important;
  color: var(--qp-cream2) !important;
}
html[data-brand="ebingo888"] .lg-doc a,
html[data-brand="ebingo888"] .ht-step a,
html[data-brand="ebingo888"] .ht-sub a,
html[data-brand="ebingo888"] .fq-sub a,
html[data-brand="ebingo888"] .fq-a a,
html[data-brand="ebingo888"] .lg-doc-sub a,
html[data-brand="ebingo888"] .lg-doc-links a,
html[data-brand="ebingo888"] .ht-links a,
html[data-brand="ebingo888"] .fq-links a { color: #ffe08a !important; }

/* ---- Home page age / eligibility gate (index.html): red lacquer panel ---- */
html[data-brand="ebingo888"] .gate-panel {
  background: linear-gradient(180deg, rgba(130, 18, 26, 0.95), rgba(74, 7, 11, 0.95)) !important;
  border: 1.5px solid rgba(255, 204, 51, 0.55) !important;
}
html[data-brand="ebingo888"] .gate-welcome,
html[data-brand="ebingo888"] .gate-list li,
html[data-brand="ebingo888"] .gate-addict,
html[data-brand="ebingo888"] .gate-links { color: var(--qp-cream2) !important; }
html[data-brand="ebingo888"] .gate-intro,
html[data-brand="ebingo888"] .gate-note { color: var(--cz-text) !important; }
html[data-brand="ebingo888"] .gate-links a { color: #ffe08a !important; }

/* ---- Auth card primary buttons (forgot-password "Send OTP" etc.): gold like every other CTA ---- */
html[data-brand="ebingo888"] body.cz-auth-page .auth-card .bg-indigo-600 {
  background: linear-gradient(180deg, #ffe08a, #ffcc33 55%, #f59e0b) !important;
  color: var(--qp-ink) !important;
}

/* ---- Support chat widget (js/support-chat.js): red lacquer panel, gold accents ---- */
html[data-brand="ebingo888"] #btxSupportPanel {
  background: linear-gradient(180deg, #5a0a0f, #3a0508) !important;
  border-color: rgba(255, 204, 51, 0.35) !important;
  color: var(--cz-text) !important;
}
html[data-brand="ebingo888"] #btxSupportHead {
  background: linear-gradient(160deg, #82121a, #6a0c12) !important;
  border-bottom-color: rgba(255, 204, 51, 0.32) !important;
}
html[data-brand="ebingo888"] #btxSupportHead h3 { color: var(--cz-gold) !important; font-family: var(--brand-display-font); }
html[data-brand="ebingo888"] #btxSupportHead .st,
html[data-brand="ebingo888"] .btx-msg.system,
html[data-brand="ebingo888"] #btxSupportFileHint { color: var(--cz-sub) !important; }
html[data-brand="ebingo888"] #btxSupportClose,
html[data-brand="ebingo888"] #btxSupportAttach { color: var(--cz-gold) !important; }
html[data-brand="ebingo888"] .btx-msg.player { background: linear-gradient(180deg, #e8323a, #c8151f) !important; color: #ffffff !important; }
html[data-brand="ebingo888"] .btx-msg.bot,
html[data-brand="ebingo888"] .btx-msg.staff {
  background: #6a0c12 !important;
  border-color: rgba(255, 204, 51, 0.28) !important;
  color: var(--cz-text) !important;
}
html[data-brand="ebingo888"] .btx-att a { color: #ffe08a !important; }
html[data-brand="ebingo888"] #btxSupportActions,
html[data-brand="ebingo888"] #btxSupportInputRow { border-top-color: rgba(255, 204, 51, 0.25) !important; }
html[data-brand="ebingo888"] #btxEscalateBtn { border-color: var(--cz-gold) !important; color: #ffe08a !important; }
html[data-brand="ebingo888"] #btxSupportInput {
  background: #2a0306 !important;
  border-color: rgba(255, 204, 51, 0.30) !important;
  color: var(--cz-text) !important;
}
html[data-brand="ebingo888"] #btxSupportInput::placeholder { color: var(--qp-placeholder) !important; }
html[data-brand="ebingo888"] #btxSupportSend,
html[data-brand="ebingo888"] #btxSupportBubble {
  background: linear-gradient(180deg, #ffe08a, #ffcc33 55%, #f59e0b) !important;
  color: var(--qp-ink) !important;
}

/* ---- Page loader ---- */
/* --btx-loader-bg: layout.js remembers it per device so the inline loaders paint it from the first frame */
html[data-brand="ebingo888"] { --btx-loader-bg: #3a0508; }
html[data-brand="ebingo888"] #page-loader,
html[data-brand="ebingo888"] #loading-screen,
html[data-brand="ebingo888"] .cz-loader-dark { background: #3a0508 !important; }

/* ---- eBingo888 owner logo (stacked, ~1.7:1): taller header slot ---- */
html[data-brand="ebingo888"] .cz-logo-word { height: 52px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 767px) {
  html[data-brand="ebingo888"] .cz-logo-word { height: 46px; max-width: 160px; }
}
@media (max-width: 380px) {
  html[data-brand="ebingo888"] .cz-logo-word { height: 40px; max-width: 140px; }
}

/* ---- Preloader (every page + game launch): thin faint circle around the card icon with one
   brighter arc (fading tail) sweeping round it. A true circle sized from the icon width. ---- */
html[data-brand="ebingo888"] .btxp-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 232, 170, 0) 0deg 255deg, rgba(255, 236, 180, 1) 350deg, rgba(255, 232, 170, 0) 351deg);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 150, 0.22);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: eb-loader-spin 1.4s linear infinite;
  pointer-events: none;
}
@keyframes eb-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-brand="ebingo888"] .btxp-icon::after { animation: none; }
}