/* ============================================
   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) --- */
    --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);
}

/* --- Override body background --- */
body.halloween-theme.landing-promo-body {
    background-color: #1d0611 !important;
    background-image: none !important;
}

/* --- Hero background image override --- */
body.halloween-theme .bg-image {
    background-image: none !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(107, 63, 160, 0.25), transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255, 117, 24, 0.1), transparent 55%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(57, 255, 20, 0.06), transparent 55%),
        linear-gradient(180deg, #0d0a1a 0%, #1a1128 50%, #0d0a1a 100%);
}

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

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

/* --- 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: #ff7518;
    border-color: #ff7518;
    color: #1a0a00;
}

body.halloween-theme .btn-primary:hover {
    background-color: #e55a00;
    border-color: #e55a00;
    box-shadow: 0 4px 16px rgb(255 117 24 / 32%), 0 8px 32px rgb(255 117 24 / 18%);
}

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

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

body.halloween-theme .btn-secondary:hover {
    background-color: #ff7518;
    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%);
}

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

/* --- 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: rgb(13 10 26 / 95%);
}

/* --- Haunted castle header art (guest + afterlogin `.nav-container`) ---
   The PNG is a transparent 3:1 strip, sized to 63% of the header width and
   centred (height follows the aspect ratio). The inner <nav> and
   `.header-bg` layers carry `bg-surface-app` too and would paint over it. */
body.halloween-theme .nav-container {
    background-color: #16041a;
    background-image: url("https://assets.moozi.com/theme-halloween/Haunted-Castle-header.png");
    background-repeat: no-repeat;
    background-size: 63%;
    background-position: center;
}

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;
}

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

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

/* --- 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%);
}

/* --- How it works step cards --- */
body.halloween-theme .step-card {
    background: rgb(26 17 40 / 65%);
}

body.halloween-theme .step-number {
    background: #ff7518;
    color: #1a0a00;
}

body.halloween-theme .step-title {
    color: #ff7518;
}

body.halloween-theme .step-highlight {
    color: #ff7518;
}

body.halloween-theme .step-card:not(:last-child)::after {
    border-left-color: #ff7518;
}

/* --- 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 {
    color: #ff7518;
}

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

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

/* --- 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: #ff7518;
}

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

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

/* --- Text gold class --- */
body.halloween-theme .text-gold {
    color: #ff7518;
}

/* --- 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 --- */
body.halloween-theme html::-webkit-scrollbar-track,
body.halloween-theme body::-webkit-scrollbar-track,
body.halloween-theme *::-webkit-scrollbar-track {
    background: #0d0a1a;
}

body.halloween-theme html::-webkit-scrollbar-thumb,
body.halloween-theme body::-webkit-scrollbar-thumb,
body.halloween-theme *::-webkit-scrollbar-thumb {
    background: #6b3fa0;
}

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

/* --- FAQ accordion --- */
body.halloween-theme .faq-item {
    background: rgb(26 17 40 / 65%);
}

body.halloween-theme .faq-item[open] {
    border-color: rgb(255 117 24 / 22%);
}

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

/* --- 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: #ff7518;
    color: #1a0a00;
}

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

body.halloween-theme .demo-game-card:hover .demo-game-cta {
    background: #e55a00;
    box-shadow: 0 2px 12px rgb(255 117 24 / 32%);
}

/* --- Demo pagination buttons --- */
body.halloween-theme .demo-games-pagination__btn {
    border-color: rgb(255 117 24 / 35%);
    background: rgb(26 17 40 / 55%);
    color: #ffa05c;
}

body.halloween-theme .demo-games-pagination__btn:hover:not(:disabled) {
    background: rgb(38 25 58 / 75%);
    border-color: rgb(255 117 24 / 55%);
    color: #ff7518;
}

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

/* --- 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 (slight purple tint) --- */
body.halloween-theme .demo-age-gate__panel {
    background: #fffaf2;
}

/* --- 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: #ff7518;
}

/* --- 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: #ff7518;
}

body.halloween-theme .footer-disclaimer-link {
    color: #ff7518;
}

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

/* ============================================
   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: 29 6 17;         /* #1d0611 */
    --surface-elevated: 45 10 38;   /* #2d0a26 */
    --surface-sunken: 7 5 16;       /* #070510 */

    --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 */
}

/* --- 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: #ffa05c 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 {
    background-image: linear-gradient(180deg, #f690ff, #c357f8);
}

/* "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 .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 .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(180deg, #f690ff, #c357f8);
}

/* Tailwind accent tints (shop filter bar, "+X% Extra" badge, game filters, KYC header) */
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: #ffed11;
}

/* 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;
}

/* 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%);
}

/* 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;
}

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

body.halloween-theme .gameTabHover.active {
    background-image: linear-gradient(180deg, #f690ff, #c357f8);
}

/* 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 .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: replaces <img src=logo.webp> via content: url()
     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: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
    object-fit: contain;
    object-position: center;
}

/* --- 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: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
    }
}

/* --- 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(18rem, 85vw);
    }

    body.halloween-theme .landing-promo-footer .footer-logo-mobile-wordmark {
        content: url("https://assets.moozi.com/theme-halloween/Halloween-Batwing-logo.png");
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
    }
}

/* --- 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: auto;
}

/* --- Mobile (< 640px): ensure header logo stays crisp at small sizes --- */
@media (max-width: 639px) {
    body.halloween-theme nav img[alt="Logo"] {
        width: 4rem !important;
        height: auto !important;
    }
}

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

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