body {
  font-family: sans-serif;
  background: #111;
  color: white;
  text-align: center;
  padding: 40px;
}

.dragon-area {
  margin-bottom: 40px;
}

#dragon {
  font-size: 120px;
  transition: all 0.3s;
}

.panel {
  margin: 30px auto;
  padding: 20px;
  background: #222;
  width: 420px;
  border-radius: 10px;
}

button {
  padding: 10px 20px;
  margin: 6px;
  font-size: 16px;
  cursor: pointer;
}

select {
  padding: 8px;
  font-size: 16px;
}

/* ANIMATIONS */

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fire {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(2);
  }
  100% {
    filter: brightness(1);
  }
}

.bounce {
  animation: bounce 0.6s;
}

.spin {
  animation: spin 1s;
}

.shake {
  animation: shake 0.6s;
}

.float {
  animation: float 1s;
}

.fire {
  animation: fire 0.6s;
}