@keyframes jokerSlideIn {
  from { transform: translateX(-150%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes balloonRise {
  from { bottom: -100px; }
  to { bottom: 100%; }
}

@keyframes laughFade {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0; }
}

@keyframes cardFall {
  to {
    top: 110%;
    transform: rotate(360deg);
  }
}

@keyframes glitch {
  0% { filter: hue-rotate(0deg) contrast(1); }
  50% { filter: hue-rotate(90deg) contrast(1.4); }
  100% { filter: hue-rotate(0deg) contrast(1); }
}

@keyframes burstUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-150px); opacity: 0; }
}

.joker-pop {
  position: fixed;
  left: 0;
  bottom: 50px;
  z-index: 9999;
  animation: jokerSlideIn 1s ease-out;
}

.laugh-text {
  position: fixed;
  font-size: 2rem;
  color: purple;
  font-weight: bold;
  animation: laughFade 2s ease-in-out;
  pointer-events: none;
  z-index: 9999;
}

.balloon {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 120px;
  background-image: url("https://jokerfun.lv/wp-content/uploads/2025/05/baloon.gif");
  background-size: contain;
  background-repeat: no-repeat;
  animation: balloonRise 5s linear;
  z-index: 9999;
}

.flicker-letter {
  display: inline-block;
  animation: flicker 1s infinite;
  color: #fab400;
}

.card-fall {
  position: fixed;
  top: -100px;
  width: 60px;
  height: 90px;
  background: transparent;
  font-size: 64px;
  text-align: center;
  line-height: 90px;
  transform: rotate(0deg);
  animation: cardFall 5s linear;
  z-index: 9999;
}

.glitch-flash {
  animation: glitch 0.5s ease-in-out;
}

.emoji-burst {
  position: fixed;
  font-size: 64px;
  bottom: 10px;
  animation: burstUp 3s ease-in-out;
  z-index: 9999;
}

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

@keyframes zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px lime; }
  50% { box-shadow: 0 0 20px lime; }
  100% { box-shadow: 0 0 5px lime; }
}

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

.zoom {
  animation: zoom 1s ease-in-out;
}

.glow {
  animation: glow 2s ease-in-out;
}

#audio-toggle-btn {
	position: fixed;
	bottom: 60px;
	left: 11px;  /* moved to left */
	width: 45px;
	height: 45px;
	background: #333;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: background 0.3s ease;
}

@media (max-width: 768px) {
	#audio-toggle-btn {
		width: 35px;
		height: 35px;
		bottom: 50px;
	}
	
}

#audio-toggle-btn:hover {
	background: #555;
}
#audio-toggle-btn svg {
	fill: #fff;
	width: 24px;
	height: 24px;
}