.halloween-element {
  display: none;
  pointer-events: none;
  z-index: 25;
}
body.halloween-active .halloween-element {
  display: block;
}

/* Flying Bats Animation */
@keyframes batFlyHorizontal {
  0% { transform: translate3d(-60px, 0, 0) scale(0.85); }
  50% { transform: translate3d(50vw, -28px, 0) scale(1); }
  100% { transform: translate3d(calc(100vw + 60px), 12px, 0) scale(0.8); }
}
@keyframes batFlapWing {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}
.bat-flutter {
  animation: batFlyHorizontal 14s linear infinite;
}
.bat-flutter-2 {
  animation: batFlyHorizontal 19s linear 5s infinite;
}
.bat-wing {
  transform-origin: center;
  animation: batFlapWing 0.28s ease-in-out infinite alternate;
}

/* Spectral Japanese Dragon Looping Animation */
@keyframes dragonSinuousRide {
  0% {
    transform: translate3d(-20%, 10%, 0) rotate(-4deg) scale(0.9);
    opacity: 0.15;
  }
  50% {
    transform: translate3d(15%, -8%, 0) rotate(3deg) scale(1.05);
    opacity: 0.38;
  }
  100% {
    transform: translate3d(50%, 8%, 0) rotate(-3deg) scale(0.95);
    opacity: 0.18;
  }
}
.spectral-dragon-anim {
  animation: dragonSinuousRide 24s ease-in-out infinite alternate;
}

/* Yūrei Spirit Ghost Floating */
@keyframes yureiHover {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.65; }
  50% { transform: translateY(-16px) rotate(4deg); opacity: 0.95; filter: drop-shadow(0 0 10px rgba(255,80,40,0.6)); }
}
.yurei-floating {
  animation: yureiHover 5s ease-in-out infinite;
}

/* Spider Hanging Thread Animation */
@keyframes spiderDropSwing {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(22px) rotate(5deg); }
}
.spider-hang-anim {
  animation: spiderDropSwing 6s ease-in-out infinite;
}

/* Toda la decoración es opcional y se detiene cuando el tema está apagado. */
.theme-decoration { pointer-events: none; }
body:not(.halloween-active) .theme-decoration { display: none; }
body.halloween-active .theme-decoration { opacity: 1; }
body:not(.halloween-active) .theme-decoration *, body:not(.halloween-active) .samurai-host * { animation-play-state: paused; }
body.theme-paused .theme-decoration *, body.theme-paused .samurai-host * { animation-play-state: paused; }
.theme-toggle[aria-pressed="true"] { background: #b72c0d; border-color: #b72c0d; color: white; }
.samurai-host { position: fixed; right: 12px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 35; width: 80px; pointer-events: none; }
.samurai-host.is-editing { display: none; }
#ghostFlightRig { position: relative; width: 100%; }
#ghostSpectralCycle { animation: guardianFloat 4s ease-in-out infinite; }
#ghostFigureBtn { pointer-events: auto; position: relative; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; width: 100%; min-height: 80px; border-radius: 16px; }
#ghostFigureBtn > div { display: none; }
#ghostFigureBtn > svg { width: 100%; height: auto; }
#ghostSamuraiHead { transform-origin: 70px 45px; transform: translateY(var(--look-y, 0px)) rotate(var(--look-x, 0deg)); transition: transform .2s; }
#ghostFigureBtn:hover #sushiTrayGroup, #ghostFigureBtn:focus-visible #sushiTrayGroup { transform: rotate(3deg); transform-origin: 70px 110px; }
#sushiTrayGroup { transition: transform .3s; }
#ghostFigureBtn:hover #ghostSushiPieces { filter: drop-shadow(0 0 6px #ff5028); }
#ghostFigureBtn:hover #ghostSteamPuffs { animation: guardianSteam 1.6s ease-out infinite; }
#ghostSpeechBubble { pointer-events: auto; position: absolute; bottom: calc(100% + 14px); right: 0; width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 280px); overflow-y: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid #b72c0d; border-radius: 16px; color: #fff; background: #141916; box-shadow: 0 12px 36px rgb(0 0 0 / 25%); font-size: 14px; line-height: 1.6; }
#ghostSpeechBubble strong { color: #ffab8e; }
#ghostSpeechBubble p { margin: 8px 0; }
#ghostSpeechBubble button { display: block; width: 100%; padding: 8px; margin-top: 6px; border-radius: 8px; border: 1px solid #78716c; color: #fff; background: #292524; cursor: pointer; font-size: 13px; }
#ghostSpeechBubble button:hover { background: #44403c; }
.ember-section { position: relative; overflow: hidden; }
.section-embers { position: absolute; inset: 0; }
.section-embers span { position: absolute; right: calc(8% + var(--ember-index) * 6%); bottom: 8px; width: 3px; height: 3px; border-radius: 50%; background: #ff5028; box-shadow: 0 0 8px #ff5028; animation: sectionEmber 7s calc(var(--ember-index) * -1.5s) ease-out infinite; }
.embers-1 span { right: auto; left: calc(3% + var(--ember-index) * 3%); }
.embers-2 span { opacity: .4; }
@keyframes guardianFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes guardianSteam { from { transform: translateY(0); opacity: .8; } to { transform: translateY(-14px); opacity: 0; } }
@keyframes sectionEmber { from { transform: translateY(0); opacity: 0; } 20% { opacity: .7; } to { transform: translateY(-100px); opacity: 0; } }
@media (max-width: 639px) {
  .bat-flutter-2 { display: none; }
  .spectral-dragon-anim { opacity: .3; }
  .halloween-favoritos-decor { right: 4px; }
}
@media (min-width: 640px) { .samurai-host { width: 110px; right: 24px; } }
@media (min-width: 1280px) { .samurai-host { width: 130px; bottom: 24px; } }
@media (max-height: 600px) {
  .samurai-host { width: 56px; }
  #ghostSpeechBubble { right: calc(100% + 8px); bottom: 0; width: min(300px, calc(100vw - 100px)); max-height: calc(100dvh - 200px); }
}
body.theme-paused #ghostSpectralCycle, body.theme-paused #ghostFigureBtn:hover #ghostSteamPuffs,
body.theme-paused .theme-decoration, body:not(.halloween-active) .theme-decoration { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .theme-decoration, .theme-decoration *, .samurai-host *, .bat-wing { animation: none; transition: none; }
}

.samurai-host:hover #ghostSpectralCycle, .samurai-host:focus-within #ghostSpectralCycle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #ghostSpectralCycle, #ghostSteamPuffs, #ghostFigureBtn:hover #ghostSteamPuffs, .section-embers span { animation: none; } #ghostSamuraiHead, #sushiTrayGroup { transition: none; transform: none; } }