/* ========== HEARTH CONTAINER ========== */
.hearth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 40px 0;
}

/* Ambient fire glow */
.hearth-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 140, 70, 0.18),
      rgba(255, 90, 60, 0.12),
      transparent 55%);
  filter: blur(80px);
  animation: glowBreath 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowBreath {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* ========== CHIMNEY STRUCTURE ========== */
.chimney {
  position: relative;
  width: 480px;
  height: 380px;
  background: 
    linear-gradient(135deg, #3a2520 0%, #2d1d18 50%, #221510 100%);
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 60px rgba(0, 0, 0, 0.4),
    inset -3px 0 8px rgba(0, 0, 0, 0.3),
    inset 3px 0 8px rgba(0, 0, 0, 0.3);
}

/* Brick texture overlay */
.brick-texture {
  position: absolute;
  inset: 0;
  border-radius: 8px 8px 0 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 32px,
      rgba(0, 0, 0, 0.15) 32px,
      rgba(0, 0, 0, 0.15) 34px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 80px,
      rgba(0, 0, 0, 0.12) 80px,
      rgba(0, 0, 0, 0.12) 82px
    );
  opacity: 0.6;
  pointer-events: none;
}

/* ========== MANTLE ========== */
.mantle {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(180deg, #4a3228 0%, #3d2a20 50%, #2f1f16 100%);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.6),
    inset 0 2px 4px rgba(255, 200, 150, 0.05),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.mantle-edge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
  border-radius: 0 0 4px 4px;
}

/* ========== FIREBOX ========== */
.firebox {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 240px;
  background: radial-gradient(ellipse at 50% 80%, #1a0d08, #0d0604);
  border-radius: 8px 8px 0 0;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.9),
    inset 0 20px 40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.firebox-shadow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

/* Back wall with texture */
.back-wall {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, #241410 0%, #1a0e0a 50%, #0f0806 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.back-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(0, 0, 0, 0.2) 28px,
      rgba(0, 0, 0, 0.2) 30px
    );
  opacity: 0.4;
}

/* ========== FIRE ========== */
.fire {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 200px;
  z-index: 5;
}

/* Fire background glow */
.fire-glow {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 150px;
  background: radial-gradient(ellipse at 50% 70%,
    rgba(255, 200, 100, 0.4),
    rgba(255, 120, 60, 0.25),
    transparent 70%);
  filter: blur(30px);
  animation: glowPulse 2.8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(0.95); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* ========== PIXEL FIRE CANVAS ========== */
#pixelFire {
  position: absolute;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 7;
  filter: drop-shadow(0 0 20px rgba(255, 140, 60, 0.6))
          drop-shadow(0 0 40px rgba(255, 100, 40, 0.4));
}

/* ========== LOGS ========== */
.logs {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 80px;
  z-index: 4;
}

.log {
  position: absolute;
  height: 38px;
  border-radius: 24px;
  background: linear-gradient(165deg,
    #1a0f0a 0%,
    #2d1810 25%,
    #3a1f14 50%,
    #2a1610 75%,
    #1f0e08 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.7),
    inset -4px -4px 8px rgba(0, 0, 0, 0.6),
    inset 4px 4px 8px rgba(80, 40, 20, 0.15);
}

/* Log texture rings */
.log-rings {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 45%,
      #3d2418 0%,
      #2d1810 30%,
      #1f100a 50%,
      #2d1810 70%,
      #3d2418 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.log-rings::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(80, 40, 20, 0.3);
  box-shadow: 0 0 0 3px rgba(80, 40, 20, 0.15);
}

/* Log positioning */
.l1 {
  bottom: 30px;
  left: 30px;
  width: 180px;
  transform: rotate(-8deg);
  z-index: 3;
}

.l2 {
  bottom: 20px;
  right: 35px;
  width: 160px;
  height: 35px;
  transform: rotate(10deg);
  z-index: 2;
}

.l3 {
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 210px;
  height: 42px;
  z-index: 4;
}

.l4 {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 150px;
  height: 32px;
  z-index: 1;
}

/* ========== ASH BED ========== */
.ash-bed {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 28px;
  background: linear-gradient(180deg,
    rgba(60, 50, 45, 0.4),
    rgba(40, 35, 32, 0.6),
    rgba(25, 20, 18, 0.8));
  border-radius: 50%;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.8),
    0 -2px 15px rgba(255, 120, 60, 0.15);
  z-index: 2;
}

/* ========== HEARTH FLOOR ========== */
.hearth-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(180deg, #2d1f18, #1f1510);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.5),
    0 -2px 8px rgba(255, 140, 80, 0.1);
  border-radius: 0 0 4px 4px;
}

/* ========== FIREPLACE RESPONSIVE ========== */
@media (max-width: 768px) {
  .chimney {
    width: 90vw;
    max-width: 400px;
    height: 340px;
  }
  
  .firebox {
    width: 90%;
    height: 220px;
  }
  
  .fire {
    height: 180px;
  }
  
  #pixelFire {
    width: 160px;
    height: 160px;
    bottom: 55px;
  }
  
  .logs {
    width: 90%;
  }
  
  .log {
    height: 32px;
  }
  
  .l3 {
    width: 150px;
  }
  
  .hearth-panel {
    max-width: 90%;
  }
}