/* =====================================================================
   PLAY JUWA — "HAUNTED JACKPOT" HALLOWEEN THEME  ·  site-wide skin
   ---------------------------------------------------------------------
   Linked from index.html <head> while the season is on (html.pj-halloween
   is on the first HTML). Do not inject this file after paint — that
   restyles tiles/buttons and shows up as slow INP animations.
   Animate transform/opacity only. Hover glow uses ::after opacity.
   After the season, remove the html class, this stylesheet, and
   halloween-theme.v2.js together. Same rule for any future seasonal theme.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS (re-maps existing variables) ---------- */
html.pj-halloween,
html.pj-halloween body,
html.pj-halloween .dash-root,
html.pj-halloween .dash-page,
html.pj-halloween .pj-auth-root {
  --hw-void:    #06020c;
  --hw-night:   #0d0618;
  --hw-crypt:   #160b24;
  --hw-crypt2:  #1f0f33;
  --hw-crypt3:  #2a1544;
  --hw-pumpkin: #ff8a1f;
  --hw-pumpkin2:#ffc15e;
  --hw-ember:   #ff4d0a;
  --hw-witch:   #a855f7;
  --hw-witch2:  #7c3aed;
  --hw-slime:   #5dff9e;
  --hw-ecto:    #7dffd4;
  --hw-blood:   #ff2d55;
  --hw-bone:    #f7efe2;
  --hw-mist:    #a998c4;
  --hw-line:    rgba(168, 85, 247, .22);
  --hw-line-hot:rgba(255, 138, 31, .45);
  --hw-r: 18px;
  --hw-font-spooky: Impact, "Fredoka", system-ui, cursive;
  --hw-molten: linear-gradient(135deg, #ffb347 0%, #ff8a1f 30%, #ff4d0a 62%, #c026d3 100%);
  --hw-card-bg: linear-gradient(165deg, rgba(42, 21, 68, .92) 0%, rgba(22, 11, 36, .94) 55%, rgba(13, 6, 24, .96) 100%);

  --dash-black: var(--hw-void);
  --dash-bg: var(--hw-void);
  --dash-bg2: var(--hw-night);
  --dash-deep: var(--hw-crypt);
  --dash-card: var(--hw-crypt);
  --dash-card2: var(--hw-crypt2);
  --dash-gold: var(--hw-pumpkin);
  --dash-gold2: var(--hw-pumpkin2);
  --dash-gold3: #c2410c;
  --dash-pj-gold: var(--hw-pumpkin2);
  --dash-gold-glow: rgba(255, 122, 24, .6);
  --dash-neon: var(--hw-slime);
  --dash-neon2: var(--hw-ecto);
  --dash-teal: var(--hw-ecto);
  --dash-teal2: var(--hw-ecto);
  --dash-green: var(--hw-slime);
  --dash-pj-green: var(--hw-slime);
  --dash-purple: var(--hw-witch);
  --dash-red: var(--hw-blood);
  --dash-border: rgba(168, 85, 247, .2);
  --dash-border-strong: rgba(255, 138, 31, .42);
  --dash-text: var(--hw-bone);
  --dash-muted: var(--hw-mist);

  --pj-bg: var(--hw-void);
  --pj-bg2: var(--hw-night);
  --pj-card: var(--hw-crypt);
  --pj-card2: var(--hw-crypt2);
  --pj-inp: #0b0514;
  --pj-b0: #2a1544;
  --pj-b1: #3f1f63;
  --pj-b2: #6b2fa8;
  --pj-gold: var(--hw-pumpkin);
  --pj-gold2: #ff6a00;
  --pj-gold3: #c2410c;
  --pj-gG: rgba(255, 138, 31, .32);
  --pj-amber: var(--hw-pumpkin2);
  --pj-orange: var(--hw-pumpkin);
  --pj-ember: var(--hw-ember);
  --pj-green: var(--hw-slime);
  --pj-green2: #22c55e;
  --pj-neon-g: var(--hw-slime);
  --pj-neon-a: var(--hw-pumpkin2);
  --pj-white: var(--hw-bone);
  --pj-off: #e7c9a0;
  --pj-mute: #7b5ea8;
  --pj-dim: #3a1f5c;

  --bgm-panel: var(--hw-crypt);
  --bgm-panel-2: var(--hw-crypt2);
  --bgm-panel-3: var(--hw-crypt3);
  --bgm-line: #3d2259;
  --bgm-gold: var(--hw-pumpkin);
  --bgm-gold-dim: #9a3f0a;
  --bgm-text: var(--hw-bone);
  --bgm-text-dim: var(--hw-mist);
  --bgm-green: var(--hw-slime);
  --bgm-red: var(--hw-blood);
  --rd-gold: var(--hw-pumpkin2);
  --acc2: var(--hw-pumpkin2);
  --lp-gold: var(--hw-pumpkin);
  --lp-bg: var(--hw-void);
  --lp-text: var(--hw-bone);
  --lp-teal: var(--hw-ecto);
}

/* ---------- 2. PAGE CANVAS ---------- */
html.pj-halloween {
  background: #06020c;
}
html.pj-halloween body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(255, 77, 10, .10), transparent 60%),
    radial-gradient(1000px 500px at 50% 115%, rgba(93, 255, 158, .07), transparent 60%),
    var(--hw-void) !important;
  color: var(--hw-bone);
}
html.pj-halloween .dash-root::before {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(255, 77, 10, .10), transparent 60%),
    radial-gradient(1000px 500px at 50% 115%, rgba(93, 255, 158, .07), transparent 60%),
    #06020c !important;
}
html.pj-halloween .dash-root,
html.pj-halloween .dash-page,
html.pj-halloween .dash-layout,
html.pj-halloween .dash-shell-main,
html.pj-halloween .dash-main { background: transparent !important; }
html.pj-halloween .dash-bg-canvas { opacity: .35; }
html.pj-halloween .dash-lightning { filter: hue-rotate(230deg) saturate(1.6); }
html.pj-halloween ::selection { background: var(--hw-pumpkin); color: #1a0700; }
html.pj-halloween { scrollbar-color: var(--hw-witch2) var(--hw-night); }
html.pj-halloween ::-webkit-scrollbar { width: 10px; height: 10px; }
html.pj-halloween ::-webkit-scrollbar-track { background: var(--hw-night); }
html.pj-halloween ::-webkit-scrollbar-thumb { background: linear-gradient(var(--hw-pumpkin), var(--hw-witch2)); border-radius: 10px; border: 2px solid var(--hw-night); }

/* ---------- 3. TYPOGRAPHY ---------- */
html.pj-halloween .dash-home-h1,
html.pj-halloween :is(h1, h2)[class*="-title"] {
  background: linear-gradient(180deg, #fff1d6 0%, var(--hw-pumpkin2) 38%, var(--hw-pumpkin) 70%, var(--hw-ember) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--hw-pumpkin);
  filter: drop-shadow(0 0 14px rgba(255, 106, 0, .45)) drop-shadow(0 3px 0 rgba(60, 10, 0, .8));
}
html.pj-halloween [class*="-kick"],
html.pj-halloween .bgm-eyebrow {
  font-family: var(--hw-font-spooky) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: var(--hw-slime) !important;
  text-shadow: 0 0 10px rgba(93, 255, 158, .55);
  -webkit-text-fill-color: currentColor;
}
html.pj-halloween .hw-spooky { font-family: var(--hw-font-spooky); font-weight: 400; letter-spacing: 1.5px; }

/* ---------- 4. TOP NAV ---------- */
html.pj-halloween .dash-nav {
  background: linear-gradient(180deg, rgba(20, 8, 34, .97), rgba(12, 5, 22, .95)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(168, 85, 247, .35) !important;
  box-shadow: 0 6px 30px rgba(124, 58, 237, .25);
  overflow: visible;
}
html.pj-halloween .dash-nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, var(--hw-witch2), var(--hw-witch) 30%, var(--hw-pumpkin) 50%, var(--hw-witch) 70%, var(--hw-witch2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v5c-5 0-6 3-10 3s-4-3-9-3-4 11-8 11-3-11-7-11-6 4-11 4-4-4-9-4-3 7-6 7-3-7-8-7-7 3-12 3-5-3-10-3-4 13-8 13-4-13-8-13-6 3-11 3-5-3-9-3-3 6-7 6-4-6-8-6-6 3-11 3-6-3-10-3-4 9-8 9-4-9-8-9-8 3-13 3-6-3-10-3-4 11-8 11-4-11-6-11z'/%3E%3C/svg%3E") 0 0 / 420px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v5c-5 0-6 3-10 3s-4-3-9-3-4 11-8 11-3-11-7-11-6 4-11 4-4-4-9-4-3 7-6 7-3-7-8-7-7 3-12 3-5-3-10-3-4 13-8 13-4-13-8-13-6 3-11 3-5-3-9-3-3 6-7 6-4-6-8-6-6 3-11 3-6-3-10-3-4 9-8 9-4-9-8-9-8 3-13 3-6-3-10-3-4 11-8 11-4-11-6-11z'/%3E%3C/svg%3E") 0 0 / 420px 14px repeat-x;
  opacity: .9; filter: drop-shadow(0 4px 6px rgba(168, 85, 247, .6));
}

html.pj-halloween :is(.dash-nav-guest-logo, .dash-nav-guest-logo-wrap--mobile, .dash-logo, .site-logo, .lp-footer-brandmark, .pj-logo-area) { position: relative; }
html.pj-halloween :is(.dash-nav-guest-logo-img, .dash-logo img, .site-logo, .lp-footer-brandmark img) {
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, .75)) drop-shadow(0 0 22px rgba(168, 85, 247, .35)) saturate(1.15);
}
html.pj-halloween :is(.dash-nav-guest-logo, .dash-logo)::before {
  content: ""; position: absolute; z-index: 2; width: 28px; height: 24px; top: -10px; left: -4px; pointer-events: none;
  transform: rotate(-22deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234c1d95'/%3E%3Cstop offset='1' stop-color='%23190a30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 2c4 6 6 14 9 24 3 9 7 14 13 17H12c6-4 9-10 11-19 2-9 3-17 7-22z' fill='url(%23h)' stroke='%23a855f7' stroke-width='1.5'/%3E%3Cellipse cx='32' cy='46' rx='30' ry='8' fill='%23190a30' stroke='%23a855f7' stroke-width='1.5'/%3E%3Cpath d='M14 41h36l-1 5H15z' fill='%23ff8a1f'/%3E%3Crect x='28' y='40' width='8' height='7' rx='1' fill='none' stroke='%23ffc15e' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
/* ---------- 5. BUTTONS ---------- */
html.pj-halloween :is(.dash-btn-signup, .dash-spin-cta, .dash-final-cta-btn, .dash-priority-lobby-signup,
  .lp-pay-btn--deposit, .dash-platforms-toggle, .hw-btn, .dash-action-btn--buy, .dash-btn-buy,
  .dash-menu-drawer-cta-signup, .pj-btn-login, [class*="-cta-btn"], [class*="-btn--primary"], button[type="submit"]) {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--hw-molten) !important;
  background-size: 160% 160% !important;
  color: #fff !important; -webkit-text-fill-color: #fff;
  border: 1px solid rgba(255, 193, 94, .55) !important;
  text-shadow: 0 1px 0 rgba(90, 20, 0, .7);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, .35), 0 6px 22px rgba(255, 77, 10, .45), inset 0 1px 0 rgba(255, 240, 200, .5) !important;
  transition: transform .18s ease;
}
html.pj-halloween :is(.dash-btn-signup, .dash-spin-cta, .dash-final-cta-btn, .dash-priority-lobby-signup,
  .lp-pay-btn--deposit, .hw-btn, .dash-action-btn--buy, .pj-btn-login, [class*="-cta-btn"], button[type="submit"])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) {
  html.pj-halloween :is(.dash-btn-signup, .dash-spin-cta, .dash-final-cta-btn, .dash-priority-lobby-signup,
    .lp-pay-btn--deposit, .hw-btn, .dash-action-btn--buy, .pj-btn-login, [class*="-cta-btn"], button[type="submit"]):hover::after {
    transform: translateX(120%); transition: transform .7s ease-in-out;
  }
}
@media (hover: hover) and (pointer: fine) {
  html.pj-halloween :is(.dash-btn-signup, .dash-spin-cta, .dash-final-cta-btn, .dash-priority-lobby-signup,
    .lp-pay-btn--deposit, .hw-btn, .dash-action-btn--buy, [class*="-cta-btn"], button[type="submit"]):hover {
    transform: translateY(-2px) scale(1.02); background-position: 100% 0 !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, .6), 0 10px 34px rgba(255, 77, 10, .65), 0 0 40px rgba(168, 85, 247, .45) !important;
  }
}
html.pj-halloween :is(.dash-btn-login, .dash-nav-guest-login, .lp-pay-btn--withdrawal, .hw-btn-ghost,
  .dash-action-btn--withdraw, .dash-btn-withdraw, [class*="-btn--secondary"]) {
  background: rgba(93, 255, 158, .07) !important;
  color: var(--hw-slime) !important; -webkit-text-fill-color: var(--hw-slime);
  border: 1.5px solid rgba(93, 255, 158, .7) !important;
  box-shadow: 0 0 14px rgba(93, 255, 158, .25), inset 0 0 12px rgba(93, 255, 158, .1) !important;
  text-shadow: 0 0 8px rgba(93, 255, 158, .6);
  transition: transform .2s ease;
}
html.pj-halloween .dash-action-btn--withdraw .dash-action-btn-label,
html.pj-halloween .dash-action-btn--withdraw .dash-action-btn-sub {
  background: none !important;
  -webkit-text-fill-color: var(--hw-slime) !important;
  color: var(--hw-slime) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.pj-halloween :is(.dash-btn-login, .dash-nav-guest-login, .lp-pay-btn--withdrawal, .hw-btn-ghost, .dash-action-btn--withdraw):hover {
    background: rgba(93, 255, 158, .16) !important; box-shadow: 0 0 24px rgba(93, 255, 158, .5) !important;
  }
}
html.pj-halloween :is(.lp-pay-btn--link2play, .hw-btn-witch) {
  background: linear-gradient(135deg, #7c3aed, #a855f7 60%, #d946ef) !important; color: #fff !important;
  border: 1px solid rgba(216, 180, 254, .55) !important; box-shadow: 0 6px 22px rgba(124, 58, 237, .5) !important;
}

/* ---------- 6. SIDEBAR + MOBILE MENU ---------- */
html.pj-halloween .dash-side,
html.pj-halloween .dash-menu-drawer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23e9ddff' stroke-opacity='.55' stroke-width='.7'%3E%3Cpath d='M100 0L0 30M100 0L20 80M100 0L70 100M100 0L0 60M100 0L40 100'/%3E%3Cpath d='M78 6Q82 18 94 22M56 13Q64 36 87 44M34 20Q46 54 80 66M12 26Q28 72 74 88'/%3E%3C/svg%3E") top right / 110px no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, .25), transparent 60%),
    linear-gradient(180deg, rgba(26, 12, 44, .97), rgba(12, 5, 22, .97)) !important;
  border-right: 1px solid rgba(168, 85, 247, .25) !important;
  box-shadow: inset -1px 0 0 rgba(255, 138, 31, .08), 8px 0 30px rgba(0, 0, 0, .35);
}
html.pj-halloween .dash-menu-drawer-backdrop { background: rgba(4, 1, 10, .72) !important; }
html.pj-halloween :is(.dash-side-group-label, .dash-side-divider) { color: #b58cff !important; letter-spacing: 2.5px; }
html.pj-halloween .dash-side-divider { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .5), transparent) !important; }
html.pj-halloween .dash-side-item {
  border-radius: 14px; transition: transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  html.pj-halloween .dash-side-item:hover {
    background: linear-gradient(90deg, rgba(255, 138, 31, .16), rgba(168, 85, 247, .12) 70%, transparent) !important;
    transform: translateX(3px);
    box-shadow: inset 3px 0 0 var(--hw-pumpkin);
  }
  html.pj-halloween .dash-side-item:hover .dash-side-icon { transform: rotate(-8deg) scale(1.12); }
}
html.pj-halloween :is(.dash-side-item.active, .dash-side-item[aria-current="page"], .dash-side-item.is-active) {
  background: linear-gradient(90deg, rgba(255, 138, 31, .26), rgba(168, 85, 247, .14) 80%) !important;
  box-shadow: inset 3px 0 0 var(--hw-pumpkin), 0 0 22px rgba(255, 106, 0, .18);
}
html.pj-halloween .dash-side-icon {
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 4px 14px rgba(0, 0, 0, .45), 0 0 14px var(--hw-icon-glow, rgba(255, 138, 31, .4));
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
html.pj-halloween .dash-side-item--gold   .dash-side-icon { background: linear-gradient(135deg, #ffc15e, #ff6a00 70%, #c2410c) !important; --hw-icon-glow: rgba(255, 122, 24, .55); }
html.pj-halloween .dash-side-item--purple .dash-side-icon { background: linear-gradient(135deg, #d8b4fe, #a855f7 50%, #5b21b6) !important; --hw-icon-glow: rgba(168, 85, 247, .55); }
html.pj-halloween .dash-side-item--teal   .dash-side-icon { background: linear-gradient(135deg, #ccfbf1, #7dffd4 45%, #0f766e) !important; --hw-icon-glow: rgba(125, 255, 212, .5); }
html.pj-halloween .dash-side-item--fire   .dash-side-icon { background: linear-gradient(135deg, #fde68a, #ff4d0a 55%, #9a1b06) !important; --hw-icon-glow: rgba(255, 77, 10, .55); }
html.pj-halloween .dash-side-item--green  .dash-side-icon { background: linear-gradient(135deg, #d9ffe8, #5dff9e 45%, #15803d) !important; --hw-icon-glow: rgba(93, 255, 158, .5); }
html.pj-halloween .dash-side-item--red    .dash-side-icon { background: linear-gradient(135deg, #fecdd3, #ff2d55 50%, #7f1d1d) !important; --hw-icon-glow: rgba(255, 45, 85, .5); }

/* ---------- 7. CARDS ---------- */
html.pj-halloween :is(
  .dash-platform-tile, .dash-reason-card, .dash-payments-card, .dash-spin-card, .dash-faq-item, .dash-panel,
  .dash-testimonial-stat, .bgm-modal, .hw-card, .pj-card,
  [class*="dash-"]:is([class$="-card"], [class*="-card "]),
  [class*="dash-"]:is([class$="-tile"], [class*="-tile "]),
  [class*="dash-"]:is([class$="-panel"], [class*="-panel "]),
  [class*="pj-"]:is([class$="-card"], [class*="-card "])
) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23e9ddff' stroke-opacity='.45' stroke-width='.8'%3E%3Cpath d='M0 0L100 30M0 0L80 80M0 0L30 100M0 0L100 60M0 0L60 100'/%3E%3Cpath d='M22 6Q18 18 6 22M44 13Q36 36 13 44M66 20Q54 54 20 66'/%3E%3C/svg%3E") top left / 54px no-repeat,
    var(--hw-card-bg) !important;
  border: 1px solid var(--hw-line) !important;
  border-radius: var(--hw-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 40px rgba(124, 58, 237, .08), 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
}
html.pj-halloween .dash-platform-tile {
  position: relative;
}
html.pj-halloween .dash-platform-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 16px #ff8800, 0 18px 40px rgba(255, 77, 10, .28);
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  html.pj-halloween :is(.dash-platform-tile, .dash-reason-card, .dash-payments-card, .hw-card,
    [class*="dash-"]:is([class$="-card"], [class*="-card "]), [class*="dash-"]:is([class$="-tile"], [class*="-tile "])):not(.dash-game-card):not(.dash-locked-card):hover {
    transform: translateY(-6px);
    border-color: var(--hw-line-hot) !important;
  }
  html.pj-halloween .dash-platform-tile:hover::after { opacity: 1; }
  html.pj-halloween .dash-platform-tile:hover .dash-platform-img { transform: scale(1.08) rotate(-1deg); }
}
html.pj-halloween :is(.dash-game-card, .dash-locked-card, .dash-game-wrap) {
  transform: none !important;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
html.pj-halloween :is(.dash-platform-art, .dash-platform-img) { position: relative; border-radius: 14px; overflow: hidden; }
html.pj-halloween .dash-platform-img { transition: transform .5s ease; filter: saturate(1.1) contrast(1.05); }
html.pj-halloween .dash-platform-art { box-shadow: inset 0 -40px 40px -10px rgba(13, 6, 24, .9), inset 0 0 0 1px rgba(168, 85, 247, .25); }
html.pj-halloween .dash-platform-name { color: var(--hw-bone) !important; text-shadow: 0 0 10px rgba(255, 138, 31, .35); }
html.pj-halloween .dash-platform-badge--new,
html.pj-halloween .hw-badge {
  background: linear-gradient(180deg, #a5ffc9, var(--hw-slime) 60%, #16a34a) !important; color: #052e14 !important;
  border-radius: 999px; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 0 14px rgba(93, 255, 158, .7);
}

html.pj-halloween .dash-spin-deco-wheel {
  filter: hue-rotate(-38deg) saturate(1.6) drop-shadow(0 0 26px rgba(255, 106, 0, .55)) drop-shadow(0 0 50px rgba(168, 85, 247, .35));
  animation: hw-wheel-idle 14s linear infinite;
}
html.pj-halloween .dash-spin-deco-hub {
  background: radial-gradient(circle at 40% 35%, #ffd08a, #ff8a1f 45%, #b8380a 80%) !important;
  box-shadow: 0 0 24px rgba(255, 122, 24, .85), inset 0 -6px 12px rgba(80, 20, 0, .6) !important;
}
@keyframes hw-wheel-idle { to { transform: rotate(360deg); } }

html.pj-halloween .dash-faq-head { color: var(--hw-bone) !important; }
html.pj-halloween .dash-faq-item:hover { border-color: var(--hw-line-hot) !important; }
html.pj-halloween .dash-faq-answer { color: var(--hw-mist) !important; }

/* ---------- 8. BANNERS / HERO ---------- */
html.pj-halloween :is(.dash-final-cta, .lp-pay-bar--highlight, [class*="dash-promo"][class*="banner"]) {
  position: relative;
  border: 1px solid rgba(168, 85, 247, .4) !important;
  box-shadow: 0 0 0 1px rgba(255, 138, 31, .15), 0 20px 60px rgba(124, 58, 237, .3), inset 0 0 80px rgba(255, 77, 10, .08) !important;
}
html.pj-halloween .dash-final-cta {
  background:
    radial-gradient(circle at 15% 120%, rgba(255, 106, 0, .35), transparent 50%),
    radial-gradient(circle at 90% -20%, rgba(168, 85, 247, .45), transparent 55%),
    linear-gradient(135deg, #2a0f4a, #3b0f3a 55%, #1a0a2a) !important;
}
html.pj-halloween .dash-welcome-slideshow-dot::after { background: rgba(196, 160, 255, .45); }
html.pj-halloween .dash-welcome-slideshow-dot--active::after { background: var(--hw-pumpkin); box-shadow: 0 0 8px rgba(255, 138, 31, .8); }
html.pj-halloween .lp-ticker-wrap {
  background: repeating-linear-gradient(135deg, rgba(31, 11, 51, .92) 0 18px, rgba(42, 15, 69, .92) 18px 36px) !important;
  border-color: rgba(255, 138, 31, .45) !important;
}

/* ---------- 9. FORMS ---------- */
html.pj-halloween :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background: rgba(11, 5, 20, .85) !important;
  border: 1px solid rgba(168, 85, 247, .32) !important;
  color: var(--hw-bone) !important;
  border-radius: 12px;
}
html.pj-halloween :is(input, select, textarea)::placeholder { color: #7f6aa3 !important; }
html.pj-halloween :is(input, select, textarea):focus {
  outline: none !important;
  border-color: var(--hw-pumpkin) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 31, .22), 0 0 22px rgba(255, 106, 0, .25) !important;
}
html.pj-halloween :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--hw-pumpkin); }

/* ---------- 10. MODALS / TOASTS ---------- */
html.pj-halloween :is([role="dialog"], .bgm-modal, [class*="-modal"]:not([class*="-modal-open"]):not(body):not(html)) {
  border-color: rgba(168, 85, 247, .45) !important;
}
html.pj-halloween .bgm-overlay { background: radial-gradient(circle at 50% 30%, rgba(60, 20, 100, .55), rgba(4, 1, 10, .88)) !important; }

/* Toasts: only the outer .dash-toast is a card; inner parts stay flat. */
html.pj-halloween .dash-toast {
  --hw-toast: var(--hw-pumpkin);
  --hw-toast-glow: rgba(255, 138, 31, .28);
  padding: 14px 14px 16px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--hw-toast-glow), transparent 55%),
    linear-gradient(150deg, rgba(42, 21, 68, .97) 0%, rgba(22, 10, 38, .98) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--hw-toast) 55%, transparent) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 22px var(--hw-toast-glow) !important;
  color: var(--hw-bone);
}
html.pj-halloween .dash-toast::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--hw-toast); box-shadow: 0 0 10px var(--hw-toast);
}
html.pj-halloween .dash-toast-success { --hw-toast: var(--hw-slime); --hw-toast-glow: rgba(93, 255, 158, .18); }
html.pj-halloween .dash-toast-error   { --hw-toast: #ff5a3c;          --hw-toast-glow: rgba(255, 77, 10, .24); }
html.pj-halloween .dash-toast-info    { --hw-toast: var(--hw-witch);  --hw-toast-glow: rgba(168, 85, 247, .26); }
html.pj-halloween .dash-toast-icon {
  color: #1a0700 !important;
  background: radial-gradient(circle at 35% 30%, #fff1d6, var(--hw-toast) 60%) !important;
  box-shadow: 0 0 14px var(--hw-toast-glow), inset 0 -3px 6px rgba(0, 0, 0, .25) !important;
}
html.pj-halloween .dash-toast-info .dash-toast-icon,
html.pj-halloween .dash-toast-error .dash-toast-icon { color: #fff !important; }
html.pj-halloween .dash-toast-type { color: var(--hw-toast) !important; letter-spacing: .14em; }
html.pj-halloween .dash-toast-message { color: var(--hw-bone) !important; }
html.pj-halloween .dash-toast-action { color: var(--hw-pumpkin2) !important; }
html.pj-halloween .dash-toast-progress { background: linear-gradient(90deg, var(--hw-toast), var(--hw-pumpkin2)) !important; height: 2px; }
html.pj-halloween .dash-toast-close {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(168, 85, 247, .3) !important;
  color: var(--hw-mist) !important;
}
html.pj-halloween .dash-toast-close:hover {
  border-color: var(--hw-toast) !important; color: var(--hw-bone) !important; background: rgba(255, 255, 255, .1) !important;
}
html.pj-halloween .dash-skeleton {
  background: linear-gradient(90deg, #1a0c2c 0%, #2e1650 50%, #1a0c2c 100%) !important; background-size: 200% 100% !important;
}

/* ---------- 11. MOBILE BOTTOM NAV ---------- */
html.pj-halloween .dash-bottom-wrap,
html.pj-halloween .dash-bottom-wrap::after {
  background: linear-gradient(180deg, rgba(26, 12, 44, .97), rgba(8, 3, 16, .98)) !important;
}
html.pj-halloween .dash-buy-row {
  background: linear-gradient(180deg, rgba(26, 12, 44, .96), rgba(8, 3, 16, .98)) !important;
  border-top: 1px solid rgba(168, 85, 247, .4) !important;
  box-shadow: 0 -8px 30px rgba(124, 58, 237, .25);
}
html.pj-halloween .dash-bottom-nav {
  background: linear-gradient(180deg, rgba(26, 12, 44, .97), rgba(8, 3, 16, .98)) !important;
  border-top: 1px solid rgba(168, 85, 247, .4) !important;
  box-shadow: 0 -8px 30px rgba(124, 58, 237, .3);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.pj-halloween .dash-bottom-nav :is(.active, [aria-current="page"]),
html.pj-halloween .dash-bottom-nav :is(.active, [aria-current="page"]) .dash-nav-label {
  color: var(--hw-pumpkin) !important;
  text-shadow: 0 0 10px rgba(255, 138, 31, .7);
}

/* ---------- 12. FOOTER ---------- */
/* Tombstone skyline sits above the footer as an overlay: it must not change footer height (CLS). */
html.pj-halloween :is(.lp-footer-standalone, .dash-footer) {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 4, 18, .92) 0, #08030f 100%) !important;
  border-top: 0 !important;
}
html.pj-halloween :is(.lp-footer-standalone, .dash-footer)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' fill='%23170a26'%3E%3Cpath d='M0 70V58h400v12z'/%3E%3Cpath d='M18 58V36a11 11 0 0122 0v22zM70 58V42a8 8 0 0116 0v16zM150 58V30a14 14 0 0128 0v28zM232 58V40a9 9 0 0118 0v18zM300 58V34a12 12 0 0124 0v24zM366 58V44a7 7 0 0114 0v14z'/%3E%3Cpath d='M112 58V34h4v-8h5v8h4v5h-4v19zM268 58V38h3v-7h4v7h3v4h-3v16z'/%3E%3Cpath d='M196 58c0-10-2-18-6-26l-8-6 9 3 3-9 2 10 6-7-4 11c3 7 4 15 4 24z'/%3E%3Cg stroke='%23170a26' stroke-width='2'%3E%3Cpath d='M330 58V44M340 58V44M350 58V44M326 48h28'/%3E%3C/g%3E%3C/svg%3E") bottom center / 400px 56px repeat-x;
}
html.pj-halloween :is(.lp-footer-col-head) { color: var(--hw-pumpkin) !important; letter-spacing: 2.5px; }
html.pj-halloween :is(.lp-footer-col-link, .lp-footer-root a) { transition: opacity .2s ease; }
html.pj-halloween :is(.lp-footer-col-link, .lp-footer-root a):hover { color: var(--hw-pumpkin2) !important; text-shadow: 0 0 10px rgba(255, 138, 31, .6); }
html.pj-halloween .lp-footer-rule { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .5), transparent) !important; }

/* ---------- 13. FX LAYERS ---------- */
#hw-sky, #hw-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* Sky (moon, castle, fog) stays behind page chrome. Only #hw-cast flies over it. */
#hw-sky { z-index: 0; }
#hw-fx  { z-index: 6; top: var(--dash-nav-h, 56px); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
#hw-sky .hw-moon { position: absolute; top: 7vh; right: 7vw; width: clamp(72px, 12vw, 180px); aspect-ratio: 1; filter: drop-shadow(0 0 36px rgba(255, 250, 235, .38)); z-index: 0; }
#hw-sky .hw-cloud { position: absolute; height: 60px; opacity: .55; animation: hw-cloud linear infinite; }
@keyframes hw-cloud { from { transform: translateX(110vw); } to { transform: translateX(-40vw); } }
#hw-sky .hw-skyline { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: auto; aspect-ratio: 1440 / 230; }
#hw-sky .hw-fog { position: absolute; left: -50%; bottom: -4vh; width: 200%; height: 22vh; opacity: .55;
  background:
    radial-gradient(ellipse 20% 50% at 15% 60%, rgba(200, 180, 255, .22), transparent),
    radial-gradient(ellipse 25% 60% at 45% 70%, rgba(200, 180, 255, .18), transparent),
    radial-gradient(ellipse 22% 55% at 75% 55%, rgba(200, 180, 255, .2), transparent),
    radial-gradient(ellipse 18% 50% at 95% 65%, rgba(200, 180, 255, .16), transparent);
  animation: hw-fog 38s ease-in-out infinite alternate; }
#hw-sky .hw-fog.b { animation-duration: 52s; animation-direction: alternate-reverse; opacity: .4; bottom: -8vh; }
@keyframes hw-fog { to { transform: translateX(22%); } }
#hw-sky .hw-stars { position: absolute; inset: 0; animation: hw-twinkle 3s ease-in-out infinite; }
#hw-sky .hw-stars.b { animation-delay: -1.5s; }
#hw-sky .hw-star { position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: #fff; border-radius: 50%; will-change: transform; }
@keyframes hw-twinkle { 50% { opacity: .2; } }

#hw-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#hw-fx .hw-flash { position: absolute; inset: 0; background: radial-gradient(circle at 70% 10%, rgba(230, 210, 255, .55), rgba(168, 85, 247, .12) 60%, transparent); opacity: 0; }
#hw-fx .hw-flash.go { animation: hw-flash 1.1s ease-out; }
@keyframes hw-flash { 0% { opacity: 0; } 6% { opacity: .9; } 12% { opacity: .1; } 20% { opacity: .7; } 100% { opacity: 0; } }
#hw-fx .hw-torch { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 60, .14), rgba(168, 85, 247, .06) 40%, transparent 70%); mix-blend-mode: screen;
  transition: opacity .4s; will-change: transform; }
#hw-fx .hw-burst { position: absolute; font-size: 20px; will-change: transform, opacity; pointer-events: none; }

/* Illustrated cast: witch, bats, ghosts, falling pumpkins, spider */
#hw-cast { position: fixed; left: 0; right: 0; top: var(--dash-nav-h, 56px); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 6; pointer-events: none; overflow: hidden; contain: layout paint; }
#hw-cast .hw-a { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
#hw-cast .hw-a img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

#hw-cast .hw-a-witch { width: 150px; filter: drop-shadow(0 0 14px rgba(255, 140, 40, .45)); }
#hw-cast .hw-a-witch.is-a { animation: hw-a-witch-a 32s linear infinite; }
#hw-cast .hw-a-witch.is-a img { animation: hw-a-bob 2.4s ease-in-out infinite; }
#hw-cast .hw-a-witch.is-b { width: 96px; animation: hw-a-witch-b 40s linear -18s infinite; filter: drop-shadow(0 0 10px rgba(168, 85, 247, .5)); }
#hw-cast .hw-a-witch.is-b img { transform: scaleX(-1); animation: hw-a-bob-flip 2.8s ease-in-out infinite; }
@keyframes hw-a-witch-a {
  0% { transform: translate(-20vw, 16vh) rotate(-6deg); opacity: 0; } 2% { opacity: .95; }
  10% { transform: translate(12vw, 8vh) rotate(-2deg); } 20% { transform: translate(38vw, 20vh) rotate(4deg); }
  30% { transform: translate(64vw, 10vh) rotate(-4deg); } 40% { transform: translate(92vw, 22vh) rotate(3deg); }
  44% { transform: translate(112vw, 14vh); opacity: .95; } 45%, 100% { transform: translate(112vw, 14vh); opacity: 0; } }
@keyframes hw-a-witch-b {
  0% { transform: translate(110vw, 62vh); opacity: 0; } 3% { opacity: .75; }
  14% { transform: translate(70vw, 52vh); } 26% { transform: translate(36vw, 66vh); } 38% { transform: translate(4vw, 54vh); }
  42% { transform: translate(-18vw, 60vh); opacity: .75; } 43%, 100% { transform: translate(-18vw, 60vh); opacity: 0; } }
@keyframes hw-a-bob { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes hw-a-bob-flip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-8px); } }

#hw-cast .hw-a-bat { width: 70px; filter: drop-shadow(0 0 8px rgba(168, 85, 247, .55)); }
#hw-cast .hw-a-bat img { transform-origin: 50% 40%; animation: hw-a-flap .32s ease-in-out infinite alternate; }
#hw-cast .hw-a-bat.is-a { animation: hw-a-bat-a 18s ease-in-out infinite; }
#hw-cast .hw-a-bat.is-b { width: 52px; animation: hw-a-bat-b 22s ease-in-out -7s infinite; }
#hw-cast .hw-a-bat.is-c { width: 40px; animation: hw-a-bat-a 26s ease-in-out -15s infinite; filter: drop-shadow(0 0 6px rgba(168, 85, 247, .5)) blur(.6px); }
@keyframes hw-a-flap { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(.62) scaleX(1.06); } }
@keyframes hw-a-bat-a {
  0% { transform: translate(105vw, 30vh); opacity: 0; } 4% { opacity: .9; }
  15% { transform: translate(78vw, 12vh); } 25% { transform: translate(55vw, 34vh); } 35% { transform: translate(30vw, 18vh); }
  46% { transform: translate(-12vw, 28vh); opacity: .9; } 47%, 100% { transform: translate(-12vw, 28vh); opacity: 0; } }
@keyframes hw-a-bat-b {
  0% { transform: translate(-10vw, 46vh); opacity: 0; } 4% { opacity: .85; }
  14% { transform: translate(18vw, 30vh); } 26% { transform: translate(44vw, 48vh); } 38% { transform: translate(72vw, 36vh); }
  50% { transform: translate(108vw, 44vh); opacity: .85; } 51%, 100% { transform: translate(108vw, 44vh); opacity: 0; } }

#hw-cast .hw-a-ghost { width: 72px; filter: drop-shadow(0 0 14px rgba(196, 181, 253, .55)); }
#hw-cast .hw-a-ghost img { animation: hw-a-float 3.2s ease-in-out infinite; }
#hw-cast .hw-a-ghost.is-a { animation: hw-a-ghost-a 46s linear infinite; }
#hw-cast .hw-a-ghost.is-b { width: 54px; animation: hw-a-ghost-b 54s linear -24s infinite; }
@keyframes hw-a-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg) scale(1.03); } }
@keyframes hw-a-ghost-a {
  0% { transform: translate(-12vw, 72vh); opacity: 0; } 4% { opacity: .8; }
  20% { transform: translate(20vw, 60vh); } 40% { transform: translate(48vw, 76vh); } 60% { transform: translate(78vw, 64vh); }
  76% { transform: translate(110vw, 70vh); opacity: .8; } 77%, 100% { transform: translate(110vw, 70vh); opacity: 0; } }
@keyframes hw-a-ghost-b {
  0% { transform: translate(104vw, 40vh); opacity: 0; } 5% { opacity: .7; }
  25% { transform: translate(70vw, 48vh); } 45% { transform: translate(40vw, 36vh); } 65% { transform: translate(10vw, 46vh); }
  78% { transform: translate(-12vw, 40vh); opacity: .7; } 79%, 100% { transform: translate(-12vw, 40vh); opacity: 0; } }

#hw-cast .hw-a-pk { width: 48px; filter: drop-shadow(0 0 10px rgba(255, 140, 40, .6)); }
#hw-cast .hw-a-pk img { animation: hw-a-spin 6s linear infinite; }
#hw-cast .hw-a-pk.is-a { --x: 18vw; --dx: 6vw; animation: hw-a-fall 24s cubic-bezier(.45, 0, .75, 1) -2s infinite; }
#hw-cast .hw-a-pk.is-b { --x: 66vw; --dx: -5vw; width: 38px; animation: hw-a-fall 30s cubic-bezier(.45, 0, .75, 1) -14s infinite; }
#hw-cast .hw-a-pk.is-c { --x: 86vw; --dx: -8vw; width: 30px; animation: hw-a-fall 36s cubic-bezier(.45, 0, .75, 1) -25s infinite; }
@keyframes hw-a-spin { to { transform: rotate(360deg); } }
@keyframes hw-a-fall {
  0% { transform: translate(var(--x), -10vh); opacity: 0; } 2% { opacity: .85; }
  30% { transform: translate(calc(var(--x) + var(--dx)), 110vh); opacity: .85; }
  31%, 100% { transform: translate(calc(var(--x) + var(--dx)), 110vh); opacity: 0; } }

#hw-cast .hw-a-spider { width: 60px; left: 72vw; top: var(--dash-nav-h, 56px); opacity: .95; transform: translateY(-120%);
  animation: hw-a-spider 20s ease-in-out -4s infinite; }
#hw-cast .hw-a-spider img { position: relative; animation: hw-a-wiggle 1.6s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 140, 40, .35)); }
#hw-cast .hw-a-thread { position: absolute; left: 50%; bottom: 70%; width: 1px; height: 60vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45)); }
@keyframes hw-a-spider { 0%, 62%, 100% { transform: translateY(-120%); } 14%, 48% { transform: translateY(24vh); } 22% { transform: translateY(20vh); } 32% { transform: translateY(26vh); } }
@keyframes hw-a-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

html.pj-tab-hidden #hw-cast .hw-a,
html.pj-tab-hidden #hw-cast .hw-a img { animation-play-state: paused; }

@media (max-width: 1023px) {
  #hw-cast { display: none !important; }
  #hw-cast .hw-a-witch { width: 110px; }
  #hw-cast .hw-a-witch.is-b { width: 72px; }
  #hw-cast .hw-a-bat { width: 54px; }
  #hw-cast .hw-a-bat.is-b { width: 42px; }
  #hw-cast .hw-a-ghost { width: 56px; }
  #hw-cast .hw-a-pk.is-c { display: none; }
}
@media (max-width: 767px) {
  #hw-cast .hw-a-witch { width: 84px; }
  #hw-cast .hw-a-bat { width: 44px; }
  #hw-cast .hw-a-bat.is-b { width: 38px; }
  #hw-cast .hw-a-ghost { width: 46px; }
  #hw-cast .hw-a-witch.is-b,
  #hw-cast .hw-a-bat.is-c,
  #hw-cast .hw-a-ghost.is-b { display: none; }
  #hw-cast .hw-a-pk { width: 34px; }
  #hw-cast .hw-a-pk.is-b { width: 28px; }
  #hw-cast .hw-a-spider { width: 42px; left: 80vw; }
}

@keyframes hw-pk-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }

#hw-loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; gap: 10px; align-content: center;
  background: radial-gradient(circle at 50% 45%, #2a0f4a, #07020e 70%); transition: opacity .6s ease, visibility .6s; }
#hw-loader.out { opacity: 0; visibility: hidden; }
#hw-loader svg { width: 120px; animation: hw-pk-wobble 1.2s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(255, 106, 0, .8)); }
#hw-loader span { font: 400 26px Impact, cursive; letter-spacing: 3px; color: #ff8a1f; text-shadow: 0 0 16px rgba(255, 106, 0, .8); }
.hw-face { animation: hw-flicker 1.6s infinite; }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .75; } 44% { opacity: 1; } 70% { opacity: .85; } 72% { opacity: .55; } 74% { opacity: 1; } }

/* ---------- 14. AUTH (login / register sit outside .dash-root) ---------- */
html.pj-halloween .pj-bg-base {
  background:
    radial-gradient(ellipse 80% 65% at 8% 0%, rgba(124, 58, 237, .45), transparent 55%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(255, 77, 10, .28), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(42, 15, 74, .8), transparent 60%),
    #06020c !important;
}
html.pj-halloween .pj-page-title {
  background: linear-gradient(180deg, #fff1d6, var(--hw-pumpkin2) 45%, var(--hw-ember));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--hw-pumpkin);
}

/* ---------- 15. PHONES ---------- */
@media (max-width: 767px) {
  html.pj-halloween [class*="-kick"],
  html.pj-halloween .bgm-eyebrow {
    font-size: 1em;
    letter-spacing: 1px !important;
  }
  html.pj-halloween :is(.dash-nav-guest-logo, .dash-logo)::before {
    width: 20px; height: 16px; top: -2px; left: 0;
  }
  html.pj-halloween :is(.lp-footer-standalone, .dash-footer)::before {
    height: 42px; background-size: 320px 42px;
  }
  #hw-sky .hw-moon,
  #hw-sky .hw-skyline,
  #hw-sky .hw-fog { display: none; }
  #hw-cast { display: none !important; }
}

/* Game canvas and payment iframes stay clear of decorations. */
html.pj-halloween-quiet #hw-sky,
html.pj-halloween-quiet #hw-fx,
html.pj-halloween-quiet #hw-cast,
body.slot-game-play-active #hw-sky,
body.slot-game-play-active #hw-fx,
body.slot-game-play-active #hw-cast,
body.payment-iframe-active #hw-fx,
body.payment-iframe-active #hw-cast {
  display: none !important;
}

/* Phones already opt into cheap motion: keep the skin, drop looping paint. */
html.pj-cheap-motion.pj-halloween .dash-nav::after,
html.pj-cheap-motion.pj-halloween :is(
  .dash-nav-guest-logo-img, .dash-logo img, .site-logo, .lp-footer-brandmark img,
  .dash-spin-deco-wheel, .dash-platform-badge--new, .hw-badge,
  .dash-btn-signup, .dash-spin-cta, .dash-final-cta-btn, .dash-priority-lobby-signup,
  .lp-pay-btn--deposit, .hw-btn, .dash-action-btn--buy, .pj-btn-login, button[type="submit"]
),
html.pj-cheap-motion.pj-halloween :is(
  .dash-btn-signup, .dash-spin-cta, .dash-final-cta-btn, .pj-btn-login, button[type="submit"]
)::after,
html.pj-cheap-motion #hw-sky .hw-cloud,
html.pj-cheap-motion #hw-sky .hw-fog,
html.pj-cheap-motion #hw-sky .hw-stars,
html.pj-cheap-motion #hw-sky .hw-moon {
  animation: none !important;
}
html.pj-cheap-motion #hw-cast { display: none !important; }
html.pj-cheap-motion #hw-sky .hw-moon,
html.pj-cheap-motion.pj-halloween .dash-nav::after,
html.pj-cheap-motion.pj-halloween :is(.dash-nav-guest-logo-img, .dash-logo img, .site-logo, .lp-footer-brandmark img),
html.pj-cheap-motion.pj-halloween .dash-home-h1,
html.pj-cheap-motion.pj-halloween :is(h1, h2)[class*="-title"] {
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.pj-halloween *, html.pj-halloween *::before, html.pj-halloween *::after { animation: none !important; transition: none !important; }
  #hw-fx, #hw-cast { display: none; }
}