/* ==========================================================================
   AUTHENTIC 2D PIXEL ART HALLOWEEN ASSETS:
   Pixel Tombstones, Pixel Pumpkins, Pixel Candles with Real Pixel Flame
   ========================================================================== */

/* Crisp Rendering for All Pixel Art */
.pixel-art,
.pixel-art * {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  shape-rendering: crispEdges;
}

/* PIXEL SCENE WRAPPER */
.pixel-spooky-scene {
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px dashed rgba(234, 88, 12, 0.25);
  border-radius: 10px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.pixel-spooky-scene:hover {
  transform: translateY(-2px);
  background: rgba(234, 88, 12, 0.08);
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.15);
}

/* 1. PIXEL TOMBSTONE (МОГИЛКА) */
.pixel-tombstone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pixel-tombstone-wrap:hover {
  transform: translateY(-4px) rotate(-3deg);
}

.pixel-tombstone-svg {
  width: 38px;
  height: 48px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

/* 2. PIXEL PUMPKIN WITH GLOWING FIRE INSIDE (ТЫКВА С ОГНЕМ) */
.pixel-pumpkin-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pixel-pumpkin-wrap:hover {
  transform: scale(1.08) rotate(3deg);
}

.pixel-pumpkin-svg {
  width: 44px;
  height: 42px;
  filter: drop-shadow(0 4px 10px rgba(234, 88, 12, 0.35));
}

/* Internal fire flickering animation inside pumpkin eyes and mouth */
.pixel-pumpkin-fire {
  animation: pumpkinFireGlow 1.2s infinite alternate steps(2, start);
}

@keyframes pumpkinFireGlow {
  0% {
    fill: #ffeb3b;
    filter: drop-shadow(0 0 4px #ff9800);
  }
  50% {
    fill: #ff9800;
    filter: drop-shadow(0 0 8px #ff5722);
  }
  100% {
    fill: #ffc107;
    filter: drop-shadow(0 0 6px #ff9800);
  }
}

/* 3. PIXEL CANDLE WITH REAL ANIMATED PIXEL FLAME (СВЕЧА С ЖИВЫМ ПИКСЕЛЬНЫМ ОГНЕМ) */
.pixel-candle-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.pixel-candle-wrap:hover {
  transform: translateY(-2px);
}

.pixel-candle-svg {
  width: 22px;
  height: 48px;
}

/* Real Pixel Flame 4-Frame Dancing Animation */
.pixel-flame-frame {
  transform-origin: 11px 18px;
  animation: realPixelFlameDance 0.45s infinite steps(1);
}

@keyframes realPixelFlameDance {
  0% {
    transform: translate(0px, 0px) scale(1, 1);
  }
  25% {
    transform: translate(-1px, -1px) scale(0.95, 1.08) skewX(-2deg);
  }
  50% {
    transform: translate(1px, -2px) scale(1.08, 0.96) skewX(3deg);
  }
  75% {
    transform: translate(0px, -1px) scale(0.92, 1.04) skewX(-1deg);
  }
}

/* Ambient Pixelated Light Halo Glow */
.pixel-flame-glow-halo {
  animation: pixelHaloPulse 0.9s infinite alternate ease-in-out;
  transform-origin: 11px 14px;
}

@keyframes pixelHaloPulse {
  0% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.0);
  }
}

/* Sparking pixel embers floating upwards */
.pixel-ember {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fef08a;
  box-shadow: 0 0 4px #ea580c;
  pointer-events: none;
  animation: emberRise 1.8s infinite linear;
}

@keyframes emberRise {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-4px, -24px);
    opacity: 0;
  }
}