/* ===== Lagerfeuer — Easter Egg =====
   Eigenständige Komponente, unabhängig vom Footer. Der umgebende Wrapper
   bestimmt die Größe:
     <div style="width:360px"> ...partials/marshmallow-fire.html... </div>
   Sprites in img/marshmallow/ (Feuer fire_a1..3 + fire_b1..3, Marshmallow
   marsh_c1..6, Stockbrot bread_b1..5). */

.mf-fire {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  touch-action: none;
}

/* warmer Bodenschein hinter der Flamme */
.mf-glow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 68%;
  height: 40%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 176, 59, .38), rgba(255, 176, 59, 0));
  filter: blur(8px);
  animation: mf-glow-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mf-glow-pulse {
  0%, 100% { opacity: .7;  transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}

/* ---- Flamme: 6 gestapelte Frames in fester Box (kein Clipping) ----
   Box nach dem höchsten Frame (fire_b3 = 308×353) dimensioniert; alle Frames
   sitzen am Boden, unterschiedlich hohe Flammen ragen frei nach oben. */
.mf-flames {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 66%;
  aspect-ratio: 308 / 388;   /* höher als der höchste Frame → Funken oben nie abgeschnitten */
  transform: translateX(-50%);
  pointer-events: none;
}

.mf-frame {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  opacity: 0;               /* opacity statt display:none → alle Frames laden vorab */
}

.mf-frame.is-on { opacity: 1; }

/* ---- greifbare Items (Hand mit Marshmallow / Stockbrot) ---- */
.mf-item {
  position: absolute;
  width: 30%;
  cursor: grab;
  touch-action: none;
  will-change: left, top;
  z-index: 2;               /* vor der Flamme */
}

.mf-item--marsh { left: 72%; top: 38%; }
.mf-item--bread { left: -5%; top: 38%; }

.mf-item.is-dragging { cursor: grabbing; }

.mf-item-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 5px rgba(0, 30, 45, .28));
  transition: transform .18s ease;
}

/* Stockbrot: gespiegelt → linke Hand, kommt von links */
.mf-item--bread .mf-item-img { transform: scaleX(-1); }

.mf-item.mf-perfect .mf-item-img { transform: scale(1.12); }
.mf-item--bread.mf-perfect .mf-item-img { transform: scaleX(-1) scale(1.12); }

/* Funken beim Rösten */
.mf-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb03b;
  box-shadow: 0 0 5px 1px rgba(255, 176, 59, .85);
  pointer-events: none;
  animation: mf-spark-rise 1.6s ease-out forwards;
}

@keyframes mf-spark-rise {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--mf-drift, 12px), -80px) scale(.4); }
}

@media (prefers-reduced-motion: reduce) {
  .mf-glow, .mf-spark { animation: none; }
}

/* ---- Isolation, wenn das Feuer in einer .icon-cell steckt ----
   Die globalen .icon-cell img-Regeln (pages.css) greifen sonst auf die
   Feuer-Sprites durch und zerschießen sie:
     • height:clamp + width:auto  → jeder Frame anders breit → Hölzer springen
     • transition:transform .35s  → Nachziehen beim Frame-Wechsel
     • :hover img translateY(-10px) → Feuer hüpft, Brot verliert Spiegelung
     • drop-shadow/margin          → falscher Schatten, Versatz
   Höher-spezifisch (.mf-fire …) die komponenteneigene Darstellung erzwingen. */
/* Feuer minimal anheben: die Nachbar-Icons haben unten object-fit:contain-Rand,
   das Feuer säße sonst mit den Händen ~5px tiefer (zu dicht an der Überschrift).
   translateY (kein margin) → h3 bleibt exakt auf Nachbar-Höhe. */
.icon-cell .mf-fire { transform: translateY(-13%); }

.icon-cell .mf-fire .mf-frame {
  width: 100%; height: auto; max-width: none;
  margin: 0; filter: none; transition: none;
  transform: translateX(-50%);
}
.icon-cell .mf-fire .mf-item-img {
  width: 100%; height: auto; max-width: none; margin: 0;
  filter: drop-shadow(0 6px 5px rgba(0, 30, 45, .28));
  transition: transform .18s ease;
}
/* Hover-Lift der Zelle: Feuer-Basis-Transforms beibehalten (kein Springen) */
.icon-cell:hover .mf-fire .mf-frame { transform: translateX(-50%); }
.icon-cell:hover .mf-fire .mf-item--marsh .mf-item-img { transform: none; }
.icon-cell:hover .mf-fire .mf-item--bread .mf-item-img { transform: scaleX(-1); }
.icon-cell:hover .mf-fire .mf-item--marsh.mf-perfect .mf-item-img { transform: scale(1.12); }
.icon-cell:hover .mf-fire .mf-item--bread.mf-perfect .mf-item-img { transform: scaleX(-1) scale(1.12); }