/* New-UI homepage: Halloween theme ("FUN Night"), seasonal and UI only.

   Loaded by templates/new_ui_home.html after new_ui_home.css, only while
   `halloween_theme` is true (seasonal_theme.py decides). Nothing in
   new_ui_home.css changes for it, so with the theme off the page is exactly
   as before. Art: assets/new-ui/halloween/ (WebP conversions of the hand-off).

   The rules below are the hand-off's HALLOWEEN THEME block, verbatim, with the
   image paths pointed at our WebP copies and the preview-only .demo-state rule
   dropped. One deliberate change, so the theme cannot alter how any popup
   stacks: the wrapper (.app) gets no z-index, and the embers sit at z-index:-1
   instead (see the .app rule). The inner pages get the menu/header/footer part
   of it through new_ui_layout_halloween.css. */
/* =========================================================
   HALLOWEEN THEME — "FUN Night"  (Oct 2026, seasonal)
   Dark skin over the final homepage. Layout, copy and behaviour are unchanged;
   everything below only re-colours. Developer: ship this block (and the
   assets/new-ui/halloween/ art) for the Halloween window, drop it afterwards.
   Palette: Night #140C2A · Crypt #1F1440 · Fog #33265F · Bone #F3EEFF
            Pumpkin #FF7A1A · Brand pink #EE1B63 (unchanged) · Candle gold #FFC94D
   ========================================================= */
:root{
  --night:#140c2a;  --crypt:#1f1440;  --crypt-2:#281a4f;  --fog:#33265f;
  --bone:#f3eeff;   --pumpkin:#ff7a1a; --pumpkin-2:#ffa34d; --candle:#ffc94d;
  --pumpkin-glow:rgba(255,122,26,.42);

  --bg:var(--night);
  --surface:var(--crypt);
  --surface-2:var(--crypt-2);
  --line:var(--fog);
  --text:var(--bone);
  --text-2:#c9bfe6;
  --muted:#9d90c4;
  --navy:#170d33; --navy-2:#22164a; --navy-3:#2e1e5e;
  --pink-100:rgba(238,27,99,.17);
  --green-100:rgba(18,179,124,.18);
  --gold-2:var(--candle);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 6px 18px -8px rgba(0,0,0,.55);
  --shadow-md:0 14px 34px -12px rgba(0,0,0,.7);
  --shadow-lg:0 30px 60px -24px rgba(0,0,0,.85);
  color-scheme:dark;
}
/* moonlight: one soft pumpkin glow top-right and a purple haze, fixed behind everything */
body{background:
  radial-gradient(900px 520px at 88% -8%,rgba(255,122,26,.13),transparent 62%),
  radial-gradient(1100px 700px at 10% 110%,rgba(124,58,237,.14),transparent 60%),
  var(--night) fixed}
::selection{background:rgba(255,122,26,.45);color:#fff}

/* ---- shell ---- */
.sidebar{background:linear-gradient(180deg,#1c1239 0%,#170f30 100%);border-right-color:var(--fog)}
.header{background:rgba(20,12,42,.82)}
.chip.price i,.nav-price i{box-shadow:0 0 0 4px rgba(18,179,124,.25)}
.btn-light{background:var(--bone);color:#1a0f38}
.btn-light:hover{background:#fff}
.avatar{border-color:var(--fog)}
.user-menu .danger:hover{background:rgba(255,59,92,.14)}
.side-scroll{scrollbar-color:var(--fog) transparent}

/* ---- hero: navy surfaces become witching purple ---- */
.slide .shade{background:linear-gradient(90deg,rgba(20,12,42,.97) 0%,rgba(20,12,42,.93) 40%,rgba(20,12,42,.74) 70%,rgba(20,12,42,.5) 100%)}
.slide.flash .shade{background:linear-gradient(90deg,rgba(20,12,42,.97) 0%,rgba(20,12,42,.9) 44%,rgba(20,12,42,.55) 70%,rgba(20,12,42,.12) 100%)}
.slide.guest-promo{background:#1d1240}
.slide.guest-promo .shade{background:linear-gradient(90deg,rgba(24,14,52,.86) 0%,rgba(24,14,52,.7) 32%,rgba(24,14,52,.28) 52%,rgba(24,14,52,0) 68%)}
@media (max-width:720px){
  .slide.flash .shade{background:linear-gradient(90deg,rgba(20,12,42,.96) 0%,rgba(20,12,42,.86) 55%,rgba(20,12,42,.5) 100%)}
}
.fo-clock{background:rgba(20,12,42,.66)}
.slider-arrows button{background:rgba(20,12,42,.66)}
.fo-ticks i{background:#170d33}
.tickets{background:radial-gradient(120% 90% at 100% 0%,#3a1240 0%,#1d1144 46%,#120a2a 100%)}
.tk-scrim{background:linear-gradient(90deg,rgba(16,9,34,.94) 0%,rgba(16,9,34,.86) 32%,rgba(16,9,34,.62) 62%,rgba(16,9,34,.42) 88%,rgba(16,9,34,.38) 100%)}
.wof{background:radial-gradient(115% 95% at 8% 8%,#5a1f8f 0%,#3a1570 30%,#21104a 58%,#140a2c 100%)}
.wof .orbs::after{background:var(--pumpkin);opacity:.3}

/* the wheel in Halloween colours: pumpkin and deep purple segments, a candle-gold rim */
.wheel-face{background:conic-gradient(from -22.5deg,#ff7a1a 0 45deg,#3b1670 45deg 90deg,#ff7a1a 90deg 135deg,#3b1670 135deg 180deg,#ff7a1a 180deg 225deg,#3b1670 225deg 270deg,#ff7a1a 270deg 315deg,#3b1670 315deg 360deg)}
.wheel-face::after{background:conic-gradient(var(--candle),#ff7a1a,var(--candle),#ee1b63,var(--candle))}
.wheel-edge{background:#2a1246;box-shadow:0 0 0 4px #5a2a12}
.wheel-glow{background:radial-gradient(circle,rgba(255,122,26,.55),transparent 65%)}

/* ---- hero type: the highlighted word in each headline is set in Rubik Wet Paint,
   the dripping cut of the brand face Rubik. Only these few words; everything else stays Poppins. ---- */
.slide .gp-title em,
.slide :is(h1,h2) em,
.slide .fo-title em{font-family:"Rubik Wet Paint","Poppins",system-ui,sans-serif;font-weight:400;letter-spacing:.01em}
.slide .gp-title em{background:linear-gradient(100deg,#ffd27a 0%,#ff9a3c 55%,#ffc94d 100%);-webkit-background-clip:text;background-clip:text}
.slide :is(h1,h2) em{color:#ff9a3c}
.slide :is(h1,h2) em.orange{color:#ffb15c}
.slide .fo-title em{color:var(--candle)}

/* ---- bats (script: HALLOWEEN BATS): dark silhouettes with a moonlit pumpkin rim. The wings beat
   from the shoulders and the body bobs with each stroke; the script flies each bat on its own curve,
   bottom-left corner of the screen to top-right corner. ---- */
.hero{position:relative}
.bats{position:fixed;inset:0;z-index:56;overflow:hidden;pointer-events:none}   /* the whole screen, over everything */
.hw-bat{position:absolute;left:0;top:0;opacity:0;color:#1a0b2e;will-change:transform,opacity;
  filter:drop-shadow(0 0 1.4px rgba(255,190,120,1)) drop-shadow(0 0 12px rgba(255,122,26,var(--glow,.5)))}
.hw-bat svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.hw-bat .eye{fill:#ffc94d}
.hw-bat .bob{animation:hwbatbob var(--fl) ease-in-out var(--ph) infinite}
.hw-bat .w{transform-box:view-box;transform-origin:-4px -1px;animation:hwflap var(--fl) ease-in-out var(--ph) infinite}
@keyframes hwflap{0%,100%{transform:rotate(36deg) scale(.8,1)}45%{transform:rotate(-32deg) scale(1,.9)}}
@keyframes hwbatbob{0%,100%{transform:translateY(2px)}45%{transform:translateY(-3.5px)}}
@media (prefers-reduced-motion:reduce){.bats{display:none}}

/* ---- pumpkin is the Halloween accent: section marks, hover glows, eyebrows.
   Brand pink stays on every button, the active nav item and the live counters. ---- */
.section-head h2 .mark{background:linear-gradient(150deg,#ffb35c 0%,#ff7a1a 55%,#e85d0c 100%);color:#2b1300;
  box-shadow:0 6px 16px -6px var(--pumpkin-glow)}
.gcard:hover{box-shadow:0 26px 44px -18px rgba(255,122,26,.45),0 0 0 1.5px rgba(255,122,26,.6)}
.jcard:hover{box-shadow:0 28px 44px -20px rgba(255,122,26,.4),0 0 0 1.5px rgba(255,122,26,.5)}
.fgcard:hover,.fgcard:focus-visible{border-color:rgba(255,122,26,.6);box-shadow:0 22px 40px -20px rgba(255,122,26,.45)}
.bcard:hover,.bcard:focus-visible{border-color:rgba(255,122,26,.6);box-shadow:0 22px 40px -20px rgba(255,122,26,.4)}
.bcard:hover h3,.bcard:focus-visible h3{color:var(--pumpkin-2)}
.earn-card:hover{border-color:rgba(255,122,26,.5);box-shadow:0 22px 40px -24px rgba(255,122,26,.45),var(--shadow-sm)}
.exch-tile:hover,.exch-tile:focus-visible{border-color:rgba(255,122,26,.55)}
.join-eyebrow{color:var(--pumpkin-2)}
.jackpot{background:radial-gradient(60% 90% at 100% 110%,rgba(255,122,26,.2) 0%,transparent 60%),radial-gradient(85% 130% at 6% -12%,#4a1d8f 0%,#2a1163 34%,#151041 64%,#0e0a26 100%)}
/* pink text on the dark needs the lighter pink to read (#ee1b63 is 3.9:1 here, this is 5.3:1) */
.link{color:#ff5c93}
.chip.balance small{color:#ff5c93}

/* ---- surfaces that were white in the light theme ---- */
.tok-trigger{background:var(--crypt-2)}
/* NOT in the hand-off, which missed them: Live Bets' Players and Bets / min cards and the selected
   All bets / High rollers / Wins only tab are hard-coded #fff in new_ui_home.css, so the bone text
   the theme gives them read at 1.14:1. Same treatments the theme uses elsewhere: a raised night
   surface for a card on a card (.tok-trigger, .op-tier), a bone pill with dark ink for a selected
   state (.btn-light). The pink Wagered/min card keeps its own gradient (.kpi.pink outranks .kpi). */
.kpi{background:var(--crypt-2);border-color:var(--fog)}
.tabs button.is-active{background:var(--bone);color:#1a0f38}
.bcard .cat-tag{background:rgba(20,12,42,.9);color:#ff8fb6}
.pstat-grid{background:rgba(255,255,255,.03)}
.ec-media{background:radial-gradient(58% 60% at 50% 40%,rgba(255,122,26,.16) 0%,rgba(255,122,26,0) 72%),linear-gradient(180deg,#2c1b56 0%,#1f1440 100%)}
.ec-media::after{background:radial-gradient(closest-side,rgba(255,122,26,.34),rgba(255,122,26,0))}
.ec-media img{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
.app.is-guest .fun-band .exch{
  background:linear-gradient(100deg,#2b1442 0%,#1f1440 30%,#1f1440 72%,#2b1a2e 100%) padding-box,
             linear-gradient(100deg,rgba(238,27,99,.6) 0%,rgba(238,27,99,.25) 45%,rgba(255,122,26,.7) 100%) border-box;
  box-shadow:0 16px 32px -26px rgba(255,122,26,.5)}
.app.is-guest .fun-band .exch-tile{background:var(--crypt-2);box-shadow:none}
.app.is-guest .fun-band .exch-tile:hover,.app.is-guest .fun-band .exch-tile:focus-visible{border-color:rgba(255,122,26,.6);box-shadow:0 10px 20px -14px rgba(255,122,26,.55)}
.exch-go{stroke:var(--pumpkin-2)}
.app.is-guest .fun-band .dep-l .ic{color:#ff5c93}
.app.is-guest .fun-band .dep-offer,.op-tier.is-done .op-badge{color:#5ff0b0}
.join-err{color:#ff7a93}

/* ---- guest hero at tablet and phone widths: the indigo fades become the night purple ---- */
@media (max-width:1100px){
  .slide.guest-promo .shade{background:linear-gradient(90deg,rgba(24,14,52,.9) 0%,rgba(24,14,52,.8) 44%,rgba(24,14,52,.34) 70%,rgba(24,14,52,0) 88%)}
}
@media (max-width:720px){
  .slide.guest-promo{background:#1d1240}
  .slide.guest-promo .shade{background:linear-gradient(180deg,rgba(29,18,64,0) 0%,rgba(29,18,64,0) 36%,rgba(29,18,64,.72) 48%,rgba(26,16,58,.9) 60%,rgba(22,13,50,.95) 100%)}
}

/* ---- offer popups (Flash, Plinko): night surfaces, same ticket layout ---- */
.op-flash{--op-tint:rgba(238,27,99,.18);--op-ink:#ff8fb6}
.op-plinko{--op-tint:rgba(255,138,31,.18);--op-ink:#ffb15c}
.op-head::before{background:linear-gradient(90deg,rgba(20,12,42,.97) 0%,rgba(20,12,42,.9) 44%,rgba(20,12,42,.5) 72%,rgba(20,12,42,.2) 100%)}
@media (max-width:720px){.op-head::before{background:linear-gradient(180deg,rgba(20,12,42,.55) 0%,rgba(20,12,42,.88) 50%,rgba(20,12,42,.97) 100%)}}
.op-rail{background:rgba(255,255,255,.12)}
.op-rail .mk{background:var(--bone);border-color:#6f5fa8}
.op-tier{background:var(--crypt-2);box-shadow:none}
.op-tier::before,.op-tier::after{background:var(--surface)}
.op-stub{border-right-color:rgba(255,255,255,.16)}
.op-lbl,.op-wv i,.op-badge.lock{color:#a596cf}
.op-mini{background:rgba(255,255,255,.1)}
.op-mini i{background:rgba(255,255,255,.28)}
.op-foot{background:rgba(31,20,64,.94)}

/* ---- login popup ---- */
.au-gift{background:radial-gradient(130px 90px at 100% 0%,rgba(255,122,26,.16),transparent 70%),linear-gradient(180deg,#2c1950,#241645);border-color:rgba(238,27,99,.3)}

/* ---- deposit popup: it carries its own copy of the tokens, so re-point that copy ---- */
.dp-overlay{--pink-100:rgba(238,27,99,.17);--navy:#170d33;--navy-2:#22164a;--navy-3:#2e1e5e;--green-100:rgba(18,179,124,.18);--gold-2:#ffc94d;
  --surface:#1f1440;--surface-2:#281a4f;--line:#33265f;--text:#f3eeff;--text-2:#c9bfe6;--muted:#9d90c4;
  --shadow-lg:0 30px 60px -24px rgba(0,0,0,.85);background:rgba(10,6,22,.62)}
.dp-spins{background:radial-gradient(130px 90px at 100% 0%,rgba(255,122,26,.16),transparent 70%),linear-gradient(180deg,#2c1950 0%,#241645 100%)}
.dp-status.is-live,.dp-sub b,.dp-sub .ic{color:#5ff0b0}
.dp-qr{background:#fff;border-color:#fff}   /* a QR code must stay dark-on-white to scan */

/* =========================================================
   HALLOWEEN DECORATIONS — all aria-hidden and click-through (the parked ghost only
   reacts to hover). Art: assets/new-ui/halloween/deco-*.webp. Motion stops for reduced motion.
   ========================================================= */
.app{position:relative;overflow-x:clip}   /* clip: bats, fog and perched pumpkins never make the page scroll
   sideways (clip, not hidden, so sticky still works).
   NOT in the hand-off: it also set z-index:1 here, to keep the ember layer behind the page. That turns the
   wrapper into a stacking context, which changes how every popup inside it stacks against anything outside
   it -- on the inner pages it put the Bootstrap modals (/profile/ 2FA, /wof/ autoplay, /quiz/ bet) under the
   backdrop Bootstrap appends to <body>, so they could not be clicked. The embers go to z-index:-1 instead
   (.hw-embers below), which keeps them behind the page without the wrapper creating a layer. */

/* witch hat on the FUN cube (the logo file itself is unchanged) */
.brand,.hbrand{position:relative}
.hw-hat{position:absolute;left:11px;top:-16px;width:28px;height:28px;pointer-events:none;
  background:url("assets/new-ui/halloween/deco-witch-hat.webp") center/contain no-repeat;transform:rotate(-14deg);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.app.is-collapsed .brand .hw-hat{left:19px;top:-14px;width:23px;height:23px}
@media (min-width:721px) and (max-width:1240px){.app:not(.is-expanded) .brand .hw-hat{left:19px;top:-14px;width:23px;height:23px}}
.hbrand .hw-hat{left:4px;top:-14px;width:17px;height:17px}

/* the ghost: flies in on landing (script), then lives beside the logo */
.brand .hw-ghost{position:absolute;left:146px;top:-3px;width:38px;height:38px;opacity:0;pointer-events:none;
  background:url("assets/new-ui/halloween/deco-ghost.webp") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(200,170,255,.45));transition:opacity .3s}
.brand .hw-ghost.is-on{opacity:1;animation:hwbob 3.4s ease-in-out infinite}
.brand:hover .hw-ghost.is-on{animation:hwwave .9s ease-in-out 1,hwbob 3.4s ease-in-out .9s infinite}
@keyframes hwbob{50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes hwwave{20%{transform:rotate(-14deg) scale(1.1)}45%{transform:rotate(12deg) scale(1.1)}70%{transform:rotate(-8deg)}}
.app.is-collapsed .brand .hw-ghost{display:none}
@media (min-width:721px) and (max-width:1240px){.app:not(.is-expanded) .brand .hw-ghost{display:none}}
.hw-ghost-fly{position:fixed;left:0;top:0;z-index:60;width:64px;height:64px;pointer-events:none;
  background:url("assets/new-ui/halloween/deco-ghost.webp") center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(200,170,255,.55));will-change:transform,opacity}

/* the spooky show's layer (script: web + ghost + bats, on load and after 5s idle). One fixed layer
   over everything, so a show can fade out as a whole (.is-out) when the visitor scrolls or clicks. */
.hw-show{position:fixed;inset:0;z-index:56;overflow:hidden;pointer-events:none;transition:opacity .3s}
.hw-show.is-out{opacity:0}
@media (prefers-reduced-motion:reduce){.hw-show{display:none}}
/* the landing web: spun from the screen's top-right corner over half the page, then gone (3s, script) */
.hw-bigweb{position:fixed;top:0;right:0;z-index:55;width:var(--R);height:var(--R);pointer-events:none;
  transform-origin:100% 0;animation:hwbigweb 3s linear forwards}
.hw-bigweb svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px rgba(232,224,255,.5))}
.hw-bigweb path{fill:none;stroke:rgba(242,236,255,.82);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:hwdraw var(--dd) cubic-bezier(.3,.6,.3,1) var(--dl) forwards}
.hw-bigweb circle{fill:#fff;opacity:0;filter:drop-shadow(0 0 2px #fff);animation:hwdew .5s ease-out var(--dl) forwards}
@keyframes hwdraw{to{stroke-dashoffset:0}}
@keyframes hwdew{60%{opacity:1;transform:scale(1.6)}to{opacity:.85}}
.hw-bigweb circle{transform-box:fill-box;transform-origin:center}
@keyframes hwbigweb{0%,70%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.05)}}

/* cobwebs: thin bone-white threads */
.hw-web{position:absolute;z-index:6;pointer-events:none;color:rgba(232,224,255,.42)}
.hw-web .web{display:block;width:100%;height:100%;overflow:visible}
.hw-web .web path{fill:none;stroke:currentColor;stroke-width:.9;vector-effect:non-scaling-stroke}
/* hero corner: wherever the top-right corner is free of text (the wheel box on desktop, or the
   guest banner's art). Hidden where a countdown sits in that corner. */
.hw-web-hero{display:none;top:-3px;right:-3px;width:86px;height:86px}
@media (min-width:1241px){.hw-web-hero{display:block}}
@media (min-width:721px){.app.is-guest .hw-web-hero{display:block;width:104px;height:104px}}

/* the spider dangles from the hero web: it sways, and drops and climbs on its thread */
.hw-spider{position:absolute;left:44px;top:9px;width:16px;transform-origin:50% 0;animation:hwswing 5.5s ease-in-out infinite}
.app.is-guest .hw-spider{left:56px;top:11px}
.hw-spider .thread{display:block;width:1px;height:38px;margin:0 auto;transform-origin:50% 0;
  background:linear-gradient(rgba(232,224,255,.65),rgba(232,224,255,.35));animation:hwthread 7s ease-in-out infinite}
.hw-spider svg{display:block;width:16px;height:16px;margin-top:-2px;color:#1a0b2e;
  filter:drop-shadow(0 0 1.2px rgba(255,190,120,.95)) drop-shadow(0 0 6px rgba(255,122,26,.5));animation:hwdrop 7s ease-in-out infinite}
@keyframes hwswing{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
@keyframes hwthread{0%,100%{transform:scaleY(.62)}45%,60%{transform:scaleY(1)}}
@keyframes hwdrop{0%,100%{transform:translateY(-14.4px)}45%,60%{transform:translateY(0)}}

/* pumpkin patch, candles and fog standing on the footer */
.footer{position:relative;margin-top:96px;border-top:1px solid rgba(255,122,26,.2)}
.hw-ground{position:absolute;left:0;right:0;bottom:calc(100% - 6px);height:156px;overflow:hidden;pointer-events:none}
.hw-pl,.hw-pr{position:absolute;bottom:0;isolation:isolate;height:min(138px,12vw);aspect-ratio:760/388;
  background:url("assets/new-ui/halloween/deco-pumpkins-left.webp") left bottom/contain no-repeat}
.hw-pl{left:4px}
.hw-pr{right:4px;aspect-ratio:760/365;background-image:url("assets/new-ui/halloween/deco-pumpkins-right.webp");background-position:right bottom}
.hw-pl::before,.hw-pr::before{content:"";position:absolute;inset:25% 8% -6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,140,40,.38),transparent);filter:blur(12px);animation:hwflicker 3.2s ease-in-out infinite}
.hw-pr::before{animation-delay:-1.4s}
@keyframes hwflicker{0%,100%{opacity:.75}30%{opacity:1}55%{opacity:.6}75%{opacity:.95}}
.hw-fog{position:absolute;left:-8%;right:-8%;bottom:-2px;height:58px;opacity:.6;filter:blur(7px);
  background:radial-gradient(30% 60% at 18% 72%,rgba(190,170,240,.34),transparent 70%),
             radial-gradient(26% 55% at 52% 82%,rgba(190,170,240,.28),transparent 70%),
             radial-gradient(32% 60% at 86% 74%,rgba(190,170,240,.32),transparent 70%);
  animation:hwfog 24s ease-in-out infinite alternate}
@keyframes hwfog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@media (max-width:720px){
  .footer{margin-top:70px}
  .hw-pl,.hw-pr{height:78px}
  .hw-ground{height:100px}
}

/* embers drifting up behind the page (the script adds the dots) */
.hw-embers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}   /* -1 (hand-off: 0): behind the page, see .app above */
.hw-embers i{position:absolute;bottom:-12px;left:var(--l);width:var(--sz);height:var(--sz);border-radius:50%;
  background:var(--c);box-shadow:0 0 7px 1px var(--c);opacity:0;animation:hwember var(--d) linear var(--dl) infinite}
@keyframes hwember{0%{transform:translate(0,0);opacity:0}10%{opacity:var(--o)}50%{transform:translate(var(--sx),-55vh)}
  88%{opacity:var(--o)}100%{transform:translate(calc(var(--sx) * -.4),-112vh);opacity:0}}

/* the wheel's hub is a jack-o'-lantern */
.wheel-hub.hw-jack{background:radial-gradient(circle at 38% 30%,#ffb35c,#ff7a1a 52%,#b4470a);
  box-shadow:0 0 0 2px #2a1246,0 0 12px rgba(255,160,60,.6),0 5px 12px rgba(0,0,0,.5)}
.wheel-hub.hw-jack svg{width:80%;height:80%;filter:drop-shadow(0 0 2px rgba(255,214,107,.9))}
.wheel-hub.hw-jack::before{content:"";position:absolute;left:50%;top:-3px;width:4px;height:5px;margin-left:-2px;
  border-radius:2px 2px 1px 1px;background:#4c7a2c}

/* a pumpkin in every section, each with its own prop: beside the title, or perched on a card's edge */
.hw-pk{flex:none;display:inline-block;width:58px;height:58px;margin:-20px -6px -16px -4px;pointer-events:none;
  background:center/contain no-repeat;transform-origin:50% 90%;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,122,26,.3));animation:hwpk 4.2s ease-in-out infinite}
@keyframes hwpk{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-2px)}}
.pk-coins{background-image:url("assets/new-ui/halloween/deco-pk-coins.webp")}
.pk-crown{background-image:url("assets/new-ui/halloween/deco-pk-crown.webp");animation-delay:-.7s}
.pk-dice{background-image:url("assets/new-ui/halloween/deco-pk-dice.webp");animation-delay:-1.4s}
.pk-tickets{background-image:url("assets/new-ui/halloween/deco-pk-tickets.webp");animation-delay:-2.1s}
.pk-ticket{background-image:url("assets/new-ui/halloween/deco-pk-ticket.webp");animation-delay:-2.8s}
.pk-bucket{background-image:url("assets/new-ui/halloween/deco-pk-bucket.webp");animation-delay:-3.5s}
.pk-bat{background-image:url("assets/new-ui/halloween/deco-pk-bat.webp");animation-name:hwpkfly;animation-duration:3s}
.pk-book{background-image:url("assets/new-ui/halloween/deco-pk-book.webp");animation-delay:-1s}
.pk-hat{background-image:url("assets/new-ui/halloween/deco-pk-hat.webp");animation-delay:-2s}
@keyframes hwpkfly{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(5deg)}}
.hw-pk.hw-perch{position:absolute;z-index:3;width:68px;height:68px;margin:0}
.deposit>.hw-perch{left:-22px;top:-50px}
.app.is-guest .fun-band .exch{position:relative}
.exch>.hw-perch{right:-12px;top:-42px}
.join{position:relative}
.join>.hw-perch{right:28px;top:-48px;width:72px;height:72px}
.jhead .hw-pk{width:78px;height:78px;margin:-14px -6px -14px 0}
.app.is-guest .jhead .hw-pk{width:52px;height:52px;margin:-14px 0 -12px}
@media (max-width:720px){
  .hw-pk{width:38px;height:38px;margin:-12px -12px -10px -6px}   /* takes ~20px of the row, so the title row never wraps */
  .hw-pk.hw-perch{width:50px;height:50px}
  .deposit>.hw-perch{left:-6px;top:-32px}
  .exch>.hw-perch{right:-4px;top:-32px}
  .join>.hw-perch{right:14px;top:-38px;width:56px;height:56px}
  .jhead .hw-pk{width:56px;height:56px}
}

/* the bottom of the menu: a little haunted house on its hill, sitting on the 18+ line.
   It shrinks before the menu would ever need to scroll for it. */
.hw-menu-scene{flex:0 1 156px;min-height:64px;margin:auto 0 0;pointer-events:none;
  background:url("assets/new-ui/halloween/deco-menu-scene.webp") center bottom/contain no-repeat;
  filter:drop-shadow(0 0 18px rgba(255,140,40,.22))}
.hw-menu-scene+.sidebar-foot{margin-top:0}
.app.is-collapsed .hw-menu-scene{flex-basis:52px;min-height:40px}
@media (min-width:721px) and (max-width:1240px){.app:not(.is-expanded) .hw-menu-scene{flex-basis:52px;min-height:40px}}

@media (prefers-reduced-motion:reduce){
  .hw-pk{animation:none}
  .hw-embers,.hw-ghost-fly,.hw-bigweb{display:none}
  .brand .hw-ghost{opacity:1;animation:none!important}
  .hw-spider,.hw-spider .thread,.hw-spider svg,.hw-fog,.hw-pl::before,.hw-pr::before{animation:none}
}

/* ---- FUN Fantasy (added to the main page 2026-10-26, ported here 2026-10-27): night skin ---- */
.fan-art{border-right-color:rgba(232,224,255,.26)}
@media (max-width:720px){.fan-art{border-bottom-color:rgba(232,224,255,.26)}}
.fantasy:hover{border-color:rgba(255,122,26,.45)}
.fan-eyebrow{display:flex;align-items:center;gap:6px;color:var(--pumpkin-2)}   /* pink-600 is only 3:1 on the night card */
.fan-prize{border:1px solid rgba(255,201,77,.22);box-shadow:0 14px 28px -16px rgba(0,0,0,.7)}
.fan-closes{color:#5ff0b0}
.fan-facts dd.fan-closes{color:#5ff0b0}
.fan-entries{background:rgba(255,255,255,.05)}
.pk-ball{background-image:url("assets/new-ui/halloween/deco-pk-ball.webp");animation-delay:-1.6s}
.fan-eyebrow .hw-pk{width:56px;height:56px;margin:-20px 0 -16px}
@media (max-width:720px){.fan-eyebrow .hw-pk{width:38px;height:38px;margin:-12px 0 -10px}}

/* The guest hero's blurred side fill reads the hero art: the hand-off changed
   this one url outside its theme block, so it is repeated here. */
@media (min-width:721px){
  .slide.guest-promo::before{background-image:url("assets/new-ui/halloween/banner-guest-hero.webp")}
}