/* ============================================
   Halloween theme — decorations live only in the chrome:
   top bar, wide-screen gutters (behind content), and a
   scene above the footer. Never in the game area.
   ============================================ */

.hw-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.holiday-halloween .hw-dot,
.holiday-halloween .hw-wordmark-hat,
.holiday-halloween .hw-nav-sky,
.holiday-halloween .hw-gutters,
.holiday-halloween .hw-graveyard { pointer-events: none; user-select: none; }

/* ---------- Top bar: midnight sky ---------- */
.holiday-halloween .v3-nav {
  background: linear-gradient(120deg, #120a26 0%, #2d1066 55%, #5b1d3f 85%, #9a3412 100%);
}
.holiday-halloween .v3-nav-inner { position: relative; z-index: 1; }

/* The pumpkin dot in LEX.GAMES */
.holiday-halloween .v3-wordmark .mark { position: relative; }
.hw-dot {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin: 0 2px;
  vertical-align: -0.04em;
  transition: transform var(--ease);
}
.hw-dot svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 3px rgba(251, 146, 60, 0.55)); }
.holiday-halloween .v3-wordmark:hover .hw-dot { transform: translateY(-3px) rotate(-12deg) scale(1.15); }

/* Witch hat perched on the L */
.hw-wordmark-hat {
  position: absolute;
  left: -7px;
  top: -16px;
  width: 22px;
  height: 20px;
  filter: drop-shadow(0 0 2px rgba(240, 171, 252, 0.9)) drop-shadow(0 0 5px rgba(240, 171, 252, 0.5));
  transform: rotate(-18deg);
  transform-origin: 50% 90%;
  transition: transform var(--ease);
}
.holiday-halloween .v3-wordmark:hover .hw-wordmark-hat { transform: rotate(-30deg) translateY(-3px); }

/* Bats crossing the top bar, behind the links */
.hw-nav-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hw-flyer {
  position: absolute;
  display: block;
  width: 26px;
  height: 13px;
}
.hw-flyer svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  animation: hw-flap 0.22s ease-in-out infinite alternate;
}
.hw-nav-sky .hw-flyer svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)); }
.hw-nav-sky .hw-flyer { left: -40px; opacity: 0.85; animation: hw-fly 22s linear infinite; }
.hw-flyer--1 { top: 6px; animation-delay: -3s !important; }
.hw-flyer--2 { top: 24px; width: 18px !important; height: 9px !important; animation-duration: 29s !important; animation-delay: -14s !important; }
.hw-flyer--3 { top: 14px; width: 14px !important; height: 7px !important; animation-duration: 37s !important; animation-delay: -25s !important; }

@keyframes hw-flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.45) translateY(2px); }
}
@keyframes hw-fly {
  0%   { left: -40px;            transform: translateY(0); }
  25%  {                         transform: translateY(-5px); }
  50%  {                         transform: translateY(4px); }
  75%  {                         transform: translateY(-3px); }
  100% { left: calc(100% + 40px); transform: translateY(0); }
}

/* ---------- Gutters: only where there's empty space, and behind everything ---------- */
.hw-gutters { display: none; }
@media (min-width: 1360px) {
  .hw-gutters {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
}
.hw-gutter { position: absolute; display: block; }
.hw-gutter--bat1     { left: 3vw;  top: 190px; width: 54px; height: 27px; transform: rotate(-12deg); opacity: 0.8;  animation: hw-hover 5s ease-in-out infinite; }
.hw-gutter--bat2     { right: 4vw; top: 300px; width: 40px; height: 20px; transform: rotate(10deg);  opacity: 0.65; animation: hw-hover 6.5s ease-in-out -2s infinite; }
.hw-gutter--pumpkin1 { left: 2.5vw; bottom: 26px; width: 64px; height: 64px; }
.hw-gutter--pumpkin2 { left: calc(2.5vw + 58px); bottom: 24px; width: 38px; height: 38px; }
.hw-gutter--hat      { right: 3vw; bottom: 26px; width: 66px; height: 59px; transform: rotate(8deg); }

@keyframes hw-hover {
  0%, 100% { translate: 0 0; }
  50%      { translate: 6px -12px; }
}

/* ---------- Graveyard scene above the footer ---------- */
.hw-graveyard {
  position: relative;
  isolation: isolate;
  margin-top: 40px;
  height: 104px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 30%, #fef3c7 0 15px, rgba(254, 243, 199, 0.18) 16px 26px, transparent 27px),
    linear-gradient(to bottom, transparent, rgba(45, 16, 102, 0.07));
}
/* rolling hill the scene stands on */
.hw-graveyard::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -34px;
  height: 64px;
  z-index: 1;
  background: #2b1d47;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hw-graveyard + .v3-footer { margin-top: 0; border-top: 0; }

.hw-graveyard-inner {
  position: relative;
  max-width: 760px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.hw-g { display: block; flex-shrink: 0; position: relative; z-index: 2; margin-bottom: 22px; }
.hw-g-pumpkin       { width: 38px; height: 38px; }
.hw-g-pumpkin--small{ width: 26px; height: 26px; }
.hw-g-jack          { width: 44px; height: 44px; filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.6)); animation: hw-glow 3s ease-in-out infinite; }
.hw-g-hat           { width: 40px; height: 36px; transform: rotate(-10deg); }

/* Zombie hand and head rise out of the hill (z-index below it) */
.hw-g-hand, .hw-g-zombie { z-index: 0; }
.hw-g-hand   { width: 26px; height: 40px; margin-bottom: 14px; transform-origin: 50% 100%; animation: hw-rise 7s ease-in-out infinite; }
.hw-g-zombie { width: 46px; height: 46px; margin-bottom: 16px; animation: hw-shamble 4s ease-in-out infinite; }

/* Tombstone, with Dracula peeking out and a black cat on top */
.hw-g-crypt { width: 92px; height: 80px; margin-bottom: 16px; }
.hw-g-tomb  { position: absolute; left: 6px; bottom: 0; width: 80px; height: 60px; z-index: 2; }
.hw-g-dracula {
  position: absolute;
  right: -16px;
  bottom: 4px;
  width: 40px;
  height: 47px;
  z-index: 1;
  animation: hw-peek 9s ease-in-out infinite;
}
.hw-g-cat { position: absolute; left: 14px; bottom: 50px; width: 26px; height: 31px; z-index: 3; }

.hw-graveyard .hw-g-bat {
  position: absolute;
  top: 10px;
  left: 18%;
  width: 30px;
  height: 15px;
  margin: 0;
  animation: hw-hover 4.5s ease-in-out infinite;
}

@keyframes hw-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.45)); }
  50%      { filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.9)); }
}
@keyframes hw-rise {
  0%, 20%  { transform: translateY(30px) rotate(0); }
  45%      { transform: translateY(0) rotate(-6deg); }
  55%      { transform: translateY(0) rotate(6deg); }
  65%      { transform: translateY(0) rotate(-4deg); }
  90%, 100%{ transform: translateY(30px) rotate(0); }
}
@keyframes hw-shamble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg) translateX(2px); }
}
@keyframes hw-peek {
  0%, 40%  { transform: translateX(-22px) rotate(0); }
  50%, 75% { transform: translateX(0) rotate(8deg); }
  85%, 100%{ transform: translateX(-22px) rotate(0); }
}

@media (max-width: 640px) {
  .hw-graveyard { height: 92px; margin-top: 28px; }
  .hw-graveyard-inner { padding: 0 6px; }
  .hw-g-pumpkin--small, .hw-g-hat { display: none; }
  .hw-g-crypt { transform: scale(0.85); transform-origin: 50% 100%; }
  .hw-wordmark-hat { left: -5px; top: -9px; width: 17px; height: 15px; }
}