body {
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  overscroll-behavior-y: none;
  /* Prevent pull-to-refresh on mobile */
}

/* Scrollbar styling for the text area */
textarea::-webkit-scrollbar {
  width: 8px;
}

textarea::-webkit-scrollbar-track {
  background: transparent;
}

textarea::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dark textarea::-webkit-scrollbar-thumb {
  background: #475569;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark textarea::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Smoke Animation */
@keyframes smokeRise {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-100px) scale(3) rotate(var(--rot));
    opacity: 0;
  }
}

/* Loading Screen Animations */
@keyframes beachBounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(-40px) rotate(180deg);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes shadowScale {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.4;
  }

  50% {
    transform: scaleX(0.6);
    opacity: 0.1;
  }
}

/* Out of Order Neon Flicker */
@keyframes neonFlicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 1;
    text-shadow: 0 0 10px #ff0000, 0 0 30px #ff0000;
  }

  20%,
  24%,
  55% {
    opacity: 0.1;
    text-shadow: none;
  }
}

/* Spark Animation */
@keyframes sparkFlash {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.5) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }

  50% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  75% {
    transform: translate(-2px, 1px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Toast Animation - Xbox Pop Style */
@keyframes xboxPop {
  0% {
    opacity: 0;
    transform: translate(0, 50px) scale(0.8);
  }

  50% {
    transform: translate(0, -10px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Shimmer Animation for XP Bar */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

/* Liquid Flow Animation for XP Bar */
@keyframes liquidFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}