/* ================================================================
   MarketBlox — Halloween theme (hand-made layer)
   Every rule is scoped to html.hw, which halloween.js only sets
   before Nov 1. Colour swaps for the rest of the site live in the
   generated halloween-colors.css.
   Palette: pumpkin orange, slime green (prices), night black.
   ================================================================ */

html.hw {
  --hw-orange: #ff7a1a;
  --hw-orange-hi: #ffa64d;
  --hw-orange-deep: #c94a00;
  --hw-slime: #4dff9a;
  --hw-night: #0a0706;
  --hw-stone: #17120e;
  --hw-stone-2: #211a14;
  --hw-ink: #f6eadc;
  --hw-mute: #b9a796;
  --hw-ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
html.hw { background: var(--hw-night) !important; }
/* body must stay transparent: the fixed sky (z-index:-1) paints between the root and body content */
html.hw body, html.hw body.dark, html.hw body.auth-body { background: transparent !important; }
html.hw ::selection { background: rgba(255, 122, 26, .35); color: #fff; }

/* ── Night sky behind everything ───────────────────────────────── */
.hw-sky, .hw-fog, .hw-bat, .hw-ghost, .hw-patch { display: none; }
html.hw .hw-sky {
  display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60vw 50vh at 85% 8%, rgba(255, 170, 90, .13), transparent 60%),
    radial-gradient(50vw 40vh at 0% 100%, rgba(0, 200, 83, .06), transparent 65%),
    linear-gradient(180deg, #120c0a 0%, #0a0706 55%, #070504 100%);
}
html.hw .hw-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 236, 214, .8), transparent 60%),
    radial-gradient(1px 1px at 28% 42%, rgba(255, 236, 214, .55), transparent 60%),
    radial-gradient(1.4px 1.4px at 47% 12%, rgba(255, 236, 214, .7), transparent 60%),
    radial-gradient(1px 1px at 63% 33%, rgba(255, 236, 214, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 54%, rgba(255, 236, 214, .6), transparent 60%),
    radial-gradient(1px 1px at 91% 27%, rgba(255, 236, 214, .55), transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 66%, rgba(255, 236, 214, .5), transparent 60%),
    radial-gradient(1px 1px at 38% 78%, rgba(255, 236, 214, .45), transparent 60%);
  background-size: 640px 520px;
  animation: hwTwinkle 5s ease-in-out infinite alternate;
}
@keyframes hwTwinkle { from { opacity: .55; } to { opacity: 1; } }
html.hw .hw-moon {
  position: absolute; top: 110px; right: 7vw; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff8e6 0%, #ffe3b0 45%, #f2b46a 78%, #d98a3d 100%);
  box-shadow: 0 0 60px 16px rgba(255, 196, 120, .30), 0 0 160px 60px rgba(255, 140, 50, .14);
  animation: hwMoon 9s ease-in-out infinite alternate;
}
html.hw .hw-moon i { position: absolute; border-radius: 50%; background: rgba(190, 120, 60, .28); box-shadow: inset 2px 2px 4px rgba(120, 70, 30, .35); }
html.hw .hw-moon i:nth-child(1) { width: 26px; height: 26px; top: 34px; left: 40px; }
html.hw .hw-moon i:nth-child(2) { width: 16px; height: 16px; top: 82px; left: 92px; }
html.hw .hw-moon i:nth-child(3) { width: 11px; height: 11px; top: 96px; left: 44px; }
@keyframes hwMoon { from { transform: translateY(0); } to { transform: translateY(14px); } }

/* Low fog drifting along the bottom edge (very faint, never blocks clicks) */
html.hw .hw-fog {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 2; pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
}
html.hw .hw-fog i {
  position: absolute; bottom: -6vh; left: -50%; width: 200%; height: 30vh;
  background:
    radial-gradient(30% 60% at 20% 70%, rgba(255, 238, 222, .085), transparent 70%),
    radial-gradient(25% 55% at 55% 80%, rgba(255, 238, 222, .07), transparent 70%),
    radial-gradient(30% 60% at 85% 70%, rgba(255, 210, 170, .06), transparent 70%);
  filter: blur(6px);
  animation: hwFog 38s linear infinite;
}
html.hw .hw-fog i:nth-child(2) { animation-duration: 56s; animation-direction: reverse; bottom: -10vh; opacity: .8; }
@keyframes hwFog { from { transform: translateX(0); } to { transform: translateX(25%); } }

/* ── Bats ─────────────────────────────────────────────────────── */
html.hw .hw-bat {
  display: block; position: fixed; left: 0; z-index: 60; pointer-events: none; margin-left: -20px;
  animation: hwBatFly 8s linear forwards;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
html.hw .hw-bat svg { fill: #1b120d; animation: hwFlap .16s ease-in-out infinite alternate; transform-origin: 50% 40%; }
html.hw .hw-bat .hw-wing { fill: #1b120d; stroke: rgba(255, 140, 60, .55); stroke-width: 1; }
@keyframes hwBatFly {
  0%   { transform: translate3d(calc(50vw - var(--dir) * 62vw), 0, 0) scaleX(var(--dir)); }
  50%  { transform: translate3d(50vw, calc(var(--rise) * .4), 0) scaleX(var(--dir)); }
  100% { transform: translate3d(calc(50vw + var(--dir) * 62vw), var(--rise), 0) scaleX(var(--dir)); }
}
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* ── Ghosts (JS moves them) ───────────────────────────────────── */
html.hw .hw-ghost {
  display: block; position: fixed; top: 0; left: 0; width: 40px; height: 46px; z-index: 70; pointer-events: none;
  margin: -23px 0 0 -20px; opacity: .82; will-change: transform;
  filter: drop-shadow(0 0 14px rgba(255, 190, 130, .45)) drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
}
html.hw .hw-ghost + .hw-ghost { width: 32px; height: 37px; opacity: .7; }
html.hw .hw-ghost + .hw-ghost + .hw-ghost { width: 26px; height: 30px; opacity: .6; }
@media (max-width: 800px) {
  html.hw .hw-ghost { width: 30px; height: 35px; opacity: .45; z-index: 3; }
  html.hw .hw-moon { width: 96px; height: 96px; }
  html.hw .hw-moon i:nth-child(1) { width: 17px; height: 17px; top: 22px; left: 26px; }
  html.hw .hw-moon i:nth-child(2) { width: 11px; height: 11px; top: 54px; left: 60px; }
  html.hw .hw-moon i:nth-child(3) { width: 8px; height: 8px; top: 62px; left: 28px; }
  html.hw .hw-fog i { animation: none; }
  html.hw .hw-stars { animation: none; }
}

/* ── Hero: transparent so the moon shows; pumpkin patch at the bottom ── */
html.hw .hero, html.hw body.dark .hero {
  background: linear-gradient(rgba(255, 140, 60, .025) 1px, transparent 1px) 0 0 / 44px 44px,
              linear-gradient(90deg, rgba(255, 140, 60, .025) 1px, transparent 1px) 0 0 / 44px 44px,
              transparent !important;
}
html.hw .hero-particles span { background: rgba(255, 150, 60, .55) !important; box-shadow: 0 0 8px rgba(255, 140, 50, .8); }
html.hw .hw-patch { display: flex; position: absolute; left: 3%; bottom: 14px; align-items: flex-end; gap: 6px; z-index: 0; pointer-events: none; }
html.hw .hw-patch svg { filter: drop-shadow(0 0 18px rgba(255, 140, 40, .55)); animation: hwCandle 3.4s ease-in-out infinite; }
html.hw .hw-patch .pk2 { animation-delay: .8s; }
html.hw .hw-patch .pk3 { animation-delay: 1.6s; }
@media (max-width: 800px) { html.hw .hw-patch { transform: scale(.7); transform-origin: left bottom; bottom: 6px; } }

/* Halloween display face for accent words */
html.hw .hero-accent {
  font-family: 'Creepster', var(--font-display), cursive !important; font-weight: 400 !important; letter-spacing: .03em;
  background: linear-gradient(180deg, #ffd08a 0%, #ff8c2a 45%, #ff5a00 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255, 110, 20, .45));
}
html.hw .bs-fire-title {
  font-family: 'Creepster', var(--font-display), cursive !important; font-weight: 400 !important; letter-spacing: .04em;
  background: linear-gradient(90deg, #ffd08a 0%, #ff8c2a 30%, #fff1dc 50%, #ff8c2a 70%, #ffd08a 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
html.hw .fire-float svg path:first-child { fill: #ff7a1a; }
html.hw .cl-hero-heading span {
  font-family: 'Creepster', cursive !important; font-weight: 400 !important; letter-spacing: .04em;
  background: linear-gradient(180deg, #ffd08a 0%, #ff8c2a 45%, #ff5a00 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
html.hw .cl-hero-logo-scene .hw-pumpkin { filter: drop-shadow(0 0 26px rgba(255, 130, 30, .7)); }

/* ── Pumpkin logo ─────────────────────────────────────────────── */
html.hw .hw-pumpkin { filter: drop-shadow(0 0 10px rgba(255, 130, 30, .55)); animation: hwCandle 3.2s ease-in-out infinite; overflow: visible; }
@keyframes hwCandle {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 130, 30, .55)); }
  40%      { filter: drop-shadow(0 0 16px rgba(255, 150, 40, .8)); }
  45%      { filter: drop-shadow(0 0 8px rgba(255, 120, 20, .45)); }
  70%      { filter: drop-shadow(0 0 14px rgba(255, 150, 40, .7)); }
}
html.hw .logo b, html.hw .logo span b { color: var(--hw-orange) !important; }

/* ── Glowing pumpkin buttons ──────────────────────────────────── */
html.hw .btn-primary, html.hw .pc-btn-buy, html.hw .bs-btn-buy, html.hw .checkout-now-btn,
html.hw .cart-checkout-btn, html.hw .drawer-checkout-btn, html.hw .co-pay-btn, html.hw .cl-btn,
html.hw .auth-submit, html.hw .mb-chat-send, html.hw .gvw-enter-btn, html.hw .spin-unlock-btn,
html.hw .mm-account-btn, html.hw .spb-btn, html.hw .add-btn, html.hw .send-btn, html.hw .cl-send-btn {
  background: linear-gradient(180deg, #ffa24a 0%, #ff7a1a 48%, #e85d04 100%) !important;
  color: #2a1203 !important; text-shadow: 0 1px 0 rgba(255, 220, 170, .45) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 0 #a33f00, 0 10px 26px -8px rgba(255, 120, 20, .75), inset 0 1px 0 rgba(255, 240, 210, .55) !important;
  animation: hwBtnGlow 3.6s ease-in-out infinite;
}
html.hw .btn-primary .btn-bg { background: none !important; }
html.hw .btn-primary .btn-content, html.hw .btn-primary * { color: #2a1203 !important; }
html.hw .pc-btn-buy:hover, html.hw .btn-primary:hover, html.hw .bs-btn-buy:hover, html.hw .checkout-now-btn:hover,
html.hw .cart-checkout-btn:hover, html.hw .co-pay-btn:hover, html.hw .cl-btn:hover, html.hw .auth-submit:hover {
  filter: brightness(1.08) saturate(1.1);
}
html.hw .pc-btn-buy.pc-btn-disabled, html.hw button:disabled.co-pay-btn {
  background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .4) !important; box-shadow: none !important; animation: none; text-shadow: none !important;
}
@keyframes hwBtnGlow {
  0%, 100% { box-shadow: 0 3px 0 #a33f00, 0 10px 26px -8px rgba(255, 120, 20, .75), inset 0 1px 0 rgba(255, 240, 210, .55); }
  50%      { box-shadow: 0 3px 0 #a33f00, 0 12px 34px -6px rgba(255, 150, 40, .95), inset 0 1px 0 rgba(255, 240, 210, .55); }
}
html.hw .pc-btn-cart, html.hw .bs-btn-cart, html.hw .add-cart-btn, html.hw .btn-ghost {
  border-color: rgba(255, 140, 60, .35) !important; color: #ffd2a6 !important; background: rgba(255, 122, 26, .06) !important;
}
html.hw .pc-btn-cart:hover, html.hw .bs-btn-cart:hover, html.hw .btn-ghost:hover { background: rgba(255, 122, 26, .16) !important; color: #fff !important; }

/* ── Prices & good news stay slime green ──────────────────────── */
html.hw .pc-price, html.hw .bs-price, html.hw #prod-price, html.hw .prod-price, html.hw .drawer-item-price,
html.hw .drawer-total, html.hw #drawerTotal, html.hw .suggestion-price, html.hw .hgc-price, html.hw .gpm-price,
html.hw .co-total-amount, html.hw .co-price-total, html.hw .co-item-price, html.hw .cl-total-val, html.hw #totalVal,
html.hw .order-price, html.hw .order-total, html.hw .acc-wallet-amount {
  color: var(--hw-slime) !important; -webkit-text-fill-color: var(--hw-slime) !important;
  text-shadow: 0 0 14px rgba(0, 230, 118, .35);
}
html.hw .acc-wallet-amount { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none; }

/* ── Tombstone product cards ──────────────────────────────────── */
html.hw .product-card, html.hw .bs-card {
  border-radius: 50% 50% 16px 16px / 86px 86px 16px 16px !important;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .045), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--hw-stone-2), var(--hw-stone)) !important;
  border: 1.5px solid rgba(255, 150, 70, .16) !important;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 230, 200, .06) !important;
}
html.hw .product-card:hover, html.hw .bs-card:hover {
  border-color: rgba(255, 140, 50, .55) !important;
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 140, 50, .25), 0 16px 40px -14px rgba(255, 120, 20, .55) !important;
}
html.hw .mb-tilt.is-tilting.product-card { box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 140, 50, .4), 0 18px 40px -18px rgba(255, 120, 20, .6) !important; }
html.hw .pc-img-wrap, html.hw .bs-img-wrap { background: radial-gradient(circle at 50% 40%, #2a2019, #140f0c) !important; }
/* Badges move to the middle of the arch so the curve doesn't clip them */
html.hw .pc-badge { left: 50% !important; top: 14px !important; transform: translateX(-50%); white-space: nowrap; }
html.hw .pc-stock-badge { top: auto !important; bottom: 8px !important; }
html.hw .bs-card-top { justify-content: center !important; padding-top: 14px !important; }
/* Cobweb in the shoulder of each stone */
html.hw .product-card::after, html.hw .bs-card::after, html.hw .hgc::after, html.hw .game-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 76px; height: 76px; z-index: 5; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76' fill='none' stroke='%23f6eadc' stroke-width='.8'%3E%3Cpath d='M76 0L18 58M76 0L40 70M76 0L4 34M76 0L60 76M76 0L0 12'/%3E%3Cpath d='M64 0q2 10 12 12M52 0q4 20 24 24M38 0q7 30 38 38M24 0q11 41 52 52' stroke-opacity='.8'/%3E%3C/svg%3E") no-repeat top right / 100% 100%;
}
html.hw .hgc::after, html.hw .game-card::after { width: 54px; height: 54px; opacity: .4; }
html.hw .hgc, html.hw .game-card {
  border-color: rgba(255, 150, 70, .2) !important;
  background-color: rgba(28, 21, 16, .85) !important;
}
html.hw .hgc:hover, html.hw .game-card:hover { border-color: rgba(255, 140, 50, .55) !important; box-shadow: 0 16px 40px -14px rgba(255, 120, 20, .5) !important; }
html.hw .mb-glare { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 210, 160, .16), rgba(255, 140, 50, .05) 30%, transparent 55%) !important; }

@media (max-width: 520px) {
  html.hw .product-card, html.hw .bs-card { border-radius: 50% 50% 14px 14px / 64px 64px 14px 14px !important; }
  html.hw .product-card::after, html.hw .bs-card::after { width: 52px; height: 52px; }
  html.hw .pc-badge { top: 10px !important; font-size: .58rem !important; }
}

/* ── Chrome: ticker, navbar, tags ─────────────────────────────── */
html.hw .announce-bar { background: linear-gradient(90deg, #120a05, #1c0f06, #120a05) !important; border-bottom-color: rgba(255, 122, 26, .3) !important; }
html.hw .ab-item { color: rgba(255, 228, 200, .8) !important; display: inline-flex; align-items: center; gap: .45em; }
html.hw .ab-item strong, html.hw .ab-sep { color: var(--hw-orange) !important; }
html.hw .navbar { border-bottom-color: rgba(255, 122, 26, .14) !important; }
html.hw .ni-svg > rect:first-child { fill: var(--hw-orange); }
html.hw .ni-svg g { stroke: #2a1203; }
html.hw .section-tag, html.hw .games-hero-tag, html.hw .cl-card-eyebrow { color: var(--hw-orange) !important; }
html.hw .hw-foot { color: var(--hw-orange); font-weight: 700; display: inline-flex; align-items: center; gap: .3em; }
html.hw .mb-progress { background: linear-gradient(90deg, #a33f00, #ff7a1a 60%, #ffd08a) !important; box-shadow: 0 0 12px rgba(255, 122, 26, .8) !important; }

/* Things that were green on purpose for "good news" keep a slime accent */
html.hw .mb-chat-status-dot, html.hw .mb-live-agent-dot, html.hw .sse-dot.live, html.hw .status-pill.on::before { background: var(--hw-slime) !important; box-shadow: 0 0 8px var(--hw-slime) !important; }

/* ── Live-order toast (styles injected by recent-orders.js) ─────── */
html.hw #mb-live-order { background: #160f0b !important; border-color: rgba(255, 140, 60, .25) !important; border-left-color: var(--hw-orange) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 122, 26, .08) !important; }
html.hw #mb-live-order .mb-icon { background: linear-gradient(140deg, #ffa24a, #e85d04) !important; box-shadow: 0 0 10px rgba(255, 122, 26, .5) !important; color: #2a1203 !important; }
html.hw #mb-live-order .mb-badge { background: rgba(255, 122, 26, .12) !important; border-color: rgba(255, 122, 26, .3) !important; color: var(--hw-orange) !important; }
html.hw #mb-live-order .mb-dot { background: var(--hw-orange) !important; }
html.hw #mb-live-order .mb-item { color: var(--hw-orange-hi) !important; text-shadow: 0 0 12px rgba(255, 122, 26, .35) !important; }

/* Status dots that mean "available" stay slime green */
html.hw .stock-dot { background: var(--hw-slime) !important; box-shadow: 0 0 10px var(--hw-slime) !important; }

/* Hero trust pills: one orange icon colour */
html.hw .trust-pill svg [stroke]:not([stroke="none"]) { stroke: var(--hw-orange); }
html.hw .trust-pill svg [fill]:not([fill="none"]) { fill: var(--hw-orange); }
html.hw .trust-pill { border-color: rgba(255, 140, 60, .25) !important; }

@media (max-width: 800px) {
  /* keep the moon away from the headline on phones */
  html.hw .hw-moon { top: auto; bottom: 22vh; right: -26px; opacity: .85; }
}

html.hw .acc-order-status, html.hw .order-status-paid { color: var(--hw-slime) !important; background: rgba(0, 230, 118, .1) !important; border-color: rgba(0, 230, 118, .3) !important; }
html.hw .spin-crown-svg stop:nth-child(1) { stop-color: #ffe2b8; }
html.hw .spin-crown-svg stop:nth-child(2) { stop-color: #ff8c2a; }
html.hw .spin-crown-svg stop:nth-child(3) { stop-color: #c94a00; }
html.hw .drawer-title svg, html.hw .drawer-empty-icon svg { color: var(--hw-orange); }

/* Best-seller tabs: pumpkin active state */
html.hw #bsGameTabs > * { --tab-color: #ff7a1a !important; }
html.hw .bs-tab.active { color: #2a1203 !important; }
html.hw .bs-tab-thumb-wrap { background: linear-gradient(145deg, #3a2414, #1c120b); color: #ffd2a6; }
html.hw .bs-tabs-wrap { border-color: rgba(255, 140, 60, .14); }

/* ================================================================
   HAUNTED CARDS v2 — carved 3D tombstones, crypt windows, spiders
   ================================================================ */
html.hw {
  /* fine grain so surfaces read as stone, not flat paint */
  --hw-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hw-cracks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M18 0l6 22-8 14 10 20M182 40l-10 16 6 18-12 10M30 300l8-26-6-12 10-18'/%3E%3C/svg%3E");
  --hw-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 120'%3E%3Cpath d='M20 0v92' stroke='%23e9ddd0' stroke-opacity='.55' stroke-width='.8'/%3E%3Cg stroke='%231a120d' stroke-width='2.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M14 98l-9-6-3 6M14 102l-11 0-2 6M14 106l-9 5-1 7M26 98l9-6 3 6M26 102l11 0 2 6M26 106l9 5 1 7'/%3E%3C/g%3E%3Cellipse cx='20' cy='97' rx='5' ry='4.6' fill='%231a120d'/%3E%3Cellipse cx='20' cy='106' rx='7' ry='8' fill='%231a120d'/%3E%3Cpath d='M17 104l3 4 3-4' stroke='%23ff7a1a' stroke-width='1.2' fill='none'/%3E%3Ccircle cx='18' cy='96' r='1.2' fill='%23ff9a3c'/%3E%3Ccircle cx='22' cy='96' r='1.2' fill='%23ff9a3c'/%3E%3C/svg%3E");
}

/* ── Product + best-seller tombstones ─────────────────────────── */
html.hw .product-card, html.hw .bs-card {
  background:
    var(--hw-grain),
    var(--hw-cracks) center / 100% 100% no-repeat,
    radial-gradient(130% 60% at 50% 0%, rgba(255, 236, 214, .07), transparent 55%),
    linear-gradient(180deg, #2a221c 0%, #1b1511 55%, #120e0b 100%) !important;
  border: 1px solid rgba(255, 196, 150, .10) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 236, 214, .10),
    inset 1.5px 0 0 rgba(255, 236, 214, .04),
    inset -2px 0 0 rgba(0, 0, 0, .35),
    inset 0 -3px 0 rgba(0, 0, 0, .45),
    0 8px 0 -1px #0d0a08,
    0 8px 0 0 rgba(255, 150, 70, .09),
    0 26px 34px -14px rgba(0, 0, 0, .95) !important;
  transition: transform .45s var(--hw-ease), box-shadow .45s var(--hw-ease), border-color .3s !important;
}
html.hw .product-card:hover, html.hw .bs-card:hover {
  border-color: rgba(255, 150, 70, .4) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 236, 214, .14), inset 0 -3px 0 rgba(0, 0, 0, .45),
    0 8px 0 -1px #0d0a08, 0 8px 0 0 rgba(255, 150, 70, .25),
    0 34px 46px -16px rgba(0, 0, 0, .95), 0 0 40px -6px rgba(255, 110, 20, .45) !important;
}
@media (hover: hover) { html.hw .product-card:hover:not(.mb-tilt), html.hw .bs-card:hover { transform: translateY(-10px) !important; } }
html.hw .mb-tilt.is-tilting.product-card {
  box-shadow: inset 0 1.5px 0 rgba(255, 236, 214, .14), 0 8px 0 -1px #0d0a08, 0 8px 0 0 rgba(255, 150, 70, .25),
              0 34px 46px -16px rgba(0, 0, 0, .95), 0 0 46px -6px rgba(255, 110, 20, .5) !important;
}

/* Crypt window: the image sits recessed inside a carved arch */
html.hw .product-card .pc-img-wrap, html.hw .bs-card .bs-img-wrap {
  width: auto !important; margin: 9px 9px 0 !important;
  border-radius: 50% 50% 10px 10px / 74px 74px 10px 10px !important;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(255, 120, 30, .32), transparent 70%),
    radial-gradient(circle at 50% 40%, #2a1d14, #0f0a07) !important;
  isolation: isolate; transform: translateZ(0);
}
html.hw .bs-card .bs-img-wrap { margin-top: 6px !important; }
html.hw .product-card .pc-img-wrap::before, html.hw .bs-card .bs-img-wrap::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 190, 130, .22),
    inset 0 12px 20px -6px rgba(0, 0, 0, .75),
    inset 0 -22px 28px -14px rgba(255, 110, 20, .45);
}
html.hw .pc-img-wrap img, html.hw .bs-img-wrap img { transition: transform .6s var(--hw-ease), filter .4s !important; filter: saturate(1.05) contrast(1.04); }
html.hw .product-card:hover .pc-img-wrap img, html.hw .bs-card:hover .bs-img-wrap img { transform: scale(1.09) translateY(-3px) !important; filter: saturate(1.15) contrast(1.08) drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }

/* Rising embers inside the window on hover */
html.hw .pc-img-shine, html.hw .bs-card-shine {
  opacity: 0 !important; z-index: 2; pointer-events: none;
  background:
    radial-gradient(2px 2px at 20% 80%, #ffb347, transparent 60%),
    radial-gradient(1.6px 1.6px at 70% 90%, #ff8a2a, transparent 60%),
    radial-gradient(2.2px 2.2px at 45% 100%, #ffd08a, transparent 60%),
    radial-gradient(1.4px 1.4px at 85% 70%, #ff9a3c, transparent 60%),
    radial-gradient(1.8px 1.8px at 10% 95%, #ffb347, transparent 60%) !important;
  background-size: 100% 60% !important; background-repeat: repeat-y !important;
  transition: opacity .4s !important;
}
html.hw .product-card:hover .pc-img-shine, html.hw .bs-card:hover .bs-card-shine { opacity: 1 !important; animation: hwEmbers 1.6s linear infinite; }
@keyframes hwEmbers { from { background-position: 0 0; } to { background-position: 0 -100%; } }

/* A spider drops in on hover (desktop) */
html.hw .product-card::before, html.hw .bs-card::before {
  content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; right: auto !important;
  width: 22px !important; height: 66px !important; margin-left: -11px; z-index: 6; pointer-events: none;
  background: var(--hw-spider) center bottom / 100% auto no-repeat !important; border-radius: 0 !important;
  transform: translateY(-72px); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6));
}
@media (hover: hover) {
  html.hw .product-card:hover::before, html.hw .bs-card:hover::before { transform: translateY(-8px); animation: hwSpiderSwing 2.4s ease-in-out .7s infinite; }
}
@keyframes hwSpiderSwing { 0%, 100% { transform: translateY(-8px) rotate(0deg); } 50% { transform: translateY(-4px) rotate(4deg); } }

/* Engraved name, carved divider, glowing price */
html.hw .pc-body, html.hw .bs-body { position: relative; }
html.hw .pc-body::before, html.hw .bs-body::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55), transparent);
  box-shadow: 0 1px 0 rgba(255, 220, 190, .07);
}
html.hw .pc-name, html.hw .bs-name { color: #f3e6d8 !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 230, 200, .08); letter-spacing: .01em; }
html.hw .pc-price, html.hw .bs-price { text-shadow: 0 0 10px rgba(0, 230, 118, .45), 0 0 22px rgba(0, 230, 118, .2) !important; }

/* Badges become little wax seals */
html.hw .pc-badge, html.hw .bs-badge {
  background: radial-gradient(circle at 35% 30%, #ffb35c, #e85d04 70%) !important; color: #2a1203 !important;
  border: 0 !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 230, 190, .6) !important; z-index: 4;
}

/* ── Every other card on the site: haunted stone panels ───────── */
html.hw .hiw-card, html.hw .support-card, html.hw .gvw-card, html.hw .gvw-past-card, html.hw .proof-card,
html.hw .acc-order-card, html.hw .acc-settings-card, html.hw .co-card, html.hw .aff-card, html.hw .policy-card,
html.hw .refund-tile, html.hw .feat-item, html.hw .earn-item, html.hw .spin-unlock-card, html.hw .success-card,
html.hw .stat-card, html.hw .drawer-item, html.hw .suggestion-card, html.hw .how-step, html.hw .tut-step,
html.hw .hgc, html.hw .game-card, html.hw .gpm-item, html.hw .auth-card, html.hw .cl-card {
  background-image:
    var(--hw-grain),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 236, 214, .05), transparent 60%),
    linear-gradient(180deg, rgba(38, 30, 24, .92), rgba(20, 15, 12, .96)) !important;
  background-color: #17120e !important;
  border-color: rgba(255, 196, 150, .11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .08), inset 0 -2px 0 rgba(0, 0, 0, .4),
    0 5px 0 -1px #0d0a08, 0 16px 28px -14px rgba(0, 0, 0, .9) !important;
  transition: transform .4s var(--hw-ease), box-shadow .4s var(--hw-ease), border-color .3s !important;
}
html.hw .hiw-card:hover, html.hw .support-card:hover, html.hw .gvw-card:hover, html.hw .proof-card:hover,
html.hw .acc-order-card:hover, html.hw .feat-item:hover, html.hw .earn-item:hover, html.hw .how-step:hover,
html.hw .hgc:hover, html.hw .game-card:hover, html.hw .gpm-item:hover, html.hw .drawer-item:hover, html.hw .suggestion-card:hover {
  border-color: rgba(255, 150, 70, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .12), inset 0 -2px 0 rgba(0, 0, 0, .4),
    0 5px 0 -1px #0d0a08, 0 5px 0 0 rgba(255, 150, 70, .2),
    0 24px 36px -14px rgba(0, 0, 0, .95), 0 0 34px -8px rgba(255, 110, 20, .4) !important;
}
@media (hover: hover) {
  html.hw .hiw-card:hover, html.hw .support-card:hover, html.hw .gvw-card:hover, html.hw .proof-card:hover,
  html.hw .feat-item:hover, html.hw .earn-item:hover, html.hw .gpm-item:hover { transform: translateY(-6px); }
}
/* Images inside panels get a carved frame */
html.hw .game-card-img, html.hw .proof-card img, html.hw .gvw-card-banner, html.hw .drawer-item-img, html.hw .hgc-emoji img, html.hw .gpm-img {
  box-shadow: inset 0 0 0 1.5px rgba(255, 190, 130, .2), 0 6px 14px -6px rgba(0, 0, 0, .8);
}
/* Icon tiles inside info cards glow like lanterns */
html.hw .hiw-icon-wrap, html.hw .sc-icon-wrap, html.hw .feat-icon-3d, html.hw .how-step-icon-wrap, html.hw .earn-icon-wrap {
  box-shadow: 0 0 0 1px rgba(255, 190, 130, .2), 0 8px 22px -6px rgba(255, 110, 20, .55), inset 0 1px 0 rgba(255, 236, 214, .35) !important;
}
/* Cobweb on the big info cards too */
html.hw .support-card, html.hw .gvw-card { position: relative; overflow: hidden; }
html.hw .hiw-card { position: relative; } /* keeps the 01/02/03 badges that sit on its top edge */
/* Green strokes/fills baked into inline icons turn pumpkin */
html.hw .hiw-icon-wrap svg [stroke="#00c853"], html.hw .hiw-connector [stroke="#00c853"], html.hw .sc-icon-wrap svg [stroke="#00c853"] { stroke: #ff8c2a; }
html.hw .hiw-icon-wrap svg [fill="#00c853"], html.hw .sc-icon-wrap svg [fill="#00c853"] { fill: #ff8c2a; }
html.hw .hiw-icon-wrap svg [fill^="rgba(0,200,83"] { fill: rgba(255,122,26,.14); }
html.hw .hiw-card::after, html.hw .support-card::after, html.hw .gvw-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 64px; height: 64px; z-index: 5; pointer-events: none; opacity: .4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76' fill='none' stroke='%23f6eadc' stroke-width='.8'%3E%3Cpath d='M76 0L18 58M76 0L40 70M76 0L4 34M76 0L60 76M76 0L0 12'/%3E%3Cpath d='M64 0q2 10 12 12M52 0q4 20 24 24M38 0q7 30 38 38M24 0q11 41 52 52' stroke-opacity='.8'/%3E%3C/svg%3E") no-repeat top right / 100% 100%;
}

@media (max-width: 520px) {
  html.hw .product-card .pc-img-wrap, html.hw .bs-card .bs-img-wrap { margin: 7px 7px 0 !important; border-radius: 50% 50% 9px 9px / 56px 56px 9px 9px !important; }
  html.hw .product-card, html.hw .bs-card {
    box-shadow: inset 0 1.5px 0 rgba(255, 236, 214, .10), inset 0 -3px 0 rgba(0, 0, 0, .45),
                0 6px 0 -1px #0d0a08, 0 6px 0 0 rgba(255, 150, 70, .09), 0 18px 26px -12px rgba(0, 0, 0, .95) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.hw .product-card::before, html.hw .bs-card::before { display: none !important; }
  html.hw .pc-img-shine, html.hw .bs-card-shine { animation: none !important; }
}

/* Inline SVG icons with baked-in brand green -> pumpkin (logo tiles are swapped separately) */
html.hw svg:not(.hw-pumpkin) [stroke="#00c853" i], html.hw svg:not(.hw-pumpkin) [stroke="#00e676" i] { stroke: #ff8c2a; }
html.hw svg:not(.hw-pumpkin):not(.ni-svg) [fill="#00c853" i], html.hw svg:not(.hw-pumpkin):not(.ni-svg) [fill="#00e676" i] { fill: #ff8c2a; }

/* ── Motion preferences ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.hw .hw-bat, html.hw .hw-ghost { display: none !important; }
  html.hw .hw-moon, html.hw .hw-fog i, html.hw .hw-stars, html.hw .hw-pumpkin, html.hw .hw-patch svg { animation: none !important; }
}