body {
  font-family: "Onest", sans-serif;
}

.text-anton {
  font-family: "Anton", sans-serif;
}

/* ====== Waste Sorting Game ====== */
.waste-item {
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.2s;
}

.waste-item.dragging {
  transform: scale(1.1);
}

.waste-item:active {
  cursor: grabbing;
}

.bin-dropzone {
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s;
}

.bin-dropzone.border-green-400 {
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.3);
}

.bin-dropzone.border-red-400 {
  box-shadow: 0 0 30px rgba(248, 113, 113, 0.3);
}

.sorted-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px 8px;
  transform: scale(0.85);
}

.sorted-item img {
  width: 28px;
  height: 28px;
}

.sorted-item span {
  font-size: 8px;
}

/* Shake animation for wrong bin */
@keyframes shakeWrong {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-8px);
  }
  30% {
    transform: translateX(8px);
  }
  45% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-3px);
  }
  90% {
    transform: translateX(3px);
  }
}

.shake-wrong {
  animation: shakeWrong 0.5s ease-in-out;
  border: 1px solid rgba(248, 113, 113, 0.6) !important;
  border-radius: 16px;
}

/* Touch ghost styling */
.touch-ghost {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* Success animation */
#sort-success {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}