/* ============================================================================
   light-fixes.css — readability patches for the casino light theme
   ============================================================================
   The first wave of casino UI was built dark-mode-first and dropped hex
   values like #fff / #ccc / #aaa / #888 directly into the template
   <style> blocks. When the casino-light theme flips :root vars, those
   hardcoded values stay dark-mode-correct and become invisible on the
   new pale surface.

   This stylesheet ships AFTER tokens.css + components.css + feed.css and
   targets only ``body.casino-theme`` so dark mode is left
   alone. Selectors stay tightly scoped to the legacy class names so we
   don't bleed into anything else.

   Pages covered: /wallet/rewards/, /wallet/, /dashboard/, /games/grid/.
   ============================================================================ */

/* Helper aliases — let each fix pull from the same intent regardless of
   which token actually backs it in the active palette. */
body.casino-theme {
    --readable-text:   var(--text-primary, #050505);
    --readable-sub:    var(--text-secondary, #4f5673);
    --readable-mute:   var(--text-muted, #6b7280);
    --readable-surface: var(--bg-elevated, #ffffff);
    --readable-card-bg: var(--bg-surface, #f5f6fa);
    --readable-border: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

/* ─── Rewards page (.rw-*) ────────────────────────────────────────────────── */
body.casino-theme .rw-page { color: var(--readable-text); }
body.casino-theme .rw-sub { color: var(--readable-mute); }

body.casino-theme .rw-mission {
    background: var(--readable-card-bg);
    border-color: var(--readable-border);
}
body.casino-theme .rw-mname    { color: var(--readable-text); }
body.casino-theme .rw-desc     { color: var(--readable-sub); }
body.casino-theme .rw-progress { color: var(--readable-mute); }
body.casino-theme .rw-empty    { color: var(--readable-mute); }

/* Period chip — translucent backgrounds were tuned for dark surfaces. */
body.casino-theme .rw-period.daily   { background: rgba(108,99,255,0.10); color: #5a4eff; }
body.casino-theme .rw-period.weekly  { background: rgba(243,156,18,0.14); color: #a25f00; }
body.casino-theme .rw-period.once    { background: rgba(46,204,113,0.14); color: #0e7a3a; }

body.casino-theme .rw-leaderboard-row { background: var(--readable-card-bg); }
body.casino-theme .rw-leaderboard-name { color: var(--readable-text); }
body.casino-theme .rw-leaderboard-count { color: var(--readable-mute); }
body.casino-theme .rw-leaderboard-title { color: var(--readable-text); }

body.casino-theme .rw-spin-title    { color: var(--readable-text); }
body.casino-theme .rw-spin-sub      { color: var(--readable-sub); }
body.casino-theme .rw-referral-title { color: var(--readable-text); }
body.casino-theme .rw-referral-sub  { color: var(--readable-sub); }
body.casino-theme .rw-vip-label     { color: var(--readable-text); }

/* Weekly Raffle card — title/sub were #fff and #ddd, invisible on light
   gradient. Stat trio used a 35% black background with #aaa labels that
   ghosted into the page. Re-skin with high-contrast surface + tokens. */
body.casino-theme .rw-raffle {
    background: linear-gradient(135deg, rgba(255,184,0,0.10), rgba(108,99,255,0.05));
    border: 1px solid rgba(255, 184, 0, 0.45);
}
body.casino-theme .rw-raffle-title { color: var(--readable-text); }
body.casino-theme .rw-raffle-sub   { color: var(--readable-sub); }
body.casino-theme .rw-raffle-stats > div {
    background: var(--readable-surface);
    border: 1px solid var(--readable-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 2px 8px rgba(0, 0, 0, 0.04);
}
body.casino-theme .rw-raffle-num   { color: #a25f00; }
body.casino-theme .rw-raffle-label { color: var(--readable-mute); }

/* "Back to Wallet" pill — .btn-ghost reads from --text (cyberpunk theme)
   which resolves to a light hex; on the light surface that's invisible.
   Force readable tokens + visible border. */
body.casino-theme .btn-ghost,
body.casino-theme a.btn-ghost {
    color: var(--readable-text) !important;
    border-color: var(--readable-border) !important;
    background: var(--readable-surface);
}
body.casino-theme .btn-ghost:hover,
body.casino-theme a.btn-ghost:hover {
    background: var(--readable-card-bg);
    border-color: var(--brand-gold, #4f7dff) !important;
    color: var(--readable-text) !important;
}

/* Dashboard banners have inline-styled <small> tags with rgba(...,0.7)
   colors that ghost on the new light surface. Force darker tones with
   !important to defeat the inline style. */
body.casino-theme .bonus-banner small {
    color: #8b1a1a !important;   /* deep red on the pink-tinted banner */
    opacity: 1 !important;
}
body.casino-theme .bonus-banner strong {
    color: #b00020 !important;
}
body.casino-theme .bonus-banner .timer,
body.casino-theme .bonus-banner [data-bonus-timer] {
    color: #ffffff !important;
    background: rgba(176, 0, 32, 0.85) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.casino-theme .jackpot small {
    color: #6b4a00 !important;   /* darker amber on the gold gradient */
    opacity: 1 !important;
}
body.casino-theme .jackpot .label { color: #6b4a00 !important; }
body.casino-theme .jackpot .amount { color: #a25f00 !important; }
body.casino-theme .jackpot i { color: #a25f00 !important; }

/* Streak meter — sub-text was light gray on cream → dark text instead. */
body.casino-theme .streak-sub,
body.casino-theme .streak-sub * {
    color: var(--readable-sub) !important;
}
body.casino-theme .streak-title { color: var(--readable-text) !important; }
body.casino-theme .streak-title strong { color: #d97706 !important; }

/* "Lifetime claims" tiny line + miscellaneous small under streak meter */
body.casino-theme .streak-foot { color: var(--readable-mute) !important; }

/* Bottom-nav labels were rgb(75,85,99) but the SPAN was hidden in
   icon-only mode at desktop. Make labels show + use stronger color. */
body.casino-theme .casino-tab span {
    color: var(--readable-sub) !important;
}
body.casino-theme .casino-tab.active span,
body.casino-theme .casino-tab.is-active span {
    color: var(--brand-gold, #4f7dff) !important;
}

/* Rewards page "🎯 Active Missions" h2 had inline color:#fff — invisible
   on white. The .rw-page > h2 selector is enough specificity to override
   the inline; pair with !important for safety. */
body.casino-theme .rw-page h2,
body.casino-theme .rw-page h3 {
    color: var(--readable-text) !important;
}

/* .rw-spin-paid is the "Spin (25 pts)" button — gold-on-translucent-gold
   reads as a ghost. Give it the same dark-on-solid-gold treatment as
   .wload-btn so the bonus-pay variant is legible. */
body.casino-theme .rw-spin-paid {
    color: #5a3a00 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ffe27a, #ffb800) !important;
    border: 1px solid rgba(180, 120, 0, 0.5) !important;
    opacity: 1 !important;
}
body.casino-theme .rw-spin-paid[disabled] {
    background: linear-gradient(135deg, #f6e7b8, #d9b463) !important;
    opacity: 0.7 !important;
}

/* Any h2/h3/h4 still using inline color:#fff anywhere on a light page. */
body.casino-theme h2[style*="color:#fff"],
body.casino-theme h2[style*="color: #fff"],
body.casino-theme h3[style*="color:#fff"],
body.casino-theme h3[style*="color: #fff"] {
    color: var(--readable-text) !important;
}

/* ─── Dashboard rewards strip (4-up Loyalty / Missions / Spin / Raffle) ──── */
body.casino-theme a[data-aos="fade-up"][style*="repeat(4"] > div {
    background: var(--readable-card-bg) !important;
    border-color: var(--readable-border) !important;
}
body.casino-theme a[data-aos="fade-up"][style*="repeat(4"] > div > div:first-child {
    /* small UPPERCASE label was #ccc — washed out on light bg */
    color: var(--readable-mute) !important;
}
body.casino-theme a[data-aos="fade-up"][style*="repeat(4"] > div > div:last-child {
    /* helper text under the number was #aaa */
    color: var(--readable-mute) !important;
}

/* ─── Dashboard hero text (already mostly fine) + bottom-nav clearance ───── */
body.casino-theme main.casino-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ─── Wallet page (.w-* / inline classes) ────────────────────────────────── */
body.casino-theme .w-tx-table,
body.casino-theme .w-rewards-card,
body.casino-theme .w-tg-card {
    color: var(--readable-text);
}
body.casino-theme .w-tg-status,
body.casino-theme .w-tx-when,
body.casino-theme .w-tx-meta {
    color: var(--readable-mute);
}

/* ─── Games grid — Play Now button text was washing into the gradient ────── */
body.casino-theme .play-btn,
body.casino-theme .play-now-btn,
body.casino-theme .game-card-actions .gc-play,
body.casino-theme .game-card .play,
body.casino-theme .gc-btn-play {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-weight: 800;
}
/* Any button on a brand-gradient background gets a readable white label. */
body.casino-theme a[class*="play"],
body.casino-theme button[class*="play"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Wallet's "Load to Game" + Deposit/Redeem labels were light-blue on
   light gradients. Force white with shadow to stay readable. */
body.casino-theme .balance-cta,
body.casino-theme .wallet-load-btn,
body.casino-theme .gc-deposit,
body.casino-theme a.feed-btn-primary[href*="payment"],
body.casino-theme .gc-redeem,
body.casino-theme .deposit-btn,
body.casino-theme .redeem-trigger-btn {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-weight: 700;
}

/* .wload-btn is a translucent-gold pill — white text is invisible there.
   Give it a stronger gold background + dark text so it stays readable on
   the light theme. */
body.casino-theme .wload-btn {
    color: #5a3a00 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ffe27a, #ffb800) !important;
    border: 1px solid rgba(180, 120, 0, 0.5) !important;
}

/* ─── Weekly Raffle banner (new on dashboard, see shea_home.html) ────────── */
.bh-raffle-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3, 12px);
    align-items: center;
    margin-top: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255,184,0,0.10), rgba(108,99,255,0.08));
    border: 1px solid rgba(255, 184, 0, 0.30);
    border-radius: 16px;
    color: var(--text-primary, #f1f4ff);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.bh-raffle-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(255,184,0,0.35);
    text-decoration: none;
    color: inherit;
}
.bh-raffle-banner .bh-raffle-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #FFB800, #ff6b6b);
    font-size: 22px;
}
.bh-raffle-banner .bh-raffle-body { min-width: 0; }
.bh-raffle-banner .bh-raffle-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary, #f1f4ff);
    margin: 0;
    line-height: 1.2;
}
.bh-raffle-banner .bh-raffle-sub {
    font-size: 0.82rem;
    color: var(--text-secondary, #b8bdd6);
    margin: 2px 0 0;
}
.bh-raffle-banner .bh-raffle-tickets {
    text-align: right;
    font-weight: 800;
    color: #FFB800;
    line-height: 1.05;
    white-space: nowrap;
}
.bh-raffle-banner .bh-raffle-tickets-num { font-size: 1.4rem; display: block; }
.bh-raffle-banner .bh-raffle-tickets-lbl {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted, #6b7196);
    font-weight: 600;
}
body.casino-theme .bh-raffle-banner {
    color: var(--readable-text);
    border-color: rgba(255, 184, 0, 0.45);
    background: linear-gradient(135deg, rgba(255,184,0,0.14), rgba(108,99,255,0.07));
}
body.casino-theme .bh-raffle-banner .bh-raffle-title { color: var(--readable-text); }
body.casino-theme .bh-raffle-banner .bh-raffle-sub   { color: var(--readable-sub); }
body.casino-theme .bh-raffle-banner .bh-raffle-tickets-lbl { color: var(--readable-mute); }

/* ─── Top-nav PlayVibe logo + wordmark ───────────────────────────────────── */
body.casino-theme .casino-brand .casino-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.18);
}
body.casino-theme .casino-brand-text {
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ─── How it Works documentary section ─────────────────────────────────── */
.hiw-section {
    margin-top: 28px;
    padding: 24px 22px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-subtle, #dadde1);
    border-radius: 18px;
    color: var(--text-primary, #050505);
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.18);
}
.hiw-section h2 {
    margin: 0 0 8px;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-primary, #050505);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hiw-section h2 .hiw-emoji { font-size: 1.5rem; }
.hiw-section .hiw-lead {
    margin: 0 0 24px;
    font-size: 0.98rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.5;
}
.hiw-steps { display: grid; gap: 16px; }
.hiw-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 16px;
    background: var(--bg-elevated, #f7f8fa);
    border: 1px solid var(--border-subtle, #dadde1);
    border-radius: 14px;
}
.hiw-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-brand, linear-gradient(135deg,#4f7dff,#7c5bff,#b154ff));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 6px 14px -6px rgba(124, 91, 255, 0.55);
}
.hiw-step h3 {
    margin: 2px 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #050505);
}
.hiw-step p {
    margin: 0;
    color: var(--text-secondary, #4b5563);
    font-size: 0.93rem;
    line-height: 1.55;
}
.hiw-step ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--text-secondary, #4b5563);
    font-size: 0.92rem;
    line-height: 1.55;
}
.hiw-step ul li { margin-bottom: 4px; }
.hiw-step strong { color: var(--text-primary, #050505); }
.hiw-tldr {
    margin-top: 22px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(79,125,255,0.10), rgba(177,84,255,0.06));
    border: 1px solid rgba(79,125,255,0.30);
    border-radius: 14px;
    color: var(--text-primary, #050505);
    font-size: 0.95rem;
    line-height: 1.55;
}
.hiw-tldr strong { color: var(--brand-gold, #4f7dff); }

/* ─── Freeplay request card on dashboard ────────────────────────────────── */
.bh-freeplay-card {
    margin-top: 22px;
    padding: 18px 18px;
    background: linear-gradient(135deg, rgba(46,204,113,0.10), rgba(1,255,129,0.05));
    border: 1px solid rgba(46,204,113,0.35);
    border-radius: 16px;
    color: var(--text-primary, #050505);
}
.bh-freeplay-card h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary, #050505);
    display: flex; align-items: center; gap: 8px;
}
.bh-freeplay-card p {
    margin: 0 0 12px;
    color: var(--text-secondary, #4b5563);
    font-size: 0.93rem;
    line-height: 1.5;
}
.bh-freeplay-form { display: grid; gap: 10px; }
.bh-freeplay-form input,
.bh-freeplay-form select {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-surface, #fff);
    border: 1.5px solid var(--border-subtle, #dadde1);
    border-radius: 12px;
    color: var(--text-primary, #050505);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 160ms ease;
    font-family: inherit;
}
.bh-freeplay-form input:focus,
.bh-freeplay-form select:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(22,163,74,0.15);
}
.bh-freeplay-form .bh-fp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) {
    .bh-freeplay-form .bh-fp-row { grid-template-columns: 1fr; }
}
.bh-freeplay-form button {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #2ecc71, #16a085);
    color: #fff !important;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    transition: filter 120ms ease, transform 120ms ease;
    box-shadow: 0 10px 20px -10px rgba(22, 163, 74, 0.55);
}
.bh-freeplay-form button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bh-freeplay-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.bh-fp-flash {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    display: none;
}
.bh-fp-flash.ok    { background: rgba(46,204,113,0.18); color: #0e7a3a; }
.bh-fp-flash.err   { background: rgba(255,84,112,0.14); color: #b00020; }