/* カスタムアニメーション */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes pulse-fast {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.shake-animation {
  animation: shake 0.5s ease-in-out infinite;
}

.pulse-animation {
  animation: pulse-fast 0.3s ease-in-out infinite;
}

/* キャラクターのスムーズな遷移 */
#character * {
  transition: all 0.3s ease-in-out;
}

/* プログレスバーのグラデーション変化 */
#progress-bar.stage-1 {
  background: linear-gradient(to right, #4ade80, #3b82f6);
}

#progress-bar.stage-2 {
  background: linear-gradient(to right, #fbbf24, #f59e0b);
}

#progress-bar.stage-3 {
  background: linear-gradient(to right, #fb923c, #f97316);
}

#progress-bar.stage-4 {
  background: linear-gradient(to right, #f87171, #ef4444);
}

#progress-bar.stage-5 {
  background: linear-gradient(to right, #dc2626, #991b1b);
}

/* タイマー表示の色変化 */
#timer-display.warning {
  color: #f59e0b;
}

#timer-display.danger {
  color: #ef4444;
  animation: pulse-fast 0.5s ease-in-out infinite;
}

/* ボタンのホバーエフェクト */
button {
  transition: all 0.2s ease-in-out;
}

button:active {
  transform: scale(0.95);
}

/* 完了時のエフェクト */
.completed {
  filter: grayscale(100%);
  opacity: 0.7;
}