html.halloween body { background-color: #120b1c; background-image: radial-gradient(ellipse 80% 50% at 12% 0%, rgba(255,122,24,.26), transparent 60%), radial-gradient(ellipse 70% 45% at 92% 8%, rgba(139,92,246,.28), transparent 60%), radial-gradient(ellipse 90% 40% at 50% 100%, rgba(34,197,94,.12), transparent 65%), radial-gradient(ellipse 60% 30% at 20% 100%, rgba(255,122,24,.14), transparent 65%); }
html.halloween body::before { content: ''; position: fixed; top: 70px; right: 6vw; width: 110px; height: 110px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 35% 35%, #fff4d6, #ffd98a 60%, #f0b24a); box-shadow: 0 0 40px 12px rgba(255,200,100,.28), 0 0 120px 40px rgba(255,160,60,.16); opacity: .9; }
html.halloween .top { background: rgba(18,11,28,.88); border-bottom-color: #4a2f63; }
html.halloween .top .px { background: linear-gradient(90deg, #ff9a3c, #c084fc); -webkit-background-clip: text; background-clip: text; }
html.halloween .top .ex { color: #ff7a18; }
html.halloween .card, html.halloween .tot, html.halloween .stat, html.halloween .chartbox, html.halloween .hero, html.halloween .wdbox, html.halloween .ddmenu, html.halloween .room, html.halloween .bdg, html.halloween .doc, html.halloween input, html.halloween select { background-color: #1f1630; border-color: #3d2a55; }
html.halloween #bar2, html.halloween .ranges { background: #1a1226; border-color: #3d2a55; }
html.halloween .card:hover, html.halloween .bdg:hover { border-color: #ff7a18; }
html.halloween button.active, html.halloween .top button.active, html.halloween .ranges button.active, html.halloween .furnictl button.active { background: #ff7a18; border-color: #ff7a18; color: #1a0f00; }
html.halloween .top button:hover { background: #33224a; }
html.halloween .doc h2 { color: #ff9a3c; }
html.halloween .doc a, html.halloween .back:hover { color: #ff9a3c; }

.fx { display: none; }
html.halloween .fx { display: block; position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.fx i { position: absolute; left: 0; width: 64px; height: 32px; opacity: .8; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%2307040d' d='M32 8c-2 0-3 2-4 5-3-4-9-6-16-5 3 2 4 5 4 8-3-1-7 0-10 3 5-1 9 1 11 5 2-3 5-4 8-3 1 3 3 6 7 6s6-3 7-6c3-1 6 0 8 3 2-4 6-6 11-5-3-3-7-4-10-3 0-3 1-6 4-8-7-1-13 1-16 5-1-3-2-5-4-5z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(167,110,255,.5)); animation: batfall 24s linear infinite, batflap .35s ease-in-out infinite alternate; }
.fx i { top: 0; }
.fx i:nth-child(1) { left: 14%; animation-delay: -4s, 0s; }
.fx i:nth-child(2) { left: 52%; width: 48px; height: 24px; animation-duration: 30s, .3s; animation-delay: -15s, 0s; }
.fx i:nth-child(3) { left: 82%; width: 76px; height: 38px; animation-duration: 36s, .4s; animation-delay: -26s, 0s; }
@keyframes batfall {
  0% { translate: 0 -60px; }
  25% { translate: 70px 25vh; }
  50% { translate: -50px 50vh; }
  75% { translate: 60px 75vh; }
  100% { translate: -20px calc(100vh + 60px); }
}
@keyframes batflap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { html.halloween .fx { display: none; } }

.pumpkins { display: flex; justify-content: center; align-items: flex-end; gap: 1.2rem; padding: 1.5rem 1rem 0; pointer-events: none; }
.pumpkins i { display: block; width: 84px; height: 76px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath fill='%232f6b2a' d='M46 22Q47 9 58 5L61 10Q55 13 55 22Z'/%3E%3Cellipse cx='27' cy='54' rx='24' ry='32' fill='%23d9590a'/%3E%3Cellipse cx='73' cy='54' rx='24' ry='32' fill='%23d9590a'/%3E%3Cellipse cx='50' cy='54' rx='28' ry='35' fill='%23f97316'/%3E%3Cpath fill='%23ffd24a' d='M28 47L40 35L46 49ZM72 47L60 35L54 49ZM50 53L44 62H56ZM30 67L38 63L44 71L50 64L56 71L62 63L70 67Q50 85 30 67Z'/%3E%3C/svg%3E") center bottom / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255,160,40,.55)); animation: pflicker 3.2s ease-in-out infinite; }
.pumpkins i:nth-child(2) { width: 62px; height: 56px; animation-delay: -1s; }
.pumpkins i:nth-child(3) { width: 108px; height: 98px; animation-delay: -2s; }
.pumpkins i:nth-child(4) { width: 62px; height: 56px; animation-delay: -.5s; }
.pumpkins i:nth-child(5) { width: 84px; height: 76px; animation-delay: -1.6s; }
@keyframes pflicker { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255,160,40,.55)); } 45% { filter: drop-shadow(0 0 16px rgba(255,180,60,.8)); } 70% { filter: drop-shadow(0 0 7px rgba(255,140,30,.4)); } }
@media (prefers-reduced-motion: reduce) { .pumpkins i { animation: none; } }

html.halloween .top::before, html.halloween .top::after { content: ''; position: absolute; top: 0; width: 72px; height: 72px; pointer-events: none; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 0V100M0 0L30 92M0 0L58 58M0 0L92 30M0 0H100'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(.35)' d='M0 100Q10 82 30 92Q38 66 58 58Q66 38 92 30Q82 10 100 0'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(.65)' d='M0 100Q10 82 30 92Q38 66 58 58Q66 38 92 30Q82 10 100 0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 100Q10 82 30 92Q38 66 58 58Q66 38 92 30Q82 10 100 0'/%3E%3C/svg%3E") no-repeat top left / 100% 100%; }
html.halloween .top::before { left: 0; }
html.halloween .top::after { right: 0; transform: scaleX(-1); }
.spider { position: absolute; top: 0; width: 30px; height: 100px; pointer-events: none; transform-origin: 50% 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100'%3E%3Cpath d='M15 0V62' stroke='%23ffffff' stroke-opacity='.55' stroke-width='.7' fill='none'/%3E%3Cg stroke='%238a6bbf' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 72L4 66L2 70M9 75L2 76L1 81M10 78L5 84L3 89M20 72L26 66L28 70M21 75L28 76L29 81M20 78L25 84L27 89'/%3E%3C/g%3E%3Cellipse cx='15' cy='76' rx='5.5' ry='7' fill='%23241535' stroke='%238a6bbf' stroke-width='1'/%3E%3Ccircle cx='15' cy='68' r='3.5' fill='%23241535' stroke='%238a6bbf' stroke-width='1'/%3E%3Ccircle cx='13.8' cy='67.5' r='.9' fill='%23ff7a18'/%3E%3Ccircle cx='16.2' cy='67.5' r='.9' fill='%23ff7a18'/%3E%3C/svg%3E") no-repeat top center / 100% 100%; animation: spiderswing 4s ease-in-out infinite; }
@keyframes spiderswing { 0%, 100% { transform: rotate(-5deg) scaleY(1); } 50% { transform: rotate(5deg) scaleY(1.12); } }
@media (prefers-reduced-motion: reduce) { .spider { animation: none; } }

.hwbar { display: none; }
html.halloween .hwbar { display: block; text-align: center; padding: 5px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #ffd9a8; background: linear-gradient(90deg, #3a1f5c, #7a2f0a 50%, #3a1f5c); border-bottom: 1px solid #4a2f63; }

.fall { display: none; }
html.halloween .fall { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fall i { position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s); opacity: .5; background: center / contain no-repeat; animation: fallmove var(--d) linear var(--dl) infinite, fallspin var(--sp) linear infinite; }
.fall i.c { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath fill='%23fff3d6' d='M20 2Q23 2 24 6L27.4 16H12.6L16 6Q17 2 20 2Z'/%3E%3Cpath fill='%23ff8c1a' d='M12.6 16H27.4L33.9 32H7.1Z'/%3E%3Cpath fill='%23ffc933' d='M7.1 32H33.9L37 44Q38 49 33 49H7Q2 49 3 44Z'/%3E%3C/svg%3E"); }
.fall i.l1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath fill='%23d9590a' d='M20 2C32 12 36 26 20 44C4 26 8 12 20 2Z'/%3E%3Cpath stroke='%23702c05' stroke-width='1.5' fill='none' d='M20 8V50'/%3E%3C/svg%3E"); }
.fall i.l2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath fill='%23b3341a' d='M20 2C32 12 36 26 20 44C4 26 8 12 20 2Z'/%3E%3Cpath stroke='%235a140a' stroke-width='1.5' fill='none' d='M20 8V50'/%3E%3C/svg%3E"); }
.fall i.l3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath fill='%23e8a21e' d='M20 2C32 12 36 26 20 44C4 26 8 12 20 2Z'/%3E%3Cpath stroke='%238a5a05' stroke-width='1.5' fill='none' d='M20 8V50'/%3E%3C/svg%3E"); }
@keyframes fallmove {
  0% { translate: 0 -40px; }
  33% { translate: calc(var(--dx) * .6) 33vh; }
  66% { translate: calc(var(--dx) * -.4) 66vh; }
  100% { translate: calc(var(--dx) * .3) calc(100vh + 40px); }
}
@keyframes fallspin { to { rotate: 360deg; } }

.pumpkins i { pointer-events: auto; cursor: pointer; }
.pumpkins i.laugh { animation: pjump .5s ease-out; }
@keyframes pjump { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.08, .94); } 60% { transform: translateY(0) scale(.95, 1.06); } }
.pop { position: absolute; z-index: 6; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pg { width: 52px; height: 65px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath fill='%23f4f0ff' d='M4 48V20Q4 2 20 2Q36 2 36 20V48L30 42L25 48L20 42L15 48L10 42Z'/%3E%3Cellipse cx='14' cy='20' rx='3' ry='4.5' fill='%231a1226'/%3E%3Cellipse cx='26' cy='20' rx='3' ry='4.5' fill='%231a1226'/%3E%3Cellipse cx='20' cy='31' rx='3' ry='4' fill='%231a1226'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(200,170,255,.7)); animation: ghostpop 2.5s ease-out forwards; }
.pb { position: relative; margin-bottom: 10px; padding: 5px 11px; border-radius: 12px; background: #fff7e6; color: #2a1305; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; animation: bubblepop 2.5s ease-out .15s forwards; }
.pb::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff7e6; }
@keyframes ghostpop {
  0% { transform: translateY(40px) scale(.3); opacity: 0; }
  15% { transform: translateY(-6px) scale(1.05); opacity: .95; }
  25% { transform: translateY(0) scale(1); }
  80% { transform: translateY(-14px) scale(1); opacity: .95; }
  100% { transform: translateY(-26px) scale(1); opacity: 0; }
}
@keyframes bubblepop {
  0% { transform: scale(.4); opacity: 0; }
  12% { transform: scale(1.08); opacity: 1; }
  20%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fall { display: none !important; } .pumpkins i.laugh { animation: none; } }