/* ================================================================
   THEME: SUN - VOLCANIC INFERNO / 火山熔岩
   Design: Aggressive, hot, explosive energy
   Palette: Volcanic blacks, deep reds, oranges, yellows, magma
   Font: Roboto (clean uniform sans, matches svj33au)
   ================================================================ */

/* --- Google Fonts ---
   Roboto everywhere — clean, uniform, modern (like svj33au). Weights
   300-900 carry the hierarchy; Poppins kept only as a fallback. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   CSS Custom Properties - Volcanic Palette
   ================================================================ */
:root {
    /* Core volcanic colors */
    --vol-black: #0a0200;
    --vol-dark: #0f0c00;
    --vol-obsidian: #120E00;
    --vol-charcoal: #1a1504;
    --vol-ember: #2a2308;

    /* Lava spectrum */
    --lava-deep: #8B0000;
    --lava-red: #CC2200;
    --lava-core: #C9A227;
    --lava-hot: #CBA72B;
    --lava-orange: #E3C04A;
    --lava-bright: #FFD24A;
    --lava-yellow: #FFD700;
    --lava-white: #FFFACD;

    /* Glow intensities */
    --glow-ember: rgba(201, 162, 39, 0.15);
    --glow-lava: rgba(227, 192, 74, 0.25);
    --glow-fire: rgba(201, 162, 39, 0.4);
    --glow-magma: rgba(214, 172, 20, 0.6);
    --glow-inferno: rgba(201, 162, 39, 0.8);

    /* Borders */
    --border-lava: rgba(214, 172, 20, 0.2);
    --border-ember: rgba(227, 192, 74, 0.12);
    --border-crack: rgba(201, 162, 39, 0.08);

    /* Gradients */
    --grad-lava: linear-gradient(135deg, #C9A227 0%, #E3C04A 50%, #FFD700 100%);
    --grad-magma: linear-gradient(135deg, #8B0000 0%, #CC2200 40%, #C9A227 100%);
    --grad-obsidian: linear-gradient(135deg, #0a0200 0%, #1a1504 50%, #0f0c00 100%);
    --grad-molten-border: linear-gradient(90deg, #C9A227, #E3C04A, #FFD700, #E3C04A, #C9A227);

    /* Typography system */
    --sun-font-display: 'Roboto', 'Poppins', sans-serif;
    --sun-font-body: 'Roboto', 'Poppins', sans-serif;
}


/* ================================================================
   1. BODY & BACKGROUND - Deep volcanic with lava cracks
   ================================================================ */
body {
    background-color: #1a1d23 !important;
    background-image:
        /* Giant sun corona glow top-right */
        radial-gradient(circle 300px at 85% -5%, rgba(227, 192, 74, 0.25) 0%, rgba(201, 162, 39, 0.12) 30%, transparent 70%),
        /* Secondary heat glow bottom-left */
        radial-gradient(circle 250px at 10% 105%, rgba(201, 162, 39, 0.18) 0%, rgba(204, 34, 0, 0.08) 40%, transparent 70%),
        /* Lava river veins */
        linear-gradient(137deg, transparent 47%, rgba(255, 200, 0, 0.06) 49%, rgba(255, 200, 0, 0.06) 51%, transparent 53%),
        linear-gradient(43deg, transparent 47%, rgba(255, 60, 0, 0.04) 49%, rgba(255, 60, 0, 0.04) 51%, transparent 53%),
        linear-gradient(95deg, transparent 48%, rgba(214, 172, 20, 0.03) 49.5%, rgba(214, 172, 20, 0.03) 50.5%, transparent 52%),
        /* Volcanic rock texture */
        radial-gradient(circle 3px at 20% 40%, rgba(214, 172, 20, 0.08) 0%, transparent 100%),
        radial-gradient(circle 4px at 60% 25%, rgba(255, 200, 0, 0.06) 0%, transparent 100%),
        radial-gradient(circle 3px at 80% 65%, rgba(255, 200, 0, 0.07) 0%, transparent 100%),
        radial-gradient(circle 5px at 35% 80%, rgba(255, 60, 0, 0.05) 0%, transparent 100%) !important;
    font-family: 'Roboto', 'Poppins', sans-serif !important;
    color: #fff !important;
}

/* Animated sun corona glow — large pulsing orb */
body::before {
    content: '' !important;
    position: fixed !important;
    top: -150px !important;
    right: -100px !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.15) 0%, rgba(227, 192, 74, 0.1) 25%, rgba(201, 162, 39, 0.06) 50%, transparent 70%) !important;
    border-radius: 50% !important;
    animation: sun-corona-pulse 8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Floating ember sparks + lava glow at bottom */
body::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image:
        /* Bottom lava pool glow */
        radial-gradient(ellipse 100% 40% at 50% 105%, rgba(201, 162, 39, 0.2) 0%, rgba(204, 34, 0, 0.1) 30%, transparent 60%),
        /* Floating ember sparks */
        radial-gradient(2px 2px at 10% 30%, rgba(255, 200, 0, 0.7) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 60%, rgba(227, 192, 74, 0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 50% 20%, rgba(255, 220, 0, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 70%, rgba(255, 200, 0, 0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 40%, rgba(255, 200, 0, 0.55) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 40% 85%, rgba(214, 172, 20, 0.65) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 10%, rgba(255, 200, 0, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 90%, rgba(227, 192, 74, 0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 15%, rgba(255, 220, 0, 0.45) 50%, transparent 100%),
        radial-gradient(2px 2px at 45% 50%, rgba(214, 172, 20, 0.5) 50%, transparent 100%) !important;
    animation: ember-rise 15s linear infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.8 !important;
}

@keyframes sun-corona-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}

#app-layout {
    background: var(--vol-black) !important;
}

#scroll-content {
    background: var(--vol-black) !important;
}


/* ================================================================
   2. HEADER (#app-header)
   ================================================================ */
#app-header {
    background: rgba(5, 5, 5, 0.98) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

/* Animated molten border at bottom of header */
#app-header::after {
    content: none !important;
}

/* Hamburger menu button */
#app-header button[onclick*="toggleSideMenu"] {
    border-color: rgba(255, 210, 74, 0.5) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #FFD24A !important;
}

#app-header button[onclick*="toggleSideMenu"] i {
    color: #FFD24A !important;
}

#app-header button[onclick*="toggleSideMenu"]:hover {
    border-color: #FFD24A !important;
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.18) !important;
}

/* Logo box - lava gradient with pulsing glow */
#app-header .w-9.h-9,
#app-header div[class*="from-yellow-400"] {
    background: linear-gradient(135deg, #C9A227, #E3C04A, #FFD700) !important;
    box-shadow: 0 0 15px rgba(214, 172, 20, 0.4), 0 0 30px rgba(201, 162, 39, 0.15) !important;
    animation: magma-pulse 4s ease-in-out infinite !important;
}

/* Logo text - SALAMANCA96 */
#app-header span[class*="text-yellow-400"] {
    color: var(--lava-yellow) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}

#app-header span[class*="text-gray-400"] {
    color: rgba(226, 207, 140, 0.5) !important;
}

#app-header .s96-header-partnership-btn {
    width: 92px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 74, 0.34);
    background: #111418;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

#app-header .s96-header-partnership-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 360px) {
    #app-header .s96-header-partnership-btn {
        width: 78px;
        height: 30px;
    }
}


/* ================================================================
   3. BOTTOM NAV (#bottom-nav)
   ================================================================ */
#bottom-nav {
    background: rgba(5, 5, 5, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

/* Animated lava line at top of nav */
#bottom-nav::before {
    content: none !important;
}

/* Obsidian background with subtle magma cracks */
#bottom-nav #nav-icons-container {
    background: transparent !important;
}

/* Nav items */
.nav-item .nav-icon {
    color: rgba(156, 163, 175, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.nav-item span {
    color: rgba(156, 163, 175, 0.5) !important;
}

/* Active nav - eruption glow */
.nav-item.active-nav .nav-icon {
    color: var(--lava-yellow) !important;
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.6),
        0 0 18px rgba(255, 215, 0, 0.22) !important;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.35)) !important;
}

/* Instant Rebate nav icon: the source GIF is blue+gold; force a uniform gold
   tint. ID specificity + !important beats the .active-nav drop-shadow filter
   above, so it stays gold (not blue) in BOTH states while keeping the animation. */
/* Clean line-icon nav (matches the instant-rebate mockup): inline SVGs inherit
   the .nav-icon color (gray idle -> lava-yellow active) via currentColor. */
.nav-item svg.nav-icon {
    width: 30px !important;
    height: 30px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
/* Higher specificity (2 IDs) to beat styles.css `#bottom-nav .nav-item img.nav-image`
   which force-sizes all nav images to 38px. Override width/height + min/max so the
   REBATE icon size is actually controllable here. */
/* The rebate icon is a GIF, so the palette swap could not reach it — it is
   tinted by a filter instead. sepia() lands on hue 40, which is orange; the
   old saturate(6) clipped the channels so hard that the hue jumped straight
   from 40.8 to 64.5 between 10 and 12 degrees — 47 was not reachable at all.
   Backing the saturation off to 3.5 makes the curve continuous again, and
   9deg lands on 47.3. Measured by sweeping the filter over the actual gif in
   a canvas; solving it from the filter matrices gives the wrong answer,
   because they do not model the clipping. */
#bottom-nav #nav-instant-rebate .nav-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: 30px !important;
    filter: grayscale(1) sepia(1) saturate(3.5) hue-rotate(9deg) brightness(1.05) !important;
}
#nav-instant-rebate.active-nav .nav-icon {
    filter: grayscale(1) sepia(1) saturate(3.5) hue-rotate(9deg) brightness(1.05) drop-shadow(0 0 6px rgba(255, 215, 0, 0.4)) !important;
}

.nav-item.active-nav span {
    color: var(--lava-yellow) !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3) !important;
}

/* Nav indicator - lava line */
.nav-indicator {
    background: #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35) !important;
}


/* ================================================================
   4. BANNER (#home-banner)
   ================================================================ */
#home-banner {
    border-radius: 0 !important;
    overflow: hidden !important;
}
#home-banner img {
    width: 100% !important;
    display: block !important;
}

/* Replace purple gradient with volcanic eruption */
#home-banner > div:first-child,
#home-banner > .absolute:first-child {
    background: linear-gradient(135deg,
        #1a0000 0%,
        #3d0000 15%,
        #8B0000 30%,
        #CC2200 45%,
        #C9A227 60%,
        #E3C04A 80%,
        #FFD700 100%) !important;
    animation: none !important;
}

/* Lava texture overlay */
#home-banner > div:nth-child(2),
#home-banner > .absolute:nth-child(2) {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(214, 172, 20, 0.03) 3px, rgba(214, 172, 20, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(255, 60, 0, 0.02) 5px, rgba(255, 60, 0, 0.02) 6px) !important;
    opacity: 0.6 !important;
}

/* Banner text styling */
#home-banner h1 {
    font-family: var(--sun-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow:
        0 0 10px rgba(214, 172, 20, 0.5),
        0 0 30px rgba(201, 162, 39, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

#home-banner span[class*="bg-yellow-400"] {
    background: linear-gradient(135deg, #C9A227, #FFD700) !important;
    color: #fff !important;
    text-shadow: 0 0 8px rgba(201, 162, 39, 0.5) !important;
    box-shadow: 0 2px 10px rgba(201, 162, 39, 0.3) !important;
}

/* Decorative coin icon - volcanic glow */
#home-banner i[class*="fa-coins"] {
    color: var(--lava-orange) !important;
    opacity: 0.08 !important;
    filter: drop-shadow(0 0 30px rgba(214, 172, 20, 0.3)) !important;
}


/* ================================================================
   5. GAME CARDS (.game-card, .hot-game-card)
   ================================================================ */
.game-card {
    border-radius: 8px !important;
    border: 1px solid rgba(214, 172, 20, 0.1) !important;
    background: var(--vol-charcoal) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(214, 172, 20, 0) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.game-card:hover {
    transform: scale(1.05) !important;
    border-color: rgba(214, 172, 20, 0.5) !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(201, 162, 39, 0.3),
        0 0 30px rgba(214, 172, 20, 0.15) !important;
}

.game-card:active {
    transform: scale(0.97) !important;
}

/* Hot game cards - volcanic glow */
.hot-game-card {
    border-radius: 8px !important;
    border: 2px solid rgba(214, 172, 20, 0.3) !important;
    background: linear-gradient(145deg, var(--vol-charcoal), var(--vol-dark)) !important;
    animation: volcanic-card-glow 3s ease-in-out infinite !important;
}

@keyframes volcanic-card-glow {
    0%, 100% {
        border-color: rgba(214, 172, 20, 0.3);
        box-shadow: 0 0 8px rgba(201, 162, 39, 0.2), 0 0 16px rgba(214, 172, 20, 0.1);
    }
    50% {
        border-color: rgba(227, 192, 74, 0.6);
        box-shadow: 0 0 15px rgba(201, 162, 39, 0.4), 0 0 30px rgba(227, 192, 74, 0.2), 0 0 45px rgba(201, 162, 39, 0.1);
    }
}

.hot-game-card:hover {
    transform: scale(1.05) !important;
    box-shadow:
        0 0 20px rgba(201, 162, 39, 0.6),
        0 0 40px rgba(214, 172, 20, 0.3),
        0 0 60px rgba(227, 192, 74, 0.15) !important;
}

/* Hot game glow inner element */
.hot-game-glow {
    animation: volcanic-card-glow 3s ease-in-out infinite !important;
}

/* Light sweep on hot cards - orange tint */
.hot-game-card::before {
    background: linear-gradient(90deg, transparent, rgba(227, 192, 74, 0.08), transparent) !important;
}


/* ================================================================
   6. USER CARD / GUEST CARD
   ================================================================ */
#guest-info-card {
    background: linear-gradient(135deg, var(--vol-charcoal) 0%, var(--vol-obsidian) 100%) !important;
    border: 1px solid rgba(214, 172, 20, 0.15) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(227, 192, 74, 0.05) !important;
    /* Lava vein pattern */
    background-image:
        linear-gradient(155deg, transparent 48%, rgba(255, 200, 0, 0.04) 49.5%, rgba(255, 200, 0, 0.04) 50.5%, transparent 52%),
        linear-gradient(25deg, transparent 47%, rgba(255, 60, 0, 0.03) 49%, rgba(255, 60, 0, 0.03) 51%, transparent 53%) !important;
}

#guest-info-card div[class*="from-purple-500"] {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.2), rgba(227, 192, 74, 0.15)) !important;
    border-color: rgba(214, 172, 20, 0.3) !important;
}

#guest-info-card i[class*="fa-user"] {
    color: var(--lava-orange) !important;
}

/* Guest card login button */
#guest-info-card button[onclick*="loginModal"] {
    border-color: rgba(227, 192, 74, 0.3) !important;
    background: linear-gradient(135deg, rgba(214, 172, 20, 0.08), transparent) !important;
    color: var(--lava-orange) !important;
}

#guest-info-card button[onclick*="loginModal"]:hover {
    background: rgba(214, 172, 20, 0.15) !important;
}

/* User card wrapper */
.user-card-wrapper {
    animation: user-card-float 8s ease-in-out infinite !important;
}

.user-card-border-gradient {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 210, 45, 0.5) 45%,
        rgba(227, 192, 74, 0.6) 50%,
        rgba(255, 215, 0, 0.5) 55%,
        transparent 60%,
        transparent 100%
    ) !important;
}

.user-card-body {
    background: rgba(10, 2, 0, 0.85) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

.user-card-border-inner {
    background: linear-gradient(135deg, rgba(227, 192, 74, 0.08), rgba(255, 210, 45, 0.02)) !important;
}

/* Avatar glow - fire colors */
.user-avatar-glow {
    background: conic-gradient(from 0deg, transparent, rgba(255, 210, 45, 0.5), rgba(227, 192, 74, 0.5), rgba(255, 215, 0, 0.3), transparent) !important;
}

/* Avatar background */
.user-card-body .absolute[class*="bg-[#1a1025]"],
.user-card-body div[class*="bg-"][class*="rounded-full"] {
    background: var(--vol-obsidian) !important;
}

/* VIP badge */
#user-card-vip {
    background: rgba(214, 172, 20, 0.1) !important;
    border-color: rgba(227, 192, 74, 0.2) !important;
    color: var(--lava-bright) !important;
}

/* PayID label */
.user-card-body span[class*="text-purple-300"] {
    color: rgba(226, 207, 140, 0.7) !important;
}

/* Refresh button */
.user-card-body button[onclick*="refreshBalance"] {
    border-color: rgba(214, 172, 20, 0.1) !important;
    color: rgba(227, 192, 74, 0.5) !important;
}

.user-card-body button[onclick*="refreshBalance"]:hover {
    background: rgba(214, 172, 20, 0.1) !important;
    color: var(--lava-orange) !important;
}

/* Balance shine - volcanic colors */
.user-balance-shine {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.9) 40%,
        rgba(227, 192, 74, 0.8) 50%,
        rgba(255, 210, 45, 0.8) 60%,
        rgba(255, 255, 255, 0.9) 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Balance area border */
.user-card-body div[class*="rounded-2xl"][class*="border"] {
    border-color: rgba(214, 172, 20, 0.05) !important;
    background: rgba(255, 210, 45, 0.02) !important;
}

/* Info dots */
.user-card-body div[class*="bg-blue-500"] {
    background: var(--lava-hot) !important;
}

.user-card-body div[class*="bg-purple-500"] {
    background: var(--lava-orange) !important;
}


/* ================================================================
   7. BUTTONS (.btn-gold, .btn-partner-glow, etc.)
   ================================================================ */
.btn-gold {
    background: linear-gradient(135deg, #C9A227, #E3C04A, #FFD700) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 200, 0, 0.4) !important;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4), 0 0 20px rgba(214, 172, 20, 0.1) !important;
    text-shadow: 0 0 10px rgba(227, 192, 74, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 800 !important;
}

.btn-gold:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 6px 25px rgba(201, 162, 39, 0.5), 0 0 40px rgba(214, 172, 20, 0.2) !important;
}

.btn-gold:active {
    transform: scale(0.96) !important;
}

/* Partnership button */
.btn-partner-glow {
    background: linear-gradient(90deg, #CC2200 0%, #C9A227 50%, #E3C04A 100%) !important;
    background-size: 200% 200% !important;
    animation: partner-breathe-sun 2s infinite, gradient-shift 5s ease infinite !important;
    border: 1px solid rgba(227, 192, 74, 0.3) !important;
}

@keyframes partner-breathe-sun {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
        border-color: rgba(214, 172, 20, 0.4);
    }
    70% {
        box-shadow: 0 0 12px 6px rgba(201, 162, 39, 0);
        border-color: rgba(227, 192, 74, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
        border-color: rgba(214, 172, 20, 0.4);
    }
}

/* Deposit method button */
.deposit-method-btn {
    background: linear-gradient(90deg, #8B0000, #CC2200) !important;
    border-color: var(--lava-core) !important;
}

.deposit-method-btn:hover {
    filter: brightness(1.3) !important;
    box-shadow: 0 0 15px rgba(201, 162, 39, 0.3) !important;
}

/* Neon button override */
.btn-neon {
    background: linear-gradient(90deg, #CC2200, #C9A227) !important;
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.5) !important;
}


/* ================================================================
   8. SIDE MENU (#side-menu)
   ================================================================ */
#side-menu {
    background: #252a32 !important;
    background-image: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 12px 0 34px rgba(0, 0, 0, 0.34) !important;
}

/* Side menu header */
#side-menu > div:first-child,
#side-menu div[class*="border-b"][class*="bg-gradient"] {
    background: #2a3039 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Side menu logo */
#side-menu .brand-logo-box {
    background: #252a32 !important;
    background-image: none !important;
    border-color: rgba(255, 210, 74, 0.42) !important;
    box-shadow: none !important;
}

#side-menu div[class*="from-yellow-400"] {
    background: linear-gradient(135deg, #C9A227, #E3C04A, #FFD700) !important;
    box-shadow: 0 0 12px rgba(214, 172, 20, 0.4) !important;
}

#side-menu span[class*="text-yellow-400"] {
    color: var(--lava-yellow) !important;
}

/* Menu items */
#side-menu a {
    background: transparent !important;
    border-color: transparent !important;
    transition: all 0.2s ease !important;
}

#side-menu a:hover,
#side-menu a[class*="rounded-xl"]:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

#side-menu a:hover span,
#side-menu a:hover i,
#side-menu a[class*="rounded-xl"]:hover span {
    color: #FFD24A !important;
}

/* Active menu item (HOT GAMES etc.) */
#side-menu a[class*="from-purple-500"] {
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.2), rgba(214, 172, 20, 0.15)) !important;
    border-color: rgba(214, 172, 20, 0.4) !important;
}

#side-menu a[class*="from-purple-500"] div[class*="bg-purple-500"] {
    background: var(--lava-core) !important;
}

/* Menu item icons */
#side-menu div[class*="bg-purple-500/20"],
#side-menu div[class*="text-purple-400"] {
    background: rgba(201, 162, 39, 0.12) !important;
    color: var(--lava-orange) !important;
}

#side-menu i[class*="text-purple-400"],
#side-menu i[class*="fa-chevron-right"] {
    color: var(--lava-orange) !important;
}

/* Side menu close button */
#side-menu button[onclick*="toggleSideMenu"] {
    background: rgba(214, 172, 20, 0.1) !important;
    color: #FFD24A !important;
}

#side-menu button[onclick*="toggleSideMenu"] i {
    color: #FFD24A !important;
}

#side-menu button[onclick*="toggleSideMenu"]:hover {
    background: rgba(214, 172, 20, 0.2) !important;
    color: #FFD24A !important;
}

/* Side menu footer */
#side-menu > div.absolute.bottom-0,
#side-menu div[class*="bg-black/50"] {
    background: #2a3039 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Side menu overlay */
#side-menu-overlay {
    background: rgba(26, 29, 35, 0.46) !important;
}


/* ================================================================
   9. LIVE FEED SECTION
   ================================================================ */
/* Live feed container */
#view-home .mx-4.my-3[class*="rounded-xl"] {
    background: linear-gradient(180deg, var(--vol-charcoal) 0%, var(--vol-obsidian) 50%, var(--vol-dark) 100%) !important;
    border-color: rgba(214, 172, 20, 0.15) !important;
}

/* Top decorative line */
#view-home .mx-4.my-3 > div[class*="h-\\[1px\\]"] {
    background: linear-gradient(90deg, transparent, var(--lava-core), var(--lava-orange), transparent) !important;
}

/* Feed header row */
#view-home .mx-4.my-3 > div[class*="bg-black"] {
    background: rgba(10, 2, 0, 0.5) !important;
}

/* Feed online indicator */
#view-home .bg-green-500,
#view-home span[class*="bg-green-400"] {
    background: var(--lava-orange) !important;
}

/* Table header */
#live-feed-table thead tr {
    border-color: rgba(214, 172, 20, 0.2) !important;
}

#live-feed-table th {
    color: var(--lava-bright) !important;
    text-shadow: 0 0 5px rgba(227, 192, 74, 0.3) !important;
}

/* Feed gradient overlay */
.live-feed-container > .absolute[class*="pointer-events-none"] {
    background: linear-gradient(180deg, var(--vol-obsidian) 0%, transparent 30%, transparent 70%, var(--vol-obsidian) 100%) !important;
}

/* Feed animations - volcanic colors */
.feed-anim-deposit {
    animation: feedDepositVolcanic 3s ease-in-out forwards !important;
}

@keyframes feedDepositVolcanic {
    0% { background: rgba(227, 192, 74, 0.3); color: var(--lava-yellow); }
    9% { background: transparent; color: inherit; }
    20% { background: rgba(227, 192, 74, 0.25); color: var(--lava-yellow); }
    29% { background: transparent; color: inherit; }
    40% { background: rgba(227, 192, 74, 0.2); color: var(--lava-bright); }
    49% { background: transparent; color: inherit; }
    60% { background: rgba(227, 192, 74, 0.15); color: var(--lava-bright); }
    69% { background: transparent; color: inherit; }
    80% { background: rgba(214, 172, 20, 0.1); }
    100% { background: transparent; color: inherit; }
}

.feed-anim-withdraw {
    animation: feedWithdrawVolcanic 3s ease-in-out forwards !important;
}

@keyframes feedWithdrawVolcanic {
    0% { background: rgba(201, 162, 39, 0.35); color: #FF6B6B; }
    9% { background: transparent; color: inherit; }
    20% { background: rgba(201, 162, 39, 0.3); color: #FF6B6B; }
    29% { background: transparent; color: inherit; }
    40% { background: rgba(201, 162, 39, 0.25); }
    49% { background: transparent; color: inherit; }
    60% { background: rgba(201, 162, 39, 0.15); }
    69% { background: transparent; color: inherit; }
    80% { background: rgba(255, 40, 0, 0.1); }
    100% { background: transparent; color: inherit; }
}

/* Live tabs */
.live-tab.active {
    color: var(--lava-yellow) !important;
    border-color: var(--lava-orange) !important;
    background: rgba(214, 172, 20, 0.08) !important;
}

.live-tab:hover {
    color: var(--lava-bright) !important;
}


/* ================================================================
   10. TYPOGRAPHY - Roboto scale
   Hierarchy from Roboto's real weights (900/700/500) x size x case.
   ================================================================ */
h1, h2, h3,
.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl,
[class*="font-black"],
[class*="font-extrabold"] {
    font-family: var(--sun-font-display) !important;
}

/* Display tier — hero-scale, boldest */
h1,
.text-3xl, .text-4xl, .text-5xl,
[class*="font-black"] {
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.08 !important;
}

/* Heading tier — page/section titles */
h2,
.text-2xl,
[class*="font-extrabold"] {
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.15 !important;
}

/* Sub-heading tier */
h3,
.text-xl {
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    line-height: 1.15 !important;
}

/* Small section labels (e.g. "LIVE TRANSACTIONS") — uppercase is right
   here, but rein the tracking in from 3px so it reads tight, not loose. */
h3[class*="tracking-widest"],
[class*="uppercase"][class*="tracking-wider"],
[class*="uppercase"][class*="tracking-widest"] {
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 221, 100, 0.85) !important;
}


/* ================================================================
   11. SCROLLBAR - Volcanic obsidian
   ================================================================ */
#scroll-content::-webkit-scrollbar {
    width: 5px !important;
}

#scroll-content::-webkit-scrollbar-track {
    background: var(--vol-black) !important;
}

#scroll-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--lava-core), var(--lava-orange)) !important;
    border-radius: 10px !important;
}

#scroll-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--lava-orange), var(--lava-yellow)) !important;
}

/* Firefox */
#scroll-content {
    scrollbar-width: thin !important;
    scrollbar-color: var(--lava-core) var(--vol-black) !important;
}


/* ================================================================
   12. ANIMATIONS - Unique to Sun
   ================================================================ */
@keyframes lava-flow {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes ember-rise {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        opacity: 0.4;
    }
    50% {
        transform: translateY(-30px) rotate(1deg);
        opacity: 0.3;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
}

@keyframes magma-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
        box-shadow: 0 0 15px rgba(214, 172, 20, 0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
        box-shadow: 0 0 25px rgba(214, 172, 20, 0.5), 0 0 50px rgba(201, 162, 39, 0.2);
    }
}

@keyframes volcanic-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-0.5px, 0.5px); }
    20% { transform: translate(0.5px, -0.5px); }
    30% { transform: translate(-0.5px, 0); }
    40% { transform: translate(0.5px, 0.5px); }
    50% { transform: translate(-0.5px, -0.5px); }
    60% { transform: translate(0.5px, 0); }
    70% { transform: translate(0, 0.5px); }
    80% { transform: translate(-0.5px, 0); }
    90% { transform: translate(0.5px, -0.5px); }
}

@keyframes fire-border-pulse {
    0%, 100% {
        border-color: rgba(201, 162, 39, 0.3);
    }
    50% {
        border-color: rgba(227, 192, 74, 0.6);
    }
}

@keyframes heat-shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}


/* ================================================================
   13. CATEGORY TABS
   ================================================================ */
/* Game category tabs */
#view-games button,
#view-home button[class*="rounded"] {
    transition: all 0.2s ease !important;
}

/* Targeting category filter buttons in games view */
[id*="category"] button,
.category-tab,
#view-games .flex button[class*="rounded"] {
    border-radius: 4px !important;
    background: rgba(201, 162, 39, 0.06) !important;
    color: rgba(226, 207, 140, 0.6) !important;
    border: 1px solid rgba(214, 172, 20, 0.1) !important;
    transition: all 0.2s ease !important;
}

[id*="category"] button.active,
[id*="category"] button[class*="bg-"],
.category-tab.active {
    background: linear-gradient(135deg, #C9A227, #E3C04A) !important;
    color: #fff !important;
    border-color: rgba(255, 200, 0, 0.4) !important;
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.4), 0 0 25px rgba(214, 172, 20, 0.15) !important;
    text-shadow: 0 0 5px rgba(227, 192, 74, 0.3) !important;
}

[id*="category"] button:hover,
.category-tab:hover {
    background: rgba(201, 162, 39, 0.15) !important;
    color: var(--lava-orange) !important;
    border-color: rgba(214, 172, 20, 0.3) !important;
}


/* ================================================================
   14. SECONDARY BANNER (#home-banner-secondary)
   ================================================================ */
#home-banner-secondary {
    background: linear-gradient(135deg, #3d0000 0%, #8B0000 30%, #CC2200 60%, #C9A227 100%) !important;
    border: 1px solid rgba(214, 172, 20, 0.2) !important;
    box-shadow: 0 8px 30px rgba(201, 162, 39, 0.15) !important;
    overflow: hidden !important;
}

/* Lava texture overlay on secondary banner */
#home-banner-secondary::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(214, 172, 20, 0.03) 4px, rgba(214, 172, 20, 0.03) 5px),
        repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255, 60, 0, 0.02) 6px, rgba(255, 60, 0, 0.02) 7px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#home-banner-secondary > div[class*="bg-\\[url"] {
    opacity: 0.15 !important;
}

/* Secondary banner text */
#banner1-label {
    color: rgba(255, 221, 100, 0.8) !important;
}

#banner1-title span[class*="text-yellow-400"] {
    color: var(--lava-yellow) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* Secondary banner button */
#banner1-btn {
    background: rgba(201, 162, 39, 0.25) !important;
    border-color: rgba(227, 192, 74, 0.4) !important;
    color: #fff !important;
}

#banner1-btn:hover {
    background: rgba(201, 162, 39, 0.4) !important;
    box-shadow: 0 0 15px rgba(201, 162, 39, 0.3) !important;
}


/* ================================================================
   15. MODAL STYLES
   ================================================================ */
.modal {
    background: rgba(5, 1, 0, 0.92) !important;
}

.modal-content {
    background: linear-gradient(180deg, #20242b 0%, #171a1f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

/* Modal header gradients — subtle gold, no red */
.modal-content > div:first-child[class*="bg-gradient"],
.modal-content div[class*="from-purple"],
.modal-content div[class*="from-pink"] {
    background: linear-gradient(135deg, rgba(255, 213, 60, 0.14), rgba(227, 192, 74, 0.08), transparent) !important;
}

/* Modal inputs */
.modal-content .custom-input,
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content input[type="number"],
.modal-content input[type="tel"] {
    background: rgba(10, 2, 0, 0.6) !important;
    border-color: rgba(214, 172, 20, 0.15) !important;
}

.modal-content .custom-input:focus,
.modal-content input:focus {
    border-color: var(--lava-orange) !important;
    box-shadow: 0 0 12px rgba(214, 172, 20, 0.2) !important;
}

/* Modal close buttons */
.modal-content button[onclick*="closeModal"],
.modal-content button[class*="fa-xmark"] {
    color: rgba(226, 207, 140, 0.5) !important;
}

.modal-content button[onclick*="closeModal"]:hover {
    color: var(--lava-orange) !important;
}

.svj-auth-modal.modal {
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #1b2b34 !important;
    backdrop-filter: none !important;
    overflow-y: auto !important;
}

.svj-auth-modal .modal-content.svj-auth-content {
    width: 100% !important;
    max-width: 430px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #1b2b34 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 96px;
}

.svj-auth-topbar {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: #1b2b34;
}

.svj-auth-brand {
    order: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-right: auto;
    cursor: pointer;
}

.svj-auth-brand img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.svj-auth-brand > span {
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

.svj-auth-brand > span span {
    color: #24e486;
}

.svj-auth-actions {
    order: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.svj-auth-top-btn,
.svj-auth-icon-btn {
    height: 32px;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.svj-auth-top-btn {
    min-width: 76px;
    padding: 0 11px;
}

.svj-auth-top-btn.is-dark {
    background: #111b22 !important;
    color: #fff !important;
}

.svj-auth-top-btn.is-green {
    background: #24e486 !important;
    color: #052619 !important;
}

.svj-auth-modal .modal-content .svj-auth-icon-btn {
    order: 3;
    width: 32px;
    flex: 0 0 32px;
    background: #10202a !important;
    color: #fff !important;
}

.svj-auth-modal .modal-content .svj-auth-icon-btn:hover {
    color: #fff !important;
}

.svj-auth-card {
    margin: 58px 27px 0;
    padding: 16px;
    border-radius: 18px;
    background: #13262f;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

.svj-auth-card.is-register {
    margin-top: 16px;
}

.svj-auth-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 58px;
    margin-bottom: 15px;
    border-radius: 13px;
    background: #213943;
    color: rgba(255, 255, 255, 0.58);
    font-size: 15px;
    font-weight: 900;
}

.svj-auth-tab {
    position: relative;
    min-width: 68px;
    padding: 0 0 9px;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font: inherit;
    line-height: 1.2;
    box-shadow: none !important;
}

.svj-auth-tab.is-active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #25e58a;
    box-shadow: 0 0 10px rgba(37, 229, 138, 0.7);
}

.svj-auth-fields {
    display: grid;
    gap: 11px;
}

.svj-auth-label {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.svj-auth-required,
.svj-auth-hint {
    color: #ff4f58;
}

.svj-auth-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
}

.svj-auth-modal .svj-auth-content input[type="text"],
.svj-auth-modal .svj-auth-content input[type="password"],
.svj-auth-modal .svj-auth-content input[type="tel"],
.svj-auth-modal .svj-auth-content select {
    width: 100%;
    height: 48px;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f4f4f4 !important;
    color: #26313a !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
}

.svj-auth-modal .svj-auth-content input::placeholder {
    color: #89929b !important;
    opacity: 1;
}

.svj-auth-modal .svj-auth-content input:focus,
.svj-auth-modal .svj-auth-content select:focus {
    border: 0 !important;
    box-shadow: 0 0 0 2px rgba(36, 228, 134, 0.35) !important;
}

.svj-auth-password-field,
.svj-auth-input-badge {
    position: relative;
}

.svj-auth-password-field input {
    padding-right: 46px !important;
}

.svj-auth-eye {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 48px;
    border: 0 !important;
    background: transparent !important;
    color: #18232b !important;
    box-shadow: none !important;
}

.svj-auth-phone-row {
    display: flex;
    height: 48px;
    overflow: hidden;
    border-radius: 5px;
    background: #f4f4f4;
}

.svj-auth-phone-row select {
    width: 90px !important;
    flex: 0 0 90px;
    border-radius: 0 !important;
    border-right: 1px solid #d2d8dc !important;
    padding: 0 7px !important;
}

.svj-auth-phone-row input {
    min-width: 0;
    border-radius: 0 !important;
}

.svj-auth-input-badge input {
    padding-right: 82px !important;
}

.svj-auth-input-badge span {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: #dfe4e7;
    color: #54616a;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.svj-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
}

.svj-auth-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.svj-auth-remember input {
    width: 17px;
    height: 17px;
    accent-color: #24e486;
}

.svj-auth-link {
    border: 0 !important;
    background: transparent !important;
    color: #25e58a !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.svj-auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(190px, 100%);
    min-height: 42px;
    margin: 22px auto 0;
    border: 0 !important;
    border-radius: 8px !important;
    background: #24e486 !important;
    color: #052619 !important;
    box-shadow: 0 7px 14px rgba(36, 228, 134, 0.24) !important;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

.svj-auth-sms-box {
    padding: 10px;
    border-radius: 5px;
    background: #e5e5e5;
    color: #56626b;
}

.svj-auth-sms-box p {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
}

.svj-auth-code-row {
    display: flex;
    gap: 8px;
}

.svj-auth-code-row input {
    min-width: 0;
}

.svj-auth-code-row button {
    width: 98px;
    flex: 0 0 98px;
    min-height: 48px;
    border: 0 !important;
    border-radius: 5px !important;
    background: #24e486 !important;
    color: #052619 !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 900;
}

.svj-auth-copy {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.48);
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
}

@media (max-width: 360px) {
    .svj-auth-card {
        margin-left: 16px;
        margin-right: 16px;
    }

    .svj-auth-brand > span {
        display: none;
    }

    .svj-auth-top-btn {
        min-width: 68px;
        padding: 0 8px;
    }
}


/* ================================================================
   TICKER
   ================================================================ */
#scroll-content > div:first-child,
div[class*="ticker"] {
    background: rgba(10, 2, 0, 0.6) !important;
    border-color: rgba(214, 172, 20, 0.05) !important;
}


/* ================================================================
   QUICK ACTION ICONS
   ================================================================ */
#view-home .grid.grid-cols-4 div[class*="rounded-2xl"] {
    background: var(--vol-charcoal) !important;
    border-color: rgba(214, 172, 20, 0.1) !important;
    color: var(--lava-orange) !important;
}

#view-home .grid.grid-cols-4 div[class*="rounded-2xl"]:hover,
#view-home .grid.grid-cols-4 .group:hover div[class*="rounded-2xl"] {
    border-color: var(--lava-orange) !important;
    background: rgba(214, 172, 20, 0.1) !important;
    box-shadow: 0 0 12px rgba(214, 172, 20, 0.2) !important;
}

#view-home .grid.grid-cols-4 i[class*="text-yellow-400"] {
    color: var(--lava-orange) !important;
}


/* ================================================================
   GLASS PANEL OVERRIDE
   ================================================================ */
.glass-panel {
    background: rgba(10, 2, 0, 0.9) !important;
    border-color: rgba(214, 172, 20, 0.08) !important;
}


/* ================================================================
   PROMO CARDS - Volcanic Overrides
   ================================================================ */
.promo-glow-card {
    background: linear-gradient(180deg, var(--vol-ember) 0%, var(--vol-dark) 100%) !important;
    border-color: rgba(201, 162, 39, 0.3) !important;
}

.promo-card-breathe,
.promo-card-active {
    animation: promo-breathe-volcanic 2.5s infinite ease-in-out !important;
}

@keyframes promo-breathe-volcanic {
    0%, 100% {
        box-shadow: 0 0 5px rgba(201, 162, 39, 0.2), inset 0 0 20px rgba(214, 172, 20, 0.02);
        border-color: rgba(201, 162, 39, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(201, 162, 39, 0.4), inset 0 0 30px rgba(214, 172, 20, 0.05);
        border-color: rgba(227, 192, 74, 0.8);
    }
}


/* ================================================================
   BONUS CARDS - Volcanic Gold
   ================================================================ */
.bonus-card-glow {
    background: linear-gradient(135deg, rgba(26, 21, 4, 0.95) 0%, rgba(15, 12, 0, 0.98) 100%) !important;
    border-color: rgba(227, 192, 74, 0.3) !important;
}

.bonus-card-glow::before {
    background: linear-gradient(90deg, transparent 0%, rgba(227, 192, 74, 0.8) 25%, rgba(255, 215, 0, 1) 50%, rgba(227, 192, 74, 0.8) 75%, transparent 100%) !important;
    background-size: 200% 100% !important;
}

.bonus-card-glow::after {
    background: linear-gradient(135deg, rgba(20, 16, 2, 0.98) 0%, rgba(10, 8, 0, 0.99) 100%) !important;
}

.bonus-card-glow.can-claim {
    border-color: rgba(255, 200, 0, 0.6) !important;
    box-shadow: 0 0 15px rgba(227, 192, 74, 0.3), 0 0 30px rgba(214, 172, 20, 0.1) !important;
}


/* ================================================================
   VIP SHIMMER - Orange
   ================================================================ */
.vip-shimmer {
    background: linear-gradient(45deg, transparent 40%, rgba(227, 192, 74, 0.1) 50%, transparent 60%) !important;
    background-size: 200% 200% !important;
}


/* ================================================================
   PREMIUM CARD
   ================================================================ */
.premium-card {
    background: linear-gradient(145deg, var(--vol-charcoal), var(--vol-dark)) !important;
    border-color: rgba(214, 172, 20, 0.08) !important;
}


/* ================================================================
   TOAST
   ================================================================ */
.toast {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.15) !important;
}


/* ================================================================
   VIEW SECTIONS - All pages get volcanic background
   ================================================================ */
.view-section {
    color: #fff !important;
}

/* Section headings */
.view-section h2 {
    font-family: var(--sun-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}
.view-section h3 {
    font-family: var(--sun-font-display) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}


/* ================================================================
   FORM INPUTS - Global
   ================================================================ */
.custom-input {
    background: rgba(10, 2, 0, 0.5) !important;
    border-color: rgba(214, 172, 20, 0.12) !important;
}

.custom-input:focus {
    border-color: var(--lava-orange) !important;
    box-shadow: 0 0 12px rgba(214, 172, 20, 0.25) !important;
}


/* ================================================================
   DEPOSIT VIEW - Override purple/pink colors
   ================================================================ */
#view-deposit div[class*="from-purple"],
#view-deposit div[class*="from-pink"],
#view-deposit div[class*="bg-purple"] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.3), rgba(201, 162, 39, 0.2)) !important;
}

#view-deposit [class*="text-purple"] {
    color: var(--lava-orange) !important;
}

#view-deposit [class*="border-purple"] {
    border-color: rgba(214, 172, 20, 0.3) !important;
}


/* ================================================================
   HISTORY VIEW - Override purple/pink
   ================================================================ */
#view-history [class*="text-purple"] {
    color: var(--lava-orange) !important;
}

#view-history [class*="border-purple"] {
    border-color: rgba(214, 172, 20, 0.2) !important;
}


/* ================================================================
   SETTINGS VIEW
   ================================================================ */
#view-setting [class*="text-purple"] {
    color: var(--lava-orange) !important;
}

#view-setting [class*="bg-purple"] {
    background: rgba(201, 162, 39, 0.15) !important;
}

.setting-vip-detail-btn {
    width: 100%;
    height: 34px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 74, 0.28);
    background: rgba(255, 210, 74, 0.08);
    color: #FFD24A;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ================================================================
   VIP VIEW
   ================================================================ */
#view-vip.vip-page {
    min-height: calc(100dvh - 60px);
    padding: 14px 14px 96px;
    background: var(--sun-slate-page, #1a1d23) !important;
    color: #fff !important;
}

.vip-page-header {
    max-width: 980px;
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 10px;
}

.vip-page-header h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 900 !important;
}

.vip-eyebrow {
    margin: 0 0 2px;
    color: #FFD24A;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 1px;
}

.vip-back-btn,
.vip-support-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--sun-slate-card, #20242b);
    color: #d1d5db;
}

.vip-hero-panel,
.vip-current-card,
.vip-section,
.vip-note-card {
    max-width: 980px;
    margin: 0 auto 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--sun-slate-card, #20242b);
    box-shadow: none;
}

.vip-hero-panel {
    position: relative;
    overflow: hidden;
    min-height: 224px;
    padding: 16px;
    background:
        linear-gradient(90deg, rgba(32, 36, 43, 0.96) 0%, rgba(32, 36, 43, 0.88) 45%, rgba(32, 36, 43, 0.5) 72%, rgba(32, 36, 43, 0.22) 100%),
        linear-gradient(135deg, rgba(255, 210, 74, 0.18), rgba(227, 192, 74, 0.08) 42%, rgba(255, 255, 255, 0.02)),
        url('/images/vip/vip-hero-rewards.webp');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.vip-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #FFD24A, #E3C04A, #FFD24A);
}

.vip-hero-badge {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 74, 0.24);
    background: rgba(255, 210, 74, 0.1);
    color: #FFD24A;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.vip-hero-panel h3 {
    margin: 0 0 7px;
    font-size: 24px;
    line-height: 1.05;
    font-weight: 900 !important;
}

.vip-hero-panel p {
    max-width: 620px;
    margin: 0;
    color: #c9d0d8;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
}

.vip-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.vip-primary-btn,
.vip-secondary-btn {
    min-width: 104px;
    height: 38px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.vip-primary-btn {
    background: linear-gradient(135deg, #FFD24A, #E3C04A);
    color: #111827;
}

.vip-secondary-btn {
    border: 1px solid rgba(255, 210, 74, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #FFD24A;
}

.vip-current-card {
    padding: 14px;
}

.vip-current-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.vip-current-top p,
.vip-current-rate span,
.vip-progress-meta,
.vip-next-text,
.vip-login-note {
    color: #9ca3af;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 800;
}

.vip-current-top strong {
    display: block;
    margin-top: 2px;
    color: #FFD24A;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

.vip-current-rate {
    min-width: 86px;
    text-align: right;
}

.vip-current-rate b {
    display: block;
    margin-top: 2px;
    color: #86efac;
    font-size: 19px;
    line-height: 1;
}

.vip-progress-meta {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.vip-progress-track {
    height: 8px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.vip-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #E3C04A, #FFD24A, #fff1a8);
    transition: width 0.35s ease;
}

.vip-next-text {
    margin-top: 7px;
    color: #fcd34d;
}

.vip-login-note {
    margin-top: 8px;
    color: #d1d5db;
}

.vip-section {
    padding: 12px;
}

.vip-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.vip-section-title i {
    color: #FFD24A;
    font-size: 13px;
}

.vip-section-title h3,
.vip-note-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.vip-media-card {
    position: relative;
    height: 118px;
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 74, 0.16);
    background: #171a1f;
}

.vip-media-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(26, 29, 35, 0.04), rgba(26, 29, 35, 0.36)),
        linear-gradient(90deg, rgba(26, 29, 35, 0.12), transparent 52%, rgba(26, 29, 35, 0.14));
    pointer-events: none;
}

.vip-media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vip-benefits-media img {
    object-position: center right;
}

.vip-levels-media img {
    object-position: center center;
}

.vip-level-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(138px, 1fr);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
}

.vip-level-strip::-webkit-scrollbar {
    height: 0;
}

.vip-tier-card {
    min-height: 146px;
    scroll-snap-align: start;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--sun-slate-card-soft, #252a32);
    padding: 11px;
}

.vip-tier-card.is-active {
    border-color: rgba(255, 210, 74, 0.58);
    background:
        linear-gradient(135deg, rgba(255, 210, 74, 0.13), rgba(255, 255, 255, 0.03)),
        var(--sun-slate-card-soft, #252a32);
}

.vip-tier-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 210, 74, 0.14);
    color: #FFD24A;
}

.vip-tier-card[data-vip-level="BRONZE"] .vip-tier-icon { color: #fbd23c; }
.vip-tier-card[data-vip-level="SILVER"] .vip-tier-icon { color: #d1d5db; }
.vip-tier-card[data-vip-level="GOLD"] .vip-tier-icon { color: #FFD24A; }
.vip-tier-card[data-vip-level="PLATINUM"] .vip-tier-icon { color: #f5f5f4; }
.vip-tier-card[data-vip-level="DIAMOND"] .vip-tier-icon { color: #ffffff; }

.vip-tier-name {
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
}

.vip-tier-require {
    margin-top: 5px;
    color: #9ca3af;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
}

.vip-tier-rate {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

.vip-tier-rate span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #aeb6c1;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
}

.vip-tier-rate b {
    color: #fcd34d;
}

.vip-benefit-grid,
.vip-steps {
    display: grid;
    gap: 8px;
}

.vip-benefit-item,
.vip-steps div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-benefit-item i {
    width: 28px;
    color: #FFD24A;
    text-align: center;
}

.vip-benefit-item span,
.vip-steps span {
    color: #d1d5db;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}

.vip-steps b {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #FFD24A;
    color: #111827;
    font-size: 11px;
    font-weight: 900;
}

.vip-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.vip-table {
    width: 100%;
    min-width: 430px;
    border-collapse: collapse;
    background: var(--sun-slate-card-soft, #252a32);
}

.vip-table th,
.vip-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.25;
}

.vip-table th {
    color: #FFD24A;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 210, 74, 0.08);
}

.vip-table td {
    color: #d1d5db;
    font-weight: 800;
}

.vip-table tr.is-active td {
    background: rgba(255, 210, 74, 0.08);
}

.vip-table-level {
    color: #fff;
    font-weight: 900;
}

.vip-note-card {
    padding: 12px;
}

.vip-note-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vip-note-card h3 i {
    color: #FFD24A;
}

.vip-note-card p {
    margin-top: 8px;
    color: #aeb6c1;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 700;
}

.vip-loading {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 800;
    padding: 12px;
}

@media (min-width: 768px) {
    .vip-hero-panel,
    .vip-current-card,
    .vip-section,
    .vip-note-card {
        margin-bottom: 14px;
    }

    .vip-benefit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vip-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vip-media-card {
        height: 150px;
    }
}


/* ================================================================
   CHAT VIEW
   ================================================================ */
#view-chat [class*="text-purple"],
#view-chat [class*="bg-purple"] {
    color: var(--lava-orange) !important;
}

/* ================================================================
   LEADERBOARD MODAL
   ================================================================ */
.s96-leaderboard-modal {
    width: min(100%, 760px);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 210, 74, 0.26);
    background: var(--sun-slate-card, #20242b);
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62);
}

.s96-leaderboard-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 14, 18, 0.72);
    color: #d1d5db;
}

.s96-leaderboard-hero {
    position: relative;
    height: 150px;
    flex: 0 0 auto;
    overflow: hidden;
    background: #111418;
}

.s96-leaderboard-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s96-leaderboard-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20, 23, 28, 0.94), rgba(20, 23, 28, 0.48) 58%, rgba(20, 23, 28, 0.18)),
        linear-gradient(180deg, transparent 40%, rgba(20, 23, 28, 0.92));
}

.s96-leaderboard-hero-copy {
    position: absolute;
    left: 14px;
    right: 46px;
    bottom: 13px;
    z-index: 2;
}

.s96-leaderboard-hero-copy span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FFD24A;
    font-size: 9px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.s96-leaderboard-hero-copy h2 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    font-weight: 1000;
}

.s96-leaderboard-hero-copy p {
    max-width: 420px;
    margin: 7px 0 0;
    color: #c8cdd6;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}

.s96-leaderboard-body {
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

.s96-leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.s96-leaderboard-tabs button {
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--sun-slate-card-soft, #252a32);
    color: #9ca3af;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
}

.s96-leaderboard-tabs button.is-active {
    border-color: rgba(255, 210, 74, 0.5);
    background: linear-gradient(135deg, #FFD24A, #E3C04A);
    color: #111827;
}

.s96-leaderboard-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.s96-leaderboard-summary > div {
    min-height: 54px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.s96-leaderboard-summary span {
    display: block;
    color: #9ca3af;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.s96-leaderboard-summary strong {
    display: block;
    margin-top: 7px;
    color: #FFD24A;
    font-size: 18px;
    line-height: 1;
    font-weight: 1000;
}

.s96-leaderboard-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.s96-lb-podium-card {
    min-width: 0;
    position: relative;
    overflow: hidden;
    min-height: 148px;
    padding: 10px 7px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 210, 74, 0.16), transparent 55%),
        var(--sun-slate-card-soft, #252a32);
    text-align: center;
}

.s96-lb-podium-card.rank-1 {
    border-color: rgba(255, 210, 74, 0.62);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 210, 74, 0.28), transparent 60%),
        linear-gradient(180deg, rgba(255, 210, 74, 0.1), rgba(255, 255, 255, 0.03)),
        var(--sun-slate-card-soft, #252a32);
}

.s96-lb-rank-badge {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(255, 210, 74, 0.13);
    color: #FFD24A;
    font-size: 9px;
    line-height: 1;
    font-weight: 1000;
}

.s96-lb-avatar {
    width: 40px;
    height: 40px;
    margin: 9px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 210, 74, 0.38);
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 236, 160, 0.35), transparent 36%),
        linear-gradient(135deg, #1a1d23, #090b0f);
}

.s96-lb-avatar span {
    color: #FFD24A;
    font-size: 17px;
    line-height: 1;
    font-weight: 1000;
}

.s96-lb-podium-card h3 {
    margin: 8px 0 0;
    min-width: 0;
    color: #fff;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 1000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s96-lb-podium-card p {
    margin: 4px 0 0;
    color: #9ca3af;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
}

.s96-lb-podium-card strong {
    display: block;
    margin-top: 8px;
    color: #FFD24A;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 1000;
    overflow-wrap: anywhere;
}

.s96-lb-podium-card small {
    display: block;
    margin-top: 4px;
    color: #c8cdd6;
    font-size: 8px;
    line-height: 1.2;
    font-weight: 800;
}

.s96-leaderboard-list-head {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) minmax(96px, auto);
    gap: 8px;
    margin-top: 12px;
    padding: 0 8px 5px;
    color: #9ca3af;
    font-size: 9px;
    line-height: 1;
    font-weight: 1000;
    text-transform: uppercase;
}

.s96-leaderboard-list-head span:last-child {
    text-align: right;
}

.s96-leaderboard-list {
    display: grid;
    gap: 7px;
}

.s96-lb-row {
    min-height: 52px;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) minmax(96px, auto);
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
}

.s96-lb-row.is-top {
    border-color: rgba(255, 210, 74, 0.2);
    background: rgba(255, 210, 74, 0.06);
}

.s96-lb-row-rank {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #FFD24A;
    font-size: 10px;
    font-weight: 1000;
}

.s96-lb-row-player {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s96-lb-row-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 210, 74, 0.12);
    color: #FFD24A;
    font-size: 12px;
    font-weight: 1000;
}

.s96-lb-row-player strong,
.s96-lb-row-player span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s96-lb-row-player strong {
    color: #fff;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 1000;
}

.s96-lb-row-player span {
    margin-top: 4px;
    color: #9ca3af;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
}

.s96-lb-row-amount {
    color: #FFD24A;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 1000;
    text-align: right;
    overflow-wrap: anywhere;
}

.s96-leaderboard-loading,
.s96-leaderboard-empty {
    grid-column: 1 / -1;
    min-height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: #9ca3af;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.s96-leaderboard-empty i {
    color: #FFD24A;
    font-size: 18px;
}

.s96-leaderboard-empty strong {
    color: #fff;
    font-size: 12px;
}

.s96-leaderboard-empty span {
    max-width: 260px;
    color: #9ca3af;
    font-size: 10px;
    line-height: 1.35;
}

.s96-leaderboard-empty.is-error i {
    color: #f87171;
}

.s96-leaderboard-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #1a1d23;
}

.s96-leaderboard-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.s96-leaderboard-footer i {
    color: #FFD24A;
}

.s96-leaderboard-footer button {
    height: 32px;
    min-width: 92px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FFD24A, #E3C04A);
    color: #111827 !important;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .s96-leaderboard-hero {
        height: 190px;
    }

    .s96-leaderboard-body {
        padding: 14px;
    }

    .s96-lb-podium-card {
        min-height: 164px;
        padding: 12px 10px;
    }

    .s96-lb-avatar {
        width: 48px;
        height: 48px;
    }

    .s96-lb-avatar span {
        font-size: 20px;
    }

    .s96-lb-podium-card h3 {
        font-size: 13px;
    }

    .s96-lb-podium-card strong {
        font-size: 12px;
    }
}


/* ================================================================
   PARTNERSHIP VIEW
   ================================================================ */
#view-partnership [class*="from-purple"],
#view-partnership [class*="from-pink"] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.3), rgba(201, 162, 39, 0.2)) !important;
}

#view-partnership [class*="text-purple"] {
    color: var(--lava-orange) !important;
}

#view-partnership [class*="text-pink"] {
    color: var(--lava-hot) !important;
}


/* ================================================================
   GENERIC PURPLE/PINK OVERRIDES
   All remaining purple/pink Tailwind classes → volcanic orange/red
   ================================================================ */
[class*="border-purple-500/30"],
[class*="border-purple-500/50"],
[class*="border-purple-500/20"] {
    border-color: rgba(214, 172, 20, 0.2) !important;
}

[class*="from-purple-500/20"],
[class*="from-purple-500/30"],
[class*="to-pink-500/20"],
[class*="to-pink-500/30"],
[class*="from-purple-900/50"],
[class*="to-pink-900/50"] {
    --tw-gradient-from: rgba(201, 162, 39, 0.15) !important;
    --tw-gradient-to: rgba(227, 192, 74, 0.1) !important;
}

[class*="text-purple-400"],
[class*="text-purple-300"] {
    color: var(--lava-orange) !important;
}

[class*="text-pink-400"],
[class*="text-pink-300"] {
    color: var(--lava-hot) !important;
}

[class*="bg-purple-500/20"],
[class*="bg-purple-500/30"] {
    background: rgba(201, 162, 39, 0.12) !important;
}

[class*="bg-purple-500"] {
    background: var(--lava-core) !important;
}

/* Gold/yellow text stays but gets volcanic tone */
[class*="text-yellow-400"] {
    color: var(--lava-yellow) !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.2) !important;
}

[class*="border-yellow-500/30"] {
    border-color: rgba(227, 192, 74, 0.3) !important;
}

#leaderboardModal .s96-leaderboard-footer button {
    color: #111827 !important;
    text-shadow: none !important;
}


/* ================================================================
   HOVER MICRO-VIBRATION on interactive elements
   ================================================================ */
.game-card:hover,
.hot-game-card:hover,
.btn-gold:hover {
    animation: volcanic-shake 0.4s ease-in-out !important;
}


/* ================================================================
   ACTIVE NAV INDICATOR GLOW
   ================================================================ */
.nav-item.active-nav {
    position: relative !important;
}

.nav-item.active-nav::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 20px !important;
    background: radial-gradient(ellipse at center, rgba(214, 172, 20, 0.4) 0%, transparent 70%) !important;
    pointer-events: none !important;
    filter: blur(4px) !important;
}


/* ================================================================
   LIVE FEED NEW ITEM - Volcanic highlight
   ================================================================ */
.live-feed-new {
    background: rgba(227, 192, 74, 0.1) !important;
    border-color: rgba(227, 192, 74, 0.3) !important;
}


/* ================================================================
   CLEAR BALANCE BUTTON - Gold on a faint volcanic wash
   ================================================================ */
.user-clear-btn {
    border-color: rgba(201, 162, 39, 0.15) !important;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.05), rgba(204, 34, 0, 0.05)) !important;
    color: rgba(227, 192, 74, 0.8) !important;
}

.user-clear-btn-active {
    border-color: rgba(201, 162, 39, 0.3) !important;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.1), rgba(204, 34, 0, 0.1)) !important;
    color: rgba(255, 210, 74, 0.9) !important;
}


/* ================================================================
   SELECTION & FOCUS
   ================================================================ */
::selection {
    background: rgba(214, 172, 20, 0.3) !important;
    color: #fff !important;
}

:focus-visible {
    outline: 2px solid rgba(214, 172, 20, 0.5) !important;
    outline-offset: 2px !important;
}


/* ================================================================
   PAGE BACKGROUND - soft slate gray (svj33au-style, not near-black)
   Force the page containers so the content area matches the chrome.
   ================================================================ */
html,
body,
#app-layout,
#scroll-content {
    background-color: #1a1d23 !important;
}

:root {
    --sun-slate-page: #1a1d23;
    --sun-slate-card: #20242b;
    --sun-slate-card-soft: #252a32;
}


/* ================================================================
   FLAT DESIGN — strip card chrome & dark fills so everything sits flat
   on the slate-gray page (no card boxes, no black backgrounds).
   ================================================================ */
/* Live feed */
#live-feed-section,
#live-feed-section > div,
#live-feed-section .live-feed-container {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* Balance / user card — flat, no border, no float animation */
#guest-info-card,
#user-info-card,
#user-info-card > div,
.user-card-wrapper,
.user-card-body,
.user-card-border-gradient,
.user-card-border-inner {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}
/* Game cards & provider cards — no dark fill, no frame, no breathing animation */
.game-card,
.hot-game-card,
.pokies-card,
.pokies-tab,
.pokies-shortcut,
.provider-card,
.provider-card > div,
.provider-card-sun,
.provider-card-sun .provider-card-inner {
    background: var(--sun-slate-card) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    animation: none !important;
}

#pokies-tabs .pokies-tab,
#view-home button[onclick*="scrollPokiesShortcuts"],
#pokies-games-grid .pokies-card,
#pokies-games-grid .pokies-card > div,
#providers-grid .provider-card,
#providers-grid .provider-card > div,
#all-providers-grid .provider-card,
#all-providers-grid .provider-card > div,
#provider-games-grid .game-card,
#provider-games-grid .game-card > div,
#hot-games-section .hot-game-card,
#hot-games-section .hot-game-card > div {
    background: var(--sun-slate-card) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.game-card [class*="bg-black"],
.hot-game-card [class*="bg-black"],
.pokies-card [class*="bg-black"],
.provider-card [class*="bg-black"],
.bonus-card [class*="bg-black"] {
    background: var(--sun-slate-card) !important;
    background-image: none !important;
}

#pokies-tabs .active-pokies-tab {
    background: var(--sun-slate-card-soft) !important;
    border-color: rgba(255, 210, 74, 0.55) !important;
}

#view-games > .sticky,
#view-provider-games > .sticky,
#view-games input,
#view-games .category-btn,
#view-provider-games button[onclick*="switchView"],
#imperium-provider-tabs button,
.imperium-provider-tab {
    background: var(--sun-slate-card) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

#view-games .category-btn.active,
#imperium-provider-tabs button.active,
.imperium-provider-tab.active {
    background: var(--sun-slate-card-soft) !important;
    border-color: rgba(255, 210, 74, 0.55) !important;
}

/* Footer, promo page, and bonus cards — remove leftover black panels. */
#view-home > .px-4.pt-6.border-t,
#view-promo,
#view-promo > div,
#promo-bonus-list,
#promo-bonus-list .bonus-card,
#promo-bonus-list .bonus-card-glow,
#promo-bonus-list .bonus-card-glow::after,
#promo-bonus-list .promo-glow-card {
    background: var(--sun-slate-card) !important;
    background-image: none !important;
    box-shadow: none !important;
}

#view-home > .px-4.pt-6.border-t,
#promo-bonus-list .bonus-card,
#promo-bonus-list .bonus-card-glow {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Promo bonus detail popup contrast and rule table. */
#luckyBoxModal.promo-detail-test .modal-content {
    background: linear-gradient(180deg, #242a32 0%, #171b21 100%) !important;
    border-color: rgba(255, 210, 74, 0.52) !important;
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.62), 0 0 28px rgba(255, 210, 74, 0.12) !important;
}

#luckyBoxModal.promo-detail-test #luckybox-title {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
}

#luckyBoxModal.promo-detail-test h4 {
    color: #FFD24A !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
}

#luckyBoxModal.promo-detail-test #luckybox-requirements-table {
    border-collapse: collapse;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-row {
    background: #d9dee1;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-row.is-alt {
    background: #aeb6bc;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-label,
#luckyBoxModal.promo-detail-test .s96-promo-rule-value {
    padding: 9px 10px;
    color: #10151a;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    vertical-align: middle;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-label {
    width: 38%;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-value {
    text-align: right;
    color: #182632;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-value.is-danger {
    color: #c1121f;
    font-size: 10px;
    line-height: 1.25;
}

#luckyBoxModal.promo-detail-test .s96-promo-rule-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD24A, #ffe08a);
    color: #141414;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

#luckyBoxModal.promo-detail-test #luckybox-terms {
    display: grid;
    gap: 8px;
}

#luckyBoxModal.promo-detail-test .s96-promo-term {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: #e8edf2;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}

#luckyBoxModal.promo-detail-test .s96-promo-term span {
    color: #FFD24A;
    font-weight: 1000;
    line-height: 1.35;
}

#luckyBoxModal.promo-detail-test .s96-promo-term p {
    margin: 0;
}

#luckyBoxModal.promo-detail-test .modal-content > .flex-shrink-0 {
    padding: 8px 16px 12px !important;
    gap: 8px !important;
}

#luckyBoxModal.promo-detail-test .modal-content > .flex-shrink-0 button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#luckyBoxModal.promo-detail-test .s96-license-footer {
    min-height: 16px;
}

#luckyBoxModal.promo-detail-test .s96-license-icons {
    height: 20px;
    max-width: 210px;
}

.s96-license-icons {
    display: block;
    width: auto;
    height: 18px;
    max-width: 190px;
    object-fit: contain;
    opacity: 0.9;
}

.s96-license-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
}


/* ================================================================
   POWER / HEAT SAVER — kill always-on full-screen animations and
   backdrop blur that pin the GPU 24/7. (They also no longer fit the
   flat gray design.) This is the biggest battery/heat win.
   ================================================================ */
/* Full-screen animated corona glow + rising embers — remove entirely */
body::before,
body::after {
    display: none !important;
    animation: none !important;
}
/* Frosted-glass blur recomputes every frame on mobile — drop it (nav is
   already a solid slate color) */
#app-header,
#bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Stop the logo's infinite pulse */
#app-header .w-9.h-9,
#app-header div[class*="from-yellow-400"] {
    animation: none !important;
}


/* ================================================================
   POWER PASS 2 — kill ALL frosted-glass blur (heaviest mobile-GPU cost)
   and any leftover casino-decor (falling coins). Flat design needs none.
   ================================================================ */
*,
*::before,
*::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[id^="sun-casino-"] {
    display: none !important;
}


/* ================================================================
   TEXT COLOR SYSTEM — consolidate scattered grays/golds into one
   canonical set so text reads consistently site-wide.
   secondary = lighter meta, muted = dim meta, accent = the one gold.
   ================================================================ */
:root {
    --text-secondary: #c8cdd6;
    --text-muted: #8a909c;
    --text-accent: #FFD24A;
}
.text-gray-200,
.text-gray-300 { color: var(--text-secondary) !important; }
.text-gray-400,
.text-gray-500,
.text-gray-600 { color: var(--text-muted) !important; }
.text-yellow-200,
.text-yellow-300,
.text-yellow-400,
.text-yellow-500,
.text-amber-300,
.text-amber-400 { color: var(--text-accent) !important; }

/* Provider slot cards - generated artwork with real text labels */
#providers-grid .provider-card.s96-provider-slot-card,
#all-providers-grid .provider-card.s96-provider-slot-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame,
#all-providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 35% 12%, rgba(255,255,255,0.11), transparent 34%),
        linear-gradient(180deg, #2b3034 0%, #202427 58%, #17191b 100%) !important;
    border: 1.5px solid #ffc800 !important;
    box-shadow: 0 0 0 1px rgba(255,200,0,0.1), 0 6px 14px rgba(0,0,0,0.32) !important;
    transition: transform 0.18s ease;
}

#providers-grid .provider-card.s96-provider-slot-card:active > .s96-provider-slot-frame,
#all-providers-grid .provider-card.s96-provider-slot-card:active > .s96-provider-slot-frame {
    transform: scale(0.97);
}

.s96-provider-slot-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08) 0 20%, transparent 21% 100%),
        linear-gradient(315deg, rgba(255,255,255,0.05) 0 15%, transparent 16% 100%);
    opacity: 0.8;
}

.s96-provider-slot-art {
    position: absolute;
    inset: 0 0 18% 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

.s96-provider-slot-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
}

.s96-provider-slot-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: linear-gradient(180deg, rgba(36,38,40,0.95), rgba(18,19,20,0.98)) !important;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: #f4f4f4;
    font-size: clamp(10px, 3vw, 15px);
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s96-provider-slot-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 4;
    min-width: 42px;
    height: 27px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 0 8px;
    background: #ffc800;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0,0,0,0.38);
}

/* ===== New-member-bonus game lock (only LL + AES playable) ===== */
.provider-card.s96-game-locked { filter: grayscale(0.85) brightness(0.55) !important; position: relative; }
.s96-game-lock-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: rgba(20,22,28,0.82); border: 1.5px solid rgba(227,192,74,0.7); border-radius: 50%;
    color: #ffd22e; font-size: 18px; box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
#s96-gamelock-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
#s96-gamelock-modal .s96-gl-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.66); }
#s96-gamelock-modal .s96-gl-box {
    position: relative; z-index: 1; width: min(340px, 88vw);
    background: linear-gradient(160deg,#2a2d34,#191b20); border: 1px solid rgba(227,192,74,0.35);
    border-radius: 18px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
#s96-gamelock-modal .s96-gl-icon {
    width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg,#ffd747,#E3C04A); color: #1a1c20; font-size: 26px; box-shadow: 0 6px 18px rgba(255,200,0,0.45);
}
#s96-gamelock-modal .s96-gl-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 10px; }
#s96-gamelock-modal .s96-gl-msg { font-size: 14px; line-height: 1.6; color: #d6d9e0; margin-bottom: 20px; }
#s96-gamelock-modal .s96-gl-msg b { color: #ffd747; }
#s96-gamelock-modal .s96-gl-btn {
    width: 100%; padding: 11px; border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg,#ffd747,#E3C04A); color: #1a1c20; font-weight: 800; font-size: 15px;
}

/* ================================================================
   ALL GAMES provider rail — mockup restyle   2026-08-02
   ----------------------------------------------------------------
   Target : #pokies-tabs .pokies-tab — the 7-tile rail under the
            homepage "All Games" heading (5 visible, ‹ › arrows).
   Markup : frontend/js/views.js:685-720. ZERO JS changes — the old
            <img> is hidden and the icon/label come from ::before /
            ::after, so the button ids and switchPokiesShortcut()
            behaviour are untouched.
   Icons  : frontend/images/providers/tiles/*.webp (7 files, 72 KB)

   Sizes derive from min(100vw,430px), never from percentages:
   #pokies-tabs is Tailwind min-w-max (504px), so a percentage
   padding would resolve against that and push the label out of the
   tile, where overflow:hidden would clip it.

   Rollback: delete this block. The icons stay on disk unreferenced.
   ================================================================ */

#pokies-tabs {
    /* Tile width is the single source of truth; everything derives from it. */
    --s96-tile-w: clamp(52px, calc((min(100vw, 430px) - 56px) / 5), 78px);
    --s96-ratio: 0.80;                                        /* w/h — mockup is 293:357 ≈ 0.82 */
    --s96-tile-h: calc(var(--s96-tile-w) / var(--s96-ratio));
    --s96-icon:   calc(var(--s96-tile-w) * 0.66);
    --s96-pad-t:  calc(var(--s96-tile-w) * 0.12);
    --s96-pad-b:  calc(var(--s96-tile-w) * 0.06);
    --s96-pad-x:  calc(var(--s96-tile-w) * 0.05);
    --s96-gap:    calc(var(--s96-tile-w) * 0.045);
    --s96-label:  clamp(7.6px, calc(var(--s96-tile-w) * 0.128), 11px);
    --s96-radius: clamp(8px, calc(var(--s96-tile-w) * 0.135), 14px);
    gap: 6px !important;
}

/* Tile body — portrait, dark, hairline border, no gold frame */
#pokies-tabs .pokies-tab,
#pokies-tabs .pokies-shortcut {
    width: var(--s96-tile-w) !important;
    height: var(--s96-tile-h) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: var(--s96-pad-t) var(--s96-pad-x) var(--s96-pad-b) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: var(--s96-radius) !important;
    border: 1px solid rgba(255,255,255,0.075) !important;
    background:
        radial-gradient(115% 78% at 30% 0%, rgba(255,255,255,0.055), transparent 62%),
        linear-gradient(180deg, #1e232c 0%, #171c24 55%, #131820 100%) !important;
    background-image:
        radial-gradient(115% 78% at 30% 0%, rgba(255,255,255,0.055), transparent 62%),
        linear-gradient(180deg, #1e232c 0%, #171c24 55%, #131820 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28) !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
    -webkit-tap-highlight-color: transparent;
}

/* The old 128px <img> baked the gold frame and the wordmark into one bitmap. */
#pokies-tabs .pokies-tab > img { display: none !important; }

/* Icon — flat, transparent, no frame */
#pokies-tabs .pokies-tab::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: var(--s96-icon) !important;
    height: var(--s96-icon) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}
#pokies-tab-lightning::before { background-image: url("/images/providers/tiles/lightning-link.webp?v=2") !important; }
#pokies-tab-bng::before       { background-image: url("/images/providers/tiles/booongo.webp?v=2") !important; }
#pokies-tab-jili::before      { background-image: url("/images/providers/tiles/jili.webp?v=2") !important; }
#pokies-tab-pragmatic::before { background-image: url("/images/providers/tiles/pragmatic-play.webp?v=2") !important; }
#pokies-tab-slot::before      { background-image: url("/images/providers/tiles/pokies.webp?v=2") !important; }
#pokies-tab-fast::before      { background-image: url("/images/providers/tiles/fast-game.webp?v=2") !important; }
#pokies-tab-live::before      { background-image: url("/images/providers/tiles/live.webp?v=2") !important; }

/* Label — flex:1 absorbs the leftover height and centres in it, so a
   one-line tile (LIVE) and a two-line one (LIGHTNING LINK) stay equal height. */
#pokies-tabs .pokies-tab::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: var(--s96-gap) !important;
    color: #ffffff !important;
    font-family: var(--sun-font-display, 'Roboto','Poppins',sans-serif) !important;
    font-size: var(--s96-label) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}
#pokies-tab-lightning::after  { content: "LIGHTNING LINK" !important; }
#pokies-tab-bng::after        { content: "BOOONGO" !important; }
#pokies-tab-jili::after       { content: "JILI" !important; }
#pokies-tab-pragmatic::after  { content: "PRAGMATIC PLAY" !important; }
#pokies-tab-slot::after       { content: "POKIES" !important; }
#pokies-tab-fast::after       { content: "FAST GAME" !important; }
#pokies-tab-live::after       { content: "LIVE" !important; }

/* Selected state keeps the existing gold highlight. !important is required:
   switchPokiesShortcut() writes background/borderColor/boxShadow inline. */
#pokies-tabs .pokies-tab.active-pokies-tab {
    border-color: rgba(255,210,74,0.75) !important;
    background:
        radial-gradient(115% 78% at 30% 0%, rgba(255,213,60,0.10), transparent 62%),
        linear-gradient(180deg, #262b35 0%, #1b2129 55%, #161b23 100%) !important;
    background-image:
        radial-gradient(115% 78% at 30% 0%, rgba(255,213,60,0.10), transparent 62%),
        linear-gradient(180deg, #262b35 0%, #1b2129 55%, #161b23 100%) !important;
    box-shadow: 0 0 0 1px rgba(255,210,74,0.18), 0 3px 12px rgba(0,0,0,0.35) !important;
}
#pokies-tabs .pokies-tab:active { transform: scale(0.955) !important; }

/* Rail stays horizontally scrollable with 5 tiles visible — the width
   formula above is unchanged from the original, so only the ‹ › arrows
   need re-centring against the taller tile. */
.pokies-shortcut-rail {
    --s96-rail-h: calc(clamp(52px, calc((min(100vw, 430px) - 56px) / 5), 78px) / 0.80);
}
.pokies-shortcut-rail .pokies-slide-hint {
    top: calc(var(--s96-rail-h) / 2) !important;
    margin-top: -13px !important;
}

/* ==================================================================
   #all-providers-grid  →  cards-v2 artwork, no frame, 3 columns
   ------------------------------------------------------------------
   Append to frontend/css/theme-sun.css (anywhere after line ~3240,
   i.e. after the existing .s96-provider-slot-* block).

   SCOPE CONTRACT — every selector below starts with #all-providers-grid.
   Nothing here can reach:
       #providers-grid   (home "ALL POKIES" provider grid)
       #pokies-tabs      (home 7-tile shortcut rail, .pokies-tab)
   Do not "simplify" by lifting the #all-providers-grid prefix.

   SECTION 1  base           — apply always
   SECTION 2  artwork swap   — apply always (17 rules)
   SECTION 3  badge OFF      — DEFAULT, apply always
   SECTION 4  badge ON       — OPTIONAL, paste after S3 only if the
                               HOT / NEW / FREE labels are wanted back
   SECTION 5  black field    — OPTIONAL, only if the black corners of
                               the art bother anyone

   Measured on the live site, iPhone 390x844 @3x (all numbers real,
   read off getBoundingClientRect / getComputedStyle):
       card          81.50 -> 111.33 css px
       picture box   71.56 x 57.27  ->  111.33 x 111.33 css px
                     214.7 x 171.8  ->  334 x 334 device px
       source        512 x 512  =>  1.53x headroom, never upscaled
       crop          52 of 520 src px off top AND bottom  ->  ZERO
       grid height   439.5 -> 708.05 css px  (+268.55, +61%)
       rows          5 -> 6 ;  cards fully visible w/o scrolling 17 -> 15
   ================================================================== */


/* ==================================================================
   SECTION 1 — base: 3 columns, zero chrome, full-bleed square art
   ================================================================== */

/* 1.1  4 cols -> 3 cols  (81.50px -> 111.33px card at 390px viewport) */
#all-providers-grid,
#providers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 1.2  Kill the whole CSS frame: orange border, dark gradient
        background, 8px container radius, outer shadow.
        The cards-v2 art already carries its own border + rounded
        corners; a second frame reads as a double border. */
#all-providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame,
#providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 1.3  Kill the diagonal white sheen overlay that sat on top of the art */
#all-providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame::before,
#providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame::before {
    content: none !important;
    display: none !important;
}

/* 1.4  Drop the bottom title bar — the wordmark is baked into the art,
        keeping it prints every provider name twice. */
#all-providers-grid .s96-provider-slot-title,
#providers-grid .s96-provider-slot-title {
    display: none !important;
}

/* 1.5  Art box: full square, no 5% padding, no 18% bottom reserve.
        Square box + square (512x512) source => object-fit:cover crops
        exactly nothing. */
#all-providers-grid .s96-provider-slot-art,
#providers-grid .s96-provider-slot-art {
    inset: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

#all-providers-grid .s96-provider-slot-art img,
#providers-grid .s96-provider-slot-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* 1.6  Keep the press feedback, minus the frame */
#all-providers-grid .provider-card.s96-provider-slot-card:active > .s96-provider-slot-frame,
#providers-grid .provider-card.s96-provider-slot-card:active > .s96-provider-slot-frame {
    transform: scale(0.97);
}


/* ==================================================================
   SECTION 2 — artwork swap to /images/providers/cards-v2/
   ------------------------------------------------------------------
   Why CSS and not a one-line JS path change:
   local-providers.js renders ONE html string that is injected into
   BOTH #providers-grid and #all-providers-grid, so changing the path
   in JS would repaint the home grid too — out of scope by contract.
   Matching on [data-card-image] keys off the same alias table the
   renderer uses, so filenames stay 1:1 with generated-provider-art/.

   Each provider gets 2 declarations: paint the new art as a
   background, and hide the old <img> ONLY on cards that matched.
   A provider with a backoffice image_url override therefore keeps
   working (falls through to its own <img>) instead of going blank.
   ================================================================== */

#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/AIGAMING.webp?v=2"); }
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/BGAMING.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/BNG.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/CQ9.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/EVO888H5.webp?v=2"); }
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/HABANERO.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/HACKSAW.webp?v=2"); }
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/IMPERIUM_GAMES.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/JILI.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/LIGHTNING_LINK.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/MEGAH5.webp?v=2"); }
#all-providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/PG.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/PLAYSON.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/PLAYSTAR.webp?v=3"); }
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/PRAGMATIC_PLAY.webp?v=2"); }
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/VPLUS.webp?v=2"); }
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art,
#providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v2/XGaming.webp?v=2"); }

#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art > img,
#providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art > img {
    display: none !important;
}


/* ==================================================================
   SECTION 3 — HOT / NEW / FREE badge OFF   (DEFAULT — keep this)
   ================================================================== */
#all-providers-grid .s96-provider-slot-badge,
#providers-grid .s96-provider-slot-badge {
    display: none !important;
}


/* ==================================================================
   SECTION 4 — HOT / NEW / FREE badge ON    (OPTIONAL — do not paste
               unless the labels are wanted back. Must sit AFTER S3.)

   Restyled for the new art: pulled inside the baked-in rounded
   corner, smaller, gold-on-black pill instead of the full-bleed
   orange notch, so it reads as a sticker on the card rather than a
   second frame corner.
   ================================================================== */
/* >>>BADGE-ON-BEGIN
#all-providers-grid .s96-provider-slot-badge {
    display: inline-flex !important;
    top: 5px !important;
    right: 5px !important;
    min-width: 0 !important;
    height: 15px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(8, 10, 14, 0.82) !important;
    border: 1px solid rgba(255, 210, 74, 0.75) !important;
    color: #FFD24A !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}
BADGE-ON-END<<< */


/* ==================================================================
   SECTION 5 — black field   (OPTIONAL — do not paste by default)

   All 17 cards-v2 files are fully opaque (no alpha channel at all) and
   cover the box edge to edge, so removing the dark frame background can
   never leak the page through the art. What it does expose is the art's
   OWN corners: outside its baked rounded border the canvas is pure
   #000000, while the page behind the grid is rgb(26,29,35). That 26/29/35
   delta reads as a faint dark square behind each rounded card — closer to
   a soft shadow than to a frame, which is why it is left alone above.

   If the client ever calls it out, this makes the whole grid one black
   field so the corners disappear into it. It also blacks out the 8px
   gutters, so it is a look change, not a bug fix.
   ================================================================== */
/*
#all-providers-grid { background: #000 !important; }
*/

/* ==================================================================
   PROVIDER CARDS v4 — real vendor logos in the caption bar
   2026-08-03      (supersedes provider-cards-v3.patch.css in full:
                    paste THIS block, not both)
   ------------------------------------------------------------------
   WHAT CHANGED SINCE v3
   v3 cropped the baked caption strip off the artwork and re-drew the
   caption in CSS as *hand-typed text*. That threw away the one thing
   the AI cards got right: each strip carried the vendor's own mark
   (boongo's green ring, PG's pixel P/G, HABANERO's shield, PLAYSON's
   colour triangle...). v4 puts those marks back — as images.

       artwork  = /images/providers/cards-v3/    (unchanged from v3)
       LOGO     = /images/providers/logos-v1/    (NEW, 17 files + 1 alt)
                  every mark cut out of its cards-v2 caption strip,
                  alpha-matted, then placed on ONE shared 368x92 canvas.
       chrome   = this block.

   WHY THE SHARED CANVAS MATTERS
   All 17 files are the same 368x92. background-size:contain therefore
   resolves to the SAME scale for every card, at every viewport, so the
   relative visual weight the files were built with can never drift.
   The normalisation is baked into the pixels, not re-derived in CSS:

       scale_i = min( 368/W_i , 80/H_i , 40/cap_i )

   cap_i = the mark's cap-height (the widest run of rows carrying >=35%
   of peak ink), i.e. how big the LETTERS read — the dominant optical
   cue. A short mark (JILI, CQ9) is cap-limited so it cannot balloon;
   a long one (IMPERIUM GAMES) is width-limited; a tall one (VPLUS,
   PG, BNG, XGaming) is height-limited. The canvas is 92 tall but the
   scale rule caps placement at 80, which is where the ~4 device px of
   clear space above and below every mark comes from.

   MEASURED ON THE LIVE SITE, iPhone 390x844 @3x (v4/remeasure.json):
       caption content box  101.33 x 25 CSS = 304 x 75 device px,
                            identical on all 17 cards (span 0)
       cap height           20 - 34 device px   (6.7 - 11.3 CSS px)
       ink width            90 - 298 device px, none clipped
       clearance to the box  >= 1 device px on every side, every card

   NO HAND-TYPED TEXT
   All 17 marks are wordmarks (icon + vendor name, or name only), so
   nothing needs a CSS text companion. The DOM text is kept and only
   zeroed (font-size:0) on cards that actually resolved a logo file, so
   a provider added later in the backoffice still falls back to text.

   CAPTION BAR IS TALLER: 23.79px -> 28.00px @390 (+4.2px, card
   135.13 -> 139.34). A logo needs vertical room a 10px text line does
   not; at the old 23.79px the wide marks dropped to ~5.8px cap height.

   SCOPE CONTRACT
   Every selector starts with #all-providers-grid or #providers-grid.
   #pokies-tabs (.pokies-tab, the 7-tile home rail) is a SIBLING of
   #providers-grid under #aristocrat-section, never a descendant, so
   nothing here can reach it. Do not lift the id prefixes.

   PLACEMENT
   Append to frontend/css/theme-sun.css AFTER the existing
   "#all-providers-grid -> cards-v2 artwork" block (ends ~line 3651).
   It supersedes that block's SECTION 1 and SECTION 2; the old block
   can stay, this one wins on source order.
   Then bump the ?v= on theme-sun.css in frontend/index.html.

   ROLLBACK
   Delete this block. cards-v2 comes straight back; cards-v3/ and
   logos-v1/ stay on disk unreferenced.
   ================================================================== */


/* ==================================================================
   V4-1  design tokens
   One declaration site, resolved against the viewport (vw), not
   against the card (%), so both grids get identical chrome.
   ================================================================== */
#all-providers-grid,
#providers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    --s96-pc-radius: clamp(9px,   3.10vw, 14px);   /* 12.09px @390 */
    --s96-pc-band:   clamp(24px,  7.18vw, 38px);   /* 28.00px @390, 30.87 @430, 38 @>=530 */
    --s96-pc-font:   clamp(8.6px, 2.55vw, 11.5px); /*  9.95px @390 — text FALLBACK only */
    --s96-pc-padx:   4px;
    --s96-pc-pady:   1px;
    --s96-pc-hair:   rgba(255, 255, 255, 0.085);
    --s96-pc-ink:    #ffffff;
    --s96-pc-bar:    #131820;
}


/* ==================================================================
   V4-2  the frame = radius + border + shadow, drawn once
   ================================================================== */
#all-providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame,
#providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: var(--s96-pc-radius) !important;
    border: 1px solid var(--s96-pc-hair) !important;
    background: linear-gradient(180deg, #1e232c 0%, #171c24 55%, #131820 100%) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30) !important;
    transition: transform .16s ease !important;
}

/* the diagonal white sheen the old frame drew over the art */
#all-providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame::before,
#providers-grid .provider-card.s96-provider-slot-card > .s96-provider-slot-frame::before {
    content: none !important;
    display: none !important;
}

#all-providers-grid .provider-card.s96-provider-slot-card:active > .s96-provider-slot-frame,
#providers-grid .provider-card.s96-provider-slot-card:active > .s96-provider-slot-frame {
    transform: scale(0.97) !important;
}


/* ==================================================================
   V4-3  the picture = a square block in normal flow
   ================================================================== */
#all-providers-grid .s96-provider-slot-art,
#providers-grid .s96-provider-slot-art {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-color: #10151b !important;
}

/* backoffice image_url overrides have no cards-v3 file and keep using <img> */
#all-providers-grid .s96-provider-slot-art > img,
#providers-grid .s96-provider-slot-art > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}


/* ==================================================================
   V4-4  the caption bar = the logo plate
   ------------------------------------------------------------------
   background-origin:content-box is the load-bearing line. background-
   size:contain resolves against the *background positioning area*; with
   the default (padding-box) the mark would run edge to edge and kiss
   the card border. background-CLIP stays at its default border-box on
   purpose — clipping to content-box would clip the bar's own dark
   fill too and leave a transparent 1px/4px gutter.

   The text properties below are the FALLBACK, live for any provider
   that has no logos-v1 file. V4-9 zeroes them per-card.
   ================================================================== */
#all-providers-grid .s96-provider-slot-title,
#providers-grid .s96-provider-slot-title {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--s96-pc-band) !important;
    min-height: var(--s96-pc-band) !important;
    max-height: var(--s96-pc-band) !important;
    padding: var(--s96-pc-pady) var(--s96-pc-padx) !important;

    background-color: var(--s96-pc-bar) !important;
    background-image: none;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-origin: content-box !important;
    background-attachment: scroll !important;

    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;

    color: var(--s96-pc-ink) !important;
    font-family: var(--sun-font-display, 'Roboto', 'Poppins', sans-serif) !important;
    font-size: var(--s96-pc-font) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: calc(var(--s96-pc-band) - 3px) !important;   /* -1 border -2 padding */
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ==================================================================
   V4-5  HOT / NEW / FREE badge stays off
   ================================================================== */
#all-providers-grid .s96-provider-slot-badge,
#providers-grid .s96-provider-slot-badge {
    display: none !important;
}


/* ==================================================================
   V4-6  new-member game lock: recentre on the PICTURE, not on
         picture+caption, now that the card is taller than it is wide.
   ================================================================== */
#all-providers-grid .provider-card .s96-game-lock-overlay,
#providers-grid .provider-card .s96-game-lock-overlay {
    top: calc((100% - var(--s96-pc-band)) / 2) !important;
}


/* ==================================================================
   V4-7  artwork swap  cards-v2 -> cards-v3
   Matched on [data-card-image] because local-providers.js builds ONE
   html string for both grids; keying off the alias table keeps the
   filenames 1:1 with generated-provider-art/.
   ================================================================== */
#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/AIGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/BGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/BNG.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/CQ9.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/EVO888H5.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/HABANERO.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/HACKSAW.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/IMPERIUM_GAMES.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/JILI.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/LIGHTNING_LINK.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/MEGAH5.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/PG.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/PLAYSON.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/PLAYSTAR.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/PRAGMATIC_PLAY.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/RICHGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/VPLUS.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art { background-image: url("/images/providers/cards-v3/XGaming.webp?v=2") !important; }

/* hide the <img> only on the 17 cards that matched a cards-v3 file */
#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-art > img {
    display: none !important;
}


/* ==================================================================
   V4-8  the logo files
   One line per provider. background-size / position / origin already
   come from V4-4, so nothing here can make one card size differently
   from another — the only per-card value is the url.
   ================================================================== */
#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/AIGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/BGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/BNG-alt.webp?v=3") !important; }
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/CQ9.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/EVO888H5.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/HABANERO.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/HACKSAW.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/IMPERIUM_GAMES.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/JILI.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/LIGHTNING_LINK.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/MEGAH5.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/PG.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/PLAYSON.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/PLAYSTAR.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/PRAGMATIC_PLAY.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/RICHGAMING.webp?v=3") !important; }
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/VPLUS.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/XGaming.webp?v=2") !important; }

/* BNG: RESOLVED 2026-09-19 by operator decision. The old mark
   (logos-v1/BNG.webp) read "boongo" — the PRE-REBRAND name — because
   that is what the scraped card art baked. Booongo rebranded to BNG,
   the DB provider_name is "BNG" and its icon_url points at
   bng.games/assets/logo_full, so the wordmark above now uses
   logos-v1/BNG-alt.webp: the real vector BNG mark, traced from
   frontend/images/providers/bng-logo.svg and normalised on the same
   368x92 canvas by the same rule. logos-v1/BNG.webp is kept on disk
   as the historical "boongo" wordmark; do not re-point at it.
   The pokies shortcut tile keeps the label "BOOONGO" on purpose —
   that is the name players search for, and it matches the market.

   ONE NAME MISMATCH REMAINS, inherited from the card art:
     MEGAH5  the app calls it "Mega888 H5",  the mark says "MEGAH5" */


/* ==================================================================
   V4-9  kill the text ONLY where a logo actually resolved
   Deliberately a separate rule from V4-8: a provider added in the
   backoffice matches neither, keeps its text caption, and the bar
   still looks like a bar.
   font-size:0 hides the glyphs but leaves the text node in the DOM,
   so screen readers and "find in page" still see the provider name.
   ================================================================== */
#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/AIGAMING.webp"]       .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/BGAMING.webp"]        .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/BNG.webp"]            .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/CQ9.webp"]            .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/EVO888H5.webp"]       .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/HABANERO.webp"]       .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/HACKSAW.webp"]        .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/JILI.webp"]           .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/MEGAH5.webp"]         .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PG.webp"]             .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PLAYSON.webp"]        .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PLAYSTAR.webp"]       .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/RICHGAMING.webp"]     .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/VPLUS.webp"]          .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/XGaming.webp"]        .s96-provider-slot-title {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    letter-spacing: 0 !important;
}

/* ==================================================================
   RECORDS — transaction rows, phase 1
   2026-08-03
   ------------------------------------------------------------------
   Replaces the old two-column block whose left cell stacked type, txn
   id, method, amount and date while the status floated top-right, so
   every row had to be read in a zig-zag.

   Now: direction icon | type + status + detail | amount + date.
   Colour encodes ONE thing — which way the money moved. Status lives
   only in the pill, so "DEPOSIT / REJECTED" can no longer render as a
   green heading with a red note beside it.

   Written as plain CSS, not Tailwind utilities: the Tailwind build is
   a separate step (npm run build:tailwind) and new utility classes
   would not exist in the compiled sheet until it is re-run.
   ================================================================== */
.s96-txn {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 11px;
    align-items: start;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .02);
    transition: background .15s ease;
}
.s96-txn:hover { background: rgba(255, 255, 255, .05); }

.s96-txn-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.s96-txn-ic.in  { background: rgba(34, 197, 94, .13);  color: #4ade80; }
.s96-txn-ic.out { background: rgba(239, 68, 68, .13);  color: #f87171; }

.s96-txn-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.s96-txn-t {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}
.s96-txn-t.in  { color: #e8e2cc; }
.s96-txn-t.out { color: #e8d5d5; }

.s96-txn-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    padding: 3.5px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.s96-txn-pill.ok      { background: rgba(34, 197, 94, .15);  color: #4ade80; }
.s96-txn-pill.bad     { background: rgba(239, 68, 68, .15);  color: #f87171; }
.s96-txn-pill.warn    { background: rgba(234, 179, 8, .15);  color: #facc15; }
.s96-txn-pill.info    { background: rgba(96, 165, 250, .15); color: #60a5fa; }
.s96-txn-pill.pulse   { animation: s96TxnPulse 1.6s ease-in-out infinite; }
@keyframes s96TxnPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
    .s96-txn-pill.pulse { animation: none; }
}

.s96-txn-sub {
    font-size: 11px;
    color: #7d7669;
    margin-top: 4px;
    line-height: 1.4;
}

.s96-txn-meta {
    font-size: 10.5px;
    color: #6d6658;
    margin-top: 6px;
    line-height: 1.4;
}
.s96-txn-idbtn {
    color: #8e8571;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: underline dotted;
    cursor: pointer;
}
.s96-txn-idbtn:hover { color: #cbbf9d; }
.s96-txn-idbtn:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; border-radius: 2px; }
.s96-txn-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #8e8571;
    word-break: break-all;
}

.s96-txn-amt {
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.s96-txn-amt.in  { color: #4ade80; }
.s96-txn-amt.out { color: #f87171; }
.s96-txn-amt .s96-txn-date {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #5f5a50;
    margin-top: 6px;
    letter-spacing: 0;
}
.s96-txn-amt .s96-txn-count {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #facc15;
    margin-top: 4px;
}
.s96-txn-amt .s96-txn-help {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    color: #fbd23c;
    margin-top: 4px;
    line-height: 1.25;
}

/* The chat bubble sits bottom-right above the tab bar, so the last row
   needs clearance from both or it renders underneath them. */
#history-transactions,
#history-bets { padding-bottom: 104px; }

/* Narrow phones: let the amount drop under the body instead of
   squeezing the type label to two characters. */
@media (max-width: 340px) {
    .s96-txn { grid-template-columns: 30px 1fr; row-gap: 6px; }
    .s96-txn-amt { grid-column: 2; text-align: left; }
    .s96-txn-amt .s96-txn-date { display: inline; margin-left: 8px; }
}

/* Bet log time range. The window used to be a fixed "Last 24 hours only"
   label even though getBetHistory already accepts up to 168. */
.s96-range-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.s96-range,
.s96-chip {
    flex: 1;
    padding: 8px 4px;
    border-radius: 999px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, .07);
    color: #b9b2a2;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.s96-range:hover, .s96-chip:hover { border-color: rgba(250, 204, 21, .35); color: #e8e2cc; }
.s96-range.on, .s96-chip.on { background: rgba(250, 204, 21, .14); border-color: #facc15; color: #facc15; }
/* Fallback only: the site-wide `:focus-visible` up in SELECTION & FOCUS is
   !important, so the ring you actually see is the orange house one. */
.s96-range:focus-visible, .s96-chip:focus-visible { outline: 2px solid #facc15; outline-offset: 2px; }
.s96-range.refresh { flex: 0 0 42px; color: #facc15; }
@media (prefers-reduced-motion: reduce) {
    .s96-range, .s96-chip { transition: none; }
}

/* ------------------------------------------------------------------
   RECORDS — transaction filters, phase 2/3
   Type chips, date chips and the period summary. The chips share the
   pill above rather than restating it; they differ only in sizing —
   .s96-range splits a fixed row of three evenly, while five type
   filters cannot fit a 390px phone, so this row scrolls sideways and
   each chip keeps its natural width.
   ------------------------------------------------------------------ */
.s96-txf {
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.s96-chiprow {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    /* overflow-x:auto makes the used overflow-y `auto` too, so a focus ring
       drawn outside the box would be clipped and add a stray vertical
       scrollbar. The padding gives the 2px outline + 2px offset room. */
    padding: 4px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.s96-chiprow::-webkit-scrollbar { display: none; }
.s96-chip {
    flex: 0 0 auto;
    /* Same 8px vertical padding as .s96-range, so a chip and a bet-log range
       button are exactly the same height; only the sides differ. */
    padding: 8px 13px;
    white-space: nowrap;
}

.s96-sum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}
/* Tailwind's .hidden is display:none at the same specificity, and this sheet
   loads after it — without this the strip would win the tie and sit there
   showing three dashes whenever the response carries no summary. */
.s96-sum.hidden { display: none; }
.s96-sum-i {
    min-width: 0;
    padding: 8px 6px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}
.s96-sum-k {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6d6658;
    line-height: 1;
}
.s96-sum-v {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #e8e2cc;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    /* A six-figure total must wrap inside its tile, not widen the grid. */
    overflow-wrap: anywhere;
}
.s96-sum-v.in  { color: #4ade80; }
.s96-sum-v.out { color: #f87171; }

/* Rejected: the request never moved money, so the row must not read as a
   gain or a loss. Everything goes neutral and the red pill carries the news. */
.s96-txn-ic.void  { background: rgba(148, 163, 184, .10); color: #8b8578; }
.s96-txn-t.void   { color: #9d968a; }
.s96-txn-amt.void { color: #7d7669; }
/* Strike the figure only. text-decoration propagates to in-flow descendants
   and a child's `none` cannot remove it, so the rule has to sit on the value
   itself or the timestamp gets crossed out too. */
.s96-txn-amt.void .s96-txn-val {
    text-decoration: line-through;
    text-decoration-color: rgba(125, 118, 105, .55);
}

/* ==================================================================
   FONT AWESOME vs THE TYPE SCALE
   ------------------------------------------------------------------
   Section 10 applies the display face with !important to .text-xl …
   .text-5xl. A FontAwesome <i> carrying one of those size classes
   therefore loses its icon font and renders the private-use codepoint
   as .notdef — an empty box. 37 icons across the app were affected;
   the empty-state icon on the betting log is how it was spotted.

   Same specificity as the rule above (0,1,0), so this wins purely on
   source order. It restores only the font, leaving size and colour to
   whatever utility class the markup used.
   ================================================================== */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin, .fa-duotone, .fa-classic {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
}
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
.fa-solid, .fas, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.fa-regular, .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}


/* ==================================================================
   DESKTOP PRESENTATION — >= 1024px
   ------------------------------------------------------------------
   The whole site is composed for a phone. Rather than re-lay-out every
   internal block for a second width (high risk, 3.9% of logins), the
   desktop treatment is the one the client picked out on svj33au.com:
   keep the phone column exactly as designed, centre it at 600px, and
   stretch only the chrome (header + tab bar) to the viewport edges so
   the page reads as a lit panel on a dark field.

   Everything below is scoped to this one media query. Nothing outside
   it is touched, so sub-1024px rendering is bit-identical to before.
   ================================================================== */
@media (min-width: 1024px) {

    :root {
        --s96-desk-col: 600px;      /* the phone column, centred */
        --s96-desk-gutter: 28px;    /* chrome inset from the viewport edge */
    }

    /* ---------------------------------------------------------------
       1. PAGE GROUND
       The field either side of the column goes darker than the column
       itself; that contrast is what makes the column read as a panel.

       It has to go on #scroll-content, not on <body>. config.js:241-242
       writes `background-color`/`background-image` onto document.body as
       an INLINE declaration flagged !important, which outranks every
       author rule there is — a stylesheet cannot touch the body
       background at all. #scroll-content is the layer directly behind
       the column (fixed, top:56px bottom:60px, i.e. exactly the region
       between the two bars) and config.js only sets a plain inline
       shorthand on it, so an !important author rule does win. The
       !important is also needed to beat theme-sun's own
       `html, body, #app-layout, #scroll-content { background-color:
       #1a1d23 !important }`; background-image needs it too, because the
       inline shorthand config.js writes resets background-image to none.
       --------------------------------------------------------------- */
    #scroll-content {
        background-color: #0d0f12 !important;
        background-image:
            radial-gradient(120% 68% at 50% -14%, rgba(255, 210, 74, .05) 0%, transparent 60%) !important;
        /* This element is the scroller, so its scrollbar eats ~10px off the
           right of its content box and the centred column lands 10px left of
           true centre. Reserving the gutter on both edges makes the two side
           margins equal whether or not the bar is showing. */
        scrollbar-gutter: stable both-edges;
    }

    /* ---------------------------------------------------------------
       2. HEADER — bar spans the viewport, contents pinned to the edges
       max-width needs !important only to out-rank the !important in
       styles.css:2442 / :2501. Vertical padding is left to the markup's
       `py-3` so the 56px header height (#scroll-content's `top`) holds.
       --------------------------------------------------------------- */
    #app-header > div {
        max-width: none !important;
        padding-left: var(--s96-desk-gutter);
        padding-right: var(--s96-desk-gutter);
    }

    /* ---------------------------------------------------------------
       3. THE COLUMN
       600px is the reference width and it keeps every card, grid and
       rail at the size they were designed for.
       max-width !important out-ranks styles.css:2437 (960) / :2497 (1100).
       --------------------------------------------------------------- */
    #app-main {
        max-width: var(--s96-desk-col) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 100%;
        /* The column has to be the DARKER of the two or it does not read as a
           panel — the reference site sits a near-black column on a lighter
           slate field. Going the other way (dark field, dark column) is what
           made the first attempt look like an empty void with a strip in it. */
        background-color: #0c0d10;
        border-left: 1px solid rgba(250, 204, 21, .16);
        border-right: 1px solid rgba(250, 204, 21, .16);
        /* A glow separates on a dark ground; a black drop shadow does not. */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 90px -20px rgba(250, 204, 21, .13);
    }

    /* Undo the multi-column grid widening styles.css does at 768/1200.
       Those were written for a 960/1100 column; inside a 600 column they
       shrink game art to thumbnails. Back to the phone's 2 / 3 columns. */
    .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid.grid-cols-4 { max-width: none; }

    /* Same idea for the banner rails, which were pinned to the old widths. */
    #home-banner { max-width: none; }
    #home-custom-banners { max-width: none; }

    /* ---------------------------------------------------------------
       4. BLOCKER 1 — #home-banner keeping a stale pixel height
       app.js:1422-1427 locks `style.minHeight = imgEl.offsetHeight + 'px'`
       on #home-banner once the first slider image loads (an anti-CLS
       measure from when the slider rebuilt its <img> every cycle). The
       value is whatever the column was wide at that moment — 413px at a
       1100px column — and it does not follow the column down to 600.
       min-height wins over both `height` and `aspect-ratio` in CSS
       sizing, which is why setting a ratio on the container did nothing.
       Clearing the floor is the whole fix: the <img> is `w-full block`,
       so with no floor the box takes the artwork's natural 8:3 and there
       is nothing to crop or letterbox.
       !important is unavoidable here and only here — the declaration
       being overridden is an inline style attribute written by JS, and
       nothing but !important out-ranks that.
       --------------------------------------------------------------- */
    #home-banner { min-height: 0 !important; }

    /* ---------------------------------------------------------------
       5. BLOCKER 2 — #bottom-nav rendering only its right-hand items
       styles.css:2447-2454 centres the bar with `left:50%` +
       `transform: translateX(-50%)` and caps it at 960/1100px. Widening
       it to the viewport without cancelling the transform slides the
       whole bar left by half of its NEW width: measured rect.x = -720
       at a 1440px viewport, so items 1-2 were off-screen and item 3 was
       cut in half at x=0. Cancelling the transform is the fix.
       left / right / max-width carry !important purely to out-rank the
       !important already on those properties in styles.css.
       `transform` deliberately does NOT: `body.chat-keyboard-open
       #bottom-nav` (0,2,1) needs to keep winning with its translateY(110%)
       that hides the bar when a mobile keyboard opens.
       --------------------------------------------------------------- */
    #bottom-nav {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        transform: none;
        border-radius: 0;
    }

    #nav-icons-container {
        max-width: none !important;
        padding-left: var(--s96-desk-gutter);
        padding-right: var(--s96-desk-gutter);
    }

    /* Same centring trick, same fix, for the two fixed chat composers.
       The bar itself becomes chrome (full width); its contents stay in
       the column so the input lines up with the message list above it. */
    #chat-input-bar,
    #chat-waiting-input-bar {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        transform: none;
    }
    #chat-input-bar > div,
    #chat-waiting-input-bar > div {
        max-width: var(--s96-desk-col);
    }

    /* The pull-to-refresh tab only arms itself in standalone PWA mode, i.e.
       never on a desktop browser, but it still parks one pixel-row of itself
       under the 98%-opaque header where the wide empty header makes it show
       through as a grey smudge. Nothing on desktop can trigger it, so drop it. */
    #ptr-indicator { display: none; }

    /* ---------------------------------------------------------------
       6. FLOATING SUPPORT WIDGET → into the right gutter
       Mobile pins it 14px off the right edge of a <=672px column, which
       at 1440px lands it on top of the column. Park it at the viewport
       edge instead. The card opens leftwards 192px from the widget's
       right edge, so at the narrowest desktop width (1024, gutter 212px)
       it still clears the column by 8px.
       --------------------------------------------------------------- */
    .floating-support-widget { right: 12px; }

    /* ---------------------------------------------------------------
       7. POINTER AFFORDANCES
       A mouse expects hit targets to answer. .game-card already has its
       own :hover in this sheet; these are the ones that had none.
       --------------------------------------------------------------- */
    .provider-card,
    .pokies-card,
    .bonus-card,
    .slot-card {
        transition: transform .16s ease, box-shadow .16s ease;
    }
    .provider-card:hover,
    .pokies-card:hover,
    .bonus-card:hover,
    .slot-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .8);
    }
    .s96-txn:hover { background: rgba(255, 255, 255, .05); }

    @media (prefers-reduced-motion: reduce) {
        .provider-card,
        .pokies-card,
        .bonus-card,
        .slot-card { transition: none; }
        .provider-card:hover,
        .pokies-card:hover,
        .bonus-card:hover,
        .slot-card:hover { transform: none; }
    }
}

/* ==================================================================
   TAP FEEDBACK ON THE PRIMARY BUTTONS
   2026-08-04
   ------------------------------------------------------------------
   .btn-gold:active only shrank 4%, which on a full-width button is
   about 12px of travel — under a thumb, invisible. Nothing else on
   screen changed between the tap and the server's reply either, so a
   login on a slow connection looked like it had not registered and
   people tapped again.

   Deeper press, an immediate dim, and a busy state the handler turns
   on for the duration of the request.
   ================================================================== */
.btn-gold:active,
button.btn-gold:active,
.s96-auth-primary:active,
button.s96-auth-primary:active {
    transform: scale(.955) !important;
    filter: brightness(.88) !important;
    transition: transform .06s ease, filter .06s ease !important;
}

/* Held state for the round-trip. Pointer-events stay off so a second
   tap cannot queue another request behind the first. */
.btn-gold.is-busy,
button.is-busy {
    opacity: .72 !important;
    filter: saturate(.7) !important;
    pointer-events: none !important;
    cursor: progress !important;
    transform: none !important;
}

/* iOS paints its own grey wash over tapped controls, which fights the
   gold and reads as a delay rather than a press. */
.btn-gold,
button.btn-gold,
.s96-auth-primary {
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .btn-gold:active,
    button.btn-gold:active,
    .s96-auth-primary:active { transform: none !important; }
}


/* ==================================================================
   V5  artwork swap  cards-v3 -> cards-v5 -> cards-v6   (2026-09-17)
   v6 (same day): v5 was too loud next to competitors (glow, sparkles, coin
   piles on every card). v6 keeps one subject per card on a simple, softly
   lit background at moderate saturation. cards-v5/ stays on disk.
   The v3 set was one gold-brown palette on every card, so the grid read
   as a single beige block. v5 is slot-key-art style (vivid 3D mascot from
   each vendor's signature game) with a DIFFERENT dominant hue per card.
   Same 400x400 square, same selectors as V4-7, so frame/caption/logo
   (V4-1..V4-9) are untouched. Also adds the six AES vendors that had no
   card at all (EGT, 3 Oaks, Spribe, Tydo, TADA, Amusnet) and logos for
   five of them; Tydo has no obtainable mark and keeps its text caption.
   ROLLBACK: delete this block; cards-v3 comes straight back.
   ================================================================== */
#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/LIGHTNING_LINK.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/BNG.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/BNG.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/JILI.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/JILI.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PG.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PG.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/PG.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PLAYSTAR.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/PLAYSTAR.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/PRAGMATIC_PLAY.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/HABANERO.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/HABANERO.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/CQ9.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/CQ9.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/PLAYSON.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/PLAYSON.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/BGAMING.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/BGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/XGaming.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/XGaming.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/HACKSAW.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/HACKSAW.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/MEGAH5.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/MEGAH5.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/AIGAMING.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/AIGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/EVO888H5.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/EVO888H5.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/RICHGAMING.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/RICHGAMING.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/RICHGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/VPLUS.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/VPLUS.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/IMPERIUM_GAMES.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/TADAGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/AMUSNET.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/EGT.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/3OAKS.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/SPRIBE.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/TYDO.webp"] .s96-provider-slot-art,
#providers-grid     .provider-card[data-card-image*="/TYDO.webp"] .s96-provider-slot-art { background-image: url("/images/providers/cards-v6/TYDO.webp?v=2") !important; }

#all-providers-grid .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/LIGHTNING_LINK.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/BNG.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/BNG.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/JILI.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/JILI.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PG.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PG.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PLAYSTAR.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PLAYSTAR.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PRAGMATIC_PLAY.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/HABANERO.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/HABANERO.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/CQ9.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/CQ9.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/PLAYSON.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/PLAYSON.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/BGAMING.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/BGAMING.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/XGaming.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/XGaming.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/HACKSAW.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/HACKSAW.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/MEGAH5.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/MEGAH5.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/AIGAMING.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/AIGAMING.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/EVO888H5.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/EVO888H5.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/RICHGAMING.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/RICHGAMING.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/VPLUS.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/VPLUS.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/IMPERIUM_GAMES.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-art > img,
#all-providers-grid .provider-card[data-card-image*="/TYDO.webp"] .s96-provider-slot-art > img,
#providers-grid     .provider-card[data-card-image*="/TYDO.webp"] .s96-provider-slot-art > img {
    display: none !important;
}

#all-providers-grid .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/EGT.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/3OAKS.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/SPRIBE.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/TADAGAMING.webp?v=2") !important; }
#all-providers-grid .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-title { background-image: url("/images/providers/logos-v1/AMUSNET.webp?v=2") !important; }

#all-providers-grid .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/EGT.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/3OAKS.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/SPRIBE.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/TADAGAMING.webp"] .s96-provider-slot-title,
#all-providers-grid .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-title,
#providers-grid     .provider-card[data-card-image*="/AMUSNET.webp"] .s96-provider-slot-title {
    font-size: 0 !important;
    line-height: 0 !important;
}


/* ==================================================================
   V7  side menu + provider grid breathing room   (2026-09-18)
   ------------------------------------------------------------------
   The side menu was a 288px column of plain text rows with icons in
   four different colours; the wallet lived only on the home view, so
   depositing from the menu meant closing it first. This is the we88
   shape: identity, wallet + three actions, a 3-up tile grid for the
   destinations, then the secondary rows and one CTA pinned at the
   bottom. Markup lives in index.html (#side-menu).

   The provider grid also read as one dense block, so the gutters open
   up and each card breathes on a 5s cycle, staggered in three phases
   so the grid never pulses in unison. Transform only (no layout, no
   paint of the artwork), and it stops for prefers-reduced-motion.
   ================================================================== */

#side-menu {
    width: 86% !important;
    max-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0f1116 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow-y: auto;
}

.s96-menu-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.s96-menu-avatar {
    width: 44px; height: 44px; flex: none;
    border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(255, 210, 74, 0.4);
}
.s96-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.s96-menu-name {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 16px; line-height: 1.15;
    letter-spacing: 0.03em; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s96-menu-sub { font-size: 11px; color: #8b929d; margin-top: 3px; }
.s96-menu-close {
    margin-left: auto; width: 34px; height: 34px; flex: none;
    border-radius: 999px; border: none;
    background: rgba(255, 255, 255, 0.08); color: #cfd4db;
    font-size: 20px; line-height: 1;
}

.s96-menu-wallet {
    margin: 14px 16px 0; padding: 14px;
    background: #171b22;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}
.s96-menu-wallet-label {
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: #8b929d;
}
.s96-menu-wallet-amount {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 26px; line-height: 1.1;
    color: #fff; margin-top: 6px;
}

.s96-menu-acts { display: flex; gap: 8px; margin: 12px 16px 0; }
.s96-menu-act {
    flex: 1; height: 40px; border: none; border-radius: 999px;
    background: #1d222b; color: #e8eaee;
    font-weight: 800; font-size: 11px; letter-spacing: 0.04em;
}
.s96-menu-act-primary {
    background: linear-gradient(180deg, #FFE07A, #D9B23A);
    color: #1b1500;
}
.s96-menu-act:active { transform: scale(.96); }

.s96-menu-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; padding: 18px 16px 4px;
}
.s96-menu-tile {
    position: relative; cursor: pointer;
    background: #171b22;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 6px 11px;
    text-align: center; color: #d6dae1; text-decoration: none;
}
.s96-menu-tile i { display: block; font-size: 19px; color: #FFD24A; margin-bottom: 8px; }
.s96-menu-tile span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; }
.s96-menu-tile:active { transform: scale(.96); }
.s96-menu-badge {
    position: absolute; top: -6px; right: -4px;
    background: #e23b3b; color: #fff;
    font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
    padding: 2px 6px; border-radius: 999px;
}

.s96-menu-list { margin-top: 14px; padding: 0 16px; }
.s96-menu-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 2px; cursor: pointer;
    color: #c9ced6; font-size: 13px; text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.s96-menu-list a i { width: 18px; text-align: center; color: #8b929d; font-size: 14px; }

.s96-menu-foot {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.s96-menu-cta {
    width: 100%; height: 44px; border-radius: 12px;
    background: rgba(255, 210, 74, 0.1);
    border: 1px solid rgba(255, 210, 74, 0.45);
    color: #FFD24A;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 14px; letter-spacing: 0.1em;
}
.s96-menu-copy { text-align: center; font-size: 9px; color: #5f656e; margin-top: 12px; }

/* --- provider grid: air, then breathing ------------------------- */
#providers-grid,
#all-providers-grid {
    gap: 14px !important;
    row-gap: 18px !important;
    padding: 4px 4px 10px !important;
}

@keyframes s96Breathe {
    0%, 100% { transform: scale(1);     box-shadow: 0 0 0 rgba(255, 210, 74, 0); }
    50%      { transform: scale(1.018); box-shadow: 0 6px 22px rgba(255, 210, 74, 0.13); }
}
#providers-grid .provider-card,
#all-providers-grid .provider-card {
    /* beats the blanket `.provider-card { animation: none !important }` further up
       (line ~2869), which was written to kill the old always-on card pulse. */
    animation: s96Breathe 5s ease-in-out infinite !important;
    will-change: transform;
}
#providers-grid .provider-card:nth-child(3n+2),
#all-providers-grid .provider-card:nth-child(3n+2) { animation-delay: -1.6s !important; }
#providers-grid .provider-card:nth-child(3n),
#all-providers-grid .provider-card:nth-child(3n)   { animation-delay: -3.2s !important; }
#providers-grid .provider-card:nth-child(6n+4),
#all-providers-grid .provider-card:nth-child(6n+4) { animation-delay: -0.8s !important; }

@media (prefers-reduced-motion: reduce) {
    #providers-grid .provider-card,
    #all-providers-grid .provider-card { animation: none !important; }
}


/* ==================================================================
   V8  brand mark + partnership badge   (2026-09-18)
   ------------------------------------------------------------------
   The brand was three different marks: typed text in the header, a
   green S96 app icon and a yellow 96 tile in the footer. It is now one
   coin, built from images/brand/coin.svg by scripts/brand/build-brand.js.

   The partnership badge sits top-right and never moved, so it read as
   decoration. It now breathes and takes a light sweep every 5s — the
   badge artwork is an animated WebP (build-badge.js) that carries the
   sweep, the drawn tick and the embers; CSS only adds the slow breathe,
   so the two never double up.
   ================================================================== */

.s96-brand-coin {
    width: 32px;
    height: 32px;
    flex: none;
    filter: drop-shadow(0 2px 6px rgba(255, 210, 74, 0.28));
}
@media (max-width: 360px) {
    .s96-brand-coin { width: 28px; height: 28px; }
}

/* hamburger: one accent, not a purple/pink gradient next to gold */
#app-header button[onclick="toggleSideMenu()"] {
    border-color: rgba(255, 210, 74, 0.5) !important;
    background: transparent !important;
    color: #FFD24A !important;
}

#app-header .s96-header-partnership-btn {
    position: relative;
    animation: s96BadgeBreathe 5s ease-in-out infinite;
}
@keyframes s96BadgeBreathe {
    0%, 100% { transform: scale(1);     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); }
    50%      { transform: scale(1.035); box-shadow: 0 4px 16px rgba(255, 210, 74, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
    #app-header .s96-header-partnership-btn { animation: none; }
}


/* ==================================================================
   V9  spin the wheel   (2026-09-18)
   ------------------------------------------------------------------
   Player-facing wheel. The slices themselves are SVG drawn at runtime
   by js/spin-wheel.js from whatever segments the API returns, so there
   is deliberately no per-segment CSS here - only the frame, the hub,
   the pointer and the surrounding cards.

   The rotation is set inline as a transform on #spin-wheel-rotor, with
   the transition duration supplied by JS, because the landing angle is
   only known once the server has answered. prefers-reduced-motion is
   handled in JS too (duration 0, jump straight to the result) - the
   rule at the bottom of this block only stops the idle hub glow.
   ================================================================== */

.spin-view { background: #0b0d12; }
.spin-shell {
    max-width: 460px;
    margin: 0 auto;
    padding: 10px 14px 92px;
    min-height: calc(100dvh - 130px);
}

.spin-head {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0 12px;
}
.spin-head h1 {
    flex: 1; text-align: center; margin: 0;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 19px; letter-spacing: 0.1em;
    color: #FFD24A;
}
.spin-back {
    width: 34px; height: 34px; flex: none;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1);
    background: #171b22; color: #c9ced6; font-size: 13px;
}

.spin-stats {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    background: #171b22;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 12px 14px;
}
.spin-stat { display: flex; flex-direction: column; gap: 3px; }
.spin-stat-label {
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: #8b929d;
}
.spin-stat-value {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 26px; line-height: 1; color: #fff;
}
.spin-stat-expiry { font-size: 11px; color: #8b929d; text-align: right; }

/* --- the stage: pointer, wheel, hub, prize overlay ---------------- */
.spin-stage {
    position: relative;
    width: 100%; max-width: 330px;
    margin: 18px auto 0;
    aspect-ratio: 1 / 1;
}
.spin-wheel { width: 100%; height: 100%; }
.spin-wheel svg { width: 100%; height: 100%; display: block; }
#spin-wheel-rotor { will-change: transform; }

.spin-slice-label {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600; font-size: 12px; letter-spacing: 0.02em;
    fill: #d6dae1;
}
.spin-slice-label-top { fill: #1b1500; font-weight: 700; }

/* Pointer is a gold triangle nailed to 12 o'clock - the wheel turns
   under it, which is why JS solves for "bring slice centre to 0deg". */
.spin-pointer {
    position: absolute; top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0; z-index: 3;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 26px solid #FFD24A;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.spin-hub {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 31%; height: 31%; z-index: 2;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 35%, #232830, #0f1116);
    border: 2px solid #FFD24A;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 22px rgba(255, 210, 74, 0.25);
    animation: s96SpinHubGlow 4s ease-in-out infinite;
}
.spin-hub img { width: 78%; height: 78%; object-fit: contain; }
@keyframes s96SpinHubGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 210, 74, 0.18); }
    50%      { box-shadow: 0 0 30px rgba(255, 210, 74, 0.42); }
}

.spin-go {
    display: block; width: 100%; max-width: 330px;
    margin: 20px auto 0; height: 50px;
    border: none; border-radius: 999px;
    background: linear-gradient(180deg, #FFE07A, #D9B23A);
    color: #1b1500;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 16px; letter-spacing: 0.12em;
}
.spin-go:disabled { opacity: 0.45; }
.spin-go:not(:disabled):active { transform: scale(.97); }

/* --- prize overlay ------------------------------------------------ */
.spin-prize {
    position: absolute; inset: 0; z-index: 4;
    display: none; align-items: center; justify-content: center;
    background: rgba(8, 10, 14, 0.82);
    border-radius: 999px;
}
.spin-prize.spin-prize-on { display: flex; }
.spin-prize-card { text-align: center; padding: 0 18px; }
.spin-prize-kicker {
    font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: #8b929d;
}
.spin-prize-label {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 24px; line-height: 1.15;
    color: #FFD24A; margin-top: 6px;
}
.spin-prize-amount { font-size: 15px; font-weight: 700; color: #fff; margin-top: 4px; }
.spin-prize-ok {
    margin-top: 14px; padding: 9px 26px;
    border-radius: 999px; border: 1px solid rgba(255, 210, 74, 0.5);
    background: rgba(255, 210, 74, 0.12); color: #FFD24A;
    font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
}

/* --- info cards --------------------------------------------------- */
.spin-card {
    margin-top: 16px; padding: 14px;
    background: #171b22;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
}
.spin-card h2 {
    margin: 0 0 10px;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600; font-size: 13px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #FFD24A;
}
.spin-rules { list-style: none; margin: 0; padding: 0; }
.spin-rules li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0; font-size: 12.5px; color: #c9ced6;
}
.spin-rules li i { width: 16px; text-align: center; color: #FFD24A; margin-top: 2px; }
.spin-rules b { color: #fff; }

.spin-winners {
    display: flex; gap: 8px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
}
.spin-winners::-webkit-scrollbar { display: none; }
.spin-winner {
    flex: none; min-width: 112px;
    background: #20242b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px; padding: 9px 11px;
}
.spin-winner-user { display: block; font-size: 11px; color: #8b929d; }
.spin-winner-prize {
    display: block; margin-top: 3px;
    font-size: 12.5px; font-weight: 700; color: #FFD24A;
}
.spin-winner-empty { color: #8b929d; font-size: 12px; min-width: auto; }

.spin-empty { text-align: center; padding: 60px 20px; color: #8b929d; }
.spin-empty i { font-size: 30px; color: #FFD24A; }
.spin-empty p { margin: 12px 0 16px; font-size: 13px; }
.spin-retry {
    padding: 10px 24px; border-radius: 999px;
    border: 1px solid rgba(255, 210, 74, 0.45);
    background: rgba(255, 210, 74, 0.1); color: #FFD24A;
    font-weight: 800; font-size: 11px; letter-spacing: 0.08em;
}

/* --- entry point on the promo page -------------------------------- */
.spin-promo-entry {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; padding: 12px 14px;
    cursor: pointer; text-decoration: none;
    background: linear-gradient(110deg, #20242b, #171b22);
    border: 1px solid rgba(255, 210, 74, 0.35);
    border-radius: 14px;
}
.spin-promo-entry img { width: 54px; height: 54px; flex: none; object-fit: contain; }
.spin-promo-entry div { flex: 1; min-width: 0; }
.spin-promo-entry b {
    display: block;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: #FFD24A;
}
.spin-promo-entry span { display: block; margin-top: 2px; font-size: 11.5px; color: #9aa1ab; }
.spin-promo-entry i { color: #8b929d; font-size: 12px; }
.spin-promo-entry:active { transform: scale(.99); }

@media (prefers-reduced-motion: reduce) {
    .spin-hub { animation: none; }
}


/* ==================================================================
   V10  site footer   (2026-09-18)
   ------------------------------------------------------------------
   The old footer was a stack of centred rows with everything faded to
   50-60% opacity, which reads as decoration rather than as an operator
   telling you who it is. This is the layout every licensed book uses:
   left-aligned blocks, each introduced by a small grey uppercase label,
   logos at full opacity because a half-faded certification mark looks
   like a placeholder.

   Two blocks are data-driven (#footer-legal, #footer-socials) and are
   filled by App.renderFooterDynamic(); the licence block carries
   [hidden] until an operator supplies real details, so there is no
   empty heading in the default state.
   ================================================================== */

.s96-footer {
    --ft-label: #7a828d;
    --ft-text: #c3c9d2;
    padding-bottom: 20px;
}

.s96-ft-label {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ft-label);
}

.s96-ft-block { margin-bottom: 18px; }
.s96-ft-block[hidden] { display: none; }

/* --- brand ------------------------------------------------------ */
.s96-ft-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}
.s96-ft-coin { width: 34px; height: 34px; flex: none; }
.s96-ft-brand-text { min-width: 0; }
.s96-ft-name {
    display: block;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: #fff;
}
.s96-ft-desc {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #8b929d;
    max-width: 34ch;
}

/* --- link columns ----------------------------------------------- */
.s96-ft-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@media (min-width: 640px) {
    .s96-ft-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s96-ft-col button {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 7px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ft-text);
    cursor: pointer;
}
.s96-ft-col button:hover { color: #FFD24A; }

/* --- licence ----------------------------------------------------- */
.s96-ft-legal {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ft-text);
}
.s96-ft-legal strong { color: #fff; font-weight: 600; }
.s96-ft-verify {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #FFD24A;
    text-decoration: none;
}
.s96-ft-verify:hover { text-decoration: underline; }

/* --- logo rows ---------------------------------------------------- */
.s96-ft-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
.s96-ft-logo {
    height: 26px;
    width: auto;
    /* full opacity on purpose: these are third-party marks, not decoration */
    opacity: 1;
}
.s96-ft-logo--pay { height: 22px; }

/* --- socials + responsible gaming --------------------------------- */
.s96-ft-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
@media (min-width: 640px) {
    .s96-ft-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.s96-ft-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.s96-ft-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    background: #3b3f47;
}
a.s96-ft-social:hover { filter: brightness(1.15); }
/* No URL yet -> rendered as a <span>: reads as "coming soon", not broken. */
.s96-ft-social.is-pending { opacity: 0.55; cursor: default; }

.s96-ft-social--facebook  { background: #1877f2; }
.s96-ft-social--telegram  { background: #229ed9; }
.s96-ft-social--whatsapp  { background: #25d366; }
.s96-ft-social--instagram { background: linear-gradient(45deg, #f0c733, #dc2743 50%, #bc1888); }
.s96-ft-social--tiktok    { background: #010101; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* --- copyright ---------------------------------------------------- */
.s96-ft-copy {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.s96-ft-copy p {
    margin: 0;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: #6e757f;
}

/* ==================================================================
   V10  records / transaction statement   (2026-09-18)
   ------------------------------------------------------------------
   The history list used to be a flat run of 45 identical rows, every
   one of them green with a down arrow, carrying an inline "Ref show"
   toggle that read as debug UI. This block turns it into a statement:
   sticky day headers, one signed amount per row in a single currency
   notation, direction that actually reflects direction, and the
   reference moved into a tap-to-open sheet.

   Rows are <button> now (the whole row is the hit target), so the
   overrides below mostly exist to undo the UA button styling and to
   make the inner spans lay out like the old divs did. They sit after
   the original .s96-txn block on purpose - same specificity, later
   wins, and the original block stays intact so this is one contiguous
   chunk to delete if it ever needs reverting.
   ================================================================== */

/* --- the row ------------------------------------------------------ */
.s96-txn {
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent;
    padding: 13px 14px;
}
.s96-txn:active { background: rgba(255, 255, 255, .06); }
.s96-txn:focus-visible { outline: 2px solid #FFD24A; outline-offset: -2px; }

.s96-txn-body { display: block; min-width: 0; }
.s96-txn-hd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.s96-txn-t {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    color: #edeff2;
    text-transform: none;
}
.s96-txn-sub {
    display: block;
    font-size: 11.5px;
    color: #8b929d;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s96-txn-time {
    display: block;
    font-size: 10.5px;
    color: #6b7280;
    margin-top: 3px;
    letter-spacing: .02em;
}

/* Direction. Credit = money in (green, arrow down into the wallet),
   debit = money out (red, arrow up). "flat" is a zero-amount row the
   bonus engine writes; "void" is rejected/cancelled - nothing moved,
   so neither may borrow a money colour. */
.s96-txn-ic { border-radius: 10px; font-size: 11px; }
.s96-txn-ic.flat { background: rgba(148, 163, 184, .10); color: #8b929d; }
.s96-txn-ic.void { background: rgba(148, 163, 184, .10); color: #8b929d; }

.s96-txn-amt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600;
    font-size: 15.5px;
}
.s96-txn-amt.flat { color: #8b929d; }
.s96-txn-amt.void { color: #7d7669; }
.s96-txn-amt.void .s96-txn-val { text-decoration: line-through; }
.s96-txn-more { font-size: 9px; color: #565d68; margin-top: 2px; }

/* --- sticky day headers ------------------------------------------- */
.s96-txn-day {
    position: sticky;
    /* clears the Transactions / Betting Log tab strip, which is itself
       sticky at top:0 inside the scroll container */
    top: 52px;
    z-index: 20;
    padding: 7px 14px;
    background: rgba(13, 13, 13, .96);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FFD24A;
}
.s96-txn-group > .s96-txn + .s96-txn { border-top: 1px solid rgba(255, 255, 255, .045); }

/* --- loading skeleton --------------------------------------------- */
.s96-txn-skel { cursor: default; }
.s96-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #1a1e25 25%, #242932 50%, #1a1e25 75%);
    background-size: 200% 100%;
    animation: s96SkelShimmer 1.3s linear infinite;
}
.s96-skel-ic { width: 34px; height: 34px; border-radius: 10px; }
.s96-skel-l1 { width: 45%; height: 12px; }
.s96-skel-l2 { width: 68%; height: 10px; margin-top: 8px; }
.s96-skel-amt { width: 66px; height: 15px; margin-left: auto; }
.s96-skel-day { padding: 8px 14px; }
.s96-skel-day-t { width: 70px; height: 9px; }
@keyframes s96SkelShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .s96-skel { animation: none; }
}

/* --- empty state --------------------------------------------------- */
.s96-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 54px 24px;
}
.s96-empty-ic {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 18px;
    margin-bottom: 14px;
    font-size: 23px;
    color: #FFD24A;
    background: rgba(255, 210, 74, .08);
    border: 1px solid rgba(255, 210, 74, .22);
}
.s96-empty-t {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600; font-size: 16px; letter-spacing: .04em;
    color: #edeff2;
}
.s96-empty-s { margin-top: 5px; font-size: 12px; color: #8b929d; max-width: 260px; line-height: 1.5; }
.s96-empty-btn {
    margin-top: 18px;
    padding: 11px 26px;
    border: 0; border-radius: 12px;
    font-weight: 700; font-size: 13px; letter-spacing: .04em;
    color: #1b1500;
    background: linear-gradient(135deg, #fdd45f, #FFD24A);
    cursor: pointer;
}
.s96-empty-btn.ghost {
    background: #171b22;
    color: #FFD24A;
    border: 1px solid rgba(255, 210, 74, .35);
}
.s96-empty-btn:active { transform: scale(.98); }

/* --- row detail sheet ---------------------------------------------- */
body.s96-sheet-open { overflow: hidden; }
.s96-sheet {
    position: fixed; inset: 0; z-index: 120;
    display: none;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
    align-items: flex-end;
    justify-content: center;
}
.s96-sheet.open { display: flex; }
.s96-sheet-panel {
    width: 100%;
    max-width: 460px;
    max-height: 86dvh;
    overflow-y: auto;
    padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
    background: #14171d;
    border: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    animation: s96SheetUp .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes s96SheetUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .s96-sheet-panel { animation: none; }
}
.s96-sheet-grab {
    display: block; width: 42px; height: 4px;
    margin: 6px auto 16px;
    padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    cursor: pointer;
}
.s96-sheet-top { display: flex; align-items: center; gap: 12px; }
.s96-sheet-title {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600; font-size: 16px; color: #edeff2; margin-bottom: 5px;
}
.s96-sheet-amt {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 700; font-size: 34px; line-height: 1.1;
    margin: 16px 0 18px;
    font-variant-numeric: tabular-nums;
}
.s96-sheet-amt.in   { color: #4ade80; }
.s96-sheet-amt.out  { color: #f87171; }
.s96-sheet-amt.flat { color: #8b929d; }
.s96-sheet-amt.void { color: #7d7669; text-decoration: line-through; }

.s96-sheet-rows { border-top: 1px solid rgba(255, 255, 255, .06); }
.s96-sheet-rows > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.s96-sheet-rows dt { font-size: 11.5px; color: #8b929d; flex: none; }
.s96-sheet-rows dd { font-size: 12.5px; color: #e2e5ea; text-align: right; word-break: break-word; }
.s96-sheet-ref {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 210, 74, .3); border-radius: 9px;
    background: rgba(255, 210, 74, .07);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; color: #FFD24A;
    cursor: pointer; word-break: break-all;
}
.s96-sheet-note { margin-top: 12px; font-size: 11px; color: #6b7280; line-height: 1.5; }
.s96-sheet-btn {
    width: 100%; margin-top: 16px; padding: 13px;
    border: 0; border-radius: 13px;
    font-weight: 700; font-size: 13.5px; letter-spacing: .04em;
    color: #1b1500;
    background: linear-gradient(135deg, #fdd45f, #FFD24A);
    cursor: pointer;
}

/* 360px and below: the amount keeps its own column (it is short now),
   but the subtitle needs the room, so the chevron goes. */
@media (max-width: 360px) {
    .s96-txn { padding: 12px 11px; gap: 9px; }
    .s96-txn-more { display: none; }
    .s96-txn-t { font-size: 13.5px; }
    .s96-txn-amt { font-size: 14.5px; }
}

/* The pre-V10 340px rule drops the amount onto its own line under the
   body; keep it left-aligned there now that the amount is a flex column. */
@media (max-width: 340px) {
    .s96-txn-amt { align-items: flex-start; flex-direction: row; gap: 10px; }
}

/* The pre-V10 rules give .s96-txn-help/.s96-txn-count an explicit
   display:block, which outranks Tailwind .hidden (same specificity,
   but it is declared later in the compiled sheet). Without this the
   "Contact support" fallback shows next to a running countdown. */
.s96-txn-amt .s96-txn-help.hidden,
.s96-txn-amt .s96-txn-count.hidden { display: none; }

/* ==================================================================
   V11  account / profile page   (2026-09-18)
   ------------------------------------------------------------------
   The profile page was a read-only data dump: a player who wanted to
   change a password, reach support or sign out had to go hunting in
   the side menu. Three additions here, all on top of the existing
   markup so the VIP block (with its explicit rebate/cashback figures,
   which the competitor does not show) is untouched:

     .s96-verify-strip  - status chips driven by real /auth/me flags
     .s96-acct-grid     - 2-up action tiles, every one a live route
     .s96-secret        - masked payout fields + per-field reveal

   Tap targets are 44px+ because this page is thumb-reached on a phone.
   ================================================================== */

.s96-verify-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}
.s96-verify-strip:empty { display: none; }

.s96-verify-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.s96-verify-chip b {
    font-weight: 700;
    color: #e6e9ee;
}
.s96-verify-chip span { color: #8b939f; }
.s96-verify-chip i { font-size: 10px; }
.s96-verify-chip.is-ok {
    border-color: rgba(52, 199, 123, 0.32);
    background: rgba(52, 199, 123, 0.08);
}
.s96-verify-chip.is-ok i { color: #34c77b; }
.s96-verify-chip.is-pending {
    border-color: rgba(255, 210, 74, 0.32);
    background: rgba(255, 210, 74, 0.08);
}
.s96-verify-chip.is-pending i { color: #FFD24A; }

/* --- action tiles ----------------------------------------------- */
.s96-acct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.s96-acct-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #20242b;
    color: #e6e9ee;
    text-align: left;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.s96-acct-tile i {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 210, 74, 0.12);
    color: #FFD24A;
    font-size: 12px;
}
/* Labels wrap rather than truncate: "CHANGE PASSWORD" does not fit one line
   in a half-width tile, and "CHANGE PASSWO..." is worse than two lines. */
.s96-acct-tile span {
    min-width: 0;
    line-height: 1.15;
}
.s96-acct-tile:active { transform: scale(0.98); }
.s96-acct-tile:hover {
    border-color: rgba(255, 210, 74, 0.35);
    background: #262b33;
}
/* Logout is the one destructive route on the page - it must not look
   like the other seven. */
.s96-acct-tile--danger i {
    background: rgba(255, 86, 72, 0.12);
    color: #ff5648;
}
.s96-acct-tile--danger:hover { border-color: rgba(255, 86, 72, 0.4); }

/* --- masked payout fields --------------------------------------- */
.s96-secret {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.s96-secret > span {
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.s96-secret-eye {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -6px 0;   /* keeps the 28px hit area from stretching the row */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #8b939f;
    font-size: 10px;
}
.s96-secret-eye:hover { color: #FFD24A; border-color: rgba(255, 210, 74, 0.35); }

.s96-bank-cta {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 210, 74, 0.06);
    color: #FFD24A;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.s96-bank-cta:hover { background: rgba(255, 210, 74, 0.12); }

/* Two columns hold down to ~340px because the labels wrap; below that the
   icon + two words stop fitting, so stack. */
@media (max-width: 335px) {
    .s96-acct-grid { grid-template-columns: 1fr; }
    .s96-acct-tile { min-height: 46px; }
}

/* One section per day: the sticky header scrolls out with its own
   rows rather than piling up under the next day header. */
.s96-txn-sec { position: relative; }


/* ==================================================================
   V12  horizontal rails: snap to the card   (2026-09-18)
   ------------------------------------------------------------------
   Measured against svj33au.com, whose rails use `scroll-snap-type:
   x mandatory` with `scroll-snap-align: start` on every card: a flick
   always settles with a whole card at the left edge. Ours scrolled
   free, so a swipe usually parked a half card against the gutter,
   which is the single thing that made the row look cheap next to
   theirs. Snap costs nothing at runtime and degrades to normal
   scrolling where it is unsupported.

   scroll-padding-left matches the rail's own left padding so the
   snapped card lines up with the section heading above it.
   ================================================================== */
#hot-games-slider,
#providers-grid,
.pokies-shortcut-viewport,
.s96-rail {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
#hot-games-slider > *,
.pokies-shortcut-viewport > * > *,
.s96-rail > * {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

@media (prefers-reduced-motion: reduce) {
    #hot-games-slider,
    .pokies-shortcut-viewport,
    .s96-rail { scroll-behavior: auto; }
}

/* Trusted Partner rail — cards are animated WebP, so CSS only frames them.
   NB: the class is s96-trust-card, NOT s96-partner-card — that name is already
   taken by the Partnership page (partnership-sun.js) and reusing it squashed
   those cards to this rail width. */
.s96-trust-card {
    display: block;
    /* 94px square, 6px gap, 12px gutter. The competitor renders 88x88; 94 is the
       operator's call — same 1:1 shape, a touch larger so the type reads. */
    width: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: #12151b;
    border: 1px solid rgba(255, 210, 74, 0.22);
}
.s96-trust-card img {
    display: block;
    width: 100%;
    height: auto;
}
.s96-trust-card:active { transform: scale(.97); }


/* ==================================================================
   V13  rail gutters and section rhythm   (2026-09-18)
   ------------------------------------------------------------------
   Rails were bleeding past the 16px page gutter, so the first card was
   always sliced by the screen edge and each section had its own idea of
   vertical spacing. One gutter, one rhythm: 22px above a section, 12px
   under its heading. The negative margin lets a rail scroll edge to edge
   while its content still starts on the gutter.
   ================================================================== */
#hot-games-slider,
#home-played-games-grid,
.s96-rail {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    scroll-padding-left: 16px !important;
}
#trusted-partner-section,
#hot-games-section {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
}
#trusted-partner-section > div:first-child,
#hot-games-section > div:first-child {
    margin-bottom: 12px !important;
}

#trusted-partner-section .s96-rail {
    gap: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    scroll-padding-left: 12px !important;
}


/* ==================================================================
   V14  Popular Provider rail   (2026-09-18)
   ------------------------------------------------------------------
   Replaces the old "Played Games" rail on home. Modelled on the
   competitor's provider row: key-art tile, a rank chip pinned to the
   art, provider name underneath.

   The rank chip says TOP n where n is the provider's position in
   providers.sort_order (what the backoffice already orders the grid
   by). It is NOT a play count — no provider-level popularity number
   reaches the frontend today.

   Geometry is deliberately IDENTICAL to the Popular Games rail
   (116x134 tile, 16px radius, floating shadow, caption below on the
   page background — see _loadHotGames in app.js) so the two rails line
   up and the foreman can restyle both together when the card shape
   changes. Snap/gutter behaviour comes free from .s96-rail (V12/V13).
   ================================================================== */
#popular-provider-section { margin-top: 22px !important; margin-bottom: 22px !important; }
#popular-provider-section > div:first-child { margin-bottom: 12px !important; }

.s96-pop-card {
    /* matches .s96-pop-art below; if one moves the other has to move with it,
       or the slot keeps its old width and the rail gaps open up. */
    width: 96px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease;
}
.s96-pop-card:active { transform: scale(.95); }

.s96-pop-art {
    position: relative;
    /* Was 110x130, itself measured off a competitor rail. Down 13% to 96x113
       at the operator's request — kept proportional because the taper mask
       shared with #hot-games-slider has a fixed 100x118 viewBox and
       preserveAspectRatio: none, so a non-proportional box distorts it. */
    width: 96px;
    height: 113px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sun-slate-card-soft, #252a32);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}
.s96-pop-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Chip sits on the art, not below it, so the caption stays the same
   single line the Popular Games cards use. */
.s96-pop-rank {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    color: #17140a;
    background: linear-gradient(135deg, #ffdc5e, #f5c823);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.s96-pop-name {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==================================================================
   V15  support bubble   (2026-09-18)
   ------------------------------------------------------------------
   Same footprint as before, ~1.6x the width, and the stock agent photo
   replaced by a waving emoji: the photo was a network request that
   could fail (it did, on a low-memory phone) and read as clip art.
   The wave is CSS on a text glyph, so it costs one transform and
   nothing to download. Stops for prefers-reduced-motion.
   ================================================================== */
#floating-support-widget .floating-support-card {
    width: 246px !important;
    padding: 10px 12px 10px 10px !important;
    border-radius: 14px !important;
    background: #1e232b !important;
    border: 1px solid rgba(255, 210, 74, 0.35) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}
#floating-support-widget .floating-support-card-body p {
    font: 700 12px/1.35 'Inter', system-ui, sans-serif !important;
    color: #e8eaee !important;
    margin: 0 !important;
}
#floating-support-widget .s96-cs-cta {
    display: block;
    margin-top: 8px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFE07A, #D9B23A);
    color: #1b1400;
    font: 900 11px/30px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-align: center;
}
#floating-support-widget .s96-cs-wave {
    display: inline-block;
    font-size: 26px;
    line-height: 1;
    transform-origin: 70% 80%;
    animation: s96Wave 2.4s ease-in-out infinite;
}
@keyframes s96Wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    65% { transform: rotate(16deg); }
    70% { transform: rotate(-10deg); }
    75% { transform: rotate(16deg); }
    80% { transform: rotate(-8deg); }
    85% { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
    #floating-support-widget .s96-cs-wave { animation: none; }
}

/* The emoji inherited the old avatar frame from styles.css (52x52 gold tile with
   a pulsing dot), which is why the hand sat in a yellow square hanging off the
   card edge. Strip the frame for the wave variant. */
#floating-support-widget .floating-support-card-top {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    flex: none !important;
    align-self: flex-start;
    padding-top: 2px;
}
#floating-support-widget .floating-support-card-top::after { content: none !important; }
#floating-support-widget .s96-cs-wave {
    font-size: 30px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}

/* Operator's call: the dark bubble disappeared into the page, so the support
   card goes white — the one light surface on the site, which is the point. */
#floating-support-widget .floating-support-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}
#floating-support-widget .floating-support-card-body p { color: #1b1f27 !important; }
#floating-support-widget .floating-support-close {
    background: #8b929d !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, .12) !important;
}


/* ==================================================================
   V16  game card meta row: provider + published RTP   (2026-09-18)
   ------------------------------------------------------------------
   Matches the competitor's caption: vendor name low-contrast on the
   left, an RTP chip on the right. The chip uses the same gold pill as
   the V14 rank chip so the two rails read as one system.

   The chip is only ever emitted by App.renderCardMeta when the API
   returned a real rtp for that game — every figure comes from the
   provider's own published game page and is stored with its source URL
   in `game_rtp`. There is deliberately no "RTP N/A" state: a game we
   could not source shows nothing at all.
   ================================================================== */
.s96-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 3px;
    min-width: 0;
}

.s96-card-meta-provider {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* flex:none — the number must never be truncated; a clipped "RTP 96.5"
   would read as a different figure. The provider name shrinks instead. */
.s96-rtp-chip {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 8px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .02em;
    color: #17140a;
    background: linear-gradient(135deg, #ffdc5e, #f5c823);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}


/* ==================================================================
   V16  tapered card shape   (2026-09-19)
   ------------------------------------------------------------------
   Wider at the top, pulling in at the bottom — the shape the competitor
   rails use. Done as an SVG mask rather than new artwork: a clip-path
   polygon would square off the corners, and re-cutting 24 images would
   have to be redone every time a provider card changes.
   The mask draws the corners, so the element's own border-radius and
   box-shadow have to go (a square shadow behind a tapered mask is the
   giveaway); the depth comes back as a drop-shadow filter, which
   follows the mask.
   Taper: bottom pulls in 14% each side. One number to change here.
   ================================================================== */
#popular-provider-rail .s96-pop-art,
#hot-games-slider .popular-game-card > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118' preserveAspectRatio='none'><path d='M14 0 H86 Q100 0 100 14 V84 Q100 118 72 118 H28 Q0 118 0 84 V14 Q0 0 14 0 Z' fill='%23fff'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118' preserveAspectRatio='none'><path d='M14 0 H86 Q100 0 100 14 V84 Q100 118 72 118 H28 Q0 118 0 84 V14 Q0 0 14 0 Z' fill='%23fff'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}

/* POPULAR GAMES only: the same taper redrawn for a 4:3 box.
   The rule above is shared with #popular-provider-rail, whose art really is
   400x400 in a portrait box; this rail's art is landscape (420x315 / 420x246 /
   420x289), so its box is 96x72. The shared mask's viewBox is 100x118 with
   preserveAspectRatio: none, which would squash these corners flat — the y
   values here are that path scaled by 75/118, so the corner radius still
   reads the same. */
#hot-games-slider .popular-game-card > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 75' preserveAspectRatio='none'><path d='M14 0 H86 Q100 0 100 8.9 V53.4 Q100 75 72 75 H28 Q0 75 0 53.4 V8.9 Q0 0 14 0 Z' fill='%23fff'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 75' preserveAspectRatio='none'><path d='M14 0 H86 Q100 0 100 8.9 V53.4 Q100 75 72 75 H28 Q0 75 0 53.4 V8.9 Q0 0 14 0 Z' fill='%23fff'/></svg>");
}

/* ALL GAMES art: the box follows the artwork, and carries no mask.
   It used to be pinned to 130px and masked into a tapered squircle to match the
   two rails above. But only Lightning Link goes through the renderer that adds
   this class — BNG, JILI and the rest get a plain aspect-ratio box — so one
   grid rendered two different card shapes depending on the tab. And the mask
   only covered the art, leaving the caption block's square shoulders sticking
   out past the tapered bottom. Lightning Link art is 420x420, so 1/1 fits it
   exactly and stops cover() cropping 12% off each side (which was cutting the
   game titles). */
#pokies-games-grid .pokies-card .s96-allgames-art {
    /* 4:3, the same box every other provider in this grid gets. Lightning Link
       art is 420x420, so this crops about 12% off the top and bottom — sky and
       background, not the game title, which is what players scan for. The
       alternative, 1:1, matched the source exactly but left these cards 29px
       taller than the BNG cards beside them in the same grid. */
    aspect-ratio: 4 / 3;
}
#pokies-games-grid .pokies-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* The radius lives on the card, not on the art, so the image and the
       caption below it are clipped as one object. It was 0 here because the
       shape used to come from the art's mask. */
    border-radius: 14px !important;
    overflow: hidden !important;
}



/* ==========================================================================
   V17 — Support page header.
   The coin sits inside the card instead of hanging off its left edge, so the
   card has one straight edge; the guest inputs get an explicit dark background
   (Tailwind's `bg-black/20` is not in the local build, so they rendered WHITE
   with white text — you could not see what you typed); and the CTA is gold,
   which it could not be until the volcanic-era inline repaint in
   site-transform-sun.js was removed.
   ========================================================================== */
.support-message-row { display: block !important; }
.support-helpdesk .support-staff-avatar,
.support-helpdesk .support-staff-name,
.support-helpdesk .support-chat-time-pill { display: none !important; }

.support-chat-bubble { padding: 0 !important; overflow: hidden; }

.s96-sup-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 210, 74, 0.07), rgba(255, 210, 74, 0));
}
.s96-sup-head img { width: 38px; height: 38px; border-radius: 999px; display: block; }
.s96-sup-head-text { min-width: 0; }
.s96-sup-head-name { color: #fff; font-size: 13px; font-weight: 1000; line-height: 1.2; }
.s96-sup-head-status {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #7fd18a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.s96-sup-head-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}

.s96-sup-body { padding: 13px 12px 12px; }
.support-chat-bubble h3 { font-size: 16px !important; }

.s96-topic-label {
    margin: 13px 0 -4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #8e97a3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.s96-topic-label + .support-topic-row { border-top: 0; padding-top: 0; margin-top: 8px; }

#guest-chat-details input {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
#guest-chat-details input::placeholder { color: #7d8590 !important; }

.support-start-chat-button {
    background: linear-gradient(135deg, #FFE07A 0%, #FFD24A 45%, #D9B23A 100%) !important;
    border-color: rgba(255, 240, 190, 0.85) !important;
    color: #2a2102 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* The CTA used to scale 1 -> 1.025 while a separate ring pulsed outward around
   it. The two never lined up, and once the gold override above pinned the
   box-shadow the ring was the only thing still moving, so the button looked
   like it was wobbling. One calm sheen instead: nothing moves or resizes. */
.support-start-chat-button {
    animation: none !important;
    overflow: hidden !important;
}
.support-start-chat-button::before { display: none !important; }
.support-start-chat-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    left: -60%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: s96SupportSheen 3.4s ease-in-out infinite;
}
@keyframes s96SupportSheen {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
}



/* ==========================================================================
   V18 — The spin stage.
   The wheel used to float on flat black. It now stands on a lit stage: a warm
   wash behind it, light spilling from above, a drape at the top and a pedestal
   underneath so it has somewhere to sit. All of it is gradients — no images —
   so the page weighs the same as before and there is nothing for iOS to drop
   under memory pressure.
   ========================================================================== */
#view-spin {
    background:
        radial-gradient(ellipse 120% 62% at 50% 34%, rgba(255, 210, 74, 0.13) 0%, transparent 62%),
        linear-gradient(180deg, #141018 0%, #0b0d11 52%, #07090c 100%);
}

/* the pedestal hangs 26px below the stage box, so the stage has to reserve
   that much room or it lands on top of the SPIN NOW button underneath. */
.spin-stage { isolation: isolate; margin-bottom: 42px; }

/* the drape: vertical folds fading out as they fall */
.spin-stage::before {
    content: "";
    position: absolute;
    left: -14vw; right: -14vw; top: 0;
    height: 92px;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
        rgba(255, 210, 74, 0.10) 0 14px,
        rgba(0, 0, 0, 0.26) 14px 28px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* the pedestal the wheel stands on */
.spin-stage::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -26px;
    width: 76%; height: 28px;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #332C14, #10120e);
    box-shadow:
        0 0 0 2px rgba(255, 210, 74, 0.3),
        0 12px 30px rgba(0, 0, 0, 0.75),
        0 -6px 26px rgba(255, 210, 74, 0.16);
}

/* z-index only — these already have their own position, and forcing relative
   knocked the hub and the pointer out of the middle of the wheel. */
.spin-wheel, .spin-pointer, .spin-hub, .spin-prize { z-index: 2; }
.spin-wheel { position: relative; }

/* A flat CSS triangle read as a paper cut-out next to a bevelled gold rim, so
   the pointer is drawn instead: gold body, dark edge, highlight down the middle. */
.spin-pointer {
    top: -10px; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 30px;
    border: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #ffe89a 0%, #b89a0b 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.65));
}

.spin-slice-label { fill: #f0e5bd; font-weight: 700; font-size: 13px; }
.spin-slice-label-top { fill: #2a2102; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
    .spin-stage::before { display: none; }
}

/* ==================================================================
   V17  provider logo on the POPULAR PROVIDER card art   (2026-09-19)
   ------------------------------------------------------------------
   The cards were character artwork plus the provider's name in small
   text UNDER the tile, so the only way to know whose lobby a card
   opened was to stop and read the caption — and on a moving rail
   nobody does. The competitor rails put the provider's own logo on the
   art itself (the green BNG mark, PRAGMATIC PLAY, PG SOFT), which is
   what players actually recognise, so we do the same.

   Overlay only: no image is re-cut. The logo is a second <img> laid
   over the first, over a scrim, because the logos are transparent PNG
   marks and half of them are white — dropped straight onto pale
   artwork they vanished. The scrim is a gradient, not a bar, so it
   reads as the art darkening rather than as a label strip.

   Placement has to respect the V16 taper: the art's mask pulls the
   bottom in 14% each side, and the mask clips children too, so a logo
   sitting flush at the bottom would have its ends sliced off. Bottom
   edge at 9px and 78% width keeps it inside the mask at that height.

   The TOP n chip used to sit bottom-left — exactly where the logo now
   is — so it moves to the top-left corner, where the card is still
   full width and nothing else is drawn.
   ================================================================== */
.s96-pop-art.has-logo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46px;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .74) 0%,
        rgba(0, 0, 0, .52) 46%,
        rgba(0, 0, 0, 0) 100%);
}
.s96-pop-art img.s96-pop-logo {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    width: 78%;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* Chip out of the logo's way — see the note above. */
#popular-provider-rail .s96-pop-rank {
    top: 6px;
    bottom: auto;
    z-index: 3;
}

/* Refresh button on the side-menu balance card. The menu showed a balance but
   gave no way to update it, so a player coming out of a game had to close the
   menu to find the refresh on the home screen. Sits in the card's top-right,
   out of the way of the figure itself. */
.s96-menu-wallet { position: relative; }
.s96-menu-wallet-refresh {
    position: absolute;
    /* vertically centred in the card, not pinned to its top corner */
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 74, 0.28);
    background: rgba(255, 210, 74, 0.07);
    color: #FFD24A;
    font-size: 13px;
}
.s96-menu-wallet-refresh:active { transform: translateY(-50%) scale(.92); }
.s96-menu-wallet-refresh:disabled { opacity: .5; }




/* The wheel on the Spin entry card. 52px rather than the 54 the mascot uses,
   and the card's gap collapses to 8px on its side, because at 62px the
   subtitle wrapped to two lines and the card grew. */
.spin-promo-entry .s96-spin-entry-wheel {
    width: 52px;
    height: 52px;
    flex: none;
    object-fit: contain;
    margin-left: auto;
    margin-right: -4px;
}

/* The wheel on the Spin entry card turns, so the card reads as live.
   Done in CSS rather than as an animated WebP: no new asset, no decode cost,
   GPU-composited, and it survives a re-shoot of the thumbnail when the prize
   list changes. 9s per turn — fast enough to notice, slow enough to ignore,
   which matters because this card sits permanently at the top of the page.
   The bezel turning with the rest is invisible at 52px: the ring is 12 evenly
   spaced bulbs, so it repeats itself every 30 degrees. */
@keyframes s96-spin-entry-turn {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.spin-promo-entry .s96-spin-entry-wheel {
    animation: s96-spin-entry-turn 9s linear infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .spin-promo-entry .s96-spin-entry-wheel { animation: none !important; }
}

/* ================================================================
   GOLD RECOLOUR HELPERS
   The site-wide orange->gold pass hue-rotated the theme, which could
   not reach colour set by a literal Tailwind utility class in JS
   template strings. These are the semantic replacements for the
   utilities that were left orange. They are plain classes rather
   than swapped Tailwind classes on purpose: the Tailwind build only
   emits classes it has already seen in index.html / js, so swapping
   e.g. bg-orange-500 -> bg-amber-400 would emit nothing at all.
   ================================================================ */

/* Solid / gradient gold fill for an action. .s96-gold-fill is the
   same paint without the button affordances, for tiles and chips. */
.s96-gold-btn,
.s96-gold-fill {
    background-image: linear-gradient(180deg, #E3C04A, #C9A227) !important;
    background-color: #C9A227 !important;
    color: #1a1403 !important;
}
.s96-gold-btn:hover {
    filter: brightness(1.1);
}

/* Accent text - the one gold, same token as .text-amber-400 above. */
.s96-gold-text { color: var(--text-accent, #FFD24A) !important; }

/* Subtle accent border for cards and modal frames. */
.s96-gold-border { border-color: var(--border-lava, rgba(214, 172, 20, 0.2)) !important; }

/* Progress bar fill. */
.s96-gold-bar { background: linear-gradient(90deg, #C9A227, var(--lava-bright, #FFD24A)) !important; }

/* Amount input: a slightly stronger resting border, gold on focus. */
.s96-gold-input { border-color: rgba(214, 172, 20, 0.3) !important; }
.s96-gold-input:focus { border-color: var(--text-accent, #FFD24A) !important; }

/* Placeholder art behind a game tile whose thumbnail is missing. */
.s96-gold-art { background-image: linear-gradient(135deg, #3a2f08, #1c1603) !important; }


/* ==================================================================
   Deposit bonus picker — design D3

   Two ideas carry this:
   - the figure on the left is what the bonus is WORTH on the amount just
     typed. +$50 and +$4 compare at a glance; 100% and 8% do not.
   - the colour is the TURNOVER, not decoration. Green is money you can
     walk away with, amber is money locked up a while. It rides on a 4px
     edge and the figure only — the card stays neutral so five rows do not
     read as traffic lights.
   ================================================================== */
.dep-bonus { margin: 14px 16px 0; }
.dep-bonus-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.dep-bonus-head h4 { margin: 0; font-size: 13px; font-weight: 800; color: #f6efe0; }
.dep-bonus-count { font-size: 11px; font-weight: 700; color: #E3C04A; }
.dep-bonus-list { display: flex; flex-direction: column; gap: 8px; }

.dep-b-row {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    padding: 12px 12px 12px 0; border-radius: 13px;
    border: 1px solid rgba(184, 199, 217, 0.18); background: #22262d;
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dep-b-row:active { transform: scale(.99); }
.dep-b-row.is-on {
    border-color: #E3C04A;
    background: linear-gradient(180deg, rgba(227,192,74,.13), rgba(227,192,74,.03));
    box-shadow: 0 0 0 1px rgba(227,192,74,.34);
}
/* Still priced, still readable: a row under its minimum is a reason to
   deposit more, not a dead line. */
.dep-b-row.is-short { opacity: .42; cursor: not-allowed; }

.dep-b-edge { flex: none; width: 4px; align-self: stretch; border-radius: 0 3px 3px 0; margin-right: 9px; }
.dep-b-row.is-easy .dep-b-edge { background: #4fc9a0; }
.dep-b-row.is-mid  .dep-b-edge { background: #e0a44f; }
.dep-b-row.is-hard .dep-b-edge { background: #e0663f; }
.dep-b-row.is-none .dep-b-edge { background: rgba(184,199,217,.25); }

.dep-b-amt {
    flex: none; min-width: 68px; text-align: center; padding: 8px 6px;
    border-radius: 10px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
}
.dep-b-amt-v { display: block; font-family: Oswald, Inter, sans-serif; font-size: 17px; font-weight: 700; line-height: 1; }
.dep-b-row.is-easy .dep-b-amt-v { color: #4fc9a0; }
.dep-b-row.is-mid  .dep-b-amt-v { color: #f0bd72; }
.dep-b-row.is-hard .dep-b-amt-v { color: #f59a75; }
.dep-b-row.is-none .dep-b-amt-v { color: #6f839b; font-size: 14px; }
.dep-b-amt-k { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6f839b; }

.dep-b-mid { flex: 1; min-width: 0; }
.dep-b-title { display: block; font-size: 12.5px; font-weight: 800; color: #fff; }
.dep-b-sub { display: block; margin-top: 3px; font-size: 10.5px; color: #9fb3ca; line-height: 1.5; }
.dep-b-pill { display: inline-block; padding: 1.5px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.dep-b-pill.is-easy { background: rgba(79,201,160,.16); color: #4fc9a0; }
.dep-b-pill.is-mid  { background: rgba(224,164,79,.16); color: #f0bd72; }
.dep-b-pill.is-hard { background: rgba(224,102,63,.18); color: #f59a75; }

/* Flags the option the player can most easily keep, not the biggest figure.
   100% at 5x is $50 you must turn over $250 to hold on to. */
.dep-b-flag {
    position: absolute; top: 0; right: 0;
    padding: 3px 8px; border-bottom-left-radius: 9px;
    background: #4fc9a0; color: #04231a;
    font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}

.dep-b-tick { flex: none; width: 17px; height: 17px; border-radius: 999px; border: 2px solid rgba(184,199,217,.4); position: relative; }
.dep-b-row.is-on .dep-b-tick { background: #C9A227; border-color: #E3C04A; }
.dep-b-row.is-on .dep-b-tick::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px; border: solid #1a1403; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dep-b-none .dep-b-title { color: #f3e6c8; }


/* ==================================================================
   REWARD PANEL — one sheet for "what do I have right now?"
   ------------------------------------------------------------------
   Written in the same language as the deposit bonus picker above:
   a neutral #22262d row, a 4px meaning-carrying edge, a value chip on
   the left of the label, rounded 13px. A player who has just chosen a
   bonus on the deposit screen should recognise these rows instantly.

   COLOUR. The site rule holds: gold #E3C04A is money you can collect
   by tapping it right now, red is destructive, green is confirmed,
   everything else is neutral at two brightness levels. So:

     - a Ready row that can be claimed on the spot gets the gold edge
       and an gold FILLED button. Nothing else is filled gold.
     - the deposit offer gets the gold edge and an gold OUTLINED
       button. It is the most valuable row in the panel and is sized
       and tagged to say so — but the money is not in hand until the
       player deposits, and filling its button would spend the one
       colour that means "tap and it is yours".
     - Coming up and In progress rows are neutral. They are the reason
       the panel never looks empty, not the reason to tap.
     - the ONE exception is spin_expiry, whose countdown means the
       opposite of every other countdown: time until the spins are
       LOST. That is destructive, so it is red and it says EXPIRES.
       A player must never read it as "arriving soon".

   No gold, no yellow, anywhere in this block.
   ================================================================== */

/* ---- header entry ------------------------------------------------ */
#app-header .s96-hdr-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

#app-header .s96-rw-btn {
    position: relative;
    width: 31px; height: 31px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(184, 199, 217, 0.34);
    background: #1c2026;
    color: #e3ecf7;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}
#app-header .s96-rw-btn i { font-size: 13px; }
#app-header .s96-rw-btn:active { transform: scale(.94); }
#app-header .s96-rw-btn[hidden] { display: none; }

/* The badge counts what is READY, so it is claim-gold like the button
   it stands for. Hidden outright at zero — a "0" pulls the eye to
   nothing at all. */
#app-header .s96-rw-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 15px; height: 15px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: #E3C04A; color: #1a1403;
    font-size: 9px; font-weight: 800; line-height: 1;
    border: 1.5px solid #141619;
}
#app-header .s96-rw-badge[hidden] { display: none; }

/* ---- home prompt -------------------------------------------------- */
/* Deliberately one line, above the fold, above the banner. It is a
   pointer to the panel, not a second panel — anything taller would be
   competing with the home screen it sits on top of. */
#s96-rw-prompt[hidden] { display: none; }
.s96-rw-prompt {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 16px 0;
    padding: 9px 10px 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(227, 192, 74, .34);
    background: linear-gradient(180deg, rgba(227, 192, 74, .14), rgba(227, 192, 74, .04));
}
.s96-rw-prompt > i { color: #E3C04A; font-size: 13px; flex: none; }
.s96-rw-prompt-txt { flex: 1; min-width: 0; font-size: 12px; color: #cfe0f5; }
.s96-rw-prompt-txt b { color: #fff; font-weight: 800; }
.s96-rw-prompt-btn {
    flex: none; padding: 6px 14px; border: 0; border-radius: 9px;
    background: #E3C04A; color: #1a1403;
    font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
    cursor: pointer;
}
.s96-rw-prompt-btn:active { transform: scale(.97); }

/* ---- the sheet ---------------------------------------------------- */
body.s96-rw-open { overflow: hidden; }
#s96-rw[hidden] { display: none; }
.s96-rw {
    position: fixed; inset: 0; z-index: 130;
    display: flex; align-items: flex-end; justify-content: center;
}
.s96-rw-scrim {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .18s ease;
}
.s96-rw.is-in .s96-rw-scrim { opacity: 1; }

.s96-rw-panel {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: 88dvh;
    display: flex; flex-direction: column;
    background: #1e2228;
    border: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(18px); opacity: 0;
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.s96-rw.is-in .s96-rw-panel { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .s96-rw-panel, .s96-rw-scrim { transition: none; }
}

.s96-rw-grab {
    display: block; width: 42px; height: 4px;
    margin: 8px auto 12px;
    padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    cursor: pointer; flex: none;
}

.s96-rw-head {
    flex: none;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 0 18px;
}
.s96-rw-head h2 {
    margin: 0;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-weight: 600; font-size: 17px; letter-spacing: .01em; color: #edeff2;
}
/* claimable over total: "what do I have" and "what else is there", in
   one glyph run. The numerator is the only bright half. */
.s96-rw-frac {
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 14px; font-weight: 500; color: #6f839b;
    font-variant-numeric: tabular-nums; flex: none;
}
.s96-rw-frac b { color: #fff; font-weight: 700; font-size: 18px; }

.s96-rw-sum {
    flex: none;
    margin: 5px 18px 0;
    font-size: 11.5px; color: #8ba1be; line-height: 1.5;
}
.s96-rw-sum.is-live { color: #9fb3ca; }
.s96-rw-sum b { color: #E3C04A; font-weight: 800; font-size: 13px; }

.s96-rw-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* ---- groups ------------------------------------------------------- */
.s96-rw-grp + .s96-rw-grp { margin-top: 18px; }
.s96-rw-grp-h {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 8px;
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #6f839b;
}
.s96-rw-grp-h span {
    min-width: 16px; padding: 1px 5px; border-radius: 999px;
    background: rgba(184, 199, 217, .12); color: #8ba1be;
    font-size: 9px; font-weight: 700; letter-spacing: 0; text-align: center;
}

/* ---- rows --------------------------------------------------------- */
.s96-rw-row {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px 11px 0;
    border-radius: 13px;
    border: 1px solid rgba(184, 199, 217, .18);
    background: #22262d;
}
.s96-rw-row + .s96-rw-row { margin-top: 8px; }

.s96-rw-edge {
    flex: none; width: 4px; align-self: stretch;
    border-radius: 0 3px 3px 0; margin-right: 8px;
    background: #E3C04A;
}
.s96-rw-row.is-quiet .s96-rw-edge { background: rgba(184, 199, 217, .25); }
.s96-rw-row.is-deadline .s96-rw-edge { background: #ff5648; }

.s96-rw-ico {
    flex: none; width: 17px; text-align: center;
    font-size: 13px; color: #E3C04A;
}
.s96-rw-row.is-quiet .s96-rw-ico { color: #8ba1be; }
.s96-rw-row.is-deadline .s96-rw-ico { color: #ff5648; }

.s96-rw-mid { flex: 1; min-width: 0; }
.s96-rw-t { display: block; font-size: 12.5px; font-weight: 800; color: #fff; }
.s96-rw-row.is-quiet .s96-rw-t { color: #dbe4f0; font-weight: 700; }
.s96-rw-s {
    display: block; margin-top: 3px;
    font-size: 10.5px; color: #8ba1be; line-height: 1.45;
}

/* Value chip — same idea as the deposit picker: the figure is what the
   row is WORTH, stated before the verb. */
.s96-rw-chip {
    flex: none; min-width: 52px; text-align: center;
    padding: 6px 7px; border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
}
.s96-rw-chip b {
    display: block;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 15px; font-weight: 700; line-height: 1; color: #E3C04A;
    font-variant-numeric: tabular-nums;
}
.s96-rw-chip em {
    display: block; margin-top: 2px; font-style: normal;
    font-size: 8px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #6f839b;
}

/* The button IS the verb. */
.s96-rw-act {
    flex: none; padding: 8px 14px; border: 0; border-radius: 10px;
    background: #E3C04A; color: #1a1403;
    font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
    cursor: pointer; white-space: nowrap;
}
.s96-rw-act:active { transform: scale(.97); }
.s96-rw-act.is-busy, .s96-rw-act:disabled { opacity: .45; cursor: default; }

/* ---- the deposit offer -------------------------------------------- */
/* The one row on this panel worth real money rather than small change.
   It gets the width, the tag and an gold wash; its button stays
   outlined because the money is not in hand until the deposit lands. */
.s96-rw-row.is-offer {
    padding-top: 22px; padding-bottom: 13px;
    border-color: rgba(227, 192, 74, .4);
    background: linear-gradient(180deg, rgba(227, 192, 74, .13), rgba(227, 192, 74, .03));
    box-shadow: 0 0 0 1px rgba(227, 192, 74, .16);
}
.s96-rw-row.is-offer .s96-rw-t { font-size: 13.5px; }
.s96-rw-act.is-offer {
    background: transparent; color: #9ecbff;
    border: 1px solid rgba(227, 192, 74, .6);
}
.s96-rw-tag {
    position: absolute; top: 0; left: 12px;
    padding: 2.5px 8px; border-radius: 0 0 9px 9px;
    background: #E3C04A; color: #1a1403;
    font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* ---- countdown ---------------------------------------------------- */
.s96-rw-clock {
    flex: none; min-width: 62px; text-align: right;
}
.s96-rw-clock em {
    display: block; font-style: normal;
    font-size: 8px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #6f839b;
}
.s96-rw-clock b {
    display: block; margin-top: 2px;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 14px; font-weight: 600; line-height: 1;
    color: #c4d1df; font-variant-numeric: tabular-nums;
}
/* Time until something is LOST, not until it arrives. */
.s96-rw-clock.is-deadline em { color: #ff8a80; }
.s96-rw-clock.is-deadline b { color: #ff5648; }
.s96-rw-row.is-deadline {
    border-color: rgba(255, 86, 72, .3);
    background: linear-gradient(180deg, rgba(255, 86, 72, .07), rgba(255, 86, 72, .01));
}

/* ---- progress ----------------------------------------------------- */
.s96-rw-bar {
    display: block; margin-top: 8px;
    height: 3px; border-radius: 999px;
    background: rgba(184, 199, 217, .14);
    overflow: hidden;
}
.s96-rw-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: #8ba1be;
    min-width: 2px;
    transition: width .3s ease;
}
.s96-rw-pct {
    flex: none; min-width: 34px; text-align: right;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 13px; font-weight: 600; color: #8ba1be;
    font-variant-numeric: tabular-nums;
}

/* ---- empty + errors ----------------------------------------------- */
.s96-rw-empty { padding: 26px 14px 34px; text-align: center; }
.s96-rw-empty > i { font-size: 22px; color: #E3C04A; }
.s96-rw-empty-t {
    margin: 12px 0 0;
    font-family: var(--sun-font-display, 'Oswald', sans-serif);
    font-size: 15px; font-weight: 600; color: #edeff2;
}
.s96-rw-empty-s {
    margin: 7px auto 0; max-width: 290px;
    font-size: 11.5px; color: #8ba1be; line-height: 1.6;
}
.s96-rw-empty-btn {
    margin-top: 16px; padding: 9px 20px; border-radius: 10px;
    border: 1px solid rgba(184, 199, 217, .35);
    background: #22262d; color: #c4d1df;
    font-size: 11.5px; font-weight: 700; cursor: pointer;
}

.s96-rw-note {
    margin: 16px 0 0; text-align: center;
    font-size: 10.5px; color: #6f839b;
}
.s96-rw-note button {
    border: 0; background: none; padding: 0 0 0 4px;
    color: #9ecbff; font-size: 10.5px; font-weight: 700;
    text-decoration: underline; cursor: pointer;
}

@media (max-width: 360px) {
    .s96-rw-chip { min-width: 46px; }
    .s96-rw-act { padding: 8px 11px; }
}


/* ==================================================================
   REWARD IDENTITY — giving each reward its own mark
   ------------------------------------------------------------------
   The panel above was built right and still read as one flat wash,
   because every row drew the same pale glyph at the same size in the
   same box. Five different products rendered identically.

   The site rule — gold is money you can claim, red is destructive,
   green is confirmed, everything else neutral at two brightness
   levels — is correct for an interface full of buttons, and it is
   what produced the monotony here, because this is not an interface
   full of buttons. It is a list of distinct products, and it is the
   one surface on the site where making a reward FEEL like a reward
   outranks restraint.

   THE RULE, AND WHERE ITS BOUNDARY SITS

     Inside the mark, colour is free: each reward type is drawn as
     itself, in full colour. Outside the mark nothing changes. The
     4px edge bar, the filled button, the value chip and every word
     of type keep exactly the meanings they had.

   That boundary is the whole design. It is what lets the panel be
   loud without spending the one signal that matters: claim-gold
   #E3C04A still appears in precisely two places — the edge bar of a
   claimable row and the filled button that claims it — and no mark
   is dominantly gold, so the button beside a mark never has to
   compete with it. Gold and yellow are absent by construction:
   build-marks.js measures the hue of every colour it is about to
   write and refuses the file if any of them lands in the 20-70deg
   band. The obvious cashback mark is a gold coin; it is rose here,
   with a white dollar.

   MOTION: ONLY WHAT CAN BE TAKEN RIGHT NOW

   Eleven animated rows would be this same failure again with motion
   instead of saturation, and unlike colour it costs battery for as
   long as the sheet is open. So motion is restricted to group:
   'ready' — in practice one to three rows — which turns "the one
   that is moving" into the signal for "the one you can take".

     ready     the mark runs a slow loop and the tile catches a
               specular sweep about once every six seconds. Nothing
               is faster than 3.2s, every curve is ease-in-out, and
               the delays are staggered per key so two ready rows
               never beat together — a list where everything pulses
               in sync reads as nervous rather than alive. Each loop
               was watched for a full minute before it shipped.
     soon      static. The countdown digits are already moving;
               a second moving thing for one piece of information is
               noise, not emphasis.
     progress  static mark. The bar fills once, on render, which is
               the honest place for motion there — it shows the
               figure arriving rather than decorating it. It does
               not loop.
     deadline  ONE exception, argued at its own rule below.

   Everything above is dropped entirely under prefers-reduced-motion,
   in one place, at the foot of this block.

   MECHANISM. bonus-panel.js is not edited. Each row already carries
   s96-rw-k-<key>, which gives three layers and no markup change:

     <i>       the tile — static, clipped, carries the wash and ring
     ::before  the mark — this is where FontAwesome draws, so
               emptying `content` removes its glyph; repainted as
               the illustration, and this is the layer that moves
     ::after   the specular sweep on ready rows, and the urgency
               ring on the deadline row

   Every animation runs on `transform` and `opacity` only, so each
   one composites and none of them relayouts the sheet.

   Weight: inline SVG data URIs. No requests, nothing to cache-bust,
   and no animated WebP or Lottie runtime on a home page already
   carrying 1.2 MB. Source and rationale:
   scripts/reward-icons/build-marks.js.

   A defect fixed on the way past: fa-hand-holding-dollar is not in
   this site's FontAwesome Free subset, so the Weekly Cashback row
   was rendering NO icon at all. It has a mark now.
   ================================================================== */

/* ---- the three layers -------------------------------------------- */
.s96-rw-row .s96-rw-ico {
    position: relative;
    overflow: hidden;
    width: 30px;
    height: 30px;
    flex: none;
    font-size: 0;
    line-height: 0;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* The mark. `content: ""` is what removes FontAwesome's glyph; the
   illustration arrives as a background from the generated block. */
.s96-rw-row .s96-rw-ico::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    will-change: transform;
}

/* Ready rows are the loud ones. A countdown is information, not an
   invitation, so it keeps the hue but not the volume. Progress rows
   sit between the two: VIP is permanently "in progress" and would
   otherwise be permanently dimmed. */
/* Quiet rows keep their family's colour and lose its volume — the tile
   wash is regenerated at under half alpha per key in the block below,
   and the illustration itself is desaturated here. Turning them grey
   instead would have been simpler and would have thrown away the one
   thing the marks are for: a player scanning "Coming up" should still
   see at a glance that the thing arriving is the cashback. */
.s96-rw-row.is-quiet .s96-rw-ico::before { opacity: .8; filter: saturate(.76); }
.s96-rw-row.is-prog  .s96-rw-ico::before { opacity: .94; filter: saturate(.9); }
.s96-rw-row.is-deadline .s96-rw-ico::before { opacity: 1; filter: none; }

/* The offer row is the tallest; its tile sits with the title rather
   than centred on the whole box, which is where the eye already is. */
.s96-rw-row.is-offer .s96-rw-ico { align-self: flex-start; margin-top: 2px; }

/* ---- the loops ---------------------------------------------------- */
/* Five, one per reward that can be claimed on the spot. Each is a
   single property on a composited layer, and each was chosen to be
   the thing the object would actually do rather than a generic
   pulse: the wallet takes a breath, the coin turns a few degrees
   into the light, the wheel eases and settles, the calendar page
   lifts at its bottom edge, the gift rocks as if it had just been
   put down. */

/* the wallet — a breath. */
@keyframes s96rw-lift {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-1.1px) scale(1.055); }
}

/* the coin — a slow turn into the light. Flat for three quarters of
   the loop, so it reads as an occasional glance rather than a wobble. */
@keyframes s96rw-catch {
    0%, 58%, 100% { transform: scaleX(1); }
    76%           { transform: scaleX(.84); }
    88%           { transform: scaleX(1.02); }
}

/* the wheel — eases a few degrees and settles back. Never a full
   revolution: the wheel has not been spun yet, and showing it spin
   would promise an outcome the row has not delivered. */
@keyframes s96rw-ease {
    0%, 46%, 100% { transform: rotate(0deg); }
    72%           { transform: rotate(19deg); }
    86%           { transform: rotate(14deg); }
}

/* the calendar — the page lifts at its bottom edge. Anchored at the
   top, so the binding stays put and only the leaf moves. */
@keyframes s96rw-page {
    0%, 100% { transform: perspective(60px) rotateX(0deg); }
    50%      { transform: perspective(60px) rotateX(-11deg); }
}

/* the gift — rocks, as if just set down. */
@keyframes s96rw-rock {
    0%, 100% { transform: rotate(-3.2deg); }
    50%      { transform: rotate(3.2deg); }
}

/* ---- the specular sweep ------------------------------------------- */
/* One band of light crossing the tile. The sweep itself lasts about a
   second; the keyframe holds it off-screen for the other five, which
   is the difference between a highlight and a strobe. Ready rows
   only, and the delays below keep them out of step. */
@keyframes s96rw-sweep {
    0%   { transform: translateX(-150%) rotate(18deg); opacity: 0; }
    3%   { opacity: .5; }
    15%  { transform: translateX(260%) rotate(18deg); opacity: 0; }
    100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}
.s96-rw-row:not(.is-quiet) .s96-rw-ico::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 42%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
    /* Invisible at rest. Without this the band parks across the tile as a
       stripe whenever the animation is absent — which is exactly what
       happens on a frozen frame, and would have happened on any browser
       that declined the animation. */
    opacity: 0;
    animation: s96rw-sweep 6.4s linear infinite;
    will-change: transform;
    pointer-events: none;
}
.s96-rw-row.s96-rw-k-weekly_cashback:not(.is-quiet) .s96-rw-ico::after { animation-delay: 1.6s; }
.s96-rw-row.s96-rw-k-checkin_today:not(.is-quiet)   .s96-rw-ico::after { animation-delay: 3.1s; }
.s96-rw-row.s96-rw-k-spin_wheel:not(.is-quiet)      .s96-rw-ico::after { animation-delay: 4.4s; }
.s96-rw-row[class*="s96-rw-k-deposit_bonus"]:not(.is-quiet) .s96-rw-ico::after { animation-delay: 2.3s; }

/* ---- the one exception: is-deadline -------------------------------- */
/* This row sits in "Coming up", which is otherwise static, and it gets
   motion anyway. The argument: every other countdown on the panel is
   time until something ARRIVES, and doing nothing about those costs
   the player nothing. This one is time until unspent spins are LOST.
   It is the only row where doing nothing loses money, so it is the
   only row where stillness would be the wrong report.

   It is deliberately not the ready-row treatment. No sweep, nothing
   scales, nothing bounces — those read as celebration. What moves is
   a red ring tightening and releasing on the tile, slowly, at the
   pace of a held breath. That reads as pressure, and it stops the
   instant the spins are gone, because the row stops existing. */
@keyframes s96rw-urgent {
    0%, 100% { opacity: .22; }
    50%      { opacity: .95; }
}
.s96-rw-row.is-deadline .s96-rw-ico::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1.5px #ff5648;
    animation: s96rw-urgent 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* ---- progress: once, on render, never looping ---------------------- */
/* renderSheet() rewrites the body, so this replays when the panel is
   opened or refreshed and at no other time. The bar carries its width
   inline; scaling the X axis fills it to that width without this
   stylesheet needing to know the number. */
@keyframes s96rw-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.s96-rw-row.is-prog .s96-rw-bar i {
    transform-origin: left center;
    animation: s96rw-fill .85s cubic-bezier(.2, .8, .3, 1) both;
}
/* The VIP bar takes the medal's violet. This is the only place a mark's
   colour is allowed outside its tile, and it is allowed because the bar
   IS the VIP product rather than a control that happens to sit near it. */
.s96-rw-row.s96-rw-k-vip_progress .s96-rw-bar i { background: #a78bfa; }
.s96-rw-row.s96-rw-k-vip_progress .s96-rw-pct { color: #b79df9; }

/* ---- small screens ------------------------------------------------- */
@media (max-width: 360px) {
    .s96-rw-row .s96-rw-ico { width: 26px; height: 26px; border-radius: 9px; }
    .s96-rw-row .s96-rw-ico::before { background-size: 18px 18px; }
}

/* ---- the switch ---------------------------------------------------- */
/* Every moving thing this block introduced, off in one place. The
   sweep and the urgency ring are removed outright rather than frozen,
   because a sweep parked mid-tile is a stripe nobody asked for. */
@media (prefers-reduced-motion: reduce) {
    .s96-rw-row .s96-rw-ico::before,
    .s96-rw-row.is-prog .s96-rw-bar i {
        animation: none !important;
        transform: none !important;
    }
    .s96-rw-row .s96-rw-ico::after { display: none !important; }
}

/* ---- reward identity marks (generated: scripts/reward-icons/build-marks.js) ---
   Full-colour illustrations, one per reward type. No gold, no yellow, no
   amber anywhere in this block - the build refuses to write it if there is.
   No mark is dominantly gold, so the filled gold button next to a Ready
   row keeps its monopoly on "tap this and the money is yours".

   The loop at the end of each Ready rule is the whole motion budget: it runs
   on group:'ready' only, on transform only, and it is switched off entirely
   under prefers-reduced-motion in the block above. */
.s96-rw-row.s96-rw-k-instant_rebate .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(23,195,178,.30), rgba(23,195,178,.07));
    box-shadow: inset 0 0 0 1px rgba(94,234,212,.40);
}
.s96-rw-row.s96-rw-k-instant_rebate.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(23, 195, 178, 0.126), rgba(23, 195, 178, 0.029));
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.18);
}
.s96-rw-row.s96-rw-k-instant_rebate .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.2' y='6' width='19.6' height='14.4' rx='3.2' fill='%230d7c72'/%3E%3Cg transform='rotate(-9 12 6.5)'%3E%3Crect x='6.2' y='2.9' width='12.4' height='6.6' rx='1.7' fill='%23fb7185'/%3E%3Crect x='6.2' y='4.9' width='12.4' height='1.9' fill='%23ffe4e6'/%3E%3C/g%3E%3Cpath d='M2.2 9.4h19.6v7.8a3.2 3.2 0 0 1-3.2 3.2H5.4a3.2 3.2 0 0 1-3.2-3.2V9.4Z' fill='%2317c3b2'/%3E%3Cpath d='M2.2 9.4h19.6v2.1H2.2V9.4Z' fill='%235eead4'/%3E%3Crect x='14.6' y='12.6' width='8' height='4.8' rx='2.4' fill='%23ccfbf1'/%3E%3Ccircle cx='18.3' cy='15' r='1.25' fill='%230d7c72'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-instant_rebate:not(.is-quiet) .s96-rw-ico::before {
    transform-origin: 50% 60%;
    animation: s96rw-lift 3.6s ease-in-out 0s infinite;
}
.s96-rw-row.s96-rw-k-instant_rebate_next .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(23,195,178,.30), rgba(23,195,178,.07));
    box-shadow: inset 0 0 0 1px rgba(94,234,212,.40);
}
.s96-rw-row.s96-rw-k-instant_rebate_next.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(23, 195, 178, 0.126), rgba(23, 195, 178, 0.029));
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.18);
}
.s96-rw-row.s96-rw-k-instant_rebate_next .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.2' y='6' width='19.6' height='14.4' rx='3.2' fill='%230d7c72'/%3E%3Cg transform='rotate(-9 12 6.5)'%3E%3Crect x='6.2' y='2.9' width='12.4' height='6.6' rx='1.7' fill='%23fb7185'/%3E%3Crect x='6.2' y='4.9' width='12.4' height='1.9' fill='%23ffe4e6'/%3E%3C/g%3E%3Cpath d='M2.2 9.4h19.6v7.8a3.2 3.2 0 0 1-3.2 3.2H5.4a3.2 3.2 0 0 1-3.2-3.2V9.4Z' fill='%2317c3b2'/%3E%3Cpath d='M2.2 9.4h19.6v2.1H2.2V9.4Z' fill='%235eead4'/%3E%3Crect x='14.6' y='12.6' width='8' height='4.8' rx='2.4' fill='%23ccfbf1'/%3E%3Ccircle cx='18.3' cy='15' r='1.25' fill='%230d7c72'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-weekly_cashback .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(251,113,133,.30), rgba(251,113,133,.07));
    box-shadow: inset 0 0 0 1px rgba(251,113,133,.40);
}
.s96-rw-row.s96-rw-k-weekly_cashback.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(251, 113, 133, 0.126), rgba(251, 113, 133, 0.029));
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.18);
}
.s96-rw-row.s96-rw-k-weekly_cashback .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.3' fill='%239f1239'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='%23fb7185'/%3E%3Cpath d='M12 7.1v9.8' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M14.7 9.5a3.2 3.2 0 0 0-2.7-1.4c-1.7 0-3 .9-3 2.1 0 2.8 6 1.6 6 4.3 0 1.2-1.3 2.1-3 2.1a3.2 3.2 0 0 1-2.8-1.5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M6.3 9.1a7.4 7.4 0 0 1 4.2-3.3' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-weekly_cashback:not(.is-quiet) .s96-rw-ico::before {
    transform-origin: 50% 50%;
    animation: s96rw-catch 4.4s ease-in-out 1.3s infinite;
}
.s96-rw-row.s96-rw-k-weekly_cashback_next .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(251,113,133,.30), rgba(251,113,133,.07));
    box-shadow: inset 0 0 0 1px rgba(251,113,133,.40);
}
.s96-rw-row.s96-rw-k-weekly_cashback_next.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(251, 113, 133, 0.126), rgba(251, 113, 133, 0.029));
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.18);
}
.s96-rw-row.s96-rw-k-weekly_cashback_next .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.3' fill='%239f1239'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='%23fb7185'/%3E%3Cpath d='M12 7.1v9.8' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M14.7 9.5a3.2 3.2 0 0 0-2.7-1.4c-1.7 0-3 .9-3 2.1 0 2.8 6 1.6 6 4.3 0 1.2-1.3 2.1-3 2.1a3.2 3.2 0 0 1-2.8-1.5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M6.3 9.1a7.4 7.4 0 0 1 4.2-3.3' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-spin_wheel .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139,92,246,.26), rgba(244,63,94,.10));
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.40);
}
.s96-rw-row.s96-rw-k-spin_wheel.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139, 92, 246, 0.109), rgba(244, 63, 94, 0.042));
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.18);
}
.s96-rw-row.s96-rw-k-spin_wheel .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.4' fill='%23e2e8f0'/%3E%3Cpath d='M12 2.6A9.4 9.4 0 0 1 21.4 12H12V2.6Z' fill='%238b5cf6'/%3E%3Cpath d='M21.4 12A9.4 9.4 0 0 1 12 21.4V12h9.4Z' fill='%23f43f5e'/%3E%3Cpath d='M12 21.4A9.4 9.4 0 0 1 2.6 12H12v9.4Z' fill='%2317c3b2'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%230f172a'/%3E%3Ccircle cx='12' cy='12' r='1.05' fill='%23fff'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-spin_wheel:not(.is-quiet) .s96-rw-ico::before {
    transform-origin: 50% 50%;
    animation: s96rw-ease 5.2s ease-in-out .5s infinite;
}
.s96-rw-row.s96-rw-k-spin_expiry .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(239,68,68,.24), rgba(239,68,68,.06));
    box-shadow: inset 0 0 0 1px rgba(248,113,113,.36);
}
.s96-rw-row.s96-rw-k-spin_expiry.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(239, 68, 68, 0.101), rgba(239, 68, 68, 0.025));
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.162);
}
.s96-rw-row.s96-rw-k-spin_expiry .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.4' r='9.1' fill='%237f1d1d'/%3E%3Ccircle cx='12' cy='12.4' r='7.1' fill='%23ef4444'/%3E%3Cpath d='M12 7.9v4.6l3.3 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12.4' r='1.05' fill='%23fff'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-checkin_today .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(99,102,241,.28), rgba(16,185,129,.08));
    box-shadow: inset 0 0 0 1px rgba(165,180,252,.38);
}
.s96-rw-row.s96-rw-k-checkin_today.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(99, 102, 241, 0.118), rgba(16, 185, 129, 0.034));
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.171);
}
.s96-rw-row.s96-rw-k-checkin_today .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.8' y='4.9' width='18.4' height='16.3' rx='3.2' fill='%23f8fafc'/%3E%3Cpath d='M2.8 8.1a3.2 3.2 0 0 1 3.2-3.2h12a3.2 3.2 0 0 1 3.2 3.2v2.2H2.8V8.1Z' fill='%234f46e5'/%3E%3Crect x='6.3' y='2.2' width='2.7' height='4.7' rx='1.35' fill='%23312e81'/%3E%3Crect x='15' y='2.2' width='2.7' height='4.7' rx='1.35' fill='%23312e81'/%3E%3Crect x='5.6' y='12.2' width='3.1' height='2.7' rx='.9' fill='%23cbd5e1'/%3E%3Ccircle cx='13.6' cy='16.1' r='4.9' fill='%2310b981'/%3E%3Cpath d='m11.4 16.2 1.6 1.6 2.9-3.2' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-checkin_today:not(.is-quiet) .s96-rw-ico::before {
    transform-origin: 50% 0%;
    animation: s96rw-page 4s ease-in-out 2.1s infinite;
}
.s96-rw-row.s96-rw-k-checkin_tomorrow .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(99,102,241,.28), rgba(16,185,129,.08));
    box-shadow: inset 0 0 0 1px rgba(165,180,252,.38);
}
.s96-rw-row.s96-rw-k-checkin_tomorrow.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(99, 102, 241, 0.118), rgba(16, 185, 129, 0.034));
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.171);
}
.s96-rw-row.s96-rw-k-checkin_tomorrow .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.8' y='4.9' width='18.4' height='16.3' rx='3.2' fill='%23f8fafc'/%3E%3Cpath d='M2.8 8.1a3.2 3.2 0 0 1 3.2-3.2h12a3.2 3.2 0 0 1 3.2 3.2v2.2H2.8V8.1Z' fill='%234f46e5'/%3E%3Crect x='6.3' y='2.2' width='2.7' height='4.7' rx='1.35' fill='%23312e81'/%3E%3Crect x='15' y='2.2' width='2.7' height='4.7' rx='1.35' fill='%23312e81'/%3E%3Crect x='5.6' y='12.2' width='3.1' height='2.7' rx='.9' fill='%23cbd5e1'/%3E%3Ccircle cx='13.6' cy='16.1' r='4.9' fill='%2310b981'/%3E%3Cpath d='m11.4 16.2 1.6 1.6 2.9-3.2' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-vip_progress .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139,92,246,.30), rgba(139,92,246,.07));
    box-shadow: inset 0 0 0 1px rgba(167,139,250,.40);
}
.s96-rw-row.s96-rw-k-vip_progress.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139, 92, 246, 0.126), rgba(139, 92, 246, 0.029));
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.18);
}
.s96-rw-row.s96-rw-k-vip_progress .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 13.4 5.7 21.6l6.3-2.8 6.3 2.8-2.7-8.2H8.4Z' fill='%23f43f5e'/%3E%3Cpath d='M8.4 13.4 7.4 16.5l4.6 2 4.6-2-1-3.1H8.4Z' fill='%23be123c'/%3E%3Ccircle cx='12' cy='9.5' r='7.3' fill='%236d28d9'/%3E%3Ccircle cx='12' cy='9.5' r='5.5' fill='%23a78bfa'/%3E%3Cpath d='m12 5.4 1.42 2.88 3.18.46-2.3 2.24.54 3.17L12 12.66l-2.84 1.49.54-3.17-2.3-2.24 3.18-.46L12 5.4Z' fill='%23fff'/%3E%3C/svg%3E"); }
.s96-rw-row.s96-rw-k-active_bonus_turnover .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139,161,190,.11), rgba(139,161,190,.03));
    box-shadow: inset 0 0 0 1px rgba(139,161,190,.18);
}
.s96-rw-row.s96-rw-k-active_bonus_turnover.is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139, 161, 190, 0.046), rgba(139, 161, 190, 0.013));
    box-shadow: inset 0 0 0 1px rgba(139, 161, 190, 0.081);
}
.s96-rw-row.s96-rw-k-active_bonus_turnover .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='13.4' width='4.6' height='7.4' rx='1.6' fill='%233d5a7c'/%3E%3Crect x='9.7' y='9.2' width='4.6' height='11.6' rx='1.6' fill='%235b7ea6'/%3E%3Crect x='16.4' y='4.6' width='4.6' height='16.2' rx='1.6' fill='%23a5c0dd'/%3E%3C/svg%3E"); }
.s96-rw-row[class*="s96-rw-k-deposit_bonus"] .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(217,70,239,.28), rgba(217,70,239,.07));
    box-shadow: inset 0 0 0 1px rgba(240,171,252,.38);
}
.s96-rw-row[class*="s96-rw-k-deposit_bonus"].is-quiet .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(217, 70, 239, 0.118), rgba(217, 70, 239, 0.029));
    box-shadow: inset 0 0 0 1px rgba(240, 171, 252, 0.171);
}
.s96-rw-row[class*="s96-rw-k-deposit_bonus"] .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.8' y='10.3' width='18.4' height='10.7' rx='2.4' fill='%2386198f'/%3E%3Crect x='1.9' y='6.4' width='20.2' height='4.9' rx='1.95' fill='%23d946ef'/%3E%3Crect x='10.2' y='6.4' width='3.6' height='14.6' fill='%23fdf4ff'/%3E%3Cpath d='M12 6.4C10.4 2.3 5.3 3.4 6.4 6.4H12Zm0 0c1.6-4.1 6.7-3 5.6 0H12Z' fill='%23f5d0fe'/%3E%3C/svg%3E"); }
.s96-rw-row[class*="s96-rw-k-deposit_bonus"]:not(.is-quiet) .s96-rw-ico::before {
    transform-origin: 50% 85%;
    animation: s96rw-rock 4.8s ease-in-out .9s infinite;
}
.s96-rw-row.is-deadline .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(239,68,68,.24), rgba(239,68,68,.06)) !important;
    box-shadow: inset 0 0 0 1px rgba(248,113,113,.36);
}
.s96-rw-row.is-deadline .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.4' r='9.1' fill='%237f1d1d'/%3E%3Ccircle cx='12' cy='12.4' r='7.1' fill='%23ef4444'/%3E%3Cpath d='M12 7.9v4.6l3.3 2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12.4' r='1.05' fill='%23fff'/%3E%3C/svg%3E") !important; }
.s96-rw-row .s96-rw-ico {
    background-image: linear-gradient(155deg, rgba(139,161,190,.11), rgba(139,161,190,.03));
    box-shadow: inset 0 0 0 1px rgba(139,161,190,.18);
}
.s96-rw-row .s96-rw-ico::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.8' y='10.3' width='18.4' height='10.7' rx='2.4' fill='%2386198f'/%3E%3Crect x='1.9' y='6.4' width='20.2' height='4.9' rx='1.95' fill='%23d946ef'/%3E%3Crect x='10.2' y='6.4' width='3.6' height='14.6' fill='%23fdf4ff'/%3E%3Cpath d='M12 6.4C10.4 2.3 5.3 3.4 6.4 6.4H12Zm0 0c1.6-4.1 6.7-3 5.6 0H12Z' fill='%23f5d0fe'/%3E%3C/svg%3E"); }

/* ==================================================================
   THE TEXT ACCENT — one flat colour doing six different jobs
   ------------------------------------------------------------------
   The icon problem, one layer up. `text-yellow-200/300/400/500` and
   `text-amber-300/400` appear ~110 times across the JS views, and the
   consolidation above maps every one of them onto a single
   --text-accent. In the source those classes were not one thing: they
   marked a dollar figure, a secondary button, a VIP tier, a pending
   state, a blocking notice and a purely decorative icon. Collapsing
   six jobs onto one value is exactly why every emphasised word on the
   site is the same pale blue.

   THE ANSWER IS NOT MORE HUES HERE. The reward panel is a list of
   distinct products and earns hue; a settings screen is not. What
   this layer was missing is RANK. So the accent splits four ways by
   brightness, and takes hue in exactly one place — VIP, which is a
   reward product, in the same violet its crown carries in the panel.

     white    money you hold. A figure is read, not signalled; white
              is the loudest thing on navy and costs no colour.
     bright   the default accent. Emphasis that is genuinely emphasis.
     steel    demoted: "View All", decorative heading icons, pending
              and waiting states. These were competing with the
              content they sit beside for no reason.
     violet   VIP tier, everywhere it appears.
     soft red a notice that BLOCKS the player. One selector only, and
              it is the only expansion of red anywhere in this work.

   Note the demotions. Half of this fix is things getting quieter: a
   panel of eleven equally bright greys is monotone whichever grey you
   pick, and the contrast has to come from somewhere.
   ================================================================== */
:root {
    /* Raised from #b8c7d9. The old value sat exactly between "emphasis"
       and "meta", which is why it read as neither. */
    --text-accent: #dde7f4;
    --accent-money: #ffffff;
    --accent-meta:  #8ba1be;
    --accent-vip:   #b79df9;
    --accent-block: #ff8a80;
}

/* ---- money you hold ---------------------------------------------- */
/* The Tailwind consolidation writes !important, so these must too. */
#downline-total-deposit,
#bet-net-profit,
#setting-referral-code { color: var(--accent-money) !important; }

/* ---- VIP: the one reward product named outside the panel --------- */
#setting-vip,
#setting-vip-next,
#setting-vip-progress-percent,
#user-card-vip { color: var(--accent-vip) !important; }
#user-card-vip { border-color: rgba(183, 157, 249, .55) !important; }

/* ---- demoted: decoration and waiting ----------------------------- */
/* Icons never carry the accent. The site's icon system already ranks
   icons by brightness and reserves hue for meaning; these were the
   last glyphs still opting out of it, and there are six of them on the
   partnership screen alone, all identical. */
i[class*="text-yellow-2"],
i[class*="text-yellow-3"],
i[class*="text-yellow-4"],
i[class*="text-yellow-5"],
i[class*="text-amber-3"],
i[class*="text-amber-4"] { color: var(--accent-meta) !important; }

/* "View All ›" is navigation to a list. Under the site rule that is
   the one thing colour must NOT mark. */
span[class*="text-yellow-400"][onclick*="switchView"],
span[class*="text-yellow-300"][onclick*="switchView"] { color: var(--accent-meta) !important; }

/* States that mean "wait", not "look". */
#deposit-countdown { color: var(--accent-meta) !important; }

/* ---- a notice that blocks ---------------------------------------- */
#bankDetailsRequiredNotice { color: var(--accent-block) !important; }


/* ==================================================================
   THE PANEL'S ENTRY POINT — #s96-rw-btn, two states
   ------------------------------------------------------------------
   The gift button in the header is the door to everything above, and
   it was telling the player nothing about what is behind it. It gets
   exactly two states, and they are driven by the same number the
   badge already shows, so the two can never disagree.

   HOW, WITHOUT TOUCHING THE JS. bonus-panel.js renderEntry() sets
   `badge.hidden = ready > 0 ? false : true` and nothing else — there
   is no class to hook. The badge is a CHILD of the button, so no
   sibling combinator reaches backwards to the <i>. `:has()` does:

       #s96-rw-btn:has(#s96-rw-badge:not([hidden]))

   That is literally "the button, when its own badge is showing", so
   the colour state IS the badge state by construction rather than by
   a second copy of the rule that could drift. A browser too old for
   :has() drops the rule and gets the ready=0 look, which is the safe
   direction to fail in.

   ready = 0   Untouched. A quiet outline glyph is the correct thing
               when there is genuinely nothing to claim, and making
               it shout at zero is how a badge reading "0" gets
               invented.

   ready > 0   The glyph takes claim-gold #E3C04A — the same gold
               as the Claim buttons inside the panel, so the door and
               the room behind it visibly belong together. The button
               is NOT filled gold: a filled gold control means "tap
               this and the money is yours", and this one opens a
               sheet. It gets the gold glyph, an gold border and a
               wash, which is the same grammar the deposit offer row
               uses for "valuable, but not money in hand yet".

   MOTION IS BOUNDED — three cycles, then it stops for good.
   The HANK96 PARTNERSHIP button sits immediately to its right and is
   an animated WebP that never stops. Two things moving forever, 8px
   apart, cancel each other out and the header becomes noise. So this
   nudges when it has something new to say and then holds still. The
   animation restarts only when the rule starts matching again, i.e.
   when ready goes 0 -> n; renderEntry() assigning `hidden = false` to
   an already-visible badge mutates no attribute, so a refresh that
   changes nothing re-triggers nothing.

   The gesture is the same rock the gift mark uses inside the panel —
   same object, same movement, one vocabulary.
   ================================================================== */

/* One burst of three shakes, then ten seconds of stillness, on repeat.
   Percentages are of a 12s loop: each shake is 6% (0.72s), so the movement
   ends at 18% and the glyph holds still to 100%. */
@keyframes s96rw-hdr-nudge {
    /* One shake per 2s loop. A shake is 0.72s -- 36% of the cycle -- at the
       speed that reads as a shake and not a buzz, so only one fits. The
       glyph is still for the remaining 1.28s. */
    0%,  36%, 100% { transform: rotate(0deg) scale(1); }
    9%             { transform: rotate(-9deg) scale(1.07); }
    27%            { transform: rotate(9deg)  scale(1.07); }
}

/* An inline non-replaced box ignores transform; the glyph has to be
   blockified before it can move at all. */
#app-header .s96-rw-btn i { display: block; }

#app-header .s96-rw-btn:has(#s96-rw-badge:not([hidden])) {
    border-color: rgba(227, 192, 74, .55);
    background: linear-gradient(180deg, rgba(227, 192, 74, .17), rgba(227, 192, 74, .05));
}
#app-header .s96-rw-btn:has(#s96-rw-badge:not([hidden])) i {
    color: #E3C04A;
    animation: s96rw-hdr-nudge 2s ease-in-out infinite;
}

/* Reduced motion keeps the STATE and drops the movement: the colour is
   information, the nudge is only a way of delivering it. */
@media (prefers-reduced-motion: reduce) {
    #app-header .s96-rw-btn:has(#s96-rw-badge:not([hidden])) i {
        animation: none !important;
        transform: none !important;
    }
}


/* ==================================================================
   FIRST-VISIT NOTICE — the warning wears a face
   ------------------------------------------------------------------
   What this card says costs money: transfer to a stale account number
   and it does not arrive. The old version put that sentence in small
   grey text, inside a red box, inside a grey card -- the shape of a
   cookie banner, which people dismiss without reading.

   So the warning IS the card. Hector rings for attention at the top,
   the sentence that matters is the largest text in the box, and the
   single red word is the only red on it. Surfaces are the same
   neutrals as the deposit picker and the reward panel, so this reads
   as part of the site rather than a system dialog bolted on.
   ================================================================== */
.s96-notice {
    width: 100%;
    max-width: 330px;
    border-radius: 20px;
    border: 1px solid rgba(184, 199, 217, .16);
    background: #22262d;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
    overflow: hidden;
    padding: 0 0 18px;
    color: #f2f5f9;
}

/* The gold wash reaches just past his head and fades, so the art sits in
   light rather than on a seam. */
.s96-notice-top {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 18px 18px 0;
    background: linear-gradient(180deg, rgba(227, 192, 74, .14), transparent);
}
.s96-notice-art {
    width: 104px;
    height: auto;
    flex: none;
    margin-bottom: -4px;
}
.s96-notice-head { padding-bottom: 14px; }
.s96-notice-kicker {
    display: block;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #E3C04A;
    margin-bottom: 7px;
}
.s96-notice-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #f2f5f9;
}

.s96-notice-body { padding: 16px 18px 18px; }
.s96-notice-lede {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}
/* The only red in the card, on the two words that are the whole point. */
.s96-notice-lede b { color: #ff6b5b; }
.s96-notice-sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #9fb0c4;
}

.s96-notice-btn {
    display: block;
    width: calc(100% - 36px);
    margin: 0 18px;
    border: 0;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: #1a1403;
    background: linear-gradient(180deg, #E3C04A, #C9A227);
    cursor: pointer;
}
.s96-notice-btn:active { filter: brightness(.94); }

/* Short phones: the art is the first thing to give up room, never the
   sentence that costs money. */
@media (max-height: 640px) {
    .s96-notice-art { width: 84px; }
    .s96-notice-title { font-size: 20px; }
}