/* ============================================
   HALLOWEEN THEME OVERRIDES
   All changes are scoped under .halloween-theme
   Remove the class from body to restore original
   ============================================ */

body.halloween-theme {
    /* --- Backgrounds: deep purple + black instead of dark red --- */
    --color-bg-darkest: #0d0a1a;
    --color-bg-dark: #1a1128;
    --color-bg-mid: #251836;
    --color-bg-card: #2e1f42;
    --color-bg-accent: #3a2850;

    /* --- Primary accent: spooky orange (replaces gold) --- */
    --color-gold: #ff7518;
    --color-gold-light: #ffa05c;
    --color-gold-hover: #e55a00;
    --color-gold-secondary: #ff9248;
    --color-text-on-gold: #1a0a00;

    /* --- Borders & focus --- */
    --color-border-subtle: #7a6b94;
    --color-border-gold: rgba(255, 117, 24, 0.18);
    --color-brand-focus: #4a1f7a;

    /* --- Warm accent: toxic green --- */
    --color-accent-warm: #39ff14;

    /* --- Card gradients: purple to deep violet --- */
    --color-card-gradient-start: #6b3fa0;
    --color-card-gradient-mid: #522e82;
    --color-card-gradient-end: #2a1452;

    /* --- Shadow channel (dark purple) ---
       Landing elevation is recomposed on .landing-promo-body. Changing this
       channel alone does not alter shadows :root already composed. */
    --shadow-warm: 13 10 26;

    /* --- Elevation glow: orange instead of gold --- */
    --elev-glow-gold: 0 0 0 2px rgb(255 117 24 / 0.42), 0 0 28px rgb(255 117 24 / 0.25);
}

/* base.css composes these on :root from --shadow-warm, so the channel
   change above does not reach them. */
body.halloween-theme.landing-promo-body {
    --elev-1: 0 1px 2px rgb(var(--shadow-warm) / 0.28),
        0 2px 6px rgb(var(--shadow-warm) / 0.18);
    --elev-2: 0 4px 14px rgb(var(--shadow-warm) / 0.4),
        0 2px 4px rgb(var(--shadow-warm) / 0.22);
    --elev-3: 0 16px 44px rgb(var(--shadow-warm) / 0.52),
        0 8px 20px rgb(var(--shadow-warm) / 0.3);
}

/* --- Hero background: keep the bokeh photo, shift amber onto theme purple --- */
body.halloween-theme .bg-image {
    background-color: #5c2d86;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgb(107 63 160 / 28%), transparent 62%),
        radial-gradient(ellipse 55% 40% at 18% 82%, rgb(163 40 246 / 46%), transparent 58%),
        radial-gradient(ellipse 45% 36% at 84% 72%, rgb(57 255 20 / 8%), transparent 56%),
        linear-gradient(180deg, rgb(13 10 26 / 48%) 0%, rgb(13 10 26 / 12%) 42%, rgb(13 10 26 / 68%) 100%),
        url("/landing-promo/assets/img/bg.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: screen, screen, screen, multiply, luminosity;
}

/* --- Text gradient gold -> orange gradient --- */
body.halloween-theme .text-gradient-gold {
    background: linear-gradient(135deg, #d596fb, #ab63d6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.halloween-theme .tracking-wider.text-sm.xs\:text-base.sm\:text-lg.lg\:text-xl.xl\:text-2xl.text-start.transform.ease-in-out.transition-all.duration-200.mb-2.text-gradient-gold {
    background: none;
    -webkit-text-fill-color: #a328f6;
    color: #a328f6;
}

body.halloween-theme .hero-heading .highlight {
    background: linear-gradient(135deg, #d191f7, #b16bdb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #d191f7;
}

/* --- Glass morphism overrides (purple tint) --- */
body.halloween-theme .glass {
    background: rgb(26 17 40 / 65%);
    border: 1px solid rgb(255 255 255 / 8%);
}

body.halloween-theme .glass-light {
    background: rgb(46 31 66 / 45%);
    border: 1px solid rgb(255 255 255 / 12%);
}

body.halloween-theme .glass-dark {
    background: rgb(13 10 26 / 75%);
    border: 1px solid rgb(255 255 255 / 5%);
}

/* --- Surface elevated card gradient --- */
body.halloween-theme .surface-elevated {
    background: linear-gradient(180deg,
            var(--color-card-gradient-start),
            var(--color-card-gradient-mid),
            var(--color-card-gradient-end));
}

/* --- BUTTON OVERRIDES --- */

/* Primary button: orange fill */
body.halloween-theme .btn-primary {
    background-color: #bf61fb;
    border-color: #8f29d4;
    color: #1a0a00;
}

body.halloween-theme .btn-primary:hover {
    background-color: #bf61fb;
    border-color: #8f29d4;
    box-shadow: 0 4px 16px rgb(191 97 251 / 32%), 0 8px 32px rgb(191 97 251 / 18%);
}

body.halloween-theme .btn-primary:focus-visible {
    box-shadow: 0 0 0 2px rgb(191 97 251 / 40%), 0 0 0 4px rgb(191 97 251 / 10%);
}

/* Secondary button: orange outline */
body.halloween-theme .btn-secondary {
    color: #ffffff;
    border-color: #8f29d4;
}

body.halloween-theme .btn-secondary:hover {
    background-color: #bf61fb;
    color: #1a0a00;
}

body.halloween-theme .btn-secondary:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 117 24 / 40%), 0 0 0 4px rgb(255 117 24 / 10%);
}

/* Register button in nav */
body.halloween-theme .register-btn {
    background-color: #ff7518;
    border-color: #ff7518;
    color: #1a0a00;
}

body.halloween-theme .register-btn:hover {
    background-color: #e55a00;
    border-color: #e55a00;
    box-shadow: 0 2px 8px rgb(255 117 24 / 28%);
}

body.halloween-theme .register-btn:focus-visible,
body.halloween-theme .login-btn:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 117 24 / 40%), 0 0 0 4px rgb(255 117 24 / 10%);
}

body.halloween-theme .login-btn:hover,
body.halloween-theme button.btn-modern.text-white.bg-transparent.hover\:text-accent.border-border-strong:hover,
body.halloween-theme button.btn-modern.font-roboto.text-primary-1.from-yellow-10.hover\:shadow-elev-glow-gold:hover {
    color: #a328f6;
}

/* Bonus badge: toxic green instead of red */
body.halloween-theme .bonus-badge {
    background: #39ff14;
    color: #0a1f00;
}

body.halloween-theme .modern-notif-badge::after {
    background: #a328f6 !important;
    background-color: #a328f6 !important;
    color: #fff !important;
}

body.halloween-theme .modern-notif-header {
    background: linear-gradient(to bottom, #5c2468, #a328f6) !important;
    background-image: linear-gradient(to bottom, #5c2468, #a328f6) !important;
}

body.halloween-theme .modern-notif-modal-header {
    background: linear-gradient(to bottom, #5c2468, #8f29d4) !important;
    background-image: linear-gradient(to bottom, #5c2468, #8f29d4) !important;
}

body.halloween-theme .modern-notif-modal-body,
body.halloween-theme .modern-notif-modal-footer {
    background: #380f3a !important;
    background-color: #380f3a !important;
    background-image: none !important;
}

body.halloween-theme .modern-notif-btn {
    background: #380f3a !important;
    background-color: #380f3a !important;
    background-image: none !important;
    color: #cd83fa !important;
    border-color: #bf61fb !important;
}

body.halloween-theme .modern-notif-content,
body.halloween-theme .modern-notif-item,
body.halloween-theme .modern-notif-item.unread {
    background: #380f3a !important;
    background-color: #380f3a !important;
    background-image: none !important;
}

body.halloween-theme .modern-notif-item:hover,
body.halloween-theme .modern-notif-item.unread:hover {
    background: #5c2468 !important;
    background-color: #5c2468 !important;
    background-image: none !important;
}

body.halloween-theme .modern-notif-actions {
    background: linear-gradient(to bottom, #5c2468, #8f29d4) !important;
    background-image: linear-gradient(to bottom, #5c2468, #8f29d4) !important;
    background-color: #5c2468 !important;
}

body.halloween-theme #livechat-eye-catcher-img {
    display: block;
    overflow: visible;
    width: fit-content;
    height: auto;
    background: url("https://assets.moozi.com/theme-halloween/online-chat-vampire.png") center / 100% 100% no-repeat;
}

body.halloween-theme #livechat-eye-catcher-img > img {
    opacity: 0 !important;
    float: none !important;
    display: block !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1095 / 661;
}

body.halloween-theme .flex.flex-wrap.items-center.gap-1\.5.min-w-0 > p.text-accent {
    color: #f8cd14;
}

body.halloween-theme .w-2\.5.h-2\.5.rounded-full.flex-shrink-0.ring-1.ring-white\/20 {
    background-color: #ef87fc !important;
}

/* Maroon placeholder shifts to the theme purple. Real game art replaces this src. */
body.halloween-theme img[src*="games-loader.webp"] {
    filter: hue-rotate(300deg);
}

/* --- NAV OVERRIDES --- */
body.halloween-theme nav {
    background: #0d0a1a;
}

body.halloween-theme nav::after {
    background: linear-gradient(90deg, transparent, rgb(255 117 24 / 18%), rgb(57 255 20 / 10%), transparent);
}

body.halloween-theme nav.nav--scrolled {
    background-color: transparent;
}

/* --- Haunted castle header art (guest + afterlogin `.nav-container`) ---
   The PNG is a 1599×533 strip. Width tracks the header up to 42rem so the
   moon, clouds, and castle stay the same crop as the reference on wide
   screens. Position sits a little above center so the moon is in the bar.
   The inner <nav> and `.header-bg` layers carry `bg-surface-app` too and
   would paint over it. */
body.halloween-theme .nav-container {
    background-color: #1d0612;
    background-image: url("https://assets.moozi.com/theme-halloween/Haunted-Castle-header.png");
    background-repeat: no-repeat;
    background-size: min(63%, 42rem) auto;
    background-position: center 45%;
}

@media (max-width: 1023px) {
    body.halloween-theme .nav-container {
        background-color: #1d0612;
        background-image: none;
    }
}

body.halloween-theme .nav-container nav,
body.halloween-theme .nav-container .header-bg {
    background-color: transparent;
}

/* --- Side drawer (guest + afterlogin `#drawer-navigation`) ---
   The drawer and its top block both use `bg-surface-elevated`, so the token
   is re-scoped here to keep the whole drawer one colour. */
body.halloween-theme #drawer-navigation {
    --surface-elevated: 39 9 35;    /* #270923 */
    background-color: #270923;
    /* `overflow-y-auto` would scroll the pumpkin with the links. The
       menu already scrolls in `.drawer-navigation-wrapper`. */
    overflow: hidden;
}

/* --- Pumpkin graveyard corner art, pinned to the screen's bottom-left corner ---
   Drawn twice at the same spot: on the body (z 65, under the side drawer) and
   inside the drawer behind its content, so the drawer's links and Log In /
   Sign Up buttons stay on top while the art reads as one piece. When the
   drawer slides away, the body copy shows in full. Width scales with the
   viewport, a bit larger than the old 28vw / fixed 32rem. The picture is
   shifted left and down so it tucks into the corner. Below lg it is lifted
   over the bottom tab bar (h-16); hidden while a game is playing. */
body.halloween-theme {
    --halloween-pumpkin-w: clamp(14rem, 36vw, 32rem);
    --halloween-pumpkin-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    --halloween-pumpkin-nudge-x: clamp(0.75rem, 2vw, 2rem);
    --halloween-pumpkin-nudge-y: clamp(0.6rem, 1.5vw, 1.75rem);
}

@media (min-width: 1024px) {
    body.halloween-theme {
        --halloween-pumpkin-w: clamp(38rem, 33vw, 52rem);
        --halloween-pumpkin-bottom: 0px;
    }
}

body.halloween-theme::after,
body.halloween-theme #drawer-navigation::after {
    content: "";
    left: 0;
    bottom: var(--halloween-pumpkin-bottom);
    width: var(--halloween-pumpkin-w);
    aspect-ratio: 1600 / 600;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: calc(0% - var(--halloween-pumpkin-nudge-x)) calc(100% + var(--halloween-pumpkin-nudge-y));
    pointer-events: none;
}

body.halloween-theme::after {
    position: fixed;
    /* Below the nav (z-60). The drawer lives inside that bar, so a higher
       value paints the pumpkin over Log Out and no inner z-index can undo it. */
    z-index: 55;
}

body.halloween-theme #drawer-navigation::after {
    /* Same scheme as the body copy. The drawer’s transform is the
       containing block, so this stays in the drawer and slides with it,
       instead of scrolling away inside it. */
    position: fixed;
    z-index: 0;
}

/* Get Coins replaces the pumpkin and the screen graveyard with the corner pair. */
body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::after,
body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden) #drawer-navigation::after,
body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::before {
    content: none;
}

body.halloween-theme #drawer-navigation .drawer-navigation-wrapper {
    z-index: 1;
}

/* Let the drawer's own (same-colour) background show the art through. */
body.halloween-theme #drawer-navigation .drawer-navigation-wrapper > .bg-surface-elevated {
    background-color: transparent;
    filter: none;
}

/* Log Out stays in its original spot, above the pumpkin. A 30% fill
   lets the picture show through while the label stays readable. */
body.halloween-theme #drawer-navigation .drawer-navigation-wrapper > .justify-between > .mt-10.mb-10 {
    position: relative;
    z-index: 2;
}

body.halloween-theme #drawer-navigation .drawer-navigation-wrapper > .justify-between > .mt-10.mb-10 > div > div {
    background-color: rgb(39 9 35 / 30%);
}

/* Hanging spider, decoration in the drawer. Tracks the Promotions row so
   the web meets the bottom of that item, then sits a little to the right.
   Smaller than the source art so it doesn't crowd the menu. */
body.halloween-theme #drawer-navigation li:has(a[href*="promotion"]) {
    position: relative;
    z-index: 1;
}

body.halloween-theme #drawer-navigation li:has(a[href*="promotion"])::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: -0.2rem;
    bottom: 0;
    width: 3.45rem;
    aspect-ratio: 500 / 1000;
    background: url("https://assets.moozi.com/theme-halloween/Hanging-Glow-Eyed-Spider.png") center top / contain no-repeat;
    filter: drop-shadow(0 6px 8px #4a1f4f);
    transform: translate(16%, 54%);
    pointer-events: none;
}

/* Hanging spider on the header, right side. The thread starts at the
   bottom edge of `.nav-container` and the body hangs below it. A small
   purple shadow only — the large circular glow was too big. */
body.halloween-theme .nav-container.bg-surface-app {
    overflow: visible;
}

body.halloween-theme .nav-container.bg-surface-app::before {
    content: "";
    position: absolute;
    z-index: 7;
    top: 100%;
    right: 0.65rem;
    width: clamp(3.25rem, 5.8vw, 4.5rem);
    aspect-ratio: 887 / 1774;
    background: url("https://assets.moozi.com/theme-halloween/Hanging-Glow-Eyed-Spider.png") center top / contain no-repeat;
    filter: drop-shadow(0 4px 8px #4a1f4f);
    pointer-events: none;
}

@media (max-width: 1023px) {
    body.halloween-theme .nav-container.bg-surface-app::before {
        content: none;
    }
}

/* --- Haunted graveyard, pinned to the bottom-right corner ---
   The PNG's scene sits in its own bottom-right, so the box is anchored there
   and the image is nudged slightly further right and down. Width follows the
   viewport. Below lg it clears the bottom tab bar (h-16); hidden in a game. */
body.halloween-theme {
    --halloween-graveyard-w: clamp(12rem, 46vw, 22rem);
    --halloween-graveyard-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    --halloween-graveyard-nudge-x: clamp(0.5rem, 1.5vw, 1.5rem);
    --halloween-graveyard-nudge-y: clamp(0.4rem, 1.2vw, 1.25rem);
}

@media (min-width: 1024px) {
    body.halloween-theme {
        --halloween-graveyard-w: clamp(24rem, 30vw, 40rem);
        --halloween-graveyard-bottom: 0px;
    }
}

body.halloween-theme::before {
    content: "";
    position: fixed;
    z-index: 65;
    right: 0;
    bottom: var(--halloween-graveyard-bottom);
    width: var(--halloween-graveyard-w);
    aspect-ratio: 1536 / 1024;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: calc(100% + var(--halloween-graveyard-nudge-x)) calc(100% + var(--halloween-graveyard-nudge-y));
    pointer-events: none;
}

/* Pumpkin and graveyard URLs are injected by halloween-decor.js after the
   splash batwing logo finishes. Keeping them out of this file stops the
   browser from downloading them while it parses the stylesheet. */
@keyframes halloween-decor-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body.halloween-theme:has(#slot-iframe)::after,
body.halloween-theme:has(#slot-iframe) #drawer-navigation::after,
body.halloween-theme:has(#slot-iframe)::before {
    display: none;
}

@media (max-width: 1023px) {
    body.halloween-theme::before,
    body.halloween-theme::after,
    body.halloween-theme #drawer-navigation::after {
        content: none;
    }
}

/* --- FEATURE CARD OVERRIDES --- */
body.halloween-theme .feature-card {
    background: rgb(26 17 40 / 65%);
}

body.halloween-theme .feature-card-title {
    color: #ce8ef5;
}

body.halloween-theme .feature-card-icon[src*="chat_cow"] {
    content: "";
    overflow: hidden;
    color: transparent;
    font-size: 0;
    object-fit: none !important;
    object-position: -9999px center !important;
    background-image: url("https://assets.moozi.com/theme-halloween/chat-vampire-cow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Alternating section stripes --- */
body.halloween-theme .landing-promo-section--strip-a {
    background-color: #0d0a1a;
}

body.halloween-theme .landing-promo-section--strip-b {
    background-color: #1a1128;
}

/* --- Category tags --- */
body.halloween-theme .category-tag:hover,
body.halloween-theme .category-tag.active {
    color: #1a0a00;
    background: #ff7518;
    border-color: #ff7518;
    box-shadow: 0 2px 12px rgb(255 117 24 / 32%);
}

/* --- Promo card --- */
body.halloween-theme .promo-card {
    background: rgb(26 17 40 / 65%);
}

body.halloween-theme .promo-card-badge {
    background: #ff7518;
    color: #1a0a00;
}

body.halloween-theme .promo-card-sub, 
body.halloween-theme .promo-card-title-highlight,
body.halloween-theme .text-currency-gc {
    color: #b77edb;
}

body.halloween-theme .group:hover .group-hover\:text-currency-gc {
    color: #ad3ffa;
}

body.halloween-theme .promo-card-body {
    background: linear-gradient(180deg, transparent, rgb(13 10 26 / 30%));
}

/* --- Section title --- */
body.halloween-theme .section-title {
    color: #d596fb;
}

/* --- Live badge: toxic green --- */
body.halloween-theme .live-badge {
    background: #39ff14;
    color: #0a1f00;
}

body.halloween-theme .live-card:hover {
    border-color: rgb(255 117 24 / 22%);
}

/* --- Platform badges --- */
body.halloween-theme .platform-badge {
    background: rgb(26 17 40 / 40%);
}

body.halloween-theme .platform-badge svg {
    stroke: #ce8ef5;
}

/* --- Hero sparkle animations: orange --- */
body.halloween-theme .hero-image-wrap::before,
body.halloween-theme .hero-image-wrap::after {
    background: #f9a5ff;
    box-shadow: 0 0 8px #f473ff;
}

body.halloween-theme .hero-image {
    content: "";
    overflow: hidden;
    color: transparent;
    font-size: 0;
    object-fit: none !important;
    object-position: -9999px center !important;
    aspect-ratio: 1 / 1;
    background-image: url("https://assets.moozi.com/theme-halloween/moozi-vampire-hero-image.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Hero eyebrow --- */
body.halloween-theme .hero-eyebrow {
    color: #ce8ef5;
}

/* --- Focus ring --- */
body.halloween-theme .focus-ring-modern:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 117 24 / 40%), 0 0 0 4px rgb(255 117 24 / 10%);
}

/* --- Gradient gold border -> orange gradient --- */
body.halloween-theme .border-gradient-gold::before {
    background: linear-gradient(135deg, rgb(255 117 24 / 30%), rgb(57 255 20 / 10%), rgb(255 117 24 / 30%));
}

/* --- Scrollbar ---
   The window scrollbar is painted on <html>, which is not inside <body>,
   so `body.halloween-theme html::…` never matches. :has() reaches it. */
html:has(body.halloween-theme) {
    scrollbar-color: #8a54c9 #0d0a1a;
}

html:has(body.halloween-theme)::-webkit-scrollbar-track,
body.halloween-theme::-webkit-scrollbar-track,
body.halloween-theme *::-webkit-scrollbar-track {
    background: #0d0a1a;
}

html:has(body.halloween-theme)::-webkit-scrollbar-thumb,
body.halloween-theme::-webkit-scrollbar-thumb,
body.halloween-theme *::-webkit-scrollbar-thumb {
    background: #8a54c9;
}

html:has(body.halloween-theme)::-webkit-scrollbar-thumb:hover,
body.halloween-theme::-webkit-scrollbar-thumb:hover,
body.halloween-theme *::-webkit-scrollbar-thumb:hover {
    background: #a06ad4;
}

body.halloween-theme .custom-scrollbar,
body.halloween-theme .shop-modal-scroll,
body.halloween-theme .drawer-navigation-wrapper {
    scrollbar-color: #8a54c9 #0d0a1a;
}

body.halloween-theme .fixed.inset-x-0.bottom-0.z-80.lg\:hidden.flex.flex-col.bg-surface-app.rounded-t-2xl.overflow-hidden {
    background: linear-gradient(180deg, #5c2468 0.06%, #43184c 47.5%, #2a102c 99.95%);
}

body.halloween-theme .absolute.bottom-0.left-0.right-0.bg-surface-app.border-t.border-border-strong.px-5.pt-4.\!pb-4.pb-safe {
    background-color: #2f1133;
}

/* --- FAQ accordion --- */
body.halloween-theme .faq-item {
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .mx-auto.px-4.sm\:px-6.lg\:px-8.py-6.sm\:py-8.lg\:py-10,
body.halloween-theme .mx-auto.px-4.sm\:px-6.lg\:px-8.py-6.sm\:py-8.lg\:py-10 * {
    color: #fff;
}

body.halloween-theme .faq-item[open] {
    border-color: rgb(213 150 251 / 22%);
}

body.halloween-theme .faq-item summary::after {
    color: #d596fb;
}

/* --- Final CTA section --- */
body.halloween-theme .final-cta::before {
    background:
        radial-gradient(ellipse 75% 60% at 50% 110%, rgb(255 117 24 / 0.1), transparent 58%),
        radial-gradient(ellipse 50% 45% at 15% 20%, rgb(107 63 160 / 0.08), transparent 55%),
        radial-gradient(ellipse 45% 40% at 88% 30%, rgb(57 255 20 / 0.05), transparent 50%),
        linear-gradient(125deg, rgb(255 117 24 / 0.06), transparent 42%, rgb(107 63 160 / 0.05));
}

body.halloween-theme .final-cta-content {
    background: rgb(26 17 40 / 50%);
}

/* --- Demo game cards --- */
body.halloween-theme .demo-game-card {
    background: rgb(26 17 40 / 65%);
}

body.halloween-theme .demo-game-card:hover {
    border-color: rgb(255 117 24 / 22%);
}

body.halloween-theme .demo-game-badge {
    background: #ad3ffa;
    color: #ffffff;
}

body.halloween-theme .demo-game-cta {
    background: #d596fb;
    color: #1a0a00;
}

body.halloween-theme .demo-game-card:hover .demo-game-cta {
    background: #a328f6;
    box-shadow: 0 2px 12px rgb(163 40 246 / 32%);
    color: #ffffff;
}

/* --- Demo pagination buttons --- */
body.halloween-theme .demo-games-pagination__btn {
    border-color: rgb(213 150 251 / 35%);
    background: rgb(26 17 40 / 55%);
    color: #d596fb;
}

body.halloween-theme .demo-games-pagination__btn:hover:not(:disabled) {
    background: rgb(38 25 58 / 75%);
    border-color: rgb(173 63 250 / 55%);
    color: #ad3ffa;
}

body.halloween-theme .drawer-navigation-wrapper {
    color: #ffffff;
}

body.halloween-theme .demo-games-pagination__btn:focus-visible {
    outline-color: #ad3ffa;
}

body.halloween-theme .demo-games-fetch-overlay {
    background: #5c2468;
}

/* --- Demo skeleton shimmer (purple) --- */
body.halloween-theme .demo-games-fetch-skel-thumb,
body.halloween-theme .demo-games-fetch-skel-line,
body.halloween-theme .demo-game-card--skeleton .demo-game-img-wrap {
    background: linear-gradient(90deg,
            rgb(26 17 40 / 45%) 0%,
            rgb(58 40 80 / 65%) 50%,
            rgb(26 17 40 / 45%) 100%);
    background-size: 200% 100%;
}

/* Demo age gate panel. Replaces the cream #fffef9 fill in components.css. */
body.halloween-theme .demo-age-gate__panel {
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .demo-age-gate__title {
    color: #ce8ef5;
}

body.halloween-theme .demo-age-gate__text {
    color: #ffffff;
}

body.halloween-theme .demo-age-gate__btn--secondary {
border: 1px solid #a328f6;
background: #d596fb;
color: #1a0a00;
}
    
body.halloween-theme .demo-age-gate__btn--secondary:hover {
border: 1px solid #a328f6;
background: #a328f6;
color: #fff;
}

body.halloween-theme .demo-age-gate__btn--primary {
border: 1px solid #a328f6;
background: #d596fb;
color: #1a0a00;
}

body.halloween-theme .demo-age-gate__btn--primary:hover {
border: 1px solid #a328f6;
background: #a328f6;
color: #fff;
}

body.halloween-theme .demo-game-detail__play {
    background: linear-gradient(180deg, #e479fc 0%, #751ab0 45%, #e479fc 100%);
    font-size: 20px;
}

body.halloween-theme .demo-game-detail__body {
    background: linear-gradient(180deg, #5c2468 0.06%, #43184c 47.5%, #2a102c 99.95%);
}

/* --- Responsible gaming border --- */
body.halloween-theme .responsible-gaming {
    border-top-color: rgba(255, 117, 24, 0.15);
}

body.halloween-theme .responsible-gaming::before {
    background: linear-gradient(90deg, transparent, rgb(255 117 24 / 35%), transparent);
}

body.halloween-theme .responsible-text a {
    color: #ce8ef5;
}

/* --- FOOTER OVERRIDES --- */
body.halloween-theme .landing-promo-footer,
body.halloween-theme footer.landing-promo-footer {
    --footer-bg: #070510;
    --footer-social-bg: #1f1433;
    --footer-accent-link: #ff7518;
}

body.halloween-theme .footer-social a:hover {
    background: #33204a;
}

body.halloween-theme .footer-link:hover {
    color: #a328f6;
}

/* ============================================
   GLOBAL APP OVERRIDES (lobby, play, shop, account...)
   Everything outside `/` is styled by Tailwind utilities that read the
   design tokens in src/styles/tokens-v2.css, plus a few legacy hex classes
   and custom classes in src/assets/css/style.css. Re-pointing the tokens
   recolours most of the app; the blocks after it catch the hard-coded rest.
   Token values are space-separated RGB channels (Tailwind <alpha-value>).
   ============================================ */

body.halloween-theme {
    --surface-app: 237 134 247;     /* #1d0612 */
    background-color: #1d0612;
    --surface-elevated: 45 10 38;   /* #2d0a26 */
    --surface-sunken: 7 5 16;       /* #070510 */
    /* tokens-v2 composes these on :root from --surface-sunken. */
    --elev-1: 0 1px 2px rgb(var(--surface-sunken) / 0.28),
        0 2px 6px rgb(var(--surface-sunken) / 0.18);
    --elev-2: 0 4px 14px rgb(var(--surface-sunken) / 0.4),
        0 2px 4px rgb(var(--surface-sunken) / 0.22);
    --elev-3: 0 16px 44px rgb(var(--surface-sunken) / 0.52),
        0 8px 20px rgb(var(--surface-sunken) / 0.3);

    --text-secondary: 160 140 191;  /* #a08cbf */
    --text-on-accent: 26 10 0;      /* #1a0a00 */

    --accent-primary: 255 117 24;   /* #ff7518 */
    --accent-hover: 255 160 92;     /* #ffa05c */
    --accent-press: 229 90 0;       /* #e55a00 */

    --border-subtle: 58 40 80;      /* #3a2850 */
    --border-strong: 75 26 68;      /* #4b1a44 */
}

@media (max-width: 1023px) {
    body.halloween-theme {
        --surface-app: 237 134 247; /* #1d0612 */
        background-color: #1d0612;
    }
}

body.halloween-theme .bg-surface-app {
    --tw-bg-opacity: 1;
    /* background: #5c2468; */
}

body.halloween-theme .payment-method-tab.text-black {
    color: #6b3fa0;
}

body.halloween-theme .payment-method-tab.text-black svg path {
    fill: #6b3fa0;
}

body.halloween-theme .payment-method-tab.bg-surface-elevated,
body.halloween-theme .payment-method-tab.bg-background-3 {
    background-color: #6b3fa0;
}

body.halloween-theme .moozi-min-h.w-full.h-full.relative.flex.justify-center.bg-surface-app {
    background-color: #1d0612;
}

body.halloween-theme #cow-login,
body.halloween-theme #cow-register {
    content: url("https://assets.moozi.com/theme-halloween/hero-animated-cow-vampire.png");
}

body.halloween-theme .welcome-bg-container.bg-surface-app {
    background-color: #1d0612;
}

body.halloween-theme .cursor-pointer.w-max.flex.flex-row.items-center.justify-center.gap-2.font-roboto.font-bold.text-surface-elevated.text-sm.lg\:text-base.capitalize {
    color: #ffffff;
}

body.halloween-theme .cursor-pointer.w-max.flex.flex-row.items-center.justify-center.gap-2.font-roboto.font-bold.text-surface-elevated.text-sm.lg\:text-base.capitalize svg path {
    fill: #ffffff;
}

body.halloween-theme .demo-register-nudge strong {
    color: #ce8ef5;
}

body.halloween-theme .bg-surface-app.rounded-ds-md.p-ds-3.md\:p-ds-4.text-center.min-w-0 {
    background-color: #6b3fa0;
}

body.halloween-theme .bg-primal-green {
    background-color: #4cb450;
}

body.halloween-theme .bg-primal-yellow {
    background-color: #ffb800;
}

body.halloween-theme .flex.h-12.w-12.shrink-0.items-center.justify-center.rounded-2xl.bg-primal-yellow\/15.text-primal-yellow {
    color: #6b3fa0;
    background-color: #6b3fa052;
}

/* --- Legacy gold CTA gradient (`bg-gradient-to-b from-yellow-10 to-yellow-20`) ---
   `.to-yellow-20` must stay after `.from-yellow-10`: both set --tw-gradient-to. */
body.halloween-theme .from-yellow-10 {
    --tw-gradient-from: #c357f8 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 160 92 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

body.halloween-theme .to-yellow-20 {
    --tw-gradient-to: #c357f8 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* "Get Coins" (afterlogin header link + sidebar link to SHOP_PATH) */
body.halloween-theme a[href="/gold-coin-shop"].from-yellow-10,
body.halloween-theme a[href="/gold-coin-shop"] > .from-yellow-10 {
    --tw-gradient-from: #db9bfa var(--tw-gradient-from-position);
    --tw-gradient-to: #aa35f8 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* "Online Chat" sidebar button (guest + afterlogin) */
body.halloween-theme #chat-button-mobile.from-yellow-10 {
    --tw-gradient-from: #d9aafc var(--tw-gradient-from-position);
    --tw-gradient-to: #ba53f8 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

body.halloween-theme #chat-button-mobile img {
    content: "";
    overflow: hidden;
    color: transparent;
    font-size: 0;
    object-fit: none !important;
    object-position: -9999px center !important;
    width: 3rem;
    height: calc(3rem * 40 / 47);
    aspect-ratio: 47 / 40;
    flex: 0 0 auto;
    background-image: url("https://assets.moozi.com/theme-halloween/chat-vampire-cow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body.halloween-theme .bg-yellow-10 {
    background-color: #ffa05c;
}

body.halloween-theme .text-yellow-10 {
    color: #ffa05c;
}

/* --- Legacy dark-red borders / accents (`background-2`, `background-3`) --- */
body.halloween-theme .border-background-2 {
    border-color: #3a2850;
}

body.halloween-theme .border-background-3 {
    border-color: #6b3fa0;
}

body.halloween-theme .bg-background-3 {
    background-color: #6b3fa0;
}

body.halloween-theme .hover\:bg-background-3:hover {
    background-color: #6b3fa0;
    color: #ffffff;
}

@media (max-width: 1023px) {
    body.halloween-theme .relative.flex.h-7.w-7.shrink-0.items-center.justify-center.rounded-full.bg-gradient-to-b.from-secondary-2.via-moozi-3.to-moozi-8 {
        background-color: #c469f1;
        background-image: none;
    }
}

body.halloween-theme .text-background-3 {
    color: #a07bd6;
}

/* Gold coin shop segment tabs (Packages / Custom Buy / Redeem Code): active tab */
body.halloween-theme .rounded-full.p-1.border-border-strong.gap-1 > button.bg-accent {
    background-image: linear-gradient(to bottom, #e5adfc, #b853fa);
}

/* Tailwind accent tints (shop filter bar, "+X% Extra" badge, game filters, KYC header) */
body.halloween-theme .bg-accent {
    background-color: #b853fa;
    background-image: linear-gradient(to bottom, #e5adfc, #b853fa);
}

body.halloween-theme .bg-secondary-3 {
    --tw-gradient-from: #e5adfc var(--tw-gradient-from-position);
    --tw-gradient-to: #b853fa var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

body.halloween-theme .border-accent {
    border-color: #751ab0;
}

body.halloween-theme .border-border-strong {
    border-color: #79426e;
}

body.halloween-theme .hover\:border-accent:hover {
    border-color: #762088;
}

body.halloween-theme .flex-1.min-h-0.overflow-y-auto.overscroll-contain.custom-scrollbar.shop-modal-scroll .hover\:border-accent:hover {
    border-color: #762088;
}

body.halloween-theme .flex-1.min-h-0.overflow-y-auto.overscroll-contain.custom-scrollbar.shop-modal-scroll {
    background: transparent;
}

body.halloween-theme .tooltip-content.bg-surface-app.border.border-border-strong.rounded-lg.p-3.shadow-xl {
    background-color: #3d1b34;
    border-color: #9a4ead;
}

body.halloween-theme .mx-auto.text-center.mt-8.max-w-\[300px\].bg-surface-app.rounded-xl.py-4.w-auto {
    background-color: #3d1b34;
}

body.halloween-theme .flex.flex-col.divide-y.divide-shade-12.items-center.justify-center.py-6.font-roboto.text-shade-2.text-sm.xs\:text-base.px-4.sm\:px-6.lg\:px-8.tracking-wide.leading-tight {
    color: #ffffff;
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .flex.flex-col.items-center.justify-center.py-6.font-roboto.text-shade-2.text-sm.xs\:text-base.px-4.sm\:px-6.lg\:px-8.tracking-wide.leading-tight:not(.divide-y) {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    background: #2a102c;
}

body.halloween-theme .benefits-card.bg-gradient-benefits.rounded-lg.w-full.h-full.shadow-md.relative.mx-1.flex.flex-col {
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .bg-gradient-benefits,
body.halloween-theme .bg-gradient-card-no-animation {
    border-radius: .75rem;
    background: #5c2468;
}

body.halloween-theme .bg-gradient-promo-detail {
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .daily-bonus {
    background: linear-gradient(180deg, #5c2468 0.06%, #43184c 47.5%, #2a102c 99.95%);
}

@media (max-width: 1023px) {
    body.halloween-theme .daily-bonus-modal-bg {
        background: linear-gradient(180deg, #2a102c 0.06%, #44194d 47.5%, #5b2467 99.95%);
        border: 1px solid hsla(0, 0%, 100%, 0.06);
    }
}

@media (min-width: 1024px) {
    body.halloween-theme .daily-bonus-modal-bg {
        background: transparent;
        border: none;
    }
}

body.halloween-theme .promotion-card-content {
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .promotion-card:hover {
    background-color: #380f3a;
    border-color: #d596fb;
}
body.halloween-theme .promotion-card:hover {
    box-shadow: 0 20px 40px #5b236763,0 0 0 1px #ffffff1a
}

body.halloween-theme .promotion-card:hover .promotion-card-content {
    background: #380f3a;
}

body.halloween-theme .promotion-card-image .promotion-card-img {
    content: "";
    overflow: hidden;
    object-fit: none !important;
    object-position: -9999px center !important;
    background-image: url("https://assets.moozi.com/assets/img/loader/games-loader.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: hue-rotate(300deg);
}

body.halloween-theme .promotion-card:hover .promotion-card-img {
    filter: hue-rotate(300deg) drop-shadow(0 8px 16px rgb(173 63 250 / 40%));
}

body.halloween-theme .bg-gradient-to-b.from-surface-elevated\/90.to-surface-app\/80 {
    background: linear-gradient(
        180deg,
        #5c2468 0.06%,
        #43184c 47.5%,
        #2a102c 99.95%
    );
}

body.halloween-theme .hover\:border-accent\/60.hover\:bg-accent\/50:hover {
    background-color: #a328f6;
    border-color: #a328f6;
}

body.halloween-theme .hover\:bg-background-2.hover\:text-white.w-full.text-left.px-4.py-2\.5.type-body-sm:hover {
    background-color: #6b3fa0;
}

body.halloween-theme .kyc-hero.relative.overflow-hidden.px-5.sm\:px-6.pt-4.pb-6.font-roboto {
    background: radial-gradient(110% 70% at 50% 0%, #380f3a 0%, #1c0411 70%);
}

body.halloween-theme .text-accent {
    color: #d596fb;
}

body.halloween-theme .text-accent-press {
    color: #6b3fa0;
}

body.halloween-theme .text-surface-app {
    color: #6b3fa0;
}

body.halloween-theme .hover\:text-accent-press:hover {
    color: #d596fb;
}

body.halloween-theme .swiper-pagination-bullet {
    background: #491b3d;
    border-color: #491b3d;
    opacity: 1;
}

body.halloween-theme .swiper-pagination-bullet-active {
    background: #b853fa;
    border-color: #b853fa;
    opacity: 1;
}

body.halloween-theme #promotion-moozi-loyalty-program .loyalty-program-tab.active {
    color: #d596fb;
    border-color: #d596fb;
}

body.halloween-theme .bg-accent\/10 {
    background-color: rgb(212 149 250 / 26%);
}

body.halloween-theme .border-accent\/40 {
    border-color: rgb(213 150 251 / 36%);
}

body.halloween-theme .bg-accent\/15 {
    background-color: rgb(110 37 133 / 15%);
}

body.halloween-theme .border-accent\/30 {
    border-color: #793886;
}

/* "+X% Extra" badge on package cards (shop grid + /package/:slug) */
body.halloween-theme .bg-accent\/15.text-accent.border-accent\/30 {
    color: #bf5afd;
}

/* Gold coin shop filter bar: dismissible active "Category:" chip */
body.halloween-theme .rounded-full.py-1.bg-accent.border-accent.gap-1\.5 {
    background-color: #bf5afd;
}

body.halloween-theme .sort-menu.absolute.left-0.top-full.z-50.mt-2.min-w-\[14rem\].p-1.bg-surface-elevated.border.border-border-strong.rounded-xl.shadow-elev-3.focus\:outline-none svg {
    color: #cd83fa;
}

/* Tailwind `border-white/10` (pagination, promo cards, shop packages, notifications, KYC) */
body.halloween-theme .border-white\/10 {
    border-color: #753876;
}

/* --- Custom classes from src/assets/css/style.css + app.css --- */
body.halloween-theme .card-modern {
    background: rgb(46 31 66 / 85%);
}

body.halloween-theme .input-modern:focus {
    border-color: #6b3fa0;
}

/* Active sidebar link. style.css tints the whole link with `filter`, which
   would also tint this background, so it is dropped and each part coloured
   directly. Inline SVG icons use currentColor; <img> icons (white SVG files)
   can only be recoloured with a filter, tuned here to land on #df8aff. */
body.halloween-theme .active-left-navigation {
    filter: none;
    background: #3b113d;
    color: #df8aff;
}

body.halloween-theme .active-left-navigation:before {
    background: #df8aff;
}

body.halloween-theme .active-left-navigation svg {
    color: #df8aff;
}

body.halloween-theme .active-left-navigation img {
    filter: brightness(0) saturate(100%) invert(65%) sepia(84%) saturate(2040%) hue-rotate(222deg) brightness(101%) contrast(103%);
}

/* Sidebar link label. The shared hover rule filters the whole anchor, which
   would recolor this text, so the filter is dropped and only the font changes. */
body.halloween-theme .left-navigation-container li:hover > a.flex.items-center.py-2.rounded-lg.group {
    filter: none;
    color: #a328f6;
}

body.halloween-theme .left-navigation-container li:hover > a.flex.items-center.py-2.rounded-lg.group span.ms-3.font-bold.text-sm.sm\:text-base {
    color: #a328f6;
}

body.halloween-theme .left-navigation-container li:hover > a.flex.items-center.py-2.rounded-lg.group svg {
    color: #a328f6;
}

body.halloween-theme .left-navigation-container li:hover > a.flex.items-center.py-2.rounded-lg.group img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(40%) saturate(6900%) hue-rotate(272deg) brightness(100%) contrast(105%);
}

/* Loyalty card shown to visitors without a tier (sidebar) */
body.halloween-theme .tier.not-tier {
    background: #251836;
}

body.halloween-theme .tier.not-tier:before {
    background: #5b4677;
}

/* Bat wings flank the shop title only. The close button is also
   `.flex.items-center`, so the title group is matched by `.gap-2`. */
body.halloween-theme .shrink-0.flex.items-center.h-14.border-b.bg-surface-app > .flex.items-center.gap-2::before,
body.halloween-theme .shrink-0.flex.items-center.h-14.border-b.bg-surface-app > .flex.items-center.gap-2::after {
    content: "";
    flex: 0 0 auto;
    height: 2rem;
    aspect-ratio: 1536 / 1024;
    background: url("https://assets.moozi.com/theme-halloween/Bat-Wing%20-Emblem.png") center / contain no-repeat;
    pointer-events: none;
}

body.halloween-theme .shrink-0.flex.items-center.h-14.border-b.bg-surface-app > .flex.items-center.gap-2::before {
    transform: scaleX(-1);
}

@media (max-width: 1023px) {
    body.halloween-theme .shrink-0.flex.items-center.h-14.border-b.bg-surface-app > .flex.items-center.gap-2::before,
    body.halloween-theme .shrink-0.flex.items-center.h-14.border-b.bg-surface-app > .flex.items-center.gap-2::after {
        content: none;
    }
}

/* Castle and graveyard sit on the #1d0612 panel, behind the header and the list. */
body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden {
    position: relative;
    isolation: isolate;
    background-color: #1d0612;
}

body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.1rem;
    right: 0;
    width: min(100%, 24rem);
    aspect-ratio: 1;
    background: url("https://assets.moozi.com/theme-halloween/Haunted-Castle-Scene.png") center / contain no-repeat;
    pointer-events: none;
}

body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3.5rem;
    left: 0;
    width: min(100%, 28rem);
    aspect-ratio: 1536 / 1024;
    background: url("https://assets.moozi.com/theme-halloween/Haunted-Graveyard-Corner.png") left top / contain no-repeat;
    pointer-events: none;
}

@media (max-width: 1023px) {
    body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden::before {
        top: 0;
        right: 0;
        left: auto;
        width: clamp(8rem, 52vw, 14rem);
        aspect-ratio: 1;
        background: url("https://assets.moozi.com/theme-halloween/corner-top-right.png") right top / contain no-repeat;
    }

    body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden::after {
        top: 0;
        left: 0;
        width: clamp(8rem, 52vw, 14rem);
        aspect-ratio: 338 / 567;
        background: url("https://assets.moozi.com/theme-halloween/corner-top-left.png") left top / contain no-repeat;
    }

    /* Above the panel fill, under the header and the list. */
    body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden::before,
    body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden::after {
        z-index: 1;
    }

    body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden > .shrink-0.flex.items-center.h-14 {
        z-index: 2;
    }

    body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden > .shop-modal-scroll {
        position: relative;
        z-index: 2;
    }

    /* Shop route has no modal panel. Same top corners, at the screen edges. */
    body.halloween-theme:not(:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)) .w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5 {
        position: relative;
        isolation: isolate;
    }

    body.halloween-theme:not(:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)) .w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5::before,
    body.halloween-theme:not(:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)) .w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5::after {
        content: "";
        position: fixed;
        z-index: 59;
        top: var(--nav-header-height, 64px);
        width: clamp(8rem, 52vw, 14rem);
        pointer-events: none;
    }

    body.halloween-theme:not(:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)) .w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5::before {
        right: 0;
        left: auto;
        aspect-ratio: 1;
        background: url("https://assets.moozi.com/theme-halloween/corner-top-right.png") right top / contain no-repeat;
    }

    body.halloween-theme:not(:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)) .w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5::after {
        left: 0;
        right: auto;
        aspect-ratio: 338 / 567;
        background: url("https://assets.moozi.com/theme-halloween/corner-top-left.png") left top / contain no-repeat;
    }
}

body.halloween-theme .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden > .shrink-0.flex.items-center.h-14 {
    position: relative;
    background-color: transparent;
}

/* Graveyard corners at the bottom of the screen while Get Coins is open. */
body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden) {
    position: relative;
}

body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::before,
body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::after {
    content: "";
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: clamp(16rem, 48vw, 34rem);
    aspect-ratio: 1536 / 1024;
    pointer-events: none;
}

body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::before {
    left: 0;
    background: url("https://assets.moozi.com/theme-halloween/Graveyard-Corner-left.png") left bottom / contain no-repeat;
}

body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::after {
    right: 0;
    background: url("https://assets.moozi.com/theme-halloween/Graveyard-Corner-right.png") right bottom / contain no-repeat;
}

@media (max-width: 1023px) {
    /* The shell copies sit under the opaque shop panel. Pin the same
       bottom corners to the viewport instead, over the shop. */
    body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::before,
    body.halloween-theme .w-full.transform-gpu.will-change-transform:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::after {
        content: none;
    }

    body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::before,
    body.halloween-theme:has(.w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5)::before,
    body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::after,
    body.halloween-theme:has(.w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5)::after {
        content: "";
        position: fixed;
        z-index: 66;
        bottom: 0;
        width: clamp(8rem, 52vw, 14rem);
        pointer-events: none;
    }

    body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::before,
    body.halloween-theme:has(.w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5)::before {
        left: auto;
        right: 0;
        aspect-ratio: 539 / 920;
        background: url("https://assets.moozi.com/theme-halloween/corner-bottom-right.png") right bottom / contain no-repeat;
    }

    body.halloween-theme:has(.w-full.transform-gpu.will-change-transform .w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden)::after,
    body.halloween-theme:has(.w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5)::after {
        left: 0;
        right: auto;
        aspect-ratio: 559 / 740;
        background: url("https://assets.moozi.com/theme-halloween/corner-bottom-left.png") left bottom / contain no-repeat;
    }
}

/* Bat emblems sit inside the package purchase button, pulled out to each edge. */
body.halloween-theme .overflow-hidden.rounded-ds-md.shadow-elev-3 button.btn-modern > span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

body.halloween-theme .overflow-hidden.rounded-ds-md.shadow-elev-3 button.btn-modern > span::before,
body.halloween-theme .overflow-hidden.rounded-ds-md.shadow-elev-3 button.btn-modern > span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    background: url("https://assets.moozi.com/theme-halloween/Bat-Emblem.png") center / contain no-repeat;
    pointer-events: none;
}

body.halloween-theme .overflow-hidden.rounded-ds-md.shadow-elev-3 button.btn-modern > span::before {
    left: 1rem;
    transform: translateY(-50%);
}

body.halloween-theme .overflow-hidden.rounded-ds-md.shadow-elev-3 button.btn-modern > span::after {
    right: 1rem;
    transform: translateY(-50%) scaleX(-1);
}

/* Spiderweb frame in the top-right corner of the package card. The art
   already sits in the PNG's top-right, so the box is anchored there. */
body.halloween-theme .relative.overflow-hidden.rounded-ds-md.shadow-elev-3.h-full::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: clamp(4.75rem, 46%, 7.5rem);
    aspect-ratio: 1;
    background: url("https://assets.moozi.com/theme-halloween/Spiderweb-Corner-Frame.png") top right / contain no-repeat;
    transform: translate(6%, -9%);
    pointer-events: none;
}

/* Must stay before `.gameTabHover.active` so a hovered active tab keeps its active fill */
body.halloween-theme .gameTabHover:hover {
    background-color: #b853fa;
    box-shadow: 0 2px 12px #f58fff7a;
}

body.halloween-theme .gameTabHover.active {
    background-color: #b853fa;
    box-shadow: 0 2px 12px #f58fff7a;
}

/* Category icons are API-supplied SVG/IMG markup (fills, strokes or raster),
   so `brightness(0)` is the one rule that turns all of them solid black. */
body.halloween-theme .gameTabHover .game-category-icon {
    transition: filter 250ms ease-in;
}

body.halloween-theme .gameTabHover:hover .game-category-icon,
body.halloween-theme .gameTabHover.active .game-category-icon {
    filter: brightness(0);
}

body.halloween-theme .lobby-category-clickable:hover svg path {
    fill: #ff7518 !important;
}

body.halloween-theme .lobby-category-clickable:hover span[class*="icon"]:before {
    color: #ff7518 !important;
}

body.halloween-theme .flex.flex-row.items-center.gap-2.text-white.lobby-category-clickable.hover\:text-accent.cursor-pointer.duration-300.ease-in-out:hover {
    color: #a328f6;
}

body.halloween-theme .flex.flex-row.items-center.gap-2.text-white.lobby-category-clickable.hover\:text-accent.cursor-pointer.duration-300.ease-in-out:hover svg path {
    fill: #a328f6 !important;
}

body.halloween-theme .flex.flex-row.items-center.gap-2.text-white.lobby-category-clickable.hover\:text-accent.cursor-pointer.duration-300.ease-in-out:hover span[class*="icon"]:before {
    color: #a328f6 !important;
}

body.halloween-theme .carousel__pagination-button.carousel__pagination-button--active:after {
    background-color: #ff7518 !important;
}

body.halloween-theme .promotion-tab-active:after {
    background: linear-gradient(90deg, transparent, #ff7518, transparent);
}

body.halloween-theme .loader-spinner:before {
    border-top-color: #ff7518;
}

body.halloween-theme .bg-pending-card {
    background: #3a2850;
}

body.halloween-theme .checkout-premium {
    background:
        radial-gradient(1100px 520px at 18% -12%, rgb(255 117 24 / 12%), transparent 60%),
        radial-gradient(900px 520px at 95% 0%, rgb(74 31 122 / 55%), transparent 55%),
        linear-gradient(180deg, #070510 0%, #0d0a1a 45%, #070510 100%);
}

body.halloween-theme .slider-wrapper .slider-connect {
    background: #ff7518 !important;
}

body.halloween-theme .slider-wrapper .slider-tooltip {
    background: #ff7518 !important;
    border: 1px solid #ff7518 !important;
    color: #1a0a00 !important;
}

body.halloween-theme .slider-wrapper .slider-horizontal .slider-tooltip-top:before {
    border-top-color: #ff7518 !important;
}

body.halloween-theme .nw-content-title {
    color: #ff7518 !important;
}

body.halloween-theme #nw-desktop-modal-all .nw-modal-box__content {
    background: #1a1128 !important;
}

body.halloween-theme .nw-dropdown-container {
    background: rgb(46 31 66 / 95%) !important;
}

body.halloween-theme .custom-bg-tooltip .vue-tooltip--component {
    background-color: rgb(26 17 40 / 100%) !important;
    border: 1px solid #5b4677 !important;
}

/* ============================================
   HALLOWEEN LOGO SWAP (responsive)
   - Header: paints the batwing as a background so it stays sharp
     (content: url() was rasterized at the small width/height attributes).
     so all existing size classes (w-16, xs:w-18, lg:w-20)
     and inline width/height attributes continue to drive sizing.
   - Footer: replaces the multi-part brand (animal + lines + wordmark)
     with a single centered batwing logo, sized to the same block.
   Remove .halloween-theme to restore every logo instantly.
   ============================================ */

/* --- HEADER LOGOS (guest nav + afterlogin nav share identical markup) --- */
body.halloween-theme .landing-promo-root img[alt="Logo"],
body.halloween-theme nav img[alt="Logo"],
body.halloween-theme [data-preloading-overlay] img[alt="Logo"] {
    content: "";
    overflow: hidden;
    color: transparent;
    font-size: 0;
    /* Chrome ignores content: "" on an img, so the original file still
       paints. Park it outside the box; the background is the batwing. */
    object-fit: none !important;
    object-position: -9999px center !important;
    background-image: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 104.102%;
}

body.halloween-theme [data-preloading-overlay] {
    background-color: #1d0612 !important;
    background-image: none !important;
}

body.halloween-theme [data-preloading-overlay] img[alt="Logo"] {
    width: auto !important;
    height: 64px !important;
    max-width: 80vw;
    aspect-ratio: 1599 / 512;
}

/* App footer animal (desktop). Same slot as footer-animal.avif: w-4/12, 501×774. */
body.halloween-theme .flex.flex-col-reverse.lg\:flex-row.gap-2.lg\:gap-8.items-center.xl\:items-start.font-roboto.tracking-widest.font-bold.text-base.xl\:text-lg img.w-4\/12 {
    content: "";
    overflow: hidden;
    color: transparent;
    font-size: 0;
    object-fit: none !important;
    object-position: -9999px center !important;
    height: auto;
    aspect-ratio: 501 / 774;
    background-image: url("https://assets.moozi.com/theme-halloween/footer-animal-halloween.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* App footer wordmark. As tall as footer-logo.svg (168×82), width follows the batwing. */
body.halloween-theme .flex.lg\:hidden.w-full.items-center.justify-center.mt-4.mb-10.md\:mb-14 > img,
body.halloween-theme .flex.flex-col-reverse.lg\:flex-row.gap-2.lg\:gap-8.items-center.xl\:items-start.font-roboto.tracking-widest.font-bold.text-base.xl\:text-lg img.w-6\/12 {
    content: "";
    overflow: hidden;
    color: transparent;
    font-size: 0;
    object-fit: none !important;
    object-position: -9999px center !important;
    height: auto;
    aspect-ratio: 1599 / 512;
    background-image: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 104.102%;
}

body.halloween-theme .flex.lg\:hidden.w-full.items-center.justify-center.mt-4.mb-10.md\:mb-14 > img {
    width: auto !important;
    height: calc(5rem * 82 / 168) !important;
    max-width: 92vw;
}

@media (min-width: 420px) and (max-width: 767px) {
    body.halloween-theme .flex.lg\:hidden.w-full.items-center.justify-center.mt-4.mb-10.md\:mb-14 > img {
        height: calc(5.5rem * 82 / 168) !important;
    }
}

@media (min-width: 768px) {
    body.halloween-theme .flex.lg\:hidden.w-full.items-center.justify-center.mt-4.mb-10.md\:mb-14 > img {
        width: calc(16.666667% * 82 / 168 * 1599 / 512) !important;
        height: auto !important;
        max-width: 92vw;
    }
}

body.halloween-theme .flex.flex-col-reverse.lg\:flex-row.gap-2.lg\:gap-8.items-center.xl\:items-start.font-roboto.tracking-widest.font-bold.text-base.xl\:text-lg img.w-6\/12 {
    width: calc(50% * 82 / 168 * 1599 / 512) !important;
    max-width: 100%;
}

/* --- FOOTER: Desktop brand block (1024px+) ---
   The original footer-brand lays out:
     [animal 130px wide] + [inner block with lines + logo ~160px wide]
   We hide the animal + decorative lines, swap only the wordmark img,
   then grow/re-center the inner block so the single batwing logo fills
   the whole brand slot at a consistent size. */
@media (min-width: 1024px) {
    body.halloween-theme .landing-promo-footer .footer-brand {
        width: auto;
        min-width: 240px;
        max-width: 320px;
        flex: 0 1 auto;
        align-items: center;
        justify-content: center;
    }

    body.halloween-theme .landing-promo-footer .footer-logo-img {
        display: none;
    }

    body.halloween-theme .landing-promo-footer .footer-logo-line,
    body.halloween-theme .landing-promo-footer .footer-logo-line-2 {
        display: none;
    }

    body.halloween-theme .landing-promo-footer .footer-logo-inner {
        width: clamp(11rem, 22vw, 17rem);
    }

    body.halloween-theme .landing-promo-footer .footer-logo-main {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    body.halloween-theme .landing-promo-footer .footer-logo-main-img {
        content: "";
        overflow: hidden;
        object-fit: none !important;
        object-position: -9999px center !important;
        background-image: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 104.102%;
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        aspect-ratio: 1599 / 512;
    }
}

/* --- FOOTER: Mobile wordmark (below 1024px) ---
   Footer shows a single stacked mobile logo block; swap its wordmark img
   to batwing and let responsive clamp widths drive the size. */
@media (max-width: 1023px) {
    body.halloween-theme .landing-promo-footer .footer-logo-mobile-inner {
        max-width: min(16rem, 85vw);
    }

    body.halloween-theme .landing-promo-footer .footer-logo-mobile-wordmark {
        content: "";
        overflow: hidden;
        object-fit: none !important;
        object-position: -9999px center !important;
        background-image: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 104.102%;
        width: auto !important;
        height: calc(min(5rem, 72vw) * 328 / 511) !important;
        max-width: 92vw;
        aspect-ratio: 1599 / 512;
    }
}

/* --- Responsive header logo fine-tuning (already handled by Tailwind
       classes w-16 / xs:w-18 / lg:w-20, but we ensure the PNG respects
       the explicit sizing and never stretches) --- */
body.halloween-theme nav img[alt="Logo"] {
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1599 / 512;
    transform: none;
}

/* Match the original logo's rendered height. The batwing is wider, so sharing
   the old width class makes it look short. w-16 is 4rem, xs:w-18 is 4.5rem,
   and the old file is 511×328. */
@media (max-width: 419px) {
    body.halloween-theme nav img[alt="Logo"] {
        width: auto !important;
        height: calc(4rem * 328 / 511) !important;
    }
}

@media (min-width: 420px) and (max-width: 1023px) {
    body.halloween-theme nav img[alt="Logo"] {
        width: auto !important;
        height: calc(4.5rem * 328 / 511) !important;
    }
}

@media (min-width: 1024px) {
    body.halloween-theme nav img[alt="Logo"] {
        width: 8.5rem !important;
        height: auto !important;
    }
}

/* A 320px phone is narrower than 375px, but the logo height was a fixed rem.
   Scale it with the viewport so it shrinks between those two widths. */
@media (max-width: 375px) {
    body.halloween-theme nav .header-bg {
        flex-wrap: nowrap;
    }

    body.halloween-theme nav img[alt="Logo"] {
        width: calc(7rem * (100vw / 375px)) !important;
        height: auto !important;
        max-height: 2.5rem;
    }

    body.halloween-theme .flex.lg\:hidden.w-full.items-center.justify-center.mt-4.mb-10.md\:mb-14 > img {
        height: calc(5rem * 82 / 168 * (100vw / 375px)) !important;
    }

    body.halloween-theme .landing-promo-footer .footer-logo-mobile-wordmark {
        height: calc(min(5rem, 72vw) * 328 / 511 * (100vw / 375px)) !important;
    }
}

/* Rounded web on the mobile filter pill. The art is the PNG's top-right,
   so the box is anchored there and nudged until the ink meets the pill edge. */
@media (max-width: 1023px) {
    body.halloween-theme .flex-1.min-w-0.h-10.bg-surface-elevated.border.border-border-strong.rounded-full.flex.items-center.px-3.gap-2.cursor-pointer {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    body.halloween-theme .flex-1.min-w-0.h-10.bg-surface-elevated.border.border-border-strong.rounded-full.flex.items-center.px-3.gap-2.cursor-pointer::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        height: 124%;
        aspect-ratio: 1;
        background: url("https://assets.moozi.com/theme-halloween/rounded-web1.png") right top / contain no-repeat;
        transform: translate(1.4%, -7.7%);
        pointer-events: none;
    }
}

/* Web on the left of the Packages / Custom Buy / Redeem Code bar.
   The art sits on the left of the PNG, so it hangs outside the pill. */
@media (max-width: 1023px) {
    body.halloween-theme .w-full.max-w-2xl.mx-auto:has(> .flex.bg-surface-elevated.rounded-full.p-1.border.border-border-strong.gap-1) {
        position: relative;
        isolation: isolate;
        overflow: visible;
    }

    body.halloween-theme .flex.bg-surface-elevated.rounded-full.p-1.border.border-border-strong.gap-1 {
        position: relative;
        overflow: visible;
    }

    body.halloween-theme .w-full.max-w-2xl.mx-auto:has(> .flex.bg-surface-elevated.rounded-full.p-1.border.border-border-strong.gap-1)::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 69%;
        left: 0;
        height: 4.9rem;
        aspect-ratio: 1;
        background: url("https://assets.moozi.com/theme-halloween/rounded-web2.png") center / contain no-repeat;
        transform: translate(-62%, -49%);
        pointer-events: none;
    }

    body.halloween-theme .w-full.max-w-2xl.mx-auto:has(> .flex.bg-surface-elevated.rounded-full.p-1.border.border-border-strong.gap-1)::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 60%;
        right: 0;
        height: 3.15rem;
        aspect-ratio: 1;
        background: url("https://assets.moozi.com/theme-halloween/rounded-web2.png") center / contain no-repeat;
        transform: translate(60%, -40%) scaleX(-1);
        pointer-events: none;
    }
}

/* Pumpkin garland sitting on top of the bottom tab row. */
@media (max-width: 1023px) {
    body.halloween-theme .bottom-tab-bar.fixed.bottom-0.left-0.right-0.z-50.lg\:hidden.bg-surface-app.backdrop-blur-xl.border-t {
        overflow: visible;
        background-color: #1d0612;
    }

    body.halloween-theme .bottom-tab-bar.fixed.bottom-0.left-0.right-0.z-50.lg\:hidden.bg-surface-app.backdrop-blur-xl.border-t::before {
        content: "";
        position: absolute;
        z-index: 2;
        left: 0%;
        right: auto;
        top: 0;
        width: 100%;
        aspect-ratio: 1600 / 562;
        background: url("https://assets.moozi.com/theme-halloween/bottom-Pumpkin-Spiderweb.png") center bottom / 104% auto no-repeat;
        transform: translateY(-55%);
        pointer-events: none;
    }

    body.halloween-theme:has(.w-full.h-full.flex.flex-col.bg-surface-app.overflow-hidden) .bottom-tab-bar.fixed.bottom-0.left-0.right-0.z-50.lg\:hidden.bg-surface-app.backdrop-blur-xl.border-t::before,
    body.halloween-theme:has(.w-full.h-full.flex.flex-col.justify-center.items-center.pb-20.pt-5) .bottom-tab-bar.fixed.bottom-0.left-0.right-0.z-50.lg\:hidden.bg-surface-app.backdrop-blur-xl.border-t::before {
        content: none;
    }
}