/* $BURN Custom Styles & Animations */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #080608;
}

::-webkit-scrollbar-thumb {
  background: #3c140a;
  border-radius: 5px;
  border: 2px solid #080608;
}

::-webkit-scrollbar-thumb:hover {
  background: #ea580c;
}

/* Base resets & glowing effects */
body {
  background-color: #080608;
  color: #f1f5f9;
}

/* Glassmorphism styling */
.glass-panel {
  background: rgba(20, 12, 10, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(234, 88, 12, 0.25);
}

/* Text flame glow */
.flame-glow-text {
  text-shadow: 0 0 10px rgba(249, 115, 22, 0.8),
               0 0 20px rgba(234, 88, 12, 0.6),
               0 0 40px rgba(220, 38, 38, 0.4);
}

/* Button fire shimmer animation */
@keyframes flameShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-flame-btn {
  background-size: 200% 200%;
  animation: flameShimmer 3s ease infinite;
}

/* Glowing outline for active phase */
.flame-border-pulse {
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.35);
  border-color: rgba(249, 115, 22, 0.7);
}

/* Toast show state */
#toastNotification.show {
  transform: translateY(0);
  opacity: 1;
}

/* Smooth transitions for interactive elements */
button, a {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Playground Tabs & Game Styles */
.pg-tab-btn.active {
  background: linear-gradient(to right, #fbbf24, #f97316, #ef4444) !important;
  color: #000000 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 25px -5px rgba(255, 59, 0, 0.4) !important;
}

/* Whack-a-Jeet animations */
.target-item.up {
  transform: translateY(0) !important;
}

.lava-pit.hit {
  animation: flameImpact 0.3s ease-out;
}

@keyframes flameImpact {
  0% {
    box-shadow: inset 0 0 40px rgba(255, 69, 0, 0.9), 0 0 30px rgba(255, 170, 0, 0.8);
    transform: scale(0.95);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

.shake-screen {
  animation: screenShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes screenShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Meme template active button */
.meme-tpl-btn.active {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

.soundboard-btn:hover {
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.45);
}