/* Halloween decoration of the start menu (js/halloween-decor.js). Only active while body has .hw-menu or the decor nodes exist. */
.hwDecor{position:absolute;inset:0 -6px -26px;pointer-events:none;z-index:2}
.hwSlot{position:absolute;width:var(--w,50px);animation:hwIn 1.1s ease-out var(--dl,0s) both,hwFloat var(--d,7s) ease-in-out var(--dl,0s) infinite}
.hwBat{display:block;width:100%;fill:#1b1226;stroke:rgba(170,130,240,.9);stroke-width:1.4;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.hwBat .eye{fill:#ff5a4a;stroke:none}
.hwBat .wing{transform-origin:31px 22px;animation:hwFlapL .36s ease-in-out infinite}
.hwBat .wing.r{animation-name:hwFlapR}
.hwGhost{display:block;width:100%;fill:rgba(255,255,255,.88);stroke:rgba(60,40,100,.5);stroke-width:1.6;filter:drop-shadow(0 0 10px rgba(200,170,255,.55));opacity:.9}
.hwGhost .eye{fill:#3a3550;stroke:none}
@keyframes hwFlapL{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(22deg)}}
@keyframes hwFlapR{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-22deg)}}
@keyframes hwIn{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:scale(1)}}
@keyframes hwDrop{0%{opacity:0;transform:translateY(-70px) rotate(-12deg) scaleX(.6)}60%{opacity:1}100%{opacity:1;transform:rotate(-2.5deg)}}
@keyframes hwFade{from{opacity:0}to{opacity:1}}
@keyframes hwLower{from{transform:translateY(-80px)}to{transform:translateY(0)}}
@keyframes hwFloat{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(14px,-12px) rotate(5deg)}50%{transform:translate(-6px,-20px) rotate(-2deg)}75%{transform:translate(-16px,-6px) rotate(4deg)}}

.hwRibbon{display:flex;align-items:center;gap:16px;padding:10px 46px;margin:-14px 0 -8px;transform:rotate(-2.5deg);position:relative;z-index:1;
  background:linear-gradient(#ff9a3a,#e8651a 55%,#b64a0e);border:2px solid #3a1a06;color:#2a0f3a;font:700 clamp(19px,3.7vw,40px)/1.2 'Cinzel Decorative',var(--serif);letter-spacing:.06em;
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 50%,100% 100%,0 100%,22px 50%);box-shadow:0 4px 0 #3a1a06;text-shadow:0 1px 0 rgba(255,220,160,.7);
  animation:hwDrop 1s cubic-bezier(.3,1.5,.5,1) both}
.hwRibbon span{white-space:nowrap}
.hwPumpkin{width:42px;height:auto;flex:none}
.hwPumpkin ellipse{fill:#d96a14;stroke:#3a1a06;stroke-width:2.4}
.hwPumpkin .stem{fill:#4d6b1e;stroke:#2a3a0e;stroke-width:2}
.hwPumpkin .face{fill:#ffe27a;stroke:none}

/* cobwebs on the menu buttons: top-left on every button, bottom-right on some, and a spider dangling from one */
body.hw-menu .stMenu .menuBtn{position:relative}
body.hw-menu .stMenu .menuBtn::before{content:'';position:absolute;left:0;top:0;width:58px;height:58px;background:var(--hw-web) no-repeat left top/contain;pointer-events:none;border-radius:14px 0 0 0;animation:hwFade 1.2s ease-out both}
body.hw-menu .stMenu>:nth-child(1)::before,body.hw-menu .stMenu>.stRulesRow .menuBtn::before{animation-delay:.5s}
body.hw-menu .stMenu>#stCpu::before{animation-delay:.8s}body.hw-menu .stMenu>#stOnline::before{animation-delay:1.1s}body.hw-menu .stMenu>#stHistory::before{animation-delay:1.4s}body.hw-menu .stMenu>#stMiniGame::before{animation-delay:1.7s}
body.hw-menu .stMenu #stOnline::after,body.hw-menu .stMenu #stMiniGame::after{content:'';position:absolute;right:0;bottom:0;width:54px;height:54px;background:var(--hw-web) no-repeat left top/contain;transform:rotate(180deg);pointer-events:none;animation:hwFade 1.2s ease-out 1.5s both}
body.hw-menu .stMenu #stHistory::after{content:'';position:absolute;right:46px;top:-4px;width:24px;height:80px;background:var(--hw-spider) no-repeat center top/contain;pointer-events:none;transform-origin:50% 0;animation:hwLower 1.6s ease-out 1.8s both,hwDangle 3.4s ease-in-out 3.4s infinite}
@keyframes hwDangle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(8px) rotate(3deg)}}
@media(max-width:600px){.hwRibbon{padding:7px 26px;gap:8px}.hwPumpkin{width:26px}.hwSlot{--w:38px}}
@media(prefers-reduced-motion:reduce){.hwSlot,.hwBat .wing,.hwRibbon,body.hw-menu .stMenu .menuBtn::before,body.hw-menu .stMenu #stHistory::after,body.hw-menu .stMenu #stOnline::after,body.hw-menu .stMenu #stMiniGame::after{animation:none}}