/* ============================================================
   BETRIXLAB CASINO THEME  (css/casino.css)
   Dark casino design system used by:
     - index.html (public landing)
     - login.html / forgot-password.html (auth shell)
     - player pages via layout.js player branch (data-theme="casino")
   Reference style: crazywingo.ph (clean dark lobby, gold CTAs,
   scrollable category chips, mobile bottom nav).
   Admin/staff/agent pages DO NOT load this file.
   ============================================================ */

:root {
    --cz-bg: #0a0f1e;
    --cz-bg2: #0d1528;
    --cz-card: #141c33;
    --cz-card2: #1b2542;
    --cz-line: rgba(255, 255, 255, 0.08);
    --cz-line2: rgba(255, 255, 255, 0.14);
    --cz-text: #eef2ff;
    --cz-sub: #97a3c2;
    --cz-gold: #ffb01f;
    --cz-gold2: #ff7a00;
    --cz-blue: #2f6bff;
    --cz-green: #22c55e;
    --cz-red: #ef4444;
    --cz-radius: 14px;
    --cz-topbar-h: 60px;
    --cz-bottomnav-h: 62px;
}

/* ---------- Base shell ---------- */
.cz-body {
    margin: 0;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(47, 107, 255, 0.18), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, rgba(255, 122, 0, 0.10), transparent 55%),
        var(--cz-bg);
    color: var(--cz-text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
/* rewards.html ?embed=1 iframes: 100vh tracks the iframe, so auto-height +24px loops forever */
html:has(body.embed),
body.embed.cz-body {
    min-height: 0 !important;
    height: auto !important;
}

.cz-wrap { max-width: 1200px; margin: 0 auto; padding: 0 14px; }
@media (min-width: 1024px) { .cz-wrap { padding: 0 24px; } }

/* ---------- Top bar ---------- */
.cz-topbar {
    position: sticky; top: 0; z-index: 300;
    height: var(--cz-topbar-h);
    display: flex; align-items: center;
    /* solid-ish bar instead of backdrop-filter: blur() - the blur re-rendered every
       frame while the wins ticker animates, pinning the GPU (esp. Intel iGPU). */
    background: rgba(10, 15, 30, 0.94);
    border-bottom: 1px solid var(--cz-line);
}
.cz-topbar-inner {
    width: 100%; max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 0 14px;
}

/* responsive helpers: guest header collapses Login+Register into one PLAY NOW on phones */
@media (max-width: 767px) { .cz-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .cz-only-mobile { display: none !important; } }

.cz-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.cz-logo-icon { width: 34px; height: auto; }
.cz-logo-word { height: 26px; width: auto; }
/* app pages: content sits inside the shell <main> which already provides the
   14px side padding; the inner .cz-shell must not add its own or the sidebar
   drifts 14px right of the topbar logo */
main .cz-shell { padding-left: 0; padding-right: 0; }
@media (max-width: 380px) { .cz-logo-word { height: 22px; } }
.cz-logo-name {
    font-size: 20px; font-weight: 900; letter-spacing: 0.02em; line-height: 1;
    background: linear-gradient(180deg, #ffe9a8 0%, var(--cz-gold) 45%, var(--cz-gold2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-transform: uppercase;
}
.cz-logo-name small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.34em; color: var(--cz-sub); -webkit-text-fill-color: var(--cz-sub); }

/* ---------- Buttons ---------- */
.cz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
    font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
    padding: 10px 20px; border-radius: 12px; line-height: 1;
    color: #241300;
    background: linear-gradient(180deg, #ffd257 0%, var(--cz-gold) 45%, var(--cz-gold2) 100%);
    box-shadow: 0 6px 18px rgba(255, 138, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.cz-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cz-btn:active { transform: translateY(0) scale(0.98); }
.cz-btn:disabled { opacity: 0.55; transform: none; cursor: not-allowed; }

.cz-btn-ghost {
    background: transparent; color: var(--cz-text);
    border: 1px solid var(--cz-line2); box-shadow: none;
}
.cz-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); filter: none; }

.cz-btn-blue {
    background: linear-gradient(180deg, #5f8dff 0%, var(--cz-blue) 60%, #1e4fd6 100%);
    color: #fff; box-shadow: 0 6px 18px rgba(47, 107, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cz-btn-sm { padding: 8px 14px; font-size: 13px; }
.cz-btn-lg { padding: 14px 30px; font-size: 16px; }

/* ---------- Balance chip (player topbar) ---------- */
.cz-balance {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, rgba(47, 107, 255, 0.25), rgba(47, 107, 255, 0.12));
    border: 1px solid rgba(95, 141, 255, 0.45);
    border-radius: 999px; padding: 7px 14px 7px 8px;
    text-decoration: none; color: var(--cz-text);
}
.cz-balance img { width: 22px; height: auto; }
.cz-balance b { font-size: 15px; font-weight: 800; color: #ffd257; }

/* Round icon button (theme toggle / user) */
.cz-iconbtn {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cz-card); color: var(--cz-text);
    border: 1px solid var(--cz-line2); cursor: pointer;
    transition: background 0.15s ease;
}
.cz-iconbtn:hover { background: var(--cz-card2); }

/* ---------- Category chip bar ---------- */
.cz-catbar {
    display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.cz-catbar::-webkit-scrollbar { display: none; }
.cz-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px; cursor: pointer; user-select: none;
    background: var(--cz-card); border: 1px solid var(--cz-line);
    color: var(--cz-sub); font-size: 13px; font-weight: 700; text-decoration: none;
    transition: all 0.15s ease;
}
.cz-chip:hover { color: var(--cz-text); border-color: var(--cz-line2); }
.cz-chip.active {
    color: #241300; border-color: transparent;
    background: linear-gradient(180deg, #ffd257, var(--cz-gold) 55%, var(--cz-gold2));
    box-shadow: 0 4px 14px rgba(255, 138, 20, 0.35);
}
.cz-chip i { font-size: 13px; }

/* ---------- Hero banner / carousel ---------- */
.cz-hero {
    position: relative; overflow: hidden;
    border-radius: var(--cz-radius);
    border: 1px solid var(--cz-line);
    margin-top: 6px;
}
.cz-hero-track { display: flex; transition: transform 0.6s cubic-bezier(.22,.8,.26,1); }
.cz-hero-slide {
    flex: 0 0 100%; position: relative; min-height: 170px;
    display: flex; align-items: center;
    padding: 22px 22px; box-sizing: border-box;
}
@media (min-width: 768px) { .cz-hero-slide { min-height: 260px; padding: 34px 44px; } }
/* One consistent brand panel on every slide (royal navy + a single gold
   glow on the art side) - matches the badge, no per-slide color themes. */
.cz-hero-slide::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(560px 230px at 84% 100%, rgba(255, 176, 31, 0.13), transparent 62%),
        linear-gradient(100deg, #13224a 0%, #0d1731 55%, #0a1124 100%);
}
.cz-hero-art {
    position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
    height: 125%; max-width: 62%; object-fit: contain; object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    opacity: 0.9; pointer-events: none;
}
.cz-hero-copy { position: relative; z-index: 2; max-width: 62%; }
.cz-hero-kicker {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--cz-gold);
    background: rgba(255, 176, 31, 0.12); border: 1px solid rgba(255, 176, 31, 0.35);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.cz-hero-title {
    font-size: 24px; font-weight: 900; line-height: 1.12; margin: 0 0 8px;
    text-transform: uppercase; letter-spacing: 0.01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.cz-hero-title em {
    font-style: normal;
    background: linear-gradient(180deg, #ffe9a8 0%, var(--cz-gold) 45%, var(--cz-gold2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cz-hero-sub { font-size: 13px; color: #c6d0ea; margin: 0 0 16px; }
@media (min-width: 768px) {
    .cz-hero-title { font-size: 40px; }
    .cz-hero-sub { font-size: 15px; }
}
.cz-hero-dots {
    position: absolute; left: 0; right: 0; bottom: 10px;
    display: flex; justify-content: center; gap: 6px; z-index: 3;
}
.cz-hero-dots span {
    width: 8px; height: 8px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.28); transition: all 0.2s ease;
}
.cz-hero-dots span.active { width: 22px; background: var(--cz-gold); }

/* ---------- Top wins ticker ---------- */
.cz-wins {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 4px; padding: 9px 12px;
    background: var(--cz-card); border: 1px solid var(--cz-line);
    border-radius: 999px; overflow: hidden;
}
.cz-wins-label {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cz-gold);
}
.cz-wins-viewport { flex: 1; overflow: hidden; contain: paint; }
.cz-wins-track { display: inline-flex; gap: 26px; white-space: nowrap; animation: czMarquee 36s linear infinite; will-change: transform; }
.cz-wins:hover .cz-wins-track { animation-play-state: paused; }
/* pause the ticker when it's off-screen or the tab is hidden (toggled by JS) so
   the compositor/GPU idles instead of animating at 60fps forever */
.cz-wins.cz-paused .cz-wins-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cz-wins-track { animation: none; } }
.cz-wins-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--cz-sub); }
.cz-wins-item b { color: var(--cz-green); font-weight: 800; }
.cz-wins-item .cz-wins-game { color: #c6d0ea; }
@keyframes czMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections + game grid ---------- */
.cz-section { margin: 22px 0 8px; }
.cz-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cz-sec-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 900; letter-spacing: 0.01em; }
.cz-sec-title i { color: var(--cz-gold); }
.cz-sec-more { font-size: 12px; font-weight: 700; color: var(--cz-sub); text-decoration: none; }
.cz-sec-more:hover { color: var(--cz-gold); }

.cz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px)  { .cz-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1024px) { .cz-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1280px) { .cz-grid.cz-grid-6 { grid-template-columns: repeat(6, 1fr); } }

/* Poster-style tiles: no box, no crop - the game art IS the card */
.cz-gcard {
    position: relative; cursor: pointer; overflow: hidden;
    border-radius: var(--cz-radius);
    transition: transform 0.18s ease, filter 0.18s ease;
}
.cz-gcard:hover {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 14px 26px rgba(255, 140, 20, 0.22));
}
.cz-gcard-img { aspect-ratio: 4 / 3; }
.cz-gcard-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.25s ease; }
.cz-gcard:hover .cz-gcard-img img { transform: scale(1.04); }
.cz-gcard-body { padding: 8px 6px 10px; text-align: center; }
.cz-gcard-name { font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-gcard-tag {
    display: inline-block; margin-top: 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: #d9b054;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(255, 176, 31, 0.08);
    border: 1px solid rgba(255, 176, 31, 0.22);
}
.cz-gcard-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-size: 10px; font-weight: 900; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
    background: linear-gradient(180deg, #ff6b6b, #d92626); color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.cz-gcard-badge.gold { background: linear-gradient(180deg, #ffd257, var(--cz-gold2)); color: #241300; }
.cz-gcard-play {
    /* covers only the art area (same 4:3 box as .cz-gcard-img), not the title.
       No color wash over the artwork - just the PLAY pill (thumbnail-design). */
    position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 4 / 3; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--cz-radius);
    background: none;
    opacity: 0; transition: opacity 0.18s ease;
}
.cz-gcard:hover .cz-gcard-play { opacity: 1; }
.cz-gcard-play span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 12px;
    font-size: 14px; font-weight: 900; color: #ffd257;
    background: rgba(10, 15, 30, 0.92);
    border: 1px solid rgba(255, 210, 87, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
@media (hover: none) { .cz-gcard-play { display: none; } }

/* ---------- Jackpot strip ---------- */
.cz-jackpot {
    position: relative; overflow: hidden; text-align: center;
    border-radius: var(--cz-radius); border: 1px solid rgba(255, 176, 31, 0.35);
    background:
        radial-gradient(600px 200px at 50% 0%, rgba(255, 176, 31, 0.16), transparent 70%),
        var(--cz-card);
    padding: 26px 16px 30px; margin: 24px 0;
}
.cz-jackpot-label { font-size: 12px; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cz-gold); }
.cz-jackpot-amount {
    font-size: 40px; font-weight: 900; line-height: 1.1; margin: 8px 0 4px;
    background: linear-gradient(180deg, #fff6d8 0%, #ffd257 40%, var(--cz-gold2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 18px rgba(255, 156, 31, 0.35));
}
@media (min-width: 768px) { .cz-jackpot-amount { font-size: 58px; } }
.cz-jackpot-sub { font-size: 12.5px; color: var(--cz-sub); }

/* ---------- Auth card (login / forgot / register shells) ---------- */
.cz-auth-wrap {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 24px 14px 40px;
    box-sizing: border-box;
}
.cz-auth-card {
    width: 100%; max-width: 420px;
    background: linear-gradient(180deg, var(--cz-card2) 0%, var(--cz-card) 100%);
    border: 1px solid var(--cz-line2);
    border-radius: 20px; padding: 28px 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cz-auth-title { font-size: 22px; font-weight: 900; text-align: center; margin: 0 0 4px; }
.cz-auth-sub { font-size: 13px; color: var(--cz-sub); text-align: center; margin: 0 0 20px; }

.cz-field { margin-bottom: 15px; }
.cz-field label { display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 6px; color: #c6d0ea; }
.cz-input, [data-theme="casino"] .theme-input {
    width: 100%; box-sizing: border-box;
    background: var(--cz-bg2) !important;
    border: 1px solid var(--cz-line2) !important;
    color: var(--cz-text) !important;
    border-radius: 12px; padding: 11px 13px; font-size: 14px; outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cz-input:focus, [data-theme="casino"] .theme-input:focus {
    border-color: var(--cz-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 176, 31, 0.18);
}
.cz-input::placeholder { color: #5c6a8e; }

/* ---------- Mobile bottom nav ---------- */
.cz-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 320;
    height: calc(var(--cz-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; align-items: stretch; justify-content: space-around;
    background: rgba(10, 15, 30, 0.98);   /* was blur(14px) backdrop - dropped for GPU (already near-opaque) */
    border-top: 1px solid var(--cz-line2);
}
.cz-bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: var(--cz-sub); font-size: 10.5px; font-weight: 700;
}
.cz-bottomnav a i, .cz-bottomnav a svg.svg-inline--fa { font-size: 18px; }
.cz-bottomnav a.active { color: var(--cz-gold); }
.cz-bottomnav a.cz-nav-main { position: relative; }
.cz-bottomnav a.cz-nav-main .cz-nav-fab {
    width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #ffd257, var(--cz-gold) 55%, var(--cz-gold2));
    color: #241300; font-size: 19px;
    box-shadow: 0 8px 20px rgba(255, 138, 20, 0.45), 0 0 0 5px var(--cz-bg);
}
@media (min-width: 1024px) { .cz-bottomnav { display: none; } }
.cz-has-bottomnav { padding-bottom: calc(var(--cz-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
@media (min-width: 1024px) { .cz-has-bottomnav { padding-bottom: 0; } }

/* ---------- Footer ---------- */
.cz-footer {
    margin-top: 34px; padding: 28px 0 34px;
    border-top: 1px solid var(--cz-line);
    background: rgba(8, 12, 24, 0.6);
    text-align: center; color: var(--cz-sub); font-size: 12px;
}
.cz-footer .cz-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.cz-footer .cz-social a {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cz-card); color: var(--cz-text);
    border: 1px solid var(--cz-line2); text-decoration: none; font-size: 15px;
    transition: all 0.15s ease;
}
.cz-footer .cz-social a:hover { color: var(--cz-gold); border-color: rgba(255, 176, 31, 0.5); }
.cz-footer-warning { max-width: 560px; margin: 10px auto 0; padding: 10px; line-height: 1.55; }
.cz-footer-warning strong { color: var(--cz-red); }

/* ============================================================
   [data-theme="casino"] OVERRIDES
   Re-skins the existing player pages (wallet-user, profile-user,
   challenges-user, change-password-user...) that use theme-* and
   light Tailwind utility classes - no markup changes required.
   Scoped to the player root so admin pages are unaffected.
   ============================================================ */
[data-theme="casino"] {
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(47, 107, 255, 0.18), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, rgba(255, 122, 0, 0.10), transparent 55%),
        var(--cz-bg);
    color: var(--cz-text);
}

/* theme-* tokens used across player pages */
[data-theme="casino"] .theme-text { color: var(--cz-text) !important; }
[data-theme="casino"] .theme-text-sub { color: var(--cz-sub) !important; }
[data-theme="casino"] .theme-panel { background: var(--cz-card) !important; border-color: var(--cz-line) !important; color: var(--cz-text); }
[data-theme="casino"] .theme-panel-top { background: var(--cz-card2) !important; border-color: var(--cz-line) !important; }
[data-theme="casino"] .theme-tab { color: var(--cz-sub) !important; background: transparent !important; }
[data-theme="casino"] .theme-tab-active { color: var(--cz-gold) !important; border-color: var(--cz-gold) !important; background: transparent !important; }
[data-theme="casino"] .theme-footer-text { color: var(--cz-sub) !important; }
[data-theme="casino"] .theme-toggle-btn { background: var(--cz-card); color: var(--cz-text); border: 1px solid var(--cz-line2); }

/* Light Tailwind utility overrides (cards, borders, text) */
[data-theme="casino"] .bg-white { background-color: var(--cz-card) !important; }
[data-theme="casino"] .bg-gray-50 { background-color: var(--cz-bg2) !important; }
[data-theme="casino"] .bg-gray-100 { background-color: var(--cz-card2) !important; }
[data-theme="casino"] .hover\:bg-gray-50:hover,
[data-theme="casino"] .hover\:bg-gray-100:hover { background-color: var(--cz-card2) !important; }
[data-theme="casino"] .border-gray-100,
[data-theme="casino"] .border-gray-200,
[data-theme="casino"] .border-gray-300 { border-color: var(--cz-line2) !important; }
[data-theme="casino"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="casino"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cz-line) !important; }
[data-theme="casino"] .text-gray-900,
[data-theme="casino"] .text-gray-800 { color: var(--cz-text) !important; }
[data-theme="casino"] .text-gray-700,
[data-theme="casino"] .text-gray-600 { color: #c6d0ea !important; }
[data-theme="casino"] .text-gray-500,
[data-theme="casino"] .text-gray-400 { color: var(--cz-sub) !important; }
[data-theme="casino"] .text-indigo-600, [data-theme="casino"] .text-indigo-700 { color: var(--cz-gold) !important; }
[data-theme="casino"] .bg-indigo-50 { background-color: rgba(255, 176, 31, 0.10) !important; }
[data-theme="casino"] .bg-indigo-100 { background-color: rgba(255, 176, 31, 0.16) !important; }
[data-theme="casino"] .bg-indigo-600 { background: linear-gradient(180deg, #ffd257, var(--cz-gold) 55%, var(--cz-gold2)) !important; color: #241300 !important; }
[data-theme="casino"] .bg-indigo-600 * { color: #241300 !important; }
[data-theme="casino"] .hover\:bg-indigo-700:hover { filter: brightness(1.05); }
[data-theme="casino"] .shadow-sm, [data-theme="casino"] .shadow, [data-theme="casino"] .shadow-lg,
[data-theme="casino"] .shadow-xl { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important; }

/* Tables inside player pages */
[data-theme="casino"] table thead { background: var(--cz-card2) !important; }
[data-theme="casino"] table thead th { color: var(--cz-sub) !important; }
[data-theme="casino"] table tbody tr { border-color: var(--cz-line) !important; }
[data-theme="casino"] table tbody tr:hover { background: var(--cz-card2) !important; }

/* Selects & date inputs that don't carry .theme-input */
[data-theme="casino"] select,
[data-theme="casino"] input[type="date"],
[data-theme="casino"] input[type="text"]:not(.cz-input),
[data-theme="casino"] input[type="number"],
[data-theme="casino"] input[type="password"],
[data-theme="casino"] textarea {
    background-color: var(--cz-bg2); color: var(--cz-text); border-color: var(--cz-line2);
    color-scheme: dark;
}

/* Modals rendered by player pages (white overlays) */
[data-theme="casino"] .bg-black { background-color: rgba(3, 6, 14, 0.7) !important; }

/* Keep functional badge colors readable on dark */
[data-theme="casino"] .bg-green-100 { background: rgba(34, 197, 94, 0.16) !important; }
[data-theme="casino"] .text-green-800, [data-theme="casino"] .text-green-700 { color: #4ade80 !important; }

/* Wallet method/amount selectors: green "selected" state -> theme blue.
   (Selected cards carry bg-green-50 + border-green-500 + text-green-700;
   scoped compound selectors so success badges stay green.) */
[data-theme="casino"] .bg-green-50 {
    background: linear-gradient(180deg, rgba(47, 107, 255, 0.30), rgba(47, 107, 255, 0.16)) !important;
}
[data-theme="casino"] .border-green-500 { border-color: #5f8dff !important; }
[data-theme="casino"] .bg-green-50.text-green-700,
[data-theme="casino"] .border-green-500.text-green-700 { color: #dbe7ff !important; }
[data-theme="casino"] .deposit-amt-btn:hover,
[data-theme="casino"] .hover\:bg-green-50:hover {
    background: rgba(47, 107, 255, 0.20) !important;
    border-color: #5f8dff !important;
    color: #dbe7ff !important;
}
[data-theme="casino"] .focus\:ring-green-500:focus { --tw-ring-color: #5f8dff !important; }
[data-theme="casino"] input[type="checkbox"].text-green-600 { accent-color: #2f6bff; }

/* Withdraw method cards: amber "selected" state -> theme blue.
   (Selected cards carry border-amber-500 + bg-amber-50 + text-amber-700.
   Real warning boxes use border-amber-200/300, so they are excluded.) */
[data-theme="casino"] .border-amber-500.bg-amber-50 {
    background: linear-gradient(180deg, rgba(47, 107, 255, 0.30), rgba(47, 107, 255, 0.16)) !important;
    border-color: #5f8dff !important;
    color: #dbe7ff !important;
}
[data-theme="casino"] .border-amber-500.bg-amber-50 * { color: #dbe7ff !important; }
/* Amber warning boxes: keep amber but dark-friendly */
[data-theme="casino"] .bg-amber-50 { background: rgba(245, 158, 11, 0.12) !important; }
[data-theme="casino"] .border-amber-200, [data-theme="casino"] .border-amber-300 { border-color: rgba(245, 158, 11, 0.42) !important; }
[data-theme="casino"] .text-amber-700 { color: #fbbf24 !important; }
[data-theme="casino"] .border-amber-500.bg-amber-50.text-amber-700 { color: #dbe7ff !important; }
[data-theme="casino"] .bg-red-100 { background: rgba(239, 68, 68, 0.16) !important; }
[data-theme="casino"] .text-red-800, [data-theme="casino"] .text-red-700 { color: #f87171 !important; }
[data-theme="casino"] .bg-amber-100, [data-theme="casino"] .bg-yellow-100 { background: rgba(245, 158, 11, 0.16) !important; }
[data-theme="casino"] .text-amber-800, [data-theme="casino"] .text-yellow-800 { color: #fbbf24 !important; }
[data-theme="casino"] .bg-blue-100 { background: rgba(59, 130, 246, 0.16) !important; }
[data-theme="casino"] .text-blue-800, [data-theme="casino"] .text-blue-700 { color: #60a5fa !important; }

/* Page loader on casino pages */
.cz-loader-dark { background: var(--cz-bg) !important; }
.cz-loader-dark > div { border-color: var(--cz-card2) !important; border-top-color: var(--cz-gold) !important; }

/* Safety net: Tailwind-style `hidden` for pages that inject shared fragments
   (legal modals) but may load before/without the full Tailwind sheet. */
.hidden { display: none !important; }

/* "Back to Home" link for the auth/registration pages */
.cz-back {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--cz-sub); text-decoration: none;
    font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
.cz-back:hover { color: var(--cz-gold); }
.cz-back i { font-size: 12px; }

/* ============================================================
   V2 LOBBY LAYOUT (pc-layout mockup): topnav, sidebar shell,
   jackpot strip, panel game cards, feature strip
   ============================================================ */

/* --- Desktop top navigation (center of topbar) --- */
.cz-topnav { display: none; align-items: center; gap: 2px; margin-left: 14px; margin-right: auto; }
/* PC: the logo block spans exactly the sidebar column (250px) and the nav gap
   mirrors the shell's 18px grid gap, so the Home button's left edge lines up
   with the content column edge below (same 1280px/14px container geometry). */
@media (min-width: 1024px) {
    .cz-topnav { display: flex; margin-left: 18px; }
    .cz-topbar-inner .cz-logo { flex: 0 0 250px; width: 250px; }
}
.cz-topnav a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 10px;
    color: var(--cz-sub); font-size: 13.5px; font-weight: 700; text-decoration: none;
    border-bottom: 2px solid transparent;
}
.cz-topnav a:hover { color: var(--cz-text); }
.cz-topnav a.active {
    color: var(--cz-gold);
    background: rgba(255, 176, 31, 0.08);
    border-bottom-color: var(--cz-gold);
}

/* --- Two-column shell: sticky sidebar (PC) + main --- */
.cz-shell {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px;
    max-width: 1280px; margin: 0 auto; padding: 16px 14px 0;
}
@media (max-width: 1023px) {
    .cz-shell { display: block; padding: 0 14px; }
    .cz-side { display: none; }
}
.cz-side-inner { position: sticky; top: calc(var(--cz-topbar-h) + 14px); display: flex; flex-direction: column; gap: 14px; }
.cz-side-banner {
    display: block; border-radius: 14px; overflow: hidden;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.cz-side-banner:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 24px rgba(255, 170, 30, 0.30));
}
.cz-side-banner img { width: 100%; display: block; }

.cz-side-card { background: var(--cz-card); border: 1px solid var(--cz-line); border-radius: 14px; padding: 14px; }
.cz-wallet-label { font-size: 12px; color: var(--cz-sub); font-weight: 700; margin-bottom: 9px; }
.cz-wallet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cz-wallet-amt { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: #ffd257; }
.cz-wallet-amt img { width: 22px; height: auto; }
.cz-wallet-add {
    width: 32px; height: 32px; border-radius: 10px; text-decoration: none;
    background: linear-gradient(180deg, #ffd257, var(--cz-gold) 55%, var(--cz-gold2));
    color: #241300; display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.cz-cat-title { font-size: 11.5px; font-weight: 800; color: var(--cz-sub); letter-spacing: 0.1em; text-transform: uppercase; margin: 2px 2px 8px; }
.cz-cat-list { display: flex; flex-direction: column; gap: 4px; }
.cz-cat-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 12px; cursor: pointer; text-decoration: none;
    color: var(--cz-sub); font-size: 13.5px; font-weight: 700;
    transition: all 0.15s ease;
}
.cz-cat-item i { width: 18px; text-align: center; font-size: 14px; }
.cz-cat-item:hover { color: var(--cz-text); background: var(--cz-card2); }
.cz-cat-item.active {
    color: #241300;
    background: linear-gradient(180deg, #ffd257, var(--cz-gold) 55%, var(--cz-gold2));
    box-shadow: 0 4px 14px rgba(255, 138, 20, 0.3);
}

/* --- Jackpot strip --- */
.cz-jstrip {
    display: flex; align-items: center; gap: 16px;
    margin: 14px 0 4px; padding: 11px 16px;
    background: var(--cz-card); border: 1px solid var(--cz-line); border-radius: 14px;
}
.cz-jstrip-main { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.cz-jstrip-main > i { font-size: 26px; color: var(--cz-gold); filter: drop-shadow(0 3px 8px rgba(255, 150, 20, 0.4)); }
.cz-jstrip-label { font-size: 9.5px; font-weight: 900; letter-spacing: 0.14em; color: var(--cz-sub); text-transform: uppercase; }
.cz-jstrip-amt { font-size: 20px; font-weight: 900; color: #ffd257; line-height: 1.05; }
.cz-jstrip-items {
    display: flex; gap: 20px; overflow-x: auto; flex: 1; align-items: center;
    scrollbar-width: none; -ms-overflow-style: none;
    border-left: 1px solid var(--cz-line); padding-left: 16px;
}
.cz-jstrip-items::-webkit-scrollbar { display: none; }
.cz-jstrip-item { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.cz-jstrip-item img { width: 40px; height: 30px; object-fit: cover; border-radius: 8px; border: 1px solid var(--cz-line2); }
.cz-jstrip-item small { display: block; font-size: 10.5px; color: var(--cz-sub); font-weight: 700; }
.cz-jstrip-item b { font-size: 12.5px; color: var(--cz-text); }
.cz-jstrip .cz-btn-sm { flex: 0 0 auto; }
@media (max-width: 767px) { .cz-jstrip-amt { font-size: 16px; } .cz-jstrip { gap: 12px; padding: 10px 12px; } }

/* --- Game cards v2 (thumbnail-design mockup): warm gold hairline frame,
       glowing gold border on hover, NO color wash over the art --- */
.cz-gcard {
    background: var(--cz-card);
    border: 1px solid rgba(255, 176, 31, 0.20);
}
.cz-gcard:hover {
    border-color: var(--cz-gold);
    filter: none;
    box-shadow: 0 0 0 1px rgba(255, 176, 31, 0.55), 0 8px 26px rgba(255, 150, 20, 0.28);
}
/* icons are exactly 4:3 so cover fills edge-to-edge without cropping */
.cz-gcard-img img { object-fit: cover; }
.cz-gcard-body {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    text-align: left; padding: 10px 12px 12px;
    border-top: 1px solid rgba(255, 176, 31, 0.18); /* divider: art / caption */
}
.cz-gcard-tag {
    display: block; margin-top: 3px; padding: 0; border: 0; background: none;
    font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: #e8b64c;
}
.cz-gcard-count { display: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--cz-sub); white-space: nowrap; }
@media (min-width: 1024px) { .cz-gcard-count { display: inline-flex; } }
.cz-gcard-fav {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    background: rgba(10, 15, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #c6d0ea; display: flex; align-items: center; justify-content: center; font-size: 13px;
    transition: all 0.15s ease;
}
.cz-gcard-fav:hover { color: #ffd257; }
.cz-gcard-fav.active { color: #ffd257; border-color: rgba(255, 210, 87, 0.55); background: rgba(255, 176, 31, 0.16); }

/* --- Feature strip (support / payouts / fair play / rewards / vip) --- */
.cz-features {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    margin: 24px 0 6px; padding: 15px 16px;
    background: var(--cz-card); border: 1px solid var(--cz-line); border-radius: 14px;
}
@media (min-width: 1024px) { .cz-features { grid-template-columns: repeat(5, 1fr); } }
.cz-feature { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cz-feature > i {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 176, 31, 0.12); color: var(--cz-gold);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.cz-feature b { display: block; font-size: 12.5px; line-height: 1.25; }
.cz-feature span { display: block; font-size: 11px; color: var(--cz-sub); line-height: 1.3; }

/* Elements that only exist on mobile (PC uses the sidebar instead) */
@media (min-width: 1024px) { .cz-only-mobile { display: none !important; } }

/* ============================================================
   AUTH / REGISTRATION PAGES  (body.cz-auth-page)
   Dark re-skin for standalone guest pages built with light
   Tailwind utilities (quick-register, registration_kyc, ...).
   ============================================================ */
body.cz-auth-page .bg-white { background: linear-gradient(180deg, var(--cz-card2) 0%, var(--cz-card) 100%) !important; }
body.cz-auth-page .bg-gray-50 { background-color: var(--cz-bg2) !important; }
body.cz-auth-page .bg-gray-100 { background-color: var(--cz-card2) !important; }
body.cz-auth-page .text-gray-900, body.cz-auth-page .text-gray-800 { color: var(--cz-text) !important; }
body.cz-auth-page .text-gray-700, body.cz-auth-page .text-gray-600 { color: #c6d0ea !important; }
body.cz-auth-page .text-gray-500, body.cz-auth-page .text-gray-400 { color: var(--cz-sub) !important; }
body.cz-auth-page .border-gray-100, body.cz-auth-page .border-gray-200,
body.cz-auth-page .border-gray-300 { border-color: var(--cz-line2) !important; }
body.cz-auth-page .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.cz-auth-page .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cz-line) !important; }
body.cz-auth-page .shadow-xl, body.cz-auth-page .shadow-lg,
body.cz-auth-page .shadow { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55) !important; }

body.cz-auth-page input, body.cz-auth-page select, body.cz-auth-page textarea {
    background-color: var(--cz-bg2) !important;
    border-color: var(--cz-line2) !important;
    color: var(--cz-text) !important;
    color-scheme: dark;
}
body.cz-auth-page input::placeholder, body.cz-auth-page textarea::placeholder { color: #5c6a8e !important; }
body.cz-auth-page input:focus, body.cz-auth-page select:focus, body.cz-auth-page textarea:focus {
    border-color: var(--cz-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 176, 31, 0.18) !important;
}
body.cz-auth-page input[type="checkbox"], body.cz-auth-page input[type="radio"] { accent-color: var(--cz-gold); }
body.cz-auth-page select option, body.cz-auth-page select optgroup {
    color: var(--cz-text) !important;
    background-color: var(--cz-bg2) !important;
}

body.cz-auth-page .bg-indigo-600 {
    background: linear-gradient(180deg, #ffd257, var(--cz-gold) 55%, var(--cz-gold2)) !important;
    color: #241300 !important; font-weight: 800;
}
body.cz-auth-page .hover\:bg-indigo-700:hover { filter: brightness(1.05); }
body.cz-auth-page .text-indigo-600, body.cz-auth-page .text-indigo-700,
body.cz-auth-page .text-indigo-500,
body.cz-auth-page .hover\:text-indigo-600:hover, body.cz-auth-page .hover\:text-indigo-700:hover { color: var(--cz-gold) !important; }
body.cz-auth-page .bg-indigo-50 { background: rgba(82, 82, 82, 0.1) !important; }
body.cz-auth-page .border-indigo-200 { border-color: rgb(66, 66, 66) !important; }
body.cz-auth-page .border-indigo-500 { border-color: var(--cz-gold) !important; }

/* Upload drop-zones (registration KYC) */
body.cz-auth-page .drop-zone {
    border-color: rgba(95, 141, 255, 0.45) !important;
    background: rgba(13, 21, 40, 0.6) !important;
}
body.cz-auth-page .drop-zone.dragover {
    border-color: var(--cz-gold) !important;
    background: rgba(255, 176, 31, 0.08) !important;
}

/* Status/message boxes on dark */
body.cz-auth-page .bg-green-50 { background: rgba(34, 197, 94, 0.14) !important; }
body.cz-auth-page .text-green-700, body.cz-auth-page .text-green-800 { color: #4ade80 !important; }
body.cz-auth-page .border-green-200, body.cz-auth-page .border-green-300 { border-color: rgba(34, 197, 94, 0.4) !important; }
body.cz-auth-page .bg-red-50 { background: rgba(239, 68, 68, 0.14) !important; }
body.cz-auth-page .text-red-700, body.cz-auth-page .text-red-800 { color: #f87171 !important; }
body.cz-auth-page .border-red-200, body.cz-auth-page .border-red-300 { border-color: rgba(239, 68, 68, 0.4) !important; }
body.cz-auth-page .bg-amber-50, body.cz-auth-page .bg-yellow-50 { background: rgba(245, 158, 11, 0.12) !important; }
body.cz-auth-page .text-amber-700, body.cz-auth-page .text-yellow-700 { color: #fbbf24 !important; }
body.cz-auth-page .border-amber-200, body.cz-auth-page .border-amber-300 { border-color: rgba(245, 158, 11, 0.42) !important; }
body.cz-auth-page .bg-blue-50 { background: rgba(59, 130, 246, 0.14) !important; }
body.cz-auth-page .text-blue-700, body.cz-auth-page .text-blue-800 { color: #60a5fa !important; }

/* ---- login-match skin: gold-rimmed card, chunky 3D submit, tight mobile ---- */
body.cz-auth-page .bg-white.rounded-2xl, body.cz-auth-page .auth-card {
    background: linear-gradient(180deg, #101a33 0%, #0b1226 100%) !important;
    border: 1.5px solid rgba(255, 199, 80, 0.55) !important;
    border-radius: 1.35rem !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 176, 31, 0.10) !important;
}
body.cz-auth-page button[type="submit"] {
    background: linear-gradient(180deg, #ffa348 0%, #ff7a00 52%, #f25c00 100%) !important;
    color: #fff !important; font-weight: 900 !important; border: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 6px 0 #a33c00, 0 12px 22px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s !important;
}
body.cz-auth-page button[type="submit"]:hover { filter: brightness(1.06); }
body.cz-auth-page button[type="submit"]:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #a33c00, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
body.cz-auth-page button[type="submit"]:disabled { opacity: 0.55; transform: none; }
body.cz-auth-page form label { font-weight: 700 !important; color: #eef2ff !important; }
@media (max-width: 640px) {
    body.cz-auth-page .rounded-2xl.p-6, body.cz-auth-page .rounded-2xl.p-8,
    body.cz-auth-page .auth-card { padding: 20px 16px !important; }
    body.cz-auth-page h1 { font-size: 20px !important; }
    body.cz-auth-page h1 + p { font-size: 12.5px !important; }
    body.cz-auth-page .mb-6 { margin-bottom: 1rem !important; }
    body.cz-auth-page .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.9rem !important; }
    body.cz-auth-page .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.8rem !important; }
    body.cz-auth-page form label { font-size: 13px !important; margin-bottom: 4px !important; }
    body.cz-auth-page input, body.cz-auth-page select { font-size: 14px !important; }
    body.cz-auth-page .text-lg { font-size: 16px !important; }
    body.cz-auth-page .text-xs { font-size: 11px !important; }
}

/* ---------- Mobile wallet balance card (header chip is too cramped on phones) ---------- */
.cz-mob-balance { display: none; }
@media (max-width: 767px) {
    .cz-topbar .cz-balance { display: none; }
    .cz-mob-balance {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        margin: 12px 14px 0; padding: 14px 18px;
        background: linear-gradient(160deg, #141b34, #0e1428);
        border: 1px solid #232c52; border-radius: 16px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }
    .cz-mob-balance .mb-lbl {
        font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
        color: var(--cz-gold); margin-bottom: 3px;
    }
    .cz-mob-balance .mb-amt { font-size: 26px; font-weight: 900; color: #ffe14d; line-height: 1; }
    .cz-mob-balance .mb-amt .cur-sym { font-size: 20px; }
    .cz-mob-balance .mb-add {
        width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(180deg, #ffe9a8 0%, #ffb01f 55%, #ff7a00 100%);
        color: #1a1204; font-size: 19px; text-decoration: none;
        box-shadow: 0 6px 16px rgba(255, 176, 31, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transition: transform 0.15s;
    }
    .cz-mob-balance .mb-add:active { transform: scale(0.94); }
}

/* === FOUC guard: never paint BetrixLab wordmark/icon on Royce host === */
html[data-brand="royce"] img.cz-logo-word[src*="logo-font.png"],
html[data-brand="royce"] img[src*="gaming/logo-font.png"],
html[data-brand="royce"] img.h-12[src*="logo-font.png"] {
  opacity: 0 !important;
  visibility: hidden !important;
}
html[data-brand="royce"] img.cz-logo-word[src*="/brands/royce/"],
html[data-brand="royce"] img[src*="/brands/royce/logo"] {
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-brand="royce"] img.cz-logo-icon,
html[data-brand="royce"] img[src*="icon-casino.png"] {
  display: none !important;
}