.fire-button {
  position: relative;
  width: 160px;
  height: 240px;
  background: #2a1a0a; /* Simple dark brown for fire base */
  border-bottom: 3px solid #ff3c00; /* Dark orange */
  /* Fire-shaped clip-path */
  clip-path: polygon(
    50% 0%,
    /* Top peak */ 70% 20%,
    /* Right flame tip */ 80% 40%,
    /* Right curve */ 100% 70%,
    /* Right base flare */ 70% 100%,
    /* Right base curve */ 30% 100%,
    /* Left base curve */ 0% 70%,
    /* Left base flare */ 20% 40%,
    /* Left curve */ 30% 20% /* Left flame tip */
  );
  cursor: pointer;
  overflow: hidden;
  animation: flame-glow 3s infinite ease-in-out;
  transition: transform 0.3s ease;
}

.fire-svg {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 160px;
  color: #ff3c00; /* Bright orange-red */
  filter: drop-shadow(0 0 4px #ff3c00);
  animation: fire-flicker 2s infinite ease-in-out;
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

.fire-flame {
  animation: flame-curl 1.8s infinite ease-in-out;
}

.fire-base {
  animation: base-pulse 2.5s infinite ease-in-out;
}

.fire-outline {
  animation: outline-shimmer 3s infinite ease-in-out;
}

.fire-label {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff8c00;
  font-size: 16px;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: label-glow 2s infinite ease-in-out;
}

/* Ember glow */
.ember-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.2), transparent);
  opacity: 0.4;
  animation: ember-rise 3s infinite ease-in-out;
}

/* Heat ripple */
.heat-ripple {
  position: absolute;
  width: 100%;
  height: 60%;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(255, 69, 0, 0.3), transparent);
  opacity: 0;
}

/* Fire flare */
.fire-flare {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, #ff4500 15%, transparent 50%);
  opacity: 0;
}

/* Spark drift */
.spark-drift {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 40px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  border-radius: 50%;
  border: 1px solid #ff8c00;
  opacity: 0;
}

/* Glow ring */
.glow-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: 0 0 20px #ff8c00 inset;
  opacity: 0;
}

/* Hover effects */
.fire-button:hover {
  transform: scale(1.05);
}

.fire-button:hover .fire-svg {
  transform: translateX(-50%) scale(1.1);
  filter: drop-shadow(0 0 8px #ff4500);
}

.fire-button:hover .fire-flame {
  animation: flame-rise 1.2s infinite ease-in-out;
}

.fire-button:hover .fire-base {
  animation: base-throb 1.5s infinite ease-in-out;
}

.fire-button:hover .heat-ripple {
  opacity: 0.5;
  animation: ripple-flow 2s infinite ease-in-out;
}

.fire-button:hover .ember-glow {
  opacity: 0.6;
  animation: ember-rise 2s infinite ease-in-out;
}

/* Click effects */
.fire-button:active {
  border-color: #ff3c00; /* Brighter orange */
  transform: scale(0.98);
}

.fire-button:active .fire-svg {
  transform: translateX(-50%) scale(1.05);
  filter: drop-shadow(0 0 12px #ff3c00);
  animation: fire-blaze 0.6s ease-out;
}

.fire-button:active .fire-flame {
  animation: flame-flare 0.6s ease-out;
}

.fire-button:active .fire-base {
  animation: base-surge 0.6s ease-out;
}

.fire-button:active .spark-drift {
  animation: spark-ascend 0.8s ease-out;
}

.fire-button:active .fire-flare {
  opacity: 0.7;
  animation: flare-burst 0.8s ease-out;
}

.fire-button:active .glow-ring {
  opacity: 0.8;
  animation: ring-glow 0.8s ease-out;
}

.fire-button:active .fire-label {
  animation: label-glow 0.2s infinite;
}

/* Animations */
@keyframes flame-glow {
  0%,
  100% {
    border-color: #ff8c00;
  }
  50% {
    border-color: #ffa500;
  }
}

@keyframes fire-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes flame-curl {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-2px) scaleY(1.05);
  }
}

@keyframes base-pulse {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.5px);
  }
}

@keyframes outline-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes label-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes ember-rise {
  0% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
}

@keyframes flame-rise {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-4px) scaleY(1.1);
  }
}

@keyframes base-throb {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1px) scale(1.05);
  }
}

@keyframes ripple-flow {
  0% {
    transform: translateY(40%);
    opacity: 0.5;
  }
  50% {
    transform: translateY(20%);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
}

@keyframes fire-blaze {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.15);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes flame-flare {
  0% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-6px) scaleY(1.2);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

@keyframes base-surge {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px) scale(1.1);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes spark-ascend {
  0% {
    transform: translateX(-50%) scale(0);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%) scale(1.5) translateY(-40px);
    opacity: 0;
  }
}

@keyframes flare-burst {
  0% {
    transform: scale(0);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes ring-glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}